fancy-ui-react 0.2.1 → 0.4.0

package/dist/components/container-scroll/ContainerScroll.d.ts

@@ -1,10 +1,32 @@
 import type { ReactNode } from "react";
+/**
+ * ContainerScroll - a scroll-driven aperture
+ *
+ * The card starts shut: a slim horizontal slit with a bright seam of light
+ * across its middle. As the section scrolls into view the slit opens
+ * vertically to the full card, the seam splits into two lips that ride the
+ * opening edges and fade, the content settles from a slight zoom into
+ * focus, and the title above blurs away to hand the stage to the card.
+ * No 3D tilt, no perspective.
+ */
 export interface ContainerScrollProps {
-    /** Additional CSS classes */
+    /** Additional CSS classes on the section */
     className?: string;
-    /** Content rendered in the title area above the card */
+    /** Title shown above the card (blurs and fades as the card opens) */
     titleContent?: ReactNode;
-    /** Content rendered inside the tilting card */
+    /** Content revealed inside the card */
     cardContent?: ReactNode;
+    /** Seam colour (any CSS colour). Defaults to a soft blue. */
+    accent?: string;
+    /** Second seam tint, blended towards the seam ends. Defaults to a soft lilac. */
+    accentSecondary?: string;
 }
-export declare function ContainerScroll({ className, titleContent, cardContent, }: ContainerScrollProps): import("react").JSX.Element;
+/**
+ * Raw scroll progress of the card track, measured at its centre (where the
+ * slit is): 0 while the slit is still in the bottom 8% of the viewport,
+ * 1 once it has risen to just above the middle of the viewport.
+ */
+export declare function apertureProgress(top: number, height: number, viewport: number): number;
+/** Smoothstep: a gentle start and a slow settle, so the opening reads as a lens, not a shutter. */
+export declare function apertureEase(p: number): number;
+export declare function ContainerScroll({ className, titleContent, cardContent, accent, accentSecondary, }: ContainerScrollProps): import("react").JSX.Element;

package/dist/components/container-scroll/ContainerScroll.js

@@ -2,73 +2,112 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
+import { rafThrottle } from "../../internals/motion/raf.js";
 import { cn } from "../../utils.js";
+/* empty css                     */
+function apertureProgress(top, height, viewport) {
+  if (viewport <= 0) return 1;
+  const centre = top + height / 2;
+  const p = (viewport * 0.92 - centre) / (viewport * 0.4);
+  return p < 0 ? 0 : p > 1 ? 1 : p;
+}
+function apertureEase(p) {
+  const t = p < 0 ? 0 : p > 1 ? 1 : p;
+  return t * t * (3 - 2 * t);
+}
 function ContainerScroll({
   className = "",
   titleContent,
-  cardContent
+  cardContent,
+  accent,
+  accentSecondary
 }) {
-  const containerRef = useRef(null);
-  const [isMobile, setIsMobile] = useState(false);
-  const [scrollYProgress, setScrollYProgress] = useState(0);
-  const scaleDimensions = isMobile ? [0.7, 0.9] : [1.05, 1];
-  const rotate = 20 * (1 - scrollYProgress);
-  const scale = scaleDimensions[0] + (scaleDimensions[1] - scaleDimensions[0]) * scrollYProgress;
-  const translateY = -100 * scrollYProgress;
+  const reduced = useReducedMotion();
+  const trackRef = useRef(null);
+  const [raw, setRaw] = useState(0);
+  const progress = reduced ? 1 : raw;
+  const open = apertureEase(progress);
+  const styleVars = {
+    "--cs-progress": progress.toFixed(4),
+    "--cs-open": open.toFixed(4)
+  };
+  if (accent) styleVars["--cs-accent"] = accent;
+  if (accentSecondary) styleVars["--cs-accent-2"] = accentSecondary;
   useIsomorphicLayoutEffect(() => {
-    function updateIsMobile() {
-      setIsMobile(window.innerWidth <= 768);
-    }
-    function updateScroll() {
-      if (!containerRef.current) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      const windowHeight = window.innerHeight;
-      const progress = 1 - Math.max(0, rect.bottom - window.scrollY) / windowHeight;
-      setScrollYProgress(Math.max(0, Math.min(1, progress)));
+    const track = trackRef.current;
+    if (!track || reduced) return;
+    function measure() {
+      if (!track) return;
+      const rect = track.getBoundingClientRect();
+      setRaw(apertureProgress(rect.top, rect.height, window.innerHeight));
     }
-    updateIsMobile();
-    updateScroll();
-    window.addEventListener("resize", updateIsMobile);
-    window.addEventListener("scroll", updateScroll, { passive: true });
-    window.addEventListener("resize", updateScroll, { passive: true });
+    const update = rafThrottle(measure);
+    measure();
+    const opts = { capture: true, passive: true };
+    window.addEventListener("scroll", update, opts);
+    window.addEventListener("resize", update, { passive: true });
     return () => {
-      window.removeEventListener("resize", updateIsMobile);
-      window.removeEventListener("scroll", updateScroll);
-      window.removeEventListener("resize", updateScroll);
+      update.cancel();
+      window.removeEventListener("scroll", update, opts);
+      window.removeEventListener("resize", update);
     };
-  }, []);
+  }, [reduced]);
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ref: containerRef,
       className: cn(
-        "relative flex h-[60rem] items-center justify-center p-2 md:h-[80rem] md:p-20",
+        "cs-root relative flex h-[48rem] w-full items-start justify-center p-2 md:h-[64rem] md:p-10",
         className
       ),
