textmode.js 0.4.1-beta.1 → 0.6.0-beta.1

package/dist/types/textmode/mixins/interfaces/ITouchMixin.d.ts

@@ -0,0 +1,186 @@
+import type { TouchEventHandler, TouchLongPressHandler, TouchPinchHandler, TouchPosition, TouchRotateHandler, TouchSwipeHandler, TouchTapHandler } from "../../managers/TouchManager";
+/**
+ * Capabilities exposed by the TouchMixin for handling touch interaction and gestures.
+ */
+export interface ITouchMixin {
+    /**
+     * Set a callback function that will be called when a touch point begins.
+     *
+     * The callback receives {@link TouchEventData} containing the touch that triggered the event,
+     * all active touches, and the original DOM event. Use this to react when the user places one or
+     * more fingers on the canvas.
+     *
+     * @param callback The function to call when a touch starts.
+     *
+     * @example
+     * ```javascript
+     * t.touchStarted((data) => {
+     *   console.log(`Touch ${data.touch.id} began at ${data.touch.x}, ${data.touch.y}`);
+     * });
+     * ```
+     */
+    touchStarted(callback: TouchEventHandler): void;
+    /**
+     * Set a callback function that will be called when a touch point moves across the canvas.
+     *
+     * The provided callback is invoked continuously while the browser reports move events. Use the
+     * `previousTouch` and `deltaTime` fields to derive velocity or gesture behaviour.
+     *
+     * @param callback The function to call when a touch moves.
+     *
+     * @example
+     * ```javascript
+     * t.touchMoved((data) => {
+     *   const { touch, previousTouch } = data;
+     *   if (previousTouch) {
+     *     console.log(`Touch moved by ${touch.x - previousTouch.x}, ${touch.y - previousTouch.y}`);
+     *   }
+     * });
+     * ```
+     */
+    touchMoved(callback: TouchEventHandler): void;
+    /**
+     * Set a callback function that will be called when a touch ends normally.
+     *
+     * This fires after the finger leaves the canvas surface and the browser raises a `touchend`
+     * event. Use it to finalise state such as drawing strokes or completing gestures.
+     *
+     * @param callback The function to call when a touch ends.
+     *
+     * @example
+     * ```javascript
+     * t.touchEnded((data) => {
+     *   console.log(`Touch ${data.touch.id} finished at ${data.touch.x}, ${data.touch.y}`);
+     * });
+     * ```
+     */
+    touchEnded(callback: TouchEventHandler): void;
+    /**
+     * Set a callback function that will be called when a touch is cancelled by the browser.
+     *
+     * Cancellation can occur when the browser takes ownership for scrolling or if the gesture
+     * leaves the window. Treat this as an aborted touch and clean up any in-progress state.
+     *
+     * @param callback The function to call when a touch is cancelled.
+     *
+     * @example
+     * ```javascript
+     * t.touchCancelled((data) => {
+     *   console.warn(`Touch ${data.touch.id} cancelled by the browser`);
+     * });
+     * ```
+     */
+    touchCancelled(callback: TouchEventHandler): void;
+    /**
+     * Register a callback for tap gestures.
+     *
+     * A tap is fired when the user quickly touches and releases the canvas without travelling far.
+     * Use {@link TouchTapEventData.taps} to determine whether the gesture is a single or multi tap.
+     *
+     * @param callback The function to call when a tap gesture is detected.
+     *
+     * @example
+     * ```javascript
+     * t.tap((data) => {
+     *   console.log(`Tapped at ${data.touch.x}, ${data.touch.y}`);
+     * });
+     * ```
+     */
+    tap(callback: TouchTapHandler): void;
+    /**
+     * Register a callback for double tap gestures.
+     *
+     * Double taps reuse the same {@link TouchTapEventData} as taps with `taps` set to `2`. This
+     * helper lets you supply a dedicated handler when you want to treat double taps differently.
+     *
+     * @param callback The function to call when a double tap is detected.
+     *
+     * @example
+     * ```javascript
+     * t.doubleTap((data) => {
+     *   console.log('Double tap detected', data.touch);
+     * });
+     * ```
+     */
+    doubleTap(callback: TouchTapHandler): void;
+    /**
+     * Register a callback for long press gestures.
+     *
+     * A long press is emitted when the user keeps a finger on the canvas without moving beyond the
+     * configured tolerance. The event includes the press duration in milliseconds.
+     *
+     * @param callback The function to call when a long press gesture is detected.
+     *
+     * @example
+     * ```javascript
+     * t.longPress((data) => {
+     *   console.log(`Long press for ${Math.round(data.duration)}ms`);
+     * });
+     * ```
+     */
+    longPress(callback: TouchLongPressHandler): void;
+    /**
+     * Register a callback for swipe gestures.
+     *
+     * Swipes provide the dominant direction (`up`, `down`, `left`, `right`), travelled distance, and
+     * velocity in CSS pixels per millisecond. Useful for panning, flicks, or quick shortcuts.
+     *
+     * @param callback The function to call when a swipe gesture is detected.
+     *
+     * @example
+     * ```javascript
+     * t.swipe((data) => {
+     *   console.log(`Swipe ${data.direction} with distance ${data.distance}`);
+     * });
+     * ```
+     */
+    swipe(callback: TouchSwipeHandler): void;
+    /**
+     * Register a callback for pinch gestures, receiving scale deltas.
+     *
+     * Pinch gestures involve two touch points. The callback receives the current scale relative to
+     * the initial distance and the change since the previous update, enabling zoom interactions.
+     *
+     * @param callback The function to call when a pinch gesture is detected.
+     *
+     * @example
+     * ```javascript
+     * t.pinch((data) => {
+     *   console.log(`Pinch scale: ${data.scale.toFixed(2)}`);
+     * });
+     * ```
+     */
+    pinch(callback: TouchPinchHandler): void;
+    /**
+     * Register a callback for rotate gestures, receiving rotation deltas in degrees.
+     *
+     * Rotation callbacks provide the cumulative rotation and delta rotation since the last update,
+     * along with the gesture centre in grid coordinates. Ideal for dial-like interactions.
+     *
+     * @param callback The function to call when a rotation gesture is detected.
+     *
+     * @example
+     * ```javascript
+     * t.rotateGesture((data) => {
+     *   console.log(`Rotated ${data.deltaRotation.toFixed(1)}°`);
+     * });
+     * ```
+     */
+    rotateGesture(callback: TouchRotateHandler): void;
+    /**
+     * Get the currently active touches in grid coordinates.
+     *
+     * Returns a copy of each touch, including grid position, client coordinates, and pressure when
+     * available. Use this inside a draw loop to react to active multi-touch scenarios.
+     *
+     * @example
+     * ```javascript
+     * t.draw(() => {
+     *   for (const touch of t.touches) {
+     *     t.point(touch.x, touch.y);
+     *   }
+     * });
+     * ```
+     */
+    get touches(): TouchPosition[];
+}

