@nexart/ui-renderer 0.1.0 → 0.2.1

package/dist/capabilities.js

@@ -0,0 +1,338 @@
+/**
+ * @nexart/ui-renderer v0.2.0 - Capabilities Discovery
+ *
+ * Exposes SDK capabilities for AI tools and builders.
+ * Critical for preventing hallucination and SDK bypass.
+ */
+export function getCapabilities() {
+    return {
+        version: '0.2.0',
+        isCanonical: false,
+        isArchival: false,
+        renderer: '@nexart/ui-renderer',
+        primitives: [
+            {
+                type: 'dots',
+                description: 'Scattered dot patterns with various distributions',
+                parameters: {
+                    distribution: {
+                        type: 'enum',
+                        required: true,
+                        description: 'How dots are distributed across the canvas',
+                        options: ['random', 'radial', 'grid', 'spiral'],
+                    },
+                    count: {
+                        type: 'number',
+                        required: true,
+                        description: 'Number of dots to render',
+                        min: 1,
+                        max: 10000,
+                    },
+                    size: {
+                        type: 'tuple',
+                        required: true,
+                        description: 'Size range [min, max] in pixels',
+                        tupleLength: 2,
+                    },
+                    color: {
+                        type: 'string',
+                        required: false,
+                        description: 'CSS color or named color',
+                        default: 'white',
+                    },
+                    opacity: {
+                        type: 'number',
+                        required: false,
+                        description: 'Opacity from 0 to 1',
+                        min: 0,
+                        max: 1,
+                        default: 1,
+                    },
+                },
+            },
+            {
+                type: 'lines',
+                description: 'Linear patterns in various directions',
+                parameters: {
+                    direction: {
+                        type: 'enum',
+                        required: true,
+                        description: 'Direction of lines',
+                        options: ['horizontal', 'vertical', 'diagonal', 'radial'],
+                    },
+                    count: {
+                        type: 'number',
+                        required: true,
+                        description: 'Number of lines',
+                        min: 1,
+                        max: 500,
+                    },
+                    thickness: {
+                        type: 'tuple',
+                        required: true,
+                        description: 'Thickness range [min, max] in pixels',
+                        tupleLength: 2,
+                    },
+                    color: {
+                        type: 'string',
+                        required: false,
+                        description: 'CSS color or named color',
+                        default: 'white',
+                    },
+                    opacity: {
+                        type: 'number',
+                        required: false,
+                        description: 'Opacity from 0 to 1',
+                        min: 0,
+                        max: 1,
+                        default: 1,
+                    },
+                },
+            },
+            {
+                type: 'waves',
+                description: 'Sinusoidal wave patterns',
+                parameters: {
+                    axis: {
+                        type: 'enum',
+                        required: true,
+                        description: 'Primary axis of wave motion',
+                        options: ['x', 'y'],
+                    },
+                    amplitude: {
+                        type: 'number',
+                        required: true,
+                        description: 'Wave height as fraction of canvas (0-1)',
+                        min: 0,
+                        max: 1,
+                    },
+                    frequency: {
+                        type: 'number',
+                        required: true,
+                        description: 'Number of wave cycles',
+                        min: 0.1,
+                        max: 10,
+                    },
+                    count: {
+                        type: 'number',
+                        required: false,
+                        description: 'Number of parallel waves',
+                        min: 1,
+                        max: 50,
+                        default: 8,
+                    },
+                    color: {
+                        type: 'string',
+                        required: false,
+                        description: 'CSS color or named color',
+                        default: 'white',
+                    },
+                    opacity: {
+                        type: 'number',
+                        required: false,
+                        description: 'Opacity from 0 to 1',
+                        min: 0,
+                        max: 1,
+                        default: 1,
+                    },
+                },
+            },
+            {
+                type: 'grid',
+                description: 'Regular grid of shapes',
+                parameters: {
+                    rows: {
+                        type: 'number',
+                        required: true,
+                        description: 'Number of rows',
+                        min: 1,
+                        max: 100,
+                    },
+                    cols: {
+                        type: 'number',
+                        required: true,
+                        description: 'Number of columns',
+                        min: 1,
+                        max: 100,
+                    },
+                    shape: {
+                        type: 'enum',
+                        required: true,
+                        description: 'Shape at each grid point',
+                        options: ['square', 'circle', 'diamond'],
+                    },
+                    cellSize: {
+                        type: 'number',
+                        required: false,
+                        description: 'Size of each cell shape in pixels',
+                    },
+                    color: {
+                        type: 'string',
+                        required: false,
+                        description: 'CSS color or named color',
+                        default: 'white',
+                    },
+                    opacity: {
+                        type: 'number',
+                        required: false,
+                        description: 'Opacity from 0 to 1',
+                        min: 0,
+                        max: 1,
+                        default: 1,
+                    },
+                },
+            },
+            {
+                type: 'flowField',
+                description: 'Particle traces following a noise-based vector field',
+                parameters: {
+                    resolution: {
+                        type: 'number',
+                        required: true,
+                        description: 'Grid resolution for noise sampling',
+                        min: 5,
+                        max: 100,
+                    },
+                    strength: {
+                        type: 'number',
+                        required: true,
+                        description: 'Field influence strength (0-1)',
+                        min: 0,
+                        max: 1,
+                    },
+                    particles: {
+                        type: 'number',
+                        required: true,
+                        description: 'Number of particles',
+                        min: 10,
+                        max: 5000,
+                    },
+                    color: {
+                        type: 'string',
+                        required: false,
+                        description: 'CSS color or named color',
+                        default: 'white',
+                    },
+                    opacity: {
+                        type: 'number',
+                        required: false,
+                        description: 'Opacity from 0 to 1',
+                        min: 0,
+                        max: 1,
+                        default: 1,
+                    },
+                },
+            },
+            {
+                type: 'orbits',
+                description: 'Circular orbital patterns with dots',
+                parameters: {
+                    count: {
+                        type: 'number',
+                        required: true,
+                        description: 'Number of orbital rings',
+                        min: 1,
+                        max: 20,
+                    },
+                    radius: {
+                        type: 'tuple',
+                        required: true,
+                        description: 'Radius range [min, max] in pixels',
+                        tupleLength: 2,
+                    },
+                    dotCount: {
+                        type: 'number',
+                        required: true,
+                        description: 'Dots per orbit',
+                        min: 1,
+                        max: 200,
+                    },
+                    speed: {
+                        type: 'number',
+                        required: false,
+                        description: 'Rotation speed multiplier',
+                        min: 0,
+                        max: 5,
+                        default: 1,
+                    },
+                    color: {
+                        type: 'string',
+                        required: false,
+                        description: 'CSS color or named color',
+                        default: 'white',
+                    },
+                    opacity: {
+                        type: 'number',
+                        required: false,
+                        description: 'Opacity from 0 to 1',
+                        min: 0,
+                        max: 1,
+                        default: 1,
+                    },
+                },
+            },
+        ],
+        background: {
+            color: {
+                type: 'string',
+                required: true,
+                description: 'Background color (CSS color or named color like "blue", "black", "#1a1a2e")',
+            },
+            texture: {
+                type: 'enum',
+                required: false,
+                description: 'Background texture overlay',
+                options: ['none', 'noise', 'grain'],
+                default: 'none',
+            },
+            gradient: {
+                type: {
+                    type: 'enum',
+                    required: true,
+                    description: 'Gradient type',
+                    options: ['linear', 'radial'],
+                },
+                colors: {
+                    type: 'string',
+                    required: true,
+                    description: 'Array of CSS colors (minimum 2)',
+                },
+                angle: {
+                    type: 'number',
+                    required: false,
+                    description: 'Gradient angle in degrees (linear only)',
+                    min: 0,
+                    max: 360,
+                },
+            },
+        },
+        motion: {
+            sources: ['none', 'time', 'seed'],
+            speed: {
+                type: 'number',
+                required: false,
+                description: 'Animation speed multiplier',
+                min: 0,
+                max: 5,
+                default: 1,
+            },
+        },
+        limits: {
+            maxElements: 20,
+            maxParticles: 5000,
+            maxDots: 10000,
+            maxLines: 500,
+            maxOrbits: 20,
+            maxGridSize: 100,
+        },
+    };
+}
+export function getPrimitiveTypes() {
+    return ['dots', 'lines', 'waves', 'grid', 'flowField', 'orbits'];
+}
+export function getMotionSources() {
+    return ['none', 'time', 'seed'];
+}
+export function getBackgroundTextures() {
+    return ['none', 'noise', 'grain'];
+}

