@flanksource/clicky-ui 0.3.17 → 0.3.19

package/dist/components/JSONPathPlayground.js

@@ -0,0 +1,225 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useRef } from "react";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+import { JsonView } from "../data/JsonView.js";
+import { Tree } from "../data/Tree.js";
+import { Modal } from "../overlay/Modal.js";
+import { Button } from "./button.js";
+import { InputField } from "./InputField.js";
+import { createLazyJSONPathTree } from "./jsonPathTree.js";
+import { UiWarningTriangle } from "../icons/components/UiWarningTriangle.js";
+import { UiInfo } from "../icons/components/UiInfo.js";
+const EVALUATE_DEBOUNCE_MS = 250;
+function JSONPathPlayground({
+  open,
+  onClose,
+  rows,
+  value,
+  onCommit,
+  assignsRoot,
+  source,
+  evaluate,
+  title = "JSONPath playground"
+}) {
+  const [draft, setDraft] = useState(value);
+  const [rowIndex, setRowIndex] = useState(0);
+  const [selected, setSelected] = useState(null);
+  const [result, setResult] = useState(null);
+  const [evaluating, setEvaluating] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setDraft(value);
+      setRowIndex((current) => current < rows.length ? current : 0);
+    }
+  }, [open, value, rows.length]);
+  const row = rows[rowIndex];
+  const browsed = useMemo(() => decodeSource(row, source), [row, source]);
+  const tree = useMemo(
+    () => createLazyJSONPathTree(browsed, { keyPrefix: `row${rowIndex}:${source ?? ""}:` }),
+    [browsed, rowIndex, source]
+  );
+  useEffect(() => {
+    if (!open) return;
+    setSelected(tree.materializePath(draft) ?? null);
+  }, [open, tree]);
+  const root = (selected == null ? void 0 : selected.root) ?? source;
+  const rootPending = root !== void 0 && root !== source && !assignsRoot;
+  const latestRequest = useRef(0);
+  useEffect(() => {
+    if (!open || !evaluate) return;
+    const request = latestRequest.current += 1;
+    setEvaluating(true);
+    const timer = setTimeout(() => {
+      const payload = { jsonpath: draft, row };
+      if (root !== void 0) payload.source = root;
+      void evaluate(payload).then((next) => {
+        if (latestRequest.current === request) setResult(next);
+      }).catch((error) => {
+        if (latestRequest.current === request) {
+          setResult({ matches: [], count: 0, error: String(error) });
+        }
+      }).finally(() => {
+        if (latestRequest.current === request) setEvaluating(false);
+      });
+    }, EVALUATE_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [open, evaluate, draft, row, root]);
+  const commit = () => {
+    onCommit(draft, root === void 0 ? {} : { root });
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open,
+      onClose,
+      title,
+      size: "2xl",
+      scrollBody: false,
+      className: "h-[80vh]",
+      footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { onClick: commit, disabled: draft.trim() === "", children: "Use path" })
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col gap-3", children: [
+        rows.length > 1 && /* @__PURE__ */ jsxs("label", { className: "flex shrink-0 items-center gap-2 text-xs text-muted-foreground", children: [
+          "Sample row",
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              "aria-label": "Sample row",
+              value: rowIndex,
+              onChange: (event) => setRowIndex(Number(event.target.value)),
+              className: "h-7 rounded-md border border-input bg-background px-2 text-xs text-foreground",
+              children: rows.map((_, index) => /* @__PURE__ */ jsxs("option", { value: index, children: [
+                index + 1,
+                " of ",
+                rows.length
+              ] }, index))
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: "Fields absent from the first row are only visible in the one that carries them." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid min-h-0 flex-1 gap-3 md:grid-cols-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-col overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
+            Tree,
+            {
+              className: "min-h-0 flex-1",
+              ariaLabel: "JSON paths",
+              roots: tree.roots,
+              getKey: (node) => node.key,
+              getChildren: tree.getChildren,
+              hasMoreChildren: tree.hasMoreChildren,
+              loadChildren: tree.loadChildren,
+              getSearchText: (node) => `${node.path} ${node.summary}`,
+              defaultOpen: (_node, depth) => depth < 2,
+              selected,
+              revealSelected: true,
+              onSelect: (node) => {
+                if (node.kind === "more") return;
+                setSelected(node);
+                setDraft(node.path);
+              },
+              renderRow: ({ node }) => /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-density-2 font-mono text-xs", children: [
+                /* @__PURE__ */ jsx("span", { className: cn("shrink-0", node.kind === "more" ? "text-muted-foreground" : "text-primary"), children: node.kind === "more" ? "…" : node.path }),
+                /* @__PURE__ */ jsx("span", { className: "truncate text-muted-foreground", title: node.summary, children: node.summary })
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(
+              InputField,
+              {
+                "aria-label": "JSONPath expression",
+                value: draft,
+                onChange: setDraft,
+                inputClassName: "font-mono text-xs",
+                placeholder: "$.messages[0].payload"
+              }
+            ),
+            root !== void 0 && /* @__PURE__ */ jsxs(
+              "p",
+              {
+                className: cn(
+                  "flex shrink-0 items-start gap-1.5 rounded-md border px-2 py-1.5 text-xs text-foreground",
+                  rootPending ? "border-amber-600/40 bg-amber-500/10" : "border-border bg-muted/40"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      icon: rootPending ? UiWarningTriangle : UiInfo,
+                      className: cn("mt-0.5 shrink-0", rootPending ? "text-amber-600" : "text-muted-foreground")
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    "This path is rooted inside ",
+                    /* @__PURE__ */ jsx("code", { className: "font-mono", children: root }),
+                    ", a column holding JSON as text.",
+                    " ",
+                    root === source ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "That is already the column's ",
+                      /* @__PURE__ */ jsx("code", { className: "font-mono", children: "Source" }),
+                      "."
+                    ] }) : assignsRoot ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "Applying it sets the column's ",
+                      /* @__PURE__ */ jsx("code", { className: "font-mono", children: "Source" }),
+                      " to",
+                      " ",
+                      /* @__PURE__ */ jsx("code", { className: "font-mono", children: root }),
+                      "."
+                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      "The column's ",
+                      /* @__PURE__ */ jsx("code", { className: "font-mono", children: "Source" }),
+                      " must be set to",
+                      " ",
+                      /* @__PURE__ */ jsx("code", { className: "font-mono", children: root }),
+                      " for it to resolve."
+                    ] })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(ResultPane, { evaluating, result, selected, evaluated: Boolean(evaluate) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function decodeSource(row, source) {
+  if (!source) return row;
+  if (row === null || typeof row !== "object") return void 0;
+  const value = row[source];
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+function ResultPane({
+  evaluating,
+  result,
+  selected,
+  evaluated
+}) {
+  if (!evaluated) {
+    return /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto rounded-md border border-border bg-muted/20 p-2 text-xs", children: selected ? /* @__PURE__ */ jsx(JsonView, { data: selected.value, defaultOpenDepth: 1 }) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Select a node to see its value." }) });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs", children: [
+      (result == null ? void 0 : result.error) ? /* @__PURE__ */ jsx("span", { className: "font-mono text-destructive", children: result.error }) : /* @__PURE__ */ jsx("span", { className: cn(result && result.count === 0 && "text-muted-foreground"), children: evaluating && result === null ? "Evaluating…" : `${(result == null ? void 0 : result.count) ?? 0} match${(result == null ? void 0 : result.count) === 1 ? "" : "es"}` }),
+      result && !result.error && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: result.filterField ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Filterable as ",
+        /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground", children: result.filterField })
+      ] }) : "Selects a set — not filterable unless the column declares filter.field" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto rounded-md border border-border bg-muted/20 p-2 text-xs", children: result && !result.error && result.count > 0 ? /* @__PURE__ */ jsx(JsonView, { data: result.count === 1 ? result.matches[0] : result.matches, defaultOpenDepth: 1 }) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: (result == null ? void 0 : result.error) ? "Fix the expression to see what it selects." : "This path selects nothing in this row." }) })
+  ] });
+}
+export {
+  JSONPathPlayground
+};
+//# sourceMappingURL=JSONPathPlayground.js.map

