@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/text/runtime/scrub.js

@@ -0,0 +1,81 @@
+// The scroll effects' fallback, where a native scroll timeline can't drive the text (no support, or an ancestor with
+// `overflow: hidden`). It marks the text `data-sx-scroll="js"` (the native animations stop) and writes two numbers on
+// it, at most once per frame, only when they changed and only near the screen:
+// - `--sx-p`: the `cover` progress, 0 when the text's top reaches the bottom of the screen, 1 when its bottom leaves the
+//   top (what a native `view()` timeline calls cover 0% to 100%);
+// - `--sx-pc`: the `contain` progress of a text taller than the screen (a pinned one): 0 when its top reaches the top, 1
+//   when its bottom reaches the bottom.
+// No `motion` here. Text never imports this: the scroll effects hand it over when they are made (`provideScrub`).
+import { nativeScrollTimelineWorks } from "../../backgrounds/runtime/nativeScroll.js";
+import { runtimes } from "./slots.js";
+const clamp01 = (n) => (n <= 0 ? 0 : n >= 1 ? 1 : n);
+/** The cover progress of a box at `top`, `height` high, in a screen `viewport` high. Pure; tested. */
+export const coverProgress = (top, height, viewport) => clamp01((viewport - top) / (viewport + height));
+/** The contain progress: through the part of the scroll where the box covers the screen. Pure; tested. */
+export function containProgress(top, height, viewport) {
+    const travel = height - viewport;
+    return travel > 0 ? clamp01(-top / travel) : top <= 0 ? 1 : 0;
+}
+/** Starts the fallback on the text when it needs one. Returns what stops it. */
+export function attachScrub(el) {
+    if (nativeScrollTimelineWorks(el) || window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+        return () => { };
+    el.setAttribute("data-sx-scroll", "js");
+    let frame = 0;
+    let near = true;
+    let last = "";
+    // a native view timeline leaves the page's scroll-padding (a sticky header) out of the screen; so does the twin.
+    // Read on start and resize only: reading styles every frame would force a style pass each time
+    let insetTop = 0;
+    let view = window.innerHeight;
+    const readView = () => {
+        const s = getComputedStyle(document.documentElement);
+        insetTop = Number.parseFloat(s.scrollPaddingTop) || 0;
+        view = window.innerHeight - insetTop - (Number.parseFloat(s.scrollPaddingBottom) || 0);
+    };
+    readView();
+    const measure = () => {
+        frame = 0;
+        const r = el.getBoundingClientRect();
+        const top = r.top - insetTop;
+        const p = Math.round(coverProgress(top, r.height, view) * 10000) / 10000;
+        const pc = Math.round(containProgress(top, r.height, view) * 10000) / 10000;
+        const now = `${p} ${pc}`;
+        if (now === last)
+            return;
+        last = now;
+        el.style.setProperty("--sx-p", String(p));
+        el.style.setProperty("--sx-pc", String(pc));
+    };
+    const schedule = () => {
+        if (near && !frame)
+            frame = requestAnimationFrame(measure);
+    };
+    const io = typeof IntersectionObserver === "undefined"
+        ? undefined
+        : new IntersectionObserver(([entry]) => {
+            near = !!entry?.isIntersecting;
+            schedule();
+        }, { rootMargin: "25% 0px" });
+    io?.observe(el);
+    measure();
+    const onResize = () => {
+        readView();
+        schedule();
+    };
+    window.addEventListener("scroll", schedule, { passive: true, capture: true });
+    window.addEventListener("resize", onResize);
+    return () => {
+        io?.disconnect();
+        cancelAnimationFrame(frame);
+        window.removeEventListener("scroll", schedule, { capture: true });
+        window.removeEventListener("resize", onResize);
+        el.removeAttribute("data-sx-scroll");
+        el.style.removeProperty("--sx-p");
+        el.style.removeProperty("--sx-pc");
+    };
+}
+/** Hands the fallback to Text. Every scroll effect's factory calls it, so the code comes with the effects. */
+export function provideScrub() {
+    runtimes.scrub ?? (runtimes.scrub = attachScrub);
+}

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

@@ -0,0 +1,9 @@
+export declare const runtimes: {
+    /** The scroll effects' fallback where no native scroll timeline runs (`attachScrub`). */
+    scrub?: (el: HTMLElement) => () => void;
+    /**
+     * What this device can carry, 0 (low) to 2 (high), for the `mid` / `high` effects (`provideTier`). Without it every
+     * heavy effect wears its fallback: the safe choice for a page whose effects were made on the server.
+     */
+    tier?: () => number;
+};

package/dist/text/runtime/slots.js

@@ -0,0 +1,4 @@
+// Runtimes an effect hands to Text when its factory is called, so Text itself carries none of their code. A page whose
+// effects are made in the browser has them; a page that makes them only on the server (a Server Component) does not,
+// and those effects keep their plain-CSS path (a native scroll timeline) or rest in their final pose.
+export const runtimes = {};

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

@@ -0,0 +1,2 @@
+/** Makes the device check available to Text. Safe to call from every factory: it only ever sets the same function. */
+export declare function provideTier(): void;

package/dist/text/runtime/tier.js

@@ -0,0 +1,11 @@
+// The device check for the heavy text effects. Each `mid` / `high` factory calls provideTier(), which puts it in
+// runtimes.tier: Text itself never imports it, so a page of light effects downloads none of it (Text has a 6 KB budget).
+import { classifyTier, readTierSignals } from "../../backgrounds/runtime/tier.js";
+import { runtimes } from "./slots.js";
+/** Detected once per page: the check makes a throwaway WebGL context. */
+let detected;
+const RANK = { low: 0, mid: 1, high: 2 };
+/** Makes the device check available to Text. Safe to call from every factory: it only ever sets the same function. */
+export function provideTier() {
+    runtimes.tier ?? (runtimes.tier = () => (detected ?? (detected = RANK[classifyTier(readTierSignals())])));
+}

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

@@ -0,0 +1,6 @@
+import { type RefObject } from "react";
+/**
+ * While the text is on screen: `data-sx-text-on` (loops pause without it) and its videos play. Off screen, and under
+ * reduced motion, they stop. Runs only for a text with a loop or a video.
+ */
+export declare function useOnScreen(ref: RefObject<HTMLElement | null>, enabled: boolean): void;

package/dist/text/runtime/useOnScreen.js

@@ -0,0 +1,42 @@
+"use client";
+import { useEffect } from "react";
+/**
+ * While the text is on screen: `data-sx-text-on` (loops pause without it) and its videos play. Off screen, and under
+ * reduced motion, they stop. Runs only for a text with a loop or a video.
+ */
+export function useOnScreen(ref, enabled) {
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !enabled)
+            return;
+        const still = window.matchMedia("(prefers-reduced-motion: reduce)");
+        let on = false;
+        const apply = () => {
+            for (const video of el.querySelectorAll("video")) {
+                if (on && !still.matches)
+                    void video.play().catch(() => { });
+                else
+                    video.pause();
+            }
+        };
+        const set = (next) => {
+            on = next;
+            if (on)
+                el.setAttribute("data-sx-text-on", "");
+            else
+                el.removeAttribute("data-sx-text-on");
+            apply();
+        };
+        if (typeof IntersectionObserver === "undefined") {
+            set(true);
+            return;
+        }
+        const io = new IntersectionObserver(([entry]) => set(!!entry?.isIntersecting));
+        io.observe(el);
+        still.addEventListener("change", apply);
+        return () => {
+            io.disconnect();
+            still.removeEventListener("change", apply);
+        };
+    }, [ref, enabled]);
+}

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

