@flanksource/clicky-ui 0.3.40 → 0.3.42

package/dist/components/JsonSchemaForm.cjs

@@ -13,7 +13,7 @@ const FormLookupProvider = require("./FormLookupProvider.cjs");
 const jsonSchemaFormDiscriminator = require("./json-schema-form-discriminator.cjs");
 const jsonSchemaFormRefs = require("./json-schema-form-refs.cjs");
 const jsonSchemaFormRender = require("./json-schema-form-render.cjs");
-const jsonSchemaFormResolve = require("./json-schema-form-resolve.cjs");
+const jsonSchemaFormDefaults = require("./json-schema-form-defaults.cjs");
 const jsonSchemaFormUtils = require("./json-schema-form-utils.cjs");
 const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
 const jsonSchemaFormPreferences = require("./json-schema-form-preferences.cjs");
@@ -61,6 +61,7 @@ function JsonSchemaForm({
   persistPreferences = true,
   preferencesStorageKey = jsonSchemaFormPreferences.DEFAULT_PREFERENCES_STORAGE_KEY,
   lookupFetcher,
+  expressionEvaluator,
   applyDefaults = true
 }) {
   const [prefs, setPrefs] = react.useState(
@@ -77,7 +78,7 @@ function JsonSchemaForm({
   };
   const resolvedSchema = react.useMemo(() => jsonSchemaFormRefs.rehydrateRefs(schema), [schema]);
   const effectiveValue = react.useMemo(
-    () => applyDefaults ? jsonSchemaFormResolve.applySchemaDefaults(resolvedSchema, value) : value,
+    () => applyDefaults ? jsonSchemaFormDefaults.applySchemaDefaults(resolvedSchema, value) : value,
     [applyDefaults, resolvedSchema, value]
   );
   const preExtensions = pre ?? [];
@@ -86,21 +87,24 @@ function JsonSchemaForm({
       schema: resolvedSchema,
       value: effectiveValue,
       errors,
+      viewOnly: readOnly,
       hideReadOnlyFields,
       hideEmpty,
       pre: preExtensions,
       rootValue: rootValue ?? effectiveValue,
       instancePath,
       ...hiddenKeys ? { hiddenKeys } : {},
-      ...fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}
+      ...fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {},
+      ...expressionEvaluator ? { expressionEvaluator } : {}
     }),
-    [effectiveValue, errors, fieldFilter, hiddenKeys, hideEmpty, hideReadOnlyFields, instancePath, preExtensions, resolvedSchema, rootValue]
+    [effectiveValue, errors, expressionEvaluator, fieldFilter, hiddenKeys, hideEmpty, hideReadOnlyFields, instancePath, preExtensions, readOnly, resolvedSchema, rootValue]
   );
   react.useEffect(() => {
     if (!readOnly && effectiveValue !== value) onChange(effectiveValue);
   }, [effectiveValue, onChange, readOnly, value]);
   const ctx = {
     readOnly,
+    viewOnly: readOnly,
     hideReadOnlyFields,
     hideEmpty,
     autoSave,
@@ -115,8 +119,10 @@ function JsonSchemaForm({
     errors,
     depth: 0,
     render: jsonSchemaFormRender.renderApi,
+    ...expressionEvaluator ? { expressionEvaluator } : {},
     ...idPrefix ? { idPrefix } : {},
-    ...fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}
+    ...fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {},
+    ...prefs.debug ? { debug: true } : {}
   };
   const discKey = typeof resolvedSchema["x-discriminator"] === "string" ? resolvedSchema["x-discriminator"] : void 0;
   const inPickerPhase = discKey != null && (effectiveValue[discKey] == null || effectiveValue[discKey] === "");
@@ -134,7 +140,9 @@ function JsonSchemaForm({
         onFilterChange: setFieldFilter,
         onSelectSize: (next) => applyPrefs({ ...prefs, size: next }),
         onSelectLayout: (next) => applyPrefs({ ...prefs, layoutMode: next }),
-        onSelectSort: (next) => applyPrefs({ ...prefs, sortMode: next })
+        onSelectSort: (next) => applyPrefs({ ...prefs, sortMode: next }),
+        debug: prefs.debug === true,
+        onToggleDebug: () => applyPrefs({ ...prefs, debug: !prefs.debug })
       }
     ),
     title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: utils.cn("font-semibold", jsonSchemaFormSize.labelSizeClass[effectiveSize]), children: title }),
@@ -194,9 +202,11 @@ function PreferencesMenu({
   onFilterChange,
   onSelectSize,
   onSelectLayout,
-  onSelectSort
+  onSelectSort,
+  debug,
+  onToggleDebug
 }) {
-  const filterActive = fieldFilter.trim() !== "";
+  const filterActive = fieldFilter.trim() !== "" || debug;
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenu.DropdownMenu,
     {
@@ -256,7 +266,20 @@ function PreferencesMenu({
             }
           },
           opt.value
-        ))
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(PreferenceSection, { title: "Debug" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PreferenceItem,
+          {
+            role: "menuitemcheckbox",
+            label: "Show hidden fields & sources",
+            selected: debug,
+            onSelect: () => {
+              onToggleDebug();
+              closeMenu();
+            }
+          }
+        )
       ] })
     }
   );
@@ -264,12 +287,17 @@ function PreferencesMenu({
 function PreferenceSection({ title }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: title });
 }
