@flanksource/clicky-ui 0.3.21 → 0.3.22

package/dist/components/MdxEditorToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"MdxEditorToolbar.js","sources":["../../src/components/MdxEditorToolbar.tsx"],"sourcesContent":["import type { ConditionalContentsOption, EditorInFocus, FallbackOption, ViewMode } from \"@mdxeditor/editor\";\nimport type { MdxEditorPluginOptions } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nfunction isEnabled<T extends object>(value: boolean | T | undefined, defaultValue = true): boolean {\n  return value === undefined ? defaultValue : value !== false;\n}\n\nfunction diffViewOptions(diffMode: MdxEditorPluginOptions[\"diffMode\"]): ViewMode[] | undefined {\n  if (!diffMode) return undefined;\n  if (typeof diffMode === \"object\" && diffMode.viewModes?.length) {\n    return [...diffMode.viewModes];\n  }\n  return [\"rich-text\", \"source\", \"diff\"];\n}\n\nexport function MdxEditorToolbar({\n  mdx,\n  options,\n}: {\n  mdx: MdxEditorModule;\n  options: MdxEditorPluginOptions;\n}) {\n  const { ConditionalContents, ChangeCodeMirrorLanguage } = mdx;\n  const toolbarOptions: Array<ConditionalContentsOption | FallbackOption> = [\n    ...(isEnabled(options.codeBlocks) && isEnabled(options.codeMirror)\n      ? [\n          {\n            when: (editor: EditorInFocus | null) => editor?.editorType === \"codeblock\",\n            contents: () => <ChangeCodeMirrorLanguage />,\n          },\n        ]\n      : []),\n    {\n      fallback: () => <DefaultToolbarContents mdx={mdx} options={options} />,\n    },\n  ];\n  return <ConditionalContents options={toolbarOptions} />;\n}\n\nfunction DefaultToolbarContents({\n  mdx,\n  options,\n}: {\n  mdx: MdxEditorModule;\n  options: MdxEditorPluginOptions;\n}) {\n  const {\n    BlockTypeSelect,\n    BoldItalicUnderlineToggles,\n    CodeToggle,\n    CreateLink,\n    DiffSourceToggleWrapper,\n    InsertAdmonition,\n    InsertCodeBlock,\n    InsertFrontmatter,\n    InsertImage,\n    InsertTable,\n    InsertThematicBreak,\n    ListsToggle,\n    Separator,\n    UndoRedo,\n  } = mdx;\n  const controls = (\n    <>\n      <UndoRedo />\n      <Separator />\n      <BoldItalicUnderlineToggles />\n      <CodeToggle />\n      {isEnabled(options.headings) && (\n        <>\n          <Separator />\n          <BlockTypeSelect />\n        </>\n      )}\n      {isEnabled(options.lists) && <ListsToggle />}\n      {isEnabled(options.links) && (\n        <>\n          <Separator />\n          <CreateLink />\n        </>\n      )}\n      {isEnabled(options.images) && <InsertImage />}\n      {(isEnabled(options.tables) || isEnabled(options.thematicBreak) || isEnabled(options.codeBlocks)) && <Separator />}\n      {isEnabled(options.tables) && <InsertTable />}\n      {isEnabled(options.thematicBreak) && <InsertThematicBreak />}\n      {isEnabled(options.codeBlocks) && <InsertCodeBlock />}\n      {(isEnabled(options.frontmatter) || isEnabled(options.admonitions)) && <Separator />}\n      {isEnabled(options.frontmatter) && <InsertFrontmatter />}\n      {isEnabled(options.admonitions) && <InsertAdmonition />}\n    </>\n  );\n\n  const viewOptions = diffViewOptions(options.diffMode);\n  if (!viewOptions) return controls;\n  return <DiffSourceToggleWrapper options={viewOptions}>{controls}</DiffSourceToggleWrapper>;\n}\n"],"names":[],"mappings":";AAKA,SAAS,UAA4B,OAAgC,eAAe,MAAe;AACjG,SAAO,UAAU,SAAY,eAAe,UAAU;AACxD;AAEA,SAAS,gBAAgB,UAAsE;;AAC7F,MAAI,CAAC,SAAU,QAAO;AACtB,MAAI,OAAO,aAAa,cAAY,cAAS,cAAT,mBAAoB,SAAQ;AAC9D,WAAO,CAAC,GAAG,SAAS,SAAS;AAAA,EAC/B;AACA,SAAO,CAAC,aAAa,UAAU,MAAM;AACvC;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,qBAAqB,yBAAA,IAA6B;AAC1D,QAAM,iBAAoE;AAAA,IACxE,GAAI,UAAU,QAAQ,UAAU,KAAK,UAAU,QAAQ,UAAU,IAC7D;AAAA,MACE;AAAA,QACE,MAAM,CAAC,YAAiC,iCAAQ,gBAAe;AAAA,QAC/D,UAAU,MAAM,oBAAC,0BAAA,CAAA,CAAyB;AAAA,MAAA;AAAA,IAC5C,IAEF,CAAA;AAAA,IACJ;AAAA,MACE,UAAU,MAAM,oBAAC,wBAAA,EAAuB,KAAU,QAAA,CAAkB;AAAA,IAAA;AAAA,EACtE;AAEF,SAAO,oBAAC,qBAAA,EAAoB,SAAS,eAAA,CAAgB;AACvD;AAEA,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AACF,GAGG;AACD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,WACJ,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,UAAA,EAAS;AAAA,wBACT,WAAA,EAAU;AAAA,wBACV,4BAAA,EAA2B;AAAA,wBAC3B,YAAA,EAAW;AAAA,IACX,UAAU,QAAQ,QAAQ,KACzB,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,WAAA,EAAU;AAAA,0BACV,iBAAA,CAAA,CAAgB;AAAA,IAAA,GACnB;AAAA,IAED,UAAU,QAAQ,KAAK,yBAAM,aAAA,CAAA,CAAY;AAAA,IACzC,UAAU,QAAQ,KAAK,KACtB,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,WAAA,EAAU;AAAA,0BACV,YAAA,CAAA,CAAW;AAAA,IAAA,GACd;AAAA,IAED,UAAU,QAAQ,MAAM,yBAAM,aAAA,CAAA,CAAY;AAAA,KACzC,UAAU,QAAQ,MAAM,KAAK,UAAU,QAAQ,aAAa,KAAK,UAAU,QAAQ,UAAU,0BAAO,WAAA,CAAA,CAAU;AAAA,IAC/G,UAAU,QAAQ,MAAM,yBAAM,aAAA,CAAA,CAAY;AAAA,IAC1C,UAAU,QAAQ,aAAa,yBAAM,qBAAA,CAAA,CAAoB;AAAA,IACzD,UAAU,QAAQ,UAAU,yBAAM,iBAAA,CAAA,CAAgB;AAAA,KACjD,UAAU,QAAQ,WAAW,KAAK,UAAU,QAAQ,WAAW,MAAM,oBAAC,WAAA,EAAU;AAAA,IACjF,UAAU,QAAQ,WAAW,yBAAM,mBAAA,CAAA,CAAkB;AAAA,IACrD,UAAU,QAAQ,WAAW,yBAAM,kBAAA,CAAA,CAAiB;AAAA,EAAA,GACvD;AAGF,QAAM,cAAc,gBAAgB,QAAQ,QAAQ;AACpD,MAAI,CAAC,YAAa,QAAO;AACzB,SAAO,oBAAC,yBAAA,EAAwB,SAAS,aAAc,UAAA,UAAS;AAClE;"}
+{"version":3,"file":"MdxEditorToolbar.js","sources":["../../src/components/MdxEditorToolbar.tsx"],"sourcesContent":["import type { ConditionalContentsOption, EditorInFocus, FallbackOption, ViewMode } from \"@mdxeditor/editor\";\nimport { calloutToolbarButton } from \"./mdx-editor-callout\";\nimport type { MdxEditorPluginOptions } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nfunction isEnabled<T extends object>(value: boolean | T | undefined, defaultValue = true): boolean {\n  return value === undefined ? defaultValue : value !== false;\n}\n\nfunction optionObject<T extends object>(value: boolean | T | undefined): T | undefined {\n  return typeof value === \"object\" && value !== null ? value : undefined;\n}\n\nfunction diffViewOptions(diffMode: MdxEditorPluginOptions[\"diffMode\"]): ViewMode[] | undefined {\n  if (!diffMode) return undefined;\n  if (typeof diffMode === \"object\" && diffMode.viewModes?.length) {\n    return [...diffMode.viewModes];\n  }\n  return [\"rich-text\", \"source\", \"diff\"];\n}\n\nexport function MdxEditorToolbar({\n  mdx,\n  options,\n}: {\n  mdx: MdxEditorModule;\n  options: MdxEditorPluginOptions;\n}) {\n  const { ConditionalContents, ChangeCodeMirrorLanguage } = mdx;\n  const toolbarOptions: Array<ConditionalContentsOption | FallbackOption> = [\n    ...(isEnabled(options.codeBlocks) && isEnabled(options.codeMirror)\n      ? [\n          {\n            when: (editor: EditorInFocus | null) => editor?.editorType === \"codeblock\",\n            contents: () => <ChangeCodeMirrorLanguage />,\n          },\n        ]\n      : []),\n    {\n      fallback: () => <DefaultToolbarContents mdx={mdx} options={options} />,\n    },\n  ];\n  return <ConditionalContents options={toolbarOptions} />;\n}\n\nfunction DefaultToolbarContents({\n  mdx,\n  options,\n}: {\n  mdx: MdxEditorModule;\n  options: MdxEditorPluginOptions;\n}) {\n  const {\n    BlockTypeSelect,\n    BoldItalicUnderlineToggles,\n    CodeToggle,\n    CreateLink,\n    DiffSourceToggleWrapper,\n    InsertAdmonition,\n    InsertCodeBlock,\n    InsertFrontmatter,\n    InsertImage,\n    InsertTable,\n    InsertThematicBreak,\n    ListsToggle,\n    Separator,\n    UndoRedo,\n  } = mdx;\n  const InsertCallout = calloutToolbarButton(mdx, optionObject(options.callouts) ?? {});\n  const extra = typeof options.toolbar === \"object\" ? options.toolbar.extra : undefined;\n  const controls = (\n    <>\n      <UndoRedo />\n      <Separator />\n      <BoldItalicUnderlineToggles />\n      <CodeToggle />\n      {isEnabled(options.headings) && (\n        <>\n          <Separator />\n          <BlockTypeSelect />\n        </>\n      )}\n      {isEnabled(options.lists) && <ListsToggle />}\n      {isEnabled(options.links) && (\n        <>\n          <Separator />\n          <CreateLink />\n        </>\n      )}\n      {isEnabled(options.images) && <InsertImage />}\n      {(isEnabled(options.tables) || isEnabled(options.thematicBreak) || isEnabled(options.codeBlocks)) && <Separator />}\n      {isEnabled(options.tables) && <InsertTable />}\n      {isEnabled(options.thematicBreak) && <InsertThematicBreak />}\n      {isEnabled(options.codeBlocks) && <InsertCodeBlock />}\n      {(isEnabled(options.frontmatter) || isEnabled(options.admonitions) || isEnabled(options.callouts, false)) && (\n        <Separator />\n      )}\n      {isEnabled(options.frontmatter) && <InsertFrontmatter />}\n      {isEnabled(options.admonitions) && <InsertAdmonition />}\n      {isEnabled(options.callouts, false) && <InsertCallout />}\n      {extra}\n    </>\n  );\n\n  const viewOptions = diffViewOptions(options.diffMode);\n  if (!viewOptions) return controls;\n  return <DiffSourceToggleWrapper options={viewOptions}>{controls}</DiffSourceToggleWrapper>;\n}\n"],"names":[],"mappings":"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"}

