@almadar/ui 6.0.0 → 6.2.0

package/dist/providers/index.js

@@ -3,7 +3,7 @@ import React87__default, { createContext, useContext, useMemo, useRef, useEffect
 import { EventBusContext, useTraitScopeChain, RenderSlotProvider, useEntitySchemaOptional, useEntityBindingSnapshot, useTraitScope, TraitScopeProvider, useNavStack, useCurrentPagePath, useRenderSlot, useGameAudioContextOptional, matchPathAmong } from '@almadar/ui/providers';
 import { createLogger, isLogLevelEnabled } from '@almadar/logger';
 import { createContextFromBindings, interpolateValue } from '@almadar/runtime';
-import { ANONYMOUS_USER, isRenderBindingMarker, isFileValue, isInlineTrait, ANIMATION_NAMES } from '@almadar/core';
+import { ANONYMOUS_USER, isRenderBindingMarker, isFileValue, isInlineTrait } from '@almadar/core';
 export { ANONYMOUS_USER } from '@almadar/core';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -3240,9 +3240,16 @@ var init_Input = __esm({
           }
         };
         const handleKeyDown = (e) => {
-          if (action && e.key === "Enter") {
-            eventBus.emit(`UI:${action}`, { value: e.currentTarget.value });
+          if (!action || e.key !== "Enter") return;
+          const raw = e.currentTarget.value;
+          if (type === "number") {
+            if (raw.trim() === "") return;
+            const numeric = Number(raw);
+            if (Number.isNaN(numeric)) return;
+            eventBus.emit(`UI:${action}`, { value: numeric });
+            return;
           }
+          eventBus.emit(`UI:${action}`, { value: raw });
         };
         const wrapField = (field, fullWidth = true) => /* @__PURE__ */ jsxs("div", { className: fullWidth ? "w-full" : "w-fit", children: [
           label && /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-foreground mb-1", children: label }),
@@ -5800,6 +5807,7 @@ function resolveFxView(item, presets) {
     vy: item.vy ?? row.vy,
     vz: item.vz ?? row.vz,
     particleCount: item.particleCount ?? row.particleCount,
+    animation: item.animation ?? row.animation,
     shape: row.shape,
     count: row.count,
     glow: row.glow,
@@ -7332,9 +7340,6 @@ var init_isometric = __esm({
     };
   }
 });
-function isAnimationName(name) {
-  return ANIMATION_NAMES.includes(name);
-}
 function frameRect(frame, row, columns, frameWidth, frameHeight) {
   return {
     sx: frame % columns * frameWidth,
@@ -9268,13 +9273,17 @@ var init_DrawSprite = __esm({
           return;
         }
         if (isSpriteSheetAtlas(atlas)) {
-          const def = isAnimationName(node.animation) ? atlas.animations[node.animation] : void 0;
+          const def = atlas.animations[node.animation];
           if (!def) {
             paintFallbackSquare(painter, node, dctx, "sprite-missing");
             return;
           }
-          const { frame } = getCurrentFrameFromDef(node.loop === void 0 ? def : { ...def, loop: node.loop }, dctx.time);
+          const { frame } = getCurrentFrameFromDef(node.loop === void 0 ? def : { ...def, loop: node.loop }, node.clockMs ?? dctx.time);
           const r = frameRect(frame, def.row, atlas.columns, atlas.frameWidth, atlas.frameHeight);
+          if (![r.sx, r.sy, r.sw, r.sh].every(Number.isFinite)) {
+            paintFallbackSquare(painter, node, dctx, "sprite-missing");
+            return;
+          }
           src = { x: r.sx, y: r.sy, w: r.sw, h: r.sh };
         }
       }
@@ -9822,7 +9831,10 @@ function expandFxItem(view, node, epochNowMs, dim) {
       anchor: "center",
       width: spriteSize,
       height: spriteSize,
-      opacity: fade
+      opacity: fade,
+      animation: view.animation ?? sprite.animations?.[0],
+      // One-shot fx rows (burst) play from the item's birth, not wall-time.
+      clockMs: ageMs
     });
   } else {
     out.push(...proceduralShapes(view, pos, fade, progress));
@@ -11669,6 +11681,7 @@ var init_GameShell = __esm({
     init_Typography();
     init_AtlasImage();
     GAME_FONTS = {
+      fredoka: "Fredoka",
       future: "Kenney Future",
       "future-narrow": "Kenney Future Narrow",
       pixel: "Kenney Pixel",
@@ -11685,10 +11698,10 @@ var init_GameShell = __esm({
       showTopBar = true,
       children,
       backgroundAsset,
-      fontFamily = "future",
+      fontFamily,
       "data-theme": dataTheme
     }) => {
-      const font = GAME_FONTS[fontFamily] ?? fontFamily;
+      const font = fontFamily ? GAME_FONTS[fontFamily] ?? fontFamily : void 0;
       return /* @__PURE__ */ jsxs(
         Box,
         {
@@ -11703,8 +11716,11 @@ var init_GameShell = __esm({
             color: "var(--color-foreground, #e0e0e0)",
             // The fontFamily knob is a scoped override of the theme contract's
             // display slot: titles/numerics take the game face, body text keeps
-            // the active theme's --font-family-body.
-            "--font-family-display": `'${font}', ui-sans-serif, system-ui, sans-serif`
+            // the active theme's --font-family-body. Set ONLY when explicitly
+            // passed — an always-on inline stamp would shadow the orbital's
+            // inline-theme font-family-display token (inline style beats the
+            // theme provider's vars for the whole shell subtree).
+            ...font ? { "--font-family-display": `'${font}', ui-sans-serif, system-ui, sans-serif` } : {}
           },
           children: [
             backgroundAsset && /* @__PURE__ */ jsx(
@@ -12172,6 +12188,16 @@ function traceShapes(panel, k, width, height) {
   }
   return out;
 }
+function drawableNeedsAnimation(nodes) {
+  if (!nodes) return false;
+  return nodes.some((node) => {
+    if (node.type === "draw-sprite") return node.animation !== void 0;
+    if (node.type === "draw-fx-layer") return Array.isArray(node.items) && node.items.length > 0;
+    if (node.type === "draw-sprite-layer") return Array.isArray(node.items) && node.items.some((it) => it.animation !== void 0);
+    if (node.type === "draw-group") return Array.isArray(node.items) && drawableNeedsAnimation(node.items);
+    return false;
+  });
+}
 var DASH_PATTERNS, TRACE_SERIES_COLORS, LearningCanvas;
 var init_LearningCanvas = __esm({
   "components/learning/atoms/LearningCanvas.tsx"() {
@@ -12179,6 +12205,8 @@ var init_LearningCanvas = __esm({
     init_cn();
     init_perf();
     init_useEventBus();
+    init_webPainter2d();
+    init_paintDispatch();
     DASH_PATTERNS = { dashed: [6, 4], dotted: [2, 3] };
     TRACE_SERIES_COLORS = ["#2563eb", "#dc2626", "#16a34a", "#f59e0b"];
     LearningCanvas = ({
@@ -12187,6 +12215,8 @@ var init_LearningCanvas = __esm({
       height = 400,
       backgroundColor,
       shapes = [],
+      drawables,
+      projector,
       readouts,
       traces,
       interactive = false,
@@ -12200,6 +12230,9 @@ var init_LearningCanvas = __esm({
       const eventBus = useEventBus();
       const animRef = useRef(0);
       const hoverIndexRef = useRef(-1);
+      const [drawVersion, setDrawVersion] = useState(0);
+      const invalidateRef = useRef(() => setDrawVersion((v) => v + 1));
+      const needsAnim = useMemo(() => drawableNeedsAnimation(drawables), [drawables]);
       const findShapeAt = useCallback((clientX, clientY) => {
         const canvas = canvasRef.current;
         if (!canvas) return -1;
@@ -12243,20 +12276,29 @@ var init_LearningCanvas = __esm({
         for (const shape of derivedShapes) {
           if (shape.type === "text") drawShape(ctx, shape, width, height, derivedShapes);
         }
+        if (drawables?.length && projector) {
+          const painter = createWebPainter(ctx, invalidateRef.current);
+          const timeMs = needsAnim && typeof performance !== "undefined" ? performance.now() : 0;
+          const dctx = { projector, time: timeMs, invalidate: invalidateRef.current };
+          for (const node of drawables) {
+            paintDrawable(painter, node, dctx);
+          }
+        }
         perfEnd("learningcanvas:paint", _perfT);
-      }, [width, height, backgroundColor, derivedShapes]);
+      }, [width, height, backgroundColor, derivedShapes, drawables, projector, needsAnim]);
       useEffect(() => {
         draw();
-      }, [draw]);
+      }, [draw, drawVersion]);
       useEffect(() => {
-        if (!animate) return;
+        const shouldAnimate = animate || needsAnim;
+        if (!shouldAnimate) return;
         const loop = () => {
           draw();
           animRef.current = requestAnimationFrame(loop);
         };
         animRef.current = requestAnimationFrame(loop);
         return () => cancelAnimationFrame(animRef.current);
-      }, [animate, draw]);
+      }, [animate, needsAnim, draw]);
       const handlePointerMove = useCallback(
         (e) => {
           if (!interactive) return;
@@ -24898,8 +24940,9 @@ var init_DashboardLayout = __esm({
         if (notificationClickEvent) eventBus.emit(`UI:${notificationClickEvent}`, {});
         if (onNotificationClick) onNotificationClick();
       };
-      const handleTopBarActionClick = (event) => {
-        eventBus.emit(`UI:${event}`, {});
+      const handleTopBarActionClick = (action) => {
+        if (action.event) eventBus.emit(`UI:${action.event}`, {});
+        if (action.navigatesTo) eventBus.emit("UI:NAVIGATE", { url: action.navigatesTo });
       };
       const [sidebarOpen, setSidebarOpen] = useState(false);
       const [userMenuOpen, setUserMenuOpen] = useState(false);
@@ -25114,7 +25157,7 @@ var init_DashboardLayout = __esm({
                             {
                               variant: "ghost",
                               className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
-                              onClick: () => handleTopBarActionClick(action.event),
+                              onClick: () => handleTopBarActionClick(action),
                               "aria-label": action.label ?? (typeof action.icon === "string" ? action.icon : void 0),
                               children: [
                                 /* @__PURE__ */ jsx(Icon, { icon: action.icon, className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
@@ -25131,7 +25174,7 @@ var init_DashboardLayout = __esm({
                                 )
                               ]
                             },
-                            `${action.event}-${idx}`
+                            `${action.event ?? action.navigatesTo ?? "action"}-${idx}`
                           )),
                           notificationsEnabled && /* @__PURE__ */ jsxs(
                             Button,
@@ -30793,6 +30836,7 @@ var init_MathCanvas = __esm({
       angles = [],
       hops = [],
       shapes = [],
+      drawables,
       readouts,
       traces,
       interactive = false,
@@ -31099,6 +31143,42 @@ var init_MathCanvas = __esm({
         hops,
         shapes
       ]);
+      const projector = useMemo(() => {
+        if (!drawables?.length) return void 0;
+        const margin = 24;
+        const plotW = width - margin * 2;
+        const plotH = height - margin * 2;
+        const xScale = plotW / (xMax - xMin);
+        const mapX = (x) => margin + (x - xMin) / (xMax - xMin) * plotW;
+        const mapY = (y) => height - (margin + (y - yMin) / (yMax - yMin) * plotH);
+        const project = (pos) => ({ x: mapX(pos.x), y: mapY(pos.y) });
+        const anchorPoint = (pos, anchor) => {
+          const base = project(pos);
+          if (anchor === "top-left") return base;
+          const cx = base.x + xScale / 2;
+          if (anchor === "ground") return { x: cx, y: base.y + xScale * 0.92 };
+          return { x: cx, y: base.y + xScale / 2 };
+        };
+        const cellPath = (pos) => {
+          const base = project(pos);
+          return [
+            { x: base.x, y: base.y },
+            { x: base.x + xScale, y: base.y },
+            { x: base.x + xScale, y: base.y + xScale },
+            { x: base.x, y: base.y + xScale }
+          ];
+        };
+        return {
+          project,
+          anchorPoint,
+          cellPath,
+          tileWidth: xScale,
+          floorHeight: xScale / 2,
+          diamondTopY: 0,
+          squareGrid: true,
+          worldPixelDirect: false
+        };
+      }, [drawables?.length, width, height, xMin, xMax, yMin, yMax]);
       return /* @__PURE__ */ jsx(Card, { className, children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
         title ? /* @__PURE__ */ jsx(Typography, { variant: "h4", children: title }) : null,
         /* @__PURE__ */ jsx(
@@ -31108,6 +31188,8 @@ var init_MathCanvas = __esm({
             height,
             backgroundColor,
             shapes: derivedShapes,
+            drawables,
+            projector,
             readouts,
             traces,
             interactive,
@@ -32337,7 +32419,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect67, useRef: useRef65, useCallback: useCallback97, useState: useState97 } = React87__default;
+      const { useEffect: useEffect67, useRef: useRef65, useCallback: useCallback97, useState: useState98 } = React87__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 }) {
@@ -32382,7 +32464,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState97(null);
+        const [clickedPosition, setClickedPosition] = useState98(null);
         const handleMapClick = useCallback97((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });

package/dist/runtime/index.cjs

@@ -3807,9 +3807,16 @@ var init_Input = __esm({
           }
         };
         const handleKeyDown = (e) => {
-          if (action && e.key === "Enter") {
-            eventBus.emit(`UI:${action}`, { value: e.currentTarget.value });
+          if (!action || e.key !== "Enter") return;
+          const raw = e.currentTarget.value;
+          if (type === "number") {
+            if (raw.trim() === "") return;
+            const numeric = Number(raw);
+            if (Number.isNaN(numeric)) return;
+            eventBus.emit(`UI:${action}`, { value: numeric });
+            return;
           }
+          eventBus.emit(`UI:${action}`, { value: raw });
         };
         const wrapField = (field, fullWidth = true) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fullWidth ? "w-full" : "w-fit", children: [
           label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-foreground mb-1", children: label }),
@@ -6332,6 +6339,7 @@ function resolveFxView(item, presets) {
     vy: item.vy ?? row.vy,
     vz: item.vz ?? row.vz,
     particleCount: item.particleCount ?? row.particleCount,
+    animation: item.animation ?? row.animation,
     shape: row.shape,
     count: row.count,
     glow: row.glow,
@@ -7863,9 +7871,6 @@ var init_isometric = __esm({
     };
   }
 });
-function isAnimationName(name) {
-  return core.ANIMATION_NAMES.includes(name);
-}
 function frameRect(frame, row, columns, frameWidth, frameHeight) {
   return {
     sx: frame % columns * frameWidth,
@@ -9692,13 +9697,17 @@ var init_DrawSprite = __esm({
           return;
         }
         if (isSpriteSheetAtlas(atlas)) {
-          const def = isAnimationName(node.animation) ? atlas.animations[node.animation] : void 0;
+          const def = atlas.animations[node.animation];
           if (!def) {
             paintFallbackSquare(painter, node, dctx, "sprite-missing");
             return;
           }
-          const { frame } = getCurrentFrameFromDef(node.loop === void 0 ? def : { ...def, loop: node.loop }, dctx.time);
+          const { frame } = getCurrentFrameFromDef(node.loop === void 0 ? def : { ...def, loop: node.loop }, node.clockMs ?? dctx.time);
           const r = frameRect(frame, def.row, atlas.columns, atlas.frameWidth, atlas.frameHeight);
+          if (![r.sx, r.sy, r.sw, r.sh].every(Number.isFinite)) {
+            paintFallbackSquare(painter, node, dctx, "sprite-missing");
+            return;
+          }
           src = { x: r.sx, y: r.sy, w: r.sw, h: r.sh };
         }
       }
@@ -10246,7 +10255,10 @@ function expandFxItem(view, node, epochNowMs, dim) {
       anchor: "center",
       width: spriteSize,
       height: spriteSize,
-      opacity: fade
+      opacity: fade,
+      animation: view.animation ?? sprite.animations?.[0],
+      // One-shot fx rows (burst) play from the item's birth, not wall-time.
+      clockMs: ageMs
     });
   } else {
     out.push(...proceduralShapes(view, pos, fade, progress));
@@ -11826,6 +11838,7 @@ var init_GameShell = __esm({
     init_Typography();
     init_AtlasImage();
     GAME_FONTS = {
+      fredoka: "Fredoka",
       future: "Kenney Future",
       "future-narrow": "Kenney Future Narrow",
       pixel: "Kenney Pixel",
@@ -11842,10 +11855,10 @@ var init_GameShell = __esm({
       showTopBar = true,
       children,
       backgroundAsset,
-      fontFamily = "future",
+      fontFamily,
       "data-theme": dataTheme
     }) => {
-      const font = GAME_FONTS[fontFamily] ?? fontFamily;
+      const font = fontFamily ? GAME_FONTS[fontFamily] ?? fontFamily : void 0;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         Box,
         {
@@ -11860,8 +11873,11 @@ var init_GameShell = __esm({
             color: "var(--color-foreground, #e0e0e0)",
             // The fontFamily knob is a scoped override of the theme contract's
             // display slot: titles/numerics take the game face, body text keeps
-            // the active theme's --font-family-body.
-            "--font-family-display": `'${font}', ui-sans-serif, system-ui, sans-serif`
+            // the active theme's --font-family-body. Set ONLY when explicitly
+            // passed — an always-on inline stamp would shadow the orbital's
+            // inline-theme font-family-display token (inline style beats the
+            // theme provider's vars for the whole shell subtree).
+            ...font ? { "--font-family-display": `'${font}', ui-sans-serif, system-ui, sans-serif` } : {}
           },
           children: [
             backgroundAsset && /* @__PURE__ */ jsxRuntime.jsx(
@@ -12325,6 +12341,16 @@ function traceShapes(panel, k, width, height) {
   }
   return out;
 }
+function drawableNeedsAnimation(nodes) {
+  if (!nodes) return false;
+  return nodes.some((node) => {
+    if (node.type === "draw-sprite") return node.animation !== void 0;
+    if (node.type === "draw-fx-layer") return Array.isArray(node.items) && node.items.length > 0;
+    if (node.type === "draw-sprite-layer") return Array.isArray(node.items) && node.items.some((it) => it.animation !== void 0);
+    if (node.type === "draw-group") return Array.isArray(node.items) && drawableNeedsAnimation(node.items);
+    return false;
+  });
+}
 var DASH_PATTERNS, TRACE_SERIES_COLORS, LearningCanvas;
 var init_LearningCanvas = __esm({
   "components/learning/atoms/LearningCanvas.tsx"() {
@@ -12332,6 +12358,8 @@ var init_LearningCanvas = __esm({
     init_cn();
     init_perf();
     init_useEventBus();
+    init_webPainter2d();
+    init_paintDispatch();
     DASH_PATTERNS = { dashed: [6, 4], dotted: [2, 3] };
     TRACE_SERIES_COLORS = ["#2563eb", "#dc2626", "#16a34a", "#f59e0b"];
     LearningCanvas = ({
@@ -12340,6 +12368,8 @@ var init_LearningCanvas = __esm({
       height = 400,
       backgroundColor,
       shapes = [],
+      drawables,
+      projector,
       readouts,
       traces,
       interactive = false,
@@ -12353,6 +12383,9 @@ var init_LearningCanvas = __esm({
       const eventBus = useEventBus();
       const animRef = React85.useRef(0);
       const hoverIndexRef = React85.useRef(-1);
+      const [drawVersion, setDrawVersion] = React85.useState(0);
+      const invalidateRef = React85.useRef(() => setDrawVersion((v) => v + 1));
+      const needsAnim = React85.useMemo(() => drawableNeedsAnimation(drawables), [drawables]);
       const findShapeAt = React85.useCallback((clientX, clientY) => {
         const canvas = canvasRef.current;
         if (!canvas) return -1;
@@ -12396,20 +12429,29 @@ var init_LearningCanvas = __esm({
         for (const shape of derivedShapes) {
           if (shape.type === "text") drawShape(ctx, shape, width, height, derivedShapes);
         }
+        if (drawables?.length && projector) {
+          const painter = createWebPainter(ctx, invalidateRef.current);
+          const timeMs = needsAnim && typeof performance !== "undefined" ? performance.now() : 0;
+          const dctx = { projector, time: timeMs, invalidate: invalidateRef.current };
+          for (const node of drawables) {
+            paintDrawable(painter, node, dctx);
+          }
+        }
         ui.perfEnd("learningcanvas:paint", _perfT);
-      }, [width, height, backgroundColor, derivedShapes]);
+      }, [width, height, backgroundColor, derivedShapes, drawables, projector, needsAnim]);
       React85.useEffect(() => {
         draw();
-      }, [draw]);
+      }, [draw, drawVersion]);
       React85.useEffect(() => {
-        if (!animate) return;
+        const shouldAnimate = animate || needsAnim;
+        if (!shouldAnimate) return;
         const loop = () => {
           draw();
           animRef.current = requestAnimationFrame(loop);
         };
         animRef.current = requestAnimationFrame(loop);
         return () => cancelAnimationFrame(animRef.current);
-      }, [animate, draw]);
+      }, [animate, needsAnim, draw]);
       const handlePointerMove = React85.useCallback(
         (e) => {
           if (!interactive) return;
@@ -24537,8 +24579,9 @@ var init_DashboardLayout = __esm({
         if (notificationClickEvent) eventBus.emit(`UI:${notificationClickEvent}`, {});
         if (onNotificationClick) onNotificationClick();
       };
-      const handleTopBarActionClick = (event) => {
-        eventBus.emit(`UI:${event}`, {});
+      const handleTopBarActionClick = (action) => {
+        if (action.event) eventBus.emit(`UI:${action.event}`, {});
+        if (action.navigatesTo) eventBus.emit("UI:NAVIGATE", { url: action.navigatesTo });
       };
       const [sidebarOpen, setSidebarOpen] = React85.useState(false);
       const [userMenuOpen, setUserMenuOpen] = React85.useState(false);
@@ -24753,7 +24796,7 @@ var init_DashboardLayout = __esm({
                             {
                               variant: "ghost",
                               className: "relative p-2 rounded-full hover:bg-muted dark:hover:bg-muted",
-                              onClick: () => handleTopBarActionClick(action.event),
+                              onClick: () => handleTopBarActionClick(action),
                               "aria-label": action.label ?? (typeof action.icon === "string" ? action.icon : void 0),
                               children: [
                                 /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: action.icon, className: "h-5 w-5 text-muted-foreground dark:text-muted-foreground" }),
@@ -24770,7 +24813,7 @@ var init_DashboardLayout = __esm({
                                 )
                               ]
                             },
-                            `${action.event}-${idx}`
+                            `${action.event ?? action.navigatesTo ?? "action"}-${idx}`
                           )),
                           notificationsEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
                             Button,
@@ -30368,6 +30411,7 @@ var init_MathCanvas = __esm({
       angles = [],
       hops = [],
       shapes = [],
+      drawables,
       readouts,
       traces,
       interactive = false,
@@ -30674,6 +30718,42 @@ var init_MathCanvas = __esm({
         hops,
         shapes
       ]);
+      const projector = React85.useMemo(() => {
+        if (!drawables?.length) return void 0;
+        const margin = 24;
+        const plotW = width - margin * 2;
+        const plotH = height - margin * 2;
+        const xScale = plotW / (xMax - xMin);
+        const mapX = (x) => margin + (x - xMin) / (xMax - xMin) * plotW;
+        const mapY = (y) => height - (margin + (y - yMin) / (yMax - yMin) * plotH);
+        const project = (pos) => ({ x: mapX(pos.x), y: mapY(pos.y) });
+        const anchorPoint = (pos, anchor) => {
+          const base = project(pos);
+          if (anchor === "top-left") return base;
+          const cx = base.x + xScale / 2;
+          if (anchor === "ground") return { x: cx, y: base.y + xScale * 0.92 };
+          return { x: cx, y: base.y + xScale / 2 };
+        };
+        const cellPath = (pos) => {
+          const base = project(pos);
+          return [
+            { x: base.x, y: base.y },
+            { x: base.x + xScale, y: base.y },
+            { x: base.x + xScale, y: base.y + xScale },
+            { x: base.x, y: base.y + xScale }
+          ];
+        };
+        return {
+          project,
+          anchorPoint,
+          cellPath,
+          tileWidth: xScale,
+          floorHeight: xScale / 2,
+          diamondTopY: 0,
+          squareGrid: true,
+          worldPixelDirect: false
+        };
+      }, [drawables?.length, width, height, xMin, xMax, yMin, yMax]);
       return /* @__PURE__ */ jsxRuntime.jsx(Card, { className, children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
         title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", children: title }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -30683,6 +30763,8 @@ var init_MathCanvas = __esm({
             height,
             backgroundColor,
             shapes: derivedShapes,
+            drawables,
+            projector,
             readouts,
             traces,
             interactive,
@@ -31912,7 +31994,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect63, useRef: useRef63, useCallback: useCallback90, useState: useState94 } = React85__namespace.default;
+      const { useEffect: useEffect63, useRef: useRef63, useCallback: useCallback90, useState: useState95 } = React85__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 }) {
@@ -31957,7 +32039,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState94(null);
+        const [clickedPosition, setClickedPosition] = useState95(null);
         const handleMapClick = useCallback90((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });