@kosdev-code/kos-ui-sdk 0.1.0-dev.5053

package/models/models/canvas-dispatcher/types/index.d.ts

@@ -0,0 +1,192 @@
+export interface CanvasDispatcherOptions {}
+declare type Renderer = {
+  reset(): void;
+  renderFrame(width: number, height: number): void | Uint8ClampedArray;
+  readPixels(width: number, height: number): Uint8ClampedArray;
+  play?(): void;
+  pause?(): void;
+  dispose?(): void;
+};
+
+declare interface RendererConstructor {
+  new (data: RenderData): Renderer;
+}
+
+declare interface DoneAware {
+  onDone(cb: () => void): void;
+  isOneShot?: () => boolean; // optional flag
+}
+
+declare interface OneShotCapable extends DoneAware {
+  resetOneShot(): void;
+  signalDoneIfNeeded(): void;
+  readonly isOneShotDone: boolean;
+}
+
+declare type RendererOptions = "sweep" | "matrix" | "video" | "drop" | "none";
+
+declare type RendererMode =
+  | "video"
+  | "image"
+  | "color"
+  | "sequence"
+  | "matrix"
+  | "text"
+  | "overlay";
+declare interface RenderSpecification<T extends RendererMode> {
+  type: T;
+  id: string;
+  data: RenderDataSpecification<T>;
+  clearOnComplete?: boolean; // Optional: clear canvas when renderer completes (default depends on renderer type)
+}
+
+declare interface SourceRenderDataSpecification {
+  src: string;
+}
+
+declare interface VideoRenderDataSpecification
+  extends SourceRenderDataSpecification {
+  loop?: boolean | number; // true = infinite, number = specific loop count
+  startTime?: number; // optional start time in seconds
+  endTime?: number; // optional end time in seconds
+}
+
+declare interface ImageRenderDataSpecification
+  extends SourceRenderDataSpecification {
+  duration?: number; // how long to display in milliseconds
+  loop?: boolean | number; // for cycling through multiple images or repeating display
+  fadeIn?: number; // optional fade in duration in ms
+  fadeOut?: number; // optional fade out duration in ms
+  pauseBetweenLoops?: number; // pause duration in milliseconds between loops with blank screen
+  colorOverride?: { r: number; g: number; b: number } | string; // For SVGs: override fill colors (RGB object or hex string)
+  scroll?: {
+    enabled: boolean;
+    direction?: "left" | "right" | "up" | "down"; // default: 'left'
+    speed?: number; // pixels per second, default: 50
+    gap?: number; // gap between image repetitions in pixels, default: 0
+    maintainAspectRatio?: boolean; // default: true
+    height?: number; // explicit height (width calculated from aspect ratio)
+    width?: number; // explicit width (height calculated from aspect ratio)
+    offsetX?: number | "center"; // X position (default: 'center' for vertical scroll, 0 for horizontal)
+    offsetY?: number | "center"; // Y position (default: 'center' for horizontal scroll, 0 for vertical)
+  };
+}
+
+declare interface ColorRenderDataSpecification {
+  r?: number;
+  g?: number;
+  b?: number;
+  color?: { r: number; g: number; b: number } | string; // RGB object or hex string (alternative to r,g,b)
+}
+
+declare interface SequenceRenderDataSpecification {
+  patterns: string[]; // Array of pattern IDs to play in sequence
+  loop?: boolean | number; // Loop the entire sequence
+  transitionDuration?: number; // Optional transition time between patterns in ms
+  patternOverrides?: Record<string, any>; // Optional overrides for specific patterns
+}
+
+declare interface MatrixRenderDataSpecification {
+  speed?: number; // How many pixels each column advances per update (default: 1)
+  fallChance?: number; // Probability (0 to 1) that a column will fall on each frame (default: 0.7)
+  baseColor?: { r: number; g: number; b: number } | string; // Base RGB color for the matrix effect (RGB object or hex string)
+}
+
+declare interface TextRenderDataSpecification {
+  text: string; // The text to display (use \n for line breaks)
+  fontSize?: number; // Font size in pixels (default: 8, optimized for small LED panels)
+  fontFamily?: string; // Font family name (default: monospace font stack for LED readability)
+  lineHeight?: number; // Line height in pixels (default: fontSize + 2 for spacing)
+  color?: { r: number; g: number; b: number } | string; // Text color (RGB object or hex string, default: white)
+  duration?: number; // how long to display in milliseconds (for static text)
+  loop?: boolean | number; // for repeating display or scrolling
+  pauseBetweenLoops?: number; // pause duration in milliseconds between loops with blank screen
+  scroll?: {
+    enabled: boolean;
+    direction?: "left" | "right" | "up" | "down"; // default: 'left'
+    speed?: number; // pixels per second, default: 50
+    gap?: number; // gap between text repetitions in pixels, default: 0
+    offsetX?: number | "center"; // X position (default: 'center' for vertical scroll, 0 for horizontal)
+    offsetY?: number | "center"; // Y position (default: 'center' for horizontal scroll, 0 for vertical)
+  };
+}
+
+declare type OverlayPosition =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "center-left"
+  | "center"
+  | "center-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right";
+
+declare interface OverlayCustomPosition {
+  x: number;
+  y: number;
+}
+
+declare interface OverlayIconConfig {
+  src: string; // Image source for the overlay icon
+  size: number; // Size of the overlay icon (width and height)
+  position: OverlayPosition | OverlayCustomPosition; // Position of the overlay
+  offset?: { x?: number; y?: number }; // Optional offset from the position in pixels
+  opacity?: number; // Optional opacity (0-1)
+  persistent?: boolean; // Whether the overlay should always be visible (default: true)
+}
+
+declare interface OverlayRenderDataSpecification {
+  baseRenderer: {
+    type: string;
+    data: any;
+  }; // The base renderer configuration
+  overlays: OverlayIconConfig[]; // Array of overlay icons to display
+  persistOverlaysOnComplete?: boolean; // Whether overlays remain visible after base renderer completes (default: true)
+}
+
+declare type RenderDataSpecification<T extends RendererMode> = T extends "video"
+  ? VideoRenderDataSpecification
+  : T extends "image"
+  ? ImageRenderDataSpecification
+  : T extends "color"
+  ? ColorRenderDataSpecification
+  : T extends "sequence"
+  ? SequenceRenderDataSpecification
+  : T extends "matrix"
+  ? MatrixRenderDataSpecification
+  : T extends "text"
+  ? TextRenderDataSpecification
+  : T extends "overlay"
+  ? OverlayRenderDataSpecification
+  : any;
+
+declare type VideoRenderData = RenderSpecification<"video">;
+
+declare type ImageRenderData = RenderSpecification<"image">;
+
+declare type ColorRenderData = RenderSpecification<"color">;
+
+declare type MatrixRenderData = RenderSpecification<"matrix">;
+
+declare type TextRenderData = RenderSpecification<"text">;
+
+declare type OverlayRenderData = RenderSpecification<"overlay">;
+
+declare type RenderData =
+  | VideoRenderData
+  | ImageRenderData
+  | ColorRenderData
+  | MatrixRenderData
+  | TextRenderData
+  | OverlayRenderData
+  | any;
+
+declare interface EndpointData {
+  id: string;
+  apiPath: string;
+  height: number;
+  width: number;
+  fps: number;
+  durationMs?: number | null;
+}

package/models/models/canvas-dispatcher/utils/color-utils.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Color utility functions for canvas renderers
+ */
+export interface RgbColor {
+    r: number;
+    g: number;
+    b: number;
+}
+/**
+ * Converts a hex color string to RGB values
+ * @param hex - Hex color string (with or without #, e.g., "#ff0000", "ff0000", "#f00", "f00")
+ * @returns RGB color object with r, g, b values (0-255)
+ * @throws Error if hex string is invalid
+ */
+export declare function hexToRgb(hex: string): RgbColor;
+/**
+ * Normalizes a color value to RGB format
+ * @param color - Either an RGB object or hex string
+ * @returns RGB color object with r, g, b values (0-255)
+ */
+export declare function normalizeColor(color: RgbColor | string): RgbColor;
+/**
+ * Converts RGB values to a CSS-compatible rgb() string
+ * @param color - RGB color object or hex string
+ * @returns CSS rgb() string, e.g., "rgb(255,0,0)"
+ */
+export declare function toRgbString(color: RgbColor | string): string;
+/**
+ * Converts RGB values to hex string
+ * @param color - RGB color object
+ * @returns Hex color string with # prefix, e.g., "#ff0000"
+ */
+export declare function rgbToHex(color: RgbColor): string;
+//# sourceMappingURL=color-utils.d.ts.map

