@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/text/effects/warp/warpShader.js

@@ -0,0 +1,27 @@
+import { provideTier } from "../../runtime/tier.js";
+import { SHOW, at, defineText, hostOf, layerOf, whenOn } from "../kit.js";
+import { attachShader } from "./shader.js";
+const ID = "warpShader";
+// The WebGL canvas stands in for the text once it has drawn, with room round it to bend into; until then, without
+// scripts, and where WebGL can't run, the HTML text shows.
+const LOOK = `  ${at(`${hostOf(ID)} ${layerOf(ID)}`)} { display: block; inset: -0.3em; }
+  ${at(`${hostOf(ID)}[data-sx-text-drawn] ${SHOW}`)} { opacity: 0; }`;
+// Without WebGL (`-lite`): on hover the text leans in a quick wobble, plain CSS.
+const LITE = `${ID}-lite`;
+const LITE_CSS = `  @keyframes sx-text-${LITE} {
+    25% { transform: skewX(-6deg); }
+    55% { transform: skewX(3deg); }
+    80% { transform: skewX(-1deg); }
+  }
+${whenOn(LITE, SHOW, `animation: sx-text-${LITE} 0.6s ease-out;`)}`;
+/**
+ * The letters ripple out from under the mouse and bend with the scroll's speed, drawn with a WebGL shader. High tier:
+ * other devices get a CSS wobble on hover (`warpShader-lite`). It carries code: the page needs `"use client"`.
+ */
+export function warpShader(options = {}) {
+    provideTier();
+    const settings = { strength: options.strength ?? 10, scroll: options.scroll ?? 1 };
+    const program = { attach: (el) => attachShader(el, ID, settings), signature: JSON.stringify(settings) };
+    const lite = defineText(LITE, LITE_CSS, { claims: ["move"] });
+    return defineText(ID, "", { tier: "high", fallback: lite, look: LOOK, layers: [{}], claims: ["paint"], program });
+}

package/dist/text/effects/warp/warpShader.schema.d.ts

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

package/dist/text/effects/warp/warpShader.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const WARP_SHADER_SCHEMA = defineSchema()({
+    id: "warpShader",
+    family: "text",
+    factory: "warpShader",
+    fields: {
+        strength: { kind: "number", label: "Ripple", min: 0, max: 40, step: 1, unit: "px", default: 10 },
+        scroll: { kind: "number", label: "Scroll bend", min: 0, max: 3, step: 0.1, default: 1 },
+    },
+});

package/dist/text/effects/warp/warpSquiggle.d.ts

@@ -0,0 +1,12 @@
+import type { TextEffect } from "../../types.js";
+export interface WarpSquiggleOptions {
+    /** How far the outline wobbles, in px. Default `3`. */
+    readonly strength?: number;
+    /** Seconds the three wobbles take to cycle. Default `0.3`. */
+    readonly duration?: number;
+}
+/**
+ * The letters' outlines wobble without end, like a hand-drawn animation (three SVG displacement filters stepped through).
+ * Mid tier: a weaker device gets letters that twitch instead (`warpSquiggle-lite`).
+ */
+export declare function warpSquiggle(options?: WarpSquiggleOptions): TextEffect;

package/dist/text/effects/warp/warpSquiggle.js

