@bettercms-ai/kit 1.0.0 → 2.0.0

package/dist/ui/overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.js","names":[],"sources":["../../src/ui/overlay.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\";\nimport { Separator } from \"@base-ui/react/separator\";\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { IconCheck, IconChevronRight, IconX } from \"@tabler/icons-react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { cn } from \"../lib/cn\";\nimport { IconButton, TooltipScope } from \"./button\";\nimport { useShortcutHints } from \"./shortcut-hint\";\nimport { KIT_SCOPE } from \"./surfaces\";\nimport { MODAL_LAYER, TooltipLayer, TooltipRoot } from \"./tooltip-root\";\n\n/*  Z-index scale: popover/menu 80 · modal overlay 60 / content 61 · sheet 55 · toast 100 · tooltip 90  */\n\n/** Base UI parts accept a className function; the kit takes plain strings so cn() can merge them. */\ntype Cls<P> = Omit<P, \"className\"> & { className?: string };\nconst layer = { [MODAL_LAYER]: \"\" };\n\n/* ── Dismiss guards (DESIGN.md §12) ──────────────────────────────────────────\n   Every kit layer runs its close requests through keepOpen():\n   - Escape owned by an inner list: an inner element that handles Escape calls event.preventDefault(); the layer\n     keeps itself open. (Base UI's own nested layers already close innermost first.)\n   - Floating layers portalled outside (an editor's selection toolbar, a slash menu) carry data-floating-layer:\n     a press there counts as inside, so it never dismisses the layer underneath.\n   - A press on a popover's anchor (the input a list hangs off) counts as inside.                          */\ntype CloseDetails = { reason: string; event: Event; cancel: () => void };\nexport const FLOATING_LAYER = \"[data-floating-layer]\";\nfunction keepOpen(details: CloseDetails, anchor?: Element | null) {\n  const target = details.event?.target;\n  const keep =\n    (details.reason === \"escape-key\" && details.event.defaultPrevented) ||\n    (details.reason === \"outside-press\" &&\n      target instanceof Element &&\n      (!!target.closest(FLOATING_LAYER) || !!anchor?.contains(target)));\n  if (keep) details.cancel();\n  return keep;\n}\nfunction guard<D extends CloseDetails>(onOpenChange: ((open: boolean, d: D) => void) | undefined, anchor?: () => Element | null) {\n  return (open: boolean, details: D) => {\n    if (!open && keepOpen(details, anchor?.())) return;\n    onOpenChange?.(open, details);\n  };\n}\n\n/* ── Tooltip ───────────────────────────────────────────────────────────── */\nexport const TooltipProvider = TooltipPrimitive.Provider;\nexport function Tooltip({\n  content,\n  children,\n  side = \"top\",\n  shortcut,\n  delay = 350,\n  disabled,\n}: {\n  content: React.ReactNode;\n  /** the trigger: one element that forwards its ref and spreads props */\n  children: React.ReactElement;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  /** a key hint (D44): shown only while keyboard hints are on */\n  shortcut?: string;\n  delay?: number;\n  disabled?: boolean;\n}) {\n  const hints = useShortcutHints();\n  if (disabled || !content) return <TooltipScope.Provider value>{children}</TooltipScope.Provider>;\n  return (\n    <TooltipScope.Provider value>\n      <TooltipRoot>\n        <TooltipPrimitive.Trigger delay={delay} render={children} />\n        {/* Fixed max width: long text (truncated titles, help) wraps into a calm block instead of a viewport-wide strip. */}\n        <TooltipLayer side={side}>\n          <span className=\"line-clamp-[8] min-w-0 whitespace-normal [overflow-wrap:anywhere]\">{content}</span>\n          {shortcut && hints ? (\n            <kbd data-hint=\"shortcuts\" className=\"mt-px shrink-0 rounded-kit-sm bg-kit-ink-active px-1 font-kit-sans text-kit-2xs\">\n              {shortcut}\n            </kbd>\n          ) : null}\n        </TooltipLayer>\n      </TooltipRoot>\n    </TooltipScope.Provider>\n  );\n}\n\n/* ── Popover ───────────────────────────────────────────────────────────── */\nconst AnchorContext = React.createContext<React.RefObject<HTMLElement | null> | null>(null);\n\nexport function Popover({ onOpenChange, ...props }: PopoverPrimitive.Root.Props) {\n  const anchor = React.useRef<HTMLElement | null>(null);\n  return (\n    <AnchorContext.Provider value={anchor}>\n      <PopoverPrimitive.Root {...props} onOpenChange={guard(onOpenChange, () => anchor.current)} />\n    </AnchorContext.Provider>\n  );\n}\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverClose = PopoverPrimitive.Close;\n\n/** Positions the popover against this element instead of the trigger; presses on it count as inside. */\nexport function PopoverAnchor({ render, ...props }: useRender.ComponentProps<\"div\">) {\n  const anchor = React.useContext(AnchorContext);\n  return useRender({ render: render ?? <div />, ref: anchor ?? undefined, props });\n}\n\nexport function PopoverContent({\n  className,\n  align = \"start\",\n  side,\n  sideOffset = 6,\n  keepFocus,\n  onMouseDown,\n  collisionBoundary,\n  collisionPadding = 12,\n  collisionAvoidance,\n  ...props\n}: Cls<PopoverPrimitive.Popup.Props> & {\n  align?: \"start\" | \"center\" | \"end\";\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  sideOffset?: number;\n  /** keep the popup inside this area (e.g. the scrolling panel under a sticky header) instead of the viewport */\n  collisionBoundary?: PopoverPrimitive.Positioner.Props[\"collisionBoundary\"];\n  collisionPadding?: PopoverPrimitive.Positioner.Props[\"collisionPadding\"];\n  /** e.g. `{ align: \"shift\" }`: slide along the edge to fit instead of flipping start ↔ end (V2's Radix behaviour) */\n  collisionAvoidance?: PopoverPrimitive.Positioner.Props[\"collisionAvoidance\"];\n  /** §12 no-focus-steal: typing stays in the input the list hangs off. The popup takes no focus on open, gives none\n   *  back on close, and a mouse-down inside it never blurs the input (text fields inside the popup still focus). */\n  keepFocus?: boolean;\n}) {\n  const anchor = React.useContext(AnchorContext);\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        side={side}\n        sideOffset={sideOffset}\n        collisionBoundary={collisionBoundary}\n        collisionPadding={collisionPadding}\n        collisionAvoidance={collisionAvoidance}\n        anchor={anchor?.current ? anchor : undefined}\n        className=\"z-[var(--kit-z-menu,80)]\"\n        {...KIT_SCOPE}\n      >\n        <PopoverPrimitive.Popup\n          initialFocus={keepFocus ? false : undefined}\n          finalFocus={keepFocus ? false : undefined}\n          onMouseDown={(e) => {\n            onMouseDown?.(e);\n            if (keepFocus && !(e.target as Element).closest(\"input, textarea, select, [contenteditable=true]\")) e.preventDefault();\n          }}\n          className={cn(\"glass w-72 rounded-kit-xl border p-3 text-kit-fg outline-none data-[open]:animate-kit-pop-in\", className)}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\n\n/* ── Hover card ────────────────────────────────────────────────────────── */\nexport const HoverCard = PreviewCardPrimitive.Root;\nexport const HoverCardTrigger = PreviewCardPrimitive.Trigger;\nexport function HoverCardContent({ className, ...props }: Cls<PreviewCardPrimitive.Popup.Props>) {\n  return (\n    <PreviewCardPrimitive.Portal>\n      <PreviewCardPrimitive.Positioner sideOffset={8} collisionPadding={12} className=\"z-[var(--kit-z-menu,80)]\" {...KIT_SCOPE}>\n        <PreviewCardPrimitive.Popup\n          className={cn(\"glass w-72 rounded-kit-xl border p-3 data-[open]:animate-kit-pop-in\", className)}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  );\n}\n\n/* ── Dropdown menu ─────────────────────────────────────────────────────── */\n/** Arrowing past the last item stays put (loopFocus false), like V2's Radix menus. */\nexport function Menu({ onOpenChange, loopFocus = false, ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root loopFocus={loopFocus} {...props} onOpenChange={guard(onOpenChange)} />;\n}\nexport const MenuTrigger = MenuPrimitive.Trigger;\nexport const MenuGroup = MenuPrimitive.Group;\nexport const MenuSub = MenuPrimitive.SubmenuRoot;\nexport const MenuRadioGroup = MenuPrimitive.RadioGroup;\n\nexport function MenuContent({\n  className,\n  align = \"start\",\n  side,\n  sideOffset = 6,\n  positionerClassName,\n  ...props\n}: Cls<MenuPrimitive.Popup.Props> & {\n  align?: \"start\" | \"center\" | \"end\";\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  sideOffset?: number;\n  /** The layer: a menu opened from a dashboard dialog (z --z-modal) passes `z-[var(--z-dropdown)]`, or it opens behind it. */\n  positionerClassName?: string;\n}) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner align={align} side={side} sideOffset={sideOffset} collisionPadding={12} className={cn(\"z-[var(--kit-z-menu,80)]\", positionerClassName)} {...KIT_SCOPE}>\n        <MenuPrimitive.Popup\n          {...layer}\n          // capped to the room the positioner measured, so a tall menu scrolls instead of running off the window\n          className={cn(\"glass max-h-[var(--available-height)] min-w-48 overflow-y-auto overflow-x-hidden rounded-kit-lg border p-1 text-kit-fg outline-none data-[open]:animate-kit-pop-in\", className)}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\nconst itemCls =\n  \"relative flex h-8 cursor-pointer select-none items-center gap-2 rounded-kit-md px-2 text-kit-sm text-kit-fg outline-none transition-colors 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\";\n\nexport function MenuItem({\n  className,\n  icon,\n  shortcut,\n  danger,\n  children,\n  ...props\n}: Cls<MenuPrimitive.Item.Props> & { icon?: React.ReactNode; shortcut?: string; danger?: boolean }) {\n  return (\n    <MenuPrimitive.Item\n      className={cn(itemCls, danger && \"text-kit-danger-fg data-[highlighted]:bg-kit-danger-soft [&>svg]:text-kit-danger-fg\", className)}\n      {...props}\n    >\n      {icon}\n      <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n      {/* menu shortcut columns are not hints (D44): they always show */}\n      {shortcut ? <span className=\"text-kit-xs text-kit-fg-3\">{shortcut}</span> : null}\n    </MenuPrimitive.Item>\n  );\n}\n\n/** Checking an item closes the menu, like V2's Radix items (pass closeOnClick={false} to keep it open). */\nexport function MenuCheckItem({ className, children, closeOnClick = true, ...props }: Cls<MenuPrimitive.CheckboxItem.Props>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={cn(itemCls, \"pr-8\", className)} closeOnClick={closeOnClick} {...props}>\n      {children}\n      <MenuPrimitive.CheckboxItemIndicator className=\"absolute right-2\">\n        <IconCheck className=\"size-4\" />\n      </MenuPrimitive.CheckboxItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function MenuRadioItem({ className, children, closeOnClick = true, ...props }: Cls<MenuPrimitive.RadioItem.Props>) {\n  return (\n    <MenuPrimitive.RadioItem className={cn(itemCls, \"pr-8\", className)} closeOnClick={closeOnClick} {...props}>\n      {children}\n      <MenuPrimitive.RadioItemIndicator className=\"absolute right-2\">\n        <IconCheck className=\"size-4\" />\n      </MenuPrimitive.RadioItemIndicator>\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nexport function MenuSubTrigger({\n  className,\n  icon,\n  children,\n  ...props\n}: Cls<MenuPrimitive.SubmenuTrigger.Props> & { icon?: React.ReactNode }) {\n  return (\n    <MenuPrimitive.SubmenuTrigger className={cn(itemCls, \"data-[popup-open]:bg-kit-hover\", className)} {...props}>\n      {icon}\n      <span className=\"flex-1\">{children}</span>\n      <IconChevronRight className=\"size-3.5 text-kit-fg-3\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\nexport function MenuSubContent({ className, ...props }: Cls<MenuPrimitive.Popup.Props>) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner sideOffset={6} collisionPadding={12} className=\"z-[calc(var(--kit-z-menu,80)_+_1)]\" {...KIT_SCOPE}>\n        <MenuPrimitive.Popup\n          className={cn(\"glass min-w-44 rounded-kit-lg border p-1 data-[open]:animate-kit-pop-in\", className)}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\nexport function MenuLabel({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"px-2 pb-1 pt-1.5 text-kit-xs font-medium text-kit-fg-3\", className)} {...props} />;\n}\nexport function MenuSeparator({ className }: { className?: string }) {\n  return <Separator className={cn(\"-mx-1 my-1 h-px bg-kit-line\", className)} />;\n}\n\n/* ── Focus return (a11y) ───────────────────────────────────────────────────\n   A dialog library remembers the focused element when the dialog opens and refocuses it on close. When a field\n   inside autofocuses, that element is already the field, so focus fell to <body> on close. We keep the last few\n   focused elements and hand focus back to the real trigger: the newest one that is outside the popup and still\n   in the document. Without one, the library's default applies.                                              */\nconst recent: HTMLElement[] = [];\nif (typeof document !== \"undefined\") {\n  document.addEventListener(\n    \"focusin\",\n    (e) => {\n      recent.unshift(e.target as HTMLElement);\n      recent.length = Math.min(recent.length, 4);\n    },\n    true,\n  );\n}\ntype FinalFocus = DialogPrimitive.Popup.Props[\"finalFocus\"];\nexport function useFocusReturn(finalFocus?: FinalFocus): {\n  ref: (el: HTMLElement | null) => void;\n  finalFocus: NonNullable<FinalFocus>;\n} {\n  const ret = React.useRef<HTMLElement | null>(null);\n  const popup = React.useRef<HTMLElement | null>(null);\n  const ref = React.useCallback((el: HTMLElement | null) => {\n    // Capture once per open (per popup element). A callback ref can be called again on a re-render while open, when\n    // focus is already inside the popup and the trigger may have dropped out of `recent`.\n    if (el === popup.current) return;\n    popup.current = el;\n    if (!el) return;\n    const active = document.activeElement as HTMLElement | null;\n    const outside = (n: HTMLElement | null): n is HTMLElement => !!n && n !== document.body && !el.contains(n);\n    ret.current = outside(active) ? active : (recent.find(outside) ?? null);\n  }, []);\n  return {\n    ref,\n    finalFocus:\n      finalFocus ??\n      (() => {\n        const t = ret.current;\n        return t && t.isConnected ? t : true;\n      }),\n  };\n}\n\n/** One stable callback ref for both refs, so React does not detach and re-attach them on every render. */\nfunction useMergedRef<T>(a: React.Ref<T> | undefined, b: React.Ref<T> | undefined) {\n  return React.useCallback(\n    (el: T | null) => {\n      for (const r of [a, b]) {\n        if (typeof r === \"function\") r(el);\n        else if (r) (r as React.RefObject<T | null>).current = el;\n      }\n    },\n    [a, b],\n  );\n}\n\n/* ── Modal (Dialog) ────────────────────────────────────────────────────── */\nexport function Modal({ onOpenChange, ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root {...props} onOpenChange={guard(onOpenChange)} />;\n}\nexport const ModalTrigger = DialogPrimitive.Trigger;\nexport const ModalClose = DialogPrimitive.Close;\n\nconst sizes = {\n  sm: \"max-w-[400px]\",\n  md: \"max-w-[480px]\",\n  lg: \"max-w-[640px]\",\n  xl: \"max-w-[800px]\",\n  full: \"max-w-[min(1280px,calc(100vw-48px))] h-[min(860px,calc(100vh-48px))]\",\n};\n\nexport function ModalContent({\n  className,\n  size = \"md\",\n  children,\n  hideClose,\n  finalFocus,\n  ref,\n  ...props\n}: Cls<DialogPrimitive.Popup.Props> & { size?: keyof typeof sizes; hideClose?: boolean }) {\n  const focusReturn = useFocusReturn(finalFocus);\n  const merged = useMergedRef(ref, focusReturn.ref);\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Backdrop\n        {...KIT_SCOPE}\n        className=\"fixed inset-0 z-[var(--kit-z-modal,60)] bg-kit-overlay backdrop-blur-[2px] data-[open]:animate-kit-fade-in\"\n      />\n      <div {...KIT_SCOPE} className=\"pointer-events-none fixed inset-0 z-[calc(var(--kit-z-modal,60)_+_1)] flex items-center justify-center p-4 sm:p-6\">\n        <DialogPrimitive.Popup\n          {...layer}\n          className={cn(\n            \"pointer-events-auto relative flex max-h-[calc(100vh-32px)] w-full flex-col overflow-hidden rounded-kit-xl border border-kit-floating-line bg-kit-surface-raised text-kit-fg shadow-kit-xl outline-none data-[open]:animate-kit-pop-in\",\n            sizes[size],\n            className,\n          )}\n          {...props}\n          ref={merged}\n          finalFocus={focusReturn.finalFocus}\n        >\n          {children}\n          {hideClose ? null : (\n            <DialogPrimitive.Close render={<IconButton label=\"Close\" size=\"sm\" className=\"absolute right-3 top-3 z-10\" />}>\n              <IconX />\n            </DialogPrimitive.Close>\n          )}\n        </DialogPrimitive.Popup>\n      </div>\n    </DialogPrimitive.Portal>\n  );\n}\n\nexport function ModalHeader({\n  title,\n  description,\n  className,\n  children,\n}: {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** D15: no icon tiles in dialog headers (accepted for compatibility, intentionally not rendered) */\n  icon?: React.ReactNode;\n  className?: string;\n  children?: React.ReactNode;\n}) {\n  return (\n    <div className={cn(\"flex shrink-0 items-start gap-2.5 px-5 pb-1 pt-5 pr-12\", className)}>\n      <div className=\"min-w-0 flex-1\">\n        <DialogPrimitive.Title className=\"text-kit-md font-semibold tracking-[-0.01em] text-kit-fg\">{title}</DialogPrimitive.Title>\n        {description ? (\n          <DialogPrimitive.Description className=\"mt-1 text-kit-sm text-kit-fg-2\">{description}</DialogPrimitive.Description>\n        ) : (\n          <DialogPrimitive.Description className=\"sr-only\">{typeof title === \"string\" ? title : \"Dialog\"}</DialogPrimitive.Description>\n        )}\n        {children}\n      </div>\n    </div>\n  );\n}\nexport function ModalBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn(\"min-h-0 flex-1 overflow-y-auto px-5 pb-5 pt-4\", className)} {...props} />;\n}\nexport function ModalFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"flex shrink-0 items-center justify-end gap-2 border-t border-kit-editor-tray-line bg-tray px-5 py-3\" /* action tray (Figma 61014:66265) */, className)}\n      {...props}\n    />\n  );\n}\n\n/* ── Flow modal (V2 features/flows/parts/modal.tsx) ────────────────────────\n   The shell every multi-step flow uses: a centered dialog on ≥sm, a full-screen sheet on mobile; it hugs its\n   content (D15) and only caps the height. Not ModalContent: no fixed corner close, bg-kit-surface (not raised),\n   a mobile sheet, `height` caps, and `locked` while a run is in progress.                                    */\n// D15: md 480 · lg 640 · xl 800 (editors/previews) · 2xl 960 (side-by-side previews only)\nconst flowWidths = {\n  md: \"sm:max-w-[480px]\",\n  lg: \"sm:max-w-[640px]\",\n  xl: \"sm:max-w-[800px]\",\n  \"2xl\": \"sm:max-w-[960px]\",\n};\n\nexport function FlowModal({\n  open,\n  onOpenChange,\n  size = \"lg\",\n  height = \"fixed\",\n  locked,\n  children,\n  className,\n}: {\n  open: boolean;\n  onOpenChange: (v: boolean) => void;\n  size?: keyof typeof flowWidths;\n  /** fixed = stable height for multi-step flows; auto = hug content */\n  height?: \"fixed\" | \"auto\" | \"tall\";\n  /** while true, outside-click / escape / the close button do nothing (a run is in progress) */\n  locked?: boolean;\n  children: React.ReactNode;\n  className?: string;\n}) {\n  // D15: dialogs hug their content — no tall empty canvases. \"fixed\"/\"tall\" only cap the height.\n  const h =\n    height === \"fixed\"\n      ? \"sm:h-auto sm:max-h-[min(640px,calc(100dvh-48px))]\"\n      : height === \"tall\"\n        ? \"sm:h-auto sm:max-h-[min(760px,calc(100dvh-48px))]\"\n        : \"sm:h-auto sm:max-h-[calc(100dvh-48px)]\";\n  // Land focus on the dialog itself, not the close button (it showed as a bordered square on open).\n  const popup = React.useRef<HTMLDivElement | null>(null);\n  const focusReturn = useFocusReturn();\n  const merged = useMergedRef(popup, focusReturn.ref);\n  return (\n    <DialogPrimitive.Root\n      open={open}\n      disablePointerDismissal={locked}\n      onOpenChange={guard((v: boolean, details: DialogPrimitive.Root.ChangeEventDetails) => {\n        if (!v && locked) return details.cancel();\n        onOpenChange(v);\n      })}\n    >\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Backdrop\n          {...KIT_SCOPE}\n          className=\"fixed inset-0 z-[var(--kit-z-modal,60)] bg-kit-overlay backdrop-blur-[2px] data-[open]:animate-kit-fade-in\"\n        />\n        <div {...KIT_SCOPE} className=\"pointer-events-none fixed inset-0 z-[calc(var(--kit-z-modal,60)_+_1)] flex items-end justify-center sm:items-center sm:p-6\">\n          <DialogPrimitive.Popup\n            {...layer}\n            ref={merged}\n            tabIndex={-1}\n            initialFocus={popup}\n            finalFocus={focusReturn.finalFocus}\n            className={cn(\n              \"pointer-events-auto relative flex h-dvh w-full flex-col overflow-hidden bg-kit-surface text-kit-fg shadow-kit-xl outline-none\",\n              \"max-sm:data-[open]:animate-kit-slide-up\",\n              \"sm:rounded-kit-xl sm:border sm:border-kit-line sm:data-[open]:animate-kit-pop-in\",\n              flowWidths[size],\n              h,\n              className,\n            )}\n          >\n            {children}\n          </DialogPrimitive.Popup>\n        </div>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\nexport function FlowClose({ disabled }: { disabled?: boolean }) {\n  return (\n    <DialogPrimitive.Close disabled={disabled} render={<IconButton label=\"Close\" size=\"sm\" className=\"shrink-0\" disabled={disabled} />}>\n      <IconX />\n    </DialogPrimitive.Close>\n  );\n}\n\nexport function FlowHeader({\n  title,\n  description,\n  icon,\n  status,\n  right,\n  children,\n  className,\n  closeDisabled,\n}: {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  status?: React.ReactNode;\n  right?: React.ReactNode;\n  children?: React.ReactNode;\n  className?: string;\n  closeDisabled?: boolean;\n}) {\n  return (\n    <div className={cn(\"relative shrink-0 border-b border-kit-line px-5 pb-3 pt-4\", className)}>\n      {/* D15: no icon tile in dialog headers (icon prop kept for compatibility, intentionally not rendered) */}\n      <div className=\"flex items-start gap-3\" data-icon={icon ? \"\" : undefined}>\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n            <DialogPrimitive.Title className=\"text-kit-md font-semibold tracking-[-0.01em] text-kit-fg\">{title}</DialogPrimitive.Title>\n            {status}\n          </div>\n          {description ? (\n            <DialogPrimitive.Description className=\"mt-0.5 text-kit-sm text-kit-fg-2\">{description}</DialogPrimitive.Description>\n          ) : (\n            <DialogPrimitive.Description className=\"sr-only\">{typeof title === \"string\" ? title : \"Dialog\"}</DialogPrimitive.Description>\n          )}\n        </div>\n        <div className=\"flex shrink-0 items-center gap-1\">\n          {right}\n          <FlowClose disabled={closeDisabled} />\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n}\n\n/** Status chip used in flow headers (\"Ready to publish\" with a green dot). */\nexport function HeaderStatus({\n  tone = \"success\",\n  children,\n  pulse,\n}: {\n  tone?: \"success\" | \"warning\" | \"danger\" | \"info\" | \"accent\" | \"neutral\";\n  children: React.ReactNode;\n  pulse?: boolean;\n}) {\n  const dot = { success: \"bg-kit-success\", warning: \"bg-kit-warning\", danger: \"bg-kit-danger\", info: \"bg-kit-info\", accent: \"bg-kit-accent\", neutral: \"bg-kit-fg-4\" }[tone];\n  const fg = {\n    success: \"text-kit-success-fg\",\n    warning: \"text-kit-warning-fg\",\n    danger: \"text-kit-danger-fg\",\n    info: \"text-kit-info-fg\",\n    accent: \"text-kit-accent-fg\",\n    neutral: \"text-kit-fg-2\",\n  }[tone];\n  return (\n    <span className={cn(\"inline-flex h-6 items-center gap-1.5 rounded-full border border-kit-line bg-kit-subtle px-2 text-kit-xs font-medium\", fg)}>\n      <span className=\"relative inline-flex size-1.5\">\n        {pulse ? <span className={cn(\"absolute inset-0 animate-ping rounded-full opacity-60\", dot)} /> : null}\n        <span className={cn(\"relative inline-flex size-1.5 rounded-full\", dot)} />\n      </span>\n      {children}\n    </span>\n  );\n}\n\nexport function FlowBody({ className, children }: { className?: string; children: React.ReactNode }) {\n  return <div className={cn(\"min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-4 py-4 sm:px-5\", className)}>{children}</div>;\n}\n\nexport function FlowFooter({ left, children, className }: { left?: React.ReactNode; children?: React.ReactNode; className?: string }) {\n  return (\n    <div\n      className={cn(\n        \"flex shrink-0 flex-wrap items-center gap-2 border-t border-kit-editor-tray-line bg-tray px-4 py-3 pb-[max(12px,env(safe-area-inset-bottom))] sm:px-5\", // action tray (Figma 61014:66265)\n        className,\n      )}\n    >\n      {left ? <div className=\"min-w-0 flex-1 truncate text-kit-sm text-kit-fg-3 max-sm:basis-full\">{left}</div> : <div className=\"flex-1\" />}\n      <div className=\"flex flex-wrap items-center justify-end gap-2 max-sm:w-full\">{children}</div>\n    </div>\n  );\n}\n\n/** Small uppercase-free section label used inside flow bodies. */\nexport function FlowLabel({ children, right, className }: { children: React.ReactNode; right?: React.ReactNode; className?: string }) {\n  return (\n    <div className={cn(\"mb-2 flex items-center justify-between gap-2\", className)}>\n      <h3 className=\"text-kit-sm font-medium text-kit-fg-2\">{children}</h3>\n      {right}\n    </div>\n  );\n}\n\n/** Radio-like option row (Figma \"Publish scope\" / \"When\" rows). */\nexport function OptionRow({\n  selected,\n  onSelect,\n  title,\n  description,\n  right,\n  disabled,\n  children,\n  className,\n}: {\n  selected: boolean;\n  onSelect: () => void;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  right?: React.ReactNode;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        \"rounded-kit-lg border bg-kit-surface transition-[border-color,box-shadow,background-color] duration-150\",\n        selected ? \"border-kit-line-strong bg-kit-selected\" : \"border-kit-line hover:border-kit-line-strong hover:bg-kit-subtle-2\",\n        disabled && \"pointer-events-none opacity-50\",\n        className,\n      )}\n    >\n      <button type=\"button\" onClick={onSelect} aria-pressed={selected} disabled={disabled} className=\"flex w-full items-center gap-3 px-3 py-2.5 text-left\">\n        <span\n          className={cn(\n            \"flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors\",\n            selected ? \"border-kit-inverse bg-kit-inverse\" : \"border-kit-line-strong bg-kit-surface\",\n          )}\n        >\n          {selected ? <span className=\"size-1.5 rounded-full bg-kit-surface\" /> : null}\n        </span>\n        <span className=\"min-w-0 flex-1\">\n          <span className=\"block text-kit-sm font-medium text-kit-fg\">{title}</span>\n          {description ? <span className=\"block text-kit-sm text-kit-fg-2\">{description}</span> : null}\n        </span>\n        {right}\n      </button>\n      <AnimatePresence initial={false}>\n        {selected && children ? (\n          <motion.div\n            initial={{ height: 0, opacity: 0 }}\n            animate={{ height: \"auto\", opacity: 1 }}\n            exit={{ height: 0, opacity: 0 }}\n            transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}\n            className=\"overflow-hidden\"\n          >\n            <div className=\"px-3 pb-3 pl-[40px]\">{children}</div>\n          </motion.div>\n        ) : null}\n      </AnimatePresence>\n    </div>\n  );\n}\n\n/** Progressive disclosure: advanced choices tucked behind \"More options\" (CPO D6). */\nexport function MoreOptions({\n  children,\n  label = \"More options\",\n  summary,\n  defaultOpen = false,\n  className,\n}: {\n  children: React.ReactNode;\n  label?: string;\n  summary?: React.ReactNode;\n  defaultOpen?: boolean;\n  className?: string;\n}) {\n  const [open, setOpen] = React.useState(defaultOpen);\n  return (\n    <div className={className}>\n      <button\n        type=\"button\"\n        aria-expanded={open}\n        onClick={() => setOpen((o) => !o)}\n        className=\"group flex w-full min-w-0 items-center gap-2 whitespace-nowrap rounded-kit-md py-1 text-left text-kit-sm font-medium text-kit-fg-2 hover:text-kit-fg\"\n      >\n        <span\n          className={cn(\n            \"flex size-5 items-center justify-center rounded-kit-md border border-kit-line bg-kit-surface text-kit-fg-3 transition-transform duration-200\",\n            open && \"rotate-90\",\n          )}\n        >\n          <svg viewBox=\"0 0 16 16\" className=\"size-3\" fill=\"none\" stroke=\"currentColor\" strokeWidth={1.75} aria-hidden>\n            <path d=\"M6 4l4 4-4 4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        </span>\n        {label}\n        {summary && !open ? <span className=\"ml-1 truncate text-kit-xs font-normal text-kit-fg-3\">{summary}</span> : null}\n      </button>\n      <AnimatePresence initial={false}>\n        {open ? (\n          <motion.div\n            initial={{ height: 0, opacity: 0 }}\n            animate={{ height: \"auto\", opacity: 1 }}\n            exit={{ height: 0, opacity: 0 }}\n            transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}\n            className=\"overflow-hidden\"\n          >\n            <div className=\"pt-3\">{children}</div>\n          </motion.div>\n        ) : null}\n      </AnimatePresence>\n    </div>\n  );\n}\n\n/* ── Sheet (side or bottom drawer) ─────────────────────────────────────── */\n/** A sheet is a dialog that slides in from an edge: open it with Sheet (= Modal) and its trigger. */\nexport const Sheet = Modal;\nexport const SheetTrigger = DialogPrimitive.Trigger;\nexport const SheetClose = DialogPrimitive.Close;\n/* V2 overlay.tsx:353-354. V2's cn() lets the side's later border-line win over border-floating-line: the sheet edge is\n   --line in both themes. */\nconst sheetBase = \"fixed inset-y-0 z-[calc(var(--kit-z-sheet,55)_+_1)] flex flex-col bg-kit-surface-raised shadow-kit-xl outline-none transition-transform border-kit-floating-line\";\nconst sheetSides = {\n  // V2: the sheet-in keyframe (24px slide + fade, 260ms ease-out-soft) on open; no exit motion\n  right: \"right-0 border-l border-kit-line data-[open]:animate-[kit-sheet-in-r_260ms_var(--kit-ease-out-soft)]\",\n  left: \"left-0 border-r border-kit-line data-[open]:animate-[kit-sheet-in-l_260ms_var(--kit-ease-out-soft)]\",\n  // V2 TabletSheet / CommentsSheet / HistorySheet (editor.tsx:443-513): 52% tall, rounded-t-2xl, border-t, rises from\n  // y 100% (V2's spring 420/42 settles in ~300ms with no overshoot; the drawer curve matches it without a motion import)\n  bottom:\n    \"inset-x-0 inset-y-auto bottom-0 h-[52%] overflow-hidden rounded-t-kit-2xl border-t border-kit-line data-[open]:animate-[kit-sheet-in-b_300ms_cubic-bezier(0.32,0.72,0,1)]\",\n} as const;\n/** How far a bottom sheet's grabber must be pulled down before letting go closes it (V2 editor.tsx). */\nconst SHEET_SWIPE_CLOSE_PX = 80;\n\n/**\n * A bottom sheet's grabber as a drag handle (V2 TabletSheet / CommentsSheet drag=\"y\"): pulled down past\n * SHEET_SWIPE_CLOSE_PX it closes the sheet, short of it the sheet eases back. The sheet follows the finger through a\n * transform written straight to the element (no re-render per move). Not a tab stop: Esc is the keyboard's way out.\n */\nfunction SheetGrabber({ sheet }: { sheet: React.RefObject<HTMLElement | null> }) {\n  const close = React.useRef<HTMLButtonElement | null>(null);\n  const drag = React.useRef<{ id: number; y: number; dy: number } | null>(null);\n  const settle = (el: HTMLElement) => {\n    const reduce = document.documentElement.hasAttribute(\"data-reduce-motion\") || !!window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches;\n    el.style.transition = reduce ? \"none\" : \"transform 200ms cubic-bezier(0.32, 0.72, 0, 1)\";\n    el.style.transform = \"\";\n  };\n  return (\n    <div className=\"flex shrink-0 justify-center pt-2\">\n      <div\n        role=\"button\"\n        tabIndex={-1}\n        aria-label=\"Drag down to close\"\n        data-sheet-handle=\"\"\n        className=\"hit-area [--hit-size:24px] flex h-6 w-16 cursor-grab touch-none items-start justify-center active:cursor-grabbing\"\n        onClick={(e) => {\n          // a drag is not a tap: the click that follows the release must not close a sheet that eased back\n          if (e.currentTarget.dataset.dragged !== undefined) delete e.currentTarget.dataset.dragged;\n          else close.current?.click();\n        }}\n        onPointerDown={(e) => {\n          if (e.button !== 0) return;\n          drag.current = { id: e.pointerId, y: e.clientY, dy: 0 };\n          e.currentTarget.setPointerCapture?.(e.pointerId);\n          if (sheet.current) sheet.current.style.transition = \"none\";\n        }}\n        onPointerMove={(e) => {\n          const d = drag.current;\n          if (!d || d.id !== e.pointerId || !sheet.current) return;\n          d.dy = Math.max(0, e.clientY - d.y);\n          sheet.current.style.transform = `translateY(${d.dy}px)`;\n        }}\n        onPointerUp={(e) => {\n          const d = drag.current;\n          drag.current = null;\n          if (!d || d.id !== e.pointerId) return;\n          if (d.dy > SHEET_SWIPE_CLOSE_PX) close.current?.click();\n          else if (sheet.current) settle(sheet.current);\n          if (d.dy > 4) e.currentTarget.dataset.dragged = \"\";\n        }}\n        onPointerCancel={() => {\n          drag.current = null;\n          if (sheet.current) settle(sheet.current);\n        }}\n      >\n        <span data-sheet-grabber className=\"h-1 w-10 rounded-full bg-kit-line-strong\" />\n      </div>\n      <DialogPrimitive.Close ref={close} hidden tabIndex={-1} aria-hidden />\n    </div>\n  );\n}\n\nexport function SheetContent({\n  className,\n  side = \"right\",\n  children,\n  width = 440,\n  label = \"Panel\",\n  noScrim = false,\n  finalFocus,\n  ref,\n  style,\n  backdropClassName,\n  keepMounted = false,\n  ...props\n}: Cls<DialogPrimitive.Popup.Props> & {\n  side?: keyof typeof sheetSides;\n  /** side sheets only: the panel width in px (a bottom sheet spans the viewport) */\n  width?: number;\n  /** the dialog's accessible name (V2's tablet inspector sheet is \"Inspector\") */\n  label?: string;\n  /** no backdrop: the page behind stays visible and, with <Sheet modal={false}>, live (V2's Comments and History sheets) */\n  noScrim?: boolean;\n  style?: React.CSSProperties;\n  /** extra classes for the backdrop, a sibling portal: a host that themes its own scope (light/dark) passes the same class here */\n  backdropClassName?: string;\n  /** keep the content mounted (hidden) while closed: a host whose content holds live state, like the editor's inspector */\n  keepMounted?: boolean;\n}) {\n  const focusReturn = useFocusReturn(finalFocus);\n  const popup = React.useRef<HTMLDivElement | null>(null);\n  const merged = useMergedRef(useMergedRef(ref, focusReturn.ref), popup);\n  const bottom = side === \"bottom\";\n  return (\n    <DialogPrimitive.Portal keepMounted={keepMounted}>\n      {noScrim ? null : (\n        <DialogPrimitive.Backdrop {...KIT_SCOPE} className={cn(\"fixed inset-0 z-[var(--kit-z-sheet,55)] bg-kit-overlay data-[open]:animate-kit-fade-in\", backdropClassName)} />\n      )}\n      <DialogPrimitive.Popup\n        {...KIT_SCOPE}\n        {...layer}\n        style={bottom ? style : { width: `min(${width}px, 100vw)`, ...style }}\n        className={cn(sheetBase, sheetSides[side], className)}\n        {...props}\n        ref={merged}\n        finalFocus={focusReturn.finalFocus}\n      >\n        <DialogPrimitive.Title className=\"sr-only\">{label}</DialogPrimitive.Title>\n        <DialogPrimitive.Description className=\"sr-only\">{bottom ? \"Bottom panel\" : \"Side panel\"}</DialogPrimitive.Description>\n        {bottom ? <SheetGrabber sheet={popup} /> : null}\n        {children}\n      </DialogPrimitive.Popup>\n    </DialogPrimitive.Portal>\n  );\n}\n"],"mappings":"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"}

