@nous-research/ui 0.13.2 → 0.14.0

package/dist/ui/components/overlays/greys.js

@@ -1,20 +1,25 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import * as THREE from 'three';
-import { $gpuTier, useGpuTier } from '../../../hooks/use-gpu-tier';
-import { runRenderLoop } from '../../../hooks/use-render-loop';
-import { useSmoothControls } from '../../../hooks/use-smooth-controls';
-import { cn } from '../../../utils';
-import { BLEND_MODES } from './blend-modes';
-const vert = /*glsl*/ `
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
+import { $gpuTier, useGpuTier } from "../../../hooks/use-gpu-tier.js";
+import { runRenderLoop } from "../../../hooks/use-render-loop.js";
+import { useSmoothControls } from "../../../hooks/use-smooth-controls.js";
+import { cn } from "../../../utils/index.js";
+import { BLEND_MODES } from "./blend-modes.js";
+const vert = (
+  /*glsl*/
+  `
   varying vec2 vUv;
   void main() {
     vUv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   }
-`;
-const sourceFrag = /*glsl*/ `
+`
+);
+const sourceFrag = (
+  /*glsl*/
+  `
   uniform sampler2D uTex0, uTex1, uTex2, uTex3;
   uniform float uTime, uZoom, uSpeed, uRotate, uFolds, uDrift;
   varying vec2 vUv;
@@ -51,8 +56,11 @@ const sourceFrag = /*glsl*/ `
 
     gl_FragColor = vec4(mix(base, flip, .3 + sin(uTime * .2) * .2), 1.);
   }
-`;
-const moshFrag = /*glsl*/ `
+`
+);
+const moshFrag = (
+  /*glsl*/
+  `
   uniform sampler2D uCurrent, uPrev, uTex0, uTex1, uTex2, uTex3;
   uniform float uTime, uIntensity, uMotion, uZoom, uSpeed;
   uniform vec2 uRes;
@@ -121,8 +129,11 @@ const moshFrag = /*glsl*/ `
     float d = mix(mix(.97, .99, noise(uv * 8. + t * .2)), 0., step(.994, hash(vec2(tS, 0.))));
     gl_FragColor = vec4(mix(texture2D(uCurrent, uv).rgb, prev, d), 1.);
   }
-`;
-const outputFrag = /*glsl*/ `
+`
+);
+const outputFrag = (
+  /*glsl*/
+  `
   uniform sampler2D uInput;
   uniform float uTime, uAlpha, uHue;
   uniform vec3 uColor;
