@nexart/ui-renderer 0.8.6 → 0.8.7

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.7 - Code Mode Renderer
  *
  * ╔══════════════════════════════════════════════════════════════════════════╗
  * ║  PREVIEW RENDERER — LIGHTWEIGHT, NON-AUTHORITATIVE                       ║

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;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,CAoTd"}

package/dist/preview/code-renderer.js

@@ -1,5 +1,5 @@
 /**
- * @nexart/ui-renderer v0.8.6 - Code Mode Renderer
+ * @nexart/ui-renderer v0.8.7 - Code Mode Renderer
  *
  * ╔══════════════════════════════════════════════════════════════════════════╗
  * ║  PREVIEW RENDERER — LIGHTWEIGHT, NON-AUTHORITATIVE                       ║
@@ -85,19 +85,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexart/ui-renderer",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "Lightweight Preview Runtime for NexArt Protocol. Non-canonical, FPS-capped continuous animation (8 FPS, max 900px canvas).",
   "license": "MIT",
   "type": "module",