package/{ui → dist/ui}/path-crumbs.js

@@ -2,10 +2,10 @@ import { cn } from "../lib/cn.js";
 import { IconButton } from "./button.js";
 import { Menu as Menu$1, MenuContent, MenuTrigger, Tooltip } from "./overlay.js";
 import * as React from "react";
-import { IconArrowLeft, IconChevronDown, IconChevronRight } from "@tabler/icons-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconArrowLeft, IconChevronDown, IconChevronRight } from "@tabler/icons-react";
 import { Menu } from "@base-ui/react/menu";
-//#region src/kit/ui/path-crumbs.tsx
+//#region src/ui/path-crumbs.tsx
 /**
 * PATH CRUMBS (CPO D38): the one breadcrumb for every drill-in path: Visuals inspector, Block Kit drill-in,
 * nested documents, media details, the workspace top bar.
@@ -526,7 +526,41 @@ function PathRow({ c, depth, current }) {
 		}) : null
 	] });
 }
+function PathCrumbSpecimen({ state, label, icon, group, size = "sm" }) {
+	const m = METRICS[size];
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center", m.text),
+		children: /* @__PURE__ */ jsxs("span", {
+			className: cn(PILL, m.pill, "pointer-events-none", {
+				rest: "",
+				hover: "bg-kit-hover text-kit-fg",
+				pressed: "bg-kit-selected text-kit-fg",
+				focus: "shadow-[0_0_0_2px_var(--kit-surface),0_0_0_4px_var(--kit-focus-ring)]",
+				open: "bg-kit-selected text-kit-fg",
+				current: "font-semibold text-kit-fg hover:bg-transparent [&_[data-crumb-icon]]:text-kit-fg-2",
+				disabled: "text-kit-fg-4 hover:bg-transparent hover:text-kit-fg-4"
+			}[state]),
+			children: [
+				icon ? /* @__PURE__ */ jsx("span", {
+					"data-crumb-icon": true,
+					className: cn("flex shrink-0 items-center", m.icon),
+					"aria-hidden": true,
+					children: icon
+				}) : null,
+				/* @__PURE__ */ jsx("span", { children: label }),
+				group ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+					className: "tabular-nums",
+					children: ["+", group]
+				}), /* @__PURE__ */ jsx(IconChevronDown, {
+					className: cn("-mx-0.5 shrink-0 text-kit-fg-4", m.sep),
+					stroke: 1.75,
+					"aria-hidden": true
+				})] }) : null
+			]
+		})
+	});
+}
 //#endregion
