@glw907/cairn-cms 0.37.1 → 0.40.0

package/CHANGELOG.md

@@ -2,6 +2,77 @@
 
 All notable changes to this project are recorded here, most recent first.
 
+## 0.40.0
+
+The edit page is redesigned around the manuscript. A sticky translucent header carries the
+breadcrumb, the status badge (New, Edited, or Published, with Hidden beside it when the `draft`
+flag is set), an unsaved-changes indicator, Publish and Save, and an overflow menu holding Discard
+changes and Delete. The editor sits in one card frame: a full GFM toolbar (bold, italic, two
+heading levels, lists, quote, and a More menu with strikethrough, inline code, code block, a table
+starter, horizontal rule, and task list), the writing surface, and a footer with a word count and
+a Markdown help cheat sheet. Write/Preview tabs replace the stacked preview. When the schema
+declares a `title` field, the document title hoists above the card, and the sidebar groups into
+Details, Visibility (the `draft` flag as the Hidden toggle), and Address (the slug beside a Change
+URL button). On the surface itself: markdown syntax highlighting in the admin palette, a soft
+accent band with a plain-language tooltip on `:::` directive machinery, and native browser spell
+check.
+Ctrl/Cmd+B and Ctrl/Cmd+I format the selection, Ctrl/Cmd+K opens a new web-link dialog,
+Ctrl/Cmd+S saves, and leaving the page with unsaved edits asks first.
+
+The component surface grows additively. `MarkdownEditor` gains `registerFormat` and
+`registerGetSelection`, and it no longer renders its own toolbar or card chrome; the host frames
+it, and `EditPage` does. `DeleteDialog` and `RenameDialog` gain an exported `open()` and a
+`trigger` prop, `LinkPicker` gains an exported `open()` and a `disabled` prop, and
+`ComponentInsertDialog` gains `disabled`. The light theme's `--color-accent` darkened to
+`oklch(54% 0.16 300)` so the editor's directive ink holds AA contrast.
+
+Consumers must: nothing for a site mounting the admin through the route factories and `EditPage`;
+no shim, action, or load changes. A site that renders `MarkdownEditor` directly, outside
+`EditPage`, no longer gets an embedded toolbar or card frame; it may host its own controls through
+the new `registerFormat` seam or accept the plain surface. One advisory for every consumer: sites
+compile the shipped `.svelte` sources, and svelte `5.56.1` has a compiler bug that misprints
+parenthesized boolean groupings, so use svelte `5.56.3` or newer. The editor-facing walkthrough is
+[the write-in-the-editor guide](docs/guides/write-in-the-editor.md).
+
+## 0.39.0
+
+Content edits are now held until a deliberate Publish. A save commits to the entry's pending
+branch, `cairn/<concept>/<id>`, cut lazily from the default branch's head, and the live site does
+not change. The per-page Publish validates and holds the posted form like a save, then commits
+that markdown to the default branch, with its manifest row upserted, in one commit; that commit
+triggers the deploy. The pending branch is then deleted, guarded by a head-sha check so a save
+landing mid-publish is never destroyed. A
+site-wide "Publish site (N)" action in the admin topbar ships every pending entry in one atomic
+commit. Discard deletes the pending branch, restoring the live version of a published entry or
+removing a never-published one entirely. The ref's existence is the only pending state; there is
+no metadata file and no database row.
+
+The admin shows the new state everywhere. List rows carry a status badge (New, Edited, or
+Published), with the `draft:` flag re-presented as a separate Hidden badge whose mechanics are
+unchanged. The edit page gains a pending banner, a Publish button, and a Discard changes confirm.
+Deleting an entry cascades to its pending branch, and renaming is refused while one exists.
+`EntrySummary`, `ListData`, `EditData`, and `LayoutData` widen accordingly, `createContentRoutes`
+returns the three new actions, and three log events join the vocabulary (`entry.published`,
+`entry.discarded`, `publish.failed`), with `commit.succeeded`/`commit.failed` carrying a `branch`
+field on the save path.
+
+Consumers must: add publish/discard to the edit shim's actions and publishAll to the list shim's actions; saves no longer deploy the site, Publish does.
+The exact lines are in
+[the upgrade guide](docs/guides/upgrade-cairn.md) and
+[the admin route structure](docs/reference/admin-routes.md). The editor-facing walkthrough is
+[the publish and discard guide](docs/guides/publish-and-discard.md).
+
+## 0.38.0
+
+The magic-link send is now awaited rather than fire-and-forget, so a delivery failure reaches the
+login response instead of being swallowed. `requestAction` returns a `status` discriminant
+(`sent` | `send_error` | `throttled`) alongside the existing `sent` boolean, and `LoginPage` renders
+a send-error and a throttled state. The `auth.link.send_failed` log record gains a `code` (the
+Cloudflare binding error code) and a `conditionId` (the mapped diagnostic condition).
+
+Consumers may: read `form.status` to render the new states. A site rendering against `form.sent` is
+unaffected, since `sent` is unchanged.
+
 ## 0.37.1
 
 Internal groundwork and a docs overhaul; nothing in the public surface or runtime behavior

