@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/ticker/Ticker.js

@@ -0,0 +1,226 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { animate, motion, useMotionValue, useMotionValueEvent } from "motion/react";
+import { tickerCopies, tickerFade, tickerShift } from "./math.js";
+import { TICKER_DEFAULTS } from "./defaults.js";
+import { scrollSpeed, watchScrollSpeed } from "../transitions/shader/scrollSpeed.js";
+const HOVER_EASE = { duration: 0.4, ease: "easeOut" };
+/** motion's own inertia defaults, kept explicit: the glide covers `power · velocity` px. */
+const GLIDE = { power: 0.8, timeConstant: 700, restDelta: 0.5 };
+/**
+ * A continuous marquee. The item set is rendered as many times as it takes to
+ * cover the viewport plus one set (`tickerCopies`), and one number, the
+ * offset, moves the whole track. The track's translation is the offset modulo
+ * the set's length (`tickerShift`), so it runs forever with no reset you can
+ * see: when copy 1 has moved to where copy 0 was, the picture is identical.
+ *
+ * The offset is the sum of the Ticker's own travel (time at `velocity`, plus
+ * drag and its glide) and the optional outside `offset`. One write per frame:
+ * the track's `transform`, set directly, never through React.
+ *
+ * - **Measuring:** one `ResizeObserver` watches the viewport and the first
+ *   set (which carries the trailing gap as padding, so its length is exactly
+ *   one period).
+ * - **Cost:** the time loop runs only while the Ticker is on screen, has a
+ *   speed, and reduced motion is off.
+ * - **Reduced motion:** still. Time and the outside offset stop; drag, which
+ *   the user does themselves, still works.
+ * - **Copies** after the first are `aria-hidden` and `inert`, so screen readers
+ *   read the items once and links are tabbed to once.
+ */
+export function Ticker({ items, children, velocity = TICKER_DEFAULTS.velocity, axis = TICKER_DEFAULTS.axis, gap = TICKER_DEFAULTS.gap, offset, drag = TICKER_DEFAULTS.drag, hoverSpeed = TICKER_DEFAULTS.hoverSpeed, scrollBoost = TICKER_DEFAULTS.scrollBoost, fade = TICKER_DEFAULTS.fade, className, style, "aria-label": ariaLabel, }) {
+    const viewportRef = useRef(null);
+    const trackRef = useRef(null);
+    const setRef = useRef(null);
+    /** px travelled towards the start by time and drag. */
+    const own = useMotionValue(0);
+    /** 1 normally, `hoverSpeed` while hovered or focused. */
+    const speed = useMotionValue(1);
+    const period = useRef(0);
+    const rtl = useRef(false);
+    const reduced = useRef(false);
+    const held = useRef(false);
+    /** Counts drags, so a glide stopped by the next drag cannot release that one. */
+    const drags = useRef(0);
+    const moved = useRef(false);
+    const [copies, setCopies] = useState(1);
+    const [running, setRunning] = useState(false);
+    const [visible, setVisible] = useState(true);
+    /** 1 at rest; more while the page scrolls, with `scrollBoost`. */
+    const boost = useRef(1);
+    const render = useCallback(() => {
+        const track = trackRef.current;
+        if (!track)
+            return;
+        const total = own.get() + (offset && !reduced.current ? offset.get() : 0);
+        const shift = tickerShift(total, period.current, axis === "x" && rtl.current);
+        track.style.transform = axis === "x" ? `translate3d(${shift}px, 0, 0)` : `translate3d(0, ${shift}px, 0)`;
+    }, [own, offset, axis]);
+    useMotionValueEvent(own, "change", render);
+    useEffect(() => offset?.on("change", render), [offset, render]);
+    // ---------- measuring ----------
+    useLayoutEffect(() => {
+        const viewport = viewportRef.current;
+        const set = setRef.current;
+        if (!viewport || !set)
+            return;
+        rtl.current = getComputedStyle(viewport).direction === "rtl";
+        const main = (el) => (axis === "x" ? el.offsetWidth : el.offsetHeight);
+        const sizes = new Map([[viewport, main(viewport)], [set, main(set)]]);
+        const sync = () => {
+            period.current = sizes.get(set) ?? 0;
+            setCopies(tickerCopies(sizes.get(viewport) ?? 0, period.current));
+            render();
+        };
+        sync();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const ro = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                // border box, unaffected by transforms; fractional, unlike offsetWidth
+                const box = entry.borderBoxSize?.[0];
+                const r = entry.target.getBoundingClientRect();
+                sizes.set(entry.target, box ? (axis === "x" ? box.inlineSize : box.blockSize) : axis === "x" ? r.width : r.height);
+            }
+            sync();
+        });
+        ro.observe(viewport);
+        ro.observe(set);
+        return () => ro.disconnect();
+    }, [axis, render]);
+    // ---------- environment ----------
+    useEffect(() => {
+        if (typeof window === "undefined" || !window.matchMedia) {
+            setRunning(true);
+            return;
+        }
+        const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+        const sync = () => {
+            reduced.current = mq.matches;
+            setRunning(!mq.matches);
+            render();
+        };
+        sync();
+        mq.addEventListener("change", sync);
+        return () => mq.removeEventListener("change", sync);
+    }, [render]);
+    useEffect(() => {
+        const el = viewportRef.current;
+        if (!el || typeof IntersectionObserver === "undefined")
+            return;
+        const io = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            if (entry)
+                setVisible(entry.isIntersecting);
+        });
+        io.observe(el);
+        return () => io.disconnect();
+    }, []);
+    // ---------- time ----------
+    useEffect(() => {
+        if (!running || !visible || velocity === 0)
+            return;
+        let last = 0;
+        let id = requestAnimationFrame(function tick(now) {
+            // the first frame only sets the clock; a long gap (a background tab) counts as one frame
+            const dt = last === 0 ? 0 : Math.min(now - last, 100) / 1000;
+            last = now;
+            if (!held.current && dt > 0)
+                own.set(own.get() + velocity * speed.get() * boost.current * dt);
+            id = requestAnimationFrame(tick);
+        });
+        return () => cancelAnimationFrame(id);
+    }, [running, visible, velocity, own, speed]);
+    // ---------- scroll boost ----------
+    useEffect(() => {
+        if (!running || !visible || scrollBoost === 0)
+            return;
+        const stop = watchScrollSpeed(() => {
+            boost.current = 1 + scrollSpeed() * scrollBoost;
+        });
+        return () => {
+            stop();
+            boost.current = 1;
+        };
+    }, [running, visible, scrollBoost]);
+    // ---------- hover and focus ----------
+    const slow = useCallback(() => {
+        if (hoverSpeed !== 1)
+            void animate(speed, hoverSpeed, HOVER_EASE);
+    }, [hoverSpeed, speed]);
+    const resume = useCallback(() => {
+        if (hoverSpeed !== 1)
+            void animate(speed, 1, HOVER_EASE);
+    }, [hoverSpeed, speed]);
+    // ---------- drag ----------
+    /** +1 when dragging towards the end (right / down) lowers the offset, -1 in RTL. */
+    const dragSign = () => (axis === "x" && rtl.current ? -1 : 1);
+    const mainOf = (v) => (axis === "x" ? v.x : v.y);
+    const onPanStart = () => {
+        own.stop();
+        drags.current++;
+        held.current = true;
+        moved.current = true;
+    };
+    const onPan = (_, info) => {
+        own.set(own.get() - mainOf(info.delta) * dragSign());
+    };
+    const onPanEnd = (_, info) => {
+        const v = -mainOf(info.velocity) * dragSign();
+        const gen = drags.current;
+        const release = () => {
+            if (drags.current === gen)
+                held.current = false;
+        };
+        if (Math.abs(v) < 1) {
+            release();
+            return;
+        }
+        // motion skips an inertia animation whose two keyframes are equal (see
+        // carousel/physics/landing.ts), so the target is where the glide will land
+        void animate(own, own.get() + GLIDE.power * v, { type: "inertia", velocity: v, ...GLIDE }).then(release);
+    };
+    const fadeSize = fade === true ? TICKER_DEFAULTS.fadeTrue : fade;
+    const mask = fadeSize === false || fadeSize === 0 ? undefined : tickerFade(fadeSize, axis);
+    const flex = {
+        display: "flex",
+        flexDirection: axis === "x" ? "row" : "column",
+        flexShrink: 0,
+        gap,
+        [axis === "x" ? "paddingInlineEnd" : "paddingBlockEnd"]: gap,
+    };
+    const sets = [];
+    for (let k = 0; k < copies; k++) {
+        sets.push(_jsx("div", { ref: k === 0 ? setRef : undefined, "data-sx-ticker-set": k, "aria-hidden": k > 0 || undefined, inert: k > 0 || undefined, style: flex, children: items.map((item, i) => (_jsx("div", { "data-sx-ticker-item": true, style: { flexShrink: 0 }, children: children(item, i) }, i))) }, k));
+    }
+    return (_jsx(motion.div, { ref: viewportRef, "data-sx-ticker": true, "data-sx-axis": axis, role: ariaLabel ? "region" : undefined, "aria-label": ariaLabel, className: className, style: {
+            overflow: "hidden",
+            // The viewport is filled with as many copies as its width needs, so it must never take its width from them: in
+            // a content-sized box (an auto table cell, a flex item) more copies made it wider, which asked for more copies,
+            // without end (the Text page's atlas scrolled forever, 2026-11-04). Sized as if empty, it takes its width from
+            // its own box only. A vertical Ticker needs a set height anyway.
+            contain: axis === "x" ? "inline-size" : undefined,
+            touchAction: drag ? (axis === "x" ? "pan-y" : "pan-x") : undefined,
+            cursor: drag ? "grab" : undefined,
+            userSelect: drag ? "none" : undefined,
+            maskImage: mask,
+            WebkitMaskImage: mask,
+            ...style,
+        }, onPointerEnter: (e) => e.pointerType === "mouse" && slow(), onPointerLeave: (e) => e.pointerType === "mouse" && resume(), onFocus: slow, onBlur: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget))
+                resume();
+        }, onPointerDown: () => {
+            moved.current = false;
+        }, onClickCapture: (e) => {
+            if (moved.current) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }, onPanStart: drag ? onPanStart : undefined, onPan: drag ? onPan : undefined, onPanEnd: drag ? onPanEnd : undefined, children: _jsx("div", { ref: trackRef, "data-sx-ticker-track": true, style: {
+                display: "flex",
+                flexDirection: axis === "x" ? "row" : "column",
+                width: axis === "x" ? "max-content" : undefined,
+                willChange: "transform",
+            }, children: sets }) }));
+}

