@flanksource/clicky-ui 0.3.54 → 0.3.56

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

@@ -0,0 +1,48 @@
+const require_InputField = require("./InputField.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/json-schema-form-json.tsx
+function JsonControl({ field, fieldId, readOnly }) {
+	const serialized = JSON.stringify(field.value, null, 2) ?? "";
+	const [draft, setDraft] = (0, react.useState)({
+		source: serialized,
+		text: serialized
+	});
+	const text = draft.source === serialized ? draft.text : serialized;
+	const error = draft.source === serialized ? draft.error : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputField.InputField, {
+			as: "textarea",
+			id: fieldId,
+			"aria-label": field.label,
+			value: text,
+			readOnly,
+			inputClassName: "min-h-28 font-mono text-xs",
+			"aria-invalid": Boolean(error),
+			onChange: (next) => {
+				try {
+					const value = JSON.parse(next);
+					field.onChange(value);
+					setDraft({
+						source: JSON.stringify(value, null, 2) ?? "",
+						text: next
+					});
+				} catch (error) {
+					setDraft({
+						source: serialized,
+						text: next,
+						error: error instanceof Error ? error.message : String(error)
+					});
+				}
+			}
+		}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			role: "alert",
+			className: "text-xs text-destructive",
+			children: error
+		})]
+	});
+}
+exports.JsonControl = JsonControl;
+
+//# sourceMappingURL=json-schema-form-json.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-json.cjs","names":["useState","InputField"],"sources":["../../src/components/json-schema-form-json.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { InputField } from \"./InputField\";\nimport type { FieldControl } from \"./json-schema-form-types\";\n\nexport function JsonControl({ field, fieldId, readOnly }: { field: FieldControl; fieldId: string; readOnly: boolean }) {\n  const serialized = JSON.stringify(field.value, null, 2) ?? \"\";\n  const [draft, setDraft] = useState<{ source: string; text: string; error?: string }>({ source: serialized, text: serialized });\n  const text = draft.source === serialized ? draft.text : serialized;\n  const error = draft.source === serialized ? draft.error : undefined;\n  return <div className=\"min-w-0\">\n    <InputField as=\"textarea\" id={fieldId} aria-label={field.label} value={text} readOnly={readOnly} inputClassName=\"min-h-28 font-mono text-xs\"\n      aria-invalid={Boolean(error)} onChange={(next) => {\n        try {\n          const value: unknown = JSON.parse(next);\n          field.onChange(value);\n          setDraft({ source: JSON.stringify(value, null, 2) ?? \"\", text: next });\n        } catch (error) {\n          setDraft({ source: serialized, text: next, error: error instanceof Error ? error.message : String(error) });\n        }\n      }} />\n    {error && <p role=\"alert\" className=\"text-xs text-destructive\">{error}</p>}\n  </div>;\n}\n"],"mappings":";;;;AAIA,SAAgB,YAAY,EAAE,OAAO,SAAS,YAAyE;CACrH,MAAM,aAAa,KAAK,UAAU,MAAM,OAAO,MAAM,CAAC,KAAK;CAC3D,MAAM,CAAC,OAAO,aAAA,GAAYA,MAAAA,SAAAA,CAA2D;EAAE,QAAQ;EAAY,MAAM;CAAW,CAAC;CAC7H,MAAM,OAAO,MAAM,WAAW,aAAa,MAAM,OAAO;CACxD,MAAM,QAAQ,MAAM,WAAW,aAAa,MAAM,QAAQ,KAAA;CAC1D,OAAO,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACL,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;GAAY,IAAG;GAAW,IAAI;GAAS,cAAY,MAAM;GAAO,OAAO;GAAgB;GAAU,gBAAe;GAC9G,gBAAc,QAAQ,KAAK;GAAG,WAAW,SAAS;IAChD,IAAI;KACF,MAAM,QAAiB,KAAK,MAAM,IAAI;KACtC,MAAM,SAAS,KAAK;KACpB,SAAS;MAAE,QAAQ,KAAK,UAAU,OAAO,MAAM,CAAC,KAAK;MAAI,MAAM;KAAK,CAAC;IACvE,SAAS,OAAO;KACd,SAAS;MAAE,QAAQ;MAAY,MAAM;MAAM,OAAO,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;KAAE,CAAC;IAC5G;GACF;EAAI,CAAA,GACL,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;GAAG,MAAK;GAAQ,WAAU;GAA4B,UAAA;EAAS,CAAA,CACtE;;AACP"}

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

@@ -0,0 +1,7 @@
+import { FieldControl } from './json-schema-form-types.js';
+export declare function JsonControl({ field, fieldId, readOnly }: {
+    field: FieldControl;
+    fieldId: string;
+    readOnly: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=json-schema-form-json.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-json.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-json.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,+BAkBpH"}

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

@@ -0,0 +1,48 @@
+import { InputField } from "./InputField.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/json-schema-form-json.tsx
+function JsonControl({ field, fieldId, readOnly }) {
+	const serialized = JSON.stringify(field.value, null, 2) ?? "";
+	const [draft, setDraft] = useState({
+		source: serialized,
+		text: serialized
+	});
+	const text = draft.source === serialized ? draft.text : serialized;
+	const error = draft.source === serialized ? draft.error : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsx(InputField, {
+			as: "textarea",
+			id: fieldId,
+			"aria-label": field.label,
+			value: text,
+			readOnly,
+			inputClassName: "min-h-28 font-mono text-xs",
+			"aria-invalid": Boolean(error),
+			onChange: (next) => {
+				try {
+					const value = JSON.parse(next);
+					field.onChange(value);
+					setDraft({
+						source: JSON.stringify(value, null, 2) ?? "",
+						text: next
+					});
+				} catch (error) {
+					setDraft({
+						source: serialized,
+						text: next,
+						error: error instanceof Error ? error.message : String(error)
+					});
+				}
+			}
+		}), error && /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "text-xs text-destructive",
+			children: error
+		})]
+	});
+}
+export { JsonControl };
+
+//# sourceMappingURL=json-schema-form-json.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-json.js","names":[],"sources":["../../src/components/json-schema-form-json.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { InputField } from \"./InputField\";\nimport type { FieldControl } from \"./json-schema-form-types\";\n\nexport function JsonControl({ field, fieldId, readOnly }: { field: FieldControl; fieldId: string; readOnly: boolean }) {\n  const serialized = JSON.stringify(field.value, null, 2) ?? \"\";\n  const [draft, setDraft] = useState<{ source: string; text: string; error?: string }>({ source: serialized, text: serialized });\n  const text = draft.source === serialized ? draft.text : serialized;\n  const error = draft.source === serialized ? draft.error : undefined;\n  return <div className=\"min-w-0\">\n    <InputField as=\"textarea\" id={fieldId} aria-label={field.label} value={text} readOnly={readOnly} inputClassName=\"min-h-28 font-mono text-xs\"\n      aria-invalid={Boolean(error)} onChange={(next) => {\n        try {\n          const value: unknown = JSON.parse(next);\n          field.onChange(value);\n          setDraft({ source: JSON.stringify(value, null, 2) ?? \"\", text: next });\n        } catch (error) {\n          setDraft({ source: serialized, text: next, error: error instanceof Error ? error.message : String(error) });\n        }\n      }} />\n    {error && <p role=\"alert\" className=\"text-xs text-destructive\">{error}</p>}\n  </div>;\n}\n"],"mappings":";;;;AAIA,SAAgB,YAAY,EAAE,OAAO,SAAS,YAAyE;CACrH,MAAM,aAAa,KAAK,UAAU,MAAM,OAAO,MAAM,CAAC,KAAK;CAC3D,MAAM,CAAC,OAAO,YAAY,SAA2D;EAAE,QAAQ;EAAY,MAAM;CAAW,CAAC;CAC7H,MAAM,OAAO,MAAM,WAAW,aAAa,MAAM,OAAO;CACxD,MAAM,QAAQ,MAAM,WAAW,aAAa,MAAM,QAAQ,KAAA;CAC1D,OAAO,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACL,oBAAC,YAAD;GAAY,IAAG;GAAW,IAAI;GAAS,cAAY,MAAM;GAAO,OAAO;GAAgB;GAAU,gBAAe;GAC9G,gBAAc,QAAQ,KAAK;GAAG,WAAW,SAAS;IAChD,IAAI;KACF,MAAM,QAAiB,KAAK,MAAM,IAAI;KACtC,MAAM,SAAS,KAAK;KACpB,SAAS;MAAE,QAAQ,KAAK,UAAU,OAAO,MAAM,CAAC,KAAK;MAAI,MAAM;KAAK,CAAC;IACvE,SAAS,OAAO;KACd,SAAS;MAAE,QAAQ;MAAY,MAAM;MAAM,OAAO,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;KAAE,CAAC;IAC5G;GACF;EAAI,CAAA,GACL,SAAS,oBAAC,KAAD;GAAG,MAAK;GAAQ,WAAU;GAA4B,UAAA;EAAS,CAAA,CACtE;;AACP"}

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

