@glw907/cairn-cms 0.52.1 → 0.54.0

package/CHANGELOG.md

@@ -2,6 +2,52 @@
 
 All notable changes to this project are recorded here, most recent first.
 
+## 0.54.0
+
+The editor takes the shell. On an edit route the page is now one context, the desk: the edit page's
+sticky header dissolves into the single topbar (one band in three clusters, the way back and the
+status and the lifecycle actions), the nav drawer opens closed and the breadcrumb is the way out,
+the frontmatter fields move behind a right slide-over panel, and a zen toggle (and `Ctrl+Shift+.`)
+fades the remaining chrome to leave the manuscript alone, with a floating chip carrying the save
+state and the way out. List and settings pages keep the office chrome unchanged.
+
+The editor ergonomics round out alongside it: the directive rail pitch widens to 8px and the
+caret-active rail reads by strength alone (no width step), wrapped quote and list lines hang under
+their content, directive containers fold from the rail band (a chevron on the opener row, a folded
+row with an `N lines` pill, the safety invariant that an edit or selection never hides text), the
+format keymap completes (inline code, quote, both lists, the heading pair) and the page-level
+actions get keys, a `Ctrl+/` sheet lists every shortcut, and `####` gains a real heading size step.
+The everyday formats (inline code, strikethrough, table) promote onto the strip, and the footer
+controls dress as what they are: a segmented posture control, check-and-tint mode toggles, and a
+plain Markdown-help link. The whole admin picks up the same grade of polish, including a scoped
+reset so every bare admin button sheds its native chrome.
+
+Consumers may: nothing is required, the new chrome and the editor behaviors apply in place. A site
+that embeds `MarkdownEditor` directly gets the rail, hang, fold, and keymap changes automatically;
+the editor's public props are unchanged.
+
+## 0.53.0
+
+An iterative design session on the editor-as-home direction, shipped as one window.
+
+The admin's UI face is now IBM Plex Sans (self-hosted, SIL OFL), replacing Figtree: the editor
+writes in iA Writer Mono, which descends from IBM Plex Mono, so the chrome and the manuscript
+share one type skeleton. The brand display face (Bricolage Grotesque) is unchanged.
+
+The editor gains two surface postures, persisted and toggled from the card footer: Prose (the
+default) is the writing instrument, a 72ch centered measure at a larger type step; Markup is the
+working surface, a wide dense fill for tables, attributed directives, and long URLs. The footer
+is now the writing-environment strip (word count, postures, focus mode, typewriter, help), the
+insert actions joined the toolbar as icons, and the document title sits on the manuscript's left
+edge. Focus mode now also eases the directive rails and the title back with the dimmed field.
+
+The chrome cedes the stage: a narrower nav sidebar and details column, a wider gutter around the
+editor, a quieter details card, rebalanced surface margins, and the topbar pinned to the brand
+band's height so the header hairline meets across the seam.
+
+Consumers may: pass the new optional `surface` prop ('prose' | 'markup') when embedding
+`MarkdownEditor` directly. No action required; the release is additive.
+
 ## 0.52.1
 
 Two field reports from the first 0.52.0 session, both in-editor polish with no consumer action.

package/dist/components/AdminLayout.svelte

@@ -11,6 +11,7 @@ identical on every host regardless of the site's own theme.
   import type { LayoutData } from '../sveltekit/content-routes.js';
   import CsrfField from './CsrfField.svelte';
   import { CSRF_CONTEXT_KEY } from './csrf-context.js';
+  import { provideTopbar, type TopbarHolder } from './topbar-context.js';
   import { MenuIcon, LogOutIcon, SunIcon, MoonIcon, ChevronRightIcon, SearchIcon } from './admin-icons.js';
   import CairnLogo from './CairnLogo.svelte';
   import { cairnFaviconHref } from './cairn-favicon.js';
@@ -225,6 +226,16 @@ identical on every host regardless of the site's own theme.
 
   // The browser-tab title: the deepest breadcrumb (the active concept or entry), then the brand.
   const pageTitle = $derived(crumbs.length ? crumbs[crumbs.length - 1].label : 'Admin');
+
+  // A desk route is an open document (/admin/<concept>/<id>): the third path segment is the entry.
+  // The band has one job there, so the topbar drops the palette trigger and the site-wide Publish
+  // button and renders the document's own desk controls instead.
+  const isDeskRoute = $derived(data.pathname.split('/').filter(Boolean).length > 2);
+
+  // The topbar context portal: a reactive holder a descendant document fills with its desk snippet.
+  // EditPage registers on mount and nulls it on teardown; the office routes leave it null.
+  let topbar = $state<TopbarHolder>({ desk: null, zen: false });
+  provideTopbar(topbar);
 </script>
 
 <svelte:head>
@@ -239,14 +250,30 @@ identical on every host regardless of the site's own theme.
      itself never matches. Keeping the drawer and its base/utility classes one level in lets the
      scoped sheet style them. -->
 <div data-theme={theme} bind:this={rootEl}>
