@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/shader-transition/shader-transition.js

@@ -0,0 +1,314 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { createShaderRenderer, easeRun, markWebGLUnavailable, motionScale, prefersReducedMotion, resolveRgb, supportsWebGL } from "./shader-transition-engine.js";
+import { getShaderTransitionPreset } from "./shader-transition-presets.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/shader-transition/shader-transition.tsx
+const FADE_SHARE = .5;
+const STYLES = `
+@keyframes dowel-shader-transition-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes dowel-shader-transition-out { from { opacity: 1; } to { opacity: 0; } }
+[data-slot="shader-transition"][data-mode="shader"][data-phase="cover"] > [data-slot="shader-transition-layer"][data-state="entering"] {
+  opacity: 0;
+  pointer-events: none;
+}
+[data-slot="shader-transition"][data-phase="reveal"] > [data-slot="shader-transition-layer"][data-state="leaving"] {
+  visibility: hidden;
+}
+[data-slot="shader-transition"][data-mode="fade"] > [data-slot="shader-transition-layer"][data-state="leaving"] {
+  animation: dowel-shader-transition-out var(--shader-transition-fade) var(--ease-in-out-quint) both;
+  pointer-events: none;
+}
+[data-slot="shader-transition"][data-mode="fade"] > [data-slot="shader-transition-layer"][data-state="entering"] {
+  animation: dowel-shader-transition-in var(--shader-transition-fade) var(--ease-in-out-quint) both;
+}
+`;
+function mix(a, b, t) {
+	return [
+		a[0] + (b[0] - a[0]) * t,
+		a[1] + (b[1] - a[1]) * t,
+		a[2] + (b[2] - a[2]) * t
+	];
+}
+function ShaderTransition({ preset = "noise", from, to, active = false, transitionKey, children, duration, surface = "background", accent = "primary", accentSecondary, onStart, onSwap, onRest, className, style, ref, ...props }) {
+	const incoming = transitionKey === void 0 && (from !== void 0 || to !== void 0) ? {
+		key: active ? "to" : "from",
+		node: active ? to : from
+	} : {
+		key: `key:${String(transitionKey ?? "")}`,
+		node: children
+	};
+	const [state, setState] = useState(() => ({
+		shown: incoming,
+		leaving: null,
+		status: "idle",
+		phase: "cover",
+		mode: "shader",
+		run: 0
+	}));
+	if (incoming.key !== state.shown.key) {
+		if (state.leaving && incoming.key === state.leaving.key) setState({
+			...state,
+			shown: incoming,
+			leaving: null,
+			status: "done",
+			run: state.run + 1
+		});
+		else if (state.status === "running" && state.mode === "shader" && state.phase === "cover") setState({
+			...state,
+			shown: incoming
+		});
+		else setState({
+			shown: incoming,
+			leaving: state.shown,
+			status: "running",
+			phase: "cover",
+			mode: "shader",
+			run: state.run + 1
+		});
+	} else if (incoming.node !== state.shown.node) setState({
+		...state,
+		shown: incoming
+	});
+	const rootRef = useRef(null);
+	const hostRef = useRef(null);
+	const settledRun = useRef(0);
+	const enteringRef = useRef(null);
+	const onScreen = useRef(true);
+	const latest = useRef({
+		preset,
+		duration,
+		surface,
+		accent,
+		accentSecondary,
+		onStart,
+		onSwap,
+		onRest
+	});
+	useLayoutEffect(() => {
+		latest.current = {
+			preset,
+			duration,
+			surface,
+			accent,
+			accentSecondary,
+			onStart,
+			onSwap,
+			onRest
+		};
+	});
+	useEffect(() => {
+		const root = rootRef.current;
+		if (!root || typeof IntersectionObserver !== "function") return;
+		const observer = new IntersectionObserver((entries) => {
+			for (const entry of entries) onScreen.current = entry.isIntersecting;
+		});
+		observer.observe(root);
+		return () => {
+			observer.disconnect();
+		};
+	}, []);
+	const { run, status } = state;
+	useLayoutEffect(() => {
+		const root = rootRef.current;
+		const options = latest.current;
+		if (!root) return;
+		if (status !== "running") {
+			if (run > 0 && settledRun.current !== run) {
+				settledRun.current = run;
+				options.onSwap?.();
+				options.onRest?.();
+			}
+			return;
+		}
+		let raf = 0;
+		let timer;
+		let renderer = null;
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) renderer?.resize(entry.contentRect.width, entry.contentRect.height);
+		});
+		let swapped = false;
+		let settled = false;
+		let canvas = null;
+		const swap = () => {
+			if (swapped) return;
+			swapped = true;
+			latest.current.onSwap?.();
+		};
+		const teardown = () => {
+			if (raf) cancelAnimationFrame(raf);
+			raf = 0;
+			if (timer) clearTimeout(timer);
+			timer = void 0;
+			resizeObserver.disconnect();
+			canvas?.removeEventListener("webglcontextlost", onLost);
+			renderer?.destroy();
+			renderer = null;
+			canvas?.remove();
+			canvas = null;
+		};
+		const finish = () => {
+			if (settled) return;
+			settled = true;
+			settledRun.current = run;
+			teardown();
+			swap();
+			setState((current) => current.run === run ? {
+				...current,
+				leaving: null,
+				status: "done",
+				phase: "cover",
+				mode: "shader"
+			} : current);
+			latest.current.onRest?.();
+		};
+		const fade = (ms) => {
+			teardown();
+			setState((current) => current.run === run ? {
+				...current,
+				mode: "fade"
+			} : current);
+			swap();
+			timer = setTimeout(finish, ms);
+		};
+		function onLost(event) {
+			event.preventDefault();
+			fade(remaining * FADE_SHARE);
+		}
+		options.onStart?.();
+		if (root.querySelector("[data-slot=\"shader-transition-layer\"][data-state=\"leaving\"]")?.contains(document.activeElement)) enteringRef.current?.focus({ preventScroll: true });
+		const scale = motionScale(root);
+		const presetData = getShaderTransitionPreset(options.preset);
+		const total = Math.max(0, (options.duration ?? presetData.duration) * scale);
+		let remaining = total;
+		if (prefersReducedMotion(root) || total <= 0 || !onScreen.current) {
+			finish();
+			return teardown;
+		}
+		const host = hostRef.current;
+		if (host && supportsWebGL()) {
+			canvas = document.createElement("canvas");
+			canvas.setAttribute("data-slot", "shader-transition-canvas");
+			canvas.style.cssText = "display:block;width:100%;height:100%";
+			host.appendChild(canvas);
+			const surfaceRgb = resolveRgb(root, options.surface, [
+				1,
+				1,
+				1
+			]);
+			const accentRgb = resolveRgb(root, options.accent);
+			renderer = createShaderRenderer(canvas, presetData, {
+				colors: {
+					surface: surfaceRgb,
+					accent: accentRgb,
+					accentSecondary: options.accentSecondary ? resolveRgb(root, options.accentSecondary) : mix(surfaceRgb, accentRgb, .4)
+				},
+				flip: window.getComputedStyle(root).direction === "rtl"
+			});
+			if (!renderer && !canvas.getContext("webgl")) markWebGLUnavailable();
+		}
+		if (!renderer || !canvas) {
+			fade(total * FADE_SHARE);
+			return teardown;
+		}
+		const active = renderer;
+		const box = root.getBoundingClientRect();
+		active.resize(box.width, box.height);
+		resizeObserver.observe(root);
+		canvas.addEventListener("webglcontextlost", onLost);
+		let elapsed = 0;
+		let last = null;
+		const tick = (now) => {
+			raf = 0;
+			if (!onScreen.current) {
+				finish();
+				return;
+			}
+			const delta = last === null ? 0 : Math.min(now - last, 1e3 / 15);
+			last = now;
+			elapsed += delta;
+			remaining = Math.max(0, total - elapsed);
+			const t = elapsed / total;
+			let progress = easeRun(t);
+			if (progress >= .5 && !swapped) {
+				progress = .5;
+				swap();
+				setState((current) => current.run === run ? {
+					...current,
+					phase: "reveal"
+				} : current);
+			}
+			active.draw(progress, elapsed / 1e3);
+			if (t >= 1) {
+				finish();
+				return;
+			}
+			raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+		const onVisibility = () => {
+			last = null;
+		};
+		document.addEventListener("visibilitychange", onVisibility);
+		return () => {
+			document.removeEventListener("visibilitychange", onVisibility);
+			teardown();
+		};
+	}, [run, status]);
+	const setRootRef = useCallback((node) => {
+		rootRef.current = node;
+		if (typeof ref === "function") return ref(node);
+		if (ref) ref.current = node;
+	}, [ref]);
+	const running = state.status === "running";
+	const baseDuration = duration ?? getShaderTransitionPreset(preset).duration;
+	const rootStyle = {
+		"--shader-transition-fade": `calc(${String(Math.round(baseDuration * FADE_SHARE))}ms * var(--motion-scale, 1))`,
+		...style
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: "dowel-shader-transition",
+		precedence: "dowel",
+		children: STYLES
+	}), /* @__PURE__ */ jsxs("div", {
+		"data-slot": "shader-transition",
+		"data-state": state.status,
+		"data-preset": preset,
+		"data-mode": running ? state.mode : void 0,
+		"data-phase": running && state.mode === "shader" ? state.phase : void 0,
+		"aria-busy": running || void 0,
+		...props,
+		ref: setRootRef,
+		style: rootStyle,
+		className: cn("relative isolate grid overflow-hidden", className),
+		children: [
+			state.leaving ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "shader-transition-layer",
+				"data-state": "leaving",
+				"aria-hidden": "true",
+				inert: true,
+				className: "col-start-1 row-start-1 min-w-0",
+				children: state.leaving.node
+			}, `layer-${state.leaving.key}`) : null,
+			/* @__PURE__ */ jsx("div", {
+				ref: enteringRef,
+				"data-slot": "shader-transition-layer",
+				"data-state": running ? "entering" : "current",
+				tabIndex: running ? -1 : void 0,
+				className: "col-start-1 row-start-1 min-w-0 outline-none",
+				children: state.shown.node
+			}, `layer-${state.shown.key}`),
+			running && state.mode === "shader" ? /* @__PURE__ */ jsx("div", {
+				ref: hostRef,
+				"aria-hidden": "true",
+				"data-slot": "shader-transition-overlay",
+				className: "pointer-events-none absolute inset-0 z-10"
+			}) : null
+		]
+	})] });
+}
+//#endregion
+export { ShaderTransition };
+
+//# sourceMappingURL=shader-transition.js.map