@@ -0,0 +1,47 @@
+import { provideTier } from "../../runtime/tier.js";
+import { SHOW, defineText, loop, v, varName } from "../kit.js";
+import { LETTER, LETTER_I } from "../pointer/kit.js";
+import { defs, defsCss, filterId } from "./kit.js";
+const ID = "warpSquiggle";
+const STEPS = [1, 2, 3];
+/** One wobble: rough noise that pushes the letters' edges about, a different seed each, like a hand-drawn frame. */
+const wobble = (n, strength) => ({
+    tag: "filter",
+    attrs: { id: filterId(ID, strength, n), x: "-5%", y: "-20%", width: "110%", height: "140%" },
+    children: [
+        { tag: "feTurbulence", attrs: { type: "turbulence", "base-frequency": 0.03, "num-octaves": 2, seed: n * 7, result: "noise" } },
+        { tag: "feDisplacementMap", attrs: { in: "SourceGraphic", in2: "noise", scale: strength, "x-channel-selector": "R", "y-channel-selector": "G" } },
+    ],
+});
+// The filters never change; the text steps through the three, so it looks drawn by hand, frame after frame.
+const CSS = `${defsCss(ID)}
+  @keyframes sx-text-${ID} {
+${STEPS.map((n, i) => `    ${Math.round((i * 100) / 3)}% { filter: var(${varName(ID, `f${n}`)}); }`).join("\n")}
+  }
+${loop(ID, SHOW, `sx-text-${ID} ${v(ID, "time")} steps(1) infinite`)}`;
+// Without filters (`-lite`): each letter twitches a little, in steps, out of time with its neighbours.
+const LITE = `${ID}-lite`;
+const LITE_CSS = `  @keyframes sx-text-${LITE} {
+    0% { transform: rotate(-1.5deg); }
+    33% { transform: rotate(1deg) translateY(0.02em); }
+    67% { transform: rotate(0.5deg) translateY(-0.02em); }
+  }
+${loop(LITE, LETTER, `sx-text-${LITE} ${v(LITE, "time")} steps(1) calc(${LETTER_I} * -0.07s) infinite`)}`;
+/**
+ * The letters' outlines wobble without end, like a hand-drawn animation (three SVG displacement filters stepped through).
+ * Mid tier: a weaker device gets letters that twitch instead (`warpSquiggle-lite`).
+ */
+export function warpSquiggle(options = {}) {
+    provideTier();
+    const strength = options.strength ?? 3;
+    const time = `${options.duration ?? 0.3}s`;
+    const lite = defineText(LITE, LITE_CSS, { vars: { [varName(LITE, "time")]: time }, claims: ["move"], needs: { split: "chars", loop: true } });
+    return defineText(ID, CSS, {
+        tier: "mid",
+        fallback: lite,
+        vars: { [varName(ID, "time")]: time, ...Object.fromEntries(STEPS.map((n) => [varName(ID, `f${n}`), `url(#${filterId(ID, strength, n)})`])) },
+        layers: [defs(STEPS.map((n) => wobble(n, strength)))],
+        claims: ["move"],
+        needs: { loop: true },
+    });
+}

package/dist/text/effects/warp/warpSquiggle.schema.d.ts

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

package/dist/text/effects/warp/warpSquiggle.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const WARP_SQUIGGLE_SCHEMA = defineSchema()({
+    id: "warpSquiggle",
+    family: "text",
+    factory: "warpSquiggle",
+    fields: {
+        strength: { kind: "number", label: "Wobble", min: 1, max: 12, step: 0.5, unit: "px", default: 3 },
+        duration: { kind: "number", label: "Cycle", min: 0.1, max: 2, step: 0.05, unit: "s", default: 0.3 },
+    },
+});

package/dist/text/effects/warp/warpWave.d.ts

@@ -0,0 +1,14 @@
+import type { TextEffect } from "../../types.js";
+export type WarpWaveKind = "wave" | "bounce" | "swing" | "breathe";
+export interface WarpWaveOptions {
+    /** `"wave"` (default): letters bob up and down in a wave. `"bounce"`: they hop. `"swing"`: they sway from the top. `"breathe"`: they grow and shrink. */
+    readonly kind?: WarpWaveKind;
+    /** How much, 1 the default. */
+    readonly strength?: number;
+    /** Seconds one letter's cycle takes. Default `1.6`. */
+    readonly duration?: number;
+    /** Seconds each letter runs behind the one before it. Default `0.08`. */
+    readonly stagger?: number;
+}
+/** The letters move without end: a wave, a hop, a sway or a breath, each a step behind the last. Plain CSS. */
+export declare function warpWave(options?: WarpWaveOptions): TextEffect;

package/dist/text/effects/warp/warpWave.js

