@nexart/ui-renderer 0.8.6 → 0.8.8

package/README.md

@@ -1,6 +1,6 @@
 # @nexart/ui-renderer
 
-Version: 0.8.6
+Version: 0.8.7
 
 **Lightweight Preview Runtime for NexArt Protocol**
 
@@ -19,31 +19,35 @@ Version: 0.8.6
 
 ---
 
-## v0.8.6 — Continuous FPS-Capped Animation
+## v0.8.7 — Live Runtime Binding Fix
 
-Replaced time/frame budget with simple FPS throttle for continuous animation.
+Fixed critical bug where time-varying properties were frozen in loop mode.
 
-- **No execution budget**: Removed 30-frame/500ms limits
-- **FPS cap**: Renders at 8 FPS (125ms per frame) for smooth, efficient animation
-- **Continuous animation**: Loops indefinitely until `stop()` is called
-- **No flashing**: Canvas only updates when draw() runs
+- **Live binding**: `frameCount`, `t`, `time`, `tGlobal`, `totalFrames` now update every frame
+- **Proxy + with pattern**: Uses a Proxy scope with `with()` for live property access
+- **Animations work**: Sketches see correct values on every frame
 
-**Animation Pattern:**
+**Animation Semantics:**
+In loop mode, all time variables update every frame:
+- `frameCount`: Increments each frame
+- `t`: Normalized time `(frameCount % totalFrames) / totalFrames` (range [0,1))
+- `time`: Alias for `t`
+- `tGlobal`: Alias for `t`
+- `totalFrames`: Total frames in the loop (default 120)
+
+**Test Sketch:**
 ```javascript
-function loop() {
-  requestAnimationFrame(loop);
-  
-  if (!shouldRenderFrame(throttle)) return;  // FPS cap
-  
-  runtime.draw();
-  recordFrame(throttle);
+function draw() {
+  background(0);
+  fill(255);
+  circle(
+    width / 2 + sin(frameCount * 0.1) * 300,
+    height / 2,
+    120
+  );
 }
 ```
-
-**Behavior:**
-- Renders continuously at 8 FPS
-- Modulo-based looping: `t = (frameCount % totalFrames) / totalFrames`
-- Stops only when `stop()` is called
+Expected: Circle moves horizontally, motion is continuous.
 
 ---
 
@@ -269,7 +273,7 @@ import { getCapabilities } from '@nexart/ui-renderer';
 
 const caps = getCapabilities();
 // {
-//   version: '0.8.6',
+//   version: '0.8.7',
 //   isCanonical: false,
 //   isArchival: false,
 //   previewBudget: { MAX_FRAMES: 30, MAX_TOTAL_TIME_MS: 500, FRAME_STRIDE: 3 },

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

@@ -1,5 +1,5 @@
 /**
- * @nexart/ui-renderer v0.8.6 - Code Mode Renderer
+ * @nexart/ui-renderer v0.8.8 - Code Mode Renderer
  *
  * ╔══════════════════════════════════════════════════════════════════════════╗
  * ║  PREVIEW RENDERER — LIGHTWEIGHT, NON-AUTHORITATIVE                       ║
@@ -7,7 +7,7 @@
  * ║  This renderer is a preview-only runtime.                                ║
  * ║  It does not guarantee determinism or protocol compliance.               ║
  * ║                                                                          ║
- * ║  Performance: FPS-capped at 8 FPS, canvas max 900px                      ║
+ * ║  Performance: Native requestAnimationFrame (~60 FPS), canvas max 900px   ║
  * ║  Animation: Runs continuously until stop() is called                     ║
  * ║                                                                          ║
  * ║  For minting, export, or validation: use @nexart/codemode-sdk            ║

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

@@ -1 +1 @@
-{"version":3,"file":"code-renderer.d.ts","sourceRoot":"","sources":["../../src/preview/code-renderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAwBjE,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;AAwBD,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,gBAAgB,EACxB,MAAM,EAAE,iBAAiB,EACzB,OAAO,GAAE,cAAmB,GAC3B,YAAY,CAmQd"}
+{"version":3,"file":"code-renderer.d.ts","sourceRoot":"","sources":["../../src/preview/code-renderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAiBjE,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;AAwBD,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,gBAAgB,EACxB,MAAM,EAAE,iBAAiB,EACzB,OAAO,GAAE,cAAmB,GAC3B,YAAY,CA4Sd"}

package/dist/preview/code-renderer.js

@@ -1,5 +1,5 @@
 /**
- * @nexart/ui-renderer v0.8.6 - Code Mode Renderer
+ * @nexart/ui-renderer v0.8.8 - Code Mode Renderer
  *
  * ╔══════════════════════════════════════════════════════════════════════════╗
  * ║  PREVIEW RENDERER — LIGHTWEIGHT, NON-AUTHORITATIVE                       ║
@@ -7,14 +7,13 @@
  * ║  This renderer is a preview-only runtime.                                ║
  * ║  It does not guarantee determinism or protocol compliance.               ║
  * ║                                                                          ║
- * ║  Performance: FPS-capped at 8 FPS, canvas max 900px                      ║
+ * ║  Performance: Native requestAnimationFrame (~60 FPS), canvas max 900px   ║
  * ║  Animation: Runs continuously until stop() is called                     ║
  * ║                                                                          ║
  * ║  For minting, export, or validation: use @nexart/codemode-sdk            ║
  * ╚══════════════════════════════════════════════════════════════════════════╝
  */
