@almadar/ui 5.42.0 → 5.43.0

package/dist/hooks/index.js

@@ -2502,6 +2502,73 @@ function useDropZone({ accepts, onDrop, disabled = false }) {
   );
   return { dropProps, isOver };
 }
+function useRenderInterpolation(options = {}) {
+  const tickIntervalMs = options.tickIntervalMs ?? 1e3 / 30;
+  const prevRef = useRef(null);
+  const currRef = useRef(null);
+  const rafRef = useRef(null);
+  const onSnapshot = useCallback((entities2) => {
+    prevRef.current = currRef.current;
+    currRef.current = { entities: entities2, 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 p = prevMap.get(c.id);
+      if (!p) {
+        out.set(c.id, { x: c.x, y: c.y });
+      } else {
+        out.set(c.id, {
+          x: p.x + (c.x - p.x) * alpha,
+          y: p.y + (c.y - p.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 API_BASE = typeof process !== "undefined" && process.env?.VITE_API_URL ? process.env.VITE_API_URL : "http://localhost:3000";
 function getUserId() {
   return localStorage.getItem("userId") || "anonymous";
@@ -2578,4 +2645,4 @@ function useGitHubBranches(owner, repo, enabled = true) {
   });
 }
 
-export { ALMADAR_DND_MIME, DEFAULT_SLOTS, I18nProvider, clearEntities, createTranslate, getAllEntities, getByType, getEntity, getSingleton, parseQueryBinding, removeEntity, spawnEntity, updateEntity, updateSingleton, useAgentChat, useAuthContext, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEntities, useEntitiesByType, useEntity as useEntityById, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useInfiniteScroll, useInput, useLongPress, useOrbitalHistory, usePhysics, usePinchZoom, usePlayer, usePreview, usePullToRefresh, useQuerySingleton, useSingletonEntity, useSwipeGesture, useTraitListens, useTranslate, useUIEvents, useUISlotManager, useValidation };
+export { ALMADAR_DND_MIME, DEFAULT_SLOTS, I18nProvider, clearEntities, createTranslate, getAllEntities, getByType, getEntity, getSingleton, parseQueryBinding, removeEntity, spawnEntity, updateEntity, updateSingleton, useAgentChat, useAuthContext, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEntities, useEntitiesByType, useEntity as useEntityById, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useInfiniteScroll, useInput, useLongPress, useOrbitalHistory, usePhysics, usePinchZoom, usePlayer, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSingletonEntity, useSwipeGesture, useTraitListens, useTranslate, useUIEvents, useUISlotManager, useValidation };

package/dist/hooks/useRenderInterpolation.d.ts

@@ -0,0 +1,33 @@
+export interface Positioned {
+    id: string;
+    x: number;
+    y: number;
+}
+export interface RenderInterpolationOptions {
+    /** Expected tick interval in ms (default: 1000/30 ≈ 33.3ms) */
+    tickIntervalMs?: number;
+}
+export interface RenderInterpolationHandle<T extends Positioned> {
+    /** Call when a new authoritative snapshot arrives from the model */
+    onSnapshot: (entities: readonly T[]) => void;
+    /** Returns interpolated positions for the current rAF timestamp; falls back to authoritative values */
+    getInterpolated: (now: number) => Map<string, {
+        x: number;
+        y: number;
+    }>;
+    /** Start the rAF loop; call the supplied draw fn on every frame */
+    startLoop: (draw: (positions: Map<string, {
+        x: number;
+        y: number;
+    }>) => void) => () => void;
+}
+/**
+ * Fixed-timestep render interpolation between the last two authoritative model snapshots.
+ *
+ * Buffers two snapshots. On each rAF frame computes
+ *   alpha = clamp((now - lastArrival) / tickIntervalMs, 0, 1)
+ * and lerps x/y between prev and curr, matched by entity id.
+ * New or removed entities fall back to their authoritative value directly.
+ * Never throws; never causes a React re-render per frame.
+ */
+export declare function useRenderInterpolation<T extends Positioned>(options?: RenderInterpolationOptions): RenderInterpolationHandle<T>;

package/dist/providers/index.cjs

@@ -28609,6 +28609,78 @@ var init_GameOverScreen = __esm({
     GameOverScreen.displayName = "GameOverScreen";
   }
 });
+function useRenderInterpolation(options = {}) {
+  const tickIntervalMs = options.tickIntervalMs ?? 1e3 / 30;
+  const prevRef = React83.useRef(null);
+  const currRef = React83.useRef(null);
+  const rafRef = React83.useRef(null);
+  const onSnapshot = React83.useCallback((entities) => {
+    prevRef.current = currRef.current;
+    currRef.current = { entities, arrivedAt: performance.now() };
+  }, []);
+  const getInterpolated = React83.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 = React83.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]
+  );
+  React83.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 = [
@@ -28677,8 +28749,43 @@ function PlatformerCanvas({
     y: 336,
     width: 32,
     height: 48,
+    vx: 0,
+    vy: 0,
+    grounded: true,
     facingRight: true
   };
+  const playerRef = React83.useRef(resolvedPlayer);
+  playerRef.current = resolvedPlayer;
+  const interp = useRenderInterpolation();
+  React83.useEffect(() => {
+    interp.onSnapshot([{ id: "player", x: resolvedPlayer.x, y: resolvedPlayer.y }]);
+  }, [resolvedPlayer.x, resolvedPlayer.y]);
+  const propsRef = React83.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 = React83.useCallback((e) => {
     if (keysRef.current.has(e.code)) return;
     keysRef.current.add(e.code);
@@ -28727,124 +28834,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]);
+  React83.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__ */ jsxRuntime.jsx(
     "canvas",
     {
@@ -28862,6 +28994,7 @@ var init_PlatformerCanvas = __esm({
     init_cn();
     init_useEventBus();
     init_verificationRegistry();
+    init_useRenderInterpolation();
     PLATFORM_COLORS = {
       ground: "#4a7c59",
       platform: "#7c6b4a",
@@ -29244,13 +29377,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect73, useRef: useRef68, useCallback: useCallback111, useState: useState104 } = React83__namespace.default;
+      const { useEffect: useEffect74, useRef: useRef69, useCallback: useCallback112, useState: useState104 } = React83__namespace.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 = useRef68({ centerLat, centerLng, zoom });
-        useEffect73(() => {
+        const prevRef = useRef69({ centerLat, centerLng, zoom });
+        useEffect74(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -29261,7 +29394,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);
@@ -29290,7 +29423,7 @@ var init_MapView = __esm({
       }) {
         const eventBus = useEventBus2();
         const [clickedPosition, setClickedPosition] = useState104(null);
-        const handleMapClick = useCallback111((lat, lng) => {
+        const handleMapClick = useCallback112((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -29299,7 +29432,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback111((marker) => {
+        const handleMarkerClick = useCallback112((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -45152,11 +45285,13 @@ function SimulationCanvas({
   height = 400,
   running,
   speed = 1,
+  bodies: externalBodies,
   className
 }) {
   const preset = React83.useMemo(() => resolvePreset(presetProp), [presetProp]);
   const canvasRef = React83.useRef(null);
   const bodiesRef = React83.useRef(structuredClone(preset.bodies));
+  const interp = useRenderInterpolation();
   React83.useEffect(() => {
     bodiesRef.current = structuredClone(preset.bodies);
   }, [preset]);
@@ -45254,6 +45389,67 @@ function SimulationCanvas({
     }
   }, [width, height, preset]);
   React83.useEffect(() => {
+    if (!externalBodies) return;
+    interp.onSnapshot(externalBodies.map((b) => ({ id: b.id, x: b.x, y: b.y })));
+  }, [externalBodies]);
+  const presetRef = React83.useRef(preset);
+  presetRef.current = preset;
+  const widthRef = React83.useRef(width);
+  widthRef.current = width;
+  const heightRef = React83.useRef(height);
+  heightRef.current = height;
+  React83.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]);
+  React83.useEffect(() => {
+    if (externalBodies !== void 0) return;
     if (!running) return;
     let raf;
     const loop = () => {
@@ -45263,10 +45459,11 @@ function SimulationCanvas({
     };
     raf = requestAnimationFrame(loop);
     return () => cancelAnimationFrame(raf);
-  }, [running, step, draw]);
+  }, [running, step, draw, externalBodies]);
   React83.useEffect(() => {
+    if (externalBodies !== void 0) return;
     draw();
-  }, [draw]);
+  }, [draw, externalBodies]);
   React83.useEffect(() => {
     if (typeof window === "undefined") return;
     const canvas = canvasRef.current;
@@ -45292,6 +45489,7 @@ var init_SimulationCanvas = __esm({
     init_atoms2();
     init_verificationRegistry();
     init_presets();
+    init_useRenderInterpolation();
     SimulationCanvas.displayName = "SimulationCanvas";
   }
 });