@thaut/claude-ide 0.0.0-stage → 1.0.0

package/web/src/ui/Controls.tsx

@@ -0,0 +1,227 @@
+import type { ReactNode } from "react";
+import { Button, cx } from "./Button.tsx";
+import { MenuPopover, useMenuAction } from "./MenuPopover.tsx";
+import { MoreIcon, XIcon } from "./icons.tsx";
+
+/** An on/off switch with its label inside the same hit area. */
+export function Switch({
+  checked,
+  onChange,
+  label,
+  icon,
+  className,
+  compact,
+  disabled,
+}: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  label: string;
+  icon?: ReactNode;
+  className?: string;
+  compact?: boolean;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={label}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className={cx(
+        "inline-flex h-10 shrink-0 items-center gap-2 rounded-md border px-2.5 text-sm transition-colors md:h-8",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 disabled:cursor-wait disabled:opacity-60",
+        checked ? "border-accent/50 bg-accent/10 text-text" : "border-border bg-surface text-muted hover:text-text",
+        className,
+      )}
+    >
+      {icon}
+      {!compact && <span className="hidden sm:inline">{label}</span>}
+      <span className={cx("relative h-4 w-7 rounded-full transition-colors", checked ? "bg-accent" : "bg-border")} aria-hidden>
+        <span className={cx("absolute top-0.5 size-3 rounded-full bg-white shadow-sm transition-all", checked ? "left-3.5" : "left-0.5")} />
+      </span>
+    </button>
+  );
+}
+
+/** A small rounded tag; with onRemove it gets its own close button. */
+export function Chip({
+  children,
+  onClick,
+  onRemove,
+  removeLabel = "移除",
+  active,
+  tone = "neutral",
+  icon,
+  testId,
+  checked,
+  disabled,
+  ariaLabel,
+  compactOnMobile,
+  shape = "pill",
+}: {
+  children: ReactNode;
+  onClick?: () => void;
+  onRemove?: () => void;
+  removeLabel?: string;
+  active?: boolean;
+  tone?: "neutral" | "accent" | "ok" | "warn";
+  icon?: ReactNode;
+  testId?: string;
+  /** A toggle keeps the same pill shape without pretending to open a panel. */
+  checked?: boolean;
+  disabled?: boolean;
+  ariaLabel?: string;
+  compactOnMobile?: boolean;
+  shape?: "pill" | "rounded";
+}) {
+  const tones = {
+    neutral: "border-border text-muted",
+    accent: "border-accent/40 text-text bg-accent/5",
+    ok: "border-ok/40 text-ok bg-ok/5",
+    warn: "border-amber-500/40 text-amber-700 dark:text-amber-400 bg-amber-500/5",
+  };
+  return (
+    <span
+      className={cx(
+        "inline-flex max-w-full items-stretch overflow-hidden border transition-colors md:h-7 md:text-xs",
+        shape === "rounded" ? "rounded-md" : "rounded-full",
+        compactOnMobile ? "h-7 text-[11px]" : "h-8 text-xs",
+        tones[tone],
+        active && "ring-2 ring-accent/25",
+      )}
+    >
+      <button
+        type="button"
+        data-testid={testId}
+        role={checked === undefined ? undefined : "switch"}
+        aria-checked={checked}
+        aria-label={ariaLabel}
+        aria-expanded={checked === undefined && onClick ? !!active : undefined}
+        disabled={disabled}
+        onClick={onClick}
+        className={cx(
+          "flex min-w-0 items-center hover:text-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent/40 disabled:cursor-wait disabled:opacity-60",
+          shape === "rounded" ? "gap-1 pl-1.5 md:pl-2" : compactOnMobile ? "gap-1 pl-2.5 md:gap-1.5 md:pl-3" : "gap-1.5 pl-3",
+          compactOnMobile && "[&>svg]:size-[13px] md:[&>svg]:size-3.5",
+          onRemove ? "pr-1.5" : shape === "rounded" ? "pr-1.5 md:pr-2" : compactOnMobile ? "pr-2.5 md:pr-3" : "pr-3",
+        )}
+      >
+        {icon}
+        <span className="truncate">{children}</span>
+      </button>
+      {onRemove && (
+        <button type="button" aria-label={removeLabel} onClick={onRemove} className="flex w-7 items-center justify-center border-l border-current/15 hover:bg-surface-2 hover:text-text">
+          <XIcon size={12} />
+        </button>
+      )}
+    </span>
+  );
+}
+
+/** A titled inline panel that always has a close button. */
+export function Panel({
+  title,
+  onClose,
+  children,
+  actions,
+  testId,
+  className,
+}: {
+  title: ReactNode;
+  onClose: () => void;
+  children: ReactNode;
+  actions?: ReactNode;
+  testId?: string;
+  className?: string;
+}) {
+  return (
+    <section className={cx("rounded-xl border border-border bg-surface shadow-sm", className)} data-testid={testId}>
+      <header className="flex items-center gap-2 border-b border-border py-1.5 pl-3.5 pr-1.5">
+        <h3 className="min-w-0 flex-1 truncate font-sans text-sm font-medium">{title}</h3>
+        {actions}
+        <Button variant="ghost" size="sm" iconOnly onClick={onClose} aria-label="关闭" title="关闭">
+          <XIcon />
+        </Button>
+      </header>
+      <div className="p-3.5">{children}</div>
+    </section>
+  );
+}
+
+/** "⋯" trigger with a menu of actions. */
+export function ActionMenu({ children, label = "更多操作", testId, align = "end" }: { children: (close: () => void) => ReactNode; label?: string; testId?: string; align?: "start" | "end" }) {
+  return (
+    <span data-testid={testId}>
+      <MenuPopover label={label} align={align} trigger={(props) => <Button {...props} variant="ghost" size="sm" iconOnly><MoreIcon /></Button>}>
+        {children}
+      </MenuPopover>
+    </span>
+  );
+}
+
+export function MenuItem({ onClick, children, danger, icon, hint, disabled }: { onClick: () => void; children: ReactNode; danger?: boolean; icon?: ReactNode; hint?: ReactNode; disabled?: boolean }) {
+  const close = useMenuAction();
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      tabIndex={close ? -1 : undefined}
+      disabled={disabled}
+      onClick={() => { close?.(); onClick(); }}
+      className={cx("flex w-full items-center gap-2.5 px-3 py-2.5 text-left text-sm hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-45 sm:py-2", danger ? "text-danger" : "text-text")}
+    >
+      {icon && <span className="w-4 shrink-0 text-muted">{icon}</span>}
+      <span className="min-w-0 flex-1 truncate">{children}</span>
+      {hint && <span className="shrink-0 text-xs text-muted">{hint}</span>}
+    </button>
+  );
+}
+
+export function MenuSeparator() {
+  return <div className="my-1 border-t border-border" role="separator" />;
+}
+
+/** Mutually exclusive choices shown as cards with an explanation each. */
+export function RadioCards<V extends string>({
+  label,
+  value,
+  onChange,
+  options,
+}: {
+  label: string;
+  value: V;
+  onChange: (v: V) => void;
+  options: { value: V; title: ReactNode; detail?: ReactNode }[];
+}) {
+  return (
+    <div role="radiogroup" aria-label={label} className="space-y-2">
+      {options.map((o) => {
+        const on = o.value === value;
+        return (
+          <button
+            key={o.value}
+            type="button"
+            role="radio"
+            aria-checked={on}
+            onClick={() => onChange(o.value)}
+            className={cx(
+              "flex w-full items-start gap-3 rounded-lg border px-3.5 py-3 text-left transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40",
+              on ? "border-accent/60 bg-accent/5" : "border-border hover:border-muted/40",
+            )}
+          >
+            <span className={cx("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border", on ? "border-accent" : "border-muted/50")} aria-hidden>
+              {on && <span className="size-2 rounded-full bg-accent" />}
+            </span>
+            <span className="min-w-0">
+              <span className="block text-sm font-medium">{o.title}</span>
+              {o.detail && <span className="mt-0.5 block text-xs leading-relaxed text-muted">{o.detail}</span>}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/web/src/ui/Form.tsx

@@ -0,0 +1,203 @@
+import { useState, type ReactNode } from "react";
+import { Button, CONTROL, cx, type ButtonSize } from "./Button.tsx";
+
+/** Text inputs share the control geometry (40px on phones, 32px on desktop). 16px text on phones avoids iOS zoom. */
+export const inputCls =
+  "h-10 md:h-8 w-full min-w-0 rounded-md border border-border bg-surface px-3 text-base md:text-sm text-text outline-none transition-colors placeholder:text-muted/80 hover:border-muted/40 focus:border-accent/60 focus:ring-2 focus:ring-accent/20 disabled:opacity-50";
+export const monoInputCls = `${inputCls} font-mono placeholder:font-sans`;
+export const textareaCls =
+  "block w-full min-w-0 rounded-md border border-border bg-surface px-3 py-2 text-base md:text-sm text-text outline-none transition-colors placeholder:text-muted/80 hover:border-muted/40 focus:border-accent/60 focus:ring-2 focus:ring-accent/20";
+export const monoTextareaCls = `${textareaCls} font-mono text-[13px] md:text-[13px] leading-relaxed placeholder:font-sans`;
+
+/** A labelled form field. Use `group` when the control is not a native input (e.g. a Select), so the label does not forward clicks. */
+export function Field({ label, children, hint, className, group }: { label: string; children: ReactNode; hint?: ReactNode; className?: string; group?: boolean }) {
+  const Tag = group ? "div" : "label";
+  return (
+    <Tag className={cx("block min-w-0", className)}>
+      <span className="mb-1.5 block text-xs font-medium text-muted">{label}</span>
+      {children}
+      {hint && <span className="mt-1 block text-xs leading-relaxed text-muted">{hint}</span>}
+    </Tag>
+  );
+}
+
+/** A bare on/off switch (no label box), for rows that already show their label. 40px hit area on phones. */
+export function Toggle({ checked, onChange, label, disabled }: { checked: boolean; onChange: (v: boolean) => void; label: string; disabled?: boolean }) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={label}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className="group inline-flex h-10 shrink-0 items-center rounded-md px-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 disabled:opacity-45 md:h-8"
+    >
+      <span className={cx("relative h-5 w-9 rounded-full transition-colors", checked ? "bg-accent" : "bg-border group-hover:bg-muted/40")} aria-hidden>
+        <span className={cx("absolute top-0.5 size-4 rounded-full bg-white shadow-sm transition-all", checked ? "left-[18px]" : "left-0.5")} />
+      </span>
+    </button>
+  );
+}
+
+/** A labelled row with a switch at the end: the whole row toggles. */
+export function SwitchRow({ checked, onChange, label, desc, disabled, testId }: { checked: boolean; onChange: (v: boolean) => void; label: string; desc?: ReactNode; disabled?: boolean; testId?: string }) {
+  return (
+    <div className="flex items-center gap-3 py-1" data-testid={testId}>
+      <div className="min-w-0 flex-1 cursor-pointer select-none" onClick={() => !disabled && onChange(!checked)}>
+        <div className="text-sm">{label}</div>
+        {desc && <div className="text-xs leading-relaxed text-muted">{desc}</div>}
+      </div>
+      <Toggle checked={checked} onChange={onChange} label={label} disabled={disabled} />
+    </div>
+  );
+}
+
+/** Segmented single choice (radio group) — for 2–4 short options. */
+export function Segmented<V extends string>({
+  value,
+  options,
+  onChange,
+  label,
+  size = "md",
+  className,
+  stretch,
+  disabled,
+}: {
+  value: V;
+  options: { value: V; label: ReactNode; icon?: ReactNode }[];
+  onChange: (v: V) => void;
+  label: string;
+  size?: ButtonSize;
+  className?: string;
+  stretch?: boolean;
+  disabled?: boolean;
+}) {
+  return (
+    <div role="radiogroup" aria-label={label} className={cx("inline-flex max-w-full gap-0.5 rounded-lg border border-border bg-surface-2/60 p-0.5", stretch && "flex w-full", className)}>
+      {options.map((o) => {
+        const on = o.value === value;
+        return (
+          <button
+            key={o.value}
+            type="button"
+            role="radio"
+            aria-checked={on}
+            disabled={disabled}
+            onClick={() => onChange(o.value)}
+            className={cx(
+              "inline-flex min-w-0 items-center justify-center whitespace-nowrap rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 disabled:pointer-events-none disabled:opacity-45",
+              CONTROL[size],
+              size === "md" ? "h-9 md:h-7" : "h-7 md:h-6",
+              stretch && "flex-1",
+              on ? "bg-surface font-medium text-text shadow-sm ring-1 ring-border" : "text-muted hover:text-text",
+            )}
+          >
+            {o.icon}
+            <span className="truncate">{o.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+
+export type TagTone = "neutral" | "accent" | "ok" | "warn" | "danger";
+const TAG_TONE: Record<TagTone, string> = {
+  neutral: "border-border text-muted bg-surface-2/50",
+  accent: "border-accent/35 text-accent bg-accent/5",
+  ok: "border-ok/35 text-ok bg-ok/5",
+  warn: "border-amber-500/40 text-amber-700 dark:text-amber-400 bg-amber-500/5",
+  danger: "border-danger/35 text-danger bg-danger/5",
+};
+
+/** A small, square-ish label for scope / source / status facts in lists. */
+export function Tag({ children, tone = "neutral", mono, title, icon, className, ...rest }: { children: ReactNode; tone?: TagTone; mono?: boolean; title?: string; icon?: ReactNode; className?: string } & Record<`data-${string}`, string>) {
+  return (
+    <span
+      title={title}
+      className={cx("inline-flex h-5 max-w-full shrink-0 items-center gap-1 rounded border px-1.5 text-[11px] leading-none", TAG_TONE[tone], mono && "font-mono", className)}
+      {...rest}
+    >
+      {icon}
+      <span className="truncate">{children}</span>
+    </span>
+  );
+}
+
+/** Empty state: what this is, and what to do next. */
+export function EmptyState({ icon, title, children, action, compact, testId }: { icon?: ReactNode; title: string; children?: ReactNode; action?: ReactNode; compact?: boolean; testId?: string }) {
+  return (
+    <div className={cx("flex flex-col items-center rounded-xl border border-dashed border-border text-center", compact ? "px-4 py-5" : "px-6 py-10")} data-testid={testId}>
+      {icon && <span className="mb-2 flex size-9 items-center justify-center rounded-full bg-surface-2 text-muted">{icon}</span>}
+      <p className="text-sm font-medium">{title}</p>
+      {children && <div className="mt-1 max-w-md text-xs leading-relaxed text-muted">{children}</div>}
+      {action && <div className="mt-3">{action}</div>}
+    </div>
+  );
+}
+
+/**
+ * Two-step destructive action: the first press asks inline, the second does it.
+ * The confirmation is a group named "确认操作" with "确认" and "取消".
+ */
+export function ConfirmButton({
+  children,
+  confirmText,
+  onConfirm,
+  danger = true,
+  disabled,
+  label,
+  size = "sm",
+  icon,
+  variant,
+}: {
+  children: ReactNode;
+  confirmText: string;
+  onConfirm: () => void;
+  danger?: boolean;
+  disabled?: boolean;
+  label?: string;
+  size?: ButtonSize;
+  icon?: ReactNode;
+  variant?: "ghost" | "secondary" | "outline-danger";
+}) {
+  const [asking, setAsking] = useState(false);
+  if (!asking)
+    return (
+      <Button variant={variant ?? (danger ? "outline-danger" : "secondary")} size={size} icon={icon} onClick={() => setAsking(true)} disabled={disabled} aria-label={label}>
+        {children}
+      </Button>
+    );
+  return (
+    <span className="inline-flex flex-wrap items-center gap-1.5 rounded-md bg-surface-2/70 py-0.5 pl-2 pr-0.5" role="group" aria-label="确认操作">
+      <span className="text-xs text-muted">{confirmText}</span>
+      <Button
+        variant={danger ? "danger" : "primary"}
+        size={size}
+        autoFocus
+        onClick={() => {
+          setAsking(false);
+          onConfirm();
+        }}
+      >
+        确认
+      </Button>
+      <Button variant="ghost" size={size} onClick={() => setAsking(false)} onKeyDown={(e) => e.key === "Escape" && setAsking(false)}>
+        取消
+      </Button>
+    </span>
+  );
+}
+
+/** Loading line with spinner-free shimmer bars; keeps the layout from jumping. */
+export function Skeleton({ rows = 3 }: { rows?: number }) {
+  return (
+    <div className="space-y-2 py-2" aria-label="加载中" role="status">
+      {Array.from({ length: rows }, (_, i) => (
+        <div key={i} className="h-9 animate-pulse rounded-md bg-surface-2/70" style={{ opacity: 1 - i * 0.2 }} />
+      ))}
+    </div>
+  );
+}

package/web/src/ui/MenuPopover.tsx

@@ -0,0 +1,144 @@
+import { createContext, useCallback, useContext, useId, useLayoutEffect, useRef, useState, type ButtonHTMLAttributes, type ReactNode, type RefObject } from "react";
+import { Popover, type PopoverDismissReason } from "./Popover.tsx";
+
+type CloseReason = "action" | "escape" | "outside" | "backdrop" | "tab" | "trigger";
+type TriggerProps = Pick<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "onKeyDown" | "onPointerDown" | "onPointerCancel" | "aria-label" | "aria-haspopup" | "aria-expanded" | "aria-controls"> & { ref: RefObject<HTMLButtonElement | null> };
+const MenuAction = createContext<(() => void) | undefined>(undefined);
+export const useMenuAction = () => useContext(MenuAction);
+
+function available(element: HTMLElement) {
+  return !element.matches(':disabled, [aria-disabled="true"]') && !element.closest("[inert]")
+    && element.getClientRects().length > 0 && !["hidden", "collapse"].includes(getComputedStyle(element).visibility);
+}
+
+function menuItems(menu: HTMLElement) {
+  return [...menu.querySelectorAll<HTMLElement>('[role="menuitem"]')]
+    .filter((element) => element.closest('[role="menu"]') === menu && available(element));
+}
+
+/** Position a menu with Popover, but opt into its own focus/keyboard protocol.
+ * Select deliberately keeps focus on its trigger and does not use this layer. */
+export function MenuPopover({ trigger, children, label, beforeOpen, align = "end", width = 220, testId }: {
+  trigger: (props: TriggerProps) => ReactNode;
+  children: ReactNode | ((close: () => void) => ReactNode);
+  label: string;
+  /** Runs before pointer focus or keyboard opening can disturb a text selection. */
+  beforeOpen?: () => void;
+  align?: "start" | "end";
+  width?: number;
+  testId?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const opened = useRef(false);
+  const prepared = useRef(false);
+  const firstFocus = useRef<"first" | "last">("first");
+  const anchor = useRef<HTMLButtonElement>(null);
+  const menu = useRef<HTMLDivElement>(null);
+  const id = useId();
+  const close = useCallback((reason: CloseReason) => {
+    // Existing ActionMenu callers may also close from their action callback.
+    // Only the first close restores focus, before an action opens another view.
+    if (!opened.current) return;
+    opened.current = false;
+    setOpen(false);
+    if (reason === "action" || reason === "escape" || reason === "backdrop" || reason === "trigger") anchor.current?.focus({ preventScroll: true });
+  }, []);
+  const action = useCallback(() => close("action"), [close]);
+  const dismiss = useCallback((reason?: PopoverDismissReason) => close(reason ?? "outside"), [close]);
+  const show = (edge: "first" | "last") => {
+    if (!prepared.current) beforeOpen?.();
+    prepared.current = false;
+    firstFocus.current = edge;
+    opened.current = true;
+    setOpen(true);
+  };
+  return <>
+    {trigger({
+      ref: anchor, "aria-label": label, "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? id : undefined,
+      onPointerDown: (event) => {
+        prepared.current = false;
+        if (!opened.current && event.button === 0) { beforeOpen?.(); prepared.current = true; }
+      },
+      onPointerCancel: () => { prepared.current = false; },
+      onClick: () => { if (opened.current) close("trigger"); else show("first"); },
+      onKeyDown: (event) => {
+        if (!["Enter", " ", "ArrowDown", "ArrowUp"].includes(event.key)) return;
+        event.preventDefault();
+        prepared.current = false;
+        if (opened.current) {
+          if (event.key === "Enter" || event.key === " ") close("trigger");
+          else if (menu.current) focusEdge(menu.current, event.key === "ArrowUp" ? "last" : "first");
+        } else show(event.key === "ArrowUp" ? "last" : "first");
+      },
+    })}
+    <Popover open={open} onClose={dismiss} anchor={anchor} align={align} width={width} label={label} testId={testId} topmostOnly>
+      <MenuAction.Provider value={action}>
+        <MenuSurface id={id} label={label} menu={menu} anchor={anchor} firstFocus={firstFocus.current} close={close}>
+          {typeof children === "function" ? children(action) : children}
+        </MenuSurface>
+      </MenuAction.Provider>
+    </Popover>
+  </>;
+}
+
+function focusItem(item: HTMLElement) {
+  item.focus({ preventScroll: true });
+  item.scrollIntoView({ block: "nearest", inline: "nearest" });
+}
+
+function focusEdge(menu: HTMLElement, edge: "first" | "last") {
+  const items = menuItems(menu);
+  const item = edge === "last" ? items.at(-1) : items[0];
+  if (item) focusItem(item);
+  else menu.focus({ preventScroll: true });
+}
+
+function MenuSurface({ id, label, menu, anchor, firstFocus, close, children }: {
+  id: string; label: string; menu: RefObject<HTMLDivElement | null>; anchor: RefObject<HTMLButtonElement | null>;
+  firstFocus: "first" | "last"; close: (reason: CloseReason) => void; children: ReactNode;
+}) {
+  useLayoutEffect(() => {
+    const root = menu.current;
+    if (!root) return;
+    const layers = document.querySelectorAll('[role="dialog"]');
+    if (layers[layers.length - 1] !== root.closest('[role="dialog"]')) return;
+    const active = document.activeElement;
+    // Preserve the current item on ordinary rerenders, but recover when it
+    // becomes disabled or disappears while asynchronous menu data changes.
+    if (!root.contains(active) || active === root && menuItems(root).length
+      || active instanceof HTMLElement && active !== root && !available(active)) focusEdge(root, firstFocus);
+  }, [menu, firstFocus, children]);
+  return <div ref={menu} id={id} role="menu" aria-label={label} tabIndex={-1} className="outline-none"
+    onClickCapture={(event) => {
+      const item = event.target instanceof Element ? event.target.closest<HTMLElement>('[role="menuitem"]') : null;
+      if (!item || !available(item)) event.stopPropagation();
+    }}
+    onKeyDown={(event) => {
+      const root = menu.current;
+      if (!root) return;
+      if (event.key === "Tab") {
+        // Portal DOM order is unrelated to the trigger. Continue from that
+        // trigger, wrapping only when it belongs to a parent modal's focus scope.
+        const trigger = anchor.current;
+        const modal = trigger?.closest<HTMLElement>('[role="dialog"][aria-modal="true"]');
+        const scope = modal ?? document.body;
+        const controls = [...scope.querySelectorAll<HTMLElement>('button, a[href], input:not([type="hidden"]), select, textarea, [tabindex]')]
+          .filter((element) => element.tabIndex >= 0 && available(element) && !element.closest('[role="menu"]'));
+        const index = trigger ? controls.indexOf(trigger) : -1;
+        const next = controls[index + (event.shiftKey ? -1 : 1)] ?? (modal ? event.shiftKey ? controls.at(-1) : controls[0] : undefined);
+        close("tab");
+        if (next) { event.preventDefault(); next.focus({ preventScroll: true }); }
+        else trigger?.focus({ preventScroll: true });
+      } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+        event.preventDefault();
+        const items = menuItems(root);
+        if (!items.length) return;
+        const index = items.indexOf(document.activeElement as HTMLElement);
+        const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1
+          : event.key === "ArrowDown" ? (index + 1) % items.length : (index < 0 ? items.length - 1 : index - 1 + items.length) % items.length;
+        if (items[next]) focusItem(items[next]);
+      }
+    }}>
+    {children}
+  </div>;
+}