@almadar/ui 5.149.0 → 5.151.0

package/dist/components/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React77 from 'react';
-import React77__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, useState, useLayoutEffect, useId, Suspense, useSyncExternalStore, lazy } from 'react';
+import React77__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, useState, useLayoutEffect, useId, Suspense, lazy, useSyncExternalStore } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { EventBusContext, useTraitScopeChain, useCurrentPagePath, useGameAudioContextOptional, useEntitySchemaOptional, useEntityBindingSnapshot, useTraitScope, TraitScopeProvider } from '@almadar/ui/providers';
@@ -1081,7 +1081,7 @@ function useEventBus() {
       return {
         ...baseBus,
         emit: (type, payload, source) => {
-          if (typeof type === "string" && type.startsWith("UI:") && !type.slice(3).includes(".")) {
+          if (typeof type === "string" && type.startsWith("UI:") && !type.slice(3).includes(".") && !source?.trait) {
             scopeLog.warn("emit:bare-key-no-scope", { type });
           }
           baseBus.emit(type, payload, source);
@@ -8407,6 +8407,14 @@ function shapeBounds(shape) {
         w: shape.radius * 2 + 8,
         h: shape.radius * 2 + 8
       };
+    case "ellipse":
+      if (shape.x == null || shape.y == null || shape.width == null || shape.height == null) return null;
+      return {
+        x: shape.x - shape.width / 2 - 4,
+        y: shape.y - shape.height / 2 - 4,
+        w: shape.width + 8,
+        h: shape.height + 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 };
@@ -8440,13 +8448,14 @@ function drawArrowHead(ctx, x1, y1, x2, y2, size) {
   ctx.closePath();
   ctx.fill();
 }
-function drawShape(ctx, shape, width, height) {
+function drawShape(ctx, shape, width, height, allShapes) {
   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;
+  if (shape.dash) ctx.setLineDash([...DASH_PATTERNS[shape.dash]]);
   switch (shape.type) {
     case "grid": {
       const step = shape.step ?? 40;
@@ -8512,6 +8521,20 @@ function drawShape(ctx, shape, width, height) {
       ctx.stroke();
       break;
     }
+    case "ellipse": {
+      if (shape.x == null || shape.y == null || shape.width == null || shape.height == null) break;
+      const startAngle = (shape.startAngle ?? 0) * Math.PI / 180;
+      const endAngle = (shape.endAngle ?? 360) * Math.PI / 180;
+      ctx.beginPath();
+      ctx.ellipse(shape.x, shape.y, shape.width / 2, shape.height / 2, 0, startAngle, endAngle);
+      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) {
@@ -8558,21 +8581,153 @@ function drawShape(ctx, shape, width, height) {
       ctx.fillText(shape.text, shape.x, shape.y);
       break;
     }
+    case "venn-region": {
+      const resolveCircles = (ids) => (ids ?? []).flatMap((id) => {
+        const c = allShapes.find((s) => s.type === "circle" && s.id === id);
+        return c && c.x != null && c.y != null && c.radius != null ? [{ x: c.x, y: c.y, radius: c.radius }] : [];
+      });
+      const inside = resolveCircles(shape.inside);
+      if (inside.length === 0) break;
+      const outside = resolveCircles(shape.outside);
+      const off = document.createElement("canvas");
+      off.width = ctx.canvas.width;
+      off.height = ctx.canvas.height;
+      const octx = off.getContext("2d");
+      if (!octx) break;
+      octx.setTransform(ctx.getTransform());
+      for (const c of inside) {
+        const p = new Path2D();
+        p.arc(c.x, c.y, c.radius, 0, Math.PI * 2);
+        octx.clip(p);
+      }
+      octx.fillStyle = fill ?? stroke;
+      octx.fillRect(0, 0, width, height);
+      octx.globalCompositeOperation = "destination-out";
+      for (const c of outside) {
+        const p = new Path2D();
+        p.arc(c.x, c.y, c.radius, 0, Math.PI * 2);
+        octx.fill(p);
+      }
+      ctx.save();
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+      ctx.drawImage(off, 0, 0);
+      ctx.restore();
+      break;
+    }
   }
   ctx.restore();
 }
-var LearningCanvas;
+function readoutShapes(readouts, width) {
+  const out = [];
+  const chipH = 18;
+  const gap = 6;
+  let rightEdge = width - 6;
+  let rowY = 6;
+  for (const readout of readouts) {
+    const text = `${readout.label}: ${String(readout.value)}`;
+    const chipW = Math.min(170, Math.max(34, text.length * 6 + 12));
+    let chipX = rightEdge - chipW;
+    if (chipX < 4) {
+      rowY += chipH + 4;
+      rightEdge = width - 6;
+      chipX = rightEdge - chipW;
+    }
+    const color = readout.color ?? "#334155";
+    out.push({ type: "rect", x: chipX, y: rowY, width: chipW, height: chipH, color, fill: color });
+    out.push({
+      type: "text",
+      x: chipX + chipW / 2,
+      y: rowY + chipH / 2,
+      text,
+      color: "#ffffff",
+      fontSize: 10,
+      align: "center"
+    });
+    rightEdge = chipX - gap;
+  }
+  return out;
+}
+function traceShapes(panel, k, width, height) {
+  const w = panel.width ?? Math.round(width * 0.32);
+  const h = panel.height ?? Math.round(height * 0.28);
+  const x = panel.x ?? width - w - 8;
+  const y = panel.y ?? height - h - 8 - k * (h + 8);
+  const allSamples = panel.series.flatMap((series) => series.samples);
+  let xLo = Math.min(...allSamples.map((p) => p.x));
+  let xHi = Math.max(...allSamples.map((p) => p.x));
+  let yLo = Math.min(...allSamples.map((p) => p.y));
+  let yHi = Math.max(...allSamples.map((p) => p.y));
+  if (xLo === xHi) {
+    xLo -= 1;
+    xHi += 1;
+  }
+  if (yLo === yHi) {
+    yLo -= 1;
+    yHi += 1;
+  }
+  const backgroundColor = panel.backgroundColor ?? "#ffffff";
+  const frameColor = panel.frameColor ?? "#94a3b8";
+  const out = [];
+  out.push({
+    type: "rect",
+    x,
+    y,
+    width: w,
+    height: h,
+    color: backgroundColor,
+    fill: backgroundColor,
+    opacity: panel.backgroundOpacity ?? 0.85
+  });
+  out.push({ type: "rect", x, y, width: w, height: h, color: frameColor, lineWidth: 1 });
+  panel.series.forEach((series, j) => {
+    const color = series.color ?? TRACE_SERIES_COLORS[j % TRACE_SERIES_COLORS.length];
+    const mapped = series.samples.map((p) => ({
+      x: x + 4 + (p.x - xLo) / (xHi - xLo) * (w - 8),
+      y: y + h - 4 - (p.y - yLo) / (yHi - yLo) * (h - 8)
+    }));
+    for (let i = 1; i < mapped.length; i++) {
+      out.push({
+        type: "line",
+        x1: mapped[i - 1].x,
+        y1: mapped[i - 1].y,
+        x2: mapped[i].x,
+        y2: mapped[i].y,
+        color,
+        lineWidth: 1.5
+      });
+    }
+    if (mapped.length > 0) {
+      const last = mapped[mapped.length - 1];
+      out.push({ type: "circle", x: last.x, y: last.y, radius: 2, color, fill: color });
+    }
+    if (series.label) {
+      out.push({ type: "text", x: x + 6, y: y + 10 + 11 * j, text: series.label, color, fontSize: 9 });
+    }
+  });
+  if (panel.yLabel) {
+    out.push({ type: "text", x: x + w - 6, y: y + 10, text: panel.yLabel, color: "#6b7280", fontSize: 9, align: "right" });
+  }
+  if (panel.xLabel) {
+    out.push({ type: "text", x: x + w - 6, y: y + h - 6, text: panel.xLabel, color: "#6b7280", fontSize: 9, align: "right" });
+  }
+  return out;
+}
+var DASH_PATTERNS, TRACE_SERIES_COLORS, LearningCanvas;
 var init_LearningCanvas = __esm({
   "components/learning/atoms/LearningCanvas.tsx"() {
     "use client";
     init_cn();
     init_useEventBus();
+    DASH_PATTERNS = { dashed: [6, 4], dotted: [2, 3] };
+    TRACE_SERIES_COLORS = ["#2563eb", "#dc2626", "#16a34a", "#f59e0b"];
     LearningCanvas = ({
       className,
       width = 600,
       height = 400,
       backgroundColor,
       shapes = [],
+      readouts,
+      traces,
       interactive = false,
       animate = false,
       onShapeClick,
@@ -8598,6 +8753,12 @@ var init_LearningCanvas = __esm({
         }
         return -1;
       }, [shapes]);
+      const derivedShapes = useMemo(() => {
+        if (!traces?.length && !readouts?.length) return shapes;
+        const traceOut = (traces ?? []).flatMap((panel, k) => traceShapes(panel, k, width, height));
+        const readoutOut = readouts?.length ? readoutShapes(readouts, width) : [];
+        return [...shapes, ...traceOut, ...readoutOut];
+      }, [shapes, traces, readouts, width, height]);
       const draw = useCallback(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -8614,13 +8775,13 @@ var init_LearningCanvas = __esm({
           ctx.fillStyle = backgroundColor;
           ctx.fillRect(0, 0, width, height);
         }
-        for (const shape of shapes) {
-          if (shape.type !== "text") drawShape(ctx, shape, width, height);
+        for (const shape of derivedShapes) {
+          if (shape.type !== "text") drawShape(ctx, shape, width, height, derivedShapes);
         }
-        for (const shape of shapes) {
-          if (shape.type === "text") drawShape(ctx, shape, width, height);
+        for (const shape of derivedShapes) {
+          if (shape.type === "text") drawShape(ctx, shape, width, height, derivedShapes);
         }
-      }, [width, height, backgroundColor, shapes]);
+      }, [width, height, backgroundColor, derivedShapes]);
       useEffect(() => {
         draw();
       }, [draw]);
@@ -8688,7 +8849,363 @@ var init_LearningCanvas = __esm({
     };
   }
 });
-var DEFAULT_BAR_COLOR, DEFAULT_CELL_COLOR, DEFAULT_POINTER_COLOR, POINTER_BAND, TOP_PAD, AlgorithmCanvas;
+function layoutCircle(nodes, width, height) {
+  const cx = width / 2;
+  const cy = height / 2;
+  const radius = Math.max(10, Math.min(cx, cy) - 40);
+  const positions = /* @__PURE__ */ new Map();
+  const n = nodes.length;
+  nodes.forEach((node, i) => {
+    const angle = 2 * Math.PI * i / Math.max(n, 1) - Math.PI / 2;
+    positions.set(node.id, { x: cx + radius * Math.cos(angle), y: cy + radius * Math.sin(angle) });
+  });
+  return positions;
+}
+function layoutTree(nodes, edges, root, width, height) {
+  const nodeIds = nodes.map((n) => n.id);
+  const idSet = new Set(nodeIds);
+  const childrenOf = /* @__PURE__ */ new Map();
+  const hasIncoming = /* @__PURE__ */ new Set();
+  for (const e of edges) {
+    if (!idSet.has(e.from) || !idSet.has(e.to)) continue;
+    const list = childrenOf.get(e.from) ?? [];
+    list.push(e.to);
+    childrenOf.set(e.from, list);
+    hasIncoming.add(e.to);
+  }
+  const depth = /* @__PURE__ */ new Map();
+  const treeChildren = /* @__PURE__ */ new Map();
+  const visited = /* @__PURE__ */ new Set();
+  const bfsFrom = (start) => {
+    if (visited.has(start)) return;
+    visited.add(start);
+    depth.set(start, 0);
+    const queue = [start];
+    while (queue.length > 0) {
+      const u = queue.shift();
+      for (const v of childrenOf.get(u) ?? []) {
+        if (visited.has(v)) continue;
+        visited.add(v);
+        depth.set(v, (depth.get(u) ?? 0) + 1);
+        const list = treeChildren.get(u) ?? [];
+        list.push(v);
+        treeChildren.set(u, list);
+        queue.push(v);
+      }
+    }
+  };
+  const primaryRoot = root && idSet.has(root) ? root : nodeIds.find((id) => !hasIncoming.has(id)) ?? nodeIds[0];
+  const rootsOrder = [];
+  if (primaryRoot !== void 0) {
+    bfsFrom(primaryRoot);
+    rootsOrder.push(primaryRoot);
+  }
+  for (const id of nodeIds) {
+    if (!visited.has(id)) {
+      bfsFrom(id);
+      rootsOrder.push(id);
+    }
+  }
+  let leafCounter = 0;
+  const xSlot = /* @__PURE__ */ new Map();
+  const assignXSlot = (u) => {
+    const children = treeChildren.get(u) ?? [];
+    if (children.length === 0) {
+      const slot = leafCounter++;
+      xSlot.set(u, slot);
+      return slot;
+    }
+    const childSlots = children.map(assignXSlot);
+    const avg = childSlots.reduce((a, b) => a + b, 0) / childSlots.length;
+    xSlot.set(u, avg);
+    return avg;
+  };
+  for (const r of rootsOrder) assignXSlot(r);
+  let maxDepth = 0;
+  for (const d of depth.values()) maxDepth = Math.max(maxDepth, d);
+  const colWidth = width / Math.max(1, leafCounter);
+  const rowHeight = height / (maxDepth + 1);
+  const positions = /* @__PURE__ */ new Map();
+  for (const id of nodeIds) {
+    const slot = xSlot.get(id) ?? 0;
+    const d = depth.get(id) ?? 0;
+    positions.set(id, { x: slot * colWidth + colWidth / 2, y: d * rowHeight + rowHeight / 2 });
+  }
+  return positions;
+}
+function layoutLayered(nodes, edges, width, height) {
+  const nodeIds = nodes.map((n) => n.id);
+  const idSet = new Set(nodeIds);
+  const adj = /* @__PURE__ */ new Map();
+  const remainingIndegree = /* @__PURE__ */ new Map();
+  for (const id of nodeIds) remainingIndegree.set(id, 0);
+  for (const e of edges) {
+    if (!idSet.has(e.from) || !idSet.has(e.to)) continue;
+    const list = adj.get(e.from) ?? [];
+    list.push(e.to);
+    adj.set(e.from, list);
+    remainingIndegree.set(e.to, (remainingIndegree.get(e.to) ?? 0) + 1);
+  }
+  const layer = /* @__PURE__ */ new Map();
+  const dequeued = /* @__PURE__ */ new Set();
+  const queue = [];
+  for (const id of nodeIds) {
+    if ((remainingIndegree.get(id) ?? 0) === 0) {
+      layer.set(id, 0);
+      queue.push(id);
+    }
+  }
+  while (queue.length > 0) {
+    const u = queue.shift();
+    dequeued.add(u);
+    for (const v of adj.get(u) ?? []) {
+      const candidate = (layer.get(u) ?? 0) + 1;
+      layer.set(v, Math.max(layer.get(v) ?? 0, candidate));
+      remainingIndegree.set(v, (remainingIndegree.get(v) ?? 0) - 1);
+      if ((remainingIndegree.get(v) ?? 0) === 0 && !dequeued.has(v)) {
+        queue.push(v);
+      }
+    }
+  }
+  let baseMaxLayer = 0;
+  for (const id of nodeIds) {
+    if (dequeued.has(id)) baseMaxLayer = Math.max(baseMaxLayer, layer.get(id) ?? 0);
+  }
+  const cycleLayer = baseMaxLayer + 1;
+  let maxLayer = baseMaxLayer;
+  for (const id of nodeIds) {
+    if (!dequeued.has(id)) {
+      layer.set(id, cycleLayer);
+      maxLayer = cycleLayer;
+    }
+  }
+  const colWidth = width / Math.max(1, maxLayer + 1);
+  const byLayer = /* @__PURE__ */ new Map();
+  for (const id of nodeIds) {
+    const l = layer.get(id) ?? 0;
+    const list = byLayer.get(l) ?? [];
+    list.push(id);
+    byLayer.set(l, list);
+  }
+  const positions = /* @__PURE__ */ new Map();
+  for (const [l, ids] of byLayer) {
+    const rowHeight = height / ids.length;
+    ids.forEach((id, i) => {
+      positions.set(id, { x: l * colWidth + colWidth / 2, y: i * rowHeight + rowHeight / 2 });
+    });
+  }
+  return positions;
+}
+function computePositions(nodes, edges, layout, root, width, height) {
+  switch (layout) {
+    case "circle":
+      return layoutCircle(nodes, width, height);
+    case "tree":
+      return layoutTree(nodes, edges, root, width, height);
+    case "layered":
+      return layoutLayered(nodes, edges, width, height);
+    case "manual":
+    default: {
+      const positions = /* @__PURE__ */ new Map();
+      for (const n of nodes) positions.set(n.id, { x: n.x ?? 0, y: n.y ?? 0 });
+      return positions;
+    }
+  }
+}
+var NODE_STATE_COLOR, EDGE_STATE_COLOR, DEFAULT_NODE_RADIUS, AlgoGraphCanvas;
+var init_AlgoGraphCanvas = __esm({
+  "components/learning/molecules/AlgoGraphCanvas.tsx"() {
+    "use client";
+    init_atoms();
+    init_Stack();
+    init_LearningCanvas();
+    NODE_STATE_COLOR = {
+      unvisited: "#cbd5e1",
+      frontier: "#f59e0b",
+      current: "#ef4444",
+      visited: "#22c55e",
+      goal: "#8b5cf6",
+      path: "#0ea5e9"
+    };
+    EDGE_STATE_COLOR = {
+      default: "#9ca3af",
+      tree: "#16a34a",
+      relaxed: "#f59e0b",
+      candidate: "#38bdf8",
+      path: "#dc2626"
+    };
+    DEFAULT_NODE_RADIUS = 18;
+    AlgoGraphCanvas = ({
+      className,
+      width = 600,
+      height = 400,
+      title,
+      backgroundColor,
+      nodes = [],
+      edges = [],
+      layout = "manual",
+      root,
+      shapes = [],
+      interactive = false,
+      animate = false,
+      onShapeClick,
+      onNodeClick,
+      isLoading,
+      error
+    }) => {
+      const nodeById = useMemo(() => {
+        const m = /* @__PURE__ */ new Map();
+        for (const n of nodes) m.set(n.id, n);
+        return m;
+      }, [nodes]);
+      const nodeIndexById = useMemo(() => {
+        const m = /* @__PURE__ */ new Map();
+        nodes.forEach((n, i) => m.set(n.id, i));
+        return m;
+      }, [nodes]);
+      const derivedShapes = useMemo(() => {
+        const out = [];
+        const positions = computePositions(nodes, edges, layout, root, width, height);
+        const edgeGeoms = [];
+        for (const e of edges) {
+          const a = nodeById.get(e.from);
+          const b = nodeById.get(e.to);
+          const posA = positions.get(e.from);
+          const posB = positions.get(e.to);
+          if (!a || !b || !posA || !posB) continue;
+          const rA = a.radius ?? DEFAULT_NODE_RADIUS;
+          const rB = b.radius ?? DEFAULT_NODE_RADIUS;
+          const dx = posB.x - posA.x;
+          const dy = posB.y - posA.y;
+          const dist = Math.max(1e-6, Math.hypot(dx, dy));
+          const ux = dx / dist;
+          const uy = dy / dist;
+          edgeGeoms.push({
+            directed: e.directed ?? false,
+            x1: posA.x + ux * rA,
+            y1: posA.y + uy * rA,
+            x2: posB.x - ux * rB,
+            y2: posB.y - uy * rB,
+            color: e.color ?? EDGE_STATE_COLOR[e.state ?? "default"],
+            label: e.label ?? (e.weight != null ? String(e.weight) : void 0)
+          });
+        }
+        for (const g of edgeGeoms) {
+          out.push({
+            type: g.directed ? "arrow" : "line",
+            x1: g.x1,
+            y1: g.y1,
+            x2: g.x2,
+            y2: g.y2,
+            color: g.color,
+            lineWidth: 2
+          });
+        }
+        for (const g of edgeGeoms) {
+          if (g.label === void 0) continue;
+          const midX = (g.x1 + g.x2) / 2;
+          const midY = (g.y1 + g.y2) / 2;
+          const dx = g.x2 - g.x1;
+          const dy = g.y2 - g.y1;
+          const dist = Math.max(1e-6, Math.hypot(dx, dy));
+          const perpX = -(dy / dist);
+          const perpY = dx / dist;
+          out.push({
+            type: "text",
+            x: midX + perpX * 10,
+            y: midY + perpY * 10,
+            text: g.label,
+            fontSize: 11,
+            align: "center",
+            color: "#374151"
+          });
+        }
+        const nodeGeoms = [];
+        for (const n of nodes) {
+          const pos = positions.get(n.id);
+          if (!pos) continue;
+          nodeGeoms.push({
+            id: n.id,
+            x: pos.x,
+            y: pos.y,
+            radius: n.radius ?? DEFAULT_NODE_RADIUS,
+            color: n.color ?? NODE_STATE_COLOR[n.state ?? "unvisited"],
+            label: n.label,
+            badge: n.badge
+          });
+        }
+        for (const g of nodeGeoms) {
+          out.push({ type: "circle", id: g.id, x: g.x, y: g.y, radius: g.radius, color: g.color, fill: `${g.color}33` });
+        }
+        const badgeGeoms = [];
+        for (const g of nodeGeoms) {
+          if (!g.badge) continue;
+          const w = Math.min(42, Math.max(18, g.badge.text.length * 6 + 10));
+          badgeGeoms.push({
+            cx: g.x + g.radius * 0.75,
+            cy: g.y - g.radius * 0.75,
+            w,
+            h: 14,
+            // Borderless pill: same color drives both stroke and fill.
+            color: g.badge.color ?? "#1e293b",
+            text: g.badge.text
+          });
+        }
+        for (const b of badgeGeoms) {
+          out.push({ type: "rect", x: b.cx - b.w / 2, y: b.cy - b.h / 2, width: b.w, height: b.h, color: b.color, fill: b.color });
+        }
+        for (const b of badgeGeoms) {
+          out.push({ type: "text", x: b.cx, y: b.cy, text: b.text, fontSize: 9, align: "center", color: "#ffffff" });
+        }
+        for (const g of nodeGeoms) {
+          if (g.label === void 0) continue;
+          out.push({
+            type: "text",
+            x: g.x,
+            y: g.y + g.radius + 14,
+            text: g.label,
+            fontSize: 12,
+            align: "center",
+            color: "#111827"
+          });
+        }
+        out.push(...shapes);
+        return out;
+      }, [nodes, edges, layout, root, width, height, nodeById, shapes]);
+      const handleShapeClick = useCallback(
+        (payload) => {
+          if (payload.type === "circle" && payload.id) {
+            const node = nodeById.get(payload.id);
+            const idx = nodeIndexById.get(payload.id);
+            if (node && idx !== void 0) {
+              onNodeClick?.({ id: node.id, label: node.label, index: idx });
+            }
+          }
+          onShapeClick?.(payload);
+        },
+        [nodeById, nodeIndexById, onNodeClick, onShapeClick]
+      );
+      return /* @__PURE__ */ jsx(Card, { className, children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
+        title ? /* @__PURE__ */ jsx(Typography, { variant: "h4", children: title }) : null,
+        /* @__PURE__ */ jsx(
+          LearningCanvas,
+          {
+            width,
+            height,
+            backgroundColor,
+            shapes: derivedShapes,
+            interactive,
+            animate,
+            onShapeClick: onShapeClick || onNodeClick ? handleShapeClick : void 0,
+            isLoading,
+            error
+          }
+        )
+      ] }) });
+    };
+  }
+});
+var DEFAULT_BAR_COLOR, DEFAULT_CELL_COLOR, DEFAULT_POINTER_COLOR, POINTER_BAND, TOP_PAD, PANEL_FAMILY_ORDER, RANGE_COLOR_DEFAULT, RANGE_FILL_OPACITY, BRACKET_TOP_OFFSET, BRACKET_ROW_H, BRACKET_TICK_H, BRACKET_LABEL_OFFSET, SLOT_EMPTY_FILL, SLOT_EMPTY_STROKE, SLOT_FILLED_STROKE, SLOT_HIGHLIGHT_DEFAULT, SLOT_VALUE_TEXT_COLOR, FRAME_ACTIVE_COLOR, FRAME_RETURNING_COLOR, FRAME_DONE_COLOR, FRAME_LABEL_COLOR, FRAME_DETAIL_COLOR, FRAME_TWO_LINE_MIN_H, BUCKET_INDEX_FILL, BUCKET_INDEX_STROKE, BUCKET_INDEX_TEXT, BUCKET_ENTRY_TEXT, BUCKET_ENTRY_DEFAULT, BUCKET_ENTRY_HIGHLIGHT, BUCKET_ENTRY_PROBING, BUCKET_ENTRY_MIN_W, BUCKET_ENTRY_MAX_W, AXIS_LABEL_COLOR, AXIS_LABEL_FONT_SIZE, CORNER_TEXT_COLOR, CORNER_FONT_SIZE, CORNER_MIN_CELL, CORNER_INSET_X, CORNER_INSET_Y, AUX_PRIMARY_RATIO, AUX_LABEL_BAND, AUX_BASELINE_PAD, AlgorithmCanvas;
 var init_AlgorithmCanvas = __esm({
   "components/learning/molecules/AlgorithmCanvas.tsx"() {
     "use client";
@@ -8700,6 +9217,43 @@ var init_AlgorithmCanvas = __esm({
     DEFAULT_POINTER_COLOR = "#dc2626";
     POINTER_BAND = 34;
     TOP_PAD = 26;
+    PANEL_FAMILY_ORDER = ["bars", "slots", "cells", "buckets", "frames"];
+    RANGE_COLOR_DEFAULT = "#3b82f6";
+    RANGE_FILL_OPACITY = 0.15;
+    BRACKET_TOP_OFFSET = 16;
+    BRACKET_ROW_H = 14;
+    BRACKET_TICK_H = 6;
+    BRACKET_LABEL_OFFSET = 6;
+    SLOT_EMPTY_FILL = "#f1f5f9";
+    SLOT_EMPTY_STROKE = "#cbd5e1";
+    SLOT_FILLED_STROKE = "#9ca3af";
+    SLOT_HIGHLIGHT_DEFAULT = "#f59e0b";
+    SLOT_VALUE_TEXT_COLOR = "#ffffff";
+    FRAME_ACTIVE_COLOR = "#3b82f6";
+    FRAME_RETURNING_COLOR = "#f59e0b";
+    FRAME_DONE_COLOR = "#94a3b8";
+    FRAME_LABEL_COLOR = "#ffffff";
+    FRAME_DETAIL_COLOR = "#e2e8f0";
+    FRAME_TWO_LINE_MIN_H = 22;
+    BUCKET_INDEX_FILL = "#e2e8f0";
+    BUCKET_INDEX_STROKE = "#9ca3af";
+    BUCKET_INDEX_TEXT = "#374151";
+    BUCKET_ENTRY_TEXT = "#ffffff";
+    BUCKET_ENTRY_DEFAULT = "#3b82f6";
+    BUCKET_ENTRY_HIGHLIGHT = "#f59e0b";
+    BUCKET_ENTRY_PROBING = "#38bdf8";
+    BUCKET_ENTRY_MIN_W = 24;
+    BUCKET_ENTRY_MAX_W = 64;
+    AXIS_LABEL_COLOR = "#6b7280";
+    AXIS_LABEL_FONT_SIZE = 10;
+    CORNER_TEXT_COLOR = "#111827";
+    CORNER_FONT_SIZE = 7;
+    CORNER_MIN_CELL = 28;
+    CORNER_INSET_X = 3;
+    CORNER_INSET_Y = 6;
+    AUX_PRIMARY_RATIO = 0.6;
+    AUX_LABEL_BAND = 18;
+    AUX_BASELINE_PAD = 8;
     AlgorithmCanvas = ({
       className,
       width = 600,
@@ -8709,6 +9263,14 @@ var init_AlgorithmCanvas = __esm({
       bars = [],
       cells = [],
       pointers = [],
+      ranges = [],
+      slots = [],
+      slotOrientation = "horizontal",
+      frames = [],
+      buckets = [],
+      auxBars = [],
+      rowLabels = [],
+      colLabels = [],
       shapes = [],
       interactive = false,
       animate = false,
@@ -8718,12 +9280,35 @@ var init_AlgorithmCanvas = __esm({
     }) => {
       const derivedShapes = useMemo(() => {
         const out = [];
+        const presence = {
+          bars: bars.length > 0,
+          slots: slots.length > 0,
+          cells: cells.length > 0,
+          buckets: buckets.length > 0,
+          frames: frames.length > 0
+        };
+        const panelCount = PANEL_FAMILY_ORDER.filter((f3) => presence[f3]).length;
+        const panelHeight = height / Math.max(1, panelCount);
+        const panelY = { bars: 0, slots: 0, cells: 0, buckets: 0, frames: 0 };
+        let compactIndex = 0;
+        PANEL_FAMILY_ORDER.forEach((f3) => {
+          if (presence[f3]) {
+            panelY[f3] = compactIndex * panelHeight;
+            compactIndex += 1;
+          }
+        });
         if (bars.length > 0) {
+          const panelYBars = panelY.bars;
           const slot = width / bars.length;
           const barW = slot * 0.8;
           const gap = slot * 0.1;
-          const baseline = height - POINTER_BAND;
-          const usableH = baseline - TOP_PAD;
+          const bracketRanges = ranges.filter((r) => r.kind === "bracket");
+          const bracketCount = bracketRanges.length;
+          const bracketHeadroom = bracketCount > 0 ? BRACKET_TOP_OFFSET + bracketCount * BRACKET_ROW_H : 0;
+          const hasAux = auxBars.length > 0;
+          const primaryH = hasAux ? panelHeight * AUX_PRIMARY_RATIO : panelHeight;
+          const baseline = panelYBars + primaryH - POINTER_BAND;
+          const usableH = baseline - (panelYBars + TOP_PAD + bracketHeadroom);
           const maxV = Math.max(1, ...bars.map((b) => Number.isFinite(b.value) ? b.value : 0));
           bars.forEach((bar, i) => {
             const v = Number.isFinite(bar.value) ? bar.value : 0;
@@ -8753,6 +9338,89 @@ var init_AlgorithmCanvas = __esm({
               });
             }
           });
+          ranges.forEach((r) => {
+            const kind = r.kind ?? "fill";
+            if (kind !== "fill") return;
+            const color = r.color ?? RANGE_COLOR_DEFAULT;
+            out.push({
+              type: "rect",
+              x: r.from * slot,
+              y: panelYBars,
+              width: (r.to - r.from + 1) * slot,
+              height: primaryH,
+              color,
+              fill: color,
+              opacity: RANGE_FILL_OPACITY
+            });
+            if (r.label) {
+              out.push({
+                type: "text",
+                x: r.from * slot + 4,
+                // Sits below the bracket block (if any) so fill and bracket labels never collide.
+                y: panelYBars + 10 + bracketHeadroom,
+                text: r.label,
+                color,
+                fontSize: 10,
+                align: "left"
+              });
+            }
+          });
+          bracketRanges.forEach((r, i) => {
+            const bracketY = panelYBars + BRACKET_TOP_OFFSET + i * BRACKET_ROW_H;
+            const x1 = r.from * slot + slot * 0.1;
+            const x2 = (r.to + 1) * slot - slot * 0.1;
+            const color = r.color ?? RANGE_COLOR_DEFAULT;
+            out.push({ type: "line", x1, y1: bracketY, x2, y2: bracketY, color, lineWidth: 2 });
+            out.push({ type: "line", x1, y1: bracketY, x2: x1, y2: bracketY + BRACKET_TICK_H, color, lineWidth: 2 });
+            out.push({ type: "line", x1: x2, y1: bracketY, x2, y2: bracketY + BRACKET_TICK_H, color, lineWidth: 2 });
+            if (r.label) {
+              out.push({
+                type: "text",
+                x: (x1 + x2) / 2,
+                y: bracketY - BRACKET_LABEL_OFFSET,
+                text: r.label,
+                color,
+                fontSize: 10,
+                align: "center"
+              });
+            }
+          });
+          if (hasAux) {
+            const auxH = panelHeight - primaryH;
+            const slot2 = width / auxBars.length;
+            const auxBaseline = panelYBars + primaryH + auxH - AUX_BASELINE_PAD;
+            const auxUsableH = auxBaseline - (panelYBars + primaryH + AUX_LABEL_BAND);
+            const maxAuxV = Math.max(1, ...auxBars.map((b) => Number.isFinite(b.value) ? b.value : 0));
+            auxBars.forEach((bar, i) => {
+              const v = Number.isFinite(bar.value) ? bar.value : 0;
+              const bh = Math.max(0, v / maxAuxV * auxUsableH);
+              const x = i * slot2 + slot2 * 0.1;
+              const w = slot2 * 0.8;
+              const color = bar.color ?? DEFAULT_BAR_COLOR;
+              out.push({
+                type: "rect",
+                id: `auxbar-${i}`,
+                x,
+                y: auxBaseline - bh,
+                width: w,
+                height: bh,
+                color,
+                fill: color
+              });
+              const label = bar.label ?? (auxBars.length <= 24 ? String(v) : void 0);
+              if (label) {
+                out.push({
+                  type: "text",
+                  x: x + w / 2,
+                  y: auxBaseline - bh - 8,
+                  text: label,
+                  color: "#374151",
+                  fontSize: 11,
+                  align: "center"
+                });
+              }
+            });
+          }
           pointers.forEach((p) => {
             if (p.index < 0 || p.index >= bars.length) return;
             const cx = p.index * slot + slot / 2;
@@ -8760,7 +9428,7 @@ var init_AlgorithmCanvas = __esm({
             out.push({
               type: "arrow",
               x1: cx,
-              y1: height - 6,
+              y1: panelYBars + primaryH - 18,
               x2: cx,
               y2: baseline + 4,
               color,
@@ -8770,7 +9438,7 @@ var init_AlgorithmCanvas = __esm({
               out.push({
                 type: "text",
                 x: cx,
-                y: height - 22,
+                y: panelYBars + primaryH - 8,
                 text: p.label,
                 color,
                 fontSize: 11,
@@ -8779,14 +9447,111 @@ var init_AlgorithmCanvas = __esm({
             }
           });
         }
+        if (slots.length > 0) {
+          const panelYSlots = panelY.slots;
+          const n = slots.length;
+          const vertical = slotOrientation === "vertical";
+          const vBoxH = panelHeight / n;
+          const vBoxW = Math.min(width * 0.5, 120);
+          const vBoxX = (width - vBoxW) / 2;
+          const hCellW = width / n;
+          const hBoxW = hCellW * 0.82;
+          const hBoxH = Math.min(panelHeight * 0.6, 48);
+          const hBoxY = panelYSlots + (panelHeight - hBoxH) / 2;
+          const slotBox = (i) => vertical ? { x: vBoxX, y: panelYSlots + panelHeight - (i + 1) * vBoxH, width: vBoxW, height: vBoxH } : { x: i * hCellW + (hCellW - hBoxW) / 2, y: hBoxY, width: hBoxW, height: hBoxH };
+          slots.forEach((s, i) => {
+            const box = slotBox(i);
+            const state = s.state ?? "filled";
+            const fill = state === "empty" ? SLOT_EMPTY_FILL : state === "highlight" ? s.color ?? SLOT_HIGHLIGHT_DEFAULT : s.color ?? DEFAULT_BAR_COLOR;
+            const stroke = state === "empty" ? SLOT_EMPTY_STROKE : SLOT_FILLED_STROKE;
+            out.push({
+              type: "rect",
+              id: `slot-${i}`,
+              x: box.x,
+              y: box.y,
+              width: box.width,
+              height: box.height,
+              color: stroke,
+              fill
+            });
+            if (s.value != null && state !== "empty") {
+              out.push({
+                type: "text",
+                x: box.x + box.width / 2,
+                y: box.y + box.height / 2,
+                text: String(s.value),
+                color: SLOT_VALUE_TEXT_COLOR,
+                fontSize: 12,
+                align: "center"
+              });
+            }
+          });
+          if (bars.length === 0) {
+            pointers.forEach((p) => {
+              if (p.index < 0 || p.index >= slots.length) return;
+              const box = slotBox(p.index);
+              const color = p.color ?? DEFAULT_POINTER_COLOR;
+              if (vertical) {
+                const cy = box.y + box.height / 2;
+                out.push({
+                  type: "arrow",
+                  x1: box.x + box.width + 34,
+                  y1: cy,
+                  x2: box.x + box.width + 4,
+                  y2: cy,
+                  color,
+                  lineWidth: 2
+                });
+                if (p.label) {
+                  out.push({
+                    type: "text",
+                    x: box.x + box.width + 38,
+                    y: cy,
+                    text: p.label,
+                    color,
+                    fontSize: 11,
+                    align: "left"
+                  });
+                }
+              } else {
+                const cx = box.x + box.width / 2;
+                out.push({
+                  type: "arrow",
+                  x1: cx,
+                  y1: panelYSlots + panelHeight - 18,
+                  x2: cx,
+                  y2: box.y + box.height + 4,
+                  color,
+                  lineWidth: 2
+                });
+                if (p.label) {
+                  out.push({
+                    type: "text",
+                    x: cx,
+                    y: panelYSlots + panelHeight - 8,
+                    text: p.label,
+                    color,
+                    fontSize: 11,
+                    align: "center"
+                  });
+                }
+              }
+            });
+          }
+        }
         if (cells.length > 0) {
+          const panelYCells = panelY.cells;
           const maxCol = Math.max(0, ...cells.map((c) => c.col)) + 1;
           const maxRow = Math.max(0, ...cells.map((c) => c.row)) + 1;
-          const cw = width / maxCol;
-          const ch = height / maxRow;
+          const colLabelH = colLabels.length > 0 ? 16 : 0;
+          const rowLabelW = rowLabels.length > 0 ? 20 : 0;
+          const gridX0 = rowLabelW;
+          const gridY0 = panelYCells + colLabelH;
+          const cw = (width - rowLabelW) / maxCol;
+          const ch = (panelHeight - colLabelH) / maxRow;
           cells.forEach((c, i) => {
-            const x = c.col * cw;
-            const y = c.row * ch;
+            const x = gridX0 + c.col * cw;
+            const y = gridY0 + c.row * ch;
             const color = c.color ?? DEFAULT_CELL_COLOR;
             out.push({
               type: "rect",
@@ -8810,11 +9575,207 @@ var init_AlgorithmCanvas = __esm({
                 align: "center"
               });
             }
+            if (c.corner && cw >= CORNER_MIN_CELL && ch >= CORNER_MIN_CELL) {
+              const { tl, tr, bl, br } = c.corner;
+              if (tl) {
+                out.push({
+                  type: "text",
+                  x: x + CORNER_INSET_X,
+                  y: y + CORNER_INSET_Y,
+                  text: tl,
+                  color: CORNER_TEXT_COLOR,
+                  fontSize: CORNER_FONT_SIZE,
+                  align: "left"
+                });
+              }
+              if (tr) {
+                out.push({
+                  type: "text",
+                  x: x + cw - CORNER_INSET_X,
+                  y: y + CORNER_INSET_Y,
+                  text: tr,
+                  color: CORNER_TEXT_COLOR,
+                  fontSize: CORNER_FONT_SIZE,
+                  align: "right"
+                });
+              }
+              if (bl) {
+                out.push({
+                  type: "text",
+                  x: x + CORNER_INSET_X,
+                  y: y + ch - CORNER_INSET_Y,
+                  text: bl,
+                  color: CORNER_TEXT_COLOR,
+                  fontSize: CORNER_FONT_SIZE,
+                  align: "left"
+                });
+              }
+              if (br) {
+                out.push({
+                  type: "text",
+                  x: x + cw - CORNER_INSET_X,
+                  y: y + ch - CORNER_INSET_Y,
+                  text: br,
+                  color: CORNER_TEXT_COLOR,
+                  fontSize: CORNER_FONT_SIZE,
+                  align: "right"
+                });
+              }
+            }
+          });
+          colLabels.forEach((l) => {
+            out.push({
+              type: "text",
+              x: gridX0 + l.index * cw + cw / 2,
+              y: panelYCells + colLabelH / 2,
+              text: l.text,
+              color: l.color ?? AXIS_LABEL_COLOR,
+              fontSize: AXIS_LABEL_FONT_SIZE,
+              align: "center"
+            });
+          });
+          rowLabels.forEach((l) => {
+            out.push({
+              type: "text",
+              x: rowLabelW - 6,
+              y: gridY0 + l.index * ch + ch / 2,
+              text: l.text,
+              color: l.color ?? AXIS_LABEL_COLOR,
+              fontSize: AXIS_LABEL_FONT_SIZE,
+              align: "right"
+            });
+          });
+        }
+        if (buckets.length > 0) {
+          const panelYBuckets = panelY.buckets;
+          const bucketCount = Math.max(0, ...buckets.map((b) => b.index)) + 1;
+          const rowH = panelHeight / bucketCount;
+          const indexColW = Math.min(width * 0.12, 40);
+          const maxChainLen = Math.max(1, ...buckets.map((b) => b.entries.length));
+          const entryW = Math.min(BUCKET_ENTRY_MAX_W, Math.max(BUCKET_ENTRY_MIN_W, (width - indexColW - 8) / maxChainLen));
+          const maxVisible = Math.floor((width - indexColW - 4) / entryW);
+          buckets.forEach((b) => {
+            const rowY = panelYBuckets + b.index * rowH;
+            out.push({
+              type: "rect",
+              id: `bucket-index-${b.index}`,
+              x: 2,
+              y: rowY + 2,
+              width: indexColW - 4,
+              height: rowH - 4,
+              color: BUCKET_INDEX_STROKE,
+              fill: BUCKET_INDEX_FILL
+            });
+            out.push({
+              type: "text",
+              x: 2 + (indexColW - 4) / 2,
+              y: rowY + rowH / 2,
+              text: String(b.index),
+              color: BUCKET_INDEX_TEXT,
+              fontSize: 10,
+              align: "center"
+            });
+            const overflow = b.entries.length > maxVisible;
+            const visibleCount = overflow ? Math.max(0, maxVisible - 1) : b.entries.length;
+            for (let j = 0; j < visibleCount; j++) {
+              const entry = b.entries[j];
+              const ex = indexColW + 4 + j * entryW;
+              const state = entry.state ?? "default";
+              const fill = state === "highlight" ? entry.color ?? BUCKET_ENTRY_HIGHLIGHT : state === "probing" ? entry.color ?? BUCKET_ENTRY_PROBING : entry.color ?? BUCKET_ENTRY_DEFAULT;
+              out.push({
+                type: "rect",
+                id: `bucket-${b.index}-${j}`,
+                x: ex,
+                y: rowY + 2,
+                width: entryW - 2,
+                height: rowH - 4,
+                color: fill,
+                fill
+              });
+              if (entryW >= 20 && rowH >= 16) {
+                out.push({
+                  type: "text",
+                  x: ex + (entryW - 2) / 2,
+                  y: rowY + rowH / 2,
+                  text: entry.label,
+                  color: BUCKET_ENTRY_TEXT,
+                  fontSize: 10,
+                  align: "center"
+                });
+              }
+            }
+            if (overflow) {
+              const ex = indexColW + 4 + visibleCount * entryW;
+              out.push({
+                type: "rect",
+                id: `bucket-${b.index}-overflow`,
+                x: ex,
+                y: rowY + 2,
+                width: entryW - 2,
+                height: rowH - 4,
+                color: BUCKET_ENTRY_DEFAULT,
+                fill: BUCKET_ENTRY_DEFAULT
+              });
+              out.push({
+                type: "text",
+                x: ex + (entryW - 2) / 2,
+                y: rowY + rowH / 2,
+                text: `+${b.entries.length - visibleCount}`,
+                color: BUCKET_ENTRY_TEXT,
+                fontSize: 10,
+                align: "center"
+              });
+            }
+          });
+        }
+        if (frames.length > 0) {
+          const panelYFrames = panelY.frames;
+          const n = frames.length;
+          const frameH = panelHeight / n;
+          const x = 8;
+          const w = width - 16;
+          frames.forEach((f3, i) => {
+            const y = panelYFrames + panelHeight - (i + 1) * frameH;
+            const state = f3.state ?? "active";
+            const fill = state === "returning" ? f3.color ?? FRAME_RETURNING_COLOR : state === "done" ? f3.color ?? FRAME_DONE_COLOR : f3.color ?? FRAME_ACTIVE_COLOR;
+            out.push({ type: "rect", id: `frame-${i}`, x, y, width: w, height: frameH, color: fill, fill });
+            if (frameH >= FRAME_TWO_LINE_MIN_H) {
+              out.push({
+                type: "text",
+                x: 16,
+                y: y + frameH * 0.35,
+                text: f3.label,
+                color: FRAME_LABEL_COLOR,
+                fontSize: 10,
+                align: "left"
+              });
+              if (f3.detail) {
+                out.push({
+                  type: "text",
+                  x: 16,
+                  y: y + frameH * 0.7,
+                  text: f3.detail,
+                  color: FRAME_DETAIL_COLOR,
+                  fontSize: 10,
+                  align: "left"
+                });
+              }
+            } else {
+              out.push({
+                type: "text",
+                x: 16,
+                y: y + frameH / 2,
+                text: f3.label,
+                color: FRAME_LABEL_COLOR,
+                fontSize: 10,
+                align: "left"
+              });
+            }
           });
         }
         out.push(...shapes);
         return out;
-      }, [bars, cells, pointers, shapes, width, height]);
+      }, [bars, cells, pointers, ranges, slots, slotOrientation, frames, buckets, auxBars, rowLabels, colLabels, shapes, width, height]);
       return /* @__PURE__ */ jsx(Card, { className, children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
         title ? /* @__PURE__ */ jsx(Typography, { variant: "h4", children: title }) : null,
         /* @__PURE__ */ jsx(
@@ -9828,6 +10789,12 @@ function LearningScene3D({
     const unitId = event.payload?.unitId;
     if (typeof unitId === "string") onItemClickRef.current?.(unitId);
   });
+  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && post?.bloom) {
+    const unknownKeys = Object.keys(post.bloom).filter((k) => !KNOWN_BLOOM_KEYS.has(k));
+    if (unknownKeys.length > 0) {
+      sceneLog.debug("post.bloom has unrecognized keys \u2014 only intensity/threshold/smoothing are read", { unknownKeys });
+    }
+  }
   const props3d = {
     drawables,
     isLoading,
@@ -9893,7 +10860,7 @@ function cylinderBetween(from, to, radius, color) {
     material: { color }
   };
 }
-function arrowBetween(from, to, color, shaftRadius = 0.08) {
+function arrowBetween(from, to, color, shaftRadius = 0.08, id) {
   const len = segmentLength(from, to);
   if (len < 1e-6) return null;
   const tipLen = Math.min(shaftRadius * 8, len * 0.35);
@@ -9921,6 +10888,7 @@ function arrowBetween(from, to, color, shaftRadius = 0.08) {
   };
   return {
     type: "draw-group",
+    ...id !== void 0 ? { id } : {},
     position: { x: from[0], y: from[1], z: from[2] },
     items: tipLenActual < 1e-6 ? shaft ? [shaft] : [] : shaft ? [shaft, tip] : [tip]
   };
@@ -9947,20 +10915,228 @@ function get3DClickPayload(onShapeClick, idToIndex) {
   if (!onShapeClick) return void 0;
   return (id) => onShapeClick({ id, index: idToIndex.get(id) ?? -1 });
 }
-var Canvas3DHost;
+function polylineTube(points, radius, color, opts) {
+  const maxSegments = opts?.maxSegments ?? 128;
+  let pts = points;
+  if (pts.length - 1 > maxSegments) {
+    const step = (pts.length - 1) / maxSegments;
+    const kept = [pts[0]];
+    for (let s = 1; s < maxSegments; s++) kept.push(pts[Math.round(s * step)]);
+    kept.push(pts[pts.length - 1]);
+    pts = kept;
+  }
+  const out = [];
+  for (let i = 0; i < pts.length - 1; i++) {
+    const seg = cylinderBetween(pts[i], pts[i + 1], radius, color);
+    if (seg) out.push(opts?.opacity !== void 0 ? { ...seg, opacity: opts.opacity } : seg);
+  }
+  return out;
+}
+function heightFieldMesh(spec) {
+  const { nx, ny, heights, spacing = 1, x = 0, y = 0 } = spec;
+  const flatShading = spec.flatShading ?? true;
+  const vertices = [];
+  for (let iy = 0; iy < ny; iy++) {
+    for (let ix = 0; ix < nx; ix++) {
+      vertices.push([
+        x + (ix - (nx - 1) / 2) * spacing,
+        y + (iy - (ny - 1) / 2) * spacing,
+        heights[iy * nx + ix] ?? 0
+      ]);
+    }
+  }
+  const bands = [...spec.bands ?? []].sort((a, b) => (a.min ?? -Infinity) - (b.min ?? -Infinity));
+  const facesByBand = /* @__PURE__ */ new Map();
+  for (let iy = 0; iy < ny - 1; iy++) {
+    for (let ix = 0; ix < nx - 1; ix++) {
+      const v00 = iy * nx + ix;
+      const v10 = iy * nx + ix + 1;
+      const v01 = (iy + 1) * nx + ix;
+      const v11 = (iy + 1) * nx + ix + 1;
+      for (const face of [[v00, v10, v01], [v10, v11, v01]]) {
+        const centroid = (vertices[face[0]][2] + vertices[face[1]][2] + vertices[face[2]][2]) / 3;
+        let band = null;
+        for (const b of bands) {
+          if ((b.min ?? -Infinity) <= centroid) band = b;
+        }
+        const key = bands.length > 0 ? band : null;
+        const list = facesByBand.get(key) ?? [];
+        list.push(face);
+        facesByBand.set(key, list);
+      }
+    }
+  }
+  const out = [];
+  for (const [band, faces] of facesByBand) {
+    if (faces.length === 0) continue;
+    out.push({
+      type: "draw-mesh",
+      shape: "polyhedron",
+      position: { x: 0, y: 0, z: 0 },
+      vertices,
+      faces,
+      pivot: "center",
+      material: { color: band?.color ?? spec.color ?? "#64748b", flatShading, side: "double" },
+      ...spec.opacity !== void 0 ? { opacity: spec.opacity } : {}
+    });
+  }
+  return out;
+}
+function arrowField(vectors, opts) {
+  const scale = opts?.scale ?? 1;
+  const out = [];
+  for (const v of vectors) {
+    const to = [
+      v.from[0] + v.delta[0] * scale,
+      v.from[1] + v.delta[1] * scale,
+      v.from[2] + v.delta[2] * scale
+    ];
+    const arrow = arrowBetween(v.from, to, v.color ?? "#dc2626", v.width, v.id);
+    if (arrow) out.push(arrow);
+    if (v.label) out.push(billboardLabel(v.label, to[0], to[1], to[2], { color: opts?.labelColor }));
+  }
+  return out;
+}
+function helixDrawables(spec, opts) {
+  const count = spec.count ?? spec.rungs?.length ?? 0;
+  const rungs = Array.from({ length: count }, (_, i) => spec.rungs?.[i] ?? {});
+  const radius = spec.radius ?? 1;
+  const rise = spec.rise ?? 0.34;
+  const twistRad = (spec.twistDeg ?? 36) * (Math.PI / 180);
+  const strandAColor = spec.strandAColor ?? "#38bdf8";
+  const strandBColor = spec.strandBColor ?? "#fb923c";
+  const backboneRadius = spec.backboneRadius ?? 0.16;
+  const rungRadius = spec.rungRadius ?? 0.12;
+  const cx = spec.x ?? 0;
+  const cy = spec.y ?? 0;
+  const cz = spec.z ?? 0;
+  const unwoundCount = spec.unwoundCount ?? 0;
+  const unwindSpread = spec.unwindSpread ?? 1.8;
+  const strandA = [];
+  const strandB = [];
+  for (let i = 0; i < count; i++) {
+    const yi = cy + (i - (count - 1) / 2) * rise;
+    const theta = i * twistRad;
+    const s = i < unwoundCount ? unwindSpread : 1;
+    strandA.push([cx + s * radius * Math.cos(theta), yi, cz + s * radius * Math.sin(theta)]);
+    strandB.push([cx + s * radius * Math.cos(theta + Math.PI), yi, cz + s * radius * Math.sin(theta + Math.PI)]);
+  }
+  const out = [];
+  for (let i = 0; i < count; i++) {
+    out.push(meshSphere(`hx-a-${i}`, strandA[i][0], strandA[i][1], strandA[i][2], backboneRadius, strandAColor));
+    out.push(meshSphere(`hx-b-${i}`, strandB[i][0], strandB[i][1], strandB[i][2], backboneRadius, strandBColor));
+    if (i > 0) {
+      const segA = cylinderBetween(strandA[i - 1], strandA[i], backboneRadius, strandAColor);
+      if (segA) out.push(segA);
+      const segB = cylinderBetween(strandB[i - 1], strandB[i], backboneRadius, strandBColor);
+      if (segB) out.push(segB);
+    }
+    const rung = rungs[i];
+    const rungColor = rung.color ?? "#94a3b8";
+    const rod = cylinderBetween(strandA[i], strandB[i], rungRadius, rungColor);
+    if (rod) out.push(rod);
+    const mid = [
+      (strandA[i][0] + strandB[i][0]) / 2,
+      (strandA[i][1] + strandB[i][1]) / 2,
+      (strandA[i][2] + strandB[i][2]) / 2
+    ];
+    const markerRadius = rung.radius ?? rungRadius;
+    out.push(meshSphere(rung.id, mid[0], mid[1], mid[2], markerRadius, rungColor));
+    if (rung.label) out.push(billboardLabel(rung.label, mid[0], mid[1], mid[2] + markerRadius, { color: opts?.labelColor }));
+  }
+  return out;
+}
+function latticeDrawables(spec, opts) {
+  const nx = spec.nx ?? 2;
+  const ny = spec.ny ?? 2;
+  const nz = spec.nz ?? 2;
+  const latticeConstant = spec.latticeConstant ?? 2;
+  const bondRadius = spec.bondRadius ?? 0.06;
+  const highlightCell = spec.highlightCell ?? false;
+  const dimColor = spec.dimColor ?? "#475569";
+  const showLabels = spec.showLabels ?? false;
+  const selectedColor = spec.selectedColor ?? "#f59e0b";
+  const posByKey = /* @__PURE__ */ new Map();
+  const inCellByKey = /* @__PURE__ */ new Map();
+  const out = [];
+  for (const site of spec.basis) {
+    const snx = site.xEdge ? nx + 1 : nx;
+    const sny = site.yEdge ? ny + 1 : ny;
+    const snz = site.zEdge ? nz + 1 : nz;
+    for (let i = 0; i < snx; i++) {
+      for (let j = 0; j < sny; j++) {
+        for (let k = 0; k < snz; k++) {
+          const key = `${site.key}-${i}-${j}-${k}`;
+          const inCell = i + site.dx <= 1 && j + site.dy <= 1 && k + site.dz <= 1;
+          const pos = [
+            (i + site.dx) * latticeConstant - nx * latticeConstant / 2,
+            (j + site.dy) * latticeConstant - ny * latticeConstant / 2,
+            (k + site.dz) * latticeConstant - nz * latticeConstant / 2
+          ];
+          posByKey.set(key, pos);
+          inCellByKey.set(key, inCell);
+          const isSelected = spec.selectedId === `lat-${key}`;
+          const color = isSelected ? selectedColor : highlightCell && !inCell ? dimColor : site.color ?? "#2563eb";
+          const radius = (site.radius ?? 0.3) * (isSelected ? 1.4 : 1);
+          out.push(meshSphere(`lat-${key}`, pos[0], pos[1], pos[2], radius, color));
+          if (showLabels && site.element) {
+            out.push(billboardLabel(site.element, pos[0], pos[1], pos[2] + radius, { color: opts?.labelColor }));
+          }
+        }
+      }
+    }
+  }
+  const basisByKey = new Map(spec.basis.map((s) => [s.key, s]));
+  for (const bond of spec.bonds ?? []) {
+    const fromSite = basisByKey.get(bond.from);
+    const toSite = basisByKey.get(bond.to);
+    if (!fromSite || !toSite) continue;
+    const fnx = fromSite.xEdge ? nx + 1 : nx;
+    const fny = fromSite.yEdge ? ny + 1 : ny;
+    const fnz = fromSite.zEdge ? nz + 1 : nz;
+    const tnx = toSite.xEdge ? nx + 1 : nx;
+    const tny = toSite.yEdge ? ny + 1 : ny;
+    const tnz = toSite.zEdge ? nz + 1 : nz;
+    const bdx = bond.dx ?? 0;
+    const bdy = bond.dy ?? 0;
+    const bdz = bond.dz ?? 0;
+    for (let i = 0; i < fnx; i++) {
+      for (let j = 0; j < fny; j++) {
+        for (let k = 0; k < fnz; k++) {
+          const ti = i + bdx;
+          const tj = j + bdy;
+          const tk = k + bdz;
+          if (ti < 0 || ti >= tnx || tj < 0 || tj >= tny || tk < 0 || tk >= tnz) continue;
+          const fromKey = `${fromSite.key}-${i}-${j}-${k}`;
+          const toKey = `${toSite.key}-${ti}-${tj}-${tk}`;
+          const fromPos = posByKey.get(fromKey);
+          const toPos = posByKey.get(toKey);
+          if (!fromPos || !toPos) continue;
+          const dimmed = highlightCell && !(inCellByKey.get(fromKey) && inCellByKey.get(toKey));
+          const seg = cylinderBetween(fromPos, toPos, bondRadius, dimmed ? dimColor : bond.color ?? "#6b7280");
+          if (seg) out.push(seg);
+        }
+      }
+    }
+  }
+  return out;
+}
+var sceneLog, KNOWN_BLOOM_KEYS, Canvas3DHost;
 var init_learningScene3D = __esm({
   "components/learning/molecules/learningScene3D.tsx"() {
     "use client";
     init_atoms();
     init_Stack();
     init_useEventBus();
+    sceneLog = createLogger("almadar:ui:learning-scene-3d");
+    KNOWN_BLOOM_KEYS = /* @__PURE__ */ new Set(["intensity", "threshold", "smoothing"]);
     Canvas3DHost = lazy(
       () => import('@almadar/ui/components/molecules/game/three').then((m) => ({ default: m.Canvas3DHost }))
     );
     LearningScene3D.displayName = "LearningScene3D";
   }
 });
-var biologyLog, BiologyCanvas;
+var biologyLog, BIO_BAND_COLORS, BIO_STAGE_FILL, BIO_STAGE_TEXT, BiologyCanvas;
 var init_BiologyCanvas = __esm({
   "components/learning/molecules/BiologyCanvas.tsx"() {
     "use client";
@@ -9969,6 +11145,17 @@ var init_BiologyCanvas = __esm({
     init_LearningCanvas();
     init_learningScene3D();
     biologyLog = createLogger("almadar:ui:biology-canvas");
+    BIO_BAND_COLORS = ["#dcfce7", "#fef9c3", "#fee2e2", "#e0e7ff"];
+    BIO_STAGE_FILL = {
+      pending: "#e2e8f0",
+      active: "#3b82f6",
+      done: "#94a3b8"
+    };
+    BIO_STAGE_TEXT = {
+      pending: "#64748b",
+      active: "#ffffff",
+      done: "#ffffff"
+    };
     BiologyCanvas = ({
       className,
       width = 600,
@@ -9981,7 +11168,15 @@ var init_BiologyCanvas = __esm({
       post,
       nodes = [],
       edges = [],
+      compartments = [],
+      bands = [],
+      stages = [],
+      stageStyle = "timeline",
+      helix,
+      helix3d,
       shapes = [],
+      readouts,
+      traces,
       showGrid,
       shadows,
       interactive,
@@ -9996,19 +11191,148 @@ var init_BiologyCanvas = __esm({
         for (const n of nodes) {
           if (n.id) nodeById.set(n.id, n);
         }
+        const bandCount = bands.length;
+        for (let i = 0; i < bandCount; i++) {
+          const band = bands[i];
+          const bandColor = band.color ?? BIO_BAND_COLORS[i % BIO_BAND_COLORS.length];
+          const bandY = i * height / bandCount;
+          const bandH = height / bandCount;
+          out.push({
+            type: "rect",
+            x: 0,
+            y: bandY,
+            width,
+            height: bandH,
+            color: bandColor,
+            fill: bandColor,
+            opacity: 0.45
+          });
+          if (band.label) {
+            out.push({
+              type: "text",
+              x: 8,
+              y: bandY + 14,
+              text: band.label,
+              color: "#6b7280",
+              fontSize: 10
+            });
+          }
+        }
+        for (const c of compartments) {
+          const color = c.color ?? "#16a34a";
+          out.push({
+            type: "ellipse",
+            x: c.x,
+            y: c.y,
+            width: c.width,
+            height: c.height,
+            color,
+            fill: c.fill ?? `${color}1A`,
+            lineWidth: c.lineWidth ?? 2,
+            ...c.dash ? { dash: c.dash } : {}
+          });
+          if (c.label) {
+            out.push({
+              type: "text",
+              x: c.x,
+              y: c.y - c.height / 2 + 14,
+              text: c.label,
+              color: "#111827",
+              fontSize: 11,
+              align: "center"
+            });
+          }
+        }
+        if (helix) {
+          const hx = helix.x ?? 24;
+          const hy = helix.y ?? height * 0.25;
+          const hw = helix.width ?? width - 48;
+          const hh = helix.height ?? height * 0.5;
+          const rungs = helix.rungs;
+          const n = rungs.length;
+          const cy = hy + hh / 2;
+          const colorA = helix.colorA ?? "#2563eb";
+          const colorB = helix.colorB ?? "#dc2626";
+          const rungColor = helix.rungColor ?? "#94a3b8";
+          const fork = helix.fork ?? 0;
+          const maxSep = Math.min(hh - 8, 96);
+          const strandA = [];
+          const strandB = [];
+          const rungGeoms = [];
+          for (let i = 0; i < n; i++) {
+            const rx = hx + (i + 0.5) * hw / n;
+            const t = (i + 0.5) / n;
+            const paired = t >= fork;
+            const sep = paired ? 28 : 28 + (maxSep - 28) * ((fork - t) / fork);
+            strandA.push({ x: rx, y: cy - sep / 2 });
+            strandB.push({ x: rx, y: cy + sep / 2 });
+            rungGeoms.push({ rx, sep, rung: rungs[i], paired });
+          }
+          for (let i = 1; i < n; i++) {
+            out.push({ type: "line", x1: strandA[i - 1].x, y1: strandA[i - 1].y, x2: strandA[i].x, y2: strandA[i].y, color: colorA, lineWidth: 3 });
+          }
+          for (let i = 1; i < n; i++) {
+            out.push({ type: "line", x1: strandB[i - 1].x, y1: strandB[i - 1].y, x2: strandB[i].x, y2: strandB[i].y, color: colorB, lineWidth: 3 });
+          }
+          for (const g of rungGeoms) {
+            const rColor = g.rung.color ?? (g.rung.state === "new" ? "#16a34a" : rungColor);
+            const topY = cy - g.sep / 2;
+            const bottomY = cy + g.sep / 2;
+            if (g.paired) {
+              out.push({ type: "line", x1: g.rx, y1: topY, x2: g.rx, y2: bottomY, color: rColor });
+              if (g.rung.a) {
+                out.push({ type: "text", x: g.rx, y: cy - g.sep / 4, text: g.rung.a, fontSize: 9, align: "center", color: "#374151" });
+              }
+              if (g.rung.b) {
+                out.push({ type: "text", x: g.rx, y: cy + g.sep / 4, text: g.rung.b, fontSize: 9, align: "center", color: "#374151" });
+              }
+            } else {
+              const stubTopY = topY + 8;
+              const stubBottomY = bottomY - 8;
+              out.push({ type: "line", x1: g.rx, y1: topY, x2: g.rx, y2: stubTopY, color: rColor });
+              out.push({ type: "line", x1: g.rx, y1: bottomY, x2: g.rx, y2: stubBottomY, color: rColor });
+              if (g.rung.a) {
+                out.push({ type: "text", x: g.rx, y: stubTopY + 6, text: g.rung.a, fontSize: 9, align: "center", color: "#374151" });
+              }
+              if (g.rung.b) {
+                out.push({ type: "text", x: g.rx, y: stubBottomY - 6, text: g.rung.b, fontSize: 9, align: "center", color: "#374151" });
+              }
+            }
+          }
+        }
         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
-          });
+          const color = e.color ?? "#9ca3af";
+          if (e.directed) {
+            const rA = a.radius ?? 16;
+            const rB = b.radius ?? 16;
+            const dx = b.x - a.x;
+            const dy = b.y - a.y;
+            const dist = Math.max(1e-6, Math.hypot(dx, dy));
+            const ux = dx / dist;
+            const uy = dy / dist;
+            out.push({
+              type: "arrow",
+              x1: a.x + ux * rA,
+              y1: a.y + uy * rA,
+              x2: b.x - ux * rB,
+              y2: b.y - uy * rB,
+              color,
+              lineWidth: 2
+            });
+          } else {
+            out.push({
+              type: "line",
+              x1: a.x,
+              y1: a.y,
+              x2: b.x,
+              y2: b.y,
+              color,
+              lineWidth: 2
+            });
+          }
           if (e.label) {
             out.push({
               type: "text",
@@ -10021,6 +11345,8 @@ var init_BiologyCanvas = __esm({
           }
         }
         for (const n of nodes) {
+          const state = n.state ?? "default";
+          const muted = state === "muted";
           out.push({
             type: "circle",
             x: n.x,
@@ -10028,28 +11354,127 @@ var init_BiologyCanvas = __esm({
             radius: n.radius ?? 16,
             color: n.color ?? "#16a34a",
             fill: `${n.color ?? "#16a34a"}33`,
-            id: n.id
+            id: n.id,
+            ...muted ? { opacity: 0.35 } : {}
           });
+          if (state === "highlight") {
+            out.push({
+              type: "circle",
+              x: n.x,
+              y: n.y,
+              radius: (n.radius ?? 16) + 4,
+              color: "#f59e0b",
+              lineWidth: 2
+            });
+          }
           if (n.label) {
             out.push({
               type: "text",
               x: n.x,
               y: n.y + (n.radius ?? 16) + 14,
               text: n.label,
+              ...muted ? { opacity: 0.35 } : {},
               color: "#111827",
               fontSize: 12,
               align: "center"
             });
           }
         }
+        const stageCount = stages.length;
+        if (stageCount > 0) {
+          if (stageStyle === "ring") {
+            const cx = width / 2;
+            const cy = height / 2;
+            const R = Math.min(width, height) / 2 - 48;
+            const ringPoints = [];
+            for (let i = 0; i < stageCount; i++) {
+              const angleRad = (-90 + 360 * i / stageCount) * Math.PI / 180;
+              ringPoints.push({ x: cx + R * Math.cos(angleRad), y: cy + R * Math.sin(angleRad) });
+            }
+            if (stageCount >= 2) {
+              for (let i = 0; i < stageCount - 1; i++) {
+                const p1 = ringPoints[i];
+                const p2 = ringPoints[i + 1];
+                const dx = p2.x - p1.x;
+                const dy = p2.y - p1.y;
+                const dist = Math.max(1e-6, Math.hypot(dx, dy));
+                const ux = dx / dist;
+                const uy = dy / dist;
+                out.push({
+                  type: "arrow",
+                  x1: p1.x + ux * 46,
+                  y1: p1.y + uy * 46,
+                  x2: p2.x - ux * 46,
+                  y2: p2.y - uy * 46,
+                  color: "#94a3b8"
+                });
+              }
+            }
+            for (let i = 0; i < stageCount; i++) {
+              const stage = stages[i];
+              const state = stage.state ?? "pending";
+              const fill = stage.color ?? BIO_STAGE_FILL[state];
+              const w = Math.max(26, Math.min(84, stage.label.length * 6 + 10));
+              const h = 18;
+              const p = ringPoints[i];
+              out.push({ type: "rect", x: p.x - w / 2, y: p.y - h / 2, width: w, height: h, color: fill, fill });
+              out.push({ type: "text", x: p.x, y: p.y, text: stage.label, color: BIO_STAGE_TEXT[state], fontSize: 10, align: "center" });
+            }
+          } else {
+            const stripY = height - 32;
+            const slotW = (width - 16) / stageCount;
+            const chipGeoms = [];
+            for (let i = 0; i < stageCount; i++) {
+              chipGeoms.push({ x: 8 + i * slotW + 5, w: slotW - 10 });
+            }
+            for (let i = 0; i < stageCount - 1; i++) {
+              const midY = stripY + 13;
+              out.push({
+                type: "arrow",
+                x1: chipGeoms[i].x + chipGeoms[i].w,
+                y1: midY,
+                x2: chipGeoms[i + 1].x,
+                y2: midY,
+                color: "#94a3b8"
+              });
+            }
+            for (let i = 0; i < stageCount; i++) {
+              const stage = stages[i];
+              const state = stage.state ?? "pending";
+              const fill = stage.color ?? BIO_STAGE_FILL[state];
+              const g = chipGeoms[i];
+              out.push({ type: "rect", x: g.x, y: stripY, width: g.w, height: 26, color: fill, fill });
+              out.push({
+                type: "text",
+                x: g.x + g.w / 2,
+                y: stripY + 13,
+                text: stage.label,
+                color: BIO_STAGE_TEXT[state],
+                fontSize: 10,
+                align: "center"
+              });
+            }
+          }
+        }
         out.push(...shapes);
         return out;
-      }, [nodes, edges, shapes]);
+      }, [nodes, edges, compartments, bands, stages, stageStyle, helix, shapes, width, height]);
       const drawables3D = useMemo(() => {
         if (mode !== "3d") return [];
         if (shapes.length > 0) {
           biologyLog.debug("shapes ignored in 3D mode (pixel-authored 2D vocabulary)", { count: shapes.length });
         }
+        if (compartments.length > 0 || bands.length > 0 || stages.length > 0 || helix) {
+          biologyLog.debug("2D-only families ignored in 3D mode (pixel-authored 2D vocabulary)", {
+            compartments: compartments.length,
+            bands: bands.length,
+            stages: stages.length,
+            helix: helix != null
+          });
+        }
+        if (animate) {
+          biologyLog.debug("animate ignored in 3D mode (motion is entity-state driven)");
+        }
         const out = [];
         const labelColor = labelColorForBackground(backgroundColor);
         const nodeById = /* @__PURE__ */ new Map();
@@ -10083,15 +11508,21 @@ var init_BiologyCanvas = __esm({
             out.push(billboardLabel(n.label, n.x, n.y, nz + radius, { color: labelColor }));
           }
         }
+        if (helix3d) {
+          out.push(...helixDrawables(helix3d, { labelColor }));
+        }
         return out;
-      }, [mode, nodes, edges, shapes, backgroundColor]);
+      }, [mode, nodes, edges, shapes, compartments, bands, stages, helix, helix3d, animate, backgroundColor]);
       const nodeIndexById = useMemo(() => {
         const m = /* @__PURE__ */ new Map();
+        (helix3d?.rungs ?? []).forEach((rung, i) => {
+          if (rung.id) m.set(rung.id, i);
+        });
         nodes.forEach((n, i) => {
           if (n.id) m.set(n.id, i);
         });
         return m;
-      }, [nodes]);
+      }, [nodes, helix3d]);
       if (mode === "3d") {
         return /* @__PURE__ */ jsx(
           LearningScene3D,
@@ -10123,6 +11554,8 @@ var init_BiologyCanvas = __esm({
             height,
             backgroundColor,
             shapes: derivedShapes,
+            readouts,
+            traces,
             interactive: interactive ?? false,
             animate,
             onShapeClick,
@@ -19313,7 +20746,7 @@ function bondPerpendicular(a, b) {
   if (len < 1e-6) return [1, 0, 0];
   return [px / len, py / len, 0];
 }
-var chemistryLog, ChemistryCanvas;
+var chemistryLog, CHEM_BOND_STATE_COLOR, LONE_PAIR_ANGLES, ChemistryCanvas;
 var init_ChemistryCanvas = __esm({
   "components/learning/molecules/ChemistryCanvas.tsx"() {
     "use client";
@@ -19322,6 +20755,13 @@ var init_ChemistryCanvas = __esm({
     init_LearningCanvas();
     init_learningScene3D();
     chemistryLog = createLogger("almadar:ui:chemistry-canvas");
+    CHEM_BOND_STATE_COLOR = {
+      default: "#6b7280",
+      forming: "#16a34a",
+      breaking: "#dc2626",
+      highlight: "#f59e0b"
+    };
+    LONE_PAIR_ANGLES = [-90, 0, 90, 180];
     ChemistryCanvas = ({
       className,
       width = 600,
@@ -19335,7 +20775,14 @@ var init_ChemistryCanvas = __esm({
       atoms = [],
       bonds = [],
       arrows = [],
+      bondStyle = "thick",
+      containers = [],
+      equation,
+      equationColor,
+      lattice3d,
       shapes = [],
+      readouts,
+      traces,
       showGrid,
       shadows,
       interactive,
@@ -19350,21 +20797,118 @@ var init_ChemistryCanvas = __esm({
         for (const a of atoms) {
           if (a.id) atomById.set(a.id, a);
         }
+        for (const c of containers) {
+          const color = c.color ?? "#64748b";
+          if (c.level != null) {
+            const lv = c.level;
+            out.push({
+              type: "rect",
+              x: c.x + 1,
+              y: c.y + c.height * (1 - lv),
+              width: c.width - 2,
+              height: c.height * lv - 1,
+              color: c.levelColor ?? "#60a5fa",
+              fill: c.levelColor ?? "#60a5fa",
+              opacity: 0.5
+            });
+          }
+          out.push({
+            type: "rect",
+            x: c.x,
+            y: c.y,
+            width: c.width,
+            height: c.height,
+            color,
+            fill: c.fill,
+            lineWidth: c.lineWidth ?? 2
+          });
+          const divider = c.divider ?? "none";
+          if (divider !== "none") {
+            out.push({
+              type: "line",
+              x1: c.x + c.width / 2,
+              y1: c.y,
+              x2: c.x + c.width / 2,
+              y2: c.y + c.height,
+              color: c.dividerColor ?? color,
+              ...divider === "dashed" || divider === "dotted" ? { dash: divider } : {}
+            });
+          }
+          if (c.leftLabel) {
+            out.push({
+              type: "text",
+              x: c.x + c.width * 0.25,
+              y: c.y + 12,
+              text: c.leftLabel,
+              color: "#374151",
+              fontSize: 11,
+              align: "center"
+            });
+          }
+          if (c.rightLabel) {
+            out.push({
+              type: "text",
+              x: c.x + c.width * 0.75,
+              y: c.y + 12,
+              text: c.rightLabel,
+              color: "#374151",
+              fontSize: 11,
+              align: "center"
+            });
+          }
+          if (c.label) {
+            out.push({
+              type: "text",
+              x: c.x + c.width / 2,
+              y: c.y + c.height + 12,
+              text: c.label,
+              color: "#111827",
+              fontSize: 12,
+              align: "center"
+            });
+          }
+        }
         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
-          });
+          const state = b.state ?? "default";
+          const color = b.color ?? CHEM_BOND_STATE_COLOR[state];
+          const dash = state === "forming" || state === "breaking" ? "dashed" : void 0;
+          if (bondStyle === "parallel") {
+            const dx = c.x - a.x;
+            const dy = c.y - a.y;
+            const dist = Math.max(1e-6, Math.hypot(dx, dy));
+            const ux = dx / dist;
+            const uy = dy / dist;
+            const px = -uy;
+            const py = ux;
+            const offsets = b.type === "double" ? [-3, 3] : b.type === "triple" ? [-4, 0, 4] : [0];
+            for (const off of offsets) {
+              out.push({
+                type: "line",
+                x1: a.x + px * off,
+                y1: a.y + py * off,
+                x2: c.x + px * off,
+                y2: c.y + py * off,
+                color,
+                lineWidth: 2,
+                ...dash ? { dash } : {}
+              });
+            }
+          } else {
+            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,
+              ...dash ? { dash } : {}
+            });
+          }
         }
         for (const a of arrows) {
           const angle = (a.angle ?? 0) * (Math.PI / 180);
@@ -19413,15 +20957,62 @@ var init_ChemistryCanvas = __esm({
               align: "center"
             });
           }
+          const r = a.radius ?? 14;
+          if (a.charge) {
+            out.push({
+              type: "text",
+              x: a.x + r * 0.85,
+              y: a.y - r * 0.85,
+              text: a.charge,
+              color: "#111827",
+              fontSize: 9,
+              align: "left"
+            });
+          }
+          const lonePairs = Math.max(0, Math.min(4, a.lonePairs ?? 0));
+          for (let k = 0; k < lonePairs; k++) {
+            const angleRad = LONE_PAIR_ANGLES[k] * Math.PI / 180;
+            const cx = a.x + (r + 6) * Math.cos(angleRad);
+            const cy = a.y + (r + 6) * Math.sin(angleRad);
+            const perpX = -Math.sin(angleRad);
+            const perpY = Math.cos(angleRad);
+            for (const sign of [1, -1]) {
+              out.push({
+                type: "circle",
+                x: cx + perpX * 2.5 * sign,
+                y: cy + perpY * 2.5 * sign,
+                radius: 1.5,
+                color: "#374151",
+                fill: "#374151"
+              });
+            }
+          }
+        }
+        if (equation) {
+          out.push({
+            type: "text",
+            x: width / 2,
+            y: 14,
+            text: equation,
+            color: equationColor ?? "#111827",
+            fontSize: 13,
+            align: "center"
+          });
         }
         out.push(...shapes);
         return out;
-      }, [atoms, bonds, arrows, shapes]);
+      }, [atoms, bonds, arrows, bondStyle, containers, equation, equationColor, shapes, width]);
       const drawables3D = useMemo(() => {
         if (mode !== "3d") return [];
         if (shapes.length > 0) {
           chemistryLog.debug("shapes ignored in 3D mode (pixel-authored 2D vocabulary)", { count: shapes.length });
         }
+        if (containers.length > 0) {
+          chemistryLog.debug("containers ignored in 3D mode (pixel-authored 2D vocabulary)", { count: containers.length });
+        }
+        if (animate) {
+          chemistryLog.debug("animate ignored in 3D mode (motion is entity-state driven)");
+        }
         const out = [];
         const labelColor = labelColorForBackground(backgroundColor);
         const atomById = /* @__PURE__ */ new Map();
@@ -19468,8 +21059,11 @@ var init_ChemistryCanvas = __esm({
             out.push(billboardLabel(a.element, a.x, a.y, az + radius, { color: labelColor }));
           }
         }
+        if (lattice3d) {
+          out.push(...latticeDrawables(lattice3d, { labelColor }));
+        }
         return out;
-      }, [mode, atoms, bonds, arrows, shapes, backgroundColor]);
+      }, [mode, atoms, bonds, arrows, shapes, containers, lattice3d, animate, backgroundColor]);
       const atomIndexById = useMemo(() => {
         const m = /* @__PURE__ */ new Map();
         atoms.forEach((a, i) => {
@@ -19508,6 +21102,8 @@ var init_ChemistryCanvas = __esm({
             height,
             backgroundColor,
             shapes: derivedShapes,
+            readouts,
+            traces,
             interactive: interactive ?? false,
             animate,
             onShapeClick,
@@ -29420,6 +31016,10 @@ var init_molecules = __esm({
     init_GameShell();
   }
 });
+function formatTick(v) {
+  if (Number.isInteger(v)) return String(v);
+  return v.toFixed(2).replace(/0+$/, "").replace(/\.$/, "");
+}
 var MathCanvas;
 var init_MathCanvas = __esm({
   "components/learning/molecules/MathCanvas.tsx"() {
@@ -29439,10 +31039,19 @@ var init_MathCanvas = __esm({
       showAxes = true,
       showGrid = true,
       gridStep = 1,
+      showTickLabels = false,
+      showCurveLabels = false,
       curves = [],
       points = [],
       vectors = [],
+      regions = [],
+      bars = [],
+      guides = [],
+      angles = [],
+      hops = [],
       shapes = [],
+      readouts,
+      traces,
       interactive = false,
       animate = false,
       onShapeClick,
@@ -29456,6 +31065,8 @@ var init_MathCanvas = __esm({
         const plotH = height - margin * 2;
         const mapX = (x) => margin + (x - xMin) / (xMax - xMin) * plotW;
         const mapY = (y) => height - (margin + (y - yMin) / (yMax - yMin) * plotH);
+        const xAxisY = Math.max(margin, Math.min(height - margin, mapY(0)));
+        const yAxisX = Math.max(margin, Math.min(width - margin, mapX(0)));
         if (showGrid) {
           for (let x = Math.ceil(xMin / gridStep) * gridStep; x <= xMax; x += gridStep) {
             const px = mapX(x);
@@ -29466,14 +31077,99 @@ var init_MathCanvas = __esm({
             out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: "#e5e7eb", lineWidth: 1 });
           }
         }
+        if (showTickLabels) {
+          const labelEveryX = Math.max(1, Math.ceil((xMax - xMin) / gridStep / Math.floor(plotW / 40)));
+          let kx = 0;
+          for (let x = Math.ceil(xMin / gridStep) * gridStep; x <= xMax; x += gridStep, kx++) {
+            if (kx % labelEveryX === 0 && x !== 0) {
+              out.push({ type: "text", x: mapX(x), y: xAxisY + 12, text: formatTick(x), color: "#6b7280", fontSize: 10, align: "center" });
+            }
+          }
+          const labelEveryY = Math.max(1, Math.ceil((yMax - yMin) / gridStep / Math.floor(plotH / 28)));
+          let ky = 0;
+          for (let y = Math.ceil(yMin / gridStep) * gridStep; y <= yMax; y += gridStep, ky++) {
+            if (ky % labelEveryY === 0 && y !== 0) {
+              out.push({ type: "text", x: yAxisX - 6, y: mapY(y), text: formatTick(y), color: "#6b7280", fontSize: 10, align: "right" });
+            }
+          }
+          if (xMin <= 0 && xMax >= 0 && yMin <= 0 && yMax >= 0) {
+            out.push({ type: "text", x: yAxisX - 6, y: xAxisY + 12, text: "0", color: "#6b7280", fontSize: 10, align: "right" });
+          }
+        }
+        for (const region of regions) {
+          if (!region.samples || region.samples.length === 0) continue;
+          const baseline = region.baseline ?? 0;
+          const clampedPoint = (p) => ({
+            x: mapX(Math.min(xMax, Math.max(xMin, p.x))),
+            y: mapY(Math.min(yMax, Math.max(yMin, p.y)))
+          });
+          const upper = region.samples.map(clampedPoint);
+          const first = region.samples[0];
+          const last = region.samples[region.samples.length - 1];
+          const closing = region.samples2 && region.samples2.length > 0 ? [...region.samples2].reverse().map(clampedPoint) : [clampedPoint({ x: last.x, y: baseline }), clampedPoint({ x: first.x, y: baseline })];
+          const color = region.color ?? "#2563eb";
+          out.push({
+            type: "polygon",
+            points: [...upper, ...closing],
+            fill: color,
+            color,
+            opacity: region.opacity ?? 0.2,
+            lineWidth: 1
+          });
+          if (region.label) {
+            const mid = Math.floor(region.samples.length / 2);
+            out.push({
+              type: "text",
+              x: mapX((first.x + last.x) / 2),
+              y: (mapY(region.samples[mid].y) + mapY(baseline)) / 2,
+              text: region.label,
+              color: "#111827",
+              fontSize: 11
+            });
+          }
+        }
+        for (const bar of bars) {
+          if (bar.x + bar.width < xMin || bar.x > xMax) continue;
+          const y0 = bar.y0 ?? 0;
+          const color = bar.color ?? "#93c5fd";
+          out.push({
+            type: "rect",
+            x: mapX(bar.x),
+            y: mapY(Math.max(y0, bar.y1)),
+            width: mapX(bar.x + bar.width) - mapX(bar.x),
+            height: Math.abs(mapY(bar.y1) - mapY(y0)),
+            color,
+            fill: color,
+            opacity: bar.opacity ?? 0.5,
+            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 guide of guides) {
+          const color = guide.color ?? "#9ca3af";
+          const dash = guide.dash ?? "dashed";
+          if (guide.kind === "vline") {
+            if (guide.at < xMin || guide.at > xMax) continue;
+            const px = mapX(guide.at);
+            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color, dash });
+            if (guide.label) {
+              out.push({ type: "text", x: px + 4, y: margin + 10, text: guide.label, color: "#111827", fontSize: 11 });
+            }
+          } else {
+            if (guide.at < yMin || guide.at > yMax) continue;
+            const py = mapY(guide.at);
+            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color, dash });
+            if (guide.label) {
+              out.push({ type: "text", x: width - margin - 4, y: py - 8, text: guide.label, color: "#111827", fontSize: 11, align: "right" });
+            }
+          }
+        }
         for (const curve of curves) {
           if (!curve.samples || curve.samples.length < 2) continue;
+          let lastInRange;
           for (let i = 1; i < curve.samples.length; i++) {
             const a = curve.samples[i - 1];
             const b = curve.samples[i];
@@ -29485,19 +31181,97 @@ var init_MathCanvas = __esm({
               x2: mapX(b.x),
               y2: mapY(b.y),
               color: curve.color ?? "#2563eb",
-              lineWidth: 2
+              lineWidth: 2,
+              dash: curve.dash
+            });
+            lastInRange = b;
+          }
+          if (showCurveLabels && curve.label && lastInRange) {
+            out.push({
+              type: "text",
+              x: mapX(lastInRange.x) + 6,
+              y: mapY(lastInRange.y) - 6,
+              text: curve.label,
+              color: curve.color ?? "#2563eb",
+              fontSize: 11
+            });
+          }
+        }
+        for (const hop of hops) {
+          const x1 = mapX(hop.from);
+          const x2 = mapX(hop.to);
+          const peak = Math.min(36, plotH * 0.3);
+          const color = hop.color ?? "#7c3aed";
+          out.push({
+            type: "ellipse",
+            x: (x1 + x2) / 2,
+            y: xAxisY,
+            width: Math.abs(x2 - x1),
+            height: 2 * peak,
+            startAngle: 180,
+            endAngle: 360,
+            color
+          });
+          const s = Math.sign(hop.to - hop.from);
+          out.push({
+            type: "polygon",
+            points: [
+              { x: x2, y: xAxisY },
+              { x: x2 - 4 * s, y: xAxisY - 7 },
+              { x: x2 + 2 * s, y: xAxisY - 7 }
+            ],
+            fill: color,
+            color
+          });
+          if (hop.label) {
+            out.push({
+              type: "text",
+              x: (x1 + x2) / 2,
+              y: xAxisY - peak - 8,
+              text: hop.label,
+              color: "#111827",
+              fontSize: 10,
+              align: "center"
+            });
+          }
+        }
+        for (const angle of angles) {
+          const radius = angle.radius ?? 0.8;
+          const color = angle.color ?? "#0ea5e9";
+          out.push({
+            type: "ellipse",
+            x: mapX(angle.x),
+            y: mapY(angle.y),
+            width: 2 * radius * plotW / (xMax - xMin),
+            height: 2 * radius * plotH / (yMax - yMin),
+            startAngle: -angle.to,
+            endAngle: -angle.from,
+            color
+          });
+          if (angle.label) {
+            const mid = (angle.from + angle.to) / 2;
+            const rad = mid * Math.PI / 180;
+            out.push({
+              type: "text",
+              x: mapX(angle.x + 1.35 * radius * Math.cos(rad)),
+              y: mapY(angle.y + 1.35 * radius * Math.sin(rad)),
+              text: angle.label,
+              color: "#111827",
+              fontSize: 11,
+              align: "center"
             });
           }
         }
         for (const p of points) {
           if (p.x < xMin || p.x > xMax || p.y < yMin || p.y > yMax) continue;
+          const isOpen = p.style === "open";
           out.push({
             type: "circle",
             x: mapX(p.x),
             y: mapY(p.y),
             radius: p.radius ?? 4,
             color: p.color ?? "#dc2626",
-            fill: p.color ?? "#dc2626"
+            fill: isOpen ? "#ffffff" : p.color ?? "#dc2626"
           });
           if (p.label) {
             out.push({ type: "text", x: mapX(p.x) + 8, y: mapY(p.y) - 8, text: p.label, color: "#111827", fontSize: 12 });
@@ -29516,7 +31290,28 @@ var init_MathCanvas = __esm({
         }
         out.push(...shapes);
         return out;
-      }, [width, height, xMin, xMax, yMin, yMax, showAxes, showGrid, gridStep, curves, points, vectors, shapes]);
+      }, [
+        width,
+        height,
+        xMin,
+        xMax,
+        yMin,
+        yMax,
+        showAxes,
+        showGrid,
+        gridStep,
+        showTickLabels,
+        showCurveLabels,
+        curves,
+        points,
+        vectors,
+        regions,
+        bars,
+        guides,
+        angles,
+        hops,
+        shapes
+      ]);
       return /* @__PURE__ */ jsx(Card, { className, children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
         title ? /* @__PURE__ */ jsx(Typography, { variant: "h4", children: title }) : null,
         /* @__PURE__ */ jsx(
@@ -29525,6 +31320,8 @@ var init_MathCanvas = __esm({
             width,
             height,
             shapes: derivedShapes,
+            readouts,
+            traces,
             interactive,
             animate,
             onShapeClick,
@@ -29536,7 +31333,315 @@ var init_MathCanvas = __esm({
     };
   }
 });
-var physicsLog2, PhysicsCanvas;
+function formatMeterValue(v) {
+  return Number.isInteger(v) ? String(v) : String(Number(v.toFixed(2)));
+}
+function sceneObjectShapes(obj, canvasWidth, canvasHeight) {
+  const out = [];
+  const color = obj.color ?? "#334155";
+  switch (obj.kind) {
+    case "ground": {
+      const xStart = obj.x1 ?? 0;
+      const xEnd = obj.x2 ?? canvasWidth;
+      const y = obj.y ?? 0;
+      out.push({ type: "line", x1: xStart, y1: y, x2: xEnd, y2: y, color, lineWidth: 2 });
+      for (let hx = xStart + 7; hx <= xEnd; hx += 14) {
+        out.push({ type: "line", x1: hx, y1: y, x2: hx - 7, y2: y + 7, color, lineWidth: 1 });
+      }
+      if (obj.label) {
+        out.push({
+          type: "text",
+          x: (xStart + xEnd) / 2,
+          y: y - 10,
+          text: obj.label,
+          color: PHYSICS_LABEL_COLOR,
+          fontSize: 11,
+          align: "center"
+        });
+      }
+      break;
+    }
+    case "wall": {
+      const yStart = obj.y1 ?? 0;
+      const yEnd = obj.y2 ?? canvasHeight;
+      const x = obj.x ?? 0;
+      out.push({ type: "line", x1: x, y1: yStart, x2: x, y2: yEnd, color, lineWidth: 2 });
+      for (let hy = yStart + 7; hy <= yEnd; hy += 14) {
+        out.push({ type: "line", x1: x, y1: hy, x2: x - 7, y2: hy + 7, color, lineWidth: 1 });
+      }
+      if (obj.label) {
+        out.push({
+          type: "text",
+          x: x + 12,
+          y: (yStart + yEnd) / 2,
+          text: obj.label,
+          color: PHYSICS_LABEL_COLOR,
+          fontSize: 11,
+          align: "left"
+        });
+      }
+      break;
+    }
+    case "ramp": {
+      const x1 = obj.x1 ?? 0;
+      const y1 = obj.y1 ?? 0;
+      const x2 = obj.x2 ?? canvasWidth;
+      const y2 = obj.y2 ?? canvasHeight;
+      out.push({
+        type: "polygon",
+        points: [
+          { x: x1, y: y1 },
+          { x: x2, y: y2 },
+          { x: x1, y: y2 }
+        ],
+        color,
+        fill: obj.fill ?? "#e2e8f0",
+        lineWidth: 2
+      });
+      if (obj.label) {
+        out.push({
+          type: "text",
+          x: (2 * x1 + x2) / 3,
+          y: (y1 + 2 * y2) / 3,
+          text: obj.label,
+          color: PHYSICS_LABEL_COLOR,
+          fontSize: 11,
+          align: "center"
+        });
+      }
+      break;
+    }
+    case "box": {
+      const x = obj.x ?? 0;
+      const y = obj.y ?? 0;
+      const w = obj.width ?? 40;
+      const h = obj.height ?? 40;
+      out.push({ type: "rect", x, y, width: w, height: h, color, fill: obj.fill, lineWidth: 2 });
+      if (obj.label) {
+        out.push({
+          type: "text",
+          x: x + w / 2,
+          y: y + h / 2,
+          text: obj.label,
+          color: PHYSICS_LABEL_COLOR,
+          fontSize: 11,
+          align: "center"
+        });
+      }
+      break;
+    }
+    case "pivot": {
+      const x = obj.x ?? 0;
+      const y = obj.y ?? 0;
+      out.push({ type: "circle", x, y, radius: 5, color, fill: color });
+      out.push({ type: "line", x1: x - 14, y1: y - 8, x2: x + 14, y2: y - 8, color, lineWidth: 1 });
+      for (let k = 0; k < 5; k++) {
+        const hx = x - 14 + 7 * k;
+        out.push({ type: "line", x1: hx, y1: y - 8, x2: hx - 6, y2: y - 14, color, lineWidth: 1 });
+      }
+      if (obj.label) {
+        out.push({
+          type: "text",
+          x,
+          y: y - 20,
+          text: obj.label,
+          color: PHYSICS_LABEL_COLOR,
+          fontSize: 11,
+          align: "center"
+        });
+      }
+      break;
+    }
+  }
+  return out;
+}
+function trailShapes(trail) {
+  const n = trail.points.length;
+  if (n < 2) return [];
+  const color = trail.color ?? "#94a3b8";
+  const lineWidth = trail.width ?? 2;
+  const fade = trail.fade ?? true;
+  const globalOpacity = trail.opacity ?? 1;
+  const out = [];
+  for (let i = 0; i < n - 1; i++) {
+    const a = trail.points[i];
+    const b = trail.points[i + 1];
+    const segmentOpacity = fade ? 0.12 + 0.68 * i / (n - 1) : 0.6;
+    out.push({
+      type: "line",
+      x1: a.x,
+      y1: a.y,
+      x2: b.x,
+      y2: b.y,
+      color,
+      lineWidth,
+      opacity: segmentOpacity * globalOpacity
+    });
+  }
+  return out;
+}
+function constraintShapes(c, a, b) {
+  const color = c.color ?? "#9ca3af";
+  const kind = c.kind ?? "rod";
+  if (kind === "rod") {
+    return [{ type: "line", x1: a.x, y1: a.y, x2: b.x, y2: b.y, color, lineWidth: 2 }];
+  }
+  if (kind === "string") {
+    return [{ type: "line", x1: a.x, y1: a.y, x2: b.x, y2: b.y, color, lineWidth: 2, dash: "dashed" }];
+  }
+  const COILS = 8;
+  const AMP = 7;
+  const LEAD = 10;
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const dist = Math.max(1e-6, Math.hypot(dx, dy));
+  const ux = dx / dist;
+  const uy = dy / dist;
+  const perpX = -uy;
+  const perpY = ux;
+  const aPrime = { x: a.x + LEAD * ux, y: a.y + LEAD * uy };
+  const bPrime = { x: b.x - LEAD * ux, y: b.y - LEAD * uy };
+  const m = 2 * COILS;
+  const polyline = [{ x: a.x, y: a.y }, aPrime];
+  for (let j = 1; j <= m; j++) {
+    const t = j / (m + 1);
+    const baseX = aPrime.x + t * (bPrime.x - aPrime.x);
+    const baseY = aPrime.y + t * (bPrime.y - aPrime.y);
+    const sign = j % 2 === 0 ? 1 : -1;
+    polyline.push({ x: baseX + sign * AMP * perpX, y: baseY + sign * AMP * perpY });
+  }
+  polyline.push(bPrime, { x: b.x, y: b.y });
+  const out = [];
+  for (let i = 1; i < polyline.length; i++) {
+    out.push({
+      type: "line",
+      x1: polyline[i - 1].x,
+      y1: polyline[i - 1].y,
+      x2: polyline[i].x,
+      y2: polyline[i].y,
+      color,
+      lineWidth: 2
+    });
+  }
+  return out;
+}
+function vectorShapes(v, bodyById) {
+  let ax;
+  let ay;
+  if (v.body) {
+    const anchor = bodyById.get(v.body);
+    if (!anchor) return [];
+    ax = anchor.x;
+    ay = anchor.y;
+  } else {
+    ax = v.x ?? 0;
+    ay = v.y ?? 0;
+  }
+  const scale = v.scale ?? 1;
+  const color = v.color ?? "#dc2626";
+  const tx = ax + v.dx * scale;
+  const ty = ay + v.dy * scale;
+  const out = [{ type: "arrow", x1: ax, y1: ay, x2: tx, y2: ty, color, lineWidth: 2, dash: v.dash }];
+  if (v.label) {
+    const dist = Math.max(1e-6, Math.hypot(tx - ax, ty - ay));
+    const ux = (tx - ax) / dist;
+    const uy = (ty - ay) / dist;
+    out.push({
+      type: "text",
+      x: tx + 8 * ux,
+      y: ty + 8 * uy,
+      text: v.label,
+      color,
+      fontSize: 11,
+      align: "center"
+    });
+  }
+  return out;
+}
+function angleMarkerShapes(a) {
+  const radius = a.radius ?? 26;
+  const color = a.color ?? "#0ea5e9";
+  const out = [
+    {
+      type: "ellipse",
+      x: a.x,
+      y: a.y,
+      width: radius * 2,
+      height: radius * 2,
+      startAngle: a.from,
+      endAngle: a.to,
+      color,
+      lineWidth: 2
+    }
+  ];
+  if (a.label) {
+    const mid = (a.from + a.to) / 2 * (Math.PI / 180);
+    out.push({
+      type: "text",
+      x: a.x + (radius + 13) * Math.cos(mid),
+      y: a.y + (radius + 13) * Math.sin(mid),
+      text: a.label,
+      color,
+      fontSize: 11,
+      align: "center"
+    });
+  }
+  return out;
+}
+function fieldShapes(field, canvasWidth, canvasHeight) {
+  const spacing = field.spacing ?? 48;
+  const size = field.size ?? 14;
+  const color = field.color ?? "#94a3b8";
+  const regionX = field.x ?? 0;
+  const regionY = field.y ?? 0;
+  const regionW = field.width ?? canvasWidth;
+  const regionH = field.height ?? canvasHeight;
+  const out = [];
+  for (let gx = regionX + spacing / 2; gx < regionX + regionW; gx += spacing) {
+    for (let gy = regionY + spacing / 2; gy < regionY + regionH; gy += spacing) {
+      if (field.kind === "arrows") {
+        const rad = (field.angle ?? 0) * Math.PI / 180;
+        const hx = Math.cos(rad) * size / 2;
+        const hy = Math.sin(rad) * size / 2;
+        out.push({ type: "arrow", x1: gx - hx, y1: gy - hy, x2: gx + hx, y2: gy + hy, color, lineWidth: 2 });
+      } else if (field.kind === "into") {
+        const r = size / 3;
+        const d = 0.6 * r * Math.SQRT1_2;
+        out.push({ type: "circle", x: gx, y: gy, radius: r, color });
+        out.push({ type: "line", x1: gx - d, y1: gy - d, x2: gx + d, y2: gy + d, color, lineWidth: 1 });
+        out.push({ type: "line", x1: gx - d, y1: gy + d, x2: gx + d, y2: gy - d, color, lineWidth: 1 });
+      } else {
+        const r = size / 3;
+        out.push({ type: "circle", x: gx, y: gy, radius: r, color });
+        out.push({ type: "circle", x: gx, y: gy, radius: 1.5, color, fill: color });
+      }
+    }
+  }
+  return out;
+}
+function meterShapes(meters, canvasHeight) {
+  const n = meters.length;
+  const out = [];
+  const sharedMax = Math.max(1e-6, ...meters.map((m) => m.value));
+  meters.forEach((meter, i) => {
+    const rowY = canvasHeight - 10 - 16 * (n - i);
+    const color = meter.color ?? "#3b82f6";
+    const M = meter.max ?? sharedMax;
+    const w = Math.round(Math.min(1, Math.max(0, meter.value / M)) * 110);
+    out.push({ type: "text", x: 8, y: rowY + 8, text: meter.label, color: PHYSICS_LABEL_COLOR, fontSize: 10 });
+    out.push({ type: "rect", x: 52, y: rowY, width: w, height: 10, color, fill: color });
+    out.push({
+      type: "text",
+      x: 166,
+      y: rowY + 8,
+      text: formatMeterValue(meter.value),
+      color: "#6b7280",
+      fontSize: 9
+    });
+  });
+  return out;
+}
+var physicsLog2, PHYSICS_LABEL_COLOR, PhysicsCanvas;
 var init_PhysicsCanvas = __esm({
   "components/learning/molecules/PhysicsCanvas.tsx"() {
     "use client";
@@ -29545,6 +31650,7 @@ var init_PhysicsCanvas = __esm({
     init_LearningCanvas();
     init_learningScene3D();
     physicsLog2 = createLogger("almadar:ui:physics-canvas");
+    PHYSICS_LABEL_COLOR = "#374151";
     PhysicsCanvas = ({
       className,
       width = 600,
@@ -29561,7 +31667,18 @@ var init_PhysicsCanvas = __esm({
       showForces = false,
       velocityScale = 20,
       forceScale = 20,
+      sceneObjects = [],
+      trails = [],
+      vectors = [],
+      surface3d,
+      vectors3d = [],
+      vectorScale = 1,
+      angles = [],
+      field,
+      meters = [],
       shapes = [],
+      readouts,
+      traces,
       showGrid,
       shadows,
       interactive,
@@ -29576,19 +31693,14 @@ var init_PhysicsCanvas = __esm({
         for (const b of bodies) {
           if (b.id) bodyById.set(b.id, b);
         }
+        if (field) out.push(...fieldShapes(field, width, height));
+        for (const obj of sceneObjects) out.push(...sceneObjectShapes(obj, width, height));
+        for (const trail of trails) out.push(...trailShapes(trail));
         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
-          });
+          out.push(...constraintShapes(c, a, b));
         }
         for (const b of bodies) {
           out.push({
@@ -29633,14 +31745,51 @@ var init_PhysicsCanvas = __esm({
             });
           }
         }
+        for (const v of vectors) out.push(...vectorShapes(v, bodyById));
+        for (const a of angles) out.push(...angleMarkerShapes(a));
+        if (meters.length > 0) out.push(...meterShapes(meters, height));
         out.push(...shapes);
         return out;
-      }, [bodies, constraints, showVelocity, showForces, velocityScale, forceScale, shapes]);
+      }, [
+        bodies,
+        constraints,
+        showVelocity,
+        showForces,
+        velocityScale,
+        forceScale,
+        sceneObjects,
+        trails,
+        vectors,
+        angles,
+        field,
+        meters,
+        shapes,
+        width,
+        height
+      ]);
       const drawables3D = useMemo(() => {
         if (mode !== "3d") return [];
         if (shapes.length > 0) {
           physicsLog2.debug("shapes ignored in 3D mode (pixel-authored 2D vocabulary)", { count: shapes.length });
         }
+        if (sceneObjects.length > 0) {
+          physicsLog2.debug("sceneObjects ignored in 3D mode (pixel-authored 2D vocabulary)", { count: sceneObjects.length });
+        }
+        if (vectors.length > 0) {
+          physicsLog2.debug("vectors ignored in 3D mode (pixel-authored 2D vocabulary)", { count: vectors.length });
+        }
+        if (angles.length > 0) {
+          physicsLog2.debug("angles ignored in 3D mode (pixel-authored 2D vocabulary)", { count: angles.length });
+        }
+        if (field) {
+          physicsLog2.debug("field ignored in 3D mode (pixel-authored 2D vocabulary)");
+        }
+        if (meters.length > 0) {
+          physicsLog2.debug("meters ignored in 3D mode (pixel-authored 2D vocabulary)", { count: meters.length });
+        }
+        if (animate) {
+          physicsLog2.debug("animate ignored in 3D mode (motion is entity-state driven)");
+        }
         const out = [];
         const labelColor = labelColorForBackground(backgroundColor);
         const bodyById = /* @__PURE__ */ new Map();
@@ -29688,15 +31837,67 @@ var init_PhysicsCanvas = __esm({
             if (arrow) out.push(arrow);
           }
         }
+        for (const trail of trails) {
+          if (trail.fade !== void 0) {
+            physicsLog2.debug("trail.fade ignored in 3D mode (2D-only fade curve \u2014 3D draws an opaque tube)", { id: trail.id });
+          }
+          const points = trail.points.map((p) => [p.x, p.y, p.z ?? 0]);
+          out.push(
+            ...polylineTube(points, trail.width ?? 0.05, trail.color ?? "#94a3b8", {
+              ...trail.opacity !== void 0 ? { opacity: trail.opacity } : {}
+            })
+          );
+        }
+        if (surface3d) {
+          out.push(...heightFieldMesh(surface3d));
+        }
+        if (vectors3d.length > 0) {
+          out.push(
+            ...arrowField(
+              vectors3d.map((v) => ({
+                id: v.id,
+                from: [v.x, v.y, v.z ?? 0],
+                delta: [v.dx, v.dy, v.dz ?? 0],
+                color: v.color,
+                label: v.label,
+                width: v.width
+              })),
+              { scale: vectorScale, labelColor }
+            )
+          );
+        }
         return out;
-      }, [mode, bodies, constraints, showVelocity, showForces, velocityScale, forceScale, shapes, backgroundColor]);
+      }, [
+        mode,
+        bodies,
+        constraints,
+        showVelocity,
+        showForces,
+        velocityScale,
+        forceScale,
+        shapes,
+        sceneObjects,
+        trails,
+        vectors,
+        surface3d,
+        vectors3d,
+        vectorScale,
+        angles,
+        field,
+        meters,
+        animate,
+        backgroundColor
+      ]);
       const bodyIndexById = useMemo(() => {
         const m = /* @__PURE__ */ new Map();
+        vectors3d.forEach((v, i) => {
+          if (v.id) m.set(v.id, i);
+        });
         bodies.forEach((b, i) => {
           if (b.id) m.set(b.id, i);
         });
         return m;
-      }, [bodies]);
+      }, [bodies, vectors3d]);
       if (mode === "3d") {
         return /* @__PURE__ */ jsx(
           LearningScene3D,
@@ -29728,6 +31929,8 @@ var init_PhysicsCanvas = __esm({
             height,
             backgroundColor,
             shapes: derivedShapes,
+            readouts,
+            traces,
             interactive: interactive ?? false,
             animate,
             onShapeClick,
@@ -29878,7 +32081,7 @@ function layoutFlow(nodeIds, adjacency, roots, width, height, margin) {
   }
   return nodeIds.map((id) => positions.get(id));
 }
-function layoutTree(nodeIds, adjacency, roots, width, height, margin) {
+function layoutTree2(nodeIds, adjacency, roots, width, height, margin) {
   const effectiveRoots = roots.length > 0 ? roots : [nodeIds[0]];
   const layers = assignLayers(nodeIds, adjacency, effectiveRoots);
   const maxLayer = Math.max(...Array.from(layers.values()));
@@ -29934,7 +32137,7 @@ function computeStaticLayout(mode, input) {
   const adjacency = buildAdjacency(nodeIds, edges);
   const roots = findRoots(nodeIds, adjacency);
   if (mode === "flow") return layoutFlow(nodeIds, adjacency, roots, width, height, margin);
-  if (mode === "tree") return layoutTree(nodeIds, adjacency, roots, width, height, margin);
+  if (mode === "tree") return layoutTree2(nodeIds, adjacency, roots, width, height, margin);
   return layoutRadial(nodeIds, adjacency, roots, width, height, margin);
 }
 var init_graphViewLayouts = __esm({
@@ -30346,7 +32549,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect66, useRef: useRef65, useCallback: useCallback107, useState: useState104 } = React77__default;
+      const { useEffect: useEffect66, useRef: useRef65, useCallback: useCallback108, useState: useState104 } = React77__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 }) {
@@ -30392,7 +32595,7 @@ var init_MapView = __esm({
       }) {
         const eventBus = useEventBus2();
         const [clickedPosition, setClickedPosition] = useState104(null);
-        const handleMapClick = useCallback107((lat, lng) => {
+        const handleMapClick = useCallback108((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -30401,7 +32604,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback107((marker) => {
+        const handleMarkerClick = useCallback108((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -31177,26 +33380,6 @@ var init_Lightbox = __esm({
     Lightbox.displayName = "Lightbox";
   }
 });
-function useMediaQuery(query) {
-  const subscribe = useCallback(
-    (onChange) => {
-      const mql = window.matchMedia(query);
-      mql.addEventListener("change", onChange);
-      return () => mql.removeEventListener("change", onChange);
-    },
-    [query]
-  );
-  return useSyncExternalStore(
-    subscribe,
-    () => window.matchMedia(query).matches,
-    () => false
-  );
-}
-var init_useMediaQuery = __esm({
-  "hooks/useMediaQuery.ts"() {
-    "use client";
-  }
-});
 function renderIconInput3(icon, props) {
   return typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, ...props }) : /* @__PURE__ */ jsx(Icon, { icon, ...props });
 }
@@ -31235,8 +33418,8 @@ function TableView({
   columns,
   fields,
   itemActions,
-  maxInlineActions,
-  itemClickEvent,
+  maxInlineActions: _maxInlineActions,
+  itemClickEvent = "",
   selectable = false,
   selectEvent,
   selectedIds,
@@ -31286,7 +33469,6 @@ function TableView({
   const hasMore = pageSize > 0 && visibleCount < ordered2.length;
   const hasRenderProp = typeof children === "function";
   const idField = dndItemIdField ?? "id";
-  const isCoarsePointer = useMediaQuery("(pointer: coarse)");
   React77__default.useEffect(() => {
     tableViewLog.debug("render", {
       rowCount: data.length,
@@ -31328,21 +33510,14 @@ function TableView({
     const dir = sortColumn === (col.field ?? col.key) && sortDirection === "asc" ? "desc" : "asc";
     eventBus.emit(`UI:${sortEvent}`, { column: col.field ?? col.key, direction: dir });
   };
-  const handleActionClick = (action, row) => (e) => {
-    e.stopPropagation();
-    const payload = {
-      id: row.id,
-      row
-    };
-    eventBus.emit(`UI:${action.event}`, payload);
-  };
+  const rowClickEvent = itemClickEvent || actionDefs.find((a) => a.variant !== "danger")?.event;
   const handleRowClick = (row) => () => {
-    if (!itemClickEvent) return;
+    if (!rowClickEvent) return;
     const payload = {
       id: row.id,
       row
     };
-    eventBus.emit(`UI:${itemClickEvent}`, payload);
+    eventBus.emit(`UI:${rowClickEvent}`, payload);
   };
   const colFloors = React77__default.useMemo(
     () => colDefs.map((col) => {
@@ -31358,10 +33533,7 @@ function TableView({
   const statusNode = isLoading ? /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") }) }) : error ? /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "error", children: error.message }) }) : data.length === 0 ? /* @__PURE__ */ jsx(Box, { className: "text-center py-12", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: emptyMessage || t("empty.noItems") }) }) : null;
   const lk = LOOKS[look];
   const hasActions = actionDefs.length > 0;
-  const effectiveMaxInline = isCoarsePointer ? 0 : maxInlineActions;
-  const inlineActionCount = hasActions ? effectiveMaxInline != null ? Math.min(actionDefs.length, effectiveMaxInline) : actionDefs.length : 0;
-  const hasOverflowActions = hasActions && effectiveMaxInline != null && actionDefs.length > effectiveMaxInline;
-  const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
+  const actionsTrack = hasActions ? "3rem" : null;
   const gridTemplateColumns = [
     selectable ? "auto" : null,
     ...colDefs.map((c, i) => c.width ?? `minmax(${colFloors[i]}ch, 1fr)`),
@@ -31408,7 +33580,7 @@ function TableView({
             col.key
           );
         }),
-        hasActions && /* @__PURE__ */ jsx(Box, { "aria-hidden": true, className: "sticky right-0 bg-[var(--color-surface-subtle)]" })
+        hasActions && /* @__PURE__ */ jsx(Box, { "aria-hidden": true, className: "sticky right-0 bg-[var(--color-surface-subtle)] border-l border-[var(--color-border)] h-full" })
       ]
     }
   );
@@ -31420,12 +33592,12 @@ function TableView({
         role: "row",
         "data-entity-row": true,
         "data-entity-id": id,
-        onClick: itemClickEvent ? handleRowClick(row) : void 0,
+        onClick: rowClickEvent ? handleRowClick(row) : void 0,
         style: !hasRenderProp ? { gridTemplateColumns } : void 0,
         className: cn(
           "group items-center gap-3 transition-colors duration-fast",
           hasRenderProp ? "flex" : "grid",
-          itemClickEvent && "cursor-pointer",
+          rowClickEvent && "cursor-pointer",
           lk.rowPad,
           lk.divider && "border-b border-[var(--color-border)]",
           lk.striped && index % 2 === 1 && "bg-[var(--color-surface-subtle)]",
@@ -31433,7 +33605,7 @@ function TableView({
           look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-border)] [&>*:last-child]:border-r-0"
         ),
         children: [
-          selectable && /* @__PURE__ */ jsx(Box, { className: "flex items-center", onClick: itemClickEvent ? (e) => e.stopPropagation() : void 0, children: /* @__PURE__ */ jsx(
+          selectable && /* @__PURE__ */ jsx(Box, { className: "flex items-center", onClick: rowClickEvent ? (e) => e.stopPropagation() : void 0, children: /* @__PURE__ */ jsx(
             Checkbox,
             {
               checked: selected.has(id),
@@ -31454,53 +33626,37 @@ function TableView({
             }
             return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx("span", { className: "truncate text-foreground", children: formatCell(raw, col.format) }) }, col.key);
           }),
-          hasActions && /* @__PURE__ */ jsxs(
+          hasActions && /* @__PURE__ */ jsx(
             HStack,
             {
               gap: "xs",
-              onClick: itemClickEvent ? (e) => e.stopPropagation() : void 0,
+              onClick: rowClickEvent ? (e) => e.stopPropagation() : void 0,
               className: cn(
                 // Pinned: the fixed column tracks routinely overflow the caller's
-                // scroll container, which used to leave the actions off-screen.
-                // Opaque so scrolled cells pass underneath it.
+                // scroll container, which would leave the kebab off-screen.
+                // Opaque + hairline edge so it reads as a pinned column, not a
+                // floating control, while scrolled cells pass underneath.
                 "justify-end flex-shrink-0 sticky right-0 z-[1] transition-colors",
+                "border-l border-[var(--color-border)]",
                 lk.striped && index % 2 === 1 ? "bg-[var(--color-surface-subtle)]" : "bg-[var(--color-card)] group-hover:bg-[var(--color-surface-subtle)]"
               ),
-              children: [
-                (effectiveMaxInline != null ? actionDefs.slice(0, effectiveMaxInline) : actionDefs).map((action, i) => /* @__PURE__ */ jsxs(
-                  Button,
-                  {
-                    variant: action.variant === "primary" ? "primary" : "ghost",
-                    size: "sm",
-                    onClick: handleActionClick(action, row),
-                    "data-testid": `action-${action.event}`,
-                    "data-row-id": String(row.id),
-                    className: cn(action.variant === "danger" && "text-error hover:text-error hover:bg-error/10"),
-                    children: [
-                      action.icon && renderIconInput3(action.icon, { size: "xs", className: "mr-1" }),
-                      action.label
-                    ]
-                  },
-                  i
-                )),
-                effectiveMaxInline != null && actionDefs.length > effectiveMaxInline && /* @__PURE__ */ jsx(
-                  Menu,
-                  {
-                    position: "bottom-end",
-                    trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
-                    items: actionDefs.slice(effectiveMaxInline).map((action) => ({
-                      label: action.label,
-                      icon: action.icon,
-                      event: action.event,
-                      variant: action.variant === "danger" ? "danger" : "default",
-                      onClick: () => eventBus.emit(`UI:${action.event}`, {
-                        id: row.id,
-                        row
-                      })
-                    }))
-                  }
-                )
-              ]
+              children: /* @__PURE__ */ jsx(
+                Menu,
+                {
+                  position: "bottom-end",
+                  trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", "data-row-id": String(row.id), children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
+                  items: actionDefs.map((action) => ({
+                    label: action.label,
+                    icon: action.icon,
+                    event: action.event,
+                    variant: action.variant === "danger" ? "danger" : "default",
+                    onClick: () => eventBus.emit(`UI:${action.event}`, {
+                      id: row.id,
+                      row
+                    })
+                  }))
+                }
+              )
             }
           )
         ]
@@ -31543,7 +33699,6 @@ var init_TableView = __esm({
     init_format();
     init_getNestedValue();
     init_useEventBus();
-    init_useMediaQuery();
     init_Box();
     init_Stack();
     init_Typography();
@@ -40143,6 +42298,7 @@ var init_molecules2 = __esm({
     init_BiologyCanvas();
     init_ChemistryCanvas();
     init_AlgorithmCanvas();
+    init_AlgoGraphCanvas();
     init_learningScene3D();
     init_GraphView();
     init_MapView();
@@ -46825,6 +48981,7 @@ var init_component_registry_generated = __esm({
     init_ActionTile();
     init_ActivationBlock();
     init_ComponentPatterns();
+    init_AlgoGraphCanvas();
     init_AlgorithmCanvas();
     init_AnimatedCounter();
     init_AnimatedGraphic();
@@ -47088,6 +49245,7 @@ var init_component_registry_generated = __esm({
       "ActivationBlock": ActivationBlock,
       "Alert": AlertPattern,
       "AlertPattern": AlertPattern,
+      "AlgoGraphCanvas": AlgoGraphCanvas,
       "AlgorithmCanvas": AlgorithmCanvas,
       "AnimatedCounter": AnimatedCounter,
       "AnimatedGraphic": AnimatedGraphic,
@@ -50560,7 +52718,23 @@ init_useAuthContext();
 init_useSwipeGesture();
 init_useLongPress();
 init_useDragReorder();
-init_useMediaQuery();
+function useMediaQuery(query) {
+  const subscribe = useCallback(
+    (onChange) => {
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
+    },
+    [query]
+  );
+  return useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(query).matches,
+    () => false
+  );
+}
+
+// hooks/index.ts
 init_useInfiniteScroll();
 init_usePullToRefresh();
 init_useCanvasGestures();
@@ -50806,4 +52980,4 @@ function useGitHubBranches(owner, repo, enabled = true) {
   });
 }
 
-export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AlgorithmCanvas, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AtlasImage, AtlasPanel, AuthLayout, Avatar, Badge, BehaviorView, BiologyCanvas, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, Button, ButtonGroup, CTABanner, CalendarGrid, Canvas, Canvas2D, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, Center, Chart, ChartLegend, ChatBar, Checkbox, ChemistryCanvas, ChoiceButton, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, ControlGrid, CounterTemplate, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DetailPanel, Dialog, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ELEMENT_SELECTED_EVENT, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmojiPicker, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioToggle, GameHud, GameIcon, GameMenu, GameShell, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, IconPicker, ImportPreviewTree, ImportProgress, ImportSourcePicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, LearningCanvas, LearningScene3D, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MathCanvas, MatrixQuestion, MediaGallery, Menu, Meter, Modal, ModalSlot, ModuleCard, Navigation, NodeSlotEditor, NotifyListener, NumberStepper, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, PageTransition, Pagination, PatternTile, PhysicsCanvas, Popover, PositionedCanvas, Presence, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, RichBlockEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, ServiceCatalog, SharedEntityStoreContext, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateGraph, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StepFlow, StepFlowOrganism, SubagentTracePanel, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UploadDropZone, VStack, VersionDiff, ViolationAlert, VoteStack, WizardContainer, WizardNavigation, WizardProgress, arrowBetween, billboardLabel, boardEntity, bool, calculateAttackTargets, calculateValidMoves, cn, createInitialGameState, createSharedEntityStore, createTranslate, createUnitAnimationState, cylinderBetween, get3DClickPayload, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, makeAsset, makeAssetMap, mapBookData, meshSphere, num, objAvailableActions, objAvailableEvents, objCurrentState, objIcon, objId, objMaxRules, objName, objRules, objStates, parseEditFocus, parseLessonSegments, parseMarkdownWithCodeBlocks, parseQueryBinding, pendulum, projectileMotion, registerCodeLanguageLoader, resolveFieldMap, resolveFrame, resolveSheetDirection, rows, runTickFrame, screenToIso, springOscillator, str, tickAnimationState, toCodeLanguage, transitionAnimation, unitHealth, unitPosition, unitTeam, useAgentChat, useAnchorRect, useAtlasSliceDataUrl, useAuthContext, useCamera, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useLongPress, useMediaQuery, useOrbitalHistory, usePresence, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSharedEntitySnapshot, useSharedEntityStore, useSharedEntityStoreContext, useSwipeGesture, useTapReveal, useTraitListens, useTranslate114 as useTranslate, useUIEvents, useUISlotManager, useUnitSpriteAtlas, useValidation, vec2 };
+export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AlgoGraphCanvas, AlgorithmCanvas, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AtlasImage, AtlasPanel, AuthLayout, Avatar, Badge, BehaviorView, BiologyCanvas, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, Button, ButtonGroup, CTABanner, CalendarGrid, Canvas, Canvas2D, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, Center, Chart, ChartLegend, ChatBar, Checkbox, ChemistryCanvas, ChoiceButton, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, ControlGrid, CounterTemplate, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DetailPanel, Dialog, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ELEMENT_SELECTED_EVENT, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmojiPicker, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioToggle, GameHud, GameIcon, GameMenu, GameShell, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, IconPicker, ImportPreviewTree, ImportProgress, ImportSourcePicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, LearningCanvas, LearningScene3D, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MathCanvas, MatrixQuestion, MediaGallery, Menu, Meter, Modal, ModalSlot, ModuleCard, Navigation, NodeSlotEditor, NotifyListener, NumberStepper, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, PageTransition, Pagination, PatternTile, PhysicsCanvas, Popover, PositionedCanvas, Presence, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, RichBlockEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, ServiceCatalog, SharedEntityStoreContext, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateGraph, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StepFlow, StepFlowOrganism, SubagentTracePanel, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UploadDropZone, VStack, VersionDiff, ViolationAlert, VoteStack, WizardContainer, WizardNavigation, WizardProgress, arrowBetween, billboardLabel, boardEntity, bool, calculateAttackTargets, calculateValidMoves, cn, createInitialGameState, createSharedEntityStore, createTranslate, createUnitAnimationState, cylinderBetween, get3DClickPayload, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, makeAsset, makeAssetMap, mapBookData, meshSphere, num, objAvailableActions, objAvailableEvents, objCurrentState, objIcon, objId, objMaxRules, objName, objRules, objStates, parseEditFocus, parseLessonSegments, parseMarkdownWithCodeBlocks, parseQueryBinding, pendulum, projectileMotion, registerCodeLanguageLoader, resolveFieldMap, resolveFrame, resolveSheetDirection, rows, runTickFrame, screenToIso, springOscillator, str, tickAnimationState, toCodeLanguage, transitionAnimation, unitHealth, unitPosition, unitTeam, useAgentChat, useAnchorRect, useAtlasSliceDataUrl, useAuthContext, useCamera, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useLongPress, useMediaQuery, useOrbitalHistory, usePresence, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSharedEntitySnapshot, useSharedEntityStore, useSharedEntityStoreContext, useSwipeGesture, useTapReveal, useTraitListens, useTranslate114 as useTranslate, useUIEvents, useUISlotManager, useUnitSpriteAtlas, useValidation, vec2 };