@shopify/klint 0.0.97 → 0.2.0

package/dist/index.cjs

@@ -31,10 +31,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   CONFIG_PROPS: () => CONFIG_PROPS,
+  Color: () => Color_default,
   EPSILON: () => EPSILON,
+  Easing: () => Easing_default,
+  Grid: () => Grid_default,
+  Hotspot: () => Hotspot_default,
   Klint: () => Klint,
   KlintCoreFunctions: () => KlintCoreFunctions,
   KlintFunctions: () => KlintFunctions,
+  Noise: () => Noise_default,
+  Performance: () => Performance_default,
+  SSR: () => SSR_default,
+  Strip: () => Strip_default,
+  Text: () => Text_default,
+  Thing: () => Thing_default,
+  Vector: () => Vector_default,
   useKlint: () => useKlint,
   useProps: () => useProps,
   useStorage: () => useStorage
@@ -43,6 +54,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/Klint.tsx
 var import_react = __toESM(require("react"), 1);
+var import_meta = {};
 var DEFAULT_FPS = 60;
 var DEFAULT_ALT = "A beautiful artwork made with Klint Canvas";
 var EPSILON = 1e-4;
@@ -80,11 +92,18 @@ var CONFIG_PROPS = [
   "__textWeight",
   "__textStyle",
   "__textSize",
+  "__textLeading",
   "__textAlignment",
+  "__fillRule",
   "__isPlaying"
 ];
-function useAnimate(contextRef, draw, isVisible) {
+function useAnimate(contextRef, draw, isVisible, enablePerformanceTracking = false) {
   const animationFrameId = (0, import_react.useRef)(0);
+  const frameTimeHistoryRef = (0, import_react.useRef)([]);
+  const frameStartTimeRef = (0, import_react.useRef)(0);
+  const frameCountRef = (0, import_react.useRef)(0);
+  const lastFpsUpdateRef = (0, import_react.useRef)(0);
+  const droppedFramesRef = (0, import_react.useRef)(0);
   const animate = (0, import_react.useCallback)(
     (timestamp = 0) => {
       if (!contextRef.current || !isVisible) return;
@@ -98,22 +117,55 @@ function useAnimate(contextRef, draw, isVisible) {
       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;
         if (context.frame > 1e7) context.frame = 0;
-        context.time += context.deltaTime / DEFAULT_FPS;
+        context.time += context.deltaTime / 1e3;
         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]
+    [draw, isVisible, contextRef, enablePerformanceTracking]
   );
   return {
     animate,
@@ -126,7 +178,8 @@ function Klint({
   draw,
   options = {},
   preload,
-  onVisible
+  onVisible,
+  enablePerformanceTracking = false
 }) {
   const canvasRef = (0, import_react.useRef)(null);
   const containerRef = (0, import_react.useRef)(null);
@@ -136,13 +189,36 @@ function Klint({
     null
   );
   const [isVisible, setIsVisible] = (0, import_react.useState)(true);
+  (0, import_react.useEffect)(() => {
+    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;
+        }
+      });
+    }
+    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;
+        }
+      });
+    }
+  }, []);
   const __options = {
     ...DEFAULT_OPTIONS,
     ...options
   };
   const [toStaticImage, setStaticImage] = (0, import_react.useState)(null);
   const initContext = context?.initCoreContext;
-  const { animate, animationFrameId } = useAnimate(contextRef, draw, isVisible);
+  const { animate, animationFrameId } = useAnimate(
+    contextRef,
+    draw,
+    isVisible,
+    enablePerformanceTracking
+  );
   const updateCanvasSize = (shouldRedraw = false) => {
     if (!containerRef.current || !contextRef.current || !canvasRef.current)
       return;
@@ -172,6 +248,16 @@ 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;
     }
