@almadar/ui 5.76.7 → 5.78.0

package/dist/runtime/index.cjs

@@ -6225,6 +6225,66 @@ var init_RangeSlider = __esm({
     RangeSlider.displayName = "RangeSlider";
   }
 });
+function easeOut(t) {
+  return t * (2 - t);
+}
+var AnimatedCounter;
+var init_AnimatedCounter = __esm({
+  "components/marketing/atoms/AnimatedCounter.tsx"() {
+    "use client";
+    init_cn();
+    init_Typography();
+    AnimatedCounter = ({
+      value: rawValue,
+      duration = 600,
+      prefix,
+      suffix,
+      className
+    }) => {
+      const numericRaw = typeof rawValue === "number" ? rawValue : Number.parseFloat(String(rawValue ?? ""));
+      const value = !Number.isNaN(numericRaw) ? numericRaw : 0;
+      const [displayValue, setDisplayValue] = React105.useState(value);
+      const previousValueRef = React105.useRef(value);
+      const animationFrameRef = React105.useRef(null);
+      React105.useEffect(() => {
+        const from = previousValueRef.current;
+        const to = value;
+        previousValueRef.current = value;
+        if (from === to) {
+          setDisplayValue(to);
+          return;
+        }
+        const startTime = performance.now();
+        const diff = to - from;
+        function animate(currentTime) {
+          const elapsed = currentTime - startTime;
+          const progress = Math.min(elapsed / duration, 1);
+          const easedProgress = easeOut(progress);
+          setDisplayValue(from + diff * easedProgress);
+          if (progress < 1) {
+            animationFrameRef.current = requestAnimationFrame(animate);
+          } else {
+            setDisplayValue(to);
+          }
+        }
+        animationFrameRef.current = requestAnimationFrame(animate);
+        return () => {
+          if (animationFrameRef.current !== null) {
+            cancelAnimationFrame(animationFrameRef.current);
+          }
+        };
+      }, [value, duration]);
+      const decimalPlaces = Number.isInteger(value) ? 0 : String(value).split(".")[1]?.length ?? 0;
+      const formattedValue = displayValue.toFixed(decimalPlaces);
+      return /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "h3", className: cn("tabular-nums", className), children: [
+        prefix,
+        formattedValue,
+        suffix
+      ] });
+    };
+    AnimatedCounter.displayName = "AnimatedCounter";
+  }
+});
 var InfiniteScrollSentinel;
 var init_InfiniteScrollSentinel = __esm({
   "components/core/atoms/InfiniteScrollSentinel.tsx"() {
@@ -6486,6 +6546,34 @@ var init_SectionHeader = __esm({
     SectionHeader.displayName = "SectionHeader";
   }
 });
+var sizeClasses6, MarketingStatCard;
+var init_MarketingStatCard = __esm({
+  "components/marketing/atoms/MarketingStatCard.tsx"() {
+    init_cn();
+    init_Stack();
+    init_Typography();
+    sizeClasses6 = {
+      sm: "text-2xl",
+      md: "text-4xl",
+      lg: "text-5xl"
+    };
+    MarketingStatCard = ({ value, label, size = "md", className }) => {
+      return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", align: "center", className: cn(className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Typography,
+          {
+            weight: "bold",
+            color: "primary",
+            className: cn(sizeClasses6[size]),
+            children: value
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "muted", children: label })
+      ] });
+    };
+    MarketingStatCard.displayName = "MarketingStatCard";
+  }
+});
 var backgroundClasses, paddingClasses, ContentSection;
 var init_ContentSection = __esm({
   "components/marketing/atoms/ContentSection.tsx"() {
@@ -12500,318 +12588,14 @@ var init_useCanvasEffects = __esm({
     "use client";
   }
 });
-function pickPath(entry) {
-  if (Array.isArray(entry.path)) {
-    return entry.path[Math.floor(Math.random() * entry.path.length)];
-  }
-  return entry.path;
-}
-function useGameAudio({
-  manifest,
-  baseUrl = "",
-  initialMuted = false,
-  initialVolume = 1
-}) {
-  const [muted, setMutedState] = React105.useState(initialMuted);
-  const [masterVolume, setMasterVolumeState] = React105.useState(initialVolume);
-  const mutedRef = React105.useRef(muted);
-  const volumeRef = React105.useRef(masterVolume);
-  const manifestRef = React105.useRef(manifest);
-  mutedRef.current = muted;
-  volumeRef.current = masterVolume;
-  manifestRef.current = manifest;
-  const poolsRef = React105.useRef(/* @__PURE__ */ new Map());
-  const getOrCreateElement = React105.useCallback((key) => {
-    const entry = manifestRef.current[key];
-    if (!entry) return null;
-    let pool = poolsRef.current.get(key);
-    if (!pool) {
-      pool = [];
-      poolsRef.current.set(key, pool);
-    }
-    const maxSize = entry.poolSize ?? 1;
-    for (const audio of pool) {
-      if (audio.paused && (audio.ended || audio.currentTime === 0)) {
-        return audio;
-      }
-    }
-    if (pool.length < maxSize) {
-      const src = baseUrl + pickPath(entry);
-      const audio = new Audio(src);
-      audio.loop = entry.loop ?? false;
-      pool.push(audio);
-      return audio;
-    }
-    if (!entry.loop) {
-      let oldest = pool[0];
-      for (const audio of pool) {
-        if (audio.currentTime > oldest.currentTime) {
-          oldest = audio;
-        }
-      }
-      oldest.pause();
-      oldest.currentTime = 0;
-      return oldest;
-    }
-    return null;
-  }, [baseUrl]);
-  const play = React105.useCallback((key) => {
-    if (mutedRef.current) return;
-    const entry = manifestRef.current[key];
-    if (!entry) return;
-    const audio = getOrCreateElement(key);
-    if (!audio) return;
-    audio.volume = Math.min(1, (entry.volume ?? 1) * volumeRef.current);
-    if (!entry.loop) {
-      audio.currentTime = 0;
-    }
-    const promise = audio.play();
-    if (promise) {
-      promise.catch(() => {
-      });
-    }
-  }, [getOrCreateElement]);
-  const stop = React105.useCallback((key) => {
-    const pool = poolsRef.current.get(key);
-    if (!pool) return;
-    for (const audio of pool) {
-      audio.pause();
-      audio.currentTime = 0;
-    }
-  }, []);
-  const currentMusicKeyRef = React105.useRef(null);
-  const currentMusicElRef = React105.useRef(null);
-  const musicFadeRef = React105.useRef(null);
-  const pendingMusicKeyRef = React105.useRef(null);
-  const clearMusicFade = React105.useCallback(() => {
-    if (musicFadeRef.current) {
-      clearInterval(musicFadeRef.current);
-      musicFadeRef.current = null;
-    }
-  }, []);
-  const playMusic = React105.useCallback((key) => {
-    if (key === currentMusicKeyRef.current) return;
-    pendingMusicKeyRef.current = key;
-    const entry = manifestRef.current[key];
-    if (!entry) return;
-    const fadeDurationMs = entry.crossfadeDurationMs ?? 1500;
-    const stepMs = 50;
-    const totalSteps = Math.max(1, fadeDurationMs / stepMs);
-    const targetVolume = Math.min(1, (entry.volume ?? 1) * volumeRef.current);
-    clearMusicFade();
-    const src = baseUrl + (Array.isArray(entry.path) ? entry.path[0] : entry.path);
-    const incoming = new Audio(src);
-    incoming.loop = true;
-    incoming.volume = 0;
-    const outgoing = currentMusicElRef.current;
-    const outgoingStartVol = outgoing?.volume ?? 0;
-    currentMusicKeyRef.current = key;
-    currentMusicElRef.current = incoming;
-    if (!mutedRef.current) {
-      incoming.play().catch(() => {
-        currentMusicKeyRef.current = null;
-        currentMusicElRef.current = outgoing;
-      });
-    }
-    let step = 0;
-    musicFadeRef.current = setInterval(() => {
-      step++;
-      const progress = Math.min(step / totalSteps, 1);
-      incoming.volume = Math.min(1, targetVolume * progress);
-      if (outgoing) {
-        outgoing.volume = Math.max(0, outgoingStartVol * (1 - progress));
-      }
-      if (progress >= 1) {
-        clearMusicFade();
-        if (outgoing) {
-          outgoing.pause();
-          outgoing.src = "";
-        }
-      }
-    }, stepMs);
-  }, [baseUrl, clearMusicFade]);
-  const stopMusic = React105.useCallback((fadeDurationMs = 1e3) => {
-    const outgoing = currentMusicElRef.current;
-    if (!outgoing) return;
-    currentMusicKeyRef.current = null;
-    currentMusicElRef.current = null;
-    pendingMusicKeyRef.current = null;
-    clearMusicFade();
-    const startVolume = outgoing.volume;
-    const stepMs = 50;
-    const totalSteps = Math.max(1, fadeDurationMs / stepMs);
-    let step = 0;
-    musicFadeRef.current = setInterval(() => {
-      step++;
-      const progress = step / totalSteps;
-      outgoing.volume = Math.max(0, startVolume * (1 - progress));
-      if (progress >= 1) {
-        clearMusicFade();
-        outgoing.pause();
-        outgoing.src = "";
-      }
-    }, stepMs);
-  }, [clearMusicFade]);
-  const stopAll = React105.useCallback(() => {
-    for (const pool of poolsRef.current.values()) {
-      for (const audio of pool) {
-        audio.pause();
-        audio.currentTime = 0;
-      }
-    }
-    stopMusic(0);
-  }, [stopMusic]);
-  const setMuted = React105.useCallback((value) => {
-    setMutedState(value);
-    if (value) {
-      for (const [key, pool] of poolsRef.current.entries()) {
-        if (manifestRef.current[key]?.loop) {
-          for (const audio of pool) {
-            if (!audio.paused) audio.pause();
-          }
-        }
-      }
-      currentMusicElRef.current?.pause();
-    } else {
-      for (const [key, pool] of poolsRef.current.entries()) {
-        const entry = manifestRef.current[key];
-        if (entry?.loop && entry?.autostart) {
-          for (const audio of pool) {
-            if (audio.paused) audio.play().catch(() => {
-            });
-          }
-        }
-      }
-      const musicEl = currentMusicElRef.current;
-      if (musicEl) {
-        musicEl.play().catch(() => {
-        });
-      }
-    }
-  }, []);
-  const setMasterVolume = React105.useCallback((volume) => {
-    const clamped = Math.max(0, Math.min(1, volume));
-    setMasterVolumeState(clamped);
-    for (const [key, pool] of poolsRef.current.entries()) {
-      const entryVol = manifestRef.current[key]?.volume ?? 1;
-      for (const audio of pool) {
-        audio.volume = Math.min(1, entryVol * clamped);
-      }
-    }
-    if (!musicFadeRef.current && currentMusicElRef.current) {
-      const key = currentMusicKeyRef.current;
-      const entryVol = key ? manifestRef.current[key]?.volume ?? 1 : 1;
-      currentMusicElRef.current.volume = Math.min(1, entryVol * clamped);
-    }
-  }, []);
-  const unlockedRef = React105.useRef(false);
-  React105.useEffect(() => {
-    const autoKeys = Object.keys(manifest).filter((k) => manifest[k].autostart);
-    const hasPendingMusic = () => pendingMusicKeyRef.current !== null;
-    const hasAutoStart = autoKeys.length > 0;
-    if (!hasAutoStart && !hasPendingMusic()) return;
-    const unlock = () => {
-      if (unlockedRef.current) return;
-      unlockedRef.current = true;
-      if (!mutedRef.current) {
-        for (const key of autoKeys) {
-          play(key);
-        }
-        const pending = pendingMusicKeyRef.current;
-        if (pending && pending !== currentMusicKeyRef.current) {
-          playMusic(pending);
-        }
-      }
-    };
-    document.addEventListener("click", unlock, { once: true });
-    document.addEventListener("keydown", unlock, { once: true });
-    document.addEventListener("touchstart", unlock, { once: true });
-    return () => {
-      document.removeEventListener("click", unlock);
-      document.removeEventListener("keydown", unlock);
-      document.removeEventListener("touchstart", unlock);
-    };
-  }, [manifest, play, playMusic]);
-  React105.useEffect(() => {
-    return () => {
-      clearMusicFade();
-      for (const pool of poolsRef.current.values()) {
-        for (const audio of pool) {
-          audio.pause();
-          audio.src = "";
-        }
-      }
-      poolsRef.current.clear();
-      if (currentMusicElRef.current) {
-        currentMusicElRef.current.pause();
-        currentMusicElRef.current.src = "";
-        currentMusicElRef.current = null;
-      }
-    };
-  }, [clearMusicFade]);
-  return {
-    play,
-    stop,
-    stopAll,
-    playMusic,
-    stopMusic,
-    muted,
-    setMuted,
-    masterVolume,
-    setMasterVolume
-  };
-}
 var init_useGameAudio = __esm({
   "components/game/shared/hooks/useGameAudio.ts"() {
     "use client";
-    useGameAudio.displayName = "useGameAudio";
   }
 });
 function useGameAudioContextOptional() {
   return React105.useContext(GameAudioContext);
 }
-function GameAudioProvider({
-  manifest,
-  baseUrl = "",
-  children,
-  initialMuted = false
-}) {
-  const eventBus = useEventBus();
-  const { play, stop, stopAll, playMusic, stopMusic, muted, setMuted, masterVolume, setMasterVolume } = useGameAudio({ manifest, baseUrl, initialMuted });
-  React105.useEffect(() => {
-    const unsubPlay = eventBus.on("UI:PLAY_SOUND", (event) => {
-      const key = event.payload?.key;
-      if (key) play(key);
-    });
-    const unsubStop = eventBus.on("UI:STOP_SOUND", (event) => {
-      const key = event.payload?.key;
-      if (key) {
-        stop(key);
-      } else {
-        stopAll();
-      }
-    });
-    const unsubChangeMusic = eventBus.on("UI:CHANGE_MUSIC", (event) => {
-      const key = event.payload?.key;
-      if (key) {
-        playMusic(key);
-      } else {
-        stopMusic();
-      }
-    });
-    const unsubStopMusic = eventBus.on("UI:STOP_MUSIC", () => {
-      stopMusic();
-    });
-    return () => {
-      unsubPlay();
-      unsubStop();
-      unsubChangeMusic();
-      unsubStopMusic();
-    };
-  }, [eventBus, play, stop, stopAll, playMusic, stopMusic]);
-  const value = { muted, setMuted, masterVolume, setMasterVolume, play, playMusic, stopMusic };
-  return /* @__PURE__ */ jsxRuntime.jsx(GameAudioContext.Provider, { value, children });
-}
 var GameAudioContext;
 var init_GameAudioProvider = __esm({
   "components/game/shared/providers/GameAudioProvider.tsx"() {
@@ -12820,7 +12604,6 @@ var init_GameAudioProvider = __esm({
     init_useGameAudio();
     GameAudioContext = React105.createContext(null);
     GameAudioContext.displayName = "GameAudioContext";
-    GameAudioProvider.displayName = "GameAudioProvider";
   }
 });
 function GameAudioToggle({
@@ -20456,6 +20239,315 @@ var init_molecules = __esm({
     init_puzzleObject();
   }
 });
+function resolveColor2(color, ctx, fallback) {
+  if (!color) return fallback;
+  if (color.startsWith("var(")) {
+    ctx.canvas.style;
+    const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color);
+    if (m) {
+      const computed = getComputedStyle(ctx.canvas).getPropertyValue(m[1]).trim();
+      return computed || m[2]?.trim() || fallback;
+    }
+  }
+  return color;
+}
+function shapeBounds(shape) {
+  switch (shape.type) {
+    case "line":
+    case "arrow":
+      if (shape.x1 == null || shape.y1 == null || shape.x2 == null || shape.y2 == null) return null;
+      return {
+        x: Math.min(shape.x1, shape.x2) - 6,
+        y: Math.min(shape.y1, shape.y2) - 6,
+        w: Math.abs(shape.x2 - shape.x1) + 12,
+        h: Math.abs(shape.y2 - shape.y1) + 12
+      };
+    case "circle":
+      if (shape.x == null || shape.y == null || shape.radius == null) return null;
+      return {
+        x: shape.x - shape.radius - 4,
+        y: shape.y - shape.radius - 4,
+        w: shape.radius * 2 + 8,
+        h: shape.radius * 2 + 8
+      };
+    case "rect":
+      if (shape.x == null || shape.y == null || shape.width == null || shape.height == null) return null;
+      return { x: shape.x - 4, y: shape.y - 4, w: shape.width + 8, h: shape.height + 8 };
+    case "polygon":
+      if (!shape.points || shape.points.length === 0) return null;
+      {
+        const xs = shape.points.map((p2) => p2.x);
+        const ys = shape.points.map((p2) => p2.y);
+        const minX = Math.min(...xs);
+        const minY = Math.min(...ys);
+        return {
+          x: minX - 4,
+          y: minY - 4,
+          w: Math.max(...xs) - minX + 8,
+          h: Math.max(...ys) - minY + 8
+        };
+      }
+    case "text":
+      if (shape.x == null || shape.y == null) return null;
+      return { x: shape.x - 4, y: shape.y - (shape.fontSize ?? 14) - 4, w: 120, h: (shape.fontSize ?? 14) + 8 };
+    default:
+      return null;
+  }
+}
+function drawArrowHead(ctx, x1, y1, x2, y2, size) {
+  const angle = Math.atan2(y2 - y1, x2 - x1);
+  ctx.beginPath();
+  ctx.moveTo(x2, y2);
+  ctx.lineTo(x2 - size * Math.cos(angle - Math.PI / 6), y2 - size * Math.sin(angle - Math.PI / 6));
+  ctx.lineTo(x2 - size * Math.cos(angle + Math.PI / 6), y2 - size * Math.sin(angle + Math.PI / 6));
+  ctx.closePath();
+  ctx.fill();
+}
+function drawShape(ctx, shape, width, height) {
+  ctx.save();
+  const opacity = shape.opacity ?? 1;
+  ctx.globalAlpha = opacity;
+  const stroke = resolveColor2(shape.color, ctx, "#333333");
+  const fill = shape.fill ? resolveColor2(shape.fill, ctx, "#cccccc") : void 0;
+  ctx.lineWidth = shape.lineWidth ?? 2;
+  switch (shape.type) {
+    case "grid": {
+      const step = shape.step ?? 40;
+      ctx.strokeStyle = stroke;
+      ctx.globalAlpha = opacity * 0.25;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      for (let x = 0; x <= width; x += step) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+      }
+      for (let y = 0; y <= height; y += step) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+      }
+      ctx.stroke();
+      break;
+    }
+    case "axis": {
+      const axis = shape.axis ?? "x";
+      ctx.strokeStyle = stroke;
+      ctx.lineWidth = shape.lineWidth ?? 2;
+      ctx.beginPath();
+      if (axis === "x") {
+        ctx.moveTo(0, height / 2);
+        ctx.lineTo(width, height / 2);
+      } else {
+        ctx.moveTo(width / 2, 0);
+        ctx.lineTo(width / 2, height);
+      }
+      ctx.stroke();
+      break;
+    }
+    case "line": {
+      if (shape.x1 == null || shape.y1 == null || shape.x2 == null || shape.y2 == null) break;
+      ctx.strokeStyle = stroke;
+      ctx.beginPath();
+      ctx.moveTo(shape.x1, shape.y1);
+      ctx.lineTo(shape.x2, shape.y2);
+      ctx.stroke();
+      break;
+    }
+    case "arrow": {
+      if (shape.x1 == null || shape.y1 == null || shape.x2 == null || shape.y2 == null) break;
+      ctx.strokeStyle = stroke;
+      ctx.fillStyle = stroke;
+      ctx.beginPath();
+      ctx.moveTo(shape.x1, shape.y1);
+      ctx.lineTo(shape.x2, shape.y2);
+      ctx.stroke();
+      drawArrowHead(ctx, shape.x1, shape.y1, shape.x2, shape.y2, 10);
+      break;
+    }
+    case "circle": {
+      if (shape.x == null || shape.y == null || shape.radius == null) break;
+      ctx.beginPath();
+      ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
+      if (fill) {
+        ctx.fillStyle = fill;
+        ctx.fill();
+      }
+      ctx.strokeStyle = stroke;
+      ctx.stroke();
+      break;
+    }
+    case "rect": {
+      if (shape.x == null || shape.y == null || shape.width == null || shape.height == null) break;
+      if (fill) {
+        ctx.fillStyle = fill;
+        ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
+      }
+      ctx.strokeStyle = stroke;
+      ctx.strokeRect(shape.x, shape.y, shape.width, shape.height);
+      break;
+    }
+    case "polygon": {
+      if (!shape.points || shape.points.length < 2) break;
+      ctx.beginPath();
+      ctx.moveTo(shape.points[0].x, shape.points[0].y);
+      for (let i = 1; i < shape.points.length; i++) {
+        ctx.lineTo(shape.points[i].x, shape.points[i].y);
+      }
+      ctx.closePath();
+      if (fill) {
+        ctx.fillStyle = fill;
+        ctx.fill();
+      }
+      ctx.strokeStyle = stroke;
+      ctx.stroke();
+      break;
+    }
+    case "path": {
+      if (!shape.path) break;
+      const p2 = new Path2D(shape.path);
+      if (fill) {
+        ctx.fillStyle = fill;
+        ctx.fill(p2);
+      }
+      ctx.strokeStyle = stroke;
+      ctx.stroke(p2);
+      break;
+    }
+    case "text": {
+      if (shape.x == null || shape.y == null || !shape.text) break;
+      ctx.fillStyle = stroke;
+      ctx.font = `${shape.fontSize ?? 14}px system-ui, sans-serif`;
+      ctx.textAlign = shape.align ?? "left";
+      ctx.textBaseline = "middle";
+      ctx.fillText(shape.text, shape.x, shape.y);
+      break;
+    }
+  }
+  ctx.restore();
+}
+var LearningCanvas;
+var init_LearningCanvas = __esm({
+  "components/learning/atoms/LearningCanvas.tsx"() {
+    "use client";
+    init_cn();
+    init_useEventBus();
+    LearningCanvas = ({
+      className,
+      width = 600,
+      height = 400,
+      backgroundColor,
+      shapes = [],
+      interactive = false,
+      animate = false,
+      onShapeClick,
+      onShapeHover,
+      isLoading,
+      error
+    }) => {
+      const canvasRef = React105.useRef(null);
+      const eventBus = useEventBus();
+      const animRef = React105.useRef(0);
+      const hoverIndexRef = React105.useRef(-1);
+      const findShapeAt = React105.useCallback((clientX, clientY) => {
+        const canvas = canvasRef.current;
+        if (!canvas) return -1;
+        const rect = canvas.getBoundingClientRect();
+        const x = clientX - rect.left;
+        const y = clientY - rect.top;
+        for (let i = shapes.length - 1; i >= 0; i--) {
+          const b = shapeBounds(shapes[i]);
+          if (b && x >= b.x && x <= b.x + b.w && y >= b.y && y <= b.y + b.h) {
+            return i;
+          }
+        }
+        return -1;
+      }, [shapes]);
+      const draw = React105.useCallback(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+        const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+        canvas.width = Math.max(1, Math.floor(width * dpr));
+        canvas.height = Math.max(1, Math.floor(height * dpr));
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, width, height);
+        if (backgroundColor) {
+          ctx.fillStyle = backgroundColor;
+          ctx.fillRect(0, 0, width, height);
+        }
+        for (const shape of shapes) {
+          drawShape(ctx, shape, width, height);
+        }
+      }, [width, height, backgroundColor, shapes]);
+      React105.useEffect(() => {
+        draw();
+      }, [draw]);
+      React105.useEffect(() => {
+        if (!animate) return;
+        const loop = () => {
+          draw();
+          animRef.current = requestAnimationFrame(loop);
+        };
+        animRef.current = requestAnimationFrame(loop);
+        return () => cancelAnimationFrame(animRef.current);
+      }, [animate, draw]);
+      const handlePointerMove = React105.useCallback(
+        (e) => {
+          if (!interactive) return;
+          const idx = findShapeAt(e.clientX, e.clientY);
+          if (idx !== hoverIndexRef.current) {
+            hoverIndexRef.current = idx;
+            if (idx >= 0) {
+              const shape = shapes[idx];
+              const payload = { id: shape.id, type: shape.type, index: idx };
+              if (onShapeHover) onShapeHover(payload);
+              else if (eventBus) eventBus.emit(`UI:SHAPE_HOVER`, payload);
+            }
+          }
+        },
+        [interactive, onShapeHover, eventBus, findShapeAt, shapes]
+      );
+      const handleClick = React105.useCallback(
+        (e) => {
+          if (!interactive) return;
+          const idx = findShapeAt(e.clientX, e.clientY);
+          if (idx >= 0) {
+            const shape = shapes[idx];
+            const payload = { id: shape.id, type: shape.type, index: idx };
+            if (onShapeClick) onShapeClick(payload);
+            else if (eventBus) eventBus.emit(`UI:SHAPE_CLICK`, payload);
+          }
+        },
+        [interactive, onShapeClick, eventBus, findShapeAt, shapes]
+      );
+      if (isLoading || error) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-center rounded border border-border bg-surface",
+              className
+            ),
+            style: { width, height },
+            children: error ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-destructive", children: error.message }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Loading canvas\u2026" })
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          className: cn("block touch-none rounded border border-border", className),
+          style: { width, height },
+          onClick: handleClick,
+          onPointerMove: handlePointerMove
+        }
+      );
+    };
+  }
+});
 
 // components/core/atoms/index.ts
 var init_atoms = __esm({
@@ -21941,91 +22033,6 @@ var init_ComponentPatterns = __esm({
     AlertPattern.displayName = "AlertPattern";
   }
 });
-function parseValue(value) {
-  if (value === "" || value == null) return { num: 0, prefix: "", suffix: "", decimals: 0 };
-  const match = String(value).match(/^([^0-9]*)([0-9]+(?:\.[0-9]+)?)(.*)$/);
-  if (!match) {
-    return { num: 0, prefix: "", suffix: String(value), decimals: 0 };
-  }
-  const numStr = match[2];
-  const decimalIdx = numStr.indexOf(".");
-  const decimals = decimalIdx >= 0 ? numStr.length - decimalIdx - 1 : 0;
-  return {
-    prefix: match[1],
-    num: parseFloat(numStr),
-    suffix: match[3],
-    decimals
-  };
-}
-var AnimatedCounter;
-var init_AnimatedCounter = __esm({
-  "components/core/molecules/AnimatedCounter.tsx"() {
-    "use client";
-    init_cn();
-    init_Box();
-    init_Typography();
-    AnimatedCounter = ({
-      value,
-      label,
-      duration = 1500,
-      className
-    }) => {
-      const ref = React105.useRef(null);
-      const [displayValue, setDisplayValue] = React105.useState("0");
-      const [hasAnimated, setHasAnimated] = React105.useState(false);
-      const animate = React105.useCallback(() => {
-        const { num: num2, prefix, suffix, decimals } = parseValue(value);
-        if (num2 === 0) {
-          setDisplayValue(String(value));
-          return;
-        }
-        const startTime = performance.now();
-        const tick = (now2) => {
-          const elapsed = now2 - startTime;
-          const progress = Math.min(elapsed / duration, 1);
-          const eased = 1 - Math.pow(1 - progress, 3);
-          const current = eased * num2;
-          setDisplayValue(`${prefix}${current.toFixed(decimals)}${suffix}`);
-          if (progress < 1) {
-            requestAnimationFrame(tick);
-          } else {
-            setDisplayValue(String(value));
-          }
-        };
-        requestAnimationFrame(tick);
-      }, [value, duration]);
-      React105.useEffect(() => {
-        if (hasAnimated) return;
-        const el = ref.current;
-        if (!el) return;
-        const observer2 = new IntersectionObserver(
-          (entries) => {
-            if (entries[0].isIntersecting) {
-              setHasAnimated(true);
-              animate();
-              observer2.disconnect();
-            }
-          },
-          { threshold: 0.3 }
-        );
-        observer2.observe(el);
-        return () => observer2.disconnect();
-      }, [hasAnimated, animate]);
-      return /* @__PURE__ */ jsxRuntime.jsxs(Box, { ref, className: cn("flex flex-col items-center gap-1 p-4", className), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Typography,
-          {
-            variant: "h2",
-            className: "text-primary font-bold tabular-nums",
-            children: hasAnimated ? displayValue : "0"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "muted", className: "text-center", children: label })
-      ] });
-    };
-    AnimatedCounter.displayName = "AnimatedCounter";
-  }
-});
 var AuthLayout;
 var init_AuthLayout = __esm({
   "components/marketing/templates/AuthLayout.tsx"() {
@@ -22994,10 +23001,107 @@ var init_BehaviorView = __esm({
     BehaviorView.displayName = "BehaviorView";
   }
 });
+var BiologyCanvas;
+var init_BiologyCanvas = __esm({
+  "components/learning/molecules/BiologyCanvas.tsx"() {
+    "use client";
+    init_atoms();
+    init_Stack();
+    init_LearningCanvas();
+    BiologyCanvas = ({
+      className,
+      width = 600,
+      height = 400,
+      title,
+      backgroundColor,
+      nodes = [],
+      edges = [],
+      shapes = [],
+      interactive = false,
+      animate = false,
+      onShapeClick,
+      isLoading,
+      error
+    }) => {
+      const derivedShapes = React105.useMemo(() => {
+        const out = [];
+        const nodeById = /* @__PURE__ */ new Map();
+        for (const n of nodes) {
+          if (n.id) nodeById.set(n.id, n);
+        }
+        for (const e of edges) {
+          const a = nodeById.get(e.from);
+          const b = nodeById.get(e.to);
+          if (!a || !b) continue;
+          out.push({
+            type: "line",
+            x1: a.x,
+            y1: a.y,
+            x2: b.x,
+            y2: b.y,
+            color: e.color ?? "#9ca3af",
+            lineWidth: 2
+          });
+          if (e.label) {
+            out.push({
+              type: "text",
+              x: (a.x + b.x) / 2 + 4,
+              y: (a.y + b.y) / 2 - 4,
+              text: e.label,
+              color: "#374151",
+              fontSize: 11
+            });
+          }
+        }
+        for (const n of nodes) {
+          out.push({
+            type: "circle",
+            x: n.x,
+            y: n.y,
+            radius: n.radius ?? 16,
+            color: n.color ?? "#16a34a",
+            fill: `${n.color ?? "#16a34a"}33`,
+            id: n.id
+          });
+          if (n.label) {
+            out.push({
+              type: "text",
+              x: n.x,
+              y: n.y + (n.radius ?? 16) + 14,
+              text: n.label,
+              color: "#111827",
+              fontSize: 12,
+              align: "center"
+            });
+          }
+        }
+        out.push(...shapes);
+        return out;
+      }, [nodes, edges, shapes]);
+      return /* @__PURE__ */ jsxRuntime.jsx(Card, { className, children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", children: title }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LearningCanvas,
+          {
+            width,
+            height,
+            backgroundColor,
+            shapes: derivedShapes,
+            interactive,
+            animate,
+            onShapeClick,
+            isLoading,
+            error
+          }
+        )
+      ] }) });
+    };
+  }
+});
 
