@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/text/path/TextPath.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+import { styleHref } from "../../backgrounds/hosts/CssHost.js";
+import { LAYER_ORDER } from "../../backgrounds/runtime/rootCss.js";
+import { motionOnly } from "../../transitions/progress.js";
+import { reducedMotion, watchOnScreen } from "../runtime/onScreen.js";
+import { coverProgress } from "../runtime/scrub.js";
+const CIRCLE = "M 50 50 m -38 0 a 38 38 0 1 1 76 0 a 38 38 0 1 1 -76 0";
+const CIRCUMFERENCE = 2 * Math.PI * 38;
+const WAVE = "M 0 80 C 80 20, 170 20, 250 70 S 420 120, 500 60";
+const H = "[data-sx-path]";
+const BASE_CSS = `${LAYER_ORDER}
+@layer components {
+  :where(${H}) { position: relative; display: inline-block; line-height: 0; }
+  :where(${H} > svg) { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
+  :where(${H} text) { fill: currentColor; font: inherit; font-size: var(--sx-path-size); }
+  :where(${H} [data-sx-text-read]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}`;
+const MOTION_CSS = `@layer components {
+  @keyframes sx-path-spin { to { rotate: 360deg; } }
+  :where(${H}[data-sx-path-spin] > svg) { animation: sx-path-spin var(--sx-path-turn) linear infinite; }
+  :where(${H}[data-sx-live]:not([data-sx-on]) > svg) { animation-play-state: paused; }
+}`;
+/**
+ * Text along a curve: a spinning circular badge, a wave, or your own path.
+ *
+ * ```tsx
+ * <TextPath spin className="w-32">Scroll down · Scroll down · </TextPath>
+ * <TextPath shape="wave" loop>Fresh every day · Fresh every day · </TextPath>
+ * ```
+ *
+ * The text is in the HTML (screen readers read it once, plain); the drawing is hidden from them. Spinning and looping
+ * run only on screen and stop under reduced motion; without scripts the text sits from the path's start. Looping and
+ * scrolling draw the text twice, so give it enough to fill the path. Its size follows the box (`className="w-32"`).
+ */
+export function TextPath({ children, shape = "circle", d, viewBox, spin, loop, scroll = false, size, fit = shape === "circle", as: Tag = "span", className, style, }) {
+    const ref = useRef(null);
+    const uid = `sx${useId().replace(/[^\w-]/g, "")}`;
+    const circle = shape === "circle";
+    const path = circle ? CIRCLE : shape === "wave" ? WAVE : (d ?? WAVE);
+    const box = circle ? "0 0 100 100" : (viewBox ?? "0 0 500 120");
+    const turn = spin === true ? 20 : typeof spin === "number" ? spin : 0;
+    const period = loop === true ? 12 : typeof loop === "number" ? loop : 0;
+    const moves = !circle && (period > 0 || scroll);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        el.setAttribute("data-sx-live", "");
+        const mark = (on) => {
+            if (on)
+                el.setAttribute("data-sx-on", "");
+            else
+                el.removeAttribute("data-sx-on");
+        };
+        const tp = el.querySelector("textPath");
+        if (!moves || !tp || reducedMotion())
+            return watchOnScreen(el, mark);
+        // the text is there twice: shifting it back by one copy's length lands on the same picture, so the loop has no seam
+        let frame = 0;
+        let visible = false;
+        let last = 0;
+        let t = 0;
+        // measured once, when it first moves: a read every frame would force a layout each time
+        let length = 0;
+        const copy = () => (length || (length = tp.getComputedTextLength() / 2));
+        const write = (p) => tp.setAttribute("startOffset", String(Math.round(-p * copy() * 10) / 10));
+        const tick = (now) => {
+            frame = 0;
+            if (!visible)
+                return;
+            if (period > 0) {
+                t = (t + Math.min(0.1, (now - last) / 1000) / period) % 1;
+                last = now;
+                write(t);
+                frame = requestAnimationFrame(tick);
+            }
+            else {
+                const r = el.getBoundingClientRect();
+                write(coverProgress(r.top, r.height, window.innerHeight));
+            }
+        };
+        const run = () => {
+            if (!frame && visible) {
+                last = performance.now();
+                frame = requestAnimationFrame(tick);
+            }
+        };
+        const stop = watchOnScreen(el, (on) => {
+            mark(on);
+            visible = on;
+            run();
+        });
+        if (scroll && period === 0)
+            window.addEventListener("scroll", run, { passive: true, capture: true });
+        return () => {
+            stop();
+            cancelAnimationFrame(frame);
+            window.removeEventListener("scroll", run, { capture: true });
+        };
+    }, [moves, period, scroll]);
+    const vars = {
+        "--sx-path-size": size ?? (circle ? 11 : 28), ...(turn > 0 ? { "--sx-path-turn": `${turn}s` } : {}),
+        ...style,
+    };
+    const motion = motionOnly(MOTION_CSS);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { href: styleHref("path-base", BASE_CSS), precedence: "sx", children: BASE_CSS }), _jsx("style", { href: styleHref("path-motion", motion), precedence: "sx", children: motion }), _jsxs(Tag, { ref: ref, "data-sx-path": shape, "data-sx-path-spin": circle && turn > 0 ? "" : undefined, className: className, style: vars, children: [_jsx("span", { "data-sx-text-read": "", children: children }), _jsxs("svg", { viewBox: box, "aria-hidden": true, focusable: "false", children: [_jsx("path", { id: `${uid}-path`, d: path, fill: "none" }), _jsx("text", { ...(fit && circle ? { textLength: CIRCUMFERENCE, lengthAdjust: "spacing" } : {}), children: _jsxs("textPath", { href: `#${uid}-path`, children: [children, moves ? ` ${children}` : null] }) })] })] })] }));
+}

