@glw907/cairn-cms 0.62.2 → 0.76.0

package/src/lib/components/ComponentInsertDialog.svelte

@@ -16,7 +16,7 @@ trapping and Escape, following the dropdown's a11y conventions used elsewhere in
    *  than inserting a bare template. Exported so a host deciding on its own guided-edit affordance
    *  (the edit page's Edit-block control) reads the same notion the dialog lists and chooses by. */
   export function hasSchema(def: ComponentDef): boolean {
-    return (def.attributes?.length ?? 0) > 0 || (def.slots?.length ?? 0) > 0;
+    return Object.keys(def.attributes ?? {}).length > 0 || (def.slots?.length ?? 0) > 0;
   }
   /** The registry's pickable components. A def is actionable when a schema opens the guided form or
    *  a template inserts directly; a def with neither is not listed. A `hidden` def is then dropped,
@@ -57,8 +57,7 @@ trapping and Escape, following the dropdown's a11y conventions used elsewhere in
   import { tick } from 'svelte';
   import type { IconSet } from '../render/glyph.js';
   import type { ComponentValues } from '../render/registry.js';
-  import type { ResolvedPreview } from '../content/types.js';
-  import type { LinkResolve } from '../content/links.js';
+  import type { ResolvedPreview, SiteRender } from '../content/types.js';
   import { serializeComponent } from '../render/component-grammar.js';
   import { buildPreviewDoc } from './preview-doc.js';
   import ComponentForm from './ComponentForm.svelte';
@@ -77,7 +76,7 @@ trapping and Escape, following the dropdown's a11y conventions used elsewhere in
      *  `preview`, the configure step splits to two panes and renders the configured directive
      *  through this into a sandboxed iframe (the same path EditPage's preview uses). Optional: a
      *  host that passes none simply gets no preview pane. */
-    render?: (md: string, opts?: { stagger?: boolean; resolve?: LinkResolve }) => string | Promise<string>;
+    render?: SiteRender;
     /** The adapter's resolved preview knob (stylesheets and container class), threaded to
      *  buildPreviewDoc so the preview frame links the site's own CSS, the same as EditPage. */
     preview?: ResolvedPreview | null;
@@ -122,10 +121,12 @@ trapping and Escape, following the dropdown's a11y conventions used elsewhere in
   const emptyRequired = $derived.by(() => {
     if (!picked || !formValues) return [] as string[];
     const out: string[] = [];
-    for (const field of picked.attributes ?? []) {
+    for (const [name, field] of Object.entries(picked.attributes ?? {})) {
       if (!field.required || field.type === 'boolean') continue;
-      const v = formValues.attributes[field.key];
-      if (typeof v !== 'string' || v === '') out.push(field.label);
+      const v = formValues.attributes[name];
+      // A scalar attribute always carries a label; the `?? name` only satisfies the union type, whose
+      // object/array members have an optional label that checkComponentAttributes already rejects.
+      if (typeof v !== 'string' || v === '') out.push(field.label ?? name);
     }
     for (const slot of picked.slots ?? []) {
       if (!slot.required) continue;
@@ -154,7 +155,7 @@ trapping and Escape, following the dropdown's a11y conventions used elsewhere in
     previewState = 'settling';
     const handle = setTimeout(async () => {
       try {
-        const html = await render(md);
+        const html = await render({ body: md });
         if (run === previewRun) {
           previewDoc = buildPreviewDoc(html, preview);
           previewState = 'settled';
@@ -317,11 +318,16 @@ trapping and Escape, following the dropdown's a11y conventions used elsewhere in
 
 {#if defs.length > 0}
   <dialog class="modal" aria-labelledby="cairn-insert-dialog-title" bind:this={dialog} onclose={onClose} oncancel={onCancel}>
-    <div class="modal-box {twoPane ? 'max-w-3xl' : ''}">
+    <!-- The box caps at 85vh and is a flex column so its header holds while only the body scrolls,
+         per the design system's dialog-sizing recipe. The cap rides Tailwind utilities (the utilities
+         layer) so it beats DaisyUI's `.modal-box` max-height: 100vh; a components-layer rule loses the
+         cascade. overflow-hidden keeps the box from being a second scroll container. Matches TidyReview. -->
+    <div class="modal-box flex max-h-[85vh] flex-col overflow-hidden {twoPane ? 'max-w-3xl' : ''}">
       <!-- The shared header: at the configure step it carries the Back control and the
            "Insert > group" eyebrow breadcrumb above the component label; while browsing it is the
-           plain "Insert a component" title. -->
-      <div class="mb-3 flex items-center gap-3">
+           plain "Insert a component" title. It holds (flex-none) while the body scrolls, per the
+           design system's dialog-sizing recipe. -->
+      <div class="mb-3 flex flex-none items-center gap-3">
         {#if picked && !editing}
           <button type="button" class="btn btn-ghost btn-sm btn-square" aria-label="Back to components" onclick={back}>
             <svg class="h-4 w-4" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.7 202.3a8 8 0 0 1-11.4 11.4l-80-80a8 8 0 0 1 0-11.4l80-80a8 8 0 0 1 11.4 11.4L91.3 128Z" /></svg>
@@ -339,6 +345,9 @@ trapping and Escape, following the dropdown's a11y conventions used elsewhere in
       </div>
 
       {#if picked}
+        <!-- The configure body is the box's scroll container (flex-1, min-h-0): the shared header
+             above holds while the form scrolls within the 85vh cap. -->
+        <div class="-mr-1 flex min-h-0 flex-1 flex-col overflow-y-auto pr-1">
         {#key picked}
           {#if twoPane}
             <!-- Two panes: the form on the left, the live preview on the right. Below the breakpoint
@@ -395,9 +404,10 @@ trapping and Escape, following the dropdown's a11y conventions used elsewhere in
             {@render configureForm(picked)}
           {/if}
         {/key}
+        </div>
       {:else}
         {#if showSearch}
-          <div class="mb-3 flex items-center gap-2 rounded-field border border-[var(--cairn-card-border)] bg-base-100 px-3 py-2">
+          <div class="mb-3 flex flex-none items-center gap-2 rounded-field border border-[var(--cairn-card-border)] bg-base-100 px-3 py-2">
             <svg class="ec-glyph h-4 w-4 text-[var(--color-muted)]" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M229.7 218.3 179.6 168.2A92.2 92.2 0 1 0 168.2 179.6l50.1 50.1a8 8 0 0 0 11.4-11.4ZM40 112a72 72 0 1 1 72 72 72.1 72.1 0 0 1-72-72Z" /></svg>
             <input
               type="search"
@@ -421,8 +431,10 @@ trapping and Escape, following the dropdown's a11y conventions used elsewhere in
             <button type="button" class="text-[0.8125rem] font-medium text-primary underline [text-underline-offset:2px]" onclick={() => (query = '')}>Clear search</button>
           </div>
         {:else}
-          <!-- One scroll region holds every group, so the arrow keys roam the whole catalog. -->
-          <div data-cairn-pk-list>
+          <!-- One scroll region holds every group, so the arrow keys roam the whole catalog. It
+               is the box's scroll container (flex-1, min-h-0): the header above holds while the
+               list scrolls within the 85vh cap. -->
+          <div data-cairn-pk-list class="-mr-1 min-h-0 flex-1 overflow-y-auto pr-1">
             {#each groups as group (group.heading)}
               <div class="mt-3 first:mt-0">
                 {#if group.heading}

package/src/lib/components/ConceptList.svelte

@@ -200,6 +200,38 @@ header button. Filtering, sorting, and paging run over the loaded entries in com
       ? `Published ${data.publishedAll} ${data.publishedAll === 1 ? 'entry' : 'entries'}.`
       : '',
   );
+
+  // The one lifecycle error to announce (the visible alerts below keep their own styling). A blocked
+  // delete leads, then a form error, then a load error, since the refusal is the most recent and most
+  // actionable outcome of the last submit. The refusal announcement carries the blocker count, so a
+  // screen reader hears the magnitude (matching the visible banner) before navigating to the list.
+  const lifecycleError = $derived(
+    deleteRefused
+      ? `This ${data.label.toLowerCase()} could not be deleted. ${deleteRefused.inboundLinks.length} ${deleteRefused.inboundLinks.length === 1 ? 'page links' : 'pages link'} to it.`
+      : (data.formError ?? data.error ?? ''),
+  );
+
+  // The polite live region's text re-announces only when it changes, so a repeated identical error
+  // (a second submit failing the same way) would go silent. An invisible nonce flips on every fresh
+  // error so the region text always mutates and the screen reader speaks again (the MediaPicker
+  // discipline). The nonce is a zero-width space, never voiced, so the heard sentence is unchanged.
+  let announceNonce = $state(0);
+  function nonce(): string {
+    return announceNonce % 2 === 0 ? '' : '​';
+  }
+  // Each submit hands a fresh `form` (or `data` on a load) object, so the nonce bumps once per submit,
+  // keying the re-announce to the submit rather than to a string change the live region would swallow.
+  // The guard reads a plain non-reactive `lastSubmit`, so the bump fires only when the submit identity
+  // changes, never on the re-render the bump itself causes; that is what keeps the effect from looping.
+  let lastSubmit: unknown;
+  $effect(() => {
+    const submit = form ?? data;
+    if (submit !== lastSubmit) {
+      lastSubmit = submit;
+      if (lifecycleError) announceNonce++;
+    }
+  });
+  const liveError = $derived(lifecycleError ? `${lifecycleError}${nonce()}` : '');
 </script>
 
 <!-- The non-color selected cue for the triage controls (WCAG 1.4.1): a small check glyph that
@@ -225,20 +257,25 @@ header button. Filtering, sorting, and paging run over the loaded entries in com
      {#if}-gated role element inserted fresh is announced inconsistently, so the visible alert
      below keeps its styling without a role and the message is announced once. -->
 <div class="sr-only" aria-live="polite">{publishedAllMessage}</div>
+<!-- One persistent polite region announces the lifecycle errors, re-announcing a repeat through the
+     nonce. The visible alerts below keep their styling and drop the live `role` (a fresh-inserted
+     role element announces inconsistently and clobbers a repeat), so the message is announced once. -->
+<div class="sr-only" aria-live="polite">{liveError}</div>
 {#if publishedAllMessage}
   <div class="alert alert-success mb-4 text-sm">{publishedAllMessage}</div>
 {/if}
 {#if data.formError}
-  <div role="alert" class="alert alert-error mb-4 text-sm">{data.formError}</div>
+  <div class="alert alert-error mb-4 text-sm">{data.formError}</div>
 {/if}
 {#if data.error}
-  <div role="alert" class="alert alert-warning mb-4 text-sm">{data.error}</div>
+  <div class="alert alert-warning mb-4 text-sm">{data.error}</div>
 {/if}
 
 {#if deleteRefused}
   <!-- A `?/delete` was refused: name the blockers up front, matching the editor's refusal banner,
-       so the author sees why without re-opening a dialog. -->
-  <div role="alert" aria-label="This {data.label.toLowerCase()} could not be deleted" class="alert alert-error mb-4 flex-col items-start text-sm">
+       so the author sees why without re-opening a dialog. The polite region above announces it, so
+       the box itself carries no role or label (a bare div with an aria-label gets no accessible name). -->
+  <div class="alert alert-error mb-4 flex-col items-start text-sm">
     <p class="font-medium">This {data.label.toLowerCase()} could not be deleted.</p>
     <p>{deleteRefused.inboundLinks.length} {deleteRefused.inboundLinks.length === 1 ? 'page links' : 'pages link'} to it. Remove or repoint the {deleteRefused.inboundLinks.length === 1 ? 'link' : 'links'} listed below, then delete again.</p>
     <ul class="mt-1 w-full">

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>