@nous-research/ui 0.10.0 → 0.12.0

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

@@ -1 +1 @@
-{"version":3,"file":"greys.js","sourceRoot":"","sources":["../../../../src/ui/components/overlays/greys.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport * as THREE from 'three'\n\nimport { useGpuTier } from '../../../hooks/use-gpu-tier'\nimport { useSmoothControls } from '../../../hooks/use-smooth-controls'\nimport { cn } from '../../../utils'\n\nimport { BLEND_MODES } from '.'\n\nconst vert = /*glsl*/ `\n  varying vec2 vUv;\n  void main() {\n    vUv = uv;\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n  }\n`\n\nconst sourceFrag = /*glsl*/ `\n  uniform sampler2D uTex0, uTex1, uTex2, uTex3;\n  uniform float uTime, uZoom, uSpeed, uRotate, uFolds, uDrift;\n  varying vec2 vUv;\n\n  vec3 gray(vec3 c) { return vec3(dot(c, vec3(.299, .587, .114))); }\n  vec2 rot(vec2 p, float a) { return vec2(p.x * cos(a) - p.y * sin(a), p.x * sin(a) + p.y * cos(a)); }\n\n  vec2 kaleid(vec2 p, float n) {\n    float a = mod(atan(p.y, p.x), 6.28318 / n) - 3.14159 / n;\n    return length(p) * vec2(cos(a), sin(a));\n  }\n\n  vec4 tex(int i, vec2 uv) {\n    if (i == 0) return texture2D(uTex0, uv);\n    if (i == 1) return texture2D(uTex1, uv);\n    if (i == 2) return texture2D(uTex2, uv);\n    return texture2D(uTex3, uv);\n  }\n\n  void main() {\n    vec2 uv = rot(vUv - .5, uTime * uRotate * .05);\n    if (uFolds > 1.) uv = kaleid(uv, uFolds);\n\n    float dt = uTime * uDrift * .1;\n    uv = uv / uZoom + .5 + vec2(sin(dt * .7) * cos(dt * .3), cos(dt * .5) * sin(dt * .9)) * .15 * uDrift;\n\n    float cycle = mod(uTime * uSpeed * .01, 4.);\n    int i0 = int(floor(cycle)), i1 = int(mod(float(i0) + 1., 4.));\n    float t = smoothstep(0., 1., fract(cycle));\n\n    vec3 base = mix(gray(vec3(1.) - tex(i0, uv).rgb), gray(vec3(1.) - tex(i1, uv).rgb), t);\n    vec2 uvF = vec2(1. - uv.x, uv.y);\n    vec3 flip = mix(gray(vec3(1.) - tex(i0, uvF).rgb), gray(vec3(1.) - tex(i1, uvF).rgb), t);\n\n    gl_FragColor = vec4(mix(base, flip, .3 + sin(uTime * .2) * .2), 1.);\n  }\n`\n\nconst moshFrag = /*glsl*/ `\n  uniform sampler2D uCurrent, uPrev, uTex0, uTex1, uTex2, uTex3;\n  uniform float uTime, uIntensity, uMotion, uZoom, uSpeed;\n  uniform vec2 uRes;\n  varying vec2 vUv;\n\n  float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }\n  vec2 hash2(vec2 p) { return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453); }\n\n  float noise(vec2 p) {\n    vec2 i = floor(p), f = fract(p) * fract(p) * (3. - 2. * fract(p));\n    return mix(mix(hash(i), hash(i + vec2(1., 0.)), f.x), mix(hash(i + vec2(0., 1.)), hash(i + vec2(1., 1.)), f.x), f.y);\n  }\n\n  vec3 gray(vec3 c) { return vec3(dot(c, vec3(.299, .587, .114))); }\n\n  vec2 distort(vec2 uv, float k, float t) {\n    float n1 = noise(uv * 8. + t * .5), n2 = noise(uv * 12. + t * .7), flow = noise(uv * 4. + t * .3);\n    return uv + vec2(cos(n1 * 6.28 + t * 1.2), sin(n2 * 6.28 + t * .9)) * .02 * k\n             + vec2(cos(flow * 6.28 + uv.y * 10.), sin(flow * 6.28 + uv.x * 10.)) * .015 * k;\n  }\n\n  vec3 tex(int i, vec2 uv) {\n    vec2 zuv = (uv - .5) / uZoom + .5;\n    if (i == 0) return gray(vec3(1.) - texture2D(uTex0, zuv).rgb);\n    if (i == 1) return gray(vec3(1.) - texture2D(uTex1, zuv).rgb);\n    if (i == 2) return gray(vec3(1.) - texture2D(uTex2, zuv).rgb);\n    return gray(vec3(1.) - texture2D(uTex3, zuv).rgb);\n  }\n\n  void main() {\n    vec2 uv = vUv;\n    float t = uTime * uSpeed, tS = floor(t * .1), pS = 80.;\n    float amt = uIntensity * uMotion * .8 * (.7 + (sin(t * .5) * .5 + .5) * .3);\n\n    vec2 mUV = distort(uv, uIntensity * .4, t);\n\n    float hS = floor(uv.y * pS), hA = smoothstep(0., .8, hash(vec2(hS, tS)));\n    float hO = (hash(vec2(hS, tS + 50.)) - .5) * .25 * hA * amt;\n    float vS = floor(uv.x * pS), vA = smoothstep(0., .8, hash(vec2(vS, tS + 100.)));\n    float vO = (hash(vec2(vS, tS + 150.)) - .5) * .25 * vA * amt;\n    mUV += vec2(hO, vO);\n\n    float bS = pS * .25;\n    float hBA = step(.5, hash(vec2(floor(uv.y * bS), tS + 200.)));\n    float hBO = (hash(vec2(floor(uv.y * bS), 200.)) - .5) * .35 * hBA * amt;\n    float vBA = step(.5, hash(vec2(floor(uv.x * bS), tS + 300.)));\n    float vBO = (hash(vec2(floor(uv.x * bS), 250.)) - .5) * .35 * vBA * amt;\n    mUV += vec2(hBO, vBO);\n\n    vec2 blk = floor(uv * pS * .15);\n    mUV += (hash2(vec2(blk.x, blk.y + 500.)) - .5) * .4 * step(.7, hash(vec2(blk.x, blk.y + tS))) * amt;\n    mUV = clamp(mUV, 0., 1.);\n\n    vec3 prev = texture2D(uPrev, mUV).rgb;\n    prev = mix(prev, texture2D(uPrev, clamp(uv + vec2(hBO, vBO), 0., 1.)).rgb, max(hBA, vBA) * .9);\n\n    float tY = floor(uv.y * pS * .4);\n    if (hash(vec2(tY, tS + 400.)) > .75) {\n      prev = mix(prev, texture2D(uPrev, clamp(vec2(uv.x + (hash(vec2(tY, 400.)) - .5) * .5 * amt, uv.y), 0., 1.)).rgb, .85);\n    }\n\n    if (hA > 0. && amt > .01) {\n      prev = mix(prev, gray(texture2D(uPrev, clamp(vec2(uv.x + (gray(prev).r - uv.x) * amt + hO, uv.y), 0., 1.)).rgb), hA);\n    }\n\n    float d = mix(mix(.97, .99, noise(uv * 8. + t * .2)), 0., step(.994, hash(vec2(tS, 0.))));\n    gl_FragColor = vec4(mix(texture2D(uCurrent, uv).rgb, prev, d), 1.);\n  }\n`\n\nconst outputFrag = /*glsl*/ `\n  uniform sampler2D uInput;\n  uniform float uTime, uAlpha, uHue;\n  uniform vec3 uColor;\n  varying vec2 vUv;\n\n  float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }\n\n  vec3 hueShift(vec3 c, float h) {\n    float a = h * 6.28318, s = sin(a), co = cos(a);\n    vec3 w = vec3(.299, .587, .114);\n    return clamp(vec3(\n      dot(c, w) + dot(c, vec3(.701, -.587, -.114) * co + vec3(.168, .330, -.497) * s),\n      dot(c, w) + dot(c, vec3(-.299, .413, -.114) * co + vec3(.328, .035, -.363) * s),\n      dot(c, w) + dot(c, vec3(-.299, -.587, .886) * co + vec3(-.497, .330, .168) * s)\n    ), 0., 1.);\n  }\n\n  void main() {\n    vec3 m = texture2D(uInput, vUv).rgb;\n    m *= 1. - step(.5, fract(vUv.y * 200.)) * .06 * step(.97, hash(vec2(floor(vUv.y * 30.), floor(uTime * .5))));\n\n    float lum = dot(m, vec3(.299, .587, .114));\n    gl_FragColor = vec4(hueShift(mix(vec3(lum), uColor * lum * 2., length(uColor)), uHue) * uAlpha, smoothstep(.08, .18, lum * uAlpha));\n  }\n`\n\nconst TEXTURES = [\n  '/anatomy/grays-0.jpg',\n  '/anatomy/grays-3.jpg',\n  '/anatomy/grays-6.jpg',\n  '/anatomy/grays-9.jpg'\n]\n\nexport function Greys({ className, style }: GreysProps) {\n  const gpuTier = useGpuTier()\n  const [blendOverride, setBlendOverride] = useState<string | null>(null)\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n\n  const c = useSmoothControls(\n    'Effects/Greys',\n    {\n      alpha: { max: 1, min: 0, step: 0.01, value: 0.19 },\n      blend: { options: BLEND_MODES, value: 'color-burn' },\n      color: { value: '#ffac02' },\n      drift: { max: 2, min: 0, step: 0.1, value: 0.5 },\n      enabled: { value: false },\n      folds: { max: 12, min: 1, step: 1, value: 1 },\n      hue: { max: 1, min: 0, step: 0.01, value: 0.37 },\n      intensity: { max: 3, min: 0, step: 0.1, value: 0.1 },\n      motion: { max: 2, min: 0, step: 0.1, value: 0.1 },\n      rotate: { max: 2, min: -2, step: 0.1, value: 0.3 },\n      speed: { max: 1, min: 0.01, step: 0.01, value: 0.21 },\n      zoom: { max: 4, min: 0.5, step: 0.1, value: 0.7 }\n    },\n    { collapsed: true }\n  )\n\n  const cRef = useRef(c)\n  cRef.current = c\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) =>\n      e.key.toLowerCase() === 'x' &&\n      setBlendOverride(p => (p === 'screen' ? null : 'screen'))\n\n    window.addEventListener('keydown', onKey)\n\n    return () => window.removeEventListener('keydown', onKey)\n  }, [])\n\n  const enabled = c.enabled && gpuTier === 2\n\n  useEffect(() => {\n    if (!canvasRef.current || !enabled) {\n      return\n    }\n\n    const renderer = new THREE.WebGLRenderer({\n      alpha: true,\n      canvas: canvasRef.current\n    })\n\n    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1)\n    const geo = new THREE.PlaneGeometry(2, 2)\n\n    const [rtSource, rtA, rtB] = [0, 1, 2].map(\n      () =>\n        new THREE.WebGLRenderTarget(innerWidth, innerHeight, {\n          magFilter: THREE.NearestFilter,\n          minFilter: THREE.NearestFilter\n        })\n    )\n\n    const textures = TEXTURES.map(p => {\n      const t = new THREE.TextureLoader().load(p)\n      t.wrapS = t.wrapT = THREE.ClampToEdgeWrapping\n      t.minFilter = t.magFilter = THREE.LinearFilter\n\n      return t\n    })\n\n    const texU = Object.fromEntries(\n      textures.map((t, i) => [`uTex${i}`, { value: t }])\n    )\n\n    const srcU = {\n      ...texU,\n      uDrift: { value: 0 },\n      uFolds: { value: 0 },\n      uRotate: { value: 0 },\n      uSpeed: { value: 0 },\n      uTime: { value: 0 },\n      uZoom: { value: 0 }\n    }\n\n    const moshU = {\n      ...texU,\n      uCurrent: { value: rtSource.texture },\n      uIntensity: { value: 0 },\n      uMotion: { value: 0 },\n      uPrev: { value: rtA.texture },\n      uRes: { value: new THREE.Vector2(innerWidth, innerHeight) },\n      uSpeed: { value: 0 },\n      uTime: { value: 0 },\n      uZoom: { value: 0 }\n    }\n\n    const outU = {\n      uAlpha: { value: 0 },\n      uColor: { value: new THREE.Color() },\n      uHue: { value: 0 },\n      uInput: { value: rtB.texture },\n      uTime: { value: 0 }\n    }\n\n    const mkScene = (frag: string, uniforms: object, transparent = false) => {\n      const s = new THREE.Scene()\n      s.add(\n        new THREE.Mesh(\n          geo.clone(),\n          new THREE.ShaderMaterial({\n            fragmentShader: frag,\n            transparent,\n            uniforms: uniforms as Record<string, THREE.IUniform<any>>,\n            vertexShader: vert\n          })\n        )\n      )\n\n      return s\n    }\n\n    const srcScene = mkScene(sourceFrag, srcU)\n    const moshScene = mkScene(moshFrag, moshU)\n    const outScene = mkScene(outputFrag, outU, true)\n\n    const resize = () => {\n      renderer.setSize(innerWidth, innerHeight)\n      renderer.setPixelRatio(Math.min(devicePixelRatio, 2))\n      ;[rtSource, rtA, rtB].forEach(rt => rt.setSize(innerWidth, innerHeight))\n      moshU.uRes.value.set(innerWidth, innerHeight)\n    }\n\n    resize()\n    window.addEventListener('resize', resize)\n\n    let raf: number,\n      ping = true,\n      time = 0\n\n    const loop = () => {\n      raf = requestAnimationFrame(loop)\n      time += 0.016\n\n      const v = cRef.current\n\n      srcU.uTime.value = time\n      srcU.uSpeed.value = v.speed\n      srcU.uZoom.value = v.zoom\n      srcU.uRotate.value = v.rotate\n      srcU.uFolds.value = v.folds\n      srcU.uDrift.value = v.drift\n\n      moshU.uTime.value = time\n      moshU.uIntensity.value = v.intensity\n      moshU.uMotion.value = v.motion\n      moshU.uSpeed.value = v.speed\n      moshU.uZoom.value = v.zoom\n\n      outU.uTime.value = time\n      outU.uAlpha.value = v.alpha\n      outU.uHue.value = v.hue\n      outU.uColor.value.set(typeof v.color === 'string' ? v.color : '#fff')\n\n      renderer.setRenderTarget(rtSource)\n      renderer.render(srcScene, camera)\n\n      const [read, write] = ping ? [rtA, rtB] : [rtB, rtA]\n      moshU.uPrev.value = read.texture\n      renderer.setRenderTarget(write)\n      renderer.render(moshScene, camera)\n\n      outU.uInput.value = write.texture\n      renderer.setRenderTarget(null)\n      renderer.render(outScene, camera)\n\n      ping = !ping\n    }\n\n    loop()\n\n    return () => {\n      window.removeEventListener('resize', resize)\n      cancelAnimationFrame(raf)\n      textures.forEach(t => t.dispose())\n      ;[geo, rtSource, rtA, rtB, renderer].forEach(x => x.dispose())\n    }\n  }, [enabled])\n\n  if (!enabled) {\n    return null\n  }\n\n  return (\n    <canvas\n      className={cn('h-full w-full', className)}\n      ref={canvasRef}\n      style={{\n        mixBlendMode: (blendOverride ??\n          c.blend) as React.CSSProperties['mixBlendMode'],\n        ...style\n      }}\n    />\n  )\n}\n\ninterface GreysProps {\n  className?: string\n  style?: React.CSSProperties\n}"]}
+{"version":3,"file":"greys.js","sourceRoot":"","sources":["../../../../src/ui/components/overlays/greys.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport * as THREE from 'three'\n\nimport { $gpuTier, useGpuTier } from '../../../hooks/use-gpu-tier'\nimport { useSmoothControls } from '../../../hooks/use-smooth-controls'\nimport { cn } from '../../../utils'\n\nimport { BLEND_MODES } from './blend-modes'\n\nconst vert = /*glsl*/ `\n  varying vec2 vUv;\n  void main() {\n    vUv = uv;\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n  }\n`\n\nconst sourceFrag = /*glsl*/ `\n  uniform sampler2D uTex0, uTex1, uTex2, uTex3;\n  uniform float uTime, uZoom, uSpeed, uRotate, uFolds, uDrift;\n  varying vec2 vUv;\n\n  vec3 gray(vec3 c) { return vec3(dot(c, vec3(.299, .587, .114))); }\n  vec2 rot(vec2 p, float a) { return vec2(p.x * cos(a) - p.y * sin(a), p.x * sin(a) + p.y * cos(a)); }\n\n  vec2 kaleid(vec2 p, float n) {\n    float a = mod(atan(p.y, p.x), 6.28318 / n) - 3.14159 / n;\n    return length(p) * vec2(cos(a), sin(a));\n  }\n\n  vec4 tex(int i, vec2 uv) {\n    if (i == 0) return texture2D(uTex0, uv);\n    if (i == 1) return texture2D(uTex1, uv);\n    if (i == 2) return texture2D(uTex2, uv);\n    return texture2D(uTex3, uv);\n  }\n\n  void main() {\n    vec2 uv = rot(vUv - .5, uTime * uRotate * .05);\n    if (uFolds > 1.) uv = kaleid(uv, uFolds);\n\n    float dt = uTime * uDrift * .1;\n    uv = uv / uZoom + .5 + vec2(sin(dt * .7) * cos(dt * .3), cos(dt * .5) * sin(dt * .9)) * .15 * uDrift;\n\n    float cycle = mod(uTime * uSpeed * .01, 4.);\n    int i0 = int(floor(cycle)), i1 = int(mod(float(i0) + 1., 4.));\n    float t = smoothstep(0., 1., fract(cycle));\n\n    vec3 base = mix(gray(vec3(1.) - tex(i0, uv).rgb), gray(vec3(1.) - tex(i1, uv).rgb), t);\n    vec2 uvF = vec2(1. - uv.x, uv.y);\n    vec3 flip = mix(gray(vec3(1.) - tex(i0, uvF).rgb), gray(vec3(1.) - tex(i1, uvF).rgb), t);\n\n    gl_FragColor = vec4(mix(base, flip, .3 + sin(uTime * .2) * .2), 1.);\n  }\n`\n\nconst moshFrag = /*glsl*/ `\n  uniform sampler2D uCurrent, uPrev, uTex0, uTex1, uTex2, uTex3;\n  uniform float uTime, uIntensity, uMotion, uZoom, uSpeed;\n  uniform vec2 uRes;\n  varying vec2 vUv;\n\n  float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }\n  vec2 hash2(vec2 p) { return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453); }\n\n  float noise(vec2 p) {\n    vec2 i = floor(p), f = fract(p) * fract(p) * (3. - 2. * fract(p));\n    return mix(mix(hash(i), hash(i + vec2(1., 0.)), f.x), mix(hash(i + vec2(0., 1.)), hash(i + vec2(1., 1.)), f.x), f.y);\n  }\n\n  vec3 gray(vec3 c) { return vec3(dot(c, vec3(.299, .587, .114))); }\n\n  vec2 distort(vec2 uv, float k, float t) {\n    float n1 = noise(uv * 8. + t * .5), n2 = noise(uv * 12. + t * .7), flow = noise(uv * 4. + t * .3);\n    return uv + vec2(cos(n1 * 6.28 + t * 1.2), sin(n2 * 6.28 + t * .9)) * .02 * k\n             + vec2(cos(flow * 6.28 + uv.y * 10.), sin(flow * 6.28 + uv.x * 10.)) * .015 * k;\n  }\n\n  vec3 tex(int i, vec2 uv) {\n    vec2 zuv = (uv - .5) / uZoom + .5;\n    if (i == 0) return gray(vec3(1.) - texture2D(uTex0, zuv).rgb);\n    if (i == 1) return gray(vec3(1.) - texture2D(uTex1, zuv).rgb);\n    if (i == 2) return gray(vec3(1.) - texture2D(uTex2, zuv).rgb);\n    return gray(vec3(1.) - texture2D(uTex3, zuv).rgb);\n  }\n\n  void main() {\n    vec2 uv = vUv;\n    float t = uTime * uSpeed, tS = floor(t * .1), pS = 80.;\n    float amt = uIntensity * uMotion * .8 * (.7 + (sin(t * .5) * .5 + .5) * .3);\n\n    vec2 mUV = distort(uv, uIntensity * .4, t);\n\n    float hS = floor(uv.y * pS), hA = smoothstep(0., .8, hash(vec2(hS, tS)));\n    float hO = (hash(vec2(hS, tS + 50.)) - .5) * .25 * hA * amt;\n    float vS = floor(uv.x * pS), vA = smoothstep(0., .8, hash(vec2(vS, tS + 100.)));\n    float vO = (hash(vec2(vS, tS + 150.)) - .5) * .25 * vA * amt;\n    mUV += vec2(hO, vO);\n\n    float bS = pS * .25;\n    float hBA = step(.5, hash(vec2(floor(uv.y * bS), tS + 200.)));\n    float hBO = (hash(vec2(floor(uv.y * bS), 200.)) - .5) * .35 * hBA * amt;\n    float vBA = step(.5, hash(vec2(floor(uv.x * bS), tS + 300.)));\n    float vBO = (hash(vec2(floor(uv.x * bS), 250.)) - .5) * .35 * vBA * amt;\n    mUV += vec2(hBO, vBO);\n\n    vec2 blk = floor(uv * pS * .15);\n    mUV += (hash2(vec2(blk.x, blk.y + 500.)) - .5) * .4 * step(.7, hash(vec2(blk.x, blk.y + tS))) * amt;\n    mUV = clamp(mUV, 0., 1.);\n\n    vec3 prev = texture2D(uPrev, mUV).rgb;\n    prev = mix(prev, texture2D(uPrev, clamp(uv + vec2(hBO, vBO), 0., 1.)).rgb, max(hBA, vBA) * .9);\n\n    float tY = floor(uv.y * pS * .4);\n    if (hash(vec2(tY, tS + 400.)) > .75) {\n      prev = mix(prev, texture2D(uPrev, clamp(vec2(uv.x + (hash(vec2(tY, 400.)) - .5) * .5 * amt, uv.y), 0., 1.)).rgb, .85);\n    }\n\n    if (hA > 0. && amt > .01) {\n      prev = mix(prev, gray(texture2D(uPrev, clamp(vec2(uv.x + (gray(prev).r - uv.x) * amt + hO, uv.y), 0., 1.)).rgb), hA);\n    }\n\n    float d = mix(mix(.97, .99, noise(uv * 8. + t * .2)), 0., step(.994, hash(vec2(tS, 0.))));\n    gl_FragColor = vec4(mix(texture2D(uCurrent, uv).rgb, prev, d), 1.);\n  }\n`\n\nconst outputFrag = /*glsl*/ `\n  uniform sampler2D uInput;\n  uniform float uTime, uAlpha, uHue;\n  uniform vec3 uColor;\n  varying vec2 vUv;\n\n  float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }\n\n  vec3 hueShift(vec3 c, float h) {\n    float a = h * 6.28318, s = sin(a), co = cos(a);\n    vec3 w = vec3(.299, .587, .114);\n    return clamp(vec3(\n      dot(c, w) + dot(c, vec3(.701, -.587, -.114) * co + vec3(.168, .330, -.497) * s),\n      dot(c, w) + dot(c, vec3(-.299, .413, -.114) * co + vec3(.328, .035, -.363) * s),\n      dot(c, w) + dot(c, vec3(-.299, -.587, .886) * co + vec3(-.497, .330, .168) * s)\n    ), 0., 1.);\n  }\n\n  void main() {\n    vec3 m = texture2D(uInput, vUv).rgb;\n    m *= 1. - step(.5, fract(vUv.y * 200.)) * .06 * step(.97, hash(vec2(floor(vUv.y * 30.), floor(uTime * .5))));\n\n    float lum = dot(m, vec3(.299, .587, .114));\n    gl_FragColor = vec4(hueShift(mix(vec3(lum), uColor * lum * 2., length(uColor)), uHue) * uAlpha, smoothstep(.08, .18, lum * uAlpha));\n  }\n`\n\nconst TEXTURES = [\n  '/anatomy/grays-0.jpg',\n  '/anatomy/grays-3.jpg',\n  '/anatomy/grays-6.jpg',\n  '/anatomy/grays-9.jpg'\n]\n\nexport function Greys({ className, style }: GreysProps) {\n  const gpuTier = useGpuTier()\n  const [blendOverride, setBlendOverride] = useState<string | null>(null)\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n\n  const c = useSmoothControls(\n    'Effects/Greys',\n    {\n      alpha: { max: 1, min: 0, step: 0.01, value: 0.19 },\n      blend: { options: BLEND_MODES, value: 'color-burn' },\n      color: { value: '#ffac02' },\n      drift: { max: 2, min: 0, step: 0.1, value: 0.5 },\n      enabled: { value: false },\n      folds: { max: 12, min: 1, step: 1, value: 1 },\n      hue: { max: 1, min: 0, step: 0.01, value: 0.37 },\n      intensity: { max: 3, min: 0, step: 0.1, value: 0.1 },\n      motion: { max: 2, min: 0, step: 0.1, value: 0.1 },\n      rotate: { max: 2, min: -2, step: 0.1, value: 0.3 },\n      speed: { max: 1, min: 0.01, step: 0.01, value: 0.21 },\n      zoom: { max: 4, min: 0.5, step: 0.1, value: 0.7 }\n    },\n    { collapsed: true }\n  )\n\n  const cRef = useRef(c)\n  cRef.current = c\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) =>\n      e.key.toLowerCase() === 'x' &&\n      setBlendOverride(p => (p === 'screen' ? null : 'screen'))\n\n    window.addEventListener('keydown', onKey)\n\n    return () => window.removeEventListener('keydown', onKey)\n  }, [])\n\n  const enabled = c.enabled && gpuTier === 2\n\n  useEffect(() => {\n    if (!canvasRef.current || !enabled) {\n      return\n    }\n\n    let renderer: THREE.WebGLRenderer\n\n    try {\n      renderer = new THREE.WebGLRenderer({\n        alpha: true,\n        canvas: canvasRef.current\n      })\n    } catch {\n      // See note in noise.tsx — eager gpu-tier detection should keep us\n      // out of here, but if the driver fails the renderer constructor\n      // anyway, downgrade so other overlays stop trying too.\n      $gpuTier.set(0)\n\n      return\n    }\n\n    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1)\n    const geo = new THREE.PlaneGeometry(2, 2)\n\n    const [rtSource, rtA, rtB] = [0, 1, 2].map(\n      () =>\n        new THREE.WebGLRenderTarget(innerWidth, innerHeight, {\n          magFilter: THREE.NearestFilter,\n          minFilter: THREE.NearestFilter\n        })\n    )\n\n    const textures = TEXTURES.map(p => {\n      const t = new THREE.TextureLoader().load(p)\n      t.wrapS = t.wrapT = THREE.ClampToEdgeWrapping\n      t.minFilter = t.magFilter = THREE.LinearFilter\n\n      return t\n    })\n\n    const texU = Object.fromEntries(\n      textures.map((t, i) => [`uTex${i}`, { value: t }])\n    )\n\n    const srcU = {\n      ...texU,\n      uDrift: { value: 0 },\n      uFolds: { value: 0 },\n      uRotate: { value: 0 },\n      uSpeed: { value: 0 },\n      uTime: { value: 0 },\n      uZoom: { value: 0 }\n    }\n\n    const moshU = {\n      ...texU,\n      uCurrent: { value: rtSource.texture },\n      uIntensity: { value: 0 },\n      uMotion: { value: 0 },\n      uPrev: { value: rtA.texture },\n      uRes: { value: new THREE.Vector2(innerWidth, innerHeight) },\n      uSpeed: { value: 0 },\n      uTime: { value: 0 },\n      uZoom: { value: 0 }\n    }\n\n    const outU = {\n      uAlpha: { value: 0 },\n      uColor: { value: new THREE.Color() },\n      uHue: { value: 0 },\n      uInput: { value: rtB.texture },\n      uTime: { value: 0 }\n    }\n\n    const mkScene = (frag: string, uniforms: object, transparent = false) => {\n      const s = new THREE.Scene()\n      s.add(\n        new THREE.Mesh(\n          geo.clone(),\n          new THREE.ShaderMaterial({\n            fragmentShader: frag,\n            transparent,\n            uniforms: uniforms as Record<string, THREE.IUniform<any>>,\n            vertexShader: vert\n          })\n        )\n      )\n\n      return s\n    }\n\n    const srcScene = mkScene(sourceFrag, srcU)\n    const moshScene = mkScene(moshFrag, moshU)\n    const outScene = mkScene(outputFrag, outU, true)\n\n    const resize = () => {\n      renderer.setSize(innerWidth, innerHeight)\n      renderer.setPixelRatio(Math.min(devicePixelRatio, 2))\n      ;[rtSource, rtA, rtB].forEach(rt => rt.setSize(innerWidth, innerHeight))\n      moshU.uRes.value.set(innerWidth, innerHeight)\n    }\n\n    resize()\n    window.addEventListener('resize', resize)\n\n    let raf: number,\n      ping = true,\n      time = 0\n\n    const loop = () => {\n      raf = requestAnimationFrame(loop)\n      time += 0.016\n\n      const v = cRef.current\n\n      srcU.uTime.value = time\n      srcU.uSpeed.value = v.speed\n      srcU.uZoom.value = v.zoom\n      srcU.uRotate.value = v.rotate\n      srcU.uFolds.value = v.folds\n      srcU.uDrift.value = v.drift\n\n      moshU.uTime.value = time\n      moshU.uIntensity.value = v.intensity\n      moshU.uMotion.value = v.motion\n      moshU.uSpeed.value = v.speed\n      moshU.uZoom.value = v.zoom\n\n      outU.uTime.value = time\n      outU.uAlpha.value = v.alpha\n      outU.uHue.value = v.hue\n      outU.uColor.value.set(typeof v.color === 'string' ? v.color : '#fff')\n\n      renderer.setRenderTarget(rtSource)\n      renderer.render(srcScene, camera)\n\n      const [read, write] = ping ? [rtA, rtB] : [rtB, rtA]\n      moshU.uPrev.value = read.texture\n      renderer.setRenderTarget(write)\n      renderer.render(moshScene, camera)\n\n      outU.uInput.value = write.texture\n      renderer.setRenderTarget(null)\n      renderer.render(outScene, camera)\n\n      ping = !ping\n    }\n\n    loop()\n\n    return () => {\n      window.removeEventListener('resize', resize)\n      cancelAnimationFrame(raf)\n      textures.forEach(t => t.dispose())\n      ;[geo, rtSource, rtA, rtB, renderer].forEach(x => x.dispose())\n    }\n  }, [enabled])\n\n  if (!enabled) {\n    return null\n  }\n\n  return (\n    <canvas\n      className={cn('h-full w-full', className)}\n      ref={canvasRef}\n      style={{\n        mixBlendMode: (blendOverride ??\n          c.blend) as React.CSSProperties['mixBlendMode'],\n        ...style\n      }}\n    />\n  )\n}\n\ninterface GreysProps {\n  className?: string\n  style?: React.CSSProperties\n}"]}

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

