@heyramzi/ui 2.9.0 → 2.10.1

package/dist/effects/border-beam/presets.js

@@ -0,0 +1,1792 @@
+export const sizePresets = {
+    sm: {
+        borderRadius: 18,
+        borderWidth: 1,
+        width: 70,
+        height: 36
+    },
+    md: {
+        borderRadius: 16,
+        borderWidth: 1
+    },
+    line: {
+        borderRadius: 16,
+        borderWidth: 1
+    }
+};
+export const sizeThemePresets = {
+    sm: {
+        dark: {
+            strokeOpacity: 0.48,
+            innerOpacity: 0.7,
+            bloomOpacity: 0.8,
+            innerShadow: "rgba(255, 255, 255, 0.3)",
+            saturation: 1.2
+        },
+        light: {
+            strokeOpacity: 0.33,
+            innerOpacity: 0.46,
+            bloomOpacity: 0.54,
+            innerShadow: "rgba(0, 0, 0, 0.14)",
+            saturation: 0.96
+        }
+    },
+    md: {
+        dark: {
+            strokeOpacity: 0.48,
+            innerOpacity: 0.7,
+            bloomOpacity: 0.8,
+            innerShadow: "rgba(255, 255, 255, 0.27)",
+            saturation: 1.2
+        },
+        light: {
+            strokeOpacity: 0.33,
+            innerOpacity: 0.46,
+            bloomOpacity: 0.54,
+            innerShadow: "rgba(0, 0, 0, 0.14)",
+            saturation: 0.96
+        }
+    },
+    line: {
+        dark: {
+            strokeOpacity: 0.72,
+            innerOpacity: 0.7,
+            bloomOpacity: 0.8,
+            innerShadow: "rgba(255, 255, 255, 0.1)",
+            saturation: 1.2
+        },
+        light: {
+            strokeOpacity: 0.72,
+            innerOpacity: 0.7,
+            bloomOpacity: 0.8,
+            innerShadow: "rgba(0, 0, 0, 0.14)",
+            saturation: 1.2
+        }
+    }
+};
+export const themeColors = {
+    dark: {
+        ...sizeThemePresets.md.dark
+    },
+    light: {
+        ...sizeThemePresets.md.light
+    }
+};
+const borderColors = {
+    colorful: {
+        border: [
+            {
+                color: "rgb(255, 50, 100)",
+                pos: "33% -7.4%",
+                size: "70px 40px"
+            },
+            {
+                color: "rgb(40, 140, 255)",
+                pos: "12% -5%",
+                size: "60px 35px"
+            },
+            {
+                color: "rgb(50, 200, 80)",
+                pos: "2.1% 68.3%",
+                size: "40px 70px"
+            },
+            {
+                color: "rgb(30, 185, 170)",
+                pos: "2.1% 68.3%",
+                size: "20px 35px"
+            },
+            {
+                color: "rgb(100, 70, 255)",
+                pos: "74.4% 100%",
+                size: "180px 32px"
+            },
+            {
+                color: "rgb(40, 140, 255)",
+                pos: "55% 100%",
+                size: "85px 26px"
+            },
+            {
+                color: "rgb(255, 120, 40)",
+                pos: "93.9% 0%",
+                size: "74px 32px"
+            },
+            {
+                color: "rgb(240, 50, 180)",
+                pos: "100% 27.1%",
+                size: "26px 42px"
+            },
+            {
+                color: "rgb(180, 40, 240)",
+                pos: "100% 27.1%",
+                size: "52px 48px"
+            }
+        ],
+        spike: {
+            primary: "rgb(255, 60, 80)",
+            secondary: "rgba(40, 190, 180, 0.98)"
+        },
+        spikeLt: {
+            primary: "rgb(200, 30, 60)",
+            secondary: "rgb(20, 150, 140)"
+        }
+    },
+    mono: {
+        border: [
+            {
+                color: "rgb(180, 180, 180)",
+                pos: "33% -7.4%",
+                size: "70px 40px"
+            },
+            {
+                color: "rgb(140, 140, 140)",
+                pos: "12% -5%",
+                size: "60px 35px"
+            },
+            {
+                color: "rgb(160, 160, 160)",
+                pos: "2.1% 68.3%",
+                size: "40px 70px"
+            },
+            {
+                color: "rgb(130, 130, 130)",
+                pos: "2.1% 68.3%",
+                size: "20px 35px"
+            },
+            {
+                color: "rgb(170, 170, 170)",
+                pos: "74.4% 100%",
+                size: "180px 32px"
+            },
+            {
+                color: "rgb(150, 150, 150)",
+                pos: "55% 100%",
+                size: "85px 26px"
+            },
+            {
+                color: "rgb(190, 190, 190)",
+                pos: "93.9% 0%",
+                size: "74px 32px"
+            },
+            {
+                color: "rgb(145, 145, 145)",
+                pos: "100% 27.1%",
+                size: "26px 42px"
+            },
+            {
+                color: "rgb(165, 165, 165)",
+                pos: "100% 27.1%",
+                size: "52px 48px"
+            }
+        ],
+        spike: {
+            primary: "rgb(200, 200, 200)",
+            secondary: "rgb(170, 170, 170)"
+        },
+        spikeLt: {
+            primary: "rgb(80, 80, 80)",
+            secondary: "rgb(120, 120, 120)"
+        }
+    },
+    ocean: {
+        border: [
+            {
+                color: "rgb(100, 80, 220)",
+                pos: "33% -7.4%",
+                size: "70px 40px"
+            },
+            {
+                color: "rgb(60, 120, 255)",
+                pos: "12% -5%",
+                size: "60px 35px"
+            },
+            {
+                color: "rgb(80, 100, 200)",
+                pos: "2.1% 68.3%",
+                size: "40px 70px"
+            },
+            {
+                color: "rgb(50, 140, 220)",
+                pos: "2.1% 68.3%",
+                size: "20px 35px"
+            },
+            {
+                color: "rgb(120, 80, 255)",
+                pos: "74.4% 100%",
+                size: "180px 32px"
+            },
+            {
+                color: "rgb(70, 130, 255)",
+                pos: "55% 100%",
+                size: "85px 26px"
+            },
+            {
+                color: "rgb(140, 100, 240)",
+                pos: "93.9% 0%",
+                size: "74px 32px"
+            },
+            {
+                color: "rgb(90, 110, 230)",
+                pos: "100% 27.1%",
+                size: "26px 42px"
+            },
+            {
+                color: "rgb(130, 70, 255)",
+                pos: "100% 27.1%",
+                size: "52px 48px"
+            }
+        ],
+        spike: {
+            primary: "rgb(100, 120, 255)",
+            secondary: "rgba(130, 100, 220, 0.98)"
+        },
+        spikeLt: {
+            primary: "rgb(60, 60, 180)",
+            secondary: "rgb(80, 100, 200)"
+        }
+    },
+    sunset: {
+        border: [
+            {
+                color: "rgb(255, 80, 50)",
+                pos: "33% -7.4%",
+                size: "70px 40px"
+            },
+            {
+                color: "rgb(255, 160, 40)",
+                pos: "12% -5%",
+                size: "60px 35px"
+            },
+            {
+                color: "rgb(255, 120, 60)",
+                pos: "2.1% 68.3%",
+                size: "40px 70px"
+            },
+            {
+                color: "rgb(255, 200, 50)",
+                pos: "2.1% 68.3%",
+                size: "20px 35px"
+            },
+            {
+                color: "rgb(255, 100, 80)",
+                pos: "74.4% 100%",
+                size: "180px 32px"
+            },
+            {
+                color: "rgb(255, 180, 60)",
+                pos: "55% 100%",
+                size: "85px 26px"
+            },
+            {
+                color: "rgb(255, 60, 60)",
+                pos: "93.9% 0%",
+                size: "74px 32px"
+            },
+            {
+                color: "rgb(255, 140, 50)",
+                pos: "100% 27.1%",
+                size: "26px 42px"
+            },
+            {
+                color: "rgb(255, 90, 70)",
+                pos: "100% 27.1%",
+                size: "52px 48px"
+            }
+        ],
+        spike: {
+            primary: "rgb(255, 140, 80)",
+            secondary: "rgba(255, 100, 60, 0.98)"
+        },
+        spikeLt: {
+            primary: "rgb(200, 80, 40)",
+            secondary: "rgb(220, 120, 30)"
+        }
+    }
+};
+const smGradients = {
+    colorful: {
+        border: [
+            {
+                color: "rgb(50, 200, 80)",
+                pos: "2% 68%",
+                size: "9px 18px"
+            },
+            {
+                color: "rgb(30, 185, 170)",
+                pos: "2% 68%",
+                size: "4px 8px"
+            },
+            {
+                color: "rgb(255, 120, 40)",
+                pos: "72% -3%",
+                size: "59px 9px"
+            },
+            {
+                color: "rgb(100, 70, 255)",
+                pos: "74% 100%",
+                size: "42px 7px"
+            },
+            {
+                color: "rgb(240, 50, 180)",
+                pos: "100% 27%",
+                size: "10px 17px"
+            },
+            {
+                color: "rgb(180, 40, 240)",
+                pos: "100% 27%",
+                size: "10px 18px"
+            },
+            {
+                color: "rgb(40, 140, 255)",
+                pos: "100% 27%",
+                size: "5px 10px"
+            },
+            {
+                color: "rgb(255, 50, 100)",
+                pos: "100% 27%",
+                size: "11px 12px"
+            }
+        ],
+        inner: [
+            {
+                color: "rgba(50, 200, 80, 0.5)",
+                pos: "2% 68%",
+                size: "9px 18px"
+            },
+            {
+                color: "rgba(30, 185, 170, 0.45)",
+                pos: "2% 68%",
+                size: "4px 8px"
+            },
+            {
+                color: "rgba(255, 120, 40, 0.35)",
+                pos: "72% -3%",
+                size: "59px 9px"
+            },
+            {
+                color: "rgba(100, 70, 255, 0.35)",
+                pos: "74% 100%",
+                size: "42px 7px"
+            },
+            {
+                color: "rgba(240, 50, 180, 0.3)",
+                pos: "100% 27%",
+                size: "10px 17px"
+            },
+            {
+                color: "rgba(180, 40, 240, 0.4)",
+                pos: "100% 27%",
+                size: "10px 18px"
+            },
+            {
+                color: "rgba(40, 140, 255, 0.3)",
+                pos: "100% 27%",
+                size: "5px 10px"
+            },
+            {
+                color: "rgba(255, 50, 100, 0.3)",
+                pos: "100% 27%",
+                size: "11px 12px"
+            }
+        ]
+    },
+    mono: {
+        border: [
+            {
+                color: "rgb(160, 160, 160)",
+                pos: "2% 68%",
+                size: "9px 18px"
+            },
+            {
+                color: "rgb(140, 140, 140)",
+                pos: "2% 68%",
+                size: "4px 8px"
+            },
+            {
+                color: "rgb(180, 180, 180)",
+                pos: "72% -3%",
+                size: "59px 9px"
+            },
+            {
+                color: "rgb(150, 150, 150)",
+                pos: "74% 100%",
+                size: "42px 7px"
+            },
+            {
+                color: "rgb(170, 170, 170)",
+                pos: "100% 27%",
+                size: "10px 17px"
+            },
+            {
+                color: "rgb(155, 155, 155)",
+                pos: "100% 27%",
+                size: "10px 18px"
+            },
+            {
+                color: "rgb(145, 145, 145)",
+                pos: "100% 27%",
+                size: "5px 10px"
+            },
+            {
+                color: "rgb(165, 165, 165)",
+                pos: "100% 27%",
+                size: "11px 12px"
+            }
+        ],
+        inner: [
+            {
+                color: "rgba(160, 160, 160, 0.25)",
+                pos: "2% 68%",
+                size: "9px 18px"
+            },
+            {
+                color: "rgba(140, 140, 140, 0.22)",
+                pos: "2% 68%",
+                size: "4px 8px"
+            },
+            {
+                color: "rgba(180, 180, 180, 0.17)",
+                pos: "72% -3%",
+                size: "59px 9px"
+            },
+            {
+                color: "rgba(150, 150, 150, 0.17)",
+                pos: "74% 100%",
+                size: "42px 7px"
+            },
+            {
+                color: "rgba(170, 170, 170, 0.15)",
+                pos: "100% 27%",
+                size: "10px 17px"
+            },
+            {
+                color: "rgba(155, 155, 155, 0.20)",
+                pos: "100% 27%",
+                size: "10px 18px"
+            },
+            {
+                color: "rgba(145, 145, 145, 0.15)",
+                pos: "100% 27%",
+                size: "5px 10px"
+            },
+            {
+                color: "rgba(165, 165, 165, 0.15)",
+                pos: "100% 27%",
+                size: "11px 12px"
+            }
+        ]
+    },
+    ocean: {
+        border: [
+            {
+                color: "rgb(60, 140, 200)",
+                pos: "2% 68%",
+                size: "9px 18px"
+            },
+            {
+                color: "rgb(50, 120, 180)",
+                pos: "2% 68%",
+                size: "4px 8px"
+            },
+            {
+                color: "rgb(100, 80, 220)",
+                pos: "72% -3%",
+                size: "59px 9px"
+            },
+            {
+                color: "rgb(80, 100, 255)",
+                pos: "74% 100%",
+                size: "42px 7px"
+            },
+            {
+                color: "rgb(120, 70, 240)",
+                pos: "100% 27%",
+                size: "10px 17px"
+            },
+            {
+                color: "rgb(90, 80, 220)",
+                pos: "100% 27%",
+                size: "10px 18px"
+            },
+            {
+                color: "rgb(70, 110, 255)",
+                pos: "100% 27%",
+                size: "5px 10px"
+            },
+            {
+                color: "rgb(110, 90, 230)",
+                pos: "100% 27%",
+                size: "11px 12px"
+            }
+        ],
+        inner: [
+            {
+                color: "rgba(60, 140, 200, 0.5)",
+                pos: "2% 68%",
+                size: "9px 18px"
+            },
+            {
+                color: "rgba(50, 120, 180, 0.45)",
+                pos: "2% 68%",
+                size: "4px 8px"
+            },
+            {
+                color: "rgba(100, 80, 220, 0.35)",
+                pos: "72% -3%",
+                size: "59px 9px"
+            },
+            {
+                color: "rgba(80, 100, 255, 0.35)",
+                pos: "74% 100%",
+                size: "42px 7px"
+            },
+            {
+                color: "rgba(120, 70, 240, 0.3)",
+                pos: "100% 27%",
+                size: "10px 17px"
+            },
+            {
+                color: "rgba(90, 80, 220, 0.4)",
+                pos: "100% 27%",
+                size: "10px 18px"
+            },
+            {
+                color: "rgba(70, 110, 255, 0.3)",
+                pos: "100% 27%",
+                size: "5px 10px"
+            },
+            {
+                color: "rgba(110, 90, 230, 0.3)",
+                pos: "100% 27%",
+                size: "11px 12px"
+            }
+        ]
+    },
+    sunset: {
+        border: [
+            {
+                color: "rgb(255, 180, 50)",
+                pos: "2% 68%",
+                size: "9px 18px"
+            },
+            {
+                color: "rgb(255, 150, 40)",
+                pos: "2% 68%",
+                size: "4px 8px"
+            },
+            {
+                color: "rgb(255, 80, 60)",
+                pos: "72% -3%",
+                size: "59px 9px"
+            },
+            {
+                color: "rgb(255, 100, 80)",
+                pos: "74% 100%",
+                size: "42px 7px"
+            },
+            {
+                color: "rgb(255, 60, 80)",
+                pos: "100% 27%",
+                size: "10px 17px"
+            },
+            {
+                color: "rgb(255, 120, 60)",
+                pos: "100% 27%",
+                size: "10px 18px"
+            },
+            {
+                color: "rgb(255, 200, 50)",
+                pos: "100% 27%",
+                size: "5px 10px"
+            },
+            {
+                color: "rgb(255, 90, 70)",
+                pos: "100% 27%",
+                size: "11px 12px"
+            }
+        ],
+        inner: [
+            {
+                color: "rgba(255, 180, 50, 0.5)",
+                pos: "2% 68%",
+                size: "9px 18px"
+            },
+            {
+                color: "rgba(255, 150, 40, 0.45)",
+                pos: "2% 68%",
+                size: "4px 8px"
+            },
+            {
+                color: "rgba(255, 80, 60, 0.35)",
+                pos: "72% -3%",
+                size: "59px 9px"
+            },
+            {
+                color: "rgba(255, 100, 80, 0.35)",
+                pos: "74% 100%",
+                size: "42px 7px"
+            },
+            {
+                color: "rgba(255, 60, 80, 0.3)",
+                pos: "100% 27%",
+                size: "10px 17px"
+            },
+            {
+                color: "rgba(255, 120, 60, 0.4)",
+                pos: "100% 27%",
+                size: "10px 18px"
+            },
+            {
+                color: "rgba(255, 200, 50, 0.3)",
+                pos: "100% 27%",
+                size: "5px 10px"
+            },
+            {
+                color: "rgba(255, 90, 70, 0.3)",
+                pos: "100% 27%",
+                size: "11px 12px"
+            }
+        ]
+    }
+};
+function toRgba(input, alpha) {
+    const hex = input.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+    if (hex) {
+        const h = hex[1];
+        const r = parseInt(h.length === 3 ? h[0] + h[0] : h.slice(0, 2), 16);
+        const g = parseInt(h.length === 3 ? h[1] + h[1] : h.slice(2, 4), 16);
+        const b = parseInt(h.length === 3 ? h[2] + h[2] : h.slice(4, 6), 16);
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+    const rgba = input.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/);
+    if (rgba) return `rgba(${rgba[1]}, ${rgba[2]}, ${rgba[3]}, ${alpha})`;
+    return input;
+}
+function pickColor(customColors, presetColor, index) {
+    if (!customColors || customColors.length === 0) return presetColor;
+    return customColors[index % customColors.length];
+}
+function pickColorAtAlpha(customColors, presetColor, index, alpha) {
+    if (!customColors || customColors.length === 0) {
+        return presetColor.replace("rgb(", "rgba(").replace(")", `, ${alpha})`);
+    }
+    return toRgba(customColors[index % customColors.length], alpha);
+}
+export function smBorderGradient(variant, customColors) {
+    return smGradients[variant].border.map((s, i)=>`radial-gradient(ellipse ${s.size} at ${s.pos}, ${pickColor(customColors, s.color, i)}, transparent)`).join(",\n    ");
+}
+export function smInnerGradient(variant, customColors) {
+    return smGradients[variant].inner.map((s, i)=>{
+        if (!customColors || customColors.length === 0) {
+            return `radial-gradient(ellipse ${s.size} at ${s.pos}, ${s.color}, transparent)`;
+        }
+        const alphaMatch = s.color.match(/[\d.]+\s*\)$/);
+        const alpha = alphaMatch ? parseFloat(alphaMatch[0]) : 0.4;
+        return `radial-gradient(ellipse ${s.size} at ${s.pos}, ${toRgba(customColors[i % customColors.length], alpha)}, transparent)`;
+    }).join(",\n    ");
+}
+export function mdBorderGradient(variant, customColors) {
+    return borderColors[variant].border.map((s, i)=>`radial-gradient(ellipse ${s.size} at ${s.pos}, ${pickColor(customColors, s.color, i)}, transparent)`).join(",\n    ");
+}
+export function mdInnerGradient(variant, customColors) {
+    const cfg = borderColors[variant];
+    const alpha = variant === "mono" ? 0.225 : 0.45;
+    return cfg.border.map((s, i)=>{
+        const color = pickColorAtAlpha(customColors, s.color, i, alpha);
+        const size = s.size.split(" ").map((v)=>`${Math.round(parseInt(v) * 0.9)}px`).join(" ");
+        return `radial-gradient(ellipse ${size} at ${s.pos}, ${color}, transparent)`;
+    }).join(",\n    ");
+}
+export function spikeColors(variant, dark, customColors) {
+    if (customColors && customColors.length > 0) {
+        const primary = customColors[0];
+        const secondary = customColors[customColors.length - 1] ?? customColors[0];
+        return {
+            primary,
+            secondary
+        };
+    }
+    const cfg = borderColors[variant];
+    return dark ? cfg.spike : cfg.spikeLt;
+}
+const lineBorderGradients = {
+    colorful: {
+        dark: [
+            {
+                color: "rgb(255, 50, 100)",
+                sizeW: 36,
+                sizeH: 36,
+                offsetX: 0,
+                offsetY: 2
+            },
+            {
+                color: "rgb(40, 180, 220)",
+                sizeW: 30,
+                sizeH: 32,
+                offsetX: 39,
+                offsetY: 0
+            },
+            {
+                color: "rgb(50, 200, 80)",
+                sizeW: 33,
+                sizeH: 28,
+                offsetX: -36,
+                offsetY: 2
+            },
+            {
+                color: "rgb(180, 40, 240)",
+                sizeW: 29,
+                sizeH: 34,
+                offsetX: -54,
+                offsetY: 0
+            },
+            {
+                color: "rgb(255, 160, 30)",
+                sizeW: 27,
+                sizeH: 30,
+                offsetX: 51,
+                offsetY: -1
+            },
+            {
+                color: "rgb(100, 70, 255)",
+                sizeW: 36,
+                sizeH: 24,
+                offsetX: 21,
+                offsetY: 1
+            },
+            {
+                color: "rgb(40, 140, 255)",
+                sizeW: 30,
+                sizeH: 22,
+                offsetX: -21,
+                offsetY: 0
+            },
+            {
+                color: "rgb(240, 50, 180)",
+                sizeW: 25,
+                sizeH: 28,
+                offsetX: 66,
+                offsetY: 1
+            },
+            {
+                color: "rgb(30, 185, 170)",
+                sizeW: 23,
+                sizeH: 30,
+                offsetX: -66,
+                offsetY: -1
+            }
+        ],
+        light: [
+            {
+                color: "rgb(255, 50, 100)",
+                sizeW: 45,
+                sizeH: 36,
+                offsetX: 0,
+                offsetY: 2
+            },
+            {
+                color: "rgb(40, 140, 255)",
+                sizeW: 35,
+                sizeH: 32,
+                offsetX: 65,
+                offsetY: 0
+            },
+            {
+                color: "rgb(50, 200, 80)",
+                sizeW: 40,
+                sizeH: 28,
+                offsetX: -60,
+                offsetY: 2
+            },
+            {
+                color: "rgb(180, 40, 240)",
+                sizeW: 35,
+                sizeH: 34,
+                offsetX: -90,
+                offsetY: 0
+            },
+            {
+                color: "rgb(30, 185, 170)",
+                sizeW: 38,
+                sizeH: 30,
+                offsetX: 85,
+                offsetY: -1
+            },
+            {
+                color: "rgb(100, 70, 255)",
+                sizeW: 50,
+                sizeH: 24,
+                offsetX: 35,
+                offsetY: 1
+            },
+            {
+                color: "rgb(40, 140, 255)",
+                sizeW: 40,
+                sizeH: 22,
+                offsetX: -35,
+                offsetY: 0
+            },
+            {
+                color: "rgb(255, 120, 40)",
+                sizeW: 35,
+                sizeH: 28,
+                offsetX: 110,
+                offsetY: 1
+            },
+            {
+                color: "rgb(240, 50, 180)",
+                sizeW: 30,
+                sizeH: 30,
+                offsetX: -110,
+                offsetY: -1
+            }
+        ]
+    },
+    mono: {
+        dark: [
+            {
+                color: "rgb(200, 200, 200)",
+                sizeW: 36,
+                sizeH: 36,
+                offsetX: 0,
+                offsetY: 2
+            },
+            {
+                color: "rgb(170, 170, 170)",
+                sizeW: 30,
+                sizeH: 32,
+                offsetX: 39,
+                offsetY: 0
+            },
+            {
+                color: "rgb(155, 155, 155)",
+                sizeW: 33,
+                sizeH: 28,
+                offsetX: -36,
+                offsetY: 2
+            },
+            {
+                color: "rgb(185, 185, 185)",
+                sizeW: 29,
+                sizeH: 34,
+                offsetX: -54,
+                offsetY: 0
+            },
+            {
+                color: "rgb(165, 165, 165)",
+                sizeW: 27,
+                sizeH: 30,
+                offsetX: 51,
+                offsetY: -1
+            },
+            {
+                color: "rgb(180, 180, 180)",
+                sizeW: 36,
+                sizeH: 24,
+                offsetX: 21,
+                offsetY: 1
+            },
+            {
+                color: "rgb(160, 160, 160)",
+                sizeW: 30,
+                sizeH: 22,
+                offsetX: -21,
+                offsetY: 0
+            },
+            {
+                color: "rgb(175, 175, 175)",
+                sizeW: 25,
+                sizeH: 28,
+                offsetX: 66,
+                offsetY: 1
+            },
+            {
+                color: "rgb(190, 190, 190)",
+                sizeW: 23,
+                sizeH: 30,
+                offsetX: -66,
+                offsetY: -1
+            }
+        ],
+        light: [
+            {
+                color: "rgb(100, 100, 100)",
+                sizeW: 45,
+                sizeH: 36,
+                offsetX: 0,
+                offsetY: 2
+            },
+            {
+                color: "rgb(80, 80, 80)",
+                sizeW: 35,
+                sizeH: 32,
+                offsetX: 65,
+                offsetY: 0
+            },
+            {
+                color: "rgb(90, 90, 90)",
+                sizeW: 40,
+                sizeH: 28,
+                offsetX: -60,
+                offsetY: 2
+            },
+            {
+                color: "rgb(70, 70, 70)",
+                sizeW: 35,
+                sizeH: 34,
+                offsetX: -90,
+                offsetY: 0
+            },
+            {
+                color: "rgb(85, 85, 85)",
+                sizeW: 38,
+                sizeH: 30,
+                offsetX: 85,
+                offsetY: -1
+            },
+            {
+                color: "rgb(95, 95, 95)",
+                sizeW: 50,
+                sizeH: 24,
+                offsetX: 35,
+                offsetY: 1
+            },
+            {
+                color: "rgb(75, 75, 75)",
+                sizeW: 40,
+                sizeH: 22,
+                offsetX: -35,
+                offsetY: 0
+            },
+            {
+                color: "rgb(105, 105, 105)",
+                sizeW: 35,
+                sizeH: 28,
+                offsetX: 110,
+                offsetY: 1
+            },
+            {
+                color: "rgb(65, 65, 65)",
+                sizeW: 30,
+                sizeH: 30,
+                offsetX: -110,
+                offsetY: -1
+            }
+        ]
+    },
+    ocean: {
+        dark: [
+            {
+                color: "rgb(100, 80, 220)",
+                sizeW: 36,
+                sizeH: 36,
+                offsetX: 0,
+                offsetY: 2
+            },
+            {
+                color: "rgb(60, 120, 255)",
+                sizeW: 30,
+                sizeH: 32,
+                offsetX: 39,
+                offsetY: 0
+            },
+            {
+                color: "rgb(80, 100, 200)",
+                sizeW: 33,
+                sizeH: 28,
+                offsetX: -36,
+                offsetY: 2
+            },
+            {
+                color: "rgb(130, 70, 255)",
+                sizeW: 29,
+                sizeH: 34,
+                offsetX: -54,
+                offsetY: 0
+            },
+            {
+                color: "rgb(70, 130, 255)",
+                sizeW: 27,
+                sizeH: 30,
+                offsetX: 51,
+                offsetY: -1
+            },
+            {
+                color: "rgb(120, 80, 255)",
+                sizeW: 36,
+                sizeH: 24,
+                offsetX: 21,
+                offsetY: 1
+            },
+            {
+                color: "rgb(90, 110, 230)",
+                sizeW: 30,
+                sizeH: 22,
+                offsetX: -21,
+                offsetY: 0
+            },
+            {
+                color: "rgb(110, 90, 240)",
+                sizeW: 25,
+                sizeH: 28,
+                offsetX: 66,
+                offsetY: 1
+            },
+            {
+                color: "rgb(140, 100, 255)",
+                sizeW: 23,
+                sizeH: 30,
+                offsetX: -66,
+                offsetY: -1
+            }
+        ],
+        light: [
+            {
+                color: "rgb(80, 60, 200)",
+                sizeW: 45,
+                sizeH: 36,
+                offsetX: 0,
+                offsetY: 2
+            },
+            {
+                color: "rgb(50, 100, 220)",
+                sizeW: 35,
+                sizeH: 32,
+                offsetX: 65,
+                offsetY: 0
+            },
+            {
+                color: "rgb(70, 90, 190)",
+                sizeW: 40,
+                sizeH: 28,
+                offsetX: -60,
+                offsetY: 2
+            },
+            {
+                color: "rgb(110, 60, 220)",
+                sizeW: 35,
+                sizeH: 34,
+                offsetX: -90,
+                offsetY: 0
+            },
+            {
+                color: "rgb(60, 110, 230)",
+                sizeW: 38,
+                sizeH: 30,
+                offsetX: 85,
+                offsetY: -1
+            },
+            {
+                color: "rgb(100, 70, 240)",
+                sizeW: 50,
+                sizeH: 24,
+                offsetX: 35,
+                offsetY: 1
+            },
+            {
+                color: "rgb(80, 100, 210)",
+                sizeW: 40,
+                sizeH: 22,
+                offsetX: -35,
+                offsetY: 0
+            },
+            {
+                color: "rgb(90, 80, 225)",
+                sizeW: 35,
+                sizeH: 28,
+                offsetX: 110,
+                offsetY: 1
+            },
+            {
+                color: "rgb(120, 90, 245)",
+                sizeW: 30,
+                sizeH: 30,
+                offsetX: -110,
+                offsetY: -1
+            }
+        ]
+    },
+    sunset: {
+        dark: [
+            {
+                color: "rgb(255, 100, 60)",
+                sizeW: 36,
+                sizeH: 36,
+                offsetX: 0,
+                offsetY: 2
+            },
+            {
+                color: "rgb(255, 180, 50)",
+                sizeW: 30,
+                sizeH: 32,
+                offsetX: 39,
+                offsetY: 0
+            },
+            {
+                color: "rgb(255, 140, 70)",
+                sizeW: 33,
+                sizeH: 28,
+                offsetX: -36,
+                offsetY: 2
+            },
+            {
+                color: "rgb(255, 80, 80)",
+                sizeW: 29,
+                sizeH: 34,
+                offsetX: -54,
+                offsetY: 0
+            },
+            {
+                color: "rgb(255, 200, 60)",
+                sizeW: 27,
+                sizeH: 30,
+                offsetX: 51,
+                offsetY: -1
+            },
+            {
+                color: "rgb(255, 120, 50)",
+                sizeW: 36,
+                sizeH: 24,
+                offsetX: 21,
+                offsetY: 1
+            },
+            {
+                color: "rgb(255, 160, 80)",
+                sizeW: 30,
+                sizeH: 22,
+                offsetX: -21,
+                offsetY: 0
+            },
+            {
+                color: "rgb(255, 90, 60)",
+                sizeW: 25,
+                sizeH: 28,
+                offsetX: 66,
+                offsetY: 1
+            },
+            {
+                color: "rgb(255, 70, 70)",
+                sizeW: 23,
+                sizeH: 30,
+                offsetX: -66,
+                offsetY: -1
+            }
+        ],
+        light: [
+            {
+                color: "rgb(220, 80, 40)",
+                sizeW: 45,
+                sizeH: 36,
+                offsetX: 0,
+                offsetY: 2
+            },
+            {
+                color: "rgb(230, 150, 30)",
+                sizeW: 35,
+                sizeH: 32,
+                offsetX: 65,
+                offsetY: 0
+            },
+            {
+                color: "rgb(210, 110, 50)",
+                sizeW: 40,
+                sizeH: 28,
+                offsetX: -60,
+                offsetY: 2
+            },
+            {
+                color: "rgb(200, 60, 60)",
+                sizeW: 35,
+                sizeH: 34,
+                offsetX: -90,
+                offsetY: 0
+            },
+            {
+                color: "rgb(220, 170, 40)",
+                sizeW: 38,
+                sizeH: 30,
+                offsetX: 85,
+                offsetY: -1
+            },
+            {
+                color: "rgb(210, 100, 30)",
+                sizeW: 50,
+                sizeH: 24,
+                offsetX: 35,
+                offsetY: 1
+            },
+            {
+                color: "rgb(230, 130, 60)",
+                sizeW: 40,
+                sizeH: 22,
+                offsetX: -35,
+                offsetY: 0
+            },
+            {
+                color: "rgb(190, 70, 50)",
+                sizeW: 35,
+                sizeH: 28,
+                offsetX: 110,
+                offsetY: 1
+            },
+            {
+                color: "rgb(180, 50, 50)",
+                sizeW: 30,
+                sizeH: 30,
+                offsetX: -110,
+                offsetY: -1
+            }
+        ]
+    }
+};
+export function lineBorderGradient(variant, dark, id, customColors) {
+    return lineBorderGradients[variant][dark ? "dark" : "light"].map((s, i)=>{
+        const ox = s.offsetX === 0 ? "" : s.offsetX > 0 ? ` + ${s.offsetX}px` : ` - ${Math.abs(s.offsetX)}px`;
+        const oy = s.offsetY === 0 ? "" : s.offsetY > 0 ? ` + ${s.offsetY}px` : ` - ${Math.abs(s.offsetY)}px`;
+        const color = pickColor(customColors, s.color, i);
+        return `radial-gradient(ellipse calc(${s.sizeW}px * var(--beam-w-${id})) calc(${s.sizeH}px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%${ox}) calc(100%${oy}), ${color}, transparent)`;
+    }).join(",\n       ");
+}
+const lineInnerGradients = {
+    colorful: [
+        {
+            color: "rgba(255, 50, 100, 0.48)",
+            sizeW: 33,
+            sizeH: 30,
+            offsetX: 0,
+            offsetY: 0
+        },
+        {
+            color: "rgba(40, 180, 220, 0.42)",
+            sizeW: 24,
+            sizeH: 26,
+            offsetX: 39,
+            offsetY: -3
+        },
+        {
+            color: "rgba(50, 200, 80, 0.48)",
+            sizeW: 27,
+            sizeH: 24,
+            offsetX: -36,
+            offsetY: 0
+        },
+        {
+            color: "rgba(180, 40, 240, 0.42)",
+            sizeW: 23,
+            sizeH: 28,
+            offsetX: -54,
+            offsetY: -2
+        },
+        {
+            color: "rgba(255, 160, 30, 0.50)",
+            sizeW: 24,
+            sizeH: 24,
+            offsetX: 51,
+            offsetY: -1
+        },
+        {
+            color: "rgba(100, 70, 255, 0.45)",
+            sizeW: 30,
+            sizeH: 20,
+            offsetX: 21,
+            offsetY: 0
+        },
+        {
+            color: "rgba(40, 140, 255, 0.40)",
+            sizeW: 25,
+            sizeH: 18,
+            offsetX: -21,
+            offsetY: -2
+        },
+        {
+            color: "rgba(240, 50, 180, 0.45)",
+            sizeW: 21,
+            sizeH: 24,
+            offsetX: 66,
+            offsetY: 0
+        },
+        {
+            color: "rgba(30, 185, 170, 0.52)",
+            sizeW: 18,
+            sizeH: 26,
+            offsetX: -66,
+            offsetY: -1
+        }
+    ],
+    mono: [
+        {
+            color: "rgba(200, 200, 200, 0.48)",
+            sizeW: 33,
+            sizeH: 30,
+            offsetX: 0,
+            offsetY: 0
+        },
+        {
+            color: "rgba(170, 170, 170, 0.42)",
+            sizeW: 24,
+            sizeH: 26,
+            offsetX: 39,
+            offsetY: -3
+        },
+        {
+            color: "rgba(155, 155, 155, 0.48)",
+            sizeW: 27,
+            sizeH: 24,
+            offsetX: -36,
+            offsetY: 0
+        },
+        {
+            color: "rgba(185, 185, 185, 0.42)",
+            sizeW: 23,
+            sizeH: 28,
+            offsetX: -54,
+            offsetY: -2
+        },
+        {
+            color: "rgba(165, 165, 165, 0.50)",
+            sizeW: 24,
+            sizeH: 24,
+            offsetX: 51,
+            offsetY: -1
+        },
+        {
+            color: "rgba(180, 180, 180, 0.45)",
+            sizeW: 30,
+            sizeH: 20,
+            offsetX: 21,
+            offsetY: 0
+        },
+        {
+            color: "rgba(160, 160, 160, 0.40)",
+            sizeW: 25,
+            sizeH: 18,
+            offsetX: -21,
+            offsetY: -2
+        },
+        {
+            color: "rgba(175, 175, 175, 0.45)",
+            sizeW: 21,
+            sizeH: 24,
+            offsetX: 66,
+            offsetY: 0
+        },
+        {
+            color: "rgba(190, 190, 190, 0.52)",
+            sizeW: 18,
+            sizeH: 26,
+            offsetX: -66,
+            offsetY: -1
+        }
+    ],
+    ocean: [
+        {
+            color: "rgba(100, 80, 220, 0.48)",
+            sizeW: 33,
+            sizeH: 30,
+            offsetX: 0,
+            offsetY: 0
+        },
+        {
+            color: "rgba(60, 120, 255, 0.42)",
+            sizeW: 24,
+            sizeH: 26,
+            offsetX: 39,
+            offsetY: -3
+        },
+        {
+            color: "rgba(80, 100, 200, 0.48)",
+            sizeW: 27,
+            sizeH: 24,
+            offsetX: -36,
+            offsetY: 0
+        },
+        {
+            color: "rgba(130, 70, 255, 0.42)",
+            sizeW: 23,
+            sizeH: 28,
+            offsetX: -54,
+            offsetY: -2
+        },
+        {
+            color: "rgba(70, 130, 255, 0.50)",
+            sizeW: 24,
+            sizeH: 24,
+            offsetX: 51,
+            offsetY: -1
+        },
+        {
+            color: "rgba(120, 80, 255, 0.45)",
+            sizeW: 30,
+            sizeH: 20,
+            offsetX: 21,
+            offsetY: 0
+        },
+        {
+            color: "rgba(90, 110, 230, 0.40)",
+            sizeW: 25,
+            sizeH: 18,
+            offsetX: -21,
+            offsetY: -2
+        },
+        {
+            color: "rgba(110, 90, 240, 0.45)",
+            sizeW: 21,
+            sizeH: 24,
+            offsetX: 66,
+            offsetY: 0
+        },
+        {
+            color: "rgba(140, 100, 255, 0.52)",
+            sizeW: 18,
+            sizeH: 26,
+            offsetX: -66,
+            offsetY: -1
+        }
+    ],
+    sunset: [
+        {
+            color: "rgba(255, 100, 60, 0.48)",
+            sizeW: 33,
+            sizeH: 30,
+            offsetX: 0,
+            offsetY: 0
+        },
+        {
+            color: "rgba(255, 180, 50, 0.42)",
+            sizeW: 24,
+            sizeH: 26,
+            offsetX: 39,
+            offsetY: -3
+        },
+        {
+            color: "rgba(255, 140, 70, 0.48)",
+            sizeW: 27,
+            sizeH: 24,
+            offsetX: -36,
+            offsetY: 0
+        },
+        {
+            color: "rgba(255, 80, 80, 0.42)",
+            sizeW: 23,
+            sizeH: 28,
+            offsetX: -54,
+            offsetY: -2
+        },
+        {
+            color: "rgba(255, 200, 60, 0.50)",
+            sizeW: 24,
+            sizeH: 24,
+            offsetX: 51,
+            offsetY: -1
+        },
+        {
+            color: "rgba(255, 120, 50, 0.45)",
+            sizeW: 30,
+            sizeH: 20,
+            offsetX: 21,
+            offsetY: 0
+        },
+        {
+            color: "rgba(255, 160, 80, 0.40)",
+            sizeW: 25,
+            sizeH: 18,
+            offsetX: -21,
+            offsetY: -2
+        },
+        {
+            color: "rgba(255, 90, 60, 0.45)",
+            sizeW: 21,
+            sizeH: 24,
+            offsetX: 66,
+            offsetY: 0
+        },
+        {
+            color: "rgba(255, 70, 70, 0.52)",
+            sizeW: 18,
+            sizeH: 26,
+            offsetX: -66,
+            offsetY: -1
+        }
+    ]
+};
+export function lineInnerGradient(variant, id, customColors) {
+    return lineInnerGradients[variant].map((s, i)=>{
+        const ox = s.offsetX === 0 ? "" : s.offsetX > 0 ? ` + ${s.offsetX}px` : ` - ${Math.abs(s.offsetX)}px`;
+        const oy = s.offsetY === 0 ? "" : ` - ${Math.abs(s.offsetY)}px`;
+        let color = s.color;
+        if (customColors && customColors.length > 0) {
+            const alphaMatch = s.color.match(/[\d.]+\s*\)$/);
+            const alpha = alphaMatch ? parseFloat(alphaMatch[0]) : 0.45;
+            color = toRgba(customColors[i % customColors.length], alpha);
+        }
+        return `radial-gradient(ellipse calc(${s.sizeW}px * var(--beam-w-${id})) calc(${s.sizeH}px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%${ox}) calc(100%${oy}), ${color}, transparent)`;
+    }).join(",\n    ");
+}
+const lineSpikeColors = {
+    colorful: {
+        dark: {
+            spikes: [
+                {
+                    color1: "rgb(100, 70, 255)",
+                    color2: "rgba(100, 70, 255, 1)"
+                },
+                {
+                    color1: "rgba(255, 170, 40, 0.59)",
+                    color2: "rgba(255, 170, 40, 0.29)"
+                },
+                {
+                    color1: "rgb(50, 200, 100)",
+                    color2: "rgba(50, 200, 100, 1)"
+                },
+                {
+                    color1: "rgba(200, 50, 240, 0.91)",
+                    color2: "rgba(200, 50, 240, 0.45)"
+                },
+                {
+                    color1: "rgb(40, 140, 255)",
+                    color2: "rgba(40, 140, 255, 1)"
+                }
+            ]
+        },
+        light: {
+            spikes: [
+                {
+                    color1: "rgb(80, 50, 200)",
+                    color2: "rgba(80, 50, 200, 0.8)"
+                },
+                {
+                    color1: "rgba(210, 130, 0, 0.7)",
+                    color2: "rgba(210, 130, 0, 0.46)"
+                },
+                {
+                    color1: "rgb(30, 160, 70)",
+                    color2: "rgba(30, 160, 70, 0.82)"
+                },
+                {
+                    color1: "rgb(160, 30, 190)",
+                    color2: "rgba(160, 30, 190, 0.7)"
+                },
+                {
+                    color1: "rgb(30, 100, 200)",
+                    color2: "rgba(30, 100, 200, 0.78)"
+                }
+            ]
+        }
+    },
+    mono: {
+        dark: {
+            spikes: [
+                {
+                    color1: "rgb(200, 200, 200)",
+                    color2: "rgba(200, 200, 200, 1)"
+                },
+                {
+                    color1: "rgba(180, 180, 180, 0.59)",
+                    color2: "rgba(180, 180, 180, 0.29)"
+                },
+                {
+                    color1: "rgb(190, 190, 190)",
+                    color2: "rgba(190, 190, 190, 1)"
+                },
+                {
+                    color1: "rgba(170, 170, 170, 0.91)",
+                    color2: "rgba(170, 170, 170, 0.45)"
+                },
+                {
+                    color1: "rgb(185, 185, 185)",
+                    color2: "rgba(185, 185, 185, 1)"
+                }
+            ]
+        },
+        light: {
+            spikes: [
+                {
+                    color1: "rgb(80, 80, 80)",
+                    color2: "rgba(80, 80, 80, 0.8)"
+                },
+                {
+                    color1: "rgba(100, 100, 100, 0.7)",
+                    color2: "rgba(100, 100, 100, 0.46)"
+                },
+                {
+                    color1: "rgb(70, 70, 70)",
+                    color2: "rgba(70, 70, 70, 0.82)"
+                },
+                {
+                    color1: "rgb(90, 90, 90)",
+                    color2: "rgba(90, 90, 90, 0.7)"
+                },
+                {
+                    color1: "rgb(85, 85, 85)",
+                    color2: "rgba(85, 85, 85, 0.78)"
+                }
+            ]
+        }
+    },
+    ocean: {
+        dark: {
+            spikes: [
+                {
+                    color1: "rgb(100, 80, 255)",
+                    color2: "rgb(100, 80, 255)"
+                },
+                {
+                    color1: "rgba(80, 130, 220, 0.59)",
+                    color2: "rgba(80, 130, 220, 0.29)"
+                },
+                {
+                    color1: "rgb(60, 100, 255)",
+                    color2: "rgb(60, 100, 255)"
+                },
+                {
+                    color1: "rgba(90, 120, 200, 0.91)",
+                    color2: "rgba(90, 120, 200, 0.45)"
+                },
+                {
+                    color1: "rgb(120, 90, 255)",
+                    color2: "rgb(120, 90, 255)"
+                }
+            ]
+        },
+        light: {
+            spikes: [
+                {
+                    color1: "rgb(50, 40, 180)",
+                    color2: "rgba(50, 40, 180, 0.8)"
+                },
+                {
+                    color1: "rgba(40, 80, 200, 0.7)",
+                    color2: "rgba(40, 80, 200, 0.46)"
+                },
+                {
+                    color1: "rgb(30, 50, 190)",
+                    color2: "rgba(30, 50, 190, 0.82)"
+                },
+                {
+                    color1: "rgb(60, 90, 180)",
+                    color2: "rgba(60, 90, 180, 0.7)"
+                },
+                {
+                    color1: "rgb(70, 60, 200)",
+                    color2: "rgba(70, 60, 200, 0.78)"
+                }
+            ]
+        }
+    },
+    sunset: {
+        dark: {
+            spikes: [
+                {
+                    color1: "rgb(255, 100, 80)",
+                    color2: "rgb(255, 100, 80)"
+                },
+                {
+                    color1: "rgba(255, 150, 80, 0.59)",
+                    color2: "rgba(255, 150, 80, 0.29)"
+                },
+                {
+                    color1: "rgb(255, 80, 60)",
+                    color2: "rgb(255, 80, 60)"
+                },
+                {
+                    color1: "rgba(255, 120, 50, 0.91)",
+                    color2: "rgba(255, 120, 50, 0.45)"
+                },
+                {
+                    color1: "rgb(255, 140, 70)",
+                    color2: "rgb(255, 140, 70)"
+                }
+            ]
+        },
+        light: {
+            spikes: [
+                {
+                    color1: "rgb(200, 60, 30)",
+                    color2: "rgba(200, 60, 30, 0.8)"
+                },
+                {
+                    color1: "rgba(220, 100, 20, 0.7)",
+                    color2: "rgba(220, 100, 20, 0.46)"
+                },
+                {
+                    color1: "rgb(180, 40, 20)",
+                    color2: "rgba(180, 40, 20, 0.82)"
+                },
+                {
+                    color1: "rgb(210, 80, 10)",
+                    color2: "rgba(210, 80, 10, 0.7)"
+                },
+                {
+                    color1: "rgb(190, 70, 30)",
+                    color2: "rgba(190, 70, 30, 0.78)"
+                }
+            ]
+        }
+    }
+};
+function colorWithAlpha(color, alpha) {
+    const rgba = color.match(/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*[\d.]+\s*\)$/);
+    if (rgba) return `rgba(${rgba[1]}, ${rgba[2]}, ${rgba[3]}, ${alpha})`;
+    const rgb = color.match(/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);
+    return rgb ? `rgba(${rgb[1]}, ${rgb[2]}, ${rgb[3]}, ${alpha})` : color;
+}
+function monoLineBloom(dark, id) {
+    return dark ? `radial-gradient(ellipse calc(18px * var(--beam-spike-${id})) calc(30px * var(--beam-h-${id})) at 8% calc(100% - 2px), rgba(200, 200, 200, 0.35), rgba(200, 200, 200, 0.12) 50%, transparent 100%),
+       radial-gradient(ellipse calc(14px * var(--beam-spike2-${id})) calc(28px * var(--beam-h-${id})) at 22% calc(100% - 4px), rgba(170, 170, 170, 0.3), rgba(170, 170, 170, 0.1) 50%, transparent 100%),
+       radial-gradient(ellipse calc(16px * var(--beam-spike-${id})) calc(32px * var(--beam-h-${id})) at 36% calc(100% - 3px), rgba(190, 190, 190, 0.35), rgba(190, 190, 190, 0.12) 50%, transparent 100%),
+       radial-gradient(ellipse calc(20px * var(--beam-spike2-${id})) calc(25px * var(--beam-h-${id})) at 50% calc(100% - 2px), rgba(180, 180, 180, 0.25), rgba(180, 180, 180, 0.08) 55%, transparent 100%),
+       radial-gradient(ellipse calc(15px * var(--beam-spike2-${id})) calc(30px * var(--beam-h-${id})) at 64% calc(100% - 4px), rgba(185, 185, 185, 0.32), rgba(185, 185, 185, 0.1) 50%, transparent 100%),
+       radial-gradient(ellipse calc(12px * var(--beam-spike-${id})) calc(28px * var(--beam-h-${id})) at 78% calc(100% - 2px), rgba(175, 175, 175, 0.28), rgba(175, 175, 175, 0.09) 50%, transparent 100%),
+       radial-gradient(ellipse calc(17px * var(--beam-spike-${id})) calc(26px * var(--beam-h-${id})) at 92% calc(100% - 3px), rgba(195, 195, 195, 0.3), rgba(195, 195, 195, 0.1) 50%, transparent 100%),
+       radial-gradient(ellipse calc(21px * var(--beam-spike-${id})) calc(15px * var(--beam-spike2-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
+       radial-gradient(ellipse calc(42px * var(--beam-w-${id})) calc(40px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%)` : `radial-gradient(ellipse calc(18px * var(--beam-spike-${id})) calc(30px * var(--beam-h-${id})) at 8% calc(100% - 2px), rgba(80, 80, 80, 0.3), rgba(80, 80, 80, 0.1) 50%, transparent 100%),
+       radial-gradient(ellipse calc(14px * var(--beam-spike2-${id})) calc(28px * var(--beam-h-${id})) at 22% calc(100% - 4px), rgba(100, 100, 100, 0.25), rgba(100, 100, 100, 0.08) 50%, transparent 100%),
+       radial-gradient(ellipse calc(16px * var(--beam-spike-${id})) calc(32px * var(--beam-h-${id})) at 36% calc(100% - 3px), rgba(70, 70, 70, 0.3), rgba(70, 70, 70, 0.1) 50%, transparent 100%),
+       radial-gradient(ellipse calc(20px * var(--beam-spike2-${id})) calc(25px * var(--beam-h-${id})) at 50% calc(100% - 2px), rgba(90, 90, 90, 0.22), rgba(90, 90, 90, 0.07) 55%, transparent 100%),
+       radial-gradient(ellipse calc(15px * var(--beam-spike2-${id})) calc(30px * var(--beam-h-${id})) at 64% calc(100% - 4px), rgba(85, 85, 85, 0.28), rgba(85, 85, 85, 0.09) 50%, transparent 100%),
+       radial-gradient(ellipse calc(12px * var(--beam-spike-${id})) calc(28px * var(--beam-h-${id})) at 78% calc(100% - 2px), rgba(95, 95, 95, 0.24), rgba(95, 95, 95, 0.08) 50%, transparent 100%),
+       radial-gradient(ellipse calc(17px * var(--beam-spike-${id})) calc(26px * var(--beam-h-${id})) at 92% calc(100% - 3px), rgba(75, 75, 75, 0.26), rgba(75, 75, 75, 0.08) 50%, transparent 100%),
+       radial-gradient(ellipse calc(50px * var(--beam-w-${id})) calc(32px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100%), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%)`;
+}
+export function lineBloomGradient(variant, dark, id, customColors) {
+    const spike = spikeColors(variant, dark, customColors);
+    const primary = spike.primary;
+    const secondary = spike.secondary;
+    const presetSpikes = lineSpikeColors[variant][dark ? "dark" : "light"].spikes;
+    const spikes = customColors && customColors.length > 0 ? presetSpikes.map((s, i)=>{
+        const c = customColors[i % customColors.length];
+        const a1 = parseFloat(s.color1.match(/[\d.]+\s*\)$/)?.[0] ?? "1");
+        const a2 = parseFloat(s.color2.match(/[\d.]+\s*\)$/)?.[0] ?? "1");
+        return {
+            color1: toRgba(c, a1),
+            color2: toRgba(c, a2)
+        };
+    }) : presetSpikes;
+    if (variant === "mono" && (!customColors || customColors.length === 0)) return monoLineBloom(dark, id);
+    if (dark) {
+        const c = primary;
+        const f = primary;
+        const i = secondary;
+        const n = colorWithAlpha(secondary, 0.49);
+        return `radial-gradient(ellipse calc(0.8px * var(--beam-spike-${id})) calc(92px * var(--beam-h-${id})) at 8% calc(100% - 2px), ${c}, ${f} 30%, transparent 88%),
+       radial-gradient(ellipse calc(10px * var(--beam-spike2-${id})) calc(35px * var(--beam-h-${id})) at 22% calc(100% - 4px), ${i}, ${n} 50%, transparent 95%),
+       radial-gradient(ellipse calc(2px * (2 - var(--beam-spike-${id}))) calc(72px * var(--beam-h-${id})) at 36% calc(100% - 3px), ${spikes[0].color1}, ${spikes[0].color2} 40%, transparent 90%),
+       radial-gradient(ellipse calc(14px * var(--beam-spike2-${id})) calc(28px * var(--beam-h-${id})) at 50% calc(100% - 2px), ${spikes[1].color1}, ${spikes[1].color2} 55%, transparent 96%),
+       radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2-${id}))) calc(85px * var(--beam-h-${id})) at 64% calc(100% - 4px), ${spikes[2].color1}, ${spikes[2].color2} 35%, transparent 89%),
+       radial-gradient(ellipse calc(7px * var(--beam-spike-${id})) calc(45px * var(--beam-h-${id})) at 78% calc(100% - 2px), ${spikes[3].color1}, ${spikes[3].color2} 48%, transparent 94%),
+       radial-gradient(ellipse calc(0.6px * (2 - var(--beam-spike-${id}))) calc(60px * var(--beam-h-${id})) at 92% calc(100% - 3px), ${spikes[4].color1}, ${spikes[4].color2} 42%, transparent 91%),
+       radial-gradient(ellipse calc(21px * var(--beam-spike-${id})) calc(15px * var(--beam-spike2-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
+       radial-gradient(ellipse calc(42px * var(--beam-w-${id})) calc(40px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%)`;
+    }
+    const c = primary;
+    const f = colorWithAlpha(primary, 0.85);
+    const i = secondary;
+    const n = colorWithAlpha(secondary, 0.7);
+    return `radial-gradient(ellipse calc(0.8px * var(--beam-spike-${id})) calc(92px * var(--beam-h-${id})) at 8% calc(100% - 2px), ${c}, ${f} 30%, transparent 88%),
+       radial-gradient(ellipse calc(10px * var(--beam-spike2-${id})) calc(35px * var(--beam-h-${id})) at 22% calc(100% - 4px), ${i}, ${n} 50%, transparent 95%),
+       radial-gradient(ellipse calc(2px * (2 - var(--beam-spike-${id}))) calc(72px * var(--beam-h-${id})) at 36% calc(100% - 3px), ${spikes[0].color1}, ${spikes[0].color2} 40%, transparent 90%),
+       radial-gradient(ellipse calc(14px * var(--beam-spike2-${id})) calc(28px * var(--beam-h-${id})) at 50% calc(100% - 2px), ${spikes[1].color1}, ${spikes[1].color2} 55%, transparent 96%),
+       radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2-${id}))) calc(85px * var(--beam-h-${id})) at 64% calc(100% - 4px), ${spikes[2].color1}, ${spikes[2].color2} 35%, transparent 89%),
+       radial-gradient(ellipse calc(7px * var(--beam-spike-${id})) calc(45px * var(--beam-h-${id})) at 78% calc(100% - 2px), ${spikes[3].color1}, ${spikes[3].color2} 48%, transparent 94%),
+       radial-gradient(ellipse calc(1px * (2 - var(--beam-spike-${id}))) calc(60px * var(--beam-h-${id})) at 92% calc(100% - 3px), ${spikes[4].color1}, ${spikes[4].color2} 42%, transparent 91%),
+       radial-gradient(ellipse calc(50px * var(--beam-w-${id})) calc(32px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100%), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%)`;
+}