@glw907/cairn-cms 0.62.2 → 0.76.0

package/dist/components/EditPage.svelte

@@ -34,7 +34,7 @@ import ComponentInsertDialog, { insertableDefs, hasSchema } from "./ComponentIns
 import LinkPicker from "./LinkPicker.svelte";
 import WebLinkDialog from "./WebLinkDialog.svelte";
 import MediaInsertPopover from "./MediaInsertPopover.svelte";
-import MediaHeroField from "./MediaHeroField.svelte";
+import FieldInput from "./FieldInput.svelte";
 import MediaFigureControl from "./MediaFigureControl.svelte";
 import DeleteDialog from "./DeleteDialog.svelte";
 import RenameDialog from "./RenameDialog.svelte";
@@ -614,6 +614,10 @@ const draftWarning = $derived.by(() => {
   const drafts = page.url.searchParams.get("drafts");
   return drafts ? drafts.split(",").filter(Boolean).join(", ") : "";
 });
+const referenceWarning = $derived.by(() => {
+  const refs = page.url.searchParams.get("refs");
+  return refs ? refs.split(",").filter(Boolean).join(", ") : "";
+});
 const flash = $derived.by(() => {
   if (data.saved && !draftWarning)
     return "Saved. Your site keeps showing the published version until you publish.";
@@ -622,9 +626,11 @@ const flash = $derived.by(() => {
   if (data.renamed) return `The URL is now ${data.slug}.`;
   return "";
 });
-const politeMessage = $derived(
-  draftWarning ? `Saved. This page links to unpublished pages: ${draftWarning}.` : flash
-);
+const politeMessage = $derived.by(() => {
+  if (draftWarning) return `Saved. This page links to unpublished pages: ${draftWarning}.`;
+  if (referenceWarning) return `Saved. This page references unpublished entries: ${referenceWarning}.`;
+  return flash;
+});
 const assertiveMessage = $derived.by(() => {
   if (data.error) return data.error;
   if (formError) return formError;
@@ -718,7 +724,7 @@ $effect(() => {
   const run = ++previewRun;
   const handle = setTimeout(async () => {
     try {
-      const html = await render(md, { resolve, resolveMedia: resolveMediaRef });
+      const html = await render({ body: md, concept: data.conceptId, frontmatter: data.frontmatter, resolve, resolveMedia: resolveMediaRef });
       if (run === previewRun) {
         previewHtml = html;
         previewFailed = false;
@@ -742,7 +748,6 @@ const eyebrowClass = "mb-2 text-[0.6875rem] font-semibold uppercase tracking-[0.
 const titleField = $derived(data.fields.find((f) => f.name === "title"));
 const draftField = $derived(data.fields.find((f) => f.type === "boolean" && f.name === "draft"));
 const detailFields = $derived(data.fields.filter((f) => f !== titleField && f !== draftField));
-const DATE_PUBLISH_HINT = "Sets the date for this post. Publishing is a separate step you choose.";
 </script>
 
 <!-- The desk controls live in the one header band: AdminLayout renders this snippet through the
@@ -869,17 +874,6 @@ const DATE_PUBLISH_HINT = "Sets the date for this post. Publishing is a separate
   </div>
 {/snippet}
 
-<!-- The author-facing hint under a Details field. The id pairs with the input's aria-describedby
-     (`<name>-hint`); its uniqueness rests on schema field names being unique within a concept, which
-     is also the loop key. So assistive tech announces the sentence without bloating the accessible
-     name. Each field branch decides whether and where to render it; this snippet holds the one shape.
-     The `fld-hint` class is a styling hook with no rule today; the Tailwind utilities do the work. -->
-{#snippet fieldHint(name: string, text: string)}
-  <p id={`${name}-hint`} class="fld-hint mt-1 text-sm text-[var(--color-muted)]">
-    {text}
-  </p>
-{/snippet}
-
 <!-- The whole edit surface remounts when navigation lands on another entry (see the entryKey
      reset above); script-level state and the beforeNavigate registration sit outside the block,
      so only the template rebuilds. -->
@@ -987,6 +981,11 @@ const DATE_PUBLISH_HINT = "Sets the date for this post. Publishing is a separate
     Saved. Note: this page links to unpublished {draftWarning.includes(',') ? 'pages' : 'a page'} ({draftWarning}), which will 404 until published.
   </div>
 {/if}
+{#if referenceWarning}
+  <div class="alert alert-warning mb-4 text-sm">
+    Saved. Note: this page references {referenceWarning.includes(',') ? 'entries' : 'an entry'} ({referenceWarning}) not yet published, which the build will flag until published.
+  </div>
+{/if}
 
 <form
   method="POST"
@@ -1368,96 +1367,19 @@ const DATE_PUBLISH_HINT = "Sets the date for this post. Publishing is a separate
            the screen-reader grouping but hides visually, the way the mockup carries it once. -->
       <legend class="sr-only">Details</legend>
       {#each detailFields as field (field.name)}
-        {#if field.type === 'textarea'}
-          {@const f = field as TextareaField}
-          <label class="flex flex-col gap-1">
-            <span class="text-sm font-medium">{f.label}</span>
-            <textarea class="textarea textarea-sm" name={f.name} aria-label={f.label} aria-describedby={f.description ? `${f.name}-hint` : undefined} rows={f.rows ?? 3}>{str(data.frontmatter[f.name])}</textarea>
-            {#if f.description}
-              {@render fieldHint(f.name, f.description)}
-            {/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 description 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={field.name} aria-label={field.label} aria-describedby={`${field.name}-hint`} value={str(data.frontmatter[field.name])} />
-            {@render fieldHint(field.name, field.description || 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={field.name} aria-label={field.label} aria-describedby={field.description ? `${field.name}-hint` : undefined} checked={data.frontmatter[field.name] === true} />
-              <span class="text-sm">{field.label}</span>
-            </label>
-            {#if field.description}
-              {@render fieldHint(field.name, field.description)}
-            {/if}
-          </div>
-        {:else if field.type === 'tags'}
-          {@const f = field as TagsField}
-          {@const selected = (data.frontmatter[f.name] ?? []) as string[]}
-          <fieldset class="fieldset" aria-describedby={f.description ? `${f.name}-hint` : undefined}>
-            <legend class="fieldset-legend">{f.label}</legend>
-            {#if f.description}
-              {@render fieldHint(f.name, f.description)}
-            {/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={f.name}
-                    value={option}
-                    checked={selected.includes(option)}
-                  />
-                  <span class="text-sm">{option}</span>
-                </label>
-              {/each}
-            </div>
-          </fieldset>
-        {:else if field.type === 'freetags'}
-          {@const f = field as FreeTagsField}
-          {@const tagValue = ((data.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={f.name}
-              aria-label={f.label}
-              aria-describedby={f.description ? `${f.name}-hint` : undefined}
-              placeholder={f.placeholder}
-              value={tagValue}
-            />
-            {#if f.description}
-              {@render fieldHint(f.name, f.description)}
-            {/if}
-          </label>
-        {:else if field.type === 'image'}
-          {@const heroValue = data.frontmatter[field.name] as ImageValue | undefined}
-          <MediaHeroField
-            bind:this={heroFieldRefs[field.name]}
-            field={{ name: field.name, label: field.label }}
-            value={heroValue}
-            decorative={heroValue?.decorative ?? false}
-            mediaLibrary={mediaLibrary}
-            conceptId={data.conceptId}
-            id={data.id}
-            onuploaded={(record) => (uploadedRecords = [...uploadedRecords, record])}
-            ondirty={markFieldsDirty}
-            onneedsaltchange={(n) => (heroNeedsAlt = { ...heroNeedsAlt, [field.name]: n })}
-          />
-        {:else}
-          <label class="flex flex-col gap-1">
-            <span class="text-sm font-medium">{field.label}</span>
-            <input class="input input-sm" name={field.name} aria-label={field.label} aria-describedby={field.description ? `${field.name}-hint` : undefined} value={str(data.frontmatter[field.name])} required={field.required} />
-            {#if field.description}
-              {@render fieldHint(field.name, field.description)}
-            {/if}
-          </label>
-        {/if}
+        <FieldInput
+          {field}
+          frontmatter={data.frontmatter}
+          targets={data.linkTargets}
+          markFieldsDirty={markFieldsDirty}
+          mediaLibrary={mediaLibrary}
+          conceptId={data.conceptId}
+          id={data.id}
+          heroFieldRefs={heroFieldRefs}
+          onuploaded={(record) => (uploadedRecords = [...uploadedRecords, record])}
+          onheroneedsalt={(name, n) => (heroNeedsAlt = { ...heroNeedsAlt, [name]: n })}
+          {icons}
+        />
       {/each}
       </fieldset>
       {/if}

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

@@ -1,8 +1,7 @@
 import type { ComponentRegistry } from '../render/registry.js';
 import type { IconSet } from '../render/glyph.js';
 import type { ContentFormFailure, EditData } from '../sveltekit/content-routes.js';
-import type { LinkResolve } from '../content/links.js';
-import type { MediaResolve } from '../render/resolve-media.js';
+import type { SiteRender } from '../content/types.js';
 interface Props {
     /** The edit load's data, plus the site name for the heading. */
     data: EditData & {
@@ -11,11 +10,7 @@ interface Props {
     /** The site's component registry, for the insert palette. */
     registry?: ComponentRegistry;
     /** The site's design-accurate render pipeline; the preview pane renders its output, which the floored pipeline already sanitized. */
-    render?: (md: string, opts?: {
-        stagger?: boolean;
-        resolve?: LinkResolve;
-        resolveMedia?: MediaResolve;
-    }) => string | Promise<string>;
+    render?: SiteRender;
     /** The site's icon set, for the guided form's icon fields. */
     icons?: IconSet;
     /** The last content action's failure: the save guard's broken links, the delete guard's

package/dist/components/EntryPicker.svelte

@@ -0,0 +1,117 @@
+<!--
+@component
+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.
+-->
+<script lang="ts">let {
+  targets,
+  choose,
+  conceptFilter,
+  selectedIds = [],
+  trigger = true,
+  heading: dialogHeading = "Link to a page",
+  searchLabel = "Search pages and posts",
+  emptyText = "No pages or posts to link to."
+} = $props();
+let dialog = $state(null);
+let searchInput = $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 scoped = conceptFilter ? targets.filter((t) => t.concept === conceptFilter) : targets;
+  const matched = q ? scoped.filter((t) => t.title.toLowerCase().includes(q)) : scoped;
+  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));
+});
+function isSelected(target) {
+  return selectedIds.includes(target.id);
+}
+export function open() {
+  query = "";
+  dialog?.showModal();
+  queueMicrotask(() => searchInput?.focus());
+}
+function close() {
+  dialog?.close();
+}
+function pick(target) {
+  if (isSelected(target)) return;
+  choose(target);
+  close();
+}
+</script>
+
+{#if trigger}
+  <button type="button" class="btn btn-sm btn-ghost" aria-haspopup="dialog" aria-label="Link to page" onclick={open}>
+    Link to page
+  </button>
+{/if}
+
+<dialog class="modal" aria-labelledby="cairn-entry-picker-title" bind:this={dialog}>
+  <div class="modal-box">
+    <div class="mb-3 flex items-center justify-between">
+      <h2 id="cairn-entry-picker-title" class="text-base font-semibold">{dialogHeading}</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={searchLabel}
+      bind:this={searchInput}
+      bind:value={query}
+    />
+
+    {#if groups.length === 0}
+      <p class="text-sm text-[var(--color-muted)]">{emptyText}</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"
+                aria-disabled={isSelected(target)}
+                aria-label={isSelected(target) ? `${target.title} (already selected)` : target.title}
+                onclick={() => pick(target)}
+              >
+                <span class="flex flex-col items-start">
+                  <span class="font-medium">{target.title}</span>
+                  <span class="text-xs text-[var(--color-muted)]">
+                    {#if isSelected(target)}<span class="badge badge-ghost badge-sm mr-1">Selected</span>{/if}
+                    {#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>

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