@cloudflare/kumo 1.3.0 → 1.4.0

package/dist/collapsible-OBNkTO48.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-OBNkTO48.js","sources":["../src/components/collapsible/collapsible.tsx"],"sourcesContent":["import { CaretDownIcon } from \"@phosphor-icons/react\";\nimport { type PropsWithChildren, forwardRef, useCallback, useId } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_COLLAPSIBLE_VARIANTS = {} as const;\n\nexport const KUMO_COLLAPSIBLE_DEFAULT_VARIANTS = {} as const;\n\nexport interface KumoCollapsibleVariantsProps {}\n\nexport function collapsibleVariants(_props: KumoCollapsibleVariantsProps = {}) {\n  return cn(\n    // Base styles for the trigger\n    \"flex cursor-pointer items-center gap-1 text-sm text-kumo-link select-none\",\n  );\n}\n\nexport type CollapsibleProps = PropsWithChildren<\n  KumoCollapsibleVariantsProps & {\n    /** Text label displayed in the trigger button */\n    label: string;\n    /** Whether the collapsible content is visible */\n    open?: boolean;\n    /** Callback fired when the open state changes */\n    onOpenChange?: (open: boolean) => void;\n    /** Additional CSS classes for the content panel */\n    className?: string;\n  }\n>;\n\n/**\n * Collapsible component for showing/hiding content.\n *\n * Features:\n * - Animated chevron indicator (rotates 180° when open)\n * - Accessible with aria-expanded and aria-controls\n * - Content panel with left border accent\n *\n * @example\n * ```tsx\n * const [open, setOpen] = useState(false);\n *\n * <Collapsible label=\"Show details\" open={open} onOpenChange={setOpen}>\n *   <Text>Hidden content revealed when expanded.</Text>\n * </Collapsible>\n * ```\n *\n * @example Controlled accordion pattern\n * ```tsx\n * const [activeIndex, setActiveIndex] = useState<number | null>(null);\n *\n * {items.map((item, i) => (\n *   <Collapsible\n *     key={i}\n *     label={item.title}\n *     open={activeIndex === i}\n *     onOpenChange={(open) => setActiveIndex(open ? i : null)}\n *   >\n *     {item.content}\n *   </Collapsible>\n * ))}\n * ```\n */\nexport const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(\n  ({ label, open, onOpenChange, children, className }, ref) => {\n    const contentId = useId();\n\n    const handleOpen = useCallback(() => {\n      onOpenChange?.(!open);\n    }, [open, onOpenChange]);\n\n    return (\n      <div ref={ref}>\n        <button\n          type=\"button\"\n          aria-expanded={open}\n          aria-controls={contentId}\n          className={collapsibleVariants()}\n          onClick={handleOpen}\n        >\n          {label}{\" \"}\n          <CaretDownIcon\n            className={cn(\"h-4 w-4 transition-transform\", open && \"rotate-180\")}\n          />\n        </button>\n        {open && (\n          <div\n            id={contentId}\n            className={cn(\n              \"my-2 space-y-4 border-l-2 border-kumo-fill pl-4\",\n              className,\n            )}\n          >\n            {children}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nCollapsible.displayName = \"Collapsible\";\n"],"names":["collapsibleVariants","_props","cn","Collapsible","forwardRef","label","open","onOpenChange","children","className","ref","contentId","useId","handleOpen","useCallback","jsxs","jsx","CaretDownIcon"],"mappings":";;;;;AAUO,SAASA,EAAoBC,IAAuC,IAAI;AAC7E,SAAOC;AAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAgDO,MAAMC,IAAcC;AAAA,EACzB,CAAC,EAAE,OAAAC,GAAO,MAAAC,GAAM,cAAAC,GAAc,UAAAC,GAAU,WAAAC,EAAA,GAAaC,MAAQ;AAC3D,UAAMC,IAAYC,EAAA,GAEZC,IAAaC,EAAY,MAAM;AACnC,MAAAP,IAAe,CAACD,CAAI;AAAA,IACtB,GAAG,CAACA,GAAMC,CAAY,CAAC;AAEvB,WACE,gBAAAQ,EAAC,SAAI,KAAAL,GACH,UAAA;AAAA,MAAA,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,iBAAeT;AAAA,UACf,iBAAeK;AAAA,UACf,WAAWX,EAAA;AAAA,UACX,SAASa;AAAA,UAER,UAAA;AAAA,YAAAR;AAAA,YAAO;AAAA,YACR,gBAAAW;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,WAAWf,EAAG,gCAAgCI,KAAQ,YAAY;AAAA,cAAA;AAAA,YAAA;AAAA,UACpE;AAAA,QAAA;AAAA,MAAA;AAAA,MAEDA,KACC,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIL;AAAA,UACJ,WAAWT;AAAA,YACT;AAAA,YACAO;AAAA,UAAA;AAAA,UAGD,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AAEAL,EAAY,cAAc;"}
+{"version":3,"file":"collapsible-OBNkTO48.js","sources":["../src/components/collapsible/collapsible.tsx"],"sourcesContent":["import { CaretDownIcon } from \"@phosphor-icons/react\";\nimport { type PropsWithChildren, forwardRef, useCallback, useId } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_COLLAPSIBLE_VARIANTS = {} as const;\n\nexport const KUMO_COLLAPSIBLE_DEFAULT_VARIANTS = {} as const;\n\nexport interface KumoCollapsibleVariantsProps {}\n\nexport function collapsibleVariants(_props: KumoCollapsibleVariantsProps = {}) {\n  return cn(\n    // Base styles for the trigger\n    \"flex cursor-pointer items-center gap-1 text-sm text-kumo-link select-none\",\n  );\n}\n\n/**\n * Collapsible component props.\n *\n * @example\n * ```tsx\n * <Collapsible label=\"Show details\" open={open} onOpenChange={setOpen}>\n *   <Text>Hidden content revealed when expanded.</Text>\n * </Collapsible>\n * ```\n */\nexport type CollapsibleProps = PropsWithChildren<\n  KumoCollapsibleVariantsProps & {\n    /** Text label displayed in the trigger button */\n    label: string;\n    /** Whether the collapsible content is visible */\n    open?: boolean;\n    /** Callback fired when the open state changes */\n    onOpenChange?: (open: boolean) => void;\n    /** Additional CSS classes for the content panel */\n    className?: string;\n  }\n>;\n\n/**\n * Collapsible component for showing/hiding content.\n *\n * Features:\n * - Animated chevron indicator (rotates 180° when open)\n * - Accessible with aria-expanded and aria-controls\n * - Content panel with left border accent\n *\n * @example\n * ```tsx\n * const [open, setOpen] = useState(false);\n *\n * <Collapsible label=\"Show details\" open={open} onOpenChange={setOpen}>\n *   <Text>Hidden content revealed when expanded.</Text>\n * </Collapsible>\n * ```\n *\n * @example Controlled accordion pattern\n * ```tsx\n * const [activeIndex, setActiveIndex] = useState<number | null>(null);\n *\n * {items.map((item, i) => (\n *   <Collapsible\n *     key={i}\n *     label={item.title}\n *     open={activeIndex === i}\n *     onOpenChange={(open) => setActiveIndex(open ? i : null)}\n *   >\n *     {item.content}\n *   </Collapsible>\n * ))}\n * ```\n */\nexport const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(\n  ({ label, open, onOpenChange, children, className }, ref) => {\n    const contentId = useId();\n\n    const handleOpen = useCallback(() => {\n      onOpenChange?.(!open);\n    }, [open, onOpenChange]);\n\n    return (\n      <div ref={ref}>\n        <button\n          type=\"button\"\n          aria-expanded={open}\n          aria-controls={contentId}\n          className={collapsibleVariants()}\n          onClick={handleOpen}\n        >\n          {label}{\" \"}\n          <CaretDownIcon\n            className={cn(\"h-4 w-4 transition-transform\", open && \"rotate-180\")}\n          />\n        </button>\n        {open && (\n          <div\n            id={contentId}\n            className={cn(\n              \"my-2 space-y-4 border-l-2 border-kumo-fill pl-4\",\n              className,\n            )}\n          >\n            {children}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nCollapsible.displayName = \"Collapsible\";\n"],"names":["collapsibleVariants","_props","cn","Collapsible","forwardRef","label","open","onOpenChange","children","className","ref","contentId","useId","handleOpen","useCallback","jsxs","jsx","CaretDownIcon"],"mappings":";;;;;AAUO,SAASA,EAAoBC,IAAuC,IAAI;AAC7E,SAAOC;AAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AA0DO,MAAMC,IAAcC;AAAA,EACzB,CAAC,EAAE,OAAAC,GAAO,MAAAC,GAAM,cAAAC,GAAc,UAAAC,GAAU,WAAAC,EAAA,GAAaC,MAAQ;AAC3D,UAAMC,IAAYC,EAAA,GAEZC,IAAaC,EAAY,MAAM;AACnC,MAAAP,IAAe,CAACD,CAAI;AAAA,IACtB,GAAG,CAACA,GAAMC,CAAY,CAAC;AAEvB,WACE,gBAAAQ,EAAC,SAAI,KAAAL,GACH,UAAA;AAAA,MAAA,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,iBAAeT;AAAA,UACf,iBAAeK;AAAA,UACf,WAAWX,EAAA;AAAA,UACX,SAASa;AAAA,UAER,UAAA;AAAA,YAAAR;AAAA,YAAO;AAAA,YACR,gBAAAW;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,WAAWf,EAAG,gCAAgCI,KAAQ,YAAY;AAAA,cAAA;AAAA,YAAA;AAAA,UACpE;AAAA,QAAA;AAAA,MAAA;AAAA,MAEDA,KACC,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIL;AAAA,UACJ,WAAWT;AAAA,YACT;AAAA,YACAO;AAAA,UAAA;AAAA,UAGD,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AAEAL,EAAY,cAAc;"}

