@pathscale/ui 1.2.10 → 1.3.0

package/dist/components/metal-border/engine/glow/glow.js

@@ -0,0 +1,246 @@
+import { EXTRA_SEGMENTS, HALO_SEGMENTS } from "../perfConfig.js";
+import { sampleShaderLumAt, sampleShaderRGBAt, sampleShaderRGBChromatic } from "../renderer/sampling.js";
+import { ease, tween, tweenStart, tweenTick } from "../tween.js";
+import { hsvToRgb, rgbToHsv } from "../color.js";
+import { buildPerimTable, buildStaticBlobPath, buildSvgMarkup, rrPerim, sampleAtArc, shapePerim, smoothstep, tangentAngleAtArc } from "./geometry.js";
+const FADE_RATE = 0.00875;
+const LO = 0.08, HI = 0.32;
+const RELOCATE_DELTA = 0.05;
+const MIN_DWELL_MS = 3000;
+const PEAK_OP = 0.85, BASE_OP = 0.34;
+const RELOC_FADE_MS = 1500;
+const WANDER_RANGE = 15, WANDER_LERP = 0.0075, WANDER_RETARGET = 120;
+const INSET = 1.5;
+const HALO_HALFLEN = 7.8;
+const EXTRA_HALFLEN = 9.13952, EXTRA_OUTWARD = 1.0;
+const EXTRA_SCALE = 1 / 3;
+const HALO_OP_MUL = 0.8;
+const EXTRA_INTENSITY = 3.51;
+const TINT_HOLD_MS = 2000, TINT_FADE_MS = 400;
+const LT_SAT_BOOST = 2.625, LT_VAL_MULT = 1.008, LT_MIN_VAL = 0.31;
+const REF_W = 140, REF_H = 40, REF_R = 20;
+let glowIdSeq = 0;
+const _pt = {
+    x: 0,
+    y: 0
+};
+function injectGlow(container, opts) {
+    const p = `mfxg_${++glowIdSeq}`;
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('class', 'metal-fx-glow-svg');
+    svg.setAttribute('preserveAspectRatio', 'none');
+    svg.setAttribute('viewBox', `0 0 ${opts.width} ${opts.height}`);
+    svg.innerHTML = buildSvgMarkup(opts, p);
+    container.appendChild(svg);
+    const q = (id)=>svg.querySelector(`#${p}_${id}`);
+    const haloGroup = q('h');
+    const haloInner = q('hI');
+    const extraGroup = q('e');
+    const extraInner = q('eI');
+    const fadeCircle = q('fc');
+    const ratio = shapePerim(opts.width, opts.height, opts.cornerRadius, opts.kind) / rrPerim(REF_W, REF_H, REF_R);
+    const haloHL = Math.max(1, HALO_HALFLEN * ratio);
+    const extraHL = Math.max(0.6, EXTRA_HALFLEN * EXTRA_SCALE * ratio);
+    const haloD = buildStaticBlobPath(haloHL, HALO_SEGMENTS);
+    const extraD = buildStaticBlobPath(extraHL, EXTRA_SEGMENTS);
+    const haloPaths = [
+        q('pXl'),
+        q('pLg'),
+        q('pMd'),
+        q('pSm')
+    ];
+    const extraPaths = [
+        q('eO'),
+        q('eC')
+    ];
+    for (const path of haloPaths)path.setAttribute('d', haloD);
+    for (const path of extraPaths)path.setAttribute('d', extraD);
+    haloInner.style.transformOrigin = '0 0';
+    extraInner.style.transformOrigin = '0 0';
+    haloInner.style.willChange = 'transform';
+    extraInner.style.willChange = 'transform';
+    haloInner.style.transition = 'transform 100ms linear';
+    extraInner.style.transition = 'transform 100ms linear';
+    haloGroup.style.willChange = 'opacity';
+    extraGroup.style.willChange = 'opacity';
+    haloGroup.style.transition = 'opacity 100ms linear';
+    extraGroup.style.transition = 'opacity 100ms linear';
+    fadeCircle.style.willChange = 'transform';
+    return {
+        svg,
+        haloGroup,
+        haloInner,
+        extraGroup,
+        extraInner,
+        fadeCircle,
+        width: opts.width,
+        height: opts.height,
+        cornerRadius: opts.cornerRadius,
+        kind: opts.kind,
+        scale: opts.scale ?? 1,
+        perim: buildPerimTable(opts),
+        currentIdx: 0,
+        appearedAt: 0,
+        glowOpacity: 0,
+        relocTween: null,
+        relocNextIdx: -1,
+        wanderS: 0,
+        wanderTargetS: 0,
+        wanderFrames: 0,
+        tintFrom: {
+            r: 255,
+            g: 255,
+            b: 255
+        },
+        tintTarget: {
+            r: 255,
+            g: 255,
+            b: 255
+        },
+        tintTween: null,
+        tintHoldUntil: 0,
+        lastHaloStroke: '',
+        lastExtraStroke: ''
+    };
+}
+function updateGlow(h, inst, nowMs, strengthMul, theme = 'dark') {
+    const { width: W, height: H, cornerRadius: R, perim } = h;
+    if (0 === perim.length) return;
+    const halfWin = 2;
+    let maxLum = -1, maxIdx = h.currentIdx, curLum = 0;
+    for(let i = 0; i < perim.length; i++){
+        const pt = perim[i];
+        const lum = sampleShaderLumAt(inst, pt.x, pt.y, halfWin);
+        if (lum > maxLum) {
+            maxLum = lum;
+            maxIdx = i;
+        }
+        if (i === h.currentIdx) curLum = lum;
+    }
+    const dwellActive = h.appearedAt > 0 && nowMs - h.appearedAt < MIN_DWELL_MS;
+    const targetOp = BASE_OP + (PEAK_OP - BASE_OP) * smoothstep(LO, HI, curLum);
+    const rivalDominates = !dwellActive && maxLum - curLum > RELOCATE_DELTA;
+    if (!h.relocTween || h.relocTween.done) if (0 === h.appearedAt) {
+        h.currentIdx = maxIdx;
+        h.appearedAt = nowMs;
+        h.wanderS = 0;
+        h.wanderTargetS = 0;
+        h.wanderFrames = 0;
+        h.relocTween = tween(0, targetOp, RELOC_FADE_MS, ease.smoothstep);
+        tweenStart(h.relocTween, nowMs);
+    } else if (h.relocTween?.done && 0 === h.relocTween.to) {
+        h.currentIdx = h.relocNextIdx;
+        h.appearedAt = nowMs;
+        h.wanderS = 0;
+        h.wanderTargetS = 0;
+        h.wanderFrames = 0;
+        const np = perim[h.currentIdx];
+        const nl = sampleShaderLumAt(inst, np.x, np.y, halfWin);
+        const fadeInTarget = BASE_OP + (PEAK_OP - BASE_OP) * smoothstep(LO, HI, nl);
+        h.relocTween = tween(0, fadeInTarget, RELOC_FADE_MS, ease.smoothstep);
+        tweenStart(h.relocTween, nowMs);
+    } else if (rivalDominates) {
+        h.relocNextIdx = maxIdx;
+        h.relocTween = tween(h.glowOpacity, 0, RELOC_FADE_MS, ease.smoothstep);
+        tweenStart(h.relocTween, nowMs);
+    } else h.glowOpacity += (targetOp - h.glowOpacity) * FADE_RATE;
+    if (h.relocTween) h.glowOpacity = tweenTick(h.relocTween, nowMs);
+    h.glowOpacity = Math.max(0, Math.min(1, h.glowOpacity));
+    const ratio = shapePerim(W, H, R, h.kind) / rrPerim(REF_W, REF_H, REF_R);
+    const wanderRange = WANDER_RANGE * ratio;
+    if (h.wanderFrames++ >= WANDER_RETARGET) {
+        h.wanderTargetS = (2 * Math.random() - 1) * wanderRange;
+        h.wanderFrames = 0;
+    }
+    h.wanderS += (h.wanderTargetS - h.wanderS) * WANDER_LERP;
+    const blobArc = perim[h.currentIdx].arc + h.wanderS;
+    const insetS = INSET * h.scale;
+    sampleAtArc(blobArc, W, H, R, insetS, 0, h.kind, _pt);
+    const blobX = _pt.x, blobY = _pt.y;
+    const tangent = tangentAngleAtArc(blobArc, W, H, R, insetS, h.kind);
+    const tx = `translate(${blobX.toFixed(3)}px,${blobY.toFixed(3)}px) rotate(${tangent.toFixed(4)}rad)`;
+    h.haloInner.style.transform = tx;
+    const extraOut = EXTRA_OUTWARD * ratio * h.scale;
+    sampleAtArc(blobArc, W, H, R, insetS, extraOut, h.kind, _pt);
+    h.extraInner.style.transform = `translate(${_pt.x.toFixed(3)}px,${_pt.y.toFixed(3)}px) rotate(${tangent.toFixed(4)}rad)`;
+    h.fadeCircle.style.transform = `translate(${_pt.x.toFixed(3)}px,${_pt.y.toFixed(3)}px)`;
+    const light = 'light' === theme;
+    const samp = light ? sampleShaderRGBChromatic(inst, blobX, blobY, halfWin) : sampleShaderRGBAt(inst, blobX, blobY, halfWin);
+    if (h.tintTween) {
+        if (h.tintTween.done) {
+            if (light) {
+                h.tintFrom = {
+                    r: h.tintFrom.r + (h.tintTarget.r - h.tintFrom.r) * h.tintTween.val,
+                    g: h.tintFrom.g + (h.tintTarget.g - h.tintFrom.g) * h.tintTween.val,
+                    b: h.tintFrom.b + (h.tintTarget.b - h.tintFrom.b) * h.tintTween.val
+                };
+                h.tintTarget = {
+                    ...samp
+                };
+                h.tintTween = tween(0, 1, TINT_FADE_MS);
+                tweenStart(h.tintTween, nowMs);
+            } else if (nowMs >= h.tintHoldUntil) {
+                h.tintFrom = {
+                    ...h.tintTarget
+                };
+                h.tintTarget = {
+                    ...samp
+                };
+                h.tintTween = tween(0, 1, TINT_FADE_MS);
+                tweenStart(h.tintTween, nowMs);
+                h.tintHoldUntil = nowMs + TINT_HOLD_MS;
+            }
+        }
+    } else {
+        h.tintFrom = {
+            ...samp
+        };
+        h.tintTarget = {
+            ...samp
+        };
+        h.tintTween = tween(0, 1, TINT_FADE_MS);
+        tweenStart(h.tintTween, nowMs);
+        h.tintHoldUntil = light ? 0 : nowMs + TINT_HOLD_MS;
+    }
+    tweenTick(h.tintTween, nowMs);
+    const ft = h.tintTween.val;
+    let tR, tG, tB;
+    if (light) {
+        tR = Math.round(h.tintFrom.r + (h.tintTarget.r - h.tintFrom.r) * ft);
+        tG = Math.round(h.tintFrom.g + (h.tintTarget.g - h.tintFrom.g) * ft);
+        tB = Math.round(h.tintFrom.b + (h.tintTarget.b - h.tintFrom.b) * ft);
+    } else {
+        const hR = h.tintFrom.r + (h.tintTarget.r - h.tintFrom.r) * ft;
+        const hG = h.tintFrom.g + (h.tintTarget.g - h.tintFrom.g) * ft;
+        const hB = h.tintFrom.b + (h.tintTarget.b - h.tintFrom.b) * ft;
+        const peak = Math.max(hR, hG, hB) || 1;
+        tR = Math.round(hR / peak * 255);
+        tG = Math.round(hG / peak * 255);
+        tB = Math.round(hB / peak * 255);
+    }
+    const tinted = `rgb(${tR},${tG},${tB})`;
+    if (tinted !== h.lastHaloStroke) {
+        h.lastHaloStroke = tinted;
+        h.haloInner.style.stroke = tinted;
+    }
+    if (light) {
+        const hsv = rgbToHsv(tR, tG, tB);
+        const [er, eg, eb] = hsvToRgb(hsv[0], Math.min(1, hsv[1] * LT_SAT_BOOST), Math.max(LT_MIN_VAL, hsv[2] * LT_VAL_MULT));
+        const extraTinted = `rgb(${er},${eg},${eb})`;
+        if (extraTinted !== h.lastExtraStroke) {
+            h.lastExtraStroke = extraTinted;
+            h.extraInner.style.stroke = extraTinted;
+        }
+    } else if ('#ffffff' !== h.lastExtraStroke) {
+        h.lastExtraStroke = '#ffffff';
+        h.extraInner.style.stroke = '#ffffff';
+    }
+    const m = Math.max(0, Math.min(1, strengthMul));
+    h.haloGroup.style.opacity = (h.glowOpacity * HALO_OP_MUL * m).toFixed(3);
+    h.extraGroup.style.opacity = Math.min(1, h.glowOpacity * EXTRA_INTENSITY * m).toFixed(3);
+}
+function resizeGlow(handles, container, opts) {
+    for (const svg of Array.from(container.querySelectorAll('.metal-fx-glow-svg')))if (svg.parentNode === container) container.removeChild(svg);
+    return injectGlow(container, opts);
+}
+export { injectGlow, resizeGlow, updateGlow };