package/models/models/canvas-dispatcher/utils/color-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-utils.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/sdk/kos-ui-sdk/src/models/models/canvas-dispatcher/utils/color-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAwB9C;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAKjE;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAG5D;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,CAGhD"}

package/models/models/canvas-dispatcher/utils/encode-frame.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Encodes an RGBA frame into a specified format.
+ *
+ * @param rgba - A `Uint8ClampedArray` containing the RGBA pixel data of the frame.
+ * @param format - The desired output format. Can be either `'base64'` or `'rgb332'`.
+ *   - `'base64'`: Encodes the frame as a Base64 string.
+ *   - `'rgb332'`: Encodes the frame using the RGB332 color format.
+ * @param stripAlpha - A boolean indicating whether to exclude the alpha channel
+ *   from the encoding. If `true`, the alpha channel is removed.
+
+ * @returns A string representing the encoded frame in the specified format.
+ */
+export declare function encodeFrame(rgba: Uint8ClampedArray, format: "base64" | "rgb332", stripAlpha: boolean): string;
+//# sourceMappingURL=encode-frame.d.ts.map

package/models/models/canvas-dispatcher/utils/encode-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"encode-frame.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/sdk/kos-ui-sdk/src/models/models/canvas-dispatcher/utils/encode-frame.tsx"],"names":[],"mappings":"AAgBA;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,iBAAiB,EACvB,MAAM,EAAE,QAAQ,GAAG,QAAQ,EAC3B,UAAU,EAAE,OAAO,GAClB,MAAM,CAaR"}

package/models/models/canvas-dispatcher/utils/renderers/base/canvas-2d-renderer.d.ts

@@ -0,0 +1,37 @@
+import { Renderer } from '../../../types';
+
+/**
+ * An abstract base class for 2D canvas rendering. This class provides a foundational
+ * implementation for managing a canvas element and its 2D rendering context, as well
+ * as utility methods for rendering and pixel data extraction.
+ *
+ * Subclasses must implement the `reset` and `renderFrame` methods to define specific
+ * rendering behavior.
+ *
+ * @implements Renderer
+ */
+export declare abstract class Canvas2DRendererBase implements Renderer {
+    protected canvas: HTMLCanvasElement;
+    protected ctx: CanvasRenderingContext2D;
+    protected lastUpdate: number;
+    constructor();
+    dispose(): void;
+    /**
+     * Determines whether a specified time interval has elapsed since the last update.
+     *
+     * @param intervalMs - The time interval in milliseconds to check against.
+     * @returns `true` if the elapsed time since the last update is greater than or equal to the specified interval; otherwise, `false`.
+     */
+    protected shouldStep(intervalMs: number): boolean;
+    abstract reset(): void;
+    abstract renderFrame(width: number, height: number): void;
+    /**
+     * Reads pixel data from the canvas context within the specified width and height.
+     *
+     * @param width - The width of the area to read pixels from, starting at the top-left corner (0, 0).
+     * @param height - The height of the area to read pixels from, starting at the top-left corner (0, 0).
+     * @returns A `Uint8ClampedArray` containing the RGBA pixel data for the specified area.
+     */
+    readPixels(width: number, height: number): Uint8ClampedArray;
+}
+//# sourceMappingURL=canvas-2d-renderer.d.ts.map