package/dist/combobox-CWxn5aHA.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-CWxn5aHA.js","sources":["../src/components/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as ComboboxBase } from \"@base-ui/react/combobox\";\nimport { CaretDownIcon, CheckIcon, XIcon } from \"@phosphor-icons/react\";\nimport { Fragment, type PropsWithChildren, type ReactNode } from \"react\";\nimport { inputVariants } from \"../input/input\";\nimport { cn } from \"../../utils/cn\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\nexport const KUMO_COMBOBOX_VARIANTS = {\n  inputSide: {\n    right: {\n      classes: \"\",\n      description: \"Input positioned inline to the right of chips\",\n    },\n    top: {\n      classes: \"\",\n      description: \"Input positioned above chips\",\n    },\n  },\n} as const;\n\nexport const KUMO_COMBOBOX_DEFAULT_VARIANTS = {\n  inputSide: \"right\",\n} as const;\n\n// Derived types from KUMO_COMBOBOX_VARIANTS\nexport type KumoComboboxInputSide =\n  keyof typeof KUMO_COMBOBOX_VARIANTS.inputSide;\n\nexport interface KumoComboboxVariantsProps {\n  inputSide?: KumoComboboxInputSide;\n}\n\nexport function comboboxVariants({\n  inputSide = KUMO_COMBOBOX_DEFAULT_VARIANTS.inputSide,\n}: KumoComboboxVariantsProps = {}) {\n  return cn(KUMO_COMBOBOX_VARIANTS.inputSide[inputSide].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type ComboboxInputSide = KumoComboboxInputSide;\n\nexport type ComboboxRootProps<\n  Value = unknown,\n  Multiple extends boolean | undefined = false,\n> = ComboboxBase.Root.Props<Value, Multiple>;\n\n// Simplified props type for AI/documentation (non-generic)\nexport interface ComboboxProps extends KumoComboboxVariantsProps {\n  /** Array of items to display in the dropdown */\n  items: unknown[];\n  /** Currently selected value(s) */\n  value?: unknown;\n  /** Callback when selection changes */\n  onValueChange?: (value: unknown) => void;\n  /** Enable multi-select mode */\n  multiple?: boolean;\n  /** Combobox content (trigger, content, items) */\n  children: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label content for the combobox (enables Field wrapper) - can be a string or any React node */\n  label?: ReactNode;\n  /** Whether the combobox is required */\n  required?: boolean;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the combobox */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\nfunction Root<Value, Multiple extends boolean | undefined = false>({\n  label,\n  required,\n  labelTooltip,\n  description,\n  error,\n  children,\n  ...props\n}: ComboboxBase.Root.Props<Value, Multiple> & {\n  label?: ReactNode;\n  required?: boolean;\n  labelTooltip?: ReactNode;\n  description?: ReactNode;\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}) {\n  const comboboxControl = (\n    <ComboboxBase.Root {...props}>{children}</ComboboxBase.Root>\n  );\n\n  // Render with Field wrapper if label, description, or error are provided\n  if (label) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {comboboxControl}\n      </Field>\n    );\n  }\n\n  // Render bare combobox without Field wrapper\n  return comboboxControl;\n}\n\nfunction Content({\n  children,\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  alignOffset,\n  side,\n}: PropsWithChildren<{\n  className?: string;\n  align?: ComboboxBase.Positioner.Props[\"align\"];\n  alignOffset?: ComboboxBase.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxBase.Positioner.Props[\"side\"];\n  sideOffset?: ComboboxBase.Positioner.Props[\"sideOffset\"];\n}>) {\n  return (\n    <ComboboxBase.Portal>\n      <ComboboxBase.Positioner\n        className=\"z-50 outline-none\"\n        align={align}\n        sideOffset={sideOffset}\n        alignOffset={alignOffset}\n        side={side}\n      >\n        <ComboboxBase.Popup\n          className={cn(\n            \"max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) scroll-pt-2 scroll-pb-2 overflow-y-auto overscroll-contain p-1.5\",\n            \"z-50 overflow-hidden bg-kumo-control text-kumo-default\", // background\n            \"rounded-lg shadow-lg ring ring-kumo-line\", // border part\n            className,\n          )}\n        >\n          {children}\n        </ComboboxBase.Popup>\n      </ComboboxBase.Positioner>\n    </ComboboxBase.Portal>\n  );\n}\n\nfunction TriggerValue({\n  className,\n  ...props\n}: ComboboxBase.Value.Props & { className?: string }) {\n  return (\n    <ComboboxBase.Trigger\n      className={cn(\n        inputVariants(),\n        \"relative flex items-center pr-8\",\n        className,\n      )}\n    >\n      <ComboboxBase.Value>{props.children}</ComboboxBase.Value>\n      <ComboboxBase.Icon className=\"absolute top-1/2 right-2 -translate-y-1/2\">\n        <CaretDownIcon className=\"fill-kumo-ring\" />\n      </ComboboxBase.Icon>\n    </ComboboxBase.Trigger>\n  );\n}\n\nfunction TriggerInput(props: ComboboxBase.Input.Props) {\n  return (\n    <div\n      className={cn(\"relative inline-block w-full max-w-xs\", props.className)}\n    >\n      <ComboboxBase.Input\n        {...props}\n        className={cn(inputVariants(), \"w-full pr-12\")}\n      />\n\n      <ComboboxBase.Clear className=\"absolute top-1/2 right-8 flex -translate-y-1/2 cursor-pointer bg-transparent p-0\">\n        <XIcon />\n      </ComboboxBase.Clear>\n\n      <ComboboxBase.Trigger className=\"p-0\">\n        <ComboboxBase.Icon className=\"absolute top-1/2 right-2 flex -translate-y-1/2 cursor-pointer\">\n          <CaretDownIcon className=\"fill-kumo-ring\" />\n        </ComboboxBase.Icon>\n      </ComboboxBase.Trigger>\n    </div>\n  );\n}\n\nfunction Item({ children, ...props }: ComboboxBase.Item.Props) {\n  return (\n    <ComboboxBase.Item\n      {...props}\n      className=\"group grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay\"\n    >\n      <div className=\"col-start-1\">{children}</div>\n      <ComboboxBase.ItemIndicator className=\"col-start-2 flex items-center\">\n        <CheckIcon />\n      </ComboboxBase.ItemIndicator>\n    </ComboboxBase.Item>\n  );\n}\n\nfunction Empty(props: ComboboxBase.Empty.Props) {\n  return (\n    <ComboboxBase.Empty\n      {...props}\n      className={cn(\n        \"px-4 py-2 text-[0.925rem] leading-4 text-kumo-subtle empty:m-0 empty:p-0\",\n      )}\n      children={props.children ?? \"No labels found.\"}\n    />\n  );\n}\n\nfunction Input(props: ComboboxBase.Input.Props) {\n  return (\n    <ComboboxBase.Input\n      {...props}\n      className={cn(inputVariants(), \"w-full first:mb-2\", props.className)}\n    />\n  );\n}\n\nfunction GroupLabel(props: ComboboxBase.GroupLabel.Props) {\n  return (\n    <ComboboxBase.GroupLabel\n      {...props}\n      className=\"ml-[16px] px-4 py-1.5 text-sm font-medium\"\n    />\n  );\n}\n\nfunction Group(props: ComboboxBase.Group.Props) {\n  return <ComboboxBase.Group {...props} className=\"mt-2 first:mt-0\" />;\n}\n\nfunction Chip(props: ComboboxBase.Chip.Props) {\n  return (\n    <ComboboxBase.Chip\n      {...props}\n      className=\"flex items-center gap-1 rounded-md bg-kumo-overlay px-2 py-1\"\n    >\n      {props.children}\n      <ComboboxBase.ChipRemove className=\"cursor-pointer rounded-md p-1 hover:bg-kumo-fill-hover\">\n        <XIcon size={12} weight=\"bold\" />\n      </ComboboxBase.ChipRemove>\n    </ComboboxBase.Chip>\n  );\n}\n\nfunction TriggerMultipleWithInput<ValueType>({\n  placeholder,\n  renderItem,\n  className,\n  inputSide = \"right\",\n  value: controlledValue,\n}: {\n  placeholder?: string;\n  renderItem: (value: ValueType) => React.ReactNode;\n  className?: string;\n  inputSide?: \"right\" | \"top\";\n  /** Optional controlled value for rendering chips (use when pre-selecting values) */\n  value?: ValueType[];\n}) {\n  // Determine which value to use for rendering chips\n  const chipsToRender = controlledValue;\n\n  return (\n    <ComboboxBase.Chips\n      className={cn(\n        inputVariants(),\n        cn(\"flex flex-col\", \"gap-1 p-1\", \"min-h-9\", \"h-auto\"),\n        className,\n      )}\n    >\n      {inputSide === \"top\" && (\n        <ComboboxBase.Input\n          placeholder={placeholder}\n          className=\"w-full px-2 py-1 outline-none\"\n        />\n      )}\n      {/* Chips container */}\n      <div className=\"flex flex-wrap gap-1\">\n        {/* Render chips from controlled value if provided */}\n        {chipsToRender !== undefined &&\n          chipsToRender.length > 0 &&\n          chipsToRender.map((item) => renderItem(item))}\n        {/* Also render from BaseUI's internal value for user selections */}\n        <ComboboxBase.Value>\n          {(internalValue: ValueType[]) => {\n            // Skip rendering if using controlled value (to avoid duplicates)\n            if (chipsToRender !== undefined) return null;\n            return (\n              <Fragment>\n                {internalValue.map((item) => renderItem(item))}\n              </Fragment>\n            );\n          }}\n        </ComboboxBase.Value>\n        {inputSide === \"right\" && (\n          <ComboboxBase.Input\n            placeholder={placeholder}\n            className=\"min-w-[100px] flex-1 px-2 py-1 outline-none\"\n          />\n        )}\n      </div>\n    </ComboboxBase.Chips>\n  );\n}\n\nRoot.displayName = \"Combobox.Root\";\nContent.displayName = \"Combobox.Content\";\nTriggerValue.displayName = \"Combobox.TriggerValue\";\nTriggerInput.displayName = \"Combobox.TriggerInput\";\nItem.displayName = \"Combobox.Item\";\nChip.displayName = \"Combobox.Chip\";\nTriggerMultipleWithInput.displayName = \"Combobox.TriggerMultipleWithInput\";\n\nexport const Combobox = Object.assign(Root, {\n  // Helper components\n  Content,\n  TriggerValue,\n  TriggerInput,\n  TriggerMultipleWithInput,\n\n  // Slightly modified BaseUI\n  Chip,\n  Item,\n\n  // Styled BaseUI\n  Input,\n  Empty,\n  GroupLabel,\n  Group,\n\n  // BaseUI\n  List: ComboboxBase.List,\n  Collection: ComboboxBase.Collection,\n});\n"],"names":["Root","label","required","labelTooltip","description","error","children","props","comboboxControl","jsx","ComboboxBase.Root","Field","Content","className","align","sideOffset","alignOffset","side","ComboboxBase.Portal","ComboboxBase.Positioner","ComboboxBase.Popup","cn","TriggerValue","jsxs","ComboboxBase.Trigger","inputVariants","ComboboxBase.Value","ComboboxBase.Icon","CaretDownIcon","TriggerInput","ComboboxBase.Input","ComboboxBase.Clear","XIcon","Item","ComboboxBase.Item","ComboboxBase.ItemIndicator","CheckIcon","Empty","ComboboxBase.Empty","Input","GroupLabel","ComboboxBase.GroupLabel","Group","ComboboxBase.Group","Chip","ComboboxBase.Chip","ComboboxBase.ChipRemove","TriggerMultipleWithInput","placeholder","renderItem","inputSide","controlledValue","chipsToRender","ComboboxBase.Chips","item","internalValue","Fragment","Combobox","ComboboxBase.List","ComboboxBase.Collection"],"mappings":"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"}
+{"version":3,"file":"combobox-CWxn5aHA.js","sources":["../src/components/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as ComboboxBase } from \"@base-ui/react/combobox\";\nimport { CaretDownIcon, CheckIcon, XIcon } from \"@phosphor-icons/react\";\nimport { Fragment, type PropsWithChildren, type ReactNode } from \"react\";\nimport { inputVariants } from \"../input/input\";\nimport { cn } from \"../../utils/cn\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Combobox input position variant definitions. */\nexport const KUMO_COMBOBOX_VARIANTS = {\n  inputSide: {\n    right: {\n      classes: \"\",\n      description: \"Input positioned inline to the right of chips\",\n    },\n    top: {\n      classes: \"\",\n      description: \"Input positioned above chips\",\n    },\n  },\n} as const;\n\nexport const KUMO_COMBOBOX_DEFAULT_VARIANTS = {\n  inputSide: \"right\",\n} as const;\n\n// Derived types from KUMO_COMBOBOX_VARIANTS\nexport type KumoComboboxInputSide =\n  keyof typeof KUMO_COMBOBOX_VARIANTS.inputSide;\n\nexport interface KumoComboboxVariantsProps {\n  /**\n   * Position of the text input relative to chips in multi-select mode.\n   * - `\"right\"` — Input inline to the right of chips\n   * - `\"top\"` — Input above chips\n   * @default \"right\"\n   */\n  inputSide?: KumoComboboxInputSide;\n}\n\nexport function comboboxVariants({\n  inputSide = KUMO_COMBOBOX_DEFAULT_VARIANTS.inputSide,\n}: KumoComboboxVariantsProps = {}) {\n  return cn(KUMO_COMBOBOX_VARIANTS.inputSide[inputSide].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type ComboboxInputSide = KumoComboboxInputSide;\n\nexport type ComboboxRootProps<\n  Value = unknown,\n  Multiple extends boolean | undefined = false,\n> = ComboboxBase.Root.Props<Value, Multiple>;\n\n/**\n * Combobox component props (simplified for documentation; the actual Root is generic).\n *\n * Combobox provides an autocomplete/typeahead input with a filterable dropdown.\n * Supports single-select, multi-select with chips, grouped items, and Field wrapper integration.\n *\n * @example\n * ```tsx\n * // Single-select with search input\n * <Combobox value={value} onValueChange={setValue} items={options}>\n *   <Combobox.TriggerInput placeholder=\"Search…\" />\n *   <Combobox.Content>\n *     <Combobox.List>\n *       {(item) => <Combobox.Item value={item}>{item.label}</Combobox.Item>}\n *     </Combobox.List>\n *     <Combobox.Empty>No results</Combobox.Empty>\n *   </Combobox.Content>\n * </Combobox>\n *\n * // Multi-select with chips\n * <Combobox multiple items={options} label=\"Tags\">\n *   <Combobox.TriggerMultipleWithInput\n *     placeholder=\"Add tag…\"\n *     renderItem={(item) => <Combobox.Chip value={item}>{item.label}</Combobox.Chip>}\n *   />\n *   <Combobox.Content>\n *     <Combobox.List>\n *       {(item) => <Combobox.Item value={item}>{item.label}</Combobox.Item>}\n *     </Combobox.List>\n *   </Combobox.Content>\n * </Combobox>\n * ```\n */\nexport interface ComboboxProps extends KumoComboboxVariantsProps {\n  /** Array of items to display in the dropdown */\n  items: unknown[];\n  /** Currently selected value(s) */\n  value?: unknown;\n  /** Callback when selection changes */\n  onValueChange?: (value: unknown) => void;\n  /** Enable multi-select mode */\n  multiple?: boolean;\n  /** Combobox content (trigger, content, items) */\n  children: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label content for the combobox (enables Field wrapper) - can be a string or any React node */\n  label?: ReactNode;\n  /** Whether the combobox is required */\n  required?: boolean;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the combobox */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\nfunction Root<Value, Multiple extends boolean | undefined = false>({\n  label,\n  required,\n  labelTooltip,\n  description,\n  error,\n  children,\n  ...props\n}: ComboboxBase.Root.Props<Value, Multiple> & {\n  label?: ReactNode;\n  required?: boolean;\n  labelTooltip?: ReactNode;\n  description?: ReactNode;\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}) {\n  const comboboxControl = (\n    <ComboboxBase.Root {...props}>{children}</ComboboxBase.Root>\n  );\n\n  // Render with Field wrapper if label, description, or error are provided\n  if (label) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {comboboxControl}\n      </Field>\n    );\n  }\n\n  // Render bare combobox without Field wrapper\n  return comboboxControl;\n}\n\nfunction Content({\n  children,\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  alignOffset,\n  side,\n}: PropsWithChildren<{\n  className?: string;\n  align?: ComboboxBase.Positioner.Props[\"align\"];\n  alignOffset?: ComboboxBase.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxBase.Positioner.Props[\"side\"];\n  sideOffset?: ComboboxBase.Positioner.Props[\"sideOffset\"];\n}>) {\n  return (\n    <ComboboxBase.Portal>\n      <ComboboxBase.Positioner\n        className=\"z-50 outline-none\"\n        align={align}\n        sideOffset={sideOffset}\n        alignOffset={alignOffset}\n        side={side}\n      >\n        <ComboboxBase.Popup\n          className={cn(\n            \"max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) scroll-pt-2 scroll-pb-2 overflow-y-auto overscroll-contain p-1.5\",\n            \"z-50 overflow-hidden bg-kumo-control text-kumo-default\", // background\n            \"rounded-lg shadow-lg ring ring-kumo-line\", // border part\n            className,\n          )}\n        >\n          {children}\n        </ComboboxBase.Popup>\n      </ComboboxBase.Positioner>\n    </ComboboxBase.Portal>\n  );\n}\n\nfunction TriggerValue({\n  className,\n  ...props\n}: ComboboxBase.Value.Props & { className?: string }) {\n  return (\n    <ComboboxBase.Trigger\n      className={cn(\n        inputVariants(),\n        \"relative flex items-center pr-8\",\n        className,\n      )}\n    >\n      <ComboboxBase.Value>{props.children}</ComboboxBase.Value>\n      <ComboboxBase.Icon className=\"absolute top-1/2 right-2 -translate-y-1/2\">\n        <CaretDownIcon className=\"fill-kumo-ring\" />\n      </ComboboxBase.Icon>\n    </ComboboxBase.Trigger>\n  );\n}\n\nfunction TriggerInput(props: ComboboxBase.Input.Props) {\n  return (\n    <div\n      className={cn(\"relative inline-block w-full max-w-xs\", props.className)}\n    >\n      <ComboboxBase.Input\n        {...props}\n        className={cn(inputVariants(), \"w-full pr-12\")}\n      />\n\n      <ComboboxBase.Clear className=\"absolute top-1/2 right-8 flex -translate-y-1/2 cursor-pointer bg-transparent p-0\">\n        <XIcon />\n      </ComboboxBase.Clear>\n\n      <ComboboxBase.Trigger className=\"p-0\">\n        <ComboboxBase.Icon className=\"absolute top-1/2 right-2 flex -translate-y-1/2 cursor-pointer\">\n          <CaretDownIcon className=\"fill-kumo-ring\" />\n        </ComboboxBase.Icon>\n      </ComboboxBase.Trigger>\n    </div>\n  );\n}\n\nfunction Item({ children, ...props }: ComboboxBase.Item.Props) {\n  return (\n    <ComboboxBase.Item\n      {...props}\n      className=\"group grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay\"\n    >\n      <div className=\"col-start-1\">{children}</div>\n      <ComboboxBase.ItemIndicator className=\"col-start-2 flex items-center\">\n        <CheckIcon />\n      </ComboboxBase.ItemIndicator>\n    </ComboboxBase.Item>\n  );\n}\n\nfunction Empty(props: ComboboxBase.Empty.Props) {\n  return (\n    <ComboboxBase.Empty\n      {...props}\n      className={cn(\n        \"px-4 py-2 text-[0.925rem] leading-4 text-kumo-subtle empty:m-0 empty:p-0\",\n      )}\n      children={props.children ?? \"No labels found.\"}\n    />\n  );\n}\n\nfunction Input(props: ComboboxBase.Input.Props) {\n  return (\n    <ComboboxBase.Input\n      {...props}\n      className={cn(inputVariants(), \"w-full first:mb-2\", props.className)}\n    />\n  );\n}\n\nfunction GroupLabel(props: ComboboxBase.GroupLabel.Props) {\n  return (\n    <ComboboxBase.GroupLabel\n      {...props}\n      className=\"ml-[16px] px-4 py-1.5 text-sm font-medium\"\n    />\n  );\n}\n\nfunction Group(props: ComboboxBase.Group.Props) {\n  return <ComboboxBase.Group {...props} className=\"mt-2 first:mt-0\" />;\n}\n\nfunction Chip(props: ComboboxBase.Chip.Props) {\n  return (\n    <ComboboxBase.Chip\n      {...props}\n      className=\"flex items-center gap-1 rounded-md bg-kumo-overlay px-2 py-1\"\n    >\n      {props.children}\n      <ComboboxBase.ChipRemove className=\"cursor-pointer rounded-md p-1 hover:bg-kumo-fill-hover\">\n        <XIcon size={12} weight=\"bold\" />\n      </ComboboxBase.ChipRemove>\n    </ComboboxBase.Chip>\n  );\n}\n\nfunction TriggerMultipleWithInput<ValueType>({\n  placeholder,\n  renderItem,\n  className,\n  inputSide = \"right\",\n  value: controlledValue,\n}: {\n  placeholder?: string;\n  renderItem: (value: ValueType) => React.ReactNode;\n  className?: string;\n  inputSide?: \"right\" | \"top\";\n  /** Optional controlled value for rendering chips (use when pre-selecting values) */\n  value?: ValueType[];\n}) {\n  // Determine which value to use for rendering chips\n  const chipsToRender = controlledValue;\n\n  return (\n    <ComboboxBase.Chips\n      className={cn(\n        inputVariants(),\n        cn(\"flex flex-col\", \"gap-1 p-1\", \"min-h-9\", \"h-auto\"),\n        className,\n      )}\n    >\n      {inputSide === \"top\" && (\n        <ComboboxBase.Input\n          placeholder={placeholder}\n          className=\"w-full px-2 py-1 outline-none\"\n        />\n      )}\n      {/* Chips container */}\n      <div className=\"flex flex-wrap gap-1\">\n        {/* Render chips from controlled value if provided */}\n        {chipsToRender !== undefined &&\n          chipsToRender.length > 0 &&\n          chipsToRender.map((item) => renderItem(item))}\n        {/* Also render from BaseUI's internal value for user selections */}\n        <ComboboxBase.Value>\n          {(internalValue: ValueType[]) => {\n            // Skip rendering if using controlled value (to avoid duplicates)\n            if (chipsToRender !== undefined) return null;\n            return (\n              <Fragment>\n                {internalValue.map((item) => renderItem(item))}\n              </Fragment>\n            );\n          }}\n        </ComboboxBase.Value>\n        {inputSide === \"right\" && (\n          <ComboboxBase.Input\n            placeholder={placeholder}\n            className=\"min-w-[100px] flex-1 px-2 py-1 outline-none\"\n          />\n        )}\n      </div>\n    </ComboboxBase.Chips>\n  );\n}\n\nRoot.displayName = \"Combobox.Root\";\nContent.displayName = \"Combobox.Content\";\nTriggerValue.displayName = \"Combobox.TriggerValue\";\nTriggerInput.displayName = \"Combobox.TriggerInput\";\nItem.displayName = \"Combobox.Item\";\nChip.displayName = \"Combobox.Chip\";\nTriggerMultipleWithInput.displayName = \"Combobox.TriggerMultipleWithInput\";\n\n/**\n * Combobox — autocomplete input with filterable dropdown list.\n *\n * Compound component: `Combobox` (Root), `.TriggerInput`, `.TriggerValue`,\n * `.TriggerMultipleWithInput`, `.Content`, `.Item`, `.Chip`, `.Input`,\n * `.Empty`, `.GroupLabel`, `.Group`, `.List`, `.Collection`.\n *\n * @example\n * ```tsx\n * <Combobox items={fruits} label=\"Fruit\">\n *   <Combobox.TriggerInput placeholder=\"Pick a fruit…\" />\n *   <Combobox.Content>\n *     <Combobox.List>\n *       {(item) => <Combobox.Item value={item}>{item}</Combobox.Item>}\n *     </Combobox.List>\n *   </Combobox.Content>\n * </Combobox>\n * ```\n *\n * @see https://base-ui.com/react/components/combobox\n */\nexport const Combobox = Object.assign(Root, {\n  // Helper components\n  Content,\n  TriggerValue,\n  TriggerInput,\n  TriggerMultipleWithInput,\n\n  // Slightly modified BaseUI\n  Chip,\n  Item,\n\n  // Styled BaseUI\n  Input,\n  Empty,\n  GroupLabel,\n  Group,\n\n  // BaseUI\n  List: ComboboxBase.List,\n  Collection: ComboboxBase.Collection,\n});\n"],"names":["Root","label","required","labelTooltip","description","error","children","props","comboboxControl","jsx","ComboboxBase.Root","Field","Content","className","align","sideOffset","alignOffset","side","ComboboxBase.Portal","ComboboxBase.Positioner","ComboboxBase.Popup","cn","TriggerValue","jsxs","ComboboxBase.Trigger","inputVariants","ComboboxBase.Value","ComboboxBase.Icon","CaretDownIcon","TriggerInput","ComboboxBase.Input","ComboboxBase.Clear","XIcon","Item","ComboboxBase.Item","ComboboxBase.ItemIndicator","CheckIcon","Empty","ComboboxBase.Empty","Input","GroupLabel","ComboboxBase.GroupLabel","Group","ComboboxBase.Group","Chip","ComboboxBase.Chip","ComboboxBase.ChipRemove","TriggerMultipleWithInput","placeholder","renderItem","inputSide","controlledValue","chipsToRender","ComboboxBase.Chips","item","internalValue","Fragment","Combobox","ComboboxBase.List","ComboboxBase.Collection"],"mappings":"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"}

