@bettercms-ai/kit 0.1.1 → 1.0.0

package/ui/path-crumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"path-crumbs.js","names":[],"sources":["../../src/kit/ui/path-crumbs.tsx"],"sourcesContent":["/**\n * PATH CRUMBS (CPO D38): the one breadcrumb for every drill-in path: Visuals inspector, Block Kit drill-in,\n * nested documents, media details, the workspace top bar.\n *\n *   <PathCrumbs items={[{ id, label, icon, onSelect }, …, current]} />\n *\n * Look (D38 v3): ancestors fg-3 with an invisible 4px-radius pill that appears on hover (bg-hover) and darkens while\n * pressed (bg-selected); the current item is fg/semibold with its icon, NO box; thin fg-4 chevrons flush between pills (6px from text);\n * the fold chip is a ghost crumb (\"Columns… +2 ⌄\") whose open state is bg-selected; keyboard-only neutral focus ring.\n *\n * Back (←) and current never collapse, and every visible crumb keeps READABLE TEXT (no icon-only crumbs). The trail\n * adapts to the width it ACTUALLY has (ResizeObserver on the nav + document.fonts.ready, not viewport breakpoints),\n * using space greedily; the first plan that fits wins:\n *\n *   stage 0  everything at full length\n *   stage 1  long labels shorten to their first words (~16ch, word boundary: \"Seasoning & care…\", \"Columns…\"):\n *            middle items root side first, then the parent, then the root\n *   stage 2  the middle folds, root side first, into ONE readable chip \"[▦] Columns… +2\" (its first folded level +\n *            the count) that opens the Pathway popover; the immediate parent stays out of the fold\n *   stage 3  the root joins the fold, then (last) the parent\n *   last     the current item middle-truncates (\"Seasoning…ail kit\"), full name in a tooltip\n *\n * Every variant is measured once in a hidden mirror and the stage is picked in a layout effect, so the first paint\n * is already right (no flicker, no layout jump). The Pathway popover lists the whole path as an indented tree\n * (↑↓ · Enter · Esc, focus returns to the chip). Siblings menus on crumbs were considered and left out (D6 calm).\n *\n * Links: a crumb with `to` renders through `linkAs` (default: a plain <a href>), so a host can pass its router's Link.\n */\nimport * as React from \"react\";\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { IconArrowLeft, IconChevronDown, IconChevronRight } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { IconButton } from \"./button\";\nimport { Menu, MenuContent, MenuTrigger, Tooltip } from \"./overlay\";\n\n/* ── Metrics: one 2/4/6/8 scale, two densities ─────────────────────────────────────────────\n *            row   text    pill (h · px)   icon  gap  separator                    back\n *   sm       28    13/20   24 · 6          14    6    12 chevron (6 to text)        28\n *   md       32    14/20   28 · 8          16    6    14 chevron (8 to text)        32\n * The chevron sits flush between pills, so the text-to-chevron distance IS the pill padding (one number to tune).\n * The pill is invisible at rest; hover = bg-hover, pressed = bg-selected, radius 4. Hit areas ≥ 24px. */\nconst METRICS = {\n  sm: { row: \"h-7\", text: \"text-[13px] leading-5\", pill: \"h-6 px-1.5\", cur: \"pr-0.5\", gap: \"gap-1.5\", icon: \"[&_svg]:size-3.5\", sep: \"size-3\", back: \"sm\" as const },\n  md: { row: \"h-8\", text: \"text-[14px] leading-5\", pill: \"h-7 px-2\", cur: \"pr-0.5\", gap: \"gap-1.5\", icon: \"[&_svg]:size-4\", sep: \"size-3.5\", back: \"md\" as const },\n};\n/** Ancestor / group pill: fg-3 at rest, a quiet pill on hover, darker while pressed, fg-4 + inert when it can't navigate. */\nconst PILL =\n  \"inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-kit-sm text-kit-fg-3 transition-colors duration-100 hover:bg-kit-hover hover:text-kit-fg active:bg-kit-selected disabled:pointer-events-none disabled:text-kit-fg-4\";\n\nexport interface PathCrumb {\n  /** stable key */\n  id: string;\n  label: string;\n  /** type icon (16px glyph; sized by the crumb) */\n  icon?: React.ReactNode;\n  /** navigate here (ignored on the current item) */\n  onSelect?: () => void;\n  /** …or a link (rendered through PathCrumbs `linkAs`) */\n  to?: string;\n  /** a meaningful container (a block, a folder): may name the collapsed group (\"Columns +2\") */\n  container?: boolean;\n  /** red dot: something under this level has errors */\n  errors?: number;\n}\n\nexport type PathCrumbLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & { to: string; ref?: React.Ref<HTMLAnchorElement> };\n\nfunction DefaultLink({ to, ...props }: PathCrumbLinkProps) {\n  return <a href={to} {...props} />;\n}\n\nexport interface PathCrumbsProps {\n  /** root → current; the last item is the current one */\n  items: PathCrumb[];\n  /** ← goes up one level. Default: the parent's onSelect/to. `false` hides it (top-bar style). */\n  onBack?: (() => void) | false;\n  /** tooltip/aria for ←, default \"Back to {parent}\" */\n  backLabel?: string;\n  /** a key hint in the ← tooltip, shown only while keyboard hints are on (D44) */\n  backShortcut?: string;\n  /** @deprecated (D38 v3): the current item is always text: weight + colour, never a box. Kept for call-site compat. */\n  current?: \"chip\" | \"text\";\n  /** nav aria-label */\n  label?: string;\n  size?: \"sm\" | \"md\";\n  /** renders crumbs that have `to` (a router Link); must forward its ref and spread props. Default: <a href> */\n  linkAs?: React.ComponentType<PathCrumbLinkProps>;\n  className?: string;\n}\n\n/** Word-boundary shortening: the first 2–3 words that fit ~16ch (\"Seasoning & care kit\" → \"Seasoning & care…\",\n *  \"Columns / Bento\" → \"Columns…\"). Never mid-word unless a single word is itself too long. */\nconst isJoiner = (w: string) => /^[/&·\\-–—|:,+]+$/.test(w);\nexport function clipWords(s: string, max = 16): string {\n  const words = s.trim().split(/\\s+/);\n  if (s.length <= 12 && words.length <= 2) return s;\n  const out: string[] = [];\n  for (let i = 0; i < words.length - 1; i++) {\n    const next = [...out, words[i]].join(\" \");\n    if (next.length > max) break;\n    out.push(words[i]);\n  }\n  while (out.length && isJoiner(out[out.length - 1])) out.pop();\n  if (!out.length) return words[0].length > max ? `${words[0].slice(0, max - 2)}…` : `${words[0]}…`;\n  return `${out.join(\" \")}…`;\n}\nconst long = (s: string) => clipWords(s) !== s;\nconst clip = (s: string) => clipWords(s);\n\ntype Form = \"full\" | \"trunc\";\ntype Group = { start: number; end: number };\ntype Plan = { forms: Form[]; group: Group | null };\n\n/** Degradation order: the first plan that fits wins. Every visible crumb keeps readable text (no icon-only crumbs). */\nexport function plansFor(items: PathCrumb[]): Plan[] {\n  const n = items.length;\n  const plans: Plan[] = [];\n  const forms: Form[] = items.map(() => \"full\");\n  const push = (group: Group | null = null) => plans.push({ forms: [...forms], group: group ? { ...group } : null });\n  push();\n  if (n < 2) return plans;\n  const parent = n - 2;\n  const middle = Array.from({ length: Math.max(0, n - 2) }, (_, k) => k + 1); // 1 … n-2, root side first\n  // 1 · long labels shorten to their first words: middle items root side first, then the parent, then the root\n  for (const i of middle) if (i !== parent && long(items[i].label)) { forms[i] = \"trunc\"; push(); }\n  if (parent >= 1 && long(items[parent].label)) { forms[parent] = \"trunc\"; push(); }\n  if (long(items[0].label)) { forms[0] = \"trunc\"; push(); }\n  // 2 · the middle folds, root side first, into ONE readable chip (\"Columns… +2\"); the parent stays out of it\n  for (let end = 1; end <= parent - 1; end++) push({ start: 1, end });\n  // 3 · the root joins the fold, then (last) the parent\n  if (parent >= 1) push({ start: 0, end: parent - 1 });\n  push({ start: 0, end: parent });\n  return plans;\n}\n\n/** Keep the head and the tail: \"Seasoning wax & chainmail kit\" → \"Seasoning…mail kit\". */\nexport function middleEllipsis(text: string, maxPx: number, measure: (s: string) => number) {\n  if (measure(text) <= maxPx) return text;\n  let lo = 2;\n  let hi = text.length - 1;\n  let best = \"\";\n  while (lo <= hi) {\n    const keep = (lo + hi) >> 1;\n    const head = Math.ceil(keep * 0.6);\n    const s = `${text.slice(0, head).trimEnd()}…${text.slice(text.length - (keep - head)).trimStart()}`;\n    if (measure(s) <= maxPx) { best = s; lo = keep + 1; } else hi = keep - 1;\n  }\n  return best || null;\n}\n\nlet canvas: HTMLCanvasElement | null = null;\nfunction textMeasurer(el: Element | null) {\n  if (!el) return null;\n  canvas ??= document.createElement(\"canvas\");\n  let ctx: CanvasRenderingContext2D | null = null;\n  try {\n    ctx = canvas.getContext(\"2d\");\n  } catch {\n    return null; // no canvas (test DOM): skip the last-resort truncation\n  }\n  if (!ctx) return null;\n  const cs = getComputedStyle(el);\n  ctx.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;\n  return (s: string) => ctx.measureText(s).width;\n}\n\nexport function PathCrumbs({ items, onBack, backLabel, backShortcut, label = \"Breadcrumb\", size = \"sm\", linkAs: Link = DefaultLink, className }: PathCrumbsProps) {\n  const n = items.length;\n  const parent = n > 1 ? items[n - 2] : undefined;\n  const back = onBack === false ? undefined : onBack ?? (parent ? () => go(parent) : undefined);\n  const sig = items.map((i) => `${i.id}\\u0001${i.label}\\u0001${i.icon ? 1 : 0}\\u0001${i.errors ? 1 : 0}\\u0001${i.container ? 1 : 0}`).join(\"\\u0002\");\n  const plans = React.useMemo(() => plansFor(items), [sig]); // eslint-disable-line react-hooks/exhaustive-deps\n  const navRef = React.useRef<HTMLElement>(null);\n  const mirrorRef = React.useRef<HTMLDivElement>(null);\n  const backRef = React.useRef<HTMLDivElement>(null);\n  const [fit, setFit] = React.useState<{ plan: number; currentText: string | null }>({ plan: 0, currentText: null });\n\n  const measure = React.useCallback(() => {\n    const nav = navRef.current;\n    const mirror = mirrorRef.current;\n    if (!nav || !mirror) return;\n    // layout widths, not painted ones: an ancestor mid-animation (scale / pop-in) must not skew the fit\n    const rect = nav.getBoundingClientRect().width;\n    const scale = nav.offsetWidth && rect ? rect / nav.offsetWidth : 1;\n    const w = (key: string) => (mirror.querySelector<HTMLElement>(`[data-m=\"${key}\"]`)?.getBoundingClientRect().width ?? 0) / scale;\n    const avail = nav.clientWidth - (backRef.current ? backRef.current.getBoundingClientRect().width / scale : 0) - 0.5;\n    const sep = w(\"sep\");\n    const cur = w(\"cur\");\n    const widthOf = (p: Plan) => {\n      const parts: number[] = [];\n      if (n > 1) {\n        const gk = (g: Group) => `g:${g.start}:${g.end}`;\n        if (p.group?.start === 0) parts.push(w(gk(p.group)));\n        else {\n          parts.push(w(`0:${p.forms[0]}`));\n          if (p.group) parts.push(w(gk(p.group)));\n        }\n        for (let i = 1; i < n - 1; i++) if (!p.group || i > p.group.end) parts.push(w(`${i}:${p.forms[i]}`));\n      }\n      parts.push(cur);\n      return parts.reduce((a, b) => a + b, 0) + sep * (parts.length - 1);\n    };\n    let pick = plans.length - 1;\n    let total = 0;\n    for (let k = 0; k < plans.length; k++) {\n      total = widthOf(plans[k]);\n      if (total <= avail) { pick = k; break; }\n    }\n    let currentText: string | null = null;\n    if (pick === plans.length - 1 && (total = widthOf(plans[pick])) > avail) {\n      // last resort: middle-truncate the current item to the room that's left\n      const textEl = mirror.querySelector('[data-m=\"curtext\"]');\n      const textW = textEl?.getBoundingClientRect().width ?? 0;\n      const room = cur - (total - avail) - (cur - textW);\n      const m = textMeasurer(textEl);\n      if (m && room > 24) currentText = middleEllipsis(items[n - 1].label, room, m);\n    }\n    setFit((f) => (f.plan === pick && f.currentText === currentText ? f : { plan: pick, currentText }));\n  }, [plans, n]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useLayoutEffect(() => {\n    measure();\n  }, [measure, sig]);\n  React.useLayoutEffect(() => {\n    const nav = navRef.current;\n    if (!nav || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(() => measure());\n    ro.observe(nav);\n    let alive = true;\n    document.fonts?.ready.then(() => alive && measure());\n    return () => {\n      alive = false;\n      ro.disconnect();\n    };\n  }, [measure]);\n\n  if (!n) return null;\n  const plan = plans[Math.min(fit.plan, plans.length - 1)];\n  const m = METRICS[size];\n  const curItem = items[n - 1];\n\n  /* ── pieces (shared by the mirror and the real trail so the widths match) ── */\n  const icon = (c: PathCrumb) => (c.icon ? <span className={cn(\"flex shrink-0 items-center\", m.icon)} aria-hidden>{c.icon}</span> : null);\n  /* V2: the dot itself carries the name (role=\"img\" so assistive tech reads it; no hidden text in the crumb) */\n  const dot = (c: PathCrumb) => (c.errors ? <span role=\"img\" aria-label=\"Has errors\" className=\"size-1.5 shrink-0 rounded-full bg-kit-danger\" /> : null);\n  const crumbCls = cn(PILL, m.pill);\n  const body = (c: PathCrumb, form: Form) => (\n    <>\n      {icon(c)}\n      <span>{form === \"trunc\" ? clip(c.label) : c.label}</span>\n      {dot(c)}\n    </>\n  );\n  /** The fold chip names its first folded level (the root only when nothing else is folded): \"[▦] Columns… +2\". */\n  const groupBody = (g: Group) => {\n    const count = g.end - g.start + 1;\n    const lead = items[g.start === 0 && g.end > 0 ? 1 : g.start];\n    return (\n      <>\n        {icon(lead)}\n        <span>{clipWords(lead.label, 12)}</span>\n        {count > 1 ? <span className=\"tabular-nums\">+{count - 1}</span> : null}\n        <IconChevronDown className={cn(\"-mx-0.5 shrink-0 text-kit-fg-4\", m.sep)} stroke={1.75} aria-hidden />\n      </>\n    );\n  };\n  // current = emphasis by weight + colour, never a box (D38 v3); same box metrics as a crumb so nothing shifts\n  // it has no pill, so no trailing padding: only the leading inset that lines it up with the chevron rhythm\n  const currentCls = cn(\"inline-flex min-w-0 max-w-full items-center whitespace-nowrap rounded-kit-sm font-semibold text-kit-fg\", m.pill, m.cur, m.gap, \"[&_[data-crumb-icon]]:text-kit-fg-2\");\n  const sepEl = <IconChevronRight className={cn(\"shrink-0 text-kit-fg-4\", m.sep)} stroke={1.75} aria-hidden />;\n\n  function go(c: PathCrumb) {\n    c.onSelect?.();\n  }\n\n  const crumb = (c: PathCrumb, i: number, form: Form) => {\n    const tip = form !== \"full\" || undefined;\n    const inner = body(c, form);\n    const aria = form === \"trunc\" ? (c.errors ? `${c.label}, has errors` : c.label) : undefined;\n    const el = c.to ? (\n      <Link to={c.to} className={crumbCls} aria-label={aria} onClick={c.onSelect}>{inner}</Link>\n    ) : (\n      <button type=\"button\" className={crumbCls} aria-label={aria} onClick={() => go(c)} disabled={!c.onSelect}>{inner}</button>\n    );\n    return (\n      <li key={c.id} className=\"flex shrink-0 items-center\">\n        {i > 0 ? sepEl : null}\n        {tip ? <Tooltip content={c.label} side=\"bottom\">{el}</Tooltip> : el}\n      </li>\n    );\n  };\n\n  const shown: React.ReactNode[] = [];\n  if (n > 1) {\n    const g = plan.group;\n    const group = (first?: boolean) => (\n      <GroupLi key=\"grp\" items={items} group={g!} first={first} trigger={groupBody(g!)} sep={sepEl} navRef={navRef} label={label} cls={crumbCls} link={Link} />\n    );\n    if (g?.start === 0) shown.push(group(true));\n    else {\n      shown.push(crumb(items[0], 0, plan.forms[0]));\n      if (g) shown.push(group());\n    }\n    for (let i = 1; i < n - 1; i++) if (!g || i > g.end) shown.push(crumb(items[i], i, plan.forms[i]));\n  }\n  const curLabel = fit.currentText ?? curItem.label;\n  const curNode = (\n    <span aria-current=\"page\" className={currentCls}>\n      {curItem.icon ? <span data-crumb-icon className={cn(\"flex shrink-0 items-center\", m.icon)} aria-hidden>{curItem.icon}</span> : null}\n      <span className=\"min-w-0 truncate\" aria-label={curLabel !== curItem.label ? curItem.label : undefined}>{curLabel}</span>\n      {dot(curItem)}\n    </span>\n  );\n  const backText = backLabel ?? (parent ? `Back to ${parent.label}` : \"Back\");\n\n  return (\n    <nav ref={navRef} aria-label={label} data-size={size} className={cn(\"relative flex min-w-0 flex-1 items-center\", m.row, m.text, className)}>\n      {back ? (\n        <div ref={backRef} className=\"flex shrink-0 items-center\">\n          <Tooltip content={backText} shortcut={backShortcut}>\n            <IconButton label={backText} size={m.back} onClick={back} className=\"shrink-0 rounded-kit-sm\">\n              <IconArrowLeft stroke={1.75} />\n            </IconButton>\n          </Tooltip>\n        </div>\n      ) : null}\n      <ol className=\"flex min-w-0 flex-1 items-center overflow-hidden\">\n        {shown}\n        <li className=\"flex min-w-0 shrink items-center\">\n          {n > 1 ? sepEl : null}\n          {fit.currentText || (fit.plan === plans.length - 1 && long(curItem.label)) ? (\n            <Tooltip content={curItem.label} side=\"bottom\">\n              <span tabIndex={0} className=\"flex min-w-0 rounded-kit-sm\">{curNode}</span>\n            </Tooltip>\n          ) : (\n            curNode\n          )}\n        </li>\n      </ol>\n\n      {/* hidden mirror: every variant measured once (never painted, never announced) */}\n      <div ref={mirrorRef} aria-hidden className=\"pointer-events-none invisible absolute left-0 top-0 h-0 w-0 overflow-hidden\">\n        <div className=\"flex w-max flex-col items-start\">\n          <span data-m=\"sep\" className=\"flex\">{sepEl}</span>\n          {items.slice(0, -1).map((c, i) => (\n            <React.Fragment key={c.id}>\n              <span data-m={`${i}:full`} className={crumbCls}>{body(c, \"full\")}</span>\n              <span data-m={`${i}:trunc`} className={crumbCls}>{body(c, \"trunc\")}</span>\n            </React.Fragment>\n          ))}\n          {[0, 1].flatMap((start) =>\n            items.slice(0, -1).map((_, end) =>\n              end < start ? null : <span key={`g${start}:${end}`} data-m={`g:${start}:${end}`} className={crumbCls}>{groupBody({ start, end })}</span>,\n            ),\n          )}\n          <span data-m=\"cur\" className={currentCls}>\n            {curItem.icon ? <span data-crumb-icon className={cn(\"flex shrink-0 items-center\", m.icon)}>{curItem.icon}</span> : null}\n            <span data-m=\"curtext\">{curItem.label}</span>\n            {dot(curItem)}\n          </span>\n        </div>\n      </div>\n    </nav>\n  );\n}\n\n/* ── The folded middle + its Pathway popover ───────────────────────────────────── */\nfunction GroupLi({\n  items,\n  group,\n  trigger,\n  sep,\n  first,\n  navRef,\n  label,\n  cls,\n  link: Link,\n}: {\n  items: PathCrumb[];\n  group: Group;\n  trigger: React.ReactNode;\n  sep: React.ReactNode;\n  first?: boolean;\n  navRef: React.RefObject<HTMLElement | null>;\n  label: string;\n  cls: string;\n  link: React.ComponentType<PathCrumbLinkProps>;\n}) {\n  const count = group.end - group.start + 1;\n  const last = items.length - 1;\n  return (\n    <li className=\"flex shrink-0 items-center\">\n      {first ? null : sep}\n      <Menu>\n        <Tooltip content=\"Show the full path\" side=\"bottom\">\n          <MenuTrigger\n            data-crumb-group=\"\"\n            className={cn(cls, \"aria-expanded:bg-kit-selected aria-expanded:text-kit-fg\")} /* = crumbCls: the mirror measures it */\n            aria-label={`Show ${count} more ${count === 1 ? \"level\" : \"levels\"}`}\n          >\n            {trigger}\n          </MenuTrigger>\n        </Tooltip>\n        {/* the kit MenuContent: §12 dismiss guards and the modal-layer marker (an open tooltip closes) */}\n        <MenuContent\n          align=\"start\"\n          finalFocus={() => {\n            // a jump re-lays the trail (or remounts the host) and the chip may be gone: land on the trail's chip,\n            // ← or current item instead of <body>\n            requestAnimationFrame(() => {\n              const nav = navRef.current?.isConnected ? navRef.current : document.querySelector<HTMLElement>(`nav[aria-label=\"${CSS.escape(label)}\"]`);\n              if (!nav) return;\n              const chip = nav.querySelector<HTMLElement>(\"[data-crumb-group]\");\n              (chip ?? nav.querySelector<HTMLElement>(\"button, [aria-current], [tabindex='0']\"))?.focus({ preventScroll: true });\n            });\n            return false;\n          }}\n          className=\"w-64 max-w-[calc(100vw-24px)] text-[13px] leading-5\"\n        >\n          <div className=\"px-2 pb-1 pt-1 text-kit-xs font-medium text-kit-fg-3\">Pathway</div>\n          {/* role=none: the menu owns its menuitems directly (no list or listitem in between) */}\n          <ol role=\"none\" className=\"flex flex-col\">\n            {items.map((c, i) => {\n              const isCurrent = i === last;\n              const hidden = i >= group.start && i <= group.end;\n              const rowCls = cn(\n                \"relative flex h-7 select-none items-center gap-1.5 rounded-kit-sm pr-2 outline-none transition-colors\",\n                isCurrent\n                  ? \"cursor-default font-semibold text-kit-fg data-[highlighted]:bg-kit-hover\"\n                  : cn(\"cursor-pointer data-[highlighted]:bg-kit-hover data-[highlighted]:text-kit-fg active:bg-kit-selected\", hidden ? \"text-kit-fg\" : \"text-kit-fg-3\"),\n              );\n              const style = { paddingLeft: 8 + Math.min(i, 8) * 12 };\n              return (\n                <li key={c.id} role=\"none\">\n                  {c.to && !isCurrent ? (\n                    <MenuPrimitive.LinkItem\n                      closeOnClick\n                      render={<Link to={c.to} />}\n                      onClick={() => c.onSelect?.()}\n                      className={rowCls}\n                      style={style}\n                    >\n                      <PathRow c={c} depth={i} />\n                    </MenuPrimitive.LinkItem>\n                  ) : (\n                    <MenuPrimitive.Item\n                      onClick={() => (isCurrent ? undefined : c.onSelect?.())}\n                      aria-current={isCurrent ? \"page\" : undefined}\n                      className={rowCls}\n                      style={style}\n                    >\n                      <PathRow c={c} depth={i} current={isCurrent} />\n                    </MenuPrimitive.Item>\n                  )}\n                </li>\n              );\n            })}\n          </ol>\n        </MenuContent>\n      </Menu>\n    </li>\n  );\n}\n\nfunction PathRow({ c, depth, current }: { c: PathCrumb; depth: number; current?: boolean }) {\n  return (\n    <>\n      {depth > 0 ? <span aria-hidden className=\"-mt-2 h-3 w-2 shrink-0 rounded-bl-[3px] border-b border-l border-kit-line-strong\" /> : null}\n      {c.icon ? <span aria-hidden className=\"flex shrink-0 items-center text-kit-fg-3 [&_svg]:size-3.5\">{c.icon}</span> : null}\n      {c.label.length > 28 ? (\n        <Tooltip content={c.label} side=\"right\">\n          <span className=\"min-w-0 flex-1 truncate\">{c.label}</span>\n        </Tooltip>\n      ) : (\n        <span className=\"min-w-0 flex-1 truncate\">{c.label}</span>\n      )}\n      {c.errors ? <span role=\"img\" aria-label=\"Has errors\" className=\"size-1.5 shrink-0 rounded-full bg-kit-danger\" /> : null}\n      {current ? <span aria-hidden className=\"size-1.5 shrink-0 rounded-full bg-kit-accent\" /> : null}\n    </>\n  );\n}\n\n/* ── Specimen (design system): one crumb frozen in a state, built from the SAME constants ─── */\nexport type PathCrumbState = \"rest\" | \"hover\" | \"pressed\" | \"focus\" | \"open\" | \"current\" | \"disabled\";\nexport function PathCrumbSpecimen({ state, label, icon, group, size = \"sm\" }: { state: PathCrumbState; label: string; icon?: React.ReactNode; group?: number; size?: \"sm\" | \"md\" }) {\n  const m = METRICS[size];\n  const forced: Record<PathCrumbState, string> = {\n    rest: \"\",\n    hover: \"bg-kit-hover text-kit-fg\",\n    pressed: \"bg-kit-selected text-kit-fg\",\n    focus: \"shadow-[0_0_0_2px_var(--kit-surface),0_0_0_4px_var(--kit-focus-ring)]\",\n    open: \"bg-kit-selected text-kit-fg\",\n    current: \"font-semibold text-kit-fg hover:bg-transparent [&_[data-crumb-icon]]:text-kit-fg-2\",\n    disabled: \"text-kit-fg-4 hover:bg-transparent hover:text-kit-fg-4\",\n  };\n  return (\n    <span className={cn(\"inline-flex items-center\", m.text)}>\n      <span className={cn(PILL, m.pill, \"pointer-events-none\", forced[state])}>\n        {icon ? <span data-crumb-icon className={cn(\"flex shrink-0 items-center\", m.icon)} aria-hidden>{icon}</span> : null}\n        <span>{label}</span>\n        {group ? (\n          <>\n            <span className=\"tabular-nums\">+{group}</span>\n            <IconChevronDown className={cn(\"-mx-0.5 shrink-0 text-kit-fg-4\", m.sep)} stroke={1.75} aria-hidden />\n          </>\n        ) : null}\n      </span>\n    </span>\n  );\n}\n"],"mappings":"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"}

