@flanksource/clicky-ui 0.3.34 → 0.3.36

package/dist/components/json-schema-form-list-array.js

@@ -4,12 +4,14 @@ import { Icon } from "../data/Icon.js";
 import { Button } from "./button.js";
 import { InputField } from "./InputField.js";
 import { ListMenu, ListMenuItem } from "./ListMenu.js";
+import { cn } from "../lib/utils.js";
 import { UiClose } from "../icons/components/UiClose.js";
 import { UiAdd } from "../icons/components/UiAdd.js";
 function CompactListArray({
   field,
   fieldId,
-  readOnly
+  readOnly,
+  presentation = false
 }) {
   const [draft, setDraft] = useState("");
   const rawItems = Array.isArray(field.value) ? field.value : [];
@@ -33,8 +35,11 @@ function CompactListArray({
     {
       role: "list",
       "aria-label": field.label,
-      className: "overflow-hidden rounded-md border border-input bg-background",
-      "data-jsf-input": true,
+      className: cn(
+        "overflow-hidden",
+        !presentation && "rounded-md border border-input bg-background"
+      ),
+      "data-jsf-input": presentation ? void 0 : true,
       children: [
         items.map((item, index) => /* @__PURE__ */ jsx(
           ListMenuItem,
@@ -49,7 +54,11 @@ function CompactListArray({
                 id: `${fieldId}-${index}`,
                 "aria-label": `${field.label} ${index + 1}`,
                 value: item,
-                onChange: (next) => field.onChange(items.map((value, itemIndex) => itemIndex === index ? next : value)),
+                onChange: (next) => field.onChange(
+                  items.map(
+                    (value, itemIndex) => itemIndex === index ? next : value
+                  )
+                ),
                 className: "h-7 border-0 bg-transparent px-0 shadow-none focus-within:ring-0",
                 inputClassName: "font-mono text-xs",
                 suffix: /* @__PURE__ */ jsx(
@@ -60,7 +69,9 @@ function CompactListArray({
                     size: "icon",
                     className: "size-6 p-0 text-muted-foreground hover:text-foreground",
                     "aria-label": `Remove ${item}`,
-                    onClick: () => field.onChange(items.filter((_, itemIndex) => itemIndex !== index)),
+                    onClick: () => field.onChange(
+                      items.filter((_, itemIndex) => itemIndex !== index)
+                    ),
                     children: /* @__PURE__ */ jsx(Icon, { icon: UiClose, className: "size-3.5" })
                   }
                 )

package/dist/components/json-schema-form-list-array.js.map

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-list-array.js","sources":["../../src/components/json-schema-form-list-array.tsx"],"sourcesContent":["import { useState, type KeyboardEvent } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd, UiClose } from \"../icons\";\nimport { Button } from \"./button\";\nimport { InputField } from \"./InputField\";\nimport { ListMenu, ListMenuItem } from \"./ListMenu\";\nimport type { FieldControl } from \"./json-schema-form-types\";\n\nexport function CompactListArray({\n  field,\n  fieldId,\n  readOnly,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n}) {\n  const [draft, setDraft] = useState(\"\");\n  const rawItems = Array.isArray(field.value) ? field.value : [];\n  if (rawItems.some((item) => typeof item !== \"string\")) {\n    throw new Error(`${field.key} compact list received a non-string value`);\n  }\n  const items = rawItems as string[];\n\n  const addDraft = () => {\n    const next = draft.trim();\n    if (!next) return;\n    field.onChange([...items, next]);\n    setDraft(\"\");\n  };\n\n  const addOnEnter = (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    if (event.key !== \"Enter\") return;\n    event.preventDefault();\n    addDraft();\n  };\n\n  return (\n    <ListMenu\n      role=\"list\"\n      aria-label={field.label}\n      className=\"overflow-hidden rounded-md border border-input bg-background\"\n      data-jsf-input\n    >\n      {items.map((item, index) => (\n        <ListMenuItem\n          key={`${item}-${index}`}\n          role=\"listitem\"\n          variant=\"compact\"\n          interactive={false}\n          className=\"border-l-0\"\n        >\n          {readOnly ? (\n            <span className=\"block truncate py-1 font-mono text-foreground\">{item}</span>\n          ) : (\n            <InputField\n              id={`${fieldId}-${index}`}\n              aria-label={`${field.label} ${index + 1}`}\n              value={item}\n              onChange={(next) =>\n                field.onChange(items.map((value, itemIndex) => (itemIndex === index ? next : value)))\n              }\n              className=\"h-7 border-0 bg-transparent px-0 shadow-none focus-within:ring-0\"\n              inputClassName=\"font-mono text-xs\"\n              suffix={\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"size-6 p-0 text-muted-foreground hover:text-foreground\"\n                  aria-label={`Remove ${item}`}\n                  onClick={() => field.onChange(items.filter((_, itemIndex) => itemIndex !== index))}\n                >\n                  <Icon icon={UiClose} className=\"size-3.5\" />\n                </Button>\n              }\n            />\n          )}\n        </ListMenuItem>\n      ))}\n      {!readOnly && (\n        <ListMenuItem\n          role=\"listitem\"\n          variant=\"compact\"\n          interactive={false}\n          className=\"border-l-0 bg-muted/20\"\n        >\n          <InputField\n            id={fieldId}\n            aria-label={`Add ${field.label}`}\n            value={draft}\n            onChange={setDraft}\n            onKeyDown={addOnEnter}\n            prefix={<Icon icon={UiAdd} className=\"size-3.5 text-muted-foreground\" />}\n            suffix={\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"h-6 px-2\"\n                disabled={!draft.trim()}\n                onClick={addDraft}\n              >\n                Add\n              </Button>\n            }\n            className=\"h-7 border-0 bg-transparent px-0 shadow-none focus-within:ring-0\"\n            inputClassName=\"font-mono text-xs\"\n          />\n        </ListMenuItem>\n      )}\n    </ListMenu>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAQO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,WAAW,MAAM,QAAQ,MAAM,KAAK,IAAI,MAAM,QAAQ,CAAA;AAC5D,MAAI,SAAS,KAAK,CAAC,SAAS,OAAO,SAAS,QAAQ,GAAG;AACrD,UAAM,IAAI,MAAM,GAAG,MAAM,GAAG,2CAA2C;AAAA,EACzE;AACA,QAAM,QAAQ;AAEd,QAAM,WAAW,MAAM;AACrB,UAAM,OAAO,MAAM,KAAA;AACnB,QAAI,CAAC,KAAM;AACX,UAAM,SAAS,CAAC,GAAG,OAAO,IAAI,CAAC;AAC/B,aAAS,EAAE;AAAA,EACb;AAEA,QAAM,aAAa,CAAC,UAAiE;AACnF,QAAI,MAAM,QAAQ,QAAS;AAC3B,UAAM,eAAA;AACN,aAAA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY,MAAM;AAAA,MAClB,WAAU;AAAA,MACV,kBAAc;AAAA,MAEb,UAAA;AAAA,QAAA,MAAM,IAAI,CAAC,MAAM,UAChB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,aAAa;AAAA,YACb,WAAU;AAAA,YAET,qBACC,oBAAC,QAAA,EAAK,WAAU,iDAAiD,gBAAK,IAEtE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,GAAG,OAAO,IAAI,KAAK;AAAA,gBACvB,cAAY,GAAG,MAAM,KAAK,IAAI,QAAQ,CAAC;AAAA,gBACvC,OAAO;AAAA,gBACP,UAAU,CAAC,SACT,MAAM,SAAS,MAAM,IAAI,CAAC,OAAO,cAAe,cAAc,QAAQ,OAAO,KAAM,CAAC;AAAA,gBAEtF,WAAU;AAAA,gBACV,gBAAe;AAAA,gBACf,QACE;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAQ;AAAA,oBACR,MAAK;AAAA,oBACL,WAAU;AAAA,oBACV,cAAY,UAAU,IAAI;AAAA,oBAC1B,SAAS,MAAM,MAAM,SAAS,MAAM,OAAO,CAAC,GAAG,cAAc,cAAc,KAAK,CAAC;AAAA,oBAEjF,UAAA,oBAAC,MAAA,EAAK,MAAM,SAAS,WAAU,WAAA,CAAW;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAC5C;AAAA,YAAA;AAAA,UAEJ;AAAA,UA9BG,GAAG,IAAI,IAAI,KAAK;AAAA,QAAA,CAiCxB;AAAA,QACA,CAAC,YACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,aAAa;AAAA,YACb,WAAU;AAAA,YAEV,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI;AAAA,gBACJ,cAAY,OAAO,MAAM,KAAK;AAAA,gBAC9B,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,WAAW;AAAA,gBACX,QAAQ,oBAAC,MAAA,EAAK,MAAM,OAAO,WAAU,kCAAiC;AAAA,gBACtE,QACE;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAQ;AAAA,oBACR,MAAK;AAAA,oBACL,WAAU;AAAA,oBACV,UAAU,CAAC,MAAM,KAAA;AAAA,oBACjB,SAAS;AAAA,oBACV,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAIH,WAAU;AAAA,gBACV,gBAAe;AAAA,cAAA;AAAA,YAAA;AAAA,UACjB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"json-schema-form-list-array.js","sources":["../../src/components/json-schema-form-list-array.tsx"],"sourcesContent":["import { useState, type KeyboardEvent } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd, UiClose } from \"../icons\";\nimport { Button } from \"./button\";\nimport { InputField } from \"./InputField\";\nimport { ListMenu, ListMenuItem } from \"./ListMenu\";\nimport { cn } from \"../lib/utils\";\nimport type { FieldControl } from \"./json-schema-form-types\";\n\nexport function CompactListArray({\n  field,\n  fieldId,\n  readOnly,\n  presentation = false,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  presentation?: boolean;\n}) {\n  const [draft, setDraft] = useState(\"\");\n  const rawItems = Array.isArray(field.value) ? field.value : [];\n  if (rawItems.some((item) => typeof item !== \"string\")) {\n    throw new Error(`${field.key} compact list received a non-string value`);\n  }\n  const items = rawItems as string[];\n\n  const addDraft = () => {\n    const next = draft.trim();\n    if (!next) return;\n    field.onChange([...items, next]);\n    setDraft(\"\");\n  };\n\n  const addOnEnter = (\n    event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,\n  ) => {\n    if (event.key !== \"Enter\") return;\n    event.preventDefault();\n    addDraft();\n  };\n\n  return (\n    <ListMenu\n      role=\"list\"\n      aria-label={field.label}\n      className={cn(\n        \"overflow-hidden\",\n        !presentation && \"rounded-md border border-input bg-background\",\n      )}\n      data-jsf-input={presentation ? undefined : true}\n    >\n      {items.map((item, index) => (\n        <ListMenuItem\n          key={`${item}-${index}`}\n          role=\"listitem\"\n          variant=\"compact\"\n          interactive={false}\n          className=\"border-l-0\"\n        >\n          {readOnly ? (\n            <span className=\"block truncate py-1 font-mono text-foreground\">\n              {item}\n            </span>\n          ) : (\n            <InputField\n              id={`${fieldId}-${index}`}\n              aria-label={`${field.label} ${index + 1}`}\n              value={item}\n              onChange={(next) =>\n                field.onChange(\n                  items.map((value, itemIndex) =>\n                    itemIndex === index ? next : value,\n                  ),\n                )\n              }\n              className=\"h-7 border-0 bg-transparent px-0 shadow-none focus-within:ring-0\"\n              inputClassName=\"font-mono text-xs\"\n              suffix={\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"size-6 p-0 text-muted-foreground hover:text-foreground\"\n                  aria-label={`Remove ${item}`}\n                  onClick={() =>\n                    field.onChange(\n                      items.filter((_, itemIndex) => itemIndex !== index),\n                    )\n                  }\n                >\n                  <Icon icon={UiClose} className=\"size-3.5\" />\n                </Button>\n              }\n            />\n          )}\n        </ListMenuItem>\n      ))}\n      {!readOnly && (\n        <ListMenuItem\n          role=\"listitem\"\n          variant=\"compact\"\n          interactive={false}\n          className=\"border-l-0 bg-muted/20\"\n        >\n          <InputField\n            id={fieldId}\n            aria-label={`Add ${field.label}`}\n            value={draft}\n            onChange={setDraft}\n            onKeyDown={addOnEnter}\n            prefix={\n              <Icon icon={UiAdd} className=\"size-3.5 text-muted-foreground\" />\n            }\n            suffix={\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"h-6 px-2\"\n                disabled={!draft.trim()}\n                onClick={addDraft}\n              >\n                Add\n              </Button>\n            }\n            className=\"h-7 border-0 bg-transparent px-0 shadow-none focus-within:ring-0\"\n            inputClassName=\"font-mono text-xs\"\n          />\n        </ListMenuItem>\n      )}\n    </ListMenu>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -9,11 +9,16 @@ const button = require("./button.cjs");
 const Combobox = require("./Combobox.cjs");
 const jsonSchemaFormUtils = require("./json-schema-form-utils.cjs");
 const jsonSchemaFormLayout = require("./json-schema-form-layout.cjs");
+const jsonSchemaFormProperties = require("./json-schema-form-properties.cjs");
+const jsonSchemaFormPropertiesSize = require("./json-schema-form-properties-size.cjs");
 const jsonSchemaFormErrors = require("./json-schema-form-errors.cjs");
 const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
 const UiTrash = require("../icons/components/UiTrash.cjs");
 const UiAdd = require("../icons/components/UiAdd.cjs");
-function ObjectControl({ field, ctx }) {
+function ObjectControl({
+  field,
+  ctx
+}) {
   const obj = collections.isPlainObject(field.value) ? field.value : {};
   const subSchema = {
     type: "object",
@@ -35,24 +40,36 @@ function ObjectControl({ field, ctx }) {
       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),
+      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,
-        readOnly: ctx.readOnly || field.readOnly === true,
-        depth: ctx.depth + 1
-      })
+      children: ctx.render.renderObjectFields(
+        subSchema,
+        obj,
+        (next) => field.onChange(next),
+        {
+          ...ctx,
+          readOnly: ctx.readOnly || field.readOnly === true,
+          depth: ctx.depth + 1
+        }
+      )
     }
   );
 }
-function StringMapControl({ field, ctx }) {
+function StringMapControl({
+  field,
+  ctx
+}) {
   const readOnly = ctx.readOnly || field.readOnly === true;
   const map = collections.isPlainObject(field.value) ? field.value : {};
   const known = field.knownProperties ?? {};
   const knownKeys = Object.keys(known);
   const extraKeys = Object.keys(map).filter((k) => !(k in known));
   const childCtx = { ...ctx, readOnly, depth: ctx.depth + 1 };
+  const properties = ctx.layout.mode === "properties";
   const pn = field.schema.propertyNames;
   const keyTitle = typeof (pn == null ? void 0 : pn.title) === "string" && pn.title ? pn.title : void 0;
   function valueSchemaForKey(key) {
@@ -76,7 +93,8 @@ function StringMapControl({ field, ctx }) {
   function renameEntry(oldKey, newKey) {
     if (newKey === oldKey) return;
     const next = {};
-    for (const [k, v] of Object.entries(map)) next[k === oldKey ? newKey : k] = v;
+    for (const [k, v] of Object.entries(map))
+      next[k === oldKey ? newKey : k] = v;
     field.onChange(next);
   }
   function removeEntry(key) {
@@ -105,85 +123,221 @@ function StringMapControl({ field, ctx }) {
   function valueControlForKey(key) {
     return valueControlFor(key, valueSchemaForKey(key));
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col rounded-md border border-input p-2", jsonSchemaFormSize.fieldInnerGapClass[childCtx.size]), children: [
-    knownKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[10rem_1fr] items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "label",
-        {
-          htmlFor: jsonSchemaFormUtils.fieldInputId(jsonSchemaFormErrors.appendInstancePath(ctx.instancePath, key), childCtx.idPrefix),
-          className: "truncate text-xs text-muted-foreground",
-          title: key,
-          children: key
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: valueControlFor(key, known[key] ?? { type: "string" }) })
-    ] }, `known-${key}`)),
-    extraKeys.map((key) => {
-      const keyControl = field.keyOptions ? /* @__PURE__ */ jsxRuntime.jsx(
-        Combobox.Combobox,
-        {
-          options: jsonSchemaFormUtils.keyPickerOptions(field.keyOptions, extraKeys, key),
-          value: key,
-          disabled: readOnly,
-          size: childCtx.size,
-          allowCustomValue: false,
-          onChange: (next) => renameEntry(key, next),
-          placeholder: "Select…"
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "text",
-          "aria-label": "Field name",
-          className: utils.cn(jsonSchemaFormUtils.inputClass(childCtx.size), "font-mono"),
-          value: key,
-          disabled: readOnly,
-          onChange: (e) => renameEntry(key, e.target.value)
-        }
-      );
-      const removeButton = !readOnly ? /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": `Remove ${key}`,
-          className: utils.cn(
-            "inline-flex aspect-square shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
-            jsonSchemaFormSize.controlHeightClass[childCtx.size]
-          ),
-          onClick: () => removeEntry(key),
-          children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiTrash.UiTrash, className: "text-sm" })
-        }
-      ) : null;
-      if (entryIsStacked(key)) {
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5 rounded-md border border-input p-2", children: [
-          keyTitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs font-medium text-muted-foreground", children: keyTitle }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: keyControl }),
-            removeButton
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: valueControlForKey(key) })
-        ] }, `extra-${key}`);
+  function keyEditor({
+    key,
+    value,
+    onChange
+  }) {
+    const size = properties ? jsonSchemaFormPropertiesSize.propertyControlSize[ctx.size] : ctx.size;
+    return field.keyOptions ? /* @__PURE__ */ jsxRuntime.jsx(
+      Combobox.Combobox,
+      {
+        options: jsonSchemaFormUtils.keyPickerOptions(
+          field.keyOptions,
+          [...knownKeys, ...extraKeys],
+          key
+        ),
+        value,
+        disabled: readOnly,
+        size,
+        allowCustomValue: false,
+        onChange,
+        placeholder: "Select…"
       }
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[10rem_1fr_auto] items-center gap-2", children: [
-        keyControl,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: valueControlForKey(key) }),
-        removeButton
-      ] }, `extra-${key}`);
-    }),
-    !readOnly && field.allowExtraKeys !== false && /* @__PURE__ */ jsxRuntime.jsxs(
-      button.Button,
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
       {
-        type: "button",
-        variant: "outline",
-        onClick: addEntry,
-        className: utils.cn("gap-1.5", jsonSchemaFormSize.inputSizeClass[childCtx.size]),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiAdd.UiAdd, className: "text-sm" }),
-          "Add field"
-        ]
+        type: "text",
+        "aria-label": "Field name",
+        className: utils.cn(jsonSchemaFormUtils.inputClass(size), "font-mono"),
+        value,
+        disabled: readOnly,
+        onChange: (event) => onChange(event.target.value)
       }
