design.tsx

import { clsx } from 'clsx';
import { tv, type VariantProps } from 'tailwind-variants';
import { XIcon } from '@phosphor-icons/react';
import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
import type { ButtonHTMLAttributes, CSSProperties, HTMLAttributes, InputHTMLAttributes, ReactNode, RefObject } from 'react';
import { stepFocus } from './focus-step';

// App-wide type scale, color strategy, and chrome conventions: see
// docs/specs/theme.md and AGENTS.md.

/** Desktop pane-header height. Geometry derived from the header (such as the
 * elevated zoom inset) must use this constant so the chrome stays proportional. */
export const PANE_HEADER_HEIGHT_PX = 30;

// Pane headers/doors own the top corners; terminal bodies own the bottom.
// All terminal-radius constants derive from this single source so the CSS
// class, the SVG-friendly px value, and the inline-style rem string can't
// drift apart. Tailwind's `lg` step is 0.5rem; if that ever changes, both
// the class names and BASE_REM must move together.
// Keep the class names as literals so Tailwind's scanner emits them.
const TERMINAL_BORDER_RADIUS_REM = 0.5;
export const TERMINAL_BORDER_RADIUS_PX = TERMINAL_BORDER_RADIUS_REM * 16;
export const TERMINAL_TOP_RADIUS_CLASS = 'rounded-t-lg';
export const TERMINAL_BOTTOM_RADIUS_CLASS = 'rounded-b-lg';
export const TERMINAL_SELECTION_BORDER_RADIUS = `${TERMINAL_BORDER_RADIUS_REM}rem`;

// The gutter between panes (and around the wall's top/sides — the baseboard
// side stays a tight 2px). Deliberately ODD: the passthrough ring is a 1px
// stroke, and a 1px stroke can only sit dead-center of a gutter on whole
// device pixels when the gutter is odd. Consumed by LATH_LAYOUT_OPTS.gap and
// mirrored by the Tailwind inset classes in Wall.tsx / Baseboard.tsx
// (`*-1.75` = 7px) — keep them in sync.
export const PANE_GUTTER_PX = 7;

// Concentric-corners rule: when a rounded outline wraps a rounded edge, both
// arcs must share a corner center — outer radius = inner radius + offset.
// Never tighten the inner radius to compensate. The pane focus ring draws on
// a rect inflated by SELECTION_RING_INFLATE_PX, so its radius grows by the
// same amount; rings at zero offset (doors, the Lath drop preview) keep the
// pane radius as-is.
//
// The inflate is derived so the ring is CENTERED in the gutter: the 1px
// passthrough border draws just inside the inflated rect, spanning
// [INFLATE-1, INFLATE] from the pane edge, so its center sits at
// INFLATE - 0.5 = PANE_GUTTER_PX / 2. (Both selection-ring strokes center on
// the same line via their path inset — see SelectionRing.)
export const SELECTION_RING_INFLATE_PX = (PANE_GUTTER_PX + 1) / 2;
export const PANE_SELECTION_RING_RADIUS_PX = TERMINAL_BORDER_RADIUS_PX + SELECTION_RING_INFLATE_PX;

// Focus-ring motion. The selection ring's travel between panes/doors, the pane
// header's active/inactive palette crossfade, and the ring's unfocus-saturate
// fade all run on this single duration so they resolve as one gesture. Half the
// Lath layout motion (LATH_MOTION_MS = 440) — the ring is a light overlay chasing
// geometry the wall has already committed, so it settles quicker. The ring travel
// itself is a JS tween on a pointer-events-none overlay (WorkspaceSelectionOverlay
// + rect-tween.ts), the same per-frame carve-out the Lath animator holds against
// DESIGN.md's "don't animate layout properties" rule.
export const FOCUS_MOTION_MS = 220;