package/models/models/canvas-dispatcher/utils/renderers/base/canvas-2d-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-2d-renderer.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/sdk/kos-ui-sdk/src/models/models/canvas-dispatcher/utils/renderers/base/canvas-2d-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C;;;;;;;;;GASG;AACH,8BAAsB,oBAAqB,YAAW,QAAQ;IAC5D,SAAS,CAAC,MAAM,EAAE,iBAAiB,CAAC;IACpC,SAAS,CAAC,GAAG,EAAE,wBAAwB,CAAC;IACxC,SAAS,CAAC,UAAU,SAAK;;IASzB,OAAO,IAAI,IAAI;IAIf;;;;;OAKG;IACH,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO;IAQjD,QAAQ,CAAC,KAAK,IAAI,IAAI;IACtB,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAEzD;;;;;;OAMG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,iBAAiB;CAG7D"}

package/models/models/canvas-dispatcher/utils/renderers/base/gradient-base-renderer.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=gradient-base-renderer.d.ts.map

package/models/models/canvas-dispatcher/utils/renderers/base/gradient-base-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient-base-renderer.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/sdk/kos-ui-sdk/src/models/models/canvas-dispatcher/utils/renderers/base/gradient-base-renderer.ts"],"names":[],"mappings":""}

package/models/models/canvas-dispatcher/utils/renderers/base/video-base-renderer.d.ts

@@ -0,0 +1,71 @@
+import { DoneAware, Renderer } from '../../../types';
+
+/**
+ * A base class for rendering video frames using a 2D canvas.
+ *
+ * Provides utilities for frame capture, playback control, and detecting when a video has finished playing.
+ * Implements the `Renderer` and `DoneAware` interfaces to integrate with a unified animation/rendering system.
+ */
+export declare class VideoRendererBase implements Renderer, DoneAware {
+    /** The underlying HTML video element used as the media source */
+    protected video: HTMLVideoElement;
+    /** Internal offscreen canvas used to draw current video frame */
+    protected canvas: HTMLCanvasElement;
+    /** 2D rendering context for the offscreen canvas */
+    protected ctx: CanvasRenderingContext2D;
+    /** Timestamp of the last update (used for throttling if needed) */
+    protected lastUpdate: number;
+    /** Callback to invoke when video playback completes */
+    private doneCallback;
+    /**
+     * Constructs a video renderer that will play and extract pixels from the provided source.
+     *
+     * @param src - The URL or path of the video to play
+     */
+    constructor({ src }: {
+        src: string;
+    });
+    private handleEnded;
+    /**
+     * Resets the video to the beginning and pauses playback.
+     */
+    reset(): void;
+    /**
+     * Starts or resumes playback of the video.
+     */
+    play(): void;
+    /**
+     * Pauses video playback.
+     */
+    pause(): void;
+    /**
+     * Draws the current video frame onto the offscreen canvas at the given resolution.
+     *
+     * @param width - Desired canvas width
+     * @param height - Desired canvas height
+     */
+    renderFrame(width: number, height: number): void;
+    /**
+     * Extracts the most recently rendered frame's pixel data as a flat RGBA array.
+     *
+     * @param width - Width of the canvas area to extract
+     * @param height - Height of the canvas area to extract
+     * @returns A Uint8ClampedArray containing RGBA values
+     */
+    readPixels(width: number, height: number): Uint8ClampedArray;
+    /**
+     * Registers a callback to be invoked once the video finishes playing.
+     *
+     * @param callback - Function to call on video end
+     */
+    onDone(callback: () => void): void;
+    dispose(): void;
+    /**
+     * Utility method for timing-based frame updates (optional use).
+     *
+     * @param intervalMs - Minimum time between steps in milliseconds
+     * @returns `true` if enough time has passed to trigger a new update
+     */
+    protected shouldStep(intervalMs: number): boolean;
+}
+//# sourceMappingURL=video-base-renderer.d.ts.map

