@nexart/ui-renderer 0.8.3 → 0.8.6

package/README.md

@@ -1,6 +1,6 @@
 # @nexart/ui-renderer
 
-Version: 0.8.3
+Version: 0.8.6
 
 **Lightweight Preview Runtime for NexArt Protocol**
 
@@ -19,6 +19,34 @@ Version: 0.8.3
 
 ---
 
+## v0.8.6 — Continuous FPS-Capped Animation
+
+Replaced time/frame budget with simple FPS throttle for continuous animation.
+
+- **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
+
+**Animation Pattern:**
+```javascript
+function loop() {
+  requestAnimationFrame(loop);
+  
+  if (!shouldRenderFrame(throttle)) return;  // FPS cap
+  
+  runtime.draw();
+  recordFrame(throttle);
+}
+```
+
+**Behavior:**
+- Renders continuously at 8 FPS
+- Modulo-based looping: `t = (frameCount % totalFrames) / totalFrames`
+- Stops only when `stop()` is called
+
+---
+
 ## v0.8.3 — Animation Loop Fix
 
 Fixed critical bug where preview only rendered a single frame.
@@ -241,7 +269,7 @@ import { getCapabilities } from '@nexart/ui-renderer';
 
 const caps = getCapabilities();
 // {
-//   version: '0.8.3',
+//   version: '0.8.6',
 //   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.3
+ * 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.3";
+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.3
+ * 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.3';
+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.6 - 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,CAkQd"}
+{"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"}

package/dist/preview/code-renderer.js

@@ -1,5 +1,5 @@
 /**
- * @nexart/ui-renderer v0.8.0 - Code Mode Renderer
+ * @nexart/ui-renderer v0.8.6 - 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;
@@ -171,43 +168,44 @@ 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 whether loop runs.    ║
-            // ║  Never return before scheduling RAF. Never conditionally schedule.    ║
+            // ║  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 — skip draw but keep loop alive
-                if (!canRenderFrame(budget)) {
-                    return; // Loop continues, just don't draw
+                // FPS throttle — skip if not enough time has passed
+                if (!shouldRenderFrame(throttle)) {
+                    return; // Preserve current canvas
                 }
                 frameCount++;
-                if (!shouldSkipFrame(frameCount)) {
-                    if (runtime) {
-                        runtime.frameCount = frameCount;
-                        runtime.t = (frameCount % totalFrames) / totalFrames;
-                        runtime.time = runtime.t;
-                        runtime.tGlobal = runtime.t;
-                    }
-                    try {
-                        clearCanvasIgnoringTransform(ctx, canvas);
-                        if (drawFn)
-                            drawFn();
-                        drawBadge();
-                        recordFrame(budget);
-                    }
-                    catch (error) {
-                        console.warn('[UIRenderer] Draw error:', error);
-                    }
+                // Update runtime timing using modulo for natural looping
+                if (runtime) {
+                    runtime.frameCount = frameCount;
+                    runtime.t = (frameCount % totalFrames) / totalFrames;
+                    runtime.time = runtime.t;
+                    runtime.tGlobal = runtime.t;
+                }
+                try {
+                    // Clear and draw
+                    clearCanvasIgnoringTransform(ctx, canvas);
+                    if (drawFn)
+                        drawFn();
+                    drawBadge();
+                    recordFrame(throttle);
+                }
+                catch (error) {
+                    console.warn('[UIRenderer] Draw error:', error);
                 }
             };
             animationId = requestAnimationFrame(loop);

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;AAqNzB;;;;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,41 +132,40 @@ 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 whether loop runs.    ║
-    // ║  Never return before scheduling RAF. Never conditionally schedule.    ║
+    // ║  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 — skip draw but keep loop alive
-            if (!canRenderFrame(this.budget)) {
-                return; // Loop continues, just don't draw
+            // FPS throttle — skip if not enough time has passed
+            if (!shouldRenderFrame(this.throttle)) {
+                return; // Preserve current canvas
             }
             this.internalFrameCount++;
-            if (!shouldSkipFrame(this.internalFrameCount)) {
-                try {
-                    if (this.runtime) {
-                        this.runtime.frameCount = this.internalFrameCount;
-                        const totalFrames = this.config.totalFrames ?? 120;
-                        this.runtime.t = this.internalFrameCount / totalFrames;
-                        this.runtime.time = this.runtime.t;
-                        this.runtime.tGlobal = this.runtime.t;
-                    }
-                    if (this.drawFn) {
-                        this.drawFn();
-                    }
-                    recordFrame(this.budget);
+            // Update runtime timing using modulo for natural looping
+            try {
+                if (this.runtime) {
+                    this.runtime.frameCount = this.internalFrameCount;
+                    const totalFrames = this.config.totalFrames ?? 120;
+                    this.runtime.t = (this.internalFrameCount % totalFrames) / totalFrames;
+                    this.runtime.time = this.runtime.t;
+                    this.runtime.tGlobal = this.runtime.t;
                 }
-                catch (error) {
-                    console.warn('[PreviewEngine] Draw error:', error);
+                if (this.drawFn) {
+                    this.drawFn();
                 }
+                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,CA6QjB"}
+{"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,38 +235,37 @@ 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 whether loop runs.    ║
-            // ║  Never return before scheduling RAF. Never conditionally schedule.    ║
+            // ║  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 — skip draw but keep loop alive
-                if (!canRenderFrame(budget)) {
-                    return; // Loop continues, just don't draw
+                // FPS throttle — skip if not enough time has passed
+                if (!shouldRenderFrame(throttle)) {
+                    return; // Preserve current canvas
                 }
                 frameCount++;
-                if (!shouldSkipFrame(frameCount)) {
-                    const t = (frameCount % totalFrames) / totalFrames;
-                    p.randomSeed(system.seed);
-                    p.noiseSeed(system.seed);
-                    try {
-                        runDraw(p, frameCount, t);
-                        drawBadge();
-                        recordFrame(budget);
-                    }
-                    catch (error) {
-                        console.warn('[UIRenderer] Draw error:', error);
-                    }
+                // Calculate t using modulo for natural looping
+                const t = (frameCount % totalFrames) / totalFrames;
+                p.randomSeed(system.seed);
+                p.noiseSeed(system.seed);
+                try {
+                    runDraw(p, frameCount, t);
+                    drawBadge();
+                    recordFrame(throttle);
+                }
+                catch (error) {
+                    console.warn('[UIRenderer] Draw error:', error);
                 }
             };
             animationId = requestAnimationFrame(loop);

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 /**
- * @nexart/ui-renderer v0.8.3 - 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.3";
+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.3 - 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.3';
+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.3",
-  "description": "Lightweight Preview Runtime for NexArt Protocol. Non-canonical, performance-optimized with budget limits (max 30 frames, 500ms, 900px canvas).",
+  "version": "0.8.6",
+  "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",