-  <div class="drawer lg:drawer-open min-h-screen bg-base-200 text-base-content">
+  <!-- The persistent desktop sidebar (lg:drawer-open) recedes inside an open document: a desk route
+       renders the drawer shell without it, so the nav starts closed at desktop width and the
+       manuscript takes the shell. This resolves at SSR from data.pathname (isDeskRoute), never in an
+       effect, so the chrome-free state does not flash. The checkbox still governs the overlay, so the
+       toggle (and Cmd/Ctrl+B) reopens the nav over the document on demand. -->
+  <div class="drawer min-h-screen bg-base-200 text-base-content" class:lg:drawer-open={!isDeskRoute}>
     <input id="cairn-drawer" type="checkbox" class="drawer-toggle" bind:checked={drawerOpen} />
 
     <div class="drawer-content flex flex-col">
+      <!-- Zen (rung 4) drops the whole topbar element, not just its contents: a desk document
+           registers zen through the topbar holder and the band slides away entirely. The desk's
+           three clusters include AdminLayout-owned chrome (the drawer toggle, the breadcrumb), so
+           emptying the band would leave that chrome behind; the band must be GONE. The manuscript
+           and EditPage's own floating zen chip carry on below. -->
+      {#if !topbar.zen}
       <!-- The topbar is a flat, opaque continuation of the sidebar's brand band: same surface and the
-           same hairline, no shadow, so the two form one clean header strip across the sidebar seam. -->
-      <div class="navbar bg-base-100 border-b border-[var(--cairn-card-border)] sticky top-0 z-30 gap-2 px-4 lg:px-8">
-        <div class="flex-none lg:hidden">
+           same hairline, no shadow, so the two form one clean header strip across the sidebar seam.
+           The height is pinned to the brand band's h-16 (a content-driven navbar drifts with font
+           metrics, and the two border-bottoms stop meeting at the seam). -->
+      <div class="navbar bg-base-100 border-b border-[var(--cairn-card-border)] sticky top-0 z-30 h-16 min-h-16 gap-2 px-4 py-0 lg:px-8">
+        <!-- The drawer toggle is hidden at desktop width on the office routes (the persistent sidebar
+             stands in for it); on a desk route the sidebar is closed, so the toggle stays visible and
+             reopens the nav as an overlay. -->
+        <div class="flex-none" class:lg:hidden={!isDeskRoute}>
           <label for="cairn-drawer" aria-label="Open menu" class="btn btn-square btn-ghost">
             <MenuIcon class="h-5 w-5" />
           </label>
@@ -266,25 +293,32 @@ identical on every host regardless of the site's own theme.
             <span class="font-semibold tracking-tight">{data.siteName}</span>
           {/if}
         </div>
-        <!-- The command-palette trigger fills the center: a quick jump-to over the admin, opened here
-             or with Cmd/Ctrl+K. -->
-        <div class="flex min-w-0 flex-1 justify-center">
-          <button
-            type="button"
-            onclick={openPalette}
-            class="flex w-full max-w-md items-center gap-2 rounded-field border border-[var(--cairn-card-border)] bg-base-200/70 px-3 py-1.5 text-sm text-[var(--color-muted)] transition-colors hover:bg-base-200 hover:text-base-content"
-          >
-            <SearchIcon class="h-4 w-4 shrink-0" aria-hidden="true" />
-            <span class="truncate">Search or jump to&hellip;</span>
-            <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}
-          <div class="flex-none">
-            <button type="button" class="btn btn-primary btn-sm" aria-haspopup="dialog" onclick={() => publishAllDialog?.showModal()}>
-              Publish site ({pendingCount})
+        {#if isDeskRoute}
+          <!-- An open document takes the band: the registered desk snippet (the status and action
+               clusters) fills the row to the right of the breadcrumb. The palette trigger and the
+               site-wide Publish button stand down so the band has one job here. -->
+          {@render topbar.desk?.()}
+        {:else}
+          <!-- The command-palette trigger fills the center: a quick jump-to over the admin, opened
+               here or with Cmd/Ctrl+K. -->
+          <div class="flex min-w-0 flex-1 justify-center">
+            <button
+              type="button"
+              onclick={openPalette}
+              class="flex w-full max-w-md items-center gap-2 rounded-field border border-[var(--cairn-card-border)] bg-base-200/70 px-3 py-1.5 text-sm text-[var(--color-muted)] transition-colors hover:bg-base-200 hover:text-base-content"
+            >
+              <SearchIcon class="h-4 w-4 shrink-0" aria-hidden="true" />
+              <span class="truncate">Search or jump to&hellip;</span>
+              <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}
+            <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}
         {/if}
         <div class="flex-none">
           <button type="button" class="btn btn-square btn-ghost" aria-label="Toggle theme" onclick={toggleTheme}>
@@ -292,8 +326,9 @@ identical on every host regardless of the site's own theme.
           </button>
         </div>
       </div>
+      {/if}
 
-      <main class="flex-1 p-4 lg:p-8">
+      <main class="flex-1 p-4 lg:px-10 lg:py-8">
         {@render children()}
       </main>
 
@@ -380,7 +415,7 @@ identical on every host regardless of the site's own theme.
 
     <div class="drawer-side">
       <label for="cairn-drawer" aria-label="Close menu" class="drawer-overlay"></label>
-      <nav class="bg-base-100 flex min-h-full w-64 flex-col border-r border-[var(--cairn-card-border)]" aria-label="Site content">
+      <nav class="bg-base-100 flex min-h-full w-56 flex-col border-r border-[var(--cairn-card-border)]" aria-label="Site content">
         <!-- Brand band, the same height as the topbar. The mark sits in a filled "app-icon" tile, which
              anchors the corner as a deliberate brand object rather than a washed box. The logo and
              wordmark link to the admin home. -->