package/models/models/canvas-dispatcher/utils/renderers/base/video-base-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-base-renderer.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/sdk/kos-ui-sdk/src/models/models/canvas-dispatcher/utils/renderers/base/video-base-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1D;;;;;GAKG;AACH,qBAAa,iBAAkB,YAAW,QAAQ,EAAE,SAAS;IAC3D,iEAAiE;IACjE,SAAS,CAAC,KAAK,EAAE,gBAAgB,CAAC;IAElC,iEAAiE;IACjE,SAAS,CAAC,MAAM,EAAE,iBAAiB,CAAC;IAEpC,oDAAoD;IACpD,SAAS,CAAC,GAAG,EAAE,wBAAwB,CAAC;IAExC,mEAAmE;IACnE,SAAS,CAAC,UAAU,SAAK;IAEzB,uDAAuD;IACvD,OAAO,CAAC,YAAY,CAA6B;IAEjD;;;;OAIG;gBACS,EAAE,GAAG,EAAE,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE;IAgBpC,OAAO,CAAC,WAAW;IAGnB;;OAEG;IACH,KAAK,IAAI,IAAI;IAMb;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;;;;OAKG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAShD;;;;;;OAMG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,iBAAiB;IAI5D;;;;OAIG;IACH,MAAM,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI;IAIlC,OAAO,IAAI,IAAI;IAUf;;;;;OAKG;IACH,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO;CAQlD"}

package/models/models/canvas-dispatcher/utils/renderers/base/webgl-base-renderer.d.ts

@@ -0,0 +1,51 @@
+import { Renderer } from '../../../types';
+
+/**
+ * Abstract base class for WebGL-based renderers.
+ *
+ * Provides a shared WebGL canvas, rendering context, and utility methods for
+ * consistent pixel reading and throttled animation timing.
+ */
+export declare abstract class WebGLRendererBase implements Renderer {
+    /** The internal offscreen canvas used for rendering */
+    protected canvas: HTMLCanvasElement;
+    /** The WebGL rendering context used to draw and sample frames */
+    protected gl: WebGLRenderingContext;
+    /** The last known canvas width used for reading pixels */
+    protected lastWidth: number;
+    /** The last known canvas height used for reading pixels */
+    protected lastHeight: number;
+    /** Timestamp of the last frame update used for throttling */
+    protected lastUpdate: number;
+    constructor();
+    /**
+     * Reset the internal renderer state.
+     * Must be implemented by subclasses to reset animation state.
+     */
+    abstract reset(): void;
+    /**
+     * Render a frame at the given resolution into the internal WebGL canvas.
+     * This method should perform the draw but not return the pixels.
+     *
+     * @param width - The width of the canvas to render to
+     * @param height - The height of the canvas to render to
+     */
+    abstract renderFrame(width: number, height: number): void;
+    /**
+     * Throttle rendering logic based on a minimum time interval.
+     *
+     * @param intervalMs - The minimum time in milliseconds between steps
+     * @returns `true` if enough time has passed to perform a new step
+     */
+    protected shouldStep(intervalMs: number): boolean;
+    /**
+     * Read and return the current pixel buffer from the WebGL canvas.
+     * The result is vertically flipped to match 2D canvas expectations.
+     *
+     * @param width - Optional override for width (defaults to `lastWidth`)
+     * @param height - Optional override for height (defaults to `lastHeight`)
+     * @returns A `Uint8ClampedArray` of RGBA pixel data
+     */
+    readPixels(width?: number, height?: number): Uint8ClampedArray;
+}
+//# sourceMappingURL=webgl-base-renderer.d.ts.map

package/models/models/canvas-dispatcher/utils/renderers/base/webgl-base-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgl-base-renderer.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/sdk/kos-ui-sdk/src/models/models/canvas-dispatcher/utils/renderers/base/webgl-base-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE/C;;;;;GAKG;AACH,8BAAsB,iBAAkB,YAAW,QAAQ;IACzD,uDAAuD;IACvD,SAAS,CAAC,MAAM,EAAE,iBAAiB,CAAC;IAEpC,iEAAiE;IACjE,SAAS,CAAC,EAAE,EAAE,qBAAqB,CAAC;IAEpC,0DAA0D;IAC1D,SAAS,CAAC,SAAS,SAAK;IAExB,2DAA2D;IAC3D,SAAS,CAAC,UAAU,SAAK;IAEzB,6DAA6D;IAC7D,SAAS,CAAC,UAAU,SAAK;;IASzB;;;OAGG;IACH,QAAQ,CAAC,KAAK,IAAI,IAAI;IAEtB;;;;;;OAMG;IACH,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAEzD;;;;;OAKG;IACH,SAAS,CAAC,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO;IASjD;;;;;;;OAOG;IACH,UAAU,CACR,KAAK,SAAiB,EACtB,MAAM,SAAkB,GACvB,iBAAiB;CAsBrB"}