package/dist/compiler.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @nexart/ui-renderer v0.2.0 - System Compiler
+ *
+ * Compiles validated systems into canonical protocol-compatible JSON.
+ */
+import type { NexArtSystem } from './types';
+export interface CompiledSystem {
+    protocol: 'nexart';
+    systemVersion: string;
+    seed: number;
+    background: {
+        color: string;
+        texture: string;
+        gradient?: {
+            type: string;
+            colors: string[];
+            angle?: number;
+        };
+    };
+    elements: Array<{
+        type: string;
+        [key: string]: unknown;
+    }>;
+    motion: {
+        source: string;
+        speed?: number;
+    };
+    deterministic: boolean;
+    compiledAt: string;
+    compilerVersion: string;
+}
+export declare function compileSystem(system: NexArtSystem): CompiledSystem;
+export declare function serializeSystem(system: NexArtSystem): string;
+//# sourceMappingURL=compiler.d.ts.map

package/dist/compiler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compiler.d.ts","sourceRoot":"","sources":["../src/compiler.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAiB,MAAM,SAAS,CAAC;AAG3D,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE;YACT,IAAI,EAAE,MAAM,CAAC;YACb,MAAM,EAAE,MAAM,EAAE,CAAC;YACjB,KAAK,CAAC,EAAE,MAAM,CAAC;SAChB,CAAC;KACH,CAAC;IACF,QAAQ,EAAE,KAAK,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;CACzB;AAID,wBAAgB,aAAa,CAAC,MAAM,EAAE,YAAY,GAAG,cAAc,CAyClE;AAuCD,wBAAgB,eAAe,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAG5D"}

