@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/combobox/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":["PopoverPrimitive"],"sources":["../../../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A searchable single-select.\n *\n * Implements the ARIA combobox pattern directly on a popover rather than\n * depending on a command-menu package: the input owns `role=\"combobox\"`, the\n * list owns `role=\"listbox\"`, and the active option is tracked with\n * `aria-activedescendant` so focus never leaves the input while typing.\n *\n * Navigation reads the rendered options from the DOM rather than a registry,\n * which keeps the active option correct as filtering adds and removes items —\n * a registry has to be kept in sync with what is actually on screen, and drifts.\n *\n * This version is single-select and flat. Multi-select and grouping can be\n * added without changing this API.\n */\n\n/** Default match: case-insensitive substring over the value and any keywords. */\nexport function defaultComboboxFilter(search: string, haystack: string[]): boolean {\n  const needle = search.trim().toLowerCase();\n  if (!needle) return true;\n  return haystack.some((entry) => entry.toLowerCase().includes(needle));\n}\n\ninterface ComboboxContextValue {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  search: string;\n  setSearch: (search: string) => void;\n  value: string | undefined;\n  select: (value: string) => void;\n  activeValue: string | undefined;\n  setActiveValue: (value: string | undefined) => void;\n  filter: (search: string, haystack: string[]) => boolean;\n  listId: string;\n  inputId: string;\n  optionId: (value: string) => string;\n  listRef: React.RefObject<HTMLDivElement | null>;\n  registerVisible: (value: string, visible: boolean) => void;\n  visibleCount: number;\n}\n\nconst ComboboxContext = createContext<ComboboxContextValue | null>(null);\n\nfunction useCombobox(component: string): ComboboxContextValue {\n  const context = useContext(ComboboxContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <Combobox>.`);\n  }\n  return context;\n}\n\nexport interface ComboboxProps {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Overrides how a search string is matched against an option. */\n  filter?: (search: string, haystack: string[]) => boolean;\n  children?: ReactNode;\n}\n\nexport function Combobox({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  filter = defaultComboboxFilter,\n  children,\n}: ComboboxProps) {\n  const uid = useId();\n\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const value = valueProp === undefined ? uncontrolledValue : valueProp;\n\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const open = openProp === undefined ? uncontrolledOpen : openProp;\n\n  const [search, setSearch] = useState(\"\");\n  const [activeValue, setActiveValue] = useState<string | undefined>(undefined);\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  // Counted rather than listed: the empty state only needs to know whether\n  // anything survived the filter.\n  const visibleValues = useRef(new Set<string>());\n  const [visibleCount, setVisibleCount] = useState(0);\n\n  const registerVisible = useCallback((optionValue: string, visible: boolean) => {\n    const set = visibleValues.current;\n    const had = set.has(optionValue);\n    if (visible && !had) set.add(optionValue);\n    else if (!visible && had) set.delete(optionValue);\n    else return;\n    setVisibleCount(set.size);\n  }, []);\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (openProp === undefined) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n      // Reopening should start from a clean search rather than resuming a\n      // half-typed query the user has forgotten about.\n      if (!next) {\n        setSearch(\"\");\n        setActiveValue(undefined);\n      }\n    },\n    [openProp, onOpenChange],\n  );\n\n  const select = useCallback(\n    (next: string) => {\n      if (valueProp === undefined) setUncontrolledValue(next);\n      onValueChange?.(next);\n      setOpen(false);\n    },\n    [valueProp, onValueChange, setOpen],\n  );\n\n  const context = useMemo<ComboboxContextValue>(\n    () => ({\n      open,\n      setOpen,\n      search,\n      setSearch,\n      value,\n      select,\n      activeValue,\n      setActiveValue,\n      filter,\n      listId: `${uid}-list`,\n      inputId: `${uid}-input`,\n      optionId: (optionValue: string) =>\n        `${uid}-option-${optionValue.replace(/\\s+/g, \"-\").toLowerCase()}`,\n      listRef,\n      registerVisible,\n      visibleCount,\n    }),\n    [\n      open,\n      setOpen,\n      search,\n      value,\n      select,\n      activeValue,\n      filter,\n      uid,\n      registerVisible,\n      visibleCount,\n    ],\n  );\n\n  return (\n    <ComboboxContext.Provider value={context}>\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n        {children}\n      </PopoverPrimitive.Root>\n    </ComboboxContext.Provider>\n  );\n}\n\nexport interface ComboboxTriggerProps extends ComponentPropsWithRef<\"button\"> {\n  /** Shown when nothing is selected. */\n  placeholder?: string;\n}\n\nexport function ComboboxTrigger({\n  className,\n  placeholder = \"Select…\",\n  children,\n  ...props\n}: ComboboxTriggerProps) {\n  const { value, open } = useCombobox(\"ComboboxTrigger\");\n\n  return (\n    <PopoverPrimitive.Trigger asChild>\n      <button\n        type=\"button\"\n        data-slot=\"combobox-trigger\"\n        aria-expanded={open}\n        className={cn(\n          \"flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-background\",\n          \"px-3 text-sm shadow-xs transition-[border-color,box-shadow] duration-[var(--duration-fast)]\",\n          \"focus-visible:border-ring\",\n          \"disabled:cursor-not-allowed disabled:opacity-55\",\n          \"aria-invalid:border-destructive\",\n          focusRing,\n          className,\n        )}\n        {...props}\n      >\n        <span className={cn(\"truncate\", !value && \"text-muted-foreground\")}>\n          {children ?? value ?? placeholder}\n        </span>\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          className=\"size-4 shrink-0 opacity-60\"\n        >\n          <path\n            d=\"m7 10 5 5 5-5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </PopoverPrimitive.Trigger>\n  );\n}\n\nexport interface ComboboxContentProps extends ComponentPropsWithRef<\n  typeof PopoverPrimitive.Content\n> {\n  /** Names the popover, which carries role=\"dialog\". */\n  label?: string;\n}\n\nexport function ComboboxContent({\n  className,\n  align = \"start\",\n  sideOffset = 6,\n  label = \"Search options\",\n  children,\n  ...props\n}: ComboboxContentProps) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"combobox-content\"\n        align={align}\n        sideOffset={sideOffset}\n        aria-label={label}\n        // Focus belongs in the search input, which the input claims on mount.\n        onOpenAutoFocus={(event) => {\n          event.preventDefault();\n        }}\n        className={cn(\n          \"z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] min-w-48 overflow-hidden\",\n          \"rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg\",\n          \"origin-[var(--radix-popover-content-transform-origin)]\",\n          \"data-[state=closed]:animate-float-out data-[state=open]:animate-float-in\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  );\n}\n\n/** Options currently rendered, in DOM order and excluding disabled ones. */\nfunction visibleOptions(list: HTMLElement | null): HTMLElement[] {\n  if (!list) return [];\n  return Array.from(list.querySelectorAll<HTMLElement>('[role=\"option\"]:not([data-disabled])'));\n}\n\nexport type ComboboxInputProps = Omit<ComponentPropsWithRef<\"input\">, \"value\" | \"onChange\">;\n\nexport function ComboboxInput({ className, ...props }: ComboboxInputProps) {\n  const {\n    search,\n    setSearch,\n    activeValue,\n    setActiveValue,\n    select,\n    setOpen,\n    listId,\n    inputId,\n    optionId,\n    listRef,\n  } = useCombobox(\"ComboboxInput\");\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  const move = useCallback(\n    (delta: number | \"first\" | \"last\") => {\n      const options = visibleOptions(listRef.current);\n      if (options.length === 0) return;\n\n      const currentIndex = options.findIndex((option) => option.dataset.value === activeValue);\n\n      let nextIndex: number;\n      if (delta === \"first\") nextIndex = 0;\n      else if (delta === \"last\") nextIndex = options.length - 1;\n      else if (currentIndex === -1) nextIndex = delta > 0 ? 0 : options.length - 1;\n      // Wraps, so holding an arrow key never dead-ends at the edge of the list.\n      else nextIndex = (currentIndex + delta + options.length) % options.length;\n\n      const next = options[nextIndex];\n      if (!next) return;\n      setActiveValue(next.dataset.value);\n      next.scrollIntoView({ block: \"nearest\" });\n    },\n    [activeValue, listRef, setActiveValue],\n  );\n\n  function handleKeyDown(event: ReactKeyboardEvent<HTMLInputElement>) {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        move(1);\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        move(-1);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        move(\"first\");\n        break;\n      case \"End\":\n        event.preventDefault();\n        move(\"last\");\n        break;\n      case \"Enter\": {\n        if (activeValue === undefined) return;\n        event.preventDefault();\n        select(activeValue);\n        break;\n      }\n      case \"Escape\":\n        event.preventDefault();\n        setOpen(false);\n        break;\n      default:\n        break;\n    }\n  }\n\n  return (\n    <div className=\"flex items-center gap-2 border-b border-border px-3\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-4 shrink-0 opacity-55\"\n      >\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"m20 20-3.5-3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n      <input\n        ref={inputRef}\n        id={inputId}\n        data-slot=\"combobox-input\"\n        type=\"text\"\n        role=\"combobox\"\n        autoComplete=\"off\"\n        aria-expanded=\"true\"\n        aria-controls={listId}\n        aria-autocomplete=\"list\"\n        aria-activedescendant={activeValue ? optionId(activeValue) : undefined}\n        value={search}\n        onChange={(event) => {\n          setSearch(event.target.value);\n          // The previous active option may have just been filtered out.\n          setActiveValue(undefined);\n        }}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"h-10 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function ComboboxList({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { listId, listRef } = useCombobox(\"ComboboxList\");\n\n  return (\n    <div\n      ref={listRef}\n      id={listId}\n      role=\"listbox\"\n      data-slot=\"combobox-list\"\n      className={cn(\"max-h-64 overflow-y-auto overscroll-contain p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ComboboxItemProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"onSelect\" | \"children\"\n> {\n  /** The value reported by onValueChange, and the primary search term. */\n  value: string;\n  /** Extra search terms that are not shown, such as synonyms or an id. */\n  keywords?: string[];\n  disabled?: boolean;\n  children?: ReactNode;\n}\n\nexport function ComboboxItem({\n  className,\n  value,\n  keywords,\n  disabled,\n  children,\n  ...props\n}: ComboboxItemProps) {\n  const {\n    search,\n    filter,\n    value: selectedValue,\n    activeValue,\n    setActiveValue,\n    select,\n    optionId,\n    registerVisible,\n  } = useCombobox(\"ComboboxItem\");\n\n  // A string child is the visible label, so it is searchable for free. Richer\n  // children cannot be read purely, so those pass `keywords` instead.\n  const haystack = useMemo(\n    () => [value, ...(keywords ?? []), typeof children === \"string\" ? children : \"\"],\n    [value, keywords, children],\n  );\n\n  const visible = filter(search, haystack);\n  const selected = selectedValue === value;\n  const active = activeValue === value;\n\n  useEffect(() => {\n    registerVisible(value, visible && !disabled);\n    return () => {\n      registerVisible(value, false);\n    };\n  }, [registerVisible, value, visible, disabled]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      id={optionId(value)}\n      role=\"option\"\n      data-slot=\"combobox-item\"\n      data-value={value}\n      data-active={active || undefined}\n      data-disabled={disabled || undefined}\n      aria-selected={selected}\n      aria-disabled={disabled || undefined}\n      // Programmatically focusable but out of the tab order: in an\n      // aria-activedescendant listbox the input keeps real focus and options are\n      // only virtually focused, so they must never become tab stops.\n      tabIndex={-1}\n      onPointerMove={() => {\n        if (!disabled) setActiveValue(value);\n      }}\n      onMouseDown={(event) => {\n        // Without this, pressing on an option blurs the search input, which\n        // breaks aria-activedescendant and can dismiss the popover before the\n        // click ever lands.\n        event.preventDefault();\n      }}\n      onClick={() => {\n        if (!disabled) select(value);\n      }}\n      onKeyDown={(event) => {\n        // Reachable only if a consumer focuses an option directly; the normal\n        // path is Enter on the input, handled by ComboboxInput.\n        if (disabled) return;\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          select(value);\n        }\n      }}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-none select-none\",\n        \"transition-colors duration-[var(--duration-instant)]\",\n        \"data-[active]:bg-accent data-[active]:text-accent-foreground\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-55\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children ?? value}\n      {selected ? (\n        <span className=\"absolute right-2 grid size-4 place-items-center\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n            <path\n              d=\"m5 13 4 4L19 7\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\n/** Shown only when the filter leaves nothing. */\nexport function ComboboxEmpty({ className, children, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { visibleCount } = useCombobox(\"ComboboxEmpty\");\n  if (visibleCount > 0) return null;\n\n  return (\n    <div\n      data-slot=\"combobox-empty\"\n      role=\"presentation\"\n      className={cn(\"px-3 py-6 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? \"No results found.\"}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAgB,sBAAsB,QAAgB,UAA6B;CACjF,MAAM,SAAS,OAAO,KAAK,CAAC,CAAC,YAAY;CACzC,IAAI,CAAC,QAAQ,OAAO;CACpB,OAAO,SAAS,MAAM,UAAU,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC;AACtE;AAoBA,MAAM,kBAAkB,cAA2C,IAAI;AAEvE,SAAS,YAAY,WAAyC;CAC5D,MAAM,UAAU,WAAW,eAAe;CAC1C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,GAAG,UAAU,qCAAqC;CAEpE,OAAO;AACT;AAcA,SAAgB,SAAS,EACvB,OAAO,WACP,cACA,eACA,MAAM,UACN,cAAc,OACd,cACA,SAAS,uBACT,YACgB;CAChB,MAAM,MAAM,MAAM;CAElB,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,YAAY;CACvE,MAAM,QAAQ,cAAc,KAAA,IAAY,oBAAoB;CAE5D,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,WAAW;CACpE,MAAM,OAAO,aAAa,KAAA,IAAY,mBAAmB;CAEzD,MAAM,CAAC,QAAQ,aAAa,SAAS,EAAE;CACvC,MAAM,CAAC,aAAa,kBAAkB,SAA6B,KAAA,CAAS;CAC5E,MAAM,UAAU,OAA8B,IAAI;CAIlD,MAAM,gBAAgB,uBAAO,IAAI,IAAY,CAAC;CAC9C,MAAM,CAAC,cAAc,mBAAmB,SAAS,CAAC;CAElD,MAAM,kBAAkB,aAAa,aAAqB,YAAqB;EAC7E,MAAM,MAAM,cAAc;EAC1B,MAAM,MAAM,IAAI,IAAI,WAAW;EAC/B,IAAI,WAAW,CAAC,KAAK,IAAI,IAAI,WAAW;OACnC,IAAI,CAAC,WAAW,KAAK,IAAI,OAAO,WAAW;OAC3C;EACL,gBAAgB,IAAI,IAAI;CAC1B,GAAG,CAAC,CAAC;CAEL,MAAM,UAAU,aACb,SAAkB;EACjB,IAAI,aAAa,KAAA,GAAW,oBAAoB,IAAI;EACpD,eAAe,IAAI;EAGnB,IAAI,CAAC,MAAM;GACT,UAAU,EAAE;GACZ,eAAe,KAAA,CAAS;EAC1B;CACF,GACA,CAAC,UAAU,YAAY,CACzB;CAEA,MAAM,SAAS,aACZ,SAAiB;EAChB,IAAI,cAAc,KAAA,GAAW,qBAAqB,IAAI;EACtD,gBAAgB,IAAI;EACpB,QAAQ,KAAK;CACf,GACA;EAAC;EAAW;EAAe;CAAO,CACpC;CAEA,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAAQ,GAAG,IAAI;EACf,SAAS,GAAG,IAAI;EAChB,WAAW,gBACT,GAAG,IAAI,UAAU,YAAY,QAAQ,QAAQ,GAAG,CAAC,CAAC,YAAY;EAChE;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO;EAC/B,UAAA,oBAACA,QAAiB,MAAlB;GAA6B;GAAM,cAAc;GAC9C;EACoB,CAAA;CACC,CAAA;AAE9B;AAOA,SAAgB,gBAAgB,EAC9B,WACA,cAAc,WACd,UACA,GAAG,SACoB;CACvB,MAAM,EAAE,OAAO,SAAS,YAAY,iBAAiB;CAErD,OACE,oBAACA,QAAiB,SAAlB;EAA0B,SAAA;EACxB,UAAA,qBAAC,UAAD;GACE,MAAK;GACL,aAAU;GACV,iBAAe;GACf,WAAW,GACT,mGACA,+FACA,6BACA,mDACA,mCACA,WACA,SACF;GACA,GAAI;GAbN,UAAA,CAeE,oBAAC,QAAD;IAAM,WAAW,GAAG,YAAY,CAAC,SAAS,uBAAuB;IAC9D,UAAA,YAAY,SAAS;GAClB,CAAA,GACN,oBAAC,OAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE,CAAA,CACC;;CACgB,CAAA;AAE9B;AASA,SAAgB,gBAAgB,EAC9B,WACA,QAAQ,SACR,aAAa,GACb,QAAQ,kBACR,UACA,GAAG,SACoB;CACvB,OACE,oBAACA,QAAiB,QAAlB,EAAA,UACE,oBAACA,QAAiB,SAAlB;EACE,aAAU;EACH;EACK;EACZ,cAAY;EAEZ,kBAAkB,UAAU;GAC1B,MAAM,eAAe;EACvB;EACA,WAAW,GACT,wFACA,oFACA,0DACA,4EACA,SACF;EACA,GAAI;EAEH;CACuB,CAAA,EACH,CAAA;AAE7B;;AAGA,SAAS,eAAe,MAAyC;CAC/D,IAAI,CAAC,MAAM,OAAO,CAAC;CACnB,OAAO,MAAM,KAAK,KAAK,iBAA8B,wCAAsC,CAAC;AAC9F;AAIA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAA6B;CACzE,MAAM,EACJ,QACA,WACA,aACA,gBACA,QACA,SACA,QACA,SACA,UACA,YACE,YAAY,eAAe;CAE/B,MAAM,WAAW,OAAgC,IAAI;CAErD,gBAAgB;EACd,SAAS,SAAS,MAAM;CAC1B,GAAG,CAAC,CAAC;CAEL,MAAM,OAAO,aACV,UAAqC;EACpC,MAAM,UAAU,eAAe,QAAQ,OAAO;EAC9C,IAAI,QAAQ,WAAW,GAAG;EAE1B,MAAM,eAAe,QAAQ,WAAW,WAAW,OAAO,QAAQ,UAAU,WAAW;EAEvF,IAAI;EACJ,IAAI,UAAU,SAAS,YAAY;OAC9B,IAAI,UAAU,QAAQ,YAAY,QAAQ,SAAS;OACnD,IAAI,iBAAiB,IAAI,YAAY,QAAQ,IAAI,IAAI,QAAQ,SAAS;OAEtE,aAAa,eAAe,QAAQ,QAAQ,UAAU,QAAQ;EAEnE,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,MAAM;EACX,eAAe,KAAK,QAAQ,KAAK;EACjC,KAAK,eAAe,EAAE,OAAO,UAAU,CAAC;CAC1C,GACA;EAAC;EAAa;EAAS;CAAc,CACvC;CAEA,SAAS,cAAc,OAA6C;EAClE,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,MAAM,eAAe;IACrB,KAAK,CAAC;IACN;GACF,KAAK;IACH,MAAM,eAAe;IACrB,KAAK,EAAE;IACP;GACF,KAAK;IACH,MAAM,eAAe;IACrB,KAAK,OAAO;IACZ;GACF,KAAK;IACH,MAAM,eAAe;IACrB,KAAK,MAAM;IACX;GACF,KAAK;IACH,IAAI,gBAAgB,KAAA,GAAW;IAC/B,MAAM,eAAe;IACrB,OAAO,WAAW;IAClB;GAEF,KAAK;IACH,MAAM,eAAe;IACrB,QAAQ,KAAK;EAIjB;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,qBAAC,OAAD;GACE,SAAQ;GACR,MAAK;GACL,eAAY;GACZ,WAAU;GAJZ,UAAA,CAME,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;IAAI,QAAO;IAAe,aAAY;GAAK,CAAA,GACrE,oBAAC,QAAD;IAAM,GAAE;IAAiB,QAAO;IAAe,aAAY;IAAI,eAAc;GAAS,CAAA,CACnF;EACL,CAAA,GAAA,oBAAC,SAAD;GACE,KAAK;GACL,IAAI;GACJ,aAAU;GACV,MAAK;GACL,MAAK;GACL,cAAa;GACb,iBAAc;GACd,iBAAe;GACf,qBAAkB;GAClB,yBAAuB,cAAc,SAAS,WAAW,IAAI,KAAA;GAC7D,OAAO;GACP,WAAW,UAAU;IACnB,UAAU,MAAM,OAAO,KAAK;IAE5B,eAAe,KAAA,CAAS;GAC1B;GACA,WAAW;GACX,WAAW,GACT,qFACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;AAEA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAuC;CAClF,MAAM,EAAE,QAAQ,YAAY,YAAY,cAAc;CAEtD,OACE,oBAAC,OAAD;EACE,KAAK;EACL,IAAI;EACJ,MAAK;EACL,aAAU;EACV,WAAW,GAAG,mDAAmD,SAAS;EAC1E,GAAI;CACL,CAAA;AAEL;AAcA,SAAgB,aAAa,EAC3B,WACA,OACA,UACA,UACA,UACA,GAAG,SACiB;CACpB,MAAM,EACJ,QACA,QACA,OAAO,eACP,aACA,gBACA,QACA,UACA,oBACE,YAAY,cAAc;CAS9B,MAAM,UAAU,OAAO,QALN,cACT;EAAC;EAAO,GAAI,YAAY,CAAC;EAAI,OAAO,aAAa,WAAW,WAAW;CAAE,GAC/E;EAAC;EAAO;EAAU;CAAQ,CAGU,CAAC;CACvC,MAAM,WAAW,kBAAkB;CACnC,MAAM,SAAS,gBAAgB;CAE/B,gBAAgB;EACd,gBAAgB,OAAO,WAAW,CAAC,QAAQ;EAC3C,aAAa;GACX,gBAAgB,OAAO,KAAK;EAC9B;CACF,GAAG;EAAC;EAAiB;EAAO;EAAS;CAAQ,CAAC;CAE9C,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,qBAAC,OAAD;EACE,IAAI,SAAS,KAAK;EAClB,MAAK;EACL,aAAU;EACV,cAAY;EACZ,eAAa,UAAU,KAAA;EACvB,iBAAe,YAAY,KAAA;EAC3B,iBAAe;EACf,iBAAe,YAAY,KAAA;EAI3B,UAAU;EACV,qBAAqB;GACnB,IAAI,CAAC,UAAU,eAAe,KAAK;EACrC;EACA,cAAc,UAAU;GAItB,MAAM,eAAe;EACvB;EACA,eAAe;GACb,IAAI,CAAC,UAAU,OAAO,KAAK;EAC7B;EACA,YAAY,UAAU;GAGpB,IAAI,UAAU;GACd,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;IAC9C,MAAM,eAAe;IACrB,OAAO,KAAK;GACd;EACF;EACA,WAAW,GACT,gHACA,wDACA,gEACA,kEACA,qFACA,SACF;EACA,GAAI;EA1CN,UAAA,CA4CG,YAAY,OACZ,WACC,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAAC,OAAD;IAAK,SAAQ;IAAY,MAAK;IAAO,eAAY;IAAO,WAAU;IAChE,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE,CAAA;EACD,CAAA,IACJ,IACD;;AAET;;AAGA,SAAgB,cAAc,EAAE,WAAW,UAAU,GAAG,SAAuC;CAC7F,MAAM,EAAE,iBAAiB,YAAY,eAAe;CACpD,IAAI,eAAe,GAAG,OAAO;CAE7B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GAAG,uDAAuD,SAAS;EAC9E,GAAI;EAEH,UAAA,YAAY;CACV,CAAA;AAET"}
+{"version":3,"file":"combobox.js","names":["PopoverPrimitive"],"sources":["../../../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI Combobox and SearchableDropdown (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\n\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A searchable single-select.\n *\n * Implements the ARIA combobox pattern directly on a popover rather than\n * depending on a command-menu package: the input owns `role=\"combobox\"`, the\n * list owns `role=\"listbox\"`, and the active option is tracked with\n * `aria-activedescendant` so focus never leaves the input while typing.\n *\n * Navigation reads the rendered options from the DOM rather than a registry,\n * which keeps the active option correct as filtering adds and removes items —\n * a registry has to be kept in sync with what is actually on screen, and drifts.\n *\n * This version is single-select and flat. Multi-select and grouping can be\n * added without changing this API.\n */\n\n/** Default match: case-insensitive substring over the value and any keywords. */\nexport function defaultComboboxFilter(search: string, haystack: string[]): boolean {\n  const needle = search.trim().toLowerCase();\n  if (!needle) return true;\n  return haystack.some((entry) => entry.toLowerCase().includes(needle));\n}\n\ninterface ComboboxContextValue {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  search: string;\n  setSearch: (search: string) => void;\n  value: string | undefined;\n  select: (value: string) => void;\n  activeValue: string | undefined;\n  setActiveValue: (value: string | undefined) => void;\n  filter: (search: string, haystack: string[]) => boolean;\n  listId: string;\n  inputId: string;\n  optionId: (value: string) => string;\n  listRef: React.RefObject<HTMLDivElement | null>;\n  registerVisible: (value: string, visible: boolean) => void;\n  visibleCount: number;\n  loading: boolean;\n}\n\nconst ComboboxContext = createContext<ComboboxContextValue | null>(null);\n\nfunction useCombobox(component: string): ComboboxContextValue {\n  const context = useContext(ComboboxContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <Combobox>.`);\n  }\n  return context;\n}\n\nexport interface ComboboxProps {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Overrides how a search string is matched against an option. */\n  filter?: (search: string, haystack: string[]) => boolean;\n  /**\n   * Set `false` when the options are already the results for the search — for\n   * example when `onSearchChange` fetches them — so they are not filtered twice.\n   */\n  shouldFilter?: boolean;\n  /** Called as the search text changes, including the reset when it closes. */\n  onSearchChange?: (search: string) => void;\n  /** Milliseconds of quiet typing before `onSearchChange` fires. */\n  searchDebounce?: number;\n  /**\n   * Results are on their way: the listbox is `aria-busy`, `ComboboxLoading`\n   * shows and `ComboboxEmpty` holds back, so \"No results\" never flashes first.\n   */\n  loading?: boolean;\n  /** Choosing the selected option again clears it, reporting `\"\"`. */\n  allowDeselect?: boolean;\n  children?: ReactNode;\n}\n\n/*\n * Motion (SmoothUI's Combobox): options rise in, the first few a beat apart,\n * and the trigger's chevron turns while open. Keyframes ship with the\n * component (ADR 0014); every duration and delay runs on the motion scale.\n */\nconst ITEM_STAGGER = Array.from(\n  { length: 8 },\n  (_, index) =>\n    `[data-slot=\"combobox-item\"]:nth-child(${String(index + 2)}){animation-delay:calc(${String((index + 1) * 20)}ms * var(--motion-scale, 1))}`,\n).join(\"\");\n\nconst ITEM_KEYFRAMES = `\n@keyframes dowel-combobox-item-in{from{opacity:0;transform:translateY(0.25rem)}}\n[data-slot=\"combobox-item\"]{animation:dowel-combobox-item-in var(--duration-normal) var(--ease-out-quint) backwards}\n${ITEM_STAGGER}\n`;\n\nexport function Combobox({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  filter: filterProp = defaultComboboxFilter,\n  shouldFilter = true,\n  onSearchChange,\n  searchDebounce = 0,\n  loading = false,\n  allowDeselect = false,\n  children,\n}: ComboboxProps) {\n  const uid = useId();\n  const filter = shouldFilter ? filterProp : acceptAll;\n\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const value = valueProp === undefined ? uncontrolledValue : valueProp;\n\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const open = openProp === undefined ? uncontrolledOpen : openProp;\n\n  const [search, setSearchState] = useState(\"\");\n  const searchRef = useRef(\"\");\n  const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const onSearchChangeRef = useRef(onSearchChange);\n  useEffect(() => {\n    onSearchChangeRef.current = onSearchChange;\n  }, [onSearchChange]);\n\n  const setSearch = useCallback(\n    (next: string) => {\n      if (next === searchRef.current) return;\n      searchRef.current = next;\n      setSearchState(next);\n      clearTimeout(debounceRef.current);\n      if (searchDebounce <= 0) {\n        onSearchChangeRef.current?.(next);\n        return;\n      }\n      debounceRef.current = setTimeout(() => {\n        onSearchChangeRef.current?.(next);\n      }, searchDebounce);\n    },\n    [searchDebounce],\n  );\n\n  useEffect(\n    () => () => {\n      clearTimeout(debounceRef.current);\n    },\n    [],\n  );\n  const [activeValue, setActiveValue] = useState<string | undefined>(undefined);\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  // Counted rather than listed: the empty state only needs to know whether\n  // anything survived the filter.\n  const visibleValues = useRef(new Set<string>());\n  const [visibleCount, setVisibleCount] = useState(0);\n\n  const registerVisible = useCallback((optionValue: string, visible: boolean) => {\n    const set = visibleValues.current;\n    const had = set.has(optionValue);\n    if (visible && !had) set.add(optionValue);\n    else if (!visible && had) set.delete(optionValue);\n    else return;\n    setVisibleCount(set.size);\n  }, []);\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (openProp === undefined) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n      // Reopening should start from a clean search rather than resuming a\n      // half-typed query the user has forgotten about.\n      if (!next) {\n        setSearch(\"\");\n        setActiveValue(undefined);\n      }\n    },\n    [openProp, onOpenChange, setSearch],\n  );\n\n  const select = useCallback(\n    (chosen: string) => {\n      const next = allowDeselect && chosen === value ? \"\" : chosen;\n      if (valueProp === undefined) setUncontrolledValue(next || undefined);\n      onValueChange?.(next);\n      setOpen(false);\n    },\n    [valueProp, onValueChange, setOpen, allowDeselect, value],\n  );\n\n  const context = useMemo<ComboboxContextValue>(\n    () => ({\n      open,\n      setOpen,\n      search,\n      setSearch,\n      value,\n      select,\n      activeValue,\n      setActiveValue,\n      filter,\n      listId: `${uid}-list`,\n      inputId: `${uid}-input`,\n      optionId: (optionValue: string) =>\n        `${uid}-option-${optionValue.replace(/\\s+/g, \"-\").toLowerCase()}`,\n      listRef,\n      registerVisible,\n      visibleCount,\n      loading,\n    }),\n    [\n      open,\n      setOpen,\n      search,\n      setSearch,\n      loading,\n      value,\n      select,\n      activeValue,\n      filter,\n      uid,\n      registerVisible,\n      visibleCount,\n    ],\n  );\n\n  return (\n    <ComboboxContext.Provider value={context}>\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n        {children}\n      </PopoverPrimitive.Root>\n    </ComboboxContext.Provider>\n  );\n}\n\nfunction acceptAll(): boolean {\n  return true;\n}\n\nexport interface ComboboxTriggerProps extends ComponentPropsWithRef<\"button\"> {\n  /** Shown when nothing is selected. */\n  placeholder?: string;\n}\n\nexport function ComboboxTrigger({\n  className,\n  placeholder = \"Select…\",\n  children,\n  ...props\n}: ComboboxTriggerProps) {\n  const { value, open } = useCombobox(\"ComboboxTrigger\");\n\n  return (\n    <PopoverPrimitive.Trigger asChild>\n      <button\n        type=\"button\"\n        data-slot=\"combobox-trigger\"\n        aria-expanded={open}\n        className={cn(\n          \"flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-background\",\n          \"px-3 text-sm shadow-xs transition-[border-color,box-shadow] duration-[var(--duration-fast)]\",\n          \"focus-visible:border-ring\",\n          \"disabled:cursor-not-allowed disabled:opacity-55\",\n          \"aria-invalid:border-destructive\",\n          focusRing,\n          className,\n        )}\n        {...props}\n      >\n        <span className={cn(\"truncate\", !value && \"text-muted-foreground\")}>\n          {children ?? value ?? placeholder}\n        </span>\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          data-slot=\"combobox-chevron\"\n          className={cn(\n            \"size-4 shrink-0 opacity-60\",\n            \"transition-[rotate] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n            open && \"rotate-180\",\n          )}\n        >\n          <path\n            d=\"m7 10 5 5 5-5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </PopoverPrimitive.Trigger>\n  );\n}\n\nexport interface ComboboxContentProps extends ComponentPropsWithRef<\n  typeof PopoverPrimitive.Content\n> {\n  /** Names the popover, which carries role=\"dialog\". */\n  label?: string;\n}\n\nexport function ComboboxContent({\n  className,\n  align = \"start\",\n  sideOffset = 6,\n  label = \"Search options\",\n  children,\n  ...props\n}: ComboboxContentProps) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"combobox-content\"\n        align={align}\n        sideOffset={sideOffset}\n        aria-label={label}\n        // Focus belongs in the search input, which the input claims on mount.\n        onOpenAutoFocus={(event) => {\n          event.preventDefault();\n        }}\n        className={cn(\n          \"z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] min-w-48 overflow-hidden\",\n          \"rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg\",\n          \"origin-[var(--radix-popover-content-transform-origin)]\",\n          \"data-[state=closed]:animate-float-out data-[state=open]:animate-float-in\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  );\n}\n\n/** Options currently rendered, in DOM order and excluding disabled ones. */\nfunction visibleOptions(list: HTMLElement | null): HTMLElement[] {\n  if (!list) return [];\n  return Array.from(list.querySelectorAll<HTMLElement>('[role=\"option\"]:not([data-disabled])'));\n}\n\nexport interface ComboboxInputProps extends Omit<\n  ComponentPropsWithRef<\"input\">,\n  \"value\" | \"onChange\"\n> {\n  /** Shows a button that clears the search while there is text to clear. */\n  clearable?: boolean;\n}\n\nexport function ComboboxInput({ className, clearable = false, ...props }: ComboboxInputProps) {\n  const {\n    search,\n    setSearch,\n    activeValue,\n    setActiveValue,\n    select,\n    setOpen,\n    listId,\n    inputId,\n    optionId,\n    listRef,\n  } = useCombobox(\"ComboboxInput\");\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  const move = useCallback(\n    (delta: number | \"first\" | \"last\") => {\n      const options = visibleOptions(listRef.current);\n      if (options.length === 0) return;\n\n      const currentIndex = options.findIndex((option) => option.dataset.value === activeValue);\n\n      let nextIndex: number;\n      if (delta === \"first\") nextIndex = 0;\n      else if (delta === \"last\") nextIndex = options.length - 1;\n      else if (currentIndex === -1) nextIndex = delta > 0 ? 0 : options.length - 1;\n      // Wraps, so holding an arrow key never dead-ends at the edge of the list.\n      else nextIndex = (currentIndex + delta + options.length) % options.length;\n\n      const next = options[nextIndex];\n      if (!next) return;\n      setActiveValue(next.dataset.value);\n      next.scrollIntoView({ block: \"nearest\" });\n    },\n    [activeValue, listRef, setActiveValue],\n  );\n\n  function handleKeyDown(event: ReactKeyboardEvent<HTMLInputElement>) {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        move(1);\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        move(-1);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        move(\"first\");\n        break;\n      case \"End\":\n        event.preventDefault();\n        move(\"last\");\n        break;\n      case \"Enter\": {\n        if (activeValue === undefined) return;\n        event.preventDefault();\n        select(activeValue);\n        break;\n      }\n      case \"Escape\":\n        event.preventDefault();\n        setOpen(false);\n        break;\n      default:\n        break;\n    }\n  }\n\n  return (\n    <div className=\"flex items-center gap-2 border-b border-border px-3\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-4 shrink-0 opacity-55\"\n      >\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"m20 20-3.5-3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n      <input\n        ref={inputRef}\n        id={inputId}\n        data-slot=\"combobox-input\"\n        type=\"text\"\n        role=\"combobox\"\n        autoComplete=\"off\"\n        aria-expanded=\"true\"\n        aria-controls={listId}\n        aria-autocomplete=\"list\"\n        aria-activedescendant={activeValue ? optionId(activeValue) : undefined}\n        value={search}\n        onChange={(event) => {\n          setSearch(event.target.value);\n          // The previous active option may have just been filtered out.\n          setActiveValue(undefined);\n        }}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"h-10 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      />\n      {clearable && search ? (\n        <button\n          type=\"button\"\n          data-slot=\"combobox-clear\"\n          aria-label=\"Clear search\"\n          // Keeps focus, and so aria-activedescendant, in the input.\n          onMouseDown={(event) => {\n            event.preventDefault();\n          }}\n          onClick={() => {\n            setSearch(\"\");\n            setActiveValue(undefined);\n            inputRef.current?.focus();\n          }}\n          className={cn(\n            \"-me-1 grid size-6 shrink-0 place-items-center rounded-sm opacity-60 hover:opacity-100\",\n            \"transition-opacity duration-[var(--duration-fast)]\",\n            focusRing,\n          )}\n        >\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n            <path\n              d=\"M6 6l12 12M18 6 6 18\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n            />\n          </svg>\n        </button>\n      ) : null}\n    </div>\n  );\n}\n\nexport function ComboboxList({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { listId, listRef, loading } = useCombobox(\"ComboboxList\");\n\n  return (\n    <div\n      ref={listRef}\n      id={listId}\n      role=\"listbox\"\n      aria-busy={loading || undefined}\n      data-slot=\"combobox-list\"\n      className={cn(\"max-h-64 overflow-y-auto overscroll-contain p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ComboboxItemProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"onSelect\" | \"children\"\n> {\n  /** The value reported by onValueChange, and the primary search term. */\n  value: string;\n  /** Extra search terms that are not shown, such as synonyms or an id. */\n  keywords?: string[];\n  disabled?: boolean;\n  children?: ReactNode;\n}\n\nexport function ComboboxItem({\n  className,\n  value,\n  keywords,\n  disabled,\n  children,\n  ...props\n}: ComboboxItemProps) {\n  const {\n    search,\n    filter,\n    value: selectedValue,\n    activeValue,\n    setActiveValue,\n    select,\n    optionId,\n    registerVisible,\n  } = useCombobox(\"ComboboxItem\");\n\n  // A string child is the visible label, so it is searchable for free. Richer\n  // children cannot be read purely, so those pass `keywords` instead.\n  const haystack = useMemo(\n    () => [value, ...(keywords ?? []), typeof children === \"string\" ? children : \"\"],\n    [value, keywords, children],\n  );\n\n  const visible = filter(search, haystack);\n  const selected = selectedValue === value;\n  const active = activeValue === value;\n\n  useEffect(() => {\n    registerVisible(value, visible && !disabled);\n    return () => {\n      registerVisible(value, false);\n    };\n  }, [registerVisible, value, visible, disabled]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      id={optionId(value)}\n      role=\"option\"\n      data-slot=\"combobox-item\"\n      data-value={value}\n      data-active={active || undefined}\n      data-disabled={disabled || undefined}\n      aria-selected={selected}\n      aria-disabled={disabled || undefined}\n      // Programmatically focusable but out of the tab order: in an\n      // aria-activedescendant listbox the input keeps real focus and options are\n      // only virtually focused, so they must never become tab stops.\n      tabIndex={-1}\n      onPointerMove={() => {\n        if (!disabled) setActiveValue(value);\n      }}\n      onMouseDown={(event) => {\n        // Without this, pressing on an option blurs the search input, which\n        // breaks aria-activedescendant and can dismiss the popover before the\n        // click ever lands.\n        event.preventDefault();\n      }}\n      onClick={() => {\n        if (!disabled) select(value);\n      }}\n      onKeyDown={(event) => {\n        // Reachable only if a consumer focuses an option directly; the normal\n        // path is Enter on the input, handled by ComboboxInput.\n        if (disabled) return;\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          select(value);\n        }\n      }}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-md py-1.5 ps-2 pe-8 text-sm outline-none select-none\",\n        \"transition-colors duration-[var(--duration-instant)]\",\n        \"data-[active]:bg-accent data-[active]:text-accent-foreground\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-55\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <style href=\"dowel-combobox\" precedence=\"dowel\">\n        {ITEM_KEYFRAMES}\n      </style>\n      {children ?? value}\n      {selected ? (\n        <span className=\"absolute end-2 grid size-4 place-items-center\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n            <path\n              d=\"m5 13 4 4L19 7\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\n/** Shown only when the filter leaves nothing. */\nexport function ComboboxEmpty({ className, children, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { visibleCount, loading } = useCombobox(\"ComboboxEmpty\");\n  if (visibleCount > 0 || loading) return null;\n\n  return (\n    <div\n      data-slot=\"combobox-empty\"\n      role=\"presentation\"\n      className={cn(\"px-3 py-6 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? \"No results found.\"}\n    </div>\n  );\n}\n\n/**\n * Shown only while `loading` is set on Combobox. Render it beside ComboboxList,\n * as with ComboboxEmpty; pass a Spinner as a child if wanted.\n */\nexport function ComboboxLoading({\n  className,\n  children,\n  ...props\n}: ComponentPropsWithRef<\"div\">) {\n  const { loading } = useCombobox(\"ComboboxLoading\");\n  if (!loading) return null;\n\n  return (\n    <div\n      data-slot=\"combobox-loading\"\n      role=\"status\"\n      className={cn(\n        \"flex items-center justify-center gap-2 px-3 py-6 text-sm text-muted-foreground\",\n        \"animate-float-in\",\n        className,\n      )}\n      {...props}\n    >\n      {children ?? \"Loading…\"}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/combobox/index.d.ts

@@ -1,2 +1,2 @@
-import { Combobox, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxInput, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxList, ComboboxProps, ComboboxTrigger, ComboboxTriggerProps, defaultComboboxFilter } from "./combobox.js";
-export { Combobox, ComboboxContent, type ComboboxContentProps, ComboboxEmpty, ComboboxInput, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, ComboboxList, type ComboboxProps, ComboboxTrigger, type ComboboxTriggerProps, defaultComboboxFilter };
+import { Combobox, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxInput, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxList, ComboboxLoading, ComboboxProps, ComboboxTrigger, ComboboxTriggerProps, defaultComboboxFilter } from "./combobox.js";
+export { Combobox, ComboboxContent, type ComboboxContentProps, ComboboxEmpty, ComboboxInput, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, ComboboxList, ComboboxLoading, type ComboboxProps, ComboboxTrigger, type ComboboxTriggerProps, defaultComboboxFilter };

package/dist/components/combobox/index.js

@@ -1,2 +1,2 @@
-import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger, defaultComboboxFilter } from "./combobox.js";
-export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger, defaultComboboxFilter };
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxLoading, ComboboxTrigger, defaultComboboxFilter } from "./combobox.js";
+export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxLoading, ComboboxTrigger, defaultComboboxFilter };

package/dist/components/combobox/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["radix-ui"],
 	registryDependencies: [],
 	files: ["combobox.tsx"],
-	a11y: "The input owns role=\"combobox\" with aria-expanded, aria-controls and aria-autocomplete; the list owns role=\"listbox\" and each option role=\"option\" with aria-selected. Focus stays in the input while arrow keys move aria-activedescendant, so typing is never interrupted. Arrow navigation wraps, Home/End jump, Enter selects the active option and Escape closes."
+	a11y: "The input owns role=\"combobox\" with aria-expanded, aria-controls and aria-autocomplete; the list owns role=\"listbox\" and each option role=\"option\" with aria-selected. Focus stays in the input while arrow keys move aria-activedescendant, so typing is never interrupted. Arrow navigation wraps, Home/End jump, Enter selects the active option and Escape closes. With loading set, the listbox is aria-busy, ComboboxLoading is a status and the empty state waits for the answer. The optional clear button is a named button that returns focus to the input."
 });
 //#endregion
 export { meta };

package/dist/components/combobox/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/combobox/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"combobox\",\n  title: \"Combobox\",\n  description: \"A searchable single-select built on the ARIA combobox pattern.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"combobox.tsx\"],\n  a11y:\n    'The input owns role=\"combobox\" with aria-expanded, aria-controls and aria-autocomplete; ' +\n    'the list owns role=\"listbox\" and each option role=\"option\" with aria-selected. Focus stays ' +\n    \"in the input while arrow keys move aria-activedescendant, so typing is never interrupted. \" +\n    \"Arrow navigation wraps, Home/End jump, Enter selects the active option and Escape closes.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,cAAc;CACtB,MACE;AAIJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/combobox/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"combobox\",\n  title: \"Combobox\",\n  description: \"A searchable single-select built on the ARIA combobox pattern.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"combobox.tsx\"],\n  a11y:\n    'The input owns role=\"combobox\" with aria-expanded, aria-controls and aria-autocomplete; ' +\n    'the list owns role=\"listbox\" and each option role=\"option\" with aria-selected. Focus stays ' +\n    \"in the input while arrow keys move aria-activedescendant, so typing is never interrupted. \" +\n    \"Arrow navigation wraps, Home/End jump, Enter selects the active option and Escape closes.\" +\n    \" With loading set, the listbox is aria-busy, ComboboxLoading is a status and the empty state waits for the answer. The optional clear button is a named button that returns focus to the input.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,cAAc;CACtB,MACE;AAKJ,CAAC"}

package/dist/components/command/command.js

@@ -297,7 +297,7 @@ function CommandShortcut({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "command-shortcut",
 		"aria-hidden": "true",
-		className: cn("ml-auto text-2xs tracking-wide text-muted-foreground", className),
+		className: cn("ms-auto text-2xs tracking-wide text-muted-foreground", className),
 		...props
 	});
 }

package/dist/components/command/command.js.map

@@ -1 +1 @@
-{"version":3,"file":"command.js","names":[],"sources":["../../../src/components/command/command.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/dialog\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A searchable list of commands.\n *\n * Shares its navigation model with Combobox — the input owns `role=\"combobox\"`,\n * the list owns `role=\"listbox\"`, and the active item is tracked with\n * `aria-activedescendant` so focus never leaves the input. Ordering is read\n * from the DOM rather than a registry, which stays correct as filtering adds\n * and removes items.\n *\n * Unlike Combobox this has no selected value: items run actions. It also\n * supports groups, and a group whose items have all been filtered out hides its\n * own heading rather than leaving a label over nothing.\n */\n\n/** Default match: case-insensitive substring over the value and any keywords. */\nexport function defaultCommandFilter(search: string, haystack: string[]): boolean {\n  const needle = search.trim().toLowerCase();\n  if (!needle) return true;\n  return haystack.some((entry) => entry.toLowerCase().includes(needle));\n}\n\ninterface CommandContextValue {\n  search: string;\n  setSearch: (search: string) => void;\n  activeValue: string | undefined;\n  setActiveValue: (value: string | undefined) => void;\n  filter: (search: string, haystack: string[]) => boolean;\n  listId: string;\n  inputId: string;\n  optionId: (value: string) => string;\n  listRef: React.RefObject<HTMLDivElement | null>;\n  registerVisible: (value: string, visible: boolean) => void;\n  visibleCount: number;\n}\n\nconst CommandContext = createContext<CommandContextValue | null>(null);\n\nfunction useCommand(component: string): CommandContextValue {\n  const context = useContext(CommandContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <Command>.`);\n  }\n  return context;\n}\n\n/** Lets a group count how many of its own items survived the filter. */\nconst CommandGroupContext = createContext<((value: string, visible: boolean) => void) | null>(\n  null,\n);\n\n/** Counts visible entries by name, so re-registration cannot double-count. */\nfunction useVisibilityCounter() {\n  const visible = useRef(new Set<string>());\n  const [count, setCount] = useState(0);\n\n  const register = useCallback((value: string, isVisible: boolean) => {\n    const set = visible.current;\n    const had = set.has(value);\n    if (isVisible && !had) set.add(value);\n    else if (!isVisible && had) set.delete(value);\n    else return;\n    setCount(set.size);\n  }, []);\n\n  return { count, register };\n}\n\nexport interface CommandProps extends Omit<ComponentPropsWithRef<\"div\">, \"onSelect\"> {\n  /** Overrides how a search string is matched against an item. */\n  filter?: (search: string, haystack: string[]) => boolean;\n  /** Controls the search text. */\n  value?: string;\n  onValueChange?: (search: string) => void;\n}\n\nexport function Command({\n  className,\n  filter = defaultCommandFilter,\n  value,\n  onValueChange,\n  ...props\n}: CommandProps) {\n  const uid = useId();\n  const [uncontrolledSearch, setUncontrolledSearch] = useState(\"\");\n  const search = value ?? uncontrolledSearch;\n  const [activeValue, setActiveValue] = useState<string | undefined>(undefined);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const { count, register } = useVisibilityCounter();\n\n  const setSearch = useCallback(\n    (next: string) => {\n      if (value === undefined) setUncontrolledSearch(next);\n      onValueChange?.(next);\n    },\n    [value, onValueChange],\n  );\n\n  const context = useMemo<CommandContextValue>(\n    () => ({\n      search,\n      setSearch,\n      activeValue,\n      setActiveValue,\n      filter,\n      listId: `${uid}-list`,\n      inputId: `${uid}-input`,\n      optionId: (itemValue: string) =>\n        `${uid}-item-${itemValue.replace(/\\s+/g, \"-\").toLowerCase()}`,\n      listRef,\n      registerVisible: register,\n      visibleCount: count,\n    }),\n    [search, setSearch, activeValue, filter, uid, register, count],\n  );\n\n  return (\n    <CommandContext.Provider value={context}>\n      <div\n        data-slot=\"command\"\n        className={cn(\n          \"flex size-full flex-col overflow-hidden rounded-lg bg-popover text-popover-foreground\",\n          className,\n        )}\n        {...props}\n      />\n    </CommandContext.Provider>\n  );\n}\n\n/** Items currently rendered, in DOM order and excluding disabled ones. */\nfunction visibleItems(list: HTMLElement | null): HTMLElement[] {\n  if (!list) return [];\n  return Array.from(list.querySelectorAll<HTMLElement>('[role=\"option\"]:not([data-disabled])'));\n}\n\nexport type CommandInputProps = Omit<ComponentPropsWithRef<\"input\">, \"value\" | \"onChange\">;\n\nexport function CommandInput({ className, ...props }: CommandInputProps) {\n  const { search, setSearch, activeValue, setActiveValue, listId, inputId, optionId, listRef } =\n    useCommand(\"CommandInput\");\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  const move = useCallback(\n    (delta: number | \"first\" | \"last\") => {\n      const items = visibleItems(listRef.current);\n      if (items.length === 0) return;\n\n      const currentIndex = items.findIndex((item) => item.dataset.value === activeValue);\n\n      let nextIndex: number;\n      if (delta === \"first\") nextIndex = 0;\n      else if (delta === \"last\") nextIndex = items.length - 1;\n      else if (currentIndex === -1) nextIndex = delta > 0 ? 0 : items.length - 1;\n      else nextIndex = (currentIndex + delta + items.length) % items.length;\n\n      const next = items[nextIndex];\n      if (!next) return;\n      setActiveValue(next.dataset.value);\n      next.scrollIntoView({ block: \"nearest\" });\n    },\n    [activeValue, listRef, setActiveValue],\n  );\n\n  function handleKeyDown(event: ReactKeyboardEvent<HTMLInputElement>) {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        move(1);\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        move(-1);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        move(\"first\");\n        break;\n      case \"End\":\n        event.preventDefault();\n        move(\"last\");\n        break;\n      case \"Enter\": {\n        if (activeValue === undefined) return;\n        event.preventDefault();\n        // Running the item by clicking it keeps one code path for pointer and\n        // keyboard, so the two can never drift apart.\n        const item = visibleItems(listRef.current).find(\n          (candidate) => candidate.dataset.value === activeValue,\n        );\n        item?.click();\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  return (\n    <div className=\"flex items-center gap-2 border-b border-border px-3\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-4 shrink-0 opacity-55\"\n      >\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"m20 20-3.5-3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n      <input\n        ref={inputRef}\n        id={inputId}\n        data-slot=\"command-input\"\n        type=\"text\"\n        role=\"combobox\"\n        autoComplete=\"off\"\n        aria-expanded=\"true\"\n        aria-controls={listId}\n        aria-autocomplete=\"list\"\n        aria-activedescendant={activeValue ? optionId(activeValue) : undefined}\n        value={search}\n        onChange={(event) => {\n          setSearch(event.target.value);\n          // The active item may have just been filtered away.\n          setActiveValue(undefined);\n        }}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"h-11 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function CommandList({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { listId, listRef } = useCommand(\"CommandList\");\n\n  return (\n    <div\n      ref={listRef}\n      id={listId}\n      role=\"listbox\"\n      data-slot=\"command-list\"\n      className={cn(\"max-h-80 overflow-y-auto overscroll-contain p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CommandEmpty({ className, children, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { visibleCount } = useCommand(\"CommandEmpty\");\n  if (visibleCount > 0) return null;\n\n  return (\n    <div\n      data-slot=\"command-empty\"\n      role=\"presentation\"\n      className={cn(\"px-3 py-8 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? \"No results found.\"}\n    </div>\n  );\n}\n\nexport interface CommandGroupProps extends ComponentPropsWithRef<\"div\"> {\n  heading?: ReactNode;\n}\n\nexport function CommandGroup({ className, heading, children, ...props }: CommandGroupProps) {\n  const uid = useId();\n  const { count, register } = useVisibilityCounter();\n  const empty = count === 0;\n\n  return (\n    <div\n      data-slot=\"command-group\"\n      role=\"group\"\n      aria-labelledby={heading && !empty ? `${uid}-heading` : undefined}\n      // Hidden rather than unmounted: the items inside are what report whether\n      // anything matched, and unmounting them would stop the reports and leave\n      // the group permanently empty.\n      hidden={empty || undefined}\n      className={cn(\"py-1 first:pt-0\", className)}\n      {...props}\n    >\n      {heading && !empty ? (\n        <div\n          id={`${uid}-heading`}\n          className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\"\n        >\n          {heading}\n        </div>\n      ) : null}\n      <CommandGroupContext.Provider value={register}>{children}</CommandGroupContext.Provider>\n    </div>\n  );\n}\n\nexport interface CommandItemProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"onSelect\" | \"children\"\n> {\n  /** Identifies the item, and is the primary search term. */\n  value: string;\n  /** Extra search terms that are not shown. */\n  keywords?: string[];\n  disabled?: boolean;\n  onSelect?: (value: string) => void;\n  children?: ReactNode;\n}\n\nexport function CommandItem({\n  className,\n  value,\n  keywords,\n  disabled,\n  onSelect,\n  children,\n  ...props\n}: CommandItemProps) {\n  const { search, filter, activeValue, setActiveValue, optionId, registerVisible } =\n    useCommand(\"CommandItem\");\n  const registerInGroup = useContext(CommandGroupContext);\n\n  const haystack = useMemo(\n    () => [value, ...(keywords ?? []), typeof children === \"string\" ? children : \"\"],\n    [value, keywords, children],\n  );\n\n  const visible = filter(search, haystack);\n  const active = activeValue === value;\n  const counts = visible && !disabled;\n\n  useEffect(() => {\n    registerVisible(value, counts);\n    registerInGroup?.(value, counts);\n    return () => {\n      registerVisible(value, false);\n      registerInGroup?.(value, false);\n    };\n  }, [registerVisible, registerInGroup, value, counts]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      id={optionId(value)}\n      role=\"option\"\n      data-slot=\"command-item\"\n      data-value={value}\n      data-active={active || undefined}\n      data-disabled={disabled || undefined}\n      aria-selected={active}\n      aria-disabled={disabled || undefined}\n      // Programmatically focusable but never a tab stop: the input keeps focus\n      // and items are only virtually focused via aria-activedescendant.\n      tabIndex={-1}\n      onPointerMove={() => {\n        if (!disabled) setActiveValue(value);\n      }}\n      onMouseDown={(event) => {\n        // Keeps focus in the input, so aria-activedescendant stays valid and a\n        // hosting dialog does not close before the click lands.\n        event.preventDefault();\n      }}\n      onClick={() => {\n        if (!disabled) onSelect?.(value);\n      }}\n      onKeyDown={(event) => {\n        if (disabled) return;\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          onSelect?.(value);\n        }\n      }}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-md px-2 py-2 text-sm outline-none select-none\",\n        \"transition-colors duration-[var(--duration-instant)]\",\n        \"data-[active]:bg-accent data-[active]:text-accent-foreground\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-55\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children ?? value}\n    </div>\n  );\n}\n\nexport function CommandSeparator({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"command-separator\"\n      aria-hidden=\"true\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Keyboard hint. Decorative — bind the shortcut for real at the app level. */\nexport function CommandShortcut({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      aria-hidden=\"true\"\n      className={cn(\"ml-auto text-2xs tracking-wide text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface CommandDialogProps extends ComponentPropsWithRef<typeof Dialog> {\n  /** Names the dialog for assistive technology. Visually hidden by default. */\n  title?: string;\n  description?: string;\n  className?: string;\n}\n\n/**\n * The palette in a modal, for the ⌘K pattern.\n *\n * The title and description are rendered but visually hidden: a dialog needs an\n * accessible name whether or not the design shows one, and leaving it out is\n * the most common defect in hand-rolled command menus.\n */\nexport function CommandDialog({\n  title = \"Command palette\",\n  description = \"Search for a command to run.\",\n  children,\n  className,\n  ...props\n}: CommandDialogProps) {\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        showCloseButton={false}\n        className={cn(\"max-w-lg overflow-hidden p-0\", className)}\n      >\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <Command className=\"rounded-none\">{children}</Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"command.js","names":[],"sources":["../../../src/components/command/command.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/dialog\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A searchable list of commands.\n *\n * Shares its navigation model with Combobox — the input owns `role=\"combobox\"`,\n * the list owns `role=\"listbox\"`, and the active item is tracked with\n * `aria-activedescendant` so focus never leaves the input. Ordering is read\n * from the DOM rather than a registry, which stays correct as filtering adds\n * and removes items.\n *\n * Unlike Combobox this has no selected value: items run actions. It also\n * supports groups, and a group whose items have all been filtered out hides its\n * own heading rather than leaving a label over nothing.\n */\n\n/** Default match: case-insensitive substring over the value and any keywords. */\nexport function defaultCommandFilter(search: string, haystack: string[]): boolean {\n  const needle = search.trim().toLowerCase();\n  if (!needle) return true;\n  return haystack.some((entry) => entry.toLowerCase().includes(needle));\n}\n\ninterface CommandContextValue {\n  search: string;\n  setSearch: (search: string) => void;\n  activeValue: string | undefined;\n  setActiveValue: (value: string | undefined) => void;\n  filter: (search: string, haystack: string[]) => boolean;\n  listId: string;\n  inputId: string;\n  optionId: (value: string) => string;\n  listRef: React.RefObject<HTMLDivElement | null>;\n  registerVisible: (value: string, visible: boolean) => void;\n  visibleCount: number;\n}\n\nconst CommandContext = createContext<CommandContextValue | null>(null);\n\nfunction useCommand(component: string): CommandContextValue {\n  const context = useContext(CommandContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <Command>.`);\n  }\n  return context;\n}\n\n/** Lets a group count how many of its own items survived the filter. */\nconst CommandGroupContext = createContext<((value: string, visible: boolean) => void) | null>(\n  null,\n);\n\n/** Counts visible entries by name, so re-registration cannot double-count. */\nfunction useVisibilityCounter() {\n  const visible = useRef(new Set<string>());\n  const [count, setCount] = useState(0);\n\n  const register = useCallback((value: string, isVisible: boolean) => {\n    const set = visible.current;\n    const had = set.has(value);\n    if (isVisible && !had) set.add(value);\n    else if (!isVisible && had) set.delete(value);\n    else return;\n    setCount(set.size);\n  }, []);\n\n  return { count, register };\n}\n\nexport interface CommandProps extends Omit<ComponentPropsWithRef<\"div\">, \"onSelect\"> {\n  /** Overrides how a search string is matched against an item. */\n  filter?: (search: string, haystack: string[]) => boolean;\n  /** Controls the search text. */\n  value?: string;\n  onValueChange?: (search: string) => void;\n}\n\nexport function Command({\n  className,\n  filter = defaultCommandFilter,\n  value,\n  onValueChange,\n  ...props\n}: CommandProps) {\n  const uid = useId();\n  const [uncontrolledSearch, setUncontrolledSearch] = useState(\"\");\n  const search = value ?? uncontrolledSearch;\n  const [activeValue, setActiveValue] = useState<string | undefined>(undefined);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const { count, register } = useVisibilityCounter();\n\n  const setSearch = useCallback(\n    (next: string) => {\n      if (value === undefined) setUncontrolledSearch(next);\n      onValueChange?.(next);\n    },\n    [value, onValueChange],\n  );\n\n  const context = useMemo<CommandContextValue>(\n    () => ({\n      search,\n      setSearch,\n      activeValue,\n      setActiveValue,\n      filter,\n      listId: `${uid}-list`,\n      inputId: `${uid}-input`,\n      optionId: (itemValue: string) =>\n        `${uid}-item-${itemValue.replace(/\\s+/g, \"-\").toLowerCase()}`,\n      listRef,\n      registerVisible: register,\n      visibleCount: count,\n    }),\n    [search, setSearch, activeValue, filter, uid, register, count],\n  );\n\n  return (\n    <CommandContext.Provider value={context}>\n      <div\n        data-slot=\"command\"\n        className={cn(\n          \"flex size-full flex-col overflow-hidden rounded-lg bg-popover text-popover-foreground\",\n          className,\n        )}\n        {...props}\n      />\n    </CommandContext.Provider>\n  );\n}\n\n/** Items currently rendered, in DOM order and excluding disabled ones. */\nfunction visibleItems(list: HTMLElement | null): HTMLElement[] {\n  if (!list) return [];\n  return Array.from(list.querySelectorAll<HTMLElement>('[role=\"option\"]:not([data-disabled])'));\n}\n\nexport type CommandInputProps = Omit<ComponentPropsWithRef<\"input\">, \"value\" | \"onChange\">;\n\nexport function CommandInput({ className, ...props }: CommandInputProps) {\n  const { search, setSearch, activeValue, setActiveValue, listId, inputId, optionId, listRef } =\n    useCommand(\"CommandInput\");\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  const move = useCallback(\n    (delta: number | \"first\" | \"last\") => {\n      const items = visibleItems(listRef.current);\n      if (items.length === 0) return;\n\n      const currentIndex = items.findIndex((item) => item.dataset.value === activeValue);\n\n      let nextIndex: number;\n      if (delta === \"first\") nextIndex = 0;\n      else if (delta === \"last\") nextIndex = items.length - 1;\n      else if (currentIndex === -1) nextIndex = delta > 0 ? 0 : items.length - 1;\n      else nextIndex = (currentIndex + delta + items.length) % items.length;\n\n      const next = items[nextIndex];\n      if (!next) return;\n      setActiveValue(next.dataset.value);\n      next.scrollIntoView({ block: \"nearest\" });\n    },\n    [activeValue, listRef, setActiveValue],\n  );\n\n  function handleKeyDown(event: ReactKeyboardEvent<HTMLInputElement>) {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        move(1);\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        move(-1);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        move(\"first\");\n        break;\n      case \"End\":\n        event.preventDefault();\n        move(\"last\");\n        break;\n      case \"Enter\": {\n        if (activeValue === undefined) return;\n        event.preventDefault();\n        // Running the item by clicking it keeps one code path for pointer and\n        // keyboard, so the two can never drift apart.\n        const item = visibleItems(listRef.current).find(\n          (candidate) => candidate.dataset.value === activeValue,\n        );\n        item?.click();\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  return (\n    <div className=\"flex items-center gap-2 border-b border-border px-3\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-4 shrink-0 opacity-55\"\n      >\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"m20 20-3.5-3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n      <input\n        ref={inputRef}\n        id={inputId}\n        data-slot=\"command-input\"\n        type=\"text\"\n        role=\"combobox\"\n        autoComplete=\"off\"\n        aria-expanded=\"true\"\n        aria-controls={listId}\n        aria-autocomplete=\"list\"\n        aria-activedescendant={activeValue ? optionId(activeValue) : undefined}\n        value={search}\n        onChange={(event) => {\n          setSearch(event.target.value);\n          // The active item may have just been filtered away.\n          setActiveValue(undefined);\n        }}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"h-11 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function CommandList({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { listId, listRef } = useCommand(\"CommandList\");\n\n  return (\n    <div\n      ref={listRef}\n      id={listId}\n      role=\"listbox\"\n      data-slot=\"command-list\"\n      className={cn(\"max-h-80 overflow-y-auto overscroll-contain p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CommandEmpty({ className, children, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { visibleCount } = useCommand(\"CommandEmpty\");\n  if (visibleCount > 0) return null;\n\n  return (\n    <div\n      data-slot=\"command-empty\"\n      role=\"presentation\"\n      className={cn(\"px-3 py-8 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? \"No results found.\"}\n    </div>\n  );\n}\n\nexport interface CommandGroupProps extends ComponentPropsWithRef<\"div\"> {\n  heading?: ReactNode;\n}\n\nexport function CommandGroup({ className, heading, children, ...props }: CommandGroupProps) {\n  const uid = useId();\n  const { count, register } = useVisibilityCounter();\n  const empty = count === 0;\n\n  return (\n    <div\n      data-slot=\"command-group\"\n      role=\"group\"\n      aria-labelledby={heading && !empty ? `${uid}-heading` : undefined}\n      // Hidden rather than unmounted: the items inside are what report whether\n      // anything matched, and unmounting them would stop the reports and leave\n      // the group permanently empty.\n      hidden={empty || undefined}\n      className={cn(\"py-1 first:pt-0\", className)}\n      {...props}\n    >\n      {heading && !empty ? (\n        <div\n          id={`${uid}-heading`}\n          className=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\"\n        >\n          {heading}\n        </div>\n      ) : null}\n      <CommandGroupContext.Provider value={register}>{children}</CommandGroupContext.Provider>\n    </div>\n  );\n}\n\nexport interface CommandItemProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"onSelect\" | \"children\"\n> {\n  /** Identifies the item, and is the primary search term. */\n  value: string;\n  /** Extra search terms that are not shown. */\n  keywords?: string[];\n  disabled?: boolean;\n  onSelect?: (value: string) => void;\n  children?: ReactNode;\n}\n\nexport function CommandItem({\n  className,\n  value,\n  keywords,\n  disabled,\n  onSelect,\n  children,\n  ...props\n}: CommandItemProps) {\n  const { search, filter, activeValue, setActiveValue, optionId, registerVisible } =\n    useCommand(\"CommandItem\");\n  const registerInGroup = useContext(CommandGroupContext);\n\n  const haystack = useMemo(\n    () => [value, ...(keywords ?? []), typeof children === \"string\" ? children : \"\"],\n    [value, keywords, children],\n  );\n\n  const visible = filter(search, haystack);\n  const active = activeValue === value;\n  const counts = visible && !disabled;\n\n  useEffect(() => {\n    registerVisible(value, counts);\n    registerInGroup?.(value, counts);\n    return () => {\n      registerVisible(value, false);\n      registerInGroup?.(value, false);\n    };\n  }, [registerVisible, registerInGroup, value, counts]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      id={optionId(value)}\n      role=\"option\"\n      data-slot=\"command-item\"\n      data-value={value}\n      data-active={active || undefined}\n      data-disabled={disabled || undefined}\n      aria-selected={active}\n      aria-disabled={disabled || undefined}\n      // Programmatically focusable but never a tab stop: the input keeps focus\n      // and items are only virtually focused via aria-activedescendant.\n      tabIndex={-1}\n      onPointerMove={() => {\n        if (!disabled) setActiveValue(value);\n      }}\n      onMouseDown={(event) => {\n        // Keeps focus in the input, so aria-activedescendant stays valid and a\n        // hosting dialog does not close before the click lands.\n        event.preventDefault();\n      }}\n      onClick={() => {\n        if (!disabled) onSelect?.(value);\n      }}\n      onKeyDown={(event) => {\n        if (disabled) return;\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          onSelect?.(value);\n        }\n      }}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-md px-2 py-2 text-sm outline-none select-none\",\n        \"transition-colors duration-[var(--duration-instant)]\",\n        \"data-[active]:bg-accent data-[active]:text-accent-foreground\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-55\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children ?? value}\n    </div>\n  );\n}\n\nexport function CommandSeparator({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"command-separator\"\n      aria-hidden=\"true\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Keyboard hint. Decorative — bind the shortcut for real at the app level. */\nexport function CommandShortcut({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      aria-hidden=\"true\"\n      className={cn(\"ms-auto text-2xs tracking-wide text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface CommandDialogProps extends ComponentPropsWithRef<typeof Dialog> {\n  /** Names the dialog for assistive technology. Visually hidden by default. */\n  title?: string;\n  description?: string;\n  className?: string;\n}\n\n/**\n * The palette in a modal, for the ⌘K pattern.\n *\n * The title and description are rendered but visually hidden: a dialog needs an\n * accessible name whether or not the design shows one, and leaving it out is\n * the most common defect in hand-rolled command menus.\n */\nexport function CommandDialog({\n  title = \"Command palette\",\n  description = \"Search for a command to run.\",\n  children,\n  className,\n  ...props\n}: CommandDialogProps) {\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        showCloseButton={false}\n        className={cn(\"max-w-lg overflow-hidden p-0\", className)}\n      >\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <Command className=\"rounded-none\">{children}</Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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"}

package/dist/components/command-bar/command-bar.d.ts

@@ -0,0 +1,37 @@
+import { PromptInputProps } from "../ai-prompt-input/ai-prompt-input.js";
+import "../ai-prompt-input/index.js";
+import { VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
+//#region src/components/command-bar/command-bar.d.ts
+declare const commandBarVariants: (props?: ({
+  shape?: "pill" | "rounded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface CommandBarProps extends Omit<PromptInputProps, "onSubmit" | "children" | "busy">, VariantProps<typeof commandBarVariants> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** Called with the trimmed text. An uncontrolled bar then clears itself. */
+  onSend?: (value: string) => void;
+  /** A send is in flight: sending is blocked and the button becomes Stop. */
+  sending?: boolean;
+  onStop?: () => void;
+  /** Whether dictation is on. Omit `onDictatingChange` to hide the button. */
+  dictating?: boolean;
+  defaultDictating?: boolean;
+  onDictatingChange?: (dictating: boolean) => void;
+  placeholder?: string;
+  /** The field's accessible name. */
+  label?: string;
+  sendLabel?: string;
+  stopLabel?: string;
+  dictateLabel?: string;
+  /** Rows the field grows to before scrolling. */
+  maxRows?: number;
+  /** Slot before the field, e.g. an attach button. */
+  leading?: ReactNode;
+}
+/** A compact prompt bar: auto-growing field, dictate toggle and send. */
+declare function CommandBar({ className, shape, value: valueProp, defaultValue, onValueChange, onSend, sending, onStop, dictating: dictatingProp, defaultDictating, onDictatingChange, placeholder, label, sendLabel, stopLabel, dictateLabel, maxRows, leading, disabled, ...props }: CommandBarProps): import("react").JSX.Element;
+//#endregion
+export { CommandBar, CommandBarProps, commandBarVariants };
+//# sourceMappingURL=command-bar.d.ts.map

package/dist/components/command-bar/command-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-bar.d.ts","names":[],"sources":["../../../src/components/command-bar/command-bar.tsx"],"mappings":";;;;;cA2BM,qBAAkB;;6CAQtB;UAEe,wBAEb,KAAK,qDACL,oBAAoB;EACtB;EACA;EACA,iBAAiB;;EAEjB,UAAU;;EAEV;EACA;;EAEA;EACA;EACA,qBAAqB;EACrB;;EAEA;EACA;EACA;EACA;;EAEA;;EAEA,UAAU;;;iBAqBI,aACd,WACA,OACA,OAAO,WACP,cACA,eACA,QACA,SACA,QACA,WAAW,eACX,kBACA,mBACA,aACA,OACA,WACA,WACA,cACA,SACA,SACA,aACG,SACF,kCAAe,IAAA"}

package/dist/components/command-bar/command-bar.js

@@ -0,0 +1,91 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { PromptInput, PromptInputSubmit, PromptInputTextarea } from "../ai-prompt-input/ai-prompt-input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useState } from "react";
+//#region src/components/command-bar/command-bar.tsx
+const commandBarVariants = cva("flex items-end gap-1 p-1.5", {
+	variants: { shape: {
+		pill: "rounded-[1.5rem]",
+		rounded: "rounded-xl"
+	} },
+	defaultVariants: { shape: "pill" }
+});
+function Mic() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className: "size-4",
+		children: /* @__PURE__ */ jsx("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3ZM19 10v2a7 7 0 0 1-14 0v-2M12 19v3" })
+	});
+}
+/** A compact prompt bar: auto-growing field, dictate toggle and send. */
+function CommandBar({ className, shape, value: valueProp, defaultValue = "", onValueChange, onSend, sending = false, onStop, dictating: dictatingProp, defaultDictating = false, onDictatingChange, placeholder = "Ask anything…", label = "Message", sendLabel = "Send", stopLabel = "Stop", dictateLabel = "Dictate", maxRows = 6, leading, disabled = false, ...props }) {
+	const [inner, setInner] = useState(defaultValue);
+	const value = valueProp ?? inner;
+	const [innerDictating, setInnerDictating] = useState(defaultDictating);
+	const dictating = dictatingProp ?? innerDictating;
+	const empty = value.trim() === "";
+	function setValue(next) {
+		if (valueProp === void 0) setInner(next);
+		onValueChange?.(next);
+	}
+	function handleSubmit(event) {
+		event.preventDefault();
+		if (empty) return;
+		onSend?.(value.trim());
+		if (valueProp === void 0) setInner("");
+	}
+	return /* @__PURE__ */ jsxs(PromptInput, {
+		"data-slot": "command-bar",
+		busy: sending,
+		disabled,
+		onSubmit: handleSubmit,
+		className: cn(commandBarVariants({ shape }), className),
+		...props,
+		children: [
+			leading,
+			/* @__PURE__ */ jsx(PromptInputTextarea, {
+				"aria-label": label,
+				placeholder,
+				maxRows,
+				value,
+				onChange: (event) => {
+					setValue(event.target.value);
+				},
+				className: "min-h-9 flex-1 px-2.5 py-2 leading-5"
+			}),
+			onDictatingChange || dictatingProp !== void 0 ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": dictateLabel,
+				"aria-pressed": dictating,
+				disabled,
+				"data-slot": "command-bar-dictate",
+				className: cn("grid size-9 shrink-0 place-items-center rounded-full text-muted-foreground", "transition-[background-color,color] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", "hover:bg-accent hover:text-foreground aria-pressed:bg-destructive/12 aria-pressed:text-destructive", "disabled:pointer-events-none disabled:opacity-55", focusRing),
+				onClick: () => {
+					if (dictatingProp === void 0) setInnerDictating(!dictating);
+					onDictatingChange?.(!dictating);
+				},
+				children: /* @__PURE__ */ jsx(Mic, {})
+			}) : null,
+			/* @__PURE__ */ jsx(PromptInputSubmit, {
+				label: sendLabel,
+				stopLabel,
+				onStop,
+				disabled: disabled || !sending && empty,
+				className: "ms-0 size-9 rounded-full"
+			})
+		]
+	});
+}
+//#endregion
+export { CommandBar, commandBarVariants };
+
+//# sourceMappingURL=command-bar.js.map

package/dist/components/command-bar/command-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-bar.js","names":[],"sources":["../../../src/components/command-bar/command-bar.tsx"],"sourcesContent":["\"use client\";\n\n// Original design (pattern inspired by bencho Command bar; no code referenced).\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useState, type FormEvent, type ReactNode } from \"react\";\n\nimport {\n  PromptInput,\n  PromptInputSubmit,\n  PromptInputTextarea,\n  type PromptInputProps,\n} from \"@/components/ai-prompt-input\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A single-row prompt bar: an auto-growing field, a dictate toggle and send.\n *\n * This is a compact composition of AI Prompt Input, not a second composer.\n * Everything that is easy to get wrong — growing to a ceiling, Enter to send\n * and Shift+Enter for a newline, never sending mid-IME-composition, the\n * send/stop control whose name follows its state — is PromptInput's own. This\n * adds only the layout (one pill row, controls aligned to the last line), a\n * controlled-or-not value that clears after sending, an empty-field guard, and\n * the dictate toggle (aria-pressed; the consumer owns the microphone).\n */\n\nconst commandBarVariants = cva(\"flex items-end gap-1 p-1.5\", {\n  variants: {\n    shape: {\n      pill: \"rounded-[1.5rem]\",\n      rounded: \"rounded-xl\",\n    },\n  },\n  defaultVariants: { shape: \"pill\" },\n});\n\nexport interface CommandBarProps\n  extends\n    Omit<PromptInputProps, \"onSubmit\" | \"children\" | \"busy\">,\n    VariantProps<typeof commandBarVariants> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Called with the trimmed text. An uncontrolled bar then clears itself. */\n  onSend?: (value: string) => void;\n  /** A send is in flight: sending is blocked and the button becomes Stop. */\n  sending?: boolean;\n  onStop?: () => void;\n  /** Whether dictation is on. Omit `onDictatingChange` to hide the button. */\n  dictating?: boolean;\n  defaultDictating?: boolean;\n  onDictatingChange?: (dictating: boolean) => void;\n  placeholder?: string;\n  /** The field's accessible name. */\n  label?: string;\n  sendLabel?: string;\n  stopLabel?: string;\n  dictateLabel?: string;\n  /** Rows the field grows to before scrolling. */\n  maxRows?: number;\n  /** Slot before the field, e.g. an attach button. */\n  leading?: ReactNode;\n}\n\nfunction Mic() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      className=\"size-4\"\n    >\n      <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3ZM19 10v2a7 7 0 0 1-14 0v-2M12 19v3\" />\n    </svg>\n  );\n}\n\n/** A compact prompt bar: auto-growing field, dictate toggle and send. */\nexport function CommandBar({\n  className,\n  shape,\n  value: valueProp,\n  defaultValue = \"\",\n  onValueChange,\n  onSend,\n  sending = false,\n  onStop,\n  dictating: dictatingProp,\n  defaultDictating = false,\n  onDictatingChange,\n  placeholder = \"Ask anything…\",\n  label = \"Message\",\n  sendLabel = \"Send\",\n  stopLabel = \"Stop\",\n  dictateLabel = \"Dictate\",\n  maxRows = 6,\n  leading,\n  disabled = false,\n  ...props\n}: CommandBarProps) {\n  const [inner, setInner] = useState(defaultValue);\n  const value = valueProp ?? inner;\n  const [innerDictating, setInnerDictating] = useState(defaultDictating);\n  const dictating = dictatingProp ?? innerDictating;\n  const empty = value.trim() === \"\";\n\n  function setValue(next: string) {\n    if (valueProp === undefined) setInner(next);\n    onValueChange?.(next);\n  }\n\n  function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    if (empty) return;\n    onSend?.(value.trim());\n    if (valueProp === undefined) setInner(\"\");\n  }\n\n  return (\n    <PromptInput\n      data-slot=\"command-bar\"\n      busy={sending}\n      disabled={disabled}\n      onSubmit={handleSubmit}\n      className={cn(commandBarVariants({ shape }), className)}\n      {...props}\n    >\n      {leading}\n      <PromptInputTextarea\n        aria-label={label}\n        placeholder={placeholder}\n        maxRows={maxRows}\n        value={value}\n        onChange={(event) => {\n          setValue(event.target.value);\n        }}\n        className=\"min-h-9 flex-1 px-2.5 py-2 leading-5\"\n      />\n      {onDictatingChange || dictatingProp !== undefined ? (\n        <button\n          type=\"button\"\n          aria-label={dictateLabel}\n          aria-pressed={dictating}\n          disabled={disabled}\n          data-slot=\"command-bar-dictate\"\n          className={cn(\n            \"grid size-9 shrink-0 place-items-center rounded-full text-muted-foreground\",\n            \"transition-[background-color,color] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n            \"hover:bg-accent hover:text-foreground aria-pressed:bg-destructive/12 aria-pressed:text-destructive\",\n            \"disabled:pointer-events-none disabled:opacity-55\",\n            focusRing,\n          )}\n          onClick={() => {\n            if (dictatingProp === undefined) setInnerDictating(!dictating);\n            onDictatingChange?.(!dictating);\n          }}\n        >\n          <Mic />\n        </button>\n      ) : null}\n      <PromptInputSubmit\n        label={sendLabel}\n        stopLabel={stopLabel}\n        onStop={onStop}\n        disabled={disabled || (!sending && empty)}\n        className=\"ms-0 size-9 rounded-full\"\n      />\n    </PromptInput>\n  );\n}\n\nexport { commandBarVariants };\n"],"mappings":";;;;;;;;AA2BA,MAAM,qBAAqB,IAAI,8BAA8B;CAC3D,UAAU,EACR,OAAO;EACL,MAAM;EACN,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CAAC;AA8BD,SAAS,MAAM;CACb,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EACf,eAAY;EACZ,WAAU;EAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,yFAA0F,CAAA;CAC/F,CAAA;AAET;;AAGA,SAAgB,WAAW,EACzB,WACA,OACA,OAAO,WACP,eAAe,IACf,eACA,QACA,UAAU,OACV,QACA,WAAW,eACX,mBAAmB,OACnB,mBACA,cAAc,iBACd,QAAQ,WACR,YAAY,QACZ,YAAY,QACZ,eAAe,WACf,UAAU,GACV,SACA,WAAW,OACX,GAAG,SACe;CAClB,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAC/C,MAAM,QAAQ,aAAa;CAC3B,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,gBAAgB;CACrE,MAAM,YAAY,iBAAiB;CACnC,MAAM,QAAQ,MAAM,KAAK,MAAM;CAE/B,SAAS,SAAS,MAAc;EAC9B,IAAI,cAAc,KAAA,GAAW,SAAS,IAAI;EAC1C,gBAAgB,IAAI;CACtB;CAEA,SAAS,aAAa,OAAmC;EACvD,MAAM,eAAe;EACrB,IAAI,OAAO;EACX,SAAS,MAAM,KAAK,CAAC;EACrB,IAAI,cAAc,KAAA,GAAW,SAAS,EAAE;CAC1C;CAEA,OACE,qBAAC,aAAD;EACE,aAAU;EACV,MAAM;EACI;EACV,UAAU;EACV,WAAW,GAAG,mBAAmB,EAAE,MAAM,CAAC,GAAG,SAAS;EACtD,GAAI;EANN,UAAA;GAQG;GACD,oBAAC,qBAAD;IACE,cAAY;IACC;IACJ;IACF;IACP,WAAW,UAAU;KACnB,SAAS,MAAM,OAAO,KAAK;IAC7B;IACA,WAAU;GACX,CAAA;GACA,qBAAqB,kBAAkB,KAAA,IACtC,oBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,gBAAc;IACJ;IACV,aAAU;IACV,WAAW,GACT,8EACA,oGACA,sGACA,oDACA,SACF;IACA,eAAe;KACb,IAAI,kBAAkB,KAAA,GAAW,kBAAkB,CAAC,SAAS;KAC7D,oBAAoB,CAAC,SAAS;IAChC;IAEA,UAAA,oBAAC,KAAD,CAAM,CAAA;GACA,CAAA,IACN;GACJ,oBAAC,mBAAD;IACE,OAAO;IACI;IACH;IACR,UAAU,YAAa,CAAC,WAAW;IACnC,WAAU;GACX,CAAA;EACU;;AAEjB"}

package/dist/components/command-bar/index.d.ts

@@ -0,0 +1,2 @@
+import { CommandBar, CommandBarProps, commandBarVariants } from "./command-bar.js";
+export { CommandBar, type CommandBarProps, commandBarVariants };

package/dist/components/command-bar/index.js

@@ -0,0 +1,2 @@
+import { CommandBar, commandBarVariants } from "./command-bar.js";
+export { CommandBar, commandBarVariants };

package/dist/components/command-bar/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/command-bar/meta.ts
+const meta = defineMeta({
+	name: "command-bar",
+	title: "Command Bar",
+	description: "A compact one-row prompt bar — auto-growing field, dictate toggle and send — composed from AI Prompt Input.",
+	category: "ai",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["ai-prompt-input"],
+	files: ["command-bar.tsx"],
+	a11y: "Inherits AI Prompt Input's behaviour: Enter sends, Shift+Enter adds a newline, never mid-IME-composition, and the submit control renames itself to \"Stop\" while sending. The field is named by `label`. Send is disabled while the field is empty. Dictate is a toggle button (aria-pressed); the consumer owns the microphone."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/command-bar/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/command-bar/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"command-bar\",\n  title: \"Command Bar\",\n  description:\n    \"A compact one-row prompt bar — auto-growing field, dictate toggle and send — composed from AI Prompt Input.\",\n  category: \"ai\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"ai-prompt-input\"],\n  files: [\"command-bar.tsx\"],\n  a11y:\n    \"Inherits AI Prompt Input's behaviour: Enter sends, Shift+Enter adds a newline, never mid-IME-composition, \" +\n    'and the submit control renames itself to \"Stop\" while sending. The field is named by `label`. Send is ' +\n    \"disabled while the field is empty. Dictate is a toggle button (aria-pressed); the consumer owns the microphone.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,iBAAiB;CACxC,OAAO,CAAC,iBAAiB;CACzB,MACE;AAGJ,CAAC"}

package/dist/components/comment-bubble/comment-bubble.d.ts

@@ -0,0 +1,32 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/components/comment-bubble/comment-bubble.d.ts
+interface CommentBubbleAuthor {
+  name: string;
+  /** Avatar image URL. Initials are shown without one, or while it loads. */
+  avatarUrl?: string;
+}
+interface CommentBubbleComment {
+  id: string;
+  author: CommentBubbleAuthor;
+  message: string;
+  /** Pre-formatted, e.g. "Just now" or "2h". */
+  timestamp?: string;
+}
+interface CommentBubbleProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** The thread. The first comment's author is the pin's avatar. */
+  comments: CommentBubbleComment[];
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** The expanded bubble's width. Numbers are pixels. */
+  width?: number | string;
+  /** Shows a reply composer; called with the trimmed reply. */
+  onReply?: (message: string) => void;
+  /** The reply field's accessible name and placeholder. */
+  replyLabel?: string;
+}
+/** An avatar pin that expands into a comment thread. */
+declare function CommentBubble({ className, comments, open: openProp, defaultOpen, onOpenChange, width, onReply, replyLabel, ...props }: CommentBubbleProps): import("react").JSX.Element | null;
+//#endregion
+export { CommentBubble, CommentBubbleAuthor, CommentBubbleComment, CommentBubbleProps };
+//# sourceMappingURL=comment-bubble.d.ts.map

package/dist/components/comment-bubble/comment-bubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comment-bubble.d.ts","names":[],"sources":["../../../src/components/comment-bubble/comment-bubble.tsx"],"mappings":";;UA4BiB;EACf;;EAEA;;UAGe;EACf;EACA,QAAQ;EACR;;EAEA;;UAGe,2BAA2B,KAAK;;EAE/C,UAAU;EACV;EACA;EACA,gBAAgB;;EAEhB;;EAEA,WAAW;;EAEX;;;iBAwBc,gBACd,WACA,UACA,MAAM,UACN,aACA,cACA,OACA,SACA,eACG,SACF,qCAAkB,IAAA"}