@glw907/cairn-cms 0.5.1 → 0.6.0-rc.0

package/dist/components/LoginPage.svelte

@@ -1,64 +1,54 @@
+<!--
+@component
+The magic-link sign-in page. A plain form POST to the page's default action (the engine's
+`requestAction`); no client SDK. The success message is identical whether or not the email is on
+the allowlist, so the page never leaks membership (spec §7.1).
+-->
 <script lang="ts">
-  // The magic-link sign-in page. Requests a link via the better-auth client (client-side, same
-  // origin). To avoid enumeration the UI shows the same neutral copy whether or not the email is
-  // on the allowlist. The server only emails actual editors (see auth/config.ts send gate).
-  import { createAuthClient } from 'better-auth/svelte';
-  import { magicLinkClient } from 'better-auth/client/plugins';
-
-  // The browser client lives in the one component that needs it (requesting a link). Sign-out
-  // and editor management go through server endpoints, so no shared client module is needed.
-  // A component-local const keeps better-auth's deep client types out of the packaged .d.ts.
-  const authClient = createAuthClient({ plugins: [magicLinkClient()] });
+  import './cairn-admin.css';
 
   interface Props {
-    data: { siteName: string };
+    /** The login load's data: the site name and an optional error. */
+    data: { siteName: string; error: string | null };
+    /** The action result: `sent` is true once a request was accepted. */
+    form: { sent?: boolean } | null;
   }
-  let { data }: Props = $props();
-
-  let email = $state('');
-  let requested = $state(false);
-  let busy = $state(false);
 
-  async function request(event: SubmitEvent) {
-    event.preventDefault();
-    busy = true;
-    // The magic-link email points at our /admin/auth/confirm page (built in config.ts), not a
-    // GET-verify URL, so the result is the same regardless of allowlist membership.
-    await authClient.signIn.magicLink({ email });
-    busy = false;
-    requested = true;
-  }
+  let { data, form }: Props = $props();
 </script>
 
 <svelte:head>
-  <title>Sign in · {data.siteName} CMS</title>
+  <meta name="robots" content="noindex, nofollow" />
 </svelte:head>
 
-<div class="mx-auto mt-16 max-w-md rounded-box border border-base-300 bg-base-100 p-8">
-  <h1 class="text-2xl font-bold">{data.siteName} CMS</h1>
-  <p class="mt-1 text-sm opacity-70">Sign in with your editor email.</p>
+<div data-theme="cairn-admin" class="bg-base-200 text-base-content flex min-h-screen items-center justify-center p-4">
+  <div class="rounded-box border border-base-300 bg-base-100 w-full max-w-sm p-6 shadow">
+    <h1 class="mb-1 text-lg font-semibold">Sign in to {data.siteName}</h1>
+    <p class="mb-4 text-sm text-[var(--color-muted)]">Enter your email and we'll send a sign-in link.</p>
 
