@sharedex/ui 0.0.0-stage → 0.9.0

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

@@ -0,0 +1,139 @@
+// blinds, columnWave, randomGrid: many pieces uncovering the content, each on
+// its own staggered clock. The atlas draws them as an SVG <mask> of rectangles;
+// here they are one CSS clip-path polygon, because pointing an HTML element at
+// an in-page SVG mask is not supported everywhere, and a polygon needs no extra
+// element, works in the carousel and in a reveal, and scrubs with --sx-p.
+//
+// Every piece i has its own progress --sx-tr-k<i> (an inline custom property),
+// and the polygon (--sx-tr-clip, also inline) reads those. The stylesheet only
+// says `clip-path: var(--sx-tr-clip)`, so one sheet serves every option.
+import { rng } from "../../../backgrounds/runtime/rng.js";
+import { P, defineCss, directionCss, sel } from "./kit.js";
+const fmt = (n) => String(Math.round(n * 10000) / 10000);
+/** Piece `i`'s progress: starts once p passes `order * spread / (1 + spread)`, done by p = 1. */
+export function pieceProgress(order, spread) {
+    return `clamp(0, ${P} * ${fmt(1 + spread)} - ${fmt(order * spread)}, 1)`;
+}
+const K = (i) => `var(--sx-tr-k${i})`;
+/** x from the reading start: mirrored under RTL through --sx-tr-x. */
+const X = (t) => `calc(var(--sx-tr-x) * 100% + (1 - 2 * var(--sx-tr-x)) * (${t}))`;
+const polygon = (points) => `polygon(${points.map(([x, y]) => `${x} ${y}`).join(", ")})`;
+function pieceVars(orders, spread) {
+    const vars = {};
+    orders.forEach((o, i) => {
+        vars[`--sx-tr-k${i}`] = pieceProgress(o, spread);
+    });
+    return vars;
+}
+const wave = (n) => Array.from({ length: n }, (_, i) => (n > 1 ? i / (n - 1) : 0));
+const CLIP_CSS = (id) => `${directionCss(id)}
+  ${sel(id)} { clip-path: var(--sx-tr-clip); }`;
+const BLINDS = "blinds";
+/** The polygon for blinds: strips opening from their centres, one after another. Pure; tested. */
+export function blindsClip(count, axis) {
+    const half = 50 / count;
+    const points = [];
+    if (axis === "x") {
+        points.push([X("0%"), "0%"]);
+        for (let i = 0; i < count; i++) {
+            const c = (i + 0.5) * (100 / count);
+            const l = X(`${fmt(c)}% - ${K(i)} * (${fmt(half)}% + 0.5px)`);
+            const r = X(`${fmt(c)}% + ${K(i)} * (${fmt(half)}% + 0.5px)`);
+            points.push([l, "0%"], [l, "100%"], [r, "100%"], [r, "0%"]);
+        }
+        points.push([X("100%"), "0%"]);
+    }
+    else {
+        points.push(["0%", "0%"]);
+        for (let i = 0; i < count; i++) {
+            const c = (i + 0.5) * (100 / count);
+            const t = `calc(${fmt(c)}% - ${K(i)} * (${fmt(half)}% + 0.5px))`;
+            const b = `calc(${fmt(c)}% + ${K(i)} * (${fmt(half)}% + 0.5px))`;
+            points.push(["0%", t], ["100%", t], ["100%", b], ["0%", b]);
+        }
+        points.push(["0%", "100%"]);
+    }
+    return polygon(points);
+}
+/** Strips open from their centres in a wave across the box (the atlas's SVG blinds). */
+export function blinds(options = {}) {
+    const count = Math.max(1, Math.round(options.count ?? 10));
+    const axis = options.axis ?? "x";
+    const orders = wave(count);
+    const vars = {
+        "--sx-tr-flip": options.from === "end" ? 1 : 0,
+        ...pieceVars(axis === "y" && options.from === "end" ? orders.reverse() : orders, 0.7),
+        "--sx-tr-clip": blindsClip(count, axis),
+    };
+    return defineCss(BLINDS, CLIP_CSS(BLINDS), { vars });
+}
+const COLUMN_WAVE = "columnWave";
+/**
+ * The polygon for a column wave: a staircase, one step per column, so
+ * neighbouring columns share an edge and never leave a hairline seam. Pure; tested.
+ */
+export function columnWaveClip(count, from) {
+    const base = from === "bottom" ? "100%" : "0%";
+    const edge = (i) => from === "bottom" ? `calc(100% - ${K(i)} * (100% + 1px))` : `calc(${K(i)} * (100% + 1px))`;
+    const points = [[X("0%"), base]];
+    for (let i = 0; i < count; i++) {
+        const y = edge(i);
+        points.push([X(`${fmt((i * 100) / count)}%`), y], [X(`${fmt(((i + 1) * 100) / count)}%`), y]);
+    }
+    points.push([X("100%"), base]);
+    return polygon(points);
+}
+/** Columns rise from one edge in a wave and uncover the content. */
+export function columnWave(options = {}) {
+    const count = Math.max(1, Math.round(options.count ?? 12));
+    const vars = {
+        "--sx-tr-flip": options.wave === "end" ? 1 : 0,
+        ...pieceVars(wave(count), 0.8),
+        "--sx-tr-clip": columnWaveClip(count, options.from ?? "bottom"),
+    };
+    return defineCss(COLUMN_WAVE, CLIP_CSS(COLUMN_WAVE), { vars });
+}
+const RANDOM_GRID = "randomGrid";
+/** Each cell adds 8 polygon points; past this the polygon gets slow to restyle. */
+export const RANDOM_GRID_MAX_CELLS = 120;
+/**
+ * The polygon for a random grid: each row is a line the cells hang from on
+ * zero-width stems, each cell a rectangle growing from its centre. The stems
+ * and the lines are walked out and back (no area), and every cell is walked
+ * the same way round, so the non-zero fill rule fills exactly the cells. Pure; tested.
+ */
+export function randomGridClip(columns, rows) {
+    const hw = `(${fmt(50 / columns)}% + 0.5px)`;
+    const hh = `(${fmt(50 / rows)}% + 0.5px)`;
+    const points = [["0%", "0%"]];
+    for (let r = 0; r < rows; r++) {
+        const line = `${fmt((r * 100) / rows)}%`;
+        const cy = fmt(((r + 0.5) * 100) / rows);
+        points.push(["0%", line]);
+        for (let c = 0; c < columns; c++) {
+            const k = K(r * columns + c);
+            const cx = fmt(((c + 0.5) * 100) / columns);
+            const top = `calc(${cy}% - ${k} * ${hh})`;
+            const bottom = `calc(${cy}% + ${k} * ${hh})`;
+            const left = `calc(${cx}% - ${k} * ${hw})`;
+            const right = `calc(${cx}% + ${k} * ${hw})`;
+            points.push([`${cx}%`, line], [`${cx}%`, top], [left, top], [left, bottom], [right, bottom], [right, top], [`${cx}%`, top], [`${cx}%`, line]);
+        }
+        points.push(["0%", line]);
+    }
+    points.push(["0%", "0%"]);
+    return polygon(points);
+}
+/** Cells of a grid open in random order, each growing from its centre. */
+export function randomGrid(options = {}) {
+    const columns = Math.max(1, Math.round(options.columns ?? 8));
+    const rows = Math.max(1, Math.min(Math.round(options.rows ?? 5), Math.floor(RANDOM_GRID_MAX_CELLS / columns)));
+    const random = rng(options.seed ?? 3);
+    const orders = Array.from({ length: columns * rows }, () => Math.round(random() * 1000) / 1000);
+    const vars = {
+        "--sx-tr-flip": 0,
+        ...pieceVars(orders, 1.2),
+        "--sx-tr-clip": randomGridClip(columns, rows),
+    };
+    return defineCss(RANDOM_GRID, CLIP_CSS(RANDOM_GRID), { vars });
+}

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

