@quillmark/svelte 0.6.0 → 0.7.1

package/THEMING.md

@@ -173,7 +173,7 @@ An app that mounts an editor beside a preview over one session needs a screen to
 | `.qm-switch`    | The band that says which track is showing, and nothing at the widths where both are. Its controls read as even halves and stand at the touch floor (`--qmh-tap`, 44px); depth past that is yours. |
 | `.qm-frame`     | The mounting site: an edge, a corner, and the clip that holds a surface to them. What is inside it is the surface's own.                                                                          |
 
-The narrow shape is one mount at a time, not two of them stacked: half a narrow viewport is under the width either surface reads at. The track you are not showing is `display: none`, so it leaves the tab order, hit-testing and the accessibility tree together: you need no `inert` on it, and no breakpoint in your JS, since the only state you hold is which of the two you last asked for. Keep both mounted: the hidden pane keeps its pixels, its caret and its scroll, and repaints itself when it comes back. A click that lands in the hidden pane is the one thing the shape adds to your wiring, so send the caret and reveal the track together, or the hit goes somewhere the reader cannot see.
+The narrow shape is one mount at a time, not two of them stacked: half a narrow viewport is under the width either surface reads at. The track you are not showing is `display: none`, so it leaves the tab order, hit-testing and the accessibility tree together: you need no `inert` on it, and no breakpoint in your JS, since the only state you hold is which of the two you last asked for. Keep both mounted: the hidden pane keeps its pixels, its caret and its scroll, and comes back to them — it rasters nothing at a box it has none of, and repaints only where it returns to a box of another width. A preview scroll asked for while it was hidden is held and run on the way back, so it opens at the caret rather than several edits behind it. A click that lands in the hidden pane is the one thing the shape adds to your wiring, so send the caret and reveal the track together, or the hit goes somewhere the reader cannot see.
 
 The shape is shared; the look of a band is not. Your wordmark, your nav and the depth of your head are the most app-specific things on the screen, and a preset that drew them would hand every tool built on this the same face, so they read `--qmh-*` like everything else and you write the rules. `.qm-split`'s gap is a default rather than a fact about splitting: close it to `0` and carry a hairline on one pane if you want the two mounts to meet instead of stand apart.
 

package/dist/core/codec/field.d.ts

