@almadar/ui 5.110.0 → 5.111.0

package/dist/lib/drawable/three/index.js

@@ -1,7 +1,7 @@
-import React6, { forwardRef, useRef, useState, useEffect, useMemo, useImperativeHandle, useCallback, createContext, useContext, Component, useReducer } from 'react';
+import React3, { forwardRef, useRef, useState, useEffect, useMemo, useImperativeHandle, useCallback, createContext, useContext, Component, useReducer } from 'react';
 import { EventBusContext, useTraitScope } from '@almadar/ui/providers';
 import { createLogger } from '@almadar/logger';
-import { Canvas, useThree, useFrame, useLoader } from '@react-three/fiber';
+import { Canvas, useThree, useFrame } from '@react-three/fiber';
 import * as THREE9 from 'three';
 import { Vector3, QuadraticBezierCurve3, MathUtils, Quaternion } from 'three';
 import { Grid, OrbitControls, Billboard, Text, Stars, Sparkles, Html, RoundedBox } from '@react-three/drei';
@@ -505,6 +505,54 @@ function FollowCamera3D({
   });
   return null;
 }
+
+// lib/atlasSlice.ts
+var atlasCache = /* @__PURE__ */ new Map();
+function isTilesheet(a) {
+  return typeof a.tileWidth === "number";
+}
+function getAtlas(url, onReady) {
+  if (atlasCache.has(url)) return atlasCache.get(url) ?? void 0;
+  atlasCache.set(url, void 0);
+  fetch(url).then((r) => r.json()).then((json) => {
+    atlasCache.set(url, json);
+    onReady();
+  }).catch(() => {
+    atlasCache.set(url, null);
+  });
+  return void 0;
+}
+function subRectFor(atlas, sprite) {
+  if (isTilesheet(atlas)) {
+    let col;
+    let row;
+    if (sprite.includes(",")) {
+      const [c, r] = sprite.split(",").map((n) => Number(n.trim()));
+      col = c;
+      row = r;
+    } else {
+      const i = Number(sprite);
+      if (!Number.isFinite(i)) return null;
+      col = i % atlas.columns;
+      row = Math.floor(i / atlas.columns);
+    }
+    if (!Number.isFinite(col) || !Number.isFinite(row) || col < 0 || row < 0 || col >= atlas.columns || row >= atlas.rows) return null;
+    const margin = atlas.margin ?? 0;
+    const spacing = atlas.spacing ?? 0;
+    return {
+      sx: margin + col * (atlas.tileWidth + spacing),
+      sy: margin + row * (atlas.tileHeight + spacing),
+      sw: atlas.tileWidth,
+      sh: atlas.tileHeight
+    };
+  }
+  const st = atlas.subTextures[sprite];
+  if (!st) return null;
+  return { sx: st.x, sy: st.y, sw: st.width, sh: st.height };
+}
+function isAtlasAsset(asset) {
+  return !!asset && typeof asset.atlas === "string" && typeof asset.sprite === "string";
+}
 var log3 = createLogger("almadar:ui:game:model-loader");
 var gltfCache = /* @__PURE__ */ new Map();
 function loadGltfCached(url, assetRoot) {
@@ -706,22 +754,126 @@ function ModelLoader({
     }
   );
 }