package/dist/components/MultiSelect.cjs

@@ -65,7 +65,9 @@ function MultiSelect({
         className: utils.cn(
           "w-fit max-w-[15rem] min-w-0 justify-between gap-3 text-left font-normal",
           triggerClassName,
-          value.length === 0 && "text-muted-foreground"
+          // Empty means the trigger is showing its placeholder, so it reads at
+          // placeholder weight rather than at helper-text weight.
+          value.length === 0 && "text-placeholder"
         ),
         ...getReferenceProps(),
         children: [

package/dist/components/MultiSelect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.cjs","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode, type Ref } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\nimport { useEscapeLayer, useFloatingZIndex } from \"../overlay/modalStack\";\n\nexport type MultiSelectOption = {\n  /** Stable option value written into the selected value array. */\n  value: string;\n  /** Visible option label in the menu and trigger summary. */\n  label: ReactNode;\n  /** Prevents selecting this option while still showing it in the menu. */\n  disabled?: boolean;\n  /** Optional browser tooltip for truncated or explanatory labels. */\n  title?: string;\n};\n\nexport type MultiSelectProps = {\n  /** Available options, rendered in the order provided. */\n  options: MultiSelectOption[];\n  /** Controlled selected option values. */\n  value: string[];\n  /** Called with the complete next value array after each toggle. */\n  onChange: (next: string[]) => void;\n  /** Trigger text when nothing is selected. Also labels the menu. */\n  placeholder?: string;\n  /** Accessible name for the trigger. Use when the field is labelled\n   *  elsewhere so the trigger doesn't have to borrow `placeholder` for its\n   *  name (which would force a synthesized placeholder). */\n  ariaLabel?: string;\n  /** Disables opening and changing selections. */\n  disabled?: boolean;\n  /** Classes applied to the root wrapper. */\n  className?: string;\n  /** Classes applied to the trigger button. */\n  triggerClassName?: string;\n  /** Classes applied to the popover menu. */\n  menuClassName?: string;\n};\n\nexport function MultiSelect({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select options\",\n  ariaLabel,\n  disabled,\n  className,\n  triggerClassName,\n  menuClassName,\n}: MultiSelectProps) {\n  const [open, setOpen] = useState(false);\n\n  // Portaled (floating-ui) so the menu escapes `overflow` clipping from\n  // scroll-container ancestors, matching Combobox/DropdownMenu.\n  const floatingZ = useFloatingZIndex();\n  const { refs, floatingStyles, context } = useFloating({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useClick(context),\n    useDismiss(context, { escapeKey: false }),\n    useRole(context, { role: \"menu\" }),\n  ]);\n  useEscapeLayer(open, () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n  });\n\n  const selected = useMemo(() => {\n    const selectedOptions = options.filter((option) => value.includes(option.value));\n    const labels = selectedOptions\n      .map((option) => option.label)\n      .filter((label): label is string => typeof label === \"string\");\n\n    if (selectedOptions.length === 0) return placeholder;\n    if (labels.length === 0) return `${selectedOptions.length} selected`;\n    if (labels.length <= 2) return labels.join(\", \");\n    return `${labels.length} selected`;\n  }, [options, placeholder, value]);\n\n  function toggleOption(nextValue: string) {\n    if (value.includes(nextValue)) {\n      onChange(value.filter((current) => current !== nextValue));\n      return;\n    }\n    onChange([...value, nextValue]);\n  }\n\n  // `min-w-0` here, and a shrinkable trigger below, let the summary ellipsize\n  // inside a width-capped flex parent (a FilterBar chip) rather than overflow\n  // onto its neighbour.\n  return (\n    <div className={cn(\"inline-flex min-w-0\", className)}>\n      <Button\n        ref={refs.setReference as Ref<HTMLButtonElement>}\n        type=\"button\"\n        variant=\"outline\"\n        disabled={disabled}\n        aria-label={ariaLabel ?? `${placeholder} filter`}\n        className={cn(\n          \"w-fit max-w-[15rem] min-w-0 justify-between gap-3 text-left font-normal\",\n          triggerClassName,\n          value.length === 0 && \"text-muted-foreground\",\n        )}\n        {...getReferenceProps()}\n      >\n        <span className=\"truncate\">{selected}</span>\n        <Icon icon={open ? UiChevronUp : UiChevronDown} className=\"shrink-0 text-muted-foreground\" />\n      </Button>\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={placeholder}\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className={cn(\n                \"min-w-[14rem] max-w-[20rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n          <div className=\"mb-1 flex items-center justify-between gap-2 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            <span>{placeholder}</span>\n            <button\n              type=\"button\"\n              className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n              onClick={() => onChange([])}\n              disabled={value.length === 0}\n            >\n              Clear all\n            </button>\n          </div>\n          <div className=\"max-h-64 overflow-auto\">\n            {options.map((option) => {\n              const checked = value.includes(option.value);\n              return (\n                <label\n                  key={option.value}\n                  className={cn(\n                    \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent\",\n                    option.disabled && \"cursor-not-allowed opacity-50\",\n                  )}\n                >\n                  <input\n                    type=\"checkbox\"\n                    role=\"menuitemcheckbox\"\n                    className=\"size-4 rounded border border-input\"\n                    checked={checked}\n                    disabled={option.disabled}\n                    onChange={() => toggleOption(option.value)}\n                  />\n                  <span className=\"min-w-0 truncate\">{option.label}</span>\n                </label>\n              );\n            })}\n          </div>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useFloatingZIndex","useFloating","autoUpdate","offset","flip","shift","useInteractions","useClick","useDismiss","useRole","useEscapeLayer","useMemo","cn","jsxs","Button","jsx","Icon","UiChevronUp","UiChevronDown","FloatingPortal","FloatingFocusManager"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.cjs","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode, type Ref } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\nimport { useEscapeLayer, useFloatingZIndex } from \"../overlay/modalStack\";\n\nexport type MultiSelectOption = {\n  /** Stable option value written into the selected value array. */\n  value: string;\n  /** Visible option label in the menu and trigger summary. */\n  label: ReactNode;\n  /** Prevents selecting this option while still showing it in the menu. */\n  disabled?: boolean;\n  /** Optional browser tooltip for truncated or explanatory labels. */\n  title?: string;\n};\n\nexport type MultiSelectProps = {\n  /** Available options, rendered in the order provided. */\n  options: MultiSelectOption[];\n  /** Controlled selected option values. */\n  value: string[];\n  /** Called with the complete next value array after each toggle. */\n  onChange: (next: string[]) => void;\n  /** Trigger text when nothing is selected. Also labels the menu. */\n  placeholder?: string;\n  /** Accessible name for the trigger. Use when the field is labelled\n   *  elsewhere so the trigger doesn't have to borrow `placeholder` for its\n   *  name (which would force a synthesized placeholder). */\n  ariaLabel?: string;\n  /** Disables opening and changing selections. */\n  disabled?: boolean;\n  /** Classes applied to the root wrapper. */\n  className?: string;\n  /** Classes applied to the trigger button. */\n  triggerClassName?: string;\n  /** Classes applied to the popover menu. */\n  menuClassName?: string;\n};\n\nexport function MultiSelect({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select options\",\n  ariaLabel,\n  disabled,\n  className,\n  triggerClassName,\n  menuClassName,\n}: MultiSelectProps) {\n  const [open, setOpen] = useState(false);\n\n  // Portaled (floating-ui) so the menu escapes `overflow` clipping from\n  // scroll-container ancestors, matching Combobox/DropdownMenu.\n  const floatingZ = useFloatingZIndex();\n  const { refs, floatingStyles, context } = useFloating({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useClick(context),\n    useDismiss(context, { escapeKey: false }),\n    useRole(context, { role: \"menu\" }),\n  ]);\n  useEscapeLayer(open, () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n  });\n\n  const selected = useMemo(() => {\n    const selectedOptions = options.filter((option) => value.includes(option.value));\n    const labels = selectedOptions\n      .map((option) => option.label)\n      .filter((label): label is string => typeof label === \"string\");\n\n    if (selectedOptions.length === 0) return placeholder;\n    if (labels.length === 0) return `${selectedOptions.length} selected`;\n    if (labels.length <= 2) return labels.join(\", \");\n    return `${labels.length} selected`;\n  }, [options, placeholder, value]);\n\n  function toggleOption(nextValue: string) {\n    if (value.includes(nextValue)) {\n      onChange(value.filter((current) => current !== nextValue));\n      return;\n    }\n    onChange([...value, nextValue]);\n  }\n\n  // `min-w-0` here, and a shrinkable trigger below, let the summary ellipsize\n  // inside a width-capped flex parent (a FilterBar chip) rather than overflow\n  // onto its neighbour.\n  return (\n    <div className={cn(\"inline-flex min-w-0\", className)}>\n      <Button\n        ref={refs.setReference as Ref<HTMLButtonElement>}\n        type=\"button\"\n        variant=\"outline\"\n        disabled={disabled}\n        aria-label={ariaLabel ?? `${placeholder} filter`}\n        className={cn(\n          \"w-fit max-w-[15rem] min-w-0 justify-between gap-3 text-left font-normal\",\n          triggerClassName,\n          // Empty means the trigger is showing its placeholder, so it reads at\n          // placeholder weight rather than at helper-text weight.\n          value.length === 0 && \"text-placeholder\",\n        )}\n        {...getReferenceProps()}\n      >\n        <span className=\"truncate\">{selected}</span>\n        <Icon icon={open ? UiChevronUp : UiChevronDown} className=\"shrink-0 text-muted-foreground\" />\n      </Button>\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={placeholder}\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className={cn(\n                \"min-w-[14rem] max-w-[20rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n          <div className=\"mb-1 flex items-center justify-between gap-2 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            <span>{placeholder}</span>\n            <button\n              type=\"button\"\n              className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n              onClick={() => onChange([])}\n              disabled={value.length === 0}\n            >\n              Clear all\n            </button>\n          </div>\n          <div className=\"max-h-64 overflow-auto\">\n            {options.map((option) => {\n              const checked = value.includes(option.value);\n              return (\n                <label\n                  key={option.value}\n                  className={cn(\n                    \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent\",\n                    option.disabled && \"cursor-not-allowed opacity-50\",\n                  )}\n                >\n                  <input\n                    type=\"checkbox\"\n                    role=\"menuitemcheckbox\"\n                    className=\"size-4 rounded border border-input\"\n                    checked={checked}\n                    disabled={option.disabled}\n                    onChange={() => toggleOption(option.value)}\n                  />\n                  <span className=\"min-w-0 truncate\">{option.label}</span>\n                </label>\n              );\n            })}\n          </div>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useFloatingZIndex","useFloating","autoUpdate","offset","flip","shift","useInteractions","useClick","useDismiss","useRole","useEscapeLayer","useMemo","cn","jsxs","Button","jsx","Icon","UiChevronUp","UiChevronDown","FloatingPortal","FloatingFocusManager"],"mappings":"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"}

