@flanksource/clicky-ui 0.2.21 → 0.3.2

package/dist/components/form-lookup-context.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext, createContext } from "react";
+const FormLookupContext = createContext(void 0);
+function FormLookupProvider({
+  fetcher,
+  children
+}) {
+  return /* @__PURE__ */ jsx(FormLookupContext.Provider, { value: fetcher, children });
+}
+function useLookupFetcher() {
+  return useContext(FormLookupContext);
+}
+function readPath(root, path) {
+  if (!root || !path) return "";
+  let cur = root;
+  for (const segment of path.split(".")) {
+    if (cur == null || typeof cur !== "object") return "";
+    cur = cur[segment];
+  }
+  return typeof cur === "string" || typeof cur === "number" ? String(cur) : "";
+}
+function resolveLookupScope(descriptor, rootValue) {
+  const scope = descriptor.scope;
+  if (!scope) return {};
+  const source = readPath(rootValue, scope.from);
+  if (!source) return {};
+  const values = scope.map ? scope.map[source] ?? [] : [source];
+  if (values.length === 0) return {};
+  return { [scope.param]: values.join(scope.join ?? ",") };
+}
+export {
+  FormLookupProvider,
+  resolveLookupScope,
+  useLookupFetcher
+};
+//# sourceMappingURL=form-lookup-context.js.map

package/dist/components/form-lookup-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-lookup-context.js","sources":["../../src/components/form-lookup-context.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from \"react\";\nimport type { LookupDescriptor, LookupFetcher } from \"./json-schema-form-types\";\n\n// FormLookupContext carries the host-provided LookupFetcher down to the\n// LookupControl rendered deep inside the form, so the form stays decoupled from\n// any specific RPC client. JsonSchemaForm provides it when given a lookupFetcher.\nconst FormLookupContext = createContext<LookupFetcher | undefined>(undefined);\n\nexport function FormLookupProvider({\n  fetcher,\n  children,\n}: {\n  fetcher?: LookupFetcher;\n  children: ReactNode;\n}) {\n  return <FormLookupContext.Provider value={fetcher}>{children}</FormLookupContext.Provider>;\n}\n\nexport function useLookupFetcher(): LookupFetcher | undefined {\n  return useContext(FormLookupContext);\n}\n\n// readPath resolves a dotted path (e.g. \"provider.type\") against the form's root\n// value, returning the string at that path or \"\" when absent/non-scalar.\nfunction readPath(root: Record<string, unknown> | undefined, path: string): string {\n  if (!root || !path) return \"\";\n  let cur: unknown = root;\n  for (const segment of path.split(\".\")) {\n    if (cur == null || typeof cur !== \"object\") return \"\";\n    cur = (cur as Record<string, unknown>)[segment];\n  }\n  return typeof cur === \"string\" || typeof cur === \"number\" ? String(cur) : \"\";\n}\n\n// resolveLookupScope computes the extra query params a lookup should send based\n// on a sibling field's value (LookupScope). Returns an empty object when the\n// descriptor has no scope or the source field is unset/unmapped — the lookup then\n// returns the full, unscoped option set.\nexport function resolveLookupScope(\n  descriptor: LookupDescriptor,\n  rootValue: Record<string, unknown> | undefined,\n): Record<string, string> {\n  const scope = descriptor.scope;\n  if (!scope) return {};\n  const source = readPath(rootValue, scope.from);\n  if (!source) return {};\n  const values = scope.map ? (scope.map[source] ?? []) : [source];\n  if (values.length === 0) return {};\n  return { [scope.param]: values.join(scope.join ?? \",\") };\n}\n"],"names":[],"mappings":";;AAMA,MAAM,oBAAoB,cAAyC,MAAS;AAErE,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAGG;AACD,6BAAQ,kBAAkB,UAAlB,EAA2B,OAAO,SAAU,UAAS;AAC/D;AAEO,SAAS,mBAA8C;AAC5D,SAAO,WAAW,iBAAiB;AACrC;AAIA,SAAS,SAAS,MAA2C,MAAsB;AACjF,MAAI,CAAC,QAAQ,CAAC,KAAM,QAAO;AAC3B,MAAI,MAAe;AACnB,aAAW,WAAW,KAAK,MAAM,GAAG,GAAG;AACrC,QAAI,OAAO,QAAQ,OAAO,QAAQ,SAAU,QAAO;AACnD,UAAO,IAAgC,OAAO;AAAA,EAChD;AACA,SAAO,OAAO,QAAQ,YAAY,OAAO,QAAQ,WAAW,OAAO,GAAG,IAAI;AAC5E;AAMO,SAAS,mBACd,YACA,WACwB;AACxB,QAAM,QAAQ,WAAW;AACzB,MAAI,CAAC,MAAO,QAAO,CAAA;AACnB,QAAM,SAAS,SAAS,WAAW,MAAM,IAAI;AAC7C,MAAI,CAAC,OAAQ,QAAO,CAAA;AACpB,QAAM,SAAS,MAAM,MAAO,MAAM,IAAI,MAAM,KAAK,KAAM,CAAC,MAAM;AAC9D,MAAI,OAAO,WAAW,EAAG,QAAO,CAAA;AAChC,SAAO,EAAE,CAAC,MAAM,KAAK,GAAG,OAAO,KAAK,MAAM,QAAQ,GAAG,EAAA;AACvD;"}

package/dist/components/icon-menu-picker.cjs

@@ -5,6 +5,7 @@ const react = require("react");
 const react$1 = require("@floating-ui/react");
 const utils = require("../lib/utils.cjs");
 const Icon = require("../data/Icon.cjs");
+const modalStack = require("../overlay/modalStack.cjs");
 const button = require("./button.cjs");
 const IconButton = require("./IconButton.cjs");
 const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