@@ -0,0 +1,13 @@
+/**
+ * The page-wide pause for text that keeps moving (`WordCycle`, `Typewriter`), for a site's own button:
+ *
+ * ```tsx
+ * const [paused, setPaused] = usePauseLoops();
+ * <button type="button" aria-pressed={paused} onClick={() => setPaused(!paused)}>
+ *   {paused ? "Play animations" : "Pause animations"}
+ * </button>
+ * ```
+ *
+ * WCAG 2.2.2 asks for a way to pause motion that runs past 5 s; one control on the page covers every loop.
+ */
+export declare function usePauseLoops(): readonly [boolean, (paused: boolean) => void];

package/dist/text/runtime/usePauseLoops.js

@@ -0,0 +1,20 @@
+"use client";
+import { useCallback, useSyncExternalStore } from "react";
+import { loopsPaused, onLoopsPaused, setLoopsPaused } from "./loops.js";
+/**
+ * The page-wide pause for text that keeps moving (`WordCycle`, `Typewriter`), for a site's own button:
+ *
+ * ```tsx
+ * const [paused, setPaused] = usePauseLoops();
+ * <button type="button" aria-pressed={paused} onClick={() => setPaused(!paused)}>
+ *   {paused ? "Play animations" : "Pause animations"}
+ * </button>
+ * ```
+ *
+ * WCAG 2.2.2 asks for a way to pause motion that runs past 5 s; one control on the page covers every loop.
+ */
+export function usePauseLoops() {
+    const paused = useSyncExternalStore(onLoopsPaused, loopsPaused, () => false);
+    const set = useCallback((next) => setLoopsPaused(next), []);
+    return [paused, set];
+}

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

@@ -0,0 +1,6 @@
+import { type RefObject } from "react";
+/**
+ * Starts pointer tracking on a text whose effects read the pointer. Where there is no mouse nothing runs. Imported
+ * statically: the tracker is 0.4 KB, less than the loader a bundler adds for a dynamic import (measured: 1.3 KB).
+ */
+export declare function useTextPointer(ref: RefObject<HTMLElement | null>, enabled: boolean): void;

package/dist/text/runtime/useTextPointer.js

@@ -0,0 +1,15 @@
+"use client";
+import { useEffect } from "react";
+import { attachPointer } from "./attachPointer.js";
+/**
+ * Starts pointer tracking on a text whose effects read the pointer. Where there is no mouse nothing runs. Imported
+ * statically: the tracker is 0.4 KB, less than the loader a bundler adds for a dynamic import (measured: 1.3 KB).
+ */
+export function useTextPointer(ref, enabled) {
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !enabled || !window.matchMedia("(hover: hover) and (pointer: fine)").matches)
+            return;
+        return attachPointer(el);
+    }, [ref, enabled]);
+}

package/dist/text/split.d.ts

@@ -0,0 +1,22 @@
+export interface SplitPiece {
+    /** The text of the piece, or the white space between pieces. */
+    readonly text: string;
+    /** True for white space (kept as text between the pieces, so lines still wrap there). */
+    readonly space: boolean;
+}
+/** True when `text` holds a script whose letters must never be cut apart (or spaced out). */
+export declare const isJoined: (text: string) => boolean;
+/** `text` as pieces and the white space between them, in order; joining every `text` gives `text` back. */
+export declare function splitWords(text: string, locale?: string): SplitPiece[];
+/**
+ * Which line each piece is on, from the pieces' measured tops (px): a new line
+ * starts where a piece sits clearly lower than the line so far. Returns the
+ * index of the first piece of each line.
+ */
+export declare function lineStarts(tops: readonly number[], tolerance?: number): number[];
+/** What a reader sees as one character (an accent, an emoji made of several code points). */
+export declare function graphemes(text: string): string[];
+/** A word's letters: its graphemes, or the whole word in one piece when its script joins or combines. */
+export declare const lettersOf: (word: string) => string[];
+/** `text` as the pieces that move, white space kept as pieces of its own. Joining them gives `text` back. */
+export declare function splitLabel(text: string): string[];

package/dist/text/split.js

@@ -0,0 +1,84 @@
+// ---------------------------------------------------------------------------
+// The one text splitter: Text, SplitText and the button labels all cut text
+// here. Pure (tested).
+//
+// The pieces are what a line can never break inside: runs of text between
+// spaces, so a word keeps its punctuation ("Hello,"). Scripts written without
+// spaces (Chinese, Japanese, Thai, Lao, Khmer, Myanmar) are cut into words
+// with Intl.Segmenter, where the browser has it. Letters are graphemes (what a
+// reader sees as one character), and only where letters stand alone: a word in
+// a joined or combining script (Arabic, Devanagari …) stays whole, because its
+// letters only look right while joined.
+// ---------------------------------------------------------------------------
+/** Characters of scripts that put no spaces between words. */
+const SPACELESS = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Thai}\p{Script=Lao}\p{Script=Khmer}\p{Script=Myanmar}]/u;
+/** Characters of scripts that move by the run between spaces: joined, combining or spaceless. */
+const WHOLE = /[\p{Script=Arabic}\p{Script=Syriac}\p{Script=Nko}\p{Script=Mandaic}\p{Script=Mongolian}\p{Script=Devanagari}\p{Script=Bengali}\p{Script=Gurmukhi}\p{Script=Gujarati}\p{Script=Oriya}\p{Script=Tamil}\p{Script=Telugu}\p{Script=Kannada}\p{Script=Malayalam}\p{Script=Sinhala}\p{Script=Tibetan}\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Thai}\p{Script=Lao}\p{Script=Khmer}\p{Script=Myanmar}]/u;
+/** True when `text` holds a script whose letters must never be cut apart (or spaced out). */
+export const isJoined = (text) => WHOLE.test(text);
+function segmentsOf(text, locale) {
+    const Segmenter = Intl.Segmenter;
+    if (!Segmenter)
+        return null;
+    return [...new Segmenter(locale, { granularity: "word" }).segment(text)];
+}
+/** `text` as pieces and the white space between them, in order; joining every `text` gives `text` back. */
+export function splitWords(text, locale) {
+    const out = [];
+    // split() with a capture group alternates text and white space
+    for (const run of text.split(/(\s+)/u)) {
+        if (!run)
+            continue;
+        if (/^\s+$/u.test(run)) {
+            out.push({ text: run, space: true });
+            continue;
+        }
+        if (!SPACELESS.test(run)) {
+            out.push({ text: run, space: false });
+            continue;
+        }
+        // a run with spaceless script in it: its words, as the Segmenter sees them
+        const segments = segmentsOf(run, locale);
+        if (!segments) {
+            out.push({ text: run, space: false });
+            continue;
+        }
+        const start = out.length;
+        for (const s of segments) {
+            const last = out.length > start ? out[out.length - 1] : undefined;
+            // a word-like segment in spaceless script starts a piece; punctuation stays with the word before it
+            if (last && !(s.isWordLike && SPACELESS.test(s.segment.charAt(0))))
+                out[out.length - 1] = { text: last.text + s.segment, space: false };
+            else
+                out.push({ text: s.segment, space: false });
+        }
+    }
+    return out;
+}
+/**
+ * Which line each piece is on, from the pieces' measured tops (px): a new line
+ * starts where a piece sits clearly lower than the line so far. Returns the
+ * index of the first piece of each line.
+ */
+export function lineStarts(tops, tolerance = 2) {
+    const starts = [];
+    let current = Number.NEGATIVE_INFINITY;
+    tops.forEach((top, i) => {
+        if (i === 0 || top > current + tolerance) {
+            starts.push(i);
+            current = top;
+        }
+    });
+    return starts;
+}
+/** What a reader sees as one character (an accent, an emoji made of several code points). */
+export function graphemes(text) {
+    const Segmenter = Intl.Segmenter;
+    return Segmenter ? [...new Segmenter(undefined, { granularity: "grapheme" }).segment(text)].map((s) => s.segment) : Array.from(text);
+}
+/** A word's letters: its graphemes, or the whole word in one piece when its script joins or combines. */
+export const lettersOf = (word) => (WHOLE.test(word) ? [word] : graphemes(word));
+/** `text` as the pieces that move, white space kept as pieces of its own. Joining them gives `text` back. */
+export function splitLabel(text) {
+    return text.split(/(\s+)/u).filter(Boolean).flatMap((run) => (/^\s/u.test(run) ? [run] : lettersOf(run)));
+}

package/dist/text/three/Text3D.d.ts

