@almadar/ui 5.77.0 → 5.79.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"() {
@@ -20151,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({
@@ -21636,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"() {
@@ -22689,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/katex/dist/katex.min.css
+// node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/katex.min.css
 var init_katex_min = __esm({
-  "node_modules/katex/dist/katex.min.css"() {
+  "node_modules/.pnpm/katex@0.16.47/node_modules/katex/dist/katex.min.css"() {
   }
 });
 var Tabs;
@@ -29061,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"() {
@@ -34680,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) {
@@ -35051,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);
@@ -35068,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);
@@ -43371,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();
@@ -43632,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);
@@ -43671,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;
@@ -50569,6 +51322,7 @@ var init_component_registry_generated = __esm({
     init_BattleBoard();
     init_BattleTemplate();
     init_BehaviorView();
+    init_BiologyCanvas();
     init_BloomQuizBlock();
     init_BoardgameBoard();
     init_BookChapterView();
@@ -50598,6 +51352,7 @@ var init_component_registry_generated = __esm({
     init_ChartLegend();
     init_ChatBar();
     init_Checkbox();
+    init_ChemistryCanvas();
     init_ChoiceButton();
     init_CityBuilderBoard();
     init_CityBuilderTemplate();
@@ -50689,6 +51444,7 @@ var init_component_registry_generated = __esm({
     init_JazariStateMachine();
     init_LandingPageTemplate();
     init_LawReferenceTooltip();
+    init_LearningCanvas();
     init_Lightbox();
     init_LikertScale();
     init_LineChart();
@@ -50697,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();
@@ -50718,6 +51476,7 @@ var init_component_registry_generated = __esm({
     init_PageHeader();
     init_Pagination();
     init_PatternTile();
+    init_PhysicsCanvas();
     init_PinballBoard();
     init_PirateBoard();
     init_PlatformerBoard();
@@ -50894,6 +51653,7 @@ var init_component_registry_generated = __esm({
       "BattleBoard": BattleBoard,
       "BattleTemplate": BattleTemplate,
       "BehaviorView": BehaviorView,
+      "BiologyCanvas": BiologyCanvas,
       "BloomQuizBlock": BloomQuizBlock,
       "BoardgameBoard": BoardgameBoard,
       "BookChapterView": BookChapterView,
@@ -50926,6 +51686,7 @@ var init_component_registry_generated = __esm({
       "ChartLegend": ChartLegend,
       "ChatBar": ChatBar,
       "Checkbox": Checkbox,
+      "ChemistryCanvas": ChemistryCanvas,
       "ChoiceButton": ChoiceButton,
       "CityBuilderBoard": CityBuilderBoard,
       "CityBuilderTemplate": CityBuilderTemplate,
@@ -51027,6 +51788,7 @@ var init_component_registry_generated = __esm({
       "LabelPattern": LabelPattern,
       "LandingPageTemplate": LandingPageTemplate,
       "LawReferenceTooltip": LawReferenceTooltip,
+      "LearningCanvas": LearningCanvas,
       "Lightbox": Lightbox,
       "LikertScale": LikertScale,
       "LineChart": LineChart2,
@@ -51035,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,
@@ -51056,6 +51820,7 @@ var init_component_registry_generated = __esm({
       "PageHeader": PageHeader,
       "Pagination": Pagination,
       "PatternTile": PatternTile,
+      "PhysicsCanvas": PhysicsCanvas,
       "PinballBoard": PinballBoard,
       "PirateBoard": PirateBoard,
       "PlatformerBoard": PlatformerBoard,