@almadar/ui 5.152.0 → 5.153.0

package/dist/components/index.cjs

@@ -5224,27 +5224,61 @@ var init_InfiniteScrollSentinel = __esm({
     exports.InfiniteScrollSentinel.displayName = "InfiniteScrollSentinel";
   }
 });
-function createParticles(count) {
-  return Array.from({ length: count }, () => {
-    particleIdCounter += 1;
-    return {
-      id: particleIdCounter,
-      color: CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)],
-      left: 30 + Math.random() * 40,
-      delay: Math.random() * 300,
-      angle: Math.random() * 360,
-      distance: 40 + Math.random() * 80,
-      rotation: Math.random() * 720 - 360,
-      size: 4 + Math.random() * 6
-    };
-  });
+
+// 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,
+    shape: row.shape,
+    count: row.count,
+    glow: row.glow,
+    gravity: row.gravity,
+    color2: row.color2
+  };
 }
-var CONFETTI_COLORS, particleIdCounter; exports.ConfettiEffect = void 0;
-var init_ConfettiEffect = __esm({
-  "components/core/atoms/ConfettiEffect.tsx"() {
-    "use client";
-    init_cn();
-    init_Box();
+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);
+  }
+  h ^= h >>> 13;
+  h = Math.imul(h, 1274126177);
+  h ^= h >>> 16;
+  return (h >>> 0) / 4294967296;
+}
+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_COLORS, CONFETTI_BURST_KEYFRAMES;
+var init_fx = __esm({
+  "components/core/atoms/fx.ts"() {
     CONFETTI_COLORS = [
       "var(--color-primary)",
       "var(--color-success)",
@@ -5253,7 +5287,30 @@ var init_ConfettiEffect = __esm({
       "gold",
       "dodgerblue"
     ];
-    particleIdCounter = 0;
+    CONFETTI_BURST_KEYFRAMES = `
+@keyframes confetti-burst {
+  0% {
+    opacity: 1;
+    transform: translate(0, 0) rotate(0deg) scale(1);
+  }
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translate(var(--confetti-tx), var(--confetti-ty)) rotate(var(--confetti-rotate)) scale(0.5);
+  }
+}
+`;
+  }
+});
+exports.ConfettiEffect = void 0;
+var init_ConfettiEffect = __esm({
+  "components/core/atoms/ConfettiEffect.tsx"() {
+    "use client";
+    init_cn();
+    init_Box();
+    init_fx();
     exports.ConfettiEffect = ({
       trigger,
       duration = 2e3,
@@ -5262,11 +5319,13 @@ var init_ConfettiEffect = __esm({
     }) => {
       const [particles, setParticles] = React77.useState([]);
       const previousTriggerRef = React77.useRef(false);
+      const burstRef = React77.useRef(0);
       React77.useEffect(() => {
         const wasFalse = !previousTriggerRef.current;
         previousTriggerRef.current = trigger;
         if (trigger && wasFalse) {
-          const newParticles = createParticles(particleCount);
+          burstRef.current += 1;
+          const newParticles = createConfettiParticles(particleCount, `confetti-${burstRef.current}`);
           setParticles(newParticles);
           const timer = window.setTimeout(() => {
             setParticles([]);
@@ -5314,21 +5373,7 @@ var init_ConfettiEffect = __esm({
                 p.id
               );
             }),
-            /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-        @keyframes confetti-burst {
-          0% {
-            opacity: 1;
-            transform: translate(0, 0) rotate(0deg) scale(1);
-          }
-          70% {
-            opacity: 1;
-          }
-          100% {
-            opacity: 0;
-            transform: translate(var(--confetti-tx), var(--confetti-ty)) rotate(var(--confetti-rotate)) scale(0.5);
-          }
-        }
-      ` })
+            /* @__PURE__ */ jsxRuntime.jsx("style", { children: CONFETTI_BURST_KEYFRAMES })
           ]
         }
       );
@@ -18132,7 +18177,7 @@ var init_DrawShape = __esm({
           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 ?? rx) * 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);
@@ -18322,6 +18367,172 @@ var init_DrawTextLayer = __esm({
     };
   }
 });
+
+// components/game/molecules/DrawFxLayer.tsx
+function fxPosition(view, dim, ageSec) {
+  const g = view.gravity ?? 0;
+  const fall = 0.5 * g * ageSec * ageSec;
+  {
+    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 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)) * easeOut2(progress);
+  const r = size * (0.06 + 0.06 * fxHash01(view.id, i * 3 + 2));
+  const color = view.color ?? DEFAULT_SPARK_COLOR;
+  return {
+    type: "draw-shape",
+    shape: "ellipse",
+    position: { ...pos, x: pos.x + Math.cos(angle) * dist, y: pos.y + Math.sin(angle) * dist },
+    anchor: "center",
+    radiusX: r,
+    fill: color,
+    blendMode: "lighter",
+    opacity: fade,
+    ...view.glow ? { shadow: { color, blur: view.glow } } : {}
+  };
+}
+function proceduralShapes(view, pos, fade, progress) {
+  const size = view.size ?? 0.5;
+  const color = view.color ?? DEFAULT_SPARK_COLOR;
+  switch (view.shape ?? "spark") {
+    case "ring": {
+      return [
+        {
+          type: "draw-shape",
+          shape: "ellipse",
+          position: pos,
+          anchor: "center",
+          radiusX: size * easeOut2(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) * easeOut2(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 * easeOut2(progress)) * (0.6 + 0.4 * fxHash01(view.id, i * 3 + 1));
+        const len = size * 0.35;
+        return {
+          type: "draw-shape",
+          shape: "ellipse",
+          position: pos,
+          anchor: "center",
+          offsetX: inner + len / 2,
+          offsetY: 0,
+          radiusX: len / 2,
+          radiusY: size * 0.04,
+          rotate: angle,
+          fill: color,
+          blendMode: "lighter",
+          opacity: fade,
+          ...view.glow ? { shadow: { color, blur: view.glow } } : {}
+        };
+      });
+    }
+    default: {
+      const count = view.count ?? 6;
+      return Array.from({ length: count }, (_, i) => sparkShape(view, pos, i, fade, progress));
+    }
+  }
+}
+function expandFxItem(view, node, epochNowMs, dim) {
+  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
+    });
+  } else {
+    out.push(...proceduralShapes(view, pos, fade, progress));
+  }
+  if (view.message) {
+    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
+    };
+    out.push(text);
+  }
+  return out;
+}
+function expandFxLayer(node, epochNowMs, dim) {
+  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));
+  }
+  return out;
+}
+function DrawFxLayer(_props) {
+  return null;
+}
+var DEFAULT_TICK_MS, DEFAULT_TEXT_COLOR, DEFAULT_SPARK_COLOR, easeOut2;
+var init_DrawFxLayer = __esm({
+  "components/game/molecules/DrawFxLayer.tsx"() {
+    "use client";
+    init_fx();
+    DEFAULT_TICK_MS = 500;
+    DEFAULT_TEXT_COLOR = "#ffe066";
+    DEFAULT_SPARK_COLOR = "#ffffff";
+    easeOut2 = (t) => 1 - (1 - t) * (1 - t);
+  }
+});
 function paintDrawable(painter, node, dctx) {
   switch (node.type) {
     case "draw-sprite":
@@ -18369,6 +18580,11 @@ function paintDrawable(painter, node, dctx) {
     case "draw-text-layer":
       paintTextLayer(painter, node, dctx);
       break;
+    case "draw-fx-layer": {
+      const epochNow = dctx.time > 0 && typeof performance !== "undefined" ? performance.timeOrigin + dctx.time : 0;
+      for (const child of expandFxLayer(node, epochNow, "2d")) paintDrawable(painter, child, dctx);
+      break;
+    }
   }
 }
 var paint2dLog, warnedUnsupported2d, warnUnsupported2d;
@@ -18383,6 +18599,7 @@ var init_paintDispatch = __esm({
     init_DrawSpriteLayer();
     init_DrawShapeLayer();
     init_DrawTextLayer();
+    init_DrawFxLayer();
     paint2dLog = logger.createLogger("almadar:ui:drawable-2d");
     warnedUnsupported2d = /* @__PURE__ */ new Set();
     warnUnsupported2d = (kind) => {
@@ -18631,6 +18848,7 @@ function Canvas2D({
       return isAnimatedGroup(node) || Array.isArray(node.items) && node.items.some(drawableIsAnimated);
     if (node.type === "draw-shape-layer") return Array.isArray(node.items) && node.items.some(isAnimatedShape);
     if (node.type === "draw-sprite-layer") return Array.isArray(node.items) && node.items.some(isAnimatedSprite);
+    if (node.type === "draw-fx-layer") return Array.isArray(node.items) && node.items.length > 0;
     return false;
   };
   const animRafRef = React77.useRef(0);
@@ -26553,6 +26771,196 @@ var init_PageTransition = __esm({
     exports.PageTransition.displayName = "PageTransition";
   }
 });
+function ConfettiBurst({ item, lifeMs }) {
+  const particles = createConfettiParticles(item.particleCount ?? 30, item.id);
+  const left = (item.x ?? 0.5) * 100;
+  const top = (item.z ?? item.y ?? 0.4) * 100;
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { position: "absolute", style: { left: `${left}%`, top: `${top}%` }, children: particles.map((p) => {
+    const rad = p.angle * Math.PI / 180;
+    const tx = Math.cos(rad) * p.distance * (item.size ?? 1);
+    const ty = Math.sin(rad) * p.distance * (item.size ?? 1) - 20;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      exports.Box,
+      {
+        className: "absolute rounded-sm",
+        style: {
+          left: (p.left - 50) * 2,
+          top: -10,
+          width: p.size,
+          height: p.size,
+          backgroundColor: item.color ?? p.color,
+          animation: `confetti-burst ${Math.max(lifeMs - p.delay, 200)}ms ease-out ${p.delay}ms forwards`,
+          opacity: 0,
+          "--confetti-tx": `${tx}px`,
+          "--confetti-ty": `${ty}px`,
+          "--confetti-rotate": `${p.rotation}deg`
+        }
+      },
+      p.id
+    );
+  }) });
+}
+function SparkleBurst({ item, lifeMs }) {
+  const count = item.particleCount ?? 8;
+  const scale = item.size ?? 1;
+  const left = (item.x ?? 0.5) * 100;
+  const top = (item.z ?? item.y ?? 0.4) * 100;
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { position: "absolute", style: { left: `${left}%`, top: `${top}%` }, children: Array.from({ length: count }, (_, i) => {
+    const dx = (fxHash01(item.id, i * 4) - 0.5) * 160 * scale;
+    const dy = (fxHash01(item.id, i * 4 + 1) - 0.5) * 120 * scale;
+    const dot = (4 + fxHash01(item.id, i * 4 + 2) * 5) * scale;
+    const delay = fxHash01(item.id, i * 4 + 3) * lifeMs * 0.4;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      exports.Box,
+      {
+        className: "absolute rounded-full",
+        style: {
+          left: dx,
+          top: dy,
+          width: dot,
+          height: dot,
+          backgroundColor: item.color ?? "gold",
+          opacity: 0,
+          animation: `fx-overlay-sparkle ${Math.max(lifeMs - delay, 200)}ms ease-in-out ${delay}ms forwards`
+        }
+      },
+      i
+    );
+  }) });
+}
+function OverlayFxNode({ item, tickMs }) {
+  const lifeMs = lifeMsOf(item, tickMs);
+  switch (item.effect ?? "sparkle") {
+    case "confetti":
+      return /* @__PURE__ */ jsxRuntime.jsx(ConfettiBurst, { item, lifeMs });
+    case "flash":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        exports.Box,
+        {
+          position: "absolute",
+          className: "inset-0",
+          style: {
+            backgroundColor: item.color ?? "#ffffff",
+            opacity: 0,
+            animation: `fx-overlay-flash ${lifeMs}ms ease-out forwards`
+          }
+        }
+      );
+    case "streak-glow":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        exports.Box,
+        {
+          position: "absolute",
+          className: "inset-0",
+          style: {
+            boxShadow: `inset 0 0 ${60 * (item.size ?? 1)}px ${item.color ?? "var(--color-warning)"}`,
+            opacity: 0,
+            animation: `fx-overlay-glow ${lifeMs}ms ease-in-out forwards`
+          }
+        }
+      );
+    case "float-text": {
+      if (!item.message) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        exports.Box,
+        {
+          position: "absolute",
+          style: {
+            left: `${(item.x ?? 0.5) * 100}%`,
+            top: `${(item.z ?? item.y ?? 0.4) * 100}%`,
+            color: item.color ?? "var(--color-success)",
+            fontWeight: 700,
+            fontSize: 16 * (item.size ?? 1),
+            textShadow: "0 1px 2px rgba(0,0,0,0.4)",
+            opacity: 0,
+            animation: `fx-overlay-float ${lifeMs}ms ease-out forwards`,
+            whiteSpace: "nowrap"
+          },
+          children: item.message
+        }
+      );
+    }
+    case "shake":
+      return null;
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx(SparkleBurst, { item, lifeMs });
+  }
+}
+var DEFAULT_TICK_MS2, FX_OVERLAY_KEYFRAMES, lifeMsOf; exports.FxOverlay = void 0;
+var init_FxOverlay = __esm({
+  "components/core/molecules/FxOverlay.tsx"() {
+    "use client";
+    init_cn();
+    init_Box();
+    init_fx();
+    DEFAULT_TICK_MS2 = 500;
+    FX_OVERLAY_KEYFRAMES = `
+${CONFETTI_BURST_KEYFRAMES}
+@keyframes fx-overlay-flash {
+  0% { opacity: 0.75; }
+  100% { opacity: 0; }
+}
+@keyframes fx-overlay-glow {
+  0% { opacity: 0.9; }
+  60% { opacity: 0.6; }
+  100% { opacity: 0; }
+}
+@keyframes fx-overlay-sparkle {
+  0% { opacity: 0; transform: scale(0); }
+  30% { opacity: 1; transform: scale(1); }
+  100% { opacity: 0; transform: scale(0.3); }
+}
+@keyframes fx-overlay-float {
+  0% { opacity: 0; transform: translate(-50%, 8px); }
+  15% { opacity: 1; }
+  100% { opacity: 0; transform: translate(-50%, -40px); }
+}
+@keyframes fx-overlay-shake {
+  0% { transform: translateX(0); }
+  15% { transform: translateX(-6px); }
+  30% { transform: translateX(5px); }
+  45% { transform: translateX(-4px); }
+  60% { transform: translateX(3px); }
+  75% { transform: translateX(-2px); }
+  100% { transform: translateX(0); }
+}
+`;
+    lifeMsOf = (it, tickMs) => Math.max(it.maxTtl ?? it.ttl, it.ttl, 1) * tickMs;
+    exports.FxOverlay = ({ items, tickMs = DEFAULT_TICK_MS2, children, className }) => {
+      const screenItems = (Array.isArray(items) ? items : []).filter(
+        (it) => Boolean(it) && typeof it.id === "string" && it.space !== "world"
+      );
+      const shakeItem = [...screenItems].reverse().find((it) => it.effect === "shake");
+      const overlay = /* @__PURE__ */ jsxRuntime.jsxs(
+        exports.Box,
+        {
+          position: "absolute",
+          className: cn("inset-0 pointer-events-none overflow-hidden z-50", !children && className),
+          "aria-hidden": "true",
+          children: [
+            screenItems.map((it) => /* @__PURE__ */ jsxRuntime.jsx(OverlayFxNode, { item: it, tickMs }, it.id)),
+            /* @__PURE__ */ jsxRuntime.jsx("style", { children: FX_OVERLAY_KEYFRAMES })
+          ]
+        }
+      );
+      if (children !== void 0 && children !== null) {
+        return /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { position: "relative", className, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            exports.Box,
+            {
+              style: shakeItem ? { animation: `fx-overlay-shake ${Math.min(lifeMsOf(shakeItem, tickMs), 600)}ms ease-in-out` } : void 0,
+              children
+            },
+            shakeItem?.id ?? "steady"
+          ),
+          overlay
+        ] });
+      }
+      return overlay;
+    };
+    exports.FxOverlay.displayName = "FxOverlay";
+  }
+});
 function computePopoverStyle(position, triggerRect, popoverWidth) {
   if (position === "left" || position === "right") {
     return {
@@ -31242,7 +31650,7 @@ var init_MathCanvas = __esm({
               x: mapX((first.x + last.x) / 2),
               y: (mapY(region.samples[mid].y) + mapY(baseline)) / 2,
               text: region.label,
-              color: "#111827",
+              color,
               fontSize: 11
             });
           }
@@ -31275,14 +31683,14 @@ var init_MathCanvas = __esm({
             const px = mapX(guide.at);
             out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color, dash });
             if (guide.label) {
-              out.push({ type: "text", x: px + 4, y: margin + 10, text: guide.label, color: "#111827", fontSize: 11 });
+              out.push({ type: "text", x: px + 4, y: margin + 10, text: guide.label, color, fontSize: 11 });
             }
           } else {
             if (guide.at < yMin || guide.at > yMax) continue;
             const py = mapY(guide.at);
             out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color, dash });
             if (guide.label) {
-              out.push({ type: "text", x: width - margin - 4, y: py - 8, text: guide.label, color: "#111827", fontSize: 11, align: "right" });
+              out.push({ type: "text", x: width - margin - 4, y: py - 8, text: guide.label, color, fontSize: 11, align: "right" });
             }
           }
         }
@@ -31348,7 +31756,7 @@ var init_MathCanvas = __esm({
               x: (x1 + x2) / 2,
               y: xAxisY - peak - 8,
               text: hop.label,
-              color: "#111827",
+              color,
               fontSize: 10,
               align: "center"
             });
@@ -31375,7 +31783,7 @@ var init_MathCanvas = __esm({
               x: mapX(angle.x + 1.35 * radius * Math.cos(rad)),
               y: mapY(angle.y + 1.35 * radius * Math.sin(rad)),
               text: angle.label,
-              color: "#111827",
+              color,
               fontSize: 11,
               align: "center"
             });
@@ -31393,7 +31801,7 @@ var init_MathCanvas = __esm({
             fill: isOpen ? "#ffffff" : p.color ?? "#dc2626"
           });
           if (p.label) {
-            out.push({ type: "text", x: mapX(p.x) + 8, y: mapY(p.y) - 8, text: p.label, color: "#111827", fontSize: 12 });
+            out.push({ type: "text", x: mapX(p.x) + 8, y: mapY(p.y) - 8, text: p.label, color: p.color ?? "#111827", fontSize: 12 });
           }
         }
         for (const v of vectors) {
@@ -31404,7 +31812,7 @@ var init_MathCanvas = __esm({
           const y2 = mapY(v.y + v.vy);
           out.push({ type: "arrow", x1, y1, x2, y2, color: v.color ?? "#7c3aed", lineWidth: 2 });
           if (v.label) {
-            out.push({ type: "text", x: x2 + 6, y: y2 - 6, text: v.label, color: "#111827", fontSize: 12 });
+            out.push({ type: "text", x: x2 + 6, y: y2 - 6, text: v.label, color: v.color ?? "#7c3aed", fontSize: 12 });
           }
         }
         out.push(...shapes);
@@ -42380,6 +42788,7 @@ var init_molecules2 = __esm({
     init_Menu();
     init_Modal();
     init_PageTransition();
+    init_FxOverlay();
     init_Pagination();
     init_Popover();
     init_Coachmark();
@@ -49301,6 +49710,7 @@ var init_component_registry_generated = __esm({
     init_DocSidebar();
     init_DocTOC();
     init_DocumentViewer();
+    init_DrawFxLayer();
     init_DrawGroup();
     init_DrawMesh();
     init_DrawShape();
@@ -49331,6 +49741,7 @@ var init_component_registry_generated = __esm({
     init_FormField();
     init_FormSection();
     init_FormSectionHeader();
+    init_FxOverlay();
     init_GameAudioToggle();
     init_GameHud();
     init_GameIcon();
@@ -49571,6 +49982,7 @@ var init_component_registry_generated = __esm({
       "DocSidebar": exports.DocSidebar,
       "DocTOC": exports.DocTOC,
       "DocumentViewer": exports.DocumentViewer,
+      "DrawFxLayer": DrawFxLayer,
       "DrawGroup": DrawGroup,
       "DrawMesh": DrawMesh,
       "DrawShape": DrawShape,
@@ -49601,6 +50013,7 @@ var init_component_registry_generated = __esm({
       "FormField": exports.FormField,
       "FormLayout": exports.FormLayout,
       "FormSectionHeader": exports.FormSectionHeader,
+      "FxOverlay": exports.FxOverlay,
       "GameAudioToggle": GameAudioToggle,
       "GameHud": GameHud,
       "GameIcon": GameIcon,