@flanksource/clicky-ui 0.3.16 → 0.3.18

package/dist/components/json-schema-form-lookup-tree.cjs

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Icon = require("../data/Icon.cjs");
+const pathTree = require("../lib/path-tree.cjs");
+const utils = require("../lib/utils.cjs");
+const TreePickerField = require("./TreePickerField.cjs");
+const UiClose = require("../icons/components/UiClose.cjs");
+const UiAdd = require("../icons/components/UiAdd.cjs");
+function optionOf(node) {
+  return node.items[0];
+}
+function treeFrom(options, hierarchy) {
+  return pathTree.buildPathTree(
+    options,
+    (option) => pathTree.splitPath(option.label || option.value, hierarchy.delimiters)
+  );
+}
+function toValues(value) {
+  if (!Array.isArray(value)) return [];
+  return value.filter((entry) => typeof entry === "string");
+}
+function OptionRow({ node }) {
+  const option = optionOf(node);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: utils.cn(
+        "min-w-0 flex-1 truncate text-sm",
+        option ? "text-foreground" : "text-muted-foreground"
+      ),
+      children: node.label
+    }
+  );
+}
+function LookupTreeControl({
+  field,
+  fieldId,
+  readOnly,
+  size,
+  options,
+  loading,
+  hierarchy
+}) {
+  var _a;
+  const roots = react.useMemo(
+    () => treeFrom(options, hierarchy),
+    [options, hierarchy]
+  );
+  const multi = ((_a = field.lookup) == null ? void 0 : _a.multi) === true;
+  const placeholder = loading ? "Loading…" : "Select…";
+  if (!multi) {
+    const value = typeof field.value === "string" ? field.value : "";
+    const selected = findByValue(roots, value) ?? null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { id: fieldId, "data-jsf-input": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      TreePickerField.TreePickerField,
+      {
+        roots,
+        getKey: (node) => node.key,
+        getChildren: (node) => node.children,
+        getSearchText: (node) => node.key,
+        defaultOpen: () => false,
+        renderRow: ({ node }) => /* @__PURE__ */ jsxRuntime.jsx(OptionRow, { node }),
+        isSelectable: (node) => optionOf(node) !== void 0,
+        onSelect: (node) => {
+          var _a2;
+          return field.onChange((_a2 = optionOf(node)) == null ? void 0 : _a2.value);
+        },
+        selected,
+        revealSelected: true,
+        ariaLabel: field.label,
+        disabled: readOnly,
+        size,
+        placeholder,
+        ...value ? { label: value } : {}
+      }
+    ) });
+  }
+  const values = toValues(field.value);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: fieldId, "data-jsf-input": true, className: "flex flex-col gap-1.5", children: [
+    values.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap gap-1", children: values.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        className: "inline-flex items-center gap-1 rounded-md border border-border bg-muted/40 py-0.5 pl-2 pr-1 text-xs",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: entry }),
+          !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove ${entry}`,
+              onClick: () => field.onChange(values.filter((kept) => kept !== entry)),
+              className: "rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose, className: "text-[0.7rem]" })
+            }
+          )
+        ]
+      },
+      entry
+    )) }),
+    !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+      TreePickerField.TreePickerField,
+      {
+        roots,
+        getKey: (node) => node.key,
+        getChildren: (node) => node.children,
+        getSearchText: (node) => node.key,
+        defaultOpen: () => false,
+        renderRow: ({ node }) => /* @__PURE__ */ jsxRuntime.jsx(OptionRow, { node }),
+        isSelectable: (node) => {
+          const option = optionOf(node);
+          return option !== void 0 && !values.includes(option.value);
+        },
+        onSelect: (node) => {
+          const option = optionOf(node);
+          if (option) field.onChange([...values, option.value]);
+        },
+        ariaLabel: field.label,
+        size,
+        renderTrigger: ({ triggerRef, toggle }) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            onClick: toggle,
+            className: "inline-flex w-fit items-center gap-1.5 rounded-md border border-dashed border-input px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-input hover:text-foreground",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiAdd.UiAdd, className: "text-[0.7rem]" }),
+              loading ? "Loading…" : `Add ${field.label ?? "value"}`
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function findByValue(nodes, value) {
+  var _a;
+  if (!value) return null;
+  for (const node of nodes) {
+    if (((_a = optionOf(node)) == null ? void 0 : _a.value) === value) return node;
+    const nested = findByValue(node.children, value);
+    if (nested) return nested;
+  }
+  return null;
+}
+exports.LookupTreeControl = LookupTreeControl;
+//# sourceMappingURL=json-schema-form-lookup-tree.cjs.map

package/dist/components/json-schema-form-lookup-tree.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-lookup-tree.cjs","sources":["../../src/components/json-schema-form-lookup-tree.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd, UiClose } from \"../icons\";\nimport {\n  buildPathTree,\n  splitPath,\n  type PathTreeNode,\n} from \"../lib/path-tree\";\nimport { cn } from \"../lib/utils\";\nimport { TreePickerField } from \"./TreePickerField\";\nimport type { FormSize } from \"./json-schema-form-size\";\nimport type {\n  FieldControl,\n  FieldOption,\n  LookupHierarchy,\n} from \"./json-schema-form-types\";\n\ntype OptionNode = PathTreeNode<FieldOption>;\n\n// optionOf returns the option a node commits, or undefined for a pure folder —\n// an intermediate segment (`logs` in `logs.api`) that no option itself names.\nfunction optionOf(node: OptionNode): FieldOption | undefined {\n  return node.items[0];\n}\n\nfunction treeFrom(\n  options: FieldOption[],\n  hierarchy: LookupHierarchy,\n): OptionNode[] {\n  return buildPathTree(options, (option) =>\n    splitPath(option.label || option.value, hierarchy.delimiters),\n  );\n}\n\n// toValues normalises the committed value of a multi lookup. The schema type is\n// an array of strings, but a form mid-edit can hold anything, so anything that\n// is not a usable string is dropped rather than rendered as a broken chip.\nfunction toValues(value: unknown): string[] {\n  if (!Array.isArray(value)) return [];\n  return value.filter((entry): entry is string => typeof entry === \"string\");\n}\n\nfunction OptionRow({ node }: { node: OptionNode }) {\n  const option = optionOf(node);\n  return (\n    <span\n      className={cn(\n        \"min-w-0 flex-1 truncate text-sm\",\n        option ? \"text-foreground\" : \"text-muted-foreground\",\n      )}\n    >\n      {node.label}\n    </span>\n  );\n}\n\n/**\n * LookupTreeControl is the hierarchical form of the entity-reference picker: it\n * browses the fetched options as a tree rather than scrolling one long flat\n * list. Reached when the lookup descriptor declares `hierarchy`.\n *\n * Only the *presentation* is hierarchical — the committed value is always the\n * option's own value, never a path. Folder-only nodes are not selectable, but\n * an option whose label is a prefix of others (a node that is both folder and\n * leaf) stays selectable.\n */\nexport function LookupTreeControl({\n  field,\n  fieldId,\n  readOnly,\n  size,\n  options,\n  loading,\n  hierarchy,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n  options: FieldOption[];\n  loading: boolean;\n  hierarchy: LookupHierarchy;\n}) {\n  const roots = useMemo(\n    () => treeFrom(options, hierarchy),\n    [options, hierarchy],\n  );\n  const multi = field.lookup?.multi === true;\n  const placeholder = loading ? \"Loading…\" : \"Select…\";\n\n  if (!multi) {\n    const value = typeof field.value === \"string\" ? field.value : \"\";\n    const selected =\n      findByValue(roots, value) ?? (null as OptionNode | null);\n    return (\n      <div id={fieldId} data-jsf-input>\n        <TreePickerField<OptionNode>\n          roots={roots}\n          getKey={(node) => node.key}\n          getChildren={(node) => node.children}\n          getSearchText={(node) => node.key}\n          // Every branch starts closed — the tree exists to keep a long option\n          // list scannable, which a pre-expanded first level undoes.\n          defaultOpen={() => false}\n          renderRow={({ node }) => <OptionRow node={node} />}\n          isSelectable={(node) => optionOf(node) !== undefined}\n          onSelect={(node) => field.onChange(optionOf(node)?.value)}\n          selected={selected}\n          revealSelected\n          ariaLabel={field.label}\n          disabled={readOnly}\n          size={size}\n          placeholder={placeholder}\n          {...(value ? { label: value } : {})}\n        />\n      </div>\n    );\n  }\n\n  const values = toValues(field.value);\n  return (\n    <div id={fieldId} data-jsf-input className=\"flex flex-col gap-1.5\">\n      {values.length > 0 && (\n        <ul className=\"flex flex-wrap gap-1\">\n          {values.map((entry) => (\n            <li\n              key={entry}\n              className=\"inline-flex items-center gap-1 rounded-md border border-border bg-muted/40 py-0.5 pl-2 pr-1 text-xs\"\n            >\n              <span className=\"truncate\">{entry}</span>\n              {!readOnly && (\n                <button\n                  type=\"button\"\n                  aria-label={`Remove ${entry}`}\n                  onClick={() =>\n                    field.onChange(values.filter((kept) => kept !== entry))\n                  }\n                  className=\"rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground\"\n                >\n                  <Icon icon={UiClose} className=\"text-[0.7rem]\" />\n                </button>\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n      {!readOnly && (\n        <TreePickerField<OptionNode>\n          roots={roots}\n          getKey={(node) => node.key}\n          getChildren={(node) => node.children}\n          getSearchText={(node) => node.key}\n          // Every branch starts closed — the tree exists to keep a long option\n          // list scannable, which a pre-expanded first level undoes.\n          defaultOpen={() => false}\n          renderRow={({ node }) => <OptionRow node={node} />}\n          // Already-chosen values stay visible but inert, so the list does not\n          // reshuffle underneath the pointer mid-selection.\n          isSelectable={(node) => {\n            const option = optionOf(node);\n            return option !== undefined && !values.includes(option.value);\n          }}\n          onSelect={(node) => {\n            const option = optionOf(node);\n            if (option) field.onChange([...values, option.value]);\n          }}\n          ariaLabel={field.label}\n          size={size}\n          renderTrigger={({ triggerRef, toggle }) => (\n            <button\n              ref={triggerRef}\n              type=\"button\"\n              onClick={toggle}\n              className=\"inline-flex w-fit items-center gap-1.5 rounded-md border border-dashed border-input px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-input hover:text-foreground\"\n            >\n              <Icon icon={UiAdd} className=\"text-[0.7rem]\" />\n              {loading ? \"Loading…\" : `Add ${field.label ?? \"value\"}`}\n            </button>\n          )}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction findByValue(nodes: OptionNode[], value: string): OptionNode | null {\n  if (!value) return null;\n  for (const node of nodes) {\n    if (optionOf(node)?.value === value) return node;\n    const nested = findByValue(node.children, value);\n    if (nested) return nested;\n  }\n  return null;\n}\n"],"names":["buildPathTree","splitPath","jsx","cn","useMemo","TreePickerField","_a","jsxs","Icon","UiClose","UiAdd"],"mappings":"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"}

