@glw907/cairn-cms 0.68.0 → 0.76.0

package/CHANGELOG.md

@@ -2,6 +2,88 @@
 
 All notable changes to this project are recorded here, most recent first.
 
+## 0.76.0
+
+<!-- release-size: minor -->
+
+The Contract v2 rollup, plus content islands, published as one release. cairn is still `0.x` and the
+contract may change again before a stable 1.0. This consolidates the unpublished `0.69.0`–`0.75.0`
+development minors plus islands into one published `0.76.0` release. The last published release was
+`0.68.0`, so a consumer crosses the whole window in a single jump and applies the "Consumers must" steps
+below; the granular per-phase history lives in `docs/STATUS.md` and the plan post-mortems.
+
+What changed. The field system unifies on the `fieldset({...})` record built from the `fields.*`
+constructors, the one live field system for concepts and directive components alike, with the leaf
+vocabulary (`text`, `textarea`, `number`, `select`, `multiselect`, `url`, `email`, `date`, `datetime`,
+`boolean`, `image`, `icon`, `reference`) plus the `object` and `array` containers. The adapter moves from
+flat keys into six subsystem groups (`content`, `backend`, `email`, `rendering`, `media`, `editor`), and a
+concept owns its own URL policy through `defineConcept`. The `backend` becomes a `Backend` interface behind
+a `githubApp(...)` provider, so content stays build-time over the committed manifest and no runtime database
+slips in. The `render` seam becomes the entry-aware `render({ body, concept?, frontmatter?, resolve?,
+resolveMedia? }) => Promise<string>`. Content islands add opt-in client interactivity over a static, no-JS
+fallback. References and structured fields arrive additively.
+
+This is breaking. Consumers must, in order:
+
+The field system (replaces the v1 `defineFields`):
+
+1. Move each concept's `schema` from `defineFields([...])` (an array) to `fieldset({...})` (a record).
+2. Drop the per-field `name`; the record key is now the frontmatter key.
+3. Rename field help from `description` to `help`.
+4. Move a closed `tags` field to `fields.multiselect({ options: [...] })`, and an open `freetags` field to
+   `fields.multiselect({ creatable: true })` (its `placeholder` is preserved).
+5. Preserve each field's frontmatter key, especially `tags`, or tag pages and feeds read empty.
+6. Extract a frontmatter type with `InferFieldset`, and drop imports of the removed `defineFields`,
+   `ConceptSchema`, `Infer`, `InferFields`, `DefineFieldsOptions`, `FrontmatterField`, `TagsField`, and
+   `FreeTagsField`.
+
+The adapter and concepts:
+
+7. Regroup the adapter into `content`/`backend`/`email`/`rendering`/`media`/`editor` (`sender` to `email`,
+   `render`/`registry`/`icons` to `rendering.{render,components,icons}`, `assets` to `media`,
+   `navMenu`/`preview`/`supportContact` to `editor.{nav,preview,supportContact}`).
+8. Rename each concept's `schema:` to `fields:` and declare it through `defineConcept`.
+9. Move `permalink` and `datePrefix` from the YAML `content:` block onto the concept via `defineConcept`,
+   and declare each concept's routing with the routing shorthand. A leftover YAML `content:` block now
+   throws at `parseSiteConfig`.
+10. Move `siteName` out of the adapter into the YAML site-config.
+
+Directive components:
+
+11. Declare each component's `attributes` as a `fields.*` record (was an `AttributeField[]` array), a
+    repeatable slot's `itemFields` the same way, and wrap each component in `defineComponent({ ... })`.
+12. Move any cross-field attribute `validate` into the component's `behavior` table with the
+    `validate(value, siblings)` signature, reading `siblings.min` rather than `all.attributes.min`.
+13. Replace a `pattern: { source, message }` attribute with `fields.text({ pattern })` plus a
+    `behavior.validate` for a custom message, and drop imports of `AttributeField` and `FieldType`.
+    Attribute validation now format-checks every value, so a directive that previously saved a malformed
+    value now fails `validateComponent`.
+
+The backend:
+
+14. Change the adapter's `backend` from a `{ owner, repo, branch, appId, installationId }` object literal to
+    `backend: githubApp({ ... })`, importing `githubApp` from `@glw907/cairn-cms`. Drop imports of the
+    removed `BackendConfig`, `RepoRef`, and `AppCredentials`, and replace `GithubKeyEnv` (from the
+    `/sveltekit` subpath) with `BackendEnv`.
+
+The render seam:
+
+15. Change the adapter `render` from `(md, opts) => ...` to
+    `({ body, resolve, resolveMedia }) => ...`, read the markdown from `body`, and return a
+    `Promise<string>` (a typical body is `renderMarkdown(body, { resolve, resolveMedia })`). Drop any
+    `stagger` option; `data-rise` is now always emitted and is inert without `[data-rise]` CSS. The
+    attribute now appears in all rendered output, including the syndication feeds and prerendered pages,
+    so a consumer that snapshots rendered HTML sees it.
+
+Additive in this window, with no action required to keep working: reference fields (`fields.reference` and
+`fields.array(fields.reference(...))`), structured fields (`fields.object` and the generalized
+`fields.array`), and content islands (`hydrate` on a component, `rendering.islands`, and the `./islands`
+runtime). Adopt them through their guides: [references](docs/guides/link-content-with-references.md),
+[structured fields](docs/guides/structured-fields.md), and [islands](docs/guides/add-an-island.md).
+
+ecxc-ski and 907-life stay pinned to the prior version range until they cut over. See [Upgrading
+cairn](docs/guides/upgrade-cairn.md) for the per-change actions.
+
 ## 0.68.0
 
 <!-- release-size: minor -->