+var CrossOriginTextureLoader = class extends THREE9.TextureLoader {
+  constructor() {
+    super();
+    this.crossOrigin = "anonymous";
+  }
+};
+function useBillboardTexture(url) {
+  const [state, setState] = React3.useState({
+    texture: null,
+    error: false
+  });
+  React3.useEffect(() => {
+    let active = true;
+    const loader = new CrossOriginTextureLoader();
+    loader.load(
+      url,
+      (texture) => {
+        if (!active) return;
+        console.log("[SpriteBillboard] texture loaded", url, texture.image?.width, texture.image?.height);
+        texture.colorSpace = THREE9.SRGBColorSpace;
+        setState({ texture, error: false });
+      },
+      void 0,
+      (err) => {
+        if (!active) return;
+        console.error("[SpriteBillboard] texture load error", url, err);
+        setState({ texture: null, error: true });
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [url]);
+  return state;
+}
+function useAtlasFrame(asset) {
+  const [tick, setTick] = React3.useState(0);
+  React3.useEffect(() => {
+    if (!isAtlasAsset(asset)) return;
+    getAtlas(asset.atlas, () => setTick((t) => t + 1));
+  }, [asset, tick]);
+  return React3.useMemo(() => {
+    if (!isAtlasAsset(asset)) return { frame: null, ready: true };
+    const atlas = getAtlas(asset.atlas, () => setTick((t) => t + 1));
+    if (!atlas) {
+      console.log("[SpriteBillboard] atlas not ready", asset.atlas, asset.sprite);
+      return { frame: null, ready: false };
+    }
+    const r = subRectFor(atlas, asset.sprite);
+    console.log("[SpriteBillboard] atlas frame", asset.atlas, asset.sprite, r);
+    if (!r) return { frame: null, ready: true };
+    return { frame: { x: r.sx, y: r.sy, w: r.sw, h: r.sh }, ready: true };
+  }, [asset, tick]);
+}
 function SpriteBillboard({ node, world }) {
-  const texture = useLoader(THREE9.TextureLoader, node.asset.url);
-  const img = texture.image;
-  const imgW = img?.width || 1;
-  const imgH = img?.height || 1;
-  if (node.frame) {
-    texture.repeat.set(node.frame.w / imgW, node.frame.h / imgH);
-    texture.offset.set(node.frame.x / imgW, 1 - (node.frame.y + node.frame.h) / imgH);
-    texture.magFilter = texture.minFilter = THREE9.NearestFilter;
-    texture.needsUpdate = true;
+  const { texture, error: textureError } = useBillboardTexture(node.asset.url);
+  const { frame: atlasFrame, ready: atlasReady } = useAtlasFrame(node.asset);
+  const frame = node.frame ?? atlasFrame;
+  const anchor = node.anchor ?? "top-left";
+  console.log("[SpriteBillboard] render", node.asset.url, anchor, frame, "texture?", !!texture, "atlasReady?", atlasReady);
+  const size = React3.useMemo(() => {
+    const img = texture?.image;
+    const imgW = img?.width || 1;
+    const imgH = img?.height || 1;
+    const aspect = frame ? frame.w / frame.h : imgW / imgH;
+    if (anchor === "top-left") {
+      const width2 = node.width ?? 1;
+      const height2 = node.height ?? 1;
+      return { width: width2, height: height2, imgW, imgH };
+    }
+    const height = node.height ?? 1;
+    const width = node.width ?? height * aspect;
+    return { width, height, imgW, imgH };
+  }, [texture, frame, node.height, node.width, anchor]);
+  if (!texture || !atlasReady) {
+    if (anchor === "top-left") {
+      return /* @__PURE__ */ jsx("group", { position: [world[0] + size.width / 2, 0.02, world[2] + size.height / 2], children: /* @__PURE__ */ jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], children: [
+        /* @__PURE__ */ jsx("planeGeometry", { args: [size.width, size.height] }),
+        /* @__PURE__ */ jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE9.DoubleSide })
+      ] }) });
+    }
+    return /* @__PURE__ */ jsx("group", { position: [world[0], world[1] + size.height / 2, world[2]], children: /* @__PURE__ */ jsxs("mesh", { children: [
+      /* @__PURE__ */ jsx("planeGeometry", { args: [size.width, size.height] }),
+      /* @__PURE__ */ jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE9.DoubleSide })
+    ] }) });
+  }
+  const groundGeometry = React3.useMemo(() => {
+    if (anchor !== "top-left" || !texture || !atlasReady) return null;
+    const g = new THREE9.PlaneGeometry(size.width, size.height);
+    g.rotateX(-Math.PI / 2);
+    if (frame) {
+      const u0 = frame.x / size.imgW;
+      const v0 = 1 - (frame.y + frame.h) / size.imgH;
+      const u1 = u0 + frame.w / size.imgW;
+      const v1 = v0 + frame.h / size.imgH;
+      const uvs = new Float32Array([u0, v1, u1, v1, u0, v0, u1, v0]);
+      g.setAttribute("uv", new THREE9.BufferAttribute(uvs, 2));
+    }
+    return g;
+  }, [anchor, texture, atlasReady, size.width, size.height, size.imgW, size.imgH, frame]);
+  texture.magFilter = texture.minFilter = THREE9.NearestFilter;
+  texture.needsUpdate = true;
+  if (anchor === "top-left") {
+    return /* @__PURE__ */ jsx("group", { position: [world[0] + size.width / 2, 0.01, world[2] + size.height / 2], children: /* @__PURE__ */ jsx("mesh", { geometry: groundGeometry ?? void 0, children: /* @__PURE__ */ jsx(
+      "meshBasicMaterial",
+      {
+        map: texture,
+        transparent: true,
+        alphaTest: 0.1,
+        side: THREE9.DoubleSide,
+        opacity: node.opacity ?? 1
+      }
+    ) }) });
+  }
+  if (frame) {
+    texture.repeat.set(frame.w / size.imgW, frame.h / size.imgH);
+    texture.offset.set(frame.x / size.imgW, 1 - (frame.y + frame.h) / size.imgH);
   }
