@almadar/ui 6.57.0 → 6.59.0

package/dist/{chunk-HA7CJWQX.js → chunk-J755QADM.js}

@@ -4,7 +4,7 @@ import { updateAssetStatus } from './chunk-Q47ZN2DW.js';
 import { cn, domPassthrough } from './chunk-64WACXM7.js';
 import { __publicField } from './chunk-QPXIAUJD.js';
 import { createLogger } from '@almadar/logger';
-import React, { useCallback, createContext, useState, useLayoutEffect, useContext } from 'react';
+import React, { useCallback, createContext, useContext, useState, useLayoutEffect } from 'react';
 import { useThemeScope, useTheme } from '@almadar/ui/context';
 import { jsx } from 'react/jsx-runtime';
 import { renderUiEntriesOf } from '@almadar/core/patterns';
@@ -1000,1305 +1000,1305 @@ function parseTransitionLevel(schema, orbitalName, traitName, transitionIndex) {
   };
 }
 
-// lib/atlasSlice.ts
-var atlasCache = /* @__PURE__ */ new Map();
-function isTilesheet(a) {
-  return typeof a.tileWidth === "number";
+// lib/drawable/contract.ts
+function isValidScenePos(pos) {
+  return Number.isFinite(pos?.x) && Number.isFinite(pos?.y);
 }
-function isSpriteSheetAtlas(a) {
-  const s = a;
-  return typeof s.frameWidth === "number" && typeof s.frameHeight === "number" && typeof s.animations === "object";
+function spriteAssetState(node) {
+  if (!isValidScenePos(node.position)) return "invalid-position";
+  return typeof node.asset?.url === "string" && node.asset.url.length > 0 ? "ready" : "asset-unset";
 }
-function getAtlas(url, onReady) {
-  if (atlasCache.has(url)) return atlasCache.get(url) ?? void 0;
-  atlasCache.set(url, void 0);
-  fetch(url).then((r) => r.json()).then((json) => {
-    atlasCache.set(url, json);
-    onReady();
-  }).catch(() => {
-    atlasCache.set(url, null);
-    onReady();
-  });
-  return void 0;
+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
+  };
 }
-function atlasFailed(url) {
-  return atlasCache.get(url) === null;
+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);
 }
