@bettercms-ai/kit 0.1.1 → 2.0.0-next.0

package/dist/ui/floating-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-panel.js","names":[],"sources":["../../src/ui/floating-panel.tsx"],"sourcesContent":["/**\n * FloatingPanel (CPO D54): ONE primitive for every non-modal window over the work surface. It owns drag, magnetic snap,\n * resize and \"remember where I put it\"; the ⌘J assistant (D30) and the component properties panel both use it.\n *\n *   geometry      track() · snapRect() · <SnapGuides> · <ResizeEdges> (4 edges + 4 corners) · <ResizeGrip> (keyboard)\n *                 (the low-level pieces, shared with the assistant's floating window)\n *   <FloatingPanel>  a small properties window anchored to the thing it edits:\n *     float  (≥768 with a mouse) docks in the editor column's right gutter (≥356px), else the left gutter, else it\n *            overlays the right edge; avoids a floating assistant, the Publish tray and the 56px navbar. While docked\n *            it follows the anchor's top (sticky between 72px from the top and 16px from the bottom); once dragged it\n *            stays where it was put. 340 × auto (≤560), resizable 300×240 … 520 × (viewport − 96). Header = drag\n *            handle; double-click resets it to its docked default. Side, offset and size persist per user and per\n *            width bucket (≥1280 · 768–1279).\n *     side   (768–1279 on touch) a 340px right sheet, no scrim.\n *     sheet  (<768) a bottom sheet, 50% or 90% tall; drag the grabber down to close.\n *     modal  inside a D49 ExpandedEditorModal (`container`): docked into the modal's right 340px (the reading column\n *            shifts left), or over the modal's edge when it is narrow.\n *   Non-modal: `role=\"dialog\"` + `aria-modal=\"false\"`, no focus trap, outside clicks never close it. Esc closes (menus,\n *   pickers and field drafts first), F6 moves focus between the panel and `focusBack()`. Marked `data-floating-layer`.\n *   Layering: canvas toolbars < panel 52 (= the D30 window) < sheets 55 < dialogs 60 < menus 80 < tooltips 90.\n */\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { motion, useMotionValue, useReducedMotion, type MotionValue } from \"framer-motion\";\nimport { cn } from \"../lib/cn\";\nimport { eventKey } from \"../lib/key-event\";\nimport { KIT_SCOPE } from \"./surfaces\";\n\n/* ── Geometry (shared with the D30 assistant window) ─────────────────────────────────────────── */\nexport const NAV = 56;\nexport const SNAP = 16;\nexport const EDGE = 16;\nexport const Z_FLOAT = \"z-[var(--kit-z-float,52)]\";\nexport const EASE = [0.32, 0.72, 0, 1] as const;\n\nexport type Rect = { x: number; y: number; w: number; h: number };\n/** Where a window may sit and how big it may get. `top` is the smallest y (under the navbar), `pad` the inset elsewhere. */\nexport interface Bounds {\n  minW: number;\n  minH: number;\n  maxW: () => number;\n  maxH: () => number;\n  top: number;\n  pad: number;\n}\n/** Magnetic lines in viewport px: `v` = x positions (left/right edges snap to them), `h` = y positions. */\nexport interface SnapLines {\n  v: number[];\n  h: number[];\n}\n/** 1px guide lines to draw (viewport px). */\nexport interface Guides {\n  v: number[];\n  h: number[];\n}\nexport const NO_GUIDES: Guides = { v: [], h: [] };\nexport interface Geom {\n  x: MotionValue<number>;\n  y: MotionValue<number>;\n  w: MotionValue<number>;\n  h: MotionValue<number>;\n}\n\nexport const vw = () => window.innerWidth;\nexport const vh = () => window.innerHeight;\nexport const clampN = (n: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, n));\n\nexport function fitRect(g: Rect, b: Bounds): Rect {\n  const w = clampN(g.w, b.minW, Math.max(b.minW, b.maxW()));\n  const h = clampN(g.h, b.minH, Math.max(b.minH, b.maxH()));\n  return { w, h, x: clampN(g.x, b.pad, Math.max(b.pad, vw() - w - b.pad)), y: clampN(g.y, b.top, Math.max(b.top, vh() - h - b.pad)) };\n}\n\n/** Clamp to the viewport, then pull any edge within SNAP px of a line onto it (the nearest wins). */\nexport function snapRect(x: number, y: number, w: number, h: number, lines: SnapLines, b: Bounds): { x: number; y: number; g: Guides } {\n  let nx = clampN(x, b.pad, Math.max(b.pad, vw() - w - b.pad));\n  let ny = clampN(y, b.top, Math.max(b.top, vh() - h - b.pad));\n  const g: Guides = { v: [], h: [] };\n  let best = SNAP + 1;\n  let gx: number | null = null;\n  let sx = nx;\n  for (const L of lines.v) {\n    const a = Math.abs(nx - L);\n    if (a <= SNAP && a < best) (best = a), (sx = L), (gx = L - 1);\n    const z = Math.abs(nx + w - L);\n    if (z <= SNAP && z < best) (best = z), (sx = L - w), (gx = L);\n  }\n  nx = sx;\n  if (gx != null) g.v.push(gx);\n  best = SNAP + 1;\n  let gy: number | null = null;\n  let sy = ny;\n  for (const L of lines.h) {\n    const a = Math.abs(ny - L);\n    if (a <= SNAP && a < best) (best = a), (sy = L), (gy = L - 1);\n    const z = Math.abs(ny + h - L);\n    if (z <= SNAP && z < best) (best = z), (sy = L - h), (gy = L);\n  }\n  ny = sy;\n  if (gy != null) g.h.push(gy);\n  return { x: nx, y: ny, g };\n}\n\n/** Runs a pointer drag on window-level listeners (works from any handle, survives leaving the element). */\nexport function track(e: React.PointerEvent, onMove: (dx: number, dy: number) => void, onEnd: (moved: boolean) => void, cursor?: string) {\n  const sx = e.clientX;\n  const sy = e.clientY;\n  let moved = false;\n  if (cursor) document.body.style.cursor = cursor;\n  document.body.style.userSelect = \"none\";\n  const move = (ev: PointerEvent) => {\n    const dx = ev.clientX - sx;\n    const dy = ev.clientY - sy;\n    if (!moved && Math.abs(dx) + Math.abs(dy) < 3) return;\n    moved = true;\n    onMove(dx, dy);\n  };\n  const up = () => {\n    window.removeEventListener(\"pointermove\", move);\n    window.removeEventListener(\"pointerup\", up);\n    window.removeEventListener(\"pointercancel\", up);\n    document.body.style.cursor = \"\";\n    document.body.style.userSelect = \"\";\n    onEnd(moved);\n  };\n  window.addEventListener(\"pointermove\", move);\n  window.addEventListener(\"pointerup\", up);\n  window.addEventListener(\"pointercancel\", up);\n}\n\n/** Magnetic guides: a 1px hairline along each line the window is snapped to. */\nexport function SnapGuides({ guides }: { guides: Guides }) {\n  // --brand (V2): #a878d2, dark #b792db\n  const line = cn(\"pointer-events-none fixed bg-[var(--kit-brand)]\", Z_FLOAT);\n  return (\n    <>\n      {guides.v.map((p) => (\n        <span key={`v${p}`} aria-hidden className={line} style={{ left: p, top: 8, bottom: 8, width: 1 }} />\n      ))}\n      {guides.h.map((p) => (\n        <span key={`h${p}`} aria-hidden className={line} style={{ top: p, left: 8, right: 8, height: 1 }} />\n      ))}\n    </>\n  );\n}\n\nexport type ResizeDir = \"n\" | \"s\" | \"e\" | \"w\" | \"nw\" | \"ne\" | \"sw\" | \"se\";\nconst HANDLES: { d: ResizeDir; cls: string; cursor: string }[] = [\n  { d: \"n\", cls: \"inset-x-3 top-0 h-1.5\", cursor: \"ns-resize\" },\n  { d: \"s\", cls: \"inset-x-3 bottom-0 h-1.5\", cursor: \"ns-resize\" },\n  { d: \"w\", cls: \"inset-y-3 left-0 w-1.5\", cursor: \"ew-resize\" },\n  { d: \"e\", cls: \"inset-y-3 right-0 w-1.5\", cursor: \"ew-resize\" },\n  { d: \"nw\", cls: \"left-0 top-0 size-3\", cursor: \"nwse-resize\" },\n  { d: \"se\", cls: \"bottom-0 right-0 size-3\", cursor: \"nwse-resize\" },\n  { d: \"ne\", cls: \"right-0 top-0 size-3\", cursor: \"nesw-resize\" },\n  { d: \"sw\", cls: \"bottom-0 left-0 size-3\", cursor: \"nesw-resize\" },\n];\n\n/** Resize from 4 edges and 4 corners. `onStart` runs before the first read (e.g. turn an auto height into a number). */\nexport function ResizeEdges({ geom, bounds, onStart, onEnd }: { geom: Geom; bounds: Bounds; onStart?: () => void; onEnd: (dir: ResizeDir) => void }) {\n  const { x, y, w, h } = geom;\n  return (\n    <>\n      {HANDLES.map((hd) => (\n        <div\n          key={hd.d}\n          aria-hidden\n          style={{ cursor: hd.cursor }}\n          className={cn(\"absolute z-30 touch-none\", hd.cls)}\n          onPointerDown={(e) => {\n            if (e.button !== 0) return;\n            e.preventDefault();\n            e.stopPropagation();\n            onStart?.();\n            const o = { x: x.get(), y: y.get(), w: w.get(), h: h.get() };\n            const maxW = bounds.maxW();\n            const maxH = bounds.maxH();\n            track(\n              e,\n              (dx, dy) => {\n                let nw = o.w;\n                let nh = o.h;\n                if (hd.d.includes(\"e\")) nw = o.w + dx;\n                if (hd.d.includes(\"w\")) nw = o.w - dx;\n                if (hd.d.includes(\"s\")) nh = o.h + dy;\n                if (hd.d.includes(\"n\")) nh = o.h - dy;\n                nw = clampN(nw, bounds.minW, maxW);\n                nh = clampN(nh, bounds.minH, maxH);\n                const nx = clampN(hd.d.includes(\"w\") ? o.x + o.w - nw : o.x, bounds.pad, vw() - nw - bounds.pad);\n                const ny = clampN(hd.d.includes(\"n\") ? o.y + o.h - nh : o.y, bounds.top, vh() - nh - bounds.pad);\n                x.set(nx);\n                y.set(ny);\n                w.set(nw);\n                h.set(nh);\n              },\n              (moved) => moved && onEnd(hd.d),\n              hd.cursor,\n            );\n          }}\n        />\n      ))}\n    </>\n  );\n}\n\n/** Keyboard resize: a focusable grip (role=\"separator\"). ←/→ width, ↑/↓ height (±16, Shift ±64); grows toward the open side. */\nexport function ResizeGrip({ geom, bounds, label, onStart, onEnd, className }: { geom: Geom; bounds: Bounds; label: string; onStart?: () => void; onEnd: () => void; className?: string }) {\n  const { x, y, w, h } = geom;\n  const [size, setSize] = React.useState(() => ({ w: Math.round(w.get()), h: Math.round(h.get()) }));\n  return (\n    <div\n      role=\"separator\"\n      tabIndex={0}\n      aria-label={label}\n      aria-valuetext={`${size.w} by ${size.h} pixels`}\n      aria-keyshortcuts=\"ArrowLeft ArrowRight ArrowUp ArrowDown\"\n      onFocus={() => setSize({ w: Math.round(w.get()), h: Math.round(h.get()) })}\n      onKeyDown={(e) => {\n        const step = e.shiftKey ? 64 : 16;\n        const dw = e.key === \"ArrowRight\" ? step : e.key === \"ArrowLeft\" ? -step : 0;\n        const dh = e.key === \"ArrowDown\" ? step : e.key === \"ArrowUp\" ? -step : 0;\n        if (!dw && !dh) return;\n        e.preventDefault();\n        e.stopPropagation();\n        onStart?.();\n        const nw = clampN(w.get() + dw, bounds.minW, bounds.maxW());\n        const nh = clampN(h.get() + dh, bounds.minH, bounds.maxH());\n        x.set(clampN(x.get(), bounds.pad, Math.max(bounds.pad, vw() - nw - bounds.pad)));\n        y.set(clampN(y.get(), bounds.top, Math.max(bounds.top, vh() - nh - bounds.pad)));\n        w.set(nw);\n        h.set(nh);\n        setSize({ w: Math.round(nw), h: Math.round(nh) });\n        onEnd();\n      }}\n      className={cn(\n        \"group/kgrip pointer-events-none absolute bottom-0.5 right-0.5 z-40 flex size-4 items-end justify-end rounded-kit-sm outline-none\",\n        className,\n      )}\n    >\n      <svg aria-hidden viewBox=\"0 0 10 10\" className=\"size-2.5 text-kit-fg-4 opacity-0 transition-opacity group-focus-visible/kgrip:opacity-100\">\n        <path d=\"M9 3 3 9M9 6 6 9\" stroke=\"currentColor\" strokeWidth=\"1.2\" strokeLinecap=\"round\" />\n      </svg>\n    </div>\n  );\n}\n\n/* ── Remembered placement: per user, per panel, per width bucket ─────────────────────────────── */\nexport interface PanelPref {\n  side?: \"left\" | \"right\";\n  /** set once the person drags it: the panel stays here instead of following its anchor */\n  pos?: { x: number; y: number };\n  w?: number;\n  /** set once the person resizes the height; otherwise the height follows the content */\n  h?: number;\n}\ninterface PanelPrefState {\n  prefs: Record<string, PanelPref>;\n  patch: (key: string, p: Partial<PanelPref> | null) => void;\n}\n/* Remembered per browser in localStorage (the kit carries no state library). A blocked or full storage only loses the\n   memory: the panel still docks at its default. */\nconst PREFS_KEY = \"bcms-kit-floating-panel\";\nconst prefListeners = new Set<() => void>();\nfunction readPrefs(): Record<string, PanelPref> {\n  try {\n    const raw = typeof localStorage === \"undefined\" ? null : localStorage.getItem(PREFS_KEY);\n    const parsed = raw ? (JSON.parse(raw) as unknown) : null;\n    return parsed && typeof parsed === \"object\" ? (parsed as Record<string, PanelPref>) : {};\n  } catch {\n    return {};\n  }\n}\nconst prefState: PanelPrefState = {\n  prefs: readPrefs(),\n  patch: (key, p) => {\n    const next: PanelPref = p === null ? {} : { ...prefState.prefs[key], ...p };\n    for (const k of Object.keys(next) as (keyof PanelPref)[]) if (next[k] === undefined) delete next[k];\n    prefState.prefs = { ...prefState.prefs, [key]: next };\n    try {\n      localStorage.setItem(PREFS_KEY, JSON.stringify(prefState.prefs));\n    } catch {\n      /* storage blocked: placement is remembered for this session only */\n    }\n    prefListeners.forEach((l) => l());\n  },\n};\nconst subscribePrefs = (l: () => void) => {\n  prefListeners.add(l);\n  return () => prefListeners.delete(l);\n};\n/** Read the remembered placements with a selector; `useFloatingPanelPrefs.getState()` for imperative reads and writes. */\nexport function useFloatingPanelPrefs<T>(select: (s: PanelPrefState) => T): T {\n  return React.useSyncExternalStore(\n    subscribePrefs,\n    () => select(prefState),\n    () => select(prefState),\n  );\n}\nuseFloatingPanelPrefs.getState = (): PanelPrefState => prefState;\nexport type WidthBucket = \"wide\" | \"mid\";\nconst bucketNow = (): WidthBucket => (vw() >= 1280 ? \"wide\" : \"mid\");\n\nexport type PanelMode = \"float\" | \"side\" | \"sheet\" | \"modal\";\nfunction useMedia(q: string) {\n  const [ok, setOk] = React.useState(() => typeof window !== \"undefined\" && window.matchMedia(q).matches);\n  React.useEffect(() => {\n    const m = window.matchMedia(q);\n    const on = () => setOk(m.matches);\n    on();\n    m.addEventListener(\"change\", on);\n    return () => m.removeEventListener(\"change\", on);\n  }, [q]);\n  return ok;\n}\n/** How a panel presents at this width and pointer: float · side (tablet touch) · sheet (phones) · modal (inside a D49 modal). */\nexport function usePanelMode(inModal?: boolean): PanelMode {\n  const phone = useMedia(\"(max-width: 767px)\");\n  const touchTablet = useMedia(\"(max-width: 1279px) and (pointer: coarse)\");\n  if (inModal) return \"modal\";\n  return phone ? \"sheet\" : touchTablet ? \"side\" : \"float\";\n}\n\n/* ── helpers ──────────────────────────────────────────────────────────────────────────────────── */\nfunction scrollParent(el: HTMLElement | null): HTMLElement | null {\n  let p = el?.parentElement ?? null;\n  while (p && p !== document.body && p !== document.documentElement) {\n    const o = getComputedStyle(p).overflowY;\n    if ((o === \"auto\" || o === \"scroll\") && p.scrollHeight > p.clientHeight) return p;\n    p = p.parentElement;\n  }\n  return null;\n}\n/** Things a panel never covers by default: a floating or docked assistant, anything marked `data-floating-avoid`. */\nconst AVOID = \"#assistant-panel, [data-floating-avoid]\";\n/** Right-side panels of the page (the editor's Publishing · History · Comments): the panel takes the other side. */\nconst SIDE_PANELS = \"[data-doc-settings], [data-side-panel]\";\n/** A menu, picker, popover or another dialog is open: it takes Esc first. */\n/** An open Base UI popup (popover, menu, select, combobox): it carries data-open and data-side. Kit tooltips don't count. */\nconst POPUP_OPEN = \"[data-open][data-side]:not([data-kit-tooltip])\";\n/** A tooltip (the kit's, or the host's `data-slot=\"tooltip-content\"`), its positioner or arrow: a hint left open never takes Esc. */\nconst TOOLTIP = \"[data-kit-tooltip], [data-slot=tooltip-content]\";\nconst isTooltip = (n: Element) => !!n.closest(TOOLTIP) || !!n.querySelector(TOOLTIP);\nconst OWNS_ESCAPE = `[role=menu],[role=listbox],[data-cell-editing],${POPUP_OPEN}`;\nfunction layerOpen(self: HTMLElement | null) {\n  // a popover, menu or select (tooltips don't count), a cell with a draft\n  if (document.querySelector(\"[data-cell-editing]\") || Array.from(document.querySelectorAll(POPUP_OPEN)).some((n) => !isTooltip(n))) return true;\n  // a floating menu or picker (the slash menu); page-level listboxes (a sidebar list) don't count\n  const floating = (n: HTMLElement) => n.getAttribute(\"role\") === \"menu\" || !!n.closest(\"[data-floating-layer]:not([data-floating-panel])\");\n  if (Array.from(document.querySelectorAll<HTMLElement>(\"[role=menu], [role=listbox]\")).some((n) => n.getClientRects().length && floating(n))) return true;\n  return Array.from(document.querySelectorAll<HTMLElement>(\"[role=dialog]:is([data-open],[data-state=open])\")).some(\n    (d) => d !== self && !d.hasAttribute(\"data-expanded-editor\") && !d.hasAttribute(\"data-floating-panel\") && d.id !== \"assistant-panel\" && !d.hasAttribute(\"data-doc-panel\"),\n  );\n}\nconst FOCUSABLE = \"input:not([type=hidden]):not([disabled]), textarea:not([disabled]), [contenteditable=true], select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex='-1'])\";\n\n/** Events from the panel never reach the React tree it was rendered from (the card, the editor around it). */\nconst stop = (e: React.SyntheticEvent) => e.stopPropagation();\nconst FENCE = {\n  onFocus: stop, onBlur: stop, onClick: stop, onDoubleClick: stop, onMouseDown: stop, onMouseUp: stop, onMouseMove: stop,\n  onInput: stop, onPaste: stop, onCut: stop, onCopy: stop, onKeyUp: stop, onContextMenu: stop,\n} as const;\n\n/* ── The panel ────────────────────────────────────────────────────────────────────────────────── */\nexport const PANEL_W = 340;\nconst PANEL_MAX_AUTO_H = 560;\nconst TOP_LIMIT = 72;\nconst BOTTOM_GAP = 16;\nconst FLOAT_BOUNDS: Bounds = { minW: 300, minH: 240, maxW: () => Math.min(520, vw() - 32), maxH: () => vh() - 96, top: NAV + 4, pad: 8 };\n\nexport interface FloatingPanelHandle {\n  dock: (side: \"left\" | \"right\") => void;\n  /** back to the docked default (position and size) */\n  reset: () => void;\n  /** keyboard move / resize: arrows ±16 (Shift ±64), Enter commits, Esc cancels */\n  keyboard: (mode: \"move\" | \"resize\") => void;\n  /** a polite announcement from the panel's own live region */\n  announce: (text: string) => void;\n  el: () => HTMLElement | null;\n}\nexport interface FloatingPanelProps {\n  /** remembered placement key (one per kind of panel) */\n  id: string;\n  /** id of the element that names the panel (the header title) */\n  labelledBy: string;\n  /** the thing it edits: the panel follows it and docks beside its column (`[data-rt-editor]`) */\n  anchor: HTMLElement | null;\n  /** render inside this element instead of <body> (the D49 modal) */\n  container?: HTMLElement | null;\n  header: React.ReactNode;\n  children: React.ReactNode;\n  /** bottom-sheet footer (Done) */\n  sheetFooter?: React.ReactNode;\n  onClose: () => void;\n  /** F6 / Esc: where focus goes back to (the card) */\n  focusBack?: () => void;\n  /** a refill (another component picked while open): no entrance animation */\n  instant?: boolean;\n  bodyClassName?: string;\n  /** keys anywhere in the panel, before its own handling (⌘Z joins the host's undo) */\n  onPanelKeyDown?: (e: KeyboardEvent) => void;\n}\n\nexport const FloatingPanel = React.forwardRef<FloatingPanelHandle, FloatingPanelProps>(function FloatingPanel(\n  { id, labelledBy, anchor, container, header, children, sheetFooter, onClose, focusBack, instant, bodyClassName, onPanelKeyDown },\n  handle,\n) {\n  const reduce = useReducedMotion();\n  const mode = usePanelMode(!!container);\n  const root = React.useRef<HTMLDivElement>(null);\n  const live = React.useRef<HTMLDivElement>(null);\n  const [bucket, setBucket] = React.useState<WidthBucket>(bucketNow);\n  const key = `${id}:${bucket}`;\n  const pref = useFloatingPanelPrefs((s) => s.prefs[key]) ?? EMPTY;\n  const patch = (p: Partial<PanelPref> | null) => {\n    useFloatingPanelPrefs.getState().patch(key, p);\n    // layout may run before React re-renders with the new prefs\n    prefRef.current = useFloatingPanelPrefs.getState().prefs[key] ?? EMPTY;\n  };\n  const x = useMotionValue(-9999);\n  const y = useMotionValue(-9999);\n  const w = useMotionValue(pref.w ?? PANEL_W);\n  const h = useMotionValue(pref.h ?? 0);\n  const geom = React.useMemo<Geom>(() => ({ x, y, w, h }), [x, y, w, h]);\n  const [explicitH, setExplicitH] = React.useState(!!pref.h);\n  const [maxAuto, setMaxAuto] = React.useState(PANEL_MAX_AUTO_H);\n  const [guides, setGuides] = React.useState<Guides>(NO_GUIDES);\n  const [kbd, setKbd] = React.useState<null | { mode: \"move\" | \"resize\"; start: Rect; explicit: boolean }>(null);\n  const [sheetH, setSheetH] = React.useState<50 | 90>(50);\n  const busy = React.useRef(false); // dragging / resizing: layout pauses\n  const prefRef = React.useRef(pref);\n  prefRef.current = pref;\n  const kbdRef = React.useRef(kbd);\n  kbdRef.current = kbd;\n  const closeRef = React.useRef(onClose);\n  closeRef.current = onClose;\n  const backRef = React.useRef(focusBack);\n  backRef.current = focusBack;\n\n  // a new width bucket brings its own remembered placement\n  React.useEffect(() => {\n    const on = () => setBucket(bucketNow());\n    window.addEventListener(\"resize\", on);\n    return () => window.removeEventListener(\"resize\", on);\n  }, []);\n  React.useEffect(() => {\n    w.set(pref.w ?? PANEL_W);\n    setExplicitH(!!pref.h);\n    if (pref.h) h.set(pref.h);\n  }, [key]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const column = React.useCallback(() => (anchor?.closest<HTMLElement>(\"[data-rt-editor]\") ?? anchor)?.getBoundingClientRect() ?? null, [anchor]);\n\n  /** Where the panel sits now (float mode): its remembered spot, or docked beside the column, following the anchor. */\n  const layout = React.useCallback(() => {\n    const el = root.current;\n    if (!el || !anchor || mode !== \"float\" || busy.current || kbdRef.current) return;\n    const p = prefRef.current;\n    const sc = scrollParent(anchor)?.getBoundingClientRect();\n    const top = Math.max(TOP_LIMIT, (sc?.top ?? 0) + 8);\n    let bottom = vh() - BOTTOM_GAP;\n    const tray = document.querySelector<HTMLElement>(\"[data-action-tray]\")?.getBoundingClientRect();\n    if (tray && tray.height && tray.top > top + 240) bottom = Math.min(bottom, tray.top - 8);\n    if (sc && sc.bottom > top + 240) bottom = Math.min(bottom, sc.bottom - 8);\n    const room = Math.max(FLOAT_BOUNDS.minH, bottom - top);\n    const nextMax = Math.min(PANEL_MAX_AUTO_H, room);\n    setMaxAuto((m) => (m === nextMax ? m : nextMax));\n    const ww = w.get();\n    const ph = Math.min(el.offsetHeight || 320, room);\n    if (p.pos) {\n      x.set(clampN(p.pos.x, 8, Math.max(8, vw() - ww - 8)));\n      y.set(clampN(p.pos.y, NAV + 4, Math.max(NAV + 4, vh() - ph - 8)));\n      return;\n    }\n    const col = column();\n    const a = anchor.getBoundingClientRect();\n    if (!col) return;\n    let L = Math.max(8, sc?.left ?? 0);\n    let R = Math.min(vw() - 8, sc?.right ?? vw());\n    for (const o of Array.from(document.querySelectorAll<HTMLElement>(AVOID))) {\n      if (o === el || el.contains(o)) continue;\n      const r = o.getBoundingClientRect();\n      if (!r.width || !r.height || r.bottom < top || r.top > bottom) continue;\n      if (r.left + r.width / 2 < col.left + col.width / 2) L = Math.max(L, r.right);\n      else R = Math.min(R, r.left);\n    }\n    const need = ww + 16;\n    const fits = { right: R - col.right >= need, left: col.left - L >= need };\n    // an open right-side panel (Publishing · History · Comments) sends it to the other side\n    const rightBusy = Array.from(document.querySelectorAll<HTMLElement>(SIDE_PANELS)).some((n) => n.getBoundingClientRect().width > 40);\n    const side = p.side ?? (rightBusy ? \"left\" : fits.right ? \"right\" : fits.left ? \"left\" : \"right\");\n    const nx = side === \"right\" ? (fits.right ? col.right + 16 : R - ww - 8) : fits.left ? col.left - 16 - ww : L + 8;\n    x.set(clampN(nx, 8, Math.max(8, vw() - ww - 8)));\n    y.set(clampN(a.top, top, Math.max(top, bottom - ph)));\n  }, [anchor, mode, column, w, x, y]);\n\n  React.useLayoutEffect(() => {\n    layout();\n  }, [layout, pref.pos, pref.side, pref.w, explicitH]);\n  React.useEffect(() => {\n    if (mode !== \"float\") return;\n    let raf = 0;\n    let settle = 0;\n    const on = () => {\n      cancelAnimationFrame(raf);\n      raf = requestAnimationFrame(layout);\n      // once more after things stop moving (a side panel's exit animation ends after the last resize)\n      window.clearTimeout(settle);\n      settle = window.setTimeout(layout, 320);\n    };\n    window.addEventListener(\"scroll\", on, true);\n    window.addEventListener(\"resize\", on);\n    // something it avoids may have moved (the assistant window dropped somewhere else)\n    window.addEventListener(\"pointerup\", on);\n    const ro = new ResizeObserver(on);\n    if (root.current) ro.observe(root.current);\n    if (anchor) ro.observe(anchor);\n    // the work surface narrowing (a side panel opening) moves the column without resizing the anchor\n    const sc = scrollParent(anchor);\n    if (sc) ro.observe(sc);\n    return () => {\n      cancelAnimationFrame(raf);\n      window.clearTimeout(settle);\n      window.removeEventListener(\"scroll\", on, true);\n      window.removeEventListener(\"resize\", on);\n      window.removeEventListener(\"pointerup\", on);\n      ro.disconnect();\n    };\n  }, [mode, layout, anchor]);\n\n  // modal: dock into the modal's right 340px (the reading column shifts left), or overlay its edge when narrow\n  const [modalFit, setModalFit] = React.useState<\"dock\" | \"overlay\" | \"bottom\">(\"dock\");\n  React.useLayoutEffect(() => {\n    if (mode !== \"modal\" || !container) return;\n    const fit = () => {\n      const cw = container.clientWidth;\n      const next = cw < 560 ? \"bottom\" : cw >= PANEL_W + 680 ? \"dock\" : \"overlay\";\n      setModalFit(next);\n      if (next === \"dock\") container.setAttribute(\"data-floating-dock\", \"right\");\n      else container.removeAttribute(\"data-floating-dock\");\n    };\n    fit();\n    const ro = new ResizeObserver(fit);\n    ro.observe(container);\n    return () => {\n      ro.disconnect();\n      container.removeAttribute(\"data-floating-dock\");\n    };\n  }, [mode, container]);\n\n  const toExplicit = () => {\n    if (explicitH || !root.current) return;\n    h.set(root.current.offsetHeight);\n    setExplicitH(true);\n  };\n  const say = (text: string) => {\n    const el = live.current;\n    if (!el) return;\n    el.textContent = \"\";\n    window.setTimeout(() => {\n      if (live.current) live.current.textContent = text;\n    }, 60);\n  };\n\n  const reset = () => {\n    patch(null);\n    setExplicitH(false);\n    w.set(PANEL_W);\n  };\n  React.useImperativeHandle(handle, () => ({\n    dock: (side) => patch({ side, pos: undefined }),\n    reset,\n    keyboard: (m) => {\n      if (mode !== \"float\") return;\n      if (m === \"resize\") toExplicit();\n      setKbd({ mode: m, start: { x: x.get(), y: y.get(), w: w.get(), h: root.current?.offsetHeight ?? h.get() }, explicit: explicitH });\n      // after the ⋯ menu has handed focus back to its trigger\n      window.setTimeout(() => root.current?.focus({ preventScroll: true }), 80);\n      say(m === \"move\" ? \"Moving the panel. Arrow keys move it, Enter keeps it there, Escape cancels.\" : \"Resizing the panel. Arrow keys resize it, Enter keeps the size, Escape cancels.\");\n    },\n    announce: say,\n    el: () => root.current,\n  }));\n\n  /** Esc: keyboard mode cancels first, then the panel closes and focus goes back to the card. */\n  const escape = React.useCallback(() => {\n    const k = kbdRef.current;\n    if (k) {\n      x.set(k.start.x);\n      y.set(k.start.y);\n      w.set(k.start.w);\n      if (!k.explicit) setExplicitH(false);\n      else h.set(k.start.h);\n      setKbd(null);\n      say(\"Cancelled\");\n      return;\n    }\n    closeRef.current();\n    backRef.current?.();\n  }, [x, y, w, h]);\n\n  // Esc / F6 from OUTSIDE the panel (the text, the page); the modal forwards its Esc through \"floatingpanel:escape\"\n  React.useEffect(() => {\n    const el = root.current;\n    const onKey = (e: KeyboardEvent) => {\n      if (el?.contains(e.target as Node)) return;\n      if (e.key === \"F6\") {\n        e.preventDefault();\n        const f = Array.from(el?.querySelectorAll<HTMLElement>(`[data-panel-body] :is(${FOCUSABLE})`) ?? []).find((n) => n.getClientRects().length) ?? el;\n        f?.focus({ preventScroll: true });\n        return;\n      }\n      if (e.key !== \"Escape\" || e.defaultPrevented || layerOpen(el)) return;\n      if (!container && document.querySelector(\"[data-expanded-editor]\")) return; // a D49 modal over us owns Esc\n      e.preventDefault();\n      escape();\n    };\n    const onForward = () => escape();\n    window.addEventListener(\"keydown\", onKey);\n    el?.addEventListener(\"floatingpanel:escape\", onForward);\n    return () => {\n      window.removeEventListener(\"keydown\", onKey);\n      el?.removeEventListener(\"floatingpanel:escape\", onForward);\n    };\n  }, [container, escape]);\n\n  // Keys inside the panel\n  /* Keys inside the panel run on a NATIVE listener on the panel itself: it sees them first, wherever the panel is\n     portalled (inside a modal, React's own listeners sit on other containers). */\n  const keyRef = React.useRef<(e: KeyboardEvent) => void>(() => {});\n  keyRef.current = (e: KeyboardEvent) => {\n    const native = e as KeyboardEvent & { bcmsPanelHandled?: boolean };\n    onPanelKeyDown?.(e);\n    const k = kbdRef.current;\n    if (k) {\n      const step = e.shiftKey ? 64 : 16;\n      const dx = e.key === \"ArrowRight\" ? step : e.key === \"ArrowLeft\" ? -step : 0;\n      const dy = e.key === \"ArrowDown\" ? step : e.key === \"ArrowUp\" ? -step : 0;\n      if (dx || dy) {\n        e.preventDefault();\n        if (k.mode === \"move\") {\n          x.set(clampN(x.get() + dx, 8, vw() - w.get() - 8));\n          y.set(clampN(y.get() + dy, NAV + 4, vh() - h.get() - 8));\n        } else {\n          w.set(clampN(w.get() + dx, FLOAT_BOUNDS.minW, FLOAT_BOUNDS.maxW()));\n          h.set(clampN(h.get() + dy, FLOAT_BOUNDS.minH, FLOAT_BOUNDS.maxH()));\n          x.set(clampN(x.get(), 8, vw() - w.get() - 8));\n        }\n        return;\n      }\n      if (e.key === \"Enter\") {\n        e.preventDefault();\n        patch(k.mode === \"move\" ? { pos: { x: x.get(), y: y.get() } } : { w: w.get(), h: h.get(), pos: { x: x.get(), y: y.get() } });\n        setKbd(null);\n        say(k.mode === \"move\" ? \"Panel moved\" : \"Panel resized\");\n        return;\n      }\n    }\n    if (e.key === \"F6\") {\n      e.preventDefault();\n      backRef.current?.();\n    } else if (e.key === \"Escape\" && !native.bcmsPanelHandled && !(e.target as HTMLElement).closest?.(OWNS_ESCAPE) && !layerOpen(root.current)) {\n      e.preventDefault();\n      native.bcmsPanelHandled = true;\n      escape();\n    }\n  };\n  React.useEffect(() => {\n    const el = root.current;\n    if (!el) return;\n    const on = (e: KeyboardEvent) => keyRef.current(e);\n    el.addEventListener(\"keydown\", on);\n    return () => el.removeEventListener(\"keydown\", on);\n  }, [mode]);\n  // keep keys away from the card / editor this panel was rendered from (modified keys still reach app shortcuts)\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    if (!(e.metaKey || e.ctrlKey) || eventKey(e) === \"z\") e.stopPropagation();\n  };\n\n  const onHeaderDown = (e: React.PointerEvent) => {\n    if (mode !== \"float\" || e.button !== 0 || (e.target as HTMLElement).closest(\"button, a, input, textarea, [role=menuitem], [contenteditable]\")) return;\n    e.preventDefault();\n    const ox = x.get();\n    const oy = y.get();\n    const ww = w.get();\n    const hh = root.current?.offsetHeight ?? h.get();\n    const col = column();\n    const lines: SnapLines = { v: [EDGE, vw() - EDGE, ...(col ? [col.left, col.right] : [])], h: [TOP_LIMIT, vh() - EDGE] };\n    busy.current = true;\n    track(\n      e,\n      (dx, dy) => {\n        const r = snapRect(ox + dx, oy + dy, ww, hh, lines, FLOAT_BOUNDS);\n        x.set(r.x);\n        y.set(r.y);\n        setGuides((g) => (g.v.join() === r.g.v.join() && g.h.join() === r.g.h.join() ? g : r.g));\n      },\n      (moved) => {\n        busy.current = false;\n        setGuides(NO_GUIDES);\n        if (moved) patch({ pos: { x: x.get(), y: y.get() } });\n      },\n      \"grabbing\",\n    );\n  };\n\n  const headerEl = (\n    <div\n      data-panel-header=\"\"\n      onPointerDown={onHeaderDown}\n      onDoubleClick={(e) => {\n        if (mode !== \"float\" || (e.target as HTMLElement).closest(\"button, a, input, [role=menuitem]\")) return;\n        reset();\n      }}\n      className={cn(\"flex h-10 shrink-0 items-center gap-1 border-b border-kit-line-subtle pl-3 pr-1.5\", mode === \"float\" && \"cursor-grab touch-none select-none active:cursor-grabbing\")}\n    >\n      {header}\n    </div>\n  );\n  const body = (\n    <div data-panel-body=\"\" className={cn(\"min-h-0 flex-1 overflow-y-auto overscroll-contain\", bodyClassName)}>\n      {children}\n    </div>\n  );\n  const liveEl = <div ref={live} aria-live=\"polite\" className=\"sr-only\" />;\n  const common = {\n    ref: root,\n    role: \"dialog\",\n    \"aria-modal\": false as const,\n    \"aria-labelledby\": labelledBy,\n    tabIndex: -1,\n    ...KIT_SCOPE,\n    \"data-floating-layer\": \"\",\n    \"data-floating-panel\": \"\",\n    \"data-state\": \"open\",\n    \"data-kbd\": kbd ? kbd.mode : undefined,\n    onKeyDown,\n    ...FENCE,\n  };\n  const fade = reduce || instant ? { duration: 0 } : { duration: 0.16, ease: EASE };\n\n  let node: React.ReactNode;\n  if (mode === \"sheet\") {\n    node = (\n      <motion.div\n        {...common}\n        initial={{ y: reduce || instant ? 0 : \"100%\" }}\n        animate={{ y: 0 }}\n        transition={reduce || instant ? { duration: 0 } : { duration: 0.24, ease: EASE }}\n        style={{ height: `${sheetH}dvh` }}\n        className=\"fixed inset-x-0 bottom-0 z-[var(--kit-z-sheet,55)] flex flex-col overflow-hidden rounded-t-kit-xl border-t border-kit-line bg-kit-surface-raised pb-[env(safe-area-inset-bottom)] shadow-kit-sheet-b outline-none\"\n      >\n        <SheetGrabber height={sheetH} onHeight={setSheetH} onClose={() => escape()} />\n        {headerEl}\n        {body}\n        {sheetFooter ? <div className=\"flex shrink-0 justify-end border-t border-kit-line-subtle px-3 py-2\">{sheetFooter}</div> : null}\n        {liveEl}\n      </motion.div>\n    );\n  } else if (mode === \"side\") {\n    node = (\n      <motion.div\n        {...common}\n        initial={{ x: reduce || instant ? 0 : \"100%\" }}\n        animate={{ x: 0 }}\n        transition={reduce || instant ? { duration: 0 } : { duration: 0.22, ease: EASE }}\n        style={{ width: PANEL_W, top: NAV }}\n        className=\"fixed bottom-0 right-0 z-[var(--kit-z-sheet,55)] flex flex-col border-l border-kit-line bg-kit-surface-raised shadow-kit-sheet-r outline-none\"\n      >\n        {headerEl}\n        {body}\n        {liveEl}\n      </motion.div>\n    );\n  } else if (mode === \"modal\") {\n    node = (\n      <motion.div\n        {...common}\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        transition={fade}\n        style={modalFit === \"dock\" ? { width: PANEL_W, top: 48, right: 0, bottom: 0 } : modalFit === \"overlay\" ? { width: PANEL_W, top: 56, right: 8, bottom: 8 } : { left: 0, right: 0, bottom: 0, height: \"55%\" }}\n        className={cn(\n          \"absolute z-[20] flex flex-col overflow-hidden bg-kit-surface-raised outline-none\",\n          modalFit === \"dock\"\n            ? \"border-l border-kit-line\"\n            : modalFit === \"overlay\"\n              ? \"rounded-kit-xl border border-kit-floating-line shadow-kit-lg\"\n              : \"rounded-t-kit-xl border-t border-kit-line shadow-kit-sheet-b\",\n        )}\n      >\n        {headerEl}\n        {body}\n        {liveEl}\n      </motion.div>\n    );\n  } else {\n    node = (\n      <>\n        <SnapGuides guides={guides} />\n        <motion.div\n          {...common}\n          style={{ x, y, width: w, height: explicitH ? h : undefined, maxHeight: explicitH ? undefined : maxAuto, left: 0, top: 0 }}\n          initial={{ opacity: 0, scale: reduce || instant ? 1 : 0.98 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={fade}\n          className={cn(\n            \"fixed flex flex-col overflow-hidden rounded-kit-xl border bg-kit-surface-raised shadow-kit-xl outline-none\",\n            // floating = level 2: --line in light, the stronger hairline in dark (DARK_MODE §5)\n            kbd ? \"border-dashed border-[var(--kit-emphasis-line)]\" : \"border-kit-floating-line\",\n            Z_FLOAT,\n          )}\n        >\n          <ResizeEdges\n            geom={geom}\n            bounds={FLOAT_BOUNDS}\n            onStart={() => {\n              busy.current = true;\n              toExplicit();\n            }}\n            onEnd={(dir) => {\n              busy.current = false;\n              const moved = dir.includes(\"w\") || dir.includes(\"n\") || !!prefRef.current.pos;\n              patch({ w: w.get(), h: h.get(), ...(moved ? { pos: { x: x.get(), y: y.get() } } : {}) });\n            }}\n          />\n          {headerEl}\n          {body}\n          <ResizeGrip\n            geom={geom}\n            bounds={FLOAT_BOUNDS}\n            label=\"Resize panel\"\n            onStart={toExplicit}\n            onEnd={() => patch({ w: w.get(), h: h.get(), pos: { x: x.get(), y: y.get() } })}\n          />\n          {liveEl}\n        </motion.div>\n      </>\n    );\n  }\n  return createPortal(node, container ?? document.body);\n});\nconst EMPTY: PanelPref = {};\n\n/** Bottom-sheet grabber: drag down to close, up for 90%; a tap toggles 50% ↔ 90%. */\nfunction SheetGrabber({ height, onHeight, onClose }: { height: 50 | 90; onHeight: (h: 50 | 90) => void; onClose: () => void }) {\n  const dy = React.useRef(0);\n  const dragged = React.useRef(false);\n  return (\n    <button\n      type=\"button\"\n      aria-label={height === 50 ? \"Expand panel\" : \"Shrink panel\"}\n      onPointerDown={(e) => {\n        dy.current = 0;\n        dragged.current = false;\n        track(\n          e,\n          (_dx, d) => {\n            dy.current = d;\n            dragged.current = true;\n          },\n          (moved) => {\n            if (!moved) return;\n            if (dy.current > 80) onClose();\n            else if (dy.current < -40) onHeight(90);\n            else if (dy.current > 40 && height === 90) onHeight(50);\n          },\n        );\n      }}\n      onClick={() => {\n        if (dragged.current) return void (dragged.current = false);\n        onHeight(height === 50 ? 90 : 50);\n      }}\n      className=\"flex h-5 w-full shrink-0 touch-none items-center justify-center\"\n    >\n      <span className=\"h-1 w-9 rounded-full bg-kit-line-strong\" />\n    </button>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/index.d.ts