// The pane-header palette crossfade, as a complete Tailwind literal so the
// scanner emits it (a template built from FOCUS_MOTION_MS would be invisible to
// it). The duration + house curve are asserted against FOCUS_MOTION_MS in
// design.test.ts so this literal can't silently drift from the ring's timing.
export const HEADER_PALETTE_TRANSITION_CLASS =
  'transition-colors duration-[220ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none';

// Letter-spacing for the small semibold TODO pill — wider tracking keeps the
// tiny label legible. Shared so both pill sites stay in sync.
export const TODO_PILL_TRACKING_CLASS = 'tracking-[0.08em]';

// Chrome for small anchored popovers (title candidates, TODO preview, pane
// context menu, rename warning). Text size and padding vary per popover and
// stay at the call site; the surface recipe is shared so they can't drift.
export const POPUP_SURFACE_CLASS = 'z-[1000] rounded border border-border bg-surface-raised font-mono text-foreground shadow-md';

export function PopupButtonRow({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={clsx(
        'flex items-stretch overflow-hidden rounded border border-border bg-surface-raised font-mono text-sm text-foreground shadow-md',
        className,
      )}
      {...props}
    />
  );
}

export const popupButton = tv({
  base: 'm-0 px-1.5 py-0.5',
  variants: {
    tone: {
      foreground: '',
      muted: 'text-muted hover:text-foreground',
    },
    flashed: {
      true: 'animate-copy-flash bg-header-active-bg/25 text-header-active-bg',
      false: 'hover:bg-foreground/10',
    },
  },
  defaultVariants: { tone: 'foreground', flashed: false },
});

export type PopupButtonVariants = VariantProps<typeof popupButton>;

export interface ModalRect {
  top: number;
  left: number;
  width: number;
  height: number;
}

export const MODAL_LAYERS = {
  app: 50,
  pane: 100,
  critical: 9999,
} as const;

export type ModalLayer = keyof typeof MODAL_LAYERS;

export const modalOverlay = tv({
  base: 'flex items-center justify-center',
  variants: {
    scope: {
      viewport: 'fixed inset-0',
      // The target veil covers the target's exact rect (zero offset), so the
      // Concentric-Corners Rule (DESIGN.md) makes its radius EQUAL the target's
      // — panes round at rounded-lg (TERMINAL_*_RADIUS_CLASS above).
      target: 'rounded-lg',
    },
    backdrop: {
      standard: 'bg-app-bg/50',
      strong: 'bg-app-bg/55',
    },
  },
  defaultVariants: { scope: 'viewport', backdrop: 'standard' },
});

export type ModalOverlayVariants = VariantProps<typeof modalOverlay>;

export const modalSurface = tv({
  base: 'rounded-lg border border-border bg-surface-raised font-mono text-foreground shadow-lg',
  variants: {
    padding: {
      none: 'p-0',
      compact: 'p-3',
      default: 'p-4',
      spacious: 'px-6 py-4',
    },
    align: {
      start: 'text-left',
      center: 'text-center',
    },
    elevation: {
      raised: 'shadow-lg',
      modal: 'shadow-2xl',
    },
  },
  defaultVariants: { padding: 'default', align: 'start', elevation: 'raised' },
});

export type ModalSurfaceVariants = VariantProps<typeof modalSurface>;

export const modalActionButton = tv({
  base: 'rounded px-2 py-1.5 text-xs transition-colors focus-visible:outline focus-visible:outline-1 focus-visible:outline-focus-ring disabled:cursor-not-allowed disabled:opacity-45',
  variants: {
    tone: {
      primary: 'bg-header-active-bg text-header-active-fg',
      secondary: 'border border-border text-muted hover:bg-header-inactive-bg hover:text-foreground',
    },
  },
  defaultVariants: { tone: 'secondary' },
});

export type ModalActionButtonVariants = VariantProps<typeof modalActionButton>;