package/ui/presence.d.ts

@@ -0,0 +1,16 @@
+/** D63: AI agents in History (change bars, outlines, tags): neutral violet-grey, never a person's slot. */
+export declare const AGENT_PRESENCE = "var(--kit-presence-agent)";
+/**
+ * Assign slots to a workspace's members in join order (stable: the same roster always gives the same colours).
+ * Each member is then found by id, full name or email.
+ */
+export declare function registerPresenceRoster(members: {
+    id: string;
+    name: string;
+    email?: string;
+    joinedAt?: string;
+}[]): void;
+/** Accepts a person id ("u_priya", "priya"), a full name ("Priya Nair") or an email; returns the slot 1…8. */
+export declare function presenceSlot(person: string): number;
+/** `var(--kit-presence-n)` for that person: use as a CSS colour (border, ring, background with presence-on text). */
+export declare function presenceColor(person: string): string;

package/ui/presence.js

@@ -0,0 +1,65 @@
+//#region src/kit/ui/presence.ts
+/**
+* Presence colour: ONE slot per person, the same everywhere they appear (field border, avatar ring, canvas pill, caret flag,
+* History change bars). Slots are the `--kit-presence-1…8` tokens (D56); text on a presence fill is `--kit-presence-on`.
+* Known people keep their earlier colours: priya → 1, daniel → 2, sujay → 3.
+*
+* D61: everyone else gets a slot at join, in join order, from the slots still free (all 8, not 5), so a real team rarely
+* shares a colour; once all 8 are taken the least recently assigned slot is reused. Register the workspace roster with
+* `registerPresenceRoster`. Someone not on the roster hashes stably into 4…8.
+* AI agents never take a person's slot: they use `--kit-presence-agent` (`AGENT_PRESENCE`).
+*
+* src/index.css declares the tokens app-wide (light and dark), so presenceColor() needs no fallback.
+*/
+var KNOWN = {
+	priya: 1,
+	daniel: 2,
+	sujay: 3
+};
+var SLOTS = 8;
+/** D63: AI agents in History (change bars, outlines, tags): neutral violet-grey, never a person's slot. */
+var AGENT_PRESENCE = "var(--kit-presence-agent)";
+var keyOf = (person) => person.trim().toLowerCase().replace(/^u_/, "").split(/[\s@._-]+/)[0] ?? "";
+/** roster assignments: key (first name, id or email head) → slot */
+var assigned = /* @__PURE__ */ new Map();
+/**
+* Assign slots to a workspace's members in join order (stable: the same roster always gives the same colours).
+* Each member is then found by id, full name or email.
+*/
+function registerPresenceRoster(members) {
+	assigned.clear();
+	const order = [...members].sort((a, b) => a.joinedAt && b.joinedAt ? a.joinedAt.localeCompare(b.joinedAt) : 0);
+	const lastUse = /* @__PURE__ */ new Map();
+	Object.values(KNOWN).forEach((s, i) => lastUse.set(s, i));
+	let tick = 10;
+	for (const m of order) {
+		const keys = [
+			m.id.toLowerCase(),
+			keyOf(m.name),
+			m.email ? keyOf(m.email) : ""
+		].filter(Boolean);
+		let slot = keys.map((k) => KNOWN[k]).find(Boolean);
+		if (!slot) slot = Array.from({ length: SLOTS }, (_, i) => i + 1).filter((s) => !lastUse.has(s))[0] ?? [...lastUse.entries()].sort((a, b) => a[1] - b[1])[0][0];
+		lastUse.set(slot, tick++);
+		for (const k of keys) assigned.set(k, slot);
+	}
+}
+/** Accepts a person id ("u_priya", "priya"), a full name ("Priya Nair") or an email; returns the slot 1…8. */
+function presenceSlot(person) {
+	const whole = person.trim().toLowerCase();
+	const key = keyOf(person);
+	if (KNOWN[key]) return KNOWN[key];
+	const hit = assigned.get(whole) ?? assigned.get(key);
+	if (hit) return hit;
+	let h = 0;
+	for (let i = 0; i < key.length; i++) h = h * 31 + key.charCodeAt(i) >>> 0;
+	return 4 + h % (SLOTS - 3);
+}
+/** `var(--kit-presence-n)` for that person: use as a CSS colour (border, ring, background with presence-on text). */
+function presenceColor(person) {
+	return `var(--kit-presence-${presenceSlot(person)})`;
+}
+//#endregion
+export { AGENT_PRESENCE, presenceColor, presenceSlot, registerPresenceRoster };
+
+//# sourceMappingURL=presence.js.map

