@glw907/cairn-cms 0.68.0 → 0.76.0

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

@@ -0,0 +1,35 @@
+import type { LinkTarget } from '../content/manifest.js';
+interface Props {
+    /** The site's link targets, from the committed manifest (editLoad ships them). */
+    targets: LinkTarget[];
+    /** Called with the target the user picked; the host decides what to do with it. */
+    choose: (target: LinkTarget) => void;
+    /** Narrow the list to a single concept (the reference field's concept). */
+    conceptFilter?: string;
+    /** Ids the host already holds; matching rows render as already-selected and do not re-fire choose. */
+    selectedIds?: string[];
+    /** Render the built-in trigger button. False mounts only the dialog, for a host that supplies its
+     *  own trigger and opens the dialog through the exported open(). */
+    trigger?: boolean;
+    /** The dialog title. Defaults to the editor link control's wording; a reference field passes a
+     *  concept-appropriate heading. */
+    heading?: string;
+    /** The search input's accessible name. Defaults to the link control's wording. */
+    searchLabel?: string;
+    /** The empty-state text shown when no target matches. Defaults to the link control's wording. */
+    emptyText?: string;
+}
+/**
+ * The search + concept-grouped target list shared by the editor's "Link to page" control and the
+ * reference field picker. It lists link targets from the committed manifest, grouped by concept with
+ * Pages first then Posts then any other concept, each post showing its date and each draft marked, and
+ * fires choose() with the picked target. It knows nothing about cairn: tokens or the editor cursor; the
+ * host decides what a chosen target means. An optional conceptFilter narrows the list to one concept,
+ * and selectedIds marks rows the host already holds. Built on a native <dialog>, following the component
+ * dialog's a11y conventions.
+ */
+declare const EntryPicker: import("svelte").Component<Props, {
+    open: () => void;
+}, "">;
+type EntryPicker = ReturnType<typeof EntryPicker>;
+export default EntryPicker;

package/dist/components/FieldInput.svelte

