@flanksource/clicky-ui 0.3.33 → 0.3.35

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
+import { useContext } from "react";
+import { PropertiesContext } from "../data/properties-context.js";
 import { cn } from "../lib/utils.js";
 import { LabelIcon, Icon } from "../data/Icon.js";
 import { HoverCard } from "../overlay/HoverCard.js";
@@ -15,6 +16,20 @@ function FieldsGrid({
   className,
   children
 }) {
+  const propertiesParent = useContext(PropertiesContext);
+  if (layout.mode === "properties") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "min-w-0 overflow-hidden rounded-md border border-border",
+          propertiesParent && "col-span-full grid grid-cols-subgrid rounded-none border-0",
+          className
+        ),
+        children
+      }
+    );
+  }
   if (layout.mode === "inline") {
     const labelMaxWidth = layout.labelMaxWidth ?? "40ch";
     const valueMaxWidth = layout.valueMaxWidth ?? "600px";
@@ -22,7 +37,9 @@ function FieldsGrid({
       "div",
       {
         className: cn("grid", inlineRowGapClass[size], className),
-        style: { gridTemplateColumns: `fit-content(${labelMaxWidth}) minmax(0, ${valueMaxWidth})` },
+        style: {
+          gridTemplateColumns: `fit-content(${labelMaxWidth}) minmax(0, ${valueMaxWidth})`
+        },
         children
       }
     );
@@ -63,7 +80,16 @@ function FieldWrapper({
 }) {
   if (layout.mode === "inline") {
     return /* @__PURE__ */ jsxs("div", { className: "col-span-2 grid grid-cols-subgrid items-start gap-x-3 gap-y-0.5", children: [
-      /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 items-center", controlMinHeightClass[size]), children: label }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex min-w-0 items-center",
+            controlMinHeightClass[size]
+          ),
+          children: label
+        }
+      ),
       /* @__PURE__ */ jsx("div", { className: "min-w-0", children: value }),
       helper && /* @__PURE__ */ jsx("p", { className: "col-start-2 text-xs text-muted-foreground", children: helper }),
       error && /* @__PURE__ */ jsx("p", { className: "col-start-2 text-xs text-destructive", children: error })
@@ -93,10 +119,27 @@ function FieldLabel({
     "label",
     {
       htmlFor: fieldId,
-      className: cn("flex min-w-0 items-center gap-2 font-medium", labelSizeClass[size], field.labelClassName),
+      className: cn(
+        "flex min-w-0 items-center gap-2 font-medium",
+        labelSizeClass[size],
+        field.labelClassName
+      ),
       children: [
-        /* @__PURE__ */ jsx(LabelIcon, { icon: field.labelIcon, className: "shrink-0 text-[15px] text-muted-foreground" }),
-        /* @__PURE__ */ jsx("span", { className: "truncate", title: field.label !== field.key ? field.key : void 0, children: field.label }),
+        /* @__PURE__ */ jsx(
+          LabelIcon,
+          {
+            icon: field.labelIcon,
+            className: "shrink-0 text-[15px] text-muted-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "truncate",
+            title: field.label !== field.key ? field.key : void 0,
+            children: field.label
+          }
+        ),
         field.required && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-destructive", children: "*" }),
         field.badge && /* @__PURE__ */ jsx("span", { 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, { label: field.label, helper: field.helper })
@@ -134,17 +177,41 @@ function ObjectSection({
   children
 }) {
   const hoverHelp = helpDisplay === "hover" && !!helper;
-  return /* @__PURE__ */ jsxs("div", { className: cn("col-span-full flex min-w-0 max-w-full flex-col", fieldInnerGapClass[size]), children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-center gap-2 border-b border-border pb-1 font-semibold", labelSizeClass[size]), children: [
-      /* @__PURE__ */ jsx(LabelIcon, { icon: labelIcon, className: "shrink-0 text-[15px] text-muted-foreground" }),
-      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: label }),
-      required && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-destructive", children: "*" }),
-      badge && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: badge }),
-      hoverHelp && helper && /* @__PURE__ */ jsx(HelpHint, { label, helper })
-    ] }),
-    helper && !hoverHelp && /* @__PURE__ */ jsx("p", { className: "min-w-0 break-words text-xs text-muted-foreground", children: helper }),
-    children
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "col-span-full flex min-w-0 max-w-full flex-col",
+        fieldInnerGapClass[size]
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 items-center gap-2 border-b border-border pb-1 font-semibold",
+              labelSizeClass[size]
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                LabelIcon,
+                {
+                  icon: labelIcon,
+                  className: "shrink-0 text-[15px] text-muted-foreground"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: label }),
+              required && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-destructive", children: "*" }),
+              badge && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: badge }),
+              hoverHelp && helper && /* @__PURE__ */ jsx(HelpHint, { label, helper })
+            ]
+          }
+        ),
+        helper && !hoverHelp && /* @__PURE__ */ jsx("p", { className: "min-w-0 break-words text-xs text-muted-foreground", children: helper }),
+        children
+      ]
+    }
+  );
 }
 export {
   FieldLabel,

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-layout.js","sources":["../../src/components/json-schema-form-layout.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, LabelIcon, type LabelIconSpec } 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  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={{ gridTemplateColumns: `fit-content(${labelMaxWidth}) minmax(0, ${valueMaxWidth})` }}\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 <div className={cn(\"grid\", stackedRowGapClass[size], className)}>{children}</div>;\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 className={cn(\"flex min-w-0 items-center\", controlMinHeightClass[size])}>{label}</div>\n        <div className=\"min-w-0\">{value}</div>\n        {helper && <p className=\"col-start-2 text-xs text-muted-foreground\">{helper}</p>}\n        {error && <p className=\"col-start-2 text-xs text-destructive\">{error}</p>}\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(\"flex min-w-0 items-center gap-2 font-medium\", labelSizeClass[size], field.labelClassName)}\n    >\n      <LabelIcon icon={field.labelIcon} className=\"shrink-0 text-[15px] text-muted-foreground\" />\n      <span className=\"truncate\" title={field.label !== field.key ? field.key : undefined}>\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// 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.\nexport function ObjectSection({\n  label,\n  required,\n  size,\n  badge,\n  helper,\n  labelIcon,\n  helpDisplay,\n  children,\n}: {\n  label: string;\n  required: boolean;\n  size: FormSize;\n  badge?: string;\n  helper?: string;\n  labelIcon?: LabelIconSpec;\n  helpDisplay?: HelpDisplay;\n  children: ReactNode;\n}) {\n  const hoverHelp = helpDisplay === \"hover\" && !!helper;\n  return (\n    <div className={cn(\"col-span-full flex min-w-0 max-w-full flex-col\", fieldInnerGapClass[size])}>\n      <div className={cn(\"flex min-w-0 items-center gap-2 border-b border-border pb-1 font-semibold\", labelSizeClass[size])}>\n        <LabelIcon icon={labelIcon} className=\"shrink-0 text-[15px] text-muted-foreground\" />\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        {hoverHelp && helper && <HelpHint label={label} helper={helper} />}\n      </div>\n      {helper && !hoverHelp && (\n        <p className=\"min-w-0 break-words text-xs text-muted-foreground\">{helper}</p>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"json-schema-form-layout.js","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, type LabelIconSpec } 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// 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.\nexport function ObjectSection({\n  label,\n  required,\n  size,\n  badge,\n  helper,\n  labelIcon,\n  helpDisplay,\n  children,\n}: {\n  label: string;\n  required: boolean;\n  size: FormSize;\n  badge?: string;\n  helper?: string;\n  labelIcon?: LabelIconSpec;\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      <div\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        <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        {hoverHelp && helper && <HelpHint label={label} helper={helper} />}\n      </div>\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"],"names":[],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-list-array.cjs","sources":["../../src/components/json-schema-form-list-array.tsx"],"sourcesContent":["import { useState, type KeyboardEvent } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd, UiClose } from \"../icons\";\nimport { Button } from \"./button\";\nimport { InputField } from \"./InputField\";\nimport { ListMenu, ListMenuItem } from \"./ListMenu\";\nimport type { FieldControl } from \"./json-schema-form-types\";\n\nexport function CompactListArray({\n  field,\n  fieldId,\n  readOnly,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n}) {\n  const [draft, setDraft] = useState(\"\");\n  const rawItems = Array.isArray(field.value) ? field.value : [];\n  if (rawItems.some((item) => typeof item !== \"string\")) {\n    throw new Error(`${field.key} compact list received a non-string value`);\n  }\n  const items = rawItems as string[];\n\n  const addDraft = () => {\n    const next = draft.trim();\n    if (!next) return;\n    field.onChange([...items, next]);\n    setDraft(\"\");\n  };\n\n  const addOnEnter = (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    if (event.key !== \"Enter\") return;\n    event.preventDefault();\n    addDraft();\n  };\n\n  return (\n    <ListMenu\n      role=\"list\"\n      aria-label={field.label}\n      className=\"overflow-hidden rounded-md border border-input bg-background\"\n      data-jsf-input\n    >\n      {items.map((item, index) => (\n        <ListMenuItem\n          key={`${item}-${index}`}\n          role=\"listitem\"\n          variant=\"compact\"\n          interactive={false}\n          className=\"border-l-0\"\n        >\n          {readOnly ? (\n            <span className=\"block truncate py-1 font-mono text-foreground\">{item}</span>\n          ) : (\n            <InputField\n              id={`${fieldId}-${index}`}\n              aria-label={`${field.label} ${index + 1}`}\n              value={item}\n              onChange={(next) =>\n                field.onChange(items.map((value, itemIndex) => (itemIndex === index ? next : value)))\n              }\n              className=\"h-7 border-0 bg-transparent px-0 shadow-none focus-within:ring-0\"\n              inputClassName=\"font-mono text-xs\"\n              suffix={\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"size-6 p-0 text-muted-foreground hover:text-foreground\"\n                  aria-label={`Remove ${item}`}\n                  onClick={() => field.onChange(items.filter((_, itemIndex) => itemIndex !== index))}\n                >\n                  <Icon icon={UiClose} className=\"size-3.5\" />\n                </Button>\n              }\n            />\n          )}\n        </ListMenuItem>\n      ))}\n      {!readOnly && (\n        <ListMenuItem\n          role=\"listitem\"\n          variant=\"compact\"\n          interactive={false}\n          className=\"border-l-0 bg-muted/20\"\n        >\n          <InputField\n            id={fieldId}\n            aria-label={`Add ${field.label}`}\n            value={draft}\n            onChange={setDraft}\n            onKeyDown={addOnEnter}\n            prefix={<Icon icon={UiAdd} className=\"size-3.5 text-muted-foreground\" />}\n            suffix={\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"h-6 px-2\"\n                disabled={!draft.trim()}\n                onClick={addDraft}\n              >\n                Add\n              </Button>\n            }\n            className=\"h-7 border-0 bg-transparent px-0 shadow-none focus-within:ring-0\"\n            inputClassName=\"font-mono text-xs\"\n          />\n        </ListMenuItem>\n      )}\n    </ListMenu>\n  );\n}\n"],"names":["useState","jsxs","ListMenu","jsx","ListMenuItem","InputField","Button","Icon","UiClose","UiAdd"],"mappings":"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"}
+{"version":3,"file":"json-schema-form-list-array.cjs","sources":["../../src/components/json-schema-form-list-array.tsx"],"sourcesContent":["import { useState, type KeyboardEvent } from \"react\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd, UiClose } from \"../icons\";\nimport { Button } from \"./button\";\nimport { InputField } from \"./InputField\";\nimport { ListMenu, ListMenuItem } from \"./ListMenu\";\nimport { cn } from \"../lib/utils\";\nimport type { FieldControl } from \"./json-schema-form-types\";\n\nexport function CompactListArray({\n  field,\n  fieldId,\n  readOnly,\n  presentation = false,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  presentation?: boolean;\n}) {\n  const [draft, setDraft] = useState(\"\");\n  const rawItems = Array.isArray(field.value) ? field.value : [];\n  if (rawItems.some((item) => typeof item !== \"string\")) {\n    throw new Error(`${field.key} compact list received a non-string value`);\n  }\n  const items = rawItems as string[];\n\n  const addDraft = () => {\n    const next = draft.trim();\n    if (!next) return;\n    field.onChange([...items, next]);\n    setDraft(\"\");\n  };\n\n  const addOnEnter = (\n    event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,\n  ) => {\n    if (event.key !== \"Enter\") return;\n    event.preventDefault();\n    addDraft();\n  };\n\n  return (\n    <ListMenu\n      role=\"list\"\n      aria-label={field.label}\n      className={cn(\n        \"overflow-hidden\",\n        !presentation && \"rounded-md border border-input bg-background\",\n      )}\n      data-jsf-input={presentation ? undefined : true}\n    >\n      {items.map((item, index) => (\n        <ListMenuItem\n          key={`${item}-${index}`}\n          role=\"listitem\"\n          variant=\"compact\"\n          interactive={false}\n          className=\"border-l-0\"\n        >\n          {readOnly ? (\n            <span className=\"block truncate py-1 font-mono text-foreground\">\n              {item}\n            </span>\n          ) : (\n            <InputField\n              id={`${fieldId}-${index}`}\n              aria-label={`${field.label} ${index + 1}`}\n              value={item}\n              onChange={(next) =>\n                field.onChange(\n                  items.map((value, itemIndex) =>\n                    itemIndex === index ? next : value,\n                  ),\n                )\n              }\n              className=\"h-7 border-0 bg-transparent px-0 shadow-none focus-within:ring-0\"\n              inputClassName=\"font-mono text-xs\"\n              suffix={\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"size-6 p-0 text-muted-foreground hover:text-foreground\"\n                  aria-label={`Remove ${item}`}\n                  onClick={() =>\n                    field.onChange(\n                      items.filter((_, itemIndex) => itemIndex !== index),\n                    )\n                  }\n                >\n                  <Icon icon={UiClose} className=\"size-3.5\" />\n                </Button>\n              }\n            />\n          )}\n        </ListMenuItem>\n      ))}\n      {!readOnly && (\n        <ListMenuItem\n          role=\"listitem\"\n          variant=\"compact\"\n          interactive={false}\n          className=\"border-l-0 bg-muted/20\"\n        >\n          <InputField\n            id={fieldId}\n            aria-label={`Add ${field.label}`}\n            value={draft}\n            onChange={setDraft}\n            onKeyDown={addOnEnter}\n            prefix={\n              <Icon icon={UiAdd} className=\"size-3.5 text-muted-foreground\" />\n            }\n            suffix={\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"h-6 px-2\"\n                disabled={!draft.trim()}\n                onClick={addDraft}\n              >\n                Add\n              </Button>\n            }\n            className=\"h-7 border-0 bg-transparent px-0 shadow-none focus-within:ring-0\"\n            inputClassName=\"font-mono text-xs\"\n          />\n        </ListMenuItem>\n      )}\n    </ListMenu>\n  );\n}\n"],"names":["useState","jsxs","ListMenu","cn","jsx","ListMenuItem","InputField","Button","Icon","UiClose","UiAdd"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-list-array.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-list-array.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,+BAiGA"}
+{"version":3,"file":"json-schema-form-list-array.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-list-array.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,YAAoB,GACrB,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,+BAkHA"}

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

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

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

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