-  {#if requested}
-    <div class="alert alert-success mt-6">
-      <span>
-        If that address is on the editor list, a sign-in link is on its way. It expires in 10
-        minutes.
-      </span>
-    </div>
-  {:else}
-    <form onsubmit={request} class="mt-6 flex flex-col gap-3">
-      <input
-        type="email"
-        name="email"
-        bind:value={email}
-        required
-        autocomplete="email"
-        placeholder="you@example.com"
-        class="input w-full"
-      />
-      <button type="submit" class="btn btn-primary" disabled={busy}>
-        {busy ? 'Sending…' : 'Email me a sign-in link'}
-      </button>
-    </form>
-  {/if}
+    {#if form?.sent}
+      <div role="status" class="alert alert-success text-sm">
+        Check your email for a sign-in link. It expires in 10 minutes.
+      </div>
+    {:else}
+      {#if data.error}
+        <div role="alert" class="alert alert-error mb-3 text-sm">That link expired. Request a new one.</div>
+      {/if}
+      <form method="POST" class="flex flex-col gap-3">
+        <label class="flex flex-col gap-1">
+          <span class="text-sm font-medium">Email</span>
+          <input
+            type="email"
+            name="email"
+            required
+            autocomplete="email"
+            aria-label="Email"
+            class="input w-full"
+            placeholder="you@example.com"
+          />
+        </label>
+        <button type="submit" class="btn btn-primary">Send sign-in link</button>
+      </form>
+    {/if}
+  </div>
 </div>

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

@@ -1,8 +1,20 @@
+import './cairn-admin.css';
 interface Props {
+    /** The login load's data: the site name and an optional error. */
     data: {
         siteName: string;
+        error: string | null;
     };
+    /** The action result: `sent` is true once a request was accepted. */
+    form: {
+        sent?: boolean;
+    } | null;
 }
+/**
+ * The magic-link sign-in page. A plain form POST to the page's default action (the engine's
+ * `requestAction`); no client SDK. The success message is identical whether or not the email is on
+ * the allowlist, so the page never leaks membership (spec §7.1).
+ */
 declare const LoginPage: import("svelte").Component<Props, {}, "">;
 type LoginPage = ReturnType<typeof LoginPage>;
 export default LoginPage;

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

@@ -1 +1 @@
-{"version":3,"file":"LoginPage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/LoginPage.svelte.ts"],"names":[],"mappings":"AAUE,UAAU,KAAK;IACb,IAAI,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5B;AAyDH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"LoginPage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/LoginPage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,mBAAmB,CAAC;AAGzB,UAAU,KAAK;IACb,kEAAkE;IAClE,IAAI,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IACjD,qEAAqE;IACrE,IAAI,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI,CAAC;CACjC;AAuCH;;;;GAIG;AACH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/ManageEditors.svelte

@@ -0,0 +1,81 @@
+<!--
+@component
+The owner-gated editor management surface: a table of editors with role-flip and remove actions,
+and an add-editor form. The acting owner's own row disables its destructive controls; the
+last-owner anti-lockout rule itself is enforced server-side (editors-routes). Actions post to the
+named `?/setRole`, `?/remove`, and `?/add` actions.
+-->
+<script lang="ts">
+  import type { Editor } from '../auth/types.js';
+
+  interface Props {
+    /** The editors load's data, plus the site name. */
+    data: { editors: Editor[]; self: string; siteName: string };
+    /** The last action's result (an error message when it failed). */
+    form: { error?: string; ok?: boolean } | null;
+  }
+
+  let { data, form }: Props = $props();
+</script>
+
+<header class="mb-4">
+  <h1 class="text-xl font-semibold">Editors</h1>
+</header>
+
+{#if form?.error}
+  <div role="alert" class="alert alert-error mb-4 text-sm">{form.error}</div>
+{/if}
+
+<div class="overflow-x-auto rounded-box border border-base-300 bg-base-100 mb-6">
+  <table class="table">
+    <thead>
+      <tr><th scope="col">Name</th><th scope="col">Email</th><th scope="col">Role</th><th scope="col"><span class="sr-only">Actions</span></th></tr>
+    </thead>
+    <tbody>
+      {#each data.editors as editor (editor.email)}
+        {@const isSelf = editor.email === data.self}
+        <tr>
+          <td>{editor.displayName}</td>
+          <td>{editor.email}</td>
+          <td>
+            <span class="badge {editor.role === 'owner' ? 'badge-primary' : 'badge-ghost'}">{editor.role}</span>
+          </td>
+          <td class="flex justify-end gap-2">
+            <form method="POST" action="?/setRole">
+              <input type="hidden" name="email" value={editor.email} />
+              <input type="hidden" name="role" value={editor.role === 'owner' ? 'editor' : 'owner'} />
+              <button type="submit" class="btn btn-ghost btn-xs" disabled={isSelf} aria-label={`Toggle role for ${editor.displayName}`}>
+                {editor.role === 'owner' ? 'Make editor' : 'Make owner'}
+              </button>
+            </form>
+            <form method="POST" action="?/remove">
+              <input type="hidden" name="email" value={editor.email} />
+              <button type="submit" class="btn btn-ghost btn-xs text-error" disabled={isSelf} aria-label={`Remove ${editor.displayName}`}>
+                Remove
+              </button>
+            </form>
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<form method="POST" action="?/add" class="rounded-box border border-base-300 bg-base-100 grid gap-3 p-4 sm:grid-cols-[1fr_1fr_auto_auto] sm:items-end">
+  <label class="flex flex-col gap-1">
+    <span class="text-sm font-medium">Name</span>
+    <input class="input" name="name" aria-label="Name" required />
+  </label>
+  <label class="flex flex-col gap-1">
+    <span class="text-sm font-medium">Email</span>
+    <input class="input" type="email" name="email" aria-label="Email" autocomplete="off" required />
+  </label>
+  <label class="flex flex-col gap-1">
+    <span class="text-sm font-medium">Role</span>
+    <select class="select" name="role" aria-label="Role">
+      <option value="editor">editor</option>
+      <option value="owner">owner</option>
+    </select>
+  </label>
+  <button type="submit" class="btn btn-primary">Add editor</button>
+</form>

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

@@ -0,0 +1,24 @@
+import type { Editor } from '../auth/types.js';
+interface Props {
+    /** The editors load's data, plus the site name. */
+    data: {
+        editors: Editor[];
+        self: string;
+        siteName: string;
+    };
+    /** The last action's result (an error message when it failed). */
+    form: {
+        error?: string;
+        ok?: boolean;
+    } | null;
+}
+/**
+ * The owner-gated editor management surface: a table of editors with role-flip and remove actions,
+ * and an add-editor form. The acting owner's own row disables its destructive controls; the
+ * last-owner anti-lockout rule itself is enforced server-side (editors-routes). Actions post to the
+ * named `?/setRole`, `?/remove`, and `?/add` actions.
+ */
+declare const ManageEditors: import("svelte").Component<Props, {}, "">;
+type ManageEditors = ReturnType<typeof ManageEditors>;
+export default ManageEditors;
+//# sourceMappingURL=ManageEditors.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ManageEditors.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/ManageEditors.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAG7C,UAAU,KAAK;IACb,mDAAmD;IACnD,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,EAAE,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,kEAAkE;IAClE,IAAI,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI,CAAC;CAC/C;AAyEH;;;;;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

@@ -0,0 +1,81 @@
+<!--
+@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.
+-->
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  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 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);
+
+  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;
+      }
+    });
+    mounted = true;
+  });
+</script>
+
+<input type="hidden" {name} value={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}

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

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

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