package/dist/text/registry.d.ts

@@ -0,0 +1,4 @@
+import type { TextMeta } from "./types.js";
+export declare const TEXT_EFFECTS: readonly TextMeta[];
+export declare const TEXT_IDS: ReadonlySet<string>;
+export declare function textMetaOf(id: string): TextMeta;

package/dist/text/registry.js

@@ -0,0 +1,87 @@
+// ---------------------------------------------------------------------------
+// Every text effect's metadata, from the Text Effects Atlas. The docs and the
+// schemas read it. Factories live in the barrel; this file imports none of them.
+// Keep it in step with test/fixtures/text-atlas.mjs.
+// ---------------------------------------------------------------------------
+function row(id, label, group, fires, tech, description, extra = {}) {
+    const touch = !extra.desktop && fires.some((f) => f !== "hover");
+    return { id, label, group, fires, tech, tier: extra.tier ?? "all", touch, description };
+}
+export const TEXT_EFFECTS = [
+    row("enterRise", "Fade-up", "split", ["enter"], "css", "Each piece fades in as it rises into place, one after another."),
+    row("enterWords", "Word-by-word fade", "split", ["enter"], "css", "Words fade in one after another, without moving."),
+    row("enterMask", "Masked line reveal", "split", ["enter"], "css", "Each line slides up from behind an invisible edge."),
+    row("enterBlur", "Blur-in", "split", ["enter"], "css", "Pieces come into focus from a blur."),
+    row("enterBounce", "Pull-up bounce", "split", ["enter"], "css", "Letters pull up past their place and settle back."),
+    row("enterFlip", "3D flip-in", "split", ["enter"], "css", "Letters turn into place in 3D, or unfold like paper."),
+    row("enterPop", "Pop", "split", ["enter"], "css", "Letters pop up from nothing with a springy overshoot."),
+    row("enterRandom", "Random order", "split", ["enter"], "css", "Letters fade in out of order, in a shuffle that stays the same."),
+    row("enterBox", "Box reveal", "split", ["enter"], "css", "A block of colour wipes across and away, leaving the text behind it."),
+    row("enterTracking", "Tracking reveal", "split", ["enter"], "css", "Letters start spaced wide apart and close in as the text fades in."),
+    row("enterAssemble", "Assemble", "split", ["enter"], "css", "Letters fly in from scattered places and come together."),
+    row("enterStamp", "Stamp", "split", ["enter"], "css", "Each word slams down from large and shakes as it lands."),
+    row("enterRedact", "Redact", "split", ["enter"], "css", "Black bars over each word slide off one after another."),
+    row("enterSkeleton", "Skeleton to text", "split", ["enter"], "css", "Placeholder bars pulse, then fade away to show the words."),
+    row("decodeHover", "Scramble on hover", "scramble", ["hover"], "js", "Letters scramble and settle back on hover and keyboard focus.", { desktop: true }),
+    row("decodeReveal", "Decrypt reveal", "scramble", ["enter", "hover"], "js", "The text shows scrambled, then decodes as it enters; it can replay on hover."),
+    row("decodeBinary", "Binary decode", "scramble", ["enter"], "js", "The text decodes out of 0s and 1s as it enters."),
+    row("scrubHighlight", "Word highlight on scroll", "scroll", ["scroll"], "css", "Grey words turn dark one by one as you scroll."),
+    row("scrubParallax", "Line parallax", "scroll", ["scroll"], "css", "Each line moves at its own speed as you scroll."),
+    row("scrubPin", "Giant pinned word", "scroll", ["scroll"], "css", "A huge word shrinks or slides across while its section stays pinned."),
+    row("scrubMarker", "Highlighter marker", "scroll", ["enter"], "css", "A highlighter stroke draws itself under the words as they come into view."),
+    row("scrubFloat", "Scroll float", "scroll", ["scroll"], "css", "Letters rise and settle into place, tied to the scroll."),
+    row("scrubSkew", "Speed skew", "scroll", ["scroll"], "js", "The text leans or stretches with the speed of the scroll."),
+    row("scrubCylinder", "Cylinder", "scroll", ["scroll"], "css", "The lines sit round a drum that turns as you scroll."),
+    row("inkShiny", "Shiny text", "fill", ["loop"], "css", "A band of light sweeps across the text, again and again."),
+    row("inkGradient", "Animated gradient", "fill", ["loop"], "css", "A gradient fills the letters, its colours flowing slowly along."),
+    row("inkAurora", "Aurora", "fill", ["loop"], "css", "Soft coloured lights drift inside the letters."),
+    row("inkVideo", "Video inside text", "fill", ["loop"], "css", "A video plays inside the letters (one line)."),
+    row("inkImage", "Image-filled text", "fill", ["enter"], "css", "A picture shows through the letters, still or panning slowly."),
+    row("inkSparkles", "Sparkles", "fill", ["loop"], "css", "Little stars twinkle around the word."),
+    row("inkLineShadow", "Line shadow", "fill", ["loop"], "css", "A striped shadow sits behind the text, its stripes sliding."),
+    row("inkNeon", "Neon glow", "fill", ["loop"], "css", "The text glows like a neon tube and flickers now and then."),
+    row("inkColourful", "Colourful letters", "fill", ["loop"], "css", "Every letter a different colour, changing in a wave along the word."),
+    row("inkLines", "Canvas lines", "fill", ["loop"], "canvas", "Coloured curved lines sway inside the letters."),
+    row("inkGrain", "Grainy gradient", "fill", ["enter"], "svg", "A gradient with a film-grain texture inside the letters."),
+    row("inkSweep", "Colour sweep", "fill", ["enter"], "css", "A band of colour passes over the text once as it enters."),
+    row("inkFoil", "Foil / chrome", "fill", ["hover"], "css", "Metallic or holographic foil whose sheen follows the mouse."),
+    row("inkProgress", "Progress fill", "fill", ["value"], "css", "The letters fill with colour as a value goes from 0 to 1."),
+    row("inkDots", "Dot-matrix", "fill", ["enter"], "css", "The letters are made of dots, like an LED sign."),
+    row("strokeFill", "Outline to fill", "stroke", ["hover"], "css", "Outlined letters fill with colour from the reading start on hover."),
+    row("strokeHandwrite", "Handwriting", "stroke", ["enter"], "svg", "Handwritten words write themselves, stroke by stroke."),
+    row("strokeDraw", "Draw then fill", "stroke", ["enter"], "svg", "The letters' outlines draw themselves, then fill in."),
+    row("strokeGradient", "Hover gradient outline", "stroke", ["hover"], "css", "The outline lights up in colour around the mouse."),
+    row("strokeComic", "Comic text", "stroke", ["enter"], "css", "A thick outline, a hard offset shadow, and a springy pop."),
+    row("strokeUnderline", "Link underlines", "stroke", ["hover"], "css", "Underlines that slide, grow, wave in or draw themselves on hover."),
+    row("strokeNote", "Hand-drawn notes", "stroke", ["enter"], "svg", "A hand-drawn circle, box, underline or strike draws itself round the text."),
+    row("pointerProximity", "Variable proximity", "hover", ["hover"], "js", "Letters near the mouse grow bolder, wider or larger, or lean towards it.", { desktop: true }),
+    row("pointerPressure", "Text pressure", "hover", ["hover"], "js", "Letters swell heavier and wider where the mouse presses along the line.", { desktop: true }),
+    row("pointerJello", "Jello letters", "hover", ["hover"], "js", "Each letter the mouse touches wobbles like jelly.", { desktop: true }),
+    row("pointerWave", "Letter wave on hover", "hover", ["hover"], "css", "A wave runs through the letters on hover or keyboard focus.", { desktop: true }),
+    row("pointerSpotlight", "Spotlight / X-ray reveal", "hover", ["hover"], "css", "The text sits dim; a circle of light round the mouse shows it bright.", { desktop: true }),
+    row("pointerShadow", "Cursor-following shadow", "hover", ["hover"], "css", "A soft shadow falls away from the mouse, as if it were the light.", { desktop: true }),
+    row("pointerTrail", "Cursor text trail", "hover", ["hover"], "js", "Little marks trail behind the mouse over the text and fade.", { desktop: true }),
+    row("pointerRipple", "Ripple from the pointer", "hover", ["hover", "tap"], "js", "A wave runs out through the letters from a tap, a click, or where the mouse comes in."),
+    row("pointerTilt", "Tilt to cursor", "hover", ["hover"], "css", "The text leans towards the mouse in 3D.", { desktop: true }),
+    row("pointerRoll", "Letter roll on hover", "hover", ["hover"], "css", "Each letter rolls up and a copy rolls in after it, one after another.", { desktop: true }),
+    row("warpGlitch", "CSS glitch", "glitch", ["loop", "hover"], "css", "Coloured slices of the text jump and shift for a moment, every few seconds or on hover."),
+    row("warpSquiggle", "Squiggly text", "glitch", ["loop"], "svg", "The letters' outlines wobble without end, like a hand-drawn animation.", { tier: "mid" }),
+    row("warpWave", "Wavy letters", "glitch", ["loop"], "css", "The letters bob, hop, sway or breathe without end, each a step behind the last."),
+    row("warpGoo", "Liquid / gooey text", "glitch", ["enter", "hover"], "svg", "Letters pop in and run together like liquid as they land, and melt again on hover.", { tier: "mid" }),
+    row("warpRgb", "Chromatic RGB split", "glitch", ["hover"], "css", "On hover the text splits into coloured fringes, like a misaligned screen.", { desktop: true }),
+    row("warpShader", "WebGL text distortion", "glitch", ["hover", "scroll"], "webgl", "The letters ripple out from under the mouse and bend with the scroll's speed.", { tier: "high" }),
+    row("warpFuzz", "Fuzzy text", "glitch", ["loop", "hover"], "canvas", "Rows of the text jitter sideways like a bad TV picture, harder under the mouse.", { tier: "mid" }),
+    row("warpAscii", "ASCII text", "glitch", ["loop"], "canvas", "The text redrawn as ASCII characters, denser where the letters are, a few flickering.", { tier: "high" }),
+    row("solidShadow", "Long shadow / extruded 3D", "depth", ["enter"], "css", "A long or extruded 3D shadow behind the letters, which grows out of them as the text enters."),
+    row("solidLayers", "Layered 3D text", "depth", ["hover"], "css", "Coloured copies stacked behind the text like layered print; they fan out on hover.", { desktop: true }),
+    row("solidParticles", "Particle text", "depth", ["enter", "hover"], "canvas", "The text made of dots that fly together as it enters and scatter from the mouse.", { tier: "mid" }),
+    row("solidEcho", "Echo", "depth", ["enter", "loop"], "css", "Faint copies trail behind the text and fan out, once or breathing without end."),
+    row("solidFall", "Falling text (gravity)", "split", ["enter", "hover"], "js", "The letters fall with gravity, pile up at the bottom and tip over.", { tier: "mid" }),
+];
+export const TEXT_IDS = new Set(TEXT_EFFECTS.map((m) => m.id));
+export function textMetaOf(id) {
+    const meta = TEXT_EFFECTS.find((m) => m.id === id);
+    if (!meta)
+        throw new Error(`[@sharedex/ui] unknown text effect "${id}"`);
+    return meta;
+}

