@almadar/ui 5.140.0 → 5.141.0

package/dist/avl/index.cjs

@@ -12629,9 +12629,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();
@@ -12639,9 +12656,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;
   };
@@ -12676,6 +12712,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;
@@ -12751,13 +12800,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;
   }
 });
 
@@ -12982,6 +13036,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",
@@ -12991,6 +13055,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 = React93.useContext(DrawableRegistryContext);
   if (register) {
@@ -13019,7 +13090,9 @@ var init_DrawShape = __esm({
       "radiusY",
       "width",
       "height",
-      "strokeWidth"
+      "strokeWidth",
+      "strokeDashOffset",
+      "blur"
     ];
     lerp = (a, b, k) => a + (b - a) * k;
     paintShape = (painter, rawNode, dctx) => {
@@ -13029,6 +13102,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;
@@ -13037,15 +13120,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": {
@@ -13056,7 +13142,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": {
@@ -13067,7 +13154,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": {
@@ -13076,16 +13164,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;
         }
       }
@@ -13166,8 +13265,6 @@ var init_DrawTextLayer = __esm({
     };
   }
 });
-
-// lib/drawable/paintDispatch.ts
 function paintDrawable(painter, node, dctx) {
   switch (node.type) {
     case "draw-sprite":
@@ -13188,10 +13285,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;
@@ -13203,6 +13310,7 @@ function paintDrawable(painter, node, dctx) {
       break;
   }
 }
+var paint2dLog, warnedUnsupported2d, warnUnsupported2d;
 var init_paintDispatch = __esm({
   "lib/drawable/paintDispatch.ts"() {
     init_contract();
@@ -13212,6 +13320,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 });
+    };
   }
 });
 
@@ -13226,6 +13341,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":
@@ -13843,6 +13959,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,
@@ -40784,14 +40901,26 @@ var init_DetailPanel = __esm({
     DetailPanel.displayName = "DetailPanel";
   }
 });
-
-// components/game/atoms/DrawGroup.tsx
-function DrawGroup(_props) {
+function DrawGroup(props) {
+  const register = React93.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 = React93.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) {
@@ -46517,6 +46646,7 @@ var init_component_registry_generated = __esm({
     init_DocTOC();
     init_DocumentViewer();
     init_DrawGroup();
+    init_DrawMesh();
     init_DrawShape();
     init_DrawShapeLayer();
     init_DrawSprite();
@@ -46785,6 +46915,7 @@ var init_component_registry_generated = __esm({
       "DocTOC": DocTOC,
       "DocumentViewer": DocumentViewer,
       "DrawGroup": DrawGroup,
+      "DrawMesh": DrawMesh,
       "DrawShape": DrawShape,
       "DrawShapeLayer": DrawShapeLayer,
       "DrawSprite": DrawSprite,

package/dist/avl/index.js

@@ -12553,9 +12553,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();
@@ -12563,9 +12580,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;
   };
@@ -12600,6 +12636,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;
@@ -12675,13 +12724,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;
   }
 });
 
@@ -12906,6 +12960,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",
@@ -12915,6 +12979,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) {
@@ -12943,7 +13014,9 @@ var init_DrawShape = __esm({
       "radiusY",
       "width",
       "height",
-      "strokeWidth"
+      "strokeWidth",
+      "strokeDashOffset",
+      "blur"
     ];
     lerp = (a, b, k) => a + (b - a) * k;
     paintShape = (painter, rawNode, dctx) => {
@@ -12953,6 +13026,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;
@@ -12961,15 +13044,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": {
@@ -12980,7 +13066,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": {
@@ -12991,7 +13078,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": {
@@ -13000,16 +13088,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;
         }
       }
@@ -13090,8 +13189,6 @@ var init_DrawTextLayer = __esm({
     };
   }
 });
-
-// lib/drawable/paintDispatch.ts
 function paintDrawable(painter, node, dctx) {
   switch (node.type) {
     case "draw-sprite":
@@ -13112,10 +13209,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;
@@ -13127,6 +13234,7 @@ function paintDrawable(painter, node, dctx) {
       break;
   }
 }
+var paint2dLog, warnedUnsupported2d, warnUnsupported2d;
 var init_paintDispatch = __esm({
   "lib/drawable/paintDispatch.ts"() {
     init_contract();
@@ -13136,6 +13244,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 });
+    };
   }
 });
 
@@ -13150,6 +13265,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":
@@ -13767,6 +13883,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,
@@ -40708,14 +40825,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) {
@@ -46441,6 +46570,7 @@ var init_component_registry_generated = __esm({
     init_DocTOC();
     init_DocumentViewer();
     init_DrawGroup();
+    init_DrawMesh();
     init_DrawShape();
     init_DrawShapeLayer();
     init_DrawSprite();
@@ -46709,6 +46839,7 @@ var init_component_registry_generated = __esm({
       "DocTOC": DocTOC,
       "DocumentViewer": DocumentViewer,
       "DrawGroup": DrawGroup,
+      "DrawMesh": DrawMesh,
       "DrawShape": DrawShape,
       "DrawShapeLayer": DrawShapeLayer,
       "DrawSprite": DrawSprite,

package/dist/{cn-Do5Ra3l3.d.ts → cn-BDwC4QpH.d.ts}

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

package/dist/{cn-DkGYzPOg.d.cts → cn-rwc3svaX.d.cts}

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