-      children: /* @__PURE__ */ jsxs("div", { className: "relative w-full py-10 md:py-40", style: { perspective: "1000px" }, children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: { transform: `translateY(${translateY}px)` },
-            className: "mx-auto max-w-5xl text-center",
-            children: titleContent
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              transform: `rotateX(${rotate}deg) scale(${scale})`,
-              boxShadow: "0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003"
-            },
-            className: "mx-auto -mt-12 h-[30rem] w-full max-w-5xl rounded-[30px] border-4 border-[#6C6C6C] bg-[#222222] p-2 shadow-2xl md:h-[40rem] md:p-6",
-            children: /* @__PURE__ */ jsx("div", { className: "size-full overflow-hidden rounded-2xl bg-gray-100 md:rounded-2xl md:p-4 dark:bg-zinc-900", children: cardContent })
-          }
-        )
+      style: styleVars,
+      "data-reduced-motion": reduced ? "" : void 0,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative w-full py-10 md:py-16", children: [
+        /* @__PURE__ */ jsx("div", { className: "cs-title mx-auto max-w-5xl text-center", children: titleContent }),
+        /* @__PURE__ */ jsx("div", { ref: trackRef, className: "cs-track relative mx-auto mt-10 w-full max-w-5xl md:mt-12", children: /* @__PURE__ */ jsxs("div", { className: "cs-stage relative aspect-[4/3] w-full sm:aspect-[16/10]", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "cs-shadow pointer-events-none absolute inset-0",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "cs-card absolute inset-0 p-1.5 md:p-2", children: /* @__PURE__ */ jsxs("div", { className: "cs-surface relative size-full overflow-hidden", children: [
+            /* @__PURE__ */ jsx("div", { className: "cs-content size-full", children: cardContent }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "cs-veil pointer-events-none absolute inset-0",
+                "aria-hidden": "true"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "cs-lip cs-lip-top pointer-events-none absolute",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "cs-lip cs-lip-bottom pointer-events-none absolute",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "cs-seam pointer-events-none absolute", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("span", { className: "cs-seam-haze" }),
+            /* @__PURE__ */ jsx("span", { className: "cs-seam-glow" }),
+            /* @__PURE__ */ jsx("span", { className: "cs-seam-line" })
+          ] })
+        ] }) })
       ] })
     }
   );
 }
 export {
-  ContainerScroll
+  ContainerScroll,
+  apertureEase,
+  apertureProgress
 };

package/dist/components/datamosh-transition/DatamoshTransition.d.ts