export const modalReviewBlock = tv({
  base: 'block rounded border border-border bg-app-bg font-mono text-foreground whitespace-pre-wrap',
  variants: {
    density: {
      compact: 'p-2 text-xs',
      default: 'px-2.5 py-2 text-sm leading-relaxed',
    },
    overflow: {
      short: 'max-h-32 overflow-auto',
      medium: 'max-h-40 overflow-auto',
    },
    wrap: {
      breakAll: 'break-all',
      breakWords: 'break-words',
    },
  },
  defaultVariants: {
    density: 'default',
    overflow: 'medium',
    wrap: 'breakWords',
  },
});

export type ModalReviewBlockVariants = VariantProps<typeof modalReviewBlock>;
export type ModalReviewBlockProps = HTMLAttributes<HTMLDivElement> & ModalReviewBlockVariants;

export function ModalReviewBlock({
  density,
  overflow,
  wrap,
  className,
  ...props
}: ModalReviewBlockProps) {
  return (
    <div
      className={clsx(modalReviewBlock({ density, overflow, wrap }), className)}
      {...props}
    />
  );
}

export const modalIconButton = tv({
  base: 'shrink-0 rounded p-0.5 text-muted transition-colors hover:bg-foreground/10 hover:text-foreground focus-visible:outline focus-visible:outline-1 focus-visible:outline-focus-ring',
});

export type ModalCloseButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;

export const ModalCloseButton = forwardRef<HTMLButtonElement, ModalCloseButtonProps>(
  function ModalCloseButton({
    children,
    className,
    type = 'button',
    ...props
  }, ref) {
    const ariaLabel = props['aria-label'] ?? 'Close';
    return (
      <button
        ref={ref}
        type={type}
        {...props}
        aria-label={ariaLabel}
        className={clsx(modalIconButton(), className)}
      >
        {children ?? <XIcon size={13} weight="bold" />}
      </button>
    );
  },
);

// Form controls. The app has no checkbox anywhere: a boolean is an OnOffSwitch,
// and a number is a NumericInput. Both live here so dialogs share one vocabulary
// rather than each restyling a bare <input> (DESIGN.md -> Inputs).

export type NumericInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'value'> & {
  value: string;
  onChange: (next: string) => void;
  /** Max digits the field holds — sizes the box so rows stay compact. */
  chars?: number;
};

/**
 * A compact underlined number field. Filters non-numeric input at the keystroke
 * rather than relying on `type="number"`, whose spinners and locale parsing do
 * not fit the app's chrome.
 */
export const NumericInput = forwardRef<HTMLInputElement, NumericInputProps>(
  function NumericInput({ value, onChange, chars = 4, className, style, ...props }, ref) {
    return (
      <input
        ref={ref}
        type="text"
        inputMode="numeric"
        value={value}
        onChange={(e) => onChange(e.target.value.replace(/[^0-9.]/g, ''))}
        style={{ width: `calc(${chars}ch + 0.5rem)`, ...style }}
        className={clsx(
          'border-0 border-b border-border bg-transparent px-0.5 py-0.5 font-mono text-foreground outline-none focus:border-focus-ring',
          className,
        )}
        {...props}
      />
    );
  },
);

/**
 * Left margin that lines content up under an `OnOffSwitch`'s label rather than
 * its pill: the switch's `w-14` plus the usual `gap-3` between them. Lives here
 * so it moves with the switch's own geometry.
 */
export const UNDER_SWITCH_INDENT = 'ml-[4.25rem]';

/**
 * The app's boolean control: a two-position pill reading "on | off". Rendered as
 * a `role="switch"` button, so it is disabled natively by a surrounding
 * `<fieldset disabled>`.
 */