@@ -1,59 +1,15 @@
-export declare const BLEND_MODES: React.CSSProperties["mixBlendMode"][];
-export declare const LENS_0: {
-    Globe: {
-        innerColor: string;
-        innerOpacity: number;
-        outerColor: string;
-    };
-    Lens: {
-        bgBlend: string;
-        bgColor: string;
-        bgOpacity: number;
-        fgColor: string;
-        fgOpacity: number;
-        fillerOpacity: number;
-        mgColor: string;
-        mgOpacity: number;
-    };
-};
-export declare const LENS_5I: {
-    Globe: {
-        innerColor: string;
-        innerOpacity: number;
-        outerColor: string;
-    };
-    Lens: {
-        bgBlend: string;
-        bgColor: string;
-        bgOpacity: number;
-        fgColor: string;
-        fgOpacity: number;
-        fillerOpacity: number;
-        mgColor: string;
-        mgOpacity: number;
-    };
-};
-export declare const lens0: (l?: Partial<typeof LENS_0.Lens>, g?: Partial<typeof LENS_0.Globe>) => LensPreset;
-export declare const lens5i: (l?: Partial<typeof LENS_5I.Lens>, g?: Partial<typeof LENS_5I.Globe>) => LensPreset;
-export declare const LENSES: [string, LensPreset][];
-export declare const applyLens: (preset: LensPreset, animate?: boolean) => void;
-export declare const $lightMode: import("nanostores").PreinitializedWritableAtom<boolean> & object;
-export declare const toggleLens: () => void;
+import type { LensPreset } from './lens';
+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';
+export type { LensPreset } from './lens';
 export declare function Overlays({ dark, initial }: OverlaysProps): import("react/jsx-runtime").JSX.Element;
