@backbay/glia 0.2.0-alpha.1

package/dist/primitives/environment/VolumetricLight/VolumetricLight.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useReducedMotion } from "framer-motion";
+import { cn } from "../../../lib/utils";
+import { getPerformanceConfig } from "../shared/performance";
+import { NOISE_DATA_URL } from "../shared/noise";
+import { LIGHT_CONFIGS } from "./types";
+export function VolumetricLight({ type, source = { x: 0.5, y: 0 }, color: propColor, intensity = 0.5, decay = 0.5, angle = 0, width = 0.3, animated: propAnimated, stylePreset = 'ui', enabled = true, className, style, }) {
+    const reducedMotion = useReducedMotion();
+    const perfConfig = getPerformanceConfig();
+    const [time, setTime] = React.useState(0);
+    const config = LIGHT_CONFIGS[type];
+    const color = propColor ?? config.defaultColor;
+    const shouldAnimate = (propAnimated ?? config.animated) && !reducedMotion && perfConfig.tier !== 'minimal';
+    React.useEffect(() => {
+        if (!shouldAnimate || !enabled)
+            return;
+        let frame;
+        const animate = () => {
+            setTime(prev => prev + 0.016);
+            frame = requestAnimationFrame(animate);
+        };
+        frame = requestAnimationFrame(animate);
+        return () => cancelAnimationFrame(frame);
+    }, [shouldAnimate, enabled]);
+    if (!enabled)
+        return null;
+    const lightStyle = React.useMemo(() => {
+        const opacity = intensity * config.defaultIntensity;
+        const d = Math.max(0, Math.min(1, decay));
+        switch (type) {
+            case 'godrays':
+                return {
+                    background: `conic-gradient(from ${angle}deg at ${source.x * 100}% ${source.y * 100}%,
+            ${color}${Math.round(opacity * 0.4 * 255).toString(16).padStart(2, '0')} 0deg,
+            transparent 15deg,
+            ${color}${Math.round(opacity * 0.3 * 255).toString(16).padStart(2, '0')} 30deg,
+            transparent 45deg,
+            ${color}${Math.round(opacity * 0.35 * 255).toString(16).padStart(2, '0')} 60deg,
+            transparent 75deg,
+            ${color}${Math.round(opacity * 0.25 * 255).toString(16).padStart(2, '0')} 90deg,
+            transparent 105deg
+          )`,
+                    mixBlendMode: config.blendMode,
+                };
+            case 'shaft':
+                return {
+                    background: `linear-gradient(${angle}deg,
+            transparent ${(source.x - width / 2) * 100}%,
+            ${color}${Math.round(opacity * 0.5 * 255).toString(16).padStart(2, '0')} ${source.x * 100}%,
+            transparent ${(source.x + width / 2) * 100}%
+          )`,
+                    mixBlendMode: config.blendMode,
+                };
+            case 'bloom': {
+                const bloomInner = 18 + d * 22; // 18% → 40%
+                const bloomMid = 42 + d * 24; // 42% → 66%
+                return {
+                    background: `radial-gradient(circle at ${source.x * 100}% ${source.y * 100}%,
+            ${color}${Math.round(opacity * 0.6 * 255).toString(16).padStart(2, '0')},
+            ${color}${Math.round(opacity * 0.3 * 255).toString(16).padStart(2, '0')} ${bloomInner}%,
+            transparent ${bloomMid}%
+          )`,
+                    mixBlendMode: config.blendMode,
+                    filter: 'blur(20px)',
+                };
+            }
+            case 'flare':
+                const flareOffset = Math.sin(time * 2) * 5;
+                return {
+                    background: `
+            radial-gradient(ellipse 20% 5% at ${source.x * 100}% ${source.y * 100 + flareOffset}%, ${color}${Math.round(opacity * 0.8 * 255).toString(16).padStart(2, '0')}, transparent),
+            radial-gradient(ellipse 5% 20% at ${source.x * 100}% ${source.y * 100}%, ${color}${Math.round(opacity * 0.6 * 255).toString(16).padStart(2, '0')}, transparent),
+            radial-gradient(circle at ${source.x * 100}% ${source.y * 100}%, ${color}${Math.round(opacity * 0.4 * 255).toString(16).padStart(2, '0')}, transparent 20%)
+          `,
+                    mixBlendMode: config.blendMode,
+                };
+            case 'caustics':
+                const causticPhase = time * 0.5;
+                return {
+                    background: `
+            radial-gradient(ellipse at ${50 + Math.sin(causticPhase) * 20}% ${50 + Math.cos(causticPhase * 1.3) * 20}%, ${color}${Math.round(opacity * 0.3 * 255).toString(16).padStart(2, '0')}, transparent 40%),
+            radial-gradient(ellipse at ${50 + Math.cos(causticPhase * 0.7) * 25}% ${50 + Math.sin(causticPhase * 1.1) * 25}%, ${color}${Math.round(opacity * 0.25 * 255).toString(16).padStart(2, '0')}, transparent 35%)
+          `,
+                    mixBlendMode: config.blendMode,
+                };
+            case 'scanner':
+                const scanAngle = (time * 60) % 360;
+                return {
+                    background: `conic-gradient(from ${scanAngle}deg at ${source.x * 100}% ${source.y * 100}%,
+            ${color}${Math.round(opacity * 0.6 * 255).toString(16).padStart(2, '0')} 0deg,
+            transparent 30deg,
+            transparent 360deg
+          )`,
+                    mixBlendMode: config.blendMode,
+                };
+            case 'neon':
+                const flickerIntensity = 0.9 + Math.sin(time * 20) * 0.1;
+                return {
+                    background: `linear-gradient(${angle}deg, transparent 40%, ${color}${Math.round(opacity * flickerIntensity * 0.8 * 255).toString(16).padStart(2, '0')} 50%, transparent 60%)`,
+                    boxShadow: `0 0 30px ${color}${Math.round(opacity * flickerIntensity * 0.5 * 255).toString(16).padStart(2, '0')}, 0 0 60px ${color}${Math.round(opacity * flickerIntensity * 0.3 * 255).toString(16).padStart(2, '0')}`,
+                    mixBlendMode: config.blendMode,
+                };
+            case 'spotlight': {
+                const spotMid = 40 + d * 35; // 40% → 75%
+                return {
+                    background: `radial-gradient(ellipse ${width * 100}% ${width * 150}% at ${source.x * 100}% ${source.y * 100}%,
+            ${color}${Math.round(opacity * 0.7 * 255).toString(16).padStart(2, '0')},
+            ${color}${Math.round(opacity * 0.3 * 255).toString(16).padStart(2, '0')} ${spotMid}%,
+            transparent 100%
+          )`,
+                    mixBlendMode: config.blendMode,
+                };
+            }
+            case 'rim':
+                return {
+                    boxShadow: `inset 0 0 ${60 * intensity}px ${color}${Math.round(opacity * 0.6 * 255).toString(16).padStart(2, '0')}`,
+                    mixBlendMode: config.blendMode,
+                };
+            case 'laser':
+                const laserOffset = Math.sin(time * 3) * 10;
+                return {
+                    background: `linear-gradient(${angle + laserOffset}deg,
+            transparent 49%,
+            ${color}${Math.round(opacity * 255).toString(16).padStart(2, '0')} 49.5%,
+            ${color}${Math.round(opacity * 255).toString(16).padStart(2, '0')} 50.5%,
+            transparent 51%
+          )`,
+                    mixBlendMode: config.blendMode,
+                };
+            default:
+                return {};
+        }
+    }, [type, source, color, intensity, decay, angle, width, time, config]);
+    return (_jsx("div", { className: cn("pointer-events-none absolute inset-0", className), style: { ...lightStyle, ...style }, "aria-hidden": "true", children: stylePreset === 'cinematic' && (_jsx("div", { className: "absolute inset-0", style: {
+                backgroundImage: `url("${NOISE_DATA_URL}")`,
+                backgroundRepeat: 'repeat',
+                backgroundSize: '240px 240px',
+                backgroundPosition: `${time * 160}px ${time * 110}px`,
+                opacity: Math.min(0.12, 0.03 + intensity * 0.06),
+                mixBlendMode: 'overlay',
+                filter: 'blur(0.4px) contrast(1.25)',
+            }, "aria-hidden": "true" })) }));
+}