@@ -0,0 +1,36 @@
+import { at, defineText, hostOf, loop, v, varName } from "../kit.js";
+import { LETTER, LETTER_I } from "../pointer/kit.js";
+const ID = "warpWave";
+const S = v(ID, "strength");
+/** Each kind's keyframes body and where its letters turn or grow from. */
+const KINDS = {
+    wave: { frames: `50% { transform: translateY(calc(${S} * -0.15em)); }`, origin: "50% 100%", ease: "ease-in-out" },
+    bounce: {
+        frames: `30% { transform: translateY(calc(${S} * -0.22em)); animation-timing-function: ease-in; } 50% { transform: none; }`,
+        origin: "50% 100%",
+        ease: "ease-out",
+    },
+    swing: { frames: `25% { transform: rotate(calc(${S} * 8deg)); } 75% { transform: rotate(calc(${S} * -8deg)); }`, origin: "50% 0%", ease: "ease-in-out" },
+    breathe: { frames: `50% { transform: scale(calc(1 + ${S} * 0.12)); }`, origin: "50% 60%", ease: "ease-in-out" },
+};
+// Every letter (every word, in a joined script) runs the same cycle, each a step behind the one before: a negative delay,
+// so the wave is already under way on the first frame instead of starting from a still line.
+function css(kind) {
+    const k = KINDS[kind];
+    return `  @keyframes sx-text-${ID}-${kind} { ${k.frames} }
+  ${at(`${hostOf(ID)} ${LETTER}`)} { transform-origin: ${k.origin}; }
+${loop(ID, LETTER, `sx-text-${ID}-${kind} ${v(ID, "time")} ${k.ease} calc(${LETTER_I} * ${v(ID, "stagger")} * -1) infinite`)}`;
+}
+/** The letters move without end: a wave, a hop, a sway or a breath, each a step behind the last. Plain CSS. */
+export function warpWave(options = {}) {
+    const kind = options.kind ?? "wave";
+    return defineText(ID, css(kind), {
+        vars: {
+            [varName(ID, "strength")]: options.strength ?? 1,
+            [varName(ID, "time")]: `${options.duration ?? 1.6}s`,
+            [varName(ID, "stagger")]: `${options.stagger ?? 0.08}s`,
+        },
+        claims: ["move"],
+        needs: { split: "chars", loop: true },
+    });
+}

package/dist/text/effects/warp/warpWave.schema.d.ts

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

package/dist/text/effects/warp/warpWave.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const WARP_WAVE_SCHEMA = defineSchema()({
+    id: "warpWave",
+    family: "text",
+    factory: "warpWave",
+    fields: {
+        kind: { kind: "choice", label: "Kind", values: ["wave", "bounce", "swing", "breathe"], labels: { wave: "Wave", bounce: "Bounce", swing: "Swing", breathe: "Breathe" }, default: "wave" },
+        strength: { kind: "number", label: "Strength", min: 0, max: 3, step: 0.1, default: 1 },
+        duration: { kind: "number", label: "Cycle", min: 0.4, max: 6, step: 0.1, unit: "s", default: 1.6 },
+        stagger: { kind: "number", label: "Stagger", min: 0, max: 0.4, step: 0.01, unit: "s", default: 0.08 },
+    },
+});

package/dist/text/number/NumberRoll.d.ts