@@ -22,6 +23,7 @@ function IconMenuPickerInner({
   menuClassName
 }, forwardedRef) {
   const [open, setOpen] = react.useState(false);
+  const floatingZ = modalStack.useFloatingZIndex();
   const [activeIndex, setActiveIndex] = react.useState(null);
   const listRef = react.useRef([]);
   const labelsRef = react.useRef(options.map((o) => o.label));
@@ -41,7 +43,7 @@ function IconMenuPickerInner({
     middleware: [react$1.offset(6), react$1.flip({ padding: 8 }), react$1.shift({ padding: 8 })]
   });
   const click = react$1.useClick(context);
-  const dismiss = react$1.useDismiss(context);
+  const dismiss = react$1.useDismiss(context, { escapeKey: false });
   const role = react$1.useRole(context, { role: "menu" });
   const listNav = react$1.useListNavigation(context, {
     listRef,
@@ -62,6 +64,10 @@ function IconMenuPickerInner({
     listNav,
     typeahead
   ]);
+  modalStack.useEscapeLayer(open, () => {
+    setOpen(false);
+    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();
+  });
   const referenceRef = react$1.useMergeRefs([refs.setReference, forwardedRef]);
   const select = (next) => {
     onChange(next);
@@ -112,9 +118,9 @@ function IconMenuPickerInner({
         ref: refs.setFloating,
         role: "menu",
         "aria-label": ariaLabel,
-        style: floatingStyles,
+        style: { ...floatingStyles, zIndex: floatingZ },
         className: utils.cn(
-          "z-[9999] min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5",
+          "min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5",
           menuClassName
         ),
         ...getFloatingProps(),

package/dist/components/icon-menu-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon-menu-picker.cjs","sources":["../../src/components/icon-menu-picker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useMergeRefs,\n  useRole,\n  useTypeahead,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiCheck, UiChevronDown } from \"../icons\";\nimport { Button } from \"./button\";\nimport { IconButton } from \"./IconButton\";\n\nexport type IconMenuOption<T extends string> = {\n  value: T;\n  icon: StaticIconComponent;\n  label: string;\n  description?: string;\n};\n\nexport type IconMenuPickerProps<T extends string> = {\n  value: T;\n  onChange: (next: T) => void;\n  options: IconMenuOption<T>[];\n  ariaLabel: string;\n  triggerTitle?: string | undefined;\n  footer?: ReactNode | undefined;\n  showLabel?: boolean | undefined;\n  className?: string | undefined;\n  triggerClassName?: string | undefined;\n  menuClassName?: string | undefined;\n};\n\nfunction IconMenuPickerInner<T extends string>(\n  {\n    value,\n    onChange,\n    options,\n    ariaLabel,\n    triggerTitle,\n    footer,\n    showLabel,\n    className,\n    triggerClassName,\n    menuClassName,\n  }: IconMenuPickerProps<T>,\n  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const [open, setOpen] = useState(false);\n  // Index of the item highlighted by keyboard navigation. Null until the user\n  // arrows/typeaheads, so a pointer-opened menu starts with the selected row\n  // focused (selectedIndex below) rather than the first.\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n  const labelsRef = useRef<string[]>(options.map((o) => o.label));\n  labelsRef.current = options.map((o) => o.label);\n\n  const selectedIndex = useMemo(\n    () => options.findIndex((option) => option.value === value),\n    [options, value],\n  );\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(6) reproduces the previous 0.375rem gap; flip opens the menu\n    // upward when the trigger is near the bottom edge; shift slides it back\n    // on-screen at the left/right edges. The 8px padding keeps a gutter.\n    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    selectedIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n  const typeahead = useTypeahead(context, {\n    listRef: labelsRef,\n    activeIndex,\n    onMatch: setActiveIndex,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n    typeahead,\n  ]);\n\n  // Keep the trigger wrapper available both to floating-ui (as the positioning\n  // reference) and to the consumer's forwarded ref.\n  const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n  const select = (next: T) => {\n    onChange(next);\n    setOpen(false);\n  };\n\n  const selected = options[selectedIndex];\n  if (!selected) {\n    throw new Error(`IconMenuPicker: value \"${value}\" not found in options for ${ariaLabel}`);\n  }\n\n  const triggerTitleText = triggerTitle ?? `${ariaLabel}: ${selected.label}`;\n\n  return (\n    <div ref={referenceRef} className={cn(\"relative inline-flex\", showLabel && \"w-full\", className)}>\n      {showLabel ? (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"default\"\n          aria-label={ariaLabel}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          title={triggerTitleText}\n          className={cn(\n            \"w-full justify-start text-muted-foreground hover:text-foreground\",\n            triggerClassName,\n          )}\n          {...getReferenceProps()}\n        >\n          <Icon icon={selected.icon} className=\"shrink-0 text-foreground\" />\n          <span className=\"min-w-0 flex-1 truncate text-left capitalize\">\n            {`${ariaLabel}: ${selected.label}`}\n          </span>\n          <Icon icon={UiChevronDown} className=\"shrink-0 text-muted-foreground\" />\n        </Button>\n      ) : (\n        <IconButton\n          icon={selected.icon}\n          label={ariaLabel}\n          title={triggerTitleText}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          className={triggerClassName}\n          {...getReferenceProps()}\n        />\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false} initialFocus={selectedIndex}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={ariaLabel}\n              style={floatingStyles}\n              className={cn(\n                \"z-[9999] min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {options.map((option, index) => {\n                const active = option.value === value;\n                return (\n                  <button\n                    key={option.value}\n                    ref={(node) => {\n                      listRef.current[index] = node;\n                    }}\n                    type=\"button\"\n                    role=\"menuitemradio\"\n                    aria-checked={active}\n                    tabIndex={index === activeIndex ? 0 : -1}\n                    className={cn(\n                      \"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\",\n                      \"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none\",\n                      active && \"text-foreground\",\n                    )}\n                    {...getItemProps({\n                      onClick: () => select(option.value),\n                      onKeyDown: (event) => {\n                        if (event.key === \"Enter\" || event.key === \" \") {\n                          event.preventDefault();\n                          select(option.value);\n                        }\n                      },\n                    })}\n                  >\n                    <Icon icon={option.icon} className=\"shrink-0 text-muted-foreground\" />\n                    <span className=\"min-w-0 flex-1 truncate capitalize\">{option.label}</span>\n                    {active ? (\n                      <Icon icon={UiCheck} className=\"shrink-0 text-foreground\" />\n                    ) : (\n                      <span className=\"inline-block size-4 shrink-0\" aria-hidden />\n                    )}\n                  </button>\n                );\n              })}\n              {footer ? (\n                <div className=\"mt-1 border-t border-border/60 px-2 py-1.5 text-[11px] text-muted-foreground\">\n                  {footer}\n                </div>\n              ) : null}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n\nexport const IconMenuPicker = forwardRef(IconMenuPickerInner) as <T extends string>(\n  props: IconMenuPickerProps<T> & { ref?: React.Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["useState","useRef","useMemo","useFloating","autoUpdate","offset","flip","shift","useClick","useDismiss","useRole","useListNavigation","useTypeahead","useInteractions","useMergeRefs","jsxs","cn","Button","jsx","Icon","UiChevronDown","IconButton","FloatingPortal","FloatingFocusManager","UiCheck","forwardRef"],"mappings":"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"}
+{"version":3,"file":"icon-menu-picker.cjs","sources":["../../src/components/icon-menu-picker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useMergeRefs,\n  useRole,\n  useTypeahead,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { useEscapeLayer, useFloatingZIndex } from \"../overlay/modalStack\";\nimport { UiCheck, UiChevronDown } from \"../icons\";\nimport { Button } from \"./button\";\nimport { IconButton } from \"./IconButton\";\n\nexport type IconMenuOption<T extends string> = {\n  value: T;\n  icon: StaticIconComponent;\n  label: string;\n  description?: string;\n};\n\nexport type IconMenuPickerProps<T extends string> = {\n  value: T;\n  onChange: (next: T) => void;\n  options: IconMenuOption<T>[];\n  ariaLabel: string;\n  triggerTitle?: string | undefined;\n  footer?: ReactNode | undefined;\n  showLabel?: boolean | undefined;\n  className?: string | undefined;\n  triggerClassName?: string | undefined;\n  menuClassName?: string | undefined;\n};\n\nfunction IconMenuPickerInner<T extends string>(\n  {\n    value,\n    onChange,\n    options,\n    ariaLabel,\n    triggerTitle,\n    footer,\n    showLabel,\n    className,\n    triggerClassName,\n    menuClassName,\n  }: IconMenuPickerProps<T>,\n  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const [open, setOpen] = useState(false);\n  const floatingZ = useFloatingZIndex();\n  // Index of the item highlighted by keyboard navigation. Null until the user\n  // arrows/typeaheads, so a pointer-opened menu starts with the selected row\n  // focused (selectedIndex below) rather than the first.\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n  const labelsRef = useRef<string[]>(options.map((o) => o.label));\n  labelsRef.current = options.map((o) => o.label);\n\n  const selectedIndex = useMemo(\n    () => options.findIndex((option) => option.value === value),\n    [options, value],\n  );\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(6) reproduces the previous 0.375rem gap; flip opens the menu\n    // upward when the trigger is near the bottom edge; shift slides it back\n    // on-screen at the left/right edges. The 8px padding keeps a gutter.\n    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context, { escapeKey: false });\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    selectedIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n  const typeahead = useTypeahead(context, {\n    listRef: labelsRef,\n    activeIndex,\n    onMatch: setActiveIndex,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n    typeahead,\n  ]);\n  useEscapeLayer(open, () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n  });\n\n  // Keep the trigger wrapper available both to floating-ui (as the positioning\n  // reference) and to the consumer's forwarded ref.\n  const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n  const select = (next: T) => {\n    onChange(next);\n    setOpen(false);\n  };\n\n  const selected = options[selectedIndex];\n  if (!selected) {\n    throw new Error(`IconMenuPicker: value \"${value}\" not found in options for ${ariaLabel}`);\n  }\n\n  const triggerTitleText = triggerTitle ?? `${ariaLabel}: ${selected.label}`;\n\n  return (\n    <div ref={referenceRef} className={cn(\"relative inline-flex\", showLabel && \"w-full\", className)}>\n      {showLabel ? (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"default\"\n          aria-label={ariaLabel}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          title={triggerTitleText}\n          className={cn(\n            \"w-full justify-start text-muted-foreground hover:text-foreground\",\n            triggerClassName,\n          )}\n          {...getReferenceProps()}\n        >\n          <Icon icon={selected.icon} className=\"shrink-0 text-foreground\" />\n          <span className=\"min-w-0 flex-1 truncate text-left capitalize\">\n            {`${ariaLabel}: ${selected.label}`}\n          </span>\n          <Icon icon={UiChevronDown} className=\"shrink-0 text-muted-foreground\" />\n        </Button>\n      ) : (\n        <IconButton\n          icon={selected.icon}\n          label={ariaLabel}\n          title={triggerTitleText}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          className={triggerClassName}\n          {...getReferenceProps()}\n        />\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false} initialFocus={selectedIndex}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={ariaLabel}\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className={cn(\n                \"min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {options.map((option, index) => {\n                const active = option.value === value;\n                return (\n                  <button\n                    key={option.value}\n                    ref={(node) => {\n                      listRef.current[index] = node;\n                    }}\n                    type=\"button\"\n                    role=\"menuitemradio\"\n                    aria-checked={active}\n                    tabIndex={index === activeIndex ? 0 : -1}\n                    className={cn(\n                      \"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\",\n                      \"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none\",\n                      active && \"text-foreground\",\n                    )}\n                    {...getItemProps({\n                      onClick: () => select(option.value),\n                      onKeyDown: (event) => {\n                        if (event.key === \"Enter\" || event.key === \" \") {\n                          event.preventDefault();\n                          select(option.value);\n                        }\n                      },\n                    })}\n                  >\n                    <Icon icon={option.icon} className=\"shrink-0 text-muted-foreground\" />\n                    <span className=\"min-w-0 flex-1 truncate capitalize\">{option.label}</span>\n                    {active ? (\n                      <Icon icon={UiCheck} className=\"shrink-0 text-foreground\" />\n                    ) : (\n                      <span className=\"inline-block size-4 shrink-0\" aria-hidden />\n                    )}\n                  </button>\n                );\n              })}\n              {footer ? (\n                <div className=\"mt-1 border-t border-border/60 px-2 py-1.5 text-[11px] text-muted-foreground\">\n                  {footer}\n                </div>\n              ) : null}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n\nexport const IconMenuPicker = forwardRef(IconMenuPickerInner) as <T extends string>(\n  props: IconMenuPickerProps<T> & { ref?: React.Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["useState","useFloatingZIndex","useRef","useMemo","useFloating","autoUpdate","offset","flip","shift","useClick","useDismiss","useRole","useListNavigation","useTypeahead","useInteractions","useEscapeLayer","useMergeRefs","jsxs","cn","Button","jsx","Icon","UiChevronDown","IconButton","FloatingPortal","FloatingFocusManager","UiCheck","forwardRef"],"mappings":"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"}

package/dist/components/icon-menu-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-menu-picker.d.ts","sourceRoot":"","sources":["../../src/components/icon-menu-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAkBf,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAK9D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI;IAC7C,KAAK,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,IAAI;IAClD,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC,CAAC;AAoLF,eAAO,MAAM,cAAc,EAAsC,CAAC,CAAC,SAAS,MAAM,EAChF,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KAChE,GAAG,CAAC,OAAO,CAAC"}
+{"version":3,"file":"icon-menu-picker.d.ts","sourceRoot":"","sources":["../../src/components/icon-menu-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAkBf,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAM9D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI;IAC7C,KAAK,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,IAAI;IAClD,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC,CAAC;AAyLF,eAAO,MAAM,cAAc,EAAsC,CAAC,CAAC,SAAS,MAAM,EAChF,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KAChE,GAAG,CAAC,OAAO,CAAC"}

package/dist/components/icon-menu-picker.js

@@ -3,6 +3,7 @@ import { forwardRef, useState, useRef, useMemo } from "react";
 import { useFloating, autoUpdate, offset, flip, shift, useClick, useDismiss, useRole, useListNavigation, useTypeahead, useInteractions, useMergeRefs, FloatingPortal, FloatingFocusManager } from "@floating-ui/react";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
+import { useFloatingZIndex, useEscapeLayer } from "../overlay/modalStack.js";
 import { Button } from "./button.js";
 import { IconButton } from "./IconButton.js";
 import { UiChevronDown } from "../icons/components/UiChevronDown.js";
@@ -20,6 +21,7 @@ function IconMenuPickerInner({
   menuClassName
 }, forwardedRef) {
   const [open, setOpen] = useState(false);
+  const floatingZ = useFloatingZIndex();
   const [activeIndex, setActiveIndex] = useState(null);
   const listRef = useRef([]);
   const labelsRef = useRef(options.map((o) => o.label));
@@ -39,7 +41,7 @@ function IconMenuPickerInner({
     middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })]
   });
   const click = useClick(context);
-  const dismiss = useDismiss(context);
+  const dismiss = useDismiss(context, { escapeKey: false });
   const role = useRole(context, { role: "menu" });
   const listNav = useListNavigation(context, {
     listRef,
@@ -60,6 +62,10 @@ function IconMenuPickerInner({
     listNav,
     typeahead
   ]);
+  useEscapeLayer(open, () => {
+    setOpen(false);
+    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();
+  });
   const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);
   const select = (next) => {
     onChange(next);
@@ -110,9 +116,9 @@ function IconMenuPickerInner({
         ref: refs.setFloating,
         role: "menu",
         "aria-label": ariaLabel,
-        style: floatingStyles,
+        style: { ...floatingStyles, zIndex: floatingZ },
         className: cn(
-          "z-[9999] min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5",
+          "min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5",
           menuClassName
         ),
         ...getFloatingProps(),

package/dist/components/icon-menu-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-menu-picker.js","sources":["../../src/components/icon-menu-picker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useMergeRefs,\n  useRole,\n  useTypeahead,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiCheck, UiChevronDown } from \"../icons\";\nimport { Button } from \"./button\";\nimport { IconButton } from \"./IconButton\";\n\nexport type IconMenuOption<T extends string> = {\n  value: T;\n  icon: StaticIconComponent;\n  label: string;\n  description?: string;\n};\n\nexport type IconMenuPickerProps<T extends string> = {\n  value: T;\n  onChange: (next: T) => void;\n  options: IconMenuOption<T>[];\n  ariaLabel: string;\n  triggerTitle?: string | undefined;\n  footer?: ReactNode | undefined;\n  showLabel?: boolean | undefined;\n  className?: string | undefined;\n  triggerClassName?: string | undefined;\n  menuClassName?: string | undefined;\n};\n\nfunction IconMenuPickerInner<T extends string>(\n  {\n    value,\n    onChange,\n    options,\n    ariaLabel,\n    triggerTitle,\n    footer,\n    showLabel,\n    className,\n    triggerClassName,\n    menuClassName,\n  }: IconMenuPickerProps<T>,\n  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const [open, setOpen] = useState(false);\n  // Index of the item highlighted by keyboard navigation. Null until the user\n  // arrows/typeaheads, so a pointer-opened menu starts with the selected row\n  // focused (selectedIndex below) rather than the first.\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n  const labelsRef = useRef<string[]>(options.map((o) => o.label));\n  labelsRef.current = options.map((o) => o.label);\n\n  const selectedIndex = useMemo(\n    () => options.findIndex((option) => option.value === value),\n    [options, value],\n  );\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(6) reproduces the previous 0.375rem gap; flip opens the menu\n    // upward when the trigger is near the bottom edge; shift slides it back\n    // on-screen at the left/right edges. The 8px padding keeps a gutter.\n    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    selectedIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n  const typeahead = useTypeahead(context, {\n    listRef: labelsRef,\n    activeIndex,\n    onMatch: setActiveIndex,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n    typeahead,\n  ]);\n\n  // Keep the trigger wrapper available both to floating-ui (as the positioning\n  // reference) and to the consumer's forwarded ref.\n  const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n  const select = (next: T) => {\n    onChange(next);\n    setOpen(false);\n  };\n\n  const selected = options[selectedIndex];\n  if (!selected) {\n    throw new Error(`IconMenuPicker: value \"${value}\" not found in options for ${ariaLabel}`);\n  }\n\n  const triggerTitleText = triggerTitle ?? `${ariaLabel}: ${selected.label}`;\n\n  return (\n    <div ref={referenceRef} className={cn(\"relative inline-flex\", showLabel && \"w-full\", className)}>\n      {showLabel ? (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"default\"\n          aria-label={ariaLabel}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          title={triggerTitleText}\n          className={cn(\n            \"w-full justify-start text-muted-foreground hover:text-foreground\",\n            triggerClassName,\n          )}\n          {...getReferenceProps()}\n        >\n          <Icon icon={selected.icon} className=\"shrink-0 text-foreground\" />\n          <span className=\"min-w-0 flex-1 truncate text-left capitalize\">\n            {`${ariaLabel}: ${selected.label}`}\n          </span>\n          <Icon icon={UiChevronDown} className=\"shrink-0 text-muted-foreground\" />\n        </Button>\n      ) : (\n        <IconButton\n          icon={selected.icon}\n          label={ariaLabel}\n          title={triggerTitleText}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          className={triggerClassName}\n          {...getReferenceProps()}\n        />\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false} initialFocus={selectedIndex}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={ariaLabel}\n              style={floatingStyles}\n              className={cn(\n                \"z-[9999] min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {options.map((option, index) => {\n                const active = option.value === value;\n                return (\n                  <button\n                    key={option.value}\n                    ref={(node) => {\n                      listRef.current[index] = node;\n                    }}\n                    type=\"button\"\n                    role=\"menuitemradio\"\n                    aria-checked={active}\n                    tabIndex={index === activeIndex ? 0 : -1}\n                    className={cn(\n                      \"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\",\n                      \"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none\",\n                      active && \"text-foreground\",\n                    )}\n                    {...getItemProps({\n                      onClick: () => select(option.value),\n                      onKeyDown: (event) => {\n                        if (event.key === \"Enter\" || event.key === \" \") {\n                          event.preventDefault();\n                          select(option.value);\n                        }\n                      },\n                    })}\n                  >\n                    <Icon icon={option.icon} className=\"shrink-0 text-muted-foreground\" />\n                    <span className=\"min-w-0 flex-1 truncate capitalize\">{option.label}</span>\n                    {active ? (\n                      <Icon icon={UiCheck} className=\"shrink-0 text-foreground\" />\n                    ) : (\n                      <span className=\"inline-block size-4 shrink-0\" aria-hidden />\n                    )}\n                  </button>\n                );\n              })}\n              {footer ? (\n                <div className=\"mt-1 border-t border-border/60 px-2 py-1.5 text-[11px] text-muted-foreground\">\n                  {footer}\n                </div>\n              ) : null}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n\nexport const IconMenuPicker = forwardRef(IconMenuPickerInner) as <T extends string>(\n  props: IconMenuPickerProps<T> & { ref?: React.Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;AAiDA,SAAS,oBACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA,cACA;AACA,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAItC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAwB,IAAI;AAClE,QAAM,UAAU,OAA+B,EAAE;AACjD,QAAM,YAAY,OAAiB,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AAC9D,YAAU,UAAU,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK;AAE9C,QAAM,gBAAgB;AAAA,IACpB,MAAM,QAAQ,UAAU,CAAC,WAAW,OAAO,UAAU,KAAK;AAAA,IAC1D,CAAC,SAAS,KAAK;AAAA,EAAA;AAGjB,QAAM,EAAE,MAAM,gBAAgB,QAAA,IAAY,YAA4B;AAAA,IACpE;AAAA,IACA,cAAc;AAAA,IACd,WAAW;AAAA,IACX,sBAAsB;AAAA;AAAA;AAAA;AAAA,IAItB,YAAY,CAAC,OAAO,CAAC,GAAG,KAAK,EAAE,SAAS,EAAA,CAAG,GAAG,MAAM,EAAE,SAAS,EAAA,CAAG,CAAC;AAAA,EAAA,CACpE;AAED,QAAM,QAAQ,SAAS,OAAO;AAC9B,QAAM,UAAU,WAAW,OAAO;AAClC,QAAM,OAAO,QAAQ,SAAS,EAAE,MAAM,QAAQ;AAC9C,QAAM,UAAU,kBAAkB,SAAS;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,EAAA,CACP;AACD,QAAM,YAAY,aAAa,SAAS;AAAA,IACtC,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA,EAAA,CACV;AAED,QAAM,EAAE,mBAAmB,kBAAkB,aAAA,IAAiB,gBAAgB;AAAA,IAC5E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAID,QAAM,eAAe,aAAa,CAAC,KAAK,cAAc,YAAY,CAAC;AAEnE,QAAM,SAAS,CAAC,SAAY;AAC1B,aAAS,IAAI;AACb,YAAQ,KAAK;AAAA,EACf;AAEA,QAAM,WAAW,QAAQ,aAAa;AACtC,MAAI,CAAC,UAAU;AACb,UAAM,IAAI,MAAM,0BAA0B,KAAK,8BAA8B,SAAS,EAAE;AAAA,EAC1F;AAEA,QAAM,mBAAmB,gBAAgB,GAAG,SAAS,KAAK,SAAS,KAAK;AAExE,SACE,qBAAC,OAAA,EAAI,KAAK,cAAc,WAAW,GAAG,wBAAwB,aAAa,UAAU,SAAS,GAC3F,UAAA;AAAA,IAAA,YACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,OAAO;AAAA,QACP,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG,kBAAA;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,MAAA,EAAK,MAAM,SAAS,MAAM,WAAU,4BAA2B;AAAA,UAChE,oBAAC,UAAK,WAAU,gDACb,aAAG,SAAS,KAAK,SAAS,KAAK,GAAA,CAClC;AAAA,UACA,oBAAC,MAAA,EAAK,MAAM,eAAe,WAAU,iCAAA,CAAiC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAGxE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,SAAS;AAAA,QACf,OAAO;AAAA,QACP,OAAO;AAAA,QACP,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,WAAW;AAAA,QACV,GAAG,kBAAA;AAAA,MAAkB;AAAA,IAAA;AAAA,IAGzB,4BACE,gBAAA,EACC,UAAA,oBAAC,wBAAqB,SAAkB,OAAO,OAAO,cAAc,eAClE,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,OAAO;AAAA,QACP,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG,iBAAA;AAAA,QAEH,UAAA;AAAA,UAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,kBAAM,SAAS,OAAO,UAAU;AAChC,mBACE;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,KAAK,CAAC,SAAS;AACb,0BAAQ,QAAQ,KAAK,IAAI;AAAA,gBAC3B;AAAA,gBACA,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,gBAAc;AAAA,gBACd,UAAU,UAAU,cAAc,IAAI;AAAA,gBACtC,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA,UAAU;AAAA,gBAAA;AAAA,gBAEX,GAAG,aAAa;AAAA,kBACf,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,kBAClC,WAAW,CAAC,UAAU;AACpB,wBAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,4BAAM,eAAA;AACN,6BAAO,OAAO,KAAK;AAAA,oBACrB;AAAA,kBACF;AAAA,gBAAA,CACD;AAAA,gBAED,UAAA;AAAA,kBAAA,oBAAC,MAAA,EAAK,MAAM,OAAO,MAAM,WAAU,kCAAiC;AAAA,kBACpE,oBAAC,QAAA,EAAK,WAAU,sCAAsC,iBAAO,OAAM;AAAA,kBAClE,SACC,oBAAC,MAAA,EAAK,MAAM,SAAS,WAAU,2BAAA,CAA2B,IAE1D,oBAAC,QAAA,EAAK,WAAU,gCAA+B,eAAW,KAAA,CAAC;AAAA,gBAAA;AAAA,cAAA;AAAA,cA5BxD,OAAO;AAAA,YAAA;AAAA,UAgClB,CAAC;AAAA,UACA,SACC,oBAAC,OAAA,EAAI,WAAU,gFACZ,kBACH,IACE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAER,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;AAEO,MAAM,iBAAiB,WAAW,mBAAmB;"}
+{"version":3,"file":"icon-menu-picker.js","sources":["../../src/components/icon-menu-picker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useMergeRefs,\n  useRole,\n  useTypeahead,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { useEscapeLayer, useFloatingZIndex } from \"../overlay/modalStack\";\nimport { UiCheck, UiChevronDown } from \"../icons\";\nimport { Button } from \"./button\";\nimport { IconButton } from \"./IconButton\";\n\nexport type IconMenuOption<T extends string> = {\n  value: T;\n  icon: StaticIconComponent;\n  label: string;\n  description?: string;\n};\n\nexport type IconMenuPickerProps<T extends string> = {\n  value: T;\n  onChange: (next: T) => void;\n  options: IconMenuOption<T>[];\n  ariaLabel: string;\n  triggerTitle?: string | undefined;\n  footer?: ReactNode | undefined;\n  showLabel?: boolean | undefined;\n  className?: string | undefined;\n  triggerClassName?: string | undefined;\n  menuClassName?: string | undefined;\n};\n\nfunction IconMenuPickerInner<T extends string>(\n  {\n    value,\n    onChange,\n    options,\n    ariaLabel,\n    triggerTitle,\n    footer,\n    showLabel,\n    className,\n    triggerClassName,\n    menuClassName,\n  }: IconMenuPickerProps<T>,\n  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const [open, setOpen] = useState(false);\n  const floatingZ = useFloatingZIndex();\n  // Index of the item highlighted by keyboard navigation. Null until the user\n  // arrows/typeaheads, so a pointer-opened menu starts with the selected row\n  // focused (selectedIndex below) rather than the first.\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n  const labelsRef = useRef<string[]>(options.map((o) => o.label));\n  labelsRef.current = options.map((o) => o.label);\n\n  const selectedIndex = useMemo(\n    () => options.findIndex((option) => option.value === value),\n    [options, value],\n  );\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(6) reproduces the previous 0.375rem gap; flip opens the menu\n    // upward when the trigger is near the bottom edge; shift slides it back\n    // on-screen at the left/right edges. The 8px padding keeps a gutter.\n    middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context, { escapeKey: false });\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    selectedIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n  const typeahead = useTypeahead(context, {\n    listRef: labelsRef,\n    activeIndex,\n    onMatch: setActiveIndex,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n    typeahead,\n  ]);\n  useEscapeLayer(open, () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n  });\n\n  // Keep the trigger wrapper available both to floating-ui (as the positioning\n  // reference) and to the consumer's forwarded ref.\n  const referenceRef = useMergeRefs([refs.setReference, forwardedRef]);\n\n  const select = (next: T) => {\n    onChange(next);\n    setOpen(false);\n  };\n\n  const selected = options[selectedIndex];\n  if (!selected) {\n    throw new Error(`IconMenuPicker: value \"${value}\" not found in options for ${ariaLabel}`);\n  }\n\n  const triggerTitleText = triggerTitle ?? `${ariaLabel}: ${selected.label}`;\n\n  return (\n    <div ref={referenceRef} className={cn(\"relative inline-flex\", showLabel && \"w-full\", className)}>\n      {showLabel ? (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"default\"\n          aria-label={ariaLabel}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          title={triggerTitleText}\n          className={cn(\n            \"w-full justify-start text-muted-foreground hover:text-foreground\",\n            triggerClassName,\n          )}\n          {...getReferenceProps()}\n        >\n          <Icon icon={selected.icon} className=\"shrink-0 text-foreground\" />\n          <span className=\"min-w-0 flex-1 truncate text-left capitalize\">\n            {`${ariaLabel}: ${selected.label}`}\n          </span>\n          <Icon icon={UiChevronDown} className=\"shrink-0 text-muted-foreground\" />\n        </Button>\n      ) : (\n        <IconButton\n          icon={selected.icon}\n          label={ariaLabel}\n          title={triggerTitleText}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          className={triggerClassName}\n          {...getReferenceProps()}\n        />\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false} initialFocus={selectedIndex}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={ariaLabel}\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className={cn(\n                \"min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {options.map((option, index) => {\n                const active = option.value === value;\n                return (\n                  <button\n                    key={option.value}\n                    ref={(node) => {\n                      listRef.current[index] = node;\n                    }}\n                    type=\"button\"\n                    role=\"menuitemradio\"\n                    aria-checked={active}\n                    tabIndex={index === activeIndex ? 0 : -1}\n                    className={cn(\n                      \"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\",\n                      \"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none\",\n                      active && \"text-foreground\",\n                    )}\n                    {...getItemProps({\n                      onClick: () => select(option.value),\n                      onKeyDown: (event) => {\n                        if (event.key === \"Enter\" || event.key === \" \") {\n                          event.preventDefault();\n                          select(option.value);\n                        }\n                      },\n                    })}\n                  >\n                    <Icon icon={option.icon} className=\"shrink-0 text-muted-foreground\" />\n                    <span className=\"min-w-0 flex-1 truncate capitalize\">{option.label}</span>\n                    {active ? (\n                      <Icon icon={UiCheck} className=\"shrink-0 text-foreground\" />\n                    ) : (\n                      <span className=\"inline-block size-4 shrink-0\" aria-hidden />\n                    )}\n                  </button>\n                );\n              })}\n              {footer ? (\n                <div className=\"mt-1 border-t border-border/60 px-2 py-1.5 text-[11px] text-muted-foreground\">\n                  {footer}\n                </div>\n              ) : null}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n\nexport const IconMenuPicker = forwardRef(IconMenuPickerInner) as <T extends string>(\n  props: IconMenuPickerProps<T> & { ref?: React.Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":[],"mappings":"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"}

package/dist/components/json-schema-form-discriminator.cjs

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+require("react");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
+function DiscriminatedForm({
+  schema,
+  value,
+  onChange,
+  ctx,
+  discKey
+}) {
+  var _a;
+  const prop = (_a = schema.properties) == null ? void 0 : _a[discKey];
+  if (!prop) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: ctx.render.renderObjectFields(schema, value, onChange, ctx) });
+  const current = value[discKey];
+  const required = (schema.required ?? []).includes(discKey);
+  if (current == null || current === "") {
+    const built = ctx.render.renderFieldNodes(
+      {
+        key: discKey,
+        prop,
+        required,
+        value: current,
+        onChange: (next) => onChange({ ...value, [discKey]: next })
+      },
+      ctx
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-full flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: utils.cn("font-semibold", jsonSchemaFormSize.labelSizeClass[ctx.size]), children: typeof prop.title === "string" && prop.title ? prop.title : discKey }),
+      built == null ? void 0 : built.value
+    ] });
+  }
+  const selected = String(current);
+  const change = () => {
+    const next = { ...value };
+    delete next[discKey];
+    onChange(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-full flex items-center justify-between rounded-md border border-input px-3 py-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils.cn("flex items-center gap-2 font-medium", jsonSchemaFormSize.labelSizeClass[ctx.size]), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: iconFor(prop, selected), className: "text-lg text-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: labelFor(prop, selected) })
+      ] }),
+      !ctx.readOnly && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: change, className: "text-xs font-medium text-primary hover:underline", children: [
+        "Change ",
+        typeof prop.title === "string" && prop.title ? prop.title.toLowerCase() : discKey
+      ] })
+    ] }),
+    ctx.render.renderObjectFields(schema, value, onChange, ctx, { hiddenKeys: [discKey] })
+  ] });
+}
+function labelFor(prop, value) {
+  var _a;
+  const l = (_a = prop["x-enum-labels"]) == null ? void 0 : _a[value];
+  return typeof l === "string" && l ? l : value;
+}
+function iconFor(prop, value) {
+  var _a;
+  const i = (_a = prop["x-enum-icons"]) == null ? void 0 : _a[value];
+  return typeof i === "string" && i ? i : void 0;
+}
+exports.DiscriminatedForm = DiscriminatedForm;
+//# sourceMappingURL=json-schema-form-discriminator.cjs.map

