@flanksource/clicky-ui 0.3.33 → 0.3.35

package/dist/components/JsonSchemaForm.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const utils = require("../lib/utils.cjs");
 const Icon = require("../data/Icon.cjs");
+const jsonSchemaFormFilterInput = require("./json-schema-form-filter-input.cjs");
 const DropdownMenu = require("../overlay/DropdownMenu.cjs");
 const jsonSchemaFormLayout = require("./json-schema-form-layout.cjs");
 const jsonSchemaFormErrorDisplay = require("./json-schema-form-error-display.cjs");
@@ -16,8 +17,6 @@ const jsonSchemaFormResolve = require("./json-schema-form-resolve.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");
-const UiSearch = require("../icons/components/UiSearch.cjs");
-const UiClose = require("../icons/components/UiClose.cjs");
 const UiEllipsisBold = require("../icons/components/UiEllipsisBold.cjs");
 const UiCheck = require("../icons/components/UiCheck.cjs");
 const DEFAULT_LABEL_MAX_WIDTH = "40ch";
@@ -27,6 +26,7 @@ function resolveFormLayout(layout, inline, modeOverride) {
   const mode = modeOverride ?? baseMode;
   const valueMaxWidth = (layout == null ? void 0 : layout.valueMaxWidth) ?? DEFAULT_VALUE_MAX_WIDTH;
   const help = (layout == null ? void 0 : layout.help) ? { help: layout.help } : {};
+  if (mode === "properties") return { ...layout, mode, ...help };
   if (mode !== "inline") return { mode: "stacked", valueMaxWidth, ...help };
   return {
     mode: "inline",
@@ -46,12 +46,15 @@ function JsonSchemaForm({
   size = jsonSchemaFormSize.DEFAULT_FORM_SIZE,
   idPrefix,
   hideReadOnlyFields = false,
+  hideEmpty = false,
+  autoSave = false,
   hiddenKeys,
   requiredFirst = false,
   title,
   pre,
   post,
   showPreferencesMenu = true,
+  showFilter,
   persistPreferences = true,
   preferencesStorageKey = jsonSchemaFormPreferences.DEFAULT_PREFERENCES_STORAGE_KEY,
   lookupFetcher
@@ -62,6 +65,7 @@ function JsonSchemaForm({
   const [fieldFilter, setFieldFilter] = react.useState("");
   const effectiveSize = prefs.size ?? size;
   const resolvedLayout = resolveFormLayout(layout, inline, prefs.layoutMode);
+  const filterVisible = showFilter ?? (showPreferencesMenu && resolvedLayout.mode === "properties");
   const effectiveSortMode = prefs.sortMode ?? (requiredFirst ? "required-first" : "schema");
   const applyPrefs = (next) => {
     setPrefs(next);
@@ -76,11 +80,12 @@ function JsonSchemaForm({
       value: effectiveValue,
       errors,
       hideReadOnlyFields,
+      hideEmpty,
       pre: preExtensions,
       ...hiddenKeys ? { hiddenKeys } : {},
       ...fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}
     }),
-    [effectiveValue, errors, fieldFilter, hiddenKeys, hideReadOnlyFields, preExtensions, resolvedSchema]
+    [effectiveValue, errors, fieldFilter, hiddenKeys, hideEmpty, hideReadOnlyFields, preExtensions, resolvedSchema]
   );
   react.useEffect(() => {
     if (!readOnly && effectiveValue !== value) onChange(effectiveValue);
@@ -88,6 +93,8 @@ function JsonSchemaForm({
   const ctx = {
     readOnly,
     hideReadOnlyFields,
+    hideEmpty,
+    autoSave,
     layout: resolvedLayout,
     size: effectiveSize,
     sortMode: effectiveSortMode,
@@ -106,7 +113,7 @@ function JsonSchemaForm({
   const inPickerPhase = discKey != null && (effectiveValue[discKey] == null || effectiveValue[discKey] === "");
   const objectRows = discKey ? null : jsonSchemaFormRender.renderObjectFields(resolvedSchema, effectiveValue, onChange, ctx, hiddenKeys ? { hiddenKeys } : void 0);
   const noMatches = objectRows != null && objectRows.length === 0 && fieldFilter.trim() !== "";
-  return /* @__PURE__ */ jsxRuntime.jsx(FormLookupProvider.FormLookupProvider, { ...lookupFetcher ? { fetcher: lookupFetcher } : {}, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative flex flex-col", jsonSchemaFormSize.fieldInnerGapClass[effectiveSize]), children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(FormLookupProvider.FormLookupProvider, { ...lookupFetcher ? { fetcher: lookupFetcher } : {}, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-json-schema-form": true, className: utils.cn("relative flex flex-col", jsonSchemaFormSize.fieldInnerGapClass[effectiveSize]), children: [
     showPreferencesMenu && !inPickerPhase && /* @__PURE__ */ jsxRuntime.jsx(
       PreferencesMenu,
       {
@@ -114,6 +121,7 @@ function JsonSchemaForm({
         layoutMode: resolvedLayout.mode,
         sortMode: effectiveSortMode,
         fieldFilter,
+        filterInMenu: !filterVisible,
         onFilterChange: setFieldFilter,
         onSelectSize: (next) => applyPrefs({ ...prefs, size: next }),
         onSelectLayout: (next) => applyPrefs({ ...prefs, layoutMode: next }),
@@ -121,6 +129,7 @@ function JsonSchemaForm({
       }
     ),
     title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: utils.cn("font-semibold", jsonSchemaFormSize.labelSizeClass[effectiveSize]), children: title }),
+    filterVisible && !inPickerPhase && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-md pr-9", children: /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormFilterInput.FormFieldFilter, { value: fieldFilter, onChange: setFieldFilter }) }),
     /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormErrorDisplay.FormErrorSummary, { errors: unmatchedErrors }),
     /* @__PURE__ */ jsxRuntime.jsx(
       jsonSchemaFormLayout.FieldsGrid,
@@ -159,7 +168,8 @@ const SIZE_OPTIONS = [
 ];
 const LAYOUT_OPTIONS = [
   { value: "stacked", label: "Stacked" },
-  { value: "inline", label: "Inline" }
+  { value: "inline", label: "Inline" },
+  { value: "properties", label: "Properties" }
 ];
 const SORT_OPTIONS = [
   { value: "schema", label: "Schema order" },
@@ -171,6 +181,7 @@ function PreferencesMenu({
   layoutMode,
   sortMode,
   fieldFilter,
+  filterInMenu,
   onFilterChange,
   onSelectSize,
   onSelectLayout,
@@ -197,37 +208,7 @@ function PreferencesMenu({
         }
       ),
       children: (closeMenu) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pb-1.5 pt-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Icon.Icon,
-            {
-              icon: UiSearch.UiSearch,
-              className: "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "text",
-              "aria-label": "Filter fields",
-              placeholder: "Filter fields…",
-              value: fieldFilter,
-              onChange: (e) => onFilterChange(e.target.value),
-              onKeyDown: (e) => e.stopPropagation(),
-              className: "w-full rounded-md border border-input bg-background py-1 pl-7 pr-6 text-xs text-foreground outline-none placeholder:text-placeholder focus-visible:ring-2 focus-visible:ring-ring"
-            }
-          ),
-          filterActive && /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Clear filter",
-              onClick: () => onFilterChange(""),
-              className: "absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex items-center justify-center text-muted-foreground hover:text-foreground",
-              children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose, className: "text-xs" })
-            }
-          )
-        ] }) }),
+        filterInMenu && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pb-1.5 pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormFilterInput.FormFieldFilter, { value: fieldFilter, onChange: onFilterChange }) }),
         /* @__PURE__ */ jsxRuntime.jsx(PreferenceSection, { title: "Size" }),
         SIZE_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
           PreferenceItem,

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, UiClose, UiEllipsisBold, UiSearch } from \"../icons\";\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 !== \"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  errors = [],\n  readOnly = false,\n  inline = false,\n  layout,\n  size = DEFAULT_FORM_SIZE,\n  idPrefix,\n  hideReadOnlyFields = false,\n  hiddenKeys,\n  requiredFirst = false,\n  title,\n  pre,\n  post,\n  showPreferencesMenu = true,\n  persistPreferences = true,\n  preferencesStorageKey = DEFAULT_PREFERENCES_STORAGE_KEY,\n  lookupFetcher,\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  // 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  const effectiveValue = useMemo(() => applySchemaDefaults(resolvedSchema, value), [resolvedSchema, value]);\n  const preExtensions = pre ?? [];\n  const unmatchedErrors = useMemo(\n    () =>\n      unmatchedFormErrors({\n        schema: resolvedSchema,\n        value: effectiveValue,\n        errors,\n        hideReadOnlyFields,\n        pre: preExtensions,\n        ...(hiddenKeys ? { hiddenKeys } : {}),\n        ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n      }),\n    [effectiveValue, errors, fieldFilter, hiddenKeys, hideReadOnlyFields, preExtensions, resolvedSchema],\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    layout: resolvedLayout,\n    size: effectiveSize,\n    sortMode: effectiveSortMode,\n    pre: preExtensions,\n    post: post ?? [],\n    rootValue: effectiveValue,\n    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 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            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        <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];\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  onFilterChange,\n  onSelectSize,\n  onSelectLayout,\n  onSelectSort,\n}: {\n  size: FormSize;\n  layoutMode: LayoutMode;\n  sortMode: SortMode;\n  fieldFilter: string;\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          <div className=\"px-2 pb-1.5 pt-1\">\n            <div className=\"relative\">\n              <Icon\n                icon={UiSearch}\n                className=\"pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground\"\n              />\n              <input\n                type=\"text\"\n                aria-label=\"Filter fields\"\n                placeholder=\"Filter fields…\"\n                value={fieldFilter}\n                onChange={(e) => onFilterChange(e.target.value)}\n                // Keep arrow/space/enter keys inside the input instead of driving\n                // the menu's list navigation or closing it.\n                onKeyDown={(e) => e.stopPropagation()}\n                className=\"w-full rounded-md border border-input bg-background py-1 pl-7 pr-6 text-xs text-foreground outline-none placeholder:text-placeholder focus-visible:ring-2 focus-visible:ring-ring\"\n              />\n              {filterActive && (\n                <button\n                  type=\"button\"\n                  aria-label=\"Clear filter\"\n                  onClick={() => onFilterChange(\"\")}\n                  className=\"absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex items-center justify-center text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={UiClose} className=\"text-xs\" />\n                </button>\n              )}\n            </div>\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","FormLookupProvider","jsxs","cn","fieldInnerGapClass","jsx","labelSizeClass","FormErrorSummary","FieldsGrid","normalizeColumns","cssLength","DEFAULT_COLUMN_MIN_WIDTH","DiscriminatedForm","DropdownMenu","Icon","UiEllipsisBold","Fragment","UiSearch","UiClose","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-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  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}: 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  const effectiveValue = useMemo(() => applySchemaDefaults(resolvedSchema, value), [resolvedSchema, value]);\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        ...(hiddenKeys ? { hiddenKeys } : {}),\n        ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n      }),\n    [effectiveValue, errors, fieldFilter, hiddenKeys, hideEmpty, hideReadOnlyFields, preExtensions, resolvedSchema],\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: effectiveValue,\n    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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"}

package/dist/components/JsonSchemaForm.d.ts

@@ -1,3 +1,3 @@
 import { JsonSchemaFormProps } from './json-schema-form-types';
-export declare function JsonSchemaForm({ schema, value, onChange, errors, readOnly, inline, layout, size, idPrefix, hideReadOnlyFields, hiddenKeys, requiredFirst, title, pre, post, showPreferencesMenu, persistPreferences, preferencesStorageKey, lookupFetcher, }: JsonSchemaFormProps): import("react").JSX.Element;
+export declare function JsonSchemaForm({ schema, value, onChange, errors, readOnly, inline, layout, size, idPrefix, hideReadOnlyFields, hideEmpty, autoSave, hiddenKeys, requiredFirst, title, pre, post, showPreferencesMenu, showFilter, persistPreferences, preferencesStorageKey, lookupFetcher, }: 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":"AA2BA,OAAO,KAAK,EAAc,mBAAmB,EAAiB,MAAM,0BAA0B,CAAC;AAmC/F,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,MAAW,EACX,QAAgB,EAChB,MAAc,EACd,MAAM,EACN,IAAwB,EACxB,QAAQ,EACR,kBAA0B,EAC1B,UAAU,EACV,aAAqB,EACrB,KAAK,EACL,GAAG,EACH,IAAI,EACJ,mBAA0B,EAC1B,kBAAyB,EACzB,qBAAuD,EACvD,aAAa,GACd,EAAE,mBAAmB,+BAwHrB"}
+{"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,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,GACd,EAAE,mBAAmB,+BAkIrB"}

package/dist/components/JsonSchemaForm.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useMemo, useEffect } from "react";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
+import { FormFieldFilter } from "./json-schema-form-filter-input.js";
 import { DropdownMenu } from "../overlay/DropdownMenu.js";
 import { FieldsGrid } from "./json-schema-form-layout.js";
 import { FormErrorSummary } from "./json-schema-form-error-display.js";
@@ -14,8 +15,6 @@ import { applySchemaDefaults } from "./json-schema-form-resolve.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";
-import { UiSearch } from "../icons/components/UiSearch.js";
-import { UiClose } from "../icons/components/UiClose.js";
 import { UiEllipsisBold } from "../icons/components/UiEllipsisBold.js";
 import { UiCheck } from "../icons/components/UiCheck.js";
 const DEFAULT_LABEL_MAX_WIDTH = "40ch";
@@ -25,6 +24,7 @@ function resolveFormLayout(layout, inline, modeOverride) {
   const mode = modeOverride ?? baseMode;
   const valueMaxWidth = (layout == null ? void 0 : layout.valueMaxWidth) ?? DEFAULT_VALUE_MAX_WIDTH;
   const help = (layout == null ? void 0 : layout.help) ? { help: layout.help } : {};
+  if (mode === "properties") return { ...layout, mode, ...help };
   if (mode !== "inline") return { mode: "stacked", valueMaxWidth, ...help };
   return {
     mode: "inline",
@@ -44,12 +44,15 @@ function JsonSchemaForm({
   size = DEFAULT_FORM_SIZE,
   idPrefix,
   hideReadOnlyFields = false,
+  hideEmpty = false,
+  autoSave = false,
   hiddenKeys,
   requiredFirst = false,
   title,
   pre,
   post,
   showPreferencesMenu = true,
+  showFilter,
   persistPreferences = true,
   preferencesStorageKey = DEFAULT_PREFERENCES_STORAGE_KEY,
   lookupFetcher
@@ -60,6 +63,7 @@ function JsonSchemaForm({
   const [fieldFilter, setFieldFilter] = useState("");
   const effectiveSize = prefs.size ?? size;
   const resolvedLayout = resolveFormLayout(layout, inline, prefs.layoutMode);
+  const filterVisible = showFilter ?? (showPreferencesMenu && resolvedLayout.mode === "properties");
   const effectiveSortMode = prefs.sortMode ?? (requiredFirst ? "required-first" : "schema");
   const applyPrefs = (next) => {
     setPrefs(next);
@@ -74,11 +78,12 @@ function JsonSchemaForm({
       value: effectiveValue,
       errors,
       hideReadOnlyFields,
+      hideEmpty,
       pre: preExtensions,
       ...hiddenKeys ? { hiddenKeys } : {},
       ...fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}
     }),
-    [effectiveValue, errors, fieldFilter, hiddenKeys, hideReadOnlyFields, preExtensions, resolvedSchema]
+    [effectiveValue, errors, fieldFilter, hiddenKeys, hideEmpty, hideReadOnlyFields, preExtensions, resolvedSchema]
   );
   useEffect(() => {
     if (!readOnly && effectiveValue !== value) onChange(effectiveValue);
@@ -86,6 +91,8 @@ function JsonSchemaForm({
   const ctx = {
     readOnly,
     hideReadOnlyFields,
+    hideEmpty,
+    autoSave,
     layout: resolvedLayout,
     size: effectiveSize,
     sortMode: effectiveSortMode,
@@ -104,7 +111,7 @@ function JsonSchemaForm({
   const inPickerPhase = discKey != null && (effectiveValue[discKey] == null || effectiveValue[discKey] === "");
   const objectRows = discKey ? null : renderObjectFields(resolvedSchema, effectiveValue, onChange, ctx, hiddenKeys ? { hiddenKeys } : void 0);
   const noMatches = objectRows != null && objectRows.length === 0 && fieldFilter.trim() !== "";
-  return /* @__PURE__ */ jsx(FormLookupProvider, { ...lookupFetcher ? { fetcher: lookupFetcher } : {}, children: /* @__PURE__ */ jsxs("div", { className: cn("relative flex flex-col", fieldInnerGapClass[effectiveSize]), children: [
+  return /* @__PURE__ */ jsx(FormLookupProvider, { ...lookupFetcher ? { fetcher: lookupFetcher } : {}, children: /* @__PURE__ */ jsxs("div", { "data-json-schema-form": true, className: cn("relative flex flex-col", fieldInnerGapClass[effectiveSize]), children: [
     showPreferencesMenu && !inPickerPhase && /* @__PURE__ */ jsx(
       PreferencesMenu,
       {
@@ -112,6 +119,7 @@ function JsonSchemaForm({
         layoutMode: resolvedLayout.mode,
         sortMode: effectiveSortMode,
         fieldFilter,
+        filterInMenu: !filterVisible,
         onFilterChange: setFieldFilter,
         onSelectSize: (next) => applyPrefs({ ...prefs, size: next }),
         onSelectLayout: (next) => applyPrefs({ ...prefs, layoutMode: next }),
@@ -119,6 +127,7 @@ function JsonSchemaForm({
       }
     ),
     title && /* @__PURE__ */ jsx("h3", { className: cn("font-semibold", labelSizeClass[effectiveSize]), children: title }),
+    filterVisible && !inPickerPhase && /* @__PURE__ */ jsx("div", { className: "max-w-md pr-9", children: /* @__PURE__ */ jsx(FormFieldFilter, { value: fieldFilter, onChange: setFieldFilter }) }),
     /* @__PURE__ */ jsx(FormErrorSummary, { errors: unmatchedErrors }),
     /* @__PURE__ */ jsx(
       FieldsGrid,
@@ -157,7 +166,8 @@ const SIZE_OPTIONS = [
 ];
 const LAYOUT_OPTIONS = [
   { value: "stacked", label: "Stacked" },
-  { value: "inline", label: "Inline" }
+  { value: "inline", label: "Inline" },
+  { value: "properties", label: "Properties" }
 ];
 const SORT_OPTIONS = [
   { value: "schema", label: "Schema order" },
@@ -169,6 +179,7 @@ function PreferencesMenu({
   layoutMode,
   sortMode,
   fieldFilter,
+  filterInMenu,
   onFilterChange,
   onSelectSize,
   onSelectLayout,
@@ -195,37 +206,7 @@ function PreferencesMenu({
         }
       ),
       children: (closeMenu) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "px-2 pb-1.5 pt-1", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              icon: UiSearch,
-              className: "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "text",
-              "aria-label": "Filter fields",
-              placeholder: "Filter fields…",
-              value: fieldFilter,
-              onChange: (e) => onFilterChange(e.target.value),
-              onKeyDown: (e) => e.stopPropagation(),
-              className: "w-full rounded-md border border-input bg-background py-1 pl-7 pr-6 text-xs text-foreground outline-none placeholder:text-placeholder focus-visible:ring-2 focus-visible:ring-ring"
-            }
-          ),
-          filterActive && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Clear filter",
-              onClick: () => onFilterChange(""),
-              className: "absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex items-center justify-center text-muted-foreground hover:text-foreground",
-              children: /* @__PURE__ */ jsx(Icon, { icon: UiClose, className: "text-xs" })
-            }
-          )
-        ] }) }),
+        filterInMenu && /* @__PURE__ */ jsx("div", { className: "px-2 pb-1.5 pt-1", children: /* @__PURE__ */ jsx(FormFieldFilter, { value: fieldFilter, onChange: onFilterChange }) }),
         /* @__PURE__ */ jsx(PreferenceSection, { title: "Size" }),
         SIZE_OPTIONS.map((opt) => /* @__PURE__ */ jsx(
           PreferenceItem,

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, UiClose, UiEllipsisBold, UiSearch } from \"../icons\";\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 !== \"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  errors = [],\n  readOnly = false,\n  inline = false,\n  layout,\n  size = DEFAULT_FORM_SIZE,\n  idPrefix,\n  hideReadOnlyFields = false,\n  hiddenKeys,\n  requiredFirst = false,\n  title,\n  pre,\n  post,\n  showPreferencesMenu = true,\n  persistPreferences = true,\n  preferencesStorageKey = DEFAULT_PREFERENCES_STORAGE_KEY,\n  lookupFetcher,\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  // 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  const effectiveValue = useMemo(() => applySchemaDefaults(resolvedSchema, value), [resolvedSchema, value]);\n  const preExtensions = pre ?? [];\n  const unmatchedErrors = useMemo(\n    () =>\n      unmatchedFormErrors({\n        schema: resolvedSchema,\n        value: effectiveValue,\n        errors,\n        hideReadOnlyFields,\n        pre: preExtensions,\n        ...(hiddenKeys ? { hiddenKeys } : {}),\n        ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n      }),\n    [effectiveValue, errors, fieldFilter, hiddenKeys, hideReadOnlyFields, preExtensions, resolvedSchema],\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    layout: resolvedLayout,\n    size: effectiveSize,\n    sortMode: effectiveSortMode,\n    pre: preExtensions,\n    post: post ?? [],\n    rootValue: effectiveValue,\n    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 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            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        <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];\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  onFilterChange,\n  onSelectSize,\n  onSelectLayout,\n  onSelectSort,\n}: {\n  size: FormSize;\n  layoutMode: LayoutMode;\n  sortMode: SortMode;\n  fieldFilter: string;\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          <div className=\"px-2 pb-1.5 pt-1\">\n            <div className=\"relative\">\n              <Icon\n                icon={UiSearch}\n                className=\"pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground\"\n              />\n              <input\n                type=\"text\"\n                aria-label=\"Filter fields\"\n                placeholder=\"Filter fields…\"\n                value={fieldFilter}\n                onChange={(e) => onFilterChange(e.target.value)}\n                // Keep arrow/space/enter keys inside the input instead of driving\n                // the menu's list navigation or closing it.\n                onKeyDown={(e) => e.stopPropagation()}\n                className=\"w-full rounded-md border border-input bg-background py-1 pl-7 pr-6 text-xs text-foreground outline-none placeholder:text-placeholder focus-visible:ring-2 focus-visible:ring-ring\"\n              />\n              {filterActive && (\n                <button\n                  type=\"button\"\n                  aria-label=\"Clear filter\"\n                  onClick={() => onFilterChange(\"\")}\n                  className=\"absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex items-center justify-center text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={UiClose} className=\"text-xs\" />\n                </button>\n              )}\n            </div>\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-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  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}: 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  const effectiveValue = useMemo(() => applySchemaDefaults(resolvedSchema, value), [resolvedSchema, value]);\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        ...(hiddenKeys ? { hiddenKeys } : {}),\n        ...(fieldFilter.trim() ? { fieldFilter: fieldFilter.trim() } : {}),\n      }),\n    [effectiveValue, errors, fieldFilter, hiddenKeys, hideEmpty, hideReadOnlyFields, preExtensions, resolvedSchema],\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: effectiveValue,\n    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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"}

package/dist/components/ListMenu.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { HTMLAttributes, ReactNode } from 'react';
 import { ButtonProps } from './button';
 import { ListMenuSelection } from './use-list-menu-selection';
 export type ListMenuProps = HTMLAttributes<HTMLDivElement> & {

package/dist/components/MultiSelect.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { LabelIconSpec } from '../data/Icon';
 export type MultiSelectOption = {
     /** Stable option value written into the selected value array. */

package/dist/components/RangeSlider.cjs

@@ -85,6 +85,7 @@ function RangeSlider({
           min,
           max: upper,
           step,
+          stepBase: min,
           value: lower,
           onChange: (next) => onChange([next, upper])
         }
@@ -97,6 +98,7 @@ function RangeSlider({
           min: lower,
           max,
           step,
+          stepBase: min,
           value: upper,
           onChange: (next) => onChange([lower, next])
         }
@@ -110,6 +112,7 @@ function EditableBound({
   min,
   max,
   step,
+  stepBase,
   value,
   onChange
 }) {
@@ -129,7 +132,7 @@ function EditableBound({
           if (event.currentTarget.value === "") return;
           const next = Number(event.currentTarget.value);
           if (!Number.isFinite(next)) throw new Error(`${ariaLabel} must be a finite number`);
-          onChange(clampNumber(next, min, max));
+          onChange(snapToStep(next, { base: stepBase, step, min, max }));
         }
       }
     )
@@ -144,6 +147,17 @@ function normalizeRangeValue(value, min, max) {
 function clampNumber(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
+function snapToStep(value, { base, step, min, max }) {
+  if (!(step > 0)) return clampNumber(value, min, max);
+  const aligned = base + Math.round((value - base) / step) * step;
+  if (aligned < min) {
+    return clampNumber(base + Math.ceil((min - base) / step) * step, min, max);
+  }
+  if (aligned > max) {
+    return clampNumber(base + Math.floor((max - base) / step) * step, min, max);
+  }
+  return aligned;
+}
 function valueToPercent(value, min, max) {
   if (max <= min) return 0;
   return (value - min) / (max - min) * 100;