package/dist/components/metal-border/engine/index.d.ts

@@ -0,0 +1,4 @@
+export { createInstance, destroyInstance, updateInstance, setInstanceVisible, registerGlowInstance, unregisterGlowInstance, setGlowCallback, } from "./renderer/loop";
+export { injectGlow, updateGlow, resizeGlow, type GlowHandles, } from "./glow/glow";
+export type { MetalFxInstance } from "./renderer/core";
+export type { PresetName, PresetTheme } from "./presets";

package/dist/components/metal-border/engine/index.js

@@ -0,0 +1,2 @@
+export { createInstance, destroyInstance, registerGlowInstance, setGlowCallback, setInstanceVisible, unregisterGlowInstance, updateInstance } from "./renderer/loop.js";
+export { injectGlow, resizeGlow, updateGlow } from "./glow/glow.js";

package/dist/components/metal-border/engine/perfConfig.d.ts

@@ -0,0 +1,9 @@
+export declare const FRAME_INTERVAL_MS = 66;
+export declare const REFLECTION_INTERVAL_MS = 66;
+export declare const GLOW_READBACK_INTERVAL_MS = 1500;
+export declare const GLOW_SKIP_FRAMES = 1;
+export declare const PERIM_SAMPLES = 16;
+export declare const HALO_SEGMENTS = 16;
+export declare const EXTRA_SEGMENTS = 8;
+export declare const CANONICAL_GL_SIZE = 96;
+export declare const GL_DPR_CAP = 2;