package/ui/presence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presence.js","names":[],"sources":["../../src/kit/ui/presence.ts"],"sourcesContent":["/**\n * Presence colour: ONE slot per person, the same everywhere they appear (field border, avatar ring, canvas pill, caret flag,\n * History change bars). Slots are the `--kit-presence-1…8` tokens (D56); text on a presence fill is `--kit-presence-on`.\n * Known people keep their earlier colours: priya → 1, daniel → 2, sujay → 3.\n *\n * D61: everyone else gets a slot at join, in join order, from the slots still free (all 8, not 5), so a real team rarely\n * shares a colour; once all 8 are taken the least recently assigned slot is reused. Register the workspace roster with\n * `registerPresenceRoster`. Someone not on the roster hashes stably into 4…8.\n * AI agents never take a person's slot: they use `--kit-presence-agent` (`AGENT_PRESENCE`).\n *\n * src/index.css declares the tokens app-wide (light and dark), so presenceColor() needs no fallback.\n */\nconst KNOWN: Record<string, number> = { priya: 1, daniel: 2, sujay: 3 };\nconst SLOTS = 8;\n\n/** D63: AI agents in History (change bars, outlines, tags): neutral violet-grey, never a person's slot. */\nexport const AGENT_PRESENCE = \"var(--kit-presence-agent)\";\n\nconst keyOf = (person: string) => person.trim().toLowerCase().replace(/^u_/, \"\").split(/[\\s@._-]+/)[0] ?? \"\";\n/** roster assignments: key (first name, id or email head) → slot */\nconst assigned = new Map<string, number>();\n\n/**\n * Assign slots to a workspace's members in join order (stable: the same roster always gives the same colours).\n * Each member is then found by id, full name or email.\n */\nexport function registerPresenceRoster(members: { id: string; name: string; email?: string; joinedAt?: string }[]) {\n  assigned.clear();\n  const order = [...members].sort((a, b) => (a.joinedAt && b.joinedAt ? a.joinedAt.localeCompare(b.joinedAt) : 0));\n  const lastUse = new Map<number, number>(); // slot → assignment tick\n  Object.values(KNOWN).forEach((s, i) => lastUse.set(s, i));\n  let tick = 10;\n  for (const m of order) {\n    const keys = [m.id.toLowerCase(), keyOf(m.name), m.email ? keyOf(m.email) : \"\"].filter(Boolean);\n    const known = keys.map((k) => KNOWN[k]).find(Boolean);\n    let slot = known;\n    if (!slot) {\n      const free = Array.from({ length: SLOTS }, (_, i) => i + 1).filter((s) => !lastUse.has(s));\n      // all 8 taken: reuse the least recently assigned slot\n      slot = free[0] ?? [...lastUse.entries()].sort((a, b) => a[1] - b[1])[0][0];\n    }\n    lastUse.set(slot, tick++);\n    for (const k of keys) assigned.set(k, slot);\n  }\n}\n\n/** Accepts a person id (\"u_priya\", \"priya\"), a full name (\"Priya Nair\") or an email; returns the slot 1…8. */\nexport function presenceSlot(person: string): number {\n  const whole = person.trim().toLowerCase();\n  const key = keyOf(person);\n  if (KNOWN[key]) return KNOWN[key];\n  const hit = assigned.get(whole) ?? assigned.get(key);\n  if (hit) return hit;\n  let h = 0;\n  for (let i = 0; i < key.length; i++) h = (h * 31 + key.charCodeAt(i)) >>> 0;\n  return 4 + (h % (SLOTS - 3));\n}\n\n/** `var(--kit-presence-n)` for that person: use as a CSS colour (border, ring, background with presence-on text). */\nexport function presenceColor(person: string): string {\n  const n = presenceSlot(person);\n  return `var(--kit-presence-${n})`;\n}\n"],"mappings":";;;;;;;;;;;;;AAYA,IAAM,QAAgC;CAAE,OAAO;CAAG,QAAQ;CAAG,OAAO;CAAG;AACvE,IAAM,QAAQ;;AAGd,IAAa,iBAAiB;AAE9B,IAAM,SAAS,WAAmB,OAAO,MAAM,CAAC,aAAa,CAAC,QAAQ,OAAO,GAAG,CAAC,MAAM,YAAY,CAAC,MAAM;;AAE1G,IAAM,2BAAW,IAAI,KAAqB;;;;;AAM1C,SAAgB,uBAAuB,SAA4E;AACjH,UAAS,OAAO;CAChB,MAAM,QAAQ,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,MAAO,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,cAAc,EAAE,SAAS,GAAG,EAAG;CAChH,MAAM,0BAAU,IAAI,KAAqB;AACzC,QAAO,OAAO,MAAM,CAAC,SAAS,GAAG,MAAM,QAAQ,IAAI,GAAG,EAAE,CAAC;CACzD,IAAI,OAAO;AACX,MAAK,MAAM,KAAK,OAAO;EACrB,MAAM,OAAO;GAAC,EAAE,GAAG,aAAa;GAAE,MAAM,EAAE,KAAK;GAAE,EAAE,QAAQ,MAAM,EAAE,MAAM,GAAG;GAAG,CAAC,OAAO,QAAQ;EAE/F,IAAI,OADU,KAAK,KAAK,MAAM,MAAM,GAAG,CAAC,KAAK,QAAQ;AAErD,MAAI,CAAC,KAGH,QAFa,MAAM,KAAK,EAAE,QAAQ,OAAO,GAAG,GAAG,MAAM,IAAI,EAAE,CAAC,QAAQ,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAC,CAE9E,MAAM,CAAC,GAAG,QAAQ,SAAS,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,GAAG;AAE1E,UAAQ,IAAI,MAAM,OAAO;AACzB,OAAK,MAAM,KAAK,KAAM,UAAS,IAAI,GAAG,KAAK;;;;AAK/C,SAAgB,aAAa,QAAwB;CACnD,MAAM,QAAQ,OAAO,MAAM,CAAC,aAAa;CACzC,MAAM,MAAM,MAAM,OAAO;AACzB,KAAI,MAAM,KAAM,QAAO,MAAM;CAC7B,MAAM,MAAM,SAAS,IAAI,MAAM,IAAI,SAAS,IAAI,IAAI;AACpD,KAAI,IAAK,QAAO;CAChB,IAAI,IAAI;AACR,MAAK,IAAI,IAAI,GAAG,IAAI,IAAI,QAAQ,IAAK,KAAK,IAAI,KAAK,IAAI,WAAW,EAAE,KAAM;AAC1E,QAAO,IAAK,KAAK,QAAQ;;;AAI3B,SAAgB,cAAc,QAAwB;AAEpD,QAAO,sBADG,aAAa,OAAO,CACC"}

