@almadar/ui 5.42.0 → 5.44.0

package/dist/components/index.js

@@ -6,7 +6,7 @@ import { twMerge } from 'tailwind-merge';
 import { EventBusContext, useTraitScope, TraitScopeProvider } from '@almadar/ui/providers';
 import { createLogger, isLogLevelEnabled } from '@almadar/logger';
 import * as LucideIcons2 from 'lucide-react';
-import { Loader2, X, List, Printer, ChevronRight, ChevronLeft, CheckCircle, XCircle, Wrench, RotateCcw, Send, Play, Terminal, Search, ChevronUp, ChevronDown, MoreHorizontal, Bug, Package, Calendar, Pencil, Eye, Image as Image$1, Upload, ZoomIn, ArrowRight, Pause, SkipForward, TrendingUp, TrendingDown, Minus, AlertCircle, Circle, Clock, CheckCircle2, Code, FileText, WrapText, Check, Copy, HelpCircle, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, GitBranch, Plus, Trash, ArrowLeft, Menu as Menu$1, AlertTriangle, Trash2, Eraser, ZoomOut, Download, Lightbulb, PauseCircle, Link2, Tag, User, DollarSign, Zap, Sword, Move, Heart, Shield } from 'lucide-react';
+import { Loader2, X, List, Printer, ChevronRight, ChevronLeft, CheckCircle, XCircle, Wrench, RotateCcw, Send, Play, Terminal, Search, ChevronUp, ChevronDown, MoreHorizontal, Bug, Package, Calendar, Pencil, Eye, Image as Image$1, Upload, ZoomIn, ArrowRight, TrendingUp, TrendingDown, Minus, AlertCircle, Circle, Clock, CheckCircle2, Pause, SkipForward, Code, FileText, WrapText, Check, Copy, HelpCircle, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, GitBranch, Plus, Trash, ArrowLeft, Menu as Menu$1, AlertTriangle, Trash2, Eraser, ZoomOut, Download, Lightbulb, PauseCircle, Link2, Tag, User, DollarSign, Zap, Sword, Move, Heart, Shield } from 'lucide-react';
 import { useTranslate } from '@almadar/ui/hooks';
 export * from '@almadar/ui/hooks';
 import { evaluate, createMinimalContext } from '@almadar/evaluator';
@@ -28789,6 +28789,78 @@ var init_GameOverScreen = __esm({
     GameOverScreen.displayName = "GameOverScreen";
   }
 });