package/dist/components/MultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../src/components/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAoBpE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,KAAK,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,yDAAyD;IACzD,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,yCAAyC;IACzC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,mEAAmE;IACnE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;8DAE0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAA8B,EAC9B,SAAS,EACT,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,aAAa,GACd,EAAE,gBAAgB,2CAuHlB"}
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../src/components/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAoBpE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,KAAK,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,yDAAyD;IACzD,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,yCAAyC;IACzC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,mEAAmE;IACnE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;8DAE0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAA8B,EAC9B,SAAS,EACT,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,aAAa,GACd,EAAE,gBAAgB,2CAyHlB"}

package/dist/components/MultiSelect.js

@@ -63,7 +63,9 @@ function MultiSelect({
         className: cn(
           "w-fit max-w-[15rem] min-w-0 justify-between gap-3 text-left font-normal",
           triggerClassName,
-          value.length === 0 && "text-muted-foreground"
+          // Empty means the trigger is showing its placeholder, so it reads at
+          // placeholder weight rather than at helper-text weight.
+          value.length === 0 && "text-placeholder"
         ),
         ...getReferenceProps(),
         children: [

package/dist/components/MultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode, type Ref } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\nimport { useEscapeLayer, useFloatingZIndex } from \"../overlay/modalStack\";\n\nexport type MultiSelectOption = {\n  /** Stable option value written into the selected value array. */\n  value: string;\n  /** Visible option label in the menu and trigger summary. */\n  label: ReactNode;\n  /** Prevents selecting this option while still showing it in the menu. */\n  disabled?: boolean;\n  /** Optional browser tooltip for truncated or explanatory labels. */\n  title?: string;\n};\n\nexport type MultiSelectProps = {\n  /** Available options, rendered in the order provided. */\n  options: MultiSelectOption[];\n  /** Controlled selected option values. */\n  value: string[];\n  /** Called with the complete next value array after each toggle. */\n  onChange: (next: string[]) => void;\n  /** Trigger text when nothing is selected. Also labels the menu. */\n  placeholder?: string;\n  /** Accessible name for the trigger. Use when the field is labelled\n   *  elsewhere so the trigger doesn't have to borrow `placeholder` for its\n   *  name (which would force a synthesized placeholder). */\n  ariaLabel?: string;\n  /** Disables opening and changing selections. */\n  disabled?: boolean;\n  /** Classes applied to the root wrapper. */\n  className?: string;\n  /** Classes applied to the trigger button. */\n  triggerClassName?: string;\n  /** Classes applied to the popover menu. */\n  menuClassName?: string;\n};\n\nexport function MultiSelect({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select options\",\n  ariaLabel,\n  disabled,\n  className,\n  triggerClassName,\n  menuClassName,\n}: MultiSelectProps) {\n  const [open, setOpen] = useState(false);\n\n  // Portaled (floating-ui) so the menu escapes `overflow` clipping from\n  // scroll-container ancestors, matching Combobox/DropdownMenu.\n  const floatingZ = useFloatingZIndex();\n  const { refs, floatingStyles, context } = useFloating({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useClick(context),\n    useDismiss(context, { escapeKey: false }),\n    useRole(context, { role: \"menu\" }),\n  ]);\n  useEscapeLayer(open, () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n  });\n\n  const selected = useMemo(() => {\n    const selectedOptions = options.filter((option) => value.includes(option.value));\n    const labels = selectedOptions\n      .map((option) => option.label)\n      .filter((label): label is string => typeof label === \"string\");\n\n    if (selectedOptions.length === 0) return placeholder;\n    if (labels.length === 0) return `${selectedOptions.length} selected`;\n    if (labels.length <= 2) return labels.join(\", \");\n    return `${labels.length} selected`;\n  }, [options, placeholder, value]);\n\n  function toggleOption(nextValue: string) {\n    if (value.includes(nextValue)) {\n      onChange(value.filter((current) => current !== nextValue));\n      return;\n    }\n    onChange([...value, nextValue]);\n  }\n\n  // `min-w-0` here, and a shrinkable trigger below, let the summary ellipsize\n  // inside a width-capped flex parent (a FilterBar chip) rather than overflow\n  // onto its neighbour.\n  return (\n    <div className={cn(\"inline-flex min-w-0\", className)}>\n      <Button\n        ref={refs.setReference as Ref<HTMLButtonElement>}\n        type=\"button\"\n        variant=\"outline\"\n        disabled={disabled}\n        aria-label={ariaLabel ?? `${placeholder} filter`}\n        className={cn(\n          \"w-fit max-w-[15rem] min-w-0 justify-between gap-3 text-left font-normal\",\n          triggerClassName,\n          value.length === 0 && \"text-muted-foreground\",\n        )}\n        {...getReferenceProps()}\n      >\n        <span className=\"truncate\">{selected}</span>\n        <Icon icon={open ? UiChevronUp : UiChevronDown} className=\"shrink-0 text-muted-foreground\" />\n      </Button>\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={placeholder}\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className={cn(\n                \"min-w-[14rem] max-w-[20rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n          <div className=\"mb-1 flex items-center justify-between gap-2 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            <span>{placeholder}</span>\n            <button\n              type=\"button\"\n              className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n              onClick={() => onChange([])}\n              disabled={value.length === 0}\n            >\n              Clear all\n            </button>\n          </div>\n          <div className=\"max-h-64 overflow-auto\">\n            {options.map((option) => {\n              const checked = value.includes(option.value);\n              return (\n                <label\n                  key={option.value}\n                  className={cn(\n                    \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent\",\n                    option.disabled && \"cursor-not-allowed opacity-50\",\n                  )}\n                >\n                  <input\n                    type=\"checkbox\"\n                    role=\"menuitemcheckbox\"\n                    className=\"size-4 rounded border border-input\"\n                    checked={checked}\n                    disabled={option.disabled}\n                    onChange={() => toggleOption(option.value)}\n                  />\n                  <span className=\"min-w-0 truncate\">{option.label}</span>\n                </label>\n              );\n            })}\n          </div>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MultiSelect.js","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode, type Ref } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\nimport { useEscapeLayer, useFloatingZIndex } from \"../overlay/modalStack\";\n\nexport type MultiSelectOption = {\n  /** Stable option value written into the selected value array. */\n  value: string;\n  /** Visible option label in the menu and trigger summary. */\n  label: ReactNode;\n  /** Prevents selecting this option while still showing it in the menu. */\n  disabled?: boolean;\n  /** Optional browser tooltip for truncated or explanatory labels. */\n  title?: string;\n};\n\nexport type MultiSelectProps = {\n  /** Available options, rendered in the order provided. */\n  options: MultiSelectOption[];\n  /** Controlled selected option values. */\n  value: string[];\n  /** Called with the complete next value array after each toggle. */\n  onChange: (next: string[]) => void;\n  /** Trigger text when nothing is selected. Also labels the menu. */\n  placeholder?: string;\n  /** Accessible name for the trigger. Use when the field is labelled\n   *  elsewhere so the trigger doesn't have to borrow `placeholder` for its\n   *  name (which would force a synthesized placeholder). */\n  ariaLabel?: string;\n  /** Disables opening and changing selections. */\n  disabled?: boolean;\n  /** Classes applied to the root wrapper. */\n  className?: string;\n  /** Classes applied to the trigger button. */\n  triggerClassName?: string;\n  /** Classes applied to the popover menu. */\n  menuClassName?: string;\n};\n\nexport function MultiSelect({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select options\",\n  ariaLabel,\n  disabled,\n  className,\n  triggerClassName,\n  menuClassName,\n}: MultiSelectProps) {\n  const [open, setOpen] = useState(false);\n\n  // Portaled (floating-ui) so the menu escapes `overflow` clipping from\n  // scroll-container ancestors, matching Combobox/DropdownMenu.\n  const floatingZ = useFloatingZIndex();\n  const { refs, floatingStyles, context } = useFloating({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useClick(context),\n    useDismiss(context, { escapeKey: false }),\n    useRole(context, { role: \"menu\" }),\n  ]);\n  useEscapeLayer(open, () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n  });\n\n  const selected = useMemo(() => {\n    const selectedOptions = options.filter((option) => value.includes(option.value));\n    const labels = selectedOptions\n      .map((option) => option.label)\n      .filter((label): label is string => typeof label === \"string\");\n\n    if (selectedOptions.length === 0) return placeholder;\n    if (labels.length === 0) return `${selectedOptions.length} selected`;\n    if (labels.length <= 2) return labels.join(\", \");\n    return `${labels.length} selected`;\n  }, [options, placeholder, value]);\n\n  function toggleOption(nextValue: string) {\n    if (value.includes(nextValue)) {\n      onChange(value.filter((current) => current !== nextValue));\n      return;\n    }\n    onChange([...value, nextValue]);\n  }\n\n  // `min-w-0` here, and a shrinkable trigger below, let the summary ellipsize\n  // inside a width-capped flex parent (a FilterBar chip) rather than overflow\n  // onto its neighbour.\n  return (\n    <div className={cn(\"inline-flex min-w-0\", className)}>\n      <Button\n        ref={refs.setReference as Ref<HTMLButtonElement>}\n        type=\"button\"\n        variant=\"outline\"\n        disabled={disabled}\n        aria-label={ariaLabel ?? `${placeholder} filter`}\n        className={cn(\n          \"w-fit max-w-[15rem] min-w-0 justify-between gap-3 text-left font-normal\",\n          triggerClassName,\n          // Empty means the trigger is showing its placeholder, so it reads at\n          // placeholder weight rather than at helper-text weight.\n          value.length === 0 && \"text-placeholder\",\n        )}\n        {...getReferenceProps()}\n      >\n        <span className=\"truncate\">{selected}</span>\n        <Icon icon={open ? UiChevronUp : UiChevronDown} className=\"shrink-0 text-muted-foreground\" />\n      </Button>\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={placeholder}\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className={cn(\n                \"min-w-[14rem] max-w-[20rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n          <div className=\"mb-1 flex items-center justify-between gap-2 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n            <span>{placeholder}</span>\n            <button\n              type=\"button\"\n              className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n              onClick={() => onChange([])}\n              disabled={value.length === 0}\n            >\n              Clear all\n            </button>\n          </div>\n          <div className=\"max-h-64 overflow-auto\">\n            {options.map((option) => {\n              const checked = value.includes(option.value);\n              return (\n                <label\n                  key={option.value}\n                  className={cn(\n                    \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent\",\n                    option.disabled && \"cursor-not-allowed opacity-50\",\n                  )}\n                >\n                  <input\n                    type=\"checkbox\"\n                    role=\"menuitemcheckbox\"\n                    className=\"size-4 rounded border border-input\"\n                    checked={checked}\n                    disabled={option.disabled}\n                    onChange={() => toggleOption(option.value)}\n                  />\n                  <span className=\"min-w-0 truncate\">{option.label}</span>\n                </label>\n              );\n            })}\n          </div>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/NamespacePicker.cjs

@@ -40,6 +40,7 @@ function NamespacePicker({
       options,
       value,
       onChange,
+      ariaLabel: "Namespace",
       allowCustomValue: true,
       loading,
       invalid,

package/dist/components/NamespacePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NamespacePicker.cjs","sources":["../../src/components/NamespacePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\n\n// NamespacePicker selects a Kubernetes namespace. It is presentational: it\n// fetches nothing — the consumer supplies an async `loadNamespaces` getter (e.g.\n// backed by `/api/v1/namespaces`). The selected namespace is the value other\n// form widgets (secret/workload pickers) read to scope their own lookups.\n\nexport type NamespacePickerProps = {\n  /** Controlled selected namespace (or \"\" when cleared). */\n  value: string;\n  onChange: (value: string) => void;\n  /** Async getter the component calls once to load namespace names. */\n  loadNamespaces: () => Promise<string[]>;\n  /**\n   * When true, a non-empty value absent from the loaded set (once loading\n   * settles) is flagged invalid. The value is still shown; freeform entry is\n   * marked, not rejected.\n   */\n  strict?: boolean;\n  placeholder?: string;\n  className?: string;\n};\n\nexport function NamespacePicker({\n  value,\n  onChange,\n  loadNamespaces,\n  strict = false,\n  placeholder = \"Select namespace…\",\n  className,\n}: NamespacePickerProps) {\n  const [namespaces, setNamespaces] = useState<string[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    let cancelled = false;\n    setLoading(true);\n    loadNamespaces()\n      .then((res) => {\n        if (!cancelled) setNamespaces(res);\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [loadNamespaces]);\n\n  const options = useMemo<ComboboxOption[]>(() => {\n    const opts = namespaces.map((ns) => ({ value: ns, label: ns }));\n    // Pin a current value not present in the loaded set so the selection stays\n    // visible (e.g. a namespace the user lacks list permission for).\n    if (value && !namespaces.includes(value)) return [{ value, label: value }, ...opts];\n    return opts;\n  }, [namespaces, value]);\n\n  const invalid = useMemo(\n    () => strict && !!value && !loading && !namespaces.includes(value),\n    [strict, value, loading, namespaces],\n  );\n\n  return (\n    <Combobox\n      options={options}\n      value={value}\n      onChange={onChange}\n      allowCustomValue\n      loading={loading}\n      invalid={invalid}\n      placeholder={placeholder}\n      {...(className ? { className } : {})}\n    />\n  );\n}\n"],"names":["useState","useEffect","useMemo","jsx","Combobox"],"mappings":";;;;;AAwBO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAAA,EACd;AACF,GAAyB;AACvB,QAAM,CAAC,YAAY,aAAa,IAAIA,MAAAA,SAAmB,CAAA,CAAE;AACzD,QAAM,CAAC,SAAS,UAAU,IAAIA,MAAAA,SAAS,KAAK;AAE5CC,QAAAA,UAAU,MAAM;AACd,QAAI,YAAY;AAChB,eAAW,IAAI;AACf,mBAAA,EACG,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,eAAc,GAAG;AAAA,IACnC,CAAC,EACA,QAAQ,MAAM;AACb,UAAI,CAAC,UAAW,YAAW,KAAK;AAAA,IAClC,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,UAAUC,MAAAA,QAA0B,MAAM;AAC9C,UAAM,OAAO,WAAW,IAAI,CAAC,QAAQ,EAAE,OAAO,IAAI,OAAO,GAAA,EAAK;AAG9D,QAAI,SAAS,CAAC,WAAW,SAAS,KAAK,EAAG,QAAO,CAAC,EAAE,OAAO,OAAO,MAAA,GAAS,GAAG,IAAI;AAClF,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,UAAUA,MAAAA;AAAAA,IACd,MAAM,UAAU,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,WAAW,SAAS,KAAK;AAAA,IACjE,CAAC,QAAQ,OAAO,SAAS,UAAU;AAAA,EAAA;AAGrC,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAI,YAAY,EAAE,cAAc,CAAA;AAAA,IAAC;AAAA,EAAA;AAGxC;;"}
+{"version":3,"file":"NamespacePicker.cjs","sources":["../../src/components/NamespacePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\n\n// NamespacePicker selects a Kubernetes namespace. It is presentational: it\n// fetches nothing — the consumer supplies an async `loadNamespaces` getter (e.g.\n// backed by `/api/v1/namespaces`). The selected namespace is the value other\n// form widgets (secret/workload pickers) read to scope their own lookups.\n\nexport type NamespacePickerProps = {\n  /** Controlled selected namespace (or \"\" when cleared). */\n  value: string;\n  onChange: (value: string) => void;\n  /** Async getter the component calls once to load namespace names. */\n  loadNamespaces: () => Promise<string[]>;\n  /**\n   * When true, a non-empty value absent from the loaded set (once loading\n   * settles) is flagged invalid. The value is still shown; freeform entry is\n   * marked, not rejected.\n   */\n  strict?: boolean;\n  placeholder?: string;\n  className?: string;\n};\n\nexport function NamespacePicker({\n  value,\n  onChange,\n  loadNamespaces,\n  strict = false,\n  placeholder = \"Select namespace…\",\n  className,\n}: NamespacePickerProps) {\n  const [namespaces, setNamespaces] = useState<string[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    let cancelled = false;\n    setLoading(true);\n    loadNamespaces()\n      .then((res) => {\n        if (!cancelled) setNamespaces(res);\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [loadNamespaces]);\n\n  const options = useMemo<ComboboxOption[]>(() => {\n    const opts = namespaces.map((ns) => ({ value: ns, label: ns }));\n    // Pin a current value not present in the loaded set so the selection stays\n    // visible (e.g. a namespace the user lacks list permission for).\n    if (value && !namespaces.includes(value)) return [{ value, label: value }, ...opts];\n    return opts;\n  }, [namespaces, value]);\n\n  const invalid = useMemo(\n    () => strict && !!value && !loading && !namespaces.includes(value),\n    [strict, value, loading, namespaces],\n  );\n\n  return (\n    <Combobox\n      options={options}\n      value={value}\n      onChange={onChange}\n      ariaLabel=\"Namespace\"\n      allowCustomValue\n      loading={loading}\n      invalid={invalid}\n      placeholder={placeholder}\n      {...(className ? { className } : {})}\n    />\n  );\n}\n"],"names":["useState","useEffect","useMemo","jsx","Combobox"],"mappings":";;;;;AAwBO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAAA,EACd;AACF,GAAyB;AACvB,QAAM,CAAC,YAAY,aAAa,IAAIA,MAAAA,SAAmB,CAAA,CAAE;AACzD,QAAM,CAAC,SAAS,UAAU,IAAIA,MAAAA,SAAS,KAAK;AAE5CC,QAAAA,UAAU,MAAM;AACd,QAAI,YAAY;AAChB,eAAW,IAAI;AACf,mBAAA,EACG,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,eAAc,GAAG;AAAA,IACnC,CAAC,EACA,QAAQ,MAAM;AACb,UAAI,CAAC,UAAW,YAAW,KAAK;AAAA,IAClC,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,UAAUC,MAAAA,QAA0B,MAAM;AAC9C,UAAM,OAAO,WAAW,IAAI,CAAC,QAAQ,EAAE,OAAO,IAAI,OAAO,GAAA,EAAK;AAG9D,QAAI,SAAS,CAAC,WAAW,SAAS,KAAK,EAAG,QAAO,CAAC,EAAE,OAAO,OAAO,MAAA,GAAS,GAAG,IAAI;AAClF,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,UAAUA,MAAAA;AAAAA,IACd,MAAM,UAAU,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,WAAW,SAAS,KAAK;AAAA,IACjE,CAAC,QAAQ,OAAO,SAAS,UAAU;AAAA,EAAA;AAGrC,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,kBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAI,YAAY,EAAE,cAAc,CAAA;AAAA,IAAC;AAAA,EAAA;AAGxC;;"}

package/dist/components/NamespacePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NamespacePicker.d.ts","sourceRoot":"","sources":["../../src/components/NamespacePicker.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,oBAAoB,GAAG;IACjC,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qEAAqE;IACrE,cAAc,EAAE,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACxC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,cAAc,EACd,MAAc,EACd,WAAiC,EACjC,SAAS,GACV,EAAE,oBAAoB,2CA4CtB"}
+{"version":3,"file":"NamespacePicker.d.ts","sourceRoot":"","sources":["../../src/components/NamespacePicker.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,oBAAoB,GAAG;IACjC,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qEAAqE;IACrE,cAAc,EAAE,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACxC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,cAAc,EACd,MAAc,EACd,WAAiC,EACjC,SAAS,GACV,EAAE,oBAAoB,2CA6CtB"}

package/dist/components/NamespacePicker.js

@@ -38,6 +38,7 @@ function NamespacePicker({
       options,
       value,
       onChange,
+      ariaLabel: "Namespace",
       allowCustomValue: true,
       loading,
       invalid,

package/dist/components/NamespacePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"NamespacePicker.js","sources":["../../src/components/NamespacePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\n\n// NamespacePicker selects a Kubernetes namespace. It is presentational: it\n// fetches nothing — the consumer supplies an async `loadNamespaces` getter (e.g.\n// backed by `/api/v1/namespaces`). The selected namespace is the value other\n// form widgets (secret/workload pickers) read to scope their own lookups.\n\nexport type NamespacePickerProps = {\n  /** Controlled selected namespace (or \"\" when cleared). */\n  value: string;\n  onChange: (value: string) => void;\n  /** Async getter the component calls once to load namespace names. */\n  loadNamespaces: () => Promise<string[]>;\n  /**\n   * When true, a non-empty value absent from the loaded set (once loading\n   * settles) is flagged invalid. The value is still shown; freeform entry is\n   * marked, not rejected.\n   */\n  strict?: boolean;\n  placeholder?: string;\n  className?: string;\n};\n\nexport function NamespacePicker({\n  value,\n  onChange,\n  loadNamespaces,\n  strict = false,\n  placeholder = \"Select namespace…\",\n  className,\n}: NamespacePickerProps) {\n  const [namespaces, setNamespaces] = useState<string[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    let cancelled = false;\n    setLoading(true);\n    loadNamespaces()\n      .then((res) => {\n        if (!cancelled) setNamespaces(res);\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [loadNamespaces]);\n\n  const options = useMemo<ComboboxOption[]>(() => {\n    const opts = namespaces.map((ns) => ({ value: ns, label: ns }));\n    // Pin a current value not present in the loaded set so the selection stays\n    // visible (e.g. a namespace the user lacks list permission for).\n    if (value && !namespaces.includes(value)) return [{ value, label: value }, ...opts];\n    return opts;\n  }, [namespaces, value]);\n\n  const invalid = useMemo(\n    () => strict && !!value && !loading && !namespaces.includes(value),\n    [strict, value, loading, namespaces],\n  );\n\n  return (\n    <Combobox\n      options={options}\n      value={value}\n      onChange={onChange}\n      allowCustomValue\n      loading={loading}\n      invalid={invalid}\n      placeholder={placeholder}\n      {...(className ? { className } : {})}\n    />\n  );\n}\n"],"names":[],"mappings":";;;AAwBO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAAA,EACd;AACF,GAAyB;AACvB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAmB,CAAA,CAAE;AACzD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,eAAW,IAAI;AACf,mBAAA,EACG,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,eAAc,GAAG;AAAA,IACnC,CAAC,EACA,QAAQ,MAAM;AACb,UAAI,CAAC,UAAW,YAAW,KAAK;AAAA,IAClC,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,UAAU,QAA0B,MAAM;AAC9C,UAAM,OAAO,WAAW,IAAI,CAAC,QAAQ,EAAE,OAAO,IAAI,OAAO,GAAA,EAAK;AAG9D,QAAI,SAAS,CAAC,WAAW,SAAS,KAAK,EAAG,QAAO,CAAC,EAAE,OAAO,OAAO,MAAA,GAAS,GAAG,IAAI;AAClF,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,UAAU;AAAA,IACd,MAAM,UAAU,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,WAAW,SAAS,KAAK;AAAA,IACjE,CAAC,QAAQ,OAAO,SAAS,UAAU;AAAA,EAAA;AAGrC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAI,YAAY,EAAE,cAAc,CAAA;AAAA,IAAC;AAAA,EAAA;AAGxC;"}
+{"version":3,"file":"NamespacePicker.js","sources":["../../src/components/NamespacePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\n\n// NamespacePicker selects a Kubernetes namespace. It is presentational: it\n// fetches nothing — the consumer supplies an async `loadNamespaces` getter (e.g.\n// backed by `/api/v1/namespaces`). The selected namespace is the value other\n// form widgets (secret/workload pickers) read to scope their own lookups.\n\nexport type NamespacePickerProps = {\n  /** Controlled selected namespace (or \"\" when cleared). */\n  value: string;\n  onChange: (value: string) => void;\n  /** Async getter the component calls once to load namespace names. */\n  loadNamespaces: () => Promise<string[]>;\n  /**\n   * When true, a non-empty value absent from the loaded set (once loading\n   * settles) is flagged invalid. The value is still shown; freeform entry is\n   * marked, not rejected.\n   */\n  strict?: boolean;\n  placeholder?: string;\n  className?: string;\n};\n\nexport function NamespacePicker({\n  value,\n  onChange,\n  loadNamespaces,\n  strict = false,\n  placeholder = \"Select namespace…\",\n  className,\n}: NamespacePickerProps) {\n  const [namespaces, setNamespaces] = useState<string[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    let cancelled = false;\n    setLoading(true);\n    loadNamespaces()\n      .then((res) => {\n        if (!cancelled) setNamespaces(res);\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [loadNamespaces]);\n\n  const options = useMemo<ComboboxOption[]>(() => {\n    const opts = namespaces.map((ns) => ({ value: ns, label: ns }));\n    // Pin a current value not present in the loaded set so the selection stays\n    // visible (e.g. a namespace the user lacks list permission for).\n    if (value && !namespaces.includes(value)) return [{ value, label: value }, ...opts];\n    return opts;\n  }, [namespaces, value]);\n\n  const invalid = useMemo(\n    () => strict && !!value && !loading && !namespaces.includes(value),\n    [strict, value, loading, namespaces],\n  );\n\n  return (\n    <Combobox\n      options={options}\n      value={value}\n      onChange={onChange}\n      ariaLabel=\"Namespace\"\n      allowCustomValue\n      loading={loading}\n      invalid={invalid}\n      placeholder={placeholder}\n      {...(className ? { className } : {})}\n    />\n  );\n}\n"],"names":[],"mappings":";;;AAwBO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAAA,EACd;AACF,GAAyB;AACvB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAmB,CAAA,CAAE;AACzD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,eAAW,IAAI;AACf,mBAAA,EACG,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,eAAc,GAAG;AAAA,IACnC,CAAC,EACA,QAAQ,MAAM;AACb,UAAI,CAAC,UAAW,YAAW,KAAK;AAAA,IAClC,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,UAAU,QAA0B,MAAM;AAC9C,UAAM,OAAO,WAAW,IAAI,CAAC,QAAQ,EAAE,OAAO,IAAI,OAAO,GAAA,EAAK;AAG9D,QAAI,SAAS,CAAC,WAAW,SAAS,KAAK,EAAG,QAAO,CAAC,EAAE,OAAO,OAAO,MAAA,GAAS,GAAG,IAAI;AAClF,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,UAAU;AAAA,IACd,MAAM,UAAU,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,WAAW,SAAS,KAAK;AAAA,IACjE,CAAC,QAAQ,OAAO,SAAS,UAAU;AAAA,EAAA;AAGrC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,kBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAI,YAAY,EAAE,cAAc,CAAA;AAAA,IAAC;AAAA,EAAA;AAGxC;"}

package/dist/components/WorkloadPicker.cjs

@@ -4,25 +4,55 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const utils = require("../lib/utils.cjs");
 const Combobox = require("./Combobox.cjs");
+const NamespacePicker = require("./NamespacePicker.cjs");
 const workloadPickerUtils = require("./workload-picker-utils.cjs");
 function WorkloadPicker({
   value,
   onChange,
   loadWorkloads,
   namespace,
+  allowNamespaceSelection = false,
+  loadNamespaces,
+  onNamespaceChange,
   kinds = workloadPickerUtils.ALL_WORKLOAD_KINDS,
   strict = false,
   allowCustomValue = true,
+  collapseSingleOption = false,
+  disabled = false,
   placeholder = "Select workload / service…",
   className
 }) {
+  const initialNamespace = value ? workloadPickerUtils.parseWorkloadKey(value).namespace : void 0;
+  const [selectedNamespace, setSelectedNamespace] = react.useState(
+    initialNamespace ?? namespace ?? ""
+  );
   const [byKind, setByKind] = react.useState({});
   const [loading, setLoading] = react.useState(false);
+  const defaultNamespaceRef = react.useRef(namespace);
+  const effectiveNamespace = allowNamespaceSelection ? selectedNamespace || void 0 : namespace;
+  react.useEffect(() => {
+    if (!allowNamespaceSelection || !value) return;
+    const valueNamespace = workloadPickerUtils.parseWorkloadKey(value).namespace;
+    if (valueNamespace) setSelectedNamespace(valueNamespace);
+  }, [allowNamespaceSelection, value]);
+  react.useEffect(() => {
+    if (!allowNamespaceSelection || defaultNamespaceRef.current === namespace) {
+      return;
+    }
+    defaultNamespaceRef.current = namespace;
+    if (!value) setSelectedNamespace(namespace ?? "");
+  }, [allowNamespaceSelection, namespace, value]);
   const kindsKey = kinds.join(",");
   react.useEffect(() => {
+    if (allowNamespaceSelection && !effectiveNamespace) {
+      setByKind({});
+      setLoading(false);
+      return;
+    }
     let cancelled = false;
     setLoading(true);
-    loadWorkloads(kinds).then((res) => {
+    const request = effectiveNamespace ? loadWorkloads(kinds, effectiveNamespace) : loadWorkloads(kinds);
+    request.then((res) => {
       if (!cancelled) setByKind(res);
     }).finally(() => {
       if (!cancelled) setLoading(false);
@@ -30,41 +60,97 @@ function WorkloadPicker({
     return () => {
       cancelled = true;
     };
-  }, [loadWorkloads, kindsKey]);
+  }, [allowNamespaceSelection, effectiveNamespace, loadWorkloads, kindsKey]);
+  const workloadValue = value && workloadPickerUtils.parseWorkloadKey(value).name ? value : "";
   const options = react.useMemo(
-    () => workloadPickerUtils.buildWorkloadOptions(namespace, byKind, kinds, value),
-    [namespace, byKind, kinds, value]
+    () => workloadPickerUtils.buildWorkloadOptions(effectiveNamespace, byKind, kinds, workloadValue),
+    [effectiveNamespace, byKind, kinds, workloadValue]
   );
   const invalid = react.useMemo(() => {
-    if (!strict || !value || loading) return false;
-    const { keys, names } = workloadPickerUtils.loadedWorkloads(namespace, byKind, kinds);
-    return !keys.has(value) && !names.has(value);
-  }, [strict, value, loading, namespace, byKind, kinds]);
-  const selectedKind = workloadPickerUtils.kindForValue(kinds, value);
+    if (!strict || !workloadValue || loading) return false;
+    const { keys, names } = workloadPickerUtils.loadedWorkloads(effectiveNamespace, byKind, kinds);
+    return !keys.has(workloadValue) && !names.has(workloadValue);
+  }, [strict, workloadValue, loading, effectiveNamespace, byKind, kinds]);
+  const selectedKind = workloadPickerUtils.kindForValue(kinds, workloadValue);
   const leadMeta = workloadPickerUtils.WORKLOAD_META[selectedKind];
   const LeadIcon = leadMeta.Icon;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      LeadIcon,
-      {
-        className: "h-4 w-4 shrink-0 text-muted-foreground",
-        title: leadMeta.label,
-        "aria-label": leadMeta.label
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Combobox.Combobox,
-      {
-        options,
-        value,
-        onChange,
-        allowCustomValue,
-        loading,
-        invalid,
-        placeholder
-      }
-    ) })
-  ] });
+  const soleOption = collapseSingleOption && !loading && options.length === 1 && (!workloadValue || workloadValue === options[0].value) ? options[0] : void 0;
+  const control = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex items-center gap-2",
+        allowNamespaceSelection ? "min-w-0 flex-1" : className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LeadIcon,
+          {
+            className: "h-4 w-4 shrink-0 text-muted-foreground",
+            title: leadMeta.label,
+            "aria-label": leadMeta.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: soleOption ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "block truncate text-sm text-foreground",
+            title: soleOption.label,
+            "aria-label": "Workload",
+            children: soleOption.label
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          Combobox.Combobox,
+          {
+            options,
+            value: workloadValue,
+            onChange: (next) => onChange(
+              next || (allowNamespaceSelection ? workloadPickerUtils.namespaceKey(effectiveNamespace) : "")
+            ),
+            ariaLabel: "Workload",
+            allowCustomValue,
+            loading,
+            invalid,
+            disabled,
+            placeholder
+          }
+        ) })
+      ]
+    }
+  );
+  if (!allowNamespaceSelection) return control;
+  if (!loadNamespaces) {
+    throw new Error(
+      "WorkloadPicker namespace selection requires loadNamespaces"
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex w-full min-w-0 flex-nowrap items-center gap-density-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          NamespacePicker.NamespacePicker,
+          {
+            className: "min-w-0 shrink grow-0 basis-28",
+            value: selectedNamespace,
+            onChange: (nextNamespace) => {
+              setSelectedNamespace(nextNamespace);
+              setByKind({});
+              onNamespaceChange == null ? void 0 : onNamespaceChange(nextNamespace || void 0);
+              onChange(workloadPickerUtils.namespaceKey(nextNamespace));
+            },
+            loadNamespaces,
+            strict: true
+          }
+        ),
+        control
+      ]
+    }
+  );
 }
 exports.WorkloadPicker = WorkloadPicker;
 //# sourceMappingURL=WorkloadPicker.cjs.map