package/dist/primitives/environment/VolumetricLight/index.d.ts

@@ -0,0 +1,3 @@
+export { VolumetricLight } from './VolumetricLight';
+export type { VolumetricLightProps, LightType } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/environment/VolumetricLight/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/environment/VolumetricLight/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/primitives/environment/VolumetricLight/index.js

@@ -0,0 +1 @@
+export { VolumetricLight } from './VolumetricLight';

package/dist/primitives/environment/VolumetricLight/types.d.ts

@@ -0,0 +1,22 @@
+import type { BaseLayerProps } from '../shared/types';
+export type LightType = 'godrays' | 'shaft' | 'bloom' | 'flare' | 'caustics' | 'scanner' | 'neon' | 'spotlight' | 'rim' | 'laser';
+export interface VolumetricLightProps extends BaseLayerProps {
+    type: LightType;
+    source?: {
+        x: number;
+        y: number;
+    };
+    color?: string;
+    decay?: number;
+    angle?: number;
+    width?: number;
+    animated?: boolean;
+}
+export interface LightConfig {
+    defaultColor: string;
+    defaultIntensity: number;
+    animated: boolean;
+    blendMode: string;
+}
+export declare const LIGHT_CONFIGS: Record<LightType, LightConfig>;
+//# sourceMappingURL=types.d.ts.map

