@almadar/ui 6.58.0 → 6.61.0

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

@@ -1,12 +1,12 @@
 import { useTapReveal } from './chunk-XJTHMW4G.js';
 import { useEventBus } from './chunk-CHNC4UYE.js';
-import { updateAssetStatus } from './chunk-Q47ZN2DW.js';
+import { isMotionEnabled, updateAssetStatus } from './chunk-N23SVGTH.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, { useRef, useCallback, createContext, useEffect, useContext, useState, useLayoutEffect } from 'react';
 import { useThemeScope, useTheme } from '@almadar/ui/context';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { renderUiEntriesOf } from '@almadar/core/patterns';
 import { DIAGRAM_TONES, isInlineTrait, DIAGRAM_TONE_COLOR_KEYS, DIAGRAM_TEXT_SIZES } from '@almadar/core';
 import { parseListenSource } from '@almadar/runtime';
@@ -223,17 +223,20 @@ var EFFECT_OPERATOR_CATEGORY = {
   "workspace/write-schema": "system",
   "workspace/write-plan": "system",
   "workspace/archive-orbital": "system",
-  "lolo/emit-body": "system"
+  "behavior/catalog": "system",
+  "behavior/describe": "system",
+  "behavior/source": "system",
+  "program/read": "system",
+  "program/print": "system",
+  "program/eval": "system",
+  "program/compose": "system"
 };
 var EFFECT_FAMILY_CATEGORY = {
   agent: "system",
   os: "system",
   browser: "system",
   llm: "system",
-  behavior: "system",
-  validate: "control",
   session: "system",
-  compose: "system",
   trace: "control",
   memory: "data",
   application: "system"
@@ -295,17 +298,20 @@ var EFFECT_OPERATOR_ZONE = {
   "workspace/write-schema": "system",
   "workspace/write-plan": "system",
   "workspace/archive-orbital": "system",
-  "lolo/emit-body": "system"
+  "behavior/catalog": "system",
+  "behavior/describe": "system",
+  "behavior/source": "system",
+  "program/read": "system",
+  "program/print": "system",
+  "program/eval": "system",
+  "program/compose": "system"
 };
 var EFFECT_FAMILY_ZONE = {
   agent: "system",
   os: "system",
   browser: "system",
   llm: "remote",
-  behavior: "system",
-  validate: "flow",
   session: "system",
-  compose: "system",
   trace: "flow",
   memory: "store",
   application: "system"
@@ -328,7 +334,12 @@ function effectCategoryOf(head) {
 function asEffectOperator(head) {
   return isEffectOperator(head) ? head : null;
 }
+var PENDING_STD_CATEGORY_COLORS = {
+  "std-behavior-value": avlBlend("var(--color-accent)", 40, "var(--color-success)"),
+  "std-program": avlBlend("var(--color-accent)", 60, "var(--color-info)")
+};
 var OPERATOR_CATEGORY_COLORS = {
+  ...PENDING_STD_CATEGORY_COLORS,
   "arithmetic": "var(--color-primary)",
   "comparison": "var(--color-warning)",
   "logic": "var(--color-accent)",
@@ -383,6 +394,44 @@ function effectZoneOf(head) {
   return null;
 }
 
+// lib/bandShapes.ts
+var shape = (d) => `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='${d}'/></svg>")`;
+var BAND_SHAPES = {
+  wave: shape("M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z"),
+  arc: shape("M0 100 Q720 0 1440 100 Z"),
+  tilt: shape("M0 100 L1440 0 V100 Z"),
+  step: shape("M0 100 V75 H360 V50 H720 V25 H1080 V0 H1440 V100 Z"),
+  scallop: shape("M0 100 V40 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 V100 Z")
+};
+var BAND_EDGE_HEIGHT = "clamp(24px, 6vw, 96px)";
+var BAND_ACCENT_FALLBACK = "linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 12%, var(--color-background)), var(--color-background))";
+var BAND_EDGE_FILL = {
+  background: "var(--surface-page-image, none), var(--color-background)",
+  muted: "var(--color-muted)",
+  surface: "var(--color-card)",
+  gradient: `var(--surface-accent-image, ${BAND_ACCENT_FALLBACK}), var(--color-muted)`,
+  inverse: "var(--color-foreground)"
+};
+function bandEdgeMask(edge) {
+  return edge === "curve" ? "var(--surface-edge-mask, none)" : BAND_SHAPES[edge];
+}
+function bandEdgeHeight(edge) {
+  return edge === "curve" ? `var(--surface-edge-height, ${BAND_EDGE_HEIGHT})` : BAND_EDGE_HEIGHT;
+}
+function bandEdgeLayerStyle(edge, side, flip, color) {
+  const mask = bandEdgeMask(edge);
+  const turn = side === "top" ? flip ? "scaleY(-1)" : "rotate(180deg)" : flip ? "scaleX(-1)" : void 0;
+  const style = { height: bandEdgeHeight(edge), background: BAND_EDGE_FILL[color], maskImage: mask, WebkitMaskImage: mask, transform: turn };
+  if (color === "background") {
+    style.backgroundSize = "var(--surface-page-image-size, auto), auto";
+    style.backgroundAttachment = "fixed";
+  }
+  return style;
+}
+function bandPadding(basePad, edge) {
+  return edge === "none" ? void 0 : `calc(${basePad} + ${bandEdgeHeight(edge)})`;
+}
+
 // lib/pressable.ts
 function clickElement(el) {
   el.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
@@ -421,7 +470,215 @@ function rowOpenControlProps(enabled) {
 var STRETCHED_CONTROL = "after:absolute after:inset-0 after:content-[''] after:rounded-[inherit] focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-primary focus-visible:after:ring-inset";
 var STRETCHED_ABOVE = "relative z-[1]";
 
-// components/core/atoms/Box.tsx
+// lib/motion-tokens.ts
+function cssTimeMs(value) {
+  const v = value.trim();
+  if (v.endsWith("ms")) return Number.parseFloat(v);
+  if (v.endsWith("s")) return Number.parseFloat(v) * 1e3;
+  return Number.NaN;
+}
+function tokenAt(el, name) {
+  for (let at = el; at !== null; at = at.parentElement) {
+    const value = getComputedStyle(at).getPropertyValue(name).trim();
+    if (value !== "") return value;
+  }
+  return "";
+}
+function motionTiming(durationToken, easingToken, scope) {
+  const duration = cssTimeMs(tokenAt(scope ?? document.documentElement, durationToken));
+  const easing = tokenAt(scope ?? document.documentElement, easingToken);
+  const reduced = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  if (!isMotionEnabled() || reduced || !Number.isFinite(duration) || easing === "") return void 0;
+  return { duration, easing };
+}
+function layoutScale(el) {
+  const layoutWidth = el instanceof HTMLElement ? el.offsetWidth : 0;
+  const screenWidth = el.getBoundingClientRect().width;
+  return layoutWidth > 0 && screenWidth > 0 ? screenWidth / layoutWidth : 1;
+}
+
+// lib/animate-changes.ts
+function ownMotion(el) {
+  return el.closest("[data-item-move]") !== null || /\balmadar-enter-/.test(el.getAttribute("class") ?? "");
+}
+function boxesOf(el) {
+  return getComputedStyle(el).display === "contents" ? boxedChildren(el) : [el];
+}
+function boxedChildren(el) {
+  return [...el.children].flatMap(boxesOf);
+}
+var GHOST_STYLE = ["font", "letterSpacing", "lineHeight", "color", "textAlign", "whiteSpace", "textTransform"];
+function roll(el, oldText, timing) {
+  const box = el.getBoundingClientRect();
+  const scale = layoutScale(el);
+  const computed = getComputedStyle(el);
+  const holder = document.createElement("span");
+  holder.setAttribute("aria-hidden", "true");
+  Object.assign(holder.style, {
+    position: "fixed",
+    left: `${box.left}px`,
+    top: `${box.top}px`,
+    width: `${box.width / scale}px`,
+    height: `${box.height / scale}px`,
+    transform: scale === 1 ? "" : `scale(${scale})`,
+    transformOrigin: "top left",
+    pointerEvents: "none",
+    zIndex: "2147483647"
+  });
+  const ghost = document.createElement("span");
+  ghost.setAttribute("data-change-ghost", "");
+  ghost.setAttribute("aria-hidden", "true");
+  ghost.textContent = oldText;
+  for (const prop of GHOST_STYLE) ghost.style[prop] = computed[prop];
+  Object.assign(ghost.style, { display: "block", width: "100%", height: "100%", overflow: "visible" });
+  holder.appendChild(ghost);
+  document.body.appendChild(holder);
+  const out = ghost.animate(
+    [{ opacity: 1, transform: "none" }, { opacity: 0, transform: "translateY(-40%)", offset: 0.5 }, { opacity: 0, transform: "translateY(-40%)" }],
+    timing
+  );
+  if (out === void 0) holder.remove();
+  else {
+    out.addEventListener("finish", () => holder.remove());
+    out.addEventListener("cancel", () => holder.remove());
+  }
+  el.animate(
+    [{ opacity: 0, transform: "translateY(40%)" }, { opacity: 0, transform: "translateY(40%)", offset: 0.4 }, { opacity: 1, transform: "none" }],
+    timing
+  );
+}
+var textOnly = (el) => el instanceof HTMLElement && el.childNodes.length > 0 && [...el.childNodes].every((n) => n.nodeType === Node.TEXT_NODE);
+function settle(root, added, changed) {
+  const timing = motionTiming("--duration-normal", "--easing-emphasized", root);
+  if (timing === void 0) return;
+  for (const el of added) {
+    if (ownMotion(el) || el.parentElement !== null && [...added].some((other) => other !== el && other.contains(el))) continue;
+    for (const box of boxesOf(el)) {
+      if (ownMotion(box)) continue;
+      box.animate([{ opacity: 0, transform: "translateY(6px)" }, { opacity: 1, transform: "none" }], timing);
+    }
+  }
+  for (const [el, oldText] of changed) {
+    if (ownMotion(el) || [...added].some((a) => a.contains(el))) continue;
+    if (oldText !== void 0 && oldText !== el.textContent && textOnly(el)) roll(el, oldText, timing);
+    else el.animate([{ opacity: 0.25 }, { opacity: 1 }], timing);
+  }
+}
+function blocks(root) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const wrapper of root.querySelectorAll("[data-pattern]")) {
+    for (const box of boxesOf(wrapper)) if (!ownMotion(box)) seen.add(box);
+  }
+  return [...seen];
+}
+function glidePushed(root, places) {
+  const timing = motionTiming("--duration-normal", "--easing-emphasized", root);
+  const origin = root.getBoundingClientRect();
+  const applied = /* @__PURE__ */ new Map();
+  const present = /* @__PURE__ */ new Set();
+  for (const el of blocks(root)) {
+    present.add(el);
+    if ((el.getAnimations?.() ?? []).length > 0) {
+      places.delete(el);
+      continue;
+    }
+    const box = el.getBoundingClientRect();
+    const now = { x: box.left - origin.left, y: box.top - origin.top };
+    const was = places.get(el);
+    places.set(el, now);
+    if (was === void 0 || timing === void 0) continue;
+    let inherited = { x: 0, y: 0 };
+    for (let up = el.parentElement; up !== null && up !== root; up = up.parentElement) {
+      const a = applied.get(up);
+      if (a !== void 0) {
+        inherited = a;
+        break;
+      }
+    }
+    const dx = was.x - now.x - inherited.x;
+    const dy = was.y - now.y - inherited.y;
+    if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) {
+      if (inherited.x !== 0 || inherited.y !== 0) applied.set(el, inherited);
+      continue;
+    }
+    const scale = layoutScale(el);
+    el.animate([{ transform: `translate(${dx / scale}px, ${dy / scale}px)` }, { transform: "none" }], { ...timing, composite: "add" });
+    applied.set(el, { x: inherited.x + dx, y: inherited.y + dy });
+  }
+  for (const el of places.keys()) if (!present.has(el)) places.delete(el);
+}
+function easeHeight(root) {
+  if (typeof ResizeObserver === "undefined") return () => void 0;
+  let rest;
+  let glide;
+  const sizes = new ResizeObserver(() => {
+    const scale = layoutScale(root);
+    const shown = root.getBoundingClientRect().height / scale;
+    const gliding = glide !== void 0 && glide.playState === "running";
+    glide?.cancel();
+    glide = void 0;
+    const height = root.getBoundingClientRect().height / scale;
+    const from = gliding ? shown : rest;
+    rest = height;
+    const timing = motionTiming("--duration-normal", "--easing-emphasized", root);
+    if (from === void 0 || timing === void 0 || Math.abs(from - height) < 1) return;
+    glide = root.animate(
+      [{ height: `${from}px`, overflow: "clip" }, { height: `${height}px`, overflow: "clip" }],
+      timing
+    ) ?? void 0;
+  });
+  let watched = [];
+  const watch = () => {
+    const next = boxedChildren(root);
+    if (next.length === watched.length && next.every((el, i) => el === watched[i])) return;
+    watched = next;
+    sizes.disconnect();
+    for (const el of next) sizes.observe(el);
+  };
+  watch();
+  const children = new MutationObserver(watch);
+  children.observe(root, { childList: true, subtree: true });
+  return () => {
+    children.disconnect();
+    sizes.disconnect();
+  };
+}
+function useAnimateChanges(ref, enabled) {
+  useEffect(() => {
+    const root = ref.current;
+    if (!enabled || root === null) return;
+    return easeHeight(root);
+  }, [ref, enabled]);
+  useEffect(() => {
+    const root = ref.current;
+    if (!enabled || root === null || typeof MutationObserver === "undefined") return;
+    const observer = new MutationObserver((records) => {
+      const added = /* @__PURE__ */ new Set();
+      const changed = /* @__PURE__ */ new Map();
+      for (const record of records) {
+        if (record.type === "childList") {
+          for (const node of record.addedNodes) {
+            if (node instanceof Element) added.add(node);
+            else if (node.nodeType === Node.TEXT_NODE && node.parentElement !== null && changed.get(node.parentElement) === void 0) {
+              const removed = [...record.removedNodes].filter((n) => n.nodeType === Node.TEXT_NODE);
+              changed.set(node.parentElement, removed.length > 0 ? removed.map((n) => n.textContent ?? "").join("") : void 0);
+            }
+          }
+        } else if (record.type === "characterData") {
+          const el = record.target.parentElement;
+          if (el === null || changed.get(el) !== void 0) continue;
+          changed.set(el, [...el.childNodes].map((n) => n === record.target ? record.oldValue ?? "" : n.textContent ?? "").join(""));
+        }
+      }
+      glidePushed(root, places);
+      settle(root, added, changed);
+    });
+    const places = /* @__PURE__ */ new Map();
+    glidePushed(root, places);
+    observer.observe(root, { subtree: true, childList: true, characterData: true, characterDataOldValue: true });
+    return () => observer.disconnect();
+  }, [ref, enabled]);
+}
 var paddingStyles = {
   none: "p-0",
   xs: "p-1",
@@ -486,7 +743,18 @@ var bgStyles = {
   muted: "bg-muted text-foreground",
   accent: "bg-accent text-accent-foreground",
   surface: "bg-card",
-  overlay: "bg-card/80 backdrop-blur-sm"
+  overlay: "bg-card/80 backdrop-blur-sm",
+  gradient: "band-gradient",
+  inverse: "band-inverse"
+};
+var paddingRem = {
+  none: "0rem",
+  xs: "0.25rem",
+  sm: "0.5rem",
+  md: "1rem",
+  lg: "1.5rem",
+  xl: "2rem",
+  "2xl": "3rem"
 };
 var roundedStyles = {
   none: "rounded-none",
@@ -549,6 +817,13 @@ var Box = React.forwardRef(
     hoverEvent,
     tapReveal = true,
     maxWidth,
+    edgeTop = "none",
+    edgeBottom = "none",
+    edgeColor = "background",
+    edgeFlip = false,
+    texture = false,
+    animateChanges = false,
+    backdrop,
     onClick,
     onMouseEnter,
     onMouseLeave,
@@ -556,6 +831,13 @@ var Box = React.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
+    const ownRef = useRef(null);
+    useAnimateChanges(ownRef, animateChanges);
+    const setRef = useCallback((node) => {
+      ownRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref !== null) ref.current = node;
+    }, [ref]);
     const { override: themeOverride } = useThemeScope();
     const declaredTheme = rest["data-theme"];
     const dataTheme = declaredTheme !== void 0 && themeOverride ? themeOverride : declaredTheme;
@@ -591,12 +873,25 @@ var Box = React.forwardRef(
       if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
       onPointerDown?.(e);
     }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
+    const isBand = backdrop != null || texture || edgeTop !== "none" || edgeBottom !== "none";
+    const padKey = paddingY ?? padding;
+    const bandStyle = {};
+    const padTop = padKey ? bandPadding(paddingRem[padKey], edgeTop) : void 0;
+    const padBottom = padKey ? bandPadding(paddingRem[padKey], edgeBottom) : void 0;
+    if (padTop) bandStyle.paddingTop = padTop;
+    if (padBottom) bandStyle.paddingBottom = padBottom;
+    const bandLayers = isBand ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      backdrop != null && /* @__PURE__ */ jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-backdrop", children: backdrop }),
+      texture && /* @__PURE__ */ jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-texture" }),
+      edgeTop !== "none" && /* @__PURE__ */ jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-edge band-edge-top", style: bandEdgeLayerStyle(edgeTop, "top", edgeFlip, edgeColor) }),
+      edgeBottom !== "none" && /* @__PURE__ */ jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-edge band-edge-bottom", style: bandEdgeLayerStyle(edgeBottom, "bottom", edgeFlip, edgeColor) })
+    ] }) : null;
     const isClickable = action || onClick;
     const actionControl = action && rest.role === void 0 && rest.tabIndex === void 0 ? pressableProps(handleClick) : {};
     return React.createElement(
       Component,
       {
-        ref,
+        ref: setRef,
         className: cn(
           padding && paddingStyles[padding],
           paddingX && paddingXStyles[paddingX],
@@ -614,6 +909,7 @@ var Box = React.forwardRef(
           overflow && overflowStyles[overflow],
           position && positionStyles[position],
           isClickable && "cursor-pointer",
+          isBand && "band",
           className
         ),
         onClick: isClickable ? handleClick : void 0,
@@ -621,11 +917,15 @@ var Box = React.forwardRef(
         onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
         onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
         onPointerDown: hoverEvent && tapReveal || onPointerDown ? handlePointerDown : void 0,
-        style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
+        style: maxWidth || isBand ? { ...maxWidth ? { maxWidth } : {}, ...bandStyle, ...rest.style } : rest.style,
         ...rest,
-        "data-theme": dataTheme
+        "data-theme": dataTheme,
+        "data-motion": animateChanges ? "presentation" : void 0
       },
-      children
+      isBand ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        bandLayers,
+        children
+      ] }) : children
     );
   }
 );
