@almadar/ui 5.139.0 → 5.141.0

package/dist/runtime/index.cjs

@@ -9241,9 +9241,26 @@ var init_imageCache = __esm({
 });
 
 // lib/webPainter2d.ts
+function makeNoiseTile(alpha, color) {
+  const tile = document.createElement("canvas");
+  tile.width = NOISE_CELLS;
+  tile.height = NOISE_CELLS;
+  const t = tile.getContext("2d");
+  if (t) {
+    t.fillStyle = color;
+    for (let y = 0; y < NOISE_CELLS; y++) {
+      for (let x = 0; x < NOISE_CELLS; x++) {
+        t.globalAlpha = noiseHash(x, y) * alpha;
+        t.fillRect(x, y, 1, 1);
+      }
+    }
+  }
+  return tile;
+}
 function createWebPainter(ctx, onAssetLoad) {
   let vw = 0;
   let vh = 0;
+  const patternCache = /* @__PURE__ */ new Map();
   const tracePoly = (points, closed) => {
     if (points.length === 0) return;
     ctx.beginPath();
@@ -9251,6 +9268,31 @@ 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 toCanvasPattern = (style) => {
+    const key = JSON.stringify(style);
+    let pattern = patternCache.get(key);
+    if (pattern === void 0) {
+      if (style.kind === "noise") {
+        pattern = ctx.createPattern(makeNoiseTile(style.alpha ?? 0.12, style.color ?? "#000000"), "repeat");
+      } else {
+        const img = getOrLoadImage(style.url, onAssetLoad);
+        if (!img) return "rgba(0,0,0,0)";
+        pattern = ctx.createPattern(img, "repeat");
+      }
+      if (pattern && style.scale !== void 0 && style.scale !== 1) {
+        pattern.setTransform(new DOMMatrix().scale(style.scale));
+      }
+      patternCache.set(key, pattern);
+    }
+    return pattern ?? "rgba(0,0,0,0)";
+  };
+  const toCanvasStyle = (style) => {
+    if (typeof style === "string") return style;
+    if (style.kind === "noise" || style.kind === "image") return toCanvasPattern(style);
+    const g = style.kind === "linear" ? ctx.createLinearGradient(style.x1, style.y1, style.x2, style.y2) : style.kind === "conic" ? ctx.createConicGradient(style.angle, style.cx, style.cy) : 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;
@@ -9282,6 +9324,19 @@ function createWebPainter(ctx, onAssetLoad) {
       ctx.shadowColor = shadow ? shadow.color : "transparent";
       ctx.shadowBlur = shadow ? shadow.blur : 0;
     },
+    setBlend(mode) {
+      ctx.globalCompositeOperation = mode ?? "source-over";
+    },
+    setLineDash(pattern, offset = 0) {
+      ctx.setLineDash(pattern ? [...pattern] : []);
+      ctx.lineDashOffset = offset;
+    },
+    setBlur(px) {
+      ctx.filter = px && px > 0 ? `blur(${px}px)` : "none";
+    },
+    clipPath(d) {
+      ctx.clip(new Path2D(d));
+    },
     resolveTexture(url) {
       const img = getOrLoadImage(url, onAssetLoad);
       if (!img) return null;
@@ -9304,47 +9359,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));
     },
@@ -9357,13 +9412,18 @@ function createWebPainter(ctx, onAssetLoad) {
     }
   };
 }
-var handleByImage, imageByHandle;
+var handleByImage, imageByHandle, noiseHash, NOISE_CELLS;
 var init_webPainter2d = __esm({
   "lib/webPainter2d.ts"() {
     "use client";
     init_imageCache();
     handleByImage = /* @__PURE__ */ new WeakMap();
     imageByHandle = /* @__PURE__ */ new WeakMap();
+    noiseHash = (x, y) => {
+      const s = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
+      return s - Math.floor(s);
+    };
+    NOISE_CELLS = 32;
   }
 });
 
