@glw907/cairn-cms 0.5.0 → 0.5.1

package/src/lib/components/ComponentPalette.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  // The insert-component palette (R10). Reads the site's component registry (R10a) and inserts a
+  // scaffolded directive snippet at the cursor via the `insert` callback. DaisyUI dropdown so it
+  // matches the Warm Stone admin theme. Shown only when the site supplies a non-empty registry; a
+  // plain-markdown site (e.g. 907.life) passes no registry and this renders nothing.
+  import type { ComponentRegistry } from '../render';
+
+  let { registry, insert }: { registry?: ComponentRegistry; insert: (template: string) => void } =
+    $props();
+
+  const defs = $derived(registry?.defs ?? []);
+</script>
+
+{#if defs.length > 0}
+  <div class="dropdown">
+    <button type="button" tabindex="0" class="btn btn-sm btn-ghost">Insert ▾</button>
+    <ul
+      class="dropdown-content menu z-10 mt-1 w-72 rounded-box border border-base-300 bg-base-100 p-2 shadow"
+    >
+      {#each defs as def (def.name)}
+        <li>
+          <button
+            type="button"
+            class="flex flex-col items-start gap-0.5"
+            onclick={() => insert(def.insertTemplate)}
+          >
+            <span class="font-medium">{def.label}</span>
+            <span class="text-xs opacity-60">{def.description}</span>
+          </button>
+        </li>
+      {/each}
+    </ul>
+  </div>
+{/if}

package/src/lib/components/EditPage.svelte

@@ -1,15 +1,27 @@
 <script lang="ts">
-  // The editor: a per-field frontmatter form (driven by the adapter's `fields`) plus a Carta
-  // markdown editor whose preview runs the site's plugin set (passed as `preview`). Data comes
-  // from `editLoad` merged with `adminLayoutLoad` (siteName); `carta-md` is a peer dependency.
+  // The editor: a per-field frontmatter form (driven by the adapter's `fields`) beside a Carta
+  // markdown editor whose preview runs the site plugin set (`preview`). Content-forward layout:
+  // the editor is the prominent column, frontmatter sits in a side column (R4). A cairn control
+  // row hosts the insert-component palette (R10) and the preview toggle (R12); basic formatting
+  // stays on Carta's built-in toolbar (R11). Data comes from `editLoad` merged with the layout
+  // load (siteName); `carta-md` is a peer dependency.
   import { onMount } from 'svelte';
   import { Carta, MarkdownEditor } from 'carta-md';
   import 'carta-md/default.css';
   import { previewCartaOptions, type PreviewPlugins } from '../carta';
   import type { CairnField } from '../adapter';
+  import type { ComponentRegistry } from '../render';
   import type { EditData } from '../sveltekit';
+  import { cartaEditor } from '../editor';
+  import { dateInputValue } from '../frontmatter';
+  import ComponentPalette from './ComponentPalette.svelte';
 
-  let { data, preview }: { data: EditData & { siteName: string }; preview: PreviewPlugins } = $props();
+  let {
+    data,
+    preview,
+    registry,
+  }: { data: EditData & { siteName: string }; preview: PreviewPlugins; registry?: ComponentRegistry } =
+    $props();
 
   // Body is editable state; the Carta editor's preview runs the exact site plugin set, so it
   // matches the live page. A hidden input carries the current value into the form.
@@ -18,14 +30,24 @@
 
   // svelte-ignore state_referenced_locally (the preview plugin set is fixed for the load)
   const carta = new Carta(previewCartaOptions(preview));
+  const editor = cartaEditor(() => carta);
 
-  // Carta's MarkdownEditor must not render on the worker (it pulls Shiki). onMount fires only
-  // in the browser, so SSR renders the plain textarea and the client swaps in the editor.
-  // This is the kit-free equivalent of the per-site route's `$app/environment` `browser` guard.
+  // Carta's MarkdownEditor must not render on the worker (it pulls Shiki). onMount fires only in
+  // the browser, so SSR renders the plain textarea and the client swaps in the editor.
   let mounted = $state(false);
+
+  // Preview toggle (R12), persisted per user. 'split' shows the live preview beside the editor;
+  // 'tabs' foregrounds the editor full width with the preview one click away.
+  let mode = $state<'split' | 'tabs'>('split');
   onMount(() => {
     mounted = true;
+    const saved = localStorage.getItem('cairn-admin:preview');
+    if (saved === 'tabs' || saved === 'split') mode = saved;
   });
+  function togglePreview() {
+    mode = mode === 'split' ? 'tabs' : 'split';
+    localStorage.setItem('cairn-admin:preview', mode);
+  }
 
   // svelte-ignore state_referenced_locally (form defaults from the initial load)
   const fm = data.frontmatter as Record<string, unknown>;
@@ -39,31 +61,58 @@
   function fmFreeTags(key: string): string {
     return Array.isArray(fm[key]) ? (fm[key] as unknown[]).map(String).join(', ') : '';
   }
+
+  // Kind-aware header: a story leads with its date; a page leads with its slug/path.
+  const subtitle = $derived(
+    data.kind === 'page'
+      ? `Page · ${data.path}`
+      : `${data.label} · ${dateInputValue(fm['date']) || data.path}`,
+  );
 </script>
 
 <svelte:head>
-  <title>Edit {data.title} · {data.siteName} CMS</title>
+  <title>{data.isNew ? `New ${data.label} entry` : `Edit ${data.title}`} · {data.siteName} CMS</title>
 </svelte:head>
 
 <div class="flex items-center justify-between gap-4">
   <div>
-    <a href="/admin" class="text-sm opacity-70 hover:underline">← Back</a>
-    <h1 class="mt-1 text-2xl font-bold">{data.title}</h1>
-    <p class="text-sm opacity-60">{data.label} · {data.path}</p>
+    <a href="/admin/{data.type}" class="text-sm opacity-70 hover:underline">← Back to {data.label}</a>
+    <h1 class="mt-1 text-2xl font-bold">{data.isNew ? `New ${data.label} entry` : data.title}</h1>
+    <p class="text-sm opacity-60">{subtitle}</p>
   </div>
 </div>
 
 {#if data.saved}
-  <div class="alert alert-success mt-6"><span>Saved — committed to main; the site will redeploy.</span></div>
+  <div class="alert alert-success mt-6"><span>Saved. Committed to main; the site will redeploy.</span></div>
 {:else if data.error}
   <div class="alert alert-error mt-6"><span>{data.error}</span></div>
 {/if}
 
-<form method="POST" action="/admin/save" class="mt-6 flex flex-col gap-5">
+<form method="POST" action="/admin/save" class="mt-6 flex flex-col gap-5 lg:grid lg:grid-cols-[1fr_20rem] lg:items-start">
   <input type="hidden" name="type" value={data.type} />
   <input type="hidden" name="id" value={data.id} />
+  {#if data.isNew}<input type="hidden" name="new" value="1" />{/if}
+
+  <!-- Editor column (content-forward: first and widest) -->
+  <div class="flex flex-col gap-3 lg:order-1">
+    <div class="flex items-center justify-between gap-2">
+      <ComponentPalette {registry} insert={(template) => editor.insertComponent(template)} />
+      <button type="button" class="btn btn-sm btn-ghost" onclick={togglePreview}>
+        {mode === 'split' ? 'Hide preview' : 'Show preview'}
+      </button>
+    </div>
+    <div class="rounded-box border border-base-300 bg-base-100 p-2">
+      <input type="hidden" name="body" value={body} />
+      {#if mounted}
+        <MarkdownEditor {carta} bind:value={body} {mode} />
+      {:else}
+        <textarea bind:value={body} rows="20" class="textarea w-full font-mono"></textarea>
+      {/if}
+    </div>
+  </div>
 
-  <fieldset class="grid gap-4 rounded-box border border-base-300 bg-base-100 p-6">
+  <!-- Frontmatter side column -->
+  <fieldset class="grid gap-4 rounded-box border border-base-300 bg-base-100 p-6 lg:order-2">
     {#each data.fields as field (field.name)}
       {#if field.type === 'text' || field.type === 'date'}
         <label class="flex flex-col gap-1">
@@ -72,7 +121,7 @@
             type={field.type === 'date' ? 'date' : 'text'}
             name={field.name}
             required={field.required}
-            value={fmString(field.name)}
+            value={field.type === 'date' ? dateInputValue(fm[field.name]) : fmString(field.name)}
             class="input w-full"
           />
         </label>
@@ -108,18 +157,7 @@
         </label>
       {/if}
     {/each}
-  </fieldset>
-
-  <div class="rounded-box border border-base-300 bg-base-100 p-2">
-    <input type="hidden" name="body" value={body} />
-    {#if mounted}
-      <MarkdownEditor {carta} bind:value={body} mode="tabs" />
-    {:else}
-      <textarea bind:value={body} rows="20" class="textarea w-full font-mono"></textarea>
-    {/if}
-  </div>
 
-  <div class="flex justify-end">
-    <button type="submit" class="btn btn-primary">Save &amp; commit</button>
-  </div>
+    <button type="submit" class="btn btn-primary mt-2">{data.isNew ? 'Create & commit' : 'Save & commit'}</button>
+  </fieldset>
 </form>

package/src/lib/components/NavTree.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  // The navigation tree editor (Pass L). Edits a local copy of the menu tree and posts the whole
+  // tree as JSON to the `save` action. DaisyUI primitives under the Warm Stone admin theme. Drag a
+  // row up or down to reorder within its level; use Indent/Outdent to nest under the previous
+  // sibling or promote a level (capped at the menu's maxDepth). The engine validates on save.
+  import { untrack } from 'svelte';
+  import type { NavLoadData } from '../sveltekit';
+  import type { NavNode } from '../nav';
+
+  let { data }: { data: NavLoadData } = $props();
+
+  // A flat, ordered working model is far simpler to drag-edit than a recursive one: each row
+  // carries an explicit depth, and the tree is rebuilt from (order + depth) only at submit time.
+  interface Row {
+    id: number;
+    depth: number;
+    label: string;
+    url: string;
+  }
+
+  let nextId = 1;
+  function flatten(nodes: NavNode[], depth: number, out: Row[]): Row[] {
+    for (const n of nodes) {
+      out.push({ id: nextId++, depth, label: n.label, url: n.url ?? '' });
+      if (n.children?.length) flatten(n.children, depth + 1, out);
+    }
+    return out;
+  }
+
+  let rows = $state<Row[]>(untrack(() => flatten(data.tree, 0, [])));
+  const maxDepthIndex = $derived(data.menu.maxDepth - 1); // depth is 0-based here
+
+  // Rebuild the nested tree from the flat rows by depth, then serialize for the hidden field.
+  function toTree(list: Row[]): NavNode[] {
+    const root: NavNode[] = [];
+    const stack: { depth: number; node: NavNode }[] = [];
+    for (const r of list) {
+      const node: NavNode = { label: r.label.trim() };
+      if (r.url.trim()) node.url = r.url.trim();
+      while (stack.length && stack[stack.length - 1].depth >= r.depth) stack.pop();
+      if (stack.length) (stack[stack.length - 1].node.children ??= []).push(node);
+      else root.push(node);
+      stack.push({ depth: r.depth, node });
+    }
+    return root;
+  }
+
+  const treeJson = $derived(JSON.stringify(toTree(rows)));
+
+  function addRow() {
+    rows = [...rows, { id: nextId++, depth: 0, label: 'New item', url: '' }];
+  }
+  function removeRow(id: number) {
+    rows = rows.filter((r) => r.id !== id);
+  }
+  function indent(i: number) {
+    // A row may nest at most one level deeper than the row above it, and never past the cap.
+    if (i === 0) return;
+    const ceiling = Math.min(rows[i - 1].depth + 1, maxDepthIndex);
+    if (rows[i].depth < ceiling) rows[i].depth += 1;
+  }
+  function outdent(i: number) {
+    if (rows[i].depth > 0) rows[i].depth -= 1;
+  }
+
+  let dragFrom = $state<number | null>(null);
+  function onDrop(to: number) {
+    if (dragFrom === null || dragFrom === to) return;
+    const next = [...rows];
+    const [moved] = next.splice(dragFrom, 1);
+    next.splice(to, 0, moved);
+    rows = next;
+    dragFrom = null;
+  }
+</script>
+
+<div class="cairn-admin">
+  <div class="flex items-center justify-between">
+    <h1 class="text-xl font-semibold">{data.menu.label}</h1>
+    <button type="button" class="btn btn-sm" onclick={addRow}>Add item</button>
+  </div>
+
+  {#if data.saved}
+    <div class="alert alert-success mt-3">Navigation saved.</div>
+  {/if}
+  {#if data.error}
+    <div class="alert alert-error mt-3">{data.error}</div>
+  {/if}
+
+  <form method="POST" action="?/save" class="mt-4">
+    <input type="hidden" name="tree" value={treeJson} />
+    <ul class="menu w-full gap-1">
+      {#each rows as row, i (row.id)}
+        <li
+          draggable="true"
+          ondragstart={() => (dragFrom = i)}
+          ondragover={(e) => e.preventDefault()}
+          ondrop={() => onDrop(i)}
+          style={`margin-left:${row.depth * 1.5}rem`}
+        >
+          <div class="flex items-center gap-2 p-2">
+            <span class="cursor-grab opacity-40" aria-hidden="true">&#x283F;</span>
+            <input class="input input-sm input-bordered flex-1" placeholder="Label" bind:value={row.label} />
+            <input
+              class="input input-sm input-bordered flex-1"
+              placeholder="/path or https://…"
+              list="cairn-nav-pages"
+              bind:value={row.url}
+            />
+            <button type="button" class="btn btn-xs btn-ghost" onclick={() => outdent(i)} aria-label="Outdent">&larr;</button>
+            <button type="button" class="btn btn-xs btn-ghost" onclick={() => indent(i)} aria-label="Indent">&rarr;</button>
+            <button type="button" class="btn btn-xs btn-ghost text-error" onclick={() => removeRow(row.id)} aria-label="Remove">&times;</button>
+          </div>
+        </li>
+      {/each}
+    </ul>
+
+    <datalist id="cairn-nav-pages">
+      {#each data.pages as p (p.url)}
+        <option value={p.url}>{p.label}</option>
+      {/each}
+    </datalist>
+
+    <div class="mt-4">
+      <button type="submit" class="btn btn-primary btn-sm">Save navigation</button>
+    </div>
+  </form>
+</div>

package/src/lib/components/index.ts

@@ -1,8 +1,10 @@
 // cairn-cms admin UI shell. Consumers import from 'cairn-cms/components'; each site's
 // admin route `.svelte` files are one-line shims around these.
 export { default as AdminLayout } from './AdminLayout.svelte';
-export { default as AdminList } from './AdminList.svelte';
+export { default as CollectionList } from './CollectionList.svelte';
 export { default as LoginPage } from './LoginPage.svelte';
 export { default as ConfirmPage } from './ConfirmPage.svelte';
 export { default as EditPage } from './EditPage.svelte';
 export { default as ManageAdmins } from './ManageAdmins.svelte';
+export { default as ComponentPalette } from './ComponentPalette.svelte';
+export { default as NavTree } from './NavTree.svelte';

package/src/lib/editor.ts

@@ -0,0 +1,38 @@
+// cairn-core: the editor cursor seam (decision P3). The component palette and any later insert
+// control talk to MarkdownEditor, never to Carta directly, so a swap to a different editing
+// engine is contained to this file. Verified against carta-md@4.11: `input.getSelection()` and
+// `input.insertAt(pos, text)` are public on the InputEnhancer.
+
+// Local structural type for the Carta surface this module uses. carta-md is a peerDep and its
+// types are erased at runtime, but the carta-boundary test bars any `.ts` file from importing
+// `carta-md` (C4 bundle guard). A structural type avoids that import while remaining compatible.
+interface CartaInput {
+  getSelection(): { start: number; end: number; direction: string; slice: string };
+  insertAt(position: number, text: string): void;
+}
+
+interface CartaLike {
+  input?: CartaInput;
+}
+
+/** The programmatic editing surface the admin relies on. */
+export interface MarkdownEditor {
+  /** Insert a component or template at the current cursor position. */
+  insertComponent(template: string): void;
+}
+
+/**
+ * Wrap a Carta instance as a MarkdownEditor. Takes a getter (not the instance) because the
+ * EditPage component creates the Carta instance once and `carta.input` is only populated after
+ * the editor mounts; reading it lazily at call time avoids capturing an undefined `input`.
+ */
+export function cartaEditor(getCarta: () => CartaLike): MarkdownEditor {
+  return {
+    insertComponent(template) {
+      const input = getCarta().input;
+      if (!input) return; // editor not mounted yet; nothing to insert into
+      const { start } = input.getSelection();
+      input.insertAt(start, template);
+    },
+  };
+}

package/src/lib/frontmatter.ts

@@ -0,0 +1,17 @@
+// cairn-core: coerce a frontmatter value to the YYYY-MM-DD string an <input type="date"> wants.
+// gray-matter parses an unquoted YAML date (date: 2026-05-14) into a JS Date, so a string-only
+// read leaves the date input empty and drops the date on save. This normalizes a Date or an
+// ISO-ish string to YYYY-MM-DD. A parsed YAML date is UTC midnight, so slicing the ISO string
+// avoids a local-timezone shift. Internal (not re-exported from the barrel), like utils.ts.
+
+/** A frontmatter date value (Date or string) to the `YYYY-MM-DD` an `<input type="date">` expects. */
+export function dateInputValue(value: unknown): string {
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? '' : value.toISOString().slice(0, 10);
+  }
+  if (typeof value === 'string') {
+    const match = value.match(/^\d{4}-\d{2}-\d{2}/);
+    return match ? match[0] : '';
+  }
+  return '';
+}

package/src/lib/index.ts

@@ -5,4 +5,6 @@ export * from './github';
 export * from './carta';
 export * from './content';
 export * from './adapter';
+export * from './slug';
 export * from './render';
+export * from './nav';

package/src/lib/nav.ts

@@ -0,0 +1,117 @@
+// cairn-core: the navigation tree. A menu lives in the site's git-committed `site.config.yaml`
+// under `menus.<name>`, read at build time by the public layout and edited from `/admin/nav`,
+// which commits the file back through the GitHub-App pipeline. The engine returns data only; each
+// site renders the tree with its own header markup.
+
+import { parse as parseYaml, parseDocument } from 'yaml';
+
+/** One navigation node. `url` omitted/empty is a label-only grouping header; `children` omitted is a leaf. */
+export interface NavNode {
+  label: string;
+  url?: string;
+  children?: NavNode[];
+}
+
+/** Total node cap across the whole tree, a guard against a runaway payload. */
+export const MAX_NAV_NODES = 200;
+
+export class NavValidationError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'NavValidationError';
+  }
+}
+
+/**
+ * Validate and normalize an untrusted value into a NavNode[]: arrays only, non-empty labels,
+ * depth within `maxDepth` (1 = flat), bounded node count, and only the three known keys kept.
+ * Throws NavValidationError on any violation. Used by `navSave` before writing.
+ */
+export function validateNavTree(value: unknown, maxDepth: number): NavNode[] {
+  let count = 0;
+
+  function walk(nodes: unknown, depth: number): NavNode[] {
+    if (!Array.isArray(nodes)) throw new NavValidationError('Navigation must be a list of items');
+    if (depth > maxDepth) throw new NavValidationError(`Navigation is nested deeper than ${maxDepth} levels`);
+    return nodes.map((raw) => {
+      if (typeof raw !== 'object' || raw === null) throw new NavValidationError('Each item must be an object');
+      const item = raw as Record<string, unknown>;
+      const label = typeof item.label === 'string' ? item.label.trim() : '';
+      if (!label) throw new NavValidationError('Each item needs a label');
+      if (++count > MAX_NAV_NODES) throw new NavValidationError('Too many navigation items');
+      const node: NavNode = { label };
+      if (typeof item.url === 'string' && item.url.trim()) node.url = item.url.trim();
+      if (item.children !== undefined) {
+        const children = walk(item.children, depth + 1);
+        if (children.length) node.children = children;
+      }
+      return node;
+    });
+  }
+
+  return walk(value, 1);
+}
+
+/**
+ * Shape of the YAML site-config file. Unknown keys are ignored so the file can grow without
+ * an engine change. Read at build time by the public site.
+ */
+export interface SiteConfig {
+  siteName: string;
+  description?: string;
+  author?: string;
+  url?: string;
+  locale?: string;
+  /** Named navigation menus, each a NavNode[] (normalized by extractMenu). */
+  menus?: Record<string, unknown>;
+  email?: { sender?: string; senderName?: string };
+  footer?: { copyrightName?: string };
+  settings?: {
+    feedMaxItems?: number;
+    homepageFeaturedCount?: number;
+    postTags?: string[];
+    [key: string]: unknown;
+  };
+}
+
+export class SiteConfigError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'SiteConfigError';
+  }
+}
+
+/** Parse the YAML site-config text into a typed object. Throws SiteConfigError on a malformed root. */
+export function parseSiteConfig(raw: string): SiteConfig {
+  const parsed = parseYaml(raw) as unknown;
+  if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+    throw new SiteConfigError('Site config must be a YAML mapping');
+  }
+  const { siteName } = parsed as SiteConfig;
+  if (typeof siteName !== 'string' || !siteName.trim()) {
+    throw new SiteConfigError('Site config needs a siteName');
+  }
+  return parsed as SiteConfig;
+}
+
+/** Extract one named menu from a parsed config and validate it. Returns [] when the menu is absent. */
+export function extractMenu(config: SiteConfig, name: string, maxDepth: number): NavNode[] {
+  const menu = config.menus?.[name];
+  if (menu === undefined) return [];
+  return validateNavTree(menu, maxDepth);
+}
+
+/**
+ * Replace one named menu in the YAML site-config text and re-serialize, preserving every other
+ * top-level key (siteName, other menus, settings, ...). The `/admin/nav` editor commits the result.
+ * Parses into a Document so the rest of the file round-trips; YAML comments are not preserved
+ * (an accepted trade), but data keys are. A leaf node serializes without `url`/`children` keys.
+ */
+export function setMenu(raw: string, name: string, tree: NavNode[]): string {
+  const doc = parseDocument(raw);
+  if (doc.get('siteName') === undefined) {
+    throw new SiteConfigError('Site config must be a mapping with a siteName');
+  }
+  doc.setIn(['menus', name], tree);
+  return doc.toString();
+}

package/src/lib/slug.ts

@@ -0,0 +1,16 @@
+// cairn-core: derive a filename-safe slug stem from a human title, for the create-entry form.
+// The admin is filename-based (Pass E): this produces the editable stem an author can adjust,
+// matching the server-side SLUG_RE (lowercase alphanumerics and internal hyphens). Pure.
+
+/**
+ * Lowercase a title into a filename-safe slug stem.
+ * Apostrophes are dropped so "Geoff's" becomes "geoffs" (no spurious hyphen).
+ * All other non-alphanumeric runs become a single hyphen; leading/trailing hyphens are trimmed.
+ */
+export function slugify(title: string): string {
+  return title
+    .toLowerCase()
+    .replace(/'/g, '')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}