@flanksource/clicky-ui 0.3.19 → 0.3.21

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 {\n  useEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type MutableRefObject,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, LabelIcon } from \"../data/Icon\";\nimport {\n  UiAdd,\n  UiAsterisk,\n  UiChevronDown,\n  UiChevronRight,\n  UiChevronUp,\n  UiCopy,\n  UiTrash,\n} from \"../icons\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport {\n  addItemLabel,\n  emptyItemsCopy,\n  itemCountLabel,\n  itemSummaryFor,\n  noItemsLabel,\n  resolveItemSpec,\n} from \"./json-schema-form-item-summary\";\nimport { controlHeightClass, labelSizeClass, type FormSize } from \"./json-schema-form-size\";\nimport { TONE_GLYPH_CLASS } from \"./json-schema-form-tone\";\nimport {\n  duplicateIndex,\n  fieldInputId,\n  moveItem,\n  removeIndex,\n  seedFromSchema,\n  setIndex,\n} from \"./json-schema-form-utils\";\nimport type {\n  ArrayItemSummary,\n  FieldControl,\n  RenderContext,\n} from \"./json-schema-form-types\";\n\n// AccordionArray renders an object-item array as a list of one-line summary\n// rows, expanding one at a time into the item's own sub-form. It exists because\n// a ten-property item stacked in full costs ~700px of screen each, and a list of\n// them says nothing about which item is which.\n//\n// \"Add\" is the list's own last row rather than a button beside it: the\n// affordance sits exactly where the next item will appear, and at zero items\n// that same row IS the empty state — one control, no separate screen.\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  // Which row is open is transient view state, like the form's field filter —\n  // it is deliberately local and never persisted. The INDEX is the key, not the\n  // item: every keystroke replaces the item object (setIndex returns a fresh\n  // one), so any identity-based map would die on the first character typed.\n  // That makes it the mutators' job to keep this pointing at the same row.\n  const [expanded, setExpanded] = useState<number | null>(null);\n  const rowRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const addRef = useRef<HTMLButtonElement | null>(null);\n  const pendingFocus = useRef<{ kind: \"panel\" | \"row\" | \"add\"; index: number } | null>(null);\n\n  useEffect(() => {\n    const pending = pendingFocus.current;\n    if (!pending) return;\n    pendingFocus.current = null;\n    if (pending.kind === \"add\") {\n      addRef.current?.focus();\n      return;\n    }\n    const row = rowRefs.current[pending.index];\n    if (pending.kind === \"row\") {\n      row?.focus();\n      return;\n    }\n    // Land in the new item's first editable control, so adding an item leaves\n    // the caret where the author is about to type.\n    const panel = document.getElementById(panelId(pending.index));\n    const input = panel?.querySelector<HTMLElement>(\"[data-jsf-input]\");\n    (input ?? row)?.focus();\n  });\n\n  function panelId(index: number): string {\n    return `${fieldInputId(appendInstancePath(ctx.instancePath, index), ctx.idPrefix)}-panel`;\n  }\n  function headerId(index: number): string {\n    return `${fieldInputId(appendInstancePath(ctx.instancePath, index), ctx.idPrefix)}-header`;\n  }\n\n  function commit(next: unknown[]) {\n    field.onChange(next);\n  }\n\n  function add() {\n    pendingFocus.current = { kind: \"panel\", index: items.length };\n    setExpanded(items.length);\n    commit([...items, seedFromSchema(itemSchema)]);\n  }\n\n  function remove(index: number) {\n    setExpanded((open) => (open === index ? null : open !== null && open > index ? open - 1 : open));\n    pendingFocus.current =\n      items.length === 1 ? { kind: \"add\", index: 0 } : { kind: \"row\", index: Math.max(index - 1, 0) };\n    commit(removeIndex(items, index));\n  }\n\n  function duplicate(index: number) {\n    setExpanded((open) => (open !== null && open > index ? open + 1 : open));\n    pendingFocus.current = { kind: \"row\", index: index + 1 };\n    commit(duplicateIndex(items, index));\n  }\n\n  function move(index: number, to: number) {\n    // Follow the item, not the slot — otherwise moving an open row silently\n    // expands whichever row took its place.\n    setExpanded((open) => (open === index ? to : open === to ? index : open));\n    pendingFocus.current = { kind: \"row\", index: to };\n    commit(moveItem(items, index, to));\n  }\n\n  // Roving focus across the headers, with the add row as the final stop.\n  function handleKeyDown(e: KeyboardEvent<HTMLButtonElement>, index: number) {\n    const stops = rowRefs.current.length;\n    const focusAt = (i: number) => {\n      e.preventDefault();\n      (i >= stops ? addRef.current : rowRefs.current[i])?.focus();\n    };\n    if (e.key === \"ArrowDown\") focusAt(Math.min(index + 1, stops));\n    else if (e.key === \"ArrowUp\" && index > 0) focusAt(index - 1);\n    else if (e.key === \"Home\") focusAt(0);\n    else if (e.key === \"End\") focusAt(stops);\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <p className={cn(\"text-muted-foreground\", labelSizeClass[ctx.size])}>\n        {items.length === 0 ? noItemsLabel(spec) : itemCountLabel(spec, items.length)}\n      </p>\n      <div className=\"divide-y divide-border rounded-lg border border-border\">\n        {items.map((item, i) => {\n          const open = expanded === i;\n          const summary =\n            field.itemSummary?.({ item, index: i }) ??\n            itemSummaryFor({ item, index: i, spec, itemSchema });\n          return (\n            <div key={i} className=\"group\">\n              {/* The row is a plain element, NOT a button: the actions beside it\n                  are buttons, and nesting interactive content is invalid DOM\n                  with undefined click targeting. Only the disclosure toggles. */}\n              <div\n                className={cn(\n                  \"flex w-full items-center gap-2 px-3 py-2 hover:bg-accent/40\",\n                  open && \"bg-accent/30\",\n                )}\n              >\n                <button\n                  type=\"button\"\n                  id={headerId(i)}\n                  aria-expanded={open}\n                  aria-controls={panelId(i)}\n                  ref={(el) => {\n                    rowRefs.current[i] = el;\n                  }}\n                  onKeyDown={(e) => handleKeyDown(e, i)}\n                  onClick={() => setExpanded(open ? null : i)}\n                  className=\"flex min-w-0 flex-1 items-center gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                >\n                  <Icon\n                    icon={open ? UiChevronDown : UiChevronRight}\n                    className=\"shrink-0 text-sm text-muted-foreground\"\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                </button>\n                {!readOnly && (\n                  <ItemRowActions\n                    index={i}\n                    title={summary.title}\n                    size={ctx.size}\n                    {...(i > 0 ? { onUp: () => move(i, i - 1) } : {})}\n                    {...(i < items.length - 1 ? { onDown: () => move(i, i + 1) } : {})}\n                    onDuplicate={() => duplicate(i)}\n                    onRemove={() => remove(i)}\n                  />\n                )}\n              </div>\n              {open && (\n                <div\n                  id={panelId(i)}\n                  role=\"region\"\n                  aria-labelledby={headerId(i)}\n                  className=\"border-t border-border bg-muted/20 p-3\"\n                >\n                  {/* Recurse through the shared pipeline so consumer pre/post\n                      extensions still apply to the item and its properties. */}\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              )}\n            </div>\n          );\n        })}\n        {!readOnly && (\n          <AddItemRow\n            buttonRef={addRef}\n            label={addItemLabel(spec)}\n            empty={items.length === 0}\n            onAdd={add}\n            onKeyDown={(e) => handleKeyDown(e, items.length)}\n            {...(emptyCopy ? { copy: emptyCopy } : {})}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\n// AddItemRow is the list's own final row. At zero items it grows to carry the\n// schema's explanation of what an item is — so the empty state is the same\n// control the author will use, not a separate screen they have to leave.\nfunction AddItemRow({\n  label,\n  copy,\n  empty,\n  onAdd,\n  onKeyDown,\n  buttonRef,\n}: {\n  label: string;\n  copy?: string;\n  empty: boolean;\n  onAdd: () => void;\n  onKeyDown: (e: KeyboardEvent<HTMLButtonElement>) => void;\n  buttonRef: MutableRefObject<HTMLButtonElement | null>;\n}) {\n  return (\n    <button\n      type=\"button\"\n      ref={(el) => {\n        buttonRef.current = el;\n      }}\n      onClick={onAdd}\n      onKeyDown={onKeyDown}\n      className={cn(\n        \"group/add flex w-full items-center gap-2 px-3 py-2 text-left text-muted-foreground hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\",\n        empty && \"items-start py-5\",\n      )}\n    >\n      {/* Holds the chevron column, so this row lines up with the ones above it. */}\n      <Icon icon={UiChevronRight} className=\"shrink-0 text-sm opacity-0\" />\n      <span className=\"inline-flex size-6 shrink-0 items-center justify-center rounded-md border border-dashed border-border text-foreground/60 group-hover/add:border-primary group-hover/add:text-primary\">\n        <Icon icon={UiAdd} className=\"text-[13px]\" />\n      </span>\n      <span className=\"flex min-w-0 flex-col gap-0.5\">\n        <span className=\"text-sm font-medium text-foreground\">{label}</span>\n        {copy && (\n          <span className={cn(\"text-xs\", empty ? \"max-w-xl leading-snug\" : \"truncate\")}>{copy}</span>\n        )}\n      </span>\n    </button>\n  );\n}\n\nfunction ItemGlyph({ glyph }: { glyph?: ArrayItemSummary[\"glyph\"] }) {\n  if (!glyph) return null;\n  return (\n    <span\n      title={glyph.label}\n      className={cn(\n        \"inline-flex size-6 shrink-0 items-center justify-center rounded-md ring-1 ring-inset\",\n        TONE_GLYPH_CLASS[glyph.tone],\n      )}\n    >\n      {glyph.icon != null && <LabelIcon icon={glyph.icon} className=\"text-[13px]\" />}\n    </span>\n  );\n}\n\nfunction ItemBadge({ badge }: { badge?: ArrayItemSummary[\"badge\"] }) {\n  if (!badge) return null;\n  return (\n    <span className=\"inline-flex shrink-0 items-center gap-1 rounded-full border border-border px-2 py-0.5 text-[11px] text-muted-foreground\">\n      {badge.icon != null && <LabelIcon icon={badge.icon} className=\"text-[13px]\" />}\n      {badge.label}\n    </span>\n  );\n}\n\nfunction RequiredMark() {\n  return (\n    <span title=\"Required\" className=\"inline-flex shrink-0 items-center text-destructive\">\n      <Icon icon={UiAsterisk} className=\"text-[11px]\" />\n    </span>\n  );\n}\n\nfunction ItemRowActions({\n  index,\n  title,\n  size,\n  onUp,\n  onDown,\n  onDuplicate,\n  onRemove,\n}: {\n  index: number;\n  title: string;\n  size: FormSize;\n  onUp?: () => void;\n  onDown?: () => void;\n  onDuplicate: () => void;\n  onRemove: () => void;\n}) {\n  // Hidden until the row is hovered or something inside it takes focus, so a\n  // long list is not a wall of permanently dim icons — but keyboard users see\n  // them the moment they arrive.\n  const action = cn(\n    \"inline-flex aspect-square items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30\",\n    controlHeightClass[size],\n  );\n  return (\n    <div className=\"ml-auto flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100\">\n      <button type=\"button\" aria-label={`Move ${title} up`} disabled={!onUp} className={action} onClick={onUp}>\n        <Icon icon={UiChevronUp} className=\"text-sm\" />\n      </button>\n      <button\n        type=\"button\"\n        aria-label={`Move ${title} down`}\n        disabled={!onDown}\n        className={action}\n        onClick={onDown}\n      >\n        <Icon icon={UiChevronDown} className=\"text-sm\" />\n      </button>\n      <button type=\"button\" aria-label={`Duplicate ${title}`} className={action} onClick={onDuplicate}>\n        <Icon icon={UiCopy} className=\"text-sm\" />\n      </button>\n      <button\n        type=\"button\"\n        aria-label={`Remove ${title}`}\n        className={cn(action, \"hover:bg-destructive/10 hover:text-destructive\")}\n        onClick={onRemove}\n        data-item-index={index}\n      >\n        <Icon icon={UiTrash} className=\"text-sm\" />\n      </button>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"json-schema-form-accordion-array.js","sources":["../../src/components/json-schema-form-accordion-array.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type MutableRefObject,\n} from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd, UiChevronDown, UiChevronRight } from \"../icons\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport {\n  ItemBadge,\n  ItemGlyph,\n  ItemRowActions,\n  RequiredMark,\n} from \"./json-schema-form-item-row\";\nimport {\n  addItemLabel,\n  emptyItemsCopy,\n  itemCountLabel,\n  itemSummaryFor,\n  noItemsLabel,\n  resolveItemSpec,\n} from \"./json-schema-form-item-summary\";\nimport { labelSizeClass } from \"./json-schema-form-size\";\nimport {\n  duplicateIndex,\n  fieldInputId,\n  moveItem,\n  removeIndex,\n  seedFromSchema,\n  setIndex,\n} from \"./json-schema-form-utils\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\n// AccordionArray renders an object-item array as a list of one-line summary\n// rows, expanding one at a time into the item's own sub-form. It exists because\n// a ten-property item stacked in full costs ~700px of screen each, and a list of\n// them says nothing about which item is which.\n//\n// \"Add\" is the list's own last row rather than a button beside it: the\n// affordance sits exactly where the next item will appear, and at zero items\n// that same row IS the empty state — one control, no separate screen.\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  // Which row is open is transient view state, like the form's field filter —\n  // it is deliberately local and never persisted. The INDEX is the key, not the\n  // item: every keystroke replaces the item object (setIndex returns a fresh\n  // one), so any identity-based map would die on the first character typed.\n  // That makes it the mutators' job to keep this pointing at the same row.\n  const [expanded, setExpanded] = useState<number | null>(null);\n  const rowRefs = useRef<Array<HTMLButtonElement | null>>([]);\n  const addRef = useRef<HTMLButtonElement | null>(null);\n  const pendingFocus = useRef<{ kind: \"panel\" | \"row\" | \"add\"; index: number } | null>(null);\n\n  useEffect(() => {\n    const pending = pendingFocus.current;\n    if (!pending) return;\n    pendingFocus.current = null;\n    if (pending.kind === \"add\") {\n      addRef.current?.focus();\n      return;\n    }\n    const row = rowRefs.current[pending.index];\n    if (pending.kind === \"row\") {\n      row?.focus();\n      return;\n    }\n    // Land in the new item's first editable control, so adding an item leaves\n    // the caret where the author is about to type.\n    const panel = document.getElementById(panelId(pending.index));\n    const input = panel?.querySelector<HTMLElement>(\"[data-jsf-input]\");\n    (input ?? row)?.focus();\n  });\n\n  function panelId(index: number): string {\n    return `${fieldInputId(appendInstancePath(ctx.instancePath, index), ctx.idPrefix)}-panel`;\n  }\n  function headerId(index: number): string {\n    return `${fieldInputId(appendInstancePath(ctx.instancePath, index), ctx.idPrefix)}-header`;\n  }\n\n  function commit(next: unknown[]) {\n    field.onChange(next);\n  }\n\n  function add() {\n    pendingFocus.current = { kind: \"panel\", index: items.length };\n    setExpanded(items.length);\n    commit([...items, seedFromSchema(itemSchema)]);\n  }\n\n  function remove(index: number) {\n    setExpanded((open) => (open === index ? null : open !== null && open > index ? open - 1 : open));\n    pendingFocus.current =\n      items.length === 1 ? { kind: \"add\", index: 0 } : { kind: \"row\", index: Math.max(index - 1, 0) };\n    commit(removeIndex(items, index));\n  }\n\n  function duplicate(index: number) {\n    setExpanded((open) => (open !== null && open > index ? open + 1 : open));\n    pendingFocus.current = { kind: \"row\", index: index + 1 };\n    commit(duplicateIndex(items, index));\n  }\n\n  function move(index: number, to: number) {\n    // Follow the item, not the slot — otherwise moving an open row silently\n    // expands whichever row took its place.\n    setExpanded((open) => (open === index ? to : open === to ? index : open));\n    pendingFocus.current = { kind: \"row\", index: to };\n    commit(moveItem(items, index, to));\n  }\n\n  // Roving focus across the headers, with the add row as the final stop.\n  function handleKeyDown(e: KeyboardEvent<HTMLButtonElement>, index: number) {\n    const stops = rowRefs.current.length;\n    const focusAt = (i: number) => {\n      e.preventDefault();\n      (i >= stops ? addRef.current : rowRefs.current[i])?.focus();\n    };\n    if (e.key === \"ArrowDown\") focusAt(Math.min(index + 1, stops));\n    else if (e.key === \"ArrowUp\" && index > 0) focusAt(index - 1);\n    else if (e.key === \"Home\") focusAt(0);\n    else if (e.key === \"End\") focusAt(stops);\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <p className={cn(\"text-muted-foreground\", labelSizeClass[ctx.size])}>\n        {items.length === 0 ? noItemsLabel(spec) : itemCountLabel(spec, items.length)}\n      </p>\n      <div className=\"divide-y divide-border rounded-lg border border-border\">\n        {items.map((item, i) => {\n          const open = expanded === i;\n          const summary =\n            field.itemSummary?.({ item, index: i }) ??\n            itemSummaryFor({ item, index: i, spec, itemSchema });\n          return (\n            <div key={i} className=\"group\">\n              {/* The row is a plain element, NOT a button: the actions beside it\n                  are buttons, and nesting interactive content is invalid DOM\n                  with undefined click targeting. Only the disclosure toggles. */}\n              <div\n                className={cn(\n                  \"flex w-full items-center gap-2 px-3 py-2 hover:bg-accent/40\",\n                  open && \"bg-accent/30\",\n                )}\n              >\n                <button\n                  type=\"button\"\n                  id={headerId(i)}\n                  aria-expanded={open}\n                  aria-controls={panelId(i)}\n                  ref={(el) => {\n                    rowRefs.current[i] = el;\n                  }}\n                  onKeyDown={(e) => handleKeyDown(e, i)}\n                  onClick={() => setExpanded(open ? null : i)}\n                  className=\"flex min-w-0 flex-1 items-center gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                >\n                  <Icon\n                    icon={open ? UiChevronDown : UiChevronRight}\n                    className=\"shrink-0 text-sm text-muted-foreground\"\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                </button>\n                {!readOnly && (\n                  <ItemRowActions\n                    index={i}\n                    title={summary.title}\n                    size={ctx.size}\n                    {...(i > 0 ? { onUp: () => move(i, i - 1) } : {})}\n                    {...(i < items.length - 1 ? { onDown: () => move(i, i + 1) } : {})}\n                    onDuplicate={() => duplicate(i)}\n                    onRemove={() => remove(i)}\n                  />\n                )}\n              </div>\n              {open && (\n                <div\n                  id={panelId(i)}\n                  role=\"region\"\n                  aria-labelledby={headerId(i)}\n                  className=\"border-t border-border bg-muted/20 p-3\"\n                >\n                  {/* Recurse through the shared pipeline so consumer pre/post\n                      extensions still apply to the item and its properties. */}\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              )}\n            </div>\n          );\n        })}\n        {!readOnly && (\n          <AddItemRow\n            buttonRef={addRef}\n            label={addItemLabel(spec)}\n            empty={items.length === 0}\n            onAdd={add}\n            onKeyDown={(e) => handleKeyDown(e, items.length)}\n            {...(emptyCopy ? { copy: emptyCopy } : {})}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\n// AddItemRow is the list's own final row. At zero items it grows to carry the\n// schema's explanation of what an item is — so the empty state is the same\n// control the author will use, not a separate screen they have to leave.\nfunction AddItemRow({\n  label,\n  copy,\n  empty,\n  onAdd,\n  onKeyDown,\n  buttonRef,\n}: {\n  label: string;\n  copy?: string;\n  empty: boolean;\n  onAdd: () => void;\n  onKeyDown: (e: KeyboardEvent<HTMLButtonElement>) => void;\n  buttonRef: MutableRefObject<HTMLButtonElement | null>;\n}) {\n  return (\n    <button\n      type=\"button\"\n      ref={(el) => {\n        buttonRef.current = el;\n      }}\n      onClick={onAdd}\n      onKeyDown={onKeyDown}\n      className={cn(\n        \"group/add flex w-full items-center gap-2 px-3 py-2 text-left text-muted-foreground hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\",\n        empty && \"items-start py-5\",\n      )}\n    >\n      {/* Holds the chevron column, so this row lines up with the ones above it. */}\n      <Icon icon={UiChevronRight} className=\"shrink-0 text-sm opacity-0\" />\n      <span className=\"inline-flex size-6 shrink-0 items-center justify-center rounded-md border border-dashed border-border text-foreground/60 group-hover/add:border-primary group-hover/add:text-primary\">\n        <Icon icon={UiAdd} className=\"text-[13px]\" />\n      </span>\n      <span className=\"flex min-w-0 flex-col gap-0.5\">\n        <span className=\"text-sm font-medium text-foreground\">{label}</span>\n        {copy && (\n          <span className={cn(\"text-xs\", empty ? \"max-w-xl leading-snug\" : \"truncate\")}>{copy}</span>\n        )}\n      </span>\n    </button>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -8,6 +8,8 @@ const FilterPill = require("../data/FilterPill.cjs");
 const button = require("./button.cjs");
 const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
 const jsonSchemaFormAccordionArray = require("./json-schema-form-accordion-array.cjs");
