@almadar/ui 5.112.0 → 5.114.0

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

@@ -164,6 +164,11 @@ function useEmitEvent() {
   );
 }
 
+// lib/drawable/contract.ts
+function isValidScenePos(pos) {
+  return Number.isFinite(pos?.x) && Number.isFinite(pos?.y);
+}
+
 // lib/drawable/hitTest.ts
 function collectDrawnItems(nodes) {
   const out = [];
@@ -172,12 +177,14 @@ function collectDrawnItems(nodes) {
       case "draw-sprite":
       case "draw-shape":
       case "draw-text":
-        out.push({ pos: n.position, id: n.id });
+        if (isValidScenePos(n.position)) out.push({ pos: n.position, id: n.id });
         break;
       case "draw-sprite-layer":
       case "draw-shape-layer":
       case "draw-text-layer":
-        for (const it of n.items) out.push({ pos: it.position, id: it.id });
+        for (const it of n.items) {
+          if (isValidScenePos(it.position)) out.push({ pos: it.position, id: it.id });
+        }
         break;
     }
   }
@@ -828,7 +835,7 @@ function useAtlasFrame(asset) {
     return { frame: { x: r.sx, y: r.sy, w: r.sw, h: r.sh }, ready: true };
   }, [asset, tick]);
 }
-function SpriteBillboard({ node, world }) {
+function SpriteBillboard({ node, world, cellSize = 1 }) {
   const { texture, error: textureError } = useBillboardTexture(node.asset.url);
   const { frame: atlasFrame, ready: atlasReady } = useAtlasFrame(node.asset);
   const frame = node.frame ?? atlasFrame;
@@ -839,14 +846,14 @@ function SpriteBillboard({ node, world }) {
     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;
+      const width2 = (node.width ?? 1) * cellSize;
+      const height2 = (node.height ?? 1) * cellSize;
       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]);
+    return { width: width * cellSize, height: height * cellSize, imgW, imgH };
+  }, [texture, frame, node.height, node.width, anchor, cellSize]);
   const groundGeometry = React3__default.default.useMemo(() => {
     if (anchor !== "top-left" || !texture || !atlasReady) return null;
     const g = new THREE9__namespace.PlaneGeometry(size.width, size.height);
@@ -898,31 +905,39 @@ function SpriteBillboard({ node, world }) {
   ] }) });
 }
 function Sprite3D({ node, projector }) {
-  if (node.asset.dimension === "3d" && node.asset.url) {
+  const asset = node.asset;
+  if (!asset?.url || !isValidScenePos(node.position)) return null;
+  if (asset.dimension === "3d") {
+    const scale = node.width === void 0 ? 1 : node.height === void 0 ? node.width * projector.cellSize : [
+      node.width * projector.cellSize,
+      node.height * projector.cellSize,
+      node.width * projector.cellSize
+    ];
     return /* @__PURE__ */ jsxRuntime.jsx("group", { position: projector.toWorld(node.position), children: /* @__PURE__ */ jsxRuntime.jsx(
       ModelLoader,
       {
-        url: node.asset.url,
-        scale: node.width ?? projector.cellSize,
+        url: asset.url,
+        scale,
         rotation: [0, node.rotation ?? 0, 0],
+        animation: node.animation,
         fallbackGeometry: "box",
         castShadow: true,
         receiveShadow: true
       }
     ) });
   }
-  if (!node.asset.url) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(SpriteBillboard, { node, world: projector.toWorld(node.position) });
+  return /* @__PURE__ */ jsxRuntime.jsx(SpriteBillboard, { node, world: projector.toWorld(node.position), cellSize: projector.cellSize });
 }
 function Shape3D({ node, projector }) {
+  if (!isValidScenePos(node.position)) return null;
   const world = projector.toWorld(node.position);
   const color = node.fill ?? node.stroke ?? "#ffffff";
   let geometry;
   switch (node.shape) {
     case "cell":
     case "rect": {
-      const w = node.shape === "cell" ? projector.cellSize * 0.95 : node.width ?? projector.cellSize;
-      const h = node.shape === "cell" ? projector.cellSize * 0.95 : node.height ?? projector.cellSize;
+      const w = node.shape === "cell" ? projector.cellSize * 0.95 : (node.width ?? 1) * projector.cellSize;
+      const h = node.shape === "cell" ? projector.cellSize * 0.95 : (node.height ?? 1) * projector.cellSize;
       geometry = /* @__PURE__ */ jsxRuntime.jsx("planeGeometry", { args: [w, h] });
       break;
     }
@@ -951,6 +966,7 @@ function Shape3D({ node, projector }) {
   ] });
 }
 function Text3D({ node, projector }) {
+  if (!isValidScenePos(node.position)) return null;
   const world = projector.toWorld(node.position);
   return /* @__PURE__ */ jsxRuntime.jsx(drei.Billboard, { position: [world[0], world[1] + 1.2, world[2]], children: /* @__PURE__ */ jsxRuntime.jsx(
     drei.Text,
@@ -1003,10 +1019,7 @@ function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 var DEFAULT_GRID_CONFIG = {
-  cellSize: 1,
-  offsetX: 0,
-  offsetZ: 0
-};
+  cellSize: 1};
 var Canvas3DHost = React3.forwardRef(
   ({
     cameraMode = "isometric",
@@ -1030,6 +1043,7 @@ var Canvas3DHost = React3.forwardRef(
     loadingMessage = "Loading 3D Scene...",
     keyMap,
     keyUpMap,
+    pixelsPerUnit,
     children,
     drawables
   }, ref) => {
@@ -1090,21 +1104,22 @@ var Canvas3DHost = React3.forwardRef(
       }
       return { minX, maxX, minZ, maxZ };
     }, [scenePositions]);
+    const cellSize = pixelsPerUnit !== void 0 && pixelsPerUnit > 0 ? 1 / pixelsPerUnit : DEFAULT_GRID_CONFIG.cellSize;
     const cameraTarget = React3.useMemo(
       () => [
-        (gridBounds.minX + gridBounds.maxX) / 2,
+        (gridBounds.maxX - gridBounds.minX) / 2 * cellSize,
         0,
-        (gridBounds.minZ + gridBounds.maxZ) / 2
+        (gridBounds.maxZ - gridBounds.minZ) / 2 * cellSize
       ],
-      [gridBounds]
+      [gridBounds, cellSize]
     );
     const gridConfig = React3.useMemo(
       () => ({
-        ...DEFAULT_GRID_CONFIG,
+        cellSize,
         offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
         offsetZ: -(gridBounds.maxZ - gridBounds.minZ) / 2
       }),
-      [gridBounds]
+      [gridBounds, cellSize]
     );
     const drawableProjector = React3.useMemo(
       () => create3DProjector({
@@ -1149,13 +1164,13 @@ var Canvas3DHost = React3.forwardRef(
     }));
     const cameraConfig = React3.useMemo(() => {
       const size = Math.max(
-        gridBounds.maxX - gridBounds.minX,
-        gridBounds.maxZ - gridBounds.minZ,
+        (gridBounds.maxX - gridBounds.minX) * cellSize,
+        (gridBounds.maxZ - gridBounds.minZ) * cellSize,
         4
         // minimum framing distance so a tiny board isn't zoomed in
       );
-      const cx = (gridBounds.minX + gridBounds.maxX) / 2;
-      const cz = (gridBounds.minZ + gridBounds.maxZ) / 2;
+      const cx = cameraTarget[0];
+      const cz = cameraTarget[2];
       const d = size * 1;
       switch (cameraMode) {
         case "isometric":
@@ -1168,13 +1183,13 @@ var Canvas3DHost = React3.forwardRef(
         default:
           return { position: [cx + d, d, cz + d], fov: 45 };
       }
-    }, [cameraMode, gridBounds]);
+    }, [cameraMode, gridBounds, cellSize, cameraTarget]);
     const followWorld = React3.useMemo(() => {
       if (followTarget) return drawableProjector.toWorld(followTarget);
       return cameraTarget;
     }, [followTarget, drawableProjector, cameraTarget]);
     const followOffset = React3.useMemo(
-      () => cameraMode === "chase" ? [0, 4, -7] : [5, 7, 5],
+      () => cameraMode === "chase" ? [0, 4, -7] : [0, 12, 14],
       [cameraMode]
     );
     const handleGroundClick = React3.useCallback((e) => {
@@ -1258,13 +1273,13 @@ var Canvas3DHost = React3.forwardRef(
                     drei.Grid,
                     {
                       args: [
-                        Math.max(gridBounds.maxX - gridBounds.minX + 2, 10),
-                        Math.max(gridBounds.maxZ - gridBounds.minZ + 2, 10)
+                        Math.max((gridBounds.maxX - gridBounds.minX + 2) * cellSize, 10),
+                        Math.max((gridBounds.maxZ - gridBounds.minZ + 2) * cellSize, 10)
                       ],
                       position: [
-                        (gridBounds.maxX - gridBounds.minX) / 2 - 0.5,
+                        (gridBounds.maxX - gridBounds.minX) / 2 * cellSize - cellSize / 2,
                         0,
-                        (gridBounds.maxZ - gridBounds.minZ) / 2 - 0.5
+                        (gridBounds.maxZ - gridBounds.minZ) / 2 * cellSize - cellSize / 2
                       ],
                       cellSize: 1,
                       cellThickness: 1,
@@ -1282,9 +1297,9 @@ var Canvas3DHost = React3.forwardRef(
                     {
                       rotation: [-Math.PI / 2, 0, 0],
                       position: [
-                        (gridBounds.maxX - gridBounds.minX) / 2 * gridConfig.cellSize,
+                        (gridBounds.maxX - gridBounds.minX) / 2 * cellSize,
                         0,
-                        (gridBounds.maxZ - gridBounds.minZ) / 2 * gridConfig.cellSize
+                        (gridBounds.maxZ - gridBounds.minZ) / 2 * cellSize
                       ],
                       onClick: handleGroundClick,
                       children: [
@@ -1292,8 +1307,8 @@ var Canvas3DHost = React3.forwardRef(
                           "planeGeometry",
                           {
                             args: [
-                              (gridBounds.maxX - gridBounds.minX + 4) * gridConfig.cellSize,
-                              (gridBounds.maxZ - gridBounds.minZ + 4) * gridConfig.cellSize
+                              (gridBounds.maxX - gridBounds.minX + 4) * cellSize,
+                              (gridBounds.maxZ - gridBounds.minZ + 4) * cellSize
                             ]
                           }
                         ),

package/dist/lib/drawable/three/index.d.cts

@@ -3,9 +3,10 @@ import React__default, { Component, ReactNode, ErrorInfo } from 'react';
 import { ScenePos, EventEmit, JsonObject, OrbitalSchema } from '@almadar/core';
 import * as THREE from 'three';
 import { QuadraticBezierCurve3 } from 'three';
-import { D as DrawableNode, I as IsometricTile, a as IsometricUnit, b as IsometricFeature, A as ApplicationLevelData, O as OrbitalLevelData, T as TraitLevelData, c as TransitionLevelData } from '../../../avl-schema-parser-DKRm-nyh.cjs';
-export { U as UnitAnimationState } from '../../../avl-schema-parser-DKRm-nyh.cjs';
+import { D as DrawableNode } from '../../../paintDispatch-BXJgISot.cjs';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { I as IsometricTile, a as IsometricUnit, b as IsometricFeature, A as ApplicationLevelData, O as OrbitalLevelData, T as TraitLevelData, c as TransitionLevelData } from '../../../avl-schema-parser-B8Onmfsu.cjs';
+export { U as UnitAnimationState } from '../../../avl-schema-parser-B8Onmfsu.cjs';
 
 /**
  * Canvas3DHost — the thin 3D draw-host: the `canvas` host's 3D painter backend
@@ -150,7 +151,8 @@ interface Canvas3DHostProps {
     worldWidth?: number;
     /** Side-view world size in pixels (accepted for API parity). */
     worldHeight?: number;
-    /** Pixel→world-unit divisor for side view (accepted for API parity). */
+    /** Pixel→world-unit divisor for pixel-authored (side-view) scenes: world size =
+     *  scene size ÷ `pixelsPerUnit`. Omitted → 1 world unit per scene unit (grid boards). */
     pixelsPerUnit?: number;
 }
 /** Imperative handle for GameCanvas3D */

package/dist/lib/drawable/three/index.d.ts

@@ -3,9 +3,10 @@ import React__default, { Component, ReactNode, ErrorInfo } from 'react';
 import { ScenePos, EventEmit, JsonObject, OrbitalSchema } from '@almadar/core';
 import * as THREE from 'three';
 import { QuadraticBezierCurve3 } from 'three';
-import { D as DrawableNode, I as IsometricTile, a as IsometricUnit, b as IsometricFeature, A as ApplicationLevelData, O as OrbitalLevelData, T as TraitLevelData, c as TransitionLevelData } from '../../../avl-schema-parser-DKRm-nyh.js';
-export { U as UnitAnimationState } from '../../../avl-schema-parser-DKRm-nyh.js';
+import { D as DrawableNode } from '../../../paintDispatch-BXJgISot.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import { I as IsometricTile, a as IsometricUnit, b as IsometricFeature, A as ApplicationLevelData, O as OrbitalLevelData, T as TraitLevelData, c as TransitionLevelData } from '../../../avl-schema-parser-B8Onmfsu.js';
+export { U as UnitAnimationState } from '../../../avl-schema-parser-B8Onmfsu.js';
 
 /**
  * Canvas3DHost — the thin 3D draw-host: the `canvas` host's 3D painter backend
@@ -150,7 +151,8 @@ interface Canvas3DHostProps {
     worldWidth?: number;
     /** Side-view world size in pixels (accepted for API parity). */
     worldHeight?: number;
-    /** Pixel→world-unit divisor for side view (accepted for API parity). */
+    /** Pixel→world-unit divisor for pixel-authored (side-view) scenes: world size =
+     *  scene size ÷ `pixelsPerUnit`. Omitted → 1 world unit per scene unit (grid boards). */
     pixelsPerUnit?: number;
 }
 /** Imperative handle for GameCanvas3D */

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

@@ -140,6 +140,11 @@ function useEmitEvent() {
   );
 }
 
+// lib/drawable/contract.ts
+function isValidScenePos(pos) {
+  return Number.isFinite(pos?.x) && Number.isFinite(pos?.y);
+}
+
 // lib/drawable/hitTest.ts
 function collectDrawnItems(nodes) {
   const out = [];
@@ -148,12 +153,14 @@ function collectDrawnItems(nodes) {
       case "draw-sprite":
       case "draw-shape":
       case "draw-text":
-        out.push({ pos: n.position, id: n.id });
+        if (isValidScenePos(n.position)) out.push({ pos: n.position, id: n.id });
         break;
       case "draw-sprite-layer":
       case "draw-shape-layer":
       case "draw-text-layer":
-        for (const it of n.items) out.push({ pos: it.position, id: it.id });
+        for (const it of n.items) {
+          if (isValidScenePos(it.position)) out.push({ pos: it.position, id: it.id });
+        }
         break;
     }
   }
@@ -804,7 +811,7 @@ function useAtlasFrame(asset) {
     return { frame: { x: r.sx, y: r.sy, w: r.sw, h: r.sh }, ready: true };
   }, [asset, tick]);
 }
-function SpriteBillboard({ node, world }) {
+function SpriteBillboard({ node, world, cellSize = 1 }) {
   const { texture, error: textureError } = useBillboardTexture(node.asset.url);
   const { frame: atlasFrame, ready: atlasReady } = useAtlasFrame(node.asset);
   const frame = node.frame ?? atlasFrame;
@@ -815,14 +822,14 @@ function SpriteBillboard({ node, world }) {
     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;
+      const width2 = (node.width ?? 1) * cellSize;
+      const height2 = (node.height ?? 1) * cellSize;
       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]);
+    return { width: width * cellSize, height: height * cellSize, imgW, imgH };
+  }, [texture, frame, node.height, node.width, anchor, cellSize]);
   const groundGeometry = React3.useMemo(() => {
     if (anchor !== "top-left" || !texture || !atlasReady) return null;
     const g = new THREE9.PlaneGeometry(size.width, size.height);
@@ -874,31 +881,39 @@ function SpriteBillboard({ node, world }) {
   ] }) });
 }
 function Sprite3D({ node, projector }) {
-  if (node.asset.dimension === "3d" && node.asset.url) {
+  const asset = node.asset;
+  if (!asset?.url || !isValidScenePos(node.position)) return null;
+  if (asset.dimension === "3d") {
+    const scale = node.width === void 0 ? 1 : node.height === void 0 ? node.width * projector.cellSize : [
+      node.width * projector.cellSize,
+      node.height * projector.cellSize,
+      node.width * projector.cellSize
+    ];
     return /* @__PURE__ */ jsx("group", { position: projector.toWorld(node.position), children: /* @__PURE__ */ jsx(
       ModelLoader,
       {
-        url: node.asset.url,
-        scale: node.width ?? projector.cellSize,
+        url: asset.url,
+        scale,
         rotation: [0, node.rotation ?? 0, 0],
+        animation: node.animation,
         fallbackGeometry: "box",
         castShadow: true,
         receiveShadow: true
       }
     ) });
   }
-  if (!node.asset.url) return null;
-  return /* @__PURE__ */ jsx(SpriteBillboard, { node, world: projector.toWorld(node.position) });
+  return /* @__PURE__ */ jsx(SpriteBillboard, { node, world: projector.toWorld(node.position), cellSize: projector.cellSize });
 }
 function Shape3D({ node, projector }) {
+  if (!isValidScenePos(node.position)) return null;
   const world = projector.toWorld(node.position);
   const color = node.fill ?? node.stroke ?? "#ffffff";
   let geometry;
   switch (node.shape) {
     case "cell":
     case "rect": {
-      const w = node.shape === "cell" ? projector.cellSize * 0.95 : node.width ?? projector.cellSize;
-      const h = node.shape === "cell" ? projector.cellSize * 0.95 : node.height ?? projector.cellSize;
+      const w = node.shape === "cell" ? projector.cellSize * 0.95 : (node.width ?? 1) * projector.cellSize;
+      const h = node.shape === "cell" ? projector.cellSize * 0.95 : (node.height ?? 1) * projector.cellSize;
       geometry = /* @__PURE__ */ jsx("planeGeometry", { args: [w, h] });
       break;
     }
@@ -927,6 +942,7 @@ function Shape3D({ node, projector }) {
   ] });
 }
 function Text3D({ node, projector }) {
+  if (!isValidScenePos(node.position)) return null;
   const world = projector.toWorld(node.position);
   return /* @__PURE__ */ jsx(Billboard, { position: [world[0], world[1] + 1.2, world[2]], children: /* @__PURE__ */ jsx(
     Text,
@@ -979,10 +995,7 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var DEFAULT_GRID_CONFIG = {
-  cellSize: 1,
-  offsetX: 0,
-  offsetZ: 0
-};
+  cellSize: 1};
 var Canvas3DHost = forwardRef(
   ({
     cameraMode = "isometric",
@@ -1006,6 +1019,7 @@ var Canvas3DHost = forwardRef(
     loadingMessage = "Loading 3D Scene...",
     keyMap,
     keyUpMap,
+    pixelsPerUnit,
     children,
     drawables
   }, ref) => {
@@ -1066,21 +1080,22 @@ var Canvas3DHost = forwardRef(
       }
       return { minX, maxX, minZ, maxZ };
     }, [scenePositions]);
+    const cellSize = pixelsPerUnit !== void 0 && pixelsPerUnit > 0 ? 1 / pixelsPerUnit : DEFAULT_GRID_CONFIG.cellSize;
     const cameraTarget = useMemo(
       () => [
-        (gridBounds.minX + gridBounds.maxX) / 2,
+        (gridBounds.maxX - gridBounds.minX) / 2 * cellSize,
         0,
-        (gridBounds.minZ + gridBounds.maxZ) / 2
+        (gridBounds.maxZ - gridBounds.minZ) / 2 * cellSize
       ],
-      [gridBounds]
+      [gridBounds, cellSize]
     );
     const gridConfig = useMemo(
       () => ({
-        ...DEFAULT_GRID_CONFIG,
+        cellSize,
         offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
         offsetZ: -(gridBounds.maxZ - gridBounds.minZ) / 2
       }),
-      [gridBounds]
+      [gridBounds, cellSize]
     );
     const drawableProjector = useMemo(
       () => create3DProjector({
@@ -1125,13 +1140,13 @@ var Canvas3DHost = forwardRef(
     }));
     const cameraConfig = useMemo(() => {
       const size = Math.max(
-        gridBounds.maxX - gridBounds.minX,
-        gridBounds.maxZ - gridBounds.minZ,
+        (gridBounds.maxX - gridBounds.minX) * cellSize,
+        (gridBounds.maxZ - gridBounds.minZ) * cellSize,
         4
         // minimum framing distance so a tiny board isn't zoomed in
       );
-      const cx = (gridBounds.minX + gridBounds.maxX) / 2;
-      const cz = (gridBounds.minZ + gridBounds.maxZ) / 2;
+      const cx = cameraTarget[0];
+      const cz = cameraTarget[2];
       const d = size * 1;
       switch (cameraMode) {
         case "isometric":
@@ -1144,13 +1159,13 @@ var Canvas3DHost = forwardRef(
         default:
           return { position: [cx + d, d, cz + d], fov: 45 };
       }
-    }, [cameraMode, gridBounds]);
+    }, [cameraMode, gridBounds, cellSize, cameraTarget]);
     const followWorld = useMemo(() => {
       if (followTarget) return drawableProjector.toWorld(followTarget);
       return cameraTarget;
     }, [followTarget, drawableProjector, cameraTarget]);
     const followOffset = useMemo(
-      () => cameraMode === "chase" ? [0, 4, -7] : [5, 7, 5],
+      () => cameraMode === "chase" ? [0, 4, -7] : [0, 12, 14],
       [cameraMode]
     );
     const handleGroundClick = useCallback((e) => {
@@ -1234,13 +1249,13 @@ var Canvas3DHost = forwardRef(
                     Grid,
                     {
                       args: [
-                        Math.max(gridBounds.maxX - gridBounds.minX + 2, 10),
-                        Math.max(gridBounds.maxZ - gridBounds.minZ + 2, 10)
+                        Math.max((gridBounds.maxX - gridBounds.minX + 2) * cellSize, 10),
+                        Math.max((gridBounds.maxZ - gridBounds.minZ + 2) * cellSize, 10)
                       ],
                       position: [
-                        (gridBounds.maxX - gridBounds.minX) / 2 - 0.5,
+                        (gridBounds.maxX - gridBounds.minX) / 2 * cellSize - cellSize / 2,
                         0,
-                        (gridBounds.maxZ - gridBounds.minZ) / 2 - 0.5
+                        (gridBounds.maxZ - gridBounds.minZ) / 2 * cellSize - cellSize / 2
                       ],
                       cellSize: 1,
                       cellThickness: 1,
@@ -1258,9 +1273,9 @@ var Canvas3DHost = forwardRef(
                     {
                       rotation: [-Math.PI / 2, 0, 0],
                       position: [
-                        (gridBounds.maxX - gridBounds.minX) / 2 * gridConfig.cellSize,
+                        (gridBounds.maxX - gridBounds.minX) / 2 * cellSize,
                         0,
-                        (gridBounds.maxZ - gridBounds.minZ) / 2 * gridConfig.cellSize
+                        (gridBounds.maxZ - gridBounds.minZ) / 2 * cellSize
                       ],
                       onClick: handleGroundClick,
                       children: [
@@ -1268,8 +1283,8 @@ var Canvas3DHost = forwardRef(
                           "planeGeometry",
                           {
                             args: [
-                              (gridBounds.maxX - gridBounds.minX + 4) * gridConfig.cellSize,
-                              (gridBounds.maxZ - gridBounds.minZ + 4) * gridConfig.cellSize
+                              (gridBounds.maxX - gridBounds.minX + 4) * cellSize,
+                              (gridBounds.maxZ - gridBounds.minZ + 4) * cellSize
                             ]
                           }
                         ),

package/dist/lib/index.d.cts

@@ -1,6 +1,7 @@
-export { C as ContentSegment, D as DEFAULT_CONFIG, a as DomEntityBox, b as DomLayoutData, c as DomOutputsBox, d as DomStateNode, e as DomTransitionLabel, f as DomTransitionPath, E as EntityDefinition, R as RenderOptions, S as StateDefinition, g as StateMachineDefinition, T as TraitSnapshotGetter, h as TransitionDefinition, V as VisualizerConfig, i as bindCanvasCapture, j as bindEventBus, k as bindLastDrawables, l as bindTraitStateGetter, m as clearVerification, n as cn, o as extractOutputsFromTransitions, p as extractStateMachine, q as formatGuard, r as getAllChecks, s as getBridgeHealth, t as getEffectSummary, u as getSnapshot, v as getSummary, w as getTraitSnapshots, x as getTransitions, y as getTransitionsForTrait, z as parseContentSegments, A as parseMarkdownWithCodeBlocks, B as recordServerResponse, F as recordTransition, G as registerCheck, H as registerTraitSnapshot, I as renderStateMachineToDomData, J as renderStateMachineToSvg, K as subscribeToVerification, L as updateAssetStatus, M as updateBridgeHealth, N as updateCheck, O as waitForTransition } from '../cn-BbPvQLHt.cjs';
+export { C as ContentSegment, D as DEFAULT_CONFIG, a as DomEntityBox, b as DomLayoutData, c as DomOutputsBox, d as DomStateNode, e as DomTransitionLabel, f as DomTransitionPath, E as EntityDefinition, R as RenderOptions, S as StateDefinition, g as StateMachineDefinition, T as TraitSnapshotGetter, h as TransitionDefinition, V as VisualizerConfig, i as bindCanvasCapture, j as bindEventBus, k as bindLastDrawables, l as bindTraitStateGetter, m as clearVerification, n as cn, o as extractOutputsFromTransitions, p as extractStateMachine, q as formatGuard, r as getAllChecks, s as getBridgeHealth, t as getEffectSummary, u as getSnapshot, v as getSummary, w as getTraitSnapshots, x as getTransitions, y as getTransitionsForTrait, z as parseContentSegments, A as parseMarkdownWithCodeBlocks, B as recordServerResponse, F as recordTransition, G as registerCheck, H as registerTraitSnapshot, I as renderStateMachineToDomData, J as renderStateMachineToSvg, K as subscribeToVerification, L as updateAssetStatus, M as updateBridgeHealth, N as updateCheck, O as waitForTransition } from '../cn-D3H9UzCW.cjs';
 import { FieldValue, EntityRow, EventPayload } from '@almadar/core';
 export { AssetLoadStatus, BridgeHealth, CheckStatus, EffectTrace, EventLogEntry, OrbitalVerificationAPI, ServerResponseTrace, TraitStateSnapshot, TransitionTrace, VerificationCheck, VerificationSnapshot, VerificationSummary } from '@almadar/core';
+import '../paintDispatch-BXJgISot.cjs';
 import 'clsx';
 
 /**

package/dist/lib/index.d.ts

@@ -1,6 +1,7 @@
-export { C as ContentSegment, D as DEFAULT_CONFIG, a as DomEntityBox, b as DomLayoutData, c as DomOutputsBox, d as DomStateNode, e as DomTransitionLabel, f as DomTransitionPath, E as EntityDefinition, R as RenderOptions, S as StateDefinition, g as StateMachineDefinition, T as TraitSnapshotGetter, h as TransitionDefinition, V as VisualizerConfig, i as bindCanvasCapture, j as bindEventBus, k as bindLastDrawables, l as bindTraitStateGetter, m as clearVerification, n as cn, o as extractOutputsFromTransitions, p as extractStateMachine, q as formatGuard, r as getAllChecks, s as getBridgeHealth, t as getEffectSummary, u as getSnapshot, v as getSummary, w as getTraitSnapshots, x as getTransitions, y as getTransitionsForTrait, z as parseContentSegments, A as parseMarkdownWithCodeBlocks, B as recordServerResponse, F as recordTransition, G as registerCheck, H as registerTraitSnapshot, I as renderStateMachineToDomData, J as renderStateMachineToSvg, K as subscribeToVerification, L as updateAssetStatus, M as updateBridgeHealth, N as updateCheck, O as waitForTransition } from '../cn-BbPvQLHt.js';
+export { C as ContentSegment, D as DEFAULT_CONFIG, a as DomEntityBox, b as DomLayoutData, c as DomOutputsBox, d as DomStateNode, e as DomTransitionLabel, f as DomTransitionPath, E as EntityDefinition, R as RenderOptions, S as StateDefinition, g as StateMachineDefinition, T as TraitSnapshotGetter, h as TransitionDefinition, V as VisualizerConfig, i as bindCanvasCapture, j as bindEventBus, k as bindLastDrawables, l as bindTraitStateGetter, m as clearVerification, n as cn, o as extractOutputsFromTransitions, p as extractStateMachine, q as formatGuard, r as getAllChecks, s as getBridgeHealth, t as getEffectSummary, u as getSnapshot, v as getSummary, w as getTraitSnapshots, x as getTransitions, y as getTransitionsForTrait, z as parseContentSegments, A as parseMarkdownWithCodeBlocks, B as recordServerResponse, F as recordTransition, G as registerCheck, H as registerTraitSnapshot, I as renderStateMachineToDomData, J as renderStateMachineToSvg, K as subscribeToVerification, L as updateAssetStatus, M as updateBridgeHealth, N as updateCheck, O as waitForTransition } from '../cn-Dm0VrLRG.js';
 import { FieldValue, EntityRow, EventPayload } from '@almadar/core';
 export { AssetLoadStatus, BridgeHealth, CheckStatus, EffectTrace, EventLogEntry, OrbitalVerificationAPI, ServerResponseTrace, TraitStateSnapshot, TransitionTrace, VerificationCheck, VerificationSnapshot, VerificationSummary } from '@almadar/core';
+import '../paintDispatch-BXJgISot.js';
 import 'clsx';
 
 /**