package/dist/ticker/Ticker.schema.d.ts

@@ -0,0 +1,9 @@
+import type { TickerProps } from "./Ticker.js";
+/** How the page scroll moves a Ticker, besides its own speed: written as its `offset` prop. */
+export type TickerDrive = "time" | "scroll" | "scroll-reverse";
+/** `TickerProps` for a form: `fade` in px, and `drive` in place of `offset`. */
+export interface TickerSettings extends Omit<TickerProps<unknown>, "offset" | "fade"> {
+    readonly fade: number;
+    readonly drive: TickerDrive;
+}
+export declare const TICKER_SCHEMA: import("../schema/types.js").Schema;

package/dist/ticker/Ticker.schema.js

@@ -0,0 +1,31 @@
+import { defineSchema } from "../schema/define.js";
+export const TICKER_SCHEMA = defineSchema()({
+    id: "ticker",
+    family: "ticker",
+    factory: "Ticker",
+    code: ["items", "children", "className", "style"],
+    fields: {
+        velocity: {
+            kind: "number", label: "Speed", min: -300, max: 300, step: 5, unit: "px/s", default: 60,
+            help: "Positive runs towards the reading start, negative the other way; 0 moves only with the scroll or a drag.",
+        },
+        axis: { kind: "choice", label: "Direction", values: ["x", "y"], labels: { x: "Horizontal", y: "Vertical" }, default: "x", help: "Vertical needs a box with a height." },
+        gap: { kind: "number", label: "Gap", min: 0, max: 160, step: 1, unit: "px", default: 24 },
+        drive: {
+            kind: "choice", label: "Page scroll", values: ["time", "scroll", "scroll-reverse"],
+            labels: { time: "Doesn't move it", scroll: "Moves it along", "scroll-reverse": "Moves it the other way" },
+            default: "time", help: "Scrolling the page adds to its own speed.",
+        },
+        hoverSpeed: {
+            kind: "number", label: "Under the pointer", min: 0, max: 1, step: 0.05, default: 1,
+            help: "Its speed while hovered or focused: 0 pauses, 1 keeps going.",
+        },
+        scrollBoost: {
+            kind: "number", label: "Scroll boost", min: 0, max: 10, step: 0.25, default: 0,
+            help: "Scrolling speeds it up, and scrolling up runs it back: 0 is off.",
+        },
+        drag: { kind: "boolean", label: "Drag", default: false, help: "Visitors can drag it, with a glide on release." },
+        fade: { kind: "number", label: "Fade the edges", min: 0, max: 200, step: 4, unit: "px", default: 0, help: "0: hard edges." },
+        "aria-label": { kind: "text", label: "Name for screen readers", autoNote: "none: not a landmark", advanced: true, help: "With a name it is a region screen readers can jump to." },
+    },
+});