@@ -5,6 +5,8 @@ const require_json_schema_form_size = require("./json-schema-form-size.cjs");
 const require_properties_context = require("../data/properties-context.cjs");
 const require_HoverCard = require("../overlay/HoverCard.cjs");
 require("./json-schema-form-utils.cjs");
+const require_json_schema_form_help_links = require("./json-schema-form-help-links.cjs");
+const require_json_schema_form_help_model = require("./json-schema-form-help-model.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/components/json-schema-form-layout.tsx
@@ -102,9 +104,9 @@ function FieldLabel({ field, fieldId, size, helpDisplay }) {
 				className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
 				children: field.badge
 			}),
-			helpDisplay === "hover" && field.helper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpHint, {
+			helpDisplay === "hover" && require_json_schema_form_help_model.hasFormHelp(field) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpHint, {
 				label: field.label,
-				helper: field.helper
+				helper: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_json_schema_form_help_links.FormHelp, { field })
 			})
 		]
 	});
@@ -126,7 +128,7 @@ function HelpHint({ label, helper }) {
 	});
 }
 function SectionHeading({ field, label = field.label, size, helpDisplay }) {
-	const { required, badge, helper, labelIcon } = field;
+	const { required, badge, labelIcon } = field;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: require_utils.cn("flex min-w-0 items-center gap-2", require_json_schema_form_size.labelSizeClass[size]),
 		children: [
@@ -146,9 +148,9 @@ function SectionHeading({ field, label = field.label, size, helpDisplay }) {
 				className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
 				children: badge
 			}),
-			helpDisplay === "hover" && helper && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpHint, {
+			helpDisplay === "hover" && require_json_schema_form_help_model.hasFormHelp(field) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpHint, {
 				label,
-				helper
+				helper: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_json_schema_form_help_links.FormHelp, { field })
 			})
 		]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-layout.cjs","names":["useContext","PropertiesContext","cn","inlineRowGapClass","stackedRowGapClass","controlMinHeightClass","labelSizeClass","LabelIcon","HoverCard","Icon","UiQuestion","fieldInnerGapClass"],"sources":["../../src/components/json-schema-form-layout.tsx"],"sourcesContent":["import { useContext, type ReactNode } from \"react\";\nimport { PropertiesContext } from \"../data/properties-context\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, LabelIcon } from \"../data/Icon\";\nimport { UiQuestion } from \"../icons\";\nimport { HoverCard } from \"../overlay/HoverCard\";\nimport type {\n  FieldControl,\n  FormLayout,\n  GridColumns,\n  HelpDisplay,\n} from \"./json-schema-form-types\";\nimport { DEFAULT_COLUMN_MIN_WIDTH } from \"./json-schema-form-utils\";\nimport {\n  controlMinHeightClass,\n  fieldInnerGapClass,\n  inlineRowGapClass,\n  labelSizeClass,\n  stackedRowGapClass,\n  type FormSize,\n} from \"./json-schema-form-size\";\n\n// FieldsGrid is the container every group of field rows renders into — the\n// top-level form and each nested object/map. In inline mode it owns the single\n// 2-column track definition: `fit-content(labelMaxWidth)` for the label column,\n// `minmax(0, valueMaxWidth)` for the value column. Every field row is a\n// `subgrid` that inherits these tracks, so all labels share one column width and\n// every value lines up — a real form grid, not per-row independent grids.\n// (`fit-content()` is the only valid CSS for \"size to content, clamped to a max\"\n// — `min(w, max-content)` is rejected by the browser, which silently drops the\n// whole declaration and collapses every row to a stacked-looking column. The\n// template is an inline style because Tailwind can't interpolate runtime widths.)\n// Stacked mode is a plain single-column grid.\nexport function FieldsGrid({\n  layout,\n  size,\n  columns,\n  columnMinWidth,\n  columnsMaxWidth,\n  className,\n  children,\n}: {\n  layout: FormLayout;\n  size: FormSize;\n  // Object-level `x-columns`: split a stacked object into N equal columns, or\n  // \"auto\" to fit as many `columnMinWidth`-wide columns as the container allows.\n  // Fields span one column unless they set `x-col-span`. Ignored in inline mode\n  // (which owns its own 2-track label/value layout).\n  columns?: GridColumns;\n  // `x-columns: \"auto\"` only: the minmax() floor for one column, and an optional\n  // cap on the whole grid so controls don't stretch edge to edge on a wide\n  // screen. CSS lengths, applied inline — a runtime width can't be a Tailwind\n  // arbitrary class, because the scanner never sees it.\n  columnMinWidth?: string;\n  columnsMaxWidth?: string;\n  // Object-level `x-classes`: extra classes merged onto the grid container\n  // (e.g. `gap-2`, padding). Applied last so a standard utility wins over the\n  // defaults via tailwind-merge.\n  className?: string;\n  children: ReactNode;\n}) {\n  const propertiesParent = useContext(PropertiesContext);\n  if (layout.mode === \"properties\") {\n    return (\n      <div\n        className={cn(\n          \"min-w-0 overflow-hidden rounded-md border border-border\",\n          propertiesParent &&\n            \"col-span-full grid grid-cols-subgrid rounded-none border-0\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    );\n  }\n  if (layout.mode === \"inline\") {\n    const labelMaxWidth = layout.labelMaxWidth ?? \"40ch\";\n    const valueMaxWidth = layout.valueMaxWidth ?? \"600px\";\n    return (\n      <div\n        className={cn(\"grid\", inlineRowGapClass[size], className)}\n        style={{\n          gridTemplateColumns: `fit-content(${labelMaxWidth}) minmax(0, ${valueMaxWidth})`,\n        }}\n      >\n        {children}\n      </div>\n    );\n  }\n  if (columns === \"auto\") {\n    return (\n      <div\n        className={cn(\"grid gap-x-4\", stackedRowGapClass[size], className)}\n        style={{\n          gridTemplateColumns: `repeat(auto-fill, minmax(${columnMinWidth ?? DEFAULT_COLUMN_MIN_WIDTH}, 1fr))`,\n          ...(columnsMaxWidth ? { maxWidth: columnsMaxWidth } : {}),\n        }}\n      >\n        {children}\n      </div>\n    );\n  }\n  if (columns && columns > 1) {\n    return (\n      <div\n        className={cn(\"grid gap-x-3\", stackedRowGapClass[size], className)}\n        style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}\n      >\n        {children}\n      </div>\n    );\n  }\n  return (\n    <div className={cn(\"grid\", stackedRowGapClass[size], className)}>\n      {children}\n    </div>\n  );\n}\n\n// FieldWrapper lays out a single label + value (+ helper/error). In inline mode\n// it is a `subgrid` row spanning the parent FieldsGrid's two columns, so its\n// label and value snap to the shared label/value tracks (helper/error sit under\n// the value column). In stacked mode the label sits tight above its control as\n// one unit, capped at valueMaxWidth so controls don't stretch edge to edge.\nexport function FieldWrapper({\n  label,\n  value,\n  helper,\n  error,\n  layout,\n  size,\n  maxWidth,\n}: {\n  label: ReactNode;\n  value: ReactNode;\n  helper?: ReactNode;\n  error?: ReactNode;\n  layout: FormLayout;\n  size: FormSize;\n  // Overrides the stacked value-width cap. A field spanning the full row of a\n  // multi-column grid passes \"none\", so it actually fills the row it was given\n  // instead of stopping at the shared 600px cap.\n  maxWidth?: string;\n}) {\n  if (layout.mode === \"inline\") {\n    return (\n      <div className=\"col-span-2 grid grid-cols-subgrid items-start gap-x-3 gap-y-0.5\">\n        <div\n          className={cn(\n            \"flex min-w-0 items-center\",\n            controlMinHeightClass[size],\n          )}\n        >\n          {label}\n        </div>\n        <div className=\"min-w-0\">{value}</div>\n        {helper && (\n          <p className=\"col-start-2 text-xs text-muted-foreground\">{helper}</p>\n        )}\n        {error && (\n          <p className=\"col-start-2 text-xs text-destructive\">{error}</p>\n        )}\n      </div>\n    );\n  }\n  return (\n    <div\n      className=\"flex w-full flex-col gap-1\"\n      style={{ maxWidth: maxWidth ?? layout.valueMaxWidth ?? \"600px\" }}\n    >\n      {label}\n      {value}\n      {helper && <p className=\"text-xs text-muted-foreground\">{helper}</p>}\n      {error && <p className=\"text-xs text-destructive\">{error}</p>}\n    </div>\n  );\n}\n\nexport function FieldLabel({\n  field,\n  fieldId,\n  size,\n  helpDisplay,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  size: FormSize;\n  // When \"hover\", the description rides on the label as a `?` instead of being\n  // rendered as a paragraph under the control by FieldWrapper.\n  helpDisplay?: HelpDisplay;\n}) {\n  return (\n    <label\n      htmlFor={fieldId}\n      className={cn(\n        \"flex min-w-0 items-center gap-2 font-medium\",\n        labelSizeClass[size],\n        field.labelClassName,\n      )}\n    >\n      <LabelIcon\n        icon={field.labelIcon}\n        className=\"shrink-0 text-[15px] text-muted-foreground\"\n      />\n      <span\n        className=\"truncate\"\n        title={field.label !== field.key ? field.key : undefined}\n      >\n        {field.label}\n      </span>\n      {field.required && <span className=\"shrink-0 text-destructive\">*</span>}\n      {field.badge && (\n        <span className=\"shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n          {field.badge}\n        </span>\n      )}\n      {helpDisplay === \"hover\" && field.helper && (\n        <HelpHint label={field.label} helper={field.helper} />\n      )}\n    </label>\n  );\n}\n\n// HelpHint is the `?` affordance that replaces a permanent description\n// paragraph. HoverCard opens on focus as well as hover, so the text stays\n// reachable from the keyboard rather than being mouse-only.\nexport function HelpHint({ label, helper }: { label: string; helper: string }) {\n  return (\n    <HoverCard\n      placement=\"top\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label={`About ${label}`}\n          className=\"shrink-0 cursor-help text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          <Icon icon={UiQuestion} className=\"text-sm\" />\n        </button>\n      }\n      cardClassName=\"max-w-xs whitespace-normal text-left text-xs font-normal text-foreground\"\n    >\n      {helper}\n    </HoverCard>\n  );\n}\n\n// SectionHeading is the content of a section's header row: the label with its\n// icon, required marker, badge and hover help. It is the label node buildField\n// hands to post extensions for a field that renders as a section; a section\n// with an empty title has no heading at all (see ObjectSection).\nexport function SectionHeading({\n  field,\n  label = field.label,\n  size,\n  helpDisplay,\n}: {\n  field: FieldControl;\n  label?: string;\n  size: FormSize;\n  helpDisplay?: HelpDisplay;\n}) {\n  const { required, badge, helper, labelIcon } = field;\n  return (\n    <span className={cn(\"flex min-w-0 items-center gap-2\", labelSizeClass[size])}>\n      <LabelIcon\n        icon={labelIcon}\n        className=\"shrink-0 text-[15px] text-muted-foreground\"\n      />\n      <span className=\"min-w-0 truncate\">{label}</span>\n      {required && <span className=\"shrink-0 text-destructive\">*</span>}\n      {badge && (\n        <span className=\"shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n          {badge}\n        </span>\n      )}\n      {helpDisplay === \"hover\" && helper && <HelpHint label={label} helper={helper} />}\n    </span>\n  );\n}\n\n// ObjectSection renders a nested object as a labelled section: a header row\n// (the field label + required/badge) above its fields, which fill the full\n// width below. It replaces the inline label + bordered box so nested objects\n// read as flat, headed groups rather than indented sub-forms. `col-span-full`\n// makes it span both tracks of an inline FieldsGrid (full width, not crammed\n// into the value column); in a stacked single-column grid it is a no-op.\n//\n// A field whose schema gives it an EMPTY title renders with no header at all:\n// the host already titled it (a collapsible section of its own, a dialog), and\n// a headed section inside that one would say the same word twice. A missing\n// title is not this — it falls back to the humanised key, as every other\n// control does — so only an explicit `\"title\": \"\"` opts out.\n//\n// The header row is a separate SectionHeading node (null for no header), so\n// the post extensions that decorate every other field's label decorate a\n// section's header too.\nexport function ObjectSection({\n  heading,\n  size,\n  helper,\n  helpDisplay,\n  children,\n}: {\n  heading: ReactNode;\n  size: FormSize;\n  helper?: string;\n  helpDisplay?: HelpDisplay;\n  children: ReactNode;\n}) {\n  const hoverHelp = helpDisplay === \"hover\" && !!helper;\n  return (\n    <div\n      className={cn(\n        \"col-span-full flex min-w-0 max-w-full flex-col\",\n        fieldInnerGapClass[size],\n      )}\n    >\n      {heading != null && (\n        // The header row owns the rule and weight, so whatever a post\n        // extension puts beside the heading sits inline in the same row.\n        <div\n          data-jsf-section-heading\n          className={cn(\n            \"flex min-w-0 items-center gap-2 border-b border-border pb-1 font-semibold\",\n            labelSizeClass[size],\n          )}\n        >\n          {heading}\n        </div>\n      )}\n      {helper && !hoverHelp && (\n        <p className=\"min-w-0 break-words text-xs text-muted-foreground\">\n          {helper}\n        </p>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"json-schema-form-layout.cjs","names":["useContext","PropertiesContext","cn","inlineRowGapClass","stackedRowGapClass","controlMinHeightClass","labelSizeClass","LabelIcon","hasFormHelp","FormHelp","HoverCard","Icon","UiQuestion","fieldInnerGapClass"],"sources":["../../src/components/json-schema-form-layout.tsx"],"sourcesContent":["import { useContext, type ReactNode } from \"react\";\nimport { PropertiesContext } from \"../data/properties-context\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, LabelIcon } from \"../data/Icon\";\nimport { UiQuestion } from \"../icons\";\nimport { HoverCard } from \"../overlay/HoverCard\";\nimport type {\n  FieldControl,\n  FormLayout,\n  GridColumns,\n  HelpDisplay,\n} from \"./json-schema-form-types\";\nimport { DEFAULT_COLUMN_MIN_WIDTH } from \"./json-schema-form-utils\";\nimport { FormHelp } from \"./json-schema-form-help-links\";\nimport { hasFormHelp } from \"./json-schema-form-help-model\";\nimport {\n  controlMinHeightClass,\n  fieldInnerGapClass,\n  inlineRowGapClass,\n  labelSizeClass,\n  stackedRowGapClass,\n  type FormSize,\n} from \"./json-schema-form-size\";\n\n// FieldsGrid is the container every group of field rows renders into — the\n// top-level form and each nested object/map. In inline mode it owns the single\n// 2-column track definition: `fit-content(labelMaxWidth)` for the label column,\n// `minmax(0, valueMaxWidth)` for the value column. Every field row is a\n// `subgrid` that inherits these tracks, so all labels share one column width and\n// every value lines up — a real form grid, not per-row independent grids.\n// (`fit-content()` is the only valid CSS for \"size to content, clamped to a max\"\n// — `min(w, max-content)` is rejected by the browser, which silently drops the\n// whole declaration and collapses every row to a stacked-looking column. The\n// template is an inline style because Tailwind can't interpolate runtime widths.)\n// Stacked mode is a plain single-column grid.\nexport function FieldsGrid({\n  layout,\n  size,\n  columns,\n  columnMinWidth,\n  columnsMaxWidth,\n  className,\n  children,\n}: {\n  layout: FormLayout;\n  size: FormSize;\n  // Object-level `x-columns`: split a stacked object into N equal columns, or\n  // \"auto\" to fit as many `columnMinWidth`-wide columns as the container allows.\n  // Fields span one column unless they set `x-col-span`. Ignored in inline mode\n  // (which owns its own 2-track label/value layout).\n  columns?: GridColumns;\n  // `x-columns: \"auto\"` only: the minmax() floor for one column, and an optional\n  // cap on the whole grid so controls don't stretch edge to edge on a wide\n  // screen. CSS lengths, applied inline — a runtime width can't be a Tailwind\n  // arbitrary class, because the scanner never sees it.\n  columnMinWidth?: string;\n  columnsMaxWidth?: string;\n  // Object-level `x-classes`: extra classes merged onto the grid container\n  // (e.g. `gap-2`, padding). Applied last so a standard utility wins over the\n  // defaults via tailwind-merge.\n  className?: string;\n  children: ReactNode;\n}) {\n  const propertiesParent = useContext(PropertiesContext);\n  if (layout.mode === \"properties\") {\n    return (\n      <div\n        className={cn(\n          \"min-w-0 overflow-hidden rounded-md border border-border\",\n          propertiesParent &&\n            \"col-span-full grid grid-cols-subgrid rounded-none border-0\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    );\n  }\n  if (layout.mode === \"inline\") {\n    const labelMaxWidth = layout.labelMaxWidth ?? \"40ch\";\n    const valueMaxWidth = layout.valueMaxWidth ?? \"600px\";\n    return (\n      <div\n        className={cn(\"grid\", inlineRowGapClass[size], className)}\n        style={{\n          gridTemplateColumns: `fit-content(${labelMaxWidth}) minmax(0, ${valueMaxWidth})`,\n        }}\n      >\n        {children}\n      </div>\n    );\n  }\n  if (columns === \"auto\") {\n    return (\n      <div\n        className={cn(\"grid gap-x-4\", stackedRowGapClass[size], className)}\n        style={{\n          gridTemplateColumns: `repeat(auto-fill, minmax(${columnMinWidth ?? DEFAULT_COLUMN_MIN_WIDTH}, 1fr))`,\n          ...(columnsMaxWidth ? { maxWidth: columnsMaxWidth } : {}),\n        }}\n      >\n        {children}\n      </div>\n    );\n  }\n  if (columns && columns > 1) {\n    return (\n      <div\n        className={cn(\"grid gap-x-3\", stackedRowGapClass[size], className)}\n        style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}\n      >\n        {children}\n      </div>\n    );\n  }\n  return (\n    <div className={cn(\"grid\", stackedRowGapClass[size], className)}>\n      {children}\n    </div>\n  );\n}\n\n// FieldWrapper lays out a single label + value (+ helper/error). In inline mode\n// it is a `subgrid` row spanning the parent FieldsGrid's two columns, so its\n// label and value snap to the shared label/value tracks (helper/error sit under\n// the value column). In stacked mode the label sits tight above its control as\n// one unit, capped at valueMaxWidth so controls don't stretch edge to edge.\nexport function FieldWrapper({\n  label,\n  value,\n  helper,\n  error,\n  layout,\n  size,\n  maxWidth,\n}: {\n  label: ReactNode;\n  value: ReactNode;\n  helper?: ReactNode;\n  error?: ReactNode;\n  layout: FormLayout;\n  size: FormSize;\n  // Overrides the stacked value-width cap. A field spanning the full row of a\n  // multi-column grid passes \"none\", so it actually fills the row it was given\n  // instead of stopping at the shared 600px cap.\n  maxWidth?: string;\n}) {\n  if (layout.mode === \"inline\") {\n    return (\n      <div className=\"col-span-2 grid grid-cols-subgrid items-start gap-x-3 gap-y-0.5\">\n        <div\n          className={cn(\n            \"flex min-w-0 items-center\",\n            controlMinHeightClass[size],\n          )}\n        >\n          {label}\n        </div>\n        <div className=\"min-w-0\">{value}</div>\n        {helper && (\n          <p className=\"col-start-2 text-xs text-muted-foreground\">{helper}</p>\n        )}\n        {error && (\n          <p className=\"col-start-2 text-xs text-destructive\">{error}</p>\n        )}\n      </div>\n    );\n  }\n  return (\n    <div\n      className=\"flex w-full flex-col gap-1\"\n      style={{ maxWidth: maxWidth ?? layout.valueMaxWidth ?? \"600px\" }}\n    >\n      {label}\n      {value}\n      {helper && <p className=\"text-xs text-muted-foreground\">{helper}</p>}\n      {error && <p className=\"text-xs text-destructive\">{error}</p>}\n    </div>\n  );\n}\n\nexport function FieldLabel({\n  field,\n  fieldId,\n  size,\n  helpDisplay,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  size: FormSize;\n  // When \"hover\", the description rides on the label as a `?` instead of being\n  // rendered as a paragraph under the control by FieldWrapper.\n  helpDisplay?: HelpDisplay;\n}) {\n  return (\n    <label\n      htmlFor={fieldId}\n      className={cn(\n        \"flex min-w-0 items-center gap-2 font-medium\",\n        labelSizeClass[size],\n        field.labelClassName,\n      )}\n    >\n      <LabelIcon\n        icon={field.labelIcon}\n        className=\"shrink-0 text-[15px] text-muted-foreground\"\n      />\n      <span\n        className=\"truncate\"\n        title={field.label !== field.key ? field.key : undefined}\n      >\n        {field.label}\n      </span>\n      {field.required && <span className=\"shrink-0 text-destructive\">*</span>}\n      {field.badge && (\n        <span className=\"shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n          {field.badge}\n        </span>\n      )}\n      {helpDisplay === \"hover\" && hasFormHelp(field) && (\n        <HelpHint label={field.label} helper={<FormHelp field={field} />} />\n      )}\n    </label>\n  );\n}\n\n// HelpHint is the `?` affordance that replaces a permanent description\n// paragraph. HoverCard opens on focus as well as hover, so the text stays\n// reachable from the keyboard rather than being mouse-only.\nexport function HelpHint({ label, helper }: { label: string; helper: ReactNode }) {\n  return (\n    <HoverCard\n      placement=\"top\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label={`About ${label}`}\n          className=\"shrink-0 cursor-help text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          <Icon icon={UiQuestion} className=\"text-sm\" />\n        </button>\n      }\n      cardClassName=\"max-w-xs whitespace-normal text-left text-xs font-normal text-foreground\"\n    >\n      {helper}\n    </HoverCard>\n  );\n}\n\n// SectionHeading is the content of a section's header row: the label with its\n// icon, required marker, badge and hover help. It is the label node buildField\n// hands to post extensions for a field that renders as a section; a section\n// with an empty title has no heading at all (see ObjectSection).\nexport function SectionHeading({\n  field,\n  label = field.label,\n  size,\n  helpDisplay,\n}: {\n  field: FieldControl;\n  label?: string;\n  size: FormSize;\n  helpDisplay?: HelpDisplay;\n}) {\n  const { required, badge, labelIcon } = field;\n  return (\n    <span className={cn(\"flex min-w-0 items-center gap-2\", labelSizeClass[size])}>\n      <LabelIcon\n        icon={labelIcon}\n        className=\"shrink-0 text-[15px] text-muted-foreground\"\n      />\n      <span className=\"min-w-0 truncate\">{label}</span>\n      {required && <span className=\"shrink-0 text-destructive\">*</span>}\n      {badge && (\n        <span className=\"shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n          {badge}\n        </span>\n      )}\n      {helpDisplay === \"hover\" && hasFormHelp(field) && <HelpHint label={label} helper={<FormHelp field={field} />} />}\n    </span>\n  );\n}\n\n// ObjectSection renders a nested object as a labelled section: a header row\n// (the field label + required/badge) above its fields, which fill the full\n// width below. It replaces the inline label + bordered box so nested objects\n// read as flat, headed groups rather than indented sub-forms. `col-span-full`\n// makes it span both tracks of an inline FieldsGrid (full width, not crammed\n// into the value column); in a stacked single-column grid it is a no-op.\n//\n// A field whose schema gives it an EMPTY title renders with no header at all:\n// the host already titled it (a collapsible section of its own, a dialog), and\n// a headed section inside that one would say the same word twice. A missing\n// title is not this — it falls back to the humanised key, as every other\n// control does — so only an explicit `\"title\": \"\"` opts out.\n//\n// The header row is a separate SectionHeading node (null for no header), so\n// the post extensions that decorate every other field's label decorate a\n// section's header too.\nexport function ObjectSection({\n  heading,\n  size,\n  helper,\n  helpDisplay,\n  children,\n}: {\n  heading: ReactNode;\n  size: FormSize;\n  helper?: ReactNode;\n  helpDisplay?: HelpDisplay;\n  children: ReactNode;\n}) {\n  const hoverHelp = helpDisplay === \"hover\" && !!helper;\n  return (\n    <div\n      className={cn(\n        \"col-span-full flex min-w-0 max-w-full flex-col\",\n        fieldInnerGapClass[size],\n      )}\n    >\n      {heading != null && (\n        // The header row owns the rule and weight, so whatever a post\n        // extension puts beside the heading sits inline in the same row.\n        <div\n          data-jsf-section-heading\n          className={cn(\n            \"flex min-w-0 items-center gap-2 border-b border-border pb-1 font-semibold\",\n            labelSizeClass[size],\n          )}\n        >\n          {heading}\n        </div>\n      )}\n      {helper && !hoverHelp && (\n        <p className=\"min-w-0 break-words text-xs text-muted-foreground\">\n          {helper}\n        </p>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -27,7 +27,7 @@ export declare function FieldLabel({ field, fieldId, size, helpDisplay, }: {
 }): import("react").JSX.Element;
 export declare function HelpHint({ label, helper }: {
     label: string;
-    helper: string;
+    helper: ReactNode;
 }): import("react").JSX.Element;
 export declare function SectionHeading({ field, label, size, helpDisplay, }: {
     field: FieldControl;
@@ -38,7 +38,7 @@ export declare function SectionHeading({ field, label, size, helpDisplay, }: {
 export declare function ObjectSection({ heading, size, helper, helpDisplay, children, }: {
     heading: ReactNode;
     size: FormSize;
-    helper?: string;
+    helper?: ReactNode;
     helpDisplay?: HelpDisplay;
     children: ReactNode;
 }): import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-layout.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMnD,OAAO,KAAK,EACV,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACZ,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAML,KAAK,QAAQ,EACd,MAAM,yBAAyB,CAAC;AAajC,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,IAAI,EACJ,OAAO,EACP,cAAc,EACd,eAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IAKf,OAAO,CAAC,EAAE,WAAW,CAAC;IAKtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IAIzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA0DA;AAOD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IAIf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,+BAiCA;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,IAAI,EACJ,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,QAAQ,CAAC;IAGf,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,+BA+BA;AAKD,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,+BAkB5E;AAMD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAmB,EACnB,IAAI,EACJ,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,+BAkBA;AAkBD,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,IAAI,EACJ,MAAM,EACN,WAAW,EACX,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA8BA"}
+{"version":3,"file":"json-schema-form-layout.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMnD,OAAO,KAAK,EACV,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACZ,MAAM,0BAA0B,CAAC;AAIlC,OAAO,EAML,KAAK,QAAQ,EACd,MAAM,yBAAyB,CAAC;AAajC,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,IAAI,EACJ,OAAO,EACP,cAAc,EACd,eAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IAKf,OAAO,CAAC,EAAE,WAAW,CAAC;IAKtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IAIzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA0DA;AAOD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,MAAM,EACN,KAAK,EACL,MAAM,EACN,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IAIf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,+BAiCA;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,IAAI,EACJ,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,QAAQ,CAAC;IAGf,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,+BA+BA;AAKD,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,SAAS,CAAA;CAAE,+BAkB/E;AAMD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAmB,EACnB,IAAI,EACJ,WAAW,GACZ,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,+BAkBA;AAkBD,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,IAAI,EACJ,MAAM,EACN,WAAW,EACX,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA8BA"}

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

@@ -5,6 +5,8 @@ import { controlMinHeightClass, fieldInnerGapClass, inlineRowGapClass, labelSize
 import { PropertiesContext } from "../data/properties-context.js";
 import { HoverCard } from "../overlay/HoverCard.js";
 import "./json-schema-form-utils.js";
+import { FormHelp } from "./json-schema-form-help-links.js";
+import { hasFormHelp } from "./json-schema-form-help-model.js";
 import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/json-schema-form-layout.tsx
@@ -102,9 +104,9 @@ function FieldLabel({ field, fieldId, size, helpDisplay }) {
 				className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
 				children: field.badge
 			}),
-			helpDisplay === "hover" && field.helper && /* @__PURE__ */ jsx(HelpHint, {
+			helpDisplay === "hover" && hasFormHelp(field) && /* @__PURE__ */ jsx(HelpHint, {
 				label: field.label,
-				helper: field.helper
+				helper: /* @__PURE__ */ jsx(FormHelp, { field })
 			})
 		]
 	});
@@ -126,7 +128,7 @@ function HelpHint({ label, helper }) {
 	});
 }
 function SectionHeading({ field, label = field.label, size, helpDisplay }) {
-	const { required, badge, helper, labelIcon } = field;
+	const { required, badge, labelIcon } = field;
 	return /* @__PURE__ */ jsxs("span", {
 		className: cn("flex min-w-0 items-center gap-2", labelSizeClass[size]),
 		children: [
@@ -146,9 +148,9 @@ function SectionHeading({ field, label = field.label, size, helpDisplay }) {
 				className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
 				children: badge
 			}),
-			helpDisplay === "hover" && helper && /* @__PURE__ */ jsx(HelpHint, {
+			helpDisplay === "hover" && hasFormHelp(field) && /* @__PURE__ */ jsx(HelpHint, {
 				label,
-				helper
+				helper: /* @__PURE__ */ jsx(FormHelp, { field })
 			})
 		]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-layout.js","names":[],"sources":["../../src/components/json-schema-form-layout.tsx"],"sourcesContent":["import { useContext, type ReactNode } from \"react\";\nimport { PropertiesContext } from \"../data/properties-context\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, LabelIcon } from \"../data/Icon\";\nimport { UiQuestion } from \"../icons\";\nimport { HoverCard } from \"../overlay/HoverCard\";\nimport type {\n  FieldControl,\n  FormLayout,\n  GridColumns,\n  HelpDisplay,\n} from \"./json-schema-form-types\";\nimport { DEFAULT_COLUMN_MIN_WIDTH } from \"./json-schema-form-utils\";\nimport {\n  controlMinHeightClass,\n  fieldInnerGapClass,\n  inlineRowGapClass,\n  labelSizeClass,\n  stackedRowGapClass,\n  type FormSize,\n} from \"./json-schema-form-size\";\n\n// FieldsGrid is the container every group of field rows renders into — the\n// top-level form and each nested object/map. In inline mode it owns the single\n// 2-column track definition: `fit-content(labelMaxWidth)` for the label column,\n// `minmax(0, valueMaxWidth)` for the value column. Every field row is a\n// `subgrid` that inherits these tracks, so all labels share one column width and\n// every value lines up — a real form grid, not per-row independent grids.\n// (`fit-content()` is the only valid CSS for \"size to content, clamped to a max\"\n// — `min(w, max-content)` is rejected by the browser, which silently drops the\n// whole declaration and collapses every row to a stacked-looking column. The\n// template is an inline style because Tailwind can't interpolate runtime widths.)\n// Stacked mode is a plain single-column grid.\nexport function FieldsGrid({\n  layout,\n  size,\n  columns,\n  columnMinWidth,\n  columnsMaxWidth,\n  className,\n  children,\n}: {\n  layout: FormLayout;\n  size: FormSize;\n  // Object-level `x-columns`: split a stacked object into N equal columns, or\n  // \"auto\" to fit as many `columnMinWidth`-wide columns as the container allows.\n  // Fields span one column unless they set `x-col-span`. Ignored in inline mode\n  // (which owns its own 2-track label/value layout).\n  columns?: GridColumns;\n  // `x-columns: \"auto\"` only: the minmax() floor for one column, and an optional\n  // cap on the whole grid so controls don't stretch edge to edge on a wide\n  // screen. CSS lengths, applied inline — a runtime width can't be a Tailwind\n  // arbitrary class, because the scanner never sees it.\n  columnMinWidth?: string;\n  columnsMaxWidth?: string;\n  // Object-level `x-classes`: extra classes merged onto the grid container\n  // (e.g. `gap-2`, padding). Applied last so a standard utility wins over the\n  // defaults via tailwind-merge.\n  className?: string;\n  children: ReactNode;\n}) {\n  const propertiesParent = useContext(PropertiesContext);\n  if (layout.mode === \"properties\") {\n    return (\n      <div\n        className={cn(\n          \"min-w-0 overflow-hidden rounded-md border border-border\",\n          propertiesParent &&\n            \"col-span-full grid grid-cols-subgrid rounded-none border-0\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    );\n  }\n  if (layout.mode === \"inline\") {\n    const labelMaxWidth = layout.labelMaxWidth ?? \"40ch\";\n    const valueMaxWidth = layout.valueMaxWidth ?? \"600px\";\n    return (\n      <div\n        className={cn(\"grid\", inlineRowGapClass[size], className)}\n        style={{\n          gridTemplateColumns: `fit-content(${labelMaxWidth}) minmax(0, ${valueMaxWidth})`,\n        }}\n      >\n        {children}\n      </div>\n    );\n  }\n  if (columns === \"auto\") {\n    return (\n      <div\n        className={cn(\"grid gap-x-4\", stackedRowGapClass[size], className)}\n        style={{\n          gridTemplateColumns: `repeat(auto-fill, minmax(${columnMinWidth ?? DEFAULT_COLUMN_MIN_WIDTH}, 1fr))`,\n          ...(columnsMaxWidth ? { maxWidth: columnsMaxWidth } : {}),\n        }}\n      >\n        {children}\n      </div>\n    );\n  }\n  if (columns && columns > 1) {\n    return (\n      <div\n        className={cn(\"grid gap-x-3\", stackedRowGapClass[size], className)}\n        style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}\n      >\n        {children}\n      </div>\n    );\n  }\n  return (\n    <div className={cn(\"grid\", stackedRowGapClass[size], className)}>\n      {children}\n    </div>\n  );\n}\n\n// FieldWrapper lays out a single label + value (+ helper/error). In inline mode\n// it is a `subgrid` row spanning the parent FieldsGrid's two columns, so its\n// label and value snap to the shared label/value tracks (helper/error sit under\n// the value column). In stacked mode the label sits tight above its control as\n// one unit, capped at valueMaxWidth so controls don't stretch edge to edge.\nexport function FieldWrapper({\n  label,\n  value,\n  helper,\n  error,\n  layout,\n  size,\n  maxWidth,\n}: {\n  label: ReactNode;\n  value: ReactNode;\n  helper?: ReactNode;\n  error?: ReactNode;\n  layout: FormLayout;\n  size: FormSize;\n  // Overrides the stacked value-width cap. A field spanning the full row of a\n  // multi-column grid passes \"none\", so it actually fills the row it was given\n  // instead of stopping at the shared 600px cap.\n  maxWidth?: string;\n}) {\n  if (layout.mode === \"inline\") {\n    return (\n      <div className=\"col-span-2 grid grid-cols-subgrid items-start gap-x-3 gap-y-0.5\">\n        <div\n          className={cn(\n            \"flex min-w-0 items-center\",\n            controlMinHeightClass[size],\n          )}\n        >\n          {label}\n        </div>\n        <div className=\"min-w-0\">{value}</div>\n        {helper && (\n          <p className=\"col-start-2 text-xs text-muted-foreground\">{helper}</p>\n        )}\n        {error && (\n          <p className=\"col-start-2 text-xs text-destructive\">{error}</p>\n        )}\n      </div>\n    );\n  }\n  return (\n    <div\n      className=\"flex w-full flex-col gap-1\"\n      style={{ maxWidth: maxWidth ?? layout.valueMaxWidth ?? \"600px\" }}\n    >\n      {label}\n      {value}\n      {helper && <p className=\"text-xs text-muted-foreground\">{helper}</p>}\n      {error && <p className=\"text-xs text-destructive\">{error}</p>}\n    </div>\n  );\n}\n\nexport function FieldLabel({\n  field,\n  fieldId,\n  size,\n  helpDisplay,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  size: FormSize;\n  // When \"hover\", the description rides on the label as a `?` instead of being\n  // rendered as a paragraph under the control by FieldWrapper.\n  helpDisplay?: HelpDisplay;\n}) {\n  return (\n    <label\n      htmlFor={fieldId}\n      className={cn(\n        \"flex min-w-0 items-center gap-2 font-medium\",\n        labelSizeClass[size],\n        field.labelClassName,\n      )}\n    >\n      <LabelIcon\n        icon={field.labelIcon}\n        className=\"shrink-0 text-[15px] text-muted-foreground\"\n      />\n      <span\n        className=\"truncate\"\n        title={field.label !== field.key ? field.key : undefined}\n      >\n        {field.label}\n      </span>\n      {field.required && <span className=\"shrink-0 text-destructive\">*</span>}\n      {field.badge && (\n        <span className=\"shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n          {field.badge}\n        </span>\n      )}\n      {helpDisplay === \"hover\" && field.helper && (\n        <HelpHint label={field.label} helper={field.helper} />\n      )}\n    </label>\n  );\n}\n\n// HelpHint is the `?` affordance that replaces a permanent description\n// paragraph. HoverCard opens on focus as well as hover, so the text stays\n// reachable from the keyboard rather than being mouse-only.\nexport function HelpHint({ label, helper }: { label: string; helper: string }) {\n  return (\n    <HoverCard\n      placement=\"top\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label={`About ${label}`}\n          className=\"shrink-0 cursor-help text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          <Icon icon={UiQuestion} className=\"text-sm\" />\n        </button>\n      }\n      cardClassName=\"max-w-xs whitespace-normal text-left text-xs font-normal text-foreground\"\n    >\n      {helper}\n    </HoverCard>\n  );\n}\n\n// SectionHeading is the content of a section's header row: the label with its\n// icon, required marker, badge and hover help. It is the label node buildField\n// hands to post extensions for a field that renders as a section; a section\n// with an empty title has no heading at all (see ObjectSection).\nexport function SectionHeading({\n  field,\n  label = field.label,\n  size,\n  helpDisplay,\n}: {\n  field: FieldControl;\n  label?: string;\n  size: FormSize;\n  helpDisplay?: HelpDisplay;\n}) {\n  const { required, badge, helper, labelIcon } = field;\n  return (\n    <span className={cn(\"flex min-w-0 items-center gap-2\", labelSizeClass[size])}>\n      <LabelIcon\n        icon={labelIcon}\n        className=\"shrink-0 text-[15px] text-muted-foreground\"\n      />\n      <span className=\"min-w-0 truncate\">{label}</span>\n      {required && <span className=\"shrink-0 text-destructive\">*</span>}\n      {badge && (\n        <span className=\"shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n          {badge}\n        </span>\n      )}\n      {helpDisplay === \"hover\" && helper && <HelpHint label={label} helper={helper} />}\n    </span>\n  );\n}\n\n// ObjectSection renders a nested object as a labelled section: a header row\n// (the field label + required/badge) above its fields, which fill the full\n// width below. It replaces the inline label + bordered box so nested objects\n// read as flat, headed groups rather than indented sub-forms. `col-span-full`\n// makes it span both tracks of an inline FieldsGrid (full width, not crammed\n// into the value column); in a stacked single-column grid it is a no-op.\n//\n// A field whose schema gives it an EMPTY title renders with no header at all:\n// the host already titled it (a collapsible section of its own, a dialog), and\n// a headed section inside that one would say the same word twice. A missing\n// title is not this — it falls back to the humanised key, as every other\n// control does — so only an explicit `\"title\": \"\"` opts out.\n//\n// The header row is a separate SectionHeading node (null for no header), so\n// the post extensions that decorate every other field's label decorate a\n// section's header too.\nexport function ObjectSection({\n  heading,\n  size,\n  helper,\n  helpDisplay,\n  children,\n}: {\n  heading: ReactNode;\n  size: FormSize;\n  helper?: string;\n  helpDisplay?: HelpDisplay;\n  children: ReactNode;\n}) {\n  const hoverHelp = helpDisplay === \"hover\" && !!helper;\n  return (\n    <div\n      className={cn(\n        \"col-span-full flex min-w-0 max-w-full flex-col\",\n        fieldInnerGapClass[size],\n      )}\n    >\n      {heading != null && (\n        // The header row owns the rule and weight, so whatever a post\n        // extension puts beside the heading sits inline in the same row.\n        <div\n          data-jsf-section-heading\n          className={cn(\n            \"flex min-w-0 items-center gap-2 border-b border-border pb-1 font-semibold\",\n            labelSizeClass[size],\n          )}\n        >\n          {heading}\n        </div>\n      )}\n      {helper && !hoverHelp && (\n        <p className=\"min-w-0 break-words text-xs text-muted-foreground\">\n          {helper}\n        </p>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"json-schema-form-layout.js","names":[],"sources":["../../src/components/json-schema-form-layout.tsx"],"sourcesContent":["import { useContext, type ReactNode } from \"react\";\nimport { PropertiesContext } from \"../data/properties-context\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, LabelIcon } from \"../data/Icon\";\nimport { UiQuestion } from \"../icons\";\nimport { HoverCard } from \"../overlay/HoverCard\";\nimport type {\n  FieldControl,\n  FormLayout,\n  GridColumns,\n  HelpDisplay,\n} from \"./json-schema-form-types\";\nimport { DEFAULT_COLUMN_MIN_WIDTH } from \"./json-schema-form-utils\";\nimport { FormHelp } from \"./json-schema-form-help-links\";\nimport { hasFormHelp } from \"./json-schema-form-help-model\";\nimport {\n  controlMinHeightClass,\n  fieldInnerGapClass,\n  inlineRowGapClass,\n  labelSizeClass,\n  stackedRowGapClass,\n  type FormSize,\n} from \"./json-schema-form-size\";\n\n// FieldsGrid is the container every group of field rows renders into — the\n// top-level form and each nested object/map. In inline mode it owns the single\n// 2-column track definition: `fit-content(labelMaxWidth)` for the label column,\n// `minmax(0, valueMaxWidth)` for the value column. Every field row is a\n// `subgrid` that inherits these tracks, so all labels share one column width and\n// every value lines up — a real form grid, not per-row independent grids.\n// (`fit-content()` is the only valid CSS for \"size to content, clamped to a max\"\n// — `min(w, max-content)` is rejected by the browser, which silently drops the\n// whole declaration and collapses every row to a stacked-looking column. The\n// template is an inline style because Tailwind can't interpolate runtime widths.)\n// Stacked mode is a plain single-column grid.\nexport function FieldsGrid({\n  layout,\n  size,\n  columns,\n  columnMinWidth,\n  columnsMaxWidth,\n  className,\n  children,\n}: {\n  layout: FormLayout;\n  size: FormSize;\n  // Object-level `x-columns`: split a stacked object into N equal columns, or\n  // \"auto\" to fit as many `columnMinWidth`-wide columns as the container allows.\n  // Fields span one column unless they set `x-col-span`. Ignored in inline mode\n  // (which owns its own 2-track label/value layout).\n  columns?: GridColumns;\n  // `x-columns: \"auto\"` only: the minmax() floor for one column, and an optional\n  // cap on the whole grid so controls don't stretch edge to edge on a wide\n  // screen. CSS lengths, applied inline — a runtime width can't be a Tailwind\n  // arbitrary class, because the scanner never sees it.\n  columnMinWidth?: string;\n  columnsMaxWidth?: string;\n  // Object-level `x-classes`: extra classes merged onto the grid container\n  // (e.g. `gap-2`, padding). Applied last so a standard utility wins over the\n  // defaults via tailwind-merge.\n  className?: string;\n  children: ReactNode;\n}) {\n  const propertiesParent = useContext(PropertiesContext);\n  if (layout.mode === \"properties\") {\n    return (\n      <div\n        className={cn(\n          \"min-w-0 overflow-hidden rounded-md border border-border\",\n          propertiesParent &&\n            \"col-span-full grid grid-cols-subgrid rounded-none border-0\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    );\n  }\n  if (layout.mode === \"inline\") {\n    const labelMaxWidth = layout.labelMaxWidth ?? \"40ch\";\n    const valueMaxWidth = layout.valueMaxWidth ?? \"600px\";\n    return (\n      <div\n        className={cn(\"grid\", inlineRowGapClass[size], className)}\n        style={{\n          gridTemplateColumns: `fit-content(${labelMaxWidth}) minmax(0, ${valueMaxWidth})`,\n        }}\n      >\n        {children}\n      </div>\n    );\n  }\n  if (columns === \"auto\") {\n    return (\n      <div\n        className={cn(\"grid gap-x-4\", stackedRowGapClass[size], className)}\n        style={{\n          gridTemplateColumns: `repeat(auto-fill, minmax(${columnMinWidth ?? DEFAULT_COLUMN_MIN_WIDTH}, 1fr))`,\n          ...(columnsMaxWidth ? { maxWidth: columnsMaxWidth } : {}),\n        }}\n      >\n        {children}\n      </div>\n    );\n  }\n  if (columns && columns > 1) {\n    return (\n      <div\n        className={cn(\"grid gap-x-3\", stackedRowGapClass[size], className)}\n        style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}\n      >\n        {children}\n      </div>\n    );\n  }\n  return (\n    <div className={cn(\"grid\", stackedRowGapClass[size], className)}>\n      {children}\n    </div>\n  );\n}\n\n// FieldWrapper lays out a single label + value (+ helper/error). In inline mode\n// it is a `subgrid` row spanning the parent FieldsGrid's two columns, so its\n// label and value snap to the shared label/value tracks (helper/error sit under\n// the value column). In stacked mode the label sits tight above its control as\n// one unit, capped at valueMaxWidth so controls don't stretch edge to edge.\nexport function FieldWrapper({\n  label,\n  value,\n  helper,\n  error,\n  layout,\n  size,\n  maxWidth,\n}: {\n  label: ReactNode;\n  value: ReactNode;\n  helper?: ReactNode;\n  error?: ReactNode;\n  layout: FormLayout;\n  size: FormSize;\n  // Overrides the stacked value-width cap. A field spanning the full row of a\n  // multi-column grid passes \"none\", so it actually fills the row it was given\n  // instead of stopping at the shared 600px cap.\n  maxWidth?: string;\n}) {\n  if (layout.mode === \"inline\") {\n    return (\n      <div className=\"col-span-2 grid grid-cols-subgrid items-start gap-x-3 gap-y-0.5\">\n        <div\n          className={cn(\n            \"flex min-w-0 items-center\",\n            controlMinHeightClass[size],\n          )}\n        >\n          {label}\n        </div>\n        <div className=\"min-w-0\">{value}</div>\n        {helper && (\n          <p className=\"col-start-2 text-xs text-muted-foreground\">{helper}</p>\n        )}\n        {error && (\n          <p className=\"col-start-2 text-xs text-destructive\">{error}</p>\n        )}\n      </div>\n    );\n  }\n  return (\n    <div\n      className=\"flex w-full flex-col gap-1\"\n      style={{ maxWidth: maxWidth ?? layout.valueMaxWidth ?? \"600px\" }}\n    >\n      {label}\n      {value}\n      {helper && <p className=\"text-xs text-muted-foreground\">{helper}</p>}\n      {error && <p className=\"text-xs text-destructive\">{error}</p>}\n    </div>\n  );\n}\n\nexport function FieldLabel({\n  field,\n  fieldId,\n  size,\n  helpDisplay,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  size: FormSize;\n  // When \"hover\", the description rides on the label as a `?` instead of being\n  // rendered as a paragraph under the control by FieldWrapper.\n  helpDisplay?: HelpDisplay;\n}) {\n  return (\n    <label\n      htmlFor={fieldId}\n      className={cn(\n        \"flex min-w-0 items-center gap-2 font-medium\",\n        labelSizeClass[size],\n        field.labelClassName,\n      )}\n    >\n      <LabelIcon\n        icon={field.labelIcon}\n        className=\"shrink-0 text-[15px] text-muted-foreground\"\n      />\n      <span\n        className=\"truncate\"\n        title={field.label !== field.key ? field.key : undefined}\n      >\n        {field.label}\n      </span>\n      {field.required && <span className=\"shrink-0 text-destructive\">*</span>}\n      {field.badge && (\n        <span className=\"shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n          {field.badge}\n        </span>\n      )}\n      {helpDisplay === \"hover\" && hasFormHelp(field) && (\n        <HelpHint label={field.label} helper={<FormHelp field={field} />} />\n      )}\n    </label>\n  );\n}\n\n// HelpHint is the `?` affordance that replaces a permanent description\n// paragraph. HoverCard opens on focus as well as hover, so the text stays\n// reachable from the keyboard rather than being mouse-only.\nexport function HelpHint({ label, helper }: { label: string; helper: ReactNode }) {\n  return (\n    <HoverCard\n      placement=\"top\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label={`About ${label}`}\n          className=\"shrink-0 cursor-help text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          <Icon icon={UiQuestion} className=\"text-sm\" />\n        </button>\n      }\n      cardClassName=\"max-w-xs whitespace-normal text-left text-xs font-normal text-foreground\"\n    >\n      {helper}\n    </HoverCard>\n  );\n}\n\n// SectionHeading is the content of a section's header row: the label with its\n// icon, required marker, badge and hover help. It is the label node buildField\n// hands to post extensions for a field that renders as a section; a section\n// with an empty title has no heading at all (see ObjectSection).\nexport function SectionHeading({\n  field,\n  label = field.label,\n  size,\n  helpDisplay,\n}: {\n  field: FieldControl;\n  label?: string;\n  size: FormSize;\n  helpDisplay?: HelpDisplay;\n}) {\n  const { required, badge, labelIcon } = field;\n  return (\n    <span className={cn(\"flex min-w-0 items-center gap-2\", labelSizeClass[size])}>\n      <LabelIcon\n        icon={labelIcon}\n        className=\"shrink-0 text-[15px] text-muted-foreground\"\n      />\n      <span className=\"min-w-0 truncate\">{label}</span>\n      {required && <span className=\"shrink-0 text-destructive\">*</span>}\n      {badge && (\n        <span className=\"shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n          {badge}\n        </span>\n      )}\n      {helpDisplay === \"hover\" && hasFormHelp(field) && <HelpHint label={label} helper={<FormHelp field={field} />} />}\n    </span>\n  );\n}\n\n// ObjectSection renders a nested object as a labelled section: a header row\n// (the field label + required/badge) above its fields, which fill the full\n// width below. It replaces the inline label + bordered box so nested objects\n// read as flat, headed groups rather than indented sub-forms. `col-span-full`\n// makes it span both tracks of an inline FieldsGrid (full width, not crammed\n// into the value column); in a stacked single-column grid it is a no-op.\n//\n// A field whose schema gives it an EMPTY title renders with no header at all:\n// the host already titled it (a collapsible section of its own, a dialog), and\n// a headed section inside that one would say the same word twice. A missing\n// title is not this — it falls back to the humanised key, as every other\n// control does — so only an explicit `\"title\": \"\"` opts out.\n//\n// The header row is a separate SectionHeading node (null for no header), so\n// the post extensions that decorate every other field's label decorate a\n// section's header too.\nexport function ObjectSection({\n  heading,\n  size,\n  helper,\n  helpDisplay,\n  children,\n}: {\n  heading: ReactNode;\n  size: FormSize;\n  helper?: ReactNode;\n  helpDisplay?: HelpDisplay;\n  children: ReactNode;\n}) {\n  const hoverHelp = helpDisplay === \"hover\" && !!helper;\n  return (\n    <div\n      className={cn(\n        \"col-span-full flex min-w-0 max-w-full flex-col\",\n        fieldInnerGapClass[size],\n      )}\n    >\n      {heading != null && (\n        // The header row owns the rule and weight, so whatever a post\n        // extension puts beside the heading sits inline in the same row.\n        <div\n          data-jsf-section-heading\n          className={cn(\n            \"flex min-w-0 items-center gap-2 border-b border-border pb-1 font-semibold\",\n            labelSizeClass[size],\n          )}\n        >\n          {heading}\n        </div>\n      )}\n      {helper && !hoverHelp && (\n        <p className=\"min-w-0 break-words text-xs text-muted-foreground\">\n          {helper}\n        </p>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -100,7 +100,7 @@ function StringMapControl({ field, ctx }) {
 			key,
 			prop: valueSchema,
 			required: false,
-			value: map[key] ?? "",
+			value: map[key],
 			onChange: (next) => setEntry(key, next),
 			instancePath: require_json_schema_form_errors.appendInstancePath(ctx.instancePath, key)
 		}, childCtx)?.value ?? null;
@@ -130,7 +130,7 @@ function StringMapControl({ field, ctx }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: require_utils.cn(properties ? "col-span-full grid grid-cols-subgrid" : "flex flex-col", !properties && !ctx.presentation && "rounded-md border border-input p-2", !properties && require_json_schema_form_size.fieldInnerGapClass[childCtx.size]),
 		children: [
-			knownKeys.map((key) => properties ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			knownKeys.map((key) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "contents",
 				children: ctx.render.renderFieldRow({
 					key,
@@ -140,17 +140,6 @@ function StringMapControl({ field, ctx }) {
 					onChange: (next) => setEntry(key, next),
 					instancePath: require_json_schema_form_errors.appendInstancePath(ctx.instancePath, key)
 				}, childCtx)
-			}, `known-${key}`) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "grid grid-cols-[10rem_1fr] items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-					htmlFor: require_json_schema_form_utils.fieldInputId(require_json_schema_form_errors.appendInstancePath(ctx.instancePath, key), childCtx.idPrefix),
-					className: "truncate text-xs text-muted-foreground",
-					title: key,
-					children: key
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "min-w-0",
-					children: valueControlFor(key, known[key] ?? { type: "string" })
-				})]
 			}, `known-${key}`)),
 			extraKeys.map((key) => {
 				const keyControl = ctx.presentation ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-object.cjs","names":["isPlainObject","FieldsGrid","normalizeColumns","cssLength","DEFAULT_COLUMN_MIN_WIDTH","appendInstancePath","propertyControlSize","Combobox","keyPickerOptions","cn","inputClass","fieldInnerGapClass","fieldInputId","controlHeightClass","Icon","UiTrash","_Fragment","PropertyValueEditor","Button","inputSizeClass","UiAdd"],"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    // Copied whatever its shape, so a malformed value fails loudly in the\n    // listener collector rather than vanishing here.\n    ...(field.schema[\"x-on-load\"] !== undefined ? { \"x-on-load\": field.schema[\"x-on-load\"] } : {}),\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"],"mappings":"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"}
+{"version":3,"file":"json-schema-form-object.cjs","names":["isPlainObject","FieldsGrid","normalizeColumns","cssLength","DEFAULT_COLUMN_MIN_WIDTH","appendInstancePath","propertyControlSize","Combobox","keyPickerOptions","cn","inputClass","fieldInnerGapClass","controlHeightClass","Icon","UiTrash","_Fragment","PropertyValueEditor","fieldInputId","Button","inputSizeClass","UiAdd"],"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    // Copied whatever its shape, so a malformed value fails loudly in the\n    // listener collector rather than vanishing here.\n    ...(field.schema[\"x-on-load\"] !== undefined ? { \"x-on-load\": field.schema[\"x-on-load\"] } : {}),\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          <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      {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"],"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":"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,+BAkEA;AAOD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,GAAG,GACJ,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,GAAG,EAAE,aAAa,CAAC;CACpB,+BA0UA"}
+{"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,+BAkEA;AAOD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,GAAG,GACJ,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,GAAG,EAAE,aAAa,CAAC;CACpB,+BAqTA"}

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

@@ -100,7 +100,7 @@ function StringMapControl({ field, ctx }) {
 			key,
 			prop: valueSchema,
 			required: false,
-			value: map[key] ?? "",
+			value: map[key],
 			onChange: (next) => setEntry(key, next),
 			instancePath: appendInstancePath(ctx.instancePath, key)
 		}, childCtx)?.value ?? null;