package/dist/primitives/environment/VolumetricLight/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/primitives/environment/VolumetricLight/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,KAAK,GAAG,OAAO,CAAC;AAElI,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAWxD,CAAC"}

package/dist/primitives/environment/VolumetricLight/types.js

@@ -0,0 +1,12 @@
+export const LIGHT_CONFIGS = {
+    godrays: { defaultColor: '#fffbe6', defaultIntensity: 0.6, animated: true, blendMode: 'screen' },
+    shaft: { defaultColor: '#ffffff', defaultIntensity: 0.5, animated: false, blendMode: 'screen' },
+    bloom: { defaultColor: '#ffffff', defaultIntensity: 0.4, animated: false, blendMode: 'screen' },
+    flare: { defaultColor: '#ffe4b5', defaultIntensity: 0.7, animated: true, blendMode: 'screen' },
+    caustics: { defaultColor: '#00d4ff', defaultIntensity: 0.4, animated: true, blendMode: 'overlay' },
+    scanner: { defaultColor: '#00ff00', defaultIntensity: 0.6, animated: true, blendMode: 'screen' },
+    neon: { defaultColor: '#ff00ff', defaultIntensity: 0.8, animated: true, blendMode: 'screen' },
+    spotlight: { defaultColor: '#ffffff', defaultIntensity: 0.7, animated: false, blendMode: 'screen' },
+    rim: { defaultColor: '#00f0ff', defaultIntensity: 0.5, animated: false, blendMode: 'screen' },
+    laser: { defaultColor: '#ff0000', defaultIntensity: 0.9, animated: true, blendMode: 'screen' },
+};

package/dist/primitives/environment/WeatherLayer/WeatherLayer.d.ts

