@dowel-ui/react 0.5.0 → 0.8.0

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

@@ -0,0 +1,294 @@
+/** Shared by every preset. Varyings are unnecessary: the fragment reads gl_FragCoord. */
+const VERTEX_SHADER = "attribute vec2 aPos;\nvoid main(){ gl_Position = vec4(aPos, 0.0, 1.0); }\n";
+/** Helpers every preset's GLSL may call: value noise, fbm, a soft minimum. */
+const PRELUDE = `
+precision mediump float;
+uniform vec2 uRes;
+uniform float uTime;
+uniform float uProgress;
+uniform float uSoft;
+uniform float uGlow;
+uniform float uSheen;
+uniform float uReverse;
+uniform float uFlip;
+uniform vec3 uSurface;
+uniform vec3 uAccent;
+uniform vec3 uAccent2;
+#define PI 3.14159265359
+#define TAU 6.28318530718
+float hash21(vec2 q){ q = fract(q * vec2(233.34, 851.73)); q += dot(q, q + 23.45); return fract(q.x * q.y); }
+float vnoise(vec2 q){
+  vec2 i = floor(q); vec2 f = fract(q);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(mix(hash21(i), hash21(i + vec2(1.0, 0.0)), u.x),
+             mix(hash21(i + vec2(0.0, 1.0)), hash21(i + vec2(1.0, 1.0)), u.x), u.y);
+}
+float fbm(vec2 q){
+  float v = 0.0; float a = 0.5;
+  for (int i = 0; i < 4; i++) { v += a * vnoise(q); q = q * 2.07 + vec2(11.3, 7.9); a *= 0.5; }
+  return v;
+}
+float smin(float a, float b, float k){ float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0); return mix(b, a, h) - k * h * (1.0 - h); }
+float rmax(){ return length(vec2(uRes.x / uRes.y, 1.0) * 0.5); }
+float tri(float x){ return abs(fract(x) * 2.0 - 1.0); }
+`;
+const MAIN = `
+void main(){
+  vec2 uv = gl_FragCoord.xy / uRes;
+  uv.x = mix(uv.x, 1.0 - uv.x, uFlip);
+  vec2 p = (uv - 0.5) * vec2(uRes.x / uRes.y, 1.0);
+  float f = clamp(field(uv, p, uTime), 0.0, 1.0);
+  bool covering = uProgress < 0.5;
+  float q = covering ? uProgress * 2.0 : uProgress * 2.0 - 1.0;
+  float x = q * (1.0 + uSoft);
+  float g = covering ? f : mix(f, 1.0 - f, uReverse);
+  float c = covering ? 1.0 - smoothstep(x - uSoft, x, g) : smoothstep(x - uSoft, x, g);
+  float d = g - x;
+  float w = uSoft * 0.5 + 0.004;
+  float edge = exp(-(d * d) / (w * w)) * smoothstep(0.0, 0.06, q) * smoothstep(1.0, 0.94, q);
+  float glow = clamp(edge * uGlow, 0.0, 0.92);
+  float tint = clamp(sheen(uv, p, uTime, d) * uSheen, 0.0, 1.0);
+  vec3 base = mix(uSurface, uAccent2, tint);
+  float cover = c * (1.0 - glow);
+  gl_FragColor = vec4(base * cover + uAccent * glow, cover + glow);
+}
+`;
+/** The complete fragment program for one preset. */
+function buildFragmentShader(preset) {
+	return `${PRELUDE}\n${preset.glsl}\n${MAIN}`;
+}
+function compile(gl, type, source) {
+	const shader = gl.createShader(type);
+	if (!shader) return null;
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+		if (process.env.NODE_ENV !== "production") console.warn("[ShaderTransition] shader failed to compile:", gl.getShaderInfoLog(shader));
+		gl.deleteShader(shader);
+		return null;
+	}
+	return shader;
+}
+/** Compiles and links the shared vertex shader with a fragment source. */
+function createProgram(gl, fragmentSource) {
+	const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+	const fragment = vertex ? compile(gl, gl.FRAGMENT_SHADER, fragmentSource) : null;
+	const program = vertex && fragment ? gl.createProgram() : null;
+	if (!vertex || !fragment || !program) {
+		if (vertex) gl.deleteShader(vertex);
+		if (fragment) gl.deleteShader(fragment);
+		return null;
+	}
+	gl.attachShader(program, vertex);
+	gl.attachShader(program, fragment);
+	gl.linkProgram(program);
+	gl.deleteShader(vertex);
+	gl.deleteShader(fragment);
+	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+		gl.deleteProgram(program);
+		return null;
+	}
+	return program;
+}
+const QUAD = new Float32Array([
+	-1,
+	-1,
+	1,
+	-1,
+	-1,
+	1,
+	1,
+	1
+]);
+const UNIFORMS = [
+	"uRes",
+	"uTime",
+	"uProgress",
+	"uSoft",
+	"uGlow",
+	"uSheen",
+	"uReverse",
+	"uFlip",
+	"uSurface",
+	"uAccent",
+	"uAccent2"
+];
+/**
+* Creates a context and program on `canvas` for one preset. Returns null when
+* WebGL is unavailable or the program does not build — the caller falls back
+* to a CSS cross-fade.
+*/
+function createShaderRenderer(canvas, preset, { colors, flip = false }) {
+	const context = getWebGL(canvas);
+	if (!context) return null;
+	const program = createProgram(context, buildFragmentShader(preset));
+	if (!program) {
+		loseContext(context);
+		return null;
+	}
+	const buffer = context.createBuffer();
+	context.useProgram(program);
+	context.bindBuffer(context.ARRAY_BUFFER, buffer);
+	context.bufferData(context.ARRAY_BUFFER, QUAD, context.STATIC_DRAW);
+	const position = context.getAttribLocation(program, "aPos");
+	context.enableVertexAttribArray(position);
+	context.vertexAttribPointer(position, 2, context.FLOAT, false, 0, 0);
+	context.enable(context.BLEND);
+	context.blendFunc(context.ONE, context.ONE_MINUS_SRC_ALPHA);
+	context.clearColor(0, 0, 0, 0);
+	const loc = Object.fromEntries(UNIFORMS.map((name) => [name, context.getUniformLocation(program, name)]));
+	context.uniform1f(loc.uSoft, preset.softness);
+	context.uniform1f(loc.uGlow, preset.glow);
+	context.uniform1f(loc.uSheen, preset.sheen);
+	context.uniform1f(loc.uReverse, preset.reverse ? 1 : 0);
+	context.uniform1f(loc.uFlip, flip ? 1 : 0);
+	context.uniform3f(loc.uSurface, ...colors.surface);
+	context.uniform3f(loc.uAccent, ...colors.accent);
+	context.uniform3f(loc.uAccent2, ...colors.accentSecondary);
+	let destroyed = false;
+	return {
+		resize(width, height) {
+			if (destroyed) return;
+			const dpr = Math.min(window.devicePixelRatio || 1, 2);
+			const w = Math.max(1, Math.round(width * dpr));
+			const h = Math.max(1, Math.round(height * dpr));
+			if (canvas.width !== w) canvas.width = w;
+			if (canvas.height !== h) canvas.height = h;
+			context.viewport(0, 0, w, h);
+			context.uniform2f(loc.uRes, w, h);
+		},
+		draw(progress, time) {
+			if (destroyed || context.isContextLost()) return;
+			context.clear(context.COLOR_BUFFER_BIT);
+			context.uniform1f(loc.uProgress, clamp01(progress));
+			context.uniform1f(loc.uTime, time);
+			context.drawArrays(context.TRIANGLE_STRIP, 0, 4);
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			if (!context.isContextLost()) {
+				context.deleteBuffer(buffer);
+				context.deleteProgram(program);
+			}
+			loseContext(context);
+		}
+	};
+}
+function getWebGL(canvas) {
+	try {
+		return canvas.getContext("webgl", {
+			alpha: true,
+			antialias: false,
+			depth: false,
+			stencil: false,
+			premultipliedAlpha: true,
+			preserveDrawingBuffer: false
+		});
+	} catch {
+		return null;
+	}
+}
+/** Releases the context now rather than whenever the canvas is collected. */
+function loseContext(gl) {
+	gl.getExtension("WEBGL_lose_context")?.loseContext();
+}
+function clamp01(value) {
+	return Math.min(1, Math.max(0, value));
+}
+/** Symmetric ease for the whole run: slow in, fast through the swap, slow out. */
+function easeRun(t) {
+	const x = clamp01(t);
+	return x < .5 ? 4 * x * x * x : 1 - (-2 * x + 2) ** 3 / 2;
+}
+/** `"primary"` → `var(--color-primary)`; `--x` → `var(--x)`; anything else as is. */
+function tokenToCss(token) {
+	if (token.startsWith("--")) return `var(${token})`;
+	if (/^[a-z][a-z0-9-]*$/.test(token) && token !== "transparent" && token !== "currentcolor") return `var(--color-${token})`;
+	return token;
+}
+let scratch;
+/**
+* Resolves a colour token, as seen from `element`, to linear 0–1 RGB for a
+* uniform. The browser resolves the token (so a scoped theme, nested var() and
+* color-mix() all work) and a 1×1 2D canvas converts whatever colour space it
+* came back in — oklch included — to sRGB bytes.
+*/
+function resolveRgb(element, token, fallback = [
+	.5,
+	.5,
+	.5
+]) {
+	const doc = element.ownerDocument;
+	const view = doc.defaultView;
+	if (!view) return fallback;
+	const probe = doc.createElement("span");
+	probe.style.display = "none";
+	probe.style.color = tokenToCss(token);
+	(element.parentElement ?? doc.body).appendChild(probe);
+	const computed = view.getComputedStyle(probe).color;
+	probe.remove();
+	if (!computed) return fallback;
+	if (scratch === void 0) try {
+		const canvas = doc.createElement("canvas");
+		canvas.width = 1;
+		canvas.height = 1;
+		scratch = canvas.getContext("2d", { willReadFrequently: true });
+	} catch {
+		scratch = null;
+	}
+	if (scratch) {
+		scratch.clearRect(0, 0, 1, 1);
+		scratch.fillStyle = computed;
+		scratch.fillRect(0, 0, 1, 1);
+		const [r = 0, g = 0, b = 0, a = 0] = scratch.getImageData(0, 0, 1, 1).data;
+		if (a > 0) return [
+			r / 255,
+			g / 255,
+			b / 255
+		];
+	}
+	if (computed.startsWith("rgb")) {
+		const [r, g, b] = (computed.match(/[\d.]+/g) ?? []).map(Number);
+		if (r !== void 0 && g !== void 0 && b !== void 0) return [
+			r / 255,
+			g / 255,
+			b / 255
+		];
+	}
+	return fallback;
+}
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+/** The theme's `--motion-scale` (1 when unset). 0 means motion is off. */
+function motionScale(element) {
+	if (typeof window === "undefined") return 1;
+	const raw = window.getComputedStyle(element ?? document.documentElement).getPropertyValue("--motion-scale");
+	const value = Number.parseFloat(raw);
+	return Number.isFinite(value) ? Math.max(0, value) : 1;
+}
+/** OS reduced-motion preference, or the theme's scale turned (nearly) to zero. */
+function prefersReducedMotion(element) {
+	if (typeof window === "undefined") return false;
+	if (typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return true;
+	return motionScale(element) < .01;
+}
+/** Whether a WebGL context can be created here at all. Cached per page. */
+let webglSupport;
+function supportsWebGL() {
+	if (webglSupport !== void 0) return webglSupport;
+	if (typeof document === "undefined") return false;
+	try {
+		webglSupport = typeof WebGLRenderingContext !== "undefined";
+	} catch {
+		webglSupport = false;
+	}
+	return webglSupport;
+}
+/** Records that creating a context failed, so later runs skip straight to the fallback. */
+function markWebGLUnavailable() {
+	webglSupport = false;
+}
+//#endregion
+export { REDUCED_MOTION_QUERY, VERTEX_SHADER, buildFragmentShader, clamp01, createProgram, createShaderRenderer, easeRun, markWebGLUnavailable, motionScale, prefersReducedMotion, resolveRgb, supportsWebGL, tokenToCss };
+
+//# sourceMappingURL=shader-transition-engine.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shader-transition-engine.js","names":[],"sources":["../../../src/components/shader-transition/shader-transition-engine.ts"],"sourcesContent":["// Ported from SmoothUI \"Shader Reveal Transition\" engine (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\n\nimport type { ShaderTransitionPreset } from \"./shader-transition-presets\";\n\n/*\n * The GL half of ShaderTransition: no React. What is taken from SmoothUI is the\n * engine's shape — one full-frame quad, a fragment shader driven by a single\n * `progress` uniform, premultiplied-alpha blending over the DOM, and a content\n * swap at the midpoint. The fragment program itself is written here: SmoothUI's\n * own fragment code for the shader-reveal and SDF families is not used (see\n * shader-transition-presets.ts for why).\n *\n * The model. The canvas never shows content — it paints a *cover* in the\n * surface colour. For the first half of the run the cover grows over the\n * outgoing state along the preset's arrival field; at the midpoint the whole\n * frame is covered and the states swap underneath; for the second half the\n * cover recedes along the same field (or its reverse) and uncovers the incoming\n * state. A preset is therefore just a scalar field `field(uv, p, t) → [0, 1]`,\n * \"when is this pixel covered\", plus a `sheen` term that tints the cover with\n * the secondary accent and a glow on the moving front in the primary accent.\n *\n * Trade-off, documented because it is the whole design: a true per-pixel\n * cross-reveal (old and new state both visible through a mask) needs the canvas\n * to mask DOM, and the only portable route is `mask-image` fed from\n * `canvas.toDataURL()` every frame — a PNG encode per frame, far too slow at\n * frame size. Painting a cover keeps both states as live, accessible DOM at the\n * cost of never showing old and new pixels side by side.\n */\n\nexport type Rgb = readonly [number, number, number];\n\nexport interface ShaderColors {\n  /** The cover: the colour behind the content. */\n  surface: Rgb;\n  /** Glow on the moving front. */\n  accent: Rgb;\n  /** Tint mixed into the cover by the preset's sheen. */\n  accentSecondary: Rgb;\n}\n\nexport interface ShaderRenderer {\n  /** Draws one frame. `progress` runs 0 → 1 across the whole run. */\n  draw: (progress: number, time: number) => void;\n  /** Resizes the backing store to a CSS box, DPR capped at 2. */\n  resize: (width: number, height: number) => void;\n  /** Frees the program, buffer and — where the browser allows — the context. */\n  destroy: () => void;\n}\n\nexport const MAX_DPR = 2;\n\n/** Shared by every preset. Varyings are unnecessary: the fragment reads gl_FragCoord. */\nexport const VERTEX_SHADER =\n  \"attribute vec2 aPos;\\nvoid main(){ gl_Position = vec4(aPos, 0.0, 1.0); }\\n\";\n\n/** Helpers every preset's GLSL may call: value noise, fbm, a soft minimum. */\nconst PRELUDE = `\nprecision mediump float;\nuniform vec2 uRes;\nuniform float uTime;\nuniform float uProgress;\nuniform float uSoft;\nuniform float uGlow;\nuniform float uSheen;\nuniform float uReverse;\nuniform float uFlip;\nuniform vec3 uSurface;\nuniform vec3 uAccent;\nuniform vec3 uAccent2;\n#define PI 3.14159265359\n#define TAU 6.28318530718\nfloat hash21(vec2 q){ q = fract(q * vec2(233.34, 851.73)); q += dot(q, q + 23.45); return fract(q.x * q.y); }\nfloat vnoise(vec2 q){\n  vec2 i = floor(q); vec2 f = fract(q);\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  return mix(mix(hash21(i), hash21(i + vec2(1.0, 0.0)), u.x),\n             mix(hash21(i + vec2(0.0, 1.0)), hash21(i + vec2(1.0, 1.0)), u.x), u.y);\n}\nfloat fbm(vec2 q){\n  float v = 0.0; float a = 0.5;\n  for (int i = 0; i < 4; i++) { v += a * vnoise(q); q = q * 2.07 + vec2(11.3, 7.9); a *= 0.5; }\n  return v;\n}\nfloat smin(float a, float b, float k){ float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0); return mix(b, a, h) - k * h * (1.0 - h); }\nfloat rmax(){ return length(vec2(uRes.x / uRes.y, 1.0) * 0.5); }\nfloat tri(float x){ return abs(fract(x) * 2.0 - 1.0); }\n`;\n\nconst MAIN = `\nvoid main(){\n  vec2 uv = gl_FragCoord.xy / uRes;\n  uv.x = mix(uv.x, 1.0 - uv.x, uFlip);\n  vec2 p = (uv - 0.5) * vec2(uRes.x / uRes.y, 1.0);\n  float f = clamp(field(uv, p, uTime), 0.0, 1.0);\n  bool covering = uProgress < 0.5;\n  float q = covering ? uProgress * 2.0 : uProgress * 2.0 - 1.0;\n  float x = q * (1.0 + uSoft);\n  float g = covering ? f : mix(f, 1.0 - f, uReverse);\n  float c = covering ? 1.0 - smoothstep(x - uSoft, x, g) : smoothstep(x - uSoft, x, g);\n  float d = g - x;\n  float w = uSoft * 0.5 + 0.004;\n  float edge = exp(-(d * d) / (w * w)) * smoothstep(0.0, 0.06, q) * smoothstep(1.0, 0.94, q);\n  float glow = clamp(edge * uGlow, 0.0, 0.92);\n  float tint = clamp(sheen(uv, p, uTime, d) * uSheen, 0.0, 1.0);\n  vec3 base = mix(uSurface, uAccent2, tint);\n  float cover = c * (1.0 - glow);\n  gl_FragColor = vec4(base * cover + uAccent * glow, cover + glow);\n}\n`;\n\n/** The complete fragment program for one preset. */\nexport function buildFragmentShader(preset: Pick<ShaderTransitionPreset, \"glsl\">): string {\n  return `${PRELUDE}\\n${preset.glsl}\\n${MAIN}`;\n}\n\nfunction compile(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | null {\n  const shader = gl.createShader(type);\n  if (!shader) return null;\n  gl.shaderSource(shader, source);\n  gl.compileShader(shader);\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    if (process.env.NODE_ENV !== \"production\") {\n      console.warn(\"[ShaderTransition] shader failed to compile:\", gl.getShaderInfoLog(shader));\n    }\n    gl.deleteShader(shader);\n    return null;\n  }\n  return shader;\n}\n\n/** Compiles and links the shared vertex shader with a fragment source. */\nexport function createProgram(\n  gl: WebGLRenderingContext,\n  fragmentSource: string,\n): WebGLProgram | null {\n  const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX_SHADER);\n  const fragment = vertex ? compile(gl, gl.FRAGMENT_SHADER, fragmentSource) : null;\n  const program = vertex && fragment ? gl.createProgram() : null;\n  if (!vertex || !fragment || !program) {\n    if (vertex) gl.deleteShader(vertex);\n    if (fragment) gl.deleteShader(fragment);\n    return null;\n  }\n  gl.attachShader(program, vertex);\n  gl.attachShader(program, fragment);\n  gl.linkProgram(program);\n  gl.deleteShader(vertex);\n  gl.deleteShader(fragment);\n  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n    gl.deleteProgram(program);\n    return null;\n  }\n  return program;\n}\n\nconst QUAD = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);\n\nconst UNIFORMS = [\n  \"uRes\",\n  \"uTime\",\n  \"uProgress\",\n  \"uSoft\",\n  \"uGlow\",\n  \"uSheen\",\n  \"uReverse\",\n  \"uFlip\",\n  \"uSurface\",\n  \"uAccent\",\n  \"uAccent2\",\n] as const;\n\nexport interface RendererOptions {\n  colors: ShaderColors;\n  /** Mirror the field horizontally, so sweeps travel toward inline-end in RTL. */\n  flip?: boolean;\n}\n\n/**\n * Creates a context and program on `canvas` for one preset. Returns null when\n * WebGL is unavailable or the program does not build — the caller falls back\n * to a CSS cross-fade.\n */\nexport function createShaderRenderer(\n  canvas: HTMLCanvasElement,\n  preset: ShaderTransitionPreset,\n  { colors, flip = false }: RendererOptions,\n): ShaderRenderer | null {\n  const context = getWebGL(canvas);\n  if (!context) return null;\n\n  const program = createProgram(context, buildFragmentShader(preset));\n  if (!program) {\n    loseContext(context);\n    return null;\n  }\n\n  const buffer = context.createBuffer();\n  context.useProgram(program);\n  context.bindBuffer(context.ARRAY_BUFFER, buffer);\n  context.bufferData(context.ARRAY_BUFFER, QUAD, context.STATIC_DRAW);\n  const position = context.getAttribLocation(program, \"aPos\");\n  context.enableVertexAttribArray(position);\n  context.vertexAttribPointer(position, 2, context.FLOAT, false, 0, 0);\n  context.enable(context.BLEND);\n  context.blendFunc(context.ONE, context.ONE_MINUS_SRC_ALPHA);\n  context.clearColor(0, 0, 0, 0);\n\n  const loc = Object.fromEntries(\n    UNIFORMS.map((name) => [name, context.getUniformLocation(program, name)]),\n  ) as Record<(typeof UNIFORMS)[number], WebGLUniformLocation | null>;\n\n  context.uniform1f(loc.uSoft, preset.softness);\n  context.uniform1f(loc.uGlow, preset.glow);\n  context.uniform1f(loc.uSheen, preset.sheen);\n  context.uniform1f(loc.uReverse, preset.reverse ? 1 : 0);\n  context.uniform1f(loc.uFlip, flip ? 1 : 0);\n  context.uniform3f(loc.uSurface, ...colors.surface);\n  context.uniform3f(loc.uAccent, ...colors.accent);\n  context.uniform3f(loc.uAccent2, ...colors.accentSecondary);\n\n  let destroyed = false;\n\n  return {\n    resize(width, height) {\n      if (destroyed) return;\n      const dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);\n      const w = Math.max(1, Math.round(width * dpr));\n      const h = Math.max(1, Math.round(height * dpr));\n      if (canvas.width !== w) canvas.width = w;\n      if (canvas.height !== h) canvas.height = h;\n      context.viewport(0, 0, w, h);\n      context.uniform2f(loc.uRes, w, h);\n    },\n    draw(progress, time) {\n      if (destroyed || context.isContextLost()) return;\n      context.clear(context.COLOR_BUFFER_BIT);\n      context.uniform1f(loc.uProgress, clamp01(progress));\n      context.uniform1f(loc.uTime, time);\n      context.drawArrays(context.TRIANGLE_STRIP, 0, 4);\n    },\n    destroy() {\n      if (destroyed) return;\n      destroyed = true;\n      if (!context.isContextLost()) {\n        context.deleteBuffer(buffer);\n        context.deleteProgram(program);\n      }\n      loseContext(context);\n    },\n  };\n}\n\nfunction getWebGL(canvas: HTMLCanvasElement): WebGLRenderingContext | null {\n  try {\n    return canvas.getContext(\"webgl\", {\n      alpha: true,\n      antialias: false,\n      depth: false,\n      stencil: false,\n      premultipliedAlpha: true,\n      preserveDrawingBuffer: false,\n    });\n  } catch {\n    return null;\n  }\n}\n\n/** Releases the context now rather than whenever the canvas is collected. */\nfunction loseContext(gl: WebGLRenderingContext) {\n  gl.getExtension(\"WEBGL_lose_context\")?.loseContext();\n}\n\nexport function clamp01(value: number): number {\n  return Math.min(1, Math.max(0, value));\n}\n\n/** Symmetric ease for the whole run: slow in, fast through the swap, slow out. */\nexport function easeRun(t: number): number {\n  const x = clamp01(t);\n  return x < 0.5 ? 4 * x * x * x : 1 - (-2 * x + 2) ** 3 / 2;\n}\n\n/* Colour ------------------------------------------------------------------ */\n\n/** `\"primary\"` → `var(--color-primary)`; `--x` → `var(--x)`; anything else as is. */\nexport function tokenToCss(token: string): string {\n  if (token.startsWith(\"--\")) return `var(${token})`;\n  if (/^[a-z][a-z0-9-]*$/.test(token) && token !== \"transparent\" && token !== \"currentcolor\") {\n    return `var(--color-${token})`;\n  }\n  return token;\n}\n\nlet scratch: CanvasRenderingContext2D | null | undefined;\n\n/**\n * Resolves a colour token, as seen from `element`, to linear 0–1 RGB for a\n * uniform. The browser resolves the token (so a scoped theme, nested var() and\n * color-mix() all work) and a 1×1 2D canvas converts whatever colour space it\n * came back in — oklch included — to sRGB bytes.\n */\nexport function resolveRgb(\n  element: Element,\n  token: string,\n  fallback: Rgb = [0.5, 0.5, 0.5],\n): Rgb {\n  const doc = element.ownerDocument;\n  const view = doc.defaultView;\n  if (!view) return fallback;\n  const probe = doc.createElement(\"span\");\n  probe.style.display = \"none\";\n  probe.style.color = tokenToCss(token);\n  (element.parentElement ?? doc.body).appendChild(probe);\n  const computed = view.getComputedStyle(probe).color;\n  probe.remove();\n  if (!computed) return fallback;\n\n  if (scratch === undefined) {\n    try {\n      const canvas = doc.createElement(\"canvas\");\n      canvas.width = 1;\n      canvas.height = 1;\n      scratch = canvas.getContext(\"2d\", { willReadFrequently: true });\n    } catch {\n      scratch = null;\n    }\n  }\n  if (scratch) {\n    scratch.clearRect(0, 0, 1, 1);\n    scratch.fillStyle = computed;\n    scratch.fillRect(0, 0, 1, 1);\n    const [r = 0, g = 0, b = 0, a = 0] = scratch.getImageData(0, 0, 1, 1).data;\n    if (a > 0) return [r / 255, g / 255, b / 255];\n  }\n  // No 2D canvas: read the channels from an sRGB serialisation, if that is what came back.\n  if (computed.startsWith(\"rgb\")) {\n    const [r, g, b] = (computed.match(/[\\d.]+/g) ?? []).map(Number);\n    if (r !== undefined && g !== undefined && b !== undefined)\n      return [r / 255, g / 255, b / 255];\n  }\n  return fallback;\n}\n\n/** Test hook: forget the cached 2D context. */\nexport function resetColorCache() {\n  scratch = undefined;\n}\n\n/* Motion preferences ------------------------------------------------------ */\n\nexport const REDUCED_MOTION_QUERY = \"(prefers-reduced-motion: reduce)\";\n\n/** The theme's `--motion-scale` (1 when unset). 0 means motion is off. */\nexport function motionScale(element?: Element): number {\n  if (typeof window === \"undefined\") return 1;\n  const raw = window\n    .getComputedStyle(element ?? document.documentElement)\n    .getPropertyValue(\"--motion-scale\");\n  const value = Number.parseFloat(raw);\n  return Number.isFinite(value) ? Math.max(0, value) : 1;\n}\n\n/** OS reduced-motion preference, or the theme's scale turned (nearly) to zero. */\nexport function prefersReducedMotion(element?: Element): boolean {\n  if (typeof window === \"undefined\") return false;\n  if (\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(REDUCED_MOTION_QUERY).matches\n  ) {\n    return true;\n  }\n  return motionScale(element) < 0.01;\n}\n\n/** Whether a WebGL context can be created here at all. Cached per page. */\nlet webglSupport: boolean | undefined;\nexport function supportsWebGL(): boolean {\n  if (webglSupport !== undefined) return webglSupport;\n  if (typeof document === \"undefined\") return false;\n  try {\n    webglSupport = typeof WebGLRenderingContext !== \"undefined\";\n  } catch {\n    webglSupport = false;\n  }\n  return webglSupport;\n}\n\n/** Records that creating a context failed, so later runs skip straight to the fallback. */\nexport function markWebGLUnavailable() {\n  webglSupport = false;\n}\n\n/** Test hook: forget the cached support check. */\nexport function resetWebGLSupport() {\n  webglSupport = undefined;\n}\n"],"mappings":"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"}

package/dist/components/shader-transition/shader-transition-presets.d.ts

@@ -0,0 +1,222 @@
+//#region src/components/shader-transition/shader-transition-presets.d.ts
+interface ShaderTransitionPreset {
+  /** The SmoothUI component this preset reproduces. */
+  source: string;
+  /** Whether the shader is ported from SmoothUI or written from scratch. */
+  origin: "ported" | "original";
+  /** One line for a gallery caption. */
+  description: string;
+  /** Default run length in ms at `--motion-scale: 1`. */
+  duration: number;
+  /** Width of the front in field units (0–1). */
+  softness: number;
+  /** Strength of the primary-accent glow on the front. */
+  glow: number;
+  /** Strength of the preset's secondary-accent sheen on the cover. */
+  sheen: number;
+  /** Uncover along the reversed field (the cover retreats) instead of continuing. */
+  reverse: boolean;
+  /** Defines `field` and `sheen`. */
+  glsl: string;
+}
+declare const SHADER_TRANSITION_PRESETS: {
+  /** Ported: SmoothUI Aperture Blur — a ring opening from the centre, angular ripple, grain. */
+  "aperture-blur": {
+    source: string;
+    origin: "ported";
+    description: string;
+    duration: number;
+    softness: number;
+    glow: number;
+    sheen: number;
+    reverse: false;
+    glsl: string;
+  };
+  /** Ported: SmoothUI Chroma Blur — a diagonal curtain with rippling edge and chromatic fringes. */
+  "chroma-blur": {
+    source: string;
+    origin: "ported";
+    description: string;
+    duration: number;
+    softness: number;
+    glow: number;
+    sheen: number;
+    reverse: false;
+    glsl: string;
+  };
+  /** Ported: SmoothUI Prism Sweep — a faceted glass band sweeping across, caustics behind the crest. */
+  "prism-sweep": {
+    source: string;
+    origin: "ported";
+    description: string;
+    duration: number;
+    softness: number;
+    glow: number;
+    sheen: number;
+    reverse: false;
+    glsl: string;
+  };
+  /** original shader (effect inspired by SmoothUI SdfBlobTransition; no code referenced) */
+  "sdf-blob": {
+    source: string;
+    origin: "original";
+    description: string;
+    duration: number;
+    softness: number;
+    glow: number;
+    sheen: number;
+    reverse: false;
+    glsl: string;
+  };
+  /** original shader (effect inspired by SmoothUI OrganicMergeTransition; no code referenced) */
+  "organic-merge": {
+    source: string;
+    origin: "original";
+    description: string;
+    duration: number;
+    softness: number;
+    glow: number;
+    sheen: number;
+    reverse: false;
+    glsl: string;
+  };
+  /** original shader (effect inspired by SmoothUI SdfCircleTransition; no code referenced) */
+  "sdf-circle": {
+    source: string;
+    origin: "original";
+    description: string;
+    duration: number;
+    softness: number;
+    glow: number;
+    sheen: number;
+    reverse: false;
+    glsl: string;
+  };
+  /** original shader (effect inspired by SmoothUI WarpedCircleTransition; no code referenced) */
+  "warped-circle": {
+    source: string;
+    origin: "original";
+    description: string;
+    duration: number;
+    softness: number;
+    glow: number;
+    sheen: number;
+    reverse: false;
+    glsl: string;
+  };
+  /** original shader (effect inspired by SmoothUI RadialCirclesTransition; no code referenced) */
+  "radial-circles": {
+    source: string;
+    origin: "original";
+    description: string;
+    duration: number;
+    softness: number;
+    glow: number;
+    sheen: number;
+    reverse: false;
+    glsl: string;
+  };
+  /** original shader (effect inspired by SmoothUI ShaderRevealNoiseTransition; no code referenced) */
+  noise: {
+    source: string;
+    origin: "original";
+    description: string;
+    duration: number;
+    softness: number;
+    glow: number;
+    sheen: number;
+    reverse: false;
+    glsl: string;
+  };
+  /** original shader (effect inspired by SmoothUI ShaderRevealZoomTransition; no code referenced) */
+  zoom: {
+    source: string;
+    origin: "original";
+    description: string;
+    duration: number;
+    softness: number;
+    glow: number;
+    sheen: number;
+    reverse: true;
+    glsl: string;
+  };
+  /** original shader (effect inspired by SmoothUI ShaderRevealCircleTransition; no code referenced) */
+  circle: {
+    source: string;
+    origin: "original";
+    description: string;
+    duration: number;
+    softness: number;
+    glow: number;
+    sheen: number;
+    reverse: false;
+    glsl: string;
+  };
+  /** original shader (effect inspired by SmoothUI ShaderRevealWipeTransition; no code referenced) */
+  wipe: {
+    source: string;
+    origin: "original";
+    description: string;
+    duration: number;
+    softness: number;
+    glow: number;
+    sheen: number;
+    reverse: false;
+    glsl: string;
+  };
+  /** original shader (effect inspired by SmoothUI ShaderRevealLumaTransition; no code referenced) */
+  luma: {
+    source: string;
+    origin: "original";
+    description: string;
+    duration: number;
+    softness: number;
+    glow: number;
+    sheen: number;
+    reverse: false;
+    glsl: string;
+  };
+  /** original shader (effect inspired by SmoothUI ShaderRevealPlanetaryTransition; no code referenced) */
+  planetary: {
+    source: string;
+    origin: "original";
+    description: string;
+    duration: number;
+    softness: number;
+    glow: number;
+    sheen: number;
+    reverse: false;
+    glsl: string;
+  };
+  /** original shader (effect inspired by SmoothUI ShaderRevealStripesTransition; no code referenced) */
+  stripes: {
+    source: string;
+    origin: "original";
+    description: string;
+    duration: number;
+    softness: number;
+    glow: number;
+    sheen: number;
+    reverse: false;
+    glsl: string;
+  };
+  /** original shader (effect inspired by SmoothUI ShaderRevealPushTransition; no code referenced) */
+  push: {
+    source: string;
+    origin: "original";
+    description: string;
+    duration: number;
+    softness: number;
+    glow: number;
+    sheen: number;
+    reverse: false;
+    glsl: string;
+  };
+};
+type ShaderTransitionPresetName = keyof typeof SHADER_TRANSITION_PRESETS;
+declare const SHADER_TRANSITION_PRESET_NAMES: ShaderTransitionPresetName[];
+/** The preset for a name; unknown names fall back to `noise` (and warn in development). */
+declare function getShaderTransitionPreset(name: string): ShaderTransitionPreset;
+//#endregion
+export { SHADER_TRANSITION_PRESETS, SHADER_TRANSITION_PRESET_NAMES, ShaderTransitionPreset, ShaderTransitionPresetName, getShaderTransitionPreset };
+//# sourceMappingURL=shader-transition-presets.d.ts.map

package/dist/components/shader-transition/shader-transition-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shader-transition-presets.d.ts","names":[],"sources":["../../../src/components/shader-transition/shader-transition-presets.ts"],"mappings":";UA8BiB;;EAEf;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;cAOW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiWD,0CAA0C;cAEzC,gCAER;;iBAGW,0BAA0B,eAAe"}