-    )
-  ] });
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        properties ? "col-span-full grid grid-cols-subgrid" : "flex flex-col",
+        !properties && !ctx.presentation && "rounded-md border border-input p-2",
+        !properties && jsonSchemaFormSize.fieldInnerGapClass[childCtx.size]
+      ),
+      children: [
+        knownKeys.map(
+          (key) => properties ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "contents", children: ctx.render.renderFieldRow(
+            {
+              key,
+              prop: known[key],
+              required: Array.isArray(field.schema.required) && field.schema.required.includes(key),
+              value: map[key],
+              onChange: (next) => setEntry(key, next),
+              instancePath: jsonSchemaFormErrors.appendInstancePath(ctx.instancePath, key)
+            },
+            childCtx
+          ) }, `known-${key}`) : /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "grid grid-cols-[10rem_1fr] items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "label",
+                  {
+                    htmlFor: jsonSchemaFormUtils.fieldInputId(
+                      jsonSchemaFormErrors.appendInstancePath(ctx.instancePath, key),
+                      childCtx.idPrefix
+                    ),
+                    className: "truncate text-xs text-muted-foreground",
+                    title: key,
+                    children: key
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: valueControlFor(key, known[key] ?? { type: "string" }) })
+              ]
+            },
+            `known-${key}`
+          )
+        ),
+        extraKeys.map((key) => {
+          var _a, _b, _c, _d;
+          const keyControl = ctx.presentation ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: utils.cn(
+                "flex min-w-0 items-center break-words text-xs",
+                jsonSchemaFormSize.controlHeightClass[childCtx.size],
+                field.keyOptions ? "text-foreground" : "font-mono text-muted-foreground"
+              ),
+              children: ((_b = (_a = field.keyOptions) == null ? void 0 : _a.find((option) => option.value === key)) == null ? void 0 : _b.label) ?? key
+            }
+          ) : keyEditor({
+            key,
+            value: key,
+            onChange: (next) => renameEntry(key, next)
+          });
+          const removeButton = !readOnly ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove ${key}`,
+              className: utils.cn(
+                "inline-flex aspect-square shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground",
+                jsonSchemaFormSize.controlHeightClass[childCtx.size]
+              ),
+              onClick: () => removeEntry(key),
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiTrash.UiTrash, className: "text-sm" })
+            }
+          ) : null;
+          if (properties) {
+            const instancePath = jsonSchemaFormErrors.appendInstancePath(ctx.instancePath, key);
+            const keyLabel = ((_d = (_c = field.keyOptions) == null ? void 0 : _c.find((option) => option.value === key)) == null ? void 0 : _d.label) ?? (key || "New field");
+            return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "contents", children: ctx.render.renderFieldRow(
+              {
+                key,
+                prop: { ...valueSchemaForKey(key), title: keyLabel },
+                required: false,
+                value: map[key],
+                onChange: (next) => setEntry(key, next),
+                instancePath
+              },
+              {
+                ...childCtx,
+                post: [
+                  ...childCtx.post,
+                  (entry, nodes, postCtx) => (postCtx == null ? void 0 : postCtx.instancePath) !== instancePath ? nodes : {
+                    ...nodes,
+                    label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: nodes.label }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        jsonSchemaFormProperties.PropertyValueEditor,
+                        {
+                          actionsPlacement: "row",
+                          field: {
+                            ...entry,
+                            kind: "string",
+                            label: `${keyLabel} key`,
+                            value: key,
+                            onChange: (next) => renameEntry(key, String(next))
+                          },
+                          fieldId: `${jsonSchemaFormUtils.fieldInputId(instancePath, ctx.idPrefix)}-key`,
+                          ctx: {
+                            ...childCtx,
+                            size: jsonSchemaFormPropertiesSize.propertyControlSize[ctx.size]
+                          },
+                          renderPreview: (previewField) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: String(previewField.value) }),
+                          renderEditor: (draft) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [
+                            keyEditor({
+                              key,
+                              value: String(draft.value),
+                              onChange: draft.onChange
+                            }),
+                            removeButton
+                          ] })
+                        }
+                      )
+                    ] })
+                  }
+                ]
+              }
+            ) }, `extra-${key}`);
+          }
+          if (entryIsStacked(key)) {
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: utils.cn(
+                  "space-y-1.5",
+                  !ctx.presentation && "rounded-md border border-input p-2"
+                ),
+                children: [
+                  keyTitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs font-medium text-muted-foreground", children: keyTitle }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: keyControl }),
+                    removeButton
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: valueControlForKey(key) })
+                ]
+              },
+              `extra-${key}`
+            );
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: utils.cn(
+                "grid items-center gap-2",
+                ctx.presentation ? "grid-cols-[minmax(0,10rem)_minmax(0,1fr)]" : "grid-cols-[10rem_1fr_auto]"
+              ),
+              children: [
+                keyControl,
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: valueControlForKey(key) }),
+                removeButton
+              ]
+            },
+            `extra-${key}`
+          );
+        }),
+        !readOnly && field.allowExtraKeys !== false && /* @__PURE__ */ jsxRuntime.jsxs(
+          button.Button,
+          {
+            type: "button",
+            variant: properties ? "ghost" : "outline",
+            onClick: addEntry,
+            className: utils.cn(
+              "gap-1.5",
+              properties && "col-span-full justify-self-start m-1",
+              jsonSchemaFormSize.inputSizeClass[properties ? jsonSchemaFormPropertiesSize.propertyControlSize[ctx.size] : childCtx.size]
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiAdd.UiAdd, className: "text-sm" }),
+              "Add field"
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 exports.ObjectControl = ObjectControl;
 exports.StringMapControl = StringMapControl;

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 { isPlainObject } from \"../lib/collections\";\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  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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"}
+{"version":3,"file":"json-schema-form-object.cjs","sources":["../../src/components/json-schema-form-object.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { isPlainObject } from \"../lib/collections\";\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 {\n  FieldControl,\n  JsonSchemaObject,\n  JsonSchemaProperty,\n  RenderContext,\n} from \"./json-schema-form-types\";\nimport {\n  cssLength,\n  DEFAULT_COLUMN_MIN_WIDTH,\n  fieldInputId,\n  inputClass,\n  keyPickerOptions,\n  normalizeColumns,\n} from \"./json-schema-form-utils\";\nimport { FieldsGrid } from \"./json-schema-form-layout\";\nimport { PropertyValueEditor } from \"./json-schema-form-properties\";\nimport { propertyControlSize } from \"./json-schema-form-properties-size\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport {\n  controlHeightClass,\n  fieldInnerGapClass,\n  inputSizeClass,\n} 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({\n  field,\n  ctx,\n}: {\n  field: FieldControl;\n  ctx: RenderContext;\n}) {\n  const obj = isPlainObject(field.value)\n    ? (field.value as Record<string, unknown>)\n    : {};\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\"])\n      ? { \"x-order\": field.schema[\"x-order\"] }\n      : {}),\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\" ||\n    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\"\n      ? { \"x-classes\": field.schema[\"x-classes\"] }\n      : {}),\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(\n        subSchema[\"x-column-min-width\"],\n        DEFAULT_COLUMN_MIN_WIDTH,\n      )}\n      {...(typeof subSchema[\"x-columns-max-width\"] === \"string\"\n        ? { columnsMaxWidth: subSchema[\"x-columns-max-width\"] }\n        : {})}\n      {...(typeof subSchema[\"x-classes\"] === \"string\"\n        ? { className: subSchema[\"x-classes\"] }\n        : {})}\n    >\n      {ctx.render.renderObjectFields(\n        subSchema,\n        obj,\n        (next) => field.onChange(next),\n        {\n          ...ctx,\n          readOnly: ctx.readOnly || field.readOnly === true,\n          depth: ctx.depth + 1,\n        },\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({\n  field,\n  ctx,\n}: {\n  field: FieldControl;\n  ctx: RenderContext;\n}) {\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)\n    ? (field.value as Record<string, unknown>)\n    : {};\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  const properties = ctx.layout.mode === \"properties\";\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 =\n    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))\n      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(\n    key: string,\n    valueSchema: JsonSchemaProperty,\n  ): 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  function keyEditor({\n    key,\n    value,\n    onChange,\n  }: {\n    key: string;\n    value: string;\n    onChange: (next: string) => void;\n  }) {\n    const size = properties ? propertyControlSize[ctx.size] : ctx.size;\n    return field.keyOptions ? (\n      <Combobox\n        options={keyPickerOptions(\n          field.keyOptions,\n          [...knownKeys, ...extraKeys],\n          key,\n        )}\n        value={value}\n        disabled={readOnly}\n        size={size}\n        allowCustomValue={false}\n        onChange={onChange}\n        placeholder=\"Select…\"\n      />\n    ) : (\n      <input\n        type=\"text\"\n        aria-label=\"Field name\"\n        className={cn(inputClass(size), \"font-mono\")}\n        value={value}\n        disabled={readOnly}\n        onChange={(event) => onChange(event.target.value)}\n      />\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        properties ? \"col-span-full grid grid-cols-subgrid\" : \"flex flex-col\",\n        !properties &&\n          !ctx.presentation &&\n          \"rounded-md border border-input p-2\",\n        !properties && fieldInnerGapClass[childCtx.size],\n      )}\n    >\n      {knownKeys.map((key) =>\n        properties ? (\n          <div key={`known-${key}`} className=\"contents\">\n            {ctx.render.renderFieldRow(\n              {\n                key,\n                prop: known[key]!,\n                required:\n                  Array.isArray(field.schema.required) &&\n                  field.schema.required.includes(key),\n                value: map[key],\n                onChange: (next) => setEntry(key, next),\n                instancePath: appendInstancePath(ctx.instancePath, key),\n              },\n              childCtx,\n            )}\n          </div>\n        ) : (\n          <div\n            key={`known-${key}`}\n            className=\"grid grid-cols-[10rem_1fr] items-center gap-2\"\n          >\n            <label\n              htmlFor={fieldInputId(\n                appendInstancePath(ctx.instancePath, key),\n                childCtx.idPrefix,\n              )}\n              className=\"truncate text-xs text-muted-foreground\"\n              title={key}\n            >\n              {key}\n            </label>\n            <div className=\"min-w-0\">\n              {valueControlFor(key, known[key] ?? { type: \"string\" })}\n            </div>\n          </div>\n        ),\n      )}\n      {extraKeys.map((key) => {\n        const keyControl = ctx.presentation ? (\n          <span\n            className={cn(\n              \"flex min-w-0 items-center break-words text-xs\",\n              controlHeightClass[childCtx.size],\n              field.keyOptions\n                ? \"text-foreground\"\n                : \"font-mono text-muted-foreground\",\n            )}\n          >\n            {field.keyOptions?.find((option) => option.value === key)?.label ??\n              key}\n          </span>\n        ) : (\n          keyEditor({\n            key,\n            value: key,\n            onChange: (next) => renameEntry(key, next),\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        if (properties) {\n          const instancePath = appendInstancePath(ctx.instancePath, key);\n          const keyLabel =\n            field.keyOptions?.find((option) => option.value === key)?.label ??\n            (key || \"New field\");\n          return (\n            <div key={`extra-${key}`} className=\"contents\">\n              {ctx.render.renderFieldRow(\n                {\n                  key,\n                  prop: { ...valueSchemaForKey(key), title: keyLabel },\n                  required: false,\n                  value: map[key],\n                  onChange: (next) => setEntry(key, next),\n                  instancePath,\n                },\n                {\n                  ...childCtx,\n                  post: [\n                    ...childCtx.post,\n                    (entry, nodes, postCtx) =>\n                      postCtx?.instancePath !== instancePath\n                        ? nodes\n                        : {\n                            ...nodes,\n                            label: (\n                              <>\n                                <span className=\"sr-only\">{nodes.label}</span>\n                                <PropertyValueEditor\n                                  actionsPlacement=\"row\"\n                                  field={{\n                                    ...entry,\n                                    kind: \"string\",\n                                    label: `${keyLabel} key`,\n                                    value: key,\n                                    onChange: (next) =>\n                                      renameEntry(key, String(next)),\n                                  }}\n                                  fieldId={`${fieldInputId(instancePath, ctx.idPrefix)}-key`}\n                                  ctx={{\n                                    ...childCtx,\n                                    size: propertyControlSize[ctx.size],\n                                  }}\n                                  renderPreview={(previewField) => (\n                                    <span>{String(previewField.value)}</span>\n                                  )}\n                                  renderEditor={(draft) => (\n                                    <div className=\"flex min-w-0 items-center gap-1\">\n                                      {keyEditor({\n                                        key,\n                                        value: String(draft.value),\n                                        onChange: draft.onChange,\n                                      })}\n                                      {removeButton}\n                                    </div>\n                                  )}\n                                />\n                              </>\n                            ),\n                          },\n                  ],\n                },\n              )}\n            </div>\n          );\n        }\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\n              key={`extra-${key}`}\n              className={cn(\n                \"space-y-1.5\",\n                !ctx.presentation && \"rounded-md border border-input p-2\",\n              )}\n            >\n              {keyTitle && (\n                <span className=\"block text-xs font-medium text-muted-foreground\">\n                  {keyTitle}\n                </span>\n              )}\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\n            key={`extra-${key}`}\n            className={cn(\n              \"grid items-center gap-2\",\n              ctx.presentation\n                ? \"grid-cols-[minmax(0,10rem)_minmax(0,1fr)]\"\n                : \"grid-cols-[10rem_1fr_auto]\",\n            )}\n          >\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={properties ? \"ghost\" : \"outline\"}\n          onClick={addEntry}\n          className={cn(\n            \"gap-1.5\",\n            properties && \"col-span-full justify-self-start m-1\",\n            inputSizeClass[\n              properties ? propertyControlSize[ctx.size] : childCtx.size\n            ],\n          )}\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","propertyControlSize","Combobox","keyPickerOptions","cn","inputClass","jsxs","fieldInnerGapClass","fieldInputId","controlHeightClass","Icon","UiTrash","Fragment","PropertyValueEditor","Button","inputSizeClass","UiAdd"],"mappings":";;;;;;;;;;;;;;;;;AAkCO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AACF,GAGG;AACD,QAAM,MAAMA,YAAAA,cAAc,MAAM,KAAK,IAChC,MAAM,QACP,CAAA;AACJ,QAAM,YAA8B;AAAA,IAClC,MAAM;AAAA,IACN,YAAY,MAAM,oBAAoB,CAAA;AAAA,IACtC,GAAI,MAAM,iBAAiB,EAAE,UAAU,MAAM,eAAA,IAAmB,CAAA;AAAA,IAChE,GAAI,MAAM,QAAQ,MAAM,OAAO,KAAK,IAAI,EAAE,OAAO,MAAM,OAAO,MAAA,IAAU,CAAA;AAAA,IACxE,GAAI,MAAM,QAAQ,MAAM,OAAO,SAAS,CAAC,IACrC,EAAE,WAAW,MAAM,OAAO,SAAS,EAAA,IACnC,CAAA;AAAA;AAAA;AAAA;AAAA,IAIJ,GAAI,OAAO,MAAM,OAAO,WAAW,MAAM,YACzC,MAAM,OAAO,WAAW,MAAM,SAC1B,EAAE,aAAa,MAAM,OAAO,WAAW,EAAA,IACvC,CAAA;AAAA,IACJ,GAAI,OAAO,MAAM,OAAO,oBAAoB,MAAM,WAC9C,EAAE,sBAAsB,MAAM,OAAO,oBAAoB,EAAA,IACzD,CAAA;AAAA,IACJ,GAAI,OAAO,MAAM,OAAO,qBAAqB,MAAM,WAC/C,EAAE,uBAAuB,MAAM,OAAO,qBAAqB,EAAA,IAC3D,CAAA;AAAA,IACJ,GAAI,OAAO,MAAM,OAAO,WAAW,MAAM,WACrC,EAAE,aAAa,MAAM,OAAO,WAAW,EAAA,IACvC,CAAA;AAAA,EAAC;AAQP,SACEC,2BAAAA;AAAAA,IAACC,qBAAAA;AAAAA,IAAA;AAAA,MACC,QAAQ,IAAI;AAAA,MACZ,MAAM,IAAI;AAAA,MACV,SAASC,oBAAAA,iBAAiB,UAAU,WAAW,CAAC;AAAA,MAChD,gBAAgBC,oBAAAA;AAAAA,QACd,UAAU,oBAAoB;AAAA,QAC9BC,oBAAAA;AAAAA,MAAA;AAAA,MAED,GAAI,OAAO,UAAU,qBAAqB,MAAM,WAC7C,EAAE,iBAAiB,UAAU,qBAAqB,EAAA,IAClD,CAAA;AAAA,MACH,GAAI,OAAO,UAAU,WAAW,MAAM,WACnC,EAAE,WAAW,UAAU,WAAW,EAAA,IAClC,CAAA;AAAA,MAEH,cAAI,OAAO;AAAA,QACV;AAAA,QACA;AAAA,QACA,CAAC,SAAS,MAAM,SAAS,IAAI;AAAA,QAC7B;AAAA,UACE,GAAG;AAAA,UACH,UAAU,IAAI,YAAY,MAAM,aAAa;AAAA,UAC7C,OAAO,IAAI,QAAQ;AAAA,QAAA;AAAA,MACrB;AAAA,IACF;AAAA,EAAA;AAGN;AAOO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AAGD,QAAM,WAAW,IAAI,YAAY,MAAM,aAAa;AACpD,QAAM,MAAML,YAAAA,cAAc,MAAM,KAAK,IAChC,MAAM,QACP,CAAA;AACJ,QAAM,QAAQ,MAAM,mBAAmB,CAAA;AACvC,QAAM,YAAY,OAAO,KAAK,KAAK;AACnC,QAAM,YAAY,OAAO,KAAK,GAAG,EAAE,OAAO,CAAC,MAAM,EAAE,KAAK,MAAM;AAC9D,QAAM,WAA0B,EAAE,GAAG,KAAK,UAAU,OAAO,IAAI,QAAQ,EAAA;AACvE,QAAM,aAAa,IAAI,OAAO,SAAS;AAEvC,QAAM,KAAK,MAAM,OAAO;AACxB,QAAM,WACJ,QAAO,yBAAI,WAAU,YAAY,GAAG,QAAQ,GAAG,QAAQ;AAKzD,WAAS,kBAAkB,KAAiC;AAC1D,eAAW,EAAE,SAAS,OAAA,KAAY,MAAM,uBAAuB,IAAI;AACjE,UAAI;AACJ,UAAI;AACF,aAAK,IAAI,OAAO,OAAO;AAAA,MACzB,QAAQ;AACN,aAAK;AAAA,MACP;AACA,UAAI,yBAAI,KAAK,KAAM,QAAO;AAAA,IAC5B;AACA,WAAO,MAAM,eAAe,EAAE,MAAM,SAAA;AAAA,EACtC;AAKA,WAAS,eAAe,KAAsB;AAC5C,WAAO,kBAAkB,GAAG,EAAE,UAAU,MAAM;AAAA,EAChD;AAEA,WAAS,SAAS,KAAa,MAAe;AAC5C,UAAM,SAAS,EAAE,GAAG,KAAK,CAAC,GAAG,GAAG,MAAM;AAAA,EACxC;AACA,WAAS,YAAY,QAAgB,QAAgB;AACnD,QAAI,WAAW,OAAQ;AACvB,UAAM,OAAgC,CAAA;AACtC,eAAW,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,GAAG;AACrC,WAAK,MAAM,SAAS,SAAS,CAAC,IAAI;AACpC,UAAM,SAAS,IAAI;AAAA,EACrB;AACA,WAAS,YAAY,KAAa;AAChC,UAAM,OAAO,EAAE,GAAG,IAAA;AAClB,WAAO,KAAK,GAAG;AACf,UAAM,SAAS,IAAI;AAAA,EACrB;AACA,WAAS,WAAW;AAClB,QAAI,MAAM,IAAK;AACf,UAAM,SAAS,EAAE,GAAG,KAAK,IAAI,IAAI;AAAA,EACnC;AAEA,WAAS,gBACP,KACA,aACW;AACX,UAAM,QAAQ,IAAI,OAAO;AAAA,MACvB;AAAA,QACE;AAAA,QACA,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO,IAAI,GAAG,KAAK;AAAA,QACnB,UAAU,CAAC,SAAS,SAAS,KAAK,IAAI;AAAA,QACtC,cAAcM,qBAAAA,mBAAmB,IAAI,cAAc,GAAG;AAAA,MAAA;AAAA,MAExD;AAAA,IAAA;AAEF,YAAO,+BAAO,UAAS;AAAA,EACzB;AAIA,WAAS,mBAAmB,KAAwB;AAClD,WAAO,gBAAgB,KAAK,kBAAkB,GAAG,CAAC;AAAA,EACpD;AAEA,WAAS,UAAU;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAKC;AACD,UAAM,OAAO,aAAaC,6BAAAA,oBAAoB,IAAI,IAAI,IAAI,IAAI;AAC9D,WAAO,MAAM,aACXN,2BAAAA;AAAAA,MAACO,SAAAA;AAAAA,MAAA;AAAA,QACC,SAASC,oBAAAA;AAAAA,UACP,MAAM;AAAA,UACN,CAAC,GAAG,WAAW,GAAG,SAAS;AAAA,UAC3B;AAAA,QAAA;AAAA,QAEF;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA,kBAAkB;AAAA,QAClB;AAAA,QACA,aAAY;AAAA,MAAA;AAAA,IAAA,IAGdR,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAWS,MAAAA,GAAGC,oBAAAA,WAAW,IAAI,GAAG,WAAW;AAAA,QAC3C;AAAA,QACA,UAAU;AAAA,QACV,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGtD;AAEA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF,MAAAA;AAAAA,QACT,aAAa,yCAAyC;AAAA,QACtD,CAAC,cACC,CAAC,IAAI,gBACL;AAAA,QACF,CAAC,cAAcG,sCAAmB,SAAS,IAAI;AAAA,MAAA;AAAA,MAGhD,UAAA;AAAA,QAAA,UAAU;AAAA,UAAI,CAAC,QACd,aACEZ,2BAAAA,IAAC,SAAyB,WAAU,YACjC,cAAI,OAAO;AAAA,YACV;AAAA,cACE;AAAA,cACA,MAAM,MAAM,GAAG;AAAA,cACf,UACE,MAAM,QAAQ,MAAM,OAAO,QAAQ,KACnC,MAAM,OAAO,SAAS,SAAS,GAAG;AAAA,cACpC,OAAO,IAAI,GAAG;AAAA,cACd,UAAU,CAAC,SAAS,SAAS,KAAK,IAAI;AAAA,cACtC,cAAcK,qBAAAA,mBAAmB,IAAI,cAAc,GAAG;AAAA,YAAA;AAAA,YAExD;AAAA,UAAA,EACF,GAbQ,SAAS,GAAG,EActB,IAEAM,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAU;AAAA,cAEV,UAAA;AAAA,gBAAAX,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAASa,oBAAAA;AAAAA,sBACPR,wCAAmB,IAAI,cAAc,GAAG;AAAA,sBACxC,SAAS;AAAA,oBAAA;AAAA,oBAEX,WAAU;AAAA,oBACV,OAAO;AAAA,oBAEN,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEHL,2BAAAA,IAAC,OAAA,EAAI,WAAU,WACZ,UAAA,gBAAgB,KAAK,MAAM,GAAG,KAAK,EAAE,MAAM,SAAA,CAAU,EAAA,CACxD;AAAA,cAAA;AAAA,YAAA;AAAA,YAfK,SAAS,GAAG;AAAA,UAAA;AAAA,QAgBnB;AAAA,QAGH,UAAU,IAAI,CAAC,QAAQ;;AACtB,gBAAM,aAAa,IAAI,eACrBA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWS,MAAAA;AAAAA,gBACT;AAAA,gBACAK,mBAAAA,mBAAmB,SAAS,IAAI;AAAA,gBAChC,MAAM,aACF,oBACA;AAAA,cAAA;AAAA,cAGL,YAAA,iBAAM,eAAN,mBAAkB,KAAK,CAAC,WAAW,OAAO,UAAU,SAApD,mBAA0D,UACzD;AAAA,YAAA;AAAA,UAAA,IAGJ,UAAU;AAAA,YACR;AAAA,YACA,OAAO;AAAA,YACP,UAAU,CAAC,SAAS,YAAY,KAAK,IAAI;AAAA,UAAA,CAC1C;AAEH,gBAAM,eAAe,CAAC,WACpBd,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAY,UAAU,GAAG;AAAA,cACzB,WAAWS,MAAAA;AAAAA,gBACT;AAAA,gBACAK,mBAAAA,mBAAmB,SAAS,IAAI;AAAA,cAAA;AAAA,cAElC,SAAS,MAAM,YAAY,GAAG;AAAA,cAE9B,UAAAd,2BAAAA,IAACe,WAAA,EAAK,MAAMC,QAAAA,SAAS,WAAU,UAAA,CAAU;AAAA,YAAA;AAAA,UAAA,IAEzC;AACJ,cAAI,YAAY;AACd,kBAAM,eAAeX,qBAAAA,mBAAmB,IAAI,cAAc,GAAG;AAC7D,kBAAM,aACJ,iBAAM,eAAN,mBAAkB,KAAK,CAAC,WAAW,OAAO,UAAU,SAApD,mBAA0D,WACzD,OAAO;AACV,mBACEL,2BAAAA,IAAC,OAAA,EAAyB,WAAU,YACjC,cAAI,OAAO;AAAA,cACV;AAAA,gBACE;AAAA,gBACA,MAAM,EAAE,GAAG,kBAAkB,GAAG,GAAG,OAAO,SAAA;AAAA,gBAC1C,UAAU;AAAA,gBACV,OAAO,IAAI,GAAG;AAAA,gBACd,UAAU,CAAC,SAAS,SAAS,KAAK,IAAI;AAAA,gBACtC;AAAA,cAAA;AAAA,cAEF;AAAA,gBACE,GAAG;AAAA,gBACH,MAAM;AAAA,kBACJ,GAAG,SAAS;AAAA,kBACZ,CAAC,OAAO,OAAO,aACb,mCAAS,kBAAiB,eACtB,QACA;AAAA,oBACE,GAAG;AAAA,oBACH,OACEW,2BAAAA,KAAAM,qBAAA,EACE,UAAA;AAAA,sBAAAjB,2BAAAA,IAAC,QAAA,EAAK,WAAU,WAAW,UAAA,MAAM,OAAM;AAAA,sBACvCA,2BAAAA;AAAAA,wBAACkB,yBAAAA;AAAAA,wBAAA;AAAA,0BACC,kBAAiB;AAAA,0BACjB,OAAO;AAAA,4BACL,GAAG;AAAA,4BACH,MAAM;AAAA,4BACN,OAAO,GAAG,QAAQ;AAAA,4BAClB,OAAO;AAAA,4BACP,UAAU,CAAC,SACT,YAAY,KAAK,OAAO,IAAI,CAAC;AAAA,0BAAA;AAAA,0BAEjC,SAAS,GAAGL,iCAAa,cAAc,IAAI,QAAQ,CAAC;AAAA,0BACpD,KAAK;AAAA,4BACH,GAAG;AAAA,4BACH,MAAMP,6BAAAA,oBAAoB,IAAI,IAAI;AAAA,0BAAA;AAAA,0BAEpC,eAAe,CAAC,iBACdN,2BAAAA,IAAC,UAAM,UAAA,OAAO,aAAa,KAAK,GAAE;AAAA,0BAEpC,cAAc,CAAC,UACbW,2BAAAA,KAAC,OAAA,EAAI,WAAU,mCACZ,UAAA;AAAA,4BAAA,UAAU;AAAA,8BACT;AAAA,8BACA,OAAO,OAAO,MAAM,KAAK;AAAA,8BACzB,UAAU,MAAM;AAAA,4BAAA,CACjB;AAAA,4BACA;AAAA,0BAAA,EAAA,CACH;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBAEJ,EAAA,CACF;AAAA,kBAAA;AAAA,gBAEJ;AAAA,cACR;AAAA,YACF,EACF,GAxDQ,SAAS,GAAG,EAyDtB;AAAA,UAEJ;AAMA,cAAI,eAAe,GAAG,GAAG;AACvB,mBACEA,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAWF,MAAAA;AAAAA,kBACT;AAAA,kBACA,CAAC,IAAI,gBAAgB;AAAA,gBAAA;AAAA,gBAGtB,UAAA;AAAA,kBAAA,YACCT,2BAAAA,IAAC,QAAA,EAAK,WAAU,mDACb,UAAA,UACH;AAAA,kBAEFW,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,oBAAAX,2BAAAA,IAAC,OAAA,EAAI,WAAU,kBAAkB,UAAA,YAAW;AAAA,oBAC3C;AAAA,kBAAA,GACH;AAAA,iDACC,OAAA,EAAI,WAAU,WAAW,UAAA,mBAAmB,GAAG,EAAA,CAAE;AAAA,gBAAA;AAAA,cAAA;AAAA,cAf7C,SAAS,GAAG;AAAA,YAAA;AAAA,UAkBvB;AACA,iBACEW,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAWF,MAAAA;AAAAA,gBACT;AAAA,gBACA,IAAI,eACA,8CACA;AAAA,cAAA;AAAA,cAGL,UAAA;AAAA,gBAAA;AAAA,+CACA,OAAA,EAAI,WAAU,WAAW,UAAA,mBAAmB,GAAG,GAAE;AAAA,gBACjD;AAAA,cAAA;AAAA,YAAA;AAAA,YAVI,SAAS,GAAG;AAAA,UAAA;AAAA,QAavB,CAAC;AAAA,QACA,CAAC,YAAY,MAAM,mBAAmB,SACrCE,2BAAAA;AAAAA,UAACQ,OAAAA;AAAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,aAAa,UAAU;AAAA,YAChC,SAAS;AAAA,YACT,WAAWV,MAAAA;AAAAA,cACT;AAAA,cACA,cAAc;AAAA,cACdW,mBAAAA,eACE,aAAad,6BAAAA,oBAAoB,IAAI,IAAI,IAAI,SAAS,IACxD;AAAA,YAAA;AAAA,YAGF,UAAA;AAAA,cAAAN,2BAAAA,IAACe,KAAAA,MAAA,EAAK,MAAMM,MAAAA,OAAO,WAAU,WAAU;AAAA,cAAE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAE3C;AAAA,IAAA;AAAA,EAAA;AAIR;;;"}

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

@@ -1,9 +1,9 @@
 import { FieldControl, RenderContext } from './json-schema-form-types';
-export declare function ObjectControl({ field, ctx }: {
+export declare function ObjectControl({ field, ctx, }: {
     field: FieldControl;
     ctx: RenderContext;
 }): import("react").JSX.Element;
-export declare function StringMapControl({ field, ctx }: {
+export declare function StringMapControl({ field, ctx, }: {
     field: FieldControl;
     ctx: RenderContext;
 }): import("react").JSX.Element;

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":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAwC,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAgBlH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE;IAAE,KAAK,EAAE,YAAY,CAAC;IAAC,GAAG,EAAE,aAAa,CAAA;CAAE,+BA8CxF;AAOD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE;IAAE,KAAK,EAAE,YAAY,CAAC;IAAC,GAAG,EAAE,aAAa,CAAA;CAAE,+BAkK3F"}
+{"version":3,"file":"json-schema-form-object.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-object.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,YAAY,EAGZ,aAAa,EACd,MAAM,0BAA0B,CAAC;AAsBlC,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,GAAG,GACJ,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,GAAG,EAAE,aAAa,CAAC;CACpB,+BA+DA;AAOD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,GAAG,GACJ,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,GAAG,EAAE,aAAa,CAAC;CACpB,+BA0UA"}