@almadar/ui 5.42.0 → 5.44.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -28609,6 +28609,78 @@ var init_GameOverScreen = __esm({
28609
28609
  GameOverScreen.displayName = "GameOverScreen";
28610
28610
  }
28611
28611
  });
28612
+ function useRenderInterpolation(options = {}) {
28613
+ const tickIntervalMs = options.tickIntervalMs ?? 1e3 / 30;
28614
+ const prevRef = React83.useRef(null);
28615
+ const currRef = React83.useRef(null);
28616
+ const rafRef = React83.useRef(null);
28617
+ const onSnapshot = React83.useCallback((entities) => {
28618
+ prevRef.current = currRef.current;
28619
+ currRef.current = { entities, arrivedAt: performance.now() };
28620
+ }, []);
28621
+ const getInterpolated = React83.useCallback((now) => {
28622
+ const out = /* @__PURE__ */ new Map();
28623
+ const curr = currRef.current;
28624
+ if (!curr) return out;
28625
+ const prev = prevRef.current;
28626
+ if (!prev) {
28627
+ for (const e of curr.entities) out.set(e.id, { x: e.x, y: e.y });
28628
+ return out;
28629
+ }
28630
+ const rawAlpha = (now - curr.arrivedAt) / tickIntervalMs;
28631
+ const alpha = rawAlpha < 0 ? 0 : rawAlpha > 1 ? 1 : rawAlpha;
28632
+ const prevMap = /* @__PURE__ */ new Map();
28633
+ for (const e of prev.entities) prevMap.set(e.id, e);
28634
+ for (const c of curr.entities) {
28635
+ const p2 = prevMap.get(c.id);
28636
+ if (!p2) {
28637
+ out.set(c.id, { x: c.x, y: c.y });
28638
+ } else {
28639
+ out.set(c.id, {
28640
+ x: p2.x + (c.x - p2.x) * alpha,
28641
+ y: p2.y + (c.y - p2.y) * alpha
28642
+ });
28643
+ }
28644
+ }
28645
+ return out;
28646
+ }, [tickIntervalMs]);
28647
+ const startLoop = React83.useCallback(
28648
+ (draw) => {
28649
+ let active = true;
28650
+ const loop = () => {
28651
+ if (!active) return;
28652
+ try {
28653
+ draw(getInterpolated(performance.now()));
28654
+ } catch {
28655
+ }
28656
+ rafRef.current = requestAnimationFrame(loop);
28657
+ };
28658
+ rafRef.current = requestAnimationFrame(loop);
28659
+ return () => {
28660
+ active = false;
28661
+ if (rafRef.current !== null) {
28662
+ cancelAnimationFrame(rafRef.current);
28663
+ rafRef.current = null;
28664
+ }
28665
+ };
28666
+ },
28667
+ [getInterpolated]
28668
+ );
28669
+ React83.useEffect(() => {
28670
+ return () => {
28671
+ if (rafRef.current !== null) {
28672
+ cancelAnimationFrame(rafRef.current);
28673
+ rafRef.current = null;
28674
+ }
28675
+ };
28676
+ }, []);
28677
+ return { onSnapshot, getInterpolated, startLoop };
28678
+ }
28679
+ var init_useRenderInterpolation = __esm({
28680
+ "hooks/useRenderInterpolation.ts"() {
28681
+ "use client";
28682
+ }
28683
+ });
28612
28684
  function PlatformerCanvas({
28613
28685
  player,
28614
28686
  platforms = [
@@ -28677,8 +28749,43 @@ function PlatformerCanvas({
28677
28749
  y: 336,
28678
28750
  width: 32,
28679
28751
  height: 48,
28752
+ vx: 0,
28753
+ vy: 0,
28754
+ grounded: true,
28680
28755
  facingRight: true
28681
28756
  };
28757
+ const playerRef = React83.useRef(resolvedPlayer);
28758
+ playerRef.current = resolvedPlayer;
28759
+ const interp = useRenderInterpolation();
28760
+ React83.useEffect(() => {
28761
+ interp.onSnapshot([{ id: "player", x: resolvedPlayer.x, y: resolvedPlayer.y }]);
28762
+ }, [resolvedPlayer.x, resolvedPlayer.y]);
28763
+ const propsRef = React83.useRef({
28764
+ platforms,
28765
+ worldWidth,
28766
+ worldHeight,
28767
+ canvasWidth,
28768
+ canvasHeight,
28769
+ followCamera,
28770
+ bgColor,
28771
+ playerSprite,
28772
+ tileSprites,
28773
+ backgroundImage,
28774
+ assetBaseUrl
28775
+ });
28776
+ propsRef.current = {
28777
+ platforms,
28778
+ worldWidth,
28779
+ worldHeight,
28780
+ canvasWidth,
28781
+ canvasHeight,
28782
+ followCamera,
28783
+ bgColor,
28784
+ playerSprite,
28785
+ tileSprites,
28786
+ backgroundImage,
28787
+ assetBaseUrl
28788
+ };
28682
28789
  const handleKeyDown = React83.useCallback((e) => {
28683
28790
  if (keysRef.current.has(e.code)) return;
28684
28791
  keysRef.current.add(e.code);
@@ -28727,124 +28834,149 @@ function PlatformerCanvas({
28727
28834
  canvas.width = canvasWidth * dpr;
28728
28835
  canvas.height = canvasHeight * dpr;
28729
28836
  ctx.scale(dpr, dpr);
28730
- let camX = 0;
28731
- let camY = 0;
28732
- if (followCamera) {
28733
- camX = Math.max(0, Math.min(resolvedPlayer.x - canvasWidth / 2, worldWidth - canvasWidth));
28734
- camY = Math.max(0, Math.min(resolvedPlayer.y - canvasHeight / 2 - 50, worldHeight - canvasHeight));
28735
- }
28736
- const bgImg = backgroundImage ? loadImage(backgroundImage) : null;
28737
- if (bgImg) {
28738
- ctx.drawImage(bgImg, 0, 0, canvasWidth, canvasHeight);
28739
- } else if (bgColor) {
28740
- ctx.fillStyle = bgColor;
28741
- ctx.fillRect(0, 0, canvasWidth, canvasHeight);
28742
- } else {
28743
- const grad = ctx.createLinearGradient(0, 0, 0, canvasHeight);
28744
- grad.addColorStop(0, SKY_GRADIENT_TOP);
28745
- grad.addColorStop(1, SKY_GRADIENT_BOTTOM);
28746
- ctx.fillStyle = grad;
28747
- ctx.fillRect(0, 0, canvasWidth, canvasHeight);
28748
- }
28749
- ctx.strokeStyle = GRID_COLOR;
28750
- ctx.lineWidth = 1;
28751
- const gridSize = 32;
28752
- for (let gx = -camX % gridSize; gx < canvasWidth; gx += gridSize) {
28753
- ctx.beginPath();
28754
- ctx.moveTo(gx, 0);
28755
- ctx.lineTo(gx, canvasHeight);
28756
- ctx.stroke();
28757
- }
28758
- for (let gy = -camY % gridSize; gy < canvasHeight; gy += gridSize) {
28759
- ctx.beginPath();
28760
- ctx.moveTo(0, gy);
28761
- ctx.lineTo(canvasWidth, gy);
28762
- ctx.stroke();
28763
- }
28764
- for (const plat of platforms) {
28765
- const px = plat.x - camX;
28766
- const py = plat.y - camY;
28767
- const platType = plat.type ?? "ground";
28768
- const spriteUrl = tileSprites?.[platType];
28769
- const tileImg = spriteUrl ? loadImage(spriteUrl) : null;
28770
- if (tileImg) {
28771
- const tileW = tileImg.naturalWidth;
28772
- const tileH = tileImg.naturalHeight;
28773
- const scaleH = plat.height / tileH;
28774
- const scaledW = tileW * scaleH;
28775
- for (let tx = 0; tx < plat.width; tx += scaledW) {
28776
- const drawW = Math.min(scaledW, plat.width - tx);
28777
- const srcW = drawW / scaleH;
28778
- ctx.drawImage(tileImg, 0, 0, srcW, tileH, px + tx, py, drawW, plat.height);
28779
- }
28837
+ }, [canvasWidth, canvasHeight]);
28838
+ React83.useEffect(() => {
28839
+ const drawFrame = (positions) => {
28840
+ const canvas = canvasRef.current;
28841
+ if (!canvas) return;
28842
+ const ctx = canvas.getContext("2d");
28843
+ if (!ctx) return;
28844
+ const {
28845
+ platforms: plats,
28846
+ worldWidth: ww,
28847
+ worldHeight: wh,
28848
+ canvasWidth: cw,
28849
+ canvasHeight: ch,
28850
+ followCamera: fc,
28851
+ bgColor: bg,
28852
+ playerSprite: pSprite,
28853
+ tileSprites: tSprites,
28854
+ backgroundImage: bgImg
28855
+ } = propsRef.current;
28856
+ const auth = playerRef.current;
28857
+ const interped = positions.get("player");
28858
+ const px = interped?.x ?? auth.x;
28859
+ const py = interped?.y ?? auth.y;
28860
+ let camX = 0;
28861
+ let camY = 0;
28862
+ if (fc) {
28863
+ camX = Math.max(0, Math.min(px - cw / 2, ww - cw));
28864
+ camY = Math.max(0, Math.min(py - ch / 2 - 50, wh - ch));
28865
+ }
28866
+ const bgImage = bgImg ? loadImage(bgImg) : null;
28867
+ if (bgImage) {
28868
+ ctx.drawImage(bgImage, 0, 0, cw, ch);
28869
+ } else if (bg) {
28870
+ ctx.fillStyle = bg;
28871
+ ctx.fillRect(0, 0, cw, ch);
28780
28872
  } else {
28781
- const color = PLATFORM_COLORS[platType] ?? PLATFORM_COLORS.ground;
28782
- ctx.fillStyle = color;
28783
- ctx.fillRect(px, py, plat.width, plat.height);
28784
- ctx.fillStyle = "rgba(255, 255, 255, 0.15)";
28785
- ctx.fillRect(px, py, plat.width, 3);
28786
- ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
28787
- ctx.fillRect(px, py + plat.height - 2, plat.width, 2);
28788
- if (platType === "hazard") {
28789
- ctx.strokeStyle = "#e74c3c";
28790
- ctx.lineWidth = 2;
28791
- for (let sx = px; sx < px + plat.width; sx += 12) {
28873
+ const grad = ctx.createLinearGradient(0, 0, 0, ch);
28874
+ grad.addColorStop(0, SKY_GRADIENT_TOP);
28875
+ grad.addColorStop(1, SKY_GRADIENT_BOTTOM);
28876
+ ctx.fillStyle = grad;
28877
+ ctx.fillRect(0, 0, cw, ch);
28878
+ }
28879
+ ctx.strokeStyle = GRID_COLOR;
28880
+ ctx.lineWidth = 1;
28881
+ const gridSize = 32;
28882
+ for (let gx = -camX % gridSize; gx < cw; gx += gridSize) {
28883
+ ctx.beginPath();
28884
+ ctx.moveTo(gx, 0);
28885
+ ctx.lineTo(gx, ch);
28886
+ ctx.stroke();
28887
+ }
28888
+ for (let gy = -camY % gridSize; gy < ch; gy += gridSize) {
28889
+ ctx.beginPath();
28890
+ ctx.moveTo(0, gy);
28891
+ ctx.lineTo(cw, gy);
28892
+ ctx.stroke();
28893
+ }
28894
+ for (const plat of plats) {
28895
+ const platX = plat.x - camX;
28896
+ const platY = plat.y - camY;
28897
+ const platType = plat.type ?? "ground";
28898
+ const spriteUrl = tSprites?.[platType];
28899
+ const tileImg = spriteUrl ? loadImage(spriteUrl) : null;
28900
+ if (tileImg) {
28901
+ const tileW = tileImg.naturalWidth;
28902
+ const tileH = tileImg.naturalHeight;
28903
+ const scaleH = plat.height / tileH;
28904
+ const scaledW = tileW * scaleH;
28905
+ for (let tx = 0; tx < plat.width; tx += scaledW) {
28906
+ const drawW = Math.min(scaledW, plat.width - tx);
28907
+ const srcW = drawW / scaleH;
28908
+ ctx.drawImage(tileImg, 0, 0, srcW, tileH, platX + tx, platY, drawW, plat.height);
28909
+ }
28910
+ } else {
28911
+ const color = PLATFORM_COLORS[platType] ?? PLATFORM_COLORS.ground;
28912
+ ctx.fillStyle = color;
28913
+ ctx.fillRect(platX, platY, plat.width, plat.height);
28914
+ ctx.fillStyle = "rgba(255, 255, 255, 0.15)";
28915
+ ctx.fillRect(platX, platY, plat.width, 3);
28916
+ ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
28917
+ ctx.fillRect(platX, platY + plat.height - 2, plat.width, 2);
28918
+ if (platType === "hazard") {
28919
+ ctx.strokeStyle = "#e74c3c";
28920
+ ctx.lineWidth = 2;
28921
+ for (let sx = platX; sx < platX + plat.width; sx += 12) {
28922
+ ctx.beginPath();
28923
+ ctx.moveTo(sx, platY);
28924
+ ctx.lineTo(sx + 6, platY + plat.height);
28925
+ ctx.stroke();
28926
+ }
28927
+ }
28928
+ if (platType === "goal") {
28929
+ ctx.fillStyle = "rgba(241, 196, 15, 0.5)";
28792
28930
  ctx.beginPath();
28793
- ctx.moveTo(sx, py);
28794
- ctx.lineTo(sx + 6, py + plat.height);
28795
- ctx.stroke();
28931
+ ctx.arc(platX + plat.width / 2, platY - 10, 8, 0, Math.PI * 2);
28932
+ ctx.fill();
28796
28933
  }
28797
28934
  }
28798
- if (platType === "goal") {
28799
- ctx.fillStyle = "rgba(241, 196, 15, 0.5)";
28800
- ctx.beginPath();
28801
- ctx.arc(px + plat.width / 2, py - 10, 8, 0, Math.PI * 2);
28802
- ctx.fill();
28803
- }
28804
28935
  }
28805
- }
28806
- const pw = resolvedPlayer.width ?? 24;
28807
- const ph = resolvedPlayer.height ?? 32;
28808
- const ppx = resolvedPlayer.x - camX;
28809
- const ppy = resolvedPlayer.y - camY;
28810
- const facingRight = resolvedPlayer.facingRight ?? true;
28811
- const playerImg = playerSprite ? loadImage(playerSprite) : null;
28812
- if (playerImg) {
28813
- ctx.save();
28814
- if (!facingRight) {
28815
- ctx.translate(ppx + pw, ppy);
28816
- ctx.scale(-1, 1);
28817
- ctx.drawImage(playerImg, 0, 0, pw, ph);
28936
+ const pw = auth.width ?? 24;
28937
+ const ph = auth.height ?? 32;
28938
+ const ppx = px - camX;
28939
+ const ppy = py - camY;
28940
+ const facingRight = auth.facingRight ?? true;
28941
+ const playerImg = pSprite ? loadImage(pSprite) : null;
28942
+ if (playerImg) {
28943
+ ctx.save();
28944
+ if (!facingRight) {
28945
+ ctx.translate(ppx + pw, ppy);
28946
+ ctx.scale(-1, 1);
28947
+ ctx.drawImage(playerImg, 0, 0, pw, ph);
28948
+ } else {
28949
+ ctx.drawImage(playerImg, ppx, ppy, pw, ph);
28950
+ }
28951
+ ctx.restore();
28818
28952
  } else {
28819
- ctx.drawImage(playerImg, ppx, ppy, pw, ph);
28953
+ ctx.fillStyle = PLAYER_COLOR;
28954
+ const radius = Math.min(pw, ph) * 0.25;
28955
+ ctx.beginPath();
28956
+ ctx.moveTo(ppx + radius, ppy);
28957
+ ctx.lineTo(ppx + pw - radius, ppy);
28958
+ ctx.quadraticCurveTo(ppx + pw, ppy, ppx + pw, ppy + radius);
28959
+ ctx.lineTo(ppx + pw, ppy + ph - radius);
28960
+ ctx.quadraticCurveTo(ppx + pw, ppy + ph, ppx + pw - radius, ppy + ph);
28961
+ ctx.lineTo(ppx + radius, ppy + ph);
28962
+ ctx.quadraticCurveTo(ppx, ppy + ph, ppx, ppy + ph - radius);
28963
+ ctx.lineTo(ppx, ppy + radius);
28964
+ ctx.quadraticCurveTo(ppx, ppy, ppx + radius, ppy);
28965
+ ctx.fill();
28966
+ const eyeY = ppy + ph * 0.3;
28967
+ const eyeSize = 3;
28968
+ const eyeOffsetX = facingRight ? pw * 0.55 : pw * 0.2;
28969
+ ctx.fillStyle = PLAYER_EYE_COLOR;
28970
+ ctx.beginPath();
28971
+ ctx.arc(ppx + eyeOffsetX, eyeY, eyeSize, 0, Math.PI * 2);
28972
+ ctx.fill();
28973
+ ctx.beginPath();
28974
+ ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
28975
+ ctx.fill();
28820
28976
  }
28821
- ctx.restore();
28822
- } else {
28823
- ctx.fillStyle = PLAYER_COLOR;
28824
- const radius = Math.min(pw, ph) * 0.25;
28825
- ctx.beginPath();
28826
- ctx.moveTo(ppx + radius, ppy);
28827
- ctx.lineTo(ppx + pw - radius, ppy);
28828
- ctx.quadraticCurveTo(ppx + pw, ppy, ppx + pw, ppy + radius);
28829
- ctx.lineTo(ppx + pw, ppy + ph - radius);
28830
- ctx.quadraticCurveTo(ppx + pw, ppy + ph, ppx + pw - radius, ppy + ph);
28831
- ctx.lineTo(ppx + radius, ppy + ph);
28832
- ctx.quadraticCurveTo(ppx, ppy + ph, ppx, ppy + ph - radius);
28833
- ctx.lineTo(ppx, ppy + radius);
28834
- ctx.quadraticCurveTo(ppx, ppy, ppx + radius, ppy);
28835
- ctx.fill();
28836
- const eyeY = ppy + ph * 0.3;
28837
- const eyeSize = 3;
28838
- const eyeOffsetX = facingRight ? pw * 0.55 : pw * 0.2;
28839
- ctx.fillStyle = PLAYER_EYE_COLOR;
28840
- ctx.beginPath();
28841
- ctx.arc(ppx + eyeOffsetX, eyeY, eyeSize, 0, Math.PI * 2);
28842
- ctx.fill();
28843
- ctx.beginPath();
28844
- ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
28845
- ctx.fill();
28846
- }
28847
- }, [player, platforms, worldWidth, worldHeight, canvasWidth, canvasHeight, followCamera, bgColor, playerSprite, tileSprites, backgroundImage, assetBaseUrl, loadedImages]);
28977
+ };
28978
+ return interp.startLoop(drawFrame);
28979
+ }, [interp.startLoop, loadImage]);
28848
28980
  return /* @__PURE__ */ jsxRuntime.jsx(
28849
28981
  "canvas",
28850
28982
  {
@@ -28862,6 +28994,7 @@ var init_PlatformerCanvas = __esm({
28862
28994
  init_cn();
28863
28995
  init_useEventBus();
28864
28996
  init_verificationRegistry();
28997
+ init_useRenderInterpolation();
28865
28998
  PLATFORM_COLORS = {
28866
28999
  ground: "#4a7c59",
28867
29000
  platform: "#7c6b4a",
@@ -29244,7 +29377,7 @@ var init_MapView = __esm({
29244
29377
  shadowSize: [41, 41]
29245
29378
  });
29246
29379
  L.Marker.prototype.options.icon = defaultIcon;
29247
- const { useEffect: useEffect73, useRef: useRef68, useCallback: useCallback111, useState: useState104 } = React83__namespace.default;
29380
+ const { useEffect: useEffect73, useRef: useRef68, useCallback: useCallback112, useState: useState104 } = React83__namespace.default;
29248
29381
  const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
29249
29382
  const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
29250
29383
  function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -29290,7 +29423,7 @@ var init_MapView = __esm({
29290
29423
  }) {
29291
29424
  const eventBus = useEventBus2();
29292
29425
  const [clickedPosition, setClickedPosition] = useState104(null);
29293
- const handleMapClick = useCallback111((lat, lng) => {
29426
+ const handleMapClick = useCallback112((lat, lng) => {
29294
29427
  if (showClickedPin) {
29295
29428
  setClickedPosition({ lat, lng });
29296
29429
  }
@@ -29299,7 +29432,7 @@ var init_MapView = __esm({
29299
29432
  eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
29300
29433
  }
29301
29434
  }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
29302
- const handleMarkerClick = useCallback111((marker) => {
29435
+ const handleMarkerClick = useCallback112((marker) => {
29303
29436
  onMarkerClick?.(marker);
29304
29437
  if (markerClickEvent) {
29305
29438
  eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -34298,7 +34431,7 @@ var init_RichBlockEditor = __esm({
34298
34431
  "border-b border-border bg-muted/30 px-2 py-2"
34299
34432
  ),
34300
34433
  children: TOOLBAR_ENTRIES.map((entry) => {
34301
- const Icon3 = entry.icon;
34434
+ const Icon2 = entry.icon;
34302
34435
  const entryLabel = t(entry.labelKey);
34303
34436
  return /* @__PURE__ */ jsxRuntime.jsxs(
34304
34437
  Button,
@@ -34310,7 +34443,7 @@ var init_RichBlockEditor = __esm({
34310
34443
  title: entryLabel,
34311
34444
  onClick: () => handleAppend(entry.type),
34312
34445
  children: [
34313
- /* @__PURE__ */ jsxRuntime.jsx(Icon3, { size: 14 }),
34446
+ /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: 14 }),
34314
34447
  /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", variant: "caption", className: "ml-1 hidden text-xs sm:inline", children: entryLabel })
34315
34448
  ]
34316
34449
  },
@@ -45152,11 +45285,13 @@ function SimulationCanvas({
45152
45285
  height = 400,
45153
45286
  running,
45154
45287
  speed = 1,
45288
+ bodies: externalBodies,
45155
45289
  className
45156
45290
  }) {
45157
45291
  const preset = React83.useMemo(() => resolvePreset(presetProp), [presetProp]);
45158
45292
  const canvasRef = React83.useRef(null);
45159
45293
  const bodiesRef = React83.useRef(structuredClone(preset.bodies));
45294
+ const interp = useRenderInterpolation();
45160
45295
  React83.useEffect(() => {
45161
45296
  bodiesRef.current = structuredClone(preset.bodies);
45162
45297
  }, [preset]);
@@ -45254,6 +45389,67 @@ function SimulationCanvas({
45254
45389
  }
45255
45390
  }, [width, height, preset]);
45256
45391
  React83.useEffect(() => {
45392
+ if (!externalBodies) return;
45393
+ interp.onSnapshot(externalBodies.map((b) => ({ id: b.id, x: b.x, y: b.y })));
45394
+ }, [externalBodies]);
45395
+ const presetRef = React83.useRef(preset);
45396
+ presetRef.current = preset;
45397
+ const widthRef = React83.useRef(width);
45398
+ widthRef.current = width;
45399
+ const heightRef = React83.useRef(height);
45400
+ heightRef.current = height;
45401
+ React83.useEffect(() => {
45402
+ if (!externalBodies) return;
45403
+ const drawInterpolated = (positions) => {
45404
+ const canvas = canvasRef.current;
45405
+ if (!canvas) return;
45406
+ const ctx = canvas.getContext("2d");
45407
+ if (!ctx) return;
45408
+ const bodies = bodiesRef.current;
45409
+ const p2 = presetRef.current;
45410
+ const w = widthRef.current;
45411
+ const h = heightRef.current;
45412
+ ctx.clearRect(0, 0, w, h);
45413
+ ctx.fillStyle = p2.backgroundColor ?? "#1a1a2e";
45414
+ ctx.fillRect(0, 0, w, h);
45415
+ if (p2.constraints) {
45416
+ for (const c of p2.constraints) {
45417
+ const a = bodies[c.bodyA];
45418
+ const b = bodies[c.bodyB];
45419
+ if (a && b) {
45420
+ const aPos = positions.get(a.id) ?? a;
45421
+ const bPos = positions.get(b.id) ?? b;
45422
+ ctx.beginPath();
45423
+ ctx.moveTo(aPos.x, aPos.y);
45424
+ ctx.lineTo(bPos.x, bPos.y);
45425
+ ctx.strokeStyle = "#533483";
45426
+ ctx.lineWidth = 1;
45427
+ ctx.setLineDash([4, 4]);
45428
+ ctx.stroke();
45429
+ ctx.setLineDash([]);
45430
+ }
45431
+ }
45432
+ }
45433
+ for (const body of bodies) {
45434
+ const pos = positions.get(body.id) ?? body;
45435
+ ctx.beginPath();
45436
+ ctx.arc(pos.x, pos.y, body.radius, 0, Math.PI * 2);
45437
+ ctx.fillStyle = body.color ?? "#e94560";
45438
+ ctx.fill();
45439
+ if (p2.showVelocity) {
45440
+ ctx.beginPath();
45441
+ ctx.moveTo(pos.x, pos.y);
45442
+ ctx.lineTo(pos.x + body.vx * 0.1, pos.y + body.vy * 0.1);
45443
+ ctx.strokeStyle = "#16213e";
45444
+ ctx.lineWidth = 2;
45445
+ ctx.stroke();
45446
+ }
45447
+ }
45448
+ };
45449
+ return interp.startLoop(drawInterpolated);
45450
+ }, [externalBodies !== void 0, interp.startLoop]);
45451
+ React83.useEffect(() => {
45452
+ if (externalBodies !== void 0) return;
45257
45453
  if (!running) return;
45258
45454
  let raf;
45259
45455
  const loop = () => {
@@ -45263,10 +45459,11 @@ function SimulationCanvas({
45263
45459
  };
45264
45460
  raf = requestAnimationFrame(loop);
45265
45461
  return () => cancelAnimationFrame(raf);
45266
- }, [running, step, draw]);
45462
+ }, [running, step, draw, externalBodies]);
45267
45463
  React83.useEffect(() => {
45464
+ if (externalBodies !== void 0) return;
45268
45465
  draw();
45269
- }, [draw]);
45466
+ }, [draw, externalBodies]);
45270
45467
  React83.useEffect(() => {
45271
45468
  if (typeof window === "undefined") return;
45272
45469
  const canvas = canvasRef.current;
@@ -45292,136 +45489,10 @@ var init_SimulationCanvas = __esm({
45292
45489
  init_atoms2();
45293
45490
  init_verificationRegistry();
45294
45491
  init_presets();
45492
+ init_useRenderInterpolation();
45295
45493
  SimulationCanvas.displayName = "SimulationCanvas";
45296
45494
  }
45297
45495
  });
45298
- function SimulationControls({
45299
- running,
45300
- speed,
45301
- parameters,
45302
- onPlay,
45303
- onPause,
45304
- onStep,
45305
- onReset,
45306
- onSpeedChange,
45307
- onParameterChange,
45308
- className
45309
- }) {
45310
- return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "md", className, children: [
45311
- /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "center", children: [
45312
- running ? /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", variant: "secondary", onClick: onPause, icon: LucideIcons2.Pause, children: "Pause" }) : /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", variant: "primary", onClick: onPlay, icon: LucideIcons2.Play, children: "Play" }),
45313
- /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", variant: "ghost", onClick: onStep, icon: LucideIcons2.SkipForward, disabled: running, children: "Step" }),
45314
- /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", variant: "ghost", onClick: onReset, icon: LucideIcons2.RotateCcw, children: "Reset" })
45315
- ] }),
45316
- /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
45317
- /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", color: "muted", children: [
45318
- "Speed: ",
45319
- speed.toFixed(1),
45320
- "x"
45321
- ] }),
45322
- /* @__PURE__ */ jsxRuntime.jsx(
45323
- "input",
45324
- {
45325
- type: "range",
45326
- min: 0.1,
45327
- max: 5,
45328
- step: 0.1,
45329
- value: speed,
45330
- onChange: (e) => onSpeedChange(parseFloat(e.target.value)),
45331
- className: "w-full"
45332
- }
45333
- )
45334
- ] }),
45335
- Object.entries(parameters).map(([name, param]) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
45336
- /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", color: "muted", children: [
45337
- param.label,
45338
- ": ",
45339
- param.value.toFixed(2)
45340
- ] }),
45341
- /* @__PURE__ */ jsxRuntime.jsx(
45342
- "input",
45343
- {
45344
- type: "range",
45345
- min: param.min,
45346
- max: param.max,
45347
- step: param.step,
45348
- value: param.value,
45349
- onChange: (e) => onParameterChange(name, parseFloat(e.target.value)),
45350
- className: "w-full"
45351
- }
45352
- )
45353
- ] }, name))
45354
- ] });
45355
- }
45356
- var init_SimulationControls = __esm({
45357
- "components/game/organisms/physics-sim/SimulationControls.tsx"() {
45358
- init_atoms2();
45359
- SimulationControls.displayName = "SimulationControls";
45360
- }
45361
- });
45362
- function SimulationGraph({
45363
- label,
45364
- unit,
45365
- data,
45366
- maxPoints = 200,
45367
- width = 300,
45368
- height = 120,
45369
- color = "#e94560",
45370
- className
45371
- }) {
45372
- const canvasRef = React83.useRef(null);
45373
- const visibleData = data.slice(-maxPoints);
45374
- React83.useEffect(() => {
45375
- const canvas = canvasRef.current;
45376
- if (!canvas || visibleData.length < 2) return;
45377
- const ctx = canvas.getContext("2d");
45378
- if (!ctx) return;
45379
- ctx.clearRect(0, 0, width, height);
45380
- ctx.fillStyle = "#0f0f23";
45381
- ctx.fillRect(0, 0, width, height);
45382
- ctx.strokeStyle = "#1a1a3e";
45383
- ctx.lineWidth = 0.5;
45384
- for (let i = 0; i < 5; i++) {
45385
- const y = height / 5 * i;
45386
- ctx.beginPath();
45387
- ctx.moveTo(0, y);
45388
- ctx.lineTo(width, y);
45389
- ctx.stroke();
45390
- }
45391
- let minVal = Infinity;
45392
- let maxVal = -Infinity;
45393
- for (const pt of visibleData) {
45394
- if (pt.value < minVal) minVal = pt.value;
45395
- if (pt.value > maxVal) maxVal = pt.value;
45396
- }
45397
- const range = maxVal - minVal || 1;
45398
- const pad = height * 0.1;
45399
- ctx.beginPath();
45400
- ctx.strokeStyle = color;
45401
- ctx.lineWidth = 2;
45402
- for (let i = 0; i < visibleData.length; i++) {
45403
- const x = i / (maxPoints - 1) * width;
45404
- const y = pad + (maxVal - visibleData[i].value) / range * (height - 2 * pad);
45405
- if (i === 0) ctx.moveTo(x, y);
45406
- else ctx.lineTo(x, y);
45407
- }
45408
- ctx.stroke();
45409
- const last = visibleData[visibleData.length - 1];
45410
- ctx.fillStyle = color;
45411
- ctx.font = "12px monospace";
45412
- ctx.fillText(`${last.value.toFixed(2)} ${unit}`, width - 80, 16);
45413
- }, [visibleData, width, height, color, unit, maxPoints]);
45414
- return /* @__PURE__ */ jsxRuntime.jsx(Card, { padding: "sm", className, children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
45415
- /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", weight: "bold", children: label }),
45416
- /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, width, height, className: "rounded" })
45417
- ] }) });
45418
- }
45419
- var init_SimulationGraph = __esm({
45420
- "components/game/organisms/physics-sim/SimulationGraph.tsx"() {
45421
- init_atoms2();
45422
- SimulationGraph.displayName = "SimulationGraph";
45423
- }
45424
- });
45425
45496
  function SimulatorBoard({
45426
45497
  entity,
45427
45498
  completeEvent = "PUZZLE_COMPLETE",
@@ -45692,7 +45763,7 @@ var init_StatCard = __esm({
45692
45763
  isLoading: externalLoading,
45693
45764
  error: externalError
45694
45765
  }) => {
45695
- const Icon3 = typeof iconProp === "string" ? resolveIcon(iconProp) ?? void 0 : iconProp;
45766
+ const Icon2 = typeof iconProp === "string" ? resolveIcon(iconProp) ?? void 0 : iconProp;
45696
45767
  const labelToUse = propLabel ?? propTitle;
45697
45768
  const eventBus = useEventBus();
45698
45769
  const { t } = hooks.useTranslate();
@@ -45835,7 +45906,7 @@ var init_StatCard = __esm({
45835
45906
  subtitle && !calculatedTrend && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "secondary", children: subtitle })
45836
45907
  ] }),
45837
45908
  /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", align: "end", children: [
45838
- Icon3 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("p-3", iconBg), children: /* @__PURE__ */ jsxRuntime.jsx(Icon3, { className: cn("h-6 w-6", iconColor) }) }),
45909
+ Icon2 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("p-3", iconBg), children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: cn("h-6 w-6", iconColor) }) }),
45839
45910
  sparklineData && sparklineData.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(Sparkline, { data: sparklineData, color: "auto" })
