@glw907/cairn-cms 0.62.2 → 0.76.0

package/dist/components/LinkPicker.svelte

@@ -1,45 +1,19 @@
 <!--
 @component
-The "Link to page" control and its modal. It lists the site's posts and pages from the committed
-manifest (the linkTargets the editor receives), grouped by concept with Pages first, each post
-showing its date and each draft marked. Picking a target inserts a cairn: internal link through the
-editor's registerInsertLink seam. Built on a native <dialog>, following the component dialog's a11y
-conventions. The plain-URL link is the toolbar's Web link dialog; this is for an internal target.
+The "Link to page" control. It wraps EntryPicker, the shared search + concept-grouped target list, and
+turns the chosen target into an inline cairn: internal link through the editor's registerInsertLink
+seam. EntryPicker owns the list and search; this component owns the cairn-token meaning and the trigger.
+The plain-URL link is the toolbar's Web link dialog; this is for an internal target.
 -->
 <script lang="ts">import { formatCairnToken } from "../content/links.js";
+import EntryPicker from "./EntryPicker.svelte";
 let { linkTargets, insert, disabled = false, trigger = true } = $props();
-let dialog = $state(null);
-let query = $state("");
-const ORDER = { pages: 0, posts: 1 };
-function rank(concept) {
-  return ORDER[concept] ?? 2;
-}
-function heading(concept) {
-  if (concept === "pages") return "Pages";
-  if (concept === "posts") return "Posts";
-  return concept.charAt(0).toUpperCase() + concept.slice(1);
-}
-const groups = $derived.by(() => {
-  const q = query.trim().toLowerCase();
-  const matched = q ? linkTargets.filter((t) => t.title.toLowerCase().includes(q)) : linkTargets;
-  const byConcept = /* @__PURE__ */ new Map();
-  for (const t of matched) {
-    const list = byConcept.get(t.concept) ?? [];
-    list.push(t);
-    byConcept.set(t.concept, list);
-  }
-  return [...byConcept.entries()].map(([concept, items]) => ({ concept, heading: heading(concept), items })).sort((a, b) => rank(a.concept) - rank(b.concept) || a.heading.localeCompare(b.heading));
-});
+let picker = $state(null);
 export function open() {
-  query = "";
-  dialog?.showModal();
-}
-function close() {
-  dialog?.close();
+  picker?.open();
 }
 function choose(target) {
   insert(formatCairnToken(target), target.title);
-  close();
 }
 </script>
 