@@ -0,0 +1,16 @@
+export * from "./button";
+export * from "./input";
+export * from "./controls";
+export * from "./select";
+export * from "./choice-switch";
+export * from "./overlay";
+export * from "./display";
+export * from "./action-tray";
+export * from "./shortcut-hint";
+export * from "./expanded-editor-modal";
+export * from "./presence";
+export * from "./mode-bar";
+export * from "./spinner";
+export * from "./tab";
+export * from "./toast";
+export * from "./autocomplete";

package/dist/ui/index.js

@@ -0,0 +1,18 @@
+import { FieldDescribedByContext, FieldLabelledByContext, useFieldDescribedBy, useFieldId, useFieldLabelledBy } from "./field-context.js";
+import { Button, HintTooltip, IconButton, RevealLink, Sparkle, TooltipScope, buttonVariants, iconButtonVariants } from "./button.js";
+import { ShortcutHint, ShortcutHintsProvider, shortcutHintsOn, useShortcutHints } from "./shortcut-hint.js";
+import { Checkbox, ChoiceCard, ChoiceList, Progress, Radio, RadioGroup, Segmented, Slider, Switch, ToggleGroup, ToggleItem } from "./controls.js";
+import { FLOATING_LAYER, FlowBody, FlowClose, FlowFooter, FlowHeader, FlowLabel, FlowModal, HeaderStatus, HoverCard, HoverCardContent, HoverCardTrigger, Menu, MenuCheckItem, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, ModalBody, ModalClose, ModalContent, ModalFooter, ModalHeader, ModalTrigger, MoreOptions, OptionRow, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Sheet, SheetClose, SheetContent, SheetTrigger, Tooltip, TooltipProvider, useFocusReturn } from "./overlay.js";
+import { Avatar, AvatarStack, Badge, Card, CardHeader, Dot, EmptyState, Kbd, PageHeader, Separator, SettingsSection, Skeleton, Stat, StatusMark, StatusPill, Table, Td, Th, Tr, avatarRingSpread, badgeVariants, colorFor, initials, statusMap } from "./display.js";
+import { AGENT_PRESENCE, presenceColor, presenceSlot, registerPresenceRoster } from "./presence.js";
+import { Field, HelpMore, Input, Label, SearchInput, Textarea } from "./input.js";
+import { Highlight, SEARCH_THRESHOLD, Select, filterOptions, matchPositions, matchScore, nodeText, selectTriggerClass } from "./select.js";
+import { ExpandedEditorModal } from "./expanded-editor-modal.js";
+import { ChoiceSwitch, SEGMENTED_MAX, SEGMENTED_MAX_LABEL, fitsSegmented } from "./choice-switch.js";
+import { ActionTray, TrayMeta, TrayMore, actionTrayClass, relTime } from "./action-tray.js";
+import { ModeBar, ModeBarDot, ModeBarLink } from "./mode-bar.js";
+import { Spinner } from "./spinner.js";
+import { Tab, TabList, TabPanel, Tabs } from "./tab.js";
+import { KitToaster, kitToast, kitToastManager } from "./toast.js";
+import { Autocomplete } from "./autocomplete.js";
+export { AGENT_PRESENCE, ActionTray, Autocomplete, Avatar, AvatarStack, Badge, Button, Card, CardHeader, Checkbox, ChoiceCard, ChoiceList, ChoiceSwitch, Dot, EmptyState, ExpandedEditorModal, FLOATING_LAYER, Field, FieldDescribedByContext, FieldLabelledByContext, FlowBody, FlowClose, FlowFooter, FlowHeader, FlowLabel, FlowModal, HeaderStatus, HelpMore, Highlight, HintTooltip, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, Input, Kbd, KitToaster, Label, Menu, MenuCheckItem, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, ModalBody, ModalClose, ModalContent, ModalFooter, ModalHeader, ModalTrigger, ModeBar, ModeBarDot, ModeBarLink, MoreOptions, OptionRow, PageHeader, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, Radio, RadioGroup, RevealLink, SEARCH_THRESHOLD, SEGMENTED_MAX, SEGMENTED_MAX_LABEL, SearchInput, Segmented, Select, Separator, SettingsSection, Sheet, SheetClose, SheetContent, SheetTrigger, ShortcutHint, ShortcutHintsProvider, Skeleton, Slider, Sparkle, Spinner, Stat, StatusMark, StatusPill, Switch, Tab, TabList, TabPanel, Table, Tabs, Td, Textarea, Th, ToggleGroup, ToggleItem, Tooltip, TooltipProvider, TooltipScope, Tr, TrayMeta, TrayMore, actionTrayClass, avatarRingSpread, badgeVariants, buttonVariants, colorFor, filterOptions, fitsSegmented, iconButtonVariants, initials, kitToast, kitToastManager, matchPositions, matchScore, nodeText, presenceColor, presenceSlot, registerPresenceRoster, relTime, selectTriggerClass, shortcutHintsOn, statusMap, useFieldDescribedBy, useFieldId, useFieldLabelledBy, useFocusReturn, useShortcutHints };