package/dist/components/json-schema-form-lookup-tree.d.ts

@@ -0,0 +1,22 @@
+import { FormSize } from './json-schema-form-size';
+import { FieldControl, FieldOption, LookupHierarchy } from './json-schema-form-types';
+/**
+ * LookupTreeControl is the hierarchical form of the entity-reference picker: it
+ * browses the fetched options as a tree rather than scrolling one long flat
+ * list. Reached when the lookup descriptor declares `hierarchy`.
+ *
+ * Only the *presentation* is hierarchical — the committed value is always the
+ * option's own value, never a path. Folder-only nodes are not selectable, but
+ * an option whose label is a prefix of others (a node that is both folder and
+ * leaf) stays selectable.
+ */
+export declare function LookupTreeControl({ field, fieldId, readOnly, size, options, loading, hierarchy, }: {
+    field: FieldControl;
+    fieldId: string;
+    readOnly: boolean;
+    size: FormSize;
+    options: FieldOption[];
+    loading: boolean;
+    hierarchy: LookupHierarchy;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=json-schema-form-lookup-tree.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-lookup-tree.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-lookup-tree.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,eAAe,EAChB,MAAM,0BAA0B,CAAC;AAyClC;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,OAAO,EACP,SAAS,GACV,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,eAAe,CAAC;CAC5B,2CAqGA"}

package/dist/components/json-schema-form-lookup-tree.js

@@ -0,0 +1,149 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Icon } from "../data/Icon.js";
+import { buildPathTree, splitPath } from "../lib/path-tree.js";
+import { cn } from "../lib/utils.js";
+import { TreePickerField } from "./TreePickerField.js";
+import { UiClose } from "../icons/components/UiClose.js";
+import { UiAdd } from "../icons/components/UiAdd.js";
+function optionOf(node) {
+  return node.items[0];
+}
+function treeFrom(options, hierarchy) {
+  return buildPathTree(
+    options,
+    (option) => splitPath(option.label || option.value, hierarchy.delimiters)
+  );
+}
+function toValues(value) {
+  if (!Array.isArray(value)) return [];
+  return value.filter((entry) => typeof entry === "string");
+}
+function OptionRow({ node }) {
+  const option = optionOf(node);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "min-w-0 flex-1 truncate text-sm",
+        option ? "text-foreground" : "text-muted-foreground"
+      ),
+      children: node.label
+    }
+  );
+}
+function LookupTreeControl({
+  field,
+  fieldId,
+  readOnly,
+  size,
+  options,
+  loading,
+  hierarchy
+}) {
+  var _a;
+  const roots = useMemo(
+    () => treeFrom(options, hierarchy),
+    [options, hierarchy]
+  );
+  const multi = ((_a = field.lookup) == null ? void 0 : _a.multi) === true;
+  const placeholder = loading ? "Loading…" : "Select…";
+  if (!multi) {
+    const value = typeof field.value === "string" ? field.value : "";
+    const selected = findByValue(roots, value) ?? null;
+    return /* @__PURE__ */ jsx("div", { id: fieldId, "data-jsf-input": true, children: /* @__PURE__ */ jsx(
+      TreePickerField,
+      {
+        roots,
+        getKey: (node) => node.key,
+        getChildren: (node) => node.children,
+        getSearchText: (node) => node.key,
+        defaultOpen: () => false,
+        renderRow: ({ node }) => /* @__PURE__ */ jsx(OptionRow, { node }),
+        isSelectable: (node) => optionOf(node) !== void 0,
+        onSelect: (node) => {
+          var _a2;
+          return field.onChange((_a2 = optionOf(node)) == null ? void 0 : _a2.value);
+        },
+        selected,
+        revealSelected: true,
+        ariaLabel: field.label,
+        disabled: readOnly,
+        size,
+        placeholder,
+        ...value ? { label: value } : {}
+      }
+    ) });
+  }
+  const values = toValues(field.value);
+  return /* @__PURE__ */ jsxs("div", { id: fieldId, "data-jsf-input": true, className: "flex flex-col gap-1.5", children: [
+    values.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-1", children: values.map((entry) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "inline-flex items-center gap-1 rounded-md border border-border bg-muted/40 py-0.5 pl-2 pr-1 text-xs",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: entry }),
+          !readOnly && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove ${entry}`,
+              onClick: () => field.onChange(values.filter((kept) => kept !== entry)),
+              className: "rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
+              children: /* @__PURE__ */ jsx(Icon, { icon: UiClose, className: "text-[0.7rem]" })
+            }
+          )
+        ]
+      },
+      entry
+    )) }),
+    !readOnly && /* @__PURE__ */ jsx(
+      TreePickerField,
+      {
+        roots,
+        getKey: (node) => node.key,
+        getChildren: (node) => node.children,
+        getSearchText: (node) => node.key,
+        defaultOpen: () => false,
+        renderRow: ({ node }) => /* @__PURE__ */ jsx(OptionRow, { node }),
+        isSelectable: (node) => {
+          const option = optionOf(node);
+          return option !== void 0 && !values.includes(option.value);
+        },
+        onSelect: (node) => {
+          const option = optionOf(node);
+          if (option) field.onChange([...values, option.value]);
+        },
+        ariaLabel: field.label,
+        size,
+        renderTrigger: ({ triggerRef, toggle }) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            onClick: toggle,
+            className: "inline-flex w-fit items-center gap-1.5 rounded-md border border-dashed border-input px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-input hover:text-foreground",
+            children: [
+              /* @__PURE__ */ jsx(Icon, { icon: UiAdd, className: "text-[0.7rem]" }),
+              loading ? "Loading…" : `Add ${field.label ?? "value"}`
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function findByValue(nodes, value) {
+  var _a;
+  if (!value) return null;
+  for (const node of nodes) {
+    if (((_a = optionOf(node)) == null ? void 0 : _a.value) === value) return node;
+    const nested = findByValue(node.children, value);
+    if (nested) return nested;
+  }
+  return null;
+}
+export {
+  LookupTreeControl
+};
+//# sourceMappingURL=json-schema-form-lookup-tree.js.map

package/dist/components/json-schema-form-lookup-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-lookup-tree.js","sources":["../../src/components/json-schema-form-lookup-tree.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd, UiClose } from \"../icons\";\nimport {\n  buildPathTree,\n  splitPath,\n  type PathTreeNode,\n} from \"../lib/path-tree\";\nimport { cn } from \"../lib/utils\";\nimport { TreePickerField } from \"./TreePickerField\";\nimport type { FormSize } from \"./json-schema-form-size\";\nimport type {\n  FieldControl,\n  FieldOption,\n  LookupHierarchy,\n} from \"./json-schema-form-types\";\n\ntype OptionNode = PathTreeNode<FieldOption>;\n\n// optionOf returns the option a node commits, or undefined for a pure folder —\n// an intermediate segment (`logs` in `logs.api`) that no option itself names.\nfunction optionOf(node: OptionNode): FieldOption | undefined {\n  return node.items[0];\n}\n\nfunction treeFrom(\n  options: FieldOption[],\n  hierarchy: LookupHierarchy,\n): OptionNode[] {\n  return buildPathTree(options, (option) =>\n    splitPath(option.label || option.value, hierarchy.delimiters),\n  );\n}\n\n// toValues normalises the committed value of a multi lookup. The schema type is\n// an array of strings, but a form mid-edit can hold anything, so anything that\n// is not a usable string is dropped rather than rendered as a broken chip.\nfunction toValues(value: unknown): string[] {\n  if (!Array.isArray(value)) return [];\n  return value.filter((entry): entry is string => typeof entry === \"string\");\n}\n\nfunction OptionRow({ node }: { node: OptionNode }) {\n  const option = optionOf(node);\n  return (\n    <span\n      className={cn(\n        \"min-w-0 flex-1 truncate text-sm\",\n        option ? \"text-foreground\" : \"text-muted-foreground\",\n      )}\n    >\n      {node.label}\n    </span>\n  );\n}\n\n/**\n * LookupTreeControl is the hierarchical form of the entity-reference picker: it\n * browses the fetched options as a tree rather than scrolling one long flat\n * list. Reached when the lookup descriptor declares `hierarchy`.\n *\n * Only the *presentation* is hierarchical — the committed value is always the\n * option's own value, never a path. Folder-only nodes are not selectable, but\n * an option whose label is a prefix of others (a node that is both folder and\n * leaf) stays selectable.\n */\nexport function LookupTreeControl({\n  field,\n  fieldId,\n  readOnly,\n  size,\n  options,\n  loading,\n  hierarchy,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n  options: FieldOption[];\n  loading: boolean;\n  hierarchy: LookupHierarchy;\n}) {\n  const roots = useMemo(\n    () => treeFrom(options, hierarchy),\n    [options, hierarchy],\n  );\n  const multi = field.lookup?.multi === true;\n  const placeholder = loading ? \"Loading…\" : \"Select…\";\n\n  if (!multi) {\n    const value = typeof field.value === \"string\" ? field.value : \"\";\n    const selected =\n      findByValue(roots, value) ?? (null as OptionNode | null);\n    return (\n      <div id={fieldId} data-jsf-input>\n        <TreePickerField<OptionNode>\n          roots={roots}\n          getKey={(node) => node.key}\n          getChildren={(node) => node.children}\n          getSearchText={(node) => node.key}\n          // Every branch starts closed — the tree exists to keep a long option\n          // list scannable, which a pre-expanded first level undoes.\n          defaultOpen={() => false}\n          renderRow={({ node }) => <OptionRow node={node} />}\n          isSelectable={(node) => optionOf(node) !== undefined}\n          onSelect={(node) => field.onChange(optionOf(node)?.value)}\n          selected={selected}\n          revealSelected\n          ariaLabel={field.label}\n          disabled={readOnly}\n          size={size}\n          placeholder={placeholder}\n          {...(value ? { label: value } : {})}\n        />\n      </div>\n    );\n  }\n\n  const values = toValues(field.value);\n  return (\n    <div id={fieldId} data-jsf-input className=\"flex flex-col gap-1.5\">\n      {values.length > 0 && (\n        <ul className=\"flex flex-wrap gap-1\">\n          {values.map((entry) => (\n            <li\n              key={entry}\n              className=\"inline-flex items-center gap-1 rounded-md border border-border bg-muted/40 py-0.5 pl-2 pr-1 text-xs\"\n            >\n              <span className=\"truncate\">{entry}</span>\n              {!readOnly && (\n                <button\n                  type=\"button\"\n                  aria-label={`Remove ${entry}`}\n                  onClick={() =>\n                    field.onChange(values.filter((kept) => kept !== entry))\n                  }\n                  className=\"rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground\"\n                >\n                  <Icon icon={UiClose} className=\"text-[0.7rem]\" />\n                </button>\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n      {!readOnly && (\n        <TreePickerField<OptionNode>\n          roots={roots}\n          getKey={(node) => node.key}\n          getChildren={(node) => node.children}\n          getSearchText={(node) => node.key}\n          // Every branch starts closed — the tree exists to keep a long option\n          // list scannable, which a pre-expanded first level undoes.\n          defaultOpen={() => false}\n          renderRow={({ node }) => <OptionRow node={node} />}\n          // Already-chosen values stay visible but inert, so the list does not\n          // reshuffle underneath the pointer mid-selection.\n          isSelectable={(node) => {\n            const option = optionOf(node);\n            return option !== undefined && !values.includes(option.value);\n          }}\n          onSelect={(node) => {\n            const option = optionOf(node);\n            if (option) field.onChange([...values, option.value]);\n          }}\n          ariaLabel={field.label}\n          size={size}\n          renderTrigger={({ triggerRef, toggle }) => (\n            <button\n              ref={triggerRef}\n              type=\"button\"\n              onClick={toggle}\n              className=\"inline-flex w-fit items-center gap-1.5 rounded-md border border-dashed border-input px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-input hover:text-foreground\"\n            >\n              <Icon icon={UiAdd} className=\"text-[0.7rem]\" />\n              {loading ? \"Loading…\" : `Add ${field.label ?? \"value\"}`}\n            </button>\n          )}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction findByValue(nodes: OptionNode[], value: string): OptionNode | null {\n  if (!value) return null;\n  for (const node of nodes) {\n    if (optionOf(node)?.value === value) return node;\n    const nested = findByValue(node.children, value);\n    if (nested) return nested;\n  }\n  return null;\n}\n"],"names":["_a"],"mappings":"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"}

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

@@ -7,7 +7,7 @@ const Icon = require("../data/Icon.cjs");
 const button = require("./button.cjs");
 const Combobox = require("./Combobox.cjs");
 const jsonSchemaFormUtils = require("./json-schema-form-utils.cjs");
-const jsonSchemaFormFields = require("./json-schema-form-fields.cjs");
+const jsonSchemaFormLayout = require("./json-schema-form-layout.cjs");
 const jsonSchemaFormErrors = require("./json-schema-form-errors.cjs");
 const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
 const UiTrash = require("../icons/components/UiTrash.cjs");
@@ -20,15 +20,22 @@ function ObjectControl({ field, ctx }) {
     ...field.objectRequired ? { required: field.objectRequired } : {},
     ...Array.isArray(field.schema.allOf) ? { allOf: field.schema.allOf } : {},
     ...Array.isArray(field.schema["x-order"]) ? { "x-order": field.schema["x-order"] } : {},
-    ...typeof field.schema["x-columns"] === "number" ? { "x-columns": field.schema["x-columns"] } : {},
+    // Every object-level layout keyword must be copied here or it works at the
+    // top level and silently dies one level down — which is exactly where these
+    // matter (an array item's body is a nested object).
+    ...typeof field.schema["x-columns"] === "number" || field.schema["x-columns"] === "auto" ? { "x-columns": field.schema["x-columns"] } : {},
+    ...typeof field.schema["x-column-min-width"] === "string" ? { "x-column-min-width": field.schema["x-column-min-width"] } : {},
+    ...typeof field.schema["x-columns-max-width"] === "string" ? { "x-columns-max-width": field.schema["x-columns-max-width"] } : {},
     ...typeof field.schema["x-classes"] === "string" ? { "x-classes": field.schema["x-classes"] } : {}
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    jsonSchemaFormFields.FieldsGrid,
+    jsonSchemaFormLayout.FieldsGrid,
     {
       layout: ctx.layout,
       size: ctx.size,
       columns: jsonSchemaFormUtils.normalizeColumns(subSchema["x-columns"]),
+      columnMinWidth: jsonSchemaFormUtils.cssLength(subSchema["x-column-min-width"], jsonSchemaFormUtils.DEFAULT_COLUMN_MIN_WIDTH),
+      ...typeof subSchema["x-columns-max-width"] === "string" ? { columnsMaxWidth: subSchema["x-columns-max-width"] } : {},
       ...typeof subSchema["x-classes"] === "string" ? { className: subSchema["x-classes"] } : {},
       children: ctx.render.renderObjectFields(subSchema, obj, (next) => field.onChange(next), {
         ...ctx,
@@ -102,7 +109,7 @@ function StringMapControl({ field, ctx }) {
       /* @__PURE__ */ jsxRuntime.jsx(
         "label",
         {
-          htmlFor: jsonSchemaFormUtils.fieldInputId(key, childCtx.idPrefix),
+          htmlFor: jsonSchemaFormUtils.fieldInputId(jsonSchemaFormErrors.appendInstancePath(ctx.instancePath, key), childCtx.idPrefix),
           className: "truncate text-xs text-muted-foreground",
           title: key,
           children: key

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-object.cjs","sources":["../../src/components/json-schema-form-object.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd, UiTrash } from \"../icons\";\nimport { Button } from \"./button\";\nimport { Combobox } from \"./Combobox\";\nimport type { FieldControl, JsonSchemaObject, JsonSchemaProperty, RenderContext } from \"./json-schema-form-types\";\nimport { fieldInputId, inputClass, isPlainObject, keyPickerOptions, normalizeColumns } from \"./json-schema-form-utils\";\nimport { FieldsGrid } from \"./json-schema-form-fields\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport { controlHeightClass, fieldInnerGapClass, inputSizeClass } from \"./json-schema-form-size\";\n\n// ObjectControl renders a nested structured object as a sub-form: its own\n// properties, required markers, if/then, soft errors — all via the shared\n// recursive renderer (ctx.render), so pre/post extensions apply at this depth too.\nexport function ObjectControl({ field, ctx }: { field: FieldControl; ctx: RenderContext }) {\n  const obj = isPlainObject(field.value) ? (field.value as Record<string, unknown>) : {};\n  const subSchema: JsonSchemaObject = {\n    type: \"object\",\n    properties: field.objectProperties ?? {},\n    ...(field.objectRequired ? { required: field.objectRequired } : {}),\n    ...(Array.isArray(field.schema.allOf) ? { allOf: field.schema.allOf } : {}),\n    ...(Array.isArray(field.schema[\"x-order\"]) ? { \"x-order\": field.schema[\"x-order\"] } : {}),\n    ...(typeof field.schema[\"x-columns\"] === \"number\" ? { \"x-columns\": field.schema[\"x-columns\"] } : {}),\n    ...(typeof field.schema[\"x-classes\"] === \"string\" ? { \"x-classes\": field.schema[\"x-classes\"] } : {}),\n  };\n  // No border/box: nested objects render as flat headed sections (see\n  // ObjectSection in renderFieldRow) rather than progressively indented\n  // sub-forms, so deep schemas stay readable as a single column.\n  // A read-only object marks its whole subtree non-editable: recurse with\n  // form-level readOnly on so child inputs are disabled (and any child the\n  // schema marks readOnly still renders as a value span).\n  return (\n    <FieldsGrid\n      layout={ctx.layout}\n      size={ctx.size}\n      columns={normalizeColumns(subSchema[\"x-columns\"])}\n      {...(typeof subSchema[\"x-classes\"] === \"string\" ? { className: subSchema[\"x-classes\"] } : {})}\n    >\n      {ctx.render.renderObjectFields(subSchema, obj, (next) => field.onChange(next), {\n        ...ctx,\n        readOnly: ctx.readOnly || field.readOnly === true,\n        depth: ctx.depth + 1,\n      })}\n    </FieldsGrid>\n  );\n}\n\n// StringMapControl edits an object as key/value rows. Known properties (from the\n// schema) render first with derived value controls; unknown keys render as\n// editable key/value pairs. \"Add field\" appears when extra keys are allowed.\n// Values recurse through the shared pipeline, so a value that is itself an object\n// or array renders structurally and pre/post extensions apply to it.\nexport function StringMapControl({ field, ctx }: { field: FieldControl; ctx: RenderContext }) {\n  // A read-only map marks its whole subtree non-editable: no rename/remove/add\n  // and value inputs disabled.\n  const readOnly = ctx.readOnly || field.readOnly === true;\n  const map = isPlainObject(field.value) ? (field.value as Record<string, unknown>) : {};\n  const known = field.knownProperties ?? {};\n  const knownKeys = Object.keys(known);\n  const extraKeys = Object.keys(map).filter((k) => !(k in known));\n  const childCtx: RenderContext = { ...ctx, readOnly, depth: ctx.depth + 1 };\n  // What the map key IS (e.g. \"Address Role\"), from the key-constraint schema.\n  const pn = field.schema.propertyNames as JsonSchemaProperty | undefined;\n  const keyTitle = typeof pn?.title === \"string\" && pn.title ? pn.title : undefined;\n\n  // valueSchemaForKey picks an entry's value schema: the first patternProperties\n  // entry whose regex matches the key, else the `additionalProperties` schema,\n  // else a bare string. Lets the value form vary by key (e.g. House vs Apartment).\n  function valueSchemaForKey(key: string): JsonSchemaProperty {\n    for (const { pattern, schema } of field.valuePatternSchemas ?? []) {\n      let re: RegExp | undefined;\n      try {\n        re = new RegExp(pattern);\n      } catch {\n        re = undefined; // a malformed pattern simply never matches\n      }\n      if (re?.test(key)) return schema;\n    }\n    return field.valueSchema ?? { type: \"string\" };\n  }\n\n  // When the entry value opts into a stacked layout (`x-layout: \"stack\"`), the\n  // key+value render as one full-width stacked unit instead of a key column\n  // beside the value. Resolved per key, since pattern schemas may differ.\n  function entryIsStacked(key: string): boolean {\n    return valueSchemaForKey(key)[\"x-layout\"] === \"stack\";\n  }\n\n  function setEntry(key: string, next: unknown) {\n    field.onChange({ ...map, [key]: next });\n  }\n  function renameEntry(oldKey: string, newKey: string) {\n    if (newKey === oldKey) return;\n    const next: Record<string, unknown> = {};\n    for (const [k, v] of Object.entries(map)) next[k === oldKey ? newKey : k] = v;\n    field.onChange(next);\n  }\n  function removeEntry(key: string) {\n    const next = { ...map };\n    delete next[key];\n    field.onChange(next);\n  }\n  function addEntry() {\n    if (\"\" in map) return;\n    field.onChange({ ...map, \"\": \"\" });\n  }\n\n  function valueControlFor(key: string, valueSchema: JsonSchemaProperty): ReactNode {\n    const nodes = ctx.render.renderFieldNodes(\n      {\n        key,\n        prop: valueSchema,\n        required: false,\n        value: map[key] ?? \"\",\n        onChange: (next) => setEntry(key, next),\n        instancePath: appendInstancePath(ctx.instancePath, key),\n      },\n      childCtx,\n    );\n    return nodes?.value ?? null;\n  }\n\n  // valueControlForKey resolves the per-key value schema (patternProperties /\n  // additionalProperties) before rendering, so the form varies by key.\n  function valueControlForKey(key: string): ReactNode {\n    return valueControlFor(key, valueSchemaForKey(key));\n  }\n\n  return (\n    <div className={cn(\"flex flex-col rounded-md border border-input p-2\", fieldInnerGapClass[childCtx.size])}>\n      {knownKeys.map((key) => (\n        <div key={`known-${key}`} className=\"grid grid-cols-[10rem_1fr] items-center gap-2\">\n          <label\n            htmlFor={fieldInputId(key, childCtx.idPrefix)}\n            className=\"truncate text-xs text-muted-foreground\"\n            title={key}\n          >\n            {key}\n          </label>\n          <div className=\"min-w-0\">{valueControlFor(key, known[key] ?? { type: \"string\" })}</div>\n        </div>\n      ))}\n      {extraKeys.map((key) => {\n        const keyControl = field.keyOptions ? (\n          <Combobox\n            options={keyPickerOptions(field.keyOptions, extraKeys, key)}\n            value={key}\n            disabled={readOnly}\n            size={childCtx.size}\n            allowCustomValue={false}\n            onChange={(next) => renameEntry(key, next)}\n            placeholder=\"Select…\"\n          />\n        ) : (\n          <input\n            type=\"text\"\n            aria-label=\"Field name\"\n            className={cn(inputClass(childCtx.size), \"font-mono\")}\n            value={key}\n            disabled={readOnly}\n            onChange={(e) => renameEntry(key, e.target.value)}\n          />\n        );\n        const removeButton = !readOnly ? (\n          <button\n            type=\"button\"\n            aria-label={`Remove ${key}`}\n            className={cn(\n              \"inline-flex aspect-square shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground\",\n              controlHeightClass[childCtx.size],\n            )}\n            onClick={() => removeEntry(key)}\n          >\n            <Icon icon={UiTrash} className=\"text-sm\" />\n          </button>\n        ) : null;\n        // When the value is stacked (`x-layout: \"stack\"` on the entry schema),\n        // the key joins the stack: it sits full-width above its value as one\n        // unit, rather than cramped in a fixed key column beside it. The key\n        // picker is labelled from `propertyNames.title` so a constrained key\n        // (e.g. an AsCode role) says what it is.\n        if (entryIsStacked(key)) {\n          return (\n            <div key={`extra-${key}`} className=\"space-y-1.5 rounded-md border border-input p-2\">\n              {keyTitle && <span className=\"block text-xs font-medium text-muted-foreground\">{keyTitle}</span>}\n              <div className=\"flex items-center gap-2\">\n                <div className=\"min-w-0 flex-1\">{keyControl}</div>\n                {removeButton}\n              </div>\n              <div className=\"min-w-0\">{valueControlForKey(key)}</div>\n            </div>\n          );\n        }\n        return (\n          <div key={`extra-${key}`} className=\"grid grid-cols-[10rem_1fr_auto] items-center gap-2\">\n            {keyControl}\n            <div className=\"min-w-0\">{valueControlForKey(key)}</div>\n            {removeButton}\n          </div>\n        );\n      })}\n      {!readOnly && field.allowExtraKeys !== false && (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          onClick={addEntry}\n          className={cn(\"gap-1.5\", inputSizeClass[childCtx.size])}\n        >\n          <Icon icon={UiAdd} className=\"text-sm\" />\n          Add field\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"names":["isPlainObject","jsx","FieldsGrid","normalizeColumns","appendInstancePath","jsxs","cn","fieldInnerGapClass","fieldInputId","Combobox","keyPickerOptions","inputClass","controlHeightClass","Icon","UiTrash","Button","inputSizeClass","UiAdd"],"mappings":"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"}
+{"version":3,"file":"json-schema-form-object.cjs","sources":["../../src/components/json-schema-form-object.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd, UiTrash } from \"../icons\";\nimport { Button } from \"./button\";\nimport { Combobox } from \"./Combobox\";\nimport type { FieldControl, JsonSchemaObject, JsonSchemaProperty, RenderContext } from \"./json-schema-form-types\";\nimport {\n  cssLength,\n  DEFAULT_COLUMN_MIN_WIDTH,\n  fieldInputId,\n  inputClass,\n  isPlainObject,\n  keyPickerOptions,\n  normalizeColumns,\n} from \"./json-schema-form-utils\";\nimport { FieldsGrid } from \"./json-schema-form-layout\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport { controlHeightClass, fieldInnerGapClass, inputSizeClass } from \"./json-schema-form-size\";\n\n// ObjectControl renders a nested structured object as a sub-form: its own\n// properties, required markers, if/then, soft errors — all via the shared\n// recursive renderer (ctx.render), so pre/post extensions apply at this depth too.\nexport function ObjectControl({ field, ctx }: { field: FieldControl; ctx: RenderContext }) {\n  const obj = isPlainObject(field.value) ? (field.value as Record<string, unknown>) : {};\n  const subSchema: JsonSchemaObject = {\n    type: \"object\",\n    properties: field.objectProperties ?? {},\n    ...(field.objectRequired ? { required: field.objectRequired } : {}),\n    ...(Array.isArray(field.schema.allOf) ? { allOf: field.schema.allOf } : {}),\n    ...(Array.isArray(field.schema[\"x-order\"]) ? { \"x-order\": field.schema[\"x-order\"] } : {}),\n    // Every object-level layout keyword must be copied here or it works at the\n    // top level and silently dies one level down — which is exactly where these\n    // matter (an array item's body is a nested object).\n    ...(typeof field.schema[\"x-columns\"] === \"number\" || field.schema[\"x-columns\"] === \"auto\"\n      ? { \"x-columns\": field.schema[\"x-columns\"] }\n      : {}),\n    ...(typeof field.schema[\"x-column-min-width\"] === \"string\"\n      ? { \"x-column-min-width\": field.schema[\"x-column-min-width\"] }\n      : {}),\n    ...(typeof field.schema[\"x-columns-max-width\"] === \"string\"\n      ? { \"x-columns-max-width\": field.schema[\"x-columns-max-width\"] }\n      : {}),\n    ...(typeof field.schema[\"x-classes\"] === \"string\" ? { \"x-classes\": field.schema[\"x-classes\"] } : {}),\n  };\n  // No border/box: nested objects render as flat headed sections (see\n  // ObjectSection in renderFieldRow) rather than progressively indented\n  // sub-forms, so deep schemas stay readable as a single column.\n  // A read-only object marks its whole subtree non-editable: recurse with\n  // form-level readOnly on so child inputs are disabled (and any child the\n  // schema marks readOnly still renders as a value span).\n  return (\n    <FieldsGrid\n      layout={ctx.layout}\n      size={ctx.size}\n      columns={normalizeColumns(subSchema[\"x-columns\"])}\n      columnMinWidth={cssLength(subSchema[\"x-column-min-width\"], DEFAULT_COLUMN_MIN_WIDTH)}\n      {...(typeof subSchema[\"x-columns-max-width\"] === \"string\"\n        ? { columnsMaxWidth: subSchema[\"x-columns-max-width\"] }\n        : {})}\n      {...(typeof subSchema[\"x-classes\"] === \"string\" ? { className: subSchema[\"x-classes\"] } : {})}\n    >\n      {ctx.render.renderObjectFields(subSchema, obj, (next) => field.onChange(next), {\n        ...ctx,\n        readOnly: ctx.readOnly || field.readOnly === true,\n        depth: ctx.depth + 1,\n      })}\n    </FieldsGrid>\n  );\n}\n\n// StringMapControl edits an object as key/value rows. Known properties (from the\n// schema) render first with derived value controls; unknown keys render as\n// editable key/value pairs. \"Add field\" appears when extra keys are allowed.\n// Values recurse through the shared pipeline, so a value that is itself an object\n// or array renders structurally and pre/post extensions apply to it.\nexport function StringMapControl({ field, ctx }: { field: FieldControl; ctx: RenderContext }) {\n  // A read-only map marks its whole subtree non-editable: no rename/remove/add\n  // and value inputs disabled.\n  const readOnly = ctx.readOnly || field.readOnly === true;\n  const map = isPlainObject(field.value) ? (field.value as Record<string, unknown>) : {};\n  const known = field.knownProperties ?? {};\n  const knownKeys = Object.keys(known);\n  const extraKeys = Object.keys(map).filter((k) => !(k in known));\n  const childCtx: RenderContext = { ...ctx, readOnly, depth: ctx.depth + 1 };\n  // What the map key IS (e.g. \"Address Role\"), from the key-constraint schema.\n  const pn = field.schema.propertyNames as JsonSchemaProperty | undefined;\n  const keyTitle = typeof pn?.title === \"string\" && pn.title ? pn.title : undefined;\n\n  // valueSchemaForKey picks an entry's value schema: the first patternProperties\n  // entry whose regex matches the key, else the `additionalProperties` schema,\n  // else a bare string. Lets the value form vary by key (e.g. House vs Apartment).\n  function valueSchemaForKey(key: string): JsonSchemaProperty {\n    for (const { pattern, schema } of field.valuePatternSchemas ?? []) {\n      let re: RegExp | undefined;\n      try {\n        re = new RegExp(pattern);\n      } catch {\n        re = undefined; // a malformed pattern simply never matches\n      }\n      if (re?.test(key)) return schema;\n    }\n    return field.valueSchema ?? { type: \"string\" };\n  }\n\n  // When the entry value opts into a stacked layout (`x-layout: \"stack\"`), the\n  // key+value render as one full-width stacked unit instead of a key column\n  // beside the value. Resolved per key, since pattern schemas may differ.\n  function entryIsStacked(key: string): boolean {\n    return valueSchemaForKey(key)[\"x-layout\"] === \"stack\";\n  }\n\n  function setEntry(key: string, next: unknown) {\n    field.onChange({ ...map, [key]: next });\n  }\n  function renameEntry(oldKey: string, newKey: string) {\n    if (newKey === oldKey) return;\n    const next: Record<string, unknown> = {};\n    for (const [k, v] of Object.entries(map)) next[k === oldKey ? newKey : k] = v;\n    field.onChange(next);\n  }\n  function removeEntry(key: string) {\n    const next = { ...map };\n    delete next[key];\n    field.onChange(next);\n  }\n  function addEntry() {\n    if (\"\" in map) return;\n    field.onChange({ ...map, \"\": \"\" });\n  }\n\n  function valueControlFor(key: string, valueSchema: JsonSchemaProperty): ReactNode {\n    const nodes = ctx.render.renderFieldNodes(\n      {\n        key,\n        prop: valueSchema,\n        required: false,\n        value: map[key] ?? \"\",\n        onChange: (next) => setEntry(key, next),\n        instancePath: appendInstancePath(ctx.instancePath, key),\n      },\n      childCtx,\n    );\n    return nodes?.value ?? null;\n  }\n\n  // valueControlForKey resolves the per-key value schema (patternProperties /\n  // additionalProperties) before rendering, so the form varies by key.\n  function valueControlForKey(key: string): ReactNode {\n    return valueControlFor(key, valueSchemaForKey(key));\n  }\n\n  return (\n    <div className={cn(\"flex flex-col rounded-md border border-input p-2\", fieldInnerGapClass[childCtx.size])}>\n      {knownKeys.map((key) => (\n        <div key={`known-${key}`} className=\"grid grid-cols-[10rem_1fr] items-center gap-2\">\n          <label\n            htmlFor={fieldInputId(appendInstancePath(ctx.instancePath, key), childCtx.idPrefix)}\n            className=\"truncate text-xs text-muted-foreground\"\n            title={key}\n          >\n            {key}\n          </label>\n          <div className=\"min-w-0\">{valueControlFor(key, known[key] ?? { type: \"string\" })}</div>\n        </div>\n      ))}\n      {extraKeys.map((key) => {\n        const keyControl = field.keyOptions ? (\n          <Combobox\n            options={keyPickerOptions(field.keyOptions, extraKeys, key)}\n            value={key}\n            disabled={readOnly}\n            size={childCtx.size}\n            allowCustomValue={false}\n            onChange={(next) => renameEntry(key, next)}\n            placeholder=\"Select…\"\n          />\n        ) : (\n          <input\n            type=\"text\"\n            aria-label=\"Field name\"\n            className={cn(inputClass(childCtx.size), \"font-mono\")}\n            value={key}\n            disabled={readOnly}\n            onChange={(e) => renameEntry(key, e.target.value)}\n          />\n        );\n        const removeButton = !readOnly ? (\n          <button\n            type=\"button\"\n            aria-label={`Remove ${key}`}\n            className={cn(\n              \"inline-flex aspect-square shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground\",\n              controlHeightClass[childCtx.size],\n            )}\n            onClick={() => removeEntry(key)}\n          >\n            <Icon icon={UiTrash} className=\"text-sm\" />\n          </button>\n        ) : null;\n        // When the value is stacked (`x-layout: \"stack\"` on the entry schema),\n        // the key joins the stack: it sits full-width above its value as one\n        // unit, rather than cramped in a fixed key column beside it. The key\n        // picker is labelled from `propertyNames.title` so a constrained key\n        // (e.g. an AsCode role) says what it is.\n        if (entryIsStacked(key)) {\n          return (\n            <div key={`extra-${key}`} className=\"space-y-1.5 rounded-md border border-input p-2\">\n              {keyTitle && <span className=\"block text-xs font-medium text-muted-foreground\">{keyTitle}</span>}\n              <div className=\"flex items-center gap-2\">\n                <div className=\"min-w-0 flex-1\">{keyControl}</div>\n                {removeButton}\n              </div>\n              <div className=\"min-w-0\">{valueControlForKey(key)}</div>\n            </div>\n          );\n        }\n        return (\n          <div key={`extra-${key}`} className=\"grid grid-cols-[10rem_1fr_auto] items-center gap-2\">\n            {keyControl}\n            <div className=\"min-w-0\">{valueControlForKey(key)}</div>\n            {removeButton}\n          </div>\n        );\n      })}\n      {!readOnly && field.allowExtraKeys !== false && (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          onClick={addEntry}\n          className={cn(\"gap-1.5\", inputSizeClass[childCtx.size])}\n        >\n          <Icon icon={UiAdd} className=\"text-sm\" />\n          Add field\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"names":["isPlainObject","jsx","FieldsGrid","normalizeColumns","cssLength","DEFAULT_COLUMN_MIN_WIDTH","appendInstancePath","jsxs","cn","fieldInnerGapClass","fieldInputId","Combobox","keyPickerOptions","inputClass","controlHeightClass","Icon","UiTrash","Button","inputSizeClass","UiAdd"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-object.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-object.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAwC,aAAa,EAAE,MAAM,0BAA0B,CAAC;AASlH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE;IAAE,KAAK,EAAE,YAAY,CAAC;IAAC,GAAG,EAAE,aAAa,CAAA;CAAE,2CA+BxF;AAOD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE;IAAE,KAAK,EAAE,YAAY,CAAC;IAAC,GAAG,EAAE,aAAa,CAAA;CAAE,2CAkK3F"}
+{"version":3,"file":"json-schema-form-object.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-object.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAwC,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAiBlH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE;IAAE,KAAK,EAAE,YAAY,CAAC;IAAC,GAAG,EAAE,aAAa,CAAA;CAAE,2CA8CxF;AAOD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE;IAAE,KAAK,EAAE,YAAY,CAAC;IAAC,GAAG,EAAE,aAAa,CAAA;CAAE,2CAkK3F"}

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

@@ -4,8 +4,8 @@ import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
 import { Button } from "./button.js";
 import { Combobox } from "./Combobox.js";
-import { isPlainObject, fieldInputId, keyPickerOptions, inputClass, normalizeColumns } from "./json-schema-form-utils.js";
-import { FieldsGrid } from "./json-schema-form-fields.js";
+import { isPlainObject, fieldInputId, keyPickerOptions, inputClass, cssLength, DEFAULT_COLUMN_MIN_WIDTH, normalizeColumns } from "./json-schema-form-utils.js";
+import { FieldsGrid } from "./json-schema-form-layout.js";
 import { appendInstancePath } from "./json-schema-form-errors.js";
 import { controlHeightClass, inputSizeClass, fieldInnerGapClass } from "./json-schema-form-size.js";
 import { UiTrash } from "../icons/components/UiTrash.js";
@@ -18,7 +18,12 @@ function ObjectControl({ field, ctx }) {
     ...field.objectRequired ? { required: field.objectRequired } : {},
     ...Array.isArray(field.schema.allOf) ? { allOf: field.schema.allOf } : {},
     ...Array.isArray(field.schema["x-order"]) ? { "x-order": field.schema["x-order"] } : {},
-    ...typeof field.schema["x-columns"] === "number" ? { "x-columns": field.schema["x-columns"] } : {},
+    // Every object-level layout keyword must be copied here or it works at the
+    // top level and silently dies one level down — which is exactly where these
+    // matter (an array item's body is a nested object).
+    ...typeof field.schema["x-columns"] === "number" || field.schema["x-columns"] === "auto" ? { "x-columns": field.schema["x-columns"] } : {},
+    ...typeof field.schema["x-column-min-width"] === "string" ? { "x-column-min-width": field.schema["x-column-min-width"] } : {},
+    ...typeof field.schema["x-columns-max-width"] === "string" ? { "x-columns-max-width": field.schema["x-columns-max-width"] } : {},
     ...typeof field.schema["x-classes"] === "string" ? { "x-classes": field.schema["x-classes"] } : {}
   };
   return /* @__PURE__ */ jsx(
@@ -27,6 +32,8 @@ function ObjectControl({ field, ctx }) {
       layout: ctx.layout,
       size: ctx.size,
       columns: normalizeColumns(subSchema["x-columns"]),
+      columnMinWidth: cssLength(subSchema["x-column-min-width"], DEFAULT_COLUMN_MIN_WIDTH),
+      ...typeof subSchema["x-columns-max-width"] === "string" ? { columnsMaxWidth: subSchema["x-columns-max-width"] } : {},
       ...typeof subSchema["x-classes"] === "string" ? { className: subSchema["x-classes"] } : {},
       children: ctx.render.renderObjectFields(subSchema, obj, (next) => field.onChange(next), {
         ...ctx,
@@ -100,7 +107,7 @@ function StringMapControl({ field, ctx }) {
       /* @__PURE__ */ jsx(
         "label",
         {
-          htmlFor: fieldInputId(key, childCtx.idPrefix),
+          htmlFor: fieldInputId(appendInstancePath(ctx.instancePath, key), childCtx.idPrefix),
           className: "truncate text-xs text-muted-foreground",
           title: key,
           children: key

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-object.js","sources":["../../src/components/json-schema-form-object.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd, UiTrash } from \"../icons\";\nimport { Button } from \"./button\";\nimport { Combobox } from \"./Combobox\";\nimport type { FieldControl, JsonSchemaObject, JsonSchemaProperty, RenderContext } from \"./json-schema-form-types\";\nimport { fieldInputId, inputClass, isPlainObject, keyPickerOptions, normalizeColumns } from \"./json-schema-form-utils\";\nimport { FieldsGrid } from \"./json-schema-form-fields\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport { controlHeightClass, fieldInnerGapClass, inputSizeClass } from \"./json-schema-form-size\";\n\n// ObjectControl renders a nested structured object as a sub-form: its own\n// properties, required markers, if/then, soft errors — all via the shared\n// recursive renderer (ctx.render), so pre/post extensions apply at this depth too.\nexport function ObjectControl({ field, ctx }: { field: FieldControl; ctx: RenderContext }) {\n  const obj = isPlainObject(field.value) ? (field.value as Record<string, unknown>) : {};\n  const subSchema: JsonSchemaObject = {\n    type: \"object\",\n    properties: field.objectProperties ?? {},\n    ...(field.objectRequired ? { required: field.objectRequired } : {}),\n    ...(Array.isArray(field.schema.allOf) ? { allOf: field.schema.allOf } : {}),\n    ...(Array.isArray(field.schema[\"x-order\"]) ? { \"x-order\": field.schema[\"x-order\"] } : {}),\n    ...(typeof field.schema[\"x-columns\"] === \"number\" ? { \"x-columns\": field.schema[\"x-columns\"] } : {}),\n    ...(typeof field.schema[\"x-classes\"] === \"string\" ? { \"x-classes\": field.schema[\"x-classes\"] } : {}),\n  };\n  // No border/box: nested objects render as flat headed sections (see\n  // ObjectSection in renderFieldRow) rather than progressively indented\n  // sub-forms, so deep schemas stay readable as a single column.\n  // A read-only object marks its whole subtree non-editable: recurse with\n  // form-level readOnly on so child inputs are disabled (and any child the\n  // schema marks readOnly still renders as a value span).\n  return (\n    <FieldsGrid\n      layout={ctx.layout}\n      size={ctx.size}\n      columns={normalizeColumns(subSchema[\"x-columns\"])}\n      {...(typeof subSchema[\"x-classes\"] === \"string\" ? { className: subSchema[\"x-classes\"] } : {})}\n    >\n      {ctx.render.renderObjectFields(subSchema, obj, (next) => field.onChange(next), {\n        ...ctx,\n        readOnly: ctx.readOnly || field.readOnly === true,\n        depth: ctx.depth + 1,\n      })}\n    </FieldsGrid>\n  );\n}\n\n// StringMapControl edits an object as key/value rows. Known properties (from the\n// schema) render first with derived value controls; unknown keys render as\n// editable key/value pairs. \"Add field\" appears when extra keys are allowed.\n// Values recurse through the shared pipeline, so a value that is itself an object\n// or array renders structurally and pre/post extensions apply to it.\nexport function StringMapControl({ field, ctx }: { field: FieldControl; ctx: RenderContext }) {\n  // A read-only map marks its whole subtree non-editable: no rename/remove/add\n  // and value inputs disabled.\n  const readOnly = ctx.readOnly || field.readOnly === true;\n  const map = isPlainObject(field.value) ? (field.value as Record<string, unknown>) : {};\n  const known = field.knownProperties ?? {};\n  const knownKeys = Object.keys(known);\n  const extraKeys = Object.keys(map).filter((k) => !(k in known));\n  const childCtx: RenderContext = { ...ctx, readOnly, depth: ctx.depth + 1 };\n  // What the map key IS (e.g. \"Address Role\"), from the key-constraint schema.\n  const pn = field.schema.propertyNames as JsonSchemaProperty | undefined;\n  const keyTitle = typeof pn?.title === \"string\" && pn.title ? pn.title : undefined;\n\n  // valueSchemaForKey picks an entry's value schema: the first patternProperties\n  // entry whose regex matches the key, else the `additionalProperties` schema,\n  // else a bare string. Lets the value form vary by key (e.g. House vs Apartment).\n  function valueSchemaForKey(key: string): JsonSchemaProperty {\n    for (const { pattern, schema } of field.valuePatternSchemas ?? []) {\n      let re: RegExp | undefined;\n      try {\n        re = new RegExp(pattern);\n      } catch {\n        re = undefined; // a malformed pattern simply never matches\n      }\n      if (re?.test(key)) return schema;\n    }\n    return field.valueSchema ?? { type: \"string\" };\n  }\n\n  // When the entry value opts into a stacked layout (`x-layout: \"stack\"`), the\n  // key+value render as one full-width stacked unit instead of a key column\n  // beside the value. Resolved per key, since pattern schemas may differ.\n  function entryIsStacked(key: string): boolean {\n    return valueSchemaForKey(key)[\"x-layout\"] === \"stack\";\n  }\n\n  function setEntry(key: string, next: unknown) {\n    field.onChange({ ...map, [key]: next });\n  }\n  function renameEntry(oldKey: string, newKey: string) {\n    if (newKey === oldKey) return;\n    const next: Record<string, unknown> = {};\n    for (const [k, v] of Object.entries(map)) next[k === oldKey ? newKey : k] = v;\n    field.onChange(next);\n  }\n  function removeEntry(key: string) {\n    const next = { ...map };\n    delete next[key];\n    field.onChange(next);\n  }\n  function addEntry() {\n    if (\"\" in map) return;\n    field.onChange({ ...map, \"\": \"\" });\n  }\n\n  function valueControlFor(key: string, valueSchema: JsonSchemaProperty): ReactNode {\n    const nodes = ctx.render.renderFieldNodes(\n      {\n        key,\n        prop: valueSchema,\n        required: false,\n        value: map[key] ?? \"\",\n        onChange: (next) => setEntry(key, next),\n        instancePath: appendInstancePath(ctx.instancePath, key),\n      },\n      childCtx,\n    );\n    return nodes?.value ?? null;\n  }\n\n  // valueControlForKey resolves the per-key value schema (patternProperties /\n  // additionalProperties) before rendering, so the form varies by key.\n  function valueControlForKey(key: string): ReactNode {\n    return valueControlFor(key, valueSchemaForKey(key));\n  }\n\n  return (\n    <div className={cn(\"flex flex-col rounded-md border border-input p-2\", fieldInnerGapClass[childCtx.size])}>\n      {knownKeys.map((key) => (\n        <div key={`known-${key}`} className=\"grid grid-cols-[10rem_1fr] items-center gap-2\">\n          <label\n            htmlFor={fieldInputId(key, childCtx.idPrefix)}\n            className=\"truncate text-xs text-muted-foreground\"\n            title={key}\n          >\n            {key}\n          </label>\n          <div className=\"min-w-0\">{valueControlFor(key, known[key] ?? { type: \"string\" })}</div>\n        </div>\n      ))}\n      {extraKeys.map((key) => {\n        const keyControl = field.keyOptions ? (\n          <Combobox\n            options={keyPickerOptions(field.keyOptions, extraKeys, key)}\n            value={key}\n            disabled={readOnly}\n            size={childCtx.size}\n            allowCustomValue={false}\n            onChange={(next) => renameEntry(key, next)}\n            placeholder=\"Select…\"\n          />\n        ) : (\n          <input\n            type=\"text\"\n            aria-label=\"Field name\"\n            className={cn(inputClass(childCtx.size), \"font-mono\")}\n            value={key}\n            disabled={readOnly}\n            onChange={(e) => renameEntry(key, e.target.value)}\n          />\n        );\n        const removeButton = !readOnly ? (\n          <button\n            type=\"button\"\n            aria-label={`Remove ${key}`}\n            className={cn(\n              \"inline-flex aspect-square shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground\",\n              controlHeightClass[childCtx.size],\n            )}\n            onClick={() => removeEntry(key)}\n          >\n            <Icon icon={UiTrash} className=\"text-sm\" />\n          </button>\n        ) : null;\n        // When the value is stacked (`x-layout: \"stack\"` on the entry schema),\n        // the key joins the stack: it sits full-width above its value as one\n        // unit, rather than cramped in a fixed key column beside it. The key\n        // picker is labelled from `propertyNames.title` so a constrained key\n        // (e.g. an AsCode role) says what it is.\n        if (entryIsStacked(key)) {\n          return (\n            <div key={`extra-${key}`} className=\"space-y-1.5 rounded-md border border-input p-2\">\n              {keyTitle && <span className=\"block text-xs font-medium text-muted-foreground\">{keyTitle}</span>}\n              <div className=\"flex items-center gap-2\">\n                <div className=\"min-w-0 flex-1\">{keyControl}</div>\n                {removeButton}\n              </div>\n              <div className=\"min-w-0\">{valueControlForKey(key)}</div>\n            </div>\n          );\n        }\n        return (\n          <div key={`extra-${key}`} className=\"grid grid-cols-[10rem_1fr_auto] items-center gap-2\">\n            {keyControl}\n            <div className=\"min-w-0\">{valueControlForKey(key)}</div>\n            {removeButton}\n          </div>\n        );\n      })}\n      {!readOnly && field.allowExtraKeys !== false && (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          onClick={addEntry}\n          className={cn(\"gap-1.5\", inputSizeClass[childCtx.size])}\n        >\n          <Icon icon={UiAdd} className=\"text-sm\" />\n          Add field\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"json-schema-form-object.js","sources":["../../src/components/json-schema-form-object.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd, UiTrash } from \"../icons\";\nimport { Button } from \"./button\";\nimport { Combobox } from \"./Combobox\";\nimport type { FieldControl, JsonSchemaObject, JsonSchemaProperty, RenderContext } from \"./json-schema-form-types\";\nimport {\n  cssLength,\n  DEFAULT_COLUMN_MIN_WIDTH,\n  fieldInputId,\n  inputClass,\n  isPlainObject,\n  keyPickerOptions,\n  normalizeColumns,\n} from \"./json-schema-form-utils\";\nimport { FieldsGrid } from \"./json-schema-form-layout\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport { controlHeightClass, fieldInnerGapClass, inputSizeClass } from \"./json-schema-form-size\";\n\n// ObjectControl renders a nested structured object as a sub-form: its own\n// properties, required markers, if/then, soft errors — all via the shared\n// recursive renderer (ctx.render), so pre/post extensions apply at this depth too.\nexport function ObjectControl({ field, ctx }: { field: FieldControl; ctx: RenderContext }) {\n  const obj = isPlainObject(field.value) ? (field.value as Record<string, unknown>) : {};\n  const subSchema: JsonSchemaObject = {\n    type: \"object\",\n    properties: field.objectProperties ?? {},\n    ...(field.objectRequired ? { required: field.objectRequired } : {}),\n    ...(Array.isArray(field.schema.allOf) ? { allOf: field.schema.allOf } : {}),\n    ...(Array.isArray(field.schema[\"x-order\"]) ? { \"x-order\": field.schema[\"x-order\"] } : {}),\n    // Every object-level layout keyword must be copied here or it works at the\n    // top level and silently dies one level down — which is exactly where these\n    // matter (an array item's body is a nested object).\n    ...(typeof field.schema[\"x-columns\"] === \"number\" || field.schema[\"x-columns\"] === \"auto\"\n      ? { \"x-columns\": field.schema[\"x-columns\"] }\n      : {}),\n    ...(typeof field.schema[\"x-column-min-width\"] === \"string\"\n      ? { \"x-column-min-width\": field.schema[\"x-column-min-width\"] }\n      : {}),\n    ...(typeof field.schema[\"x-columns-max-width\"] === \"string\"\n      ? { \"x-columns-max-width\": field.schema[\"x-columns-max-width\"] }\n      : {}),\n    ...(typeof field.schema[\"x-classes\"] === \"string\" ? { \"x-classes\": field.schema[\"x-classes\"] } : {}),\n  };\n  // No border/box: nested objects render as flat headed sections (see\n  // ObjectSection in renderFieldRow) rather than progressively indented\n  // sub-forms, so deep schemas stay readable as a single column.\n  // A read-only object marks its whole subtree non-editable: recurse with\n  // form-level readOnly on so child inputs are disabled (and any child the\n  // schema marks readOnly still renders as a value span).\n  return (\n    <FieldsGrid\n      layout={ctx.layout}\n      size={ctx.size}\n      columns={normalizeColumns(subSchema[\"x-columns\"])}\n      columnMinWidth={cssLength(subSchema[\"x-column-min-width\"], DEFAULT_COLUMN_MIN_WIDTH)}\n      {...(typeof subSchema[\"x-columns-max-width\"] === \"string\"\n        ? { columnsMaxWidth: subSchema[\"x-columns-max-width\"] }\n        : {})}\n      {...(typeof subSchema[\"x-classes\"] === \"string\" ? { className: subSchema[\"x-classes\"] } : {})}\n    >\n      {ctx.render.renderObjectFields(subSchema, obj, (next) => field.onChange(next), {\n        ...ctx,\n        readOnly: ctx.readOnly || field.readOnly === true,\n        depth: ctx.depth + 1,\n      })}\n    </FieldsGrid>\n  );\n}\n\n// StringMapControl edits an object as key/value rows. Known properties (from the\n// schema) render first with derived value controls; unknown keys render as\n// editable key/value pairs. \"Add field\" appears when extra keys are allowed.\n// Values recurse through the shared pipeline, so a value that is itself an object\n// or array renders structurally and pre/post extensions apply to it.\nexport function StringMapControl({ field, ctx }: { field: FieldControl; ctx: RenderContext }) {\n  // A read-only map marks its whole subtree non-editable: no rename/remove/add\n  // and value inputs disabled.\n  const readOnly = ctx.readOnly || field.readOnly === true;\n  const map = isPlainObject(field.value) ? (field.value as Record<string, unknown>) : {};\n  const known = field.knownProperties ?? {};\n  const knownKeys = Object.keys(known);\n  const extraKeys = Object.keys(map).filter((k) => !(k in known));\n  const childCtx: RenderContext = { ...ctx, readOnly, depth: ctx.depth + 1 };\n  // What the map key IS (e.g. \"Address Role\"), from the key-constraint schema.\n  const pn = field.schema.propertyNames as JsonSchemaProperty | undefined;\n  const keyTitle = typeof pn?.title === \"string\" && pn.title ? pn.title : undefined;\n\n  // valueSchemaForKey picks an entry's value schema: the first patternProperties\n  // entry whose regex matches the key, else the `additionalProperties` schema,\n  // else a bare string. Lets the value form vary by key (e.g. House vs Apartment).\n  function valueSchemaForKey(key: string): JsonSchemaProperty {\n    for (const { pattern, schema } of field.valuePatternSchemas ?? []) {\n      let re: RegExp | undefined;\n      try {\n        re = new RegExp(pattern);\n      } catch {\n        re = undefined; // a malformed pattern simply never matches\n      }\n      if (re?.test(key)) return schema;\n    }\n    return field.valueSchema ?? { type: \"string\" };\n  }\n\n  // When the entry value opts into a stacked layout (`x-layout: \"stack\"`), the\n  // key+value render as one full-width stacked unit instead of a key column\n  // beside the value. Resolved per key, since pattern schemas may differ.\n  function entryIsStacked(key: string): boolean {\n    return valueSchemaForKey(key)[\"x-layout\"] === \"stack\";\n  }\n\n  function setEntry(key: string, next: unknown) {\n    field.onChange({ ...map, [key]: next });\n  }\n  function renameEntry(oldKey: string, newKey: string) {\n    if (newKey === oldKey) return;\n    const next: Record<string, unknown> = {};\n    for (const [k, v] of Object.entries(map)) next[k === oldKey ? newKey : k] = v;\n    field.onChange(next);\n  }\n  function removeEntry(key: string) {\n    const next = { ...map };\n    delete next[key];\n    field.onChange(next);\n  }\n  function addEntry() {\n    if (\"\" in map) return;\n    field.onChange({ ...map, \"\": \"\" });\n  }\n\n  function valueControlFor(key: string, valueSchema: JsonSchemaProperty): ReactNode {\n    const nodes = ctx.render.renderFieldNodes(\n      {\n        key,\n        prop: valueSchema,\n        required: false,\n        value: map[key] ?? \"\",\n        onChange: (next) => setEntry(key, next),\n        instancePath: appendInstancePath(ctx.instancePath, key),\n      },\n      childCtx,\n    );\n    return nodes?.value ?? null;\n  }\n\n  // valueControlForKey resolves the per-key value schema (patternProperties /\n  // additionalProperties) before rendering, so the form varies by key.\n  function valueControlForKey(key: string): ReactNode {\n    return valueControlFor(key, valueSchemaForKey(key));\n  }\n\n  return (\n    <div className={cn(\"flex flex-col rounded-md border border-input p-2\", fieldInnerGapClass[childCtx.size])}>\n      {knownKeys.map((key) => (\n        <div key={`known-${key}`} className=\"grid grid-cols-[10rem_1fr] items-center gap-2\">\n          <label\n            htmlFor={fieldInputId(appendInstancePath(ctx.instancePath, key), childCtx.idPrefix)}\n            className=\"truncate text-xs text-muted-foreground\"\n            title={key}\n          >\n            {key}\n          </label>\n          <div className=\"min-w-0\">{valueControlFor(key, known[key] ?? { type: \"string\" })}</div>\n        </div>\n      ))}\n      {extraKeys.map((key) => {\n        const keyControl = field.keyOptions ? (\n          <Combobox\n            options={keyPickerOptions(field.keyOptions, extraKeys, key)}\n            value={key}\n            disabled={readOnly}\n            size={childCtx.size}\n            allowCustomValue={false}\n            onChange={(next) => renameEntry(key, next)}\n            placeholder=\"Select…\"\n          />\n        ) : (\n          <input\n            type=\"text\"\n            aria-label=\"Field name\"\n            className={cn(inputClass(childCtx.size), \"font-mono\")}\n            value={key}\n            disabled={readOnly}\n            onChange={(e) => renameEntry(key, e.target.value)}\n          />\n        );\n        const removeButton = !readOnly ? (\n          <button\n            type=\"button\"\n            aria-label={`Remove ${key}`}\n            className={cn(\n              \"inline-flex aspect-square shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground\",\n              controlHeightClass[childCtx.size],\n            )}\n            onClick={() => removeEntry(key)}\n          >\n            <Icon icon={UiTrash} className=\"text-sm\" />\n          </button>\n        ) : null;\n        // When the value is stacked (`x-layout: \"stack\"` on the entry schema),\n        // the key joins the stack: it sits full-width above its value as one\n        // unit, rather than cramped in a fixed key column beside it. The key\n        // picker is labelled from `propertyNames.title` so a constrained key\n        // (e.g. an AsCode role) says what it is.\n        if (entryIsStacked(key)) {\n          return (\n            <div key={`extra-${key}`} className=\"space-y-1.5 rounded-md border border-input p-2\">\n              {keyTitle && <span className=\"block text-xs font-medium text-muted-foreground\">{keyTitle}</span>}\n              <div className=\"flex items-center gap-2\">\n                <div className=\"min-w-0 flex-1\">{keyControl}</div>\n                {removeButton}\n              </div>\n              <div className=\"min-w-0\">{valueControlForKey(key)}</div>\n            </div>\n          );\n        }\n        return (\n          <div key={`extra-${key}`} className=\"grid grid-cols-[10rem_1fr_auto] items-center gap-2\">\n            {keyControl}\n            <div className=\"min-w-0\">{valueControlForKey(key)}</div>\n            {removeButton}\n          </div>\n        );\n      })}\n      {!readOnly && field.allowExtraKeys !== false && (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          onClick={addEntry}\n          className={cn(\"gap-1.5\", inputSizeClass[childCtx.size])}\n        >\n          <Icon icon={UiAdd} className=\"text-sm\" />\n          Add field\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}