package/dist/types/textmode/types.d.ts

@@ -0,0 +1,49 @@
+import type { TextmodePlugin } from "./managers/PluginManager";
+import type { LoadingScreenOptions } from "./loading/";
+/**
+ * Options for creating a {@link Textmodifier} instance.
+ */
+export type TextmodeOptions = {
+    /**
+     * An existing [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) to use instead of creating a new one.
+     *
+     * **Note:**
+     * If using `overlay` mode, this should be the target canvas or video element to overlay on.
+     * `textmode.js` will create its own canvas applied on top of the target element, always matching its size and position.
+     */
+    canvas?: HTMLCanvasElement;
+    /** The font size to use for text rendering. Defaults to 16. */
+    fontSize?: number;
+    /** Maximum frames per second for auto rendering. Defaults to 60. */
+    frameRate?: number;
+    /** The width of the canvas when creating a new canvas. Defaults to 800. */
+    width?: number;
+    /** The height of the canvas when creating a new canvas. Defaults to 600. */
+    height?: number;
+    /**
+     * URL or path to a custom font file *(.otf/.ttf)*.
+     *
+     * Required when using minified builds that don't include a default font.
+     *
+     * Optional for full builds *(will override embedded font if provided)*.
+     */
+    fontSource?: string;
+    /**
+     * Use `textmode.js` in overlay mode,
+     * which sets up the textmode `<canvas>` on top of an existing HTMLCanvasElement or HTMLVideoElement,
+     * automatically resizing and positioning it to match the target element.
+     *
+     * In this mode `textmode.js` fetches the content of the target element and loads it into an adjustable {@link loadables.TextmodeImage},
+     * that can be accessed via {@link Textmodifier.overlay}, and drawn via {@link Textmodifier.image},
+     *
+     * Useful for applying textmode conversion to p5.js sketches, YouTube videos, and sooo much more.
+     *
+     * All functionality of `textmode.js` remains available. Resizing the `textmode.js` canvas is not recommended though, since the overlay target defines the size.
+     *
+     */
+    overlay?: boolean;
+    /** List of plugins to install when the Textmodifier instance is created. */
+    plugins?: TextmodePlugin[];
+    /** Configure the built-in loading screen experience. */
+    loadingScreen?: LoadingScreenOptions;
+};