-function subRectFor(atlas, sprite) {
-  if (isTilesheet(atlas)) {
-    let col;
-    let row;
-    if (sprite.includes(",")) {
-      const [c, r] = sprite.split(",").map((n) => Number(n.trim()));
-      col = c;
-      row = r;
-    } else {
-      const i = Number(sprite);
-      if (!Number.isFinite(i)) return null;
-      col = i % atlas.columns;
-      row = Math.floor(i / atlas.columns);
+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 (!Number.isFinite(col) || !Number.isFinite(row) || col < 0 || row < 0 || col >= atlas.columns || row >= atlas.rows) return null;
-    const margin = atlas.margin ?? 0;
-    const spacing = atlas.spacing ?? 0;
+    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 {
-      sx: margin + col * (atlas.tileWidth + spacing),
-      sy: margin + row * (atlas.tileHeight + spacing),
-      sw: atlas.tileWidth,
-      sh: atlas.tileHeight
+      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 (isSpriteSheetAtlas(atlas)) return null;
-  const st = atlas.subTextures[sprite];
-  if (!st) return null;
-  return { sx: st.x, sy: st.y, sw: st.width, sh: st.height };
-}
-function atlasUrlOf(asset) {
-  return typeof asset?.atlas === "string" && asset.atlas.length > 0 ? asset.atlas : void 0;
-}
-function isAtlasAsset(asset) {
-  return atlasUrlOf(asset) !== void 0 && typeof asset?.sprite === "string" && asset.sprite.length > 0;
-}
-function resolveAssetSource(img, asset, onReady) {
-  if (isAtlasAsset(asset)) {
-    const atlas = getAtlas(asset.atlas, onReady);
-    if (!atlas) return null;
-    const rect = subRectFor(atlas, asset.sprite);
-    if (!rect) return null;
-    return { img, rect, aspect: rect.sw / rect.sh };
+  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
+    };
   }
-  const natW = img.naturalWidth || 1;
-  const natH = img.naturalHeight || 1;
-  return { img, rect: null, aspect: natW / natH };
-}
-function blit(ctx, src, dx, dy, dw, dh) {
-  if (src.rect) ctx.drawImage(src.img, src.rect.sx, src.rect.sy, src.rect.sw, src.rect.sh, dx, dy, dw, dh);
-  else ctx.drawImage(src.img, dx, dy, dw, dh);
-}
-
-// components/core/atoms/fx.ts
-function resolveFxView(item, presets) {
-  const row = presets?.find((p) => p.type === item.type);
-  if (!row) return item;
+  if (!g.center || g.radius === void 0) return void 0;
   return {
-    ...item,
-    space: item.space ?? row.space,
-    effect: item.effect ?? row.effect,
-    color: item.color ?? row.color,
-    size: item.size ?? row.size,
-    vx: item.vx ?? row.vx,
-    vy: item.vy ?? row.vy,
-    vz: item.vz ?? row.vz,
-    particleCount: item.particleCount ?? row.particleCount,
-    animation: item.animation ?? row.animation,
-    shape: row.shape,
-    count: row.count,
-    glow: row.glow,
-    gravity: row.gravity,
-    color2: row.color2
+    kind: "radial",
+    cx: ox + g.center.x * scale,
+    cy: oy + g.center.y * scale,
+    r: g.radius * scale,
+    stops: g.stops
   };
 }
-function fxLifecycle(item, epochNowMs, tickMs) {
-  const maxTtl = Math.max(item.maxTtl ?? item.ttl, item.ttl, 1);
-  const lifeMs = maxTtl * tickMs;
-  const ageMs = item.bornAt !== void 0 && epochNowMs > 0 ? Math.max(0, epochNowMs - item.bornAt) : (1 - item.ttl / maxTtl) * lifeMs;
-  const progress = Math.min(1, Math.max(0, ageMs / lifeMs));
-  return { lifeMs, ageMs, progress, fade: 1 - progress };
-}
-function fxHash01(seed, salt) {
-  let h = 2166136261 ^ salt;
-  for (let i = 0; i < seed.length; i++) {
-    h ^= seed.charCodeAt(i);
-    h = Math.imul(h, 16777619);
+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 };
   }
-  h ^= h >>> 13;
-  h = Math.imul(h, 1274126177);
-  h ^= h >>> 16;
-  return (h >>> 0) / 4294967296;
-}
-var CONFETTI_COLORS = [
-  "var(--color-primary)",
-  "var(--color-success)",
-  "var(--color-warning)",
-  "var(--color-error)",
-  "gold",
-  "dodgerblue"
-];
-function createConfettiParticles(count, seed) {
-  return Array.from({ length: count }, (_, i) => ({
-    id: i,
-    color: CONFETTI_COLORS[Math.floor(fxHash01(seed, i * 7 + 1) * CONFETTI_COLORS.length)],
-    left: 30 + fxHash01(seed, i * 7 + 2) * 40,
-    delay: fxHash01(seed, i * 7 + 3) * 300,
-    angle: fxHash01(seed, i * 7 + 4) * 360,
-    distance: 40 + fxHash01(seed, i * 7 + 5) * 80,
-    rotation: fxHash01(seed, i * 7 + 6) * 720 - 360,
-    size: 4 + fxHash01(seed, i * 7 + 7) * 6
-  }));
+  return { kind: "noise", scale: (p.scale ?? 2) / unit, alpha: p.alpha, color: p.color };
 }
-var CONFETTI_BURST_KEYFRAMES = `
-@keyframes confetti-burst {
-  0% {
-    opacity: 1;
-    transform: translate(0, 0) rotate(0deg) scale(1);
-  }
-  70% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-    transform: translate(var(--confetti-tx), var(--confetti-ty)) rotate(var(--confetti-rotate)) scale(0.5);
-  }
-}
-`;
-var log2 = 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 !== "") log2.warn("invalid-theme-keyword", { var: name, value, allowed });
-  return fallback;
-}
-var PLAIN_LENGTH = /^(-?[\d.]+)(px)?$/;
-var ScopeReader = class {
-  constructor(scope) {
-    __publicField(this, "scope", scope);
-    __publicField(this, "style");
-    __publicField(this, "probe");
-    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);
-  }
-  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]);
-    log2.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;
-    log2.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)" };
+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
+    );
   }