45840
45911
  ] })
45841
45912
  ] }),
@@ -47638,7 +47709,6 @@ var init_component_registry_generated = __esm({
47638
47709
  init_Navigation();
47639
47710
  init_NegotiatorBoard();
47640
47711
  init_NumberStepper();
47641
- init_ObjectRulePanel();
47642
47712
  init_OptionConstraintGroup();
47643
47713
  init_OrbitalVisualization();
47644
47714
  init_Overlay();
@@ -47669,7 +47739,6 @@ var init_component_registry_generated = __esm({
47669
47739
  init_ResourceBar();
47670
47740
  init_ResourceCounter();
47671
47741
  init_RichBlockEditor();
47672
- init_RuleEditor();
47673
47742
  init_RuntimeDebugger2();
47674
47743
  init_ScaledDiagram();
47675
47744
  init_ScoreBoard();
@@ -47689,8 +47758,6 @@ var init_component_registry_generated = __esm({
47689
47758
  init_SignaturePad();
47690
47759
  init_SimpleGrid();
47691
47760
  init_SimulationCanvas();
47692
- init_SimulationControls();
47693
- init_SimulationGraph();
47694
47761
  init_SimulatorBoard();
47695
47762
  init_Skeleton();
47696
47763
  init_SocialProof();
@@ -47708,7 +47775,6 @@ var init_component_registry_generated = __esm({
47708
47775
  init_StateArchitectBoard();
47709
47776
  init_StateIndicator();
47710
47777
  init_StateMachineView();
47711
- init_StateNode();
47712
47778
  init_StatsGrid();
47713
47779
  init_StatsOrganism();
47714
47780
  init_StatusDot();
@@ -47747,8 +47813,6 @@ var init_component_registry_generated = __esm({
47747
47813
  init_Tooltip();
47748
47814
  init_TraitFrame();
47749
47815
  init_TraitSlot();
47750
- init_TraitStateViewer();
47751
- init_TransitionArrow();
47752
47816
  init_TrendIndicator();
47753
47817
  init_TurnIndicator();
47754
47818
  init_TurnPanel();
@@ -47758,7 +47822,6 @@ var init_component_registry_generated = __esm({
47758
47822
  init_UncontrolledBattleBoard();
47759
47823
  init_UnitCommandBar();
47760
47824
  init_UploadDropZone();
47761
- init_VariablePanel();
47762
47825
  init_VersionDiff();
47763
47826
  init_ViolationAlert();
47764
47827
  init_VoteStack();
@@ -47968,7 +48031,6 @@ var init_component_registry_generated = __esm({
47968
48031
  "Navigation": Navigation,
47969
48032
  "NegotiatorBoard": NegotiatorBoard,
47970
48033
  "NumberStepper": NumberStepper,
47971
- "ObjectRulePanel": ObjectRulePanel,
47972
48034
  "OptionConstraintGroup": OptionConstraintGroup,
47973
48035
  "OrbitalVisualization": OrbitalVisualization,
47974
48036
  "Overlay": Overlay,
@@ -47999,7 +48061,6 @@ var init_component_registry_generated = __esm({
47999
48061
  "ResourceBar": ResourceBar,
48000
48062
  "ResourceCounter": ResourceCounter,
48001
48063
  "RichBlockEditor": RichBlockEditor,
48002
- "RuleEditor": RuleEditor,
48003
48064
  "RuntimeDebugger": RuntimeDebugger,
48004
48065
  "ScaledDiagram": ScaledDiagram,
48005
48066
  "ScoreBoard": ScoreBoard,
@@ -48019,8 +48080,6 @@ var init_component_registry_generated = __esm({
48019
48080
  "SignaturePad": SignaturePad,
48020
48081
  "SimpleGrid": SimpleGrid,
48021
48082
  "SimulationCanvas": SimulationCanvas,
48022
- "SimulationControls": SimulationControls,
48023
- "SimulationGraph": SimulationGraph,
48024
48083
  "SimulatorBoard": SimulatorBoard,
48025
48084
  "Skeleton": Skeleton,
48026
48085
  "SocialProof": SocialProof,
@@ -48041,7 +48100,6 @@ var init_component_registry_generated = __esm({
48041
48100
  "StateArchitectBoard": StateArchitectBoard,
48042
48101
  "StateIndicator": StateIndicator,
48043
48102
  "StateMachineView": StateMachineView,
48044
- "StateNode": StateNode2,
48045
48103
  "StatsGrid": StatsGrid,
48046
48104
  "StatsOrganism": StatsOrganism,
48047
48105
  "StatusDot": StatusDot,
@@ -48080,8 +48138,6 @@ var init_component_registry_generated = __esm({
48080
48138
  "Tooltip": Tooltip,
48081
48139
  "TraitFrame": TraitFrame,
48082
48140
  "TraitSlot": TraitSlot,
48083
- "TraitStateViewer": TraitStateViewer,
48084
- "TransitionArrow": TransitionArrow,
48085
48141
  "TrendIndicator": TrendIndicator,
48086
48142
  "TurnIndicator": TurnIndicator,
48087
48143
  "TurnPanel": TurnPanel,
@@ -48092,7 +48148,6 @@ var init_component_registry_generated = __esm({
48092
48148
  "UnitCommandBar": UnitCommandBar,
48093
48149
  "UploadDropZone": UploadDropZone,
48094
48150
  "VStack": VStack,
48095
- "VariablePanel": VariablePanel,
48096
48151
  "VersionDiff": VersionDiff,
48097
48152
  "ViolationAlert": ViolationAlert,
48098
48153
  "VoteStack": VoteStack,