package/dist/ticker/defaults.d.ts

@@ -0,0 +1,14 @@
+/**
+ * What an unset prop means, in one place: the Ticker reads these, and the
+ * option schema's defaults are tested against them. `fadeTrue` is the px `fade={true}` gives.
+ */
+export declare const TICKER_DEFAULTS: {
+    readonly velocity: 60;
+    readonly axis: "x";
+    readonly gap: 24;
+    readonly drag: false;
+    readonly hoverSpeed: 1;
+    readonly scrollBoost: 0;
+    readonly fade: false;
+    readonly fadeTrue: 48;
+};

package/dist/ticker/defaults.js

@@ -0,0 +1,7 @@
+// A plain module (no "use client"): a constant exported from the Ticker's client module would reach a Server
+// Component as an opaque reference, not as its value.
+/**
+ * What an unset prop means, in one place: the Ticker reads these, and the
+ * option schema's defaults are tested against them. `fadeTrue` is the px `fade={true}` gives.
+ */
+export const TICKER_DEFAULTS = { velocity: 60, axis: "x", gap: 24, drag: false, hoverSpeed: 1, scrollBoost: 0, fade: false, fadeTrue: 48 };

package/dist/ticker/math.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The Ticker's pure maths: how many copies of the item set fill the viewport,
+ * and where the track sits for a given offset. No DOM; `Ticker` measures and
+ * calls these, the tests call them directly.
+ *
+ * Units: px along the main axis. The **period** is one set's length including
+ * the gap after its last item, so copy `k` starts exactly `k · period` in.
+ */
+/**
+ * Copies of the set needed so the viewport is always covered: one viewport's
+ * worth, plus one whole set for the part that has scrolled out at the start.
+ * At least 1 (nothing measured yet, or server rendering).
+ */
+export declare function tickerCopies(viewport: number, period: number): number;
+/** `offset` wrapped into `[0, period)`. Negative offsets wrap too. */
+export declare function wrapOffset(offset: number, period: number): number;
+/**
+ * The track's translation along the axis, px. Offset counts px travelled
+ * towards the reading start: left in LTR, right in RTL, up on a vertical
+ * ticker. `rtl` only applies to a horizontal ticker.
+ */
+export declare function tickerShift(offset: number, period: number, rtl: boolean): number;
+/**
+ * The CSS `mask-image` that fades both edges over `fade` px (a number) or a
+ * CSS length (a string such as `"10%"`). Symmetric, so it needs no RTL mirror.
+ */
+export declare function tickerFade(fade: number | string, axis: "x" | "y"): string;

