@nexart/ui-renderer 0.8.5 → 0.8.7

package/README.md

@@ -1,6 +1,6 @@
 # @nexart/ui-renderer
 
-Version: 0.8.5
+Version: 0.8.7
 
 **Lightweight Preview Runtime for NexArt Protocol**
 
@@ -19,31 +19,35 @@ Version: 0.8.5
 
 ---
 
-## v0.8.5 — Correct Animation Loop Semantics
+## v0.8.7 — Live Runtime Binding Fix
 
-Fixed animation loop to use proper soft-gating without resets.
+Fixed critical bug where time-varying properties were frozen in loop mode.
 
-- **No resets inside loop**: Budget and frameCount are never reset mid-animation
-- **Soft budget gating**: Budget exhaustion skips draw(), preserving last frame
-- **Modulo-based looping**: `t = (frameCount % totalFrames) / totalFrames` for natural animation cycles
-- **Canvas preservation**: Skipped frames keep current pixels, no black flashes
+- **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
 
-**Correct 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 (!budget.canRenderFrame()) return;  // Preserve pixels
-  
-  runtime.draw();  // Only changes canvas here
-  budget.recordFrame();
+function draw() {
+  background(0);
+  fill(255);
+  circle(
+    width / 2 + sin(frameCount * 0.1) * 300,
+    height / 2,
+    120
+  );
 }
 ```
-
-**Behavior:**
-- Renders up to 30 frames (budget limit)
-- After budget exhausted: RAF continues, draw() skipped, last frame stays visible
-- Restart via `stop()` → `start()` to reset and continue
+Expected: Circle moves horizontally, motion is continuous.
 
 ---
 
@@ -269,7 +273,7 @@ import { getCapabilities } from '@nexart/ui-renderer';
 
 const caps = getCapabilities();
 // {
-//   version: '0.8.5',
+//   version: '0.8.7',
 //   isCanonical: false,
 //   isArchival: false,
 //   previewBudget: { MAX_FRAMES: 30, MAX_TOTAL_TIME_MS: 500, FRAME_STRIDE: 3 },

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * @nexart/ui-renderer
- * Version: 0.8.5
+ * Version: 0.8.6
  *
  * Lightweight Preview Runtime for NexArt Protocol
  *
@@ -40,13 +40,14 @@ export { compilePrimitive } from './presets/primitives';
 export { wrapSketch, validateSketchSafety } from './presets/sketch-wrapper';
 export { getCapabilities, getPrimitiveTypes, getPrimitivesByCategory, getPrimitiveInfo, isPrimitiveValid, getMotionSources, getBackgroundTextures, } from './capabilities';
 export { createPreviewEngine, renderStaticPreview, stopActivePreview, } from './preview/preview-engine';
-export { PREVIEW_BUDGET, CANVAS_LIMITS, type RuntimeProfile, type PreviewMode, type PreviewEngineConfig, type PreviewRenderResult, type PreviewRenderer, type FrameBudgetState, } from './preview/preview-types';
-export { createFrameBudget, canRenderFrame, recordFrame, resetBudget, shouldSkipFrame, } from './preview/frame-budget';
+export { PREVIEW_FPS, CANVAS_LIMITS, type RuntimeProfile, type PreviewMode, type PreviewEngineConfig, type PreviewRenderResult, type PreviewRenderer, type FpsThrottleState, } from './preview/preview-types';
+export { type FrameBudgetState } from './preview/frame-budget';
+export { createFpsThrottle, shouldRenderFrame, recordFrame, resetThrottle, createFrameBudget, canRenderFrame, resetBudget, shouldSkipFrame, getElapsedMs, } from './preview/frame-budget';
 export { calculateScaledDimensions, applyScaledDimensions, type ScaledDimensions, } from './preview/canvas-scaler';
 export type { NexArtSystemInput, NexArtSystem, DeclarativeSystemInput, DeclarativeSystem, CodeSystem, NexArtCodeSystem, UnifiedSystemInput, UnifiedSystem, UnifiedElement, BackgroundElement, PrimitiveElement, SketchElement, BackgroundPreset, PrimitiveName, ColorPalette, MotionSpeed, StrokeWeightAuto, LoopConfig, DeclarativeElement, SystemElement, DotsElement, LinesElement, WavesElement, GridElement, FlowFieldElement, OrbitsElement, BackgroundConfig, MotionConfig, PreviewOptions, ValidationResult, } from './types';
 export { AESTHETIC_DEFAULTS, SDK_VERSION as TYPE_SDK_VERSION } from './types';
 export type { Capabilities, PrimitiveCapability, ParameterSpec, } from './capabilities';
-export declare const SDK_VERSION = "0.8.5";
+export declare const SDK_VERSION = "0.8.6";
 export declare const PROTOCOL_VERSION = "0.8";
 export declare const IS_CANONICAL = false;
 export declare const IS_ARCHIVAL = false;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACpH,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,cAAc,EACd,aAAa,EACb,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,gBAAgB,GACtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,WAAW,EACX,eAAe,GAChB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,yBAAyB,EACzB,qBAAqB,EACrB,KAAK,gBAAgB,GACtB,MAAM,yBAAyB,CAAC;AAEjC,YAAY,EACV,iBAAiB,EACjB,YAAY,EACZ,sBAAsB,EACtB,iBAAiB,EACjB,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,gBAAgB,GACjB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,kBAAkB,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE9E,YAAY,EACV,YAAY,EACZ,mBAAmB,EACnB,aAAa,GACd,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,WAAW,UAAU,CAAC;AACnC,eAAO,MAAM,gBAAgB,QAAQ,CAAC;AACtC,eAAO,MAAM,YAAY,QAAQ,CAAC;AAClC,eAAO,MAAM,WAAW,QAAQ,CAAC;AACjC,eAAO,MAAM,QAAQ,wBAAwB,CAAC;AAC9C,eAAO,MAAM,wBAAwB,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACpH,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,WAAW,EACX,aAAa,EACb,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,gBAAgB,GACtB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,aAAa,EAEb,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,eAAe,EACf,YAAY,GACb,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,yBAAyB,EACzB,qBAAqB,EACrB,KAAK,gBAAgB,GACtB,MAAM,yBAAyB,CAAC;AAEjC,YAAY,EACV,iBAAiB,EACjB,YAAY,EACZ,sBAAsB,EACtB,iBAAiB,EACjB,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,gBAAgB,GACjB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,kBAAkB,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE9E,YAAY,EACV,YAAY,EACZ,mBAAmB,EACnB,aAAa,GACd,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,WAAW,UAAU,CAAC;AACnC,eAAO,MAAM,gBAAgB,QAAQ,CAAC;AACtC,eAAO,MAAM,YAAY,QAAQ,CAAC;AAClC,eAAO,MAAM,WAAW,QAAQ,CAAC;AACjC,eAAO,MAAM,QAAQ,wBAAwB,CAAC;AAC9C,eAAO,MAAM,wBAAwB,QAAQ,CAAC"}

package/dist/index.js

@@ -1,6 +1,6 @@
 /**
  * @nexart/ui-renderer
- * Version: 0.8.5
+ * Version: 0.8.6
  *
  * Lightweight Preview Runtime for NexArt Protocol
  *
@@ -40,11 +40,13 @@ export { compilePrimitive } from './presets/primitives';
 export { wrapSketch, validateSketchSafety } from './presets/sketch-wrapper';
 export { getCapabilities, getPrimitiveTypes, getPrimitivesByCategory, getPrimitiveInfo, isPrimitiveValid, getMotionSources, getBackgroundTextures, } from './capabilities';
 export { createPreviewEngine, renderStaticPreview, stopActivePreview, } from './preview/preview-engine';
-export { PREVIEW_BUDGET, CANVAS_LIMITS, } from './preview/preview-types';
-export { createFrameBudget, canRenderFrame, recordFrame, resetBudget, shouldSkipFrame, } from './preview/frame-budget';
+export { PREVIEW_FPS, CANVAS_LIMITS, } from './preview/preview-types';
+export { createFpsThrottle, shouldRenderFrame, recordFrame, resetThrottle, 
+// Deprecated exports for backward compatibility (will be removed in v0.9.0)
+createFrameBudget, canRenderFrame, resetBudget, shouldSkipFrame, getElapsedMs, } from './preview/frame-budget';
 export { calculateScaledDimensions, applyScaledDimensions, } from './preview/canvas-scaler';
 export { AESTHETIC_DEFAULTS, SDK_VERSION as TYPE_SDK_VERSION } from './types';
-export const SDK_VERSION = '0.8.5';
+export const SDK_VERSION = '0.8.6';
 export const PROTOCOL_VERSION = '0.8';
 export const IS_CANONICAL = false;
 export const IS_ARCHIVAL = false;

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

@@ -1,5 +1,5 @@
 /**
- * @nexart/ui-renderer v0.8.0 - Code Mode Renderer
+ * @nexart/ui-renderer v0.8.7 - Code Mode Renderer
  *
  * ╔══════════════════════════════════════════════════════════════════════════╗
  * ║  PREVIEW RENDERER — LIGHTWEIGHT, NON-AUTHORITATIVE                       ║
@@ -7,11 +7,8 @@
  * ║  This renderer is a preview-only runtime.                                ║
  * ║  It does not guarantee determinism or protocol compliance.               ║
  * ║                                                                          ║
- * ║  Performance Limits (MANDATORY):                                         ║
- * ║  - Max frames: 30                                                        ║
- * ║  - Max total time: 500ms                                                 ║
- * ║  - Max canvas dimension: 900px                                           ║
- * ║  - Frame stride: render every 3rd frame                                  ║
+ * ║  Performance: FPS-capped at 8 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;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AA0BjE,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,CAyQd"}
+{"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.0 - Code Mode Renderer
+ * @nexart/ui-renderer v0.8.7 - Code Mode Renderer
  *
  * ╔══════════════════════════════════════════════════════════════════════════╗
  * ║  PREVIEW RENDERER — LIGHTWEIGHT, NON-AUTHORITATIVE                       ║
@@ -7,17 +7,14 @@
  * ║  This renderer is a preview-only runtime.                                ║
  * ║  It does not guarantee determinism or protocol compliance.               ║
  * ║                                                                          ║
- * ║  Performance Limits (MANDATORY):                                         ║
- * ║  - Max frames: 30                                                        ║
- * ║  - Max total time: 500ms                                                 ║
- * ║  - Max canvas dimension: 900px                                           ║
- * ║  - Frame stride: render every 3rd frame                                  ║
+ * ║  Performance: FPS-capped at 8 FPS, canvas max 900px                      ║
+ * ║  Animation: Runs continuously until stop() is called                     ║
  * ║                                                                          ║
  * ║  For minting, export, or validation: use @nexart/codemode-sdk            ║
  * ╚══════════════════════════════════════════════════════════════════════════╝
  */
-import { PREVIEW_BUDGET, } from './preview-types';
-import { createFrameBudget, canRenderFrame, recordFrame, resetBudget, shouldSkipFrame, } from './frame-budget';
+import { PREVIEW_FPS, CANVAS_LIMITS, } from './preview-types';
+import { createFpsThrottle, shouldRenderFrame, recordFrame, resetThrottle, } from './frame-budget';
 import { calculateScaledDimensions, applyScaledDimensions, reapplyContextScale, clearCanvasIgnoringTransform, } from './canvas-scaler';
 import { createPreviewRuntime } from './preview-runtime';
 const PROTOCOL_VERSION = '1.2.0';
@@ -45,8 +42,8 @@ function normalizeVars(vars) {
     return result;
 }
 export function renderCodeModeSystem(system, canvas, options = {}) {
-    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`);
+    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`);
     if (activeRendererInstance) {
         activeRendererInstance.destroy();
         activeRendererInstance = null;
@@ -64,7 +61,7 @@ export function renderCodeModeSystem(system, canvas, options = {}) {
     let animationId = null;
     let isRunning = false;
     let isDestroyed = false;
-    const budget = createFrameBudget();
+    const throttle = createFpsThrottle();
     const normalizedVars = normalizeVars(system.vars);
     let runtime = null;
     let setupFn = null;
@@ -88,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);
@@ -171,32 +217,27 @@ export function renderCodeModeSystem(system, canvas, options = {}) {
             if (setupFn) {
                 setupFn();
             }
-            resetBudget(budget);
+            resetThrottle(throttle);
             isRunning = true;
             // ╔═══════════════════════════════════════════════════════════════════════╗
-            // ║  ANIMATION LOOP INVARIANT — DO NOT CHANGE                             ║
+            // ║  ANIMATION LOOP — CONTINUOUS FPS-CAPPED RENDERING                     ║
             // ║                                                                       ║
-            // ║  requestAnimationFrame(loop) MUST be called on EVERY tick.            ║
-            // ║  Budget gates ONLY whether draw() executes, NOT loop continuation.    ║
-            // ║  Never reset frameCount or budget inside the loop.                    ║
-            // ║  Canvas only changes when draw() runs — skipped frames keep pixels.   ║
-            // ║  Looping uses modulo math (t = frame % total), not counter resets.    ║
+            // ║  requestAnimationFrame runs continuously until stop() is called.      ║
+            // ║  FPS throttle (8 FPS) prevents excessive CPU usage.                   ║
+            // ║  Looping uses modulo math: t = (frame % total) / total                ║
+            // ║  Canvas cleared before each draw; skipped frames preserve pixels.     ║
             // ╚═══════════════════════════════════════════════════════════════════════╝
             const loop = () => {
-                // ALWAYS schedule next frame first — loop never terminates on its own
+                // Schedule next frame first — loop runs until stop()
                 animationId = requestAnimationFrame(loop);
-                // Early exit checks (after RAF is scheduled)
+                // Exit if stopped or destroyed
                 if (!isRunning || isDestroyed)
                     return;
-                // Budget check — if exhausted, skip draw but keep last frame visible
-                if (!canRenderFrame(budget)) {
-                    return; // Preserve current canvas, no clear, no reset
+                // FPS throttle — skip if not enough time has passed
+                if (!shouldRenderFrame(throttle)) {
+                    return; // Preserve current canvas
                 }
                 frameCount++;
-                // Frame stride check — skip some frames for performance
-                if (shouldSkipFrame(frameCount)) {
-                    return; // Skip but don't clear — preserve last drawn frame
-                }
                 // Update runtime timing using modulo for natural looping
                 if (runtime) {
                     runtime.frameCount = frameCount;
@@ -205,12 +246,12 @@ export function renderCodeModeSystem(system, canvas, options = {}) {
                     runtime.tGlobal = runtime.t;
                 }
                 try {
-                    // Clear canvas and draw (only when actually rendering)
+                    // Clear and draw
                     clearCanvasIgnoringTransform(ctx, canvas);
                     if (drawFn)
                         drawFn();
                     drawBadge();
-                    recordFrame(budget);
+                    recordFrame(throttle);
                 }
                 catch (error) {
                     console.warn('[UIRenderer] Draw error:', error);

package/dist/preview/frame-budget.d.ts

@@ -1,43 +1,57 @@
 /**
- * @nexart/ui-renderer - Frame Budget Manager
+ * @nexart/ui-renderer - FPS Throttle
  *
- * Enforces hard execution limits to prevent browser freezes.
+ * Simple FPS cap for continuous preview animation.
+ * No frame limits, no time limits — just throttled rendering.
  *
  * ╔══════════════════════════════════════════════════════════════════════════╗
- * ║  EXECUTION BUDGET — MANDATORY LIMITS                                     ║
+ * ║  FPS THROTTLE — CONTINUOUS ANIMATION                                     ║
  * ║                                                                          ║
- * ║  Max frames: 30                                                          ║
- * ║  Max total time: 500ms                                                   ║
- * ║  Target frame time: ~16ms                                                ║
- * ║                                                                          ║
- * ║  If limits exceeded: stop immediately, do NOT throw.                     ║
+ * ║  Target FPS: 8 (125ms per frame)                                         ║
+ * ║  No frame limit — runs until stop() is called                            ║
+ * ║  No time limit — runs indefinitely                                       ║
  * ╚══════════════════════════════════════════════════════════════════════════╝
  */
-import { type FrameBudgetState } from './preview-types';
+import { type FpsThrottleState } from './preview-types';
 /**
- * Create a new frame budget tracker
+ * Create a new FPS throttle state
  */
-export declare function createFrameBudget(): FrameBudgetState;
+export declare function createFpsThrottle(): FpsThrottleState;
 /**
- * Check if budget allows another frame.
- * Returns true if we can render, false if budget is exhausted.
+ * Check if enough time has passed to render the next frame.
+ * Returns true if we should render, false if we should skip this RAF tick.
  */
-export declare function canRenderFrame(budget: FrameBudgetState): boolean;
+export declare function shouldRenderFrame(throttle: FpsThrottleState): boolean;
 /**
- * Record that a frame was rendered
+ * Record that a frame was rendered (updates last frame time)
  */
-export declare function recordFrame(budget: FrameBudgetState): void;
+export declare function recordFrame(throttle: FpsThrottleState): void;
 /**
- * Get elapsed time in milliseconds
+ * Reset the throttle for a new render session
  */
-export declare function getElapsedMs(budget: FrameBudgetState): number;
+export declare function resetThrottle(throttle: FpsThrottleState): void;
 /**
- * Reset the frame budget for a new render cycle
+ * @deprecated Legacy type alias for backward compatibility.
+ * Use FpsThrottleState instead.
  */
-export declare function resetBudget(budget: FrameBudgetState): void;
+export type FrameBudgetState = FpsThrottleState;
+/** @deprecated Use createFpsThrottle instead */
+export declare function createFrameBudget(): FpsThrottleState;
 /**
- * Check if we should skip this frame for performance.
- * Uses frame stride to reduce rendering load while keeping animation smooth.
+ * @deprecated Use shouldRenderFrame instead.
+ *
+ * COMPATIBILITY NOTE: This now delegates to shouldRenderFrame.
+ * For legacy code that interprets `false` as "budget exhausted forever",
+ * this will work correctly because:
+ * - Returns true when enough time has passed (ready to render)
+ * - Returns false when throttled (wait for next tick)
+ * - Never permanently exhausts like the old budget system
  */
-export declare function shouldSkipFrame(frameCount: number): boolean;
+export declare function canRenderFrame(throttle: FpsThrottleState): boolean;
+/** @deprecated Use resetThrottle instead */
+export declare function resetBudget(throttle: FpsThrottleState): void;
+/** @deprecated No longer used — removed frame stride. Always returns false. */
+export declare function shouldSkipFrame(_frameCount: number): boolean;
+/** @deprecated No longer tracked. Returns 0. */
+export declare function getElapsedMs(_throttle: FpsThrottleState): number;
 //# sourceMappingURL=frame-budget.d.ts.map

package/dist/preview/frame-budget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frame-budget.d.ts","sourceRoot":"","sources":["../../src/preview/frame-budget.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAkB,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExE;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,gBAAgB,CAOpD;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,gBAAgB,GAAG,OAAO,CAqBhE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAE1D;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,MAAM,CAE7D;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAK1D;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAE3D"}
+{"version":3,"file":"frame-budget.d.ts","sourceRoot":"","sources":["../../src/preview/frame-budget.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAErE;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,gBAAgB,CAIpD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,gBAAgB,GAAG,OAAO,CAIrE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAE5D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAE9D;AAOD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAEhD,gDAAgD;AAChD,wBAAgB,iBAAiB,IAAI,gBAAgB,CAEpD;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,gBAAgB,GAAG,OAAO,CAElE;AAED,4CAA4C;AAC5C,wBAAgB,WAAW,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAE5D;AAED,+EAA+E;AAC/E,wBAAgB,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAE5D;AAED,gDAAgD;AAChD,wBAAgB,YAAY,CAAC,SAAS,EAAE,gBAAgB,GAAG,MAAM,CAEhE"}

package/dist/preview/frame-budget.js

@@ -1,78 +1,73 @@
 /**
- * @nexart/ui-renderer - Frame Budget Manager
+ * @nexart/ui-renderer - FPS Throttle
  *
- * Enforces hard execution limits to prevent browser freezes.
+ * Simple FPS cap for continuous preview animation.
+ * No frame limits, no time limits — just throttled rendering.
  *
  * ╔══════════════════════════════════════════════════════════════════════════╗
- * ║  EXECUTION BUDGET — MANDATORY LIMITS                                     ║
+ * ║  FPS THROTTLE — CONTINUOUS ANIMATION                                     ║
  * ║                                                                          ║
- * ║  Max frames: 30                                                          ║
- * ║  Max total time: 500ms                                                   ║
- * ║  Target frame time: ~16ms                                                ║
- * ║                                                                          ║
- * ║  If limits exceeded: stop immediately, do NOT throw.                     ║
+ * ║  Target FPS: 8 (125ms per frame)                                         ║
+ * ║  No frame limit — runs until stop() is called                            ║
+ * ║  No time limit — runs indefinitely                                       ║
  * ╚══════════════════════════════════════════════════════════════════════════╝
  */
-import { PREVIEW_BUDGET } from './preview-types';
+import { PREVIEW_FPS } from './preview-types';
 /**
- * Create a new frame budget tracker
+ * Create a new FPS throttle state
  */
-export function createFrameBudget() {
+export function createFpsThrottle() {
     return {
-        framesRendered: 0,
-        startTimeMs: performance.now(),
-        exhausted: false,
-        exhaustionReason: undefined,
+        lastFrameTimeMs: 0,
     };
 }
 /**
- * Check if budget allows another frame.
- * Returns true if we can render, false if budget is exhausted.
+ * Check if enough time has passed to render the next frame.
+ * Returns true if we should render, false if we should skip this RAF tick.
  */
-export function canRenderFrame(budget) {
-    if (budget.exhausted) {
-        return false;
-    }
-    // Check frame limit
-    if (budget.framesRendered >= PREVIEW_BUDGET.MAX_FRAMES) {
-        budget.exhausted = true;
-        budget.exhaustionReason = 'frame_limit';
-        return false;
-    }
-    // Check time limit
-    const elapsedMs = performance.now() - budget.startTimeMs;
-    if (elapsedMs >= PREVIEW_BUDGET.MAX_TOTAL_TIME_MS) {
-        budget.exhausted = true;
-        budget.exhaustionReason = 'time_limit';
-        return false;
-    }
-    return true;
+export function shouldRenderFrame(throttle) {
+    const now = performance.now();
+    const elapsed = now - throttle.lastFrameTimeMs;
+    return elapsed >= PREVIEW_FPS.FRAME_INTERVAL_MS;
 }
 /**
- * Record that a frame was rendered
+ * Record that a frame was rendered (updates last frame time)
  */
-export function recordFrame(budget) {
-    budget.framesRendered++;
+export function recordFrame(throttle) {
+    throttle.lastFrameTimeMs = performance.now();
 }
 /**
- * Get elapsed time in milliseconds
+ * Reset the throttle for a new render session
  */
-export function getElapsedMs(budget) {
-    return performance.now() - budget.startTimeMs;
+export function resetThrottle(throttle) {
+    throttle.lastFrameTimeMs = 0;
 }
-/**
- * Reset the frame budget for a new render cycle
- */
-export function resetBudget(budget) {
-    budget.framesRendered = 0;
-    budget.startTimeMs = performance.now();
-    budget.exhausted = false;
-    budget.exhaustionReason = undefined;
+/** @deprecated Use createFpsThrottle instead */
+export function createFrameBudget() {
+    return createFpsThrottle();
 }
 /**
- * Check if we should skip this frame for performance.
- * Uses frame stride to reduce rendering load while keeping animation smooth.
+ * @deprecated Use shouldRenderFrame instead.
+ *
+ * COMPATIBILITY NOTE: This now delegates to shouldRenderFrame.
+ * For legacy code that interprets `false` as "budget exhausted forever",
+ * this will work correctly because:
+ * - Returns true when enough time has passed (ready to render)
+ * - Returns false when throttled (wait for next tick)
+ * - Never permanently exhausts like the old budget system
  */
-export function shouldSkipFrame(frameCount) {
-    return frameCount % PREVIEW_BUDGET.FRAME_STRIDE !== 0;
+export function canRenderFrame(throttle) {
+    return shouldRenderFrame(throttle);
+}
+/** @deprecated Use resetThrottle instead */
+export function resetBudget(throttle) {
+    resetThrottle(throttle);
+}
+/** @deprecated No longer used — removed frame stride. Always returns false. */
+export function shouldSkipFrame(_frameCount) {
+    return false; // Never skip based on frame count
+}
+/** @deprecated No longer tracked. Returns 0. */
+export function getElapsedMs(_throttle) {
+    return 0;
 }

package/dist/preview/preview-engine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-engine.d.ts","sourceRoot":"","sources":["../../src/preview/preview-engine.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EAErB,MAAM,iBAAiB,CAAC;AA2NzB;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,mBAAmB,GAAG,eAAe,CAEhF;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,mBAAmB,GAAG,mBAAmB,CAKpF;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAKxC"}
+{"version":3,"file":"preview-engine.d.ts","sourceRoot":"","sources":["../../src/preview/preview-engine.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EAErB,MAAM,iBAAiB,CAAC;AAiNzB;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,mBAAmB,GAAG,eAAe,CAEhF;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,mBAAmB,GAAG,mBAAmB,CAKpF;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAKxC"}

package/dist/preview/preview-engine.js

@@ -24,7 +24,7 @@
  * ║  For canonical output: use @nexart/codemode-sdk                          ║
  * ╚══════════════════════════════════════════════════════════════════════════╝
  */
-import { createFrameBudget, canRenderFrame, recordFrame, getElapsedMs, resetBudget, shouldSkipFrame, } from './frame-budget';
+import { createFpsThrottle, shouldRenderFrame, recordFrame, resetThrottle, } from './frame-budget';
 import { calculateScaledDimensions, applyScaledDimensions, reapplyContextScale, } from './canvas-scaler';
 import { createPreviewRuntime } from './preview-runtime';
 let activePreviewRenderer = null;
@@ -34,7 +34,7 @@ class PreviewEngine {
         this.setupFn = null;
         this.drawFn = null;
         this.animationFrameId = null;
-        this.budget = createFrameBudget();
+        this.throttle = createFpsThrottle();
         this.running = false;
         this.internalFrameCount = 0;
         this.isCanonical = false;
@@ -87,16 +87,15 @@ class PreviewEngine {
         return () => fn(...globalValues);
     }
     renderStatic() {
-        resetBudget(this.budget);
+        const startTime = performance.now();
         try {
             if (this.setupFn) {
                 this.setupFn();
             }
-            recordFrame(this.budget);
             return {
                 success: true,
                 framesRendered: 1,
-                executionTimeMs: getElapsedMs(this.budget),
+                executionTimeMs: performance.now() - startTime,
                 terminatedEarly: false,
             };
         }
@@ -105,7 +104,7 @@ class PreviewEngine {
             return {
                 success: false,
                 framesRendered: 0,
-                executionTimeMs: getElapsedMs(this.budget),
+                executionTimeMs: performance.now() - startTime,
                 terminatedEarly: true,
                 terminationReason: 'error',
                 errorMessage: error instanceof Error ? error.message : String(error),
@@ -120,7 +119,7 @@ class PreviewEngine {
         }
         activePreviewRenderer = this;
         this.running = true;
-        resetBudget(this.budget);
+        resetThrottle(this.throttle);
         this.internalFrameCount = 0;
         try {
             if (this.setupFn) {
@@ -133,30 +132,24 @@ class PreviewEngine {
         this.scheduleNextFrame();
     }
     // ╔═══════════════════════════════════════════════════════════════════════╗
-    // ║  ANIMATION LOOP INVARIANT — DO NOT CHANGE                             ║
+    // ║  ANIMATION LOOP — CONTINUOUS FPS-CAPPED RENDERING                     ║
     // ║                                                                       ║
-    // ║  requestAnimationFrame MUST be called on EVERY tick.                  ║
-    // ║  Budget gates ONLY whether draw() executes, NOT loop continuation.    ║
-    // ║  Never reset frameCount or budget inside the loop.                    ║
-    // ║  Canvas only changes when draw() runs — skipped frames keep pixels.   ║
-    // ║  Looping uses modulo math (t = frame % total), not counter resets.    ║
+    // ║  requestAnimationFrame runs continuously until stop() is called.      ║
+    // ║  FPS throttle (8 FPS) prevents excessive CPU usage.                   ║
+    // ║  Looping uses modulo math: t = (frame % total) / total                ║
     // ╚═══════════════════════════════════════════════════════════════════════╝
     scheduleNextFrame() {
-        // ALWAYS schedule next frame first — loop never terminates on its own
+        // Schedule next frame — loop runs until stopLoop()
         this.animationFrameId = requestAnimationFrame(() => {
             this.scheduleNextFrame();
-            // Early exit checks (after RAF is scheduled)
+            // Exit if stopped
             if (!this.running)
                 return;
-            // Budget check — if exhausted, skip draw but keep last frame visible
-            if (!canRenderFrame(this.budget)) {
-                return; // Preserve current canvas, no clear, no reset
+            // FPS throttle — skip if not enough time has passed
+            if (!shouldRenderFrame(this.throttle)) {
+                return; // Preserve current canvas
             }
             this.internalFrameCount++;
-            // Frame stride check — skip some frames for performance
-            if (shouldSkipFrame(this.internalFrameCount)) {
-                return; // Skip but don't clear — preserve last drawn frame
-            }
             // Update runtime timing using modulo for natural looping
             try {
                 if (this.runtime) {
@@ -169,7 +162,7 @@ class PreviewEngine {
                 if (this.drawFn) {
                     this.drawFn();
                 }
-                recordFrame(this.budget);
+                recordFrame(this.throttle);
             }
             catch (error) {
                 console.warn('[PreviewEngine] Draw error:', error);

package/dist/preview/preview-types.d.ts

@@ -16,18 +16,14 @@
  */
 export type RuntimeProfile = 'preview';
 /**
- * Execution budget limits (MANDATORY).
- * These prevent browser freezes and ensure UI responsiveness.
+ * FPS cap for preview rendering.
+ * Replaced time/frame budget with simple FPS throttling for continuous animation.
  */
-export declare const PREVIEW_BUDGET: {
-    /** Maximum frames rendered before auto-termination */
-    readonly MAX_FRAMES: 30;
-    /** Maximum total execution time in milliseconds */
-    readonly MAX_TOTAL_TIME_MS: 500;
-    /** Target frame time (best effort, ~60fps) */
-    readonly TARGET_FRAME_TIME_MS: 16;
-    /** Frame stride for performance (render every Nth frame) */
-    readonly FRAME_STRIDE: 3;
+export declare const PREVIEW_FPS: {
+    /** Target FPS for loop animations (lower = better performance) */
+    readonly TARGET_FPS: 8;
+    /** Minimum milliseconds between frames */
+    readonly FRAME_INTERVAL_MS: 125;
 };
 /**
  * Canvas resolution limits.
@@ -101,16 +97,10 @@ export interface PreviewRenderer {
     readonly isArchival: false;
 }
 /**
- * Frame budget state for tracking execution limits
+ * FPS throttle state for continuous animation
  */
-export interface FrameBudgetState {
-    /** Frames rendered so far */
-    framesRendered: number;
-    /** Start time of execution */
-    startTimeMs: number;
-    /** Whether budget is exhausted */
-    exhausted: boolean;
-    /** Reason for exhaustion */
-    exhaustionReason?: 'frame_limit' | 'time_limit';
+export interface FpsThrottleState {
+    /** Timestamp of last rendered frame */
+    lastFrameTimeMs: number;
 }
 //# sourceMappingURL=preview-types.d.ts.map

package/dist/preview/preview-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-types.d.ts","sourceRoot":"","sources":["../../src/preview/preview-types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC;AAEvC;;;GAGG;AACH,eAAO,MAAM,cAAc;IACzB,sDAAsD;;IAEtD,mDAAmD;;IAEnD,8CAA8C;;IAE9C,4DAA4D;;CAEpD,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,aAAa;IACxB,2CAA2C;;IAE3C,wBAAwB;;CAEhB,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,kCAAkC;IAClC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,6BAA6B;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,EAAE,WAAW,CAAC;IAClB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,iCAAiC;IACjC,eAAe,EAAE,MAAM,CAAC;IACxB,2DAA2D;IAC3D,eAAe,EAAE,OAAO,CAAC;IACzB,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,CAAC;IACzE,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,0CAA0C;IAC1C,YAAY,EAAE,MAAM,mBAAmB,CAAC;IACxC,2BAA2B;IAC3B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,0BAA0B;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,mCAAmC;IACnC,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC;IAC5B,oCAAoC;IACpC,QAAQ,CAAC,UAAU,EAAE,KAAK,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,6BAA6B;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,8BAA8B;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,aAAa,GAAG,YAAY,CAAC;CACjD"}
+{"version":3,"file":"preview-types.d.ts","sourceRoot":"","sources":["../../src/preview/preview-types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC;AAEvC;;;GAGG;AACH,eAAO,MAAM,WAAW;IACtB,kEAAkE;;IAElE,0CAA0C;;CAElC,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,aAAa;IACxB,2CAA2C;;IAE3C,wBAAwB;;CAEhB,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,kCAAkC;IAClC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,6BAA6B;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,EAAE,WAAW,CAAC;IAClB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,iCAAiC;IACjC,eAAe,EAAE,MAAM,CAAC;IACxB,2DAA2D;IAC3D,eAAe,EAAE,OAAO,CAAC;IACzB,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,aAAa,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,CAAC;IACzE,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,0CAA0C;IAC1C,YAAY,EAAE,MAAM,mBAAmB,CAAC;IACxC,2BAA2B;IAC3B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,0BAA0B;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,mCAAmC;IACnC,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC;IAC5B,oCAAoC;IACpC,QAAQ,CAAC,UAAU,EAAE,KAAK,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,uCAAuC;IACvC,eAAe,EAAE,MAAM,CAAC;CACzB"}

package/dist/preview/preview-types.js

@@ -11,18 +11,14 @@
  * ╚══════════════════════════════════════════════════════════════════════════╝
  */
 /**
- * Execution budget limits (MANDATORY).
- * These prevent browser freezes and ensure UI responsiveness.
+ * FPS cap for preview rendering.
+ * Replaced time/frame budget with simple FPS throttling for continuous animation.
  */
-export const PREVIEW_BUDGET = {
-    /** Maximum frames rendered before auto-termination */
-    MAX_FRAMES: 30,
-    /** Maximum total execution time in milliseconds */
-    MAX_TOTAL_TIME_MS: 500,
-    /** Target frame time (best effort, ~60fps) */
-    TARGET_FRAME_TIME_MS: 16,
-    /** Frame stride for performance (render every Nth frame) */
-    FRAME_STRIDE: 3,
+export const PREVIEW_FPS = {
+    /** Target FPS for loop animations (lower = better performance) */
+    TARGET_FPS: 8,
+    /** Minimum milliseconds between frames */
+    FRAME_INTERVAL_MS: 125, // 1000 / 8 = 125ms per frame
 };
 /**
  * Canvas resolution limits.

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

@@ -1 +1 @@
-{"version":3,"file":"unified-renderer.d.ts","sourceRoot":"","sources":["../../src/preview/unified-renderer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAkB,cAAc,EAAoE,MAAM,UAAU,CAAC;AAmBhJ,MAAM,WAAW,eAAe;IAC9B,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;AA6ED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,iBAAiB,EACzB,OAAO,GAAE,cAAmB,GAC3B,eAAe,CAmRjB"}
+{"version":3,"file":"unified-renderer.d.ts","sourceRoot":"","sources":["../../src/preview/unified-renderer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAkB,cAAc,EAAoE,MAAM,UAAU,CAAC;AAmBhJ,MAAM,WAAW,eAAe;IAC9B,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;AA6ED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,aAAa,EACrB,MAAM,EAAE,iBAAiB,EACzB,OAAO,GAAE,cAAmB,GAC3B,eAAe,CA4QjB"}

package/dist/preview/unified-renderer.js

@@ -8,8 +8,8 @@ import { compilePrimitive } from '../presets/primitives';
 import { wrapSketch, validateSketchSafety } from '../presets/sketch-wrapper';
 import { createPreviewRuntime } from './preview-runtime';
 import { calculateScaledDimensions, applyScaledDimensions, reapplyContextScale, clearCanvasIgnoringTransform } from './canvas-scaler';
-import { createFrameBudget, canRenderFrame, recordFrame, resetBudget, shouldSkipFrame } from './frame-budget';
-import { PREVIEW_BUDGET } from './preview-types';
+import { createFpsThrottle, shouldRenderFrame, recordFrame, resetThrottle } from './frame-budget';
+import { PREVIEW_FPS, CANVAS_LIMITS } from './preview-types';
 function validateSketchElement(element) {
     const { safe, warnings } = validateSketchSafety(element.code);
     if (!safe) {
@@ -81,8 +81,8 @@ function compileSketchElement(element) {
     };
 }
 export function renderUnifiedSystem(system, canvas, options = {}) {
-    console.log('[UIRenderer] Unified preview → lightweight runtime with budget limits');
-    console.log(`[UIRenderer] Budget: max ${PREVIEW_BUDGET.MAX_FRAMES} frames, ${PREVIEW_BUDGET.MAX_TOTAL_TIME_MS}ms`);
+    console.log('[UIRenderer] Unified preview → FPS-capped continuous animation');
+    console.log(`[UIRenderer] Target: ${PREVIEW_FPS.TARGET_FPS} FPS, canvas max ${CANVAS_LIMITS.MAX_DIMENSION}px`);
     const { showBadge = true, onPreview, onComplete, onError } = options;
     const scaled = calculateScaledDimensions(system.width, system.height);
     if (scaled.wasScaled) {
@@ -96,7 +96,7 @@ export function renderUnifiedSystem(system, canvas, options = {}) {
     let animationId = null;
     let isRunning = false;
     let isDestroyed = false;
-    const budget = createFrameBudget();
+    const throttle = createFpsThrottle();
     const palette = inferPalette(system.elements);
     const colors = getPaletteColors(palette);
     const totalFrames = system.loop?.duration ?? 120;
@@ -235,32 +235,26 @@ export function renderUnifiedSystem(system, canvas, options = {}) {
             scaled.originalHeight, // ← Protocol dimension
             system.seed);
             runSetup(p);
-            resetBudget(budget);
+            resetThrottle(throttle);
             isRunning = true;
             // ╔═══════════════════════════════════════════════════════════════════════╗
-            // ║  ANIMATION LOOP INVARIANT — DO NOT CHANGE                             ║
+            // ║  ANIMATION LOOP — CONTINUOUS FPS-CAPPED RENDERING                     ║
             // ║                                                                       ║
-            // ║  requestAnimationFrame(loop) MUST be called on EVERY tick.            ║
-            // ║  Budget gates ONLY whether draw() executes, NOT loop continuation.    ║
-            // ║  Never reset frameCount or budget inside the loop.                    ║
-            // ║  Canvas only changes when draw() runs — skipped frames keep pixels.   ║
-            // ║  Looping uses modulo math (t = frame % total), not counter resets.    ║
+            // ║  requestAnimationFrame runs continuously until stop() is called.      ║
+            // ║  FPS throttle (8 FPS) prevents excessive CPU usage.                   ║
+            // ║  Looping uses modulo math: t = (frame % total) / total                ║
             // ╚═══════════════════════════════════════════════════════════════════════╝
             const loop = () => {
-                // ALWAYS schedule next frame first — loop never terminates on its own
+                // Schedule next frame — loop runs until stop()
                 animationId = requestAnimationFrame(loop);
-                // Early exit checks (after RAF is scheduled)
+                // Exit if stopped or destroyed
                 if (!isRunning || isDestroyed)
                     return;
-                // Budget check — if exhausted, skip draw but keep last frame visible
-                if (!canRenderFrame(budget)) {
-                    return; // Preserve current canvas, no clear, no reset
+                // FPS throttle — skip if not enough time has passed
+                if (!shouldRenderFrame(throttle)) {
+                    return; // Preserve current canvas
                 }
                 frameCount++;
-                // Frame stride check — skip some frames for performance
-                if (shouldSkipFrame(frameCount)) {
-                    return; // Skip but don't clear — preserve last drawn frame
-                }
                 // Calculate t using modulo for natural looping
                 const t = (frameCount % totalFrames) / totalFrames;
                 p.randomSeed(system.seed);
@@ -268,7 +262,7 @@ export function renderUnifiedSystem(system, canvas, options = {}) {
                 try {
                     runDraw(p, frameCount, t);
                     drawBadge();
-                    recordFrame(budget);
+                    recordFrame(throttle);
                 }
                 catch (error) {
                     console.warn('[UIRenderer] Draw error:', error);

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 /**
- * @nexart/ui-renderer v0.8.5 - Type Definitions
+ * @nexart/ui-renderer v0.8.6 - Type Definitions
  *
  * Lightweight Preview Runtime for NexArt Protocol.
  * This SDK is non-canonical and for preview only.
@@ -9,7 +9,7 @@
  * - Max total time: 500ms
  * - Max canvas dimension: 900px
  */
-export declare const SDK_VERSION = "0.8.5";
+export declare const SDK_VERSION = "0.8.6";
 export declare const AESTHETIC_DEFAULTS: {
     readonly background: {
         readonly r: 246;

package/dist/types.js

@@ -1,5 +1,5 @@
 /**
- * @nexart/ui-renderer v0.8.5 - Type Definitions
+ * @nexart/ui-renderer v0.8.6 - Type Definitions
  *
  * Lightweight Preview Runtime for NexArt Protocol.
  * This SDK is non-canonical and for preview only.
@@ -9,7 +9,7 @@
  * - Max total time: 500ms
  * - Max canvas dimension: 900px
  */
-export const SDK_VERSION = '0.8.5';
+export const SDK_VERSION = '0.8.6';
 export const AESTHETIC_DEFAULTS = {
     background: { r: 246, g: 245, b: 242 },
     foreground: { r: 45, g: 45, b: 45 },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexart/ui-renderer",
-  "version": "0.8.5",
-  "description": "Lightweight Preview Runtime for NexArt Protocol. Non-canonical, performance-optimized with budget limits (max 30 frames, 500ms, 900px canvas).",
+  "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",
   "main": "./dist/index.js",