@glw907/cairn-cms 0.38.0 → 0.41.0

package/src/lib/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/src/lib/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/src/lib/components/ConceptList.svelte

@@ -107,6 +107,14 @@ content sizes. The header New button opens a dialog holding the create form.
   // flex layout and a hover affordance on top of this.
   const headerLabel = 'text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-[var(--color-muted)]';
   const sortButton = `inline-flex items-center gap-1 ${headerLabel} hover:text-base-content`;
+
+  // The publish-all flash. A racing second admin can publish first, leaving this redirect
+  // counting zero; say nothing then.
+  const publishedAllMessage = $derived(
+    data.publishedAll !== null && data.publishedAll > 0
+      ? `Published ${data.publishedAll} ${data.publishedAll === 1 ? 'entry' : 'entries'}.`
+      : '',
+  );
 </script>
 
 <header class="mb-6 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
@@ -122,6 +130,13 @@ content sizes. The header New button opens a dialog holding the create form.
   </div>
 </header>
 
+<!-- One persistent live region announces the publish-all flash (the EditPage pattern): a
+     {#if}-gated role element inserted fresh is announced inconsistently, so the visible alert
+     below keeps its styling without a role and the message is announced once. -->
+<div class="sr-only" aria-live="polite">{publishedAllMessage}</div>
+{#if publishedAllMessage}
+  <div class="alert alert-success mb-4 text-sm">{publishedAllMessage}</div>
+{/if}
 {#if data.formError}
   <div role="alert" class="alert alert-error mb-4 text-sm">{data.formError}</div>
 {/if}
@@ -194,13 +209,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/src/lib/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} />