@mystravil/hardpoint 0.0.0-stage → 0.2.0

package/dist/components/internal/resolve.js

@@ -0,0 +1,247 @@
+// Image resolve (BRIEF, motion rule 10; da3-57, da3-59), for MediaImage in
+// the expressive tier. Internal: the package does not export it.
+//
+// An image that arrives after its skeleton showed appears as a mosaic of
+// square blocks, each about the average colour of the part of the image it
+// covers, and sharpens in discrete steps to the image itself:
+//
+//   step 1  blocks of about 32 CSS px     step 4  about 4 CSS px
+//   step 2  about 16                      step 5  about 2
+//   step 3  about 8                       then    the image
+//
+// Each step lasts `--resolve-step` (42ms, one reel frame at 24 fps; the
+// caller reads it from the element when the resolve starts), counted from
+// the first frame on screen, so the image shows five steps (210ms) after
+// the mosaic first did, inside the rule's 300ms. The reel's photo goes from
+// blocks of about 36px to crisp in 7 frames (da3-57), and its mosaics settle
+// in about 8 frames, halving about every 1.5 (measurements §4.7 to §4.9);
+// this halves every step, a shorter form of the same ramp.
+//
+// Crisp squares: the canvas bitmap has exactly the device pixels its box
+// covers on screen (a ResizeObserver on `device-pixel-content-box`, where
+// the browser has it), and every block is a whole number of device pixels:
+// `round(2 × devicePixelRatio)` for the finest step, doubled for each
+// coarser one, on a grid from the top left corner. So each block splits
+// into four of the next step and every edge lands on a device pixel. The
+// box rarely holds a whole number of blocks: the last column and row cover
+// what is left, and when that is less than half a block, the column or row
+// beside it widens over it, so no thin strip lines the right or bottom
+// edge. Blocks are drawn by scaling a canvas of one pixel per block with
+// smoothing off, by a whole factor except along those edges, and the
+// canvas element has `image-rendering: pixelated`, so where the browser
+// cannot report device pixels the blocks may differ by a pixel but never
+// blur.
+//
+// No pixel is ever read back. The image is drawn once, whole, into a copy
+// of about two pixels per finest block, with high-quality smoothing; that
+// draw decodes it. The finest step takes each block's part of the copy down
+// to one pixel, and each coarser step is the step before it drawn at half
+// size with bilinear smoothing, which makes each block the mean of the four
+// under it. Taking the parts from the copy, not from the image, matters:
+// in Chrome, four draws of fractional parts of a 1200 x 800 JPEG cost two
+// decodes (measured 2026-11-11). So the work is one decode and a few draws
+// of small canvases (178 x 119 pixels for the finest step of a 356 x 237
+// CSS px box at a ratio of 3), and an image from another origin served
+// without CORS headers resolves like any other: drawing it only taints the
+// canvases, which stay on screen and are never read.
+//
+//   const stop = resolveImage(canvas, image, step, done);
+//
+// The image is drawn as `object-fit: cover` draws it. The caller keeps the
+// real <img> (with its alt) in the document under the aria-hidden canvas,
+// and removes the canvas when `done` runs. The mosaic is computed and its
+// first step drawn before the canvas is first painted, in the
+// ResizeObserver callback.
+/** Steps from the coarsest blocks to the finest, before the image itself. */
+const STEPS = 5;
+/** The finest blocks, in CSS px; each coarser step doubles them. */
+const FINEST = 2;
+/**
+ * Shows `image` on `canvas` as a mosaic that sharpens one step per `step`
+ * ms, then calls `done`. The canvas carries `data-step` (1 to 5) and
+ * `data-block` (the block size in device pixels) for the step on screen.
+ * When the box is empty or the image has no size, `done` runs at once.
+ * Returns a stop function.
+ */
+export function resolveImage(canvas, image, step, done) {
+    let stop;
+    // The first report comes after layout and before the canvas is first
+    // painted. Later size changes keep the bitmap, scaled. The device-pixel
+    // size counts only when it agrees with the CSS size times the ratio
+    // (Chromium's device emulation reports it unscaled).
+    const observer = new ResizeObserver(([entry]) => {
+        observer.disconnect();
+        const ratio = devicePixelRatio;
+        const css = entry.contentRect;
+        const near = (device, size) => device !== undefined && Math.abs(device - size * ratio) <= 1 ? device : Math.round(size * ratio);
+        const device = entry.devicePixelContentBoxSize?.[0];
+        const width = near(device?.inlineSize, css.width);
+        const height = near(device?.blockSize, css.height);
+        const steps = mosaic(image, width, height, ratio);
+        if (!steps) {
+            stop = () => { };
+            return done();
+        }
+        stop = play(canvas, width, height, steps, step, done);
+    });
+    try {
+        observer.observe(canvas, { box: 'device-pixel-content-box' });
+    }
+    catch {
+        observer.observe(canvas);
+    }
+    return () => {
+        observer.disconnect();
+        stop?.();
+    };
+}
+/** A canvas of `width` x `height` pixels and its context, smoothing at `quality`. */
+function surface(width, height, quality) {
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return null;
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = quality;
+    return { canvas, ctx };
+}
+/**
+ * The grid's whole blocks and its last block along one axis, as
+ * `[first cell, cells, device px from, device px across]`: `count` cells of
+ * `block` px over `size` px, the last one covering what is left.
+ */
+function spans(count, block, size) {
+    const whole = (count - 1) * block;
+    const last = [count - 1, 1, whole, size - whole];
+    return count > 1 ? [[0, count - 1, 0, whole], last] : [last];
+}
+/**
+ * Halving `count` cells along one axis, as `[from, cells, to, cells]`:
+ * pairs draw at half size into one cell each, and an odd last cell is
+ * copied as it is.
+ */
+function halves(count) {
+    const paired = count - (count % 2);
+    const out = [];
+    if (paired)
+        out.push([0, paired, 0, paired / 2]);
+    if (count % 2)
+        out.push([count - 1, 1, paired / 2, 1]);
+    return out;
+}
+/** The mosaic steps of `image` over a `width` x `height` device pixel box, coarsest first. */
+function mosaic(image, width, height, ratio) {
+    const iw = image.naturalWidth;
+    const ih = image.naturalHeight;
+    if (width < 1 || height < 1 || iw < 1 || ih < 1)
+        return null;
+    // The image as `object-fit: cover` draws it: `scale` device pixels per
+    // image pixel, centred.
+    const scale = Math.max(width / iw, height / ih);
+    const left = (iw - width / scale) / 2;
+    const top = (ih - height / scale) / 2;
+    // The image drawn once, whole, at about two pixels per finest block (at
+    // most its own size): the one draw that decodes it.
+    let block = Math.max(1, Math.round(FINEST * ratio));
+    const shrink = Math.min(1, (2 * scale) / block);
+    const copy = surface(Math.max(1, Math.round(iw * shrink)), Math.max(1, Math.round(ih * shrink)), 'high');
+    if (!copy)
+        return null;
+    copy.ctx.drawImage(image, 0, 0, copy.canvas.width, copy.canvas.height);
+    const kx = copy.canvas.width / iw;
+    const ky = copy.canvas.height / ih;
+    // The finest step: each block's part of the copy drawn down to one pixel.
+    let cols = Math.ceil(width / block);
+    let rows = Math.ceil(height / block);
+    let cells = surface(cols, rows, 'low');
+    if (!cells)
+        return null;
+    for (const [dx, dw, sx, sw] of spans(cols, block, width)) {
+        for (const [dy, dh, sy, sh] of spans(rows, block, height)) {
+            const x = (left + sx / scale) * kx;
+            const y = (top + sy / scale) * ky;
+            cells.ctx.drawImage(copy.canvas, x, y, (sw / scale) * kx, (sh / scale) * ky, dx, dy, dw, dh);
+        }
+    }
+    const steps = [];
+    for (let k = 0;; k++) {
+        const restX = width - (cols - 1) * block;
+        const restY = height - (rows - 1) * block;
+        const joinX = cols > 1 && restX < block / 2;
+        const joinY = rows > 1 && restY < block / 2;
+        steps.unshift({
+            block,
+            cells: cells.canvas,
+            cols: joinX ? cols - 1 : cols,
+            rows: joinY ? rows - 1 : rows,
+            lastWidth: joinX ? block + restX : restX,
+            lastHeight: joinY ? block + restY : restY
+        });
+        if (k === STEPS - 1)
+            return steps;
+        // Four blocks make one of the next step: half size, bilinear, so each
+        // new pixel is the mean of the four under it.
+        const next = surface(Math.ceil(cols / 2), Math.ceil(rows / 2), 'low');
+        if (!next)
+            return null;
+        for (const [sx, sw, dx, dw] of halves(cols)) {
+            for (const [sy, sh, dy, dh] of halves(rows)) {
+                next.ctx.drawImage(cells.canvas, sx, sy, sw, sh, dx, dy, dw, dh);
+            }
+        }
+        cells = next;
+        cols = next.canvas.width;
+        rows = next.canvas.height;
+        block *= 2;
+    }
+}
+/** Draws the first step now and one more per `step` ms after it, then calls `done`. */
+function play(canvas, width, height, steps, step, done) {
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        done();
+        return () => { };
+    }
+    ctx.imageSmoothingEnabled = false;
+    let shown = 0;
+    const show = (n) => {
+        const { block, cells, cols, rows, lastWidth, lastHeight } = steps[n];
+        // Whole blocks at a whole scale, then the last column, the last row
+        // and the corner, stretched to the edges. Cleared first, so an image
+        // with transparent parts never stacks two steps.
+        const c = cols - 1;
+        const r = rows - 1;
+        const x = c * block;
+        const y = r * block;
+        ctx.clearRect(0, 0, width, height);
+        if (c && r)
+            ctx.drawImage(cells, 0, 0, c, r, 0, 0, x, y);
+        if (r)
+            ctx.drawImage(cells, c, 0, 1, r, x, 0, lastWidth, y);
+        if (c)
+            ctx.drawImage(cells, 0, r, c, 1, 0, y, x, lastHeight);
+        ctx.drawImage(cells, c, r, 1, 1, x, y, lastWidth, lastHeight);
+        canvas.dataset.step = String(n + 1);
+        canvas.dataset.block = String(block);
+        shown = n;
+    };
+    show(0);
+    // The first step is painted with this frame, once the work above is
+    // done, so its time starts now.
+    const start = performance.now();
+    let raf = 0;
+    const tick = (now) => {
+        const n = Math.floor((now - start) / step);
+        if (n >= steps.length)
+            return done();
+        if (n > shown)
+            show(n);
+        raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+}