package/dist/components/WorkloadPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"WorkloadPicker.cjs","sources":["../../src/components/WorkloadPicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Combobox } from \"./Combobox\";\nimport {\n  ALL_WORKLOAD_KINDS,\n  WORKLOAD_META,\n  buildWorkloadOptions,\n  kindForValue,\n  loadedWorkloads,\n  type WorkloadKind,\n  type WorkloadResource,\n} from \"./workload-picker-utils\";\n\n// WorkloadPicker selects a backing Kubernetes workload (Service / Ingress /\n// Deployment / StatefulSet) for an endpoint. Options from every kind are merged\n// into one Combobox, grouped by kind via the Combobox group-header support and\n// labelled with the kind's icon.\n//\n// The emitted value is a `[namespace/]kind/name` key (see workloadKey /\n// parseWorkloadKey in workload-picker-utils) so two workloads of different\n// kinds that share a name don't collide. An ingress's name-part is its first\n// host (the routable address), labelled with the ingress name for context;\n// every other kind uses its name.\n//\n// The component is presentational: the kind→group/icon mapping and the key\n// encoding live in workload-picker-utils; it fetches nothing — the consumer\n// supplies an async `loadWorkloads` getter.\n\nexport type WorkloadPickerProps = {\n  /**\n   * Controlled selected value — a `[namespace/]kind/name` key (see\n   * {@link workloadKey} / {@link parseWorkloadKey}).\n   */\n  value: string;\n  /** Called with the chosen `[namespace/]kind/name` key (or \"\" when cleared). */\n  onChange: (value: string) => void;\n  /**\n   * Async getter the component calls to load the requested kinds' workloads.\n   * Returns a map keyed by kind. The consumer owns fetching/caching.\n   */\n  loadWorkloads: (kinds: WorkloadKind[]) => Promise<Record<WorkloadKind, WorkloadResource[]>>;\n  /**\n   * Namespace the workloads live in. When set it prefixes the emitted key\n   * (`namespace/kind/name`), so values stay distinct across namespaces.\n   */\n  namespace?: string;\n  /** Kinds to offer, in display order. Defaults to all four. */\n  kinds?: WorkloadKind[];\n  /**\n   * When true, a non-empty value that does not match any loaded workload (once\n   * loading settles) is flagged invalid — the picked workload doesn't exist in\n   * the namespace. The value is still shown (pinned) so the user can see and\n   * fix it; freeform entry is not rejected, only marked.\n   */\n  strict?: boolean;\n  /**\n   * Whether a typed name absent from the loaded resources may be committed.\n   * Defaults to true for the existing free-form workload picker behavior.\n   */\n  allowCustomValue?: boolean;\n  placeholder?: string;\n  className?: string;\n};\n\nexport function WorkloadPicker({\n  value,\n  onChange,\n  loadWorkloads,\n  namespace,\n  kinds = ALL_WORKLOAD_KINDS,\n  strict = false,\n  allowCustomValue = true,\n  placeholder = \"Select workload / service…\",\n  className,\n}: WorkloadPickerProps) {\n  const [byKind, setByKind] = useState<Partial<Record<WorkloadKind, WorkloadResource[]>>>({});\n  const [loading, setLoading] = useState(false);\n\n  const kindsKey = kinds.join(\",\");\n  useEffect(() => {\n    let cancelled = false;\n    setLoading(true);\n    loadWorkloads(kinds)\n      .then((res) => {\n        if (!cancelled) setByKind(res);\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n    return () => {\n      cancelled = true;\n    };\n    // loadWorkloads is expected to be stable (memoized by the consumer); kindsKey\n    // is the joined `kinds` so a changed selection reloads without depending on\n    // the array's identity.\n  }, [loadWorkloads, kindsKey]);\n\n  const options = useMemo(\n    () => buildWorkloadOptions(namespace, byKind, kinds, value),\n    [namespace, byKind, kinds, value],\n  );\n\n  // In strict mode a non-empty value is invalid once loading settles unless it\n  // matches a loaded workload — either by its full `[namespace/]kind/name` key\n  // (what the picker emits) or by its bare name-part (what consumers that\n  // persist only the resolved name, e.g. a Service name or ingress host, feed\n  // back in). buildWorkloadOptions pins an unmatched value first, so test\n  // membership against the loaded set, not `options`.\n  const invalid = useMemo(() => {\n    if (!strict || !value || loading) return false;\n    const { keys, names } = loadedWorkloads(namespace, byKind, kinds);\n    return !keys.has(value) && !names.has(value);\n  }, [strict, value, loading, namespace, byKind, kinds]);\n\n  // The lead icon reflects the selected workload's kind (read from the value's\n  // key), falling back to the first offered kind when nothing is selected or the\n  // value carries no recognised kind (e.g. freeform input).\n  const selectedKind = kindForValue(kinds, value);\n  const leadMeta = WORKLOAD_META[selectedKind];\n  const LeadIcon = leadMeta.Icon;\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)}>\n      <LeadIcon\n        className=\"h-4 w-4 shrink-0 text-muted-foreground\"\n        title={leadMeta.label}\n        aria-label={leadMeta.label}\n      />\n      <div className=\"min-w-0 flex-1\">\n        <Combobox\n          options={options}\n          value={value}\n          onChange={onChange}\n          allowCustomValue={allowCustomValue}\n          loading={loading}\n          invalid={invalid}\n          placeholder={placeholder}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":["ALL_WORKLOAD_KINDS","useState","useEffect","useMemo","buildWorkloadOptions","loadedWorkloads","kindForValue","WORKLOAD_META","cn","jsx","Combobox"],"mappings":";;;;;;;AAgEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQA,oBAAAA;AAAAA,EACR,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd;AACF,GAAwB;AACtB,QAAM,CAAC,QAAQ,SAAS,IAAIC,MAAAA,SAA4D,CAAA,CAAE;AAC1F,QAAM,CAAC,SAAS,UAAU,IAAIA,MAAAA,SAAS,KAAK;AAE5C,QAAM,WAAW,MAAM,KAAK,GAAG;AAC/BC,QAAAA,UAAU,MAAM;AACd,QAAI,YAAY;AAChB,eAAW,IAAI;AACf,kBAAc,KAAK,EAChB,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,WAAU,GAAG;AAAA,IAC/B,CAAC,EACA,QAAQ,MAAM;AACb,UAAI,CAAC,UAAW,YAAW,KAAK;AAAA,IAClC,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EAIF,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,QAAM,UAAUC,MAAAA;AAAAA,IACd,MAAMC,oBAAAA,qBAAqB,WAAW,QAAQ,OAAO,KAAK;AAAA,IAC1D,CAAC,WAAW,QAAQ,OAAO,KAAK;AAAA,EAAA;AASlC,QAAM,UAAUD,MAAAA,QAAQ,MAAM;AAC5B,QAAI,CAAC,UAAU,CAAC,SAAS,QAAS,QAAO;AACzC,UAAM,EAAE,MAAM,MAAA,IAAUE,oBAAAA,gBAAgB,WAAW,QAAQ,KAAK;AAChE,WAAO,CAAC,KAAK,IAAI,KAAK,KAAK,CAAC,MAAM,IAAI,KAAK;AAAA,EAC7C,GAAG,CAAC,QAAQ,OAAO,SAAS,WAAW,QAAQ,KAAK,CAAC;AAKrD,QAAM,eAAeC,oBAAAA,aAAa,OAAO,KAAK;AAC9C,QAAM,WAAWC,oBAAAA,cAAc,YAAY;AAC3C,QAAM,WAAW,SAAS;AAC1B,yCACG,OAAA,EAAI,WAAWC,MAAAA,GAAG,2BAA2B,SAAS,GACrD,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,SAAS;AAAA,QAChB,cAAY,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEvBA,2BAAAA,IAAC,OAAA,EAAI,WAAU,kBACb,UAAAA,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA,EACF,CACF;AAAA,EAAA,GACF;AAEJ;;"}
+{"version":3,"file":"WorkloadPicker.cjs","sources":["../../src/components/WorkloadPicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Combobox } from \"./Combobox\";\nimport { NamespacePicker, type NamespacePickerProps } from \"./NamespacePicker\";\nimport {\n  ALL_WORKLOAD_KINDS,\n  WORKLOAD_META,\n  buildWorkloadOptions,\n  kindForValue,\n  loadedWorkloads,\n  namespaceKey,\n  parseWorkloadKey,\n  type WorkloadKind,\n  type WorkloadResource,\n} from \"./workload-picker-utils\";\n\n// WorkloadPicker selects a backing Kubernetes workload for an endpoint or\n// query. Options from every requested kind are merged into one Combobox,\n// grouped by kind via the Combobox group-header support and labelled with the\n// kind's icon.\n//\n// The emitted value is a `[namespace/]kind/name` key (see workloadKey /\n// parseWorkloadKey in workload-picker-utils) so two workloads of different\n// kinds that share a name don't collide. An ingress's name-part is its first\n// host (the routable address), labelled with the ingress name for context;\n// every other kind uses its name.\n//\n// The component is presentational: the kind→group/icon mapping and the key\n// encoding live in workload-picker-utils; it fetches nothing — the consumer\n// supplies an async `loadWorkloads` getter.\n\nexport type WorkloadPickerProps = {\n  /**\n   * Controlled selected value — a `[namespace/]kind/name` key (see\n   * {@link workloadKey} / {@link parseWorkloadKey}), or a `namespace/` key when\n   * a namespace is in scope with no workload picked in it yet.\n   */\n  value: string;\n  /**\n   * Called with the chosen `[namespace/]kind/name` key. When namespace\n   * selection is on and no workload is picked it receives the `namespace/` key\n   * (see {@link namespaceKey}) rather than \"\", so a consumer persisting the\n   * value keeps the namespace; \"\" means nothing at all is selected.\n   */\n  onChange: (value: string) => void;\n  /**\n   * Async getter the component calls to load the requested kinds' workloads.\n   * Returns a map keyed by kind. The consumer owns fetching/caching.\n   */\n  loadWorkloads: (\n    kinds: WorkloadKind[],\n    namespace?: string,\n  ) => Promise<Partial<Record<WorkloadKind, WorkloadResource[]>>>;\n  /**\n   * Namespace the workloads live in. When set it prefixes the emitted key\n   * (`namespace/kind/name`), so values stay distinct across namespaces.\n   */\n  namespace?: string;\n  /** Lets the user choose the namespace used to load and key workloads. */\n  allowNamespaceSelection?: boolean;\n  /** Required when namespace selection is enabled. */\n  loadNamespaces?: NamespacePickerProps[\"loadNamespaces\"];\n  /** Reports the namespace independently of workload selection. */\n  onNamespaceChange?: (namespace: string | undefined) => void;\n  /** Kinds to offer, in display order. Defaults to every supported kind. */\n  kinds?: WorkloadKind[];\n  /**\n   * When true, a non-empty value that does not match any loaded workload (once\n   * loading settles) is flagged invalid — the picked workload doesn't exist in\n   * the namespace. The value is still shown (pinned) so the user can see and\n   * fix it; freeform entry is not rejected, only marked.\n   */\n  strict?: boolean;\n  /**\n   * Whether a typed name absent from the loaded resources may be committed.\n   * Defaults to true for the existing free-form workload picker behavior.\n   */\n  allowCustomValue?: boolean;\n  /**\n   * Render the sole loaded workload as plain text instead of a picker.\n   *\n   * A dropdown whose only entry is the one already in effect asks a question\n   * with one answer. This is for a scope that leaves nothing to choose — a\n   * Deployment with a single pod — where the workload is a fact to state rather\n   * than a selection to make. No value is emitted: the caller is already scoped\n   * to it, so writing it back would only add a filter that changes nothing.\n   */\n  collapseSingleOption?: boolean;\n  disabled?: boolean;\n  placeholder?: string;\n  className?: string;\n};\n\nexport function WorkloadPicker({\n  value,\n  onChange,\n  loadWorkloads,\n  namespace,\n  allowNamespaceSelection = false,\n  loadNamespaces,\n  onNamespaceChange,\n  kinds = ALL_WORKLOAD_KINDS,\n  strict = false,\n  allowCustomValue = true,\n  collapseSingleOption = false,\n  disabled = false,\n  placeholder = \"Select workload / service…\",\n  className,\n}: WorkloadPickerProps) {\n  const initialNamespace = value\n    ? parseWorkloadKey(value).namespace\n    : undefined;\n  const [selectedNamespace, setSelectedNamespace] = useState(\n    initialNamespace ?? namespace ?? \"\",\n  );\n  const [byKind, setByKind] = useState<Partial<Record<WorkloadKind, WorkloadResource[]>>>({});\n  const [loading, setLoading] = useState(false);\n  const defaultNamespaceRef = useRef(namespace);\n  const effectiveNamespace = allowNamespaceSelection\n    ? selectedNamespace || undefined\n    : namespace;\n\n  useEffect(() => {\n    if (!allowNamespaceSelection || !value) return;\n    const valueNamespace = parseWorkloadKey(value).namespace;\n    if (valueNamespace) setSelectedNamespace(valueNamespace);\n  }, [allowNamespaceSelection, value]);\n\n  useEffect(() => {\n    if (\n      !allowNamespaceSelection ||\n      defaultNamespaceRef.current === namespace\n    ) {\n      return;\n    }\n    defaultNamespaceRef.current = namespace;\n    if (!value) setSelectedNamespace(namespace ?? \"\");\n  }, [allowNamespaceSelection, namespace, value]);\n\n  const kindsKey = kinds.join(\",\");\n  useEffect(() => {\n    if (allowNamespaceSelection && !effectiveNamespace) {\n      setByKind({});\n      setLoading(false);\n      return;\n    }\n    let cancelled = false;\n    setLoading(true);\n    const request = effectiveNamespace\n      ? loadWorkloads(kinds, effectiveNamespace)\n      : loadWorkloads(kinds);\n    request\n      .then((res) => {\n        if (!cancelled) setByKind(res);\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n    return () => {\n      cancelled = true;\n    };\n    // loadWorkloads is expected to be stable (memoized by the consumer); kindsKey\n    // is the joined `kinds` so a changed selection reloads without depending on\n    // the array's identity.\n  }, [allowNamespaceSelection, effectiveNamespace, loadWorkloads, kindsKey]);\n\n  // The workload half of the value. A `namespace/` key names a namespace with\n  // nothing picked in it, so every question the workload combobox asks of the\n  // selection — which option is current, is it valid, which kind's icon leads —\n  // reads it as no workload rather than as a workload called \"namespace/\".\n  const workloadValue = value && parseWorkloadKey(value).name ? value : \"\";\n\n  const options = useMemo(\n    () => buildWorkloadOptions(effectiveNamespace, byKind, kinds, workloadValue),\n    [effectiveNamespace, byKind, kinds, workloadValue],\n  );\n\n  // In strict mode a non-empty value is invalid once loading settles unless it\n  // matches a loaded workload — either by its full `[namespace/]kind/name` key\n  // (what the picker emits) or by its bare name-part (what consumers that\n  // persist only the resolved name, e.g. a Service name or ingress host, feed\n  // back in). buildWorkloadOptions pins an unmatched value first, so test\n  // membership against the loaded set, not `options`.\n  const invalid = useMemo(() => {\n    if (!strict || !workloadValue || loading) return false;\n    const { keys, names } = loadedWorkloads(effectiveNamespace, byKind, kinds);\n    return !keys.has(workloadValue) && !names.has(workloadValue);\n  }, [strict, workloadValue, loading, effectiveNamespace, byKind, kinds]);\n\n  // The lead icon reflects the selected workload's kind (read from the value's\n  // key), falling back to the first offered kind when nothing is selected or the\n  // value carries no recognised kind (e.g. freeform input).\n  const selectedKind = kindForValue(kinds, workloadValue);\n  const leadMeta = WORKLOAD_META[selectedKind];\n  const LeadIcon = leadMeta.Icon;\n  // Only once loading settles, and only while the sole option is not contested\n  // by a selection that named something else — a value the load did not return\n  // is exactly the case `strict` exists to surface, and hiding the control\n  // would hide it too.\n  const soleOption =\n    collapseSingleOption && !loading && options.length === 1 && (!workloadValue || workloadValue === options[0]!.value)\n      ? options[0]!\n      : undefined;\n  const control = (\n    <div\n      className={cn(\n        \"flex items-center gap-2\",\n        allowNamespaceSelection ? \"min-w-0 flex-1\" : className,\n      )}\n    >\n      <LeadIcon\n        className=\"h-4 w-4 shrink-0 text-muted-foreground\"\n        title={leadMeta.label}\n        aria-label={leadMeta.label}\n      />\n      <div className=\"min-w-0 flex-1\">\n        {soleOption ? (\n          <span\n            className=\"block truncate text-sm text-foreground\"\n            title={soleOption.label}\n            aria-label=\"Workload\"\n          >\n            {soleOption.label}\n          </span>\n        ) : (\n          <Combobox\n            options={options}\n            value={workloadValue}\n            // Clearing the workload falls back to the namespace still in scope\n            // rather than to nothing, so the namespace survives the clear. Only\n            // when this picker owns the namespace — a consumer that fixed the\n            // namespace itself already knows it and expects a bare \"\".\n            onChange={(next) =>\n              onChange(\n                next ||\n                  (allowNamespaceSelection\n                    ? namespaceKey(effectiveNamespace)\n                    : \"\"),\n              )\n            }\n            ariaLabel=\"Workload\"\n            allowCustomValue={allowCustomValue}\n            loading={loading}\n            invalid={invalid}\n            disabled={disabled}\n            placeholder={placeholder}\n          />\n        )}\n      </div>\n    </div>\n  );\n  if (!allowNamespaceSelection) return control;\n  if (!loadNamespaces) {\n    throw new Error(\n      \"WorkloadPicker namespace selection requires loadNamespaces\",\n    );\n  }\n\n  // Namespace and workload read as one address, so they share a row. The\n  // namespace is the shorter half: it gets a compact basis that shrinks but\n  // never grows, leaving the rest to the workload, whose `[kind/]name` labels\n  // are what need the width — this lives in a ~28% split pane. Its placeholder\n  // and aria-label carry the naming the stacked <Field label> used to.\n  return (\n    <div\n      className={cn(\n        \"flex w-full min-w-0 flex-nowrap items-center gap-density-2\",\n        className,\n      )}\n    >\n      <NamespacePicker\n        className=\"min-w-0 shrink grow-0 basis-28\"\n        value={selectedNamespace}\n        onChange={(nextNamespace) => {\n          setSelectedNamespace(nextNamespace);\n          setByKind({});\n          onNamespaceChange?.(nextNamespace || undefined);\n          // The workload the old namespace named cannot survive the move, but\n          // the new namespace is itself a selection worth reporting — emitting\n          // \"\" here is what used to drop it before it could be persisted.\n          onChange(namespaceKey(nextNamespace));\n        }}\n        loadNamespaces={loadNamespaces}\n        strict\n      />\n      {control}\n    </div>\n  );\n}\n"],"names":["ALL_WORKLOAD_KINDS","parseWorkloadKey","useState","useRef","useEffect","useMemo","buildWorkloadOptions","loadedWorkloads","kindForValue","WORKLOAD_META","jsxs","cn","jsx","Combobox","namespaceKey","NamespacePicker"],"mappings":"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"}

