@flanksource/clicky-ui 0.3.33 → 0.3.35

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-array.js","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":[],"mappings":"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"}
+{"version":3,"file":"json-schema-form-array.js","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":[],"mappings":"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"}

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

@@ -39,30 +39,40 @@ function CardsArray({
         "article",
         {
           className: utils.cn(
-            "group rounded-lg border border-l-4 border-border shadow-sm",
+            "group rounded-lg border-l-4 border-border",
+            ctx.presentation ? "bg-muted/20" : "border shadow-sm",
             summary.glyph ? jsonSchemaFormTone.TONE_EDGE_CLASS[summary.glyph.tone] : void 0
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center gap-2 rounded-tr-md border-b border-border bg-muted/40 px-3 py-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-5 shrink-0 text-center font-mono text-xs text-muted-foreground", children: i + 1 }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-sm font-semibold", 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 }),
-              !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
-                ItemActions.ItemActions,
-                {
-                  label: summary.title,
-                  index: i,
-                  count: items.length,
-                  size: ctx.size,
-                  ...jsonSchemaFormItemSummary.itemActionsAllow(spec, "reorder") ? { onMove: (to) => commit(collections.moveItem(items, i, to)) } : {},
-                  ...jsonSchemaFormItemSummary.itemActionsAllow(spec, "duplicate") ? { onDuplicate: () => commit(collections.duplicateIndex(items, i)) } : {},
-                  ...jsonSchemaFormItemSummary.itemActionsAllow(spec, "remove") ? { onRemove: () => commit(collections.removeIndex(items, i)) } : {}
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: ((_b = ctx.render.renderFieldNodes(
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "header",
+              {
+                className: utils.cn(
+                  "flex flex-wrap items-center gap-2 rounded-tr-md border-b border-border bg-muted/40",
+                  ctx.presentation ? "px-2 py-1" : "px-3 py-2"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-5 shrink-0 text-center font-mono text-xs text-muted-foreground", children: i + 1 }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-sm font-semibold", 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 }),
+                  !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+                    ItemActions.ItemActions,
+                    {
+                      label: summary.title,
+                      index: i,
+                      count: items.length,
+                      size: ctx.size,
+                      ...jsonSchemaFormItemSummary.itemActionsAllow(spec, "reorder") ? { onMove: (to) => commit(collections.moveItem(items, i, to)) } : {},
+                      ...jsonSchemaFormItemSummary.itemActionsAllow(spec, "duplicate") ? { onDuplicate: () => commit(collections.duplicateIndex(items, i)) } : {},
+                      ...jsonSchemaFormItemSummary.itemActionsAllow(spec, "remove") && jsonSchemaFormUtils.canRemoveItem(field, items.length) ? { onRemove: () => commit(collections.removeIndex(items, i)) } : {}
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: ctx.presentation ? "p-2" : "p-3", children: ((_b = ctx.render.renderFieldNodes(
               {
                 key: `${field.key}[${i}]`,
                 prop: itemSchema,
@@ -79,7 +89,7 @@ function CardsArray({
       );
     }),
     items.length === 0 && emptyCopy && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-snug text-muted-foreground", children: emptyCopy }),
-    !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(
+    !readOnly && jsonSchemaFormUtils.canAddItem(field, items.length) && /* @__PURE__ */ jsxRuntime.jsxs(
       button.Button,
       {
         type: "button",

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-cards-array.cjs","sources":["../../src/components/json-schema-form-cards-array.tsx"],"sourcesContent":["import { duplicateIndex, moveItem, removeIndex, setIndex } from \"../lib/collections\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd } from \"../icons\";\nimport { Button } from \"./button\";\nimport { ItemActions } from \"./ItemActions\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport {\n  addItemLabel,\n  emptyItemsCopy,\n  itemActionsAllow,\n  itemSummaryFor,\n  resolveItemSpec,\n} from \"./json-schema-form-item-summary\";\nimport { ItemBadge, RequiredMark } from \"./json-schema-form-item-row\";\nimport { inputSizeClass } from \"./json-schema-form-size\";\nimport { TONE_EDGE_CLASS } from \"./json-schema-form-tone\";\nimport { seedFromSchema } from \"./json-schema-form-utils\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\n// CardsArray renders an object-item array as a stack of titled cards: every\n// item stays open, but each one is headed by what it actually is rather than\n// \"Item 3\", and carries the item type's hue on its left edge so a long stack is\n// scannable at a glance.\n//\n// It is the everything-visible counterpart to AccordionArray. Both read the\n// same `x-item` summary, so a consumer switches between them by changing\n// `x-array-display` alone — no second vocabulary to learn.\nexport function CardsArray({\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, exactly as it does for the\n  // accordion: a card whose fields each carry a permanent two-line paragraph is\n  // back to the height the card layout exists to reclaim.\n  const childCtx: RenderContext = {\n    ...ctx,\n    readOnly,\n    depth: ctx.depth + 1,\n    ...(field.helpDisplay ? { layout: { ...ctx.layout, help: field.helpDisplay } } : {}),\n  };\n\n  function commit(next: unknown[]) {\n    field.onChange(next);\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {items.map((item, i) => {\n        const summary =\n          field.itemSummary?.({ item, index: i }) ??\n          itemSummaryFor({ item, index: i, spec, itemSchema });\n        return (\n          <article\n            key={i}\n            className={cn(\n              \"group rounded-lg border border-l-4 border-border shadow-sm\",\n              summary.glyph ? TONE_EDGE_CLASS[summary.glyph.tone] : undefined,\n            )}\n          >\n            <header className=\"flex items-center gap-2 rounded-tr-md border-b border-border bg-muted/40 px-3 py-2\">\n              <span className=\"w-5 shrink-0 text-center font-mono text-xs text-muted-foreground\">\n                {i + 1}\n              </span>\n              <span className=\"shrink-0 text-sm font-semibold\">{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              {!readOnly && (\n                <ItemActions\n                  label={summary.title}\n                  index={i}\n                  count={items.length}\n                  size={ctx.size}\n                  {...(itemActionsAllow(spec, \"reorder\")\n                    ? { onMove: (to: number) => commit(moveItem(items, i, to)) }\n                    : {})}\n                  {...(itemActionsAllow(spec, \"duplicate\")\n                    ? { onDuplicate: () => commit(duplicateIndex(items, i)) }\n                    : {})}\n                  {...(itemActionsAllow(spec, \"remove\")\n                    ? { onRemove: () => commit(removeIndex(items, i)) }\n                    : {})}\n                />\n              )}\n            </header>\n            <div className=\"p-3\">\n              {/* Recurse through the shared pipeline so consumer pre/post\n                  extensions still apply to the item and its properties — and so\n                  the item's own x-columns reaches its ObjectControl. */}\n              {ctx.render.renderFieldNodes(\n                {\n                  key: `${field.key}[${i}]`,\n                  prop: itemSchema,\n                  required: false,\n                  value: item,\n                  onChange: (next) => commit(setIndex(items, i, next)),\n                  instancePath: appendInstancePath(ctx.instancePath, i),\n                },\n                childCtx,\n              )?.value ?? null}\n            </div>\n          </article>\n        );\n      })}\n      {items.length === 0 && emptyCopy && (\n        <p className=\"text-xs leading-snug text-muted-foreground\">{emptyCopy}</p>\n      )}\n      {!readOnly && (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          className={cn(\"gap-1.5 self-start\", inputSizeClass[ctx.size])}\n          onClick={() => commit([...items, seedFromSchema(itemSchema)])}\n        >\n          <Icon icon={UiAdd} className=\"text-sm\" />\n          {addItemLabel(spec)}\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"names":["resolveItemSpec","emptyItemsCopy","jsxs","itemSummaryFor","cn","TONE_EDGE_CLASS","jsx","ItemBadge","RequiredMark","ItemActions","itemActionsAllow","moveItem","duplicateIndex","removeIndex","setIndex","appendInstancePath","Button","inputSizeClass","seedFromSchema","Icon","UiAdd","addItemLabel"],"mappings":"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"}
+{"version":3,"file":"json-schema-form-cards-array.cjs","sources":["../../src/components/json-schema-form-cards-array.tsx"],"sourcesContent":["import {\n  duplicateIndex,\n  moveItem,\n  removeIndex,\n  setIndex,\n} from \"../lib/collections\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd } from \"../icons\";\nimport { Button } from \"./button\";\nimport { ItemActions } from \"./ItemActions\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport {\n  addItemLabel,\n  emptyItemsCopy,\n  itemActionsAllow,\n  itemSummaryFor,\n  resolveItemSpec,\n} from \"./json-schema-form-item-summary\";\nimport { ItemBadge, RequiredMark } from \"./json-schema-form-item-row\";\nimport { inputSizeClass } from \"./json-schema-form-size\";\nimport { TONE_EDGE_CLASS } from \"./json-schema-form-tone\";\nimport {\n  canAddItem,\n  canRemoveItem,\n  seedFromSchema,\n} from \"./json-schema-form-utils\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\n// CardsArray renders an object-item array as a stack of titled cards: every\n// item stays open, but each one is headed by what it actually is rather than\n// \"Item 3\", and carries the item type's hue on its left edge so a long stack is\n// scannable at a glance.\n//\n// It is the everything-visible counterpart to AccordionArray. Both read the\n// same `x-item` summary, so a consumer switches between them by changing\n// `x-array-display` alone — no second vocabulary to learn.\nexport function CardsArray({\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, exactly as it does for the\n  // accordion: a card whose fields each carry a permanent two-line paragraph is\n  // back to the height the card layout exists 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 commit(next: unknown[]) {\n    field.onChange(next);\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {items.map((item, i) => {\n        const summary =\n          field.itemSummary?.({ item, index: i }) ??\n          itemSummaryFor({ item, index: i, spec, itemSchema });\n        return (\n          <article\n            key={i}\n            className={cn(\n              \"group rounded-lg border-l-4 border-border\",\n              ctx.presentation ? \"bg-muted/20\" : \"border shadow-sm\",\n              summary.glyph ? TONE_EDGE_CLASS[summary.glyph.tone] : undefined,\n            )}\n          >\n            <header\n              className={cn(\n                \"flex flex-wrap items-center gap-2 rounded-tr-md border-b border-border bg-muted/40\",\n                ctx.presentation ? \"px-2 py-1\" : \"px-3 py-2\",\n              )}\n            >\n              <span className=\"w-5 shrink-0 text-center font-mono text-xs text-muted-foreground\">\n                {i + 1}\n              </span>\n              <span className=\"shrink-0 text-sm font-semibold\">\n                {summary.title}\n              </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              {!readOnly && (\n                <ItemActions\n                  label={summary.title}\n                  index={i}\n                  count={items.length}\n                  size={ctx.size}\n                  {...(itemActionsAllow(spec, \"reorder\")\n                    ? { onMove: (to: number) => commit(moveItem(items, i, to)) }\n                    : {})}\n                  {...(itemActionsAllow(spec, \"duplicate\")\n                    ? { onDuplicate: () => commit(duplicateIndex(items, i)) }\n                    : {})}\n                  {...(itemActionsAllow(spec, \"remove\") &&\n                  canRemoveItem(field, items.length)\n                    ? { onRemove: () => commit(removeIndex(items, i)) }\n                    : {})}\n                />\n              )}\n            </header>\n            <div className={ctx.presentation ? \"p-2\" : \"p-3\"}>\n              {/* Recurse through the shared pipeline so consumer pre/post\n                  extensions still apply to the item and its properties — and so\n                  the item's own x-columns reaches its ObjectControl. */}\n              {ctx.render.renderFieldNodes(\n                {\n                  key: `${field.key}[${i}]`,\n                  prop: itemSchema,\n                  required: false,\n                  value: item,\n                  onChange: (next) => commit(setIndex(items, i, next)),\n                  instancePath: appendInstancePath(ctx.instancePath, i),\n                },\n                childCtx,\n              )?.value ?? null}\n            </div>\n          </article>\n        );\n      })}\n      {items.length === 0 && emptyCopy && (\n        <p className=\"text-xs leading-snug text-muted-foreground\">\n          {emptyCopy}\n        </p>\n      )}\n      {!readOnly && canAddItem(field, items.length) && (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          className={cn(\"gap-1.5 self-start\", inputSizeClass[ctx.size])}\n          onClick={() => commit([...items, seedFromSchema(itemSchema)])}\n        >\n          <Icon icon={UiAdd} className=\"text-sm\" />\n          {addItemLabel(spec)}\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"names":["resolveItemSpec","emptyItemsCopy","jsxs","itemSummaryFor","cn","TONE_EDGE_CLASS","jsx","ItemBadge","RequiredMark","ItemActions","itemActionsAllow","moveItem","duplicateIndex","canRemoveItem","removeIndex","setIndex","appendInstancePath","canAddItem","Button","inputSizeClass","seedFromSchema","Icon","UiAdd","addItemLabel"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-cards-array.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-cards-array.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAU5E,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,GAAG,EACH,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,GAAG,EAAE,aAAa,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB,+BAkGA"}
+{"version":3,"file":"json-schema-form-cards-array.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-cards-array.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAU5E,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,GAAG,EACH,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,GAAG,EAAE,aAAa,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB,+BA+GA"}

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

@@ -9,7 +9,7 @@ import { resolveItemSpec, emptyItemsCopy, itemSummaryFor, itemActionsAllow, addI
 import { ItemBadge, RequiredMark } from "./json-schema-form-item-row.js";
 import { inputSizeClass } from "./json-schema-form-size.js";
 import { TONE_EDGE_CLASS } from "./json-schema-form-tone.js";
-import { seedFromSchema } from "./json-schema-form-utils.js";
+import { canRemoveItem, canAddItem, seedFromSchema } from "./json-schema-form-utils.js";
 import { UiAdd } from "../icons/components/UiAdd.js";
 function CardsArray({
   field,
@@ -37,30 +37,40 @@ function CardsArray({
         "article",
         {
           className: cn(
-            "group rounded-lg border border-l-4 border-border shadow-sm",
+            "group rounded-lg border-l-4 border-border",
+            ctx.presentation ? "bg-muted/20" : "border shadow-sm",
             summary.glyph ? TONE_EDGE_CLASS[summary.glyph.tone] : void 0
           ),
           children: [
-            /* @__PURE__ */ jsxs("header", { className: "flex items-center gap-2 rounded-tr-md border-b border-border bg-muted/40 px-3 py-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "w-5 shrink-0 text-center font-mono text-xs text-muted-foreground", children: i + 1 }),
-              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm font-semibold", 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 }),
-              !readOnly && /* @__PURE__ */ jsx(
-                ItemActions,
-                {
-                  label: summary.title,
-                  index: i,
-                  count: items.length,
-                  size: ctx.size,
-                  ...itemActionsAllow(spec, "reorder") ? { onMove: (to) => commit(moveItem(items, i, to)) } : {},
-                  ...itemActionsAllow(spec, "duplicate") ? { onDuplicate: () => commit(duplicateIndex(items, i)) } : {},
-                  ...itemActionsAllow(spec, "remove") ? { onRemove: () => commit(removeIndex(items, i)) } : {}
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "p-3", children: ((_b = ctx.render.renderFieldNodes(
+            /* @__PURE__ */ jsxs(
+              "header",
+              {
+                className: cn(
+                  "flex flex-wrap items-center gap-2 rounded-tr-md border-b border-border bg-muted/40",
+                  ctx.presentation ? "px-2 py-1" : "px-3 py-2"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "w-5 shrink-0 text-center font-mono text-xs text-muted-foreground", children: i + 1 }),
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm font-semibold", 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 }),
+                  !readOnly && /* @__PURE__ */ jsx(
+                    ItemActions,
+                    {
+                      label: summary.title,
+                      index: i,
+                      count: items.length,
+                      size: ctx.size,
+                      ...itemActionsAllow(spec, "reorder") ? { onMove: (to) => commit(moveItem(items, i, to)) } : {},
+                      ...itemActionsAllow(spec, "duplicate") ? { onDuplicate: () => commit(duplicateIndex(items, i)) } : {},
+                      ...itemActionsAllow(spec, "remove") && canRemoveItem(field, items.length) ? { onRemove: () => commit(removeIndex(items, i)) } : {}
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: ctx.presentation ? "p-2" : "p-3", children: ((_b = ctx.render.renderFieldNodes(
               {
                 key: `${field.key}[${i}]`,
                 prop: itemSchema,
@@ -77,7 +87,7 @@ function CardsArray({
       );
     }),
     items.length === 0 && emptyCopy && /* @__PURE__ */ jsx("p", { className: "text-xs leading-snug text-muted-foreground", children: emptyCopy }),
-    !readOnly && /* @__PURE__ */ jsxs(
+    !readOnly && canAddItem(field, items.length) && /* @__PURE__ */ jsxs(
       Button,
       {
         type: "button",

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-cards-array.js","sources":["../../src/components/json-schema-form-cards-array.tsx"],"sourcesContent":["import { duplicateIndex, moveItem, removeIndex, setIndex } from \"../lib/collections\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd } from \"../icons\";\nimport { Button } from \"./button\";\nimport { ItemActions } from \"./ItemActions\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport {\n  addItemLabel,\n  emptyItemsCopy,\n  itemActionsAllow,\n  itemSummaryFor,\n  resolveItemSpec,\n} from \"./json-schema-form-item-summary\";\nimport { ItemBadge, RequiredMark } from \"./json-schema-form-item-row\";\nimport { inputSizeClass } from \"./json-schema-form-size\";\nimport { TONE_EDGE_CLASS } from \"./json-schema-form-tone\";\nimport { seedFromSchema } from \"./json-schema-form-utils\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\n// CardsArray renders an object-item array as a stack of titled cards: every\n// item stays open, but each one is headed by what it actually is rather than\n// \"Item 3\", and carries the item type's hue on its left edge so a long stack is\n// scannable at a glance.\n//\n// It is the everything-visible counterpart to AccordionArray. Both read the\n// same `x-item` summary, so a consumer switches between them by changing\n// `x-array-display` alone — no second vocabulary to learn.\nexport function CardsArray({\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, exactly as it does for the\n  // accordion: a card whose fields each carry a permanent two-line paragraph is\n  // back to the height the card layout exists to reclaim.\n  const childCtx: RenderContext = {\n    ...ctx,\n    readOnly,\n    depth: ctx.depth + 1,\n    ...(field.helpDisplay ? { layout: { ...ctx.layout, help: field.helpDisplay } } : {}),\n  };\n\n  function commit(next: unknown[]) {\n    field.onChange(next);\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {items.map((item, i) => {\n        const summary =\n          field.itemSummary?.({ item, index: i }) ??\n          itemSummaryFor({ item, index: i, spec, itemSchema });\n        return (\n          <article\n            key={i}\n            className={cn(\n              \"group rounded-lg border border-l-4 border-border shadow-sm\",\n              summary.glyph ? TONE_EDGE_CLASS[summary.glyph.tone] : undefined,\n            )}\n          >\n            <header className=\"flex items-center gap-2 rounded-tr-md border-b border-border bg-muted/40 px-3 py-2\">\n              <span className=\"w-5 shrink-0 text-center font-mono text-xs text-muted-foreground\">\n                {i + 1}\n              </span>\n              <span className=\"shrink-0 text-sm font-semibold\">{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              {!readOnly && (\n                <ItemActions\n                  label={summary.title}\n                  index={i}\n                  count={items.length}\n                  size={ctx.size}\n                  {...(itemActionsAllow(spec, \"reorder\")\n                    ? { onMove: (to: number) => commit(moveItem(items, i, to)) }\n                    : {})}\n                  {...(itemActionsAllow(spec, \"duplicate\")\n                    ? { onDuplicate: () => commit(duplicateIndex(items, i)) }\n                    : {})}\n                  {...(itemActionsAllow(spec, \"remove\")\n                    ? { onRemove: () => commit(removeIndex(items, i)) }\n                    : {})}\n                />\n              )}\n            </header>\n            <div className=\"p-3\">\n              {/* Recurse through the shared pipeline so consumer pre/post\n                  extensions still apply to the item and its properties — and so\n                  the item's own x-columns reaches its ObjectControl. */}\n              {ctx.render.renderFieldNodes(\n                {\n                  key: `${field.key}[${i}]`,\n                  prop: itemSchema,\n                  required: false,\n                  value: item,\n                  onChange: (next) => commit(setIndex(items, i, next)),\n                  instancePath: appendInstancePath(ctx.instancePath, i),\n                },\n                childCtx,\n              )?.value ?? null}\n            </div>\n          </article>\n        );\n      })}\n      {items.length === 0 && emptyCopy && (\n        <p className=\"text-xs leading-snug text-muted-foreground\">{emptyCopy}</p>\n      )}\n      {!readOnly && (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          className={cn(\"gap-1.5 self-start\", inputSizeClass[ctx.size])}\n          onClick={() => commit([...items, seedFromSchema(itemSchema)])}\n        >\n          <Icon icon={UiAdd} className=\"text-sm\" />\n          {addItemLabel(spec)}\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"json-schema-form-cards-array.js","sources":["../../src/components/json-schema-form-cards-array.tsx"],"sourcesContent":["import {\n  duplicateIndex,\n  moveItem,\n  removeIndex,\n  setIndex,\n} from \"../lib/collections\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd } from \"../icons\";\nimport { Button } from \"./button\";\nimport { ItemActions } from \"./ItemActions\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport {\n  addItemLabel,\n  emptyItemsCopy,\n  itemActionsAllow,\n  itemSummaryFor,\n  resolveItemSpec,\n} from \"./json-schema-form-item-summary\";\nimport { ItemBadge, RequiredMark } from \"./json-schema-form-item-row\";\nimport { inputSizeClass } from \"./json-schema-form-size\";\nimport { TONE_EDGE_CLASS } from \"./json-schema-form-tone\";\nimport {\n  canAddItem,\n  canRemoveItem,\n  seedFromSchema,\n} from \"./json-schema-form-utils\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\n// CardsArray renders an object-item array as a stack of titled cards: every\n// item stays open, but each one is headed by what it actually is rather than\n// \"Item 3\", and carries the item type's hue on its left edge so a long stack is\n// scannable at a glance.\n//\n// It is the everything-visible counterpart to AccordionArray. Both read the\n// same `x-item` summary, so a consumer switches between them by changing\n// `x-array-display` alone — no second vocabulary to learn.\nexport function CardsArray({\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, exactly as it does for the\n  // accordion: a card whose fields each carry a permanent two-line paragraph is\n  // back to the height the card layout exists 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 commit(next: unknown[]) {\n    field.onChange(next);\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {items.map((item, i) => {\n        const summary =\n          field.itemSummary?.({ item, index: i }) ??\n          itemSummaryFor({ item, index: i, spec, itemSchema });\n        return (\n          <article\n            key={i}\n            className={cn(\n              \"group rounded-lg border-l-4 border-border\",\n              ctx.presentation ? \"bg-muted/20\" : \"border shadow-sm\",\n              summary.glyph ? TONE_EDGE_CLASS[summary.glyph.tone] : undefined,\n            )}\n          >\n            <header\n              className={cn(\n                \"flex flex-wrap items-center gap-2 rounded-tr-md border-b border-border bg-muted/40\",\n                ctx.presentation ? \"px-2 py-1\" : \"px-3 py-2\",\n              )}\n            >\n              <span className=\"w-5 shrink-0 text-center font-mono text-xs text-muted-foreground\">\n                {i + 1}\n              </span>\n              <span className=\"shrink-0 text-sm font-semibold\">\n                {summary.title}\n              </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              {!readOnly && (\n                <ItemActions\n                  label={summary.title}\n                  index={i}\n                  count={items.length}\n                  size={ctx.size}\n                  {...(itemActionsAllow(spec, \"reorder\")\n                    ? { onMove: (to: number) => commit(moveItem(items, i, to)) }\n                    : {})}\n                  {...(itemActionsAllow(spec, \"duplicate\")\n                    ? { onDuplicate: () => commit(duplicateIndex(items, i)) }\n                    : {})}\n                  {...(itemActionsAllow(spec, \"remove\") &&\n                  canRemoveItem(field, items.length)\n                    ? { onRemove: () => commit(removeIndex(items, i)) }\n                    : {})}\n                />\n              )}\n            </header>\n            <div className={ctx.presentation ? \"p-2\" : \"p-3\"}>\n              {/* Recurse through the shared pipeline so consumer pre/post\n                  extensions still apply to the item and its properties — and so\n                  the item's own x-columns reaches its ObjectControl. */}\n              {ctx.render.renderFieldNodes(\n                {\n                  key: `${field.key}[${i}]`,\n                  prop: itemSchema,\n                  required: false,\n                  value: item,\n                  onChange: (next) => commit(setIndex(items, i, next)),\n                  instancePath: appendInstancePath(ctx.instancePath, i),\n                },\n                childCtx,\n              )?.value ?? null}\n            </div>\n          </article>\n        );\n      })}\n      {items.length === 0 && emptyCopy && (\n        <p className=\"text-xs leading-snug text-muted-foreground\">\n          {emptyCopy}\n        </p>\n      )}\n      {!readOnly && canAddItem(field, items.length) && (\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          className={cn(\"gap-1.5 self-start\", inputSizeClass[ctx.size])}\n          onClick={() => commit([...items, seedFromSchema(itemSchema)])}\n        >\n          <Icon icon={UiAdd} className=\"text-sm\" />\n          {addItemLabel(spec)}\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqCO,SAAS,WAAW;AAAA,EACzB;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;AAInD,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,OAAO,MAAiB;AAC/B,UAAM,SAAS,IAAI;AAAA,EACrB;AAEA,SACE,qBAAC,OAAA,EAAI,WAAU,uBACZ,UAAA;AAAA,IAAA,MAAM,IAAI,CAAC,MAAM,MAAM;;AACtB,YAAM,YACJ,WAAM,gBAAN,+BAAoB,EAAE,MAAM,OAAO,EAAA,OACnC,eAAe,EAAE,MAAM,OAAO,GAAG,MAAM,YAAY;AACrD,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAW;AAAA,YACT;AAAA,YACA,IAAI,eAAe,gBAAgB;AAAA,YACnC,QAAQ,QAAQ,gBAAgB,QAAQ,MAAM,IAAI,IAAI;AAAA,UAAA;AAAA,UAGxD,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,IAAI,eAAe,cAAc;AAAA,gBAAA;AAAA,gBAGnC,UAAA;AAAA,kBAAA,oBAAC,QAAA,EAAK,WAAU,oEACb,UAAA,IAAI,GACP;AAAA,kBACA,oBAAC,QAAA,EAAK,WAAU,kCACb,kBAAQ,OACX;AAAA,kBACA,oBAAC,WAAA,EAAU,OAAO,QAAQ,MAAA,CAAO;AAAA,kBAChC,QAAQ,WAAW,oBAAC,cAAA,CAAA,CAAa;AAAA,kBACjC,QAAQ,WACP,oBAAC,UAAK,WAAU,oDACb,kBAAQ,SACX;AAAA,kBAED,CAAC,YACA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,OAAO,QAAQ;AAAA,sBACf,OAAO;AAAA,sBACP,OAAO,MAAM;AAAA,sBACb,MAAM,IAAI;AAAA,sBACT,GAAI,iBAAiB,MAAM,SAAS,IACjC,EAAE,QAAQ,CAAC,OAAe,OAAO,SAAS,OAAO,GAAG,EAAE,CAAC,EAAA,IACvD,CAAA;AAAA,sBACH,GAAI,iBAAiB,MAAM,WAAW,IACnC,EAAE,aAAa,MAAM,OAAO,eAAe,OAAO,CAAC,CAAC,EAAA,IACpD,CAAA;AAAA,sBACH,GAAI,iBAAiB,MAAM,QAAQ,KACpC,cAAc,OAAO,MAAM,MAAM,IAC7B,EAAE,UAAU,MAAM,OAAO,YAAY,OAAO,CAAC,CAAC,MAC9C,CAAA;AAAA,oBAAC;AAAA,kBAAA;AAAA,gBACP;AAAA,cAAA;AAAA,YAAA;AAAA,YAGJ,oBAAC,SAAI,WAAW,IAAI,eAAe,QAAQ,OAIxC,qBAAI,OAAO;AAAA,cACV;AAAA,gBACE,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;AAAA,gBACtB,MAAM;AAAA,gBACN,UAAU;AAAA,gBACV,OAAO;AAAA,gBACP,UAAU,CAAC,SAAS,OAAO,SAAS,OAAO,GAAG,IAAI,CAAC;AAAA,gBACnD,cAAc,mBAAmB,IAAI,cAAc,CAAC;AAAA,cAAA;AAAA,cAEtD;AAAA,YAAA,yBACC,UAAS,KAAA,CACd;AAAA,UAAA;AAAA,QAAA;AAAA,QA5DK;AAAA,MAAA;AAAA,IA+DX,CAAC;AAAA,IACA,MAAM,WAAW,KAAK,iCACpB,KAAA,EAAE,WAAU,8CACV,UAAA,UAAA,CACH;AAAA,IAED,CAAC,YAAY,WAAW,OAAO,MAAM,MAAM,KAC1C;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,WAAW,GAAG,sBAAsB,eAAe,IAAI,IAAI,CAAC;AAAA,QAC5D,SAAS,MAAM,OAAO,CAAC,GAAG,OAAO,eAAe,UAAU,CAAC,CAAC;AAAA,QAE5D,UAAA;AAAA,UAAA,oBAAC,MAAA,EAAK,MAAM,OAAO,WAAU,WAAU;AAAA,UACtC,aAAa,IAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACpB,GAEJ;AAEJ;"}

package/dist/components/json-schema-form-collection-layouts.fixtures.d.ts

@@ -0,0 +1,44 @@
+import { JsonSchemaObject } from './json-schema-form-types';
+export declare const collectionLayoutsSchema: JsonSchemaObject;
+export declare const collectionLayoutsValue: {
+    table: {
+        name: string;
+        environment: string;
+        endpoint: string;
+        tags: string[];
+    }[];
+    accordion: {
+        name: string;
+        environment: string;
+        endpoint: string;
+        tags: string[];
+    }[];
+    cards: {
+        name: string;
+        environment: string;
+        endpoint: string;
+        tags: string[];
+    }[];
+    stacked: {
+        name: string;
+        environment: string;
+        endpoint: string;
+        tags: string[];
+    }[];
+    list: string[];
+    map: {
+        owner: string;
+        region: string;
+    };
+    endpoints: {
+        primary: {
+            host: string;
+            port: number;
+        };
+        secondary: {
+            host: string;
+            port: number;
+        };
+    };
+};
+//# sourceMappingURL=json-schema-form-collection-layouts.fixtures.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-collection-layouts.fixtures.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-collection-layouts.fixtures.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAEjB,MAAM,0BAA0B,CAAC;AA8BlC,eAAO,MAAM,uBAAuB,EAAE,gBA+CrC,CAAC;AAiBF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWlC,CAAC"}

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

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { JsonSchemaObject, RenderContext } from './json-schema-form-types';
 export declare function DiscriminatedForm({ schema, value, onChange, ctx, discKey, }: {
     schema: JsonSchemaObject;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsonSchemaFormResolve = require("./json-schema-form-resolve.cjs");
 const collections = require("../lib/collections.cjs");
 const jsonSchemaFormUtils = require("./json-schema-form-utils.cjs");
+const jsonSchemaFormFilter = require("./json-schema-form-filter.cjs");
 function appendInstancePath(base, token) {
   const escaped = String(token).replaceAll("~", "~0").replaceAll("/", "~1");
   return `${base}/${escaped}`;
@@ -21,6 +22,7 @@ function unmatchedFormErrors({
   errors,
   hiddenKeys,
   hideReadOnlyFields,
+  hideEmpty,
   fieldFilter,
   pre
 }) {
@@ -28,6 +30,7 @@ function unmatchedFormErrors({
   collectObjectPaths(schema, value, "", rendered, {
     hiddenKeys: new Set(hiddenKeys ?? []),
     hideReadOnlyFields,
+    hideEmpty,
     pre,
     rootValue: value,
     root: true,
@@ -41,7 +44,7 @@ function collectObjectPaths(schema, value, basePath, paths, options) {
   const pickerPhase = discriminator != null && (value[discriminator] == null || value[discriminator] === "");
   for (const [key, prop] of Object.entries(properties)) {
     if (options.root && options.hiddenKeys.has(key)) continue;
-    if (options.root && options.fieldFilter && !jsonSchemaFormUtils.matchesFieldFilter(key, prop, options.fieldFilter)) {
+    if (options.root && options.fieldFilter && !jsonSchemaFormFilter.matchesFieldFilter({ key, prop, filter: options.fieldFilter, value: value[key] })) {
       continue;
     }
     if (discriminator && (pickerPhase ? key !== discriminator : key === discriminator)) {
@@ -62,6 +65,7 @@ function collectObjectPaths(schema, value, basePath, paths, options) {
       options.pre
     );
     if (!field || options.hideReadOnlyFields && field.readOnly) continue;
+    if (options.hideEmpty && jsonSchemaFormUtils.isEmptyValue(field.value)) continue;
     const path = appendInstancePath(basePath, key);
     paths.add(path);
     collectControlPaths(field, path, paths, { ...options, root: false });

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-errors.cjs","sources":["../../src/components/json-schema-form-errors.ts"],"sourcesContent":["import {\n  effectiveProperties,\n  resolveControl,\n  scalarItemsType,\n} from \"./json-schema-form-resolve\";\nimport { isPlainObject } from \"../lib/collections\";\nimport { matchesFieldFilter } from \"./json-schema-form-utils\";\nimport type { JsonSchemaFormError } from \"./json-schema-form-error-types\";\nimport type {\n  FieldControl,\n  JsonSchemaObject,\n  JsonSchemaProperty,\n  PreExtension,\n} from \"./json-schema-form-types\";\n\nexport function appendInstancePath(\n  base: string,\n  token: string | number\n): string {\n  const escaped = String(token).replaceAll(\"~\", \"~0\").replaceAll(\"/\", \"~1\");\n  return `${base}/${escaped}`;\n}\n\n// How many errors sit at or below a subtree. A collapsed container (an\n// accordion row) renders none of the controls that would show them, so it\n// reports the count on its own header instead.\nexport function errorCountUnderInstancePath(\n  errors: JsonSchemaFormError[],\n  instancePath: string\n): number {\n  return errors.filter(\n    (error) =>\n      error.instancePath === instancePath ||\n      error.instancePath.startsWith(`${instancePath}/`)\n  ).length;\n}\n\nexport function errorsAtInstancePath(\n  errors: JsonSchemaFormError[],\n  instancePath: string\n): JsonSchemaFormError[] {\n  return errors.filter((error) => error.instancePath === instancePath);\n}\n\nexport function unmatchedFormErrors({\n  schema,\n  value,\n  errors,\n  hiddenKeys,\n  hideReadOnlyFields,\n  fieldFilter,\n  pre,\n}: {\n  schema: JsonSchemaObject;\n  value: Record<string, unknown>;\n  errors: JsonSchemaFormError[];\n  hiddenKeys?: string[];\n  hideReadOnlyFields: boolean;\n  fieldFilter?: string;\n  pre: PreExtension[];\n}): JsonSchemaFormError[] {\n  const rendered = new Set<string>();\n  collectObjectPaths(schema, value, \"\", rendered, {\n    hiddenKeys: new Set(hiddenKeys ?? []),\n    hideReadOnlyFields,\n    pre,\n    rootValue: value,\n    root: true,\n    ...(fieldFilter ? { fieldFilter } : {}),\n  });\n  return errors.filter((error) => !rendered.has(error.instancePath));\n}\n\ninterface CollectOptions {\n  hiddenKeys: Set<string>;\n  hideReadOnlyFields: boolean;\n  fieldFilter?: string;\n  pre: PreExtension[];\n  rootValue: Record<string, unknown>;\n  root: boolean;\n}\n\nfunction collectObjectPaths(\n  schema: JsonSchemaObject,\n  value: Record<string, unknown>,\n  basePath: string,\n  paths: Set<string>,\n  options: CollectOptions\n) {\n  const { properties, required } = effectiveProperties(schema, value);\n  const discriminator =\n    options.root && typeof schema[\"x-discriminator\"] === \"string\"\n      ? schema[\"x-discriminator\"]\n      : undefined;\n  const pickerPhase =\n    discriminator != null &&\n    (value[discriminator] == null || value[discriminator] === \"\");\n\n  for (const [key, prop] of Object.entries(properties)) {\n    if (options.root && options.hiddenKeys.has(key)) continue;\n    if (\n      options.root &&\n      options.fieldFilter &&\n      !matchesFieldFilter(key, prop, options.fieldFilter)\n    ) {\n      continue;\n    }\n    if (\n      discriminator &&\n      (pickerPhase ? key !== discriminator : key === discriminator)\n    ) {\n      continue;\n    }\n\n    const field = applyPreExtensions(\n      resolveControl({\n        key,\n        prop,\n        required: required.includes(key),\n        value: value[key],\n        onChange: () => {},\n      }),\n      prop,\n      value[key],\n      options.rootValue,\n      options.pre\n    );\n    if (!field || (options.hideReadOnlyFields && field.readOnly)) continue;\n\n    const path = appendInstancePath(basePath, key);\n    paths.add(path);\n    collectControlPaths(field, path, paths, { ...options, root: false });\n  }\n}\n\nfunction applyPreExtensions(\n  initial: FieldControl,\n  prop: JsonSchemaProperty,\n  value: unknown,\n  rootValue: Record<string, unknown>,\n  extensions: PreExtension[]\n): FieldControl | null {\n  let field: FieldControl | null = initial;\n  for (const extension of extensions) {\n    if (!field) return null;\n    field = extension(field, {\n      key: field.key,\n      prop,\n      value,\n      rootValue,\n    });\n  }\n  return field;\n}\n\nfunction collectControlPaths(\n  field: FieldControl,\n  instancePath: string,\n  paths: Set<string>,\n  options: CollectOptions\n) {\n  if (field.kind === \"object\") {\n    collectObjectPaths(\n      field.schema as JsonSchemaObject,\n      isPlainObject(field.value) ? field.value : {},\n      instancePath,\n      paths,\n      options\n    );\n    return;\n  }\n  if (field.kind === \"array\") {\n    collectArrayPaths(field, instancePath, paths, options);\n    return;\n  }\n  if (field.kind === \"string-map\") {\n    collectMapPaths(field, instancePath, paths, options);\n  }\n}\n\nfunction collectArrayPaths(\n  field: FieldControl,\n  instancePath: string,\n  paths: Set<string>,\n  options: CollectOptions\n) {\n  // Mirrors ArrayControl's branch order: a flat list of values (pills, choices\n  // or scalars) is ONE control, with no per-item field to hang a message on, so\n  // its item paths stay unmatched and the error surfaces in the form summary\n  // instead of pointing at nothing.\n  if (field.arrayDisplay === \"filter-pills\") return;\n  if (\n    field.arrayDisplay !== \"stacked\" &&\n    (hasEnumItems(field) || scalarItemsType(field.itemSchema))\n  ) {\n    return;\n  }\n\n  const itemSchema = field.itemSchema ?? { type: \"string\" };\n  const table =\n    field.layout === \"table\" &&\n    itemSchema.properties != null &&\n    Object.keys(itemSchema.properties).length > 0;\n  for (const [index, item] of (Array.isArray(field.value)\n    ? field.value\n    : []\n  ).entries()) {\n    const itemPath = appendInstancePath(instancePath, index);\n    if (table) {\n      collectObjectPaths(\n        itemSchema as JsonSchemaObject,\n        isPlainObject(item) ? item : {},\n        itemPath,\n        paths,\n        options\n      );\n      continue;\n    }\n    paths.add(itemPath);\n    collectControlPaths(\n      resolveControl({\n        key: `${field.key}[${index}]`,\n        prop: itemSchema,\n        required: false,\n        value: item,\n        onChange: () => {},\n      }),\n      itemPath,\n      paths,\n      options\n    );\n  }\n}\n\n// Mirrors ArrayControl's tags branch: resolved options win over the raw item\n// enum, since a pre-extension may have supplied them.\nfunction hasEnumItems(field: FieldControl): boolean {\n  if (field.options && field.options.length > 0) return true;\n  return Array.isArray(field.itemSchema?.enum) && field.itemSchema.enum.length > 0;\n}\n\nfunction collectMapPaths(\n  field: FieldControl,\n  instancePath: string,\n  paths: Set<string>,\n  options: CollectOptions\n) {\n  const value = isPlainObject(field.value) ? field.value : {};\n  const known = field.knownProperties ?? {};\n  const keys = [\n    ...Object.keys(known),\n    ...Object.keys(value).filter((key) => !(key in known)),\n  ];\n  for (const key of keys) {\n    const schema = known[key] ?? mapValueSchema(field, key);\n    const path = appendInstancePath(instancePath, key);\n    paths.add(path);\n    collectControlPaths(\n      resolveControl({\n        key,\n        prop: schema,\n        required: false,\n        value: value[key],\n        onChange: () => {},\n      }),\n      path,\n      paths,\n      options\n    );\n  }\n}\n\nfunction mapValueSchema(field: FieldControl, key: string): JsonSchemaProperty {\n  for (const entry of field.valuePatternSchemas ?? []) {\n    try {\n      if (new RegExp(entry.pattern).test(key)) return entry.schema;\n    } catch {\n      continue;\n    }\n  }\n  return field.valueSchema ?? { type: \"string\" };\n}\n"],"names":["effectiveProperties","matchesFieldFilter","resolveControl","isPlainObject","scalarItemsType"],"mappings":"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"}
+{"version":3,"file":"json-schema-form-errors.cjs","sources":["../../src/components/json-schema-form-errors.ts"],"sourcesContent":["import {\n  effectiveProperties,\n  resolveControl,\n  scalarItemsType,\n} from \"./json-schema-form-resolve\";\nimport { isPlainObject } from \"../lib/collections\";\nimport { isEmptyValue } from \"./json-schema-form-utils\";\nimport { matchesFieldFilter } from \"./json-schema-form-filter\";\nimport type { JsonSchemaFormError } from \"./json-schema-form-error-types\";\nimport type {\n  FieldControl,\n  JsonSchemaObject,\n  JsonSchemaProperty,\n  PreExtension,\n} from \"./json-schema-form-types\";\n\nexport function appendInstancePath(\n  base: string,\n  token: string | number\n): string {\n  const escaped = String(token).replaceAll(\"~\", \"~0\").replaceAll(\"/\", \"~1\");\n  return `${base}/${escaped}`;\n}\n\n// How many errors sit at or below a subtree. A collapsed container (an\n// accordion row) renders none of the controls that would show them, so it\n// reports the count on its own header instead.\nexport function errorCountUnderInstancePath(\n  errors: JsonSchemaFormError[],\n  instancePath: string\n): number {\n  return errors.filter(\n    (error) =>\n      error.instancePath === instancePath ||\n      error.instancePath.startsWith(`${instancePath}/`)\n  ).length;\n}\n\nexport function errorsAtInstancePath(\n  errors: JsonSchemaFormError[],\n  instancePath: string\n): JsonSchemaFormError[] {\n  return errors.filter((error) => error.instancePath === instancePath);\n}\n\nexport function unmatchedFormErrors({\n  schema,\n  value,\n  errors,\n  hiddenKeys,\n  hideReadOnlyFields,\n  hideEmpty,\n  fieldFilter,\n  pre,\n}: {\n  schema: JsonSchemaObject;\n  value: Record<string, unknown>;\n  errors: JsonSchemaFormError[];\n  hiddenKeys?: string[];\n  hideReadOnlyFields: boolean;\n  hideEmpty: boolean;\n  fieldFilter?: string;\n  pre: PreExtension[];\n}): JsonSchemaFormError[] {\n  const rendered = new Set<string>();\n  collectObjectPaths(schema, value, \"\", rendered, {\n    hiddenKeys: new Set(hiddenKeys ?? []),\n    hideReadOnlyFields,\n    hideEmpty,\n    pre,\n    rootValue: value,\n    root: true,\n    ...(fieldFilter ? { fieldFilter } : {}),\n  });\n  return errors.filter((error) => !rendered.has(error.instancePath));\n}\n\ninterface CollectOptions {\n  hiddenKeys: Set<string>;\n  hideReadOnlyFields: boolean;\n  hideEmpty: boolean;\n  fieldFilter?: string;\n  pre: PreExtension[];\n  rootValue: Record<string, unknown>;\n  root: boolean;\n}\n\nfunction collectObjectPaths(\n  schema: JsonSchemaObject,\n  value: Record<string, unknown>,\n  basePath: string,\n  paths: Set<string>,\n  options: CollectOptions\n) {\n  const { properties, required } = effectiveProperties(schema, value);\n  const discriminator =\n    options.root && typeof schema[\"x-discriminator\"] === \"string\"\n      ? schema[\"x-discriminator\"]\n      : undefined;\n  const pickerPhase =\n    discriminator != null &&\n    (value[discriminator] == null || value[discriminator] === \"\");\n\n  for (const [key, prop] of Object.entries(properties)) {\n    if (options.root && options.hiddenKeys.has(key)) continue;\n    if (\n      options.root &&\n      options.fieldFilter &&\n      !matchesFieldFilter({ key, prop, filter: options.fieldFilter, value: value[key] })\n    ) {\n      continue;\n    }\n    if (\n      discriminator &&\n      (pickerPhase ? key !== discriminator : key === discriminator)\n    ) {\n      continue;\n    }\n\n    const field = applyPreExtensions(\n      resolveControl({\n        key,\n        prop,\n        required: required.includes(key),\n        value: value[key],\n        onChange: () => {},\n      }),\n      prop,\n      value[key],\n      options.rootValue,\n      options.pre\n    );\n    if (!field || (options.hideReadOnlyFields && field.readOnly)) continue;\n    // A field the form drops is not a place an error can be shown, so its error\n    // has to surface as unmatched rather than vanish with the field.\n    if (options.hideEmpty && isEmptyValue(field.value)) continue;\n\n    const path = appendInstancePath(basePath, key);\n    paths.add(path);\n    collectControlPaths(field, path, paths, { ...options, root: false });\n  }\n}\n\nfunction applyPreExtensions(\n  initial: FieldControl,\n  prop: JsonSchemaProperty,\n  value: unknown,\n  rootValue: Record<string, unknown>,\n  extensions: PreExtension[]\n): FieldControl | null {\n  let field: FieldControl | null = initial;\n  for (const extension of extensions) {\n    if (!field) return null;\n    field = extension(field, {\n      key: field.key,\n      prop,\n      value,\n      rootValue,\n    });\n  }\n  return field;\n}\n\nfunction collectControlPaths(\n  field: FieldControl,\n  instancePath: string,\n  paths: Set<string>,\n  options: CollectOptions\n) {\n  if (field.kind === \"object\") {\n    collectObjectPaths(\n      field.schema as JsonSchemaObject,\n      isPlainObject(field.value) ? field.value : {},\n      instancePath,\n      paths,\n      options\n    );\n    return;\n  }\n  if (field.kind === \"array\") {\n    collectArrayPaths(field, instancePath, paths, options);\n    return;\n  }\n  if (field.kind === \"string-map\") {\n    collectMapPaths(field, instancePath, paths, options);\n  }\n}\n\nfunction collectArrayPaths(\n  field: FieldControl,\n  instancePath: string,\n  paths: Set<string>,\n  options: CollectOptions\n) {\n  // Mirrors ArrayControl's branch order: a flat list of values (pills, choices\n  // or scalars) is ONE control, with no per-item field to hang a message on, so\n  // its item paths stay unmatched and the error surfaces in the form summary\n  // instead of pointing at nothing.\n  if (field.arrayDisplay === \"filter-pills\") return;\n  if (\n    field.arrayDisplay !== \"stacked\" &&\n    (hasEnumItems(field) || scalarItemsType(field.itemSchema))\n  ) {\n    return;\n  }\n\n  const itemSchema = field.itemSchema ?? { type: \"string\" };\n  const table =\n    field.layout === \"table\" &&\n    itemSchema.properties != null &&\n    Object.keys(itemSchema.properties).length > 0;\n  for (const [index, item] of (Array.isArray(field.value)\n    ? field.value\n    : []\n  ).entries()) {\n    const itemPath = appendInstancePath(instancePath, index);\n    if (table) {\n      collectObjectPaths(\n        itemSchema as JsonSchemaObject,\n        isPlainObject(item) ? item : {},\n        itemPath,\n        paths,\n        options\n      );\n      continue;\n    }\n    paths.add(itemPath);\n    collectControlPaths(\n      resolveControl({\n        key: `${field.key}[${index}]`,\n        prop: itemSchema,\n        required: false,\n        value: item,\n        onChange: () => {},\n      }),\n      itemPath,\n      paths,\n      options\n    );\n  }\n}\n\n// Mirrors ArrayControl's tags branch: resolved options win over the raw item\n// enum, since a pre-extension may have supplied them.\nfunction hasEnumItems(field: FieldControl): boolean {\n  if (field.options && field.options.length > 0) return true;\n  return Array.isArray(field.itemSchema?.enum) && field.itemSchema.enum.length > 0;\n}\n\nfunction collectMapPaths(\n  field: FieldControl,\n  instancePath: string,\n  paths: Set<string>,\n  options: CollectOptions\n) {\n  const value = isPlainObject(field.value) ? field.value : {};\n  const known = field.knownProperties ?? {};\n  const keys = [\n    ...Object.keys(known),\n    ...Object.keys(value).filter((key) => !(key in known)),\n  ];\n  for (const key of keys) {\n    const schema = known[key] ?? mapValueSchema(field, key);\n    const path = appendInstancePath(instancePath, key);\n    paths.add(path);\n    collectControlPaths(\n      resolveControl({\n        key,\n        prop: schema,\n        required: false,\n        value: value[key],\n        onChange: () => {},\n      }),\n      path,\n      paths,\n      options\n    );\n  }\n}\n\nfunction mapValueSchema(field: FieldControl, key: string): JsonSchemaProperty {\n  for (const entry of field.valuePatternSchemas ?? []) {\n    try {\n      if (new RegExp(entry.pattern).test(key)) return entry.schema;\n    } catch {\n      continue;\n    }\n  }\n  return field.valueSchema ?? { type: \"string\" };\n}\n"],"names":["effectiveProperties","matchesFieldFilter","resolveControl","isEmptyValue","isPlainObject","scalarItemsType"],"mappings":"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"}

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

@@ -3,12 +3,13 @@ import { JsonSchemaObject, PreExtension } from './json-schema-form-types';
 export declare function appendInstancePath(base: string, token: string | number): string;
 export declare function errorCountUnderInstancePath(errors: JsonSchemaFormError[], instancePath: string): number;
 export declare function errorsAtInstancePath(errors: JsonSchemaFormError[], instancePath: string): JsonSchemaFormError[];
-export declare function unmatchedFormErrors({ schema, value, errors, hiddenKeys, hideReadOnlyFields, fieldFilter, pre, }: {
+export declare function unmatchedFormErrors({ schema, value, errors, hiddenKeys, hideReadOnlyFields, hideEmpty, fieldFilter, pre, }: {
     schema: JsonSchemaObject;
     value: Record<string, unknown>;
     errors: JsonSchemaFormError[];
     hiddenKeys?: string[];
     hideReadOnlyFields: boolean;
+    hideEmpty: boolean;
     fieldFilter?: string;
     pre: PreExtension[];
 }): JsonSchemaFormError[];

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

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-errors.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-errors.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,KAAK,EAEV,gBAAgB,EAEhB,YAAY,EACb,MAAM,0BAA0B,CAAC;AAElC,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,GAAG,MAAM,GACrB,MAAM,CAGR;AAKD,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,mBAAmB,EAAE,EAC7B,YAAY,EAAE,MAAM,GACnB,MAAM,CAMR;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,mBAAmB,EAAE,EAC7B,YAAY,EAAE,MAAM,GACnB,mBAAmB,EAAE,CAEvB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,KAAK,EACL,MAAM,EACN,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,GAAG,GACJ,EAAE;IACD,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,EAAE,YAAY,EAAE,CAAC;CACrB,GAAG,mBAAmB,EAAE,CAWxB"}
+{"version":3,"file":"json-schema-form-errors.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-errors.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,KAAK,EAEV,gBAAgB,EAEhB,YAAY,EACb,MAAM,0BAA0B,CAAC;AAElC,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,GAAG,MAAM,GACrB,MAAM,CAGR;AAKD,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,mBAAmB,EAAE,EAC7B,YAAY,EAAE,MAAM,GACnB,MAAM,CAMR;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,mBAAmB,EAAE,EAC7B,YAAY,EAAE,MAAM,GACnB,mBAAmB,EAAE,CAEvB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,KAAK,EACL,MAAM,EACN,UAAU,EACV,kBAAkB,EAClB,SAAS,EACT,WAAW,EACX,GAAG,GACJ,EAAE;IACD,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,EAAE,YAAY,EAAE,CAAC;CACrB,GAAG,mBAAmB,EAAE,CAYxB"}

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

@@ -1,6 +1,7 @@
 import { effectiveProperties, resolveControl, scalarItemsType } from "./json-schema-form-resolve.js";
 import { isPlainObject } from "../lib/collections.js";
-import { matchesFieldFilter } from "./json-schema-form-utils.js";
+import { isEmptyValue } from "./json-schema-form-utils.js";
+import { matchesFieldFilter } from "./json-schema-form-filter.js";
 function appendInstancePath(base, token) {
   const escaped = String(token).replaceAll("~", "~0").replaceAll("/", "~1");
   return `${base}/${escaped}`;
@@ -19,6 +20,7 @@ function unmatchedFormErrors({
   errors,
   hiddenKeys,
   hideReadOnlyFields,
+  hideEmpty,
   fieldFilter,
   pre
 }) {
@@ -26,6 +28,7 @@ function unmatchedFormErrors({
   collectObjectPaths(schema, value, "", rendered, {
     hiddenKeys: new Set(hiddenKeys ?? []),
     hideReadOnlyFields,
+    hideEmpty,
     pre,
     rootValue: value,
     root: true,
@@ -39,7 +42,7 @@ function collectObjectPaths(schema, value, basePath, paths, options) {
   const pickerPhase = discriminator != null && (value[discriminator] == null || value[discriminator] === "");
   for (const [key, prop] of Object.entries(properties)) {
     if (options.root && options.hiddenKeys.has(key)) continue;
-    if (options.root && options.fieldFilter && !matchesFieldFilter(key, prop, options.fieldFilter)) {
+    if (options.root && options.fieldFilter && !matchesFieldFilter({ key, prop, filter: options.fieldFilter, value: value[key] })) {
       continue;
     }
     if (discriminator && (pickerPhase ? key !== discriminator : key === discriminator)) {
@@ -60,6 +63,7 @@ function collectObjectPaths(schema, value, basePath, paths, options) {
       options.pre
     );
     if (!field || options.hideReadOnlyFields && field.readOnly) continue;
+    if (options.hideEmpty && isEmptyValue(field.value)) continue;
     const path = appendInstancePath(basePath, key);
     paths.add(path);
     collectControlPaths(field, path, paths, { ...options, root: false });