package/dist/text/runtime/attachPointer.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Writes `--sx-text-x` / `-y` (px from the text's top left) and `--sx-text-px` / `-py` (0 to 1) on `el`. Physical on purpose:
+ * the pointer is where it is, so these never mirror in a right-to-left page. Returns what stops it. No `pointermove`
+ * listener exists until the pointer is over the text.
+ */
+export declare function attachPointer(el: HTMLElement): () => void;

package/dist/text/runtime/attachPointer.js

@@ -0,0 +1,48 @@
+// Follows the pointer over one text and writes where it is, at most once per frame. Attached only for an effect that
+// reads the pointer, and only where there is a mouse.
+const round = (n) => Math.round(n * 1000) / 1000;
+/**
+ * Writes `--sx-text-x` / `-y` (px from the text's top left) and `--sx-text-px` / `-py` (0 to 1) on `el`. Physical on purpose:
+ * the pointer is where it is, so these never mirror in a right-to-left page. Returns what stops it. No `pointermove`
+ * listener exists until the pointer is over the text.
+ */
+export function attachPointer(el) {
+    let rect;
+    let frame = 0;
+    let last;
+    const write = () => {
+        frame = 0;
+        if (!last || !rect)
+            return;
+        const x = last.clientX - rect.left;
+        const y = last.clientY - rect.top;
+        el.style.setProperty("--sx-text-x", `${round(x)}px`);
+        el.style.setProperty("--sx-text-y", `${round(y)}px`);
+        el.style.setProperty("--sx-text-px", String(rect.width > 0 ? round(x / rect.width) : 0.5));
+        el.style.setProperty("--sx-text-py", String(rect.height > 0 ? round(y / rect.height) : 0.5));
+    };
+    const onMove = (e) => {
+        last = e;
+        if (!frame)
+            frame = requestAnimationFrame(write);
+    };
+    // measured on the box the text fills (the frame, or the show), not the element: a block heading is wider than its text
+    const box = () => el.querySelector("[data-sx-text-frame]") ?? el.querySelector("[data-sx-text-show]") ?? el;
+    const onEnter = (e) => {
+        rect = box().getBoundingClientRect();
+        last = e;
+        write();
+        el.addEventListener("pointermove", onMove, { passive: true });
+    };
+    const onLeave = () => {
+        el.removeEventListener("pointermove", onMove);
+        cancelAnimationFrame(frame);
+        frame = 0;
+    };
+    el.addEventListener("pointerenter", onEnter);
+    el.addEventListener("pointerleave", onLeave);
+    return () => {
+        onLeave();
+        el.removeEventListener("pointerenter", onEnter);
+    };
+}

package/dist/text/runtime/canvasText.d.ts

@@ -0,0 +1,45 @@
+export interface Word {
+    readonly text: string;
+    /** Where it starts in the layer (its right edge in a right-to-left text), and its line box. */
+    readonly x: number;
+    readonly y: number;
+    readonly h: number;
+}
+/** Each word's box in the layer, from the page's own layout: a canvas lays out nothing itself. */
+export declare function wordsIn(show: HTMLElement, box: DOMRect, rtl: boolean): Word[];
+/** The text as the page shows it, in the layer's coordinates. */
+export interface Snapshot {
+    /** The layer's size in CSS px, and the canvas's pixels per px. */
+    readonly w: number;
+    readonly h: number;
+    readonly dpr: number;
+    readonly font: string;
+    /** The text's font size, in px. */
+    readonly size: number;
+    readonly rtl: boolean;
+    readonly words: readonly Word[];
+    /** The text's colour, [r, g, b] 0-255 and alpha 0-1. */
+    readonly color: readonly [number, number, number, number];
+}
+export declare function snapshot(layer: HTMLElement, show: HTMLElement, resolve: (css: string) => readonly number[]): Snapshot;
+export declare const rgba: ([r, g, b, a]: readonly number[]) => string;
+/** Sizes `target` to the snapshot in device pixels and draws the words on it in `fill`. Returns its context (px units). */
+export declare function drawWords(target: HTMLCanvasElement, snap: Snapshot, fill: string): CanvasRenderingContext2D | null;
+export interface LoopHooks {
+    /** The layout changed (first run, a resize, the fonts arrived): measure again. */
+    measure(): void;
+    /** Draw at `t` seconds, `dt` since the last frame. Return `true` to be called again next frame. */
+    frame(t: number, dt: number): boolean;
+}
+export interface Loop {
+    /** Something changed (the pointer): draw again, and keep going while `frame` asks to. */
+    wake(): void;
+    stop(): void;
+    /** The reader asked for reduced motion: draw once and hold still. */
+    readonly still: () => boolean;
+}
+/**
+ * Runs `hooks` on `layer` (the effect's layer inside `el`): measures, then draws frames while the text is on screen and
+ * `frame` asks for more. Under reduced motion it draws one frame and holds. Returns what wakes and stops it.
+ */
+export declare function attachLoop(el: HTMLElement, layer: HTMLElement, hooks: LoopHooks): Loop;

package/dist/text/runtime/canvasText.js

@@ -0,0 +1,108 @@
+// What the canvas and WebGL text effects share: the words where the page laid them out, drawn onto a canvas, and a frame
+// loop that runs only while the text is on screen. Imported only by those effects' programs, never by Text.
+/** Each word's box in the layer, from the page's own layout: a canvas lays out nothing itself. */
+export function wordsIn(show, box, rtl) {
+    const out = [];
+    const walker = document.createTreeWalker(show, NodeFilter.SHOW_TEXT);
+    const range = document.createRange();
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        const value = node.nodeValue ?? "";
+        for (const m of value.matchAll(/\S+/gu)) {
+            range.setStart(node, m.index);
+            range.setEnd(node, m.index + m[0].length);
+            const r = range.getClientRects()[0];
+            if (r)
+                out.push({ text: m[0], x: (rtl ? r.right : r.left) - box.left, y: r.top - box.top, h: r.height });
+        }
+    }
+    return out;
+}
+export function snapshot(layer, show, resolve) {
+    const box = layer.getBoundingClientRect();
+    const style = getComputedStyle(show);
+    const rtl = style.direction === "rtl";
+    const [r = 0, g = 0, b = 0, a = 1] = resolve(style.color);
+    return {
+        w: box.width,
+        h: box.height,
+        dpr: Math.min(2, window.devicePixelRatio || 1),
+        font: `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`,
+        size: parseFloat(style.fontSize) || 16,
+        rtl,
+        words: wordsIn(show, box, rtl),
+        color: [r, g, b, a],
+    };
+}
+export const rgba = ([r, g, b, a]) => `rgba(${r}, ${g}, ${b}, ${a})`;
+/** Sizes `target` to the snapshot in device pixels and draws the words on it in `fill`. Returns its context (px units). */
+export function drawWords(target, snap, fill) {
+    target.width = Math.max(1, Math.round(snap.w * snap.dpr));
+    target.height = Math.max(1, Math.round(snap.h * snap.dpr));
+    const c = target.getContext("2d");
+    if (!c)
+        return null;
+    c.setTransform(snap.dpr, 0, 0, snap.dpr, 0, 0);
+    c.font = snap.font;
+    c.direction = snap.rtl ? "rtl" : "ltr";
+    c.textAlign = snap.rtl ? "right" : "left";
+    c.textBaseline = "alphabetic";
+    c.fillStyle = fill;
+    for (const word of snap.words) {
+        const m = c.measureText(word.text);
+        const ascent = m.fontBoundingBoxAscent;
+        c.fillText(word.text, word.x, word.y + (word.h - (ascent + m.fontBoundingBoxDescent)) / 2 + ascent);
+    }
+    return c;
+}
+/**
+ * Runs `hooks` on `layer` (the effect's layer inside `el`): measures, then draws frames while the text is on screen and
+ * `frame` asks for more. Under reduced motion it draws one frame and holds. Returns what wakes and stops it.
+ */
+export function attachLoop(el, layer, hooks) {
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
+    let frame = 0;
+    let on = false;
+    let last = 0;
+    const start = performance.now();
+    const tick = (now) => {
+        frame = 0;
+        const dt = last === 0 ? 0 : Math.min(0.1, (now - last) / 1000);
+        last = now;
+        const more = hooks.frame(reduced.matches ? 0 : (now - start) / 1000, reduced.matches ? 0 : dt);
+        if (more && on && !reduced.matches)
+            frame = requestAnimationFrame(tick);
+        else
+            last = 0;
+    };
+    const wake = () => {
+        if (!frame)
+            frame = requestAnimationFrame(tick);
+    };
+    const io = new IntersectionObserver(([entry]) => {
+        on = !!entry?.isIntersecting;
+        if (on)
+            wake();
+    });
+    const again = () => {
+        hooks.measure();
+        wake();
+    };
+    const ro = new ResizeObserver(again);
+    hooks.measure();
+    io.observe(el);
+    ro.observe(layer);
+    reduced.addEventListener("change", wake);
+    let gone = false;
+    void document.fonts?.ready.then(() => !gone && again());
+    return {
+        wake,
+        still: () => reduced.matches,
+        stop: () => {
+            gone = true;
+            cancelAnimationFrame(frame);
+            io.disconnect();
+            ro.disconnect();
+            reduced.removeEventListener("change", wake);
+        },
+    };
+}