@@ -0,0 +1,218 @@
+<!--
+@component
+The leaf-field dispatcher for the edit page's Details panel. It renders one leaf field (a scalar,
+an image, or a reference) as the matching input, picked by `field.type`.
+
+It is name-prefixable so a container row can reuse it one level down. The `name` prop is the form
+input name: it defaults to `field.name` at the top level, and a container caller passes a prefixed
+path (`${parent}.${index}` for an array element, `${parent}.${leafKey}` for an object leaf) so the
+nested decode in `frontmatter.ts` reads the value back from the right slot. Each arm reads its value
+from `frontmatter[field.name]`, so a nested caller passes the row or object slice as `frontmatter`
+and the leaf key as `field.name`, leaving the reads unchanged.
+
+An `object` field renders a labeled `ObjectGroupField`, and a non-reference `array` renders a
+`RepeatableField`; both recurse one level back through this dispatcher for their leaves, which the
+one-level nesting cap (the declaration guard) bounds so the recursion terminates. An
+`array(reference)` stays on `ReferenceField`.
+-->
+<script lang="ts">import MediaHeroField from "./MediaHeroField.svelte";
+import ReferenceField from "./ReferenceField.svelte";
+import ObjectGroupField from "./ObjectGroupField.svelte";
+import RepeatableField from "./RepeatableField.svelte";
+import IconPicker from "./IconPicker.svelte";
+import { isClosedMultiselect } from "../content/frontmatter.js";
+let {
+  field,
+  name = field.name,
+  frontmatter,
+  targets,
+  markFieldsDirty,
+  mediaLibrary,
+  conceptId,
+  id,
+  heroFieldRefs,
+  onuploaded,
+  onheroneedsalt,
+  icons
+} = $props();
+function str(v) {
+  return v == null ? "" : String(v);
+}
+function inputType(fieldType) {
+  switch (fieldType) {
+    case "url":
+      return "url";
+    case "email":
+      return "email";
+    case "datetime":
+      return "datetime-local";
+    default:
+      return void 0;
+  }
+}
+const DATE_PUBLISH_HINT = "Sets the date for this post. Publishing is a separate step you choose.";
+</script>
+
+{#snippet fieldHint(hintName: string, text: string)}
+  <p id={`${hintName}-hint`} class="fld-hint mt-1 text-sm text-[var(--color-muted)]">
+    {text}
+  </p>
+{/snippet}
+
+{#if field.type === 'textarea'}
+  {@const f = field as NamedField & TextareaField}
+  <label class="flex flex-col gap-1">
+    <span class="text-sm font-medium">{f.label}</span>
+    <textarea class="textarea textarea-sm" {name} aria-label={f.label} aria-describedby={f.help ? `${f.name}-hint` : undefined} rows={f.rows ?? 3}>{str(frontmatter[f.name])}</textarea>
+    {#if f.help}
+      {@render fieldHint(f.name, f.help)}
+    {/if}
+  </label>
+{:else if field.type === 'number'}
+  {@const f = field as NamedField & NumberField}
+  <label class="flex flex-col gap-1">
+    <span class="text-sm font-medium">{f.label}</span>
+    <input
+      class="input input-sm"
+      type="number"
+      {name}
+      aria-label={f.label}
+      aria-describedby={f.help ? `${f.name}-hint` : undefined}
+      min={f.min}
+      max={f.max}
+      step={f.integer ? 1 : undefined}
+      value={str(frontmatter[f.name])}
+      required={f.required}
+    />
+    {#if f.help}
+      {@render fieldHint(f.name, f.help)}
+    {/if}
+  </label>
+{:else if field.type === 'select'}
+  {@const f = field as NamedField & SelectField}
+  <label class="flex flex-col gap-1">
+    <span class="text-sm font-medium">{f.label}</span>
+    <select class="select select-sm" {name} aria-label={f.label} aria-describedby={f.help ? `${f.name}-hint` : undefined} required={f.required}>
+      <!-- A leading empty option submits '' (the key is dropped on save); a required select
+           leaves it unselected so an unset value fails the required check with a clear message. -->
+      <option value="">&mdash; none &mdash;</option>
+      {#each f.options as option (option)}
+        <option value={option} selected={str(frontmatter[f.name]) === option}>{option}</option>
+      {/each}
+    </select>
+    {#if f.help}
+      {@render fieldHint(f.name, f.help)}
+    {/if}
+  </label>
+{:else if field.type === 'date'}
+  <label class="flex flex-col gap-1">
+    <span class="text-sm font-medium">{field.label}</span>
+    <!-- A date field always carries a hint: the adapter's help when set, else the
+         built-in publish-clarity default. So aria-describedby always points at the paragraph. -->
+    <input class="input input-sm" type="date" {name} aria-label={field.label} aria-describedby={`${field.name}-hint`} value={str(frontmatter[field.name])} />
+    {@render fieldHint(field.name, field.help || DATE_PUBLISH_HINT)}
+  </label>
+{:else if field.type === 'boolean'}
+  <div class="flex flex-col gap-1">
+    <label class="label cursor-pointer justify-start gap-2">
+      <input class="checkbox checkbox-sm" type="checkbox" {name} aria-label={field.label} aria-describedby={field.help ? `${field.name}-hint` : undefined} checked={frontmatter[field.name] === true} />
+      <span class="text-sm">{field.label}</span>
+    </label>
+    {#if field.help}
+      {@render fieldHint(field.name, field.help)}
+    {/if}
+  </div>
+{:else if field.type === 'multiselect' && isClosedMultiselect(field)}
+  {@const f = field as NamedField & MultiselectField & { options: readonly string[] }}
+  {@const selected = (frontmatter[f.name] ?? []) as string[]}
+  <fieldset class="fieldset" aria-describedby={f.help ? `${f.name}-hint` : undefined}>
+    <legend class="fieldset-legend">{f.label}</legend>
+    {#if f.help}
+      {@render fieldHint(f.name, f.help)}
+    {/if}
+    <div class="flex flex-wrap gap-2">
+      {#each f.options as option (option)}
+        <label class="label cursor-pointer justify-start gap-2">
+          <input
+            class="checkbox checkbox-sm"
+            type="checkbox"
+            {name}
+            value={option}
+            checked={selected.includes(option)}
+          />
+          <span class="text-sm">{option}</span>
+        </label>
+      {/each}
+    </div>
+  </fieldset>
+{:else if field.type === 'multiselect'}
+  {@const f = field as NamedField & MultiselectField}
+  {@const tagValue = ((frontmatter[f.name] ?? []) as string[]).join(', ')}
+  <label class="flex flex-col gap-1">
+    <span class="text-sm font-medium">{f.label}</span>
+    <input
+      class="input input-sm"
+      {name}
+      aria-label={f.label}
+      aria-describedby={f.help ? `${f.name}-hint` : undefined}
+      placeholder={f.placeholder ?? (f.help ? undefined : 'Separate values with commas')}
+      value={tagValue}
+    />
+    {#if f.help}
+      {@render fieldHint(f.name, f.help)}
+    {/if}
+  </label>
+{:else if field.type === 'image'}
+  {@const heroValue = frontmatter[field.name] as ImageValue | undefined}
+  <!-- The binding_property_non_reactive warning this logs is benign: the parent owns the $state
+       proxy and mutates it by reference, and the hero-alt focus flow reads the same prefixed key. -->
+  <MediaHeroField
+    bind:this={heroFieldRefs[name]}
+    field={{ name, label: field.label }}
+    value={heroValue}
+    decorative={heroValue?.decorative ?? false}
+    lead={field.type === 'image' && field.seo === true}
+    mediaLibrary={mediaLibrary}
+    conceptId={conceptId}
+    id={id}
+    onuploaded={onuploaded}
+    ondirty={markFieldsDirty}
+    onneedsaltchange={(n) => onheroneedsalt(name, n)}
+  />
+{:else if field.type === 'reference'}
+  <ReferenceField {field} value={(frontmatter[field.name] ?? '') as string} {targets} ondirty={markFieldsDirty} />
+{:else if field.type === 'array' && field.item.type === 'reference'}
+  <ReferenceField {field} value={(frontmatter[field.name] ?? []) as string[]} {targets} ondirty={markFieldsDirty} />
+{:else if field.type === 'object'}
+  <ObjectGroupField {field} {name} frontmatter={(frontmatter[field.name] ?? {}) as Record<string, unknown>} {markFieldsDirty} {mediaLibrary} {conceptId} {id} {heroFieldRefs} {targets} {onuploaded} {onheroneedsalt} {icons} />
+{:else if field.type === 'array' && field.item.type !== 'reference'}
+  <RepeatableField {field} {name} rows={(frontmatter[field.name] ?? []) as unknown[]} {markFieldsDirty} {mediaLibrary} {conceptId} {id} {heroFieldRefs} {targets} {onuploaded} {onheroneedsalt} {icons} />
+{:else if field.type === 'icon' && icons}
+  <div class="flex flex-col gap-1">
+    <span class="text-sm font-medium">{field.label}</span>
+    <IconPicker
+      {icons}
+      label={field.label}
+      describedby={field.help ? `${field.name}-hint` : undefined}
+      value={typeof frontmatter[field.name] === 'string' ? (frontmatter[field.name] as string) : ''}
+      required={field.required ?? false}
+      onChange={(glyph) => {
+        frontmatter[field.name] = glyph;
+        markFieldsDirty();
+      }}
+    />
+    {#if field.help}
+      {@render fieldHint(field.name, field.help)}
+    {/if}
+  </div>
+{:else}
+  <!-- The plain single-line text input arm: url, email, datetime, and the text fallback. They share
+       one shape and differ only in the input type inputType() resolves. -->
+  <label class="flex flex-col gap-1">
+    <span class="text-sm font-medium">{field.label}</span>
+    <input class="input input-sm" type={inputType(field.type)} {name} aria-label={field.label} aria-describedby={field.help ? `${field.name}-hint` : undefined} value={str(frontmatter[field.name])} required={field.required} />
+    {#if field.help}
+      {@render fieldHint(field.name, field.help)}
+    {/if}
+  </label>
+{/if}

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

@@ -0,0 +1,51 @@
+import MediaHeroField from './MediaHeroField.svelte';
+import type { NamedField } from '../content/types.js';
+import type { IconSet } from '../render/glyph.js';
+import type { LinkTarget } from '../content/manifest.js';
+import type { MediaEntry } from '../media/manifest.js';
+import type { MediaLibraryEntry } from '../media/library-entry.js';
+interface Props {
+    /** The leaf field to render; its `name` is the frontmatter key the arm reads its value from. */
+    field: NamedField;
+    /** The form input name. Defaults to `field.name`; a container caller passes a prefixed path. */
+    name?: string;
+    /** The frontmatter slice this field reads from, keyed by `field.name`. */
+    frontmatter: Record<string, unknown>;
+    /** The site link targets the reference arm offers. */
+    targets: LinkTarget[];
+    /** Mark the edit form dirty; the image arm wires it to the hero field's commit. */
+    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 rows 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, threaded to the icon arm's picker. Absent when the site ships none. */
+    icons?: IconSet;
+}
+/**
+ * The leaf-field dispatcher for the edit page's Details panel. It renders one leaf field (a scalar,
+ * an image, or a reference) as the matching input, picked by `field.type`.
+ *
+ * It is name-prefixable so a container row can reuse it one level down. The `name` prop is the form
+ * input name: it defaults to `field.name` at the top level, and a container caller passes a prefixed
+ * path (`${parent}.${index}` for an array element, `${parent}.${leafKey}` for an object leaf) so the
+ * nested decode in `frontmatter.ts` reads the value back from the right slot. Each arm reads its value
+ * from `frontmatter[field.name]`, so a nested caller passes the row or object slice as `frontmatter`
+ * and the leaf key as `field.name`, leaving the reads unchanged.
+ *
+ * An `object` field renders a labeled `ObjectGroupField`, and a non-reference `array` renders a
+ * `RepeatableField`; both recurse one level back through this dispatcher for their leaves, which the
+ * one-level nesting cap (the declaration guard) bounds so the recursion terminates. An
+ * `array(reference)` stays on `ReferenceField`.
+ */
+declare const FieldInput: import("svelte").Component<Props, {}, "">;
+type FieldInput = ReturnType<typeof FieldInput>;
+export default FieldInput;

package/dist/components/IconPicker.svelte

@@ -7,7 +7,7 @@ keys move the selection, the standard radiogroup keyboard model. The glyph rende
 IconSet path data, matching the renderer's 256-unit viewBox.
 -->
 <script lang="ts">import { tick } from "svelte";
-let { icons, value, required, onChange, label = "Icon" } = $props();
+let { icons, value, required, onChange, label = "Icon", describedby } = $props();
 let group;
 const names = $derived(Object.keys(icons));
 const choices = $derived(required ? names : ["", ...names]);
@@ -32,7 +32,7 @@ function onKeydown(e) {
 }
 </script>
 
-<div class="flex flex-wrap gap-2" role="radiogroup" aria-label={label} bind:this={group}>
+<div class="flex flex-wrap gap-2" role="radiogroup" aria-label={label} aria-required={required ? 'true' : undefined} aria-describedby={describedby} bind:this={group}>
   {#if !required}
     <button
       type="button"

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

@@ -10,6 +10,8 @@ interface Props {
     onChange: (name: string) => void;
     /** The group's accessible name, threaded from the field label. Defaults to Icon. */
     label?: string;
+    /** The id of a describing element (a field hint), for the radiogroup's `aria-describedby`. */
+    describedby?: string;
 }
 /**
  * A visual icon choice over the site's IconSet. The choices form a radiogroup; each glyph is a radio

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;