@almadar/shell-web 0.0.0-stage → 0.1.0

package/dist/chunk-PC7K4SK7.js

@@ -0,0 +1,1384 @@
+import { resolveThemeColor, parseComputedColor } from './chunk-DFNZUYX4.js';
+import { updateAssetStatus } from './chunk-B4BU77LT.js';
+import { resolveFxView, useTheme, useThemeScope, fxLifecycle, fxHash01 } from './chunk-MBQAMMSE.js';
+import { createContext, useContext, useState, useLayoutEffect, useEffect } from 'react';
+import { createLogger } from '@almadar/logger';
+import { DIAGRAM_TONES, DIAGRAM_TONE_COLOR_KEYS, DIAGRAM_TEXT_SIZES } from '@almadar/core';
+
+// src/lib/drawable/contract.ts
+function isValidScenePos(pos) {
+  return Number.isFinite(pos?.x) && Number.isFinite(pos?.y);
+}
+function spriteAssetState(node) {
+  if (!isValidScenePos(node.position)) return "invalid-position";
+  return typeof node.asset?.url === "string" && node.asset.url.length > 0 ? "ready" : "asset-unset";
+}
+var SPRITE_FALLBACK_FILL = "#9b8f7f";
+var SPRITE_FALLBACK_STROKE = "#5e564b";
+function spriteRect(projector, node, natural) {
+  const tw = projector.tileWidth;
+  const fallbackW = projector.worldPixelDirect ? natural?.w ?? 0 : tw;
+  const fallbackH = projector.worldPixelDirect ? natural?.h ?? 0 : tw;
+  const w = node.width !== void 0 ? node.width * tw : fallbackW;
+  const h = node.height !== void 0 ? node.height * tw : fallbackH;
+  const anchor = node.anchor ?? "top-left";
+  const p = projector.anchorPoint(node.position, anchor);
+  return {
+    x: anchor === "top-left" ? p.x : p.x - w / 2,
+    y: anchor === "ground" ? p.y - h : anchor === "center" ? p.y - h / 2 : p.y,
+    w,
+    h
+  };
+}
+var DrawableRegistryContext = createContext(null);
+var NUMERIC_TRACKS = [
+  "offsetX",
+  "offsetY",
+  "rotate",
+  "opacity",
+  "radiusX",
+  "radiusY",
+  "width",
+  "height",
+  "strokeWidth",
+  "strokeDashOffset",
+  "blur"
+];
+function isAnimatedShape(node) {
+  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
+}
+var lerp = (a, b, k) => a + (b - a) * k;
+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((f) => f[key] !== void 0);
+    if (defined.length === 0) return void 0;
+    let prev;
+    let next;
+    for (const f of defined) {
+      if (f.at <= t) prev = f;
+      else if (!next) next = f;
+    }
+    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((f) => f.shadow !== void 0);
+  if (shadowFrames.length > 0) {
+    const sh = trackValue("shadow");
+    if (sh !== void 0) {
+      let prevSh;
+      let nextSh;
+      for (const f of shadowFrames) {
+        if (f.at <= t) prevSh = f;
+        else if (!nextSh) nextSh = f;
+      }
+      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 };
+}
+var 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 (pxFill) painter.fillPoly(pts, pxFill);
+      if (patFill) painter.fillPoly(pts, patFill);
+      if (pxStroke) painter.strokePoly(pts, pxStroke, strokePx, true);
+      break;
+    }
+    case "rect": {
+      const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "top-left");
+      const tw = dctx.projector.tileWidth;
+      const x = p.x + (node.offsetX ?? 0) * tw;
+      const y = p.y + (node.offsetY ?? 0) * tw;
+      const w = (node.width ?? 0) * tw;
+      const h = (node.height ?? 0) * tw;
+      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": {
+      const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "ground");
+      const tw = dctx.projector.tileWidth;
+      const cx = p.x + (node.offsetX ?? 0) * tw;
+      const cy = p.y + (node.offsetY ?? 0) * tw;
+      const rx = (node.radiusX ?? 0) * tw;
+      const ry = (node.radiusY ?? node.radiusX ?? 0) * tw;
+      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 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;
+      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;
+    }
+  }
+  painter.restore();
+};
+function DrawShape(props) {
+  const register = useContext(DrawableRegistryContext);
+  if (register) {
+    const { opacity, ...rest } = props;
+    const node = {
+      ...rest,
+      type: "draw-shape",
+      ...opacity !== void 0 && opacity > 0 ? { opacity } : {}
+    };
+    register(node);
+  }
+  return null;
+}
+function isAnimatedGroup(node) {
+  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
+}
+function DrawGroup(props) {
+  const register = useContext(DrawableRegistryContext);
+  if (register) register({ ...props, type: "draw-group" });
+  return null;
+}
+
+// src/lib/imageCache.ts
+var RETRY_AFTER_MS = 5e3;
+var cache = /* @__PURE__ */ new Map();
+function startLoad(url, onReady, existing) {
+  const img = new Image();
+  img.crossOrigin = "anonymous";
+  const entry = existing ?? { img, status: "pending" };
+  entry.img = img;
+  if (onReady) entry.onReady = onReady;
+  img.onload = () => {
+    entry.status = "loaded";
+    updateAssetStatus(url, "loaded");
+    entry.onReady?.();
+  };
+  img.onerror = () => {
+    entry.status = "failed";
+    entry.failedAt = Date.now();
+    updateAssetStatus(url, "failed");
+    entry.onReady?.();
+  };
+  img.src = url;
+  return entry;
+}
+function getOrLoadImage(url, onReady) {
+  if (!url || typeof window === "undefined") return null;
+  const existing = cache.get(url);
+  if (existing) {
+    if (existing.status === "loaded") return existing.img;
+    if (existing.status === "pending" && onReady) existing.onReady = onReady;
+    if (existing.status === "failed" && Date.now() - (existing.failedAt ?? 0) >= RETRY_AFTER_MS) {
+      existing.failedAt = Date.now();
+      startLoad(url, onReady, existing);
+    }
+    return null;
+  }
+  const entry = startLoad(url, onReady);
+  cache.set(url, entry);
+  updateAssetStatus(url, "pending");
+  return null;
+}
+function getImageStatus(url) {
+  return cache.get(url)?.status;
+}
+
+// src/lib/skinning.ts
+var IDENTITY = [1, 0, 0, 1, 0, 0];
+function composeAffine(a, b) {
+  return [
+    a[0] * b[0] + a[2] * b[1],
+    a[1] * b[0] + a[3] * b[1],
+    a[0] * b[2] + a[2] * b[3],
+    a[1] * b[2] + a[3] * b[3],
+    a[0] * b[4] + a[2] * b[5] + a[4],
+    a[1] * b[4] + a[3] * b[5] + a[5]
+  ];
+}
+function invertAffine(m) {
+  const det = m[0] * m[3] - m[1] * m[2];
+  if (!Number.isFinite(det) || Math.abs(det) < 1e-12) return IDENTITY;
+  const inv = 1 / det;
+  return [
+    m[3] * inv,
+    -m[1] * inv,
+    -m[2] * inv,
+    m[0] * inv,
+    (m[2] * m[5] - m[3] * m[4]) * inv,
+    (m[1] * m[4] - m[0] * m[5]) * inv
+  ];
+}
+function applyAffine(m, x, y) {
+  return [m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]];
+}
+function rotationAbout(pivot, degrees) {
+  const r = degrees * Math.PI / 180;
+  const cos = Math.cos(r);
+  const sin = Math.sin(r);
+  const [px, py] = pivot;
+  return [cos, sin, -sin, cos, px - cos * px + sin * py, py - sin * px - cos * py];
+}
+function computeWorldMatrices(bones, pose) {
+  const indexByName = /* @__PURE__ */ new Map();
+  bones.forEach((b, i) => indexByName.set(b.name, i));
+  const world = new Array(bones.length);
+  const visiting = /* @__PURE__ */ new Set();
+  const resolve = (i) => {
+    const cached = world[i];
+    if (cached) return cached;
+    if (visiting.has(i)) return IDENTITY;
+    visiting.add(i);
+    const b = bones[i];
+    const parentIndex = b.parent === null ? void 0 : indexByName.get(b.parent);
+    const parentWorld = parentIndex === void 0 ? IDENTITY : resolve(parentIndex);
+    const local = rotationAbout(b.pivot, pose[b.name] ?? 0);
+    const m = composeAffine(parentWorld, local);
+    visiting.delete(i);
+    world[i] = m;
+    return m;
+  };
+  return bones.map((_, i) => resolve(i));
+}
+function skinVertices(mesh, bindWorld, curWorld) {
+  const skinMats = /* @__PURE__ */ new Map();
+  const skinMat = (bone) => {
+    let m = skinMats.get(bone);
+    if (!m) {
+      m = composeAffine(curWorld[bone] ?? IDENTITY, invertAffine(bindWorld[bone] ?? IDENTITY));
+      skinMats.set(bone, m);
+    }
+    return m;
+  };
+  return mesh.vertices.map((v) => {
+    if (v.weights.length === 0) return [v.x, v.y];
+    let x = 0;
+    let y = 0;
+    for (const { bone, w } of v.weights) {
+      const [bx, by] = applyAffine(skinMat(bone), v.x, v.y);
+      x += w * bx;
+      y += w * by;
+    }
+    return [x, y];
+  });
+}
+function triangleAffine(src, dst) {
+  const [s0, s1, s2] = src;
+  const det = s0[0] * (s1[1] - s2[1]) + s1[0] * (s2[1] - s0[1]) + s2[0] * (s0[1] - s1[1]);
+  if (!Number.isFinite(det) || Math.abs(det) < 1e-12) return null;
+  const [d0, d1, d2] = dst;
+  const a = (d0[0] * (s1[1] - s2[1]) + d1[0] * (s2[1] - s0[1]) + d2[0] * (s0[1] - s1[1])) / det;
+  const c = (d0[0] * (s2[0] - s1[0]) + d1[0] * (s0[0] - s2[0]) + d2[0] * (s1[0] - s0[0])) / det;
+  const e = (d0[0] * (s1[0] * s2[1] - s2[0] * s1[1]) + d1[0] * (s2[0] * s0[1] - s0[0] * s2[1]) + d2[0] * (s0[0] * s1[1] - s1[0] * s0[1])) / det;
+  const b = (d0[1] * (s1[1] - s2[1]) + d1[1] * (s2[1] - s0[1]) + d2[1] * (s0[1] - s1[1])) / det;
+  const d = (d0[1] * (s2[0] - s1[0]) + d1[1] * (s0[0] - s2[0]) + d2[1] * (s1[0] - s0[0])) / det;
+  const f = (d0[1] * (s1[0] * s2[1] - s2[0] * s1[1]) + d1[1] * (s2[0] * s0[1] - s0[0] * s2[1]) + d2[1] * (s0[0] * s1[1] - s1[0] * s0[1])) / det;
+  return [a, b, c, d, e, f];
+}
+var meshCache = /* @__PURE__ */ new Map();
+function isRigBundle(json) {
+  return json.mesh !== void 0 || json.bones !== void 0;
+}
+function getRigBundle(url, onReady) {
+  if (meshCache.has(url)) return meshCache.get(url) ?? void 0;
+  meshCache.set(url, void 0);
+  fetch(url).then((r) => {
+    if (!r.ok) throw new Error(`rigbundle fetch failed: HTTP ${r.status}`);
+    return r.json();
+  }).then((json) => {
+    const ok = isRigBundle(json) || Array.isArray(json.vertices);
+    if (!ok) throw new Error("rigbundle payload is neither a SkinMesh nor a rigbundle");
+    meshCache.set(url, json);
+    onReady();
+  }).catch(() => {
+    meshCache.set(url, null);
+    onReady();
+  });
+  return void 0;
+}
+function skinMeshFailed(url) {
+  return meshCache.get(url) === null;
+}
+function vertexBounds(points) {
+  if (points.length === 0) return null;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const [x, y] of points) {
+    if (x < minX) minX = x;
+    if (y < minY) minY = y;
+    if (x > maxX) maxX = x;
+    if (y > maxY) maxY = y;
+  }
+  return { minX, minY, maxX, maxY };
+}
+
+// src/components/game/atoms/DrawSkinnedMesh.tsx
+var skinnedLog = createLogger("almadar:ui:draw-skinned-mesh");
+var loggedMissing = /* @__PURE__ */ new Set();
+function warnMissingOnce(reason, node) {
+  const key = `${reason}:${node.asset.url}:${String(node.meshUrl)}`;
+  if (loggedMissing.has(key)) return;
+  loggedMissing.add(key);
+  skinnedLog.warn("draw-skinned-mesh unresolvable \u2014 painting fallback", { reason, url: node.asset.url, meshUrl: node.meshUrl });
+}
+var WEIGHT_PALETTE = Array.from({ length: 10 }, (_, i) => `hsl(${i * 36 % 360}, 70%, 55%)`);
+function dominantBone(v) {
+  let best = -1;
+  let bestW = 0;
+  for (const { bone, w } of v.weights) {
+    if (w > bestW) {
+      bestW = w;
+      best = bone;
+    }
+  }
+  return best;
+}
+function resolveSkinPose(node, clip) {
+  const effectiveClip = clip ?? node.clip;
+  if (effectiveClip && node.frame !== void 0 && effectiveClip.frames.length > 0) {
+    return effectiveClip.frames[node.frame % effectiveClip.frames.length];
+  }
+  return node.pose ?? {};
+}
+function resolveRig(node, dctx) {
+  const fetched = node.meshUrl ? getRigBundle(node.meshUrl, dctx.invalidate) : void 0;
+  if (node.meshUrl && fetched === void 0) return void 0;
+  const rb = fetched && isRigBundle(fetched) ? fetched : void 0;
+  const mesh = node.mesh ?? rb?.mesh ?? (!rb ? fetched : void 0);
+  if (!mesh) return void 0;
+  const bones = node.bones.length > 0 ? node.bones : rb?.bones ?? [];
+  if (bones.length === 0) return void 0;
+  const clip = node.clip ?? (node.clipName ? rb?.clips?.[node.clipName] : void 0);
+  return { mesh, bones, clip };
+}
+var pixelUVByMesh = /* @__PURE__ */ new WeakMap();
+function meshHasPixelUVs(mesh) {
+  const cached = pixelUVByMesh.get(mesh);
+  if (cached !== void 0) return cached;
+  let pixel = false;
+  for (const v of mesh.vertices) {
+    if (v.u < 0 || v.u > 1 || v.v < 0 || v.v > 1) {
+      pixel = true;
+      break;
+    }
+  }
+  pixelUVByMesh.set(mesh, pixel);
+  return pixel;
+}
+function paintMeshPass(painter, node, bones, mesh, tex, dctx, pose, opacity) {
+  const bindWorld = computeWorldMatrices(bones, {});
+  const curWorld = computeWorldMatrices(bones, pose);
+  const skinned = skinVertices(mesh, bindWorld, curWorld);
+  const origin = dctx.projector.project(node.position);
+  const tw = dctx.projector.tileWidth;
+  painter.save();
+  if (opacity !== 1) painter.setAlpha(opacity);
+  for (const [i0, i1, i2] of mesh.triangles) {
+    const v0 = mesh.vertices[i0];
+    const v1 = mesh.vertices[i1];
+    const v2 = mesh.vertices[i2];
+    const p0 = skinned[i0];
+    const p1 = skinned[i1];
+    const p2 = skinned[i2];
+    if (!v0 || !v1 || !v2 || !p0 || !p1 || !p2) continue;
+    const dst = [
+      [origin.x + p0[0] * tw, origin.y + p0[1] * tw],
+      [origin.x + p1[0] * tw, origin.y + p1[1] * tw],
+      [origin.x + p2[0] * tw, origin.y + p2[1] * tw]
+    ];
+    if (node.weightsOverlay || !tex) {
+      if (!node.weightsOverlay) continue;
+      const bone = dominantBone(v0);
+      painter.fillPoly(
+        dst.map(([x, y]) => ({ x, y })),
+        WEIGHT_PALETTE[(bone % WEIGHT_PALETTE.length + WEIGHT_PALETTE.length) % WEIGHT_PALETTE.length]
+      );
+      continue;
+    }
+    const pixelUV = meshHasPixelUVs(mesh);
+    const uv = pixelUV ? [[v0.u, v0.v], [v1.u, v1.v], [v2.u, v2.v]] : [
+      [v0.u * tex.width, v0.v * tex.height],
+      [v1.u * tex.width, v1.v * tex.height],
+      [v2.u * tex.width, v2.v * tex.height]
+    ];
+    const affine = triangleAffine(uv, dst);
+    if (!affine) continue;
+    painter.save();
+    painter.clipPath(`M ${dst[0][0]} ${dst[0][1]} L ${dst[1][0]} ${dst[1][1]} L ${dst[2][0]} ${dst[2][1]} Z`);
+    painter.blitTransformed(tex, { x: 0, y: 0, w: tex.width, h: tex.height }, affine);
+    painter.restore();
+  }
+  painter.restore();
+}
+var paintSkinnedMesh = (painter, node, dctx) => {
+  if (!isValidScenePos(node.position)) return;
+  const rig = resolveRig(node, dctx);
+  if (!rig) {
+    if (node.meshUrl && skinMeshFailed(node.meshUrl)) warnMissingOnce("mesh-failed", node);
+    else if (!node.mesh && !node.meshUrl) warnMissingOnce("mesh-missing", node);
+    return;
+  }
+  const tex = node.weightsOverlay ? null : painter.resolveTexture(node.asset.url);
+  if (!node.weightsOverlay && !tex) {
+    if (getImageStatus(node.asset.url) === "failed") warnMissingOnce("texture-failed", node);
+    return;
+  }
+  if (node.ghost && rig.clip && rig.clip.frames.length > 0) {
+    paintMeshPass(painter, node, rig.bones, rig.mesh, tex, dctx, rig.clip.frames[node.ghost.frame % rig.clip.frames.length], node.ghost.opacity);
+  }
+  paintMeshPass(painter, node, rig.bones, rig.mesh, tex, dctx, resolveSkinPose(node, rig.clip), node.opacity ?? 1);
+};
+function DrawSkinnedMesh(props) {
+  const register = useContext(DrawableRegistryContext);
+  if (register) register({ ...props, type: "draw-skinned-mesh" });
+  return null;
+}
+var MESH_SEGMENTS_DEFAULT = 24;
+function polyhedronBounds(vertices) {
+  if (!vertices || vertices.length < 3) return null;
+  const min = [Infinity, Infinity, Infinity];
+  const max = [-Infinity, -Infinity, -Infinity];
+  for (const v of vertices) {
+    if (v.length < 3 || !v.every((c) => Number.isFinite(c))) return null;
+    for (let axis = 0; axis < 3; axis++) {
+      min[axis] = Math.min(min[axis], v[axis]);
+      max[axis] = Math.max(max[axis], v[axis]);
+    }
+  }
+  return { min, max };
+}
+function clampSegments(segments) {
+  const s = segments ?? MESH_SEGMENTS_DEFAULT;
+  return Math.min(64, Math.max(3, Math.round(s)));
+}
+function isAnimatedMesh(node) {
+  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
+}
+var lerp2 = (a, b, k) => a + (b - a) * k;
+var NUMERIC_TRACKS2 = [
+  "offsetX",
+  "offsetY",
+  "offsetZ",
+  "rotateX",
+  "rotateY",
+  "rotateZ",
+  "scale",
+  "opacity",
+  "emissiveIntensity"
+];
+function applyMeshAnimation(node, timeMs) {
+  const anim = node.animation;
+  if (!anim || !(anim.durationMs > 0) || anim.keyframes.length === 0) return null;
+  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 trackValue = (key) => {
+    const defined = frames.filter((f) => f[key] !== void 0);
+    if (defined.length === 0) return void 0;
+    let prev;
+    let next;
+    for (const f of defined) {
+      if (f.at <= t) prev = f;
+      else if (!next) next = f;
+    }
+    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 lerp2(a, b, k);
+    return a;
+  };
+  const num = {};
+  for (const key of NUMERIC_TRACKS2) {
+    const v = trackValue(key);
+    if (v !== void 0) num[key] = v;
+  }
+  return {
+    offset: [num.offsetX ?? 0, num.offsetY ?? 0, num.offsetZ ?? 0],
+    rotate: [num.rotateX ?? 0, num.rotateY ?? 0, num.rotateZ ?? 0],
+    scale: num.scale ?? 1,
+    opacity: num.opacity,
+    emissiveIntensity: num.emissiveIntensity,
+    color: trackValue("color"),
+    emissive: trackValue("emissive")
+  };
+}
+function DrawMesh(props) {
+  const register = useContext(DrawableRegistryContext);
+  if (register) register({ ...props, type: "draw-mesh" });
+  return null;
+}
+
+// src/components/game/molecules/DrawFxLayer.tsx
+var DEFAULT_TICK_MS = 500;
+var DEFAULT_TEXT_COLOR = "#ffe066";
+var DEFAULT_SPARK_COLOR = "#ffffff";
+var easeOut = (t) => 1 - (1 - t) * (1 - t);
+function fxPosition(view, dim, ageSec) {
+  const g = view.gravity ?? 0;
+  const fall = 0.5 * g * ageSec * ageSec;
+  if (dim === "2d") {
+    const base2 = view.position ?? { x: view.x, y: view.z ?? view.y ?? 0 };
+    if (!Number.isFinite(base2.x) || !Number.isFinite(base2.y)) return void 0;
+    return {
+      x: base2.x + (view.vx ?? 0) * ageSec,
+      y: base2.y + (view.vz ?? 0) * ageSec + fall
+    };
+  }
+  const base = view.position ?? { x: view.x, y: view.z ?? 0, z: view.y };
+  if (!Number.isFinite(base.x) || !Number.isFinite(base.y)) return void 0;
+  return {
+    x: base.x + (view.vx ?? 0) * ageSec,
+    y: base.y + (view.vz ?? 0) * ageSec,
+    ...base.z !== void 0 || view.vy !== void 0 || g !== 0 ? { z: (base.z ?? 0) + (view.vy ?? 0) * ageSec - fall } : {}
+  };
+}
+function sparkShape(view, pos, i, fade, progress) {
+  const size = view.size ?? 0.5;
+  const angle = fxHash01(view.id, i * 3) * Math.PI * 2;
+  const dist = size * (0.4 + 0.6 * fxHash01(view.id, i * 3 + 1)) * easeOut(progress);
+  const r = size * (0.06 + 0.06 * fxHash01(view.id, i * 3 + 2));
+  const color = view.color ?? DEFAULT_SPARK_COLOR;
+  return {
+    type: "draw-shape",
+    shape: "ellipse",
+    position: { ...pos, x: pos.x + Math.cos(angle) * dist, y: pos.y + Math.sin(angle) * dist },
+    anchor: "center",
+    radiusX: r,
+    fill: color,
+    blendMode: "lighter",
+    opacity: fade,
+    ...view.glow ? { shadow: { color, blur: view.glow } } : {}
+  };
+}
+function proceduralShapes(view, pos, fade, progress) {
+  const size = view.size ?? 0.5;
+  const color = view.color ?? DEFAULT_SPARK_COLOR;
+  switch (view.shape ?? "spark") {
+    case "ring": {
+      return [
+        {
+          type: "draw-shape",
+          shape: "ellipse",
+          position: pos,
+          anchor: "center",
+          radiusX: size * easeOut(progress),
+          stroke: view.color2 ?? color,
+          strokeWidth: 2,
+          blendMode: "lighter",
+          opacity: fade,
+          ...view.glow ? { shadow: { color, blur: view.glow } } : {}
+        }
+      ];
+    }
+    case "puff": {
+      const count = view.count ?? 3;
+      return Array.from({ length: count }, (_, i) => {
+        const angle = fxHash01(view.id, i * 5) * Math.PI * 2;
+        const drift = size * 0.3 * fxHash01(view.id, i * 5 + 1) * easeOut(progress);
+        return {
+          type: "draw-shape",
+          shape: "ellipse",
+          position: { ...pos, x: pos.x + Math.cos(angle) * drift, y: pos.y + Math.sin(angle) * drift },
+          anchor: "center",
+          radiusX: size * (0.15 + 0.35 * progress) * (0.7 + 0.6 * fxHash01(view.id, i * 5 + 2)),
+          fill: i === 0 && view.color2 ? view.color2 : color,
+          opacity: fade * 0.6,
+          ...view.glow ? { shadow: { color, blur: view.glow } } : {}
+        };
+      });
+    }
+    case "streak": {
+      const count = view.count ?? 5;
+      return Array.from({ length: count }, (_, i) => {
+        const angle = fxHash01(view.id, i * 3) * Math.PI * 2;
+        const inner = size * (0.2 + 0.8 * easeOut(progress)) * (0.6 + 0.4 * fxHash01(view.id, i * 3 + 1));
+        const len = size * 0.35;
+        return {
+          type: "draw-shape",
+          shape: "ellipse",
+          position: pos,
+          anchor: "center",
+          offsetX: inner + len / 2,
+          offsetY: 0,
+          radiusX: len / 2,
+          radiusY: size * 0.04,
+          rotate: angle,
+          fill: color,
+          blendMode: "lighter",
+          opacity: fade,
+          ...view.glow ? { shadow: { color, blur: view.glow } } : {}
+        };
+      });
+    }
+    default: {
+      const count = view.count ?? 6;
+      return Array.from({ length: count }, (_, i) => sparkShape(view, pos, i, fade, progress));
+    }
+  }
+}
+function expandFxItem(view, node, epochNowMs, dim, projector, fontFamily) {
+  if (view.space === "screen") return [];
+  const tickMs = node.tickMs ?? DEFAULT_TICK_MS;
+  const { ageMs, progress, fade } = fxLifecycle(view, epochNowMs, tickMs);
+  if (progress >= 1) return [];
+  const pos = fxPosition(view, dim, ageMs / 1e3);
+  if (!pos) return [];
+  const out = [];
+  const artItems = node.art?.[view.type]?.["idle"];
+  const sprite = node.sprites?.[view.type];
+  if (Array.isArray(artItems)) {
+    out.push({
+      type: "draw-group",
+      position: pos,
+      opacity: fade,
+      ...view.size !== void 0 ? { scale: view.size } : {},
+      items: artItems
+    });
+  } else if (sprite?.url) {
+    const spriteSize = view.size ?? 0.6;
+    out.push({
+      type: "draw-sprite",
+      position: pos,
+      asset: sprite,
+      anchor: "center",
+      width: spriteSize,
+      height: spriteSize,
+      opacity: fade,
+      animation: view.animation ?? sprite.animations?.[0],
+      // One-shot fx rows (burst) play from the item's birth, not wall-time.
+      clockMs: ageMs
+    });
+  } else {
+    out.push(...proceduralShapes(view, pos, fade, progress));
+  }
+  if (view.message) {
+    const pxSize = projector && view.size !== void 0 ? Math.max(10, Math.round(view.size * projector.tileWidth)) : void 0;
+    const family = fontFamily ?? "system-ui, sans-serif";
+    const text = {
+      type: "draw-text",
+      text: view.message,
+      position: pos,
+      offsetY: -(0.15 + 0.55 * progress),
+      color: view.color ?? node.textColor ?? DEFAULT_TEXT_COLOR,
+      opacity: fade,
+      font: `bold ${pxSize ?? 14}px ${family}`
+    };
+    out.push(text);
+  }
+  return out;
+}
+function expandFxLayer(node, epochNowMs, dim, projector, fontFamily) {
+  if (!Array.isArray(node.items)) return [];
+  const out = [];
+  for (const item of node.items) {
+    if (!item || typeof item.id !== "string") continue;
+    out.push(...expandFxItem(resolveFxView(item, node.presets), node, epochNowMs, dim, projector, fontFamily));
+  }
+  return out;
+}
+function DrawFxLayer(_props) {
+  return null;
+}
+var log = createLogger("almadar:ui:canvas-theme");
+var toneVar = (tone) => `--color-${DIAGRAM_TONE_COLOR_KEYS[tone]}`;
+var SERIES_TONES = ["series-1", "series-2", "series-3", "series-4", "series-5", "series-6", "series-7", "series-8"];
+var TONE_SET = new Set(DIAGRAM_TONES);
+function isDiagramTone(value) {
+  return TONE_SET.has(value);
+}
+function colorCss(c) {
+  return c.a >= 1 ? c.css : `rgba(${c.r}, ${c.g}, ${c.b}, ${c.a})`;
+}
+function oneOf(value, allowed, fallback, name) {
+  const hit = allowed.find((a) => a === value);
+  if (hit !== void 0) return hit;
+  if (value !== "") log.warn("invalid-theme-keyword", { var: name, value, allowed });
+  return fallback;
+}
+var PLAIN_LENGTH = /^(-?[\d.]+)(px)?$/;
+var ScopeReader = class {
+  constructor(scope) {
+    this.scope = scope;
+    this.style = getComputedStyle(scope);
+    const doc = scope.ownerDocument;
+    this.probe = doc.createElement("span");
+    this.probe.style.position = "absolute";
+    this.probe.style.visibility = "hidden";
+    this.probe.style.pointerEvents = "none";
+    scope.appendChild(this.probe);
+  }
+  scope;
+  style;
+  probe;
+  dispose() {
+    this.probe.remove();
+  }
+  raw(name) {
+    return this.style.getPropertyValue(name).trim();
+  }
+  /** A length var in px: a plain value parses directly, a derived one (`calc`, `var`) through the probe. */
+  length(name, fallback) {
+    const raw = this.raw(name);
+    const plain = PLAIN_LENGTH.exec(raw);
+    if (plain) return Number(plain[1]);
+    if (raw === "") return fallback;
+    this.probe.style.width = `var(${name})`;
+    const computed = PLAIN_LENGTH.exec(getComputedStyle(this.probe).width.trim());
+    this.probe.style.width = "";
+    if (computed) return Number(computed[1]);
+    log.warn("unresolvable-theme-length", { var: name, raw });
+    return fallback;
+  }
+  number(name, fallback) {
+    const raw = this.raw(name);
+    if (raw === "") return fallback;
+    const n = Number(raw);
+    if (Number.isFinite(n)) return n;
+    log.warn("unresolvable-theme-number", { var: name, raw });
+    return fallback;
+  }
+  /** A duration var in ms (`250ms`, `0.25s`, or a `var()` alias resolved through the probe). */
+  durationMs(name, fallback) {
+    const parse = (v) => {
+      const m = /^([\d.]+)(ms|s)$/.exec(v.trim());
+      return m ? Number(m[1]) * (m[2] === "s" ? 1e3 : 1) : null;
+    };
+    const raw = this.raw(name);
+    const direct = parse(raw);
+    if (direct !== null) return direct;
+    if (raw === "") return fallback;
+    this.probe.style.transitionDuration = `var(${name})`;
+    const computed = parse(getComputedStyle(this.probe).transitionDuration.split(",")[0] ?? "");
+    this.probe.style.transitionDuration = "";
+    return computed ?? fallback;
+  }
+  color(name) {
+    const raw = this.raw(name);
+    return parseComputedColor(raw) ?? resolveThemeColor(`var(${name})`, this.scope);
+  }
+  shadow(name) {
+    const raw = this.raw(name);
+    if (raw === "" || raw === "none") return null;
+    this.probe.style.boxShadow = `var(${name})`;
+    const computed = getComputedStyle(this.probe).boxShadow.trim() || raw;
+    this.probe.style.boxShadow = "";
+    const colorMatch = /(rgba?\([^)]*\)|#[0-9a-f]{3,8}|oklch\([^)]*\))/i.exec(computed);
+    const lengths = computed.replace(colorMatch?.[0] ?? "", "").trim().split(/\s+/).map((t) => PLAIN_LENGTH.exec(t)).filter((m) => m !== null).map((m) => Number(m[1]));
+    if (lengths.length < 2) return null;
+    const color = colorMatch ? parseComputedColor(colorMatch[0]) : null;
+    return { offsetX: lengths[0], offsetY: lengths[1], blur: lengths[2] ?? 0, color: color ? colorCss(color) : "rgba(0, 0, 0, 0.25)" };
+  }
+  family(name, fallback) {
+    return this.raw(name) || fallback;
+  }
+};
+function dashList(raw, fallback) {
+  if (raw === "") return fallback;
+  const parts = raw.split(/[\s,]+/).map(Number);
+  return parts.every((n) => Number.isFinite(n) && n >= 0) ? parts : fallback;
+}
+function prefersReducedMotion(scope) {
+  const view = scope.ownerDocument.defaultView;
+  return typeof view?.matchMedia === "function" && view.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function resolveCanvasTheme(scope) {
+  const r = new ScopeReader(scope);
+  try {
+    const tones = {};
+    for (const tone of DIAGRAM_TONES) {
+      const c = r.color(toneVar(tone));
+      tones[tone] = c ? colorCss(c) : "currentColor";
+    }
+    const surface = (name) => {
+      const c = r.color(name);
+      return c ? colorCss(c) : "transparent";
+    };
+    const ground = r.color("--surface-diagram");
+    const text = {};
+    const TEXT_FALLBACK = { xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24 };
+    for (const size of DIAGRAM_TEXT_SIZES) text[size] = r.length(`--text-${size}`, TEXT_FALLBACK[size]);
+    const body = r.family("--font-family-body", r.family("--font-family", "system-ui, sans-serif"));
+    return {
+      ground: ground ? colorCss(ground) : "transparent",
+      surfaces: {
+        muted: surface("--color-muted"),
+        card: surface("--color-card"),
+        onPrimary: surface("--color-primary-foreground")
+      },
+      tones,
+      series: SERIES_TONES.map((t) => tones[t]),
+      strokes: {
+        thin: r.length("--diagram-stroke-thin", 1),
+        normal: r.length("--diagram-stroke-normal", 1.5),
+        bold: r.length("--diagram-stroke-bold", 3)
+      },
+      lineCap: oneOf(r.raw("--diagram-line-cap"), ["butt", "round", "square"], "round", "--diagram-line-cap"),
+      lineJoin: oneOf(r.raw("--diagram-line-join"), ["miter", "round", "bevel"], "round", "--diagram-line-join"),
+      dash: dashList(r.raw("--diagram-dash"), [6, 4]),
+      dot: dashList(r.raw("--diagram-dot"), [1, 4]),
+      fillStyle: oneOf(r.raw("--diagram-fill-style"), ["solid", "tint", "outline", "hatch"], "tint", "--diagram-fill-style"),
+      fillOpacity: r.number("--diagram-fill-opacity", 0.18),
+      roughness: r.number("--diagram-roughness", 0),
+      glow: r.number("--diagram-glow", 0),
+      shadow: r.shadow("--diagram-shadow"),
+      marker: oneOf(r.raw("--diagram-marker"), ["triangle", "open", "line", "dot"], "triangle", "--diagram-marker"),
+      faces: {
+        body,
+        display: r.family("--font-family-display", body),
+        mono: r.family("--font-family-mono", "ui-monospace, monospace")
+      },
+      label: {
+        font: oneOf(r.raw("--diagram-label-font"), ["body", "display", "mono"], "body", "--diagram-label-font"),
+        size: oneOf(r.raw("--diagram-label-size"), DIAGRAM_TEXT_SIZES, "sm", "--diagram-label-size"),
+        weight: r.raw("--diagram-label-weight") || "500",
+        uppercase: oneOf(r.raw("--diagram-label-case"), ["none", "uppercase"], "none", "--diagram-label-case") === "uppercase"
+      },
+      text,
+      corner: r.length("--diagram-corner", 4),
+      motion: {
+        enabled: r.raw("--motion-enable") !== "off" && !prefersReducedMotion(scope),
+        fastMs: r.durationMs("--duration-fast", 150),
+        normalMs: r.durationMs("--duration-normal", 250),
+        slowMs: r.durationMs("--duration-slow", 400),
+        easing: r.raw("--easing-standard") || "ease"
+      },
+      scene: {
+        roughness: r.number("--material-roughness", 0.6),
+        metalness: r.number("--material-metalness", 0),
+        flat: r.number("--material-flat", 0) >= 1,
+        outline: r.number("--material-outline", 0),
+        ambient: r.number("--light-ambient", 0.55),
+        key: r.number("--light-key", 1),
+        keyColor: (() => {
+          const c = r.color("--light-key-color");
+          return c ? colorCss(c) : "#ffffff";
+        })(),
+        fog: r.number("--scene-fog", 0)
+      }
+    };
+  } finally {
+    r.dispose();
+  }
+}
+function withSeries(theme, series, scope) {
+  if (!theme || !series || series.length === 0 || !scope) return theme;
+  const colors = series.map((c, i) => markColor(theme, c, scope, SERIES_TONES[i % SERIES_TONES.length]));
+  const tones = { ...theme.tones };
+  SERIES_TONES.forEach((tone, i) => {
+    tones[tone] = colors[i % colors.length];
+  });
+  return { ...theme, tones, series: SERIES_TONES.map((t) => tones[t]) };
+}
+function markColor(theme, value, scope, fallback) {
+  if (value === void 0 || value === "") return theme.tones[fallback];
+  if (isDiagramTone(value)) return theme.tones[value];
+  if (value.startsWith("var(") || value.startsWith("color-mix(")) {
+    const resolved = resolveThemeColor(value, scope);
+    return resolved ? colorCss(resolved) : theme.tones[fallback];
+  }
+  return value;
+}
+function markStrokeWidth(theme, literal, role, fallback = "normal") {
+  return literal ?? theme.strokes[role ?? fallback];
+}
+function labelFont(theme, roles, literalPx, literalFamily) {
+  const px = literalPx ?? theme.text[roles.textSize ?? theme.label.size];
+  const family = literalFamily ?? theme.faces[roles.font ?? theme.label.font];
+  return { font: `${theme.label.weight} ${px}px ${family}`, px };
+}
+function labelText(theme, text, textCase = "theme") {
+  return theme.label.uppercase && textCase === "theme" ? text.toUpperCase() : text;
+}
+function fillLabel(ctx, theme, text, x, y) {
+  if (!text) return;
+  ctx.save();
+  ctx.strokeStyle = theme.ground;
+  ctx.lineWidth = Math.max(2, theme.text.xs * 0.3);
+  ctx.lineJoin = "round";
+  ctx.strokeText(text, x, y);
+  ctx.restore();
+  ctx.fillText(text, x, y);
+}
+function outlineStroke(stroke, fill, style, fillTone) {
+  return outlineCarriesFill(fill, style, fillTone) && fill !== void 0 ? fill : stroke;
+}
+function outlineCarriesFill(fill, style, fillTone) {
+  return style === "outline" && fill !== void 0 && fillTone !== "fill";
+}
+function applyLineCharacter(ctx, theme, strokeColor) {
+  ctx.lineCap = theme.lineCap;
+  ctx.lineJoin = theme.lineJoin;
+  if (theme.glow > 0) {
+    ctx.shadowColor = strokeColor;
+    ctx.shadowBlur = theme.glow;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+  }
+}
+function markDash(theme, dash) {
+  if (dash === "dashed") return theme.dash;
+  if (dash === "dotted") return theme.dot;
+  return [];
+}
+function wobble(x, y, k) {
+  const s = Math.sin(x * 12.9898 + y * 78.233 + k * 37.719) * 43758.5453;
+  return (s - Math.floor(s)) * 2 - 1;
+}
+function tracePolyline(ctx, theme, points, closed) {
+  ctx.beginPath();
+  if (points.length === 0) return;
+  const amp = theme.roughness;
+  const pts = closed ? [...points, points[0]] : [...points];
+  ctx.moveTo(pts[0].x + amp * wobble(pts[0].x, pts[0].y, 0), pts[0].y + amp * wobble(pts[0].y, pts[0].x, 1));
+  for (let i = 1; i < pts.length; i++) {
+    const a = pts[i - 1];
+    const b = pts[i];
+    if (amp === 0) {
+      ctx.lineTo(b.x, b.y);
+      continue;
+    }
+    const steps = Math.max(1, Math.round(Math.hypot(b.x - a.x, b.y - a.y) / 24));
+    for (let s = 1; s <= steps; s++) {
+      const t = s / steps;
+      const x = a.x + (b.x - a.x) * t;
+      const y = a.y + (b.y - a.y) * t;
+      ctx.lineTo(x + amp * wobble(x, y, 2), y + amp * wobble(y, x, 3));
+    }
+  }
+  if (closed) ctx.closePath();
+}
+function arcPoints(cx, cy, rx, ry, startRad = 0, endRad = Math.PI * 2) {
+  const steps = Math.max(12, Math.round(Math.abs(endRad - startRad) * Math.max(rx, ry) / 8));
+  const out = [];
+  for (let i = 0; i <= steps; i++) {
+    const t = startRad + (endRad - startRad) * i / steps;
+    out.push({ x: cx + rx * Math.cos(t), y: cy + ry * Math.sin(t) });
+  }
+  return out;
+}
+function fillMark(ctx, theme, color, style = theme.fillStyle) {
+  if (style === "outline") return;
+  ctx.save();
+  ctx.shadowBlur = 0;
+  ctx.shadowColor = "transparent";
+  if (theme.shadow) {
+    ctx.shadowColor = theme.shadow.color;
+    ctx.shadowOffsetX = theme.shadow.offsetX;
+    ctx.shadowOffsetY = theme.shadow.offsetY;
+    ctx.shadowBlur = theme.shadow.blur;
+  }
+  if (style === "hatch") {
+    ctx.clip();
+    const span = ctx.canvas.width + ctx.canvas.height;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = theme.strokes.thin;
+    ctx.setLineDash([]);
+    ctx.beginPath();
+    for (let d = -span; d < span; d += 6) {
+      ctx.moveTo(d, 0);
+      ctx.lineTo(d + span, span);
+    }
+    ctx.stroke();
+  } else {
+    ctx.globalAlpha *= style === "tint" ? theme.fillOpacity : 1;
+    ctx.fillStyle = color;
+    ctx.fill();
+  }
+  ctx.restore();
+}
+function drawMarker(ctx, theme, x1, y1, x2, y2, color, width) {
+  const size = Math.max(8, width * 4);
+  const angle = Math.atan2(y2 - y1, x2 - x1);
+  const left = { x: x2 - size * Math.cos(angle - Math.PI / 6), y: y2 - size * Math.sin(angle - Math.PI / 6) };
+  const right = { x: x2 - size * Math.cos(angle + Math.PI / 6), y: y2 - size * Math.sin(angle + Math.PI / 6) };
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.fillStyle = color;
+  ctx.lineWidth = width;
+  ctx.setLineDash([]);
+  switch (theme.marker) {
+    case "triangle": {
+      ctx.beginPath();
+      ctx.moveTo(x2, y2);
+      ctx.lineTo(left.x, left.y);
+      ctx.lineTo(right.x, right.y);
+      ctx.closePath();
+      ctx.fill();
+      break;
+    }
+    case "open":
+    case "line": {
+      ctx.beginPath();
+      ctx.moveTo(left.x, left.y);
+      ctx.lineTo(x2, y2);
+      ctx.lineTo(right.x, right.y);
+      if (theme.marker === "open") ctx.stroke();
+      else {
+        ctx.moveTo(x2 - size * 0.5 * Math.cos(angle + Math.PI / 2), y2 - size * 0.5 * Math.sin(angle + Math.PI / 2));
+        ctx.lineTo(x2 + size * 0.5 * Math.cos(angle + Math.PI / 2), y2 + size * 0.5 * Math.sin(angle + Math.PI / 2));
+        ctx.stroke();
+      }
+      break;
+    }
+    case "dot": {
+      ctx.beginPath();
+      ctx.arc(x2, y2, Math.max(2.5, width * 1.5), 0, Math.PI * 2);
+      ctx.fill();
+      break;
+    }
+  }
+  ctx.restore();
+}
+function useCanvasTheme(scopeRef) {
+  const { appliedTheme } = useTheme();
+  const scopeKey = JSON.stringify(useThemeScope());
+  const [state, setState] = useState({ theme: null, version: 0 });
+  useLayoutEffect(() => {
+    const scope = scopeRef.current;
+    if (!scope) return;
+    const theme = resolveCanvasTheme(scope);
+    setState((prev) => ({ theme, version: prev.version + 1 }));
+  }, [appliedTheme, scopeKey, scopeRef]);
+  return state;
+}
+
+// src/lib/drawable/themeDrawables.ts
+function opt(value, resolve) {
+  return value === void 0 ? void 0 : resolve(value);
+}
+function themeShape(node, resolve) {
+  return {
+    ...node,
+    ...node.fill !== void 0 ? { fill: resolve(node.fill) } : {},
+    ...node.stroke !== void 0 ? { stroke: resolve(node.stroke) } : {},
+    ...node.gradient ? { gradient: { ...node.gradient, stops: node.gradient.stops.map((s) => ({ ...s, color: resolve(s.color) })) } } : {},
+    ...node.fillPattern?.color !== void 0 ? { fillPattern: { ...node.fillPattern, color: resolve(node.fillPattern.color) } } : {},
+    ...node.shadow ? { shadow: { ...node.shadow, color: resolve(node.shadow.color) } } : {},
+    ...node.animation ? {
+      animation: {
+        ...node.animation,
+        keyframes: node.animation.keyframes.map((k) => ({
+          ...k,
+          ...k.fill !== void 0 ? { fill: resolve(k.fill) } : {},
+          ...k.stroke !== void 0 ? { stroke: resolve(k.stroke) } : {}
+        }))
+      }
+    } : {}
+  };
+}
+function themeText(node, resolve) {
+  return { ...node, color: resolve(node.color) };
+}
+function themeMaterial(material, resolve) {
+  if (!material) return material;
+  return {
+    ...material,
+    ...material.color !== void 0 ? { color: resolve(material.color) } : {},
+    ...material.emissive !== void 0 ? { emissive: resolve(material.emissive) } : {}
+  };
+}
+function resolveDrawableColors(nodes, resolve) {
+  return nodes.map((node) => {
+    switch (node.type) {
+      case "draw-shape":
+        return themeShape(node, resolve);
+      case "draw-text":
+        return themeText(node, resolve);
+      case "draw-group":
+        return { ...node, items: resolveDrawableColors(node.items, resolve) };
+      case "draw-shape-layer":
+        return { ...node, items: node.items.map((item) => themeShape(item, resolve)) };
+      case "draw-text-layer":
+        return { ...node, items: node.items.map((item) => themeText(item, resolve)) };
+      case "draw-fx-layer":
+        return {
+          ...node,
+          ...node.textColor !== void 0 ? { textColor: resolve(node.textColor) } : {},
+          ...node.presets ? {
+            presets: node.presets.map((p) => ({
+              ...p,
+              ...p.color !== void 0 ? { color: resolve(p.color) } : {},
+              ...p.color2 !== void 0 ? { color2: resolve(p.color2) } : {}
+            }))
+          } : {}
+        };
+      case "draw-mesh":
+        return {
+          ...node,
+          material: themeMaterial(node.material, resolve),
+          ...node.outline ? { outline: { ...node.outline, ...node.outline.color !== void 0 ? { color: resolve(node.outline.color) } : {} } } : {},
+          ...node.animation ? {
+            animation: {
+              ...node.animation,
+              keyframes: node.animation.keyframes.map((k) => ({
+                ...k,
+                ...k.color !== void 0 ? { color: resolve(k.color) } : {},
+                ...k.emissive !== void 0 ? { emissive: opt(k.emissive, resolve) } : {}
+              }))
+            }
+          } : {}
+        };
+      default:
+        return node;
+    }
+  });
+}
+function applySceneMaterials(nodes, theme) {
+  return nodes.map((node) => {
+    if (node.type === "draw-group") return { ...node, items: applySceneMaterials(node.items, theme) };
+    if (node.type !== "draw-mesh") return node;
+    const m = node.material ?? {};
+    const pbr = (m.kind ?? "standard") === "standard" || m.kind === "physical";
+    return {
+      ...node,
+      material: {
+        ...m,
+        ...pbr && m.roughness === void 0 ? { roughness: theme.scene.roughness } : {},
+        ...pbr && m.metalness === void 0 ? { metalness: theme.scene.metalness } : {},
+        ...m.flatShading === void 0 && theme.scene.flat ? { flatShading: true } : {}
+      },
+      ...node.outline === void 0 && theme.scene.outline > 0 ? { outline: { color: theme.tones.ink, width: theme.scene.outline * 0.02 } } : {}
+    };
+  });
+}
+
+// src/lib/drawable/hitTest.ts
+function shapeDrawnItem(n) {
+  if (n.shape !== "rect") return { pos: n.position, id: n.id };
+  return { pos: n.position, id: n.id, anchor: n.anchor, width: n.width, height: n.height, rotation: n.rotate };
+}
+function skinnedMeshDrawnItem(n) {
+  const mesh = n.mesh;
+  if (!mesh || n.bones.length === 0) return { pos: n.position, id: n.id };
+  const bindWorld = computeWorldMatrices(n.bones, {});
+  const curWorld = computeWorldMatrices(n.bones, resolveSkinPose(n));
+  const bounds = vertexBounds(skinVertices(mesh, bindWorld, curWorld));
+  if (!bounds) return { pos: n.position, id: n.id };
+  return {
+    pos: { ...n.position, x: n.position.x + bounds.minX, y: n.position.y + bounds.minY },
+    id: n.id,
+    anchor: "top-left",
+    width: bounds.maxX - bounds.minX,
+    height: bounds.maxY - bounds.minY
+  };
+}
+function collectDrawnItems(nodes) {
+  const out = [];
+  for (const n of nodes) {
+    switch (n.type) {
+      case "draw-sprite":
+        if (isValidScenePos(n.position)) out.push({ pos: n.position, id: n.id, anchor: n.anchor, width: n.width, height: n.height, rotation: n.rotation });
+        break;
+      case "draw-shape":
+        if (isValidScenePos(n.position)) out.push(shapeDrawnItem(n));
+        break;
+      case "draw-skinned-mesh":
+        if (isValidScenePos(n.position)) out.push(skinnedMeshDrawnItem(n));
+        break;
+      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":
+        for (const it of n.items) {
+          if (isValidScenePos(it.position)) out.push({ pos: it.position, id: it.id, anchor: it.anchor, width: it.width, height: it.height, rotation: it.rotation });
+        }
+        break;
+      case "draw-shape-layer":
+        for (const it of n.items) {
+          if (isValidScenePos(it.position)) out.push(shapeDrawnItem(it));
+        }
+        break;
+      case "draw-text-layer":
+        for (const it of n.items) {
+          if (isValidScenePos(it.position)) out.push({ pos: it.position, id: it.id });
+        }
+        break;
+    }
+  }
+  return out;
+}
+function buildHitIndex(items) {
+  const m = /* @__PURE__ */ new Map();
+  for (const it of items) {
+    if (it.id !== void 0) m.set(`${it.pos.x},${it.pos.y}`, it.id);
+  }
+  return m;
+}
+function withPreviewPosition(nodes, id, pos) {
+  return nodes.map((n) => {
+    if (n.type === "draw-sprite-layer" || n.type === "draw-shape-layer" || n.type === "draw-text-layer") {
+      if (!n.items.some((it) => it.id === id)) return n;
+      return { ...n, items: n.items.map((it) => it.id === id ? { ...it, position: pos } : it) };
+    }
+    if (n.type === "draw-group") {
+      if (!Array.isArray(n.items)) return n;
+      return { ...n, items: withPreviewPosition(n.items, id, pos) };
+    }
+    if (n.id === id && "position" in n) {
+      return { ...n, position: pos };
+    }
+    return n;
+  });
+}
+function hitTestSprites(items, projector, point) {
+  for (let i = items.length - 1; i >= 0; i--) {
+    const it = items[i];
+    if (it.id === void 0) continue;
+    const r = spriteRect(projector, { position: it.pos, anchor: it.anchor, width: it.width, height: it.height });
+    const test = it.rotation ? rotatePoint(point, { x: r.x + r.w / 2, y: r.y + r.h / 2 }, -it.rotation) : point;
+    if (test.x >= r.x && test.x <= r.x + r.w && test.y >= r.y && test.y <= r.y + r.h) return it.id;
+  }
+  return void 0;
+}
+function rotatePoint(p, center, radians) {
+  const cos = Math.cos(radians);
+  const sin = Math.sin(radians);
+  const dx = p.x - center.x;
+  const dy = p.y - center.y;
+  return { x: center.x + dx * cos - dy * sin, y: center.y + dx * sin + dy * cos };
+}
+function useOnScreen(ref, margin = "200px") {
+  const [intersecting, setIntersecting] = useState(true);
+  const [pageVisible, setPageVisible] = useState(true);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting), { rootMargin: margin });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref, margin]);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const update = () => setPageVisible(document.visibilityState !== "hidden");
+    update();
+    document.addEventListener("visibilitychange", update);
+    return () => document.removeEventListener("visibilitychange", update);
+  }, []);
+  return intersecting && pageVisible;
+}
+
+export { DrawFxLayer, DrawGroup, DrawMesh, DrawShape, DrawSkinnedMesh, DrawableRegistryContext, SPRITE_FALLBACK_FILL, SPRITE_FALLBACK_STROKE, applyLineCharacter, applyMeshAnimation, applySceneMaterials, applyShapeAnimation, arcPoints, buildHitIndex, clampSegments, collectDrawnItems, drawMarker, expandFxLayer, fillLabel, fillMark, getImageStatus, getOrLoadImage, hitTestSprites, isAnimatedGroup, isAnimatedMesh, isAnimatedShape, isValidScenePos, labelFont, labelText, markColor, markDash, markStrokeWidth, outlineCarriesFill, outlineStroke, paintShape, paintSkinnedMesh, polyhedronBounds, resolveDrawableColors, spriteAssetState, spriteRect, tracePolyline, useCanvasTheme, useOnScreen, withPreviewPosition, withSeries };