package/dist/text/runtime/fit.d.ts

@@ -0,0 +1,8 @@
+/** `d` with every x scaled by `sx` and every y by `sy`. Only for paths made of absolute x, y pairs (M, L, C, Q, S, T). Pure. */
+export declare function fitPath(d: string, sx: number, sy: number): string;
+/**
+ * Every `path[data-sx-text-fit]` inside `root` (its unscaled `d`, drawn in a 100 x 100 box) redrawn in its SVG's own
+ * size; `data-sx-text-fitted` on `root` then turns the stretching off. Straight onto the DOM: React never changes these
+ * props after the first render, so it never undoes them.
+ */
+export declare function fitDrawings(root: HTMLElement): void;

package/dist/text/runtime/fit.js

@@ -0,0 +1,32 @@
+// Drawings round a text (a hand-drawn circle, a drawn underline) sized to the text in px, so the line keeps its width
+// without stretching. Chromium mis-draws a dash on a stretched path with `vector-effect: non-scaling-stroke` (only part
+// of the line showed, even at rest), and a stretched path without it gets lines thicker on the sides.
+/** `d` with every x scaled by `sx` and every y by `sy`. Only for paths made of absolute x, y pairs (M, L, C, Q, S, T). Pure. */
+export function fitPath(d, sx, sy) {
+    let i = 0;
+    return d.replace(/-?\d+(?:\.\d+)?/g, (n) => {
+        const scaled = Number(n) * (i++ % 2 === 0 ? sx : sy);
+        return String(Math.round(scaled * 10) / 10);
+    });
+}
+/**
+ * Every `path[data-sx-text-fit]` inside `root` (its unscaled `d`, drawn in a 100 x 100 box) redrawn in its SVG's own
+ * size; `data-sx-text-fitted` on `root` then turns the stretching off. Straight onto the DOM: React never changes these
+ * props after the first render, so it never undoes them.
+ */
+export function fitDrawings(root) {
+    let any = false;
+    for (const path of root.querySelectorAll("path[data-sx-text-fit]")) {
+        const svg = path.ownerSVGElement;
+        if (!svg)
+            continue;
+        const { width, height } = svg.getBoundingClientRect();
+        if (width === 0 || height === 0)
+            continue;
+        svg.setAttribute("viewBox", `0 0 ${Math.round(width)} ${Math.round(height)}`);
+        path.setAttribute("d", fitPath(path.getAttribute("data-sx-text-fit") ?? "", width / 100, height / 100));
+        any = true;
+    }
+    if (any)
+        root.setAttribute("data-sx-text-fitted", "");
+}

