fancy-ui-svelte 0.13.0 → 0.14.0

package/dist/fancy-ui/compare/Compare.test.js

@@ -1,6 +1,6 @@
-import { render, cleanup } from "@testing-library/svelte";
+import { render, cleanup, fireEvent } from "@testing-library/svelte";
 import { afterEach, describe, it, expect } from "vitest";
-import Compare from "./Compare.svelte";
+import Compare, { beamPalette, beamStep, keyStep, COMPARE_BEAM_COLORS } from "./Compare.svelte";
 describe("Compare", () => {
     afterEach(cleanup);
     it('renders a container with role="slider"', () => {
@@ -55,3 +55,83 @@ describe("Compare", () => {
         expect(slider).toHaveAttribute("aria-valuemax", "100");
     });
 });
+describe("Compare beam", () => {
+    afterEach(cleanup);
+    it("renders the beam layers and a glass handle", () => {
+        const { container } = render(Compare);
+        for (const part of ["glow", "trail", "fringe", "core", "pulse"]) {
+            expect(container.querySelector(`.compare-beam__${part}`)).toBeInTheDocument();
+        }
+        expect(container.querySelector(".compare-handle")).toBeInTheDocument();
+    });
+    it("hides the handle when showHandlebar is false", () => {
+        const { container } = render(Compare, { props: { showHandlebar: false } });
+        expect(container.querySelector(".compare-handle")).toBeNull();
+    });
+    it("sets the beam colours as CSS variables", () => {
+        const { container } = render(Compare, { props: { beamColors: ["red", "lime", "blue"] } });
+        const root = container.querySelector('[role="slider"]');
+        expect(root.style.getPropertyValue("--cmp-c1")).toBe("red");
+        expect(root.style.getPropertyValue("--cmp-c2")).toBe("lime");
+        expect(root.style.getPropertyValue("--cmp-c3")).toBe("blue");
+    });
+    it("has an accessible name", () => {
+        const { container } = render(Compare, { props: { label: "Before and after" } });
+        expect(container.querySelector('[role="slider"]')).toHaveAttribute("aria-label", "Before and after");
+    });
+    it("moves with the arrow keys, Shift for big steps, Home/End for the ends", async () => {
+        const seen = [];
+        const { container } = render(Compare, {
+            props: { onpercentagechange: (p) => seen.push(p) },
+        });
+        const slider = container.querySelector('[role="slider"]');
+        await fireEvent.keyDown(slider, { key: "ArrowRight" });
+        expect(slider).toHaveAttribute("aria-valuenow", "52");
+        await fireEvent.keyDown(slider, { key: "ArrowLeft", shiftKey: true });
+        expect(slider).toHaveAttribute("aria-valuenow", "42");
+        await fireEvent.keyDown(slider, { key: "End" });
+        expect(slider).toHaveAttribute("aria-valuenow", "100");
+        await fireEvent.keyDown(slider, { key: "Home" });
+        expect(slider).toHaveAttribute("aria-valuenow", "0");
+        expect(seen).toEqual([52, 42, 100, 0]);
+    });
+});
+describe("beamPalette", () => {
+    it("falls back to the default colours", () => {
+        expect(beamPalette(undefined)).toEqual(COMPARE_BEAM_COLORS);
+        expect(beamPalette([])).toEqual(COMPARE_BEAM_COLORS);
+    });
+    it("spreads one, two or many colours over three slots", () => {
+        expect(beamPalette(["red"])).toEqual(["red", "red", "red"]);
+        expect(beamPalette(["red", "blue"])).toEqual(["red", "color-mix(in srgb, red, blue)", "blue"]);
+        expect(beamPalette(["a", "b", "c", "d", "e"])).toEqual(["a", "c", "e"]);
+    });
+});
+describe("beamStep", () => {
+    it("stretches the trail with speed, on the side of the motion", () => {
+        expect(beamStep(0, 0, 10, 0).trail).toBeGreaterThan(0);
+        expect(beamStep(0, 0, -10, 0).trail).toBeLessThan(0);
+    });
+    it("caps the trail and lets it settle to zero", () => {
+        expect(beamStep(0, 0, 1000, 0).trail).toBe(140);
+        let s = { trail: 60, energy: 0 };
+        for (let i = 0; i < 200; i++)
+            s = beamStep(s.trail, s.energy, 0, 0);
+        expect(s.trail).toBe(0);
+    });
+    it("eases the energy toward its target, kicked up by speed", () => {
+        let s = { trail: 0, energy: 0 };
+        for (let i = 0; i < 200; i++)
+            s = beamStep(s.trail, s.energy, 0, 1);
+        expect(s.energy).toBeCloseTo(1, 2);
+        expect(beamStep(0, 0, 20, 0).energy).toBeGreaterThan(0);
+    });
+});
+describe("keyStep", () => {
+    it("maps keys to positions and clamps", () => {
+        expect(keyStep("ArrowRight", false, 99)).toBe(100);
+        expect(keyStep("ArrowLeft", true, 5)).toBe(0);
+        expect(keyStep("PageUp", false, 50)).toBe(60);
+        expect(keyStep("Enter", false, 50)).toBeNull();
+    });
+});

package/dist/fancy-ui/compare/README.md

@@ -1,13 +1,18 @@
 # Compare
 
-A before/after image comparison slider with smooth interactions.
+A before/after image comparison slider split by a blade of light.
 
 ## Features
 
 - **Two slide modes**: `hover` (follows cursor) or `drag` (click and drag)
 - **Autoplay**: Automatic back-and-forth animation
 - **Custom content**: Supports images or custom snippets for both sides
-- **Decorative effects**: Includes gradient line, glow effects, and star field
+- **A seam of light**: a white-hot core with a chromatic fringe and a glow that spills onto both sides; pulses of light run along it, faster while you interact
+- **Motion trail**: moving the seam leaves a trail behind it that stretches with the speed of the gesture and settles when it stops
+- **Glass handle**: a frosted bead with a ring of light round it
+- **Keyboard**: arrow keys move by 2%, Shift+arrows and Page Up/Down by 10%, Home/End jump to the ends
+- **Soft return**: in hover mode the seam glides back to its resting place when the pointer leaves
+- **Reduced motion**: no pulses, no trail, no glide
 - **Touch support**: Works on mobile devices
 
 ## Props
@@ -26,6 +31,8 @@ A before/after image comparison slider with smooth interactions.
 | `showHandlebar` | `boolean` | `true` | Show the drag handle |
 | `autoplay` | `boolean` | `false` | Enable auto-animation |
 | `autoplayDuration` | `number` | `5000` | Duration of one autoplay cycle (ms) |
+| `beamColors` | `string[]` | `['#22d3ee', '#818cf8', '#f472b6']` | Beam colours: left fringe, centre, right fringe (one or more colours) |
+| `label` | `string` | `'Comparison slider'` | Accessible name of the slider |
 
 ## Events (Callbacks)
 

package/dist/fancy-ui/datamosh-transition/DatamoshTransition.ssr.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/fancy-ui/datamosh-transition/DatamoshTransition.ssr.test.js

@@ -0,0 +1,24 @@
+// @vitest-environment node
+import { describe, it, expect } from "vitest";
+import { render } from "svelte/server";
+import DatamoshTransition from "./DatamoshTransition.svelte";
+describe("DatamoshTransition (SSR)", () => {
+    it("renders an idle, hidden overlay without touching window", () => {
+        const { body } = render(DatamoshTransition, { props: { class: "custom" } });
+        expect(body).toContain("datamosh-transition");
+        expect(body).toContain("custom");
+        expect(body).toContain("<canvas");
+        expect(body).toContain('data-state="idle"');
+        expect(body).toContain("invisible");
+        expect(body).toContain('aria-hidden="true"');
+    });
+    it("is byte-identical across renders", () => {
+        const a = render(DatamoshTransition, { props: { seed: 3 } }).body;
+        const b = render(DatamoshTransition, { props: { seed: 3 } }).body;
+        expect(a).toBe(b);
+    });
+    it("renders deterministically with a picture source", () => {
+        const props = { source: "/sunset.svg", variant: "split" };
+        expect(render(DatamoshTransition, { props }).body).toBe(render(DatamoshTransition, { props }).body);
+    });
+});

package/dist/fancy-ui/datamosh-transition/DatamoshTransition.svelte

@@ -0,0 +1,479 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from "svelte/elements";
+	import type {
+		DatamoshEffect,
+		DatamoshPaletteName,
+		DatamoshSweep,
+	} from "./datamosh-transition-core.js";
+
+	export type DatamoshTransitionPhase = "idle" | "covering" | "covered" | "revealing";
+
+	/**
+	 * DatamoshTransition — a page-transition overlay that looks like a corrupted
+	 * video decode.
+	 *
+	 * A fixed grid of columns (narrow on the left, wide on the right) fills with
+	 * flat blocks of saturated colour. Inside each column a stack of tiles falls
+	 * along one sigmoid: slivers at the edges, one tile snapping open through
+	 * the middle. `cover()` drops the columns over the page like a curtain,
+	 * right to left; `reveal()` lets them fall away. Nothing moves sideways.
+	 *
+	 * Mount once (root layout) and drive it from your router's navigation hook.
+	 */
+	interface BaseProps {
+		/** Additional classes on the overlay */
+		class?: string;
+		/** Bindable overlay element */
+		ref?: HTMLDivElement | null;
+		/**
+		 * Palette name or colour list (hex or rgb()). The lightest and darkest
+		 * colours recur most often.
+		 */
+		colors?: string[] | DatamoshPaletteName;
+		/** Shape of the covering band: curtain, rise, split or interlace */
+		variant?: DatamoshEffect;
+		/** Order in which the columns move */
+		sweep?: DatamoshSweep;
+		/**
+		 * Picture to decode: tiles take their colours from it instead of the
+		 * palette. A URL (same-origin or CORS-enabled), an image or a canvas.
+		 */
+		source?: string | HTMLImageElement | HTMLCanvasElement;
+		/** Seed for the colour order — same seed, same strip */
+		seed?: number;
+		/** Number of columns */
+		columns?: number;
+		/** Column edge exponent: 1 = uniform grid, higher = wider columns to the right */
+		power?: number;
+		/** Tiles per column stack (forced odd) */
+		tiles?: number;
+		/** Time for one column to cover, ms */
+		coverDuration?: number;
+		/** Time for one column to clear, ms */
+		revealDuration?: number;
+		/** Delay between neighbouring columns, ms (rightmost first) */
+		stagger?: number;
+		/** Speed of the falling tiles, 1 = default */
+		speed?: number;
+		/** Fill the positioned parent instead of the viewport */
+		contained?: boolean;
+		/** Stacking order of the overlay */
+		zIndex?: number;
+		/** Current phase (read-only, bindable) */
+		phase?: DatamoshTransitionPhase;
+		/** Called once the page is fully covered */
+		oncovered?: () => void;
+		/** Called once the page is fully revealed */
+		onrevealed?: () => void;
+	}
+
+	export type DatamoshTransitionProps = BaseProps &
+		Omit<HTMLAttributes<HTMLDivElement>, keyof BaseProps>;
+</script>
+
+<script lang="ts">
+	import { onMount, untrack } from "svelte";
+	import { cn } from "../../utils.js";
+	import { createReducedMotion } from "../_internals/motion/media-query.svelte.js";
+	import {
+		BLEED,
+		CYCLE,
+		DEFAULT_COLUMNS,
+		DEFAULT_POWER,
+		DEFAULT_TILES,
+		FALL_STAGGER,
+		buildStrip,
+		columnBand,
+		columnDelays,
+		columnEdges,
+		columnFlow,
+		columnTiles,
+		coverFit,
+		sampleSource,
+		sourceSlot,
+		createCoverage,
+		easeEdge,
+		oddTiles,
+		paletteRoles,
+		resolvePalette,
+		settleCoverage,
+		stepCoverage,
+		stripIndex,
+		type Coverage,
+		type Direction,
+	} from "./datamosh-transition-core.js";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		colors = "broadcast",
+		variant = "curtain",
+		sweep = "right",
+		source,
+		seed = 1,
+		columns = DEFAULT_COLUMNS,
+		power = DEFAULT_POWER,
+		tiles = DEFAULT_TILES,
+		coverDuration = 380,
+		revealDuration = 480,
+		stagger = 28,
+		speed = 1,
+		contained = false,
+		zIndex = 9999,
+		phase = $bindable("idle"),
+		oncovered,
+		onrevealed,
+		...restProps
+	}: DatamoshTransitionProps = $props();
+
+	const reduced = createReducedMotion();
+	$effect(() => reduced.start());
+
+	const palette = $derived(resolvePalette(colors));
+	const columnsC = $derived(
+		Math.max(1, Math.round(Number.isFinite(columns) ? columns : DEFAULT_COLUMNS))
+	);
+	const powerC = $derived(Number.isFinite(power) && power > 0 ? power : DEFAULT_POWER);
+	const tilesC = $derived(oddTiles(tiles));
+	const speedC = $derived(Number.isFinite(speed) && speed > 0 ? speed : 1);
+	const strip = $derived(buildStrip(seed, palette));
+	const delays = $derived(
+		columnDelays(columnsC, sweep, Math.max(0, Number.isFinite(stagger) ? stagger : 0) / 1000, seed)
+	);
+	/** Darkest colour as a backing fill, so rounding seams never show the page through. */
+	const backing = $derived(palette[paletteRoles(palette).darks[0] ?? 0] ?? "#14101f");
+
+	let canvasEl: HTMLCanvasElement | null = $state(null);
+
+	// --- plain closure state (touched every frame, never rendered) --------------
+
+	let ctx: CanvasRenderingContext2D | null = null;
+	let w = 0;
+	let h = 0;
+	let dpr = 1;
+	let edges: number[] = [];
+	let cov: Coverage = createCoverage(DEFAULT_COLUMNS);
+	let direction: Direction = "reveal";
+	let phaseTime = 0;
+	let elapsed = 0;
+	let rafId: number | null = null;
+	let lastT = 0;
+	let pending: Array<() => void> = [];
+	/** Loaded picture, and its colours per `[column][slot]` for the current box. */
+	let sourceImage: CanvasImageSource | null = null;
+	let sourceSize = { w: 0, h: 0 };
+	let sourceTable: string[][] | null = null;
+
+	// --- promises ------------------------------------------------------------------
+
+	function settlePending() {
+		const list = pending;
+		pending = [];
+		for (const resolve of list) resolve();
+	}
+
+	function finish(dir: Direction) {
+		settleCoverage(cov, dir);
+		phase = dir === "cover" ? "covered" : "idle";
+		if (dir === "reveal") {
+			stopLoop();
+			clear();
+		} else if (!reduced.current) {
+			requestFrame();
+		} else {
+			draw();
+		}
+		settlePending();
+		if (dir === "cover") oncovered?.();
+		else onrevealed?.();
+	}
+
+	function run(dir: Direction): Promise<void> {
+		// A superseded call resolves now: its caller moves on, the new phase takes over.
+		settlePending();
+		const promise = new Promise<void>((resolve) => pending.push(resolve));
+
+		// Already there: nothing to animate, no callback.
+		if ((dir === "reveal" && phase === "idle") || (dir === "cover" && phase === "covered")) {
+			settlePending();
+			return promise;
+		}
+
+		direction = dir;
+		phaseTime = 0;
+		phase = dir === "cover" ? "covering" : "revealing";
+
+		const instant =
+			!ctx ||
+			reduced.current ||
+			typeof requestAnimationFrame !== "function" ||
+			(typeof document !== "undefined" && document.hidden);
+		if (instant) finish(dir);
+		else requestFrame();
+		return promise;
+	}
+
+	/** Cover the page. Resolves once every column is down. */
+	export function cover(): Promise<void> {
+		return run("cover");
+	}
+
+	/** Clear the page. Resolves once every column has fallen away. */
+	export function reveal(): Promise<void> {
+		return run("reveal");
+	}
+
+	/** Cover, then reveal — a one-shot flash. */
+	export async function play(): Promise<void> {
+		await cover();
+		await reveal();
+	}
+
+	// --- setup ---------------------------------------------------------------------
+
+	function currentDpr() {
+		return Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 2);
+	}
+
+	/** Sample the loaded picture onto the current grid; any failure falls back to the palette. */
+	function buildSourceTable() {
+		sourceTable = null;
+		if (!sourceImage || !edges.length || typeof document === "undefined") return;
+		const pw = 96;
+		const ph = Math.max(8, Math.round((pw * h) / Math.max(1, w)));
+		try {
+			const scratch = document.createElement("canvas");
+			scratch.width = pw;
+			scratch.height = ph;
+			const sctx = scratch.getContext("2d", { willReadFrequently: true });
+			if (!sctx) return;
+			const fit = coverFit(sourceSize.w, sourceSize.h, pw, ph);
+			sctx.drawImage(sourceImage, fit.sx, fit.sy, fit.sw, fit.sh, 0, 0, pw, ph);
+			const { data } = sctx.getImageData(0, 0, pw, ph);
+			const norm = edges.map((e) => e / Math.max(1, w));
+			sourceTable = sampleSource(data, pw, ph, norm, tilesC);
+		} catch {
+			// Cross-origin picture without CORS taints the canvas: keep the palette.
+			sourceTable = null;
+		}
+	}
+
+	function measure() {
+		const host = ref;
+		const canvas = canvasEl;
+		if (!host || !canvas || !ctx) return;
+		dpr = currentDpr();
+		w = Math.max(1, Math.round(host.clientWidth * dpr));
+		h = Math.max(1, Math.round(host.clientHeight * dpr));
+		canvas.width = w;
+		canvas.height = h;
+		ctx.imageSmoothingEnabled = false;
+		edges = columnEdges(w, columnsC, powerC);
+		buildSourceTable();
+		if (cov.top.length !== columnsC) {
+			const covered = phase === "covered" || phase === "covering";
+			cov = createCoverage(columnsC, covered);
+		}
+		if (phase !== "idle") draw();
+	}
+
+	// --- loop ----------------------------------------------------------------------
+
+	function requestFrame() {
+		if (rafId !== null || !ctx || typeof requestAnimationFrame !== "function") return;
+		lastT = 0;
+		rafId = requestAnimationFrame(tick);
+	}
+
+	function stopLoop() {
+		if (rafId !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(rafId);
+		rafId = null;
+	}
+
+	function tick(now: number) {
+		rafId = null;
+		if (!ctx) return;
+		// Time-based: identical pacing at 60 Hz and 120 Hz; long stalls clamp.
+		const dt = lastT ? Math.min(0.05, Math.max(0, (now - lastT) / 1000)) : 0;
+		lastT = now;
+		elapsed += dt;
+
+		if (phase === "covering" || phase === "revealing") {
+			phaseTime += dt;
+			const duration = (direction === "cover" ? coverDuration : revealDuration) / 1000;
+			const done = stepCoverage(cov, direction, phaseTime, dt, duration, delays);
+			if (done) {
+				finish(direction);
+				return;
+			}
+		}
+
+		draw();
+		if (phase !== "idle") rafId = requestAnimationFrame(tick);
+	}
+
+	function clear() {
+		ctx?.clearRect(0, 0, w, h);
+	}
+
+	function draw() {
+		const c = ctx;
+		if (!c || !edges.length) return;
+		c.clearRect(0, 0, w, h);
+		const bleed = Math.round(BLEED * h);
+		const len = palette.length;
+		// Reduced motion paints one still frame part-way into a step.
+		const t = reduced.current ? CYCLE * 0.45 + columnsC * FALL_STAGGER : elapsed;
+
+		for (let i = 0; i < columnsC; i++) {
+			const x0 = edges[i]!;
+			const cw = edges[i + 1]! - x0;
+			if (cw <= 0) continue;
+			const band = columnBand(variant, i, easeEdge(cov.top[i] ?? 0), easeEdge(cov.bot[i] ?? 0));
+			const bandTop = Math.round(band.y0 * h);
+			const bandBot = Math.round(band.y1 * h);
+			if (bandBot <= bandTop) continue;
+
+			c.fillStyle = backing;
+			c.fillRect(x0, bandTop, cw, bandBot - bandTop);
+
+			const flow = columnFlow(t, i, columnsC, speedC);
+			for (const tile of columnTiles(flow, tilesC, h, bleed)) {
+				// Mirrored stacks rise instead of fall; the overhang still laps the next tile.
+				const top = band.mirror ? h - tile.bot : tile.top;
+				const bot = band.mirror ? h - tile.top : tile.bot;
+				const y0 = Math.max(bandTop, top);
+				const y1 = Math.min(bandBot, bot);
+				if (y1 <= y0) continue;
+				c.fillStyle =
+					sourceTable?.[i]?.[sourceSlot(tile.id, i, tilesC)] ??
+					palette[stripIndex(strip, tile.id, i) % len]!;
+				c.fillRect(x0, y0, cw, y1 - y0);
+			}
+		}
+	}
+
+	// --- mount ---------------------------------------------------------------------
+
+	onMount(() => {
+		const host = ref;
+		const canvas = canvasEl;
+		if (!host || !canvas) return;
+		ctx = canvas.getContext("2d");
+		if (!ctx) return;
+		measure();
+
+		let ro: ResizeObserver | undefined;
+		if (typeof ResizeObserver !== "undefined") {
+			ro = new ResizeObserver(() => measure());
+			ro.observe(host);
+		}
+
+		// A hidden tab stops rAF: finish the phase so an awaiting navigation never hangs.
+		const onVisibility = () => {
+			if (!document.hidden) {
+				if (phase !== "idle") requestFrame();
+				return;
+			}
+			stopLoop();
+			if (phase === "covering") finish("cover");
+			else if (phase === "revealing") finish("reveal");
+		};
+		document.addEventListener("visibilitychange", onVisibility);
+
+		return () => {
+			stopLoop();
+			ro?.disconnect();
+			document.removeEventListener("visibilitychange", onVisibility);
+			settlePending();
+			ctx = null;
+		};
+	});
+
+	// --- reactivity ------------------------------------------------------------------
+
+	// Load the picture source; a stale load never overwrites a newer one.
+	$effect(() => {
+		const src = source;
+		void tilesC;
+		untrack(() => {
+			sourceImage = null;
+			sourceTable = null;
+		});
+		if (!src || typeof window === "undefined") return;
+
+		let cancelled = false;
+		const ready = (img: CanvasImageSource, iw: number, ih: number) => {
+			if (cancelled || iw <= 0 || ih <= 0) return;
+			sourceImage = img;
+			sourceSize = { w: iw, h: ih };
+			untrack(() => {
+				buildSourceTable();
+				if (phase !== "idle") draw();
+			});
+		};
+
+		if (typeof src !== "string") {
+			if (src instanceof HTMLCanvasElement) ready(src, src.width, src.height);
+			else if (src.complete && src.naturalWidth) ready(src, src.naturalWidth, src.naturalHeight);
+			else
+				src.addEventListener("load", () => ready(src, src.naturalWidth, src.naturalHeight), {
+					once: true,
+				});
+			return () => {
+				cancelled = true;
+			};
+		}
+
+		const img = new Image();
+		img.decoding = "async";
+		if (!src.startsWith("data:")) img.crossOrigin = "anonymous";
+		img.onload = () => ready(img, img.naturalWidth || 300, img.naturalHeight || 150);
+		img.src = src;
+		return () => {
+			cancelled = true;
+			img.onload = null;
+		};
+	});
+
+	// Grid-shaping props: re-measure (column count may change the coverage arrays).
+	let gridInit = false;
+	$effect(() => {
+		void columnsC;
+		void powerC;
+		if (!gridInit) {
+			gridInit = true;
+			return;
+		}
+		untrack(measure);
+	});
+
+	// Reduced motion flips mid-phase: settle instantly rather than animate.
+	$effect(() => {
+		if (!reduced.current) return;
+		untrack(() => {
+			if (phase === "covering") finish("cover");
+			else if (phase === "revealing") finish("reveal");
+			else if (phase === "covered") {
+				stopLoop();
+				draw();
+			}
+		});
+	});
+</script>
+
+<div
+	bind:this={ref}
+	class={cn(
+		"datamosh-transition inset-0",
+		contained ? "absolute" : "fixed",
+		phase === "idle" ? "pointer-events-none invisible" : "pointer-events-auto",
+		className
+	)}
+	style:z-index={zIndex}
+	data-state={phase}
+	aria-hidden="true"
+	{...restProps}
+>
+	<canvas bind:this={canvasEl} class="block h-full w-full"></canvas>
+</div>

package/dist/fancy-ui/datamosh-transition/DatamoshTransition.svelte.d.ts

@@ -0,0 +1,69 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { DatamoshEffect, DatamoshPaletteName, DatamoshSweep } from "./datamosh-transition-core.js";
+export type DatamoshTransitionPhase = "idle" | "covering" | "covered" | "revealing";
+/**
+ * DatamoshTransition — a page-transition overlay that looks like a corrupted
+ * video decode.
+ *
+ * A fixed grid of columns (narrow on the left, wide on the right) fills with
+ * flat blocks of saturated colour. Inside each column a stack of tiles falls
+ * along one sigmoid: slivers at the edges, one tile snapping open through
+ * the middle. `cover()` drops the columns over the page like a curtain,
+ * right to left; `reveal()` lets them fall away. Nothing moves sideways.
+ *
+ * Mount once (root layout) and drive it from your router's navigation hook.
+ */
+interface BaseProps {
+    /** Additional classes on the overlay */
+    class?: string;
+    /** Bindable overlay element */
+    ref?: HTMLDivElement | null;
+    /**
+     * Palette name or colour list (hex or rgb()). The lightest and darkest
+     * colours recur most often.
+     */
+    colors?: string[] | DatamoshPaletteName;
+    /** Shape of the covering band: curtain, rise, split or interlace */
+    variant?: DatamoshEffect;
+    /** Order in which the columns move */
+    sweep?: DatamoshSweep;
+    /**
+     * Picture to decode: tiles take their colours from it instead of the
+     * palette. A URL (same-origin or CORS-enabled), an image or a canvas.
+     */
+    source?: string | HTMLImageElement | HTMLCanvasElement;
+    /** Seed for the colour order — same seed, same strip */
+    seed?: number;
+    /** Number of columns */
+    columns?: number;
+    /** Column edge exponent: 1 = uniform grid, higher = wider columns to the right */
+    power?: number;
+    /** Tiles per column stack (forced odd) */
+    tiles?: number;
+    /** Time for one column to cover, ms */
+    coverDuration?: number;
+    /** Time for one column to clear, ms */
+    revealDuration?: number;
+    /** Delay between neighbouring columns, ms (rightmost first) */
+    stagger?: number;
+    /** Speed of the falling tiles, 1 = default */
+    speed?: number;
+    /** Fill the positioned parent instead of the viewport */
+    contained?: boolean;
+    /** Stacking order of the overlay */
+    zIndex?: number;
+    /** Current phase (read-only, bindable) */
+    phase?: DatamoshTransitionPhase;
+    /** Called once the page is fully covered */
+    oncovered?: () => void;
+    /** Called once the page is fully revealed */
+    onrevealed?: () => void;
+}
+export type DatamoshTransitionProps = BaseProps & Omit<HTMLAttributes<HTMLDivElement>, keyof BaseProps>;
+declare const DatamoshTransition: import("svelte").Component<DatamoshTransitionProps, {
+    cover: () => Promise<void>;
+    reveal: () => Promise<void>;
+    play: () => Promise<void>;
+}, "ref" | "phase">;
+type DatamoshTransition = ReturnType<typeof DatamoshTransition>;
+export default DatamoshTransition;