+function useRenderInterpolation(options = {}) {
+  const tickIntervalMs = options.tickIntervalMs ?? 1e3 / 30;
+  const prevRef = useRef(null);
+  const currRef = useRef(null);
+  const rafRef = useRef(null);
+  const onSnapshot = useCallback((entities) => {
+    prevRef.current = currRef.current;
+    currRef.current = { entities, arrivedAt: performance.now() };
+  }, []);
+  const getInterpolated = useCallback((now) => {
+    const out = /* @__PURE__ */ new Map();
+    const curr = currRef.current;
+    if (!curr) return out;
+    const prev = prevRef.current;
+    if (!prev) {
+      for (const e of curr.entities) out.set(e.id, { x: e.x, y: e.y });
+      return out;
+    }
+    const rawAlpha = (now - curr.arrivedAt) / tickIntervalMs;
+    const alpha = rawAlpha < 0 ? 0 : rawAlpha > 1 ? 1 : rawAlpha;
+    const prevMap = /* @__PURE__ */ new Map();
+    for (const e of prev.entities) prevMap.set(e.id, e);
+    for (const c of curr.entities) {
+      const p2 = prevMap.get(c.id);
+      if (!p2) {
+        out.set(c.id, { x: c.x, y: c.y });
+      } else {
+        out.set(c.id, {
+          x: p2.x + (c.x - p2.x) * alpha,
+          y: p2.y + (c.y - p2.y) * alpha
+        });
+      }
+    }
+    return out;
+  }, [tickIntervalMs]);
+  const startLoop = useCallback(
+    (draw) => {
+      let active = true;
+      const loop = () => {
+        if (!active) return;
+        try {
+          draw(getInterpolated(performance.now()));
+        } catch {
+        }
+        rafRef.current = requestAnimationFrame(loop);
+      };
+      rafRef.current = requestAnimationFrame(loop);
+      return () => {
+        active = false;
+        if (rafRef.current !== null) {
+          cancelAnimationFrame(rafRef.current);
+          rafRef.current = null;
+        }
+      };
+    },
+    [getInterpolated]
+  );
+  useEffect(() => {
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, []);
+  return { onSnapshot, getInterpolated, startLoop };
+}
+var init_useRenderInterpolation = __esm({
+  "hooks/useRenderInterpolation.ts"() {
+    "use client";
+  }
+});
 function PlatformerCanvas({
   player,
   platforms = [
@@ -28857,8 +28929,43 @@ function PlatformerCanvas({
     y: 336,
     width: 32,
     height: 48,
+    vx: 0,
+    vy: 0,
+    grounded: true,
     facingRight: true
   };
+  const playerRef = useRef(resolvedPlayer);
+  playerRef.current = resolvedPlayer;
+  const interp = useRenderInterpolation();
+  useEffect(() => {
+    interp.onSnapshot([{ id: "player", x: resolvedPlayer.x, y: resolvedPlayer.y }]);
+  }, [resolvedPlayer.x, resolvedPlayer.y]);
+  const propsRef = useRef({
+    platforms,
+    worldWidth,
+    worldHeight,
+    canvasWidth,
+    canvasHeight,
+    followCamera,
+    bgColor,
+    playerSprite,
+    tileSprites,
+    backgroundImage,
+    assetBaseUrl
+  });
+  propsRef.current = {
+    platforms,
+    worldWidth,
+    worldHeight,
+    canvasWidth,
+    canvasHeight,
+    followCamera,
+    bgColor,
+    playerSprite,
+    tileSprites,
+    backgroundImage,
+    assetBaseUrl
+  };
   const handleKeyDown = useCallback((e) => {
     if (keysRef.current.has(e.code)) return;
     keysRef.current.add(e.code);
@@ -28907,124 +29014,149 @@ function PlatformerCanvas({
     canvas.width = canvasWidth * dpr;
     canvas.height = canvasHeight * dpr;
     ctx.scale(dpr, dpr);
-    let camX = 0;
-    let camY = 0;
-    if (followCamera) {
-      camX = Math.max(0, Math.min(resolvedPlayer.x - canvasWidth / 2, worldWidth - canvasWidth));
-      camY = Math.max(0, Math.min(resolvedPlayer.y - canvasHeight / 2 - 50, worldHeight - canvasHeight));
-    }
-    const bgImg = backgroundImage ? loadImage(backgroundImage) : null;
-    if (bgImg) {
-      ctx.drawImage(bgImg, 0, 0, canvasWidth, canvasHeight);
-    } else if (bgColor) {
-      ctx.fillStyle = bgColor;
-      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
-    } else {
-      const grad = ctx.createLinearGradient(0, 0, 0, canvasHeight);
-      grad.addColorStop(0, SKY_GRADIENT_TOP);
-      grad.addColorStop(1, SKY_GRADIENT_BOTTOM);
-      ctx.fillStyle = grad;
-      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
-    }
-    ctx.strokeStyle = GRID_COLOR;
-    ctx.lineWidth = 1;
-    const gridSize = 32;
-    for (let gx = -camX % gridSize; gx < canvasWidth; gx += gridSize) {
-      ctx.beginPath();
-      ctx.moveTo(gx, 0);
-      ctx.lineTo(gx, canvasHeight);
-      ctx.stroke();
-    }
-    for (let gy = -camY % gridSize; gy < canvasHeight; gy += gridSize) {
-      ctx.beginPath();
-      ctx.moveTo(0, gy);
-      ctx.lineTo(canvasWidth, gy);
-      ctx.stroke();
-    }
-    for (const plat of platforms) {
-      const px = plat.x - camX;
-      const py = plat.y - camY;
-      const platType = plat.type ?? "ground";
-      const spriteUrl = tileSprites?.[platType];
-      const tileImg = spriteUrl ? loadImage(spriteUrl) : null;
-      if (tileImg) {
-        const tileW = tileImg.naturalWidth;
-        const tileH = tileImg.naturalHeight;
-        const scaleH = plat.height / tileH;
-        const scaledW = tileW * scaleH;
-        for (let tx = 0; tx < plat.width; tx += scaledW) {
-          const drawW = Math.min(scaledW, plat.width - tx);
-          const srcW = drawW / scaleH;
-          ctx.drawImage(tileImg, 0, 0, srcW, tileH, px + tx, py, drawW, plat.height);
-        }
+  }, [canvasWidth, canvasHeight]);
+  useEffect(() => {
+    const drawFrame = (positions) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const {
+        platforms: plats,
+        worldWidth: ww,
+        worldHeight: wh,
+        canvasWidth: cw,
+        canvasHeight: ch,
+        followCamera: fc,
+        bgColor: bg,
+        playerSprite: pSprite,
+        tileSprites: tSprites,
+        backgroundImage: bgImg
+      } = propsRef.current;
+      const auth = playerRef.current;
+      const interped = positions.get("player");
+      const px = interped?.x ?? auth.x;
+      const py = interped?.y ?? auth.y;
+      let camX = 0;
+      let camY = 0;
+      if (fc) {
+        camX = Math.max(0, Math.min(px - cw / 2, ww - cw));
+        camY = Math.max(0, Math.min(py - ch / 2 - 50, wh - ch));
+      }
+      const bgImage = bgImg ? loadImage(bgImg) : null;
+      if (bgImage) {
+        ctx.drawImage(bgImage, 0, 0, cw, ch);
+      } else if (bg) {
+        ctx.fillStyle = bg;
+        ctx.fillRect(0, 0, cw, ch);
       } else {
-        const color = PLATFORM_COLORS[platType] ?? PLATFORM_COLORS.ground;
-        ctx.fillStyle = color;
-        ctx.fillRect(px, py, plat.width, plat.height);
-        ctx.fillStyle = "rgba(255, 255, 255, 0.15)";
-        ctx.fillRect(px, py, plat.width, 3);
-        ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
-        ctx.fillRect(px, py + plat.height - 2, plat.width, 2);
-        if (platType === "hazard") {
-          ctx.strokeStyle = "#e74c3c";
-          ctx.lineWidth = 2;
-          for (let sx = px; sx < px + plat.width; sx += 12) {
+        const grad = ctx.createLinearGradient(0, 0, 0, ch);
+        grad.addColorStop(0, SKY_GRADIENT_TOP);
+        grad.addColorStop(1, SKY_GRADIENT_BOTTOM);
+        ctx.fillStyle = grad;
+        ctx.fillRect(0, 0, cw, ch);
+      }
+      ctx.strokeStyle = GRID_COLOR;
+      ctx.lineWidth = 1;
+      const gridSize = 32;
+      for (let gx = -camX % gridSize; gx < cw; gx += gridSize) {
+        ctx.beginPath();
+        ctx.moveTo(gx, 0);
+        ctx.lineTo(gx, ch);
+        ctx.stroke();
+      }
+      for (let gy = -camY % gridSize; gy < ch; gy += gridSize) {
+        ctx.beginPath();
+        ctx.moveTo(0, gy);
+        ctx.lineTo(cw, gy);
+        ctx.stroke();
+      }
+      for (const plat of plats) {
+        const platX = plat.x - camX;
+        const platY = plat.y - camY;
+        const platType = plat.type ?? "ground";
+        const spriteUrl = tSprites?.[platType];
+        const tileImg = spriteUrl ? loadImage(spriteUrl) : null;
+        if (tileImg) {
+          const tileW = tileImg.naturalWidth;
+          const tileH = tileImg.naturalHeight;
+          const scaleH = plat.height / tileH;
+          const scaledW = tileW * scaleH;
+          for (let tx = 0; tx < plat.width; tx += scaledW) {
+            const drawW = Math.min(scaledW, plat.width - tx);
+            const srcW = drawW / scaleH;
+            ctx.drawImage(tileImg, 0, 0, srcW, tileH, platX + tx, platY, drawW, plat.height);
+          }
+        } else {
+          const color = PLATFORM_COLORS[platType] ?? PLATFORM_COLORS.ground;
+          ctx.fillStyle = color;
+          ctx.fillRect(platX, platY, plat.width, plat.height);
+          ctx.fillStyle = "rgba(255, 255, 255, 0.15)";
+          ctx.fillRect(platX, platY, plat.width, 3);
+          ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
+          ctx.fillRect(platX, platY + plat.height - 2, plat.width, 2);
+          if (platType === "hazard") {
+            ctx.strokeStyle = "#e74c3c";
+            ctx.lineWidth = 2;
+            for (let sx = platX; sx < platX + plat.width; sx += 12) {
+              ctx.beginPath();
+              ctx.moveTo(sx, platY);
+              ctx.lineTo(sx + 6, platY + plat.height);
+              ctx.stroke();
+            }
+          }
+          if (platType === "goal") {
+            ctx.fillStyle = "rgba(241, 196, 15, 0.5)";
             ctx.beginPath();
-            ctx.moveTo(sx, py);
-            ctx.lineTo(sx + 6, py + plat.height);
-            ctx.stroke();
+            ctx.arc(platX + plat.width / 2, platY - 10, 8, 0, Math.PI * 2);
+            ctx.fill();
           }
         }
-        if (platType === "goal") {
-          ctx.fillStyle = "rgba(241, 196, 15, 0.5)";
-          ctx.beginPath();
-          ctx.arc(px + plat.width / 2, py - 10, 8, 0, Math.PI * 2);
-          ctx.fill();
-        }
       }
-    }
-    const pw = resolvedPlayer.width ?? 24;
-    const ph = resolvedPlayer.height ?? 32;
-    const ppx = resolvedPlayer.x - camX;
-    const ppy = resolvedPlayer.y - camY;
-    const facingRight = resolvedPlayer.facingRight ?? true;
-    const playerImg = playerSprite ? loadImage(playerSprite) : null;
-    if (playerImg) {
-      ctx.save();
-      if (!facingRight) {
-        ctx.translate(ppx + pw, ppy);
-        ctx.scale(-1, 1);
-        ctx.drawImage(playerImg, 0, 0, pw, ph);
+      const pw = auth.width ?? 24;
+      const ph = auth.height ?? 32;
+      const ppx = px - camX;
+      const ppy = py - camY;
+      const facingRight = auth.facingRight ?? true;
+      const playerImg = pSprite ? loadImage(pSprite) : null;
+      if (playerImg) {
+        ctx.save();
+        if (!facingRight) {
+          ctx.translate(ppx + pw, ppy);
+          ctx.scale(-1, 1);
+          ctx.drawImage(playerImg, 0, 0, pw, ph);
+        } else {
+          ctx.drawImage(playerImg, ppx, ppy, pw, ph);
+        }
+        ctx.restore();
       } else {
-        ctx.drawImage(playerImg, ppx, ppy, pw, ph);
+        ctx.fillStyle = PLAYER_COLOR;
+        const radius = Math.min(pw, ph) * 0.25;
+        ctx.beginPath();
+        ctx.moveTo(ppx + radius, ppy);
+        ctx.lineTo(ppx + pw - radius, ppy);
+        ctx.quadraticCurveTo(ppx + pw, ppy, ppx + pw, ppy + radius);
+        ctx.lineTo(ppx + pw, ppy + ph - radius);
+        ctx.quadraticCurveTo(ppx + pw, ppy + ph, ppx + pw - radius, ppy + ph);
+        ctx.lineTo(ppx + radius, ppy + ph);
+        ctx.quadraticCurveTo(ppx, ppy + ph, ppx, ppy + ph - radius);
+        ctx.lineTo(ppx, ppy + radius);
+        ctx.quadraticCurveTo(ppx, ppy, ppx + radius, ppy);
+        ctx.fill();
+        const eyeY = ppy + ph * 0.3;
+        const eyeSize = 3;
+        const eyeOffsetX = facingRight ? pw * 0.55 : pw * 0.2;
+        ctx.fillStyle = PLAYER_EYE_COLOR;
+        ctx.beginPath();
+        ctx.arc(ppx + eyeOffsetX, eyeY, eyeSize, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.beginPath();
+        ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
+        ctx.fill();
       }
-      ctx.restore();
-    } else {
-      ctx.fillStyle = PLAYER_COLOR;
-      const radius = Math.min(pw, ph) * 0.25;
-      ctx.beginPath();
-      ctx.moveTo(ppx + radius, ppy);
-      ctx.lineTo(ppx + pw - radius, ppy);
-      ctx.quadraticCurveTo(ppx + pw, ppy, ppx + pw, ppy + radius);
-      ctx.lineTo(ppx + pw, ppy + ph - radius);
-      ctx.quadraticCurveTo(ppx + pw, ppy + ph, ppx + pw - radius, ppy + ph);
-      ctx.lineTo(ppx + radius, ppy + ph);
-      ctx.quadraticCurveTo(ppx, ppy + ph, ppx, ppy + ph - radius);
-      ctx.lineTo(ppx, ppy + radius);
-      ctx.quadraticCurveTo(ppx, ppy, ppx + radius, ppy);
-      ctx.fill();
-      const eyeY = ppy + ph * 0.3;
-      const eyeSize = 3;
-      const eyeOffsetX = facingRight ? pw * 0.55 : pw * 0.2;
-      ctx.fillStyle = PLAYER_EYE_COLOR;
-      ctx.beginPath();
-      ctx.arc(ppx + eyeOffsetX, eyeY, eyeSize, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.beginPath();
-      ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
-      ctx.fill();
-    }
-  }, [player, platforms, worldWidth, worldHeight, canvasWidth, canvasHeight, followCamera, bgColor, playerSprite, tileSprites, backgroundImage, assetBaseUrl, loadedImages]);
+    };
+    return interp.startLoop(drawFrame);
+  }, [interp.startLoop, loadImage]);
   return /* @__PURE__ */ jsx(
     "canvas",
     {
@@ -29042,6 +29174,7 @@ var init_PlatformerCanvas = __esm({
     init_cn();
     init_useEventBus();
     init_verificationRegistry();
+    init_useRenderInterpolation();
     PLATFORM_COLORS = {
       ground: "#4a7c59",
       platform: "#7c6b4a",
@@ -29446,13 +29579,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect73, useRef: useRef70, useCallback: useCallback113, useState: useState105 } = React77__default;
+      const { useEffect: useEffect74, useRef: useRef71, useCallback: useCallback114, useState: useState105 } = React77__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef70({ centerLat, centerLng, zoom });
-        useEffect73(() => {
+        const prevRef = useRef71({ centerLat, centerLng, zoom });
+        useEffect74(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -29463,7 +29596,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect73(() => {
+        useEffect74(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -29492,7 +29625,7 @@ var init_MapView = __esm({
       }) {
         const eventBus = useEventBus2();
         const [clickedPosition, setClickedPosition] = useState105(null);
-        const handleMapClick = useCallback113((lat, lng) => {
+        const handleMapClick = useCallback114((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -29501,7 +29634,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback113((marker) => {
+        const handleMarkerClick = useCallback114((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -45831,11 +45964,13 @@ function SimulationCanvas({
   height = 400,
   running,
   speed = 1,
+  bodies: externalBodies,
   className
 }) {
   const preset = useMemo(() => resolvePreset(presetProp), [presetProp]);
   const canvasRef = useRef(null);
   const bodiesRef = useRef(structuredClone(preset.bodies));
+  const interp = useRenderInterpolation();
   useEffect(() => {
     bodiesRef.current = structuredClone(preset.bodies);
   }, [preset]);
@@ -45933,6 +46068,67 @@ function SimulationCanvas({
     }
   }, [width, height, preset]);
   useEffect(() => {
+    if (!externalBodies) return;
+    interp.onSnapshot(externalBodies.map((b) => ({ id: b.id, x: b.x, y: b.y })));
+  }, [externalBodies]);
+  const presetRef = useRef(preset);
+  presetRef.current = preset;
+  const widthRef = useRef(width);
+  widthRef.current = width;
+  const heightRef = useRef(height);
+  heightRef.current = height;
+  useEffect(() => {
+    if (!externalBodies) return;
+    const drawInterpolated = (positions) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const bodies = bodiesRef.current;
+      const p2 = presetRef.current;
+      const w = widthRef.current;
+      const h = heightRef.current;
+      ctx.clearRect(0, 0, w, h);
+      ctx.fillStyle = p2.backgroundColor ?? "#1a1a2e";
+      ctx.fillRect(0, 0, w, h);
+      if (p2.constraints) {
+        for (const c of p2.constraints) {
+          const a = bodies[c.bodyA];
+          const b = bodies[c.bodyB];
+          if (a && b) {
+            const aPos = positions.get(a.id) ?? a;
+            const bPos = positions.get(b.id) ?? b;
+            ctx.beginPath();
+            ctx.moveTo(aPos.x, aPos.y);
+            ctx.lineTo(bPos.x, bPos.y);
+            ctx.strokeStyle = "#533483";
+            ctx.lineWidth = 1;
+            ctx.setLineDash([4, 4]);
+            ctx.stroke();
+            ctx.setLineDash([]);
+          }
+        }
+      }
+      for (const body of bodies) {
+        const pos = positions.get(body.id) ?? body;
+        ctx.beginPath();
+        ctx.arc(pos.x, pos.y, body.radius, 0, Math.PI * 2);
+        ctx.fillStyle = body.color ?? "#e94560";
+        ctx.fill();
+        if (p2.showVelocity) {
+          ctx.beginPath();
+          ctx.moveTo(pos.x, pos.y);
+          ctx.lineTo(pos.x + body.vx * 0.1, pos.y + body.vy * 0.1);
+          ctx.strokeStyle = "#16213e";
+          ctx.lineWidth = 2;
+          ctx.stroke();
+        }
+      }
+    };
+    return interp.startLoop(drawInterpolated);
+  }, [externalBodies !== void 0, interp.startLoop]);
+  useEffect(() => {
+    if (externalBodies !== void 0) return;
     if (!running) return;
     let raf;
     const loop = () => {
@@ -45942,10 +46138,11 @@ function SimulationCanvas({
     };
     raf = requestAnimationFrame(loop);
     return () => cancelAnimationFrame(raf);
-  }, [running, step, draw]);
+  }, [running, step, draw, externalBodies]);
   useEffect(() => {
+    if (externalBodies !== void 0) return;
     draw();
-  }, [draw]);
+  }, [draw, externalBodies]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     const canvas = canvasRef.current;
@@ -45971,136 +46168,10 @@ var init_SimulationCanvas = __esm({
     init_atoms2();
     init_verificationRegistry();
     init_presets();
+    init_useRenderInterpolation();
     SimulationCanvas.displayName = "SimulationCanvas";
   }
 });
-function SimulationControls({
-  running,
-  speed,
-  parameters,
-  onPlay,
-  onPause,
-  onStep,
-  onReset,
-  onSpeedChange,
-  onParameterChange,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(VStack, { gap: "md", className, children: [
-    /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
-      running ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: onPause, icon: Pause, children: "Pause" }) : /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", onClick: onPlay, icon: Play, children: "Play" }),
-      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onStep, icon: SkipForward, disabled: running, children: "Step" }),
-      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onReset, icon: RotateCcw, children: "Reset" })
-    ] }),
-    /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
-      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "muted", children: [
-        "Speed: ",
-        speed.toFixed(1),
-        "x"
-      ] }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "range",
-          min: 0.1,
-          max: 5,
-          step: 0.1,
-          value: speed,
-          onChange: (e) => onSpeedChange(parseFloat(e.target.value)),
-          className: "w-full"
-        }
-      )
-    ] }),
-    Object.entries(parameters).map(([name, param]) => /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
-      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "muted", children: [
-        param.label,
-        ": ",
-        param.value.toFixed(2)
-      ] }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "range",
-          min: param.min,
-          max: param.max,
-          step: param.step,
-          value: param.value,
-          onChange: (e) => onParameterChange(name, parseFloat(e.target.value)),
-          className: "w-full"
-        }
-      )
-    ] }, name))
-  ] });
-}
-var init_SimulationControls = __esm({
-  "components/game/organisms/physics-sim/SimulationControls.tsx"() {
-    init_atoms2();
-    SimulationControls.displayName = "SimulationControls";
-  }
-});
-function SimulationGraph({
-  label,
-  unit,
-  data,
-  maxPoints = 200,
-  width = 300,
-  height = 120,
-  color = "#e94560",
-  className
-}) {
-  const canvasRef = useRef(null);
-  const visibleData = data.slice(-maxPoints);
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas || visibleData.length < 2) return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    ctx.clearRect(0, 0, width, height);
-    ctx.fillStyle = "#0f0f23";
-    ctx.fillRect(0, 0, width, height);
-    ctx.strokeStyle = "#1a1a3e";
-    ctx.lineWidth = 0.5;
-    for (let i = 0; i < 5; i++) {
-      const y = height / 5 * i;
-      ctx.beginPath();
-      ctx.moveTo(0, y);
-      ctx.lineTo(width, y);
-      ctx.stroke();
-    }
-    let minVal = Infinity;
-    let maxVal = -Infinity;
-    for (const pt of visibleData) {
-      if (pt.value < minVal) minVal = pt.value;
-      if (pt.value > maxVal) maxVal = pt.value;
-    }
-    const range = maxVal - minVal || 1;
-    const pad = height * 0.1;
-    ctx.beginPath();
-    ctx.strokeStyle = color;
-    ctx.lineWidth = 2;
-    for (let i = 0; i < visibleData.length; i++) {
-      const x = i / (maxPoints - 1) * width;
-      const y = pad + (maxVal - visibleData[i].value) / range * (height - 2 * pad);
-      if (i === 0) ctx.moveTo(x, y);
-      else ctx.lineTo(x, y);
-    }
-    ctx.stroke();
-    const last = visibleData[visibleData.length - 1];
-    ctx.fillStyle = color;
-    ctx.font = "12px monospace";
-    ctx.fillText(`${last.value.toFixed(2)} ${unit}`, width - 80, 16);
-  }, [visibleData, width, height, color, unit, maxPoints]);
-  return /* @__PURE__ */ jsx(Card, { padding: "sm", className, children: /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "caption", weight: "bold", children: label }),
-    /* @__PURE__ */ jsx("canvas", { ref: canvasRef, width, height, className: "rounded" })
-  ] }) });
-}
-var init_SimulationGraph = __esm({
-  "components/game/organisms/physics-sim/SimulationGraph.tsx"() {
-    init_atoms2();
-    SimulationGraph.displayName = "SimulationGraph";
-  }
-});
 function SimulatorBoard({
   entity,
   completeEvent = "PUZZLE_COMPLETE",
@@ -48634,7 +48705,6 @@ var init_component_registry_generated = __esm({
     init_Navigation();
     init_NegotiatorBoard();
     init_NumberStepper();
-    init_ObjectRulePanel();
     init_OptionConstraintGroup();
     init_OrbitalVisualization();
     init_Overlay();
@@ -48665,7 +48735,6 @@ var init_component_registry_generated = __esm({
     init_ResourceBar();
     init_ResourceCounter();
     init_RichBlockEditor();
-    init_RuleEditor();
     init_RuntimeDebugger2();
     init_ScaledDiagram();
     init_ScoreBoard();
@@ -48685,8 +48754,6 @@ var init_component_registry_generated = __esm({
     init_SignaturePad();
     init_SimpleGrid();
     init_SimulationCanvas();
-    init_SimulationControls();
-    init_SimulationGraph();
     init_SimulatorBoard();
     init_Skeleton();
     init_SocialProof();
@@ -48704,7 +48771,6 @@ var init_component_registry_generated = __esm({
     init_StateArchitectBoard();
     init_StateIndicator();
     init_StateMachineView();
-    init_StateNode();
     init_StatsGrid();
     init_StatsOrganism();
     init_StatusDot();
@@ -48743,8 +48809,6 @@ var init_component_registry_generated = __esm({
     init_Tooltip();
     init_TraitFrame();
     init_TraitSlot();
-    init_TraitStateViewer();
-    init_TransitionArrow();
     init_TrendIndicator();
     init_TurnIndicator();
     init_TurnPanel();
@@ -48754,7 +48818,6 @@ var init_component_registry_generated = __esm({
     init_UncontrolledBattleBoard();
     init_UnitCommandBar();
     init_UploadDropZone();
-    init_VariablePanel();
     init_VersionDiff();
     init_ViolationAlert();
     init_VoteStack();
@@ -48964,7 +49027,6 @@ var init_component_registry_generated = __esm({
       "Navigation": Navigation,
       "NegotiatorBoard": NegotiatorBoard,
       "NumberStepper": NumberStepper,
-      "ObjectRulePanel": ObjectRulePanel,
       "OptionConstraintGroup": OptionConstraintGroup,
       "OrbitalVisualization": OrbitalVisualization,
       "Overlay": Overlay,
@@ -48995,7 +49057,6 @@ var init_component_registry_generated = __esm({
       "ResourceBar": ResourceBar,
       "ResourceCounter": ResourceCounter,
       "RichBlockEditor": RichBlockEditor,
-      "RuleEditor": RuleEditor,
       "RuntimeDebugger": RuntimeDebugger,
       "ScaledDiagram": ScaledDiagram,
       "ScoreBoard": ScoreBoard,
@@ -49015,8 +49076,6 @@ var init_component_registry_generated = __esm({
       "SignaturePad": SignaturePad,
       "SimpleGrid": SimpleGrid,
       "SimulationCanvas": SimulationCanvas,
-      "SimulationControls": SimulationControls,
-      "SimulationGraph": SimulationGraph,
       "SimulatorBoard": SimulatorBoard,
       "Skeleton": Skeleton,
       "SocialProof": SocialProof,
@@ -49037,7 +49096,6 @@ var init_component_registry_generated = __esm({
       "StateArchitectBoard": StateArchitectBoard,
       "StateIndicator": StateIndicator,
       "StateMachineView": StateMachineView,
-      "StateNode": StateNode2,
       "StatsGrid": StatsGrid,
       "StatsOrganism": StatsOrganism,
       "StatusDot": StatusDot,
@@ -49076,8 +49134,6 @@ var init_component_registry_generated = __esm({
       "Tooltip": Tooltip,
       "TraitFrame": TraitFrame,
       "TraitSlot": TraitSlot,
-      "TraitStateViewer": TraitStateViewer,
-      "TransitionArrow": TransitionArrow,
       "TrendIndicator": TrendIndicator,
       "TurnIndicator": TurnIndicator,
       "TurnPanel": TurnPanel,
@@ -49088,7 +49144,6 @@ var init_component_registry_generated = __esm({
       "UnitCommandBar": UnitCommandBar,
       "UploadDropZone": UploadDropZone,
       "VStack": VStack,
-      "VariablePanel": VariablePanel,
       "VersionDiff": VersionDiff,
       "ViolationAlert": ViolationAlert,
       "VoteStack": VoteStack,
@@ -50852,8 +50907,131 @@ init_NegotiatorBoard();
 
 // components/game/organisms/physics-sim/index.ts
 init_SimulationCanvas();
-init_SimulationControls();
-init_SimulationGraph();
+
+// components/game/organisms/physics-sim/SimulationControls.tsx
+init_atoms2();
+function SimulationControls({
+  running,
+  speed,
+  parameters,
+  onPlay,
+  onPause,
+  onStep,
+  onReset,
+  onSpeedChange,
+  onParameterChange,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(VStack, { gap: "md", className, children: [
+    /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
+      running ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: onPause, icon: Pause, children: "Pause" }) : /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", onClick: onPlay, icon: Play, children: "Play" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onStep, icon: SkipForward, disabled: running, children: "Step" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onReset, icon: RotateCcw, children: "Reset" })
+    ] }),
+    /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "muted", children: [
+        "Speed: ",
+        speed.toFixed(1),
+        "x"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 0.1,
+          max: 5,
+          step: 0.1,
+          value: speed,
+          onChange: (e) => onSpeedChange(parseFloat(e.target.value)),
+          className: "w-full"
+        }
+      )
+    ] }),
+    Object.entries(parameters).map(([name, param]) => /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "muted", children: [
+        param.label,
+        ": ",
+        param.value.toFixed(2)
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: param.min,
+          max: param.max,
+          step: param.step,
+          value: param.value,
+          onChange: (e) => onParameterChange(name, parseFloat(e.target.value)),
+          className: "w-full"
+        }
+      )
+    ] }, name))
+  ] });
+}
+SimulationControls.displayName = "SimulationControls";
+
+// components/game/organisms/physics-sim/SimulationGraph.tsx
+init_atoms2();
+function SimulationGraph({
+  label,
+  unit,
+  data,
+  maxPoints = 200,
+  width = 300,
+  height = 120,
+  color = "#e94560",
+  className
+}) {
+  const canvasRef = useRef(null);
+  const visibleData = data.slice(-maxPoints);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || visibleData.length < 2) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, width, height);
+    ctx.fillStyle = "#0f0f23";
+    ctx.fillRect(0, 0, width, height);
+    ctx.strokeStyle = "#1a1a3e";
+    ctx.lineWidth = 0.5;
+    for (let i = 0; i < 5; i++) {
+      const y = height / 5 * i;
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(width, y);
+      ctx.stroke();
+    }
+    let minVal = Infinity;
+    let maxVal = -Infinity;
+    for (const pt of visibleData) {
+      if (pt.value < minVal) minVal = pt.value;
+      if (pt.value > maxVal) maxVal = pt.value;
+    }
+    const range = maxVal - minVal || 1;
+    const pad = height * 0.1;
+    ctx.beginPath();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 2;
+    for (let i = 0; i < visibleData.length; i++) {
+      const x = i / (maxPoints - 1) * width;
+      const y = pad + (maxVal - visibleData[i].value) / range * (height - 2 * pad);
+      if (i === 0) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+    const last = visibleData[visibleData.length - 1];
+    ctx.fillStyle = color;
+    ctx.font = "12px monospace";
+    ctx.fillText(`${last.value.toFixed(2)} ${unit}`, width - 80, 16);
+  }, [visibleData, width, height, color, unit, maxPoints]);
+  return /* @__PURE__ */ jsx(Card, { padding: "sm", className, children: /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", weight: "bold", children: label }),
+    /* @__PURE__ */ jsx("canvas", { ref: canvasRef, width, height, className: "rounded" })
+  ] }) });
+}
+SimulationGraph.displayName = "SimulationGraph";
+
+// components/game/organisms/physics-sim/index.ts
 init_presets();
 
 // components/game/organisms/types/game.ts