@@ -130,7 +130,7 @@ function StringMapControl({ field, ctx }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn(properties ? "col-span-full grid grid-cols-subgrid" : "flex flex-col", !properties && !ctx.presentation && "rounded-md border border-input p-2", !properties && fieldInnerGapClass[childCtx.size]),
 		children: [
-			knownKeys.map((key) => properties ? /* @__PURE__ */ jsx("div", {
+			knownKeys.map((key) => /* @__PURE__ */ jsx("div", {
 				className: "contents",
 				children: ctx.render.renderFieldRow({
 					key,
@@ -140,17 +140,6 @@ function StringMapControl({ field, ctx }) {
 					onChange: (next) => setEntry(key, next),
 					instancePath: appendInstancePath(ctx.instancePath, key)
 				}, childCtx)
-			}, `known-${key}`) : /* @__PURE__ */ jsxs("div", {
-				className: "grid grid-cols-[10rem_1fr] items-center gap-2",
-				children: [/* @__PURE__ */ jsx("label", {
-					htmlFor: fieldInputId(appendInstancePath(ctx.instancePath, key), childCtx.idPrefix),
-					className: "truncate text-xs text-muted-foreground",
-					title: key,
-					children: key
-				}), /* @__PURE__ */ jsx("div", {
-					className: "min-w-0",
-					children: valueControlFor(key, known[key] ?? { type: "string" })
-				})]
 			}, `known-${key}`)),
 			extraKeys.map((key) => {
 				const keyControl = ctx.presentation ? /* @__PURE__ */ jsx("span", {