@glw907/cairn-cms 0.52.1 → 0.53.0

package/src/lib/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');
@@ -121,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
@@ -176,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,
@@ -207,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();
           }),
@@ -239,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/src/lib/components/cairn-admin.css

@@ -1,4 +1,4 @@
-/* Cairn's own typefaces, self-hosted so the admin needs no external font request. Figtree carries
+/* Cairn's own typefaces, self-hosted so the admin needs no external font request. IBM Plex Sans carries
    the body and UI (friendly, highly legible at small sizes); Bricolage Grotesque gives the brand and
    the page headings a distinct voice; iA Writer Mono is the editor writing surface. The first two are
    variable (one file spans the weight range), the editor face ships four static files, and all three
@@ -10,7 +10,7 @@
    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-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);
@@ -63,6 +63,14 @@
      ever sits on; on the chips it measured as low as 2.63:1. Do not lighten without
      re-checking. */
   --cairn-focus-dim-ink: oklch(66% 0.01 75);
+  /* Focus mode's rail percentages: the directive bars dim with their text (about a third of the
+     quiet 72/82/92 ramp), so a dimmed block keeps its structure without staying the one
+     chromatic object in the field. Deliberately sub-3:1, the same transient-state call as the
+     dim ink; the quiet ramp is one toggle away. */
+  --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% 0.012 75);
   --color-neutral-content: oklch(96% 0.004 75);
 
@@ -103,7 +111,7 @@
    >= 4.5:1 contrast on the dark bases. The polish pass tunes these values against the reference. */
 [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);
@@ -119,6 +127,9 @@
   --color-base-300: oklch(30% 0.014 75);
   --color-base-content: oklch(93% 0.006 75);
 
+  /* Locked pair: pressed footer-toggle text (text-primary on the bg-primary/10 plate over
+     dark base-100) measures 4.66:1, only 0.16 above the AA floor. Do not darken dark
+     --color-primary without re-checking that pair. */
   --color-primary: oklch(68% 0.18 293);
   --color-primary-content: oklch(20% 0.04 293);
   --color-secondary: oklch(72% 0.02 75);
@@ -153,6 +164,12 @@
      the proposed 50% measured 2.74:1, under the 3:1 floor, so it sits at 53%. Locked pair on
      base-100: 3.12:1. Do not darken without re-checking. */
   --cairn-focus-dim-ink: oklch(53% 0.01 75);
+  /* Focus mode's rail percentages on dark, a third of the quiet 62/74/86 ramp; the same
+     deliberate sub-3:1 transient-state call as the dim ink. */
+  --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% 0.01 75);
   --color-neutral-content: oklch(22% 0.008 75);
 
@@ -260,6 +277,13 @@
     outline-offset: -1px;
   }
 
+  /* Under focus mode the document title eases back with the rest of the context: at 30px bold
+     it would otherwise be the strongest ink on the page and pull the eye off the lit
+     paragraph. Its own focus restores full ink, so editing the title is never dimmed. */
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .cairn-doc-title-dim:not(:focus) {
+    color: var(--cairn-focus-dim-ink);
+  }
+
   /* Menu items come as anchors or buttons, and the omitted Preflight is what made them match:
      without it a button keeps the UA chrome (outset border, gray fill, centered system-font
      text) while its anchor siblings render flat. This scoped substitute levels the buttons to

package/src/lib/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/src/lib/sveltekit/static-admin-page.ts

@@ -32,7 +32,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 {
@@ -107,7 +107,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;
 }