@glw907/cairn-cms 0.9.0 → 0.11.0

package/dist/render/registry.d.ts

@@ -1,4 +1,33 @@
 import type { Element } from 'hast';
+/** The input types a component attribute or repeatable item field can take. */
+export type FieldType = 'text' | 'select' | 'icon' | 'boolean';
+/** One `{key="value"}` attribute on a component directive, or one field of a repeatable item. */
+export interface AttributeField {
+    /** The attribute name as it appears in the directive, e.g. `icon`. */
+    key: string;
+    /** The form label. */
+    label: string;
+    type: FieldType;
+    required?: boolean;
+    /** Initial value; a string for text/select/icon, a boolean for boolean. */
+    default?: string | boolean;
+    /** Allowed values for `type: 'select'`. */
+    options?: string[];
+    /** Helper text shown under the field. */
+    help?: string;
+}
+export type SlotKind = 'markdown' | 'inline' | 'repeatable';
+/** One named content region of a component. The slots named `title` and `body` are special: `title`
+ *  serializes to the directive `[label]` and `body` to the unmarked content (see the canonical grammar). */
+export interface SlotDef {
+    name: string;
+    label: string;
+    kind: SlotKind;
+    required?: boolean;
+    help?: string;
+    /** For `kind: 'repeatable'`: the fields composing each list item (v1 uses the first field). */
+    itemFields?: AttributeField[];
+}
 /** A site component: how it inserts (editor) and how it renders (rehype). */
 export interface ComponentDef {
     /** Directive name, e.g. 'card' (matches `:::card`). */
@@ -8,13 +37,19 @@ export interface ComponentDef {
     /** Palette description. */
     description: string;
     /** Markdown scaffold inserted at the cursor by the editor palette. */
-    insertTemplate: string;
+    insertTemplate?: string;
     /** Build the final hast element from the stamped directive element. The engine
      *  stamps the entrance-stagger ordinal (`data-rise`) on the top-level result, so a
      *  build fn stays free of any motion concern. */
     build: (node: Element) => Element;
     /** Optional role-to-default-icon, e.g. `{ caution: 'warning' }`. */
     defaultIconByRole?: Record<string, string>;
+    /** One line on when to reach for this component; feeds the picker and the reference file. */
+    use?: string;
+    /** The `{key="value"}` attributes this component accepts. */
+    attributes?: AttributeField[];
+    /** The named content regions this component accepts. */
+    slots?: SlotDef[];
 }
 export interface ComponentRegistry {
     defs: ComponentDef[];
@@ -29,4 +64,13 @@ export interface ComponentRegistry {
 export declare function defineRegistry({ components }: {
     components: ComponentDef[];
 }): ComponentRegistry;
+/** Guided-form values for one component: attribute values keyed by attribute key, slot values keyed
+ *  by slot name (a string, or a string list for a repeatable slot). */
+export interface ComponentValues {
+    attributes: Record<string, string | boolean>;
+    slots: Record<string, string | string[]>;
+}
+/** Seed an empty {@link ComponentValues} from a component's schema: attribute defaults (or '' / false)
+ *  and empty slot values ([] for repeatable, '' otherwise). */
+export declare function emptyValues(def: ComponentDef): ComponentValues;
 //# sourceMappingURL=registry.d.ts.map

package/dist/render/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/lib/render/registry.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAEpC,6EAA6E;AAC7E,MAAM,WAAW,YAAY;IAC3B,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,sEAAsE;IACtE,cAAc,EAAE,MAAM,CAAC;IACvB;;qDAEiD;IACjD,KAAK,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC;IAClC,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC5C;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAAC;IAC5C,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAC9D;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,YAAY,EAAE,CAAA;CAAE,GAAG,iBAAiB,CAQhG"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/lib/render/registry.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAEpC,+EAA+E;AAC/E,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE/D,iGAAiG;AACjG,MAAM,WAAW,cAAc;IAC7B,sEAAsE;IACtE,GAAG,EAAE,MAAM,CAAC;IACZ,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,YAAY,CAAC;AAE5D;4GAC4G;AAC5G,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;CAC/B;AAED,6EAA6E;AAC7E,MAAM,WAAW,YAAY;IAC3B,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,sEAAsE;IACtE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;qDAEiD;IACjD,KAAK,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC;IAClC,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3C,6FAA6F;IAC7F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B,wDAAwD;IACxD,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAAC;IAC5C,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CAC9D;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,YAAY,EAAE,CAAA;CAAE,GAAG,iBAAiB,CAQhG;AAED;uEACuE;AACvE,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IAC7C,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;CAC1C;AAED;+DAC+D;AAC/D,wBAAgB,WAAW,CAAC,GAAG,EAAE,YAAY,GAAG,eAAe,CAU9D"}

package/dist/render/registry.js

@@ -11,3 +11,16 @@ export function defineRegistry({ components }) {
         defaultIcon: (name, role) => (role ? byName.get(name)?.defaultIconByRole?.[role] : undefined),
     };
 }
+/** Seed an empty {@link ComponentValues} from a component's schema: attribute defaults (or '' / false)
+ *  and empty slot values ([] for repeatable, '' otherwise). */
+export function emptyValues(def) {
+    const attributes = {};
+    for (const field of def.attributes ?? []) {
+        attributes[field.key] = field.default ?? (field.type === 'boolean' ? false : '');
+    }
+    const slots = {};
+    for (const slot of def.slots ?? []) {
+        slots[slot.name] = slot.kind === 'repeatable' ? [] : '';
+    }
+    return { attributes, slots };
+}

package/dist/sveltekit/public-routes.d.ts

@@ -1,5 +1,6 @@
 import type { ContentSummary, ContentEntry } from '../delivery/content-index.js';
 import type { SiteIndex } from '../delivery/site-index.js';
+import type { SeoMeta } from '../delivery/seo.js';
 /** Injected dependencies for the public loaders. */
 export interface PublicRoutesDeps {
     site: SiteIndex;
@@ -7,6 +8,15 @@ export interface PublicRoutesDeps {
         stagger?: boolean;
     }) => string | Promise<string>;
     origin: string;
+    /** Site name for og:site_name and the SEO head. */
+    siteName: string;
+    /** Default description used when an entry has none. */
+    description: string;
+    /** Absolute feed URLs for the head's autodiscovery links. */
+    feeds?: {
+        rss?: string;
+        json?: string;
+    };
 }
 /** The archive and tag list data: summaries the template renders. */
 export interface ListData {
@@ -28,6 +38,7 @@ export interface EntryData {
     entry: ContentEntry;
     html: string;
     canonicalUrl: string;
+    seo: SeoMeta;
     newer?: ContentSummary;
     older?: ContentSummary;
 }

package/dist/sveltekit/public-routes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public-routes.d.ts","sourceRoot":"","sources":["../../src/lib/sveltekit/public-routes.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE3D,oDAAoD;AACpD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/E,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,qEAAqE;AACrE,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,uDAAuD;AACvD,MAAM,WAAW,OAAQ,SAAQ,QAAQ;IACvC,GAAG,EAAE,MAAM,CAAC;CACb;AAED,oDAAoD;AACpD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACxC;AAED,oFAAoF;AACpF,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,2DAA2D;AAC3D,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,gBAAgB;uBAWvB;QAAE,GAAG,EAAE,GAAG,CAAA;KAAE,KAAG,OAAO,CAAC,SAAS,CAAC;6BAQjC,MAAM,KAAG,QAAQ;8BAKhB,MAAM,KAAG,YAAY;yBAK1B,MAAM,SAAS;QAAE,MAAM,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAG,OAAO;mBAO5D;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE;EAKvC"}
+{"version":3,"file":"public-routes.d.ts","sourceRoot":"","sources":["../../src/lib/sveltekit/public-routes.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAElD,oDAAoD;AACpD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAC/E,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,6DAA6D;IAC7D,KAAK,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACzC;AAED,qEAAqE;AACrE,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,uDAAuD;AACvD,MAAM,WAAW,OAAQ,SAAQ,QAAQ;IACvC,GAAG,EAAE,MAAM,CAAC;CACb;AAED,oDAAoD;AACpD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACxC;AAED,oFAAoF;AACpF,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,GAAG,EAAE,OAAO,CAAC;IACb,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,2DAA2D;AAC3D,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,gBAAgB;uBAWvB;QAAE,GAAG,EAAE,GAAG,CAAA;KAAE,KAAG,OAAO,CAAC,SAAS,CAAC;6BAoBjC,MAAM,KAAG,QAAQ;8BAKhB,MAAM,KAAG,YAAY;yBAK1B,MAAM,SAAS;QAAE,MAAM,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAG,OAAO;mBAO5D;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE;EAKvC"}

package/dist/sveltekit/public-routes.js

@@ -4,9 +4,10 @@
 // and tag-index loaders stay concept-scoped, keyed by concept id. The index is built in site code
 // from globs, so it stays in the prerender graph and out of the runtime Worker.
 import { error } from '@sveltejs/kit';
+import { buildSeoMeta } from '../delivery/seo.js';
 /** Build the public loaders for a site's unified index. */
 export function createPublicRoutes(deps) {
-    const { site, render, origin } = deps;
+    const { site, render, origin, siteName, description, feeds } = deps;
     /** Resolve one concept's index by id, or a 404 (the route names an unconfigured concept). */
     function indexOf(conceptId) {
         const index = site.concept(conceptId);
@@ -20,7 +21,19 @@ export function createPublicRoutes(deps) {
         if (!entry)
             throw error(404, `Not found: ${event.url.pathname}`);
         const { newer, older } = site.adjacent(entry);
-        return { entry, html: await render(entry.body, { stagger: true }), canonicalUrl: origin + entry.permalink, newer, older };
+        const canonicalUrl = origin + entry.permalink;
+        // A dated entry is an article; an undated one (a page) is a website.
+        const seo = buildSeoMeta({
+            title: entry.title,
+            description: entry.frontmatter.description || entry.excerpt || description,
+            canonicalUrl,
+            siteName,
+            type: entry.date ? 'article' : 'website',
+            ...(entry.date ? { published: entry.date } : {}),
+            ...(entry.updated ? { modified: entry.updated } : {}),
+            feeds,
+        });
+        return { entry, html: await render(entry.body, { stagger: true }), canonicalUrl, seo, newer, older };
     }
     /** The chronological archive for one concept: every non-draft summary, newest-first. */
     function archiveLoad(conceptId) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glw907/cairn-cms",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Embedded, magic-link, GitHub-committing CMS for SvelteKit/Cloudflare sites.",
   "type": "module",
   "sideEffects": [
@@ -48,6 +48,11 @@
       "svelte": "./dist/components/index.js",
       "default": "./dist/components/index.js"
     },
+    "./delivery": {
+      "types": "./dist/delivery/index.d.ts",
+      "svelte": "./dist/delivery/index.js",
+      "default": "./dist/delivery/index.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -79,6 +84,7 @@
     "remark-gfm": "^4",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
+    "remark-stringify": "^11.0.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.1.0",
     "yaml": "^2"

package/src/lib/components/ComponentForm.svelte

@@ -0,0 +1,178 @@
+<!--
+@component
+The schema-driven fill form for one component. It holds the working ComponentValues, seeded from
+emptyValues(def), and renders attribute fields and the title/body and other non-repeatable slots.
+Submit (Task 6) serializes and validates through buildComponentInsert and calls onInsert with the
+markdown. Back returns to the picker. This is not a nested HTML form; Insert calls a callback.
+-->
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { emptyValues, type ComponentDef } from '../render/registry.js';
+  import { buildComponentInsert } from '../render/component-insert.js';
+  import type { IconSet } from '../render/glyph.js';
+  import IconPicker from './IconPicker.svelte';
+
+  interface Props {
+    def: ComponentDef;
+    icons?: IconSet;
+    /** Called with the serialized markdown when the form validates. */
+    onInsert: (markdown: string) => void;
+    /** Return to the picker. */
+    onBack: () => void;
+  }
+
+  let { def, icons, onInsert, onBack }: Props = $props();
+
+  // Working values, seeded once from the schema. $state makes the nested records deeply reactive.
+  // untrack marks the seed as a deliberate one-time read of the initial def, not a reactive miss.
+  let values = $state(untrack(() => emptyValues(def)));
+
+  const attributes = $derived(def.attributes ?? []);
+  // Non-repeatable slots render here; the repeatable list is handled separately.
+  const flatSlots = $derived((def.slots ?? []).filter((s) => s.kind !== 'repeatable'));
+  const repeatableSlots = $derived((def.slots ?? []).filter((s) => s.kind === 'repeatable'));
+
+  // The live $state proxy array for a repeatable slot, so push/splice stay reactive.
+  function slotItems(name: string): string[] {
+    const v = values.slots[name];
+    return Array.isArray(v) ? v : [];
+  }
+
+  // Typed accessors over the unions so explicit value targets stay sound.
+  function asString(key: string): string {
+    const v = values.attributes[key];
+    return typeof v === 'string' ? v : '';
+  }
+  function asBool(key: string): boolean {
+    return values.attributes[key] === true;
+  }
+  function slotString(name: string): string {
+    const v = values.slots[name];
+    return typeof v === 'string' ? v : '';
+  }
+
+  // Field-keyed validation errors from the last submit, keyed by attribute key or slot name.
+  let errors = $state<Record<string, string>>({});
+
+  // Serialize and validate through the pure helper. On success clear errors and emit the markdown;
+  // on failure keep the field-keyed errors so each field can show its message and insert nothing.
+  async function submit() {
+    const result = await buildComponentInsert(def, values);
+    if (result.ok) {
+      errors = {};
+      onInsert(result.markdown);
+    } else {
+      errors = result.errors;
+    }
+  }
+</script>
+
+<div class="flex flex-col gap-3">
+  <div class="flex items-center justify-between">
+    <h3 class="text-sm font-semibold">{def.label}</h3>
+    <button type="button" class="btn btn-ghost btn-xs" onclick={onBack}>Back</button>
+  </div>
+
+  {#each attributes as field (field.key)}
+    {#if field.type === 'boolean'}
+      <label class="label cursor-pointer justify-start gap-2">
+        <input
+          class="checkbox checkbox-sm"
+          type="checkbox"
+          aria-label={field.label}
+          aria-invalid={Boolean(errors[field.key])}
+          aria-describedby={errors[field.key] ? `err-${field.key}` : undefined}
+          checked={asBool(field.key)}
+          onchange={(e) => (values.attributes[field.key] = e.currentTarget.checked)}
+        />
+        <span class="text-sm">{field.label}</span>
+      </label>
+    {:else if field.type === 'select'}
+      <label class="flex flex-col gap-1">
+        <span class="text-sm font-medium">{field.label}</span>
+        <select
+          class="select"
+          aria-label={field.label}
+          aria-invalid={Boolean(errors[field.key])}
+          aria-describedby={errors[field.key] ? `err-${field.key}` : undefined}
+          value={asString(field.key)}
+          onchange={(e) => (values.attributes[field.key] = e.currentTarget.value)}
+        >
+          {#if !field.required}<option value="">—</option>{/if}
+          {#each field.options ?? [] as opt (opt)}<option value={opt}>{opt}</option>{/each}
+        </select>
+      </label>
+    {:else if field.type === 'icon' && icons}
+      <div class="flex flex-col gap-1">
+        <span class="text-sm font-medium">{field.label}</span>
+        <IconPicker
+          {icons}
+          value={asString(field.key)}
+          required={field.required ?? false}
+          onChange={(name) => (values.attributes[field.key] = name)}
+        />
+      </div>
+    {:else}
+      <label class="flex flex-col gap-1">
+        <span class="text-sm font-medium">{field.label}</span>
+        <input
+          class="input"
+          aria-label={field.label}
+          aria-invalid={Boolean(errors[field.key])}
+          aria-describedby={errors[field.key] ? `err-${field.key}` : undefined}
+          value={asString(field.key)}
+          oninput={(e) => (values.attributes[field.key] = e.currentTarget.value)}
+        />
+      </label>
+    {/if}
+    {#if errors[field.key]}<span id={`err-${field.key}`} role="alert" class="text-error text-xs">{errors[field.key]}</span>{/if}
+  {/each}
+
+  {#each flatSlots as slot (slot.name)}
+    {#if slot.kind === 'markdown'}
+      <label class="flex flex-col gap-1">
+        <span class="text-sm font-medium">{slot.label}</span>
+        <textarea
+          class="textarea"
+          aria-label={slot.label}
+          aria-invalid={Boolean(errors[slot.name])}
+          aria-describedby={errors[slot.name] ? `err-${slot.name}` : undefined}
+          rows={3}
+          value={slotString(slot.name)}
+          oninput={(e) => (values.slots[slot.name] = e.currentTarget.value)}
+        ></textarea>
+      </label>
+    {:else}
+      <label class="flex flex-col gap-1">
+        <span class="text-sm font-medium">{slot.label}</span>
+        <input
+          class="input"
+          aria-label={slot.label}
+          aria-invalid={Boolean(errors[slot.name])}
+          aria-describedby={errors[slot.name] ? `err-${slot.name}` : undefined}
+          value={slotString(slot.name)}
+          oninput={(e) => (values.slots[slot.name] = e.currentTarget.value)}
+        />
+      </label>
+    {/if}
+    {#if errors[slot.name]}<span id={`err-${slot.name}`} role="alert" class="text-error text-xs">{errors[slot.name]}</span>{/if}
+  {/each}
+
+  {#each repeatableSlots as slot (slot.name)}
+    {@const items = slotItems(slot.name)}
+    <fieldset class="rounded-box border border-base-300 flex flex-col gap-2 p-2">
+      <legend class="text-sm font-medium">{slot.label}</legend>
+      <!-- Index key is deliberate: items are bare strings with no stable id, so the value bindings and splice/push are index-based by design. -->
+      {#each items as _, i (i)}
+        <div class="flex items-center gap-2">
+          <input class="input input-sm flex-1" aria-label={`${slot.label} item`} bind:value={items[i]} />
+          <button type="button" class="btn btn-ghost btn-sm" aria-label={`Remove item ${i + 1}`} onclick={() => items.splice(i, 1)}>✕</button>
+        </div>
+      {/each}
+      <button type="button" class="btn btn-sm self-start" onclick={() => items.push('')}>Add item</button>
+      {#if errors[slot.name]}<span id={`err-${slot.name}`} role="alert" class="text-error text-xs">{errors[slot.name]}</span>{/if}
+    </fieldset>
+  {/each}
+
+  <button type="button" class="btn btn-primary btn-sm mt-2" onclick={submit}>Insert</button>
+</div>

package/src/lib/components/ComponentInsertDialog.svelte

@@ -0,0 +1,92 @@
+<!--
+@component
+The Insert control and its modal. The picker lists each actionable component with its description and
+intended use. A component with a schema opens the guided ComponentForm; a template-only component
+inserts directly; a component with neither is not listed. Built on a native <dialog> for focus
+trapping and Escape, following the dropdown's a11y conventions used elsewhere in the admin.
+-->
+<script lang="ts">
+  import type { ComponentRegistry, ComponentDef } from '../render/registry.js';
+  import type { IconSet } from '../render/glyph.js';
+  import ComponentForm from './ComponentForm.svelte';
+
+  interface Props {
+    /** The site's component registry. */
+    registry?: ComponentRegistry;
+    /** Insert markdown at the editor cursor. */
+    insert: (text: string) => void;
+    /** The site's icon set, for icon fields. */
+    icons?: IconSet;
+  }
+
+  let { registry, insert, icons }: Props = $props();
+
+  let dialog = $state<HTMLDialogElement | null>(null);
+  let picked = $state<ComponentDef | null>(null);
+
+  function hasSchema(def: ComponentDef): boolean {
+    return (def.attributes?.length ?? 0) > 0 || (def.slots?.length ?? 0) > 0;
+  }
+  function actionable(def: ComponentDef): boolean {
+    return hasSchema(def) || Boolean(def.insertTemplate);
+  }
+
+  const defs = $derived((registry?.defs ?? []).filter(actionable));
+
+  function open() {
+    picked = null;
+    dialog?.showModal();
+  }
+  function close() {
+    picked = null;
+    dialog?.close();
+  }
+  function choose(def: ComponentDef) {
+    if (hasSchema(def)) {
+      picked = def;
+    } else {
+      insert(def.insertTemplate ?? '');
+      close();
+    }
+  }
+  function onInsert(markdown: string) {
+    insert(markdown);
+    close();
+  }
+</script>
+
+{#if defs.length > 0}
+  <button type="button" class="btn btn-sm btn-ghost" aria-haspopup="dialog" aria-label="Insert component" onclick={open}>Insert</button>
+
+  <dialog class="modal" aria-labelledby="cairn-insert-dialog-title" bind:this={dialog} onclose={() => (picked = null)}>
+    <div class="modal-box">
+      <div class="mb-3 flex items-center justify-between">
+        <h2 id="cairn-insert-dialog-title" class="text-base font-semibold">Insert component</h2>
+        <button type="button" class="btn btn-ghost btn-sm" aria-label="Close" onclick={close}>✕</button>
+      </div>
+
+      {#if picked}
+        {#key picked}
+          <ComponentForm def={picked} {icons} {onInsert} onBack={() => (picked = null)} />
+        {/key}
+      {:else}
+        <ul class="menu w-full">
+          {#each defs as def (def.name)}
+            <li>
+              <button type="button" onclick={() => choose(def)}>
+                <span class="flex flex-col items-start">
+                  <span class="font-medium">{def.label}</span>
+                  {#if def.description}<span class="text-xs text-[var(--color-muted)]">{def.description}</span>{/if}
+                  {#if def.use}<span class="text-xs text-[var(--color-muted)]">{def.use}</span>{/if}
+                </span>
+              </button>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button tabindex="-1" aria-label="Close">close</button>
+    </form>
+  </dialog>
+{/if}

package/src/lib/components/EditPage.svelte

@@ -7,8 +7,9 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
 <script lang="ts">
   import { untrack } from 'svelte';
   import MarkdownEditor from './MarkdownEditor.svelte';
-  import ComponentPalette from './ComponentPalette.svelte';
+  import ComponentInsertDialog from './ComponentInsertDialog.svelte';
   import type { ComponentRegistry } from '../render/registry.js';
+  import type { IconSet } from '../render/glyph.js';
   import type { EditData } from '../sveltekit/content-routes.js';
   import type { TextareaField, TagsField, FreeTagsField } from '../content/types.js';
   import { sanitizePreviewHtml } from '../render/sanitize.js';
@@ -20,9 +21,11 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
     registry?: ComponentRegistry;
     /** The site's design-accurate render pipeline; the preview pane sanitizes its output. */
     render?: (md: string, opts?: { stagger?: boolean }) => string | Promise<string>;
+    /** The site's icon set, for the guided form's icon fields. */
+    icons?: IconSet;
   }
 
-  let { data, registry, render }: Props = $props();
+  let { data, registry, render, icons }: Props = $props();
 
   // `body` is local editor state seeded once from the prop; it diverges as the user types.
   // untrack() captures the initial value without subscribing to future prop changes.
@@ -76,7 +79,7 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
     <p class="text-xs text-[var(--color-muted)]">{data.label}: {data.id}</p>
   </div>
   <div class="flex items-center gap-2">
-    <ComponentPalette {registry} {insert} />
+    <ComponentInsertDialog {registry} {insert} {icons} />
     <button
       type="button"
       class="btn btn-sm btn-ghost"

package/src/lib/components/IconPicker.svelte

@@ -0,0 +1,51 @@
+<!--
+@component
+A visual icon choice over the site's IconSet. Each glyph is a toggle button; the selected one carries
+aria-pressed. When the field is optional, a None button clears the value. The glyph renders inline from
+the IconSet path data, matching the renderer's 256-unit viewBox.
+-->
+<script lang="ts">
+  import type { IconSet } from '../render/glyph.js';
+
+  interface Props {
+    /** The site's glyph name to SVG path-data map. */
+    icons: IconSet;
+    /** The currently selected glyph name, or '' for none. */
+    value: string;
+    /** When false, a None choice is offered. */
+    required: boolean;
+    /** Called with the new glyph name (or '' for none). */
+    onChange: (name: string) => void;
+  }
+
+  let { icons, value, required, onChange }: Props = $props();
+
+  const names = $derived(Object.keys(icons));
+</script>
+
+<div class="flex flex-wrap gap-2" role="group" aria-label="Icon">
+  {#if !required}
+    <button
+      type="button"
+      class="btn btn-sm"
+      class:btn-primary={value === ''}
+      aria-pressed={value === ''}
+      onclick={() => onChange('')}
+    >None</button>
+  {/if}
+  {#each names as name (name)}
+    <button
+      type="button"
+      class="btn btn-sm gap-1"
+      class:btn-primary={value === name}
+      aria-pressed={value === name}
+      aria-label={name}
+      onclick={() => onChange(name)}
+    >
+      <svg class="ec-glyph" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" width="16" height="16">
+        <path d={icons[name]} />
+      </svg>
+      <span class="text-xs">{name}</span>
+    </button>
+  {/each}
+</div>

package/src/lib/components/index.ts

@@ -7,5 +7,7 @@ export { default as ConceptList } from './ConceptList.svelte';
 export { default as EditPage } from './EditPage.svelte';
 export { default as ManageEditors } from './ManageEditors.svelte';
 export { default as MarkdownEditor } from './MarkdownEditor.svelte';
-export { default as ComponentPalette } from './ComponentPalette.svelte';
+export { default as ComponentInsertDialog } from './ComponentInsertDialog.svelte';
+export { default as ComponentForm } from './ComponentForm.svelte';
+export { default as IconPicker } from './IconPicker.svelte';
 export { default as NavTree } from './NavTree.svelte';

package/src/lib/content/compose.ts

@@ -32,6 +32,7 @@ export function composeRuntime(
     sender: adapter.sender,
     render: adapter.render,
     registry: adapter.registry,
+    icons: adapter.icons,
     navMenu: adapter.navMenu,
     assets: adapter.assets,
     adminPanels,

package/src/lib/content/types.ts

@@ -8,6 +8,7 @@
 // descriptors are plain data so a `load` function can hand them across the server-to-client
 // boundary to the editor form.
 import type { ComponentRegistry } from '../render/registry.js';
+import type { IconSet } from '../render/glyph.js';
 import type { DatePrefix } from './ids.js';
 
 /** Common to every frontmatter field: the frontmatter key, the form label, and whether it is required. */
@@ -151,6 +152,8 @@ export interface CairnAdapter {
   render(md: string, opts?: { stagger?: boolean }): string | Promise<string>;
   /** Directive component registry; the renderer and the future palette derive from it (seam 3). */
   registry?: ComponentRegistry;
+  /** The site's glyph name to SVG path-data map, for the admin icon picker and the renderer. */
+  icons?: IconSet;
   navMenu?: NavMenuConfig;
   assets?: AssetConfig;
 }
@@ -243,6 +246,8 @@ export interface CairnRuntime {
   /** The site's one renderer: the editor preview and every public page call it (design decision 4). */
   render(md: string, opts?: { stagger?: boolean }): string | Promise<string>;
   registry?: ComponentRegistry;
+  /** The site's glyph name to SVG path-data map, for the admin icon picker and the renderer. */
+  icons?: IconSet;
   navMenu?: NavMenuConfig;
   assets?: AssetConfig;
   /** Admin panels contributed by extensions (Mode 2). Empty until Plan 09 wires the dispatch route. */

package/src/lib/delivery/CairnHead.svelte

@@ -0,0 +1,36 @@
+<!--
+@component
+Renders a page's SEO head from a SeoMeta object into <svelte:head>: a title, meta tags, link
+tags, and one escaped JSON-LD script. The title renders from seo.title by default; title={false}
+lets the site own the <title>, and a string overrides it. It carries no CSS, so it pulls in no
+admin styles.
+-->
+<script lang="ts">
+  import type { SeoMeta } from './seo.js';
+  import { jsonLdScript } from './json-ld.js';
+
+  let {
+    /** The plain-data head to render. */
+    seo,
+    /** Title override: a string replaces seo.title, false lets the site own <title>. */
+    title,
+  }: { seo: SeoMeta; title?: string | false } = $props();
+  const titleText = $derived(title === undefined ? seo.title : title);
+</script>
+
+<svelte:head>
+  {#if titleText !== false}
+    <title>{titleText}</title>
+  {/if}
+  {#each seo.meta as m}
+    {#if m.name}
+      <meta name={m.name} content={m.content} />
+    {:else if m.property}
+      <meta property={m.property} content={m.content} />
+    {/if}
+  {/each}
+  {#each seo.links as l}
+    <link rel={l.rel} type={l.type} href={l.href} title={l.title} />
+  {/each}
+  {@html jsonLdScript(seo.jsonLd)}
+</svelte:head>