@nexart/ui-renderer 0.7.0 → 0.8.1

package/dist/preview/code-renderer.js

@@ -1,692 +1,132 @@
 /**
- * @nexart/ui-renderer v0.7.0 - Code Mode Renderer
+ * @nexart/ui-renderer v0.8.0 - Code Mode Renderer
  *
  * ╔══════════════════════════════════════════════════════════════════════════╗
- * ║  PREVIEW RENDERER — MIRRORS @nexart/codemode-sdk BEHAVIOR                ║
+ * ║  PREVIEW RENDERER — LIGHTWEIGHT, NON-AUTHORITATIVE                       ║
  * ║                                                                          ║
- * ║  This file is a MIRROR, not an authority.                                ║
+ * ║  This renderer is a preview-only runtime.                                ║
+ * ║  It does not guarantee determinism or protocol compliance.               ║
  * ║                                                                          ║
- * ║  Authority: @nexart/codemode-sdk v1.4.0 (Protocol v1.2.0)                ║
+ * ║  Performance Limits (MANDATORY):                                         ║
+ * ║  - Max frames: 30                                                        ║
+ * ║  - Max total time: 500ms                                                 ║
+ * ║  - Max canvas dimension: 900px                                           ║
+ * ║  - Frame stride: render every 3rd frame                                  ║
+ * ║                                                                          ║
+ * ║  For minting, export, or validation: use @nexart/codemode-sdk            ║
  * ╚══════════════════════════════════════════════════════════════════════════╝
- *
- * ARCHITECTURAL NOTE:
- * -------------------
- * Live preview animation requires local p5 runtime execution because:
- * - @nexart/codemode-sdk.executeCodeMode() returns blobs (PNG/MP4), not frames
- * - Real-time animation in the browser requires frame-by-frame canvas updates
- * - The SDK's loop mode produces video files, not real-time rendering
- *
- * To ensure faithful mirroring, this renderer:
- * 1. Uses identical forbidden pattern validation as the SDK
- * 2. Uses identical VAR handling (read-only, 0-10 input → 10 runtime, 0-100 strict, errors not clamps)
- * 3. Uses identical seeded RNG (Mulberry32) and Perlin noise
- * 4. Uses identical time variable semantics (frameCount, t, time, tGlobal)
- *
- * For archival/canonical output, use @nexart/codemode-sdk directly.
  */