package/dist/components/json-schema-form-discriminator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-discriminator.cjs","sources":["../../src/components/json-schema-form-discriminator.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { LabelIcon, type LabelIconSpec } from \"../data/Icon\";\nimport { labelSizeClass } from \"./json-schema-form-size\";\nimport type { JsonSchemaObject, JsonSchemaProperty, RenderContext } from \"./json-schema-form-types\";\n\n// DiscriminatedForm renders the two-phase \"pick a kind, then fill its form\" flow\n// driven by a schema's `x-discriminator`. Phase 1 (the discriminator value is\n// unset) shows only the discriminator control — typically the x-enum-icons grid.\n// Phase 2 (a value is chosen) collapses the picker to a compact header with a\n// \"Change\" affordance and renders the matched branch's fields (the discriminator\n// itself hidden, since the header already shows it). It returns nodes meant to be\n// children of the form's FieldsGrid (the header/phase-1 block span the full grid\n// width; phase-2 field rows snap to the grid tracks as usual).\nexport function DiscriminatedForm({\n  schema,\n  value,\n  onChange,\n  ctx,\n  discKey,\n}: {\n  schema: JsonSchemaObject;\n  value: Record<string, unknown>;\n  onChange: (next: Record<string, unknown>) => void;\n  ctx: RenderContext;\n  discKey: string;\n}): ReactNode {\n  const prop = schema.properties?.[discKey];\n  // A schema that names a discriminator it does not define is malformed; render\n  // it as an ordinary form rather than silently hiding everything.\n  if (!prop) return <>{ctx.render.renderObjectFields(schema, value, onChange, ctx)}</>;\n\n  const current = value[discKey];\n  const required = (schema.required ?? []).includes(discKey);\n\n  if (current == null || current === \"\") {\n    const built = ctx.render.renderFieldNodes(\n      {\n        key: discKey,\n        prop,\n        required,\n        value: current,\n        onChange: (next) => onChange({ ...value, [discKey]: next }),\n      },\n      ctx,\n    );\n    return (\n      <div className=\"col-span-full flex flex-col gap-2\">\n        <h3 className={cn(\"font-semibold\", labelSizeClass[ctx.size])}>\n          {typeof prop.title === \"string\" && prop.title ? prop.title : discKey}\n        </h3>\n        {built?.value}\n      </div>\n    );\n  }\n\n  const selected = String(current);\n  const change = () => {\n    const next = { ...value };\n    delete next[discKey];\n    onChange(next);\n  };\n  return (\n    <>\n      <div className=\"col-span-full flex items-center justify-between rounded-md border border-input px-3 py-2\">\n        <span className={cn(\"flex items-center gap-2 font-medium\", labelSizeClass[ctx.size])}>\n          <LabelIcon icon={iconFor(prop, selected)} className=\"text-lg text-foreground\" />\n          <span>{labelFor(prop, selected)}</span>\n        </span>\n        {!ctx.readOnly && (\n          <button type=\"button\" onClick={change} className=\"text-xs font-medium text-primary hover:underline\">\n            Change {typeof prop.title === \"string\" && prop.title ? prop.title.toLowerCase() : discKey}\n          </button>\n        )}\n      </div>\n      {ctx.render.renderObjectFields(schema, value, onChange, ctx, { hiddenKeys: [discKey] })}\n    </>\n  );\n}\n\nfunction labelFor(prop: JsonSchemaProperty, value: string): string {\n  const l = prop[\"x-enum-labels\"]?.[value];\n  return typeof l === \"string\" && l ? l : value;\n}\n\nfunction iconFor(prop: JsonSchemaProperty, value: string): LabelIconSpec | undefined {\n  const i = prop[\"x-enum-icons\"]?.[value];\n  return typeof i === \"string\" && i ? i : undefined;\n}\n"],"names":["jsx","Fragment","jsxs","cn","labelSizeClass","LabelIcon"],"mappings":";;;;;;;AAcO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMc;;AACZ,QAAM,QAAO,YAAO,eAAP,mBAAoB;AAGjC,MAAI,CAAC,KAAM,QAAOA,2BAAAA,IAAAC,WAAAA,UAAA,EAAG,UAAA,IAAI,OAAO,mBAAmB,QAAQ,OAAO,UAAU,GAAG,EAAA,CAAE;AAEjF,QAAM,UAAU,MAAM,OAAO;AAC7B,QAAM,YAAY,OAAO,YAAY,CAAA,GAAI,SAAS,OAAO;AAEzD,MAAI,WAAW,QAAQ,YAAY,IAAI;AACrC,UAAM,QAAQ,IAAI,OAAO;AAAA,MACvB;AAAA,QACE,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,UAAU,CAAC,SAAS,SAAS,EAAE,GAAG,OAAO,CAAC,OAAO,GAAG,KAAA,CAAM;AAAA,MAAA;AAAA,MAE5D;AAAA,IAAA;AAEF,WACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,MAAAF,+BAAC,QAAG,WAAWG,MAAAA,GAAG,iBAAiBC,mBAAAA,eAAe,IAAI,IAAI,CAAC,GACxD,UAAA,OAAO,KAAK,UAAU,YAAY,KAAK,QAAQ,KAAK,QAAQ,SAC/D;AAAA,MACC,+BAAO;AAAA,IAAA,GACV;AAAA,EAEJ;AAEA,QAAM,WAAW,OAAO,OAAO;AAC/B,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,EAAE,GAAG,MAAA;AAClB,WAAO,KAAK,OAAO;AACnB,aAAS,IAAI;AAAA,EACf;AACA,SACEF,2BAAAA,KAAAD,qBAAA,EACE,UAAA;AAAA,IAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,4FACb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,QAAA,EAAK,WAAWC,SAAG,uCAAuCC,mBAAAA,eAAe,IAAI,IAAI,CAAC,GACjF,UAAA;AAAA,QAAAJ,+BAACK,KAAAA,aAAU,MAAM,QAAQ,MAAM,QAAQ,GAAG,WAAU,2BAA0B;AAAA,QAC9EL,2BAAAA,IAAC,QAAA,EAAM,UAAA,SAAS,MAAM,QAAQ,EAAA,CAAE;AAAA,MAAA,GAClC;AAAA,MACC,CAAC,IAAI,YACJE,2BAAAA,KAAC,UAAA,EAAO,MAAK,UAAS,SAAS,QAAQ,WAAU,oDAAmD,UAAA;AAAA,QAAA;AAAA,QAC1F,OAAO,KAAK,UAAU,YAAY,KAAK,QAAQ,KAAK,MAAM,gBAAgB;AAAA,MAAA,EAAA,CACpF;AAAA,IAAA,GAEJ;AAAA,IACC,IAAI,OAAO,mBAAmB,QAAQ,OAAO,UAAU,KAAK,EAAE,YAAY,CAAC,OAAO,EAAA,CAAG;AAAA,EAAA,GACxF;AAEJ;AAEA,SAAS,SAAS,MAA0B,OAAuB;;AACjE,QAAM,KAAI,UAAK,eAAe,MAApB,mBAAwB;AAClC,SAAO,OAAO,MAAM,YAAY,IAAI,IAAI;AAC1C;AAEA,SAAS,QAAQ,MAA0B,OAA0C;;AACnF,QAAM,KAAI,UAAK,cAAc,MAAnB,mBAAuB;AACjC,SAAO,OAAO,MAAM,YAAY,IAAI,IAAI;AAC1C;;"}