package/dist/types/textmode/utils/cssColor.d.ts

@@ -0,0 +1,8 @@
+export type RGBA = [number, number, number, number];
+/**
+ * Parses a CSS color string (hex, rgb, rgba) into an RGBA tuple.
+ * Returns null if the value cannot be parsed or is fully transparent.
+ */
+export declare function parseCssColor(value?: string | null): RGBA | null;
+export declare function luminance(rgba: RGBA | null): number;
+export declare function rgbaToCss(rgba: RGBA): string;

package/dist/types/utils/array.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Copy elements from a source array to a target array in-place.
+ * This performs zero allocations by mutating the target array directly.
+ * Optimized for fixed-size arrays used in real-time rendering.
+ *
+ * @param source - The source array to copy from
+ * @param target - The target array to copy into (mutated in-place)
+ *
+ * @example
+ * ```ts
+ * const src = [1, 2, 3];
+ * const dst = [0, 0, 0];
+ * copyArray(src, dst); // dst is now [1, 2, 3]
+ * ```
+ */
+export declare function copyArray<T extends number>(source: readonly T[], target: T[]): void;
+/**
+ * Normalize 0-255 color values to 0-1 range and set in-place.
+ * Zero allocations - mutates target array directly.
+ *
+ * @param target - Pre-allocated RGBA array to mutate
+ * @param r - Red channel (0-255)
+ * @param g - Green channel (0-255), defaults to r for grayscale
+ * @param b - Blue channel (0-255), defaults to r for grayscale
+ * @param a - Alpha channel (0-255), defaults to 255 (opaque)
+ *
+ * @example
+ * ```ts
+ * const color = [0, 0, 0, 1];
+ * setColor(color, 255, 128, 64, 255); // color is now [1, 0.5, 0.25, 1]
+ * setColor(color, 127); // grayscale: [0.498, 0.498, 0.498, 1]
+ * ```
+ */
+export declare function setColor(target: [number, number, number, number], r: number, g?: number, b?: number, a?: number): void;