-  family(name, fallback) {
-    return this.raw(name) || fallback;
+  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);
   }
-};
-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";
+  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;
     }
-    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",
-      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)
+    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 } : {}
     };
-  } finally {
-    r.dispose();
+    register(node);
   }
+  return null;
 }
-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 isAnimatedGroup(node) {
+  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
 }
-function markStrokeWidth(theme, literal, role, fallback = "normal") {
-  return literal ?? theme.strokes[role ?? fallback];
+function DrawGroup(props) {
+  const register = useContext(DrawableRegistryContext);
+  if (register) register({ ...props, type: "draw-group" });
+  return null;
 }
-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 };
+
+// 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 labelText(theme, text, textCase = "theme") {
-  return theme.label.uppercase && textCase === "theme" ? text.toUpperCase() : text;
+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 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 getImageStatus(url) {
+  return cache.get(url)?.status;
 }
-function outlineStroke(stroke, fill, style, fillTone) {
-  return outlineCarriesFill(fill, style, fillTone) && fill !== void 0 ? fill : stroke;
+
+// 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 outlineCarriesFill(fill, style, fillTone) {
-  return style === "outline" && fill !== void 0 && fillTone !== "fill";
+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 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 applyAffine(m, x, y) {
+  return [m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]];
 }
-function markDash(theme, dash) {
-  if (dash === "dashed") return theme.dash;
-  if (dash === "dotted") return theme.dot;
-  return [];
+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 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 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 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));
+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);
     }
-  }
-  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);
+    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;
     }
-    ctx.stroke();
-  } else {
-    ctx.globalAlpha *= style === "tint" ? theme.fillOpacity : 1;
-    ctx.fillStyle = color;
-    ctx.fill();
-  }
-  ctx.restore();
+    return [x, y];
+  });
 }
-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 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];
 }
-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;
+var meshCache = /* @__PURE__ */ new Map();
+function isRigBundle(json) {
+  return json.mesh !== void 0 || json.bones !== void 0;
 }
-
-// lib/drawable/contract.ts
-function isValidScenePos(pos) {
-  return Number.isFinite(pos?.x) && Number.isFinite(pos?.y);
+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 spriteAssetState(node) {
-  if (!isValidScenePos(node.position)) return "invalid-position";
-  return typeof node.asset?.url === "string" && node.asset.url.length > 0 ? "ready" : "asset-unset";
+function skinMeshFailed(url) {
+  return meshCache.get(url) === null;
 }
-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
-  };
+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 };
 }
-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);
+
+// 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 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;
-      }
+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 out;
+  return best;
 }
-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
-    };
+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];
   }
-  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
-  };
+  return node.pose ?? {};
 }
-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 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 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);
+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;
     }
-    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;
+  }
+  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 DrawShape(props) {
+function DrawSkinnedMesh(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);
-  }
+  if (register) register({ ...props, type: "draw-skinned-mesh" });
   return null;
 }
-function isAnimatedGroup(node) {
+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);
 }
-function DrawGroup(props) {
+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-group" });
+  if (register) register({ ...props, type: "draw-mesh" });
   return null;
 }
 
