@genart-dev/core 0.1.0

package/dist/index.js

@@ -0,0 +1,1819 @@
+// src/index.ts
+export * from "@genart-dev/format";
+
+// src/sketch/adapters/p5.ts
+var P5_CDN_VERSION = "1.11.3";
+var P5_CDN_URL = `https://cdnjs.cloudflare.com/ajax/libs/p5.js/${P5_CDN_VERSION}/p5.min.js`;
+var P5RendererAdapter = class {
+  type = "p5";
+  displayName = "p5.js";
+  algorithmLanguage = "javascript";
+  validate(algorithm) {
+    const errors = [];
+    if (!algorithm || algorithm.trim().length === 0) {
+      return { valid: false, errors: ["Algorithm source is empty"] };
+    }
+    const hasSketchFn = /function\s+sketch\s*\(\s*p\s*,\s*state\s*\)/.test(algorithm) || /(?:const|let|var)\s+sketch\s*=\s*(?:function\s*)?\(\s*p\s*,\s*state\s*\)/.test(algorithm) || /(?:const|let|var)\s+sketch\s*=\s*\(\s*p\s*,\s*state\s*\)\s*=>/.test(algorithm);
+    if (!hasSketchFn) {
+      errors.push(
+        "p5 algorithms must export a function with signature: function sketch(p, state)"
+      );
+    }
+    const hasSetup = /p\s*\.\s*setup\s*=/.test(algorithm);
+    if (!hasSetup) {
+      errors.push("p5 algorithms must assign p.setup");
+    }
+    return { valid: errors.length === 0, errors };
+  }
+  async compile(algorithm) {
+    const validation = this.validate(algorithm);
+    if (!validation.valid) {
+      throw new Error(
+        `p5 compilation failed: ${validation.errors.join("; ")}`
+      );
+    }
+    const wrappedSource = `
+      return (function() {
+        ${algorithm}
+        return sketch;
+      })();
+    `;
+    try {
+      const factory = new Function(wrappedSource);
+      const compiled = {
+        source: algorithm,
+        factory: factory()
+      };
+      return compiled;
+    } catch (err) {
+      throw new Error(
+        `p5 compilation failed: ${err instanceof Error ? err.message : String(err)}`
+      );
+    }
+  }
+  createInstance(compiled, state, canvas) {
+    const { factory } = compiled;
+    let p5Instance = null;
+    let container = null;
+    let currentState = { ...state };
+    let animating = true;
+    let sketchModule = null;
+    const instance = {
+      mount(el) {
+        container = el;
+        const P5Constructor = globalThis["p5"];
+        if (!P5Constructor) {
+          throw new Error(
+            "p5.js is not loaded. Include p5.js before mounting a p5 sketch."
+          );
+        }
+        p5Instance = new P5Constructor((p) => {
+          sketchModule = factory(p, currentState);
+        }, el);
+      },
+      unmount() {
+        if (p5Instance && typeof p5Instance["remove"] === "function") {
+          p5Instance["remove"]();
+        }
+        p5Instance = null;
+        sketchModule = null;
+        container = null;
+      },
+      updateState(newState) {
+        currentState = { ...newState };
+        if (sketchModule && typeof sketchModule["initializeSystem"] === "function") {
+          sketchModule["initializeSystem"]();
+        }
+      },
+      redraw() {
+        if (p5Instance && typeof p5Instance["redraw"] === "function") {
+          p5Instance["redraw"]();
+        }
+      },
+      pause() {
+        animating = false;
+        if (p5Instance && typeof p5Instance["noLoop"] === "function") {
+          p5Instance["noLoop"]();
+        }
+      },
+      resume() {
+        animating = true;
+        if (p5Instance && typeof p5Instance["loop"] === "function") {
+          p5Instance["loop"]();
+        }
+      },
+      get isAnimating() {
+        return animating;
+      },
+      async captureFrame(options) {
+        if (!container) throw new Error("Sketch is not mounted");
+        const canvasEl = container.querySelector("canvas");
+        if (!canvasEl) throw new Error("No canvas element found");
+        const format = options?.format ?? "png";
+        const quality = options?.quality ?? 1;
+        const mimeType = format === "jpeg" ? "image/jpeg" : format === "webp" ? "image/webp" : "image/png";
+        return canvasEl.toDataURL(mimeType, quality);
+      },
+      async captureImageData() {
+        if (!container) throw new Error("Sketch is not mounted");
+        const canvasEl = container.querySelector("canvas");
+        if (!canvasEl) throw new Error("No canvas element found");
+        const ctx = canvasEl.getContext("2d");
+        if (!ctx) throw new Error("Cannot get 2D context from canvas");
+        return ctx.getImageData(0, 0, canvasEl.width, canvasEl.height);
+      },
+      dispose() {
+        instance.unmount();
+      }
+    };
+    return instance;
+  }
+  async renderOffscreen(compiled, state, canvas, options) {
+    const el = document.createElement("div");
+    el.style.position = "absolute";
+    el.style.left = "-9999px";
+    document.body.appendChild(el);
+    try {
+      const instance = this.createInstance(compiled, state, canvas);
+      instance.mount(el);
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      const dataUrl = await instance.captureFrame(options);
+      instance.dispose();
+      const base64 = dataUrl.split(",")[1] ?? "";
+      const binary = atob(base64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+      }
+      return bytes;
+    } finally {
+      document.body.removeChild(el);
+    }
+  }
+  generateStandaloneHTML(sketch) {
+    const { width, height } = sketch.canvas;
+    const pixelDensity = sketch.canvas.pixelDensity ?? 1;
+    const stateJson = JSON.stringify(sketch.state, null, 2);
+    const colorsMap = {};
+    for (let i = 0; i < sketch.colors.length; i++) {
+      const colorDef = sketch.colors[i];
+      if (colorDef) {
+        colorsMap[colorDef.key] = sketch.state.colorPalette[i] ?? "#000000";
+      }
+    }
+    const colorsJson = JSON.stringify(colorsMap);
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(sketch.title)}</title>
+  <script src="${P5_CDN_URL}"></script>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #111; }
+    #canvas-container canvas { display: block; max-width: 100vw; max-height: 100vh; }
+  </style>
+</head>
+<body>
+  <div id="canvas-container"></div>
+  <script>
+    const state = ${stateJson};
+    state.canvas = { width: ${width}, height: ${height}, pixelDensity: ${pixelDensity} };
+    // Convenience aliases \u2014 algorithms may use either naming convention
+    state.WIDTH = ${width};
+    state.HEIGHT = ${height};
+    state.SEED = state.seed;
+    state.PARAMS = state.params;
+    state.COLORS = ${colorsJson};
+
+    ${sketch.algorithm}
+
+    new p5(function(p) {
+      sketch(p, state);
+    }, document.getElementById('canvas-container'));
+  </script>
+</body>
+</html>`;
+  }
+  getAlgorithmTemplate() {
+    return `function sketch(p, state) {
+  const { WIDTH, HEIGHT, SEED, PARAMS, COLORS } = state;
+  p.setup = () => {
+    p.createCanvas(WIDTH, HEIGHT);
+    p.randomSeed(SEED);
+  };
+  p.draw = () => {
+    p.background(COLORS.background);
+    // generative algorithm here
+  };
+  return { initializeSystem() { /* rebuild from state */ } };
+}`;
+  }
+  getRuntimeDependencies() {
+    return [
+      {
+        name: "p5",
+        version: P5_CDN_VERSION,
+        cdnUrl: P5_CDN_URL
+      }
+    ];
+  }
+};
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/sketch/adapters/canvas2d.ts
+var Canvas2DRendererAdapter = class {
+  type = "canvas2d";
+  displayName = "Canvas 2D";
+  algorithmLanguage = "javascript";
+  validate(algorithm) {
+    const errors = [];
+    if (!algorithm || algorithm.trim().length === 0) {
+      return { valid: false, errors: ["Algorithm source is empty"] };
+    }
+    const hasSketchFn = /function\s+sketch\s*\(\s*ctx\s*,\s*state\s*\)/.test(algorithm) || /(?:const|let|var)\s+sketch\s*=\s*(?:function\s*)?\(\s*ctx\s*,\s*state\s*\)/.test(algorithm) || /(?:const|let|var)\s+sketch\s*=\s*\(\s*ctx\s*,\s*state\s*\)\s*=>/.test(algorithm);
+    if (!hasSketchFn) {
+      errors.push(
+        "Canvas 2D algorithms must export a function with signature: function sketch(ctx, state)"
+      );
+    }
+    return { valid: errors.length === 0, errors };
+  }
+  async compile(algorithm) {
+    const validation = this.validate(algorithm);
+    if (!validation.valid) {
+      throw new Error(
+        `Canvas 2D compilation failed: ${validation.errors.join("; ")}`
+      );
+    }
+    const wrappedSource = `
+      return (function() {
+        ${algorithm}
+        return sketch;
+      })();
+    `;
+    try {
+      const factory = new Function(wrappedSource);
+      const compiled = {
+        source: algorithm,
+        factory: factory()
+      };
+      return compiled;
+    } catch (err) {
+      throw new Error(
+        `Canvas 2D compilation failed: ${err instanceof Error ? err.message : String(err)}`
+      );
+    }
+  }
+  createInstance(compiled, state, canvas) {
+    const { factory } = compiled;
+    let canvasEl = null;
+    let ctx = null;
+    let container = null;
+    let currentState = { ...state };
+    let animating = false;
+    let animationFrameId = null;
+    let sketchModule = null;
+    const instance = {
+      mount(el) {
+        container = el;
+        canvasEl = document.createElement("canvas");
+        canvasEl.width = canvas.width;
+        canvasEl.height = canvas.height;
+        const density = canvas.pixelDensity ?? 1;
+        if (density !== 1) {
+          canvasEl.width = canvas.width * density;
+          canvasEl.height = canvas.height * density;
+          canvasEl.style.width = `${canvas.width}px`;
+          canvasEl.style.height = `${canvas.height}px`;
+        }
+        el.appendChild(canvasEl);
+        ctx = canvasEl.getContext("2d");
+        if (!ctx) throw new Error("Failed to get 2D rendering context");
+        if (density !== 1) {
+          ctx.scale(density, density);
+        }
+        sketchModule = factory(ctx, currentState);
+        if (sketchModule && typeof sketchModule["initializeSystem"] === "function") {
+          sketchModule["initializeSystem"]();
+        }
+      },
+      unmount() {
+        if (animationFrameId !== null) {
+          cancelAnimationFrame(animationFrameId);
+          animationFrameId = null;
+        }
+        if (canvasEl && container) {
+          container.removeChild(canvasEl);
+        }
+        canvasEl = null;
+        ctx = null;
+        container = null;
+        sketchModule = null;
+        animating = false;
+      },
+      updateState(newState) {
+        currentState = { ...newState };
+        if (sketchModule && typeof sketchModule["initializeSystem"] === "function") {
+          sketchModule["initializeSystem"]();
+        }
+      },
+      redraw() {
+        if (sketchModule && typeof sketchModule["initializeSystem"] === "function") {
+          sketchModule["initializeSystem"]();
+        }
+      },
+      pause() {
+        animating = false;
+        if (animationFrameId !== null) {
+          cancelAnimationFrame(animationFrameId);
+          animationFrameId = null;
+        }
+      },
+      resume() {
+        animating = true;
+        if (sketchModule && typeof sketchModule["draw"] === "function") {
+          const loop = () => {
+            if (!animating) return;
+            sketchModule["draw"]();
+            animationFrameId = requestAnimationFrame(loop);
+          };
+          loop();
+        }
+      },
+      get isAnimating() {
+        return animating;
+      },
+      async captureFrame(options) {
+        if (!canvasEl) throw new Error("Sketch is not mounted");
+        const format = options?.format ?? "png";
+        const quality = options?.quality ?? 1;
+        const mimeType = format === "jpeg" ? "image/jpeg" : format === "webp" ? "image/webp" : "image/png";
+        return canvasEl.toDataURL(mimeType, quality);
+      },
+      async captureImageData() {
+        if (!canvasEl || !ctx) throw new Error("Sketch is not mounted");
+        return ctx.getImageData(0, 0, canvasEl.width, canvasEl.height);
+      },
+      dispose() {
+        instance.unmount();
+      }
+    };
+    return instance;
+  }
+  async renderOffscreen(compiled, state, canvas, options) {
+    const el = document.createElement("div");
+    el.style.position = "absolute";
+    el.style.left = "-9999px";
+    document.body.appendChild(el);
+    try {
+      const instance = this.createInstance(compiled, state, canvas);
+      instance.mount(el);
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      const dataUrl = await instance.captureFrame(options);
+      instance.dispose();
+      const base64 = dataUrl.split(",")[1] ?? "";
+      const binary = atob(base64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+      }
+      return bytes;
+    } finally {
+      document.body.removeChild(el);
+    }
+  }
+  generateStandaloneHTML(sketch) {
+    const { width, height } = sketch.canvas;
+    const pixelDensity = sketch.canvas.pixelDensity ?? 1;
+    const stateJson = JSON.stringify(sketch.state, null, 2);
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml2(sketch.title)}</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; overflow: hidden; background: #111; }
+    body { display: flex; justify-content: center; align-items: center; }
+    canvas { display: block; }
+  </style>
+</head>
+<body>
+  <canvas id="canvas" width="${width * pixelDensity}" height="${height * pixelDensity}" style="width:${width}px;height:${height}px;"></canvas>
+  <script>
+    try {
+      const state = ${stateJson};
+      state.canvas = { width: ${width}, height: ${height}, pixelDensity: ${pixelDensity} };
+
+      ${sketch.algorithm}
+
+      const canvas = document.getElementById('canvas');
+      const ctx = canvas.getContext('2d');
+      ${pixelDensity !== 1 ? `ctx.scale(${pixelDensity}, ${pixelDensity});` : ""}
+      const module = sketch(ctx, state);
+      if (module && module.initializeSystem) module.initializeSystem();
+    } catch (e) {
+      document.body.style.background = '#300';
+      document.body.style.color = '#f88';
+      document.body.style.fontFamily = 'monospace';
+      document.body.style.fontSize = '12px';
+      document.body.style.padding = '16px';
+      document.body.textContent = 'Sketch error: ' + e.message;
+    }
+  </script>
+</body>
+</html>`;
+  }
+  getAlgorithmTemplate() {
+    return `function sketch(ctx, state) {
+  const { width, height } = state.canvas;
+  function initializeSystem() {
+    ctx.clearRect(0, 0, width, height);
+    // generative algorithm here
+  }
+  return { initializeSystem };
+}`;
+  }
+  getRuntimeDependencies() {
+    return [];
+  }
+};
+function escapeHtml2(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/sketch/adapters/three.ts
+var THREE_CDN_VERSION = "0.172.0";
+var THREE_CDN_URL = `https://cdn.jsdelivr.net/npm/three@${THREE_CDN_VERSION}/build/three.module.min.js`;
+var ThreeRendererAdapter = class {
+  type = "three";
+  displayName = "Three.js";
+  algorithmLanguage = "javascript";
+  validate(algorithm) {
+    if (!algorithm || algorithm.trim().length === 0) {
+      return { valid: false, errors: ["Algorithm source is empty"] };
+    }
+    const hasSketchFn = /function\s+sketch\s*\(\s*THREE\s*,\s*state\s*,\s*container\s*\)/.test(algorithm) || /(?:const|let|var)\s+sketch\s*=\s*(?:function\s*)?\(\s*THREE\s*,\s*state\s*,\s*container\s*\)/.test(algorithm) || /(?:const|let|var)\s+sketch\s*=\s*\(\s*THREE\s*,\s*state\s*,\s*container\s*\)\s*=>/.test(algorithm);
+    if (!hasSketchFn) {
+      return {
+        valid: false,
+        errors: [
+          "Three.js algorithms must export a function with signature: function sketch(THREE, state, container)"
+        ]
+      };
+    }
+    return { valid: true, errors: [] };
+  }
+  async compile(algorithm) {
+    const validation = this.validate(algorithm);
+    if (!validation.valid) {
+      throw new Error(
+        `Three.js compilation failed: ${validation.errors.join("; ")}`
+      );
+    }
+    const wrappedSource = `
+      return (function() {
+        ${algorithm}
+        return sketch;
+      })();
+    `;
+    try {
+      const factory = new Function(wrappedSource);
+      const compiled = {
+        source: algorithm,
+        factory: factory()
+      };
+      return compiled;
+    } catch (err) {
+      throw new Error(
+        `Three.js compilation failed: ${err instanceof Error ? err.message : String(err)}`
+      );
+    }
+  }
+  createInstance(compiled, state, canvas) {
+    const { factory } = compiled;
+    let container = null;
+    let currentState = { ...state, canvas };
+    let sketchModule = null;
+    let animating = false;
+    const instance = {
+      mount(el) {
+        container = el;
+        const THREEGlobal = globalThis["THREE"];
+        if (!THREEGlobal) {
+          throw new Error(
+            "Three.js is not loaded. Include Three.js before mounting a Three.js sketch."
+          );
+        }
+        sketchModule = factory(THREEGlobal, currentState, el);
+        animating = true;
+      },
+      unmount() {
+        if (sketchModule && typeof sketchModule["dispose"] === "function") {
+          sketchModule["dispose"]();
+        }
+        if (container) {
+          container.innerHTML = "";
+        }
+        sketchModule = null;
+        container = null;
+        animating = false;
+      },
+      updateState(newState) {
+        currentState = { ...newState, canvas };
+        if (sketchModule && typeof sketchModule["initializeSystem"] === "function") {
+          sketchModule["initializeSystem"]();
+        }
+      },
+      redraw() {
+        if (sketchModule && typeof sketchModule["initializeSystem"] === "function") {
+          sketchModule["initializeSystem"]();
+        }
+      },
+      pause() {
+        animating = false;
+        if (sketchModule && typeof sketchModule["pause"] === "function") {
+          sketchModule["pause"]();
+        }
+      },
+      resume() {
+        animating = true;
+        if (sketchModule && typeof sketchModule["resume"] === "function") {
+          sketchModule["resume"]();
+        }
+      },
+      get isAnimating() {
+        return animating;
+      },
+      async captureFrame(options) {
+        if (!container) throw new Error("Sketch is not mounted");
+        const canvasEl = container.querySelector("canvas");
+        if (!canvasEl) throw new Error("No canvas element found");
+        const format = options?.format ?? "png";
+        const quality = options?.quality ?? 1;
+        const mimeType = format === "jpeg" ? "image/jpeg" : format === "webp" ? "image/webp" : "image/png";
+        return canvasEl.toDataURL(mimeType, quality);
+      },
+      async captureImageData() {
+        if (!container) throw new Error("Sketch is not mounted");
+        const canvasEl = container.querySelector("canvas");
+        if (!canvasEl) throw new Error("No canvas element found");
+        const ctx = canvasEl.getContext("2d");
+        if (!ctx) throw new Error("Cannot get 2D context from canvas");
+        return ctx.getImageData(0, 0, canvasEl.width, canvasEl.height);
+      },
+      dispose() {
+        instance.unmount();
+      }
+    };
+    return instance;
+  }
+  async renderOffscreen(compiled, state, canvas, options) {
+    const el = document.createElement("div");
+    el.style.position = "absolute";
+    el.style.left = "-9999px";
+    document.body.appendChild(el);
+    try {
+      const instance = this.createInstance(compiled, state, canvas);
+      instance.mount(el);
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      const dataUrl = await instance.captureFrame(options);
+      instance.dispose();
+      const base64 = dataUrl.split(",")[1] ?? "";
+      const binary = atob(base64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+      }
+      return bytes;
+    } finally {
+      document.body.removeChild(el);
+    }
+  }
+  generateStandaloneHTML(sketch) {
+    const { width, height } = sketch.canvas;
+    const pixelDensity = sketch.canvas.pixelDensity ?? 1;
+    const stateJson = JSON.stringify(sketch.state, null, 2);
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml3(sketch.title)}</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #111; overflow: hidden; }
+    #canvas-container { width: ${width}px; height: ${height}px; }
+    #canvas-container canvas { display: block; max-width: 100vw; max-height: 100vh; }
+  </style>
+</head>
+<body>
+  <div id="canvas-container"></div>
+  <script type="module">
+    import * as THREE from '${THREE_CDN_URL}';
+
+    const state = ${stateJson};
+    state.canvas = { width: ${width}, height: ${height}, pixelDensity: ${pixelDensity} };
+
+    ${sketch.algorithm}
+
+    sketch(THREE, state, document.getElementById('canvas-container'));
+  </script>
+</body>
+</html>`;
+  }
+  getAlgorithmTemplate() {
+    return `function sketch(THREE, state, container) {
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(75, state.canvas.width / state.canvas.height, 0.1, 1000);
+  const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
+  renderer.setSize(state.canvas.width, state.canvas.height);
+  container.appendChild(renderer.domElement);
+  camera.position.z = 5;
+
+  let animating = true;
+  let animId = null;
+
+  function initializeSystem() {
+    // Rebuild scene from state.params and state.seed
+    while (scene.children.length > 0) scene.remove(scene.children[0]);
+    const geometry = new THREE.BoxGeometry();
+    const material = new THREE.MeshBasicMaterial({ color: 0x22d3ee });
+    const cube = new THREE.Mesh(geometry, material);
+    scene.add(cube);
+  }
+
+  function animate() {
+    if (!animating) return;
+    animId = requestAnimationFrame(animate);
+    renderer.render(scene, camera);
+  }
+
+  function pause() {
+    animating = false;
+    if (animId !== null) cancelAnimationFrame(animId);
+  }
+
+  function resume() {
+    animating = true;
+    animate();
+  }
+
+  function dispose() {
+    pause();
+    renderer.dispose();
+    container.removeChild(renderer.domElement);
+  }
+
+  initializeSystem();
+  animate();
+
+  return { initializeSystem, dispose, pause, resume };
+}`;
+  }
+  getRuntimeDependencies() {
+    return [
+      {
+        name: "three",
+        version: THREE_CDN_VERSION,
+        cdnUrl: THREE_CDN_URL
+      }
+    ];
+  }
+};
+function escapeHtml3(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/sketch/adapters/glsl.ts
+var BUILTIN_UNIFORMS = /* @__PURE__ */ new Set([
+  "u_resolution",
+  "u_time",
+  "u_seed"
+]);
+var FULLSCREEN_QUAD_VERTEX = `#version 300 es
+in vec2 a_position;
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}`;
+function hexToVec3(hex) {
+  const clean = hex.replace(/^#/, "");
+  const r = parseInt(clean.substring(0, 2), 16) / 255;
+  const g = parseInt(clean.substring(2, 4), 16) / 255;
+  const b = parseInt(clean.substring(4, 6), 16) / 255;
+  return [r, g, b];
+}
+function extractUniforms(source) {
+  const params = [];
+  const colors = [];
+  const uniformRegex = /uniform\s+(?:float|vec[234]|int|mat[234])\s+(u_\w+)/g;
+  let match;
+  while ((match = uniformRegex.exec(source)) !== null) {
+    const name = match[1];
+    if (BUILTIN_UNIFORMS.has(name)) continue;
+    if (/^u_color\d+$/.test(name)) {
+      colors.push(name);
+    } else {
+      params.push(name);
+    }
+  }
+  return { params, colors };
+}
+var GLSLRendererAdapter = class {
+  type = "glsl";
+  displayName = "GLSL Shader";
+  algorithmLanguage = "glsl";
+  validate(algorithm) {
+    if (!algorithm || algorithm.trim().length === 0) {
+      return { valid: false, errors: ["Algorithm source is empty"] };
+    }
+    const hasVersion = /#version\s+\d+\s+es/.test(algorithm);
+    const hasMain = /void\s+main\s*\(\s*\)/.test(algorithm);
+    const hasFragColor = /fragColor/.test(algorithm) || /gl_FragColor/.test(algorithm);
+    const errors = [];
+    if (!hasVersion) {
+      errors.push("GLSL shaders should start with a #version directive (e.g., #version 300 es)");
+    }
+    if (!hasMain) {
+      errors.push("GLSL shaders must contain a void main() function");
+    }
+    if (!hasFragColor) {
+      errors.push("GLSL shaders must write to fragColor or gl_FragColor");
+    }
+    return { valid: errors.length === 0, errors };
+  }
+  async compile(algorithm) {
+    const validation = this.validate(algorithm);
+    if (!validation.valid) {
+      throw new Error(
+        `GLSL compilation failed: ${validation.errors.join("; ")}`
+      );
+    }
+    const uniforms = extractUniforms(algorithm);
+    const compiled = {
+      fragmentSource: algorithm,
+      vertexSource: FULLSCREEN_QUAD_VERTEX,
+      uniformNames: uniforms
+    };
+    return compiled;
+  }
+  createInstance(compiled, state, canvas) {
+    const { fragmentSource, vertexSource, uniformNames } = compiled;
+    let canvasEl = null;
+    let gl = null;
+    let program = null;
+    let vao = null;
+    let positionBuffer = null;
+    let container = null;
+    let currentState = { ...state };
+    let animating = false;
+    let animationFrameId = null;
+    let startTime = 0;
+    function compileShader(glCtx, type, source) {
+      const shader = glCtx.createShader(type);
+      if (!shader) throw new Error("Failed to create shader");
+      glCtx.shaderSource(shader, source);
+      glCtx.compileShader(shader);
+      if (!glCtx.getShaderParameter(shader, glCtx.COMPILE_STATUS)) {
+        const info = glCtx.getShaderInfoLog(shader);
+        glCtx.deleteShader(shader);
+        throw new Error(`Shader compilation error: ${info}`);
+      }
+      return shader;
+    }
+    function bindUniforms(glCtx, prog) {
+      const resLoc = glCtx.getUniformLocation(prog, "u_resolution");
+      if (resLoc) {
+        glCtx.uniform2f(resLoc, canvas.width, canvas.height);
+      }
+      const seedLoc = glCtx.getUniformLocation(prog, "u_seed");
+      if (seedLoc) {
+        glCtx.uniform1f(seedLoc, currentState.seed);
+      }
+      const timeLoc = glCtx.getUniformLocation(prog, "u_time");
+      if (timeLoc) {
+        const elapsed = (performance.now() - startTime) / 1e3;
+        glCtx.uniform1f(timeLoc, elapsed);
+      }
+      for (const uName of uniformNames.params) {
+        const loc = glCtx.getUniformLocation(prog, uName);
+        if (!loc) continue;
+        const paramKey = uName.substring(2);
+        const value = currentState.params[paramKey];
+        if (value !== void 0) {
+          glCtx.uniform1f(loc, value);
+        }
+      }
+      for (const uName of uniformNames.colors) {
+        const loc = glCtx.getUniformLocation(prog, uName);
+        if (!loc) continue;
+        const idx = parseInt(uName.replace("u_color", ""), 10) - 1;
+        const hex = currentState.colorPalette[idx];
+        if (hex) {
+          const [r, g, b] = hexToVec3(hex);
+          glCtx.uniform3f(loc, r, g, b);
+        }
+      }
+    }
+    function renderFrame() {
+      if (!gl || !program || !vao) return;
+      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+      gl.clearColor(0, 0, 0, 1);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      gl.useProgram(program);
+      bindUniforms(gl, program);
+      gl.bindVertexArray(vao);
+      gl.drawArrays(gl.TRIANGLES, 0, 6);
+      gl.bindVertexArray(null);
+    }
+    function animationLoop() {
+      if (!animating) return;
+      renderFrame();
+      animationFrameId = requestAnimationFrame(animationLoop);
+    }
+    const instance = {
+      mount(el) {
+        container = el;
+        canvasEl = document.createElement("canvas");
+        canvasEl.width = canvas.width;
+        canvasEl.height = canvas.height;
+        const density = canvas.pixelDensity ?? 1;
+        if (density !== 1) {
+          canvasEl.width = canvas.width * density;
+          canvasEl.height = canvas.height * density;
+          canvasEl.style.width = `${canvas.width}px`;
+          canvasEl.style.height = `${canvas.height}px`;
+        }
+        el.appendChild(canvasEl);
+        gl = canvasEl.getContext("webgl2", {
+          preserveDrawingBuffer: true
+        });
+        if (!gl) throw new Error("WebGL2 is not supported");
+        const vertShader = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
+        const fragShader = compileShader(
+          gl,
+          gl.FRAGMENT_SHADER,
+          fragmentSource
+        );
+        program = gl.createProgram();
+        if (!program) throw new Error("Failed to create WebGL program");
+        gl.attachShader(program, vertShader);
+        gl.attachShader(program, fragShader);
+        gl.linkProgram(program);
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+          const info = gl.getProgramInfoLog(program);
+          throw new Error(`Program linking error: ${info}`);
+        }
+        gl.deleteShader(vertShader);
+        gl.deleteShader(fragShader);
+        const positions = new Float32Array([
+          -1,
+          -1,
+          1,
+          -1,
+          -1,
+          1,
+          -1,
+          1,
+          1,
+          -1,
+          1,
+          1
+        ]);
+        positionBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+        vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+        const aPosition = gl.getAttribLocation(program, "a_position");
+        gl.enableVertexAttribArray(aPosition);
+        gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
+        gl.bindVertexArray(null);
+        startTime = performance.now();
+        animating = true;
+        animationLoop();
+      },
+      unmount() {
+        if (animationFrameId !== null) {
+          cancelAnimationFrame(animationFrameId);
+          animationFrameId = null;
+        }
+        animating = false;
+        if (gl) {
+          if (vao) gl.deleteVertexArray(vao);
+          if (positionBuffer) gl.deleteBuffer(positionBuffer);
+          if (program) gl.deleteProgram(program);
+        }
+        if (canvasEl && container) {
+          container.removeChild(canvasEl);
+        }
+        gl = null;
+        program = null;
+        vao = null;
+        positionBuffer = null;
+        canvasEl = null;
+        container = null;
+      },
+      updateState(newState) {
+        currentState = { ...newState };
+        if (!animating) {
+          renderFrame();
+        }
+      },
+      redraw() {
+        renderFrame();
+      },
+      pause() {
+        animating = false;
+        if (animationFrameId !== null) {
+          cancelAnimationFrame(animationFrameId);
+          animationFrameId = null;
+        }
+      },
+      resume() {
+        if (!animating) {
+          animating = true;
+          animationLoop();
+        }
+      },
+      get isAnimating() {
+        return animating;
+      },
+      async captureFrame(options) {
+        if (!canvasEl) throw new Error("Sketch is not mounted");
+        const format = options?.format ?? "png";
+        const quality = options?.quality ?? 1;
+        const mimeType = format === "jpeg" ? "image/jpeg" : format === "webp" ? "image/webp" : "image/png";
+        return canvasEl.toDataURL(mimeType, quality);
+      },
+      async captureImageData() {
+        if (!canvasEl || !gl) throw new Error("Sketch is not mounted");
+        const width = gl.drawingBufferWidth;
+        const height = gl.drawingBufferHeight;
+        const pixels = new Uint8Array(width * height * 4);
+        gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+        const flipped = new Uint8Array(width * height * 4);
+        const rowSize = width * 4;
+        for (let y = 0; y < height; y++) {
+          const srcOffset = y * rowSize;
+          const dstOffset = (height - 1 - y) * rowSize;
+          flipped.set(pixels.subarray(srcOffset, srcOffset + rowSize), dstOffset);
+        }
+        return new ImageData(
+          new Uint8ClampedArray(flipped.buffer),
+          width,
+          height
+        );
+      },
+      dispose() {
+        instance.unmount();
+      }
+    };
+    return instance;
+  }
+  async renderOffscreen(compiled, state, canvas, options) {
+    const el = document.createElement("div");
+    el.style.position = "absolute";
+    el.style.left = "-9999px";
+    document.body.appendChild(el);
+    try {
+      const instance = this.createInstance(compiled, state, canvas);
+      instance.mount(el);
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      const dataUrl = await instance.captureFrame(options);
+      instance.dispose();
+      const base64 = dataUrl.split(",")[1] ?? "";
+      const binary = atob(base64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+      }
+      return bytes;
+    } finally {
+      document.body.removeChild(el);
+    }
+  }
+  generateStandaloneHTML(sketch) {
+    const { width, height } = sketch.canvas;
+    const pixelDensity = sketch.canvas.pixelDensity ?? 1;
+    const stateJson = JSON.stringify(sketch.state, null, 2);
+    const uniforms = extractUniforms(sketch.algorithm);
+    const paramBindings = uniforms.params.map((u) => {
+      const key = u.substring(2);
+      return `    { const loc = gl.getUniformLocation(program, "${u}"); if (loc && state.params["${key}"] !== undefined) gl.uniform1f(loc, state.params["${key}"]); }`;
+    }).join("\n");
+    const colorBindings = uniforms.colors.map((u) => {
+      const idx = parseInt(u.replace("u_color", ""), 10) - 1;
+      return `    { const loc = gl.getUniformLocation(program, "${u}"); if (loc && state.colorPalette[${idx}]) { const c = state.colorPalette[${idx}].replace('#',''); gl.uniform3f(loc, parseInt(c.substring(0,2),16)/255, parseInt(c.substring(2,4),16)/255, parseInt(c.substring(4,6),16)/255); } }`;
+    }).join("\n");
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml4(sketch.title)}</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #111; }
+    canvas { display: block; max-width: 100vw; max-height: 100vh; }
+  </style>
+</head>
+<body>
+  <canvas id="canvas" width="${width * pixelDensity}" height="${height * pixelDensity}" style="width:${width}px;height:${height}px;"></canvas>
+  <script>
+    const state = ${stateJson};
+
+    const canvas = document.getElementById('canvas');
+    const gl = canvas.getContext('webgl2', { preserveDrawingBuffer: true });
+    if (!gl) { document.body.textContent = 'WebGL2 not supported'; throw new Error('No WebGL2'); }
+
+    // Vertex shader: fullscreen quad
+    const vertSrc = \`${FULLSCREEN_QUAD_VERTEX}\`;
+
+    // Fragment shader
+    const fragSrc = \`${sketch.algorithm.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$")}\`;
+
+    function createShader(type, src) {
+      const s = gl.createShader(type);
+      gl.shaderSource(s, src);
+      gl.compileShader(s);
+      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
+      return s;
+    }
+
+    const program = gl.createProgram();
+    gl.attachShader(program, createShader(gl.VERTEX_SHADER, vertSrc));
+    gl.attachShader(program, createShader(gl.FRAGMENT_SHADER, fragSrc));
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(program));
+
+    const positions = new Float32Array([-1,-1, 1,-1, -1,1, -1,1, 1,-1, 1,1]);
+    const buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    const aPos = gl.getAttribLocation(program, 'a_position');
+    gl.enableVertexAttribArray(aPos);
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+    gl.bindVertexArray(null);
+
+    const startTime = performance.now();
+    function render() {
+      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+      gl.clearColor(0, 0, 0, 1);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      gl.useProgram(program);
+
+      // Built-in uniforms
+      { const loc = gl.getUniformLocation(program, 'u_resolution'); if (loc) gl.uniform2f(loc, ${width}, ${height}); }
+      { const loc = gl.getUniformLocation(program, 'u_seed'); if (loc) gl.uniform1f(loc, state.seed); }
+      { const loc = gl.getUniformLocation(program, 'u_time'); if (loc) gl.uniform1f(loc, (performance.now() - startTime) / 1000); }
+
+      // Parameter uniforms
+${paramBindings}
+
+      // Color uniforms
+${colorBindings}
+
+      gl.bindVertexArray(vao);
+      gl.drawArrays(gl.TRIANGLES, 0, 6);
+      gl.bindVertexArray(null);
+      requestAnimationFrame(render);
+    }
+    render();
+  </script>
+</body>
+</html>`;
+  }
+  getAlgorithmTemplate() {
+    return `#version 300 es
+precision highp float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_seed;
+uniform float u_noiseScale;    // mapped from state.params.noiseScale
+uniform vec3 u_color1;         // mapped from state.colorPalette[0]
+out vec4 fragColor;
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  fragColor = vec4(uv, 0.5 + 0.5 * sin(u_time), 1.0);
+}`;
+  }
+  getRuntimeDependencies() {
+    return [];
+  }
+};
+function escapeHtml4(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/sketch/adapters/svg.ts
+var SVGRendererAdapter = class {
+  type = "svg";
+  displayName = "SVG";
+  algorithmLanguage = "javascript";
+  validate(algorithm) {
+    if (!algorithm || algorithm.trim().length === 0) {
+      return { valid: false, errors: ["Algorithm source is empty"] };
+    }
+    const hasSketchFn = /function\s+sketch\s*\(\s*state\s*\)/.test(algorithm) || /(?:const|let|var)\s+sketch\s*=\s*(?:function\s*)?\(\s*state\s*\)/.test(algorithm) || /(?:const|let|var)\s+sketch\s*=\s*\(\s*state\s*\)\s*=>/.test(algorithm);
+    if (!hasSketchFn) {
+      return {
+        valid: false,
+        errors: [
+          "SVG algorithms must export a function with signature: function sketch(state)"
+        ]
+      };
+    }
+    return { valid: true, errors: [] };
+  }
+  async compile(algorithm) {
+    const validation = this.validate(algorithm);
+    if (!validation.valid) {
+      throw new Error(
+        `SVG compilation failed: ${validation.errors.join("; ")}`
+      );
+    }
+    const wrappedSource = `
+      return (function() {
+        ${algorithm}
+        return sketch;
+      })();
+    `;
+    try {
+      const factory = new Function(wrappedSource);
+      const compiled = {
+        source: algorithm,
+        factory: factory()
+      };
+      return compiled;
+    } catch (err) {
+      throw new Error(
+        `SVG compilation failed: ${err instanceof Error ? err.message : String(err)}`
+      );
+    }
+  }
+  createInstance(compiled, state, canvas) {
+    const { factory } = compiled;
+    let container = null;
+    let currentState = { ...state, canvas };
+    let sketchModule = null;
+    function regenerate() {
+      if (!container || !sketchModule) return;
+      if (typeof sketchModule["generate"] === "function") {
+        const svgString = sketchModule["generate"]();
+        container.innerHTML = svgString;
+      }
+    }
+    const instance = {
+      mount(el) {
+        container = el;
+        sketchModule = factory(currentState);
+        regenerate();
+      },
+      unmount() {
+        if (container) {
+          container.innerHTML = "";
+        }
+        container = null;
+        sketchModule = null;
+      },
+      updateState(newState) {
+        currentState = { ...newState, canvas };
+        sketchModule = factory(currentState);
+        regenerate();
+      },
+      redraw() {
+        regenerate();
+      },
+      pause() {
+      },
+      resume() {
+      },
+      get isAnimating() {
+        return false;
+      },
+      async captureFrame(_options) {
+        if (!container) throw new Error("Sketch is not mounted");
+        const svgEl = container.querySelector("svg");
+        if (!svgEl) throw new Error("No SVG element found");
+        const serializer = new XMLSerializer();
+        const svgString = serializer.serializeToString(svgEl);
+        const base64 = btoa(unescape(encodeURIComponent(svgString)));
+        return `data:image/svg+xml;base64,${base64}`;
+      },
+      async captureImageData() {
+        if (!container) throw new Error("Sketch is not mounted");
+        const svgEl = container.querySelector("svg");
+        if (!svgEl) throw new Error("No SVG element found");
+        const serializer = new XMLSerializer();
+        const svgString = serializer.serializeToString(svgEl);
+        const blob = new Blob([svgString], { type: "image/svg+xml" });
+        const url = URL.createObjectURL(blob);
+        const img = new Image();
+        await new Promise((resolve, reject) => {
+          img.onload = () => resolve();
+          img.onerror = () => reject(new Error("Failed to load SVG as image"));
+          img.src = url;
+        });
+        const offscreen = document.createElement("canvas");
+        offscreen.width = canvas.width;
+        offscreen.height = canvas.height;
+        const ctx = offscreen.getContext("2d");
+        if (!ctx) throw new Error("Cannot get 2D context");
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        URL.revokeObjectURL(url);
+        return ctx.getImageData(0, 0, canvas.width, canvas.height);
+      },
+      dispose() {
+        instance.unmount();
+      }
+    };
+    return instance;
+  }
+  async renderOffscreen(compiled, state, canvas, _options) {
+    const { factory } = compiled;
+    const stateWithCanvas = { ...state, canvas };
+    const module = factory(stateWithCanvas);
+    let svgString;
+    if (typeof module["generate"] === "function") {
+      svgString = module["generate"]();
+    } else {
+      throw new Error("SVG sketch module must have a generate() method");
+    }
+    const encoder = new TextEncoder();
+    return encoder.encode(svgString);
+  }
+  generateStandaloneHTML(sketch) {
+    const { width, height } = sketch.canvas;
+    const stateJson = JSON.stringify(sketch.state, null, 2);
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml5(sketch.title)}</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #111; }
+    #svg-container svg { display: block; width: 100%; height: auto; max-width: 100vw; max-height: 100vh; }
+  </style>
+</head>
+<body>
+  <div id="svg-container"></div>
+  <script>
+    const state = ${stateJson};
+    state.canvas = { width: ${width}, height: ${height} };
+
+    ${sketch.algorithm}
+
+    const module = sketch(state);
+    const svgString = module.generate ? module.generate() : module.initializeSystem();
+    document.getElementById('svg-container').innerHTML = svgString;
+  </script>
+</body>
+</html>`;
+  }
+  getAlgorithmTemplate() {
+    return `function sketch(state) {
+  const { width, height } = state.canvas;
+  function generate() {
+    return \`<svg xmlns="http://www.w3.org/2000/svg" width="\${width}" height="\${height}" viewBox="0 0 \${width} \${height}">
+      <!-- generated elements -->
+    </svg>\`;
+  }
+  return { generate, initializeSystem: generate };
+}`;
+  }
+  getRuntimeDependencies() {
+    return [];
+  }
+};
+function escapeHtml5(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/sketch/registry.ts
+var RendererRegistry = class {
+  adapters = /* @__PURE__ */ new Map();
+  defaultType = "p5";
+  /**
+   * Register a renderer adapter. Replaces any existing adapter for the same type.
+   */
+  register(adapter) {
+    this.adapters.set(adapter.type, adapter);
+  }
+  /**
+   * Resolve a renderer adapter by type.
+   * If type is undefined, returns the default adapter (p5 — v1.0 compat).
+   *
+   * @throws Error if the type is not registered.
+   */
+  resolve(type) {
+    const resolvedType = type ?? this.defaultType;
+    const adapter = this.adapters.get(resolvedType);
+    if (!adapter) {
+      const available = [...this.adapters.keys()].join(", ");
+      throw new Error(
+        `Unknown renderer type "${resolvedType}". Registered types: ${available || "(none)"}`
+      );
+    }
+    return adapter;
+  }
+  /**
+   * List all registered renderer types.
+   */
+  list() {
+    return [...this.adapters.keys()];
+  }
+  /**
+   * Get the default renderer adapter (p5).
+   */
+  getDefault() {
+    return this.resolve(this.defaultType);
+  }
+  /**
+   * Check if a renderer type is registered.
+   */
+  has(type) {
+    return this.adapters.has(type);
+  }
+};
+function createDefaultRegistry() {
+  const registry = new RendererRegistry();
+  registry.register(new P5RendererAdapter());
+  registry.register(new Canvas2DRendererAdapter());
+  registry.register(new ThreeRendererAdapter());
+  registry.register(new GLSLRendererAdapter());
+  registry.register(new SVGRendererAdapter());
+  return registry;
+}
+
+// src/skill/skills.ts
+var COMPOSITION_SKILLS = [
+  {
+    id: "golden-ratio",
+    name: "Golden Ratio",
+    category: "composition",
+    complexity: "intermediate",
+    description: "Use the golden ratio (1:1.618) to create naturally harmonious proportions and spiral compositions.",
+    theory: `The golden ratio (phi, approximately 1.618) appears throughout nature and has been used in art and architecture for millennia. In generative art, it provides a mathematical foundation for creating compositions that feel naturally balanced.
+
+The golden rectangle can be recursively subdivided, creating a spiral that guides the viewer's eye. Elements placed along this spiral or at golden section points create visual harmony without the rigidity of symmetric layouts.
+
+Key applications in generative art:
+- Divide the canvas at golden ratio points (61.8% / 38.2%) for element placement
+- Use the golden spiral as a path for distributing elements
+- Scale recursive elements by phi for self-similar patterns
+- Apply phi to spacing, margins, and proportional relationships`,
+    principles: [
+      "Divide compositions at 61.8% / 38.2% rather than halves",
+      "Place focal elements at golden section intersections",
+      "Use the golden spiral to guide element distribution",
+      "Scale nested or recursive elements by phi (1.618) or 1/phi (0.618)",
+      "Apply golden proportions to negative space as well as positive forms"
+    ],
+    references: [
+      { title: "Art and Visual Perception", author: "Rudolf Arnheim", year: 1954 },
+      { title: "Principles of Form and Design", author: "Wucius Wong", year: 1993 }
+    ],
+    suggestedParameters: [
+      { key: "phi", label: "Golden Ratio", min: 1, max: 2, step: 1e-3, default: 1.618 },
+      { key: "subdivisions", label: "Subdivisions", min: 1, max: 12, step: 1, default: 6 }
+    ]
+  },
+  {
+    id: "rule-of-thirds",
+    name: "Rule of Thirds",
+    category: "composition",
+    complexity: "beginner",
+    description: "Divide the canvas into a 3x3 grid and place key elements at intersection points for dynamic balance.",
+    theory: `The rule of thirds is one of the most fundamental composition techniques. By dividing the canvas into nine equal sections with two horizontal and two vertical lines, artists create four "power points" at the intersections where the viewer's eye naturally rests.
+
+In generative art, this grid serves as an anchor system. Rather than centering elements (which creates static compositions), placing density clusters, color accents, or focal geometries at third-line intersections produces dynamic, engaging layouts.
+
+This rule also applies to the distribution of visual weight: roughly two-thirds of the canvas can be one tone or density, with the remaining third providing contrast.`,
+    principles: [
+      "Place primary focal elements at one of the four intersection points",
+      "Align dominant lines (horizons, divisions) with the third lines, not center",
+      "Distribute visual weight asymmetrically: 2/3 to 1/3 ratio",
+      "Use the grid to create tension between filled and empty areas",
+      "Multiple elements should occupy different intersection points"
+    ],
+    references: [
+      { title: "Art and Visual Perception", author: "Rudolf Arnheim", year: 1954 },
+      { title: "Principles of Form and Design", author: "Wucius Wong", year: 1993 }
+    ],
+    suggestedParameters: [
+      { key: "gridDivisions", label: "Grid Divisions", min: 2, max: 8, step: 1, default: 3 },
+      { key: "focalStrength", label: "Focal Strength", min: 0.1, max: 1, step: 0.1, default: 0.7 }
+    ]
+  },
+  {
+    id: "visual-weight",
+    name: "Visual Weight & Balance",
+    category: "composition",
+    complexity: "intermediate",
+    description: "Create equilibrium through the distribution of visual weight \u2014 size, density, color intensity, and position.",
+    theory: `Every visual element carries "weight" determined by its size, color intensity, texture density, and position relative to the canvas center. Rudolf Arnheim's research showed that viewers perceive compositions as balanced or imbalanced based on this aggregate weight distribution.
+
+In generative art, visual weight manifests through:
+- **Size**: Larger elements carry more weight
+- **Value contrast**: High-contrast elements are heavier than low-contrast ones
+- **Color saturation**: Saturated colors are heavier than muted ones
+- **Density**: Clusters of small elements can balance a single large one
+- **Position**: Elements farther from center exert more leverage (like a seesaw)
+
+Balance can be symmetrical (formal, stable), asymmetrical (dynamic, interesting), or radial (emanating from center).`,
+    principles: [
+      "A small, high-contrast element can balance a large, low-contrast one",
+      "Elements farther from the center carry more compositional weight",
+      "Asymmetrical balance creates more visual interest than symmetry",
+      "Distribute density gradients to create directional visual flow",
+      "Empty space (negative space) has visual weight and must be balanced too",
+      "Color saturation and value contribute independently to perceived weight"
+    ],
+    references: [
+      { title: "Art and Visual Perception", author: "Rudolf Arnheim", year: 1954 }
+    ],
+    suggestedParameters: [
+      { key: "balancePoint", label: "Balance Point", min: 0.2, max: 0.8, step: 0.05, default: 0.5 },
+      { key: "weightContrast", label: "Weight Contrast", min: 0.1, max: 2, step: 0.1, default: 1 }
+    ]
+  },
+  {
+    id: "gestalt-grouping",
+    name: "Gestalt Grouping",
+    category: "composition",
+    complexity: "intermediate",
+    description: "Apply Gestalt principles \u2014 proximity, similarity, closure, continuity \u2014 to organize elements into perceived wholes.",
+    theory: `Gestalt psychology reveals how humans perceive visual elements as organized groups rather than isolated parts. These principles are powerful tools for generative artists:
+
+- **Proximity**: Elements close together are perceived as a group. Control spacing to create clusters or separations.
+- **Similarity**: Elements sharing color, size, or shape are grouped. Use gradual variation to create sub-groups.
+- **Closure**: The mind completes incomplete shapes. Leave gaps in patterns \u2014 viewers will fill them in.
+- **Continuity**: Elements arranged along a line or curve are perceived as related. Use flow fields or parametric curves.
+- **Figure-Ground**: The relationship between foreground elements and background space defines the composition.
+
+In generative art, these principles help create readable structure from potentially chaotic algorithms.`,
+    principles: [
+      "Use proximity (spacing) as the primary grouping mechanism",
+      "Vary one property (color, size) while keeping others constant to create similarity groups",
+      "Leave intentional gaps for the viewer's mind to complete (closure)",
+      "Arrange elements along implied lines or curves for continuity",
+      "Ensure clear figure-ground separation at all parameter settings",
+      "Layer multiple Gestalt principles for complex but readable compositions"
+    ],
+    references: [
+      { title: "Art and Visual Perception", author: "Rudolf Arnheim", year: 1954 },
+      { title: "Principles of Form and Design", author: "Wucius Wong", year: 1993 }
+    ],
+    suggestedParameters: [
+      { key: "groupSpacing", label: "Group Spacing", min: 0.5, max: 5, step: 0.1, default: 2 },
+      { key: "similarity", label: "Similarity", min: 0, max: 1, step: 0.05, default: 0.8 },
+      { key: "elementCount", label: "Element Count", min: 10, max: 500, step: 10, default: 100 }
+    ]
+  },
+  {
+    id: "figure-ground",
+    name: "Figure-Ground Relationship",
+    category: "composition",
+    complexity: "beginner",
+    description: "Control the interplay between positive forms (figure) and negative space (ground) for clarity and ambiguity.",
+    theory: `The figure-ground relationship is the most fundamental perceptual organization. Every composition consists of figures (perceived objects) and ground (the space around and between them).
+
+Strong figure-ground contrast creates clarity and focus. Deliberate ambiguity \u2014 where figure and ground are interchangeable \u2014 creates visual puzzles that engage viewers (as in M.C. Escher's tessellations).
+
+In generative art, controlling figure-ground means managing:
+- Value contrast between elements and background
+- Edge definition (sharp vs. soft boundaries)
+- Density distribution (clustered elements read as figure)
+- Reversibility (can the viewer flip perception?)`,
+    principles: [
+      "Maintain sufficient contrast between figure and ground for readability",
+      "Use value (light/dark) as the primary figure-ground separator",
+      "Create deliberate ambiguity for visual interest when appropriate",
+      "Small enclosed areas tend to be perceived as figure; large areas as ground",
+      "Convex shapes are more likely perceived as figure than concave ones"
+    ],
+    references: [
+      { title: "Art and Visual Perception", author: "Rudolf Arnheim", year: 1954 }
+    ],
+    suggestedParameters: [
+      { key: "contrast", label: "Figure-Ground Contrast", min: 0.1, max: 1, step: 0.05, default: 0.7 },
+      { key: "density", label: "Figure Density", min: 0.1, max: 0.9, step: 0.05, default: 0.4 }
+    ]
+  },
+  {
+    id: "rhythm-movement",
+    name: "Rhythm & Movement",
+    category: "composition",
+    complexity: "advanced",
+    description: "Create visual rhythm through repetition, variation, and progression to guide the viewer's eye across the composition.",
+    theory: `Rhythm in visual art functions like rhythm in music \u2014 it creates patterns of emphasis and rest that move the viewer's eye through the composition. Wucius Wong identifies several types of visual rhythm:
+
+- **Regular rhythm**: Consistent repetition of identical elements at equal intervals. Creates order and predictability.
+- **Alternating rhythm**: Two or more elements or spacings alternate. Creates more complex patterns.
+- **Progressive rhythm**: Elements gradually change in size, color, spacing, or orientation. Creates directional movement.
+- **Flowing rhythm**: Elements follow organic, curving paths. Creates natural, fluid movement.
+- **Random rhythm**: Irregular repetition with controlled variation. Creates controlled chaos.
+
+In generative art, rhythm emerges from the interplay between your algorithm's regularity and its stochastic variation. The seed controls the specific instance; the parameters control the type and intensity of rhythm.`,
+    principles: [
+      "Establish a base rhythm through regular repetition before introducing variation",
+      "Use progressive changes in size or spacing to create directional movement",
+      "Alternate between tension (clustering) and release (spacing) zones",
+      "Let flow fields or parametric curves create natural movement paths",
+      "Control the ratio of regularity to randomness via parameters",
+      "Use acceleration/deceleration in element distribution for energy"
+    ],
+    references: [
+      { title: "Principles of Form and Design", author: "Wucius Wong", year: 1993 },
+      { title: "Art and Visual Perception", author: "Rudolf Arnheim", year: 1954 }
+    ],
+    suggestedParameters: [
+      { key: "frequency", label: "Rhythm Frequency", min: 1, max: 20, step: 1, default: 8 },
+      { key: "variation", label: "Variation", min: 0, max: 1, step: 0.05, default: 0.3 },
+      { key: "flow", label: "Flow Strength", min: 0, max: 2, step: 0.1, default: 0.5 }
+    ]
+  }
+];
+var COLOR_SKILLS = [
+  {
+    id: "color-harmony",
+    name: "Color Harmony Systems",
+    category: "color",
+    complexity: "beginner",
+    description: "Use systematic color relationships \u2014 complementary, analogous, triadic, split-complementary \u2014 for harmonious palettes.",
+    theory: `Color harmony describes combinations of colors that are aesthetically pleasing. Johannes Itten formalized these relationships using the color wheel:
+
+- **Complementary**: Colors opposite on the wheel (e.g., blue/orange). Maximum contrast, vibrant when juxtaposed.
+- **Analogous**: 2-4 adjacent colors on the wheel. Harmonious and calm, low contrast.
+- **Triadic**: Three colors equally spaced (120\xB0 apart). Balanced and vibrant.
+- **Split-complementary**: A color plus the two colors adjacent to its complement. High contrast with less tension.
+- **Tetradic**: Two pairs of complementary colors. Rich and complex.
+
+In generative art, these systems provide algorithmic palette generation. Start with a base hue, then calculate harmonious companions using angular relationships on the HSL color wheel.`,
+    principles: [
+      "Choose one dominant color and use harmonics as accents (60-30-10 rule)",
+      "Complementary pairs create maximum vibrance \u2014 use for focal contrast",
+      "Analogous schemes work well for atmospheric, mood-driven pieces",
+      "Vary saturation and value within a harmonic scheme for depth",
+      "Use triadic schemes when you need balanced variety without chaos"
+    ],
+    references: [
+      { title: "The Art of Color", author: "Johannes Itten", year: 1961 },
+      { title: "Interaction of Color", author: "Josef Albers", year: 1963 }
+    ],
+    suggestedParameters: [
+      { key: "baseHue", label: "Base Hue", min: 0, max: 360, step: 1, default: 200 },
+      { key: "harmonyAngle", label: "Harmony Angle", min: 15, max: 180, step: 5, default: 120 }
+    ],
+    suggestedColors: [
+      { key: "base", label: "Base Color", default: "#2196f3" },
+      { key: "accent", label: "Accent Color", default: "#ff9800" }
+    ]
+  },
+  {
+    id: "simultaneous-contrast",
+    name: "Simultaneous Contrast",
+    category: "color",
+    complexity: "advanced",
+    description: "Exploit how adjacent colors alter each other's perceived hue, value, and saturation \u2014 the core of Albers' teaching.",
+    theory: `Josef Albers spent decades demonstrating that color is the most relative medium in art. The same color appears dramatically different depending on its surroundings:
+
+- A gray square on a black background appears lighter than the same gray on white
+- A neutral color surrounded by red appears to shift toward green (and vice versa)
+- Small color areas are more affected by their surroundings than large ones
+
+This phenomenon \u2014 simultaneous contrast \u2014 means that in generative art, you cannot choose colors in isolation. The same palette will look different depending on element sizes, spacing, and layering order.
+
+Practical implications:
+- Test colors in context, not in isolation
+- Adjacent complementary colors intensify each other
+- Adjacent similar colors reduce each other's saturation
+- Background color dramatically shifts perception of all foreground elements`,
+    principles: [
+      "The same color will appear different depending on what surrounds it",
+      "Adjacent complementary colors intensify each other (vibration effect)",
+      "Small color areas are dominated by surrounding colors",
+      "Background color shifts the perceived hue of all foreground elements",
+      "Use simultaneous contrast deliberately to create optical effects",
+      "Test palette choices at various element sizes \u2014 effects change with scale"
+    ],
+    references: [
+      { title: "Interaction of Color", author: "Josef Albers", year: 1963 }
+    ],
+    suggestedParameters: [
+      { key: "elementSize", label: "Element Size", min: 2, max: 100, step: 1, default: 20 },
+      { key: "borderWidth", label: "Border Width", min: 0, max: 10, step: 0.5, default: 0 }
+    ]
+  },
+  {
+    id: "color-temperature",
+    name: "Color Temperature",
+    category: "color",
+    complexity: "beginner",
+    description: "Use warm (red/orange/yellow) and cool (blue/green/violet) color relationships to create depth and emotional tone.",
+    theory: `Color temperature divides the spectrum into warm colors (reds, oranges, yellows) and cool colors (blues, greens, violets). This division has profound perceptual and emotional effects:
+
+**Spatial effects**: Warm colors appear to advance (come toward the viewer) while cool colors recede. This creates an automatic sense of depth without perspective geometry.
+
+**Emotional associations**: Warm colors evoke energy, passion, urgency. Cool colors evoke calm, distance, contemplation.
+
+**Temperature contrast**: The tension between warm and cool areas creates visual energy. A predominantly cool composition with a warm accent immediately draws the eye to the accent.
+
+In generative art, map temperature to depth layers: cool backgrounds, warm foregrounds. Or use temperature gradients across the composition to create directional flow.`,
+    principles: [
+      "Warm colors advance, cool colors recede \u2014 use for spatial depth",
+      "A small warm accent in a cool composition creates a strong focal point",
+      "Temperature contrast is as important as value contrast for composition",
+      "Map color temperature to z-depth or layering order",
+      "Use temperature gradients to create directional energy flow"
+    ],
+    references: [
+      { title: "The Art of Color", author: "Johannes Itten", year: 1961 },
+      { title: "Interaction of Color", author: "Josef Albers", year: 1963 }
+    ],
+    suggestedParameters: [
+      { key: "warmth", label: "Warmth", min: 0, max: 1, step: 0.05, default: 0.5 },
+      { key: "temperatureRange", label: "Temperature Range", min: 30, max: 180, step: 10, default: 90 }
+    ],
+    suggestedColors: [
+      { key: "warm", label: "Warm Tone", default: "#ff6b35" },
+      { key: "cool", label: "Cool Tone", default: "#4a90d9" }
+    ]
+  },
+  {
+    id: "itten-contrasts",
+    name: "Itten's Seven Contrasts",
+    category: "color",
+    complexity: "advanced",
+    description: "Apply Itten's systematic framework of seven color contrasts to create specific visual effects.",
+    theory: `Johannes Itten identified seven fundamental types of color contrast, each producing distinct visual effects:
+
+1. **Contrast of Hue**: Pure hues side by side (red, blue, yellow). Maximum color variety.
+2. **Light-Dark Contrast**: Value differences. The strongest structural contrast.
+3. **Cold-Warm Contrast**: Temperature opposition. Creates spatial depth.
+4. **Complementary Contrast**: Opposite hues. Each intensifies the other.
+5. **Simultaneous Contrast**: Perceived color shift caused by adjacency.
+6. **Contrast of Saturation**: Pure vs. muted colors. Creates focus hierarchy.
+7. **Contrast of Extension**: Relative area sizes of colors. Balances visual weight.
+
+Each contrast type can be parameterized in generative art. A single piece might employ multiple contrasts simultaneously, with parameters controlling the intensity of each.`,
+    principles: [
+      "Light-dark contrast provides the structural backbone of any composition",
+      "Use saturation contrast to create hierarchy: saturated = focal, muted = ambient",
+      "Complementary contrast creates energy; analogous reduces it",
+      "Contrast of extension: balance area ratios to color intensity (bright colors need less area)",
+      "Layer multiple contrast types for visual complexity",
+      "Control contrast intensity through parameters for exploration"
+    ],
+    references: [
+      { title: "The Art of Color", author: "Johannes Itten", year: 1961 }
+    ],
+    suggestedParameters: [
+      { key: "hueContrast", label: "Hue Contrast", min: 0, max: 1, step: 0.05, default: 0.5 },
+      { key: "valueContrast", label: "Value Contrast", min: 0.1, max: 1, step: 0.05, default: 0.7 },
+      { key: "saturationContrast", label: "Saturation Contrast", min: 0, max: 1, step: 0.05, default: 0.4 }
+    ]
+  },
+  {
+    id: "value-structure",
+    name: "Value Structure",
+    category: "color",
+    complexity: "intermediate",
+    description: "Organize compositions through light-dark value patterns \u2014 the foundation that underlies all color decisions.",
+    theory: `Value (lightness/darkness) is the most important property of color for composition. A piece that works in grayscale will work in any palette; a piece that fails in grayscale cannot be saved by color alone.
+
+Value structure means planning the distribution of lights, mid-tones, and darks across the composition. Classic approaches include:
+
+- **High-key**: Predominantly light values. Airy, ethereal, optimistic.
+- **Low-key**: Predominantly dark values. Dramatic, mysterious, intense.
+- **Full-range**: Full spectrum from near-white to near-black. Maximum contrast and visual impact.
+- **Limited-range**: Narrow value band. Subtle, atmospheric, unified.
+
+In generative art, map value to depth, density, or importance. Establish a value plan (the notan \u2014 simplified light/dark pattern) before adding color complexity.`,
+    principles: [
+      "Squint at your output: if the value pattern is unclear, color won't help",
+      "Limit your palette to 3-5 value steps for strong structure",
+      "Reserve highest contrast for the focal area",
+      "Use mid-tones for transitions and atmosphere",
+      "Dark values carry more visual weight than light ones at equal size"
+    ],
+    references: [
+      { title: "Interaction of Color", author: "Josef Albers", year: 1963 },
+      { title: "The Art of Color", author: "Johannes Itten", year: 1961 }
+    ],
+    suggestedParameters: [
+      { key: "valueRange", label: "Value Range", min: 0.1, max: 1, step: 0.05, default: 0.8 },
+      { key: "keyValue", label: "Key Value", min: 0, max: 1, step: 0.05, default: 0.3 }
+    ]
+  },
+  {
+    id: "palette-generation",
+    name: "Algorithmic Palette Generation",
+    category: "color",
+    complexity: "intermediate",
+    description: "Generate cohesive color palettes algorithmically using perceptual color spaces and mathematical relationships.",
+    theory: `Traditional color theory works with the HSL/HSV color wheel, but perceptual uniformity is better achieved in modern color spaces like OKLCH (Oklab Lightness-Chroma-Hue).
+
+In OKLCH:
+- **L** (lightness, 0-1): Perceptually uniform brightness steps
+- **C** (chroma, 0-0.4): Saturation/vibrancy
+- **H** (hue, 0-360): Hue angle
+
+Algorithmic palette strategies:
+- **Fixed hue, varying L/C**: Monochromatic palette with perceptual uniformity
+- **Fixed L/C, varying H**: Evenly-spaced hues at consistent brightness (true equiluminant palette)
+- **Seed-based generation**: Use the sketch seed to derive a base hue, then calculate harmonics
+- **Gradient interpolation**: Interpolate between anchor colors in OKLCH for smooth transitions
+
+The advantage of working in OKLCH over HSL is that equal mathematical steps produce equal perceptual steps \u2014 a gradient from dark blue to light blue will look evenly spaced rather than having a perceptual "jump" in the middle.`,
+    principles: [
+      "Use OKLCH or Oklab for perceptually uniform color operations",
+      "Generate palettes from seed + base hue for deterministic, explorable results",
+      "Keep chroma (saturation) consistent across a palette for cohesion",
+      "Vary lightness for value structure, hue for variety, chroma for energy",
+      "Map parameter ranges to hue angles for intuitive color exploration",
+      "Limit generated palettes to 3-7 colors for coherence"
+    ],
+    references: [
+      { title: "Interaction of Color", author: "Josef Albers", year: 1963 }
+    ],
+    suggestedParameters: [
+      { key: "baseHue", label: "Base Hue", min: 0, max: 360, step: 1, default: 220 },
+      { key: "chroma", label: "Chroma", min: 0.05, max: 0.35, step: 0.01, default: 0.15 },
+      { key: "paletteSize", label: "Palette Size", min: 3, max: 7, step: 1, default: 5 }
+    ]
+  }
+];
+
+// src/skill/registry.ts
+var SkillRegistry = class {
+  skills = /* @__PURE__ */ new Map();
+  /** Register a skill definition. */
+  register(skill) {
+    this.skills.set(skill.id, skill);
+  }
+  /** Resolve a skill by ID. Throws if not found. */
+  resolve(id) {
+    const skill = this.skills.get(id);
+    if (!skill) {
+      throw new Error(`Unknown skill: '${id}'`);
+    }
+    return skill;
+  }
+  /** Get a skill by ID, or undefined if not found. */
+  get(id) {
+    return this.skills.get(id);
+  }
+  /** List all skills, optionally filtered by category. */
+  list(category) {
+    const all = Array.from(this.skills.values());
+    if (category) {
+      return all.filter((s) => s.category === category);
+    }
+    return all;
+  }
+  /** Check if a skill ID is registered. */
+  has(id) {
+    return this.skills.has(id);
+  }
+  /** Return unique categories across all registered skills. */
+  categories() {
+    const cats = /* @__PURE__ */ new Set();
+    for (const skill of this.skills.values()) {
+      cats.add(skill.category);
+    }
+    return Array.from(cats).sort();
+  }
+};
+function createDefaultSkillRegistry() {
+  const registry = new SkillRegistry();
+  for (const skill of [...COMPOSITION_SKILLS, ...COLOR_SKILLS]) {
+    registry.register(skill);
+  }
+  return registry;
+}
+export {
+  COLOR_SKILLS,
+  COMPOSITION_SKILLS,
+  Canvas2DRendererAdapter,
+  GLSLRendererAdapter,
+  P5RendererAdapter,
+  RendererRegistry,
+  SVGRendererAdapter,
+  SkillRegistry,
+  ThreeRendererAdapter,
+  createDefaultRegistry,
+  createDefaultSkillRegistry,
+  hexToVec3
+};
+//# sourceMappingURL=index.js.map