@bettercms-ai/kit 0.1.1 → 1.0.0

package/ui/floating-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-panel.js","names":[],"sources":["../../src/kit/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 { FLOATING_LINE, KIT_SCOPE, SURFACE_RAISED } from \"./surfaces\";\n\n/* V2 --shadow-sheet-r / --shadow-sheet-b, light and dark (kit.css has no sheet shadows yet). */\nconst SHADOW_SHEET_R = \"shadow-[-12px_0_32px_-16px_rgb(0_0_0/0.18)] [.dark_&]:shadow-[-12px_0_32px_-16px_oklch(0.12_0.01_286/0.5)]\";\nconst SHADOW_SHEET_B = \"shadow-[0_-16px_40px_-12px_rgb(0_0_0/0.2)] [.dark_&]:shadow-[0_-16px_40px_-12px_oklch(0.12_0.01_286/0.5)]\";\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-[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])\";\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(`${POPUP_OPEN}, [data-cell-editing]`)) 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) || e.key.toLowerCase() === \"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={cn(\n          \"fixed inset-x-0 bottom-0 z-[55] flex flex-col overflow-hidden rounded-t-kit-xl border-t border-kit-line pb-[env(safe-area-inset-bottom)] text-kit-fg outline-none\",\n          SURFACE_RAISED,\n          SHADOW_SHEET_B,\n        )}\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={cn(\"fixed bottom-0 right-0 z-[55] flex flex-col border-l border-kit-line text-kit-fg outline-none\", SURFACE_RAISED, SHADOW_SHEET_R)}\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 text-kit-fg outline-none\",\n          SURFACE_RAISED,\n          modalFit === \"dock\"\n            ? \"border-l border-kit-line\"\n            : modalFit === \"overlay\"\n              ? cn(\"rounded-kit-xl border shadow-kit-lg\", FLOATING_LINE)\n              : cn(\"rounded-t-kit-xl border-t border-kit-line\", SHADOW_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 text-kit-fg shadow-kit-xl outline-none\",\n            SURFACE_RAISED,\n            // floating = level 2: --line in light, the stronger hairline in dark (DARK_MODE §5)\n            kbd ? \"border-dashed border-[var(--kit-emphasis-line)]\" : 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,IAAM,iBAAiB;AACvB,IAAM,iBAAiB;AAMvB,IAAa,UAAU;AACvB,IAAa,OAAO;CAAC;CAAM;CAAM;CAAG;CAAE;AAsBtC,IAAa,YAAoB;CAAE,GAAG,EAAE;CAAE,GAAG,EAAE;CAAE;AAQjD,IAAa,WAAW,OAAO;AAC/B,IAAa,WAAW,OAAO;AAC/B,IAAa,UAAU,GAAW,IAAY,OAAe,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;;AAS1F,SAAgB,SAAS,GAAW,GAAW,GAAW,GAAW,OAAkB,GAAgD;CACrI,IAAI,KAAK,OAAO,GAAG,EAAE,KAAK,KAAK,IAAI,EAAE,KAAK,IAAI,GAAG,IAAI,EAAE,IAAI,CAAC;CAC5D,IAAI,KAAK,OAAO,GAAG,EAAE,KAAK,KAAK,IAAI,EAAE,KAAK,IAAI,GAAG,IAAI,EAAE,IAAI,CAAC;CAC5D,MAAM,IAAY;EAAE,GAAG,EAAE;EAAE,GAAG,EAAE;EAAE;CAClC,IAAI,OAAA;CACJ,IAAI,KAAoB;CACxB,IAAI,KAAK;AACT,MAAK,MAAM,KAAK,MAAM,GAAG;EACvB,MAAM,IAAI,KAAK,IAAI,KAAK,EAAE;AAC1B,MAAI,KAAA,MAAa,IAAI,KAAO,QAAO,GAAK,KAAK,GAAK,KAAK,IAAI;EAC3D,MAAM,IAAI,KAAK,IAAI,KAAK,IAAI,EAAE;AAC9B,MAAI,KAAA,MAAa,IAAI,KAAO,QAAO,GAAK,KAAK,IAAI,GAAK,KAAK;;AAE7D,MAAK;AACL,KAAI,MAAM,KAAM,GAAE,EAAE,KAAK,GAAG;AAC5B,QAAA;CACA,IAAI,KAAoB;CACxB,IAAI,KAAK;AACT,MAAK,MAAM,KAAK,MAAM,GAAG;EACvB,MAAM,IAAI,KAAK,IAAI,KAAK,EAAE;AAC1B,MAAI,KAAA,MAAa,IAAI,KAAO,QAAO,GAAK,KAAK,GAAK,KAAK,IAAI;EAC3D,MAAM,IAAI,KAAK,IAAI,KAAK,IAAI,EAAE;AAC9B,MAAI,KAAA,MAAa,IAAI,KAAO,QAAO,GAAK,KAAK,IAAI,GAAK,KAAK;;AAE7D,MAAK;AACL,KAAI,MAAM,KAAM,GAAE,EAAE,KAAK,GAAG;AAC5B,QAAO;EAAE,GAAG;EAAI,GAAG;EAAI;EAAG;;;AAI5B,SAAgB,MAAM,GAAuB,QAA0C,OAAiC,QAAiB;CACvI,MAAM,KAAK,EAAE;CACb,MAAM,KAAK,EAAE;CACb,IAAI,QAAQ;AACZ,KAAI,OAAQ,UAAS,KAAK,MAAM,SAAS;AACzC,UAAS,KAAK,MAAM,aAAa;CACjC,MAAM,QAAQ,OAAqB;EACjC,MAAM,KAAK,GAAG,UAAU;EACxB,MAAM,KAAK,GAAG,UAAU;AACxB,MAAI,CAAC,SAAS,KAAK,IAAI,GAAG,GAAG,KAAK,IAAI,GAAG,GAAG,EAAG;AAC/C,UAAQ;AACR,SAAO,IAAI,GAAG;;CAEhB,MAAM,WAAW;AACf,SAAO,oBAAoB,eAAe,KAAK;AAC/C,SAAO,oBAAoB,aAAa,GAAG;AAC3C,SAAO,oBAAoB,iBAAiB,GAAG;AAC/C,WAAS,KAAK,MAAM,SAAS;AAC7B,WAAS,KAAK,MAAM,aAAa;AACjC,QAAM,MAAM;;AAEd,QAAO,iBAAiB,eAAe,KAAK;AAC5C,QAAO,iBAAiB,aAAa,GAAG;AACxC,QAAO,iBAAiB,iBAAiB,GAAG;;;AAI9C,SAAgB,WAAW,EAAE,UAA8B;CAEzD,MAAM,OAAO,GAAG,mDAAmD,QAAQ;AAC3E,QACE,qBAAA,UAAA,EAAA,UAAA,CACG,OAAO,EAAE,KAAK,MACb,oBAAC,QAAD;EAAoB,eAAA;EAAY,WAAW;EAAM,OAAO;GAAE,MAAM;GAAG,KAAK;GAAG,QAAQ;GAAG,OAAO;GAAG;EAAI,EAAzF,IAAI,IAAqF,CACpG,EACD,OAAO,EAAE,KAAK,MACb,oBAAC,QAAD;EAAoB,eAAA;EAAY,WAAW;EAAM,OAAO;GAAE,KAAK;GAAG,MAAM;GAAG,OAAO;GAAG,QAAQ;GAAG;EAAI,EAAzF,IAAI,IAAqF,CACpG,CACD,EAAA,CAAA;;AAKP,IAAM,UAA2D;CAC/D;EAAE,GAAG;EAAK,KAAK;EAAyB,QAAQ;EAAa;CAC7D;EAAE,GAAG;EAAK,KAAK;EAA4B,QAAQ;EAAa;CAChE;EAAE,GAAG;EAAK,KAAK;EAA0B,QAAQ;EAAa;CAC9D;EAAE,GAAG;EAAK,KAAK;EAA2B,QAAQ;EAAa;CAC/D;EAAE,GAAG;EAAM,KAAK;EAAuB,QAAQ;EAAe;CAC9D;EAAE,GAAG;EAAM,KAAK;EAA2B,QAAQ;EAAe;CAClE;EAAE,GAAG;EAAM,KAAK;EAAwB,QAAQ;EAAe;CAC/D;EAAE,GAAG;EAAM,KAAK;EAA0B,QAAQ;EAAe;CAClE;;AAGD,SAAgB,YAAY,EAAE,MAAM,QAAQ,SAAS,SAAgG;CACnJ,MAAM,EAAE,GAAG,GAAG,GAAG,MAAM;AACvB,QACE,oBAAA,UAAA,EAAA,UACG,QAAQ,KAAK,OACZ,oBAAC,OAAD;EAEE,eAAA;EACA,OAAO,EAAE,QAAQ,GAAG,QAAQ;EAC5B,WAAW,GAAG,4BAA4B,GAAG,IAAI;EACjD,gBAAgB,MAAM;AACpB,OAAI,EAAE,WAAW,EAAG;AACpB,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;AACnB,cAAW;GACX,MAAM,IAAI;IAAE,GAAG,EAAE,KAAK;IAAE,GAAG,EAAE,KAAK;IAAE,GAAG,EAAE,KAAK;IAAE,GAAG,EAAE,KAAK;IAAE;GAC5D,MAAM,OAAO,OAAO,MAAM;GAC1B,MAAM,OAAO,OAAO,MAAM;AAC1B,SACE,IACC,IAAI,OAAO;IACV,IAAI,KAAK,EAAE;IACX,IAAI,KAAK,EAAE;AACX,QAAI,GAAG,EAAE,SAAS,IAAI,CAAE,MAAK,EAAE,IAAI;AACnC,QAAI,GAAG,EAAE,SAAS,IAAI,CAAE,MAAK,EAAE,IAAI;AACnC,QAAI,GAAG,EAAE,SAAS,IAAI,CAAE,MAAK,EAAE,IAAI;AACnC,QAAI,GAAG,EAAE,SAAS,IAAI,CAAE,MAAK,EAAE,IAAI;AACnC,SAAK,OAAO,IAAI,OAAO,MAAM,KAAK;AAClC,SAAK,OAAO,IAAI,OAAO,MAAM,KAAK;IAClC,MAAM,KAAK,OAAO,GAAG,EAAE,SAAS,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,KAAK,EAAE,GAAG,OAAO,KAAK,IAAI,GAAG,KAAK,OAAO,IAAI;IAChG,MAAM,KAAK,OAAO,GAAG,EAAE,SAAS,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,KAAK,EAAE,GAAG,OAAO,KAAK,IAAI,GAAG,KAAK,OAAO,IAAI;AAChG,MAAE,IAAI,GAAG;AACT,MAAE,IAAI,GAAG;AACT,MAAE,IAAI,GAAG;AACT,MAAE,IAAI,GAAG;OAEV,UAAU,SAAS,MAAM,GAAG,EAAE,EAC/B,GAAG,OACJ;;EAEH,EAlCK,GAAG,EAkCR,CACF,EACD,CAAA;;;AAKP,SAAgB,WAAW,EAAE,MAAM,QAAQ,OAAO,SAAS,OAAO,aAAyH;CACzL,MAAM,EAAE,GAAG,GAAG,GAAG,MAAM;CACvB,MAAM,CAAC,MAAM,WAAW,MAAM,gBAAgB;EAAE,GAAG,KAAK,MAAM,EAAE,KAAK,CAAC;EAAE,GAAG,KAAK,MAAM,EAAE,KAAK,CAAC;EAAE,EAAE;AAClG,QACE,oBAAC,OAAD;EACE,MAAK;EACL,UAAU;EACV,cAAY;EACZ,kBAAgB,GAAG,KAAK,EAAE,MAAM,KAAK,EAAE;EACvC,qBAAkB;EAClB,eAAe,QAAQ;GAAE,GAAG,KAAK,MAAM,EAAE,KAAK,CAAC;GAAE,GAAG,KAAK,MAAM,EAAE,KAAK,CAAC;GAAE,CAAC;EAC1E,YAAY,MAAM;GAChB,MAAM,OAAO,EAAE,WAAW,KAAK;GAC/B,MAAM,KAAK,EAAE,QAAQ,eAAe,OAAO,EAAE,QAAQ,cAAc,CAAC,OAAO;GAC3E,MAAM,KAAK,EAAE,QAAQ,cAAc,OAAO,EAAE,QAAQ,YAAY,CAAC,OAAO;AACxE,OAAI,CAAC,MAAM,CAAC,GAAI;AAChB,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;AACnB,cAAW;GACX,MAAM,KAAK,OAAO,EAAE,KAAK,GAAG,IAAI,OAAO,MAAM,OAAO,MAAM,CAAC;GAC3D,MAAM,KAAK,OAAO,EAAE,KAAK,GAAG,IAAI,OAAO,MAAM,OAAO,MAAM,CAAC;AAC3D,KAAE,IAAI,OAAO,EAAE,KAAK,EAAE,OAAO,KAAK,KAAK,IAAI,OAAO,KAAK,IAAI,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC;AAChF,KAAE,IAAI,OAAO,EAAE,KAAK,EAAE,OAAO,KAAK,KAAK,IAAI,OAAO,KAAK,IAAI,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC;AAChF,KAAE,IAAI,GAAG;AACT,KAAE,IAAI,GAAG;AACT,WAAQ;IAAE,GAAG,KAAK,MAAM,GAAG;IAAE,GAAG,KAAK,MAAM,GAAG;IAAE,CAAC;AACjD,UAAO;;EAET,WAAW,GACT,oIACA,UACD;YAED,oBAAC,OAAD;GAAK,eAAA;GAAY,SAAQ;GAAY,WAAU;aAC7C,oBAAC,QAAD;IAAM,GAAE;IAAmB,QAAO;IAAe,aAAY;IAAM,eAAc;IAAU,CAAA;GACvF,CAAA;EACF,CAAA;;AAmBV,IAAM,YAAY;AAClB,IAAM,gCAAgB,IAAI,KAAiB;AAC3C,SAAS,YAAuC;AAC9C,KAAI;EACF,MAAM,MAAM,OAAO,iBAAiB,cAAc,OAAO,aAAa,QAAQ,UAAU;EACxF,MAAM,SAAS,MAAO,KAAK,MAAM,IAAI,GAAe;AACpD,SAAO,UAAU,OAAO,WAAW,WAAY,SAAuC,EAAE;SAClF;AACN,SAAO,EAAE;;;AAGb,IAAM,YAA4B;CAChC,OAAO,WAAW;CAClB,QAAQ,KAAK,MAAM;EACjB,MAAM,OAAkB,MAAM,OAAO,EAAE,GAAG;GAAE,GAAG,UAAU,MAAM;GAAM,GAAG;GAAG;AAC3E,OAAK,MAAM,KAAK,OAAO,KAAK,KAAK,CAAyB,KAAI,KAAK,OAAO,KAAA,EAAW,QAAO,KAAK;AACjG,YAAU,QAAQ;GAAE,GAAG,UAAU;IAAQ,MAAM;GAAM;AACrD,MAAI;AACF,gBAAa,QAAQ,WAAW,KAAK,UAAU,UAAU,MAAM,CAAC;UAC1D;AAGR,gBAAc,SAAS,MAAM,GAAG,CAAC;;CAEpC;AACD,IAAM,kBAAkB,MAAkB;AACxC,eAAc,IAAI,EAAE;AACpB,cAAa,cAAc,OAAO,EAAE;;;AAGtC,SAAgB,sBAAyB,QAAqC;AAC5E,QAAO,MAAM,qBACX,sBACM,OAAO,UAAU,QACjB,OAAO,UAAU,CACxB;;AAEH,sBAAsB,iBAAiC;AAEvD,IAAM,kBAAgC,IAAI,IAAI,OAAO,SAAS;AAG9D,SAAS,SAAS,GAAW;CAC3B,MAAM,CAAC,IAAI,SAAS,MAAM,eAAe,OAAO,WAAW,eAAe,OAAO,WAAW,EAAE,CAAC,QAAQ;AACvG,OAAM,gBAAgB;EACpB,MAAM,IAAI,OAAO,WAAW,EAAE;EAC9B,MAAM,WAAW,MAAM,EAAE,QAAQ;AACjC,MAAI;AACJ,IAAE,iBAAiB,UAAU,GAAG;AAChC,eAAa,EAAE,oBAAoB,UAAU,GAAG;IAC/C,CAAC,EAAE,CAAC;AACP,QAAO;;;AAGT,SAAgB,aAAa,SAA8B;CACzD,MAAM,QAAQ,SAAS,qBAAqB;CAC5C,MAAM,cAAc,SAAS,4CAA4C;AACzE,KAAI,QAAS,QAAO;AACpB,QAAO,QAAQ,UAAU,cAAc,SAAS;;AAIlD,SAAS,aAAa,IAA4C;CAChE,IAAI,IAAI,IAAI,iBAAiB;AAC7B,QAAO,KAAK,MAAM,SAAS,QAAQ,MAAM,SAAS,iBAAiB;EACjE,MAAM,IAAI,iBAAiB,EAAE,CAAC;AAC9B,OAAK,MAAM,UAAU,MAAM,aAAa,EAAE,eAAe,EAAE,aAAc,QAAO;AAChF,MAAI,EAAE;;AAER,QAAO;;;AAGT,IAAM,QAAQ;;AAEd,IAAM,cAAc;;;AAGpB,IAAM,aAAa;AACnB,IAAM,cAAc,kDAAkD;AACtE,SAAS,UAAU,MAA0B;AAE3C,KAAI,SAAS,cAAc,GAAG,WAAW,uBAAuB,CAAE,QAAO;CAEzE,MAAM,YAAY,MAAmB,EAAE,aAAa,OAAO,KAAK,UAAU,CAAC,CAAC,EAAE,QAAQ,mDAAmD;AACzI,KAAI,MAAM,KAAK,SAAS,iBAA8B,8BAA8B,CAAC,CAAC,MAAM,MAAM,EAAE,gBAAgB,CAAC,UAAU,SAAS,EAAE,CAAC,CAAE,QAAO;AACpJ,QAAO,MAAM,KAAK,SAAS,iBAA8B,kDAAkD,CAAC,CAAC,MAC1G,MAAM,MAAM,QAAQ,CAAC,EAAE,aAAa,uBAAuB,IAAI,CAAC,EAAE,aAAa,sBAAsB,IAAI,EAAE,OAAO,qBAAqB,CAAC,EAAE,aAAa,iBAAiB,CAC1K;;AAEH,IAAM,YAAY;;AAGlB,IAAM,QAAQ,MAA4B,EAAE,iBAAiB;AAC7D,IAAM,QAAQ;CACZ,SAAS;CAAM,QAAQ;CAAM,SAAS;CAAM,eAAe;CAAM,aAAa;CAAM,WAAW;CAAM,aAAa;CAClH,SAAS;CAAM,SAAS;CAAM,OAAO;CAAM,QAAQ;CAAM,SAAS;CAAM,eAAe;CACxF;AAID,IAAM,mBAAmB;AACzB,IAAM,YAAY;AAClB,IAAM,aAAa;AACnB,IAAM,eAAuB;CAAE,MAAM;CAAK,MAAM;CAAK,YAAY,KAAK,IAAI,KAAK,IAAI,GAAG,GAAG;CAAE,YAAY,IAAI,GAAG;CAAI,KAAA;CAAc,KAAK;CAAG;AAmCxI,IAAa,gBAAgB,MAAM,WAAoD,SAAS,cAC9F,EAAE,IAAI,YAAY,QAAQ,WAAW,QAAQ,UAAU,aAAa,SAAS,WAAW,SAAS,eAAe,kBAChH,QACA;CACA,MAAM,SAAS,kBAAkB;CACjC,MAAM,OAAO,aAAa,CAAC,CAAC,UAAU;CACtC,MAAM,OAAO,MAAM,OAAuB,KAAK;CAC/C,MAAM,OAAO,MAAM,OAAuB,KAAK;CAC/C,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAsB,UAAU;CAClE,MAAM,MAAM,GAAG,GAAG,GAAG;CACrB,MAAM,OAAO,uBAAuB,MAAM,EAAE,MAAM,KAAK,IAAI;CAC3D,MAAM,SAAS,MAAiC;AAC9C,wBAAsB,UAAU,CAAC,MAAM,KAAK,EAAE;AAE9C,UAAQ,UAAU,sBAAsB,UAAU,CAAC,MAAM,QAAQ;;CAEnE,MAAM,IAAI,eAAe,MAAM;CAC/B,MAAM,IAAI,eAAe,MAAM;CAC/B,MAAM,IAAI,eAAe,KAAK,KAAA,IAAa;CAC3C,MAAM,IAAI,eAAe,KAAK,KAAK,EAAE;CACrC,MAAM,OAAO,MAAM,eAAqB;EAAE;EAAG;EAAG;EAAG;EAAG,GAAG;EAAC;EAAG;EAAG;EAAG;EAAE,CAAC;CACtE,MAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,CAAC,CAAC,KAAK,EAAE;CAC1D,MAAM,CAAC,SAAS,cAAc,MAAM,SAAS,iBAAiB;CAC9D,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAiB,UAAU;CAC7D,MAAM,CAAC,KAAK,UAAU,MAAM,SAA6E,KAAK;CAC9G,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAkB,GAAG;CACvD,MAAM,OAAO,MAAM,OAAO,MAAM;CAChC,MAAM,UAAU,MAAM,OAAO,KAAK;AAClC,SAAQ,UAAU;CAClB,MAAM,SAAS,MAAM,OAAO,IAAI;AAChC,QAAO,UAAU;CACjB,MAAM,WAAW,MAAM,OAAO,QAAQ;AACtC,UAAS,UAAU;CACnB,MAAM,UAAU,MAAM,OAAO,UAAU;AACvC,SAAQ,UAAU;AAGlB,OAAM,gBAAgB;EACpB,MAAM,WAAW,UAAU,WAAW,CAAC;AACvC,SAAO,iBAAiB,UAAU,GAAG;AACrC,eAAa,OAAO,oBAAoB,UAAU,GAAG;IACpD,EAAE,CAAC;AACN,OAAM,gBAAgB;AACpB,IAAE,IAAI,KAAK,KAAA,IAAa;AACxB,eAAa,CAAC,CAAC,KAAK,EAAE;AACtB,MAAI,KAAK,EAAG,GAAE,IAAI,KAAK,EAAE;IACxB,CAAC,IAAI,CAAC;CAET,MAAM,SAAS,MAAM,mBAAmB,QAAQ,QAAqB,mBAAmB,IAAI,SAAS,uBAAuB,IAAI,MAAM,CAAC,OAAO,CAAC;;CAG/I,MAAM,SAAS,MAAM,kBAAkB;EACrC,MAAM,KAAK,KAAK;AAChB,MAAI,CAAC,MAAM,CAAC,UAAU,SAAS,WAAW,KAAK,WAAW,OAAO,QAAS;EAC1E,MAAM,IAAI,QAAQ;EAClB,MAAM,KAAK,aAAa,OAAO,EAAE,uBAAuB;EACxD,MAAM,MAAM,KAAK,IAAI,YAAY,IAAI,OAAO,KAAK,EAAE;EACnD,IAAI,SAAS,IAAI,GAAG;EACpB,MAAM,OAAO,SAAS,cAA2B,qBAAqB,EAAE,uBAAuB;AAC/F,MAAI,QAAQ,KAAK,UAAU,KAAK,MAAM,MAAM,IAAK,UAAS,KAAK,IAAI,QAAQ,KAAK,MAAM,EAAE;AACxF,MAAI,MAAM,GAAG,SAAS,MAAM,IAAK,UAAS,KAAK,IAAI,QAAQ,GAAG,SAAS,EAAE;EACzE,MAAM,OAAO,KAAK,IAAI,aAAa,MAAM,SAAS,IAAI;EACtD,MAAM,UAAU,KAAK,IAAI,kBAAkB,KAAK;AAChD,cAAY,MAAO,MAAM,UAAU,IAAI,QAAS;EAChD,MAAM,KAAK,EAAE,KAAK;EAClB,MAAM,KAAK,KAAK,IAAI,GAAG,gBAAgB,KAAK,KAAK;AACjD,MAAI,EAAE,KAAK;AACT,KAAE,IAAI,OAAO,EAAE,IAAI,GAAG,GAAG,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK,EAAE,CAAC,CAAC;AACrD,KAAE,IAAI,OAAO,EAAE,IAAI,GAAA,IAAY,KAAK,IAAA,IAAa,IAAI,GAAG,KAAK,EAAE,CAAC,CAAC;AACjE;;EAEF,MAAM,MAAM,QAAQ;EACpB,MAAM,IAAI,OAAO,uBAAuB;AACxC,MAAI,CAAC,IAAK;EACV,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,QAAQ,EAAE;EAClC,IAAI,IAAI,KAAK,IAAI,IAAI,GAAG,GAAG,IAAI,SAAS,IAAI,CAAC;AAC7C,OAAK,MAAM,KAAK,MAAM,KAAK,SAAS,iBAA8B,MAAM,CAAC,EAAE;AACzE,OAAI,MAAM,MAAM,GAAG,SAAS,EAAE,CAAE;GAChC,MAAM,IAAI,EAAE,uBAAuB;AACnC,OAAI,CAAC,EAAE,SAAS,CAAC,EAAE,UAAU,EAAE,SAAS,OAAO,EAAE,MAAM,OAAQ;AAC/D,OAAI,EAAE,OAAO,EAAE,QAAQ,IAAI,IAAI,OAAO,IAAI,QAAQ,EAAG,KAAI,KAAK,IAAI,GAAG,EAAE,MAAM;OACxE,KAAI,KAAK,IAAI,GAAG,EAAE,KAAK;;EAE9B,MAAM,OAAO,KAAK;EAClB,MAAM,OAAO;GAAE,OAAO,IAAI,IAAI,SAAS;GAAM,MAAM,IAAI,OAAO,KAAK;GAAM;EAEzE,MAAM,YAAY,MAAM,KAAK,SAAS,iBAA8B,YAAY,CAAC,CAAC,MAAM,MAAM,EAAE,uBAAuB,CAAC,QAAQ,GAAG;EAEnI,MAAM,MADO,EAAE,SAAS,YAAY,SAAS,KAAK,QAAQ,UAAU,KAAK,OAAO,SAAS,cACrE,UAAW,KAAK,QAAQ,IAAI,QAAQ,KAAK,IAAI,KAAK,IAAK,KAAK,OAAO,IAAI,OAAO,KAAK,KAAK,IAAI;AAChH,IAAE,IAAI,OAAO,IAAI,GAAG,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK,EAAE,CAAC,CAAC;AAChD,IAAE,IAAI,OAAO,EAAE,KAAK,KAAK,KAAK,IAAI,KAAK,SAAS,GAAG,CAAC,CAAC;IACpD;EAAC;EAAQ;EAAM;EAAQ;EAAG;EAAG;EAAE,CAAC;AAEnC,OAAM,sBAAsB;AAC1B,UAAQ;IACP;EAAC;EAAQ,KAAK;EAAK,KAAK;EAAM,KAAK;EAAG;EAAU,CAAC;AACpD,OAAM,gBAAgB;AACpB,MAAI,SAAS,QAAS;EACtB,IAAI,MAAM;EACV,IAAI,SAAS;EACb,MAAM,WAAW;AACf,wBAAqB,IAAI;AACzB,SAAM,sBAAsB,OAAO;AAEnC,UAAO,aAAa,OAAO;AAC3B,YAAS,OAAO,WAAW,QAAQ,IAAI;;AAEzC,SAAO,iBAAiB,UAAU,IAAI,KAAK;AAC3C,SAAO,iBAAiB,UAAU,GAAG;AAErC,SAAO,iBAAiB,aAAa,GAAG;EACxC,MAAM,KAAK,IAAI,eAAe,GAAG;AACjC,MAAI,KAAK,QAAS,IAAG,QAAQ,KAAK,QAAQ;AAC1C,MAAI,OAAQ,IAAG,QAAQ,OAAO;EAE9B,MAAM,KAAK,aAAa,OAAO;AAC/B,MAAI,GAAI,IAAG,QAAQ,GAAG;AACtB,eAAa;AACX,wBAAqB,IAAI;AACzB,UAAO,aAAa,OAAO;AAC3B,UAAO,oBAAoB,UAAU,IAAI,KAAK;AAC9C,UAAO,oBAAoB,UAAU,GAAG;AACxC,UAAO,oBAAoB,aAAa,GAAG;AAC3C,MAAG,YAAY;;IAEhB;EAAC;EAAM;EAAQ;EAAO,CAAC;CAG1B,MAAM,CAAC,UAAU,eAAe,MAAM,SAAwC,OAAO;AACrF,OAAM,sBAAsB;AAC1B,MAAI,SAAS,WAAW,CAAC,UAAW;EACpC,MAAM,YAAY;GAChB,MAAM,KAAK,UAAU;GACrB,MAAM,OAAO,KAAK,MAAM,WAAW,MAAA,OAAsB,SAAS;AAClE,eAAY,KAAK;AACjB,OAAI,SAAS,OAAQ,WAAU,aAAa,sBAAsB,QAAQ;OACrE,WAAU,gBAAgB,qBAAqB;;AAEtD,OAAK;EACL,MAAM,KAAK,IAAI,eAAe,IAAI;AAClC,KAAG,QAAQ,UAAU;AACrB,eAAa;AACX,MAAG,YAAY;AACf,aAAU,gBAAgB,qBAAqB;;IAEhD,CAAC,MAAM,UAAU,CAAC;CAErB,MAAM,mBAAmB;AACvB,MAAI,aAAa,CAAC,KAAK,QAAS;AAChC,IAAE,IAAI,KAAK,QAAQ,aAAa;AAChC,eAAa,KAAK;;CAEpB,MAAM,OAAO,SAAiB;EAC5B,MAAM,KAAK,KAAK;AAChB,MAAI,CAAC,GAAI;AACT,KAAG,cAAc;AACjB,SAAO,iBAAiB;AACtB,OAAI,KAAK,QAAS,MAAK,QAAQ,cAAc;KAC5C,GAAG;;CAGR,MAAM,cAAc;AAClB,QAAM,KAAK;AACX,eAAa,MAAM;AACnB,IAAE,IAAA,IAAY;;AAEhB,OAAM,oBAAoB,eAAe;EACvC,OAAO,SAAS,MAAM;GAAE;GAAM,KAAK,KAAA;GAAW,CAAC;EAC/C;EACA,WAAW,MAAM;AACf,OAAI,SAAS,QAAS;AACtB,OAAI,MAAM,SAAU,aAAY;AAChC,UAAO;IAAE,MAAM;IAAG,OAAO;KAAE,GAAG,EAAE,KAAK;KAAE,GAAG,EAAE,KAAK;KAAE,GAAG,EAAE,KAAK;KAAE,GAAG,KAAK,SAAS,gBAAgB,EAAE,KAAK;KAAE;IAAE,UAAU;IAAW,CAAC;AAEjI,UAAO,iBAAiB,KAAK,SAAS,MAAM,EAAE,eAAe,MAAM,CAAC,EAAE,GAAG;AACzE,OAAI,MAAM,SAAS,gFAAgF,kFAAkF;;EAEvL,UAAU;EACV,UAAU,KAAK;EAChB,EAAE;;CAGH,MAAM,SAAS,MAAM,kBAAkB;EACrC,MAAM,IAAI,OAAO;AACjB,MAAI,GAAG;AACL,KAAE,IAAI,EAAE,MAAM,EAAE;AAChB,KAAE,IAAI,EAAE,MAAM,EAAE;AAChB,KAAE,IAAI,EAAE,MAAM,EAAE;AAChB,OAAI,CAAC,EAAE,SAAU,cAAa,MAAM;OAC/B,GAAE,IAAI,EAAE,MAAM,EAAE;AACrB,UAAO,KAAK;AACZ,OAAI,YAAY;AAChB;;AAEF,WAAS,SAAS;AAClB,UAAQ,WAAW;IAClB;EAAC;EAAG;EAAG;EAAG;EAAE,CAAC;AAGhB,OAAM,gBAAgB;EACpB,MAAM,KAAK,KAAK;EAChB,MAAM,SAAS,MAAqB;AAClC,OAAI,IAAI,SAAS,EAAE,OAAe,CAAE;AACpC,OAAI,EAAE,QAAQ,MAAM;AAClB,MAAE,gBAAgB;AAElB,KADU,MAAM,KAAK,IAAI,iBAA8B,yBAAyB,UAAU,GAAG,IAAI,EAAE,CAAC,CAAC,MAAM,MAAM,EAAE,gBAAgB,CAAC,OAAO,IAAI,KAC5I,MAAM,EAAE,eAAe,MAAM,CAAC;AACjC;;AAEF,OAAI,EAAE,QAAQ,YAAY,EAAE,oBAAoB,UAAU,GAAG,CAAE;AAC/D,OAAI,CAAC,aAAa,SAAS,cAAc,yBAAyB,CAAE;AACpE,KAAE,gBAAgB;AAClB,WAAQ;;EAEV,MAAM,kBAAkB,QAAQ;AAChC,SAAO,iBAAiB,WAAW,MAAM;AACzC,MAAI,iBAAiB,wBAAwB,UAAU;AACvD,eAAa;AACX,UAAO,oBAAoB,WAAW,MAAM;AAC5C,OAAI,oBAAoB,wBAAwB,UAAU;;IAE3D,CAAC,WAAW,OAAO,CAAC;CAKvB,MAAM,SAAS,MAAM,aAAyC,GAAG;AACjE,QAAO,WAAW,MAAqB;EACrC,MAAM,SAAS;AACf,mBAAiB,EAAE;EACnB,MAAM,IAAI,OAAO;AACjB,MAAI,GAAG;GACL,MAAM,OAAO,EAAE,WAAW,KAAK;GAC/B,MAAM,KAAK,EAAE,QAAQ,eAAe,OAAO,EAAE,QAAQ,cAAc,CAAC,OAAO;GAC3E,MAAM,KAAK,EAAE,QAAQ,cAAc,OAAO,EAAE,QAAQ,YAAY,CAAC,OAAO;AACxE,OAAI,MAAM,IAAI;AACZ,MAAE,gBAAgB;AAClB,QAAI,EAAE,SAAS,QAAQ;AACrB,OAAE,IAAI,OAAO,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,EAAE,KAAK,GAAG,EAAE,CAAC;AAClD,OAAE,IAAI,OAAO,EAAE,KAAK,GAAG,IAAA,IAAa,IAAI,GAAG,EAAE,KAAK,GAAG,EAAE,CAAC;WACnD;AACL,OAAE,IAAI,OAAO,EAAE,KAAK,GAAG,IAAI,aAAa,MAAM,aAAa,MAAM,CAAC,CAAC;AACnE,OAAE,IAAI,OAAO,EAAE,KAAK,GAAG,IAAI,aAAa,MAAM,aAAa,MAAM,CAAC,CAAC;AACnE,OAAE,IAAI,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,GAAG,EAAE,KAAK,GAAG,EAAE,CAAC;;AAE/C;;AAEF,OAAI,EAAE,QAAQ,SAAS;AACrB,MAAE,gBAAgB;AAClB,UAAM,EAAE,SAAS,SAAS,EAAE,KAAK;KAAE,GAAG,EAAE,KAAK;KAAE,GAAG,EAAE,KAAK;KAAE,EAAE,GAAG;KAAE,GAAG,EAAE,KAAK;KAAE,GAAG,EAAE,KAAK;KAAE,KAAK;MAAE,GAAG,EAAE,KAAK;MAAE,GAAG,EAAE,KAAK;MAAE;KAAE,CAAC;AAC5H,WAAO,KAAK;AACZ,QAAI,EAAE,SAAS,SAAS,gBAAgB,gBAAgB;AACxD;;;AAGJ,MAAI,EAAE,QAAQ,MAAM;AAClB,KAAE,gBAAgB;AAClB,WAAQ,WAAW;aACV,EAAE,QAAQ,YAAY,CAAC,OAAO,oBAAoB,CAAE,EAAE,OAAuB,UAAU,YAAY,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;AAC1I,KAAE,gBAAgB;AAClB,UAAO,mBAAmB;AAC1B,WAAQ;;;AAGZ,OAAM,gBAAgB;EACpB,MAAM,KAAK,KAAK;AAChB,MAAI,CAAC,GAAI;EACT,MAAM,MAAM,MAAqB,OAAO,QAAQ,EAAE;AAClD,KAAG,iBAAiB,WAAW,GAAG;AAClC,eAAa,GAAG,oBAAoB,WAAW,GAAG;IACjD,CAAC,KAAK,CAAC;CAEV,MAAM,aAAa,MAA2B;AAC5C,MAAI,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,aAAa,KAAK,IAAK,GAAE,iBAAiB;;CAGnF,MAAM,gBAAgB,MAA0B;AAC9C,MAAI,SAAS,WAAW,EAAE,WAAW,KAAM,EAAE,OAAuB,QAAQ,iEAAiE,CAAE;AAC/I,IAAE,gBAAgB;EAClB,MAAM,KAAK,EAAE,KAAK;EAClB,MAAM,KAAK,EAAE,KAAK;EAClB,MAAM,KAAK,EAAE,KAAK;EAClB,MAAM,KAAK,KAAK,SAAS,gBAAgB,EAAE,KAAK;EAChD,MAAM,MAAM,QAAQ;EACpB,MAAM,QAAmB;GAAE,GAAG;;IAAO,IAAI,GAAA;IAAS,GAAI,MAAM,CAAC,IAAI,MAAM,IAAI,MAAM,GAAG,EAAE;IAAE;GAAE,GAAG,CAAC,WAAW,IAAI,GAAA,GAAQ;GAAE;AACvH,OAAK,UAAU;AACf,QACE,IACC,IAAI,OAAO;GACV,MAAM,IAAI,SAAS,KAAK,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,aAAa;AACjE,KAAE,IAAI,EAAE,EAAE;AACV,KAAE,IAAI,EAAE,EAAE;AACV,cAAW,MAAO,EAAE,EAAE,MAAM,KAAK,EAAE,EAAE,EAAE,MAAM,IAAI,EAAE,EAAE,MAAM,KAAK,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,EAAE,EAAG;MAEzF,UAAU;AACT,QAAK,UAAU;AACf,aAAU,UAAU;AACpB,OAAI,MAAO,OAAM,EAAE,KAAK;IAAE,GAAG,EAAE,KAAK;IAAE,GAAG,EAAE,KAAK;IAAE,EAAE,CAAC;KAEvD,WACD;;CAGH,MAAM,WACJ,oBAAC,OAAD;EACE,qBAAkB;EAClB,eAAe;EACf,gBAAgB,MAAM;AACpB,OAAI,SAAS,WAAY,EAAE,OAAuB,QAAQ,oCAAoC,CAAE;AAChG,UAAO;;EAET,WAAW,GAAG,qFAAqF,SAAS,WAAW,4DAA4D;YAElL;EACG,CAAA;CAER,MAAM,OACJ,oBAAC,OAAD;EAAK,mBAAgB;EAAG,WAAW,GAAG,qDAAqD,cAAc;EACtG;EACG,CAAA;CAER,MAAM,SAAS,oBAAC,OAAD;EAAK,KAAK;EAAM,aAAU;EAAS,WAAU;EAAY,CAAA;CACxE,MAAM,SAAS;EACb,KAAK;EACL,MAAM;EACN,cAAc;EACd,mBAAmB;EACnB,UAAU;EACV,GAAG;EACH,uBAAuB;EACvB,uBAAuB;EACvB,cAAc;EACd,YAAY,MAAM,IAAI,OAAO,KAAA;EAC7B;EACA,GAAG;EACJ;CACD,MAAM,OAAO,UAAU,UAAU,EAAE,UAAU,GAAG,GAAG;EAAE,UAAU;EAAM,MAAM;EAAM;CAEjF,IAAI;AACJ,KAAI,SAAS,QACX,QACE,qBAAC,OAAO,KAAR;EACE,GAAI;EACJ,SAAS,EAAE,GAAG,UAAU,UAAU,IAAI,QAAQ;EAC9C,SAAS,EAAE,GAAG,GAAG;EACjB,YAAY,UAAU,UAAU,EAAE,UAAU,GAAG,GAAG;GAAE,UAAU;GAAM,MAAM;GAAM;EAChF,OAAO,EAAE,QAAQ,GAAG,OAAO,MAAM;EACjC,WAAW,GACT,qKACA,gBACA,eACD;YAVH;GAYE,oBAAC,cAAD;IAAc,QAAQ;IAAQ,UAAU;IAAW,eAAe,QAAQ;IAAI,CAAA;GAC7E;GACA;GACA,cAAc,oBAAC,OAAD;IAAK,WAAU;cAAuE;IAAkB,CAAA,GAAG;GACzH;GACU;;UAEN,SAAS,OAClB,QACE,qBAAC,OAAO,KAAR;EACE,GAAI;EACJ,SAAS,EAAE,GAAG,UAAU,UAAU,IAAI,QAAQ;EAC9C,SAAS,EAAE,GAAG,GAAG;EACjB,YAAY,UAAU,UAAU,EAAE,UAAU,GAAG,GAAG;GAAE,UAAU;GAAM,MAAM;GAAM;EAChF,OAAO;GAAE,OAAA;GAAgB,KAAA;GAAU;EACnC,WAAW,GAAG,iGAAiG,gBAAgB,eAAe;YANhJ;GAQG;GACA;GACA;GACU;;UAEN,SAAS,QAClB,QACE,qBAAC,OAAO,KAAR;EACE,GAAI;EACJ,SAAS,EAAE,SAAS,GAAG;EACvB,SAAS,EAAE,SAAS,GAAG;EACvB,YAAY;EACZ,OAAO,aAAa,SAAS;GAAE,OAAA;GAAgB,KAAK;GAAI,OAAO;GAAG,QAAQ;GAAG,GAAG,aAAa,YAAY;GAAE,OAAA;GAAgB,KAAK;GAAI,OAAO;GAAG,QAAQ;GAAG,GAAG;GAAE,MAAM;GAAG,OAAO;GAAG,QAAQ;GAAG,QAAQ;GAAO;EAC3M,WAAW,GACT,0EACA,gBACA,aAAa,SACT,6BACA,aAAa,YACX,GAAG,uCAAuC,cAAc,GACxD,GAAG,6CAA6C,eAAe,CACtE;YAdH;GAgBG;GACA;GACA;GACU;;KAGf,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,YAAD,EAAoB,QAAU,CAAA,EAC9B,qBAAC,OAAO,KAAR;EACE,GAAI;EACJ,OAAO;GAAE;GAAG;GAAG,OAAO;GAAG,QAAQ,YAAY,IAAI,KAAA;GAAW,WAAW,YAAY,KAAA,IAAY;GAAS,MAAM;GAAG,KAAK;GAAG;EACzH,SAAS;GAAE,SAAS;GAAG,OAAO,UAAU,UAAU,IAAI;GAAM;EAC5D,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG;EACjC,YAAY;EACZ,WAAW,GACT,oGACA,gBAEA,MAAM,oDAAoD,eAC1D,QACD;YAZH;GAcE,oBAAC,aAAD;IACQ;IACN,QAAQ;IACR,eAAe;AACb,UAAK,UAAU;AACf,iBAAY;;IAEd,QAAQ,QAAQ;AACd,UAAK,UAAU;KACf,MAAM,QAAQ,IAAI,SAAS,IAAI,IAAI,IAAI,SAAS,IAAI,IAAI,CAAC,CAAC,QAAQ,QAAQ;AAC1E,WAAM;MAAE,GAAG,EAAE,KAAK;MAAE,GAAG,EAAE,KAAK;MAAE,GAAI,QAAQ,EAAE,KAAK;OAAE,GAAG,EAAE,KAAK;OAAE,GAAG,EAAE,KAAK;OAAE,EAAE,GAAG,EAAE;MAAG,CAAC;;IAE1F,CAAA;GACD;GACA;GACD,oBAAC,YAAD;IACQ;IACN,QAAQ;IACR,OAAM;IACN,SAAS;IACT,aAAa,MAAM;KAAE,GAAG,EAAE,KAAK;KAAE,GAAG,EAAE,KAAK;KAAE,KAAK;MAAE,GAAG,EAAE,KAAK;MAAE,GAAG,EAAE,KAAK;MAAE;KAAE,CAAC;IAC/E,CAAA;GACD;GACU;IACZ,EAAA,CAAA;AAGP,QAAO,aAAa,MAAM,aAAa,SAAS,KAAK;EACrD;AACF,IAAM,QAAmB,EAAE;;AAG3B,SAAS,aAAa,EAAE,QAAQ,UAAU,WAAqF;CAC7H,MAAM,KAAK,MAAM,OAAO,EAAE;CAC1B,MAAM,UAAU,MAAM,OAAO,MAAM;AACnC,QACE,oBAAC,UAAD;EACE,MAAK;EACL,cAAY,WAAW,KAAK,iBAAiB;EAC7C,gBAAgB,MAAM;AACpB,MAAG,UAAU;AACb,WAAQ,UAAU;AAClB,SACE,IACC,KAAK,MAAM;AACV,OAAG,UAAU;AACb,YAAQ,UAAU;OAEnB,UAAU;AACT,QAAI,CAAC,MAAO;AACZ,QAAI,GAAG,UAAU,GAAI,UAAS;aACrB,GAAG,UAAU,IAAK,UAAS,GAAG;aAC9B,GAAG,UAAU,MAAM,WAAW,GAAI,UAAS,GAAG;KAE1D;;EAEH,eAAe;AACb,OAAI,QAAQ,QAAS,QAAO,MAAM,QAAQ,UAAU;AACpD,YAAS,WAAW,KAAK,KAAK,GAAG;;EAEnC,WAAU;YAEV,oBAAC,QAAD,EAAM,WAAU,2CAA4C,CAAA;EACrD,CAAA"}