@@ -0,0 +1,34 @@
+import { type CSSProperties, type ElementType } from "react";
+export interface Text3DProps {
+    /** The text: one line reads best. */
+    readonly children: string;
+    /**
+     * A typeface JSON file for three's `FontLoader` (convert a font with facetype.js, or use one of three's own, such as
+     * `helvetiker_bold.typeface.json`). Same origin, or served with CORS. Latin and the scripts it covers; Arabic and the
+     * other joined scripts stay as HTML text, which three can't join.
+     */
+    readonly font: string;
+    /** The element to render. Default `p`. */
+    readonly as?: ElementType;
+    /** How deep the letters are, as a share of their height. Default `0.3`. */
+    readonly depth?: number;
+    /** The letters' colour. Default the text's own. */
+    readonly color?: string;
+    /** How far the text leans towards the mouse, in degrees (`0`: still). Default `18`. */
+    readonly tilt?: number;
+    /** Sway gently on its own. Default `true`. */
+    readonly sway?: boolean;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/**
+ * Real 3D letters (Three.js `TextGeometry`) that sway and lean towards the mouse. Until they are ready, and on any device
+ * below the high tier, without WebGL, under reduced motion (drawn once, still), or in a joined script, it is the HTML
+ * text with an extruded shadow (`solidShadow`), which screen readers and search engines read in every case.
+ *
+ * ```tsx
+ * import { Text3D } from "@sharedex/ui/three";
+ * <Text3D as="h1" font="/fonts/display.typeface.json" className="text-7xl">DEPTH</Text3D>
+ * ```
+ */
+export declare function Text3D({ children, font, as, depth, color, tilt, sway, className, style }: Text3DProps): import("react").JSX.Element;

package/dist/text/three/Text3D.js

@@ -0,0 +1,158 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import * as THREE from "three";
+import { FontLoader } from "three/addons/loaders/FontLoader.js";
+import { TextGeometry } from "three/addons/geometries/TextGeometry.js";
+import { styleHref } from "../../backgrounds/hosts/CssHost.js";
+import { createColorResolver } from "../../backgrounds/runtime/color.js";
+import { classifyTier, readTierSignals } from "../../backgrounds/runtime/tier.js";
+import { solidShadow } from "../effects/solid/solidShadow.js";
+import { MOUSE } from "../effects/pointer/kit.js";
+import { isJoined } from "../split.js";
+import { Text } from "../Text.js";
+const SHADOW = solidShadow();
+const CSS = `@layer components {
+  :where([data-sx-text3d] > canvas) { position: absolute; inset: -0.4em; inline-size: calc(100% + 0.8em); block-size: calc(100% + 0.8em); pointer-events: none; }
+  :where([data-sx-text3d-drawn] > :not(canvas)) { opacity: 0; }
+}`;
+/** One load per font file, shared by every Text3D that uses it. */
+const fonts = new Map();
+const loadFont = (url) => {
+    let p = fonts.get(url);
+    if (!p) {
+        p = new FontLoader().loadAsync(url);
+        fonts.set(url, p);
+    }
+    return p;
+};
+/**
+ * Real 3D letters (Three.js `TextGeometry`) that sway and lean towards the mouse. Until they are ready, and on any device
+ * below the high tier, without WebGL, under reduced motion (drawn once, still), or in a joined script, it is the HTML
+ * text with an extruded shadow (`solidShadow`), which screen readers and search engines read in every case.
+ *
+ * ```tsx
+ * import { Text3D } from "@sharedex/ui/three";
+ * <Text3D as="h1" font="/fonts/display.typeface.json" className="text-7xl">DEPTH</Text3D>
+ * ```
+ */
+export function Text3D({ children, font, as = "p", depth = 0.3, color, tilt = 18, sway = true, className, style }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || isJoined(children) || classifyTier(readTierSignals()) !== "high")
+            return;
+        const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        const mouse = window.matchMedia(MOUSE).matches && tilt > 0 && !still;
+        let gone = false;
+        let stop = () => { };
+        void loadFont(font)
+            .then((face) => {
+            if (gone)
+                return;
+            const canvas = document.createElement("canvas");
+            canvas.setAttribute("aria-hidden", "true");
+            let renderer;
+            try {
+                renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true, powerPreference: "low-power" });
+            }
+            catch {
+                return;
+            }
+            el.appendChild(canvas);
+            renderer.setPixelRatio(Math.min(2, window.devicePixelRatio || 1));
+            const resolver = createColorResolver(el);
+            const [r = 0, g = 0, b = 0] = resolver.resolve(color ?? getComputedStyle(el).color);
+            const geometry = new TextGeometry(children, {
+                font: face, size: 1, depth, curveSegments: 6,
+                bevelEnabled: true, bevelThickness: 0.02, bevelSize: 0.015, bevelSegments: 2,
+            });
+            geometry.center();
+            geometry.computeBoundingBox();
+            const box = geometry.boundingBox ?? new THREE.Box3();
+            const width = box.max.x - box.min.x;
+            const material = new THREE.MeshStandardMaterial({ color: new THREE.Color(r / 255, g / 255, b / 255), roughness: 0.45, metalness: 0.15 });
+            const mesh = new THREE.Mesh(geometry, material);
+            const scene = new THREE.Scene();
+            scene.add(mesh, new THREE.AmbientLight(0xffffff, 1.4));
+            const key = new THREE.DirectionalLight(0xffffff, 2.2);
+            key.position.set(-2, 3, 5);
+            scene.add(key);
+            const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 100);
+            // the letters fill the text's own width: the camera stands back as far as that takes
+            const fit = () => {
+                const w = Math.max(1, canvas.clientWidth);
+                const h = Math.max(1, canvas.clientHeight);
+                renderer.setSize(w, h, false);
+                camera.aspect = w / h;
+                const half = Math.tan(THREE.MathUtils.degToRad(camera.fov / 2));
+                camera.position.set(0, 0, width / 0.82 / (2 * half * camera.aspect) + depth);
+                camera.updateProjectionMatrix();
+            };
+            let frame = 0;
+            let on = false;
+            let lean = { x: 0, y: 0 };
+            let target = { x: 0, y: 0 };
+            const start = performance.now();
+            const draw = (now) => {
+                frame = 0;
+                const t = (now - start) / 1000;
+                lean = { x: lean.x + (target.x - lean.x) * 0.08, y: lean.y + (target.y - lean.y) * 0.08 };
+                mesh.rotation.set(lean.x, lean.y + (sway && !still ? Math.sin(t * 0.7) * 0.18 : 0), 0);
+                renderer.render(scene, camera);
+                el.setAttribute("data-sx-text3d-drawn", "");
+                if (on && !still)
+                    frame = requestAnimationFrame(draw);
+            };
+            const wake = () => {
+                if (!frame)
+                    frame = requestAnimationFrame(draw);
+            };
+            const io = new IntersectionObserver(([entry]) => {
+                on = !!entry?.isIntersecting;
+                if (on)
+                    wake();
+            });
+            const ro = new ResizeObserver(() => {
+                fit();
+                wake();
+            });
+            const move = (e) => {
+                const rect = el.getBoundingClientRect();
+                const rad = THREE.MathUtils.degToRad(tilt);
+                target = { x: ((e.clientY - rect.top) / rect.height - 0.5) * rad, y: ((e.clientX - rect.left) / rect.width - 0.5) * rad };
+            };
+            const leave = () => {
+                target = { x: 0, y: 0 };
+            };
+            fit();
+            io.observe(el);
+            ro.observe(canvas);
+            if (mouse) {
+                el.addEventListener("pointermove", move, { passive: true });
+                el.addEventListener("pointerleave", leave);
+            }
+            stop = () => {
+                cancelAnimationFrame(frame);
+                io.disconnect();
+                ro.disconnect();
+                el.removeEventListener("pointermove", move);
+                el.removeEventListener("pointerleave", leave);
+                geometry.dispose();
+                material.dispose();
+                renderer.dispose();
+                renderer.forceContextLoss();
+                resolver.dispose();
+                canvas.remove();
+                el.removeAttribute("data-sx-text3d-drawn");
+            };
+        })
+            // a font that won't load: the HTML text stays
+            .catch(() => undefined);
+        return () => {
+            gone = true;
+            stop();
+        };
+    }, [children, font, depth, color, tilt, sway]);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { href: styleHref("text3d", CSS), precedence: "sx", children: CSS }), _jsx(Text, { ref: ref, as: as, effect: SHADOW, "data-sx-text3d": "", className: className, style: style, children: children })] }));
+}