-// 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?.();
+// components/core/atoms/fx.ts
+function resolveFxView(item, presets) {
+  const row = presets?.find((p) => p.type === item.type);
+  if (!row) return item;
+  return {
+    ...item,
+    space: item.space ?? row.space,
+    effect: item.effect ?? row.effect,
+    color: item.color ?? row.color,
+    size: item.size ?? row.size,
+    vx: item.vx ?? row.vx,
+    vy: item.vy ?? row.vy,
+    vz: item.vz ?? row.vz,
+    particleCount: item.particleCount ?? row.particleCount,
+    animation: item.animation ?? row.animation,
+    shape: row.shape,
+    count: row.count,
+    glow: row.glow,
+    gravity: row.gravity,
+    color2: row.color2
   };
-  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;
+function fxLifecycle(item, epochNowMs, tickMs) {
+  const maxTtl = Math.max(item.maxTtl ?? item.ttl, item.ttl, 1);
+  const lifeMs = maxTtl * tickMs;
+  const ageMs = item.bornAt !== void 0 && epochNowMs > 0 ? Math.max(0, epochNowMs - item.bornAt) : (1 - item.ttl / maxTtl) * lifeMs;
+  const progress = Math.min(1, Math.max(0, ageMs / lifeMs));
+  return { lifeMs, ageMs, progress, fade: 1 - progress };
 }
-
-// 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 fxHash01(seed, salt) {
+  let h = 2166136261 ^ salt;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  h ^= h >>> 13;
+  h = Math.imul(h, 1274126177);
+  h ^= h >>> 16;
+  return (h >>> 0) / 4294967296;
 }
-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
-  ];
+var CONFETTI_COLORS = [
+  "var(--color-primary)",
+  "var(--color-success)",
+  "var(--color-warning)",
+  "var(--color-error)",
+  "gold",
+  "dodgerblue"
+];
+function createConfettiParticles(count, seed) {
+  return Array.from({ length: count }, (_, i) => ({
+    id: i,
+    color: CONFETTI_COLORS[Math.floor(fxHash01(seed, i * 7 + 1) * CONFETTI_COLORS.length)],
+    left: 30 + fxHash01(seed, i * 7 + 2) * 40,
+    delay: fxHash01(seed, i * 7 + 3) * 300,
+    angle: fxHash01(seed, i * 7 + 4) * 360,
+    distance: 40 + fxHash01(seed, i * 7 + 5) * 80,
+    rotation: fxHash01(seed, i * 7 + 6) * 720 - 360,
+    size: 4 + fxHash01(seed, i * 7 + 7) * 6
+  }));
 }
-function applyAffine(m, x, y) {
-  return [m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]];
+var CONFETTI_BURST_KEYFRAMES = `
+@keyframes confetti-burst {
+  0% {
+    opacity: 1;
+    transform: translate(0, 0) rotate(0deg) scale(1);
+  }
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translate(var(--confetti-tx), var(--confetti-ty)) rotate(var(--confetti-rotate)) scale(0.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];
+`;
+
+// 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 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;
+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 } } : {}
   };
-  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);
+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 } } : {}
+        }
+      ];
     }
-    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;
+    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 } } : {}
+        };
+      });
     }
-    return [x, y];
-  });
+    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 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];
+function DrawFxLayer(_props) {
+  return null;
 }
-var meshCache = /* @__PURE__ */ new Map();
-function isRigBundle(json) {
-  return json.mesh !== void 0 || json.bones !== void 0;
+
+// lib/atlasSlice.ts
+var atlasCache = /* @__PURE__ */ new Map();
+function isTilesheet(a) {
+  return typeof a.tileWidth === "number";
 }
-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);
+function isSpriteSheetAtlas(a) {
+  const s = a;
+  return typeof s.frameWidth === "number" && typeof s.frameHeight === "number" && typeof s.animations === "object";
+}
+function getAtlas(url, onReady) {
+  if (atlasCache.has(url)) return atlasCache.get(url) ?? void 0;
+  atlasCache.set(url, void 0);
+  fetch(url).then((r) => r.json()).then((json) => {
+    atlasCache.set(url, json);
     onReady();
   }).catch(() => {
-    meshCache.set(url, null);
+    atlasCache.set(url, null);
     onReady();
   });
   return void 0;
 }