@@ -0,0 +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"}

package/dist/components/NavTree.svelte

@@ -1,18 +1,30 @@
+<!--
+@component
+The navigation tree editor. It edits a flat working copy of the menu (each row carries an
+explicit depth) and posts the whole tree as JSON to the save action. Vertical order comes from
+svelte-sortable-list (mouse, and keyboard with Space to lift, arrows to move, Space to drop);
+depth comes from the Indent and Outdent buttons, capped at the menu's maxDepth. The engine
+validates on save.
+-->
 <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';
+  import { SortableList, sortItems } from '@rodrigodagostino/svelte-sortable-list';
+  import type { SortableList as SortableListNS } from '@rodrigodagostino/svelte-sortable-list';
+  import '@rodrigodagostino/svelte-sortable-list/styles.css';
+  import type { NavLoadData } from '../sveltekit/nav-routes.js';
+  import type { NavNode } from '../nav/site-config.js';
 
-  let { data }: { data: NavLoadData } = $props();
+  interface Props {
+    /** The nav load's data: the menu meta, the current tree, page options, and flags. */
+    data: NavLoadData;
+  }
+
+  let { data }: Props = $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.
+  // A flat, ordered working model is simpler to reorder than a recursive one: each row carries an
+  // explicit depth, and the nested tree is rebuilt from order plus depth only at submit time.
   interface Row {
-    id: number;
+    id: string;
     depth: number;
     label: string;
     url: string;
@@ -21,14 +33,19 @@
   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 ?? '' });
+      out.push({ id: `row-${nextId++}`, depth, label: n.label, url: n.url ?? '' });
       if (n.children?.length) flatten(n.children, depth + 1, out);
     }
     return out;
   }
 