package/dist/ticker/math.js

@@ -0,0 +1,46 @@
+/**
+ * The Ticker's pure maths: how many copies of the item set fill the viewport,
+ * and where the track sits for a given offset. No DOM; `Ticker` measures and
+ * calls these, the tests call them directly.
+ *
+ * Units: px along the main axis. The **period** is one set's length including
+ * the gap after its last item, so copy `k` starts exactly `k · period` in.
+ */
+/**
+ * Copies of the set needed so the viewport is always covered: one viewport's
+ * worth, plus one whole set for the part that has scrolled out at the start.
+ * At least 1 (nothing measured yet, or server rendering).
+ */
+export function tickerCopies(viewport, period) {
+    if (!(viewport > 0) || !(period > 0))
+        return 1;
+    return Math.ceil(viewport / period) + 1;
+}
+/** `offset` wrapped into `[0, period)`. Negative offsets wrap too. */
+export function wrapOffset(offset, period) {
+    if (!(period > 0))
+        return 0;
+    const r = offset % period;
+    // `+ 0` turns -0 (from -period % period) into 0
+    return r < 0 ? r + period : r + 0;
+}
+/**
+ * The track's translation along the axis, px. Offset counts px travelled
+ * towards the reading start: left in LTR, right in RTL, up on a vertical
+ * ticker. `rtl` only applies to a horizontal ticker.
+ */
+export function tickerShift(offset, period, rtl) {
+    const w = wrapOffset(offset, period);
+    if (w === 0)
+        return 0;
+    return rtl ? w : -w;
+}
+/**
+ * The CSS `mask-image` that fades both edges over `fade` px (a number) or a
+ * CSS length (a string such as `"10%"`). Symmetric, so it needs no RTL mirror.
+ */
+export function tickerFade(fade, axis) {
+    const size = typeof fade === "number" ? `${fade}px` : fade;
+    const to = axis === "x" ? "to right" : "to bottom";
+    return `linear-gradient(${to}, transparent, #000 ${size}, #000 calc(100% - ${size}), transparent)`;
+}