package/dist/components/metal-border/engine/perfConfig.js

@@ -0,0 +1,10 @@
+const FRAME_INTERVAL_MS = 66;
+const REFLECTION_INTERVAL_MS = 66;
+const GLOW_READBACK_INTERVAL_MS = 1500;
+const GLOW_SKIP_FRAMES = 1;
+const PERIM_SAMPLES = 16;
+const HALO_SEGMENTS = 16;
+const EXTRA_SEGMENTS = 8;
+const CANONICAL_GL_SIZE = 96;
+const GL_DPR_CAP = 2;
+export { CANONICAL_GL_SIZE, EXTRA_SEGMENTS, FRAME_INTERVAL_MS, GLOW_READBACK_INTERVAL_MS, GLOW_SKIP_FRAMES, GL_DPR_CAP, HALO_SEGMENTS, PERIM_SAMPLES, REFLECTION_INTERVAL_MS };

package/dist/components/metal-border/engine/presets.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Bundled preset configurations for the metal effect.
+ *
+ * Direct ports of the three JSON files shipped alongside the canonical demo:
+ *   • preset-chromatic-both-modes.json
+ *   • preset-silver-both-modes.json
+ *   • preset-gold-both-modes.json
+ *
+ * Each preset carries a `dark` and `light` mode block. Values are reproduced
+ * byte-for-byte (including the `chromatic.dark.scale = 1.6` quirk that gives
+ * the dark chromatic preset its noticeably chunkier features compared with
+ * the other dark-mode entries).
+ *
+ * The fragment shader only consumes uniforms 1..5 of `palette`/`alphas` for
+ * the Plasma effect, but the JSON ships 7 colors / alphas to stay
+ * forward-compatible with effect 24 (Noise Flow Wide). We keep the full 7 so
+ * a future variant could opt into other effects without re-importing the
+ * preset definitions.
+ */
+export type PresetName = 'chromatic' | 'silver' | 'gold';
+export type PresetTheme = 'dark' | 'light';
+export interface PresetMode {
+    /** 7-stop palette, indexed against `u_color1..u_color7`. */
+    colors: [string, string, string, string, string, string, string];
+    /** Per-stop alpha weights (0..1). */
+    alphas: [number, number, number, number, number, number, number];
+    /** Drift angle (degrees). Multiplied by π/180 before upload. */
+    direction: number;
+    /** Time multiplier applied JS-side before passing into the shader. */
+    speed: number;
+    /** Plasma intensity (wave-field amplitude). */
+    intensity: number;
+    /** Noise zoom — smaller = chunkier features. */
+    scale: number;
+    /** Edge softness (effect 1 ignores; carried for parity). */
+    softness: number;
+    /** Warp strength on the field (0..1). */
+    distortion: number;
+    /** FBM octave / frequency multiplier. */
+    complexity: number;
+    /** Reserved (effect 1 ignores). */
+    shape: number;
+    /** 9-tap blur sample radius (0 = single tap). */
+    blur: number;
+    /** Vignette range (0..1). */
+    vignette: number;
+    /** Vignette darkening strength (0..1). */
+    vigOpacity: number;
+    /** Final alpha multiplier in the fragment shader (0..1). */
+    shaderOpacity: number;
+}
+export interface Preset {
+    name: PresetName;
+    modes: Record<PresetTheme, PresetMode>;
+}
+export declare const PRESETS: Record<PresetName, Preset>;
+export { hexToRgb } from './color';

