@nexart/ui-renderer 0.7.0 → 0.8.0

package/dist/preview/preview-runtime.js

@@ -0,0 +1,512 @@
+/**
+ * @nexart/ui-renderer - Preview Runtime
+ *
+ * Simplified p5-like runtime for preview rendering.
+ * Same API surface as Code Mode, but optimized for performance.
+ *
+ * ╔══════════════════════════════════════════════════════════════════════════╗
+ * ║  PREVIEW RUNTIME — SAME API, SIMPLIFIED INTERNALS                        ║
+ * ║                                                                          ║
+ * ║  This runtime:                                                           ║
+ * ║  - Uses same function names as Code Mode                                 ║
+ * ║  - Is NOT deterministic (performance > fidelity)                         ║
+ * ║  - May have simplified implementations                                   ║
+ * ║  - Pixel operations may be capped                                        ║
+ * ║                                                                          ║
+ * ║  For canonical output: use @nexart/codemode-sdk                          ║
+ * ╚══════════════════════════════════════════════════════════════════════════╝
+ */
+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 createSimpleNoise(seed = 0) {
+    const rng = createSeededRNG(seed);
+    const perm = [];
+    for (let i = 0; i < 256; i++)
+        perm[i] = i;
+    for (let i = 255; i > 0; i--) {
+        const j = Math.floor(rng() * (i + 1));
+        [perm[i], perm[j]] = [perm[j], perm[i]];
+    }
+    for (let i = 0; i < 256; i++)
+        perm[256 + i] = perm[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), v = fade(y), w = fade(z);
+        const A = perm[X] + Y, AA = perm[A] + Z, AB = perm[A + 1] + Z;
+        const B = perm[X + 1] + Y, BA = perm[B] + Z, BB = perm[B + 1] + Z;
+        return (lerp(lerp(lerp(grad(perm[AA], x, y, z), grad(perm[BA], x - 1, y, z), u), lerp(grad(perm[AB], x, y - 1, z), grad(perm[BB], x - 1, y - 1, z), u), v), lerp(lerp(grad(perm[AA + 1], x, y, z - 1), grad(perm[BA + 1], x - 1, y, z - 1), u), lerp(grad(perm[AB + 1], x, y - 1, z - 1), grad(perm[BB + 1], x - 1, y - 1, z - 1), u), v), w) + 1) / 2;
+    };
+}
+function normalizeVars(vars) {
+    if (!vars || !Array.isArray(vars)) {
+        return [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+    }
+    const result = [];
+    for (let i = 0; i < Math.min(vars.length, 10); i++) {
+        const v = vars[i];
+        if (typeof v === 'number' && Number.isFinite(v)) {
+            result.push(Math.max(0, Math.min(100, v)));
+        }
+        else {
+            result.push(0);
+        }
+    }
+    while (result.length < 10)
+        result.push(0);
+    return result;
+}
+export function createPreviewRuntime(canvas, width, height, seed = 12345, vars = []) {
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    let currentFill = 'rgba(255, 255, 255, 1)';
+    let currentStroke = 'rgba(0, 0, 0, 1)';
+    let strokeEnabled = true;
+    let fillEnabled = true;
+    let currentStrokeWeight = 1;
+    let colorMode = { mode: 'RGB', maxR: 255, maxG: 255, maxB: 255, maxA: 255 };
+    let shapeStarted = false;
+    let rng = createSeededRNG(seed);
+    let noiseFunc = createSimpleNoise(seed);
+    let noiseOctaves = 4;
+    let noiseFalloff = 0.5;
+    const normalizedVars = normalizeVars(vars);
+    const frozenVars = Object.freeze([...normalizedVars]);
+    const parseColor = (...args) => {
+        if (args.length === 0)
+            return 'rgba(0, 0, 0, 1)';
+        const { mode, maxR, maxG, maxB, maxA } = colorMode;
+        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);
+            return `rgba(${g}, ${g}, ${g}, ${alpha / maxA})`;
+        }
+        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 = {
+        mode: 'preview',
+        width,
+        height,
+        frameCount: 0,
+        VAR: frozenVars,
+        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: 'butt',
+        MITER: 'miter',
+        BEVEL: 'bevel',
+        CLOSE: 'close',
+        background: (...args) => {
+            ctx.fillStyle = parseColor(...args);
+            ctx.fillRect(0, 0, width, height);
+        },
+        fill: (...args) => {
+            currentFill = parseColor(...args);
+            fillEnabled = true;
+        },
+        noFill: () => { fillEnabled = false; },
+        stroke: (...args) => {
+            currentStroke = parseColor(...args);
+            strokeEnabled = true;
+        },
+        noStroke: () => { strokeEnabled = false; },
+        strokeWeight: (w) => {
+            currentStrokeWeight = w;
+            ctx.lineWidth = w;
+        },
+        strokeCap: (cap) => { ctx.lineCap = cap; },
+        strokeJoin: (join) => { ctx.lineJoin = join; },
+        colorMode: (mode, max1, max2, max3, maxA) => {
+            colorMode.mode = mode;
+            if (max1 !== undefined) {
+                colorMode.maxR = max1;
+                colorMode.maxG = max2 ?? max1;
+                colorMode.maxB = max3 ?? max1;
+                colorMode.maxA = maxA ?? max1;
+            }
+        },
+        push: () => { ctx.save(); },
+        pop: () => { ctx.restore(); },
+        translate: (x, y) => { ctx.translate(x, y); },
+        rotate: (angle) => { ctx.rotate(angle); },
+        scale: (sx, sy) => { ctx.scale(sx, sy ?? sx); },
+        ellipse: (x, y, w, h) => {
+            const rw = w / 2, rh = (h ?? w) / 2;
+            ctx.beginPath();
+            ctx.ellipse(x, y, rw, rh, 0, 0, Math.PI * 2);
+            if (fillEnabled) {
+                ctx.fillStyle = currentFill;
+                ctx.fill();
+            }
+            if (strokeEnabled) {
+                ctx.strokeStyle = currentStroke;
+                ctx.lineWidth = currentStrokeWeight;
+                ctx.stroke();
+            }
+        },
+        circle: (x, y, d) => { p.ellipse(x, y, d, d); },
+        rect: (x, y, w, h, r) => {
+            const ht = h ?? w;
+            ctx.beginPath();
+            if (r && r > 0)
+                ctx.roundRect(x, y, w, ht, r);
+            else
+                ctx.rect(x, y, w, ht);
+            if (fillEnabled) {
+                ctx.fillStyle = currentFill;
+                ctx.fill();
+            }
+            if (strokeEnabled) {
+                ctx.strokeStyle = currentStroke;
+                ctx.lineWidth = currentStrokeWeight;
+                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.strokeStyle = currentStroke;
+                ctx.lineWidth = currentStrokeWeight;
+                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.fillStyle = currentFill;
+                ctx.fill();
+            }
+            if (strokeEnabled) {
+                ctx.strokeStyle = currentStroke;
+                ctx.lineWidth = currentStrokeWeight;
+                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.fillStyle = currentFill;
+                ctx.fill();
+            }
+            if (strokeEnabled) {
+                ctx.strokeStyle = currentStroke;
+                ctx.lineWidth = currentStrokeWeight;
+                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 === 'close' || mode === 'chord')
+                ctx.closePath();
+            else if (mode === 'pie') {
+                ctx.lineTo(x, y);
+                ctx.closePath();
+            }
+            if (fillEnabled) {
+                ctx.fillStyle = currentFill;
+                ctx.fill();
+            }
+            if (strokeEnabled) {
+                ctx.strokeStyle = currentStroke;
+                ctx.lineWidth = currentStrokeWeight;
+                ctx.stroke();
+            }
+        },
+        beginShape: () => { ctx.beginPath(); shapeStarted = true; },
+        vertex: (x, y) => {
+            if (!shapeStarted) {
+                ctx.beginPath();
+                ctx.moveTo(x, y);
+                shapeStarted = true;
+            }
+            else
+                ctx.lineTo(x, y);
+        },
+        curveVertex: (x, y) => { ctx.lineTo(x, y); },
+        bezierVertex: (x2, y2, x3, y3, x4, y4) => {
+            ctx.bezierCurveTo(x2, y2, x3, y3, x4, y4);
+        },
+        quadraticVertex: (cx, cy, x3, y3) => {
+            ctx.quadraticCurveTo(cx, cy, x3, y3);
+        },
+        endShape: (close) => {
+            if (close === 'close')
+                ctx.closePath();
+            if (fillEnabled) {
+                ctx.fillStyle = currentFill;
+                ctx.fill();
+            }
+            if (strokeEnabled) {
+                ctx.strokeStyle = currentStroke;
+                ctx.lineWidth = currentStrokeWeight;
+                ctx.stroke();
+            }
+            shapeStarted = false;
+        },
+        bezier: (x1, y1, x2, y2, x3, y3, x4, y4) => {
+            ctx.beginPath();
+            ctx.moveTo(x1, y1);
+            ctx.bezierCurveTo(x2, y2, x3, y3, x4, y4);
+            if (strokeEnabled) {
+                ctx.strokeStyle = currentStroke;
+                ctx.lineWidth = currentStrokeWeight;
+                ctx.stroke();
+            }
+        },
+        curve: (x1, y1, x2, y2, x3, y3, x4, y4) => {
+            ctx.beginPath();
+            ctx.moveTo(x2, y2);
+            ctx.bezierCurveTo(x2, y2, x3, y3, x3, y3);
+            if (strokeEnabled) {
+                ctx.strokeStyle = currentStroke;
+                ctx.lineWidth = currentStrokeWeight;
+                ctx.stroke();
+            }
+        },
+        text: (str, x, y) => {
+            if (fillEnabled) {
+                ctx.fillStyle = currentFill;
+                ctx.fillText(String(str), x, y);
+            }
+            if (strokeEnabled) {
+                ctx.strokeStyle = currentStroke;
+                ctx.strokeText(String(str), x, y);
+            }
+        },
+        textSize: (size) => { ctx.font = `${size}px sans-serif`; },
+        textAlign: (h, v) => {
+            ctx.textAlign = h;
+            if (v)
+                ctx.textBaseline = v;
+        },
+        random: (min, max) => {
+            if (min === undefined)
+                return rng();
+            if (max === undefined)
+                return rng() * min;
+            return min + rng() * (max - min);
+        },
+        randomSeed: (s) => { rng = createSeededRNG(s); },
+        noise: (x, y, z) => {
+            let total = 0, freq = 1, amp = 1, maxVal = 0;
+            for (let i = 0; i < noiseOctaves; i++) {
+                total += noiseFunc(x * freq, (y ?? 0) * freq, (z ?? 0) * freq) * amp;
+                maxVal += amp;
+                amp *= noiseFalloff;
+                freq *= 2;
+            }
+            return total / maxVal;
+        },
+        noiseSeed: (s) => { noiseFunc = createSimpleNoise(s); },
+        noiseDetail: (octaves, falloff) => {
+            noiseOctaves = octaves;
+            if (falloff !== undefined)
+                noiseFalloff = falloff;
+        },
+        sin: Math.sin, cos: Math.cos, tan: Math.tan,
+        asin: Math.asin, acos: Math.acos, atan: Math.atan, atan2: Math.atan2,
+        abs: Math.abs, ceil: Math.ceil, floor: Math.floor, round: Math.round,
+        min: Math.min, max: Math.max, pow: Math.pow, sqrt: Math.sqrt,
+        exp: Math.exp, log: Math.log, sq: (n) => n * n,
+        int: Math.floor,
+        map: (v, s1, e1, s2, e2) => s2 + (e2 - s2) * ((v - s1) / (e1 - s1)),
+        constrain: (v, lo, hi) => Math.max(lo, Math.min(hi, v)),
+        lerp: (a, b, t) => a + (b - a) * t,
+        dist: (x1, y1, x2, y2) => Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2),
+        mag: (x, y) => Math.sqrt(x * x + y * y),
+        norm: (v, s, e) => (v - s) / (e - s),
+        radians: (d) => d * (Math.PI / 180),
+        degrees: (r) => r * (180 / Math.PI),
+        color: (...args) => parseColor(...args),
+        lerpColor: (c1, c2, amt) => c1,
+        red: (c) => { const m = c.match(/rgba?\((\d+)/); return m ? parseInt(m[1], 10) : 0; },
+        green: (c) => { const m = c.match(/rgba?\(\d+,\s*(\d+)/); return m ? parseInt(m[1], 10) : 0; },
+        blue: (c) => { const m = c.match(/rgba?\(\d+,\s*\d+,\s*(\d+)/); return m ? parseInt(m[1], 10) : 0; },
+        alpha: (c) => { const m = c.match(/rgba\(\d+,\s*\d+,\s*\d+,\s*([\d.]+)\)/); return m ? Math.round(parseFloat(m[1]) * 255) : 255; },
+        hue: () => 0, saturation: () => 0, brightness: () => 0,
+        blendMode: (mode) => { ctx.globalCompositeOperation = mode; },
+        clear: () => { ctx.clearRect(0, 0, width, height); },
+        print: console.log,
+        println: console.log,
+        loop: () => { },
+        noLoop: () => { },
+        fract: (x) => x - Math.floor(x),
+        sign: Math.sign,
+        vec: (x, y) => ({ x, y }),
+        vecAdd: (a, b) => ({ x: a.x + b.x, y: a.y + b.y }),
+        vecSub: (a, b) => ({ x: a.x - b.x, y: a.y - b.y }),
+        vecMult: (v, s) => ({ x: v.x * s, y: v.y * s }),
+        vecMag: (v) => Math.sqrt(v.x * v.x + v.y * v.y),
+        vecNorm: (v) => { const m = Math.sqrt(v.x * v.x + v.y * v.y) || 1; return { x: v.x / m, y: v.y / m }; },
+        vecDist: (a, b) => Math.sqrt((b.x - a.x) ** 2 + (b.y - a.y) ** 2),
+        polygon: (x, y, r, n) => {
+            ctx.beginPath();
+            for (let i = 0; i < n; i++) {
+                const angle = (Math.PI * 2 * i) / n - Math.PI / 2;
+                const px = x + r * Math.cos(angle);
+                const py = y + r * Math.sin(angle);
+                if (i === 0)
+                    ctx.moveTo(px, py);
+                else
+                    ctx.lineTo(px, py);
+            }
+            ctx.closePath();
+            if (fillEnabled) {
+                ctx.fillStyle = currentFill;
+                ctx.fill();
+            }
+            if (strokeEnabled) {
+                ctx.strokeStyle = currentStroke;
+                ctx.lineWidth = currentStrokeWeight;
+                ctx.stroke();
+            }
+        },
+        star: (x, y, r1, r2, n) => {
+            ctx.beginPath();
+            for (let i = 0; i < n * 2; i++) {
+                const angle = (Math.PI * i) / n - Math.PI / 2;
+                const r = i % 2 === 0 ? r2 : r1;
+                const px = x + r * Math.cos(angle);
+                const py = y + r * Math.sin(angle);
+                if (i === 0)
+                    ctx.moveTo(px, py);
+                else
+                    ctx.lineTo(px, py);
+            }
+            ctx.closePath();
+            if (fillEnabled) {
+                ctx.fillStyle = currentFill;
+                ctx.fill();
+            }
+            if (strokeEnabled) {
+                ctx.strokeStyle = currentStroke;
+                ctx.lineWidth = currentStrokeWeight;
+                ctx.stroke();
+            }
+        },
+        easeIn: (t) => t * t,
+        easeOut: (t) => 1 - (1 - t) * (1 - t),
+        easeInOut: (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2,
+        easeCubic: (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
+        easeExpo: (t) => t === 0 ? 0 : t === 1 ? 1 : t < 0.5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2,
+        fbm: (x, y, z, octaves = 4) => {
+            let val = 0, amp = 0.5, freq = 1;
+            for (let i = 0; i < octaves; i++) {
+                val += amp * noiseFunc(x * freq, (y ?? 0) * freq, (z ?? 0) * freq);
+                freq *= 2;
+                amp *= 0.5;
+            }
+            return val;
+        },
+        ridgedNoise: (x, y, z) => {
+            return 1 - Math.abs(noiseFunc(x, y ?? 0, z ?? 0) * 2 - 1);
+        },
+        curlNoise: (x, y, epsilon = 0.001) => {
+            const n1 = noiseFunc(x, y + epsilon);
+            const n2 = noiseFunc(x, y - epsilon);
+            const n3 = noiseFunc(x + epsilon, y);
+            const n4 = noiseFunc(x - epsilon, y);
+            return { x: (n1 - n2) / (2 * epsilon), y: -(n3 - n4) / (2 * epsilon) };
+        },
+        createGraphics: (w, h) => {
+            const offCanvas = document.createElement('canvas');
+            offCanvas.width = Math.min(w, 900);
+            offCanvas.height = Math.min(h, 900);
+            return createPreviewRuntime(offCanvas, offCanvas.width, offCanvas.height, seed, vars);
+        },
+        image: (img, x, y, w, h) => {
+            try {
+                if (img && img.width && img.height) {
+                    const srcCanvas = document.createElement('canvas');
+                    srcCanvas.width = img.width;
+                    srcCanvas.height = img.height;
+                    const srcCtx = srcCanvas.getContext('2d');
+                    if (srcCtx && img.background) {
+                        srcCtx.drawImage(srcCanvas, 0, 0);
+                    }
+                    ctx.drawImage(srcCanvas, x, y, w ?? img.width, h ?? img.height);
+                }
+            }
+            catch {
+                // Silently fail for preview
+            }
+        },
+        loadPixels: () => { },
+        updatePixels: () => { },
+        get: () => [0, 0, 0, 255],
+        set: () => { },
+        pixels: [],
+        totalFrames: 120,
+        t: 0,
+        time: 0,
+        tGlobal: 0,
+    };
+    return p;
+}

package/dist/preview/preview-types.d.ts

@@ -0,0 +1,116 @@
+/**
+ * @nexart/ui-renderer - Preview Runtime Types
+ *
+ * ╔══════════════════════════════════════════════════════════════════════════╗
+ * ║  PREVIEW RUNTIME — NON-AUTHORITATIVE                                     ║
+ * ║                                                                          ║
+ * ║  This renderer is a preview-only runtime.                                ║
+ * ║  It does not guarantee determinism or protocol compliance.               ║
+ * ║                                                                          ║
+ * ║  For minting, export, or validation: use @nexart/codemode-sdk            ║
+ * ╚══════════════════════════════════════════════════════════════════════════╝
+ */
+/**
+ * Runtime profile - this renderer is preview-only.
+ * Canonical execution remains SDK-only.
+ */
+export type RuntimeProfile = 'preview';
+/**
+ * Execution budget limits (MANDATORY).
+ * These prevent browser freezes and ensure UI responsiveness.
+ */
+export declare const PREVIEW_BUDGET: {
+    /** Maximum frames rendered before auto-termination */
+    readonly MAX_FRAMES: 30;
+    /** Maximum total execution time in milliseconds */
+    readonly MAX_TOTAL_TIME_MS: 500;
+    /** Target frame time (best effort, ~60fps) */
+    readonly TARGET_FRAME_TIME_MS: 16;
+    /** Frame stride for performance (render every Nth frame) */
+    readonly FRAME_STRIDE: 3;
+};
+/**
+ * Canvas resolution limits.
+ * Preview renderer does not render at full mint resolution.
+ */
+export declare const CANVAS_LIMITS: {
+    /** Maximum dimension for preview canvas */
+    readonly MAX_DIMENSION: 900;
+    /** Minimum dimension */
+    readonly MIN_DIMENSION: 100;
+};
+/**
+ * Preview mode options
+ */
+export type PreviewMode = 'static' | 'loop';
+/**
+ * Preview engine configuration
+ */
+export interface PreviewEngineConfig {
+    /** Canvas element to render to */
+    canvas: HTMLCanvasElement;
+    /** Source code to execute */
+    source: string;
+    /** Preview mode */
+    mode: PreviewMode;
+    /** Original width (will be scaled down) */
+    width: number;
+    /** Original height (will be scaled down) */
+    height: number;
+    /** Random seed for deterministic preview */
+    seed?: number;
+    /** VAR array (0-10 elements, 0-100 range) */
+    vars?: number[];
+    /** Total frames for loop mode (for t calculation) */
+    totalFrames?: number;
+}
+/**
+ * Preview render result
+ */
+export interface PreviewRenderResult {
+    /** Whether rendering completed successfully */
+    success: boolean;
+    /** Frames rendered */
+    framesRendered: number;
+    /** Total execution time in ms */
+    executionTimeMs: number;
+    /** Whether execution was terminated early due to limits */
+    terminatedEarly: boolean;
+    /** Termination reason if applicable */
+    terminationReason?: 'frame_limit' | 'time_limit' | 'user_stop' | 'error';
+    /** Error message if any (non-throwing) */
+    errorMessage?: string;
+}
+/**
+ * Preview renderer interface
+ */
+export interface PreviewRenderer {
+    /** Render a single frame (static mode) */
+    renderStatic: () => PreviewRenderResult;
+    /** Start loop rendering */
+    startLoop: () => void;
+    /** Stop loop rendering */
+    stopLoop: () => void;
+    /** Destroy renderer and clean up */
+    destroy: () => void;
+    /** Check if currently rendering */
+    isRendering: () => boolean;
+    /** This renderer is NOT canonical */
+    readonly isCanonical: false;
+    /** This renderer is NOT archival */
+    readonly isArchival: false;
+}
+/**
+ * Frame budget state for tracking execution limits
+ */
+export interface FrameBudgetState {
+    /** Frames rendered so far */
+    framesRendered: number;
+    /** Start time of execution */
+    startTimeMs: number;
+    /** Whether budget is exhausted */
+    exhausted: boolean;
+    /** Reason for exhaustion */
+    exhaustionReason?: 'frame_limit' | 'time_limit';
+}
+//# sourceMappingURL=preview-types.d.ts.map

package/dist/preview/preview-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-types.d.ts","sourceRoot":"","sources":["../../src/preview/preview-types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC;AAEvC;;;GAGG;AACH,eAAO,MAAM,cAAc;IACzB,sDAAsD;;IAEtD,mDAAmD;;IAEnD,8CAA8C;;IAE9C,4DAA4D;;CAEpD,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,aAAa;IACxB,2CAA2C;;IAE3C,wBAAwB;;CAEhB,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,kCAAkC;IAClC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,6BAA6B;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,EAAE,WAAW,CAAC;IAClB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,iCAAiC;IACjC,eAAe,EAAE,MAAM,CAAC;IACxB,2DAA2D;IAC3D,eAAe,EAAE,OAAO,CAAC;IACzB,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,CAAC;IACzE,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,0CAA0C;IAC1C,YAAY,EAAE,MAAM,mBAAmB,CAAC;IACxC,2BAA2B;IAC3B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,0BAA0B;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,mCAAmC;IACnC,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC;IAC5B,oCAAoC;IACpC,QAAQ,CAAC,UAAU,EAAE,KAAK,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,6BAA6B;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,8BAA8B;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,aAAa,GAAG,YAAY,CAAC;CACjD"}

package/dist/preview/preview-types.js

@@ -0,0 +1,36 @@
+/**
+ * @nexart/ui-renderer - Preview Runtime Types
+ *
+ * ╔══════════════════════════════════════════════════════════════════════════╗
+ * ║  PREVIEW RUNTIME — NON-AUTHORITATIVE                                     ║
+ * ║                                                                          ║
+ * ║  This renderer is a preview-only runtime.                                ║
+ * ║  It does not guarantee determinism or protocol compliance.               ║
+ * ║                                                                          ║
+ * ║  For minting, export, or validation: use @nexart/codemode-sdk            ║
+ * ╚══════════════════════════════════════════════════════════════════════════╝
+ */
+/**
+ * Execution budget limits (MANDATORY).
+ * These prevent browser freezes and ensure UI responsiveness.
+ */
+export const PREVIEW_BUDGET = {
+    /** Maximum frames rendered before auto-termination */
+    MAX_FRAMES: 30,
+    /** Maximum total execution time in milliseconds */
+    MAX_TOTAL_TIME_MS: 500,
+    /** Target frame time (best effort, ~60fps) */
+    TARGET_FRAME_TIME_MS: 16,
+    /** Frame stride for performance (render every Nth frame) */
+    FRAME_STRIDE: 3,
+};
+/**
+ * Canvas resolution limits.
+ * Preview renderer does not render at full mint resolution.
+ */
+export const CANVAS_LIMITS = {
+    /** Maximum dimension for preview canvas */
+    MAX_DIMENSION: 900,
+    /** Minimum dimension */
+    MIN_DIMENSION: 100,
+};

package/dist/preview/renderer.d.ts

@@ -1,9 +1,9 @@
 /**
- * @nexart/ui-renderer v0.7.0 - Preview Renderer
+ * @nexart/ui-renderer v0.8.0 - Preview Renderer
  *
  * Renders visual approximations of NexArt systems.
- * This is NOT canonical output - for preview/exploration only.
- * Mirrors @nexart/codemode-sdk v1.4.0 (Protocol v1.2.0).
+ * Lightweight preview runtime — NOT canonical, NOT archival.
+ * For canonical output: use @nexart/codemode-sdk
  */
 import type { NexArtSystem, PreviewOptions } from '../types';
 export interface PreviewRenderer {