lensfx 0.1.0 → 0.1.2

package/dist/index.d.ts

@@ -1,44 +1,79 @@
 import React from 'react';
 
 /**
- * Aave Glass Rendering System - Types and Constants
- * Reverse-engineered directly from aave.com/design/building-glass-for-the-web
+ * lensfx — Engine Layer: Types & Constants
+ *
+ * Pure TypeScript — no React, no DOM. Can be imported in any environment.
  */
+/** All optical parameters that control how a single lens looks and distorts. */
 interface LensParams {
+    /** Lens width in pixels. */
     lensW: number;
+    /** Lens height in pixels. */
     lensH: number;
+    /** Lens corner radius in pixels. */
     borderRadius: number;
+    /** Refraction depth/strength — higher = more distortion. Range: 0–10. */
     depth: number;
+    /** Chromatic aberration split amount. 0 = monochromatic, 1 = full RGB split. */
     chromaAmount: number;
+    /** Horizontal displacement scale. 0 = no lateral displacement. */
     scaleX: number;
+    /** Vertical displacement scale. 0 = no vertical displacement. */
     scaleY: number;
+    /** Resolution of the displacement map canvas (power-of-two recommended). */
     mapSize: number;
+    /** Gaussian blur radius applied to the background behind the lens (px). */
     blurAmount: number;
+    /** If true, clips displacement strictly to the lens SDF boundary. */
     sdfBoundary: boolean;
+    /** If true, applies an erf-smoothed falloff at the lens edge. */
     edgeFalloff: boolean;
+    /** Additive brightness overlay inside the lens. Positive = lighter, negative = darker. Range: -1 to 1. */
     brightness: number;
+    /** Intensity of the specular highlight. Range: 0–3. */
     specularStrength: number;
+    /** Angle of the specular directional light in degrees. */
     specularRotation: number;
+    /** If true, uses dark (shadow) specular mode instead of bright. */
     specularDark: boolean;
+    /** Uniform tint applied inside the lens. Range: -1 (black) to 1 (white). */
     tint: number;
+    /** Strength of the inner glow band. Range: 0–1. */
     glowStrength: number;
+    /** Angular spread of the glow band, normalised. Range: 0–1. */
     glowSpread: number;
+    /** Exponent controlling glow falloff curve. Higher = sharper band. */
     glowExponent: number;
+    /** Strength of the edge specular ring (separate from inner glow). Range: 0–1. */
     edgeStrength: number;
+    /** Thickness of the edge specular ring in pixels. */
     edgeWidth: number;
+    /** Exponent controlling edge ring falloff curve. */
     edgeExponent: number;
+    /** Height of the ellipsoid dome above the lens surface in pixels. */
     domeDepth: number;
+    /** How much to reduce displacement magnitude at corners (0 = no splay, 1 = full splay). */
     splayAmount: number;
+    /** Box shadow applied to the lens container (outer drop shadow). */
     edgeShadow?: string;
+    /** Inset box shadow applied to the lens container. */
     edgeInsetShadow?: string;
+    /** Secondary rest-state shadow (e.g. when the slider thumb is at rest). */
     restEdgeShadow?: string;
 }
+/** Precomputed geometric constants for dome curvature. */
 interface DomeConstants {
+    /** Horizontal sphere radius for dome curvature. */
     Rx: number;
+    /** Vertical sphere radius for dome curvature. */
     Ry: number;
+    /** Normalised scale factor for the X gradient (trapezoidal integration). */
     scaleX: number;
+    /** Normalised scale factor for the Y gradient (trapezoidal integration). */
     scaleY: number;
 }