-import { PREVIEW_FPS, CANVAS_LIMITS, } from './preview-types';
-import { createFpsThrottle, shouldRenderFrame, recordFrame, resetThrottle, } from './frame-budget';
+import { CANVAS_LIMITS, } from './preview-types';
 import { calculateScaledDimensions, applyScaledDimensions, reapplyContextScale, clearCanvasIgnoringTransform, } from './canvas-scaler';
 import { createPreviewRuntime } from './preview-runtime';
 const PROTOCOL_VERSION = '1.2.0';
@@ -42,8 +41,8 @@ function normalizeVars(vars) {
     return result;
 }
 export function renderCodeModeSystem(system, canvas, options = {}) {
-    console.log('[UIRenderer] Preview mode → FPS-capped continuous animation');
-    console.log(`[UIRenderer] Target: ${PREVIEW_FPS.TARGET_FPS} FPS, canvas max ${CANVAS_LIMITS.MAX_DIMENSION}px`);
+    console.log('[UIRenderer] Preview mode → native requestAnimationFrame (~60 FPS)');
+    console.log(`[UIRenderer] Canvas max ${CANVAS_LIMITS.MAX_DIMENSION}px`);
     if (activeRendererInstance) {
         activeRendererInstance.destroy();
         activeRendererInstance = null;
@@ -61,7 +60,6 @@ export function renderCodeModeSystem(system, canvas, options = {}) {
     let animationId = null;
     let isRunning = false;
     let isDestroyed = false;
-    const throttle = createFpsThrottle();
     const normalizedVars = normalizeVars(system.vars);
     let runtime = null;
     let setupFn = null;
@@ -85,19 +83,68 @@ export function renderCodeModeSystem(system, canvas, options = {}) {
         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);
-      `;
+            // ╔═══════════════════════════════════════════════════════════════════════╗
+            // ║  LIVE RUNTIME BINDING — v0.8.7 FIX                                    ║
+            // ║                                                                       ║
+            // ║  Time-varying properties (frameCount, t, time, tGlobal, totalFrames)  ║
+            // ║  must be accessed via getters that read from the live runtime object. ║
+            // ║                                                                       ║
+            // ║  We use a Proxy + with() pattern to enable bare-name access to live   ║
+            // ║  runtime properties. The proxy's get trap reads from runtime for      ║
+            // ║  time-varying props, and from a static cache for everything else.     ║
+            // ╚═══════════════════════════════════════════════════════════════════════╝
+            // Time-varying properties that need live access
+            const liveProps = new Set(['frameCount', 't', 'time', 'tGlobal', 'totalFrames']);
+            // Cache static properties (functions, constants)
+            const staticCache = {};
+            for (const key of Object.keys(runtime)) {
+                if (!liveProps.has(key)) {
+                    staticCache[key] = runtime[key];
+                }
+            }
             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);
+            // Build the set of all known keys (for has trap)
+            const knownKeys = new Set([
+                ...liveProps,
+                ...Object.keys(staticCache),
+                '__registerSetup',
+                '__registerDraw'
+            ]);
+            // Create a proxy that provides live access to time-varying properties
+            // IMPORTANT: has() must return true ONLY for known keys
+            // Otherwise globals (Math, window, etc.) are masked and become undefined
+            const runtimeRef = runtime;
+            const scope = new Proxy({}, {
+                has: (_, prop) => knownKeys.has(prop),
+                get: (_, prop) => {
+                    // Time-varying properties - read live from runtime
+                    if (liveProps.has(prop)) {
+                        return runtimeRef[prop];
+                    }
+                    // Special functions
+                    if (prop === '__registerSetup')
+                        return registerSetup;
+                    if (prop === '__registerDraw')
+                        return registerDraw;
+                    // Static properties from cache
+                    if (prop in staticCache)
+                        return staticCache[prop];
+                    // Fall through to undefined (should not hit this if has() is correct)
+                    return undefined;
+                }
+            });
+            // Use with() to make the proxy scope available to bare variable names
+            // Note: with() is safe here since we control the scope completely
+            const wrappedSource = `
+        with (__scope) {
+          ${system.source}
+          if (typeof setup === 'function') __registerSetup(setup);
+          if (typeof draw === 'function') __registerDraw(draw);
+        }
+      `;
+            const fn = new Function('__scope', wrappedSource);
+            fn(scope);
         }
         catch (error) {
             console.warn('[UIRenderer] Compile error:', error);
@@ -168,15 +215,14 @@ export function renderCodeModeSystem(system, canvas, options = {}) {
             if (setupFn) {
                 setupFn();
             }
-            resetThrottle(throttle);
             isRunning = true;
             // ╔═══════════════════════════════════════════════════════════════════════╗
-            // ║  ANIMATION LOOP — CONTINUOUS FPS-CAPPED RENDERING                     ║
+            // ║  ANIMATION LOOP — NATIVE requestAnimationFrame (~60 FPS)              ║
             // ║                                                                       ║
-            // ║  requestAnimationFrame runs continuously until stop() is called.      ║
-            // ║  FPS throttle (8 FPS) prevents excessive CPU usage.                   ║
+            // ║  v0.8.8: Removed FPS throttle for smooth rendering matching NexArt.   ║
+            // ║  Browser handles frame pacing naturally via requestAnimationFrame.    ║
             // ║  Looping uses modulo math: t = (frame % total) / total                ║
-            // ║  Canvas cleared before each draw; skipped frames preserve pixels.     ║
+            // ║  Canvas cleared before each draw() call.                              ║
             // ╚═══════════════════════════════════════════════════════════════════════╝
             const loop = () => {
                 // Schedule next frame first — loop runs until stop()
@@ -184,10 +230,6 @@ export function renderCodeModeSystem(system, canvas, options = {}) {
                 // Exit if stopped or destroyed
                 if (!isRunning || isDestroyed)
                     return;
-                // FPS throttle — skip if not enough time has passed
-                if (!shouldRenderFrame(throttle)) {
-                    return; // Preserve current canvas
-                }
                 frameCount++;
                 // Update runtime timing using modulo for natural looping
                 if (runtime) {
@@ -202,7 +244,6 @@ export function renderCodeModeSystem(system, canvas, options = {}) {
                     if (drawFn)
                         drawFn();
                     drawBadge();
-                    recordFrame(throttle);
                 }
                 catch (error) {
                     console.warn('[UIRenderer] Draw error:', error);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexart/ui-renderer",
-  "version": "0.8.6",
-  "description": "Lightweight Preview Runtime for NexArt Protocol. Non-canonical, FPS-capped continuous animation (8 FPS, max 900px canvas).",
+  "version": "0.8.8",
+  "description": "Lightweight Preview Runtime for NexArt Protocol. Non-canonical, native requestAnimationFrame (~60 FPS, max 900px canvas).",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",