zidane-ui 9.1.1 → 9.1.4

package/src/components/RowActionsMenu.tsx

@@ -1,383 +0,0 @@
-/**
- * Row actions menu: the one small action menu behind right-clicks and
- * 3-dots triggers (sidebar rows, transcript turns, panel toolbars).
- *
- * Controlled (`open` / `onClose`), on the shared floating surface: at the
- * cursor when `position` is set, else under `anchorRef` with its right edge
- * on the trigger's. Placement flips and clamps inside the viewport.
- *
- * Dismissal: outside press or Esc (`useDismiss`). Esc is stopped so App's
- * global Esc (which clears the active session) never sees it. A pick closes
- * the menu BEFORE running the action so a destructive `confirm()` never
- * lands on top of a still-open menu.
- *
- * Focus: opening moves it to the first enabled row (arrows, Home / End and
- * first letters move on from there). Esc and a pick hand it back to the
- * trigger, or for a right-click to whatever held it before.
- *
- * Rows of different `group`s get a divider between them. A row with `items`
- * opens them beside it (one level): resting the pointer on it, a click, → or
- * its shortcut; ← or Esc goes back to it. Pointing at another row closes
- * them after a moment, time for the pointer to cross over to them.
- */
-import { useEffect, useRef, useState, type CSSProperties } from 'react';
-
-import { FloatingSurface } from './floating/FloatingSurface';
-import { returnFocus, useDismiss } from './floating/usePopover';
-import { KeyCombo } from './Keycap';
-import { focusMenuRow, Menu, MenuRow, MenuSeparator } from './Menu';
-
-interface RowActionBase {
-  /** Stable identifier, used as the row's key. */
-  id: string;
-  /** Text of the row. */
-  label: string;
-
-  /** Red-tinted treatment for destructive actions (e.g. Delete). */
-  destructive?: boolean;
-
-  /** Grays the row out and ignores clicks + shortcut dispatch (e.g. while the action is already running). */
-  disabled?: boolean;
-
-  /**
-   * Keyboard shortcut active while the menu is open: one key (`R`), pressed
-   * alone, or a chord (`cmd+d`, the modifiers of {@link KeyCombo}), pressed with
-   * exactly those modifiers. Rendered as keycaps on the right of the row and
-   * invoked on `keydown` (case-insensitive). First match wins.
-   */
-  shortcut?: string;
-
-  /** A row whose group differs from the row above it gets a divider between them. */
-  group?: string;
-
-  /** The current choice: a check on the row (the space a session is in). */
-  checked?: boolean;
-}
-
-/** A row that runs an action. */
-interface RowActionLeaf extends RowActionBase {
-  /** Called when the row is picked by click or shortcut. The menu closes first. */
-  onSelect: () => void;
-  items?: undefined;
-}
-
-/** A row that opens more rows beside it. */
-interface RowActionParent extends RowActionBase {
-  /** The rows it opens, in order. They don't open rows of their own. */
-  items: readonly RowActionItem[];
-  onSelect?: undefined;
-}
-
-/** One entry of a {@link RowActionsMenu}: a row that runs an action, or one that opens more rows beside it. */
-export type RowActionItem = RowActionLeaf | RowActionParent;
-
-/** Props for {@link RowActionsMenu}. */
-export interface RowActionsMenuProps {
-  /** Whether the menu is shown. */
-  open: boolean;
-
-  /** Trigger to anchor against (3-dots path). Ignored when `position` is set. */
-  anchorRef?: React.RefObject<HTMLElement | null>;
-
-  /** Viewport point for the menu's top-left (right-click path). Wins over `anchorRef`. */
-  position?: { x: number; y: number } | null;
-
-  /** Called on an outside press, or when a row is picked. */
-  onClose: () => void;
-  /** The rows, in order. */
-  items: readonly RowActionItem[];
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/** How long the pointer rests on a row before the rows it holds open beside it. */
-const SUB_OPEN_MS = 80;
-/** How long they stay once the pointer is on another row: time to cross over to them. */
-const SUB_CLOSE_MS = 220;
-
-const opens = (item: RowActionItem) => !item.disabled && item.items !== undefined && item.items.length > 0;
-
-const MODIFIERS: Readonly<Record<string, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>> = {
-  cmd: 'metaKey',
-  meta: 'metaKey',
-  ctrl: 'ctrlKey',
-  alt: 'altKey',
-  option: 'altKey',
-  shift: 'shiftKey',
-};
-
-/** The shortcut's key and modifiers: `cmd+d` → `d` with Meta. */
-function parseShortcut(spec: string): { key: string; modifiers: Set<string> } {
-  const parts = spec.toLowerCase().split('+');
-  const key = parts.pop() ?? '';
-  return { key, modifiers: new Set(parts.flatMap((p) => MODIFIERS[p] ?? [])) };
-}
-
-function matchesShortcut(event: KeyboardEvent, spec: string): boolean {
-  const { key, modifiers } = parseShortcut(spec);
-  if (event.key.toLowerCase() !== key) return false;
-  return (['metaKey', 'ctrlKey', 'altKey', 'shiftKey'] as const).every((m) => event[m] === modifiers.has(m));
-}
-
-const ARIA_MODIFIERS: Readonly<Record<string, string>> = {
-  metaKey: 'Meta',
-  ctrlKey: 'Control',
-  altKey: 'Alt',
-  shiftKey: 'Shift',
-};
-
-/** The shortcut as `aria-keyshortcuts` spells it: `cmd+d` → `Meta+D`. */
-function ariaShortcut(spec: string): string {
-  const { key, modifiers } = parseShortcut(spec);
-  return [...[...modifiers].map((m) => ARIA_MODIFIERS[m]), key.length === 1 ? key.toUpperCase() : key].join('+');
-}
-
-/**
- * Mounted from its first open on (then kept, for the exit and the next
- * open): every sidebar row and transcript turn carries one, and a closed
- * menu's surface, presence and dismiss listeners per row were most of what
- * mounting a list of rows cost.
- *
- * @param props - Component props: `open`, `onClose`, `items`, and either `anchorRef` or `position`.
- */
-export function RowActionsMenu(props: RowActionsMenuProps) {
-  const [armed, setArmed] = useState(props.open);
-  if (props.open && !armed) setArmed(true);
-  return armed ? <ArmedRowActionsMenu {...props} /> : null;
-}
-
-function ArmedRowActionsMenu({ open, anchorRef, position, onClose, items, className, style }: RowActionsMenuProps) {
-  const surfaceRef = useRef<HTMLDivElement | null>(null);
-  const subSurfaceRef = useRef<HTMLDivElement | null>(null);
-  const returnTo = useRef<HTMLElement | null>(null);
-  // Read on open only: the effect below must not re-run (and re-focus) when a parent re-renders.
-  const placement = useRef({ anchorRef, position });
-  placement.current = { anchorRef, position };
-
-  /*
-   * The row whose rows are open beside it. Kept after they close (`open`
-   * false) so they still show while their exit plays. Opened from the
-   * keyboard or a click, they take focus; from the pointer resting, not.
-   */
-  const [sub, setSub] = useState<{ id: string; row: HTMLElement; focus: boolean; open: boolean } | null>(null);
-  if (!open && sub?.open) setSub({ ...sub, open: false });
-  const subRows = sub ? items.find((item) => item.id === sub.id)?.items : undefined;
-  const hover = useRef<{ timer?: ReturnType<typeof setTimeout> }>({});
-
-  useEffect(() => {
-    if (!open) return;
-    const { anchorRef: anchor, position: at } = placement.current;
-    const active = document.activeElement;
-    // A row of a menu still playing its exit is no place to come back to: keep the earlier target.
-    const before =
-      active instanceof HTMLElement && active !== document.body && !active.closest('.zg-float') ? active : null;
-    returnTo.current = (!at && anchor?.current) || before || returnTo.current;
-    if (surfaceRef.current) focusMenuRow(surfaceRef.current);
-  }, [open]);
-
-  useEffect(() => {
-    if (sub?.open && sub.focus && subSurfaceRef.current) focusMenuRow(subSurfaceRef.current);
-  }, [sub]);
-
-  // A pending open or close must not outlive the menu.
-  useEffect(() => {
-    const pending = hover.current;
-    if (!open) clearTimeout(pending.timer);
-    return () => clearTimeout(pending.timer);
-  }, [open]);
-
-  const clearHover = () => clearTimeout(hover.current.timer);
-  const later = (ms: number, run: () => void) => {
-    clearHover();
-    hover.current.timer = setTimeout(run, ms);
-  };
-  const openSub = (item: RowActionItem, row: HTMLElement | null | undefined, focus: boolean) => {
-    clearHover();
-    if (row && opens(item)) setSub({ id: item.id, row, focus, open: true });
-  };
-  /** Close the rows beside a row; from the keyboard, focus goes back to that row. */
-  const closeSub = (refocus: boolean) => {
-    clearHover();
-    if (refocus) sub?.row.focus({ preventScroll: true });
-    setSub((current) => (current?.open ? { ...current, open: false } : current));
-  };
-  const pointAt = (item: RowActionItem, row: HTMLElement) => {
-    if (opens(item)) {
-      if (sub?.open && sub.id === item.id) clearHover();
-      else later(SUB_OPEN_MS, () => setSub({ id: item.id, row, focus: false, open: true }));
-    } else if (sub?.open) later(SUB_CLOSE_MS, () => closeSub(false));
-    else clearHover();
-  };
-
-  const finish = () => {
-    clearHover();
-    // A pick among the rows beside a row: they held focus, not the menu.
-    const holder = subSurfaceRef.current?.contains(document.activeElement) ? subSurfaceRef.current : surfaceRef.current;
-    onClose();
-    returnFocus(returnTo.current, holder);
-  };
-  const pick = (item: RowActionItem, row: HTMLElement) => {
-    if (item.items) {
-      openSub(item, row, true);
-      return;
-    }
-    finish();
-    item.onSelect();
-  };
-
-  useDismiss(open, [anchorRef, surfaceRef, subSurfaceRef], {
-    onOutsidePress: onClose,
-    // Esc among the rows beside a row goes back to it; otherwise it closes the menu.
-    onEscape: () => (sub?.open ? closeSub(true) : finish()),
-    onKeyDown: (event) => {
-      // Never while the user is typing into a rename field or an editor. A
-      // shortcut matches its exact modifiers, so Cmd+R and friends pass through.
-      const modified = event.metaKey || event.ctrlKey || event.altKey || event.shiftKey;
-      const active = document.activeElement;
-      const isTyping =
-        active instanceof HTMLInputElement ||
-        active instanceof HTMLTextAreaElement ||
-        (active instanceof HTMLElement && active.isContentEditable);
-      if (isTyping) return;
-
-      const inSub = Boolean(subSurfaceRef.current?.contains(active));
-      if (!modified && event.key === 'ArrowLeft' && inSub) {
-        event.preventDefault();
-        event.stopPropagation();
-        closeSub(true);
-        return;
-      }
-      if (!modified && event.key === 'ArrowRight' && !inSub) {
-        const row = active instanceof HTMLElement ? active.closest<HTMLElement>('[data-item]') : null;
-        const parent = row ? items.find((item) => item.id === row.dataset.item) : undefined;
-        if (!parent || !opens(parent)) return;
-        event.preventDefault();
-        event.stopPropagation();
-        openSub(parent, row, true);
-        return;
-      }
-      // Among the rows beside a row, letters jump between them (the menu's own keys).
-      if (inSub) return;
-
-      const match = items.find((item) => !item.disabled && item.shortcut && matchesShortcut(event, item.shortcut));
-      if (!match) return;
-
-      event.preventDefault();
-      event.stopPropagation();
-      if (match.items) {
-        const row = Array.from(surfaceRef.current?.querySelectorAll<HTMLElement>('[data-item]') ?? []).find(
-          (el) => el.dataset.item === match.id,
-        );
-        openSub(match, row, true);
-        return;
-      }
-      finish();
-      match.onSelect();
-    },
-  });
-
-  return (
-    <>
-      <FloatingSurface
-        ref={surfaceRef}
-        open={open}
-        anchor={position ? { point: position } : { element: anchorRef?.current ?? null }}
-        side="bottom"
-        align={position ? 'start' : 'end'}
-        offset={position ? 0 : 4}
-        className={['min-w-[10rem]', className].filter(Boolean).join(' ')}
-        style={style}
-      >
-        <Menu>
-          {items.map((item, i) => (
-            <ActionRow
-              key={item.id}
-              item={item}
-              divider={i > 0 && item.group !== items[i - 1]!.group}
-              expanded={sub?.open === true && sub.id === item.id}
-              onPoint={pointAt}
-              onPick={pick}
-            />
-          ))}
-        </Menu>
-      </FloatingSurface>
-      <FloatingSurface
-        ref={subSurfaceRef}
-        open={open && sub?.open === true && subRows !== undefined}
-        anchor={{ element: sub?.row ?? null }}
-        side="right"
-        align="start"
-        offset={2}
-        className="min-w-[10rem]"
-        // Its first row level with the row that opened it: up by the menu's padding (`p-1`).
-        style={{ marginTop: -4 }}
-        onPointerEnter={clearHover}
-      >
-        <Menu>
-          {subRows?.map((item, i) => (
-            <ActionRow
-              key={item.id}
-              item={item}
-              divider={i > 0 && item.group !== subRows[i - 1]!.group}
-              expanded={false}
-              onPick={pick}
-            />
-          ))}
-        </Menu>
-      </FloatingSurface>
-    </>
-  );
-}
-
-/** One row: its divider, label, keycap and, for a row holding rows, the caret. */
-function ActionRow({
-  item,
-  divider,
-  expanded,
-  onPoint,
-  onPick,
-}: {
-  item: RowActionItem;
-  /** It starts another group. */
-  divider: boolean;
-  /** Its rows are open beside it. */
-  expanded: boolean;
-  /** The pointer came to rest on it (rows of the menu itself, not those beside a row). */
-  onPoint?: (item: RowActionItem, row: HTMLElement) => void;
-  onPick: (item: RowActionItem, row: HTMLElement) => void;
-}) {
-  const parent = item.items !== undefined;
-  return (
-    <>
-      {divider && <MenuSeparator />}
-      <MenuRow
-        role="menuitem"
-        size="sm"
-        title={item.label}
-        data-item={item.id}
-        destructive={item.destructive}
-        disabled={item.disabled || (item.items !== undefined && item.items.length === 0)}
-        checked={item.checked}
-        active={expanded}
-        aria-keyshortcuts={item.shortcut ? ariaShortcut(item.shortcut) : undefined}
-        aria-haspopup={parent ? 'menu' : undefined}
-        aria-expanded={parent ? expanded : undefined}
-        trailing={
-          item.shortcut || parent ? (
-            <span aria-hidden className="inline-flex items-center gap-1.5">
-              {item.shortcut && <KeyCombo spec={item.shortcut} size="sm" spoken={false} />}
-              {parent && <span className="i-ph-caret-right text-zg-label text-[var(--zg-text-subtle)]" />}
-            </span>
-          ) : undefined
-        }
-        onPointerEnter={onPoint ? (e) => onPoint(item, e.currentTarget) : undefined}
-        onClick={(e) => {
-          e.stopPropagation();
-          onPick(item, e.currentTarget);
-        }}
-      />
-    </>
-  );
-}

package/src/components/SegmentSpinner.tsx

@@ -1,88 +0,0 @@
-/**
- * Segment spinner — the GUI twin of the TUI's `▰▱▱▱▱` bar (`BAR_SPINNER_FRAMES`
- * in `src/tui/spinner.ts`): five pills that fill left → right, then
- * drain, on the same 80 ms / 10-frame cadence, so both surfaces share one
- * "busy" signature.
- *
- * Pure CSS: each pill runs the `zg-seg` keyframe (on for half the 800 ms
- * cycle, dim for the rest) offset by `i × 80 ms`. Inherits `currentColor`
- * so it takes the surrounding text tone; pass `tone` to force one.
- * Reduced motion: styles/components.css flattens `zg-seg` to a static row with the first three pills lit.
- */
-import type { CSSProperties } from 'react';
-
-import { useLabels } from '../labels';
-
-type Size = 'xs' | 'sm' | 'md';
-type Tone = 'inherit' | 'accent' | 'warn' | 'muted';
-
-/** Props for {@link SegmentSpinner}. */
-export interface SegmentSpinnerProps {
-  /** `xs` fits 10px text (Timeline badges), `sm` 12–13px, `md` header/footer. */
-  size?: Size;
-  /**
-   * Colour of the pills. `inherit` follows the surrounding text colour.
-   * @default 'inherit'
-   */
-  tone?: Tone;
-  /** Accessible name and tooltip. Defaults to the `working` label from {@link useLabels}. */
-  label?: string;
-  /** Extra classes on the spinner. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-const SEGMENTS = 5;
-const STEP_MS = 80;
-
-const DIMENSIONS: Record<Size, { w: number; h: number; gap: number }> = {
-  xs: { w: 2, h: 6, gap: 1.5 },
-  sm: { w: 2.5, h: 8, gap: 2 },
-  md: { w: 3, h: 10, gap: 2 },
-};
-
-const TONE: Record<Tone, string | undefined> = {
-  inherit: undefined,
-  accent: 'var(--zg-accent)',
-  warn: 'var(--zg-warn)',
-  muted: 'var(--zg-text-muted)',
-};
-
-/**
- * Renders a busy indicator of five pills that fill left to right, then drain, matching the
- * terminal UI's segment bar. It is a `status` element, pure CSS, and static under reduced motion.
- *
- * @param props - Component props.
- */
-export function SegmentSpinner({
-  size = 'sm',
-  tone = 'inherit',
-  label: labelProp,
-  className = '',
-  style,
-}: SegmentSpinnerProps) {
-  const labels = useLabels();
-  const label = labelProp ?? labels.working;
-  const d = DIMENSIONS[size];
-  const color = TONE[tone];
-
-  return (
-    <span
-      role="status"
-      aria-label={label}
-      title={label}
-      className={`zg-seg inline-flex items-center shrink-0 align-middle ${className}`}
-      style={{ gap: d.gap, ...(color ? { color } : {}), ...style }}
-    >
-      {Array.from({ length: SEGMENTS }, (_, i) => (
-        <span
-          key={i}
-          aria-hidden
-          className="inline-block rounded-[1px] bg-current"
-          style={{ width: d.w, height: d.h, animationDelay: `${i * STEP_MS}ms` } as CSSProperties}
-        />
-      ))}
-    </span>
-  );
-}

package/src/components/Segmented.tsx

@@ -1,126 +0,0 @@
-/**
- * One track, several choices; the chosen one is the raised chip
- * (`.zg-segment` / `.zg-segment-item`). Radio semantics: one tab stop on
- * the checked item, arrows / Home / End move the selection (APG radio group).
- */
-import { useRef, type CSSProperties, type KeyboardEvent, type ReactNode } from 'react';
-
-import { Tooltip } from './Tooltip';
-
-/** One choice of a {@link Segmented} control. */
-export interface SegmentedOption<T extends string> {
-  /** The value reported to `onChange` when this option is picked. Unique among the options. */
-  value: T;
-  /** Content of the item. */
-  label: ReactNode;
-  /** Icon class shown before the label. */
-  icon?: string;
-  /** Native tooltip of the item. */
-  title?: string;
-  /** The kit's tooltip under the item, for a choice that needs a sentence. Replaces `title`. */
-  tooltip?: ReactNode;
-  /** Grey the item out and skip it in keyboard navigation. */
-  disabled?: boolean;
-}
-
-/** Props for {@link Segmented}. */
-export interface SegmentedProps<T extends string> {
-  /** The value of the selected option. */
-  value: T;
-  /** Called with the new value when an option is picked by click or keyboard. */
-  onChange: (v: T) => void;
-  /** The choices, in order. */
-  options: readonly SegmentedOption<T>[];
-  /**
-   * Item height: `sm` is 24px, `md` is 28px.
-   * @default 'md'
-   */
-  size?: 'sm' | 'md';
-  /** Accessible name of the radio group. */
-  ariaLabel?: string;
-  /** Extra classes on the track. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a track of mutually exclusive choices; the chosen one is the raised chip. It is a
- * radio group with one tab stop on the checked item. Arrow keys, Home and End move the
- * selection to the next enabled option.
- *
- * @param props - Component props.
- */
-export function Segmented<T extends string>({
-  value,
-  onChange,
-  options,
-  size = 'md',
-  ariaLabel,
-  className = '',
-  style,
-}: SegmentedProps<T>) {
-  const items = useRef<(HTMLButtonElement | null)[]>([]);
-  const checked = options.findIndex((o) => o.value === value && !o.disabled);
-  const stop = checked >= 0 ? checked : options.findIndex((o) => !o.disabled);
-
-  const onKeyDown = (e: KeyboardEvent, from: number) => {
-    const enabled = options.flatMap((o, i) => (o.disabled ? [] : [i]));
-    if (enabled.length === 0) return;
-    const at = enabled.indexOf(from);
-    let next: number;
-    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = enabled[(at + 1) % enabled.length];
-    else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = enabled[(at - 1 + enabled.length) % enabled.length];
-    else if (e.key === 'Home') next = enabled[0];
-    else if (e.key === 'End') next = enabled[enabled.length - 1];
-    else return;
-    e.preventDefault();
-    items.current[next]?.focus();
-    if (options[next].value !== value) onChange(options[next].value);
-  };
-
-  return (
-    <div role="radiogroup" aria-label={ariaLabel} className={`zg-segment ${className}`} style={style}>
-      {options.map((o, i) => {
-        const on = o.value === value;
-        const item = (
-          <button
-            key={o.value}
-            ref={(el) => {
-              items.current[i] = el;
-            }}
-            type="button"
-            role="radio"
-            aria-checked={on}
-            tabIndex={i === stop ? 0 : -1}
-            title={o.tooltip ? undefined : o.title}
-            disabled={o.disabled}
-            data-active={on ? '' : undefined}
-            onClick={() => onChange(o.value)}
-            onKeyDown={(e) => onKeyDown(e, i)}
-            className={`zg-segment-item zg-press-subtle inline-flex items-center justify-center gap-1.5 rounded-full border-0 bg-transparent cursor-pointer whitespace-nowrap disabled:opacity-zg-disabled disabled:cursor-default zg-focus-ring ${
-              size === 'sm' ? 'h-6 px-2.5 text-zg-meta' : 'h-7 px-3 text-xs'
-            } ${on ? 'text-[var(--zg-text)] font-medium' : 'text-[var(--zg-text-muted)]'}`}
-          >
-            {o.icon && <span className={`${o.icon} ${size === 'sm' ? 'text-zg-label' : 'text-zg-ui'}`} aria-hidden />}
-            {/* An invisible medium-weight copy reserves the selected width, so
-                the track does not jump when the bolder label moves. */}
-            <span className="grid">
-              <span className="[grid-area:1/1] invisible font-medium" aria-hidden>
-                {o.label}
-              </span>
-              <span className="[grid-area:1/1]">{o.label}</span>
-            </span>
-          </button>
-        );
-        return o.tooltip ? (
-          <Tooltip key={o.value} label={o.tooltip} portal maxWidth={260}>
-            {item}
-          </Tooltip>
-        ) : (
-          item
-        );
-      })}
-    </div>
-  );
-}