-export interface LensPreset {
-    Globe: typeof LENS_0.Globe;
-    Lens: typeof LENS_0.Lens;
-}
 interface OverlaysProps {
     dark?: boolean;
-    /**
-     * Exact preset to seed the internal Leva controls with. When omitted the
-     * component falls back to `LENS_0` / `LENS_5I` based on `dark`. Pass the
-     * actual preset from a host (e.g. Storybook toolbar) to guarantee the
-     * first-paint colors match the selected lens without needing a followup
-     * `applyLens` that can be lost in useSmoothControls' startup window.
-     */
     initial?: LensPreset;
 }
-export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/overlays/index.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,WAAW,EAYR,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,CAAA;AAErD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAYlB,CAAA;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;CAYnB,CAAA;AAED,eAAO,MAAM,KAAK,GAChB,IAAI,OAAO,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,EAC/B,IAAI,OAAO,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,KAC/B,UAGD,CAAA;AAQF,eAAO,MAAM,MAAM,GACjB,IAAI,OAAO,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,EAChC,IAAI,OAAO,CAAC,OAAO,OAAO,CAAC,KAAK,CAAC,KAChC,UAGD,CAAA;AAKF,eAAO,MAAM,MAAM,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EASxC,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,QAAQ,UAAU,EAAE,iBAAe,SAK1D,CAAA;AAEH,eAAO,MAAM,UAAU,mEAAa,CAAA;AAEpC,eAAO,MAAM,UAAU,YAMtB,CAAA;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,aAAa,2CAkGxD;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,OAAO,MAAM,CAAC,KAAK,CAAA;IAC1B,IAAI,EAAE,OAAO,MAAM,CAAC,IAAI,CAAA;CACzB;AAED,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,UAAU,CAAA;CACrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/overlays/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EACL,UAAU,EACV,SAAS,EACT,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACP,MAAM,EACN,UAAU,EACX,MAAM,QAAQ,CAAA;AACf,YAAY,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAIxC,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,aAAa,2CAWxD;AAED,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,UAAU,CAAA;CACrB"}

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