package/dist/text/runtime/loops.d.ts

@@ -0,0 +1,8 @@
+type Listener = (paused: boolean) => void;
+/** Whether the page's text loops are paused. */
+export declare function loopsPaused(): boolean;
+/** Pause (`true`) or resume (`false`) every `WordCycle` and `Typewriter` on the page. */
+export declare function setLoopsPaused(next: boolean): void;
+/** Calls `cb` whenever the switch changes. Returns what stops it. */
+export declare function onLoopsPaused(cb: Listener): () => void;
+export {};

package/dist/text/runtime/loops.js

@@ -0,0 +1,27 @@
+// One page-wide switch that pauses the text that keeps moving on its own (`WordCycle`, `Typewriter`).
+//
+// WCAG 2.2.2 (Pause, Stop, Hide): motion that starts by itself and runs past 5 s needs a way to pause it. One control
+// for the whole page is enough, and a headless library should not put a button inside a heading, so the library holds
+// the switch and the site places the button (`usePauseLoops`). While paused, `<html>` carries
+// `data-sx-loops-paused`, which CSS-only loops read. Plain module: safe to import on the server (it does nothing there).
+let paused = false;
+const listeners = new Set();
+/** Whether the page's text loops are paused. */
+export function loopsPaused() {
+    return paused;
+}
+/** Pause (`true`) or resume (`false`) every `WordCycle` and `Typewriter` on the page. */
+export function setLoopsPaused(next) {
+    if (next === paused)
+        return;
+    paused = next;
+    if (typeof document !== "undefined")
+        document.documentElement.toggleAttribute("data-sx-loops-paused", next);
+    for (const cb of listeners)
+        cb(next);
+}
+/** Calls `cb` whenever the switch changes. Returns what stops it. */
+export function onLoopsPaused(cb) {
+    listeners.add(cb);
+    return () => listeners.delete(cb);
+}