+const jsonSchemaFormCardsArray = require("./json-schema-form-cards-array.cjs");
+const jsonSchemaFormLayout = require("./json-schema-form-layout.cjs");
 const jsonSchemaFormResolve = require("./json-schema-form-resolve.cjs");
 const jsonSchemaFormErrors = require("./json-schema-form-errors.cjs");
 const jsonSchemaFormTableArray = require("./json-schema-form-table-array.cjs");
@@ -37,6 +39,9 @@ function ArrayControl({
   if (field.arrayDisplay === "accordion" && jsonSchemaFormUtils.hasObjectItemProperties(field.itemSchema)) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormAccordionArray.AccordionArray, { field, ctx, readOnly });
   }
+  if (field.arrayDisplay === "cards" && jsonSchemaFormUtils.hasObjectItemProperties(field.itemSchema)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormCardsArray.CardsArray, { field, ctx, readOnly });
+  }
   if (jsonSchemaFormResolve.isScalarStringItems(field.itemSchema)) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       TagArray,
@@ -63,7 +68,7 @@ function ArrayControl({
       ),
       children: [
         items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_auto] items-start gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0", children: ctx.render.renderFieldRow(
+          /* @__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,

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 { type KeyboardEvent } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { UiAdd, UiChevronDown, UiChevronUp, UiClose, UiTrash } from \"../icons\";\nimport { Button } from \"./button\";\nimport {\n  controlHeightClass,\n  controlMinHeightClass,\n  fieldInnerGapClass,\n  inputSizeClass,\n  labelSizeClass,\n  type FormSize,\n} from \"./json-schema-form-size\";\nimport { AccordionArray } from \"./json-schema-form-accordion-array\";\nimport { isScalarStringItems } from \"./json-schema-form-resolve\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport { TableArray } from \"./json-schema-form-table-array\";\nimport {\n  defaultPlaceholder,\n  hasObjectItemProperties,\n  moveItem,\n  removeIndex,\n  seedFromSchema,\n  setIndex,\n} from \"./json-schema-form-utils\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\n// ArrayControl is a hybrid: plain string-item arrays keep the compact tag UI;\n// anything richer (objects, numbers, enums, nested arrays) renders one recursive\n// control per item with add / remove / reorder. Recursion goes through\n// ctx.render so this module never imports the 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  if (\n    field.arrayDisplay === \"filter-pills\" &&\n    enumItemOptions(field).length > 0\n  ) {\n    return (\n      <FilterPillArray\n        field={field}\n        fieldId={fieldId}\n        readOnly={readOnly}\n        size={ctx.size}\n      />\n    );\n  }\n  // Placed before the scalar-string branch: an array of plain strings has no\n  // properties to summarize, so it falls through to the compact tag editor even\n  // if the schema asks for an accordion.\n  if (\n    field.arrayDisplay === \"accordion\" &&\n    hasObjectItemProperties(field.itemSchema)\n  ) {\n    return <AccordionArray field={field} ctx={ctx} readOnly={readOnly} />;\n  }\n  if (isScalarStringItems(field.itemSchema)) {\n    return (\n      <TagArray\n        field={field}\n        fieldId={fieldId}\n        readOnly={readOnly}\n        size={ctx.size}\n      />\n    );\n  }\n  // `x-layout: table` renders object-item arrays as compact rows with one column\n  // per item property — a denser alternative to the per-item stacked sub-form.\n  if (field.layout === \"table\" && hasObjectItemProperties(field.itemSchema)) {\n    return <TableArray field={field} ctx={ctx} readOnly={readOnly} />;\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          <div 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          </div>\n          {!readOnly && (\n            <ItemControls\n              onUp={\n                i > 0\n                  ? () => field.onChange(moveItem(items, i, i - 1))\n                  : undefined\n              }\n              onDown={\n                i < items.length - 1\n                  ? () => field.onChange(moveItem(items, i, i + 1))\n                  : undefined\n              }\n              onRemove={() => field.onChange(removeIndex(items, i))}\n              index={i}\n              size={ctx.size}\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\nfunction enumItemOptions(\n  field: FieldControl,\n): Array<{ value: string; label: string }> {\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.flatMap((option) => {\n    if (seen.has(option.value)) return [];\n    seen.add(option.value);\n    return [{ value: option.value, label: option.label }];\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\nfunction ItemControls({\n  onUp,\n  onDown,\n  onRemove,\n  index,\n  size,\n}: {\n  onUp: (() => void) | undefined;\n  onDown: (() => void) | undefined;\n  onRemove: () => void;\n  index: number;\n  size: FormSize;\n}) {\n  const actionClassName = cn(\n    \"inline-flex aspect-square items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30\",\n    controlHeightClass[size],\n  );\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      <button\n        type=\"button\"\n        aria-label={`Move item ${index + 1} up`}\n        disabled={!onUp}\n        className={actionClassName}\n        onClick={onUp}\n      >\n        <Icon icon={UiChevronUp} className=\"text-sm\" />\n      </button>\n      <button\n        type=\"button\"\n        aria-label={`Move item ${index + 1} down`}\n        disabled={!onDown}\n        className={actionClassName}\n        onClick={onDown}\n      >\n        <Icon icon={UiChevronDown} className=\"text-sm\" />\n      </button>\n      <button\n        type=\"button\"\n        aria-label={`Remove item ${index + 1}`}\n        className={actionClassName}\n        onClick={onRemove}\n      >\n        <Icon icon={UiTrash} className=\"text-sm\" />\n      </button>\n    </div>\n  );\n}\n\n// TagArray is the compact tag editor for plain string-item arrays.\nfunction TagArray({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  const tags = toStringArray(field.value);\n\n  function commit(raw: string, input: HTMLInputElement) {\n    const next = raw\n      .split(\",\")\n      .map((p) => p.trim())\n      .filter(Boolean);\n    if (next.length === 0) return;\n    field.onChange([...tags, ...next]);\n    input.value = \"\";\n  }\n\n  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {\n    const input = e.currentTarget;\n    if (e.key === \"Enter\" || e.key === \",\") {\n      e.preventDefault();\n      commit(input.value, input);\n      return;\n    }\n    if (e.key === \"Backspace\" && input.value === \"\" && tags.length > 0) {\n      field.onChange(tags.slice(0, -1));\n    }\n  }\n\n  return (\n    <div\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      {tags.map((tag, i) => (\n        <span\n          key={`${tag}-${i}`}\n          className=\"inline-flex h-6 max-w-full items-center gap-1 rounded-md bg-muted px-2 text-xs\"\n        >\n          <span className=\"truncate\">{tag}</span>\n          {!readOnly && (\n            <button\n              type=\"button\"\n              className=\"text-muted-foreground hover:text-foreground\"\n              aria-label={`Remove ${tag}`}\n              onClick={() => field.onChange(tags.filter((_, idx) => idx !== i))}\n            >\n              <Icon icon={UiClose} />\n            </button>\n          )}\n        </span>\n      ))}\n      {!readOnly && (\n        <input\n          id={fieldId}\n          data-jsf-input\n          className={cn(\n            \"min-w-32 flex-1 bg-transparent px-1 py-1 outline-none\",\n            labelSizeClass[size],\n          )}\n          placeholder={\n            tags.length === 0 ? defaultPlaceholder(field.schema) : \"\"\n          }\n          onKeyDown={handleKeyDown}\n          onBlur={(e) => commit(e.currentTarget.value, e.currentTarget)}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction toStringArray(value: unknown): string[] {\n  if (Array.isArray(value)) return value.map(String);\n  return [];\n}\n"],"names":["jsx","hasObjectItemProperties","AccordionArray","isScalarStringItems","TableArray","jsxs","cn","fieldInnerGapClass","setIndex","appendInstancePath","moveItem","removeIndex","Button","inputSizeClass","seedFromSchema","Icon","UiAdd","controlMinHeightClass","FilterPill","controlHeightClass","UiChevronUp","UiChevronDown","UiTrash","UiClose","labelSizeClass","defaultPlaceholder"],"mappings":"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"}
+{"version":3,"file":"json-schema-form-array.cjs","sources":["../../src/components/json-schema-form-array.tsx"],"sourcesContent":["import { type KeyboardEvent } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { UiAdd, UiChevronDown, UiChevronUp, UiClose, UiTrash } from \"../icons\";\nimport { Button } from \"./button\";\nimport {\n  controlHeightClass,\n  controlMinHeightClass,\n  fieldInnerGapClass,\n  inputSizeClass,\n  labelSizeClass,\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 { isScalarStringItems } from \"./json-schema-form-resolve\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport { TableArray } from \"./json-schema-form-table-array\";\nimport {\n  defaultPlaceholder,\n  hasObjectItemProperties,\n  moveItem,\n  removeIndex,\n  seedFromSchema,\n  setIndex,\n} from \"./json-schema-form-utils\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\n// ArrayControl is a hybrid: plain string-item arrays keep the compact tag UI;\n// anything richer (objects, numbers, enums, nested arrays) renders one recursive\n// control per item with add / remove / reorder. Recursion goes through\n// ctx.render so this module never imports the 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  if (\n    field.arrayDisplay === \"filter-pills\" &&\n    enumItemOptions(field).length > 0\n  ) {\n    return (\n      <FilterPillArray\n        field={field}\n        fieldId={fieldId}\n        readOnly={readOnly}\n        size={ctx.size}\n      />\n    );\n  }\n  // Placed before the scalar-string branch: an array of plain strings has no\n  // properties to summarize, so it falls through to the compact tag editor even\n  // if the schema asks for an accordion.\n  if (\n    field.arrayDisplay === \"accordion\" &&\n    hasObjectItemProperties(field.itemSchema)\n  ) {\n    return <AccordionArray field={field} ctx={ctx} readOnly={readOnly} />;\n  }\n  // Same guard as the accordion, and for the same reason: a card is headed by\n  // the item's own summary, which a list of bare strings cannot supply.\n  if (field.arrayDisplay === \"cards\" && hasObjectItemProperties(field.itemSchema)) {\n    return <CardsArray field={field} ctx={ctx} readOnly={readOnly} />;\n  }\n  if (isScalarStringItems(field.itemSchema)) {\n    return (\n      <TagArray\n        field={field}\n        fieldId={fieldId}\n        readOnly={readOnly}\n        size={ctx.size}\n      />\n    );\n  }\n  // `x-layout: table` renders object-item arrays as compact rows with one column\n  // per item property — a denser alternative to the per-item stacked sub-form.\n  if (field.layout === \"table\" && hasObjectItemProperties(field.itemSchema)) {\n    return <TableArray field={field} ctx={ctx} readOnly={readOnly} />;\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            <ItemControls\n              onUp={\n                i > 0\n                  ? () => field.onChange(moveItem(items, i, i - 1))\n                  : undefined\n              }\n              onDown={\n                i < items.length - 1\n                  ? () => field.onChange(moveItem(items, i, i + 1))\n                  : undefined\n              }\n              onRemove={() => field.onChange(removeIndex(items, i))}\n              index={i}\n              size={ctx.size}\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\nfunction enumItemOptions(\n  field: FieldControl,\n): Array<{ value: string; label: string }> {\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.flatMap((option) => {\n    if (seen.has(option.value)) return [];\n    seen.add(option.value);\n    return [{ value: option.value, label: option.label }];\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\nfunction ItemControls({\n  onUp,\n  onDown,\n  onRemove,\n  index,\n  size,\n}: {\n  onUp: (() => void) | undefined;\n  onDown: (() => void) | undefined;\n  onRemove: () => void;\n  index: number;\n  size: FormSize;\n}) {\n  const actionClassName = cn(\n    \"inline-flex aspect-square items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30\",\n    controlHeightClass[size],\n  );\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      <button\n        type=\"button\"\n        aria-label={`Move item ${index + 1} up`}\n        disabled={!onUp}\n        className={actionClassName}\n        onClick={onUp}\n      >\n        <Icon icon={UiChevronUp} className=\"text-sm\" />\n      </button>\n      <button\n        type=\"button\"\n        aria-label={`Move item ${index + 1} down`}\n        disabled={!onDown}\n        className={actionClassName}\n        onClick={onDown}\n      >\n        <Icon icon={UiChevronDown} className=\"text-sm\" />\n      </button>\n      <button\n        type=\"button\"\n        aria-label={`Remove item ${index + 1}`}\n        className={actionClassName}\n        onClick={onRemove}\n      >\n        <Icon icon={UiTrash} className=\"text-sm\" />\n      </button>\n    </div>\n  );\n}\n\n// TagArray is the compact tag editor for plain string-item arrays.\nfunction TagArray({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  const tags = toStringArray(field.value);\n\n  function commit(raw: string, input: HTMLInputElement) {\n    const next = raw\n      .split(\",\")\n      .map((p) => p.trim())\n      .filter(Boolean);\n    if (next.length === 0) return;\n    field.onChange([...tags, ...next]);\n    input.value = \"\";\n  }\n\n  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {\n    const input = e.currentTarget;\n    if (e.key === \"Enter\" || e.key === \",\") {\n      e.preventDefault();\n      commit(input.value, input);\n      return;\n    }\n    if (e.key === \"Backspace\" && input.value === \"\" && tags.length > 0) {\n      field.onChange(tags.slice(0, -1));\n    }\n  }\n\n  return (\n    <div\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      {tags.map((tag, i) => (\n        <span\n          key={`${tag}-${i}`}\n          className=\"inline-flex h-6 max-w-full items-center gap-1 rounded-md bg-muted px-2 text-xs\"\n        >\n          <span className=\"truncate\">{tag}</span>\n          {!readOnly && (\n            <button\n              type=\"button\"\n              className=\"text-muted-foreground hover:text-foreground\"\n              aria-label={`Remove ${tag}`}\n              onClick={() => field.onChange(tags.filter((_, idx) => idx !== i))}\n            >\n              <Icon icon={UiClose} />\n            </button>\n          )}\n        </span>\n      ))}\n      {!readOnly && (\n        <input\n          id={fieldId}\n          data-jsf-input\n          className={cn(\n            \"min-w-32 flex-1 bg-transparent px-1 py-1 outline-none\",\n            labelSizeClass[size],\n          )}\n          placeholder={\n            tags.length === 0 ? defaultPlaceholder(field.schema) : \"\"\n          }\n          onKeyDown={handleKeyDown}\n          onBlur={(e) => commit(e.currentTarget.value, e.currentTarget)}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction toStringArray(value: unknown): string[] {\n  if (Array.isArray(value)) return value.map(String);\n  return [];\n}\n"],"names":["jsx","hasObjectItemProperties","AccordionArray","CardsArray","isScalarStringItems","TableArray","jsxs","cn","fieldInnerGapClass","FieldsGrid","setIndex","appendInstancePath","moveItem","removeIndex","Button","inputSizeClass","seedFromSchema","Icon","UiAdd","controlMinHeightClass","FilterPill","controlHeightClass","UiChevronUp","UiChevronDown","UiTrash","UiClose","labelSizeClass","defaultPlaceholder"],"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,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAM5E,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,2CAqGA"}
+{"version":3,"file":"json-schema-form-array.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-array.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAM5E,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,2CAgHA"}

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

@@ -6,6 +6,8 @@ import { FilterPill } from "../data/FilterPill.js";
 import { Button } from "./button.js";
 import { inputSizeClass, fieldInnerGapClass, controlMinHeightClass, labelSizeClass, controlHeightClass } from "./json-schema-form-size.js";
 import { AccordionArray } from "./json-schema-form-accordion-array.js";
+import { CardsArray } from "./json-schema-form-cards-array.js";
+import { FieldsGrid } from "./json-schema-form-layout.js";
 import { isScalarStringItems } from "./json-schema-form-resolve.js";
 import { appendInstancePath } from "./json-schema-form-errors.js";
 import { TableArray } from "./json-schema-form-table-array.js";
@@ -35,6 +37,9 @@ function ArrayControl({
   if (field.arrayDisplay === "accordion" && hasObjectItemProperties(field.itemSchema)) {
     return /* @__PURE__ */ jsx(AccordionArray, { field, ctx, readOnly });
   }
