@glw907/cairn-cms 0.62.2 → 0.76.0

package/src/lib/components/FieldInput.svelte

@@ -0,0 +1,262 @@
+<!--
+@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';
+  import type { ImageValue, NamedField } from '../content/types.js';
+  import type { TextareaField, NumberField, SelectField, MultiselectField } from '../content/fields.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;
+  }
+
+  let {
+    field,
+    name = field.name,
+    frontmatter,
+    targets,
+    markFieldsDirty,
+    mediaLibrary,
+    conceptId,
+    id,
+    heroFieldRefs,
+    onuploaded,
+    onheroneedsalt,
+    icons,
+  }: Props = $props();
+
+  function str(v: unknown): string {
+    return v == null ? '' : String(v);
+  }
+
+  // The HTML input type for a plain single-line text input arm (url, email, datetime, and the text
+  // fallback). datetime maps to the datetime-local control; everything else carries no type attribute
+  // so the browser defaults to a text input.
+  function inputType(fieldType: string): 'url' | 'email' | 'datetime-local' | undefined {
+    switch (fieldType) {
+      case 'url':
+        return 'url';
+      case 'email':
+        return 'email';
+      case 'datetime':
+        return 'datetime-local';
+      default:
+        return undefined;
+    }
+  }
+
+  // The built-in hint a date field carries when its adapter sets no description. The control reads as
+  // if it might schedule publishing, so this reassures the editor that the date is metadata and that
+  // publishing is the separate, deliberate step. A field-level description overrides it.
+  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/src/lib/components/IconPicker.svelte

@@ -21,9 +21,11 @@ IconSet path data, matching the renderer's 256-unit viewBox.
     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;
   }
 
-  let { icons, value, required, onChange, label = 'Icon' }: Props = $props();
+  let { icons, value, required, onChange, label = 'Icon', describedby }: Props = $props();
 
   // The radiogroup container, used to move focus with the selection per the ARIA radiogroup pattern.
   let group: HTMLDivElement;
@@ -62,7 +64,7 @@ IconSet path data, matching the renderer's 256-unit viewBox.
   }
 </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/src/lib/components/LinkPicker.svelte

@@ -1,14 +1,14 @@
 <!--
 @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 type { LinkTarget } from '../content/manifest.js';
   import { formatCairnToken } from '../content/links.js';
+  import EntryPicker from './EntryPicker.svelte';
 
   interface Props {
     /** The site's link targets, from the committed manifest (editLoad ships them). */
@@ -24,46 +24,16 @@ conventions. The plain-URL link is the toolbar's Web link dialog; this is for an
 
   let { linkTargets, insert, disabled = false, trigger = true }: Props = $props();
 
-  let dialog = $state<HTMLDialogElement | null>(null);
-  let query = $state('');
-
-  // Group filtered targets by concept, Pages first then Posts then any other concept, so the list
-  // reads in a stable order. The filter is a case-insensitive title substring.
-  const ORDER: Record<string, number> = { pages: 0, posts: 1 };
-  function rank(concept: string): number {
-    return ORDER[concept] ?? 2;
-  }
-  function heading(concept: string): string {
-    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 = new Map<string, LinkTarget[]>();
-    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));
-  });
+  // The headless picker; this component drives it so it can carry the disabled trigger and the
+  // cairn-token meaning, while EntryPicker stays ignorant of both.
+  let picker = $state<{ open: () => void } | null>(null);
 
   /** Open the picker programmatically, for a host that drives it without the trigger. */
   export function open() {
-    query = '';
-    dialog?.showModal();
-  }
-  function close() {
-    dialog?.close();
+    picker?.open();
   }
   function choose(target: LinkTarget) {
     insert(formatCairnToken(target), target.title);
-    close();
   }
 </script>
 
@@ -73,45 +43,4 @@ conventions. The plain-URL link is the toolbar's Web link dialog; this is for an
   </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/src/lib/components/MediaHeroField.svelte

@@ -60,6 +60,10 @@ popover's runUpload but resolves to this field, not an editor placeholder.
     /** 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). */
@@ -83,6 +87,7 @@ popover's runUpload but resolves to this field, not an editor placeholder.
     field,
     value,
     decorative: decorativeInitial = false,
+    lead = false,
     mediaLibrary,
     conceptId,
     id,
@@ -442,13 +447,15 @@ popover's runUpload but resolves to this field, not an editor placeholder.
         <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
@@ -468,7 +475,7 @@ popover's runUpload but resolves to this field, not an editor placeholder.
   <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/src/lib/components/ObjectGroupField.svelte

@@ -0,0 +1,97 @@
+<!--
+@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';
+  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;
+  }
+
+  let {
+    field,
+    name,
+    frontmatter,
+    targets,
+    markFieldsDirty,
+    mediaLibrary,
+    conceptId,
+    id,
+    heroFieldRefs,
+    onuploaded,
+    onheroneedsalt,
+    icons,
+  }: Props = $props();
+
+  // Turn a field key into a sentence-case legend when the object carries no label of its own:
+  // 'social_card' -> 'Social card', 'ogImage' -> 'Og image'. The label, when set, wins.
+  function humanize(key: string): string {
+    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>