@glw907/cairn-cms 0.8.0 → 0.10.0

package/dist/render/component-reference.js

@@ -0,0 +1,34 @@
+import { serializeComponent } from './component-grammar.js';
+import { emptyValues } from './registry.js';
+/** Build a self-contained markdown reference (the llms-full.txt shape) for a component registry, for
+ *  authors and for pointing an LLM at one curated file. */
+export function generateComponentReference(registry, opts) {
+    const sections = registry.defs.map((def) => componentSection(def));
+    return `# ${opts.title}\n\n> ${opts.summary}\n\n${sections.join('\n\n')}\n`;
+}
+function componentSection(def) {
+    const lines = [`## ${def.label} (\`:::${def.name}\`)`, '', def.description ?? ''];
+    if (def.use)
+        lines.push('', `**When to use:** ${def.use}`);
+    lines.push('', '```', serializeComponent(def, exampleValues(def)), '```');
+    return lines.join('\n');
+}
+/** Seed example values that show every declared field: an ellipsis for strings, one sample list item. */
+function exampleValues(def) {
+    const values = emptyValues(def);
+    for (const field of def.attributes ?? []) {
+        if (field.type === 'boolean')
+            values.attributes[field.key] = false;
+        else
+            values.attributes[field.key] = field.options?.[0] ?? '…';
+    }
+    for (const slot of def.slots ?? []) {
+        if (slot.kind === 'repeatable')
+            values.slots[slot.name] = ['…'];
+        else if (slot.name === 'title')
+            values.slots[slot.name] = 'Title';
+        else
+            values.slots[slot.name] = '…';
+    }
+    return values;
+}

package/dist/render/component-validate.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentDef } from './registry.js';
+/** A validation verdict: ok, or field-keyed error messages. */
+export type ComponentValidation = {
+    ok: true;
+} | {
+    ok: false;
+    errors: Record<string, string>;
+};
+export declare function validateComponent(markdown: string, def: ComponentDef): Promise<ComponentValidation>;
+//# sourceMappingURL=component-validate.d.ts.map

package/dist/render/component-validate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-validate.d.ts","sourceRoot":"","sources":["../../src/lib/render/component-validate.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,+DAA+D;AAC/D,MAAM,MAAM,mBAAmB,GAAG;IAAE,EAAE,EAAE,IAAI,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,KAAK,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,CAAC;AAE/F,wBAAsB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,YAAY,GAAG,OAAO,CAAC,mBAAmB,CAAC,CA6BzG"}

package/dist/render/component-validate.js

@@ -0,0 +1,30 @@
+import { parseComponent, parseRawAttributeKeys } from './component-grammar.js';
+export async function validateComponent(markdown, def) {
+    const values = await parseComponent(markdown, def);
+    const errors = {};
+    const declared = new Set((def.attributes ?? []).map((f) => f.key));
+    for (const field of def.attributes ?? []) {
+        const v = values.attributes[field.key];
+        const filled = field.type === 'boolean' ? true : typeof v === 'string' && v !== '';
+        if (field.required && !filled) {
+            errors[field.key] = `${field.label} is required.`;
+            continue;
+        }
+        if (field.type === 'select' && typeof v === 'string' && v !== '' && !(field.options ?? []).includes(v)) {
+            errors[field.key] = `${field.label} must be one of: ${(field.options ?? []).join(', ')}.`;
+        }
+    }
+    for (const key of parseRawAttributeKeys(markdown, def)) {
+        if (!declared.has(key))
+            errors[key] = `Unknown attribute "${key}".`;
+    }
+    for (const slot of def.slots ?? []) {
+        if (!slot.required)
+            continue;
+        const v = values.slots[slot.name];
+        const filled = Array.isArray(v) ? v.length > 0 : typeof v === 'string' && v !== '';
+        if (!filled)
+            errors[slot.name] = `${slot.label} is required.`;
+    }
+    return Object.keys(errors).length ? { ok: false, errors } : { ok: true };
+}

package/dist/render/pipeline.d.ts

