@shopify/klint 0.0.97 → 0.2.0

package/dist/index.d.cts

@@ -40,6 +40,7 @@ declare const KlintFunctions: {
     readonly point: (ctx: KlintContexts) => (x: number, y: number) => void;
     readonly checkTransparency: (ctx: KlintContexts) => (toCheck: string) => boolean;
     readonly drawIfVisible: (ctx: KlintContexts) => () => void;
+    readonly fillRule: (ctx: KlintContexts) => (rule: CanvasFillRule) => void;
     readonly line: (ctx: KlintContexts) => (x1: number, y1: number, x2: number, y2: number) => void;
     readonly circle: (ctx: KlintContexts) => (x: number, y: number, radius: number, radius2?: number) => void;
     readonly disk: (ctx: KlintContexts) => (x: number, y: number, radius: number, startAngle?: number, endAngle?: number, closed?: boolean) => void;
@@ -49,12 +50,18 @@ declare const KlintFunctions: {
     readonly beginShape: (ctx: KlintContexts) => () => void;
     readonly beginContour: (ctx: KlintContexts) => () => void;
     readonly vertex: (ctx: KlintContexts) => (x: number, y: number) => void;
+    readonly bezierVertex: (ctx: KlintContexts) => (cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number) => void;
+    readonly quadraticVertex: (ctx: KlintContexts) => (cpx: number, cpy: number, x: number, y: number) => void;
+    readonly arcVertex: (ctx: KlintContexts) => (x1: number, y1: number, x2: number, y2: number, radius: number) => void;
     readonly endContour: (ctx: KlintContexts) => (forceRevert?: boolean) => void;
     readonly endShape: (ctx: KlintContexts) => (close?: boolean) => void;
     readonly gradient: (ctx: KlintContexts) => (x1?: number, y1?: number, x2?: number, y2?: number) => CanvasGradient;
     readonly radialGradient: (ctx: KlintContexts) => (x1?: number, y1?: number, r1?: number, x2?: number, y2?: number, r2?: number) => CanvasGradient;
     readonly conicGradient: (ctx: KlintContexts) => (angle?: number, x1?: number, y1?: number) => CanvasGradient;
     readonly addColorStop: () => (gradient: CanvasGradient, offset?: number, color?: string) => void;
+    readonly PI: () => number;
+    readonly TWO_PI: () => number;
+    readonly TAU: () => number;
     readonly constrain: () => (val: number, floor: number, ceil: number) => number;
     readonly lerp: (ctx: KlintContexts) => (A: number, B: number, mix: number, bounded?: boolean) => number;
     readonly fract: () => (n: number, mod: number, mode?: "precise" | "fast" | "faster") => number;
@@ -62,6 +69,8 @@ declare const KlintFunctions: {
     readonly squareDistance: () => (x1: number, y1: number, x2: number, y2: number) => number;
     readonly dot: () => (x1: number, y1: number, x2: number, y2: number) => number;
     readonly remap: (ctx: KlintContexts) => (n: number, A: number, B: number, C: number, D: number, bounded?: boolean) => number;
+    readonly bezierLerp: () => (a: number, b: number, c: number, d: number, t: number) => number;
+    readonly bezierTangent: () => (a: number, b: number, c: number, d: number, t: number) => number;
     readonly textFont: (ctx: KlintContexts) => (font: string) => void;
     readonly textSize: (ctx: KlintContexts) => (size: number) => void;
     readonly textStyle: (ctx: KlintContexts) => (style: string) => void;
@@ -70,17 +79,22 @@ declare const KlintFunctions: {
     readonly textSpacing: (ctx: KlintContexts) => (kind: "letter" | "word", value: number) => void;
     readonly computeTextStyle: (ctx: KlintContexts) => () => void;
     readonly alignText: (ctx: KlintContexts) => (horizontal: CanvasTextAlign, vertical?: CanvasTextBaseline) => void;
-    readonly textLeading: (ctx: KlintContexts) => (spacing: number) => void;
+    readonly textLeading: (ctx: KlintContexts) => (spacing: number) => number;
     readonly computeFont: (ctx: KlintContexts) => () => void;
     readonly textWidth: (ctx: KlintContexts) => (text: string) => number;
     readonly text: (ctx: KlintContexts) => (text: string | number | undefined, x: number, y: number, maxWidth?: number | undefined) => void;
+    readonly paragraph: (ctx: KlintContexts) => (text: string | number | undefined, x: number, y: number, width: number, options?: {
+        justification?: "left" | "center" | "right" | "justified";
+        overflow?: number;
+        break?: "words" | "letters";
+    }) => void;
     readonly image: (ctx: KlintContexts) => (image: HTMLImageElement | HTMLCanvasElement | OffscreenCanvas | KlintContexts, x: number, y: number, arg3?: number, arg4?: number, arg5?: number, arg6?: number, arg7?: number, arg8?: number) => void;
     readonly loadPixels: (ctx: KlintContexts) => () => ImageData;
     readonly updatePixels: (ctx: KlintContexts) => (pixels: Uint8ClampedArray | number[]) => void;
     readonly readPixels: (ctx: KlintContexts) => (x: number, y: number, w?: number, h?: number) => number[];
     readonly scaleTo: () => (originWidth: number, originHeight: number, destinationWidth: number, destinationHeight: number, cover?: boolean) => number;
     readonly opacity: (ctx: KlintContexts) => (value: number) => void;
-    readonly blend: (ctx: KlintContexts) => (blend: GlobalCompositeOperation) => void;
+    readonly blend: (ctx: KlintContexts) => (blend: GlobalCompositeOperation | "default") => void;
     readonly setCanvasOrigin: (ctx: KlintContexts) => (type: "center" | "corner") => void;
     readonly setImageOrigin: (ctx: KlintContexts) => (type: "center" | "corner") => void;
     readonly setRectOrigin: (ctx: KlintContexts) => (type: "center" | "corner") => void;
@@ -89,6 +103,15 @@ declare const KlintFunctions: {
     readonly saveConfig: (ctx: KlintContexts) => (from?: KlintContexts) => KlintConfig;
     readonly restoreConfig: (ctx: KlintContexts) => (config: KlintConfig) => void;
     readonly resizeCanvas: (ctx: KlintContexts) => (width: number, height: number) => void;
+    readonly clipTo: (ctx: KlintContexts) => (callback: (K: KlintContexts | KlintContext) => void, fillRule?: CanvasFillRule) => void;
+    readonly canIuseFilter: (ctx: KlintContexts) => () => boolean;
+    readonly blur: (ctx: KlintContexts) => (radius: number) => void;
+    readonly SVGfilter: (ctx: KlintContexts) => (url: string) => void;
+    readonly dropShadow: (ctx: KlintContexts) => (offsetX: number, offsetY: number, blurRadius: number, color: string) => void;
+    readonly grayscale: (ctx: KlintContexts) => (amount: number) => void;
+    readonly hue: (ctx: KlintContexts) => (angle: number) => void;
+    readonly invert: (ctx: KlintContexts) => (amount: number) => void;
+    readonly filterOpacity: (ctx: KlintContexts) => (value: number) => void;
 };
 
 interface KlintColor {
@@ -331,7 +354,6 @@ declare class Color implements KlintColor {
 }
 
 interface KlintEasing {
-    context: KlintContexts;
     normalize: (val: number) => number;
     expand: (val: number) => number;
     inout: (val: number, power?: number) => number;
@@ -342,8 +364,7 @@ interface KlintEasing {
     overshootInOut: (val: number) => number;
 }
 declare class Easing implements KlintEasing {
-    context: KlintContexts;
-    constructor(ctx: KlintContexts);
+    private zeroOut;
     normalize: (val: number) => number;
     expand: (val: number) => number;
     inout: (val: number, power?: number) => number;
@@ -362,30 +383,13 @@ declare class Easing implements KlintEasing {
     log: () => void;
 }
 
-type KlintStateValue = unknown;
-type KlintStateCallback = (key: string, value: KlintStateValue) => void;
-interface KlintState {
-    set(key: string, value: KlintStateValue, callback?: KlintStateCallback): void;
-    get(key: string, callback?: KlintStateCallback): KlintStateValue;
-    has(key: string): boolean;
-    delete(key: string, callback?: (key: string) => void): void;
-    log(): Map<string, KlintStateValue>;
-}
-declare class State implements KlintState {
-    private store;
-    set(key: string, value: KlintStateValue, callback?: KlintStateCallback): void;
-    get(key: string, callback?: KlintStateCallback): unknown;
-    has(key: string): boolean;
-    delete(key: string, callback?: (key: string) => void): void;
-    log(): Map<string, unknown>;
-}
-
 /**
- * Interface defining a 2D vector with various vector operations
+ * Interface defining a 3D vector with various vector operations
  */
 interface KlintVector {
     x: number;
     y: number;
+    z: number;
     add: (v: KlintVector) => KlintVector;
     sub: (v: KlintVector) => KlintVector;
     mult: (n: number) => KlintVector;
@@ -399,21 +403,29 @@ interface KlintVector {
     copy: () => KlintVector;
     normalize: () => KlintVector;
     set: (x: number, y: number, z?: number, w?: number) => KlintVector;
+    cross: (v: KlintVector) => KlintVector;
+    relativeTo: (v: KlintVector) => KlintVector;
+    lookAt: (target: KlintVector) => KlintVector;
+    toScreen: (width: number, height: number) => KlintVector;
+    slerp: (v: KlintVector, amt: number) => KlintVector;
 }
 /**
- * A 2D vector class with various vector operations
+ * A 3D vector class with various vector operations (z=0 by default for 2D use)
  */
 declare class Vector implements KlintVector {
     /** X-coordinate of the vector */
     x: number;
     /** Y-coordinate of the vector */
     y: number;
+    /** Z-coordinate of the vector */
+    z: number;
     /**
      * Creates a new Vector
      * @param x - X-coordinate (default: 0)
      * @param y - Y-coordinate (default: 0)
+     * @param z - Z-coordinate (default: 0)
      */
-    constructor(x?: number, y?: number);
+    constructor(x?: number, y?: number, z?: number);
     /**
      * Adds another vector to this vector
      * @param v - Vector to add
@@ -439,7 +451,7 @@ declare class Vector implements KlintVector {
      */
     div(n: number): Vector;
     /**
-     * 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
      */
@@ -467,7 +479,7 @@ declare class Vector implements KlintVector {
      */
     dist(v: KlintVector): number;
     /**
-     * Calculates the angle of this vector
+     * Calculates the angle of this vector (in 2D, ignoring z)
      * @returns The angle in radians
      */
     angle(): number;
@@ -485,9 +497,42 @@ declare class Vector implements KlintVector {
      * 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: number, y: number): Vector;
+    set(x: number, y: number, z?: number): Vector;
+    /**
+     * Calculates the cross product of this vector with another vector
+     * @param v - The other vector
+     * @returns A new Vector representing the cross product
+     */
+    cross(v: KlintVector): Vector;
+    /**
+     * 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: KlintVector): Vector;
+    /**
+     * 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: KlintVector): Vector;
+    /**
+     * 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: number, height: number): Vector;
+    /**
+     * 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: KlintVector, amt: number): Vector;
     /**
      * Creates a new vector at a specified angle and distance from a center point
      * @param center - The center point vector
@@ -498,31 +543,7 @@ declare class Vector implements KlintVector {
     static fromAngle(center: Vector, a: number, r: number): Vector;
 }
 
-interface KlintTime {
-    context: KlintContexts;
-    timeline(key: string): KlintTime;
-    use(progress: number): KlintTime;
-    for(duration: number): KlintTime;
-}
-declare class Time implements KlintTime {
-    context: KlintContexts;
-    private timelines;
-    private currentTimeline;
-    private readonly DEFAULT_DURATION;
-    private staggers;
-    constructor(ctx: KlintContexts);
-    timeline(key: string): this;
-    use(progress: number): this;
-    for(duration: number): this;
-    stagger(num: number, offset?: number, callback?: (progress: number, id: number, num: number) => void): this | {
-        id: number;
-        progress: number;
-    }[];
-    between(from: number | undefined, to: number | undefined, callback: (progress: number) => void): this;
-    progress(): number;
-}
-
-type TextMetrics = {
+type TextMetrics$1 = {
     width: number;
     height: number;
     baseline: number;
@@ -530,7 +551,7 @@ type TextMetrics = {
 interface KlintText {
     context: KlintContexts;
     findTextSize: (text: string, dist: number, estimate?: number, direction?: "x" | "y") => number;
-    getTextMetrics: (text: string) => TextMetrics;
+    getTextMetrics: (text: string) => TextMetrics$1;
     splitTo: (text: string, kind: "letters" | "words" | "lines" | "all", options?: {
         maxWidth?: number;
         lineSpacing?: number;
@@ -540,7 +561,7 @@ interface KlintText {
         char: string;
         x: number;
         y: number;
-        metrics: TextMetrics;
+        metrics: TextMetrics$1;
         letterIndex?: number;
         wordIndex?: number;
         lineIndex?: number;
@@ -558,7 +579,7 @@ declare class Text implements KlintText {
     context: KlintContexts;
     constructor(ctx: KlintContexts);
     findTextSize: (text: string, dist: number, estimate?: number, direction?: "x" | "y") => number;
-    getTextMetrics: (text: string) => TextMetrics;
+    getTextMetrics: (text: string) => TextMetrics$1;
     splitTo: (text: string, kind: "letters" | "words" | "lines" | "all", options?: {
         maxWidth?: number;
         lineSpacing?: number;
@@ -571,7 +592,7 @@ declare class Text implements KlintText {
         char: string;
         x: number;
         y: number;
-        metrics: TextMetrics;
+        metrics: TextMetrics$1;
     }[];
     circularText: (text: string, radius?: number, fill?: "fill" | "kerned" | "words", offset?: number, arc?: number) => void;
     textBounds: (text: string) => {
@@ -593,27 +614,728 @@ declare class Thing implements KlintThing {
     log(): void;
 }
 
+/**
+ * Grid point interface
+ */
+interface GridPoint {
+    x: number;
+    y: number;
+    i: number;
+    j: number;
+    id: number;
+}
+/**
+ * Grid Element for Klint
+ *
+ * Provides utilities for creating rectangular and radial grids
+ *
+ * @example
+ * ```tsx
+ * const draw = (K) => {
+ *   // Rectangular grid
+ *   const rectGrid = K.Grid.rect(100, 100, 400, 300, 5, 4);
+ *   rectGrid.forEach(point => {
+ *     K.circle(point.x, point.y, 5);
+ *   });
+ *
+ *   // Radial grid
+ *   const radialGrid = K.Grid.radial(400, 300, 100, 12, 3, 50);
+ *   radialGrid.forEach(point => {
+ *     K.circle(point.x, point.y, 3);
+ *   });
+ * };
+ * ```
+ */
+declare class Grid {
+    private context;
+    /**
+     * Creates a new Grid instance
+     * @param ctx - The Klint context
+     */
+    constructor(ctx: KlintContext);
+    /**
+     * 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: number, y: number, width: number, height: number, countX: number, countY: number, options?: {
+        origin?: 'corner' | 'center';
+    }): GridPoint[];
+    /**
+     * 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: number, y: number, radius: number, count: number, ringCount: number, ringSpace: number, options?: {
+        perStepCount?: number;
+    }): GridPoint[];
+    /**
+     * 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: number, y: number, width: number, height: number, size: number, options?: {
+        origin?: 'corner' | 'center';
+        pointy?: boolean;
+    }): GridPoint[];
+    /**
+     * 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: number, y: number, width: number, height: number, size: number, options?: {
+        origin?: 'corner' | 'center';
+    }): GridPoint[];
+}
+
+/**
+ * Triangle structure for Strip
+ */
+interface StripTriangle {
+    id: number;
+    center: {
+        x: number;
+        y: number;
+    };
+    points: [
+        {
+            x: number;
+            y: number;
+        },
+        {
+            x: number;
+            y: number;
+        },
+        {
+            x: number;
+            y: number;
+        }
+    ];
+}
+/**
+ * Quad structure for Strip
+ */
+interface StripQuad {
+    id: number;
+    center: {
+        x: number;
+        y: number;
+    };
+    points: [
+        {
+            x: number;
+            y: number;
+        },
+        {
+            x: number;
+            y: number;
+        },
+        {
+            x: number;
+            y: number;
+        },
+        {
+            x: number;
+            y: number;
+        }
+    ];
+}
+/**
+ * Hull structure for Strip
+ */
+interface StripHull {
+    id: number;
+    center: {
+        x: number;
+        y: number;
+    };
+}
+/**
+ * Strip Element for Klint
+ *
+ * Creates strips of triangles, quads, or hulls from a set of points
+ *
+ * @example
+ * ```tsx
+ * const draw = (K) => {
+ *   const points = [];
+ *   for (let i = 0; i < 20; i++) {
+ *     points.push({
+ *       x: 100 + i * 30,
+ *       y: 300 + Math.sin(i * 0.5) * 50
+ *     });
+ *   }
+ *
+ *   // Draw triangles
+ *   K.Strip.triangles(points, (triangle) => {
+ *     const { id, center } = triangle;
+ *     K.circle(center.x, center.y, 3);
+ *     return `hsl(${id * 30}, 70%, 50%)`;
+ *   });
+ * };
+ * ```
+ */
+declare class Strip {
+    private context;
+    /**
+     * Creates a new Strip instance
+     * @param ctx - The Klint context
+     */
+    constructor(ctx: KlintContext);
+    /**
+     * 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: Array<{
+        x: number;
+        y: number;
+    }>, draw?: (triangle: StripTriangle) => string | void): void;
+    /**
+     * 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: Array<{
+        x: number;
+        y: number;
+    }>, draw?: (quad: StripQuad) => string | void): void;
+    /**
+     * 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: Array<{
+        x: number;
+        y: number;
+    }>, draw?: (hull: StripHull) => void): void;
+    /**
+     * 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: Array<{
+        x: number;
+        y: number;
+    }>, width: number, draw?: (segment: {
+        id: number;
+        center: {
+            x: number;
+            y: number;
+        };
+    }) => string | void): void;
+}
+
+type FbmOptions = {
+    octaves?: number;
+    lacunarity?: number;
+    gain?: number;
+    amplitude?: number;
+    frequency?: number;
+};
+type TurbulenceOptions = {
+    octaves?: number;
+};
+type RidgeOptions = {
+    octaves?: number;
+    amplitude?: number;
+    frequency?: number;
+    lacunarity?: number;
+    gain?: number;
+};
+type CellularOptions = {
+    distance?: "euclidean" | "manhattan";
+};
+/**
+ * Noise Element for Klint
+ *
+ * Provides Perlin noise, Simplex noise, and hash functions for procedural generation
+ * Based on implementations by Stefan Gustavson and others
+ *
+ * @example
+ * ```tsx
+ * const draw = (K) => {
+ *   K.Noise.seed(42); // Optional: set seed for reproducibility
+ *
+ *   // Generate terrain
+ *   for (let x = 0; x < K.width; x += 5) {
+ *     for (let y = 0; y < K.height; y += 5) {
+ *       const n = K.Noise.perlin(x * 0.01, y * 0.01);
+ *       const brightness = (n + 1) * 127;
+ *       K.fillColor(`rgb(${brightness}, ${brightness}, ${brightness})`);
+ *       K.rectangle(x, y, 5, 5);
+ *     }
+ *   }
+ * };
+ * ```
+ */
+declare class Noise {
+    private context;
+    private perm;
+    private permMod12;
+    private grad3;
+    private grad4;
+    private currentSeed;
+    private F2;
+    private G2;
+    private F3;
+    private G3;
+    private F4;
+    private G4;
+    /**
+     * Creates a new Noise instance
+     * @param ctx - The Klint context
+     */
+    constructor(ctx: KlintContext);
+    /**
+     * Build permutation table for noise generation
+     */
+    private buildPermutationTable;
+    /**
+     * Seeded random number generator
+     */
+    private random;
+    /**
+     * Set seed for noise generation
+     * @param seed - Seed value for reproducible noise
+     */
+    seed(seed?: number): void;
+    /**
+     * Fade function for Perlin noise
+     */
+    private fade;
+    /**
+     * Linear interpolation
+     */
+    private lerp;
+    /**
+     * 1D Perlin noise
+     * @param x - X coordinate
+     * @returns Noise value between -1 and 1
+     */
+    perlin(x: number): number;
+    /**
+     * 2D Perlin noise
+     * @param x - X coordinate
+     * @param y - Y coordinate
+     * @returns Noise value between -1 and 1
+     */
+    perlin(x: number, y: number): number;
+    /**
+     * 3D Perlin noise
+     * @param x - X coordinate
+     * @param y - Y coordinate
+     * @param z - Z coordinate
+     * @returns Noise value between -1 and 1
+     */
+    perlin(x: number, y: number, z: number): number;
+    /**
+     * 4D Perlin noise
+     * @param x - X coordinate
+     * @param y - Y coordinate
+     * @param z - Z coordinate
+     * @param w - W coordinate
+     * @returns Noise value between -1 and 1
+     */
+    perlin(x: number, y: number, z: number, w: number): number;
+    /**
+     * 1D Simplex noise
+     * @param x - X coordinate
+     * @returns Noise value between -1 and 1
+     */
+    simplex(x: number): number;
+    /**
+     * 2D Simplex noise
+     * @param x - X coordinate
+     * @param y - Y coordinate
+     * @returns Noise value between -1 and 1
+     */
+    simplex(x: number, y: number): number;
+    /**
+     * 3D Simplex noise
+     * @param x - X coordinate
+     * @param y - Y coordinate
+     * @param z - Z coordinate
+     * @returns Noise value between -1 and 1
+     */
+    simplex(x: number, y: number, z: number): number;
+    /**
+     * 4D Simplex noise
+     * @param x - X coordinate
+     * @param y - Y coordinate
+     * @param z - Z coordinate
+     * @param w - W coordinate
+     * @returns Noise value between -1 and 1
+     */
+    simplex(x: number, y: number, z: number, w: number): number;
+    /**
+     * Dot product for 2D
+     */
+    private dot2;
+    /**
+     * Dot product for 3D
+     */
+    private dot3;
+    /**
+     * 1D hash function
+     * @param x - X coordinate
+     * @returns Hash value between 0 and 1
+     */
+    hash(x: number): number;
+    /**
+     * 2D hash function
+     * @param x - X coordinate
+     * @param y - Y coordinate
+     * @returns Hash value between 0 and 1
+     */
+    hash(x: number, y: number): number;
+    /**
+     * 3D hash function
+     * @param x - X coordinate
+     * @param y - Y coordinate
+     * @param z - Z coordinate
+     * @returns Hash value between 0 and 1
+     */
+    hash(x: number, y: number, z: number): number;
+    /**
+     * 4D hash function
+     * @param x - X coordinate
+     * @param y - Y coordinate
+     * @param z - Z coordinate
+     * @param w - W coordinate
+     * @returns Hash value between 0 and 1
+     */
+    hash(x: number, y: number, z: number, w: number): number;
+    /**
+     * Fractal Brownian Motion (fBm) noise
+     * Supports options object for amplitude/frequency/lacunarity/gain/octaves.
+     */
+    fbm(x: number, y?: number | FbmOptions, z?: number | FbmOptions, options?: FbmOptions): number;
+    /**
+     * Turbulence noise (absolute value of noise)
+     * Supports options object for octaves.
+     */
+    turbulence(x: number, y?: number | TurbulenceOptions, z?: number | TurbulenceOptions, options?: TurbulenceOptions): number;
+    /**
+     * Ridged multifractal noise (simple implementation)
+     */
+    ridge(x: number, y?: number | RidgeOptions, options?: RidgeOptions): number;
+    /**
+     * Cellular / Worley noise (2D simple implementation)
+     */
+    cellular(x: number, y?: number | CellularOptions, options?: CellularOptions): number;
+}
+
+/**
+ * Point interface for hotspot detection
+ */
+interface HotspotPoint {
+    x: number;
+    y: number;
+}
+/**
+ * Hotspot Element for Klint
+ *
+ * Provides simple hit detection for various shapes
+ *
+ * @example
+ * ```tsx
+ * const draw = (K) => {
+ *   // Check if mouse is inside a circle
+ *   const isHovering = K.Hotspot.circle(K.mouse, 200, 200, 50);
+ *
+ *   // Draw circle with hover effect
+ *   K.fillColor(isHovering ? '#ff0066' : '#333');
+ *   K.circle(200, 200, 50);
+ *
+ *   // Rectangle hotspot
+ *   if (K.Hotspot.rect(K.mouse, 100, 100, 80, 60)) {
+ *     K.canvas.style.cursor = 'pointer';
+ *   } else {
+ *     K.canvas.style.cursor = 'default';
+ *   }
+ * };
+ * ```
+ */
+declare class Hotspot {
+    private context;
+    /**
+     * Creates a new Hotspot instance
+     * @param ctx - The Klint context
+     */
+    constructor(ctx: KlintContext);
+    /**
+     * 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: HotspotPoint, x: number, y: number, radius: number): boolean;
+    /**
+     * 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: HotspotPoint, x: number, y: number, width: number, height: number): boolean;
+    /**
+     * 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: HotspotPoint, x: number, y: number, radiusX: number, radiusY: number, rotation?: number): boolean;
+    /**
+     * 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: HotspotPoint, vertices: HotspotPoint[]): boolean;
+    /**
+     * 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: HotspotPoint, path: Path2D): boolean;
+}
+
+/**
+ * Performance monitoring and optimization utilities for Klint
+ */
+
+interface KlintPerformance {
+    batchDraw: (drawFn: () => void) => void;
+    useOffscreenCache: (id: string, width: number, height: number, renderFn: (offscreenCtx: KlintContext) => void) => void;
+    throttleFrame: <T>(interval: number, fn: () => T) => T;
+    useLeakDetection: () => {
+        track: (type: string) => void;
+        check: () => void;
+    };
+    getCachedTextMetrics: (text: string, font: string) => TextMetrics;
+    clearCaches: () => void;
+    render: (options?: PerformanceWidgetOptions) => void;
+    show: (options?: PerformanceWidgetOptions) => void;
+    getMetrics: () => KlintPerformanceMetrics | null;
+}
+interface PerformanceWidgetOptions {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    accentColor?: string;
+    showGraph?: boolean;
+    graphHeight?: number;
+    fontSize?: number;
+    showMemory?: boolean;
+}
+declare class Performance implements KlintPerformance {
+    private context;
+    private textMetricsCache;
+    private frameTimeHistory;
+    private readonly MAX_HISTORY;
+    constructor(ctx: KlintContext);
+    /**
+     * Batch multiple canvas operations together for better performance
+     */
+    batchDraw(drawFn: () => void): void;
+    /**
+     * Optimize drawing by using offscreen canvas for static elements
+     */
+    useOffscreenCache(id: string, width: number, height: number, renderFn: (offscreenCtx: KlintContext) => void): void;
+    /**
+     * Throttle expensive operations to run less frequently
+     */
+    throttleFrame<T>(interval: number, fn: () => T): T;
+    /**
+     * Detect potential memory leaks by tracking object creation
+     */
+    useLeakDetection(): {
+        track: (type: string) => void;
+        check: () => void;
+    };
+    /**
+     * Optimize text rendering by caching text measurements
+     */
+    getCachedTextMetrics(text: string, font: string): TextMetrics;
+    /**
+     * Clear all performance caches
+     */
+    clearCaches(): void;
+    /**
+     * Get current performance metrics
+     */
+    getMetrics(): KlintPerformanceMetrics | null;
+    /**
+     * Render performance widget on canvas
+     */
+    render(options?: PerformanceWidgetOptions): void;
+    /**
+     * Alias for render() - shows performance widget
+     */
+    show(options?: PerformanceWidgetOptions): void;
+}
+
+/**
+ * Server-Side Rendering (SSR) utilities for Klint
+ * Provides utilities for rendering Klint sketches on the server
+ * or generating static images without requiring a browser environment.
+ */
+
+interface KlintServerRenderOptions {
+    width: number;
+    height: number;
+    dpr?: number;
+    format?: "png" | "jpeg" | "webp";
+    quality?: number;
+}
+interface KlintSSR {
+    /**
+     * Render a Klint sketch to a static image (base64 data URL)
+     * Useful for Server Components, static site generation, or previews
+     */
+    renderToImage: (draw: (ctx: KlintContext) => void, options: KlintServerRenderOptions) => Promise<string>;
+    /**
+     * Generate a static image URL for a Klint sketch
+     * This can be used in Server Components to generate images at build time
+     */
+    generateImageUrl: (draw: (ctx: KlintContext) => void, options: KlintServerRenderOptions) => Promise<string>;
+    /**
+     * Check if Klint can run in the current environment
+     */
+    canRender: () => boolean;
+}
+declare class SSR implements KlintSSR {
+    private context;
+    constructor(ctx?: KlintContext);
+    /**
+     * Render a Klint sketch to a static image (base64 data URL)
+     */
+    renderToImage(draw: (ctx: KlintContext) => void, options: KlintServerRenderOptions): Promise<string>;
+    /**
+     * Generate a static image URL for a Klint sketch
+     */
+    generateImageUrl(draw: (ctx: KlintContext) => void, options: KlintServerRenderOptions): Promise<string>;
+    /**
+     * Check if Klint can run in the current environment
+     */
+    canRender(): boolean;
+    /**
+     * Render in browser environment (client-side)
+     */
+    private renderInBrowser;
+    /**
+     * Create a minimal KlintContext for server rendering
+     * This provides basic functionality without full Klint features
+     */
+    private createMinimalContext;
+}
+
 interface KlintElements {
     Color: Color;
     Easing: Easing;
-    State: State;
     Vector: Vector;
-    Time: Time;
     Text: Text;
     Thing: Thing;
+    Grid: Grid;
+    Strip: Strip;
+    Noise: Noise;
+    Hotspot: Hotspot;
+    Performance: Performance;
+    SSR: SSR;
 }
 
 declare const EPSILON = 0.0001;
 type KlintContexts = KlintContext | KlintOffscreenContext;
+type CurveVertex = {
+    type: "line";
+    x: number;
+    y: number;
+} | {
+    type: "bezier";
+    cp1x: number;
+    cp1y: number;
+    cp2x: number;
+    cp2y: number;
+    x: number;
+    y: number;
+} | {
+    type: "quadratic";
+    cpx: number;
+    cpy: number;
+    x: number;
+    y: number;
+} | {
+    type: "arc";
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    radius: number;
+};
 interface KlintOffscreenContext extends CanvasRenderingContext2D, KlintFunctions, KlintElements {
     width: number;
     height: number;
     __dpr: number;
     __startedShape: boolean;
-    __currentShape: number[][] | null;
+    __currentShape: CurveVertex[] | null;
     __startedContour: boolean;
-    __currentContours: number[][][] | null;
-    __currentContour: number[][] | null;
+    __currentContours: CurveVertex[][] | null;
+    __currentContour: CurveVertex[] | null;
     __isReadyToDraw: boolean;
     __isMainContext: boolean;
     __imageOrigin: "corner" | "center";
@@ -622,15 +1344,26 @@ interface KlintOffscreenContext extends CanvasRenderingContext2D, KlintFunctions
     __computedTextFont: string;
     __textFont: string;
     __textSize: number;
+    __textLeading: number | undefined;
     __textStyle: string;
     __textWeight: string;
     __textAlignment: {
         horizontal: CanvasTextAlign;
         vertical: CanvasTextBaseline;
     };
+    __fillRule: CanvasFillRule;
     createVector: (x: number, y: number) => Vector;
     [key: string]: any;
 }
+interface KlintPerformanceMetrics {
+    fps: number;
+    frameTime: number;
+    averageFrameTime: number;
+    minFrameTime: number;
+    maxFrameTime: number;
+    droppedFrames: number;
+    memoryUsage?: number;
+}
 interface KlintContext extends KlintOffscreenContext, KlintCoreFunctions {
     frame: number;
     time: number;
@@ -640,6 +1373,7 @@ interface KlintContext extends KlintOffscreenContext, KlintCoreFunctions {
     __lastRealTime: number;
     __isPlaying: boolean;
     __offscreens: Map<string, KlintOffscreenContext | HTMLImageElement>;
+    __performance?: KlintPerformanceMetrics;
 }
 interface KlintCanvasOptions {
     alpha?: string;
@@ -660,7 +1394,7 @@ interface KlintContextWrapper {
     context: KlintContext | null;
     initCoreContext: (canvas: HTMLCanvasElement, options: KlintCanvasOptions) => KlintContext;
 }
-declare const CONFIG_PROPS: readonly ["lineWidth", "strokeStyle", "lineJoin", "lineCap", "fillStyle", "font", "textAlign", "textBaseline", "textRendering", "wordSpacing", "letterSpacing", "globalAlpha", "globalCompositeOperation", "origin", "transform", "__imageOrigin", "__rectangleOrigin", "__textFont", "__textWeight", "__textStyle", "__textSize", "__textAlignment", "__isPlaying"];
+declare const CONFIG_PROPS: readonly ["lineWidth", "strokeStyle", "lineJoin", "lineCap", "fillStyle", "font", "textAlign", "textBaseline", "textRendering", "wordSpacing", "letterSpacing", "globalAlpha", "globalCompositeOperation", "origin", "transform", "__imageOrigin", "__rectangleOrigin", "__textFont", "__textWeight", "__textStyle", "__textSize", "__textLeading", "__textAlignment", "__fillRule", "__isPlaying"];
 interface KlintProps {
     context: KlintContextWrapper;
     draw: (ctx: KlintContext) => void;
@@ -669,8 +1403,9 @@ interface KlintProps {
     options?: KlintCanvasOptions;
     onResize?: (ctx: KlintContext) => void;
     onVisible?: (ctx: KlintContext) => void;
+    enablePerformanceTracking?: boolean;
 }
-declare function Klint({ context, setup, draw, options, preload, onVisible, }: KlintProps): React.JSX.Element;
+declare function Klint({ context, setup, draw, options, preload, onVisible, enablePerformanceTracking, }: KlintProps): React.JSX.Element;
 
 interface KlintMouse {
     x: number;
@@ -705,6 +1440,17 @@ interface KlintGesture {
     lastX: number;
     lastY: number;
 }
+interface KlintKeyboard {
+    pressedKeys: Set<string>;
+    modifiers: {
+        alt: boolean;
+        shift: boolean;
+        ctrl: boolean;
+        meta: boolean;
+    };
+    lastKey: string | null;
+    lastKeyTime: number;
+}
 declare function useKlint(): {
     context: {
         context: KlintContext | null;
@@ -732,6 +1478,15 @@ declare function useKlint(): {
         onTouchMove: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
         onTouchEnd: (callback: (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void) => (ctx: KlintContext, e: TouchEvent, gesture: KlintGesture) => void;
     };
+    KlintKeyboard: () => {
+        keyboard: KlintKeyboard;
+        keyPressed: (key: string, callback: (ctx: KlintContext, e: KeyboardEvent) => void) => void;
+        keyReleased: (key: string, callback: (ctx: KlintContext, e: KeyboardEvent) => void) => void;
+        keyCombo: (keys: string[], callback: (ctx: KlintContext, e: KeyboardEvent) => void) => void;
+        isPressed: (key: string) => boolean;
+        arePressed: (keys: string[]) => boolean;
+        clearCallbacks: () => void;
+    };
     KlintWindow: () => {
         onResize: (callback: (ctx: KlintContext) => void) => (ctx: KlintContext) => void;
         onBlur: (callback: (ctx: KlintContext) => void) => (ctx: KlintContext) => void;
@@ -750,6 +1505,32 @@ declare function useKlint(): {
         hasImage: (key: string) => boolean;
         clearImages: () => void;
     };
+    KlintTimeline: () => {
+        Timeline: {
+            create: <T extends Record<string, any>>(setup: (timeline: any) => T, options?: {
+                defaultEasing?: (t: number) => number;
+                defaultLoop?: number;
+            }) => T & {
+                update: (progress: number) => void;
+            };
+        };
+        onStart: (fn: () => void) => number;
+        onEnd: (fn: () => void) => number;
+        onLoop: (fn: () => void) => number;
+    };
+    KlintPerformance: () => {
+        metrics: {
+            fps: number;
+            frameTime: number;
+            averageFrameTime: number;
+            minFrameTime: number;
+            maxFrameTime: number;
+            droppedFrames: number;
+            memoryUsage?: number;
+        } | null;
+        getMetrics: () => KlintPerformanceMetrics | null;
+        reset: () => void;
+    };
     togglePlay: (playing?: boolean) => void;
     useDev: () => void;
 };
@@ -766,4 +1547,4 @@ declare const useStorage: <T extends object = Record<string, unknown>>(initialPr
     store: T;
 };
 
-export { CONFIG_PROPS, EPSILON, Klint, type KlintCanvasOptions, type KlintConfig, type KlintContext, type KlintContextWrapper, type KlintContexts, KlintCoreFunctions, KlintFunctions, type KlintMouse, type KlintOffscreenContext, type KlintProps, type KlintScroll, useKlint, useProps, useStorage };
+export { CONFIG_PROPS, Color, type CurveVertex, EPSILON, Easing, Grid, Hotspot, Klint, type KlintCanvasOptions, type KlintConfig, type KlintContext, type KlintContextWrapper, type KlintContexts, KlintCoreFunctions, type KlintElements, KlintFunctions, type KlintMouse, type KlintOffscreenContext, type KlintPerformanceMetrics, type KlintProps, type KlintScroll, type KlintServerRenderOptions, Noise, Performance, type PerformanceWidgetOptions, SSR, Strip, Text, Thing, Vector, useKlint, useProps, useStorage };