@pathscale/ui 1.2.10 → 1.3.0

package/dist/components/metal-border/MetalBorder.js

@@ -0,0 +1,322 @@
+import { className, effect, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
+import "./MetalBorder.css";
+import { createEffect, createSignal, onCleanup, onMount, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { prefersReducedMotion } from "../../motion/reduced-motion.js";
+import { CLASSES } from "./MetalBorder.classes.js";
+import { createInstance, destroyInstance, injectGlow, registerGlowInstance, resizeGlow, setGlowCallback, setInstanceVisible, unregisterGlowInstance, updateGlow, updateInstance } from "./engine/index.js";
+var _tmpl$ = /*#__PURE__*/ template("<div><div>"), _tmpl$2 = /*#__PURE__*/ template("<div aria-hidden=true><canvas></canvas><div>");
+const DEFAULT_PRESET = "silver";
+const DEFAULT_STRENGTH = 90;
+const DEFAULT_KIND = "pill";
+const DEFAULT_THEME = "auto";
+const clampStrength = (value)=>{
+    if ("number" != typeof value || Number.isNaN(value)) return DEFAULT_STRENGTH / 100;
+    return Math.min(100, Math.max(0, value)) / 100;
+};
+const toRadiusCssValue = (value)=>{
+    if ("number" == typeof value) return `${value}px`;
+    return value;
+};
+const readRadiusPx = (element)=>{
+    if (!element || "u" < typeof window) return 0;
+    const computed = window.getComputedStyle(element);
+    const candidates = [
+        computed.borderTopLeftRadius,
+        computed.borderTopRightRadius,
+        computed.borderBottomRightRadius,
+        computed.borderBottomLeftRadius,
+        computed.borderRadius
+    ];
+    for (const candidate of candidates){
+        const parsed = Number.parseFloat(candidate);
+        if (Number.isFinite(parsed)) return parsed;
+    }
+    return 0;
+};
+const resolveThemeValue = (explicitTheme, dataTheme, host)=>{
+    if ("dark" === explicitTheme || "light" === explicitTheme) return explicitTheme;
+    if ("dark" === dataTheme || "light" === dataTheme) return dataTheme;
+    const themeRoot = host?.closest("[data-theme]") ?? document.documentElement;
+    const themeAttr = themeRoot?.getAttribute("data-theme")?.toLowerCase();
+    if (themeAttr?.includes("light")) return "light";
+    if (themeAttr?.includes("dark")) return "dark";
+    return window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light";
+};
+const getGlowOptions = (host, kind, cornerRadius)=>{
+    const rect = host?.getBoundingClientRect();
+    return {
+        width: Math.max(1, Math.round(rect?.width ?? 1)),
+        height: Math.max(1, Math.round(rect?.height ?? 1)),
+        cornerRadius,
+        kind
+    };
+};
+const glowMap = new Map();
+let glowCallbackSet = false;
+const ensureGlowCallback = ()=>{
+    if (glowCallbackSet) return;
+    glowCallbackSet = true;
+    setGlowCallback((instance, nowMs)=>{
+        const entry = glowMap.get(instance);
+        if (entry) updateGlow(entry.handles, instance, nowMs, instance.opacityMul, entry.theme);
+    });
+};
+function MetalBorder(props) {
+    const [local, others] = splitProps(props, [
+        "children",
+        "class",
+        "className",
+        "contentClass",
+        "dataTheme",
+        "style",
+        "preset",
+        "strength",
+        "kind",
+        "glow",
+        "paused",
+        "theme",
+        "cornerRadius",
+        "ref"
+    ]);
+    let hostRef;
+    let contentRef;
+    let canvasRef;
+    let glowRef;
+    let instance = null;
+    let glowHandles = null;
+    let resizeObserver = null;
+    let intersectionObserver = null;
+    let mutationObserver = null;
+    let mediaQueryList = null;
+    let resizeRaf = 0;
+    const [resolvedTheme, setResolvedTheme] = createSignal("dark");
+    const [prefersReduced, setPrefersReduced] = createSignal(false);
+    const [isWebGlUnavailable, setIsWebGlUnavailable] = createSignal(false);
+    const preset = ()=>local.preset ?? DEFAULT_PRESET;
+    const kind = ()=>local.kind ?? DEFAULT_KIND;
+    const theme = ()=>local.theme ?? DEFAULT_THEME;
+    const strength = ()=>clampStrength(local.strength);
+    const glow = ()=>local.glow ?? false;
+    const effectivePaused = ()=>(local.paused ?? false) || prefersReduced();
+    const radiusCssValue = ()=>toRadiusCssValue(local.cornerRadius);
+    const effectEnabled = ()=>!isWebGlUnavailable();
+    const syncResolvedTheme = ()=>{
+        if ("u" < typeof window) return;
+        setResolvedTheme(resolveThemeValue(theme(), local.dataTheme, hostRef));
+    };
+    const readCornerRadius = ()=>{
+        if ("number" == typeof local.cornerRadius) return local.cornerRadius;
+        if ("string" == typeof local.cornerRadius) return readRadiusPx(hostRef);
+        const firstChild = contentRef?.firstElementChild;
+        return readRadiusPx(firstChild instanceof HTMLElement ? firstChild : hostRef);
+    };
+    const syncInstanceGeometry = ()=>{
+        if (!instance || !hostRef) return;
+        updateInstance(instance, {
+            cssWidth: Math.max(1, Math.round(hostRef.getBoundingClientRect().width)),
+            cssHeight: Math.max(1, Math.round(hostRef.getBoundingClientRect().height)),
+            cornerRadius: readCornerRadius()
+        });
+        if (glowHandles && glowRef) {
+            glowHandles = resizeGlow(glowHandles, glowRef, {
+                ...getGlowOptions(hostRef, kind(), readCornerRadius()),
+                scale: 1
+            });
+            glowMap.set(instance, {
+                handles: glowHandles,
+                theme: resolvedTheme()
+            });
+        }
+    };
+    const attachGlow = ()=>{
+        if (!instance || !glowRef || glowHandles || !glow()) return;
+        ensureGlowCallback();
+        glowHandles = injectGlow(glowRef, {
+            ...getGlowOptions(hostRef, kind(), readCornerRadius()),
+            scale: 1
+        });
+        glowMap.set(instance, {
+            handles: glowHandles,
+            theme: resolvedTheme()
+        });
+        registerGlowInstance(instance);
+    };
+    const detachGlow = ()=>{
+        if (!instance) return;
+        unregisterGlowInstance(instance);
+        glowMap.delete(instance);
+        glowHandles = null;
+        if (glowRef) glowRef.innerHTML = "";
+    };
+    onMount(()=>{
+        if ("u" < typeof window) return;
+        setPrefersReduced(prefersReducedMotion());
+        syncResolvedTheme();
+        mediaQueryList = window.matchMedia?.("(prefers-reduced-motion: reduce)") ?? null;
+        const handleMotionChange = ()=>{
+            setPrefersReduced(prefersReducedMotion());
+        };
+        mediaQueryList?.addEventListener?.("change", handleMotionChange);
+        if (hostRef) {
+            const themeRoot = hostRef.closest("[data-theme]") ?? document.documentElement;
+            mutationObserver = new MutationObserver(()=>{
+                syncResolvedTheme();
+            });
+            mutationObserver.observe(themeRoot, {
+                attributes: true,
+                attributeFilter: [
+                    "data-theme"
+                ]
+            });
+        }
+        onCleanup(()=>{
+            resizeObserver?.disconnect();
+            intersectionObserver?.disconnect();
+            mutationObserver?.disconnect();
+            mediaQueryList?.removeEventListener?.("change", handleMotionChange);
+            if (0 !== resizeRaf) cancelAnimationFrame(resizeRaf);
+            detachGlow();
+            if (instance) destroyInstance(instance);
+            instance = null;
+        });
+        if (!canvasRef || !hostRef) return;
+        try {
+            instance = createInstance({
+                hostCanvas: canvasRef,
+                cssWidth: Math.max(1, Math.round(hostRef.getBoundingClientRect().width)),
+                cssHeight: Math.max(1, Math.round(hostRef.getBoundingClientRect().height)),
+                cornerRadius: readCornerRadius(),
+                kind: kind(),
+                opacityMul: strength(),
+                paused: effectivePaused(),
+                presetName: preset(),
+                presetTheme: resolvedTheme()
+            });
+            setIsWebGlUnavailable(false);
+        } catch  {
+            setIsWebGlUnavailable(true);
+            return;
+        }
+        if (glow()) attachGlow();
+        resizeObserver = new ResizeObserver(()=>{
+            if (0 !== resizeRaf) return;
+            resizeRaf = requestAnimationFrame(()=>{
+                resizeRaf = 0;
+                syncResolvedTheme();
+                syncInstanceGeometry();
+            });
+        });
+        resizeObserver.observe(hostRef);
+        if ("u" > typeof IntersectionObserver) {
+            intersectionObserver = new IntersectionObserver((entries)=>{
+                if (!instance) return;
+                for (const entry of entries)setInstanceVisible(instance, entry.isIntersecting);
+            }, {
+                rootMargin: "64px"
+            });
+            intersectionObserver.observe(hostRef);
+        }
+    });
+    createEffect(()=>{
+        syncResolvedTheme();
+        if (!instance) return;
+        updateInstance(instance, {
+            presetName: preset(),
+            presetTheme: resolvedTheme()
+        });
+        if (glowHandles) glowMap.set(instance, {
+            handles: glowHandles,
+            theme: resolvedTheme()
+        });
+    });
+    createEffect(()=>{
+        if (!instance) return;
+        updateInstance(instance, {
+            opacityMul: strength()
+        });
+    });
+    createEffect(()=>{
+        if (!instance) return;
+        updateInstance(instance, {
+            kind: kind(),
+            cornerRadius: readCornerRadius()
+        });
+        if (glowHandles && glowRef) {
+            glowHandles = resizeGlow(glowHandles, glowRef, {
+                ...getGlowOptions(hostRef, kind(), readCornerRadius()),
+                scale: 1
+            });
+            glowMap.set(instance, {
+                handles: glowHandles,
+                theme: resolvedTheme()
+            });
+        }
+    });
+    createEffect(()=>{
+        if (!instance) return;
+        updateInstance(instance, {
+            paused: effectivePaused()
+        });
+    });
+    createEffect(()=>{
+        if (!instance) return;
+        if (glow()) attachGlow();
+        else if (glowHandles) detachGlow();
+    });
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        use((element)=>{
+            hostRef = element;
+            if ("function" == typeof local.ref) local.ref(element);
+        }, _el$);
+        spread(_el$, mergeProps(others, {
+            get ["class"] () {
+                return twMerge(CLASSES.Root.base, CLASSES.Root.kind[kind()], effectEnabled() && CLASSES.Root.flag.enabled, isWebGlUnavailable() && CLASSES.Root.flag.unavailable, effectivePaused() && CLASSES.Root.flag.paused, local.class, local.className);
+            },
+            get ["data-kind"] () {
+                return kind();
+            },
+            get ["data-preset"] () {
+                return preset();
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return {
+                    ...local.style ?? {},
+                    "--metal-border-radius": radiusCssValue()
+                };
+            }
+        }), false, true);
+        insert(_el$, (()=>{
+            var _c$ = memo(()=>!!effectEnabled());
+            return ()=>_c$() && (()=>{
+                    var _el$3 = _tmpl$2(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+                    var _ref$2 = canvasRef;
+                    "function" == typeof _ref$2 ? use(_ref$2, _el$4) : canvasRef = _el$4;
+                    var _ref$3 = glowRef;
+                    "function" == typeof _ref$3 ? use(_ref$3, _el$5) : glowRef = _el$5;
+                    effect((_p$)=>{
+                        var _v$ = CLASSES.Effect.base, _v$2 = CLASSES.Canvas.base, _v$3 = CLASSES.Glow.base;
+                        _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+                        _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
+                        _v$3 !== _p$.a && className(_el$5, _p$.a = _v$3);
+                        return _p$;
+                    }, {
+                        e: void 0,
+                        t: void 0,
+                        a: void 0
+                    });
+                    return _el$3;
+                })();
+        })(), _el$2);
+        var _ref$ = contentRef;
+        "function" == typeof _ref$ ? use(_ref$, _el$2) : contentRef = _el$2;
+        insert(_el$2, ()=>local.children);
+        effect(()=>className(_el$2, twMerge(CLASSES.Content.base, local.contentClass)));
+        return _el$;
+    })();
+}
+export default MetalBorder;

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

@@ -0,0 +1,4 @@
+/** Converts `#rrggbb` (or `#rgb`) to a normalized `[r, g, b]` triple (0–1). */
+export declare function hexToRgb(hex: string): [number, number, number];
+export declare function rgbToHsv(r: number, g: number, b: number): [number, number, number];
+export declare function hsvToRgb(h: number, s: number, v: number): [number, number, number];

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

@@ -0,0 +1,69 @@
+function hexToRgb(hex) {
+    let h = hex.replace('#', '');
+    if (3 === h.length) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+    return [
+        parseInt(h.slice(0, 2), 16) / 255,
+        parseInt(h.slice(2, 4), 16) / 255,
+        parseInt(h.slice(4, 6), 16) / 255
+    ];
+}
+function rgbToHsv(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min;
+    let h = 0;
+    const s = 0 === max ? 0 : d / max;
+    if (0 !== d) {
+        h = max === r ? ((g - b) / d + 6) % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+        h /= 6;
+    }
+    return [
+        h,
+        s,
+        max
+    ];
+}
+function hsvToRgb(h, s, v) {
+    const i = Math.floor(6 * h), f = 6 * h - i;
+    const p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);
+    let r = 0, g = 0, b = 0;
+    switch(i % 6){
+        case 0:
+            r = v;
+            g = t;
+            b = p;
+            break;
+        case 1:
+            r = q;
+            g = v;
+            b = p;
+            break;
+        case 2:
+            r = p;
+            g = v;
+            b = t;
+            break;
+        case 3:
+            r = p;
+            g = q;
+            b = v;
+            break;
+        case 4:
+            r = t;
+            g = p;
+            b = v;
+            break;
+        case 5:
+            r = v;
+            g = p;
+            b = q;
+            break;
+    }
+    return [
+        Math.round(255 * r),
+        Math.round(255 * g),
+        Math.round(255 * b)
+    ];
+}
+export { hexToRgb, hsvToRgb, rgbToHsv };