-// node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/katex.min.css
+// node_modules/katex/dist/katex.min.css
 var init_katex_min = __esm({
-  "node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/katex.min.css"() {
+  "node_modules/katex/dist/katex.min.css"() {
   }
 });
 var Tabs;
@@ -27340,129 +27444,6 @@ var init_Breadcrumb = __esm({
     Breadcrumb.displayName = "Breadcrumb";
   }
 });
-function useSafeEventBus2() {
-  try {
-    return useEventBus();
-  } catch {
-    return { emit: () => {
-    }, on: () => () => {
-    }, once: () => {
-    } };
-  }
-}
-var log6, lookStyles4, ButtonGroup;
-var init_ButtonGroup = __esm({
-  "components/core/molecules/ButtonGroup.tsx"() {
-    "use client";
-    init_cn();
-    init_atoms();
-    init_useEventBus();
-    log6 = logger.createLogger("almadar:ui:button-group");
-    lookStyles4 = {
-      "right-aligned-buttons": "",
-      "floating-bar": "fixed bottom-section left-1/2 -translate-x-1/2 shadow-elevation-toast bg-card p-card-sm rounded-container",
-      "inline-row": "gap-2 inline-flex",
-      "dropdown-menu": "[&>button:not(:first-child)]:hidden",
-      "command-palette-trigger": "[&>button:not(:first-child)]:hidden"
-    };
-    ButtonGroup = ({
-      children,
-      primary,
-      secondary,
-      variant = "default",
-      orientation = "horizontal",
-      className,
-      // Filter-group pattern props (entity and filters are used for schema-driven filtering)
-      entity: _entity,
-      filters,
-      look = "right-aligned-buttons"
-    }) => {
-      const eventBus = useSafeEventBus2();
-      const variantClasses2 = {
-        default: "gap-0",
-        segmented: "gap-0 [&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg [&>button:not(:first-child)]:border-l-0",
-        toggle: "gap-0 [&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg [&>button:not(:first-child)]:border-l-0"
-      };
-      const orientationClasses = {
-        horizontal: "flex-row",
-        vertical: "flex-col [&>button:first-child]:rounded-t-lg [&>button:last-child]:rounded-b-lg [&>button:not(:first-child)]:border-t-0 [&>button:not(:first-child)]:border-l"
-      };
-      const handleActionClick = (action) => {
-        if (action.event) {
-          eventBus.emit("UI:DISPATCH", { event: action.event });
-        }
-        if (action.navigatesTo) {
-          eventBus.emit("UI:NAVIGATE", { url: action.navigatesTo });
-        }
-      };
-      const renderFormActions = () => {
-        const buttons = [];
-        if (secondary) {
-          secondary.forEach((action, index) => {
-            buttons.push(
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Button,
-                {
-                  type: action.actionType === "submit" ? "submit" : "button",
-                  variant: action.variant || "ghost",
-                  onClick: () => handleActionClick(action),
-                  children: action.label
-                },
-                `secondary-${index}`
-              )
-            );
-          });
-        }
-        if (primary) {
-          const isSubmit = primary.actionType === "submit";
-          buttons.push(
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                type: isSubmit ? "submit" : "button",
-                variant: primary.variant || "primary",
-                onClick: () => handleActionClick(primary),
-                "data-testid": isSubmit ? "form-submit" : void 0,
-                children: primary.label
-              },
-              "primary"
-            )
-          );
-        }
-        return buttons;
-      };
-      const renderFilters = () => {
-        if (!filters || filters.length === 0) return null;
-        return filters.map((filter, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "ghost",
-            onClick: () => {
-              log6.debug("Filter clicked", { field: filter.field });
-            },
-            children: filter.label
-          },
-          `filter-${filter.field}-${index}`
-        ));
-      };
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "inline-flex gap-2",
-            variantClasses2[variant],
-            orientationClasses[orientation],
-            lookStyles4[look],
-            className
-          ),
-          role: "group",
-          children: children || renderFilters() || renderFormActions()
-        }
-      );
-    };
-    ButtonGroup.displayName = "ButtonGroup";
-  }
-});
 function dayWindowForViewport(width) {
   if (width <= 640) return 1;
   if (width <= 1024) return 3;
@@ -28205,7 +28186,7 @@ var init_CardGrid = __esm({
     CardGrid.displayName = "CardGrid";
   }
 });