package/ui/index.d.ts

@@ -0,0 +1,12 @@
+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";

package/ui/index.js

@@ -0,0 +1,13 @@
+import "./field-context.js";
+import "./button.js";
+import "./shortcut-hint.js";
+import "./controls.js";
+import "./overlay.js";
+import "./display.js";
+import "./input.js";
+import "./presence.js";
+import "./select.js";
+import "./expanded-editor-modal.js";
+import "./choice-switch.js";
+import "./action-tray.js";
+import "./mode-bar.js";

package/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 --fg-2 with an sr-only "(required)" (DESIGN.md 13 #13, step 2).
+ */
+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/ui/input.js

@@ -0,0 +1,250 @@
+import { cn } from "../lib/cn.js";
+import { FieldDescribedByContext, FieldIdContext, 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 { IconInfoCircle, IconSearch, IconX } from "@tabler/icons-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/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 placeholder:text-kit-fg-3" : "";
+	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 placeholder:text-kit-fg-3", 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 --fg-2 with an sr-only "(required)" (DESIGN.md 13 #13, step 2).
+*/
+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-fg-2",
+								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: "inline-flex size-4 shrink-0 items-center justify-center rounded-kit-sm text-kit-fg-4 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, HelpMore, Input, Label, SearchInput, Textarea };
+
+//# sourceMappingURL=input.js.map

package/ui/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../../src/kit/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 placeholder:text-kit-fg-3\" : \"\";\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 placeholder:text-kit-fg-3\",\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 --fg-2 with an sr-only \"(required)\" (DESIGN.md 13 #13, step 2).\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-fg-2\">*</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=\"inline-flex size-4 shrink-0 items-center justify-center rounded-kit-sm text-kit-fg-4 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/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>>;

package/ui/mode-bar.js

@@ -0,0 +1,65 @@
+import { cn } from "../lib/cn.js";
+import { KIT_SCOPE, SURFACE_RAISED } from "./surfaces.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/kit/ui/mode-bar.tsx
+/**
+* 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).
+*/
+var TONE = {
+	info: "border-kit-info-line bg-kit-info-soft",
+	raised: cn("border-kit-line", SURFACE_RAISED)
+};
+var ModeBar = React.forwardRef(function ModeBar({ label, icon, tone = "info", align = "center", announce, className, children, ...rest }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "region",
+		"aria-label": label,
+		"data-mode-bar": tone,
+		...KIT_SCOPE,
+		className: cn("relative flex h-9 shrink-0 items-center gap-2 border-b px-4 text-kit-sm text-kit-fg", align === "center" ? "justify-center" : "justify-start", TONE[tone], className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-live": "polite",
+				className: "sr-only",
+				children: announce ?? ""
+			}),
+			icon ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "flex shrink-0 text-kit-fg-2 [&>svg]:size-4",
+				children: icon
+			}) : null,
+			children
+		]
+	});
+});
+/** The quiet "·" between parts of a mode bar sentence. */
+function ModeBarDot({ className }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: cn("text-kit-fg-3", className),
+		children: "·"
+	});
+}
+/** A text action in a mode bar ("Exit"): underlined, not a button chip. */
+var ModeBarLink = React.forwardRef(function ModeBarLink({ className, ...rest }, ref) {
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		className: cn("shrink-0 rounded-kit-sm px-1 font-medium text-kit-fg underline decoration-kit-fg-3 underline-offset-2 hover:decoration-kit-fg", className),
+		...rest
+	});
+});
+//#endregion
+export { ModeBar, ModeBarDot, ModeBarLink };
+
+//# sourceMappingURL=mode-bar.js.map