export function OnOffSwitch({
  on,
  onEnable,
  onDisable,
  label,
}: {
  on: boolean;
  onEnable: () => void;
  onDisable: () => void;
  /** Describes what is being switched; announced with the current position. */
  label: string;
}) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={on}
      aria-label={`${label} ${on ? 'on' : 'off'}`}
      onClick={() => (on ? onDisable() : onEnable())}
      className="relative inline-flex h-5 w-14 items-center rounded-full border border-border bg-app-bg text-sm font-medium"
    >
      <span
        aria-hidden
        className="absolute inset-y-0.5 w-[calc(50%-2px)] rounded-full bg-header-active-bg/25 transition-transform"
        style={{ transform: on ? 'translateX(2px)' : 'translateX(calc(100% + 2px))' }}
      />
      <span className={clsx('z-10 flex-1 text-center', on ? 'text-header-active-bg' : 'text-muted')}>on</span>
      <span className={clsx('z-10 flex-1 text-center', on ? 'text-muted' : 'text-header-active-bg')}>off</span>
    </button>
  );
}

export function useMeasuredElementRect(element: HTMLElement | null): ModalRect | null {
  const [rect, setRect] = useState<ModalRect | null>(null);

  useLayoutEffect(() => {
    if (!element) {
      setRect(null);
      return;
    }

    const update = () => {
      const next = element.getBoundingClientRect();
      setRect({
        top: next.top,
        left: next.left,
        width: next.width,
        height: next.height,
      });
    };

    update();
    const ro = new ResizeObserver(update);
    ro.observe(element);
    window.addEventListener('resize', update);
    return () => {
      ro.disconnect();
      window.removeEventListener('resize', update);
    };
  }, [element]);

  return rect;
}

export function ModalOverlay({
  children,
  targetElement,
  layer = 'pane',
  zIndex,
  backdrop = 'standard',
  className,
  style,
  ...props
}: HTMLAttributes<HTMLDivElement> & ModalOverlayVariants & {
  targetElement?: HTMLElement | null;
  layer?: ModalLayer;
  zIndex?: number;
}) {
  const rect = useMeasuredElementRect(targetElement ?? null);
  const resolvedZIndex = zIndex ?? MODAL_LAYERS[layer];
  const overlayStyle: CSSProperties = rect
    ? {
        position: 'fixed',
        top: rect.top,
        left: rect.left,
        width: rect.width,
        height: rect.height,
        zIndex: resolvedZIndex,
        ...style,
      }
    : { zIndex: resolvedZIndex, ...style };

  return (
    <div
      className={clsx(modalOverlay({ scope: rect ? 'target' : 'viewport', backdrop }), className)}
      style={overlayStyle}
      {...props}
    >
      {children}
    </div>
  );
}

export type ModalSurfaceProps = HTMLAttributes<HTMLDivElement> & ModalSurfaceVariants;

export const ModalSurface = forwardRef<HTMLDivElement, ModalSurfaceProps>(function ModalSurface({
  children,
  padding,
  align,
  elevation,
  className,
  ...props
}, ref) {
  return (
    <div
      ref={ref}
      className={clsx(modalSurface({ padding, align, elevation }), className)}
      {...props}
    >
      {children}
    </div>
  );
});

export type ModalFrameProps = HTMLAttributes<HTMLDivElement> & ModalSurfaceVariants & {
  titleId: string;
  targetElement?: HTMLElement | null;
  layer?: ModalLayer;
  backdrop?: ModalOverlayVariants['backdrop'];
  overlayClassName?: string;
  initialFocusRef?: RefObject<HTMLElement | null>;
  onEscape?: () => void;
};