package/dist/components/JSONPathPlayground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSONPathPlayground.js","sources":["../../src/components/JSONPathPlayground.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { JsonView } from \"../data/JsonView\";\nimport { Tree } from \"../data/Tree\";\nimport { UiInfo, UiWarningTriangle } from \"../icons\";\nimport { Modal } from \"../overlay/Modal\";\nimport { Button } from \"./button\";\nimport { InputField } from \"./InputField\";\nimport { createLazyJSONPathTree, type JSONPathNode } from \"./jsonPathTree\";\n\n/** What evaluating an expression against one row reports back. */\nexport interface JSONPathEvalResult {\n  matches: unknown[];\n  count: number;\n  /** Why the expression could not be evaluated — a parse error is an answer, not a failure. */\n  error?: string;\n  /** Backend field the expression addresses, when it addresses one rather than selecting a set. */\n  filterField?: string;\n}\n\nexport interface JSONPathEvalRequest {\n  jsonpath: string;\n  /** Column the path is rooted at, when it addresses a decoded JSON-encoded column. */\n  source?: string;\n  row: unknown;\n}\n\nexport interface JSONPathPlaygroundProps {\n  open: boolean;\n  onClose: () => void;\n  /** Sampled rows to browse. A row switcher appears once there is more than one. */\n  rows: unknown[];\n  /** The expression the field currently holds. */\n  value: string;\n  /** Commits the drafted expression, along with the column it must be rooted at. */\n  onCommit: (path: string, context: { root?: string }) => void;\n  /**\n   * True when `onCommit` writes the root itself. It only changes what the\n   * dialog says about a path that descends into an encoded column: that the\n   * root will be recorded, rather than instructing the author to go and record\n   * it. Consumers that drop the root leave this unset and keep the warning.\n   */\n  assignsRoot?: boolean;\n  /**\n   * The column the field's path is *already* rooted at — its saved `source`.\n   *\n   * Without it the dialog browses and evaluates from the row while the value it\n   * was opened with is written against a decoded column, so a column that works\n   * perfectly well reports no matches and an author is invited to fix it.\n   */\n  source?: string;\n  /**\n   * Evaluates the draft against the selected row. Without it the dialog is a\n   * browser only — it shows the selected node's own value instead of a match\n   * set, which is all an offline demo can honestly claim.\n   */\n  evaluate?: (request: JSONPathEvalRequest) => Promise<JSONPathEvalResult>;\n  title?: string;\n}\n\nconst EVALUATE_DEBOUNCE_MS = 250;\n\n/**\n * The full-size counterpart to the inline JSONPath dropdown.\n *\n * The dropdown is a preview and caps its walk to stay instant; this browses the\n * row with no depth limit, every array element, and every property — and pairs\n * the tree with what the expression actually selects, evaluated by the backend\n * that will run it, so an author stops finding out at query time.\n */\nexport function JSONPathPlayground({\n  open,\n  onClose,\n  rows,\n  value,\n  onCommit,\n  assignsRoot,\n  source,\n  evaluate,\n  title = \"JSONPath playground\",\n}: JSONPathPlaygroundProps) {\n  const [draft, setDraft] = useState(value);\n  const [rowIndex, setRowIndex] = useState(0);\n  const [selected, setSelected] = useState<JSONPathNode | null>(null);\n  const [result, setResult] = useState<JSONPathEvalResult | null>(null);\n  const [evaluating, setEvaluating] = useState(false);\n\n  // Reopening starts from whatever the field holds now, not from the last\n  // session's draft — the operator may have typed over it in between.\n  useEffect(() => {\n    if (open) {\n      setDraft(value);\n      setRowIndex((current) => (current < rows.length ? current : 0));\n    }\n  }, [open, value, rows.length]);\n\n  const row = rows[rowIndex];\n  // A column with a `source` has its paths written against that column decoded,\n  // not against the row, so that is what the tree has to browse — otherwise the\n  // paths it offers and the path the field holds are in two different languages.\n  const browsed = useMemo(() => decodeSource(row, source), [row, source]);\n  const tree = useMemo(\n    () => createLazyJSONPathTree(browsed, { keyPrefix: `row${rowIndex}:${source ?? \"\"}:` }),\n    [browsed, rowIndex, source],\n  );\n\n  // Reveal the branch the current expression addresses, so the dialog opens\n  // showing the value rather than a collapsed root.\n  useEffect(() => {\n    if (!open) return;\n    setSelected(tree.materializePath(draft) ?? null);\n    // Only on (re)open and row change: re-running this per keystroke would yank\n    // the tree around while the operator is typing.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, tree]);\n\n  // The root belongs to the selection, and hand-editing the expression keeps it:\n  // an operator who descended into an encoded column and is now tuning the path\n  // inside it still means that column. It is never silent — the banner below\n  // names it — and selecting any node outside that subtree clears it. A column\n  // that already declares a source starts there rather than at nothing.\n  const root = selected?.root ?? source;\n  // Only a root nobody has recorded yet is a warning: one the column already\n  // declares, or one this dialog is about to write, is just context.\n  const rootPending = root !== undefined && root !== source && !assignsRoot;\n\n  const latestRequest = useRef(0);\n  useEffect(() => {\n    if (!open || !evaluate) return;\n    const request = (latestRequest.current += 1);\n    setEvaluating(true);\n    const timer = setTimeout(() => {\n      const payload: JSONPathEvalRequest = { jsonpath: draft, row };\n      if (root !== undefined) payload.source = root;\n      void evaluate(payload)\n        .then((next) => {\n          if (latestRequest.current === request) setResult(next);\n        })\n        .catch((error: unknown) => {\n          if (latestRequest.current === request) {\n            setResult({ matches: [], count: 0, error: String(error) });\n          }\n        })\n        .finally(() => {\n          if (latestRequest.current === request) setEvaluating(false);\n        });\n    }, EVALUATE_DEBOUNCE_MS);\n    return () => clearTimeout(timer);\n  }, [open, evaluate, draft, row, root]);\n\n  const commit = () => {\n    onCommit(draft, root === undefined ? {} : { root });\n    onClose();\n  };\n\n  return (\n    <Modal\n      open={open}\n      onClose={onClose}\n      title={title}\n      size=\"2xl\"\n      scrollBody={false}\n      className=\"h-[80vh]\"\n      footer={(\n        <div className=\"flex items-center justify-end gap-2\">\n          <Button variant=\"outline\" onClick={onClose}>Cancel</Button>\n          <Button onClick={commit} disabled={draft.trim() === \"\"}>Use path</Button>\n        </div>\n      )}\n    >\n      <div className=\"flex h-full min-h-0 flex-col gap-3\">\n        {rows.length > 1 && (\n          <label className=\"flex shrink-0 items-center gap-2 text-xs text-muted-foreground\">\n            Sample row\n            <select\n              aria-label=\"Sample row\"\n              value={rowIndex}\n              onChange={(event) => setRowIndex(Number(event.target.value))}\n              className=\"h-7 rounded-md border border-input bg-background px-2 text-xs text-foreground\"\n            >\n              {rows.map((_, index) => (\n                <option key={index} value={index}>{index + 1} of {rows.length}</option>\n              ))}\n            </select>\n            <span>Fields absent from the first row are only visible in the one that carries them.</span>\n          </label>\n        )}\n\n        <div className=\"grid min-h-0 flex-1 gap-3 md:grid-cols-2\">\n          <div className=\"flex min-h-0 flex-col overflow-hidden rounded-md border border-border\">\n            <Tree<JSONPathNode>\n              className=\"min-h-0 flex-1\"\n              ariaLabel=\"JSON paths\"\n              roots={tree.roots}\n              getKey={(node) => node.key}\n              getChildren={tree.getChildren}\n              hasMoreChildren={tree.hasMoreChildren}\n              loadChildren={tree.loadChildren}\n              getSearchText={(node) => `${node.path} ${node.summary}`}\n              defaultOpen={(_node, depth) => depth < 2}\n              selected={selected}\n              revealSelected\n              onSelect={(node) => {\n                if (node.kind === \"more\") return;\n                setSelected(node);\n                setDraft(node.path);\n              }}\n              renderRow={({ node }) => (\n                <span className=\"flex min-w-0 flex-1 items-center gap-density-2 font-mono text-xs\">\n                  <span className={cn(\"shrink-0\", node.kind === \"more\" ? \"text-muted-foreground\" : \"text-primary\")}>\n                    {node.kind === \"more\" ? \"…\" : node.path}\n                  </span>\n                  <span className=\"truncate text-muted-foreground\" title={node.summary}>{node.summary}</span>\n                </span>\n              )}\n            />\n          </div>\n\n          <div className=\"flex min-h-0 flex-col gap-2\">\n            <InputField\n              aria-label=\"JSONPath expression\"\n              value={draft}\n              onChange={setDraft}\n              inputClassName=\"font-mono text-xs\"\n              placeholder=\"$.messages[0].payload\"\n            />\n\n            {root !== undefined && (\n              <p\n                className={cn(\n                  \"flex shrink-0 items-start gap-1.5 rounded-md border px-2 py-1.5 text-xs text-foreground\",\n                  rootPending\n                    ? \"border-amber-600/40 bg-amber-500/10\"\n                    : \"border-border bg-muted/40\",\n                )}\n              >\n                <Icon\n                  icon={rootPending ? UiWarningTriangle : UiInfo}\n                  className={cn(\"mt-0.5 shrink-0\", rootPending ? \"text-amber-600\" : \"text-muted-foreground\")}\n                />\n                <span>\n                  This path is rooted inside <code className=\"font-mono\">{root}</code>, a column holding JSON\n                  as text.{\" \"}\n                  {root === source ? (\n                    <>\n                      That is already the column's <code className=\"font-mono\">Source</code>.\n                    </>\n                  ) : assignsRoot ? (\n                    <>\n                      Applying it sets the column's <code className=\"font-mono\">Source</code> to{\" \"}\n                      <code className=\"font-mono\">{root}</code>.\n                    </>\n                  ) : (\n                    <>\n                      The column's <code className=\"font-mono\">Source</code> must be set to{\" \"}\n                      <code className=\"font-mono\">{root}</code> for it to resolve.\n                    </>\n                  )}\n                </span>\n              </p>\n            )}\n\n            <ResultPane evaluating={evaluating} result={result} selected={selected} evaluated={Boolean(evaluate)} />\n          </div>\n        </div>\n      </div>\n    </Modal>\n  );\n}\n\n/**\n * The value a `source` column's paths are written against: the column itself,\n * decoded when it carries JSON as text — which mirrors what the backend does\n * before it applies the path.\n */\nfunction decodeSource(row: unknown, source: string | undefined): unknown {\n  if (!source) return row;\n  if (row === null || typeof row !== \"object\") return undefined;\n  const value = (row as Record<string, unknown>)[source];\n  if (typeof value !== \"string\") return value;\n  try {\n    return JSON.parse(value) as unknown;\n  } catch {\n    return value;\n  }\n}\n\nfunction ResultPane({\n  evaluating,\n  result,\n  selected,\n  evaluated,\n}: {\n  evaluating: boolean;\n  result: JSONPathEvalResult | null;\n  selected: JSONPathNode | null;\n  evaluated: boolean;\n}) {\n  if (!evaluated) {\n    return (\n      <div className=\"min-h-0 flex-1 overflow-auto rounded-md border border-border bg-muted/20 p-2 text-xs\">\n        {selected ? (\n          <JsonView data={selected.value} defaultOpenDepth={1} />\n        ) : (\n          <p className=\"text-muted-foreground\">Select a node to see its value.</p>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <div className=\"flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1 text-xs\">\n        {result?.error ? (\n          <span className=\"font-mono text-destructive\">{result.error}</span>\n        ) : (\n          <span className={cn(result && result.count === 0 && \"text-muted-foreground\")}>\n            {evaluating && result === null\n              ? \"Evaluating…\"\n              : `${result?.count ?? 0} match${result?.count === 1 ? \"\" : \"es\"}`}\n          </span>\n        )}\n        {result && !result.error && (\n          <span className=\"text-muted-foreground\">\n            {result.filterField\n              ? <>Filterable as <code className=\"font-mono text-foreground\">{result.filterField}</code></>\n              : \"Selects a set — not filterable unless the column declares filter.field\"}\n          </span>\n        )}\n      </div>\n      <div className=\"min-h-0 flex-1 overflow-auto rounded-md border border-border bg-muted/20 p-2 text-xs\">\n        {result && !result.error && result.count > 0 ? (\n          <JsonView data={result.count === 1 ? result.matches[0] : result.matches} defaultOpenDepth={1} />\n        ) : (\n          <p className=\"text-muted-foreground\">\n            {result?.error ? \"Fix the expression to see what it selects.\" : \"This path selects nothing in this row.\"}\n          </p>\n        )}\n      </div>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/JsonSchemaForm.cjs