package/dist/components/json-schema-form-discriminator.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { JsonSchemaObject, RenderContext } from './json-schema-form-types';
+export declare function DiscriminatedForm({ schema, value, onChange, ctx, discKey, }: {
+    schema: JsonSchemaObject;
+    value: Record<string, unknown>;
+    onChange: (next: Record<string, unknown>) => void;
+    ctx: RenderContext;
+    discKey: string;
+}): ReactNode;
+//# sourceMappingURL=json-schema-form-discriminator.d.ts.map

package/dist/components/json-schema-form-discriminator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-discriminator.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-discriminator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,gBAAgB,EAAsB,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAUpG,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,KAAK,EACL,QAAQ,EACR,GAAG,EACH,OAAO,GACR,EAAE;IACD,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAClD,GAAG,EAAE,aAAa,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB,GAAG,SAAS,CAoDZ"}

package/dist/components/json-schema-form-discriminator.js

@@ -0,0 +1,67 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import "react";
+import { cn } from "../lib/utils.js";
+import { LabelIcon } from "../data/Icon.js";
+import { labelSizeClass } from "./json-schema-form-size.js";
+function DiscriminatedForm({
+  schema,
+  value,
+  onChange,
+  ctx,
+  discKey
+}) {
+  var _a;
+  const prop = (_a = schema.properties) == null ? void 0 : _a[discKey];
+  if (!prop) return /* @__PURE__ */ jsx(Fragment, { children: ctx.render.renderObjectFields(schema, value, onChange, ctx) });
+  const current = value[discKey];
+  const required = (schema.required ?? []).includes(discKey);
+  if (current == null || current === "") {
+    const built = ctx.render.renderFieldNodes(
+      {
+        key: discKey,
+        prop,
+        required,
+        value: current,
+        onChange: (next) => onChange({ ...value, [discKey]: next })
+      },
+      ctx
+    );
+    return /* @__PURE__ */ jsxs("div", { className: "col-span-full flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: cn("font-semibold", labelSizeClass[ctx.size]), children: typeof prop.title === "string" && prop.title ? prop.title : discKey }),
+      built == null ? void 0 : built.value
+    ] });
+  }
+  const selected = String(current);
+  const change = () => {
+    const next = { ...value };
+    delete next[discKey];
+    onChange(next);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "col-span-full flex items-center justify-between rounded-md border border-input px-3 py-2", children: [
+      /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-2 font-medium", labelSizeClass[ctx.size]), children: [
+        /* @__PURE__ */ jsx(LabelIcon, { icon: iconFor(prop, selected), className: "text-lg text-foreground" }),
+        /* @__PURE__ */ jsx("span", { children: labelFor(prop, selected) })
+      ] }),
+      !ctx.readOnly && /* @__PURE__ */ jsxs("button", { type: "button", onClick: change, className: "text-xs font-medium text-primary hover:underline", children: [
+        "Change ",
+        typeof prop.title === "string" && prop.title ? prop.title.toLowerCase() : discKey
+      ] })
+    ] }),
+    ctx.render.renderObjectFields(schema, value, onChange, ctx, { hiddenKeys: [discKey] })
+  ] });
+}
+function labelFor(prop, value) {
+  var _a;
+  const l = (_a = prop["x-enum-labels"]) == null ? void 0 : _a[value];
+  return typeof l === "string" && l ? l : value;
+}
+function iconFor(prop, value) {
+  var _a;
+  const i = (_a = prop["x-enum-icons"]) == null ? void 0 : _a[value];
+  return typeof i === "string" && i ? i : void 0;
+}
+export {
+  DiscriminatedForm
+};
+//# sourceMappingURL=json-schema-form-discriminator.js.map

