@flanksource/clicky-ui 0.3.33 → 0.3.35

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

@@ -6,6 +6,8 @@ const jsonSchemaFormErrors = require("./json-schema-form-errors.cjs");
 const jsonSchemaFormItemRow = require("./json-schema-form-item-row.cjs");
 const jsonSchemaFormItemSummary = require("./json-schema-form-item-summary.cjs");
 const jsonSchemaFormUtils = require("./json-schema-form-utils.cjs");
+const utils = require("../lib/utils.cjs");
+const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
 function AccordionArray({
   field,
   ctx,
@@ -25,6 +27,45 @@ function AccordionArray({
     var _a;
     return ((_a = field.itemSummary) == null ? void 0 : _a.call(field, { item, index })) ?? jsonSchemaFormItemSummary.itemSummaryFor({ item, index, spec, itemSchema });
   }
+  function renderSummary({
+    item,
+    index,
+    open
+  }) {
+    const summary = summaryFor(item, index);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormItemRow.ItemGlyph, { glyph: summary.glyph }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-sm font-medium", children: summary.title }),
+      /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormItemRow.ItemBadge, { badge: summary.badge }),
+      summary.flagged && /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormItemRow.RequiredMark, {}),
+      summary.summary && /* @__PURE__ */ jsxRuntime.jsx("code", { className: "truncate font-mono text-xs text-muted-foreground", children: summary.summary }),
+      !open && /* @__PURE__ */ jsxRuntime.jsx(
+        jsonSchemaFormItemRow.ItemErrorMark,
+        {
+          count: jsonSchemaFormErrors.errorCountUnderInstancePath(
+            ctx.errors,
+            jsonSchemaFormErrors.appendInstancePath(ctx.instancePath, index)
+          )
+        }
+      )
+    ] });
+  }
+  if (ctx.presentation)
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: items.length === 0 ? jsonSchemaFormItemSummary.noItemsLabel(spec) : jsonSchemaFormItemSummary.itemCountLabel(spec, items.length) }),
+      items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: utils.cn(
+            "flex min-w-0 flex-wrap items-center gap-2 rounded px-2 py-1 even:bg-muted/40",
+            jsonSchemaFormSize.controlMinHeightClass[ctx.size]
+          ),
+          children: renderSummary({ item, index, open: false })
+        },
+        index
+      )),
+      items.length === 0 && emptyCopy && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: emptyCopy })
+    ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
     AccordionList.AccordionList,
     {
@@ -38,29 +79,11 @@ function AccordionArray({
       itemLabel: ({ item, index }) => summaryFor(item, index).title,
       allowReorder: jsonSchemaFormItemSummary.itemActionsAllow(spec, "reorder"),
       allowDuplicate: jsonSchemaFormItemSummary.itemActionsAllow(spec, "duplicate"),
-      allowRemove: jsonSchemaFormItemSummary.itemActionsAllow(spec, "remove"),
-      onCreate: () => jsonSchemaFormUtils.seedFromSchema(itemSchema),
+      allowRemove: jsonSchemaFormItemSummary.itemActionsAllow(spec, "remove") && jsonSchemaFormUtils.canRemoveItem(field, items.length),
+      ...jsonSchemaFormUtils.canAddItem(field, items.length) ? { onCreate: () => jsonSchemaFormUtils.seedFromSchema(itemSchema) } : {},
       addLabel: jsonSchemaFormItemSummary.addItemLabel(spec),
       ...emptyCopy ? { addDescription: emptyCopy } : {},
-      renderHeader: ({ item, index, open }) => {
-        const summary = summaryFor(item, index);
-        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormItemRow.ItemGlyph, { glyph: summary.glyph }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-sm font-medium", children: summary.title }),
-          /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormItemRow.ItemBadge, { badge: summary.badge }),
-          summary.flagged && /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormItemRow.RequiredMark, {}),
-          summary.summary && /* @__PURE__ */ jsxRuntime.jsx("code", { className: "truncate font-mono text-xs text-muted-foreground", children: summary.summary }),
-          !open && /* @__PURE__ */ jsxRuntime.jsx(
-            jsonSchemaFormItemRow.ItemErrorMark,
-            {
-              count: jsonSchemaFormErrors.errorCountUnderInstancePath(
-                ctx.errors,
-                jsonSchemaFormErrors.appendInstancePath(ctx.instancePath, index)
-              )
-            }
-          )
-        ] });
-      },
+      renderHeader: renderSummary,
       renderBody: ({ item, index, onChange }) => {
         var _a;
         return (

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-accordion-array.cjs","sources":["../../src/components/json-schema-form-accordion-array.tsx"],"sourcesContent":["import { AccordionList } from \"./AccordionList\";\nimport { appendInstancePath, errorCountUnderInstancePath } from \"./json-schema-form-errors\";\nimport {\n  ItemBadge,\n  ItemErrorMark,\n  ItemGlyph,\n  RequiredMark,\n} from \"./json-schema-form-item-row\";\nimport {\n  addItemLabel,\n  emptyItemsCopy,\n  itemActionsAllow,\n  itemCountLabel,\n  itemSummaryFor,\n  noItemsLabel,\n  resolveItemSpec,\n} from \"./json-schema-form-item-summary\";\nimport { fieldInputId, seedFromSchema } from \"./json-schema-form-utils\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\n// AccordionArray is the JsonSchemaForm adapter over AccordionList: it turns\n// `x-item` into row content and the schema's item into a recursive sub-form, and\n// owns nothing structural. Everything about the interaction — one row open at a\n// time, roving focus, the add row that doubles as the empty state — lives in\n// AccordionList, which knows nothing about JSON Schema.\nexport function AccordionArray({\n  field,\n  ctx,\n  readOnly,\n}: {\n  field: FieldControl;\n  ctx: RenderContext;\n  readOnly: boolean;\n}) {\n  const items = Array.isArray(field.value) ? field.value : [];\n  const itemSchema = field.itemSchema ?? { type: \"object\" };\n  const spec = field.itemSpec ?? resolveItemSpec(field.schema, itemSchema);\n  const emptyCopy = emptyItemsCopy(spec, field.schema);\n  // The array's help mode governs its whole subtree. Without this the fields\n  // inside an expanded row keep the form-level default, so an accordion that\n  // resolved to \"hover\" would still stack a two-line paragraph under every\n  // control — the exact height the summary rows exist to reclaim.\n  const childCtx: RenderContext = {\n    ...ctx,\n    readOnly,\n    depth: ctx.depth + 1,\n    ...(field.helpDisplay\n      ? { layout: { ...ctx.layout, help: field.helpDisplay } }\n      : {}),\n  };\n\n  function summaryFor(item: unknown, index: number) {\n    return field.itemSummary?.({ item, index }) ?? itemSummaryFor({ item, index, spec, itemSchema });\n  }\n\n  return (\n    <AccordionList<unknown>\n      items={items}\n      onChange={(next) => field.onChange(next)}\n      summary={items.length === 0 ? noItemsLabel(spec) : itemCountLabel(spec, items.length)}\n      size={ctx.size}\n      readOnly={readOnly}\n      itemId={(index) => fieldInputId(appendInstancePath(ctx.instancePath, index), ctx.idPrefix)}\n      // The panel's controls are the form's own inputs; anything else focusable\n      // inside an item (a help disclosure, a remove button on a nested array)\n      // would otherwise win the caret on add.\n      focusSelector=\"[data-jsf-input]\"\n      itemLabel={({ item, index }) => summaryFor(item, index).title}\n      allowReorder={itemActionsAllow(spec, \"reorder\")}\n      allowDuplicate={itemActionsAllow(spec, \"duplicate\")}\n      allowRemove={itemActionsAllow(spec, \"remove\")}\n      onCreate={() => seedFromSchema(itemSchema)}\n      addLabel={addItemLabel(spec)}\n      {...(emptyCopy ? { addDescription: emptyCopy } : {})}\n      renderHeader={({ item, index, open }) => {\n        const summary = summaryFor(item, index);\n        return (\n          <>\n            <ItemGlyph glyph={summary.glyph} />\n            <span className=\"shrink-0 text-sm font-medium\">{summary.title}</span>\n            <ItemBadge badge={summary.badge} />\n            {summary.flagged && <RequiredMark />}\n            {summary.summary && (\n              <code className=\"truncate font-mono text-xs text-muted-foreground\">\n                {summary.summary}\n              </code>\n            )}\n            {!open && (\n              <ItemErrorMark\n                count={errorCountUnderInstancePath(\n                  ctx.errors,\n                  appendInstancePath(ctx.instancePath, index),\n                )}\n              />\n            )}\n          </>\n        );\n      }}\n      renderBody={({ item, index, onChange }) =>\n        // Recurse through the shared pipeline so consumer pre/post extensions\n        // still apply to the item and its properties.\n        ctx.render.renderFieldNodes(\n          {\n            key: `${field.key}[${index}]`,\n            prop: itemSchema,\n            required: false,\n            value: item,\n            onChange,\n            instancePath: appendInstancePath(ctx.instancePath, index),\n          },\n          childCtx,\n        )?.value ?? null\n      }\n    />\n  );\n}\n"],"names":["resolveItemSpec","emptyItemsCopy","itemSummaryFor","jsx","AccordionList","noItemsLabel","itemCountLabel","fieldInputId","appendInstancePath","itemActionsAllow","seedFromSchema","addItemLabel","jsxs","Fragment","ItemGlyph","ItemBadge","RequiredMark","ItemErrorMark","errorCountUnderInstancePath"],"mappings":"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"}
+{"version":3,"file":"json-schema-form-accordion-array.cjs","sources":["../../src/components/json-schema-form-accordion-array.tsx"],"sourcesContent":["import { AccordionList } from \"./AccordionList\";\nimport {\n  appendInstancePath,\n  errorCountUnderInstancePath,\n} from \"./json-schema-form-errors\";\nimport {\n  ItemBadge,\n  ItemErrorMark,\n  ItemGlyph,\n  RequiredMark,\n} from \"./json-schema-form-item-row\";\nimport {\n  addItemLabel,\n  emptyItemsCopy,\n  itemActionsAllow,\n  itemCountLabel,\n  itemSummaryFor,\n  noItemsLabel,\n  resolveItemSpec,\n} from \"./json-schema-form-item-summary\";\nimport {\n  canAddItem,\n  canRemoveItem,\n  fieldInputId,\n  seedFromSchema,\n} from \"./json-schema-form-utils\";\nimport { cn } from \"../lib/utils\";\nimport { controlMinHeightClass } from \"./json-schema-form-size\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\n// AccordionArray is the JsonSchemaForm adapter over AccordionList: it turns\n// `x-item` into row content and the schema's item into a recursive sub-form, and\n// owns nothing structural. Everything about the interaction — one row open at a\n// time, roving focus, the add row that doubles as the empty state — lives in\n// AccordionList, which knows nothing about JSON Schema.\nexport function AccordionArray({\n  field,\n  ctx,\n  readOnly,\n}: {\n  field: FieldControl;\n  ctx: RenderContext;\n  readOnly: boolean;\n}) {\n  const items = Array.isArray(field.value) ? field.value : [];\n  const itemSchema = field.itemSchema ?? { type: \"object\" };\n  const spec = field.itemSpec ?? resolveItemSpec(field.schema, itemSchema);\n  const emptyCopy = emptyItemsCopy(spec, field.schema);\n  // The array's help mode governs its whole subtree. Without this the fields\n  // inside an expanded row keep the form-level default, so an accordion that\n  // resolved to \"hover\" would still stack a two-line paragraph under every\n  // control — the exact height the summary rows exist to reclaim.\n  const childCtx: RenderContext = {\n    ...ctx,\n    readOnly,\n    depth: ctx.depth + 1,\n    ...(field.helpDisplay\n      ? { layout: { ...ctx.layout, help: field.helpDisplay } }\n      : {}),\n  };\n\n  function summaryFor(item: unknown, index: number) {\n    return (\n      field.itemSummary?.({ item, index }) ??\n      itemSummaryFor({ item, index, spec, itemSchema })\n    );\n  }\n\n  function renderSummary({\n    item,\n    index,\n    open,\n  }: {\n    item: unknown;\n    index: number;\n    open: boolean;\n  }) {\n    const summary = summaryFor(item, index);\n    return (\n      <>\n        <ItemGlyph glyph={summary.glyph} />\n        <span className=\"shrink-0 text-sm font-medium\">{summary.title}</span>\n        <ItemBadge badge={summary.badge} />\n        {summary.flagged && <RequiredMark />}\n        {summary.summary && (\n          <code className=\"truncate font-mono text-xs text-muted-foreground\">\n            {summary.summary}\n          </code>\n        )}\n        {!open && (\n          <ItemErrorMark\n            count={errorCountUnderInstancePath(\n              ctx.errors,\n              appendInstancePath(ctx.instancePath, index),\n            )}\n          />\n        )}\n      </>\n    );\n  }\n\n  if (ctx.presentation)\n    return (\n      <div className=\"min-w-0 space-y-1\">\n        <div className=\"text-xs text-muted-foreground\">\n          {items.length === 0\n            ? noItemsLabel(spec)\n            : itemCountLabel(spec, items.length)}\n        </div>\n        {items.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              \"flex min-w-0 flex-wrap items-center gap-2 rounded px-2 py-1 even:bg-muted/40\",\n              controlMinHeightClass[ctx.size],\n            )}\n          >\n            {renderSummary({ item, index, open: false })}\n          </div>\n        ))}\n        {items.length === 0 && emptyCopy && (\n          <p className=\"text-xs text-muted-foreground\">{emptyCopy}</p>\n        )}\n      </div>\n    );\n\n  return (\n    <AccordionList<unknown>\n      items={items}\n      onChange={(next) => field.onChange(next)}\n      summary={\n        items.length === 0\n          ? noItemsLabel(spec)\n          : itemCountLabel(spec, items.length)\n      }\n      size={ctx.size}\n      readOnly={readOnly}\n      itemId={(index) =>\n        fieldInputId(appendInstancePath(ctx.instancePath, index), ctx.idPrefix)\n      }\n      // The panel's controls are the form's own inputs; anything else focusable\n      // inside an item (a help disclosure, a remove button on a nested array)\n      // would otherwise win the caret on add.\n      focusSelector=\"[data-jsf-input]\"\n      itemLabel={({ item, index }) => summaryFor(item, index).title}\n      allowReorder={itemActionsAllow(spec, \"reorder\")}\n      allowDuplicate={itemActionsAllow(spec, \"duplicate\")}\n      allowRemove={itemActionsAllow(spec, \"remove\") && canRemoveItem(field, items.length)}\n      // AccordionList shows its add row only when it is given something to\n      // create, so withholding onCreate at maxItems is how the bound reaches it.\n      {...(canAddItem(field, items.length)\n        ? { onCreate: () => seedFromSchema(itemSchema) }\n        : {})}\n      addLabel={addItemLabel(spec)}\n      {...(emptyCopy ? { addDescription: emptyCopy } : {})}\n      renderHeader={renderSummary}\n      renderBody={({ item, index, onChange }) =>\n        // Recurse through the shared pipeline so consumer pre/post extensions\n        // still apply to the item and its properties.\n        ctx.render.renderFieldNodes(\n          {\n            key: `${field.key}[${index}]`,\n            prop: itemSchema,\n            required: false,\n            value: item,\n            onChange,\n            instancePath: appendInstancePath(ctx.instancePath, index),\n          },\n          childCtx,\n        )?.value ?? null\n      }\n    />\n  );\n}\n"],"names":["resolveItemSpec","emptyItemsCopy","itemSummaryFor","jsxs","Fragment","jsx","ItemGlyph","ItemBadge","RequiredMark","ItemErrorMark","errorCountUnderInstancePath","appendInstancePath","noItemsLabel","itemCountLabel","cn","controlMinHeightClass","AccordionList","fieldInputId","itemActionsAllow","canRemoveItem","canAddItem","seedFromSchema","addItemLabel"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-accordion-array.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-accordion-array.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAO5E,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,GAAG,EACH,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,GAAG,EAAE,aAAa,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB,+BAkFA"}
+{"version":3,"file":"json-schema-form-accordion-array.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-accordion-array.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAO5E,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,GAAG,EACH,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,GAAG,EAAE,aAAa,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB,+BAkIA"}

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

@@ -1,9 +1,11 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { AccordionList } from "./AccordionList.js";
 import { appendInstancePath, errorCountUnderInstancePath } from "./json-schema-form-errors.js";
 import { ItemGlyph, ItemBadge, RequiredMark, ItemErrorMark } from "./json-schema-form-item-row.js";
-import { resolveItemSpec, emptyItemsCopy, addItemLabel, itemActionsAllow, noItemsLabel, itemCountLabel, itemSummaryFor } from "./json-schema-form-item-summary.js";
-import { seedFromSchema, fieldInputId } from "./json-schema-form-utils.js";
+import { resolveItemSpec, emptyItemsCopy, noItemsLabel, itemCountLabel, addItemLabel, itemActionsAllow, itemSummaryFor } from "./json-schema-form-item-summary.js";
+import { canAddItem, seedFromSchema, canRemoveItem, fieldInputId } from "./json-schema-form-utils.js";
+import { cn } from "../lib/utils.js";
+import { controlMinHeightClass } from "./json-schema-form-size.js";
 function AccordionArray({
   field,
   ctx,
@@ -23,6 +25,45 @@ function AccordionArray({
     var _a;
     return ((_a = field.itemSummary) == null ? void 0 : _a.call(field, { item, index })) ?? itemSummaryFor({ item, index, spec, itemSchema });
   }
+  function renderSummary({
+    item,
+    index,
+    open
+  }) {
+    const summary = summaryFor(item, index);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ItemGlyph, { glyph: summary.glyph }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm font-medium", children: summary.title }),
+      /* @__PURE__ */ jsx(ItemBadge, { badge: summary.badge }),
+      summary.flagged && /* @__PURE__ */ jsx(RequiredMark, {}),
+      summary.summary && /* @__PURE__ */ jsx("code", { className: "truncate font-mono text-xs text-muted-foreground", children: summary.summary }),
+      !open && /* @__PURE__ */ jsx(
+        ItemErrorMark,
+        {
+          count: errorCountUnderInstancePath(
+            ctx.errors,
+            appendInstancePath(ctx.instancePath, index)
+          )
+        }
+      )
+    ] });
+  }
+  if (ctx.presentation)
+    return /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: items.length === 0 ? noItemsLabel(spec) : itemCountLabel(spec, items.length) }),
+      items.map((item, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex min-w-0 flex-wrap items-center gap-2 rounded px-2 py-1 even:bg-muted/40",
+            controlMinHeightClass[ctx.size]
+          ),
+          children: renderSummary({ item, index, open: false })
+        },
+        index
+      )),
+      items.length === 0 && emptyCopy && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: emptyCopy })
+    ] });
   return /* @__PURE__ */ jsx(
     AccordionList,
     {
@@ -36,29 +77,11 @@ function AccordionArray({
       itemLabel: ({ item, index }) => summaryFor(item, index).title,
       allowReorder: itemActionsAllow(spec, "reorder"),
       allowDuplicate: itemActionsAllow(spec, "duplicate"),
-      allowRemove: itemActionsAllow(spec, "remove"),
-      onCreate: () => seedFromSchema(itemSchema),
+      allowRemove: itemActionsAllow(spec, "remove") && canRemoveItem(field, items.length),
+      ...canAddItem(field, items.length) ? { onCreate: () => seedFromSchema(itemSchema) } : {},
       addLabel: addItemLabel(spec),
       ...emptyCopy ? { addDescription: emptyCopy } : {},
-      renderHeader: ({ item, index, open }) => {
-        const summary = summaryFor(item, index);
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(ItemGlyph, { glyph: summary.glyph }),
-          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm font-medium", children: summary.title }),
-          /* @__PURE__ */ jsx(ItemBadge, { badge: summary.badge }),
-          summary.flagged && /* @__PURE__ */ jsx(RequiredMark, {}),
-          summary.summary && /* @__PURE__ */ jsx("code", { className: "truncate font-mono text-xs text-muted-foreground", children: summary.summary }),
-          !open && /* @__PURE__ */ jsx(
-            ItemErrorMark,
-            {
-              count: errorCountUnderInstancePath(
-                ctx.errors,
-                appendInstancePath(ctx.instancePath, index)
-              )
-            }
-          )
-        ] });
-      },
+      renderHeader: renderSummary,
       renderBody: ({ item, index, onChange }) => {
         var _a;
         return (

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-accordion-array.js","sources":["../../src/components/json-schema-form-accordion-array.tsx"],"sourcesContent":["import { AccordionList } from \"./AccordionList\";\nimport { appendInstancePath, errorCountUnderInstancePath } from \"./json-schema-form-errors\";\nimport {\n  ItemBadge,\n  ItemErrorMark,\n  ItemGlyph,\n  RequiredMark,\n} from \"./json-schema-form-item-row\";\nimport {\n  addItemLabel,\n  emptyItemsCopy,\n  itemActionsAllow,\n  itemCountLabel,\n  itemSummaryFor,\n  noItemsLabel,\n  resolveItemSpec,\n} from \"./json-schema-form-item-summary\";\nimport { fieldInputId, seedFromSchema } from \"./json-schema-form-utils\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\n// AccordionArray is the JsonSchemaForm adapter over AccordionList: it turns\n// `x-item` into row content and the schema's item into a recursive sub-form, and\n// owns nothing structural. Everything about the interaction — one row open at a\n// time, roving focus, the add row that doubles as the empty state — lives in\n// AccordionList, which knows nothing about JSON Schema.\nexport function AccordionArray({\n  field,\n  ctx,\n  readOnly,\n}: {\n  field: FieldControl;\n  ctx: RenderContext;\n  readOnly: boolean;\n}) {\n  const items = Array.isArray(field.value) ? field.value : [];\n  const itemSchema = field.itemSchema ?? { type: \"object\" };\n  const spec = field.itemSpec ?? resolveItemSpec(field.schema, itemSchema);\n  const emptyCopy = emptyItemsCopy(spec, field.schema);\n  // The array's help mode governs its whole subtree. Without this the fields\n  // inside an expanded row keep the form-level default, so an accordion that\n  // resolved to \"hover\" would still stack a two-line paragraph under every\n  // control — the exact height the summary rows exist to reclaim.\n  const childCtx: RenderContext = {\n    ...ctx,\n    readOnly,\n    depth: ctx.depth + 1,\n    ...(field.helpDisplay\n      ? { layout: { ...ctx.layout, help: field.helpDisplay } }\n      : {}),\n  };\n\n  function summaryFor(item: unknown, index: number) {\n    return field.itemSummary?.({ item, index }) ?? itemSummaryFor({ item, index, spec, itemSchema });\n  }\n\n  return (\n    <AccordionList<unknown>\n      items={items}\n      onChange={(next) => field.onChange(next)}\n      summary={items.length === 0 ? noItemsLabel(spec) : itemCountLabel(spec, items.length)}\n      size={ctx.size}\n      readOnly={readOnly}\n      itemId={(index) => fieldInputId(appendInstancePath(ctx.instancePath, index), ctx.idPrefix)}\n      // The panel's controls are the form's own inputs; anything else focusable\n      // inside an item (a help disclosure, a remove button on a nested array)\n      // would otherwise win the caret on add.\n      focusSelector=\"[data-jsf-input]\"\n      itemLabel={({ item, index }) => summaryFor(item, index).title}\n      allowReorder={itemActionsAllow(spec, \"reorder\")}\n      allowDuplicate={itemActionsAllow(spec, \"duplicate\")}\n      allowRemove={itemActionsAllow(spec, \"remove\")}\n      onCreate={() => seedFromSchema(itemSchema)}\n      addLabel={addItemLabel(spec)}\n      {...(emptyCopy ? { addDescription: emptyCopy } : {})}\n      renderHeader={({ item, index, open }) => {\n        const summary = summaryFor(item, index);\n        return (\n          <>\n            <ItemGlyph glyph={summary.glyph} />\n            <span className=\"shrink-0 text-sm font-medium\">{summary.title}</span>\n            <ItemBadge badge={summary.badge} />\n            {summary.flagged && <RequiredMark />}\n            {summary.summary && (\n              <code className=\"truncate font-mono text-xs text-muted-foreground\">\n                {summary.summary}\n              </code>\n            )}\n            {!open && (\n              <ItemErrorMark\n                count={errorCountUnderInstancePath(\n                  ctx.errors,\n                  appendInstancePath(ctx.instancePath, index),\n                )}\n              />\n            )}\n          </>\n        );\n      }}\n      renderBody={({ item, index, onChange }) =>\n        // Recurse through the shared pipeline so consumer pre/post extensions\n        // still apply to the item and its properties.\n        ctx.render.renderFieldNodes(\n          {\n            key: `${field.key}[${index}]`,\n            prop: itemSchema,\n            required: false,\n            value: item,\n            onChange,\n            instancePath: appendInstancePath(ctx.instancePath, index),\n          },\n          childCtx,\n        )?.value ?? null\n      }\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;AAyBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,QAAQ,MAAM,QAAQ,MAAM,KAAK,IAAI,MAAM,QAAQ,CAAA;AACzD,QAAM,aAAa,MAAM,cAAc,EAAE,MAAM,SAAA;AAC/C,QAAM,OAAO,MAAM,YAAY,gBAAgB,MAAM,QAAQ,UAAU;AACvE,QAAM,YAAY,eAAe,MAAM,MAAM,MAAM;AAKnD,QAAM,WAA0B;AAAA,IAC9B,GAAG;AAAA,IACH;AAAA,IACA,OAAO,IAAI,QAAQ;AAAA,IACnB,GAAI,MAAM,cACN,EAAE,QAAQ,EAAE,GAAG,IAAI,QAAQ,MAAM,MAAM,YAAA,EAAY,IACnD,CAAA;AAAA,EAAC;AAGP,WAAS,WAAW,MAAe,OAAe;;AAChD,aAAO,WAAM,gBAAN,+BAAoB,EAAE,MAAM,MAAA,OAAY,eAAe,EAAE,MAAM,OAAO,MAAM,YAAY;AAAA,EACjG;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU,CAAC,SAAS,MAAM,SAAS,IAAI;AAAA,MACvC,SAAS,MAAM,WAAW,IAAI,aAAa,IAAI,IAAI,eAAe,MAAM,MAAM,MAAM;AAAA,MACpF,MAAM,IAAI;AAAA,MACV;AAAA,MACA,QAAQ,CAAC,UAAU,aAAa,mBAAmB,IAAI,cAAc,KAAK,GAAG,IAAI,QAAQ;AAAA,MAIzF,eAAc;AAAA,MACd,WAAW,CAAC,EAAE,MAAM,YAAY,WAAW,MAAM,KAAK,EAAE;AAAA,MACxD,cAAc,iBAAiB,MAAM,SAAS;AAAA,MAC9C,gBAAgB,iBAAiB,MAAM,WAAW;AAAA,MAClD,aAAa,iBAAiB,MAAM,QAAQ;AAAA,MAC5C,UAAU,MAAM,eAAe,UAAU;AAAA,MACzC,UAAU,aAAa,IAAI;AAAA,MAC1B,GAAI,YAAY,EAAE,gBAAgB,UAAA,IAAc,CAAA;AAAA,MACjD,cAAc,CAAC,EAAE,MAAM,OAAO,WAAW;AACvC,cAAM,UAAU,WAAW,MAAM,KAAK;AACtC,eACE,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA,oBAAC,WAAA,EAAU,OAAO,QAAQ,MAAA,CAAO;AAAA,UACjC,oBAAC,QAAA,EAAK,WAAU,gCAAgC,kBAAQ,OAAM;AAAA,UAC9D,oBAAC,WAAA,EAAU,OAAO,QAAQ,MAAA,CAAO;AAAA,UAChC,QAAQ,WAAW,oBAAC,cAAA,CAAA,CAAa;AAAA,UACjC,QAAQ,WACP,oBAAC,UAAK,WAAU,oDACb,kBAAQ,SACX;AAAA,UAED,CAAC,QACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,IAAI;AAAA,gBACJ,mBAAmB,IAAI,cAAc,KAAK;AAAA,cAAA;AAAA,YAC5C;AAAA,UAAA;AAAA,QACF,GAEJ;AAAA,MAEJ;AAAA,MACA,YAAY,CAAC,EAAE,MAAM,OAAO,SAAA,MAAS;;AAGnC;AAAA;AAAA;AAAA,qBAAI,OAAO;AAAA,YACT;AAAA,cACE,KAAK,GAAG,MAAM,GAAG,IAAI,KAAK;AAAA,cAC1B,MAAM;AAAA,cACN,UAAU;AAAA,cACV,OAAO;AAAA,cACP;AAAA,cACA,cAAc,mBAAmB,IAAI,cAAc,KAAK;AAAA,YAAA;AAAA,YAE1D;AAAA,UAAA,MATF,mBAUG,UAAS;AAAA;AAAA;AAAA,IAAA;AAAA,EAAA;AAIpB;"}
+{"version":3,"file":"json-schema-form-accordion-array.js","sources":["../../src/components/json-schema-form-accordion-array.tsx"],"sourcesContent":["import { AccordionList } from \"./AccordionList\";\nimport {\n  appendInstancePath,\n  errorCountUnderInstancePath,\n} from \"./json-schema-form-errors\";\nimport {\n  ItemBadge,\n  ItemErrorMark,\n  ItemGlyph,\n  RequiredMark,\n} from \"./json-schema-form-item-row\";\nimport {\n  addItemLabel,\n  emptyItemsCopy,\n  itemActionsAllow,\n  itemCountLabel,\n  itemSummaryFor,\n  noItemsLabel,\n  resolveItemSpec,\n} from \"./json-schema-form-item-summary\";\nimport {\n  canAddItem,\n  canRemoveItem,\n  fieldInputId,\n  seedFromSchema,\n} from \"./json-schema-form-utils\";\nimport { cn } from \"../lib/utils\";\nimport { controlMinHeightClass } from \"./json-schema-form-size\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\n// AccordionArray is the JsonSchemaForm adapter over AccordionList: it turns\n// `x-item` into row content and the schema's item into a recursive sub-form, and\n// owns nothing structural. Everything about the interaction — one row open at a\n// time, roving focus, the add row that doubles as the empty state — lives in\n// AccordionList, which knows nothing about JSON Schema.\nexport function AccordionArray({\n  field,\n  ctx,\n  readOnly,\n}: {\n  field: FieldControl;\n  ctx: RenderContext;\n  readOnly: boolean;\n}) {\n  const items = Array.isArray(field.value) ? field.value : [];\n  const itemSchema = field.itemSchema ?? { type: \"object\" };\n  const spec = field.itemSpec ?? resolveItemSpec(field.schema, itemSchema);\n  const emptyCopy = emptyItemsCopy(spec, field.schema);\n  // The array's help mode governs its whole subtree. Without this the fields\n  // inside an expanded row keep the form-level default, so an accordion that\n  // resolved to \"hover\" would still stack a two-line paragraph under every\n  // control — the exact height the summary rows exist to reclaim.\n  const childCtx: RenderContext = {\n    ...ctx,\n    readOnly,\n    depth: ctx.depth + 1,\n    ...(field.helpDisplay\n      ? { layout: { ...ctx.layout, help: field.helpDisplay } }\n      : {}),\n  };\n\n  function summaryFor(item: unknown, index: number) {\n    return (\n      field.itemSummary?.({ item, index }) ??\n      itemSummaryFor({ item, index, spec, itemSchema })\n    );\n  }\n\n  function renderSummary({\n    item,\n    index,\n    open,\n  }: {\n    item: unknown;\n    index: number;\n    open: boolean;\n  }) {\n    const summary = summaryFor(item, index);\n    return (\n      <>\n        <ItemGlyph glyph={summary.glyph} />\n        <span className=\"shrink-0 text-sm font-medium\">{summary.title}</span>\n        <ItemBadge badge={summary.badge} />\n        {summary.flagged && <RequiredMark />}\n        {summary.summary && (\n          <code className=\"truncate font-mono text-xs text-muted-foreground\">\n            {summary.summary}\n          </code>\n        )}\n        {!open && (\n          <ItemErrorMark\n            count={errorCountUnderInstancePath(\n              ctx.errors,\n              appendInstancePath(ctx.instancePath, index),\n            )}\n          />\n        )}\n      </>\n    );\n  }\n\n  if (ctx.presentation)\n    return (\n      <div className=\"min-w-0 space-y-1\">\n        <div className=\"text-xs text-muted-foreground\">\n          {items.length === 0\n            ? noItemsLabel(spec)\n            : itemCountLabel(spec, items.length)}\n        </div>\n        {items.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              \"flex min-w-0 flex-wrap items-center gap-2 rounded px-2 py-1 even:bg-muted/40\",\n              controlMinHeightClass[ctx.size],\n            )}\n          >\n            {renderSummary({ item, index, open: false })}\n          </div>\n        ))}\n        {items.length === 0 && emptyCopy && (\n          <p className=\"text-xs text-muted-foreground\">{emptyCopy}</p>\n        )}\n      </div>\n    );\n\n  return (\n    <AccordionList<unknown>\n      items={items}\n      onChange={(next) => field.onChange(next)}\n      summary={\n        items.length === 0\n          ? noItemsLabel(spec)\n          : itemCountLabel(spec, items.length)\n      }\n      size={ctx.size}\n      readOnly={readOnly}\n      itemId={(index) =>\n        fieldInputId(appendInstancePath(ctx.instancePath, index), ctx.idPrefix)\n      }\n      // The panel's controls are the form's own inputs; anything else focusable\n      // inside an item (a help disclosure, a remove button on a nested array)\n      // would otherwise win the caret on add.\n      focusSelector=\"[data-jsf-input]\"\n      itemLabel={({ item, index }) => summaryFor(item, index).title}\n      allowReorder={itemActionsAllow(spec, \"reorder\")}\n      allowDuplicate={itemActionsAllow(spec, \"duplicate\")}\n      allowRemove={itemActionsAllow(spec, \"remove\") && canRemoveItem(field, items.length)}\n      // AccordionList shows its add row only when it is given something to\n      // create, so withholding onCreate at maxItems is how the bound reaches it.\n      {...(canAddItem(field, items.length)\n        ? { onCreate: () => seedFromSchema(itemSchema) }\n        : {})}\n      addLabel={addItemLabel(spec)}\n      {...(emptyCopy ? { addDescription: emptyCopy } : {})}\n      renderHeader={renderSummary}\n      renderBody={({ item, index, onChange }) =>\n        // Recurse through the shared pipeline so consumer pre/post extensions\n        // still apply to the item and its properties.\n        ctx.render.renderFieldNodes(\n          {\n            key: `${field.key}[${index}]`,\n            prop: itemSchema,\n            required: false,\n            value: item,\n            onChange,\n            instancePath: appendInstancePath(ctx.instancePath, index),\n          },\n          childCtx,\n        )?.value ?? null\n      }\n    />\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -29,14 +29,17 @@ function ArrayControl({
   const scalarType = jsonSchemaFormResolve.scalarItemsType(field.itemSchema);
   if (field.arrayDisplay === "list") {
     if (scalarType !== "string") {
-      throw new Error(`${field.key} uses x-array-display list without string items`);
+      throw new Error(
+        `${field.key} uses x-array-display list without string items`
+      );
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
       jsonSchemaFormListArray.CompactListArray,
       {
         field,
         fieldId,
-        readOnly
+        readOnly,
+        presentation: ctx.presentation === true
       }
     );
   }
@@ -95,37 +98,57 @@ function ArrayControl({
     "div",
     {
       className: utils.cn(
-        "flex flex-col rounded-md border border-input p-2",
+        "flex flex-col",
+        !ctx.presentation && "rounded-md border border-input p-2",
         jsonSchemaFormSize.fieldInnerGapClass[ctx.size]
       ),
       children: [
-        items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_auto] items-start gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormLayout.FieldsGrid, { layout: ctx.layout, size: ctx.size, columns: 1, className: "min-w-0", children: ctx.render.renderFieldRow(
-            {
-              key: `${field.key}[${i}]`,
-              prop: itemSchema,
-              required: false,
-              value: item,
-              onChange: (next) => field.onChange(collections.setIndex(items, i, next)),
-              instancePath: jsonSchemaFormErrors.appendInstancePath(ctx.instancePath, i)
-            },
-            childCtx,
-            { labelOverride: `Item ${i + 1}` }
-          ) }),
-          !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
-            ItemActions.ItemActions,
-            {
-              label: `item ${i + 1}`,
-              index: i,
-              count: items.length,
-              size: ctx.size,
-              reveal: false,
-              onMove: (to) => field.onChange(collections.moveItem(items, i, to)),
-              onRemove: () => field.onChange(collections.removeIndex(items, i))
-            }
-          )
-        ] }, i)),
-        !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(
+        items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: utils.cn(
+              "grid items-start gap-2",
+              readOnly ? "grid-cols-1" : "grid-cols-[1fr_auto]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                jsonSchemaFormLayout.FieldsGrid,
+                {
+                  layout: ctx.layout,
+                  size: ctx.size,
+                  columns: 1,
+                  className: "min-w-0",
+                  children: ctx.render.renderFieldRow(
+                    {
+                      key: `${field.key}[${i}]`,
+                      prop: itemSchema,
+                      required: false,
+                      value: item,
+                      onChange: (next) => field.onChange(collections.setIndex(items, i, next)),
+                      instancePath: jsonSchemaFormErrors.appendInstancePath(ctx.instancePath, i)
+                    },
+                    childCtx,
+                    { labelOverride: `Item ${i + 1}` }
+                  )
+                }
+              ),
+              !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+                ItemActions.ItemActions,
+                {
+                  label: `item ${i + 1}`,
+                  index: i,
+                  count: items.length,
+                  size: ctx.size,
+                  reveal: false,
+                  onMove: (to) => field.onChange(collections.moveItem(items, i, to)),
+                  ...jsonSchemaFormUtils.canRemoveItem(field, items.length) ? { onRemove: () => field.onChange(collections.removeIndex(items, i)) } : {}
+                }
+              )
+            ]
+          },
+          i
+        )),
+        !readOnly && jsonSchemaFormUtils.canAddItem(field, items.length) && /* @__PURE__ */ jsxRuntime.jsxs(
           button.Button,
           {
             type: "button",

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-array.cjs","sources":["../../src/components/json-schema-form-array.tsx"],"sourcesContent":["import { moveItem, removeIndex, setIndex } from \"../lib/collections\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { UiAdd } from \"../icons\";\nimport { Button } from \"./button\";\nimport { ItemActions } from \"./ItemActions\";\nimport {\n  controlMinHeightClass,\n  fieldInnerGapClass,\n  inputSizeClass,\n  type FormSize,\n} from \"./json-schema-form-size\";\nimport { AccordionArray } from \"./json-schema-form-accordion-array\";\nimport { CardsArray } from \"./json-schema-form-cards-array\";\nimport { FieldsGrid } from \"./json-schema-form-layout\";\nimport { scalarItemsType } from \"./json-schema-form-resolve\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport { TableArray } from \"./json-schema-form-table-array\";\nimport { TagsComboboxControl } from \"./json-schema-form-tags-combobox\";\nimport { CompactListArray } from \"./json-schema-form-list-array\";\nimport {\n  hasObjectItemProperties,\n  seedFromSchema,\n  toStringArray,\n} from \"./json-schema-form-utils\";\nimport type {\n  FieldControl,\n  FieldOption,\n  RenderContext,\n} from \"./json-schema-form-types\";\n\n// A comma is the second commit key in every tag list, and what a pasted list is\n// split on. Newlines split too — see splitOnComboboxSeparators.\nconst TAG_SEPARATORS = [\",\"];\n\n// ArrayControl routes an array to the control its items call for: a flat list of\n// values (choices, scalars) is ONE tag combobox; object items are summary rows,\n// cards or a table; anything else renders a control per item with add / remove /\n// reorder. Recursion goes through ctx.render so this module never imports the\n// renderer (no import cycle).\nexport function ArrayControl({\n  field,\n  fieldId,\n  ctx,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  ctx: RenderContext;\n}) {\n  // A read-only array marks its whole subtree non-editable: no add/remove/reorder\n  // and item inputs disabled (a child the schema marks readOnly still renders as\n  // a value span).\n  const readOnly = ctx.readOnly || field.readOnly === true;\n  const choices = enumItemOptions(field);\n  const scalarType = scalarItemsType(field.itemSchema);\n  if (field.arrayDisplay === \"list\") {\n    if (scalarType !== \"string\") {\n      throw new Error(`${field.key} uses x-array-display list without string items`);\n    }\n    return (\n      <CompactListArray\n        field={field}\n        fieldId={fieldId}\n        readOnly={readOnly}\n      />\n    );\n  }\n  if (field.arrayDisplay === \"filter-pills\" && choices.length > 0) {\n    return (\n      <FilterPillArray\n        field={field}\n        fieldId={fieldId}\n        readOnly={readOnly}\n        size={ctx.size}\n      />\n    );\n  }\n  // A list of choices is ONE control, not a stack of them: the enum item schema\n  // makes the whole array a multi-select whose committed values are pills, so\n  // the option set is discoverable in one dropdown instead of repeated per item.\n  // `x-array-display: \"stacked\"` opts back into a combobox per item.\n  if (field.arrayDisplay !== \"stacked\" && choices.length > 0) {\n    return (\n      <TagsComboboxControl\n        field={field}\n        fieldId={fieldId}\n        readOnly={readOnly}\n        size={ctx.size}\n        options={choices}\n      />\n    );\n  }\n  // A flat list of scalars is the same gesture as the enum list above — type a\n  // value, get a pill — so it takes the same control, with no options to pick\n  // from and a comma as a second commit key. Numeric items commit numbers.\n  if (field.arrayDisplay !== \"stacked\" && scalarType) {\n    return (\n      <TagsComboboxControl\n        field={field}\n        fieldId={fieldId}\n        readOnly={readOnly}\n        size={ctx.size}\n        options={[]}\n        itemType={scalarType}\n        separators={TAG_SEPARATORS}\n      />\n    );\n  }\n  if (hasObjectItemProperties(field.itemSchema)) {\n    if (field.arrayDisplay === \"cards\") {\n      return <CardsArray field={field} ctx={ctx} readOnly={readOnly} />;\n    }\n    // The accordion is the DEFAULT for object items: stacked in full, a\n    // ten-property item costs ~700px of screen each and a list of them says\n    // nothing about which item is which. `x-array-display: \"stacked\"` opts back\n    // into the per-item sub-form below; `x-layout: \"table\"` into the row grid.\n    // An explicit accordion outranks the table, since it names the renderer.\n    if (\n      field.arrayDisplay === \"accordion\" ||\n      (field.arrayDisplay !== \"stacked\" && field.layout !== \"table\")\n    ) {\n      return <AccordionArray field={field} ctx={ctx} readOnly={readOnly} />;\n    }\n    // `x-layout: table` renders object-item arrays as compact rows with one\n    // column per item property — denser still than the summary rows.\n    if (field.layout === \"table\") {\n      return <TableArray field={field} ctx={ctx} readOnly={readOnly} />;\n    }\n  }\n  const items = Array.isArray(field.value) ? field.value : [];\n  const itemSchema = field.itemSchema ?? { type: \"string\" };\n  const childCtx: RenderContext = { ...ctx, readOnly, depth: ctx.depth + 1 };\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col rounded-md border border-input p-2\",\n        fieldInnerGapClass[ctx.size],\n      )}\n    >\n      {items.map((item, i) => (\n        <div key={i} className=\"grid grid-cols-[1fr_auto] items-start gap-2\">\n          {/* The item's row is a FieldWrapper (or a full-width ObjectSection),\n              both of which are grid children of a FieldsGrid — inline mode's\n              `grid-cols-subgrid` resolves to `none` without one, collapsing\n              every item into a stacked column while the rest of the form stays\n              aligned. Fixed at one column: an item is a single row, and any\n              multi-column layout belongs to the item's own object body. */}\n          <FieldsGrid layout={ctx.layout} size={ctx.size} columns={1} className=\"min-w-0\">\n            {ctx.render.renderFieldRow(\n              {\n                key: `${field.key}[${i}]`,\n                prop: itemSchema,\n                required: false,\n                value: item,\n                onChange: (next) => field.onChange(setIndex(items, i, next)),\n                instancePath: appendInstancePath(ctx.instancePath, i),\n              },\n              childCtx,\n              { labelOverride: `Item ${i + 1}` },\n            )}\n          </FieldsGrid>\n          {!readOnly && (\n            <ItemActions\n              label={`item ${i + 1}`}\n              index={i}\n              count={items.length}\n              size={ctx.size}\n              reveal={false}\n              onMove={(to) => field.onChange(moveItem(items, i, to))}\n              onRemove={() => field.onChange(removeIndex(items, i))}\n            />\n          )}\n        </div>\n      ))}\n      {!readOnly && (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          className={cn(\"gap-1.5\", inputSizeClass[ctx.size])}\n          onClick={() => field.onChange([...items, seedFromSchema(itemSchema)])}\n        >\n          <Icon icon={UiAdd} className=\"text-sm\" />\n          Add item\n        </Button>\n      )}\n    </div>\n  );\n}\n\n// The choices an array of enum items offers, deduped by value. Prefers the\n// resolved `options` (they carry the schema's labels, icons and tones) and falls\n// back to the raw item `enum` for a field a pre-extension built by hand.\nfunction enumItemOptions(field: FieldControl): FieldOption[] {\n  const rawOptions =\n    field.options ??\n    (Array.isArray(field.itemSchema?.enum)\n      ? field.itemSchema.enum.map((value) => ({\n          value: String(value),\n          label: String(value),\n        }))\n      : []);\n  const seen = new Set<string>();\n  return rawOptions.filter((option) => {\n    if (seen.has(option.value)) return false;\n    seen.add(option.value);\n    return true;\n  });\n}\n\nfunction FilterPillArray({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  const options = enumItemOptions(field);\n  const validValues = new Set(options.map((option) => option.value));\n  const explicitValues = toStringArray(field.value).filter((value) =>\n    validValues.has(value),\n  );\n  const implicitAll = explicitValues.length === 0;\n  const selected = new Set(\n    implicitAll ? options.map((option) => option.value) : explicitValues,\n  );\n\n  function commit(nextSelected: Set<string>) {\n    const next = options\n      .map((option) => option.value)\n      .filter((value) => nextSelected.has(value));\n    field.onChange(next.length === options.length ? [] : next);\n  }\n\n  function toggle(value: string) {\n    if (readOnly) return;\n    const next = new Set(selected);\n    if (next.has(value)) {\n      next.delete(value);\n    } else {\n      next.add(value);\n    }\n    commit(next);\n  }\n\n  return (\n    <div\n      id={fieldId}\n      data-jsf-input\n      role=\"group\"\n      aria-label={field.label}\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-2 py-1 shadow-sm\",\n        controlMinHeightClass[size],\n      )}\n    >\n      {options.map((option) => (\n        <FilterPill\n          key={option.value}\n          label={option.label}\n          mode={selected.has(option.value) ? \"active\" : \"neutral\"}\n          title={\n            implicitAll ? `${option.label} enabled by default` : option.label\n          }\n          {...(!readOnly ? { onClick: () => toggle(option.value) } : {})}\n          className=\"max-w-full\"\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":["scalarItemsType","jsx","CompactListArray","TagsComboboxControl","hasObjectItemProperties","CardsArray","AccordionArray","TableArray","jsxs","cn","fieldInnerGapClass","FieldsGrid","setIndex","appendInstancePath","ItemActions","moveItem","removeIndex","Button","inputSizeClass","seedFromSchema","Icon","UiAdd","toStringArray","controlMinHeightClass","FilterPill"],"mappings":"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"}
+{"version":3,"file":"json-schema-form-array.cjs","sources":["../../src/components/json-schema-form-array.tsx"],"sourcesContent":["import { moveItem, removeIndex, setIndex } from \"../lib/collections\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { UiAdd } from \"../icons\";\nimport { Button } from \"./button\";\nimport { ItemActions } from \"./ItemActions\";\nimport {\n  controlMinHeightClass,\n  fieldInnerGapClass,\n  inputSizeClass,\n  type FormSize,\n} from \"./json-schema-form-size\";\nimport { AccordionArray } from \"./json-schema-form-accordion-array\";\nimport { CardsArray } from \"./json-schema-form-cards-array\";\nimport { FieldsGrid } from \"./json-schema-form-layout\";\nimport { scalarItemsType } from \"./json-schema-form-resolve\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport { TableArray } from \"./json-schema-form-table-array\";\nimport { TagsComboboxControl } from \"./json-schema-form-tags-combobox\";\nimport { CompactListArray } from \"./json-schema-form-list-array\";\nimport {\n  canAddItem,\n  canRemoveItem,\n  hasObjectItemProperties,\n  seedFromSchema,\n  toStringArray,\n} from \"./json-schema-form-utils\";\nimport type {\n  FieldControl,\n  FieldOption,\n  RenderContext,\n} from \"./json-schema-form-types\";\n\n// A comma is the second commit key in every tag list, and what a pasted list is\n// split on. Newlines split too — see splitOnComboboxSeparators.\nconst TAG_SEPARATORS = [\",\"];\n\n// ArrayControl routes an array to the control its items call for: a flat list of\n// values (choices, scalars) is ONE tag combobox; object items are summary rows,\n// cards or a table; anything else renders a control per item with add / remove /\n// reorder. Recursion goes through ctx.render so this module never imports the\n// renderer (no import cycle).\nexport function ArrayControl({\n  field,\n  fieldId,\n  ctx,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  ctx: RenderContext;\n}) {\n  // A read-only array marks its whole subtree non-editable: no add/remove/reorder\n  // and item inputs disabled (a child the schema marks readOnly still renders as\n  // a value span).\n  const readOnly = ctx.readOnly || field.readOnly === true;\n  const choices = enumItemOptions(field);\n  const scalarType = scalarItemsType(field.itemSchema);\n  if (field.arrayDisplay === \"list\") {\n    if (scalarType !== \"string\") {\n      throw new Error(\n        `${field.key} uses x-array-display list without string items`,\n      );\n    }\n    return (\n      <CompactListArray\n        field={field}\n        fieldId={fieldId}\n        readOnly={readOnly}\n        presentation={ctx.presentation === true}\n      />\n    );\n  }\n  if (field.arrayDisplay === \"filter-pills\" && choices.length > 0) {\n    return (\n      <FilterPillArray\n        field={field}\n        fieldId={fieldId}\n        readOnly={readOnly}\n        size={ctx.size}\n      />\n    );\n  }\n  // A list of choices is ONE control, not a stack of them: the enum item schema\n  // makes the whole array a multi-select whose committed values are pills, so\n  // the option set is discoverable in one dropdown instead of repeated per item.\n  // `x-array-display: \"stacked\"` opts back into a combobox per item.\n  if (field.arrayDisplay !== \"stacked\" && choices.length > 0) {\n    return (\n      <TagsComboboxControl\n        field={field}\n        fieldId={fieldId}\n        readOnly={readOnly}\n        size={ctx.size}\n        options={choices}\n      />\n    );\n  }\n  // A flat list of scalars is the same gesture as the enum list above — type a\n  // value, get a pill — so it takes the same control, with no options to pick\n  // from and a comma as a second commit key. Numeric items commit numbers.\n  if (field.arrayDisplay !== \"stacked\" && scalarType) {\n    return (\n      <TagsComboboxControl\n        field={field}\n        fieldId={fieldId}\n        readOnly={readOnly}\n        size={ctx.size}\n        options={[]}\n        itemType={scalarType}\n        separators={TAG_SEPARATORS}\n      />\n    );\n  }\n  if (hasObjectItemProperties(field.itemSchema)) {\n    if (field.arrayDisplay === \"cards\") {\n      return <CardsArray field={field} ctx={ctx} readOnly={readOnly} />;\n    }\n    // The accordion is the DEFAULT for object items: stacked in full, a\n    // ten-property item costs ~700px of screen each and a list of them says\n    // nothing about which item is which. `x-array-display: \"stacked\"` opts back\n    // into the per-item sub-form below; `x-layout: \"table\"` into the row grid.\n    // An explicit accordion outranks the table, since it names the renderer.\n    if (\n      field.arrayDisplay === \"accordion\" ||\n      (field.arrayDisplay !== \"stacked\" && field.layout !== \"table\")\n    ) {\n      return <AccordionArray field={field} ctx={ctx} readOnly={readOnly} />;\n    }\n    // `x-layout: table` renders object-item arrays as compact rows with one\n    // column per item property — denser still than the summary rows.\n    if (field.layout === \"table\") {\n      return <TableArray field={field} ctx={ctx} readOnly={readOnly} />;\n    }\n  }\n  const items = Array.isArray(field.value) ? field.value : [];\n  const itemSchema = field.itemSchema ?? { type: \"string\" };\n  const childCtx: RenderContext = { ...ctx, readOnly, depth: ctx.depth + 1 };\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col\",\n        !ctx.presentation && \"rounded-md border border-input p-2\",\n        fieldInnerGapClass[ctx.size],\n      )}\n    >\n      {items.map((item, i) => (\n        <div\n          key={i}\n          className={cn(\n            \"grid items-start gap-2\",\n              readOnly ? \"grid-cols-1\" : \"grid-cols-[1fr_auto]\",\n          )}\n        >\n          {/* The item's row is a FieldWrapper (or a full-width ObjectSection),\n              both of which are grid children of a FieldsGrid — inline mode's\n              `grid-cols-subgrid` resolves to `none` without one, collapsing\n              every item into a stacked column while the rest of the form stays\n              aligned. Fixed at one column: an item is a single row, and any\n              multi-column layout belongs to the item's own object body. */}\n          <FieldsGrid\n            layout={ctx.layout}\n            size={ctx.size}\n            columns={1}\n            className=\"min-w-0\"\n          >\n            {ctx.render.renderFieldRow(\n              {\n                key: `${field.key}[${i}]`,\n                prop: itemSchema,\n                required: false,\n                value: item,\n                onChange: (next) => field.onChange(setIndex(items, i, next)),\n                instancePath: appendInstancePath(ctx.instancePath, i),\n              },\n              childCtx,\n              { labelOverride: `Item ${i + 1}` },\n            )}\n          </FieldsGrid>\n          {!readOnly && (\n            <ItemActions\n              label={`item ${i + 1}`}\n              index={i}\n              count={items.length}\n              size={ctx.size}\n              reveal={false}\n              onMove={(to) => field.onChange(moveItem(items, i, to))}\n              {...(canRemoveItem(field, items.length)\n                ? { onRemove: () => field.onChange(removeIndex(items, i)) }\n                : {})}\n            />\n          )}\n        </div>\n      ))}\n      {!readOnly && canAddItem(field, items.length) && (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          className={cn(\"gap-1.5\", inputSizeClass[ctx.size])}\n          onClick={() => field.onChange([...items, seedFromSchema(itemSchema)])}\n        >\n          <Icon icon={UiAdd} className=\"text-sm\" />\n          Add item\n        </Button>\n      )}\n    </div>\n  );\n}\n\n// The choices an array of enum items offers, deduped by value. Prefers the\n// resolved `options` (they carry the schema's labels, icons and tones) and falls\n// back to the raw item `enum` for a field a pre-extension built by hand.\nfunction enumItemOptions(field: FieldControl): FieldOption[] {\n  const rawOptions =\n    field.options ??\n    (Array.isArray(field.itemSchema?.enum)\n      ? field.itemSchema.enum.map((value) => ({\n          value: String(value),\n          label: String(value),\n        }))\n      : []);\n  const seen = new Set<string>();\n  return rawOptions.filter((option) => {\n    if (seen.has(option.value)) return false;\n    seen.add(option.value);\n    return true;\n  });\n}\n\nfunction FilterPillArray({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  const options = enumItemOptions(field);\n  const validValues = new Set(options.map((option) => option.value));\n  const explicitValues = toStringArray(field.value).filter((value) =>\n    validValues.has(value),\n  );\n  const implicitAll = explicitValues.length === 0;\n  const selected = new Set(\n    implicitAll ? options.map((option) => option.value) : explicitValues,\n  );\n\n  function commit(nextSelected: Set<string>) {\n    const next = options\n      .map((option) => option.value)\n      .filter((value) => nextSelected.has(value));\n    field.onChange(next.length === options.length ? [] : next);\n  }\n\n  function toggle(value: string) {\n    if (readOnly) return;\n    const next = new Set(selected);\n    if (next.has(value)) {\n      next.delete(value);\n    } else {\n      next.add(value);\n    }\n    commit(next);\n  }\n\n  return (\n    <div\n      id={fieldId}\n      data-jsf-input\n      role=\"group\"\n      aria-label={field.label}\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-2 py-1 shadow-sm\",\n        controlMinHeightClass[size],\n      )}\n    >\n      {options.map((option) => (\n        <FilterPill\n          key={option.value}\n          label={option.label}\n          mode={selected.has(option.value) ? \"active\" : \"neutral\"}\n          title={\n            implicitAll ? `${option.label} enabled by default` : option.label\n          }\n          {...(!readOnly ? { onClick: () => toggle(option.value) } : {})}\n          className=\"max-w-full\"\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":["scalarItemsType","jsx","CompactListArray","TagsComboboxControl","hasObjectItemProperties","CardsArray","AccordionArray","TableArray","jsxs","cn","fieldInnerGapClass","FieldsGrid","setIndex","appendInstancePath","ItemActions","moveItem","canRemoveItem","removeIndex","canAddItem","Button","inputSizeClass","seedFromSchema","Icon","UiAdd","toStringArray","controlMinHeightClass","FilterPill"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-array.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-array.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EACV,YAAY,EAEZ,aAAa,EACd,MAAM,0BAA0B,CAAC;AAWlC,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,GAAG,GACJ,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,aAAa,CAAC;CACpB,+BA4IA"}
+{"version":3,"file":"json-schema-form-array.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-array.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EACV,YAAY,EAEZ,aAAa,EACd,MAAM,0BAA0B,CAAC;AAWlC,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,GAAG,GACJ,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,aAAa,CAAC;CACpB,+BA6JA"}

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

@@ -14,7 +14,7 @@ import { appendInstancePath } from "./json-schema-form-errors.js";
 import { TableArray } from "./json-schema-form-table-array.js";
 import { TagsComboboxControl } from "./json-schema-form-tags-combobox.js";
 import { CompactListArray } from "./json-schema-form-list-array.js";
-import { hasObjectItemProperties, seedFromSchema, toStringArray } from "./json-schema-form-utils.js";
+import { hasObjectItemProperties, canRemoveItem, canAddItem, seedFromSchema, toStringArray } from "./json-schema-form-utils.js";
 import { UiAdd } from "../icons/components/UiAdd.js";
 const TAG_SEPARATORS = [","];
 function ArrayControl({
@@ -27,14 +27,17 @@ function ArrayControl({
   const scalarType = scalarItemsType(field.itemSchema);
   if (field.arrayDisplay === "list") {
     if (scalarType !== "string") {
-      throw new Error(`${field.key} uses x-array-display list without string items`);
+      throw new Error(
+        `${field.key} uses x-array-display list without string items`
+      );
     }
     return /* @__PURE__ */ jsx(
       CompactListArray,
       {
         field,
         fieldId,
-        readOnly
+        readOnly,
+        presentation: ctx.presentation === true
       }
     );
   }
@@ -93,37 +96,57 @@ function ArrayControl({
     "div",
     {
       className: cn(
-        "flex flex-col rounded-md border border-input p-2",
+        "flex flex-col",
+        !ctx.presentation && "rounded-md border border-input p-2",
         fieldInnerGapClass[ctx.size]
       ),
       children: [
-        items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_auto] items-start gap-2", children: [
-          /* @__PURE__ */ jsx(FieldsGrid, { layout: ctx.layout, size: ctx.size, columns: 1, className: "min-w-0", children: ctx.render.renderFieldRow(
-            {
-              key: `${field.key}[${i}]`,
-              prop: itemSchema,
-              required: false,
-              value: item,
-              onChange: (next) => field.onChange(setIndex(items, i, next)),
-              instancePath: appendInstancePath(ctx.instancePath, i)
-            },
-            childCtx,
-            { labelOverride: `Item ${i + 1}` }
-          ) }),
-          !readOnly && /* @__PURE__ */ jsx(
-            ItemActions,
-            {
-              label: `item ${i + 1}`,
-              index: i,
-              count: items.length,
-              size: ctx.size,
-              reveal: false,
-              onMove: (to) => field.onChange(moveItem(items, i, to)),
-              onRemove: () => field.onChange(removeIndex(items, i))
-            }
-          )
-        ] }, i)),
-        !readOnly && /* @__PURE__ */ jsxs(
+        items.map((item, i) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "grid items-start gap-2",
+              readOnly ? "grid-cols-1" : "grid-cols-[1fr_auto]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                FieldsGrid,
+                {
+                  layout: ctx.layout,
+                  size: ctx.size,
+                  columns: 1,
+                  className: "min-w-0",
+                  children: ctx.render.renderFieldRow(
+                    {
+                      key: `${field.key}[${i}]`,
+                      prop: itemSchema,
+                      required: false,
+                      value: item,
+                      onChange: (next) => field.onChange(setIndex(items, i, next)),
+                      instancePath: appendInstancePath(ctx.instancePath, i)
+                    },
+                    childCtx,
+                    { labelOverride: `Item ${i + 1}` }
+                  )
+                }
+              ),
+              !readOnly && /* @__PURE__ */ jsx(
+                ItemActions,
+                {
+                  label: `item ${i + 1}`,
+                  index: i,
+                  count: items.length,
+                  size: ctx.size,
+                  reveal: false,
+                  onMove: (to) => field.onChange(moveItem(items, i, to)),
+                  ...canRemoveItem(field, items.length) ? { onRemove: () => field.onChange(removeIndex(items, i)) } : {}
+                }
+              )
+            ]
+          },
+          i
+        )),
+        !readOnly && canAddItem(field, items.length) && /* @__PURE__ */ jsxs(
           Button,
           {
             type: "button",