@nexart/ui-renderer 0.2.1 → 0.4.0

package/dist/presets/sketch-wrapper.js

@@ -0,0 +1,70 @@
+/**
+ * Sketch Wrapper - Safety normalization for raw Code Mode sketches
+ * Wraps user-provided code with aesthetic defaults and safety measures
+ */
+import { AESTHETIC_DEFAULTS } from '../types';
+export function wrapSketch(config) {
+    const { code, normalize = true } = config;
+    if (!normalize) {
+        return code;
+    }
+    const bgColor = `rgb(${AESTHETIC_DEFAULTS.background.r}, ${AESTHETIC_DEFAULTS.background.g}, ${AESTHETIC_DEFAULTS.background.b})`;
+    const hasSetup = /function\s+setup\s*\(/.test(code);
+    const hasDraw = /function\s+draw\s*\(/.test(code);
+    if (hasSetup && hasDraw) {
+        return injectNormalizationIntoExistingCode(code, bgColor);
+    }
+    if (!hasSetup && !hasDraw) {
+        return wrapBareCode(code, bgColor);
+    }
+    return code;
+}
+function injectNormalizationIntoExistingCode(code, bgColor) {
+    let modified = code;
+    if (!/strokeWeight\s*\(/.test(code)) {
+        modified = modified.replace(/function\s+setup\s*\(\s*\)\s*\{/, `function setup() {\n  strokeWeight(${AESTHETIC_DEFAULTS.strokeWeight.default});`);
+    }
+    if (!/background\s*\(/.test(code)) {
+        modified = modified.replace(/function\s+draw\s*\(\s*\)\s*\{/, `function draw() {\n  background('${bgColor}');`);
+    }
+    return modified;
+}
+function wrapBareCode(code, bgColor) {
+    return `
+function setup() {
+  strokeWeight(${AESTHETIC_DEFAULTS.strokeWeight.default});
+}
+
+function draw() {
+  background('${bgColor}');
+  
+  ${code}
+}
+`;
+}
+export function validateSketchSafety(code) {
+    const warnings = [];
+    const dangerousPatterns = [
+        { pattern: /eval\s*\(/, message: 'eval() is not allowed' },
+        { pattern: /Function\s*\(/, message: 'Function constructor is not allowed' },
+        { pattern: /document\s*\./, message: 'Direct DOM access is not allowed' },
+        { pattern: /window\s*\./, message: 'Window access is not allowed' },
+        { pattern: /import\s*\(/, message: 'Dynamic imports are not allowed' },
+        { pattern: /require\s*\(/, message: 'require() is not allowed' },
+    ];
+    for (const { pattern, message } of dangerousPatterns) {
+        if (pattern.test(code)) {
+            warnings.push(message);
+        }
+    }
+    if (/Math\.random\s*\(/.test(code)) {
+        warnings.push('Math.random() may break determinism - use random() instead');
+    }
+    if (/Date\s*\(/.test(code) || /Date\.now\s*\(/.test(code)) {
+        warnings.push('Date functions may break determinism - use t or frameCount instead');
+    }
+    return {
+        safe: warnings.filter(w => !w.includes('may break')).length === 0,
+        warnings,
+    };
+}

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

@@ -0,0 +1,46 @@
+/**
+ * @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.
+ */
+import type { NexArtCodeSystem, PreviewOptions } from '../types';
+export interface CodeRenderer {
+    render: () => void;
+    start: () => void;
+    stop: () => void;
+    destroy: () => void;
+    isCanonical: false;
+    isArchival: false;
+}
+interface P5Runtime {
+    [key: string]: any;
+    width: number;
+    height: number;
+    frameCount: number;
+    VAR: readonly number[];
+}
+export declare function createP5Runtime(canvas: HTMLCanvasElement, width: number, height: number, seed: number, vars?: number[]): P5Runtime;
+export declare function renderCodeModeSystem(system: NexArtCodeSystem, canvas: HTMLCanvasElement, options?: PreviewOptions): CodeRenderer;
+export {};
+//# sourceMappingURL=code-renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-renderer.d.ts","sourceRoot":"","sources":["../../src/preview/code-renderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAMjE,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,KAAK,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC;CACnB;AA4CD,UAAU,SAAS;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,GAAG,EAAE,SAAS,MAAM,EAAE,CAAC;CACxB;AAgFD,wBAAgB,eAAe,CAC7B,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,EACZ,IAAI,GAAE,MAAM,EAAmC,GAC9C,SAAS,CA0eX;AAsCD,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,gBAAgB,EACxB,MAAM,EAAE,iBAAiB,EACzB,OAAO,GAAE,cAAmB,GAC3B,YAAY,CA4Md"}