@@ -5,7 +5,7 @@ const react = require("react");
 const utils = require("../lib/utils.cjs");
 const Icon = require("../data/Icon.cjs");
 const DropdownMenu = require("../overlay/DropdownMenu.cjs");
-const jsonSchemaFormFields = require("./json-schema-form-fields.cjs");
+const jsonSchemaFormLayout = require("./json-schema-form-layout.cjs");
 const jsonSchemaFormErrorDisplay = require("./json-schema-form-error-display.cjs");
 const jsonSchemaFormErrors = require("./json-schema-form-errors.cjs");
 const FormLookupProvider = require("./FormLookupProvider.cjs");
@@ -26,11 +26,13 @@ function resolveFormLayout(layout, inline, modeOverride) {
   const baseMode = (layout == null ? void 0 : layout.mode) ?? (inline ? "inline" : "stacked");
   const mode = modeOverride ?? baseMode;
   const valueMaxWidth = (layout == null ? void 0 : layout.valueMaxWidth) ?? DEFAULT_VALUE_MAX_WIDTH;
-  if (mode !== "inline") return { mode: "stacked", valueMaxWidth };
+  const help = (layout == null ? void 0 : layout.help) ? { help: layout.help } : {};
+  if (mode !== "inline") return { mode: "stacked", valueMaxWidth, ...help };
   return {
     mode: "inline",
     labelMaxWidth: (layout == null ? void 0 : layout.labelMaxWidth) ?? DEFAULT_LABEL_MAX_WIDTH,
-    valueMaxWidth
+    valueMaxWidth,
+    ...help
   };
 }
 function JsonSchemaForm({
@@ -121,11 +123,13 @@ function JsonSchemaForm({
     title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: utils.cn("font-semibold", jsonSchemaFormSize.labelSizeClass[effectiveSize]), children: title }),
     /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormErrorDisplay.FormErrorSummary, { errors: unmatchedErrors }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      jsonSchemaFormFields.FieldsGrid,
+      jsonSchemaFormLayout.FieldsGrid,
       {
         layout: resolvedLayout,
         size: effectiveSize,
         columns: jsonSchemaFormUtils.normalizeColumns(resolvedSchema["x-columns"]),
+        columnMinWidth: jsonSchemaFormUtils.cssLength(resolvedSchema["x-column-min-width"], jsonSchemaFormUtils.DEFAULT_COLUMN_MIN_WIDTH),
+        ...typeof resolvedSchema["x-columns-max-width"] === "string" ? { columnsMaxWidth: resolvedSchema["x-columns-max-width"] } : {},
         ...typeof resolvedSchema["x-classes"] === "string" ? { className: resolvedSchema["x-classes"] } : {},
         children: discKey ? /* @__PURE__ */ jsxRuntime.jsx(
           jsonSchemaFormDiscriminator.DiscriminatedForm,

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-fields\";\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 { normalizeColumns } 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  if (mode !== \"inline\") return { mode: \"stacked\", valueMaxWidth };\n  return {\n    mode: \"inline\",\n    labelMaxWidth: layout?.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n    valueMaxWidth,\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          {...(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-muted-foreground 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","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, 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-muted-foreground 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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"JsonSchemaForm.d.ts","sourceRoot":"","sources":["../../src/components/JsonSchemaForm.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAc,mBAAmB,EAAiB,MAAM,0BAA0B,CAAC;AAgC/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,2CAoHrB"}
+{"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,2CAwHrB"}

package/dist/components/JsonSchemaForm.js

@@ -3,7 +3,7 @@ import { useState, useMemo, useEffect } from "react";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
 import { DropdownMenu } from "../overlay/DropdownMenu.js";
-import { FieldsGrid } from "./json-schema-form-fields.js";
+import { FieldsGrid } from "./json-schema-form-layout.js";
 import { FormErrorSummary } from "./json-schema-form-error-display.js";
 import { unmatchedFormErrors } from "./json-schema-form-errors.js";
 import { FormLookupProvider } from "./FormLookupProvider.js";
@@ -11,7 +11,7 @@ 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 { normalizeColumns } from "./json-schema-form-utils.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";
@@ -24,11 +24,13 @@ function resolveFormLayout(layout, inline, modeOverride) {
   const baseMode = (layout == null ? void 0 : layout.mode) ?? (inline ? "inline" : "stacked");
   const mode = modeOverride ?? baseMode;
   const valueMaxWidth = (layout == null ? void 0 : layout.valueMaxWidth) ?? DEFAULT_VALUE_MAX_WIDTH;
-  if (mode !== "inline") return { mode: "stacked", valueMaxWidth };
+  const help = (layout == null ? void 0 : layout.help) ? { help: layout.help } : {};
+  if (mode !== "inline") return { mode: "stacked", valueMaxWidth, ...help };
   return {
     mode: "inline",
     labelMaxWidth: (layout == null ? void 0 : layout.labelMaxWidth) ?? DEFAULT_LABEL_MAX_WIDTH,
-    valueMaxWidth
+    valueMaxWidth,
+    ...help
   };
 }
 function JsonSchemaForm({
@@ -124,6 +126,8 @@ function JsonSchemaForm({
         layout: resolvedLayout,
         size: effectiveSize,
         columns: normalizeColumns(resolvedSchema["x-columns"]),
+        columnMinWidth: cssLength(resolvedSchema["x-column-min-width"], DEFAULT_COLUMN_MIN_WIDTH),
+        ...typeof resolvedSchema["x-columns-max-width"] === "string" ? { columnsMaxWidth: resolvedSchema["x-columns-max-width"] } : {},
         ...typeof resolvedSchema["x-classes"] === "string" ? { className: resolvedSchema["x-classes"] } : {},
         children: discKey ? /* @__PURE__ */ jsx(
           DiscriminatedForm,

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-fields\";\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 { normalizeColumns } 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  if (mode !== \"inline\") return { mode: \"stacked\", valueMaxWidth };\n  return {\n    mode: \"inline\",\n    labelMaxWidth: layout?.labelMaxWidth ?? DEFAULT_LABEL_MAX_WIDTH,\n    valueMaxWidth,\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          {...(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-muted-foreground 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, 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-muted-foreground 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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"}