@almadar/ui 5.149.0 → 5.151.0

package/dist/providers/index.cjs

@@ -207,7 +207,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);
@@ -11646,6 +11646,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 };
@@ -11679,13 +11687,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;
@@ -11751,6 +11760,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) {
@@ -11797,21 +11820,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,
@@ -11837,6 +11992,12 @@ var init_LearningCanvas = __esm({
         }
         return -1;
       }, [shapes]);
+      const derivedShapes = React87.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 = React87.useCallback(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -11853,13 +12014,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]);
       React87.useEffect(() => {
         draw();
       }, [draw]);
@@ -13792,7 +13953,363 @@ var init_ComponentPatterns = __esm({
     AlertPattern.displayName = "AlertPattern";
   }
 });
-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 = React87.useMemo(() => {
+        const m = /* @__PURE__ */ new Map();
+        for (const n of nodes) m.set(n.id, n);
+        return m;
+      }, [nodes]);
+      const nodeIndexById = React87.useMemo(() => {
+        const m = /* @__PURE__ */ new Map();
+        nodes.forEach((n, i) => m.set(n.id, i));
+        return m;
+      }, [nodes]);
+      const derivedShapes = React87.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 = React87.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__ */ jsxRuntime.jsx(Card, { className, children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", children: title }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LearningCanvas,
+          {
+            width,
+            height,
+            backgroundColor,
+            shapes: derivedShapes,
+            interactive,
+            animate,
+            onShapeClick: 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";
@@ -13804,6 +14321,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,
@@ -13813,6 +14367,14 @@ var init_AlgorithmCanvas = __esm({
       bars = [],
       cells = [],
       pointers = [],
+      ranges = [],
+      slots = [],
+      slotOrientation = "horizontal",
+      frames = [],
+      buckets = [],
+      auxBars = [],
+      rowLabels = [],
+      colLabels = [],
       shapes = [],
       interactive = false,
       animate = false,
@@ -13822,12 +14384,35 @@ var init_AlgorithmCanvas = __esm({
     }) => {
       const derivedShapes = React87.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;
@@ -13857,6 +14442,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;
@@ -13864,7 +14532,7 @@ var init_AlgorithmCanvas = __esm({
             out.push({
               type: "arrow",
               x1: cx,
-              y1: height - 6,
+              y1: panelYBars + primaryH - 18,
               x2: cx,
               y2: baseline + 4,
               color,
@@ -13874,7 +14542,7 @@ var init_AlgorithmCanvas = __esm({
               out.push({
                 type: "text",
                 x: cx,
-                y: height - 22,
+                y: panelYBars + primaryH - 8,
                 text: p.label,
                 color,
                 fontSize: 11,
@@ -13883,14 +14551,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",
@@ -13914,11 +14679,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__ */ jsxRuntime.jsx(Card, { className, children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
         title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", children: title }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -14932,6 +15893,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,
@@ -14997,7 +15964,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);
@@ -15025,6 +15992,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]
   };
@@ -15051,20 +16019,228 @@ function get3DClickPayload(onShapeClick, idToIndex) {
   if (!onShapeClick) return void 0;
   return (id) => onShapeClick({ id, index: idToIndex.get(id) ?? -1 });
 }
-var Canvas3DHost2;
+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, Canvas3DHost2;
 var init_learningScene3D = __esm({
   "components/learning/molecules/learningScene3D.tsx"() {
     "use client";
     init_atoms();
     init_Stack();
     init_useEventBus();
+    sceneLog = logger.createLogger("almadar:ui:learning-scene-3d");
+    KNOWN_BLOOM_KEYS = /* @__PURE__ */ new Set(["intensity", "threshold", "smoothing"]);
     Canvas3DHost2 = React87.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";
@@ -15073,6 +16249,17 @@ var init_BiologyCanvas = __esm({
     init_LearningCanvas();
     init_learningScene3D();
     biologyLog = logger.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,
@@ -15085,7 +16272,15 @@ var init_BiologyCanvas = __esm({
       post,
       nodes = [],
       edges = [],
+      compartments = [],
+      bands = [],
+      stages = [],
+      stageStyle = "timeline",
+      helix,
+      helix3d,
       shapes = [],
+      readouts,
+      traces,
       showGrid,
       shadows,
       interactive,
@@ -15100,19 +16295,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",
@@ -15125,6 +16449,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,
@@ -15132,28 +16458,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 = React87.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();
@@ -15187,15 +16612,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 = React87.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__ */ jsxRuntime.jsx(
           LearningScene3D,
@@ -15227,6 +16658,8 @@ var init_BiologyCanvas = __esm({
             height,
             backgroundColor,
             shapes: derivedShapes,
+            readouts,
+            traces,
             interactive: interactive ?? false,
             animate,
             onShapeClick,
@@ -22076,7 +23509,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";
@@ -22085,6 +23518,13 @@ var init_ChemistryCanvas = __esm({
     init_LearningCanvas();
     init_learningScene3D();
     chemistryLog = logger.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,
@@ -22098,7 +23538,14 @@ var init_ChemistryCanvas = __esm({
       atoms = [],
       bonds = [],
       arrows = [],
+      bondStyle = "thick",
+      containers = [],
+      equation,
+      equationColor,
+      lattice3d,
       shapes = [],
+      readouts,
+      traces,
       showGrid,
       shadows,
       interactive,
@@ -22113,21 +23560,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);
@@ -22176,15 +23720,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 = React87.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();
@@ -22231,8 +23822,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 = React87.useMemo(() => {
         const m = /* @__PURE__ */ new Map();
         atoms.forEach((a, i) => {
@@ -22271,6 +23865,8 @@ var init_ChemistryCanvas = __esm({
             height,
             backgroundColor,
             shapes: derivedShapes,
+            readouts,
+            traces,
             interactive: interactive ?? false,
             animate,
             onShapeClick,
@@ -28460,6 +30056,10 @@ var init_ProgressDots = __esm({
     ProgressDots.displayName = "ProgressDots";
   }
 });
+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"() {
@@ -28479,10 +30079,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,
@@ -28496,6 +30105,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);
@@ -28506,14 +30117,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];
@@ -28525,19 +30221,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 });
@@ -28556,7 +30330,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__ */ jsxRuntime.jsx(Card, { className, children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
         title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", children: title }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -28565,6 +30360,8 @@ var init_MathCanvas = __esm({
             width,
             height,
             shapes: derivedShapes,
+            readouts,
+            traces,
             interactive,
             animate,
             onShapeClick,
@@ -28576,7 +30373,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";
@@ -28585,6 +30690,7 @@ var init_PhysicsCanvas = __esm({
     init_LearningCanvas();
     init_learningScene3D();
     physicsLog2 = logger.createLogger("almadar:ui:physics-canvas");
+    PHYSICS_LABEL_COLOR = "#374151";
     PhysicsCanvas = ({
       className,
       width = 600,
@@ -28601,7 +30707,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,
@@ -28616,19 +30733,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({
@@ -28673,14 +30785,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 = React87.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();
@@ -28728,15 +30877,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 = React87.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__ */ jsxRuntime.jsx(
           LearningScene3D,
@@ -28768,6 +30969,8 @@ var init_PhysicsCanvas = __esm({
             height,
             backgroundColor,
             shapes: derivedShapes,
+            readouts,
+            traces,
             interactive: interactive ?? false,
             animate,
             onShapeClick,
@@ -28918,7 +31121,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()));
@@ -28974,7 +31177,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({
@@ -30217,26 +32420,6 @@ var init_Lightbox = __esm({
     Lightbox.displayName = "Lightbox";
   }
 });
-function useMediaQuery(query) {
-  const subscribe = React87.useCallback(
-    (onChange) => {
-      const mql = window.matchMedia(query);
-      mql.addEventListener("change", onChange);
-      return () => mql.removeEventListener("change", onChange);
-    },
-    [query]
-  );
-  return React87.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__ */ jsxRuntime.jsx(Icon, { name: icon, ...props }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, ...props });
 }
@@ -30275,8 +32458,8 @@ function TableView({
   columns,
   fields,
   itemActions,
-  maxInlineActions,
-  itemClickEvent,
+  maxInlineActions: _maxInlineActions,
+  itemClickEvent = "",
   selectable = false,
   selectEvent,
   selectedIds,
@@ -30326,7 +32509,6 @@ function TableView({
   const hasMore = pageSize > 0 && visibleCount < ordered2.length;
   const hasRenderProp = typeof children === "function";
   const idField = dndItemIdField ?? "id";
-  const isCoarsePointer = useMediaQuery("(pointer: coarse)");
   React87__namespace.default.useEffect(() => {
     tableViewLog.debug("render", {
       rowCount: data.length,
@@ -30368,21 +32550,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 = React87__namespace.default.useMemo(
     () => colDefs.map((col) => {
@@ -30398,10 +32573,7 @@ function TableView({
   const statusNode = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") }) }) : error ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "error", children: error.message }) }) : data.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "text-center py-12", children: /* @__PURE__ */ jsxRuntime.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)`),
@@ -30448,7 +32620,7 @@ function TableView({
             col.key
           );
         }),
-        hasActions && /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": true, className: "sticky right-0 bg-[var(--color-surface-subtle)]" })
+        hasActions && /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": true, className: "sticky right-0 bg-[var(--color-surface-subtle)] border-l border-[var(--color-border)] h-full" })
       ]
     }
   );
@@ -30460,12 +32632,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)]",
@@ -30473,7 +32645,7 @@ function TableView({
           look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-border)] [&>*:last-child]:border-r-0"
         ),
         children: [
-          selectable && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center", onClick: itemClickEvent ? (e) => e.stopPropagation() : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+          selectable && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center", onClick: rowClickEvent ? (e) => e.stopPropagation() : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
             Checkbox,
             {
               checked: selected.has(id),
@@ -30494,53 +32666,37 @@ function TableView({
             }
             return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-foreground", children: formatCell(raw, col.format) }) }, col.key);
           }),
-          hasActions && /* @__PURE__ */ jsxRuntime.jsxs(
+          hasActions && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  Menu,
-                  {
-                    position: "bottom-end",
-                    trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                Menu,
+                {
+                  position: "bottom-end",
+                  trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", "data-row-id": String(row.id), children: /* @__PURE__ */ jsxRuntime.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
+                    })
+                  }))
+                }
+              )
             }
           )
         ]
@@ -30583,7 +32739,6 @@ var init_TableView = __esm({
     init_format();
     init_getNestedValue();
     init_useEventBus();
-    init_useMediaQuery();
     init_Box();
     init_Stack();
     init_Typography();
@@ -45642,6 +47797,7 @@ var init_component_registry_generated = __esm({
     init_ActionTile();
     init_ActivationBlock();
     init_ComponentPatterns();
+    init_AlgoGraphCanvas();
     init_AlgorithmCanvas();
     init_AnimatedCounter();
     init_AnimatedGraphic();
@@ -45905,6 +48061,7 @@ var init_component_registry_generated = __esm({
       "ActivationBlock": ActivationBlock,
       "Alert": AlertPattern,
       "AlertPattern": AlertPattern,
+      "AlgoGraphCanvas": AlgoGraphCanvas,
       "AlgorithmCanvas": AlgorithmCanvas,
       "AnimatedCounter": AnimatedCounter,
       "AnimatedGraphic": AnimatedGraphic,