package/dist/ambient.d.ts

@@ -1,8 +1,10 @@
 import type { Editor } from './auth/types.js';
+import type { Backend } from './github/backend.js';
 declare global {
     namespace App {
         interface Locals {
             editor?: Editor | null;
+            backend?: Backend;
         }
     }
 }

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

@@ -2,8 +2,7 @@ import type { AdminData } from '../sveltekit/cairn-admin.js';
 import type { ContentFormFailure } from '../sveltekit/content-routes.js';
 import type { ComponentRegistry } from '../render/registry.js';
 import type { IconSet } from '../render/glyph.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 discriminated view data from `createCairnAdmin`'s load. */
     data: AdminData;
@@ -16,11 +15,7 @@ interface Props {
         ok?: boolean;
     }) | null;
     /** The site's design-accurate render pipeline, for the edit view's preview pane. */
-    render?: (md: string, opts?: {
-        stagger?: boolean;
-        resolve?: LinkResolve;
-        resolveMedia?: MediaResolve;
-    }) => string | Promise<string>;
+    render?: SiteRender;
     /** The site's component registry, for the edit view's insert palette. */
     registry?: ComponentRegistry;
     /** The site's icon set, for the edit view's guided form fields. */

package/dist/components/ComponentForm.svelte

@@ -26,7 +26,7 @@ let working = $state(untrack(() => initial ?? previewValues(def)));
 $effect(() => {
   values = working;
 });
