@almadar/ui 5.140.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,9 +9268,28 @@ 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;
-    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);
+    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;
   };
@@ -9288,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;
@@ -9363,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;
   }
 });
 
@@ -9594,6 +9648,16 @@ function gradientStyle(g, ox, oy, 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",
@@ -9603,6 +9667,13 @@ function gradientStyle(g, ox, oy, 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) {
@@ -9631,7 +9702,9 @@ var init_DrawShape = __esm({
       "radiusY",
       "width",
       "height",
-      "strokeWidth"
+      "strokeWidth",
+      "strokeDashOffset",
+      "blur"
     ];
     lerp = (a, b, k) => a + (b - a) * k;
     paintShape = (painter, rawNode, dctx) => {
@@ -9641,6 +9714,16 @@ var init_DrawShape = __esm({
       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;
@@ -9649,15 +9732,18 @@ var init_DrawShape = __esm({
         painter.rotate(node.rotate);
         painter.translate(-px, -py);
       }
-      if (node.shadow) painter.setShadow({ color: node.shadow.color, blur: node.shadow.blur * tileWidth });
+      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 (pxFill) painter.fillPoly(pts, pxFill);
-          if (stroke) painter.strokePoly(pts, stroke, node.strokeWidth ?? 1, true);
+          if (patFill) painter.fillPoly(pts, patFill);
+          if (pxStroke) painter.strokePoly(pts, pxStroke, strokePx, true);
           break;
         }
         case "rect": {
@@ -9668,7 +9754,8 @@ var init_DrawShape = __esm({
           const w = (node.width ?? 0) * tw;
           const h = (node.height ?? 0) * tw;
           if (pxFill) painter.fillRect(x, y, w, h, pxFill);
-          if (stroke) painter.strokeRect(x, y, w, h, stroke, node.strokeWidth ?? 1);
+          if (patFill) painter.fillRect(x, y, w, h, patFill);
+          if (pxStroke) painter.strokeRect(x, y, w, h, pxStroke, strokePx);
           break;
         }
         case "ellipse": {
@@ -9679,7 +9766,8 @@ var init_DrawShape = __esm({
           const rx = (node.radiusX ?? 0) * tw;
           const ry = (node.radiusY ?? rx) * tw;
           if (pxFill) painter.fillEllipse(cx, cy, rx, ry, pxFill);
-          if (stroke) painter.strokeEllipse(cx, cy, rx, ry, stroke, node.strokeWidth ?? 1);
+          if (patFill) painter.fillEllipse(cx, cy, rx, ry, patFill);
+          if (pxStroke) painter.strokeEllipse(cx, cy, rx, ry, pxStroke, strokePx);
           break;
         }
         case "poly": {
@@ -9688,16 +9776,27 @@ var init_DrawShape = __esm({
             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);
+          if (patFill) painter.fillPoly(pts, patFill);
+          if (pxStroke) painter.strokePoly(pts, pxStroke, strokePx, true);
           break;
         }
         case "path": {
           if (!node.d) break;
           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 (stroke) painter.strokePath(node.d, stroke, (node.strokeWidth ?? 1) / tileWidth);
+          if (localPat) painter.fillPath(node.d, localPat);
+          if (localStroke) painter.strokePath(node.d, localStroke, strokePx / tileWidth);
           break;
         }
       }
@@ -9778,8 +9877,6 @@ var init_DrawTextLayer = __esm({
     };
   }
 });
-
-// lib/drawable/paintDispatch.ts
 function paintDrawable(painter, node, dctx) {
   switch (node.type) {
     case "draw-sprite":
@@ -9800,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;
@@ -9815,6 +9922,7 @@ function paintDrawable(painter, node, dctx) {
       break;
   }
 }
+var paint2dLog, warnedUnsupported2d, warnUnsupported2d;
 var init_paintDispatch = __esm({
   "lib/drawable/paintDispatch.ts"() {
     init_contract();
@@ -9824,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 });
+    };
   }
 });
 
@@ -9838,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":
@@ -10455,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,
@@ -38279,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) {
@@ -44012,6 +44141,7 @@ var init_component_registry_generated = __esm({
     init_DocTOC();
     init_DocumentViewer();
     init_DrawGroup();
+    init_DrawMesh();
     init_DrawShape();
     init_DrawShapeLayer();
     init_DrawSprite();
@@ -44280,6 +44410,7 @@ var init_component_registry_generated = __esm({
       "DocTOC": DocTOC,
       "DocumentViewer": DocumentViewer,
       "DrawGroup": DrawGroup,
+      "DrawMesh": DrawMesh,
       "DrawShape": DrawShape,
       "DrawShapeLayer": DrawShapeLayer,
       "DrawSprite": DrawSprite,

package/dist/runtime/index.js

@@ -9167,9 +9167,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();
@@ -9177,9 +9194,28 @@ 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;
-    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);
+    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;
   };
@@ -9214,6 +9250,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;
@@ -9289,13 +9338,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;
   }
 });
 
@@ -9520,6 +9574,16 @@ function gradientStyle(g, ox, oy, 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",
@@ -9529,6 +9593,13 @@ function gradientStyle(g, ox, oy, 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 = useContext(DrawableRegistryContext);
   if (register) {
@@ -9557,7 +9628,9 @@ var init_DrawShape = __esm({
       "radiusY",
       "width",
       "height",
-      "strokeWidth"
+      "strokeWidth",
+      "strokeDashOffset",
+      "blur"
     ];
     lerp = (a, b, k) => a + (b - a) * k;
     paintShape = (painter, rawNode, dctx) => {
@@ -9567,6 +9640,16 @@ var init_DrawShape = __esm({
       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;
@@ -9575,15 +9658,18 @@ var init_DrawShape = __esm({
         painter.rotate(node.rotate);
         painter.translate(-px, -py);
       }
-      if (node.shadow) painter.setShadow({ color: node.shadow.color, blur: node.shadow.blur * tileWidth });
+      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 (pxFill) painter.fillPoly(pts, pxFill);
-          if (stroke) painter.strokePoly(pts, stroke, node.strokeWidth ?? 1, true);
+          if (patFill) painter.fillPoly(pts, patFill);
+          if (pxStroke) painter.strokePoly(pts, pxStroke, strokePx, true);
           break;
         }
         case "rect": {
@@ -9594,7 +9680,8 @@ var init_DrawShape = __esm({
           const w = (node.width ?? 0) * tw;
           const h = (node.height ?? 0) * tw;
           if (pxFill) painter.fillRect(x, y, w, h, pxFill);
-          if (stroke) painter.strokeRect(x, y, w, h, stroke, node.strokeWidth ?? 1);
+          if (patFill) painter.fillRect(x, y, w, h, patFill);
+          if (pxStroke) painter.strokeRect(x, y, w, h, pxStroke, strokePx);
           break;
         }
         case "ellipse": {
@@ -9605,7 +9692,8 @@ var init_DrawShape = __esm({
           const rx = (node.radiusX ?? 0) * tw;
           const ry = (node.radiusY ?? rx) * tw;
           if (pxFill) painter.fillEllipse(cx, cy, rx, ry, pxFill);
-          if (stroke) painter.strokeEllipse(cx, cy, rx, ry, stroke, node.strokeWidth ?? 1);
+          if (patFill) painter.fillEllipse(cx, cy, rx, ry, patFill);
+          if (pxStroke) painter.strokeEllipse(cx, cy, rx, ry, pxStroke, strokePx);
           break;
         }
         case "poly": {
@@ -9614,16 +9702,27 @@ var init_DrawShape = __esm({
             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);
+          if (patFill) painter.fillPoly(pts, patFill);
+          if (pxStroke) painter.strokePoly(pts, pxStroke, strokePx, true);
           break;
         }
         case "path": {
           if (!node.d) break;
           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 (stroke) painter.strokePath(node.d, stroke, (node.strokeWidth ?? 1) / tileWidth);
+          if (localPat) painter.fillPath(node.d, localPat);
+          if (localStroke) painter.strokePath(node.d, localStroke, strokePx / tileWidth);
           break;
         }
       }
@@ -9704,8 +9803,6 @@ var init_DrawTextLayer = __esm({
     };
   }
 });
-
-// lib/drawable/paintDispatch.ts
 function paintDrawable(painter, node, dctx) {
   switch (node.type) {
     case "draw-sprite":
@@ -9726,10 +9823,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;
@@ -9741,6 +9848,7 @@ function paintDrawable(painter, node, dctx) {
       break;
   }
 }
+var paint2dLog, warnedUnsupported2d, warnUnsupported2d;
 var init_paintDispatch = __esm({
   "lib/drawable/paintDispatch.ts"() {
     init_contract();
@@ -9750,6 +9858,13 @@ var init_paintDispatch = __esm({
     init_DrawSpriteLayer();
     init_DrawShapeLayer();
     init_DrawTextLayer();
+    paint2dLog = 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 });
+    };
   }
 });
 
@@ -9764,6 +9879,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":
@@ -10381,6 +10497,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,
@@ -38205,14 +38322,26 @@ var init_DetailPanel = __esm({
     DetailPanel.displayName = "DetailPanel";
   }
 });
-
-// components/game/atoms/DrawGroup.tsx
-function DrawGroup(_props) {
+function DrawGroup(props) {
+  const register = 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 = 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) {
@@ -43938,6 +44067,7 @@ var init_component_registry_generated = __esm({
     init_DocTOC();
     init_DocumentViewer();
     init_DrawGroup();
+    init_DrawMesh();
     init_DrawShape();
     init_DrawShapeLayer();
     init_DrawSprite();
@@ -44206,6 +44336,7 @@ var init_component_registry_generated = __esm({
       "DocTOC": DocTOC,
       "DocumentViewer": DocumentViewer,
       "DrawGroup": DrawGroup,
+      "DrawMesh": DrawMesh,
       "DrawShape": DrawShape,
       "DrawShapeLayer": DrawShapeLayer,
       "DrawSprite": DrawSprite,