package/dist/components/metal-border/engine/presets.js

@@ -0,0 +1,214 @@
+const CHROMATIC = {
+    name: 'chromatic',
+    modes: {
+        dark: {
+            colors: [
+                '#000000',
+                '#aae8ff',
+                '#c5fe9e',
+                '#f7888d',
+                '#0d0d0d',
+                '#fffdc3',
+                '#007cff'
+            ],
+            alphas: [
+                1,
+                1,
+                1,
+                1,
+                1,
+                1,
+                1
+            ],
+            direction: 80,
+            speed: 1.2,
+            intensity: 2,
+            scale: 1.6,
+            softness: 0.18,
+            distortion: 0.3,
+            complexity: 0.68,
+            shape: 1,
+            blur: 1,
+            vignette: 0.26,
+            vigOpacity: 0.6,
+            shaderOpacity: 1
+        },
+        light: {
+            colors: [
+                '#ffffff',
+                '#ffffff',
+                '#ffffff',
+                '#ffb3b3',
+                '#adadad',
+                '#f5ff70',
+                '#007cff'
+            ],
+            alphas: [
+                1,
+                1,
+                1,
+                1,
+                1,
+                1,
+                1
+            ],
+            direction: 80,
+            speed: 1.2,
+            intensity: 2,
+            scale: 2.5,
+            softness: 0.18,
+            distortion: 0.3,
+            complexity: 0.68,
+            shape: 1,
+            blur: 1,
+            vignette: 0.24,
+            vigOpacity: 0.16,
+            shaderOpacity: 1
+        }
+    }
+};
+const SILVER = {
+    name: 'silver',
+    modes: {
+        dark: {
+            colors: [
+                '#000000',
+                '#dedede',
+                '#747270',
+                '#e5e5e5',
+                '#0d0d0d',
+                '#ffffff',
+                '#e6e6e6'
+            ],
+            alphas: [
+                1,
+                1,
+                1,
+                1,
+                1,
+                1,
+                1
+            ],
+            direction: 80,
+            speed: 1.2,
+            intensity: 2,
+            scale: 2.5,
+            softness: 0.18,
+            distortion: 0.3,
+            complexity: 0.68,
+            shape: 1,
+            blur: 1,
+            vignette: 0.26,
+            vigOpacity: 0.6,
+            shaderOpacity: 0.88
+        },
+        light: {
+            colors: [
+                '#f6f6f6',
+                '#ffffff',
+                '#ffffff',
+                '#f7f7f7',
+                '#c9c9c9',
+                '#d0d0d0',
+                '#d1d1d1'
+            ],
+            alphas: [
+                1,
+                1,
+                1,
+                1,
+                1,
+                1,
+                1
+            ],
+            direction: 80,
+            speed: 1.2,
+            intensity: 2,
+            scale: 2.5,
+            softness: 0.18,
+            distortion: 0.3,
+            complexity: 0.68,
+            shape: 1,
+            blur: 1,
+            vignette: 0.2,
+            vigOpacity: 0.26,
+            shaderOpacity: 1
+        }
+    }
+};
+const GOLD = {
+    name: 'gold',
+    modes: {
+        dark: {
+            colors: [
+                '#000000',
+                '#ffffff',
+                '#ffffff',
+                '#f7d488',
+                '#0d0d0d',
+                '#fffdc3',
+                '#ffffff'
+            ],
+            alphas: [
+                1,
+                1,
+                1,
+                1,
+                1,
+                1,
+                1
+            ],
+            direction: 80,
+            speed: 1.0,
+            intensity: 2,
+            scale: 2.5,
+            softness: 0.18,
+            distortion: 0.3,
+            complexity: 0.68,
+            shape: 1,
+            blur: 1,
+            vignette: 0.26,
+            vigOpacity: 0.6,
+            shaderOpacity: 0.92
+        },
+        light: {
+            colors: [
+                '#fff8e1',
+                '#fffbe0',
+                '#ffffff',
+                '#fff6d6',
+                '#d2c7a7',
+                '#dcd2bc',
+                '#f9f7e5'
+            ],
+            alphas: [
+                1,
+                1,
+                1,
+                1,
+                1,
+                1,
+                1
+            ],
+            direction: 80,
+            speed: 1.2,
+            intensity: 2,
+            scale: 2.5,
+            softness: 0.18,
+            distortion: 0.3,
+            complexity: 0.68,
+            shape: 1,
+            blur: 1,
+            vignette: 0.22,
+            vigOpacity: 0.24,
+            shaderOpacity: 1
+        }
+    }
+};
+const PRESETS = {
+    chromatic: CHROMATIC,
+    silver: SILVER,
+    gold: GOLD
+};
+export { hexToRgb } from "./color.js";
+export { PRESETS };