package/models/models/canvas-dispatcher/utils/renderers/drop-renderer.d.ts

@@ -0,0 +1,60 @@
+import { WebGLRendererBase } from './base/webgl-base-renderer';
+import { Renderer } from '../../types';
+
+/**
+ * A WebGL-based renderer that creates a vertical color-drop animation.
+ *
+ * This renderer simulates falling color bands (like a waterfall or rain)
+ * by animating a vertical gradient of hues within a specified hue range.
+ *
+ * The animation is driven by a shader program and controlled through
+ * uniform parameters including `hueOffset`, `minHue`, and `maxHue`.
+ */
+export declare class DropRenderer extends WebGLRendererBase implements Renderer {
+    private program;
+    private posBuffer;
+    private aPosition;
+    private uMinHue;
+    private uMaxHue;
+    private uHueOffset;
+    private uGridHeight;
+    private minHue;
+    private maxHue;
+    private hueOffset;
+    private speedPx;
+    /**
+     * Creates a new DropRenderer with the specified scroll speed.
+     * @param speedPx - The vertical speed in pixels per update cycle.
+     */
+    constructor({ speedPx }?: {
+        speedPx?: number;
+    });
+    /**
+     * Resets the renderer's animation state to its initial values.
+     */
+    reset(): void;
+    /**
+     * Renders a new frame by updating hueOffset and redrawing the gradient.
+     *
+     * @param width - Width of the output frame
+     * @param height - Height of the output frame
+     */
+    renderFrame(width: number, height: number): void;
+    /**
+     * Compiles a GLSL shader of the given type.
+     *
+     * @param type - gl.VERTEX_SHADER or gl.FRAGMENT_SHADER
+     * @param source - GLSL source code
+     * @returns The compiled shader object
+     */
+    private compileShader;
+    /**
+     * Links a vertex and fragment shader into a complete WebGL program.
+     *
+     * @param vertexShader - Compiled vertex shader
+     * @param fragmentShader - Compiled fragment shader
+     * @returns The linked WebGL program
+     */
+    private createProgram;
+}
+//# sourceMappingURL=drop-renderer.d.ts.map

package/models/models/canvas-dispatcher/utils/renderers/drop-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-renderer.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/sdk/kos-ui-sdk/src/models/models/canvas-dispatcher/utils/renderers/drop-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D;;;;;;;;GAQG;AACH,qBAAa,YAAa,SAAQ,iBAAkB,YAAW,QAAQ;IAErE,OAAO,CAAC,OAAO,CAAe;IAC9B,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,WAAW,CAAuB;IAG1C,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,OAAO,CAAK;IAEpB;;;OAGG;gBACS,EAAE,OAAW,EAAE,GAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAO;IAwEtD;;OAEG;IACH,KAAK,IAAI,IAAI;IAKb;;;;;OAKG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IA6BhD;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAYrB;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;CAatB"}

package/models/models/canvas-dispatcher/utils/renderers/gradient-renderer.d.ts

@@ -0,0 +1,22 @@
+import { Canvas2DRendererBase } from './base/canvas-2d-renderer';
+import { OneShotCapable, Renderer } from '../../types';
+
+declare const GradientBase: import('./mixins/one-shot-renderer-mixin').AbstractConstructor<Canvas2DRendererBase & OneShotCapable>;
+export type GradientDirection = "horizontal" | "vertical" | "radial";
+export declare class GradientRenderer extends GradientBase implements Renderer, OneShotCapable {
+    private offset;
+    private speed;
+    private colors;
+    private direction;
+    private loop;
+    constructor({ colors, direction, speed, loop, }?: {
+        colors?: string[];
+        direction?: GradientDirection;
+        speed?: number;
+        loop?: boolean;
+    });
+    reset(): void;
+    renderFrame(width: number, height: number): void;
+}
+export {};
+//# sourceMappingURL=gradient-renderer.d.ts.map