-const attributes = $derived(def.attributes ?? []);
+const attributes = $derived(Object.entries(def.attributes ?? {}));
 const flatSlots = $derived((def.slots ?? []).filter((s) => s.kind !== "repeatable"));
 const repeatableSlots = $derived((def.slots ?? []).filter((s) => s.kind === "repeatable"));
 function slotItems(name) {
@@ -59,7 +59,7 @@ function removeItem(name, index) {
 function rowLabel(slot, value, index) {
   const fallback = `${slot.label} ${index + 1}`;
   if (!slot.itemLabel) return fallback;
-  const key = slot.itemFields?.[0]?.key ?? "text";
+  const key = Object.keys(slot.itemFields ?? {})[0] ?? "text";
   const derived = slot.itemLabel({ [key]: value }, index);
   return derived && derived.trim() ? derived : fallback;
 }
@@ -74,10 +74,26 @@ function slotString(name) {
   const v = working.slots[name];
   return typeof v === "string" ? v : "";
 }
+function inputType(type) {
+  switch (type) {
+    case "number":
+      return "number";
+    case "date":
+      return "date";
+    case "datetime":
+      return "datetime-local";
+    case "url":
+      return "url";
+    case "email":
+      return "email";
+    default:
+      return "text";
+  }
+}
 const incompleteState = $derived.by(() => {
-  for (const field of attributes) {
+  for (const [name, field] of attributes) {
     if (!field.required || field.type === "boolean") continue;
-    if (asString(field.key) === "") return true;
+    if (asString(name) === "") return true;
   }
   for (const slot of def.slots ?? []) {
     if (!slot.required) continue;
@@ -97,9 +113,9 @@ function markTouched(key) {
 }
 const errors = $derived.by(() => {
   const out = {};
-  for (const field of attributes) {
-    if (field.required && field.type !== "boolean" && touched[field.key] && asString(field.key) === "") {
-      out[field.key] = `${field.label} is required.`;
+  for (const [name, field] of attributes) {
+    if (field.required && field.type !== "boolean" && touched[name] && asString(name) === "") {
+      out[name] = `${field.label} is required.`;
     }
   }
   for (const slot of def.slots ?? []) {
@@ -127,16 +143,16 @@ async function submit() {
 </script>
 
 <div class="flex flex-col gap-3" bind:this={formEl}>
-  {#each attributes as field (field.key)}
+  {#each attributes as [name, field] (name)}
     {#if field.type === 'boolean'}
       <label class="label cursor-pointer justify-start gap-2">
         <input
           class="checkbox checkbox-sm"
           type="checkbox"
-          aria-invalid={Boolean(errors[field.key])}
-          aria-describedby={errors[field.key] ? `err-${field.key}` : undefined}
-          checked={asBool(field.key)}
-          onchange={(e) => (working.attributes[field.key] = e.currentTarget.checked)}
+          aria-invalid={Boolean(errors[name])}
+          aria-describedby={errors[name] ? `err-${name}` : undefined}
+          checked={asBool(name)}
+          onchange={(e) => (working.attributes[name] = e.currentTarget.checked)}
         />
         <span class="text-sm">{field.label}</span>
       </label>
@@ -146,14 +162,14 @@ async function submit() {
         <select
           class="select"
           aria-required={field.required ? 'true' : undefined}
-          aria-invalid={Boolean(errors[field.key])}
-          aria-describedby={errors[field.key] ? `err-${field.key}` : undefined}
-          value={asString(field.key)}
+          aria-invalid={Boolean(errors[name])}
+          aria-describedby={errors[name] ? `err-${name}` : undefined}
+          value={asString(name)}
           onchange={(e) => {
-            working.attributes[field.key] = e.currentTarget.value;
-            markTouched(field.key);
+            working.attributes[name] = e.currentTarget.value;
+            markTouched(name);
           }}
-          onblur={() => markTouched(field.key)}
+          onblur={() => markTouched(name)}
         >
           {#if !field.required}<option value="">—</option>{/if}
           {#each field.options ?? [] as opt (opt)}<option value={opt}>{opt}</option>{/each}
@@ -165,9 +181,9 @@ async function submit() {
         <IconPicker
           {icons}
           label={field.label}
-          value={asString(field.key)}
+          value={asString(name)}
           required={field.required ?? false}
-          onChange={(name) => (working.attributes[field.key] = name)}
+          onChange={(glyph) => (working.attributes[name] = glyph)}
         />
       </div>
     {:else}
@@ -175,19 +191,20 @@ async function submit() {
         <span class="text-sm font-medium">{field.label}{#if field.required}<span data-testid="cairn-pk-req" class="text-error" aria-hidden="true">*</span>{/if}</span>
         <input
           class="input"
+          type={inputType(field.type)}
           aria-required={field.required ? 'true' : undefined}
-          aria-invalid={Boolean(errors[field.key])}
-          aria-describedby={errors[field.key] ? `err-${field.key}` : undefined}
-          value={asString(field.key)}
+          aria-invalid={Boolean(errors[name])}
+          aria-describedby={errors[name] ? `err-${name}` : undefined}
+          value={asString(name)}
           oninput={(e) => {
-            working.attributes[field.key] = e.currentTarget.value;
-            markTouched(field.key);
+            working.attributes[name] = e.currentTarget.value;
+            markTouched(name);
           }}
-          onblur={() => markTouched(field.key)}
+          onblur={() => markTouched(name)}
         />
       </label>
     {/if}
-    {#if errors[field.key]}<span id={`err-${field.key}`} role="alert" class="text-error text-xs">{errors[field.key]}</span>{/if}
+    {#if errors[name]}<span id={`err-${name}`} role="alert" class="text-error text-xs">{errors[name]}</span>{/if}
   {/each}
 
   {#each flatSlots as slot (slot.name)}

package/dist/components/ComponentInsertDialog.svelte

@@ -7,7 +7,7 @@ trapping and Escape, following the dropdown's a11y conventions used elsewhere in
 -->
 <script module lang="ts">const SEARCH_THRESHOLD = 8;
 export function hasSchema(def) {
-  return (def.attributes?.length ?? 0) > 0 || (def.slots?.length ?? 0) > 0;
+  return Object.keys(def.attributes ?? {}).length > 0 || (def.slots?.length ?? 0) > 0;
 }
 export function insertableDefs(registry) {
   return (registry?.defs ?? []).filter(
@@ -49,10 +49,10 @@ let previewDoc = $state("");
 const emptyRequired = $derived.by(() => {
   if (!picked || !formValues) return [];
   const out = [];
-  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];
+    if (typeof v !== "string" || v === "") out.push(field.label ?? name);
   }
   for (const slot of picked.slots ?? []) {
     if (!slot.required) continue;
@@ -75,7 +75,7 @@ $effect(() => {
   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";

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

@@ -10,8 +10,7 @@ export declare function hasSchema(def: ComponentDef): boolean;
 export declare function insertableDefs(registry?: ComponentRegistry): ComponentDef[];
 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';
 interface Props {
     /** The site's component registry. */
     registry?: ComponentRegistry;
@@ -29,10 +28,7 @@ interface Props {
      *  `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;

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>