-function useSafeEventBus3() {
+function useSafeEventBus2() {
   try {
     return useEventBus();
   } catch {
@@ -28241,7 +28222,7 @@ var init_Carousel = __esm({
       const [activeIndex, setActiveIndex] = React105.useState(0);
       const scrollRef = React105.useRef(null);
       const autoPlayRef = React105.useRef(null);
-      const eventBus = useSafeEventBus3();
+      const eventBus = useSafeEventBus2();
       const { t } = hooks.useTranslate();
       const safeItems = items ?? [];
       const totalSlides = safeItems.length;
@@ -29489,6 +29470,122 @@ var init_ChatBar = __esm({
     ChatBar.displayName = "ChatBar";
   }
 });
+var ChemistryCanvas;
+var init_ChemistryCanvas = __esm({
+  "components/learning/molecules/ChemistryCanvas.tsx"() {
+    "use client";
+    init_atoms();
+    init_Stack();
+    init_LearningCanvas();
+    ChemistryCanvas = ({
+      className,
+      width = 600,
+      height = 400,
+      title,
+      backgroundColor,
+      atoms = [],
+      bonds = [],
+      arrows = [],
+      shapes = [],
+      interactive = false,
+      animate = false,
+      onShapeClick,
+      isLoading,
+      error
+    }) => {
+      const derivedShapes = React105.useMemo(() => {
+        const out = [];
+        const atomById = /* @__PURE__ */ new Map();
+        for (const a of atoms) {
+          if (a.id) atomById.set(a.id, a);
+        }
+        for (const b of bonds) {
+          const a = atomById.get(b.from);
+          const c = atomById.get(b.to);
+          if (!a || !c) continue;
+          const color = b.color ?? "#6b7280";
+          const strokeWidth = b.type === "double" ? 4 : b.type === "triple" ? 6 : 2;
+          out.push({
+            type: "line",
+            x1: a.x,
+            y1: a.y,
+            x2: c.x,
+            y2: c.y,
+            color,
+            lineWidth: strokeWidth
+          });
+        }
+        for (const a of arrows) {
+          const angle = (a.angle ?? 0) * (Math.PI / 180);
+          const len = a.length ?? 60;
+          const x2 = a.x + Math.cos(angle) * len;
+          const y2 = a.y + Math.sin(angle) * len;
+          out.push({
+            type: "arrow",
+            x1: a.x,
+            y1: a.y,
+            x2,
+            y2,
+            color: a.color ?? "#dc2626",
+            lineWidth: 2
+          });
+          if (a.label) {
+            out.push({
+              type: "text",
+              x: (a.x + x2) / 2,
+              y: (a.y + y2) / 2 - 10,
+              text: a.label,
+              color: "#111827",
+              fontSize: 12,
+              align: "center"
+            });
+          }
+        }
+        for (const a of atoms) {
+          out.push({
+            type: "circle",
+            x: a.x,
+            y: a.y,
+            radius: a.radius ?? 14,
+            color: a.color ?? "#2563eb",
+            fill: a.color ?? "#2563eb",
+            id: a.id
+          });
+          if (a.element) {
+            out.push({
+              type: "text",
+              x: a.x,
+              y: a.y,
+              text: a.element,
+              color: "#ffffff",
+              fontSize: 12,
+              align: "center"
+            });
+          }
+        }
+        out.push(...shapes);
+        return out;
+      }, [atoms, bonds, arrows, shapes]);
+      return /* @__PURE__ */ jsxRuntime.jsx(Card, { className, children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", children: title }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LearningCanvas,
+          {
+            width,
+            height,
+            backgroundColor,
+            shapes: derivedShapes,
+            interactive,
+            animate,
+            onShapeClick,
+            isLoading,
+            error
+          }
+        )
+      ] }) });
+    };
+  }
+});
 var CodeRunnerPanel;
 var init_CodeRunnerPanel = __esm({
   "components/core/organisms/CodeRunnerPanel.tsx"() {
@@ -31563,7 +31660,7 @@ function DataGrid({
       /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
-          className: cn("grid", gapStyles5[gap], scrollX ? "grid-flow-col overflow-x-auto" : colsClass, lookStyles5[look], className),
+          className: cn("grid", gapStyles5[gap], scrollX ? "grid-flow-col overflow-x-auto" : colsClass, lookStyles4[look], className),
           style: scrollX ? { gridAutoFlow: "column", gridAutoColumns: `minmax(${minCardWidth}px, 1fr)` } : gridTemplateColumns ? { gridTemplateColumns } : void 0,
           children: data.map((item, index) => {
             const itemData = item;
@@ -31758,7 +31855,7 @@ function DataGrid({
     ] })
   );
 }
-var dataGridLog, BADGE_VARIANTS, gapStyles5, lookStyles5;
+var dataGridLog, BADGE_VARIANTS, gapStyles5, lookStyles4;
 var init_DataGrid = __esm({
   "components/core/molecules/DataGrid.tsx"() {
     "use client";
@@ -31793,7 +31890,7 @@ var init_DataGrid = __esm({
       lg: "gap-6",
       xl: "gap-8"
     };
-    lookStyles5 = {
+    lookStyles4 = {
       dense: "gap-2 [&>*]:p-card-sm",
       spacious: "gap-8 [&>*]:p-card-lg",
       striped: "[&>*:nth-child(even)]:bg-muted/30",
@@ -32220,6 +32317,133 @@ var init_DataList = __esm({
     DataList.displayName = "DataList";
   }
 });
+var FormSection, FormLayout, FormActions;
+var init_FormSection = __esm({
+  "components/core/molecules/FormSection.tsx"() {
+    "use client";
+    init_cn();
+    init_atoms();
+    init_Box();
+    init_Typography();
+    init_Button();
+    init_Stack();
+    init_Icon();
+    init_useEventBus();
+    FormSection = ({
+      title,
+      description,
+      children,
+      collapsible = false,
+      defaultCollapsed = false,
+      card = false,
+      columns = 1,
+      className
+    }) => {
+      const [collapsed, setCollapsed] = React105__namespace.default.useState(defaultCollapsed);
+      const { t } = hooks.useTranslate();
+      const eventBus = useEventBus();
+      const gridClass = {
+        1: "grid-cols-1",
+        2: "grid-cols-1 md:grid-cols-2",
+        3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+      }[columns];
+      React105__namespace.default.useCallback(() => {
+        if (collapsible) {
+          setCollapsed((prev) => !prev);
+          eventBus.emit("UI:TOGGLE_COLLAPSE", { collapsed: !collapsed });
+        }
+      }, [collapsible, collapsed, eventBus]);
+      const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        (title || description) && /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", className: "mb-4", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsxs(
+            HStack,
+            {
+              justify: "between",
+              align: "center",
+              className: cn(collapsible && "cursor-pointer"),
+              action: collapsible ? "TOGGLE_COLLAPSE" : void 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", weight: "semibold", children: title }),
+                collapsible && /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    action: "TOGGLE_COLLAPSE",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      Icon,
+                      {
+                        icon: LucideIcons2.ChevronDown,
+                        size: "sm",
+                        className: cn(
+                          "text-muted-foreground transition-transform",
+                          collapsed && "rotate-180"
+                        )
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          description && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "secondary", children: description })
+        ] }),
+        (!collapsible || !collapsed) && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("grid gap-4", gridClass), children })
+      ] });
+      if (card) {
+        return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("p-6", className), children: content });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className, children: content });
+    };
+    FormSection.displayName = "FormSection";
+    FormLayout = ({
+      children,
+      dividers = true,
+      className
+    }) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        VStack,
+        {
+          gap: "lg",
+          className: cn(
+            dividers && "[&>*+*]:pt-8 [&>*+*]:border-t [&>*+*]:border-border",
+            className
+          ),
+          children
+        }
+      );
+    };
+    FormLayout.displayName = "FormLayout";
+    FormActions = ({
+      children,
+      sticky = false,
+      align = "right",
+      className
+    }) => {
+      const alignClass2 = {
+        left: "justify-start",
+        right: "justify-end",
+        between: "justify-between",
+        center: "justify-center"
+      }[align];
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        HStack,
+        {
+          gap: "sm",
+          align: "center",
+          className: cn(
+            "pt-6 border-t border-border",
+            alignClass2,
+            sticky && "sticky bottom-0 bg-card py-4 -mx-6 px-6 shadow-[0_-4px_6px_-1px_rgb(0,0,0,0.05)]",
+            className
+          ),
+          children
+        }
+      );
+    };
+    FormActions.displayName = "FormActions";
+  }
+});
 function fileIcon(name) {
   const ext = name.split(".").pop()?.toLowerCase() ?? "";
   switch (ext) {
@@ -32381,6 +32605,129 @@ var init_FormField = __esm({
     FormField.displayName = "FormField";
   }
 });
+function useSafeEventBus3() {
+  try {
+    return useEventBus();
+  } catch {
+    return { emit: () => {
+    }, on: () => () => {
+    }, once: () => {
+    } };
+  }
+}
+var log6, lookStyles5, ButtonGroup;
+var init_ButtonGroup = __esm({
+  "components/core/molecules/ButtonGroup.tsx"() {
+    "use client";
+    init_cn();
+    init_atoms();
+    init_useEventBus();
+    log6 = logger.createLogger("almadar:ui:button-group");
+    lookStyles5 = {
+      "right-aligned-buttons": "",
+      "floating-bar": "fixed bottom-section left-1/2 -translate-x-1/2 shadow-elevation-toast bg-card p-card-sm rounded-container",
+      "inline-row": "gap-2 inline-flex",
+      "dropdown-menu": "[&>button:not(:first-child)]:hidden",
+      "command-palette-trigger": "[&>button:not(:first-child)]:hidden"
+    };
+    ButtonGroup = ({
+      children,
+      primary,
+      secondary,
+      variant = "default",
+      orientation = "horizontal",
+      className,
+      // Filter-group pattern props (entity and filters are used for schema-driven filtering)
+      entity: _entity,
+      filters,
+      look = "right-aligned-buttons"
+    }) => {
+      const eventBus = useSafeEventBus3();
+      const variantClasses2 = {
+        default: "gap-0",
+        segmented: "gap-0 [&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg [&>button:not(:first-child)]:border-l-0",
+        toggle: "gap-0 [&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg [&>button:not(:first-child)]:border-l-0"
+      };
+      const orientationClasses = {
+        horizontal: "flex-row",
+        vertical: "flex-col [&>button:first-child]:rounded-t-lg [&>button:last-child]:rounded-b-lg [&>button:not(:first-child)]:border-t-0 [&>button:not(:first-child)]:border-l"
+      };
+      const handleActionClick = (action) => {
+        if (action.event) {
+          eventBus.emit("UI:DISPATCH", { event: action.event });
+        }
+        if (action.navigatesTo) {
+          eventBus.emit("UI:NAVIGATE", { url: action.navigatesTo });
+        }
+      };
+      const renderFormActions = () => {
+        const buttons = [];
+        if (secondary) {
+          secondary.forEach((action, index) => {
+            buttons.push(
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  type: action.actionType === "submit" ? "submit" : "button",
+                  variant: action.variant || "ghost",
+                  onClick: () => handleActionClick(action),
+                  children: action.label
+                },
+                `secondary-${index}`
+              )
+            );
+          });
+        }
+        if (primary) {
+          const isSubmit = primary.actionType === "submit";
+          buttons.push(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                type: isSubmit ? "submit" : "button",
+                variant: primary.variant || "primary",
+                onClick: () => handleActionClick(primary),
+                "data-testid": isSubmit ? "form-submit" : void 0,
+                children: primary.label
+              },
+              "primary"
+            )
+          );
+        }
+        return buttons;
+      };
+      const renderFilters = () => {
+        if (!filters || filters.length === 0) return null;
+        return filters.map((filter, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            onClick: () => {
+              log6.debug("Filter clicked", { field: filter.field });
+            },
+            children: filter.label
+          },
+          `filter-${filter.field}-${index}`
+        ));
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "inline-flex gap-2",
+            variantClasses2[variant],
+            orientationClasses[orientation],
+            lookStyles5[look],
+            className
+          ),
+          role: "group",
+          children: children || renderFilters() || renderFormActions()
+        }
+      );
+    };
+    ButtonGroup.displayName = "ButtonGroup";
+  }
+});
 var resolveFilterType, lookStyles6, FilterGroup;
 var init_FilterGroup = __esm({
   "components/core/molecules/FilterGroup.tsx"() {
@@ -34858,6 +35205,234 @@ var init_ProgressDots = __esm({
     ProgressDots.displayName = "ProgressDots";
   }
 });
+var MathCanvas;
+var init_MathCanvas = __esm({
+  "components/learning/molecules/MathCanvas.tsx"() {
+    "use client";
+    init_atoms();
+    init_Stack();
+    init_LearningCanvas();
+    MathCanvas = ({
+      className,
+      width = 600,
+      height = 400,
+      title,
+      xMin = -10,
+      xMax = 10,
+      yMin = -10,
+      yMax = 10,
+      showAxes = true,
+      showGrid = true,
+      gridStep = 1,
+      curves = [],
+      points = [],
+      vectors = [],
+      shapes = [],
+      interactive = false,
+      animate = false,
+      onShapeClick,
+      isLoading,
+      error
+    }) => {
+      const derivedShapes = React105.useMemo(() => {
+        const out = [];
+        const margin = 24;
+        const plotW = width - margin * 2;
+        const plotH = height - margin * 2;
+        const mapX = (x) => margin + (x - xMin) / (xMax - xMin) * plotW;
+        const mapY = (y) => height - (margin + (y - yMin) / (yMax - yMin) * plotH);
+        if (showGrid) {
+          for (let x = Math.ceil(xMin / gridStep) * gridStep; x <= xMax; x += gridStep) {
+            const px = mapX(x);
+            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: "#e5e7eb", lineWidth: 1 });
+          }
+          for (let y = Math.ceil(yMin / gridStep) * gridStep; y <= yMax; y += gridStep) {
+            const py = mapY(y);
+            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: "#e5e7eb", lineWidth: 1 });
+          }
+        }
+        if (showAxes) {
+          const xAxisY = Math.max(margin, Math.min(height - margin, mapY(0)));
+          const yAxisX = Math.max(margin, Math.min(width - margin, mapX(0)));
+          out.push({ type: "line", x1: margin, y1: xAxisY, x2: width - margin, y2: xAxisY, color: "#374151", lineWidth: 2 });
+          out.push({ type: "line", x1: yAxisX, y1: margin, x2: yAxisX, y2: height - margin, color: "#374151", lineWidth: 2 });
+        }
+        for (const curve of curves) {
+          if (!curve.samples || curve.samples.length < 2) continue;
+          for (let i = 1; i < curve.samples.length; i++) {
+            const a = curve.samples[i - 1];
+            const b = curve.samples[i];
+            if (a.x < xMin || a.x > xMax || b.x < xMin || b.x > xMax) continue;
+            out.push({
+              type: "line",
+              x1: mapX(a.x),
+              y1: mapY(a.y),
+              x2: mapX(b.x),
+              y2: mapY(b.y),
+              color: curve.color ?? "#2563eb",
+              lineWidth: 2
+            });
+          }
+        }
+        for (const p2 of points) {
+          if (p2.x < xMin || p2.x > xMax || p2.y < yMin || p2.y > yMax) continue;
+          out.push({
+            type: "circle",
+            x: mapX(p2.x),
+            y: mapY(p2.y),
+            radius: p2.radius ?? 4,
+            color: p2.color ?? "#dc2626",
+            fill: p2.color ?? "#dc2626"
+          });
+          if (p2.label) {
+            out.push({ type: "text", x: mapX(p2.x) + 8, y: mapY(p2.y) - 8, text: p2.label, color: "#111827", fontSize: 12 });
+          }
+        }
+        for (const v of vectors) {
+          if (v.x < xMin || v.x > xMax || v.y < yMin || v.y > yMax) continue;
+          const x1 = mapX(v.x);
+          const y1 = mapY(v.y);
+          const x2 = mapX(v.x + v.vx);
+          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(...shapes);
+        return out;
+      }, [width, height, xMin, xMax, yMin, yMax, showAxes, showGrid, gridStep, curves, points, vectors, shapes]);
+      return /* @__PURE__ */ jsxRuntime.jsx(Card, { className, children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", children: title }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LearningCanvas,
+          {
+            width,
+            height,
+            shapes: derivedShapes,
+            interactive,
+            animate,
+            onShapeClick,
+            isLoading,
+            error
+          }
+        )
+      ] }) });
+    };
+  }
+});
+var PhysicsCanvas;
+var init_PhysicsCanvas = __esm({
+  "components/learning/molecules/PhysicsCanvas.tsx"() {
+    "use client";
+    init_atoms();
+    init_Stack();
+    init_LearningCanvas();
+    PhysicsCanvas = ({
+      className,
+      width = 600,
+      height = 400,
+      title,
+      backgroundColor,
+      bodies = [],
+      constraints = [],
+      showVelocity = true,
+      showForces = false,
+      velocityScale = 20,
+      forceScale = 20,
+      shapes = [],
+      interactive = false,
+      animate = false,
+      onShapeClick,
+      isLoading,
+      error
+    }) => {
+      const derivedShapes = React105.useMemo(() => {
+        const out = [];
+        const bodyById = /* @__PURE__ */ new Map();
+        for (const b of bodies) {
+          if (b.id) bodyById.set(b.id, b);
+        }
+        for (const c of constraints) {
+          const a = bodyById.get(c.from);
+          const b = bodyById.get(c.to);
+          if (!a || !b) continue;
+          out.push({
+            type: "line",
+            x1: a.x,
+            y1: a.y,
+            x2: b.x,
+            y2: b.y,
+            color: c.color ?? "#9ca3af",
+            lineWidth: 2
+          });
+        }
+        for (const b of bodies) {
+          out.push({
+            type: "circle",
+            x: b.x,
+            y: b.y,
+            radius: b.radius ?? 12,
+            color: b.color ?? "#2563eb",
+            fill: b.color ?? "#2563eb",
+            id: b.id
+          });
+          if (b.label) {
+            out.push({
+              type: "text",
+              x: b.x + (b.radius ?? 12) + 6,
+              y: b.y - (b.radius ?? 12) - 6,
+              text: b.label,
+              color: "#111827",
+              fontSize: 12
+            });
+          }
+          if (showVelocity && b.vx != null && b.vy != null && (b.vx !== 0 || b.vy !== 0)) {
+            out.push({
+              type: "arrow",
+              x1: b.x,
+              y1: b.y,
+              x2: b.x + b.vx * velocityScale,
+              y2: b.y + b.vy * velocityScale,
+              color: "#16a34a",
+              lineWidth: 2
+            });
+          }
+          if (showForces && b.fx != null && b.fy != null && (b.fx !== 0 || b.fy !== 0)) {
+            out.push({
+              type: "arrow",
+              x1: b.x,
+              y1: b.y,
+              x2: b.x + b.fx * forceScale,
+              y2: b.y + b.fy * forceScale,
+              color: "#dc2626",
+              lineWidth: 2
+            });
+          }
+        }
+        out.push(...shapes);
+        return out;
+      }, [bodies, constraints, showVelocity, showForces, velocityScale, forceScale, shapes]);
+      return /* @__PURE__ */ jsxRuntime.jsx(Card, { className, children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", children: title }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LearningCanvas,
+          {
+            width,
+            height,
+            backgroundColor,
+            shapes: derivedShapes,
+            interactive,
+            animate,
+            onShapeClick,
+            isLoading,
+            error
+          }
+        )
+      ] }) });
+    };
+  }
+});
 function resolveNodeColor(node, groups) {
   if (node.color) return node.color;
   if (node.group) {
@@ -35229,13 +35804,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect74, useRef: useRef76, useCallback: useCallback112, useState: useState107 } = React105__namespace.default;
+      const { useEffect: useEffect75, useRef: useRef77, useCallback: useCallback112, useState: useState107 } = React105__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef76({ centerLat, centerLng, zoom });
-        useEffect74(() => {
+        const prevRef = useRef77({ centerLat, centerLng, zoom });
+        useEffect75(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -35246,7 +35821,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect74(() => {
+        useEffect75(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -43549,7 +44124,7 @@ function getGroupColor(group, groups) {
   const idx = groups.indexOf(group);
   return GROUP_COLORS2[idx % GROUP_COLORS2.length];
 }
-function resolveColor2(color, el) {
+function resolveColor3(color, el) {
   const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color.trim());
   if (!m) return color;
   const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
@@ -43810,7 +44385,7 @@ var init_GraphCanvas = __esm({
         const w = logicalW;
         const h = height;
         const nodes = nodesRef.current;
-        const accentColor = resolveColor2("var(--color-accent)", canvas);
+        const accentColor = resolveColor3("var(--color-accent)", canvas);
         const dpr = typeof window !== "undefined" && window.devicePixelRatio || 1;
         ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         ctx.clearRect(0, 0, w, h);
@@ -43849,7 +44424,7 @@ var init_GraphCanvas = __esm({
         ctx.globalAlpha = 1;
         for (const node of nodes) {
           const size = node.size || 8;
-          const color = resolveColor2(node.color || getGroupColor(node.group, groups), canvas);
+          const color = resolveColor3(node.color || getGroupColor(node.group, groups), canvas);
           const isHovered = hoveredNode === node.id;
           const isSelected = selectedNodeId !== void 0 && node.id === selectedNodeId;
           ctx.globalAlpha = hoveredNode && !neighbors.has(node.id) ? 0.2 : 1;
@@ -50747,6 +51322,7 @@ var init_component_registry_generated = __esm({
     init_BattleBoard();
     init_BattleTemplate();
     init_BehaviorView();
+    init_BiologyCanvas();
     init_BloomQuizBlock();
     init_BoardgameBoard();
     init_BookChapterView();
@@ -50758,7 +51334,6 @@ var init_component_registry_generated = __esm({
     init_BranchingLogicBuilder();
     init_Breadcrumb();
     init_BuilderBoard();
-    init_ButtonGroup();
     init_CTABanner();
     init_CalendarGrid();
     init_Canvas2D();
@@ -50777,6 +51352,7 @@ var init_component_registry_generated = __esm({
     init_ChartLegend();
     init_ChatBar();
     init_Checkbox();
+    init_ChemistryCanvas();
     init_ChoiceButton();
     init_CityBuilderBoard();
     init_CityBuilderTemplate();
@@ -50835,9 +51411,9 @@ var init_component_registry_generated = __esm({
     init_FlipContainer();
     init_FloatingActionButton();
     init_Form();
+    init_FormSection();
     init_FormField();
     init_FormSectionHeader();
-    init_GameAudioProvider();
     init_GameAudioToggle();
     init_GameCard();
     init_GameHud();
@@ -50868,6 +51444,7 @@ var init_component_registry_generated = __esm({
     init_JazariStateMachine();
     init_LandingPageTemplate();
     init_LawReferenceTooltip();
+    init_LearningCanvas();
     init_Lightbox();
     init_LikertScale();
     init_LineChart();
@@ -50876,9 +51453,11 @@ var init_component_registry_generated = __esm({
     init_MapView();
     init_MarkdownContent();
     init_MarketingFooter();
+    init_MarketingStatCard();
     init_MasterDetail();
     init_MasterDetailLayout();
     init_MatchPuzzleBoard();
+    init_MathCanvas();
     init_MatrixQuestion();
     init_MediaGallery();
     init_Menu();
@@ -50897,6 +51476,7 @@ var init_component_registry_generated = __esm({
     init_PageHeader();
     init_Pagination();
     init_PatternTile();
+    init_PhysicsCanvas();
     init_PinballBoard();
     init_PirateBoard();
     init_PlatformerBoard();
@@ -51073,6 +51653,7 @@ var init_component_registry_generated = __esm({
       "BattleBoard": BattleBoard,
       "BattleTemplate": BattleTemplate,
       "BehaviorView": BehaviorView,
+      "BiologyCanvas": BiologyCanvas,
       "BloomQuizBlock": BloomQuizBlock,
       "BoardgameBoard": BoardgameBoard,
       "BookChapterView": BookChapterView,
@@ -51086,7 +51667,6 @@ var init_component_registry_generated = __esm({
       "Breadcrumb": Breadcrumb,
       "BuilderBoard": BuilderBoard,
       "Button": ButtonPattern,
-      "ButtonGroup": ButtonGroup,
       "ButtonPattern": ButtonPattern,
       "CTABanner": CTABanner,
       "CalendarGrid": CalendarGrid,
@@ -51106,6 +51686,7 @@ var init_component_registry_generated = __esm({
       "ChartLegend": ChartLegend,
       "ChatBar": ChatBar,
       "Checkbox": Checkbox,
+      "ChemistryCanvas": ChemistryCanvas,
       "ChoiceButton": ChoiceButton,
       "CityBuilderBoard": CityBuilderBoard,
       "CityBuilderTemplate": CityBuilderTemplate,
@@ -51166,9 +51747,10 @@ var init_component_registry_generated = __esm({
       "FlipContainer": FlipContainer,
       "FloatingActionButton": FloatingActionButton,
       "Form": Form,
+      "FormActions": FormActions,
       "FormField": FormField,
+      "FormLayout": FormLayout,
       "FormSectionHeader": FormSectionHeader,
-      "GameAudioProvider": GameAudioProvider,
       "GameAudioToggle": GameAudioToggle,
       "GameBoard3D": GameBoard3D,
       "GameCanvas3D": GameCanvas3D,
@@ -51206,6 +51788,7 @@ var init_component_registry_generated = __esm({
       "LabelPattern": LabelPattern,
       "LandingPageTemplate": LandingPageTemplate,
       "LawReferenceTooltip": LawReferenceTooltip,
+      "LearningCanvas": LearningCanvas,
       "Lightbox": Lightbox,
       "LikertScale": LikertScale,
       "LineChart": LineChart2,
@@ -51214,9 +51797,11 @@ var init_component_registry_generated = __esm({
       "MapView": MapView,
       "MarkdownContent": MarkdownContent,
       "MarketingFooter": MarketingFooter,
+      "MarketingStatCard": MarketingStatCard,
       "MasterDetail": MasterDetail,
       "MasterDetailLayout": MasterDetailLayout,
       "MatchPuzzleBoard": MatchPuzzleBoard,
+      "MathCanvas": MathCanvas,
       "MatrixQuestion": MatrixQuestion,
       "MediaGallery": MediaGallery,
       "Menu": Menu,
@@ -51235,6 +51820,7 @@ var init_component_registry_generated = __esm({
       "PageHeader": PageHeader,
       "Pagination": Pagination,
       "PatternTile": PatternTile,
+      "PhysicsCanvas": PhysicsCanvas,
       "PinballBoard": PinballBoard,
       "PirateBoard": PirateBoard,
       "PlatformerBoard": PlatformerBoard,