package/dist/components/WorkloadPicker.d.ts

@@ -1,23 +1,36 @@
+import { NamespacePickerProps } from './NamespacePicker';
 import { WorkloadKind, WorkloadResource } from './workload-picker-utils';
 export type WorkloadPickerProps = {
     /**
      * Controlled selected value — a `[namespace/]kind/name` key (see
-     * {@link workloadKey} / {@link parseWorkloadKey}).
+     * {@link workloadKey} / {@link parseWorkloadKey}), or a `namespace/` key when
+     * a namespace is in scope with no workload picked in it yet.
      */
     value: string;
-    /** Called with the chosen `[namespace/]kind/name` key (or "" when cleared). */
+    /**
+     * Called with the chosen `[namespace/]kind/name` key. When namespace
+     * selection is on and no workload is picked it receives the `namespace/` key
+     * (see {@link namespaceKey}) rather than "", so a consumer persisting the
+     * value keeps the namespace; "" means nothing at all is selected.
+     */
     onChange: (value: string) => void;
     /**
      * Async getter the component calls to load the requested kinds' workloads.
      * Returns a map keyed by kind. The consumer owns fetching/caching.
      */
-    loadWorkloads: (kinds: WorkloadKind[]) => Promise<Record<WorkloadKind, WorkloadResource[]>>;
+    loadWorkloads: (kinds: WorkloadKind[], namespace?: string) => Promise<Partial<Record<WorkloadKind, WorkloadResource[]>>>;
     /**
      * Namespace the workloads live in. When set it prefixes the emitted key
      * (`namespace/kind/name`), so values stay distinct across namespaces.
      */
     namespace?: string;
-    /** Kinds to offer, in display order. Defaults to all four. */
+    /** Lets the user choose the namespace used to load and key workloads. */
+    allowNamespaceSelection?: boolean;
+    /** Required when namespace selection is enabled. */
+    loadNamespaces?: NamespacePickerProps["loadNamespaces"];
+    /** Reports the namespace independently of workload selection. */
+    onNamespaceChange?: (namespace: string | undefined) => void;
+    /** Kinds to offer, in display order. Defaults to every supported kind. */
     kinds?: WorkloadKind[];
     /**
      * When true, a non-empty value that does not match any loaded workload (once
@@ -31,8 +44,19 @@ export type WorkloadPickerProps = {
      * Defaults to true for the existing free-form workload picker behavior.
      */
     allowCustomValue?: boolean;
+    /**
+     * Render the sole loaded workload as plain text instead of a picker.
+     *
+     * A dropdown whose only entry is the one already in effect asks a question
+     * with one answer. This is for a scope that leaves nothing to choose — a
+     * Deployment with a single pod — where the workload is a fact to state rather
+     * than a selection to make. No value is emitted: the caller is already scoped
+     * to it, so writing it back would only add a filter that changes nothing.
+     */
+    collapseSingleOption?: boolean;
+    disabled?: boolean;
     placeholder?: string;
     className?: string;
 };