-function PreferenceItem({ label, selected, onSelect }) {
+function PreferenceItem({
+  label,
+  selected,
+  onSelect,
+  role = "menuitemradio"
+}) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       type: "button",
-      role: "menuitemradio",
+      role,
       "aria-checked": selected,
       className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground",
       onClick: onSelect,

package/dist/components/JsonSchemaForm.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JsonSchemaForm.cjs","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiEllipsisBold } from \"../icons\";\nimport { FormFieldFilter } from \"./json-schema-form-filter-input\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { FieldsGrid } from \"./json-schema-form-layout\";\nimport { FormErrorSummary } from \"./json-schema-form-error-display\";\nimport { unmatchedFormErrors } from \"./json-schema-form-errors\";\nimport { FormLookupProvider } from \"./FormLookupProvider\";\nimport { DiscriminatedForm } from \"./json-schema-form-discriminator\";\nimport { rehydrateRefs } from \"./json-schema-form-refs\";\nimport { renderApi, renderObjectFields } from \"./json-schema-form-render\";\nimport { applySchemaDefaults } from \"./json-schema-form-resolve\";\nimport {\n  cssLength,\n  DEFAULT_COLUMN_MIN_WIDTH,\n  normalizeColumns,\n} from \"./json-schema-form-utils\";\nimport { DEFAULT_FORM_SIZE, fieldInnerGapClass, labelSizeClass, type FormSize } from \"./json-schema-form-size\";\nimport {\n  DEFAULT_PREFERENCES_STORAGE_KEY,\n  readPreferences,\n  writePreferences,\n  type FormPreferences,\n  type LayoutMode,\n  type SortMode,\n} from \"./json-schema-form-preferences\";\nimport type { FormLayout, JsonSchemaFormProps, RenderContext } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"600px\";\n\n// resolveFormLayout maps the `layout`/`inline` props plus an optional menu-driven\n// `modeOverride` to a single resolved FormLayout. An explicit `layout` sets the\n// base; `inline` is the shorthand for it; `modeOverride` (from the preferences\n// menu) wins over both but only flips the mode — width caps from `layout` are\n// preserved. Both modes fill valueMaxWidth (inline value column / stacked\n// label+value stack); the label cap only applies inline.\nfunction resolveFormLayout(\n  layout: FormLayout | undefined,\n  inline: boolean,\n  modeOverride: LayoutMode | undefined,\n): FormLayout {\n  const baseMode = layout?.mode ?? (inline ? \"inline\" : \"stacked\");\n  const mode = modeOverride ?? baseMode;\n  const valueMaxWidth = layout?.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH;\n  // `help` is orthogonal to mode, so it survives a menu-driven mode flip.\n  const help = layout?.help ? { help: layout.help } : {};\n  if (mode === \"properties\") return { ...layout, mode, ...help };\n  if (mode !== \"inline\") return { mode: \"stacked\", valueMaxWidth, ...help };\n  return {\n    mode: \"inline\",\n    labelMaxWidth: layout?.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n    valueMaxWidth,\n    ...help,\n  };\n}\n\n// JsonSchemaForm renders an object subschema as a form: one control per\n// (effective) property. It resolves if/then conditionals internally and recurses\n// through array items and object/map values; every other behaviour is layered on\n// by the pre/post extension functions the consumer supplies. The component holds\n// no domain knowledge.\nexport function JsonSchemaForm({\n  schema,\n  value,\n  onChange,\n  rootValue,\n  onRootChange,\n  instancePath = \"\",\n  errors = [],\n  readOnly = false,\n  inline = false,\n  layout,\n  size = DEFAULT_FORM_SIZE,\n  idPrefix,\n  hideReadOnlyFields = false,\n  hideEmpty = false,\n  autoSave = false,\n  hiddenKeys,\n  requiredFirst = false,\n  title,\n  pre,\n  post,\n  showPreferencesMenu = true,\n  showFilter,\n  persistPreferences = true,\n  preferencesStorageKey = DEFAULT_PREFERENCES_STORAGE_KEY,\n  lookupFetcher,\n  applyDefaults = true,\n}: JsonSchemaFormProps) {\n  // When the menu is hidden, never touch localStorage and start from an empty\n  // override so behaviour is identical to before this feature existed.\n  const [prefs, setPrefs] = useState<FormPreferences>(() =>\n    showPreferencesMenu && persistPreferences ? readPreferences(preferencesStorageKey) : {},\n  );\n  // The field filter is transient view state (a \"find\" over the fields), never\n  // persisted — reopening the form should never start with fields hidden.\n  const [fieldFilter, setFieldFilter] = useState(\"\");\n\n  const effectiveSize = prefs.size ?? size;\n  const resolvedLayout = resolveFormLayout(layout, inline, prefs.layoutMode);\n  const filterVisible = showFilter ?? (showPreferencesMenu && resolvedLayout.mode === \"properties\");\n  // The `requiredFirst` prop sets the base sort; a menu selection overrides it.\n  const effectiveSortMode = prefs.sortMode ?? (requiredFirst ? \"required-first\" : \"schema\");\n\n  const applyPrefs = (next: FormPreferences) => {\n    setPrefs(next);\n    if (persistPreferences) writePreferences(preferencesStorageKey, next);\n  };\n\n  // A bundled schema (components under `$defs`, referenced by local `#/$defs`\n  // pointers) is resolved once into a self-contained tree the renderer walks\n  // directly; a non-bundled schema passes through untouched.\n  const resolvedSchema = useMemo(() => rehydrateRefs(schema), [schema]);\n  // Suppressing at the value (not only at the commit effect below) is deliberate:\n  // renderObjectFields spreads `effectiveValue` when a single field changes, so a\n  // render-only application would still leak the defaults on the first edit.\n  const effectiveValue = useMemo(\n    () => (applyDefaults ? applySchemaDefaults(resolvedSchema, value) : value),\n    [applyDefaults, resolvedSchema, value],\n  );\n  const preExtensions = pre ?? [];\n  const unmatchedErrors = useMemo(\n    () =>\n      unmatchedFormErrors({\n        schema: resolvedSchema,\n        value: effectiveValue,\n        errors,\n        hideReadOnlyFields,\n        hideEmpty,\n        pre: preExtensions,\n        rootValue: rootValue ?? effectiveValue,\n        instancePath,\n        ...(hiddenKeys ? { hiddenKeys } : {}),\n        ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n      }),\n    [effectiveValue, errors, fieldFilter, hiddenKeys, hideEmpty, hideReadOnlyFields, instancePath, preExtensions, resolvedSchema, rootValue],\n  );\n  // Defaults are part of the submitted form value, not only presentation. This\n  // is especially important for required discriminator fields whose default\n  // selects an if/then branch.\n  useEffect(() => {\n    if (!readOnly && effectiveValue !== value) onChange(effectiveValue);\n  }, [effectiveValue, onChange, readOnly, value]);\n\n  const ctx: RenderContext = {\n    readOnly,\n    hideReadOnlyFields,\n    hideEmpty,\n    autoSave,\n    layout: resolvedLayout,\n    size: effectiveSize,\n    sortMode: effectiveSortMode,\n    pre: preExtensions,\n    post: post ?? [],\n    rootValue: rootValue ?? effectiveValue,\n    onRootChange: onRootChange ?? onChange,\n    instancePath,\n    errors,\n    depth: 0,\n    render: renderApi,\n    ...(idPrefix ? { idPrefix } : {}),\n    ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n  };\n  // A schema may name a discriminator property whose value selects a \"kind\"; the\n  // form then runs a two-phase pick-then-fill flow (see DiscriminatedForm).\n  const discKey = typeof resolvedSchema[\"x-discriminator\"] === \"string\" ? resolvedSchema[\"x-discriminator\"] : undefined;\n  const inPickerPhase = discKey != null && (effectiveValue[discKey] == null || effectiveValue[discKey] === \"\");\n\n  const objectRows = discKey\n    ? null\n    : renderObjectFields(resolvedSchema, effectiveValue, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined);\n  const noMatches = objectRows != null && objectRows.length === 0 && fieldFilter.trim() !== \"\";\n\n  return (\n    <FormLookupProvider {...(lookupFetcher ? { fetcher: lookupFetcher } : {})}>\n      <div data-json-schema-form className={cn(\"relative flex flex-col\", fieldInnerGapClass[effectiveSize])}>\n        {showPreferencesMenu && !inPickerPhase && (\n          <PreferencesMenu\n            size={effectiveSize}\n            layoutMode={resolvedLayout.mode}\n            sortMode={effectiveSortMode}\n            fieldFilter={fieldFilter}\n            filterInMenu={!filterVisible}\n            onFilterChange={setFieldFilter}\n            onSelectSize={(next) => applyPrefs({ ...prefs, size: next })}\n            onSelectLayout={(next) => applyPrefs({ ...prefs, layoutMode: next })}\n            onSelectSort={(next) => applyPrefs({ ...prefs, sortMode: next })}\n          />\n        )}\n        {title && <h3 className={cn(\"font-semibold\", labelSizeClass[effectiveSize])}>{title}</h3>}\n        {filterVisible && !inPickerPhase && (\n          <div className=\"max-w-md pr-9\">\n            <FormFieldFilter value={fieldFilter} onChange={setFieldFilter} />\n          </div>\n        )}\n        <FormErrorSummary errors={unmatchedErrors} />\n        <FieldsGrid\n          layout={resolvedLayout}\n          size={effectiveSize}\n          columns={normalizeColumns(resolvedSchema[\"x-columns\"])}\n          columnMinWidth={cssLength(resolvedSchema[\"x-column-min-width\"], DEFAULT_COLUMN_MIN_WIDTH)}\n          {...(typeof resolvedSchema[\"x-columns-max-width\"] === \"string\"\n            ? { columnsMaxWidth: resolvedSchema[\"x-columns-max-width\"] }\n            : {})}\n          {...(typeof resolvedSchema[\"x-classes\"] === \"string\" ? { className: resolvedSchema[\"x-classes\"] } : {})}\n        >\n          {discKey ? (\n            <DiscriminatedForm\n              schema={resolvedSchema}\n              value={effectiveValue}\n              onChange={onChange}\n              ctx={ctx}\n              discKey={discKey}\n            />\n          ) : (\n            objectRows\n          )}\n        </FieldsGrid>\n        {noMatches && (\n          <p className={cn(\"text-muted-foreground\", labelSizeClass[effectiveSize])}>\n            No fields match “{fieldFilter.trim()}”.\n          </p>\n        )}\n      </div>\n    </FormLookupProvider>\n  );\n}\n\nconst SIZE_OPTIONS: { value: FormSize; label: string }[] = [\n  { value: \"xs\", label: \"Extra small\" },\n  { value: \"sm\", label: \"Small\" },\n  { value: \"md\", label: \"Medium\" },\n  { value: \"lg\", label: \"Large\" },\n  { value: \"xl\", label: \"Extra large\" },\n];\n\nconst LAYOUT_OPTIONS: { value: LayoutMode; label: string }[] = [\n  { value: \"stacked\", label: \"Stacked\" },\n  { value: \"inline\", label: \"Inline\" },\n  { value: \"properties\", label: \"Properties\" },\n];\n\nconst SORT_OPTIONS: { value: SortMode; label: string }[] = [\n  { value: \"schema\", label: \"Schema order\" },\n  { value: \"required-first\", label: \"Required first\" },\n  { value: \"priority\", label: \"Required & filled first\" },\n];\n\n// PreferencesMenu is the compact top-right ellipsis menu controlling this form's\n// size, layout, sort, and a live field filter. Selecting an option fires the\n// matching callback and closes the menu; typing in the filter updates fields\n// live without closing. The parent decides whether to persist.\nfunction PreferencesMenu({\n  size,\n  layoutMode,\n  sortMode,\n  fieldFilter,\n  filterInMenu,\n  onFilterChange,\n  onSelectSize,\n  onSelectLayout,\n  onSelectSort,\n}: {\n  size: FormSize;\n  layoutMode: LayoutMode;\n  sortMode: SortMode;\n  fieldFilter: string;\n  filterInMenu: boolean;\n  onFilterChange: (value: string) => void;\n  onSelectSize: (size: FormSize) => void;\n  onSelectLayout: (mode: LayoutMode) => void;\n  onSelectSort: (mode: SortMode) => void;\n}) {\n  const filterActive = fieldFilter.trim() !== \"\";\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel=\"Form display options\"\n      className=\"absolute right-0 top-0 z-10\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label=\"Form display options\"\n          aria-haspopup=\"menu\"\n          className={cn(\n            \"inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            filterActive ? \"text-primary\" : \"text-muted-foreground hover:text-foreground\",\n          )}\n        >\n          <Icon icon={UiEllipsisBold} className=\"text-lg\" />\n        </button>\n      }\n    >\n      {(closeMenu) => (\n        <>\n          {filterInMenu && <div className=\"px-2 pb-1.5 pt-1\">\n            <FormFieldFilter value={fieldFilter} onChange={onFilterChange} />\n          </div>}\n          <PreferenceSection title=\"Size\" />\n          {SIZE_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === size}\n              onSelect={() => {\n                onSelectSize(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n          <PreferenceSection title=\"Layout\" />\n          {LAYOUT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === layoutMode}\n              onSelect={() => {\n                onSelectLayout(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n          <PreferenceSection title=\"Sort\" />\n          {SORT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === sortMode}\n              onSelect={() => {\n                onSelectSort(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n        </>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction PreferenceSection({ title }: { title: string }) {\n  return (\n    <div className=\"px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n      {title}\n    </div>\n  );\n}\n\nfunction PreferenceItem({ label, selected, onSelect }: { label: string; selected: boolean; onSelect: () => void }) {\n  return (\n    <button\n      type=\"button\"\n      role=\"menuitemradio\"\n      aria-checked={selected}\n      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground\"\n      onClick={onSelect}\n    >\n      <span className=\"flex w-3.5 shrink-0 justify-center\">\n        {selected && <Icon icon={UiCheck} className=\"text-xs\" />}\n      </span>\n      {label}\n    </button>\n  );\n}\n"],"names":["DEFAULT_FORM_SIZE","DEFAULT_PREFERENCES_STORAGE_KEY","useState","readPreferences","writePreferences","useMemo","rehydrateRefs","applySchemaDefaults","unmatchedFormErrors","useEffect","renderApi","renderObjectFields","jsx","FormLookupProvider","cn","fieldInnerGapClass","labelSizeClass","FormFieldFilter","FormErrorSummary","FieldsGrid","normalizeColumns","cssLength","DEFAULT_COLUMN_MIN_WIDTH","DiscriminatedForm","DropdownMenu","Icon","UiEllipsisBold","jsxs","Fragment","UiCheck"],"mappings":"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"}
+{"version":3,"file":"JsonSchemaForm.cjs","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiEllipsisBold } from \"../icons\";\nimport { FormFieldFilter } from \"./json-schema-form-filter-input\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { FieldsGrid } from \"./json-schema-form-layout\";\nimport { FormErrorSummary } from \"./json-schema-form-error-display\";\nimport { unmatchedFormErrors } from \"./json-schema-form-errors\";\nimport { FormLookupProvider } from \"./FormLookupProvider\";\nimport { DiscriminatedForm } from \"./json-schema-form-discriminator\";\nimport { rehydrateRefs } from \"./json-schema-form-refs\";\nimport { renderApi, renderObjectFields } from \"./json-schema-form-render\";\nimport { applySchemaDefaults } from \"./json-schema-form-defaults\";\nimport {\n  cssLength,\n  DEFAULT_COLUMN_MIN_WIDTH,\n  normalizeColumns,\n} from \"./json-schema-form-utils\";\nimport { DEFAULT_FORM_SIZE, fieldInnerGapClass, labelSizeClass, type FormSize } from \"./json-schema-form-size\";\nimport {\n  DEFAULT_PREFERENCES_STORAGE_KEY,\n  readPreferences,\n  writePreferences,\n  type FormPreferences,\n  type LayoutMode,\n  type SortMode,\n} from \"./json-schema-form-preferences\";\nimport type { FormLayout, JsonSchemaFormProps, RenderContext } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"600px\";\n\n// resolveFormLayout maps the `layout`/`inline` props plus an optional menu-driven\n// `modeOverride` to a single resolved FormLayout. An explicit `layout` sets the\n// base; `inline` is the shorthand for it; `modeOverride` (from the preferences\n// menu) wins over both but only flips the mode — width caps from `layout` are\n// preserved. Both modes fill valueMaxWidth (inline value column / stacked\n// label+value stack); the label cap only applies inline.\nfunction resolveFormLayout(\n  layout: FormLayout | undefined,\n  inline: boolean,\n  modeOverride: LayoutMode | undefined,\n): FormLayout {\n  const baseMode = layout?.mode ?? (inline ? \"inline\" : \"stacked\");\n  const mode = modeOverride ?? baseMode;\n  const valueMaxWidth = layout?.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH;\n  // `help` is orthogonal to mode, so it survives a menu-driven mode flip.\n  const help = layout?.help ? { help: layout.help } : {};\n  if (mode === \"properties\") return { ...layout, mode, ...help };\n  if (mode !== \"inline\") return { mode: \"stacked\", valueMaxWidth, ...help };\n  return {\n    mode: \"inline\",\n    labelMaxWidth: layout?.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n    valueMaxWidth,\n    ...help,\n  };\n}\n\n// JsonSchemaForm renders an object subschema as a form: one control per\n// (effective) property. It resolves if/then conditionals internally and recurses\n// through array items and object/map values; every other behaviour is layered on\n// by the pre/post extension functions the consumer supplies. The component holds\n// no domain knowledge.\nexport function JsonSchemaForm({\n  schema,\n  value,\n  onChange,\n  rootValue,\n  onRootChange,\n  instancePath = \"\",\n  errors = [],\n  readOnly = false,\n  inline = false,\n  layout,\n  size = DEFAULT_FORM_SIZE,\n  idPrefix,\n  hideReadOnlyFields = false,\n  hideEmpty = false,\n  autoSave = false,\n  hiddenKeys,\n  requiredFirst = false,\n  title,\n  pre,\n  post,\n  showPreferencesMenu = true,\n  showFilter,\n  persistPreferences = true,\n  preferencesStorageKey = DEFAULT_PREFERENCES_STORAGE_KEY,\n  lookupFetcher,\n  expressionEvaluator,\n  applyDefaults = true,\n}: JsonSchemaFormProps) {\n  // When the menu is hidden, never touch localStorage and start from an empty\n  // override so behaviour is identical to before this feature existed.\n  const [prefs, setPrefs] = useState<FormPreferences>(() =>\n    showPreferencesMenu && persistPreferences ? readPreferences(preferencesStorageKey) : {},\n  );\n  // The field filter is transient view state (a \"find\" over the fields), never\n  // persisted — reopening the form should never start with fields hidden.\n  const [fieldFilter, setFieldFilter] = useState(\"\");\n\n  const effectiveSize = prefs.size ?? size;\n  const resolvedLayout = resolveFormLayout(layout, inline, prefs.layoutMode);\n  const filterVisible = showFilter ?? (showPreferencesMenu && resolvedLayout.mode === \"properties\");\n  // The `requiredFirst` prop sets the base sort; a menu selection overrides it.\n  const effectiveSortMode = prefs.sortMode ?? (requiredFirst ? \"required-first\" : \"schema\");\n\n  const applyPrefs = (next: FormPreferences) => {\n    setPrefs(next);\n    if (persistPreferences) writePreferences(preferencesStorageKey, next);\n  };\n\n  // A bundled schema (components under `$defs`, referenced by local `#/$defs`\n  // pointers) is resolved once into a self-contained tree the renderer walks\n  // directly; a non-bundled schema passes through untouched.\n  const resolvedSchema = useMemo(() => rehydrateRefs(schema), [schema]);\n  // Suppressing at the value (not only at the commit effect below) is deliberate:\n  // renderObjectFields spreads `effectiveValue` when a single field changes, so a\n  // render-only application would still leak the defaults on the first edit.\n  const effectiveValue = useMemo(\n    () => (applyDefaults ? applySchemaDefaults(resolvedSchema, value) : value),\n    [applyDefaults, resolvedSchema, value],\n  );\n  const preExtensions = pre ?? [];\n  const unmatchedErrors = useMemo(\n    () =>\n      unmatchedFormErrors({\n        schema: resolvedSchema,\n        value: effectiveValue,\n        errors,\n        viewOnly: readOnly,\n        hideReadOnlyFields,\n        hideEmpty,\n        pre: preExtensions,\n        rootValue: rootValue ?? effectiveValue,\n        instancePath,\n        ...(hiddenKeys ? { hiddenKeys } : {}),\n        ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n        ...(expressionEvaluator ? { expressionEvaluator } : {}),\n      }),\n    [effectiveValue, errors, expressionEvaluator, fieldFilter, hiddenKeys, hideEmpty, hideReadOnlyFields, instancePath, preExtensions, readOnly, resolvedSchema, rootValue],\n  );\n  // Defaults are part of the submitted form value, not only presentation. This\n  // is especially important for required discriminator fields whose default\n  // selects an if/then branch.\n  useEffect(() => {\n    if (!readOnly && effectiveValue !== value) onChange(effectiveValue);\n  }, [effectiveValue, onChange, readOnly, value]);\n\n  const ctx: RenderContext = {\n    readOnly,\n    viewOnly: readOnly,\n    hideReadOnlyFields,\n    hideEmpty,\n    autoSave,\n    layout: resolvedLayout,\n    size: effectiveSize,\n    sortMode: effectiveSortMode,\n    pre: preExtensions,\n    post: post ?? [],\n    rootValue: rootValue ?? effectiveValue,\n    onRootChange: onRootChange ?? onChange,\n    instancePath,\n    errors,\n    depth: 0,\n    render: renderApi,\n    ...(expressionEvaluator ? { expressionEvaluator } : {}),\n    ...(idPrefix ? { idPrefix } : {}),\n    ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n    ...(prefs.debug ? { debug: true } : {}),\n  };\n  // A schema may name a discriminator property whose value selects a \"kind\"; the\n  // form then runs a two-phase pick-then-fill flow (see DiscriminatedForm).\n  const discKey = typeof resolvedSchema[\"x-discriminator\"] === \"string\" ? resolvedSchema[\"x-discriminator\"] : undefined;\n  const inPickerPhase = discKey != null && (effectiveValue[discKey] == null || effectiveValue[discKey] === \"\");\n\n  const objectRows = discKey\n    ? null\n    : renderObjectFields(resolvedSchema, effectiveValue, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined);\n  const noMatches = objectRows != null && objectRows.length === 0 && fieldFilter.trim() !== \"\";\n\n  return (\n    <FormLookupProvider {...(lookupFetcher ? { fetcher: lookupFetcher } : {})}>\n      <div data-json-schema-form className={cn(\"relative flex flex-col\", fieldInnerGapClass[effectiveSize])}>\n        {showPreferencesMenu && !inPickerPhase && (\n          <PreferencesMenu\n            size={effectiveSize}\n            layoutMode={resolvedLayout.mode}\n            sortMode={effectiveSortMode}\n            fieldFilter={fieldFilter}\n            filterInMenu={!filterVisible}\n            onFilterChange={setFieldFilter}\n            onSelectSize={(next) => applyPrefs({ ...prefs, size: next })}\n            onSelectLayout={(next) => applyPrefs({ ...prefs, layoutMode: next })}\n            onSelectSort={(next) => applyPrefs({ ...prefs, sortMode: next })}\n            debug={prefs.debug === true}\n            onToggleDebug={() => applyPrefs({ ...prefs, debug: !prefs.debug })}\n          />\n        )}\n        {title && <h3 className={cn(\"font-semibold\", labelSizeClass[effectiveSize])}>{title}</h3>}\n        {filterVisible && !inPickerPhase && (\n          <div className=\"max-w-md pr-9\">\n            <FormFieldFilter value={fieldFilter} onChange={setFieldFilter} />\n          </div>\n        )}\n        <FormErrorSummary errors={unmatchedErrors} />\n        <FieldsGrid\n          layout={resolvedLayout}\n          size={effectiveSize}\n          columns={normalizeColumns(resolvedSchema[\"x-columns\"])}\n          columnMinWidth={cssLength(resolvedSchema[\"x-column-min-width\"], DEFAULT_COLUMN_MIN_WIDTH)}\n          {...(typeof resolvedSchema[\"x-columns-max-width\"] === \"string\"\n            ? { columnsMaxWidth: resolvedSchema[\"x-columns-max-width\"] }\n            : {})}\n          {...(typeof resolvedSchema[\"x-classes\"] === \"string\" ? { className: resolvedSchema[\"x-classes\"] } : {})}\n        >\n          {discKey ? (\n            <DiscriminatedForm\n              schema={resolvedSchema}\n              value={effectiveValue}\n              onChange={onChange}\n              ctx={ctx}\n              discKey={discKey}\n            />\n          ) : (\n            objectRows\n          )}\n        </FieldsGrid>\n        {noMatches && (\n          <p className={cn(\"text-muted-foreground\", labelSizeClass[effectiveSize])}>\n            No fields match “{fieldFilter.trim()}”.\n          </p>\n        )}\n      </div>\n    </FormLookupProvider>\n  );\n}\n\nconst SIZE_OPTIONS: { value: FormSize; label: string }[] = [\n  { value: \"xs\", label: \"Extra small\" },\n  { value: \"sm\", label: \"Small\" },\n  { value: \"md\", label: \"Medium\" },\n  { value: \"lg\", label: \"Large\" },\n  { value: \"xl\", label: \"Extra large\" },\n];\n\nconst LAYOUT_OPTIONS: { value: LayoutMode; label: string }[] = [\n  { value: \"stacked\", label: \"Stacked\" },\n  { value: \"inline\", label: \"Inline\" },\n  { value: \"properties\", label: \"Properties\" },\n];\n\nconst SORT_OPTIONS: { value: SortMode; label: string }[] = [\n  { value: \"schema\", label: \"Schema order\" },\n  { value: \"required-first\", label: \"Required first\" },\n  { value: \"priority\", label: \"Required & filled first\" },\n];\n\n// PreferencesMenu is the compact top-right ellipsis menu controlling this form's\n// size, layout, sort, and a live field filter. Selecting an option fires the\n// matching callback and closes the menu; typing in the filter updates fields\n// live without closing. The parent decides whether to persist.\nfunction PreferencesMenu({\n  size,\n  layoutMode,\n  sortMode,\n  fieldFilter,\n  filterInMenu,\n  onFilterChange,\n  onSelectSize,\n  onSelectLayout,\n  onSelectSort,\n  debug,\n  onToggleDebug,\n}: {\n  size: FormSize;\n  layoutMode: LayoutMode;\n  sortMode: SortMode;\n  fieldFilter: string;\n  filterInMenu: boolean;\n  onFilterChange: (value: string) => void;\n  onSelectSize: (size: FormSize) => void;\n  onSelectLayout: (mode: LayoutMode) => void;\n  onSelectSort: (mode: SortMode) => void;\n  debug: boolean;\n  onToggleDebug: () => void;\n}) {\n  const filterActive = fieldFilter.trim() !== \"\" || debug;\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel=\"Form display options\"\n      className=\"absolute right-0 top-0 z-10\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label=\"Form display options\"\n          aria-haspopup=\"menu\"\n          className={cn(\n            \"inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            filterActive ? \"text-primary\" : \"text-muted-foreground hover:text-foreground\",\n          )}\n        >\n          <Icon icon={UiEllipsisBold} className=\"text-lg\" />\n        </button>\n      }\n    >\n      {(closeMenu) => (\n        <>\n          {filterInMenu && <div className=\"px-2 pb-1.5 pt-1\">\n            <FormFieldFilter value={fieldFilter} onChange={onFilterChange} />\n          </div>}\n          <PreferenceSection title=\"Size\" />\n          {SIZE_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === size}\n              onSelect={() => {\n                onSelectSize(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n          <PreferenceSection title=\"Layout\" />\n          {LAYOUT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === layoutMode}\n              onSelect={() => {\n                onSelectLayout(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n          <PreferenceSection title=\"Sort\" />\n          {SORT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === sortMode}\n              onSelect={() => {\n                onSelectSort(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n          <PreferenceSection title=\"Debug\" />\n          <PreferenceItem\n            role=\"menuitemcheckbox\"\n            label=\"Show hidden fields & sources\"\n            selected={debug}\n            onSelect={() => {\n              onToggleDebug();\n              closeMenu();\n            }}\n          />\n        </>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction PreferenceSection({ title }: { title: string }) {\n  return (\n    <div className=\"px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n      {title}\n    </div>\n  );\n}\n\nfunction PreferenceItem({\n  label,\n  selected,\n  onSelect,\n  role = \"menuitemradio\",\n}: {\n  label: string;\n  selected: boolean;\n  onSelect: () => void;\n  role?: \"menuitemradio\" | \"menuitemcheckbox\";\n}) {\n  return (\n    <button\n      type=\"button\"\n      role={role}\n      aria-checked={selected}\n      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground\"\n      onClick={onSelect}\n    >\n      <span className=\"flex w-3.5 shrink-0 justify-center\">\n        {selected && <Icon icon={UiCheck} className=\"text-xs\" />}\n      </span>\n      {label}\n    </button>\n  );\n}\n"],"names":["DEFAULT_FORM_SIZE","DEFAULT_PREFERENCES_STORAGE_KEY","useState","readPreferences","writePreferences","useMemo","rehydrateRefs","applySchemaDefaults","unmatchedFormErrors","useEffect","renderApi","renderObjectFields","jsx","FormLookupProvider","cn","fieldInnerGapClass","labelSizeClass","FormFieldFilter","FormErrorSummary","FieldsGrid","normalizeColumns","cssLength","DEFAULT_COLUMN_MIN_WIDTH","DiscriminatedForm","DropdownMenu","Icon","UiEllipsisBold","jsxs","Fragment","UiCheck"],"mappings":"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"}

