@almadar/ui 6.0.0 → 6.2.0

package/dist/runtime/index.js

@@ -6,7 +6,7 @@ import { createLogger, setNamespaceLevel, isLogLevelEnabled } from '@almadar/log
 import { perfStore, pushPerfEntry, wrapCallbackForEvent, perfStart, perfEnd, perfGauge, prepareSchemaForPreview, perfTimeAsync, collectTraitRefsFromResolvedTrait, buildOrbitalsByTrait, collectEmbeddedTraits } from '@almadar/runtime/ui';
 export { PERF_NAMESPACE, adjustSchemaForMockData, buildMockData, clearPerf, perfEnd, perfStart, perfTime, prepareSchemaForPreview, wrapCallbackForEvent } from '@almadar/runtime/ui';
 import { StateMachineManager, collectDeclaredConfigDefaults, resolveCallSitePayloadCaptures, createServerEffectHandlers, EffectExecutor, createContextFromBindings, createTickScheduler, isValidCronExpression, parseDurationString, InMemoryPersistence, normalizeCallSiteConfigToValues, interpolateValue } from '@almadar/runtime';
-import { mergeEntityFrame, isCircuitEvent, applyListenPayloadMapping, schemaToIR, getPage, clearSchemaCache as clearSchemaCache$1, walkSExpr, buildResolvedTraitConfigs, isRenderBindingMarker, isFileValue, isInlineTrait, containsEntityBinding, isSExpr, isEventPayloadValue, RENDER_BINDING_MARKER, ANIMATION_NAMES } from '@almadar/core';
+import { mergeEntityFrame, isCircuitEvent, applyListenPayloadMapping, schemaToIR, getPage, clearSchemaCache as clearSchemaCache$1, walkSExpr, buildResolvedTraitConfigs, isRenderBindingMarker, isFileValue, isInlineTrait, containsEntityBinding, isSExpr, isEventPayloadValue, RENDER_BINDING_MARKER } from '@almadar/core';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as LucideIcons2 from 'lucide-react';
@@ -3733,9 +3733,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 }),
@@ -6258,6 +6265,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,
@@ -7789,9 +7797,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,
@@ -9618,13 +9623,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 };
         }
       }
@@ -10172,7 +10181,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));
@@ -11752,6 +11764,7 @@ var init_GameShell = __esm({
     init_Typography();
     init_AtlasImage();
     GAME_FONTS = {
+      fredoka: "Fredoka",
       future: "Kenney Future",
       "future-narrow": "Kenney Future Narrow",
       pixel: "Kenney Pixel",
@@ -11768,10 +11781,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,
         {
@@ -11786,8 +11799,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(
@@ -12251,6 +12267,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"() {
@@ -12258,6 +12284,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 = ({
@@ -12266,6 +12294,8 @@ var init_LearningCanvas = __esm({
       height = 400,
       backgroundColor,
       shapes = [],
+      drawables,
+      projector,
       readouts,
       traces,
       interactive = false,
@@ -12279,6 +12309,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;
@@ -12322,20 +12355,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;
@@ -24463,8 +24505,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);
@@ -24679,7 +24722,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" }),
@@ -24696,7 +24739,7 @@ var init_DashboardLayout = __esm({
                                 )
                               ]
                             },
-                            `${action.event}-${idx}`
+                            `${action.event ?? action.navigatesTo ?? "action"}-${idx}`
                           )),
                           notificationsEnabled && /* @__PURE__ */ jsxs(
                             Button,
@@ -30294,6 +30337,7 @@ var init_MathCanvas = __esm({
       angles = [],
       hops = [],
       shapes = [],
+      drawables,
       readouts,
       traces,
       interactive = false,
@@ -30600,6 +30644,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(
@@ -30609,6 +30689,8 @@ var init_MathCanvas = __esm({
             height,
             backgroundColor,
             shapes: derivedShapes,
+            drawables,
+            projector,
             readouts,
             traces,
             interactive,
@@ -31838,7 +31920,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect63, useRef: useRef63, useCallback: useCallback90, useState: useState94 } = React85__default;
+      const { useEffect: useEffect63, useRef: useRef63, useCallback: useCallback90, useState: useState95 } = React85__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 }) {
@@ -31883,7 +31965,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 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "6.0.0",
+  "version": "6.2.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -118,11 +118,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.77.0",
+    "@almadar/core": "^10.79.0",
     "@almadar/evaluator": "^2.43.0",
     "@almadar/logger": "^1.12.0",
-    "@almadar/runtime": "^6.67.0",
-    "@almadar/std": "^16.197.0",
+    "@almadar/runtime": "^6.69.0",
+    "@almadar/std": "^16.199.0",
     "@almadar/syntax": "^1.16.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",

package/themes/index.css

@@ -12,7 +12,7 @@
  * plus VT323 for retro's pixel display type.
  * Combined into a single Google Fonts request for fewer round-trips. font-display: swap
  * means body text renders immediately with the fallback chain while the web fonts load. */
-@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;700;900&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&family=VT323&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;700;900&family=Fredoka:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&family=VT323&display=swap");
 
 /* Kenney game font faces — consumed by the game themes and GameShell's fontFamily knob. */
 @import "./_fonts-kenney.css";