@@ -1000,560 +1300,592 @@ 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);
+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
+    );
   }
-  70% {
-    opacity: 1;
+  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);
   }
-  100% {
-    opacity: 0;
-    transform: translate(var(--confetti-tx), var(--confetti-ty)) rotate(var(--confetti-rotate)) scale(0.5);
+  if (node.shadow) painter.setShadow({ color: node.shadow.color, blur: node.shadow.blur * tileWidth * groupScale });
+  const fill = node.fill === "none" ? void 0 : node.fill;
+  const stroke = node.stroke === "none" ? void 0 : node.stroke;
+  const pxFill = node.gradient ? gradientStyle(node.gradient, origin.x, origin.y, tileWidth) ?? fill : fill;
+  const pxStroke = node.strokeGradient ? gradientStyle(node.strokeGradient, origin.x, origin.y, tileWidth) ?? stroke : stroke;
+  const patFill = node.fillPattern ? patternStyle(node.fillPattern, groupScale) : void 0;
+  switch (node.shape) {
+    case "cell": {
+      const pts = dctx.projector.cellPath(node.position);
+      if (pxFill) painter.fillPoly(pts, pxFill);
+      if (patFill) painter.fillPoly(pts, patFill);
+      if (pxStroke) painter.strokePoly(pts, pxStroke, strokePx, true);
+      break;
+    }
+    case "rect": {
+      const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "top-left");
+      const tw = dctx.projector.tileWidth;
+      const x = p.x + (node.offsetX ?? 0) * tw;
+      const y = p.y + (node.offsetY ?? 0) * tw;
+      const w = (node.width ?? 0) * tw;
+      const h = (node.height ?? 0) * tw;
+      if (pxFill) painter.fillRect(x, y, w, h, pxFill);
+      if (patFill) painter.fillRect(x, y, w, h, patFill);
+      if (pxStroke) painter.strokeRect(x, y, w, h, pxStroke, strokePx);
+      break;
+    }
+    case "ellipse": {
+      const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "ground");
+      const tw = dctx.projector.tileWidth;
+      const cx = p.x + (node.offsetX ?? 0) * tw;
+      const cy = p.y + (node.offsetY ?? 0) * tw;
+      const rx = (node.radiusX ?? 0) * tw;
+      const ry = (node.radiusY ?? node.radiusX ?? 0) * tw;
+      if (pxFill) painter.fillEllipse(cx, cy, rx, ry, pxFill);
+      if (patFill) painter.fillEllipse(cx, cy, rx, ry, patFill);
+      if (pxStroke) painter.strokeEllipse(cx, cy, rx, ry, pxStroke, strokePx);
+      break;
+    }
+    case "poly": {
+      const pts = (node.points ?? []).map((pt) => ({
+        x: origin.x + ((node.offsetX ?? 0) + pt.x) * tileWidth,
+        y: origin.y + ((node.offsetY ?? 0) + pt.y) * tileWidth
+      }));
+      if (pxFill) painter.fillPoly(pts, pxFill);
+      if (patFill) painter.fillPoly(pts, patFill);
+      if (pxStroke) painter.strokePoly(pts, pxStroke, strokePx, true);
+      break;
+    }
+    case "path": {
+      if (!node.d) break;
+      painter.translate(origin.x + (node.offsetX ?? 0) * tileWidth, origin.y + (node.offsetY ?? 0) * tileWidth);
+      painter.scale(tileWidth, tileWidth);
+      if (node.strokeDash && node.strokeDash.length > 0) {
+        painter.setLineDash(
+          node.strokeDash.map((v) => v / (groupScale * tileWidth)),
+          (node.strokeDashOffset ?? 0) / (groupScale * tileWidth)
+        );
+      }
+      if (node.blur !== void 0 && node.blur > 0) painter.setBlur(node.blur / (groupScale * tileWidth));
+      const localFill = node.gradient ? gradientStyle(node.gradient, 0, 0, 1) ?? fill : fill;
+      const localStroke = node.strokeGradient ? gradientStyle(node.strokeGradient, 0, 0, 1) ?? stroke : stroke;
+      const localPat = node.fillPattern ? patternStyle(node.fillPattern, groupScale * tileWidth) : void 0;
+      if (localFill) painter.fillPath(node.d, localFill);
+      if (localPat) painter.fillPath(node.d, localPat);
+      if (localStroke) painter.strokePath(node.d, localStroke, strokePx / tileWidth);
+      break;
+    }
+  }
+  painter.restore();
+};
+function DrawShape(props) {
+  const register = useContext(DrawableRegistryContext);
+  if (register) {
+    const { opacity, ...rest } = props;
+    const node = {
+      ...rest,
+      type: "draw-shape",
+      ...opacity !== void 0 && opacity > 0 ? { opacity } : {}
+    };
+    register(node);
   }
+  return null;
 }