@@ -0,0 +1,49 @@
+import { type CSSProperties, type ElementType } from "react";
+import { type CountdownUnit } from "./format.js";
+export interface NumberRollProps {
+    /** The number to show. Change it and the roll follows. */
+    readonly value?: number;
+    /** Count down to this moment instead (a `Date`, an ISO string, or ms since 1970), as `dd:hh:mm:ss`. */
+    readonly to?: Date | string | number;
+    /** Show the time of day instead, `hh:mm:ss`. */
+    readonly clock?: boolean;
+    /**
+     * - `count` (default): the number counts up (or down) to the value;
+     * - `spin`: each digit is a column that rolls to its digit, and only digits that change move;
+     * - `odometer`: the same, always rolling forward like a meter;
+     * - `slide`: the new value slides in, from below when it grows, from above when it shrinks.
+     */
+    readonly look?: "count" | "spin" | "odometer" | "slide";
+    /** When it first moves: once on screen (default), as the page loads, or only when `value` changes. */
+    readonly start?: "inView" | "mount" | "change";
+    /** What it starts from with `start` `inView` or `mount`. Default `0`. */
+    readonly from?: number;
+    /** Seconds a change takes. Default `1.6` for `count`, `0.6` otherwise. */
+    readonly duration?: number;
+    /** `Intl.NumberFormat` options: currency, percent, decimals, compact … */
+    readonly format?: Intl.NumberFormatOptions;
+    /** The locale for digits and separators (`"de-DE"`, `"ar-EG"` …). Default the visitor's. */
+    readonly locale?: string;
+    /** The countdown's units, largest first. Default days, hours, minutes, seconds. */
+    readonly units?: readonly CountdownUnit[];
+    /** The clock's time zone (`"Europe/Berlin"`). Default the visitor's. */
+    readonly timeZone?: string;
+    /** The element to render. Default `span`. */
+    readonly as?: ElementType;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/**
+ * A number that counts or rolls to its value: stats, prices, scores, a countdown, a clock.
+ *
+ * ```tsx
+ * <NumberRoll value={1250} format={{ style: "currency", currency: "EUR" }} />
+ * <NumberRoll value={price} look="spin" start="change" />
+ * <NumberRoll to="2027-01-01T00:00:00Z" look="spin" />
+ * ```
+ *
+ * The server renders the final value, so search engines and visitors without scripts read the real number; screen
+ * readers read it once, never the digits in between. Figures are all one width, so it never shakes. Under reduced
+ * motion it simply shows the value.
+ */
+export declare function NumberRoll({ value, to, clock, look, start, from, duration, format, locale, units, timeZone, as: Tag, className, style, }: NumberRollProps): import("react").JSX.Element;

package/dist/text/number/NumberRoll.js

@@ -0,0 +1,198 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { styleHref } from "../../backgrounds/hosts/CssHost.js";
+import { motionOnly } from "../../transitions/progress.js";
+import { reducedMotion, watchOnScreen } from "../runtime/onScreen.js";
+import { NUM_BASE_CSS, NUM_MOTION_CSS } from "./css.js";
+import { clockText, countAt, countdownText, digitGlyphs, formatNumber, odometerStep, partsOf } from "./format.js";
+const UNITS = ["days", "hours", "minutes", "seconds"];
+const seconds = (n) => `${Number(n.toFixed(3))}s`;
+/** Whether the value may show yet: false between mount and coming on screen, when it starts from `from`. */
+function useArmed(ref, active, start) {
+    const [armed, setArmed] = useState(true);
+    useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (!active || start === "change" || reducedMotion()) {
+            el.setAttribute("data-sx-live", "");
+            return;
+        }
+        // before the first paint: back to `from`, then roll once on screen
+        setArmed(false);
+        el.setAttribute("data-sx-live", "");
+        if (start === "mount") {
+            const frame = requestAnimationFrame(() => requestAnimationFrame(() => setArmed(true)));
+            return () => cancelAnimationFrame(frame);
+        }
+        const stop = watchOnScreen(el, (on) => {
+            if (!on)
+                return;
+            stop();
+            setArmed(true);
+        }, 0.3);
+        return stop;
+        // only on mount: later changes of `value` roll on their own
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return armed;
+}
+/** For a countdown or a clock: the time now, every second while on screen; `null` until mounted (server and first render). */
+function useNow(ref, active) {
+    const [now, setNow] = useState(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !active)
+            return;
+        el.setAttribute("data-sx-live", "");
+        let timer = 0;
+        const tick = () => {
+            setNow(Date.now());
+            // land on the next whole second
+            timer = window.setTimeout(tick, 1000 - (Date.now() % 1000) + 5);
+        };
+        const stop = watchOnScreen(el, (on) => {
+            window.clearTimeout(timer);
+            if (on)
+                tick();
+        });
+        return () => {
+            stop();
+            window.clearTimeout(timer);
+        };
+    }, [ref, active]);
+    return now;
+}
+/**
+ * A number that counts or rolls to its value: stats, prices, scores, a countdown, a clock.
+ *
+ * ```tsx
+ * <NumberRoll value={1250} format={{ style: "currency", currency: "EUR" }} />
+ * <NumberRoll value={price} look="spin" start="change" />
+ * <NumberRoll to="2027-01-01T00:00:00Z" look="spin" />
+ * ```
+ *
+ * The server renders the final value, so search engines and visitors without scripts read the real number; screen
+ * readers read it once, never the digits in between. Figures are all one width, so it never shakes. Under reduced
+ * motion it simply shows the value.
+ */
+export function NumberRoll({ value = 0, to, clock = false, look = "count", start = "inView", from = 0, duration, format, locale, units = UNITS, timeZone, as: Tag = "span", className, style, }) {
+    const ref = useRef(null);
+    const timed = to !== undefined || clock;
+    const target = to === undefined ? NaN : new Date(to).getTime();
+    const armed = useArmed(ref, !timed, start);
+    const now = useNow(ref, timed);
+    const shown = armed ? value : from;
+    const fmt = (n) => formatNumber(n, locale, format);
+    // which way it moved: a countdown always falls, a clock always rises
+    const before = useRef(shown);
+    const rising = to !== undefined ? false : clock ? true : shown >= before.current;
+    useEffect(() => {
+        before.current = shown;
+    }, [shown]);
+    // what shows now
+    const text = clock
+        ? now === null ? clockText(new Date(0), locale, "UTC").replace(/./g, (c) => (c === ":" ? c : digitGlyphs(locale)[0])) : clockText(new Date(now), locale, timeZone)
+        : timed
+            ? countdownText(now === null ? 0 : target - now, units, locale)
+            : fmt(shown);
+    // what screen readers and search engines read: the value, or the moment counted down to (in UTC, the same on the
+    // server and in the browser)
+    const read = clock ? "" : timed
+        ? Number.isFinite(target) ? new Intl.DateTimeFormat(locale, { year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit", timeZone: "UTC", timeZoneName: "short" }).format(target) : ""
+        : fmt(value);
+    useCount(ref, look === "count" && !timed, shown, fmt, duration ?? 1.6, armed);
+    const odometer = useOdometer(look === "odometer", text, locale);
+    const vars = { "--sx-num-time": seconds(duration ?? (look === "count" ? 1.6 : 0.6)), ...style };
+    const motion = motionOnly(NUM_MOTION_CSS);
+    let visual;
+    if (look === "spin" || look === "odometer")
+        visual = _jsx(Columns, { text: text, locale: locale, odometer: odometer });
+    else if (look === "slide")
+        visual = _jsx(Slide, { text: text, rising: rising });
+    else {
+        visual = (_jsxs(_Fragment, { children: [!timed ? _jsx("span", { "data-sx-num-size": "", children: fmt(from) }) : null, !timed ? _jsx("span", { "data-sx-num-size": "", children: fmt(value) }) : null, _jsx("span", { "data-sx-num-live": "", children: text })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("style", { href: styleHref("num-base", NUM_BASE_CSS), precedence: "sx", children: NUM_BASE_CSS }), _jsx("style", { href: styleHref("num-motion", motion), precedence: "sx", children: motion }), _jsxs(Tag, { ref: ref, "data-sx-num": look, "data-sx-num-wait": !timed && start !== "change" ? "" : undefined, "data-sx-num-jump": armed ? undefined : "", className: className, style: vars, children: [read ? _jsx("span", { "data-sx-text-read": "", children: read }) : null, _jsx("span", { "data-sx-num-stack": "", "aria-hidden": true, children: visual })] })] }));
+}
+/** Count: the live text counts from the last value to the new one, written straight into its text node. */
+function useCount(ref, enabled, shown, fmt, duration, armed) {
+    const last = useRef(null);
+    useLayoutEffect(() => {
+        const node = ref.current?.querySelector("[data-sx-num-live]")?.firstChild;
+        const was = last.current;
+        last.current = shown;
+        if (!enabled || !node || was === null || was === shown || !armed || reducedMotion())
+            return;
+        const t0 = performance.now();
+        let frame = 0;
+        node.nodeValue = fmt(was);
+        const tick = (now) => {
+            const p = (now - t0) / (duration * 1000);
+            node.nodeValue = fmt(p >= 1 ? shown : countAt(was, shown, p));
+            if (p < 1)
+                frame = requestAnimationFrame(tick);
+        };
+        frame = requestAnimationFrame(tick);
+        return () => {
+            cancelAnimationFrame(frame);
+            node.nodeValue = fmt(shown);
+        };
+        // fmt changes with every render; the value is what matters
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enabled, shown, armed]);
+}
+/** Odometer: each column's place on its strip of three runs, always moving forward; kept between renders. */
+function useOdometer(enabled, text, locale) {
+    const places = useRef(new Map());
+    if (!enabled)
+        return places.current;
+    const next = new Map();
+    for (const { key, digit } of columnsOf(text, locale)) {
+        if (digit === undefined)
+            continue;
+        const was = places.current.get(key);
+        next.set(key, was === undefined ? 10 + digit : was % 10 === digit ? was : odometerStep(was, digit));
+    }
+    // kept for the next render; a column past its second run is brought back by ten after it rolls (Columns)
+    places.current = next;
+    return next;
+}
+/** The parts of `text`, each with a key that counts from the end, so a column keeps its identity as the number grows. */
+function columnsOf(text, locale) {
+    const parts = partsOf(text, locale);
+    let digits = 0;
+    let others = 0;
+    return parts
+        .reverse()
+        .map((p) => ({ ...p, key: p.digit === undefined ? `s${others++}` : `d${digits++}` }))
+        .reverse();
+}
+function Columns({ text, locale, odometer }) {
+    const glyphs = digitGlyphs(locale);
+    const strip = odometer && odometer.size > 0 ? [...glyphs, ...glyphs, ...glyphs] : glyphs;
+    const settle = (e, key) => {
+        const place = odometer?.get(key);
+        if (place === undefined || place < 20)
+            return;
+        // past the second run: the same digit ten places back, with no motion
+        const col = e.currentTarget.parentElement;
+        col?.setAttribute("data-sx-num-jump", "");
+        e.currentTarget.style.setProperty("--sx-num-p", String(place - 10));
+        odometer?.set(key, place - 10);
+        void col?.offsetWidth;
+        col?.removeAttribute("data-sx-num-jump");
+    };
+    return (_jsx("span", { children: columnsOf(text, locale).map(({ key, text: ch, digit }) => digit === undefined ? (_jsx("span", { children: ch }, key)) : (_jsx("span", { "data-sx-num-col": "", children: _jsx("span", { "data-sx-num-strip": "", style: { "--sx-num-p": odometer?.get(key) ?? digit }, onTransitionEnd: (e) => settle(e, key), children: strip.map((g, i) => _jsx("span", { children: g }, i)) }) }, key))) }));
+}
+/** Slide: the new text comes in and the last one goes out, the way the number moved. */
+function Slide({ text, rising }) {
+    const prev = useRef(null);
+    const before = prev.current;
+    useEffect(() => {
+        prev.current = text;
+    }, [text]);
+    const way = { "--sx-num-way": rising ? 1 : -1 };
+    return (_jsxs(_Fragment, { children: [before !== null && before !== text ? (_jsx("span", { "data-sx-num-slide": "off", style: way, children: before }, `v-${before}`)) : null, _jsx("span", { "data-sx-num-slide": "on", "data-sx-num-rest": before === null ? "" : undefined, style: way, children: text }, `v-${text}`)] }));
+}

package/dist/text/number/NumberRoll.schema.d.ts

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

package/dist/text/number/NumberRoll.schema.js

@@ -0,0 +1,24 @@
+import { defineSchema } from "../../schema/define.js";
+// NumberRoll's props as a form (About's `statRoll`). The value, its format and locale, and the countdown and clock
+// props are the page's: a section reads its figures from the content.
+export const NUMBER_ROLL_SCHEMA = defineSchema()({
+    id: "numberRoll",
+    family: "number-roll",
+    factory: "NumberRoll",
+    code: ["value", "to", "clock", "format", "locale", "units", "timeZone", "as", "className", "style"],
+    fields: {
+        look: {
+            kind: "choice", label: "Look", values: ["count", "spin", "odometer", "slide"],
+            labels: { count: "Count up", spin: "Digits spin", odometer: "Odometer", slide: "Slide in" }, default: "count",
+        },
+        start: {
+            kind: "choice", label: "Starts", values: ["inView", "mount", "change"],
+            labels: { inView: "When on screen", mount: "As the page loads", change: "Only when the value changes" }, default: "inView",
+        },
+        from: { kind: "number", label: "Counts from", min: 0, max: 10000, step: 1, default: 0 },
+        duration: {
+            kind: "number", label: "Takes", min: 0.2, max: 4, step: 0.1, unit: "s",
+            autoNote: "1.6 s to count, 0.6 s for the other looks", autoValue: 1.6,
+        },
+    },
+});

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

@@ -0,0 +1,6 @@
+/**
+ * Figures all the same width (`tabular-nums`), so the number never shakes. A digit is a column of the locale's ten
+ * digits (three runs of them for the odometer), clipped to one line and moved to its digit with `translate`.
+ */
+export declare const NUM_BASE_CSS = "@layer theme, base, components, utilities;\n@layer components {\n  :where([data-sx-num]) { position: relative; font-variant-numeric: tabular-nums; white-space: nowrap; }\n  :where([data-sx-num] [data-sx-text-read]) {\n    position: absolute;\n    inline-size: 1px;\n    block-size: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n  }\n  :where([data-sx-num] [data-sx-num-stack]) { display: inline-grid; vertical-align: bottom; }\n  :where([data-sx-num] [data-sx-num-stack] > *) { grid-area: 1 / 1; }\n  :where([data-sx-num] [data-sx-num-size]) { visibility: hidden; }\n  :where([data-sx-num] [data-sx-num-col]) { display: inline-block; overflow: clip; block-size: 1lh; vertical-align: bottom; }\n  :where([data-sx-num] [data-sx-num-strip]) { display: flex; flex-direction: column; translate: 0 calc(var(--sx-num-p) * -1lh); }\n  :where([data-sx-num] [data-sx-num-slide=\"off\"]) { visibility: hidden; }\n}";
+export declare const NUM_MOTION_CSS: string;

package/dist/text/number/css.js

@@ -0,0 +1,38 @@
+// NumberRoll's stylesheets: the structure (always: it shows the value with no script) and the motion. Plain strings.
+import { LAYER_ORDER } from "../../backgrounds/runtime/rootCss.js";
+import { holdUntilLive } from "../runtime/onScreen.js";
+const H = "[data-sx-num]";
+const EASE = "var(--ease-sx-out, cubic-bezier(0.2, 0.7, 0.2, 1))";
+/**
+ * Figures all the same width (`tabular-nums`), so the number never shakes. A digit is a column of the locale's ten
+ * digits (three runs of them for the odometer), clipped to one line and moved to its digit with `translate`.
+ */
+export const NUM_BASE_CSS = `${LAYER_ORDER}
+@layer components {
+  :where(${H}) { position: relative; font-variant-numeric: tabular-nums; white-space: nowrap; }
+  :where(${H} [data-sx-text-read]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+  :where(${H} [data-sx-num-stack]) { display: inline-grid; vertical-align: bottom; }
+  :where(${H} [data-sx-num-stack] > *) { grid-area: 1 / 1; }
+  :where(${H} [data-sx-num-size]) { visibility: hidden; }
+  :where(${H} [data-sx-num-col]) { display: inline-block; overflow: clip; block-size: 1lh; vertical-align: bottom; }
+  :where(${H} [data-sx-num-strip]) { display: flex; flex-direction: column; translate: 0 calc(var(--sx-num-p) * -1lh); }
+  :where(${H} [data-sx-num-slide="off"]) { visibility: hidden; }
+}`;
+export const NUM_MOTION_CSS = `@layer components {
+${holdUntilLive(`${H}[data-sx-num-wait]`, "[data-sx-num-stack]", "sx-num-wait")}
+  :where(${H} [data-sx-num-strip]) { transition: translate var(--sx-num-time) ${EASE}; }
+  :where(${H}[data-sx-num-jump] [data-sx-num-strip], ${H} [data-sx-num-col][data-sx-num-jump] [data-sx-num-strip]) { transition: none; }
+  :where(${H} [data-sx-num-stack]) { overflow: clip; padding-block: 0.1em; margin-block: -0.1em; }
+  @keyframes sx-num-in { from { translate: 0 calc(var(--sx-num-way) * 100%); opacity: 0; } }
+  @keyframes sx-num-out { to { translate: 0 calc(var(--sx-num-way) * -100%); opacity: 0; } }
+  :where(${H} [data-sx-num-slide="on"]:not([data-sx-num-rest])) { animation: sx-num-in var(--sx-num-time) ${EASE}; }
+  :where(${H} [data-sx-num-slide="off"]) { visibility: visible; animation: sx-num-out var(--sx-num-time) ${EASE} forwards; }
+  :where(${H}[data-sx-num-jump] [data-sx-num-slide]) { animation: none; }
+  :where(${H}[data-sx-num-jump] [data-sx-num-slide="off"]) { visibility: hidden; }
+}`;

package/dist/text/number/format.d.ts

@@ -0,0 +1,28 @@
+export interface NumPart {
+    readonly text: string;
+    /** 0-9 when the part is a digit. */
+    readonly digit?: number;
+}
+/** The locale's ten digits, 0 to 9. */
+export declare function digitGlyphs(locale?: string): readonly string[];
+/** `text` as parts, each digit (in the locale's glyphs) marked with its value. */
+export declare function partsOf(text: string, locale?: string): NumPart[];
+/** A number formatted for the locale. */
+export declare function formatNumber(value: number, locale?: string, format?: Intl.NumberFormatOptions): string;
+export type CountdownUnit = "days" | "hours" | "minutes" | "seconds";
+/**
+ * The time left, as two-digit groups joined by `:` ("12:04:33:09"). The first unit holds everything above it (days can
+ * pass 99); each later one wraps. Never below zero.
+ */
+export declare function countdownText(ms: number, units: readonly CountdownUnit[], locale?: string): string;
+/** The time of day, `hh:mm:ss`, 24-hour, in the locale's digits. */
+export declare function clockText(at: Date, locale?: string, timeZone?: string): string;
+/** Ease-out cubic, 0 to 1. */
+export declare const easeOut: (p: number) => number;
+/** The value a count shows at progress `p`, rounded to the decimals the target has. */
+export declare function countAt(from: number, to: number, p: number): number;
+/**
+ * Where an odometer column's strip (three runs of 0-9) moves to show `digit` after `from`: always forward, up to nine
+ * steps. Past the second run it is brought back by ten after the roll (same digit, no motion).
+ */
+export declare function odometerStep(from: number, digit: number): number;

package/dist/text/number/format.js

@@ -0,0 +1,66 @@
+// Numbers, countdowns and clocks as parts: digits (which can roll) and everything else (separators, signs, currency).
+// Digits are the locale's own (Arabic-Indic in `ar-EG` …), found through Intl. Pure; tested.
+const glyphCache = new Map();
+/** The locale's ten digits, 0 to 9. */
+export function digitGlyphs(locale) {
+    const key = locale ?? "";
+    let glyphs = glyphCache.get(key);
+    if (!glyphs) {
+        const nf = new Intl.NumberFormat(locale, { useGrouping: false });
+        glyphs = Array.from({ length: 10 }, (_, d) => nf.format(d));
+        glyphCache.set(key, glyphs);
+    }
+    return glyphs;
+}
+/** `text` as parts, each digit (in the locale's glyphs) marked with its value. */
+export function partsOf(text, locale) {
+    const glyphs = digitGlyphs(locale);
+    return Array.from(text).map((ch) => {
+        const d = glyphs.indexOf(ch);
+        return d === -1 ? { text: ch } : { text: ch, digit: d };
+    });
+}
+/** A number formatted for the locale. */
+export function formatNumber(value, locale, format) {
+    return new Intl.NumberFormat(locale, format).format(value);
+}
+const UNIT_MS = { days: 86400000, hours: 3600000, minutes: 60000, seconds: 1000 };
+/**
+ * The time left, as two-digit groups joined by `:` ("12:04:33:09"). The first unit holds everything above it (days can
+ * pass 99); each later one wraps. Never below zero.
+ */
+export function countdownText(ms, units, locale) {
+    let left = Math.max(0, Math.floor(ms / 1000) * 1000);
+    const glyphs = digitGlyphs(locale);
+    const groups = units.map((unit) => {
+        const n = Math.floor(left / UNIT_MS[unit]);
+        left -= n * UNIT_MS[unit];
+        return String(n).padStart(2, "0");
+    });
+    return groups.join(":").replace(/\d/g, (d) => glyphs[Number(d)]);
+}
+/** The time of day, `hh:mm:ss`, 24-hour, in the locale's digits. */
+export function clockText(at, locale, timeZone) {
+    const parts = new Intl.DateTimeFormat("en-GB", { hour: "2-digit", minute: "2-digit", second: "2-digit", hourCycle: "h23", ...(timeZone ? { timeZone } : {}) }).formatToParts(at);
+    const glyphs = digitGlyphs(locale);
+    return parts
+        .filter((p) => p.type === "hour" || p.type === "minute" || p.type === "second")
+        .map((p) => p.value)
+        .join(":")
+        .replace(/\d/g, (d) => glyphs[Number(d)]);
+}
+/** Ease-out cubic, 0 to 1. */
+export const easeOut = (p) => 1 - (1 - Math.min(1, Math.max(0, p))) ** 3;
+/** The value a count shows at progress `p`, rounded to the decimals the target has. */
+export function countAt(from, to, p) {
+    const decimals = Math.min(6, (String(to).split(".")[1] ?? "").length);
+    const v = from + (to - from) * easeOut(p);
+    return Number(v.toFixed(decimals));
+}
+/**
+ * Where an odometer column's strip (three runs of 0-9) moves to show `digit` after `from`: always forward, up to nine
+ * steps. Past the second run it is brought back by ten after the roll (same digit, no motion).
+ */
+export function odometerStep(from, digit) {
+    return from + ((digit - (from % 10) + 10) % 10);
+}

package/dist/text/order.d.ts

@@ -0,0 +1,8 @@
+import type { TextOrder } from "./types.js";
+/**
+ * Each of `n` pieces' place in the order (0 plays first). `centre` and `edges` give two pieces the same place when they
+ * sit as far from the middle, so the text opens or closes symmetrically. `random` is a shuffle from `seed`.
+ */
+export declare function orderOf(n: number, from: TextOrder, seed?: number): number[];
+/** Three numbers in [-1, 1] per piece, the same for the same seed, on the server and in the browser. */
+export declare function randomsOf(n: number, seed: number): [number, number, number][];