@@ -0,0 +1,3 @@
+import type { WeatherLayerProps } from "./types";
+export declare function WeatherLayer({ type, intensity, stylePreset, wind, color, colors, leafColorPreset, opacity, blur, maxParticles: propMaxParticles, enabled, className, style, }: WeatherLayerProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=WeatherLayer.d.ts.map

package/dist/primitives/environment/WeatherLayer/WeatherLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WeatherLayer.d.ts","sourceRoot":"","sources":["../../../../src/primitives/environment/WeatherLayer/WeatherLayer.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAA2B,MAAM,SAAS,CAAC;AAiG1E,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,SAAe,EACf,WAAkB,EAClB,IAAqB,EACrB,KAAK,EACL,MAAM,EACN,eAAe,EACf,OAAW,EACX,IAAY,EACZ,YAAY,EAAE,gBAAgB,EAC9B,OAAc,EACd,SAAS,EACT,KAAK,GACN,EAAE,iBAAiB,kDAoJnB"}

package/dist/primitives/environment/WeatherLayer/WeatherLayer.js

@@ -0,0 +1,157 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useReducedMotion } from "framer-motion";
+import { cn } from "../../../lib/utils";
+import { getPerformanceConfig } from "../shared/performance";
+import { WEATHER_CONFIGS } from "./types";
+import { createParticle, updateParticle, getParticleCount } from "./particles";
+import { WeatherLayerCinematicCanvas } from "./cinematicCanvas";
+import { colorsKey, resolveWeatherColors } from "./colors";
+const ParticleRenderer = React.memo(function ParticleRenderer({ particle, config, colorOverride, }) {
+    const translate = `translate3d(${particle.x}px, ${particle.y}px, 0)`;
+    const rotate = `rotate(${particle.rotation}deg)`;
+    const particleColor = colorOverride ?? particle.color;
+    const baseStyle = {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        opacity: particle.opacity,
+        transform: `${translate} ${rotate}`,
+        willChange: 'transform, opacity',
+        pointerEvents: 'none',
+    };
+    switch (config.shape) {
+        case 'streak':
+            return (_jsx("div", { style: {
+                    ...baseStyle,
+                    width: 1,
+                    height: particle.size * 8,
+                    background: `linear-gradient(to bottom, transparent, ${particleColor}, transparent)`,
+                } }));
+        case 'glow':
+            return (_jsx("div", { style: {
+                    ...baseStyle,
+                    width: particle.size,
+                    height: particle.size,
+                    borderRadius: '50%',
+                    backgroundColor: particleColor,
+                    boxShadow: `0 0 ${particle.size * 2}px ${particleColor}`,
+                } }));
+        case 'leaf':
+            return (_jsx("div", { style: {
+                    ...baseStyle,
+                    width: particle.size,
+                    height: particle.size * 0.6,
+                    borderRadius: '50% 0 50% 0',
+                    backgroundColor: particleColor,
+                } }));
+        case 'petal':
+            return (_jsx("div", { style: {
+                    ...baseStyle,
+                    width: particle.size,
+                    height: particle.size * 0.7,
+                    borderRadius: '50% 50% 50% 50%',
+                    backgroundColor: particleColor,
+                    transform: `${translate} ${rotate} scale(1, 0.6)`,
+                } }));
+        default: // circle
+            return (_jsx("div", { style: {
+                    ...baseStyle,
+                    width: particle.size,
+                    height: particle.size,
+                    borderRadius: '50%',
+                    backgroundColor: particleColor,
+                } }));
+    }
+});
+export function WeatherLayer({ type, intensity = 0.5, stylePreset = 'ui', wind = { x: 0, y: 0 }, color, colors, leafColorPreset, opacity = 1, blur = false, maxParticles: propMaxParticles, enabled = true, className, style, }) {
+    const reducedMotion = useReducedMotion();
+    const containerRef = React.useRef(null);
+    const [particles, setParticles] = React.useState([]);
+    const frameRef = React.useRef(0);
+    const lastTimeRef = React.useRef(0);
+    const particleIdRef = React.useRef(0);
+    const config = WEATHER_CONFIGS[type];
+    const perfConfig = getPerformanceConfig();
+    const maxParticles = propMaxParticles ?? perfConfig.maxParticles;
+    const colorsKeyProp = colorsKey(colors);
+    const particleColors = React.useMemo(() => resolveWeatherColors({ type, colors, leafColorPreset, configColors: config.colors }), [type, leafColorPreset, colorsKeyProp]);
+    // Don't render if disabled or reduced motion
+    const shouldRender = enabled && !reducedMotion && perfConfig.tier !== 'minimal';
+    const useCinematicCanvas = shouldRender && stylePreset === 'cinematic' && perfConfig.useShaders && (type === 'snow' || type === 'leaves');
+    if (useCinematicCanvas) {
+        return (_jsx(WeatherLayerCinematicCanvas, { type: type, intensity: intensity, stylePreset: stylePreset, wind: wind, color: color, colors: colors, leafColorPreset: leafColorPreset, opacity: opacity, blur: blur, maxParticles: maxParticles, enabled: enabled, className: className, style: style }));
+    }
+    // Animation loop
+    React.useEffect(() => {
+        if (!shouldRender || !containerRef.current) {
+            setParticles([]);
+            return;
+        }
+        lastTimeRef.current = 0;
+        const container = containerRef.current;
+        const bounds = {
+            width: container.offsetWidth,
+            height: container.offsetHeight,
+        };
+        const particleCount = getParticleCount(type, intensity, maxParticles, stylePreset);
+        // Initialize particles
+        const initialParticles = [];
+        for (let i = 0; i < particleCount; i++) {
+            let p = createParticle(particleIdRef.current++, type, config, wind, bounds, stylePreset, particleColors);
+            // Spread particles initially across the viewport
+            p.y = Math.random() * bounds.height;
+            p.x = Math.random() * bounds.width;
+            p.life = Math.random() * p.maxLife * 0.7;
+            p = updateParticle(p, config, 0);
+            initialParticles.push(p);
+        }
+        setParticles(initialParticles);
+        const animate = (time) => {
+            if (!lastTimeRef.current)
+                lastTimeRef.current = time;
+            const deltaTime = Math.min(time - lastTimeRef.current, 50);
+            lastTimeRef.current = time;
+            setParticles(prev => {
+                const updated = [];
+                const currentBounds = {
+                    width: container.offsetWidth,
+                    height: container.offsetHeight,
+                };
+                for (const p of prev) {
+                    const newP = updateParticle(p, config, deltaTime);
+                    // Check if particle is still alive and in bounds
+                    if (newP.life < newP.maxLife &&
+                        newP.y > -50 &&
+                        newP.y < currentBounds.height + 50 &&
+                        newP.x > -50 &&
+                        newP.x < currentBounds.width + 50) {
+                        updated.push(newP);
+                    }
+                }
+                // Spawn new particles to maintain count
+                const targetCount = getParticleCount(type, intensity, maxParticles, stylePreset);
+                while (updated.length < targetCount) {
+                    updated.push(createParticle(particleIdRef.current++, type, config, wind, currentBounds, stylePreset, particleColors));
+                }
+                return updated;
+            });
+            frameRef.current = requestAnimationFrame(animate);
+        };
+        frameRef.current = requestAnimationFrame(animate);
+        return () => {
+            if (frameRef.current) {
+                cancelAnimationFrame(frameRef.current);
+            }
+        };
+    }, [shouldRender, type, intensity, stylePreset, wind.x, wind.y, maxParticles, config, leafColorPreset, colorsKeyProp]);
+    if (!shouldRender) {
+        return null;
+    }
+    return (_jsx("div", { ref: containerRef, className: cn("pointer-events-none absolute inset-0 overflow-hidden", className), style: {
+            opacity,
+            filter: blur ? 'blur(1px)' : undefined,
+            ...style,
+        }, "aria-hidden": "true", children: particles.map(p => (_jsx(ParticleRenderer, { particle: p, config: config, colorOverride: color }, p.id))) }));
+}

