@nexart/ui-renderer 0.2.1 → 0.4.0

package/dist/preview/code-renderer.js

@@ -0,0 +1,759 @@
+/**
+ * @nexart/ui-renderer v0.4.0 - Code Mode Renderer
+ *
+ * ╔══════════════════════════════════════════════════════════════════════════╗
+ * ║  PREVIEW RENDERER — MIRRORS @nexart/codemode-sdk BEHAVIOR                ║
+ * ║                                                                          ║
+ * ║  This file is a MIRROR, not an authority.                                ║
+ * ║                                                                          ║
+ * ║  Authority: @nexart/codemode-sdk (Protocol v1.0.0)                       ║
+ * ╚══════════════════════════════════════════════════════════════════════════╝
+ *
+ * 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, 10 elements, 0-100 range, 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.
+ */
+const PROTOCOL_VERSION = '1.0.0';
+let activeRendererInstance = null;
+/**
+ * Validate and normalize VAR array to exactly 10 values.
+ * MIRRORS @nexart/codemode-sdk behavior exactly.
+ *
+ * Rules:
+ * - VAR MUST be exactly 10 elements (protocol error if not)
+ * - VAR values MUST be numbers (protocol error if not)
+ * - VAR values 0-100 recommended (warns if out of range, but does NOT clamp)
+ * - VAR is read-only inside sketches
+ */
+function normalizeVars(vars) {
+    if (!vars || !Array.isArray(vars)) {
+        console.log('[UIRenderer] No vars provided, using protocol 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 exactly 10 elements, got ${vars.length}`);
+    }
+    const result = [];
+    for (let i = 0; i < 10; i++) {
+        const v = vars[i];
+        if (typeof v !== 'number') {
+            throw new Error(`[Code Mode Protocol Error] VAR[${i}] must be a number, got ${typeof v}`);
+        }
+        if (v < 0 || v > 100) {
+            console.warn(`[UIRenderer] VAR[${i}] = ${v} is outside recommended range 0-100`);
+        }
+        result.push(v);
+    }
+    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;
+    };
+}
+function createProtectedVAR(vars) {
+    const frozenVars = Object.freeze([...vars]);
+    return new Proxy(frozenVars, {
+        get(target, prop) {
+            if (typeof prop === 'string' && !isNaN(Number(prop))) {
+                const index = Number(prop);
+                if (index >= 0 && index < 10) {
+                    return target[index];
+                }
+            }
+            if (prop === 'length')
+                return 10;
+            return target[prop];
+        },
+        set(target, prop, value) {
+            console.warn(`[UIRenderer Protocol Warning] VAR is read-only. Attempted write to VAR[${String(prop)}] blocked.`);
+            return true;
+        }
+    });
+}
+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}`);
+    if (activeRendererInstance) {
+        activeRendererInstance.destroy();
+        activeRendererInstance = null;
+    }
+    const { showBadge = true, onPreview, onComplete, onError } = options;
+    canvas.width = system.width;
+    canvas.height = system.height;
+    const ctx = canvas.getContext('2d');
+    let animationId = null;
+    let isRunning = false;
+    let isDestroyed = false;
+    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,
+        };
+    };
+    const drawBadge = () => {
+        if (!showBadge)
+            return;
+        const text = '⚠️ Preview (mirrors @nexart/codemode-sdk)';
+        ctx.font = '12px -apple-system, sans-serif';
+        const metrics = ctx.measureText(text);
+        const padding = 8;
+        const badgeWidth = metrics.width + padding * 2;
+        const badgeHeight = 24;
+        const x = system.width - badgeWidth - 10;
+        const y = 10;
+        ctx.fillStyle = 'rgba(255, 100, 100, 0.15)';
+        ctx.strokeStyle = 'rgba(255, 100, 100, 0.4)';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.roundRect(x, y, badgeWidth, badgeHeight, 4);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = '#ff9999';
+        ctx.fillText(text, x + padding, y + 16);
+    };
+    const renderBlackCanvas = (error) => {
+        ctx.fillStyle = '#000000';
+        ctx.fillRect(0, 0, system.width, system.height);
+        ctx.fillStyle = '#ff6666';
+        ctx.font = '14px monospace';
+        ctx.fillText('[Protocol Error]', 20, 30);
+        ctx.fillText(error.message, 20, 50);
+    };
+    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);
+            drawBadge();
+            onPreview?.(canvas);
+            canvas.toBlob((blob) => {
+                if (blob) {
+                    onComplete?.({ type: 'image', blob });
+                }
+            }, 'image/png');
+        }
+        catch (error) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            console.error('[UIRenderer Protocol Error]', err.message);
+            renderBlackCanvas(err);
+            onError?.(err);
+        }
+    };
+    const renderLoop = () => {
+        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);
+            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;
+                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);
+            renderBlackCanvas(err);
+            onError?.(err);
+        }
+    };
+    const render = () => {
+        if (isDestroyed)
+            return;
+        if (system.mode === 'static') {
+            renderStatic();
+        }
+        else {
+            renderLoop();
+        }
+    };
+    const start = () => {
+        if (isDestroyed)
+            return;
+        stop();
+        if (system.mode === 'loop') {
+            renderLoop();
+        }
+        else {
+            renderStatic();
+        }
+    };
+    const stop = () => {
+        isRunning = false;
+        if (animationId !== null) {
+            cancelAnimationFrame(animationId);
+            animationId = null;
+        }
+    };
+    const destroy = () => {
+        isDestroyed = true;
+        stop();
+        ctx.clearRect(0, 0, system.width, system.height);
+        if (activeRendererInstance === renderer) {
+            activeRendererInstance = null;
+        }
+    };
+    const renderer = {
+        render,
+        start,
+        stop,
+        destroy,
+        isCanonical: false,
+        isArchival: false,
+    };
+    activeRendererInstance = renderer;
+    return renderer;
+}