package/dist/text/type/Typewriter.d.ts

@@ -0,0 +1,42 @@
+import { type CSSProperties, type ElementType } from "react";
+export interface TypewriterProps {
+    /** What it types, one line after another. */
+    readonly lines: readonly string[];
+    /**
+     * `"js"` (default): any font, several lines, pauses and erasing. `"css"`: no script at all; the first line only, typed
+     * once (or typed and untyped with `erase`). It steps one letter-width at a time, so it needs a monospace font.
+     */
+    readonly mode?: "js" | "css";
+    /** Delete each line letter by letter before typing the next. Default `false`: the next line replaces it. */
+    readonly erase?: boolean;
+    /** Start again after the last line. Default `true` with several lines, `false` with one. */
+    readonly loop?: boolean;
+    /** Letters per second. Default `14`. */
+    readonly speed?: number;
+    /** Seconds a full line stays. Default `1.6`. */
+    readonly pause?: number;
+    /** Seconds before it starts. Default `0`. */
+    readonly delay?: number;
+    /** Show the caret. Default `true`. */
+    readonly caret?: boolean;
+    /** `"terminal"`: a monospace font, a `$` prompt and a block caret. */
+    readonly preset?: "terminal";
+    /** Start when it comes on screen (default) or as soon as the page loads. */
+    readonly start?: "inView" | "mount";
+    /** The element to render. Default `span`. */
+    readonly as?: ElementType;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/**
+ * Types text out letter by letter, line after line.
+ *
+ * ```tsx
+ * <h1>We build <Typewriter lines={["websites", "apps", "brands"]} erase /></h1>
+ * ```
+ *
+ * Every line is in the HTML, stacked in one place, so search engines read them all and the box keeps the size of the
+ * longest: nothing around it moves as it types. Screen readers read the lines once, not every letter. Arabic is typed
+ * letter by letter and joins up as it goes, as real typing does. Under reduced motion it shows the first line.
+ */
+export declare function Typewriter({ lines, mode, erase, loop, speed, pause, delay, caret, preset, start, as: Tag, className, style, }: TypewriterProps): import("react").JSX.Element;