@nexart/ui-renderer 0.1.0 → 0.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexart/ui-renderer",
-  "version": "0.1.0",
-  "description": "Browser-first UI renderer for exploratory generative art (non-canonical)",
+  "version": "0.2.0",
+  "description": "Declarative system authoring SDK for NexArt Protocol (non-canonical, preview only)",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,12 +17,14 @@
     "typescript": "^5.0.0"
   },
   "keywords": [
+    "nexart",
     "generative-art",
     "canvas",
     "browser",
-    "renderer",
-    "exploratory",
-    "creative-coding"
+    "declarative",
+    "protocol",
+    "authoring",
+    "preview"
   ],
   "repository": {
     "type": "git",

package/dist/renderer.d.ts

@@ -1,31 +0,0 @@
-/**
- * @nexart/ui-renderer - Core Renderer
- * Version: 0.1.0
- *
- * Browser-first generative art renderer.
- * Uses deterministic PRNG for reproducible (but non-canonical) output.
- */
-export interface UIRendererOptions {
-    canvas: HTMLCanvasElement;
-    seed: number;
-    mode: 'static' | 'loop';
-    width?: number;
-    height?: number;
-}
-export interface UIRenderer {
-    render: () => void;
-    start: () => void;
-    stop: () => void;
-    setSeed: (newSeed: number) => void;
-    destroy: () => void;
-    isCanonical: false;
-    isArchival: false;
-}
-/**
- * Create a UI renderer instance.
- *
- * ⚠️ This renderer is NOT canonical and NOT archival.
- * For production NFT minting, use @nexart/codemode-sdk.
- */
-export declare function createUIRenderer(options: UIRendererOptions): UIRenderer;
-//# sourceMappingURL=renderer.d.ts.map

package/dist/renderer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,KAAK,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC;CACnB;AAiBD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,GAAG,UAAU,CAgOvE"}

package/dist/renderer.js

@@ -1,210 +0,0 @@
-/**
- * @nexart/ui-renderer - Core Renderer
- * Version: 0.1.0
- *
- * Browser-first generative art renderer.
- * Uses deterministic PRNG for reproducible (but non-canonical) output.
- */
-/**
- * Deterministic PRNG (Mulberry32)
- * Fast, simple, good distribution
- */
-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;
-    };
-}
-/**
- * Create a UI renderer instance.
- *
- * ⚠️ This renderer is NOT canonical and NOT archival.
- * For production NFT minting, use @nexart/codemode-sdk.
- */
-export function createUIRenderer(options) {
-    const { canvas, mode } = options;
-    let { seed } = options;
-    const width = options.width ?? canvas.width ?? 800;
-    const height = options.height ?? canvas.height ?? 800;
-    canvas.width = width;
-    canvas.height = height;
-    const ctx = canvas.getContext('2d');
-    let animationId = null;
-    let frameCount = 0;
-    let random;
-    // Initialize PRNG
-    const initRandom = () => {
-        random = createPRNG(seed);
-        frameCount = 0;
-    };
-    initRandom();
-    // Utility functions
-    const map = (value, start1, stop1, start2, stop2) => {
-        return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
-    };
-    const lerp = (a, b, t) => a + (b - a) * t;
-    const noise2D = (x, y) => {
-        // Simple value noise using PRNG
-        const xi = Math.floor(x);
-        const yi = Math.floor(y);
-        const xf = x - xi;
-        const yf = y - yi;
-        const hash = (px, py) => {
-            const n = Math.sin(px * 12.9898 + py * 78.233 + seed * 0.001) * 43758.5453;
-            return n - Math.floor(n);
-        };
-        const v00 = hash(xi, yi);
-        const v10 = hash(xi + 1, yi);
-        const v01 = hash(xi, yi + 1);
-        const v11 = hash(xi + 1, yi + 1);
-        const sx = xf * xf * (3 - 2 * xf);
-        const sy = yf * yf * (3 - 2 * yf);
-        return lerp(lerp(v00, v10, sx), lerp(v01, v11, sx), sy);
-    };
-    /**
-     * Render a single frame
-     * Style: Abstract flow field / vortex art
-     */
-    const renderFrame = (t = 0) => {
-        // Clear with dark background
-        ctx.fillStyle = `hsl(${(seed % 360)}, 15%, 8%)`;
-        ctx.fillRect(0, 0, width, height);
-        // Re-seed for deterministic frame
-        random = createPRNG(seed + frameCount);
-        // Draw flow field particles
-        const particleCount = 2000;
-        const scale = 0.003;
-        for (let i = 0; i < particleCount; i++) {
-            // Particle position based on PRNG
-            let x = random() * width;
-            let y = random() * height;
-            // Particle color from seed
-            const hue = (seed + i * 0.1 + t * 50) % 360;
-            const sat = 60 + random() * 30;
-            const light = 50 + random() * 30;
-            const alpha = 0.3 + random() * 0.4;
-            ctx.strokeStyle = `hsla(${hue}, ${sat}%, ${light}%, ${alpha})`;
-            ctx.lineWidth = 0.5 + random() * 1.5;
-            ctx.beginPath();
-            ctx.moveTo(x, y);
-            // Trace flow line
-            const steps = 20 + Math.floor(random() * 30);
-            for (let s = 0; s < steps; s++) {
-                // Flow field angle using noise
-                const noiseVal = noise2D(x * scale, y * scale + t * 0.5);
-                const angle = noiseVal * Math.PI * 4;
-                // Add vortex influence
-                const cx = width / 2;
-                const cy = height / 2;
-                const dx = x - cx;
-                const dy = y - cy;
-                const dist = Math.sqrt(dx * dx + dy * dy);
-                const vortexStrength = map(dist, 0, width / 2, 0.8, 0.2);
-                const vortexAngle = Math.atan2(dy, dx) + Math.PI / 2;
-                const finalAngle = lerp(angle, vortexAngle, vortexStrength);
-                x += Math.cos(finalAngle) * 3;
-                y += Math.sin(finalAngle) * 3;
-                ctx.lineTo(x, y);
-                // Stop if out of bounds
-                if (x < 0 || x > width || y < 0 || y > height)
-                    break;
-            }
-            ctx.stroke();
-        }
-        // Draw orbital elements
-        const orbits = 3 + Math.floor(random() * 4);
-        for (let o = 0; o < orbits; o++) {
-            const orbitRadius = 100 + random() * (Math.min(width, height) / 3);
-            const orbitSpeed = 0.5 + random() * 1.5;
-            const dotCount = 20 + Math.floor(random() * 40);
-            const orbitHue = (seed + o * 60 + t * 30) % 360;
-            for (let d = 0; d < dotCount; d++) {
-                const angle = (d / dotCount) * Math.PI * 2 + t * orbitSpeed + o;
-                const wobble = Math.sin(angle * 3 + t * 2) * 20;
-                const x = width / 2 + Math.cos(angle) * (orbitRadius + wobble);
-                const y = height / 2 + Math.sin(angle) * (orbitRadius + wobble);
-                const size = 2 + random() * 4;
-                const alpha = 0.4 + random() * 0.4;
-                ctx.beginPath();
-                ctx.arc(x, y, size, 0, Math.PI * 2);
-                ctx.fillStyle = `hsla(${orbitHue}, 70%, 60%, ${alpha})`;
-                ctx.fill();
-            }
-        }
-        // Central glow
-        const gradient = ctx.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, width / 3);
-        const glowHue = (seed + t * 20) % 360;
-        gradient.addColorStop(0, `hsla(${glowHue}, 80%, 60%, 0.15)`);
-        gradient.addColorStop(0.5, `hsla(${glowHue}, 60%, 40%, 0.05)`);
-        gradient.addColorStop(1, 'transparent');
-        ctx.fillStyle = gradient;
-        ctx.fillRect(0, 0, width, height);
-        frameCount++;
-    };
-    /**
-     * Render static image
-     */
-    const render = () => {
-        initRandom();
-        renderFrame(0);
-    };
-    /**
-     * Start animation loop
-     */
-    const start = () => {
-        if (mode !== 'loop') {
-            console.warn('start() called but mode is "static". Use render() instead.');
-            render();
-            return;
-        }
-        stop();
-        initRandom();
-        let startTime = performance.now();
-        const loop = () => {
-            const elapsed = (performance.now() - startTime) / 1000;
-            const t = (elapsed % 10) / 10; // 10 second loop
-            renderFrame(t);
-            animationId = requestAnimationFrame(loop);
-        };
-        animationId = requestAnimationFrame(loop);
-    };
-    /**
-     * Stop animation loop
-     */
-    const stop = () => {
-        if (animationId !== null) {
-            cancelAnimationFrame(animationId);
-            animationId = null;
-        }
-    };
-    /**
-     * Set new seed and re-render
-     */
-    const setSeed = (newSeed) => {
-        seed = newSeed;
-        initRandom();
-        if (mode === 'static' || animationId === null) {
-            render();
-        }
-    };
-    /**
-     * Clean up resources
-     */
-    const destroy = () => {
-        stop();
-        ctx.clearRect(0, 0, width, height);
-    };
-    return {
-        render,
-        start,
-        stop,
-        setSeed,
-        destroy,
-        isCanonical: false,
-        isArchival: false,
-    };
-}