+  // untrack here is not for runtime behavior -- $state runs its initializer once regardless.
+  // It suppresses the Svelte compiler warning that `data` (a prop) is referenced outside a
+  // reactive context. The component is always remounted on save/error (both redirect), so
+  // a one-time snapshot of the initial tree is correct.
   let rows = $state<Row[]>(untrack(() => flatten(data.tree, 0, [])));
-  const maxDepthIndex = $derived(data.menu.maxDepth - 1); // depth is 0-based here
+  // depth is 0-based internally; maxDepth in the config is 1-based (1 = flat, 2 = one nesting level)
+  const maxDepthIndex = $derived(data.menu.maxDepth - 1);
 
   // Rebuild the nested tree from the flat rows by depth, then serialize for the hidden field.
   function toTree(list: Row[]): NavNode[] {
@@ -48,9 +65,9 @@
   const treeJson = $derived(JSON.stringify(toTree(rows)));
 
   function addRow() {
-    rows = [...rows, { id: nextId++, depth: 0, label: 'New item', url: '' }];
+    rows = [...rows, { id: `row-${nextId++}`, depth: 0, label: 'New item', url: '' }];
   }
-  function removeRow(id: number) {
+  function removeRow(id: string) {
     rows = rows.filter((r) => r.id !== id);
   }
   function indent(i: number) {
@@ -63,66 +80,59 @@
     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;
+  function handleDragEnd(e: SortableListNS.RootEvents['ondragend']) {
+    const { draggedItemIndex, targetItemIndex, isCanceled } = e;
+    if (!isCanceled && typeof targetItemIndex === 'number' && draggedItemIndex !== targetItemIndex) {
+      rows = sortItems(rows, draggedItemIndex, targetItemIndex);
+    }
   }
 </script>
 
-<div class="cairn-admin">
-  <div class="flex items-center justify-between">
-    <h1 class="text-xl font-semibold">{data.menu.label}</h1>
+<h1 class="mb-4 text-xl font-semibold">{data.menu.label}</h1>
+
+{#if data.saved}
+  <div role="status" class="alert alert-success mb-4 text-sm">Navigation saved.</div>
+{/if}
+{#if data.error}
+  <div role="alert" class="alert alert-error mb-4 text-sm">{data.error}</div>
+{/if}
+
+<form method="POST" action="?/save">
+  <input type="hidden" name="tree" value={treeJson} />
+
+  <div class="mb-2">
     <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} />
+  <div class="sortable-list-area" style="min-height:2.5rem">
+    <SortableList.Root ondragend={handleDragEnd} aria-label="Navigation items">
+      {#each rows as row, index (row.id)}
+        <SortableList.Item id={row.id} {index} aria-label={`${row.label || 'Untitled'}, level ${row.depth + 1}`}>
+          <div class="flex items-center gap-2 p-2" style={`margin-left:${row.depth * 1.5}rem`}>
+            <input class="input input-sm flex-1" placeholder="Label" aria-label="Label" bind:value={row.label} />
             <input
-              class="input input-sm input-bordered flex-1"
-              placeholder="/path or https://…"
+              class="input input-sm flex-1"
+              placeholder="/path or https://example.com"
               list="cairn-nav-pages"
+              aria-label="URL"
               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>
+            <button type="button" class="btn btn-xs btn-ghost" onclick={() => outdent(index)} aria-label="Outdent">&larr;</button>
+            <button type="button" class="btn btn-xs btn-ghost" onclick={() => indent(index)} aria-label="Indent">&rarr;</button>
+            <button type="button" class="btn btn-xs btn-ghost text-error" onclick={() => removeRow(row.id)} aria-label={`Remove ${row.label}`}>&times;</button>
           </div>
-        </li>
+        </SortableList.Item>
       {/each}
-    </ul>
+    </SortableList.Root>
+  </div>
 
-    <datalist id="cairn-nav-pages">
-      {#each data.pages as p (p.url)}
-        <option value={p.url}>{p.label}</option>
-      {/each}
-    </datalist>
+  <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>
+  <div class="mt-4">
+    <button type="submit" class="btn btn-primary btn-sm">Save navigation</button>
+  </div>
+</form>

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

@@ -1,8 +1,17 @@
-import type { NavLoadData } from '../sveltekit';
-type $$ComponentProps = {
+import '@rodrigodagostino/svelte-sortable-list/styles.css';
+import type { NavLoadData } from '../sveltekit/nav-routes.js';
+interface Props {
+    /** The nav load's data: the menu meta, the current tree, page options, and flags. */
     data: NavLoadData;
-};
-declare const NavTree: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+/**
+ * The navigation tree editor. It edits a flat working copy of the menu (each row carries an
+ * explicit depth) and posts the whole tree as JSON to the save action. Vertical order comes from
+ * svelte-sortable-list (mouse, and keyboard with Space to lift, arrows to move, Space to drop);
+ * depth comes from the Indent and Outdent buttons, capped at the menu's maxDepth. The engine
+ * validates on save.
+ */
+declare const NavTree: import("svelte").Component<Props, {}, "">;
 type NavTree = ReturnType<typeof NavTree>;
 export default NavTree;
 //# sourceMappingURL=NavTree.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"NavTree.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/NavTree.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAY/C,KAAK,gBAAgB,GAAI;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,CAAC;AAiHhD,QAAA,MAAM,OAAO,sDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"NavTree.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/NavTree.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,mDAAmD,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAI5D,UAAU,KAAK;IACb,qFAAqF;IACrF,IAAI,EAAE,WAAW,CAAC;CACnB;AA8HH;;;;;;GAMG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/cairn-admin.css

@@ -0,0 +1,42 @@
+/* Warm Stone: the cairn admin theme. Self-contained, since DaisyUI v5 reads these vars at point
+   of use, so this fully overrides the host's theme with no @plugin and no host build step. */
+[data-theme='cairn-admin'] {
+  color-scheme: light;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+
+  --color-base-100: oklch(98.5% 0.004 75);
+  --color-base-200: oklch(96% 0.005 75);
+  --color-base-300: oklch(92% 0.008 75);
+  --color-base-content: oklch(28% 0.012 75);
+
+  --color-primary: oklch(52% 0.2 293);
+  --color-primary-content: oklch(98% 0.012 293);
+  --color-secondary: oklch(45% 0.02 75);
+  --color-secondary-content: oklch(98% 0.004 75);
+  --color-accent: oklch(58% 0.16 300);
+  --color-accent-content: oklch(98% 0.012 300);
+  --color-neutral: oklch(32% 0.012 75);
+  --color-neutral-content: oklch(96% 0.004 75);
+
+  --color-info: oklch(60% 0.12 240);
+  --color-info-content: oklch(98% 0.012 240);
+  --color-success: oklch(58% 0.12 150);
+  --color-success-content: oklch(98% 0.012 150);
+  --color-warning: oklch(75% 0.15 70);
+  --color-warning-content: oklch(26% 0.05 70);
+  --color-error: oklch(58% 0.2 25);
+  --color-error-content: oklch(98% 0.012 25);
+
+  /* Accessible muted text tones: >= 4.5:1 contrast on base-100/base-200. */
+  --color-muted: oklch(48% 0.01 75);
+  --color-subtle: oklch(42% 0.01 75);
+
+  --radius-selector: 0.5rem;
+  --radius-field: 0.5rem;
+  --radius-box: 0.75rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 1;
+  --noise: 0;
+}

package/dist/components/index.d.ts

@@ -1,9 +1,10 @@
 export { default as AdminLayout } from './AdminLayout.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 ConceptList } from './ConceptList.svelte';
 export { default as EditPage } from './EditPage.svelte';
-export { default as ManageAdmins } from './ManageAdmins.svelte';
+export { default as ManageEditors } from './ManageEditors.svelte';
+export { default as MarkdownEditor } from './MarkdownEditor.svelte';
 export { default as ComponentPalette } from './ComponentPalette.svelte';
 export { default as NavTree } from './NavTree.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/components/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/components/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC"}