package/dist/components/JsonSchemaForm.d.ts

@@ -1,3 +1,3 @@
 import { JsonSchemaFormProps } from './json-schema-form-types.js';
-export declare function JsonSchemaForm({ schema, value, onChange, rootValue, onRootChange, instancePath, errors, readOnly, inline, layout, size, idPrefix, hideReadOnlyFields, hideEmpty, autoSave, hiddenKeys, requiredFirst, title, pre, post, showPreferencesMenu, showFilter, persistPreferences, preferencesStorageKey, lookupFetcher, applyDefaults, }: JsonSchemaFormProps): import("react").JSX.Element;
+export declare function JsonSchemaForm({ schema, value, onChange, rootValue, onRootChange, instancePath, errors, readOnly, inline, layout, size, idPrefix, hideReadOnlyFields, hideEmpty, autoSave, hiddenKeys, requiredFirst, title, pre, post, showPreferencesMenu, showFilter, persistPreferences, preferencesStorageKey, lookupFetcher, expressionEvaluator, applyDefaults, }: JsonSchemaFormProps): import("react").JSX.Element;
 //# sourceMappingURL=JsonSchemaForm.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"JsonSchemaForm.d.ts","sourceRoot":"","sources":["../../src/components/JsonSchemaForm.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAc,mBAAmB,EAAiB,MAAM,0BAA0B,CAAC;AAoC/F,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,YAAiB,EACjB,MAAW,EACX,QAAgB,EAChB,MAAc,EACd,MAAM,EACN,IAAwB,EACxB,QAAQ,EACR,kBAA0B,EAC1B,SAAiB,EACjB,QAAgB,EAChB,UAAU,EACV,aAAqB,EACrB,KAAK,EACL,GAAG,EACH,IAAI,EACJ,mBAA0B,EAC1B,UAAU,EACV,kBAAyB,EACzB,qBAAuD,EACvD,aAAa,EACb,aAAoB,GACrB,EAAE,mBAAmB,+BA0IrB"}
