@glw907/cairn-cms 0.68.0 → 0.76.0

package/src/lib/components/EditPage.svelte

@@ -35,7 +35,8 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
   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 type MediaHeroField from './MediaHeroField.svelte';
   import MediaFigureControl from './MediaFigureControl.svelte';
   import DeleteDialog from './DeleteDialog.svelte';
   import RenameDialog from './RenameDialog.svelte';
@@ -62,10 +63,8 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
   import { parseComponent, componentRoundTripSafety } from '../render/component-grammar.js';
   import type { IconSet } from '../render/glyph.js';
   import type { ContentFormFailure, EditData } from '../sveltekit/content-routes.js';
-  import type { TextareaField, TagsField, FreeTagsField, ImageValue } from '../content/types.js';
-  import type { LinkResolve } from '../content/links.js';
+  import type { SiteRender } from '../content/types.js';
   import { manifestLinkResolver } from '../content/manifest.js';
-  import type { MediaResolve } from '../render/resolve-media.js';
   import { manifestMediaResolver } from '../render/resolve-media.js';
   import type { MediaEntry } from '../media/manifest.js';
   import { mediaLibraryEntry } from '../media/library-entry.js';
@@ -77,10 +76,7 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
     /** 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
@@ -970,7 +966,10 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
   // author can act on or leave; the count drops and the notice clears as each alt is filled.
   const needsAlt = $derived(findMediaImagesNeedingAlt(body));
 
-  // The declared image (hero) fields, for labelling the needs-alt notice's frontmatter rows.
+  // The declared image (hero) fields, for labelling the needs-alt notice's frontmatter rows. Only
+  // top-level image fields are enumerated. A nested image (an array(image) gallery item or an object
+  // image sub-field) is intentionally out of scope for the needs-alt notice this phase, the recorded
+  // carry-forward, so the flat top-level scan is deliberate, not an oversight.
   const imageFields = $derived(
     data.fields.filter((f) => f.type === 'image').map((f) => ({ name: f.name, label: f.label })),
   );
@@ -1061,6 +1060,14 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
     return drafts ? drafts.split(',').filter(Boolean).join(', ') : '';
   });
 
+  // A save whose frontmatter references an absent or draft target carries ?refs=<concept/id list>,
+  // the advisory reference warning the save threads through (mirroring ?drafts=). It never blocks the
+  // save; the build's verifyReferences is the integrity authority, so this is informational only.
+  const referenceWarning = $derived.by(() => {
+    const refs = page.url.searchParams.get('refs');
+    return refs ? refs.split(',').filter(Boolean).join(', ') : '';
+  });
+
   // The one transient feedback strip under the sticky header. The redirect flags are mutually
   // exclusive in practice; the chain picks one so a surprise overlap still renders a single strip.
   // A saved flash with a draft warning yields to the warning alert below, the prior behavior.
@@ -1078,9 +1085,11 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
   // notices (the flash, plus the draft notice the strip yields to); an assertive region carries
   // the errors. The visible banners below keep their styling but drop their roles, so a message
   // is announced once.
-  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;
@@ -1208,6 +1217,9 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
 
   // Render the design-accurate preview as the body changes, debounced. The site's render is the
   // floored engine pipeline, so its output is already sanitized; the preview mirrors the page.
+  // The preview call threads the same entry context the public route passes (concept and
+  // frontmatter), so a custom entry-aware renderer's preview matches its page. The body is the live
+  // editor content; frontmatter is the loaded snapshot, which is faithful for the saved state.
   // previewRun is a plain counter (not reactive state) used as a latest-wins guard: if a slow earlier
   // async render call resolves after a newer one has started, the stale result is discarded.
   let previewRun = 0;
@@ -1219,7 +1231,7 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
     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;
@@ -1254,11 +1266,6 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
   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));
-
-  // 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>
 
 <!-- The desk controls live in the one header band: AdminLayout renders this snippet through the
@@ -1385,17 +1392,6 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
   </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. -->
@@ -1503,6 +1499,11 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
     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"
@@ -1884,96 +1885,19 @@ count, the Prose/Markup posture pair, the focus and typewriter toggles, and the
            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/src/lib/components/EntryPicker.svelte

@@ -0,0 +1,154 @@
+<!--
+@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">
+  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;
+  }
+
+  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 = $props();
+
+  let dialog = $state<HTMLDialogElement | null>(null);
+  let searchInput = $state<HTMLInputElement | 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 scoped = conceptFilter ? targets.filter((t) => t.concept === conceptFilter) : targets;
+    const matched = q ? scoped.filter((t) => t.title.toLowerCase().includes(q)) : scoped;
+    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));
+  });
+
+  function isSelected(target: LinkTarget): boolean {
+    return selectedIds.includes(target.id);
+  }
+
+  /** Open the picker programmatically, for a host that drives it without the trigger. */
+  export function open() {
+    query = '';
+    dialog?.showModal();
+    // showModal() lands focus on the first focusable element (the header Close button), so move it
+    // to the search box the picker exists for (WCAG 2.4.3). A microtask defers past the dialog's own
+    // focus handling, matching RenameDialog.
+    queueMicrotask(() => searchInput?.focus());
+  }
+  function close() {
+    dialog?.close();
+  }
+  function pick(target: LinkTarget) {
+    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/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}