@shopify/klint 0.2.0 → 0.3.0

package/dist/Klint-CsVzll4n.d.ts

@@ -0,0 +1,1410 @@
+import React from 'react';
+
+type KlintCoreFunctionNames = keyof typeof KlintCoreFunctions;
+type KlintCoreFunctions = {
+    [K in KlintCoreFunctionNames]: ReturnType<(typeof KlintCoreFunctions)[K]>;
+};
+declare const KlintCoreFunctions: {
+    saveCanvas: (ctx: KlintContext) => () => void;
+    fullscreen: (ctx: KlintContext) => () => void;
+    play: (ctx: KlintContext) => () => void;
+    pause: (ctx: KlintContext) => () => void;
+    redraw: () => () => void;
+    extend: (ctx: KlintContext) => (name: string, data: unknown, enforceReplace?: boolean) => void;
+    passImage: () => (element: HTMLImageElement) => HTMLImageElement | null;
+    passImages: () => (elements: HTMLImageElement[]) => (HTMLImageElement | null)[];
+    saveConfig: (ctx: KlintContexts) => (from?: KlintContexts) => KlintConfig;
+    restoreConfig: (ctx: KlintContext) => (config: KlintConfig) => void;
+    describe: (ctx: KlintContext) => (description: string) => void;
+    createOffscreen: (ctx: KlintContext) => (id: string, width: number, height: number, options?: KlintCanvasOptions, callback?: (ctx: KlintOffscreenContext) => void) => KlintOffscreenContext | HTMLImageElement;
+    getOffscreen: (ctx: KlintContext) => (id: string) => KlintOffscreenContext | HTMLImageElement;
+};
+type KlintFunctionNames = keyof typeof KlintFunctions;
+type KlintFunctions = {
+    [K in KlintFunctionNames]: ReturnType<(typeof KlintFunctions)[K]>;
+};
+declare const KlintFunctions: {
+    readonly extend: (ctx: KlintContexts) => (name: string, data: unknown, enforceReplace?: boolean) => void;
+    readonly background: (ctx: KlintContexts) => (color?: string) => void;
+    readonly reset: (ctx: KlintContexts) => () => void;
+    readonly clear: (ctx: KlintContexts) => () => void;
+    readonly fillColor: (ctx: KlintContexts) => (color: string | CanvasGradient) => void;
+    readonly strokeColor: (ctx: KlintContexts) => (color: string | CanvasGradient) => void;
+    readonly noFill: (ctx: KlintContexts) => () => void;
+    readonly noStroke: (ctx: KlintContexts) => () => void;
+    readonly strokeWidth: (ctx: KlintContexts) => (width: number) => void;
+    readonly strokeJoin: (ctx: KlintContexts) => (join: CanvasLineJoin) => void;
+    readonly strokeCap: (ctx: KlintContexts) => (cap: CanvasLineCap) => void;
+    readonly push: (ctx: KlintContexts) => () => void;
+    readonly pop: (ctx: KlintContexts) => () => void;
+    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;
+    readonly rectangle: (ctx: KlintContexts) => (x: number, y: number, width: number, height?: number) => void;
+    readonly roundedRectangle: (ctx: KlintContexts) => (x: number, y: number, width: number, radius: number | number[], height?: number) => void;
+    readonly polygon: (ctx: KlintContexts) => (x: number, y: number, radius: number, sides: number, radius2?: number, rotation?: number) => void;
+    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;
+    readonly distance: (ctx: KlintContexts) => (x1: number, y1: number, x2: number, y2: number, mode?: "precise" | "fast" | "faster") => number;
+    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;
+    readonly textWeight: (ctx: KlintContexts) => (weight: string) => void;
+    readonly textQuality: (ctx: KlintContexts) => (quality?: "speed" | "auto" | "legibility" | "precision") => void;
+    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) => 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 | "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;
+    readonly withConfig: (ctx: KlintContexts) => (config: KlintConfig) => void;
+    readonly toBase64: (ctx: KlintContexts) => (type?: string, quality?: number) => string;
+    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 {
+    colors: readonly string[];
+    coral: string;
+    brown: string;
+    mustard: string;
+    crimson: string;
+    navy: string;
+    sky: string;
+    olive: string;
+    charcoal: string;
+    peach: string;
+    rose: string;
+    plum: string;
+    sage: string;
+    drab: string;
+    taupe: string;
+    midnight: string;
+    golden: string;
+    orange: string;
+    slate: string;
+    hex(color: string): string;
+    rgb(r: number, g: number, b: number): string;
+    rgba(r: number, g: number, b: number, alpha: number): string;
+    gray(value: number, alpha?: number): string;
+    hsl(h: number, s: number, l: number): string;
+    hsla(h: number, s: number, l: number, alpha: number): string;
+    lch(l: number, c: number, h: number): string;
+    lcha(l: number, c: number, h: number, alpha: number): string;
+    lab(l: number, a: number, b: number): string;
+    laba(l: number, a: number, b: number, alpha: number): string;
+    oklch(l: number, c: number, h: number): string;
+    oklcha(l: number, c: number, h: number, alpha: number): string;
+    oklab(l: number, a: number, b: number): string;
+    oklaba(l: number, a: number, b: number, alpha: number): string;
+    blendColors(colorA: string, colorB: string, factor: number, colorMode?: string): string;
+    createPalette(baseColor: string, steps?: number): string[];
+    complementary(color: string): string;
+    analogous(color: string, angle?: number): [string, string];
+    triadic(color: string): [string, string];
+    saturate(color: string, amount: number): string;
+    lighten(color: string, amount: number): string;
+    darken(color: string, amount: number): string;
+}
+declare class Color implements KlintColor {
+    /**
+     * Array of predefined colors in the Klint color palette
+     */
+    colors: readonly ["#E84D37", "#7F4C2F", "#EDBC2F", "#BF3034", "#18599D", "#45A7C6", "#8CB151", "#252120", "#ECA088", "#C9B1B8", "#8F3064", "#7B8870", "#C0C180", "#4B423D", "#1A2A65", "#EAA550", "#F17B04", "#404757"];
+    get coral(): "#E84D37";
+    get brown(): "#7F4C2F";
+    get mustard(): "#EDBC2F";
+    get crimson(): "#BF3034";
+    get navy(): "#18599D";
+    get sky(): "#45A7C6";
+    get olive(): "#8CB151";
+    get charcoal(): "#252120";
+    get peach(): "#ECA088";
+    get rose(): "#C9B1B8";
+    get plum(): "#8F3064";
+    get sage(): "#7B8870";
+    get drab(): "#C0C180";
+    get taupe(): "#4B423D";
+    get midnight(): "#1A2A65";
+    get golden(): "#EAA550";
+    get orange(): "#F17B04";
+    get slate(): "#404757";
+    /**
+     * Ensures a color string has a # prefix
+     * @param color - Color string in hex format (with or without #)
+     * @returns Hex color string with # prefix
+     */
+    hex(color: string): string;
+    /**
+     * Creates an RGB color string
+     * @param r - Red component (0-255)
+     * @param g - Green component (0-255)
+     * @param b - Blue component (0-255)
+     * @returns RGB color string
+     */
+    rgb(r: number, g: number, b: number): string;
+    /**
+     * Creates an RGBA color string
+     * @param r - Red component (0-255)
+     * @param g - Green component (0-255)
+     * @param b - Blue component (0-255)
+     * @param alpha - Alpha/opacity value (0-1)
+     * @returns RGBA color string
+     */
+    rgba(r: number, g: number, b: number, alpha: number): string;
+    /**
+     * Creates a grayscale color
+     * @param value - Gray value (0-255)
+     * @param alpha - Optional alpha/opacity value (0-1)
+     * @returns RGB or RGBA grayscale color string
+     */
+    gray(value: number, alpha?: number): string;
+    /**
+     * Creates an HSL color string
+     * @param h - Hue (0-360)
+     * @param s - Saturation percentage (0-100)
+     * @param l - Lightness percentage (0-100)
+     * @returns HSL color string
+     */
+    hsl(h: number, s: number, l: number): string;
+    /**
+     * Creates an HSLA color string
+     * @param h - Hue (0-360)
+     * @param s - Saturation percentage (0-100)
+     * @param l - Lightness percentage (0-100)
+     * @param alpha - Alpha/opacity value (0-1)
+     * @returns HSLA color string
+     */
+    hsla(h: number, s: number, l: number, alpha: number): string;
+    /**
+     * Creates an LCH color string
+     * @param l - Lightness percentage (0-100)
+     * @param c - Chroma value
+     * @param h - Hue (0-360)
+     * @returns LCH color string
+     */
+    lch(l: number, c: number, h: number): string;
+    /**
+     * Creates an LCH color string with alpha
+     * @param l - Lightness percentage (0-100)
+     * @param c - Chroma value
+     * @param h - Hue (0-360)
+     * @param alpha - Alpha/opacity value (0-1)
+     * @returns LCH color string with alpha
+     */
+    lcha(l: number, c: number, h: number, alpha: number): string;
+    /**
+     * Creates a LAB color string
+     * @param l - Lightness percentage (0-100)
+     * @param a - A-axis value (green to red)
+     * @param b - B-axis value (blue to yellow)
+     * @returns LAB color string
+     */
+    lab(l: number, a: number, b: number): string;
+    /**
+     * Creates a LAB color string with alpha
+     * @param l - Lightness percentage (0-100)
+     * @param a - A-axis value (green to red)
+     * @param b - B-axis value (blue to yellow)
+     * @param alpha - Alpha/opacity value (0-1)
+     * @returns LAB color string with alpha
+     */
+    laba(l: number, a: number, b: number, alpha: number): string;
+    /**
+     * Creates an OKLCH color string
+     * @param l - Lightness value (0-1)
+     * @param c - Chroma value
+     * @param h - Hue (0-360)
+     * @returns OKLCH color string
+     */
+    oklch(l: number, c: number, h: number): string;
+    /**
+     * Creates an OKLCH color string with alpha
+     * @param l - Lightness value (0-1)
+     * @param c - Chroma value
+     * @param h - Hue (0-360)
+     * @param alpha - Alpha/opacity value (0-1)
+     * @returns OKLCH color string with alpha
+     */
+    oklcha(l: number, c: number, h: number, alpha: number): string;
+    /**
+     * Creates an OKLAB color string
+     * @param l - Lightness value (0-1)
+     * @param a - A-axis value (green to red)
+     * @param b - B-axis value (blue to yellow)
+     * @returns OKLAB color string
+     */
+    oklab(l: number, a: number, b: number): string;
+    /**
+     * Creates an OKLAB color string with alpha
+     * @param l - Lightness value (0-1)
+     * @param a - A-axis value (green to red)
+     * @param b - B-axis value (blue to yellow)
+     * @param alpha - Alpha/opacity value (0-1)
+     * @returns OKLAB color string with alpha
+     */
+    oklaba(l: number, a: number, b: number, alpha: number): string;
+    /**
+     * Blends two colors using CSS color-mix
+     * @param colorA - First color
+     * @param colorB - Second color
+     * @param factor - Blend factor (0-1) where 0 is colorA and 1 is colorB
+     * @param colorMode - Color space to blend in (e.g., "oklch", "hsl")
+     * @returns Blended color string
+     */
+    blendColors(colorA: string, colorB: string, factor: number, colorMode?: string): string;
+    /**
+     * Creates a palette of colors based on a single base color
+     * @param baseColor - The base color to create palette from
+     * @param steps - Number of steps in each direction (lighter/darker)
+     * @returns Array of color strings forming a palette
+     */
+    createPalette(baseColor: string, steps?: number): string[];
+    /**
+     * Creates a complementary color (opposite on the color wheel)
+     * @param color - Base color
+     * @returns Complementary color string
+     */
+    complementary(color: string): string;
+    /**
+     * Creates analogous colors (adjacent on the color wheel)
+     * @param color - Base color
+     * @param angle - Angle of separation in degrees
+     * @returns Tuple of two analogous color strings
+     */
+    analogous(color: string, angle?: number): [string, string];
+    /**
+     * Creates a triadic color scheme (three colors evenly spaced on the color wheel)
+     * @param color - Base color
+     * @returns Tuple of two additional colors to form a triadic scheme
+     */
+    triadic(color: string): [string, string];
+    /**
+     * Increases the saturation of a color
+     * @param color - Base color
+     * @param amount - Amount to saturate (percentage)
+     * @returns Saturated color string
+     */
+    saturate(color: string, amount: number): string;
+    /**
+     * Lightens a color by mixing with white
+     * @param color - Base color
+     * @param amount - Amount to lighten (percentage)
+     * @returns Lightened color string
+     */
+    lighten(color: string, amount: number): string;
+    /**
+     * Darkens a color by mixing with black
+     * @param color - Base color
+     * @param amount - Amount to darken (percentage)
+     * @returns Darkened color string
+     */
+    darken(color: string, amount: number): string;
+}
+
+interface KlintEasing {
+    normalize: (val: number) => number;
+    expand: (val: number) => number;
+    inout: (val: number, power?: number) => number;
+    in: (val: number, power?: number) => number;
+    out: (val: number, power?: number) => number;
+    overshootIn: (val: number) => number;
+    overshootOut: (val: number) => number;
+    overshootInOut: (val: number) => number;
+}
+declare class Easing implements KlintEasing {
+    private zeroOut;
+    normalize: (val: number) => number;
+    expand: (val: number) => number;
+    inout: (val: number, power?: number) => number;
+    in: (val: number, power?: number) => number;
+    out: (val: number, power?: number) => number;
+    overshootIn: (val: number) => number;
+    overshootOut: (val: number) => number;
+    overshootInOut: (val: number) => number;
+    bounceOut: (val: number) => number;
+    bounceIn: (val: number) => number;
+    bounceInOut: (val: number) => number;
+    elasticIn: (val: number) => number;
+    elasticOut: (val: number) => number;
+    elasticInOut: (val: number) => number;
+    smoothstep: (val: number, x0?: number, x1?: number) => number;
+    log: () => void;
+}
+
+/**
+ * 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;
+    div: (n: number) => KlintVector;
+    rotate: (angle: number) => KlintVector;
+    mag: () => number;
+    length: () => number;
+    dot: (v: KlintVector) => number;
+    dist: (v: KlintVector) => number;
+    angle: () => number;
+    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 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, z?: number);
+    /**
+     * Adds another vector to this vector
+     * @param v - Vector to add
+     * @returns This vector after addition
+     */
+    add(v: KlintVector): Vector;
+    /**
+     * Subtracts another vector from this vector
+     * @param v - Vector to subtract
+     * @returns This vector after subtraction
+     */
+    sub(v: KlintVector): Vector;
+    /**
+     * Multiplies this vector by a scalar
+     * @param n - Scalar to multiply by
+     * @returns This vector after multiplication
+     */
+    mult(n: number): Vector;
+    /**
+     * Divides this vector by a scalar
+     * @param n - Scalar to divide by
+     * @returns This vector after division
+     */
+    div(n: number): Vector;
+    /**
+     * Rotates this vector by an angle (around z-axis for 2D rotation)
+     * @param angle - Angle in radians
+     * @returns This vector after rotation
+     */
+    rotate(angle: number): Vector;
+    /**
+     * Calculates the magnitude (length) of this vector
+     * @returns The magnitude of the vector
+     */
+    mag(): number;
+    /**
+     * Alias for mag() - calculates the length of this vector
+     * @returns The length of the vector
+     */
+    length(): number;
+    /**
+     * Calculates the dot product of this vector with another vector
+     * @param v - The other vector
+     * @returns The dot product
+     */
+    dot(v: KlintVector): number;
+    /**
+     * Calculates the distance between this vector and another vector
+     * @param v - The other vector
+     * @returns The distance between the vectors
+     */
+    dist(v: KlintVector): number;
+    /**
+     * Calculates the angle of this vector (in 2D, ignoring z)
+     * @returns The angle in radians
+     */
+    angle(): number;
+    /**
+     * Creates a copy of this vector
+     * @returns A new Vector with the same coordinates
+     */
+    copy(): Vector;
+    /**
+     * Normalizes this vector (sets its magnitude to 1)
+     * @returns This vector after normalization
+     */
+    normalize(): 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: 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
+     * @param a - The angle in radians
+     * @param r - The radius (distance from center)
+     * @returns A new Vector at the calculated position
+     */
+    static fromAngle(center: Vector, a: number, r: number): Vector;
+}
+
+type TextMetrics$1 = {
+    width: number;
+    height: number;
+    baseline: number;
+};
+interface KlintText {
+    context: KlintContexts;
+    findTextSize: (text: string, dist: number, estimate?: number, direction?: "x" | "y") => number;
+    getTextMetrics: (text: string) => TextMetrics$1;
+    splitTo: (text: string, kind: "letters" | "words" | "lines" | "all", options?: {
+        maxWidth?: number;
+        lineSpacing?: number;
+        letterSpacing?: number;
+        wordSpacing?: number;
+    }) => Array<{
+        char: string;
+        x: number;
+        y: number;
+        metrics: TextMetrics$1;
+        letterIndex?: number;
+        wordIndex?: number;
+        lineIndex?: number;
+    }>;
+    circularText: (text: string, radius?: number, fill?: "fill" | "kerned" | "words", offset?: number, arc?: number) => void;
+    textBounds: (text: string) => {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    log: () => void;
+}
+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$1;
+    splitTo: (text: string, kind: "letters" | "words" | "lines" | "all", options?: {
+        maxWidth?: number;
+        lineSpacing?: number;
+        letterSpacing?: number;
+        wordSpacing?: number;
+    }) => {
+        letterIndex?: number | undefined;
+        wordIndex?: number | undefined;
+        lineIndex?: number | undefined;
+        char: string;
+        x: number;
+        y: number;
+        metrics: TextMetrics$1;
+    }[];
+    circularText: (text: string, radius?: number, fill?: "fill" | "kerned" | "words", offset?: number, arc?: number) => void;
+    textBounds: (text: string) => {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    log: () => void;
+}
+
+interface KlintThing {
+    context: KlintContexts;
+    log(): void;
+}
+declare class Thing implements KlintThing {
+    context: KlintContexts;
+    constructor(ctx: KlintContexts);
+    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;
+    Vector: Vector;
+    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: CurveVertex[] | null;
+    __startedContour: boolean;
+    __currentContours: CurveVertex[][] | null;
+    __currentContour: CurveVertex[] | null;
+    __isReadyToDraw: boolean;
+    __isMainContext: boolean;
+    __imageOrigin: "corner" | "center";
+    __rectangleOrigin: "corner" | "center";
+    __canvasOrigin: "corner" | "center";
+    __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;
+    deltaTime: number;
+    fps: number;
+    __lastTargetTime: number;
+    __lastRealTime: number;
+    __isPlaying: boolean;
+    __offscreens: Map<string, KlintOffscreenContext | HTMLImageElement>;
+    __performance?: KlintPerformanceMetrics;
+}
+interface KlintCanvasOptions {
+    alpha?: string;
+    willreadfrequently?: string;
+    autoplay?: string;
+    ignoreResize?: string;
+    noloop?: string;
+    ignoreFunctions?: string;
+    static?: string;
+    nocanvas?: string;
+    fps?: number;
+    unsafemode?: string;
+    dpr?: number | "default";
+    origin?: "corner" | "center";
+}
+type KlintConfig = Partial<Pick<KlintContext, (typeof CONFIG_PROPS)[number]>>;
+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", "__textLeading", "__textAlignment", "__fillRule", "__isPlaying"];
+interface KlintProps {
+    context: KlintContextWrapper;
+    draw: (ctx: KlintContext) => void;
+    setup?: (ctx: KlintContext) => void;
+    preload?: (ctx: KlintContext) => Promise<void>;
+    options?: KlintCanvasOptions;
+    onResize?: (ctx: KlintContext) => void;
+    onVisible?: (ctx: KlintContext) => void;
+    enablePerformanceTracking?: boolean;
+}
+declare function Klint({ context, setup, draw, options, preload, onVisible, enablePerformanceTracking, }: KlintProps): React.JSX.Element;
+
+export { CONFIG_PROPS as C, EPSILON as E, Grid as G, Hotspot as H, type KlintContext as K, Noise as N, Performance as P, SSR as S, Text as T, Vector as V, type KlintCanvasOptions as a, type KlintPerformanceMetrics as b, Color as c, type CurveVertex as d, Easing as e, Klint as f, type KlintConfig as g, type KlintContextWrapper as h, type KlintContexts as i, KlintCoreFunctions as j, type KlintElements as k, KlintFunctions as l, type KlintOffscreenContext as m, type KlintProps as n, type KlintServerRenderOptions as o, type PerformanceWidgetOptions as p, Strip as q, Thing as r };