+/** Input to the synchronous displacement map generator. */
 interface MapGeneratorInput {
     lensHalfWidth: number;
     lensHalfHeight: number;
@@ -56,102 +91,106 @@ interface MapGeneratorInput {
     domeDepth: number;
     splayAmount: number;
 }
+/** Output from the displacement map generator. */
 interface MapGeneratorOutput {
+    /** PNG data URL of the generated displacement map. */
     dataUrl: string;
+    /** Time taken for the pixel loop, in milliseconds. */
     loopMs: number;
+    /** Time taken for canvas.toDataURL encoding, in milliseconds. */
     encodeMs: number;
 }
-interface MultiLensSlot {
-    filterEl: SVGFilterElement | null;
-    feDispEl: SVGFEDisplacementMapElement | null;
-    subSlots: SubSlot[];
-    assignedTo: HTMLElement | null;
-    version: number;
-    lastDispScale: string;
-    lastFilterW: string;
-    lastFilterH: string;
-}
-interface SubSlot {
-    feImageEl: SVGFEImageElement | null;
-    feColorMatrixEl: SVGFEColorMatrixElement | null;
-    feMaskEl: SVGFEImageElement | null;
-    feMaskColorMatrixEl: SVGFEColorMatrixElement | null;
-    assignedLensId: string | null;
-    lastHref: string;
-    lastX: string;
-    lastY: string;
-    lastW: string;
-    lastH: string;
-    lastColorMatrix: string;
-    lastMaskKey: string;
-    lastMaskColorMatrix: string;
-}
-interface SingleLensSlot {
-    filterEl: SVGFilterElement | null;
-    lensEls: SVGElement[];
-    dispEls: SVGFEDisplacementMapElement[];
-    mapMatrixEl: SVGFEColorMatrixElement | null;
-    feImageEl: SVGFEImageElement | null;
-    version: number;
-    assignedTo: HTMLElement | null;
-    assignedRect: DOMRect | null;
-}
+/** Zero-refraction baseline — all effects disabled. */
 declare const DEFAULT_LENS_PARAMS: LensParams;
-declare const AAVE_GLASS_SELECTOR: {
-    readonly container: "[data-aave-glass-container]";
-    readonly target: "[data-refraction-target]";
-};
+/** LensSwitch base optical parameters. */
 declare const SWITCH_GLASS_DEFAULTS: Partial<LensParams>;
 declare const SWITCH_DARK_OVERRIDES: Partial<LensParams>;
 declare const SWITCH_LIGHT_OVERRIDES: Partial<LensParams>;
+/** LensSlider base optical parameters. */
 declare const SLIDER_GLASS_DEFAULTS: Partial<LensParams>;
 declare const SLIDER_DARK_OVERRIDES: Partial<LensParams>;
 declare const SLIDER_LIGHT_OVERRIDES: Partial<LensParams>;
 declare const SLIDER_SAFARI_OVERRIDES: Partial<LensParams>;
 
 /**
- * Aave Glass Rendering System - Core Math & Displacement Map Generators
- * Reverse-engineered directly from aave.com/design/building-glass-for-the-web
+ * lensfx — Engine Layer: Core Mathematics & Displacement Map Generation
+ *
+ * Pure TypeScript — no React, no DOM references at module load time.
+ * DOM (canvas) is accessed only inside function bodies, never at import time,
+ * making this SSR-safe.
  */
 
 /**
- * Approximation of Gauss error function using hyperbolic tangent.
- * sqrt(pi) approx 1.7724538509
+ * Approximation of the Gauss error function using hyperbolic tangent.
+ *
+ * erf(x) ≈ tanh(√π · x)
+ *
+ * The constant √π ≈ 1.7724538509 ensures that the derivative at 0 equals
+ * 2/√π (matching the exact erf), giving a C∞ smooth clamping function that
+ * avoids branching and is monotone on (−∞, +∞).
  */
 declare function erf(x: number): number;
 /**
- * Computes dome curvature geometry constants for horizontal (Rx) and vertical (Ry) axes.
+ * Computes ellipsoid dome curvature geometry constants for the X and Y axes.
+ *
+ * The dome is modelled as a sphere of radius R that just touches both the
+ * centre and the edge of the lens:  R = (halfDim² + depth²) / (2·depth).
+ *
+ * @param domeDepth - maximum height of the dome above the lens plane (px)
+ * @param halfW     - half-width of the lens (px)
+ * @param halfH     - half-height of the lens (px)
  */
 declare function computeDomeConstants(domeDepth: number, halfW: number, halfH: number): DomeConstants;
 /**
- * Evaluates the gradient of the dome surface at a given offset from center.
+ * Evaluates the gradient (surface slope) of the dome at a given offset
+ * from the lens centre.  Returns a value in [0, 1] normalised by `scale`.
  */
 declare function domeGradient(pos: number, R: number, scale: number): number;
 /**
- * Generates the SVG feColorMatrix 4x5 transformation string to scale the displacement R and G channels.
- * Scales displacement around the neutral center (128 / 255 = 0.5).
+ * Builds an SVG feColorMatrix 4×5 matrix string that rescales the
+ * displacement map's R and G channels around the neutral midpoint (128/255 = 0.5).
+ *
+ * When scaleX ≠ scaleY the lens has asymmetric horizontal/vertical displacement
+ * and we normalise the larger axis to 1 so both axes are within [0, 255].
  */
 declare function colorMatrixValues(ratioX: number, ratioY: number): string;
 /**
- * Generates an SVG data URI of a rounded rectangle used as a CSS mask-image for lens blur/tint layers.
+ * Returns a memoised SVG rounded-rectangle mask as a data URI.
+ * Used as CSS `mask-image` on the backdrop-blur and tint layers to
+ * clip them to the lens shape without touching the filter graph.
  */
 declare function getSvgMaskDataUri(width: number, height: number, radius: number): {
     uri: string;
     key: string;
 };
 /**
- * Fast synchronous displacement map generator using 4-fold quadrant symmetry.
- * Computes top-left quadrant and writes into all 4 quadrants in parallel.
- * Reuses canvas and typed array memory across frames.
+ * Creates a stateful, synchronous displacement map generator with:
+ *   • 4-fold quadrant symmetry (75 % fewer pixel evaluations)
+ *   • Reusable canvas & ImageData to avoid GC pressure
+ *   • Cached dome gradient lookup table (recalculated only when geometry changes)
+ *
+ * Use for animated lenses where the map must update every frame in sync with
+ * Framer Motion values.  For static lenses, prefer `generateDisplacementMapAsync`.
+ *
+ * @param mapSize - side length of the square displacement map canvas (px)
  */
 declare function createDisplacementMapGeneratorSync(mapSize: number): {
+    /**
+     * Generate a new displacement map and return a PNG data URL.
+     * Reuses internal canvas memory; safe to call every animation frame.
+     */
     generate(input: MapGeneratorInput): MapGeneratorOutput;
+    /** Release canvas memory. Call in React cleanup (useEffect return). */
     dispose(): void;
 };
 /**
- * Asynchronous displacement map generator for static / resting lenses.
- * Processes 64 rows per frame, yielding via setTimeout(0) to avoid locking UI thread.
- * Returns a PNG Blob URL.
+ * Generates a displacement map asynchronously, processing 64 rows per
+ * animation frame via `setTimeout(0)` to avoid blocking the main thread.
+ *
+ * Returns a Blob Object URL (PNG).  Caller is responsible for calling
+ * `URL.revokeObjectURL` when the Lens unmounts.
+ *
+ * Use for static lenses where the map does not need to update every frame.
  */
 declare function generateDisplacementMapAsync(canvas: HTMLCanvasElement, params: {
     canvasSize: number;
@@ -172,6 +211,162 @@ declare function generateDisplacementMapAsync(canvas: HTMLCanvasElement, params:
     splayAmount?: number;
 }): Promise<string | null>;
 
+/**
+ * lensfx — WebGL Layer: VideoRefractionRenderer
+ *
+ * Full WebGL 1 video refraction engine — Safari fallback for live <video> frames
+ * which cannot be filtered by SVG feDisplacementMap in WebKit.
+ *
+ * Features:
+ * - Analytical circle and rounded-rect bar SDFs
+ * - Multi-control dominant lens tracking with press scaling
+ * - Separable 9-tap Gaussian blur pass (two-pass half-res FBO)
+ * - Chromatic aberration (R, G, B pass)
+ * - Adaptive specular & Apple-style vibrancy luminance correction
+ */
+/** Options for constructing a VideoRefractionRenderer. */
+interface VideoRendererOptions {
+    /** Canvas element to render into. */
+    canvas: HTMLCanvasElement;
+    /** Source video element to sample frames from. */
+    video: HTMLVideoElement;
+    /** Lens depth strength. Default: 2. */
+    depth?: number;
+    /** Chromatic aberration amount (0–1). Default: 0.5. */
+    chromaAmount?: number;
+    /** Angle of specular directional light (degrees). Default: 45. */
+    specularRotation?: number;
+    /** Specular highlight intensity. Default: 1. */
+    specularStrength?: number;
+}
+interface VideoLensConfig {
+    circles: Array<{
+        cx: number;
+        cy: number;
+        radius: number;
+        scale: number;
+        baseScale: number;
+        ratioX: number;
+        ratioY: number;
+    }>;
+    bar?: {
+        cx: number;
+        cy: number;
+        w: number;
+        h: number;
+        radius: number;
+        baseScale: number;
+        ratioX: number;
+        ratioY: number;
+    };
+    bbox: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    bboxSize: {
+        w: number;
+        h: number;
+    };
+    chromaAmount: number;
+    specStrength: number;
+    adaptStrength: number;
+    specLumaLow: number;
+    specLumaHigh: number;
+    hasBlur: boolean;
+}
+declare class VideoRefractionRenderer {
+    private gl;
+    private quadBuffer;
+    private blurProgram;
+    private refractionProgram;
+    private videoTexture;
+    private mapTexture;
+    private blurFboA;
+    private blurTexA;
+    private blurFboB;
+    private blurTexB;
+    private fboWidth;
+    private fboHeight;
+    constructor(canvas: HTMLCanvasElement);
+    setDisplacementMap(image: HTMLImageElement | HTMLCanvasElement): void;
+    private initBlurFBO;
+    render(video: HTMLVideoElement, config: VideoLensConfig): void;
+    dispose(): void;
+}
+
+/**
+ * lensfx — WebGL Layer: QRRefractionRenderer
+ *
+ * Full WebGL 2 (#version 300 es) interactive QR code refraction engine.
+ * Uses an O(1) uniform texture occupancy grid for real-time liquid distortion
+ * through a 33×33 QR matrix.
+ *
+ * Features:
+ * - WebGL 2 (#version 300 es)
+ * - O(1) dot occupancy texture lookup
+ * - Analytical eye rounded-rect SDFs with hover scaling
+ * - Attenuated displacement for eye corner anchors
+ * - Chromatic aberration (scaleR = 1 + 2*chroma, scaleG = 1 + 1*chroma, scaleB = 1)
+ */
+/** Options for constructing a QRRefractionRenderer. */
+interface QRRendererOptions {
+    /** Canvas element to render into. */
+    canvas: HTMLCanvasElement;
+    /** QR matrix data (boolean 33×33 grid, row-major). */
+    qrMatrix: boolean[][];
+    /** Lens depth strength. Default: 2. */
+    depth?: number;
+    /** Chromatic aberration amount (0–1). Default: 0.3. */
+    chromaAmount?: number;
+    /** Dot radius as a fraction of cell size. Default: 0.4. */
+    dotRadius?: number;
+}
+interface QREyeConfig {
+    center: [number, number];
+    half: [number, number, number];
+    radius: [number, number, number];
+    color: [number, number, number];
+    scale: number;
+}
+interface QRRendererInit {
+    canvas: HTMLCanvasElement;
+    size: number;
+    matrixLength: number;
+    occupancyMatrix: Uint8Array;
+    gridOriginUV: number;
+    cellUV: number;
+    dotRadius: number;
+    backgroundColor?: [number, number, number];
+}
+declare class QRRefractionRenderer {
+    private gl;
+    private program;
+    private quadBuffer;
+    private occupancyTexture;
+    private displacementTexture;
+    private paintingTexture;
+    private paintingColorTexture;
+    private matrixLength;
+    private gridOriginUV;
+    private cellUV;
+    private dotRadius;
+    private backgroundColor;
+    constructor(init: QRRendererInit);
+    setDisplacementMap(image: HTMLImageElement | HTMLCanvasElement): void;
+    render(params: {
+        displacementActive: boolean;
+        lensOrigin: [number, number];
+        lensSize: [number, number];
+        displacementScale: [number, number];
+        chromaAmount: number;
+        eyes: QREyeConfig[];
+        eyeRefractionScale?: number;
+    }): void;
+    dispose(): void;
+}
+
 interface AaveGlassProps {
     children?: React.ReactNode;
     lens?: Partial<LensParams>;
@@ -328,141 +523,4 @@ interface GlassToggleGroupProps {
 }
 declare function GlassToggleGroup({ options, value: controlledValue, defaultValue, onValueChange, lens, theme, className, }: GlassToggleGroupProps): React.JSX.Element;
 
-interface GlassPlaygroundProps {
-    initialParams?: Partial<LensParams>;
-    theme?: "light" | "dark";
-    className?: string;
-}
-declare function GlassPlayground({ initialParams, theme, className, }: GlassPlaygroundProps): React.JSX.Element;
-
-/**
- * Aave Video Player WebGL Refraction Engine
- * Reverse-engineered directly from aave.com/design/building-glass-for-the-web
- *
- * Implements GPU video refraction fallback for Safari and high-performance video controls.
- * Features:
- * - Analytical circle and rounded-rect bar SDFs
- * - Multi-control dominant lens tracking with press scaling
- * - Separable 9-tap Gaussian blur pass (two-pass half-res FBO)
- * - Chromatic aberration (R, G, B pass)
- * - Adaptive specular & Apple-style vibrancy luminance correction
- */
-declare const VERTEX_SHADER = "\nattribute vec2 a_pos;\nvarying vec2 v_uv;\nvoid main() {\n  // Flip Y so UV (0,0) = top-left, matching HTML/CSS coordinates.\n  v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);\n  gl_Position = vec4(a_pos, 0.0, 1.0);\n}\n";
-declare const BLUR_FRAGMENT_SHADER = "\nprecision highp float;\nuniform sampler2D u_source;\nuniform vec2 u_dir;\nvarying vec2 v_uv;\n\nvoid main() {\n  vec4 c = texture2D(u_source, v_uv) * 0.2042;\n  c += (texture2D(u_source, v_uv + 1.0 * u_dir) + texture2D(u_source, v_uv - 1.0 * u_dir)) * 0.1801;\n  c += (texture2D(u_source, v_uv + 2.0 * u_dir) + texture2D(u_source, v_uv - 2.0 * u_dir)) * 0.1240;\n  c += (texture2D(u_source, v_uv + 3.0 * u_dir) + texture2D(u_source, v_uv - 3.0 * u_dir)) * 0.0663;\n  c += (texture2D(u_source, v_uv + 4.0 * u_dir) + texture2D(u_source, v_uv - 4.0 * u_dir)) * 0.0276;\n  gl_FragColor = c;\n}\n";
-declare const REFRACTION_FRAGMENT_SHADER = "\n#extension GL_OES_standard_derivatives : enable\nprecision highp float;\n\nuniform sampler2D u_video;\nuniform sampler2D u_map;\nuniform sampler2D u_blurred;\nuniform float u_baseScale[3];\nuniform float u_ratioX[3];\nuniform float u_ratioY[3];\nuniform float u_chromaAmount;\nuniform float u_specStrength;\nuniform float u_adaptStrength;\nuniform float u_specLumaLow;\nuniform float u_specLumaHigh;\nuniform float u_hasBlur;\nuniform vec4 u_bbox;       // (x, y, w, h) normalised, y=0 at top\nuniform vec3 u_circles[3]; // (cx, cy, radius) in bbox pixel space\nuniform float u_scale[3];  // per-circle geometric press scale (1 = unscaled)\nuniform vec4 u_bar;        // (cx, cy, w, h) in bbox pixel space; w<=0 means inactive\nuniform float u_barRadius; // corner radius for the rounded-rect bar lens\nuniform float u_barBaseScale;\nuniform float u_barRatioX;\nuniform float u_barRatioY;\nuniform vec2 u_bboxSize;   // bbox (width, height) in pixels\n\nvarying vec2 v_uv;\n\nvoid main() {\n  vec2 uv = v_uv;\n  vec2 bMin = u_bbox.xy;\n  vec2 bSize = u_bbox.zw;\n  vec2 bMax = bMin + bSize;\n\n  // Outside bounding box -> pass-through video\n  if (uv.x < bMin.x || uv.x > bMax.x || uv.y < bMin.y || uv.y > bMax.y) {\n    gl_FragColor = texture2D(u_video, uv);\n    return;\n  }\n\n  // Map fragment UV -> displacement texture UV\n  vec2 mUV = (uv - bMin) / bSize;\n\n  // Analytical SDF mask (pixel-perfect at any resolution). Tracks the\n  // dominant region so per-region scale/ratio can be picked up via the\n  // loop-constant index (safe in WebGL 1). After the circle loop we test the\n  // rounded-rect \"bar\" region (when active) and take whichever has the\n  // larger mask value. domCenter/domScale track the dominant lens so the\n  // displacement map is sampled in its (press-)scaled space below.\n  vec2 pxPos = mUV * u_bboxSize;\n  float mask = 0.0;\n  float baseScale = 0.0;\n  float ratioX = 0.0;\n  float ratioY = 0.0;\n\n  // Map-sample scale assignment, tracked SEPARATELY from the tight SDF mask: a\n  // pixel adopts a circle's press scale across the union of its original and\n  // scaled radius (R * max(1, s)). That way the annulus a shrunk lens vacates\n  // samples empty space instead of leaving the original rim stuck behind.\n  // domScale = 1 (bar + background) -> identity sample.\n  vec2 domCenter = pxPos;\n  float domScale = 1.0;\n  float domDist = 1.0; // nearest normalised assignment distance (<1 = inside)\n\n  for (int i = 0; i < 3; i++) {\n    if (u_circles[i].z < 0.1) continue; // skip inactive circles\n    float s = max(u_scale[i], 0.001);\n    float R = u_circles[i].z;\n    float rho = length(pxPos - u_circles[i].xy);\n\n    // Visible lens SDF at the scaled radius -> blur / specular gating.\n    float dist = rho - R * s;\n    float aa = fwidth(dist);\n    float m = 1.0 - smoothstep(-aa, aa, dist);\n    if (m > mask) {\n      mask = m;\n      baseScale = u_baseScale[i];\n      ratioX = u_ratioX[i];\n      ratioY = u_ratioY[i];\n    }\n\n    // Scale assignment over max(original, scaled) radius, PLUS a small FIXED\n    // pixel margin so the region boundary clears the map's hard content edge at\n    // r = R. A *fractional* margin scales with R, so a big lens (play) would\n    // swallow its neighbours' regions and drag their rings in. 4px clears the\n    // edge's AA band without ever reaching the gap to the next control.\n    float nd = rho / (R * max(1.0, s) + 4.0);\n    if (nd < domDist) {\n      domDist = nd;\n      domCenter = u_circles[i].xy;\n      domScale = s;\n    }\n  }\n\n  // Bar (rounded-rect) SDF - only when u_bar.zw > 0. The bar never scales, so\n  // it keeps the identity map sample (domScale stays 1 for bar + background).\n  if (u_bar.z > 0.1 && u_bar.w > 0.1) {\n    vec2 q = abs(pxPos - u_bar.xy) - u_bar.zw * 0.5 + vec2(u_barRadius);\n    float barDist =\n      length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - u_barRadius;\n    float aaBar = fwidth(barDist);\n    float mBar = 1.0 - smoothstep(-aaBar, aaBar, barDist);\n    if (mBar > mask) {\n      mask = mBar;\n      baseScale = u_barBaseScale;\n      ratioX = u_barRatioX;\n      ratioY = u_barRatioY;\n    }\n  }\n\n  // Sample the displacement map at the dominant lens's scaled coordinate, so a\n  // per-lens press scale shrinks the baked pattern around its center in\n  // lockstep with the SDF radius above. domScale = 1 -> identity (unscaled).\n  vec2 scaledPx = domCenter + (pxPos - domCenter) / domScale;\n  vec4 d = texture2D(u_map, scaledPx / u_bboxSize);\n\n  // mapMatrix (feColorMatrix equivalent)\n  float sr = d.r * ratioX + 0.5 * (1.0 - ratioX);\n  float sg = d.g * ratioY + 0.5 * (1.0 - ratioY);\n\n  // Displacement offset in full-video UV space\n  vec2 off = vec2(sr - 0.5, sg - 0.5) * baseScale;\n\n  // Choose source: blurred or raw video\n  // Inside lens -> blurred (if blur active), outside lens -> raw\n  // Blend by mask so the transition at edges is clean\n  vec4 color;\n  if (u_chromaAmount > 0.001) {\n    float sR = 1.0 + u_chromaAmount * 0.2;\n    float sG = 1.0 + u_chromaAmount * 0.1;\n    if (u_hasBlur > 0.5) {\n      color.r = mix(\n        texture2D(u_video, clamp(uv + off * sR, 0.0, 1.0)).r,\n        texture2D(u_blurred, clamp(uv + off * sR, 0.0, 1.0)).r,\n        mask\n      );\n      color.g = mix(\n        texture2D(u_video, clamp(uv + off * sG, 0.0, 1.0)).g,\n        texture2D(u_blurred, clamp(uv + off * sG, 0.0, 1.0)).g,\n        mask\n      );\n      color.b = mix(\n        texture2D(u_video, clamp(uv + off, 0.0, 1.0)).b,\n        texture2D(u_blurred, clamp(uv + off, 0.0, 1.0)).b,\n        mask\n      );\n    } else {\n      color.r = texture2D(u_video, clamp(uv + off * sR, 0.0, 1.0)).r;\n      color.g = texture2D(u_video, clamp(uv + off * sG, 0.0, 1.0)).g;\n      color.b = texture2D(u_video, clamp(uv + off,       0.0, 1.0)).b;\n    }\n    color.a = 1.0;\n  } else {\n    vec2 duv = clamp(uv + off, 0.0, 1.0);\n    if (u_hasBlur > 0.5) {\n      color = mix(texture2D(u_video, duv), texture2D(u_blurred, duv), mask);\n    } else {\n      color = texture2D(u_video, duv);\n    }\n  }\n\n  // Adaptive specular + brightness (Apple-style vibrancy)\n  // Compute perceptual luminance of the displaced video sample\n  float luma = dot(color.rgb, vec3(0.299, 0.587, 0.114));\n\n  // Specular: blend between additive (dark bg) and multiplicative (bright bg)\n  float spec = d.b - 0.502;\n  float lumaLo = min(u_specLumaLow, u_specLumaHigh);\n  float lumaHi = max(u_specLumaLow, u_specLumaHigh);\n  float darkBlend = smoothstep(lumaLo, lumaHi, luma);\n  vec3 specAdd = color.rgb + spec * u_specStrength;\n  vec3 specMul = color.rgb * (1.0 - spec * u_specStrength);\n  color.rgb = mix(specAdd, specMul, darkBlend);\n  color.rgb = max(color.rgb, vec3(0.0));\n\n  // Brightness: pull toward mid-gray - darkens bright areas, brightens dark\n  float correction = (0.5 - luma) * u_adaptStrength * mask;\n  color.rgb += correction;\n\n  gl_FragColor = color;\n}\n";
-interface VideoLensConfig {
-    circles: Array<{
-        cx: number;
-        cy: number;
-        radius: number;
-        scale: number;
-        baseScale: number;
-        ratioX: number;
-        ratioY: number;
-    }>;
-    bar?: {
-        cx: number;
-        cy: number;
-        w: number;
-        h: number;
-        radius: number;
-        baseScale: number;
-        ratioX: number;
-        ratioY: number;
-    };
-    bbox: {
-        x: number;
-        y: number;
-        w: number;
-        h: number;
-    };
-    bboxSize: {
-        w: number;
-        h: number;
-    };
-    chromaAmount: number;
-    specStrength: number;
-    adaptStrength: number;
-    specLumaLow: number;
-    specLumaHigh: number;
-    hasBlur: boolean;
-}
-declare class VideoRefractionRenderer {
-    private gl;
-    private quadBuffer;
-    private blurProgram;
-    private refractionProgram;
-    private videoTexture;
-    private mapTexture;
-    private blurFboA;
-    private blurTexA;
-    private blurFboB;
-    private blurTexB;
-    private fboWidth;
-    private fboHeight;
-    constructor(canvas: HTMLCanvasElement);
-    setDisplacementMap(image: HTMLImageElement | HTMLCanvasElement): void;
-    private initBlurFBO;
-    render(video: HTMLVideoElement, config: VideoLensConfig): void;
-    dispose(): void;
-}
-
-/**
- * Aave QR Code WebGL 2 Interactive Refraction Engine
- * Reverse-engineered directly from aave.com/design/building-glass-for-the-web
- *
- * Implements GPU canvas-drawn QR code refraction on tap.
- * Features:
- * - WebGL 2 (#version 300 es)
- * - O(1) dot occupancy texture lookup
- * - Analytical eye rounded-rect SDFs with hover scaling
- * - Attenuated displacement for eye corner anchors
- * - Chromatic aberration (scaleR = 1 + 2*chroma, scaleG = 1 + 1*chroma, scaleB = 1)
- */
-declare const QR_VERTEX_SHADER = "#version 300 es\nin vec2 a_position;\nout vec2 v_uv;\n\nvoid main() {\n  v_uv = (a_position * 0.5) + 0.5;\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n";
-declare const QR_FRAGMENT_SHADER = "#version 300 es\nprecision highp float;\nprecision highp sampler2D;\n\nin vec2 v_uv;\nout vec4 fragColor;\n\nuniform float u_dotRadius;\nuniform vec3 u_backgroundColor;\nuniform sampler2D u_PaintingTexture;\n\n// QR dot grid for the O(1) occupancy lookup (replaces a per-pixel scan over\n// every dot). Occupancy is matrixLength x matrixLength, R8, 0/1 per module.\nuniform sampler2D u_occupancyTexture;\nuniform float u_gridOriginUV; // padding / size, in UV\nuniform float u_cellUV;       // cellSize / size, in UV\nuniform float u_invCellUV;    // 1 / cellUV - avoids a per-pixel divide\nuniform int u_matrixLength;\n\nuniform sampler2D u_displacementMap;\nuniform sampler2D u_paintingColorTexture;\nuniform int u_displacementActive;\nuniform vec2 u_lensOrigin;\nuniform vec2 u_lensSize;\nuniform vec2 u_displacementScale;\nuniform float u_chromaAmount;\n\n// Eye uniforms (3 corner finder groups)\nuniform vec2 u_eyeCenter[3];\nuniform vec3 u_eyeHalf[3];    // x=outer, y=mid, z=inner half-size\nuniform vec3 u_eyeRadius[3];  // x=outer, y=mid, z=inner corner radius\nuniform vec3 u_eyeColor[3];   // fill color per group (animated)\nuniform float u_eyeScale[3];  // hover scale per group\nuniform float u_eyeRefractionScale; // 0-1 multiplier for eye displacement\n\n// QR dots sit on a uniform grid, and the radius (~0.35 of a cell) never\n// spills past a cell boundary, so the nearest dot is always the one in pos's\n// own cell. Map pos -> module (i,j), check occupancy, then test distance to\n// that module's center.\nfloat testDot(vec2 pos, float r2) {\n  int i = int(floor((pos.x - u_gridOriginUV) * u_invCellUV));\n  int j = int(floor((pos.y - u_gridOriginUV) * u_invCellUV));\n  if (i < 0 || i >= u_matrixLength || j < 0 || j >= u_matrixLength)\n    return 1.0;\n  if (texelFetch(u_occupancyTexture, ivec2(i, j), 0).r < 0.5)\n    return 1.0;\n  vec2 c = vec2(u_gridOriginUV) + (vec2(float(i), float(j)) + 0.5) * u_cellUV;\n  vec2 d = pos - c;\n  return dot(d, d) < r2 ? 0.0 : 1.0;\n}\n\nfloat roundedRectSDF(vec2 p, float half_, float radius) {\n  vec2 d = abs(p) - vec2(half_) + vec2(radius);\n  return length(max(d, vec2(0.0))) + min(max(d.x, d.y), 0.0) - radius;\n}\n\n// Test all eye groups. Returns vec4(color, 1.0) if inside an eye, vec4(0) if not.\nvec4 testEyes(vec2 pos) {\n  for (int g = 0; g < 3; g++) {\n    vec2 local = (pos - u_eyeCenter[g]) / u_eyeScale[g];\n    if (roundedRectSDF(local, u_eyeHalf[g].z, u_eyeRadius[g].z) < 0.0)\n      return vec4(u_eyeColor[g], 1.0);\n    if (roundedRectSDF(local, u_eyeHalf[g].y, u_eyeRadius[g].y) < 0.0)\n      return vec4(u_backgroundColor, 1.0);\n    if (roundedRectSDF(local, u_eyeHalf[g].x, u_eyeRadius[g].x) < 0.0)\n      return vec4(u_eyeColor[g], 1.0);\n  }\n  return vec4(0.0);\n}\n\n// Test scene (eyes + dots) at a position, returning color for a non-displaced pixel.\n// Returns vec4(color, 1.0) for solid, vec4(0, 0, 0, -1.0) for dot hole (discard).\nvec4 sampleStatic(vec2 pos, float r2) {\n  vec4 eye = testEyes(pos);\n  if (eye.a > 0.5) return eye;\n  float hole = testDot(pos, r2);\n  if (hole < 0.5) return vec4(0.0, 0.0, 0.0, -1.0);\n  return vec4(u_backgroundColor, 1.0);\n}\n\nvoid main() {\n  vec2 uv = vec2(v_uv.x, 1.0 - v_uv.y);\n  float paint = texture(u_PaintingTexture, uv).r;\n  float r2 = pow(u_dotRadius * (1.0 - paint), 2.0);\n\n  if (u_displacementActive == 0) {\n    vec4 s = sampleStatic(uv, r2);\n    if (s.a < 0.0) discard;\n    fragColor = s;\n    return;\n  }\n\n  vec2 lensUV = (uv - u_lensOrigin) / u_lensSize;\n  bool insideLens = lensUV.x >= 0.0 && lensUV.x <= 1.0 &&\n                    lensUV.y >= 0.0 && lensUV.y <= 1.0;\n\n  if (!insideLens) {\n    vec4 s = sampleStatic(uv, r2);\n    if (s.a < 0.0) discard;\n    fragColor = s;\n    return;\n  }\n\n  vec4 dispSample = texture(u_displacementMap, lensUV);\n  if (dispSample.a < 0.01) {\n    vec4 s = sampleStatic(uv, r2);\n    if (s.a < 0.0) discard;\n    fragColor = s;\n    return;\n  }\n  vec2 disp = (dispSample.rg - 0.5) * u_displacementScale;\n\n  float scaleR = 1.0 + u_chromaAmount * 2.0;\n  float scaleG = 1.0 + u_chromaAmount * 1.0;\n\n  vec2 uvR = uv + disp * scaleR;\n  vec2 uvG = uv + disp * scaleG;\n  vec2 uvB = uv + disp;\n\n  // Attenuated displacement for eyes\n  vec2 eyeDisp = disp * u_eyeRefractionScale;\n  vec2 eyeUvR = uv + eyeDisp * scaleR;\n  vec2 eyeUvG = uv + eyeDisp * scaleG;\n  vec2 eyeUvB = uv + eyeDisp;\n\n  // Per-channel: test eyes at attenuated displacement, dots at full displacement\n  vec4 eyeR = testEyes(eyeUvR);\n  vec4 eyeG = testEyes(eyeUvG);\n  vec4 eyeB = testEyes(eyeUvB);\n\n  float r, g, b;\n\n  if (eyeR.a > 0.5) {\n    r = eyeR.r;\n  } else {\n    float holeR = testDot(uvR, r2);\n    float paintR = texture(u_paintingColorTexture, uvR).r;\n    r = mix(paintR, u_backgroundColor.r, holeR);\n  }\n\n  if (eyeG.a > 0.5) {\n    g = eyeG.g;\n  } else {\n    float holeG = testDot(uvG, r2);\n    float paintG = texture(u_paintingColorTexture, uvG).g;\n    g = mix(paintG, u_backgroundColor.g, holeG);\n  }\n\n  if (eyeB.a > 0.5) {\n    b = eyeB.b;\n  } else {\n    float holeB = testDot(uvB, r2);\n    float paintB = texture(u_paintingColorTexture, uvB).b;\n    b = mix(paintB, u_backgroundColor.b, holeB);\n  }\n\n  fragColor = vec4(r, g, b, 1.0);\n}\n";
-interface QREyeConfig {
-    center: [number, number];
-    half: [number, number, number];
-    radius: [number, number, number];
-    color: [number, number, number];
-    scale: number;
-}
-interface QRRendererInit {
-    canvas: HTMLCanvasElement;
-    size: number;
-    matrixLength: number;
-    occupancyMatrix: Uint8Array;
-    gridOriginUV: number;
-    cellUV: number;
-    dotRadius: number;
-    backgroundColor?: [number, number, number];
-}
-declare class QRRefractionRenderer {
-    private gl;
-    private program;
-    private quadBuffer;
-    private occupancyTexture;
-    private displacementTexture;
-    private paintingTexture;
-    private paintingColorTexture;
-    private matrixLength;
-    private gridOriginUV;
-    private cellUV;
-    private dotRadius;
-    private backgroundColor;
-    constructor(init: QRRendererInit);
-    setDisplacementMap(image: HTMLImageElement | HTMLCanvasElement): void;
-    render(params: {
-        displacementActive: boolean;
-        lensOrigin: [number, number];
-        lensSize: [number, number];
-        displacementScale: [number, number];
-        chromaAmount: number;
-        eyes: QREyeConfig[];
-        eyeRefractionScale?: number;
-    }): void;
-    dispose(): void;
-}
-
-export { AAVE_GLASS_SELECTOR, AaveGlass, type AaveGlassProps, BLUR_FRAGMENT_SHADER, DEFAULT_LENS_PARAMS, type DomeConstants, GlassPlayground, type GlassPlaygroundProps, GlassSlider, type GlassSliderProps, GlassSwitch, type GlassSwitchProps, GlassToggleGroup, type GlassToggleGroupProps, type LensParams, type MapGeneratorInput, type MapGeneratorOutput, type MultiLensSlot, type QREyeConfig, QRRefractionRenderer, type QRRendererInit, QR_FRAGMENT_SHADER, QR_VERTEX_SHADER, REFRACTION_FRAGMENT_SHADER, SLIDER_DARK_OVERRIDES, SLIDER_GLASS_DEFAULTS, SLIDER_LIGHT_OVERRIDES, SLIDER_SAFARI_OVERRIDES, SWITCH_DARK_OVERRIDES, SWITCH_GLASS_DEFAULTS, SWITCH_LIGHT_OVERRIDES, type SingleLensSlot, type SubSlot, type ToggleOption, VERTEX_SHADER, type VideoLensConfig, VideoRefractionRenderer, colorMatrixValues, computeDomeConstants, createDisplacementMapGeneratorSync, domeGradient, erf, generateDisplacementMapAsync, getSvgMaskDataUri };
+export { DEFAULT_LENS_PARAMS, type DomeConstants, AaveGlass as Lens, type LensParams, type AaveGlassProps as LensProps, GlassSlider as LensSlider, type GlassSliderProps as LensSliderProps, GlassSwitch as LensSwitch, type GlassSwitchProps as LensSwitchProps, GlassToggleGroup as LensToggleGroup, type GlassToggleGroupProps as LensToggleGroupProps, type MapGeneratorInput, type MapGeneratorOutput, QRRefractionRenderer, type QRRendererOptions, SLIDER_DARK_OVERRIDES, SLIDER_GLASS_DEFAULTS, SLIDER_LIGHT_OVERRIDES, SLIDER_SAFARI_OVERRIDES, SWITCH_DARK_OVERRIDES, SWITCH_GLASS_DEFAULTS, SWITCH_LIGHT_OVERRIDES, type ToggleOption, VideoRefractionRenderer, type VideoRendererOptions, colorMatrixValues, computeDomeConstants, createDisplacementMapGeneratorSync, domeGradient, erf, generateDisplacementMapAsync, getSvgMaskDataUri };