package/dist/compiler.js

@@ -0,0 +1,80 @@
+/**
+ * @nexart/ui-renderer v0.2.0 - System Compiler
+ *
+ * Compiles validated systems into canonical protocol-compatible JSON.
+ */
+import { validateSystem } from './system';
+const COMPILER_VERSION = '0.2.0';
+export function compileSystem(system) {
+    const validation = validateSystem({
+        seed: system.seed,
+        background: system.background,
+        elements: system.elements,
+        motion: system.motion,
+    });
+    if (!validation.valid) {
+        throw new Error(`Cannot compile invalid system: ${validation.errors.join('; ')}`);
+    }
+    const compiled = {
+        protocol: 'nexart',
+        systemVersion: system.systemVersion,
+        seed: system.seed,
+        background: {
+            color: normalizeColor(system.background.color),
+            texture: system.background.texture || 'none',
+        },
+        elements: system.elements.map(normalizeElement),
+        motion: {
+            source: system.motion.source,
+            ...(system.motion.speed !== undefined && { speed: system.motion.speed }),
+        },
+        deterministic: true,
+        compiledAt: new Date().toISOString(),
+        compilerVersion: COMPILER_VERSION,
+    };
+    if (system.background.gradient) {
+        compiled.background.gradient = {
+            type: system.background.gradient.type,
+            colors: system.background.gradient.colors.map(normalizeColor),
+            ...(system.background.gradient.angle !== undefined && {
+                angle: system.background.gradient.angle,
+            }),
+        };
+    }
+    return compiled;
+}
+function normalizeColor(color) {
+    const colorMap = {
+        red: '#ff0000',
+        green: '#00ff00',
+        blue: '#0000ff',
+        black: '#000000',
+        white: '#ffffff',
+        yellow: '#ffff00',
+        cyan: '#00ffff',
+        magenta: '#ff00ff',
+        orange: '#ff8000',
+        purple: '#8000ff',
+        pink: '#ff0080',
+        gray: '#808080',
+        grey: '#808080',
+    };
+    const lower = color.toLowerCase();
+    return colorMap[lower] || color;
+}
+function normalizeElement(element) {
+    const normalized = { type: element.type };
+    for (const [key, value] of Object.entries(element)) {
+        if (value !== undefined && value !== null) {
+            normalized[key] = value;
+        }
+    }
+    if (normalized.opacity === undefined) {
+        normalized.opacity = 1;
+    }
+    return normalized;
+}
+export function serializeSystem(system) {
+    const compiled = compileSystem(system);
+    return JSON.stringify(compiled, null, 2);
+}

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 /**
  * @nexart/ui-renderer
- * Version: 0.1.0
+ * Version: 0.2.0
  *
- * Browser-first UI renderer for exploratory generative art.
+ * Declarative System Authoring SDK for NexArt Protocol
  *
- * ⚠️ WARNING: This SDK is for exploration and UI rendering only.
+ * ⚠️ IMPORTANT DISCLAIMER
+ *
+ * This SDK is for authoring and preview only.
  * Canonical, archival output is produced exclusively by @nexart/codemode-sdk.
  *
  * This renderer is:
@@ -12,8 +14,21 @@
  * - NOT archival
  * - NOT protocol-authoritative
  *
- * Use it for demos, playgrounds, miniapps, and experimentation.
+ * Use it for:
+ * - Creating NexArt systems declaratively
+ * - Previewing systems in the browser
+ * - Compiling systems to protocol-compatible JSON
+ * - Building platforms, tools, and integrations
  */
