@quillmark/svelte 0.6.0 → 0.7.0

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.js

@@ -161,7 +161,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) => {

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;

package/dist/visual/ArrayField.svelte

@@ -11,8 +11,8 @@
 
  An `object` element collapses: the row is its own summary — a box, titled by the
  element's first `string` cell — and opens onto {@link ObjectField}, one at a time.
- Stacking the subforms instead would nest a field one level past the depth the band
- draws, once per row. Opening is therefore part of a landing rather than something the
+ Stacking the subforms instead would nest a field one level past the depth the
+ subform's own vertical draws, once per row. Opening is therefore part of a landing rather than something the
  user does first: `focusElement` opens the row it is aimed at before it focuses.
 
  The remove is inside the element: a slab over the end of the element's own box, taking
@@ -42,6 +42,7 @@
 	import { emptyContent } from '../core/codec/index.js';
 	import { createLifespan } from '../core/teardown.js';
 	import { IdSeq, controlKind } from './structure.js';
+	import { holdInView } from './hold.js';
 	import Icon from './icons/Icon.svelte';
 	import TextField from './TextField.svelte';
 	import ObjectField from './ObjectField.svelte';
@@ -166,8 +167,12 @@
 	function untitled(k: number): string {
 		return label != null ? t.strings.elementUntitled(label, k + 1) : String(k + 1);
 	}
-	function toggleRow(id: string): void {
-		openId = openId === id ? undefined : id;
+	/** The summary is the anchor: a row closing above it is what would carry it off the fold,
+	 *  and a row's subform hangs under its own summary (`hold.ts`). */
+	function toggleRow(id: string, summary: HTMLElement): void {
+		holdInView(summary, () => {
+			openId = openId === id ? undefined : id;
+		});
 	}
 
 	// The awaited flush below is the only work that outlives a gesture here, so the
@@ -365,7 +370,7 @@
 							type="button"
 							class="qm-control-box qm-focus-ring qm-element-summary"
 							aria-expanded={open}
-							onclick={() => toggleRow(id)}
+							onclick={(e) => toggleRow(id, e.currentTarget)}
 						>
 							<!-- Leading, and it rotates: trailing is the figure for pushing a new
 							     screen, where this unfolds in place. Same glyph, same rotation and
@@ -391,7 +396,6 @@
 							properties={items?.properties}
 							label={label != null ? `${label} ${k + 1}` : undefined}
 							idBase={idBase != null ? `${idBase}-e-${id}` : undefined}
-							edges="close"
 							onCommit={(obj) => commitElement(k, obj)}
 						/>
 					{/if}
@@ -517,9 +521,9 @@
 	/* ── An object element ──────────────────────────────────────────────────────
 	 The row is a summary and the subform hangs under it. `row-gap` rather than a
 	 margin on the subform, because the distance between a control and what it has
-	 unfolded belongs to the thing stacking them: the variant field spends its own
-	 `gap` on exactly this and `ObjectField` therefore opens flush, carrying no
-	 leading space of its own for a caller to cancel. */
+	 unfolded belongs to the thing stacking them: the variant field spends its own `gap` on
+	 exactly this, and what `ObjectField` adds is the cap on its own stroke, equal at both
+	 of its ends. */
 	.qm-element {
 		row-gap: var(--_qm-space-2);
 	}

package/dist/visual/Card.svelte

@@ -16,6 +16,7 @@
 	import type { LeafRegistry } from './leaves.js';
 	import type { CardModel, FieldModel } from './structure.js';
 	import { placeFields, humanize, initialExpandedGroup } from './structure.js';
+	import { holdInView } from './hold.js';
 	import type { FieldDomIds } from './domid.js';
 	import Field from './Field.svelte';
 	import ProseField from './ProseField.svelte';
@@ -127,9 +128,9 @@
 	const ungrouped = $derived(card.sections.filter((s) => s.group == null));
 	const grouped = $derived(card.sections.filter((s) => s.group != null));
 
-	// A schema that declares no fields still gets a body, and a bracket around nothing is
-	// worse than none: with no content between them the two horizontals land on one y and
-	// paint as a single stroke of twice the width.
+	// A schema that declares no fields still gets a body, and an empty metadata block
+	// draws nothing while the card's gap still counts it twice, standing a rung of dead
+	// space over the body.
 	const hasMeta = $derived(ungrouped.length > 0 || grouped.length > 0);
 
 	// Seeded once from the card's shape. Card is keyed by stable id, so this survives the
@@ -157,9 +158,11 @@
 			headers[closing]?.focus();
 		expanded = next;
 	}
+	/** The header is the anchor: a section closing above it is what would carry it off the
+	 *  fold, and a section opens under its own header (`hold.ts`). */
 	function toggleGroup(group: string): void {
 		animate = true;
-		setExpanded(expanded === group ? null : group);
+		holdInView(headers[group], () => setExpanded(expanded === group ? null : group));
 	}
 
 	/**
@@ -190,6 +193,9 @@
 	 * an insert, `nearest` for a reorder. The reduced-motion guard is JS rather than the
 	 * CSS the accordion uses: a scroll's behaviour is an argument, not a transition a
 	 * media query can cancel.
+	 *
+	 * The caller is what waits out a reorder's own trip before asking: the run holds the
+	 * slot this card sits in, and the slot is the stack's (`VisualEditorInner`).
 	 */
 	export function scrollIntoViewCard(block: ScrollLogicalPosition): void {
 		const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
@@ -244,16 +250,8 @@
 		{/if}
 
 		<div class="qm-card-body">
-			<!-- One element whose top and bottom edges are the bracket's two horizontals.
-		 Anchored here rather than on the header and on the accordion so an open section's
-		 vertical reaches them, and so a card with no groups still terminates above its
-		 body. -->
 			{#if hasMeta}
-				<div
-					class="qm-card-meta"
-					class:qm-meta-top={!card.isMain}
-					class:qm-meta-bottom={card.hasBody}
-				>
+				<div class="qm-card-meta" class:qm-meta-bottom={card.hasBody}>
 					{#each ungrouped as section (section.group ?? '_ungrouped')}
 						<div class="qm-section">
 							{@render sectionFields(section.fields)}
@@ -261,8 +259,7 @@
 					{/each}
 
 					<!-- One open at a time. Rendered only when a card has groups, so an empty
-				     accordion is not the bracket's last child: the bottom rule's inset belongs
-				     to whichever block abuts it. -->
+				     accordion does not stand a gap under the ungrouped fields. -->
 					{#if grouped.length}
 						<div class="qm-groups" class:qm-instant={!animate}>
 							{#each grouped as section (section.group)}
@@ -409,11 +406,12 @@
 	/* An island: the card is the base plane, the column behind it the sunken one, and the
 	 hairline closes it (ARCHITECTURE §Styling). The inset is the same rung as the gap, so
 	 what separates the header from the fields is what separates the fields from the
-	 card's edge. */
+	 card's edge. The inline half reads `--_qm-nest` at that same number: this edge is the
+	 nesting ladder's first stroke, and its inset the first step. */
 	.qm-card {
 		border: var(--_qm-border-width) solid var(--_qm-border);
 		border-radius: var(--_qm-radius);
-		padding: var(--_qm-space-3);
+		padding: var(--_qm-space-3) var(--_qm-nest);
 		background: var(--_qm-surface);
 		display: flex;
 		flex-direction: column;
@@ -497,37 +495,44 @@
 	.qm-card-title:focus {
 		color: var(--_qm-ink);
 	}
-	.qm-card-body,
-	.qm-card-meta {
+	.qm-card-body {
 		display: flex;
 		flex-direction: column;
 		gap: var(--_qm-space-3);
 	}
-	/* The metadata bracket, in three strokes at one rung: these two horizontals and the
-	 open section's vertical below. A bracket whose sides disagree on width or tone reads
-	 as three unrelated lines rather than one figure, which is why the vertical takes
-	 `--_qm-border` and not `--_qm-accent`.
-
-	 Each condition is what its stroke means: a top rule is the line under a card title,
-	 so the headerless `main` has none; a bottom rule divides fields from body, so a card
-	 with no body has nothing to divide. Sometimes two strokes and sometimes one — an open
-	 figure, which is what distinguishes it from a second box inside the card. */
-	.qm-meta-top {
-		border-top: var(--_qm-border-width) solid var(--_qm-border);
+	/* Where two sections meet the distance is three of one rung — the cap closing the one
+	 above, this gap, the cap opening the one below — the same whether either side is a
+	 group or the ungrouped block. That total is what the fields inside a section keep
+	 between their rows (`.qm-fields` row-gap), so a section boundary stands no further
+	 apart than a field boundary: what ranks them is the stroke, not the air. */
+	.qm-card-meta,
+	.qm-groups {
+		display: flex;
+		flex-direction: column;
+		gap: var(--_qm-space);
 	}
+	/* The one horizontal the card draws, and it is the one thing a horizontal is for: it
+	 ranks the payload against the body rather than saying what is inside what, which is
+	 the verticals' job (ARCHITECTURE §"A plane is a tone"). Conditional on a body, since
+	 with none it would divide the payload from the card's own edge a rung below it.
+
+	 The inset stands the rule off the last control at the rung the body sits under it by,
+	 taking the section's own end cap into account: `--_qm-space-2` here, plus that cap,
+	 is the `--_qm-space-3` the card spends between its blocks. */
 	.qm-meta-bottom {
 		border-bottom: var(--_qm-border-width) solid var(--_qm-border);
+		padding-bottom: var(--_qm-space-2);
 	}
-	/* The inset sits on the fields rather than on the block that holds them: an open
-	 section's vertical has to reach the rule to close a corner against it, and padding
-	 between the two is the distance by which it would miss. Unqualified by open — a shut
-	 panel clips it. */
-	.qm-meta-top > .qm-section {
-		padding-top: var(--_qm-space-3);
-	}
-	.qm-meta-bottom > .qm-section:last-child,
-	.qm-meta-bottom .qm-group:last-child .qm-group-panel-inner > .qm-fields {
-		padding-bottom: var(--_qm-space-3);
+	/* A section's share of the boundary between sections: one rung at each end, so two of
+	 them stand three of it apart whichever kind they are (above). The accordion spends the
+	 same rung from its header and its panel, where it also caps the vertical those two
+	 edges hold.
+
+	 No stroke and no inset: fields declaring no `ui.group` are the card's own, at the rank
+	 its body is at, and the card's edge is the only container there is to state. A
+	 vertical here would mark a section a reader has no name for. */
+	.qm-section {
+		padding-block: var(--_qm-space);
 	}
 	/* Two query containers, one per kind of section, so capacity follows the width the
 	 fields actually get: a panel's inset makes that narrower than the card. */
@@ -562,15 +567,21 @@
 			--cols-half: 2;
 		}
 	}
-	.qm-groups,
+	/* The nesting vertical, one `--_qm-nest` in from the card's edge with the panel's
+	 fields the same rung off it (ARCHITECTURE §"A plane is a tone"). `--_qm-border` and
+	 not `--_qm-accent`: a card's edge and the verticals inside it are one stroke at three
+	 depths, and a tone that changed as it went in would read as unrelated lines rather
+	 than one figure. A named section is what earns it, which is why the ungrouped block
+	 above draws none.
+
+	 On the group rather than on its panel: what the stroke marks is the section, and a
+	 section is its header and what hangs under it. Drawn transparent when closed rather
+	 than absent, so a toggle moves no text — and closed, there is nothing under the header
+	 for it to gather. Its caps are the header's block padding above and the panel's below,
+	 at the rung the ungrouped section spends on both of its own ends. */
 	.qm-group {
 		display: flex;
 		flex-direction: column;
-	}
-	/* The bracket's third stroke, on the section rather than on its panel: spanning the
-	 header is what gives it a corner to close into at the block's edge. Drawn transparent
-	 when closed rather than absent, so a toggle moves no text. */
-	.qm-group {
 		border-left: var(--_qm-border-width) solid transparent;
 		transition: border-color var(--_qm-duration-slow) var(--_qm-ease-reverse);
 	}
@@ -583,6 +594,9 @@
 	 because at zero the chevron stands on the section's vertical with only the icon box's
 	 own bearing between them, and the glyph's rotation swaps which bearing faces the
 	 stroke; right, because the row is the target and an inset there is target given back.
+	 The rung is the glyph's own and not the nesting step the fields under it take: what
+	 the heading names is the section, so it rides the vertical rather than the column its
+	 fields start on.
 
 	 `font: inherit` because a UA button inherits no face, then the body rung, one step
 	 over the field labels beneath it: at the label rung the two read as one register and
@@ -651,12 +665,13 @@
 	.qm-group-panel-inner {
 		min-height: 0;
 		overflow: hidden;
-		padding-inline-start: var(--_qm-space-4);
+		padding-inline-start: var(--_qm-nest);
 		padding-inline-end: var(--_qm-ring-reach);
 		margin-inline-end: calc(-1 * var(--_qm-ring-reach));
 	}
+	/* The lower of the two caps an open section's vertical takes (`.qm-group`). */
 	.qm-group-panel-inner > .qm-fields {
-		padding-block: var(--_qm-space-2);
+		padding-block: var(--_qm-space);
 	}
 	.qm-body-leaf {
 		display: flex;

package/dist/visual/EnumField.svelte

@@ -108,10 +108,12 @@
 			<Icon name="chevron-down" size={14} />
 		</Select.Trigger>
 		<Select.Portal to={portalTarget}>
-			<Select.Content sideOffset={4}>
+			<Select.Content collisionBoundary={portalTarget ?? []} sideOffset={4}>
 				<!-- The list portals out of the trigger's DOM but into the nearest
 				     `[data-qm-root]`, and carries the marker itself, like FormatPopover.
-				     The pill is this
+				     That root is the boundary a flip is measured against too, being the box
+				     that clips the surface where the consumer scrolls one; the viewport
+				     default knows nothing of that. The pill is this
 				     element (not the primitive's) because scoped CSS keys off which
 				     component owns the markup: a `class` passed to a primitive is a
 				     plain string and never picks up the scoping hash. -->

package/dist/visual/ObjectField.svelte

@@ -4,22 +4,13 @@
  only: a nested prose/array/object property renders a placeholder instead of
  recursing.
 
- The nesting is a band: two full-width horizontals at `--_qm-border`, the figure the
- card draws around its own metadata (`.qm-meta-top` / `.qm-meta-bottom`) one octave
- down. Nothing insets, so a property's control keeps the card's left and right columns
- exactly as a field's does, and the field's own label caps the band from outside it —
- name, rule under the name, content, closing rule.
+ The nesting is a vertical at `--_qm-border`, the ladder's last stroke: the card's edge,
+ an open section's vertical one `--_qm-nest` in where the field is in one, this one a rung
+ further, the properties a rung inside it (ARCHITECTURE §"A plane is a tone").
 
- That absent inset is also what puts the properties on the section's own column tracks
- (below), so a subform's cells share edges with the fields above them rather than
- keeping a rhythm of their own.
-
- Which edges draw is {@link Props.edges}, and the rule is that a boundary is stated
- once: where a box already sits against the subform, that box IS the boundary and a
- stroke under it would say so twice. So a field-level subform takes the band, and a
- subform hanging off a control — a variant's cells under their discriminant, an
- array element's properties under its summary row — takes the closing rule alone.
- Sometimes two strokes and sometimes one: the open figure the card's bracket is.
+ One figure wherever it mounts: a variant's cells under their discriminant and an array
+ element's properties under its summary row sit at the depth a field-level subform sits
+ at, and the box above them states position rather than depth.
 
  A property's ghosted `default:` is the static schema `sub.default`, not the
  resolved provenance the top-level ghosts read (FIELD_PROVENANCE): `resolve`
@@ -56,20 +47,9 @@
 		idBase?: string;
 		/** Accessible-name prefix used only on the `aria-label` fallback above. */
 		label?: string;
-		/** Which strokes the subform draws; see the note above. */
-		edges?: 'band' | 'close';
 		onCommit: (obj: Record<string, unknown>) => void;
 	}
-	let {
-		value,
-		properties,
-		labelledBy,
-		describedBy,
-		idBase,
-		label,
-		edges = 'band',
-		onCommit
-	}: Props = $props();
+	let { value, properties, labelledBy, describedBy, idBase, label, onCommit }: Props = $props();
 
 	const t = wording();
 	const entries = $derived(Object.entries(properties ?? {}));
@@ -127,7 +107,6 @@
 <div
 	bind:this={rootEl}
 	class="qm-object"
-	class:close={edges === 'close'}
 	role="group"
 	aria-labelledby={labelledBy}
 	aria-describedby={describedBy}
@@ -211,46 +190,38 @@
 </div>
 
 <style>
-	/* The band. `border-block` draws both strokes as one declaration, which is what
-	   makes the figure symmetric by construction rather than by two lines agreeing;
-	   `padding-block` at the same rung on both sides is the other half of that.
+	/* The vertical and the rung between it and the properties, `--_qm-nest` being the step
+	   the card and the section hold too.
 
 	   `--_qm-border` and not `--_qm-border-faint`: this is the stroke that structures
-	   (ARCHITECTURE §"A plane is a tone"), the one the metadata bracket and the open
-	   section's vertical read. `faint` separates without structuring — a table's
-	   interior lines under a frame that is doing the structuring — which is the other
-	   job.
+	   (ARCHITECTURE §"A plane is a tone"), the one the card's edge and the section's
+	   vertical read. `faint` separates without structuring — a table's interior lines
+	   under a frame that is doing the structuring — which is the other job.
+
+	   `padding-block` is the stroke's end caps, the same rung and the same reason as a
+	   section's (`Card.svelte`). A cap and not a leading gap: what stands the subform off
+	   the label or the box above it is still that stacker's own.
 
-	   The columns are the section's, arrived at by arithmetic rather than by `subgrid`:
-	   the band insets nothing horizontally, so this box spans exactly what `.qm-fields`
-	   spans, and equal tracks at the same count over the same width with the same column
-	   gap fall on the same edges. `subgrid` would want the tracks chained through the
-	   three wrappers between the section grid and here (`Field.svelte`), none of which is
-	   a grid. `--cols` inherits instead, so the container query stepping the section's
-	   capacity steps the subform's with it — no second query container, no second set of
-	   rungs, nothing measured. */
+	   The tracks are the section's count over the subform's own width — `--cols` inherits,
+	   so the container query stepping the section's capacity steps this with it, and there
+	   is no second query container and nothing measured. The edges are not the section's:
+	   the inset is the nesting, and a cell lining up with the field above it would claim a
+	   depth it is not at. */
 	.qm-object {
 		display: grid;
 		grid-template-columns: repeat(var(--cols), 1fr);
 		gap: var(--_qm-space-2);
-		border-block: var(--_qm-border-width) solid var(--_qm-border);
-		padding-block: var(--_qm-space-2);
-	}
-	/* Hanging off a control (a variant's discriminant, an array element's summary row):
-	   that box is the top boundary already, and a stroke under it would state the
-	   boundary twice. The closing rule is not optional in the same breath — without it
-	   the properties float between the box above and whatever follows. */
-	.qm-object.close {
-		border-block-start: none;
-		padding-block-start: 0;
+		border-inline-start: var(--_qm-border-width) solid var(--_qm-border);
+		padding-inline-start: var(--_qm-nest);
+		padding-block: var(--_qm-space);
 	}
 	/* A property measures like a field: two tracks over the subform's own rows, so a
 	   label wrapping in one column leaves its control on the row's baseline rather than a
 	   line below it — `Field.svelte`'s rule for a row-sharing field, one level in. The
 	   tracks are this grid's own; the section's belong to the fields.
 
-	   `min-width: 0` is what holds the arithmetic above: a property overflowing its `1fr`
-	   grows the track, and the subform's edges leave the section's with it. */
+	   `min-width: 0` because a property overflowing its `1fr` grows the track, and the
+	   subform with it, past the field that holds it. */
 	.qm-object-prop {
 		display: grid;
 		grid-row: span 2;

package/dist/visual/ObjectField.svelte.d.ts

@@ -17,8 +17,6 @@ interface Props {
     idBase?: string;
     /** Accessible-name prefix used only on the `aria-label` fallback above. */
     label?: string;
-    /** Which strokes the subform draws; see the note above. */
-    edges?: 'band' | 'close';
     onCommit: (obj: Record<string, unknown>) => void;
 }
 declare const ObjectField: import("svelte").Component<Props, {

package/dist/visual/SlashMenu.svelte

@@ -72,8 +72,15 @@
 		     edge under the character that opened the menu, and stays there as the query is
 		     typed. Zero offset, because a gap reads as a surface floating near the caret
 		     rather than one growing out of it. -->
+		<!-- The boundary is the root the surface portals into, the box that clips it where
+		     the consumer scrolls one ({@link FormatPopover} states it in full). It is also
+		     what keeps the row scroll above inside the list: `nearest` scrolls any ancestor
+		     the row is not visible in, and a surface raised into room the pane clips leaves
+		     the pane one of them — so the scroll moves the pane, and with it the caret this
+		     menu is anchored to. -->
 		<Popover.Content
 			customAnchor={menu?.anchor ?? null}
+			collisionBoundary={portalTarget ?? []}
 			side="bottom"
 			align="start"
 			trapFocus={false}

package/dist/visual/VariantField.svelte

@@ -73,8 +73,6 @@
 	     flip would carry it between them. -->
 	{#if cells}
 		{#key member}
-			<!-- `close`: the discriminant's box directly above IS the cells' top boundary,
-			     so the band's opening stroke would state it twice. -->
 			<ObjectField
 				value={value ?? {}}
 				properties={cells}
@@ -82,7 +80,6 @@
 				idBase={id}
 				{labelledBy}
 				{describedBy}
-				edges="close"
 				onCommit={(obj) => onCommit(obj)}
 			/>
 		{/key}

package/dist/visual/VisualEditorInner.svelte

@@ -66,7 +66,7 @@
 	} from './diagnostics.js';
 	import { fieldDomIds, groupPanelId } from './domid.js';
 	import { createLeafRegistry, type FieldControl } from './leaves.js';
-	import { reorder } from './motion.js';
+	import { reorder, reorderTrips } from './motion.js';
 	import { tipsChannel } from './tips.js';
 	import { patchEditorExt } from './ext.js';
 	import Card from './Card.svelte';
@@ -185,6 +185,9 @@
 	};
 	let mainCard = $state<CardHandle | undefined>(undefined);
 	let cardRefs = $state<(CardHandle | undefined)[]>([]);
+	/** The slot each card sits in: what a reorder animates, and so what the post-mutation
+	 *  scroll waits on before it measures anything. */
+	let slotEls = $state<(HTMLElement | undefined)[]>([]);
 	/** The stack's own element: it carries `data-qm-root`, so it is what the kind
 	 * menu portals into, the way each leaf's surface resolves its nearest root. */
 	let rootEl = $state<HTMLElement | undefined>(undefined);
@@ -327,16 +330,29 @@
 	 * on a document of any length an insert lands off-screen, and a
 	 * viewport that does not follow reads as nothing happening.
 	 *
-	 * Coalesced on a single pending id: two quick adds resolve their `tick()` in
-	 * order, the earlier one sees a newer pending id and drops out, so one smooth
-	 * scroll runs to the last card rather than two fighting over the same scroller.
+	 * Coalesced on the last call: each takes a ticket and a continuation holding a stale
+	 * one drops out, so two mutations inside a tick run one smooth scroll to the last of
+	 * them rather than two fighting over the same scroller. A ticket rather than the id
+	 * being scrolled to, because an insert and a move of the *same* card are two calls
+	 * naming one id, on different terms — `center` against `nearest`.
 	 */
-	let pendingScrollId: string | null = null;
+	let scrollTicket = 0;
 	async function scrollCardIntoView(id: string, block: ScrollLogicalPosition): Promise<void> {
-		pendingScrollId = id;
+		const ticket = ++scrollTicket;
 		if (!(await span.resumes(tick()))) return;
-		if (pendingScrollId !== id) return;
-		pendingScrollId = null;
+		if (ticket !== scrollTicket) return;
+		// A reorder is running by this flush and holds the slot at its pre-move position
+		// for the length of the trip (`motion.ts`), so asking now measures the box the
+		// card is leaving — where a `nearest` would take the stack back to for the card
+		// that moved in from off screen. The trip says the card moved; the scroll follows
+		// it to where it landed. `allSettled`, because a second reorder cancels the first
+		// and a cancelled run rejects.
+		const slot = slotEls[cardIndexOf(id)];
+		const trips = slot ? reorderTrips(slot) : [];
+		if (trips.length) {
+			if (!(await span.resumes(Promise.allSettled(trips.map((trip) => trip.finished))))) return;
+			if (ticket !== scrollTicket) return;
+		}
 		const i = cardIndexOf(id);
 		if (i >= 0) cardRefs[i]?.scrollIntoViewCard(block);
 	}
@@ -813,7 +829,7 @@
 	 rather than being slid across. It is also the shape `animate:` asks for, being the
 	 keyed block's only child. -->
 	{#each model.cards as c, i (c.id)}
-		<div class="qm-card-slot" animate:reorder={isReordering}>
+		<div class="qm-card-slot" bind:this={slotEls[i]} animate:reorder={isReordering}>
 			<Card
 				bind:this={cardRefs[i]}
 				card={c}
@@ -874,10 +890,12 @@
 						>{marked ? merged.addCard : ''}</DropdownMenu.Trigger
 					>
 					<DropdownMenu.Portal to={rootEl}>
-						<DropdownMenu.Content sideOffset={4}>
+						<DropdownMenu.Content collisionBoundary={rootEl ?? []} sideOffset={4}>
 							<!-- Portalled out of the row but into the stack's root, and carrying the
 						     marker itself: floating is still a detached subtree to the
-						     derivation, like FormatPopover and the enum listbox. -->
+						     derivation, like FormatPopover and the enum listbox. The root is the
+						     flip's boundary for the reason it is theirs: it is the box that clips
+						     the surface where the consumer scrolls one. -->
 							<div class="qm-menu-surface" data-qm-root>
 								{#each kinds as k (k)}
 									<DropdownMenu.Item class="qm-menu-item" onSelect={() => addCard(atIndex, k)}

package/dist/visual/hold.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Run `change` and keep `anchor` inside the fold for the length of the move.
+ *
+ * A section closing above the pressed control carries that control off the fold with it,
+ * and what answers that is the trip every landing here already takes: the minimum, to the
+ * nearest edge, never a centring (VISUAL_EDITOR §"Focus and the preview bridge"). So a
+ * control the collapse never carries out of view costs no scroll at all, and one it would
+ * rides up and parks at the edge, which is where a section just opened wants its header:
+ * the fold below it is the room its fields unfold into, where a control held on the line
+ * it was pressed on opens its section into the screen it sits on the edge of.
+ *
+ * Per frame, because both panels move over the motion rung: a trip taken once is taken
+ * against a track that has not moved yet, the same flush a reveal's landing measures in
+ * (`Card.revealLeaf`). `instant`, because a host's `scroll-behavior: smooth` would
+ * otherwise animate each frame's correction toward the one before it.
+ */
+export declare function holdInView(anchor: HTMLElement | undefined, change: () => void): void;

package/dist/visual/hold.js

@@ -0,0 +1,39 @@
+// The gesture's anchor, which scroll anchoring is not: the platform picks its anchor off
+// the layout, and what fills the viewport as a section collapses is that section's own
+// content, whose top never moves.
+import { flushSync } from 'svelte';
+import { rungMs } from './motion.js';
+/**
+ * Run `change` and keep `anchor` inside the fold for the length of the move.
+ *
+ * A section closing above the pressed control carries that control off the fold with it,
+ * and what answers that is the trip every landing here already takes: the minimum, to the
+ * nearest edge, never a centring (VISUAL_EDITOR §"Focus and the preview bridge"). So a
+ * control the collapse never carries out of view costs no scroll at all, and one it would
+ * rides up and parks at the edge, which is where a section just opened wants its header:
+ * the fold below it is the room its fields unfold into, where a control held on the line
+ * it was pressed on opens its section into the screen it sits on the edge of.
+ *
+ * Per frame, because both panels move over the motion rung: a trip taken once is taken
+ * against a track that has not moved yet, the same flush a reveal's landing measures in
+ * (`Card.revealLeaf`). `instant`, because a host's `scroll-behavior: smooth` would
+ * otherwise animate each frame's correction toward the one before it.
+ */
+export function holdInView(anchor, change) {
+    if (!anchor)
+        return void change();
+    change();
+    flushSync();
+    const reveal = () => anchor.scrollIntoView({ block: 'nearest', behavior: 'instant' });
+    reveal();
+    const rung = rungMs(getComputedStyle(anchor), '--_qm-duration-slow');
+    if (rung === undefined)
+        return;
+    const until = performance.now() + rung;
+    const step = (now) => {
+        reveal();
+        if (now < until)
+            requestAnimationFrame(step);
+    };
+    requestAnimationFrame(step);
+}

package/dist/visual/index.js

@@ -13,7 +13,7 @@
 // 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 { default as VisualEditor } from './VisualEditor.svelte';
 // The prose leaf: the vanilla mount API a non-Svelte consumer (or a custom

package/dist/visual/motion.d.ts

@@ -1,4 +1,13 @@
 import type { AnimationConfig } from 'svelte/animate';
+/** The trips this module is running on `node`. A run holds the slot at its pre-move
+ *  position for its whole length, so anything that measures the node's box waits on
+ *  these rather than reading the one a transform is holding. */
+export declare function reorderTrips(node: HTMLElement): Animation[];
+/** A duration rung off `style`, in ms; `undefined` where the derivation is out of reach
+ *  (an unstyled root, or jsdom, where `getComputedStyle` reports custom properties as
+ *  empty). No rung, no motion: a fallback here would be the scale restated in the one
+ *  place `check:style` cannot read. */
+export declare function rungMs(style: CSSStyleDeclaration, rung: string): number | undefined;
 /**
  * Slide a keyed slot from where it was to where it now is.
  *

package/dist/visual/motion.js

@@ -7,11 +7,19 @@
 /** Marks this module's runs, so a second reorder cancels the first rather than layering
  *  a second transform over it. */
 const RUN_ID = 'qm-reorder';
+/** The trips this module is running on `node`. A run holds the slot at its pre-move
+ *  position for its whole length, so anything that measures the node's box waits on
+ *  these rather than reading the one a transform is holding. */
+export function reorderTrips(node) {
+    if (typeof node.getAnimations !== 'function')
+        return [];
+    return node.getAnimations().filter((run) => run.id === RUN_ID);
+}
 /** A duration rung off `style`, in ms; `undefined` where the derivation is out of reach
  *  (an unstyled root, or jsdom, where `getComputedStyle` reports custom properties as
  *  empty). No rung, no motion: a fallback here would be the scale restated in the one
  *  place `check:style` cannot read. */
-function rungMs(style, rung) {
+export function rungMs(style, rung) {
     const raw = style.getPropertyValue(rung).trim();
     const n = Number.parseFloat(raw);
     if (!Number.isFinite(n))
@@ -34,7 +42,7 @@ function rungMs(style, rung) {
 export function reorder(node, { from, to }, armed) {
     // The returned config is empty by design, in both exits and the run below: Svelte
     // samples a config's keyframes through a JS easing function, and this curve is a
-    // rung the derivation mints and `check:style` holds.
+    // rung the derivation mints.
     if (!armed() || typeof node.animate !== 'function')
         return {};
     const style = getComputedStyle(node);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@quillmark/svelte",
-	"version": "0.6.0",
+	"version": "0.7.0",
 	"description": "Editor, live-preview and source surfaces over a Quillmark WASM session.",
 	"repository": {
 		"type": "git",