package/dist/primitives/environment/WeatherLayer/cinematicCanvas.d.ts

@@ -0,0 +1,6 @@
+import type { EnvironmentStylePreset } from "../shared/types";
+import type { WeatherLayerProps } from "./types";
+export declare function WeatherLayerCinematicCanvas({ type, intensity, stylePreset, wind, color, colors, leafColorPreset, opacity, blur, maxParticles: propMaxParticles, enabled, className, style, }: WeatherLayerProps & {
+    stylePreset?: EnvironmentStylePreset;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=cinematicCanvas.d.ts.map

package/dist/primitives/environment/WeatherLayer/cinematicCanvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cinematicCanvas.d.ts","sourceRoot":"","sources":["../../../../src/primitives/environment/WeatherLayer/cinematicCanvas.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,KAAK,EAAE,iBAAiB,EAA8B,MAAM,SAAS,CAAC;AAiqB7E,wBAAgB,2BAA2B,CAAC,EAC1C,IAAI,EACJ,SAAe,EACf,WAAyB,EACzB,IAAqB,EACrB,KAAK,EACL,MAAM,EACN,eAAe,EACf,OAAW,EACX,IAAY,EACZ,YAAY,EAAE,gBAAgB,EAC9B,OAAc,EACd,SAAS,EACT,KAAK,GACN,EAAE,iBAAiB,GAAG;IAAE,WAAW,CAAC,EAAE,sBAAsB,CAAA;CAAE,2CAmH9D"}