export function ModalFrame({
  children,
  titleId,
  targetElement,
  layer,
  backdrop,
  overlayClassName,
  initialFocusRef,
  onEscape,
  padding,
  align,
  elevation,
  className,
  ...props
}: ModalFrameProps) {
  const surfaceRef = useRef<HTMLDivElement>(null);
  useModalFocusTrap(surfaceRef, { initialFocusRef, onEscape });

  return (
    <ModalOverlay
      targetElement={targetElement}
      layer={layer}
      backdrop={backdrop}
      className={overlayClassName}
    >
      <ModalSurface
        ref={surfaceRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby={titleId}
        padding={padding}
        align={align}
        elevation={elevation}
        className={className}
        {...props}
      >
        {children}
      </ModalSurface>
    </ModalOverlay>
  );
}

const MODAL_FOCUSABLE_SELECTOR = [
  'a[href]',
  'button:not([disabled])',
  'input:not([disabled])',
  'select:not([disabled])',
  'textarea:not([disabled])',
  '[tabindex]:not([tabindex="-1"])',
].join(',');

function useModalFocusTrap<TModal extends HTMLElement, TInitial extends HTMLElement>(
  modalRef: RefObject<TModal | null>,
  {
    initialFocusRef,
    onEscape,
  }: {
    initialFocusRef?: RefObject<TInitial | null>;
    onEscape?: () => void;
  } = {},
): void {
  useEffect(() => {
    initialFocusRef?.current?.focus();
  }, [initialFocusRef]);

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      const modal = modalRef.current;
      if (!modal) return;

      if (event.key === 'Escape') {
        if (onEscape) {
          event.preventDefault();
          event.stopPropagation();
          onEscape();
        }
        return;
      }

      if (event.key !== 'Tab') return;

      event.preventDefault();
      stepFocus(
        Array.from(modal.querySelectorAll<HTMLElement>(MODAL_FOCUSABLE_SELECTOR)),
        event.shiftKey ? -1 : 1,
      );
    };

    window.addEventListener('keydown', handleKeyDown, true);
    return () => window.removeEventListener('keydown', handleKeyDown, true);
  }, [modalRef, onEscape]);
}

// Chrome buttons: icon-only and labeled triggers used in the standalone app
// bar, plus the Windows/Linux native-style window controls. All inherit text
// color from the surrounding chrome so they tint with the active/inactive
// header palette — except `windowClose`, whose hover red matches the native
// OS close button across themes.
export const chromeButton = tv({
  base: 'flex items-center transition-colors',
  variants: {
    kind: {
      icon: 'h-5 min-w-5 justify-center rounded hover:bg-current/10',
      labeled: 'h-5 min-w-5 gap-1 rounded px-1.5 text-xs text-inherit hover:bg-current/10',
      window: 'w-11 justify-center text-inherit hover:bg-current/10',
      windowClose: 'w-11 justify-center text-inherit hover:bg-[#b92a1b] hover:text-white',
    },
  },
  defaultVariants: { kind: 'icon' },
});

export type ChromeButtonVariants = VariantProps<typeof chromeButton>;

/** Pane-header zoom control. The zoomed pane swaps its header foreground and
 * background tokens so Unzoom reads as the active escape hatch in every theme. */
export function paneZoomButtonClass(zoomed: boolean, activeHeader: boolean): string {
  return clsx(
    // The zoom pill's tokens flip with the header palette, so it rides the same
    // crossfade timing as the header background instead of the default transition.
    `flex h-5 min-w-5 items-center justify-center rounded ${HEADER_PALETTE_TRANSITION_CLASS}`,
    zoomed
      ? activeHeader
        ? 'bg-header-active-fg text-header-active-bg'
        : 'bg-header-inactive-fg text-header-inactive-bg'
      : 'hover:bg-current/10',
  );
}

/** Keyboard shortcut rendered as `[keys]` in muted color. Use everywhere key
 *  bindings appear in UI text so the bracket convention is consistent. */
export function Shortcut({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  return <span className={clsx('text-muted', className)}>[{children}]</span>;
}

/** Render a string with any `[...]` segments replaced by <Shortcut>. */
export function renderShortcuts(text: string): ReactNode[] {
  const parts: ReactNode[] = [];
  const regex = /\[([^\]]+)\]/g;
  let lastIndex = 0;
  let idx = 0;
  let match: RegExpExecArray | null;
  while ((match = regex.exec(text)) !== null) {
    if (match.index > lastIndex) {
      parts.push(text.slice(lastIndex, match.index));
    }
    parts.push(<Shortcut key={idx++}>{match[1]}</Shortcut>);
    lastIndex = regex.lastIndex;
  }
  if (lastIndex < text.length) {
    parts.push(text.slice(lastIndex));
  }
  return parts;
}