@@ -9519,6 +9579,101 @@ var init_registry = __esm({
     DrawableRegistryContext = React84.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.kind === "conic") {
+    if (!g.center) return void 0;
+    return {
+      kind: "conic",
+      cx: ox + g.center.x * scale,
+      cy: oy + g.center.y * scale,
+      angle: g.angle ?? 0,
+      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 patternStyle(p, unit) {
+  if (p.kind === "image") {
+    if (!p.url) return void 0;
+    return { kind: "image", url: p.url, scale: (p.scale ?? 1) / unit };
+  }
+  return { kind: "noise", scale: (p.scale ?? 2) / unit, alpha: p.alpha, color: p.color };
+}
 function DrawShape(props) {
   const register = React84.useContext(DrawableRegistryContext);
   if (register) {
@@ -9529,25 +9684,66 @@ function DrawShape(props) {
       ...opacity !== void 0 && opacity > 0 ? { opacity } : {}
     };
     register(node);
-    return /* @__PURE__ */ jsxRuntime.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",
+      "strokeDashOffset",
+      "blur"
+    ];
+    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;
+      const groupScale = dctx.groupScale ?? 1;
+      const strokePx = (node.strokeWidth ?? 1) / groupScale;
+      if (node.blendMode) painter.setBlend(node.blendMode);
+      if (node.strokeDash && node.strokeDash.length > 0) {
+        painter.setLineDash(
+          node.strokeDash.map((v) => v / groupScale),
+          (node.strokeDashOffset ?? 0) / groupScale
+        );
+      }
+      if (node.blur !== void 0 && node.blur > 0) painter.setBlur(node.blur / groupScale);
+      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 * groupScale });
+      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;
+      const pxStroke = node.strokeGradient ? gradientStyle(node.strokeGradient, origin.x, origin.y, tileWidth) ?? stroke : stroke;
+      const patFill = node.fillPattern ? patternStyle(node.fillPattern, groupScale) : void 0;
       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 (patFill) painter.fillPoly(pts, patFill);
+          if (pxStroke) painter.strokePoly(pts, pxStroke, strokePx, true);
           break;
         }
         case "rect": {
@@ -9557,8 +9753,9 @@ 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 (patFill) painter.fillRect(x, y, w, h, patFill);
+          if (pxStroke) painter.strokeRect(x, y, w, h, pxStroke, strokePx);
           break;
         }
         case "ellipse": {
@@ -9568,26 +9765,38 @@ 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 (patFill) painter.fillEllipse(cx, cy, rx, ry, patFill);
+          if (pxStroke) painter.strokeEllipse(cx, cy, rx, ry, pxStroke, strokePx);
           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 (patFill) painter.fillPoly(pts, patFill);
+          if (pxStroke) painter.strokePoly(pts, pxStroke, strokePx, 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);
+          if (node.strokeDash && node.strokeDash.length > 0) {
+            painter.setLineDash(
+              node.strokeDash.map((v) => v / (groupScale * tileWidth)),
+              (node.strokeDashOffset ?? 0) / (groupScale * tileWidth)
+            );
+          }
+          if (node.blur !== void 0 && node.blur > 0) painter.setBlur(node.blur / (groupScale * tileWidth));
+          const localFill = node.gradient ? gradientStyle(node.gradient, 0, 0, 1) ?? fill : fill;
+          const localStroke = node.strokeGradient ? gradientStyle(node.strokeGradient, 0, 0, 1) ?? stroke : stroke;
+          const localPat = node.fillPattern ? patternStyle(node.fillPattern, groupScale * tileWidth) : void 0;
+          if (localFill) painter.fillPath(node.d, localFill);
+          if (localPat) painter.fillPath(node.d, localPat);
+          if (localStroke) painter.strokePath(node.d, localStroke, strokePx / tileWidth);
           break;
         }
       }
@@ -9668,8 +9877,6 @@ var init_DrawTextLayer = __esm({
     };
   }
 });
-
-// lib/drawable/paintDispatch.ts
 function paintDrawable(painter, node, dctx) {
   switch (node.type) {
     case "draw-sprite":
@@ -9690,10 +9897,20 @@ function paintDrawable(painter, node, dctx) {
       if (node.scale !== void 0) painter.scale(node.scale, node.scale);
       if (node.rotate !== void 0) painter.rotate(node.rotate);
       if (node.opacity !== void 0 && node.opacity !== 1) painter.setAlpha(node.opacity);
-      for (const item of node.items) paintDrawable(painter, item, dctx);
+      if (node.clip) {
+        const tw = dctx.projector.tileWidth;
+        painter.scale(tw, tw);
+        painter.clipPath(node.clip);
+        painter.scale(1 / tw, 1 / tw);
+      }
+      const childCtx = node.scale !== void 0 && node.scale !== 1 ? { ...dctx, groupScale: (dctx.groupScale ?? 1) * node.scale } : dctx;
+      for (const item of node.items) paintDrawable(painter, item, childCtx);
       painter.restore();
       break;
     }
+    case "draw-mesh":
+      warnUnsupported2d("draw-mesh");
+      break;
     case "draw-sprite-layer":
       paintSpriteLayer(painter, node, dctx);
       break;
@@ -9705,6 +9922,7 @@ function paintDrawable(painter, node, dctx) {
       break;
   }
 }
+var paint2dLog, warnedUnsupported2d, warnUnsupported2d;
 var init_paintDispatch = __esm({
   "lib/drawable/paintDispatch.ts"() {
     init_contract();
@@ -9714,6 +9932,13 @@ var init_paintDispatch = __esm({
     init_DrawSpriteLayer();
     init_DrawShapeLayer();
     init_DrawTextLayer();
+    paint2dLog = logger.createLogger("almadar:ui:drawable-2d");
+    warnedUnsupported2d = /* @__PURE__ */ new Set();
+    warnUnsupported2d = (kind) => {
+      if (warnedUnsupported2d.has(kind)) return;
+      warnedUnsupported2d.add(kind);
+      paint2dLog.warn("unsupported drawable kind on the 2D painter \u2014 skipped", { kind });
+    };
   }
 });
 
@@ -9728,6 +9953,7 @@ function collectDrawnItems(nodes) {
       case "draw-shape":
       case "draw-text":
       case "draw-group":
+      case "draw-mesh":
         if (isValidScenePos(n.position)) out.push({ pos: n.position, id: n.id });
         break;
       case "draw-sprite-layer":
@@ -9799,7 +10025,6 @@ function Canvas2D({
     childDrawablesRef.current.push(node);
   }, []);
   const hasJsxChildren = React84__namespace.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";
   }
@@ -9948,11 +10173,24 @@ function Canvas2D({
   }, [showMinimap, scenePositions]);
   const miniMapWidth = gridExtent.width || 10;
   const miniMapHeight = gridExtent.height || 10;
-  const draw = React84.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 = React84.useRef(0);
+  const drawTimeRef = React84.useRef(() => void 0);
+  const draw = React84.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;
@@ -9985,14 +10223,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;
@@ -10012,10 +10260,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]);
+  React84.useEffect(() => {
+    drawTimeRef.current = draw;
+  }, [draw]);
+  React84.useEffect(() => () => cancelAnimationFrame(animRafRef.current), []);
   React84.useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");
@@ -10238,15 +10491,7 @@ function Canvas2D({
             mapHeight: miniMapHeight
           }
         ) }),
