@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/text/base.js

@@ -0,0 +1,86 @@
+// The structural sheet every Text ships: the pieces' boxes, the readable copy, the direction. Positioning only, no
+// colours: the text keeps the element's own look. Pure string, so it works without theme.css. See ./CLAUDE.md.
+import { LAYER_ORDER } from "../backgrounds/runtime/rootCss.js";
+// The readable copy is absolutely positioned. With no positioned parent it escaped a table's scroll box and widened the
+// docs page by 212px on a phone, so the text element holds it.
+export const TEXT_BASE_CSS = `${LAYER_ORDER}
+@layer components {
+  :where([data-sx-text]) {
+    --sx-text-dir: 1;
+    position: relative;
+  }
+  :where([data-sx-text]:dir(rtl)) {
+    --sx-text-dir: -1;
+  }
+  :where([data-sx-text-read]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  :where([data-sx-text-frame]) {
+    position: relative;
+    display: inline-block;
+    max-inline-size: 100%;
+    isolation: isolate;
+  }
+  :where([data-sx-text-show] > [data-sx-text-paint]) {
+    display: inline-block;
+    max-inline-size: 100%;
+  }
+  :where([data-sx-text-show]) {
+    display: inline-block;
+    max-inline-size: 100%;
+  }
+  :where([data-sx-text-line]) {
+    display: block;
+  }
+  :where([data-sx-text-word], [data-sx-text-char]) {
+    display: inline-block;
+  }
+  :where([data-sx-text-word]) {
+    white-space: nowrap;
+  }
+  :where([data-sx-text-char]) {
+    white-space: pre;
+  }
+  :where([data-sx-text-cover], [data-sx-text-layer]) {
+    display: none;
+    pointer-events: none;
+  }
+  :where([data-sx-text-layer]) {
+    position: absolute;
+    inset: 0;
+  }
+  :where([data-sx-text-layer][data-sx-text-slot="under"]) {
+    z-index: -1;
+  }
+  :where([data-sx-text-layer] > :is(svg, video, canvas)) {
+    position: absolute;
+    inset: 0;
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  :where([data-sx-text-layer] > svg) {
+    overflow: visible;
+  }
+  :where([data-sx-text-fitted] path[data-sx-text-fit]) {
+    vector-effect: none;
+  }
+  :where([data-sx-text-layer] > video) {
+    object-fit: cover;
+  }
+  :where([data-sx-text-layer] svg text) {
+    font: inherit;
+    letter-spacing: inherit;
+  }
+  @supports (animation-timeline: view()) {
+    :where([data-sx-text-scroll]:not([data-sx-scroll="js"])) { view-timeline: --sx-text-view block; }
+  }
+  :where([data-sx-text-node]) {
+    position: absolute;
+  }
+}`;

package/dist/text/cycle/WordCycle.d.ts