-export { PathCrumbs };
+export { PathCrumbSpecimen, PathCrumbs, clipWords, middleEllipsis, plansFor };
 
 //# sourceMappingURL=path-crumbs.js.map

package/dist/ui/path-crumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"path-crumbs.js","names":[],"sources":["../../src/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 → dist/ui}/presence.js

@@ -1,4 +1,4 @@
-//#region src/kit/ui/presence.ts
+//#region src/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`.
@@ -53,7 +53,7 @@ function presenceSlot(person) {
 	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);
+	return 4 + h % 5;
 }
 /** `var(--kit-presence-n)` for that person: use as a CSS colour (border, ring, background with presence-on text). */
 function presenceColor(person) {

package/dist/ui/presence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presence.js","names":[],"sources":["../../src/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;AAAE;AACtE,IAAM,QAAQ;;AAGd,IAAa,iBAAiB;AAE9B,IAAM,SAAS,WAAmB,OAAO,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,QAAQ,OAAO,EAAE,CAAC,CAAC,MAAM,WAAW,CAAC,CAAC,MAAM;;AAE1G,IAAM,2BAAW,IAAI,IAAoB;;;;;AAMzC,SAAgB,uBAAuB,SAA4E;CACjH,SAAS,MAAM;CACf,MAAM,QAAQ,CAAC,GAAG,OAAO,CAAC,CAAC,MAAM,GAAG,MAAO,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,cAAc,EAAE,QAAQ,IAAI,CAAE;CAC/G,MAAM,0BAAU,IAAI,IAAoB;CACxC,OAAO,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC;CACxD,IAAI,OAAO;CACX,KAAK,MAAM,KAAK,OAAO;EACrB,MAAM,OAAO;GAAC,EAAE,GAAG,YAAY;GAAG,MAAM,EAAE,IAAI;GAAG,EAAE,QAAQ,MAAM,EAAE,KAAK,IAAI;EAAE,CAAC,CAAC,OAAO,OAAO;EAE9F,IAAI,OADU,KAAK,KAAK,MAAM,MAAM,EAAE,CAAC,CAAC,KAAK,OAClC;EACX,IAAI,CAAC,MAGH,OAFa,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,QAAQ,MAAM,CAAC,QAAQ,IAAI,CAAC,CAEjF,CAAA,CAAK,MAAM,CAAC,GAAG,QAAQ,QAAQ,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC;EAE1E,QAAQ,IAAI,MAAM,MAAM;EACxB,KAAK,MAAM,KAAK,MAAM,SAAS,IAAI,GAAG,IAAI;CAC5C;AACF;;AAGA,SAAgB,aAAa,QAAwB;CACnD,MAAM,QAAQ,OAAO,KAAK,CAAC,CAAC,YAAY;CACxC,MAAM,MAAM,MAAM,MAAM;CACxB,IAAI,MAAM,MAAM,OAAO,MAAM;CAC7B,MAAM,MAAM,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,GAAG;CACnD,IAAI,KAAK,OAAO;CAChB,IAAI,IAAI;CACR,KAAK,IAAI,IAAI,GAAG,IAAI,IAAI,QAAQ,KAAK,IAAK,IAAI,KAAK,IAAI,WAAW,CAAC,MAAO;CAC1E,OAAO,IAAK,IAAK;AACnB;;AAGA,SAAgB,cAAc,QAAwB;CAEpD,OAAO,sBADG,aAAa,MACM,EAAE;AACjC"}

package/{ui → dist/ui}/select.js

@@ -1,13 +1,13 @@
 import { cn } from "../lib/cn.js";
 import { useFieldId, useFieldLabelledBy, useLabelFor } from "./field-context.js";
-import { GLASS, KIT_SCOPE } from "./surfaces.js";
+import { 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 { IconCheck, IconChevronDown, IconSearch } from "@tabler/icons-react";
+import { Select as Select$1 } from "@base-ui/react/select";
 import { Combobox } from "@base-ui/react/combobox";
-//#region src/kit/ui/select.tsx
+//#region src/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) {
@@ -131,8 +131,7 @@ function triggerClass(variant, size) {
 }
 /** 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 itemClass = cn("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 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-kit-fg-2", "data-[disabled]:pointer-events-none data-[disabled]:opacity-40 data-[highlighted]:bg-kit-hover");
 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, {
@@ -143,7 +142,7 @@ function Lead({ o }) {
 	});
 	return o.icon ? /* @__PURE__ */ jsx(Fragment, { children: o.icon }) : null;
 }
-function Select$1(props) {
+function Select(props) {
 	const { searchable = "auto", options } = props;
 	return searchable === true || searchable === "auto" && options.length > 7 ? /* @__PURE__ */ jsx(SearchSelect, { ...props }) : /* @__PURE__ */ jsx(PlainSelect, { ...props });
 }
@@ -176,7 +175,7 @@ function PlainSelect({ value, defaultValue, onValueChange, options, placeholder
 		value: o.value,
 		label: o.label
 	})), [options]);