@@ -8,7 +8,7 @@ export interface RendererOptions {
 }
 /** Compose a site's render pipeline from its component registry: directive syntax to
  *  stamped markers to registry-built hast. Returns `renderMarkdown` plus the remark/
- *  rehype plugin arrays (so the Carta editor preview can reuse the exact same set). */
+ *  rehype plugin arrays (so the admin editor preview can reuse the exact same set). */
 export declare function createRenderer(registry: ComponentRegistry, options?: RendererOptions): {
     remarkPlugins: PluggableList;
     rehypePlugins: PluggableList;

package/dist/render/pipeline.js

@@ -10,7 +10,7 @@ import { remarkDirectiveStamp } from './remark-directives.js';
 import { rehypeDispatch } from './rehype-dispatch.js';
 /** Compose a site's render pipeline from its component registry: directive syntax to
  *  stamped markers to registry-built hast. Returns `renderMarkdown` plus the remark/
- *  rehype plugin arrays (so the Carta editor preview can reuse the exact same set). */
+ *  rehype plugin arrays (so the admin editor preview can reuse the exact same set). */
 export function createRenderer(registry, options = {}) {
     const remarkPlugins = [remarkDirective, [remarkDirectiveStamp, registry]];
     const rehypePlugins = [rehypeRaw, [rehypeDispatch, registry, options.stagger], rehypeSlug];

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/render/sanitize.js

@@ -1,5 +1,5 @@
-// The live preview's sanitize floor. Carta runs with `sanitizer: false` behind the MarkdownEditor
-// seam, so the admin preview pane is the one barrier between editor-authored markdown and the DOM.
+// The live preview's sanitize floor. The MarkdownEditor edits raw markdown and never sanitizes,
+// so the admin preview pane is the one barrier between editor-authored markdown and the DOM.
 // DOMPurify needs a DOM, and the preview renders only in the browser after mount, so DOMPurify
 // loads through a dynamic import: the module never evaluates a DOM library on the Worker, and a
 // server import of this file pulls in nothing.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glw907/cairn-cms",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Embedded, magic-link, GitHub-committing CMS for SvelteKit/Cloudflare sites.",
   "type": "module",
   "sideEffects": [
@@ -56,13 +56,18 @@
   ],
   "peerDependencies": {
     "@sveltejs/kit": "^2",
-    "carta-md": "^4.11",
     "svelte": "^5.0.0"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.0",
     "@rodrigodagostino/svelte-sortable-list": "^2.1.17",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
+    "codemirror": "^6.0.2",
     "dompurify": "^3.4.7",
     "gray-matter": "^4",
     "hastscript": "^9.0.1",
@@ -74,6 +79,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"
@@ -88,7 +94,6 @@
     "@types/node": "^22.19.19",
     "@vitest/browser": "^4.1.7",
     "@vitest/browser-playwright": "^4.1.7",
-    "carta-md": "^4.11",
     "playwright": "^1.60.0",
     "publint": "^0.3.21",
     "svelte": "^5.55",

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

@@ -1,14 +1,15 @@
 <!--
 @component
-The differentiated editor: the per-concept frontmatter form (from `data.fields`) beside the Carta
+The differentiated editor: the per-concept frontmatter form (from `data.fields`) beside the
 markdown editor and a live, design-accurate preview. The whole surface is one form posting to the
 `?/save` action; the preview toggle persists per user in localStorage (spec §7.6).
 -->
 <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';
@@ -18,13 +19,13 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
     data: EditData & { siteName: string };
     /** The site's component registry, for the insert palette. */
     registry?: ComponentRegistry;
-    /** Carta preview plugins from the adapter, for the design-accurate preview. */
-    preview?: unknown[];
     /** 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, preview = [], 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.
@@ -46,7 +47,7 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
   }
 
   // Render the design-accurate preview as the body changes, debounced, and sanitize before the DOM.
-  // The sanitize is the one barrier between editor-authored markdown and the page (Carta is unsanitized).
+  // The sanitize is the one barrier between editor-authored markdown and the page (the editor is unsanitized).
   // 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;
@@ -78,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"
@@ -103,7 +104,7 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
 
   <div class="lg:order-1">
     <div class="rounded-box border border-base-300 bg-base-100 overflow-hidden">
-      <MarkdownEditor bind:value={body} name="body" plugins={preview} registerInsert={(fn) => (insert = fn)} />
+      <MarkdownEditor bind:value={body} name="body" registerInsert={(fn) => (insert = fn)} />
     </div>
     {#if showPreview}
       <section

package/src/lib/components/EditorToolbar.svelte

@@ -0,0 +1,61 @@
+<!--
+@component
+The editor's formatting toolbar: bold, italic, heading, link, bulleted list, quote, code. Each button
+asks the host to apply a markdown transform to the current selection. Carta supplied this row before;
+cairn owns it now so the edit surface stays swappable. The glyphs are stroke SVG icons in the admin's
+house style (24x24 viewBox, `currentColor`, round caps), so the row matches the rest of the surface.
+-->
+<script lang="ts">
+  import type { FormatKind } from './markdown-format.js';
+
+  interface Props {
+    /** Apply a markdown transform to the editor's current selection. */
+    format: (kind: FormatKind) => void;
+  }
+
+  let { format }: Props = $props();
+
+  // Each icon is a set of stroke `<path>` d-strings rendered into the shared 24x24 svg below, so the
+  // markup stays declarative (no per-icon raw html). Paths follow the house outline style.
+  const buttons: { kind: FormatKind; label: string; paths: string[] }[] = [
+    { kind: 'bold', label: 'Bold', paths: ['M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8'] },
+    { kind: 'italic', label: 'Italic', paths: ['M19 4h-9', 'M14 20H5', 'M15 4 9 20'] },
+    { kind: 'heading', label: 'Heading', paths: ['M6 4v16', 'M18 4v16', 'M6 12h12'] },
+    {
+      kind: 'link',
+      label: 'Link',
+      paths: [
+        'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71',
+        'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
+      ],
+    },
+    { kind: 'ul', label: 'Bulleted list', paths: ['M8 6h13', 'M8 12h13', 'M8 18h13', 'M3 6h.01', 'M3 12h.01', 'M3 18h.01'] },
+    {
+      kind: 'quote',
+      label: 'Quote',
+      paths: [
+        'M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1 1 1 0 0 0 1 1 4 4 0 0 0 4-4V5a2 2 0 0 0-2-2z',
+        'M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1 1 1 0 0 0 1 1 4 4 0 0 0 4-4V5a2 2 0 0 0-2-2z',
+      ],
+    },
+    { kind: 'code', label: 'Code', paths: ['M16 18l6-6-6-6', 'M8 6l-6 6 6 6'] },
+  ];
+</script>
+
+<div class="border-base-300 bg-base-200 flex gap-1 border-b p-1" role="toolbar" aria-label="Formatting">
+  {#each buttons as button (button.kind)}
+    <button
+      type="button"
+      class="btn btn-ghost btn-sm btn-square"
+      aria-label={button.label}
+      title={button.label}
+      onclick={() => format(button.kind)}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+        {#each button.paths as d (d)}
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={d} />
+        {/each}
+      </svg>
+    </button>
+  {/each}
+</div>