@@ -135,13 +135,24 @@ export interface LeafViews {
 /** The canonical empty `Content`: one empty `para` line. The empty a prose
  * leaf (or an array's prose element) seeds from. */
 export declare function emptyContent(): Content;
+/** The naming attributes for the `contenteditable`, shared by every prose leaf
+ * (`ProseValue` takes it too, so an addressed leaf and a by-value one name their
+ * regions by one rule). `aria-labelledby` supersedes `aria-label`: a leaf carrying
+ * both is the ambiguity where implementations disagree about which wins, and
+ * `undefined` is returned whole when a leaf takes neither, since ProseMirror reads
+ * the absence, not an empty object. */
+export declare function proseAttributes(opts: {
+    label?: string;
+    labelledBy?: string;
+    describedBy?: string;
+}): Record<string, string> | undefined;
 export declare function createField(opts: CreateFieldOpts): FieldController;
 /**
  * The prose-leaf plugin stack (VISUAL_EDITOR §Surface): shared by
- * {@link createField} and the array-element inline editor (`ProseArrayElement`),
- * so the two never fork the keymap/plugin ordering. History first, then any
- * leaf-specific plugins (`afterHistory`: the addressed leaf passes its
- * anchor-position plugin; a by-value array element passes none), the
+ * {@link createField} and the by-value inline editor (`ProseValue`), so the two
+ * never fork the keymap/plugin ordering. History first, then any leaf-specific
+ * plugins (`afterHistory`: the addressed leaf passes its anchor-position plugin;
+ * a by-value leaf passes none), the
  * markdown-shorthand input rules, then the field keymap over the base keymap, and
  * last the two that answer to a caret or a selection beside a block: the gap cursor
  * and {@link pastAtomPlugin}.

package/dist/core/codec/field.js

@@ -89,11 +89,13 @@ function opsCommittable(doc, addr) {
     const stored = doc.getStored(addr);
     return stored !== null && typeof stored === 'object';
 }
-/** The naming attributes for the `contenteditable`. `aria-labelledby` supersedes
- * `aria-label`: a leaf carrying both is the ambiguity where implementations
- * disagree about which wins, and `undefined` is returned whole when a leaf takes
- * neither, since ProseMirror reads the absence, not an empty object. */
-function proseAttributes(opts) {
+/** The naming attributes for the `contenteditable`, shared by every prose leaf
+ * (`ProseValue` takes it too, so an addressed leaf and a by-value one name their
+ * regions by one rule). `aria-labelledby` supersedes `aria-label`: a leaf carrying
+ * both is the ambiguity where implementations disagree about which wins, and
+ * `undefined` is returned whole when a leaf takes neither, since ProseMirror reads
+ * the absence, not an empty object. */
+export function proseAttributes(opts) {
     const attrs = {};
     if (opts.labelledBy)
         attrs['aria-labelledby'] = opts.labelledBy;
@@ -161,7 +163,8 @@ export function createField(opts) {
                     // A focus event does not bubble, so the leaf's own `focus` handler
                     // never fires for a cell: without this the active address would not
                     // follow a caret clicked straight into a table.
-                    onCellFocus: () => opts.onFocus?.(addr)
+                    onCellFocus: () => opts.onFocus?.(addr),
+                    clearance
                 })
             },
         dispatchTransaction: (tr) => {
@@ -385,10 +388,10 @@ export function createField(opts) {
 }
 /**
  * The prose-leaf plugin stack (VISUAL_EDITOR §Surface): shared by
- * {@link createField} and the array-element inline editor (`ProseArrayElement`),
- * so the two never fork the keymap/plugin ordering. History first, then any
- * leaf-specific plugins (`afterHistory`: the addressed leaf passes its
- * anchor-position plugin; a by-value array element passes none), the
+ * {@link createField} and the by-value inline editor (`ProseValue`), so the two
+ * never fork the keymap/plugin ordering. History first, then any leaf-specific
+ * plugins (`afterHistory`: the addressed leaf passes its anchor-position plugin;
+ * a by-value leaf passes none), the
  * markdown-shorthand input rules, then the field keymap over the base keymap, and
  * last the two that answer to a caret or a selection beside a block: the gap cursor
  * and {@link pastAtomPlugin}.

package/dist/core/codec/index.d.ts

@@ -3,7 +3,7 @@ import 'prosemirror-gapcursor/style/gapcursor.css';
 import './prose.css';
 export { rangeAnchor } from './anchor.js';
 export type { RangeAnchor } from './anchor.js';
-export { createField, emptyContent, proseLeafPlugins } from './field.js';
+export { createField, emptyContent, proseAttributes, proseLeafPlugins } from './field.js';
 export type { CreateFieldOpts, FieldController, LeafViews } from './field.js';
 export { DEFAULT_TABLE_STRINGS } from './table-view.js';
 export type { TableChromeStrings } from './table-view.js';

package/dist/core/codec/index.js

@@ -13,7 +13,7 @@ import './prose.css';
 // selection (`visual/FormatPopover.svelte`), so it is reached off-barrel.
 export { rangeAnchor } from './anchor.js';
 // The prose leaf.
-export { createField, emptyContent, proseLeafPlugins } from './field.js';
+export { createField, emptyContent, proseAttributes, proseLeafPlugins } from './field.js';
 // The table island's chrome vocabulary: the visual tier's `strings` set extends it,
 // so the island's wording is overridden beside every other key.
 export { DEFAULT_TABLE_STRINGS } from './table-view.js';

package/dist/core/codec/table-view.d.ts

@@ -40,6 +40,10 @@ export interface TableViewDeps {
     /** A cell took focus: the leaf's own `focus` handler never fires for one (a focus
      *  event does not bubble), so the active address would not follow the caret. */
     onCellFocus: () => void;
+    /** The clearance a revealed caret keeps, in the leaf's own line box (`field.ts`), which
+     *  is a cell's line box too. `undefined` where the derivation is out of reach (jsdom),
+     *  which is PM's 5px default. */
+    clearance: number | undefined;
 }
 /** The `island_block` node view: a table island's editing surface, and the literal
  *  placeholder for every other island type. */

package/dist/core/codec/table-view.js

@@ -869,6 +869,11 @@ class TableIslandView {
                 plugins: cellPlugins(this.cellKeys(r, c))
             }),
             attributes: { 'aria-label': name, class: 'qm-table-cell-editor' },
