@glw907/cairn-cms 0.51.0 → 0.52.0

package/dist/components/editor-highlight.js

@@ -5,20 +5,37 @@ import { HighlightStyle } from '@codemirror/language';
 import { tags } from '@lezer/highlight';
 import { Decoration, ViewPlugin } from '@codemirror/view';
 import { RangeSetBuilder } from '@codemirror/state';
-import { directiveLineKind, fenceDepths, findInlineDirectives } from './markdown-directives.js';
+import { caretContainerRange, directiveLineKind, fenceScan, fenceTokens, findInlineDirectives, } from './markdown-directives.js';
 /** Markdown token colors over the admin theme variables. */
 export function cairnHighlightStyle() {
+    // Rule order is load-bearing. HighlightStyle emits its CSS in spec order, so on a span that
+    // carries several classes (a marker inherits its heading's or link's class on top of its own
+    // processingInstruction one) the later rule wins the tie. The url and processingInstruction
+    // rules sit last so the URL part of a link and every syntax marker stay muted under the
+    // heading, emphasis, and link inks.
     return HighlightStyle.define([
-        { tag: tags.heading, color: 'var(--color-primary)', fontWeight: '700' },
+        { tag: tags.heading1, fontSize: '1.5em', fontWeight: '700', color: 'var(--color-base-content)' },
+        { tag: tags.heading2, fontSize: '1.3em', fontWeight: '700', color: 'var(--color-base-content)' },
+        { tag: tags.heading3, fontSize: '1.17em', fontWeight: '700', color: 'var(--color-base-content)' },
+        // h4 and deeper share the weight only; body size keeps the low levels from outranking h3.
+        { tag: tags.heading, fontWeight: '700', color: 'var(--color-base-content)' },
         { tag: tags.strong, fontWeight: '700' },
         { tag: tags.emphasis, fontStyle: 'italic' },
         { tag: tags.strikethrough, textDecoration: 'line-through' },
-        { tag: tags.link, color: 'var(--color-info)' },
-        { tag: tags.url, color: 'var(--color-info)' },
-        { tag: tags.quote, color: 'var(--color-muted)', fontStyle: 'italic' },
-        { tag: tags.monospace, color: 'var(--color-accent)' },
-        { tag: tags.processingInstruction, color: 'var(--color-muted)' },
+        // Quote TEXT is content, so it keeps the full ink; muted means machinery, and only the >
+        // marker (QuoteMark, under processingInstruction below) recedes to it.
+        { tag: tags.quote, color: 'var(--color-base-content)', fontStyle: 'italic' },
         { tag: tags.list, color: 'var(--color-muted)' },
+        { tag: tags.link, color: 'var(--color-accent)' },
+        { tag: tags.url, color: 'var(--color-muted)' },
+        {
+            tag: tags.monospace,
+            color: 'var(--color-base-content)',
+            backgroundColor: 'var(--cairn-code-chip)',
+            borderRadius: '0.25rem',
+            padding: '0.05em 0.3em',
+        },
+        { tag: tags.processingInstruction, color: 'var(--color-muted)', fontWeight: '400' },
     ]);
 }
 // The machinery lines explain themselves on hover, so an editor who has never seen ::: syntax