package/dist/components/shader-transition/shader-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shader-transition.js","names":[],"sources":["../../../src/components/shader-transition/shader-transition.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI \"Shader Reveal Transition\" (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  createShaderRenderer,\n  easeRun,\n  markWebGLUnavailable,\n  motionScale,\n  prefersReducedMotion,\n  resolveRgb,\n  supportsWebGL,\n  type Rgb,\n  type ShaderRenderer,\n} from \"./shader-transition-engine\";\nimport {\n  getShaderTransitionPreset,\n  type ShaderTransitionPresetName,\n} from \"./shader-transition-presets\";\n\n/*\n * A frame-level transition between two states, both of them real DOM.\n *\n * State machine (data-state on the root): idle → running → done, and running\n * again whenever the shown state changes. While running:\n *\n * - shader mode: a canvas over the frame grows a cover in the surface colour\n *   over the outgoing state (data-phase=\"cover\"), the states swap under the\n *   full cover at the midpoint (data-phase=\"reveal\") and the cover recedes over\n *   the incoming state. One WebGL context per run, created when the run starts\n *   on a fresh canvas and released when it ends — an idle instance holds none.\n * - fade mode: no WebGL (or the context was lost mid-run) — a CSS cross-fade.\n * - reduced motion (OS setting or --motion-scale 0), or the frame off-screen:\n *   the states swap instantly.\n *\n * Throughout, the outgoing layer is aria-hidden and inert, so assistive\n * technology and the keyboard only ever meet the incoming state; if focus was\n * inside the outgoing layer it moves to the incoming one.\n */\n\nexport type ShaderTransitionStatus = \"idle\" | \"running\" | \"done\";\n\nexport interface ShaderTransitionProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  /** The reveal pattern. Default \"noise\". */\n  preset?: ShaderTransitionPresetName;\n  /** Two-state API: shown while `active` is false. */\n  from?: ReactNode;\n  /** Two-state API: shown while `active` is true. */\n  to?: ReactNode;\n  /** Two-state API: which state is shown. Changing it runs the transition. */\n  active?: boolean;\n  /** Keyed API: changing the key runs the transition to the new children. */\n  transitionKey?: string | number;\n  children?: ReactNode;\n  /** Run length in ms at --motion-scale 1. Defaults to the preset's. */\n  duration?: number;\n  /** Colour token of the cover — the surface behind the content. Default \"background\". */\n  surface?: string;\n  /** Colour token of the glow on the moving front. Default \"primary\". */\n  accent?: string;\n  /** Colour token the preset's sheen tints the cover with. Default: accent mixed into surface. */\n  accentSecondary?: string;\n  /** Called when a run starts. */\n  onStart?: () => void;\n  /** Called when the incoming state becomes visible (the midpoint, or at once without motion). */\n  onSwap?: () => void;\n  /** Called when a run settles, however it ran. */\n  onRest?: () => void;\n}\n\ninterface Slot {\n  key: string;\n  node: ReactNode;\n}\n\ninterface MachineState {\n  shown: Slot;\n  leaving: Slot | null;\n  status: ShaderTransitionStatus;\n  phase: \"cover\" | \"reveal\";\n  mode: \"shader\" | \"fade\";\n  /** Increments per run; keys the run effect. */\n  run: number;\n}\n\nconst FADE_SHARE = 0.5;\n\nconst STYLES = `\n@keyframes dowel-shader-transition-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes dowel-shader-transition-out { from { opacity: 1; } to { opacity: 0; } }\n[data-slot=\"shader-transition\"][data-mode=\"shader\"][data-phase=\"cover\"] > [data-slot=\"shader-transition-layer\"][data-state=\"entering\"] {\n  opacity: 0;\n  pointer-events: none;\n}\n[data-slot=\"shader-transition\"][data-phase=\"reveal\"] > [data-slot=\"shader-transition-layer\"][data-state=\"leaving\"] {\n  visibility: hidden;\n}\n[data-slot=\"shader-transition\"][data-mode=\"fade\"] > [data-slot=\"shader-transition-layer\"][data-state=\"leaving\"] {\n  animation: dowel-shader-transition-out var(--shader-transition-fade) var(--ease-in-out-quint) both;\n  pointer-events: none;\n}\n[data-slot=\"shader-transition\"][data-mode=\"fade\"] > [data-slot=\"shader-transition-layer\"][data-state=\"entering\"] {\n  animation: dowel-shader-transition-in var(--shader-transition-fade) var(--ease-in-out-quint) both;\n}\n`;\n\nfunction mix(a: Rgb, b: Rgb, t: number): Rgb {\n  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];\n}\n\nexport function ShaderTransition({\n  preset = \"noise\",\n  from,\n  to,\n  active = false,\n  transitionKey,\n  children,\n  duration,\n  surface = \"background\",\n  accent = \"primary\",\n  accentSecondary,\n  onStart,\n  onSwap,\n  onRest,\n  className,\n  style,\n  ref,\n  ...props\n}: ShaderTransitionProps) {\n  const pair = transitionKey === undefined && (from !== undefined || to !== undefined);\n  const incoming: Slot = pair\n    ? { key: active ? \"to\" : \"from\", node: active ? to : from }\n    : { key: `key:${String(transitionKey ?? \"\")}`, node: children };\n\n  const [state, setState] = useState<MachineState>(() => ({\n    shown: incoming,\n    leaving: null,\n    status: \"idle\",\n    phase: \"cover\",\n    mode: \"shader\",\n    run: 0,\n  }));\n\n  // Derive the machine from props during render (React's \"adjust state on prop\n  // change\" pattern), so the outgoing state is never missing for a frame.\n  if (incoming.key !== state.shown.key) {\n    if (state.leaving && incoming.key === state.leaving.key) {\n      // Back to where the run started: cancel it.\n      setState({\n        ...state,\n        shown: incoming,\n        leaving: null,\n        status: \"done\",\n        run: state.run + 1,\n      });\n    } else if (\n      state.status === \"running\" &&\n      state.mode === \"shader\" &&\n      state.phase === \"cover\"\n    ) {\n      // Retarget under the cover: the same run carries on to the newer state.\n      setState({ ...state, shown: incoming });\n    } else {\n      setState({\n        shown: incoming,\n        leaving: state.shown,\n        status: \"running\",\n        phase: \"cover\",\n        mode: \"shader\",\n        run: state.run + 1,\n      });\n    }\n  } else if (incoming.node !== state.shown.node) {\n    setState({ ...state, shown: incoming });\n  }\n\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const settledRun = useRef(0);\n  const enteringRef = useRef<HTMLDivElement | null>(null);\n  const onScreen = useRef(true);\n  const latest = useRef({\n    preset,\n    duration,\n    surface,\n    accent,\n    accentSecondary,\n    onStart,\n    onSwap,\n    onRest,\n  });\n  // A layout effect, declared before the run's, so a run starting in this\n  // commit already sees this render's preset and callbacks.\n  useLayoutEffect(() => {\n    latest.current = {\n      preset,\n      duration,\n      surface,\n      accent,\n      accentSecondary,\n      onStart,\n      onSwap,\n      onRest,\n    };\n  });\n\n  // Know whether the frame is visible, so a run nobody can see is skipped.\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root || typeof IntersectionObserver !== \"function\") return;\n    const observer = new IntersectionObserver((entries) => {\n      for (const entry of entries) onScreen.current = entry.isIntersecting;\n    });\n    observer.observe(root);\n    return () => {\n      observer.disconnect();\n    };\n  }, []);\n\n  const { run, status } = state;\n\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    const options = latest.current;\n    if (!root) return;\n    if (status !== \"running\") {\n      // A run that ended in the render phase (a cancel) still settles.\n      if (run > 0 && settledRun.current !== run) {\n        settledRun.current = run;\n        options.onSwap?.();\n        options.onRest?.();\n      }\n      return;\n    }\n\n    let raf = 0;\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    let renderer: ShaderRenderer | null = null;\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        renderer?.resize(entry.contentRect.width, entry.contentRect.height);\n      }\n    });\n    let swapped = false;\n    let settled = false;\n    let canvas: HTMLCanvasElement | null = null;\n\n    const swap = () => {\n      if (swapped) return;\n      swapped = true;\n      latest.current.onSwap?.();\n    };\n\n    const teardown = () => {\n      if (raf) cancelAnimationFrame(raf);\n      raf = 0;\n      if (timer) clearTimeout(timer);\n      timer = undefined;\n      resizeObserver.disconnect();\n      canvas?.removeEventListener(\"webglcontextlost\", onLost);\n      renderer?.destroy();\n      renderer = null;\n      canvas?.remove();\n      canvas = null;\n    };\n\n    const finish = () => {\n      if (settled) return;\n      settled = true;\n      settledRun.current = run;\n      teardown();\n      swap();\n      setState((current) =>\n        current.run === run\n          ? { ...current, leaving: null, status: \"done\", phase: \"cover\", mode: \"shader\" }\n          : current,\n      );\n      latest.current.onRest?.();\n    };\n\n    const fade = (ms: number) => {\n      teardown();\n      setState((current) => (current.run === run ? { ...current, mode: \"fade\" } : current));\n      swap();\n      timer = setTimeout(finish, ms);\n    };\n\n    function onLost(event: Event) {\n      // Let the browser restore the context; this run finishes as a fade and\n      // the next run builds a fresh context on a fresh canvas.\n      event.preventDefault();\n      fade(remaining * FADE_SHARE);\n    }\n\n    options.onStart?.();\n\n    // Keep keyboard focus out of the outgoing layer once it goes inert.\n    const leavingLayer = root.querySelector(\n      '[data-slot=\"shader-transition-layer\"][data-state=\"leaving\"]',\n    );\n    if (leavingLayer?.contains(document.activeElement)) {\n      enteringRef.current?.focus({ preventScroll: true });\n    }\n\n    const scale = motionScale(root);\n    const presetData = getShaderTransitionPreset(options.preset);\n    const total = Math.max(0, (options.duration ?? presetData.duration) * scale);\n    let remaining = total;\n\n    if (prefersReducedMotion(root) || total <= 0 || !onScreen.current) {\n      finish();\n      return teardown;\n    }\n\n    // A fresh canvas per run (and per effect pass, so StrictMode's double\n    // invocation never meets a context the first pass already released).\n    const host = hostRef.current;\n    if (host && supportsWebGL()) {\n      canvas = document.createElement(\"canvas\");\n      canvas.setAttribute(\"data-slot\", \"shader-transition-canvas\");\n      canvas.style.cssText = \"display:block;width:100%;height:100%\";\n      host.appendChild(canvas);\n      const surfaceRgb = resolveRgb(root, options.surface, [1, 1, 1]);\n      const accentRgb = resolveRgb(root, options.accent);\n      renderer = createShaderRenderer(canvas, presetData, {\n        colors: {\n          surface: surfaceRgb,\n          accent: accentRgb,\n          accentSecondary: options.accentSecondary\n            ? resolveRgb(root, options.accentSecondary)\n            : mix(surfaceRgb, accentRgb, 0.4),\n        },\n        flip: window.getComputedStyle(root).direction === \"rtl\",\n      });\n      if (!renderer && !canvas.getContext(\"webgl\")) markWebGLUnavailable();\n    }\n\n    if (!renderer || !canvas) {\n      fade(total * FADE_SHARE);\n      return teardown;\n    }\n\n    const active = renderer;\n    const box = root.getBoundingClientRect();\n    active.resize(box.width, box.height);\n    resizeObserver.observe(root);\n    canvas.addEventListener(\"webglcontextlost\", onLost);\n\n    let elapsed = 0;\n    let last: number | null = null;\n    const tick = (now: number) => {\n      raf = 0;\n      if (!onScreen.current) {\n        finish();\n        return;\n      }\n      // Deltas are clamped, so a hidden tab (no frames) resumes where it left off.\n      const delta = last === null ? 0 : Math.min(now - last, 1000 / 15);\n      last = now;\n      elapsed += delta;\n      remaining = Math.max(0, total - elapsed);\n      const t = elapsed / total;\n      let progress = easeRun(t);\n      if (progress >= 0.5 && !swapped) {\n        // Draw this frame fully covered; the states swap underneath it.\n        progress = 0.5;\n        swap();\n        setState((current) =>\n          current.run === run ? { ...current, phase: \"reveal\" } : current,\n        );\n      }\n      active.draw(progress, elapsed / 1000);\n      if (t >= 1) {\n        finish();\n        return;\n      }\n      raf = requestAnimationFrame(tick);\n    };\n    raf = requestAnimationFrame(tick);\n\n    const onVisibility = () => {\n      last = null;\n    };\n    document.addEventListener(\"visibilitychange\", onVisibility);\n    return () => {\n      document.removeEventListener(\"visibilitychange\", onVisibility);\n      teardown();\n    };\n  }, [run, status]);\n\n  const setRootRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node;\n      if (typeof ref === \"function\") return ref(node);\n      if (ref) ref.current = node;\n      return undefined;\n    },\n    [ref],\n  );\n\n  const running = state.status === \"running\";\n  const baseDuration = duration ?? getShaderTransitionPreset(preset).duration;\n  const rootStyle = {\n    \"--shader-transition-fade\": `calc(${String(Math.round(baseDuration * FADE_SHARE))}ms * var(--motion-scale, 1))`,\n    ...style,\n  } as CSSProperties;\n\n  return (\n    <>\n      <style href=\"dowel-shader-transition\" precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <div\n        data-slot=\"shader-transition\"\n        data-state={state.status}\n        data-preset={preset}\n        data-mode={running ? state.mode : undefined}\n        data-phase={running && state.mode === \"shader\" ? state.phase : undefined}\n        aria-busy={running || undefined}\n        {...props}\n        ref={setRootRef}\n        style={rootStyle}\n        className={cn(\"relative isolate grid overflow-hidden\", className)}\n      >\n        {state.leaving ? (\n          <div\n            key={`layer-${state.leaving.key}`}\n            data-slot=\"shader-transition-layer\"\n            data-state=\"leaving\"\n            aria-hidden=\"true\"\n            inert\n            className=\"col-start-1 row-start-1 min-w-0\"\n          >\n            {state.leaving.node}\n          </div>\n        ) : null}\n        <div\n          key={`layer-${state.shown.key}`}\n          ref={enteringRef}\n          data-slot=\"shader-transition-layer\"\n          data-state={running ? \"entering\" : \"current\"}\n          tabIndex={running ? -1 : undefined}\n          className=\"col-start-1 row-start-1 min-w-0 outline-none\"\n        >\n          {state.shown.node}\n        </div>\n        {running && state.mode === \"shader\" ? (\n          <div\n            ref={hostRef}\n            aria-hidden=\"true\"\n            data-slot=\"shader-transition-overlay\"\n            className=\"pointer-events-none absolute inset-0 z-10\"\n          />\n        ) : null}\n      </div>\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/shape-loader/index.d.ts