package/dist/command-line/cli.js

@@ -5,8 +5,8 @@ import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 function getRegistryPath() {
-  const __dirname = dirname(fileURLToPath(import.meta.url));
-  return join(__dirname, "..", "..", "catalog", "component-registry.json");
+  const __dirname2 = dirname(fileURLToPath(import.meta.url));
+  return join(__dirname2, "..", "..", "catalog", "component-registry.json");
 }
 function loadRegistry() {
   const registryPath = getRegistryPath();
@@ -25,11 +25,11 @@ function ls() {
       }
       byCategory.get(category).push(component);
     }
-    const sortedCategories = [...byCategory.keys()].toSorted();
+    const sortedCategories = [...byCategory.keys()].sort();
     console.log(`Kumo Components (${components.length} total)
 `);
     for (const category of sortedCategories) {
-      const categoryComponents = [...byCategory.get(category)].toSorted(
+      const categoryComponents = [...byCategory.get(category)].sort(
         (a, b) => a.name.localeCompare(b.name)
       );
       console.log(`${category}:`);
@@ -54,8 +54,8 @@ import { readFileSync as readFileSync2 } from "node:fs";
 import { dirname as dirname2, join as join2 } from "node:path";
 import { fileURLToPath as fileURLToPath2 } from "node:url";
 function getRegistryPath2() {
-  const __dirname = dirname2(fileURLToPath2(import.meta.url));
-  return join2(__dirname, "..", "..", "catalog", "component-registry.json");
+  const __dirname2 = dirname2(fileURLToPath2(import.meta.url));
+  return join2(__dirname2, "..", "..", "catalog", "component-registry.json");
 }
 function loadRegistry2() {
   const registryPath = getRegistryPath2();
@@ -324,8 +324,8 @@ import { readFileSync as readFileSync4 } from "node:fs";
 import { dirname as dirname3, join as join4 } from "node:path";
 import { fileURLToPath as fileURLToPath3 } from "node:url";
 function getRegistryPath3() {
-  const __dirname = dirname3(fileURLToPath3(import.meta.url));
-  return join4(__dirname, "..", "..", "ai", "component-registry.json");
+  const __dirname2 = dirname3(fileURLToPath3(import.meta.url));
+  return join4(__dirname2, "..", "..", "ai", "component-registry.json");
 }
 function loadRegistry3() {
   const registryPath = getRegistryPath3();
@@ -348,11 +348,11 @@ function blocks() {
       }
       byCategory.get(category).push(block);
     }
-    const sortedCategories = [...byCategory.keys()].toSorted();
+    const sortedCategories = [...byCategory.keys()].sort();
     console.log(`Kumo Blocks (${blockList.length} total)
 `);
     for (const category of sortedCategories) {
-      const categoryBlocks = [...byCategory.get(category)].toSorted(
+      const categoryBlocks = [...byCategory.get(category)].sort(
         (a, b) => a.name.localeCompare(b.name)
       );
       console.log(`${category}:`);
@@ -421,11 +421,11 @@ ${typeImport}`;
 // src/command-line/commands/add.ts
 import { createInterface as createInterface2 } from "node:readline/promises";
 function getRegistryPath4() {
-  const __dirname = dirname4(fileURLToPath4(import.meta.url));
+  const __dirname2 = dirname4(fileURLToPath4(import.meta.url));
   const possiblePaths = [
-    join5(__dirname, "..", "..", "ai", "component-registry.json"),
-    join5(__dirname, "..", "ai", "component-registry.json"),
-    join5(__dirname, "ai", "component-registry.json")
+    join5(__dirname2, "..", "..", "ai", "component-registry.json"),
+    join5(__dirname2, "..", "ai", "component-registry.json"),
+    join5(__dirname2, "ai", "component-registry.json")
   ];
   for (const path of possiblePaths) {
     if (existsSync2(path)) {
@@ -437,11 +437,11 @@ function getRegistryPath4() {
   );
 }
 function getBlocksSourcePath() {
-  const __dirname = dirname4(fileURLToPath4(import.meta.url));
+  const __dirname2 = dirname4(fileURLToPath4(import.meta.url));
   const possiblePaths = [
-    join5(__dirname, "..", "..", "src", "blocks"),
-    join5(__dirname, "..", "src", "blocks"),
-    join5(__dirname, "src", "blocks")
+    join5(__dirname2, "..", "..", "src", "blocks"),
+    join5(__dirname2, "..", "src", "blocks"),
+    join5(__dirname2, "src", "blocks")
   ];
   for (const path of possiblePaths) {
     if (existsSync2(path)) {
@@ -692,6 +692,25 @@ function migrate(args) {
   console.log(JSON.stringify(output, null, 2));
 }
 
+// src/command-line/commands/ai.ts
+import { readFileSync as readFileSync6 } from "node:fs";
+import { dirname as dirname5, join as join6 } from "node:path";
+import { fileURLToPath as fileURLToPath5 } from "node:url";
+var __dirname = dirname5(fileURLToPath5(import.meta.url));
+function ai() {
+  const packageRoot = join6(__dirname, "../../..");
+  const usagePath = join6(packageRoot, "ai", "USAGE.md");
+  try {
+    const content = readFileSync6(usagePath, "utf-8");
+    console.log(content);
+  } catch {
+    console.error(
+      "Could not read ai/USAGE.md. Make sure you are running this from an installed @cloudflare/kumo package."
+    );
+    process.exit(1);
+  }
+}
+
 // src/command-line/cli.ts
 var HELP = `
 Kumo CLI - Component registry and blocks distribution
@@ -711,6 +730,9 @@ MIGRATION:
   kumo migrate --classes  Show class-level mappings (bg-kumo-base -> bg-kumo-base)
   kumo migrate --help     Show migration help
 
+AI:
+  kumo ai              Print the AI usage guide (component API reference)
+
 GENERAL:
   kumo help            Show this help message
 
@@ -746,6 +768,9 @@ async function main() {
     case "migrate":
       migrate(args.slice(1));
       break;
+    case "ai":
+      ai();
+      break;
     case "help":
     case "--help":
     case "-h":

package/dist/command-line/commands/ai.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+// src/command-line/commands/ai.ts
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+var __dirname = dirname(fileURLToPath(import.meta.url));
+function ai() {
+  const packageRoot = join(__dirname, "../../..");
+  const usagePath = join(packageRoot, "ai", "USAGE.md");
+  try {
+    const content = readFileSync(usagePath, "utf-8");
+    console.log(content);
+  } catch {
+    console.error(
+      "Could not read ai/USAGE.md. Make sure you are running this from an installed @cloudflare/kumo package."
+    );
+    process.exit(1);
+  }
+}
+export {
+  ai
+};

package/dist/command-line/commands/blocks.js

@@ -29,11 +29,11 @@ function blocks() {
       }
       byCategory.get(category).push(block);
     }
-    const sortedCategories = [...byCategory.keys()].toSorted();
+    const sortedCategories = [...byCategory.keys()].sort();
     console.log(`Kumo Blocks (${blockList.length} total)
 `);
     for (const category of sortedCategories) {
-      const categoryBlocks = [...byCategory.get(category)].toSorted(
+      const categoryBlocks = [...byCategory.get(category)].sort(
         (a, b) => a.name.localeCompare(b.name)
       );
       console.log(`${category}:`);

package/dist/command-line/commands/ls.js

@@ -25,11 +25,11 @@ function ls() {
       }
       byCategory.get(category).push(component);
     }
-    const sortedCategories = [...byCategory.keys()].toSorted();
+    const sortedCategories = [...byCategory.keys()].sort();
     console.log(`Kumo Components (${components.length} total)
 `);
     for (const category of sortedCategories) {
-      const categoryComponents = [...byCategory.get(category)].toSorted(
+      const categoryComponents = [...byCategory.get(category)].sort(
         (a, b) => a.name.localeCompare(b.name)
       );
       console.log(`${category}:`);

package/dist/{command-palette-BxmGYxBv.js → command-palette-J50WKjS7.js}

@@ -5,7 +5,7 @@ import { CaretRightIcon as M, ArrowSquareOutIcon as H, ArrowRightIcon as _, Magn
 import { S as G } from "./surface-BIC6CXiz.js";
 import { L as j } from "./loader-DHGMYlC6.js";
 import { c as m } from "./cn-Bhsu1vx2.js";
-import { P as U, Q as V, X as z, Z as w, W as O, V as S, Y as $, b8 as q, ad as B, ae as Q, af as W, ag as X } from "./vendor-base-ui-kX0wjdav.js";
+import { P as U, Q as V, X as z, Z as w, W as O, V as $, Y as q, b8 as B, ad as Q, ae as S, af as W, ag as X } from "./vendor-base-ui-kX0wjdav.js";
 const C = v({});
 function I({
   open: t,
@@ -18,7 +18,7 @@ function I({
   }, c = b(() => {
     n(!1);
   }, [n]);
-  return /* @__PURE__ */ e(B, { open: t, onOpenChange: n, modal: !0, children: /* @__PURE__ */ g(Q, { children: [
+  return /* @__PURE__ */ e(Q, { open: t, onOpenChange: n, modal: !0, children: /* @__PURE__ */ g(S, { children: [
     /* @__PURE__ */ e(
       W,
       {
@@ -88,7 +88,13 @@ function Z({
   trailing: o
 }) {
   return /* @__PURE__ */ g("div", { className: "flex items-center gap-3 bg-kumo-base px-4 py-3", children: [
-    n ?? /* @__PURE__ */ e(F, { className: "h-4 w-4 text-kumo-subtle", weight: "bold" }),
+    n ?? /* @__PURE__ */ e(
+      F,
+      {
+        className: "h-4 w-4 text-kumo-subtle",
+        weight: "bold"
+      }
+    ),
     t,
     o
   ] });
@@ -112,7 +118,7 @@ function J({
   className: n,
   ...o
 }) {
-  return /* @__PURE__ */ e(S, { className: m("space-y-0.5", n), ...o, children: t });
+  return /* @__PURE__ */ e($, { className: m("space-y-0.5", n), ...o, children: t });
 }
 function ee({
   children: t,
@@ -169,7 +175,7 @@ function y({
 }) {
   if (!n || n.length === 0)
     return /* @__PURE__ */ e("span", { className: o, children: t });
-  const l = [...n].toSorted((i, a) => i[0] - a[0]), s = [];
+  const l = [...n].sort((i, a) => i[0] - a[0]), s = [];
   for (const i of l) {
     const a = s[s.length - 1];
     a && i[0] <= a[1] + 1 ? a[1] = Math.max(a[1], i[1]) : s.push([...i]);
@@ -296,7 +302,7 @@ function A({
     [n, d, r]
   );
   return /* @__PURE__ */ e(re, { className: a, children: /* @__PURE__ */ e(
-    q,
+    B,
     {
       items: n,
       value: o,
@@ -333,7 +339,7 @@ function ie({
     [i, l, a]
   );
   return /* @__PURE__ */ e(Z, { leading: s, trailing: c, children: /* @__PURE__ */ e(
-    $,
+    q,
     {
       placeholder: n,
       className: m(
@@ -390,4 +396,4 @@ export {
   ye as K,
   ke as a
 };
-//# sourceMappingURL=command-palette-BxmGYxBv.js.map
+//# sourceMappingURL=command-palette-J50WKjS7.js.map

package/dist/command-palette-J50WKjS7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette-J50WKjS7.js","sources":["../src/components/command-palette/command-palette.tsx"],"sourcesContent":["import {\n  useRef,\n  useCallback,\n  createContext,\n  useContext,\n  forwardRef,\n  type CSSProperties,\n} from \"react\";\nimport { Autocomplete } from \"@base-ui/react/autocomplete\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport {\n  MagnifyingGlassIcon,\n  ArrowRightIcon,\n  ArrowSquareOutIcon,\n  CaretRightIcon,\n} from \"@phosphor-icons/react\";\n\nimport { Surface } from \"../surface\";\nimport { Loader } from \"../loader\";\nimport { cn } from \"../../utils\";\nimport type {\n  HighlightRange,\n  CommandPaletteRootProps,\n  CommandPaletteListProps,\n  CommandPaletteGroupProps,\n  CommandPaletteGroupLabelProps,\n  CommandPaletteItemProps,\n  CommandPaletteEmptyProps,\n  CommandPaletteLoadingProps,\n  CommandPaletteFooterProps,\n  CommandPaletteResultItemProps,\n} from \"./types\";\n\n/**\n * CommandPalette - A composable command palette component for Kumo\n *\n * Uses @base-ui/react/autocomplete primitives for accessible command palette functionality.\n *\n * Keyboard navigation is built-in:\n * - Arrow keys (up/down) move highlight between items\n * - Enter selects the highlighted item (calls onSelect with newTab: false)\n * - Cmd+Enter (Mac) / Ctrl+Enter (Windows/Linux) selects with newTab: true\n * - First item is auto-highlighted when results change\n * - Escape closes the dialog\n *\n * Usage:\n * ```tsx\n * <CommandPalette.Root\n *   open={open}\n *   onOpenChange={setOpen}\n *   items={results}\n *   value={searchTerm}\n *   onValueChange={setSearchTerm}\n *   itemToStringValue={(group) => group.label}\n *   onSelect={(item, { newTab }) => handleSelect(item, newTab)}\n *   getSelectableItems={(groups) => groups.flatMap(g => g.items)}\n * >\n *   <CommandPalette.Input placeholder=\"Search...\" />\n *   <CommandPalette.List>\n *     <Autocomplete.List>\n *       {(group) => (\n *         <CommandPalette.Group items={group.items}>\n *           <CommandPalette.GroupLabel>{group.label}</CommandPalette.GroupLabel>\n *           <Autocomplete.Collection>\n *             {(item) => (\n *               <CommandPalette.Item value={item} onClick={(e) => handleSelect(item, e.metaKey || e.ctrlKey)}>\n *                 {item.title}\n *               </CommandPalette.Item>\n *             )}\n *           </Autocomplete.Collection>\n *         </CommandPalette.Group>\n *       )}\n *     </Autocomplete.List>\n *     <CommandPalette.Empty>No results found</CommandPalette.Empty>\n *   </CommandPalette.List>\n *   <CommandPalette.Footer />\n * </CommandPalette.Root>\n * ```\n */\n\n/**\n * Dialog context for passing close handler to children\n */\ninterface DialogContextValue {\n  onClose?: () => void;\n}\n\nconst DialogContext = createContext<DialogContextValue>({});\n\n/**\n * Props for the Dialog component\n */\ninterface DialogProps {\n  /** Whether the dialog is open */\n  open: boolean;\n  /** Callback when the open state changes */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * Optional callback when backdrop is clicked.\n   * Receives the mouse event for position tracking (e.g., for ripple effects).\n   * If not provided, backdrop click calls onOpenChange(false).\n   */\n  onBackdropClick?: (e: React.MouseEvent) => void;\n  /** Child content - typically one or more Panel components */\n  children: React.ReactNode;\n}\n\n/**\n * Dialog component - Modal wrapper for command palette content.\n *\n * Use this when you need a dialog that can swap between different Panel contents\n * without re-mounting (e.g., drill-down navigation).\n *\n * @example\n * ```tsx\n * <CommandPalette.Dialog open={open} onOpenChange={setOpen}>\n *   {showDrillDown ? (\n *     <ZonePicker />\n *   ) : (\n *     <CommandPalette.Panel items={results} ...>\n *       ...\n *     </CommandPalette.Panel>\n *   )}\n * </CommandPalette.Dialog>\n * ```\n */\nfunction Dialog({\n  open,\n  onOpenChange,\n  onBackdropClick,\n  children,\n}: DialogProps) {\n  const handleBackdropClick = (e: React.MouseEvent) => {\n    if (onBackdropClick) {\n      onBackdropClick(e);\n    } else {\n      onOpenChange(false);\n    }\n  };\n\n  const handleClose = useCallback(() => {\n    onOpenChange(false);\n  }, [onOpenChange]);\n\n  return (\n    <DialogBase.Root open={open} onOpenChange={onOpenChange} modal>\n      <DialogBase.Portal>\n        <DialogBase.Backdrop\n          className=\"fixed inset-0 bg-kumo-overlay opacity-80 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\"\n          onClick={handleBackdropClick}\n        />\n        <Surface\n          as={DialogBase.Popup}\n          className={cn(\n            \"fixed top-[10vh] left-1/2 w-full max-w-2xl -translate-x-1/2\",\n            \"overflow-hidden rounded-lg\",\n            \"duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0\",\n          )}\n          style={\n            {\n              transitionProperty: \"scale, opacity\",\n              transitionTimingFunction:\n                \"var(--default-transition-timing-function)\",\n            } as CSSProperties\n          }\n        >\n          <DialogContext.Provider value={{ onClose: handleClose }}>\n            {children}\n          </DialogContext.Provider>\n        </Surface>\n      </DialogBase.Portal>\n    </DialogBase.Root>\n  );\n}\n\n/**\n * Root component - Dialog + Panel combined for simple use cases.\n *\n * For cases where you need to swap content inside the dialog without\n * re-mounting (e.g., drill-down navigation), use Dialog + Panel separately.\n *\n * Keyboard navigation is always enabled:\n * - Arrow keys (up/down) move highlight\n * - Enter selects highlighted item\n * - Cmd/Ctrl+Enter selects with newTab: true\n * - First item is auto-highlighted when results change\n */\nfunction Root<TGroup, TItem = TGroup>({\n  open,\n  onOpenChange,\n  onBackdropClick,\n  children,\n  items,\n  value,\n  onValueChange,\n  onItemHighlighted,\n  itemToStringValue,\n  filter,\n  onSelect,\n  getSelectableItems,\n}: CommandPaletteRootProps<TGroup, TItem>) {\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={onOpenChange}\n      onBackdropClick={onBackdropClick}\n    >\n      <Panel\n        items={items}\n        value={value}\n        onValueChange={onValueChange}\n        onItemHighlighted={onItemHighlighted}\n        itemToStringValue={itemToStringValue}\n        filter={filter}\n        open={open}\n        onSelect={onSelect}\n        getSelectableItems={getSelectableItems}\n      >\n        {children}\n      </Panel>\n    </Dialog>\n  );\n}\n\n/**\n * InputHeader component - Internal styled container for search input.\n */\nfunction InputHeader({\n  children,\n  leading,\n  trailing,\n}: {\n  children: React.ReactNode;\n  leading?: React.ReactNode;\n  trailing?: React.ReactNode;\n}) {\n  return (\n    <div className=\"flex items-center gap-3 bg-kumo-base px-4 py-3\">\n      {leading ?? (\n        <MagnifyingGlassIcon\n          className=\"h-4 w-4 text-kumo-subtle\"\n          weight=\"bold\"\n        />\n      )}\n      {children}\n      {trailing}\n    </div>\n  );\n}\n\n/**\n * List component - Scrollable results container\n *\n * Wrapper div with proper styling, contains Autocomplete.List internally.\n * Supports ref forwarding for scroll control.\n */\nconst List = forwardRef<\n  HTMLDivElement,\n  CommandPaletteListProps & { className?: string }\n>(function List({ children, className }, ref) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"z-10 min-h-0 flex-1 overflow-y-auto rounded-b-lg bg-kumo-base px-2 py-2 ring-1 ring-kumo-line\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n});\n\nList.displayName = \"CommandPalette.List\";\n\n/**\n * Group component - Category grouping\n *\n * Re-export of Autocomplete.Group with default styling.\n */\nfunction Group({\n  children,\n  className,\n  ...props\n}: CommandPaletteGroupProps & {\n  className?: string;\n  items?: unknown[];\n}) {\n  return (\n    <Autocomplete.Group className={cn(\"space-y-0.5\", className)} {...props}>\n      {children}\n    </Autocomplete.Group>\n  );\n}\n\n/**\n * GroupLabel component - Section header text\n *\n * Re-export of Autocomplete.GroupLabel with styling matching SectionHeader.\n */\nfunction GroupLabel({\n  children,\n  className,\n}: CommandPaletteGroupLabelProps & { className?: string }) {\n  return (\n    <Autocomplete.GroupLabel\n      className={cn(\n        \"mb-2 px-2 pt-1 text-xs font-semibold text-kumo-strong\",\n        className,\n      )}\n    >\n      {children}\n    </Autocomplete.GroupLabel>\n  );\n}\n\n/**\n * Item component - Individual result item\n *\n * Re-export of Autocomplete.Item with styling matching SearchResultItem.\n * Note: Use onClick for selection handling, matching the existing CommandPalette pattern.\n */\nfunction Item<T>({\n  value,\n  disabled,\n  children,\n  className,\n  onClick,\n}: CommandPaletteItemProps<T> & {\n  className?: string;\n}) {\n  return (\n    <Autocomplete.Item\n      value={value}\n      disabled={disabled}\n      onClick={onClick}\n      className={cn(\n        \"group flex w-full items-center gap-3 px-2 py-1.5 text-left transition-colors\",\n        \"cursor-pointer data-[highlighted]:bg-kumo-overlay\",\n        \"rounded-lg\",\n        disabled && \"cursor-default opacity-50\",\n        className,\n      )}\n    >\n      {children}\n    </Autocomplete.Item>\n  );\n}\n\n/**\n * Empty component - Empty state when no results\n *\n * Re-export of Autocomplete.Empty with default styling.\n */\nfunction Empty({ children }: CommandPaletteEmptyProps) {\n  return (\n    <Autocomplete.Empty>\n      <div className=\"p-8 text-center\">\n        <p className=\"text-kumo-strong\">{children ?? \"No results found\"}</p>\n      </div>\n    </Autocomplete.Empty>\n  );\n}\n\n/**\n * Loading component - Loading spinner state\n *\n * Centered loading spinner using Kumo Loader.\n */\nfunction Loading({ children }: CommandPaletteLoadingProps) {\n  return (\n    <div className=\"flex items-center justify-center p-8\">\n      {children ?? <Loader size={24} />}\n    </div>\n  );\n}\n\n/**\n * Footer component - Styled container for keyboard hints or other footer content.\n *\n * Children are required - this is just a styled container.\n * Consumers should provide their own keyboard hints with proper i18n.\n */\nfunction Footer({ children }: CommandPaletteFooterProps) {\n  return (\n    <div className=\"flex items-center justify-between rounded-b-lg bg-kumo-elevated px-4 py-3 text-xs text-kumo-strong\">\n      {children}\n    </div>\n  );\n}\n\n/**\n * HighlightedText - Renders text with highlighted portions based on match indices.\n * Highlighted text is shown with a background color to indicate matches.\n */\nfunction HighlightedText({\n  text,\n  highlights,\n  className,\n}: {\n  text: string;\n  highlights?: HighlightRange[];\n  className?: string;\n}) {\n  if (!highlights || highlights.length === 0) {\n    return <span className={className}>{text}</span>;\n  }\n\n  // Sort highlights by start index and merge overlapping ranges\n  const sortedHighlights = [...highlights].sort((a, b) => a[0] - b[0]);\n  const mergedHighlights: HighlightRange[] = [];\n\n  for (const range of sortedHighlights) {\n    const last = mergedHighlights[mergedHighlights.length - 1];\n    if (last && range[0] <= last[1] + 1) {\n      // Merge overlapping or adjacent ranges\n      last[1] = Math.max(last[1], range[1]);\n    } else {\n      mergedHighlights.push([...range]);\n    }\n  }\n\n  const parts: React.ReactNode[] = [];\n  let lastIndex = 0;\n\n  mergedHighlights.forEach((range, i) => {\n    const [start, end] = range;\n\n    // Add non-highlighted text before this match\n    if (start > lastIndex) {\n      parts.push(<span key={`text-${i}`}>{text.slice(lastIndex, start)}</span>);\n    }\n\n    // Add highlighted text (end index is inclusive)\n    parts.push(\n      <mark\n        key={`highlight-${i}`}\n        className=\"rounded-sm bg-kumo-warning/50 text-kumo-default\"\n      >\n        {text.slice(start, end + 1)}\n      </mark>,\n    );\n\n    lastIndex = end + 1;\n  });\n\n  // Add remaining non-highlighted text\n  if (lastIndex < text.length) {\n    parts.push(<span key=\"text-end\">{text.slice(lastIndex)}</span>);\n  }\n\n  return <span className={className}>{parts}</span>;\n}\n\n/**\n * ResultItem - Rich item component with breadcrumbs, highlights, icons, and external indicators.\n *\n * Use this for search result items that need breadcrumb navigation, text highlighting,\n * or external link indicators. For simple items, use Item instead.\n */\nfunction ResultItem<T>({\n  title,\n  breadcrumbs,\n  titleHighlights,\n  breadcrumbHighlights,\n  description,\n  icon,\n  value,\n  onClick,\n  showArrow = true,\n  external = false,\n  nonInteractive = false,\n}: CommandPaletteResultItemProps<T>) {\n  return (\n    <Autocomplete.Item\n      value={value}\n      onClick={nonInteractive ? undefined : (e: React.MouseEvent) => onClick(e)}\n      className={cn(\n        \"group flex w-full items-center gap-3 rounded-lg px-2 py-1.5 text-left transition-colors\",\n        nonInteractive\n          ? \"cursor-default\"\n          : \"cursor-pointer data-[highlighted]:bg-kumo-overlay\",\n      )}\n    >\n      {icon && (\n        <div className=\"flex flex-shrink-0 items-center text-kumo-subtle\">\n          {icon}\n        </div>\n      )}\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex items-center gap-2 truncate\">\n          {breadcrumbs?.map((crumb, index) => (\n            <span key={index} className=\"flex items-center gap-2\">\n              <HighlightedText\n                text={crumb}\n                highlights={breadcrumbHighlights?.[index]}\n                className=\"text-base text-kumo-default\"\n              />\n              <CaretRightIcon\n                className=\"h-3 w-3 flex-shrink-0 text-kumo-subtle\"\n                weight=\"bold\"\n              />\n            </span>\n          ))}\n          <HighlightedText\n            text={title}\n            highlights={titleHighlights}\n            className=\"text-base text-kumo-default\"\n          />\n          {external && (\n            <ArrowSquareOutIcon className=\"h-3.5 w-3.5 flex-shrink-0 text-kumo-subtle\" />\n          )}\n          {description && (\n            <>\n              <span className=\"text-kumo-strong\">—</span>\n              <span className=\"truncate text-sm text-kumo-strong\">\n                {description}\n              </span>\n            </>\n          )}\n        </div>\n      </div>\n      {showArrow && !external && !nonInteractive && (\n        <ArrowRightIcon className=\"h-4 w-4 flex-shrink-0 text-kumo-subtle opacity-0 transition-opacity group-data-[highlighted]:opacity-100\" />\n      )}\n    </Autocomplete.Item>\n  );\n}\n\n/**\n * Container component - Internal styled wrapper.\n */\nfunction Container({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex max-h-[60vh] flex-col overflow-hidden rounded-lg bg-kumo-elevated\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * Panel context for passing handlers from Panel to children\n */\ninterface PanelContextValue {\n  onInputKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\nconst PanelContext = createContext<PanelContextValue>({});\n\n/**\n * Props for the Panel component\n */\ninterface PanelProps<TGroup, TItem = TGroup> {\n  /** Child components (Input, List, Footer, etc.) */\n  children: React.ReactNode;\n  /** Items for the autocomplete */\n  items: TGroup[];\n  /** Controlled input value */\n  value?: string;\n  /** Callback when input value changes */\n  onValueChange?: (value: string) => void;\n  /** Callback when an item is highlighted */\n  onItemHighlighted?: (\n    item: TGroup | undefined,\n    details: { reason: string; event: Event; index: number },\n  ) => void;\n  /** Convert item to string for accessibility */\n  itemToStringValue?: (item: TGroup) => string;\n  /** Custom filter function */\n  filter?: (item: TGroup, query: string) => boolean;\n  /** Whether the panel is active/open (for autocomplete state) */\n  open?: boolean;\n  /** Optional className for the container */\n  className?: string;\n  /**\n   * Callback when an item is selected via Cmd/Ctrl+Enter.\n   * Requires getSelectableItems to be provided.\n   */\n  onSelect?: (item: TItem, options: { newTab: boolean }) => void;\n  /**\n   * Function to get flat list of selectable items from groups.\n   * Required when items are grouped and onSelect is used.\n   */\n  getSelectableItems?: (items: TGroup[]) => TItem[];\n}\n\n/**\n * Panel component - Command palette without dialog wrapper.\n *\n * Use this when you need to render command palette content inside an existing dialog\n * (e.g., for drill-down navigation where the dialog stays open but content changes).\n *\n * Combines Container + Autocomplete functionality with a clean API.\n *\n * @example\n * ```tsx\n * <DialogRoot open={open} onOpenChange={setOpen}>\n *   <Dialog>\n *     <CommandPalette.Panel\n *       items={results}\n *       value={searchTerm}\n *       onValueChange={setSearchTerm}\n *       itemToStringValue={(group) => group.label}\n *     >\n *       <CommandPalette.Input placeholder=\"Search...\" />\n *       <CommandPalette.List>\n *         <CommandPalette.Results>\n *           {(group) => (\n *             <CommandPalette.Group items={group.items}>\n *               <CommandPalette.GroupLabel>{group.label}</CommandPalette.GroupLabel>\n *               <CommandPalette.Items>\n *                 {(item) => <CommandPalette.ResultItem ... />}\n *               </CommandPalette.Items>\n *             </CommandPalette.Group>\n *           )}\n *         </CommandPalette.Results>\n *         <CommandPalette.Empty>No results</CommandPalette.Empty>\n *       </CommandPalette.List>\n *       <CommandPalette.Footer>...</CommandPalette.Footer>\n *     </CommandPalette.Panel>\n *   </Dialog>\n * </DialogRoot>\n * ```\n */\nconst defaultFilter = () => true;\n\nfunction Panel<TGroup, TItem = TGroup>({\n  children,\n  items,\n  value,\n  onValueChange,\n  onItemHighlighted,\n  itemToStringValue,\n  filter = defaultFilter,\n  open = true,\n  className,\n  onSelect,\n  getSelectableItems,\n}: PanelProps<TGroup, TItem>) {\n  const highlightedIndexRef = useRef<number>(-1);\n\n  const handleItemHighlighted = useCallback(\n    (\n      item: TGroup | undefined,\n      details: { reason: string; event: Event; index: number },\n    ) => {\n      highlightedIndexRef.current = details.index;\n      onItemHighlighted?.(item, details);\n    },\n    [onItemHighlighted],\n  );\n\n  // Handle Cmd/Ctrl+Enter for new tab selection\n  const handleInputKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const isEnter = e.key === \"Enter\";\n      const withModifier = e.metaKey || e.ctrlKey;\n\n      if (isEnter && withModifier && onSelect && getSelectableItems) {\n        const selectableItems = getSelectableItems(items);\n        const highlightedItem = selectableItems[highlightedIndexRef.current];\n\n        if (highlightedItem !== undefined) {\n          e.preventDefault();\n          onSelect(highlightedItem, { newTab: true });\n        }\n      }\n    },\n    [items, onSelect, getSelectableItems],\n  );\n\n  return (\n    <Container className={className}>\n      <Autocomplete.Root\n        items={items}\n        value={value}\n        onValueChange={onValueChange}\n        onItemHighlighted={handleItemHighlighted}\n        itemToStringValue={itemToStringValue}\n        filter={filter}\n        autoHighlight=\"always\"\n        keepHighlight\n        open={open}\n      >\n        <PanelContext.Provider value={{ onInputKeyDown: handleInputKeyDown }}>\n          {children}\n        </PanelContext.Provider>\n      </Autocomplete.Root>\n    </Container>\n  );\n}\n\n/**\n * PanelInput component - Input that works inside Panel.\n *\n * Similar to Input but designed for use with Panel instead of Root.\n * Automatically wires up Cmd/Ctrl+Enter handling from Panel.\n */\nfunction PanelInput({\n  autoFocus = true,\n  placeholder,\n  className,\n  onKeyDown: onKeyDownProp,\n  leading,\n  trailing,\n  ...props\n}: {\n  autoFocus?: boolean;\n  placeholder?: string;\n  className?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  /** Optional leading content (e.g., back button) */\n  leading?: React.ReactNode;\n  /** Optional trailing content (e.g., Esc button) */\n  trailing?: React.ReactNode;\n}) {\n  const { onInputKeyDown } = useContext(PanelContext);\n  const { onClose } = useContext(DialogContext);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      // Let consumer handle first (e.g., for custom Escape/Backspace behavior)\n      onKeyDownProp?.(e);\n      if (e.defaultPrevented) return;\n\n      // Handle Escape to close the dialog\n      if (e.key === \"Escape\" && onClose) {\n        e.preventDefault();\n        onClose();\n        return;\n      }\n      onInputKeyDown?.(e);\n    },\n    [onInputKeyDown, onKeyDownProp, onClose],\n  );\n\n  return (\n    <InputHeader leading={leading} trailing={trailing}>\n      <Autocomplete.Input\n        placeholder={placeholder}\n        className={cn(\n          \"flex-1 border-none bg-transparent text-base placeholder:text-kumo-subtle\",\n          \"outline-none focus-visible:outline-none\",\n          className,\n        )}\n        onKeyDown={handleKeyDown}\n        // oxlint-disable-next-line no-autofocus -- Command palette input should autofocus for keyboard-driven UX\n        autoFocus={autoFocus}\n        {...props}\n      />\n    </InputHeader>\n  );\n}\n\n/**\n * Render prop iterators - wrap base-ui primitives with cleaner names.\n */\n\n/**\n * Results component - Render prop iterator for groups.\n *\n * Wraps Autocomplete.List with default spacing between groups.\n */\nfunction Results({\n  children,\n  className,\n}: React.ComponentProps<typeof Autocomplete.List> & { className?: string }) {\n  return (\n    <Autocomplete.List className={cn(\"space-y-3\", className)}>\n      {children}\n    </Autocomplete.List>\n  );\n}\n\nconst Items = Autocomplete.Collection;\n\n/** CommandPalette variant definitions (no user-facing variants; structure reserved for future use). */\nexport const KUMO_COMMAND_PALETTE_VARIANTS = {} as const;\n\nexport const KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS = {} as const;\n\n/**\n * CommandPalette — accessible command palette / spotlight search overlay.\n *\n * Compound component: `CommandPalette.Root` (or `.Dialog` + `.Panel`),\n * `.Input`, `.List`, `.Results`, `.Items`, `.Group`, `.GroupLabel`,\n * `.Item`, `.ResultItem`, `.HighlightedText`, `.Empty`, `.Loading`, `.Footer`.\n *\n * Built on `@base-ui/react/autocomplete` + `@base-ui/react/dialog`.\n *\n * @example\n * ```tsx\n * <CommandPalette.Root\n *   open={open}\n *   onOpenChange={setOpen}\n *   items={results}\n *   value={query}\n *   onValueChange={setQuery}\n *   itemToStringValue={(g) => g.label}\n *   onSelect={(item, { newTab }) => navigate(item, newTab)}\n *   getSelectableItems={(groups) => groups.flatMap((g) => g.items)}\n * >\n *   <CommandPalette.Input placeholder=\"Search…\" />\n *   <CommandPalette.List>\n *     <CommandPalette.Results>\n *       {(group) => (\n *         <CommandPalette.Group items={group.items}>\n *           <CommandPalette.GroupLabel>{group.label}</CommandPalette.GroupLabel>\n *           <CommandPalette.Items>\n *             {(item) => (\n *               <CommandPalette.ResultItem title={item.title} value={item} onClick={…} />\n *             )}\n *           </CommandPalette.Items>\n *         </CommandPalette.Group>\n *       )}\n *     </CommandPalette.Results>\n *     <CommandPalette.Empty>No results found</CommandPalette.Empty>\n *   </CommandPalette.List>\n *   <CommandPalette.Footer>…keyboard hints…</CommandPalette.Footer>\n * </CommandPalette.Root>\n * ```\n */\nexport const CommandPalette = {\n  /** Modal dialog wrapper - use with Panel for content that can swap */\n  Dialog,\n  /** Dialog + Panel combined - for simple single-view command palettes */\n  Root,\n  /** Autocomplete panel without dialog - use inside Dialog for swappable content */\n  Panel,\n  /** Input for use inside Panel */\n  Input: PanelInput,\n  /** Scrollable results container */\n  List,\n  /** Category grouping */\n  Group,\n  /** Section header text */\n  GroupLabel,\n  /** Basic item */\n  Item,\n  /** Rich item with breadcrumbs, highlights, icons */\n  ResultItem,\n  /** Text with highlighted portions */\n  HighlightedText,\n  /** Empty state */\n  Empty,\n  /** Loading state */\n  Loading,\n  /** Footer for keyboard hints */\n  Footer,\n  /** Render prop iterator for groups */\n  Results,\n  /** Render prop iterator for items within a group */\n  Items,\n};\n"],"names":["DialogContext","createContext","Dialog","open","onOpenChange","onBackdropClick","children","handleBackdropClick","e","handleClose","useCallback","jsx","DialogBase.Root","jsxs","DialogBase.Portal","DialogBase.Backdrop","Surface","DialogBase.Popup","cn","Root","items","value","onValueChange","onItemHighlighted","itemToStringValue","filter","onSelect","getSelectableItems","Panel","InputHeader","leading","trailing","MagnifyingGlassIcon","List","forwardRef","className","ref","Group","props","Autocomplete.Group","GroupLabel","Autocomplete.GroupLabel","Item","disabled","onClick","Autocomplete.Item","Empty","Autocomplete.Empty","Loading","Loader","Footer","HighlightedText","text","highlights","sortedHighlights","a","b","mergedHighlights","range","last","parts","lastIndex","i","start","end","ResultItem","title","breadcrumbs","titleHighlights","breadcrumbHighlights","description","icon","showArrow","external","nonInteractive","crumb","index","CaretRightIcon","ArrowSquareOutIcon","Fragment","ArrowRightIcon","Container","PanelContext","defaultFilter","highlightedIndexRef","useRef","handleItemHighlighted","item","details","handleInputKeyDown","isEnter","withModifier","highlightedItem","Autocomplete.Root","PanelInput","autoFocus","placeholder","onKeyDownProp","onInputKeyDown","useContext","onClose","handleKeyDown","Autocomplete.Input","Results","Autocomplete.List","Items","Autocomplete.Collection","KUMO_COMMAND_PALETTE_VARIANTS","KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS","CommandPalette"],"mappings":";;;;;;;;AAuFA,MAAMA,IAAgBC,EAAkC,EAAE;AAuC1D,SAASC,EAAO;AAAA,EACd,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AACF,GAAgB;AACd,QAAMC,IAAsB,CAACC,MAAwB;AACnD,IAAIH,IACFA,EAAgBG,CAAC,IAEjBJ,EAAa,EAAK;AAAA,EAEtB,GAEMK,IAAcC,EAAY,MAAM;AACpC,IAAAN,EAAa,EAAK;AAAA,EACpB,GAAG,CAACA,CAAY,CAAC;AAEjB,SACE,gBAAAO,EAACC,GAAA,EAAgB,MAAAT,GAAY,cAAAC,GAA4B,OAAK,IAC5D,UAAA,gBAAAS,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAH;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,SAASR;AAAA,MAAA;AAAA,IAAA;AAAA,IAEX,gBAAAI;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,IAAIC;AAAAA,QACJ,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OACE;AAAA,UACE,oBAAoB;AAAA,UACpB,0BACE;AAAA,QAAA;AAAA,QAIN,UAAA,gBAAAP,EAACX,EAAc,UAAd,EAAuB,OAAO,EAAE,SAASS,EAAA,GACvC,UAAAH,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,CACF,EAAA,CACF;AAEJ;AAcA,SAASa,EAA6B;AAAA,EACpC,MAAAhB;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAc;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,oBAAAC;AACF,GAA2C;AACzC,SACE,gBAAAhB;AAAA,IAACT;AAAA,IAAA;AAAA,MACC,MAAAC;AAAA,MACA,cAAAC;AAAA,MACA,iBAAAC;AAAA,MAEA,UAAA,gBAAAM;AAAA,QAACiB;AAAA,QAAA;AAAA,UACC,OAAAR;AAAA,UACA,OAAAC;AAAA,UACA,eAAAC;AAAA,UACA,mBAAAC;AAAA,UACA,mBAAAC;AAAA,UACA,QAAAC;AAAA,UACA,MAAAtB;AAAA,UACA,UAAAuB;AAAA,UACA,oBAAAC;AAAA,UAEC,UAAArB;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAKA,SAASuB,EAAY;AAAA,EACnB,UAAAvB;AAAA,EACA,SAAAwB;AAAA,EACA,UAAAC;AACF,GAIG;AACD,SACE,gBAAAlB,EAAC,OAAA,EAAI,WAAU,kDACZ,UAAA;AAAA,IAAAiB,KACC,gBAAAnB;AAAA,MAACqB;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,QAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAGV1B;AAAA,IACAyB;AAAA,EAAA,GACH;AAEJ;AAQA,MAAME,IAAOC,EAGX,SAAc,EAAE,UAAA5B,GAAU,WAAA6B,EAAA,GAAaC,GAAK;AAC5C,SACE,gBAAAzB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAyB;AAAA,MACA,WAAWlB;AAAA,QACT;AAAA,QACAiB;AAAA,MAAA;AAAA,MAGD,UAAA7B;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAED2B,EAAK,cAAc;AAOnB,SAASI,EAAM;AAAA,EACb,UAAA/B;AAAA,EACA,WAAA6B;AAAA,EACA,GAAGG;AACL,GAGG;AACD,SACE,gBAAA3B,EAAC4B,GAAA,EAAmB,WAAWrB,EAAG,eAAeiB,CAAS,GAAI,GAAGG,GAC9D,UAAAhC,GACH;AAEJ;AAOA,SAASkC,GAAW;AAAA,EAClB,UAAAlC;AAAA,EACA,WAAA6B;AACF,GAA2D;AACzD,SACE,gBAAAxB;AAAA,IAAC8B;AAAAA,IAAA;AAAA,MACC,WAAWvB;AAAA,QACT;AAAA,QACAiB;AAAA,MAAA;AAAA,MAGD,UAAA7B;AAAA,IAAA;AAAA,EAAA;AAGP;AAQA,SAASoC,GAAQ;AAAA,EACf,OAAArB;AAAA,EACA,UAAAsB;AAAA,EACA,UAAArC;AAAA,EACA,WAAA6B;AAAA,EACA,SAAAS;AACF,GAEG;AACD,SACE,gBAAAjC;AAAA,IAACkC;AAAAA,IAAA;AAAA,MACC,OAAAxB;AAAA,MACA,UAAAsB;AAAA,MACA,SAAAC;AAAA,MACA,WAAW1B;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAyB,KAAY;AAAA,QACZR;AAAA,MAAA;AAAA,MAGD,UAAA7B;AAAA,IAAA;AAAA,EAAA;AAGP;AAOA,SAASwC,GAAM,EAAE,UAAAxC,KAAsC;AACrD,SACE,gBAAAK,EAACoC,GAAA,EACC,4BAAC,OAAA,EAAI,WAAU,mBACb,UAAA,gBAAApC,EAAC,OAAE,WAAU,oBAAoB,UAAAL,KAAY,mBAAA,CAAmB,GAClE,GACF;AAEJ;AAOA,SAAS0C,GAAQ,EAAE,UAAA1C,KAAwC;AACzD,SACE,gBAAAK,EAAC,SAAI,WAAU,wCACZ,eAAY,gBAAAA,EAACsC,GAAA,EAAO,MAAM,GAAA,CAAI,EAAA,CACjC;AAEJ;AAQA,SAASC,GAAO,EAAE,UAAA5C,KAAuC;AACvD,SACE,gBAAAK,EAAC,OAAA,EAAI,WAAU,sGACZ,UAAAL,EAAA,CACH;AAEJ;AAMA,SAAS6C,EAAgB;AAAA,EACvB,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAlB;AACF,GAIG;AACD,MAAI,CAACkB,KAAcA,EAAW,WAAW;AACvC,WAAO,gBAAA1C,EAAC,QAAA,EAAK,WAAAwB,GAAuB,UAAAiB,EAAA,CAAK;AAI3C,QAAME,IAAmB,CAAC,GAAGD,CAAU,EAAE,KAAK,CAACE,GAAGC,MAAMD,EAAE,CAAC,IAAIC,EAAE,CAAC,CAAC,GAC7DC,IAAqC,CAAA;AAE3C,aAAWC,KAASJ,GAAkB;AACpC,UAAMK,IAAOF,EAAiBA,EAAiB,SAAS,CAAC;AACzD,IAAIE,KAAQD,EAAM,CAAC,KAAKC,EAAK,CAAC,IAAI,IAEhCA,EAAK,CAAC,IAAI,KAAK,IAAIA,EAAK,CAAC,GAAGD,EAAM,CAAC,CAAC,IAEpCD,EAAiB,KAAK,CAAC,GAAGC,CAAK,CAAC;AAAA,EAEpC;AAEA,QAAME,IAA2B,CAAA;AACjC,MAAIC,IAAY;AAEhB,SAAAJ,EAAiB,QAAQ,CAACC,GAAOI,MAAM;AACrC,UAAM,CAACC,GAAOC,CAAG,IAAIN;AAGrB,IAAIK,IAAQF,KACVD,EAAM,KAAK,gBAAAjD,EAAC,QAAA,EAAwB,UAAAyC,EAAK,MAAMS,GAAWE,CAAK,EAAA,GAAzC,QAAQD,CAAC,EAAkC,CAAO,GAI1EF,EAAM;AAAA,MACJ,gBAAAjD;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAET,UAAAyC,EAAK,MAAMW,GAAOC,IAAM,CAAC;AAAA,QAAA;AAAA,QAHrB,aAAaF,CAAC;AAAA,MAAA;AAAA,IAIrB,GAGFD,IAAYG,IAAM;AAAA,EACpB,CAAC,GAGGH,IAAYT,EAAK,UACnBQ,EAAM,uBAAM,QAAA,EAAqB,UAAAR,EAAK,MAAMS,CAAS,EAAA,GAAhC,UAAkC,CAAO,GAGzD,gBAAAlD,EAAC,QAAA,EAAK,WAAAwB,GAAuB,UAAAyB,EAAA,CAAM;AAC5C;AAQA,SAASK,GAAc;AAAA,EACrB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAlD;AAAA,EACA,SAAAuB;AAAA,EACA,WAAA4B,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,gBAAAC,IAAiB;AACnB,GAAqC;AACnC,SACE,gBAAA7D;AAAA,IAACgC;AAAAA,IAAA;AAAA,MACC,OAAAxB;AAAA,MACA,SAASqD,IAAiB,SAAY,CAAClE,MAAwBoC,EAAQpC,CAAC;AAAA,MACxE,WAAWU;AAAA,QACT;AAAA,QACAwD,IACI,mBACA;AAAA,MAAA;AAAA,MAGL,UAAA;AAAA,QAAAH,KACC,gBAAA5D,EAAC,OAAA,EAAI,WAAU,oDACZ,UAAA4D,GACH;AAAA,0BAED,OAAA,EAAI,WAAU,kBACb,UAAA,gBAAA1D,EAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,UAAAsD,GAAa,IAAI,CAACQ,GAAOC,MACxB,gBAAA/D,EAAC,QAAA,EAAiB,WAAU,2BAC1B,UAAA;AAAA,YAAA,gBAAAF;AAAA,cAACwC;AAAA,cAAA;AAAA,gBACC,MAAMwB;AAAA,gBACN,YAAYN,IAAuBO,CAAK;AAAA,gBACxC,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAEZ,gBAAAjE;AAAA,cAACkE;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,QAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UACT,EAAA,GATSD,CAUX,CACD;AAAA,UACD,gBAAAjE;AAAA,YAACwC;AAAA,YAAA;AAAA,cACC,MAAMe;AAAA,cACN,YAAYE;AAAA,cACZ,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEXK,KACC,gBAAA9D,EAACmE,GAAA,EAAmB,WAAU,6CAAA,CAA6C;AAAA,UAE5ER,KACC,gBAAAzD,EAAAkE,GAAA,EACE,UAAA;AAAA,YAAA,gBAAApE,EAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,KAAC;AAAA,YACpC,gBAAAA,EAAC,QAAA,EAAK,WAAU,qCACb,UAAA2D,EAAA,CACH;AAAA,UAAA,EAAA,CACF;AAAA,QAAA,EAAA,CAEJ,EAAA,CACF;AAAA,QACCE,KAAa,CAACC,KAAY,CAACC,KAC1B,gBAAA/D,EAACqE,GAAA,EAAe,WAAU,2GAAA,CAA2G;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI7I;AAKA,SAASC,GAAU;AAAA,EACjB,UAAA3E;AAAA,EACA,WAAA6B;AACF,GAGG;AACD,SACE,gBAAAxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWO;AAAA,QACT;AAAA,QACAiB;AAAA,MAAA;AAAA,MAGD,UAAA7B;AAAA,IAAA;AAAA,EAAA;AAGP;AASA,MAAM4E,IAAejF,EAAiC,EAAE,GA6ElDkF,KAAgB,MAAM;AAE5B,SAASvD,EAA8B;AAAA,EACrC,UAAAtB;AAAA,EACA,OAAAc;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,QAAAC,IAAS0D;AAAA,EACT,MAAAhF,IAAO;AAAA,EACP,WAAAgC;AAAA,EACA,UAAAT;AAAA,EACA,oBAAAC;AACF,GAA8B;AAC5B,QAAMyD,IAAsBC,EAAe,EAAE,GAEvCC,IAAwB5E;AAAA,IAC5B,CACE6E,GACAC,MACG;AACH,MAAAJ,EAAoB,UAAUI,EAAQ,OACtCjE,IAAoBgE,GAAMC,CAAO;AAAA,IACnC;AAAA,IACA,CAACjE,CAAiB;AAAA,EAAA,GAIdkE,IAAqB/E;AAAA,IACzB,CAACF,MAA2B;AAC1B,YAAMkF,IAAUlF,EAAE,QAAQ,SACpBmF,IAAenF,EAAE,WAAWA,EAAE;AAEpC,UAAIkF,KAAWC,KAAgBjE,KAAYC,GAAoB;AAE7D,cAAMiE,IADkBjE,EAAmBP,CAAK,EACRgE,EAAoB,OAAO;AAEnE,QAAIQ,MAAoB,WACtBpF,EAAE,eAAA,GACFkB,EAASkE,GAAiB,EAAE,QAAQ,GAAA,CAAM;AAAA,MAE9C;AAAA,IACF;AAAA,IACA,CAACxE,GAAOM,GAAUC,CAAkB;AAAA,EAAA;AAGtC,SACE,gBAAAhB,EAACsE,MAAU,WAAA9C,GACT,UAAA,gBAAAxB;AAAA,IAACkF;AAAAA,IAAA;AAAA,MACC,OAAAzE;AAAA,MACA,OAAAC;AAAA,MACA,eAAAC;AAAA,MACA,mBAAmBgE;AAAA,MACnB,mBAAA9D;AAAA,MACA,QAAAC;AAAA,MACA,eAAc;AAAA,MACd,eAAa;AAAA,MACb,MAAAtB;AAAA,MAEA,UAAA,gBAAAQ,EAACuE,EAAa,UAAb,EAAsB,OAAO,EAAE,gBAAgBO,EAAA,GAC7C,UAAAnF,EAAA,CACH;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAQA,SAASwF,GAAW;AAAA,EAClB,WAAAC,IAAY;AAAA,EACZ,aAAAC;AAAA,EACA,WAAA7D;AAAA,EACA,WAAW8D;AAAA,EACX,SAAAnE;AAAA,EACA,UAAAC;AAAA,EACA,GAAGO;AACL,GASG;AACD,QAAM,EAAE,gBAAA4D,EAAA,IAAmBC,EAAWjB,CAAY,GAC5C,EAAE,SAAAkB,EAAA,IAAYD,EAAWnG,CAAa,GAEtCqG,IAAgB3F;AAAA,IACpB,CAACF,MAA2B;AAG1B,UADAyF,IAAgBzF,CAAC,GACb,CAAAA,EAAE,kBAGN;AAAA,YAAIA,EAAE,QAAQ,YAAY4F,GAAS;AACjC,UAAA5F,EAAE,eAAA,GACF4F,EAAA;AACA;AAAA,QACF;AACA,QAAAF,IAAiB1F,CAAC;AAAA;AAAA,IACpB;AAAA,IACA,CAAC0F,GAAgBD,GAAeG,CAAO;AAAA,EAAA;AAGzC,SACE,gBAAAzF,EAACkB,GAAA,EAAY,SAAAC,GAAkB,UAAAC,GAC7B,UAAA,gBAAApB;AAAA,IAAC2F;AAAAA,IAAA;AAAA,MACC,aAAAN;AAAA,MACA,WAAW9E;AAAA,QACT;AAAA,QACA;AAAA,QACAiB;AAAA,MAAA;AAAA,MAEF,WAAWkE;AAAA,MAEX,WAAAN;AAAA,MACC,GAAGzD;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;AAWA,SAASiE,GAAQ;AAAA,EACf,UAAAjG;AAAA,EACA,WAAA6B;AACF,GAA4E;AAC1E,SACE,gBAAAxB,EAAC6F,GAAA,EAAkB,WAAWtF,EAAG,aAAaiB,CAAS,GACpD,UAAA7B,GACH;AAEJ;AAEA,MAAMmG,KAAQC,GAGDC,KAAgC,CAAA,GAEhCC,KAAwC,CAAA,GA2CxCC,KAAiB;AAAA;AAAA,EAE5B,QAAA3G;AAAA;AAAA,EAEA,MAAAiB;AAAA;AAAA,EAEA,OAAAS;AAAA;AAAA,EAEA,OAAOkE;AAAA;AAAA,EAEP,MAAA7D;AAAA;AAAA,EAEA,OAAAI;AAAA;AAAA,EAEA,YAAAG;AAAA;AAAA,EAEA,MAAAE;AAAA;AAAA,EAEA,YAAAuB;AAAA;AAAA,EAEA,iBAAAd;AAAA;AAAA,EAEA,OAAAL;AAAA;AAAA,EAEA,SAAAE;AAAA;AAAA,EAEA,QAAAE;AAAA;AAAA,EAEA,SAAAqD;AAAA;AAAA,EAEA,OAAAE;AACF;"}

package/dist/components/cloudflare-logo.js

@@ -0,0 +1,10 @@
+"use client";
+import { C as o, a as L, K as O, P as l, g as r } from "../cloudflare-logo-Dqd1VD9z.js";
+export {
+  o as CloudflareLogo,
+  L as KUMO_CLOUDFLARE_LOGO_DEFAULT_VARIANTS,
+  O as KUMO_CLOUDFLARE_LOGO_VARIANTS,
+  l as PoweredByCloudflare,
+  r as generateCloudflareLogoSvg
+};
+//# sourceMappingURL=cloudflare-logo.js.map

package/dist/components/cloudflare-logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cloudflare-logo.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/command-palette.js

@@ -1,5 +1,5 @@
 "use client";
-import { C as _, a, K as M } from "../command-palette-BxmGYxBv.js";
+import { C as _, a, K as M } from "../command-palette-J50WKjS7.js";
 export {
   _ as CommandPalette,
   a as KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS,