@sharedex/ui 0.0.0-stage → 0.10.0

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

@@ -0,0 +1,40 @@
+// What a decoding text shows at progress `p`: settled letters, the rest random. Pure; tested.
+import { rng } from "../../../backgrounds/runtime/rng.js";
+import { graphemes } from "../../split.js";
+/** Each letter's turn to settle, 0 (first) to below 1 (last), for `n` letters. */
+export function decodeRanks(n, from, seed = 1) {
+    if (n === 0)
+        return [];
+    const mid = (n - 1) / 2;
+    switch (from) {
+        case "end":
+            return Array.from({ length: n }, (_, i) => (n - 1 - i) / n);
+        case "centre":
+            return Array.from({ length: n }, (_, i) => (mid === 0 ? 0 : Math.abs(i - mid) / (mid + 1)));
+        case "random": {
+            const r = rng(seed);
+            const order = Array.from({ length: n }, (_, i) => i);
+            for (let i = n - 1; i > 0; i--) {
+                const j = Math.floor(r() * (i + 1));
+                [order[i], order[j]] = [order[j], order[i]];
+            }
+            const ranks = new Array(n);
+            order.forEach((letter, place) => (ranks[letter] = place / n));
+            return ranks;
+        }
+        default:
+            return Array.from({ length: n }, (_, i) => i / n);
+    }
+}
+/**
+ * `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 function decodeFrame(text, p, random, ranks, pool) {
+    const letters = graphemes(text);
+    const chars = graphemes(pool ?? text).filter((c) => c.trim());
+    if (chars.length === 0)
+        return text;
+    return letters.map((c, i) => (!c.trim() || (ranks[i] ?? 1) < p ? c : chars[Math.floor(random() * chars.length)])).join("");
+}

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

@@ -0,0 +1,23 @@
+import type { TextEffect } from "../../types.js";
+import type { DecodeFrom } from "./frame.js";
+import { type DecodeSettings } from "./play.js";
+export interface DecodeOptions {
+    /** The characters it shuffles through. Default the text's own, so it stays in the text's script. */
+    readonly characters?: string;
+    /** Seconds until the text has settled. */
+    readonly duration?: number;
+    /** Changes per second. Default `24`. */
+    readonly fps?: number;
+    /** Which letters settle first. Default `"start"`. */
+    readonly from?: DecodeFrom;
+}
+/**
+ * The copy sits over the text, the same size, and shows only while playing. The real text then hides with
+ * `visibility`, so an entrance's opacity animation can't bring it back over the frames. While a script is about to take
+ * over (`data-sx-text-wait`, from the server), the text waits hidden, and shows on its own after the fail-safe.
+ */
+export declare function decodeCss(id: string): string;
+/** A decode effect: its stylesheet, its copy layer and its program. It carries code: the page needs `"use client"`. */
+export declare function defineDecode(id: string, options: DecodeOptions, settings: Omit<DecodeSettings, keyof DecodeOptions | "duration" | "fps" | "from"> & {
+    readonly duration: number;
+}): TextEffect;

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

