@glw907/cairn-cms 0.8.0 → 0.9.0

package/dist/components/EditPage.svelte

@@ -1,6 +1,6 @@
 <!--
 @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).
 -->
@@ -18,13 +18,11 @@ 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>;
   }
 
-  let { data, registry, preview = [], render }: Props = $props();
+  let { data, registry, render }: 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 +44,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;
@@ -103,7 +101,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/dist/components/EditPage.svelte.d.ts

@@ -7,15 +7,13 @@ interface Props {
     };
     /** 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 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).
  */

package/dist/components/EditPage.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditPage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/EditPage.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK7D,UAAU,KAAK;IACb,gEAAgE;IAChE,IAAI,EAAE,QAAQ,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,yFAAyF;IACzF,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;CACjF;AAqJH;;;;GAIG;AACH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"EditPage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/EditPage.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK7D,UAAU,KAAK;IACb,gEAAgE;IAChE,IAAI,EAAE,QAAQ,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,yFAAyF;IACzF,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;CACjF;AAqJH;;;;GAIG;AACH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/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>

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

@@ -0,0 +1,15 @@
+import type { FormatKind } from './markdown-format.js';
+interface Props {
+    /** Apply a markdown transform to the editor's current selection. */
+    format: (kind: FormatKind) => void;
+}
+/**
+ * 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.
+ */
+declare const EditorToolbar: import("svelte").Component<Props, {}, "">;
+type EditorToolbar = ReturnType<typeof EditorToolbar>;
+export default EditorToolbar;
+//# sourceMappingURL=EditorToolbar.svelte.d.ts.map

package/dist/components/EditorToolbar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/EditorToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGrD,UAAU,KAAK;IACb,oEAAoE;IACpE,MAAM,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CACpC;AAiDH;;;;;GAKG;AACH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/MarkdownEditor.svelte

@@ -1,81 +1,120 @@
 <!--
 @component
-The `MarkdownEditor` seam (spec §6, seam 5): a thin wrapper over Carta exposing a bindable value
-and a cursor-insert callback. Carta and Shiki are client-only, so the editor mounts after the
-component does; until then the hidden field still carries the value so the form submits correctly.
-Swapping Carta for a bare CodeMirror editor stays a one-file change.
+The `MarkdownEditor` seam (spec §6, seam 5): a thin wrapper over CodeMirror 6 exposing a bindable
+value and a cursor-insert callback. CodeMirror is client-only, so it mounts after the component does
+through a dynamic import; until then a plain textarea carries the value so the form still submits, and
+the hidden field mirrors the value throughout. The edit surface owns its toolbar; the design-accurate
+preview lives in EditPage through the adapter's render. Swapping the editor stays a one-file change.
 -->
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
+  import EditorToolbar from './EditorToolbar.svelte';
+  import { applyMarkdownFormat, type FormatKind } from './markdown-format.js';
 
   interface Props {
     /** The markdown source; bindable so the parent reads edits back. */
     value: string;
     /** The hidden field name the value is mirrored to for form submit. */
     name: string;
-    /** Carta extensions from the adapter, for the design-accurate preview. */
-    plugins?: unknown[];
     /** Receives a `(text) => void` that inserts at the cursor; the palette calls it. */
     registerInsert?: (insert: (text: string) => void) => void;
   }
 
-  let { value = $bindable(), name, plugins = [], registerInsert }: Props = $props();
-
-  // Local structural type for the Carta editing surface this seam uses. carta-md re-exports its
-  // Svelte components from the package entry, so its `Carta` class is not reachable as a named
-  // export under NodeNext; a structural type stays compatible without naming it (the shape
-  // legacy/src/lib/editor.ts relied on, verified against carta-md@4.11).
-  interface CartaInput {
-    getSelection(): { start: number };
-    insertAt(position: number, text: string): void;
-    update(): boolean;
-  }
-  interface CartaLike {
-    input?: CartaInput;
-  }
+  let { value = $bindable(), name, registerInsert }: Props = $props();
 
+  let host = $state<HTMLDivElement | null>(null);
   let mounted = $state(false);
