@almadar/ui 6.0.0 → 6.1.0

package/dist/avl/index.cjs

@@ -9617,6 +9617,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,
@@ -11148,9 +11149,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,
@@ -13084,13 +13082,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 r2 = frameRect(frame, def.row, atlas.columns, atlas.frameWidth, atlas.frameHeight);
+          if (![r2.sx, r2.sy, r2.sw, r2.sh].every(Number.isFinite)) {
+            paintFallbackSquare(painter, node, dctx, "sprite-missing");
+            return;
+          }
           src = { x: r2.sx, y: r2.sy, w: r2.sw, h: r2.sh };
         }
       }
@@ -13638,7 +13640,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));
@@ -15218,6 +15223,7 @@ var init_GameShell = __esm({
     init_Typography();
     init_AtlasImage();
     GAME_FONTS = {
+      fredoka: "Fredoka",
       future: "Kenney Future",
       "future-narrow": "Kenney Future Narrow",
       pixel: "Kenney Pixel",
@@ -15234,10 +15240,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,
         {
@@ -15252,8 +15258,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(
@@ -15730,6 +15739,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"() {
@@ -15737,6 +15756,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 = ({
@@ -15745,6 +15766,8 @@ var init_LearningCanvas = __esm({
       height = 400,
       backgroundColor,
       shapes = [],
+      drawables,
+      projector,
       readouts,
       traces,
       interactive = false,
@@ -15758,6 +15781,9 @@ var init_LearningCanvas = __esm({
       const eventBus = useEventBus();
       const animRef = React94.useRef(0);
       const hoverIndexRef = React94.useRef(-1);
+      const [drawVersion, setDrawVersion] = React94.useState(0);
+      const invalidateRef = React94.useRef(() => setDrawVersion((v) => v + 1));
+      const needsAnim = React94.useMemo(() => drawableNeedsAnimation(drawables), [drawables]);
       const findShapeAt = React94.useCallback((clientX, clientY) => {
         const canvas = canvasRef.current;
         if (!canvas) return -1;
@@ -15801,20 +15827,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]);
       React94.useEffect(() => {
         draw();
-      }, [draw]);
+      }, [draw, drawVersion]);
       React94.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 = React94.useCallback(
         (e) => {
           if (!interactive) return;
@@ -27246,8 +27281,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] = React94.useState(false);
       const [userMenuOpen, setUserMenuOpen] = React94.useState(false);
@@ -27462,7 +27498,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" }),
@@ -27479,7 +27515,7 @@ var init_DashboardLayout = __esm({
                                 )
                               ]
                             },
-                            `${action.event}-${idx}`
+                            `${action.event ?? action.navigatesTo ?? "action"}-${idx}`
                           )),
                           notificationsEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
                             Button,
@@ -33141,6 +33177,7 @@ var init_MathCanvas = __esm({
       angles = [],
       hops = [],
       shapes = [],
+      drawables,
       readouts,
       traces,
       interactive = false,
@@ -33447,6 +33484,42 @@ var init_MathCanvas = __esm({
         hops,
         shapes
       ]);
+      const projector = React94.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(
@@ -33456,6 +33529,8 @@ var init_MathCanvas = __esm({
             height,
             backgroundColor,
             shapes: derivedShapes,
+            drawables,
+            projector,
             readouts,
             traces,
             interactive,
@@ -34685,7 +34760,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect67, useRef: useRef65, useCallback: useCallback96, useState: useState102 } = React94__namespace.default;
+      const { useEffect: useEffect67, useRef: useRef65, useCallback: useCallback96, useState: useState103 } = React94__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 }) {
@@ -34730,7 +34805,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState102(null);
+        const [clickedPosition, setClickedPosition] = useState103(null);
         const handleMapClick = useCallback96((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });

package/dist/avl/index.js

@@ -7,7 +7,7 @@ import ELK from 'elkjs/lib/elk.bundled.js';
 import { MarkerType, useReactFlow, Handle, Position, getBezierPath, EdgeLabelRenderer, useNodeId, ReactFlowProvider, BaseEdge, useNodesState, useEdgesState, ReactFlow, Controls, Background, BackgroundVariant } from '@xyflow/react';
 import { useTranslate } from '@almadar/ui/hooks';
 import { InMemoryPersistence, StateMachineManager, collectDeclaredConfigDefaults, resolveCallSitePayloadCaptures, createServerEffectHandlers, EffectExecutor, createContextFromBindings, createTickScheduler, isValidCronExpression, parseDurationString, normalizeCallSiteConfigToValues, interpolateValue } from '@almadar/runtime';
-import { FieldTypeSchema, isInlineTrait, isPageReference, buildResolvedTraitConfigs, schemaToIR, getPage, mergeEntityFrame, isCircuitEvent, applyListenPayloadMapping, walkSExpr, isRenderBindingMarker, containsEntityBinding, isSExpr, isEventPayloadValue, RENDER_BINDING_MARKER, isFileValue, ANIMATION_NAMES } from '@almadar/core';
+import { FieldTypeSchema, isInlineTrait, isPageReference, buildResolvedTraitConfigs, schemaToIR, getPage, mergeEntityFrame, isCircuitEvent, applyListenPayloadMapping, walkSExpr, isRenderBindingMarker, containsEntityBinding, isSExpr, isEventPayloadValue, RENDER_BINDING_MARKER, isFileValue } from '@almadar/core';
 import * as LucideIcons2 from 'lucide-react';
 import { Loader2, X, Code, FileText, WrapText, Check, Copy, Lightbulb, CheckCircle, List, Printer, ChevronRight, ChevronLeft, GitBranch, Pencil, Eye, Plus, ArrowRight, Trash, RotateCcw, Play, Terminal, XCircle, AlertTriangle, Trash2, Link2, ArrowLeft, ZoomOut, ZoomIn, Download, DollarSign, ChevronDown, Menu as Menu$1, Package, Calendar, MoreHorizontal, Image as Image$1, Upload, HelpCircle, PauseCircle, Search, Bold, Italic, Underline, Strikethrough, Heading1, Heading2, Heading3, ListOrdered, Quote, Link as Link$1, Minus, Eraser, TrendingUp, TrendingDown, AlertCircle, Circle, Clock, CheckCircle2, ChevronUp } from 'lucide-react';
 import { createPortal } from 'react-dom';
@@ -9541,6 +9541,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,
@@ -11072,9 +11073,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,
@@ -13008,13 +13006,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 r2 = frameRect(frame, def.row, atlas.columns, atlas.frameWidth, atlas.frameHeight);
+          if (![r2.sx, r2.sy, r2.sw, r2.sh].every(Number.isFinite)) {
+            paintFallbackSquare(painter, node, dctx, "sprite-missing");
+            return;
+          }
           src = { x: r2.sx, y: r2.sy, w: r2.sw, h: r2.sh };
         }
       }
@@ -13562,7 +13564,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));
@@ -15142,6 +15147,7 @@ var init_GameShell = __esm({
     init_Typography();
     init_AtlasImage();
     GAME_FONTS = {
+      fredoka: "Fredoka",
       future: "Kenney Future",
       "future-narrow": "Kenney Future Narrow",
       pixel: "Kenney Pixel",
@@ -15158,10 +15164,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,
         {
@@ -15176,8 +15182,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(
@@ -15654,6 +15663,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"() {
@@ -15661,6 +15680,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 = ({
@@ -15669,6 +15690,8 @@ var init_LearningCanvas = __esm({
       height = 400,
       backgroundColor,
       shapes = [],
+      drawables,
+      projector,
       readouts,
       traces,
       interactive = false,
@@ -15682,6 +15705,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;
@@ -15725,20 +15751,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;
@@ -27170,8 +27205,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);
@@ -27386,7 +27422,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" }),
@@ -27403,7 +27439,7 @@ var init_DashboardLayout = __esm({
                                 )
                               ]
                             },
-                            `${action.event}-${idx}`
+                            `${action.event ?? action.navigatesTo ?? "action"}-${idx}`
                           )),
                           notificationsEnabled && /* @__PURE__ */ jsxs(
                             Button,
@@ -33065,6 +33101,7 @@ var init_MathCanvas = __esm({
       angles = [],
       hops = [],
       shapes = [],
+      drawables,
       readouts,
       traces,
       interactive = false,
@@ -33371,6 +33408,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(
@@ -33380,6 +33453,8 @@ var init_MathCanvas = __esm({
             height,
             backgroundColor,
             shapes: derivedShapes,
+            drawables,
+            projector,
             readouts,
             traces,
             interactive,
@@ -34609,7 +34684,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect67, useRef: useRef65, useCallback: useCallback96, useState: useState102 } = React94__default;
+      const { useEffect: useEffect67, useRef: useRef65, useCallback: useCallback96, useState: useState103 } = React94__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 }) {
@@ -34654,7 +34729,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState102(null);
+        const [clickedPosition, setClickedPosition] = useState103(null);
         const handleMapClick = useCallback96((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });

package/dist/{avl-schema-parser-CLIm28Wa.d.ts → avl-schema-parser-BKbH_SFt.d.ts}

@@ -1,7 +1,7 @@
 import { AnimationName, Asset, ScenePos, EventEmit, JsonObject, JsonValue } from '@almadar/core';
 import React__default from 'react';
 import * as THREE from 'three';
-import { D as DrawableNode } from './paintDispatch-B5n2DTB-.js';
+import { D as DrawableNode } from './paintDispatch-B5ObLnUv.js';
 
 /**
  * Sprite Sheet Animation Types

package/dist/{avl-schema-parser-Do_LPV1o.d.cts → avl-schema-parser-C6Yz2MuW.d.cts}

@@ -1,7 +1,7 @@
 import { AnimationName, Asset, ScenePos, EventEmit, JsonObject, JsonValue } from '@almadar/core';
 import React__default from 'react';
 import * as THREE from 'three';
-import { D as DrawableNode } from './paintDispatch-DgBctxIq.cjs';
+import { D as DrawableNode } from './paintDispatch-D3R8NNmV.cjs';
 
 /**
  * Sprite Sheet Animation Types

package/dist/{cn-CFurBb2q.d.ts → cn-BbhJq_nr.d.ts}

@@ -1,6 +1,6 @@
 import { OrbitalSchema, SExpr, Effect, OrbitalVerificationAPI, TraitStateSnapshot, EventPayload, BusEvent, VerificationCheck, BridgeHealth, VerificationSnapshot, VerificationSummary, TransitionTrace, ServerResponseTrace, CheckStatus, AssetLoadStatus } from '@almadar/core';
 import React__default from 'react';
-import { D as DrawableNode } from './paintDispatch-B5n2DTB-.js';
+import { D as DrawableNode } from './paintDispatch-B5ObLnUv.js';
 import { ClassValue } from 'clsx';
 
 /**

package/dist/{cn-TH-RHihd.d.cts → cn-DJSBBm5W.d.cts}

@@ -1,6 +1,6 @@
 import { OrbitalSchema, SExpr, Effect, OrbitalVerificationAPI, TraitStateSnapshot, EventPayload, BusEvent, VerificationCheck, BridgeHealth, VerificationSnapshot, VerificationSummary, TransitionTrace, ServerResponseTrace, CheckStatus, AssetLoadStatus } from '@almadar/core';
 import React__default from 'react';
-import { D as DrawableNode } from './paintDispatch-DgBctxIq.cjs';
+import { D as DrawableNode } from './paintDispatch-D3R8NNmV.cjs';
 import { ClassValue } from 'clsx';
 
 /**