@paper-design/shaders 0.0.31-backbuffer-experiment.2 → 0.0.32

package/README.md

@@ -13,10 +13,13 @@ myDiv.style.width = '600px';
 myDiv.style.height = '400px';
 
 const shaderParams = {
-  u_color1: getShaderColorFromString("#283BFC"),
-  u_color2: getShaderColorFromString("#FF2828"),
-  u_color3: getShaderColorFromString("#dddddd"),
-  u_color4: getShaderColorFromString("#800080")
+  u_colorsCount: 4,
+  u_colors: [
+    getShaderColorFromString("#283bfc"),
+    getShaderColorFromString("#ff2828"),
+    getShaderColorFromString("#dddddd"),
+    getShaderColorFromString("#800080")
+  ],
 };
 
 const speed = 0.25;

package/dist/index.d.ts

@@ -36,7 +36,7 @@ export { ditheringFragmentShader, DitheringShapes, DitheringTypes, type Ditherin
 /** N-color gradient applied to the abstract shapes w/ grainy overlay & distortion  */
 export { grainGradientFragmentShader, grainGradientMeta, GrainGradientShapes, type GrainGradientParams, type GrainGradientUniforms, type GrainGradientShape, } from './shaders/grain-gradient';
 /** Liquid metal effect applied to the abstract shapes */
-export { liquidMetalFragmentShader, LiquidMetalShapes, type LiquidMetalParams, type LiquidMetalUniforms, type LiquidMetalShape, } from './shaders/liquid-metal';
+export { liquidMetalFragmentShader, type LiquidMetalParams, type LiquidMetalUniforms } from './shaders/liquid-metal';
 /** Border with configurable size & radius ade of rotating pulsing light spots  */
 export { pulsingBorderMeta, pulsingBorderFragmentShader, type PulsingBorderParams, type PulsingBorderUniforms, } from './shaders/pulsing-border';
 export { getShaderColorFromString } from './get-shader-color-from-string';

package/dist/shader-mount.d.ts

@@ -25,12 +25,6 @@ export declare class ShaderMount {
     private minPixelRatio;
     private maxPixelCount;
     private isSafari;
-    private framebuffer;
-    private framebufferTexture;
-    private framebufferWidth;
-    private framebufferHeight;
-    private framebufferSamplingProgram;
-    private framebufferSamplingUniformLocations;
     constructor(
     /** The div you'd like to mount the shader to. The shader will match its size. */
     parentElement: HTMLElement, fragmentShader: string, uniforms: ShaderMountUniforms, webGlContextAttributes?: WebGLContextAttributes, 
@@ -69,9 +63,6 @@ export declare class ShaderMount {
     private handleVisualViewportChange;
     /** Resize handler for when the container div changes size or the max pixel count changes and we want to resize our canvas to match */
     private handleResize;
-    private getCanvasSize;
-    private handleResolutionChange;
-    private ensureSceneTarget;
     private render;
     private requestRender;
     /** Creates a texture from an image and sets it into a uniform value */

package/dist/shaders/dithering.d.ts

@@ -6,8 +6,8 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  * abstract shapes animation (7 animated shapes available)
  *
  * Uniforms include:
- * - u_colorBack: background color, RGBA
- * - u_colorFront: pixels color, RGBA
+ * - u_color1: background color, RGBA
+ * - u_color2: pixels color, RGBA
  *
  * - u_shape (float, used as int, 1 to 7):
  *  --- shape = 1: Simplex noise pattern
@@ -29,15 +29,15 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  */
 export declare const ditheringFragmentShader: string;
 export interface DitheringUniforms extends ShaderSizingUniforms {
-    u_colorBack: [number, number, number, number];
-    u_colorFront: [number, number, number, number];
+    u_color1: [number, number, number, number];
+    u_color2: [number, number, number, number];
     u_shape: (typeof DitheringShapes)[DitheringShape];
     u_type: (typeof DitheringTypes)[DitheringType];
     u_pxSize: number;
 }
 export interface DitheringParams extends ShaderSizingParams, ShaderMotionParams {
-    colorBack?: string;
-    colorFront?: string;
+    color1?: string;
+    color2?: string;
     shape?: DitheringShape;
     type?: DitheringType;
     pxSize?: number;

package/dist/shaders/dot-orbit.d.ts

@@ -10,7 +10,6 @@ export declare const dotOrbitMeta: {
  * Renders a dot pattern with dot placed in the center of each cell of animated Voronoi diagram
  *
  * Uniforms include:
- * - u_colorBack (vec4): the background color of the scene
  * - u_colors (vec4[]): Input RGBA colors
  * - u_colorsCount (float): Number of active colors (`u_colors` length)
  * - u_stepsPerColor (float): Discretization of the color transition
@@ -20,7 +19,6 @@ export declare const dotOrbitMeta: {
  */
 export declare const dotOrbitFragmentShader: string;
 export interface DotOrbitUniforms extends ShaderSizingUniforms {
-    u_colorBack: [number, number, number, number];
     u_colors: vec4[];
     u_colorsCount: number;
     u_size: number;
@@ -29,7 +27,6 @@ export interface DotOrbitUniforms extends ShaderSizingUniforms {
     u_stepsPerColor: number;
 }
 export interface DotOrbitParams extends ShaderSizingParams, ShaderMotionParams {
-    colorBack?: string;
     colors?: string[];
     size?: number;
     sizeRange?: number;

package/dist/shaders/god-rays.d.ts

@@ -12,19 +12,17 @@ export declare const godRaysMeta: {
  * Uniforms include:
  *
  * - u_colorBack: background RGBA color
- * - u_colorBloom:
  * - uColors (vec4[]): Input RGBA colors
  * - u_frequency: the frequency of rays (the number of sectors)
  * - u_spotty: the density of spots in the rings (higher = more spots)
  * - u_midSize: the size of the central shape within the rings
  * - u_midIntensity: the influence of the central shape on the rings
  * - u_density (0 .. 1): the number of visible rays
- * - u_bloom (0 .. 1): normal / additive bloom
+ * - u_blending (0 .. 1): normal / additive blending
  */
 export declare const godRaysFragmentShader: string;
 export interface GodRaysUniforms extends ShaderSizingUniforms {
     u_colorBack: [number, number, number, number];
-    u_colorBloom: [number, number, number, number];
     u_colors: vec4[];
     u_colorsCount: number;
     u_spotty: number;
@@ -32,16 +30,15 @@ export interface GodRaysUniforms extends ShaderSizingUniforms {
     u_midIntensity: number;
     u_frequency: number;
     u_density: number;
-    u_bloom: number;
+    u_blending: number;
 }
 export interface GodRaysParams extends ShaderSizingParams, ShaderMotionParams {
     colorBack?: string;
-    colorBloom?: string;
     colors?: string[];
     spotty?: number;
     midSize?: number;
     midIntensity?: number;
     frequency?: number;
     density?: number;
-    bloom?: number;
+    blending?: number;
 }

package/dist/shaders/grain-gradient.d.ts

@@ -9,7 +9,6 @@ export declare const grainGradientMeta: {
  */
 export declare const grainGradientFragmentShader: string;
 export interface GrainGradientUniforms extends ShaderSizingUniforms {
-    u_colorBack: [number, number, number, number];
     u_colors: vec4[];
     u_colorsCount: number;
     u_softness: number;
@@ -18,7 +17,6 @@ export interface GrainGradientUniforms extends ShaderSizingUniforms {
     u_shape: (typeof GrainGradientShapes)[GrainGradientShape];
 }
 export interface GrainGradientParams extends ShaderSizingParams, ShaderMotionParams {
-    colorBack?: string;
     colors?: string[];
     softness?: number;
     intensity?: number;

package/dist/shaders/liquid-metal.d.ts

@@ -4,31 +4,16 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  */
 export declare const liquidMetalFragmentShader: string;
 export interface LiquidMetalUniforms extends ShaderSizingUniforms {
-    u_colorBack: [number, number, number, number];
-    u_colorTint: [number, number, number, number];
-    u_softness: number;
-    u_repetition: number;
-    u_shiftRed: number;
-    u_shiftBlue: number;
-    u_distortion: number;
-    u_contour: number;
-    u_shape: (typeof LiquidMetalShapes)[LiquidMetalShape];
+    u_patternBlur: number;
+    u_patternScale: number;
+    u_dispersion: number;
+    u_liquid: number;
+    u_shape: number;
 }
 export interface LiquidMetalParams extends ShaderSizingParams, ShaderMotionParams {
-    colorBack?: string;
-    colorTint?: string;
-    softness?: number;
-    repetition?: number;
-    shiftRed?: number;
-    shiftBlue?: number;
-    distortion?: number;
-    contour?: number;
-    shape?: LiquidMetalShape;
+    patternBlur?: number;
+    patternScale?: number;
+    dispersion?: number;
+    liquid?: number;
+    shape?: number;
 }
-export declare const LiquidMetalShapes: {
-    readonly none: 0;
-    readonly circle: 1;
-    readonly daisy: 2;
-    readonly metaballs: 3;
-};
-export type LiquidMetalShape = keyof typeof LiquidMetalShapes;

package/dist/shaders/metaballs.d.ts

@@ -10,7 +10,6 @@ export declare const metaballsMeta: {
  * The artwork by Ksenia Kondrashova
  *
  * Uniforms include:
- * - u_colorBack: the background color of the scene
  * - uColors (vec4[]): Input RGBA colors
  * - uColorsCount (float): Number of active colors (`uColors` length)
  * - u_count (float)
@@ -18,14 +17,12 @@ export declare const metaballsMeta: {
  */
 export declare const metaballsFragmentShader: string;
 export interface MetaballsUniforms extends ShaderSizingUniforms {
-    u_colorBack: [number, number, number, number];
     u_colors: vec4[];
     u_colorsCount: number;
     u_count: number;
     u_size: number;
 }
 export interface MetaballsParams extends ShaderSizingParams, ShaderMotionParams {
-    colorBack?: string;
     colors?: string[];
     count?: number;
     size?: number;

package/dist/shaders/neuro-noise.d.ts

@@ -2,28 +2,22 @@ import type { ShaderMotionParams } from '../shader-mount';
 import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing';
 /**
  * Neuro Noise Pattern
- * Original algo: https://x.com/zozuar/status/1625182758745128981/
+ * The original artwork: https://codepen.io/ksenia-k/full/vYwgrWv by Ksenia Kondrashova
  * Renders a fractal-like structure made of several layers of since-arches
  *
  * Uniforms include:
- * u_colorFront - the highlights (overexposed noise areas)
- * u_colorMid - the base color of pattern
- * u_colorBack - the backgrond color of pattern
- * u_brightness - increase/decrease the weight of strong lines
- * u_contrast - show/hide the weak pattern lines
+ * u_colorFront - the front color of pattern
+ * u_colorBack - the back color of pattern
+ * u_brightness - the power (brightness) of pattern lines
  */
 export declare const neuroNoiseFragmentShader: string;
 export interface NeuroNoiseUniforms extends ShaderSizingUniforms {
     u_colorFront: [number, number, number, number];
-    u_colorMid: [number, number, number, number];
     u_colorBack: [number, number, number, number];
     u_brightness: number;
-    u_contrast: number;
 }
 export interface NeuroNoiseParams extends ShaderSizingParams, ShaderMotionParams {
     colorFront?: string;
-    colorMid?: string;
     colorBack?: string;
     brightness?: number;
-    contrast?: number;
 }

package/dist/shaders/perlin-noise.d.ts

@@ -5,10 +5,10 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  * Based on https://www.shadertoy.com/view/NlSGDz
  *
  * Uniforms include:
- * u_colorFront - the first mixed color
- * u_colorBack - the second mixed color
- * u_proportion (0 .. 1) - the proportion between u_colorFront and u_colorBack;
- * u_softness - the sharpness of the transition between u_colorFront and u_colorBack in the noise output
+ * u_color1 - the first mixed color
+ * u_color2 - the second mixed color
+ * u_proportion (0 .. 1) - the proportion between u_color1 and u_color2;
+ * u_softness - the sharpness of the transition between u_color1 and u_color2 in the noise output
  * u_octaveCount - the number of octaves for Perlin noise;
  *    higher values increase the complexity of the noise
  * u_persistence (0 .. 1) - the amplitude of each successive octave of the noise;
@@ -18,8 +18,8 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  */
 export declare const perlinNoiseFragmentShader: string;
 export interface PerlinNoiseUniforms extends ShaderSizingUniforms {
-    u_colorFront: [number, number, number, number];
-    u_colorBack: [number, number, number, number];
+    u_color1: [number, number, number, number];
+    u_color2: [number, number, number, number];
     u_proportion: number;
     u_softness: number;
     u_octaveCount: number;
@@ -27,8 +27,8 @@ export interface PerlinNoiseUniforms extends ShaderSizingUniforms {
     u_lacunarity: number;
 }
 export interface PerlinNoiseParams extends ShaderSizingParams, ShaderMotionParams {
-    colorFront?: string;
-    colorBack?: string;
+    color1?: string;
+    color2?: string;
     proportion?: number;
     softness?: number;
     octaveCount?: number;

package/dist/shaders/spiral.d.ts

@@ -9,8 +9,8 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  * u_scale - controls the overall scale of the spiral (u_scale = 1 makes it fit the viewport height)
  * u_offsetX - left / right pan
  * u_offsetY - up / down pan
- * u_colorBack - the first color used in the spiral (stroke)
- * u_colorFront - the second color used in the spiral (back)
+ * u_color1 - the first color used in the spiral (stroke)
+ * u_color2 - the second color used in the spiral (back)
  * u_density (0 .. 1) - the spacing of the spiral arms
  * u_distortion (0 .. 1) - adds a wavy distortion effect to the spiral arms
  * u_strokeWidth (0 .. 1) - defines the thickness of the spiral lines.
@@ -22,8 +22,8 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  */
 export declare const spiralFragmentShader: string;
 export interface SpiralUniforms extends ShaderSizingUniforms {
-    u_colorBack: [number, number, number, number];
-    u_colorFront: [number, number, number, number];
+    u_color1: [number, number, number, number];
+    u_color2: [number, number, number, number];
     u_density: number;
     u_distortion: number;
     u_strokeWidth: number;
@@ -34,8 +34,8 @@ export interface SpiralUniforms extends ShaderSizingUniforms {
     u_softness: number;
 }
 export interface SpiralParams extends ShaderSizingParams, ShaderMotionParams {
-    colorBack?: string;
-    colorFront?: string;
+    color1?: string;
+    color2?: string;
     density?: number;
     distortion?: number;
     strokeWidth?: number;

package/dist/shaders/swirl.d.ts

@@ -8,7 +8,6 @@ export declare const swirlMeta: {
  */
 export declare const swirlFragmentShader: string;
 export interface SwirlUniforms extends ShaderSizingUniforms {
-    u_colorBack: [number, number, number, number];
     u_colors: vec4[];
     u_colorsCount: number;
     u_bandCount: number;
@@ -18,7 +17,6 @@ export interface SwirlUniforms extends ShaderSizingUniforms {
     u_noisePower: number;
 }
 export interface SwirlParams extends ShaderSizingParams, ShaderMotionParams {
-    colorBack?: string;
     colors?: string[];
     bandCount?: number;
     twist?: number;

package/dist/shaders/voronoi.d.ts

@@ -17,7 +17,7 @@ export declare const voronoiMeta: {
  * - `u_colorGlow` (`vec4`): RGBA color for the radial shape on the cell edges
  * - `u_distortion` (`float`, 0 – 0.5): Controls how far cell centers can be displaced from the regular grid
  * - `u_gap` (`float`): Width of the gaps between cells (gaps can't be removed completely due to artifacts of Voronoi cells)
- * - `u_glow` (`float`): Controls the size of the radial glow inside each cell
+ * - `u_innerGlow` (`float`): Controls the size of the radial glow inside each cell
  * - `u_stepsPerColor` (`float`): Discretization of the color transition
  * - `u_noiseTexture` (`sampler2D`): Replacement of standard hash function, added for better performance
  */
@@ -26,19 +26,19 @@ export interface VoronoiUniforms extends ShaderSizingUniforms {
     u_colors: vec4[];
     u_colorsCount: number;
     u_stepsPerColor: number;
-    u_colorGap: [number, number, number, number];
+    u_colorBack: [number, number, number, number];
     u_colorGlow: [number, number, number, number];
     u_distortion: number;
     u_gap: number;
-    u_glow: number;
+    u_innerGlow: number;
     u_noiseTexture?: HTMLImageElement;
 }
 export interface VoronoiParams extends ShaderSizingParams, ShaderMotionParams {
     colors?: string[];
     stepsPerColor?: number;
-    colorGap?: string;
+    colorBack?: string;
     colorGlow?: string;
     distortion?: number;
     gap?: number;
-    glow?: number;
+    innerGlow?: number;
 }

package/dist/shaders/waves.d.ts

@@ -3,8 +3,8 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  * Waves static pattern on the transparent background
  *
  * Uniforms include:
- * u_colorFront - the first color
- * u_colorBack - the second color
+ * u_color1 - the first color
+ * u_color2 - the second color
  * u_shape (0 ... 3) - the line shaping coefficient, non-integer
    values allowed and produce mixed shapes
    - u_shape = 0 is zigzag
@@ -19,8 +19,8 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
  */
 export declare const wavesFragmentShader: string;
 export interface WavesUniforms extends ShaderSizingUniforms {
-    u_colorFront: [number, number, number, number];
-    u_colorBack: [number, number, number, number];
+    u_color1: [number, number, number, number];
+    u_color2: [number, number, number, number];
     u_shape: number;
     u_frequency: number;
     u_amplitude: number;
@@ -29,8 +29,8 @@ export interface WavesUniforms extends ShaderSizingUniforms {
     u_softness: number;
 }
 export interface WavesParams extends ShaderSizingParams {
-    colorFront?: string;
-    colorBack?: string;
+    color1?: string;
+    color2?: string;
     rotation?: number;
     shape?: number;
     frequency?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders",
-  "version": "0.0.31-backbuffer-experiment.2",
+  "version": "0.0.32",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -24,4 +24,4 @@
     "type-check": "tsc --project tsconfig.json"
   },
   "dependencies": {}
-}
+}

package/dist/get-shader-color-from-string.js

@@ -1,93 +0,0 @@
-/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
- *                    Paper Shaders                    *
- *       https://github.com/paper-design/shaders       *
- * * * * * * * * * * * * * * * * * * * * * * * * * * * */
-
-function getShaderColorFromString(colorString) {
-  if (Array.isArray(colorString)) {
-    if (colorString.length === 4) return colorString;
-    if (colorString.length === 3) return [...colorString, 1];
-    return fallbackColor;
-  }
-  if (typeof colorString !== "string") {
-    return fallbackColor;
-  }
-  let r, g, b, a = 1;
-  if (colorString.startsWith("#")) {
-    [r, g, b, a] = hexToRgba(colorString);
-  } else if (colorString.startsWith("rgb")) {
-    [r, g, b, a] = parseRgba(colorString);
-  } else if (colorString.startsWith("hsl")) {
-    [r, g, b, a] = hslaToRgba(parseHsla(colorString));
-  } else {
-    console.error("Unsupported color format", colorString);
-    return fallbackColor;
-  }
-  return [clamp(r, 0, 1), clamp(g, 0, 1), clamp(b, 0, 1), clamp(a, 0, 1)];
-}
-function hexToRgba(hex) {
-  hex = hex.replace(/^#/, "");
-  if (hex.length === 3) {
-    hex = hex.split("").map((char) => char + char).join("");
-  }
-  if (hex.length === 6) {
-    hex = hex + "ff";
-  }
-  const r = parseInt(hex.slice(0, 2), 16) / 255;
-  const g = parseInt(hex.slice(2, 4), 16) / 255;
-  const b = parseInt(hex.slice(4, 6), 16) / 255;
-  const a = parseInt(hex.slice(6, 8), 16) / 255;
-  return [r, g, b, a];
-}
-function parseRgba(rgba) {
-  const match = rgba.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([0-9.]+))?\s*\)$/i);
-  if (!match) return [0, 0, 0, 1];
-  return [
-    parseInt(match[1] ?? "0") / 255,
-    parseInt(match[2] ?? "0") / 255,
-    parseInt(match[3] ?? "0") / 255,
-    match[4] === void 0 ? 1 : parseFloat(match[4])
-  ];
-}
-function parseHsla(hsla) {
-  const match = hsla.match(/^hsla?\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([0-9.]+))?\s*\)$/i);
-  if (!match) return [0, 0, 0, 1];
-  return [
-    parseInt(match[1] ?? "0"),
-    parseInt(match[2] ?? "0"),
-    parseInt(match[3] ?? "0"),
-    match[4] === void 0 ? 1 : parseFloat(match[4])
-  ];
-}
-function hslaToRgba(hsla) {
-  const [h, s, l, a] = hsla;
-  const hDecimal = h / 360;
-  const sDecimal = s / 100;
-  const lDecimal = l / 100;
-  let r, g, b;
-  if (s === 0) {
-    r = g = b = lDecimal;
-  } else {
-    const hue2rgb = (p2, q2, t) => {
-      if (t < 0) t += 1;
-      if (t > 1) t -= 1;
-      if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
-      if (t < 1 / 2) return q2;
-      if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
-      return p2;
-    };
-    const q = lDecimal < 0.5 ? lDecimal * (1 + sDecimal) : lDecimal + sDecimal - lDecimal * sDecimal;
-    const p = 2 * lDecimal - q;
-    r = hue2rgb(p, q, hDecimal + 1 / 3);
-    g = hue2rgb(p, q, hDecimal);
-    b = hue2rgb(p, q, hDecimal - 1 / 3);
-  }
-  return [r, g, b, a];
-}
-const clamp = (n, min, max) => Math.min(Math.max(n, min), max);
-const fallbackColor = [0, 0, 0, 1];
-export {
-  clamp,
-  getShaderColorFromString
-};
-//# sourceMappingURL=get-shader-color-from-string.js.map

package/dist/get-shader-color-from-string.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/get-shader-color-from-string.ts"],
-  "sourcesContent": ["/**  Convert color string from HSL, RGB, or hex to 0-to-1-range-RGBA array */\nexport function getShaderColorFromString(\n  colorString: string | [number, number, number] | [number, number, number, number] | undefined\n): [number, number, number, number] {\n  // If the color string is already an array of 3 or 4 numbers, return it (with alpha=1 if needed)\n  if (Array.isArray(colorString)) {\n    if (colorString.length === 4) return colorString as [number, number, number, number];\n    if (colorString.length === 3) return [...colorString, 1];\n    return fallbackColor;\n  }\n\n  // If the color string is not a string, return the fallback\n  if (typeof colorString !== 'string') {\n    return fallbackColor;\n  }\n\n  let r: number,\n    g: number,\n    b: number,\n    a = 1;\n  if (colorString.startsWith('#')) {\n    [r, g, b, a] = hexToRgba(colorString);\n  } else if (colorString.startsWith('rgb')) {\n    [r, g, b, a] = parseRgba(colorString);\n  } else if (colorString.startsWith('hsl')) {\n    [r, g, b, a] = hslaToRgba(parseHsla(colorString));\n  } else {\n    console.error('Unsupported color format', colorString);\n    return fallbackColor;\n  }\n\n  return [clamp(r, 0, 1), clamp(g, 0, 1), clamp(b, 0, 1), clamp(a, 0, 1)];\n}\n\n/** Convert hex to RGBA (0 to 1 range) */\nfunction hexToRgba(hex: string): [number, number, number, number] {\n  // Remove # if present\n  hex = hex.replace(/^#/, '');\n\n  // Expand three-letter hex to six-letter\n  if (hex.length === 3) {\n    hex = hex\n      .split('')\n      .map((char) => char + char)\n      .join('');\n  }\n  // Expand six-letter hex to eight-letter (add full opacity if no alpha)\n  if (hex.length === 6) {\n    hex = hex + 'ff';\n  }\n\n  // Parse the components\n  const r = parseInt(hex.slice(0, 2), 16) / 255;\n  const g = parseInt(hex.slice(2, 4), 16) / 255;\n  const b = parseInt(hex.slice(4, 6), 16) / 255;\n  const a = parseInt(hex.slice(6, 8), 16) / 255;\n\n  return [r, g, b, a];\n}\n\n/** Parse RGBA string to RGBA (0 to 1 range) */\nfunction parseRgba(rgba: string): [number, number, number, number] {\n  // Match both rgb and rgba patterns\n  const match = rgba.match(/^rgba?\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*(?:,\\s*([0-9.]+))?\\s*\\)$/i);\n  if (!match) return [0, 0, 0, 1];\n\n  return [\n    parseInt(match[1] ?? '0') / 255,\n    parseInt(match[2] ?? '0') / 255,\n    parseInt(match[3] ?? '0') / 255,\n    match[4] === undefined ? 1 : parseFloat(match[4]),\n  ];\n}\n\n/** Parse HSLA string */\nfunction parseHsla(hsla: string): [number, number, number, number] {\n  const match = hsla.match(/^hsla?\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)%\\s*,\\s*(\\d+)%\\s*(?:,\\s*([0-9.]+))?\\s*\\)$/i);\n  if (!match) return [0, 0, 0, 1];\n\n  return [\n    parseInt(match[1] ?? '0'),\n    parseInt(match[2] ?? '0'),\n    parseInt(match[3] ?? '0'),\n    match[4] === undefined ? 1 : parseFloat(match[4]),\n  ];\n}\n\n/** Convert HSLA to RGBA (0 to 1 range) */\nfunction hslaToRgba(hsla: [number, number, number, number]): [number, number, number, number] {\n  const [h, s, l, a] = hsla;\n  const hDecimal = h / 360;\n  const sDecimal = s / 100;\n  const lDecimal = l / 100;\n  let r, g, b;\n\n  if (s === 0) {\n    r = g = b = lDecimal; // achromatic\n  } else {\n    const hue2rgb = (p: number, q: number, t: number) => {\n      if (t < 0) t += 1;\n      if (t > 1) t -= 1;\n      if (t < 1 / 6) return p + (q - p) * 6 * t;\n      if (t < 1 / 2) return q;\n      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;\n      return p;\n    };\n\n    const q = lDecimal < 0.5 ? lDecimal * (1 + sDecimal) : lDecimal + sDecimal - lDecimal * sDecimal;\n    const p = 2 * lDecimal - q;\n    r = hue2rgb(p, q, hDecimal + 1 / 3);\n    g = hue2rgb(p, q, hDecimal);\n    b = hue2rgb(p, q, hDecimal - 1 / 3);\n  }\n\n  return [r, g, b, a];\n}\n\nexport const clamp = (n: number, min: number, max: number): number => Math.min(Math.max(n, min), max);\n\nconst fallbackColor = [0, 0, 0, 1] as [0, 0, 0, 1];\n"],
-  "mappings": "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",
-  "names": ["p", "q"]
-}