@@ -49,45 +23,4 @@ function choose(target) {
   </button>
 {/if}
 
-<dialog class="modal" aria-labelledby="cairn-link-dialog-title" bind:this={dialog}>
-  <div class="modal-box">
-    <div class="mb-3 flex items-center justify-between">
-      <h2 id="cairn-link-dialog-title" class="text-base font-semibold">Link to a page</h2>
-      <button type="button" class="btn btn-ghost btn-sm" aria-label="Close" onclick={close}>✕</button>
-    </div>
-
-    <input
-      type="search"
-      class="input input-bordered mb-3 w-full"
-      placeholder="Search by title"
-      aria-label="Search pages and posts"
-      bind:value={query}
-    />
-
-    {#if groups.length === 0}
-      <p class="text-sm text-[var(--color-muted)]">No pages or posts to link to.</p>
-    {:else}
-      {#each groups as group (group.concept)}
-        <h3 class="mt-2 mb-1 text-xs font-semibold tracking-wide text-[var(--color-muted)] uppercase">{group.heading}</h3>
-        <ul class="menu w-full">
-          {#each group.items as target (`${target.concept}/${target.id}`)}
-            <li>
-              <button type="button" onclick={() => choose(target)}>
-                <span class="flex flex-col items-start">
-                  <span class="font-medium">{target.title}</span>
-                  <span class="text-xs text-[var(--color-muted)]">
-                    {#if target.draft}<span class="badge badge-ghost badge-sm mr-1">Draft</span>{/if}
-                    {#if target.date}{target.date}{/if}
-                  </span>
-                </span>
-              </button>
-            </li>
-          {/each}
-        </ul>
-      {/each}
-    {/if}
-  </div>
-  <form method="dialog" class="modal-backdrop">
-    <button tabindex="-1" aria-label="Close">close</button>
-  </form>
-</dialog>
+<EntryPicker bind:this={picker} targets={linkTargets} {choose} trigger={false} />

package/dist/components/LinkPicker.svelte.d.ts

@@ -11,11 +11,10 @@ interface Props {
     trigger?: boolean;
 }
 /**
- * The "Link to page" control and its modal. It lists the site's posts and pages from the committed
- * manifest (the linkTargets the editor receives), grouped by concept with Pages first, each post
- * showing its date and each draft marked. Picking a target inserts a cairn: internal link through the
- * editor's registerInsertLink seam. Built on a native <dialog>, following the component dialog's a11y
- * conventions. The plain-URL link is the toolbar's Web link dialog; this is for an internal target.
+ * The "Link to page" control. It wraps EntryPicker, the shared search + concept-grouped target list, and
+ * turns the chosen target into an inline cairn: internal link through the editor's registerInsertLink
+ * seam. EntryPicker owns the list and search; this component owns the cairn-token meaning and the trigger.
+ * The plain-URL link is the toolbar's Web link dialog; this is for an internal target.
  */
 declare const LinkPicker: import("svelte").Component<Props, {
     open: () => void;

package/dist/components/MediaHeroField.svelte

@@ -53,6 +53,7 @@ let {
   field,
   value,
   decorative: decorativeInitial = false,
+  lead = false,
   mediaLibrary,
   conceptId,
   id,
@@ -323,13 +324,15 @@ function onDropzoneDragover(e) {
         <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><circle cx="9" cy="9" r="2" /><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" /></svg>
       </span>
       <span class="flex min-w-0 flex-col gap-px">
-        <span class="text-[0.8125rem] font-medium">Add a hero image</span>
+        <span class="text-[0.8125rem] font-medium">Add {field.label.toLowerCase()}</span>
         <span class="text-[0.6875rem] text-[var(--color-muted)]">Drop an image here, or pick from the library</span>
       </span>
     </button>
-    <p class="text-[0.6875rem] leading-snug text-[var(--color-muted)]">
-      This image leads the page, and it is the picture shown when the post is shared.
-    </p>
+    {#if lead}
+      <p class="text-[0.6875rem] leading-snug text-[var(--color-muted)]">
+        This image leads the page, and it is the picture shown when the post is shared.
+      </p>
+    {/if}
   {/if}
 
   <!-- The committed value rides four named hidden inputs the save path's decode arm reads. They sit
@@ -349,7 +352,7 @@ function onDropzoneDragover(e) {
   <div class="modal-box max-w-md">
     <div class="mb-3 flex items-center justify-between gap-2">
       <h2 id={titleId} class="text-[0.9375rem] font-semibold">
-        {view === 'chooser' ? 'Add a hero image' : 'Hero image'}
+        {view === 'chooser' ? `Add ${field.label.toLowerCase()}` : field.label}
       </h2>
       <button type="button" class="btn btn-ghost btn-xs btn-square" aria-label="Close" onclick={closeDialog}>
         <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>

package/dist/components/MediaHeroField.svelte.d.ts

@@ -16,6 +16,10 @@ interface Props {
     /** Whether the initial hero is an explicit decorative choice (an empty alt that is not debt).
      *  Defaults false; a fresh field with an empty alt reads as needs-alt. */
     decorative?: boolean;
+    /** Whether this image leads the page and becomes the social card (a top-level SEO hero). When
+     *  false (a gallery or nested image item), the empty state drops the hero-only social-card line
+     *  and the copy reads neutrally. Defaults false. */
+    lead?: boolean;
     /** The merged committed-plus-uploaded media library, keyed by content hash. */
     mediaLibrary: Record<string, MediaLibraryEntry>;
     /** The concept the entry belongs to (the upload action's route param). */

package/dist/components/ObjectGroupField.svelte

@@ -0,0 +1,54 @@
+<!--
+@component
+A labeled group of leaf fields, the editor arm for an `object` container. It renders each leaf one
+level down through `FieldInput`, prefixing the leaf's form name with this group's name
+(`${name}.${leafKey}`) so the nested decode in `frontmatter.ts` reads each value back into the right
+sub-key. The group's value slice (the object, defaulting to `{}`) is passed straight through as the
+leaf dispatcher's `frontmatter`, so a leaf reads `frontmatter[leafKey]` unchanged.
+
+The legend uses the object's optional `label`; when the schema omits it (an object inside an array is
+labeled by the array, so it carries no label of its own), a humanized field key stands in. The group
+matches the Details fieldset/legend recipe so it reads as one of the panel's grouped sections.
+-->
+<script lang="ts">import FieldInput from "./FieldInput.svelte";
+let {
+  field,
+  name,
+  frontmatter,
+  targets,
+  markFieldsDirty,
+  mediaLibrary,
+  conceptId,
+  id,
+  heroFieldRefs,
+  onuploaded,
+  onheroneedsalt,
+  icons
+} = $props();
+function humanize(key) {
+  const words = key.replace(/[_-]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim();
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+const legend = $derived(field.label ?? humanize(field.name));
+const leaves = $derived(Object.entries(field.fields));
+</script>
+
+<fieldset class="m-0 flex min-w-0 flex-col gap-3 border-0 p-0">
+  <legend class="text-sm font-medium">{legend}</legend>
+  {#each leaves as [leafKey, leaf] (leafKey)}
+    <FieldInput
+      field={{ ...leaf, name: leafKey }}
+      name={`${name}.${leafKey}`}
+      {frontmatter}
+      {targets}
+      {markFieldsDirty}
+      {mediaLibrary}
+      {conceptId}
+      {id}
+      {heroFieldRefs}
+      {onuploaded}
+      {onheroneedsalt}
+      {icons}
+    />
+  {/each}
+</fieldset>

package/dist/components/ObjectGroupField.svelte.d.ts

@@ -0,0 +1,47 @@
+import type { NamedField } from '../content/types.js';
+import type { ObjectField } from '../content/fields.js';
+import type { LinkTarget } from '../content/manifest.js';
+import type { MediaEntry } from '../media/manifest.js';
+import type { MediaLibraryEntry } from '../media/library-entry.js';
+import type { IconSet } from '../render/glyph.js';
+import type MediaHeroField from './MediaHeroField.svelte';
+interface Props {
+    /** The object descriptor to render; its `fields` are the leaves this group holds. */
+    field: NamedField & ObjectField;
+    /** The form name prefix for this group; each leaf renders at `${name}.${leafKey}`. */
+    name: string;
+    /** The object value slice this group reads from, keyed by leaf sub-key. */
+    frontmatter: Record<string, unknown>;
+    /** The site link targets the reference arm offers (threaded through to each leaf). */
+    targets: LinkTarget[];
+    /** Mark the edit form dirty; threaded to each leaf's media or reference arm. */
+    markFieldsDirty: () => void;
+    /** The merged committed-plus-uploaded media library, keyed by content hash. */
+    mediaLibrary: Record<string, MediaLibraryEntry>;
+    /** The concept the entry belongs to (the upload action's route param). */
+    conceptId: string;
+    /** The entry id (the upload action's route param). */
+    id: string;
+    /** The host's hero-field refs, keyed by the prefixed `name` so two groups do not collide. */
+    heroFieldRefs: Record<string, MediaHeroField>;
+    /** Called with the server-owned record on a successful upload, so the host merges it. */
+    onuploaded: (record: MediaEntry) => void;
+    /** Called when a hero's needs-alt status changes, keyed by the prefixed `name`. */
+    onheroneedsalt: (name: string, needsAlt: boolean) => void;
+    /** The site's icon set, forwarded to each leaf's icon arm. */
+    icons?: IconSet;
+}
+/**
+ * A labeled group of leaf fields, the editor arm for an `object` container. It renders each leaf one
+ * level down through `FieldInput`, prefixing the leaf's form name with this group's name
+ * (`${name}.${leafKey}`) so the nested decode in `frontmatter.ts` reads each value back into the right
+ * sub-key. The group's value slice (the object, defaulting to `{}`) is passed straight through as the
+ * leaf dispatcher's `frontmatter`, so a leaf reads `frontmatter[leafKey]` unchanged.
+ *
+ * The legend uses the object's optional `label`; when the schema omits it (an object inside an array is
+ * labeled by the array, so it carries no label of its own), a humanized field key stands in. The group
+ * matches the Details fieldset/legend recipe so it reads as one of the panel's grouped sections.
+ */
+declare const ObjectGroupField: import("svelte").Component<Props, {}, "">;
+type ObjectGroupField = ReturnType<typeof ObjectGroupField>;
+export default ObjectGroupField;

package/dist/components/ReferenceField.svelte

@@ -0,0 +1,94 @@
+<!--
+@component
+The reference field editor arm. A single `reference` renders a combobox-style button showing the
+current target's resolved title (looked up in the site's link targets), opening EntryPicker scoped to
+the field's concept; on pick it sets the value and emits one hidden input the decoder reads. A many
+`array(reference)` renders a removable chip list, each chip showing the target's resolved title, plus
+an EntryPicker that marks the already-held ids and adds another; it emits one hidden input per selected
+id, so frontmatterFromForm's getAll reads them all. EntryPicker owns the search and grouped list; this
+component owns the cardinality, the chips, and the hidden inputs the form submits.
+-->
+<script lang="ts">import { untrack } from "svelte";
+import EntryPicker from "./EntryPicker.svelte";
+let { field, value, targets, ondirty } = $props();
+const concept = $derived.by(() => {
+  if (field.type === "array") return field.item.concept;
+  if (field.type === "reference") return field.concept;
+  return "";
+});
+let singleId = $state(untrack(() => typeof value === "string" ? value : ""));
+let ids = $state(untrack(() => Array.isArray(value) ? [...value] : []));
+let picker = $state(null);
+function titleFor(id) {
+  return targets.find((t) => t.concept === concept && t.id === id)?.title ?? id;
+}
+function chooseSingle(target) {
+  singleId = target.id;
+  ondirty?.();
+}
+function chooseMany(target) {
+  if (!ids.includes(target.id)) {
+    ids = [...ids, target.id];
+    ondirty?.();
+  }
+}
+function remove(id) {
+  ids = ids.filter((x) => x !== id);
+  ondirty?.();
+}
+</script>
+
+{#if field.type === 'array'}
+  <fieldset class="m-0 flex min-w-0 flex-col gap-2 border-0 p-0">
+    <legend class="text-sm font-medium">{field.label}</legend>
+    {#if ids.length}
+      <ul class="flex flex-wrap gap-2">
+        {#each ids as id (id)}
+          <li class="badge badge-ghost gap-1">
+            <span>{titleFor(id)}</span>
+            <button type="button" class="btn btn-ghost btn-xs btn-square" aria-label={`Remove ${titleFor(id)}`} onclick={() => remove(id)}>
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
+            </button>
+            <input type="hidden" name={field.name} value={id} />
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    <div>
+      <button type="button" class="btn btn-sm btn-ghost" aria-haspopup="dialog" aria-label={`Add ${field.label}`} onclick={() => picker?.open()}>
+        Add {field.label}
+      </button>
+    </div>
+  </fieldset>
+  <EntryPicker
+    bind:this={picker}
+    {targets}
+    choose={chooseMany}
+    conceptFilter={concept}
+    selectedIds={ids}
+    trigger={false}
+    heading={`Choose ${field.label}`}
+    searchLabel={`Search ${concept}`}
+    emptyText={`No ${concept} to choose.`}
+  />
+{:else}
+  <div class="flex flex-col gap-1">
+    <span class="text-sm font-medium">{field.label}</span>
+    <button type="button" class="btn btn-sm btn-ghost justify-start" aria-haspopup="dialog" aria-label={field.label} onclick={() => picker?.open()}>
+      {#if singleId}{titleFor(singleId)}{:else}<span class="text-[var(--color-muted)]">Choose {field.label}</span>{/if}
+    </button>
+    {#if singleId}
+      <input type="hidden" name={field.name} value={singleId} />
+    {/if}
+  </div>
+  <EntryPicker
+    bind:this={picker}
+    {targets}
+    choose={chooseSingle}
+    conceptFilter={concept}
+    trigger={false}
+    heading={`Choose ${field.label}`}
+    searchLabel={`Search ${concept}`}
+    emptyText={`No ${concept} to choose.`}
+  />
+{/if}

package/dist/components/ReferenceField.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { LinkTarget } from '../content/manifest.js';
+import type { ReferenceField } from '../content/fields.js';
+import type { NamedField } from '../content/types.js';
+interface Props {
+    /** The reference or array(reference) descriptor this arm renders. */
+    field: NamedField;
+    /** The current value: one id for a single reference, a list of ids for an array. */
+    value: string | string[];
+    /** The site's link targets, from the committed manifest (editLoad ships them). */
+    targets: LinkTarget[];
+    /** Called when the committed ids change (a pick, an add, or a remove), so the host sets
+     *  fieldsDirty. The hidden-input writes do not fire the form's oninput, so the field signals
+     *  dirty explicitly, the same way MediaHeroField does. */
+    ondirty?: () => void;
+}
+/**
+ * The reference field editor arm. A single `reference` renders a combobox-style button showing the
+ * current target's resolved title (looked up in the site's link targets), opening EntryPicker scoped to
+ * the field's concept; on pick it sets the value and emits one hidden input the decoder reads. A many
+ * `array(reference)` renders a removable chip list, each chip showing the target's resolved title, plus
+ * an EntryPicker that marks the already-held ids and adds another; it emits one hidden input per selected
+ * id, so frontmatterFromForm's getAll reads them all. EntryPicker owns the search and grouped list; this
+ * component owns the cardinality, the chips, and the hidden inputs the form submits.
+ */
+declare const ReferenceField: import("svelte").Component<Props, {}, "">;
+type ReferenceField = ReturnType<typeof ReferenceField>;
+export default ReferenceField;

package/dist/components/RepeatableField.svelte

@@ -0,0 +1,221 @@
+<!--
+@component
+The repeatable-row editor, the arm for a non-reference `array` container. It renders a list of rows,
+each row either a single leaf (`array(text)`, `array(image)`) or a flat object group
+(`array(object({...}))`), with keyboard-operable add, remove, and reorder. Each row collapses to its
+`itemLabel` summary and expands to edit, the same buries-fewer-fields move the Details panel makes.
+
+Rows are wrapped in a `{ id, value }` envelope so node identity follows a row through a reorder or a
+remove and an in-progress edit (or the keyboard focus) never jumps to the wrong row. The id is a
+seed-time counter, not a random uuid, so the server and client agree at hydration. The envelope is
+UI-only; the form names derive from each row's CURRENT position (`${name}.${i}`), so the Task 3
+decoder reads a compact, ordered set. The component seeds once from `rows`; the `{#key entryKey}`
+wrapper in EditPage remounts it on an entry change, so it adds no re-seed effect.
+
+A structural mutation (add, remove, reorder) marks the form dirty, because those do not fire the
+form's `oninput`; a leaf edit inside a row does not, because the row inputs sit inside the edit form
+whose `oninput` bubbles. An always-mounted polite live region announces add and remove.
+-->
+<script lang="ts">import { tick, untrack } from "svelte";
+import { sortItems } from "@rodrigodagostino/svelte-sortable-list";
+import FieldInput from "./FieldInput.svelte";
+import ObjectGroupField from "./ObjectGroupField.svelte";
+import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+import ArrowUpIcon from "@lucide/svelte/icons/arrow-up";
+import ArrowDownIcon from "@lucide/svelte/icons/arrow-down";
+import Trash2Icon from "@lucide/svelte/icons/trash-2";
+import PlusIcon from "@lucide/svelte/icons/plus";
+let {
+  field,
+  name,
+  rows: seedRows,
+  targets,
+  markFieldsDirty,
+  mediaLibrary,
+  conceptId,
+  id,
+  heroFieldRefs,
+  onuploaded,
+  onheroneedsalt,
+  icons
+} = $props();
+let nextId = untrack(() => seedRows.length);
+let rows = $state(untrack(() => seedRows.map((value, i) => ({ id: i, value }))));
+let expanded = $state({});
+let announcement = $state("");
+let addButton = $state(null);
+let root = $state(null);
+const isObjectItem = $derived(field.item.type === "object");
+const rowLabel = $derived(field.label ?? field.name);
+let summaries = $state({});
+function summaryNameFor(index) {
+  return isObjectItem && field.itemLabel != null ? `${name}.${index}.${field.itemLabel}` : `${name}.${index}`;
+}
+function onRowInput(row, index, event) {
+  const target = event.target;
+  if (target.name === summaryNameFor(index)) {
+    summaries = { ...summaries, [row.id]: target.value };
+  }
+}
+function summaryFor(value, index, rowId) {
+  if (rowId in summaries) {
+    const live = summaries[rowId].trim();
+    if (live !== "") return live;
+  }
+  let text = "";
+  if (isObjectItem && field.itemLabel != null && value !== null && typeof value === "object") {
+    text = String(value[field.itemLabel] ?? "").trim();
+  } else if (!isObjectItem && value != null && typeof value !== "object") {
+    text = String(value).trim();
+  }
+  return text !== "" ? text : `${rowLabel} ${index + 1}`;
+}
+function emptyValue() {
+  return isObjectItem ? {} : "";
+}
+function toggle(rowId) {
+  expanded = { ...expanded, [rowId]: !expanded[rowId] };
+}
+async function add() {
+  const row = { id: nextId++, value: emptyValue() };
+  rows = [...rows, row];
+  expanded = { ...expanded, [row.id]: true };
+  markFieldsDirty();
+  announcement = "Row added";
+  await tick();
+  const firstInput = root?.querySelector(
+    `[data-cairn-row="${row.id}"] [data-cairn-row-body] :is(input:not([type=hidden]),textarea,select,button)`
+  );
+  firstInput?.focus();
+}
+async function remove(index) {
+  rows = rows.filter((_, i) => i !== index);
+  markFieldsDirty();
+  announcement = "Row removed";
+  await tick();
+  const removeButtons = root?.querySelectorAll("[data-cairn-row-remove]") ?? [];
+  if (removeButtons[index]) removeButtons[index].focus();
+  else if (removeButtons[index - 1]) removeButtons[index - 1].focus();
+  else addButton?.focus();
+}
+async function move(index, dir) {
+  const target = index + dir;
+  if (target < 0 || target >= rows.length) return;
+  rows = sortItems(rows, index, target);
+  markFieldsDirty();
+  await tick();
+  const movedRow = root?.querySelectorAll("[data-cairn-row]")[target];
+  const opposite = dir === 1 ? "[data-cairn-row-up]" : "[data-cairn-row-down]";
+  const focusTarget = movedRow?.querySelector(`${opposite}:not([disabled])`) ?? movedRow?.querySelector("[data-cairn-row-toggle]");
+  focusTarget?.focus();
+}
+</script>
+
+<fieldset bind:this={root} class="m-0 flex min-w-0 flex-col gap-2 border-0 p-0">
+  <legend class="text-sm font-medium">{rowLabel}</legend>
+
+  {#if rows.length}
+    <ul class="flex flex-col gap-2">
+      {#each rows as row, i (row.id)}
+        {@const rowSummary = summaryFor(row.value, i, row.id)}
+        <li
+          class="rounded-[var(--radius-field)] border border-[var(--color-base-300)]"
+          data-cairn-row={row.id}
+          oninput={(e) => onRowInput(row, i, e)}
+        >
+          <div class="flex items-center gap-1 p-1">
+            <button
+              type="button"
+              class="btn btn-ghost btn-sm flex-1 justify-start gap-2 font-normal"
+              data-cairn-row-toggle
+              aria-expanded={expanded[row.id] ? 'true' : 'false'}
+              onclick={() => toggle(row.id)}
+            >
+              {#if expanded[row.id]}
+                <ChevronDownIcon class="h-4 w-4 shrink-0" aria-hidden="true" />
+              {:else}
+                <ChevronRightIcon class="h-4 w-4 shrink-0" aria-hidden="true" />
+              {/if}
+              <span class="truncate">{rowSummary}</span>
+            </button>
+            <button
+              type="button"
+              class="btn btn-ghost btn-sm btn-square"
+              data-cairn-row-up
+              aria-label={`Move ${rowSummary} up`}
+              disabled={i === 0}
+              onclick={() => move(i, -1)}
+            >
+              <ArrowUpIcon class="h-4 w-4" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              class="btn btn-ghost btn-sm btn-square"
+              data-cairn-row-down
+              aria-label={`Move ${rowSummary} down`}
+              disabled={i === rows.length - 1}
+              onclick={() => move(i, 1)}
+            >
+              <ArrowDownIcon class="h-4 w-4" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              class="btn btn-ghost btn-sm btn-square"
+              data-cairn-row-remove
+              aria-label={`Remove ${rowSummary}`}
+              onclick={() => remove(i)}
+            >
+              <Trash2Icon class="h-4 w-4" aria-hidden="true" />
+            </button>
+          </div>
+          {#if expanded[row.id]}
+            <div data-cairn-row-body class="flex flex-col gap-3 border-t border-[var(--color-base-300)] p-3">
+              {#if field.item.type === 'object'}
+                <ObjectGroupField
+                  field={{ ...(field.item as ObjectField), name: field.name }}
+                  name={`${name}.${i}`}
+                  frontmatter={(row.value !== null && typeof row.value === 'object' ? row.value : {}) as Record<string, unknown>}
+                  {targets}
+                  {markFieldsDirty}
+                  {mediaLibrary}
+                  {conceptId}
+                  {id}
+                  {heroFieldRefs}
+                  {onuploaded}
+                  {onheroneedsalt}
+                  {icons}
+                />
+              {:else}
+                <FieldInput
+                  field={{ ...field.item, name: '_value' }}
+                  name={`${name}.${i}`}
+                  frontmatter={{ _value: row.value }}
+                  {targets}
+                  {markFieldsDirty}
+                  {mediaLibrary}
+                  {conceptId}
+                  {id}
+                  {heroFieldRefs}
+                  {onuploaded}
+                  {onheroneedsalt}
+                  {icons}
+                />
+              {/if}
+            </div>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+
+  <div>
+    <button type="button" class="btn btn-sm btn-ghost gap-1" bind:this={addButton} onclick={add}>
+      <PlusIcon class="h-4 w-4" aria-hidden="true" />
+      Add {rowLabel}
+    </button>
+  </div>
+
+  <!-- Always mounted so add/remove announce consistently; a {#if}-gated region announces unevenly. -->
+  <div role="status" aria-live="polite" class="sr-only">{announcement}</div>
+</fieldset>