@glw907/cairn-cms 0.52.0 → 0.53.0

package/dist/components/MarkdownEditor.svelte

@@ -31,6 +31,9 @@ through the adapter's render. Swapping the editor stays a one-file change.
     focusMode?: boolean;
     /** Typewriter scroll: hold the cursor line at vertical center while typing. Off by default. */
     typewriter?: boolean;
+    /** The surface posture. Prose is the writing instrument (72ch measure, larger type, looser
+     *  leading); markup is the working surface (fills the card, denser). Prose by default. */
+    surface?: 'prose' | 'markup';
   }
 
   let {
@@ -43,6 +46,7 @@ through the adapter's render. Swapping the editor stays a one-file change.
     completionSources = [],
     focusMode = false,
     typewriter = false,
+    surface = 'prose',
   }: Props = $props();
 
   let host = $state<HTMLDivElement | null>(null);
@@ -57,6 +61,12 @@ through the adapter's render. Swapping the editor stays a one-file change.
   let modes: typeof import('./editor-modes.js') | null = null;
   let focusCompartment: import('@codemirror/state').Compartment | null = null;
   let typewriterCompartment: import('@codemirror/state').Compartment | null = null;
+  let surfaceCompartment: import('@codemirror/state').Compartment | null = null;
+  // The posture themes, swapped through the surface compartment. Each owns its type step and
+  // leading (the base theme deliberately sets neither on the content node, so the postures never
+  // contest it on adoption order). Built in onMount beside the base theme.
+  let proseTheme: import('@codemirror/state').Extension | null = null;
+  let markupTheme: import('@codemirror/state').Extension | null = null;
 
   onMount(async () => {
     const viewMod = await import('@codemirror/view');
@@ -75,9 +85,10 @@ through the adapter's render. Swapping the editor stays a one-file change.
     // tooltip above all) renders dark-on-dark instead of light-on-dark.
     const isDark = host.closest('[data-theme]')?.getAttribute('data-theme')?.includes('dark') ?? false;
     // The directive machinery treatment: rails, not bands. A row at depth N draws every rail
-    // 1..N as literal nested brackets: 2px accent bars at x offsets 0-2, 4-6, and 8-10 with 2px
-    // of surface between them, stacked as inset box shadows (top layer first, so each bar sits
-    // over the spacer and deeper bar beneath it). The alphas step through the per-theme vars in
+    // 1..N as literal nested brackets: 2px accent bars at x offsets 0-2, 6-8, and 12-14 with 4px
+    // of surface between them (a gap of twice the bar weight, the floor for two parallel rules
+    // to read as separate lines rather than one thick one), stacked as inset box shadows (top
+    // layer first, so each bar sits over the spacer and deeper bar beneath it). The alphas step through the per-theme vars in
     // cairn-admin.css; the fallbacks are the light values, so the editor still renders sensibly
     // outside an admin theme wrapper. On a fence line the colon runs, brackets, and {attrs}
     // braces dim to the marker tone while the name and label keep a depth-stepped ink. Leaf and
@@ -91,7 +102,7 @@ through the adapter's render. Swapping the editor stays a one-file change.
     const rails = (depth: number, active = false): string => {
       const layers: string[] = [];
       for (let d = 1; d <= depth; d++) {
-        const edge = 4 * d - 2;
+        const edge = 6 * d - 4;
         if (d > 1) layers.push(`inset ${edge - 2}px 0 0 0 var(--color-base-100, oklch(99% 0.004 75))`);
         const own = active && d === depth;
         layers.push(
@@ -120,19 +131,23 @@ through the adapter's render. Swapping the editor stays a one-file change.
     const theme = EditorView.theme(
       {
         '&': { backgroundColor: 'var(--color-base-100)', color: 'var(--color-base-content)', fontSize: '1rem' },
-        // The 50vh floor keeps a short entry reading as a writing surface, and because the
-        // contenteditable content area carries the height, a click in the empty space below the
-        // text still lands in the editor and focuses it. The 70ch cap with auto margins holds
-        // the manuscript to a readable measure, centered in whatever width the card gives it.
+        // The 60vh floor keeps the surface reading as the page's center stage even when the
+        // entry is short, and because the contenteditable content area carries the height, a
+        // click in the empty space below the text still lands in the editor and focuses it.
+        // No inner measure cap: the surface fills the card the way a code editor fills its
+        // pane, and the card's own width (the host caps it near 89ch of this face) is the one
+        // constraint. The surface carries tables, attributed directives, and long URLs, so the
+        // ceiling leans toward the code-editor end of the ergonomic band rather than the
+        // long-form ideal; paragraphs wrap comfortably below it.
         '.cm-content': {
           // The theme roots set --font-editor to the self-hosted iA Writer Mono; the inline
           // fallback keeps the surface monospace outside an admin theme wrapper.
           fontFamily: "var(--font-editor, ui-monospace, monospace)",
-          padding: '0.875rem 1.25rem',
-          lineHeight: '1.8',
-          minHeight: '50vh',
-          maxWidth: '70ch',
-          margin: '0 auto',
+          // Vertical padding holds at least one line-height of the body (1.8 x 1rem), with a
+          // touch more below than above (the optical center sits high); the sides then read as
+          // gutters rather than letterboxing.
+          padding: '2rem 1.25rem 2.5rem',
+          minHeight: '60vh',
         },
         '.cm-cursor': { borderLeftColor: 'var(--color-primary)' },
         // A quiet always-on focus hairline. :focus-visible is no escape here: browsers treat a
@@ -145,9 +160,10 @@ through the adapter's render. Swapping the editor stays a one-file change.
           outlineOffset: '-1px',
         },
         '.cm-line': { padding: '0' },
-        // The gutter: directive rows pad left so the text clears the deepest rail stack. It is
-        // static structure (caret-independent), so caret movement shifts no layout.
-        '.cm-cairn-directive-fence, .cm-cairn-directive-content': { paddingLeft: '1.25rem' },
+        // The gutter: directive rows pad left so the text clears the deepest rail stack (the
+        // depth-3 bar ends at 14px, the active one at 15px; 1.5rem keeps ~10px of air beyond
+        // it). Static structure (caret-independent), so caret movement shifts no layout.
+        '.cm-cairn-directive-fence, .cm-cairn-directive-content': { paddingLeft: '1.5rem' },
         ...railRules,
         '.cm-cairn-directive-mark': { color: 'var(--color-muted)' },
         '.cm-cairn-directive-label': { color: 'var(--color-accent)' },
@@ -174,13 +190,41 @@ through the adapter's render. Swapping the editor stays a one-file change.
           color: 'var(--cairn-focus-dim-ink, oklch(66% 0.01 75))',
           backgroundColor: 'transparent',
         },
+        // The rails dim with their text: the rail color-mix reads --cairn-directive-rail-N per
+        // element, so overriding the percentages on dimmed lines re-resolves every bar in place.
+        // Without this the directive block keeps full-strength bars and becomes the one
+        // chromatic object in the dimmed field. The active step needs the override too: focus
+        // mode's lit unit is the caret PARAGRAPH while the caret-block class spans the whole
+        // container, so a container holding a blank line has dimmed rows that still carry the
+        // active rail.
+        '.cm-cairn-focus-dim': {
+          '--cairn-directive-rail-1': 'var(--cairn-focus-dim-rail-1, 24%)',
+          '--cairn-directive-rail-2': 'var(--cairn-focus-dim-rail-2, 28%)',
+          '--cairn-directive-rail-3': 'var(--cairn-focus-dim-rail-3, 32%)',
+          '--cairn-directive-rail-active': 'var(--cairn-focus-dim-rail-active, 36%)',
+        },
+      },
+      { dark: isDark },
+    );
+
+    // The prose posture: the writing instrument. A 72ch measure centered in the card, one type
+    // step up, looser leading. Markup posture (the base theme) keeps the dense fill for tables,
+    // directives, and long URLs. Placed after the base theme in the extension list, so its keys
+    // win the spec-order ties.
+    proseTheme = EditorView.theme(
+      {
+        // Scoped to the content node (not the editor root) so the base theme's root font-size
+        // never contests it, and so the 72ch measure resolves against the prose type step.
+        '.cm-content': { fontSize: '1.0625rem', lineHeight: '1.9', maxWidth: '72ch', margin: '0 auto' },
       },
       { dark: isDark },
     );
+    markupTheme = EditorView.theme({ '.cm-content': { lineHeight: '1.8' } }, { dark: isDark });
 
     modes = modesMod;
     focusCompartment = new stateMod.Compartment();
     typewriterCompartment = new stateMod.Compartment();
+    surfaceCompartment = new stateMod.Compartment();
 
     view = new EditorView({
       parent: host,
@@ -205,6 +249,7 @@ through the adapter's render. Swapping the editor stays a one-file change.
           highlightMod.cairnDirectivePlugin(),
           EditorView.contentAttributes.of({ spellcheck: 'true', autocorrect: 'on', autocapitalize: 'sentences' }),
           theme,
+          surfaceCompartment.of(surface === 'prose' ? proseTheme : markupTheme),
           EditorView.updateListener.of((update) => {
             if (update.docChanged) value = update.state.doc.toString();
           }),
@@ -237,11 +282,13 @@ through the adapter's render. Swapping the editor stays a one-file change.
   $effect(() => {
     const focus = focusMode;
     const typing = typewriter;
-    if (!mounted || !view || !modes || !focusCompartment || !typewriterCompartment) return;
+    const posture = surface;
+    if (!mounted || !view || !modes || !focusCompartment || !typewriterCompartment || !surfaceCompartment) return;
     view.dispatch({
       effects: [
         focusCompartment.reconfigure(focus ? modes.focusMode() : []),
         typewriterCompartment.reconfigure(typing ? modes.typewriterScroll() : []),
+        surfaceCompartment.reconfigure((posture === 'prose' ? proseTheme : markupTheme) ?? []),
       ],
     });
   });

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

@@ -19,6 +19,9 @@ interface Props {
     focusMode?: boolean;
     /** Typewriter scroll: hold the cursor line at vertical center while typing. Off by default. */
     typewriter?: boolean;
+    /** The surface posture. Prose is the writing instrument (72ch measure, larger type, looser
+     *  leading); markup is the working surface (fills the card, denser). Prose by default. */
+    surface?: 'prose' | 'markup';
 }
 /**
  * The `MarkdownEditor` seam (spec §6, seam 5): a thin wrapper over CodeMirror 6 exposing a bindable

package/dist/components/cairn-admin.css

@@ -1,4 +1,4 @@
-@font-face{font-family:'Figtree Variable';font-style:normal;font-display:swap;font-weight:300 900;src:url('./fonts/figtree.woff2') format('woff2')}
+@font-face{font-family:'IBM Plex Sans Variable';font-style:normal;font-display:swap;font-weight:100 700;src:url('./fonts/ibm-plex-sans.woff2') format('woff2')}
 @font-face{font-family:'Bricolage Grotesque Variable';font-style:normal;font-display:swap;font-weight:400 800;src:url('./fonts/bricolage-grotesque.woff2') format('woff2')}
 @font-face{font-family:'iA Writer Mono';font-style:normal;font-display:swap;font-weight:400;src:url('./fonts/ia-writer-mono-latin-400-normal.woff2') format('woff2')}
 @font-face{font-family:'iA Writer Mono';font-style:normal;font-display:swap;font-weight:700;src:url('./fonts/ia-writer-mono-latin-700-normal.woff2') format('woff2')}
@@ -180,6 +180,10 @@
     outline-offset: -1px;
   }
 
+  :where([data-theme="cairn-admin"], [data-theme="cairn-admin-dark"]) .cairn-doc-title-dim:not(:focus) {
+    color: var(--cairn-focus-dim-ink);
+  }
+
   :where([data-theme="cairn-admin"], [data-theme="cairn-admin-dark"]) .menu li > button:not(.btn) {
     font: inherit;
     color: inherit;
@@ -3278,6 +3282,10 @@
     margin-inline: calc(var(--spacing) * -4);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .mx-1 {
+    margin-inline: calc(var(--spacing) * 1);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .mx-auto {
     margin-inline: auto;
   }
@@ -3294,10 +3302,6 @@
     }
   }
 
-  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .my-1 {
-    margin-block: calc(var(--spacing) * 1);
-  }
-
   @layer daisyui.l1.l2.l3 {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .breadcrumbs {
       max-width: 100%;
@@ -3938,6 +3942,10 @@
     max-height: 60vh;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .min-h-16 {
+    min-height: calc(var(--spacing) * 16);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .min-h-64 {
     min-height: calc(var(--spacing) * 64);
   }
@@ -4052,6 +4060,18 @@
     max-width: 30%;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-w-\[49rem\] {
+    max-width: 49rem;
+  }
+
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-w-\[56rem\] {
+    max-width: 56rem;
+  }
+
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-w-\[72ch\] {
+    max-width: 72ch;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-w-full {
     max-width: 100%;
   }
@@ -4246,6 +4266,10 @@
     gap: calc(var(--spacing) * 6);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .gap-10 {
+    gap: calc(var(--spacing) * 10);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) :where(.space-y-1 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
@@ -4626,6 +4650,10 @@
     padding-inline: calc(var(--spacing) * 6);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .py-0 {
+    padding-block: calc(var(--spacing) * 0);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -4702,6 +4730,10 @@
     font-family: var(--font-display);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .font-\[family-name\:var\(--font-editor\,ui-monospace\,monospace\)\] {
+    font-family: var(--font-editor, ui-monospace,monospace);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .font-mono {
     font-family: var(--font-mono);
   }
@@ -4760,6 +4792,16 @@
     font-size: .8125rem;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .text-\[1\.0625rem\] {
+    font-size: 1.0625rem;
+  }
+
+  @layer daisyui.l1.l2 {
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .textarea-sm {
+      font-size: max(var(--font-size, .75rem), .75rem);
+    }
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .leading-relaxed {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
@@ -5379,6 +5421,12 @@
     }
   }
 
+  @media (width >= 64rem) {
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .lg\:grid-cols-\[1fr_17rem\] {
+      grid-template-columns: 1fr 17rem;
+    }
+  }
+
   @media (width >= 64rem) {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .lg\:grid-cols-\[1fr_20rem\] {
       grid-template-columns: 1fr 20rem;
@@ -5397,6 +5445,12 @@
     }
   }
 
+  @media (width >= 64rem) {
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .lg\:gap-10 {
+      gap: calc(var(--spacing) * 10);
+    }
+  }
+
   @media (width >= 64rem) {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .lg\:border-r {
       border-right-style: var(--tw-border-style);
@@ -5422,6 +5476,18 @@
     }
   }
 
+  @media (width >= 64rem) {
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .lg\:px-10 {
+      padding-inline: calc(var(--spacing) * 10);
+    }
+  }
+
+  @media (width >= 64rem) {
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .lg\:py-8 {
+      padding-block: calc(var(--spacing) * 8);
+    }
+  }
+
   @starting-style {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .starting\:-translate-y-2 {
       --tw-translate-y: calc(var(--spacing) * -2);
@@ -5438,7 +5504,7 @@
 
 [data-theme="cairn-admin"] {
   color-scheme: light;
-  --font-body: "Figtree Variable", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-body: "IBM Plex Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   --font-display: "Bricolage Grotesque Variable", var(--font-body);
   --font-editor: "iA Writer Mono", ui-monospace, monospace;
   font-family: var(--font-body);
@@ -5463,6 +5529,10 @@
   --cairn-directive-ink-active: oklch(46% .16 300);
   --cairn-code-chip: oklch(94.5% .008 75);
   --cairn-focus-dim-ink: oklch(66% .01 75);
+  --cairn-focus-dim-rail-1: 24%;
+  --cairn-focus-dim-rail-2: 28%;
+  --cairn-focus-dim-rail-3: 32%;
+  --cairn-focus-dim-rail-active: 36%;
   --color-neutral: oklch(32% .012 75);
   --color-neutral-content: oklch(96% .004 75);
   --color-info: oklch(52% .12 240);
@@ -5489,7 +5559,7 @@
 
 [data-theme="cairn-admin-dark"] {
   color-scheme: dark;
-  --font-body: "Figtree Variable", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-body: "IBM Plex Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   --font-display: "Bricolage Grotesque Variable", var(--font-body);
   --font-editor: "iA Writer Mono", ui-monospace, monospace;
   font-family: var(--font-body);
@@ -5514,6 +5584,10 @@
   --cairn-directive-ink-active: oklch(82% .14 300);
   --cairn-code-chip: oklch(29.5% .012 75);
   --cairn-focus-dim-ink: oklch(53% .01 75);
+  --cairn-focus-dim-rail-1: 21%;
+  --cairn-focus-dim-rail-2: 25%;
+  --cairn-focus-dim-rail-3: 29%;
+  --cairn-focus-dim-rail-active: 33%;
   --color-neutral: oklch(80% .01 75);
   --color-neutral-content: oklch(22% .008 75);
   --color-info: oklch(72% .12 240);

package/dist/components/fonts/{Figtree-OFL.txt → IBMPlexSans-OFL.txt}

@@ -1,4 +1,4 @@
-Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree)
+Copyright 2019 IBM Corp. All rights reserved. IBMPlexSans-Italic[wdth,wght].ttf: Copyright 2019 IBM Corp. All rights reserved.
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:
@@ -18,7 +18,7 @@ with others.
 
 The OFL allows the licensed fonts to be used, studied, modified and
 redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
+fonts, including any derivative works, can be bundled, embedded,
 redistributed and/or sold with any software provided that any reserved
 names are not used by derivative works. The fonts and derivatives,
 however, cannot be released under any other type of license. The

package/dist/sveltekit/static-admin-page.js

@@ -29,7 +29,7 @@ const SHARED_STYLE = `:root {
   --shadow: 0 1px 2px oklch(28% 0.02 75 / 0.05), 0 18px 40px -12px oklch(28% 0.02 75 / 0.16);
   --radius-box: 1rem;
   --radius-field: 0.625rem;
-  --font: 'Figtree Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --font: 'IBM Plex Sans Variable', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 @media (prefers-color-scheme: dark) {
   :root {
@@ -104,7 +104,7 @@ main {
 h1 {
   margin: 0 0 0.75rem;
   font-size: 1.6rem;
-  font-weight: 800;
+  font-weight: 700;
   letter-spacing: -0.02em;
   line-height: 1.15;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glw907/cairn-cms",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "description": "Embedded, magic-link, GitHub-committing CMS for SvelteKit/Cloudflare sites.",
   "type": "module",
   "sideEffects": [

package/src/lib/components/AdminLayout.svelte

@@ -244,8 +244,10 @@ identical on every host regardless of the site's own theme.
 
     <div class="drawer-content flex flex-col">
       <!-- 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">
+           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">
         <div class="flex-none lg:hidden">
           <label for="cairn-drawer" aria-label="Open menu" class="btn btn-square btn-ghost">
             <MenuIcon class="h-5 w-5" />
@@ -293,7 +295,7 @@ identical on every host regardless of the site's own theme.
         </div>
       </div>
 
-      <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 +382,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. -->