@@ -0,0 +1,13 @@
+import type { CssTransition } from "../../types.js";
+export interface ShuttersOptions {
+    /** Number of strips. Default `8`. */
+    readonly count?: number;
+    /** `"x"` (default): upright strips opening sideways. `"y"`: slats opening downwards. */
+    readonly axis?: "x" | "y";
+}
+/**
+ * Strips open like window blinds and uncover the content. One repeating mask
+ * gradient on the element, so it works on any card or block, not just pictures.
+ * (The "shutters" look, rebuilt.)
+ */
+export declare function shutters(options?: ShuttersOptions): CssTransition;

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

@@ -0,0 +1,24 @@
+import { P, defineCss, directionCss, sel } from "./kit.js";
+const ID = "shutters";
+// each strip shows its first p of the period; +1px closes the hairline seams at p = 1
+const GRADIENT = `repeating-linear-gradient(var(--sx-tr-a), #000 0 calc(${P} * (100% / var(--sx-tr-n) + 1px)), transparent 0 calc(100% / var(--sx-tr-n)))`;
+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) * 1deg);
+    -webkit-mask-image: ${GRADIENT};
+    mask-image: ${GRADIENT};
+  }`;
+/**
+ * Strips open like window blinds and uncover the content. One repeating mask
+ * gradient on the element, so it works on any card or block, not just pictures.
+ * (The "shutters" look, rebuilt.)
+ */
+export function shutters(options = {}) {
+    return defineCss(ID, CSS, {
+        vars: {
+            "--sx-tr-n": Math.max(1, Math.round(options.count ?? 8)),
+            "--sx-tr-h": (options.axis ?? "x") === "x" ? 1 : 0,
+            "--sx-tr-flip": 0,
+        },
+    });
+}

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

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

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

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

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

@@ -0,0 +1,14 @@
+import type { CssTransition, TransitionNode } from "../../types.js";
+export interface SlicerOptions<T = unknown> {
+    /** Number of slices. Default `6`. */
+    readonly count?: number;
+    /** In a carousel: the picture of an item. In a `Reveal`, pass `image` on the Reveal instead. */
+    readonly image?: (item: T) => string | undefined;
+}
+export declare function slices(count: number): TransitionNode[];
+/**
+ * The picture slides in as vertical slices from alternate sides, then hands
+ * over to the content. Needs a picture: `image` maps a carousel item to one;
+ * a `Reveal` takes `image`. (The "slicer" look, rebuilt.)
+ */
+export declare function slicer<T = unknown>(options?: SlicerOptions<T>): CssTransition;

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

@@ -0,0 +1,47 @@
+import { P, content, defineCss, node, sel } from "./kit.js";
+const ID = "slicer";
+// Slice i starts after a stagger of up to 0.3 and lands by p = 0.9, sliding in
+// along the cross axis from alternate sides. Near the end the slices hand over
+// to the real content (the same picture, with whatever the card puts on it).
+const K = `clamp(0, (${P} - var(--i) / max(1, var(--sx-tr-n) - 1) * 0.3) / 0.6, 1)`;
+const CSS = `  ${sel(ID)} { overflow: clip; }
+  ${node(ID, "slice")} {
+    z-index: 1;
+    overflow: clip;
+    inset-block: 0;
+    inset-inline-start: calc(var(--i) * 100% / var(--sx-tr-n));
+    inline-size: calc(100% / var(--sx-tr-n) + 1px);
+    translate: 0 calc((1 - ${K}) * 101% * var(--d));
+    opacity: clamp(0, (0.985 - ${P}) * 1000, 1);
+  }
+  ${node(ID, "slice")} > img {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--i) * -100%);
+    inline-size: calc(var(--sx-tr-n) * 100%);
+    max-inline-size: none;
+    block-size: 100%;
+    object-fit: cover;
+  }
+  ${content(ID)} { opacity: clamp(0, (${P} - 0.975) * 1000, 1); }`;
+export function slices(count) {
+    return Array.from({ length: count }, (_, i) => ({
+        part: "slice",
+        vars: { "--i": i, "--d": i % 2 === 0 ? -1 : 1 },
+        media: true,
+    }));
+}
+/**
+ * The picture slides in as vertical slices from alternate sides, then hands
+ * over to the content. Needs a picture: `image` maps a carousel item to one;
+ * a `Reveal` takes `image`. (The "slicer" look, rebuilt.)
+ */
+export function slicer(options = {}) {
+    const count = Math.max(1, Math.round(options.count ?? 6));
+    const image = options.image;
+    return defineCss(ID, CSS, {
+        vars: { "--sx-tr-n": count },
+        nodes: slices(count),
+        media: image ? (item) => image(item) : undefined,
+    });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SLICER_SCHEMA = defineSchema()({
+    id: "slicer",
+    family: "transition",
+    factory: "slicer",
+    fields: {
+        count: { kind: "integer", label: "Slices", min: 2, max: 16, default: 6 },
+    },
+    code: ["image"],
+});

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

@@ -0,0 +1,13 @@
+import type { CssTransition } from "../../types.js";
+export interface SplitCurtainOptions {
+    /** `"x"` (default): the seam is vertical and the halves part sideways. `"y"`: they part up and down. */
+    readonly axis?: "x" | "y";
+    /** Panel colour in a reveal. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+}
+/**
+ * Opens from the middle like curtains. In a reveal, two coloured panels cover
+ * the content and slide apart (transform only). In a one-card carousel, the
+ * next card opens from the middle over the current one.
+ */
+export declare function splitCurtain(options?: SplitCurtainOptions): CssTransition;

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

@@ -0,0 +1,39 @@
+import { P, defineCss, inMode, rtl, sel, vars } from "./kit.js";
+const ID = "splitCurtain";
+const Q = `calc(1 - ${P})`;
+const H = "var(--sx-tr-h)";
+const CSS = `  ${sel(ID)} { --sx-tr-s: 1; }
+  ${rtl(ID)} { --sx-tr-s: -1; }
+  ${inMode(ID, "carousel")} {
+    clip-path: inset(calc(${Q} * (1 - ${H}) * 50%) calc(${Q} * ${H} * 50%));
+  }
+  ${inMode(ID, "reveal")} { overflow: clip; }
+  ${inMode(ID, "reveal")}::before,
+  ${inMode(ID, "reveal")}::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+    background: var(--sx-tr-color, var(--color-sx-primary));
+  }
+  ${inMode(ID, "reveal")}::before {
+    inset-inline-end: calc(${H} * 50%);
+    inset-block-end: calc((1 - ${H}) * 50%);
+    translate: calc(${P} * -101% * ${H} * var(--sx-tr-s)) calc(${P} * -101% * (1 - ${H}));
+  }
+  ${inMode(ID, "reveal")}::after {
+    inset-inline-start: calc(${H} * 50%);
+    inset-block-start: calc((1 - ${H}) * 50%);
+    translate: calc(${P} * 101% * ${H} * var(--sx-tr-s)) calc(${P} * 101% * (1 - ${H}));
+  }`;
+/**
+ * Opens from the middle like curtains. In a reveal, two coloured panels cover
+ * the content and slide apart (transform only). In a one-card carousel, the
+ * next card opens from the middle over the current one.
+ */
+export function splitCurtain(options = {}) {
+    return defineCss(ID, CSS, {
+        vars: vars({ "--sx-tr-h": (options.axis ?? "x") === "x" ? 1 : 0, "--sx-tr-color": options.color }),
+    });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SPLIT_CURTAIN_SCHEMA = defineSchema()({
+    id: "splitCurtain",
+    family: "transition",
+    factory: "splitCurtain",
+    fields: {
+        axis: { kind: "choice", label: "Axis", values: ["x", "y"], default: "x", labels: { x: "Part sideways", y: "Part up and down" } },
+        color: { kind: "color", label: "Panel colour", autoValue: "var(--color-sx-primary)", autoNote: "the primary colour" },
+    },
+});

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

@@ -0,0 +1,8 @@
+import type { CssTransition } from "../../types.js";
+import { type From } from "./kit.js";
+export interface WipeOptions {
+    /** Where the edge starts. `"start"` follows the reading direction. Default `"start"`. */
+    readonly from?: From;
+}
+/** A straight edge sweeps across and uncovers the content (`clip-path: inset()`). */
+export declare function wipe(options?: WipeOptions): CssTransition;

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

@@ -0,0 +1,16 @@
+import { P, defineCss, directionCss, fromVars, sel } from "./kit.js";
+const ID = "wipe";
+const Q = `calc(1 - ${P})`;
+const CSS = `${directionCss(ID)}
+  ${sel(ID)} {
+    clip-path: inset(
+      calc(${Q} * (1 - var(--sx-tr-h)) * var(--sx-tr-flip) * 100%)
+      calc(${Q} * var(--sx-tr-h) * (1 - var(--sx-tr-x)) * 100%)
+      calc(${Q} * (1 - var(--sx-tr-h)) * (1 - var(--sx-tr-flip)) * 100%)
+      calc(${Q} * var(--sx-tr-h) * var(--sx-tr-x) * 100%)
+    );
+  }`;
+/** A straight edge sweeps across and uncovers the content (`clip-path: inset()`). */
+export function wipe(options = {}) {
+    return defineCss(ID, CSS, { vars: fromVars(options.from ?? "start") });
+}

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

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

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

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const WIPE_SCHEMA = defineSchema()({
+    id: "wipe",
+    family: "transition",
+    factory: "wipe",
+    fields: {
+        from: { kind: "choice", label: "From", values: ["start", "end", "top", "bottom"], labels: { start: "Reading start", end: "Reading end", top: "Top", bottom: "Bottom" }, default: "start" },
+    },
+});

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

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

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

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const ZOOM_OUT_SCHEMA = defineSchema()({
+    id: "zoomOut",
+    family: "transition",
+    factory: "zoomOut",
+    fields: {
+        scale: { kind: "number", label: "Start zoom", min: 1, max: 3, step: 0.05, default: 1.3 },
+    },
+});

package/dist/transitions/effects/shader/chromaticShift.schema.d.ts

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

package/dist/transitions/effects/shader/chromaticShift.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+import { shaderFallbackField } from "../../../schema/common.js";
+export const CHROMATIC_SHIFT_SCHEMA = defineSchema()({
+    id: "chromaticShift",
+    family: "transition",
+    factory: "chromaticShift",
+    fields: {
+        from: { kind: "choice", label: "From", values: ["start", "end", "top", "bottom"], labels: { start: "Reading start", end: "Reading end", top: "Top", bottom: "Bottom" }, default: "start" },
+        strength: { kind: "number", label: "Split", min: 0, max: 0.5, step: 0.005, default: 0.04 },
+        fallback: shaderFallbackField(),
+    },
+});

package/dist/transitions/effects/shader/collection.d.ts

@@ -0,0 +1,53 @@
+import type { ShaderTransition } from "../../types.js";
+import type { From } from "../css/kit.js";
+import { type ShaderOptionsBase } from "./kit.js";
+export interface CrossZoomOptions extends ShaderOptionsBase {
+    /** How long the zoom streaks get halfway, 0–1. Default `0.4`. */
+    readonly strength?: number;
+}
+export declare const CROSS_ZOOM_FRAGMENT = "\nuniform float u_strength;\nvec4 transition(vec2 uv) {\n  float p = u_progress;\n  float blur = sin(p * SX_PI) * u_strength;\n  float m = smoothstep(0.3, 0.7, p);\n  vec2 c = vec2(0.5);\n  vec4 sum = vec4(0.0);\n  for (int i = 0; i < 12; i++) {\n    vec2 q = mix(uv, c, float(i) / 11.0 * blur);\n    vec4 a = getFrom(c + (q - c) / (1.0 + p * 0.6));\n    vec4 b = getTo(c + (q - c) / (1.0 + (1.0 - p) * 0.6));\n    sum += mix(a, b, m);\n  }\n  return sum / 12.0;\n}\n";
+/** A zoom blur rushes into the centre and out again on the new picture. */
+export declare function crossZoom(options?: CrossZoomOptions): ShaderTransition;
+export interface SwirlOptions extends ShaderOptionsBase {
+    /** Full turns at the centre halfway. Default `1`. */
+    readonly turns?: number;
+}
+export declare const SWIRL_FRAGMENT = "\nuniform float u_turns;\nvec4 transition(vec2 uv) {\n  float p = u_progress;\n  vec2 aspect = vec2(sx_aspect(), 1.0);\n  vec2 d = (uv - 0.5) * aspect;\n  float fall = 1.0 - smoothstep(0.0, 0.75, length(d));\n  float angle = sin(p * SX_PI) * u_turns * 2.0 * SX_PI * fall * fall;\n  float s = sin(angle);\n  float k = cos(angle);\n  vec2 q = vec2(k * d.x - s * d.y, s * d.x + k * d.y) / aspect + 0.5;\n  return mix(getFrom(q), getTo(q), smoothstep(0.35, 0.65, p));\n}\n";
+/** The middle twists like a whirlpool while the pictures swap. */
+export declare function swirl(options?: SwirlOptions): ShaderTransition;
+export interface DreamyOptions extends ShaderOptionsBase {
+    /** Waves down the height. Default `3`. */
+    readonly waves?: number;
+    /** How far the waves bend the pictures. Default `0.04`. */
+    readonly amplitude?: number;
+}
+export declare const DREAMY_FRAGMENT = "\nuniform float u_waves;\nuniform float u_amplitude;\nvec4 transition(vec2 uv) {\n  float p = u_progress;\n  float e = sin(p * SX_PI);\n  float wave = sin((uv.y * u_waves + p) * 2.0 * SX_PI);\n  vec2 off = vec2(wave * u_amplitude * e, 0.0);\n  vec4 c = mix(getFrom(uv + off), getTo(uv - off), p);\n  return c + vec4(vec3(0.12 * e) * c.a, 0.0);\n}\n";
+/** Soft waves ripple across while the pictures cross, with a brief glow. */
+export declare function dreamy(options?: DreamyOptions): ShaderTransition;
+export interface DirectionalWarpOptions extends ShaderOptionsBase {
+    /** Where the edge starts. Default `"start"`. */
+    readonly from?: From;
+    /** Width of the soft edge, 0–1. Default `0.3`. */
+    readonly softness?: number;
+}
+export declare const DIRECTIONAL_WARP_FRAGMENT = "\nuniform vec2 u_dir;\nuniform float u_softness;\nvec4 transition(vec2 uv) {\n  vec2 dir = sx_dir(u_dir);\n  vec2 c = uv - 0.5;\n  float a = dot(c, dir) + 0.5;\n  float edge = u_progress * (1.0 + u_softness) - u_softness;\n  float m = 1.0 - smoothstep(0.0, u_softness, a - edge);\n  return mix(getFrom(c * (1.0 - m) + 0.5), getTo(c * m + 0.5), m);\n}\n";
+/** A soft edge sweeps across; the old picture shrinks away and the new one grows in behind it. */
+export declare function directionalWarp(options?: DirectionalWarpOptions): ShaderTransition;
+export interface MorphOptions extends ShaderOptionsBase {
+    /** How far a pixel travels towards its colour in the other picture. Default `0.1`. */
+    readonly strength?: number;
+}
+export declare const MORPH_FRAGMENT = "\nuniform float u_strength;\nvec4 transition(vec2 uv) {\n  float p = u_progress;\n  vec4 a = getFrom(uv);\n  vec4 b = getTo(uv);\n  vec2 flow = (b.rg - a.rg + vec2(b.b - a.b, a.b - b.b) * 0.5) * u_strength;\n  return mix(getFrom(uv + flow * p), getTo(uv - flow * (1.0 - p)), p);\n}\n";
+/** Each pixel flows towards where its colour sits in the other picture. */
+export declare function morph(options?: MorphOptions): ShaderTransition;
+export interface GridFlipOptions extends ShaderOptionsBase {
+    /** Tiles across. Default `4`. */
+    readonly columns?: number;
+    /** Tiles down. Default `3`. */
+    readonly rows?: number;
+    /** What shows behind a tile while it turns. Default `var(--color-sx-primary)`. */
+    readonly backdrop?: string;
+}
+export declare const GRID_FLIP_FRAGMENT = "\nuniform vec2 u_grid;\nuniform vec4 u_c0;\nvec4 transition(vec2 uv) {\n  float p = u_progress;\n  vec2 cell = floor(uv * u_grid);\n  vec2 f = fract(uv * u_grid);\n  float col = u_rtl > 0.5 ? u_grid.x - 1.0 - cell.x : cell.x;\n  float order = (col + (u_grid.y - 1.0 - cell.y) * 0.5) / max(u_grid.x + u_grid.y * 0.5 - 1.5, 1.0);\n  float start = clamp(order, 0.0, 1.0) * 0.5 + sx_hash(cell) * 0.1;\n  float t = clamp((p - start) / 0.4, 0.0, 1.0);\n  float w = abs(cos(t * SX_PI));\n  float x = (f.x - 0.5) / max(w, 0.001) + 0.5;\n  vec4 back = vec4(u_c0.rgb * u_c0.a, u_c0.a);\n  if (x < 0.0 || x > 1.0) return back;\n  vec2 q = (cell + vec2(x, f.y)) / u_grid;\n  vec4 face = t < 0.5 ? getFrom(q) : getTo(q);\n  return mix(back, face, 0.55 + 0.45 * w);\n}\n";
+/** Tiles turn over one after another and show the new picture on their backs. */
+export declare function gridFlip(options?: GridFlipOptions): ShaderTransition;

package/dist/transitions/effects/shader/collection.js

@@ -0,0 +1,143 @@
+// Our own collection of classic two-picture transitions (the atlas's
+// "gl-transitions collection" row): crossZoom, swirl, dreamy, directionalWarp,
+// morph, gridFlip. gl-transitions was only looked at; every fragment here is
+// written from scratch (WebGL1). See ../../shader/program.ts for the contract.
+import { defineShader, travel, within } from "./kit.js";
+// Twelve samples along the line to the centre make the zoom blur; the old
+// picture zooms in, the new one arrives zoomed and settles.
+export const CROSS_ZOOM_FRAGMENT = `
+uniform float u_strength;
+vec4 transition(vec2 uv) {
+  float p = u_progress;
+  float blur = sin(p * SX_PI) * u_strength;
+  float m = smoothstep(0.3, 0.7, p);
+  vec2 c = vec2(0.5);
+  vec4 sum = vec4(0.0);
+  for (int i = 0; i < 12; i++) {
+    vec2 q = mix(uv, c, float(i) / 11.0 * blur);
+    vec4 a = getFrom(c + (q - c) / (1.0 + p * 0.6));
+    vec4 b = getTo(c + (q - c) / (1.0 + (1.0 - p) * 0.6));
+    sum += mix(a, b, m);
+  }
+  return sum / 12.0;
+}
+`;
+/** A zoom blur rushes into the centre and out again on the new picture. */
+export function crossZoom(options = {}) {
+    return defineShader("crossZoom", CROSS_ZOOM_FRAGMENT, {
+        uniforms: { u_strength: within(options.strength ?? 0.4, 0, 1) },
+        fallback: options.fallback,
+    });
+}
+export const SWIRL_FRAGMENT = `
+uniform float u_turns;
+vec4 transition(vec2 uv) {
+  float p = u_progress;
+  vec2 aspect = vec2(sx_aspect(), 1.0);
+  vec2 d = (uv - 0.5) * aspect;
+  float fall = 1.0 - smoothstep(0.0, 0.75, length(d));
+  float angle = sin(p * SX_PI) * u_turns * 2.0 * SX_PI * fall * fall;
+  float s = sin(angle);
+  float k = cos(angle);
+  vec2 q = vec2(k * d.x - s * d.y, s * d.x + k * d.y) / aspect + 0.5;
+  return mix(getFrom(q), getTo(q), smoothstep(0.35, 0.65, p));
+}
+`;
+/** The middle twists like a whirlpool while the pictures swap. */
+export function swirl(options = {}) {
+    return defineShader("swirl", SWIRL_FRAGMENT, {
+        uniforms: { u_turns: within(options.turns ?? 1, -6, 6) },
+        fallback: options.fallback,
+    });
+}
+export const DREAMY_FRAGMENT = `
+uniform float u_waves;
+uniform float u_amplitude;
+vec4 transition(vec2 uv) {
+  float p = u_progress;
+  float e = sin(p * SX_PI);
+  float wave = sin((uv.y * u_waves + p) * 2.0 * SX_PI);
+  vec2 off = vec2(wave * u_amplitude * e, 0.0);
+  vec4 c = mix(getFrom(uv + off), getTo(uv - off), p);
+  return c + vec4(vec3(0.12 * e) * c.a, 0.0);
+}
+`;
+/** Soft waves ripple across while the pictures cross, with a brief glow. */
+export function dreamy(options = {}) {
+    return defineShader("dreamy", DREAMY_FRAGMENT, {
+        uniforms: { u_waves: within(options.waves ?? 3, 0, 40), u_amplitude: within(options.amplitude ?? 0.04, 0, 0.3) },
+        fallback: options.fallback,
+    });
+}
+// a runs 0 → 1 across the box along the travel direction; the edge moves from
+// -softness to 1, so p = 0 and p = 1 are clean. Behind the edge the new picture
+// grows out of the centre; ahead of it the old one shrinks into it.
+export const DIRECTIONAL_WARP_FRAGMENT = `
+uniform vec2 u_dir;
+uniform float u_softness;
+vec4 transition(vec2 uv) {
+  vec2 dir = sx_dir(u_dir);
+  vec2 c = uv - 0.5;
+  float a = dot(c, dir) + 0.5;
+  float edge = u_progress * (1.0 + u_softness) - u_softness;
+  float m = 1.0 - smoothstep(0.0, u_softness, a - edge);
+  return mix(getFrom(c * (1.0 - m) + 0.5), getTo(c * m + 0.5), m);
+}
+`;
+/** A soft edge sweeps across; the old picture shrinks away and the new one grows in behind it. */
+export function directionalWarp(options = {}) {
+    return defineShader("directionalWarp", DIRECTIONAL_WARP_FRAGMENT, {
+        uniforms: { u_dir: travel(options.from ?? "start"), u_softness: within(options.softness ?? 0.3, 0.01, 1) },
+        fallback: options.fallback,
+    });
+}
+export const MORPH_FRAGMENT = `
+uniform float u_strength;
+vec4 transition(vec2 uv) {
+  float p = u_progress;
+  vec4 a = getFrom(uv);
+  vec4 b = getTo(uv);
+  vec2 flow = (b.rg - a.rg + vec2(b.b - a.b, a.b - b.b) * 0.5) * u_strength;
+  return mix(getFrom(uv + flow * p), getTo(uv - flow * (1.0 - p)), p);
+}
+`;
+/** Each pixel flows towards where its colour sits in the other picture. */
+export function morph(options = {}) {
+    return defineShader("morph", MORPH_FRAGMENT, {
+        uniforms: { u_strength: within(options.strength ?? 0.1, 0, 1) },
+        fallback: options.fallback,
+    });
+}
+// Each tile turns over 40% of the whole, starting in reading order (with a
+// little seeded jitter), so the last one lands exactly at p = 1. A turning
+// tile is squeezed to |cos| of its width and darkens towards the backdrop.
+export const GRID_FLIP_FRAGMENT = `
+uniform vec2 u_grid;
+uniform vec4 u_c0;
+vec4 transition(vec2 uv) {
+  float p = u_progress;
+  vec2 cell = floor(uv * u_grid);
+  vec2 f = fract(uv * u_grid);
+  float col = u_rtl > 0.5 ? u_grid.x - 1.0 - cell.x : cell.x;
+  float order = (col + (u_grid.y - 1.0 - cell.y) * 0.5) / max(u_grid.x + u_grid.y * 0.5 - 1.5, 1.0);
+  float start = clamp(order, 0.0, 1.0) * 0.5 + sx_hash(cell) * 0.1;
+  float t = clamp((p - start) / 0.4, 0.0, 1.0);
+  float w = abs(cos(t * SX_PI));
+  float x = (f.x - 0.5) / max(w, 0.001) + 0.5;
+  vec4 back = vec4(u_c0.rgb * u_c0.a, u_c0.a);
+  if (x < 0.0 || x > 1.0) return back;
+  vec2 q = (cell + vec2(x, f.y)) / u_grid;
+  vec4 face = t < 0.5 ? getFrom(q) : getTo(q);
+  return mix(back, face, 0.55 + 0.45 * w);
+}
+`;
+/** Tiles turn over one after another and show the new picture on their backs. */
+export function gridFlip(options = {}) {
+    return defineShader("gridFlip", GRID_FLIP_FRAGMENT, {
+        uniforms: {
+            u_grid: [Math.round(within(options.columns ?? 4, 1, 24)), Math.round(within(options.rows ?? 3, 1, 24))],
+        },
+        colors: [options.backdrop ?? "var(--color-sx-primary)"],
+        fallback: options.fallback,
+    });
+}

package/dist/transitions/effects/shader/crossZoom.schema.d.ts

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

package/dist/transitions/effects/shader/crossZoom.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+import { shaderFallbackField } from "../../../schema/common.js";
+export const CROSS_ZOOM_SCHEMA = defineSchema()({
+    id: "crossZoom",
+    family: "transition",
+    factory: "crossZoom",
+    fields: {
+        strength: { kind: "number", label: "Streaks", min: 0, max: 1, step: 0.01, default: 0.4 },
+        fallback: shaderFallbackField(),
+    },
+});

package/dist/transitions/effects/shader/directionalWarp.schema.d.ts

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

package/dist/transitions/effects/shader/directionalWarp.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+import { shaderFallbackField } from "../../../schema/common.js";
+export const DIRECTIONAL_WARP_SCHEMA = defineSchema()({
+    id: "directionalWarp",
+    family: "transition",
+    factory: "directionalWarp",
+    fields: {
+        from: { kind: "choice", label: "From", values: ["start", "end", "top", "bottom"], labels: { start: "Reading start", end: "Reading end", top: "Top", bottom: "Bottom" }, default: "start" },
+        softness: { kind: "number", label: "Softness", min: 0.01, max: 1, step: 0.01, default: 0.3 },
+        fallback: shaderFallbackField(),
+    },
+});

package/dist/transitions/effects/shader/displacement.schema.d.ts

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