@@ -0,0 +1,34 @@
+// What the decode effects share: the copy layer that shows the frames, and how options become a program.
+import { FAIL_SAFE, SHOW, at, defineText, hostOf, layerOf } from "../kit.js";
+import { attachDecode } from "./play.js";
+/**
+ * The copy sits over the text, the same size, and shows only while playing. The real text then hides with
+ * `visibility`, so an entrance's opacity animation can't bring it back over the frames. While a script is about to take
+ * over (`data-sx-text-wait`, from the server), the text waits hidden, and shows on its own after the fail-safe.
+ */
+export function decodeCss(id) {
+    const host = hostOf(id);
+    return `  ${at(`${host} ${layerOf(id)}`)} { overflow: hidden; }
+  ${at(`${host}[data-sx-text-playing] ${layerOf(id)}`)} { display: block; }
+  ${at(`${host}[data-sx-text-playing] ${SHOW}`)} { visibility: hidden; }
+  @keyframes sx-text-${id}-wait { from, to { visibility: hidden; } }
+  @media (scripting: enabled) {
+    ${at(`${host}[data-sx-text-wait] ${SHOW}`)} { animation: sx-text-${id}-wait ${FAIL_SAFE} step-end; }
+  }`;
+}
+/** A decode effect: its stylesheet, its copy layer and its program. It carries code: the page needs `"use client"`. */
+export function defineDecode(id, options, settings) {
+    const s = {
+        ...settings,
+        ...(options.characters !== undefined ? { characters: options.characters } : {}),
+        duration: options.duration ?? settings.duration,
+        fps: options.fps ?? 24,
+        from: options.from ?? "start",
+    };
+    return defineText(id, decodeCss(id), {
+        layers: [{ copy: true }],
+        claims: ["paint"],
+        needs: s.onEnter ? { inView: true, wait: true } : {},
+        program: { attach: (el, text) => attachDecode(el, id, text, s), signature: JSON.stringify(s) },
+    });
+}

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

@@ -0,0 +1,13 @@
+import { type DecodeFrom } from "./frame.js";
+export interface DecodeSettings {
+    readonly characters?: string;
+    readonly duration: number;
+    readonly fps: number;
+    readonly from: DecodeFrom;
+    /** Play when the text enters the screen (and show it scrambled until then). */
+    readonly onEnter: boolean;
+    /** Play again on hover and keyboard focus. */
+    readonly onHover: boolean;
+}
+/** Starts it on the text element. Returns what stops it. */
+export declare function attachDecode(el: HTMLElement, id: string, text: string | undefined, s: DecodeSettings): () => void;

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

@@ -0,0 +1,79 @@
+// Plays a decode on a text: frames are written into the effect's copy layer (its text node, never `textContent`: React
+// still owns that node), while `data-sx-text-playing` hides the real text, which keeps the size and stays readable by
+// screen readers. Only the decode effects import this, so a page without one downloads none of it.
+import { decodeFrame, decodeRanks } from "./frame.js";
+import { graphemes } from "../../split.js";
+/** Starts it on the text element. Returns what stops it. */
+export function attachDecode(el, id, text, s) {
+    const node = el.querySelector(`[data-sx-text-layer="${id}"]`)?.firstChild;
+    if (text === undefined || !node || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+        el.removeAttribute("data-sx-text-wait");
+        return () => { };
+    }
+    const ranks = decodeRanks(graphemes(text).length, s.from, text.length);
+    let frame = 0;
+    const show = (p) => {
+        node.nodeValue = decodeFrame(text, p, Math.random, ranks, s.characters);
+    };
+    const stop = () => {
+        cancelAnimationFrame(frame);
+        frame = 0;
+        node.nodeValue = text;
+        el.removeAttribute("data-sx-text-playing");
+    };
+    const play = () => {
+        if (frame)
+            return;
+        const start = performance.now();
+        let last = -Infinity;
+        el.setAttribute("data-sx-text-playing", "");
+        el.removeAttribute("data-sx-text-wait");
+        const tick = (now) => {
+            const p = (now - start) / (s.duration * 1000);
+            if (p >= 1)
+                return stop();
+            if (now - last >= 1000 / s.fps) {
+                last = now;
+                show(p);
+            }
+            frame = requestAnimationFrame(tick);
+        };
+        frame = requestAnimationFrame(tick);
+    };
+    const cleanups = [];
+    if (s.onEnter) {
+        // scrambled until it is on screen; Text marks it data-sx-in then
+        if (el.hasAttribute("data-sx-in"))
+            play();
+        else {
+            show(0);
+            el.setAttribute("data-sx-text-playing", "");
+            const mo = new MutationObserver(() => {
+                if (el.hasAttribute("data-sx-in")) {
+                    mo.disconnect();
+                    el.removeAttribute("data-sx-text-playing");
+                    play();
+                }
+            });
+            mo.observe(el, { attributes: true, attributeFilter: ["data-sx-in"] });
+            cleanups.push(() => mo.disconnect());
+        }
+    }
+    if (s.onHover) {
+        // the text, or the link or button around it
+        const target = el.closest("a, button, [tabindex]") ?? el;
+        const onFocus = () => target.matches(":focus-visible") && play();
+        if (window.matchMedia("(hover: hover) and (pointer: fine)").matches)
+            target.addEventListener("pointerenter", play);
+        target.addEventListener("focus", onFocus);
+        cleanups.push(() => {
+            target.removeEventListener("pointerenter", play);
+            target.removeEventListener("focus", onFocus);
+        });
+    }
+    el.removeAttribute("data-sx-text-wait");
+    return () => {
+        cleanups.forEach((c) => c());
+        stop();
+    };
+}