-`;
-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 isAnimatedGroup(node) {
+  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
 }
-function colorCss(c) {
-  return c.a >= 1 ? c.css : `rgba(${c.r}, ${c.g}, ${c.b}, ${c.a})`;
+function DrawGroup(props) {
+  const register = useContext(DrawableRegistryContext);
+  if (register) register({ ...props, type: "draw-group" });
+  return null;
 }
-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;
+
+// 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;
 }
-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;
+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;
   }
-  color(name) {
-    const raw = this.raw(name);
-    return parseComputedColor(raw) ?? resolveThemeColor(`var(${name})`, this.scope);
-  }
-  shadow(name) {
-    const raw = this.raw(name);
-    if (raw === "" || raw === "none") return null;
-    this.probe.style.boxShadow = `var(${name})`;
-    const computed = getComputedStyle(this.probe).boxShadow.trim() || raw;
-    this.probe.style.boxShadow = "";
-    const colorMatch = /(rgba?\([^)]*\)|#[0-9a-f]{3,8}|oklch\([^)]*\))/i.exec(computed);
-    const lengths = computed.replace(colorMatch?.[0] ?? "", "").trim().split(/\s+/).map((t) => PLAIN_LENGTH.exec(t)).filter((m) => m !== null).map((m) => Number(m[1]));
-    if (lengths.length < 2) return null;
-    const color = colorMatch ? parseComputedColor(colorMatch[0]) : null;
-    return { offsetX: lengths[0], offsetY: lengths[1], blur: lengths[2] ?? 0, color: color ? colorCss(color) : "rgba(0, 0, 0, 0.25)" };
-  }
-  family(name, fallback) {
-    return this.raw(name) || fallback;
-  }
-};
-function dashList(raw, fallback) {
-  if (raw === "") return fallback;
-  const parts = raw.split(/[\s,]+/).map(Number);
-  return parts.every((n) => Number.isFinite(n) && n >= 0) ? parts : fallback;
+  const entry = startLoad(url, onReady);
+  cache.set(url, entry);
+  updateAssetStatus(url, "pending");
+  return null;
 }
-function prefersReducedMotion(scope) {
-  const view = scope.ownerDocument.defaultView;
-  return typeof view?.matchMedia === "function" && view.matchMedia("(prefers-reduced-motion: reduce)").matches;
+function getImageStatus(url) {
+  return cache.get(url)?.status;
 }
-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();
-  }
+
+// 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 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 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 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 applyAffine(m, x, y) {
+  return [m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]];
 }
-function markStrokeWidth(theme, literal, role, fallback = "normal") {
-  return literal ?? theme.strokes[role ?? fallback];
+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 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 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 labelText(theme, text, textCase = "theme") {
-  return theme.label.uppercase && textCase === "theme" ? text.toUpperCase() : text;
+function skinVertices(mesh, bindWorld, curWorld) {
+  const skinMats = /* @__PURE__ */ new Map();
+  const skinMat = (bone) => {
+    let m = skinMats.get(bone);
+    if (!m) {
+      m = composeAffine(curWorld[bone] ?? IDENTITY, invertAffine(bindWorld[bone] ?? IDENTITY));
+      skinMats.set(bone, m);
+    }
+    return m;
+  };
+  return mesh.vertices.map((v) => {
+    if (v.weights.length === 0) return [v.x, v.y];
+    let x = 0;
+    let y = 0;
+    for (const { bone, w } of v.weights) {
+      const [bx, by] = applyAffine(skinMat(bone), v.x, v.y);
+      x += w * bx;
+      y += w * by;
+    }
+    return [x, y];
+  });
 }
-function 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 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 outlineStroke(stroke, fill, style, fillTone) {
-  return outlineCarriesFill(fill, style, fillTone) && fill !== void 0 ? fill : stroke;
+var meshCache = /* @__PURE__ */ new Map();
+function isRigBundle(json) {
+  return json.mesh !== void 0 || json.bones !== void 0;
 }
-function outlineCarriesFill(fill, style, fillTone) {
-  return style === "outline" && fill !== void 0 && fillTone !== "fill";
+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 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 skinMeshFailed(url) {
+  return meshCache.get(url) === null;
 }
-function markDash(theme, dash) {
-  if (dash === "dashed") return theme.dash;
-  if (dash === "dotted") return theme.dot;
-  return [];
+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 };
 }
-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;
+
+// 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 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));
+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;
     }
   }
-  if (closed) ctx.closePath();
+  return best;
 }
-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) });
+function resolveSkinPose(node, clip) {
+  const effectiveClip = clip ?? node.clip;
+  if (effectiveClip && node.frame !== void 0 && effectiveClip.frames.length > 0) {
+    return effectiveClip.frames[node.frame % effectiveClip.frames.length];
   }
-  return out;
+  return node.pose ?? {};
 }
-function fillMark(ctx, theme, color, style = theme.fillStyle) {
-  if (style === "outline") return;
-  ctx.save();
-  ctx.shadowBlur = 0;
-  ctx.shadowColor = "transparent";
-  if (theme.shadow) {
-    ctx.shadowColor = theme.shadow.color;
-    ctx.shadowOffsetX = theme.shadow.offsetX;
-    ctx.shadowOffsetY = theme.shadow.offsetY;
-    ctx.shadowBlur = theme.shadow.blur;
-  }
-  if (style === "hatch") {
-    ctx.clip();
-    const span = ctx.canvas.width + ctx.canvas.height;
-    ctx.strokeStyle = color;
-    ctx.lineWidth = theme.strokes.thin;
-    ctx.setLineDash([]);
-    ctx.beginPath();
-    for (let d = -span; d < span; d += 6) {
-      ctx.moveTo(d, 0);
-      ctx.lineTo(d + span, span);
-    }
-    ctx.stroke();
-  } else {
-    ctx.globalAlpha *= style === "tint" ? theme.fillOpacity : 1;
-    ctx.fillStyle = color;
-    ctx.fill();
-  }
-  ctx.restore();
+function 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 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();
-      }
+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 "dot": {
-      ctx.beginPath();
-      ctx.arc(x2, y2, Math.max(2.5, width * 1.5), 0, Math.PI * 2);
-      ctx.fill();
-      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();
   }
-  ctx.restore();
+  painter.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;
+var paintSkinnedMesh = (painter, node, dctx) => {
+  if (!isValidScenePos(node.position)) return;
+  const rig = resolveRig(node, dctx);
+  if (!rig) {
+    if (node.meshUrl && skinMeshFailed(node.meshUrl)) warnMissingOnce("mesh-failed", node);
+    else if (!node.mesh && !node.meshUrl) warnMissingOnce("mesh-missing", node);
+    return;
+  }
+  const tex = node.weightsOverlay ? null : painter.resolveTexture(node.asset.url);
+  if (!node.weightsOverlay && !tex) {
+    if (getImageStatus(node.asset.url) === "failed") warnMissingOnce("texture-failed", node);
+    return;
+  }
+  if (node.ghost && rig.clip && rig.clip.frames.length > 0) {
+    paintMeshPass(painter, node, rig.bones, rig.mesh, tex, dctx, rig.clip.frames[node.ghost.frame % rig.clip.frames.length], node.ghost.opacity);
+  }
+  paintMeshPass(painter, node, rig.bones, rig.mesh, tex, dctx, resolveSkinPose(node, rig.clip), node.opacity ?? 1);
+};
+function DrawSkinnedMesh(props) {
+  const register = useContext(DrawableRegistryContext);
+  if (register) register({ ...props, type: "draw-skinned-mesh" });
+  return null;
 }
-
-// lib/drawable/contract.ts
-function isValidScenePos(pos) {
-  return Number.isFinite(pos?.x) && Number.isFinite(pos?.y);
+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 spriteAssetState(node) {
-  if (!isValidScenePos(node.position)) return "invalid-position";
-  return typeof node.asset?.url === "string" && node.asset.url.length > 0 ? "ready" : "asset-unset";
+function clampSegments(segments) {
+  const s = segments ?? MESH_SEGMENTS_DEFAULT;
+  return Math.min(64, Math.max(3, Math.round(s)));
 }
-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 isAnimatedMesh(node) {
+  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
 }
-var DrawableRegistryContext = createContext(null);
-var NUMERIC_TRACKS = [
+var lerp2 = (a, b, k) => a + (b - a) * k;
+var NUMERIC_TRACKS2 = [
   "offsetX",
   "offsetY",
-  "rotate",
+  "offsetZ",
+  "rotateX",
+  "rotateY",
+  "rotateZ",
+  "scale",
   "opacity",
-  "radiusX",
-  "radiusY",
-  "width",
-  "height",
-  "strokeWidth",
-  "strokeDashOffset",
-  "blur"
+  "emissiveIntensity"
 ];
-function isAnimatedShape(node) {
-  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
-}
-var lerp = (a, b, k) => a + (b - a) * k;
-function applyShapeAnimation(node, timeMs) {
+function applyMeshAnimation(node, timeMs) {
   const anim = node.animation;
-  if (!anim || !(anim.durationMs > 0) || anim.keyframes.length === 0) return node;
+  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 out = { ...node };
   const trackValue = (key) => {
     const defined = frames.filter((f) => f[key] !== void 0);
     if (defined.length === 0) return void 0;
@@ -1569,736 +1901,704 @@ function applyShapeAnimation(node, timeMs) {
     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);
+    if (typeof a === "number" && typeof b === "number") return lerp2(a, b, k);
     return a;
   };
-  for (const key of NUMERIC_TRACKS) {
+  const num = {};
+  for (const key of NUMERIC_TRACKS2) {
     const v = trackValue(key);
-    if (v !== void 0) out[key] = v;
+    if (v !== void 0) num[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 {
+    offset: [num.offsetX ?? 0, num.offsetY ?? 0, num.offsetZ ?? 0],
+    rotate: [num.rotateX ?? 0, num.rotateY ?? 0, num.rotateZ ?? 0],
+    scale: num.scale ?? 1,
+    opacity: num.opacity,
+    emissiveIntensity: num.emissiveIntensity,
+    color: trackValue("color"),
+    emissive: trackValue("emissive")
+  };
+}
+function DrawMesh(props) {
+  const register = useContext(DrawableRegistryContext);
+  if (register) register({ ...props, type: "draw-mesh" });
+  return null;
+}
+
+// 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
+  };
+}
+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);
   }
-  return out;
+  h ^= h >>> 13;
+  h = Math.imul(h, 1274126177);
+  h ^= h >>> 16;
+  return (h >>> 0) / 4294967296;
 }
-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
-    };
+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
+  }));
+}
+var CONFETTI_BURST_KEYFRAMES = `
+@keyframes confetti-burst {
+  0% {
+    opacity: 1;
+    transform: translate(0, 0) rotate(0deg) scale(1);
   }
-  if (g.kind === "conic") {
-    if (!g.center) return void 0;
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translate(var(--confetti-tx), var(--confetti-ty)) rotate(var(--confetti-rotate)) scale(0.5);
+  }
+}
+`;
+
+// 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 {
-      kind: "conic",
-      cx: ox + g.center.x * scale,
-      cy: oy + g.center.y * scale,
-      angle: g.angle ?? 0,
-      stops: g.stops
+      x: base2.x + (view.vx ?? 0) * ageSec,
+      y: base2.y + (view.vz ?? 0) * ageSec + fall
     };
   }
-  if (!g.center || g.radius === void 0) return void 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 {
-    kind: "radial",
-    cx: ox + g.center.x * scale,
-    cy: oy + g.center.y * scale,
-    r: g.radius * scale,
-    stops: g.stops
+    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 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 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 } } : {}
+  };
 }
-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;
+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 "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 "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 "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 "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 } } : {}
+        };
+      });
     }
-    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;
+    default: {
+      const count = view.count ?? 6;
+      return Array.from({ length: count }, (_, i) => sparkShape(view, pos, i, fade, progress));
     }
   }
-  painter.restore();
-};
-function DrawShape(props) {
-  const register = useContext(DrawableRegistryContext);
-  if (register) {
-    const { opacity, ...rest } = props;
-    const node = {
-      ...rest,
-      type: "draw-shape",
-      ...opacity !== void 0 && opacity > 0 ? { opacity } : {}
-    };
-    register(node);
-  }
-  return null;
-}
-function isAnimatedGroup(node) {
-  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
-}
-function DrawGroup(props) {
-  const register = useContext(DrawableRegistryContext);
-  if (register) register({ ...props, type: "draw-group" });
-  return null;
-}
-
-// lib/imageCache.ts
-var RETRY_AFTER_MS = 5e3;
-var cache = /* @__PURE__ */ new Map();
-function startLoad(url, onReady, existing) {
-  const img = new Image();
-  img.crossOrigin = "anonymous";
-  const entry = existing ?? { img, status: "pending" };
-  entry.img = img;
-  if (onReady) entry.onReady = onReady;
-  img.onload = () => {
-    entry.status = "loaded";
-    updateAssetStatus(url, "loaded");
-    entry.onReady?.();
-  };
-  img.onerror = () => {
-    entry.status = "failed";
-    entry.failedAt = Date.now();
-    updateAssetStatus(url, "failed");
-    entry.onReady?.();
-  };
-  img.src = url;
-  return entry;
 }
-function getOrLoadImage(url, onReady) {
-  if (!url || typeof window === "undefined") return null;
-  const existing = cache.get(url);
-  if (existing) {
-    if (existing.status === "loaded") return existing.img;
-    if (existing.status === "pending" && onReady) existing.onReady = onReady;
-    if (existing.status === "failed" && Date.now() - (existing.failedAt ?? 0) >= RETRY_AFTER_MS) {
-      existing.failedAt = Date.now();
-      startLoad(url, onReady, existing);
-    }
-    return null;
+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));
   }
-  const entry = startLoad(url, onReady);
-  cache.set(url, entry);
-  updateAssetStatus(url, "pending");
-  return null;
-}
-function getImageStatus(url) {
-  return cache.get(url)?.status;
-}
-
-// lib/skinning.ts
-var IDENTITY = [1, 0, 0, 1, 0, 0];
-function composeAffine(a, b) {
-  return [
-    a[0] * b[0] + a[2] * b[1],
-    a[1] * b[0] + a[3] * b[1],
-    a[0] * b[2] + a[2] * b[3],
-    a[1] * b[2] + a[3] * b[3],
-    a[0] * b[4] + a[2] * b[5] + a[4],
-    a[1] * b[4] + a[3] * b[5] + a[5]
-  ];
-}
-function invertAffine(m) {
-  const det = m[0] * m[3] - m[1] * m[2];
-  if (!Number.isFinite(det) || Math.abs(det) < 1e-12) return IDENTITY;
-  const inv = 1 / det;
-  return [
-    m[3] * inv,
-    -m[1] * inv,
-    -m[2] * inv,
-    m[0] * inv,
-    (m[2] * m[5] - m[3] * m[4]) * inv,
-    (m[1] * m[4] - m[0] * m[5]) * inv
-  ];
-}
-function applyAffine(m, x, y) {
-  return [m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]];
-}
-function rotationAbout(pivot, degrees) {
-  const r = degrees * Math.PI / 180;
-  const cos = Math.cos(r);
-  const sin = Math.sin(r);
-  const [px, py] = pivot;
-  return [cos, sin, -sin, cos, px - cos * px + sin * py, py - sin * px - cos * py];
-}
-function computeWorldMatrices(bones, pose) {
-  const indexByName = /* @__PURE__ */ new Map();
-  bones.forEach((b, i) => indexByName.set(b.name, i));
-  const world = new Array(bones.length);
-  const visiting = /* @__PURE__ */ new Set();
-  const resolve = (i) => {
-    const cached = world[i];
-    if (cached) return cached;
-    if (visiting.has(i)) return IDENTITY;
-    visiting.add(i);
-    const b = bones[i];
-    const parentIndex = b.parent === null ? void 0 : indexByName.get(b.parent);
-    const parentWorld = parentIndex === void 0 ? IDENTITY : resolve(parentIndex);
-    const local = rotationAbout(b.pivot, pose[b.name] ?? 0);
-    const m = composeAffine(parentWorld, local);
-    visiting.delete(i);
-    world[i] = m;
-    return m;
-  };
-  return bones.map((_, i) => resolve(i));
+  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 skinVertices(mesh, bindWorld, curWorld) {
-  const skinMats = /* @__PURE__ */ new Map();
-  const skinMat = (bone) => {
-    let m = skinMats.get(bone);
-    if (!m) {
-      m = composeAffine(curWorld[bone] ?? IDENTITY, invertAffine(bindWorld[bone] ?? IDENTITY));
-      skinMats.set(bone, m);
-    }
-    return m;
-  };
-  return mesh.vertices.map((v) => {
-    if (v.weights.length === 0) return [v.x, v.y];
-    let x = 0;
-    let y = 0;
-    for (const { bone, w } of v.weights) {
-      const [bx, by] = applyAffine(skinMat(bone), v.x, v.y);
-      x += w * bx;
-      y += w * by;
-    }
-    return [x, y];
-  });
+function 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
@@ -2499,4 +2799,4 @@ function rotatePoint(p, center, radians) {
   return { x: center.x + dx * cos - dy * sin, y: center.y + dx * sin + dy * cos };
 }
 
-export { AVL_FONT, AVL_INK, AVL_STROKE, Box, CONFETTI_BURST_KEYFRAMES, CONNECTION_COLORS, DrawFxLayer, DrawGroup, DrawMesh, DrawShape, DrawSkinnedMesh, DrawableRegistryContext, EFFECT_CATEGORY_COLORS, HStack, OPERATOR_CATEGORY_COLORS, SPRITE_FALLBACK_FILL, SPRITE_FALLBACK_STROKE, STATE_COLORS, STRETCHED_ABOVE, STRETCHED_CONTROL, Stack, THEME_SERIES, VStack, applyLineCharacter, applyMeshAnimation, applySceneMaterials, applyShapeAnimation, arcPoints, asEffectOperator, atlasFailed, atlasUrlOf, avlBlend, avlSeries, avlTint, blit, buildHitIndex, clampSegments, collectDrawnItems, createConfettiParticles, drawMarker, effectCategoryOf, effectZoneOf, expandFxLayer, fillLabel, fillMark, fxHash01, getAtlas, getImageStatus, getOrLoadImage, getStateRole, hitTestSprites, isAnimatedGroup, isAnimatedMesh, isAnimatedShape, isAtlasAsset, isSpriteSheetAtlas, isValidScenePos, labelFont, labelText, markColor, markDash, markStrokeWidth, outlineCarriesFill, outlineStroke, paintShape, paintSkinnedMesh, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, polyhedronBounds, pressableProps, resolveAssetSource, resolveDrawableColors, resolveThemeColor, rowOpenControlProps, spriteAssetState, spriteRect, subRectFor, tracePolyline, traitEventWires, traitLevelFromTrait, traitTransitionRenderUi, useCanvasTheme, withPreviewPosition, withSeries };
+export { AVL_FONT, AVL_INK, AVL_STROKE, Box, CONFETTI_BURST_KEYFRAMES, CONNECTION_COLORS, DrawFxLayer, DrawGroup, DrawMesh, DrawShape, DrawSkinnedMesh, DrawableRegistryContext, EFFECT_CATEGORY_COLORS, HStack, OPERATOR_CATEGORY_COLORS, SPRITE_FALLBACK_FILL, SPRITE_FALLBACK_STROKE, STATE_COLORS, STRETCHED_ABOVE, STRETCHED_CONTROL, Stack, THEME_SERIES, VStack, applyLineCharacter, applyMeshAnimation, applySceneMaterials, applyShapeAnimation, arcPoints, asEffectOperator, atlasFailed, atlasUrlOf, avlBlend, avlSeries, avlTint, blit, buildHitIndex, clampSegments, collectDrawnItems, createConfettiParticles, drawMarker, effectCategoryOf, effectZoneOf, expandFxLayer, fillLabel, fillMark, fxHash01, getAtlas, getImageStatus, getOrLoadImage, getStateRole, hitTestSprites, isAnimatedGroup, isAnimatedMesh, isAnimatedShape, isAtlasAsset, isSpriteSheetAtlas, isValidScenePos, labelFont, labelText, layoutScale, markColor, markDash, markStrokeWidth, motionTiming, outlineCarriesFill, outlineStroke, paintShape, paintSkinnedMesh, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, polyhedronBounds, pressableProps, resolveAssetSource, resolveDrawableColors, resolveThemeColor, rowOpenControlProps, spriteAssetState, spriteRect, subRectFor, tracePolyline, traitEventWires, traitLevelFromTrait, traitTransitionRenderUi, useCanvasTheme, withPreviewPosition, withSeries };