@almadar/ui 5.42.0 → 5.44.0

package/dist/components/index.cjs

@@ -28834,6 +28834,78 @@ var init_GameOverScreen = __esm({
     GameOverScreen.displayName = "GameOverScreen";
   }
 });
+function useRenderInterpolation(options = {}) {
+  const tickIntervalMs = options.tickIntervalMs ?? 1e3 / 30;
+  const prevRef = React77.useRef(null);
+  const currRef = React77.useRef(null);
+  const rafRef = React77.useRef(null);
+  const onSnapshot = React77.useCallback((entities) => {
+    prevRef.current = currRef.current;
+    currRef.current = { entities, arrivedAt: performance.now() };
+  }, []);
+  const getInterpolated = React77.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 = React77.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]
+  );
+  React77.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 = [
@@ -28902,8 +28974,43 @@ function PlatformerCanvas({
     y: 336,
     width: 32,
     height: 48,
+    vx: 0,
+    vy: 0,
+    grounded: true,
     facingRight: true
   };
+  const playerRef = React77.useRef(resolvedPlayer);
+  playerRef.current = resolvedPlayer;
+  const interp = useRenderInterpolation();
+  React77.useEffect(() => {
+    interp.onSnapshot([{ id: "player", x: resolvedPlayer.x, y: resolvedPlayer.y }]);
+  }, [resolvedPlayer.x, resolvedPlayer.y]);
+  const propsRef = React77.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 = React77.useCallback((e) => {
     if (keysRef.current.has(e.code)) return;
     keysRef.current.add(e.code);
@@ -28952,124 +29059,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]);
+  React77.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",
     {
@@ -29087,6 +29219,7 @@ var init_PlatformerCanvas = __esm({
     init_cn();
     init_useEventBus();
     init_verificationRegistry();
+    init_useRenderInterpolation();
     PLATFORM_COLORS = {
       ground: "#4a7c59",
       platform: "#7c6b4a",
@@ -29491,13 +29624,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect73, useRef: useRef70, useCallback: useCallback113, useState: useState105 } = React77__namespace.default;
+      const { useEffect: useEffect74, useRef: useRef71, useCallback: useCallback114, useState: useState105 } = React77__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 = 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);
@@ -29508,7 +29641,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);
@@ -29537,7 +29670,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 });
           }