@@ -0,0 +1,40 @@
+import { type CSSProperties, type ElementType } from "react";
+import { type CycleLook } from "./css.js";
+export interface WordCycleProps {
+    /** The words that take turns. The first shows first, and alone without scripts or under reduced motion. */
+    readonly words: readonly string[];
+    /**
+     * How one word gives way to the next:
+     * - `slide` (default), `flip`, `blur`: the word slides up, turns over, or blurs into the next;
+     * - `box`: in a coloured box that fits each word; `layout`: the sentence around it reflows to each word's width;
+     * - `flap`: letter tiles flip like an airport board; `morph`: the words melt into each other;
+     * - `anagram`: the letters move to their places in the next word; `shuffle`: each letter rolls like a slot machine;
+     * - `strike`: the old word is struck through, the new one writes in;
+     * - `focus`: every word shows, one sharp in a frame, the rest blurred (a sentence, not words in one place).
+     */
+    readonly look?: CycleLook;
+    /** Seconds each word stays. Default `2.5`. */
+    readonly interval?: number;
+    /** Seconds the change takes. Default `0.5`. */
+    readonly duration?: number;
+    /** Where a shorter word sits in the space of the longest: `start` (default), `center`, `end`. */
+    readonly align?: "start" | "center" | "end";
+    /** The box's (`box`) or the frame's (`focus`) colour. Default the theme's accent. */
+    readonly color?: string;
+    /** The element to render. Default `span`. */
+    readonly as?: ElementType;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/**
+ * One word in a sentence that keeps changing: "We build websites / apps / brands".
+ *
+ * ```tsx
+ * <h1>We build <WordCycle words={["websites", "apps", "brands"]} look="flip" /></h1>
+ * ```
+ *
+ * Every word is in the HTML, stacked in one place, so search engines read them all and the space is the longest
+ * word's: nothing around it jumps (except with `layout`, whose point is the reflow). Screen readers read the words once,
+ * not on every change. It moves on only while on screen; under reduced motion the first word stays.
+ */
+export declare function WordCycle({ words, look, interval, duration, align, color, as: Tag, className, style, }: WordCycleProps): import("react").JSX.Element;

package/dist/text/cycle/WordCycle.js

@@ -0,0 +1,179 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { styleHref } from "../../backgrounds/hosts/CssHost.js";
+import { rng } from "../../backgrounds/runtime/rng.js";
+import { motionOnly } from "../../transitions/progress.js";
+import { reducedMotion, watchOnScreen } from "../runtime/onScreen.js";
+import { loopsPaused, onLoopsPaused } from "../runtime/loops.js";
+import { lettersOf, splitWords } from "../split.js";
+import { CYCLE_BASE_CSS, CYCLE_LOOK_CSS } from "./css.js";
+const seconds = (n) => `${Number(n.toFixed(3))}s`;
+/** Random letters a shuffle reel passes through before it lands. */
+const REEL = 6;
+/** How many times the word has changed, every `interval` seconds while on screen and motion is welcome. */
+function useTurn(ref, count, interval) {
+    const [turn, setTurn] = useState(0);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        el.setAttribute("data-sx-live", "");
+        if (count < 2 || reducedMotion())
+            return;
+        let timer = 0;
+        let visible = false;
+        // runs only on screen and while the page's loops aren't paused (setLoopsPaused / usePauseLoops)
+        const sync = () => {
+            window.clearInterval(timer);
+            if (visible && !loopsPaused())
+                timer = window.setInterval(() => !document.hidden && setTurn((t) => t + 1), interval * 1000);
+        };
+        const stop = watchOnScreen(el, (on) => {
+            visible = on;
+            sync();
+        });
+        const stopPause = onLoopsPaused(sync);
+        return () => {
+            stop();
+            stopPause();
+            window.clearInterval(timer);
+        };
+    }, [ref, count, interval]);
+    return turn;
+}
+const stateOf = (i, on, prev) => (i === on ? "on" : i === prev ? "off" : "wait");
+/**
+ * One word in a sentence that keeps changing: "We build websites / apps / brands".
+ *
+ * ```tsx
+ * <h1>We build <WordCycle words={["websites", "apps", "brands"]} look="flip" /></h1>
+ * ```
+ *
+ * Every word is in the HTML, stacked in one place, so search engines read them all and the space is the longest
+ * word's: nothing around it jumps (except with `layout`, whose point is the reflow). Screen readers read the words once,
+ * not on every change. It moves on only while on screen; under reduced motion the first word stays.
+ */
+export function WordCycle({ words, look = "slide", interval = 2.5, duration = 0.5, align = "start", color = "var(--color-sx-accent)", as: Tag = "span", className, style, }) {
+    const ref = useRef(null);
+    // the turn only moves on by one, so the word leaving is known in the same render as the one arriving
+    const turn = useTurn(ref, words.length, interval);
+    const count = Math.max(1, words.length);
+    const on = turn % count;
+    const last = turn > 0 ? (turn - 1) % count : -1;
+    const uid = `sx${useId().replace(/[^\w-]/g, "")}`;
+    // letters of each word (whole words in a joined script), for the looks that move letters
+    const letters = useMemo(() => words.map((w) => splitWords(w).flatMap((p) => (p.space ? [p.text] : lettersOf(p.text)))), [words]);
+    const longest = Math.max(0, ...letters.map((l) => l.length));
+    useMeasure(ref, look, on, words);
+    useAnagram(ref, look, on);
+    const vars = {
+        "--sx-cycle-time": seconds(duration),
+        "--sx-cycle-align": align,
+        "--sx-cycle-color": color,
+        "--sx-cycle-blur": "0.08em",
+        ...(look === "morph" ? { "--sx-cycle-filter": `url(#${uid}-morph)` } : {}),
+        ...style,
+    };
+    const motion = motionOnly(CYCLE_LOOK_CSS[look]);
+    let body;
+    if (look === "focus") {
+        // the words as one sentence; four corners frame the sharp one
+        body = (_jsxs(_Fragment, { children: [words.map((w, i) => (_jsxs("span", { children: [i > 0 ? " " : null, _jsx("span", { "data-sx-cycle-word": "", "data-sx-cycle-state": i === on ? "on" : "wait", children: w })] }, i))), _jsx("span", { "data-sx-cycle-frame": "", children: [0, 1, 2, 3].map((c) => _jsx("span", { "data-c": c }, c)) })] }));
+    }
+    else if (look === "flap") {
+        // one tile per letter of the longest word; each tile holds that letter of every word
+        body = (_jsx("span", { "data-sx-cycle-tiles": "", children: Array.from({ length: longest }, (_, t) => (_jsx("span", { "data-sx-cycle-tile": "", style: { "--sx-i": t }, children: letters.map((l, i) => (_jsx("span", { "data-sx-cycle-state": stateOf(i, on, last), children: l[t] ?? " " }, i))) }, t))) }));
+    }
+    else if (look === "anagram") {
+        // every word sizes the stack; the live word's letters are keyed by letter and its count, so a letter that the next
+        // word shares is the same element, and moves there
+        const seen = new Map();
+        body = (_jsxs(_Fragment, { children: [words.map((w, i) => _jsx("span", { "data-sx-cycle-size": "", children: w }, i)), _jsx("span", { "data-sx-cycle-live": "", children: (letters[on] ?? []).map((l) => {
+                        const n = seen.get(l) ?? 0;
+                        seen.set(l, n + 1);
+                        return _jsx("span", { "data-sx-cycle-letter": "", "data-sx-cycle-key": `${l}-${n}`, children: l }, `${l}-${n}`);
+                    }) })] }));
+    }
+    else {
+        body = (_jsxs(_Fragment, { children: [look === "box" ? _jsx("span", { "data-sx-cycle-box": "" }) : null, words.map((w, i) => (_jsxs("span", { "data-sx-cycle-word": "", "data-sx-cycle-state": stateOf(i, on, last), "data-sx-cycle-i": i, children: [look === "shuffle" ? _jsx(Reel, { letters: letters[i] ?? [], pool: letters.flat(), seed: i + 1 }) : w, look === "strike" ? _jsx("span", { "data-sx-cycle-line": "" }) : null] }, i)))] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("style", { href: styleHref("cycle-base", CYCLE_BASE_CSS), precedence: "sx", children: CYCLE_BASE_CSS }), _jsx("style", { href: styleHref(`cycle-${look}`, motion), precedence: "sx", children: motion }), _jsxs(Tag, { ref: ref, "data-sx-cycle": look, className: className, style: vars, children: [_jsx("span", { "data-sx-text-read": "", children: look === "focus" ? words.join(" ") : words.join(", ") }), look === "morph" ? (_jsx("svg", { "data-sx-cycle-defs": "", "aria-hidden": true, focusable: "false", children: _jsx("filter", { id: `${uid}-morph`, children: _jsx("feColorMatrix", { in: "SourceGraphic", type: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 255 -140" }) }) })) : null, _jsx("span", { "data-sx-cycle-stack": "", "aria-hidden": true, children: body })] })] }));
+}
+/** A slot-machine reel per letter: seeded random letters, then the real one, rolled into place. */
+function Reel({ letters, pool, seed }) {
+    const chars = pool.filter((c) => c.trim());
+    const r = rng(seed);
+    return (_jsx(_Fragment, { children: letters.map((l, i) => l.trim() ? (_jsxs("span", { "data-sx-cycle-reel": "", style: { "--sx-i": i, "--sx-cycle-k": REEL }, children: [_jsx("span", { "data-sx-cycle-letter-size": "", children: l }), _jsxs("span", { "data-sx-cycle-strip": "", children: [Array.from({ length: REEL }, (_, k) => _jsx("span", { children: chars[Math.floor(r() * chars.length)] ?? l }, k)), _jsx("span", { children: l })] })] }, i)) : (l)) }));
+}
+/** The looks that need sizes: the box's share of the widest word, the layout's width, the focus frame's box. */
+function useMeasure(ref, look, on, words) {
+    useLayoutEffect(() => {
+        const el = ref.current;
+        const stack = el?.querySelector("[data-sx-cycle-stack]");
+        if (!el || !stack || (look !== "box" && look !== "layout" && look !== "focus"))
+            return;
+        const measure = () => {
+            const word = stack.querySelector(`[data-sx-cycle-word][data-sx-cycle-state="on"]`);
+            if (!word)
+                return;
+            if (look === "focus") {
+                const box = stack.getBoundingClientRect();
+                const r = word.getBoundingClientRect();
+                const rtl = getComputedStyle(el).direction === "rtl";
+                stack.style.setProperty("--fx", `${rtl ? box.right - r.right : r.left - box.left}px`);
+                stack.style.setProperty("--fy", `${r.top - box.top}px`);
+                stack.style.setProperty("--fw", `${r.width}px`);
+                stack.style.setProperty("--fh", `${r.height}px`);
+                el.setAttribute("data-sx-cycle-measured", "");
+                return;
+            }
+            const widths = [...stack.querySelectorAll("[data-sx-cycle-word]")].map((w) => w.offsetWidth);
+            const widest = Math.max(1, ...widths);
+            if (look === "box")
+                el.style.setProperty("--sx-cycle-w", String(word.offsetWidth / widest));
+            else
+                el.style.setProperty("--sx-cycle-w-px", `${word.offsetWidth}px`);
+        };
+        measure();
+        let gone = false;
+        void document.fonts?.ready.then(() => !gone && measure());
+        const ro = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(measure);
+        ro?.observe(el.parentElement ?? el);
+        return () => {
+            gone = true;
+            ro?.disconnect();
+        };
+    }, [ref, look, on, words]);
+}
+/** Anagram: each letter that stays starts where it was in the last word and moves to its new place (FLIP). */
+function useAnagram(ref, look, on) {
+    const before = useRef(new Map());
+    useLayoutEffect(() => {
+        const live = ref.current?.querySelector("[data-sx-cycle-live]");
+        if (look !== "anagram" || !live)
+            return;
+        const letters = [...live.querySelectorAll("[data-sx-cycle-letter]")];
+        const was = before.current;
+        const now = new Map(letters.map((l) => [l.dataset["sxCycleKey"] ?? "", l.getBoundingClientRect()]));
+        if (was.size > 0 && !reducedMotion()) {
+            for (const l of letters) {
+                const key = l.dataset["sxCycleKey"] ?? "";
+                const from = was.get(key);
+                const to = now.get(key);
+                l.setAttribute("data-sx-cycle-jump", "");
+                if (from && to)
+                    l.style.translate = `${from.left - to.left}px ${from.top - to.top}px`;
+                else
+                    l.setAttribute("data-sx-cycle-new", "");
+            }
+            void live.offsetWidth; // apply the starting places before they move
+            for (const l of letters) {
+                l.removeAttribute("data-sx-cycle-jump");
+                l.removeAttribute("data-sx-cycle-new");
+                l.style.translate = "";
+            }
+        }
+        before.current = now;
+    }, [ref, look, on]);
+}

package/dist/text/cycle/WordCycle.schema.d.ts

@@ -0,0 +1 @@
+export declare const WORD_CYCLE_SCHEMA: import("../../schema/types.js").Schema;

package/dist/text/cycle/WordCycle.schema.js

@@ -0,0 +1,28 @@
+import { defineSchema } from "../../schema/define.js";
+// WordCycle's props as a form (the Hero's `titleCycle`). The words are the page's content, written by the page.
+export const WORD_CYCLE_SCHEMA = defineSchema()({
+    id: "wordCycle",
+    family: "word-cycle",
+    factory: "WordCycle",
+    code: ["words", "as", "className", "style"],
+    fields: {
+        look: {
+            kind: "choice", label: "Look",
+            values: ["slide", "flip", "blur", "box", "layout", "flap", "morph", "anagram", "shuffle", "strike", "focus"],
+            labels: {
+                slide: "Slide up", flip: "Flip over", blur: "Blur", box: "In a coloured box", layout: "Sentence reflows",
+                flap: "Airport board", morph: "Melt", anagram: "Letters rearrange", shuffle: "Slot machine", strike: "Strike and rewrite",
+                focus: "Focus frame (all words show)",
+            },
+            default: "slide",
+        },
+        interval: { kind: "number", label: "Each word stays", min: 1, max: 8, step: 0.5, unit: "s", default: 2.5 },
+        duration: { kind: "number", label: "Change takes", min: 0.2, max: 1.5, step: 0.05, unit: "s", default: 0.5 },
+        align: {
+            kind: "choice", label: "Shorter words sit", values: ["start", "center", "end"],
+            labels: { start: "At the start", center: "In the middle", end: "At the end" }, default: "start",
+            help: "The space is the longest word's, so nothing around it jumps.",
+        },
+        color: { kind: "color", label: "Box or frame colour", default: "var(--color-sx-accent)", help: "Used by the box and focus looks." },
+    },
+});

package/dist/text/cycle/css.d.ts

@@ -0,0 +1,5 @@
+export declare const CYCLE_LOOKS: readonly ["slide", "flip", "blur", "box", "layout", "flap", "morph", "anagram", "shuffle", "strike", "focus"];
+export type CycleLook = (typeof CYCLE_LOOKS)[number];
+/** Words that take turns share one grid cell: the stack is as wide as the longest, so nothing around it moves. */
+export declare const CYCLE_BASE_CSS = "@layer theme, base, components, utilities;\n@layer components {\n  :where([data-sx-cycle]) { --sx-cycle-dir: 1; position: relative; }\n  :where([data-sx-cycle]:dir(rtl)) { --sx-cycle-dir: -1; }\n  :where([data-sx-cycle] [data-sx-text-read]) {\n    position: absolute;\n    inline-size: 1px;\n    block-size: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n  :where([data-sx-cycle] [data-sx-cycle-stack]) { position: relative; display: inline-grid; vertical-align: bottom; white-space: nowrap; }\n  :where([data-sx-cycle] [data-sx-cycle-stack] > *) { grid-area: 1 / 1; justify-self: var(--sx-cycle-align, start); }\n  :where([data-sx-cycle] [data-sx-cycle-word]:not([data-sx-cycle-state=\"on\"]), [data-sx-cycle] [data-sx-cycle-size]) { visibility: hidden; }\n  :where([data-sx-cycle] :is([data-sx-cycle-tile], [data-sx-cycle-letter])) { display: inline-block; white-space: pre; }\n  :where([data-sx-cycle] [data-sx-cycle-tiles]) { display: inline-flex; }\n  :where([data-sx-cycle] [data-sx-cycle-tile]) { display: inline-grid; }\n  :where([data-sx-cycle] [data-sx-cycle-tile] > *) { grid-area: 1 / 1; }\n  :where([data-sx-cycle] [data-sx-cycle-tile] > :not([data-sx-cycle-state=\"on\"])) { visibility: hidden; }\n  :where([data-sx-cycle] :is([data-sx-cycle-line], [data-sx-cycle-box], [data-sx-cycle-frame], [data-sx-cycle-defs])) { display: none; }\n  :where([data-sx-cycle] [data-sx-cycle-reel]) { position: relative; display: inline-block; overflow: clip; vertical-align: bottom; }\n  :where([data-sx-cycle] [data-sx-cycle-reel] > [data-sx-cycle-letter-size]) { visibility: hidden; }\n  :where([data-sx-cycle] [data-sx-cycle-strip]) {\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    translate: 0 calc(var(--sx-cycle-k) * -1lh);\n  }\n  :where([data-sx-cycle][data-sx-cycle=\"focus\"] [data-sx-cycle-stack]) { display: inline; white-space: normal; }\n  :where([data-sx-cycle][data-sx-cycle=\"focus\"] [data-sx-cycle-word]) { visibility: visible; }\n  :where([data-sx-cycle][data-sx-cycle=\"layout\"] [data-sx-cycle-stack]) { overflow: clip; inline-size: var(--sx-cycle-w-px, auto); }\n}";
+export declare const CYCLE_LOOK_CSS: Readonly<Record<CycleLook, string>>;

package/dist/text/cycle/css.js

@@ -0,0 +1,158 @@
+// WordCycle's stylesheets: the structure (always, it also shows one word under reduced motion) and one motion sheet per
+// look, so a page ships only the looks it uses. Plain strings.
+import { LAYER_ORDER } from "../../backgrounds/runtime/rootCss.js";
+import { fromStart } from "../effects/ink/kit.js";
+export const CYCLE_LOOKS = ["slide", "flip", "blur", "box", "layout", "flap", "morph", "anagram", "shuffle", "strike", "focus"];
+const H = "[data-sx-cycle]";
+const at = (look, raw) => `:where(${H}[data-sx-cycle="${look}"] ${raw})`;
+const WORD = "[data-sx-cycle-word]";
+const ON = '[data-sx-cycle-state="on"]';
+const OFF = '[data-sx-cycle-state="off"]';
+const WAIT = '[data-sx-cycle-state="wait"]';
+const EASE = "var(--ease-sx-out, cubic-bezier(0.2, 0.7, 0.2, 1))";
+const T = "var(--sx-cycle-time)";
+/** Words that take turns share one grid cell: the stack is as wide as the longest, so nothing around it moves. */
+export const CYCLE_BASE_CSS = `${LAYER_ORDER}
+@layer components {
+  :where(${H}) { --sx-cycle-dir: 1; position: relative; }
+  :where(${H}:dir(rtl)) { --sx-cycle-dir: -1; }
+  :where(${H} [data-sx-text-read]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  :where(${H} [data-sx-cycle-stack]) { position: relative; display: inline-grid; vertical-align: bottom; white-space: nowrap; }
+  :where(${H} [data-sx-cycle-stack] > *) { grid-area: 1 / 1; justify-self: var(--sx-cycle-align, start); }
+  :where(${H} ${WORD}:not(${ON}), ${H} [data-sx-cycle-size]) { visibility: hidden; }
+  :where(${H} :is([data-sx-cycle-tile], [data-sx-cycle-letter])) { display: inline-block; white-space: pre; }
+  :where(${H} [data-sx-cycle-tiles]) { display: inline-flex; }
+  :where(${H} [data-sx-cycle-tile]) { display: inline-grid; }
+  :where(${H} [data-sx-cycle-tile] > *) { grid-area: 1 / 1; }
+  :where(${H} [data-sx-cycle-tile] > :not(${ON})) { visibility: hidden; }
+  :where(${H} :is([data-sx-cycle-line], [data-sx-cycle-box], [data-sx-cycle-frame], [data-sx-cycle-defs])) { display: none; }
+  :where(${H} [data-sx-cycle-reel]) { position: relative; display: inline-block; overflow: clip; vertical-align: bottom; }
+  :where(${H} [data-sx-cycle-reel] > [data-sx-cycle-letter-size]) { visibility: hidden; }
+  :where(${H} [data-sx-cycle-strip]) {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    translate: 0 calc(var(--sx-cycle-k) * -1lh);
+  }
+  :where(${H}[data-sx-cycle="focus"] [data-sx-cycle-stack]) { display: inline; white-space: normal; }
+  :where(${H}[data-sx-cycle="focus"] ${WORD}) { visibility: visible; }
+  :where(${H}[data-sx-cycle="layout"] [data-sx-cycle-stack]) { overflow: clip; inline-size: var(--sx-cycle-w-px, auto); }
+}`;
+/**
+ * The leaving and waiting words become visible again for the motion, which fades them; the waiting ones jump. Scoped to
+ * the look: every look's sheet sits on the page together, and an unscoped rule hid the focus look's words.
+ */
+const shared = (look) => `  ${at(look, `${WORD}:is(${OFF}, ${WAIT})`)} { visibility: visible; opacity: 0; }
+  ${at(look, `${WORD}${WAIT}`)} { transition: none !important; }`;
+const word = (look, on, off, wait, extra = "") => `${shared(look)}
+  ${at(look, WORD)} { transition: translate ${T} ${EASE}, rotate ${T} ${EASE}, scale ${T} ${EASE}, opacity ${T} ${EASE}, filter ${T} ${EASE}; ${on} }
+  ${at(look, `${WORD}${OFF}`)} { ${off} }
+  ${at(look, `${WORD}${WAIT}`)} { ${wait} }${extra}`;
+/** The stack clips the words that slide out, with room for tall marks and descenders. */
+const CLIP = (look) => `
+  ${at(look, "[data-sx-cycle-stack]")} { overflow: clip; padding-block: 0.15em; margin-block: -0.15em; }`;
+export const CYCLE_LOOK_CSS = {
+    slide: word("slide", "translate: 0 0;", "translate: 0 -105%;", "translate: 0 105%;", CLIP("slide")),
+    flip: word("flip", "rotate: x 0deg;", "rotate: x -90deg;", "rotate: x 90deg;", `
+  ${at("flip", "[data-sx-cycle-stack]")} { perspective: 8em; }
+  ${at("flip", WORD)} { transform-origin: 50% 50% -0.5em; backface-visibility: hidden; }`),
+    blur: word("blur", "filter: blur(0); scale: 1;", "filter: blur(0.25em); scale: 1.05;", "filter: blur(0.25em); scale: 0.95;"),
+    // the box behind the word scales to the word's share of the widest (measured), so the layout never resizes
+    box: word("box", "translate: 0 0;", "translate: 0 -60%;", "translate: 0 60%;", `${CLIP("box")}
+  ${at("box", "[data-sx-cycle-stack]")} { padding-inline: 0.3em; margin-inline: -0.3em; }
+  ${at("box", "[data-sx-cycle-box]")} {
+    display: block;
+    position: absolute;
+    inset: 0;
+    border-radius: 0.2em;
+    background: var(--sx-cycle-color);
+    transform-origin: ${fromStartOrigin()};
+    scale: var(--sx-cycle-w, 1) 1;
+    transition: scale ${T} ${EASE};
+    z-index: -1;
+  }`),
+    // the one look that reflows the sentence: the stack's width follows the word (allowed in the test)
+    layout: word("layout", "translate: 0 0;", "translate: 0 -60%;", "translate: 0 60%;", `
+  ${at("layout", "[data-sx-cycle-stack]")} { transition: inline-size ${T} ${EASE}; padding-block: 0.15em; margin-block: -0.15em; }`),
+    // each letter on its own tile flips over, a step after the one before, like an airport board
+    flap: `  ${at("flap", "[data-sx-cycle-tile]")} {
+    perspective: 4em;
+    padding-inline: 0.06em;
+    margin-inline: 0.02em;
+    border-radius: 0.08em;
+    background: color-mix(in oklab, currentColor 12%, transparent);
+  }
+  ${at("flap", "[data-sx-cycle-tile] > *")} {
+    transition: rotate ${T} ${EASE} calc(var(--sx-i, 0) * 0.04s), opacity ${T} step-end calc(var(--sx-i, 0) * 0.04s);
+    backface-visibility: hidden;
+  }
+  ${at("flap", `[data-sx-cycle-tile] > ${ON}`)} { transition: rotate ${T} ${EASE} calc(var(--sx-i, 0) * 0.04s), opacity ${T} step-start calc(var(--sx-i, 0) * 0.04s); }
+  ${at("flap", `[data-sx-cycle-tile] > :is(${OFF}, ${WAIT})`)} { visibility: visible; opacity: 0; }
+  ${at("flap", `[data-sx-cycle-tile] > ${OFF}`)} { rotate: x -90deg; }
+  ${at("flap", `[data-sx-cycle-tile] > ${WAIT}`)} { rotate: x 90deg; transition: none; }`,
+    // words melt into each other: blurred, under a threshold filter that snaps the blur back into hard shapes
+    // a blur much past 0.15em thins small text below the threshold, and it vanishes mid-melt (found at 18px in WebKit)
+    morph: word("morph", "filter: blur(0);", "filter: blur(0.15em);", "filter: blur(0.15em);", `
+  ${at("morph", "[data-sx-cycle-stack]")} { filter: var(--sx-cycle-filter); }
+  ${at("morph", "[data-sx-cycle-defs]")} { display: block; position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }`),
+    // letters move to their places in the next word (positions measured: FLIP), the rest fade
+    anagram: `  ${at("anagram", "[data-sx-cycle-letter]")} { transition: translate ${T} ${EASE}, opacity ${T} ${EASE}; }
+  ${at("anagram", "[data-sx-cycle-letter][data-sx-cycle-new]")} { opacity: 0; }
+  ${at("anagram", "[data-sx-cycle-letter][data-sx-cycle-jump]")} { transition: none; }`,
+    // each letter rolls through random ones and lands, a step after the one before
+    shuffle: word("shuffle", "", "", "", `
+  ${at("shuffle", `${WORD} [data-sx-cycle-strip]`)} { transition: translate calc(${T} * 1.6) cubic-bezier(0.3, 0, 0.2, 1) calc(var(--sx-i, 0) * 0.06s); }
+  ${at("shuffle", `${WORD}${WAIT} [data-sx-cycle-strip]`)} { translate: 0 0; transition: none; }`),
+    // the old word is struck through and fades; the new one writes in from the reading start
+    strike: `${shared("strike")}
+  ${at("strike", WORD)} { position: relative; transition: opacity ${T} ease ${T}, clip-path ${T} ${EASE} ${T}; clip-path: ${fromStart("1")}; }
+  ${at("strike", `${WORD}${WAIT}`)} { clip-path: ${fromStart("0")}; }
+  ${at("strike", `${WORD}${OFF}`)} { transition: opacity ${T} ease ${T}; }
+  ${at("strike", "[data-sx-cycle-line]")} {
+    display: block;
+    position: absolute;
+    inset-inline: -0.04em;
+    inset-block-start: 55%;
+    block-size: 0.07em;
+    background: currentColor;
+    transform-origin: ${fromStartOrigin()};
+    scale: 0 1;
+    transition: scale ${T} ${EASE};
+  }
+  ${at("strike", `${WORD}${OFF} [data-sx-cycle-line]`)} { scale: 1 1; }
+  ${at("strike", `${WORD}${WAIT} [data-sx-cycle-line]`)} { transition: none; }`,
+    // every word shows; the others blur, and four corners jump to frame the sharp one (positions measured from the
+    // reading start, so the corners mirror with the text)
+    focus: `  ${at("focus", WORD)} { transition: filter ${T} ${EASE}, opacity ${T} ${EASE}; }
+  :where(${H}[data-sx-cycle="focus"][data-sx-live] ${WORD}:not(${ON})) { filter: blur(var(--sx-cycle-blur)); opacity: 0.6; }
+  :where(${H}[data-sx-cycle="focus"][data-sx-live][data-sx-cycle-measured] [data-sx-cycle-frame]) { display: block; }
+  ${at("focus", "[data-sx-cycle-frame]")} { position: absolute; inset: 0; pointer-events: none; }
+  ${at("focus", "[data-sx-cycle-frame] > span")} {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 0.35em;
+    block-size: 0.35em;
+    border: 0.08em solid var(--sx-cycle-color);
+    translate: calc(var(--x) * var(--sx-cycle-dir)) var(--y);
+    transition: translate ${T} ${EASE};
+  }
+  ${at("focus", '[data-sx-cycle-frame] > [data-c="0"]')} { --x: calc(var(--fx) - 0.15em); --y: calc(var(--fy) - 0.1em); border-inline-end: 0; border-block-end: 0; }
+  ${at("focus", '[data-sx-cycle-frame] > [data-c="1"]')} { --x: calc(var(--fx) + var(--fw) - 0.2em); --y: calc(var(--fy) - 0.1em); border-inline-start: 0; border-block-end: 0; }
+  ${at("focus", '[data-sx-cycle-frame] > [data-c="2"]')} { --x: calc(var(--fx) - 0.15em); --y: calc(var(--fy) + var(--fh) - 0.25em); border-inline-end: 0; border-block-start: 0; }
+  ${at("focus", '[data-sx-cycle-frame] > [data-c="3"]')} { --x: calc(var(--fx) + var(--fw) - 0.2em); --y: calc(var(--fy) + var(--fh) - 0.25em); border-inline-start: 0; border-block-start: 0; }`,
+};
+/** The reading start as a transform origin. */
+function fromStartOrigin() {
+    return "calc(50% - 50% * var(--sx-cycle-dir)) 50%";
+}

package/dist/text/effects/decode/decodeBinary.d.ts

@@ -0,0 +1,5 @@
+import type { TextEffect } from "../../types.js";
+import { type DecodeOptions } from "./kit.js";
+export type DecodeBinaryOptions = Omit<DecodeOptions, "characters">;
+/** The text decodes out of 0s and 1s as it enters the screen. It carries code: the page needs `"use client"`. */
+export declare function decodeBinary(options?: DecodeBinaryOptions): TextEffect;

package/dist/text/effects/decode/decodeBinary.js

@@ -0,0 +1,5 @@
+import { defineDecode } from "./kit.js";
+/** The text decodes out of 0s and 1s as it enters the screen. It carries code: the page needs `"use client"`. */
+export function decodeBinary(options = {}) {
+    return defineDecode("decodeBinary", { ...options, characters: "01" }, { duration: 1.4, onEnter: true, onHover: false });
+}

package/dist/text/effects/decode/decodeBinary.schema.d.ts

@@ -0,0 +1 @@
+export declare const DECODE_BINARY_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/text/effects/decode/decodeBinary.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const DECODE_BINARY_SCHEMA = defineSchema()({
+    id: "decodeBinary",
+    family: "text",
+    factory: "decodeBinary",
+    fields: {
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 4, step: 0.05, unit: "s", default: 1.4 },
+        fps: { kind: "integer", label: "Changes per second", min: 6, max: 60, default: 24, advanced: true },
+        from: { kind: "choice", label: "Settles first", values: ["start", "end", "centre", "random"], labels: { start: "Reading start", end: "Reading end", centre: "Middle out", random: "Shuffled" }, default: "start" },
+    },
+});

package/dist/text/effects/decode/decodeHover.d.ts

@@ -0,0 +1,8 @@
+import type { TextEffect } from "../../types.js";
+import { type DecodeOptions } from "./kit.js";
+export type DecodeHoverOptions = DecodeOptions;
+/**
+ * On hover or keyboard focus (of the text, or the link or button around it), the letters scramble and settle back.
+ * Mouse and keyboard only: on a touch screen the text stays as it is. It carries code: the page needs `"use client"`.
+ */
+export declare function decodeHover(options?: DecodeHoverOptions): TextEffect;

package/dist/text/effects/decode/decodeHover.js

@@ -0,0 +1,8 @@
+import { defineDecode } from "./kit.js";
+/**
+ * On hover or keyboard focus (of the text, or the link or button around it), the letters scramble and settle back.
+ * Mouse and keyboard only: on a touch screen the text stays as it is. It carries code: the page needs `"use client"`.
+ */
+export function decodeHover(options = {}) {
+    return defineDecode("decodeHover", options, { duration: 0.6, onEnter: false, onHover: true });
+}

package/dist/text/effects/decode/decodeHover.schema.d.ts

@@ -0,0 +1 @@
+export declare const DECODE_HOVER_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/text/effects/decode/decodeHover.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const DECODE_HOVER_SCHEMA = defineSchema()({
+    id: "decodeHover",
+    family: "text",
+    factory: "decodeHover",
+    fields: {
+        characters: { kind: "text", label: "Characters", placeholder: "ABC123#%", autoNote: "the text's own letters, so it stays in its script" },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 4, step: 0.05, unit: "s", default: 0.6 },
+        fps: { kind: "integer", label: "Changes per second", min: 6, max: 60, default: 24, advanced: true },
+        from: { kind: "choice", label: "Settles first", values: ["start", "end", "centre", "random"], labels: { start: "Reading start", end: "Reading end", centre: "Middle out", random: "Shuffled" }, default: "start" },
+    },
+});

package/dist/text/effects/decode/decodeReveal.d.ts

@@ -0,0 +1,11 @@
+import type { TextEffect } from "../../types.js";
+import { type DecodeOptions } from "./kit.js";
+export interface DecodeRevealOptions extends DecodeOptions {
+    /** `"hover"`: play again on hover and keyboard focus (Magic UI's Hyper Text). Default `"none"`. */
+    readonly replay?: "none" | "hover";
+}
+/**
+ * The text shows scrambled until it enters the screen, then decodes into the real words. Without scripts, or under
+ * reduced motion, it is plain text. It carries code: the page needs `"use client"`.
+ */
+export declare function decodeReveal(options?: DecodeRevealOptions): TextEffect;

package/dist/text/effects/decode/decodeReveal.js

@@ -0,0 +1,9 @@
+import { defineDecode } from "./kit.js";
+/**
+ * The text shows scrambled until it enters the screen, then decodes into the real words. Without scripts, or under
+ * reduced motion, it is plain text. It carries code: the page needs `"use client"`.
+ */
+export function decodeReveal(options = {}) {
+    const { replay, ...rest } = options;
+    return defineDecode("decodeReveal", rest, { duration: 1.2, onEnter: true, onHover: replay === "hover" });
+}

package/dist/text/effects/decode/decodeReveal.schema.d.ts

@@ -0,0 +1 @@
+export declare const DECODE_REVEAL_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/text/effects/decode/decodeReveal.schema.js

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+export const DECODE_REVEAL_SCHEMA = defineSchema()({
+    id: "decodeReveal",
+    family: "text",
+    factory: "decodeReveal",
+    fields: {
+        characters: { kind: "text", label: "Characters", placeholder: "ABC123#%", autoNote: "the text's own letters, so it stays in its script" },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 4, step: 0.05, unit: "s", default: 1.2 },
+        fps: { kind: "integer", label: "Changes per second", min: 6, max: 60, default: 24, advanced: true },
+        from: { kind: "choice", label: "Settles first", values: ["start", "end", "centre", "random"], labels: { start: "Reading start", end: "Reading end", centre: "Middle out", random: "Shuffled" }, default: "start" },
+        replay: { kind: "choice", label: "Replay", values: ["none", "hover"], labels: { none: "Never", hover: "On hover" }, default: "none" },
+    },
+});

package/dist/text/effects/decode/frame.d.ts

@@ -0,0 +1,10 @@
+/** Which letters settle first: from the reading start, the end, the middle out, or in a shuffle. */
+export type DecodeFrom = "start" | "end" | "centre" | "random";
+/** Each letter's turn to settle, 0 (first) to below 1 (last), for `n` letters. */
+export declare function decodeRanks(n: number, from: DecodeFrom, seed?: number): number[];
+/**
+ * `text` at progress `p` (0 to 1): letters whose rank is below `p` show as they are, the rest are drawn from `pool`.
+ * White space always stays, so words keep their shape. `pool` defaults to the text's own letters, so it stays in the
+ * text's script.
+ */
+export declare function decodeFrame(text: string, p: number, random: () => number, ranks: readonly number[], pool?: string): string;