package/dist/ui/input.d.ts

@@ -0,0 +1,78 @@
+import * as React from "react";
+/**
+ * Inputs — CPO D19: white field + 1px --field-border at rest (default "outline"), border darkens on hover, halo on focus.
+ * "filled" (grey, borderless) is kept only for search fields, which Figma draws grey.
+ * Heights follow buttons: sm 28 · md 32 · lg 36.
+ */
+import { FieldDescribedByContext, FieldLabelledByContext, useFieldDescribedBy, useFieldId, useFieldLabelledBy } from "./field-context";
+export { FieldDescribedByContext, FieldLabelledByContext, useFieldDescribedBy, useFieldId, useFieldLabelledBy };
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
+    size?: "sm" | "md" | "lg";
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    variant?: "filled" | "outline";
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    autoGrow?: boolean;
+    variant?: "filled" | "outline";
+};
+export declare const Textarea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    autoGrow?: boolean;
+    variant?: "filled" | "outline";
+} & React.RefAttributes<HTMLTextAreaElement>>;
+export declare function SearchInput({ value, onChange, placeholder, className, size, autoFocus, shortcut, variant, count, onKeyDown, inputRef, "aria-label": ariaLabel, }: {
+    "aria-label"?: string;
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string;
+    className?: string;
+    size?: "sm" | "md" | "lg";
+    autoFocus?: boolean;
+    /** Shown only while the D44 keyboard hints switch is on. */
+    shortcut?: string;
+    /**
+     * "filled" (grey) for search on white surfaces (menus, sidebars, lists); "outline" is the standard field (field-bg,
+     * field-border) for search that sits on a grey plane, where a grey fill reads as a pill, not a field (D70, the schema desk).
+     */
+    variant?: "filled" | "outline";
+    /** a result count shown inside the field while there is a query ("3 matches", "2 of 5"); announced politely */
+    count?: string;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    inputRef?: React.Ref<HTMLInputElement>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Label({ className, ...props }: React.LabelHTMLAttributes<HTMLLabelElement>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Field = label row · help · control · error. CPO D39, the one help system (same spec as the Block Kit FieldShell):
+ *   [Label *] [hint] [i helpMore]  ……  [counter] [actions]
+ *   help: 12/16, --fg-3 (≥4.5:1 light + dark), 4px under the label, 1–2 lines
+ *   control
+ *   error: replaces the help, danger colour, under the control
+ * The control gets `aria-describedby` → help + ⓘ text + error.
+ * Required marker is V2 ui/input.tsx:249 (--danger-fg); the sr-only "(required)" names it for screen readers.
+ */
+export declare function Field({ label, htmlFor, hint, help, helpMore, error, required, counter, actions, children, className, }: {
+    label?: React.ReactNode;
+    htmlFor?: string;
+    /** short, quiet aside on the label row ("Optional", "Shown publicly") */
+    hint?: React.ReactNode;
+    /** the help line under the label */
+    help?: React.ReactNode;
+    /** longer explanation behind the ⓘ next to the label */
+    helpMore?: React.ReactNode;
+    error?: React.ReactNode;
+    required?: boolean;
+    counter?: {
+        value: number;
+        max: number;
+    };
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** The ⓘ next to a label: longer help in a tooltip, also read by screen readers through aria-describedby (D39). */
+export declare function HelpMore({ id, label, children }: {
+    id?: string;
+    label?: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/input.js

@@ -0,0 +1,250 @@
+import { cn } from "../lib/cn.js";
+import { FieldDescribedByContext, FieldIdContext, FieldLabelledByContext, useFieldDescribedBy, useFieldId, useFieldLabelledBy, useLabelFor } from "./field-context.js";
+import { HintTooltip } from "./button.js";
+import { useShortcutHints } from "./shortcut-hint.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconInfoCircle, IconSearch, IconX } from "@tabler/icons-react";
+//#region src/ui/input.tsx
+/**
+* Inputs — CPO D19: white field + 1px --field-border at rest (default "outline"), border darkens on hover, halo on focus.
+* "filled" (grey, borderless) is kept only for search fields, which Figma draws grey.
+* Heights follow buttons: sm 28 · md 32 · lg 36.
+*/
+var joinIds = (...ids) => ids.filter(Boolean).join(" ") || void 0;
+var base = "w-full min-w-0 rounded-kit-md border border-kit-field-border bg-kit-field-bg text-kit-fg shadow-kit-field placeholder:text-kit-fg-4 transition-[border-color,box-shadow] duration-150 hover:border-kit-field-border-hover focus:border-kit-field-border-focus focus:shadow-kit-ring-field disabled:cursor-not-allowed disabled:bg-kit-subtle disabled:opacity-60 aria-[invalid=true]:border-[var(--kit-field-invalid)]";
+var Input = React.forwardRef(({ className, size = "md", leading, trailing, variant = "outline", ...rest }, ref) => {
+	const fieldId = useFieldId();
+	const labelledBy = useFieldLabelledBy();
+	const named = rest.id ?? fieldId ?? rest["aria-label"] ?? rest["aria-labelledby"];
+	const labelFor = useLabelFor(rest.id ?? fieldId);
+	const describedBy = useFieldDescribedBy();
+	const props = {
+		...rest,
+		id: rest.id ?? fieldId,
+		"aria-labelledby": rest["aria-labelledby"] ?? (rest["aria-label"] ? void 0 : labelFor ?? (named ? void 0 : labelledBy)),
+		"aria-describedby": joinIds(rest["aria-describedby"], describedBy)
+	};
+	const h = size === "sm" ? "h-7 text-kit-sm" : size === "lg" ? "h-9 text-kit-base" : "h-8 text-kit-sm";
+	const v = variant === "filled" ? "bg-kit-muted border-transparent shadow-none hover:border-kit-line-strong" : "";
+	if (!leading && !trailing) return /* @__PURE__ */ jsx("input", {
+		ref,
+		className: cn(base, h, v, "px-2.5", className),
+		...props
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex items-center", className),
+		children: [
+			leading ? /* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none absolute left-2.5 flex text-kit-fg-3 [&_svg]:size-4",
+				children: leading
+			}) : null,
+			/* @__PURE__ */ jsx("input", {
+				ref,
+				className: cn(base, h, v, leading ? "pl-8" : "pl-2.5", trailing ? "pr-8" : "pr-2.5"),
+				...props
+			}),
+			trailing ? /* @__PURE__ */ jsx("span", {
+				className: "absolute right-2 flex items-center text-kit-fg-3 [&_svg]:size-4",
+				children: trailing
+			}) : null
+		]
+	});
+});
+Input.displayName = "Input";
+var Textarea = React.forwardRef(({ className, autoGrow = true, variant = "outline", onInput, ...rest }, ref) => {
+	const fieldId = useFieldId();
+	const labelFor = useLabelFor(rest.id ?? fieldId);
+	const describedBy = useFieldDescribedBy();
+	const props = {
+		...rest,
+		id: rest.id ?? fieldId,
+		"aria-labelledby": rest["aria-labelledby"] ?? (rest["aria-label"] ? void 0 : labelFor),
+		"aria-describedby": joinIds(rest["aria-describedby"], describedBy)
+	};
+	const inner = React.useRef(null);
+	React.useImperativeHandle(ref, () => inner.current);
+	const grow = () => {
+		const el = inner.current;
+		if (!el || !autoGrow || !el.clientWidth) return;
+		el.style.height = "auto";
+		el.style.height = `${el.scrollHeight + 2}px`;
+	};
+	React.useLayoutEffect(grow, [props.value, autoGrow]);
+	React.useEffect(() => {
+		const el = inner.current;
+		if (!el || !autoGrow || typeof ResizeObserver === "undefined") return;
+		let w = el.clientWidth;
+		let raf = 0;
+		const ro = new ResizeObserver(() => {
+			const nw = el.clientWidth;
+			if (nw === w) return;
+			w = nw;
+			cancelAnimationFrame(raf);
+			raf = requestAnimationFrame(grow);
+		});
+		ro.observe(el);
+		return () => {
+			cancelAnimationFrame(raf);
+			ro.disconnect();
+		};
+	}, [autoGrow]);
+	return /* @__PURE__ */ jsx("textarea", {
+		ref: inner,
+		rows: props.rows ?? 2,
+		onInput: (e) => {
+			grow();
+			onInput?.(e);
+		},
+		className: cn(base, "min-h-16 resize-none px-2.5 py-2 text-kit-sm leading-[20px]", variant === "filled" && "bg-kit-muted border-transparent shadow-none", className),
+		...props
+	});
+});
+Textarea.displayName = "Textarea";
+function SearchInput({ value, onChange, placeholder = "Search…", className, size = "md", autoFocus, shortcut, variant = "filled", count, onKeyDown, inputRef, "aria-label": ariaLabel }) {
+	const hints = useShortcutHints();
+	return /* @__PURE__ */ jsx(Input, {
+		ref: inputRef,
+		variant,
+		size,
+		autoFocus,
+		value,
+		placeholder,
+		"aria-label": ariaLabel ?? placeholder.replace(/…$/, ""),
+		onChange: (e) => onChange(e.target.value),
+		onKeyDown,
+		leading: /* @__PURE__ */ jsx(IconSearch, { "aria-hidden": true }),
+		className: cn(className, value && count ? "[&_input]:pr-28" : void 0),
+		trailing: value ? /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-1.5",
+			children: [count ? /* @__PURE__ */ jsx("span", {
+				"aria-live": "polite",
+				className: "whitespace-nowrap text-kit-xs tabular-nums text-kit-fg-3",
+				children: count
+			}) : null, /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Clear search",
+				onClick: () => onChange(""),
+				className: "flex size-5 items-center justify-center rounded-kit-sm text-kit-fg-3 hover:bg-kit-selected hover:text-kit-fg [&_svg]:size-3.5",
+				children: /* @__PURE__ */ jsx(IconX, { "aria-hidden": true })
+			})]
+		}) : shortcut && hints ? /* @__PURE__ */ jsx("kbd", {
+			"data-hint": "shortcuts",
+			className: "font-kit-sans text-kit-2xs text-kit-fg-3",
+			children: shortcut
+		}) : void 0
+	});
+}
+function Label({ className, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		className: cn("text-kit-sm font-medium text-kit-fg", className),
+		...props
+	});
+}
+/**
+* Field = label row · help · control · error. CPO D39, the one help system (same spec as the Block Kit FieldShell):
+*   [Label *] [hint] [i helpMore]  ……  [counter] [actions]
+*   help: 12/16, --fg-3 (≥4.5:1 light + dark), 4px under the label, 1–2 lines
+*   control
+*   error: replaces the help, danger colour, under the control
+* The control gets `aria-describedby` → help + ⓘ text + error.
+* Required marker is V2 ui/input.tsx:249 (--danger-fg); the sr-only "(required)" names it for screen readers.
+*/
+function Field({ label, htmlFor, hint, help, helpMore, error, required, counter, actions, children, className }) {
+	const autoId = React.useId();
+	const id = htmlFor ?? autoId;
+	const helpId = `${id}-help`;
+	const moreId = `${id}-more`;
+	const errId = `${id}-error`;
+	const describedBy = [error ? errId : help ? helpId : null, helpMore ? moreId : null].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1.5", className),
+		children: [
+			label || actions || counter ? /* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-5 items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 items-center gap-1",
+					children: [/* @__PURE__ */ jsxs(Label, {
+						htmlFor: label ? id : void 0,
+						className: "flex items-center gap-1.5 text-kit-sm text-kit-fg-2",
+						children: [
+							label,
+							required ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "text-kit-danger-fg",
+								children: "*"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: "(required)"
+							})] }) : null,
+							hint ? /* @__PURE__ */ jsx("span", {
+								className: "font-normal text-kit-fg-3",
+								children: hint
+							}) : null
+						]
+					}), helpMore ? /* @__PURE__ */ jsx(HelpMore, {
+						id: moreId,
+						label: typeof label === "string" ? label : void 0,
+						children: helpMore
+					}) : null]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [counter ? /* @__PURE__ */ jsxs("span", {
+						className: cn("tabular-nums text-kit-xs", counter.value > counter.max ? "text-kit-danger-fg" : counter.value > counter.max * .9 ? "text-kit-warning-fg" : "text-kit-fg-3"),
+						children: [
+							counter.value,
+							"/",
+							counter.max
+						]
+					}) : null, actions]
+				})]
+			}) : null,
+			help && !error ? /* @__PURE__ */ jsx("p", {
+				id: helpId,
+				"data-slot": "field-help",
+				className: "-mt-0.5 text-kit-xs leading-4 text-kit-fg-3",
+				children: help
+			}) : null,
+			/* @__PURE__ */ jsx(FieldIdContext.Provider, {
+				value: label ? id : void 0,
+				children: /* @__PURE__ */ jsx(FieldDescribedByContext.Provider, {
+					value: describedBy,
+					children
+				})
+			}),
+			error ? /* @__PURE__ */ jsx("p", {
+				id: errId,
+				role: "alert",
+				className: "text-kit-xs leading-4 text-kit-danger-fg",
+				children: error
+			}) : null
+		]
+	});
+}
+/** The ⓘ next to a label: longer help in a tooltip, also read by screen readers through aria-describedby (D39). */
+function HelpMore({ id, label, children }) {
+	return /* @__PURE__ */ jsx(HintTooltip, {
+		content: /* @__PURE__ */ jsx("span", {
+			className: "block max-w-[260px] whitespace-normal font-normal leading-4",
+			children
+		}),
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-label": label ? `About ${label}` : "More about this field",
+			className: "hit-area inline-flex size-4 shrink-0 items-center justify-center rounded-kit-sm text-kit-fg-4 [--hit-size:16px] hover:text-kit-fg-2",
+			children: [/* @__PURE__ */ jsx(IconInfoCircle, {
+				className: "size-3.5",
+				stroke: 1.5,
+				"aria-hidden": true
+			}), /* @__PURE__ */ jsx("span", {
+				id,
+				className: "sr-only",
+				children
+			})]
+		})
+	});
+}
+//#endregion
+export { Field, FieldDescribedByContext, FieldLabelledByContext, HelpMore, Input, Label, SearchInput, Textarea, useFieldDescribedBy, useFieldId, useFieldLabelledBy };
+
+//# sourceMappingURL=input.js.map