@@ -147,171 +158,181 @@ const outputFrag = /*glsl*/ `
     float lum = dot(m, vec3(.299, .587, .114));
     gl_FragColor = vec4(hueShift(mix(vec3(lum), uColor * lum * 2., length(uColor)), uHue) * uAlpha, smoothstep(.08, .18, lum * uAlpha));
   }
-`;
+`
+);
 const TEXTURES = [
-    '/anatomy/grays-0.jpg',
-    '/anatomy/grays-3.jpg',
-    '/anatomy/grays-6.jpg',
-    '/anatomy/grays-9.jpg'
+  "/anatomy/grays-0.jpg",
+  "/anatomy/grays-3.jpg",
+  "/anatomy/grays-6.jpg",
+  "/anatomy/grays-9.jpg"
 ];
 export function Greys({ className, style }) {
-    const gpuTier = useGpuTier();
-    const [blendOverride, setBlendOverride] = useState(null);
-    const canvasRef = useRef(null);
-    const c = useSmoothControls('Effects/Greys', {
-        alpha: { max: 1, min: 0, step: 0.01, value: 0.19 },
-        blend: { options: BLEND_MODES, value: 'color-burn' },
-        color: { value: '#ffac02' },
-        drift: { max: 2, min: 0, step: 0.1, value: 0.5 },
-        enabled: { value: false },
-        folds: { max: 12, min: 1, step: 1, value: 1 },
-        hue: { max: 1, min: 0, step: 0.01, value: 0.37 },
-        intensity: { max: 3, min: 0, step: 0.1, value: 0.1 },
-        motion: { max: 2, min: 0, step: 0.1, value: 0.1 },
-        rotate: { max: 2, min: -2, step: 0.1, value: 0.3 },
-        speed: { max: 1, min: 0.01, step: 0.01, value: 0.21 },
-        zoom: { max: 4, min: 0.5, step: 0.1, value: 0.7 }
-    }, { collapsed: true });
-    const cRef = useRef(c);
-    cRef.current = c;
-    useEffect(() => {
-        const onKey = (e) => e.key.toLowerCase() === 'x' &&
-            setBlendOverride(p => (p === 'screen' ? null : 'screen'));
-        window.addEventListener('keydown', onKey);
-        return () => window.removeEventListener('keydown', onKey);
-    }, []);
-    const enabled = c.enabled && gpuTier === 2;
-    useEffect(() => {
-        if (!canvasRef.current || !enabled) {
-            return;
-        }
-        let renderer;
-        try {
-            renderer = new THREE.WebGLRenderer({
-                alpha: true,
-                canvas: canvasRef.current
-            });
-        }
-        catch {
-            // See note in noise.tsx — eager gpu-tier detection should keep us
-            // out of here, but if the driver fails the renderer constructor
-            // anyway, downgrade so other overlays stop trying too.
-            $gpuTier.set(0);
-            return;
-        }
-        const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
-        const geo = new THREE.PlaneGeometry(2, 2);
-        const [rtSource, rtA, rtB] = [0, 1, 2].map(() => new THREE.WebGLRenderTarget(innerWidth, innerHeight, {
-            magFilter: THREE.NearestFilter,
-            minFilter: THREE.NearestFilter
-        }));
-        const textures = TEXTURES.map(p => {
-            const t = new THREE.TextureLoader().load(p);
-            t.wrapS = t.wrapT = THREE.ClampToEdgeWrapping;
-            t.minFilter = t.magFilter = THREE.LinearFilter;
-            return t;
-        });
-        const texU = Object.fromEntries(textures.map((t, i) => [`uTex${i}`, { value: t }]));
-        const srcU = {
-            ...texU,
-            uDrift: { value: 0 },
-            uFolds: { value: 0 },
-            uRotate: { value: 0 },
-            uSpeed: { value: 0 },
-            uTime: { value: 0 },
-            uZoom: { value: 0 }
-        };
-        const moshU = {
-            ...texU,
-            uCurrent: { value: rtSource.texture },
-            uIntensity: { value: 0 },
-            uMotion: { value: 0 },
-            uPrev: { value: rtA.texture },
-            uRes: { value: new THREE.Vector2(innerWidth, innerHeight) },
-            uSpeed: { value: 0 },
-            uTime: { value: 0 },
-            uZoom: { value: 0 }
-        };
-        const outU = {
-            uAlpha: { value: 0 },
-            uColor: { value: new THREE.Color() },
-            uHue: { value: 0 },
-            uInput: { value: rtB.texture },
-            uTime: { value: 0 }
-        };
-        const mkScene = (frag, uniforms, transparent = false) => {
-            const s = new THREE.Scene();
-            s.add(new THREE.Mesh(geo.clone(), new THREE.ShaderMaterial({
-                fragmentShader: frag,
-                transparent,
-                uniforms: uniforms,
-                vertexShader: vert
-            })));
-            return s;
-        };
-        const srcScene = mkScene(sourceFrag, srcU);
-        const moshScene = mkScene(moshFrag, moshU);
-        const outScene = mkScene(outputFrag, outU, true);
-        const resize = () => {
-            renderer.setSize(innerWidth, innerHeight);
-            // Cap at 1.5x — Greys does triple-buffered ping-pong rendering at
-            // every frame, so retina x2 is brutal on fillrate.
-            renderer.setPixelRatio(Math.min(devicePixelRatio, 1.5));
-            [rtSource, rtA, rtB].forEach(rt => rt.setSize(innerWidth, innerHeight));
-            moshU.uRes.value.set(innerWidth, innerHeight);
-        };
-        resize();
-        window.addEventListener('resize', resize);
-        let ping = true, time = 0;
-        // 30fps cap — feedback effect, no perceptual loss vs 60fps but
-        // halves the cost of the heaviest overlay we ship.
-        const dispose = runRenderLoop({
-            el: canvasRef.current,
-            minIntervalMs: 33,
-            onFrame: deltaSeconds => {
-                time += deltaSeconds;
-                const v = cRef.current;
-                srcU.uTime.value = time;
-                srcU.uSpeed.value = v.speed;
-                srcU.uZoom.value = v.zoom;
-                srcU.uRotate.value = v.rotate;
-                srcU.uFolds.value = v.folds;
-                srcU.uDrift.value = v.drift;
-                moshU.uTime.value = time;
-                moshU.uIntensity.value = v.intensity;
-                moshU.uMotion.value = v.motion;
-                moshU.uSpeed.value = v.speed;
-                moshU.uZoom.value = v.zoom;
-                outU.uTime.value = time;
-                outU.uAlpha.value = v.alpha;
-                outU.uHue.value = v.hue;
-                outU.uColor.value.set(typeof v.color === 'string' ? v.color : '#fff');
-                renderer.setRenderTarget(rtSource);
-                renderer.render(srcScene, camera);
-                const [read, write] = ping ? [rtA, rtB] : [rtB, rtA];
-                moshU.uPrev.value = read.texture;
-                renderer.setRenderTarget(write);
-                renderer.render(moshScene, camera);
-                outU.uInput.value = write.texture;
-                renderer.setRenderTarget(null);
-                renderer.render(outScene, camera);
-                ping = !ping;
-            }
-        });
-        return () => {
-            window.removeEventListener('resize', resize);
-            dispose();
-            textures.forEach(t => t.dispose());
-            [geo, rtSource, rtA, rtB, renderer].forEach(x => x.dispose());
-        };
-    }, [enabled]);
-    if (!enabled) {
-        return null;
+  const gpuTier = useGpuTier();
+  const [blendOverride, setBlendOverride] = useState(null);
+  const canvasRef = useRef(null);
+  const c = useSmoothControls(
+    "Effects/Greys",
+    {
+      alpha: { max: 1, min: 0, step: 0.01, value: 0.19 },
+      blend: { options: BLEND_MODES, value: "color-burn" },
+      color: { value: "#ffac02" },
+      drift: { max: 2, min: 0, step: 0.1, value: 0.5 },
+      enabled: { value: false },
+      folds: { max: 12, min: 1, step: 1, value: 1 },
+      hue: { max: 1, min: 0, step: 0.01, value: 0.37 },
+      intensity: { max: 3, min: 0, step: 0.1, value: 0.1 },
+      motion: { max: 2, min: 0, step: 0.1, value: 0.1 },
+      rotate: { max: 2, min: -2, step: 0.1, value: 0.3 },
+      speed: { max: 1, min: 0.01, step: 0.01, value: 0.21 },
+      zoom: { max: 4, min: 0.5, step: 0.1, value: 0.7 }
+    },
+    { collapsed: true }
+  );
+  const cRef = useRef(c);
+  cRef.current = c;
+  useEffect(() => {
+    const onKey = (e) => e.key.toLowerCase() === "x" && setBlendOverride((p) => p === "screen" ? null : "screen");
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+  const enabled = c.enabled && gpuTier === 2;
+  useEffect(() => {
+    if (!canvasRef.current || !enabled) {
+      return;
     }
-    return (_jsx("canvas", { className: cn('h-full w-full', className), ref: canvasRef, style: {
-            mixBlendMode: (blendOverride ??
-                c.blend),
-            ...style
-        } }));
+    let renderer;
+    try {
+      renderer = new THREE.WebGLRenderer({
+        alpha: true,
+        canvas: canvasRef.current
+      });
+    } catch {
+      $gpuTier.set(0);
+      return;
+    }
+    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    const geo = new THREE.PlaneGeometry(2, 2);
+    const [rtSource, rtA, rtB] = [0, 1, 2].map(
+      () => new THREE.WebGLRenderTarget(innerWidth, innerHeight, {
+        magFilter: THREE.NearestFilter,
+        minFilter: THREE.NearestFilter
+      })
+    );
+    const textures = TEXTURES.map((p) => {
+      const t = new THREE.TextureLoader().load(p);
+      t.wrapS = t.wrapT = THREE.ClampToEdgeWrapping;
+      t.minFilter = t.magFilter = THREE.LinearFilter;
+      return t;
+    });
+    const texU = Object.fromEntries(
+      textures.map((t, i) => [`uTex${i}`, { value: t }])
+    );
+    const srcU = {
+      ...texU,
+      uDrift: { value: 0 },
+      uFolds: { value: 0 },
+      uRotate: { value: 0 },
+      uSpeed: { value: 0 },
+      uTime: { value: 0 },
+      uZoom: { value: 0 }
+    };
+    const moshU = {
+      ...texU,
+      uCurrent: { value: rtSource.texture },
+      uIntensity: { value: 0 },
+      uMotion: { value: 0 },
+      uPrev: { value: rtA.texture },
+      uRes: { value: new THREE.Vector2(innerWidth, innerHeight) },
+      uSpeed: { value: 0 },
+      uTime: { value: 0 },
+      uZoom: { value: 0 }
+    };
+    const outU = {
+      uAlpha: { value: 0 },
+      uColor: { value: new THREE.Color() },
+      uHue: { value: 0 },
+      uInput: { value: rtB.texture },
+      uTime: { value: 0 }
+    };
+    const mkScene = (frag, uniforms, transparent = false) => {
+      const s = new THREE.Scene();
+      s.add(
+        new THREE.Mesh(
+          geo.clone(),
+          new THREE.ShaderMaterial({
+            fragmentShader: frag,
+            transparent,
+            uniforms,
+            vertexShader: vert
+          })
+        )
+      );
+      return s;
+    };
+    const srcScene = mkScene(sourceFrag, srcU);
+    const moshScene = mkScene(moshFrag, moshU);
+    const outScene = mkScene(outputFrag, outU, true);
+    const resize = () => {
+      renderer.setSize(innerWidth, innerHeight);
+      renderer.setPixelRatio(Math.min(devicePixelRatio, 1.5));
+      [rtSource, rtA, rtB].forEach((rt) => rt.setSize(innerWidth, innerHeight));
+      moshU.uRes.value.set(innerWidth, innerHeight);
+    };
+    resize();
+    window.addEventListener("resize", resize);
+    let ping = true, time = 0;
+    const dispose = runRenderLoop({
+      el: canvasRef.current,
+      minIntervalMs: 33,
+      onFrame: (deltaSeconds) => {
+        time += deltaSeconds;
+        const v = cRef.current;
+        srcU.uTime.value = time;
+        srcU.uSpeed.value = v.speed;
+        srcU.uZoom.value = v.zoom;
+        srcU.uRotate.value = v.rotate;
+        srcU.uFolds.value = v.folds;
+        srcU.uDrift.value = v.drift;
+        moshU.uTime.value = time;
+        moshU.uIntensity.value = v.intensity;
+        moshU.uMotion.value = v.motion;
+        moshU.uSpeed.value = v.speed;
+        moshU.uZoom.value = v.zoom;
+        outU.uTime.value = time;
+        outU.uAlpha.value = v.alpha;
+        outU.uHue.value = v.hue;
+        outU.uColor.value.set(typeof v.color === "string" ? v.color : "#fff");
+        renderer.setRenderTarget(rtSource);
+        renderer.render(srcScene, camera);
+        const [read, write] = ping ? [rtA, rtB] : [rtB, rtA];
+        moshU.uPrev.value = read.texture;
+        renderer.setRenderTarget(write);
+        renderer.render(moshScene, camera);
+        outU.uInput.value = write.texture;
+        renderer.setRenderTarget(null);
+        renderer.render(outScene, camera);
+        ping = !ping;
+      }
+    });
+    return () => {
+      window.removeEventListener("resize", resize);
+      dispose();
+      textures.forEach((t) => t.dispose());
+      [geo, rtSource, rtA, rtB, renderer].forEach((x) => x.dispose());
+    };
+  }, [enabled]);
+  if (!enabled) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      className: cn("h-full w-full", className),
+      ref: canvasRef,
+      style: {
+        mixBlendMode: blendOverride ?? c.blend,
+        ...style
+      }
+    }
+  );
 }
-//# sourceMappingURL=greys.js.map

package/dist/ui/components/overlays/index.d.ts

@@ -7,9 +7,8 @@ export { Noise } from './noise';
 export { Vignette } from './vignette';
 export { $lightMode, applyLens, lens0, lens5i, LENS_0, LENS_5I, LENSES, toggleLens } from './lens';
 export type { LensPreset } from './lens';
-export declare function Overlays({ dark, initial }: OverlaysProps): import("react/jsx-runtime").JSX.Element;
+export declare function Overlays({ dark, initial }: OverlaysProps): import("react").JSX.Element;
 interface OverlaysProps {
     dark?: boolean;
     initial?: LensPreset;
 }
-//# sourceMappingURL=index.d.ts.map

package/dist/ui/components/overlays/index.js

@@ -1,19 +1,33 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Glitch } from './glitch';
-import { Greys } from './greys';
-import { Lens } from './lens-layers';
-import { Noise } from './noise';
-import { Vignette } from './vignette';
-export { BLEND_MODES } from './blend-modes';
-export { Glitch } from './glitch';
-export { Greys } from './greys';
-export { Lens } from './lens-layers';
-export { Noise } from './noise';
-export { Vignette } from './vignette';
-export { $lightMode, applyLens, lens0, lens5i, LENS_0, LENS_5I, LENSES, toggleLens } from './lens';
-const LAYER = 'pointer-events-none fixed inset-0';
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Glitch } from "./glitch.js";
+import { Greys } from "./greys.js";
+import { Lens } from "./lens-layers.js";
+import { Noise } from "./noise.js";
+import { Vignette } from "./vignette.js";
+export { BLEND_MODES } from "./blend-modes.js";
+export { Glitch } from "./glitch.js";
+export { Greys } from "./greys.js";
+export { Lens } from "./lens-layers.js";
+export { Noise } from "./noise.js";
+export { Vignette } from "./vignette.js";
+export {
+  $lightMode,
+  applyLens,
+  lens0,
+  lens5i,
+  LENS_0,
+  LENS_5I,
+  LENSES,
+  toggleLens
+} from "./lens";
+const LAYER = "pointer-events-none fixed inset-0";
 export function Overlays({ dark, initial }) {
-    return (_jsxs(_Fragment, { children: [_jsx(Lens, { dark: dark, initial: initial }), _jsx(Noise, { className: LAYER, style: { zIndex: 101 } }), _jsx(Vignette, { className: LAYER, style: { zIndex: 99 } }), _jsx(Greys, { className: LAYER, style: { zIndex: 200 } }), _jsx(Glitch, { className: LAYER, style: { zIndex: 201 } })] }));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Lens, { dark, initial }),
+    /* @__PURE__ */ jsx(Noise, { className: LAYER, style: { zIndex: 101 } }),
+    /* @__PURE__ */ jsx(Vignette, { className: LAYER, style: { zIndex: 99 } }),
+    /* @__PURE__ */ jsx(Greys, { className: LAYER, style: { zIndex: 200 } }),
+    /* @__PURE__ */ jsx(Glitch, { className: LAYER, style: { zIndex: 201 } })
+  ] });
 }
-//# sourceMappingURL=index.js.map

package/dist/ui/components/overlays/lens-layers.d.ts

@@ -1,5 +1,5 @@
 import { type LensPreset } from './lens';
-export declare function Lens({ dark, initial }: LensProps): import("react/jsx-runtime").JSX.Element;
+export declare function Lens({ dark, initial }: LensProps): import("react").JSX.Element;
 interface LensProps {
     dark?: boolean;
     /**
@@ -12,4 +12,3 @@ interface LensProps {
     initial?: LensPreset;
 }
 export {};
-//# sourceMappingURL=lens-layers.d.ts.map

package/dist/ui/components/overlays/lens-layers.js

@@ -1,68 +1,92 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import { useSmoothControls } from '../../../hooks/use-smooth-controls';
-import { colorMix } from '../../../utils/color';
-import fillerBg from '../../../assets/filler-bg0.jpg';
-import { BLEND_MODES } from './blend-modes';
-import { $lightMode, LENS_0, LENS_5I, toggleLens } from './lens';
-const LAYER = 'pointer-events-none fixed inset-0';
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useSmoothControls } from "../../../hooks/use-smooth-controls.js";
+import { colorMix } from "../../../utils/color.js";
+import fillerBg from "../../../assets/filler-bg0.webp";
+import { BLEND_MODES } from "./blend-modes.js";
+import { $lightMode, LENS_0, LENS_5I, toggleLens } from "./lens.js";
+const LAYER = "pointer-events-none fixed inset-0";
 export function Lens({ dark, initial }) {
-    // `initial` lets the host (e.g. Storybook) seed the Leva/atom state with
-    // the *exact* lens preset the user selected, avoiding a one-cycle lag
-    // where useSmoothControls emits old colors for the first paint (and, on
-    // Storybook's fast iframe reload, sometimes never catches up because
-    // useControls' ready-gate swallows the instant color writes).
-    const base = initial?.Lens ?? (dark ? LENS_0.Lens : LENS_5I.Lens);
-    const lens = useSmoothControls('Lens', {
-        bgBlend: { options: BLEND_MODES, value: base.bgBlend },
-        bgColor: { value: base.bgColor },
-        bgOpacity: { max: 1, min: 0, step: 0.01, value: base.bgOpacity },
-        fgBlend: { options: BLEND_MODES, value: 'difference' },
-        fgColor: { value: base.fgColor },
-        fgOpacity: { max: 1, min: 0, step: 0.01, value: base.fgOpacity },
-        fillerBlend: { options: BLEND_MODES, value: 'difference' },
-        fillerOpacity: { max: 1, min: 0, step: 0.01, value: base.fillerOpacity },
-        mgColor: { value: base.mgColor },
-        mgOpacity: { max: 1, min: 0, step: 0.01, value: base.mgOpacity }
-    }, { collapsed: false });
-    useEffect(() => {
-        $lightMode.set(!dark);
-    }, [dark]);
-    useEffect(() => {
-        const s = document.documentElement.style;
-        for (const [name, color, alpha] of [
-            ['foreground', lens.fgColor, lens.fgOpacity],
-            ['midground', lens.mgColor, lens.mgOpacity],
-            ['background', lens.bgColor, lens.bgOpacity]
-        ]) {
-            s.setProperty(`--${name}`, colorMix(color, alpha));
-            s.setProperty(`--${name}-base`, color);
-            s.setProperty(`--${name}-alpha`, `${alpha}`);
+  const base = initial?.Lens ?? (dark ? LENS_0.Lens : LENS_5I.Lens);
+  const lens = useSmoothControls(
+    "Lens",
+    {
+      bgBlend: { options: BLEND_MODES, value: base.bgBlend },
+      bgColor: { value: base.bgColor },
+      bgOpacity: { max: 1, min: 0, step: 0.01, value: base.bgOpacity },
+      fgBlend: { options: BLEND_MODES, value: "difference" },
+      fgColor: { value: base.fgColor },
+      fgOpacity: { max: 1, min: 0, step: 0.01, value: base.fgOpacity },
+      fillerBlend: { options: BLEND_MODES, value: "difference" },
+      fillerOpacity: { max: 1, min: 0, step: 0.01, value: base.fillerOpacity },
+      mgColor: { value: base.mgColor },
+      mgOpacity: { max: 1, min: 0, step: 0.01, value: base.mgOpacity }
+    },
+    { collapsed: false }
+  );
+  useEffect(() => {
+    $lightMode.set(!dark);
+  }, [dark]);
+  useEffect(() => {
+    const s = document.documentElement.style;
+    for (const [name, color, alpha] of [
+      ["foreground", lens.fgColor, lens.fgOpacity],
+      ["midground", lens.mgColor, lens.mgOpacity],
+      ["background", lens.bgColor, lens.bgOpacity]
+    ]) {
+      s.setProperty(`--${name}`, colorMix(color, alpha));
+      s.setProperty(`--${name}-base`, color);
+      s.setProperty(`--${name}-alpha`, `${alpha}`);
+    }
+  }, [lens]);
+  useEffect(() => {
+    const handle = (e) => e.key === "x" && toggleLens();
+    window.addEventListener("keydown", handle);
+    return () => window.removeEventListener("keydown", handle);
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: LAYER,
+        style: {
+          backgroundColor: colorMix(lens.fgColor, lens.fgOpacity),
+          mixBlendMode: lens.fgBlend,
+          zIndex: 100
         }
-    }, [lens]);
-    useEffect(() => {
-        const handle = (e) => e.key === 'x' && toggleLens();
-        window.addEventListener('keydown', handle);
-        return () => window.removeEventListener('keydown', handle);
-    }, []);
-    // NOTE: z-index is inlined because Tailwind's JIT sometimes doesn't emit
-    // these non-default utilities (e.g. in Storybook's isolated content
-    // scan), which silently collapses the overlay stack to DOM order and
-    // breaks the mix-blend-mode inversion — producing a muddy warm wash
-    // instead of the intended clean black/white inversion.
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: LAYER, style: {
-                    backgroundColor: colorMix(lens.fgColor, lens.fgOpacity),
-                    mixBlendMode: lens.fgBlend,
-                    zIndex: 100
-                } }), _jsx("div", { className: LAYER, style: {
-                    mixBlendMode: lens.fillerBlend,
-                    opacity: lens.fillerOpacity,
-                    zIndex: 2
-                }, children: _jsx("img", { alt: "", className: "h-[150dvh] w-auto min-w-dvw object-cover object-top-left invert", fetchPriority: "low", src: fillerBg.src }) }), _jsx("div", { className: LAYER, style: {
-                    backgroundColor: colorMix(lens.bgColor, lens.bgOpacity),
-                    mixBlendMode: lens.bgBlend,
-                    zIndex: 1
-                } })] }));
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: LAYER,
+        style: {
+          mixBlendMode: lens.fillerBlend,
+          opacity: lens.fillerOpacity,
+          zIndex: 2
+        },
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt: "",
+            className: "h-[150dvh] w-auto min-w-dvw object-cover object-top-left invert",
+            fetchPriority: "low",
+            src: fillerBg.src
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: LAYER,
+        style: {
+          backgroundColor: colorMix(lens.bgColor, lens.bgOpacity),
+          mixBlendMode: lens.bgBlend,
+          zIndex: 1
+        }
+      }
+    )
+  ] });
 }
-//# sourceMappingURL=lens-layers.js.map

package/dist/ui/components/overlays/lens.d.ts

@@ -42,4 +42,3 @@ export interface LensPreset {
     Globe: typeof LENS_0.Globe;
     Lens: typeof LENS_0.Lens;
 }
-//# sourceMappingURL=lens.d.ts.map