@quillmark/svelte 0.24.0 → 0.25.0

package/dist/preview/paint.js

@@ -22,8 +22,12 @@ onPaintError) {
     const slots = [];
     const pageByEl = new Map();
     const canvases = new Map();
+    // The raster scale each mounted canvas was last painted at, so a repaint skips one
+    // already sharp at the scale it would take.
+    const rastered = new Map();
     const visible = new Set();
-    let zoom = 1;
+    // Unset until the pane has had a box to fit: a slot fills the pane's width meanwhile.
+    let scale;
     const observer = new IntersectionObserver((entries) => {
         for (const entry of entries) {
             const idx = pageByEl.get(entry.target);
@@ -52,25 +56,44 @@ onPaintError) {
         // host (`core/theme.css`).
         el.className = 'qm-page-slot';
         // The page's index, in the DOM. `pageByEl` is this module's and a consumer
-        // drawing an overlay of its own needs the number: position among siblings is
+        // drawing an overlay of its own needs the number: position among the slots is
         // the only handle without it, which is right today and is not a contract.
         el.dataset.page = String(page);
+        // `flex: none` under the flex column `Preview.svelte` lays the desk out as, which
+        // would otherwise shrink a page to fit the pane; auto inline margins centre a page
+        // narrower than the pane and resolve to zero on one wider, so it overflows to the
+        // scrollable side.
         Object.assign(el.style, {
             position: 'relative',
             boxSizing: 'border-box',
-            width: '100%',
+            flex: 'none',
+            marginInline: 'auto',
             aspectRatio: `${size.widthPt} / ${size.heightPt}`,
             background: 'var(--_qm-surface)'
         });
+        sizeSlot(el, size);
         if (page > 0)
             el.style.marginTop = PAGE_GAP;
-        container.appendChild(el);
+        // After the last slot rather than at the end: the zoom pill's dock is a child too.
+        const last = slots.at(-1)?.el;
+        if (last)
+            last.after(el);
+        else
+            container.prepend(el);
         pageByEl.set(el, page);
         observer.observe(el);
         return { page, size, el };
     }
+    function sizeSlot(el, size) {
+        el.style.width = scale === undefined ? '100%' : `${size.widthPt * scale}px`;
+    }
+    // Device px per PDF pt: the layout scale, else the slot's own width, times density.
+    function rasterScale(slot) {
+        const layoutScale = scale ?? (slot.el.clientWidth || slot.size.widthPt) / slot.size.widthPt;
+        return layoutScale * Math.max(window.devicePixelRatio || 1, MIN_DENSITY);
+    }
     // Rasterize `slot` into its canvas (creating the canvas if this is its first
-    // paint since mounting), at the slot's own current CSS width.
+    // paint since mounting).
     function paintSlot(slot) {
         let canvas = canvases.get(slot.page);
         if (!canvas) {
@@ -93,10 +116,10 @@ onPaintError) {
             slot.el.insertBefore(canvas, slot.el.firstChild);
             canvases.set(slot.page, canvas);
         }
-        const layoutScale = (slot.el.clientWidth || slot.size.widthPt) / slot.size.widthPt;
-        const densityScale = Math.max(window.devicePixelRatio || 1, MIN_DENSITY) * zoom;
+        const at = rasterScale(slot);
         try {
-            session.paint(ctx, slot.page, layoutScale * densityScale);
+            session.paint(ctx, slot.page, at);
+            rastered.set(slot.page, at);
         }
         catch (err) {
             // A paint that throws must not abort the band loop; `updateBand` runs in
@@ -114,6 +137,7 @@ onPaintError) {
             return;
         canvas.remove();
         canvases.delete(page);
+        rastered.delete(page);
     }
     // Mount pages newly inside [min(visible)-margin, max(visible)+margin], unmount
     // pages that fell outside it. Only touches pages changing band membership;
@@ -163,73 +187,56 @@ onPaintError) {
             // can change a page's dimensions without changing the count, and every
             // %-space click/scroll transform assumes box shape matches PageSize.
             slots[i].el.style.aspectRatio = `${size.widthPt} / ${size.heightPt}`;
+            sizeSlot(slots[i].el, size);
         }
     }
     // Slots are built on the first `refresh` (the controller calls it immediately),
     // not here: reconcile → `session.pageSize` must run after the controller's
     // `pageCount` gate, since `pageSize` throws for a page the count excludes.
     // ── Keep mounted rasters sharp ──────────────────────────────────────────────
-    // A canvas stretches with its slot, so a page that stays mounted while the
-    // container's CSS width or `devicePixelRatio` shifts keeps its place and goes
-    // soft. Two observers repaint mounted pages from their current box; canvases
-    // are `position:absolute`, so a repaint can't feed back into layout (and thus
-    // can't re-trigger the resize observer).
-    // Repaint mounted pages (all, or a given subset) from their live geometry: the
-    // one path resize, DPR, and zoom share; each `paintSlot` re-reads the slot's
-    // current `clientWidth`. A no-op for an unmounted page.
-    function repaint(pages) {
-        for (const page of pages ?? canvases.keys()) {
+    // A canvas stretches with its slot, so a page that stays mounted while the scale
+    // or `devicePixelRatio` shifts keeps its place and goes soft. Both repaint mounted
+    // pages; canvases are `position:absolute`, so a repaint can't feed back into
+    // layout.
+    // Repaint mounted pages whose raster scale moved. A no-op for an unmounted page.
+    function repaint() {
+        for (const page of canvases.keys()) {
             const slot = slots[page];
-            if (slot && canvases.has(page))
+            if (slot && rastered.get(page) !== rasterScale(slot))
                 paintSlot(slot);
         }
     }
-    // Coalesce a burst of observer callbacks into one repaint on the next frame.
-    // `force` (a DPR change) bypasses the width guard, since a DPR change moves no
-    // CSS-px width; a plain resize repaints only when the width actually moved, so
-    // a height-only or no-op tick costs nothing.
+    // One repaint for a burst: on the next frame, or once `settle` passes with no later
+    // call, a settle superseding a frame not yet run.
     let rafId = 0;
-    let lastWidth = container.clientWidth;
-    let forcePending = false;
-    function scheduleRepaint(force) {
-        if (force)
-            forcePending = true;
+    let settleId;
+    function scheduleRepaint(settle = 0) {
+        clearTimeout(settleId);
+        settleId = undefined;
+        if (settle > 0) {
+            cancelAnimationFrame(rafId);
+            rafId = 0;
+            settleId = setTimeout(() => {
+                settleId = undefined;
+                repaint();
+            }, settle);
+            return;
+        }
         if (rafId)
             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;
-            if (!forced && width === lastWidth)
-                return;
-            lastWidth = width;
             repaint();
         });
     }
-    // Container CSS-width changes (drag the pane wider, resize the window). Guarded
-    // for jsdom, which ships no ResizeObserver; the unit suite drives no resize, so
-    // skipping it there is correct; a real browser takes the observed path.
-    const resizeObserver = typeof ResizeObserver === 'undefined'
-        ? undefined
-        : new ResizeObserver(() => scheduleRepaint(false));
-    resizeObserver?.observe(container);
     // `devicePixelRatio` changes (window dragged to a different-DPI monitor, browser
-    // zoom) leave CSS-px width untouched, so the ResizeObserver never sees them;
-    // watch DPR directly. A `(resolution: …dppx)` query pins the current ratio and
+    // zoom) leave the scale untouched, so `setScale` never hears of them; watch DPR
+    // directly. A `(resolution: …dppx)` query pins the current ratio and
     // is therefore one-shot: re-arm it against the new ratio on each change. Guarded
     // for environments (jsdom) without `matchMedia`.
     let dprQuery;
     function onDprChange() {
-        scheduleRepaint(true);
+        scheduleRepaint();
         armDprListener();
     }
     function armDprListener() {
@@ -257,14 +264,18 @@ onPaintError) {
                     paintSlot(slot);
             }
         },
-        setDensityZoom(z) {
-            zoom = z;
-            repaint();
+        setScale(next, settle) {
+            if (next === scale)
+                return;
+            scale = next;
+            for (const slot of slots)
+                sizeSlot(slot.el, slot.size);
+            scheduleRepaint(settle);
         },
         destroy() {
             if (rafId)
                 cancelAnimationFrame(rafId);
-            resizeObserver?.disconnect();
+            clearTimeout(settleId);
             dprQuery?.removeEventListener('change', onDprChange);
             observer.disconnect();
             for (const page of [...canvases.keys()])

package/dist/preview/strings.d.ts

@@ -3,6 +3,8 @@ export interface PreviewStrings {
     renderFailed: string;
     /** A compile with zero pages: recoverable, and the commonest state of a fresh seed. */
     noPages: string;
+    /** The zoom pill's action, after the percentage it shows. */
+    resetZoom: string;
 }
 /** The package's English. Every key, so the merge below is total. */
 export declare const DEFAULT_PREVIEW_STRINGS: PreviewStrings;

package/dist/preview/strings.js

@@ -1,5 +1,6 @@
 // Every word the preview says: the surface is a canvas, and its only prose is the
-// message states that stand in when there is nothing to paint.
+// message states that stand in when there is nothing to paint, and the name a screen
+// reader gives the zoom pill.
 //
 // Separate from the visual surface's set rather than pooled with it: `/preview`
 // reaches `/core` and nothing editor-side, which is what lets it promote to its own
@@ -13,7 +14,8 @@
 /** The package's English. Every key, so the merge below is total. */
 export const DEFAULT_PREVIEW_STRINGS = {
     renderFailed: 'Preview failed to render.',
-    noPages: 'No pages to preview.'
+    noPages: 'No pages to preview.',
+    resetZoom: 'reset zoom'
 };
 /** Fill a partial override to the whole key set. */
 export function mergePreviewStrings(custom) {

package/dist/preview/viewport.d.ts

@@ -0,0 +1,10 @@
+import type { PageSlot } from './paint.js';
+export interface Viewport {
+    /** Re-fit: the pane's box, or the pages' sizes after a recompile, moved. */
+    update(): void;
+    /** A fraction of actual size, held against the pane's floor; `undefined` is the
+     *  default fit. */
+    setZoom(zoom: number | undefined): void;
+    destroy(): void;
+}
+export declare function createViewport(container: HTMLElement, slots: readonly PageSlot[], setScale: (scale: number, settle?: number) => void, resetLabel: string): Viewport;

package/dist/preview/viewport.js

@@ -0,0 +1,271 @@
+import { ACTUAL, clampZoom, fitZoom, floorZoom, glide, stepZoom } from './zoom.js';
+/** How long the pill stays after the zoom last moved, or the pointer last came near. */
+const IDLE_MS = 1200;
+/** How long a continuous gesture rests before its pages re-raster at the scale it
+ *  reached: a raster per event would cost a full paint of every mounted page each one. */
+const SETTLE_MS = 150;
+/** How near the pill, in CSS px, the pointer brings it back. */
+const CORNER_REACH_PX = 64;
+/** What a wheel delta multiplies the zoom by, per unit of each `deltaMode`: a mouse
+ *  notch is about 100 px or 3 lines, which this lands near a fifth either way. */
+const WHEEL_RATE = [0.0025, 0.08, 0.25];
+/** The pixel delta under which a ctrl-wheel event is a pinch rather than a notch, and the
+ *  rate that inverts the pinch's encoding. */
+const PINCH_DELTA = 50;
+const PINCH_RATE = 0.01;
+const px = (value) => parseFloat(value) || 0;
+export function createViewport(container, slots, setScale, resetLabel) {
+    let zoom;
+    // The continuous gesture under way; a discrete act or a zoom it did not produce ends it.
+    let run;
+    let pointer;
+    // Sticky in the desk's flex column, last by `order` and pushed to the bottom by an
+    // auto margin, so the pill sits at the pane's corner however short or wide the
+    // pages are (`Preview.svelte`).
+    const dock = document.createElement('div');
+    dock.className = 'qm-preview-dock';
+    const pill = document.createElement('button');
+    pill.type = 'button';
+    pill.className = 'qm-preview-zoom';
+    dock.appendChild(pill);
+    const ownsTabIndex = !container.hasAttribute('tabindex');
+    if (ownsTabIndex)
+        container.tabIndex = 0;
+    function pane() {
+        const style = getComputedStyle(container);
+        const width = container.clientWidth - px(style.paddingLeft) - px(style.paddingRight);
+        const height = container.clientHeight - px(style.paddingTop) - px(style.paddingBottom);
+        // A pane the shell has hidden measures 0×0, which is no box to fit: the scale it
+        // was hidden at stands, so a return to the same box re-rasters nothing.
+        return width > 0 && height > 0 ? { width, height } : undefined;
+    }
+    // What the pages are drawn at, the zoom held against this pane's floor, and the floor.
+    function bounds() {
+        const box = pane();
+        if (!box || !slots.length)
+            return undefined;
+        const sizes = slots.map((s) => s.size);
+        const floor = floorZoom(sizes, box);
+        const current = zoom === undefined ? fitZoom(sizes, box) : clampZoom(zoom, floor);
+        return { current, floor };
+    }
+    function apply(settle) {
+        const b = bounds();
+        if (!b)
+            return;
+        setScale(b.current * ACTUAL, settle);
+        if (zoom === undefined) {
+            if (dock.contains(document.activeElement))
+                container.focus({ preventScroll: true });
+            dock.remove();
+            return;
+        }
+        const pct = `${Math.round(b.current * 100)}%`;
+        pill.textContent = pct;
+        pill.setAttribute('aria-label', `${pct}, ${resetLabel}`);
+        if (dock.isConnected)
+            return;
+        container.appendChild(dock);
+        wake();
+    }
+    // A pill under the pointer stays: hidden, it lets the click through to the page.
+    let idle;
+    function wake() {
+        delete pill.dataset.idle;
+        clearTimeout(idle);
+        idle = setTimeout(() => {
+            if (pill.matches(':hover'))
+                wake();
+            else
+                pill.dataset.idle = '';
+        }, IDLE_MS);
+    }
+    // The page under `y`, or the nearest one: the point a zoom holds still is a fraction
+    // of a page, since the gaps between pages do not scale with them.
+    function pageAt(y) {
+        for (const { el } of slots)
+            if (el.getBoundingClientRect().bottom >= y)
+                return el;
+        return slots.at(-1)?.el;
+    }
+    // Run `act`, then scroll so the point at `x`, `y` is over the same place on its page.
+    function holding(x, y, act) {
+        const page = pageAt(y);
+        const before = page?.getBoundingClientRect();
+        act();
+        if (!page || !before?.width || !before.height)
+            return;
+        const after = page.getBoundingClientRect();
+        container.scrollLeft += after.left + ((x - before.left) / before.width) * after.width - x;
+        container.scrollTop += after.top + ((y - before.top) / before.height) * after.height - y;
+    }
+    function zoomTo(next, x, y, settle) {
+        holding(x, y, () => {
+            zoom = next;
+            apply(settle);
+        });
+        if (zoom !== undefined)
+            wake();
+    }
+    // A re-fit holds the line at the pane's top edge, so a dragged divider leaves the
+    // reader where they were. The desk turns the browser's own scroll anchoring off
+    // (`Preview.svelte`), which would correct the same move a second time.
+    function refit() {
+        if (!container.scrollTop && !container.scrollLeft)
+            return apply();
+        const r = container.getBoundingClientRect();
+        holding(r.left + r.width / 2, r.top, () => apply());
+    }
+    function centre() {
+        const r = container.getBoundingClientRect();
+        return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+    }
+    // The pointer while it is over the pane, else the pane's centre.
+    const anchor = () => pointer ?? centre();
+    function step(next, at = anchor()) {
+        const b = bounds();
+        if (!b)
+            return;
+        run = undefined;
+        zoomTo(next(b), at.x, at.y);
+    }
+    // About the pane's centre, the pointer being on the pill.
+    const reset = () => step(() => undefined, centre());
+    // The raw zoom a gesture starting now carries from: the run's own while it is still
+    // the one on screen.
+    function from(b) {
+        return run && run.shown === b.current ? run : { raw: b.current, shown: b.current };
+    }
+    function glideTo(raw, x, y) {
+        const b = bounds();
+        if (!b)
+            return;
+        const start = from(b);
+        run = glide(start, raw(start), b.floor);
+        zoomTo(run.shown, x, y, SETTLE_MS);
+    }
+    // Ctrl-wheel is a mouse's zoom, and the trackpad pinch Chromium and Firefox send as
+    // `deltaY = -100 ln(scale)`, in deltas smaller than a notch's: those track the fingers.
+    function onWheel(e) {
+        if (!(e.ctrlKey || e.metaKey))
+            return;
+        e.preventDefault();
+        const pinched = e.deltaMode === 0 && Math.abs(e.deltaY) < PINCH_DELTA;
+        const factor = Math.exp(-e.deltaY * (pinched ? PINCH_RATE : WHEEL_RATE[e.deltaMode]));
+        glideTo((g) => g.raw * factor, e.clientX, e.clientY);
+    }
+    // The keys reach the pane under the pointer as well as the focused one: a click on a
+    // page lands its caret in the editor, taking the focus with it.
+    // The first pane to take a key claims it, so two previews never both step, and a key
+    // a host's own handler took is left to it.
+    function onKeyDown(e) {
+        if (!(e.ctrlKey || e.metaKey) || e.altKey || e.defaultPrevented || e.isComposing)
+            return;
+        if (!pointer && !container.contains(document.activeElement))
+            return;
+        const dir = e.key === '=' || e.key === '+' ? 1 : e.key === '-' || e.key === '_' ? -1 : 0;
+        if ((!dir && e.key !== '0') || !bounds())
+            return;
+        e.preventDefault();
+        step((b) => (dir ? stepZoom(b.current, dir, b.floor) : undefined));
+    }
+    // A two-finger pinch on a touch screen. The browser's own page zoom is held off by the
+    // desk's `touch-action` and by cancelling the move, which also stops the pan a second
+    // finger would otherwise start.
+    let pinch;
+    const spread = (t) => Math.hypot(t[0].clientX - t[1].clientX, t[0].clientY - t[1].clientY);
+    function onTouchStart(e) {
+        if (e.touches.length !== 2)
+            return;
+        const b = bounds();
+        if (b)
+            pinch = { spread: spread(e.touches), raw: from(b).raw };
+    }
+    function onTouchMove(e) {
+        if (!pinch || e.touches.length !== 2)
+            return;
+        e.preventDefault();
+        const [a, b] = [e.touches[0], e.touches[1]];
+        const ratio = spread(e.touches) / pinch.spread;
+        const start = pinch.raw;
+        glideTo(() => start * ratio, (a.clientX + b.clientX) / 2, (a.clientY + b.clientY) / 2);
+    }
+    function onTouchEnd(e) {
+        if (e.touches.length < 2)
+            pinch = undefined;
+    }
+    // Safari's trackpad pinch. iOS sends these beside the touches, which are the ones read
+    // there; either way the page zoom is cancelled.
+    let gesture;
+    function onGestureStart(e) {
+        e.preventDefault();
+        const b = bounds();
+        gesture = pinch || !b ? undefined : from(b).raw;
+    }
+    function onGestureChange(e) {
+        e.preventDefault();
+        if (gesture === undefined || pinch)
+            return;
+        const { scale, clientX, clientY } = e;
+        const start = gesture;
+        const at = Number.isFinite(clientX + clientY) ? { x: clientX, y: clientY } : anchor();
+        glideTo(() => start * scale, at.x, at.y);
+    }
+    function onGestureEnd(e) {
+        e.preventDefault();
+        gesture = undefined;
+    }
+    function onPointerMove(e) {
+        if (e.pointerType === 'touch')
+            return;
+        pointer = { x: e.clientX, y: e.clientY };
+        if (!dock.isConnected)
+            return;
+        const r = pill.getBoundingClientRect();
+        if (e.clientX >= r.left - CORNER_REACH_PX && e.clientY >= r.top - CORNER_REACH_PX)
+            wake();
+    }
+    function onPointerLeave() {
+        pointer = undefined;
+    }
+    const listeners = [
+        [container, 'wheel', onWheel, { passive: false }],
+        [window, 'keydown', onKeyDown],
+        [container, 'touchstart', onTouchStart, { passive: true }],
+        [container, 'touchmove', onTouchMove, { passive: false }],
+        [container, 'touchend', onTouchEnd],
+        [container, 'touchcancel', onTouchEnd],
+        [container, 'gesturestart', onGestureStart],
+        [container, 'gesturechange', onGestureChange],
+        [container, 'gestureend', onGestureEnd],
+        [container, 'pointermove', onPointerMove],
+        [container, 'pointerleave', onPointerLeave],
+        [pill, 'click', reset]
+    ];
+    for (const [target, type, fn, opts] of listeners)
+        target.addEventListener(type, fn, opts);
+    // The pane's box moving: a dragged divider, a resized window, a hidden track shown.
+    // Guarded for jsdom, which ships no ResizeObserver.
+    const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(() => refit());
+    resizeObserver?.observe(container);
+    apply();
+    return {
+        update: refit,
+        setZoom(next) {
+            const valid = next !== undefined && Number.isFinite(next) && next > 0 ? next : undefined;
+            if (bounds())
+                step(() => valid);
+            else
+                zoom = valid;
+        },
+        destroy() {
+            for (const [target, type, fn] of listeners)
+                target.removeEventListener(type, fn);
+            resizeObserver?.disconnect();
+            clearTimeout(idle);
+            dock.remove();
+            if (ownsTabIndex)
+                container.removeAttribute('tabindex');
+        }
+    };
+}

package/dist/preview/zoom.d.ts

@@ -0,0 +1,41 @@
+import type { PageSize } from '@quillmark/wasm';
+/** CSS px per PDF pt at 100%: 96 CSS px to the inch over 72 pt, a PDF viewer's actual
+ *  size. */
+export declare const ACTUAL: number;
+/** The furthest a gesture zooms in. */
+export declare const MAX_ZOOM = 2;
+/** What `Mod +` and `Mod −` step through: a subset of the levels a browser's own zoom
+ *  keys land on, so a step lands somewhere a reader has been before. */
+export declare const STEPS: readonly [0.67, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2];
+/** The pane's content box, in CSS px. */
+export interface Pane {
+    width: number;
+    height: number;
+}
+/** The default: the widest page fits the pane's width, capped at {@link FIT_CAP}. A
+ *  portrait-only document lands at the pane's width, as a narrow pane always drew it. */
+export declare function fitZoom(pages: readonly PageSize[], pane: Pane): number;
+/** The furthest a gesture zooms out: every page fits the pane whole with
+ *  {@link FLOOR_FILL} of it filled on the page's limiting axis, and never past the
+ *  default, which on a pane past the cap is already smaller than that. */
+export declare function floorZoom(pages: readonly PageSize[], pane: Pane): number;
+export declare function clampZoom(zoom: number, floor: number): number;
+/** The next level in `dir` from `zoom`, skipping levels under `floor`. From between two
+ *  levels the first press lands on the nearer one in that direction; past the last level
+ *  above the floor, the floor. Half a percent of slack, so a zoom shown as a level is at
+ *  it. */
+export declare function stepZoom(zoom: number, dir: 1 | -1, floor: number): number;
+/**
+ * A continuous gesture's run: where it would be unsnapped (`raw`), and what it shows.
+ * The run carries `raw` across events, so the detent at 100% holds a slow gesture
+ * rather than stopping it: a trackpad's small deltas accumulate past the detent, where
+ * snapping the shown value alone would pin every later event back to it.
+ */
+export interface Glide {
+    raw: number;
+    shown: number;
+}
+/** One event of a continuous gesture, carrying the run to `raw`: held at 100% when it
+ *  crosses or lands within {@link DETENT} of it, so one wheel notch across actual size
+ *  stops there. */
+export declare function glide(run: Glide, raw: number, floor: number): Glide;

package/dist/preview/zoom.js

@@ -0,0 +1,52 @@
+/** CSS px per PDF pt at 100%: 96 CSS px to the inch over 72 pt, a PDF viewer's actual
+ *  size. */
+export const ACTUAL = 96 / 72;
+/** The default never draws a page larger than this, so a wide pane shows a sheet at a
+ *  size print would recognise rather than one stretched to the pane. */
+const FIT_CAP = 1.25;
+/** The furthest a gesture zooms in. */
+export const MAX_ZOOM = 2;
+/** How much of the pane the page still fills, on its limiting axis, at the furthest a
+ *  gesture zooms out: the whole page in view with a thin margin, and never a stamp. */
+const FLOOR_FILL = 0.9;
+/** What `Mod +` and `Mod −` step through: a subset of the levels a browser's own zoom
+ *  keys land on, so a step lands somewhere a reader has been before. */
+export const STEPS = [0.67, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2];
+/** How far past 100% a continuous gesture carries before it leaves it. */
+const DETENT = 0.04;
+/** The default: the widest page fits the pane's width, capped at {@link FIT_CAP}. A
+ *  portrait-only document lands at the pane's width, as a narrow pane always drew it. */
+export function fitZoom(pages, pane) {
+    const widest = Math.max(...pages.map((p) => p.widthPt));
+    return Math.min(pane.width / (widest * ACTUAL), FIT_CAP);
+}
+/** The furthest a gesture zooms out: every page fits the pane whole with
+ *  {@link FLOOR_FILL} of it filled on the page's limiting axis, and never past the
+ *  default, which on a pane past the cap is already smaller than that. */
+export function floorZoom(pages, pane) {
+    const whole = Math.min(...pages.map((p) => Math.min(pane.width / p.widthPt, pane.height / p.heightPt)));
+    return Math.min((FLOOR_FILL * whole) / ACTUAL, fitZoom(pages, pane));
+}
+export function clampZoom(zoom, floor) {
+    return Math.min(MAX_ZOOM, Math.max(floor, zoom));
+}
+/** The next level in `dir` from `zoom`, skipping levels under `floor`. From between two
+ *  levels the first press lands on the nearer one in that direction; past the last level
+ *  above the floor, the floor. Half a percent of slack, so a zoom shown as a level is at
+ *  it. */
+export function stepZoom(zoom, dir, floor) {
+    const next = dir > 0
+        ? STEPS.find((s) => s > zoom + 0.005)
+        : [...STEPS].reverse().find((s) => s < zoom - 0.005 && s >= floor);
+    return clampZoom(next ?? (dir > 0 ? MAX_ZOOM : floor), floor);
+}
+/** One event of a continuous gesture, carrying the run to `raw`: held at 100% when it
+ *  crosses or lands within {@link DETENT} of it, so one wheel notch across actual size
+ *  stops there. */
+export function glide(run, raw, floor) {
+    let next = clampZoom(raw, floor);
+    if ((run.shown - 1) * (next - 1) < 0)
+        next = 1;
+    const shown = Math.abs(next - 1) <= DETENT ? 1 : next;
+    return { raw: next, shown: clampZoom(shown, floor) };
+}

package/dist/visual/ArrayField.svelte

@@ -39,10 +39,10 @@
  one gesture the row keeps never needs a scroll to reach.
 
  Keys carry the list without the mouse: Enter inserts a sibling below and takes the
- caret there, Backspace on an empty element removes it and hands focus back up the
- list, Alt+↑/↓ anywhere in an `object` row of the list moves it, the nearest row
- answering and never the record around a nested one, and is the twin of the handle's
- drag. A move is one splice of the ids
+ caret there, a paste of several lines into a prose row opens a row per line,
+ Backspace on an empty element removes it and hands focus back up the list, Alt+↑/↓
+ anywhere in an `object` row of the list moves it, the nearest row answering and never
+ the record around a nested one, and is the twin of the handle's drag. A move is one splice of the ids
  and of the values together, the mechanism insert and remove use, so an element keeps
  its id for life and no prose leaf inside it remounts; the open row stays open across
  its own move, and `animate:reorder` holds the moving row as it holds a card.
@@ -307,6 +307,22 @@
 		if (control === 'object' && !table) open.add(id);
 		void focusAfterFlush(id, column);
 	}
+	/** Element `k` as `row` and `below` as new elements after it, one commit: a paste of
+	 *  several lines into a row, each line past the first a row as Enter would open it.
+	 *  The caret ends where the paste does, at the end of the last. */
+	function spill(k: number, row: Content, below: Content[]): void {
+		const at = k + 1;
+		const fresh = seq.take(below.length);
+		ids = [...ids.slice(0, at), ...fresh, ...ids.slice(at)];
+		const next = arr.slice();
+		next[k] = row;
+		next.splice(at, 0, ...below);
+		onCommit(next);
+		void (async () => {
+			if (!(await span.resumes(tick()))) return;
+			els[fresh.at(-1)!]?.setCaret?.(Number.MAX_SAFE_INTEGER);
+		})();
+	}
 	function add(): void {
 		insertAfter(ids.length - 1);
 	}
@@ -804,6 +820,10 @@
 							cap={textCap(items)}
 							label={rowName(k)}
 							onChange={(rt) => commitElement(k, rt)}
+							lines={{
+								room: () => (max == null ? Infinity : max - arr.length),
+								onLines: (rt, below) => spill(k, rt, below)
+							}}
 							onKey={(e) => onElementKey(e, k)}
 						/>
 					{:else}