package/dist/transitions/effects/css/blinds.schema.d.ts

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

package/dist/transitions/effects/css/blinds.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const BLINDS_SCHEMA = defineSchema()({
+    id: "blinds",
+    family: "transition",
+    factory: "blinds",
+    fields: {
+        count: { kind: "integer", label: "Strips", min: 2, max: 30, default: 10 },
+        axis: { kind: "choice", label: "Axis", values: ["x", "y"], labels: { x: "Upright strips", y: "Slats" }, default: "x" },
+        from: { kind: "choice", label: "Wave from", values: ["start", "end"], labels: { start: "Reading start", end: "Reading end" }, default: "start" },
+    },
+});

package/dist/transitions/effects/css/blurFade.schema.d.ts

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

package/dist/transitions/effects/css/blurFade.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const BLUR_FADE_SCHEMA = defineSchema()({
+    id: "blurFade",
+    family: "transition",
+    factory: "blurFade",
+    fields: {
+        blur: { kind: "number", label: "Blur", min: 0, max: 24, step: 1, unit: "px", default: 6 },
+        distance: { kind: "number", label: "Rise", min: 0, max: 100, step: 1, unit: "px", default: 12 },
+    },
+});

package/dist/transitions/effects/css/blurSharp.d.ts

@@ -0,0 +1,11 @@
+import type { CssTransition } from "../../types.js";
+export interface BlurSharpOptions {
+    /** Starting blur, px. Large values on large boxes are expensive. Default `14`. */
+    readonly blur?: number;
+}
+/**
+ * Comes into focus as it fades in (`filter: blur()` animated to 0). Mid tier:
+ * a large blur on a large box is a real GPU cost, so weaker devices get a
+ * plain fade (`blurSharp-lite`).
+ */
+export declare function blurSharp(options?: BlurSharpOptions): CssTransition;

package/dist/transitions/effects/css/blurSharp.js

@@ -0,0 +1,21 @@
+import { P, content, defineCss } from "./kit.js";
+const ID = "blurSharp";
+// On the content, not the element: a carousel slot's own opacity and filter are
+// written inline by the carousel and would win over these.
+const CSS = `  ${content(ID)} {
+    opacity: ${P};
+    filter: blur(calc((1 - ${P}) * var(--sx-tr-blur) * 1px));
+  }`;
+const LITE_ID = `${ID}-lite`;
+const LITE_CSS = `  ${content(LITE_ID)} { opacity: ${P}; }`;
+/**
+ * Comes into focus as it fades in (`filter: blur()` animated to 0). Mid tier:
+ * a large blur on a large box is a real GPU cost, so weaker devices get a
+ * plain fade (`blurSharp-lite`).
+ */
+export function blurSharp(options = {}) {
+    return defineCss(ID, CSS, {
+        vars: { "--sx-tr-blur": options.blur ?? 14 },
+        fallback: defineCss(ID, LITE_CSS, { id: LITE_ID, tier: "all" }),
+    });
+}

package/dist/transitions/effects/css/blurSharp.schema.d.ts

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

package/dist/transitions/effects/css/blurSharp.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const BLUR_SHARP_SCHEMA = defineSchema()({
+    id: "blurSharp",
+    family: "transition",
+    factory: "blurSharp",
+    fields: {
+        blur: { kind: "number", label: "Blur", min: 0, max: 40, step: 1, unit: "px", default: 14, help: "Large blurs on large boxes are expensive." },
+    },
+});

package/dist/transitions/effects/css/colorBlock.d.ts

