@nexart/ui-renderer 0.1.0 → 0.2.0

package/dist/preview/primitives/grid.js

@@ -0,0 +1,38 @@
+/**
+ * Grid Primitive Renderer
+ */
+export function renderGrid(ctx, el, width, height, random, t) {
+    const color = el.color || 'white';
+    const opacity = el.opacity ?? 1;
+    ctx.fillStyle = color;
+    ctx.globalAlpha = opacity;
+    const cellW = width / el.cols;
+    const cellH = height / el.rows;
+    const baseSize = el.cellSize || Math.min(cellW, cellH) * 0.4;
+    for (let row = 0; row < el.rows; row++) {
+        for (let col = 0; col < el.cols; col++) {
+            const x = cellW * (col + 0.5);
+            const y = cellH * (row + 0.5);
+            const pulse = 1 + Math.sin((row + col) * 0.5 + t * 3) * 0.2;
+            const size = baseSize * pulse;
+            ctx.beginPath();
+            switch (el.shape) {
+                case 'circle':
+                    ctx.arc(x, y, size / 2, 0, Math.PI * 2);
+                    break;
+                case 'square':
+                    ctx.rect(x - size / 2, y - size / 2, size, size);
+                    break;
+                case 'diamond':
+                    ctx.moveTo(x, y - size / 2);
+                    ctx.lineTo(x + size / 2, y);
+                    ctx.lineTo(x, y + size / 2);
+                    ctx.lineTo(x - size / 2, y);
+                    ctx.closePath();
+                    break;
+            }
+            ctx.fill();
+        }
+    }
+    ctx.globalAlpha = 1;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"lines.d.ts","sourceRoot":"","sources":["../../../src/preview/primitives/lines.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,wBAAgB,WAAW,CACzB,GAAG,EAAE,wBAAwB,EAC7B,EAAE,EAAE,YAAY,EAChB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,MAAM,EACpB,CAAC,EAAE,MAAM,GACR,IAAI,CAqDN"}

package/dist/preview/primitives/lines.js

@@ -0,0 +1,47 @@
+/**
+ * Lines Primitive Renderer
+ */
+export function renderLines(ctx, el, width, height, random, t) {
+    const color = el.color || 'white';
+    const opacity = el.opacity ?? 1;
+    ctx.strokeStyle = color;
+    ctx.globalAlpha = opacity;
+    const cx = width / 2;
+    const cy = height / 2;
+    for (let i = 0; i < el.count; i++) {
+        const thickness = el.thickness[0] + random() * (el.thickness[1] - el.thickness[0]);
+        ctx.lineWidth = thickness;
+        ctx.beginPath();
+        switch (el.direction) {
+            case 'horizontal': {
+                const y = (i / el.count) * height;
+                const wobble = Math.sin(i * 0.5 + t * 2) * 10;
+                ctx.moveTo(0, y + wobble);
+                ctx.lineTo(width, y + wobble);
+                break;
+            }
+            case 'vertical': {
+                const x = (i / el.count) * width;
+                const wobble = Math.sin(i * 0.5 + t * 2) * 10;
+                ctx.moveTo(x + wobble, 0);
+                ctx.lineTo(x + wobble, height);
+                break;
+            }
+            case 'diagonal': {
+                const offset = (i / el.count) * (width + height) - height;
+                ctx.moveTo(offset, 0);
+                ctx.lineTo(offset + height, height);
+                break;
+            }
+            case 'radial': {
+                const angle = (i / el.count) * Math.PI * 2 + t * 0.2;
+                const len = Math.min(width, height) * 0.4;
+                ctx.moveTo(cx, cy);
+                ctx.lineTo(cx + Math.cos(angle) * len, cy + Math.sin(angle) * len);
+                break;
+            }
+        }
+        ctx.stroke();
+    }
+    ctx.globalAlpha = 1;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"orbits.d.ts","sourceRoot":"","sources":["../../../src/preview/primitives/orbits.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,wBAAgB,YAAY,CAC1B,GAAG,EAAE,wBAAwB,EAC7B,EAAE,EAAE,aAAa,EACjB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,MAAM,EACpB,CAAC,EAAE,MAAM,GACR,IAAI,CAgCN"}

package/dist/preview/primitives/orbits.js

@@ -0,0 +1,27 @@
+/**
+ * Orbits Primitive Renderer
+ */
+export function renderOrbits(ctx, el, width, height, random, t) {
+    const color = el.color || 'white';
+    const opacity = el.opacity ?? 1;
+    const speed = el.speed ?? 1;
+    ctx.fillStyle = color;
+    ctx.globalAlpha = opacity;
+    const cx = width / 2;
+    const cy = height / 2;
+    for (let o = 0; o < el.count; o++) {
+        const orbitRadius = el.radius[0] + (random() * (el.radius[1] - el.radius[0]));
+        const orbitPhase = random() * Math.PI * 2;
+        for (let d = 0; d < el.dotCount; d++) {
+            const angle = (d / el.dotCount) * Math.PI * 2 + t * speed + orbitPhase;
+            const wobble = Math.sin(angle * 3 + t * 2) * 10;
+            const x = cx + Math.cos(angle) * (orbitRadius + wobble);
+            const y = cy + Math.sin(angle) * (orbitRadius + wobble);
+            const size = 2 + random() * 3;
+            ctx.beginPath();
+            ctx.arc(x, y, size, 0, Math.PI * 2);
+            ctx.fill();
+        }
+    }
+    ctx.globalAlpha = 1;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"waves.d.ts","sourceRoot":"","sources":["../../../src/preview/primitives/waves.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,wBAAgB,WAAW,CACzB,GAAG,EAAE,wBAAwB,EAC7B,EAAE,EAAE,YAAY,EAChB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,MAAM,EACpB,CAAC,EAAE,MAAM,GACR,IAAI,CA2CN"}

package/dist/preview/primitives/waves.js

@@ -0,0 +1,44 @@
+/**
+ * Waves Primitive Renderer
+ */
+export function renderWaves(ctx, el, width, height, random, t) {
+    const color = el.color || 'white';
+    const opacity = el.opacity ?? 1;
+    const count = el.count || 8;
+    ctx.strokeStyle = color;
+    ctx.globalAlpha = opacity;
+    ctx.lineWidth = 2;
+    const maxAmp = Math.min(width, height) * 0.3 * el.amplitude;
+    for (let w = 0; w < count; w++) {
+        const waveOffset = w / count;
+        ctx.beginPath();
+        if (el.axis === 'x') {
+            const baseY = height * (0.2 + waveOffset * 0.6);
+            for (let x = 0; x <= width; x += 5) {
+                const phase = (x / width) * Math.PI * 2 * el.frequency + t * 2 + w;
+                const y = baseY + Math.sin(phase) * maxAmp;
+                if (x === 0) {
+                    ctx.moveTo(x, y);
+                }
+                else {
+                    ctx.lineTo(x, y);
+                }
+            }
+        }
+        else {
+            const baseX = width * (0.2 + waveOffset * 0.6);
+            for (let y = 0; y <= height; y += 5) {
+                const phase = (y / height) * Math.PI * 2 * el.frequency + t * 2 + w;
+                const x = baseX + Math.sin(phase) * maxAmp;
+                if (y === 0) {
+                    ctx.moveTo(x, y);
+                }
+                else {
+                    ctx.lineTo(x, y);
+                }
+            }
+        }
+        ctx.stroke();
+    }
+    ctx.globalAlpha = 1;
+}

package/dist/preview/renderer.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @nexart/ui-renderer v0.2.0 - Preview Renderer
+ *
+ * Renders visual approximations of NexArt systems.
+ * This is NOT canonical output - for preview/exploration only.
+ */
+import type { NexArtSystem, PreviewOptions } from '../types';
+export interface PreviewRenderer {
+    render: () => void;
+    start: () => void;
+    stop: () => void;
+    destroy: () => void;
+    isCanonical: false;
+    isArchival: false;
+}
+export declare function previewSystem(system: NexArtSystem, canvas: HTMLCanvasElement, options?: PreviewOptions): PreviewRenderer;
+//# sourceMappingURL=renderer.d.ts.map

package/dist/preview/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/preview/renderer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAsC7D,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,KAAK,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC;CACnB;AAED,wBAAgB,aAAa,CAC3B,MAAM,EAAE,YAAY,EACpB,MAAM,EAAE,iBAAiB,EACzB,OAAO,GAAE,cAAmB,GAC3B,eAAe,CA0JjB"}

package/dist/preview/renderer.js

@@ -0,0 +1,167 @@
+/**
+ * @nexart/ui-renderer v0.2.0 - Preview Renderer
+ *
+ * Renders visual approximations of NexArt systems.
+ * This is NOT canonical output - for preview/exploration only.
+ */
+import { renderDots } from './primitives/dots';
+import { renderLines } from './primitives/lines';
+import { renderWaves } from './primitives/waves';
+import { renderGrid } from './primitives/grid';
+import { renderFlowField } from './primitives/flow';
+import { renderOrbits } from './primitives/orbits';
+function createPRNG(seed) {
+    let state = seed;
+    return () => {
+        state |= 0;
+        state = (state + 0x6d2b79f5) | 0;
+        let t = Math.imul(state ^ (state >>> 15), 1 | state);
+        t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+function parseColor(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',
+    };
+    return colorMap[color.toLowerCase()] || color;
+}
+export function previewSystem(system, canvas, options = {}) {
+    const { mode = 'static', showBadge = true } = options;
+    const width = canvas.width || 800;
+    const height = canvas.height || 800;
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext('2d');
+    let animationId = null;
+    const renderFrame = (t = 0) => {
+        const random = createPRNG(system.seed);
+        ctx.fillStyle = parseColor(system.background.color);
+        ctx.fillRect(0, 0, width, height);
+        if (system.background.gradient) {
+            const g = system.background.gradient;
+            let gradient;
+            if (g.type === 'radial') {
+                gradient = ctx.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, Math.max(width, height) / 2);
+            }
+            else {
+                const angle = (g.angle || 0) * (Math.PI / 180);
+                const dx = Math.cos(angle) * width;
+                const dy = Math.sin(angle) * height;
+                gradient = ctx.createLinearGradient(width / 2 - dx / 2, height / 2 - dy / 2, width / 2 + dx / 2, height / 2 + dy / 2);
+            }
+            g.colors.forEach((c, i) => {
+                gradient.addColorStop(i / (g.colors.length - 1), parseColor(c));
+            });
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, width, height);
+        }
+        if (system.background.texture === 'noise' || system.background.texture === 'grain') {
+            const imageData = ctx.getImageData(0, 0, width, height);
+            const data = imageData.data;
+            const intensity = system.background.texture === 'noise' ? 30 : 15;
+            for (let i = 0; i < data.length; i += 4) {
+                const noise = (random() - 0.5) * intensity;
+                data[i] += noise;
+                data[i + 1] += noise;
+                data[i + 2] += noise;
+            }
+            ctx.putImageData(imageData, 0, 0);
+        }
+        for (const el of system.elements) {
+            const elRandom = createPRNG(system.seed + system.elements.indexOf(el) * 1000);
+            switch (el.type) {
+                case 'dots':
+                    renderDots(ctx, el, width, height, elRandom, t);
+                    break;
+                case 'lines':
+                    renderLines(ctx, el, width, height, elRandom, t);
+                    break;
+                case 'waves':
+                    renderWaves(ctx, el, width, height, elRandom, t);
+                    break;
+                case 'grid':
+                    renderGrid(ctx, el, width, height, elRandom, t);
+                    break;
+                case 'flowField':
+                    renderFlowField(ctx, el, width, height, elRandom, system.seed, t);
+                    break;
+                case 'orbits':
+                    renderOrbits(ctx, el, width, height, elRandom, t);
+                    break;
+            }
+        }
+        if (showBadge) {
+            drawBadge(ctx, width);
+        }
+    };
+    const drawBadge = (ctx, width) => {
+        const text = '⚠️ Preview Renderer (Non-Canonical)';
+        ctx.font = '12px -apple-system, sans-serif';
+        const metrics = ctx.measureText(text);
+        const padding = 8;
+        const badgeWidth = metrics.width + padding * 2;
+        const badgeHeight = 24;
+        const x = width - badgeWidth - 10;
+        const y = 10;
+        ctx.fillStyle = 'rgba(255, 100, 100, 0.15)';
+        ctx.strokeStyle = 'rgba(255, 100, 100, 0.4)';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.roundRect(x, y, badgeWidth, badgeHeight, 4);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = '#ff9999';
+        ctx.fillText(text, x + padding, y + 16);
+    };
+    const render = () => {
+        renderFrame(0);
+    };
+    const start = () => {
+        stop();
+        const startTime = performance.now();
+        const speed = system.motion?.speed ?? 1;
+        const loop = () => {
+            const elapsed = (performance.now() - startTime) / 1000;
+            const t = system.motion?.source === 'time' ? elapsed * speed : 0;
+            renderFrame(t);
+            animationId = requestAnimationFrame(loop);
+        };
+        if (mode === 'loop' && system.motion?.source !== 'none') {
+            animationId = requestAnimationFrame(loop);
+        }
+        else {
+            render();
+        }
+    };
+    const stop = () => {
+        if (animationId !== null) {
+            cancelAnimationFrame(animationId);
+            animationId = null;
+        }
+    };
+    const destroy = () => {
+        stop();
+        ctx.clearRect(0, 0, width, height);
+    };
+    return {
+        render,
+        start,
+        stop,
+        destroy,
+        isCanonical: false,
+        isArchival: false,
+    };
+}

package/dist/system.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @nexart/ui-renderer v0.2.0 - System Creation & Validation
+ *
+ * Declarative system authoring for NexArt Protocol.
+ */
+import type { NexArtSystemInput, NexArtSystem, ValidationResult } from './types';
+export declare function validateSystem(input: NexArtSystemInput): ValidationResult;
+export declare function createSystem(input: NexArtSystemInput): NexArtSystem;
+//# sourceMappingURL=system.d.ts.map

package/dist/system.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"system.d.ts","sourceRoot":"","sources":["../src/system.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EACV,iBAAiB,EACjB,YAAY,EAEZ,gBAAgB,EAGjB,MAAM,SAAS,CAAC;AAoIjB,wBAAgB,cAAc,CAAC,KAAK,EAAE,iBAAiB,GAAG,gBAAgB,CA6BzE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CA0BnE"}

package/dist/system.js

@@ -0,0 +1,165 @@
+/**
+ * @nexart/ui-renderer v0.2.0 - System Creation & Validation
+ *
+ * Declarative system authoring for NexArt Protocol.
+ */
+const CURRENT_VERSION = '0.2';
+const VALID_ELEMENT_TYPES = ['dots', 'lines', 'waves', 'grid', 'flowField', 'orbits'];
+const VALID_MOTION_SOURCES = ['none', 'time', 'seed'];
+const VALID_TEXTURES = ['none', 'noise', 'grain'];
+function validateBackground(bg) {
+    const errors = [];
+    if (!bg.color || typeof bg.color !== 'string') {
+        errors.push('Background color is required and must be a string');
+    }
+    if (bg.texture && !VALID_TEXTURES.includes(bg.texture)) {
+        errors.push(`Invalid texture: ${bg.texture}. Must be one of: ${VALID_TEXTURES.join(', ')}`);
+    }
+    if (bg.gradient) {
+        if (!['linear', 'radial'].includes(bg.gradient.type)) {
+            errors.push('Gradient type must be "linear" or "radial"');
+        }
+        if (!Array.isArray(bg.gradient.colors) || bg.gradient.colors.length < 2) {
+            errors.push('Gradient requires at least 2 colors');
+        }
+    }
+    return errors;
+}
+function validateElement(el, index) {
+    const errors = [];
+    const prefix = `Element[${index}]`;
+    if (!el.type || !VALID_ELEMENT_TYPES.includes(el.type)) {
+        errors.push(`${prefix}: Invalid type. Must be one of: ${VALID_ELEMENT_TYPES.join(', ')}`);
+        return errors;
+    }
+    switch (el.type) {
+        case 'dots':
+            if (!['random', 'radial', 'grid', 'spiral'].includes(el.distribution)) {
+                errors.push(`${prefix}: Invalid distribution for dots`);
+            }
+            if (typeof el.count !== 'number' || el.count < 1 || el.count > 10000) {
+                errors.push(`${prefix}: count must be between 1 and 10000`);
+            }
+            if (!Array.isArray(el.size) || el.size.length !== 2) {
+                errors.push(`${prefix}: size must be [min, max] array`);
+            }
+            break;
+        case 'lines':
+            if (!['horizontal', 'vertical', 'diagonal', 'radial'].includes(el.direction)) {
+                errors.push(`${prefix}: Invalid direction for lines`);
+            }
+            if (typeof el.count !== 'number' || el.count < 1 || el.count > 500) {
+                errors.push(`${prefix}: count must be between 1 and 500`);
+            }
+            break;
+        case 'waves':
+            if (!['x', 'y'].includes(el.axis)) {
+                errors.push(`${prefix}: axis must be "x" or "y"`);
+            }
+            if (typeof el.amplitude !== 'number' || el.amplitude < 0 || el.amplitude > 1) {
+                errors.push(`${prefix}: amplitude must be between 0 and 1`);
+            }
+            if (typeof el.frequency !== 'number' || el.frequency < 0.1 || el.frequency > 10) {
+                errors.push(`${prefix}: frequency must be between 0.1 and 10`);
+            }
+            break;
+        case 'grid':
+            if (typeof el.rows !== 'number' || el.rows < 1 || el.rows > 100) {
+                errors.push(`${prefix}: rows must be between 1 and 100`);
+            }
+            if (typeof el.cols !== 'number' || el.cols < 1 || el.cols > 100) {
+                errors.push(`${prefix}: cols must be between 1 and 100`);
+            }
+            if (!['square', 'circle', 'diamond'].includes(el.shape)) {
+                errors.push(`${prefix}: shape must be "square", "circle", or "diamond"`);
+            }
+            break;
+        case 'flowField':
+            if (typeof el.resolution !== 'number' || el.resolution < 5 || el.resolution > 100) {
+                errors.push(`${prefix}: resolution must be between 5 and 100`);
+            }
+            if (typeof el.strength !== 'number' || el.strength < 0 || el.strength > 1) {
+                errors.push(`${prefix}: strength must be between 0 and 1`);
+            }
+            if (typeof el.particles !== 'number' || el.particles < 10 || el.particles > 5000) {
+                errors.push(`${prefix}: particles must be between 10 and 5000`);
+            }
+            break;
+        case 'orbits':
+            if (typeof el.count !== 'number' || el.count < 1 || el.count > 20) {
+                errors.push(`${prefix}: count must be between 1 and 20`);
+            }
+            if (!Array.isArray(el.radius) || el.radius.length !== 2) {
+                errors.push(`${prefix}: radius must be [min, max] array`);
+            }
+            if (typeof el.dotCount !== 'number' || el.dotCount < 1 || el.dotCount > 200) {
+                errors.push(`${prefix}: dotCount must be between 1 and 200`);
+            }
+            break;
+    }
+    if (el.opacity !== undefined && (el.opacity < 0 || el.opacity > 1)) {
+        errors.push(`${prefix}: opacity must be between 0 and 1`);
+    }
+    return errors;
+}
+function validateMotion(motion) {
+    const errors = [];
+    if (!VALID_MOTION_SOURCES.includes(motion.source)) {
+        errors.push(`Invalid motion source. Must be one of: ${VALID_MOTION_SOURCES.join(', ')}`);
+    }
+    if (motion.speed !== undefined && (motion.speed < 0 || motion.speed > 5)) {
+        errors.push('Motion speed must be between 0 and 5');
+    }
+    return errors;
+}
+export function validateSystem(input) {
+    const errors = [];
+    if (typeof input.seed !== 'number') {
+        errors.push('seed is required and must be a number');
+    }
+    if (!input.background) {
+        errors.push('background is required');
+    }
+    else {
+        errors.push(...validateBackground(input.background));
+    }
+    if (!Array.isArray(input.elements) || input.elements.length === 0) {
+        errors.push('elements array is required and must not be empty');
+    }
+    else {
+        input.elements.forEach((el, i) => {
+            errors.push(...validateElement(el, i));
+        });
+    }
+    if (input.motion) {
+        errors.push(...validateMotion(input.motion));
+    }
+    return {
+        valid: errors.length === 0,
+        errors,
+    };
+}
+export function createSystem(input) {
+    const validation = validateSystem(input);
+    if (!validation.valid) {
+        throw new Error(`Invalid system: ${validation.errors.join('; ')}`);
+    }
+    const system = {
+        protocol: 'nexart',
+        systemVersion: input.version || CURRENT_VERSION,
+        seed: input.seed,
+        background: {
+            color: input.background.color,
+            texture: input.background.texture || 'none',
+            ...(input.background.gradient && { gradient: input.background.gradient }),
+        },
+        elements: input.elements.map((el) => ({
+            ...el,
+            opacity: el.opacity ?? 1,
+        })),
+        motion: input.motion || { source: 'none' },
+        deterministic: true,
+        createdAt: new Date().toISOString(),
+    };
+    return system;
+}

package/dist/types.d.ts

@@ -0,0 +1,99 @@
+/**
+ * @nexart/ui-renderer v0.2.0 - Type Definitions
+ *
+ * Declarative system authoring types for NexArt Protocol.
+ * This SDK is non-canonical and for authoring/preview only.
+ */
+export type BackgroundTexture = 'none' | 'noise' | 'grain';
+export interface BackgroundConfig {
+    color: string;
+    gradient?: {
+        type: 'linear' | 'radial';
+        colors: string[];
+        angle?: number;
+    };
+    texture?: BackgroundTexture;
+}
+export interface DotsElement {
+    type: 'dots';
+    distribution: 'random' | 'radial' | 'grid' | 'spiral';
+    count: number;
+    size: [number, number];
+    color?: string;
+    opacity?: number;
+}
+export interface LinesElement {
+    type: 'lines';
+    direction: 'horizontal' | 'vertical' | 'diagonal' | 'radial';
+    count: number;
+    thickness: [number, number];
+    color?: string;
+    opacity?: number;
+}
+export interface WavesElement {
+    type: 'waves';
+    axis: 'x' | 'y';
+    amplitude: number;
+    frequency: number;
+    count?: number;
+    color?: string;
+    opacity?: number;
+}
+export interface GridElement {
+    type: 'grid';
+    rows: number;
+    cols: number;
+    cellSize?: number;
+    shape: 'square' | 'circle' | 'diamond';
+    color?: string;
+    opacity?: number;
+}
+export interface FlowFieldElement {
+    type: 'flowField';
+    resolution: number;
+    strength: number;
+    particles: number;
+    color?: string;
+    opacity?: number;
+}
+export interface OrbitsElement {
+    type: 'orbits';
+    count: number;
+    radius: [number, number];
+    dotCount: number;
+    speed?: number;
+    color?: string;
+    opacity?: number;
+}
+export type SystemElement = DotsElement | LinesElement | WavesElement | GridElement | FlowFieldElement | OrbitsElement;
+export type MotionSource = 'none' | 'time' | 'seed';
+export interface MotionConfig {
+    source: MotionSource;
+    speed?: number;
+}
+export interface NexArtSystemInput {
+    version?: string;
+    seed: number;
+    background: BackgroundConfig;
+    elements: SystemElement[];
+    motion?: MotionConfig;
+}
+export interface NexArtSystem {
+    protocol: 'nexart';
+    systemVersion: string;
+    seed: number;
+    background: BackgroundConfig;
+    elements: SystemElement[];
+    motion: MotionConfig;
+    deterministic: boolean;
+    createdAt: string;
+}
+export interface PreviewOptions {
+    mode?: 'static' | 'loop';
+    showBadge?: boolean;
+}
+export interface ValidationResult {
+    valid: boolean;
+    errors: string[];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/types.js

@@ -0,0 +1,7 @@
+/**
+ * @nexart/ui-renderer v0.2.0 - Type Definitions
+ *
+ * Declarative system authoring types for NexArt Protocol.
+ * This SDK is non-canonical and for authoring/preview only.
+ */
+export {};