package/README.md

@@ -4,11 +4,12 @@ A CMS that lives inside your SvelteKit site and commits to git. Your editors log
 email link (no GitHub account, no password), write raw markdown in a CodeMirror editor with a
 live preview, and hit Save.
 
-When they hit Save, cairn doesn't write to a database. It commits the markdown straight to
-the repo's `main` branch. The commit goes through a GitHub App, so the editor never touches
-GitHub; they still show up as the commit author, and `cairn-cms[bot]` does the signing. From
-there your normal Cloudflare deploy takes over, the same as if you'd pushed from a terminal.
-Commit is publish. If someone else changed the file mid-edit, cairn refuses the save instead
+When they hit Save, cairn doesn't write to a database. It commits the markdown to a holding
+branch in the repo, one branch per entry, where the edit waits until the editor hits Publish.
+Publish copies the held content to `main`, and from there your normal Cloudflare deploy takes
+over, the same as if you'd pushed from a terminal. Every commit goes through a GitHub App, so
+the editor never touches GitHub; they still show up as the commit author, and `cairn-cms[bot]`
+does the signing. If someone else changed the file mid-edit, cairn refuses the save instead
 of guessing how to merge.
 
 ## How it fits your site

package/dist/components/AdminLayout.svelte

@@ -124,6 +124,7 @@ identical on every host regardless of the site's own theme.
     data.pathname;
     drawerOpen = false;
     paletteDialog?.close();
+    publishAllDialog?.close();
   });
 
   // Seed from the SSR'd theme once. The live theme is owned by this state and the toggle, so the
@@ -158,6 +159,21 @@ identical on every host regardless of the site's own theme.
   let paletteList = $state<HTMLUListElement>();
   let paletteQuery = $state('');
 