@@ -0,0 +1,9 @@
+import type { CssTransition } from "../../types.js";
+export interface ColorBlockOptions {
+    /** Where the block comes in from. Default `"start"`. */
+    readonly from?: "start" | "end";
+    /** Block colour. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+}
+/** The classic agency reveal: a solid block sweeps across, the content swaps behind it, the block leaves. */
+export declare function colorBlock(options?: ColorBlockOptions): CssTransition;

package/dist/transitions/effects/css/colorBlock.js

@@ -0,0 +1,22 @@
+import { P, content, defineCss, directionCss, fromVars, sel, showAfter, vars } from "./kit.js";
+const ID = "colorBlock";
+// The block travels -100% → 0 (covering) over the first half and 0 → 100%
+// (leaving) over the second; the content switches on at the half-way mark.
+const CSS = `${directionCss(ID)}
+  ${sel(ID)} { overflow: clip; }
+  ${sel(ID)}::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+    background: var(--sx-tr-color, var(--color-sx-accent));
+    translate: calc((clamp(0, ${P} * 2, 1) - 1 + clamp(0, ${P} * 2 - 1, 1)) * 100% * (1 - 2 * var(--sx-tr-x))) 0;
+  }
+  ${content(ID)} { opacity: ${showAfter(0.5)}; }`;
+/** The classic agency reveal: a solid block sweeps across, the content swaps behind it, the block leaves. */
+export function colorBlock(options = {}) {
+    return defineCss(ID, CSS, {
+        vars: { ...fromVars(options.from ?? "start"), ...vars({ "--sx-tr-color": options.color }) },
+    });
+}

package/dist/transitions/effects/css/colorBlock.schema.d.ts

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

package/dist/transitions/effects/css/colorBlock.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const COLOR_BLOCK_SCHEMA = defineSchema()({
+    id: "colorBlock",
+    family: "transition",
+    factory: "colorBlock",
+    fields: {
+        from: { kind: "choice", label: "From", values: ["start", "end"], labels: { start: "Reading start", end: "Reading end" }, default: "start" },
+        color: { kind: "color", label: "Block colour", autoValue: "var(--color-sx-accent)", autoNote: "the accent colour" },
+    },
+});

package/dist/transitions/effects/css/columnWave.schema.d.ts

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

package/dist/transitions/effects/css/columnWave.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const COLUMN_WAVE_SCHEMA = defineSchema()({
+    id: "columnWave",
+    family: "transition",
+    factory: "columnWave",
+    fields: {
+        count: { kind: "integer", label: "Columns", min: 2, max: 40, default: 12 },
+        from: { kind: "choice", label: "Grow from", values: ["bottom", "top"], labels: { bottom: "Bottom", top: "Top" }, default: "bottom" },
+        wave: { kind: "choice", label: "Wave from", values: ["start", "end"], labels: { start: "Reading start", end: "Reading end" }, default: "start" },
+    },
+});

package/dist/transitions/effects/css/diagonal.d.ts

@@ -0,0 +1,9 @@
+import type { CssTransition } from "../../types.js";
+export interface DiagonalOptions {
+    /** Where the edge starts. Default `"start"`. */
+    readonly from?: "start" | "end";
+    /** How far the bottom of the edge trails the top, as a fraction of the width. Default `0.5`. */
+    readonly slant?: number;
+}
+/** A slanted edge sweeps across (`clip-path: polygon()`, four points throughout so it can animate). */
+export declare function diagonal(options?: DiagonalOptions): CssTransition;

package/dist/transitions/effects/css/diagonal.js

@@ -0,0 +1,17 @@
+import { P, defineCss, directionCss, fromVars, sel } from "./kit.js";
+const ID = "diagonal";
+// the leading edge runs from (A, top) to (B, bottom); both travel past the box
+const A = `(${P} * (100% + var(--sx-tr-slant)))`;
+const B = `(${P} * (100% + var(--sx-tr-slant)) - var(--sx-tr-slant))`;
+// x measured from the left, or from the right when --sx-tr-x is 1
+const X = (t) => `calc(var(--sx-tr-x) * 100% + (1 - 2 * var(--sx-tr-x)) * ${t})`;
+const CSS = `${directionCss(ID)}
+  ${sel(ID)} {
+    clip-path: polygon(${X("0%")} 0%, ${X(A)} 0%, ${X(B)} 100%, ${X("0%")} 100%);
+  }`;
+/** A slanted edge sweeps across (`clip-path: polygon()`, four points throughout so it can animate). */
+export function diagonal(options = {}) {
+    return defineCss(ID, CSS, {
+        vars: { ...fromVars(options.from ?? "start"), "--sx-tr-slant": `${(options.slant ?? 0.5) * 100}%` },
+    });
+}

package/dist/transitions/effects/css/diagonal.schema.d.ts

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

package/dist/transitions/effects/css/diagonal.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const DIAGONAL_SCHEMA = defineSchema()({
+    id: "diagonal",
+    family: "transition",
+    factory: "diagonal",
+    fields: {
+        from: { kind: "choice", label: "From", values: ["start", "end"], labels: { start: "Reading start", end: "Reading end" }, default: "start" },
+        slant: { kind: "number", label: "Slant", min: 0, max: 1, step: 0.05, default: 0.5, help: "How far the bottom of the edge trails the top." },
+    },
+});

package/dist/transitions/effects/css/fadeUp.schema.d.ts

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

package/dist/transitions/effects/css/fadeUp.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const FADE_UP_SCHEMA = defineSchema()({
+    id: "fadeUp",
+    family: "transition",
+    factory: "fadeUp",
+    fields: {
+        from: { kind: "choice", label: "From", values: ["below", "above", "start", "end"], labels: { below: "Below", above: "Above", start: "Reading start", end: "Reading end" }, default: "below" },
+        distance: { kind: "number", label: "Distance", min: 0, max: 200, step: 1, unit: "px", default: 24 },
+    },
+});

package/dist/transitions/effects/css/gooey.schema.d.ts

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

package/dist/transitions/effects/css/gooey.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+import { seedField } from "../../../schema/common.js";
+export const GOOEY_SCHEMA = defineSchema()({
+    id: "gooey",
+    family: "transition",
+    factory: "gooey",
+    fields: {
+        color: { kind: "color", label: "Paint colour", autoValue: "var(--color-sx-accent)", autoNote: "the accent colour" },
+        seed: seedField(5),
+    },
+});

package/dist/transitions/effects/css/gradientMask.d.ts

@@ -0,0 +1,10 @@
+import type { CssTransition } from "../../types.js";
+import { type From } from "./kit.js";
+export interface GradientMaskOptions {
+    /** Where the edge starts. Default `"start"`. */
+    readonly from?: From;
+    /** Width of the soft edge, as a fraction of the box. Default `0.3`. */
+    readonly soft?: number;
+}
+/** A soft edge sweeps across instead of a hard one (`mask-image` gradient). */
+export declare function gradientMask(options?: GradientMaskOptions): CssTransition;

package/dist/transitions/effects/css/gradientMask.js

@@ -0,0 +1,17 @@
+import { P, defineCss, directionCss, fromVars, sel } from "./kit.js";
+const ID = "gradientMask";
+const S = "var(--sx-tr-soft)";
+const GRADIENT = `linear-gradient(var(--sx-tr-a), #000 calc(${P} * (100% + ${S}) - ${S}), transparent calc(${P} * (100% + ${S})))`;
+// 90deg runs left → right; 270deg right → left; 180deg top → bottom; 0deg bottom → top
+const CSS = `${directionCss(ID)}
+  ${sel(ID)} {
+    --sx-tr-a: calc((var(--sx-tr-h) * (90 + var(--sx-tr-x) * 180) + (1 - var(--sx-tr-h)) * (180 - var(--sx-tr-flip) * 180)) * 1deg);
+    -webkit-mask-image: ${GRADIENT};
+    mask-image: ${GRADIENT};
+  }`;
+/** A soft edge sweeps across instead of a hard one (`mask-image` gradient). */
+export function gradientMask(options = {}) {
+    return defineCss(ID, CSS, {
+        vars: { ...fromVars(options.from ?? "start"), "--sx-tr-soft": `${(options.soft ?? 0.3) * 100}%` },
+    });
+}

package/dist/transitions/effects/css/gradientMask.schema.d.ts

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

package/dist/transitions/effects/css/gradientMask.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const GRADIENT_MASK_SCHEMA = defineSchema()({
+    id: "gradientMask",
+    family: "transition",
+    factory: "gradientMask",
+    fields: {
+        from: { kind: "choice", label: "From", values: ["start", "end", "top", "bottom"], labels: { start: "Reading start", end: "Reading end", top: "Top", bottom: "Bottom" }, default: "start" },
+        soft: { kind: "number", label: "Softness", min: 0.05, max: 1, step: 0.05, default: 0.3, help: "Width of the soft edge, as a share of the box." },
+    },
+});

package/dist/transitions/effects/css/ink.schema.d.ts

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