package/dist/components/json-schema-form-discriminator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-discriminator.js","sources":["../../src/components/json-schema-form-discriminator.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { LabelIcon, type LabelIconSpec } from \"../data/Icon\";\nimport { labelSizeClass } from \"./json-schema-form-size\";\nimport type { JsonSchemaObject, JsonSchemaProperty, RenderContext } from \"./json-schema-form-types\";\n\n// DiscriminatedForm renders the two-phase \"pick a kind, then fill its form\" flow\n// driven by a schema's `x-discriminator`. Phase 1 (the discriminator value is\n// unset) shows only the discriminator control — typically the x-enum-icons grid.\n// Phase 2 (a value is chosen) collapses the picker to a compact header with a\n// \"Change\" affordance and renders the matched branch's fields (the discriminator\n// itself hidden, since the header already shows it). It returns nodes meant to be\n// children of the form's FieldsGrid (the header/phase-1 block span the full grid\n// width; phase-2 field rows snap to the grid tracks as usual).\nexport function DiscriminatedForm({\n  schema,\n  value,\n  onChange,\n  ctx,\n  discKey,\n}: {\n  schema: JsonSchemaObject;\n  value: Record<string, unknown>;\n  onChange: (next: Record<string, unknown>) => void;\n  ctx: RenderContext;\n  discKey: string;\n}): ReactNode {\n  const prop = schema.properties?.[discKey];\n  // A schema that names a discriminator it does not define is malformed; render\n  // it as an ordinary form rather than silently hiding everything.\n  if (!prop) return <>{ctx.render.renderObjectFields(schema, value, onChange, ctx)}</>;\n\n  const current = value[discKey];\n  const required = (schema.required ?? []).includes(discKey);\n\n  if (current == null || current === \"\") {\n    const built = ctx.render.renderFieldNodes(\n      {\n        key: discKey,\n        prop,\n        required,\n        value: current,\n        onChange: (next) => onChange({ ...value, [discKey]: next }),\n      },\n      ctx,\n    );\n    return (\n      <div className=\"col-span-full flex flex-col gap-2\">\n        <h3 className={cn(\"font-semibold\", labelSizeClass[ctx.size])}>\n          {typeof prop.title === \"string\" && prop.title ? prop.title : discKey}\n        </h3>\n        {built?.value}\n      </div>\n    );\n  }\n\n  const selected = String(current);\n  const change = () => {\n    const next = { ...value };\n    delete next[discKey];\n    onChange(next);\n  };\n  return (\n    <>\n      <div className=\"col-span-full flex items-center justify-between rounded-md border border-input px-3 py-2\">\n        <span className={cn(\"flex items-center gap-2 font-medium\", labelSizeClass[ctx.size])}>\n          <LabelIcon icon={iconFor(prop, selected)} className=\"text-lg text-foreground\" />\n          <span>{labelFor(prop, selected)}</span>\n        </span>\n        {!ctx.readOnly && (\n          <button type=\"button\" onClick={change} className=\"text-xs font-medium text-primary hover:underline\">\n            Change {typeof prop.title === \"string\" && prop.title ? prop.title.toLowerCase() : discKey}\n          </button>\n        )}\n      </div>\n      {ctx.render.renderObjectFields(schema, value, onChange, ctx, { hiddenKeys: [discKey] })}\n    </>\n  );\n}\n\nfunction labelFor(prop: JsonSchemaProperty, value: string): string {\n  const l = prop[\"x-enum-labels\"]?.[value];\n  return typeof l === \"string\" && l ? l : value;\n}\n\nfunction iconFor(prop: JsonSchemaProperty, value: string): LabelIconSpec | undefined {\n  const i = prop[\"x-enum-icons\"]?.[value];\n  return typeof i === \"string\" && i ? i : undefined;\n}\n"],"names":[],"mappings":";;;;;AAcO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMc;;AACZ,QAAM,QAAO,YAAO,eAAP,mBAAoB;AAGjC,MAAI,CAAC,KAAM,QAAO,oBAAA,UAAA,EAAG,UAAA,IAAI,OAAO,mBAAmB,QAAQ,OAAO,UAAU,GAAG,EAAA,CAAE;AAEjF,QAAM,UAAU,MAAM,OAAO;AAC7B,QAAM,YAAY,OAAO,YAAY,CAAA,GAAI,SAAS,OAAO;AAEzD,MAAI,WAAW,QAAQ,YAAY,IAAI;AACrC,UAAM,QAAQ,IAAI,OAAO;AAAA,MACvB;AAAA,QACE,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,UAAU,CAAC,SAAS,SAAS,EAAE,GAAG,OAAO,CAAC,OAAO,GAAG,KAAA,CAAM;AAAA,MAAA;AAAA,MAE5D;AAAA,IAAA;AAEF,WACE,qBAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,MAAA,oBAAC,QAAG,WAAW,GAAG,iBAAiB,eAAe,IAAI,IAAI,CAAC,GACxD,UAAA,OAAO,KAAK,UAAU,YAAY,KAAK,QAAQ,KAAK,QAAQ,SAC/D;AAAA,MACC,+BAAO;AAAA,IAAA,GACV;AAAA,EAEJ;AAEA,QAAM,WAAW,OAAO,OAAO;AAC/B,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,EAAE,GAAG,MAAA;AAClB,WAAO,KAAK,OAAO;AACnB,aAAS,IAAI;AAAA,EACf;AACA,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,4FACb,UAAA;AAAA,MAAA,qBAAC,QAAA,EAAK,WAAW,GAAG,uCAAuC,eAAe,IAAI,IAAI,CAAC,GACjF,UAAA;AAAA,QAAA,oBAAC,aAAU,MAAM,QAAQ,MAAM,QAAQ,GAAG,WAAU,2BAA0B;AAAA,QAC9E,oBAAC,QAAA,EAAM,UAAA,SAAS,MAAM,QAAQ,EAAA,CAAE;AAAA,MAAA,GAClC;AAAA,MACC,CAAC,IAAI,YACJ,qBAAC,UAAA,EAAO,MAAK,UAAS,SAAS,QAAQ,WAAU,oDAAmD,UAAA;AAAA,QAAA;AAAA,QAC1F,OAAO,KAAK,UAAU,YAAY,KAAK,QAAQ,KAAK,MAAM,gBAAgB;AAAA,MAAA,EAAA,CACpF;AAAA,IAAA,GAEJ;AAAA,IACC,IAAI,OAAO,mBAAmB,QAAQ,OAAO,UAAU,KAAK,EAAE,YAAY,CAAC,OAAO,EAAA,CAAG;AAAA,EAAA,GACxF;AAEJ;AAEA,SAAS,SAAS,MAA0B,OAAuB;;AACjE,QAAM,KAAI,UAAK,eAAe,MAApB,mBAAwB;AAClC,SAAO,OAAO,MAAM,YAAY,IAAI,IAAI;AAC1C;AAEA,SAAS,QAAQ,MAA0B,OAA0C;;AACnF,QAAM,KAAI,UAAK,cAAc,MAAnB,mBAAuB;AACjC,SAAO,OAAO,MAAM,YAAY,IAAI,IAAI;AAC1C;"}