package/models/models/canvas-dispatcher/utils/renderers/gradient-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient-renderer.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/sdk/kos-ui-sdk/src/models/models/canvas-dispatcher/utils/renderers/gradient-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAGjE,QAAA,MAAM,YAAY,uGAA6C,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,CAAC;AAErE,qBAAa,gBACX,SAAQ,YACR,YAAW,QAAQ,EAAE,cAAc;IAEnC,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,MAAM,CAAW;IACzB,OAAO,CAAC,SAAS,CAAoB;IACrC,OAAO,CAAC,IAAI,CAAU;gBAEV,EACV,MAAmC,EACnC,SAAwB,EACxB,KAAS,EACT,IAAW,GACZ,GAAE;QACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,SAAS,CAAC,EAAE,iBAAiB,CAAC;QAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,OAAO,CAAC;KACX;IAQG,KAAK,IAAI,IAAI;IAMb,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;CAyB1D"}

package/models/models/canvas-dispatcher/utils/renderers/image-renderer.d.ts

@@ -0,0 +1,15 @@
+import { Canvas2DRendererBase } from './base/canvas-2d-renderer';
+import { OneShotCapable, Renderer } from '../../types';
+
+declare const Base: import('./mixins/one-shot-renderer-mixin').AbstractConstructor<Canvas2DRendererBase & OneShotCapable>;
+export declare class ImageRenderer extends Base implements Renderer, OneShotCapable {
+    private img;
+    private loaded;
+    constructor({ src }: {
+        src: string;
+    });
+    reset(): void;
+    renderFrame(width: number, height: number): void;
+}
+export {};
+//# sourceMappingURL=image-renderer.d.ts.map

package/models/models/canvas-dispatcher/utils/renderers/image-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-renderer.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/sdk/kos-ui-sdk/src/models/models/canvas-dispatcher/utils/renderers/image-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAGjE,QAAA,MAAM,IAAI,uGAA6C,CAAC;AAExD,qBAAa,aAAc,SAAQ,IAAK,YAAW,QAAQ,EAAE,cAAc;IACzE,OAAO,CAAC,GAAG,CAAmB;IAC9B,OAAO,CAAC,MAAM,CAAS;gBAEX,EAAE,GAAG,EAAE,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE;IAY3B,KAAK,IAAI,IAAI;IAKb,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;CAS1D"}

package/models/models/canvas-dispatcher/utils/renderers/looping-video-renderer.d.ts

@@ -0,0 +1,30 @@
+import { VideoRendererBase } from './base/video-base-renderer';
+import { VideoRenderDataSpecification } from '../../types';
+
+/**
+ * Enhanced video renderer with configurable looping support.
+ *
+ * Supports:
+ * - Infinite looping (loop: true)
+ * - Fixed number of loops (loop: number)
+ * - Single play (loop: false or undefined)
+ * - Start/end time trimming
+ */
+export declare class LoopingVideoRenderer extends VideoRendererBase {
+    private loopConfig;
+    private currentLoopCount;
+    private startTime;
+    private endTime;
+    private completionCallback;
+    constructor(data: VideoRenderDataSpecification);
+    private handleTimeUpdate;
+    private handleVideoEnd;
+    reset(): void;
+    onDone(callback: () => void): void;
+    /**
+     * Returns true if this renderer should only play once (no looping)
+     */
+    isOneShot(): boolean;
+    dispose(): void;
+}
+//# sourceMappingURL=looping-video-renderer.d.ts.map

package/models/models/canvas-dispatcher/utils/renderers/looping-video-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"looping-video-renderer.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/sdk/kos-ui-sdk/src/models/models/canvas-dispatcher/utils/renderers/looping-video-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,aAAa,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D;;;;;;;;GAQG;AACH,qBAAa,oBAAqB,SAAQ,iBAAiB;IACzD,OAAO,CAAC,UAAU,CAAmB;IACrC,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,kBAAkB,CAA6B;gBAE3C,IAAI,EAAE,4BAA4B;IAsB9C,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,cAAc;IAmBb,KAAK,IAAI,IAAI;IAMb,MAAM,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI;IAI3C;;OAEG;IACH,SAAS,IAAI,OAAO;IAIX,OAAO,IAAI,IAAI;CAMzB"}