package/dist/text/runtime/onScreen.d.ts

@@ -0,0 +1,6 @@
+/** Calls `cb(true)` when `el` comes on screen and `cb(false)` when it leaves. Returns what stops it. */
+export declare function watchOnScreen(el: Element, cb: (on: boolean) => void, threshold?: number): () => void;
+/** The visitor asked for less motion. */
+export declare const reducedMotion: () => boolean;
+/** CSS that keeps `target` hidden while the component waits for its script (`:not([live])`), with a fail-safe. */
+export declare function holdUntilLive(host: string, target: string, name: string): string;

package/dist/text/runtime/onScreen.js

@@ -0,0 +1,20 @@
+// Small browser helpers the text components share.
+/** Calls `cb(true)` when `el` comes on screen and `cb(false)` when it leaves. Returns what stops it. */
+export function watchOnScreen(el, cb, threshold = 0) {
+    if (typeof IntersectionObserver === "undefined") {
+        cb(true);
+        return () => { };
+    }
+    const io = new IntersectionObserver(([entry]) => cb(!!entry?.isIntersecting), { threshold });
+    io.observe(el);
+    return () => io.disconnect();
+}
+/** The visitor asked for less motion. */
+export const reducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+/** CSS that keeps `target` hidden while the component waits for its script (`:not([live])`), with a fail-safe. */
+export function holdUntilLive(host, target, name) {
+    return `  @keyframes ${name} { from, to { opacity: 0; } }
+  @media (scripting: enabled) {
+    :where(${host}:not([data-sx-live]) ${target}) { animation: ${name} 3s step-end; }
+  }`;
+}