-        hasJsxChildren && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { position: "absolute", width: 0, height: 0, overflow: "hidden" }, children }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-debug": "", style: { position: "absolute", top: 0, left: 0, background: "yellow", color: "black", zIndex: 9999, fontSize: 24, padding: 8 }, children: [
-          "C=",
-          React84__namespace.Children.count(children),
-          " J=",
-          String(hasJsxChildren),
-          " D=",
-          drawables?.length ?? -1
-        ] })
+        hasJsxChildren && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", style: { position: "absolute", width: 0, height: 0, overflow: "hidden" }, children })
       ]
     }
   ) });
@@ -10271,6 +10516,7 @@ var init_Canvas2D = __esm({
     init_webPainter2d();
     init_projector();
     init_paintDispatch();
+    init_DrawShape();
     init_registry();
     init_hitTest();
     init_isometric();
@@ -10325,6 +10571,7 @@ function Canvas({
       isLoading,
       cameraMode: to3DCameraMode(camera?.mode),
       ...zoom !== void 0 ? { scale: zoom } : {},
+      ...camera?.fov !== void 0 ? { fov: camera.fov } : {},
       ...camera?.target !== void 0 ? { followTarget: camera.target } : {},
       unitScale,
       backgroundColor,
@@ -38149,14 +38396,26 @@ var init_DetailPanel = __esm({
     DetailPanel.displayName = "DetailPanel";
   }
 });
-
-// components/game/atoms/DrawGroup.tsx
-function DrawGroup(_props) {
+function DrawGroup(props) {
+  const register = React84.useContext(DrawableRegistryContext);
+  if (register) register({ ...props, type: "draw-group" });
   return null;
 }
 var init_DrawGroup = __esm({
   "components/game/atoms/DrawGroup.tsx"() {
     "use client";
+    init_registry();
+  }
+});
+function DrawMesh(props) {
+  const register = React84.useContext(DrawableRegistryContext);
+  if (register) register({ ...props, type: "draw-mesh" });
+  return null;
+}
+var init_DrawMesh = __esm({
+  "components/game/atoms/DrawMesh.tsx"() {
+    "use client";
+    init_registry();
   }
 });
 function extractTitle(children) {
@@ -43882,6 +44141,7 @@ var init_component_registry_generated = __esm({
     init_DocTOC();
     init_DocumentViewer();
     init_DrawGroup();
+    init_DrawMesh();
     init_DrawShape();
     init_DrawShapeLayer();
     init_DrawSprite();
@@ -44150,6 +44410,7 @@ var init_component_registry_generated = __esm({
       "DocTOC": DocTOC,
       "DocumentViewer": DocumentViewer,
       "DrawGroup": DrawGroup,
+      "DrawMesh": DrawMesh,
       "DrawShape": DrawShape,
       "DrawShapeLayer": DrawShapeLayer,
       "DrawSprite": DrawSprite,
@@ -45058,8 +45319,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 = patterns.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,
@@ -45120,7 +45386,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;
@@ -45299,6 +45565,8 @@ var init_UISlotRenderer = __esm({
       "vstack",
       "hstack",
       "box",
+      "canvas",
+      "canvas-2d",
       "grid",
       "center",
       "card",