-function skinMeshFailed(url) {
-  return meshCache.get(url) === null;
+function atlasFailed(url) {
+  return atlasCache.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;
+function subRectFor(atlas, sprite) {
+  if (isTilesheet(atlas)) {
+    let col;
+    let row;
+    if (sprite.includes(",")) {
+      const [c, r] = sprite.split(",").map((n) => Number(n.trim()));
+      col = c;
+      row = r;
+    } else {
+      const i = Number(sprite);
+      if (!Number.isFinite(i)) return null;
+      col = i % atlas.columns;
+      row = Math.floor(i / atlas.columns);
+    }
+    if (!Number.isFinite(col) || !Number.isFinite(row) || col < 0 || row < 0 || col >= atlas.columns || row >= atlas.rows) return null;
+    const margin = atlas.margin ?? 0;
+    const spacing = atlas.spacing ?? 0;
+    return {
+      sx: margin + col * (atlas.tileWidth + spacing),
+      sy: margin + row * (atlas.tileHeight + spacing),
+      sw: atlas.tileWidth,
+      sh: atlas.tileHeight
+    };
   }
-  return { minX, minY, maxX, maxY };
+  if (isSpriteSheetAtlas(atlas)) return null;
+  const st = atlas.subTextures[sprite];
+  if (!st) return null;
+  return { sx: st.x, sy: st.y, sw: st.width, sh: st.height };
 }
-
-// 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 });
+function atlasUrlOf(asset) {
+  return typeof asset?.atlas === "string" && asset.atlas.length > 0 ? asset.atlas : void 0;
 }
-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 isAtlasAsset(asset) {
+  return atlasUrlOf(asset) !== void 0 && typeof asset?.sprite === "string" && asset.sprite.length > 0;
 }
-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];
+function resolveAssetSource(img, asset, onReady) {
+  if (isAtlasAsset(asset)) {
+    const atlas = getAtlas(asset.atlas, onReady);
+    if (!atlas) return null;
+    const rect = subRectFor(atlas, asset.sprite);
+    if (!rect) return null;
+    return { img, rect, aspect: rect.sw / rect.sh };
   }
-  return node.pose ?? {};
+  const natW = img.naturalWidth || 1;
+  const natH = img.naturalHeight || 1;
+  return { img, rect: null, aspect: natW / natH };
 }
-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 };
+function blit(ctx, src, dx, dy, dw, dh) {
+  if (src.rect) ctx.drawImage(src.img, src.rect.sx, src.rect.sy, src.rect.sw, src.rect.sh, dx, dy, dw, dh);
+  else ctx.drawImage(src.img, dx, dy, dw, dh);
 }
-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;
+var log2 = 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 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();
+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 !== "") log2.warn("invalid-theme-keyword", { var: name, value, allowed });
+  return fallback;
+}
+var PLAIN_LENGTH = /^(-?[\d.]+)(px)?$/;
+var ScopeReader = class {
+  constructor(scope) {
+    __publicField(this, "scope", scope);
+    __publicField(this, "style");
+    __publicField(this, "probe");
+    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);
+  }
+  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]);
+    log2.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;
+    log2.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;
   }
-  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;
+  color(name) {
+    const raw = this.raw(name);
+    return parseComputedColor(raw) ?? resolveThemeColor(`var(${name})`, this.scope);
   }
-  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;
+  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)" };
   }
-  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);
+  family(name, fallback) {
+    return this.raw(name) || fallback;
   }
-  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;
+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;
 }
-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]);
+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 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",
+      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();
   }
-  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);
+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]) };
 }
-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;
+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 {
-    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")
-  };
+  return value;
 }
-function DrawMesh(props) {
-  const register = useContext(DrawableRegistryContext);
-  if (register) register({ ...props, type: "draw-mesh" });
-  return null;
+function markStrokeWidth(theme, literal, role, fallback = "normal") {
+  return literal ?? theme.strokes[role ?? fallback];
 }
-
-// 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
-    };
+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;
   }
-  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 markDash(theme, dash) {
+  if (dash === "dashed") return theme.dash;
+  if (dash === "dotted") return theme.dot;
+  return [];
 }
-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 } } : {}
-        };
-      });
+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;
     }
-    default: {
-      const count = view.count ?? 6;
-      return Array.from({ length: count }, (_, i) => sparkShape(view, pos, i, fade, progress));
+    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 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 [];
+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 = [];
-  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);
+  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 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));
+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;
   }
-  return out;
+  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 DrawFxLayer(_props) {
-  return null;
+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;
 }
 
 // lib/drawable/themeDrawables.ts