@nexart/ui-renderer 0.2.1 → 0.3.1

package/dist/preview/primitives/sketch.js

@@ -0,0 +1,407 @@
+/**
+ * @nexart/ui-renderer v0.2.1 - Sketch Primitive Renderer
+ *
+ * Executes raw Code Mode p5-like sketches.
+ * This is NOT canonical output - for preview/exploration only.
+ */
+function createSeededRNG(seed = 123456) {
+    let a = seed >>> 0;
+    return () => {
+        a += 0x6D2B79F5;
+        let t = Math.imul(a ^ (a >>> 15), a | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+function createSeededNoise(seed = 0) {
+    const permutation = [];
+    const rng = createSeededRNG(seed);
+    for (let i = 0; i < 256; i++) {
+        permutation[i] = i;
+    }
+    for (let i = 255; i > 0; i--) {
+        const j = Math.floor(rng() * (i + 1));
+        [permutation[i], permutation[j]] = [permutation[j], permutation[i]];
+    }
+    for (let i = 0; i < 256; i++) {
+        permutation[256 + i] = permutation[i];
+    }
+    const fade = (t) => t * t * t * (t * (t * 6 - 15) + 10);
+    const lerp = (a, b, t) => a + t * (b - a);
+    const grad = (hash, x, y, z) => {
+        const h = hash & 15;
+        const u = h < 8 ? x : y;
+        const v = h < 4 ? y : h === 12 || h === 14 ? x : z;
+        return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
+    };
+    return (x, y = 0, z = 0) => {
+        const X = Math.floor(x) & 255;
+        const Y = Math.floor(y) & 255;
+        const Z = Math.floor(z) & 255;
+        x -= Math.floor(x);
+        y -= Math.floor(y);
+        z -= Math.floor(z);
+        const u = fade(x);
+        const v = fade(y);
+        const w = fade(z);
+        const A = permutation[X] + Y;
+        const AA = permutation[A] + Z;
+        const AB = permutation[A + 1] + Z;
+        const B = permutation[X + 1] + Y;
+        const BA = permutation[B] + Z;
+        const BB = permutation[B + 1] + Z;
+        return (lerp(lerp(lerp(grad(permutation[AA], x, y, z), grad(permutation[BA], x - 1, y, z), u), lerp(grad(permutation[AB], x, y - 1, z), grad(permutation[BB], x - 1, y - 1, z), u), v), lerp(lerp(grad(permutation[AA + 1], x, y, z - 1), grad(permutation[BA + 1], x - 1, y, z - 1), u), lerp(grad(permutation[AB + 1], x, y - 1, z - 1), grad(permutation[BB + 1], x - 1, y - 1, z - 1), u), v), w) + 1) / 2;
+    };
+}
+function createP5Runtime(ctx, width, height, seed) {
+    let currentFill = 'rgba(255, 255, 255, 1)';
+    let currentStroke = 'rgba(0, 0, 0, 1)';
+    let strokeEnabled = true;
+    let fillEnabled = true;
+    let currentStrokeWeight = 1;
+    let colorModeSettings = { mode: 'RGB', maxR: 255, maxG: 255, maxB: 255, maxA: 255 };
+    let shapeStarted = false;
+    let rng = createSeededRNG(seed);
+    let noiseFunc = createSeededNoise(seed);
+    let noiseOctaves = 4;
+    let noiseFalloff = 0.5;
+    const parseColor = (...args) => {
+        if (args.length === 0)
+            return 'rgba(0, 0, 0, 1)';
+        const { mode, maxR, maxG, maxB, maxA } = colorModeSettings;
+        if (args.length === 1) {
+            const val = args[0];
+            if (typeof val === 'string')
+                return val;
+            if (mode === 'HSB') {
+                return `hsla(${val}, 100%, 50%, 1)`;
+            }
+            const gray = Math.round((val / maxR) * 255);
+            return `rgba(${gray}, ${gray}, ${gray}, 1)`;
+        }
+        if (args.length === 2) {
+            const [gray, alpha] = args;
+            const g = Math.round((gray / maxR) * 255);
+            const a = alpha / maxA;
+            return `rgba(${g}, ${g}, ${g}, ${a})`;
+        }
+        if (args.length === 3) {
+            const [r, g, b] = args;
+            if (mode === 'HSB') {
+                return `hsla(${(r / maxR) * 360}, ${(g / maxG) * 100}%, ${(b / maxB) * 100}%, 1)`;
+            }
+            return `rgba(${Math.round((r / maxR) * 255)}, ${Math.round((g / maxG) * 255)}, ${Math.round((b / maxB) * 255)}, 1)`;
+        }
+        if (args.length === 4) {
+            const [r, g, b, a] = args;
+            if (mode === 'HSB') {
+                return `hsla(${(r / maxR) * 360}, ${(g / maxG) * 100}%, ${(b / maxB) * 100}%, ${a / maxA})`;
+            }
+            return `rgba(${Math.round((r / maxR) * 255)}, ${Math.round((g / maxG) * 255)}, ${Math.round((b / maxB) * 255)}, ${a / maxA})`;
+        }
+        return 'rgba(0, 0, 0, 1)';
+    };
+    const p = {
+        width,
+        height,
+        frameCount: 0,
+        PI: Math.PI,
+        TWO_PI: Math.PI * 2,
+        HALF_PI: Math.PI / 2,
+        QUARTER_PI: Math.PI / 4,
+        CORNER: 'corner',
+        CENTER: 'center',
+        CORNERS: 'corners',
+        RADIUS: 'radius',
+        ROUND: 'round',
+        SQUARE: 'square',
+        PROJECT: 'project',
+        MITER: 'miter',
+        BEVEL: 'bevel',
+        CLOSE: 'close',
+        background: (...args) => {
+            ctx.save();
+            ctx.fillStyle = parseColor(...args);
+            ctx.fillRect(0, 0, width, height);
+            ctx.restore();
+        },
+        clear: () => {
+            ctx.clearRect(0, 0, width, height);
+        },
+        fill: (...args) => {
+            fillEnabled = true;
+            currentFill = parseColor(...args);
+            ctx.fillStyle = currentFill;
+        },
+        noFill: () => {
+            fillEnabled = false;
+        },
+        stroke: (...args) => {
+            strokeEnabled = true;
+            currentStroke = parseColor(...args);
+            ctx.strokeStyle = currentStroke;
+        },
+        noStroke: () => {
+            strokeEnabled = false;
+        },
+        strokeWeight: (weight) => {
+            currentStrokeWeight = weight;
+            ctx.lineWidth = weight;
+        },
+        colorMode: (mode, max1, max2, max3, maxA) => {
+            colorModeSettings = {
+                mode: mode.toUpperCase(),
+                maxR: max1 ?? 255,
+                maxG: max2 ?? max1 ?? 255,
+                maxB: max3 ?? max1 ?? 255,
+                maxA: maxA ?? 255,
+            };
+        },
+        color: (...args) => parseColor(...args),
+        lerpColor: (c1, c2, amt) => c1,
+        ellipse: (x, y, w, h) => {
+            const rw = w / 2;
+            const rh = (h ?? w) / 2;
+            ctx.beginPath();
+            ctx.ellipse(x, y, rw, rh, 0, 0, Math.PI * 2);
+            if (fillEnabled)
+                ctx.fill();
+            if (strokeEnabled)
+                ctx.stroke();
+        },
+        circle: (x, y, d) => {
+            p.ellipse(x, y, d, d);
+        },
+        rect: (x, y, w, h, r) => {
+            const height = h ?? w;
+            ctx.beginPath();
+            if (r && r > 0) {
+                ctx.roundRect(x, y, w, height, r);
+            }
+            else {
+                ctx.rect(x, y, w, height);
+            }
+            if (fillEnabled)
+                ctx.fill();
+            if (strokeEnabled)
+                ctx.stroke();
+        },
+        square: (x, y, s, r) => {
+            p.rect(x, y, s, s, r);
+        },
+        line: (x1, y1, x2, y2) => {
+            ctx.beginPath();
+            ctx.moveTo(x1, y1);
+            ctx.lineTo(x2, y2);
+            if (strokeEnabled)
+                ctx.stroke();
+        },
+        point: (x, y) => {
+            ctx.beginPath();
+            ctx.arc(x, y, currentStrokeWeight / 2, 0, Math.PI * 2);
+            ctx.fillStyle = currentStroke;
+            ctx.fill();
+        },
+        triangle: (x1, y1, x2, y2, x3, y3) => {
+            ctx.beginPath();
+            ctx.moveTo(x1, y1);
+            ctx.lineTo(x2, y2);
+            ctx.lineTo(x3, y3);
+            ctx.closePath();
+            if (fillEnabled)
+                ctx.fill();
+            if (strokeEnabled)
+                ctx.stroke();
+        },
+        quad: (x1, y1, x2, y2, x3, y3, x4, y4) => {
+            ctx.beginPath();
+            ctx.moveTo(x1, y1);
+            ctx.lineTo(x2, y2);
+            ctx.lineTo(x3, y3);
+            ctx.lineTo(x4, y4);
+            ctx.closePath();
+            if (fillEnabled)
+                ctx.fill();
+            if (strokeEnabled)
+                ctx.stroke();
+        },
+        arc: (x, y, w, h, start, stop, mode) => {
+            ctx.beginPath();
+            ctx.ellipse(x, y, w / 2, h / 2, 0, start, stop);
+            if (mode === 'pie' || mode === 'PIE') {
+                ctx.lineTo(x, y);
+                ctx.closePath();
+            }
+            else if (mode === 'chord' || mode === 'CHORD') {
+                ctx.closePath();
+            }
+            if (fillEnabled)
+                ctx.fill();
+            if (strokeEnabled)
+                ctx.stroke();
+        },
+        beginShape: () => {
+            ctx.beginPath();
+            shapeStarted = false;
+        },
+        vertex: (x, y) => {
+            if (!shapeStarted) {
+                ctx.moveTo(x, y);
+                shapeStarted = true;
+            }
+            else {
+                ctx.lineTo(x, y);
+            }
+        },
+        endShape: (mode) => {
+            if (mode === 'close' || mode === 'CLOSE') {
+                ctx.closePath();
+            }
+            if (fillEnabled)
+                ctx.fill();
+            if (strokeEnabled)
+                ctx.stroke();
+            shapeStarted = false;
+        },
+        push: () => {
+            ctx.save();
+        },
+        pop: () => {
+            ctx.restore();
+            ctx.fillStyle = currentFill;
+            ctx.strokeStyle = currentStroke;
+            ctx.lineWidth = currentStrokeWeight;
+        },
+        translate: (x, y) => {
+            ctx.translate(x, y);
+        },
+        rotate: (angle) => {
+            ctx.rotate(angle);
+        },
+        scale: (sx, sy) => {
+            ctx.scale(sx, sy ?? sx);
+        },
+        resetMatrix: () => {
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+        },
+        random: (min, max) => {
+            if (Array.isArray(min)) {
+                return min[Math.floor(rng() * min.length)];
+            }
+            if (min === undefined)
+                return rng();
+            if (max === undefined)
+                return rng() * min;
+            return min + rng() * (max - min);
+        },
+        randomSeed: (seed) => {
+            rng = createSeededRNG(seed);
+        },
+        randomGaussian: (mean = 0, sd = 1) => {
+            const u1 = rng();
+            const u2 = rng();
+            const z0 = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);
+            return z0 * sd + mean;
+        },
+        noise: (x, y, z) => {
+            let total = 0;
+            let frequency = 1;
+            let amplitude = 1;
+            let maxValue = 0;
+            for (let i = 0; i < noiseOctaves; i++) {
+                total += noiseFunc(x * frequency, (y ?? 0) * frequency, (z ?? 0) * frequency) * amplitude;
+                maxValue += amplitude;
+                amplitude *= noiseFalloff;
+                frequency *= 2;
+            }
+            return total / maxValue;
+        },
+        noiseSeed: (seed) => {
+            noiseFunc = createSeededNoise(seed);
+        },
+        noiseDetail: (lod, falloff) => {
+            noiseOctaves = Math.max(1, Math.min(8, lod));
+            if (falloff !== undefined) {
+                noiseFalloff = Math.max(0, Math.min(1, falloff));
+            }
+        },
+        map: (value, start1, stop1, start2, stop2) => {
+            return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
+        },
+        constrain: (n, low, high) => {
+            return Math.max(low, Math.min(high, n));
+        },
+        lerp: (start, stop, amt) => {
+            return start + (stop - start) * amt;
+        },
+        dist: (x1, y1, x2, y2) => {
+            return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+        },
+        mag: (x, y) => {
+            return Math.sqrt(x * x + y * y);
+        },
+        norm: (value, start, stop) => {
+            return (value - start) / (stop - start);
+        },
+        sin: Math.sin,
+        cos: Math.cos,
+        tan: Math.tan,
+        asin: Math.asin,
+        acos: Math.acos,
+        atan: Math.atan,
+        atan2: Math.atan2,
+        radians: (degrees) => degrees * (Math.PI / 180),
+        degrees: (radians) => radians * (180 / Math.PI),
+        abs: Math.abs,
+        ceil: Math.ceil,
+        floor: Math.floor,
+        round: Math.round,
+        sqrt: Math.sqrt,
+        pow: Math.pow,
+        exp: Math.exp,
+        log: Math.log,
+        min: Math.min,
+        max: Math.max,
+        noLoop: () => { },
+        loop: () => { },
+        redraw: () => { },
+        frameRate: (fps) => { },
+    };
+    return p;
+}
+export function createSketchRenderer(element, ctx, width, height, seed) {
+    const p5 = createP5Runtime(ctx, width, height, seed);
+    let setupFn = null;
+    let drawFn = null;
+    let setupExecuted = false;
+    const runtimeKeys = Object.keys(p5);
+    const destructure = runtimeKeys.map(key => `var ${key} = p5.${key};`).join('\n');
+    try {
+        const wrappedCode = `
+      ${destructure}
+      ${element.code}
+      return { setup: typeof setup === 'function' ? setup : null, draw: typeof draw === 'function' ? draw : null };
+    `;
+        const factory = new Function('p5', wrappedCode);
+        const result = factory(p5);
+        setupFn = result.setup;
+        drawFn = result.draw;
+    }
+    catch (e) {
+        console.error('[NexArt SDK] Sketch compilation error:', e);
+    }
+    return {
+        render: (frameCount) => {
+            p5.frameCount = frameCount;
+            if (!setupExecuted && setupFn) {
+                setupFn();
+                setupExecuted = true;
+            }
+            if (drawFn) {
+                drawFn();
+            }
+        },
+        hasSetup: setupFn !== null,
+        hasDraw: drawFn !== null,
+    };
+}

package/dist/preview/renderer.d.ts

@@ -1,5 +1,5 @@
 /**
- * @nexart/ui-renderer v0.2.0 - Preview Renderer
+ * @nexart/ui-renderer v0.4.0 - Preview Renderer
  *
  * Renders visual approximations of NexArt systems.
  * This is NOT canonical output - for preview/exploration only.

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

@@ -1 +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"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/preview/renderer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAoC,cAAc,EAAE,MAAM,UAAU,CAAC;AAyC/F,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,CAmKjB"}

package/dist/preview/renderer.js

@@ -1,9 +1,12 @@
 /**
- * @nexart/ui-renderer v0.2.0 - Preview Renderer
+ * @nexart/ui-renderer v0.4.0 - Preview Renderer
  *
  * Renders visual approximations of NexArt systems.
  * This is NOT canonical output - for preview/exploration only.
  */
+import { isCodeModeSystem, isUnifiedModeSystem } from '../system';
+import { renderCodeModeSystem } from './code-renderer';
+import { renderUnifiedSystem } from './unified-renderer';
 import { renderDots } from './primitives/dots';
 import { renderLines } from './primitives/lines';
 import { renderWaves } from './primitives/waves';
@@ -39,6 +42,13 @@ function parseColor(color) {
     return colorMap[color.toLowerCase()] || color;
 }
 export function previewSystem(system, canvas, options = {}) {
+    if (isCodeModeSystem(system)) {
+        return renderCodeModeSystem(system, canvas, options);
+    }
+    if (isUnifiedModeSystem(system)) {
+        return renderUnifiedSystem(system, canvas, options);
+    }
+    const declarativeSystem = system;
     const { mode = 'static', showBadge = true } = options;
     const width = canvas.width || 800;
     const height = canvas.height || 800;
@@ -47,11 +57,11 @@ export function previewSystem(system, canvas, options = {}) {
     const ctx = canvas.getContext('2d');
     let animationId = null;
     const renderFrame = (t = 0) => {
-        const random = createPRNG(system.seed);
-        ctx.fillStyle = parseColor(system.background.color);
+        const random = createPRNG(declarativeSystem.seed);
+        ctx.fillStyle = parseColor(declarativeSystem.background.color);
         ctx.fillRect(0, 0, width, height);
-        if (system.background.gradient) {
-            const g = system.background.gradient;
+        if (declarativeSystem.background.gradient) {
+            const g = declarativeSystem.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);
@@ -68,10 +78,10 @@ export function previewSystem(system, canvas, options = {}) {
             ctx.fillStyle = gradient;
             ctx.fillRect(0, 0, width, height);
         }
-        if (system.background.texture === 'noise' || system.background.texture === 'grain') {
+        if (declarativeSystem.background.texture === 'noise' || declarativeSystem.background.texture === 'grain') {
             const imageData = ctx.getImageData(0, 0, width, height);
             const data = imageData.data;
-            const intensity = system.background.texture === 'noise' ? 30 : 15;
+            const intensity = declarativeSystem.background.texture === 'noise' ? 30 : 15;
             for (let i = 0; i < data.length; i += 4) {
                 const noise = (random() - 0.5) * intensity;
                 data[i] += noise;
@@ -80,8 +90,8 @@ export function previewSystem(system, canvas, options = {}) {
             }
             ctx.putImageData(imageData, 0, 0);
         }
-        for (const el of system.elements) {
-            const elRandom = createPRNG(system.seed + system.elements.indexOf(el) * 1000);
+        for (const el of declarativeSystem.elements) {
+            const elRandom = createPRNG(declarativeSystem.seed + declarativeSystem.elements.indexOf(el) * 1000);
             switch (el.type) {
                 case 'dots':
                     renderDots(ctx, el, width, height, elRandom, t);
@@ -96,7 +106,7 @@ export function previewSystem(system, canvas, options = {}) {
                     renderGrid(ctx, el, width, height, elRandom, t);
                     break;
                 case 'flowField':
-                    renderFlowField(ctx, el, width, height, elRandom, system.seed, t);
+                    renderFlowField(ctx, el, width, height, elRandom, declarativeSystem.seed, t);
                     break;
                 case 'orbits':
                     renderOrbits(ctx, el, width, height, elRandom, t);
@@ -132,14 +142,14 @@ export function previewSystem(system, canvas, options = {}) {
     const start = () => {
         stop();
         const startTime = performance.now();
-        const speed = system.motion?.speed ?? 1;
+        const speed = declarativeSystem.motion?.speed ?? 1;
         const loop = () => {
             const elapsed = (performance.now() - startTime) / 1000;
-            const t = system.motion?.source === 'time' ? elapsed * speed : 0;
+            const t = declarativeSystem.motion?.source === 'time' ? elapsed * speed : 0;
             renderFrame(t);
             animationId = requestAnimationFrame(loop);
         };
-        if (mode === 'loop' && system.motion?.source !== 'none') {
+        if (mode === 'loop' && declarativeSystem.motion?.source !== 'none') {
             animationId = requestAnimationFrame(loop);
         }
         else {

package/dist/preview/unified-renderer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Unified Renderer - Handles background, primitive, and sketch elements
+ * Dispatches rendering per element type in order: background → primitive → sketch
+ * All elements render to the same canvas/context with shared timing
+ */
+import type { UnifiedSystem, PreviewOptions } from '../types';
+export interface UnifiedRenderer {
+    render: () => void;
+    start: () => void;
+    stop: () => void;
+    destroy: () => void;
+    isCanonical: false;
+    isArchival: false;
+}
+export declare function renderUnifiedSystem(system: UnifiedSystem, canvas: HTMLCanvasElement, options?: PreviewOptions): UnifiedRenderer;
+//# sourceMappingURL=unified-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"unified-renderer.d.ts","sourceRoot":"","sources":["../../src/preview/unified-renderer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAkB,cAAc,EAAoE,MAAM,UAAU,CAAC;AAgBhJ,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;AA6ED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,iBAAiB,EACzB,OAAO,GAAE,cAAmB,GAC3B,eAAe,CAiOjB"}