@almadar/ui 5.139.0 → 5.140.0

package/dist/runtime/index.js

@@ -9177,6 +9177,12 @@ function createWebPainter(ctx, onAssetLoad) {
     for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
     if (closed) ctx.closePath();
   };
+  const toCanvasStyle = (style) => {
+    if (typeof style === "string") return style;
+    const g = style.kind === "linear" ? ctx.createLinearGradient(style.x1, style.y1, style.x2, style.y2) : ctx.createRadialGradient(style.cx, style.cy, 0, style.cx, style.cy, style.r);
+    for (const stop of style.stops) g.addColorStop(stop.offset, stop.color);
+    return g;
+  };
   return {
     setViewport(width, height, dpr) {
       vw = width;
@@ -9230,47 +9236,47 @@ function createWebPainter(ctx, onAssetLoad) {
         ctx.drawImage(img, dest.x, dest.y, dw, dh);
       }
     },
-    fillRect(x, y, w, h, color) {
-      ctx.fillStyle = color;
+    fillRect(x, y, w, h, style) {
+      ctx.fillStyle = toCanvasStyle(style);
       ctx.fillRect(x, y, w, h);
     },
-    strokeRect(x, y, w, h, color, lineWidth = 1) {
-      ctx.strokeStyle = color;
+    strokeRect(x, y, w, h, style, lineWidth = 1) {
+      ctx.strokeStyle = toCanvasStyle(style);
       ctx.lineWidth = lineWidth;
       ctx.strokeRect(x, y, w, h);
     },
-    fillPoly(points, color) {
+    fillPoly(points, style) {
       if (points.length === 0) return;
       tracePoly(points, true);
-      ctx.fillStyle = color;
+      ctx.fillStyle = toCanvasStyle(style);
       ctx.fill();
     },
-    strokePoly(points, color, lineWidth = 1, closed = false) {
+    strokePoly(points, style, lineWidth = 1, closed = false) {
       if (points.length === 0) return;
       tracePoly(points, closed);
-      ctx.strokeStyle = color;
+      ctx.strokeStyle = toCanvasStyle(style);
       ctx.lineWidth = lineWidth;
       ctx.stroke();
     },
-    fillEllipse(cx, cy, rx, ry, color) {
+    fillEllipse(cx, cy, rx, ry, style) {
       ctx.beginPath();
       ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
-      ctx.fillStyle = color;
+      ctx.fillStyle = toCanvasStyle(style);
       ctx.fill();
     },
-    strokeEllipse(cx, cy, rx, ry, color, lineWidth = 1) {
+    strokeEllipse(cx, cy, rx, ry, style, lineWidth = 1) {
       ctx.beginPath();
       ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
-      ctx.strokeStyle = color;
+      ctx.strokeStyle = toCanvasStyle(style);
       ctx.lineWidth = lineWidth;
       ctx.stroke();
     },
-    fillPath(d, color) {
-      ctx.fillStyle = color;
+    fillPath(d, style) {
+      ctx.fillStyle = toCanvasStyle(style);
       ctx.fill(new Path2D(d));
     },
-    strokePath(d, color, lineWidth = 1) {
-      ctx.strokeStyle = color;
+    strokePath(d, style, lineWidth = 1) {
+      ctx.strokeStyle = toCanvasStyle(style);
       ctx.lineWidth = lineWidth;
       ctx.stroke(new Path2D(d));
     },
@@ -9445,6 +9451,84 @@ var init_registry = __esm({
     DrawableRegistryContext = createContext(null);
   }
 });
+function isAnimatedShape(node) {
+  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
+}
+function applyShapeAnimation(node, timeMs) {
+  const anim = node.animation;
+  if (!anim || !(anim.durationMs > 0) || anim.keyframes.length === 0) return node;
+  const frames = [...anim.keyframes].sort((a, b) => a.at - b.at);
+  const cycle = timeMs / anim.durationMs;
+  const t = anim.loop === false ? Math.min(cycle, 1) : cycle - Math.floor(cycle);
+  const out = { ...node };
+  const trackValue = (key) => {
+    const defined = frames.filter((f3) => f3[key] !== void 0);
+    if (defined.length === 0) return void 0;
+    let prev;
+    let next;
+    for (const f3 of defined) {
+      if (f3.at <= t) prev = f3;
+      else if (!next) next = f3;
+    }
+    if (!prev) return defined[0][key];
+    if (!next) return prev[key];
+    const span = next.at - prev.at;
+    const k = span > 0 ? (t - prev.at) / span : 1;
+    const a = prev[key];
+    const b = next[key];
+    if (typeof a === "number" && typeof b === "number") return lerp(a, b, k);
+    return a;
+  };
+  for (const key of NUMERIC_TRACKS) {
+    const v = trackValue(key);
+    if (v !== void 0) out[key] = v;
+  }
+  const fill = trackValue("fill");
+  if (fill !== void 0) out.fill = fill;
+  const stroke = trackValue("stroke");
+  if (stroke !== void 0) out.stroke = stroke;
+  const shadowFrames = frames.filter((f3) => f3.shadow !== void 0);
+  if (shadowFrames.length > 0) {
+    const sh = trackValue("shadow");
+    if (sh !== void 0) {
+      let prevSh;
+      let nextSh;
+      for (const f3 of shadowFrames) {
+        if (f3.at <= t) prevSh = f3;
+        else if (!nextSh) nextSh = f3;
+      }
+      if (prevSh?.shadow && nextSh?.shadow) {
+        const span = nextSh.at - prevSh.at;
+        const k = span > 0 ? (t - prevSh.at) / span : 1;
+        out.shadow = { color: prevSh.shadow.color, blur: lerp(prevSh.shadow.blur, nextSh.shadow.blur, k) };
+      } else {
+        out.shadow = sh;
+      }
+    }
+  }
+  return out;
+}
+function gradientStyle(g, ox, oy, scale) {
+  if (g.kind === "linear") {
+    if (!g.from || !g.to) return void 0;
+    return {
+      kind: "linear",
+      x1: ox + g.from.x * scale,
+      y1: oy + g.from.y * scale,
+      x2: ox + g.to.x * scale,
+      y2: oy + g.to.y * scale,
+      stops: g.stops
+    };
+  }
+  if (!g.center || g.radius === void 0) return void 0;
+  return {
+    kind: "radial",
+    cx: ox + g.center.x * scale,
+    cy: oy + g.center.y * scale,
+    r: g.radius * scale,
+    stops: g.stops
+  };
+}
 function DrawShape(props) {
   const register = useContext(DrawableRegistryContext);
   if (register) {
@@ -9455,25 +9539,51 @@ function DrawShape(props) {
       ...opacity !== void 0 && opacity > 0 ? { opacity } : {}
     };
     register(node);
-    return /* @__PURE__ */ jsx("div", { "data-draw-shape-debug": "", style: { position: "absolute", width: 4, height: 4, background: "red", zIndex: 9999 } });
   }
   return null;
 }
-var paintShape;
+var NUMERIC_TRACKS, lerp, paintShape;
 var init_DrawShape = __esm({
   "components/game/atoms/DrawShape.tsx"() {
     "use client";
     init_contract();
     init_registry();
-    paintShape = (painter, node, dctx) => {
+    NUMERIC_TRACKS = [
+      "offsetX",
+      "offsetY",
+      "rotate",
+      "opacity",
+      "radiusX",
+      "radiusY",
+      "width",
+      "height",
+      "strokeWidth"
+    ];
+    lerp = (a, b, k) => a + (b - a) * k;
+    paintShape = (painter, rawNode, dctx) => {
+      const node = dctx.time > 0 ? applyShapeAnimation(rawNode, dctx.time) : rawNode;
       if (!isValidScenePos(node.position)) return;
       painter.save();
       if (node.opacity !== void 0 && node.opacity !== 1) painter.setAlpha(node.opacity);
+      const origin = dctx.projector.project(node.position);
+      const tileWidth = dctx.projector.tileWidth;
+      if (node.rotate) {
+        const pivot = node.pivot ?? { x: 0.5, y: 0.5 };
+        const px = origin.x + pivot.x * tileWidth;
+        const py = origin.y + pivot.y * tileWidth;
+        painter.translate(px, py);
+        painter.rotate(node.rotate);
+        painter.translate(-px, -py);
+      }
+      if (node.shadow) painter.setShadow({ color: node.shadow.color, blur: node.shadow.blur * tileWidth });
+      const fill = node.fill === "none" ? void 0 : node.fill;
+      const stroke = node.stroke === "none" ? void 0 : node.stroke;
+      const pxFill = node.gradient ? gradientStyle(node.gradient, origin.x, origin.y, tileWidth) ?? fill : fill;
       switch (node.shape) {
         case "cell": {
           const pts = dctx.projector.cellPath(node.position);
-          if (node.fill) painter.fillPoly(pts, node.fill);
-          if (node.stroke) painter.strokePoly(pts, node.stroke, node.strokeWidth ?? 1, true);
+          if (pxFill) painter.fillPoly(pts, pxFill);
+          if (stroke) painter.strokePoly(pts, stroke, node.strokeWidth ?? 1, true);
           break;
         }
         case "rect": {
@@ -9483,8 +9593,8 @@ var init_DrawShape = __esm({
           const y = p.y + (node.offsetY ?? 0) * tw;
           const w = (node.width ?? 0) * tw;
           const h = (node.height ?? 0) * tw;
-          if (node.fill) painter.fillRect(x, y, w, h, node.fill);
-          if (node.stroke) painter.strokeRect(x, y, w, h, node.stroke, node.strokeWidth ?? 1);
+          if (pxFill) painter.fillRect(x, y, w, h, pxFill);
+          if (stroke) painter.strokeRect(x, y, w, h, stroke, node.strokeWidth ?? 1);
           break;
         }
         case "ellipse": {
@@ -9494,26 +9604,26 @@ var init_DrawShape = __esm({
           const cy = p.y + (node.offsetY ?? 0) * tw;
           const rx = (node.radiusX ?? 0) * tw;
           const ry = (node.radiusY ?? rx) * tw;
-          if (node.fill) painter.fillEllipse(cx, cy, rx, ry, node.fill);
-          if (node.stroke) painter.strokeEllipse(cx, cy, rx, ry, node.stroke, node.strokeWidth ?? 1);
+          if (pxFill) painter.fillEllipse(cx, cy, rx, ry, pxFill);
+          if (stroke) painter.strokeEllipse(cx, cy, rx, ry, stroke, node.strokeWidth ?? 1);
           break;
         }
         case "poly": {
-          const base = dctx.projector.project(node.position);
-          const tw = dctx.projector.tileWidth;
-          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x * tw, y: base.y + pt.y * tw }));
-          if (node.fill) painter.fillPoly(pts, node.fill);
-          if (node.stroke) painter.strokePoly(pts, node.stroke, node.strokeWidth ?? 1, true);
+          const pts = (node.points ?? []).map((pt) => ({
+            x: origin.x + ((node.offsetX ?? 0) + pt.x) * tileWidth,
+            y: origin.y + ((node.offsetY ?? 0) + pt.y) * tileWidth
+          }));
+          if (pxFill) painter.fillPoly(pts, pxFill);
+          if (stroke) painter.strokePoly(pts, stroke, node.strokeWidth ?? 1, true);
           break;
         }
         case "path": {
           if (!node.d) break;
-          const base = dctx.projector.project(node.position);
-          const tw = dctx.projector.tileWidth;
-          painter.translate(base.x, base.y);
-          painter.scale(tw, tw);
-          if (node.fill) painter.fillPath(node.d, node.fill);
-          if (node.stroke) painter.strokePath(node.d, node.stroke, (node.strokeWidth ?? 1) / tw);
+          painter.translate(origin.x + (node.offsetX ?? 0) * tileWidth, origin.y + (node.offsetY ?? 0) * tileWidth);
+          painter.scale(tileWidth, tileWidth);
+          const localFill = node.gradient ? gradientStyle(node.gradient, 0, 0, 1) ?? fill : fill;
+          if (localFill) painter.fillPath(node.d, localFill);
+          if (stroke) painter.strokePath(node.d, stroke, (node.strokeWidth ?? 1) / tileWidth);
           break;
         }
       }
@@ -9725,7 +9835,6 @@ function Canvas2D({
     childDrawablesRef.current.push(node);
   }, []);
   const hasJsxChildren = React84.Children.count(children) > 0;
-  drawables && drawables.length > 0 ? drawables : childDrawablesRef.current;
   function isDrawableLayer(node) {
     return node.type === "draw-sprite-layer" || node.type === "draw-shape-layer" || node.type === "draw-text-layer";
   }
@@ -9874,11 +9983,24 @@ function Canvas2D({
   }, [showMinimap, scenePositions]);
   const miniMapWidth = gridExtent.width || 10;
   const miniMapHeight = gridExtent.height || 10;
-  const draw = useCallback(() => {
+  const drawableIsAnimated = (node) => {
+    if (node.type === "draw-shape") return isAnimatedShape(node);
+    if (node.type === "draw-group") return Array.isArray(node.items) && node.items.some(drawableIsAnimated);
+    if (node.type === "draw-shape-layer") return Array.isArray(node.items) && node.items.some(isAnimatedShape);
+    return false;
+  };
+  const animRafRef = useRef(0);
+  const drawTimeRef = useRef(() => void 0);
+  const draw = useCallback((timeMs = 0) => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
+    const scheduleAnimation = (nodes) => {
+      if (!nodes.some(drawableIsAnimated)) return;
+      cancelAnimationFrame(animRafRef.current);
+      animRafRef.current = requestAnimationFrame(() => drawTimeRef.current(performance.now()));
+    };
     const dpr = window.devicePixelRatio || 1;
     canvas.width = viewportSize.width * dpr;
     canvas.height = viewportSize.height * dpr;
@@ -9911,14 +10033,24 @@ function Canvas2D({
     if (!drawables || drawables.length === 0) {
       const childDrawables = childDrawablesRef.current;
       if (childDrawables.length === 0) return;
+      const cam0 = cameraRef.current;
+      if (camera !== "follow" && dragDistance() === 0) {
+        const focus = cameraPos ?? defaultGridFocus;
+        if (focus) {
+          const p = projector.anchorPoint(focus, "center");
+          cam0.x = p.x - viewportSize.width / 2;
+          cam0.y = p.y - viewportSize.height / 2;
+        }
+      }
       const painter0 = createWebPainter(ctx, bumpAtlas);
       painter0.save();
       painter0.translate(viewportSize.width / 2, viewportSize.height / 2);
-      painter0.scale(cameraRef.current.zoom, cameraRef.current.zoom);
-      painter0.translate(-viewportSize.width / 2, -viewportSize.height / 2);
-      const dctx0 = { projector, time: 0, invalidate: bumpAtlas };
+      painter0.scale(cam0.zoom, cam0.zoom);
+      painter0.translate(-viewportSize.width / 2 - cam0.x, -viewportSize.height / 2 - cam0.y);
+      const dctx0 = { projector, time: timeMs, invalidate: bumpAtlas };
       for (const node of childDrawables) paintDrawable(painter0, node, dctx0);
       painter0.restore();
+      scheduleAnimation(childDrawables);
       return;
     }
     const cam = cameraRef.current;
@@ -9938,10 +10070,15 @@ function Canvas2D({
     painter.translate(viewportSize.width / 2, viewportSize.height / 2);
     painter.scale(cam.zoom, cam.zoom);
     painter.translate(-viewportSize.width / 2 - cam.x, -viewportSize.height / 2 - cam.y);
-    const dctx = { projector, time: 0, invalidate: bumpAtlas };
+    const dctx = { projector, time: timeMs, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
+    scheduleAnimation(drawables);
   }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
+  useEffect(() => {
+    drawTimeRef.current = draw;
+  }, [draw]);
+  useEffect(() => () => cancelAnimationFrame(animRafRef.current), []);
   useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");
@@ -10164,15 +10301,7 @@ function Canvas2D({
             mapHeight: miniMapHeight
           }
         ) }),
-        hasJsxChildren && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { position: "absolute", width: 0, height: 0, overflow: "hidden" }, children }),
-        /* @__PURE__ */ jsxs("div", { "data-debug": "", style: { position: "absolute", top: 0, left: 0, background: "yellow", color: "black", zIndex: 9999, fontSize: 24, padding: 8 }, children: [
-          "C=",
-          React84.Children.count(children),
-          " J=",
-          String(hasJsxChildren),
-          " D=",
-          drawables?.length ?? -1
-        ] })
+        hasJsxChildren && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { position: "absolute", width: 0, height: 0, overflow: "hidden" }, children })
       ]
     }
   ) });
@@ -10197,6 +10326,7 @@ var init_Canvas2D = __esm({
     init_webPainter2d();
     init_projector();
     init_paintDispatch();
+    init_DrawShape();
     init_registry();
     init_hitTest();
     init_isometric();
@@ -44984,8 +45114,13 @@ function SlotContentRenderer({
     const isSingleChild = typeof childrenConfig === "string" || typeof childrenConfig === "object" && childrenConfig !== null && !Array.isArray(childrenConfig) && "type" in childrenConfig;
     const hasChildren = PATTERNS_WITH_CHILDREN.has(content.pattern) || Array.isArray(childrenConfig) && childrenConfig.length > 0 || isSingleChild;
     const isDrawHost = isDrawHostPattern(content.pattern);
+    const arr = Array.isArray(childrenConfig) ? childrenConfig : childrenConfig ? [childrenConfig] : [];
+    const hasTraitChildren = arr.some(
+      (c) => typeof c === "string" && TRAIT_BINDING_RE.test(c)
+    );
+    const drawHostUsesReactChildren = isDrawHost && hasTraitChildren;
     const myPath = patternPath ?? "root";
-    const renderedChildren = hasChildren && !isDrawHost ? renderPatternChildren(childrenConfig, onDismiss, content.id, myPath, content.sourceTrait, {
+    const renderedChildren = hasChildren && (!isDrawHost || drawHostUsesReactChildren) ? renderPatternChildren(childrenConfig, onDismiss, content.id, myPath, content.sourceTrait, {
       slot: content.slot,
       transitionEvent: content.transitionEvent,
       fromState: content.fromState,
@@ -45046,7 +45181,7 @@ function SlotContentRenderer({
     for (const [k, v] of Object.entries(nodeSlotOverrides)) {
       finalProps[k] = v;
     }
-    if (isDrawHost && Array.isArray(childrenConfig) && childrenConfig.length > 0) {
+    if (isDrawHost && !drawHostUsesReactChildren && Array.isArray(childrenConfig) && childrenConfig.length > 0) {
       finalProps.drawables = toDrawableNodes(childrenConfig);
     }
     const entityVal = finalProps.entity;
@@ -45225,6 +45360,8 @@ var init_UISlotRenderer = __esm({
       "vstack",
       "hstack",
       "box",
+      "canvas",
+      "canvas-2d",
       "grid",
       "center",
       "card",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.139.0",
+  "version": "5.140.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -118,11 +118,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.45.0",
+    "@almadar/core": "^10.46.0",
     "@almadar/evaluator": "^2.38.0",
     "@almadar/logger": "^1.10.0",
     "@almadar/runtime": "^6.47.0",
-    "@almadar/std": "^16.155.0",
+    "@almadar/std": "^16.156.0",
     "@almadar/syntax": "^1.13.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",