-export declare function WorkloadPicker({ value, onChange, loadWorkloads, namespace, kinds, strict, allowCustomValue, placeholder, className, }: WorkloadPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkloadPicker({ value, onChange, loadWorkloads, namespace, allowNamespaceSelection, loadNamespaces, onNamespaceChange, kinds, strict, allowCustomValue, collapseSingleOption, disabled, placeholder, className, }: WorkloadPickerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=WorkloadPicker.d.ts.map

package/dist/components/WorkloadPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WorkloadPicker.d.ts","sourceRoot":"","sources":["../../src/components/WorkloadPicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAML,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AAiBjC,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAC5F;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,aAAa,EACb,SAAS,EACT,KAA0B,EAC1B,MAAc,EACd,gBAAuB,EACvB,WAA0C,EAC1C,SAAS,GACV,EAAE,mBAAmB,2CAkErB"}
+{"version":3,"file":"WorkloadPicker.d.ts","sourceRoot":"","sources":["../../src/components/WorkloadPicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAQL,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AAiBjC,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,aAAa,EAAE,CACb,KAAK,EAAE,YAAY,EAAE,EACrB,SAAS,CAAC,EAAE,MAAM,KACf,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;IAChE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,oDAAoD;IACpD,cAAc,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC5D,0EAA0E;IAC1E,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;;;OAQG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,aAAa,EACb,SAAS,EACT,uBAA+B,EAC/B,cAAc,EACd,iBAAiB,EACjB,KAA0B,EAC1B,MAAc,EACd,gBAAuB,EACvB,oBAA4B,EAC5B,QAAgB,EAChB,WAA0C,EAC1C,SAAS,GACV,EAAE,mBAAmB,2CAoLrB"}