@@ -0,0 +1,2 @@
+import { ShapeLoader, ShapeLoaderProps, ShapeLoaderVariant, shapeLoaderVariantNames, shapeLoaderVariants } from "./shape-loader.js";
+export { ShapeLoader, type ShapeLoaderProps, type ShapeLoaderVariant, shapeLoaderVariantNames, shapeLoaderVariants };

package/dist/components/shape-loader/index.js

@@ -0,0 +1,2 @@
+import { ShapeLoader, shapeLoaderVariantNames, shapeLoaderVariants } from "./shape-loader.js";
+export { ShapeLoader, shapeLoaderVariantNames, shapeLoaderVariants };

package/dist/components/shape-loader/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/shape-loader/meta.ts
+const meta = defineMeta({
+	name: "shape-loader",
+	title: "Shape Loader",
+	description: "Indeterminate loading indicators made of geometric shapes — flipping squares, hexagons, hourglasses, hearts and 31 more motions.",
+	category: "feedback",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["shape-loader.tsx", "shape-loader-variants.tsx"],
+	a11y: "Renders aria-hidden by default so it does not announce inside controls that already expose a busy state. Pass `label` to announce it standalone via role=\"status\". Under reduced motion it slows rather than stopping, because a frozen loader reads as a hang."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/shape-loader/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/shape-loader/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"shape-loader\",\n  title: \"Shape Loader\",\n  description:\n    \"Indeterminate loading indicators made of geometric shapes — flipping squares, hexagons, hourglasses, hearts and 31 more motions.\",\n  category: \"feedback\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"shape-loader.tsx\", \"shape-loader-variants.tsx\"],\n  a11y:\n    \"Renders aria-hidden by default so it does not announce inside controls that already \" +\n    'expose a busy state. Pass `label` to announce it standalone via role=\"status\". ' +\n    \"Under reduced motion it slows rather than stopping, because a frozen loader reads as a hang.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,oBAAoB,2BAA2B;CACvD,MACE;AAGJ,CAAC"}

package/dist/components/shape-loader/shape-loader-variants.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, ReactNode } from "react";
+//#region src/components/shape-loader/shape-loader-variants.d.ts
+/** Every variant, in catalogue order. */
+declare const VARIANT_NAMES: readonly ["flip-square", "morphing-shape", "newtons-cradle", "spinning-squares", "expanding-cross", "square-grid", "floating-diamonds", "pulse-square", "pendulum", "hexagon-spinner", "wandering-cube", "hourglass", "rotating-triangle", "bouncing-square", "breathing-square", "diamond-grid", "square-snake", "infinity-path", "morphing-infinity", "zig-zag-pulse", "pumping-heart", "heartbeat", "spiral-spinner", "concentric-squares", "rotating-cross", "icon-morph", "smooth-rounded-square", "cube-flip-spring", "origami-shape", "diamond-rotate-spring", "shape-shift-grid", "spring-hexagon", "elastic-square", "minimal-triangle", "fluid-diamond"];
+type VariantName = (typeof VARIANT_NAMES)[number];
+//#endregion
+export { VARIANT_NAMES, VariantName };
+//# sourceMappingURL=shape-loader-variants.d.ts.map

package/dist/components/shape-loader/shape-loader-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape-loader-variants.d.ts","names":[],"sources":["../../../src/components/shape-loader/shape-loader-variants.tsx"],"mappings":";;;cA8Ha;KAsCD,sBAAsB"}