@glw907/cairn-cms 0.8.0 → 0.10.0

package/dist/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/dist/components/ComponentForm.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type ComponentDef } from '../render/registry.js';
+import type { IconSet } from '../render/glyph.js';
+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;
+}
+/**
+ * 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.
+ */
+declare const ComponentForm: import("svelte").Component<Props, {}, "">;
+type ComponentForm = ReturnType<typeof ComponentForm>;
+export default ComponentForm;
+//# sourceMappingURL=ComponentForm.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentForm.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ComponentForm.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEvE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAIhD,UAAU,KAAK;IACb,GAAG,EAAE,YAAY,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mEAAmE;IACnE,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,4BAA4B;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AA8HH;;;;;GAKG;AACH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/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/dist/components/ComponentInsertDialog.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentRegistry } from '../render/registry.js';
+import type { IconSet } from '../render/glyph.js';
+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;
+}
+/**
+ * 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.
+ */
+declare const ComponentInsertDialog: import("svelte").Component<Props, {}, "">;
+type ComponentInsertDialog = ReturnType<typeof ComponentInsertDialog>;
+export default ComponentInsertDialog;
+//# sourceMappingURL=ComponentInsertDialog.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentInsertDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ComponentInsertDialog.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAgB,MAAM,uBAAuB,CAAC;AAC7E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAIhD,UAAU,KAAK;IACb,qCAAqC;IACrC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,4CAA4C;IAC5C,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,4CAA4C;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAkFH;;;;;GAKG;AACH,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/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/dist/components/EditPage.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentRegistry } from '../render/registry.js';
+import type { IconSet } from '../render/glyph.js';
 import type { EditData } from '../sveltekit/content-routes.js';
 interface Props {
     /** The edit load's data, plus the site name for the heading. */
@@ -7,15 +8,15 @@ 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 site's icon set, for the guided form's icon fields. */
+    icons?: IconSet;
 }
 /**
- * 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,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAClD,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;IAChF,8DAA8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAsJH;;;;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/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/dist/components/IconPicker.svelte.d.ts

@@ -0,0 +1,20 @@
+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;
+}
+/**
+ * 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.
+ */
+declare const IconPicker: import("svelte").Component<Props, {}, "">;
+type IconPicker = ReturnType<typeof IconPicker>;
+export default IconPicker;
+//# sourceMappingURL=IconPicker.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconPicker.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/IconPicker.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAGhD,UAAU,KAAK;IACb,kDAAkD;IAClD,KAAK,EAAE,OAAO,CAAC;IACf,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AA2BH;;;;GAIG;AACH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}