+  if (field.arrayDisplay === "cards" && hasObjectItemProperties(field.itemSchema)) {
+    return /* @__PURE__ */ jsx(CardsArray, { field, ctx, readOnly });
+  }
   if (isScalarStringItems(field.itemSchema)) {
     return /* @__PURE__ */ jsx(
       TagArray,
@@ -61,7 +66,7 @@ function ArrayControl({
       ),
       children: [
         items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_auto] items-start gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "min-w-0", children: ctx.render.renderFieldRow(
+          /* @__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,

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 { type KeyboardEvent } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { UiAdd, UiChevronDown, UiChevronUp, UiClose, UiTrash } from \"../icons\";\nimport { Button } from \"./button\";\nimport {\n  controlHeightClass,\n  controlMinHeightClass,\n  fieldInnerGapClass,\n  inputSizeClass,\n  labelSizeClass,\n  type FormSize,\n} from \"./json-schema-form-size\";\nimport { AccordionArray } from \"./json-schema-form-accordion-array\";\nimport { isScalarStringItems } from \"./json-schema-form-resolve\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport { TableArray } from \"./json-schema-form-table-array\";\nimport {\n  defaultPlaceholder,\n  hasObjectItemProperties,\n  moveItem,\n  removeIndex,\n  seedFromSchema,\n  setIndex,\n} from \"./json-schema-form-utils\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\n// ArrayControl is a hybrid: plain string-item arrays keep the compact tag UI;\n// anything richer (objects, numbers, enums, nested arrays) renders one recursive\n// control per item with add / remove / reorder. Recursion goes through\n// ctx.render so this module never imports the 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  if (\n    field.arrayDisplay === \"filter-pills\" &&\n    enumItemOptions(field).length > 0\n  ) {\n    return (\n      <FilterPillArray\n        field={field}\n        fieldId={fieldId}\n        readOnly={readOnly}\n        size={ctx.size}\n      />\n    );\n  }\n  // Placed before the scalar-string branch: an array of plain strings has no\n  // properties to summarize, so it falls through to the compact tag editor even\n  // if the schema asks for an accordion.\n  if (\n    field.arrayDisplay === \"accordion\" &&\n    hasObjectItemProperties(field.itemSchema)\n  ) {\n    return <AccordionArray field={field} ctx={ctx} readOnly={readOnly} />;\n  }\n  if (isScalarStringItems(field.itemSchema)) {\n    return (\n      <TagArray\n        field={field}\n        fieldId={fieldId}\n        readOnly={readOnly}\n        size={ctx.size}\n      />\n    );\n  }\n  // `x-layout: table` renders object-item arrays as compact rows with one column\n  // per item property — a denser alternative to the per-item stacked sub-form.\n  if (field.layout === \"table\" && hasObjectItemProperties(field.itemSchema)) {\n    return <TableArray field={field} ctx={ctx} readOnly={readOnly} />;\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          <div 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          </div>\n          {!readOnly && (\n            <ItemControls\n              onUp={\n                i > 0\n                  ? () => field.onChange(moveItem(items, i, i - 1))\n                  : undefined\n              }\n              onDown={\n                i < items.length - 1\n                  ? () => field.onChange(moveItem(items, i, i + 1))\n                  : undefined\n              }\n              onRemove={() => field.onChange(removeIndex(items, i))}\n              index={i}\n              size={ctx.size}\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\nfunction enumItemOptions(\n  field: FieldControl,\n): Array<{ value: string; label: string }> {\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.flatMap((option) => {\n    if (seen.has(option.value)) return [];\n    seen.add(option.value);\n    return [{ value: option.value, label: option.label }];\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\nfunction ItemControls({\n  onUp,\n  onDown,\n  onRemove,\n  index,\n  size,\n}: {\n  onUp: (() => void) | undefined;\n  onDown: (() => void) | undefined;\n  onRemove: () => void;\n  index: number;\n  size: FormSize;\n}) {\n  const actionClassName = cn(\n    \"inline-flex aspect-square items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30\",\n    controlHeightClass[size],\n  );\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      <button\n        type=\"button\"\n        aria-label={`Move item ${index + 1} up`}\n        disabled={!onUp}\n        className={actionClassName}\n        onClick={onUp}\n      >\n        <Icon icon={UiChevronUp} className=\"text-sm\" />\n      </button>\n      <button\n        type=\"button\"\n        aria-label={`Move item ${index + 1} down`}\n        disabled={!onDown}\n        className={actionClassName}\n        onClick={onDown}\n      >\n        <Icon icon={UiChevronDown} className=\"text-sm\" />\n      </button>\n      <button\n        type=\"button\"\n        aria-label={`Remove item ${index + 1}`}\n        className={actionClassName}\n        onClick={onRemove}\n      >\n        <Icon icon={UiTrash} className=\"text-sm\" />\n      </button>\n    </div>\n  );\n}\n\n// TagArray is the compact tag editor for plain string-item arrays.\nfunction TagArray({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  const tags = toStringArray(field.value);\n\n  function commit(raw: string, input: HTMLInputElement) {\n    const next = raw\n      .split(\",\")\n      .map((p) => p.trim())\n      .filter(Boolean);\n    if (next.length === 0) return;\n    field.onChange([...tags, ...next]);\n    input.value = \"\";\n  }\n\n  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {\n    const input = e.currentTarget;\n    if (e.key === \"Enter\" || e.key === \",\") {\n      e.preventDefault();\n      commit(input.value, input);\n      return;\n    }\n    if (e.key === \"Backspace\" && input.value === \"\" && tags.length > 0) {\n      field.onChange(tags.slice(0, -1));\n    }\n  }\n\n  return (\n    <div\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      {tags.map((tag, i) => (\n        <span\n          key={`${tag}-${i}`}\n          className=\"inline-flex h-6 max-w-full items-center gap-1 rounded-md bg-muted px-2 text-xs\"\n        >\n          <span className=\"truncate\">{tag}</span>\n          {!readOnly && (\n            <button\n              type=\"button\"\n              className=\"text-muted-foreground hover:text-foreground\"\n              aria-label={`Remove ${tag}`}\n              onClick={() => field.onChange(tags.filter((_, idx) => idx !== i))}\n            >\n              <Icon icon={UiClose} />\n            </button>\n          )}\n        </span>\n      ))}\n      {!readOnly && (\n        <input\n          id={fieldId}\n          data-jsf-input\n          className={cn(\n            \"min-w-32 flex-1 bg-transparent px-1 py-1 outline-none\",\n            labelSizeClass[size],\n          )}\n          placeholder={\n            tags.length === 0 ? defaultPlaceholder(field.schema) : \"\"\n          }\n          onKeyDown={handleKeyDown}\n          onBlur={(e) => commit(e.currentTarget.value, e.currentTarget)}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction toStringArray(value: unknown): string[] {\n  if (Array.isArray(value)) return value.map(String);\n  return [];\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 { type KeyboardEvent } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { UiAdd, UiChevronDown, UiChevronUp, UiClose, UiTrash } from \"../icons\";\nimport { Button } from \"./button\";\nimport {\n  controlHeightClass,\n  controlMinHeightClass,\n  fieldInnerGapClass,\n  inputSizeClass,\n  labelSizeClass,\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 { isScalarStringItems } from \"./json-schema-form-resolve\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport { TableArray } from \"./json-schema-form-table-array\";\nimport {\n  defaultPlaceholder,\n  hasObjectItemProperties,\n  moveItem,\n  removeIndex,\n  seedFromSchema,\n  setIndex,\n} from \"./json-schema-form-utils\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\n// ArrayControl is a hybrid: plain string-item arrays keep the compact tag UI;\n// anything richer (objects, numbers, enums, nested arrays) renders one recursive\n// control per item with add / remove / reorder. Recursion goes through\n// ctx.render so this module never imports the 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  if (\n    field.arrayDisplay === \"filter-pills\" &&\n    enumItemOptions(field).length > 0\n  ) {\n    return (\n      <FilterPillArray\n        field={field}\n        fieldId={fieldId}\n        readOnly={readOnly}\n        size={ctx.size}\n      />\n    );\n  }\n  // Placed before the scalar-string branch: an array of plain strings has no\n  // properties to summarize, so it falls through to the compact tag editor even\n  // if the schema asks for an accordion.\n  if (\n    field.arrayDisplay === \"accordion\" &&\n    hasObjectItemProperties(field.itemSchema)\n  ) {\n    return <AccordionArray field={field} ctx={ctx} readOnly={readOnly} />;\n  }\n  // Same guard as the accordion, and for the same reason: a card is headed by\n  // the item's own summary, which a list of bare strings cannot supply.\n  if (field.arrayDisplay === \"cards\" && hasObjectItemProperties(field.itemSchema)) {\n    return <CardsArray field={field} ctx={ctx} readOnly={readOnly} />;\n  }\n  if (isScalarStringItems(field.itemSchema)) {\n    return (\n      <TagArray\n        field={field}\n        fieldId={fieldId}\n        readOnly={readOnly}\n        size={ctx.size}\n      />\n    );\n  }\n  // `x-layout: table` renders object-item arrays as compact rows with one column\n  // per item property — a denser alternative to the per-item stacked sub-form.\n  if (field.layout === \"table\" && hasObjectItemProperties(field.itemSchema)) {\n    return <TableArray field={field} ctx={ctx} readOnly={readOnly} />;\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            <ItemControls\n              onUp={\n                i > 0\n                  ? () => field.onChange(moveItem(items, i, i - 1))\n                  : undefined\n              }\n              onDown={\n                i < items.length - 1\n                  ? () => field.onChange(moveItem(items, i, i + 1))\n                  : undefined\n              }\n              onRemove={() => field.onChange(removeIndex(items, i))}\n              index={i}\n              size={ctx.size}\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\nfunction enumItemOptions(\n  field: FieldControl,\n): Array<{ value: string; label: string }> {\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.flatMap((option) => {\n    if (seen.has(option.value)) return [];\n    seen.add(option.value);\n    return [{ value: option.value, label: option.label }];\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\nfunction ItemControls({\n  onUp,\n  onDown,\n  onRemove,\n  index,\n  size,\n}: {\n  onUp: (() => void) | undefined;\n  onDown: (() => void) | undefined;\n  onRemove: () => void;\n  index: number;\n  size: FormSize;\n}) {\n  const actionClassName = cn(\n    \"inline-flex aspect-square items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30\",\n    controlHeightClass[size],\n  );\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      <button\n        type=\"button\"\n        aria-label={`Move item ${index + 1} up`}\n        disabled={!onUp}\n        className={actionClassName}\n        onClick={onUp}\n      >\n        <Icon icon={UiChevronUp} className=\"text-sm\" />\n      </button>\n      <button\n        type=\"button\"\n        aria-label={`Move item ${index + 1} down`}\n        disabled={!onDown}\n        className={actionClassName}\n        onClick={onDown}\n      >\n        <Icon icon={UiChevronDown} className=\"text-sm\" />\n      </button>\n      <button\n        type=\"button\"\n        aria-label={`Remove item ${index + 1}`}\n        className={actionClassName}\n        onClick={onRemove}\n      >\n        <Icon icon={UiTrash} className=\"text-sm\" />\n      </button>\n    </div>\n  );\n}\n\n// TagArray is the compact tag editor for plain string-item arrays.\nfunction TagArray({\n  field,\n  fieldId,\n  readOnly,\n  size,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  readOnly: boolean;\n  size: FormSize;\n}) {\n  const tags = toStringArray(field.value);\n\n  function commit(raw: string, input: HTMLInputElement) {\n    const next = raw\n      .split(\",\")\n      .map((p) => p.trim())\n      .filter(Boolean);\n    if (next.length === 0) return;\n    field.onChange([...tags, ...next]);\n    input.value = \"\";\n  }\n\n  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {\n    const input = e.currentTarget;\n    if (e.key === \"Enter\" || e.key === \",\") {\n      e.preventDefault();\n      commit(input.value, input);\n      return;\n    }\n    if (e.key === \"Backspace\" && input.value === \"\" && tags.length > 0) {\n      field.onChange(tags.slice(0, -1));\n    }\n  }\n\n  return (\n    <div\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      {tags.map((tag, i) => (\n        <span\n          key={`${tag}-${i}`}\n          className=\"inline-flex h-6 max-w-full items-center gap-1 rounded-md bg-muted px-2 text-xs\"\n        >\n          <span className=\"truncate\">{tag}</span>\n          {!readOnly && (\n            <button\n              type=\"button\"\n              className=\"text-muted-foreground hover:text-foreground\"\n              aria-label={`Remove ${tag}`}\n              onClick={() => field.onChange(tags.filter((_, idx) => idx !== i))}\n            >\n              <Icon icon={UiClose} />\n            </button>\n          )}\n        </span>\n      ))}\n      {!readOnly && (\n        <input\n          id={fieldId}\n          data-jsf-input\n          className={cn(\n            \"min-w-32 flex-1 bg-transparent px-1 py-1 outline-none\",\n            labelSizeClass[size],\n          )}\n          placeholder={\n            tags.length === 0 ? defaultPlaceholder(field.schema) : \"\"\n          }\n          onKeyDown={handleKeyDown}\n          onBlur={(e) => commit(e.currentTarget.value, e.currentTarget)}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction toStringArray(value: unknown): string[] {\n  if (Array.isArray(value)) return value.map(String);\n  return [];\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const button = require("./button.cjs");
+const jsonSchemaFormErrors = require("./json-schema-form-errors.cjs");
+const jsonSchemaFormItemSummary = require("./json-schema-form-item-summary.cjs");
+const jsonSchemaFormItemRow = require("./json-schema-form-item-row.cjs");
+const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
+const jsonSchemaFormTone = require("./json-schema-form-tone.cjs");
+const jsonSchemaFormUtils = require("./json-schema-form-utils.cjs");
+const UiAdd = require("../icons/components/UiAdd.cjs");
+function CardsArray({
+  field,
+  ctx,
+  readOnly
+}) {
+  const items = Array.isArray(field.value) ? field.value : [];
+  const itemSchema = field.itemSchema ?? { type: "object" };
+  const spec = field.itemSpec ?? jsonSchemaFormItemSummary.resolveItemSpec(field.schema, itemSchema);
+  const emptyCopy = jsonSchemaFormItemSummary.emptyItemsCopy(spec, field.schema);
+  const childCtx = {
+    ...ctx,
+    readOnly,
+    depth: ctx.depth + 1,
+    ...field.helpDisplay ? { layout: { ...ctx.layout, help: field.helpDisplay } } : {}
+  };
+  function commit(next) {
+    field.onChange(next);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+    items.map((item, i) => {
+      var _a, _b;
+      const summary = ((_a = field.itemSummary) == null ? void 0 : _a.call(field, { item, index: i })) ?? jsonSchemaFormItemSummary.itemSummaryFor({ item, index: i, spec, itemSchema });
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "article",
+        {
+          className: utils.cn(
+            "group rounded-lg border border-l-4 border-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(
+                jsonSchemaFormItemRow.ItemRowActions,
+                {
+                  index: i,
+                  title: summary.title,
+                  size: ctx.size,
+                  ...i > 0 ? { onUp: () => commit(jsonSchemaFormUtils.moveItem(items, i, i - 1)) } : {},
+                  ...i < items.length - 1 ? { onDown: () => commit(jsonSchemaFormUtils.moveItem(items, i, i + 1)) } : {},
+                  onDuplicate: () => commit(jsonSchemaFormUtils.duplicateIndex(items, i)),
+                  onRemove: () => commit(jsonSchemaFormUtils.removeIndex(items, i))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: ((_b = ctx.render.renderFieldNodes(
+              {
+                key: `${field.key}[${i}]`,
+                prop: itemSchema,
+                required: false,
+                value: item,
+                onChange: (next) => commit(jsonSchemaFormUtils.setIndex(items, i, next)),
+                instancePath: jsonSchemaFormErrors.appendInstancePath(ctx.instancePath, i)
+              },
+              childCtx
+            )) == null ? void 0 : _b.value) ?? null })
+          ]
+        },
+        i
+      );
+    }),
+    items.length === 0 && emptyCopy && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-snug text-muted-foreground", children: emptyCopy }),
+    !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(
+      button.Button,
+      {
+        type: "button",
+        variant: "outline",
+        className: utils.cn("gap-1.5 self-start", jsonSchemaFormSize.inputSizeClass[ctx.size]),
+        onClick: () => commit([...items, jsonSchemaFormUtils.seedFromSchema(itemSchema)]),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiAdd.UiAdd, className: "text-sm" }),
+          jsonSchemaFormItemSummary.addItemLabel(spec)
+        ]
+      }
+    )
+  ] });
+}
+exports.CardsArray = CardsArray;
+//# sourceMappingURL=json-schema-form-cards-array.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-cards-array.cjs","sources":["../../src/components/json-schema-form-cards-array.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd } from \"../icons\";\nimport { Button } from \"./button\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport {\n  addItemLabel,\n  emptyItemsCopy,\n  itemSummaryFor,\n  resolveItemSpec,\n} from \"./json-schema-form-item-summary\";\nimport { ItemBadge, ItemRowActions, 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  duplicateIndex,\n  moveItem,\n  removeIndex,\n  seedFromSchema,\n  setIndex,\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 ? { 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                <ItemRowActions\n                  index={i}\n                  title={summary.title}\n                  size={ctx.size}\n                  {...(i > 0 ? { onUp: () => commit(moveItem(items, i, i - 1)) } : {})}\n                  {...(i < items.length - 1\n                    ? { onDown: () => commit(moveItem(items, i, i + 1)) }\n                    : {})}\n                  onDuplicate={() => commit(duplicateIndex(items, i))}\n                  onRemove={() => commit(removeIndex(items, i))}\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","ItemRowActions","moveItem","duplicateIndex","removeIndex","setIndex","appendInstancePath","Button","inputSizeClass","seedFromSchema","Icon","UiAdd","addItemLabel"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import { FieldControl, RenderContext } from './json-schema-form-types';
+export declare function CardsArray({ field, ctx, readOnly, }: {
+    field: FieldControl;
+    ctx: RenderContext;
+    readOnly: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=json-schema-form-cards-array.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-cards-array.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-cards-array.tsx"],"names":[],"mappings":"AAqBA,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,2CA8FA"}

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

@@ -0,0 +1,96 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+import { Button } from "./button.js";
+import { appendInstancePath } from "./json-schema-form-errors.js";
+import { resolveItemSpec, emptyItemsCopy, itemSummaryFor, addItemLabel } from "./json-schema-form-item-summary.js";
+import { ItemBadge, RequiredMark, ItemRowActions } 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 { removeIndex, duplicateIndex, moveItem, setIndex, seedFromSchema } from "./json-schema-form-utils.js";
+import { UiAdd } from "../icons/components/UiAdd.js";
+function CardsArray({
+  field,
+  ctx,
+  readOnly
+}) {
+  const items = Array.isArray(field.value) ? field.value : [];
+  const itemSchema = field.itemSchema ?? { type: "object" };
+  const spec = field.itemSpec ?? resolveItemSpec(field.schema, itemSchema);
+  const emptyCopy = emptyItemsCopy(spec, field.schema);
+  const childCtx = {
+    ...ctx,
+    readOnly,
+    depth: ctx.depth + 1,
+    ...field.helpDisplay ? { layout: { ...ctx.layout, help: field.helpDisplay } } : {}
+  };
+  function commit(next) {
+    field.onChange(next);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    items.map((item, i) => {
+      var _a, _b;
+      const summary = ((_a = field.itemSummary) == null ? void 0 : _a.call(field, { item, index: i })) ?? itemSummaryFor({ item, index: i, spec, itemSchema });
+      return /* @__PURE__ */ jsxs(
+        "article",
+        {
+          className: cn(
+            "group rounded-lg border border-l-4 border-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(
+                ItemRowActions,
+                {
+                  index: i,
+                  title: summary.title,
+                  size: ctx.size,
+                  ...i > 0 ? { onUp: () => commit(moveItem(items, i, i - 1)) } : {},
+                  ...i < items.length - 1 ? { onDown: () => commit(moveItem(items, i, i + 1)) } : {},
+                  onDuplicate: () => commit(duplicateIndex(items, i)),
+                  onRemove: () => commit(removeIndex(items, i))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "p-3", children: ((_b = ctx.render.renderFieldNodes(
+              {
+                key: `${field.key}[${i}]`,
+                prop: itemSchema,
+                required: false,
+                value: item,
+                onChange: (next) => commit(setIndex(items, i, next)),
+                instancePath: appendInstancePath(ctx.instancePath, i)
+              },
+              childCtx
+            )) == null ? void 0 : _b.value) ?? null })
+          ]
+        },
+        i
+      );
+    }),
+    items.length === 0 && emptyCopy && /* @__PURE__ */ jsx("p", { className: "text-xs leading-snug text-muted-foreground", children: emptyCopy }),
+    !readOnly && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        className: cn("gap-1.5 self-start", inputSizeClass[ctx.size]),
+        onClick: () => commit([...items, seedFromSchema(itemSchema)]),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { icon: UiAdd, className: "text-sm" }),
+          addItemLabel(spec)
+        ]
+      }
+    )
+  ] });
+}
+export {
+  CardsArray
+};
+//# sourceMappingURL=json-schema-form-cards-array.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-cards-array.js","sources":["../../src/components/json-schema-form-cards-array.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiAdd } from \"../icons\";\nimport { Button } from \"./button\";\nimport { appendInstancePath } from \"./json-schema-form-errors\";\nimport {\n  addItemLabel,\n  emptyItemsCopy,\n  itemSummaryFor,\n  resolveItemSpec,\n} from \"./json-schema-form-item-summary\";\nimport { ItemBadge, ItemRowActions, 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  duplicateIndex,\n  moveItem,\n  removeIndex,\n  seedFromSchema,\n  setIndex,\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 ? { 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                <ItemRowActions\n                  index={i}\n                  title={summary.title}\n                  size={ctx.size}\n                  {...(i > 0 ? { onUp: () => commit(moveItem(items, i, i - 1)) } : {})}\n                  {...(i < items.length - 1\n                    ? { onDown: () => commit(moveItem(items, i, i + 1)) }\n                    : {})}\n                  onDuplicate={() => commit(duplicateIndex(items, i))}\n                  onRemove={() => commit(removeIndex(items, i))}\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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"}