-export { createUIRenderer } from './renderer';
-export type { UIRendererOptions, UIRenderer } from './renderer';
+export { createSystem, validateSystem } from './system';
+export { compileSystem, serializeSystem } from './compiler';
+export { previewSystem } from './preview/renderer';
+export { getCapabilities, getPrimitiveTypes, getMotionSources, getBackgroundTextures, } from './capabilities';
+export type { NexArtSystemInput, NexArtSystem, SystemElement, DotsElement, LinesElement, WavesElement, GridElement, FlowFieldElement, OrbitsElement, BackgroundConfig, MotionConfig, PreviewOptions, ValidationResult, } from './types';
+export type { Capabilities, PrimitiveCapability, ParameterSpec, } from './capabilities';
+export declare const SDK_VERSION = "0.2.1";
+export declare const PROTOCOL_VERSION = "0.2";
+export declare const IS_CANONICAL = false;
+export declare const IS_ARCHIVAL = false;
+export declare const RENDERER = "@nexart/ui-renderer";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AAExB,YAAY,EACV,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,gBAAgB,GACjB,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,YAAY,EACZ,mBAAmB,EACnB,aAAa,GACd,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,WAAW,UAAU,CAAC;AACnC,eAAO,MAAM,gBAAgB,QAAQ,CAAC;AACtC,eAAO,MAAM,YAAY,QAAQ,CAAC;AAClC,eAAO,MAAM,WAAW,QAAQ,CAAC;AACjC,eAAO,MAAM,QAAQ,wBAAwB,CAAC"}

package/dist/index.js

@@ -1,10 +1,12 @@
 /**
  * @nexart/ui-renderer
- * Version: 0.1.0
+ * Version: 0.2.0
  *
- * Browser-first UI renderer for exploratory generative art.
+ * Declarative System Authoring SDK for NexArt Protocol
  *
- * ⚠️ WARNING: This SDK is for exploration and UI rendering only.
+ * ⚠️ IMPORTANT DISCLAIMER
+ *
+ * This SDK is for authoring and preview only.
  * Canonical, archival output is produced exclusively by @nexart/codemode-sdk.
  *
  * This renderer is:
@@ -12,6 +14,18 @@
  * - NOT archival
  * - NOT protocol-authoritative
  *
- * Use it for demos, playgrounds, miniapps, and experimentation.
+ * Use it for:
+ * - Creating NexArt systems declaratively
+ * - Previewing systems in the browser
+ * - Compiling systems to protocol-compatible JSON
+ * - Building platforms, tools, and integrations
  */
-export { createUIRenderer } from './renderer';
+export { createSystem, validateSystem } from './system';
+export { compileSystem, serializeSystem } from './compiler';
+export { previewSystem } from './preview/renderer';
+export { getCapabilities, getPrimitiveTypes, getMotionSources, getBackgroundTextures, } from './capabilities';
+export const SDK_VERSION = '0.2.1';
+export const PROTOCOL_VERSION = '0.2';
+export const IS_CANONICAL = false;
+export const IS_ARCHIVAL = false;
+export const RENDERER = '@nexart/ui-renderer';

package/dist/preview/primitives/dots.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Dots Primitive Renderer
+ */
+import type { DotsElement } from '../../types';
+export declare function renderDots(ctx: CanvasRenderingContext2D, el: DotsElement, width: number, height: number, random: () => number, t: number): void;
+//# sourceMappingURL=dots.d.ts.map

package/dist/preview/primitives/dots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dots.d.ts","sourceRoot":"","sources":["../../../src/preview/primitives/dots.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,wBAAgB,UAAU,CACxB,GAAG,EAAE,wBAAwB,EAC7B,EAAE,EAAE,WAAW,EACf,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,MAAM,EACpB,CAAC,EAAE,MAAM,GACR,IAAI,CA2DN"}

package/dist/preview/primitives/dots.js