package/dist/ui/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../../src/ui/input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { IconInfoCircle, IconSearch, IconX } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { HintTooltip } from \"./button\";\nimport { useShortcutHints } from \"./shortcut-hint\";\n\n/**\n * Inputs — CPO D19: white field + 1px --field-border at rest (default \"outline\"), border darkens on hover, halo on focus.\n * \"filled\" (grey, borderless) is kept only for search fields, which Figma draws grey.\n * Heights follow buttons: sm 28 · md 32 · lg 36.\n */\nimport {\n  FieldDescribedByContext,\n  FieldIdContext,\n  FieldLabelledByContext,\n  useFieldDescribedBy,\n  useFieldId,\n  useFieldLabelledBy,\n  useLabelFor,\n} from \"./field-context\";\n/* The Field contexts live in field-context.ts so controls in other files (Switch, Select) read the same ones. */\nexport { FieldDescribedByContext, FieldLabelledByContext, useFieldDescribedBy, useFieldId, useFieldLabelledBy };\n\nconst joinIds = (...ids: (string | undefined)[]) => ids.filter(Boolean).join(\" \") || undefined;\n\nconst base =\n  \"w-full min-w-0 rounded-kit-md border border-kit-field-border bg-kit-field-bg text-kit-fg shadow-kit-field placeholder:text-kit-fg-4 transition-[border-color,box-shadow] duration-150 hover:border-kit-field-border-hover focus:border-kit-field-border-focus focus:shadow-kit-ring-field disabled:cursor-not-allowed disabled:bg-kit-subtle disabled:opacity-60 aria-[invalid=true]:border-[var(--kit-field-invalid)]\";\n\nexport interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\"> {\n  size?: \"sm\" | \"md\" | \"lg\";\n  leading?: React.ReactNode;\n  trailing?: React.ReactNode;\n  variant?: \"filled\" | \"outline\";\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, size = \"md\", leading, trailing, variant = \"outline\", ...rest }, ref) => {\n    const fieldId = useFieldId();\n    const labelledBy = useFieldLabelledBy();\n    const named = rest.id ?? fieldId ?? rest[\"aria-label\"] ?? rest[\"aria-labelledby\"];\n    const labelFor = useLabelFor(rest.id ?? fieldId);\n    const describedBy = useFieldDescribedBy();\n    const props = {\n      ...rest,\n      id: rest.id ?? fieldId,\n      \"aria-labelledby\": rest[\"aria-labelledby\"] ?? (rest[\"aria-label\"] ? undefined : (labelFor ?? (named ? undefined : labelledBy))),\n      \"aria-describedby\": joinIds(rest[\"aria-describedby\"], describedBy),\n    };\n    const h = size === \"sm\" ? \"h-7 text-kit-sm\" : size === \"lg\" ? \"h-9 text-kit-base\" : \"h-8 text-kit-sm\";\n    const v = variant === \"filled\" ? \"bg-kit-muted border-transparent shadow-none hover:border-kit-line-strong\" : \"\";\n    if (!leading && !trailing) return <input ref={ref} className={cn(base, h, v, \"px-2.5\", className)} {...props} />;\n    return (\n      <div className={cn(\"relative flex items-center\", className)}>\n        {leading ? (\n          <span className=\"pointer-events-none absolute left-2.5 flex text-kit-fg-3 [&_svg]:size-4\">{leading}</span>\n        ) : null}\n        <input ref={ref} className={cn(base, h, v, leading ? \"pl-8\" : \"pl-2.5\", trailing ? \"pr-8\" : \"pr-2.5\")} {...props} />\n        {trailing ? <span className=\"absolute right-2 flex items-center text-kit-fg-3 [&_svg]:size-4\">{trailing}</span> : null}\n      </div>\n    );\n  },\n);\nInput.displayName = \"Input\";\n\nexport type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & { autoGrow?: boolean; variant?: \"filled\" | \"outline\" };\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, autoGrow = true, variant = \"outline\", onInput, ...rest }, ref) => {\n    const fieldId = useFieldId();\n    const labelFor = useLabelFor(rest.id ?? fieldId);\n    const describedBy = useFieldDescribedBy();\n    const props = {\n      ...rest,\n      id: rest.id ?? fieldId,\n      \"aria-labelledby\": rest[\"aria-labelledby\"] ?? (rest[\"aria-label\"] ? undefined : labelFor),\n      \"aria-describedby\": joinIds(rest[\"aria-describedby\"], describedBy),\n    };\n    const inner = React.useRef<HTMLTextAreaElement | null>(null);\n    React.useImperativeHandle(ref, () => inner.current as HTMLTextAreaElement);\n    const grow = () => {\n      const el = inner.current;\n      if (!el || !autoGrow || !el.clientWidth) return; // hidden / zero-width: measuring now would be wrong\n      el.style.height = \"auto\";\n      el.style.height = `${el.scrollHeight + 2}px`;\n    };\n    React.useLayoutEffect(grow, [props.value, autoGrow]); // eslint-disable-line react-hooks/exhaustive-deps\n    /* Re-measure when the WIDTH changes (a panel resize or a panel that mounts mid-animation): a height measured at a\n       narrower width is stale and leaves single-line fields hundreds of px tall. Height-only changes are ignored, so\n       the observer never feeds itself. */\n    React.useEffect(() => {\n      const el = inner.current;\n      if (!el || !autoGrow || typeof ResizeObserver === \"undefined\") return;\n      let w = el.clientWidth;\n      let raf = 0;\n      const ro = new ResizeObserver(() => {\n        const nw = el.clientWidth;\n        if (nw === w) return;\n        w = nw;\n        cancelAnimationFrame(raf);\n        raf = requestAnimationFrame(grow);\n      });\n      ro.observe(el);\n      return () => {\n        cancelAnimationFrame(raf);\n        ro.disconnect();\n      };\n    }, [autoGrow]); // eslint-disable-line react-hooks/exhaustive-deps\n    return (\n      <textarea\n        ref={inner}\n        rows={props.rows ?? 2}\n        onInput={(e) => {\n          grow();\n          onInput?.(e);\n        }}\n        className={cn(\n          base,\n          \"min-h-16 resize-none px-2.5 py-2 text-kit-sm leading-[20px]\",\n          variant === \"filled\" && \"bg-kit-muted border-transparent shadow-none\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTextarea.displayName = \"Textarea\";\n\nexport function SearchInput({\n  value,\n  onChange,\n  placeholder = \"Search…\",\n  className,\n  size = \"md\",\n  autoFocus,\n  shortcut,\n  variant = \"filled\",\n  count,\n  onKeyDown,\n  inputRef,\n  \"aria-label\": ariaLabel,\n}: {\n  \"aria-label\"?: string;\n  value: string;\n  onChange: (v: string) => void;\n  placeholder?: string;\n  className?: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  autoFocus?: boolean;\n  /** Shown only while the D44 keyboard hints switch is on. */\n  shortcut?: string;\n  /**\n   * \"filled\" (grey) for search on white surfaces (menus, sidebars, lists); \"outline\" is the standard field (field-bg,\n   * field-border) for search that sits on a grey plane, where a grey fill reads as a pill, not a field (D70, the schema desk).\n   */\n  variant?: \"filled\" | \"outline\";\n  /** a result count shown inside the field while there is a query (\"3 matches\", \"2 of 5\"); announced politely */\n  count?: string;\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  inputRef?: React.Ref<HTMLInputElement>;\n}) {\n  const hints = useShortcutHints();\n  return (\n    <Input\n      ref={inputRef}\n      variant={variant}\n      size={size}\n      autoFocus={autoFocus}\n      value={value}\n      placeholder={placeholder}\n      aria-label={ariaLabel ?? placeholder.replace(/…$/, \"\")}\n      onChange={(e) => onChange(e.target.value)}\n      onKeyDown={onKeyDown}\n      leading={<IconSearch aria-hidden />}\n      className={cn(className, value && count ? \"[&_input]:pr-28\" : undefined)}\n      trailing={\n        value ? (\n          <span className=\"flex items-center gap-1.5\">\n            {count ? (\n              <span aria-live=\"polite\" className=\"whitespace-nowrap text-kit-xs tabular-nums text-kit-fg-3\">\n                {count}\n              </span>\n            ) : null}\n            <button\n              type=\"button\"\n              aria-label=\"Clear search\"\n              onClick={() => onChange(\"\")}\n              className=\"flex size-5 items-center justify-center rounded-kit-sm text-kit-fg-3 hover:bg-kit-selected hover:text-kit-fg [&_svg]:size-3.5\"\n            >\n              <IconX aria-hidden />\n            </button>\n          </span>\n        ) : shortcut && hints ? (\n          <kbd data-hint=\"shortcuts\" className=\"font-kit-sans text-kit-2xs text-kit-fg-3\">\n            {shortcut}\n          </kbd>\n        ) : undefined\n      }\n    />\n  );\n}\n\nexport function Label({ className, ...props }: React.LabelHTMLAttributes<HTMLLabelElement>) {\n  return <label className={cn(\"text-kit-sm font-medium text-kit-fg\", className)} {...props} />;\n}\n\n/**\n * Field = label row · help · control · error. CPO D39, the one help system (same spec as the Block Kit FieldShell):\n *   [Label *] [hint] [i helpMore]  ……  [counter] [actions]\n *   help: 12/16, --fg-3 (≥4.5:1 light + dark), 4px under the label, 1–2 lines\n *   control\n *   error: replaces the help, danger colour, under the control\n * The control gets `aria-describedby` → help + ⓘ text + error.\n * Required marker is V2 ui/input.tsx:249 (--danger-fg); the sr-only \"(required)\" names it for screen readers.\n */\nexport function Field({\n  label,\n  htmlFor,\n  hint,\n  help,\n  helpMore,\n  error,\n  required,\n  counter,\n  actions,\n  children,\n  className,\n}: {\n  label?: React.ReactNode;\n  htmlFor?: string;\n  /** short, quiet aside on the label row (\"Optional\", \"Shown publicly\") */\n  hint?: React.ReactNode;\n  /** the help line under the label */\n  help?: React.ReactNode;\n  /** longer explanation behind the ⓘ next to the label */\n  helpMore?: React.ReactNode;\n  error?: React.ReactNode;\n  required?: boolean;\n  counter?: { value: number; max: number };\n  actions?: React.ReactNode;\n  children: React.ReactNode;\n  className?: string;\n}) {\n  const autoId = React.useId();\n  const id = htmlFor ?? autoId;\n  const helpId = `${id}-help`;\n  const moreId = `${id}-more`;\n  const errId = `${id}-error`;\n  const describedBy = [error ? errId : help ? helpId : null, helpMore ? moreId : null].filter(Boolean).join(\" \") || undefined;\n  return (\n    <div className={cn(\"flex flex-col gap-1.5\", className)}>\n      {label || actions || counter ? (\n        <div className=\"flex min-h-5 items-center justify-between gap-2\">\n          <span className=\"flex min-w-0 items-center gap-1\">\n            <Label htmlFor={label ? id : undefined} className=\"flex items-center gap-1.5 text-kit-sm text-kit-fg-2\">\n              {label}\n              {required ? (\n                <>\n                  <span aria-hidden className=\"text-kit-danger-fg\">*</span>\n                  <span className=\"sr-only\">(required)</span>\n                </>\n              ) : null}\n              {hint ? <span className=\"font-normal text-kit-fg-3\">{hint}</span> : null}\n            </Label>\n            {helpMore ? (\n              <HelpMore id={moreId} label={typeof label === \"string\" ? label : undefined}>\n                {helpMore}\n              </HelpMore>\n            ) : null}\n          </span>\n          <div className=\"flex items-center gap-1\">\n            {counter ? (\n              <span\n                className={cn(\n                  \"tabular-nums text-kit-xs\",\n                  counter.value > counter.max\n                    ? \"text-kit-danger-fg\"\n                    : counter.value > counter.max * 0.9\n                      ? \"text-kit-warning-fg\"\n                      : \"text-kit-fg-3\",\n                )}\n              >\n                {counter.value}/{counter.max}\n              </span>\n            ) : null}\n            {actions}\n          </div>\n        </div>\n      ) : null}\n      {help && !error ? (\n        <p id={helpId} data-slot=\"field-help\" className=\"-mt-0.5 text-kit-xs leading-4 text-kit-fg-3\">\n          {help}\n        </p>\n      ) : null}\n      <FieldIdContext.Provider value={label ? id : undefined}>\n        <FieldDescribedByContext.Provider value={describedBy}>{children}</FieldDescribedByContext.Provider>\n      </FieldIdContext.Provider>\n      {error ? (\n        <p id={errId} role=\"alert\" className=\"text-kit-xs leading-4 text-kit-danger-fg\">\n          {error}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\n/** The ⓘ next to a label: longer help in a tooltip, also read by screen readers through aria-describedby (D39). */\nexport function HelpMore({ id, label, children }: { id?: string; label?: string; children: React.ReactNode }) {\n  return (\n    <HintTooltip content={<span className=\"block max-w-[260px] whitespace-normal font-normal leading-4\">{children}</span>}>\n      <button\n        type=\"button\"\n        aria-label={label ? `About ${label}` : \"More about this field\"}\n        className=\"hit-area inline-flex size-4 shrink-0 items-center justify-center rounded-kit-sm text-kit-fg-4 [--hit-size:16px] hover:text-kit-fg-2\"\n      >\n        <IconInfoCircle className=\"size-3.5\" stroke={1.5} aria-hidden />\n        <span id={id} className=\"sr-only\">\n          {children}\n        </span>\n      </button>\n    </HintTooltip>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/mode-bar.d.ts

