@shopify/klint 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,7 +1,3 @@
-import {
-  __require
-} from "./chunk-3RG5ZIWI.js";
-
 // src/Klint.tsx
 import React, { useRef, useEffect, useState, useCallback } from "react";
 var DEFAULT_FPS = 60;
@@ -46,33 +42,23 @@ var CONFIG_PROPS = [
   "__fillRule",
   "__isPlaying"
 ];
-function useAnimate(contextRef, draw, isVisible, enablePerformanceTracking = false) {
+function useAnimate(contextRef, draw, isVisible) {
   const animationFrameId = useRef(0);
-  const frameTimeHistoryRef = useRef([]);
-  const frameStartTimeRef = useRef(0);
-  const frameCountRef = useRef(0);
-  const lastFpsUpdateRef = useRef(0);
-  const droppedFramesRef = useRef(0);
   const animate = useCallback(
     (timestamp = 0) => {
       if (!contextRef.current || !isVisible) return;
       if (!contextRef.current.__isReadyToDraw) return;
-      if (!contextRef.current.__isPlaying) {
-        return;
-      }
+      if (!contextRef.current.__isPlaying) return;
       const context = contextRef.current;
       const now = timestamp;
       const target = 1e3 / context.fps;
       if (!context.__lastTargetTime) {
         context.__lastTargetTime = now;
         context.__lastRealTime = now;
-        frameStartTimeRef.current = now;
-        lastFpsUpdateRef.current = now;
       }
       const sinceLast = now - context.__lastTargetTime;
       const epsilon = 5;
       if (sinceLast >= target - epsilon) {
-        const frameStart = enablePerformanceTracking && context.__performance ? performance.now() : 0;
         context.deltaTime = now - context.__lastRealTime;
         draw(context);
         if (context.time > 1e7) context.time = 0;
@@ -81,40 +67,10 @@ function useAnimate(contextRef, draw, isVisible, enablePerformanceTracking = fal
         context.frame++;
         context.__lastTargetTime = now;
         context.__lastRealTime = now;
-        if (enablePerformanceTracking && context.__performance) {
-          const frameTime = performance.now() - frameStart;
-          const targetFrameTime = 1e3 / context.fps;
-          frameTimeHistoryRef.current.push(frameTime);
-          if (frameTimeHistoryRef.current.length > 60) {
-            frameTimeHistoryRef.current.shift();
-          }
-          const avgFrameTime = frameTimeHistoryRef.current.reduce((a, b) => a + b, 0) / frameTimeHistoryRef.current.length;
-          context.__performance.frameTime = frameTime;
-          context.__performance.averageFrameTime = avgFrameTime;
-          context.__performance.minFrameTime = Math.min(
-            ...frameTimeHistoryRef.current
-          );
-          context.__performance.maxFrameTime = Math.max(
-            ...frameTimeHistoryRef.current
-          );
-          if (frameTime > targetFrameTime * 1.1) {
-            droppedFramesRef.current++;
-          }
-          context.__performance.droppedFrames = droppedFramesRef.current;
-          frameCountRef.current++;
-          if (now - lastFpsUpdateRef.current >= 1e3) {
-            context.__performance.fps = frameCountRef.current;
-            frameCountRef.current = 0;
-            lastFpsUpdateRef.current = now;
-            if (typeof performance !== "undefined" && performance.memory) {
-              context.__performance.memoryUsage = performance.memory.usedJSHeapSize / 1048576;
-            }
-          }
-        }
       }
       animationFrameId.current = requestAnimationFrame(animate);
     },
-    [draw, isVisible, contextRef, enablePerformanceTracking]
+    [draw, isVisible, contextRef]
   );
   return {
     animate,
@@ -127,8 +83,7 @@ function Klint({
   draw,
   options = {},
   preload,
-  onVisible,
-  enablePerformanceTracking = false
+  onVisible
 }) {
   const canvasRef = useRef(null);
   const containerRef = useRef(null);
@@ -139,21 +94,26 @@ function Klint({
   );
   const [isVisible, setIsVisible] = useState(true);
   useEffect(() => {
+    const resetContext = () => {
+      if (contextRef.current) {
+        const ctx = contextRef.current;
+        ctx.__isPlaying = false;
+        ctx.frame = 0;
+        ctx.time = 0;
+        ctx.__offscreens?.clear();
+        ctx.__startedShape = false;
+        ctx.__currentShape = null;
+        ctx.__startedContour = false;
+        ctx.__currentContours = null;
+        ctx.__currentContour = null;
+        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+      }
+    };
     if (typeof import.meta !== "undefined" && import.meta.hot) {
-      import.meta.hot.dispose(() => {
-        console.log("[Klint] Component unmounting due to HMR");
-        if (contextRef.current) {
-          contextRef.current.__isPlaying = false;
-        }
-      });
+      import.meta.hot.dispose(resetContext);
     }
     if (typeof module !== "undefined" && module.hot) {
-      module.hot.dispose(() => {
-        console.log("[Klint] Component unmounting due to Webpack HMR");
-        if (contextRef.current) {
-          contextRef.current.__isPlaying = false;
-        }
-      });
+      module.hot.dispose(resetContext);
     }
   }, []);
   const __options = {
@@ -162,12 +122,7 @@ function Klint({
   };
   const [toStaticImage, setStaticImage] = useState(null);
   const initContext = context?.initCoreContext;
-  const { animate, animationFrameId } = useAnimate(
-    contextRef,
-    draw,
-    isVisible,
-    enablePerformanceTracking
-  );
+  const { animate, animationFrameId } = useAnimate(contextRef, draw, isVisible);
   const updateCanvasSize = (shouldRedraw = false) => {
     if (!containerRef.current || !contextRef.current || !canvasRef.current)
       return;
@@ -197,16 +152,6 @@ function Klint({
     const context2 = contextRef.current;
     if (!context2) return;
     context2.__dpr = dpr;
-    if (enablePerformanceTracking) {
-      context2.__performance = {
-        fps: 0,
-        frameTime: 0,
-        averageFrameTime: 0,
-        minFrameTime: Infinity,
-        maxFrameTime: 0,
-        droppedFrames: 0
-      };
-    }
     if (__options.fps && __options.fps !== context2.fps) {
       context2.fps = __options.fps;
     }
@@ -756,6 +701,58 @@ var Easing = class {
       p = p < 0 ? 0 : p > 1 ? 1 : p;
       return p * p * (3 - 2 * p);
     };
+    /**
+     * Damped spring easing. Physically expressive oscillation.
+     * @param val - Progress value (0 to 1)
+     * @param tension - Spring tension (0 to 1, default 0.5). Higher = faster oscillation.
+     * @param friction - Spring friction (0 to 1, default 0.5). Higher = less damping (more bouncy).
+     */
+    this.spring = (val, tension = 0.5, friction = 0.5) => {
+      const omega = tension * 40;
+      const zeta = 1 - friction;
+      if (zeta < 1) {
+        const omegaD = omega * Math.sqrt(1 - zeta * zeta);
+        return 1 - Math.exp(-zeta * omega * val) * (Math.cos(omegaD * val) + zeta * omega / omegaD * Math.sin(omegaD * val));
+      }
+      return 1 - (1 + omega * val) * Math.exp(-omega * val);
+    };
+    /**
+     * Staircase easing. Quantizes to N discrete steps.
+     * @param val - Progress value (0 to 1)
+     * @param n - Number of steps (default 4)
+     */
+    this.steps = (val, n = 4) => {
+      if (n <= 0) return val;
+      return Math.floor(val * n) / n;
+    };
+    /**
+     * Frame-rate independent exponential smoothing.
+     * Use instead of naive `lerp(a, b, 0.1)` which breaks at different FPS.
+     * @param current - Current value
+     * @param target - Target value
+     * @param smoothing - Smoothing factor (higher = faster convergence)
+     * @param deltaTime - Time since last frame in seconds
+     */
+    this.damp = (current, target, smoothing, deltaTime) => {
+      return current + (target - current) * (1 - Math.exp(-smoothing * deltaTime));
+    };
+    /**
+     * Quick rise then decay. Great for hit effects, flashes.
+     * @param val - Progress value (0 to 1)
+     * @param k - Sharpness (default 6). Higher = sharper peak.
+     */
+    this.impulse = (val, k = 6) => {
+      const h = k * val;
+      return h * Math.exp(1 - h);
+    };
+    /**
+     * Symmetric arc. Useful for jumps, throw curves.
+     * @param val - Progress value (0 to 1)
+     * @param k - Steepness (default 1)
+     */
+    this.parabola = (val, k = 1) => {
+      return Math.pow(4 * val * (1 - val), k);
+    };
     this.log = () => {
       console.log(this);
     };
@@ -1209,17 +1206,6 @@ var Text = class {
 };
 var Text_default = Text;
 
-// src/elements/Thing.tsx
-var Thing = class {
-  constructor(ctx) {
-    this.context = ctx;
-  }
-  log() {
-    console.log(this.context);
-  }
-};
-var Thing_default = Thing;
-
 // src/elements/Grid.tsx
 var Grid = class {
   /**
@@ -1653,505 +1639,427 @@ var Strip = class {
 var Strip_default = Strip;
 
 // src/elements/Noise.tsx
-var Noise = class {
-  /**
-   * Creates a new Noise instance
-   * @param ctx - The Klint context
-   */
-  constructor(ctx) {
-    this.perm = [];
-    this.permMod12 = [];
-    this.grad3 = [
-      [1, 1, 0],
-      [-1, 1, 0],
-      [1, -1, 0],
-      [-1, -1, 0],
-      [1, 0, 1],
-      [-1, 0, 1],
-      [1, 0, -1],
-      [-1, 0, -1],
-      [0, 1, 1],
-      [0, -1, 1],
-      [0, 1, -1],
-      [0, -1, -1]
-    ];
-    this.grad4 = [
-      [0, 1, 1, 1],
-      [0, 1, 1, -1],
-      [0, 1, -1, 1],
-      [0, 1, -1, -1],
-      [0, -1, 1, 1],
-      [0, -1, 1, -1],
-      [0, -1, -1, 1],
-      [0, -1, -1, -1],
-      [1, 0, 1, 1],
-      [1, 0, 1, -1],
-      [1, 0, -1, 1],
-      [1, 0, -1, -1],
-      [-1, 0, 1, 1],
-      [-1, 0, 1, -1],
-      [-1, 0, -1, 1],
-      [-1, 0, -1, -1],
-      [1, 1, 0, 1],
-      [1, 1, 0, -1],
-      [1, -1, 0, 1],
-      [1, -1, 0, -1],
-      [-1, 1, 0, 1],
-      [-1, 1, 0, -1],
-      [-1, -1, 0, 1],
-      [-1, -1, 0, -1],
-      [1, 1, 1, 0],
-      [1, 1, -1, 0],
-      [1, -1, 1, 0],
-      [1, -1, -1, 0],
-      [-1, 1, 1, 0],
-      [-1, 1, -1, 0],
-      [-1, -1, 1, 0],
-      [-1, -1, -1, 0]
-    ];
-    this.currentSeed = Math.random();
-    this.F2 = 0.5 * (Math.sqrt(3) - 1);
-    this.G2 = (3 - Math.sqrt(3)) / 6;
-    this.F3 = 1 / 3;
-    this.G3 = 1 / 6;
-    this.F4 = (Math.sqrt(5) - 1) / 4;
-    this.G4 = (5 - Math.sqrt(5)) / 20;
-    this.context = ctx;
-    this.buildPermutationTable();
+var _Noise = class _Noise {
+  constructor(_ctx) {
+    this._seed = Math.random();
+    this.p = new Uint8Array(512);
+    this.buildPerm();
+  }
+  rng() {
+    const x = Math.sin(this._seed++) * 1e4;
+    return x - Math.floor(x);
   }
-  /**
-   * Build permutation table for noise generation
-   */
-  buildPermutationTable() {
-    const p = [];
-    for (let i = 0; i < 256; i++) {
-      p[i] = i;
-    }
-    let n = 256;
-    while (n > 0) {
-      const index = Math.floor(this.random() * n--);
-      const temp = p[n];
-      p[n] = p[index];
-      p[index] = temp;
-    }
-    this.perm = [];
-    this.permMod12 = [];
-    for (let i = 0; i < 512; i++) {
-      this.perm[i] = p[i & 255];
-      this.permMod12[i] = this.perm[i] % 12;
+  buildPerm() {
+    const t = new Uint8Array(256);
+    for (let i = 0; i < 256; i++) t[i] = i;
+    for (let i = 255; i > 0; i--) {
+      const j = this.rng() * (i + 1) | 0;
+      const tmp = t[i];
+      t[i] = t[j];
+      t[j] = tmp;
     }
+    for (let i = 0; i < 512; i++) this.p[i] = t[i & 255];
   }
-  /**
-   * Seeded random number generator
-   */
-  random() {
-    const x = Math.sin(this.currentSeed++) * 1e4;
-    return x - Math.floor(x);
+  /** Set seed for reproducible noise */
+  seed(s) {
+    this._seed = s ?? Math.random() * 1e4;
+    this.buildPerm();
   }
-  /**
-   * Set seed for noise generation
-   * @param seed - Seed value for reproducible noise
-   */
-  seed(seed) {
-    this.currentSeed = seed !== void 0 ? seed : Math.random() * 1e4;
-    this.buildPermutationTable();
-  }
-  /**
-   * Fade function for Perlin noise
-   */
-  fade(t) {
+  // ---- Utilities ----
+  static fade(t) {
     return t * t * t * (t * (t * 6 - 15) + 10);
   }
-  /**
-   * Linear interpolation
-   */
-  lerp(t, a, b) {
+  static lerp(t, a, b) {
     return a + t * (b - a);
   }
+  /** Improved Perlin gradient — maps 4-bit hash to one of 12 gradient directions */
+  static grad3(h, x, y, z) {
+    h &= 15;
+    const u = h < 8 ? x : y;
+    const v = h < 4 ? y : h === 12 || h === 14 ? x : z;
+    return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
+  }
   perlin(x, y, z, w) {
-    if (y === void 0) {
-      const xi = Math.floor(x) & 255;
-      const xf = x - Math.floor(x);
-      const u = this.fade(xf);
-      const a = this.perm[xi];
-      const b = this.perm[xi + 1];
-      const grad1 = (hash, x2) => (hash & 1) === 0 ? x2 : -x2;
-      return this.lerp(u, grad1(a, xf), grad1(b, xf - 1));
-    } else if (z === void 0) {
-      const xi = Math.floor(x) & 255;
-      const yi = Math.floor(y) & 255;
-      const xf = x - Math.floor(x);
-      const yf = y - Math.floor(y);
-      const u = this.fade(xf);
-      const v = this.fade(yf);
-      const aa = this.perm[this.perm[xi] + yi];
-      const ab = this.perm[this.perm[xi] + yi + 1];
-      const ba = this.perm[this.perm[xi + 1] + yi];
-      const bb = this.perm[this.perm[xi + 1] + yi + 1];
-      const grad2 = (hash, x3, y2) => {
-        const h = hash & 3;
-        const u2 = h < 2 ? x3 : y2;
-        const v2 = h < 2 ? y2 : x3;
-        return ((h & 1) === 0 ? u2 : -u2) + ((h & 2) === 0 ? v2 : -v2);
-      };
-      const x1 = this.lerp(u, grad2(aa, xf, yf), grad2(ba, xf - 1, yf));
-      const x2 = this.lerp(u, grad2(ab, xf, yf - 1), grad2(bb, xf - 1, yf - 1));
-      return this.lerp(v, x1, x2);
-    } else if (w === void 0) {
-      const xi = Math.floor(x) & 255;
-      const yi = Math.floor(y) & 255;
-      const zi = Math.floor(z) & 255;
-      const xf = x - Math.floor(x);
-      const yf = y - Math.floor(y);
-      const zf = z - Math.floor(z);
-      const u = this.fade(xf);
-      const v = this.fade(yf);
-      const w2 = this.fade(zf);
-      const aaa = this.perm[this.perm[this.perm[xi] + yi] + zi];
-      const aba = this.perm[this.perm[this.perm[xi] + yi + 1] + zi];
-      const aab = this.perm[this.perm[this.perm[xi] + yi] + zi + 1];
-      const abb = this.perm[this.perm[this.perm[xi] + yi + 1] + zi + 1];
-      const baa = this.perm[this.perm[this.perm[xi + 1] + yi] + zi];
-      const bba = this.perm[this.perm[this.perm[xi + 1] + yi + 1] + zi];
-      const bab = this.perm[this.perm[this.perm[xi + 1] + yi] + zi + 1];
-      const bbb = this.perm[this.perm[this.perm[xi + 1] + yi + 1] + zi + 1];
-      const grad3 = (hash, x2, y2, z2) => {
-        const h = hash & 15;
-        const u2 = h < 8 ? x2 : y2;
-        const v2 = h < 4 ? y2 : h === 12 || h === 14 ? x2 : z2;
-        return ((h & 1) === 0 ? u2 : -u2) + ((h & 2) === 0 ? v2 : -v2);
-      };
-      const x1 = this.lerp(
-        w2,
-        this.lerp(
-          v,
-          this.lerp(u, grad3(aaa, xf, yf, zf), grad3(baa, xf - 1, yf, zf)),
-          this.lerp(u, grad3(aba, xf, yf - 1, zf), grad3(bba, xf - 1, yf - 1, zf))
+    if (y === void 0) return this.perlin1(x);
+    if (z === void 0) return this.perlin2(x, y);
+    if (w === void 0) return this.perlin3(x, y, z);
+    return this.perlin4(x, y, z, w);
+  }
+  perlin1(x) {
+    const p = this.p;
+    const fx = Math.floor(x);
+    const X = fx & 255;
+    const xf = x - fx;
+    const u = _Noise.fade(xf);
+    const g = (h, d) => (h & 1) === 0 ? d : -d;
+    return _Noise.lerp(u, g(p[X], xf), g(p[X + 1], xf - 1));
+  }
+  perlin2(x, y) {
+    const { fade, lerp } = _Noise;
+    const p = this.p;
+    const fx = Math.floor(x), fy = Math.floor(y);
+    const X = fx & 255, Y = fy & 255;
+    const xf = x - fx, yf = y - fy;
+    const u = fade(xf), v = fade(yf);
+    const g = (h, x2, y2) => {
+      const b = h & 3;
+      return ((b & 1) === 0 ? x2 : -x2) + ((b & 2) === 0 ? y2 : -y2);
+    };
+    const aa = p[p[X] + Y], ab = p[p[X] + Y + 1];
+    const ba = p[p[X + 1] + Y], bb = p[p[X + 1] + Y + 1];
+    return lerp(
+      v,
+      lerp(u, g(aa, xf, yf), g(ba, xf - 1, yf)),
+      lerp(u, g(ab, xf, yf - 1), g(bb, xf - 1, yf - 1))
+    );
+  }
+  perlin3(x, y, z) {
+    const { fade, lerp, grad3 } = _Noise;
+    const p = this.p;
+    const fx = Math.floor(x), fy = Math.floor(y), fz = Math.floor(z);
+    const X = fx & 255, Y = fy & 255, Z = fz & 255;
+    const xf = x - fx, yf = y - fy, zf = z - fz;
+    const u = fade(xf), v = fade(yf), w = fade(zf);
+    const A = p[X] + Y, B = p[X + 1] + Y;
+    const AA = p[A] + Z, AB = p[A + 1] + Z, BA = p[B] + Z, BB = p[B + 1] + Z;
+    return lerp(
+      w,
+      lerp(
+        v,
+        lerp(u, grad3(p[AA], xf, yf, zf), grad3(p[BA], xf - 1, yf, zf)),
+        lerp(u, grad3(p[AB], xf, yf - 1, zf), grad3(p[BB], xf - 1, yf - 1, zf))
+      ),
+      lerp(
+        v,
+        lerp(
+          u,
+          grad3(p[AA + 1], xf, yf, zf - 1),
+          grad3(p[BA + 1], xf - 1, yf, zf - 1)
         ),
-        this.lerp(
-          v,
-          this.lerp(u, grad3(aab, xf, yf, zf - 1), grad3(bab, xf - 1, yf, zf - 1)),
-          this.lerp(u, grad3(abb, xf, yf - 1, zf - 1), grad3(bbb, xf - 1, yf - 1, zf - 1))
+        lerp(
+          u,
+          grad3(p[AB + 1], xf, yf - 1, zf - 1),
+          grad3(p[BB + 1], xf - 1, yf - 1, zf - 1)
         )
-      );
-      return x1;
-    } else {
-      return this.perlin(x, y, z) * 0.5 + this.perlin(x + w, y + w, z + w) * 0.5;
-    }
+      )
+    );
+  }
+  perlin4(x, y, z, w) {
+    const { fade, lerp } = _Noise;
+    const p = this.p;
+    const fx = Math.floor(x), fy = Math.floor(y), fz = Math.floor(z), fw = Math.floor(w);
+    const X = fx & 255, Y = fy & 255, Z = fz & 255, W = fw & 255;
+    const xf = x - fx, yf = y - fy, zf = z - fz, wf = w - fw;
+    const fu = fade(xf), fv = fade(yf), fW = fade(zf), ft = fade(wf);
+    const g = (h2, x2, y2, z2, w2) => {
+      const b = h2 & 31;
+      const u = b < 24 ? x2 : y2;
+      const v = b < 16 ? y2 : z2;
+      const t = b < 8 ? z2 : w2;
+      return ((b & 1) === 0 ? u : -u) + ((b & 2) === 0 ? v : -v) + ((b & 4) === 0 ? t : -t);
+    };
+    const h = (dx, dy, dz, dw) => p[p[p[p[X + dx] + Y + dy] + Z + dz] + W + dw];
+    return lerp(
+      ft,
+      lerp(
+        fW,
+        lerp(
+          fv,
+          lerp(
+            fu,
+            g(h(0, 0, 0, 0), xf, yf, zf, wf),
+            g(h(1, 0, 0, 0), xf - 1, yf, zf, wf)
+          ),
+          lerp(
+            fu,
+            g(h(0, 1, 0, 0), xf, yf - 1, zf, wf),
+            g(h(1, 1, 0, 0), xf - 1, yf - 1, zf, wf)
+          )
+        ),
+        lerp(
+          fv,
+          lerp(
+            fu,
+            g(h(0, 0, 1, 0), xf, yf, zf - 1, wf),
+            g(h(1, 0, 1, 0), xf - 1, yf, zf - 1, wf)
+          ),
+          lerp(
+            fu,
+            g(h(0, 1, 1, 0), xf, yf - 1, zf - 1, wf),
+            g(h(1, 1, 1, 0), xf - 1, yf - 1, zf - 1, wf)
+          )
+        )
+      ),
+      lerp(
+        fW,
+        lerp(
+          fv,
+          lerp(
+            fu,
+            g(h(0, 0, 0, 1), xf, yf, zf, wf - 1),
+            g(h(1, 0, 0, 1), xf - 1, yf, zf, wf - 1)
+          ),
+          lerp(
+            fu,
+            g(h(0, 1, 0, 1), xf, yf - 1, zf, wf - 1),
+            g(h(1, 1, 0, 1), xf - 1, yf - 1, zf, wf - 1)
+          )
+        ),
+        lerp(
+          fv,
+          lerp(
+            fu,
+            g(h(0, 0, 1, 1), xf, yf, zf - 1, wf - 1),
+            g(h(1, 0, 1, 1), xf - 1, yf, zf - 1, wf - 1)
+          ),
+          lerp(
+            fu,
+            g(h(0, 1, 1, 1), xf, yf - 1, zf - 1, wf - 1),
+            g(h(1, 1, 1, 1), xf - 1, yf - 1, zf - 1, wf - 1)
+          )
+        )
+      )
+    );
   }
   simplex(x, y, z, w) {
-    if (y === void 0) {
-      return this.perlin(x);
-    } else if (z === void 0) {
-      let n0 = 0, n1 = 0, n2 = 0;
-      const s = (x + y) * this.F2;
-      const i = Math.floor(x + s);
-      const j = Math.floor(y + s);
-      const t = (i + j) * this.G2;
-      const X0 = i - t;
-      const Y0 = j - t;
-      const x0 = x - X0;
-      const y0 = y - Y0;
-      let i1, j1;
-      if (x0 > y0) {
+    if (y === void 0) return this.perlin1(x);
+    if (z === void 0) return this.simplex2(x, y);
+    if (w === void 0) return this.simplex3(x, y, z);
+    return this.simplex4(x, y, z, w);
+  }
+  simplex2(x, y) {
+    const { F2, G2, grad3 } = _Noise;
+    const p = this.p;
+    const s = (x + y) * F2;
+    const i = Math.floor(x + s), j = Math.floor(y + s);
+    const t = (i + j) * G2;
+    const x0 = x - (i - t), y0 = y - (j - t);
+    const i1 = x0 > y0 ? 1 : 0, j1 = x0 > y0 ? 0 : 1;
+    const x1 = x0 - i1 + G2, y1 = y0 - j1 + G2;
+    const x2 = x0 - 1 + 2 * G2, y2 = y0 - 1 + 2 * G2;
+    const ii = i & 255, jj = j & 255;
+    const gi0 = p[ii + p[jj]] % 12;
+    const gi1 = p[ii + i1 + p[jj + j1]] % 12;
+    const gi2 = p[ii + 1 + p[jj + 1]] % 12;
+    let n0 = 0, n1 = 0, n2 = 0;
+    let t0 = 0.5 - x0 * x0 - y0 * y0;
+    if (t0 >= 0) {
+      t0 *= t0;
+      n0 = t0 * t0 * grad3(gi0, x0, y0, 0);
+    }
+    let t1 = 0.5 - x1 * x1 - y1 * y1;
+    if (t1 >= 0) {
+      t1 *= t1;
+      n1 = t1 * t1 * grad3(gi1, x1, y1, 0);
+    }
+    let t2 = 0.5 - x2 * x2 - y2 * y2;
+    if (t2 >= 0) {
+      t2 *= t2;
+      n2 = t2 * t2 * grad3(gi2, x2, y2, 0);
+    }
+    return 70 * (n0 + n1 + n2);
+  }
+  simplex3(x, y, z) {
+    const { F3, G3, grad3 } = _Noise;
+    const p = this.p;
+    const s = (x + y + z) * F3;
+    const i = Math.floor(x + s), j = Math.floor(y + s), k = Math.floor(z + s);
+    const t = (i + j + k) * G3;
+    const x0 = x - (i - t), y0 = y - (j - t), z0 = z - (k - t);
+    let i1, j1, k1;
+    let i2, j2, k2;
+    if (x0 >= y0) {
+      if (y0 >= z0) {
+        i1 = 1;
+        j1 = 0;
+        k1 = 0;
+        i2 = 1;
+        j2 = 1;
+        k2 = 0;
+      } else if (x0 >= z0) {
         i1 = 1;
         j1 = 0;
+        k1 = 0;
+        i2 = 1;
+        j2 = 0;
+        k2 = 1;
       } else {
         i1 = 0;
-        j1 = 1;
-      }
-      const x1 = x0 - i1 + this.G2;
-      const y1 = y0 - j1 + this.G2;
-      const x2 = x0 - 1 + 2 * this.G2;
-      const y2 = y0 - 1 + 2 * this.G2;
-      const ii = i & 255;
-      const jj = j & 255;
-      const gi0 = this.permMod12[ii + this.perm[jj]];
-      const gi1 = this.permMod12[ii + i1 + this.perm[jj + j1]];
-      const gi2 = this.permMod12[ii + 1 + this.perm[jj + 1]];
-      let t0 = 0.5 - x0 * x0 - y0 * y0;
-      if (t0 < 0) {
-        n0 = 0;
-      } else {
-        t0 *= t0;
-        n0 = t0 * t0 * this.dot2(this.grad3[gi0], x0, y0);
-      }
-      let t1 = 0.5 - x1 * x1 - y1 * y1;
-      if (t1 < 0) {
-        n1 = 0;
-      } else {
-        t1 *= t1;
-        n1 = t1 * t1 * this.dot2(this.grad3[gi1], x1, y1);
-      }
-      let t2 = 0.5 - x2 * x2 - y2 * y2;
-      if (t2 < 0) {
-        n2 = 0;
-      } else {
-        t2 *= t2;
-        n2 = t2 * t2 * this.dot2(this.grad3[gi2], x2, y2);
-      }
-      return 70 * (n0 + n1 + n2);
-    } else if (w === void 0) {
-      let n0 = 0, n1 = 0, n2 = 0, n3 = 0;
-      const s = (x + y + z) * this.F3;
-      const i = Math.floor(x + s);
-      const j = Math.floor(y + s);
-      const k = Math.floor(z + s);
-      const t = (i + j + k) * this.G3;
-      const X0 = i - t;
-      const Y0 = j - t;
-      const Z0 = k - t;
-      const x0 = x - X0;
-      const y0 = y - Y0;
-      const z0 = z - Z0;
-      let i1, j1, k1;
-      let i2, j2, k2;
-      if (x0 >= y0) {
-        if (y0 >= z0) {
-          i1 = 1;
-          j1 = 0;
-          k1 = 0;
-          i2 = 1;
-          j2 = 1;
-          k2 = 0;
-        } else if (x0 >= z0) {
-          i1 = 1;
-          j1 = 0;
-          k1 = 0;
-          i2 = 1;
-          j2 = 0;
-          k2 = 1;
-        } else {
-          i1 = 0;
-          j1 = 0;
-          k1 = 1;
-          i2 = 1;
-          j2 = 0;
-          k2 = 1;
-        }
-      } else {
-        if (y0 < z0) {
-          i1 = 0;
-          j1 = 0;
-          k1 = 1;
-          i2 = 0;
-          j2 = 1;
-          k2 = 1;
-        } else if (x0 < z0) {
-          i1 = 0;
-          j1 = 1;
-          k1 = 0;
-          i2 = 0;
-          j2 = 1;
-          k2 = 1;
-        } else {
-          i1 = 0;
-          j1 = 1;
-          k1 = 0;
-          i2 = 1;
-          j2 = 1;
-          k2 = 0;
-        }
-      }
-      const x1 = x0 - i1 + this.G3;
-      const y1 = y0 - j1 + this.G3;
-      const z1 = z0 - k1 + this.G3;
-      const x2 = x0 - i2 + 2 * this.G3;
-      const y2 = y0 - j2 + 2 * this.G3;
-      const z2 = z0 - k2 + 2 * this.G3;
-      const x3 = x0 - 1 + 3 * this.G3;
-      const y3 = y0 - 1 + 3 * this.G3;
-      const z3 = z0 - 1 + 3 * this.G3;
-      const ii = i & 255;
-      const jj = j & 255;
-      const kk = k & 255;
-      const gi0 = this.permMod12[ii + this.perm[jj + this.perm[kk]]];
-      const gi1 = this.permMod12[ii + i1 + this.perm[jj + j1 + this.perm[kk + k1]]];
-      const gi2 = this.permMod12[ii + i2 + this.perm[jj + j2 + this.perm[kk + k2]]];
-      const gi3 = this.permMod12[ii + 1 + this.perm[jj + 1 + this.perm[kk + 1]]];
-      let t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
-      if (t0 < 0) {
-        n0 = 0;
-      } else {
-        t0 *= t0;
-        n0 = t0 * t0 * this.dot3(this.grad3[gi0], x0, y0, z0);
-      }
-      let t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
-      if (t1 < 0) {
-        n1 = 0;
-      } else {
-        t1 *= t1;
-        n1 = t1 * t1 * this.dot3(this.grad3[gi1], x1, y1, z1);
+        j1 = 0;
+        k1 = 1;
+        i2 = 1;
+        j2 = 0;
+        k2 = 1;
       }
-      let t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
-      if (t2 < 0) {
-        n2 = 0;
+    } else {
+      if (y0 < z0) {
+        i1 = 0;
+        j1 = 0;
+        k1 = 1;
+        i2 = 0;
+        j2 = 1;
+        k2 = 1;
+      } else if (x0 < z0) {
+        i1 = 0;
+        j1 = 1;
+        k1 = 0;
+        i2 = 0;
+        j2 = 1;
+        k2 = 1;
       } else {
-        t2 *= t2;
-        n2 = t2 * t2 * this.dot3(this.grad3[gi2], x2, y2, z2);
+        i1 = 0;
+        j1 = 1;
+        k1 = 0;
+        i2 = 1;
+        j2 = 1;
+        k2 = 0;
       }
-      let t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
-      if (t3 < 0) {
-        n3 = 0;
+    }
+    const x1 = x0 - i1 + G3, y1 = y0 - j1 + G3, z1 = z0 - k1 + G3;
+    const x2 = x0 - i2 + 2 * G3, y2 = y0 - j2 + 2 * G3, z2 = z0 - k2 + 2 * G3;
+    const x3 = x0 - 1 + 3 * G3, y3 = y0 - 1 + 3 * G3, z3 = z0 - 1 + 3 * G3;
+    const ii = i & 255, jj = j & 255, kk = k & 255;
+    const gi0 = p[ii + p[jj + p[kk]]] % 12;
+    const gi1 = p[ii + i1 + p[jj + j1 + p[kk + k1]]] % 12;
+    const gi2 = p[ii + i2 + p[jj + j2 + p[kk + k2]]] % 12;
+    const gi3 = p[ii + 1 + p[jj + 1 + p[kk + 1]]] % 12;
+    let n = 0;
+    let tc = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
+    if (tc >= 0) {
+      tc *= tc;
+      n += tc * tc * grad3(gi0, x0, y0, z0);
+    }
+    tc = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
+    if (tc >= 0) {
+      tc *= tc;
+      n += tc * tc * grad3(gi1, x1, y1, z1);
+    }
+    tc = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
+    if (tc >= 0) {
+      tc *= tc;
+      n += tc * tc * grad3(gi2, x2, y2, z2);
+    }
+    tc = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
+    if (tc >= 0) {
+      tc *= tc;
+      n += tc * tc * grad3(gi3, x3, y3, z3);
+    }
+    return 32 * n;
+  }
+  simplex4(x, y, z, w) {
+    const { F4, G4 } = _Noise;
+    const p = this.p;
+    const s = (x + y + z + w) * F4;
+    const i = Math.floor(x + s), j = Math.floor(y + s), k = Math.floor(z + s), l = Math.floor(w + s);
+    const t = (i + j + k + l) * G4;
+    const x0 = x - (i - t), y0 = y - (j - t), z0 = z - (k - t), w0 = w - (l - t);
+    let rx = 0, ry = 0, rz = 0, rw = 0;
+    if (x0 > y0) rx++;
+    else ry++;
+    if (x0 > z0) rx++;
+    else rz++;
+    if (x0 > w0) rx++;
+    else rw++;
+    if (y0 > z0) ry++;
+    else rz++;
+    if (y0 > w0) ry++;
+    else rw++;
+    if (z0 > w0) rz++;
+    else rw++;
+    const i1 = +(rx >= 3), j1 = +(ry >= 3), k1 = +(rz >= 3), l1 = +(rw >= 3);
+    const i2 = +(rx >= 2), j2 = +(ry >= 2), k2 = +(rz >= 2), l2 = +(rw >= 2);
+    const i3 = +(rx >= 1), j3 = +(ry >= 1), k3 = +(rz >= 1), l3 = +(rw >= 1);
+    const x1 = x0 - i1 + G4, y1 = y0 - j1 + G4, z1 = z0 - k1 + G4, w1 = w0 - l1 + G4;
+    const x2 = x0 - i2 + 2 * G4, y2 = y0 - j2 + 2 * G4, z2 = z0 - k2 + 2 * G4, w2 = w0 - l2 + 2 * G4;
+    const x3 = x0 - i3 + 3 * G4, y3 = y0 - j3 + 3 * G4, z3 = z0 - k3 + 3 * G4, w3 = w0 - l3 + 3 * G4;
+    const x4 = x0 - 1 + 4 * G4, y4 = y0 - 1 + 4 * G4, z4 = z0 - 1 + 4 * G4, w4 = w0 - 1 + 4 * G4;
+    const ii = i & 255, jj = j & 255, kk = k & 255, ll = l & 255;
+    const g4 = (gi, x5, y5, z5, w5) => {
+      const g = gi >> 3;
+      const b = gi & 7;
+      let a, c, d;
+      if (g === 0) {
+        a = y5;
+        c = z5;
+        d = w5;
+      } else if (g === 1) {
+        a = x5;
+        c = z5;
+        d = w5;
+      } else if (g === 2) {
+        a = x5;
+        c = y5;
+        d = w5;
       } else {
-        t3 *= t3;
-        n3 = t3 * t3 * this.dot3(this.grad3[gi3], x3, y3, z3);
+        a = x5;
+        c = y5;
+        d = z5;
       }
-      return 32 * (n0 + n1 + n2 + n3);
-    } else {
-      return this.simplex(x, y, z) * 0.5 + this.simplex(x + w, y + w, z + w) * 0.5;
+      return (b & 4 ? -a : a) + (b & 2 ? -c : c) + (b & 1 ? -d : d);
+    };
+    const gi0 = p[ii + p[jj + p[kk + p[ll]]]] & 31;
+    const gi1 = p[ii + i1 + p[jj + j1 + p[kk + k1 + p[ll + l1]]]] & 31;
+    const gi2 = p[ii + i2 + p[jj + j2 + p[kk + k2 + p[ll + l2]]]] & 31;
+    const gi3 = p[ii + i3 + p[jj + j3 + p[kk + k3 + p[ll + l3]]]] & 31;
+    const gi4 = p[ii + 1 + p[jj + 1 + p[kk + 1 + p[ll + 1]]]] & 31;
+    let n = 0;
+    let tc = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
+    if (tc >= 0) {
+      tc *= tc;
+      n += tc * tc * g4(gi0, x0, y0, z0, w0);
     }
-  }
-  /**
-   * Dot product for 2D
-   */
-  dot2(g, x, y) {
-    return g[0] * x + g[1] * y;
-  }
-  /**
-   * Dot product for 3D
-   */
-  dot3(g, x, y, z) {
-    return g[0] * x + g[1] * y + g[2] * z;
+    tc = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
+    if (tc >= 0) {
+      tc *= tc;
+      n += tc * tc * g4(gi1, x1, y1, z1, w1);
+    }
+    tc = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
+    if (tc >= 0) {
+      tc *= tc;
+      n += tc * tc * g4(gi2, x2, y2, z2, w2);
+    }
+    tc = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
+    if (tc >= 0) {
+      tc *= tc;
+      n += tc * tc * g4(gi3, x3, y3, z3, w3);
+    }
+    tc = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
+    if (tc >= 0) {
+      tc *= tc;
+      n += tc * tc * g4(gi4, x4, y4, z4, w4);
+    }
+    return 27 * n;
   }
   hash(x, y, z, w) {
-    let n = 0;
+    let n;
     if (y === void 0) {
-      n = Math.sin(x * 12.9898 + this.currentSeed) * 43758.5453;
+      n = Math.sin(x * 12.9898 + this._seed) * 43758.5453;
     } else if (z === void 0) {
-      n = Math.sin(x * 12.9898 + y * 78.233 + this.currentSeed) * 43758.5453;
+      n = Math.sin(x * 12.9898 + y * 78.233 + this._seed) * 43758.5453;
     } else if (w === void 0) {
-      n = Math.sin(x * 12.9898 + y * 78.233 + z * 37.719 + this.currentSeed) * 43758.5453;
+      n = Math.sin(x * 12.9898 + y * 78.233 + z * 37.719 + this._seed) * 43758.5453;
     } else {
-      n = Math.sin(x * 12.9898 + y * 78.233 + z * 37.719 + w * 59.1337 + this.currentSeed) * 43758.5453;
+      n = Math.sin(
+        x * 12.9898 + y * 78.233 + z * 37.719 + w * 53.137 + this._seed
+      ) * 43758.5453;
     }
     return n - Math.floor(n);
   }
-  /**
-   * Fractal Brownian Motion (fBm) noise
-   * Supports options object for amplitude/frequency/lacunarity/gain/octaves.
-   */
-  fbm(x, y, z, options) {
-    let yVal = void 0;
-    let zVal = void 0;
-    let opts = typeof y === "object" ? y : typeof z === "object" ? z : {};
-    if (typeof y === "number") yVal = y;
-    if (typeof z === "number") zVal = z;
-    if (options) opts = { ...opts, ...options };
-    const octaves = opts.octaves ?? 4;
-    if (octaves <= 0) return 0;
-    let amplitude = opts.amplitude ?? 1;
-    let frequency = opts.frequency ?? 1;
-    const lacunarity = opts.lacunarity ?? 2;
-    const gain = opts.gain ?? 0.5;
-    let value = 0;
-    let maxValue = 0;
-    for (let i = 0; i < octaves; i++) {
-      if (yVal === void 0) {
-        value += amplitude * this.perlin(x * frequency);
-      } else if (zVal === void 0) {
-        value += amplitude * this.perlin(x * frequency, yVal * frequency);
-      } else {
-        value += amplitude * this.perlin(x * frequency, yVal * frequency, zVal * frequency);
-      }
-      maxValue += amplitude;
-      amplitude *= gain;
-      frequency *= lacunarity;
-    }
-    return maxValue === 0 ? 0 : value / maxValue;
-  }
-  /**
-   * Turbulence noise (absolute value of noise)
-   * Supports options object for octaves.
-   */
-  turbulence(x, y, z, options) {
-    let yVal = void 0;
-    let zVal = void 0;
-    let opts = typeof y === "object" ? y : typeof z === "object" ? z : {};
-    if (typeof y === "number") yVal = y;
-    if (typeof z === "number") zVal = z;
-    if (options) opts = { ...opts, ...options };
-    const octaves = opts.octaves ?? 4;
-    if (octaves <= 0) return 0;
-    let value = 0;
-    let amplitude = 1;
-    let frequency = 1;
-    let maxValue = 0;
-    for (let i = 0; i < octaves; i++) {
-      let noise = 0;
-      if (yVal === void 0) {
-        noise = this.perlin(x * frequency);
-      } else if (zVal === void 0) {
-        noise = this.perlin(x * frequency, yVal * frequency);
-      } else {
-        noise = this.perlin(x * frequency, yVal * frequency, zVal * frequency);
-      }
-      value += amplitude * Math.abs(noise);
-      maxValue += amplitude;
-      amplitude *= 0.5;
-      frequency *= 2;
-    }
-    return maxValue === 0 ? 0 : value / maxValue;
-  }
-  /**
-   * Ridged multifractal noise (simple implementation)
-   */
-  ridge(x, y, options) {
-    let yVal = void 0;
-    let opts = typeof y === "object" ? y : {};
-    if (typeof y === "number") yVal = y;
-    if (options) opts = { ...opts, ...options };
-    const octaves = opts.octaves ?? 4;
-    if (octaves <= 0) return 0;
-    let amplitude = opts.amplitude ?? 1;
-    let frequency = opts.frequency ?? 1;
-    const lacunarity = opts.lacunarity ?? 2;
-    const gain = opts.gain ?? 0.5;
-    let value = 0;
-    let weight = 1;
-    let maxValue = 0;
-    for (let i = 0; i < octaves; i++) {
-      const n = yVal === void 0 ? this.perlin(x * frequency) : this.perlin(x * frequency, yVal * frequency);
-      let signal = 1 - Math.abs(n);
-      signal *= signal;
-      signal *= weight;
-      weight = signal * 2;
-      weight = Math.min(Math.max(weight, 0), 1);
-      value += signal * amplitude;
-      maxValue += amplitude;
-      amplitude *= gain;
-      frequency *= lacunarity;
-    }
-    return maxValue === 0 ? 0 : value / maxValue;
-  }
-  /**
-   * Cellular / Worley noise (2D simple implementation)
-   */
-  cellular(x, y, options) {
-    let yVal = void 0;
-    let opts = typeof y === "object" ? y : {};
-    if (typeof y === "number") yVal = y;
-    if (options) opts = { ...opts, ...options };
-    if (yVal === void 0) yVal = 0;
-    const xi = Math.floor(x);
-    const yi = Math.floor(yVal);
-    const distance = opts.distance ?? "euclidean";
-    let minDist = Infinity;
-    for (let j = -1; j <= 1; j++) {
-      for (let i = -1; i <= 1; i++) {
-        const fx = i + this.hash(xi + i, yi + j);
-        const fy = j + this.hash(yi + j, xi + i);
-        const dx = fx + xi - x;
-        const dy = fy + yi - yVal;
-        const dist = distance === "manhattan" ? Math.abs(dx) + Math.abs(dy) : Math.sqrt(dx * dx + dy * dy);
-        if (dist < minDist) minDist = dist;
-      }
-    }
-    const maxDist = Math.SQRT2;
-    const normalized = 1 - Math.min(minDist / maxDist, 1);
-    return normalized;
+  // ---- GAUSSIAN RANDOM ----
+  /** Box-Muller transform — returns normally distributed random number (seeded) */
+  gaussianRandom(mean = 0, stddev = 1) {
+    const u1 = 1 - this.rng();
+    const u2 = this.rng();
+    return mean + stddev * Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);
   }
 };
+_Noise.F2 = (Math.sqrt(3) - 1) / 2;
+_Noise.G2 = (3 - Math.sqrt(3)) / 6;
+_Noise.F3 = 1 / 3;
+_Noise.G3 = 1 / 6;
+_Noise.F4 = (Math.sqrt(5) - 1) / 4;
+_Noise.G4 = (5 - Math.sqrt(5)) / 20;
+var Noise = _Noise;
 var Noise_default = Noise;
 
 // src/elements/Hotspot.tsx
@@ -2248,349 +2156,385 @@ var Hotspot = class {
 };
 var Hotspot_default = Hotspot;
 
-// src/elements/Performance.tsx
-var Performance = class {
-  constructor(ctx) {
-    this.textMetricsCache = /* @__PURE__ */ new Map();
-    this.frameTimeHistory = [];
-    this.MAX_HISTORY = 60;
-    this.context = ctx;
+// src/elements/Quadtree.tsx
+var Rectangle = class {
+  constructor(x, y, w, h) {
+    this.x = x;
+    this.y = y;
+    this.w = w;
+    this.h = h;
   }
-  /**
-   * Batch multiple canvas operations together for better performance
-   */
-  batchDraw(drawFn) {
-    this.context.save();
-    this.context.beginPath();
-    try {
-      drawFn();
-    } finally {
-      this.context.restore();
-    }
+  contains(point) {
+    return point.x >= this.x - this.w && point.x < this.x + this.w && point.y >= this.y - this.h && point.y < this.y + this.h;
   }
-  /**
-   * Optimize drawing by using offscreen canvas for static elements
-   */
-  useOffscreenCache(id, width, height, renderFn) {
-    let offscreen = this.context.__offscreens.get(id);
-    if (!offscreen || offscreen instanceof HTMLImageElement) {
-      offscreen = this.context.createOffscreen(id, width, height);
-      if (offscreen && !(offscreen instanceof HTMLImageElement)) {
-        renderFn(offscreen);
-      }
-    }
-    if (offscreen) {
-      if (offscreen instanceof HTMLImageElement) {
-        this.context.image(offscreen, 0, 0);
-      } else {
-        this.context.image(offscreen.canvas, 0, 0);
-      }
-    }
+  intersects(range) {
+    return !(range.x - range.w > this.x + this.w || range.x + range.w < this.x - this.w || range.y - range.h > this.y + this.h || range.y + range.h < this.y - this.h);
   }
-  /**
-   * Throttle expensive operations to run less frequently
-   */
-  throttleFrame(interval, fn) {
-    const cacheKey = `__throttle_${fn.toString().slice(0, 50)}`;
-    const cached = this.context[cacheKey];
-    if (!cached || this.context.frame % interval === 0) {
-      const result = fn();
-      this.context[cacheKey] = { value: result, frame: this.context.frame };
-      return result;
-    }
-    return cached.value;
+  intersectsCircle(cx, cy, r) {
+    const dx = Math.abs(cx - this.x);
+    const dy = Math.abs(cy - this.y);
+    if (dx > this.w + r || dy > this.h + r) return false;
+    if (dx <= this.w || dy <= this.h) return true;
+    return (dx - this.w) ** 2 + (dy - this.h) ** 2 <= r * r;
   }
-  /**
-   * Detect potential memory leaks by tracking object creation
-   */
-  useLeakDetection() {
-    const objectCounts = /* @__PURE__ */ new Map();
-    let lastCheckFrame = 0;
-    return {
-      track: (type) => {
-        const count = objectCounts.get(type) || 0;
-        objectCounts.set(type, count + 1);
-      },
-      check: () => {
-        if (this.context.frame - lastCheckFrame < 60) return;
-        lastCheckFrame = this.context.frame;
-        const warnings = [];
-        objectCounts.forEach((count, type) => {
-          if (count > 1e4) {
-            warnings.push(
-              `Potential memory leak: ${type} has ${count} instances`
-            );
-          }
-        });
-        if (warnings.length > 0) {
-          console.warn("[Klint] Memory leak warnings:", warnings);
-        }
-        objectCounts.clear();
-      }
-    };
+};
+var Quadtree = class _Quadtree {
+  constructor(boundary, capacity = 4, maxDepth = 8, depth = 0) {
+    this.ne = null;
+    this.nw = null;
+    this.se = null;
+    this.sw = null;
+    this.boundary = boundary;
+    this.capacity = capacity;
+    this.maxDepth = maxDepth;
+    this.depth = depth;
+    this.points = [];
+    this.divided = false;
+  }
+  /**
+   * Create a Quadtree from corner-based bounds (top-left + size).
+   * Internally converts to center-based representation.
+   */
+  static create(x, y, width, height, options) {
+    const hw = width / 2;
+    const hh = height / 2;
+    return new _Quadtree(
+      new Rectangle(x + hw, y + hh, hw, hh),
+      options?.capacity ?? 4,
+      options?.maxDepth ?? 8
+    );
   }
-  /**
-   * Optimize text rendering by caching text measurements
-   */
-  getCachedTextMetrics(text, font) {
-    const cacheKey = `${font}:${text}`;
-    if (!this.textMetricsCache.has(cacheKey)) {
-      this.context.save();
-      this.context.font = font;
-      const metrics = this.context.measureText(text);
-      this.context.restore();
-      this.textMetricsCache.set(cacheKey, metrics);
-      if (this.textMetricsCache.size > 1e3) {
-        const firstKey = this.textMetricsCache.keys().next().value;
-        if (firstKey) this.textMetricsCache.delete(firstKey);
+  insert(point) {
+    if (!this.boundary.contains(point)) return false;
+    if (!this.divided) {
+      if (this.points.length < this.capacity || this.depth >= this.maxDepth) {
+        this.points.push(point);
+        return true;
       }
+      this.subdivide();
+    }
+    return this.ne.insert(point) || this.nw.insert(point) || this.se.insert(point) || this.sw.insert(point);
+  }
+  subdivide() {
+    const { x, y, w, h } = this.boundary;
+    const hw = w / 2;
+    const hh = h / 2;
+    const d = this.depth + 1;
+    this.ne = new _Quadtree(
+      new Rectangle(x + hw, y - hh, hw, hh),
+      this.capacity,
+      this.maxDepth,
+      d
+    );
+    this.nw = new _Quadtree(
+      new Rectangle(x - hw, y - hh, hw, hh),
+      this.capacity,
+      this.maxDepth,
+      d
+    );
+    this.se = new _Quadtree(
+      new Rectangle(x + hw, y + hh, hw, hh),
+      this.capacity,
+      this.maxDepth,
+      d
+    );
+    this.sw = new _Quadtree(
+      new Rectangle(x - hw, y + hh, hw, hh),
+      this.capacity,
+      this.maxDepth,
+      d
+    );
+    this.divided = true;
+    for (const p of this.points) {
+      this.ne.insert(p) || this.nw.insert(p) || this.se.insert(p) || this.sw.insert(p);
     }
-    return this.textMetricsCache.get(cacheKey);
-  }
-  /**
-   * Clear all performance caches
-   */
-  clearCaches() {
-    this.textMetricsCache.clear();
-  }
-  /**
-   * Get current performance metrics
-   */
-  getMetrics() {
-    return this.context.__performance || null;
+    this.points = [];
   }
-  /**
-   * Render performance widget on canvas
-   */
-  render(options = {}) {
-    const metrics = this.getMetrics();
-    if (!metrics) return;
-    const {
-      x = 10,
-      y = 10,
-      width = 200,
-      height = 120,
-      backgroundColor = "rgba(0, 0, 0, 0.8)",
-      textColor = "#ffffff",
-      accentColor = "#4ecdc4",
-      showGraph = true,
-      graphHeight = 40,
-      fontSize = 12,
-      showMemory = true
-    } = options;
-    if (showGraph) {
-      this.frameTimeHistory.push(metrics.frameTime);
-      if (this.frameTimeHistory.length > this.MAX_HISTORY) {
-        this.frameTimeHistory.shift();
-      }
+  query(range, found = []) {
+    if (!this.boundary.intersects(range)) return found;
+    for (const p of this.points) {
+      if (range.contains(p)) found.push(p);
     }
-    this.context.save();
-    this.context.fillStyle = backgroundColor;
-    this.context.fillRect(x, y, width, height);
-    this.context.strokeStyle = accentColor;
-    this.context.lineWidth = 1;
-    this.context.strokeRect(x, y, width, height);
-    this.context.fillStyle = textColor;
-    this.context.font = `${fontSize}px monospace`;
-    this.context.textAlign = "left";
-    this.context.textBaseline = "top";
-    let currentY = y + 8;
-    const fpsColor = metrics.fps >= 55 ? "#4ecdc4" : metrics.fps >= 30 ? "#ffd93d" : "#ff6b6b";
-    this.context.fillStyle = fpsColor;
-    this.context.fillText(`FPS: ${metrics.fps}`, x + 8, currentY);
-    currentY += fontSize + 4;
-    this.context.fillStyle = textColor;
-    this.context.fillText(`Frame: ${metrics.frameTime.toFixed(2)}ms`, x + 8, currentY);
-    currentY += fontSize + 4;
-    this.context.fillText(`Avg: ${metrics.averageFrameTime.toFixed(2)}ms`, x + 8, currentY);
-    currentY += fontSize + 4;
-    this.context.fillText(
-      `Min: ${metrics.minFrameTime.toFixed(2)}ms / Max: ${metrics.maxFrameTime.toFixed(2)}ms`,
-      x + 8,
-      currentY
-    );
-    currentY += fontSize + 4;
-    if (metrics.droppedFrames > 0) {
-      this.context.fillStyle = "#ff6b6b";
-      this.context.fillText(`Dropped: ${metrics.droppedFrames}`, x + 8, currentY);
-      currentY += fontSize + 4;
+    if (this.divided) {
+      this.ne.query(range, found);
+      this.nw.query(range, found);
+      this.se.query(range, found);
+      this.sw.query(range, found);
     }
-    if (showMemory && metrics.memoryUsage !== void 0) {
-      this.context.fillStyle = textColor;
-      this.context.fillText(`Memory: ${metrics.memoryUsage.toFixed(2)}MB`, x + 8, currentY);
-      currentY += fontSize + 4;
+    return found;
+  }
+  queryRadius(cx, cy, radius, found = []) {
+    if (!this.boundary.intersectsCircle(cx, cy, radius)) return found;
+    const rSq = radius * radius;
+    for (const p of this.points) {
+      if ((p.x - cx) ** 2 + (p.y - cy) ** 2 <= rSq) found.push(p);
     }
-    if (showGraph && this.frameTimeHistory.length > 1) {
-      const graphX = x + 8;
-      const graphY = currentY + 4;
-      const graphWidth = width - 16;
-      const targetFrameTime = 1e3 / this.context.fps;
-      this.context.fillStyle = "rgba(255, 255, 255, 0.1)";
-      this.context.fillRect(graphX, graphY, graphWidth, graphHeight);
-      const targetY = graphY + graphHeight - targetFrameTime / (targetFrameTime * 2) * graphHeight;
-      this.context.strokeStyle = "rgba(255, 255, 255, 0.3)";
-      this.context.lineWidth = 1;
-      this.context.beginPath();
-      this.context.moveTo(graphX, targetY);
-      this.context.lineTo(graphX + graphWidth, targetY);
-      this.context.stroke();
-      this.context.strokeStyle = accentColor;
-      this.context.lineWidth = 2;
-      this.context.beginPath();
-      const maxFrameTime = Math.max(...this.frameTimeHistory, targetFrameTime * 2);
-      const stepX = graphWidth / (this.frameTimeHistory.length - 1);
-      this.frameTimeHistory.forEach((frameTime, index) => {
-        const normalizedTime = Math.min(frameTime / maxFrameTime, 1);
-        const pointY = graphY + graphHeight - normalizedTime * graphHeight;
-        const pointX = graphX + index * stepX;
-        if (index === 0) {
-          this.context.moveTo(pointX, pointY);
-        } else {
-          this.context.lineTo(pointX, pointY);
-        }
-      });
-      this.context.stroke();
+    if (this.divided) {
+      this.ne.queryRadius(cx, cy, radius, found);
+      this.nw.queryRadius(cx, cy, radius, found);
+      this.se.queryRadius(cx, cy, radius, found);
+      this.sw.queryRadius(cx, cy, radius, found);
     }
-    this.context.restore();
+    return found;
   }
-  /**
-   * Alias for render() - shows performance widget
-   */
-  show(options) {
-    this.render(options);
+  clear() {
+    this.points = [];
+    this.divided = false;
+    this.ne = this.nw = this.se = this.sw = null;
+  }
+  get size() {
+    let n = this.points.length;
+    if (this.divided) {
+      n += this.ne.size + this.nw.size + this.se.size + this.sw.size;
+    }
+    return n;
   }
 };
-var Performance_default = Performance;
+var Quadtree_default = Quadtree;
 
-// src/elements/SSR.tsx
-var SSR = class {
+// src/elements/Pixels.tsx
+var Pixels = class {
   constructor(ctx) {
-    this.context = ctx || null;
+    this.ctx = ctx;
   }
   /**
-   * Render a Klint sketch to a static image (base64 data URL)
+   * Read all pixels from the canvas as ImageData.
    */
-  async renderToImage(draw, options) {
-    if (typeof window !== "undefined" && typeof document !== "undefined") {
-      return this.renderInBrowser(draw, options);
-    }
-    throw new Error(
-      "Server-side rendering requires 'canvas' package. Install it with: npm install canvas\nAlternatively, use SSR.generateImageUrl() to generate images via an API endpoint."
-    );
+  load() {
+    return this.ctx.getImageData(0, 0, this.ctx.width, this.ctx.height);
   }
   /**
-   * Generate a static image URL for a Klint sketch
+   * Write pixel data back to the canvas.
+   * Accepts a Uint8ClampedArray or a plain number array of RGBA values.
    */
-  async generateImageUrl(draw, options) {
-    if (typeof window === "undefined") {
-      throw new Error(
-        "generateImageUrl() requires a browser environment. For server-side rendering, use renderToImage() with the 'canvas' package."
-      );
-    }
-    return this.renderInBrowser(draw, options);
+  update(pixels) {
+    const pixelArray = pixels instanceof Uint8ClampedArray ? pixels : new Uint8ClampedArray(pixels);
+    const imageData = new ImageData(
+      new Uint8ClampedArray(pixelArray.buffer),
+      this.ctx.width,
+      this.ctx.height
+    );
+    this.ctx.putImageData(imageData, 0, 0);
   }
   /**
-   * Check if Klint can run in the current environment
+   * Read pixel values at a position.
+   * Returns an array of [r, g, b, a] values (0-255).
+   *
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param w - Width of region (default: 1)
+   * @param h - Height of region (default: 1)
    */
-  canRender() {
-    if (typeof window !== "undefined" && typeof document !== "undefined") {
-      return true;
-    }
-    try {
-      __require("canvas");
-      return true;
-    } catch {
-      return false;
-    }
+  read(x, y, w = 1, h = 1) {
+    const imageData = this.ctx.getImageData(x, y, w, h);
+    return Array.from(imageData.data);
   }
-  /**
-   * Render in browser environment (client-side)
-   */
-  async renderInBrowser(draw, options) {
-    return new Promise((resolve, reject) => {
+};
+
+// src/elements/Timeline.tsx
+var Timeline = class {
+  constructor() {
+    this.callbacks = { start: [], end: [], loop: [] };
+  }
+  onStart(fn) {
+    this.callbacks.start.push(fn);
+  }
+  onEnd(fn) {
+    this.callbacks.end.push(fn);
+  }
+  onLoop(fn) {
+    this.callbacks.loop.push(fn);
+  }
+  create(setup, options = {}) {
+    const tracks = /* @__PURE__ */ new Map();
+    let currentProgress = 0;
+    let hasStarted = false;
+    let hasEnded = false;
+    const callbacks = this.callbacks;
+    const defaultEasing = options.defaultEasing || ((t) => t);
+    const defaultLoop = options.defaultLoop || 0;
+    const executeCallback = (callback, errorMsg = "Callback error") => {
       try {
-        const canvas = document.createElement("canvas");
-        const dpr = options.dpr || (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1);
-        canvas.width = options.width * dpr;
-        canvas.height = options.height * dpr;
-        const ctx = canvas.getContext("2d");
-        if (!ctx) {
-          reject(new Error("Failed to get canvas context"));
-          return;
+        callback();
+      } catch (e) {
+        console.warn(`${errorMsg}:`, e);
+      }
+    };
+    function createKeyframes() {
+      const segments = [];
+      let currentPos = 0;
+      let loopCount = defaultLoop;
+      const parentTrack = void 0;
+      const parseEasingCallback = (easing, callback) => {
+        if (typeof easing === "function" && typeof callback === "undefined") {
+          if (easing.length === 0) {
+            return { easing: defaultEasing, callback: easing };
+          }
+          return {
+            easing,
+            callback: void 0
+          };
+        }
+        return {
+          easing: easing || defaultEasing,
+          callback
+        };
+      };
+      const builder = {
+        start(value, delay = 0, callback) {
+          segments.push({ pos: delay, value, callback, type: "start" });
+          currentPos = delay;
+          return builder;
+        },
+        at(progress, value, easing, callback) {
+          const { easing: finalEasing, callback: finalCallback } = parseEasingCallback(easing, callback);
+          segments.push({
+            pos: progress,
+            value,
+            easing: finalEasing,
+            callback: finalCallback,
+            type: "tween"
+          });
+          currentPos = progress;
+          return builder;
+        },
+        then(value, duration, easing, callback) {
+          const { easing: finalEasing, callback: finalCallback } = parseEasingCallback(easing, callback);
+          const nextPos = currentPos + duration;
+          segments.push({
+            pos: nextPos,
+            value,
+            easing: finalEasing,
+            callback: finalCallback,
+            type: "tween"
+          });
+          currentPos = nextPos;
+          return builder;
+        },
+        loop(count = Infinity) {
+          loopCount = count;
+          return builder;
+        },
+        _compile: () => {
+          segments.sort((a, b) => a.pos - b.pos);
+          return { segments, loopCount, parentTrack };
+        }
+      };
+      return builder;
+    }
+    function interpolateTrack(compiled, progress) {
+      const { segments } = compiled;
+      if (!segments.length) return 0;
+      progress = Math.max(0, Math.min(1, progress));
+      const valueSegments = segments.filter(
+        (seg) => seg.value !== void 0
+      );
+      if (!valueSegments.length) return 0;
+      let prevSeg = valueSegments[0];
+      for (let i = 1; i < valueSegments.length; i++) {
+        const seg = valueSegments[i];
+        if (progress <= seg.pos) {
+          if (seg.type === "tween" && prevSeg.value !== void 0 && seg.value !== void 0) {
+            const t = (progress - prevSeg.pos) / (seg.pos - prevSeg.pos);
+            const easedT = seg.easing ? seg.easing(t) : t;
+            return prevSeg.value + (seg.value - prevSeg.value) * easedT;
+          }
+          return seg.value || 0;
+        }
+        if (seg.value !== void 0) {
+          prevSeg = seg;
         }
-        const klintContext = this.createMinimalContext(
-          ctx,
-          canvas,
-          options.width,
-          options.height,
-          dpr
-        );
-        draw(klintContext);
-        const mimeType = options.format === "jpeg" ? "image/jpeg" : options.format === "webp" ? "image/webp" : "image/png";
-        const quality = options.quality !== void 0 ? options.quality : 0.85;
-        const dataUrl = canvas.toDataURL(mimeType, quality);
-        resolve(dataUrl);
-      } catch (error) {
-        reject(error);
       }
-    });
-  }
-  /**
-   * Create a minimal KlintContext for server rendering
-   * This provides basic functionality without full Klint features
-   */
-  createMinimalContext(ctx, canvas, width, height, dpr) {
-    return {
-      canvas,
-      width: width * dpr,
-      height: height * dpr,
-      // Basic canvas methods
-      fillRect: ctx.fillRect.bind(ctx),
-      strokeRect: ctx.strokeRect.bind(ctx),
-      clearRect: ctx.clearRect.bind(ctx),
-      beginPath: ctx.beginPath.bind(ctx),
-      moveTo: ctx.moveTo.bind(ctx),
-      lineTo: ctx.lineTo.bind(ctx),
-      arc: ctx.arc.bind(ctx),
-      fill: ctx.fill.bind(ctx),
-      stroke: ctx.stroke.bind(ctx),
-      save: ctx.save.bind(ctx),
-      restore: ctx.restore.bind(ctx),
-      translate: ctx.translate.bind(ctx),
-      rotate: ctx.rotate.bind(ctx),
-      scale: ctx.scale.bind(ctx),
-      // Basic properties
-      fillStyle: ctx.fillStyle,
-      strokeStyle: ctx.strokeStyle,
-      lineWidth: ctx.lineWidth,
-      // Minimal Klint-like API
-      background: (color) => {
-        ctx.fillStyle = color || "#000";
-        ctx.fillRect(0, 0, width * dpr, height * dpr);
-      },
-      fillColor: (color) => {
-        ctx.fillStyle = color;
+      return prevSeg.value || 0;
+    }
+    const timeline = {
+      track: (keyframesOrFn) => {
+        const compiled = typeof keyframesOrFn === "function" ? timeline.keyframes(keyframesOrFn) : keyframesOrFn;
+        const track = {
+          ...compiled,
+          currentValue: 0,
+          getValue: (progress) => interpolateTrack(compiled, progress),
+          get current() {
+            return this.currentValue;
+          },
+          value() {
+            return this.currentValue;
+          }
+        };
+        tracks.set(track, compiled);
+        return track;
       },
-      strokeColor: (color) => {
-        ctx.strokeStyle = color;
+      keyframes: (fn) => {
+        const kf = createKeyframes();
+        fn(kf);
+        return kf._compile();
       },
-      circle: (x, y, radius) => {
-        ctx.beginPath();
-        ctx.arc(x, y, radius, 0, Math.PI * 2);
-        ctx.fill();
+      stagger: (count, offset, keyframesFn) => {
+        const compiled = timeline.keyframes(keyframesFn);
+        return Array.from({ length: count }, (_, i) => {
+          const track = {
+            ...compiled,
+            currentValue: 0,
+            staggerDelay: i * offset,
+            getValue: (progress) => {
+              const staggeredProgress = Math.max(0, progress - i * offset);
+              const normalizedProgress = Math.min(
+                1,
+                staggeredProgress / (1 - i * offset)
+              );
+              return normalizedProgress > 0 ? interpolateTrack(compiled, normalizedProgress) : 0;
+            },
+            get current() {
+              return this.currentValue;
+            },
+            value() {
+              return this.currentValue;
+            }
+          };
+          tracks.set(track, compiled);
+          return track;
+        });
       },
-      rectangle: (x, y, w, h) => {
-        ctx.fillRect(x, y, w, h || w);
+      update: (progress) => {
+        const prevProgress = currentProgress;
+        currentProgress = progress;
+        if (!hasStarted && progress > 0) {
+          hasStarted = true;
+          callbacks.start.forEach(
+            (cb) => executeCallback(cb, "Start callback error")
+          );
+        }
+        if (!hasEnded && progress >= 1) {
+          hasEnded = true;
+          callbacks.end.forEach(
+            (cb) => executeCallback(cb, "End callback error")
+          );
+        }
+        if (progress < prevProgress) {
+          if (progress === 0) {
+            hasStarted = false;
+            hasEnded = false;
+          } else if (progress < 1) {
+            hasEnded = false;
+          }
+        }
+        for (const [track, compiled] of tracks) {
+          track.currentValue = track.getValue(progress);
+          if (compiled.segments) {
+            compiled.segments.forEach((seg) => {
+              if (seg.callback && seg.pos <= progress && seg.pos > prevProgress) {
+                executeCallback(seg.callback);
+              }
+            });
+          }
+        }
       },
-      // Time properties (static for server rendering)
-      frame: 0,
-      time: 0,
-      deltaTime: 0,
-      fps: 60
+      progress: () => currentProgress
     };
+    const result = setup(timeline);
+    return { ...result, update: timeline.update };
   }
 };
-var SSR_default = SSR;
 
 // src/KlintFunctions.tsx
 var KlintCoreFunctions = {
@@ -2612,37 +2556,6 @@ var KlintCoreFunctions = {
   // to do
   redraw: () => () => {
   },
-  extend: (ctx) => (name, data, enforceReplace = false) => {
-    if (name in ctx && !enforceReplace) return;
-    ctx[name] = data;
-  },
-  passImage: () => (element) => {
-    if (!element.complete) {
-      console.warn("Image passed to passImage() is not fully loaded");
-      return null;
-    }
-    return element;
-  },
-  passImages: () => (elements) => {
-    return elements.map((element) => {
-      if (!element.complete) {
-        console.warn("Image passed to passImages() is not fully loaded");
-        return null;
-      }
-      return element;
-    });
-  },
-  saveConfig: (ctx) => (from) => {
-    return Object.fromEntries(
-      CONFIG_PROPS.map((key) => [
-        key,
-        from?.[key] ?? ctx[key]
-      ])
-    );
-  },
-  restoreConfig: (ctx) => (config) => {
-    Object.assign(ctx, config);
-  },
   describe: (ctx) => (description) => {
     ctx.__description = description;
   },
@@ -2747,6 +2660,7 @@ var KlintFunctions = {
   strokeWidth: (ctx) => (width) => {
     if (width <= 0) {
       ctx.lineWidth = EPSILON;
+      return;
     }
     ctx.lineWidth = width;
   },
@@ -2923,7 +2837,7 @@ var KlintFunctions = {
     ctx.__currentContours = null;
     ctx.__startedShape = false;
   },
-  gradient: (ctx) => (x1 = 0, y1 = 0, x2 = ctx.width, y2 = ctx.width) => {
+  gradient: (ctx) => (x1 = 0, y1 = 0, x2 = ctx.width, y2 = ctx.height) => {
     return ctx.createLinearGradient(x1, y1, x2, y2);
   },
   radialGradient: (ctx) => (x1 = ctx.width / 2, y1 = ctx.height / 2, r1 = 0, x2 = ctx.width / 2, y2 = ctx.height / 2, r2 = Math.min(ctx.width, ctx.height)) => {
@@ -3186,19 +3100,6 @@ var KlintFunctions = {
     const adjustedY = ctx.__imageOrigin === "center" ? dy - height / 2 : dy;
     ctx.drawImage(sourceImage, adjustedX, adjustedY);
   },
-  // unsure about keeping those next two, maybe a shader plugin would be better
-  loadPixels: (ctx) => () => {
-    return ctx.getImageData(0, 0, ctx.width, ctx.height);
-  },
-  updatePixels: (ctx) => (pixels) => {
-    const pixelArray = pixels instanceof Uint8ClampedArray ? new Uint8ClampedArray(pixels) : new Uint8ClampedArray(pixels);
-    const imageData = new ImageData(pixelArray, ctx.width, ctx.height);
-    ctx.putImageData(imageData, 0, 0);
-  },
-  readPixels: (ctx) => (x, y, w = 1, h = 1) => {
-    const imageData = ctx.getImageData(x, y, w, h);
-    return Array.from(imageData.data);
-  },
   scaleTo: () => (originWidth, originHeight, destinationWidth, destinationHeight, cover = false) => {
     const widthRatio = destinationWidth / originWidth;
     const heightRatio = destinationHeight / originHeight;
@@ -3210,6 +3111,12 @@ var KlintFunctions = {
   blend: (ctx) => (blend) => {
     ctx.globalCompositeOperation = blend === "default" ? "source-over" : blend;
   },
+  smooth: (ctx) => () => {
+    ctx.imageSmoothingEnabled = true;
+  },
+  noSmooth: (ctx) => () => {
+    ctx.imageSmoothingEnabled = false;
+  },
   setCanvasOrigin: (ctx) => (type) => {
     ctx.__canvasOrigin = type;
   },
@@ -3273,6 +3180,41 @@ var KlintFunctions = {
     ctx.fill = originalFill;
     ctx.stroke = originalStroke;
   },
+  screenToWorld: (ctx) => (screenX, screenY) => {
+    const isCenter = ctx.__canvasOrigin === "center";
+    const deviceX = isCenter ? screenX + ctx.width * 0.5 : screenX;
+    const deviceY = isCenter ? screenY + ctx.height * 0.5 : screenY;
+    const inverse = ctx.getTransform().inverse();
+    const pt = inverse.transformPoint(new DOMPoint(deviceX, deviceY));
+    return { x: pt.x, y: pt.y };
+  },
+  worldToScreen: (ctx) => (worldX, worldY) => {
+    const isCenter = ctx.__canvasOrigin === "center";
+    const matrix = ctx.getTransform();
+    const pt = matrix.transformPoint(new DOMPoint(worldX, worldY));
+    const screenX = isCenter ? pt.x - ctx.width * 0.5 : pt.x;
+    const screenY = isCenter ? pt.y - ctx.height * 0.5 : pt.y;
+    return { x: screenX, y: screenY };
+  },
+  getVisibleBounds: (ctx) => () => {
+    const inverse = ctx.getTransform().inverse();
+    const c0 = inverse.transformPoint(new DOMPoint(0, 0));
+    const c1 = inverse.transformPoint(new DOMPoint(ctx.width, 0));
+    const c2 = inverse.transformPoint(new DOMPoint(ctx.width, ctx.height));
+    const c3 = inverse.transformPoint(new DOMPoint(0, ctx.height));
+    const left = Math.min(c0.x, c1.x, c2.x, c3.x);
+    const right = Math.max(c0.x, c1.x, c2.x, c3.x);
+    const top = Math.min(c0.y, c1.y, c2.y, c3.y);
+    const bottom = Math.max(c0.y, c1.y, c2.y, c3.y);
+    return {
+      left,
+      top,
+      right,
+      bottom,
+      width: right - left,
+      height: bottom - top
+    };
+  },
   canIuseFilter: (ctx) => () => {
     return ctx.filter !== void 0 && ctx.filter !== null;
   },
@@ -3363,29 +3305,8 @@ function useKlint() {
   const gestureRef = useRef2(null);
   const keyboardRef = useRef2(null);
   const useDev = () => {
-    useEffect2(() => {
-      if (process.env.NODE_ENV === "development") {
-        if (typeof import.meta !== "undefined" && import.meta.hot) {
-          console.log("[Klint] hot updated - clearing non-context state");
-          if (contextRef.current) {
-            const ctx = contextRef.current;
-            ctx.frame = 0;
-            ctx.time = 0;
-            ctx.__offscreens?.clear();
-            ctx.__startedShape = false;
-            ctx.__currentShape = null;
-            ctx.__startedContour = false;
-            ctx.__currentContours = null;
-            ctx.__currentContour = null;
-            ctx.__isReadyToDraw = true;
-            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-          }
-        }
-      }
-    }, []);
     useEffect2(() => {
       if (process.env.NODE_ENV === "development" && contextRef.current) {
-        console.log("[Klint] hot updated - clearing context state");
         contextRef.current.__isReadyToDraw = true;
       }
     });
@@ -3509,7 +3430,7 @@ function useKlint() {
       canvas.addEventListener("mouseleave", handleMouseLeave, { signal });
       canvas.addEventListener("click", handleClick, { signal });
       return () => controller.abort();
-    });
+    }, []);
     return {
       mouse: mouseRef.current,
       onClick: (callback) => clickCallbackRef.current = callback,
@@ -3544,7 +3465,7 @@ function useKlint() {
       };
       canvas.addEventListener("wheel", handleScroll, { signal });
       return () => controller.abort();
-    });
+    }, []);
     return {
       scroll: scrollRef.current,
       onScroll: (callback) => scrollCallbackRef.current = callback
@@ -3721,6 +3642,17 @@ function useKlint() {
     const keyPressedCallbackRef = useRef2(/* @__PURE__ */ new Map());
     const keyReleasedCallbackRef = useRef2(/* @__PURE__ */ new Map());
     const keyComboCallbackRef = useRef2(/* @__PURE__ */ new Map());
+    const normalizeKey = (key) => {
+      const keyMap = {
+        " ": "Space",
+        Control: "Ctrl",
+        Escape: "Esc"
+      };
+      return keyMap[key] || key;
+    };
+    const createComboKey = (keys) => {
+      return keys.map(normalizeKey).sort().join("+");
+    };
     useEffect2(() => {
       if (!contextRef.current) return;
       const ctx = contextRef.current;
@@ -3733,17 +3665,9 @@ function useKlint() {
         keyboardRef.current.modifiers.ctrl = e.ctrlKey;
         keyboardRef.current.modifiers.meta = e.metaKey;
       };
-      const normalizeKey2 = (key) => {
-        const keyMap = {
-          " ": "Space",
-          Control: "Ctrl",
-          Escape: "Esc"
-        };
-        return keyMap[key] || key;
-      };
       const handleKeyDown = (e) => {
         if (!keyboardRef.current) return;
-        const normalizedKey = normalizeKey2(e.key);
+        const normalizedKey = normalizeKey(e.key);
         keyboardRef.current.pressedKeys.add(normalizedKey);
         keyboardRef.current.lastKey = normalizedKey;
         keyboardRef.current.lastKeyTime = performance.now();
@@ -3763,7 +3687,7 @@ function useKlint() {
       };
       const handleKeyUp = (e) => {
         if (!keyboardRef.current) return;
-        const normalizedKey = normalizeKey2(e.key);
+        const normalizedKey = normalizeKey(e.key);
         keyboardRef.current.pressedKeys.delete(normalizedKey);
         updateModifiers(e);
         const keyCallback = keyReleasedCallbackRef.current.get(normalizedKey);
@@ -3775,17 +3699,6 @@ function useKlint() {
       window.addEventListener("keyup", handleKeyUp, { signal });
       return () => controller.abort();
     }, []);
-    const createComboKey = (keys) => {
-      return keys.map(normalizeKey).sort().join("+");
-    };
-    const normalizeKey = (key) => {
-      const keyMap = {
-        " ": "Space",
-        Control: "Ctrl",
-        Escape: "Esc"
-      };
-      return keyMap[key] || key;
-    };
     return {
       keyboard: keyboardRef.current,
       // Register callback for single key press
@@ -3819,210 +3732,6 @@ function useKlint() {
       }
     };
   };
-  const KlintTimeline = () => {
-    const timelinesRef = useRef2(/* @__PURE__ */ new Map());
-    const callbacksRef = useRef2({ start: [], end: [], loop: [] });
-    const Timeline = {
-      create: (setup, options = {}) => {
-        const tracks = /* @__PURE__ */ new Map();
-        const parents = /* @__PURE__ */ new Set();
-        let currentProgress = 0;
-        let hasStarted = false;
-        let hasEnded = false;
-        const defaultEasing = options.defaultEasing || ((t) => t);
-        const defaultLoop = options.defaultLoop || 0;
-        const executeCallback = (callback, errorMsg = "Callback error") => {
-          try {
-            callback();
-          } catch (e) {
-            console.warn(`${errorMsg}:`, e);
-          }
-        };
-        function createKeyframes() {
-          const segments = [];
-          let currentPos = 0;
-          let loopCount = defaultLoop;
-          let parentTrack = void 0;
-          const parseEasingCallback = (easing, callback) => {
-            if (typeof easing === "function" && typeof callback === "undefined") {
-              if (easing.length === 0) {
-                return {
-                  easing: defaultEasing,
-                  callback: easing
-                };
-              }
-              return {
-                easing,
-                callback: void 0
-              };
-            }
-            return {
-              easing: easing || defaultEasing,
-              callback
-            };
-          };
-          const builder = {
-            start(value, delay = 0, callback) {
-              segments.push({ pos: delay, value, callback, type: "start" });
-              currentPos = delay;
-              return builder;
-            },
-            at(progress, value, easing, callback) {
-              const { easing: finalEasing, callback: finalCallback } = parseEasingCallback(easing, callback);
-              segments.push({
-                pos: progress,
-                value,
-                easing: finalEasing,
-                callback: finalCallback,
-                type: "tween"
-              });
-              currentPos = progress;
-              return builder;
-            },
-            then(value, duration, easing, callback) {
-              const { easing: finalEasing, callback: finalCallback } = parseEasingCallback(easing, callback);
-              const nextPos = currentPos + duration;
-              segments.push({
-                pos: nextPos,
-                value,
-                easing: finalEasing,
-                callback: finalCallback,
-                type: "tween"
-              });
-              currentPos = nextPos;
-              return builder;
-            },
-            loop(count = Infinity) {
-              loopCount = count;
-              return builder;
-            },
-            _compile: () => {
-              segments.sort((a, b) => a.pos - b.pos);
-              return { segments, loopCount, parentTrack };
-            }
-          };
-          return builder;
-        }
-        function interpolateTrack(compiled, progress) {
-          const { segments } = compiled;
-          if (!segments.length) return 0;
-          progress = Math.max(0, Math.min(1, progress));
-          const valueSegments = segments.filter(
-            (seg) => seg.type !== "callback"
-          );
-          if (!valueSegments.length) return 0;
-          let prevSeg = valueSegments[0];
-          for (let i = 1; i < valueSegments.length; i++) {
-            const seg = valueSegments[i];
-            if (progress <= seg.pos) {
-              if (seg.type === "tween" && prevSeg.value !== void 0 && seg.value !== void 0) {
-                const t = (progress - prevSeg.pos) / (seg.pos - prevSeg.pos);
-                const easedT = seg.easing ? seg.easing(t) : t;
-                return prevSeg.value + (seg.value - prevSeg.value) * easedT;
-              }
-              return seg.value || 0;
-            }
-            if (seg.value !== void 0) {
-              prevSeg = seg;
-            }
-          }
-          return prevSeg.value || 0;
-        }
-        const timeline = {
-          track: (keyframesOrFn) => {
-            const compiled = typeof keyframesOrFn === "function" ? timeline.keyframes(keyframesOrFn) : keyframesOrFn;
-            const track = {
-              ...compiled,
-              currentValue: 0,
-              getValue: (progress) => interpolateTrack(compiled, progress),
-              get current() {
-                return this.currentValue;
-              },
-              value: function() {
-                return this.currentValue;
-              }
-            };
-            tracks.set(track, compiled);
-            return track;
-          },
-          keyframes: (fn) => {
-            const kf = createKeyframes();
-            fn(kf);
-            return kf._compile();
-          },
-          stagger: (count, offset, keyframesFn) => {
-            const compiled = timeline.keyframes(keyframesFn);
-            return Array.from({ length: count }, (_, i) => {
-              const track = {
-                ...compiled,
-                currentValue: 0,
-                staggerDelay: i * offset,
-                getValue: (progress) => {
-                  const staggeredProgress = Math.max(0, progress - i * offset);
-                  const normalizedProgress = Math.min(
-                    1,
-                    staggeredProgress / (1 - i * offset)
-                  );
-                  return normalizedProgress > 0 ? interpolateTrack(compiled, normalizedProgress) : 0;
-                },
-                get current() {
-                  return this.currentValue;
-                },
-                value: function() {
-                  return this.currentValue;
-                }
-              };
-              tracks.set(track, compiled);
-              return track;
-            });
-          },
-          update: (progress) => {
-            const prevProgress = currentProgress;
-            currentProgress = progress;
-            if (!hasStarted && progress > 0) {
-              hasStarted = true;
-              callbacksRef.current.start.forEach(
-                (cb) => executeCallback(cb, "Start callback error")
-              );
-            }
-            if (!hasEnded && progress >= 1) {
-              hasEnded = true;
-              callbacksRef.current.end.forEach(
-                (cb) => executeCallback(cb, "End callback error")
-              );
-            }
-            if (progress < prevProgress) {
-              if (progress === 0) {
-                hasStarted = false;
-                hasEnded = false;
-              } else if (progress < 1) {
-                hasEnded = false;
-              }
-            }
-            for (const [track, compiled] of tracks) {
-              track.currentValue = track.getValue(progress);
-              if (compiled.segments) {
-                compiled.segments.forEach((seg) => {
-                  if (seg.callback && seg.pos <= progress && seg.pos > prevProgress) {
-                    executeCallback(seg.callback);
-                  }
-                });
-              }
-            }
-          },
-          progress: () => currentProgress
-        };
-        const result = setup(timeline);
-        return { ...result, update: timeline.update };
-      }
-    };
-    return {
-      Timeline,
-      onStart: (fn) => callbacksRef.current.start.push(fn),
-      onEnd: (fn) => callbacksRef.current.end.push(fn),
-      onLoop: (fn) => callbacksRef.current.loop.push(fn)
-    };
-  };
   const KlintWindow = () => {
     const resizeCallbackRef = useRef2(
       null
@@ -4093,13 +3802,13 @@ function useKlint() {
     context.Vector = new Vector_default();
     context.Easing = new Easing_default();
     context.Text = new Text_default(context);
-    context.Thing = new Thing_default(context);
     context.Grid = new Grid_default(context);
     context.Strip = new Strip_default(context);
     context.Noise = new Noise_default(context);
     context.Hotspot = new Hotspot_default(context);
-    context.Performance = new Performance_default(context);
-    context.SSR = new SSR_default(context);
+    context.Quadtree = Quadtree_default;
+    context.Pixels = new Pixels(context);
+    context.Timeline = new Timeline();
     Object.entries(KlintCoreFunctions).forEach(([name, fn]) => {
       context[name] = fn(context);
     });
@@ -4130,30 +3839,6 @@ function useKlint() {
       contextRef.current.__isPlaying = !contextRef.current.__isPlaying;
     }
   }, []);
-  const KlintPerformance = () => {
-    const metricsRef = useRef2(null);
-    useEffect2(() => {
-      if (!contextRef.current?.__performance) return;
-      const updateMetrics = () => {
-        if (contextRef.current?.__performance) {
-          metricsRef.current = { ...contextRef.current.__performance };
-        }
-      };
-      const interval = setInterval(updateMetrics, 100);
-      return () => clearInterval(interval);
-    }, []);
-    return {
-      metrics: metricsRef.current,
-      getMetrics: () => contextRef.current?.__performance || null,
-      reset: () => {
-        if (contextRef.current?.__performance) {
-          contextRef.current.__performance.droppedFrames = 0;
-          contextRef.current.__performance.minFrameTime = Infinity;
-          contextRef.current.__performance.maxFrameTime = 0;
-        }
-      }
-    };
-  };
   return {
     context: {
       context: contextRef.current,
@@ -4165,8 +3850,6 @@ function useKlint() {
     KlintKeyboard,
     KlintWindow,
     KlintImage,
-    KlintTimeline,
-    KlintPerformance,
     togglePlay,
     useDev
   };
@@ -4221,11 +3904,12 @@ export {
   KlintCoreFunctions,
   KlintFunctions,
   Noise_default as Noise,
-  Performance_default as Performance,
-  SSR_default as SSR,
+  Pixels,
+  Quadtree_default as Quadtree,
+  Rectangle,
   Strip_default as Strip,
   Text_default as Text,
-  Thing_default as Thing,
+  Timeline,
   Vector_default as Vector,
   useKlint,
   useProps,