@circadian/sol 0.2.8 → 0.2.9

package/dist/index.js

@@ -1,6 +1,6 @@
-import { l as lerpHex, n as useSolarTheme, r as SKINS, t as SolarThemeProvider } from "./solar-theme-provider-6-EJ4jGB.js";
-import { useEffect, useLayoutEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { l as lerpColor, n as useSolarTheme, r as SKINS, t as SolarThemeProvider, u as lerpHex } from "./solar-theme-provider-CSustvmw.js";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/widgets/solar-widget.shell.tsx
 const PALETTES = SKINS.foundry.widgetPalettes;
@@ -320,5 +320,1037 @@ function CompactWidget({ design: designOverride, overridePhase, time, location =
 }
 
 //#endregion
-export { CompactWidget, SolarThemeProvider, SolarWidget, useSolarTheme };
+//#region src/shared/shader-motion-profiles.tsx
+const UNIVERSAL_PHASE_MOTION = {
+	midnight: {
+		distortion: .2,
+		swirl: .04,
+		speed: .1,
+		grainOverlay: .18
+	},
+	night: {
+		distortion: .28,
+		swirl: .06,
+		speed: .15,
+		grainOverlay: .15
+	},
+	dawn: {
+		distortion: .52,
+		swirl: .14,
+		speed: .26,
+		grainOverlay: .1
+	},
+	sunrise: {
+		distortion: .68,
+		swirl: .22,
+		speed: .38,
+		grainOverlay: .07
+	},
+	morning: {
+		distortion: .54,
+		swirl: .13,
+		speed: .5,
+		grainOverlay: .05
+	},
+	"solar-noon": {
+		distortion: .36,
+		swirl: .07,
+		speed: .64,
+		grainOverlay: .04
+	},
+	afternoon: {
+		distortion: .44,
+		swirl: .1,
+		speed: .5,
+		grainOverlay: .05
+	},
+	sunset: {
+		distortion: .72,
+		swirl: .3,
+		speed: .34,
+		grainOverlay: .08
+	},
+	dusk: {
+		distortion: .44,
+		swirl: .18,
+		speed: .2,
+		grainOverlay: .14
+	}
+};
+const VOID_MOTION = {
+	midnight: {
+		distortion: .08,
+		swirl: .01,
+		speed: .04,
+		grainOverlay: .28
+	},
+	night: {
+		distortion: .1,
+		swirl: .02,
+		speed: .05,
+		grainOverlay: .22
+	},
+	dawn: {
+		distortion: .14,
+		swirl: .03,
+		speed: .07,
+		grainOverlay: .16
+	},
+	sunrise: {
+		distortion: .16,
+		swirl: .04,
+		speed: .09,
+		grainOverlay: .12
+	},
+	morning: {
+		distortion: .14,
+		swirl: .03,
+		speed: .1,
+		grainOverlay: .1
+	},
+	"solar-noon": {
+		distortion: .1,
+		swirl: .02,
+		speed: .12,
+		grainOverlay: .08
+	},
+	afternoon: {
+		distortion: .12,
+		swirl: .03,
+		speed: .1,
+		grainOverlay: .1
+	},
+	sunset: {
+		distortion: .18,
+		swirl: .05,
+		speed: .08,
+		grainOverlay: .14
+	},
+	dusk: {
+		distortion: .12,
+		swirl: .03,
+		speed: .06,
+		grainOverlay: .2
+	}
+};
+const PARCHMENT_MOTION = {
+	midnight: {
+		distortion: 0,
+		swirl: 0,
+		speed: 0,
+		grainOverlay: .06
+	},
+	night: {
+		distortion: 0,
+		swirl: 0,
+		speed: 0,
+		grainOverlay: .05
+	},
+	dawn: {
+		distortion: 0,
+		swirl: 0,
+		speed: 0,
+		grainOverlay: .04
+	},
+	sunrise: {
+		distortion: 0,
+		swirl: 0,
+		speed: 0,
+		grainOverlay: .03
+	},
+	morning: {
+		distortion: 0,
+		swirl: 0,
+		speed: 0,
+		grainOverlay: .02
+	},
+	"solar-noon": {
+		distortion: 0,
+		swirl: 0,
+		speed: 0,
+		grainOverlay: .02
+	},
+	afternoon: {
+		distortion: 0,
+		swirl: 0,
+		speed: 0,
+		grainOverlay: .02
+	},
+	sunset: {
+		distortion: 0,
+		swirl: 0,
+		speed: 0,
+		grainOverlay: .03
+	},
+	dusk: {
+		distortion: 0,
+		swirl: 0,
+		speed: 0,
+		grainOverlay: .05
+	}
+};
+const SIGNAL_MOTION = {
+	midnight: {
+		distortion: .06,
+		swirl: 0,
+		speed: .06,
+		grainOverlay: .32
+	},
+	night: {
+		distortion: .06,
+		swirl: 0,
+		speed: .06,
+		grainOverlay: .3
+	},
+	dawn: {
+		distortion: .08,
+		swirl: .01,
+		speed: .08,
+		grainOverlay: .26
+	},
+	sunrise: {
+		distortion: .08,
+		swirl: .01,
+		speed: .08,
+		grainOverlay: .24
+	},
+	morning: {
+		distortion: .1,
+		swirl: .01,
+		speed: .1,
+		grainOverlay: .22
+	},
+	"solar-noon": {
+		distortion: .1,
+		swirl: .01,
+		speed: .1,
+		grainOverlay: .2
+	},
+	afternoon: {
+		distortion: .1,
+		swirl: .01,
+		speed: .1,
+		grainOverlay: .22
+	},
+	sunset: {
+		distortion: .08,
+		swirl: .01,
+		speed: .08,
+		grainOverlay: .26
+	},
+	dusk: {
+		distortion: .06,
+		swirl: 0,
+		speed: .06,
+		grainOverlay: .3
+	}
+};
+const MERIDIAN_MOTION = {
+	midnight: {
+		distortion: .12,
+		swirl: .02,
+		speed: .08,
+		grainOverlay: .08
+	},
+	night: {
+		distortion: .14,
+		swirl: .03,
+		speed: .1,
+		grainOverlay: .07
+	},
+	dawn: {
+		distortion: .24,
+		swirl: .06,
+		speed: .14,
+		grainOverlay: .05
+	},
+	sunrise: {
+		distortion: .3,
+		swirl: .09,
+		speed: .2,
+		grainOverlay: .04
+	},
+	morning: {
+		distortion: .26,
+		swirl: .06,
+		speed: .26,
+		grainOverlay: .03
+	},
+	"solar-noon": {
+		distortion: .18,
+		swirl: .04,
+		speed: .32,
+		grainOverlay: .02
+	},
+	afternoon: {
+		distortion: .22,
+		swirl: .05,
+		speed: .26,
+		grainOverlay: .03
+	},
+	sunset: {
+		distortion: .32,
+		swirl: .12,
+		speed: .18,
+		grainOverlay: .04
+	},
+	dusk: {
+		distortion: .22,
+		swirl: .08,
+		speed: .12,
+		grainOverlay: .06
+	}
+};
+const SUNDIAL_MOTION = {
+	midnight: {
+		distortion: .18,
+		swirl: .03,
+		speed: .07,
+		grainOverlay: .2
+	},
+	night: {
+		distortion: .2,
+		swirl: .04,
+		speed: .08,
+		grainOverlay: .18
+	},
+	dawn: {
+		distortion: .28,
+		swirl: .07,
+		speed: .14,
+		grainOverlay: .12
+	},
+	sunrise: {
+		distortion: .34,
+		swirl: .1,
+		speed: .18,
+		grainOverlay: .09
+	},
+	morning: {
+		distortion: .28,
+		swirl: .06,
+		speed: .22,
+		grainOverlay: .08
+	},
+	"solar-noon": {
+		distortion: .2,
+		swirl: .04,
+		speed: .28,
+		grainOverlay: .06
+	},
+	afternoon: {
+		distortion: .24,
+		swirl: .05,
+		speed: .22,
+		grainOverlay: .07
+	},
+	sunset: {
+		distortion: .36,
+		swirl: .14,
+		speed: .16,
+		grainOverlay: .1
+	},
+	dusk: {
+		distortion: .24,
+		swirl: .08,
+		speed: .1,
+		grainOverlay: .14
+	}
+};
+const PAPER_MOTION = {
+	midnight: {
+		distortion: .22,
+		swirl: .04,
+		speed: .1,
+		grainOverlay: .22
+	},
+	night: {
+		distortion: .26,
+		swirl: .06,
+		speed: .14,
+		grainOverlay: .18
+	},
+	dawn: {
+		distortion: .38,
+		swirl: .1,
+		speed: .22,
+		grainOverlay: .12
+	},
+	sunrise: {
+		distortion: .46,
+		swirl: .14,
+		speed: .3,
+		grainOverlay: .09
+	},
+	morning: {
+		distortion: .38,
+		swirl: .09,
+		speed: .38,
+		grainOverlay: .07
+	},
+	"solar-noon": {
+		distortion: .28,
+		swirl: .05,
+		speed: .46,
+		grainOverlay: .05
+	},
+	afternoon: {
+		distortion: .34,
+		swirl: .07,
+		speed: .38,
+		grainOverlay: .06
+	},
+	sunset: {
+		distortion: .5,
+		swirl: .2,
+		speed: .26,
+		grainOverlay: .1
+	},
+	dusk: {
+		distortion: .34,
+		swirl: .12,
+		speed: .16,
+		grainOverlay: .14
+	}
+};
+const FOUNDRY_MOTION = {
+	midnight: {
+		distortion: .22,
+		swirl: .04,
+		speed: .1,
+		grainOverlay: .16
+	},
+	night: {
+		distortion: .3,
+		swirl: .07,
+		speed: .16,
+		grainOverlay: .13
+	},
+	dawn: {
+		distortion: .55,
+		swirl: .16,
+		speed: .28,
+		grainOverlay: .09
+	},
+	sunrise: {
+		distortion: .7,
+		swirl: .26,
+		speed: .4,
+		grainOverlay: .06
+	},
+	morning: {
+		distortion: .56,
+		swirl: .15,
+		speed: .52,
+		grainOverlay: .04
+	},
+	"solar-noon": {
+		distortion: .38,
+		swirl: .08,
+		speed: .66,
+		grainOverlay: .03
+	},
+	afternoon: {
+		distortion: .46,
+		swirl: .12,
+		speed: .52,
+		grainOverlay: .04
+	},
+	sunset: {
+		distortion: .74,
+		swirl: .34,
+		speed: .36,
+		grainOverlay: .07
+	},
+	dusk: {
+		distortion: .46,
+		swirl: .2,
+		speed: .22,
+		grainOverlay: .12
+	}
+};
+const MINERAL_MOTION = {
+	midnight: {
+		distortion: .14,
+		swirl: .1,
+		speed: .12,
+		grainOverlay: .06
+	},
+	night: {
+		distortion: .16,
+		swirl: .12,
+		speed: .14,
+		grainOverlay: .05
+	},
+	dawn: {
+		distortion: .22,
+		swirl: .18,
+		speed: .22,
+		grainOverlay: .04
+	},
+	sunrise: {
+		distortion: .28,
+		swirl: .24,
+		speed: .32,
+		grainOverlay: .03
+	},
+	morning: {
+		distortion: .22,
+		swirl: .18,
+		speed: .4,
+		grainOverlay: .02
+	},
+	"solar-noon": {
+		distortion: .16,
+		swirl: .14,
+		speed: .5,
+		grainOverlay: .02
+	},
+	afternoon: {
+		distortion: .2,
+		swirl: .16,
+		speed: .4,
+		grainOverlay: .02
+	},
+	sunset: {
+		distortion: .3,
+		swirl: .28,
+		speed: .28,
+		grainOverlay: .03
+	},
+	dusk: {
+		distortion: .2,
+		swirl: .2,
+		speed: .18,
+		grainOverlay: .04
+	}
+};
+const TIDE_MOTION = {
+	midnight: {
+		distortion: .5,
+		swirl: .08,
+		speed: .18,
+		grainOverlay: .03
+	},
+	night: {
+		distortion: .54,
+		swirl: .1,
+		speed: .22,
+		grainOverlay: .03
+	},
+	dawn: {
+		distortion: .64,
+		swirl: .16,
+		speed: .34,
+		grainOverlay: .02
+	},
+	sunrise: {
+		distortion: .72,
+		swirl: .2,
+		speed: .44,
+		grainOverlay: .02
+	},
+	morning: {
+		distortion: .68,
+		swirl: .16,
+		speed: .54,
+		grainOverlay: .01
+	},
+	"solar-noon": {
+		distortion: .6,
+		swirl: .12,
+		speed: .62,
+		grainOverlay: .01
+	},
+	afternoon: {
+		distortion: .64,
+		swirl: .14,
+		speed: .54,
+		grainOverlay: .01
+	},
+	sunset: {
+		distortion: .74,
+		swirl: .24,
+		speed: .4,
+		grainOverlay: .02
+	},
+	dusk: {
+		distortion: .6,
+		swirl: .18,
+		speed: .28,
+		grainOverlay: .03
+	}
+};
+const AURORA_MOTION = {
+	midnight: {
+		distortion: .8,
+		swirl: .44,
+		speed: .7,
+		grainOverlay: .02
+	},
+	night: {
+		distortion: .86,
+		swirl: .5,
+		speed: .8,
+		grainOverlay: .02
+	},
+	dawn: {
+		distortion: .62,
+		swirl: .32,
+		speed: .52,
+		grainOverlay: .03
+	},
+	sunrise: {
+		distortion: .38,
+		swirl: .16,
+		speed: .3,
+		grainOverlay: .04
+	},
+	morning: {
+		distortion: .18,
+		swirl: .05,
+		speed: .18,
+		grainOverlay: .04
+	},
+	"solar-noon": {
+		distortion: .14,
+		swirl: .03,
+		speed: .14,
+		grainOverlay: .03
+	},
+	afternoon: {
+		distortion: .18,
+		swirl: .05,
+		speed: .18,
+		grainOverlay: .04
+	},
+	sunset: {
+		distortion: .46,
+		swirl: .24,
+		speed: .42,
+		grainOverlay: .03
+	},
+	dusk: {
+		distortion: .68,
+		swirl: .38,
+		speed: .6,
+		grainOverlay: .02
+	}
+};
+const SKIN_MOTION_PROFILES = {
+	void: VOID_MOTION,
+	parchment: PARCHMENT_MOTION,
+	signal: SIGNAL_MOTION,
+	meridian: MERIDIAN_MOTION,
+	sundial: SUNDIAL_MOTION,
+	paper: PAPER_MOTION,
+	foundry: FOUNDRY_MOTION,
+	mineral: MINERAL_MOTION,
+	tide: TIDE_MOTION,
+	aurora: AURORA_MOTION
+};
+
+//#endregion
+//#region src/shared/solar-shader-bg.tsx
+const ShaderVariantCtx = createContext("showcase");
+function useShaderVariant() {
+	return useContext(ShaderVariantCtx);
+}
+const DASHBOARD_MOTION_SCALE = {
+	speed: .45,
+	distortion: .5,
+	swirl: .4,
+	grainOverlay: 1.3
+};
+const DASHBOARD_OPACITY_SCALE = .65;
+function applyDashboardMotion(m) {
+	return {
+		speed: m.speed * DASHBOARD_MOTION_SCALE.speed,
+		distortion: m.distortion * DASHBOARD_MOTION_SCALE.distortion,
+		swirl: m.swirl * DASHBOARD_MOTION_SCALE.swirl,
+		grainOverlay: Math.min(1, m.grainOverlay * DASHBOARD_MOTION_SCALE.grainOverlay)
+	};
+}
+const EDITORIAL_MOTION_SCALE = {
+	speed: .3,
+	distortion: .35,
+	swirl: .25,
+	grainOverlay: 1.4
+};
+const EDITORIAL_OPACITY_SCALE = .35;
+function applyEditorialMotion(m) {
+	return {
+		speed: m.speed * EDITORIAL_MOTION_SCALE.speed,
+		distortion: m.distortion * EDITORIAL_MOTION_SCALE.distortion,
+		swirl: m.swirl * EDITORIAL_MOTION_SCALE.swirl,
+		grainOverlay: Math.min(1, m.grainOverlay * EDITORIAL_MOTION_SCALE.grainOverlay)
+	};
+}
+function mixToward(hex, target, mix) {
+	return lerpColor(hex, target, mix);
+}
+function applyEditorialPalette(p) {
+	const darkBase = "#08080c";
+	const darkVignette = "#030306";
+	return {
+		...p,
+		colors: p.colors.map((c) => mixToward(c, darkBase, .92)),
+		colorBack: mixToward(p.colorBack, darkBase, .95),
+		vignette: mixToward(p.vignette, darkVignette, .9),
+		cssFallback: `linear-gradient(135deg, ${darkBase} 0%, #0c0c14 100%)`
+	};
+}
+function lerpNum(a, b, t) {
+	return a + (b - a) * t;
+}
+function lerpMotion(a, b, t) {
+	return {
+		distortion: lerpNum(a.distortion, b.distortion, t),
+		swirl: lerpNum(a.swirl, b.swirl, t),
+		speed: lerpNum(a.speed, b.speed, t),
+		grainOverlay: lerpNum(a.grainOverlay, b.grainOverlay, t)
+	};
+}
+function lerpPalette(a, b, t) {
+	return {
+		colors: a.colors.map((ca, i) => lerpColor(ca, b.colors[i] ?? ca, t)),
+		colorBack: lerpColor(a.colorBack, b.colorBack, t),
+		opacity: lerpNum(a.opacity, b.opacity, t),
+		vignette: lerpColor(a.vignette, b.vignette, t),
+		cssFallback: a.cssFallback,
+		image: a.image
+	};
+}
+function resolveMotionProfile(skin) {
+	if (skin.shaderMotion) return skin.shaderMotion;
+	return SKIN_MOTION_PROFILES[skin.id] ?? UNIVERSAL_PHASE_MOTION;
+}
+function resolveImage(skin, palette) {
+	return palette.image ?? skin.defaultImage;
+}
+function computeConfig(skin, blend) {
+	const motionProfile = resolveMotionProfile(skin);
+	const { phase, nextPhase, t } = blend;
+	return {
+		palette: lerpPalette(skin.shaderPalettes[phase], skin.shaderPalettes[nextPhase], t),
+		motion: lerpMotion(motionProfile[phase], motionProfile[nextPhase], t)
+	};
+}
+function hexToRgb(hex) {
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+	return result ? [
+		Number.parseInt(result[1], 16) / 255,
+		Number.parseInt(result[2], 16) / 255,
+		Number.parseInt(result[3], 16) / 255
+	] : [
+		0,
+		0,
+		0
+	];
+}
+const VS_SOURCE = `#version 300 es
+  in vec2 a_position;
+  void main() {
+    gl_Position = vec4(a_position, 0.0, 1.0);
+  }
+`;
+const FS_SOURCE = `#version 300 es
+  precision highp float;
+
+  uniform vec2 r;          // resolution
+  uniform float t;         // time
+  uniform vec3 u_bg;       // background color (colorBack)
+  uniform vec3 u_c0;       // palette color 0
+  uniform vec3 u_c1;       // palette color 1
+  uniform vec3 u_c2;       // palette color 2
+  uniform vec3 u_c3;       // palette color 3
+  uniform float u_intensity;
+  uniform float u_spread;
+  uniform float u_pulseRate;
+  uniform float u_speed;
+  uniform float u_grain;
+
+  out vec4 o;
+
+  // Hash for grain
+  float hash(vec2 p) {
+    return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+  }
+
+  void main() {
+    vec4 FC = gl_FragCoord;
+    vec2 p = (FC.xy * 2. - r) / r.y;
+
+    // Average all 4 palette colors
+    vec3 avgColor = (u_c0 + u_c1 + u_c2 + u_c3) * 0.25;
+
+    // Normalize to a fixed luminance so the flare shape is identical
+    // across all skins regardless of how bright/dark the palette is.
+    // Dark palettes (Void midnight ≈ 0.01) and bright palettes
+    // (Paper morning ≈ 0.95) both produce the same-sized sun.
+    float lum = dot(avgColor, vec3(0.299, 0.587, 0.114));
+    vec3 flareColor = lum > 0.001
+      ? avgColor * (0.30 / lum)   // rescale to target luminance 0.30
+      : vec3(0.30);               // neutral grey fallback
+
+    // Solar flare radiance — matches the reference SolarFlare shader.
+    // length(p) creates a circular distance field from center.
+    // The exp(mod(dot(...))) creates alive, pulsing texture inside the sun.
+    float l = u_intensity - length(p);
+
+    o = tanh(
+      vec4(flareColor, 0.0)
+      / max(l, -l * u_spread)
+      / exp(
+        mod(dot(FC, sin(FC.yxyx)) + t * u_speed, 2.0)
+        + sin(t * u_speed + sin(t * u_speed / u_pulseRate + p.y))
+      )
+    );
+
+    // Film grain
+    float grain = (hash(FC.xy + fract(t)) - 0.5) * u_grain;
+
+    // Composite: background + flare glow + grain
+    o = vec4(u_bg + o.rgb + grain, 1.0);
+  }
+`;
+function SolarFlareCanvas({ backgroundColor, colors, speed, intensity, spread, pulseRate, grain }) {
+	const canvasRef = useRef(null);
+	const animationRef = useRef(null);
+	const configRef = useRef({
+		backgroundColor,
+		colors,
+		speed,
+		intensity,
+		spread,
+		pulseRate,
+		grain
+	});
+	useEffect(() => {
+		configRef.current = {
+			backgroundColor,
+			colors,
+			speed,
+			intensity,
+			spread,
+			pulseRate,
+			grain
+		};
+	}, [
+		backgroundColor,
+		colors,
+		speed,
+		intensity,
+		spread,
+		pulseRate,
+		grain
+	]);
+	useLayoutEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		const gl = canvas.getContext("webgl2");
+		if (!gl) return;
+		const createShader = (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)) {
+				gl.deleteShader(shader);
+				return null;
+			}
+			return shader;
+		};
+		const vs = createShader(gl.VERTEX_SHADER, VS_SOURCE);
+		const fs = createShader(gl.FRAGMENT_SHADER, FS_SOURCE);
+		if (!vs || !fs) return;
+		const program = gl.createProgram();
+		if (!program) return;
+		gl.attachShader(program, vs);
+		gl.attachShader(program, fs);
+		gl.linkProgram(program);
+		if (!gl.getProgramParameter(program, gl.LINK_STATUS)) return;
+		const positionBuffer = gl.createBuffer();
+		gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+			-1,
+			-1,
+			1,
+			-1,
+			-1,
+			1,
+			-1,
+			1,
+			1,
+			-1,
+			1,
+			1
+		]), gl.STATIC_DRAW);
+		const posLoc = gl.getAttribLocation(program, "a_position");
+		gl.enableVertexAttribArray(posLoc);
+		gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
+		const loc = {
+			r: gl.getUniformLocation(program, "r"),
+			t: gl.getUniformLocation(program, "t"),
+			bg: gl.getUniformLocation(program, "u_bg"),
+			c0: gl.getUniformLocation(program, "u_c0"),
+			c1: gl.getUniformLocation(program, "u_c1"),
+			c2: gl.getUniformLocation(program, "u_c2"),
+			c3: gl.getUniformLocation(program, "u_c3"),
+			intensity: gl.getUniformLocation(program, "u_intensity"),
+			spread: gl.getUniformLocation(program, "u_spread"),
+			pulseRate: gl.getUniformLocation(program, "u_pulseRate"),
+			speed: gl.getUniformLocation(program, "u_speed"),
+			grain: gl.getUniformLocation(program, "u_grain")
+		};
+		const resizeCanvas = () => {
+			const dpr = window.devicePixelRatio || 1;
+			canvas.width = Math.round(canvas.offsetWidth * dpr);
+			canvas.height = Math.round(canvas.offsetHeight * dpr);
+			gl.viewport(0, 0, canvas.width, canvas.height);
+		};
+		window.addEventListener("resize", resizeCanvas);
+		resizeCanvas();
+		const startTime = performance.now();
+		const render = () => {
+			const cfg = configRef.current;
+			gl.useProgram(program);
+			gl.uniform2f(loc.r, canvas.width, canvas.height);
+			gl.uniform1f(loc.t, (performance.now() - startTime) / 1e3);
+			const bg = hexToRgb(cfg.backgroundColor);
+			gl.uniform3f(loc.bg, bg[0], bg[1], bg[2]);
+			const c0 = hexToRgb(cfg.colors[0]);
+			const c1 = hexToRgb(cfg.colors[1]);
+			const c2 = hexToRgb(cfg.colors[2]);
+			const c3 = hexToRgb(cfg.colors[3]);
+			gl.uniform3f(loc.c0, c0[0], c0[1], c0[2]);
+			gl.uniform3f(loc.c1, c1[0], c1[1], c1[2]);
+			gl.uniform3f(loc.c2, c2[0], c2[1], c2[2]);
+			gl.uniform3f(loc.c3, c3[0], c3[1], c3[2]);
+			gl.uniform1f(loc.intensity, cfg.intensity);
+			gl.uniform1f(loc.spread, cfg.spread);
+			gl.uniform1f(loc.pulseRate, cfg.pulseRate);
+			gl.uniform1f(loc.speed, cfg.speed);
+			gl.uniform1f(loc.grain, cfg.grain);
+			gl.drawArrays(gl.TRIANGLES, 0, 6);
+			animationRef.current = requestAnimationFrame(render);
+		};
+		render();
+		return () => {
+			window.removeEventListener("resize", resizeCanvas);
+			if (animationRef.current) cancelAnimationFrame(animationRef.current);
+			gl.deleteProgram(program);
+			gl.deleteShader(vs);
+			gl.deleteShader(fs);
+			gl.deleteBuffer(positionBuffer);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvasRef,
+		style: {
+			position: "absolute",
+			top: 0,
+			left: 0,
+			width: "100%",
+			height: "100%"
+		}
+	});
+}
+let _hasHydrated = false;
+function SolarShaderBg({ skinOverride, blendOverride, opacityOverride, variant: variantProp, className, style } = {}) {
+	const { activeSkin, blend: contextBlend } = useSolarTheme();
+	const contextVariant = useShaderVariant();
+	const skin = skinOverride ?? activeSkin;
+	const blend = blendOverride ?? contextBlend;
+	const variant = variantProp ?? contextVariant;
+	const { palette, motion: rawMotion } = useMemo(() => computeConfig(skin, blend), [
+		blend.phase,
+		blend.nextPhase,
+		blend.t,
+		skin
+	]);
+	const variantPalette = variant === "editorial" ? applyEditorialPalette(palette) : palette;
+	const shaderMotion = variant === "dashboard" ? applyDashboardMotion(rawMotion) : variant === "editorial" ? applyEditorialMotion(rawMotion) : rawMotion;
+	const resolvedOpacity = opacityOverride ?? (variant === "dashboard" ? variantPalette.opacity * DASHBOARD_OPACITY_SCALE : variant === "editorial" ? variantPalette.opacity * EDITORIAL_OPACITY_SCALE : variantPalette.opacity);
+	const imageConfig = resolveImage(skin, variantPalette);
+	const [mounted, setMounted] = useState(_hasHydrated);
+	useLayoutEffect(() => {
+		_hasHydrated = true;
+		setMounted(true);
+	}, []);
+	useEffect(() => {
+		document.documentElement.style.setProperty("--solar-shader-bg", variantPalette.colorBack);
+		return () => {
+			document.documentElement.style.removeProperty("--solar-shader-bg");
+		};
+	}, [variantPalette.colorBack]);
+	const flareSpeed = .6 + shaderMotion.speed * .8;
+	const flareIntensity = 3.5 + shaderMotion.distortion * .5;
+	const flareSpread = 8 + shaderMotion.swirl * 8;
+	const flarePulseRate = .4 + (1 - shaderMotion.swirl) * .5;
+	const flareGrain = shaderMotion.grainOverlay * .12;
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		suppressHydrationWarning: true,
+		style: {
+			position: "absolute",
+			inset: 0,
+			overflow: "hidden",
+			background: variantPalette.cssFallback || variantPalette.colorBack,
+			...style
+		},
+		children: mounted && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0",
+				style: { opacity: resolvedOpacity },
+				children: /* @__PURE__ */ jsx(SolarFlareCanvas, {
+					backgroundColor: variantPalette.colorBack,
+					colors: variantPalette.colors,
+					speed: flareSpeed,
+					intensity: flareIntensity,
+					spread: flareSpread,
+					pulseRate: flarePulseRate,
+					grain: flareGrain
+				})
+			}),
+			imageConfig && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0",
+				"aria-hidden": true,
+				style: {
+					opacity: imageConfig.opacity ?? .18,
+					pointerEvents: "none",
+					background: "var(--solar-accent)",
+					WebkitMaskImage: `url(${imageConfig.src})`,
+					maskImage: `url(${imageConfig.src})`,
+					WebkitMaskSize: "cover",
+					maskSize: "cover",
+					WebkitMaskPosition: imageConfig.objectPosition ?? "center center",
+					maskPosition: imageConfig.objectPosition ?? "center center",
+					WebkitMaskRepeat: "no-repeat",
+					maskRepeat: "no-repeat"
+				}
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0",
+				"aria-hidden": true,
+				style: {
+					pointerEvents: "none",
+					background: `radial-gradient(ellipse 85% 70% at 50% 50%, transparent 0%, ${variantPalette.vignette} 100%)`
+				}
+			})
+		] })
+	});
+}
+function SolarShaderBgFull(props = {}) {
+	return /* @__PURE__ */ jsx(SolarShaderBg, {
+		...props,
+		style: {
+			zIndex: 0,
+			...props.style
+		}
+	});
+}
+
+//#endregion
+export { CompactWidget, SolarShaderBg, SolarShaderBgFull, SolarThemeProvider, SolarWidget, useSolarTheme };
 //# sourceMappingURL=index.js.map