package/dist/components/metal-border/engine/renderer/core.d.ts

@@ -0,0 +1,69 @@
+import { type PresetMode, type PresetName, type PresetTheme } from "../presets";
+export declare const CANONICAL_PILL_W = 140;
+export declare const CANONICAL_PILL_H = 40;
+export declare const PILL_SHADER_SCALE = 1.6;
+export declare const CIRCLE_SHADER_SCALE = 1.3;
+export interface ShaderRGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface MetalFxInstance {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    cssWidth: number;
+    cssHeight: number;
+    cornerRadius: number;
+    kind: 'pill' | 'circle';
+    ringCssPx: number;
+    shaderScale: number;
+    opacityMul: number;
+    visible: boolean;
+    /** Per-instance freeze flag. When true the instance's 2D canvas keeps the
+     *  last copied frame; the shared GL loop continues for any other unpaused
+     *  instance. */
+    paused: boolean;
+    /** Set to true after the first successful copyShaderToInstance — so an
+     *  instance that mounts already paused still gets one frame painted before
+     *  it freezes (otherwise it would render a blank canvas). */
+    everCopied: boolean;
+    dpr: number;
+    presetName: PresetName;
+    presetTheme: PresetTheme;
+    glowEnabled: boolean;
+    /** Master scale multiplier for absolute-pixel internals (glow stroke
+     *  widths/blurs, reflection stroke band, etc.). 1 is the baseline. Set to
+     *  2 for a CSS-zoomed 2× hero so glow + reflection grow with the layout. */
+    scale: number;
+    onAfterFrame?: () => void;
+    /** One-shot callback fired after the very first copyShaderToInstance.
+     *  Auto-cleared by the loop so it never fires twice. */
+    onFirstCopy?: () => void;
+}
+export interface SharedRenderer {
+    glCanvas: HTMLCanvasElement | OffscreenCanvas;
+    gl: WebGLRenderingContext;
+    program: WebGLProgram;
+    buffer: WebGLBuffer;
+    uniforms: Record<string, WebGLUniformLocation | null>;
+    preset: PresetMode;
+    presetName: PresetName;
+    presetTheme: PresetTheme;
+    presetDirty: boolean;
+    contextLost: boolean;
+    useOffscreen: boolean;
+    startMs: number;
+    pausedMs: number;
+    pausedAtMs: number | null;
+    rafId: number;
+    dpr: number;
+    instances: Set<MetalFxInstance>;
+    frameCount: number;
+    glowPixels: Uint8Array;
+    glowPixelsW: number;
+    glowPixelsH: number;
+}
+export declare let SHARED: SharedRenderer | null;
+export declare function setContextRestoredCallback(cb: (() => void) | null): void;
+export declare function ensureSharedRenderer(): SharedRenderer;
+export declare function teardownSharedRenderer(): void;