-  // Carta and the MarkdownEditor component load only in the browser, after mount, so the server
-  // bundle never pulls in Carta or Shiki (guarded by the carta-boundary test). The component keeps
-  // its real type, so `value` stays bindable; the Carta constructor is reached through a cast
-  // because the package entry does not surface the class by name.
-  let Editor = $state<(typeof import('carta-md'))['MarkdownEditor'] | null>(null);
-  let carta = $state<CartaLike | null>(null);
+  // The CodeMirror view, untyped at the runtime boundary because @codemirror/* loads only in the
+  // browser. The type-only `import(...)` annotation is erased; the value import is dynamic in onMount,
+  // so the server bundle never pulls CodeMirror (guarded by the editor-boundary test).
+  let view: import('@codemirror/view').EditorView | null = null;
 
   onMount(async () => {
-    const mod = await import('carta-md');
-    const CartaCtor = (
-      mod as unknown as { Carta: new (options: { extensions?: unknown[]; sanitizer: false }) => CartaLike }
-    ).Carta;
-    const instance = new CartaCtor({
-      extensions: plugins,
-      // Sanitization is the site adapter's concern; the seam passes raw markdown through.
-      sanitizer: false,
-    });
-    carta = instance;
-    Editor = mod.MarkdownEditor;
-    // Insert at the current cursor through carta.input once the editor is mounted; fall back to
-    // appending while input is not yet populated (the pre-mount textarea phase).
-    registerInsert?.((text: string) => {
-      const inp = instance.input;
-      if (inp) {
-        const pos = inp.getSelection().start;
-        const prefix = pos > 0 ? '\n\n' : '';
-        inp.insertAt(pos, `${prefix}${text}`);
-        inp.update();
-      } else {
-        value = value ? `${value}\n\n${text}` : text;
-      }
+    const viewMod = await import('@codemirror/view');
+    const stateMod = await import('@codemirror/state');
+    const markdownMod = await import('@codemirror/lang-markdown');
+    const commandsMod = await import('@codemirror/commands');
+    const languageMod = await import('@codemirror/language');
+
+    if (!host) return;
+
+    const { EditorView, keymap } = viewMod;
+    const theme = EditorView.theme(
+      {
+        '&': { backgroundColor: 'var(--color-base-100)', color: 'var(--color-base-content)', fontSize: '0.875rem' },
+        '.cm-content': { fontFamily: 'ui-monospace, monospace', padding: '0.75rem', lineHeight: '1.7' },
+        '.cm-cursor': { borderLeftColor: 'var(--color-primary)' },
+        '&.cm-focused': { outline: '2px solid var(--color-primary)', outlineOffset: '-2px' },
+        '.cm-line': { padding: '0' },
+      },
+      { dark: false },
+    );
+
+    view = new EditorView({
+      parent: host,
+      state: stateMod.EditorState.create({
+        doc: value,
+        extensions: [
+          commandsMod.history(),
+          keymap.of([...commandsMod.defaultKeymap, ...commandsMod.historyKeymap]),
+          markdownMod.markdown(),
+          EditorView.lineWrapping,
+          languageMod.syntaxHighlighting(languageMod.defaultHighlightStyle, { fallback: true }),
+          theme,
+          EditorView.updateListener.of((update) => {
+            if (update.docChanged) value = update.state.doc.toString();
+          }),
+        ],
+      }),
     });
+
+    registerInsert?.(insertAtCursor);
     mounted = true;
   });
+
+  onDestroy(() => view?.destroy());
+
+  // Reconcile an externally reassigned `value` into the mounted editor. A no-op until `view` exists,
+  // and the doc-equality guard ignores the updateListener's own writes so the two never feed back.
+  $effect(() => {
+    const incoming = value;
+    if (!view) return;
+    const current = view.state.doc.toString();
+    if (incoming === current) return;
+    view.dispatch({ changes: { from: 0, to: current.length, insert: incoming } });
+  });
+
+  function insertAtCursor(text: string) {
+    if (!view) {
+      value = value ? `${value}\n\n${text}` : text;
+      return;
+    }
+    const pos = view.state.selection.main.head;
+    const prefix = pos > 0 ? '\n\n' : '';
+    const insert = `${prefix}${text}`;
+    view.dispatch({ changes: { from: pos, insert }, selection: { anchor: pos + insert.length } });
+    view.focus();
+  }
+
+  function applyFormat(kind: FormatKind) {
+    if (!view) return;
+    const { from, to } = view.state.selection.main;
+    const doc = view.state.doc.toString();
+    const next = applyMarkdownFormat(doc, from, to, kind);
+    view.dispatch({
+      changes: { from: 0, to: doc.length, insert: next.doc },
+      selection: { anchor: next.from, head: next.to },
+    });
+    view.focus();
+  }
 </script>
 
-<input type="hidden" {name} value={value} />
+<input type="hidden" {name} {value} />
 
-{#if mounted && Editor && carta}
-  {@const EditorComponent = Editor}
-  <EditorComponent carta={carta as never} bind:value theme="default" mode="tabs" />
-{:else}
-  <textarea class="textarea min-h-64 w-full font-mono text-sm" bind:value aria-label="Markdown source"></textarea>
-{/if}
+<div class="border-base-300 overflow-hidden rounded-box border">
+  <EditorToolbar format={applyFormat} />
+  <div bind:this={host}></div>
+  {#if !mounted}
+    <textarea class="textarea min-h-64 w-full font-mono text-sm" bind:value aria-label="Markdown source"></textarea>
+  {/if}
+</div>

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

@@ -3,16 +3,15 @@ interface Props {
     value: string;
     /** The hidden field name the value is mirrored to for form submit. */
     name: string;
-    /** Carta extensions from the adapter, for the design-accurate preview. */
-    plugins?: unknown[];
     /** Receives a `(text) => void` that inserts at the cursor; the palette calls it. */
     registerInsert?: (insert: (text: string) => void) => void;
 }
 /**
- * The `MarkdownEditor` seam (spec §6, seam 5): a thin wrapper over Carta exposing a bindable value
- * and a cursor-insert callback. Carta and Shiki are client-only, so the editor mounts after the
- * component does; until then the hidden field still carries the value so the form submits correctly.
- * Swapping Carta for a bare CodeMirror editor stays a one-file change.
+ * The `MarkdownEditor` seam (spec §6, seam 5): a thin wrapper over CodeMirror 6 exposing a bindable
+ * value and a cursor-insert callback. CodeMirror is client-only, so it mounts after the component does
+ * through a dynamic import; until then a plain textarea carries the value so the form still submits, and
+ * the hidden field mirrors the value throughout. The edit surface owns its toolbar; the design-accurate
+ * preview lives in EditPage through the adapter's render. Swapping the editor stays a one-file change.
  */
 declare const MarkdownEditor: import("svelte").Component<Props, {}, "value">;
 type MarkdownEditor = ReturnType<typeof MarkdownEditor>;

package/dist/components/MarkdownEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MarkdownEditor.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,oFAAoF;IACpF,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;CAC3D;AAuEH;;;;;GAKG;AACH,QAAA,MAAM,cAAc,gDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"MarkdownEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MarkdownEditor.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,oFAAoF;IACpF,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;CAC3D;AA6GH;;;;;;GAMG;AACH,QAAA,MAAM,cAAc,gDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/markdown-format.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Pure markdown selection transforms for the editor toolbar. Each call maps a document and a
+ * selection range to a new document and a new selection, with no DOM. The MarkdownEditor view
+ * dispatches the result; keeping the logic here lets it unit-test without a browser.
+ */
+export type FormatKind = 'bold' | 'italic' | 'code' | 'heading' | 'quote' | 'ul' | 'link';
+export interface FormatResult {
+    doc: string;
+    from: number;
+    to: number;
+}
+export declare function applyMarkdownFormat(doc: string, from: number, to: number, kind: FormatKind): FormatResult;
+//# sourceMappingURL=markdown-format.d.ts.map

package/dist/components/markdown-format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-format.d.ts","sourceRoot":"","sources":["../../src/lib/components/markdown-format.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;AAE1F,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAKD,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,GAAG,YAAY,CAsBzG"}

package/dist/components/markdown-format.js

@@ -0,0 +1,23 @@
+const WRAP = { bold: '**', italic: '_', code: '`' };
+const LINE_PREFIX = { heading: '# ', quote: '> ', ul: '- ' };
+export function applyMarkdownFormat(doc, from, to, kind) {
+    if (kind === 'bold' || kind === 'italic' || kind === 'code') {
+        const marker = WRAP[kind];
+        const next = doc.slice(0, from) + marker + doc.slice(from, to) + marker + doc.slice(to);
+        return { doc: next, from: from + marker.length, to: to + marker.length };
+    }
+    if (kind === 'link') {
+        const text = doc.slice(from, to);
+        const placeholder = 'url';
+        const lead = `[${text}](`; // everything before the url placeholder
+        const inserted = `${lead}${placeholder})`;
+        const urlStart = from + lead.length;
+        return { doc: doc.slice(0, from) + inserted + doc.slice(to), from: urlStart, to: urlStart + placeholder.length };
+    }
+    const prefix = LINE_PREFIX[kind];
+    const lineStart = doc.lastIndexOf('\n', from - 1) + 1; // 0 when the selection is on the first line
+    const region = doc.slice(lineStart, to);
+    const prefixed = region.replace(/^/gm, prefix);
+    const added = prefixed.length - region.length;
+    return { doc: doc.slice(0, lineStart) + prefixed + doc.slice(to), from: from + prefix.length, to: to + added };
+}

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/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.9.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",
@@ -88,7 +93,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/EditPage.svelte

@@ -1,6 +1,6 @@
 <!--
 @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).
 -->
@@ -18,13 +18,11 @@ 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>;
   }
 
-  let { data, registry, preview = [], render }: Props = $props();
+  let { data, registry, render }: 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 +44,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;
@@ -103,7 +101,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>

package/src/lib/components/MarkdownEditor.svelte

@@ -1,81 +1,120 @@
 <!--
 @component
-The `MarkdownEditor` seam (spec §6, seam 5): a thin wrapper over Carta exposing a bindable value
-and a cursor-insert callback. Carta and Shiki are client-only, so the editor mounts after the
-component does; until then the hidden field still carries the value so the form submits correctly.
-Swapping Carta for a bare CodeMirror editor stays a one-file change.
+The `MarkdownEditor` seam (spec §6, seam 5): a thin wrapper over CodeMirror 6 exposing a bindable
+value and a cursor-insert callback. CodeMirror is client-only, so it mounts after the component does
+through a dynamic import; until then a plain textarea carries the value so the form still submits, and
+the hidden field mirrors the value throughout. The edit surface owns its toolbar; the design-accurate
+preview lives in EditPage through the adapter's render. Swapping the editor stays a one-file change.
 -->
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
+  import EditorToolbar from './EditorToolbar.svelte';
+  import { applyMarkdownFormat, type FormatKind } from './markdown-format.js';
 
   interface Props {
     /** The markdown source; bindable so the parent reads edits back. */
     value: string;
     /** The hidden field name the value is mirrored to for form submit. */
     name: string;
-    /** Carta extensions from the adapter, for the design-accurate preview. */
-    plugins?: unknown[];
     /** Receives a `(text) => void` that inserts at the cursor; the palette calls it. */
     registerInsert?: (insert: (text: string) => void) => void;
   }
 
-  let { value = $bindable(), name, plugins = [], registerInsert }: Props = $props();
-
-  // Local structural type for the Carta editing surface this seam uses. carta-md re-exports its
-  // Svelte components from the package entry, so its `Carta` class is not reachable as a named
-  // export under NodeNext; a structural type stays compatible without naming it (the shape
-  // legacy/src/lib/editor.ts relied on, verified against carta-md@4.11).
-  interface CartaInput {
-    getSelection(): { start: number };
-    insertAt(position: number, text: string): void;
-    update(): boolean;
-  }
-  interface CartaLike {
-    input?: CartaInput;
-  }
+  let { value = $bindable(), name, registerInsert }: Props = $props();
 
+  let host = $state<HTMLDivElement | null>(null);
   let mounted = $state(false);
-  // Carta and the MarkdownEditor component load only in the browser, after mount, so the server
-  // bundle never pulls in Carta or Shiki (guarded by the carta-boundary test). The component keeps
-  // its real type, so `value` stays bindable; the Carta constructor is reached through a cast
-  // because the package entry does not surface the class by name.
-  let Editor = $state<(typeof import('carta-md'))['MarkdownEditor'] | null>(null);
-  let carta = $state<CartaLike | null>(null);
+  // The CodeMirror view, untyped at the runtime boundary because @codemirror/* loads only in the
+  // browser. The type-only `import(...)` annotation is erased; the value import is dynamic in onMount,
+  // so the server bundle never pulls CodeMirror (guarded by the editor-boundary test).
+  let view: import('@codemirror/view').EditorView | null = null;
 
   onMount(async () => {
-    const mod = await import('carta-md');
-    const CartaCtor = (
-      mod as unknown as { Carta: new (options: { extensions?: unknown[]; sanitizer: false }) => CartaLike }
-    ).Carta;
-    const instance = new CartaCtor({
-      extensions: plugins,
-      // Sanitization is the site adapter's concern; the seam passes raw markdown through.
-      sanitizer: false,
-    });
-    carta = instance;
-    Editor = mod.MarkdownEditor;
-    // Insert at the current cursor through carta.input once the editor is mounted; fall back to
-    // appending while input is not yet populated (the pre-mount textarea phase).
-    registerInsert?.((text: string) => {
-      const inp = instance.input;
-      if (inp) {
-        const pos = inp.getSelection().start;
-        const prefix = pos > 0 ? '\n\n' : '';
-        inp.insertAt(pos, `${prefix}${text}`);
-        inp.update();
-      } else {
-        value = value ? `${value}\n\n${text}` : text;
-      }
+    const viewMod = await import('@codemirror/view');
+    const stateMod = await import('@codemirror/state');
+    const markdownMod = await import('@codemirror/lang-markdown');
+    const commandsMod = await import('@codemirror/commands');
+    const languageMod = await import('@codemirror/language');
+
+    if (!host) return;
+
+    const { EditorView, keymap } = viewMod;
+    const theme = EditorView.theme(
+      {
+        '&': { backgroundColor: 'var(--color-base-100)', color: 'var(--color-base-content)', fontSize: '0.875rem' },
+        '.cm-content': { fontFamily: 'ui-monospace, monospace', padding: '0.75rem', lineHeight: '1.7' },
+        '.cm-cursor': { borderLeftColor: 'var(--color-primary)' },
+        '&.cm-focused': { outline: '2px solid var(--color-primary)', outlineOffset: '-2px' },
+        '.cm-line': { padding: '0' },
+      },
+      { dark: false },
+    );
+
+    view = new EditorView({
+      parent: host,
+      state: stateMod.EditorState.create({
+        doc: value,
+        extensions: [
+          commandsMod.history(),
+          keymap.of([...commandsMod.defaultKeymap, ...commandsMod.historyKeymap]),
+          markdownMod.markdown(),
+          EditorView.lineWrapping,
+          languageMod.syntaxHighlighting(languageMod.defaultHighlightStyle, { fallback: true }),
+          theme,
+          EditorView.updateListener.of((update) => {
+            if (update.docChanged) value = update.state.doc.toString();
+          }),
+        ],
+      }),
     });
+
+    registerInsert?.(insertAtCursor);
     mounted = true;
   });
+
+  onDestroy(() => view?.destroy());
+
+  // Reconcile an externally reassigned `value` into the mounted editor. A no-op until `view` exists,
+  // and the doc-equality guard ignores the updateListener's own writes so the two never feed back.
+  $effect(() => {
+    const incoming = value;
+    if (!view) return;
+    const current = view.state.doc.toString();
+    if (incoming === current) return;
+    view.dispatch({ changes: { from: 0, to: current.length, insert: incoming } });
+  });
+
+  function insertAtCursor(text: string) {
+    if (!view) {
+      value = value ? `${value}\n\n${text}` : text;
+      return;
+    }
+    const pos = view.state.selection.main.head;
+    const prefix = pos > 0 ? '\n\n' : '';
+    const insert = `${prefix}${text}`;
+    view.dispatch({ changes: { from: pos, insert }, selection: { anchor: pos + insert.length } });
+    view.focus();
+  }
+
+  function applyFormat(kind: FormatKind) {
+    if (!view) return;
+    const { from, to } = view.state.selection.main;
+    const doc = view.state.doc.toString();
+    const next = applyMarkdownFormat(doc, from, to, kind);
+    view.dispatch({
+      changes: { from: 0, to: doc.length, insert: next.doc },
+      selection: { anchor: next.from, head: next.to },
+    });
+    view.focus();
+  }
 </script>
 
-<input type="hidden" {name} value={value} />
+<input type="hidden" {name} {value} />
 
-{#if mounted && Editor && carta}
-  {@const EditorComponent = Editor}
-  <EditorComponent carta={carta as never} bind:value theme="default" mode="tabs" />
-{:else}
-  <textarea class="textarea min-h-64 w-full font-mono text-sm" bind:value aria-label="Markdown source"></textarea>
-{/if}
+<div class="border-base-300 overflow-hidden rounded-box border">
+  <EditorToolbar format={applyFormat} />
+  <div bind:this={host}></div>
+  {#if !mounted}
+    <textarea class="textarea min-h-64 w-full font-mono text-sm" bind:value aria-label="Markdown source"></textarea>
+  {/if}
+</div>

package/src/lib/components/markdown-format.ts

@@ -0,0 +1,39 @@
+/**
+ * Pure markdown selection transforms for the editor toolbar. Each call maps a document and a
+ * selection range to a new document and a new selection, with no DOM. The MarkdownEditor view
+ * dispatches the result; keeping the logic here lets it unit-test without a browser.
+ */
+export type FormatKind = 'bold' | 'italic' | 'code' | 'heading' | 'quote' | 'ul' | 'link';
+
+export interface FormatResult {
+  doc: string;
+  from: number;
+  to: number;
+}
+
+const WRAP: Record<'bold' | 'italic' | 'code', string> = { bold: '**', italic: '_', code: '`' };
+const LINE_PREFIX: Record<'heading' | 'quote' | 'ul', string> = { heading: '# ', quote: '> ', ul: '- ' };
+
+export function applyMarkdownFormat(doc: string, from: number, to: number, kind: FormatKind): FormatResult {
+  if (kind === 'bold' || kind === 'italic' || kind === 'code') {
+    const marker = WRAP[kind];
+    const next = doc.slice(0, from) + marker + doc.slice(from, to) + marker + doc.slice(to);
+    return { doc: next, from: from + marker.length, to: to + marker.length };
+  }
+
+  if (kind === 'link') {
+    const text = doc.slice(from, to);
+    const placeholder = 'url';
+    const lead = `[${text}](`; // everything before the url placeholder
+    const inserted = `${lead}${placeholder})`;
+    const urlStart = from + lead.length;
+    return { doc: doc.slice(0, from) + inserted + doc.slice(to), from: urlStart, to: urlStart + placeholder.length };
+  }
+
+  const prefix = LINE_PREFIX[kind];
+  const lineStart = doc.lastIndexOf('\n', from - 1) + 1; // 0 when the selection is on the first line
+  const region = doc.slice(lineStart, to);
+  const prefixed = region.replace(/^/gm, prefix);
+  const added = prefixed.length - region.length;
+  return { doc: doc.slice(0, lineStart) + prefixed + doc.slice(to), from: from + prefix.length, to: to + added };
+}

package/src/lib/render/pipeline.ts

@@ -19,7 +19,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 function createRenderer(registry: ComponentRegistry, options: RendererOptions = {}) {
   const remarkPlugins: PluggableList = [remarkDirective, [remarkDirectiveStamp, registry]];
   const rehypePlugins: PluggableList = [rehypeRaw, [rehypeDispatch, registry, options.stagger], rehypeSlug];

package/src/lib/render/sanitize.ts

@@ -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.