@@ -29546,7 +29679,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 });
@@ -45876,11 +46009,13 @@ function SimulationCanvas({
   height = 400,
   running,
   speed = 1,
+  bodies: externalBodies,
   className
 }) {
   const preset = React77.useMemo(() => resolvePreset(presetProp), [presetProp]);
   const canvasRef = React77.useRef(null);
   const bodiesRef = React77.useRef(structuredClone(preset.bodies));
+  const interp = useRenderInterpolation();
   React77.useEffect(() => {
     bodiesRef.current = structuredClone(preset.bodies);
   }, [preset]);
@@ -45978,6 +46113,67 @@ function SimulationCanvas({
     }
   }, [width, height, preset]);
   React77.useEffect(() => {
+    if (!externalBodies) return;
+    interp.onSnapshot(externalBodies.map((b) => ({ id: b.id, x: b.x, y: b.y })));
+  }, [externalBodies]);
+  const presetRef = React77.useRef(preset);
+  presetRef.current = preset;
+  const widthRef = React77.useRef(width);
+  widthRef.current = width;
+  const heightRef = React77.useRef(height);
+  heightRef.current = height;
+  React77.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]);
+  React77.useEffect(() => {
+    if (externalBodies !== void 0) return;
     if (!running) return;
     let raf;
     const loop = () => {
@@ -45987,10 +46183,11 @@ function SimulationCanvas({
     };
     raf = requestAnimationFrame(loop);
     return () => cancelAnimationFrame(raf);
-  }, [running, step, draw]);
+  }, [running, step, draw, externalBodies]);
   React77.useEffect(() => {
+    if (externalBodies !== void 0) return;
     draw();
-  }, [draw]);
+  }, [draw, externalBodies]);
   React77.useEffect(() => {
     if (typeof window === "undefined") return;
     const canvas = canvasRef.current;
@@ -46016,136 +46213,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__ */ jsxRuntime.jsxs(exports.VStack, { gap: "md", className, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "sm", align: "center", children: [
-      running ? /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { size: "sm", variant: "secondary", onClick: onPause, icon: LucideIcons2.Pause, children: "Pause" }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { size: "sm", variant: "primary", onClick: onPlay, icon: LucideIcons2.Play, children: "Play" }),
-      /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { size: "sm", variant: "ghost", onClick: onStep, icon: LucideIcons2.SkipForward, disabled: running, children: "Step" }),
-      /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { size: "sm", variant: "ghost", onClick: onReset, icon: LucideIcons2.RotateCcw, children: "Reset" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "xs", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "caption", color: "muted", children: [
-        "Speed: ",
-        speed.toFixed(1),
-        "x"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(exports.VStack, { gap: "xs", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "caption", color: "muted", children: [
-        param.label,
-        ": ",
-        param.value.toFixed(2)
-      ] }),
-      /* @__PURE__ */ jsxRuntime.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 = React77.useRef(null);
-  const visibleData = data.slice(-maxPoints);
-  React77.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__ */ jsxRuntime.jsx(exports.Card, { padding: "sm", className, children: /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "xs", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", weight: "bold", children: label }),
-    /* @__PURE__ */ jsxRuntime.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",
@@ -48679,7 +48750,6 @@ var init_component_registry_generated = __esm({
     init_Navigation();
     init_NegotiatorBoard();
     init_NumberStepper();
-    init_ObjectRulePanel();
     init_OptionConstraintGroup();
     init_OrbitalVisualization();
     init_Overlay();
@@ -48710,7 +48780,6 @@ var init_component_registry_generated = __esm({
     init_ResourceBar();
     init_ResourceCounter();
     init_RichBlockEditor();
-    init_RuleEditor();
     init_RuntimeDebugger2();
     init_ScaledDiagram();
     init_ScoreBoard();
@@ -48730,8 +48799,6 @@ var init_component_registry_generated = __esm({
     init_SignaturePad();
     init_SimpleGrid();
     init_SimulationCanvas();
-    init_SimulationControls();
-    init_SimulationGraph();
     init_SimulatorBoard();
     init_Skeleton();
     init_SocialProof();
@@ -48749,7 +48816,6 @@ var init_component_registry_generated = __esm({
     init_StateArchitectBoard();
     init_StateIndicator();
     init_StateMachineView();
-    init_StateNode();
     init_StatsGrid();
     init_StatsOrganism();
     init_StatusDot();
@@ -48788,8 +48854,6 @@ var init_component_registry_generated = __esm({
     init_Tooltip();
     init_TraitFrame();
     init_TraitSlot();
-    init_TraitStateViewer();
-    init_TransitionArrow();
     init_TrendIndicator();
     init_TurnIndicator();
     init_TurnPanel();
@@ -48799,7 +48863,6 @@ var init_component_registry_generated = __esm({
     init_UncontrolledBattleBoard();
     init_UnitCommandBar();
     init_UploadDropZone();
-    init_VariablePanel();
     init_VersionDiff();
     init_ViolationAlert();
     init_VoteStack();
@@ -49009,7 +49072,6 @@ var init_component_registry_generated = __esm({
       "Navigation": exports.Navigation,
       "NegotiatorBoard": NegotiatorBoard,
       "NumberStepper": exports.NumberStepper,
-      "ObjectRulePanel": ObjectRulePanel,
       "OptionConstraintGroup": exports.OptionConstraintGroup,
       "OrbitalVisualization": exports.OrbitalVisualization,
       "Overlay": exports.Overlay,
@@ -49040,7 +49102,6 @@ var init_component_registry_generated = __esm({
       "ResourceBar": ResourceBar,
       "ResourceCounter": ResourceCounter,
       "RichBlockEditor": exports.RichBlockEditor,
-      "RuleEditor": RuleEditor,
       "RuntimeDebugger": RuntimeDebugger,
       "ScaledDiagram": exports.ScaledDiagram,
       "ScoreBoard": ScoreBoard,
@@ -49060,8 +49121,6 @@ var init_component_registry_generated = __esm({
       "SignaturePad": exports.SignaturePad,
       "SimpleGrid": exports.SimpleGrid,
       "SimulationCanvas": SimulationCanvas,
-      "SimulationControls": SimulationControls,
-      "SimulationGraph": SimulationGraph,
       "SimulatorBoard": SimulatorBoard,
       "Skeleton": Skeleton,
       "SocialProof": exports.SocialProof,
@@ -49082,7 +49141,6 @@ var init_component_registry_generated = __esm({
       "StateArchitectBoard": StateArchitectBoard,
       "StateIndicator": StateIndicator,
       "StateMachineView": exports.StateMachineView,
-      "StateNode": StateNode2,
       "StatsGrid": exports.StatsGrid,
       "StatsOrganism": exports.StatsOrganism,
       "StatusDot": exports.StatusDot,
@@ -49121,8 +49179,6 @@ var init_component_registry_generated = __esm({
       "Tooltip": exports.Tooltip,
       "TraitFrame": TraitFrame,
       "TraitSlot": TraitSlot,
-      "TraitStateViewer": TraitStateViewer,
-      "TransitionArrow": TransitionArrow,
       "TrendIndicator": exports.TrendIndicator,
       "TurnIndicator": TurnIndicator,
       "TurnPanel": TurnPanel,
@@ -49133,7 +49189,6 @@ var init_component_registry_generated = __esm({
       "UnitCommandBar": UnitCommandBar,
       "UploadDropZone": exports.UploadDropZone,
       "VStack": exports.VStack,
-      "VariablePanel": VariablePanel,
       "VersionDiff": exports.VersionDiff,
       "ViolationAlert": exports.ViolationAlert,
       "VoteStack": exports.VoteStack,
@@ -50897,8 +50952,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__ */ jsxRuntime.jsxs(exports.VStack, { gap: "md", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "sm", align: "center", children: [
+      running ? /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { size: "sm", variant: "secondary", onClick: onPause, icon: LucideIcons2.Pause, children: "Pause" }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { size: "sm", variant: "primary", onClick: onPlay, icon: LucideIcons2.Play, children: "Play" }),
+      /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { size: "sm", variant: "ghost", onClick: onStep, icon: LucideIcons2.SkipForward, disabled: running, children: "Step" }),
+      /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { size: "sm", variant: "ghost", onClick: onReset, icon: LucideIcons2.RotateCcw, children: "Reset" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "caption", color: "muted", children: [
+        "Speed: ",
+        speed.toFixed(1),
+        "x"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(exports.VStack, { gap: "xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "caption", color: "muted", children: [
+        param.label,
+        ": ",
+        param.value.toFixed(2)
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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 = React77.useRef(null);
+  const visibleData = data.slice(-maxPoints);
+  React77.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__ */ jsxRuntime.jsx(exports.Card, { padding: "sm", className, children: /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "xs", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", weight: "bold", children: label }),
+    /* @__PURE__ */ jsxRuntime.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