@@ -634,7 +720,8 @@ var Color_default = Color;
 
 // src/elements/Easing.tsx
 var Easing = class {
-  constructor(ctx) {
+  constructor() {
+    this.zeroOut = (val) => Object.is(val, -0) || Math.abs(val) < 1e-12 ? 0 : val;
     this.normalize = (val) => {
       return val * 0.5 + 0.5;
     };
@@ -658,19 +745,19 @@ var Easing = class {
     };
     this.overshootIn = (val) => {
       const k = 1.70158;
-      return val * val * (val * (k + 1) - k);
+      return this.zeroOut(val * val * (val * (k + 1) - k));
     };
     this.overshootOut = (val) => {
       const m = val - 1;
       const k = 1.70158;
-      return 1 + m * m * (m * (k + 1) + k);
+      return this.zeroOut(1 + m * m * (m * (k + 1) + k));
     };
     this.overshootInOut = (val) => {
       const m = val - 1;
       const t = val * 2;
       const k = 1.70158 * 1.525;
-      if (val < 0.5) return val * t * (t * (k + 1) - k);
-      return 1 + 2 * m * m * (2 * m * (k + 1) + k);
+      if (val < 0.5) return this.zeroOut(val * t * (t * (k + 1) - k));
+      return this.zeroOut(1 + 2 * m * m * (2 * m * (k + 1) + k));
     };
     this.bounceOut = (val) => {
       const r = 1 / 2.75;
@@ -723,48 +810,22 @@ var Easing = class {
     this.log = () => {
       console.log(this);
     };
-    this.context = ctx;
   }
 };
 var Easing_default = Easing;
 
-// src/elements/State.tsx
-var State = class {
-  constructor() {
-    this.store = /* @__PURE__ */ new Map();
-  }
-  set(key, value, callback) {
-    this.store.set(key, value);
-    callback?.(key, value);
-  }
-  get(key, callback) {
-    const value = this.store.get(key);
-    callback?.(key, value);
-    return value;
-  }
-  has(key) {
-    return this.store.has(key);
-  }
-  delete(key, callback) {
-    this.store.delete(key);
-    callback?.(key);
-  }
-  log() {
-    return this.store;
-  }
-};
-var State_default = State;
-
 // src/elements/Vector.tsx
 var Vector = class _Vector {
   /**
    * Creates a new Vector
    * @param x - X-coordinate (default: 0)
    * @param y - Y-coordinate (default: 0)
+   * @param z - Z-coordinate (default: 0)
    */
-  constructor(x = 0, y = 0) {
+  constructor(x = 0, y = 0, z = 0) {
     this.x = x;
     this.y = y;
+    this.z = z;
   }
   /**
    * Adds another vector to this vector
@@ -774,6 +835,7 @@ var Vector = class _Vector {
   add(v) {
     this.x += v.x;
     this.y += v.y;
+    this.z += v.z;
     return this;
   }
   /**
@@ -784,6 +846,7 @@ var Vector = class _Vector {
   sub(v) {
     this.x -= v.x;
     this.y -= v.y;
+    this.z -= v.z;
     return this;
   }
   /**
@@ -794,6 +857,7 @@ var Vector = class _Vector {
   mult(n) {
     this.x *= n;
     this.y *= n;
+    this.z *= n;
     return this;
   }
   /**
@@ -804,11 +868,11 @@ var Vector = class _Vector {
   div(n) {
     this.x /= n;
     this.y /= n;
+    this.z /= n;
     return this;
   }
-  // to do : project, perp, slerp
   /**
-   * Rotates this vector by an angle
+   * Rotates this vector by an angle (around z-axis for 2D rotation)
    * @param angle - Angle in radians
    * @returns This vector after rotation
    */
@@ -826,7 +890,7 @@ var Vector = class _Vector {
    * @returns The magnitude of the vector
    */
   mag() {
-    return Math.sqrt(this.x * this.x + this.y * this.y);
+    return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
   }
   /**
    * Alias for mag() - calculates the length of this vector
@@ -841,7 +905,7 @@ var Vector = class _Vector {
    * @returns The dot product
    */
   dot(v) {
-    return this.x * v.x + this.y * v.y;
+    return this.x * v.x + this.y * v.y + this.z * v.z;
   }
   /**
    * Calculates the distance between this vector and another vector
@@ -849,21 +913,21 @@ var Vector = class _Vector {
    * @returns The distance between the vectors
    */
   dist(v) {
-    return Math.hypot(this.x - v.x, this.y - v.y);
+    return Math.hypot(this.x - v.x, this.y - v.y, this.z - v.z);
   }
   /**
-   * Calculates the angle of this vector
+   * Calculates the angle of this vector (in 2D, ignoring z)
    * @returns The angle in radians
    */
   angle() {
-    return Math.atan2(-this.x, -this.y) + Math.PI;
+    return Math.atan2(this.y, this.x);
   }
   /**
    * Creates a copy of this vector
    * @returns A new Vector with the same coordinates
    */
   copy() {
-    return new _Vector(this.x, this.y);
+    return new _Vector(this.x, this.y, this.z);
   }
   /**
    * Normalizes this vector (sets its magnitude to 1)
@@ -877,107 +941,128 @@ var Vector = class _Vector {
    * Sets the coordinates of this vector
    * @param x - New X-coordinate
    * @param y - New Y-coordinate
+   * @param z - New Z-coordinate (default: 0)
    * @returns This vector after setting coordinates
    */
-  set(x, y) {
+  set(x, y, z = 0) {
     this.x = x;
     this.y = y;
+    this.z = z;
     return this;
   }
   /**
-   * Creates a new vector at a specified angle and distance from a center point
-   * @param center - The center point vector
-   * @param a - The angle in radians
-   * @param r - The radius (distance from center)
-   * @returns A new Vector at the calculated position
+   * Calculates the cross product of this vector with another vector
+   * @param v - The other vector
+   * @returns A new Vector representing the cross product
    */
-  static fromAngle(center, a, r) {
-    const x = Math.cos(a) * r + center.x;
-    const y = Math.sin(a) * r + center.y;
-    return new _Vector(x, y);
-  }
-};
-var Vector_default = Vector;
-
-// src/elements/Time.tsx
-var Time = class {
-  constructor(ctx) {
-    this.timelines = /* @__PURE__ */ new Map();
-    this.currentTimeline = "default";
-    this.DEFAULT_DURATION = 8 * 60;
-    this.staggers = [];
-    this.context = ctx;
-    this.timelines.set("default", {
-      progress: 0,
-      duration: this.DEFAULT_DURATION
-    });
+  cross(v) {
+    return new _Vector(
+      this.y * v.z - this.z * v.y,
+      this.z * v.x - this.x * v.z,
+      this.x * v.y - this.y * v.x
+    );
   }
-  timeline(key) {
-    if (!this.timelines.has(key)) {
-      this.timelines.set(key, { progress: 0, duration: this.DEFAULT_DURATION });
-    }
-    this.currentTimeline = key;
+  /**
+   * Calculates this vector's position relative to another vector
+   * @param v - The reference vector
+   * @returns This vector after making it relative to v
+   */
+  relativeTo(v) {
+    this.x -= v.x;
+    this.y -= v.y;
+    this.z -= v.z;
     return this;
   }
-  use(progress) {
-    const timeline = this.timelines.get(this.currentTimeline);
-    if (timeline.duration <= 0) {
-      timeline.progress = 0;
-      return this;
-    }
-    timeline.progress = timeline.duration === 1 ? Math.min(progress, 1) : progress / timeline.duration % 1;
+  /**
+   * Makes this vector point towards a target vector
+   * @param target - The target vector to look at
+   * @returns This vector after pointing towards target
+   */
+  lookAt(target) {
+    const direction = new _Vector(
+      target.x - this.x,
+      target.y - this.y,
+      target.z - this.z
+    );
+    direction.normalize();
+    this.x = direction.x;
+    this.y = direction.y;
+    this.z = direction.z;
     return this;
   }
-  for(duration) {
-    const timeline = this.timelines.get(this.currentTimeline);
-    timeline.duration = duration;
+  /**
+   * Converts this vector from world space to screen space
+   * @param width - Screen width
+   * @param height - Screen height
+   * @returns This vector after screen space conversion
+   */
+  toScreen(width, height) {
+    this.x = (this.x + 1) * width / 2;
+    this.y = (1 - this.y) * height / 2;
     return this;
   }
-  stagger(num, offset = 0, callback) {
-    const timeline = this.timelines.get(this.currentTimeline);
-    const totalduration = this.context.remap(
-      timeline.progress,
-      0,
-      1,
-      0,
-      1 + offset
-    );
-    for (let i = 0; i < num; i++) {
-      const id = 1 - i / (num - 1);
-      const progress = this.context.constrain(
-        totalduration - id * offset,
-        0,
-        1
-      );
-      if (!callback) {
-        if (this.staggers[i]) {
-          this.staggers[i].progress = progress;
-        } else {
-          this.staggers[i] = { progress, id };
-        }
+  /**
+   * Spherical linear interpolation between this vector and another vector
+   * @param v - The target vector
+   * @param amt - Interpolation amount (0-1)
+   * @returns This vector after interpolation
+   */
+  slerp(v, amt) {
+    if (amt === 0) {
+      return this;
+    }
+    if (amt === 1) {
+      return this.set(v.x, v.y, v.z);
+    }
+    const selfMag = this.mag();
+    const vMag = v.mag();
+    const magmag = selfMag * vMag;
+    if (magmag === 0) {
+      this.mult(1 - amt).add(new _Vector(v.x * amt, v.y * amt, v.z * amt));
+      return this;
+    }
+    const axis = this.cross(v);
+    const axisMag = axis.mag();
+    const theta = Math.atan2(axisMag, this.dot(v));
+    if (axisMag > 0) {
+      axis.x /= axisMag;
+      axis.y /= axisMag;
+      axis.z /= axisMag;
+    } else if (theta < Math.PI * 0.5) {
+      this.mult(1 - amt).add(new _Vector(v.x * amt, v.y * amt, v.z * amt));
+      return this;
+    } else {
+      if (this.z === 0 && v.z === 0) {
+        axis.set(0, 0, 1);
+      } else if (this.x !== 0) {
+        axis.set(this.y, -this.x, 0).normalize();
       } else {
-        callback?.(progress, id, num);
+        axis.set(1, 0, 0);
       }
     }
-    return callback ? this : this.staggers;
-  }
-  between(from = 0, to = 1, callback) {
-    const timeline = this.timelines.get(this.currentTimeline);
-    const localProgress = this.context.remap(
-      timeline.progress,
-      Math.max(0, from),
-      Math.min(1, to),
-      0,
-      1
-    );
-    callback(localProgress);
+    const ey = axis.cross(this);
+    const lerpedMagFactor = 1 - amt + amt * vMag / selfMag;
+    const cosMultiplier = lerpedMagFactor * Math.cos(amt * theta);
+    const sinMultiplier = lerpedMagFactor * Math.sin(amt * theta);
+    this.x = this.x * cosMultiplier + ey.x * sinMultiplier;
+    this.y = this.y * cosMultiplier + ey.y * sinMultiplier;
+    this.z = this.z * cosMultiplier + ey.z * sinMultiplier;
     return this;
   }
-  progress() {
-    return this.timelines.get(this.currentTimeline)?.progress || 0;
+  /**
+   * Creates a new vector at a specified angle and distance from a center point
+   * @param center - The center point vector
+   * @param a - The angle in radians
+   * @param r - The radius (distance from center)
+   * @returns A new Vector at the calculated position
+   */
+  static fromAngle(center, a, r) {
+    const x = Math.cos(a) * r + center.x;
+    const y = Math.sin(a) * r + center.y;
+    return new _Vector(x, y, center.z);
   }
 };
-var Time_default = Time;
+var Vector_default = Vector;
 
 // src/elements/Text.tsx
 var Text = class {
@@ -1186,139 +1271,1513 @@ var Thing = class {
 };
 var Thing_default = Thing;
 
-// src/KlintFunctions.tsx
-var KlintCoreFunctions = {
-  saveCanvas: (ctx) => () => {
-    const link = document.createElement("a");
-    link.download = "canvas.png";
-    link.href = ctx.canvas.toDataURL();
-    link.click();
-  },
-  fullscreen: (ctx) => () => {
-    ctx.canvas.requestFullscreen?.();
-  },
-  play: (ctx) => () => {
-    if (!ctx.__isPlaying) ctx.__isPlaying = true;
-  },
-  pause: (ctx) => () => {
-    if (ctx.__isPlaying) ctx.__isPlaying = false;
-  },
-  // 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;
+// src/elements/Grid.tsx
+var Grid = class {
+  /**
+   * Creates a new Grid instance
+   * @param ctx - The Klint context
+   */
+  constructor(ctx) {
+    this.context = ctx;
+  }
+  /**
+   * Create a rectangular grid of points
+   * @param x - X position of the grid
+   * @param y - Y position of the grid
+   * @param width - Width of the grid
+   * @param height - Height of the grid
+   * @param countX - Number of points horizontally
+   * @param countY - Number of points vertically
+   * @param options - Grid options
+   * @returns Array of grid points
+   */
+  rect(x, y, width, height, countX, countY, options) {
+    const origin = options?.origin || "corner";
+    const points = [];
+    let startX = x;
+    let startY = y;
+    if (origin === "center") {
+      startX = x - width / 2;
+      startY = y - height / 2;
     }
-    return element;
-  },
-  passImages: () => (elements) => {
-    return elements.map((element) => {
-      if (!element.complete) {
-        console.warn("Image passed to passImages() is not fully loaded");
-        return null;
+    const spacingX = countX > 1 ? width / (countX - 1) : 0;
+    const spacingY = countY > 1 ? height / (countY - 1) : 0;
+    for (let j = 0; j < countY; j++) {
+      for (let i = 0; i < countX; i++) {
+        const pointX = startX + i * spacingX;
+        const pointY = startY + j * spacingY;
+        const id = j * countX + i;
+        points.push({
+          x: pointX,
+          y: pointY,
+          i,
+          j,
+          id
+        });
       }
-      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;
-  },
-  createOffscreen: (ctx) => (id, width, height, options, callback) => {
-    const offscreen = document.createElement("canvas");
-    offscreen.width = width * ctx.__dpr;
-    offscreen.height = height * ctx.__dpr;
-    const context = offscreen.getContext("2d", {
-      alpha: options?.alpha ?? true,
-      willReadFrequently: options?.willreadfrequently ?? false
-    });
-    if (!context) throw new Error("Failed to create offscreen context");
-    context.__dpr = ctx.__dpr;
-    context.width = width * ctx.__dpr;
-    context.height = height * ctx.__dpr;
-    context.__isMainContext = false;
-    context.__imageOrigin = "corner";
-    context.__rectangleOrigin = "corner";
-    context.__canvasOrigin = "corner";
-    context.__textFont = "sans-serif";
-    context.__textWeight = "normal";
-    context.__textStyle = "normal";
-    context.__textSize = 120;
-    context.__textAlignment = {
-      horizontal: "left",
-      vertical: "top"
-    };
-    if (!options?.ignoreFunctions) {
-      context.Color = ctx.Color;
-      context.createVector = (x = 0, y = 0) => new Vector_default(x, y);
-      context.Easing = ctx.Easing;
-      context.Text = ctx.Text;
-      Object.entries(KlintFunctions).forEach(([name, fn]) => {
-        context[name] = fn(context);
+    }
+    return points;
+  }
+  /**
+   * Create a radial grid of points
+   * @param x - Center X position
+   * @param y - Center Y position
+   * @param radius - Maximum radius
+   * @param count - Number of points per ring
+   * @param ringCount - Number of rings
+   * @param ringSpace - Space between rings
+   * @param options - Grid options
+   * @returns Array of grid points
+   */
+  radial(x, y, radius, count, ringCount, ringSpace, options) {
+    const perStepCount = options?.perStepCount || 0;
+    const points = [];
+    let id = 0;
+    for (let ring = 0; ring < ringCount; ring++) {
+      const ringRadius = ring * ringSpace;
+      if (ringRadius > radius) break;
+      const ringPointCount = count + perStepCount * ring;
+      for (let i = 0; i < ringPointCount; i++) {
+        const angle = Math.PI * 2 * i / ringPointCount;
+        const pointX = x + Math.cos(angle) * ringRadius;
+        const pointY = y + Math.sin(angle) * ringRadius;
+        points.push({
+          x: pointX,
+          y: pointY,
+          i,
+          j: ring,
+          id: id++
+        });
+      }
+    }
+    if (ringCount > 0 && points.length === 0) {
+      points.push({
+        x,
+        y,
+        i: 0,
+        j: 0,
+        id: 0
       });
     }
-    if (options?.origin) {
-      context.__canvasOrigin = options.origin;
-      if (options.origin === "center") {
-        context.translate(context.width * 0.5, context.height * 0.5);
+    return points;
+  }
+  /**
+   * Create a hexagonal grid of points
+   * @param x - X position of the grid
+   * @param y - Y position of the grid
+   * @param width - Width of the grid area
+   * @param height - Height of the grid area
+   * @param size - Size of each hexagon
+   * @param options - Grid options
+   * @returns Array of grid points
+   */
+  hex(x, y, width, height, size, options) {
+    const origin = options?.origin || "corner";
+    const pointy = options?.pointy !== false;
+    const points = [];
+    let startX = x;
+    let startY = y;
+    if (origin === "center") {
+      startX = x - width / 2;
+      startY = y - height / 2;
+    }
+    const hexWidth = pointy ? Math.sqrt(3) * size : 2 * size;
+    const hexHeight = pointy ? 2 * size : Math.sqrt(3) * size;
+    const cols = Math.ceil(width / hexWidth) + 1;
+    const rows = Math.ceil(height / (hexHeight * 0.75)) + 1;
+    let id = 0;
+    for (let j = 0; j < rows; j++) {
+      for (let i = 0; i < cols; i++) {
+        let pointX;
+        let pointY;
+        if (pointy) {
+          pointX = startX + i * hexWidth;
+          pointY = startY + j * hexHeight * 0.75;
+          if (j % 2 === 1) {
+            pointX += hexWidth / 2;
+          }
+        } else {
+          pointX = startX + i * hexWidth * 0.75;
+          pointY = startY + j * hexHeight;
+          if (i % 2 === 1) {
+            pointY += hexHeight / 2;
+          }
+        }
+        if (pointX <= startX + width && pointY <= startY + height) {
+          points.push({
+            x: pointX,
+            y: pointY,
+            i,
+            j,
+            id: id++
+          });
+        }
       }
     }
-    if (callback) {
-      callback(context);
+    return points;
+  }
+  /**
+   * Create a triangular grid of points
+   * @param x - X position of the grid
+   * @param y - Y position of the grid
+   * @param width - Width of the grid
+   * @param height - Height of the grid
+   * @param size - Size of each triangle
+   * @param options - Grid options
+   * @returns Array of grid points
+   */
+  triangle(x, y, width, height, size, options) {
+    const origin = options?.origin || "corner";
+    const points = [];
+    let startX = x;
+    let startY = y;
+    if (origin === "center") {
+      startX = x - width / 2;
+      startY = y - height / 2;
     }
-    if (options?.static === "true") {
-      const base64 = offscreen.toDataURL();
-      const img = new Image();
-      img.src = base64;
-      ctx.__offscreens.set(id, img);
-      return img;
+    const triHeight = Math.sqrt(3) / 2 * size;
+    const cols = Math.ceil(width / (size / 2)) + 1;
+    const rows = Math.ceil(height / triHeight) + 1;
+    let id = 0;
+    for (let j = 0; j < rows; j++) {
+      for (let i = 0; i < cols; i++) {
+        const pointX = startX + i * (size / 2);
+        const pointY = startY + j * triHeight;
+        if (pointX <= startX + width && pointY <= startY + height) {
+          points.push({
+            x: pointX,
+            y: pointY,
+            i,
+            j,
+            id: id++
+          });
+        }
+      }
     }
-    ctx.__offscreens.set(id, context);
-    return context;
-  },
-  getOffscreen: (ctx) => (id) => {
-    const offscreen = ctx.__offscreens.get(id);
-    if (!offscreen)
-      throw new Error(`No offscreen context found with id: ${id}`);
-    return offscreen;
+    return points;
   }
 };
-var KlintFunctions = {
-  extend: (ctx) => (name, data, enforceReplace = false) => {
-    if (name in ctx && !enforceReplace) return;
-    ctx[name] = data;
-  },
-  background: (ctx) => (color) => {
-    ctx.resetTransform();
-    ctx.push();
-    if (color && color !== "transparent") {
-      ctx.fillStyle = color;
-      ctx.fillRect(0, 0, ctx.width, ctx.height);
-    } else {
-      ctx.clearRect(0, 0, ctx.width, ctx.height);
+var Grid_default = Grid;
+
+// src/elements/Strip.tsx
+var Strip = class {
+  /**
+   * Creates a new Strip instance
+   * @param ctx - The Klint context
+   */
+  constructor(ctx) {
+    this.context = ctx;
+  }
+  /**
+   * Create a strip of triangles from points
+   * Points are connected in a zigzag pattern:
+   * 0 - 2 - 4 ...
+   * | / | / |
+   * 1 - 3 - 5 ...
+   * 
+   * @param points - Array of points (must be even number for complete triangles)
+   * @param draw - Optional callback to customize each triangle's appearance
+   */
+  triangles(points, draw) {
+    if (points.length < 3) return;
+    const numTriangles = Math.floor((points.length - 2) * 2);
+    for (let i = 0; i < numTriangles; i++) {
+      const baseIndex = Math.floor(i / 2) * 2;
+      const isEven = i % 2 === 0;
+      let p1;
+      let p2;
+      let p3;
+      if (isEven) {
+        p1 = points[baseIndex];
+        p2 = points[baseIndex + 1];
+        p3 = points[baseIndex + 2];
+      } else {
+        p1 = points[baseIndex + 1];
+        p2 = points[baseIndex + 3];
+        p3 = points[baseIndex + 2];
+      }
+      if (!p1 || !p2 || !p3) continue;
+      const center = {
+        x: (p1.x + p2.x + p3.x) / 3,
+        y: (p1.y + p2.y + p3.y) / 3
+      };
+      const triangle = {
+        id: i,
+        center,
+        points: [p1, p2, p3]
+      };
+      let fillColor;
+      if (draw) {
+        const result = draw(triangle);
+        if (typeof result === "string") {
+          fillColor = result;
+        }
+      }
+      this.context.beginPath();
+      this.context.moveTo(p1.x, p1.y);
+      this.context.lineTo(p2.x, p2.y);
+      this.context.lineTo(p3.x, p3.y);
+      this.context.closePath();
+      if (fillColor) {
+        const prevFill = this.context.fillStyle;
+        this.context.fillStyle = fillColor;
+        this.context.fill();
+        this.context.fillStyle = prevFill;
+      } else if (this.context.checkTransparency("fill")) {
+        this.context.fill();
+      }
+      if (this.context.checkTransparency("stroke")) {
+        this.context.stroke();
+      }
     }
-    ctx.pop();
-    if (ctx.__canvasOrigin === "center")
-      ctx.translate(ctx.width * 0.5, ctx.height * 0.5);
-  },
-  reset: (ctx) => () => {
-    ctx.clearRect(0, 0, ctx.width, ctx.height);
+  }
+  /**
+   * Create a strip of quads from points
+   * Points are connected in a grid pattern:
+   * 0 - 2 - 4 ...
+   * |   |   |
+   * 1 - 3 - 5 ...
+   * 
+   * @param points - Array of points (must be even number for complete quads)
+   * @param draw - Optional callback to customize each quad's appearance
+   */
+  quads(points, draw) {
+    if (points.length < 4) return;
+    const numQuads = Math.floor((points.length - 2) / 2);
+    for (let i = 0; i < numQuads; i++) {
+      const baseIndex = i * 2;
+      const p1 = points[baseIndex];
+      const p2 = points[baseIndex + 1];
+      const p3 = points[baseIndex + 3];
+      const p4 = points[baseIndex + 2];
+      if (!p1 || !p2 || !p3 || !p4) continue;
+      const center = {
+        x: (p1.x + p2.x + p3.x + p4.x) / 4,
+        y: (p1.y + p2.y + p3.y + p4.y) / 4
+      };
+      const quad = {
+        id: i,
+        center,
+        points: [p1, p2, p3, p4]
+      };
+      let fillColor;
+      if (draw) {
+        const result = draw(quad);
+        if (typeof result === "string") {
+          fillColor = result;
+        }
+      }
+      this.context.beginPath();
+      this.context.moveTo(p1.x, p1.y);
+      this.context.lineTo(p2.x, p2.y);
+      this.context.lineTo(p3.x, p3.y);
+      this.context.lineTo(p4.x, p4.y);
+      this.context.closePath();
+      if (fillColor) {
+        const prevFill = this.context.fillStyle;
+        this.context.fillStyle = fillColor;
+        this.context.fill();
+        this.context.fillStyle = prevFill;
+      } else if (this.context.checkTransparency("fill")) {
+        this.context.fill();
+      }
+      if (this.context.checkTransparency("stroke")) {
+        this.context.stroke();
+      }
+    }
+  }
+  /**
+   * Create a single hull shape from points
+   * Points are connected following the winding order:
+   * 0 - 2 - 4 - ... n-1
+   * |                 |
+   * 1 - 3 - 5 - ... n
+   * 
+   * Final order: 0 - 2 - 4 ... n-1, n, ... 5 - 3 - 1
+   * 
+   * @param points - Array of points
+   * @param draw - Optional callback to add elements along the hull
+   */
+  hull(points, draw) {
+    if (points.length < 2) return;
+    const hullPath = [];
+    for (let i = 0; i < points.length; i += 2) {
+      hullPath.push(points[i]);
+    }
+    for (let i = points.length - 1 - points.length % 2; i >= 1; i -= 2) {
+      hullPath.push(points[i]);
+    }
+    this.context.beginPath();
+    this.context.moveTo(hullPath[0].x, hullPath[0].y);
+    for (let i = 1; i < hullPath.length; i++) {
+      this.context.lineTo(hullPath[i].x, hullPath[i].y);
+    }
+    this.context.closePath();
+    if (this.context.checkTransparency("fill")) {
+      this.context.fill();
+    }
+    if (this.context.checkTransparency("stroke")) {
+      this.context.stroke();
+    }
+    if (draw) {
+      const numPairs = Math.floor(points.length / 2);
+      for (let i = 0; i < numPairs; i++) {
+        const topPoint = points[i * 2];
+        const bottomPoint = points[i * 2 + 1];
+        if (topPoint && bottomPoint) {
+          const center = {
+            x: (topPoint.x + bottomPoint.x) / 2,
+            y: (topPoint.y + bottomPoint.y) / 2
+          };
+          const hull = {
+            id: i,
+            center
+          };
+          draw(hull);
+        }
+      }
+    }
+  }
+  /**
+   * Create a ribbon/tape effect from points
+   * Similar to hull but with configurable width
+   * 
+   * @param points - Array of center points
+   * @param width - Width of the ribbon
+   * @param draw - Optional callback
+   */
+  ribbon(points, width, draw) {
+    if (points.length < 2) return;
+    const offsetPoints = [];
+    for (let i = 0; i < points.length; i++) {
+      const curr = points[i];
+      const prev = points[i - 1] || curr;
+      const next = points[i + 1] || curr;
+      const dx = next.x - prev.x;
+      const dy = next.y - prev.y;
+      const len = Math.sqrt(dx * dx + dy * dy) || 1;
+      const perpX = -dy / len * (width / 2);
+      const perpY = dx / len * (width / 2);
+      offsetPoints.push({
+        top: { x: curr.x + perpX, y: curr.y + perpY },
+        bottom: { x: curr.x - perpX, y: curr.y - perpY }
+      });
+    }
+    this.context.beginPath();
+    this.context.moveTo(offsetPoints[0].top.x, offsetPoints[0].top.y);
+    for (let i = 1; i < offsetPoints.length; i++) {
+      this.context.lineTo(offsetPoints[i].top.x, offsetPoints[i].top.y);
+    }
+    for (let i = offsetPoints.length - 1; i >= 0; i--) {
+      this.context.lineTo(offsetPoints[i].bottom.x, offsetPoints[i].bottom.y);
+    }
+    this.context.closePath();
+    if (this.context.checkTransparency("fill")) {
+      this.context.fill();
+    }
+    if (this.context.checkTransparency("stroke")) {
+      this.context.stroke();
+    }
+    if (draw) {
+      for (let i = 0; i < points.length - 1; i++) {
+        const center = {
+          x: (points[i].x + points[i + 1].x) / 2,
+          y: (points[i].y + points[i + 1].y) / 2
+        };
+        const result = draw({ id: i, center });
+        if (typeof result === "string") {
+          this.context.beginPath();
+          this.context.moveTo(offsetPoints[i].top.x, offsetPoints[i].top.y);
+          this.context.lineTo(offsetPoints[i + 1].top.x, offsetPoints[i + 1].top.y);
+          this.context.lineTo(offsetPoints[i + 1].bottom.x, offsetPoints[i + 1].bottom.y);
+          this.context.lineTo(offsetPoints[i].bottom.x, offsetPoints[i].bottom.y);
+          this.context.closePath();
+          const prevFill = this.context.fillStyle;
+          this.context.fillStyle = result;
+          this.context.fill();
+          this.context.fillStyle = prevFill;
+        }
+      }
+    }
+  }
+};
+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();
+  }
+  /**
+   * 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;
+    }
+  }
+  /**
+   * Seeded random number generator
+   */
+  random() {
+    const x = Math.sin(this.currentSeed++) * 1e4;
+    return x - Math.floor(x);
+  }
+  /**
+   * 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) {
+    return t * t * t * (t * (t * 6 - 15) + 10);
+  }
+  /**
+   * Linear interpolation
+   */
+  lerp(t, a, b) {
+    return a + t * (b - a);
+  }
+  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))
+        ),
+        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))
+        )
+      );
+      return x1;
+    } else {
+      return this.perlin(x, y, z) * 0.5 + this.perlin(x + w, y + w, z + w) * 0.5;
+    }
+  }
+  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) {
+        i1 = 1;
+        j1 = 0;
+      } 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);
+      }
+      let t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
+      if (t2 < 0) {
+        n2 = 0;
+      } else {
+        t2 *= t2;
+        n2 = t2 * t2 * this.dot3(this.grad3[gi2], x2, y2, z2);
+      }
+      let t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
+      if (t3 < 0) {
+        n3 = 0;
+      } else {
+        t3 *= t3;
+        n3 = t3 * t3 * this.dot3(this.grad3[gi3], x3, y3, z3);
+      }
+      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;
+    }
+  }
+  /**
+   * 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;
+  }
+  hash(x, y, z, w) {
+    let n = 0;
+    if (y === void 0) {
+      n = Math.sin(x * 12.9898 + this.currentSeed) * 43758.5453;
+    } else if (z === void 0) {
+      n = Math.sin(x * 12.9898 + y * 78.233 + this.currentSeed) * 43758.5453;
+    } else if (w === void 0) {
+      n = Math.sin(x * 12.9898 + y * 78.233 + z * 37.719 + this.currentSeed) * 43758.5453;
+    } else {
+      n = Math.sin(x * 12.9898 + y * 78.233 + z * 37.719 + w * 59.1337 + this.currentSeed) * 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;
+  }
+};
+var Noise_default = Noise;
+
+// src/elements/Hotspot.tsx
+var Hotspot = class {
+  /**
+   * Creates a new Hotspot instance
+   * @param ctx - The Klint context
+   */
+  constructor(ctx) {
+    this.context = ctx;
+  }
+  /**
+   * Check if point is inside a circle
+   * @param point - Point to check (usually mouse position)
+   * @param x - Circle center X
+   * @param y - Circle center Y
+   * @param radius - Circle radius
+   * @returns True if point is inside the circle
+   */
+  circle(point, x, y, radius) {
+    const dx = point.x - x;
+    const dy = point.y - y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    return distance <= radius;
+  }
+  /**
+   * Check if point is inside a rectangle
+   * @param point - Point to check (usually mouse position)
+   * @param x - Rectangle X position
+   * @param y - Rectangle Y position
+   * @param width - Rectangle width
+   * @param height - Rectangle height
+   * @returns True if point is inside the rectangle
+   */
+  rect(point, x, y, width, height) {
+    const origin = this.context.__rectangleOrigin || "corner";
+    let left, top;
+    if (origin === "center") {
+      left = x - width / 2;
+      top = y - height / 2;
+    } else {
+      left = x;
+      top = y;
+    }
+    const right = left + width;
+    const bottom = top + height;
+    return point.x >= left && point.x <= right && point.y >= top && point.y <= bottom;
+  }
+  /**
+   * Check if point is inside an ellipse
+   * @param point - Point to check
+   * @param x - Ellipse center X
+   * @param y - Ellipse center Y
+   * @param radiusX - Horizontal radius
+   * @param radiusY - Vertical radius
+   * @param rotation - Rotation angle in radians
+   * @returns True if point is inside the ellipse
+   */
+  ellipse(point, x, y, radiusX, radiusY, rotation = 0) {
+    const cos = Math.cos(-rotation);
+    const sin = Math.sin(-rotation);
+    const dx = point.x - x;
+    const dy = point.y - y;
+    const localX = dx * cos - dy * sin;
+    const localY = dx * sin + dy * cos;
+    return localX * localX / (radiusX * radiusX) + localY * localY / (radiusY * radiusY) <= 1;
+  }
+  /**
+   * Check if point is inside a polygon
+   * @param point - Point to check
+   * @param vertices - Array of polygon vertices
+   * @returns True if point is inside the polygon
+   */
+  polygon(point, vertices) {
+    let inside = false;
+    const n = vertices.length;
+    for (let i = 0, j = n - 1; i < n; j = i++) {
+      const xi = vertices[i].x, yi = vertices[i].y;
+      const xj = vertices[j].x, yj = vertices[j].y;
+      const intersect = yi > point.y !== yj > point.y && point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi;
+      if (intersect) inside = !inside;
+    }
+    return inside;
+  }
+  /**
+   * Check if point is inside a Path2D
+   * @param point - Point to check
+   * @param path - Path2D object
+   * @returns True if point is inside the path
+   */
+  path(point, path) {
+    return this.context.isPointInPath(path, point.x, point.y);
+  }
+};
+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;
+  }
+  /**
+   * Batch multiple canvas operations together for better performance
+   */
+  batchDraw(drawFn) {
+    this.context.save();
+    this.context.beginPath();
+    try {
+      drawFn();
+    } finally {
+      this.context.restore();
+    }
+  }
+  /**
+   * 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);
+      }
+    }
+  }
+  /**
+   * 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;
+  }
+  /**
+   * 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();
+      }
+    };
+  }
+  /**
+   * 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);
+      }
+    }
+    return this.textMetricsCache.get(cacheKey);
+  }
+  /**
+   * Clear all performance caches
+   */
+  clearCaches() {
+    this.textMetricsCache.clear();
+  }
+  /**
+   * Get current performance metrics
+   */
+  getMetrics() {
+    return this.context.__performance || null;
+  }
+  /**
+   * 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();
+      }
+    }
+    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 (showMemory && metrics.memoryUsage !== void 0) {
+      this.context.fillStyle = textColor;
+      this.context.fillText(`Memory: ${metrics.memoryUsage.toFixed(2)}MB`, x + 8, currentY);
+      currentY += fontSize + 4;
+    }
+    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();
+    }
+    this.context.restore();
+  }
+  /**
+   * Alias for render() - shows performance widget
+   */
+  show(options) {
+    this.render(options);
+  }
+};
+var Performance_default = Performance;
+
+// src/elements/SSR.tsx
+var SSR = class {
+  constructor(ctx) {
+    this.context = ctx || null;
+  }
+  /**
+   * Render a Klint sketch to a static image (base64 data URL)
+   */
+  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."
+    );
+  }
+  /**
+   * Generate a static image URL for a Klint sketch
+   */
+  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);
+  }
+  /**
+   * Check if Klint can run in the current environment
+   */
+  canRender() {
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+      return true;
+    }
+    try {
+      require("canvas");
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  /**
+   * Render in browser environment (client-side)
+   */
+  async renderInBrowser(draw, options) {
+    return new Promise((resolve, reject) => {
+      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;
+        }
+        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;
+      },
+      strokeColor: (color) => {
+        ctx.strokeStyle = color;
+      },
+      circle: (x, y, radius) => {
+        ctx.beginPath();
+        ctx.arc(x, y, radius, 0, Math.PI * 2);
+        ctx.fill();
+      },
+      rectangle: (x, y, w, h) => {
+        ctx.fillRect(x, y, w, h || w);
+      },
+      // Time properties (static for server rendering)
+      frame: 0,
+      time: 0,
+      deltaTime: 0,
+      fps: 60
+    };
+  }
+};
+var SSR_default = SSR;
+
+// src/KlintFunctions.tsx
+var KlintCoreFunctions = {
+  saveCanvas: (ctx) => () => {
+    const link = document.createElement("a");
+    link.download = "canvas.png";
+    link.href = ctx.canvas.toDataURL();
+    link.click();
+  },
+  fullscreen: (ctx) => () => {
+    ctx.canvas.requestFullscreen?.();
+  },
+  play: (ctx) => () => {
+    if (!ctx.__isPlaying) ctx.__isPlaying = true;
+  },
+  pause: (ctx) => () => {
+    if (ctx.__isPlaying) ctx.__isPlaying = false;
+  },
+  // 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;
+  },
+  createOffscreen: (ctx) => (id, width, height, options, callback) => {
+    const offscreen = document.createElement("canvas");
+    offscreen.width = width * ctx.__dpr;
+    offscreen.height = height * ctx.__dpr;
+    const context = offscreen.getContext("2d", {
+      alpha: options?.alpha ?? true,
+      willReadFrequently: options?.willreadfrequently ?? false
+    });
+    if (!context) throw new Error("Failed to create offscreen context");
+    context.__dpr = ctx.__dpr;
+    context.width = width * ctx.__dpr;
+    context.height = height * ctx.__dpr;
+    context.__isMainContext = false;
+    context.__imageOrigin = "corner";
+    context.__rectangleOrigin = "corner";
+    context.__canvasOrigin = "corner";
+    context.__textFont = "sans-serif";
+    context.__textWeight = "normal";
+    context.__textStyle = "normal";
+    context.__textSize = 120;
+    context.__textLeading = void 0;
+    context.__textAlignment = {
+      horizontal: "left",
+      vertical: "top"
+    };
+    context.__fillRule = "nonzero";
+    if (!options?.ignoreFunctions) {
+      context.Color = ctx.Color;
+      context.createVector = (x = 0, y = 0) => new Vector_default(x, y);
+      context.Easing = ctx.Easing;
+      context.Text = ctx.Text;
+      Object.entries(KlintFunctions).forEach(([name, fn]) => {
+        context[name] = fn(context);
+      });
+    }
+    if (options?.origin) {
+      context.__canvasOrigin = options.origin;
+      if (options.origin === "center") {
+        context.translate(context.width * 0.5, context.height * 0.5);
+      }
+    }
+    if (callback) {
+      callback(context);
+    }
+    if (options?.static === "true") {
+      const base64 = offscreen.toDataURL();
+      const img = new Image();
+      img.src = base64;
+      ctx.__offscreens.set(id, img);
+      return img;
+    }
+    ctx.__offscreens.set(id, context);
+    return context;
+  },
+  getOffscreen: (ctx) => (id) => {
+    const offscreen = ctx.__offscreens.get(id);
+    if (!offscreen)
+      throw new Error(`No offscreen context found with id: ${id}`);
+    return offscreen;
+  }
+};
+var KlintFunctions = {
+  extend: (ctx) => (name, data, enforceReplace = false) => {
+    if (name in ctx && !enforceReplace) return;
+    ctx[name] = data;
+  },
+  background: (ctx) => (color) => {
+    ctx.resetTransform();
+    ctx.push();
+    if (color && color !== "transparent") {
+      ctx.fillStyle = color;
+      ctx.fillRect(0, 0, ctx.width, ctx.height);
+    } else {
+      ctx.clearRect(0, 0, ctx.width, ctx.height);
+    }
+    ctx.pop();
+    if (ctx.__canvasOrigin === "center")
+      ctx.translate(ctx.width * 0.5, ctx.height * 0.5);
+  },
+  reset: (ctx) => () => {
+    ctx.clearRect(0, 0, ctx.width, ctx.height);
     ctx.resetTransform();
   },
   clear: (ctx) => () => {
@@ -1365,9 +2824,12 @@ var KlintFunctions = {
     return true;
   },
   drawIfVisible: (ctx) => () => {
-    if (ctx.checkTransparency("fill")) ctx.fill();
+    if (ctx.checkTransparency("fill")) ctx.fill(ctx.__fillRule || "nonzero");
     if (ctx.checkTransparency("stroke")) ctx.stroke();
   },
+  fillRule: (ctx) => (rule) => {
+    ctx.__fillRule = rule;
+  },
   line: (ctx) => (x1, y1, x2, y2) => {
     if (!ctx.checkTransparency("stroke")) return;
     ctx.beginPath();
@@ -1429,17 +2891,29 @@ var KlintFunctions = {
     ctx.__currentContours = [];
   },
   beginContour: (ctx) => () => {
-    if (!ctx.__startedShape) return;
-    if (ctx.__startedContour && ctx.__currentContour?.length) {
-      ctx.__currentContours?.push([...ctx.__currentContour]);
-    }
+    if (!ctx.__startedShape || ctx.__startedContour) return;
     ctx.__startedContour = true;
     ctx.__currentContour = [];
   },
   vertex: (ctx) => (x, y) => {
     if (!ctx.__startedShape) return;
     const points = ctx.__startedContour ? ctx.__currentContour : ctx.__currentShape;
-    points?.push([x, y]);
+    points?.push({ type: "line", x, y });
+  },
+  bezierVertex: (ctx) => (cp1x, cp1y, cp2x, cp2y, x, y) => {
+    if (!ctx.__startedShape) return;
+    const points = ctx.__startedContour ? ctx.__currentContour : ctx.__currentShape;
+    points?.push({ type: "bezier", cp1x, cp1y, cp2x, cp2y, x, y });
+  },
+  quadraticVertex: (ctx) => (cpx, cpy, x, y) => {
+    if (!ctx.__startedShape) return;
+    const points = ctx.__startedContour ? ctx.__currentContour : ctx.__currentShape;
+    points?.push({ type: "quadratic", cpx, cpy, x, y });
+  },
+  arcVertex: (ctx) => (x1, y1, x2, y2, radius) => {
+    if (!ctx.__startedShape) return;
+    const points = ctx.__startedContour ? ctx.__currentContour : ctx.__currentShape;
+    points?.push({ type: "arc", x1, y1, x2, y2, radius });
   },
   endContour: (ctx) => (forceRevert = true) => {
     if (!ctx.__startedContour || !ctx.__currentContour?.length) return;
@@ -1457,17 +2931,38 @@ var KlintFunctions = {
     const points = ctx.__currentShape;
     if (!points?.length) return;
     const drawPath = (points2, close2 = false) => {
-      ctx.moveTo(points2[0][0], points2[0][1]);
-      for (let i = 1; i < points2.length; i++) {
-        ctx.lineTo(points2[i][0], points2[i][1]);
-      }
-      if (close2) {
-        const [firstX, firstY] = points2[0];
-        const lastPoint = points2[points2.length - 1];
-        if (lastPoint[0] !== firstX || lastPoint[1] !== firstY) {
-          ctx.lineTo(firstX, firstY);
+      if (points2.length === 0) return;
+      const firstPoint = points2[0];
+      const startX = firstPoint.type === "line" ? firstPoint.x : firstPoint.type === "bezier" ? firstPoint.x : firstPoint.type === "quadratic" ? firstPoint.x : firstPoint.x2;
+      const startY = firstPoint.type === "line" ? firstPoint.y : firstPoint.type === "bezier" ? firstPoint.y : firstPoint.type === "quadratic" ? firstPoint.y : firstPoint.y2;
+      ctx.moveTo(startX, startY);
+      for (let i = 0; i < points2.length; i++) {
+        const point = points2[i];
+        switch (point.type) {
+          case "line":
+            if (i > 0) ctx.lineTo(point.x, point.y);
+            break;
+          case "bezier":
+            ctx.bezierCurveTo(
+              point.cp1x,
+              point.cp1y,
+              point.cp2x,
+              point.cp2y,
+              point.x,
+              point.y
+            );
+            break;
+          case "quadratic":
+            ctx.quadraticCurveTo(point.cpx, point.cpy, point.x, point.y);
+            break;
+          case "arc":
+            ctx.arcTo(point.x1, point.y1, point.x2, point.y2, point.radius);
+            break;
         }
       }
+      if (close2 && points2.length > 1) {
+        ctx.closePath();
+      }
     };
     ctx.beginPath();
     drawPath(points, close);
@@ -1491,6 +2986,9 @@ var KlintFunctions = {
   addColorStop: () => (gradient, offset = 0, color = "#000") => {
     return gradient.addColorStop(offset, color);
   },
+  PI: () => Math.PI,
+  TWO_PI: () => Math.PI * 2,
+  TAU: () => Math.PI * 2,
   constrain: () => (val, floor, ceil) => {
     return Math.max(floor, Math.min(val, ceil));
   },
@@ -1528,6 +3026,14 @@ var KlintFunctions = {
     const t = (n - A) / (B - A);
     return ctx.lerp(C, D, t, bounded);
   },
+  bezierLerp: () => (a, b, c, d, t) => {
+    const u = 1 - t;
+    return u * u * u * a + 3 * u * u * t * b + 3 * u * t * t * c + t * t * t * d;
+  },
+  bezierTangent: () => (a, b, c, d, t) => {
+    const u = 1 - t;
+    return 3 * d * t * t - 3 * c * t * t + 6 * c * u * t - 6 * b * u * t + 3 * b * u * u - 3 * a * u * u;
+  },
   textFont: (ctx) => (font) => {
     ctx.__textFont = font;
   },
@@ -1563,7 +3069,8 @@ var KlintFunctions = {
     ctx.__textAlignment.vertical = vertical ?? ctx.__textAlignment.vertical;
   },
   textLeading: (ctx) => (spacing) => {
-    ctx.lineHeight = `${spacing}px`;
+    ctx.__textLeading = spacing;
+    return ctx.__textLeading;
   },
   computeFont: (ctx) => () => {
     ctx.computeTextStyle();
@@ -1582,10 +3089,110 @@ var KlintFunctions = {
     if (ctx.textBaseline !== ctx.__textAlignment.vertical) {
       ctx.textBaseline = ctx.__textAlignment.vertical;
     }
-    if (ctx.checkTransparency("fill"))
-      ctx.fillText(String(text), x, y, maxWidth);
-    if (ctx.checkTransparency("stroke"))
-      ctx.strokeText(String(text), x, y, maxWidth);
+    const textString = String(text);
+    if (textString.includes("\n")) {
+      const lines = textString.split("\n");
+      const firstLineMetrics = ctx.measureText(lines[0] || "M");
+      const defaultLineHeight = firstLineMetrics.actualBoundingBoxAscent + firstLineMetrics.actualBoundingBoxDescent;
+      const lineHeight = ctx.__textLeading ?? ctx.__textSize * 1.2;
+      const totalHeight = lines.length * lineHeight - (lineHeight - defaultLineHeight);
+      let startY = y;
+      if (ctx.__textAlignment.vertical === "middle") {
+        startY = y - totalHeight / 2 + defaultLineHeight / 2;
+      } else if (ctx.__textAlignment.vertical === "bottom") {
+        startY = y - totalHeight + defaultLineHeight;
+      } else if (ctx.__textAlignment.vertical === "top") {
+        startY = y + defaultLineHeight / 2;
+      }
+      lines.forEach((line, index) => {
+        const lineY = startY + index * lineHeight;
+        if (ctx.checkTransparency("fill"))
+          ctx.fillText(line, x, lineY, maxWidth);
+        if (ctx.checkTransparency("stroke"))
+          ctx.strokeText(line, x, lineY, maxWidth);
+      });
+    } else {
+      if (ctx.checkTransparency("fill"))
+        ctx.fillText(textString, x, y, maxWidth);
+      if (ctx.checkTransparency("stroke"))
+        ctx.strokeText(textString, x, y, maxWidth);
+    }
+  },
+  paragraph: (ctx) => (text, x, y, width, options) => {
+    if (text === void 0) return;
+    ctx.computeFont();
+    const textString = String(text);
+    const justification = options?.justification || "left";
+    const overflow = options?.overflow || 0;
+    const breakMode = options?.break || "words";
+    const originalAlign = ctx.textAlign;
+    const originalBaseline = ctx.textBaseline;
+    if (justification === "center") {
+      ctx.textAlign = "center";
+    } else if (justification === "right") {
+      ctx.textAlign = "right";
+    } else {
+      ctx.textAlign = "left";
+    }
+    ctx.textBaseline = "top";
+    const tokens = breakMode === "letters" ? textString.split("") : textString.split(/\s+/);
+    const lines = [];
+    let currentLine = "";
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i];
+      const testLine = currentLine ? breakMode === "letters" ? currentLine + token : currentLine + " " + token : token;
+      const metrics = ctx.measureText(testLine);
+      if (metrics.width > width && currentLine !== "") {
+        lines.push(currentLine);
+        currentLine = token;
+      } else {
+        currentLine = testLine;
+      }
+    }
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+    const lineHeight = ctx.__textLeading ?? ctx.__textSize * 1.2;
+    let linesToDraw = lines;
+    if (overflow > 0 && lines.length * lineHeight > overflow) {
+      const maxLines = Math.floor(overflow / lineHeight);
+      linesToDraw = lines.slice(0, maxLines);
+    }
+    linesToDraw.forEach((line, index) => {
+      const lineY = y + index * lineHeight;
+      let lineX = x;
+      if (justification === "center") {
+        lineX = x + width / 2;
+      } else if (justification === "right") {
+        lineX = x + width;
+      } else if (justification === "justified" && index < linesToDraw.length - 1) {
+        const words = line.split(/\s+/);
+        if (words.length > 1) {
+          const textWidth = ctx.measureText(words.join("")).width;
+          const totalSpaceWidth = width - textWidth;
+          const spaceWidth = totalSpaceWidth / (words.length - 1);
+          let currentX = x;
+          words.forEach((word, wordIndex) => {
+            if (ctx.checkTransparency("fill")) {
+              ctx.fillText(word, currentX, lineY);
+            }
+            if (ctx.checkTransparency("stroke")) {
+              ctx.strokeText(word, currentX, lineY);
+            }
+            currentX += ctx.measureText(word).width + spaceWidth;
+          });
+          return;
+        }
+      }
+      if (ctx.checkTransparency("fill")) {
+        ctx.fillText(line, lineX, lineY);
+      }
+      if (ctx.checkTransparency("stroke")) {
+        ctx.strokeText(line, lineX, lineY);
+      }
+    });
+    ctx.textAlign = originalAlign;
+    ctx.textBaseline = originalBaseline;
   },
   // DO NOT use putImageData for images you can draw : https://www.measurethat.net/Benchmarks/Show/9510/0/putimagedata-vs-drawimage
   image: (ctx) => (image, x, y, arg3, arg4, arg5, arg6, arg7, arg8) => {
@@ -1635,11 +3242,8 @@ var KlintFunctions = {
     return ctx.getImageData(0, 0, ctx.width, ctx.height);
   },
   updatePixels: (ctx) => (pixels) => {
-    const imageData = new ImageData(
-      pixels instanceof Uint8ClampedArray ? pixels : new Uint8ClampedArray(pixels),
-      ctx.width,
-      ctx.height
-    );
+    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) => {
@@ -1655,7 +3259,7 @@ var KlintFunctions = {
     ctx.globalAlpha = ctx.constrain(value, 0, 1);
   },
   blend: (ctx) => (blend) => {
-    ctx.globalCompositeOperation = blend;
+    ctx.globalCompositeOperation = blend === "default" ? "source-over" : blend;
   },
   setCanvasOrigin: (ctx) => (type) => {
     ctx.__canvasOrigin = type;
@@ -1693,10 +3297,73 @@ var KlintFunctions = {
     if (ctx.__canvasOrigin === "center") {
       ctx.translate(ctx.width * 0.5, ctx.height * 0.5);
     }
+  },
+  clipTo: (ctx) => (callback, fillRule) => {
+    const originalFill = ctx.fill;
+    const originalStroke = ctx.stroke;
+    const originalDrawIfVisible = ctx.drawIfVisible;
+    const originalBeginPath = ctx.beginPath;
+    ctx.fill = () => {
+    };
+    ctx.stroke = () => {
+    };
+    ctx.drawIfVisible = () => {
+    };
+    let allowBeginPath = true;
+    ctx.beginPath = () => {
+      if (allowBeginPath) {
+        originalBeginPath.call(ctx);
+        allowBeginPath = false;
+      }
+    };
+    ctx.beginPath();
+    callback(ctx);
+    ctx.clip(fillRule || ctx.__fillRule || "nonzero");
+    ctx.beginPath = originalBeginPath;
+    ctx.drawIfVisible = originalDrawIfVisible;
+    ctx.fill = originalFill;
+    ctx.stroke = originalStroke;
+  },
+  canIuseFilter: (ctx) => () => {
+    return ctx.filter !== void 0 && ctx.filter !== null;
+  },
+  blur: (ctx) => (radius) => {
+    if (ctx.filter === void 0 || ctx.filter === null) return;
+    ctx.filter = `blur(${radius}px)`;
+  },
+  SVGfilter: (ctx) => (url) => {
+    if (ctx.filter === void 0 || ctx.filter === null) return;
+    if (!url || !url.startsWith("url(")) return;
+    ctx.filter = url;
+  },
+  dropShadow: (ctx) => (offsetX, offsetY, blurRadius, color) => {
+    if (ctx.filter === void 0 || ctx.filter === null) return;
+    ctx.filter = `drop-shadow(${offsetX}px ${offsetY}px ${blurRadius}px ${color})`;
+  },
+  grayscale: (ctx) => (amount) => {
+    if (ctx.filter === void 0 || ctx.filter === null) return;
+    const value = ctx.constrain(amount, 0, 1);
+    ctx.filter = `grayscale(${value})`;
+  },
+  hue: (ctx) => (angle) => {
+    if (ctx.filter === void 0 || ctx.filter === null) return;
+    const degrees = angle * 180 / Math.PI;
+    ctx.filter = `hue-rotate(${degrees}deg)`;
+  },
+  invert: (ctx) => (amount) => {
+    if (ctx.filter === void 0 || ctx.filter === null) return;
+    const value = ctx.constrain(amount, 0, 1);
+    ctx.filter = `invert(${value})`;
+  },
+  filterOpacity: (ctx) => (value) => {
+    if (ctx.filter === void 0 || ctx.filter === null) return;
+    const amount = ctx.constrain(value, 0, 1);
+    ctx.filter = `opacity(${amount})`;
   }
 };
 
 // src/useKlint.tsx
+var import_meta2 = {};
 var DEFAULT_MOUSE_STATE = {
   x: 0,
   y: 0,
@@ -1730,13 +3397,50 @@ var DEFAULT_GESTURE_STATE = {
   lastX: 0,
   lastY: 0
 };
+var DEFAULT_KEYBOARD_STATE = {
+  pressedKeys: /* @__PURE__ */ new Set(),
+  modifiers: {
+    alt: false,
+    shift: false,
+    ctrl: false,
+    meta: false
+  },
+  lastKey: null,
+  lastKeyTime: 0
+};
 function useKlint() {
   const contextRef = (0, import_react2.useRef)(null);
   const mouseRef = (0, import_react2.useRef)(null);
   const scrollRef = (0, import_react2.useRef)(null);
   const gestureRef = (0, import_react2.useRef)(null);
+  const keyboardRef = (0, import_react2.useRef)(null);
   const useDev = () => {
-    return;
+    (0, import_react2.useEffect)(() => {
+      if (process.env.NODE_ENV === "development") {
+        if (typeof import_meta2 !== "undefined" && import_meta2.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);
+          }
+        }
+      }
+    }, []);
+    (0, import_react2.useEffect)(() => {
+      if (process.env.NODE_ENV === "development" && contextRef.current) {
+        console.log("[Klint] hot updated - clearing context state");
+        contextRef.current.__isReadyToDraw = true;
+      }
+    });
   };
   const KlintImage = () => {
     const imagesRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
@@ -1810,6 +3514,8 @@ function useKlint() {
       if (!contextRef.current?.canvas) return;
       const canvas = contextRef.current.canvas;
       const ctx = contextRef.current;
+      const controller = new AbortController();
+      const { signal } = controller;
       const updateMousePosition = (e) => {
         const rect = canvas.getBoundingClientRect();
         const dpr = window.devicePixelRatio || 1;
@@ -1848,20 +3554,13 @@ function useKlint() {
       const handleClick = (e) => {
         if (clickCallbackRef.current) clickCallbackRef.current(ctx, e);
       };
-      canvas.addEventListener("mousemove", updateMousePosition);
-      canvas.addEventListener("mousedown", handleMouseDown);
-      canvas.addEventListener("mouseup", handleMouseUp);
-      canvas.addEventListener("mouseenter", handleMouseEnter);
-      canvas.addEventListener("mouseleave", handleMouseLeave);
-      canvas.addEventListener("click", handleClick);
-      return () => {
-        canvas.removeEventListener("mousemove", updateMousePosition);
-        canvas.removeEventListener("mousedown", handleMouseDown);
-        canvas.removeEventListener("mouseup", handleMouseUp);
-        canvas.removeEventListener("mouseenter", handleMouseEnter);
-        canvas.removeEventListener("mouseleave", handleMouseLeave);
-        canvas.removeEventListener("click", handleClick);
-      };
+      canvas.addEventListener("mousemove", updateMousePosition, { signal });
+      canvas.addEventListener("mousedown", handleMouseDown, { signal });
+      canvas.addEventListener("mouseup", handleMouseUp, { signal });
+      canvas.addEventListener("mouseenter", handleMouseEnter, { signal });
+      canvas.addEventListener("mouseleave", handleMouseLeave, { signal });
+      canvas.addEventListener("click", handleClick, { signal });
+      return () => controller.abort();
     });
     return {
       mouse: mouseRef.current,
@@ -1881,6 +3580,8 @@ function useKlint() {
       if (!contextRef.current?.canvas) return;
       const canvas = contextRef.current.canvas;
       const ctx = contextRef.current;
+      const controller = new AbortController();
+      const { signal } = controller;
       const handleScroll = (e) => {
         e.preventDefault();
         if (!scrollRef.current) return;
@@ -1893,8 +3594,8 @@ function useKlint() {
           scrollCallbackRef.current(ctx, scrollRef.current, e);
         }
       };
-      canvas.addEventListener("wheel", handleScroll);
-      return () => canvas.removeEventListener("wheel", handleScroll);
+      canvas.addEventListener("wheel", handleScroll, { signal });
+      return () => controller.abort();
     });
     return {
       scroll: scrollRef.current,
@@ -2040,18 +3741,19 @@ function useKlint() {
           touchEndCallbackRef.current(ctx, e, gestureRef.current);
         }
       };
+      const controller = new AbortController();
+      const { signal } = controller;
       canvas.addEventListener("touchstart", handleTouchStart, {
-        passive: false
+        passive: false,
+        signal
       });
-      canvas.addEventListener("touchmove", handleTouchMove, { passive: false });
-      canvas.addEventListener("touchend", handleTouchEnd);
-      canvas.addEventListener("touchcancel", handleTouchCancel);
-      return () => {
-        canvas.removeEventListener("touchstart", handleTouchStart);
-        canvas.removeEventListener("touchmove", handleTouchMove);
-        canvas.removeEventListener("touchend", handleTouchEnd);
-        canvas.removeEventListener("touchcancel", handleTouchCancel);
-      };
+      canvas.addEventListener("touchmove", handleTouchMove, {
+        passive: false,
+        signal
+      });
+      canvas.addEventListener("touchend", handleTouchEnd, { signal });
+      canvas.addEventListener("touchcancel", handleTouchCancel, { signal });
+      return () => controller.abort();
     }, []);
     return {
       gesture: gestureRef.current,
@@ -2064,6 +3766,315 @@ function useKlint() {
       onTouchEnd: (callback) => touchEndCallbackRef.current = callback
     };
   };
+  const KlintKeyboard = () => {
+    if (!keyboardRef.current) {
+      keyboardRef.current = { ...DEFAULT_KEYBOARD_STATE };
+    }
+    const keyPressedCallbackRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+    const keyReleasedCallbackRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+    const keyComboCallbackRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+    (0, import_react2.useEffect)(() => {
+      if (!contextRef.current) return;
+      const ctx = contextRef.current;
+      const controller = new AbortController();
+      const { signal } = controller;
+      const updateModifiers = (e) => {
+        if (!keyboardRef.current) return;
+        keyboardRef.current.modifiers.alt = e.altKey;
+        keyboardRef.current.modifiers.shift = e.shiftKey;
+        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);
+        keyboardRef.current.pressedKeys.add(normalizedKey);
+        keyboardRef.current.lastKey = normalizedKey;
+        keyboardRef.current.lastKeyTime = performance.now();
+        updateModifiers(e);
+        const keyCallback = keyPressedCallbackRef.current.get(normalizedKey);
+        if (keyCallback) {
+          keyCallback(ctx, e);
+        }
+        const pressedKeysArray = Array.from(
+          keyboardRef.current.pressedKeys
+        ).sort();
+        const comboKey = pressedKeysArray.join("+");
+        const comboCallback = keyComboCallbackRef.current.get(comboKey);
+        if (comboCallback) {
+          comboCallback(ctx, e);
+        }
+      };
+      const handleKeyUp = (e) => {
+        if (!keyboardRef.current) return;
+        const normalizedKey = normalizeKey2(e.key);
+        keyboardRef.current.pressedKeys.delete(normalizedKey);
+        updateModifiers(e);
+        const keyCallback = keyReleasedCallbackRef.current.get(normalizedKey);
+        if (keyCallback) {
+          keyCallback(ctx, e);
+        }
+      };
+      window.addEventListener("keydown", handleKeyDown, { signal });
+      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
+      keyPressed: (key, callback) => {
+        keyPressedCallbackRef.current.set(normalizeKey(key), callback);
+      },
+      // Register callback for single key release
+      keyReleased: (key, callback) => {
+        keyReleasedCallbackRef.current.set(normalizeKey(key), callback);
+      },
+      // Register callback for key combination (e.g., ['Alt', 'Shift'])
+      keyCombo: (keys, callback) => {
+        const comboKey = createComboKey(keys);
+        keyComboCallbackRef.current.set(comboKey, callback);
+      },
+      // Utility functions
+      isPressed: (key) => {
+        return keyboardRef.current?.pressedKeys.has(normalizeKey(key)) || false;
+      },
+      arePressed: (keys) => {
+        if (!keyboardRef.current) return false;
+        return keys.every(
+          (key) => keyboardRef.current.pressedKeys.has(normalizeKey(key))
+        );
+      },
+      // Clear all callbacks
+      clearCallbacks: () => {
+        keyPressedCallbackRef.current.clear();
+        keyReleasedCallbackRef.current.clear();
+        keyComboCallbackRef.current.clear();
+      }
+    };
+  };
+  const KlintTimeline = () => {
+    const timelinesRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+    const callbacksRef = (0, import_react2.useRef)({ 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 = (0, import_react2.useRef)(
       null
@@ -2074,6 +4085,8 @@ function useKlint() {
     (0, import_react2.useEffect)(() => {
       if (!contextRef.current) return;
       const ctx = contextRef.current;
+      const controller = new AbortController();
+      const { signal } = controller;
       const handleResize = () => {
         if (resizeCallbackRef.current) resizeCallbackRef.current(ctx);
       };
@@ -2089,19 +4102,13 @@ function useKlint() {
           visibilityChangeCallbackRef.current(ctx, isVisible);
         }
       };
-      window.addEventListener("resize", handleResize);
-      window.addEventListener("blur", handleBlur);
-      window.addEventListener("focus", handleFocus);
-      document.addEventListener("visibilitychange", handleVisibilityChange);
-      return () => {
-        window.removeEventListener("resize", handleResize);
-        window.removeEventListener("blur", handleBlur);
-        window.removeEventListener("focus", handleFocus);
-        document.removeEventListener(
-          "visibilitychange",
-          handleVisibilityChange
-        );
-      };
+      window.addEventListener("resize", handleResize, { signal });
+      window.addEventListener("blur", handleBlur, { signal });
+      window.addEventListener("focus", handleFocus, { signal });
+      document.addEventListener("visibilitychange", handleVisibilityChange, {
+        signal
+      });
+      return () => controller.abort();
     }, []);
     return {
       onResize: (callback) => resizeCallbackRef.current = callback,
@@ -2124,20 +4131,27 @@ function useKlint() {
     context.__textWeight = "normal";
     context.__textStyle = "normal";
     context.__textSize = 72;
+    context.__textLeading = void 0;
     context.__textAlignment = {
       horizontal: "left",
       vertical: "top"
     };
+    context.__fillRule = "nonzero";
     context.__offscreens = /* @__PURE__ */ new Map();
     context.__isPlaying = true;
     context.__currentContext = context;
     context.Color = new Color_default();
     context.createVector = (x = 0, y = 0) => new Vector_default(x, y);
-    context.Easing = new Easing_default(context);
-    context.State = new State_default();
-    context.Time = new Time_default(context);
+    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);
     Object.entries(KlintCoreFunctions).forEach(([name, fn]) => {
       context[name] = fn(context);
     });
@@ -2168,6 +4182,30 @@ function useKlint() {
       contextRef.current.__isPlaying = !contextRef.current.__isPlaying;
     }
   }, []);
+  const KlintPerformance = () => {
+    const metricsRef = (0, import_react2.useRef)(null);
+    (0, import_react2.useEffect)(() => {
+      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,
@@ -2176,8 +4214,11 @@ function useKlint() {
     KlintMouse,
     KlintScroll,
     KlintGesture,
+    KlintKeyboard,
     KlintWindow,
     KlintImage,
+    KlintTimeline,
+    KlintPerformance,
     togglePlay,
     useDev
   };
@@ -2224,10 +4265,21 @@ var useStorage = (initialProps = {}) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CONFIG_PROPS,
+  Color,
   EPSILON,
+  Easing,
+  Grid,
+  Hotspot,
   Klint,
   KlintCoreFunctions,
   KlintFunctions,
+  Noise,
+  Performance,
+  SSR,
+  Strip,
+  Text,
+  Thing,
+  Vector,
   useKlint,
   useProps,
   useStorage