package/dist/types/utils/math.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Calculate the angle in degrees between two points.
+ * @param x1 - X coordinate of the first point
+ * @param y1 - Y coordinate of the first point
+ * @param x2 - X coordinate of the second point
+ * @param y2 - Y coordinate of the second point
+ * @returns The angle in degrees
+ */
+export declare function angleBetweenPoints(x1: number, y1: number, x2: number, y2: number): number;
+/**
+ * Calculate the Euclidean distance between two points.
+ * @param x1 - X coordinate of the first point
+ * @param y1 - Y coordinate of the first point
+ * @param x2 - X coordinate of the second point
+ * @param y2 - Y coordinate of the second point
+ * @returns The distance between the two points
+ */
+export declare function distanceBetweenPoints(x1: number, y1: number, x2: number, y2: number): number;
+/**
+ * Clamp a value between a minimum and maximum range.
+ * @param value Value to clamp
+ * @param min Minimum allowable value
+ * @param max Maximum allowable value
+ * @returns Clamped value
+ */
+export declare function clamp(value: number, min: number, max: number): number;
+/**
+ * Encode a rotation angle (in degrees) into a single normalized channel for GPU.
+ *
+ * This encoding packs a 0-360° rotation into a single 0-1 value by normalizing
+ * the angle to the full channel range.
+ *
+ * **How it works:**
+ * 1. Normalize degrees to 0-360° range (handle wrapping)
+ * 2. Divide by 360 to get 0-1 range
+ *
+ * This provides ~256 discrete rotation steps (in an 8-bit channel), which is
+ * sufficient for textmode rendering (~1.41° precision per step).
+ *
+ * @param degrees Rotation angle in degrees (0-360)
+ * @returns Normalized value (0-1) representing the rotation
+ *
+ * @example
+ * ```ts
+ * encodeRotation(0);    // 0
+ * encodeRotation(180);  // 0.5
+ * encodeRotation(360);  // 1.0 (wraps to 0)
+ * ```
+ */
+export declare function encodeRotation(degrees: number): number;
+/**
+ * Convert rotation angles from degrees to radians for 3D transformations.
+ *
+ * @param rotationXDegrees - Rotation around X-axis in degrees
+ * @param rotationYDegrees - Rotation around Y-axis in degrees
+ * @param rotationZDegrees - Rotation around Z-axis in degrees
+ * @returns Object containing rotation values in radians for each axis
+ *
+ * @example
+ * ```ts
+ * calculateRotationParams(90, 0, 45);
+ * // { radiansX: -1.571, radiansY: 0, radiansZ: -0.785 }
+ * ```
+ */
+export declare function calculateRotationParams(rotationXDegrees: number, rotationYDegrees: number, rotationZDegrees: number): {
+    radiansX: number;
+    radiansY: number;
+    radiansZ: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "textmode.js",
-  "version": "0.4.1-beta.1",
+  "version": "0.6.0-beta.1",
   "description": "textmode.js is a lightweight creative coding library for creating real-time ASCII art on the web.",
   "type": "module",
   "types": "./dist/types/index.d.ts",

package/dist/types/rendering/webgl/DrawQueue.d.ts

@@ -1,30 +0,0 @@
-import type { RenderState } from './RenderState';
-import type { GLShader } from './Shader';
-import type { DrawCommand } from './types/DrawCommand';
-/**
- * Global draw queue preserving user-issued draw order across geometry types.
- */
-export declare class DrawQueue implements Iterable<DrawCommand> {
-    private _commands;
-    private _nextId;
-    private _size;
-    /** Reserve or reuse a pooled slot */
-    private _acquireSlot;
-    /** Specialized enqueues (zero-alloc on steady state) */
-    $enqueueRectangle(x: number, y: number, width: number, height: number, renderState: RenderState): number;
-    /** Enqueue a custom-shaded rectangle preserving order */
-    $enqueueCustomRect(x: number, y: number, width: number, height: number, shader: GLShader, uniforms: Record<string, any>, renderState: RenderState): number;
-    $enqueueLine(x1: number, y1: number, x2: number, y2: number, thickness: number | undefined, renderState: RenderState): number;
-    $enqueueEllipse(x: number, y: number, width: number, height: number, renderState: RenderState): number;
-    $enqueueArc(x: number, y: number, width: number, height: number, start: number, stop: number, renderState: RenderState): number;
-    $enqueueTriangle(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, renderState: RenderState): number;
-    $enqueueBezierCurve(x1: number, y1: number, cp1x: number, cp1y: number, cp2x: number, cp2y: number, x2: number, y2: number, thickness: number | undefined, renderState: RenderState): number;
-    /** Number of queued commands */
-    get length(): number;
-    /** True if no commands queued */
-    get isEmpty(): boolean;
-    /** Clear all queued commands */
-    $clear(): void;
-    /** Iterate in the exact order of insertion */
-    [Symbol.iterator](): Iterator<DrawCommand>;
-}

package/dist/types/rendering/webgl/RenderPipeline.d.ts

@@ -1,30 +0,0 @@
-import type { IGeometry } from './types/GeometryTypes';
-import { GeometryType } from './types/GeometryTypes';
-import type { RenderContext } from './types/RenderTypes';
-import type { DrawCommand } from './types/DrawCommand';
-import { GLShader } from './Shader';
-interface IShaderProvider {
-    $getCopyShader(): GLShader;
-}
-/**
- * Execute draw commands exactly in the order they were enqueued while
- * still batching consecutive commands of the same geometry type to minimize
- * state changes and buffer uploads.
- */
-export declare class RenderPipeline {
-    private readonly _vaoMgr;
-    private readonly _gl;
-    private readonly _renderer;
-    private _tempRectFBO;
-    private _tempRectFBOSize;
-    constructor(gl: WebGL2RenderingContext, renderer: IShaderProvider);
-    $execute(context: RenderContext, commands: Iterable<DrawCommand>, geometries: Map<GeometryType, IGeometry>): void;
-    /** Execute a custom-shaded rectangle using provided shader/uniforms */
-    private _drawCustomRect;
-    /** Draw a rectangle with the specified shader, uniforms, and viewport handling */
-    private _drawRectangleWithShader;
-    private _getCopyShader;
-    private _getTempRectFBO;
-    $dispose(): void;
-}
-export {};

package/dist/types/rendering/webgl/RenderState.d.ts

@@ -1,73 +0,0 @@
-/**
- * Represents a snapshot of the current rendering state
- */
-export interface IRenderState {
-    _lineWeight: number;
-    _rotationX: number;
-    _rotationY: number;
-    _rotationZ: number;
-    _character: [number, number, number];
-    _charColor: [number, number, number, number];
-    _cellColor: [number, number, number, number];
-    _flipX: boolean;
-    _flipY: boolean;
-    _invert: boolean;
-    _charRotation: [number, number];
-}
-/**
- * Manages rendering state and provides push/pop functionality for state management
- */
-export declare class RenderState {
-    private _currentLineWeight;
-    private _currentRotationX;
-    private _currentRotationY;
-    private _currentRotationZ;
-    private _currentCharacter;
-    private _currentCharColor;
-    private _currentCellColor;
-    private _flipHorizontally;
-    private _flipVertically;
-    private _invert;
-    private _charRotation;
-    private _canvasBackgroundColor;
-    private _stateStack;
-    /**
-     * Save the current rendering state to the state stack
-     */
-    $push(): void;
-    /**
-     * Restore the most recently saved rendering state from the state stack
-     */
-    $pop(): void;
-    /**
-     * Write current state into an existing target object/struct to avoid allocations.
-     * The target is expected to have the same shape as RenderStateSnapshot, with mutable arrays.
-     */
-    $writeSnapshotTo(target: {
-        _lineWeight: number;
-        _rotationX: number;
-        _rotationY: number;
-        _rotationZ: number;
-        _character: number[];
-        _charColor: number[];
-        _cellColor: number[];
-        _flipX: boolean;
-        _flipY: boolean;
-        _invert: boolean;
-        _charRotation: number[];
-    }): void;
-    get lineWeight(): number;
-    get canvasBackgroundColor(): [number, number, number, number];
-    $setLineWeight(weight: number): void;
-    $setRotationX(degrees: number): void;
-    $setRotationY(degrees: number): void;
-    $setRotationZ(degrees: number): void;
-    $setCharacter(character: [number, number, number]): void;
-    $setCharColor(r: number, g?: number, b?: number, a?: number): void;
-    $setCellColor(r: number, g?: number, b?: number, a?: number): void;
-    $setFlipHorizontally(flip: boolean): void;
-    $setFlipVertically(flip: boolean): void;
-    $setInvert(invert: boolean): void;
-    $setCharRotation(rotation: number): void;
-    $setCanvasBackground(r: number, g: number, b: number, a: number): void;
-}

package/dist/types/rendering/webgl/Renderer.d.ts

@@ -1,158 +0,0 @@
-import { GLFramebuffer } from "./Framebuffer";
-import type { FramebufferOptions } from '../webgl/Framebuffer';
-import { GLShader } from "./Shader";
-import { RenderState } from "./RenderState";
-import type { TextmodeImage } from "../../textmode/TextmodeImage";
-/**
- * Core WebGL renderer that manages the WebGL context and provides high-level rendering operations
- */
-export declare class GLRenderer {
-    private _gl;
-    private _currentShader;
-    private _shaderManager;
-    private _userShader;
-    private _userUniforms;
-    private _ndcQuadBuffer;
-    private readonly _geometries;
-    private readonly _renderPipeline;
-    private readonly _drawQueue;
-    private _renderState;
-    private _stateStack;
-    constructor(gl: WebGL2RenderingContext);
-    /** Get or create a geometry instance */
-    private _getGeometry;
-    /**
-     * Set the current shader
-     */
-    $shader(shader: GLShader): void;
-    $createShader(vertexSource: string, fragmentSource: string): GLShader;
-    /**
-     * Get the shared MRT copy shader
-     */
-    $getCopyShader(): GLShader;
-    /**
-     * Get the main MRT draw shader
-     */
-    $getMainDrawShader(): GLShader;
-    /**
-     * Get the ASCII conversion shader
-     */
-    $getConversionShader(): GLShader;
-    /** Internal: image to MRT shader */
-    private $getImageToMRTShader;
-    /**
-     * Set a custom user shader for subsequent rendering operations
-     */
-    $setUserShader(shader: GLShader | null): void;
-    /**
-     * Set a uniform value for the current user shader
-     */
-    $setUniform(name: string, value: any): void;
-    /**
-     * Set multiple uniform values for the current user shader
-     */
-    $setUserUniforms(uniforms: Record<string, any>): void;
-    /**
-     * Create a filter shader using the standard instanced vertex shader
-     */
-    $createFilterShader(fragmentSource: string): GLShader;
-    /**
-     * Enqueue an image blit from a source MRT framebuffer to the current render target.
-     * This uses the internal copy shader and preserves draw ordering within the pipeline.
-     */
-    $imageRect(src: GLFramebuffer, x: number, y: number, width: number, height: number): void;
-    /**
-     * Enqueue drawing of an RGBA texture by converting to MRT attachments on the fly.
-     * The texture is sampled and resized into the target rect, writing brightness to character and grayscale to primary color.
-     */
-    /**
-     * Enqueue drawing of a TextmodeImage by converting its RGBA texture to MRT attachments on the fly.
-     * The method accepts only TextmodeImage to make the intent explicit and simplify callers.
-     */
-    $imageTexture(image: TextmodeImage, x: number, y: number, width: number, height: number): void;
-    /**
-     * Draw a quad covering the pixel rectangle (x, y, width, height) on the canvas.
-     * The quad is converted to NDC and rendered with the current shader using only a_position.
-     * Origin: top-left (canvas space)
-     */
-    $quadPixels(x: number, y: number, width: number, height: number): void;
-    /**
-     * Draw a rectangle.
-     */
-    $rect(x: number, y: number, width: number, height: number): void;
-    /**
-     * Draw a line from (x1, y1) to (x2, y2).
-     * @param x1 X-coordinate of the line start point
-     * @param y1 Y-coordinate of the line start point
-     * @param x2 X-coordinate of the line end point
-     * @param y2 Y-coordinate of the line end point
-     */
-    $line(x1: number, y1: number, x2: number, y2: number): void;
-    /**
-     * Draw an ellipse.
-     * @param x X coordinate (center)
-     * @param y Y coordinate (center)
-     * @param width Ellipse width
-     * @param height Ellipse height
-     */
-    $ellipse(x: number, y: number, width: number, height: number): void;
-    /**
-     * Draw a triangle.
-     * @param x1 First vertex X coordinate
-     * @param y1 First vertex Y coordinate
-     * @param x2 Second vertex X coordinate
-     * @param y2 Second vertex Y coordinate
-     * @param x3 Third vertex X coordinate
-     * @param y3 Third vertex Y coordinate
-     */
-    $triangle(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void;
-    /**
-     * Draw a bezier curve.
-     * @param x1 Start point X coordinate
-     * @param y1 Start point Y coordinate
-     * @param cp1x Control point 1 X coordinate
-     * @param cp1y Control point 1 Y coordinate
-     * @param cp2x Control point 2 X coordinate
-     * @param cp2y Control point 2 Y coordinate
-     * @param x2 End point X coordinate
-     * @param y2 End point Y coordinate
-     */
-    $bezierCurve(x1: number, y1: number, cp1x: number, cp1y: number, cp2x: number, cp2y: number, x2: number, y2: number): void;
-    /**
-     * Create a new framebuffer
-     */
-    $createFramebuffer(width: number, height: number, attachmentCount?: number, options?: FramebufferOptions): GLFramebuffer;
-    $arc(x: number, y: number, width: number, height: number, start: number, stop: number): void;
-    /**
-     * Fill the current framebuffer with a solid color
-     */
-    $background(r: number, g?: number, b?: number, a?: number): void;
-    /**
-     * Clear the current framebuffer
-     */
-    $clear(r?: number, g?: number, b?: number, a?: number): void;
-    /**
-     * Ensure viewport matches canvas dimensions
-     */
-    $resetViewport(): void;
-    /**
-     * Get the WebGL context
-     */
-    get context(): WebGLRenderingContext;
-    get state(): RenderState;
-    /** Internal: push a specific render state as current (used by user FBO begin) */
-    $pushState(state: RenderState): void;
-    /** Internal: pop the render state after user FBO end */
-    $popState(): void;
-    /**
-     * Flush all batched instances for instanced rendering.
-     * This must be called at the end of each frame to actually render the batched geometry.
-     * @param shader The instanced shader to use for rendering
-     */
-    $flushInstances(shader: GLShader): void;
-    /**
-     * Dispose of all WebGL resources managed by this renderer.
-     * This method is idempotent and safe to call multiple times.
-     */
-    $dispose(): void;
-}