@@ -0,0 +1,53 @@
+/**
+ * Dots Primitive Renderer
+ */
+export function renderDots(ctx, el, width, height, random, t) {
+    const color = el.color || 'white';
+    const opacity = el.opacity ?? 1;
+    ctx.fillStyle = color;
+    ctx.globalAlpha = opacity;
+    const cx = width / 2;
+    const cy = height / 2;
+    for (let i = 0; i < el.count; i++) {
+        let x, y;
+        const size = el.size[0] + random() * (el.size[1] - el.size[0]);
+        switch (el.distribution) {
+            case 'random':
+                x = random() * width;
+                y = random() * height;
+                break;
+            case 'radial': {
+                const angle = random() * Math.PI * 2;
+                const radius = random() * Math.min(width, height) * 0.45;
+                x = cx + Math.cos(angle + t * 0.5) * radius;
+                y = cy + Math.sin(angle + t * 0.5) * radius;
+                break;
+            }
+            case 'grid': {
+                const cols = Math.ceil(Math.sqrt(el.count));
+                const rows = Math.ceil(el.count / cols);
+                const col = i % cols;
+                const row = Math.floor(i / cols);
+                const cellW = width / cols;
+                const cellH = height / rows;
+                x = cellW * (col + 0.5) + (random() - 0.5) * cellW * 0.3;
+                y = cellH * (row + 0.5) + (random() - 0.5) * cellH * 0.3;
+                break;
+            }
+            case 'spiral': {
+                const spiralAngle = (i / el.count) * Math.PI * 8 + t;
+                const spiralRadius = (i / el.count) * Math.min(width, height) * 0.45;
+                x = cx + Math.cos(spiralAngle) * spiralRadius;
+                y = cy + Math.sin(spiralAngle) * spiralRadius;
+                break;
+            }
+            default:
+                x = random() * width;
+                y = random() * height;
+        }
+        ctx.beginPath();
+        ctx.arc(x, y, size, 0, Math.PI * 2);
+        ctx.fill();
+    }
+    ctx.globalAlpha = 1;
+}

package/dist/preview/primitives/flow.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Flow Field Primitive Renderer
+ */
+import type { FlowFieldElement } from '../../types';
+export declare function renderFlowField(ctx: CanvasRenderingContext2D, el: FlowFieldElement, width: number, height: number, random: () => number, seed: number, t: number): void;
+//# sourceMappingURL=flow.d.ts.map

package/dist/preview/primitives/flow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow.d.ts","sourceRoot":"","sources":["../../../src/preview/primitives/flow.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,wBAAgB,eAAe,CAC7B,GAAG,EAAE,wBAAwB,EAC7B,EAAE,EAAE,gBAAgB,EACpB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,MAAM,EACpB,IAAI,EAAE,MAAM,EACZ,CAAC,EAAE,MAAM,GACR,IAAI,CAsCN"}

package/dist/preview/primitives/flow.js

@@ -0,0 +1,32 @@
+/**
+ * Flow Field Primitive Renderer
+ */
+export function renderFlowField(ctx, el, width, height, random, seed, t) {
+    const color = el.color || 'white';
+    const opacity = el.opacity ?? 1;
+    ctx.strokeStyle = color;
+    ctx.globalAlpha = opacity * 0.6;
+    ctx.lineWidth = 1;
+    const noise2D = (x, y) => {
+        const n = Math.sin(x * 12.9898 + y * 78.233 + seed * 0.001) * 43758.5453;
+        return n - Math.floor(n);
+    };
+    for (let i = 0; i < el.particles; i++) {
+        let x = random() * width;
+        let y = random() * height;
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        const steps = 15 + Math.floor(random() * 20);
+        for (let s = 0; s < steps; s++) {
+            const noiseVal = noise2D(x / el.resolution, y / el.resolution + t * 0.3);
+            const angle = noiseVal * Math.PI * 4 * el.strength;
+            x += Math.cos(angle) * 3;
+            y += Math.sin(angle) * 3;
+            if (x < 0 || x > width || y < 0 || y > height)
+                break;
+            ctx.lineTo(x, y);
+        }
+        ctx.stroke();
+    }
+    ctx.globalAlpha = 1;
+}

package/dist/preview/primitives/grid.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Grid Primitive Renderer
+ */
+import type { GridElement } from '../../types';
+export declare function renderGrid(ctx: CanvasRenderingContext2D, el: GridElement, width: number, height: number, random: () => number, t: number): void;
+//# sourceMappingURL=grid.d.ts.map

package/dist/preview/primitives/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/preview/primitives/grid.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,wBAAgB,UAAU,CACxB,GAAG,EAAE,wBAAwB,EAC7B,EAAE,EAAE,WAAW,EACf,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,MAAM,EACpB,CAAC,EAAE,MAAM,GACR,IAAI,CA4CN"}