@@ -0,0 +1,31 @@
+/**
+ * MODE BAR (D61 §3.7, shared with D58 view-as). One 36px strip that says "you are in a mode": an icon, a sentence and
+ * its actions, with a polite live-region announcement. The primitive is shared; the placement is not:
+ *
+ *  - View as (D58): app-wide, above the top bar (it changes who you are). `tone="info"`, centred. Esc does not exit.
+ *  - Revision preview (D61): inside the editor, under its header (it changes what you are looking at).
+ *    `tone="raised"`, start-aligned. Esc goes back to current (the host wires it).
+ *
+ * If both apply, both show: view-as on top. Tokens only, both themes (D56).
+ * The strip sits in the app shell, outside any kit host, so its root carries the kit scope itself (like the portalled layers).
+ */
+import * as React from "react";
+export type ModeBarTone = "info" | "raised";
+export interface ModeBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
+    /** the region's accessible name ("View as", "Version preview") */
+    label: string;
+    /** a 16px glyph, decorative */
+    icon?: React.ReactNode;
+    tone?: ModeBarTone;
+    /** "center" (view-as) or "start" (revision preview) */
+    align?: "center" | "start";
+    /** polite announcement, read once when it changes */
+    announce?: string;
+}
+export declare const ModeBar: React.ForwardRefExoticComponent<ModeBarProps & React.RefAttributes<HTMLDivElement>>;
+/** The quiet "·" between parts of a mode bar sentence. */
+export declare function ModeBarDot({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** A text action in a mode bar ("Exit"): underlined, not a button chip. */
+export declare const ModeBarLink: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;