package/ui/select.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+export declare const SEARCH_THRESHOLD = 7;
+export type SelectOption = {
+    value: string;
+    label: React.ReactNode;
+    /** leading visual (16px icon); ignored when `avatar` is set */
+    icon?: React.ReactNode;
+    /** a person: renders a 20px avatar before the label */
+    avatar?: {
+        name: string;
+        src?: string;
+    };
+    /** secondary line under the label (e.g. an email) — searchable */
+    description?: string;
+    /** muted right-aligned text (e.g. "UTC+1", a count) — searchable */
+    meta?: string;
+    /** extra words that should match (aliases, ids) */
+    keywords?: string[];
+    /** group heading; options with the same group render together, in first-seen order */
+    group?: string;
+    disabled?: boolean;
+};
+/** Plain text of a React node — lets `label` stay a ReactNode while still being searchable. */
+export declare function nodeText(node: React.ReactNode): string;
+/**
+ * Score how well `query` matches `text` (0 = no match). Every whitespace-separated term must match.
+ * Prefix > word start > substring > in-order characters ("nyk" → "New York").
+ */
+export declare function matchScore(text: string, query: string, { fuzzy }?: {
+    fuzzy?: boolean;
+}): number;
+/** Character indexes of `text` to emphasise for `query` (substring per term, else in-order characters). */
+export declare function matchPositions(text: string, query: string): Set<number>;
+/** Renders `text` with the characters that match `query` emphasised. */
+export declare function Highlight({ text, query }: {
+    text: string;
+    query: string;
+}): import("react/jsx-runtime").JSX.Element;
+/** Filter + rank options for `query` (stable within equal scores). */
+export declare function filterOptions<T extends SelectOption>(options: T[], query: string): T[];
+declare function triggerClass(variant: "filled" | "outline" | "ghost", size: "sm" | "md" | "lg"): string;
+/** The Select trigger look, for controls that open their own picker but must read as a Select (D57: one look per job). */
+export declare const selectTriggerClass: typeof triggerClass;
+export interface SelectProps {
+    id?: string;
+    "aria-label"?: string;
+    value?: string;
+    /** uncontrolled starting value (leave `value` undefined) */
+    defaultValue?: string;
+    onValueChange?: (v: string) => void;
+    options: SelectOption[];
+    placeholder?: string;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    triggerClassName?: string;
+    variant?: "filled" | "outline" | "ghost";
+    align?: "start" | "center" | "end";
+    disabled?: boolean;
+    /** "auto" (default): search appears when there are more than 7 options. */
+    searchable?: boolean | "auto";
+    searchPlaceholder?: string;
+    /** popover width for the searchable menu (defaults to the trigger, at least 240px) */
+    menuClassName?: string;
+}
+export declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/select.js