@@ -1,145 +1,19 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { atom } from 'nanostores';
-import { useEffect } from 'react';
-import { setControlValue, useSmoothControls } from '../../../hooks/use-smooth-controls';
-import { colorMix } from '../../../utils/color';
-import fillerBg from '../../../assets/filler-bg0.jpg';
 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';
-export const BLEND_MODES = [
-    'overlay',
-    'multiply',
-    'screen',
-    'difference',
-    'exclusion',
-    'color-dodge',
-    'color-burn',
-    'hard-light',
-    'soft-light',
-    'darken',
-    'lighten'
-];
-export const LENS_0 = {
-    Globe: { innerColor: '#170d02', innerOpacity: 0.1, outerColor: '#FFAC02' },
-    Lens: {
-        bgBlend: 'difference',
-        bgColor: '#041C1C',
-        bgOpacity: 1,
-        fgColor: '#FFFFFF',
-        fgOpacity: 0,
-        fillerOpacity: 0.033,
-        mgColor: '#ffe6cb',
-        mgOpacity: 1
-    }
-};
-export const LENS_5I = {
-    Globe: { innerColor: '#170d02', innerOpacity: 0.3, outerColor: '#FFAC02' },
-    Lens: {
-        bgBlend: 'multiply',
-        bgColor: '#170d02',
-        bgOpacity: 1,
-        fgColor: '#FFFFFF',
-        fgOpacity: 1,
-        fillerOpacity: 0.06,
-        mgColor: '#FFAC02',
-        mgOpacity: 1
-    }
-};
-export const lens0 = (l, g) => ({
-    Globe: { ...LENS_0.Globe, ...g },
-    Lens: { ...LENS_0.Lens, ...l }
-});
-// The Hermes light-mode look is produced by a fullscreen opaque-white
-// `mix-blend-mode: difference` foreground layer that inverts everything.
-// Colored lenses that want a "white + accent" look MUST be built from
-// LENS_5I, not LENS_0 — otherwise `bgBlend: 'difference'` + an opaque
-// colored bg + active fg inversion land halfway between dark and light
-// mode and produce a muddy warm wash instead of a clean inversion.
-export const lens5i = (l, g) => ({
-    Globe: { ...LENS_5I.Globe, ...g },
-    Lens: { ...LENS_5I.Lens, ...l }
-});
-// Accent colors are the *pre-inversion* source; after the difference FG
-// layer they read as their visual complement. e.g. `#FFAC02` (orange)
-// renders as blue #0053FD on screen — that's the default LENS_5I accent.
-export const LENSES = [
-    ['0', LENS_0],
-    ['1', lens0({ bgColor: '#0A1F1F' })],
-    ['2', lens0({ bgColor: '#0E0313', mgColor: '#e6cbff' })],
-    ['3', lens5i({ mgColor: '#FFAC02' })],
-    ['4', lens5i({ bgColor: '#0E0313', mgColor: '#FF5500' })],
-    ['5', lens0({ bgColor: '#1540B1', bgOpacity: 0.7 })],
-    ['5i', LENS_5I],
-    ['6', lens5i({ bgColor: '#170D02', mgColor: '#00E5FF' })]
-];
-export const applyLens = (preset, animate = false) => Object.entries(preset).forEach(([g, v]) => Object.entries(v).forEach(([k, val]) => setControlValue(g, k, val, { animate })));
-export const $lightMode = atom(true);
-export const toggleLens = () => {
-    const isLight = $lightMode.get();
-    const next = isLight ? LENS_0 : LENS_5I;
-    $lightMode.set(!isLight);
-    applyLens(next, true);
-};
 export function Overlays({ 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}`);
-        }
-    }, [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(Noise, { className: LAYER, style: { zIndex: 101 } }), _jsx("div", { className: LAYER, style: {
-                    backgroundColor: colorMix(lens.fgColor, lens.fgOpacity),
-                    mixBlendMode: lens.fgBlend,
-                    zIndex: 100
-                } }), _jsx(Vignette, { className: LAYER, style: { zIndex: 99 } }), _jsx(Greys, { className: LAYER, style: { zIndex: 200 } }), _jsx(Glitch, { className: LAYER, style: { zIndex: 201 } }), _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
-                } })] }));
+    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 } })] }));
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/components/overlays/index.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { atom } from 'nanostores'\nimport { useEffect } from 'react'\n\nimport {\n  getControlAtom,\n  setControlValue,\n  useSmoothControls\n} from '../../../hooks/use-smooth-controls'\nimport { colorMix } from '../../../utils/color'\n\nimport fillerBg from '../../../assets/filler-bg0.jpg'\n\nimport { Glitch } from './glitch'\nimport { Greys } from './greys'\nimport { Noise } from './noise'\nimport { Vignette } from './vignette'\n\nconst LAYER = 'pointer-events-none fixed inset-0'\n\nexport const BLEND_MODES = [\n  'overlay',\n  'multiply',\n  'screen',\n  'difference',\n  'exclusion',\n  'color-dodge',\n  'color-burn',\n  'hard-light',\n  'soft-light',\n  'darken',\n  'lighten'\n] as unknown as React.CSSProperties['mixBlendMode'][]\n\nexport const LENS_0 = {\n  Globe: { innerColor: '#170d02', innerOpacity: 0.1, outerColor: '#FFAC02' },\n  Lens: {\n    bgBlend: 'difference',\n    bgColor: '#041C1C',\n    bgOpacity: 1,\n    fgColor: '#FFFFFF',\n    fgOpacity: 0,\n    fillerOpacity: 0.033,\n    mgColor: '#ffe6cb',\n    mgOpacity: 1\n  }\n}\n\nexport const LENS_5I = {\n  Globe: { innerColor: '#170d02', innerOpacity: 0.3, outerColor: '#FFAC02' },\n  Lens: {\n    bgBlend: 'multiply',\n    bgColor: '#170d02',\n    bgOpacity: 1,\n    fgColor: '#FFFFFF',\n    fgOpacity: 1,\n    fillerOpacity: 0.06,\n    mgColor: '#FFAC02',\n    mgOpacity: 1\n  }\n}\n\nexport const lens0 = (\n  l?: Partial<typeof LENS_0.Lens>,\n  g?: Partial<typeof LENS_0.Globe>\n): LensPreset => ({\n  Globe: { ...LENS_0.Globe, ...g },\n  Lens: { ...LENS_0.Lens, ...l }\n})\n\n// The Hermes light-mode look is produced by a fullscreen opaque-white\n// `mix-blend-mode: difference` foreground layer that inverts everything.\n// Colored lenses that want a \"white + accent\" look MUST be built from\n// LENS_5I, not LENS_0 — otherwise `bgBlend: 'difference'` + an opaque\n// colored bg + active fg inversion land halfway between dark and light\n// mode and produce a muddy warm wash instead of a clean inversion.\nexport const lens5i = (\n  l?: Partial<typeof LENS_5I.Lens>,\n  g?: Partial<typeof LENS_5I.Globe>\n): LensPreset => ({\n  Globe: { ...LENS_5I.Globe, ...g },\n  Lens: { ...LENS_5I.Lens, ...l }\n})\n\n// Accent colors are the *pre-inversion* source; after the difference FG\n// layer they read as their visual complement. e.g. `#FFAC02` (orange)\n// renders as blue #0053FD on screen — that's the default LENS_5I accent.\nexport const LENSES: [string, LensPreset][] = [\n  ['0', LENS_0],\n  ['1', lens0({ bgColor: '#0A1F1F' })],\n  ['2', lens0({ bgColor: '#0E0313', mgColor: '#e6cbff' })],\n  ['3', lens5i({ mgColor: '#FFAC02' })],\n  ['4', lens5i({ bgColor: '#0E0313', mgColor: '#FF5500' })],\n  ['5', lens0({ bgColor: '#1540B1', bgOpacity: 0.7 })],\n  ['5i', LENS_5I],\n  ['6', lens5i({ bgColor: '#170D02', mgColor: '#00E5FF' })]\n]\n\nexport const applyLens = (preset: LensPreset, animate = false) =>\n  Object.entries(preset).forEach(([g, v]) =>\n    Object.entries(v).forEach(([k, val]) =>\n      setControlValue(g, k, val, { animate })\n    )\n  )\n\nexport const $lightMode = atom(true)\n\nexport const toggleLens = () => {\n  const isLight = $lightMode.get()\n  const next = isLight ? LENS_0 : LENS_5I\n\n  $lightMode.set(!isLight)\n  applyLens(next, true)\n}\n\nexport function Overlays({ dark, initial }: OverlaysProps) {\n  // `initial` lets the host (e.g. Storybook) seed the Leva/atom state with\n  // the *exact* lens preset the user selected, avoiding a one-cycle lag\n  // where useSmoothControls emits old colors for the first paint (and, on\n  // Storybook's fast iframe reload, sometimes never catches up because\n  // useControls' ready-gate swallows the instant color writes).\n  const base = initial?.Lens ?? (dark ? LENS_0.Lens : LENS_5I.Lens)\n\n  const lens = useSmoothControls(\n    'Lens',\n    {\n      bgBlend: { options: BLEND_MODES, value: base.bgBlend as 'multiply' },\n      bgColor: { value: base.bgColor },\n      bgOpacity: { max: 1, min: 0, step: 0.01, value: base.bgOpacity },\n      fgBlend: { options: BLEND_MODES, value: 'difference' as const },\n      fgColor: { value: base.fgColor },\n      fgOpacity: { max: 1, min: 0, step: 0.01, value: base.fgOpacity },\n      fillerBlend: { options: BLEND_MODES, value: 'difference' as const },\n      fillerOpacity: { max: 1, min: 0, step: 0.01, value: base.fillerOpacity },\n      mgColor: { value: base.mgColor },\n      mgOpacity: { max: 1, min: 0, step: 0.01, value: base.mgOpacity }\n    },\n    { collapsed: false }\n  )\n\n  useEffect(() => {\n    $lightMode.set(!dark)\n  }, [dark])\n\n  useEffect(() => {\n    const s = document.documentElement.style\n\n    for (const [name, color, alpha] of [\n      ['foreground', lens.fgColor, lens.fgOpacity],\n      ['midground', lens.mgColor, lens.mgOpacity],\n      ['background', lens.bgColor, lens.bgOpacity]\n    ] as [string, string, number][]) {\n      s.setProperty(`--${name}`, colorMix(color, alpha))\n      s.setProperty(`--${name}-base`, color)\n      s.setProperty(`--${name}-alpha`, `${alpha}`)\n    }\n  }, [lens])\n\n  useEffect(() => {\n    const handle = (e: KeyboardEvent) => e.key === 'x' && toggleLens()\n    window.addEventListener('keydown', handle)\n    return () => window.removeEventListener('keydown', handle)\n  }, [])\n\n  // NOTE: z-index is inlined because Tailwind's JIT sometimes doesn't emit\n  // these non-default utilities (e.g. in Storybook's isolated content\n  // scan), which silently collapses the overlay stack to DOM order and\n  // breaks the mix-blend-mode inversion — producing a muddy warm wash\n  // instead of the intended clean black/white inversion.\n  return (\n    <>\n      <Noise className={LAYER} style={{ zIndex: 101 }} />\n\n      <div\n        className={LAYER}\n        style={{\n          backgroundColor: colorMix(lens.fgColor, lens.fgOpacity),\n          mixBlendMode: lens.fgBlend,\n          zIndex: 100\n        }}\n      />\n\n      <Vignette className={LAYER} style={{ zIndex: 99 }} />\n      <Greys className={LAYER} style={{ zIndex: 200 }} />\n      <Glitch className={LAYER} style={{ zIndex: 201 }} />\n\n      <div\n        className={LAYER}\n        style={{\n          mixBlendMode: lens.fillerBlend,\n          opacity: lens.fillerOpacity,\n          zIndex: 2\n        }}\n      >\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          alt=\"\"\n          className=\"h-[150dvh] w-auto min-w-dvw object-cover object-top-left invert\"\n          fetchPriority=\"low\"\n          src={fillerBg.src}\n        />\n      </div>\n\n      <div\n        className={LAYER}\n        style={{\n          backgroundColor: colorMix(lens.bgColor, lens.bgOpacity),\n          mixBlendMode: lens.bgBlend,\n          zIndex: 1\n        }}\n      />\n    </>\n  )\n}\n\nexport interface LensPreset {\n  Globe: typeof LENS_0.Globe\n  Lens: typeof LENS_0.Lens\n}\n\ninterface OverlaysProps {\n  dark?: boolean\n  /**\n   * Exact preset to seed the internal Leva controls with. When omitted the\n   * component falls back to `LENS_0` / `LENS_5I` based on `dark`. Pass the\n   * actual preset from a host (e.g. Storybook toolbar) to guarantee the\n   * first-paint colors match the selected lens without needing a followup\n   * `applyLens` that can be lost in useSmoothControls' startup window.\n   */\n  initial?: LensPreset\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/components/overlays/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EACL,UAAU,EACV,SAAS,EACT,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACP,MAAM,EACN,UAAU,EACX,MAAM,QAAQ,CAAA;AAGf,MAAM,KAAK,GAAG,mCAAmC,CAAA;AAEjD,MAAM,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAiB;IACvD,OAAO,CACL,8BACE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,EAEtC,KAAC,KAAK,IAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAI,EACnD,KAAC,QAAQ,IAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,GAAI,EACrD,KAAC,KAAK,IAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAI,EACnD,KAAC,MAAM,IAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAI,IACnD,CACJ,CAAA;AACH,CAAC","sourcesContent":["'use client'\n\nimport { Glitch } from './glitch'\nimport { Greys } from './greys'\nimport { Lens } from './lens-layers'\nimport { Noise } from './noise'\nimport { Vignette } from './vignette'\n\nimport type { LensPreset } from './lens'\n\nexport { BLEND_MODES } from './blend-modes'\nexport { Glitch } from './glitch'\nexport { Greys } from './greys'\nexport { Lens } from './lens-layers'\nexport { Noise } from './noise'\nexport { Vignette } from './vignette'\nexport {\n  $lightMode,\n  applyLens,\n  lens0,\n  lens5i,\n  LENS_0,\n  LENS_5I,\n  LENSES,\n  toggleLens\n} from './lens'\nexport type { LensPreset } from './lens'\n\nconst LAYER = 'pointer-events-none fixed inset-0'\n\nexport function Overlays({ dark, initial }: OverlaysProps) {\n  return (\n    <>\n      <Lens dark={dark} initial={initial} />\n\n      <Noise className={LAYER} style={{ zIndex: 101 }} />\n      <Vignette className={LAYER} style={{ zIndex: 99 }} />\n      <Greys className={LAYER} style={{ zIndex: 200 }} />\n      <Glitch className={LAYER} style={{ zIndex: 201 }} />\n    </>\n  )\n}\n\ninterface OverlaysProps {\n  dark?: boolean\n  initial?: LensPreset\n}\n"]}

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

@@ -0,0 +1,15 @@
+import { type LensPreset } from './lens';
+export declare function Lens({ dark, initial }: LensProps): import("react/jsx-runtime").JSX.Element;
+interface LensProps {
+    dark?: boolean;
+    /**
+     * Exact preset to seed the internal Leva controls with. When omitted the
+     * component falls back to `LENS_0` / `LENS_5I` based on `dark`. Pass the
+     * actual preset from a host (e.g. Storybook toolbar) to guarantee the
+     * first-paint colors match the selected lens without needing a followup
+     * `applyLens` that can be lost in useSmoothControls' startup window.
+     */
+    initial?: LensPreset;
+}
+export {};
+//# sourceMappingURL=lens-layers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lens-layers.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/overlays/lens-layers.tsx"],"names":[],"mappings":"AAUA,OAAO,EAA+B,KAAK,UAAU,EAAc,MAAM,QAAQ,CAAA;AAIjF,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,SAAS,2CA4FhD;AAED,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,UAAU,CAAA;CACrB"}

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

@@ -0,0 +1,68 @@
+'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';
+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}`);
+        }
+    }, [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
+                } })] }));
+}
+//# sourceMappingURL=lens-layers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lens-layers.js","sourceRoot":"","sources":["../../../../src/ui/components/overlays/lens-layers.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\nimport { useSmoothControls } from '../../../hooks/use-smooth-controls'\nimport { colorMix } from '../../../utils/color'\n\nimport fillerBg from '../../../assets/filler-bg0.jpg'\n\nimport { BLEND_MODES } from './blend-modes'\nimport { $lightMode, LENS_0, LENS_5I, type LensPreset, toggleLens } from './lens'\n\nconst LAYER = 'pointer-events-none fixed inset-0'\n\nexport function Lens({ dark, initial }: LensProps) {\n  // `initial` lets the host (e.g. Storybook) seed the Leva/atom state with\n  // the *exact* lens preset the user selected, avoiding a one-cycle lag\n  // where useSmoothControls emits old colors for the first paint (and, on\n  // Storybook's fast iframe reload, sometimes never catches up because\n  // useControls' ready-gate swallows the instant color writes).\n  const base = initial?.Lens ?? (dark ? LENS_0.Lens : LENS_5I.Lens)\n\n  const lens = useSmoothControls(\n    'Lens',\n    {\n      bgBlend: { options: BLEND_MODES, value: base.bgBlend as 'multiply' },\n      bgColor: { value: base.bgColor },\n      bgOpacity: { max: 1, min: 0, step: 0.01, value: base.bgOpacity },\n      fgBlend: { options: BLEND_MODES, value: 'difference' as const },\n      fgColor: { value: base.fgColor },\n      fgOpacity: { max: 1, min: 0, step: 0.01, value: base.fgOpacity },\n      fillerBlend: { options: BLEND_MODES, value: 'difference' as const },\n      fillerOpacity: { max: 1, min: 0, step: 0.01, value: base.fillerOpacity },\n      mgColor: { value: base.mgColor },\n      mgOpacity: { max: 1, min: 0, step: 0.01, value: base.mgOpacity }\n    },\n    { collapsed: false }\n  )\n\n  useEffect(() => {\n    $lightMode.set(!dark)\n  }, [dark])\n\n  useEffect(() => {\n    const s = document.documentElement.style\n\n    for (const [name, color, alpha] of [\n      ['foreground', lens.fgColor, lens.fgOpacity],\n      ['midground', lens.mgColor, lens.mgOpacity],\n      ['background', lens.bgColor, lens.bgOpacity]\n    ] as [string, string, number][]) {\n      s.setProperty(`--${name}`, colorMix(color, alpha))\n      s.setProperty(`--${name}-base`, color)\n      s.setProperty(`--${name}-alpha`, `${alpha}`)\n    }\n  }, [lens])\n\n  useEffect(() => {\n    const handle = (e: KeyboardEvent) => e.key === 'x' && toggleLens()\n    window.addEventListener('keydown', handle)\n    return () => window.removeEventListener('keydown', handle)\n  }, [])\n\n  // NOTE: z-index is inlined because Tailwind's JIT sometimes doesn't emit\n  // these non-default utilities (e.g. in Storybook's isolated content\n  // scan), which silently collapses the overlay stack to DOM order and\n  // breaks the mix-blend-mode inversion — producing a muddy warm wash\n  // instead of the intended clean black/white inversion.\n  return (\n    <>\n      <div\n        className={LAYER}\n        style={{\n          backgroundColor: colorMix(lens.fgColor, lens.fgOpacity),\n          mixBlendMode: lens.fgBlend,\n          zIndex: 100\n        }}\n      />\n\n      <div\n        className={LAYER}\n        style={{\n          mixBlendMode: lens.fillerBlend,\n          opacity: lens.fillerOpacity,\n          zIndex: 2\n        }}\n      >\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          alt=\"\"\n          className=\"h-[150dvh] w-auto min-w-dvw object-cover object-top-left invert\"\n          fetchPriority=\"low\"\n          src={fillerBg.src}\n        />\n      </div>\n\n      <div\n        className={LAYER}\n        style={{\n          backgroundColor: colorMix(lens.bgColor, lens.bgOpacity),\n          mixBlendMode: lens.bgBlend,\n          zIndex: 1\n        }}\n      />\n    </>\n  )\n}\n\ninterface LensProps {\n  dark?: boolean\n  /**\n   * Exact preset to seed the internal Leva controls with. When omitted the\n   * component falls back to `LENS_0` / `LENS_5I` based on `dark`. Pass the\n   * actual preset from a host (e.g. Storybook toolbar) to guarantee the\n   * first-paint colors match the selected lens without needing a followup\n   * `applyLens` that can be lost in useSmoothControls' startup window.\n   */\n  initial?: LensPreset\n}\n"]}

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

@@ -0,0 +1,45 @@
+export declare const LENS_0: {
+    Globe: {
+        innerColor: string;
+        innerOpacity: number;
+        outerColor: string;
+    };
+    Lens: {
+        bgBlend: string;
+        bgColor: string;
+        bgOpacity: number;
+        fgColor: string;
+        fgOpacity: number;
+        fillerOpacity: number;
+        mgColor: string;
+        mgOpacity: number;
+    };
+};
+export declare const LENS_5I: {
+    Globe: {
+        innerColor: string;
+        innerOpacity: number;
+        outerColor: string;
+    };
+    Lens: {
+        bgBlend: string;
+        bgColor: string;
+        bgOpacity: number;
+        fgColor: string;
+        fgOpacity: number;
+        fillerOpacity: number;
+        mgColor: string;
+        mgOpacity: number;
+    };
+};
+export declare const lens0: (l?: Partial<typeof LENS_0.Lens>, g?: Partial<typeof LENS_0.Globe>) => LensPreset;
+export declare const lens5i: (l?: Partial<typeof LENS_5I.Lens>, g?: Partial<typeof LENS_5I.Globe>) => LensPreset;
+export declare const LENSES: [string, LensPreset][];
+export declare const applyLens: (preset: LensPreset, animate?: boolean) => void;
+export declare const $lightMode: import("nanostores").PreinitializedWritableAtom<boolean> & object;
+export declare const toggleLens: () => void;
+export interface LensPreset {
+    Globe: typeof LENS_0.Globe;
+    Lens: typeof LENS_0.Lens;
+}
+//# sourceMappingURL=lens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lens.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/overlays/lens.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAYlB,CAAA;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;CAYnB,CAAA;AAED,eAAO,MAAM,KAAK,GAChB,IAAI,OAAO,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,EAC/B,IAAI,OAAO,CAAC,OAAO,MAAM,CAAC,KAAK,CAAC,KAC/B,UAGD,CAAA;AAQF,eAAO,MAAM,MAAM,GACjB,IAAI,OAAO,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,EAChC,IAAI,OAAO,CAAC,OAAO,OAAO,CAAC,KAAK,CAAC,KAChC,UAGD,CAAA;AAKF,eAAO,MAAM,MAAM,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EASxC,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,QAAQ,UAAU,EAAE,iBAAe,SAK1D,CAAA;AAEH,eAAO,MAAM,UAAU,mEAAa,CAAA;AAEpC,eAAO,MAAM,UAAU,YAMtB,CAAA;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,OAAO,MAAM,CAAC,KAAK,CAAA;IAC1B,IAAI,EAAE,OAAO,MAAM,CAAC,IAAI,CAAA;CACzB"}

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

@@ -0,0 +1,65 @@
+'use client';
+import { atom } from 'nanostores';
+import { setControlValue } from '../../../hooks/use-smooth-controls';
+export const LENS_0 = {
+    Globe: { innerColor: '#170d02', innerOpacity: 0.1, outerColor: '#FFAC02' },
+    Lens: {
+        bgBlend: 'difference',
+        bgColor: '#041C1C',
+        bgOpacity: 1,
+        fgColor: '#FFFFFF',
+        fgOpacity: 0,
+        fillerOpacity: 0.033,
+        mgColor: '#ffe6cb',
+        mgOpacity: 1
+    }
+};
+export const LENS_5I = {
+    Globe: { innerColor: '#170d02', innerOpacity: 0.3, outerColor: '#FFAC02' },
+    Lens: {
+        bgBlend: 'multiply',
+        bgColor: '#170d02',
+        bgOpacity: 1,
+        fgColor: '#FFFFFF',
+        fgOpacity: 1,
+        fillerOpacity: 0.06,
+        mgColor: '#FFAC02',
+        mgOpacity: 1
+    }
+};
+export const lens0 = (l, g) => ({
+    Globe: { ...LENS_0.Globe, ...g },
+    Lens: { ...LENS_0.Lens, ...l }
+});
+// The Hermes light-mode look is produced by a fullscreen opaque-white
+// `mix-blend-mode: difference` foreground layer that inverts everything.
+// Colored lenses that want a "white + accent" look MUST be built from
+// LENS_5I, not LENS_0 — otherwise `bgBlend: 'difference'` + an opaque
+// colored bg + active fg inversion land halfway between dark and light
+// mode and produce a muddy warm wash instead of a clean inversion.
+export const lens5i = (l, g) => ({
+    Globe: { ...LENS_5I.Globe, ...g },
+    Lens: { ...LENS_5I.Lens, ...l }
+});
+// Accent colors are the *pre-inversion* source; after the difference FG
+// layer they read as their visual complement. e.g. `#FFAC02` (orange)
+// renders as blue #0053FD on screen — that's the default LENS_5I accent.
+export const LENSES = [
+    ['0', LENS_0],
+    ['1', lens0({ bgColor: '#0A1F1F' })],
+    ['2', lens0({ bgColor: '#0E0313', mgColor: '#e6cbff' })],
+    ['3', lens5i({ mgColor: '#FFAC02' })],
+    ['4', lens5i({ bgColor: '#0E0313', mgColor: '#FF5500' })],
+    ['5', lens0({ bgColor: '#1540B1', bgOpacity: 0.7 })],
+    ['5i', LENS_5I],
+    ['6', lens5i({ bgColor: '#170D02', mgColor: '#00E5FF' })]
+];
+export const applyLens = (preset, animate = false) => Object.entries(preset).forEach(([g, v]) => Object.entries(v).forEach(([k, val]) => setControlValue(g, k, val, { animate })));
+export const $lightMode = atom(true);
+export const toggleLens = () => {
+    const isLight = $lightMode.get();
+    const next = isLight ? LENS_0 : LENS_5I;
+    $lightMode.set(!isLight);
+    applyLens(next, true);
+};
+//# sourceMappingURL=lens.js.map