+{"version":3,"file":"JsonSchemaForm.d.ts","sourceRoot":"","sources":["../../src/components/JsonSchemaForm.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAc,mBAAmB,EAAiB,MAAM,0BAA0B,CAAC;AAoC/F,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,YAAiB,EACjB,MAAW,EACX,QAAgB,EAChB,MAAc,EACd,MAAM,EACN,IAAwB,EACxB,QAAQ,EACR,kBAA0B,EAC1B,SAAiB,EACjB,QAAgB,EAChB,UAAU,EACV,aAAqB,EACrB,KAAK,EACL,GAAG,EACH,IAAI,EACJ,mBAA0B,EAC1B,UAAU,EACV,kBAAyB,EACzB,qBAAuD,EACvD,aAAa,EACb,mBAAmB,EACnB,aAAoB,GACrB,EAAE,mBAAmB,+BAiJrB"}

package/dist/components/JsonSchemaForm.js

@@ -11,7 +11,7 @@ import { FormLookupProvider } from "./FormLookupProvider.js";
 import { DiscriminatedForm } from "./json-schema-form-discriminator.js";
 import { rehydrateRefs } from "./json-schema-form-refs.js";
 import { renderObjectFields, renderApi } from "./json-schema-form-render.js";
-import { applySchemaDefaults } from "./json-schema-form-resolve.js";
+import { applySchemaDefaults } from "./json-schema-form-defaults.js";
 import { cssLength, normalizeColumns, DEFAULT_COLUMN_MIN_WIDTH } from "./json-schema-form-utils.js";
 import { DEFAULT_FORM_SIZE, labelSizeClass, fieldInnerGapClass } from "./json-schema-form-size.js";
 import { readPreferences, DEFAULT_PREFERENCES_STORAGE_KEY, writePreferences } from "./json-schema-form-preferences.js";
@@ -59,6 +59,7 @@ function JsonSchemaForm({
   persistPreferences = true,
   preferencesStorageKey = DEFAULT_PREFERENCES_STORAGE_KEY,
   lookupFetcher,
+  expressionEvaluator,
   applyDefaults = true
 }) {
   const [prefs, setPrefs] = useState(
@@ -84,21 +85,24 @@ function JsonSchemaForm({
       schema: resolvedSchema,
       value: effectiveValue,
       errors,
+      viewOnly: readOnly,
       hideReadOnlyFields,
       hideEmpty,
       pre: preExtensions,
       rootValue: rootValue ?? effectiveValue,
       instancePath,
       ...hiddenKeys ? { hiddenKeys } : {},
-      ...fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}
+      ...fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {},
+      ...expressionEvaluator ? { expressionEvaluator } : {}
     }),
-    [effectiveValue, errors, fieldFilter, hiddenKeys, hideEmpty, hideReadOnlyFields, instancePath, preExtensions, resolvedSchema, rootValue]
+    [effectiveValue, errors, expressionEvaluator, fieldFilter, hiddenKeys, hideEmpty, hideReadOnlyFields, instancePath, preExtensions, readOnly, resolvedSchema, rootValue]
   );
   useEffect(() => {
     if (!readOnly && effectiveValue !== value) onChange(effectiveValue);
   }, [effectiveValue, onChange, readOnly, value]);
   const ctx = {
     readOnly,
+    viewOnly: readOnly,
     hideReadOnlyFields,
     hideEmpty,
     autoSave,
@@ -113,8 +117,10 @@ function JsonSchemaForm({
     errors,
     depth: 0,
     render: renderApi,
+    ...expressionEvaluator ? { expressionEvaluator } : {},
     ...idPrefix ? { idPrefix } : {},
-    ...fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}
+    ...fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {},
+    ...prefs.debug ? { debug: true } : {}
   };
   const discKey = typeof resolvedSchema["x-discriminator"] === "string" ? resolvedSchema["x-discriminator"] : void 0;
   const inPickerPhase = discKey != null && (effectiveValue[discKey] == null || effectiveValue[discKey] === "");
@@ -132,7 +138,9 @@ function JsonSchemaForm({
         onFilterChange: setFieldFilter,
         onSelectSize: (next) => applyPrefs({ ...prefs, size: next }),
         onSelectLayout: (next) => applyPrefs({ ...prefs, layoutMode: next }),
-        onSelectSort: (next) => applyPrefs({ ...prefs, sortMode: next })
+        onSelectSort: (next) => applyPrefs({ ...prefs, sortMode: next }),
+        debug: prefs.debug === true,
+        onToggleDebug: () => applyPrefs({ ...prefs, debug: !prefs.debug })
       }
     ),
     title && /* @__PURE__ */ jsx("h3", { className: cn("font-semibold", labelSizeClass[effectiveSize]), children: title }),
@@ -192,9 +200,11 @@ function PreferencesMenu({
   onFilterChange,
   onSelectSize,
   onSelectLayout,
-  onSelectSort
+  onSelectSort,
+  debug,
+  onToggleDebug
 }) {
-  const filterActive = fieldFilter.trim() !== "";
+  const filterActive = fieldFilter.trim() !== "" || debug;
   return /* @__PURE__ */ jsx(
     DropdownMenu,
     {
@@ -254,7 +264,20 @@ function PreferencesMenu({
             }
           },
           opt.value
-        ))
+        )),
+        /* @__PURE__ */ jsx(PreferenceSection, { title: "Debug" }),
+        /* @__PURE__ */ jsx(
+          PreferenceItem,
+          {
+            role: "menuitemcheckbox",
+            label: "Show hidden fields & sources",
+            selected: debug,
+            onSelect: () => {
+              onToggleDebug();
+              closeMenu();
+            }
+          }
+        )
       ] })
     }
   );