package/dist/components/internal/swipe-dismiss.d.ts

@@ -0,0 +1,47 @@
+import type { Attachment } from 'svelte/attachments';
+/**
+ * A way a swipe sends the panel off screen: `down` for a bottom sheet,
+ * `left` for a drawer from the left edge, and `left`, `right` or `down` for
+ * the toast.
+ */
+export type SwipeDirection = 'down' | 'left' | 'right';
+export interface SwipeDismissOptions {
+    /** The way a swipe dismisses, or several ways. Default `down`. */
+    direction?: SwipeDirection | readonly SwipeDirection[];
+    /** Share of the panel's height (`down`) or width (`left`, `right`) a release must pass to dismiss. Default 0.25. */
+    distance?: number;
+    /** Release speed in px/ms towards a direction that dismisses at any distance. Default 0.5. */
+    velocity?: number;
+}
+/**
+ * Swipe to dismiss: down for a bottom sheet (BRIEF, Apps and phones:
+ * Overlays), left for the shell's drawer, and left, right or down for the
+ * toast. Attach it to the panel:
+ * `{@attach swipeDismiss(() => (open = false))}`,
+ * `{@attach swipeDismiss(close, { direction: 'left' })}`, or
+ * `{@attach swipeDismiss(away, { direction: ['left', 'right', 'down'] })}`.
+ *
+ * The panel follows the finger through the CSS `translate` property, so
+ * `transform` stays free for the transitions: after a dismiss the exit plays
+ * on from where the finger let go, and under reduced motion it fades in
+ * place. A release past `distance` of the panel's size along the swipe, or a
+ * flick the way the panel moved, calls `onDismiss` with that direction, so
+ * the exit can carry on that way; a shorter drag springs back over
+ * `--dur-sheet-exit` (at once under reduced motion).
+ *
+ * With several directions, a drag takes the first one the finger moves
+ * towards more than across it and stays on that axis: a panel that takes
+ * `left` and `right` follows the finger both ways along it, with the slop
+ * on either side of where the touch began.
+ *
+ * A touch that starts inside a list that can still scroll the way the
+ * finger moves scrolls the list: a sheet moves only once its list sits at
+ * its top. A move no direction takes (sideways on a sheet, up or down in a
+ * drawer) is the browser's, so the gesture never fights the scroll; give a
+ * drawer `touch-action: pan-y`, so a sideways move reaches the swipe, and a
+ * panel that swipes along both axes `touch-action: pinch-zoom`. A drag never
+ * activates what it started on: its `pointerup` and any `click` stop at the
+ * panel. Touch only; a mouse closes a panel through its close button, the
+ * scrim or Escape.
+ */
+export declare function swipeDismiss(onDismiss: (direction: SwipeDirection) => void, { direction, distance, velocity }?: SwipeDismissOptions): Attachment<HTMLElement>;