package/dist/text/runtime/paint.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Writes `--sx-tw` / `--sx-th` (the whole text's size) on the show and `--sx-tx` / `--sx-ty` (each paint span's place in
+ * it) on the paint spans inside pieces, in px. Straight onto the DOM: React never renders these, so it never undoes them.
+ */
+export declare function measurePaint(show: HTMLElement): void;

package/dist/text/runtime/paint.js

@@ -0,0 +1,25 @@
+// Where each paint span sits in the whole text, so one fill runs across pieces that move on their own.
+/** An element's layout position on the page: offsets, which leave out every transform (pieces may be mid-entrance). */
+function layoutAt(el) {
+    let x = 0;
+    let y = 0;
+    for (let at = el; at; at = at.offsetParent) {
+        x += at.offsetLeft;
+        y += at.offsetTop;
+    }
+    return [x, y];
+}
+/**
+ * Writes `--sx-tw` / `--sx-th` (the whole text's size) on the show and `--sx-tx` / `--sx-ty` (each paint span's place in
+ * it) on the paint spans inside pieces, in px. Straight onto the DOM: React never renders these, so it never undoes them.
+ */
+export function measurePaint(show) {
+    const [sx, sy] = layoutAt(show);
+    show.style.setProperty("--sx-tw", `${show.offsetWidth}px`);
+    show.style.setProperty("--sx-th", `${show.offsetHeight}px`);
+    for (const span of show.querySelectorAll("[data-sx-text-paint]")) {
+        const [x, y] = layoutAt(span);
+        span.style.setProperty("--sx-tx", `${x - sx}px`);
+        span.style.setProperty("--sx-ty", `${y - sy}px`);
+    }
+}

package/dist/text/runtime/scrub.d.ts

@@ -0,0 +1,8 @@
+/** The cover progress of a box at `top`, `height` high, in a screen `viewport` high. Pure; tested. */
+export declare const coverProgress: (top: number, height: number, viewport: number) => number;
+/** The contain progress: through the part of the scroll where the box covers the screen. Pure; tested. */
+export declare function containProgress(top: number, height: number, viewport: number): number;
+/** Starts the fallback on the text when it needs one. Returns what stops it. */
+export declare function attachScrub(el: HTMLElement): () => void;
+/** Hands the fallback to Text. Every scroll effect's factory calls it, so the code comes with the effects. */
+export declare function provideScrub(): void;