package/dist/components/metal-border/engine/glow/geometry.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Pure geometry + SVG markup for the glow overlay.
+ *
+ * Perimeter math (rounded-rect / circle arc-length sampling), blob path
+ * generation, SVG filter/mask construction, and HSV colour helpers.
+ * No state — every function is a pure transform.
+ */
+import { PERIM_SAMPLES } from '../perfConfig';
+export { PERIM_SAMPLES };
+export interface GlowOptions {
+    width: number;
+    height: number;
+    cornerRadius: number;
+    kind: 'pill' | 'circle';
+    /** Master multiplier for absolute SVG units (stroke widths, blur,
+     *  fade-circle radius). 1 is the canonical 1× rendering. Set to 2 when
+     *  the host element is rendered at a 2× layout (e.g. CSS zoom: 2) so
+     *  the glow grows proportionally. */
+    scale?: number;
+}
+export interface Pt {
+    x: number;
+    y: number;
+}
+export interface PerimSample extends Pt {
+    arc: number;
+}
+export declare function rrPerim(w: number, h: number, r: number): number;
+export declare function shapePerim(w: number, h: number, r: number, kind: 'pill' | 'circle'): number;
+export declare function sampleAtArc(s: number, w: number, h: number, r: number, inset: number, outward: number, kind: 'pill' | 'circle', out?: Pt): Pt;
+export declare function buildStaticBlobPath(halfLen: number, segments: number): string;
+export declare function tangentAngleAtArc(s: number, w: number, h: number, r: number, inset: number, kind: 'pill' | 'circle'): number;
+export declare function smoothstep(a: number, b: number, x: number): number;
+export declare function buildPerimTable(opts: GlowOptions): PerimSample[];
+export declare function buildSvgMarkup(opts: GlowOptions, p: string): string;

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

