@agent-native/core-corpus 0.214.0 → 0.217.0

package/corpus/templates/design/shared/shader-presets.ts

@@ -1,1523 +0,0 @@
-import type { GlslShaderMode, GlslUniformManifest } from "./shader-fills";
-
-export type ParamKind = "number" | "color" | "enum" | "bool" | "colors";
-
-export interface ParamDef {
-  key: string;
-  kind: ParamKind;
-  label: string;
-  default: number | boolean | string | string[];
-  min?: number;
-  max?: number;
-  step?: number;
-  options?: string[];
-  maxCount?: number;
-  isExpensive?: boolean;
-}
-
-export type ShaderPresetName =
-  | "MeshGradient"
-  | "GrainGradient"
-  | "Voronoi"
-  | "Metaballs"
-  | "Warp"
-  | "GodRays"
-  | "Dithering"
-  | "PaperTexture";
-
-export interface ShaderDescriptor {
-  preset: ShaderPresetName;
-  params: Record<string, number | boolean | string>;
-  colors?: string[];
-  speed?: number;
-  frame?: number;
-  fit?: "none" | "contain" | "cover";
-  scale?: number;
-  rotation?: number;
-  offsetX?: number;
-  offsetY?: number;
-}
-
-export interface ShaderPresetDef {
-  name: ShaderPresetName;
-  label: string;
-  description: string;
-  defaultColors?: string[];
-  defaultColorBack?: string;
-  defaultColorFront?: string;
-  defaultColorBloom?: string;
-  defaultColorGlow?: string;
-  defaultColorGap?: string;
-  params: ParamDef[];
-  maxColorCount?: number;
-  isEffect?: boolean;
-}
-
-export const UNIVERSAL_PARAMS: ParamDef[] = [
-  {
-    key: "fit",
-    kind: "enum",
-    label: "Fit",
-    default: "contain",
-    options: ["none", "contain", "cover"],
-  },
-  {
-    key: "scale",
-    kind: "number",
-    label: "Scale",
-    default: 1,
-    min: 0.01,
-    max: 10,
-    step: 0.01,
-  },
-  {
-    key: "rotation",
-    kind: "number",
-    label: "Rotation (rad)",
-    default: 0,
-    min: -3.14159,
-    max: 3.14159,
-    step: 0.01,
-  },
-  {
-    key: "offsetX",
-    kind: "number",
-    label: "Offset X",
-    default: 0,
-    min: -1,
-    max: 1,
-    step: 0.01,
-  },
-  {
-    key: "offsetY",
-    kind: "number",
-    label: "Offset Y",
-    default: 0,
-    min: -1,
-    max: 1,
-    step: 0.01,
-  },
-  {
-    key: "speed",
-    kind: "number",
-    label: "Speed",
-    default: 1,
-    min: -5,
-    max: 5,
-    step: 0.1,
-  },
-  {
-    key: "frame",
-    kind: "number",
-    label: "Frame",
-    default: 0,
-    min: 0,
-    max: 10000,
-    step: 1,
-  },
-];
-
-export const SHADER_PRESETS: readonly ShaderPresetDef[] = [
-  {
-    name: "MeshGradient",
-    label: "Mesh Gradient",
-    description:
-      "Smooth flowing gradient mesh with optional film grain overlay.",
-    defaultColors: ["#e0eaff", "#241d9a", "#f75092", "#9f50d3"],
-    maxColorCount: 10,
-    params: [
-      {
-        key: "distortion",
-        kind: "number",
-        label: "Distortion",
-        default: 0.8,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "swirl",
-        kind: "number",
-        label: "Swirl",
-        default: 0.1,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "grainMixer",
-        kind: "number",
-        label: "Grain Mixer",
-        default: 0,
-        min: 0,
-        max: 1,
-        step: 0.01,
-        isExpensive: true,
-      },
-      {
-        key: "grainOverlay",
-        kind: "number",
-        label: "Grain Overlay",
-        default: 0,
-        min: 0,
-        max: 1,
-        step: 0.01,
-        isExpensive: true,
-      },
-    ],
-  },
-
-  {
-    name: "GrainGradient",
-    label: "Grain Gradient",
-    description: "Noisy gradient with configurable shape and grain intensity.",
-    defaultColorBack: "#000000",
-    defaultColors: ["#7300ff", "#eba8ff", "#00bfff", "#2a00ff"],
-    maxColorCount: 7,
-    params: [
-      {
-        key: "softness",
-        kind: "number",
-        label: "Softness",
-        default: 0.5,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "intensity",
-        kind: "number",
-        label: "Intensity",
-        default: 0.5,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "noise",
-        kind: "number",
-        label: "Noise",
-        default: 0.25,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "shape",
-        kind: "enum",
-        label: "Shape",
-        default: "corners",
-        options: [
-          "corners",
-          "radial",
-          "wave",
-          "dots",
-          "truchet",
-          "ripple",
-          "blob",
-        ],
-      },
-    ],
-  },
-
-  {
-    name: "Voronoi",
-    label: "Voronoi",
-    description: "Animated Voronoi cell diagram with glow and gap controls.",
-    defaultColors: ["#ff8247", "#ffe53d"],
-    defaultColorGlow: "#ffffff",
-    defaultColorGap: "#2e0000",
-    maxColorCount: 5,
-    params: [
-      {
-        key: "stepsPerColor",
-        kind: "number",
-        label: "Steps Per Color",
-        default: 3,
-        min: 1,
-        max: 10,
-        step: 1,
-      },
-      {
-        key: "colorGlow",
-        kind: "color",
-        label: "Glow Color",
-        default: "#ffffff",
-      },
-      {
-        key: "colorGap",
-        kind: "color",
-        label: "Gap Color",
-        default: "#2e0000",
-      },
-      {
-        key: "distortion",
-        kind: "number",
-        label: "Distortion",
-        default: 0.4,
-        min: 0,
-        max: 2,
-        step: 0.01,
-      },
-      {
-        key: "gap",
-        kind: "number",
-        label: "Gap",
-        default: 0.04,
-        min: 0,
-        max: 0.2,
-        step: 0.001,
-      },
-      {
-        key: "glow",
-        kind: "number",
-        label: "Glow",
-        default: 0,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-    ],
-  },
-
-  {
-    name: "Metaballs",
-    label: "Metaballs",
-    description: "Organic blobs that merge and separate over time.",
-    defaultColorBack: "#000000",
-    defaultColors: ["#6e33cc", "#ff5500", "#ffc105", "#ffc800", "#f585ff"],
-    maxColorCount: 8,
-    params: [
-      {
-        key: "count",
-        kind: "number",
-        label: "Count",
-        default: 10,
-        min: 1,
-        max: 20,
-        step: 1,
-      },
-      {
-        key: "size",
-        kind: "number",
-        label: "Size",
-        default: 0.83,
-        min: 0.01,
-        max: 2,
-        step: 0.01,
-      },
-    ],
-  },
-
-  {
-    name: "Warp",
-    label: "Warp",
-    description: "Domain-warped gradient with shape-based tiling.",
-    defaultColors: ["#121212", "#9470ff", "#121212", "#8838ff"],
-    maxColorCount: 10,
-    params: [
-      {
-        key: "proportion",
-        kind: "number",
-        label: "Proportion",
-        default: 0.45,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "softness",
-        kind: "number",
-        label: "Softness",
-        default: 1,
-        min: 0,
-        max: 2,
-        step: 0.01,
-      },
-      {
-        key: "distortion",
-        kind: "number",
-        label: "Distortion",
-        default: 0.25,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "swirl",
-        kind: "number",
-        label: "Swirl",
-        default: 0.8,
-        min: 0,
-        max: 5,
-        step: 0.01,
-      },
-      {
-        key: "swirlIterations",
-        kind: "number",
-        label: "Swirl Iterations",
-        default: 10,
-        min: 1,
-        max: 20,
-        step: 1,
-      },
-      {
-        key: "shapeScale",
-        kind: "number",
-        label: "Shape Scale",
-        default: 0.1,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "shape",
-        kind: "enum",
-        label: "Shape",
-        default: "checks",
-        options: ["checks", "cross", "circle", "star", "waves", "spiral"],
-      },
-    ],
-  },
-
-  {
-    name: "GodRays",
-    label: "God Rays",
-    description: "Volumetric light rays emanating from a configurable source.",
-    defaultColorBack: "#000000",
-    defaultColorBloom: "#0000ff",
-    defaultColors: ["#a600ff6e", "#6200fff0", "#ffffff", "#33fff5"],
-    maxColorCount: 5,
-    params: [
-      {
-        key: "colorBloom",
-        kind: "color",
-        label: "Bloom Color",
-        default: "#0000ff",
-      },
-      {
-        key: "density",
-        kind: "number",
-        label: "Density",
-        default: 0.3,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "spotty",
-        kind: "number",
-        label: "Spotty",
-        default: 0.3,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "midIntensity",
-        kind: "number",
-        label: "Mid Intensity",
-        default: 0.4,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "midSize",
-        kind: "number",
-        label: "Mid Size",
-        default: 0.2,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "intensity",
-        kind: "number",
-        label: "Intensity",
-        default: 0.8,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "bloom",
-        kind: "number",
-        label: "Bloom",
-        default: 0.4,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-    ],
-  },
-
-  {
-    name: "Dithering",
-    label: "Dithering",
-    description:
-      "Ordered dithering overlay effect. Composites over the layer beneath it.",
-    defaultColorBack: "#000000",
-    defaultColorFront: "#00b2ff",
-    isEffect: true,
-    params: [
-      {
-        key: "colorBack",
-        kind: "color",
-        label: "Background Color",
-        default: "#000000",
-      },
-      {
-        key: "colorFront",
-        kind: "color",
-        label: "Foreground Color",
-        default: "#00b2ff",
-      },
-      {
-        key: "shape",
-        kind: "enum",
-        label: "Shape",
-        default: "sphere",
-        options: ["sphere", "ring", "pill", "linear", "diamond"],
-      },
-      {
-        key: "type",
-        kind: "enum",
-        label: "Dither Type",
-        default: "4x4",
-        options: [
-          "4x4",
-          "8x8",
-          "2x2",
-          "ordered",
-          "checker",
-          "bluenoise",
-          "random",
-        ],
-      },
-      {
-        key: "size",
-        kind: "number",
-        label: "Size",
-        default: 2,
-        min: 1,
-        max: 20,
-        step: 1,
-      },
-    ],
-  },
-
-  {
-    name: "PaperTexture",
-    label: "Paper Texture",
-    description:
-      "Procedural paper surface with grain, fiber, crumples, and folds.",
-    defaultColorFront: "#9fadbc",
-    defaultColorBack: "#ffffff",
-    params: [
-      {
-        key: "colorFront",
-        kind: "color",
-        label: "Front Color",
-        default: "#9fadbc",
-      },
-      {
-        key: "colorBack",
-        kind: "color",
-        label: "Back Color",
-        default: "#ffffff",
-      },
-      {
-        key: "contrast",
-        kind: "number",
-        label: "Contrast",
-        default: 0.3,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "roughness",
-        kind: "number",
-        label: "Roughness",
-        default: 0.4,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "fiber",
-        kind: "number",
-        label: "Fiber",
-        default: 0.3,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "fiberSize",
-        kind: "number",
-        label: "Fiber Size",
-        default: 0.2,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "crumples",
-        kind: "number",
-        label: "Crumples",
-        default: 0.3,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "crumpleSize",
-        kind: "number",
-        label: "Crumple Size",
-        default: 0.35,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "folds",
-        kind: "number",
-        label: "Folds",
-        default: 0.65,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "foldCount",
-        kind: "number",
-        label: "Fold Count",
-        default: 5,
-        min: 1,
-        max: 20,
-        step: 1,
-      },
-      {
-        key: "fade",
-        kind: "number",
-        label: "Fade",
-        default: 0,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "drops",
-        kind: "number",
-        label: "Drops",
-        default: 0.2,
-        min: 0,
-        max: 1,
-        step: 0.01,
-      },
-      {
-        key: "seed",
-        kind: "number",
-        label: "Seed",
-        default: 5.8,
-        min: 0,
-        max: 100,
-        step: 0.1,
-      },
-    ],
-  },
-] as const;
-
-export const SHADER_PRESET_MAP: Record<ShaderPresetName, ShaderPresetDef> =
-  Object.fromEntries(SHADER_PRESETS.map((p) => [p.name, p])) as Record<
-    ShaderPresetName,
-    ShaderPresetDef
-  >;
-
-export function getPreset(name: string): ShaderPresetDef | undefined {
-  return SHADER_PRESET_MAP[name as ShaderPresetName];
-}
-
-export function validateDescriptor(descriptor: ShaderDescriptor): {
-  valid: boolean;
-  errors: string[];
-} {
-  const errors: string[] = [];
-
-  const presetDef = getPreset(descriptor.preset);
-  if (!presetDef) {
-    errors.push(`Unknown preset: "${descriptor.preset}"`);
-    return { valid: false, errors };
-  }
-
-  const paramMap = new Map<string, ParamDef>(
-    presetDef.params.map((p) => [p.key, p]),
-  );
-
-  for (const [key, value] of Object.entries(descriptor.params)) {
-    const def = paramMap.get(key);
-    if (!def) {
-      errors.push(
-        `Unknown param key "${key}" for preset "${descriptor.preset}"`,
-      );
-      continue;
-    }
-
-    if (def.kind === "number") {
-      const num = value as number;
-      if (typeof num !== "number" || !isFinite(num)) {
-        errors.push(`Param "${key}" must be a finite number`);
-        continue;
-      }
-      if (def.min !== undefined && num < def.min) {
-        errors.push(`Param "${key}" value ${num} is below minimum ${def.min}`);
-      }
-      if (def.max !== undefined && num > def.max) {
-        errors.push(`Param "${key}" value ${num} is above maximum ${def.max}`);
-      }
-    } else if (def.kind === "enum") {
-      if (def.options && !def.options.includes(value as string)) {
-        errors.push(
-          `Param "${key}" value "${value}" is not in allowed options: ${def.options.join(", ")}`,
-        );
-      }
-    } else if (def.kind === "bool") {
-      if (typeof value !== "boolean") {
-        errors.push(`Param "${key}" must be a boolean`);
-      }
-    }
-  }
-
-  if (descriptor.colors !== undefined) {
-    if (presetDef.maxColorCount !== undefined) {
-      if (descriptor.colors.length > presetDef.maxColorCount) {
-        errors.push(
-          `colors array length ${descriptor.colors.length} exceeds maxColorCount ${presetDef.maxColorCount}`,
-        );
-      }
-    }
-  }
-
-  return { valid: errors.length === 0, errors };
-}
-
-export type GlslShaderPresetCategory =
-  | "gradient-flow"
-  | "waves"
-  | "noise"
-  | "pattern"
-  | "texture"
-  | "retro";
-
-export const GLSL_SHADER_PRESET_CATEGORY_LABELS: Record<
-  GlslShaderPresetCategory,
-  string
-> = {
-  "gradient-flow": "Gradient flow", // i18n-ignore shader preset category
-  waves: "Waves", // i18n-ignore shader preset category
-  noise: "Noise", // i18n-ignore shader preset category
-  pattern: "Patterns", // i18n-ignore shader preset category
-  texture: "Texture", // i18n-ignore shader preset category
-  retro: "Retro", // i18n-ignore shader preset category
-};
-
-export interface GlslShaderPreset {
-  name: string;
-  label: string;
-  description: string;
-  category: GlslShaderPresetCategory;
-  mode: GlslShaderMode;
-  previewCss: string;
-  uniforms: GlslUniformManifest;
-  glsl: string;
-}
-
-const GLSL_NOISE_HELPERS = `
-float anHash21(vec2 p) {
-  p = fract(p * vec2(123.34, 456.21));
-  p += dot(p, p + 45.32);
-  return fract(p.x * p.y);
-}
-
-float anValueNoise(vec2 p) {
-  vec2 i = floor(p);
-  vec2 f = fract(p);
-  vec2 u = f * f * (3.0 - 2.0 * f);
-  float a = anHash21(i);
-  float b = anHash21(i + vec2(1.0, 0.0));
-  float c = anHash21(i + vec2(0.0, 1.0));
-  float d = anHash21(i + vec2(1.0, 1.0));
-  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
-}
-
-float anFbm(vec2 p) {
-  float v = 0.0;
-  float amp = 0.5;
-  for (int i = 0; i < 5; i++) {
-    v += amp * anValueNoise(p);
-    p = p * 2.03 + vec2(17.13, 9.57);
-    amp *= 0.5;
-  }
-  return v;
-}
-`.trim();
-
-export const GLSL_SHADER_PRESETS: readonly GlslShaderPreset[] = [
-  {
-    name: "mesh-gradient",
-    label: "Mesh Gradient",
-    description:
-      "Four color points drifting across the surface, blended by distance.",
-    category: "gradient-flow",
-    mode: "fill",
-    previewCss:
-      "radial-gradient(circle at 20% 25%, #ff9a9e 0%, transparent 55%), " +
-      "radial-gradient(circle at 80% 25%, #a18cd1 0%, transparent 55%), " +
-      "radial-gradient(circle at 25% 80%, #fbc2eb 0%, transparent 55%), " +
-      "radial-gradient(circle at 80% 75%, #fad0c4 0%, transparent 60%), #a18cd1",
-    uniforms: {
-      u_color_a: { type: "color", value: "#ff9a9e", label: "Color 1" },
-      u_color_b: { type: "color", value: "#a18cd1", label: "Color 2" },
-      u_color_c: { type: "color", value: "#fbc2eb", label: "Color 3" },
-      u_color_d: { type: "color", value: "#fad0c4", label: "Color 4" },
-      u_drift: {
-        type: "float",
-        value: 0.6,
-        min: 0,
-        max: 2,
-        step: 0.01,
-        label: "Drift",
-      },
-      u_blend: {
-        type: "float",
-        value: 2.2,
-        min: 0.5,
-        max: 6,
-        step: 0.05,
-        label: "Blend",
-      },
-    },
-    glsl: `
-precision highp float;
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform vec3 u_color_a;
-uniform vec3 u_color_b;
-uniform vec3 u_color_c;
-uniform vec3 u_color_d;
-uniform float u_drift;
-uniform float u_blend;
-
-void main() {
-  vec2 uv = gl_FragCoord.xy / u_resolution;
-  float t = u_time * u_drift;
-  vec2 p0 = vec2(0.20 + 0.16 * sin(t * 0.60), 0.24 + 0.14 * cos(t * 0.50));
-  vec2 p1 = vec2(0.82 + 0.12 * sin(t * 0.44 + 2.1), 0.28 + 0.16 * cos(t * 0.62 + 1.3));
-  vec2 p2 = vec2(0.26 + 0.15 * sin(t * 0.52 + 4.2), 0.78 + 0.12 * cos(t * 0.47 + 2.8));
-  vec2 p3 = vec2(0.78 + 0.14 * sin(t * 0.58 + 1.7), 0.76 + 0.15 * cos(t * 0.55 + 4.6));
-  float w0 = 1.0 / pow(distance(uv, p0) + 0.02, u_blend);
-  float w1 = 1.0 / pow(distance(uv, p1) + 0.02, u_blend);
-  float w2 = 1.0 / pow(distance(uv, p2) + 0.02, u_blend);
-  float w3 = 1.0 / pow(distance(uv, p3) + 0.02, u_blend);
-  vec3 color = (u_color_a * w0 + u_color_b * w1 + u_color_c * w2 + u_color_d * w3)
-    / (w0 + w1 + w2 + w3);
-  gl_FragColor = vec4(color, 1.0);
-}
-`.trim(),
-  },
-  {
-    name: "glowing-wave",
-    label: "Glowing Wave",
-    description:
-      "Luminous sine waves with adjustable amplitude, frequency, and glow.",
-    category: "waves",
-    mode: "fill",
-    previewCss:
-      "linear-gradient(180deg, #05070f 32%, #59d9ff88 48%, #59d9ff 50%, " +
-      "#59d9ff88 52%, #05070f 68%)",
-    uniforms: {
-      u_wave_color: { type: "color", value: "#59d9ff", label: "Wave color" },
-      u_bg_color: { type: "color", value: "#05070f", label: "Background" },
-      u_amplitude: {
-        type: "float",
-        value: 0.16,
-        min: 0,
-        max: 0.5,
-        step: 0.005,
-        label: "Amplitude",
-      },
-      u_frequency: {
-        type: "float",
-        value: 6,
-        min: 1,
-        max: 20,
-        step: 0.1,
-        label: "Frequency",
-      },
-      u_glow: {
-        type: "float",
-        value: 0.02,
-        min: 0.002,
-        max: 0.1,
-        step: 0.001,
-        label: "Glow",
-      },
-      u_speed: {
-        type: "float",
-        value: 1,
-        min: 0,
-        max: 4,
-        step: 0.05,
-        label: "Speed",
-      },
-    },
-    glsl: `
-precision highp float;
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform vec3 u_wave_color;
-uniform vec3 u_bg_color;
-uniform float u_amplitude;
-uniform float u_frequency;
-uniform float u_glow;
-uniform float u_speed;
-
-void main() {
-  vec2 uv = gl_FragCoord.xy / u_resolution;
-  float t = u_time * u_speed;
-  vec3 color = u_bg_color;
-  for (int i = 0; i < 3; i++) {
-    float fi = float(i);
-    float phase = t * (0.7 + fi * 0.25) + fi * 2.4;
-    float y = 0.5
-      + u_amplitude * sin(uv.x * u_frequency + phase)
-      + u_amplitude * 0.35 * sin(uv.x * u_frequency * 1.7 - phase * 1.3);
-    float d = abs(uv.y - y);
-    float glow = u_glow / max(d, 0.002);
-    color += u_wave_color * min(glow, 8.0) * (0.6 - fi * 0.18) * 0.55;
-  }
-  gl_FragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
-}
-`.trim(),
-  },
-  {
-    name: "water-caustics",
-    label: "Water Caustics",
-    description:
-      "Shimmering underwater light patterns with a loopable phase control.",
-    category: "waves",
-    mode: "fill",
-    previewCss:
-      "radial-gradient(circle at 30% 35%, #7fd4ff55 0%, transparent 45%), " +
-      "radial-gradient(circle at 70% 60%, #7fd4ff33 0%, transparent 40%), #06283d",
-    uniforms: {
-      u_deep_color: { type: "color", value: "#06283d", label: "Water" },
-      u_light_color: { type: "color", value: "#7fd4ff", label: "Light" },
-      u_scale: {
-        type: "float",
-        value: 3,
-        min: 1,
-        max: 10,
-        step: 0.1,
-        label: "Scale",
-      },
-      u_phase: {
-        type: "float",
-        value: 0,
-        min: 0,
-        max: 1,
-        step: 0.01,
-        label: "Phase",
-      },
-      u_speed: {
-        type: "float",
-        value: 0.6,
-        min: 0,
-        max: 3,
-        step: 0.05,
-        label: "Speed",
-      },
-    },
-    glsl: `
-precision highp float;
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform vec3 u_deep_color;
-uniform vec3 u_light_color;
-uniform float u_scale;
-uniform float u_phase;
-uniform float u_speed;
-
-void main() {
-  vec2 uv = gl_FragCoord.xy / u_resolution;
-  vec2 p = uv * u_scale;
-  float t = u_time * u_speed + u_phase * 6.28318;
-  vec2 i0 = p;
-  float c = 0.0;
-  for (int n = 0; n < 4; n++) {
-    float fn = float(n);
-    float tt = t * (1.0 - 0.075 * fn) + fn * 1.7;
-    i0 = p + vec2(cos(tt - i0.x) + sin(tt + i0.y), sin(tt - i0.y) + cos(tt + i0.x));
-    c += 1.0 / max(length(vec2(p.x / (sin(i0.x + tt) + 2.0), p.y / (cos(i0.y + tt) + 2.0))), 0.001);
-  }
-  c /= 4.0;
-  c = 1.17 - pow(abs(c), 1.4);
-  float glow = pow(abs(c), 8.0);
-  vec3 color = u_deep_color + u_light_color * clamp(glow, 0.0, 1.0);
-  gl_FragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
-}
-`.trim(),
-  },
-  {
-    name: "fractal-noise",
-    label: "Fractal Noise",
-    description: "Organic domain-warped fBm noise blended between two colors.",
-    category: "noise",
-    mode: "fill",
-    previewCss:
-      "radial-gradient(ellipse at 30% 30%, #e0aaff66 0%, transparent 60%), " +
-      "radial-gradient(ellipse at 75% 70%, #e0aaff44 0%, transparent 55%), #10002b",
-    uniforms: {
-      u_color_a: { type: "color", value: "#10002b", label: "Base" },
-      u_color_b: { type: "color", value: "#e0aaff", label: "Accent" },
-      u_scale: {
-        type: "float",
-        value: 3,
-        min: 0.5,
-        max: 12,
-        step: 0.1,
-        label: "Scale",
-      },
-      u_contrast: {
-        type: "float",
-        value: 1.4,
-        min: 0.2,
-        max: 4,
-        step: 0.05,
-        label: "Contrast",
-      },
-      u_drift: {
-        type: "float",
-        value: 0.15,
-        min: 0,
-        max: 1,
-        step: 0.01,
-        label: "Drift",
-      },
-    },
-    glsl: `
-precision highp float;
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform vec3 u_color_a;
-uniform vec3 u_color_b;
-uniform float u_scale;
-uniform float u_contrast;
-uniform float u_drift;
-
-${GLSL_NOISE_HELPERS}
-
-void main() {
-  vec2 uv = gl_FragCoord.xy / u_resolution;
-  vec2 p = uv * u_scale + vec2(u_time * u_drift, 0.0);
-  float warp = anFbm(p + vec2(u_time * u_drift * 0.5));
-  float n = anFbm(p + warp * 1.6);
-  n = clamp((n - 0.5) * u_contrast + 0.5, 0.0, 1.0);
-  gl_FragColor = vec4(mix(u_color_a, u_color_b, n), 1.0);
-}
-`.trim(),
-  },
-  {
-    name: "clouds",
-    label: "Clouds",
-    description:
-      "Procedural drifting clouds with adjustable coverage and scale.",
-    category: "noise",
-    mode: "fill",
-    previewCss:
-      "radial-gradient(ellipse at 30% 40%, #ffffffcc 0%, transparent 50%), " +
-      "radial-gradient(ellipse at 70% 30%, #ffffff99 0%, transparent 45%), #5aa7e6",
-    uniforms: {
-      u_sky_color: { type: "color", value: "#5aa7e6", label: "Sky" },
-      u_cloud_color: { type: "color", value: "#ffffff", label: "Clouds" },
-      u_cover: {
-        type: "float",
-        value: 0.5,
-        min: 0,
-        max: 1,
-        step: 0.01,
-        label: "Coverage",
-      },
-      u_scale: {
-        type: "float",
-        value: 2.5,
-        min: 0.5,
-        max: 8,
-        step: 0.1,
-        label: "Scale",
-      },
-      u_drift: {
-        type: "float",
-        value: 0.4,
-        min: 0,
-        max: 2,
-        step: 0.01,
-        label: "Drift",
-      },
-    },
-    glsl: `
-precision highp float;
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform vec3 u_sky_color;
-uniform vec3 u_cloud_color;
-uniform float u_cover;
-uniform float u_scale;
-uniform float u_drift;
-
-${GLSL_NOISE_HELPERS}
-
-void main() {
-  vec2 uv = gl_FragCoord.xy / u_resolution;
-  float aspect = u_resolution.x / max(u_resolution.y, 1.0);
-  vec2 p = vec2(uv.x * aspect, uv.y) * u_scale;
-  p.x += u_time * u_drift * 0.2;
-  float n = anFbm(p + anFbm(p * 1.4 + vec2(u_time * u_drift * 0.05)) * 1.2);
-  float threshold = 1.0 - u_cover;
-  float clouds = smoothstep(threshold - 0.25, threshold + 0.25, n);
-  vec3 color = mix(u_sky_color, u_cloud_color, clouds);
-  gl_FragColor = vec4(color, 1.0);
-}
-`.trim(),
-  },
-  {
-    name: "nebula",
-    label: "Nebula",
-    description:
-      "Deep-space gas clouds with twinkling stars and adjustable density.",
-    category: "noise",
-    mode: "fill",
-    previewCss:
-      "radial-gradient(ellipse at 30% 35%, #7b2ff766 0%, transparent 55%), " +
-      "radial-gradient(ellipse at 72% 68%, #f107a344 0%, transparent 50%), #050014",
-    uniforms: {
-      u_color_a: { type: "color", value: "#7b2ff7", label: "Gas 1" },
-      u_color_b: { type: "color", value: "#f107a3", label: "Gas 2" },
-      u_density: {
-        type: "float",
-        value: 0.6,
-        min: 0,
-        max: 1,
-        step: 0.01,
-        label: "Density",
-      },
-      u_stars: {
-        type: "float",
-        value: 0.5,
-        min: 0,
-        max: 1,
-        step: 0.01,
-        label: "Stars",
-      },
-      u_drift: {
-        type: "float",
-        value: 0.08,
-        min: 0,
-        max: 0.5,
-        step: 0.005,
-        label: "Drift",
-      },
-    },
-    glsl: `
-precision highp float;
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform vec3 u_color_a;
-uniform vec3 u_color_b;
-uniform float u_density;
-uniform float u_stars;
-uniform float u_drift;
-
-${GLSL_NOISE_HELPERS}
-
-void main() {
-  vec2 uv = gl_FragCoord.xy / u_resolution;
-  float aspect = u_resolution.x / max(u_resolution.y, 1.0);
-  vec2 p = vec2(uv.x * aspect, uv.y) * 3.0;
-  vec2 drift = vec2(u_time * u_drift, u_time * u_drift * 0.6);
-  float n1 = anFbm(p + drift);
-  float n2 = anFbm(p * 1.7 - drift + 5.2);
-  vec3 space = vec3(0.02, 0.0, 0.08);
-  vec3 color = space;
-  color += u_color_a * pow(n1, 2.0) * u_density * 1.6;
-  color += u_color_b * pow(n2, 2.4) * u_density * 1.2;
-  float sparkle = anHash21(floor(gl_FragCoord.xy / 2.0));
-  float twinkle = 0.75 + 0.25 * sin(u_time * 3.0 + sparkle * 40.0);
-  float star = step(0.9975, sparkle) * u_stars * twinkle;
-  color += vec3(star);
-  gl_FragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
-}
-`.trim(),
-  },
-  {
-    name: "moire",
-    label: "Moiré",
-    description:
-      "Interfering ring fields producing shifting optical moiré patterns.",
-    category: "pattern",
-    mode: "fill",
-    previewCss:
-      "repeating-radial-gradient(circle at 42% 50%, #00f5d4 0 2px, #0f0f0f 2px 7px)",
-    uniforms: {
-      u_color_a: { type: "color", value: "#0f0f0f", label: "Background" },
-      u_color_b: { type: "color", value: "#00f5d4", label: "Lines" },
-      u_frequency: {
-        type: "float",
-        value: 42,
-        min: 5,
-        max: 120,
-        step: 1,
-        label: "Frequency",
-      },
-      u_offset: {
-        type: "vec2",
-        value: [0.12, 0.08],
-        label: "Center offset",
-      },
-      u_speed: {
-        type: "float",
-        value: 0.2,
-        min: 0,
-        max: 2,
-        step: 0.01,
-        label: "Speed",
-      },
-    },
-    glsl: `
-precision highp float;
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform vec3 u_color_a;
-uniform vec3 u_color_b;
-uniform float u_frequency;
-uniform vec2 u_offset;
-uniform float u_speed;
-
-void main() {
-  vec2 uv = gl_FragCoord.xy / u_resolution;
-  float aspect = u_resolution.x / max(u_resolution.y, 1.0);
-  vec2 p = vec2(uv.x * aspect, uv.y);
-  vec2 center = vec2(0.5 * aspect, 0.5);
-  vec2 wobble = 0.02 * vec2(sin(u_time * u_speed * 3.0), cos(u_time * u_speed * 2.3));
-  vec2 c1 = center + u_offset * 0.5 + wobble;
-  vec2 c2 = center - u_offset * 0.5 - wobble;
-  float r1 = sin(distance(p, c1) * u_frequency);
-  float r2 = sin(distance(p, c2) * u_frequency);
-  float v = r1 * r2 * 0.5 + 0.5;
-  v = smoothstep(0.35, 0.65, v);
-  gl_FragColor = vec4(mix(u_color_a, u_color_b, v), 1.0);
-}
-`.trim(),
-  },
-  {
-    name: "concentric-rings",
-    label: "Concentric Rings",
-    description:
-      "Bold expanding rings with adjustable count, softness, and center.",
-    category: "pattern",
-    mode: "fill",
-    previewCss:
-      "repeating-radial-gradient(circle at 50% 50%, #ffd166 0 6px, #101418 6px 16px)",
-    uniforms: {
-      u_color_a: { type: "color", value: "#101418", label: "Background" },
-      u_color_b: { type: "color", value: "#ffd166", label: "Rings" },
-      u_rings: {
-        type: "float",
-        value: 14,
-        min: 2,
-        max: 40,
-        step: 1,
-        label: "Rings",
-      },
-      u_center: { type: "vec2", value: [0.5, 0.5], label: "Center" },
-      u_softness: {
-        type: "float",
-        value: 0.25,
-        min: 0.01,
-        max: 0.5,
-        step: 0.01,
-        label: "Softness",
-      },
-      u_speed: {
-        type: "float",
-        value: 0.4,
-        min: -2,
-        max: 2,
-        step: 0.05,
-        label: "Speed",
-      },
-    },
-    glsl: `
-precision highp float;
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform vec3 u_color_a;
-uniform vec3 u_color_b;
-uniform float u_rings;
-uniform vec2 u_center;
-uniform float u_softness;
-uniform float u_speed;
-
-void main() {
-  vec2 uv = gl_FragCoord.xy / u_resolution;
-  float aspect = u_resolution.x / max(u_resolution.y, 1.0);
-  vec2 p = vec2(uv.x * aspect, uv.y);
-  vec2 c = vec2(u_center.x * aspect, u_center.y);
-  float d = distance(p, c);
-  float v = 0.5 + 0.5 * sin((d * u_rings - u_time * u_speed) * 6.28318);
-  float band = smoothstep(0.5 - u_softness, 0.5 + u_softness, v);
-  gl_FragColor = vec4(mix(u_color_a, u_color_b, band), 1.0);
-}
-`.trim(),
-  },
-  {
-    name: "pattern-grid",
-    label: "Pattern Grid",
-    description:
-      "A grid of softly pulsing dots with adjustable cell count and radius.",
-    category: "pattern",
-    mode: "fill",
-    previewCss:
-      "radial-gradient(circle at 8px 8px, #e94560 3px, transparent 3.5px) 0 0 / 16px 16px, #1b1b2f",
-    uniforms: {
-      u_bg_color: { type: "color", value: "#1b1b2f", label: "Background" },
-      u_fg_color: { type: "color", value: "#e94560", label: "Dots" },
-      u_cells: {
-        type: "float",
-        value: 10,
-        min: 2,
-        max: 40,
-        step: 1,
-        label: "Cells",
-      },
-      u_radius: {
-        type: "float",
-        value: 0.28,
-        min: 0.05,
-        max: 0.48,
-        step: 0.01,
-        label: "Dot size",
-      },
-      u_pulse: {
-        type: "float",
-        value: 0.15,
-        min: 0,
-        max: 0.5,
-        step: 0.01,
-        label: "Pulse",
-      },
-    },
-    glsl: `
-precision highp float;
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform vec3 u_bg_color;
-uniform vec3 u_fg_color;
-uniform float u_cells;
-uniform float u_radius;
-uniform float u_pulse;
-
-float anHash21(vec2 p) {
-  p = fract(p * vec2(123.34, 456.21));
-  p += dot(p, p + 45.32);
-  return fract(p.x * p.y);
-}
-
-void main() {
-  vec2 uv = gl_FragCoord.xy / u_resolution;
-  float aspect = u_resolution.x / max(u_resolution.y, 1.0);
-  vec2 g = vec2(uv.x * aspect, uv.y) * u_cells;
-  vec2 cell = floor(g);
-  vec2 f = fract(g) - 0.5;
-  float ph = anHash21(cell);
-  float r = u_radius * (1.0 + u_pulse * sin(u_time * 2.0 + ph * 6.28318));
-  float d = length(f);
-  float m = 1.0 - smoothstep(r - 0.03, r + 0.03, d);
-  gl_FragColor = vec4(mix(u_bg_color, u_fg_color, m), 1.0);
-}
-`.trim(),
-  },
-  {
-    name: "film-grain",
-    label: "Film Grain",
-    description:
-      "Animated photographic grain composited over the layer content.",
-    category: "texture",
-    mode: "effect",
-    previewCss:
-      "repeating-conic-gradient(#0000 0% 25%, #00000018 0% 50%) 0 0 / 4px 4px, #8a8a8a40",
-    uniforms: {
-      u_intensity: {
-        type: "float",
-        value: 0.12,
-        min: 0,
-        max: 0.5,
-        step: 0.01,
-        label: "Intensity",
-      },
-      u_size: {
-        type: "float",
-        value: 1.5,
-        min: 0.5,
-        max: 4,
-        step: 0.1,
-        label: "Grain size",
-      },
-    },
-    glsl: `
-precision highp float;
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform float u_intensity;
-uniform float u_size;
-
-float anHash21(vec2 p) {
-  p = fract(p * vec2(123.34, 456.21));
-  p += dot(p, p + 45.32);
-  return fract(p.x * p.y);
-}
-
-void main() {
-  vec2 cell = floor(gl_FragCoord.xy / max(u_size, 0.5));
-  float frame = floor(u_time * 24.0);
-  float n = anHash21(cell + vec2(frame * 0.013, frame * 0.007));
-  float signed = n * 2.0 - 1.0;
-  vec3 color = signed > 0.0 ? vec3(1.0) : vec3(0.0);
-  gl_FragColor = vec4(color, abs(signed) * u_intensity);
-}
-`.trim(),
-  },
-  {
-    name: "halftone",
-    label: "Halftone",
-    description:
-      "Vintage print dot screen overlay with adjustable size and angle.",
-    category: "retro",
-    mode: "effect",
-    previewCss:
-      "radial-gradient(circle at 5px 5px, #14213d 2.5px, transparent 3px) 0 0 / 10px 10px",
-    uniforms: {
-      u_color: { type: "color", value: "#14213d", label: "Dot color" },
-      u_size: {
-        type: "float",
-        value: 8,
-        min: 3,
-        max: 30,
-        step: 0.5,
-        label: "Dot size",
-      },
-      u_angle: {
-        type: "float",
-        value: 0.6,
-        min: 0,
-        max: 3.14,
-        step: 0.01,
-        label: "Angle",
-      },
-      u_strength: {
-        type: "float",
-        value: 0.5,
-        min: 0,
-        max: 1,
-        step: 0.01,
-        label: "Strength",
-      },
-    },
-    glsl: `
-precision highp float;
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform vec3 u_color;
-uniform float u_size;
-uniform float u_angle;
-uniform float u_strength;
-
-void main() {
-  vec2 p = gl_FragCoord.xy;
-  float s = sin(u_angle);
-  float c = cos(u_angle);
-  vec2 rp = vec2(c * p.x - s * p.y, s * p.x + c * p.y);
-  vec2 f = fract(rp / max(u_size, 1.0)) - 0.5;
-  float ramp = clamp(gl_FragCoord.y / max(u_resolution.y, 1.0), 0.0, 1.0);
-  float r = mix(0.08, 0.62, 1.0 - ramp);
-  float m = 1.0 - smoothstep(r - 0.08, r + 0.08, length(f) * 2.0);
-  gl_FragColor = vec4(u_color, m * u_strength);
-}
-`.trim(),
-  },
-  {
-    name: "scanlines",
-    label: "Scanlines",
-    description:
-      "CRT-style scanlines with subtle flicker, composited over content.",
-    category: "retro",
-    mode: "effect",
-    previewCss:
-      "repeating-linear-gradient(180deg, #00000030 0 1px, transparent 1px 4px)",
-    uniforms: {
-      u_color: { type: "color", value: "#000000", label: "Line color" },
-      u_density: {
-        type: "float",
-        value: 220,
-        min: 40,
-        max: 600,
-        step: 5,
-        label: "Density",
-      },
-      u_opacity: {
-        type: "float",
-        value: 0.18,
-        min: 0,
-        max: 0.6,
-        step: 0.01,
-        label: "Opacity",
-      },
-      u_flicker: {
-        type: "float",
-        value: 0.06,
-        min: 0,
-        max: 0.3,
-        step: 0.01,
-        label: "Flicker",
-      },
-    },
-    glsl: `
-precision highp float;
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform vec3 u_color;
-uniform float u_density;
-uniform float u_opacity;
-uniform float u_flicker;
-
-void main() {
-  float y = gl_FragCoord.y / max(u_resolution.y, 1.0);
-  float line = 0.5 + 0.5 * sin(y * u_density * 6.28318);
-  float flicker = 1.0 + u_flicker * sin(u_time * 11.0);
-  float a = (1.0 - smoothstep(0.35, 0.75, line)) * u_opacity * flicker;
-  gl_FragColor = vec4(u_color, clamp(a, 0.0, 1.0));
-}
-`.trim(),
-  },
-] as const;
-
-export const GLSL_SHADER_PRESET_MAP: Record<string, GlslShaderPreset> =
-  Object.fromEntries(GLSL_SHADER_PRESETS.map((p) => [p.name, p]));
-
-export function getGlslShaderPreset(
-  name: string,
-): GlslShaderPreset | undefined {
-  return GLSL_SHADER_PRESET_MAP[name];
-}