+import { PREVIEW_BUDGET, } from './preview-types';
+import { createFrameBudget, canRenderFrame, recordFrame, resetBudget, shouldSkipFrame, } from './frame-budget';
+import { calculateScaledDimensions, applyScaledDimensions, reapplyContextScale, clearCanvasIgnoringTransform, } from './canvas-scaler';
+import { createPreviewRuntime } from './preview-runtime';
 const PROTOCOL_VERSION = '1.2.0';
 let activeRendererInstance = null;
 /**
- * Validate and normalize VAR array to 10 elements.
- *
- * ╔════════════════════════════════════════════════════════════════════════════╗
- * ║  MUST MATCH @nexart/codemode-sdk v1.4.0 EXACTLY                            ║
- * ║  Any change here requires updating codemode-sdk's normalizeVars() too.     ║
- * ╚════════════════════════════════════════════════════════════════════════════╝
- *
- * Rules (SDK v1.4.0, Protocol v1.2.0):
- * - VAR is OPTIONAL: omit or pass [] for empty (defaults to all zeros)
- * - VAR input length MUST be 0-10 elements (protocol error if > 10)
- * - VAR values MUST be finite numbers (protocol error if not)
- * - VAR values MUST be in range 0-100 (protocol error if out of range, NO clamping)
- * - VAR is read-only inside sketches
- * - Output is ALWAYS 10 elements (padded with zeros) for protocol consistency
+ * Normalize VAR array.
+ * Preview version clamps instead of throwing for better UX.
  */
 function normalizeVars(vars) {
     if (!vars || !Array.isArray(vars)) {
-        console.log('[UIRenderer] No vars provided, using defaults [0,0,0,0,0,0,0,0,0,0]');
         return [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
     }
-    if (vars.length > 10) {
-        throw new Error(`[Code Mode Protocol Error] VAR array must have at most 10 elements, got ${vars.length}`);
-    }
     const result = [];
-    for (let i = 0; i < vars.length; i++) {
+    for (let i = 0; i < Math.min(vars.length, 10); i++) {
         const v = vars[i];
-        if (typeof v !== 'number' || !Number.isFinite(v)) {
-            throw new Error(`[Code Mode Protocol Error] VAR[${i}] must be a finite number, got ${typeof v === 'number' ? v : typeof v}`);
+        if (typeof v === 'number' && Number.isFinite(v)) {
+            result.push(Math.max(0, Math.min(100, v)));
         }
-        if (v < 0 || v > 100) {
-            throw new Error(`[Code Mode Protocol Error] VAR[${i}] = ${v} is out of range. Values must be 0-100.`);
+        else {
+            result.push(0);
         }
-        result.push(v);
     }
-    // Pad with zeros to always have 10 elements for protocol consistency
-    while (result.length < 10) {
+    while (result.length < 10)
         result.push(0);
-    }
     return result;
 }
-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;
-    };
-}
-/**
- * Create a protected, read-only VAR array for protocol execution.
- *
- * ╔════════════════════════════════════════════════════════════════════════════╗
- * ║  MUST MATCH @nexart/codemode-sdk v1.4.0 EXACTLY                            ║
- * ║  Any change here requires updating codemode-sdk's createProtocolVAR() too. ║
- * ╚════════════════════════════════════════════════════════════════════════════╝
- *
- * SDK v1.4.0 Rules (Protocol v1.2.0):
- * - Input accepts 0-10 elements
- * - Runtime VAR is ALWAYS 10 elements (padded with zeros)
- * - Values are numeric, must be in 0-100 range (validated upstream)
- * - Read-only: writes throw descriptive errors
- */
-function createProtectedVAR(vars) {
-    // Create frozen 10-element array (upstream normalizeVars ensures this)
-    const normalizedVars = [];
-    for (let i = 0; i < 10; i++) {
-        normalizedVars[i] = vars?.[i] ?? 0;
-    }
-    // Freeze the array to prevent modifications
-    const frozenVars = Object.freeze(normalizedVars);
-    // Wrap in Proxy for descriptive error messages on write attempts
-    return new Proxy(frozenVars, {
-        set(_target, prop, _value) {
-            const propName = typeof prop === 'symbol' ? prop.toString() : prop;
-            throw new Error(`[Code Mode Protocol Error] VAR is read-only. ` +
-                `Cannot write to VAR[${propName}]. ` +
-                `VAR[0..9] are protocol inputs, not sketch state.`);
-        },
-        deleteProperty(_target, prop) {
-            const propName = typeof prop === 'symbol' ? prop.toString() : prop;
-            throw new Error(`[Code Mode Protocol Error] VAR is read-only. ` +
-                `Cannot delete VAR[${propName}].`);
-        },
-        defineProperty(_target, prop) {
-            const propName = typeof prop === 'symbol' ? prop.toString() : prop;
-            throw new Error(`[Code Mode Protocol Error] Cannot define new VAR properties. ` +
-                `VAR is fixed at 10 elements (VAR[0..9]). Attempted: ${propName}`);
-        },
-    });
-}
-export function createP5Runtime(canvas, width, height, seed, vars = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]) {
-    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 colorModeSettings = { mode: 'RGB', maxR: 255, maxG: 255, maxB: 255, maxA: 255 };
-    let shapeStarted = false;
-    let randomSeedValue = seed;
-    let rng = createSeededRNG(randomSeedValue);
-    let noiseSeedValue = seed;
-    let noiseFunc = createSeededNoise(noiseSeedValue);
-    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 protectedVAR = createProtectedVAR(vars);
-    const p = {
-        width,
-        height,
-        frameCount: 0,
-        VAR: protectedVAR,
-        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) => {
-            colorModeSettings.mode = mode;
-            if (max1 !== undefined) {
-                colorModeSettings.maxR = max1;
-                colorModeSettings.maxG = max2 ?? max1;
-                colorModeSettings.maxB = max3 ?? max1;
-                colorModeSettings.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;
-            const 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 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.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: (horizAlign, vertAlign) => {
-            ctx.textAlign = horizAlign;
-            if (vertAlign) {
-                ctx.textBaseline = vertAlign;
-            }
-        },
-        random: (min, max) => {
-            if (min === undefined) {
-                return rng();
-            }
-            if (max === undefined) {
-                return rng() * min;
-            }
-            return min + rng() * (max - min);
-        },
-        randomSeed: (s) => {
-            randomSeedValue = s;
-            rng = createSeededRNG(s);
-        },
-        noise: (x, y, z) => {
-            let total = 0;
-            let freq = 1;
-            let amp = 1;
-            let maxValue = 0;
-            for (let i = 0; i < noiseOctaves; i++) {
-                total += noiseFunc(x * freq, (y ?? 0) * freq, (z ?? 0) * freq) * amp;
-                maxValue += amp;
-                amp *= noiseFalloff;
-                freq *= 2;
-            }
-            return total / maxValue;
-        },
-        noiseSeed: (s) => {
-            noiseSeedValue = s;
-            noiseFunc = createSeededNoise(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,
-        map: (value, start1, stop1, start2, stop2) => {
-            return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
-        },
-        constrain: (value, low, high) => {
-            return Math.max(low, Math.min(high, value));
-        },
-        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);
-        },
-        radians: (degrees) => degrees * (Math.PI / 180),
-        degrees: (radians) => radians * (180 / Math.PI),
-        color: (...args) => parseColor(...args),
-        lerpColor: (c1, c2, amt) => {
-            return c1;
-        },
-        red: (c) => {
-            const match = c.match(/rgba?\((\d+)/);
-            if (match)
-                return parseInt(match[1], 10);
-            const rgbMatch = c.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-            if (rgbMatch)
-                return parseInt(rgbMatch[1], 10);
-            return 0;
-        },
-        green: (c) => {
-            const match = c.match(/rgba?\(\d+,\s*(\d+)/);
-            if (match)
-                return parseInt(match[1], 10);
-            const rgbMatch = c.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-            if (rgbMatch)
-                return parseInt(rgbMatch[2], 10);
-            return 0;
-        },
-        blue: (c) => {
-            const match = c.match(/rgba?\(\d+,\s*\d+,\s*(\d+)/);
-            if (match)
-                return parseInt(match[1], 10);
-            const rgbMatch = c.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-            if (rgbMatch)
-                return parseInt(rgbMatch[3], 10);
-            return 0;
-        },
-        alpha: (c) => {
-            const match = c.match(/rgba\(\d+,\s*\d+,\s*\d+,\s*([\d.]+)\)/);
-            if (match)
-                return Math.round(parseFloat(match[1]) * 255);
-            return 255;
-        },
-        hue: (c) => 0,
-        saturation: (c) => 0,
-        brightness: (c) => 0,
-        blendMode: (mode) => {
-            ctx.globalCompositeOperation = mode;
-        },
-        clear: () => {
-            ctx.clearRect(0, 0, width, height);
-        },
-        print: console.log,
-        println: console.log,
-    };
-    return p;
-}
-function injectTimeVariables(p, time) {
-    p.frameCount = time.frameCount;
-    p.t = time.t;
-    p.time = time.time;
-    p.tGlobal = time.tGlobal;
-}
-/**
- * Validate forbidden patterns in code.
- * MIRRORS @nexart/codemode-sdk forbidden patterns exactly.
- * Error messages match SDK wording for consistency.
- */
-function validateForbiddenPatterns(code) {
-    const forbiddenPatterns = [
-        { pattern: /setTimeout\s*\(/, name: 'setTimeout' },
-        { pattern: /setInterval\s*\(/, name: 'setInterval' },
-        { pattern: /requestAnimationFrame\s*\(/, name: 'requestAnimationFrame' },
-        { pattern: /Date\.now\s*\(/, name: 'Date.now() — use time variable instead' },
-        { pattern: /new\s+Date\s*\(/, name: 'new Date() — use time variable instead' },
-        { pattern: /Math\.random\s*\(/, name: 'Math.random() — use random() instead (seeded)' },
-        { pattern: /fetch\s*\(/, name: 'fetch() — external IO forbidden' },
-        { pattern: /XMLHttpRequest/, name: 'XMLHttpRequest — external IO forbidden' },
-        { pattern: /createCanvas\s*\(/, name: 'createCanvas() — canvas is pre-initialized' },
-        { pattern: /document\./, name: 'DOM access — document.* forbidden' },
-        { pattern: /window\./, name: 'DOM access — window.* forbidden' },
-        { pattern: /\bimport\s+/, name: 'import — external imports forbidden' },
-        { pattern: /\brequire\s*\(/, name: 'require() — external imports forbidden' },
-    ];
-    for (const { pattern, name } of forbiddenPatterns) {
-        if (pattern.test(code)) {
-            throw new Error(`[Code Mode Protocol Error] Forbidden pattern: ${name}`);
-        }
-    }
-}
 export function renderCodeModeSystem(system, canvas, options = {}) {
-    console.log('[UIRenderer] Preview delegation → @nexart/codemode-sdk');
-    console.log(`[UIRenderer] Protocol version: ${PROTOCOL_VERSION}`);
-    console.log(`[UIRenderer] Mode: ${system.mode}`);
+    console.log('[UIRenderer] Preview mode → lightweight runtime with budget limits');
+    console.log(`[UIRenderer] Budget: max ${PREVIEW_BUDGET.MAX_FRAMES} frames, ${PREVIEW_BUDGET.MAX_TOTAL_TIME_MS}ms`);
     if (activeRendererInstance) {
         activeRendererInstance.destroy();
         activeRendererInstance = null;
     }
     const { showBadge = true, onPreview, onComplete, onError } = options;
-    canvas.width = system.width;
-    canvas.height = system.height;
+    const scaled = calculateScaledDimensions(system.width, system.height);
+    if (scaled.wasScaled) {
+        console.log(`[UIRenderer] Canvas scaled: ${system.width}x${system.height} → ${scaled.renderWidth}x${scaled.renderHeight}`);
+    }
+    applyScaledDimensions(canvas, scaled);
+    // NOTE: Canvas resizing resets the 2D context transform.
+    // Reapply scale factor once after resize for correct rendering.
+    reapplyContextScale(canvas, scaled);
     const ctx = canvas.getContext('2d');
     let animationId = null;
     let isRunning = false;
     let isDestroyed = false;
+    const budget = createFrameBudget();
     const normalizedVars = normalizeVars(system.vars);
-    const extractFunctions = (code) => {
-        const setupMatch = code.match(/function\s+setup\s*\(\s*\)\s*\{([\s\S]*?)\}(?=\s*function|\s*$)/);
-        const drawMatch = code.match(/function\s+draw\s*\(\s*\)\s*\{([\s\S]*?)\}(?=\s*function|\s*$)/);
-        return {
-            setupCode: setupMatch ? setupMatch[1].trim() : code,
-            drawCode: drawMatch ? drawMatch[1].trim() : null,
-        };
+    let runtime = null;
+    let setupFn = null;
+    let drawFn = null;
+    const compileSource = () => {
+        runtime = createPreviewRuntime(canvas, scaled.renderWidth, scaled.renderHeight, system.seed ?? 12345, normalizedVars);
+        const totalFrames = system.totalFrames ?? 120;
+        runtime.totalFrames = totalFrames;
+        try {
+            const globalVars = Object.keys(runtime);
+            const globalValues = Object.values(runtime);
+            const wrappedSource = `
+        ${system.source}
+        if (typeof setup === 'function') __registerSetup(setup);
+        if (typeof draw === 'function') __registerDraw(draw);
+      `;
+            const registerSetup = (fn) => { setupFn = fn; };
+            const registerDraw = (fn) => { drawFn = fn; };
+            globalVars.push('__registerSetup', '__registerDraw');
+            globalValues.push(registerSetup, registerDraw);
+            const fn = new Function(...globalVars, wrappedSource);
+            fn(...globalValues);
+        }
+        catch (error) {
+            console.warn('[UIRenderer] Compile error:', error);
+        }
     };
     const drawBadge = () => {
         if (!showBadge)
             return;
-        const text = '⚠️ Preview (mirrors @nexart/codemode-sdk)';
-        ctx.font = '12px -apple-system, sans-serif';
+        const text = '⚠️ Preview';
+        ctx.font = '10px -apple-system, sans-serif';
         const metrics = ctx.measureText(text);
-        const padding = 8;
+        const padding = 6;
         const badgeWidth = metrics.width + padding * 2;
-        const badgeHeight = 24;
-        const x = system.width - badgeWidth - 10;
-        const y = 10;
+        const badgeHeight = 18;
+        const x = scaled.renderWidth - badgeWidth - 6;
+        const y = 6;
         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.roundRect(x, y, badgeWidth, badgeHeight, 3);
         ctx.fill();
         ctx.stroke();
         ctx.fillStyle = '#ff9999';
-        ctx.fillText(text, x + padding, y + 16);
+        ctx.fillText(text, x + padding, y + 13);
     };
     const renderBlackCanvas = (error) => {
         ctx.fillStyle = '#000000';
-        ctx.fillRect(0, 0, system.width, system.height);
+        ctx.fillRect(0, 0, scaled.renderWidth, scaled.renderHeight);
         ctx.fillStyle = '#ff6666';
-        ctx.font = '14px monospace';
-        ctx.fillText('[Protocol Error]', 20, 30);
-        ctx.fillText(error.message, 20, 50);
+        ctx.font = '12px monospace';
+        ctx.fillText('[Preview Error]', 10, 20);
+        ctx.fillText(error.message.slice(0, 60), 10, 36);
     };
     const renderStatic = () => {
         try {
-            console.log('[UIRenderer] Delegating static render via protocol-aligned runtime');
-            validateForbiddenPatterns(system.source);
-            const { setupCode } = extractFunctions(system.source);
-            const p = createP5Runtime(canvas, system.width, system.height, system.seed, normalizedVars);
-            injectTimeVariables(p, { frameCount: 0, t: 0, time: 0, tGlobal: 0 });
-            const wrappedSetup = new Function('p', 'frameCount', 't', 'time', 'tGlobal', 'VAR', `with(p) { ${setupCode} }`);
-            wrappedSetup(p, 0, 0, 0, 0, p.VAR);
+            compileSource();
+            if (setupFn) {
+                setupFn();
+            }
             drawBadge();
             onPreview?.(canvas);
             canvas.toBlob((blob) => {
@@ -697,7 +137,7 @@ export function renderCodeModeSystem(system, canvas, options = {}) {
         }
         catch (error) {
             const err = error instanceof Error ? error : new Error(String(error));
-            console.error('[UIRenderer Protocol Error]', err.message);
+            console.warn('[UIRenderer] Static render error:', err.message);
             renderBlackCanvas(err);
             onError?.(err);
         }
@@ -706,38 +146,53 @@ export function renderCodeModeSystem(system, canvas, options = {}) {
         if (isDestroyed)
             return;
         try {
-            console.log('[UIRenderer] Delegating loop render via protocol-aligned runtime');
-            validateForbiddenPatterns(system.source);
-            const { setupCode, drawCode } = extractFunctions(system.source);
-            if (!drawCode) {
-                throw new Error('[Protocol Error] Loop mode requires a draw() function');
-            }
-            const totalFrames = system.totalFrames ?? 60;
-            let frame = 0;
-            const p = createP5Runtime(canvas, system.width, system.height, system.seed, normalizedVars);
-            const wrappedSetup = new Function('p', 'frameCount', 't', 'time', 'tGlobal', 'VAR', `with(p) { ${setupCode} }`);
-            const wrappedDraw = new Function('p', 'frameCount', 't', 'time', 'tGlobal', 'VAR', `with(p) { ${drawCode} }`);
-            wrappedSetup(p, 0, 0, 0, 0, p.VAR);
+            compileSource();
+            if (!drawFn) {
+                console.warn('[UIRenderer] Loop mode: no draw() function found, using static');
+                renderStatic();
+                return;
+            }
+            const totalFrames = system.totalFrames ?? 120;
+            let frameCount = 0;
+            if (setupFn) {
+                setupFn();
+            }
+            resetBudget(budget);
+            isRunning = true;
             const loop = () => {
                 if (!isRunning || isDestroyed)
                     return;
-                const t = frame / totalFrames;
-                const time = t * (system.totalFrames ? system.totalFrames / 30 : 2);
-                ctx.clearRect(0, 0, system.width, system.height);
-                injectTimeVariables(p, { frameCount: frame, t, time, tGlobal: t });
-                p.randomSeed(system.seed);
-                p.noiseSeed(system.seed);
-                wrappedDraw(p, frame, t, time, t, p.VAR);
-                drawBadge();
-                frame = (frame + 1) % totalFrames;
+                if (!canRenderFrame(budget)) {
+                    console.log(`[UIRenderer] Budget exhausted: ${budget.exhaustionReason}`);
+                    isRunning = false;
+                    return;
+                }
+                frameCount++;
+                if (!shouldSkipFrame(frameCount)) {
+                    if (runtime) {
+                        runtime.frameCount = frameCount;
+                        runtime.t = (frameCount % totalFrames) / totalFrames;
+                        runtime.time = runtime.t;
+                        runtime.tGlobal = runtime.t;
+                    }
+                    try {
+                        clearCanvasIgnoringTransform(ctx, canvas);
+                        if (drawFn)
+                            drawFn();
+                        drawBadge();
+                        recordFrame(budget);
+                    }
+                    catch (error) {
+                        console.warn('[UIRenderer] Draw error:', error);
+                    }
+                }
                 animationId = requestAnimationFrame(loop);
             };
-            isRunning = true;
             animationId = requestAnimationFrame(loop);
         }
         catch (error) {
             const err = error instanceof Error ? error : new Error(String(error));
-            console.error('[UIRenderer Protocol Error]', err.message);
+            console.warn('[UIRenderer] Loop render error:', err.message);
             renderBlackCanvas(err);
             onError?.(err);
         }
@@ -773,7 +228,10 @@ export function renderCodeModeSystem(system, canvas, options = {}) {
     const destroy = () => {
         isDestroyed = true;
         stop();
-        ctx.clearRect(0, 0, system.width, system.height);
+        clearCanvasIgnoringTransform(ctx, canvas);
+        runtime = null;
+        setupFn = null;
+        drawFn = null;
         if (activeRendererInstance === renderer) {
             activeRendererInstance = null;
         }