@@ -0,0 +1,76 @@
+import type { HTMLAttributes } from "react";
+import { type DatamoshEffect, type DatamoshPaletteName, type DatamoshSweep } from "./datamosh-transition-core.js";
+export type DatamoshTransitionPhase = "idle" | "covering" | "covered" | "revealing";
+/**
+ * What the forwarded ref carries. The Svelte source exposes `cover()`,
+ * `reveal()` and `play()` on the component instance and binds the overlay
+ * element through `ref`; React has no instance, so both travel through one
+ * handle: the three methods plus `element`.
+ */
+export interface DatamoshTransitionHandle {
+    /** Cover the page. Resolves once every column is down. */
+    cover: () => Promise<void>;
+    /** Clear the page. Resolves once every column has fallen away. */
+    reveal: () => Promise<void>;
+    /** Cover, then reveal — a one-shot flash. */
+    play: () => Promise<void>;
+    /** The overlay element. */
+    readonly element: HTMLDivElement | null;
+}
+/**
+ * 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.
+ */
+export interface DatamoshTransitionProps extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
+    /** Additional classes on the overlay */
+    className?: string;
+    /**
+     * 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;
+    /** Called with every phase change (the Svelte `bind:phase`) */
+    onPhaseChange?: (phase: DatamoshTransitionPhase) => void;
+    /** Called once the page is fully covered */
+    oncovered?: () => void;
+    /** Called once the page is fully revealed */
+    onrevealed?: () => void;
+}
+export declare const DatamoshTransition: import("react").ForwardRefExoticComponent<DatamoshTransitionProps & import("react").RefAttributes<DatamoshTransitionHandle>>;

package/dist/components/datamosh-transition/DatamoshTransition.js