package/models/models/canvas-dispatcher/utils/renderers/matrix-renderer.d.ts

@@ -0,0 +1,44 @@
+import { Canvas2DRendererBase } from './base/canvas-2d-renderer';
+import { Renderer, MatrixRenderDataSpecification } from '../../types';
+
+/**
+ * A falling-character visual effect inspired by the Matrix.
+ *
+ * This renderer creates animated vertical columns of glowing characters that fall
+ * at different speeds and randomness, using a 2D canvas buffer.
+ */
+export declare class MatrixRenderer extends Canvas2DRendererBase implements Renderer {
+    /** Tracks the Y position of the falling highlight in each column */
+    private columns;
+    /** Probability that a column will advance during an update */
+    private fallChance;
+    /** Vertical step size (in pixels) for falling columns */
+    private speed;
+    /** Base color for the matrix rain effect */
+    private baseColor;
+    /** Calculated colors for different trail positions */
+    private trailColors;
+    /**
+     * Constructs a Matrix-style renderer.
+     *
+     * @param data - Matrix renderer configuration
+     */
+    constructor(data?: MatrixRenderDataSpecification);
+    /**
+     * Calculates the trail colors based on the base color.
+     * Creates a gradient from bright to dim for the trailing effect.
+     */
+    private calculateTrailColors;
+    /**
+     * Resets all column positions and timing state.
+     */
+    reset(): void;
+    /**
+     * Renders the next frame of the animation into the internal canvas buffer.
+     *
+     * @param width - Width of the canvas in pixels
+     * @param height - Height of the canvas in pixels
+     */
+    renderFrame(width: number, height: number): void;
+}
+//# sourceMappingURL=matrix-renderer.d.ts.map

package/models/models/canvas-dispatcher/utils/renderers/matrix-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"matrix-renderer.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/sdk/kos-ui-sdk/src/models/models/canvas-dispatcher/utils/renderers/matrix-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAA6B,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAGjE;;;;;GAKG;AACH,qBAAa,cAAe,SAAQ,oBAAqB,YAAW,QAAQ;IAC1E,oEAAoE;IACpE,OAAO,CAAC,OAAO,CAAgB;IAE/B,8DAA8D;IAC9D,OAAO,CAAC,UAAU,CAAS;IAE3B,yDAAyD;IACzD,OAAO,CAAC,KAAK,CAAS;IAEtB,4CAA4C;IAC5C,OAAO,CAAC,SAAS,CAAsC;IAEvD,sDAAsD;IACtD,OAAO,CAAC,WAAW,CAA6C;IAEhE;;;;OAIG;gBACS,IAAI,GAAE,6BAAkC;IAgBpD;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAkB5B;;OAEG;IACH,KAAK,IAAI,IAAI;IAKb;;;;;OAKG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;CAuDjD"}

package/models/models/canvas-dispatcher/utils/renderers/mixins/one-shot-renderer-mixin.d.ts

@@ -0,0 +1,5 @@
+import { OneShotCapable } from '../../../types';
+
+export type AbstractConstructor<T = any> = abstract new (...args: any[]) => T;
+export declare function OneShotRendererMixin<TBase extends AbstractConstructor>(Base: TBase): AbstractConstructor<InstanceType<TBase> & OneShotCapable>;
+//# sourceMappingURL=one-shot-renderer-mixin.d.ts.map

package/models/models/canvas-dispatcher/utils/renderers/mixins/one-shot-renderer-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"one-shot-renderer-mixin.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/sdk/kos-ui-sdk/src/models/models/canvas-dispatcher/utils/renderers/mixins/one-shot-renderer-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,GAAG,IAAI,QAAQ,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAE9E,wBAAgB,oBAAoB,CAAC,KAAK,SAAS,mBAAmB,EACpE,IAAI,EAAE,KAAK,GACV,mBAAmB,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,cAAc,CAAC,CAiC3D"}