-	const renderItem = (o) => /* @__PURE__ */ jsxs(Select.Item, {
+	const renderItem = (o) => /* @__PURE__ */ jsxs(Select$1.Item, {
 		value: o.value,
 		disabled: o.disabled,
 		className: itemClass,
@@ -184,7 +183,7 @@ function PlainSelect({ value, defaultValue, onValueChange, options, placeholder
 			/* @__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", {
+				children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children: o.label }), o.description ? /* @__PURE__ */ jsx("div", {
 					className: "text-kit-xs text-kit-fg-3",
 					children: o.description
 				}) : null]
@@ -193,36 +192,36 @@ function PlainSelect({ value, defaultValue, onValueChange, options, placeholder
 				className: "shrink-0 text-kit-xs tabular-nums text-kit-fg-3",
 				children: o.meta
 			}) : null,
-			/* @__PURE__ */ jsx(Select.ItemIndicator, {
+			/* @__PURE__ */ jsx(Select$1.ItemIndicator, {
 				className: "absolute right-2",
-				children: /* @__PURE__ */ jsx(IconCheck, { className: "size-4 !text-kit-fg" })
+				children: /* @__PURE__ */ jsx(IconCheck, { className: "size-4 text-kit-fg" })
 			})
 		]
 	}, o.value);
-	return /* @__PURE__ */ jsxs(Select.Root, {
+	return /* @__PURE__ */ jsxs(Select$1.Root, {
 		items,
 		value: current ?? null,
 		onValueChange: (v) => v != null && setCurrent(v),
 		onOpenChange: setOpen,
 		disabled,
-		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
+		children: [/* @__PURE__ */ jsxs(Select$1.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, {
+				children: /* @__PURE__ */ jsx(Select$1.Value, { placeholder })
+			}), /* @__PURE__ */ jsx(Select$1.Icon, { children: /* @__PURE__ */ jsx(IconChevronDown, { className: "size-3.5 text-kit-fg-3 transition-transform group-data-[popup-open]:rotate-180" }) })]
+		}), /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
 			align,
 			sideOffset: 6,
 			alignItemWithTrigger: false,
-			className: "z-[80]",
+			className: "z-[var(--kit-z-menu,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, {
+			children: /* @__PURE__ */ jsx(Select$1.Popup, {
+				className: "glass max-h-[min(360px,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto rounded-kit-lg border p-1 data-[open]:animate-kit-pop-in",
+				children: /* @__PURE__ */ jsx(Select$1.List, { children: grouped(options).map((g, gi) => g.group ? /* @__PURE__ */ jsxs(Select$1.Group, { children: [/* @__PURE__ */ jsx(Select$1.GroupLabel, {
 					className: groupHeading,
 					children: g.group
 				}), g.items.map(renderItem)] }, g.group + gi) : g.items.map(renderItem)) })
@@ -326,80 +325,83 @@ function SearchSelect({ value, defaultValue, onValueChange, options, placeholder
 			align,
 			sideOffset: 6,
 			collisionPadding: 12,
-			className: "z-[80]",
+			className: "z-[var(--kit-z-menu,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);
+			children: /* @__PURE__ */ jsx(Combobox.Popup, {
+				className: cn("glass 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 rounded-kit-lg border text-kit-fg outline-none data-[open]:animate-kit-pop-in", menuClassName),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex min-h-0 flex-1 flex-col",
+					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 };
+export { Highlight, SEARCH_THRESHOLD, Select, filterOptions, matchPositions, matchScore, nodeText, selectTriggerClass };
 
 //# sourceMappingURL=select.js.map