@@ -262,12 +285,17 @@ function PreferencesMenu({
 function PreferenceSection({ title }) {
   return /* @__PURE__ */ jsx("div", { className: "px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: title });
 }
-function PreferenceItem({ label, selected, onSelect }) {
+function PreferenceItem({
+  label,
+  selected,
+  onSelect,
+  role = "menuitemradio"
+}) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
-      role: "menuitemradio",
+      role,
       "aria-checked": selected,
       className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground",
       onClick: onSelect,

package/dist/components/JsonSchemaForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"JsonSchemaForm.js","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiEllipsisBold } from \"../icons\";\nimport { FormFieldFilter } from \"./json-schema-form-filter-input\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { FieldsGrid } from \"./json-schema-form-layout\";\nimport { FormErrorSummary } from \"./json-schema-form-error-display\";\nimport { unmatchedFormErrors } from \"./json-schema-form-errors\";\nimport { FormLookupProvider } from \"./FormLookupProvider\";\nimport { DiscriminatedForm } from \"./json-schema-form-discriminator\";\nimport { rehydrateRefs } from \"./json-schema-form-refs\";\nimport { renderApi, renderObjectFields } from \"./json-schema-form-render\";\nimport { applySchemaDefaults } from \"./json-schema-form-resolve\";\nimport {\n  cssLength,\n  DEFAULT_COLUMN_MIN_WIDTH,\n  normalizeColumns,\n} from \"./json-schema-form-utils\";\nimport { DEFAULT_FORM_SIZE, fieldInnerGapClass, labelSizeClass, type FormSize } from \"./json-schema-form-size\";\nimport {\n  DEFAULT_PREFERENCES_STORAGE_KEY,\n  readPreferences,\n  writePreferences,\n  type FormPreferences,\n  type LayoutMode,\n  type SortMode,\n} from \"./json-schema-form-preferences\";\nimport type { FormLayout, JsonSchemaFormProps, RenderContext } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"600px\";\n\n// resolveFormLayout maps the `layout`/`inline` props plus an optional menu-driven\n// `modeOverride` to a single resolved FormLayout. An explicit `layout` sets the\n// base; `inline` is the shorthand for it; `modeOverride` (from the preferences\n// menu) wins over both but only flips the mode — width caps from `layout` are\n// preserved. Both modes fill valueMaxWidth (inline value column / stacked\n// label+value stack); the label cap only applies inline.\nfunction resolveFormLayout(\n  layout: FormLayout | undefined,\n  inline: boolean,\n  modeOverride: LayoutMode | undefined,\n): FormLayout {\n  const baseMode = layout?.mode ?? (inline ? \"inline\" : \"stacked\");\n  const mode = modeOverride ?? baseMode;\n  const valueMaxWidth = layout?.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH;\n  // `help` is orthogonal to mode, so it survives a menu-driven mode flip.\n  const help = layout?.help ? { help: layout.help } : {};\n  if (mode === \"properties\") return { ...layout, mode, ...help };\n  if (mode !== \"inline\") return { mode: \"stacked\", valueMaxWidth, ...help };\n  return {\n    mode: \"inline\",\n    labelMaxWidth: layout?.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n    valueMaxWidth,\n    ...help,\n  };\n}\n\n// JsonSchemaForm renders an object subschema as a form: one control per\n// (effective) property. It resolves if/then conditionals internally and recurses\n// through array items and object/map values; every other behaviour is layered on\n// by the pre/post extension functions the consumer supplies. The component holds\n// no domain knowledge.\nexport function JsonSchemaForm({\n  schema,\n  value,\n  onChange,\n  rootValue,\n  onRootChange,\n  instancePath = \"\",\n  errors = [],\n  readOnly = false,\n  inline = false,\n  layout,\n  size = DEFAULT_FORM_SIZE,\n  idPrefix,\n  hideReadOnlyFields = false,\n  hideEmpty = false,\n  autoSave = false,\n  hiddenKeys,\n  requiredFirst = false,\n  title,\n  pre,\n  post,\n  showPreferencesMenu = true,\n  showFilter,\n  persistPreferences = true,\n  preferencesStorageKey = DEFAULT_PREFERENCES_STORAGE_KEY,\n  lookupFetcher,\n  applyDefaults = true,\n}: JsonSchemaFormProps) {\n  // When the menu is hidden, never touch localStorage and start from an empty\n  // override so behaviour is identical to before this feature existed.\n  const [prefs, setPrefs] = useState<FormPreferences>(() =>\n    showPreferencesMenu && persistPreferences ? readPreferences(preferencesStorageKey) : {},\n  );\n  // The field filter is transient view state (a \"find\" over the fields), never\n  // persisted — reopening the form should never start with fields hidden.\n  const [fieldFilter, setFieldFilter] = useState(\"\");\n\n  const effectiveSize = prefs.size ?? size;\n  const resolvedLayout = resolveFormLayout(layout, inline, prefs.layoutMode);\n  const filterVisible = showFilter ?? (showPreferencesMenu && resolvedLayout.mode === \"properties\");\n  // The `requiredFirst` prop sets the base sort; a menu selection overrides it.\n  const effectiveSortMode = prefs.sortMode ?? (requiredFirst ? \"required-first\" : \"schema\");\n\n  const applyPrefs = (next: FormPreferences) => {\n    setPrefs(next);\n    if (persistPreferences) writePreferences(preferencesStorageKey, next);\n  };\n\n  // A bundled schema (components under `$defs`, referenced by local `#/$defs`\n  // pointers) is resolved once into a self-contained tree the renderer walks\n  // directly; a non-bundled schema passes through untouched.\n  const resolvedSchema = useMemo(() => rehydrateRefs(schema), [schema]);\n  // Suppressing at the value (not only at the commit effect below) is deliberate:\n  // renderObjectFields spreads `effectiveValue` when a single field changes, so a\n  // render-only application would still leak the defaults on the first edit.\n  const effectiveValue = useMemo(\n    () => (applyDefaults ? applySchemaDefaults(resolvedSchema, value) : value),\n    [applyDefaults, resolvedSchema, value],\n  );\n  const preExtensions = pre ?? [];\n  const unmatchedErrors = useMemo(\n    () =>\n      unmatchedFormErrors({\n        schema: resolvedSchema,\n        value: effectiveValue,\n        errors,\n        hideReadOnlyFields,\n        hideEmpty,\n        pre: preExtensions,\n        rootValue: rootValue ?? effectiveValue,\n        instancePath,\n        ...(hiddenKeys ? { hiddenKeys } : {}),\n        ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n      }),\n    [effectiveValue, errors, fieldFilter, hiddenKeys, hideEmpty, hideReadOnlyFields, instancePath, preExtensions, resolvedSchema, rootValue],\n  );\n  // Defaults are part of the submitted form value, not only presentation. This\n  // is especially important for required discriminator fields whose default\n  // selects an if/then branch.\n  useEffect(() => {\n    if (!readOnly && effectiveValue !== value) onChange(effectiveValue);\n  }, [effectiveValue, onChange, readOnly, value]);\n\n  const ctx: RenderContext = {\n    readOnly,\n    hideReadOnlyFields,\n    hideEmpty,\n    autoSave,\n    layout: resolvedLayout,\n    size: effectiveSize,\n    sortMode: effectiveSortMode,\n    pre: preExtensions,\n    post: post ?? [],\n    rootValue: rootValue ?? effectiveValue,\n    onRootChange: onRootChange ?? onChange,\n    instancePath,\n    errors,\n    depth: 0,\n    render: renderApi,\n    ...(idPrefix ? { idPrefix } : {}),\n    ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n  };\n  // A schema may name a discriminator property whose value selects a \"kind\"; the\n  // form then runs a two-phase pick-then-fill flow (see DiscriminatedForm).\n  const discKey = typeof resolvedSchema[\"x-discriminator\"] === \"string\" ? resolvedSchema[\"x-discriminator\"] : undefined;\n  const inPickerPhase = discKey != null && (effectiveValue[discKey] == null || effectiveValue[discKey] === \"\");\n\n  const objectRows = discKey\n    ? null\n    : renderObjectFields(resolvedSchema, effectiveValue, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined);\n  const noMatches = objectRows != null && objectRows.length === 0 && fieldFilter.trim() !== \"\";\n\n  return (\n    <FormLookupProvider {...(lookupFetcher ? { fetcher: lookupFetcher } : {})}>\n      <div data-json-schema-form className={cn(\"relative flex flex-col\", fieldInnerGapClass[effectiveSize])}>\n        {showPreferencesMenu && !inPickerPhase && (\n          <PreferencesMenu\n            size={effectiveSize}\n            layoutMode={resolvedLayout.mode}\n            sortMode={effectiveSortMode}\n            fieldFilter={fieldFilter}\n            filterInMenu={!filterVisible}\n            onFilterChange={setFieldFilter}\n            onSelectSize={(next) => applyPrefs({ ...prefs, size: next })}\n            onSelectLayout={(next) => applyPrefs({ ...prefs, layoutMode: next })}\n            onSelectSort={(next) => applyPrefs({ ...prefs, sortMode: next })}\n          />\n        )}\n        {title && <h3 className={cn(\"font-semibold\", labelSizeClass[effectiveSize])}>{title}</h3>}\n        {filterVisible && !inPickerPhase && (\n          <div className=\"max-w-md pr-9\">\n            <FormFieldFilter value={fieldFilter} onChange={setFieldFilter} />\n          </div>\n        )}\n        <FormErrorSummary errors={unmatchedErrors} />\n        <FieldsGrid\n          layout={resolvedLayout}\n          size={effectiveSize}\n          columns={normalizeColumns(resolvedSchema[\"x-columns\"])}\n          columnMinWidth={cssLength(resolvedSchema[\"x-column-min-width\"], DEFAULT_COLUMN_MIN_WIDTH)}\n          {...(typeof resolvedSchema[\"x-columns-max-width\"] === \"string\"\n            ? { columnsMaxWidth: resolvedSchema[\"x-columns-max-width\"] }\n            : {})}\n          {...(typeof resolvedSchema[\"x-classes\"] === \"string\" ? { className: resolvedSchema[\"x-classes\"] } : {})}\n        >\n          {discKey ? (\n            <DiscriminatedForm\n              schema={resolvedSchema}\n              value={effectiveValue}\n              onChange={onChange}\n              ctx={ctx}\n              discKey={discKey}\n            />\n          ) : (\n            objectRows\n          )}\n        </FieldsGrid>\n        {noMatches && (\n          <p className={cn(\"text-muted-foreground\", labelSizeClass[effectiveSize])}>\n            No fields match “{fieldFilter.trim()}”.\n          </p>\n        )}\n      </div>\n    </FormLookupProvider>\n  );\n}\n\nconst SIZE_OPTIONS: { value: FormSize; label: string }[] = [\n  { value: \"xs\", label: \"Extra small\" },\n  { value: \"sm\", label: \"Small\" },\n  { value: \"md\", label: \"Medium\" },\n  { value: \"lg\", label: \"Large\" },\n  { value: \"xl\", label: \"Extra large\" },\n];\n\nconst LAYOUT_OPTIONS: { value: LayoutMode; label: string }[] = [\n  { value: \"stacked\", label: \"Stacked\" },\n  { value: \"inline\", label: \"Inline\" },\n  { value: \"properties\", label: \"Properties\" },\n];\n\nconst SORT_OPTIONS: { value: SortMode; label: string }[] = [\n  { value: \"schema\", label: \"Schema order\" },\n  { value: \"required-first\", label: \"Required first\" },\n  { value: \"priority\", label: \"Required & filled first\" },\n];\n\n// PreferencesMenu is the compact top-right ellipsis menu controlling this form's\n// size, layout, sort, and a live field filter. Selecting an option fires the\n// matching callback and closes the menu; typing in the filter updates fields\n// live without closing. The parent decides whether to persist.\nfunction PreferencesMenu({\n  size,\n  layoutMode,\n  sortMode,\n  fieldFilter,\n  filterInMenu,\n  onFilterChange,\n  onSelectSize,\n  onSelectLayout,\n  onSelectSort,\n}: {\n  size: FormSize;\n  layoutMode: LayoutMode;\n  sortMode: SortMode;\n  fieldFilter: string;\n  filterInMenu: boolean;\n  onFilterChange: (value: string) => void;\n  onSelectSize: (size: FormSize) => void;\n  onSelectLayout: (mode: LayoutMode) => void;\n  onSelectSort: (mode: SortMode) => void;\n}) {\n  const filterActive = fieldFilter.trim() !== \"\";\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel=\"Form display options\"\n      className=\"absolute right-0 top-0 z-10\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label=\"Form display options\"\n          aria-haspopup=\"menu\"\n          className={cn(\n            \"inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            filterActive ? \"text-primary\" : \"text-muted-foreground hover:text-foreground\",\n          )}\n        >\n          <Icon icon={UiEllipsisBold} className=\"text-lg\" />\n        </button>\n      }\n    >\n      {(closeMenu) => (\n        <>\n          {filterInMenu && <div className=\"px-2 pb-1.5 pt-1\">\n            <FormFieldFilter value={fieldFilter} onChange={onFilterChange} />\n          </div>}\n          <PreferenceSection title=\"Size\" />\n          {SIZE_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === size}\n              onSelect={() => {\n                onSelectSize(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n          <PreferenceSection title=\"Layout\" />\n          {LAYOUT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === layoutMode}\n              onSelect={() => {\n                onSelectLayout(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n          <PreferenceSection title=\"Sort\" />\n          {SORT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === sortMode}\n              onSelect={() => {\n                onSelectSort(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n        </>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction PreferenceSection({ title }: { title: string }) {\n  return (\n    <div className=\"px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n      {title}\n    </div>\n  );\n}\n\nfunction PreferenceItem({ label, selected, onSelect }: { label: string; selected: boolean; onSelect: () => void }) {\n  return (\n    <button\n      type=\"button\"\n      role=\"menuitemradio\"\n      aria-checked={selected}\n      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground\"\n      onClick={onSelect}\n    >\n      <span className=\"flex w-3.5 shrink-0 justify-center\">\n        {selected && <Icon icon={UiCheck} className=\"text-xs\" />}\n      </span>\n      {label}\n    </button>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"JsonSchemaForm.js","sources":["../../src/components/JsonSchemaForm.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiEllipsisBold } from \"../icons\";\nimport { FormFieldFilter } from \"./json-schema-form-filter-input\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { FieldsGrid } from \"./json-schema-form-layout\";\nimport { FormErrorSummary } from \"./json-schema-form-error-display\";\nimport { unmatchedFormErrors } from \"./json-schema-form-errors\";\nimport { FormLookupProvider } from \"./FormLookupProvider\";\nimport { DiscriminatedForm } from \"./json-schema-form-discriminator\";\nimport { rehydrateRefs } from \"./json-schema-form-refs\";\nimport { renderApi, renderObjectFields } from \"./json-schema-form-render\";\nimport { applySchemaDefaults } from \"./json-schema-form-defaults\";\nimport {\n  cssLength,\n  DEFAULT_COLUMN_MIN_WIDTH,\n  normalizeColumns,\n} from \"./json-schema-form-utils\";\nimport { DEFAULT_FORM_SIZE, fieldInnerGapClass, labelSizeClass, type FormSize } from \"./json-schema-form-size\";\nimport {\n  DEFAULT_PREFERENCES_STORAGE_KEY,\n  readPreferences,\n  writePreferences,\n  type FormPreferences,\n  type LayoutMode,\n  type SortMode,\n} from \"./json-schema-form-preferences\";\nimport type { FormLayout, JsonSchemaFormProps, RenderContext } from \"./json-schema-form-types\";\n\nconst DEFAULT_LABEL_MAX_WIDTH = \"40ch\";\nconst DEFAULT_VALUE_MAX_WIDTH = \"600px\";\n\n// resolveFormLayout maps the `layout`/`inline` props plus an optional menu-driven\n// `modeOverride` to a single resolved FormLayout. An explicit `layout` sets the\n// base; `inline` is the shorthand for it; `modeOverride` (from the preferences\n// menu) wins over both but only flips the mode — width caps from `layout` are\n// preserved. Both modes fill valueMaxWidth (inline value column / stacked\n// label+value stack); the label cap only applies inline.\nfunction resolveFormLayout(\n  layout: FormLayout | undefined,\n  inline: boolean,\n  modeOverride: LayoutMode | undefined,\n): FormLayout {\n  const baseMode = layout?.mode ?? (inline ? \"inline\" : \"stacked\");\n  const mode = modeOverride ?? baseMode;\n  const valueMaxWidth = layout?.valueMaxWidth ?? DEFAULT_VALUE_MAX_WIDTH;\n  // `help` is orthogonal to mode, so it survives a menu-driven mode flip.\n  const help = layout?.help ? { help: layout.help } : {};\n  if (mode === \"properties\") return { ...layout, mode, ...help };\n  if (mode !== \"inline\") return { mode: \"stacked\", valueMaxWidth, ...help };\n  return {\n    mode: \"inline\",\n    labelMaxWidth: layout?.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n    valueMaxWidth,\n    ...help,\n  };\n}\n\n// JsonSchemaForm renders an object subschema as a form: one control per\n// (effective) property. It resolves if/then conditionals internally and recurses\n// through array items and object/map values; every other behaviour is layered on\n// by the pre/post extension functions the consumer supplies. The component holds\n// no domain knowledge.\nexport function JsonSchemaForm({\n  schema,\n  value,\n  onChange,\n  rootValue,\n  onRootChange,\n  instancePath = \"\",\n  errors = [],\n  readOnly = false,\n  inline = false,\n  layout,\n  size = DEFAULT_FORM_SIZE,\n  idPrefix,\n  hideReadOnlyFields = false,\n  hideEmpty = false,\n  autoSave = false,\n  hiddenKeys,\n  requiredFirst = false,\n  title,\n  pre,\n  post,\n  showPreferencesMenu = true,\n  showFilter,\n  persistPreferences = true,\n  preferencesStorageKey = DEFAULT_PREFERENCES_STORAGE_KEY,\n  lookupFetcher,\n  expressionEvaluator,\n  applyDefaults = true,\n}: JsonSchemaFormProps) {\n  // When the menu is hidden, never touch localStorage and start from an empty\n  // override so behaviour is identical to before this feature existed.\n  const [prefs, setPrefs] = useState<FormPreferences>(() =>\n    showPreferencesMenu && persistPreferences ? readPreferences(preferencesStorageKey) : {},\n  );\n  // The field filter is transient view state (a \"find\" over the fields), never\n  // persisted — reopening the form should never start with fields hidden.\n  const [fieldFilter, setFieldFilter] = useState(\"\");\n\n  const effectiveSize = prefs.size ?? size;\n  const resolvedLayout = resolveFormLayout(layout, inline, prefs.layoutMode);\n  const filterVisible = showFilter ?? (showPreferencesMenu && resolvedLayout.mode === \"properties\");\n  // The `requiredFirst` prop sets the base sort; a menu selection overrides it.\n  const effectiveSortMode = prefs.sortMode ?? (requiredFirst ? \"required-first\" : \"schema\");\n\n  const applyPrefs = (next: FormPreferences) => {\n    setPrefs(next);\n    if (persistPreferences) writePreferences(preferencesStorageKey, next);\n  };\n\n  // A bundled schema (components under `$defs`, referenced by local `#/$defs`\n  // pointers) is resolved once into a self-contained tree the renderer walks\n  // directly; a non-bundled schema passes through untouched.\n  const resolvedSchema = useMemo(() => rehydrateRefs(schema), [schema]);\n  // Suppressing at the value (not only at the commit effect below) is deliberate:\n  // renderObjectFields spreads `effectiveValue` when a single field changes, so a\n  // render-only application would still leak the defaults on the first edit.\n  const effectiveValue = useMemo(\n    () => (applyDefaults ? applySchemaDefaults(resolvedSchema, value) : value),\n    [applyDefaults, resolvedSchema, value],\n  );\n  const preExtensions = pre ?? [];\n  const unmatchedErrors = useMemo(\n    () =>\n      unmatchedFormErrors({\n        schema: resolvedSchema,\n        value: effectiveValue,\n        errors,\n        viewOnly: readOnly,\n        hideReadOnlyFields,\n        hideEmpty,\n        pre: preExtensions,\n        rootValue: rootValue ?? effectiveValue,\n        instancePath,\n        ...(hiddenKeys ? { hiddenKeys } : {}),\n        ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n        ...(expressionEvaluator ? { expressionEvaluator } : {}),\n      }),\n    [effectiveValue, errors, expressionEvaluator, fieldFilter, hiddenKeys, hideEmpty, hideReadOnlyFields, instancePath, preExtensions, readOnly, resolvedSchema, rootValue],\n  );\n  // Defaults are part of the submitted form value, not only presentation. This\n  // is especially important for required discriminator fields whose default\n  // selects an if/then branch.\n  useEffect(() => {\n    if (!readOnly && effectiveValue !== value) onChange(effectiveValue);\n  }, [effectiveValue, onChange, readOnly, value]);\n\n  const ctx: RenderContext = {\n    readOnly,\n    viewOnly: readOnly,\n    hideReadOnlyFields,\n    hideEmpty,\n    autoSave,\n    layout: resolvedLayout,\n    size: effectiveSize,\n    sortMode: effectiveSortMode,\n    pre: preExtensions,\n    post: post ?? [],\n    rootValue: rootValue ?? effectiveValue,\n    onRootChange: onRootChange ?? onChange,\n    instancePath,\n    errors,\n    depth: 0,\n    render: renderApi,\n    ...(expressionEvaluator ? { expressionEvaluator } : {}),\n    ...(idPrefix ? { idPrefix } : {}),\n    ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n    ...(prefs.debug ? { debug: true } : {}),\n  };\n  // A schema may name a discriminator property whose value selects a \"kind\"; the\n  // form then runs a two-phase pick-then-fill flow (see DiscriminatedForm).\n  const discKey = typeof resolvedSchema[\"x-discriminator\"] === \"string\" ? resolvedSchema[\"x-discriminator\"] : undefined;\n  const inPickerPhase = discKey != null && (effectiveValue[discKey] == null || effectiveValue[discKey] === \"\");\n\n  const objectRows = discKey\n    ? null\n    : renderObjectFields(resolvedSchema, effectiveValue, onChange, ctx, hiddenKeys ? { hiddenKeys } : undefined);\n  const noMatches = objectRows != null && objectRows.length === 0 && fieldFilter.trim() !== \"\";\n\n  return (\n    <FormLookupProvider {...(lookupFetcher ? { fetcher: lookupFetcher } : {})}>\n      <div data-json-schema-form className={cn(\"relative flex flex-col\", fieldInnerGapClass[effectiveSize])}>\n        {showPreferencesMenu && !inPickerPhase && (\n          <PreferencesMenu\n            size={effectiveSize}\n            layoutMode={resolvedLayout.mode}\n            sortMode={effectiveSortMode}\n            fieldFilter={fieldFilter}\n            filterInMenu={!filterVisible}\n            onFilterChange={setFieldFilter}\n            onSelectSize={(next) => applyPrefs({ ...prefs, size: next })}\n            onSelectLayout={(next) => applyPrefs({ ...prefs, layoutMode: next })}\n            onSelectSort={(next) => applyPrefs({ ...prefs, sortMode: next })}\n            debug={prefs.debug === true}\n            onToggleDebug={() => applyPrefs({ ...prefs, debug: !prefs.debug })}\n          />\n        )}\n        {title && <h3 className={cn(\"font-semibold\", labelSizeClass[effectiveSize])}>{title}</h3>}\n        {filterVisible && !inPickerPhase && (\n          <div className=\"max-w-md pr-9\">\n            <FormFieldFilter value={fieldFilter} onChange={setFieldFilter} />\n          </div>\n        )}\n        <FormErrorSummary errors={unmatchedErrors} />\n        <FieldsGrid\n          layout={resolvedLayout}\n          size={effectiveSize}\n          columns={normalizeColumns(resolvedSchema[\"x-columns\"])}\n          columnMinWidth={cssLength(resolvedSchema[\"x-column-min-width\"], DEFAULT_COLUMN_MIN_WIDTH)}\n          {...(typeof resolvedSchema[\"x-columns-max-width\"] === \"string\"\n            ? { columnsMaxWidth: resolvedSchema[\"x-columns-max-width\"] }\n            : {})}\n          {...(typeof resolvedSchema[\"x-classes\"] === \"string\" ? { className: resolvedSchema[\"x-classes\"] } : {})}\n        >\n          {discKey ? (\n            <DiscriminatedForm\n              schema={resolvedSchema}\n              value={effectiveValue}\n              onChange={onChange}\n              ctx={ctx}\n              discKey={discKey}\n            />\n          ) : (\n            objectRows\n          )}\n        </FieldsGrid>\n        {noMatches && (\n          <p className={cn(\"text-muted-foreground\", labelSizeClass[effectiveSize])}>\n            No fields match “{fieldFilter.trim()}”.\n          </p>\n        )}\n      </div>\n    </FormLookupProvider>\n  );\n}\n\nconst SIZE_OPTIONS: { value: FormSize; label: string }[] = [\n  { value: \"xs\", label: \"Extra small\" },\n  { value: \"sm\", label: \"Small\" },\n  { value: \"md\", label: \"Medium\" },\n  { value: \"lg\", label: \"Large\" },\n  { value: \"xl\", label: \"Extra large\" },\n];\n\nconst LAYOUT_OPTIONS: { value: LayoutMode; label: string }[] = [\n  { value: \"stacked\", label: \"Stacked\" },\n  { value: \"inline\", label: \"Inline\" },\n  { value: \"properties\", label: \"Properties\" },\n];\n\nconst SORT_OPTIONS: { value: SortMode; label: string }[] = [\n  { value: \"schema\", label: \"Schema order\" },\n  { value: \"required-first\", label: \"Required first\" },\n  { value: \"priority\", label: \"Required & filled first\" },\n];\n\n// PreferencesMenu is the compact top-right ellipsis menu controlling this form's\n// size, layout, sort, and a live field filter. Selecting an option fires the\n// matching callback and closes the menu; typing in the filter updates fields\n// live without closing. The parent decides whether to persist.\nfunction PreferencesMenu({\n  size,\n  layoutMode,\n  sortMode,\n  fieldFilter,\n  filterInMenu,\n  onFilterChange,\n  onSelectSize,\n  onSelectLayout,\n  onSelectSort,\n  debug,\n  onToggleDebug,\n}: {\n  size: FormSize;\n  layoutMode: LayoutMode;\n  sortMode: SortMode;\n  fieldFilter: string;\n  filterInMenu: boolean;\n  onFilterChange: (value: string) => void;\n  onSelectSize: (size: FormSize) => void;\n  onSelectLayout: (mode: LayoutMode) => void;\n  onSelectSort: (mode: SortMode) => void;\n  debug: boolean;\n  onToggleDebug: () => void;\n}) {\n  const filterActive = fieldFilter.trim() !== \"\" || debug;\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel=\"Form display options\"\n      className=\"absolute right-0 top-0 z-10\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label=\"Form display options\"\n          aria-haspopup=\"menu\"\n          className={cn(\n            \"inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            filterActive ? \"text-primary\" : \"text-muted-foreground hover:text-foreground\",\n          )}\n        >\n          <Icon icon={UiEllipsisBold} className=\"text-lg\" />\n        </button>\n      }\n    >\n      {(closeMenu) => (\n        <>\n          {filterInMenu && <div className=\"px-2 pb-1.5 pt-1\">\n            <FormFieldFilter value={fieldFilter} onChange={onFilterChange} />\n          </div>}\n          <PreferenceSection title=\"Size\" />\n          {SIZE_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === size}\n              onSelect={() => {\n                onSelectSize(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n          <PreferenceSection title=\"Layout\" />\n          {LAYOUT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === layoutMode}\n              onSelect={() => {\n                onSelectLayout(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n          <PreferenceSection title=\"Sort\" />\n          {SORT_OPTIONS.map((opt) => (\n            <PreferenceItem\n              key={opt.value}\n              label={opt.label}\n              selected={opt.value === sortMode}\n              onSelect={() => {\n                onSelectSort(opt.value);\n                closeMenu();\n              }}\n            />\n          ))}\n          <PreferenceSection title=\"Debug\" />\n          <PreferenceItem\n            role=\"menuitemcheckbox\"\n            label=\"Show hidden fields & sources\"\n            selected={debug}\n            onSelect={() => {\n              onToggleDebug();\n              closeMenu();\n            }}\n          />\n        </>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction PreferenceSection({ title }: { title: string }) {\n  return (\n    <div className=\"px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n      {title}\n    </div>\n  );\n}\n\nfunction PreferenceItem({\n  label,\n  selected,\n  onSelect,\n  role = \"menuitemradio\",\n}: {\n  label: string;\n  selected: boolean;\n  onSelect: () => void;\n  role?: \"menuitemradio\" | \"menuitemcheckbox\";\n}) {\n  return (\n    <button\n      type=\"button\"\n      role={role}\n      aria-checked={selected}\n      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground\"\n      onClick={onSelect}\n    >\n      <span className=\"flex w-3.5 shrink-0 justify-center\">\n        {selected && <Icon icon={UiCheck} className=\"text-xs\" />}\n      </span>\n      {label}\n    </button>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA8BA,MAAM,0BAA0B;AAChC,MAAM,0BAA0B;AAQhC,SAAS,kBACP,QACA,QACA,cACY;AACZ,QAAM,YAAW,iCAAQ,UAAS,SAAS,WAAW;AACtD,QAAM,OAAO,gBAAgB;AAC7B,QAAM,iBAAgB,iCAAQ,kBAAiB;AAE/C,QAAM,QAAO,iCAAQ,QAAO,EAAE,MAAM,OAAO,KAAA,IAAS,CAAA;AACpD,MAAI,SAAS,aAAc,QAAO,EAAE,GAAG,QAAQ,MAAM,GAAG,KAAA;AACxD,MAAI,SAAS,SAAU,QAAO,EAAE,MAAM,WAAW,eAAe,GAAG,KAAA;AACnE,SAAO;AAAA,IACL,MAAM;AAAA,IACN,gBAAe,iCAAQ,kBAAiB;AAAA,IACxC;AAAA,IACA,GAAG;AAAA,EAAA;AAEP;AAOO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,SAAS,CAAA;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,qBAAqB;AAAA,EACrB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB;AAAA,EACA,qBAAqB;AAAA,EACrB,wBAAwB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,GAAwB;AAGtB,QAAM,CAAC,OAAO,QAAQ,IAAI;AAAA,IAA0B,MAClD,uBAAuB,qBAAqB,gBAAgB,qBAAqB,IAAI,CAAA;AAAA,EAAC;AAIxF,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,QAAM,gBAAgB,MAAM,QAAQ;AACpC,QAAM,iBAAiB,kBAAkB,QAAQ,QAAQ,MAAM,UAAU;AACzE,QAAM,gBAAgB,eAAe,uBAAuB,eAAe,SAAS;AAEpF,QAAM,oBAAoB,MAAM,aAAa,gBAAgB,mBAAmB;AAEhF,QAAM,aAAa,CAAC,SAA0B;AAC5C,aAAS,IAAI;AACb,QAAI,mBAAoB,kBAAiB,uBAAuB,IAAI;AAAA,EACtE;AAKA,QAAM,iBAAiB,QAAQ,MAAM,cAAc,MAAM,GAAG,CAAC,MAAM,CAAC;AAIpE,QAAM,iBAAiB;AAAA,IACrB,MAAO,gBAAgB,oBAAoB,gBAAgB,KAAK,IAAI;AAAA,IACpE,CAAC,eAAe,gBAAgB,KAAK;AAAA,EAAA;AAEvC,QAAM,gBAAgB,OAAO,CAAA;AAC7B,QAAM,kBAAkB;AAAA,IACtB,MACE,oBAAoB;AAAA,MAClB,QAAQ;AAAA,MACR,OAAO;AAAA,MACP;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW,aAAa;AAAA,MACxB;AAAA,MACA,GAAI,aAAa,EAAE,WAAA,IAAe,CAAA;AAAA,MAClC,GAAI,YAAY,SAAS,EAAE,aAAa,YAAY,KAAA,EAAK,IAAM,CAAA;AAAA,MAC/D,GAAI,sBAAsB,EAAE,wBAAwB,CAAA;AAAA,IAAC,CACtD;AAAA,IACH,CAAC,gBAAgB,QAAQ,qBAAqB,aAAa,YAAY,WAAW,oBAAoB,cAAc,eAAe,UAAU,gBAAgB,SAAS;AAAA,EAAA;AAKxK,YAAU,MAAM;AACd,QAAI,CAAC,YAAY,mBAAmB,gBAAgB,cAAc;AAAA,EACpE,GAAG,CAAC,gBAAgB,UAAU,UAAU,KAAK,CAAC;AAE9C,QAAM,MAAqB;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM,QAAQ,CAAA;AAAA,IACd,WAAW,aAAa;AAAA,IACxB,cAAc,gBAAgB;AAAA,IAC9B;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAI,sBAAsB,EAAE,oBAAA,IAAwB,CAAA;AAAA,IACpD,GAAI,WAAW,EAAE,SAAA,IAAa,CAAA;AAAA,IAC9B,GAAI,YAAY,SAAS,EAAE,aAAa,YAAY,KAAA,EAAK,IAAM,CAAA;AAAA,IAC/D,GAAI,MAAM,QAAQ,EAAE,OAAO,KAAA,IAAS,CAAA;AAAA,EAAC;AAIvC,QAAM,UAAU,OAAO,eAAe,iBAAiB,MAAM,WAAW,eAAe,iBAAiB,IAAI;AAC5G,QAAM,gBAAgB,WAAW,SAAS,eAAe,OAAO,KAAK,QAAQ,eAAe,OAAO,MAAM;AAEzG,QAAM,aAAa,UACf,OACA,mBAAmB,gBAAgB,gBAAgB,UAAU,KAAK,aAAa,EAAE,WAAA,IAAe,MAAS;AAC7G,QAAM,YAAY,cAAc,QAAQ,WAAW,WAAW,KAAK,YAAY,WAAW;AAE1F,SACE,oBAAC,sBAAoB,GAAI,gBAAgB,EAAE,SAAS,cAAA,IAAkB,CAAA,GACpE,+BAAC,OAAA,EAAI,yBAAqB,MAAC,WAAW,GAAG,0BAA0B,mBAAmB,aAAa,CAAC,GACjG,UAAA;AAAA,IAAA,uBAAuB,CAAC,iBACvB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,YAAY,eAAe;AAAA,QAC3B,UAAU;AAAA,QACV;AAAA,QACA,cAAc,CAAC;AAAA,QACf,gBAAgB;AAAA,QAChB,cAAc,CAAC,SAAS,WAAW,EAAE,GAAG,OAAO,MAAM,MAAM;AAAA,QAC3D,gBAAgB,CAAC,SAAS,WAAW,EAAE,GAAG,OAAO,YAAY,MAAM;AAAA,QACnE,cAAc,CAAC,SAAS,WAAW,EAAE,GAAG,OAAO,UAAU,MAAM;AAAA,QAC/D,OAAO,MAAM,UAAU;AAAA,QACvB,eAAe,MAAM,WAAW,EAAE,GAAG,OAAO,OAAO,CAAC,MAAM,MAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAGpE,SAAS,oBAAC,MAAA,EAAG,WAAW,GAAG,iBAAiB,eAAe,aAAa,CAAC,GAAI,UAAA,MAAA,CAAM;AAAA,IACnF,iBAAiB,CAAC,iBACjB,oBAAC,OAAA,EAAI,WAAU,iBACb,UAAA,oBAAC,iBAAA,EAAgB,OAAO,aAAa,UAAU,gBAAgB,GACjE;AAAA,IAEF,oBAAC,kBAAA,EAAiB,QAAQ,gBAAA,CAAiB;AAAA,IAC3C;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,SAAS,iBAAiB,eAAe,WAAW,CAAC;AAAA,QACrD,gBAAgB,UAAU,eAAe,oBAAoB,GAAG,wBAAwB;AAAA,QACvF,GAAI,OAAO,eAAe,qBAAqB,MAAM,WAClD,EAAE,iBAAiB,eAAe,qBAAqB,EAAA,IACvD,CAAA;AAAA,QACH,GAAI,OAAO,eAAe,WAAW,MAAM,WAAW,EAAE,WAAW,eAAe,WAAW,EAAA,IAAM,CAAA;AAAA,QAEnG,UAAA,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,QAAQ;AAAA,YACR,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA,IAGF;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH,kCACE,KAAA,EAAE,WAAW,GAAG,yBAAyB,eAAe,aAAa,CAAC,GAAG,UAAA;AAAA,MAAA;AAAA,MACtD,YAAY,KAAA;AAAA,MAAO;AAAA,IAAA,EAAA,CACvC;AAAA,EAAA,EAAA,CAEJ,EAAA,CACF;AAEJ;AAEA,MAAM,eAAqD;AAAA,EACzD,EAAE,OAAO,MAAM,OAAO,cAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,QAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,SAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,QAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,cAAA;AACxB;AAEA,MAAM,iBAAyD;AAAA,EAC7D,EAAE,OAAO,WAAW,OAAO,UAAA;AAAA,EAC3B,EAAE,OAAO,UAAU,OAAO,SAAA;AAAA,EAC1B,EAAE,OAAO,cAAc,OAAO,aAAA;AAChC;AAEA,MAAM,eAAqD;AAAA,EACzD,EAAE,OAAO,UAAU,OAAO,eAAA;AAAA,EAC1B,EAAE,OAAO,kBAAkB,OAAO,iBAAA;AAAA,EAClC,EAAE,OAAO,YAAY,OAAO,0BAAA;AAC9B;AAMA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAYG;AACD,QAAM,eAAe,YAAY,KAAA,MAAW,MAAM;AAClD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,WAAU;AAAA,MACV,WAAU;AAAA,MACV,SACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAW;AAAA,UACX,iBAAc;AAAA,UACd,WAAW;AAAA,YACT;AAAA,YACA,eAAe,iBAAiB;AAAA,UAAA;AAAA,UAGlC,UAAA,oBAAC,MAAA,EAAK,MAAM,gBAAgB,WAAU,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAInD,UAAA,CAAC,cACA,qBAAA,UAAA,EACG,UAAA;AAAA,QAAA,gBAAgB,oBAAC,OAAA,EAAI,WAAU,oBAC9B,UAAA,oBAAC,mBAAgB,OAAO,aAAa,UAAU,eAAA,CAAgB,EAAA,CACjE;AAAA,QACA,oBAAC,mBAAA,EAAkB,OAAM,OAAA,CAAO;AAAA,QAC/B,aAAa,IAAI,CAAC,QACjB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO,IAAI;AAAA,YACX,UAAU,IAAI,UAAU;AAAA,YACxB,UAAU,MAAM;AACd,2BAAa,IAAI,KAAK;AACtB,wBAAA;AAAA,YACF;AAAA,UAAA;AAAA,UANK,IAAI;AAAA,QAAA,CAQZ;AAAA,QACD,oBAAC,mBAAA,EAAkB,OAAM,SAAA,CAAS;AAAA,QACjC,eAAe,IAAI,CAAC,QACnB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO,IAAI;AAAA,YACX,UAAU,IAAI,UAAU;AAAA,YACxB,UAAU,MAAM;AACd,6BAAe,IAAI,KAAK;AACxB,wBAAA;AAAA,YACF;AAAA,UAAA;AAAA,UANK,IAAI;AAAA,QAAA,CAQZ;AAAA,QACD,oBAAC,mBAAA,EAAkB,OAAM,OAAA,CAAO;AAAA,QAC/B,aAAa,IAAI,CAAC,QACjB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO,IAAI;AAAA,YACX,UAAU,IAAI,UAAU;AAAA,YACxB,UAAU,MAAM;AACd,2BAAa,IAAI,KAAK;AACtB,wBAAA;AAAA,YACF;AAAA,UAAA;AAAA,UANK,IAAI;AAAA,QAAA,CAQZ;AAAA,QACD,oBAAC,mBAAA,EAAkB,OAAM,QAAA,CAAQ;AAAA,QACjC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAM;AAAA,YACN,UAAU;AAAA,YACV,UAAU,MAAM;AACd,4BAAA;AACA,wBAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAAS,kBAAkB,EAAE,SAA4B;AACvD,SACE,oBAAC,OAAA,EAAI,WAAU,0FACZ,UAAA,OACH;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AACT,GAKG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,gBAAc;AAAA,MACd,WAAU;AAAA,MACV,SAAS;AAAA,MAET,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,sCACb,UAAA,YAAY,oBAAC,QAAK,MAAM,SAAS,WAAU,UAAA,CAAU,EAAA,CACxD;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/SegmentedControl.cjs

@@ -19,6 +19,8 @@ function SegmentedControl({
   "aria-label": ariaLabel
 }) {
   const btnRefs = react.useRef([]);
+  const markerIdBase = react.useId();
+  const hasSelection = options.some((option) => option.id === value);
   const move = (from, dir) => {
     var _a;
     const n = options.length;
@@ -47,6 +49,8 @@ function SegmentedControl({
       ),
       children: options.map((option, index) => {
         const active = option.id === value;
+        const implied = !hasSelection && option.implied === true;
+        const markerId = option.marker ? `${markerIdBase}-marker-${index}` : void 0;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -56,9 +60,11 @@ function SegmentedControl({
             type: "button",
             role: "radio",
             "aria-checked": active,
+            "aria-describedby": markerId,
+            "data-implied": implied ? "true" : void 0,
             title: option.title,
             disabled: option.disabled,
-            tabIndex: active ? 0 : -1,
+            tabIndex: active || implied ? 0 : -1,
             onClick: () => !option.disabled && onChange(option.id),
             onKeyDown: (e) => {
               if (e.key === "ArrowRight" || e.key === "ArrowDown") {
@@ -76,7 +82,7 @@ function SegmentedControl({
               size === "lg" && "rounded-lg text-left",
               option.description ? "whitespace-normal" : "whitespace-nowrap",
               SIZE_CLASSES[size],
-              active ? size === "lg" ? "border-primary/70 bg-primary/10 text-foreground shadow-sm ring-1 ring-primary/25" : "border-border bg-card text-foreground shadow-sm" : size === "lg" ? "border-border bg-card text-muted-foreground hover:border-muted-foreground/40 hover:bg-card hover:text-foreground hover:shadow-sm" : "text-muted-foreground hover:border-border hover:bg-background/60 hover:text-foreground",
+              active ? size === "lg" ? "border-primary/70 bg-primary/10 text-foreground shadow-sm ring-1 ring-primary/25" : "border-border bg-card text-foreground shadow-sm" : implied ? size === "lg" ? "border-dashed border-primary/60 bg-card text-foreground hover:shadow-sm" : "border-dashed border-primary/60 text-foreground hover:bg-background/60" : size === "lg" ? "border-border bg-card text-muted-foreground hover:border-muted-foreground/40 hover:bg-card hover:text-foreground hover:shadow-sm" : "text-muted-foreground hover:border-border hover:bg-background/60 hover:text-foreground",
               active && option.activeClassName
             ),
             children: [
@@ -99,7 +105,18 @@ function SegmentedControl({
                     size === "lg" && "flex flex-col items-start text-left leading-tight"
                   ),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label }),
+                    option.marker ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex min-w-0 max-w-full items-baseline gap-1", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          id: markerId,
+                          "aria-hidden": "true",
+                          className: "shrink-0 text-[11px] font-normal opacity-70",
+                          children: option.marker
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: option.label }),
                     option.description && /* @__PURE__ */ jsxRuntime.jsx(
                       "span",
                       {

package/dist/components/SegmentedControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.cjs","sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import { useRef, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type SegmentedSize = \"sm\" | \"md\" | \"lg\";\n\nexport type SegmentedOption<T extends string = string> = {\n  /** Stable value emitted on selection. */\n  id: T;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (imported `Ui*` component or runtime name). */\n  icon?: string | StaticIconComponent;\n  /** Classes applied to the leading icon. */\n  iconClassName?: string;\n  /** Classes applied to this segment only while selected. */\n  activeClassName?: string;\n  /** Optional secondary line, used by larger card-like segmented controls. */\n  description?: ReactNode;\n  /** Native title attribute. */\n  title?: string;\n  /** Disable this segment. */\n  disabled?: boolean;\n};\n\nexport type SegmentedControlProps<T extends string = string> = {\n  /** Currently selected option id. */\n  value: T;\n  /** Mutually-exclusive options rendered left to right. */\n  options: SegmentedOption<T>[];\n  /** Called with the newly selected id. */\n  onChange: (id: T) => void;\n  /** Control size. `md` (default) matches form controls; `sm` is denser and `lg` is card-like. */\n  size?: SegmentedSize;\n  /** Allows segments to wrap instead of overflowing horizontally. */\n  wrap?: boolean;\n  /** Accessible group label. */\n  \"aria-label\"?: string;\n  /** Classes applied to the track. */\n  className?: string;\n};\n\nconst SIZE_CLASSES: Record<SegmentedSize, string> = {\n  sm: \"text-xs px-density-2 py-density-1 gap-1\",\n  md: \"h-full px-control-px text-sm gap-1.5\",\n  lg: \"min-h-[4.25rem] min-w-44 flex-1 px-density-3 py-density-3 gap-density-2 text-sm\",\n};\n\n/**\n * Single-select toggle group (the Gavel `Segmented` \"Mine / All / Bots\"\n * pattern). A muted track holds mutually-exclusive segments; the active\n * segment lifts onto the card surface. Built on clicky tokens so it inherits\n * dark-mode and density. Use for small, flat choice sets — reach for `Select`\n * when the option count grows.\n */\nexport function SegmentedControl<T extends string = string>({\n  value,\n  options,\n  onChange,\n  size = \"md\",\n  wrap = false,\n  className,\n  \"aria-label\": ariaLabel,\n}: SegmentedControlProps<T>) {\n  const btnRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const move = (from: number, dir: 1 | -1) => {\n    const n = options.length;\n    let i = from;\n    for (let step = 0; step < n; step++) {\n      i = (i + dir + n) % n;\n      const opt = options[i];\n      if (opt && !opt.disabled) {\n        onChange(opt.id);\n        btnRefs.current[i]?.focus();\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      className={cn(\n        \"inline-flex items-center rounded-md bg-muted p-0.5\",\n        size === \"md\" && \"h-control-h\",\n        size === \"lg\" && \"gap-density-2 bg-transparent p-0\",\n        wrap && \"flex-wrap\",\n        className,\n      )}\n    >\n      {options.map((option, index) => {\n        const active = option.id === value;\n        return (\n          <button\n            key={option.id}\n            ref={(el) => {\n              btnRefs.current[index] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={active}\n            title={option.title}\n            disabled={option.disabled}\n            tabIndex={active ? 0 : -1}\n            onClick={() => !option.disabled && onChange(option.id)}\n            onKeyDown={(e) => {\n              if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n                e.preventDefault();\n                move(index, 1);\n              } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                move(index, -1);\n              }\n            }}\n            className={cn(\n              \"inline-flex items-center rounded-[5px] border border-transparent font-medium transition-colors\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              size === \"lg\" && \"rounded-lg text-left\",\n              option.description ? \"whitespace-normal\" : \"whitespace-nowrap\",\n              SIZE_CLASSES[size],\n              active\n                ? size === \"lg\"\n                  ? \"border-primary/70 bg-primary/10 text-foreground shadow-sm ring-1 ring-primary/25\"\n                  : \"border-border bg-card text-foreground shadow-sm\"\n                : size === \"lg\"\n                  ? \"border-border bg-card text-muted-foreground hover:border-muted-foreground/40 hover:bg-card hover:text-foreground hover:shadow-sm\"\n                  : \"text-muted-foreground hover:border-border hover:bg-background/60 hover:text-foreground\",\n              active && option.activeClassName,\n            )}\n          >\n            {option.icon && (\n              <Icon\n                {...(typeof option.icon === \"string\"\n                  ? { name: option.icon }\n                  : { icon: option.icon })}\n                className={cn(\n                  size === \"lg\" ? \"size-4 shrink-0\" : \"size-3.5 shrink-0\",\n                  size === \"lg\" &&\n                    (active ? \"text-primary\" : \"text-muted-foreground\"),\n                  option.iconClassName,\n                )}\n              />\n            )}\n            <span\n              className={cn(\n                \"min-w-0\",\n                size === \"lg\" &&\n                  \"flex flex-col items-start text-left leading-tight\",\n              )}\n            >\n              <span className=\"min-w-0 truncate\">{option.label}</span>\n              {option.description && (\n                <span\n                  className={cn(\n                    \"mt-0.5 max-w-56 whitespace-normal break-words text-[11px] font-normal leading-snug\",\n                    active\n                      ? \"text-muted-foreground\"\n                      : \"text-muted-foreground/80\",\n                  )}\n                >\n                  {option.description}\n                </span>\n              )}\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["useRef","jsx","cn","jsxs","Icon"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.cjs","sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import { useId, useRef, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type SegmentedSize = \"sm\" | \"md\" | \"lg\";\n\nexport type SegmentedOption<T extends string = string> = {\n  /** Stable value emitted on selection. */\n  id: T;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (imported `Ui*` component or runtime name). */\n  icon?: string | StaticIconComponent;\n  /** Classes applied to the leading icon. */\n  iconClassName?: string;\n  /** Classes applied to this segment only while selected. */\n  activeClassName?: string;\n  /** Optional secondary line, used by larger card-like segmented controls. */\n  description?: ReactNode;\n  /** Native title attribute. */\n  title?: string;\n  /**\n   * Short muted tag rendered after the label (e.g. \"default\"). It is exposed to\n   * assistive tech as the segment's accessible description, not its name.\n   */\n  marker?: string;\n  /**\n   * Render this segment as the implied choice while no option is selected (e.g.\n   * a schema default the value has not been set to). It is outlined, not\n   * filled, and stays `aria-checked=false` because nothing is selected.\n   */\n  implied?: boolean;\n  /** Disable this segment. */\n  disabled?: boolean;\n};\n\nexport type SegmentedControlProps<T extends string = string> = {\n  /** Currently selected option id. */\n  value: T;\n  /** Mutually-exclusive options rendered left to right. */\n  options: SegmentedOption<T>[];\n  /** Called with the newly selected id. */\n  onChange: (id: T) => void;\n  /** Control size. `md` (default) matches form controls; `sm` is denser and `lg` is card-like. */\n  size?: SegmentedSize;\n  /** Allows segments to wrap instead of overflowing horizontally. */\n  wrap?: boolean;\n  /** Accessible group label. */\n  \"aria-label\"?: string;\n  /** Classes applied to the track. */\n  className?: string;\n};\n\nconst SIZE_CLASSES: Record<SegmentedSize, string> = {\n  sm: \"text-xs px-density-2 py-density-1 gap-1\",\n  md: \"h-full px-control-px text-sm gap-1.5\",\n  lg: \"min-h-[4.25rem] min-w-44 flex-1 px-density-3 py-density-3 gap-density-2 text-sm\",\n};\n\n/**\n * Single-select toggle group (the Gavel `Segmented` \"Mine / All / Bots\"\n * pattern). A muted track holds mutually-exclusive segments; the active\n * segment lifts onto the card surface. Built on clicky tokens so it inherits\n * dark-mode and density. Use for small, flat choice sets — reach for `Select`\n * when the option count grows.\n */\nexport function SegmentedControl<T extends string = string>({\n  value,\n  options,\n  onChange,\n  size = \"md\",\n  wrap = false,\n  className,\n  \"aria-label\": ariaLabel,\n}: SegmentedControlProps<T>) {\n  const btnRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const markerIdBase = useId();\n  const hasSelection = options.some((option) => option.id === value);\n\n  const move = (from: number, dir: 1 | -1) => {\n    const n = options.length;\n    let i = from;\n    for (let step = 0; step < n; step++) {\n      i = (i + dir + n) % n;\n      const opt = options[i];\n      if (opt && !opt.disabled) {\n        onChange(opt.id);\n        btnRefs.current[i]?.focus();\n        return;\n      }\n    }\n  };\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      className={cn(\n        \"inline-flex items-center rounded-md bg-muted p-0.5\",\n        size === \"md\" && \"h-control-h\",\n        size === \"lg\" && \"gap-density-2 bg-transparent p-0\",\n        wrap && \"flex-wrap\",\n        className,\n      )}\n    >\n      {options.map((option, index) => {\n        const active = option.id === value;\n        const implied = !hasSelection && option.implied === true;\n        const markerId = option.marker ? `${markerIdBase}-marker-${index}` : undefined;\n        return (\n          <button\n            key={option.id}\n            ref={(el) => {\n              btnRefs.current[index] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={active}\n            aria-describedby={markerId}\n            data-implied={implied ? \"true\" : undefined}\n            title={option.title}\n            disabled={option.disabled}\n            tabIndex={active || implied ? 0 : -1}\n            onClick={() => !option.disabled && onChange(option.id)}\n            onKeyDown={(e) => {\n              if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n                e.preventDefault();\n                move(index, 1);\n              } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n                e.preventDefault();\n                move(index, -1);\n              }\n            }}\n            className={cn(\n              \"inline-flex items-center rounded-[5px] border border-transparent font-medium transition-colors\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              size === \"lg\" && \"rounded-lg text-left\",\n              option.description ? \"whitespace-normal\" : \"whitespace-nowrap\",\n              SIZE_CLASSES[size],\n              active\n                ? size === \"lg\"\n                  ? \"border-primary/70 bg-primary/10 text-foreground shadow-sm ring-1 ring-primary/25\"\n                  : \"border-border bg-card text-foreground shadow-sm\"\n                : implied\n                  ? size === \"lg\"\n                    ? \"border-dashed border-primary/60 bg-card text-foreground hover:shadow-sm\"\n                    : \"border-dashed border-primary/60 text-foreground hover:bg-background/60\"\n                  : size === \"lg\"\n                    ? \"border-border bg-card text-muted-foreground hover:border-muted-foreground/40 hover:bg-card hover:text-foreground hover:shadow-sm\"\n                    : \"text-muted-foreground hover:border-border hover:bg-background/60 hover:text-foreground\",\n              active && option.activeClassName,\n            )}\n          >\n            {option.icon && (\n              <Icon\n                {...(typeof option.icon === \"string\"\n                  ? { name: option.icon }\n                  : { icon: option.icon })}\n                className={cn(\n                  size === \"lg\" ? \"size-4 shrink-0\" : \"size-3.5 shrink-0\",\n                  size === \"lg\" &&\n                    (active ? \"text-primary\" : \"text-muted-foreground\"),\n                  option.iconClassName,\n                )}\n              />\n            )}\n            <span\n              className={cn(\n                \"min-w-0\",\n                size === \"lg\" &&\n                  \"flex flex-col items-start text-left leading-tight\",\n              )}\n            >\n              {option.marker ? (\n                <span className=\"inline-flex min-w-0 max-w-full items-baseline gap-1\">\n                  <span className=\"min-w-0 truncate\">{option.label}</span>\n                  <span\n                    id={markerId}\n                    aria-hidden=\"true\"\n                    className=\"shrink-0 text-[11px] font-normal opacity-70\"\n                  >\n                    {option.marker}\n                  </span>\n                </span>\n              ) : (\n                <span className=\"min-w-0 truncate\">{option.label}</span>\n              )}\n              {option.description && (\n                <span\n                  className={cn(\n                    \"mt-0.5 max-w-56 whitespace-normal break-words text-[11px] font-normal leading-snug\",\n                    active\n                      ? \"text-muted-foreground\"\n                      : \"text-muted-foreground/80\",\n                  )}\n                >\n                  {option.description}\n                </span>\n              )}\n            </span>\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["useRef","useId","jsx","cn","jsxs","Icon"],"mappings":"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"}

package/dist/components/SegmentedControl.d.ts

@@ -16,6 +16,17 @@ export type SegmentedOption<T extends string = string> = {
     description?: ReactNode;
     /** Native title attribute. */
     title?: string;
+    /**
+     * Short muted tag rendered after the label (e.g. "default"). It is exposed to
+     * assistive tech as the segment's accessible description, not its name.
+     */
+    marker?: string;
+    /**
+     * Render this segment as the implied choice while no option is selected (e.g.
+     * a schema default the value has not been set to). It is outlined, not
+     * filled, and stays `aria-checked=false` because nothing is selected.
+     */
+    implied?: boolean;
     /** Disable this segment. */
     disabled?: boolean;
 };