@@ -0,0 +1,176 @@
+import { PERIM_SAMPLES } from "../perfConfig.js";
+const INSET = 1.5;
+const EXTRA_SCALE = 1 / 3;
+const EXTRA_STROKE_OUTER = 4.0 * EXTRA_SCALE;
+const EXTRA_STROKE_CORE = 2.0 * EXTRA_SCALE;
+const EXTRA_BLUR_OUTER = 2.0 * EXTRA_SCALE;
+const EXTRA_BLUR_CORE = 1.35 * EXTRA_SCALE;
+const EXTRA_FADE_R = 13.0 * EXTRA_SCALE;
+function rrPerim(w, h, r) {
+    const rr = Math.max(0, Math.min(r, Math.min(w, h) / 2));
+    return 2 * Math.max(0, w - 2 * rr) + 2 * Math.max(0, h - 2 * rr) + 2 * Math.PI * rr;
+}
+function shapePerim(w, h, r, kind) {
+    if ('circle' === kind) return 2 * Math.PI * Math.max(0, Math.min(r, Math.min(w, h) / 2));
+    return rrPerim(w, h, r);
+}
+function sampleAtArc(s, w, h, r, inset, outward, kind, out) {
+    const o = out || {
+        x: 0,
+        y: 0
+    };
+    const rr = Math.max(0, Math.min(r, Math.min(w, h) / 2));
+    if ('circle' === kind) {
+        const perim = 2 * Math.PI * rr;
+        if (perim <= 0.0001) {
+            o.x = 0.5 * w;
+            o.y = 0.5 * h;
+            return o;
+        }
+        s = (s % perim + perim) % perim;
+        const theta = -Math.PI / 2 + s / perim * Math.PI * 2;
+        const rad = Math.max(0, rr - inset + outward);
+        o.x = 0.5 * w + rad * Math.cos(theta);
+        o.y = 0.5 * h + rad * Math.sin(theta);
+        return o;
+    }
+    const topLen = Math.max(0, w - 2 * rr), sideLen = Math.max(0, h - 2 * rr);
+    const arcLen = Math.PI * rr / 2;
+    const perim = 2 * (topLen + sideLen) + 4 * arcLen;
+    s = (s % perim + perim) % perim;
+    const rad = Math.max(0, rr - inset + outward);
+    let d = s;
+    if (d < topLen) {
+        o.x = rr + d;
+        o.y = inset - outward;
+        return o;
+    }
+    d -= topLen;
+    if (d < arcLen) {
+        const theta = -Math.PI / 2 + Math.PI / 2 * (arcLen > 0 ? d / arcLen : 0);
+        o.x = w - rr + rad * Math.cos(theta);
+        o.y = rr + rad * Math.sin(theta);
+        return o;
+    }
+    d -= arcLen;
+    if (d < sideLen) {
+        o.x = w - inset + outward;
+        o.y = rr + d;
+        return o;
+    }
+    d -= sideLen;
+    if (d < arcLen) {
+        const theta = Math.PI / 2 * (arcLen > 0 ? d / arcLen : 0);
+        o.x = w - rr + rad * Math.cos(theta);
+        o.y = h - rr + rad * Math.sin(theta);
+        return o;
+    }
+    d -= arcLen;
+    if (d < topLen) {
+        o.x = w - rr - d;
+        o.y = h - inset + outward;
+        return o;
+    }
+    d -= topLen;
+    if (d < arcLen) {
+        const theta = Math.PI / 2 + Math.PI / 2 * (arcLen > 0 ? d / arcLen : 0);
+        o.x = rr + rad * Math.cos(theta);
+        o.y = h - rr + rad * Math.sin(theta);
+        return o;
+    }
+    d -= arcLen;
+    if (d < sideLen) {
+        o.x = inset - outward;
+        o.y = h - rr - d;
+        return o;
+    }
+    d -= sideLen;
+    const theta = Math.PI + Math.PI / 2 * (arcLen > 0 ? d / arcLen : 0);
+    o.x = rr + rad * Math.cos(theta);
+    o.y = rr + rad * Math.sin(theta);
+    return o;
+}
+function buildStaticBlobPath(halfLen, segments) {
+    const step = 2 * halfLen / segments;
+    let d = '';
+    for(let i = 0; i <= segments; i++){
+        const x = -halfLen + i * step;
+        d += (0 === i ? 'M ' : 'L ') + x.toFixed(3) + ' 0 ';
+    }
+    return d;
+}
+const _ta = {
+    x: 0,
+    y: 0
+};
+const _tb = {
+    x: 0,
+    y: 0
+};
+function tangentAngleAtArc(s, w, h, r, inset, kind) {
+    const eps = 0.1;
+    sampleAtArc(s - eps, w, h, r, inset, 0, kind, _ta);
+    sampleAtArc(s + eps, w, h, r, inset, 0, kind, _tb);
+    return Math.atan2(_tb.y - _ta.y, _tb.x - _ta.x);
+}
+function smoothstep(a, b, x) {
+    if (a === b) return x < a ? 0 : 1;
+    const t = Math.max(0, Math.min(1, (x - a) / (b - a)));
+    return t * t * (3 - 2 * t);
+}
+function buildPerimTable(opts) {
+    const perim = shapePerim(opts.width, opts.height, opts.cornerRadius, opts.kind);
+    const insetS = INSET * (opts.scale ?? 1);
+    const table = [];
+    for(let i = 0; i < PERIM_SAMPLES; i++){
+        const arc = i / PERIM_SAMPLES * perim;
+        const pt = sampleAtArc(arc, opts.width, opts.height, opts.cornerRadius, insetS, 0, opts.kind);
+        table.push({
+            x: pt.x,
+            y: pt.y,
+            arc
+        });
+    }
+    return table;
+}
+function buildSvgMarkup(opts, p) {
+    const { width: W, height: H, cornerRadius: R } = opts;
+    const s = opts.scale ?? 1;
+    const ringInset = 'circle' === opts.kind ? 2 : 1;
+    const innerR = Math.max(0, R - ringInset);
+    const fX = (-200 * s).toFixed(0), fY = fX;
+    const fW = (540 * s).toFixed(0), fH = (440 * s).toFixed(0);
+    const fRect = `x="${fX}" y="${fY}" width="${fW}" height="${fH}"`;
+    const fr = `${fRect} filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"`;
+    const sw = (n)=>(n * s).toFixed(3);
+    const sd = (n)=>(n * s).toFixed(3);
+    return [
+        '<defs>',
+        `<filter id="${p}_bXl" ${fr}><feGaussianBlur stdDeviation="${sd(8.4)}"/></filter>`,
+        `<filter id="${p}_bLg" ${fr}><feGaussianBlur stdDeviation="${sd(4.8)}"/></filter>`,
+        `<filter id="${p}_bMd" ${fr}><feGaussianBlur stdDeviation="${sd(2.1)}"/></filter>`,
+        `<filter id="${p}_bSm" ${fr}><feGaussianBlur stdDeviation="${sd(0.9)}"/></filter>`,
+        `<filter id="${p}_ebO" ${fr}><feGaussianBlur stdDeviation="${sd(EXTRA_BLUR_OUTER)}"/></filter>`,
+        `<filter id="${p}_ebC" ${fr}><feGaussianBlur stdDeviation="${sd(EXTRA_BLUR_CORE)}"/></filter>`,
+        `<radialGradient id="${p}_fg" cx="0.5" cy="0.5" r="0.5"><stop offset="0" stop-color="white"/><stop offset="0.30" stop-color="white"/><stop offset="0.65" stop-color="#404040"/><stop offset="1" stop-color="black"/></radialGradient>`,
+        `<mask id="${p}_fm" maskUnits="userSpaceOnUse" ${fRect}><rect ${fRect} fill="black"/><circle id="${p}_fc" cx="0" cy="0" r="${(EXTRA_FADE_R * s).toFixed(3)}" fill="url(#${p}_fg)"/></mask>`,
+        `<mask id="${p}_rm" maskUnits="userSpaceOnUse" ${fRect}><rect ${fRect} fill="#808080"/><rect x="0" y="0" width="${W}" height="${H}" rx="${R}" ry="${R}" fill="white"/><rect x="${ringInset}" y="${ringInset}" width="${W - 2 * ringInset}" height="${H - 2 * ringInset}" rx="${innerR}" ry="${innerR}" fill="black"/></mask>`,
+        '</defs>',
+        `<g id="${p}_h" mask="url(#${p}_rm)" opacity="0">`,
+        `<rect ${fRect} fill="none" pointer-events="none"/>`,
+        `<g id="${p}_hI" stroke="white">`,
+        `<path id="${p}_pXl" stroke-width="${sw(26.4)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.385" filter="url(#${p}_bXl)"/>`,
+        `<path id="${p}_pLg" stroke-width="${sw(15.6)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.595" filter="url(#${p}_bLg)"/>`,
+        `<path id="${p}_pMd" stroke-width="${sw(7.2)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.70" filter="url(#${p}_bMd)"/>`,
+        `<path id="${p}_pSm" stroke-width="${sw(3.0)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.70" filter="url(#${p}_bSm)"/>`,
+        '</g></g>',
+        `<g id="${p}_e" mask="url(#${p}_rm)" opacity="0">`,
+        `<rect ${fRect} fill="none" pointer-events="none"/>`,
+        `<g mask="url(#${p}_fm)">`,
+        `<g id="${p}_eI" stroke="white">`,
+        `<path id="${p}_eO" stroke-width="${sw(EXTRA_STROKE_OUTER)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.85" filter="url(#${p}_ebO)"/>`,
+        `<path id="${p}_eC" stroke-width="${sw(EXTRA_STROKE_CORE)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="1.0" filter="url(#${p}_ebC)"/>`,
+        '</g></g></g>'
+    ].join('');
+}
+export { PERIM_SAMPLES, buildPerimTable, buildStaticBlobPath, buildSvgMarkup, rrPerim, sampleAtArc, shapePerim, smoothstep, tangentAngleAtArc };

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