+            // A cell is one of the leaf's lines, so a reveal here keeps the leaf's
+            // clearance: PM's 5px default is the caret visible and unusable that rung
+            // exists to refuse (`field.ts`).
+            scrollThreshold: this.deps.clearance,
+            scrollMargin: this.deps.clearance,
             dispatchTransaction: (tr) => {
                 const next = view.state.apply(tr);
                 view.updateState(next);
@@ -928,8 +933,12 @@ class TableIslandView {
         if (!mounted)
             return;
         const { view } = mounted;
+        // Flagged, for the reason the leaf's own landing is (`field.ts`, `setCaret`): PM
+        // focuses with `preventScroll`, so an unflagged dispatch lands the caret where no
+        // scroller has moved to — a Tab past the right edge of the horizontal scroller a
+        // wide table lives in, or the row an Enter on the last one appends below the fold.
         view.focus();
-        view.dispatch(view.state.tr.setSelection(Selection.atEnd(view.state.doc)));
+        view.dispatch(view.state.tr.setSelection(Selection.atEnd(view.state.doc)).scrollIntoView());
     }
     /**
      * A cell's keys. Traversal is the island's link in the leaf's chain

package/dist/core/theme.css

@@ -16,8 +16,8 @@
    the package claims `sideEffects: true`. Pruned, every rung below is undefined,
    every `var()` reading one is invalid at computed-value time, and the declaration
    holding it drops: a control with no border, no background and no padding, under
-   chrome that still reads as intact. `check:bundle` holds both ends, the claim and
-   the built bytes.
+   chrome that still reads as intact. `check:bundle` reads the built bytes for it;
+   the claim in the manifest is review's.
 
    Every value stays a `var()` reference, so the dials resolve against the cascade
    at each root: a consumer's `[data-theme="dark"]` ancestor rule flows in
@@ -232,9 +232,8 @@
 	   Offset-free is the whole of it: an offset states where the light is and no pole
 	   carries that, where a halo states occlusion. Toward black at both poles for the
 	   same reason — a crevice is darker than what surrounds it in a dark room too — so
-	   the cue means one thing whichever way the scale runs. Spent only on what portals;
-	   `check:style` holds the offsets at zero here and the rung as the only shadow
-	   anywhere. */
+	   the cue means one thing whichever way the scale runs. Spent only on what portals,
+	   and the one shadow any surface casts, which is review's to hold. */
 	--_qm-lift: 0 0 12px color-mix(in oklab, #000 16%, transparent);
 	/* The recede ladder: a hover-revealed or disabled affordance at rest, and a
 	   muted one. Opacity recedes toward whatever is behind, so these invert
@@ -282,12 +281,12 @@
 
 	/* ── Geometry ──────────────────────────────────────────────────────────*/
 	/* One stroke width for every edge the chrome draws: a card's, a control's,
-	   and the metadata bracket's three rules alike. A threshold rather than a
+	   and the verticals nested inside it alike. A threshold rather than a
 	   rhythm choice, like the tap floor: a hairline is a hairline at any
 	   `--qm-space`, so it does not derive from a dial. It exists as a rung because
-	   the bracket's whole claim is that its vertical and its horizontals are the
-	   same stroke, and `check:style`'s border-width axis can only hold that
-	   against a token. */
+	   the nesting ladder's whole claim is that a card's edge, a section's vertical
+	   and a subform's are one stroke at three depths, and `check:style`'s
+	   border-width axis can only hold that against a token. */
 	--_qm-border-width: 1px;
 	--_qm-radius: var(--qm-radius, 8px);
 	/* The interior corner, and half is the relationship rather than the number: a
@@ -310,6 +309,12 @@
 	   it has taken the line box, and the horizontal is how far in the text starts,
 	   which nothing else fixes. */
 	--_qm-inset-control: var(--_qm-space) var(--_qm-space-3);
+	/* The nesting step: the distance from one structural stroke to the next, and what
+	   makes the depths read as a ladder rather than as indents that happen to look
+	   alike. A rung because the boxes holding that distance are in two components and
+	   `check:style`'s rhythm axis sees each of them read a rung, never that they read
+	   the same one — the case `--_qm-inset-control` above is cut for. */
+	--_qm-nest: var(--_qm-space-3);
 	/* The scroll tail: dead space under the last card, so it can be read at the
 	   middle of a pane rather than at its bottom edge. A fraction of the viewport
 	   rather than a step on the ramp, because what it answers is how far the eye

package/dist/preset/recipes.css

@@ -50,11 +50,19 @@
    root scroller counting the overflow its panes clip, and a wheel over the chrome drags
    the whole app off the top. Three bands (a head, the body, an optional foot), and the
    body takes what is left and may shrink below its content, so the panes in it own
-   their overflow and hold still while their contents move. */
+   their overflow and hold still while their contents move.
+
+   The one column is stated for the same reason the rows are: an implicit track is `auto`,
+   which is sized by what a band holds, and a `.qm-split` under one contributes its items'
+   max-content through its `fr` tracks. The shell would take the width of the widest thing
+   mounted in it instead of the viewport's, and every band would be that wide with the
+   second pane past the edge. A host holding its content to a maximum never sees it; one
+   spending the whole screen sees it on the first surface it mounts. */
 .qm-workspace {
 	position: fixed;
 	inset: 0;
 	display: grid;
+	grid-template-columns: minmax(0, 1fr);
 	grid-template-rows: auto minmax(0, 1fr) auto;
 	overflow: hidden;
 }
@@ -115,9 +123,12 @@ html:has(.qm-workspace) {
    pane needs no `inert` and the host needs no breakpoint in JS. Both stay mounted (a
    preview binds its handle once, an editor holds a caret, a history and a scroll), so
    the switch is presentational, never conditional. A pane hidden this way keeps the
-   pixels it had (the paint loop's band sweep no-ops on an empty visible set) and repaints
-   from its live box when it comes back, which its resize observer sees as a width moving
-   off zero.
+   pixels it had: the paint loop's band sweep no-ops on an empty visible set, and its
+   resize observer holds the last real width rather than rastering at the 0×0 box a hidden
+   pane reports, so what comes back at the width it left needs no paint at all. The
+   preview's caret follow spans the same window — a trip asked for against a pane with no
+   box is held and run when it has one (`preview/bridge.ts`), the pane opening at the
+   caret rather than several edits behind it.
 
    Height is the second clause because a landscape phone passes the first one: it clears
    the width with room for two tracks and has no body left to put them in. A desktop window

package/dist/preview/bridge.d.ts

@@ -1,6 +1,8 @@
 import type { LiveSession } from '@quillmark/wasm';
 import type { Landing } from '../core/address.js';
 import type { PageSlot } from './paint.js';
+/** Both trips are held while the pane has no box to measure against, and the last one
+ *  held runs when it has one again. */
 export interface BridgeController {
     /** Scroll `field`'s first box to centre; `false` when this compile places none
      *  for that address, which is the whole of what the preview can say about it. */
@@ -12,4 +14,25 @@ export interface BridgeController {
     focusPosition(field: string, pos: number): void;
     destroy(): void;
 }
+/** The vertical extent the fold test reads; a `DOMRect` is one. */
+export interface VerticalSpan {
+    top: number;
+    bottom: number;
+    height: number;
+}
+/**
+ * Whether `target` sits clear of `port`'s edges by the fold's clearance, which is the
+ * target's own height: a caret rect flush against an edge is visible and unusable, and
+ * the next line typed lands past it. Derived from the target rather than a margin dial,
+ * so it scales with zoom exactly as the caret does, and bounded at both ends so the
+ * answer is reachable across the whole range of targets a compile locates.
+ *
+ * The floor is what a zero-height rect gets, which bare intersection would score as
+ * clear at either edge. The cap is a third of the room the port has to spare, so a
+ * target too tall for its own height of clearance — a located line at zoom, a short
+ * split track — passes once centred and holds a band around it, rather than being
+ * re-centred by every keystroke. A target taller than the port is clear while it covers
+ * the port: no scroll shows more of it.
+ */
+export declare function clearOfTheFold(target: VerticalSpan, port: VerticalSpan): boolean;
 export declare function createBridge(session: LiveSession, container: HTMLElement, slots: readonly PageSlot[], onPick: ((at: Landing) => void) | undefined): BridgeController;

package/dist/preview/bridge.js

@@ -1,4 +1,34 @@
 import { boxesForField, rectToPercent, clickToPdfPt, applyPercentRect } from './geometry.js';
+/** A pane hidden by the shell's narrow switch (`preset/recipes.css`) measures 0×0, and so
+ *  does every box on it: the clearance arithmetic reads that as a caret clear of both
+ *  edges, and a centring computes its trip out of zeros. Neither is an answer about where
+ *  the caret is. */
+function hasBox(port) {
+    return port.width > 0 && port.height > 0;
+}
+/** What a rect reporting no height clears an edge by, in CSS px: a caret's own at the
+ *  smallest zoom a page still reads at. */
+const MIN_CLEARANCE = 8;
+/**
+ * Whether `target` sits clear of `port`'s edges by the fold's clearance, which is the
+ * target's own height: a caret rect flush against an edge is visible and unusable, and
+ * the next line typed lands past it. Derived from the target rather than a margin dial,
+ * so it scales with zoom exactly as the caret does, and bounded at both ends so the
+ * answer is reachable across the whole range of targets a compile locates.
+ *
+ * The floor is what a zero-height rect gets, which bare intersection would score as
+ * clear at either edge. The cap is a third of the room the port has to spare, so a
+ * target too tall for its own height of clearance — a located line at zoom, a short
+ * split track — passes once centred and holds a band around it, rather than being
+ * re-centred by every keystroke. A target taller than the port is clear while it covers
+ * the port: no scroll shows more of it.
+ */
+export function clearOfTheFold(target, port) {
+    if (target.height >= port.height)
+        return target.top <= port.top && target.bottom >= port.bottom;
+    const clearance = Math.min(Math.max(target.height, MIN_CLEARANCE), (port.height - target.height) / 3);
+    return target.top - clearance >= port.top && target.bottom + clearance <= port.bottom;
+}
 export function createBridge(session, container, slots, onPick) {
     const unlisten = [];
     // Two rungs: `positionAt` over span-tracked content, `fieldAt` over every placement
@@ -53,43 +83,70 @@ export function createBridge(session, container, slots, onPick) {
         else if (target.right > port.right)
             container.scrollLeft += target.right - port.right;
     }
-    // Clear of the fold is the target's own height of clearance at each edge, not bare
-    // intersection: a caret rect flush against one is visible and unusable, and the
-    // next line typed lands past it. Derived from the target rather than a margin
-    // dial, so it scales with zoom exactly as the caret does.
-    function clearOfTheFold(target) {
-        const port = container.getBoundingClientRect();
-        return target.top - target.height >= port.top && target.bottom + target.height <= port.bottom;
+    // The trip a pane with no box could not run, held for the box coming back. One, and
+    // the last one asked for: a caret hop supersedes the hop before it on a showing pane
+    // too.
+    let held;
+    // The re-assert. Nothing else asks on the way back: `refresh` re-asks only on a
+    // recompile, and the reader who has just tapped Preview is not typing, so the pane
+    // would open where the caret was several edits ago. Guarded for jsdom, which ships no
+    // ResizeObserver and lays out nothing for one to report.
+    if (typeof ResizeObserver !== 'undefined') {
+        const observer = new ResizeObserver(() => {
+            if (!held || !hasBox(container.getBoundingClientRect()))
+                return;
+            const trip = held;
+            held = undefined;
+            trip();
+        });
+        observer.observe(container);
+        unlisten.push(() => observer.disconnect());
     }
-    return {
-        scrollToField(field) {
-            const box = boxesForField(field, session.fieldBoxes(field), session.regions())[0];
-            if (!box)
-                return false;
-            const slot = slots[box.page];
-            if (!slot)
-                return false;
-            // A discrete act ("show me this field"), so it centres every time, unlike
-            // the continuous hop below.
-            centre(measure(slot, rectToPercent(box.rect, slot.size)));
+    function scrollToField(field) {
+        const box = boxesForField(field, session.fieldBoxes(field), session.regions())[0];
+        if (!box)
+            return false;
+        const slot = slots[box.page];
+        if (!slot)
+            return false;
+        // The address is placed, which is the whole of what the `boolean` answers; a pane
+        // with no box yet is not a second no.
+        if (!hasBox(container.getBoundingClientRect())) {
+            held = () => void scrollToField(field);
             return true;
-        },
-        focusPosition(field, pos) {
-            const region = session.locate(field, pos);
-            if (!region)
-                return;
-            const slot = slots[region.page];
-            if (!slot)
-                return;
-            // The continuous hop: one call per keystroke and per arrow key, so it moves
-            // the pane only when the caret has left the fold. Centring unconditionally
-            // takes the scrollport back from the user on every one of them, including
-            // the ones that changed nothing about where the caret already was.
-            const target = measure(slot, rectToPercent(region.rect, slot.size));
-            if (clearOfTheFold(target))
-                return;
-            centre(target);
-        },
+        }
+        // A discrete act ("show me this field"), so it centres every time, unlike
+        // the continuous hop below.
+        centre(measure(slot, rectToPercent(box.rect, slot.size)));
+        return true;
+    }
+    function focusPosition(field, pos) {
+        const region = session.locate(field, pos);
+        if (!region)
+            return;
+        const slot = slots[region.page];
+        if (!slot)
+            return;
+        // Held before the guard below, which a pane measuring zero answers "already clear"
+        // for every keystroke of (`hasBox`): the follow would die silently for as long as
+        // a track is hidden. What is held is the request, not the trip, so it re-locates
+        // against whatever compile is current when the pane comes back.
+        if (!hasBox(container.getBoundingClientRect())) {
+            held = () => focusPosition(field, pos);
+            return;
+        }
+        // The continuous hop: one call per keystroke and per arrow key, so it moves
+        // the pane only when the caret has left the fold. Centring unconditionally
+        // takes the scrollport back from the user on every one of them, including
+        // the ones that changed nothing about where the caret already was.
+        const target = measure(slot, rectToPercent(region.rect, slot.size));
+        if (clearOfTheFold(target, container.getBoundingClientRect()))
+            return;
+        centre(target);
+    }
+    return {
+        scrollToField,
+        focusPosition,
         destroy() {
             for (const off of unlisten)
                 off();

package/dist/preview/controller.d.ts

@@ -23,10 +23,11 @@ export interface PreviewController {
      *  apply-driven hop. */
     refresh(change: ChangeSet): void;
     /**
-     * Scroll `field`'s first box into view. `false` when this compile places nothing
-     * at that address — an answer, not a failure: the plate places plenty it does not
-     * track, and the preview carries no schema to tell that from a field the host
-     * misnamed. The editor's `focusField` is what distinguishes them.
+     * Scroll `field`'s first box into view, and end any follow it outranks. `false`
+     * when this compile places nothing at that address — an answer, not a failure: the
+     * plate places plenty it does not track, and the preview carries no schema to tell
+     * that from a field the host misnamed. The editor's `focusField` is what
+     * distinguishes them.
      */
     scrollToField(field: DocPath): boolean;
     /**
@@ -40,7 +41,7 @@ export interface PreviewController {
     focusPosition(at: Place): void;
     /**
      * End the follow: the pane stays where the user left it until the next
-     * `focusPosition`.
+     * `focusPosition`. A `scrollToField` that placed its target ends one too.
      *
      * The editor's `onActiveLeafChange` is the signal, firing for a form control as for
      * a prose leaf: `onActiveLeafChange={preview.endFollow}`. A control has no caret

package/dist/preview/controller.js

@@ -84,12 +84,12 @@ export function createPreview(session, opts) {
     }
     render(session.pageCount, []);
     // The last place the editor put the caret, re-located after every recompile and
-    // dropped on a focus change. `session.locate` answers against the last compiled
-    // layout and a consumer debounces `update`, so a caret typed past that layout's
-    // content is off-content for the whole burst: `focusPosition` no-ops and the pane
-    // sits still, and a caret event is otherwise the only thing that asks again. The
-    // re-locate is the preview's, not the consumer's: the staleness sits between two
-    // session queries this module owns both ends of.
+    // dropped on a focus change or a discrete hop. `session.locate` answers against the
+    // last compiled layout and a consumer debounces `update`, so a caret typed past that
+    // layout's content is off-content for the whole burst: `focusPosition` no-ops and
+    // the pane sits still, and a caret event is otherwise the only thing that asks
+    // again. The re-locate is the preview's, not the consumer's: the staleness sits
+    // between two session queries this module owns both ends of.
     let followed;
     return {
         refresh(change) {
@@ -100,7 +100,13 @@ export function createPreview(session, opts) {
                 bridge?.focusPosition(followed.field, followed.pos);
         },
         scrollToField(field) {
-            return bridge?.scrollToField(field) ?? false;
+            const placed = bridge?.scrollToField(field) ?? false;
+            // The discrete hop outranks the follow: a caret re-asserted at the next
+            // recompile would pull the pane straight off the field a host just asked
+            // for. A hop that placed nothing moved nothing, so the follow stands.
+            if (placed)
+                followed = undefined;
+            return placed;
         },
         focusPosition(at) {
             followed = at;

package/dist/preview/index.js

@@ -4,13 +4,14 @@
 // land here. Reserved-package invariant: this subpath imports no editor-side code
 // (the codec, the VisualEditor) so a `@quillmark/preview` promotion stays a
 // re-export, not a refactor: it may reach `/core` (the shared WASM boundary) and
-// nothing else. Enforced by `check:deps`, which walks the subpath's import graph.
+// nothing else. Enforced by `check:deps`, at the subpath's edge: a relative hop past a
+// module directly in `core/` is what pulls the codec, and all of ProseMirror with it.
 // The theme derivation, which the page slots read through `var()`.
 // Imported at the barrel because a subpath is what a consumer gets: this surface
 // reaches modules inside `core/` and never its entry, so a sheet hanging off that
 // entry arrives only for a consumer importing `/core` for some other reason. The
 // sheet rather than the entry, because the barrel needs the derivation and not
-// `init`. `check:deps` (rule 4) walks this file's own graph and holds the reach.
+// `init`. `check:deps` holds the reach.
 import '../core/theme.css';
 export { createPreview } from './controller.js';
 export { default as Preview } from './Preview.svelte';

package/dist/preview/paint.js

@@ -192,9 +192,17 @@ onPaintError) {
             return;
         rafId = requestAnimationFrame(() => {
             rafId = 0;
+            const width = container.clientWidth;
+            // A pane the shell has hidden reports a 0×0 box, which is a width to paint
+            // nothing at rather than a width that moved: `paintSlot` would take its
+            // `clientWidth || widthPt` fallback and freeze every mounted canvas at the 1×
+            // raster. The last real width and any pending force are held instead — the
+            // observer fires again when the pane has a box, and a return at that same
+            // width needs no raster, the pixels being the ones it was hidden with.
+            if (width === 0)
+                return;
             const forced = forcePending;
             forcePending = false;
-            const width = container.clientWidth;
             if (!forced && width === lastWidth)
                 return;
             lastWidth = width;