@@ -30,28 +47,50 @@ const fenceLines = DEPTH_STEPS.map((d) => Decoration.line({ class: `cm-cairn-dir
 const contentLines = DEPTH_STEPS.map((d) => Decoration.line({ class: `cm-cairn-directive-content cm-cairn-depth-${d}` }));
 const leafLine = Decoration.line({ class: 'cm-cairn-directive-leaf', attributes: { title: MACHINERY_HINT } });
 const inlineMark = Decoration.mark({ class: 'cm-cairn-directive-inline' });
+// Within a fence line, machinery (colons, brackets, braces) dims to the marker tone while the
+// directive name and label keep a depth-stepped ink: meaning over machinery.
+const fenceMark = Decoration.mark({ class: 'cm-cairn-directive-mark' });
+const fenceLabels = DEPTH_STEPS.map((d) => Decoration.mark({ class: `cm-cairn-directive-label cm-cairn-depth-${d}` }));
+// Cursor-aware emphasis: every row of the container the caret sits inside, fence and content
+// alike, carries this class on top of its depth classes; the theme steps that block's rail and
+// label ink up one notch while the other containers sit quieter.
+const caretBlockLine = Decoration.line({ class: 'cm-cairn-caret-block' });
 // Depth needs the whole document, since a visible line's containers can open above the viewport.
 // One regex pass per line, linear in the document; at admin entry sizes (tens of kilobytes) that
-// is well under a millisecond. The plugin caches the result, so the scan reruns only when the
-// document changes and a scroll rebuilds the viewport decorations from the cached array.
-function docDepths(view) {
+// is well under a millisecond. The plugin caches the fence scan, so it reruns only when the
+// document changes; a scroll or a caret move rebuilds the viewport decorations from the cached
+// scan.
+function docLines(view) {
     const doc = view.state.doc;
     const lines = [];
     for (let n = 1; n <= doc.lines; n++)
         lines.push(doc.line(n).text);
-    return fenceDepths(lines);
+    return lines;
 }
-function buildDirectiveDecorations(view, depths) {
+function buildDirectiveDecorations(view, scan) {
+    const { depths } = scan;
     const builder = new RangeSetBuilder();
+    // The caret's container, one helper call over the cached scan per rebuild. Line decorations
+    // at the same position must enter the builder in add order, so the caret-block class goes in
+    // as its own line decoration just ahead of the row's depth decoration.
+    const caretLine = view.state.doc.lineAt(view.state.selection.main.head).number - 1;
+    const caret = caretContainerRange(scan, caretLine);
     for (const { from, to } of view.visibleRanges) {
         for (let pos = from; pos <= to;) {
             const line = view.state.doc.lineAt(pos);
             const kind = directiveLineKind(line.text);
             const depth = Math.min(depths[line.number - 1] ?? 0, DEPTH_STEPS.length);
+            if (caret && line.number - 1 >= caret.fromLine && line.number - 1 <= caret.toLine) {
+                builder.add(line.from, line.from, caretBlockLine);
+            }
             // A fence-shaped line at depth 0 is one the depth scan disowned (a documented example
             // inside a code block, outside any container); it gets no machinery treatment.
-            if (kind === 'fence' && depth > 0)
+            if (kind === 'fence' && depth > 0) {
                 builder.add(line.from, line.from, fenceLines[depth - 1]);
+                for (const token of fenceTokens(line.text)) {
+                    builder.add(line.from + token.from, line.from + token.to, token.kind === 'mark' ? fenceMark : fenceLabels[depth - 1]);
+                }
+            }
             else if (kind === 'leaf')
                 builder.add(line.from, line.from, leafLine);
             else if (kind === null) {
@@ -70,16 +109,18 @@ function buildDirectiveDecorations(view, depths) {
 export function cairnDirectivePlugin() {
     return ViewPlugin.fromClass(class {
         decorations;
-        depths;
+        scan;
         constructor(view) {
-            this.depths = docDepths(view);
-            this.decorations = buildDirectiveDecorations(view, this.depths);
+            this.scan = fenceScan(docLines(view));
+            this.decorations = buildDirectiveDecorations(view, this.scan);
         }
         update(update) {
             if (update.docChanged)
-                this.depths = docDepths(update.view);
-            if (update.docChanged || update.viewportChanged)
-                this.decorations = buildDirectiveDecorations(update.view, this.depths);
+                this.scan = fenceScan(docLines(update.view));
+            // A selection change rebuilds too, so the caret-block emphasis follows the cursor; the
+            // fence scan stays cached, keeping a caret move at viewport cost.
+            if (update.docChanged || update.viewportChanged || update.selectionSet)
+                this.decorations = buildDirectiveDecorations(update.view, this.scan);
         }
     }, { decorations: (v) => v.decorations });
 }

package/dist/components/editor-modes.d.ts

@@ -0,0 +1,26 @@
+import { type Extension } from '@codemirror/state';
+/** An inclusive 0-based line range. */
+export interface LineRange {
+    fromLine: number;
+    toLine: number;
+}
+/**
+ * The contiguous non-blank block around the caret line, the unit focus mode keeps at full ink.
+ * On a blank line the caret stands alone; the walk clamps at the document edges, and an
+ * out-of-range caret clamps into the document first.
+ */
+export declare function paragraphRange(lines: string[], caretLine: number): LineRange;
+/**
+ * Focus mode: a line class (`cm-cairn-focus-dim`) on every line outside the caret's paragraph.
+ * The class only marks the lines; the dim ink itself lives in the editor theme so the per-theme
+ * `--cairn-focus-dim-ink` variable resolves it.
+ */
+export declare function focusMode(): Extension;
+/**
+ * Typewriter scroll: on every doc change, recenter the selection head vertically. An update
+ * listener may not dispatch while its update runs, so the recenter is queued as a microtask:
+ * it fires as soon as the update finishes, still ahead of the next paint, where an animation
+ * frame would trail the edit by a frame. The isConnected guard skips a view destroyed in the
+ * queue window.
+ */
+export declare function typewriterScroll(): Extension;

package/dist/components/editor-modes.js

@@ -0,0 +1,92 @@
+// The iA writing modes: focus mode dims every line outside the caret's paragraph, and typewriter
+// scroll holds the cursor line at vertical center while typing. Client-only, like editor-highlight:
+// MarkdownEditor reaches this module through a dynamic import, so the static @codemirror imports
+// here never enter a server bundle (guarded by the editor-boundary test).
+import { Decoration, EditorView, ViewPlugin, } from '@codemirror/view';
+import { RangeSetBuilder } from '@codemirror/state';
+const isBlank = (line) => !line || /^\s*$/.test(line);
+/**
+ * The contiguous non-blank block around the caret line, the unit focus mode keeps at full ink.
+ * On a blank line the caret stands alone; the walk clamps at the document edges, and an
+ * out-of-range caret clamps into the document first.
+ */
+export function paragraphRange(lines, caretLine) {
+    const last = Math.max(lines.length - 1, 0);
+    const caret = Math.min(Math.max(caretLine, 0), last);
+    if (isBlank(lines[caret]))
+        return { fromLine: caret, toLine: caret };
+    let fromLine = caret;
+    while (fromLine > 0 && !isBlank(lines[fromLine - 1]))
+        fromLine--;
+    let toLine = caret;
+    while (toLine < last && !isBlank(lines[toLine + 1]))
+        toLine++;
+    return { fromLine, toLine };
+}
+const dimLine = Decoration.line({ class: 'cm-cairn-focus-dim' });
+// The line cache mirrors editor-highlight's: one full-document read per doc change, so a caret
+// move or scroll rebuilds the viewport decorations from the cached array.
+function docLines(view) {
+    const doc = view.state.doc;
+    const lines = [];
+    for (let n = 1; n <= doc.lines; n++)
+        lines.push(doc.line(n).text);
+    return lines;
+}
+function buildFocusDecorations(view, lines) {
+    const builder = new RangeSetBuilder();
+    const caretLine = view.state.doc.lineAt(view.state.selection.main.head).number - 1;
+    const paragraph = paragraphRange(lines, caretLine);
+    for (const { from, to } of view.visibleRanges) {
+        for (let pos = from; pos <= to;) {
+            const line = view.state.doc.lineAt(pos);
+            const n = line.number - 1;
+            if (n < paragraph.fromLine || n > paragraph.toLine)
+                builder.add(line.from, line.from, dimLine);
+            pos = line.to + 1;
+        }
+    }
+    return builder.finish();
+}
+/**
+ * Focus mode: a line class (`cm-cairn-focus-dim`) on every line outside the caret's paragraph.
+ * The class only marks the lines; the dim ink itself lives in the editor theme so the per-theme
+ * `--cairn-focus-dim-ink` variable resolves it.
+ */
+export function focusMode() {
+    return ViewPlugin.fromClass(class {
+        decorations;
+        lines;
+        constructor(view) {
+            this.lines = docLines(view);
+            this.decorations = buildFocusDecorations(view, this.lines);
+        }
+        update(update) {
+            if (update.docChanged)
+                this.lines = docLines(update.view);
+            if (update.docChanged || update.viewportChanged || update.selectionSet)
+                this.decorations = buildFocusDecorations(update.view, this.lines);
+        }
+    }, { decorations: (v) => v.decorations });
+}
+/**
+ * Typewriter scroll: on every doc change, recenter the selection head vertically. An update
+ * listener may not dispatch while its update runs, so the recenter is queued as a microtask:
+ * it fires as soon as the update finishes, still ahead of the next paint, where an animation
+ * frame would trail the edit by a frame. The isConnected guard skips a view destroyed in the
+ * queue window.
+ */
+export function typewriterScroll() {
+    return EditorView.updateListener.of((update) => {
+        if (!update.docChanged)
+            return;
+        const view = update.view;
+        queueMicrotask(() => {
+            if (!view.dom.isConnected)
+                return;
+            view.dispatch({
+                effects: EditorView.scrollIntoView(view.state.selection.main.head, { y: 'center' }),
+            });
+        });
+    });
+}

package/dist/components/fonts/iAWriterMono-OFL.txt

@@ -0,0 +1,100 @@
+# iA Writer Typeface
+
+Copyright © 2018 Information Architects Inc. with Reserved Font Name "iA Writer"
+
+# Based on IBM Plex Typeface
+
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+
+# License
+
+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:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+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,
+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
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/components/markdown-directives.d.ts

@@ -1,15 +1,56 @@
 /** Classify a whole line as a container fence, a leaf directive, or neither. */
 export declare function directiveLineKind(line: string): 'fence' | 'leaf' | null;
+/** One pass over the document: each line's container depth alongside its fence role. */
+export interface FenceScan {
+    /** The 1-based container depth per line, or null outside any container. */
+    depths: (number | null)[];
+    /** Whether a line opened or closed a container, or null for everything else. A fence-shaped
+     *  line the code-block tracking disowned is null too, so the role array is the one source of
+     *  truth for pairing and no caller re-parses a line the scan already judged. */
+    roles: ('opener' | 'closer' | null)[];
+}
 /**
- * The 1-based container depth each line sits at, or null outside any container. A named fence
- * opens a container; a bare fence closes the most recent one (colon counts are not trusted for
- * pairing, since authors vary them). An opener and its closer share the opener's depth, and a
- * line between them carries the depth of its innermost container. Lines inside a fenced code
- * block are plain content, so a documented ::: example cannot open a phantom container running
- * to end of document. Author errors are tolerated: an unmatched closer reads as depth 1 and the
- * count never goes below zero.
+ * Scan the document's container structure in one pass. A named fence opens a container; a bare
+ * fence closes the most recent one (colon counts are not trusted for pairing, since authors
+ * vary them). An opener and its closer share the opener's depth, and a line between them
+ * carries the depth of its innermost container. Lines inside a fenced code block are plain
+ * content, so a documented ::: example cannot open a phantom container running to end of
+ * document. Author errors are tolerated: an unmatched closer reads as depth 1 and the count
+ * never goes below zero.
  */
+export declare function fenceScan(lines: string[]): FenceScan;
+/** The depth half of {@link fenceScan}, for callers that need no roles. */
 export declare function fenceDepths(lines: string[]): (number | null)[];
+/** The inclusive line span of one directive container. */
+export interface ContainerRange {
+    fromLine: number;
+    toLine: number;
+    depth: number;
+}
+/**
+ * The innermost container around a caret line, as an inclusive line range, or null outside any
+ * container. Works from the cached scan without re-parsing: the caret line's own depth names
+ * the container (fence rows carry the depth they delimit, so a caret on a fence belongs to
+ * that fence's container), and within a container the only same-depth real fences are its
+ * opener and closer (nested containers sit deeper, siblings sit outside), so the nearest
+ * opener above and the nearest closer below bound the range. The scan's roles already disown a
+ * fence-shaped line inside a code block, so a documented example can never clip the range. An
+ * unclosed container runs to the document end.
+ */
+export declare function caretContainerRange(scan: FenceScan, caretLine: number): ContainerRange | null;
+/** One span of a fence line, in line-local offsets: machinery (`mark`) or meaning (`label`). */
+export interface FenceToken {
+    from: number;
+    to: number;
+    kind: 'mark' | 'label';
+}
+/**
+ * Split a fence line into machinery and meaning. The colon run, the label's brackets, and the
+ * whole {attrs} group are machinery; the directive name and the label text are meaning, the
+ * parts an editor reads. A bare closer is a single machinery span, and a non-fence line yields
+ * no spans at all.
+ */
+export declare function fenceTokens(line: string): FenceToken[];
 /** Inline directive ranges (`:name[...]{...}`) within a line of text. */
 export declare function findInlineDirectives(text: string): {
     from: number;

package/dist/components/markdown-directives.js

@@ -3,9 +3,11 @@
 // CodeMirror decoration plugin wraps them.
 // A container fence: three or more colons, then an optional name, an optional [label], and
 // optional {attrs}, in remark-directive order. The name is captured so the depth scan below can
-// tell an opener (named) from a closer (bare colons). Matching is tolerant of stray whitespace,
-// the same posture as the leaf form: a slightly off fence should still read as machinery.
-const FENCE = /^\s{0,3}:{3,}\s*([\w-]*)\s*(\[[^\]]*\])?\s*(\{[^}]*\})?\s*$/;
+// tell an opener (named) from a closer (bare colons), and the d flag records each group's span
+// so fenceTokens can split the line without re-parsing. Matching is tolerant of stray
+// whitespace, the same posture as the leaf form: a slightly off fence should still read as
+// machinery.
+const FENCE = /^\s{0,3}(:{3,})\s*([\w-]*)\s*(\[[^\]]*\])?\s*(\{[^}]*\})?\s*$/d;
 const LEAF = /^\s{0,3}::[\w-]+(\[[^\]]*\])?(\{[^}]*\})?\s*$/;
 const INLINE = /(?<![:\w]):[\w-]+\[[^\]]*\](\{[^}]*\})?/g;
 // A fenced code block's delimiter: three or more backticks or tildes, indent-tolerant like the
@@ -21,16 +23,17 @@ export function directiveLineKind(line) {
     return null;
 }
 /**
- * The 1-based container depth each line sits at, or null outside any container. A named fence
- * opens a container; a bare fence closes the most recent one (colon counts are not trusted for
- * pairing, since authors vary them). An opener and its closer share the opener's depth, and a
- * line between them carries the depth of its innermost container. Lines inside a fenced code
- * block are plain content, so a documented ::: example cannot open a phantom container running
- * to end of document. Author errors are tolerated: an unmatched closer reads as depth 1 and the
- * count never goes below zero.
+ * Scan the document's container structure in one pass. A named fence opens a container; a bare
+ * fence closes the most recent one (colon counts are not trusted for pairing, since authors
+ * vary them). An opener and its closer share the opener's depth, and a line between them
+ * carries the depth of its innermost container. Lines inside a fenced code block are plain
+ * content, so a documented ::: example cannot open a phantom container running to end of
+ * document. Author errors are tolerated: an unmatched closer reads as depth 1 and the count
+ * never goes below zero.
  */
-export function fenceDepths(lines) {
+export function fenceScan(lines) {
     const depths = [];
+    const roles = [];
     let open = 0;
     // The marker character that opened the current code block, or null outside one. Only a line
     // opening with the same character closes it, so tildes inside a backtick block stay literal.
@@ -43,27 +46,100 @@ export function fenceDepths(lines) {
             else if (code[1][0] === codeMarker)
                 codeMarker = null;
             depths.push(open > 0 ? open : null);
+            roles.push(null);
             continue;
         }
         if (codeMarker !== null) {
             depths.push(open > 0 ? open : null);
+            roles.push(null);
             continue;
         }
         const fence = FENCE.exec(line);
         if (!fence) {
             depths.push(open > 0 ? open : null);
+            roles.push(null);
         }
-        else if (fence[1]) {
+        else if (fence[2]) {
             open += 1;
             depths.push(open);
+            roles.push('opener');
         }
         else {
             depths.push(Math.max(open, 1));
+            roles.push('closer');
             if (open > 0)
                 open -= 1;
         }
     }
-    return depths;
+    return { depths, roles };
+}
+/** The depth half of {@link fenceScan}, for callers that need no roles. */
+export function fenceDepths(lines) {
+    return fenceScan(lines).depths;
+}
+/**
+ * The innermost container around a caret line, as an inclusive line range, or null outside any
+ * container. Works from the cached scan without re-parsing: the caret line's own depth names
+ * the container (fence rows carry the depth they delimit, so a caret on a fence belongs to
+ * that fence's container), and within a container the only same-depth real fences are its
+ * opener and closer (nested containers sit deeper, siblings sit outside), so the nearest
+ * opener above and the nearest closer below bound the range. The scan's roles already disown a
+ * fence-shaped line inside a code block, so a documented example can never clip the range. An
+ * unclosed container runs to the document end.
+ */
+export function caretContainerRange(scan, caretLine) {
+    const { depths, roles } = scan;
+    const depth = depths[caretLine] ?? null;
+    if (depth === null)
+        return null;
+    let fromLine = caretLine;
+    for (let i = caretLine; i >= 0; i--) {
+        if (depths[i] === depth && roles[i] === 'opener') {
+            fromLine = i;
+            break;
+        }
+    }
+    let toLine = depths.length - 1;
+    for (let i = caretLine; i < depths.length; i++) {
+        if (depths[i] === depth && roles[i] === 'closer') {
+            toLine = i;
+            break;
+        }
+    }
+    return { fromLine, toLine, depth };
+}
+/**
+ * Split a fence line into machinery and meaning. The colon run, the label's brackets, and the
+ * whole {attrs} group are machinery; the directive name and the label text are meaning, the
+ * parts an editor reads. A bare closer is a single machinery span, and a non-fence line yields
+ * no spans at all.
+ */
+export function fenceTokens(line) {
+    const m = FENCE.exec(line);
+    if (!m?.indices)
+        return [];
+    // A group's span exists whenever the group matched: group 1 (the colons) always does on a
+    // fence, and the optional groups are read only behind their own m[n] guard.
+    const indices = m.indices;
+    const out = [];
+    const [colonFrom, colonTo] = indices[1];
+    out.push({ from: colonFrom, to: colonTo, kind: 'mark' });
+    if (m[2]) {
+        const [from, to] = indices[2];
+        out.push({ from, to, kind: 'label' });
+    }
+    if (m[3]) {
+        const [from, to] = indices[3];
+        out.push({ from, to: from + 1, kind: 'mark' });
+        if (to - from > 2)
+            out.push({ from: from + 1, to: to - 1, kind: 'label' });
+        out.push({ from: to - 1, to, kind: 'mark' });
+    }
+    if (m[4]) {
+        const [from, to] = indices[4];
+        out.push({ from, to, kind: 'mark' });
+    }
+    return out;
 }
 /** Inline directive ranges (`:name[...]{...}`) within a line of text. */
 export function findInlineDirectives(text) {

package/package.json

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

package/src/lib/components/EditPage.svelte

@@ -178,6 +178,25 @@ transient flashes, and the editor card's footer holds the word count and the Mar
     device = id;
     localStorage.setItem(deviceStorageKey, id);
   }
+  // The writing modes (focus, typewriter), per-browser preferences on the device pick's pattern:
+  // off by default, read in an effect so SSR never touches localStorage, written by the
+  // toolbar's toggles. The effect tracks nothing reactive, so it runs once.
+  const focusStorageKey = 'cairn-editor-focus-mode';
+  const typewriterStorageKey = 'cairn-editor-typewriter';
+  let focusMode = $state(false);
+  let typewriter = $state(false);
+  $effect(() => {
+    focusMode = localStorage.getItem(focusStorageKey) === 'true';
+    typewriter = localStorage.getItem(typewriterStorageKey) === 'true';
+  });
+  function setFocusMode(on: boolean) {
+    focusMode = on;
+    localStorage.setItem(focusStorageKey, String(on));
+  }
+  function setTypewriter(on: boolean) {
+    typewriter = on;
+    localStorage.setItem(typewriterStorageKey, String(on));
+  }
   const activeDevice = $derived(previewDevice(device));
   // The iframe document around the rendered html: the site's stylesheets from the adapter's
   // preview knob, or a styleless document (behind the hint below) when the site sets none.
@@ -641,7 +660,17 @@ transient flashes, and the editor card's footer holds the word count and the Mar
       role="group"
       aria-label="Editor"
     >
-      <EditorToolbar {format} {mode} onMode={setMode} {device} onDevice={setDevice}>
+      <EditorToolbar
+        {format}
+        {mode}
+        onMode={setMode}
+        {device}
+        onDevice={setDevice}
+        {focusMode}
+        onFocusMode={setFocusMode}
+        {typewriter}
+        onTypewriter={setTypewriter}
+      >
         {#snippet insertControls()}
           <!-- Plain triggers only: the dialogs they open hold their own <form> elements, so the
                dialogs themselves mount outside the edit form at the bottom of this component. -->
@@ -704,6 +733,8 @@ transient flashes, and the editor card's footer holds the word count and the Mar
           registerGetSelection={(fn) => (getSelection = fn)}
           registerFormat={(fn) => (format = fn)}
           {completionSources}
+          {focusMode}
+          {typewriter}
         />
       </div>
       {#if mode === 'preview'}