@@ -0,0 +1,38 @@
+import type { MetalFxInstance, ShaderRGB } from '../renderer/core';
+import { type Tween } from '../tween';
+import { type GlowOptions, type PerimSample } from './geometry';
+export type { GlowOptions } from './geometry';
+export interface GlowHandles {
+    svg: SVGSVGElement;
+    haloGroup: SVGGElement;
+    haloInner: SVGGElement;
+    extraGroup: SVGGElement;
+    extraInner: SVGGElement;
+    fadeCircle: SVGCircleElement;
+    width: number;
+    height: number;
+    cornerRadius: number;
+    kind: 'pill' | 'circle';
+    /** Master scale used at injection time so per-frame position math
+     *  (INSET / EXTRA_OUTWARD) stays consistent with the strokes already
+     *  baked into the SVG markup. */
+    scale: number;
+    perim: PerimSample[];
+    currentIdx: number;
+    appearedAt: number;
+    glowOpacity: number;
+    relocTween: Tween | null;
+    relocNextIdx: number;
+    wanderS: number;
+    wanderTargetS: number;
+    wanderFrames: number;
+    tintFrom: ShaderRGB;
+    tintTarget: ShaderRGB;
+    tintTween: Tween | null;
+    tintHoldUntil: number;
+    lastHaloStroke: string;
+    lastExtraStroke: string;
+}
+export declare function injectGlow(container: HTMLElement, opts: GlowOptions): GlowHandles;
+export declare function updateGlow(h: GlowHandles, inst: MetalFxInstance, nowMs: number, strengthMul: number, theme?: 'dark' | 'light'): void;
+export declare function resizeGlow(handles: GlowHandles, container: HTMLElement, opts: GlowOptions): GlowHandles;