@@ -0,0 +1,368 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState, useRef, useCallback, useImperativeHandle, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
+import { resolvePalette, buildStrip, columnDelays, paletteRoles, createCoverage, DEFAULT_POWER, oddTiles, DEFAULT_COLUMNS, DEFAULT_TILES, coverFit, sampleSource, columnEdges, settleCoverage, CYCLE, FALL_STAGGER, columnBand, easeEdge, columnFlow, columnTiles, sourceSlot, stripIndex, stepCoverage, BLEED } from "./datamosh-transition-core.js";
+function currentDpr() {
+  return Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 2);
+}
+const DatamoshTransition = forwardRef(
+  function DatamoshTransition2({
+    className,
+    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,
+    onPhaseChange,
+    oncovered,
+    onrevealed,
+    style,
+    ...restProps
+  }, ref) {
+    const reduced = useReducedMotion();
+    const palette = useMemo(() => resolvePalette(colors), [colors]);
+    const columnsC = Math.max(1, Math.round(Number.isFinite(columns) ? columns : DEFAULT_COLUMNS));
+    const powerC = Number.isFinite(power) && power > 0 ? power : DEFAULT_POWER;
+    const tilesC = oddTiles(tiles);
+    const speedC = Number.isFinite(speed) && speed > 0 ? speed : 1;
+    const strip = useMemo(() => buildStrip(seed, palette), [seed, palette]);
+    const delays = useMemo(
+      () => columnDelays(
+        columnsC,
+        sweep,
+        Math.max(0, Number.isFinite(stagger) ? stagger : 0) / 1e3,
+        seed
+      ),
+      [columnsC, sweep, stagger, seed]
+    );
+    const backing = palette[paletteRoles(palette).darks[0] ?? 0] ?? "#14101f";
+    const [phase, setPhaseState] = useState("idle");
+    const hostRef = useRef(null);
+    const canvasRef = useRef(null);
+    const live = useLiveRef({
+      reduced,
+      palette,
+      columnsC,
+      powerC,
+      tilesC,
+      speedC,
+      strip,
+      delays,
+      backing,
+      variant,
+      coverDuration,
+      revealDuration,
+      onPhaseChange,
+      oncovered,
+      onrevealed
+    });
+    const s = useRef({
+      ctx: null,
+      w: 0,
+      h: 0,
+      edges: [],
+      cov: createCoverage(DEFAULT_COLUMNS),
+      direction: "reveal",
+      phase: "idle",
+      phaseTime: 0,
+      elapsed: 0,
+      rafId: null,
+      lastT: 0,
+      pending: [],
+      sourceImage: null,
+      sourceSize: { w: 0, h: 0 },
+      sourceTable: null
+    }).current;
+    const engine = useMemo(() => {
+      function setPhase(next) {
+        if (s.phase === next) return;
+        s.phase = next;
+        setPhaseState(next);
+        live.current.onPhaseChange?.(next);
+      }
+      function settlePending() {
+        const list = s.pending;
+        s.pending = [];
+        for (const resolve of list) resolve();
+      }
+      function clear() {
+        s.ctx?.clearRect(0, 0, s.w, s.h);
+      }
+      function draw() {
+        const c = s.ctx;
+        const p = live.current;
+        if (!c || !s.edges.length) return;
+        const { w, h } = s;
+        c.clearRect(0, 0, w, h);
+        const bleed = Math.round(BLEED * h);
+        const len = p.palette.length;
+        const t = p.reduced ? CYCLE * 0.45 + p.columnsC * FALL_STAGGER : s.elapsed;
+        for (let i = 0; i < p.columnsC; i++) {
+          const x0 = s.edges[i];
+          const cw = s.edges[i + 1] - x0;
+          if (cw <= 0) continue;
+          const band = columnBand(
+            p.variant,
+            i,
+            easeEdge(s.cov.top[i] ?? 0),
+            easeEdge(s.cov.bot[i] ?? 0)
+          );
+          const bandTop = Math.round(band.y0 * h);
+          const bandBot = Math.round(band.y1 * h);
+          if (bandBot <= bandTop) continue;
+          c.fillStyle = p.backing;
+          c.fillRect(x0, bandTop, cw, bandBot - bandTop);
+          const flow = columnFlow(t, i, p.columnsC, p.speedC);
+          for (const tile of columnTiles(flow, p.tilesC, h, bleed)) {
+            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 = s.sourceTable?.[i]?.[sourceSlot(tile.id, i, p.tilesC)] ?? p.palette[stripIndex(p.strip, tile.id, i) % len];
+            c.fillRect(x0, y0, cw, y1 - y0);
+          }
+        }
+      }
+      function stopLoop() {
+        if (s.rafId !== null && typeof cancelAnimationFrame === "function")
+          cancelAnimationFrame(s.rafId);
+        s.rafId = null;
+      }
+      function requestFrame() {
+        if (s.rafId !== null || !s.ctx || typeof requestAnimationFrame !== "function") return;
+        s.lastT = 0;
+        s.rafId = requestAnimationFrame(tick);
+      }
+      function finish(dir) {
+        settleCoverage(s.cov, dir);
+        setPhase(dir === "cover" ? "covered" : "idle");
+        if (dir === "reveal") {
+          stopLoop();
+          clear();
+        } else if (!live.current.reduced) {
+          requestFrame();
+        } else {
+          draw();
+        }
+        settlePending();
+        if (dir === "cover") live.current.oncovered?.();
+        else live.current.onrevealed?.();
+      }
+      function tick(now) {
+        s.rafId = null;
+        if (!s.ctx) return;
+        const dt = s.lastT ? Math.min(0.05, Math.max(0, (now - s.lastT) / 1e3)) : 0;
+        s.lastT = now;
+        s.elapsed += dt;
+        if (s.phase === "covering" || s.phase === "revealing") {
+          s.phaseTime += dt;
+          const p = live.current;
+          const duration = (s.direction === "cover" ? p.coverDuration : p.revealDuration) / 1e3;
+          const done = stepCoverage(s.cov, s.direction, s.phaseTime, dt, duration, p.delays);
+          if (done) {
+            finish(s.direction);
+            return;
+          }
+        }
+        draw();
+        if (s.phase !== "idle") s.rafId = requestAnimationFrame(tick);
+      }
+      function run(dir) {
+        settlePending();
+        const promise = new Promise((resolve) => s.pending.push(resolve));
+        if (dir === "reveal" && s.phase === "idle" || dir === "cover" && s.phase === "covered") {
+          settlePending();
+          return promise;
+        }
+        s.direction = dir;
+        s.phaseTime = 0;
+        setPhase(dir === "cover" ? "covering" : "revealing");
+        const instant = !s.ctx || live.current.reduced || typeof requestAnimationFrame !== "function" || typeof document !== "undefined" && document.hidden;
+        if (instant) finish(dir);
+        else requestFrame();
+        return promise;
+      }
+      function buildSourceTable() {
+        s.sourceTable = null;
+        if (!s.sourceImage || !s.edges.length || typeof document === "undefined") return;
+        const pw = 96;
+        const ph = Math.max(8, Math.round(pw * s.h / Math.max(1, s.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(s.sourceSize.w, s.sourceSize.h, pw, ph);
+          sctx.drawImage(s.sourceImage, fit.sx, fit.sy, fit.sw, fit.sh, 0, 0, pw, ph);
+          const { data } = sctx.getImageData(0, 0, pw, ph);
+          const norm = s.edges.map((e) => e / Math.max(1, s.w));
+          s.sourceTable = sampleSource(data, pw, ph, norm, live.current.tilesC);
+        } catch {
+          s.sourceTable = null;
+        }
+      }
+      function measure() {
+        const host = hostRef.current;
+        const canvas = canvasRef.current;
+        if (!host || !canvas || !s.ctx) return;
+        const p = live.current;
+        const dpr = currentDpr();
+        s.w = Math.max(1, Math.round(host.clientWidth * dpr));
+        s.h = Math.max(1, Math.round(host.clientHeight * dpr));
+        canvas.width = s.w;
+        canvas.height = s.h;
+        s.ctx.imageSmoothingEnabled = false;
+        s.edges = columnEdges(s.w, p.columnsC, p.powerC);
+        buildSourceTable();
+        if (s.cov.top.length !== p.columnsC) {
+          const covered = s.phase === "covered" || s.phase === "covering";
+          s.cov = createCoverage(p.columnsC, covered);
+        }
+        if (s.phase !== "idle") draw();
+      }
+      return {
+        run,
+        draw,
+        finish,
+        measure,
+        stopLoop,
+        requestFrame,
+        settlePending,
+        buildSourceTable
+      };
+    }, [live, s]);
+    const cover = useCallback(() => engine.run("cover"), [engine]);
+    const reveal = useCallback(() => engine.run("reveal"), [engine]);
+    const play = useCallback(async () => {
+      await engine.run("cover");
+      await engine.run("reveal");
+    }, [engine]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        cover,
+        reveal,
+        play,
+        get element() {
+          return hostRef.current;
+        }
+      }),
+      [cover, reveal, play]
+    );
+    useEffect(() => {
+      const host = hostRef.current;
+      const canvas = canvasRef.current;
+      if (!host || !canvas) return;
+      s.ctx = canvas.getContext("2d");
+      if (!s.ctx) return;
+      engine.measure();
+      let ro;
+      if (typeof ResizeObserver !== "undefined") {
+        ro = new ResizeObserver(() => engine.measure());
+        ro.observe(host);
+      }
+      const onVisibility = () => {
+        if (!document.hidden) {
+          if (s.phase !== "idle") engine.requestFrame();
+          return;
+        }
+        engine.stopLoop();
+        if (s.phase === "covering") engine.finish("cover");
+        else if (s.phase === "revealing") engine.finish("reveal");
+      };
+      document.addEventListener("visibilitychange", onVisibility);
+      return () => {
+        engine.stopLoop();
+        ro?.disconnect();
+        document.removeEventListener("visibilitychange", onVisibility);
+        engine.settlePending();
+        s.ctx = null;
+      };
+    }, [engine, s]);
+    const gridInit = useRef(false);
+    useEffect(() => {
+      if (!gridInit.current) {
+        gridInit.current = true;
+        return;
+      }
+      engine.measure();
+    }, [columnsC, powerC, engine]);
+    useEffect(() => {
+      if (!reduced) return;
+      if (s.phase === "covering") engine.finish("cover");
+      else if (s.phase === "revealing") engine.finish("reveal");
+      else if (s.phase === "covered") {
+        engine.stopLoop();
+        engine.draw();
+      }
+    }, [reduced, engine, s]);
+    useEffect(() => {
+      s.sourceImage = null;
+      s.sourceTable = null;
+      const src = source;
+      if (!src || typeof window === "undefined") return;
+      let cancelled = false;
+      const ready = (img2, iw, ih) => {
+        if (cancelled || iw <= 0 || ih <= 0) return;
+        s.sourceImage = img2;
+        s.sourceSize = { w: iw, h: ih };
+        engine.buildSourceTable();
+        if (s.phase !== "idle") engine.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;
+      };
+    }, [source, tilesC, engine, s]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: hostRef,
+        className: cn(
+          "datamosh-transition inset-0",
+          contained ? "absolute" : "fixed",
+          phase === "idle" ? "pointer-events-none invisible" : "pointer-events-auto",
+          className
+        ),
+        style: { zIndex, ...style },
+        "data-state": phase,
+        "aria-hidden": "true",
+        ...restProps,
+        children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "block h-full w-full" })
+      }
+    );
+  }
+);
+export {
+  DatamoshTransition
+};