@@ -0,0 +1,405 @@
+import { cn } from "../lib/cn.js";
+import { useFieldId, useFieldLabelledBy, useLabelFor } from "./field-context.js";
+import { GLASS, KIT_SCOPE } from "./surfaces.js";
+import { Avatar } from "./display.js";
+import * as React from "react";
+import { IconCheck, IconChevronDown, IconSearch } from "@tabler/icons-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/kit/ui/select.tsx
+var SEARCH_THRESHOLD = 7;
+/** Plain text of a React node — lets `label` stay a ReactNode while still being searchable. */
+function nodeText(node) {
+	if (node == null || typeof node === "boolean") return "";
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(nodeText).join("");
+	if (React.isValidElement(node)) return nodeText(node.props.children);
+	return "";
+}
+var SEP = /[\s\-_/.(@+]/;
+var norm = (s) => s.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+/**
+* Score how well `query` matches `text` (0 = no match). Every whitespace-separated term must match.
+* Prefix > word start > substring > in-order characters ("nyk" → "New York").
+*/
+function matchScore(text, query, { fuzzy = true } = {}) {
+	const t = norm(text);
+	const terms = norm(query).trim().split(/\s+/).filter(Boolean);
+	if (!terms.length) return 1;
+	let score = 0;
+	for (const term of terms) {
+		const at = t.indexOf(term);
+		if (at === 0) score += 4;
+		else if (at > 0) score += SEP.test(t[at - 1]) ? 3 : 2;
+		else if (fuzzy && fuzzyPositions(t, term)) score += 1;
+		else return 0;
+	}
+	return score;
+}
+/** In-order characters of `term` in `t`, tight enough to be intended ("nyk" → New York, not across a paragraph). */
+function fuzzyPositions(t, term) {
+	if (term.length < 2) return null;
+	for (let start = t.indexOf(term[0]); start >= 0; start = t.indexOf(term[0], start + 1)) {
+		if (start > 0 && !SEP.test(t[start - 1])) continue;
+		const out = [start];
+		let i = start + 1;
+		for (const ch of term.slice(1)) {
+			i = t.indexOf(ch, i);
+			if (i < 0) break;
+			out.push(i++);
+		}
+		if (out.length === term.length && out[out.length - 1] - start + 1 <= term.length * 3) return out;
+	}
+	return null;
+}
+/** Character indexes of `text` to emphasise for `query` (substring per term, else in-order characters). */
+function matchPositions(text, query) {
+	const t = norm(text);
+	const hits = /* @__PURE__ */ new Set();
+	for (const term of norm(query).trim().split(/\s+/).filter(Boolean)) {
+		const at = t.indexOf(term);
+		if (at >= 0) for (let k = 0; k < term.length; k++) hits.add(at + k);
+		else fuzzyPositions(t, term)?.forEach((k) => hits.add(k));
+	}
+	return hits;
+}
+/** Renders `text` with the characters that match `query` emphasised. */
+function Highlight({ text, query }) {
+	if (!query.trim()) return /* @__PURE__ */ jsx(Fragment, { children: text });
+	if (norm(text).length !== text.length) return /* @__PURE__ */ jsx(Fragment, { children: text });
+	const hits = matchPositions(text, query);
+	if (!hits.size) return /* @__PURE__ */ jsx(Fragment, { children: text });
+	const parts = [];
+	let run = "";
+	let on = false;
+	const flush = (k) => {
+		if (!run) return;
+		parts.push(on ? /* @__PURE__ */ jsx("mark", {
+			className: "rounded-[2px] bg-transparent font-semibold text-kit-fg",
+			children: run
+		}, k) : run);
+		run = "";
+	};
+	for (let k = 0; k < text.length; k++) {
+		const h = hits.has(k);
+		if (h !== on) {
+			flush(k);
+			on = h;
+		}
+		run += text[k];
+	}
+	flush(text.length);
+	return /* @__PURE__ */ jsx(Fragment, { children: parts });
+}
+/** Filter + rank options for `query` (stable within equal scores). */
+function filterOptions(options, query) {
+	if (!query.trim()) return options;
+	return options.map((o, i) => {
+		const label = nodeText(o.label);
+		const main = matchScore(label, query);
+		const rest = matchScore([
+			label,
+			o.description,
+			o.meta,
+			...o.keywords ?? []
+		].filter(Boolean).join(" "), query, { fuzzy: false });
+		const exact = o.keywords?.some((k) => norm(k) === norm(query.trim())) ? 9 : 0;
+		return {
+			o,
+			i,
+			s: Math.max(main ? main * 2 + 1 : rest, exact),
+			len: label.length
+		};
+	}).filter((x) => x.s > 0).sort((a, b) => b.s - a.s || a.len - b.len || a.i - b.i).map((x) => x.o);
+}
+function grouped(options) {
+	if (!options.some((o) => o.group)) return [{ items: options }];
+	const out = [];
+	for (const o of options) {
+		const g = out.find((x) => x.group === o.group);
+		if (g) g.items.push(o);
+		else out.push({
+			group: o.group,
+			items: [o]
+		});
+	}
+	return out;
+}
+function triggerClass(variant, size) {
+	return cn("group inline-flex w-full min-w-0 items-center justify-between gap-2 rounded-kit-md border px-2.5 text-left text-kit-fg transition-colors data-[placeholder]:text-kit-fg-3 disabled:cursor-not-allowed disabled:opacity-60 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60", variant === "filled" && "border-kit-field-border bg-kit-field-bg shadow-kit-field hover:border-kit-field-border-hover", variant === "outline" && "border-kit-line bg-kit-field-bg shadow-kit-xs hover:border-kit-line-strong", variant === "ghost" && "w-auto border-transparent bg-transparent px-2 text-kit-fg-2 hover:bg-kit-hover hover:text-kit-fg", size === "sm" ? "h-7 text-kit-sm" : size === "lg" ? "h-9 text-kit-base" : "h-8 text-kit-sm");
+}
+/** The Select trigger look, for controls that open their own picker but must read as a Select (D57: one look per job). */
+var selectTriggerClass = triggerClass;
+var floatingClass = cn("rounded-kit-lg border text-kit-fg outline-none data-[open]:animate-kit-pop-in", GLASS);
+var itemClass = "relative flex cursor-pointer select-none items-center gap-2 rounded-kit-md py-1.5 pl-2 pr-8 text-kit-sm text-kit-fg outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[highlighted]:bg-kit-hover [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-kit-fg-2";
+var groupHeading = "px-2 pb-1 pt-2 text-kit-xs font-medium text-kit-fg-3";
+function Lead({ o }) {
+	if (o.avatar) return /* @__PURE__ */ jsx(Avatar, {
+		name: o.avatar.name,
+		src: o.avatar.src,
+		size: 20,
+		decorative: true
+	});
+	return o.icon ? /* @__PURE__ */ jsx(Fragment, { children: o.icon }) : null;
+}
+function Select$1(props) {
+	const { searchable = "auto", options } = props;
+	return searchable === true || searchable === "auto" && options.length > 7 ? /* @__PURE__ */ jsx(SearchSelect, { ...props }) : /* @__PURE__ */ jsx(PlainSelect, { ...props });
+}
+function useTriggerA11y(id, ariaLabel, placeholder) {
+	const fieldId = useFieldId();
+	const labelledBy = useFieldLabelledBy();
+	const labelFor = useLabelFor(id ?? fieldId);
+	return {
+		id: id ?? fieldId,
+		"aria-label": ariaLabel ?? (fieldId || labelledBy || labelFor ? void 0 : typeof placeholder === "string" && placeholder !== "Select…" ? placeholder : void 0),
+		"aria-labelledby": ariaLabel ? void 0 : labelFor ?? (id || fieldId ? void 0 : labelledBy)
+	};
+}
+/** Value that is controlled when `value` is passed and internal otherwise. */
+function useSelectValue(value, defaultValue, onValueChange) {
+	const [inner, setInner] = React.useState(defaultValue);
+	const controlled = value !== void 0;
+	const current = controlled ? value : inner;
+	const set = (v) => {
+		if (!controlled) setInner(v);
+		onValueChange?.(v);
+	};
+	return [current, set];
+}
+function PlainSelect({ value, defaultValue, onValueChange, options, placeholder = "Select…", size = "md", className, triggerClassName, variant = "filled", align = "start", disabled, id, "aria-label": ariaLabel }) {
+	const a11y = useTriggerA11y(id, ariaLabel, placeholder);
+	const [current, setCurrent] = useSelectValue(value, defaultValue, onValueChange);
+	const [open, setOpen] = React.useState(false);
+	const items = React.useMemo(() => options.map((o) => ({
+		value: o.value,
+		label: o.label
+	})), [options]);
+	const renderItem = (o) => /* @__PURE__ */ jsxs(Select.Item, {
+		value: o.value,
+		disabled: o.disabled,
+		className: itemClass,
+		children: [
+			/* @__PURE__ */ jsx(Lead, { o }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx(Select.ItemText, { children: o.label }), o.description ? /* @__PURE__ */ jsx("div", {
+					className: "text-kit-xs text-kit-fg-3",
+					children: o.description
+				}) : null]
+			}),
+			o.meta ? /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-kit-xs tabular-nums text-kit-fg-3",
+				children: o.meta
+			}) : null,
+			/* @__PURE__ */ jsx(Select.ItemIndicator, {
+				className: "absolute right-2",
+				children: /* @__PURE__ */ jsx(IconCheck, { className: "size-4 !text-kit-fg" })
+			})
+		]
+	}, o.value);
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		items,
+		value: current ?? null,
+		onValueChange: (v) => v != null && setCurrent(v),
+		onOpenChange: setOpen,
+		disabled,
+		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
+			...a11y,
+			"data-state": open ? "open" : "closed",
+			className: cn(triggerClass(variant, size), triggerClassName, className),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "flex min-w-0 items-center gap-2 truncate [&_svg]:size-4 [&_svg]:text-kit-fg-3",
+				children: /* @__PURE__ */ jsx(Select.Value, { placeholder })
+			}), /* @__PURE__ */ jsx(Select.Icon, { children: /* @__PURE__ */ jsx(IconChevronDown, { className: "size-3.5 text-kit-fg-3 transition-transform group-data-[popup-open]:rotate-180" }) })]
+		}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+			align,
+			sideOffset: 6,
+			alignItemWithTrigger: false,
+			className: "z-[80]",
+			"data-floating-layer": "",
+			...KIT_SCOPE,
+			children: /* @__PURE__ */ jsx(Select.Popup, {
+				className: cn(floatingClass, "max-h-[min(360px,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto p-1"),
+				children: /* @__PURE__ */ jsx(Select.List, { children: grouped(options).map((g, gi) => g.group ? /* @__PURE__ */ jsxs(Select.Group, { children: [/* @__PURE__ */ jsx(Select.GroupLabel, {
+					className: groupHeading,
+					children: g.group
+				}), g.items.map(renderItem)] }, g.group + gi) : g.items.map(renderItem)) })
+			})
+		}) })]
+	});
+}
+/** V2 scrollIntoContainer (block "nearest", 4px margin): scroll `el` into view inside `list` ONLY, never the shell behind it.
+*  Rects are transformed while the menu pops in (scaled), so measure in layout pixels. */
+function revealInList(list, el, margin = 4) {
+	if (!el) return;
+	const br = list.getBoundingClientRect();
+	const er = el.getBoundingClientRect();
+	const k = list.offsetHeight ? br.height / list.offsetHeight || 1 : 1;
+	const top = (er.top - br.top) / k + list.scrollTop;
+	const h = er.height / k;
+	let next = list.scrollTop;
+	if (top < list.scrollTop) next = top - margin;
+	else if (top + h > list.scrollTop + list.clientHeight) next = top + h - list.clientHeight + margin;
+	next = Math.max(0, Math.min(next, list.scrollHeight - list.clientHeight));
+	if (Math.abs(next - list.scrollTop) > .5) list.scrollTop = next;
+}
+function SearchSelect({ value, defaultValue, onValueChange, options, placeholder = "Select…", size = "md", className, triggerClassName, variant = "filled", align = "start", disabled, id, "aria-label": ariaLabel, searchPlaceholder = "Search…", menuClassName }) {
+	const a11y = useTriggerA11y(id, ariaLabel, placeholder);
+	const [current, setCurrent] = useSelectValue(value, defaultValue, onValueChange);
+	const [open, setOpen] = React.useState(false);
+	const [query, setQuery] = React.useState("");
+	const selected = options.find((o) => o.value === current);
+	const shown = React.useMemo(() => filterOptions(options, query), [options, query]);
+	const shownValues = React.useMemo(() => shown.map((o) => o.value), [shown]);
+	const listRef = React.useRef(null);
+	React.useEffect(() => {
+		if (!open) return;
+		let raf = 0;
+		const reveal = (tries) => {
+			const list = listRef.current;
+			if (!(list && list.scrollHeight > list.clientHeight) && tries > 0) return void (raf = requestAnimationFrame(() => reveal(tries - 1)));
+			if (list) revealInList(list, list.querySelector("[data-checked=\"true\"]"));
+		};
+		reveal(6);
+		return () => cancelAnimationFrame(raf);
+	}, [open]);
+	const openWith = (q) => {
+		setQuery(q);
+		setOpen(true);
+	};
+	return /* @__PURE__ */ jsxs(Combobox.Root, {
+		value: current ?? null,
+		onValueChange: (v) => {
+			if (v == null) return;
+			setCurrent(v);
+			setOpen(false);
+		},
+		open,
+		onOpenChange: (o) => o ? openWith("") : setOpen(false),
+		inputValue: query,
+		onInputValueChange: (q, details) => {
+			if (details.reason === "input-change" || details.reason === "input-clear") setQuery(q);
+		},
+		items: shownValues,
+		filter: null,
+		autoHighlight: true,
+		loopFocus: true,
+		disabled,
+		children: [/* @__PURE__ */ jsxs(Combobox.Trigger, {
+			...a11y,
+			"data-state": open ? "open" : "closed",
+			"data-placeholder": selected ? void 0 : "",
+			className: cn(triggerClass(variant, size), triggerClassName, className),
+			onKeyDown: (e) => {
+				if (e.metaKey || e.ctrlKey || e.altKey) return;
+				if (e.key.length === 1 && e.key !== " ") {
+					e.preventDefault();
+					e.preventBaseUIHandler();
+					openWith(e.key);
+				} else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+					e.preventDefault();
+					e.preventBaseUIHandler();
+					openWith("");
+				}
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "flex min-w-0 items-center gap-2 truncate [&_svg]:size-4 [&_svg]:text-kit-fg-3",
+				children: selected ? /* @__PURE__ */ jsxs(Fragment, { children: [selected.avatar ? /* @__PURE__ */ jsx(Avatar, {
+					name: selected.avatar.name,
+					src: selected.avatar.src,
+					size: 16,
+					decorative: true
+				}) : null, /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: selected.label
+				})] }) : /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: placeholder
+				})
+			}), /* @__PURE__ */ jsx(IconChevronDown, {
+				"aria-hidden": true,
+				className: "size-3.5 shrink-0 text-kit-fg-3 transition-transform group-data-[popup-open]:rotate-180"
+			})]
+		}), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			align,
+			sideOffset: 6,
+			collisionPadding: 12,
+			className: "z-[80]",
+			"data-floating-layer": "",
+			...KIT_SCOPE,
+			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+				className: cn(floatingClass, "flex max-h-[min(400px,var(--available-height))] w-[max(var(--anchor-width),240px)] max-w-[min(400px,calc(100vw-24px))] flex-col overflow-hidden", menuClassName),
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex h-9 shrink-0 items-center gap-2 border-b border-kit-line-subtle px-2.5 text-kit-fg-3",
+						children: [/* @__PURE__ */ jsx(IconSearch, {
+							"aria-hidden": true,
+							className: "size-4 shrink-0"
+						}), /* @__PURE__ */ jsx(Combobox.Input, {
+							"aria-label": typeof a11y["aria-label"] === "string" ? a11y["aria-label"] : "Options",
+							placeholder: searchPlaceholder,
+							className: "h-full min-w-0 flex-1 bg-transparent text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-4"
+						})]
+					}),
+					shown.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: "px-2 py-6 text-center text-kit-sm text-kit-fg-3",
+						children: "No matches"
+					}) : null,
+					/* @__PURE__ */ jsx(Combobox.List, {
+						ref: listRef,
+						className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-1 empty:hidden",
+						children: grouped(shown).map((g, gi) => {
+							const items = g.items.map((o) => {
+								const text = nodeText(o.label);
+								const checked = o.value === current;
+								return /* @__PURE__ */ jsxs(Combobox.Item, {
+									value: o.value,
+									disabled: o.disabled,
+									"data-checked": checked,
+									className: itemClass,
+									children: [
+										/* @__PURE__ */ jsx(Lead, { o }),
+										/* @__PURE__ */ jsxs("div", {
+											className: "min-w-0 flex-1",
+											children: [/* @__PURE__ */ jsx("div", {
+												className: "truncate",
+												children: typeof o.label === "string" ? /* @__PURE__ */ jsx(Highlight, {
+													text,
+													query
+												}) : o.label
+											}), o.description ? /* @__PURE__ */ jsx("div", {
+												className: "truncate text-kit-xs text-kit-fg-3",
+												children: /* @__PURE__ */ jsx(Highlight, {
+													text: o.description,
+													query
+												})
+											}) : null]
+										}),
+										o.meta ? /* @__PURE__ */ jsx("span", {
+											className: "shrink-0 text-kit-xs tabular-nums text-kit-fg-3",
+											children: o.meta
+										}) : null,
+										checked ? /* @__PURE__ */ jsx(IconCheck, {
+											"aria-hidden": true,
+											className: "absolute right-2 size-4 !text-kit-fg"
+										}) : null
+									]
+								}, o.value);
+							});
+							return g.group ? /* @__PURE__ */ jsxs(Combobox.Group, { children: [/* @__PURE__ */ jsx(Combobox.GroupLabel, {
+								className: groupHeading,
+								children: g.group
+							}), items] }, g.group + gi) : /* @__PURE__ */ jsx(React.Fragment, { children: items }, "g" + gi);
+						})
+					})
+				]
+			})
+		}) })]
+	});
+}
+//#endregion
+export { Highlight, SEARCH_THRESHOLD, Select$1 as Select, filterOptions, matchPositions, matchScore, nodeText, selectTriggerClass };
+
+//# sourceMappingURL=select.js.map