@glw907/cairn-cms 0.52.0 → 0.52.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project are recorded here, most recent first.
 
+## 0.52.1
+
+Two field reports from the first 0.52.0 session, both in-editor polish with no consumer action.
+In Write mode the editor card now hugs the manuscript (the column caps at 48rem and centers), so
+a wide window no longer frames empty space inside the card; Preview keeps the full column for
+its device widths. The directive rails take a 4px gap between nested bars (twice the bar
+weight, so two rails read as two lines), and directive text gains a matching step of gutter.
+
 ## 0.52.0
 
 The editor became a quiet writing surface. The manuscript renders in self-hosted iA Writer Mono

package/dist/components/EditPage.svelte

@@ -638,7 +638,12 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   <CsrfField />
   {#if data.isNew}<input type="hidden" name="new" value="1" />{/if}
 
-  <div class="lg:order-1">
+  <!-- In Write mode the card hugs the manuscript: the column caps near the 70ch measure and
+       centers, so the card frame never spans emptiness on a wide window. Preview keeps the full
+       column for its device frames. 48rem = the measure (70ch of the editor face at 1rem is
+       about 42rem) plus the surface padding and the card borders, with enough left over that
+       the toolbar keeps its single row. -->
+  <div class={mode === 'preview' ? 'lg:order-1' : 'lg:order-1 mx-auto w-full max-w-[48rem]'}>
     {#if titleField}
       <!-- The hoisted document title: large, borderless, in the display face, so the manuscript
            reads as the protagonist. It submits as name="title", the same field as before. The

package/dist/components/MarkdownEditor.svelte

@@ -75,9 +75,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 +92,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(
@@ -145,9 +146,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)' },

package/dist/components/cairn-admin.css

@@ -4052,6 +4052,10 @@
     max-width: 30%;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-w-\[48rem\] {
+    max-width: 48rem;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-w-full {
     max-width: 100%;
   }

package/package.json

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

package/src/lib/components/EditPage.svelte

@@ -638,7 +638,12 @@ transient flashes, and the editor card's footer holds the word count and the Mar
   <CsrfField />
   {#if data.isNew}<input type="hidden" name="new" value="1" />{/if}
 
-  <div class="lg:order-1">
+  <!-- In Write mode the card hugs the manuscript: the column caps near the 70ch measure and
+       centers, so the card frame never spans emptiness on a wide window. Preview keeps the full
+       column for its device frames. 48rem = the measure (70ch of the editor face at 1rem is
+       about 42rem) plus the surface padding and the card borders, with enough left over that
+       the toolbar keeps its single row. -->
+  <div class={mode === 'preview' ? 'lg:order-1' : 'lg:order-1 mx-auto w-full max-w-[48rem]'}>
     {#if titleField}
       <!-- The hoisted document title: large, borderless, in the display face, so the manuscript
            reads as the protagonist. It submits as name="title", the same field as before. The

package/src/lib/components/MarkdownEditor.svelte

@@ -75,9 +75,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 +92,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(
@@ -145,9 +146,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)' },