package/dist/components/internal/swipe-dismiss.js

@@ -0,0 +1,220 @@
+import { prefersReducedMotion } from 'svelte/motion';
+/** Each direction's axis, and the sign of a screen coordinate moving that way. */
+const WAYS = {
+    down: { axis: 'y', sign: 1 },
+    left: { axis: 'x', sign: -1 },
+    right: { axis: 'x', sign: 1 }
+};
+/** Travel before a touch counts as a drag; it is not added to the panel's offset. */
+const SLOP = 8;
+/** A flick counts only if the finger was still moving this recently (ms). */
+const FLICK_WINDOW = 100;
+/**
+ * Swipe to dismiss: down for a bottom sheet (BRIEF, Apps and phones:
+ * Overlays), left for the shell's drawer, and left, right or down for the
+ * toast. Attach it to the panel:
+ * `{@attach swipeDismiss(() => (open = false))}`,
+ * `{@attach swipeDismiss(close, { direction: 'left' })}`, or
+ * `{@attach swipeDismiss(away, { direction: ['left', 'right', 'down'] })}`.
+ *
+ * The panel follows the finger through the CSS `translate` property, so
+ * `transform` stays free for the transitions: after a dismiss the exit plays
+ * on from where the finger let go, and under reduced motion it fades in
+ * place. A release past `distance` of the panel's size along the swipe, or a
+ * flick the way the panel moved, calls `onDismiss` with that direction, so
+ * the exit can carry on that way; a shorter drag springs back over
+ * `--dur-sheet-exit` (at once under reduced motion).
+ *
+ * With several directions, a drag takes the first one the finger moves
+ * towards more than across it and stays on that axis: a panel that takes
+ * `left` and `right` follows the finger both ways along it, with the slop
+ * on either side of where the touch began.
+ *
+ * A touch that starts inside a list that can still scroll the way the
+ * finger moves scrolls the list: a sheet moves only once its list sits at
+ * its top. A move no direction takes (sideways on a sheet, up or down in a
+ * drawer) is the browser's, so the gesture never fights the scroll; give a
+ * drawer `touch-action: pan-y`, so a sideways move reaches the swipe, and a
+ * panel that swipes along both axes `touch-action: pinch-zoom`. A drag never
+ * activates what it started on: its `pointerup` and any `click` stop at the
+ * panel. Touch only; a mouse closes a panel through its close button, the
+ * scrim or Escape.
+ */
+export function swipeDismiss(onDismiss, { direction = 'down', distance = 0.25, velocity = 0.5 } = {}) {
+    const ways = typeof direction === 'string' ? [direction] : direction;
+    const usesX = ways.some((w) => WAYS[w].axis === 'x');
+    const usesY = ways.some((w) => WAYS[w].axis === 'y');
+    /** The panel's direction along `axis` towards `sign`, if it takes one. */
+    const wayTo = (axis, sign) => ways.find((w) => WAYS[w].axis === axis && WAYS[w].sign === sign);
+    return (node) => {
+        let phase = 'idle';
+        let dragged = false;
+        let startX = 0;
+        let startY = 0;
+        // While dragging: the axis it moves on, the panel's offset along it in
+        // screen pixels, and the finger's last travel from the start and its
+        // speed along it (px/ms).
+        let axis = 'y';
+        let offset = 0;
+        let last = 0;
+        let lastT = 0;
+        let speed = 0;
+        let scrollerX = null;
+        let scrollerY = null;
+        function place(shift, animate) {
+            node.style.transition = animate ? 'translate var(--dur-sheet-exit) var(--settle)' : '';
+            node.style.translate = shift !== 0 ? (axis === 'x' ? `${shift}px 0` : `0 ${shift}px`) : '';
+        }
+        /** The nearest ancestor of the touch, inside the panel, that scrolls along `along`. */
+        function scrollerOf(target, along) {
+            for (let el = target instanceof Element ? target : null; el && el !== node; el = el.parentElement) {
+                if (!(el instanceof HTMLElement))
+                    continue;
+                if (along === 'x' ? el.scrollWidth <= el.clientWidth : el.scrollHeight <= el.clientHeight)
+                    continue;
+                const style = getComputedStyle(el);
+                const overflow = along === 'x' ? style.overflowX : style.overflowY;
+                if (overflow === 'auto' || overflow === 'scroll')
+                    return el;
+            }
+            return null;
+        }
+        /**
+         * Whether a list under the touch still scrolls the way the finger
+         * moves: a sheet's list away from its top, a drawer's row short of its
+         * end, a row scrolled away from its start.
+         */
+        function scrolls(way) {
+            if (way === 'down')
+                return !!scrollerY && scrollerY.scrollTop > 0;
+            if (!scrollerX)
+                return false;
+            if (way === 'left')
+                return Math.ceil(scrollerX.scrollLeft) + scrollerX.clientWidth < scrollerX.scrollWidth;
+            return scrollerX.scrollLeft > 0;
+        }
+        function release() {
+            if (phase === 'dragging')
+                place(0, !prefersReducedMotion.current);
+            phase = 'idle';
+            offset = 0;
+        }
+        function onTouchStart(e) {
+            if (e.touches.length !== 1) {
+                // A second finger is not a swipe.
+                release();
+                return;
+            }
+            const touch = e.touches[0];
+            startX = touch.clientX;
+            startY = touch.clientY;
+            lastT = e.timeStamp;
+            speed = 0;
+            offset = 0;
+            scrollerX = usesX ? scrollerOf(e.target, 'x') : null;
+            scrollerY = usesY ? scrollerOf(e.target, 'y') : null;
+            phase = 'pending';
+        }
+        function onTouchMove(e) {
+            if (phase === 'idle')
+                return;
+            const touch = e.touches[0];
+            const dx = touch.clientX - startX;
+            const dy = touch.clientY - startY;
+            if (phase === 'pending') {
+                // The first direction the finger moves towards more than across it.
+                const way = ways.find((w) => {
+                    const { axis: a, sign } = WAYS[w];
+                    const travel = sign * (a === 'x' ? dx : dy);
+                    return travel > 0 && travel >= Math.abs(a === 'x' ? dy : dx);
+                });
+                if (!way || scrolls(way)) {
+                    // Back, across, or a list with room to scroll: the browser's gesture.
+                    if (Math.abs(dx) + Math.abs(dy) > 2)
+                        phase = 'idle';
+                    return;
+                }
+                // Towards dismissal: the panel takes the gesture, so the list
+                // neither scrolls nor overscrolls.
+                if (e.cancelable)
+                    e.preventDefault();
+                const { axis: a, sign } = WAYS[way];
+                const along = a === 'x' ? dx : dy;
+                if (sign * along < SLOP)
+                    return;
+                phase = 'dragging';
+                dragged = true;
+                axis = a;
+                last = along;
+                lastT = e.timeStamp;
+            }
+            if (e.cancelable)
+                e.preventDefault();
+            // The travel from the touch's start less the slop, towards the
+            // panel's directions only.
+            const moved = axis === 'x' ? dx : dy;
+            offset = moved > SLOP && wayTo(axis, 1) ? moved - SLOP : moved < -SLOP && wayTo(axis, -1) ? moved + SLOP : 0;
+            const dt = e.timeStamp - lastT;
+            if (dt > 0)
+                speed = (moved - last) / dt;
+            last = moved;
+            lastT = e.timeStamp;
+            place(offset, false);
+        }
+        function onTouchEnd(e) {
+            if (phase !== 'dragging') {
+                phase = 'idle';
+                return;
+            }
+            // The way the panel moved; at rest, the way the finger was going.
+            const way = wayTo(axis, Math.sign(offset || speed));
+            const flick = !!way && WAYS[way].sign * speed > velocity && e.timeStamp - lastT < FLICK_WINDOW;
+            const size = axis === 'x' ? node.offsetWidth : node.offsetHeight;
+            if (way && (Math.abs(offset) > size * distance || flick)) {
+                // Keep the offset: the exit transition continues from here.
+                phase = 'idle';
+                onDismiss(way);
+            }
+            else {
+                release();
+            }
+        }
+        // Any new press clears the flag left by the last drag.
+        function onPointerDown() {
+            dragged = false;
+        }
+        // Pointer events fire before their touch events, so the drag is still
+        // in progress when its pointerup arrives.
+        function onPointerUp(e) {
+            if (e.pointerType === 'touch' && phase === 'dragging')
+                e.stopPropagation();
+        }
+        // A drag's click, if the browser sends one, never reaches the content.
+        // A click from the keyboard or from code (detail 0) is never a drag's,
+        // and it comes with no press to clear the flag.
+        function onClick(e) {
+            if (!dragged || e.detail === 0)
+                return;
+            dragged = false;
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        const capture = { capture: true };
+        node.addEventListener('touchstart', onTouchStart, { passive: true });
+        node.addEventListener('touchmove', onTouchMove, { passive: false });
+        node.addEventListener('touchend', onTouchEnd, { passive: true });
+        node.addEventListener('touchcancel', release, { passive: true });
+        node.addEventListener('pointerdown', onPointerDown, capture);
+        node.addEventListener('pointerup', onPointerUp, capture);
+        node.addEventListener('click', onClick, capture);
+        return () => {
+            node.removeEventListener('touchstart', onTouchStart);
+            node.removeEventListener('touchmove', onTouchMove);
+            node.removeEventListener('touchend', onTouchEnd);
+            node.removeEventListener('touchcancel', release);
+            node.removeEventListener('pointerdown', onPointerDown, capture);
+            node.removeEventListener('pointerup', onPointerUp, capture);
+            node.removeEventListener('click', onClick, capture);
+        };
+    };
+}

package/dist/components/internal/visual-viewport.svelte.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The visual viewport while it is at least 1px shorter than the layout
+ * viewport, as when the on-screen keyboard is up: its top and bottom edges,
+ * measured from the layout viewport's top, and its height, in px.
+ */
+export interface VisualViewportLift {
+    top: number;
+    bottom: number;
+    height: number;
+}
+/**
+ * The on-screen keyboard for a panel fixed to the layout viewport: the
+ * shared Sheet and the full-screen Dialog follow the visual viewport while
+ * they are open (decided 2026-11-10). A fixed panel sits on the layout
+ * viewport, and the keyboard shrinks only the visual viewport (Chrome on
+ * Android by default, iOS always), so it covers the panel's lower part.
+ * Call this while the component initialises; place the panel from
+ * `current`, which is null while the visual viewport is not shorter.
+ *
+ * While `open()` is true it listens to `visualViewport` `resize` and
+ * `scroll`. A pinch zoom shrinks the visual viewport on purpose; the panel
+ * then keeps its last place, as omp-remote's shell does. Each opening
+ * starts from the layout viewport, so a keyboard line left from the last
+ * opening never carries over; closing keeps the last place, so the exit
+ * plays from there. The listeners start before the panel mounts, so it
+ * opens in place.
+ *
+ * When the panel moves or shrinks, the focused element inside `body()` (the
+ * panel's scrolling body) stays in sight: the body scrolls it into view,
+ * the nearest way, top first if it is taller than the body. Only the body,
+ * so neither the page nor the visual viewport moves.
+ */
+export declare function followVisualViewport(open: () => boolean, body: () => HTMLElement | null): {
+    readonly current: VisualViewportLift | null;
+};

package/dist/components/internal/visual-viewport.svelte.js

@@ -0,0 +1,79 @@
+import { untrack } from 'svelte';
+/** Room kept round a field the body scrolls into view: its focus contour (2px, 4px out) and some air. */
+const REVEAL_MARGIN = 8;
+/**
+ * The on-screen keyboard for a panel fixed to the layout viewport: the
+ * shared Sheet and the full-screen Dialog follow the visual viewport while
+ * they are open (decided 2026-11-10). A fixed panel sits on the layout
+ * viewport, and the keyboard shrinks only the visual viewport (Chrome on
+ * Android by default, iOS always), so it covers the panel's lower part.
+ * Call this while the component initialises; place the panel from
+ * `current`, which is null while the visual viewport is not shorter.
+ *
+ * While `open()` is true it listens to `visualViewport` `resize` and
+ * `scroll`. A pinch zoom shrinks the visual viewport on purpose; the panel
+ * then keeps its last place, as omp-remote's shell does. Each opening
+ * starts from the layout viewport, so a keyboard line left from the last
+ * opening never carries over; closing keeps the last place, so the exit
+ * plays from there. The listeners start before the panel mounts, so it
+ * opens in place.
+ *
+ * When the panel moves or shrinks, the focused element inside `body()` (the
+ * panel's scrolling body) stays in sight: the body scrolls it into view,
+ * the nearest way, top first if it is taller than the body. Only the body,
+ * so neither the page nor the visual viewport moves.
+ */
+export function followVisualViewport(open, body) {
+    let lifted = $state(null);
+    $effect.pre(() => {
+        if (!open())
+            return;
+        const viewport = window.visualViewport;
+        if (!viewport)
+            return;
+        const sync = () => {
+            if (Math.abs(viewport.scale - 1) > 0.01)
+                return;
+            if (document.documentElement.clientHeight - viewport.height < 1) {
+                lifted = null;
+                return;
+            }
+            const top = viewport.offsetTop;
+            const bottom = top + viewport.height;
+            if (lifted?.top !== top || lifted.bottom !== bottom || lifted.height !== viewport.height) {
+                lifted = { top, bottom, height: viewport.height };
+            }
+        };
+        untrack(() => {
+            lifted = null;
+            sync();
+        });
+        viewport.addEventListener('resize', sync);
+        viewport.addEventListener('scroll', sync);
+        return () => {
+            viewport.removeEventListener('resize', sync);
+            viewport.removeEventListener('scroll', sync);
+        };
+    });
+    $effect(() => {
+        const scroller = lifted && body();
+        if (!scroller)
+            return;
+        const field = document.activeElement;
+        if (!(field instanceof HTMLElement) || !scroller.contains(field) || field === scroller)
+            return;
+        const view = scroller.getBoundingClientRect();
+        const box = field.getBoundingClientRect();
+        const above = view.top - (box.top - REVEAL_MARGIN);
+        const below = box.bottom + REVEAL_MARGIN - view.bottom;
+        if (above > 0)
+            scroller.scrollTop -= above;
+        else if (below > 0)
+            scroller.scrollTop += Math.min(below, -above);
+    });
+    return {
+        get current() {
+            return lifted;
+        }
+    };
+}