@almadar/ui 2.9.0 → 2.9.1

package/dist/{chunk-NES4SBB7.js → chunk-P6NZVIE5.js}

@@ -1,7 +1,7 @@
 import { useTheme, useUISlots } from './chunk-DKQN5FVU.js';
 import { useTranslate, useInfiniteScroll, useQuerySingleton, useLongPress, useSwipeGesture, useDragReorder, usePullToRefresh } from './chunk-WGJIL4YR.js';
 import { useEventBus } from './chunk-YXZM3WCF.js';
-import { cn, debugGroup, debug, debugGroupEnd, updateAssetStatus, bindCanvasCapture, getNestedValue, isDebugEnabled } from './chunk-A5J5CNCU.js';
+import { cn, debugGroup, debug, debugGroupEnd, updateAssetStatus, bindCanvasCapture, getNestedValue, isDebugEnabled } from './chunk-6D5QMEUS.js';
 import { isPortalSlot } from './chunk-K2D5D3WK.js';
 import { __publicField } from './chunk-PKBMQBKP.js';
 import * as LucideIcons from 'lucide-react';
@@ -20,6 +20,7 @@ import dark from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus';
 import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
+import { getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
 
 var iconAliases = {
   "close": LucideIcons.X,
@@ -2638,30 +2639,30 @@ var ConfettiEffect = ({
       ),
       "aria-hidden": "true",
       children: [
-        particles.map((p) => {
-          const rad = p.angle * Math.PI / 180;
-          const tx = Math.cos(rad) * p.distance;
-          const ty = Math.sin(rad) * p.distance - 20;
+        particles.map((p2) => {
+          const rad = p2.angle * Math.PI / 180;
+          const tx = Math.cos(rad) * p2.distance;
+          const ty = Math.sin(rad) * p2.distance - 20;
           return /* @__PURE__ */ jsx(
             Box,
             {
               className: "absolute rounded-sm",
               style: {
-                left: `${p.left}%`,
+                left: `${p2.left}%`,
                 top: "50%",
-                width: p.size,
-                height: p.size,
-                backgroundColor: p.color,
-                animation: `confetti-burst ${duration - p.delay}ms ease-out ${p.delay}ms forwards`,
+                width: p2.size,
+                height: p2.size,
+                backgroundColor: p2.color,
+                animation: `confetti-burst ${duration - p2.delay}ms ease-out ${p2.delay}ms forwards`,
                 opacity: 0,
                 // Use CSS custom properties for the animation endpoint
                 // @ts-expect-error -- CSS custom properties are not typed in CSSProperties
                 "--confetti-tx": `${tx}px`,
                 "--confetti-ty": `${ty}px`,
-                "--confetti-rotate": `${p.rotation}deg`
+                "--confetti-rotate": `${p2.rotation}deg`
               }
             },
-            p.id
+            p2.id
           );
         }),
         /* @__PURE__ */ jsx("style", { children: `
@@ -7013,7 +7014,7 @@ var WizardProgress = ({
               )
             }
           )
-        ] }, step.id);
+        ] }, step.id || `step-${index}`);
       }) })
     }
   );
@@ -8084,11 +8085,13 @@ var LineChart = ({
   className
 }) => {
   const gradientId = useId();
+  const safeData = data ?? [];
   const sortedData = useMemo(() => {
-    return [...data].sort(
+    if (safeData.length === 0) return [];
+    return [...safeData].sort(
       (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
     );
-  }, [data]);
+  }, [safeData]);
   const points = useMemo(() => {
     if (sortedData.length === 0) return [];
     const values = sortedData.map((d) => d.value);
@@ -8107,7 +8110,7 @@ var LineChart = ({
   }, [sortedData, width, height]);
   const linePath = useMemo(() => {
     if (points.length === 0) return "";
-    return points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
+    return points.map((p2, i) => `${i === 0 ? "M" : "L"} ${p2.x} ${p2.y}`).join(" ");
   }, [points]);
   const areaPath = useMemo(() => {
     if (points.length === 0 || !showArea) return "";
@@ -8116,7 +8119,7 @@ var LineChart = ({
     const last = points[points.length - 1];
     return `${linePath} L ${last.x} ${bottom} L ${first.x} ${bottom} Z`;
   }, [linePath, points, height, showArea]);
-  if (data.length === 0) {
+  if (safeData.length === 0) {
     return /* @__PURE__ */ jsx(Box, { className: cn("flex items-center justify-center text-[var(--color-muted-foreground)]", className), style: { width, height }, children: "No data" });
   }
   return /* @__PURE__ */ jsx(Box, { className: cn(className), children: /* @__PURE__ */ jsxs(
@@ -10308,7 +10311,7 @@ function IsometricCanvas({
   resolveUnitFrame,
   effectSpriteUrls = [],
   onDrawEffects,
-  hasActiveEffects = false,
+  hasActiveEffects: hasActiveEffects2 = false,
   // Tuning
   diamondTopY: diamondTopYProp,
   // Remote asset loading
@@ -10365,10 +10368,10 @@ function IsometricCanvas({
     return (gridHeight - 1) * (scaledTileWidth / 2);
   }, [gridHeight, scaledTileWidth]);
   const validMoveSet = useMemo(() => {
-    return new Set(validMoves.map((p) => `${p.x},${p.y}`));
+    return new Set(validMoves.map((p2) => `${p2.x},${p2.y}`));
   }, [validMoves]);
   const attackTargetSet = useMemo(() => {
-    return new Set(attackTargets.map((p) => `${p.x},${p.y}`));
+    return new Set(attackTargets.map((p2) => `${p2.x},${p2.y}`));
   }, [attackTargets]);
   const resolveManifestUrl = useCallback((relativePath) => {
     if (!relativePath) return void 0;
@@ -10461,10 +10464,10 @@ function IsometricCanvas({
     miniCanvas.height = mH;
     mCtx.clearRect(0, 0, mW, mH);
     const allScreenPos = sortedTiles.map((t2) => isoToScreen(t2.x, t2.y, scale, baseOffsetX));
-    const minX = Math.min(...allScreenPos.map((p) => p.x));
-    const maxX = Math.max(...allScreenPos.map((p) => p.x + scaledTileWidth));
-    const minY = Math.min(...allScreenPos.map((p) => p.y));
-    const maxY = Math.max(...allScreenPos.map((p) => p.y + scaledTileHeight));
+    const minX = Math.min(...allScreenPos.map((p2) => p2.x));
+    const maxX = Math.max(...allScreenPos.map((p2) => p2.x + scaledTileWidth));
+    const minY = Math.min(...allScreenPos.map((p2) => p2.y));
+    const maxY = Math.max(...allScreenPos.map((p2) => p2.y + scaledTileHeight));
     const worldW = maxX - minX;
     const worldH = maxY - minY;
     const scaleM = Math.min(mW / worldW, mH / worldH) * 0.9;
@@ -10846,7 +10849,7 @@ function IsometricCanvas({
     };
   }, [selectedUnitId, units, scale, baseOffsetX, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, viewportSize, targetCameraRef]);
   useEffect(() => {
-    const hasAnimations = units.length > 0 || validMoves.length > 0 || attackTargets.length > 0 || selectedUnitId != null || targetCameraRef.current != null || hasActiveEffects;
+    const hasAnimations = units.length > 0 || validMoves.length > 0 || attackTargets.length > 0 || selectedUnitId != null || targetCameraRef.current != null || hasActiveEffects2;
     draw(animTimeRef.current);
     if (!hasAnimations) return;
     let running = true;
@@ -10862,7 +10865,7 @@ function IsometricCanvas({
       running = false;
       cancelAnimationFrame(rafIdRef.current);
     };
-  }, [draw, units.length, validMoves.length, attackTargets.length, selectedUnitId, hasActiveEffects, lerpToTarget, targetCameraRef]);
+  }, [draw, units.length, validMoves.length, attackTargets.length, selectedUnitId, hasActiveEffects2, lerpToTarget, targetCameraRef]);
   const handleMouseMoveWithCamera = useCallback((e) => {
     if (enableCamera) {
       const wasPanning = handleMouseMove(e, () => draw(animTimeRef.current));
@@ -12855,19 +12858,20 @@ var Meter = ({
     },
     [eventBus, value]
   );
+  const safeVal = value ?? 0;
   const percentage = useMemo(() => {
     const range = max - min;
     if (range <= 0) return 0;
-    return Math.min(Math.max((value - min) / range * 100, 0), 100);
-  }, [value, min, max]);
+    return Math.min(Math.max((safeVal - min) / range * 100, 0), 100);
+  }, [safeVal, min, max]);
   const activeColor = useMemo(
-    () => getColorForValue(value, max, thresholds),
-    [value, max, thresholds]
+    () => getColorForValue(safeVal, max, thresholds),
+    [safeVal, max, thresholds]
   );
   const displayValue = useMemo(() => {
-    const formatted = Number.isInteger(value) ? value : value.toFixed(1);
+    const formatted = Number.isInteger(safeVal) ? safeVal : safeVal.toFixed(1);
     return unit ? `${formatted}${unit}` : `${formatted}`;
-  }, [value, unit]);
+  }, [safeVal, unit]);
   if (isLoading) {
     return /* @__PURE__ */ jsx(LoadingState, { message: "Loading meter...", className });
   }
@@ -15592,6 +15596,1246 @@ function MasterDetail({
   );
 }
 MasterDetail.displayName = "MasterDetail";
+
+// components/organisms/game/types/effects.ts
+var EMPTY_EFFECT_STATE = {
+  particles: [],
+  sequences: [],
+  overlays: []
+};
+
+// components/organisms/game/utils/canvasEffects.ts
+var _offscreen = null;
+var _offCtx = null;
+function getOffscreenCtx(w, h) {
+  if (!_offscreen) {
+    if (typeof OffscreenCanvas !== "undefined") {
+      _offscreen = new OffscreenCanvas(w, h);
+    } else {
+      _offscreen = document.createElement("canvas");
+    }
+  }
+  if (_offscreen.width < w) _offscreen.width = w;
+  if (_offscreen.height < h) _offscreen.height = h;
+  if (!_offCtx) {
+    _offCtx = _offscreen.getContext("2d");
+  }
+  return _offCtx;
+}
+function drawTintedImage(ctx, img, x, y, w, h, tint, alpha, blendMode = "source-over") {
+  if (w <= 0 || h <= 0) return;
+  const oc = getOffscreenCtx(w, h);
+  oc.clearRect(0, 0, w, h);
+  oc.globalCompositeOperation = "source-over";
+  oc.drawImage(img, 0, 0, w, h);
+  oc.globalCompositeOperation = "source-atop";
+  oc.fillStyle = `rgb(${tint.r}, ${tint.g}, ${tint.b})`;
+  oc.fillRect(0, 0, w, h);
+  const prevAlpha = ctx.globalAlpha;
+  const prevBlend = ctx.globalCompositeOperation;
+  ctx.globalAlpha = alpha;
+  ctx.globalCompositeOperation = blendMode;
+  ctx.drawImage(_offscreen, 0, 0, w, h, x, y, w, h);
+  ctx.globalAlpha = prevAlpha;
+  ctx.globalCompositeOperation = prevBlend;
+}
+function randRange(min, max) {
+  return min + Math.random() * (max - min);
+}
+function spawnParticles(config, animTime) {
+  const particles = [];
+  for (let i = 0; i < config.count; i++) {
+    const angle = randRange(config.angleMin, config.angleMax);
+    const speed = randRange(config.velocityMin, config.velocityMax);
+    const spriteUrl = config.spriteUrls[Math.floor(Math.random() * config.spriteUrls.length)];
+    particles.push({
+      spriteUrl,
+      x: config.originX + randRange(-config.spread, config.spread),
+      y: config.originY + randRange(-config.spread, config.spread),
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed,
+      gravity: config.gravity,
+      rotation: Math.random() * Math.PI * 2,
+      rotationSpeed: randRange(config.rotationSpeedMin ?? -2, config.rotationSpeedMax ?? 2),
+      scale: randRange(config.scaleMin, config.scaleMax),
+      scaleSpeed: config.scaleSpeed ?? 0,
+      alpha: config.alpha ?? 1,
+      fadeRate: config.fadeRate ?? -1.5,
+      tint: { ...config.tint },
+      blendMode: config.blendMode ?? "source-over",
+      spawnTime: animTime,
+      lifetime: randRange(config.lifetimeMin, config.lifetimeMax)
+    });
+  }
+  return particles;
+}
+function spawnSequence(config, animTime) {
+  return {
+    frameUrls: config.frameUrls,
+    x: config.originX,
+    y: config.originY,
+    frameDuration: config.frameDuration,
+    startTime: animTime,
+    loop: config.loop ?? false,
+    scale: config.scale ?? 1,
+    tint: config.tint ?? null,
+    alpha: config.alpha ?? 1,
+    blendMode: config.blendMode ?? "source-over"
+  };
+}
+function spawnOverlay(config, animTime) {
+  return {
+    spriteUrl: config.spriteUrl,
+    x: config.originX,
+    y: config.originY,
+    alpha: config.alpha ?? 0.8,
+    fadeRate: config.fadeRate ?? -0.5,
+    pulseAmplitude: config.pulseAmplitude ?? 0,
+    pulseFrequency: config.pulseFrequency ?? 2,
+    scale: config.scale ?? 1,
+    blendMode: config.blendMode ?? "source-over",
+    spawnTime: animTime,
+    lifetime: config.lifetime ?? 2e3
+  };
+}
+function updateEffectState(state, animTime, deltaMs) {
+  const dt = deltaMs / 1e3;
+  const particles = state.particles.map((p2) => ({
+    ...p2,
+    x: p2.x + p2.vx * dt,
+    y: p2.y + p2.vy * dt,
+    vy: p2.vy + p2.gravity * dt,
+    rotation: p2.rotation + p2.rotationSpeed * dt,
+    scale: Math.max(0, p2.scale + p2.scaleSpeed * dt),
+    alpha: Math.max(0, p2.alpha + p2.fadeRate * dt)
+  })).filter((p2) => p2.alpha > 0.01 && animTime - p2.spawnTime < p2.lifetime);
+  const sequences = state.sequences.filter((s) => {
+    const elapsed = animTime - s.startTime;
+    const totalDuration = s.frameUrls.length * s.frameDuration;
+    return s.loop || elapsed < totalDuration;
+  });
+  const overlays = state.overlays.map((o) => ({
+    ...o,
+    alpha: Math.max(0, o.alpha + o.fadeRate * dt)
+  })).filter((o) => o.alpha > 0.01 && animTime - o.spawnTime < o.lifetime);
+  return { particles, sequences, overlays };
+}
+function drawEffectState(ctx, state, animTime, getImage) {
+  for (const o of state.overlays) {
+    const img = getImage(o.spriteUrl);
+    if (!img) continue;
+    let alpha = o.alpha;
+    if (o.pulseAmplitude > 0) {
+      const elapsed = (animTime - o.spawnTime) / 1e3;
+      alpha += Math.sin(elapsed * o.pulseFrequency * Math.PI * 2) * o.pulseAmplitude;
+      alpha = Math.max(0, Math.min(1, alpha));
+    }
+    const w = img.naturalWidth * o.scale;
+    const h = img.naturalHeight * o.scale;
+    const prevAlpha = ctx.globalAlpha;
+    const prevBlend = ctx.globalCompositeOperation;
+    ctx.globalAlpha = alpha;
+    ctx.globalCompositeOperation = o.blendMode;
+    ctx.drawImage(img, o.x - w / 2, o.y - h / 2, w, h);
+    ctx.globalAlpha = prevAlpha;
+    ctx.globalCompositeOperation = prevBlend;
+  }
+  for (const s of state.sequences) {
+    const elapsed = animTime - s.startTime;
+    let frameIndex = Math.floor(elapsed / s.frameDuration);
+    if (s.loop) {
+      frameIndex = frameIndex % s.frameUrls.length;
+    } else if (frameIndex >= s.frameUrls.length) {
+      continue;
+    }
+    const img = getImage(s.frameUrls[frameIndex]);
+    if (!img) continue;
+    const w = img.naturalWidth * s.scale;
+    const h = img.naturalHeight * s.scale;
+    if (s.tint) {
+      drawTintedImage(ctx, img, s.x - w / 2, s.y - h / 2, w, h, s.tint, s.alpha, s.blendMode);
+    } else {
+      const prevAlpha = ctx.globalAlpha;
+      const prevBlend = ctx.globalCompositeOperation;
+      ctx.globalAlpha = s.alpha;
+      ctx.globalCompositeOperation = s.blendMode;
+      ctx.drawImage(img, s.x - w / 2, s.y - h / 2, w, h);
+      ctx.globalAlpha = prevAlpha;
+      ctx.globalCompositeOperation = prevBlend;
+    }
+  }
+  for (const p2 of state.particles) {
+    const img = getImage(p2.spriteUrl);
+    if (!img) continue;
+    const w = img.naturalWidth * p2.scale;
+    const h = img.naturalHeight * p2.scale;
+    ctx.save();
+    ctx.translate(p2.x, p2.y);
+    ctx.rotate(p2.rotation);
+    drawTintedImage(ctx, img, -w / 2, -h / 2, w, h, p2.tint, p2.alpha, p2.blendMode);
+    ctx.restore();
+  }
+}
+function hasActiveEffects(state) {
+  return state.particles.length > 0 || state.sequences.length > 0 || state.overlays.length > 0;
+}
+function getAllEffectSpriteUrls(manifest) {
+  const urls = [];
+  const base = manifest.baseUrl;
+  if (manifest.particles) {
+    for (const value of Object.values(manifest.particles)) {
+      if (Array.isArray(value)) {
+        value.forEach((v) => urls.push(`${base}/${v}`));
+      } else if (typeof value === "string") {
+        urls.push(`${base}/${value}`);
+      }
+    }
+  }
+  if (manifest.animations) {
+    for (const frames of Object.values(manifest.animations)) {
+      if (Array.isArray(frames)) {
+        frames.forEach((f) => urls.push(`${base}/${f}`));
+      }
+    }
+  }
+  return urls;
+}
+
+// components/organisms/game/utils/combatPresets.ts
+var PI = Math.PI;
+function p(manifest, key) {
+  const particles = manifest.particles;
+  if (!particles) return [];
+  const val = particles[key];
+  if (Array.isArray(val)) return val.map((v) => `${manifest.baseUrl}/${v}`);
+  if (typeof val === "string") return [`${manifest.baseUrl}/${val}`];
+  return [];
+}
+function anim(manifest, key) {
+  const animations = manifest.animations;
+  if (!animations) return [];
+  const val = animations[key];
+  if (Array.isArray(val)) return val.map((v) => `${manifest.baseUrl}/${v}`);
+  return [];
+}
+function createCombatPresets(manifest) {
+  return {
+    // =====================================================================
+    // MELEE — slash (red) + dirt + scratch + flash sequence
+    // =====================================================================
+    melee: (originX, originY) => {
+      const particles = [
+        {
+          spriteUrls: p(manifest, "slash"),
+          count: 6,
+          originX,
+          originY,
+          spread: 8,
+          velocityMin: 40,
+          velocityMax: 120,
+          angleMin: -PI * 0.8,
+          angleMax: -PI * 0.2,
+          gravity: 0,
+          tint: { r: 255, g: 60, b: 40 },
+          scaleMin: 0.3,
+          scaleMax: 0.6,
+          lifetimeMin: 300,
+          lifetimeMax: 500,
+          fadeRate: -2.5
+        },
+        {
+          spriteUrls: p(manifest, "dirt"),
+          count: 4,
+          originX,
+          originY: originY + 10,
+          spread: 12,
+          velocityMin: 20,
+          velocityMax: 60,
+          angleMin: -PI * 0.9,
+          angleMax: -PI * 0.1,
+          gravity: 120,
+          tint: { r: 180, g: 140, b: 90 },
+          scaleMin: 0.15,
+          scaleMax: 0.3,
+          lifetimeMin: 400,
+          lifetimeMax: 700,
+          fadeRate: -1.8
+        },
+        {
+          spriteUrls: p(manifest, "scratch"),
+          count: 2,
+          originX,
+          originY,
+          spread: 5,
+          velocityMin: 10,
+          velocityMax: 30,
+          angleMin: -PI * 0.7,
+          angleMax: -PI * 0.3,
+          gravity: 0,
+          tint: { r: 255, g: 200, b: 150 },
+          scaleMin: 0.25,
+          scaleMax: 0.4,
+          lifetimeMin: 200,
+          lifetimeMax: 400,
+          fadeRate: -3
+        }
+      ];
+      const sequences = [];
+      const flashFrames = anim(manifest, "flash");
+      if (flashFrames.length > 0) {
+        sequences.push({
+          frameUrls: flashFrames,
+          originX,
+          originY,
+          frameDuration: 35,
+          scale: 0.4
+        });
+      }
+      return {
+        particles: particles.filter((pc) => pc.spriteUrls.length > 0),
+        sequences,
+        overlays: [],
+        screenShake: 4,
+        screenFlash: null
+      };
+    },
+    // =====================================================================
+    // RANGED — muzzle + trace + smoke + explosion sequence
+    // =====================================================================
+    ranged: (originX, originY) => {
+      const particles = [
+        {
+          spriteUrls: p(manifest, "muzzle"),
+          count: 3,
+          originX,
+          originY,
+          spread: 4,
+          velocityMin: 60,
+          velocityMax: 150,
+          angleMin: -PI * 0.6,
+          angleMax: -PI * 0.4,
+          gravity: 0,
+          tint: { r: 255, g: 220, b: 100 },
+          scaleMin: 0.2,
+          scaleMax: 0.4,
+          lifetimeMin: 200,
+          lifetimeMax: 400,
+          fadeRate: -3
+        },
+        {
+          spriteUrls: p(manifest, "trace"),
+          count: 5,
+          originX,
+          originY,
+          spread: 3,
+          velocityMin: 100,
+          velocityMax: 200,
+          angleMin: -PI * 0.55,
+          angleMax: -PI * 0.45,
+          gravity: 0,
+          tint: { r: 255, g: 200, b: 80 },
+          scaleMin: 0.15,
+          scaleMax: 0.3,
+          lifetimeMin: 150,
+          lifetimeMax: 300,
+          fadeRate: -4
+        },
+        {
+          spriteUrls: p(manifest, "smoke").slice(0, 3),
+          count: 3,
+          originX,
+          originY: originY + 5,
+          spread: 6,
+          velocityMin: 10,
+          velocityMax: 30,
+          angleMin: -PI * 0.8,
+          angleMax: -PI * 0.2,
+          gravity: -20,
+          tint: { r: 200, g: 200, b: 200 },
+          scaleMin: 0.2,
+          scaleMax: 0.35,
+          lifetimeMin: 500,
+          lifetimeMax: 800,
+          fadeRate: -1.5
+        }
+      ];
+      const sequences = [];
+      const explosionFrames = anim(manifest, "smokeExplosion");
+      if (explosionFrames.length > 0) {
+        sequences.push({
+          frameUrls: explosionFrames,
+          originX,
+          originY,
+          frameDuration: 50,
+          scale: 0.35
+        });
+      }
+      return {
+        particles: particles.filter((pc) => pc.spriteUrls.length > 0),
+        sequences,
+        overlays: [],
+        screenShake: 2,
+        screenFlash: null
+      };
+    },
+    // =====================================================================
+    // MAGIC — twirl (purple) + spark (purple) + star
+    // =====================================================================
+    magic: (originX, originY) => {
+      const particles = [
+        {
+          spriteUrls: p(manifest, "twirl"),
+          count: 5,
+          originX,
+          originY,
+          spread: 15,
+          velocityMin: 20,
+          velocityMax: 80,
+          angleMin: 0,
+          angleMax: PI * 2,
+          gravity: -30,
+          tint: { r: 180, g: 80, b: 255 },
+          scaleMin: 0.2,
+          scaleMax: 0.5,
+          lifetimeMin: 500,
+          lifetimeMax: 900,
+          fadeRate: -1.2,
+          blendMode: "lighter",
+          rotationSpeedMin: -4,
+          rotationSpeedMax: 4
+        },
+        {
+          spriteUrls: p(manifest, "spark"),
+          count: 8,
+          originX,
+          originY,
+          spread: 20,
+          velocityMin: 30,
+          velocityMax: 100,
+          angleMin: 0,
+          angleMax: PI * 2,
+          gravity: -15,
+          tint: { r: 200, g: 120, b: 255 },
+          scaleMin: 0.1,
+          scaleMax: 0.25,
+          lifetimeMin: 300,
+          lifetimeMax: 600,
+          fadeRate: -2,
+          blendMode: "lighter"
+        },
+        {
+          spriteUrls: p(manifest, "star"),
+          count: 4,
+          originX,
+          originY,
+          spread: 10,
+          velocityMin: 15,
+          velocityMax: 50,
+          angleMin: -PI,
+          angleMax: 0,
+          gravity: -40,
+          tint: { r: 220, g: 180, b: 255 },
+          scaleMin: 0.15,
+          scaleMax: 0.3,
+          lifetimeMin: 600,
+          lifetimeMax: 1e3,
+          fadeRate: -1,
+          blendMode: "lighter"
+        }
+      ];
+      const overlays = [];
+      const circleUrls = p(manifest, "circle");
+      if (circleUrls.length > 0) {
+        overlays.push({
+          spriteUrl: circleUrls[0],
+          originX,
+          originY,
+          alpha: 0.5,
+          fadeRate: -0.6,
+          pulseAmplitude: 0.2,
+          pulseFrequency: 3,
+          scale: 0.5,
+          blendMode: "lighter",
+          lifetime: 1200
+        });
+      }
+      return {
+        particles: particles.filter((pc) => pc.spriteUrls.length > 0),
+        sequences: [],
+        overlays,
+        screenShake: 0,
+        screenFlash: null
+      };
+    },
+    // =====================================================================
+    // HEAL — circle (green) + star (green) + light (green, pulse)
+    // =====================================================================
+    heal: (originX, originY) => {
+      const particles = [
+        {
+          spriteUrls: p(manifest, "circle"),
+          count: 6,
+          originX,
+          originY,
+          spread: 15,
+          velocityMin: 10,
+          velocityMax: 40,
+          angleMin: -PI,
+          angleMax: -PI * 0.3,
+          gravity: -50,
+          tint: { r: 80, g: 255, b: 120 },
+          scaleMin: 0.15,
+          scaleMax: 0.35,
+          lifetimeMin: 600,
+          lifetimeMax: 1e3,
+          fadeRate: -0.8,
+          blendMode: "lighter"
+        },
+        {
+          spriteUrls: p(manifest, "star"),
+          count: 5,
+          originX,
+          originY,
+          spread: 12,
+          velocityMin: 15,
+          velocityMax: 50,
+          angleMin: -PI * 0.9,
+          angleMax: -PI * 0.1,
+          gravity: -60,
+          tint: { r: 100, g: 255, b: 140 },
+          scaleMin: 0.1,
+          scaleMax: 0.2,
+          lifetimeMin: 500,
+          lifetimeMax: 800,
+          fadeRate: -1.2,
+          blendMode: "lighter"
+        }
+      ];
+      const overlays = [];
+      const lightUrls = p(manifest, "light");
+      if (lightUrls.length > 0) {
+        overlays.push({
+          spriteUrl: lightUrls[0],
+          originX,
+          originY,
+          alpha: 0.6,
+          fadeRate: -0.4,
+          pulseAmplitude: 0.25,
+          pulseFrequency: 2.5,
+          scale: 0.6,
+          blendMode: "lighter",
+          lifetime: 1500
+        });
+      }
+      return {
+        particles: particles.filter((pc) => pc.spriteUrls.length > 0),
+        sequences: [],
+        overlays,
+        screenShake: 0,
+        screenFlash: null
+      };
+    },
+    // =====================================================================
+    // DEFEND / SHIELD — star (blue) + circle (blue, pulse)
+    // =====================================================================
+    defend: (originX, originY) => {
+      const particles = [
+        {
+          spriteUrls: p(manifest, "star"),
+          count: 8,
+          originX,
+          originY,
+          spread: 18,
+          velocityMin: 10,
+          velocityMax: 35,
+          angleMin: 0,
+          angleMax: PI * 2,
+          gravity: 0,
+          tint: { r: 80, g: 160, b: 255 },
+          scaleMin: 0.12,
+          scaleMax: 0.25,
+          lifetimeMin: 600,
+          lifetimeMax: 1e3,
+          fadeRate: -0.8,
+          blendMode: "lighter",
+          rotationSpeedMin: -1,
+          rotationSpeedMax: 1
+        }
+      ];
+      const overlays = [];
+      const circleUrls = p(manifest, "circle");
+      if (circleUrls.length > 0) {
+        overlays.push({
+          spriteUrl: circleUrls[0],
+          originX,
+          originY,
+          alpha: 0.6,
+          fadeRate: -0.3,
+          pulseAmplitude: 0.2,
+          pulseFrequency: 2,
+          scale: 0.6,
+          blendMode: "lighter",
+          lifetime: 1500
+        });
+      }
+      return {
+        particles: particles.filter((pc) => pc.spriteUrls.length > 0),
+        sequences: [],
+        overlays,
+        screenShake: 0,
+        screenFlash: null
+      };
+    },
+    // shield aliases to defend
+    shield: (originX, originY) => {
+      const particles = [
+        {
+          spriteUrls: p(manifest, "star"),
+          count: 10,
+          originX,
+          originY,
+          spread: 20,
+          velocityMin: 8,
+          velocityMax: 30,
+          angleMin: 0,
+          angleMax: PI * 2,
+          gravity: 0,
+          tint: { r: 60, g: 180, b: 255 },
+          scaleMin: 0.1,
+          scaleMax: 0.22,
+          lifetimeMin: 700,
+          lifetimeMax: 1200,
+          fadeRate: -0.7,
+          blendMode: "lighter",
+          rotationSpeedMin: -0.8,
+          rotationSpeedMax: 0.8
+        }
+      ];
+      const overlays = [];
+      const circleUrls = p(manifest, "circle");
+      if (circleUrls.length > 0) {
+        overlays.push({
+          spriteUrl: circleUrls[0],
+          originX,
+          originY,
+          alpha: 0.7,
+          fadeRate: -0.25,
+          pulseAmplitude: 0.25,
+          pulseFrequency: 1.8,
+          scale: 0.7,
+          blendMode: "lighter",
+          lifetime: 1800
+        });
+      }
+      return {
+        particles: particles.filter((pc) => pc.spriteUrls.length > 0),
+        sequences: [],
+        overlays,
+        screenShake: 0,
+        screenFlash: null
+      };
+    },
+    // =====================================================================
+    // HIT — spark (orange) + flash (5 frames) + screen shake/flash
+    // =====================================================================
+    hit: (originX, originY) => {
+      const particles = [
+        {
+          spriteUrls: p(manifest, "spark"),
+          count: 10,
+          originX,
+          originY,
+          spread: 8,
+          velocityMin: 50,
+          velocityMax: 150,
+          angleMin: 0,
+          angleMax: PI * 2,
+          gravity: 80,
+          tint: { r: 255, g: 180, b: 50 },
+          scaleMin: 0.08,
+          scaleMax: 0.2,
+          lifetimeMin: 200,
+          lifetimeMax: 500,
+          fadeRate: -2.5
+        }
+      ];
+      const sequences = [];
+      const flashFrames = anim(manifest, "flash");
+      if (flashFrames.length > 0) {
+        sequences.push({
+          frameUrls: flashFrames.slice(0, 5),
+          originX,
+          originY,
+          frameDuration: 40,
+          scale: 0.3
+        });
+      }
+      return {
+        particles: particles.filter((pc) => pc.spriteUrls.length > 0),
+        sequences,
+        overlays: [],
+        screenShake: 3,
+        screenFlash: { r: 255, g: 50, b: 50, duration: 150 }
+      };
+    },
+    // critical aliases to hit with bigger shake
+    critical: (originX, originY) => {
+      const particles = [
+        {
+          spriteUrls: p(manifest, "flame"),
+          count: 8,
+          originX,
+          originY,
+          spread: 12,
+          velocityMin: 60,
+          velocityMax: 180,
+          angleMin: 0,
+          angleMax: PI * 2,
+          gravity: 60,
+          tint: { r: 255, g: 120, b: 30 },
+          scaleMin: 0.15,
+          scaleMax: 0.4,
+          lifetimeMin: 300,
+          lifetimeMax: 600,
+          fadeRate: -2
+        },
+        {
+          spriteUrls: p(manifest, "spark"),
+          count: 12,
+          originX,
+          originY,
+          spread: 10,
+          velocityMin: 80,
+          velocityMax: 200,
+          angleMin: 0,
+          angleMax: PI * 2,
+          gravity: 100,
+          tint: { r: 255, g: 200, b: 60 },
+          scaleMin: 0.06,
+          scaleMax: 0.18,
+          lifetimeMin: 200,
+          lifetimeMax: 400,
+          fadeRate: -3
+        }
+      ];
+      const sequences = [];
+      const flashFrames = anim(manifest, "flash");
+      if (flashFrames.length > 0) {
+        sequences.push({
+          frameUrls: flashFrames,
+          originX,
+          originY,
+          frameDuration: 30,
+          scale: 0.5
+        });
+      }
+      return {
+        particles: particles.filter((pc) => pc.spriteUrls.length > 0),
+        sequences,
+        overlays: [],
+        screenShake: 6,
+        screenFlash: { r: 255, g: 80, b: 0, duration: 200 }
+      };
+    },
+    // =====================================================================
+    // DEATH — dirt (gray) + explosion + black smoke + scorch (ground)
+    // =====================================================================
+    death: (originX, originY) => {
+      const particles = [
+        {
+          spriteUrls: p(manifest, "dirt"),
+          count: 8,
+          originX,
+          originY,
+          spread: 10,
+          velocityMin: 30,
+          velocityMax: 100,
+          angleMin: 0,
+          angleMax: PI * 2,
+          gravity: 100,
+          tint: { r: 140, g: 140, b: 140 },
+          scaleMin: 0.15,
+          scaleMax: 0.35,
+          lifetimeMin: 500,
+          lifetimeMax: 900,
+          fadeRate: -1.2
+        }
+      ];
+      const sequences = [];
+      const explosionFrames = anim(manifest, "explosion");
+      if (explosionFrames.length > 0) {
+        sequences.push({
+          frameUrls: explosionFrames,
+          originX,
+          originY,
+          frameDuration: 60,
+          scale: 0.5
+        });
+      }
+      const blackSmokeFrames = anim(manifest, "blackSmoke");
+      if (blackSmokeFrames.length > 0) {
+        sequences.push({
+          frameUrls: blackSmokeFrames,
+          originX,
+          originY: originY - 10,
+          frameDuration: 50,
+          scale: 0.4,
+          alpha: 0.7
+        });
+      }
+      const overlays = [];
+      const scorchUrls = p(manifest, "scorch");
+      if (scorchUrls.length > 0) {
+        overlays.push({
+          spriteUrl: scorchUrls[0],
+          originX,
+          originY: originY + 10,
+          alpha: 0.6,
+          fadeRate: -0.15,
+          scale: 0.4,
+          lifetime: 4e3
+        });
+      }
+      return {
+        particles: particles.filter((pc) => pc.spriteUrls.length > 0),
+        sequences,
+        overlays,
+        screenShake: 0,
+        screenFlash: null
+      };
+    },
+    // =====================================================================
+    // BUFF — star (gold) + symbol + flare (gold, pulse)
+    // =====================================================================
+    buff: (originX, originY) => {
+      const particles = [
+        {
+          spriteUrls: p(manifest, "star"),
+          count: 6,
+          originX,
+          originY,
+          spread: 15,
+          velocityMin: 15,
+          velocityMax: 50,
+          angleMin: -PI,
+          angleMax: 0,
+          gravity: -30,
+          tint: { r: 255, g: 215, b: 50 },
+          scaleMin: 0.12,
+          scaleMax: 0.25,
+          lifetimeMin: 600,
+          lifetimeMax: 1e3,
+          fadeRate: -0.8,
+          blendMode: "lighter"
+        },
+        {
+          spriteUrls: p(manifest, "symbol"),
+          count: 2,
+          originX,
+          originY: originY - 10,
+          spread: 8,
+          velocityMin: 5,
+          velocityMax: 20,
+          angleMin: -PI * 0.7,
+          angleMax: -PI * 0.3,
+          gravity: -20,
+          tint: { r: 255, g: 230, b: 100 },
+          scaleMin: 0.2,
+          scaleMax: 0.35,
+          lifetimeMin: 800,
+          lifetimeMax: 1200,
+          fadeRate: -0.6,
+          blendMode: "lighter"
+        }
+      ];
+      const overlays = [];
+      const flareUrls = p(manifest, "flare");
+      if (flareUrls.length > 0) {
+        overlays.push({
+          spriteUrl: flareUrls[0],
+          originX,
+          originY,
+          alpha: 0.5,
+          fadeRate: -0.3,
+          pulseAmplitude: 0.3,
+          pulseFrequency: 2,
+          scale: 0.5,
+          blendMode: "lighter",
+          lifetime: 1500
+        });
+      }
+      return {
+        particles: particles.filter((pc) => pc.spriteUrls.length > 0),
+        sequences: [],
+        overlays,
+        screenShake: 0,
+        screenFlash: null
+      };
+    },
+    // =====================================================================
+    // DEBUFF — scorch (dark) + smoke (purple tint)
+    // =====================================================================
+    debuff: (originX, originY) => {
+      const particles = [
+        {
+          spriteUrls: p(manifest, "scorch"),
+          count: 4,
+          originX,
+          originY,
+          spread: 12,
+          velocityMin: 15,
+          velocityMax: 40,
+          angleMin: -PI,
+          angleMax: 0,
+          gravity: -20,
+          tint: { r: 120, g: 40, b: 160 },
+          scaleMin: 0.15,
+          scaleMax: 0.3,
+          lifetimeMin: 500,
+          lifetimeMax: 800,
+          fadeRate: -1
+        },
+        {
+          spriteUrls: p(manifest, "smoke").slice(0, 3),
+          count: 3,
+          originX,
+          originY,
+          spread: 10,
+          velocityMin: 8,
+          velocityMax: 25,
+          angleMin: -PI * 0.8,
+          angleMax: -PI * 0.2,
+          gravity: -15,
+          tint: { r: 100, g: 50, b: 140 },
+          scaleMin: 0.2,
+          scaleMax: 0.35,
+          lifetimeMin: 600,
+          lifetimeMax: 1e3,
+          fadeRate: -0.8
+        }
+      ];
+      const overlays = [];
+      const circleUrls = p(manifest, "circle");
+      if (circleUrls.length > 0) {
+        overlays.push({
+          spriteUrl: circleUrls[0],
+          originX,
+          originY,
+          alpha: 0.4,
+          fadeRate: -0.4,
+          pulseAmplitude: 0.15,
+          pulseFrequency: 2,
+          scale: 0.45,
+          lifetime: 1200
+        });
+      }
+      return {
+        particles: particles.filter((pc) => pc.spriteUrls.length > 0),
+        sequences: [],
+        overlays,
+        screenShake: 0,
+        screenFlash: null
+      };
+    },
+    // =====================================================================
+    // AOE — explosion (large) + flame + spark (radial) + screen shake
+    // =====================================================================
+    aoe: (originX, originY) => {
+      const particles = [
+        {
+          spriteUrls: p(manifest, "flame"),
+          count: 10,
+          originX,
+          originY,
+          spread: 20,
+          velocityMin: 40,
+          velocityMax: 140,
+          angleMin: 0,
+          angleMax: PI * 2,
+          gravity: 40,
+          tint: { r: 255, g: 140, b: 30 },
+          scaleMin: 0.2,
+          scaleMax: 0.5,
+          lifetimeMin: 400,
+          lifetimeMax: 800,
+          fadeRate: -1.5
+        },
+        {
+          spriteUrls: p(manifest, "spark"),
+          count: 15,
+          originX,
+          originY,
+          spread: 15,
+          velocityMin: 60,
+          velocityMax: 200,
+          angleMin: 0,
+          angleMax: PI * 2,
+          gravity: 60,
+          tint: { r: 255, g: 180, b: 60 },
+          scaleMin: 0.06,
+          scaleMax: 0.15,
+          lifetimeMin: 200,
+          lifetimeMax: 500,
+          fadeRate: -2.5
+        }
+      ];
+      const sequences = [];
+      const explosionFrames = anim(manifest, "explosion");
+      if (explosionFrames.length > 0) {
+        sequences.push({
+          frameUrls: explosionFrames,
+          originX,
+          originY,
+          frameDuration: 50,
+          scale: 0.6
+        });
+      }
+      return {
+        particles: particles.filter((pc) => pc.spriteUrls.length > 0),
+        sequences,
+        overlays: [],
+        screenShake: 5,
+        screenFlash: { r: 255, g: 160, b: 0, duration: 180 }
+      };
+    }
+  };
+}
+var ACTION_EMOJI = {
+  melee: { emoji: "\u2694\uFE0F", color: "var(--color-error)", label: "Slash" },
+  ranged: { emoji: "\u{1F3F9}", color: "var(--color-warning)", label: "Arrow" },
+  magic: { emoji: "\u2728", color: "var(--color-primary)", label: "Spell" },
+  heal: { emoji: "\u{1F49A}", color: "var(--color-success)", label: "Heal" },
+  buff: { emoji: "\u2B06\uFE0F", color: "var(--color-info)", label: "Buff" },
+  debuff: { emoji: "\u2B07\uFE0F", color: "var(--color-warning)", label: "Debuff" },
+  shield: { emoji: "\u{1F6E1}\uFE0F", color: "var(--color-info)", label: "Shield" },
+  aoe: { emoji: "\u{1F4A5}", color: "var(--color-error)", label: "Explosion" },
+  critical: { emoji: "\u{1F525}", color: "var(--color-error)", label: "Critical" },
+  defend: { emoji: "\u{1F6E1}\uFE0F", color: "var(--color-info)", label: "Defend" },
+  hit: { emoji: "\u{1F4A5}", color: "var(--color-error)", label: "Hit" },
+  death: { emoji: "\u{1F480}", color: "var(--color-error)", label: "Death" }
+};
+function CanvasEffectEngine({
+  actionType,
+  x,
+  y,
+  duration = 2e3,
+  intensity = 1,
+  onComplete,
+  className,
+  assetManifest,
+  width = 400,
+  height = 300
+}) {
+  const canvasRef = useRef(null);
+  const stateRef = useRef({ ...EMPTY_EFFECT_STATE });
+  const lastTimeRef = useRef(0);
+  const rafRef = useRef(0);
+  const imageCacheRef = useRef(/* @__PURE__ */ new Map());
+  const [shakeOffset, setShakeOffset] = useState({ x: 0, y: 0 });
+  const [flash, setFlash] = useState(null);
+  const shakeRef = useRef({ x: 0, y: 0, intensity: 0 });
+  const presets = useMemo(() => createCombatPresets(assetManifest), [assetManifest]);
+  const spriteUrls = useMemo(() => getAllEffectSpriteUrls(assetManifest), [assetManifest]);
+  useEffect(() => {
+    const cache = imageCacheRef.current;
+    for (const url of spriteUrls) {
+      if (!cache.has(url)) {
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+        img.src = url;
+        cache.set(url, img);
+      }
+    }
+  }, [spriteUrls]);
+  const getImage = useCallback((url) => {
+    const img = imageCacheRef.current.get(url);
+    return img?.complete ? img : void 0;
+  }, []);
+  useEffect(() => {
+    const now = performance.now();
+    const effectX = x || width / 2;
+    const effectY = y || height / 2;
+    const preset = presets[actionType](effectX, effectY);
+    const state = stateRef.current;
+    for (const emitter of preset.particles) {
+      const scaledEmitter = { ...emitter, count: Math.round(emitter.count * intensity) };
+      state.particles.push(...spawnParticles(scaledEmitter, now));
+    }
+    for (const seqConfig of preset.sequences) {
+      state.sequences.push(spawnSequence(seqConfig, now));
+    }
+    for (const ovConfig of preset.overlays) {
+      state.overlays.push(spawnOverlay(ovConfig, now));
+    }
+    if (preset.screenShake > 0) {
+      shakeRef.current.intensity = preset.screenShake * intensity;
+    }
+    if (preset.screenFlash) {
+      const { r, g, b, duration: flashDur } = preset.screenFlash;
+      setFlash({ color: `rgb(${r}, ${g}, ${b})`, alpha: 0.3 });
+      setTimeout(() => setFlash(null), flashDur);
+    }
+    const timer = setTimeout(() => {
+      onComplete?.();
+    }, duration);
+    return () => clearTimeout(timer);
+  }, []);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    function loop(animTime) {
+      const delta = lastTimeRef.current > 0 ? animTime - lastTimeRef.current : 16;
+      lastTimeRef.current = animTime;
+      stateRef.current = updateEffectState(stateRef.current, animTime, delta);
+      if (shakeRef.current.intensity > 0.2) {
+        const i = shakeRef.current.intensity;
+        shakeRef.current.x = (Math.random() - 0.5) * i * 2;
+        shakeRef.current.y = (Math.random() - 0.5) * i * 2;
+        shakeRef.current.intensity *= 0.85;
+        setShakeOffset({ x: shakeRef.current.x, y: shakeRef.current.y });
+      } else if (shakeRef.current.intensity > 0) {
+        shakeRef.current = { x: 0, y: 0, intensity: 0 };
+        setShakeOffset({ x: 0, y: 0 });
+      }
+      ctx.clearRect(0, 0, width, height);
+      drawEffectState(ctx, stateRef.current, animTime, getImage);
+      if (hasActiveEffects(stateRef.current)) {
+        rafRef.current = requestAnimationFrame(loop);
+      }
+    }
+    rafRef.current = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(rafRef.current);
+  }, [width, height, getImage]);
+  const shakeStyle = shakeOffset.x !== 0 || shakeOffset.y !== 0 ? { transform: `translate(${shakeOffset.x}px, ${shakeOffset.y}px)` } : {};
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: cn("absolute inset-0 pointer-events-none z-10", className),
+      style: shakeStyle,
+      children: [
+        flash && /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: "absolute inset-0 z-20 pointer-events-none rounded-lg",
+            style: { backgroundColor: flash.color, opacity: flash.alpha }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            width,
+            height,
+            className: "absolute inset-0 w-full h-full",
+            style: { imageRendering: "pixelated" }
+          }
+        )
+      ]
+    }
+  );
+}
+function EmojiEffect({
+  actionType,
+  x,
+  y,
+  duration = 800,
+  intensity = 1,
+  onComplete,
+  className,
+  effectSpriteUrl,
+  assetBaseUrl
+}) {
+  const [visible, setVisible] = useState(true);
+  const [phase, setPhase] = useState("enter");
+  useEffect(() => {
+    const enterTimer = setTimeout(() => setPhase("active"), 100);
+    const exitTimer = setTimeout(() => setPhase("exit"), duration * 0.7);
+    const doneTimer = setTimeout(() => {
+      setVisible(false);
+      onComplete?.();
+    }, duration);
+    return () => {
+      clearTimeout(enterTimer);
+      clearTimeout(exitTimer);
+      clearTimeout(doneTimer);
+    };
+  }, [duration, onComplete]);
+  if (!visible) return null;
+  const config = ACTION_EMOJI[actionType] ?? ACTION_EMOJI.melee;
+  const scaleVal = phase === "enter" ? 0.3 : phase === "active" ? intensity : 0.5;
+  const opacity = phase === "exit" ? 0 : 1;
+  const resolvedSpriteUrl = effectSpriteUrl ? effectSpriteUrl.startsWith("http") || effectSpriteUrl.startsWith("/") ? effectSpriteUrl : assetBaseUrl ? `${assetBaseUrl.replace(/\/$/, "")}/${effectSpriteUrl}` : effectSpriteUrl : void 0;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: cn(
+        "fixed pointer-events-none z-50 flex items-center justify-center",
+        "transition-all ease-out",
+        className
+      ),
+      style: {
+        left: x,
+        top: y,
+        transform: `translate(-50%, -50%) scale(${scaleVal})`,
+        opacity,
+        transitionDuration: phase === "enter" ? "100ms" : "300ms"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: "absolute rounded-full animate-ping",
+            style: {
+              width: 48 * intensity,
+              height: 48 * intensity,
+              backgroundColor: config.color,
+              opacity: 0.25
+            }
+          }
+        ),
+        resolvedSpriteUrl ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: resolvedSpriteUrl,
+            alt: config.label,
+            className: "relative drop-shadow-lg",
+            style: {
+              width: `${3 * intensity}rem`,
+              height: `${3 * intensity}rem`,
+              objectFit: "contain",
+              imageRendering: "pixelated"
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "relative text-3xl drop-shadow-lg",
+            style: { fontSize: `${2 * intensity}rem` },
+            role: "img",
+            "aria-label": config.label,
+            children: config.emoji
+          }
+        )
+      ]
+    }
+  );
+}
+function CanvasEffect(props) {
+  const eventBus = useEventBus();
+  const { completeEvent, onComplete, ...rest } = props;
+  const handleComplete = useCallback(() => {
+    if (completeEvent) eventBus.emit(`UI:${completeEvent}`, {});
+    onComplete?.();
+  }, [completeEvent, eventBus, onComplete]);
+  const enhancedProps = { ...rest, onComplete: handleComplete };
+  if (props.assetManifest) {
+    return /* @__PURE__ */ jsx(CanvasEffectEngine, { ...enhancedProps, assetManifest: props.assetManifest });
+  }
+  return /* @__PURE__ */ jsx(EmojiEffect, { ...enhancedProps });
+}
+CanvasEffect.displayName = "CanvasEffect";
 function VStackPattern({
   gap = "md",
   align = "stretch",
@@ -15616,7 +16860,7 @@ function HStackPattern({
 }
 HStackPattern.displayName = "HStackPattern";
 function BoxPattern({
-  p,
+  p: p2,
   m,
   bg = "transparent",
   border = false,
@@ -15629,7 +16873,7 @@ function BoxPattern({
   return /* @__PURE__ */ jsx(
     Box,
     {
-      padding: p,
+      padding: p2,
       margin: m,
       bg,
       border,
@@ -16542,79 +17786,87 @@ var COMPONENT_REGISTRY = {
   // Map patterns
   MapViewPattern,
   // Custom pattern
-  CustomPattern
-};
-var PATTERN_TO_COMPONENT = {
-  "page-header": "PageHeader",
-  "entity-table": "DataTable",
-  "entity-cards": "CardGrid",
-  "entity-detail": "DetailPanel",
-  "detail-panel": "DetailPanel",
-  "entity-list": "List",
-  "master-detail": "MasterDetail",
-  "search-bar": "SearchInput",
-  "empty-state": "EmptyState",
-  "loading-state": "LoadingState",
-  breadcrumb: "Breadcrumb",
-  stats: "StatCard",
-  "form-section": "Form",
-  form: "Form",
-  "form-actions": "ButtonGroup",
-  "filter-group": "ButtonGroup",
-  "button-group": "ButtonGroup",
-  // Layout patterns
-  vstack: "VStackPattern",
-  hstack: "HStackPattern",
-  box: "BoxPattern",
-  grid: "GridPattern",
-  center: "CenterPattern",
-  spacer: "SpacerPattern",
-  divider: "DividerPattern",
-  // Component patterns - Interactive
-  button: "ButtonPattern",
-  "icon-button": "IconButtonPattern",
-  link: "LinkPattern",
-  // Component patterns - Display
-  text: "TextPattern",
-  heading: "HeadingPattern",
-  badge: "BadgePattern",
-  avatar: "AvatarPattern",
-  icon: "IconPattern",
-  image: "ImagePattern",
-  card: "CardPattern",
-  "progress-bar": "ProgressBarPattern",
-  spinner: "SpinnerPattern",
-  // Component patterns - Form inputs
-  input: "InputPattern",
-  textarea: "TextareaPattern",
-  select: "SelectPattern",
-  checkbox: "CheckboxPattern",
-  radio: "RadioPattern",
-  label: "LabelPattern",
-  // Component patterns - Feedback
-  alert: "AlertPattern",
-  tooltip: "TooltipPattern",
-  popover: "PopoverPattern",
-  // Component patterns - Navigation
-  menu: "MenuPattern",
-  accordion: "AccordionPattern",
-  // Component patterns - Layout
-  container: "ContainerPattern",
-  "simple-grid": "SimpleGridPattern",
-  "float-button": "FloatButtonPattern",
-  // Custom pattern
-  custom: "CustomPattern",
-  // Map patterns
-  "map-view": "MapViewPattern"
+  CustomPattern,
+  // Direct components (not wrapped in pattern adapters)
+  Stack,
+  VStack: VStackPattern,
+  HStack: HStackPattern,
+  Typography: TextPattern,
+  Tabs,
+  StatDisplay,
+  StatBadge,
+  StatusDot,
+  TrendIndicator,
+  RangeSlider,
+  StarRating,
+  LineChart,
+  DataGrid,
+  DataList,
+  CalendarGrid,
+  Lightbox,
+  UploadDropZone,
+  WizardNavigation,
+  WizardProgress,
+  Meter,
+  ActionButtons,
+  HealthBar,
+  ScoreDisplay,
+  DPad,
+  CanvasEffect,
+  CombatLog,
+  DialogueBox,
+  InventoryPanel,
+  GameHud,
+  GameMenu,
+  FilterGroup: ButtonGroup,
+  ErrorState: EmptyState,
+  Toast: AlertPattern,
+  // Plain component name aliases — component-mapping.json returns these names
+  // (e.g., "button" → "Button") but registry above uses "ButtonPattern" keys.
+  Button: ButtonPattern,
+  IconButton: IconButtonPattern,
+  Link: LinkPattern,
+  Text: TextPattern,
+  Heading: HeadingPattern,
+  Badge: BadgePattern,
+  Avatar: AvatarPattern,
+  Icon: IconPattern,
+  Image: ImagePattern,
+  Card: CardPattern,
+  ProgressBar: ProgressBarPattern,
+  Spinner: SpinnerPattern,
+  Input: InputPattern,
+  Textarea: TextareaPattern,
+  Select: SelectPattern,
+  Checkbox: CheckboxPattern,
+  Radio: RadioPattern,
+  Label: LabelPattern,
+  Alert: AlertPattern,
+  Tooltip: TooltipPattern,
+  Popover: PopoverPattern,
+  Menu: MenuPattern,
+  Accordion: AccordionPattern,
+  Container: ContainerPattern,
+  SimpleGrid: SimpleGridPattern,
+  FloatButton: FloatButtonPattern,
+  MapView: MapViewPattern,
+  Box: BoxPattern,
+  Grid: GridPattern,
+  Center: CenterPattern,
+  Spacer: SpacerPattern,
+  Divider: DividerPattern
 };
 function getComponentForPattern(patternType) {
-  const componentName = PATTERN_TO_COMPONENT[patternType];
-  if (!componentName) {
+  const mapping = getComponentForPattern$1(patternType);
+  if (!mapping) {
     return null;
   }
-  return COMPONENT_REGISTRY[componentName] ?? null;
+  const name = typeof mapping === "string" ? mapping : mapping.component;
+  if (!name) return null;
+  return COMPONENT_REGISTRY[name] ?? null;
 }
 var PATTERNS_WITH_CHILDREN = /* @__PURE__ */ new Set([
+  "stack",
   "vstack",
   "hstack",
   "box",
@@ -16886,7 +18138,7 @@ function SlotContentRenderer({
         className: "slot-content",
         "data-pattern": content.pattern,
         "data-id": content.id,
-        children: /* @__PURE__ */ jsx(PatternComponent, { ...restProps, onDismiss, children: renderedChildren })
+        children: /* @__PURE__ */ jsx(PatternComponent, { ...restProps, children: renderedChildren })
       }
     );
   }
@@ -16948,4 +18200,4 @@ function UISlotRenderer({
 }
 UISlotRenderer.displayName = "UISlotRenderer";
 
-export { Accordion, ActionButton, ActionButtons, Alert, AnimatedCounter, Avatar, Badge, Box, Breadcrumb, Button, ButtonGroup, CalendarGrid, Card, Card2, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, Center, ChartLegend, Checkbox, ChoiceButton, CodeBlock, CombatLog, ComboCounter, ConditionalWrapper, ConfettiEffect, Container, ControlButton, CraftingRecipe, DIAMOND_TOP_Y, DPad, DamageNumber, DataGrid, DataList, DataTable, DateRangeSelector, DayCell, DetailPanel, DialogueBox, DialogueBubble, Divider, Drawer, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, FEATURE_COLORS, FLOOR_HEIGHT, FilterGroup, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormField, FormSectionHeader, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GraphView, Grid, HStack, Heading, HealthBar, HealthPanel, Icon, InfiniteScrollSentinel, Input, InputGroup, InventoryGrid, InventoryPanel, IsometricCanvas, IsometricCanvas_default, ItemSlot, Label, LawReferenceTooltip, Lightbox, LineChart, LoadingState, MapView, MarkdownContent, MasterDetail, Menu, Meter, MiniMap, Modal, NumberStepper, Overlay, PageHeader, Pagination, PlatformerCanvas, Popover, PowerupSlots, ProgressBar, ProgressDots, PullToRefresh, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ResourceBar, ResourceCounter, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Select, SidePanel, SimpleGrid, Skeleton, SlotContentRenderer, SortableList, Spacer, Spinner, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateIndicator, StatusDot, StatusEffect, SuspenseConfigProvider, SwipeableRow, Switch, TILE_HEIGHT, TILE_WIDTH, Tabs, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, TimerDisplay, Toast, Tooltip, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UnitCommandBar, UploadDropZone, VStack, ViolationAlert, WaypointMarker, WizardNavigation, WizardProgress, XPBar, drawSprite, isoToScreen, screenToIso, useCamera, useImageCache };
+export { Accordion, ActionButton, ActionButtons, Alert, AnimatedCounter, Avatar, Badge, Box, Breadcrumb, Button, ButtonGroup, CalendarGrid, CanvasEffect, Card, Card2, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, Center, ChartLegend, Checkbox, ChoiceButton, CodeBlock, CombatLog, ComboCounter, ConditionalWrapper, ConfettiEffect, Container, ControlButton, CraftingRecipe, DIAMOND_TOP_Y, DPad, DamageNumber, DataGrid, DataList, DataTable, DateRangeSelector, DayCell, DetailPanel, DialogueBox, DialogueBubble, Divider, Drawer, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, FEATURE_COLORS, FLOOR_HEIGHT, FilterGroup, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormField, FormSectionHeader, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GraphView, Grid, HStack, Heading, HealthBar, HealthPanel, Icon, InfiniteScrollSentinel, Input, InputGroup, InventoryGrid, InventoryPanel, IsometricCanvas, IsometricCanvas_default, ItemSlot, Label, LawReferenceTooltip, Lightbox, LineChart, LoadingState, MapView, MarkdownContent, MasterDetail, Menu, Meter, MiniMap, Modal, NumberStepper, Overlay, PageHeader, Pagination, PlatformerCanvas, Popover, PowerupSlots, ProgressBar, ProgressDots, PullToRefresh, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ResourceBar, ResourceCounter, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Select, SidePanel, SimpleGrid, Skeleton, SlotContentRenderer, SortableList, Spacer, Spinner, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateIndicator, StatusDot, StatusEffect, SuspenseConfigProvider, SwipeableRow, Switch, TILE_HEIGHT, TILE_WIDTH, Tabs, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, TimerDisplay, Toast, Tooltip, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UnitCommandBar, UploadDropZone, VStack, ViolationAlert, WaypointMarker, WizardNavigation, WizardProgress, XPBar, drawSprite, isoToScreen, screenToIso, useCamera, useImageCache };