package/dist/ui/components/overlays/lens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lens.js","sourceRoot":"","sources":["../../../../src/ui/components/overlays/lens.ts"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { atom } from 'nanostores'\n\nimport { setControlValue } from '../../../hooks/use-smooth-controls'\n\nexport const LENS_0 = {\n  Globe: { innerColor: '#170d02', innerOpacity: 0.1, outerColor: '#FFAC02' },\n  Lens: {\n    bgBlend: 'difference',\n    bgColor: '#041C1C',\n    bgOpacity: 1,\n    fgColor: '#FFFFFF',\n    fgOpacity: 0,\n    fillerOpacity: 0.033,\n    mgColor: '#ffe6cb',\n    mgOpacity: 1\n  }\n}\n\nexport const LENS_5I = {\n  Globe: { innerColor: '#170d02', innerOpacity: 0.3, outerColor: '#FFAC02' },\n  Lens: {\n    bgBlend: 'multiply',\n    bgColor: '#170d02',\n    bgOpacity: 1,\n    fgColor: '#FFFFFF',\n    fgOpacity: 1,\n    fillerOpacity: 0.06,\n    mgColor: '#FFAC02',\n    mgOpacity: 1\n  }\n}\n\nexport const lens0 = (\n  l?: Partial<typeof LENS_0.Lens>,\n  g?: Partial<typeof LENS_0.Globe>\n): LensPreset => ({\n  Globe: { ...LENS_0.Globe, ...g },\n  Lens: { ...LENS_0.Lens, ...l }\n})\n\n// The Hermes light-mode look is produced by a fullscreen opaque-white\n// `mix-blend-mode: difference` foreground layer that inverts everything.\n// Colored lenses that want a \"white + accent\" look MUST be built from\n// LENS_5I, not LENS_0 — otherwise `bgBlend: 'difference'` + an opaque\n// colored bg + active fg inversion land halfway between dark and light\n// mode and produce a muddy warm wash instead of a clean inversion.\nexport const lens5i = (\n  l?: Partial<typeof LENS_5I.Lens>,\n  g?: Partial<typeof LENS_5I.Globe>\n): LensPreset => ({\n  Globe: { ...LENS_5I.Globe, ...g },\n  Lens: { ...LENS_5I.Lens, ...l }\n})\n\n// Accent colors are the *pre-inversion* source; after the difference FG\n// layer they read as their visual complement. e.g. `#FFAC02` (orange)\n// renders as blue #0053FD on screen — that's the default LENS_5I accent.\nexport const LENSES: [string, LensPreset][] = [\n  ['0', LENS_0],\n  ['1', lens0({ bgColor: '#0A1F1F' })],\n  ['2', lens0({ bgColor: '#0E0313', mgColor: '#e6cbff' })],\n  ['3', lens5i({ mgColor: '#FFAC02' })],\n  ['4', lens5i({ bgColor: '#0E0313', mgColor: '#FF5500' })],\n  ['5', lens0({ bgColor: '#1540B1', bgOpacity: 0.7 })],\n  ['5i', LENS_5I],\n  ['6', lens5i({ bgColor: '#170D02', mgColor: '#00E5FF' })]\n]\n\nexport const applyLens = (preset: LensPreset, animate = false) =>\n  Object.entries(preset).forEach(([g, v]) =>\n    Object.entries(v).forEach(([k, val]) =>\n      setControlValue(g, k, val, { animate })\n    )\n  )\n\nexport const $lightMode = atom(true)\n\nexport const toggleLens = () => {\n  const isLight = $lightMode.get()\n  const next = isLight ? LENS_0 : LENS_5I\n\n  $lightMode.set(!isLight)\n  applyLens(next, true)\n}\n\nexport interface LensPreset {\n  Globe: typeof LENS_0.Globe\n  Lens: typeof LENS_0.Lens\n}\n"]}

package/dist/ui/components/overlays/noise.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"noise.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/overlays/noise.tsx"],"names":[],"mappings":"AAqCA,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,UAAU,kDAiHrD;AAED,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B"}
+{"version":3,"file":"noise.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/overlays/noise.tsx"],"names":[],"mappings":"AAqCA,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,UAAU,kDA6HrD;AAED,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B"}