package/dist/text/effects/enter/enterAssemble.d.ts

@@ -0,0 +1,12 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export interface EnterAssembleOptions extends EnterOptions {
+    /** How far away the pieces start, in em. Default `2.5`. */
+    readonly spread?: number;
+    /** How far they can be turned, in degrees. Default `120`. */
+    readonly turn?: number;
+    /** Where each piece starts: the same seed gives the same scatter on the server and in the browser. Default `1`. */
+    readonly seed?: number;
+}
+/** Letters fly in from scattered places and turns and come together into the text: a shatter played backwards. */
+export declare function enterAssemble(options?: EnterAssembleOptions): TextEffect;

package/dist/text/effects/enter/enterAssemble.js

@@ -0,0 +1,15 @@
+import { enter, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterAssemble";
+const CSS = enter(ID, {
+    from: `opacity: 0; translate: calc(var(--sx-ra, 0) * ${v(ID, "spread")}) calc(var(--sx-rb, 0) * ${v(ID, "spread")}); rotate: calc(var(--sx-rc, 0) * ${v(ID, "turn")});`,
+});
+/** Letters fly in from scattered places and turns and come together into the text: a shatter played backwards. */
+export function enterAssemble(options = {}) {
+    return defineEnter(ID, CSS, { stagger: 0.02, ...options }, {
+        by: "chars",
+        duration: 1,
+        vars: { [varName(ID, "spread")]: `${options.spread ?? 2.5}em`, [varName(ID, "turn")]: `${options.turn ?? 120}deg` },
+        needs: { scatter: true, seed: options.seed ?? 1 },
+    });
+}

package/dist/text/effects/enter/enterAssemble.schema.d.ts

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

package/dist/text/effects/enter/enterAssemble.schema.js

@@ -0,0 +1,15 @@
+import { seedField, textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_ASSEMBLE_SCHEMA = defineSchema()({
+    id: "enterAssemble",
+    family: "text",
+    factory: "enterAssemble",
+    fields: {
+        by: textByField("chars"),
+        ...textEnterFields({ duration: 1, stagger: 0.02 }),
+        from: textFromField(),
+        spread: { kind: "number", label: "Scatter", min: 0, max: 10, step: 0.1, unit: "em", default: 2.5 },
+        turn: { kind: "number", label: "Turn", min: 0, max: 360, step: 5, unit: "°", default: 120 },
+        seed: seedField(1),
+    },
+});

package/dist/text/effects/enter/enterBlur.d.ts

@@ -0,0 +1,8 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export interface EnterBlurOptions extends EnterOptions {
+    /** How blurred each piece starts, in px. Default `10`. */
+    readonly blur?: number;
+}
+/** Pieces come into focus from a blur. Blur costs the graphics chip: at most 60 letters, longer text moves by the word. */
+export declare function enterBlur(options?: EnterBlurOptions): TextEffect;

package/dist/text/effects/enter/enterBlur.js

@@ -0,0 +1,13 @@
+import { enter, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterBlur";
+const CSS = enter(ID, { from: `opacity: 0; filter: blur(${v(ID, "blur")}); translate: 0 0.15em;` });
+/** Pieces come into focus from a blur. Blur costs the graphics chip: at most 60 letters, longer text moves by the word. */
+export function enterBlur(options = {}) {
+    return defineEnter(ID, CSS, options, {
+        by: "words",
+        duration: 0.7,
+        vars: { [varName(ID, "blur")]: `${options.blur ?? 10}px` },
+        needs: { maxPieces: 60 },
+    });
+}

package/dist/text/effects/enter/enterBlur.schema.d.ts

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

package/dist/text/effects/enter/enterBlur.schema.js

@@ -0,0 +1,13 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_BLUR_SCHEMA = defineSchema()({
+    id: "enterBlur",
+    family: "text",
+    factory: "enterBlur",
+    fields: {
+        by: textByField("words"),
+        ...textEnterFields({ duration: 0.7 }),
+        from: textFromField(),
+        blur: { kind: "number", label: "Blur", min: 0, max: 30, step: 1, unit: "px", default: 10 },
+    },
+});

package/dist/text/effects/enter/enterBounce.d.ts

@@ -0,0 +1,8 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export interface EnterBounceOptions extends EnterOptions {
+    /** How far below each piece starts, in em. Default `1`. */
+    readonly distance?: number;
+}
+/** Letters pull up past their place and settle back, one after another. */
+export declare function enterBounce(options?: EnterBounceOptions): TextEffect;

package/dist/text/effects/enter/enterBounce.js

@@ -0,0 +1,8 @@
+import { SPRING, enter, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterBounce";
+const CSS = enter(ID, { from: `opacity: 0; translate: 0 ${v(ID, "distance")};`, ease: SPRING });
+/** Letters pull up past their place and settle back, one after another. */
+export function enterBounce(options = {}) {
+    return defineEnter(ID, CSS, options, { by: "chars", duration: 0.8, vars: { [varName(ID, "distance")]: `${options.distance ?? 1}em` } });
+}

package/dist/text/effects/enter/enterBounce.schema.d.ts

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

package/dist/text/effects/enter/enterBounce.schema.js

@@ -0,0 +1,13 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_BOUNCE_SCHEMA = defineSchema()({
+    id: "enterBounce",
+    family: "text",
+    factory: "enterBounce",
+    fields: {
+        by: textByField("chars"),
+        ...textEnterFields({ duration: 0.8 }),
+        from: textFromField(),
+        distance: { kind: "number", label: "Distance", min: 0, max: 3, step: 0.05, unit: "em", default: 1 },
+    },
+});

package/dist/text/effects/enter/enterBox.d.ts

@@ -0,0 +1,8 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterTiming } from "./kit.js";
+export interface EnterBoxOptions extends Omit<EnterTiming, "stagger" | "from"> {
+    /** The box's colour. Default the theme's primary. */
+    readonly color?: string;
+}
+/** A block of colour wipes across the text and away again, leaving the text behind it. */
+export declare function enterBox(options?: EnterBoxOptions): TextEffect;

package/dist/text/effects/enter/enterBox.js

@@ -0,0 +1,23 @@
+import { END_X, SHOW, START_X, at, enter, layerOf, scripted, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterBox";
+const BOX = layerOf(ID);
+// The box grows across from the reading start, then shrinks away towards the end; the text appears behind it at the
+// half-way mark, when the box covers it whole.
+const CSS = `${scripted(`    ${at(`[data-sx-text~="${ID}"] ${BOX}`)} { display: block; background: ${v(ID, "color")}; }`)}
+${enter(ID, {
+    target: BOX,
+    name: "box",
+    from: `scale: 0 1; transform-origin: ${START_X} 50%;`,
+    frames: `0% { scale: 0 1; transform-origin: ${START_X} 50%; } 50% { scale: 1 1; transform-origin: ${START_X} 50%; } 50.01% { scale: 1 1; transform-origin: ${END_X} 50%; } 100% { scale: 0 1; transform-origin: ${END_X} 50%; }`,
+    ease: "cubic-bezier(0.7, 0, 0.3, 1)",
+})}
+${enter(ID, { target: SHOW, name: "text", from: "opacity: 0;", frames: "0%, 50% { opacity: 0; } 50.01%, 100% { opacity: 1; }", ease: "linear" })}`;
+/** A block of colour wipes across the text and away again, leaving the text behind it. */
+export function enterBox(options = {}) {
+    return defineEnter(ID, CSS, options, {
+        duration: 1.1,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)" },
+        parts: { layers: [{}] },
+    });
+}

package/dist/text/effects/enter/enterBox.schema.d.ts

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

package/dist/text/effects/enter/enterBox.schema.js

@@ -0,0 +1,11 @@
+import { textEnterFields } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_BOX_SCHEMA = defineSchema()({
+    id: "enterBox",
+    family: "text",
+    factory: "enterBox",
+    fields: {
+        ...textEnterFields({ duration: 1.1 }),
+        color: { kind: "color", label: "Box colour", default: "var(--color-sx-primary)" },
+    },
+});

package/dist/text/effects/enter/enterFlip.d.ts

@@ -0,0 +1,10 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export interface EnterFlipOptions extends EnterOptions {
+    /** `"flip"` (default): each piece stands up from lying back on its baseline. `"fold"`: it unfolds down from its top edge, like paper. */
+    readonly kind?: "flip" | "fold";
+    /** The viewer's distance, in em: smaller is a stronger 3D look. Default `6`. */
+    readonly perspective?: number;
+}
+/** Letters turn into place in 3D, one after another; `kind: "fold"` unfolds them like paper. */
+export declare function enterFlip(options?: EnterFlipOptions): TextEffect;

package/dist/text/effects/enter/enterFlip.js

@@ -0,0 +1,20 @@
+import { SHOW, UNIT, at, enter, scripted, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterFlip";
+// Perspective goes on whatever holds the pieces (the text, a line, a word), so each piece turns in its own 3D space.
+const CSS = `${scripted(`    ${at(`[data-sx-text~="${ID}"] :is(${SHOW}, [data-sx-text-line], [data-sx-text-word])`)} { perspective: ${v(ID, "perspective")}; }
+    ${at(`[data-sx-text~="${ID}"] ${UNIT}`)} { transform-origin: 50% ${v(ID, "origin")}; backface-visibility: hidden; }`)}
+${enter(ID, { from: `opacity: 0; rotate: x ${v(ID, "angle")};` })}`;
+/** Letters turn into place in 3D, one after another; `kind: "fold"` unfolds them like paper. */
+export function enterFlip(options = {}) {
+    const fold = options.kind === "fold";
+    return defineEnter(ID, CSS, options, {
+        by: "chars",
+        duration: 0.7,
+        vars: {
+            [varName(ID, "angle")]: fold ? "-100deg" : "90deg",
+            [varName(ID, "origin")]: fold ? "0%" : "100%",
+            [varName(ID, "perspective")]: `${options.perspective ?? 6}em`,
+        },
+    });
+}

package/dist/text/effects/enter/enterFlip.schema.d.ts

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

package/dist/text/effects/enter/enterFlip.schema.js

@@ -0,0 +1,14 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_FLIP_SCHEMA = defineSchema()({
+    id: "enterFlip",
+    family: "text",
+    factory: "enterFlip",
+    fields: {
+        by: textByField("chars"),
+        ...textEnterFields({ duration: 0.7 }),
+        from: textFromField(),
+        kind: { kind: "choice", label: "Kind", values: ["flip", "fold"], labels: { flip: "Flip up", fold: "Unfold down" }, default: "flip" },
+        perspective: { kind: "number", label: "Perspective", min: 1, max: 30, step: 0.5, unit: "em", default: 6, advanced: true },
+    },
+});

package/dist/text/effects/enter/enterMask.d.ts

@@ -0,0 +1,5 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterTiming } from "./kit.js";
+export type EnterMaskOptions = EnterTiming;
+/** Each line slides up from behind an invisible edge, one after another. The cleanest heading entrance. */
+export declare function enterMask(options?: EnterMaskOptions): TextEffect;

package/dist/text/effects/enter/enterMask.js

@@ -0,0 +1,15 @@
+import { UNIT, at, enter, scripted } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterMask";
+// Each line is the edge the words hide behind. The padding gives tall marks and descenders room inside the clip, and
+// the negative margin gives the room back, so the lines sit where they would without the effect.
+const CSS = `${scripted(`    ${at(`[data-sx-text~="${ID}"] ${UNIT}`)} {
+      overflow: clip;
+      padding-block: 0.15em;
+      margin-block: -0.15em;
+    }`)}
+${enter(ID, { target: `${UNIT} > *`, from: "translate: 0 115%;" })}`;
+/** Each line slides up from behind an invisible edge, one after another. The cleanest heading entrance. */
+export function enterMask(options = {}) {
+    return defineEnter(ID, CSS, { ...options, by: "lines" }, { by: "lines", duration: 0.9 });
+}

package/dist/text/effects/enter/enterMask.schema.d.ts

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

package/dist/text/effects/enter/enterMask.schema.js

@@ -0,0 +1,11 @@
+import { textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_MASK_SCHEMA = defineSchema()({
+    id: "enterMask",
+    family: "text",
+    factory: "enterMask",
+    fields: {
+        ...textEnterFields({ duration: 0.9 }),
+        from: textFromField(),
+    },
+});

package/dist/text/effects/enter/enterPop.d.ts

@@ -0,0 +1,5 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export type EnterPopOptions = EnterOptions;
+/** Letters pop up from nothing with a springy overshoot, one after another. */
+export declare function enterPop(options?: EnterPopOptions): TextEffect;

package/dist/text/effects/enter/enterPop.js

@@ -0,0 +1,8 @@
+import { SPRING, enter } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterPop";
+const CSS = enter(ID, { from: "opacity: 0; scale: 0;", ease: SPRING });
+/** Letters pop up from nothing with a springy overshoot, one after another. */
+export function enterPop(options = {}) {
+    return defineEnter(ID, CSS, options, { by: "chars", duration: 0.6 });
+}

package/dist/text/effects/enter/enterPop.schema.d.ts

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

package/dist/text/effects/enter/enterPop.schema.js

@@ -0,0 +1,12 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_POP_SCHEMA = defineSchema()({
+    id: "enterPop",
+    family: "text",
+    factory: "enterPop",
+    fields: {
+        by: textByField("chars"),
+        ...textEnterFields({ duration: 0.6 }),
+        from: textFromField(),
+    },
+});

package/dist/text/effects/enter/enterRandom.d.ts

@@ -0,0 +1,8 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export interface EnterRandomOptions extends Omit<EnterOptions, "from"> {
+    /** Which shuffle: the same seed gives the same order, on the server and in the browser. Default `1`. */
+    readonly seed?: number;
+}
+/** Letters fade in out of order, in a shuffle that stays the same on every load. */
+export declare function enterRandom(options?: EnterRandomOptions): TextEffect;

package/dist/text/effects/enter/enterRandom.js

@@ -0,0 +1,9 @@
+import { enter } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterRandom";
+const CSS = enter(ID, { from: "opacity: 0; translate: 0 0.3em;" });
+/** Letters fade in out of order, in a shuffle that stays the same on every load. */
+export function enterRandom(options = {}) {
+    const seed = options.seed ?? 1;
+    return defineEnter(ID, CSS, { stagger: 0.025, ...options }, { by: "chars", duration: 0.5, needs: { seed } }, "random");
+}

package/dist/text/effects/enter/enterRandom.schema.d.ts

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

package/dist/text/effects/enter/enterRandom.schema.js

@@ -0,0 +1,12 @@
+import { seedField, textByField, textEnterFields } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_RANDOM_SCHEMA = defineSchema()({
+    id: "enterRandom",
+    family: "text",
+    factory: "enterRandom",
+    fields: {
+        by: textByField("chars"),
+        ...textEnterFields({ duration: 0.5, stagger: 0.025 }),
+        seed: seedField(1),
+    },
+});

package/dist/text/effects/enter/enterRedact.d.ts

@@ -0,0 +1,8 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export interface EnterRedactOptions extends EnterOptions {
+    /** The bars' colour. Default the theme's ink. */
+    readonly color?: string;
+}
+/** Black bars over each word, like a redacted document, slide off one after another. */
+export declare function enterRedact(options?: EnterRedactOptions): TextEffect;

package/dist/text/effects/enter/enterRedact.js

@@ -0,0 +1,22 @@
+import { COVER, END_X, UNIT, at, enter, scripted, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterRedact";
+const CSS = `${scripted(`    ${at(`[data-sx-text~="${ID}"] ${UNIT}`)} { position: relative; }
+    ${at(`[data-sx-text~="${ID}"] ${COVER}`)} {
+      display: block;
+      position: absolute;
+      inset: -0.06em -0.08em;
+      background: ${v(ID, "color")};
+      border-radius: 0.06em;
+      transform-origin: ${END_X} 50%;
+    }`)}
+${enter(ID, { target: COVER, from: "scale: 1 1;", frames: "from { scale: 1 1; } to { scale: 0 1; }", ease: "cubic-bezier(0.7, 0, 0.2, 1)" })}`;
+/** Black bars over each word, like a redacted document, slide off one after another. */
+export function enterRedact(options = {}) {
+    return defineEnter(ID, CSS, { stagger: 0.1, ...options }, {
+        by: "words",
+        duration: 0.45,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-ink)" },
+        needs: { cover: true },
+    });
+}

package/dist/text/effects/enter/enterRedact.schema.d.ts

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

package/dist/text/effects/enter/enterRedact.schema.js

@@ -0,0 +1,13 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_REDACT_SCHEMA = defineSchema()({
+    id: "enterRedact",
+    family: "text",
+    factory: "enterRedact",
+    fields: {
+        by: textByField("words"),
+        ...textEnterFields({ duration: 0.45, stagger: 0.1 }),
+        from: textFromField(),
+        color: { kind: "color", label: "Bar colour", default: "var(--color-sx-ink)" },
+    },
+});

package/dist/text/effects/enter/enterRise.d.ts

@@ -0,0 +1,8 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export interface EnterRiseOptions extends EnterOptions {
+    /** How far below each piece starts, in em. Default `0.6`. */
+    readonly distance?: number;
+}
+/** Each piece fades in as it rises into place, one after another. The classic heading entrance. */
+export declare function enterRise(options?: EnterRiseOptions): TextEffect;

package/dist/text/effects/enter/enterRise.js

@@ -0,0 +1,8 @@
+import { enter, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterRise";
+const CSS = enter(ID, { from: `opacity: 0; translate: 0 ${v(ID, "distance")};` });
+/** Each piece fades in as it rises into place, one after another. The classic heading entrance. */
+export function enterRise(options = {}) {
+    return defineEnter(ID, CSS, options, { by: "words", duration: 0.6, vars: { [varName(ID, "distance")]: `${options.distance ?? 0.6}em` } });
+}

package/dist/text/effects/enter/enterRise.schema.d.ts

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

package/dist/text/effects/enter/enterRise.schema.js

@@ -0,0 +1,13 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_RISE_SCHEMA = defineSchema()({
+    id: "enterRise",
+    family: "text",
+    factory: "enterRise",
+    fields: {
+        by: textByField("words"),
+        ...textEnterFields({ duration: 0.6 }),
+        from: textFromField(),
+        distance: { kind: "number", label: "Distance", min: 0, max: 3, step: 0.05, unit: "em", default: 0.6 },
+    },
+});