-  const aspect = node.frame ? node.frame.w / node.frame.h : imgW / imgH;
-  const height = node.height ?? 1;
-  const width = node.width ?? height * aspect;
-  return /* @__PURE__ */ jsx(Billboard, { position: [world[0], world[1] + height / 2, world[2]], children: /* @__PURE__ */ jsxs("mesh", { children: [
-    /* @__PURE__ */ jsx("planeGeometry", { args: [width, height] }),
+  return /* @__PURE__ */ jsx(Billboard, { position: [world[0], world[1] + size.height / 2, world[2]], children: /* @__PURE__ */ jsxs("mesh", { children: [
+    /* @__PURE__ */ jsx("planeGeometry", { args: [size.width, size.height] }),
     /* @__PURE__ */ jsx(
       "meshBasicMaterial",
       {
@@ -2508,7 +2660,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React6.forwardRef(
+var Box = React3.forwardRef(
   ({
     padding,
     paddingX,
@@ -2573,7 +2725,7 @@ var Box = React6.forwardRef(
       onPointerDown?.(e);
     }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
     const isClickable = action || onClick;
-    return React6.createElement(
+    return React3.createElement(
       Component2,
       {
         ref,
@@ -2694,7 +2846,7 @@ var Typography = ({
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component2 = as || defaultElements[variant];
-  return React6.createElement(
+  return React3.createElement(
     Component2,
     {
       id,
@@ -2767,7 +2919,7 @@ var Stack = ({
   };
   const isHorizontal = direction === "horizontal";
   const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-  return React6.createElement(
+  return React3.createElement(
     Component2,
     {
       className: cn(
@@ -5062,7 +5214,7 @@ var Avl3DViewer = ({
   const handleTraitClick = useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const [highlightedTrait, setHighlightedTrait] = React6.useState(null);
+  const [highlightedTrait, setHighlightedTrait] = React3.useState(null);
   const handleTransitionClick = useCallback((index) => {
     dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: { x: 0, y: 0 } });
   }, []);
@@ -5149,7 +5301,7 @@ var Avl3DViewer = ({
             gap: "xs",
             align: "center",
             className: "absolute top-2 left-2 z-10 bg-surface/80 backdrop-blur rounded-md px-3 py-1.5",
-            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React3.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
               i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsx(
                 Box,

package/dist/lib/index.cjs

@@ -737,6 +737,13 @@ function bindCanvasCapture(captureFn) {
     window.__orbitalVerification.captureFrame = captureFn;
   }
 }
+function bindLastDrawables(getDrawables) {
+  if (typeof window === "undefined") return;
+  exposeOnWindow();
+  if (window.__orbitalVerification) {
+    window.__orbitalVerification.getLastDrawables = getDrawables;
+  }
+}
 function updateAssetStatus(url, status) {
   if (typeof window === "undefined") return;
   exposeOnWindow();
@@ -1818,6 +1825,7 @@ exports.apiClient = apiClient;
 exports.arrowheadPath = arrowheadPath;
 exports.bindCanvasCapture = bindCanvasCapture;
 exports.bindEventBus = bindEventBus;
+exports.bindLastDrawables = bindLastDrawables;
 exports.bindTraitStateGetter = bindTraitStateGetter;
 exports.brainIconPath = brainIconPath;
 exports.clearDebugEvents = clearDebugEvents;

package/dist/lib/index.js

@@ -735,6 +735,13 @@ function bindCanvasCapture(captureFn) {
     window.__orbitalVerification.captureFrame = captureFn;
   }
 }
+function bindLastDrawables(getDrawables) {
+  if (typeof window === "undefined") return;
+  exposeOnWindow();
+  if (window.__orbitalVerification) {
+    window.__orbitalVerification.getLastDrawables = getDrawables;
+  }
+}
 function updateAssetStatus(url, status) {
   if (typeof window === "undefined") return;
   exposeOnWindow();
@@ -1809,4 +1816,4 @@ var JAZARI_COLORS = {
   darkBg: "#1a1a2e"
 };
 
-export { ApiError, DEFAULT_CONFIG, JAZARI_COLORS, apiClient, arrowheadPath, bindCanvasCapture, bindEventBus, bindTraitStateGetter, brainIconPath, clearDebugEvents, clearEntityProvider, clearGuardHistory, clearTicks, clearTraits, clearVerification, cn, computeJazariLayout, debug, debugCollision, debugError, debugGameState, debugGroup, debugGroupEnd, debugInput, debugPhysics, debugTable, debugTime, debugTimeEnd, debugWarn, eightPointedStarPath, extractOutputsFromTransitions, extractStateMachine, formatGuard, formatNestedFieldLabel, gearTeethPath, getAllChecks, getAllTicks, getAllTraits, getBridgeHealth, getDebugEvents, getEffectSummary, getEntitiesByType, getEntityById, getEntitySnapshot, getEventsBySource, getEventsByType, getGuardEvaluationsForTrait, getGuardHistory, getNestedValue, getRecentEvents, getRecentGuardEvaluations, getSnapshot, getSummary, getTick, getTrait, getTraitSnapshots, getTransitions, getTransitionsForTrait, initDebugShortcut, isDebugEnabled, lockIconPath, logDebugEvent, logEffectExecuted, logError, logEventFired, logInfo, logStateChange, logWarning, onDebugToggle, parseContentSegments, parseMarkdownWithCodeBlocks, pipeIconPath, recordGuardEvaluation, recordServerResponse, recordTransition, registerCheck, registerTick, registerTrait, registerTraitSnapshot, renderStateMachineToDomData, renderStateMachineToSvg, setDebugEnabled, setEntityProvider, setTickActive, subscribeToDebugEvents, subscribeToGuardChanges, subscribeToTickChanges, subscribeToTraitChanges, subscribeToVerification, toggleDebug, unregisterTick, unregisterTrait, updateAssetStatus, updateBridgeHealth, updateCheck, updateGuardResult, updateTickExecution, updateTraitState, waitForTransition };
+export { ApiError, DEFAULT_CONFIG, JAZARI_COLORS, apiClient, arrowheadPath, bindCanvasCapture, bindEventBus, bindLastDrawables, bindTraitStateGetter, brainIconPath, clearDebugEvents, clearEntityProvider, clearGuardHistory, clearTicks, clearTraits, clearVerification, cn, computeJazariLayout, debug, debugCollision, debugError, debugGameState, debugGroup, debugGroupEnd, debugInput, debugPhysics, debugTable, debugTime, debugTimeEnd, debugWarn, eightPointedStarPath, extractOutputsFromTransitions, extractStateMachine, formatGuard, formatNestedFieldLabel, gearTeethPath, getAllChecks, getAllTicks, getAllTraits, getBridgeHealth, getDebugEvents, getEffectSummary, getEntitiesByType, getEntityById, getEntitySnapshot, getEventsBySource, getEventsByType, getGuardEvaluationsForTrait, getGuardHistory, getNestedValue, getRecentEvents, getRecentGuardEvaluations, getSnapshot, getSummary, getTick, getTrait, getTraitSnapshots, getTransitions, getTransitionsForTrait, initDebugShortcut, isDebugEnabled, lockIconPath, logDebugEvent, logEffectExecuted, logError, logEventFired, logInfo, logStateChange, logWarning, onDebugToggle, parseContentSegments, parseMarkdownWithCodeBlocks, pipeIconPath, recordGuardEvaluation, recordServerResponse, recordTransition, registerCheck, registerTick, registerTrait, registerTraitSnapshot, renderStateMachineToDomData, renderStateMachineToSvg, setDebugEnabled, setEntityProvider, setTickActive, subscribeToDebugEvents, subscribeToGuardChanges, subscribeToTickChanges, subscribeToTraitChanges, subscribeToVerification, toggleDebug, unregisterTick, unregisterTrait, updateAssetStatus, updateBridgeHealth, updateCheck, updateGuardResult, updateTickExecution, updateTraitState, waitForTransition };

package/dist/lib/verificationRegistry.d.ts

@@ -83,6 +83,12 @@ export declare function registerTraitSnapshot(traitName: string, getter: TraitSn
  * so the verifier can snapshot canvas content at checkpoints.
  */
 export declare function bindCanvasCapture(captureFn: () => string | null): void;
+/**
+ * Bind a reader for the last drawables list received by a canvas host.
+ * Lets verification scripts inspect exactly which neutral descriptors reached
+ * the painter without re-deriving them from state.
+ */
+export declare function bindLastDrawables(getDrawables: () => unknown[] | null): void;
 /**
  * Update asset load status for canvas verification.
  * Game organisms call this when images load or fail.

package/dist/providers/index.cjs

@@ -7407,6 +7407,13 @@ function bindCanvasCapture(captureFn) {
     window.__orbitalVerification.captureFrame = captureFn;
   }
 }
+function bindLastDrawables(getDrawables) {
+  if (typeof window === "undefined") return;
+  exposeOnWindow();
+  if (window.__orbitalVerification) {
+    window.__orbitalVerification.getLastDrawables = getDrawables;
+  }
+}
 function updateAssetStatus(url, status) {
   if (typeof window === "undefined") return;
   exposeOnWindow();
@@ -9251,8 +9258,9 @@ var init_DrawSprite = __esm({
         if (!r) return;
         src = { x: r.sx, y: r.sy, w: r.sw, h: r.sh };
       }
-      const w = node.width ?? (src ? src.w : tex.width);
-      const h = node.height ?? (src ? src.h : tex.height);
+      const tw = dctx.projector.tileWidth;
+      const w = node.width !== void 0 ? node.width * tw : src ? src.w : tex.width;
+      const h = node.height !== void 0 ? node.height * tw : src ? src.h : tex.height;
       const anchor = node.anchor ?? "top-left";
       const p = dctx.projector.anchorPoint(node.position, anchor);
       const dx = anchor === "top-left" ? p.x : p.x - w / 2;
@@ -9299,27 +9307,30 @@ var init_DrawShape = __esm({
         }
         case "rect": {
           const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "top-left");
-          const x = p.x + (node.offsetX ?? 0);
-          const y = p.y + (node.offsetY ?? 0);
-          const w = node.width ?? 0;
-          const h = node.height ?? 0;
+          const tw = dctx.projector.tileWidth;
+          const x = p.x + (node.offsetX ?? 0) * tw;
+          const y = p.y + (node.offsetY ?? 0) * tw;
+          const w = (node.width ?? 0) * tw;
+          const h = (node.height ?? 0) * tw;
           if (node.fill) painter.fillRect(x, y, w, h, node.fill);
           if (node.stroke) painter.strokeRect(x, y, w, h, node.stroke, node.strokeWidth ?? 1);
           break;
         }
         case "ellipse": {
           const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "ground");
-          const cx = p.x + (node.offsetX ?? 0);
-          const cy = p.y + (node.offsetY ?? 0);
-          const rx = node.radiusX ?? 0;
-          const ry = node.radiusY ?? rx;
+          const tw = dctx.projector.tileWidth;
+          const cx = p.x + (node.offsetX ?? 0) * tw;
+          const cy = p.y + (node.offsetY ?? 0) * tw;
+          const rx = (node.radiusX ?? 0) * tw;
+          const ry = (node.radiusY ?? rx) * tw;
           if (node.fill) painter.fillEllipse(cx, cy, rx, ry, node.fill);
           if (node.stroke) painter.strokeEllipse(cx, cy, rx, ry, node.stroke, node.strokeWidth ?? 1);
           break;
         }
         case "poly": {
           const base = dctx.projector.project(node.position);
-          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x, y: base.y + pt.y }));
+          const tw = dctx.projector.tileWidth;
+          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x * tw, y: base.y + pt.y * tw }));
           if (node.fill) painter.fillPoly(pts, node.fill);
           if (node.stroke) painter.strokePoly(pts, node.stroke, node.strokeWidth ?? 1, true);
           break;
@@ -9550,10 +9561,12 @@ function Canvas2D({
     const canvas = canvasRef.current;
     if (!canvas) return;
     bindCanvasCapture(() => canvas.toDataURL("image/png"));
+    bindLastDrawables(() => drawables ?? null);
     return () => {
       bindCanvasCapture(() => null);
+      bindLastDrawables(() => null);
     };
-  }, []);
+  }, [drawables]);
   const enableCamera = camera === "pan-zoom";
   const {
     cameraRef,
@@ -9568,7 +9581,7 @@ function Canvas2D({
     screenToWorld,
     lerpToTarget
   } = useCamera();
-  const [, setAtlasVersion] = React83.useState(0);
+  const [atlasVersion, setAtlasVersion] = React83.useState(0);
   const bumpAtlas = React83.useCallback(() => setAtlasVersion((v) => v + 1), []);
   const miniMapTiles = React83.useMemo(() => {
     if (!showMinimap) return [];
@@ -9636,6 +9649,9 @@ function Canvas2D({
   React83.useEffect(() => {
     draw();
   }, [_imagePendingCount, draw]);
+  React83.useEffect(() => {
+    draw();
+  }, [atlasVersion, draw]);
   React83.useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     let running = true;

package/dist/providers/index.js

@@ -7362,6 +7362,13 @@ function bindCanvasCapture(captureFn) {
     window.__orbitalVerification.captureFrame = captureFn;
   }
 }
+function bindLastDrawables(getDrawables) {
+  if (typeof window === "undefined") return;
+  exposeOnWindow();
+  if (window.__orbitalVerification) {
+    window.__orbitalVerification.getLastDrawables = getDrawables;
+  }
+}
 function updateAssetStatus(url, status) {
   if (typeof window === "undefined") return;
   exposeOnWindow();
@@ -9206,8 +9213,9 @@ var init_DrawSprite = __esm({
         if (!r) return;
         src = { x: r.sx, y: r.sy, w: r.sw, h: r.sh };
       }
-      const w = node.width ?? (src ? src.w : tex.width);
-      const h = node.height ?? (src ? src.h : tex.height);
+      const tw = dctx.projector.tileWidth;
+      const w = node.width !== void 0 ? node.width * tw : src ? src.w : tex.width;
+      const h = node.height !== void 0 ? node.height * tw : src ? src.h : tex.height;
       const anchor = node.anchor ?? "top-left";
       const p = dctx.projector.anchorPoint(node.position, anchor);
       const dx = anchor === "top-left" ? p.x : p.x - w / 2;
@@ -9254,27 +9262,30 @@ var init_DrawShape = __esm({
         }
         case "rect": {
           const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "top-left");
-          const x = p.x + (node.offsetX ?? 0);
-          const y = p.y + (node.offsetY ?? 0);
-          const w = node.width ?? 0;
-          const h = node.height ?? 0;
+          const tw = dctx.projector.tileWidth;
+          const x = p.x + (node.offsetX ?? 0) * tw;
+          const y = p.y + (node.offsetY ?? 0) * tw;
+          const w = (node.width ?? 0) * tw;
+          const h = (node.height ?? 0) * tw;
           if (node.fill) painter.fillRect(x, y, w, h, node.fill);
           if (node.stroke) painter.strokeRect(x, y, w, h, node.stroke, node.strokeWidth ?? 1);
           break;
         }
         case "ellipse": {
           const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "ground");
-          const cx = p.x + (node.offsetX ?? 0);
-          const cy = p.y + (node.offsetY ?? 0);
-          const rx = node.radiusX ?? 0;
-          const ry = node.radiusY ?? rx;
+          const tw = dctx.projector.tileWidth;
+          const cx = p.x + (node.offsetX ?? 0) * tw;
+          const cy = p.y + (node.offsetY ?? 0) * tw;
+          const rx = (node.radiusX ?? 0) * tw;
+          const ry = (node.radiusY ?? rx) * tw;
           if (node.fill) painter.fillEllipse(cx, cy, rx, ry, node.fill);
           if (node.stroke) painter.strokeEllipse(cx, cy, rx, ry, node.stroke, node.strokeWidth ?? 1);
           break;
         }
         case "poly": {
           const base = dctx.projector.project(node.position);
-          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x, y: base.y + pt.y }));
+          const tw = dctx.projector.tileWidth;
+          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x * tw, y: base.y + pt.y * tw }));
           if (node.fill) painter.fillPoly(pts, node.fill);
           if (node.stroke) painter.strokePoly(pts, node.stroke, node.strokeWidth ?? 1, true);
           break;
@@ -9505,10 +9516,12 @@ function Canvas2D({
     const canvas = canvasRef.current;
     if (!canvas) return;
     bindCanvasCapture(() => canvas.toDataURL("image/png"));
+    bindLastDrawables(() => drawables ?? null);
     return () => {
       bindCanvasCapture(() => null);
+      bindLastDrawables(() => null);
     };
-  }, []);
+  }, [drawables]);
   const enableCamera = camera === "pan-zoom";
   const {
     cameraRef,
@@ -9523,7 +9536,7 @@ function Canvas2D({
     screenToWorld,
     lerpToTarget
   } = useCamera();
-  const [, setAtlasVersion] = useState(0);
+  const [atlasVersion, setAtlasVersion] = useState(0);
   const bumpAtlas = useCallback(() => setAtlasVersion((v) => v + 1), []);
   const miniMapTiles = useMemo(() => {
     if (!showMinimap) return [];
@@ -9591,6 +9604,9 @@ function Canvas2D({
   useEffect(() => {
     draw();
   }, [_imagePendingCount, draw]);
+  useEffect(() => {
+    draw();
+  }, [atlasVersion, draw]);
   useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     let running = true;

package/dist/runtime/index.cjs

@@ -7861,6 +7861,13 @@ function bindCanvasCapture(captureFn) {
     window.__orbitalVerification.captureFrame = captureFn;
   }
 }
+function bindLastDrawables(getDrawables) {
+  if (typeof window === "undefined") return;
+  exposeOnWindow();
+  if (window.__orbitalVerification) {
+    window.__orbitalVerification.getLastDrawables = getDrawables;
+  }
+}
 function updateAssetStatus(url, status) {
   if (typeof window === "undefined") return;
   exposeOnWindow();
@@ -9598,8 +9605,9 @@ var init_DrawSprite = __esm({
         if (!r) return;
         src = { x: r.sx, y: r.sy, w: r.sw, h: r.sh };
       }
-      const w = node.width ?? (src ? src.w : tex.width);
-      const h = node.height ?? (src ? src.h : tex.height);
+      const tw = dctx.projector.tileWidth;
+      const w = node.width !== void 0 ? node.width * tw : src ? src.w : tex.width;
+      const h = node.height !== void 0 ? node.height * tw : src ? src.h : tex.height;
       const anchor = node.anchor ?? "top-left";
       const p = dctx.projector.anchorPoint(node.position, anchor);
       const dx = anchor === "top-left" ? p.x : p.x - w / 2;
@@ -9646,27 +9654,30 @@ var init_DrawShape = __esm({
         }
         case "rect": {
           const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "top-left");
-          const x = p.x + (node.offsetX ?? 0);
-          const y = p.y + (node.offsetY ?? 0);
-          const w = node.width ?? 0;
-          const h = node.height ?? 0;
+          const tw = dctx.projector.tileWidth;
+          const x = p.x + (node.offsetX ?? 0) * tw;
+          const y = p.y + (node.offsetY ?? 0) * tw;
+          const w = (node.width ?? 0) * tw;
+          const h = (node.height ?? 0) * tw;
           if (node.fill) painter.fillRect(x, y, w, h, node.fill);
           if (node.stroke) painter.strokeRect(x, y, w, h, node.stroke, node.strokeWidth ?? 1);
           break;
         }
         case "ellipse": {
           const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "ground");
-          const cx = p.x + (node.offsetX ?? 0);
-          const cy = p.y + (node.offsetY ?? 0);
-          const rx = node.radiusX ?? 0;
-          const ry = node.radiusY ?? rx;
+          const tw = dctx.projector.tileWidth;
+          const cx = p.x + (node.offsetX ?? 0) * tw;
+          const cy = p.y + (node.offsetY ?? 0) * tw;
+          const rx = (node.radiusX ?? 0) * tw;
+          const ry = (node.radiusY ?? rx) * tw;
           if (node.fill) painter.fillEllipse(cx, cy, rx, ry, node.fill);
           if (node.stroke) painter.strokeEllipse(cx, cy, rx, ry, node.stroke, node.strokeWidth ?? 1);
           break;
         }
         case "poly": {
           const base = dctx.projector.project(node.position);
-          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x, y: base.y + pt.y }));
+          const tw = dctx.projector.tileWidth;
+          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x * tw, y: base.y + pt.y * tw }));
           if (node.fill) painter.fillPoly(pts, node.fill);
           if (node.stroke) painter.strokePoly(pts, node.stroke, node.strokeWidth ?? 1, true);
           break;
@@ -9897,10 +9908,12 @@ function Canvas2D({
     const canvas = canvasRef.current;
     if (!canvas) return;
     bindCanvasCapture(() => canvas.toDataURL("image/png"));
+    bindLastDrawables(() => drawables ?? null);
     return () => {
       bindCanvasCapture(() => null);
+      bindLastDrawables(() => null);
     };
-  }, []);
+  }, [drawables]);
   const enableCamera = camera === "pan-zoom";
   const {
     cameraRef,
@@ -9915,7 +9928,7 @@ function Canvas2D({
     screenToWorld,
     lerpToTarget
   } = useCamera();
-  const [, setAtlasVersion] = React81.useState(0);
+  const [atlasVersion, setAtlasVersion] = React81.useState(0);
   const bumpAtlas = React81.useCallback(() => setAtlasVersion((v) => v + 1), []);
   const miniMapTiles = React81.useMemo(() => {
     if (!showMinimap) return [];
@@ -9983,6 +9996,9 @@ function Canvas2D({
   React81.useEffect(() => {
     draw();
   }, [_imagePendingCount, draw]);
+  React81.useEffect(() => {
+    draw();
+  }, [atlasVersion, draw]);
   React81.useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     let running = true;