+  // The site-wide publish action. The trigger and its confirm render only while entries are
+  // pending; a null pendingEntries (GitHub unreachable) hides them rather than showing a stale count.
+  let publishAllDialog = $state<HTMLDialogElement>();
+  const pendingCount = $derived(data.pendingEntries?.length ?? 0);
+  // The pending ids grouped under their concept's nav label, in first-seen order. A ref whose
+  // concept is not in the nav (an unconfigured key) falls back to the raw key.
+  const pendingGroups = $derived.by(() => {
+    const groups = new Map<string, string[]>();
+    for (const entry of data.pendingEntries ?? []) {
+      const label = data.concepts.find((c) => c.id === entry.concept)?.label ?? entry.concept;
+      groups.set(label, [...(groups.get(label) ?? []), entry.id]);
+    }
+    return [...groups.entries()].map(([label, ids]) => ({ label, ids }));
+  });
+
   // The bare data-theme wrapper is the admin root the dev chrome-guard measures from.
   let rootEl = $state<HTMLElement>();
   onMount(() => {
@@ -263,6 +279,13 @@ identical on every host regardless of the site's own theme.
             <kbd class="ml-auto hidden rounded border border-[var(--cairn-card-border)] px-1.5 text-[0.6875rem] font-medium sm:inline">&#8984;K</kbd>
           </button>
         </div>
+        {#if pendingCount > 0 && data.concepts.length > 0}
+          <div class="flex-none">
+            <button type="button" class="btn btn-primary btn-sm" aria-haspopup="dialog" onclick={() => publishAllDialog?.showModal()}>
+              Publish site ({pendingCount})
+            </button>
+          </div>
+        {/if}
         <div class="flex-none">
           <button type="button" class="btn btn-square btn-ghost" aria-label="Toggle theme" onclick={toggleTheme}>
             {#if theme === 'cairn-admin'}<MoonIcon class="h-5 w-5" />{:else}<SunIcon class="h-5 w-5" />{/if}
@@ -325,6 +348,36 @@ identical on every host regardless of the site's own theme.
         </div>
         <form method="dialog" class="modal-backdrop"><button tabindex="-1" aria-label="Close">close</button></form>
       </dialog>
+
+      <!-- The form action below reads data.concepts[0], so zero configured concepts (with a stray
+           pending ref) must hide the dialog along with its trigger. -->
+      {#if pendingCount > 0 && data.concepts.length > 0}
+        <dialog bind:this={publishAllDialog} class="modal" aria-labelledby="cairn-publish-all-title">
+          <div class="modal-box">
+            <div class="mb-3 flex items-center justify-between">
+              <h2 id="cairn-publish-all-title" class="text-base font-semibold">Publish the whole site?</h2>
+              <button type="button" class="btn btn-ghost btn-sm" aria-label="Close" onclick={() => publishAllDialog?.close()}>✕</button>
+            </div>
+            <p class="text-sm">Every entry below goes live in one step.</p>
+            {#each pendingGroups as group, i (group.label)}
+              <p id={`cairn-publish-group-${i}`} class="mt-3 text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-[var(--color-muted)]">{group.label}</p>
+              <ul class="mt-1 text-sm" aria-labelledby={`cairn-publish-group-${i}`}>
+                {#each group.ids as id (id)}
+                  <li>{id}</li>
+                {/each}
+              </ul>
+            {/each}
+            <!-- The publishAll action is mounted on every concept-list shim; the first concept's
+                 route hosts the site-wide POST so the topbar works from any admin page. -->
+            <form method="POST" action={`/admin/${data.concepts[0].id}?/publishAll`} class="mt-4 flex justify-end gap-2">
+              <CsrfField token={data.csrf} />
+              <button type="button" class="btn btn-sm" onclick={() => publishAllDialog?.close()}>Cancel</button>
+              <button type="submit" class="btn btn-sm btn-primary">Publish site</button>
+            </form>
+          </div>
+          <form method="dialog" class="modal-backdrop"><button tabindex="-1" aria-label="Close">close</button></form>
+        </dialog>
+      {/if}
     </div>
 
     <div class="drawer-side">

package/dist/components/ComponentInsertDialog.svelte

@@ -5,8 +5,21 @@ intended use. A component with a schema opens the guided ComponentForm; a templa
 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">
+<script module lang="ts">
   import type { ComponentRegistry, ComponentDef } from '../render/registry.js';
+
+  function hasSchema(def: ComponentDef): boolean {
+    return (def.attributes?.length ?? 0) > 0 || (def.slots?.length ?? 0) > 0;
+  }
+  /** The registry's actionable components: a schema opens the guided form, a template inserts
+   *  directly, and a component with neither is not listed. Exported so a host rendering its own
+   *  trigger (the edit page's toolbar) can hide it under the same condition the dialog uses. */
+  export function insertableDefs(registry?: ComponentRegistry): ComponentDef[] {
+    return (registry?.defs ?? []).filter((def) => hasSchema(def) || Boolean(def.insertTemplate));
+  }
+</script>
+
+<script lang="ts">
   import type { IconSet } from '../render/glyph.js';
   import ComponentForm from './ComponentForm.svelte';
 
@@ -17,23 +30,22 @@ trapping and Escape, following the dropdown's a11y conventions used elsewhere in
     insert: (text: string) => void;
     /** The site's icon set, for icon fields. */
     icons?: IconSet;
+    /** Disable the trigger; the host sets it while Preview shows. */
+    disabled?: boolean;
+    /** Render the built-in Insert block trigger. False mounts only the dialog, for a host that
+     *  supplies its own trigger and opens the dialog through the exported open(). */
+    trigger?: boolean;
   }
 
-  let { registry, insert, icons }: Props = $props();
+  let { registry, insert, icons, disabled = false, trigger = true }: 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(insertableDefs(registry));
 
-  const defs = $derived((registry?.defs ?? []).filter(actionable));
-
-  function open() {
+  /** Open the picker. Exported so a trigger={false} host can drive the dialog itself. */
+  export function open() {
     picked = null;
     dialog?.showModal();
   }
@@ -55,9 +67,11 @@ trapping and Escape, following the dropdown's a11y conventions used elsewhere in
   }
 </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>
+{#if trigger && defs.length > 0}
+  <button type="button" class="btn btn-sm btn-ghost" aria-haspopup="dialog" aria-label="Insert block" {disabled} onclick={open}>Insert block</button>
+{/if}
 
+{#if defs.length > 0}
   <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">

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

@@ -1,4 +1,8 @@
-import type { ComponentRegistry } from '../render/registry.js';
+import type { ComponentRegistry, ComponentDef } from '../render/registry.js';
+/** The registry's actionable components: a schema opens the guided form, a template inserts
+ *  directly, and a component with neither is not listed. Exported so a host rendering its own
+ *  trigger (the edit page's toolbar) can hide it under the same condition the dialog uses. */
+export declare function insertableDefs(registry?: ComponentRegistry): ComponentDef[];
 import type { IconSet } from '../render/glyph.js';
 interface Props {
     /** The site's component registry. */
@@ -7,6 +11,11 @@ interface Props {
     insert: (text: string) => void;
     /** The site's icon set, for icon fields. */
     icons?: IconSet;
+    /** Disable the trigger; the host sets it while Preview shows. */
+    disabled?: boolean;
+    /** Render the built-in Insert block trigger. False mounts only the dialog, for a host that
+     *  supplies its own trigger and opens the dialog through the exported open(). */
+    trigger?: boolean;
 }
 /**
  * The Insert control and its modal. The picker lists each actionable component with its description and
@@ -14,6 +23,8 @@ interface Props {
  * 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, {}, "">;
+declare const ComponentInsertDialog: import("svelte").Component<Props, {
+    open: () => void;
+}, "">;
 type ComponentInsertDialog = ReturnType<typeof ComponentInsertDialog>;
 export default ComponentInsertDialog;

package/dist/components/ConceptList.svelte

@@ -122,6 +122,12 @@ content sizes. The header New button opens a dialog holding the create form.
   </div>
 </header>
 
+<!-- A racing second admin can publish first, leaving this redirect counting zero; say nothing then. -->
+{#if data.publishedAll !== null && data.publishedAll > 0}
+  <div role="status" class="alert alert-success mb-4 text-sm">
+    Published {data.publishedAll} {data.publishedAll === 1 ? 'entry' : 'entries'}.
+  </div>
+{/if}
 {#if data.formError}
   <div role="alert" class="alert alert-error mb-4 text-sm">{data.formError}</div>
 {/if}
@@ -194,13 +200,17 @@ content sizes. The header New button opens a dialog holding the create form.
             <td><a class="font-medium hover:text-primary hover:underline" href={`/admin/${data.conceptId}/${entry.id}`}>{entry.title}</a></td>
             {#if data.dated}<td class="hidden text-sm text-[var(--color-muted)] sm:table-cell">{formatDate(entry.date)}</td>{/if}
             <td>
-              {#if entry.draft}<span class="badge badge-warning badge-sm font-medium">Draft</span>
-              {:else}<span class="badge badge-ghost badge-sm font-medium">Published</span>{/if}
+              <div class="flex flex-wrap items-center gap-1">
+                {#if entry.status === 'new'}<span class="badge badge-info badge-sm font-medium">New</span>
+                {:else if entry.status === 'edited'}<span class="badge badge-warning badge-sm font-medium">Edited</span>
+                {:else}<span class="badge badge-ghost badge-sm font-medium">Published</span>{/if}
+                {#if entry.draft}<span class="badge badge-neutral badge-sm font-medium">Hidden</span>{/if}
+              </div>
             </td>
             <td class="text-right">
               {#if deleteRefused?.id === entry.id}
                 <!-- A prior delete was refused: DeleteDialog names the blockers and offers no confirm. -->
-                <DeleteDialog conceptId={data.conceptId} id={entry.id} label={data.label} inboundLinks={deleteRefused.inboundLinks} />
+                <DeleteDialog conceptId={data.conceptId} id={entry.id} label={data.label} inboundLinks={deleteRefused.inboundLinks} pending={entry.status !== 'published'} />
               {:else}
                 <form method="POST" action="?/delete">
                   <CsrfField />

package/dist/components/DeleteDialog.svelte

@@ -18,9 +18,17 @@ each linking to its edit page, so the author repoints or removes those links fir
     label: string;
     /** The entries that link to this one; non-empty blocks the delete. */
     inboundLinks: InboundLink[];
+    /** True when the entry has unpublished edits, which the delete discards along with it. */
+    pending?: boolean;
+    /** Render the built-in Delete trigger. False mounts only the dialog, for a host that supplies
+     *  its own trigger and opens the dialog through the exported open(). */
+    trigger?: boolean;
+    /** Called when the delete confirm submits, before the document navigates. The edit page uses
+     *  it to stand down its leave guard while the POST is in flight. */
+    onsubmitting?: () => void;
   }
 
-  let { conceptId, id, label, inboundLinks }: Props = $props();
+  let { conceptId, id, label, inboundLinks, pending = false, trigger = true, onsubmitting }: Props = $props();
 
   let dialog = $state<HTMLDialogElement | null>(null);
   const blocked = $derived(inboundLinks.length > 0);
@@ -32,7 +40,8 @@ each linking to its edit page, so the author repoints or removes those links fir
   const verb = $derived(single ? 'links' : 'link');
   const pronoun = $derived(single ? 'it' : 'them');
 
-  function open() {
+  /** Open the confirm. Exported so a trigger={false} host can drive the dialog itself. */
+  export function open() {
     dialog?.showModal();
   }
   function close() {
@@ -40,9 +49,11 @@ each linking to its edit page, so the author repoints or removes those links fir
   }
 </script>
 
-<button type="button" class="btn btn-sm btn-ghost text-error" aria-haspopup="dialog" onclick={open}>
-  Delete
-</button>
+{#if trigger}
+  <button type="button" class="btn btn-sm btn-ghost text-error" aria-haspopup="dialog" onclick={open}>
+    Delete
+  </button>
+{/if}
 
 <dialog class="modal" aria-labelledby="cairn-delete-dialog-title" bind:this={dialog}>
   <div class="modal-box">
@@ -67,8 +78,8 @@ each linking to its edit page, so the author repoints or removes those links fir
         <button type="button" class="btn btn-sm" onclick={close}>Close</button>
       </div>
     {:else}
-      <p class="mb-3 text-sm">This cannot be undone.</p>
-      <form method="POST" action="?/delete" class="flex justify-end gap-2">
+      <p class="mb-3 text-sm">This cannot be undone.{#if pending} Unpublished edits to this entry are discarded too.{/if}</p>
+      <form method="POST" action="?/delete" class="flex justify-end gap-2" onsubmit={() => onsubmitting?.()}>
         <CsrfField />
         <input type="hidden" name="concept" value={conceptId} />
         <input type="hidden" name="id" value={id} />

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

@@ -8,6 +8,14 @@ interface Props {
     label: string;
     /** The entries that link to this one; non-empty blocks the delete. */
     inboundLinks: InboundLink[];
+    /** True when the entry has unpublished edits, which the delete discards along with it. */
+    pending?: boolean;
+    /** Render the built-in Delete trigger. False mounts only the dialog, for a host that supplies
+     *  its own trigger and opens the dialog through the exported open(). */
+    trigger?: boolean;
+    /** Called when the delete confirm submits, before the document navigates. The edit page uses
+     *  it to stand down its leave guard while the POST is in flight. */
+    onsubmitting?: () => void;
 }
 /**
  * The Delete control and its modal. With no inbound links it is a plain confirm that posts to the
@@ -15,6 +23,8 @@ interface Props {
  * each linking to its edit page, so the author repoints or removes those links first. Built on a native
  * <dialog>, following the LinkPicker a11y conventions.
  */
-declare const DeleteDialog: import("svelte").Component<Props, {}, "">;
+declare const DeleteDialog: import("svelte").Component<Props, {
+    open: () => void;
+}, "">;
 type DeleteDialog = ReturnType<typeof DeleteDialog>;
 export default DeleteDialog;