@almadar/ui 5.94.1 → 5.95.0

package/dist/components/index.cjs

@@ -8595,6 +8595,462 @@ var init_ComponentPatterns = __esm({
     AlertPattern.displayName = "AlertPattern";
   }
 });
+function resolveColor2(color, ctx, fallback) {
+  if (!color) return fallback;
+  if (color.startsWith("var(")) {
+    ctx.canvas.style;
+    const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color);
+    if (m) {
+      const computed = getComputedStyle(ctx.canvas).getPropertyValue(m[1]).trim();
+      return computed || m[2]?.trim() || fallback;
+    }
+  }
+  return color;
+}
+function shapeBounds(shape) {
+  switch (shape.type) {
+    case "line":
+    case "arrow":
+      if (shape.x1 == null || shape.y1 == null || shape.x2 == null || shape.y2 == null) return null;
+      return {
+        x: Math.min(shape.x1, shape.x2) - 6,
+        y: Math.min(shape.y1, shape.y2) - 6,
+        w: Math.abs(shape.x2 - shape.x1) + 12,
+        h: Math.abs(shape.y2 - shape.y1) + 12
+      };
+    case "circle":
+      if (shape.x == null || shape.y == null || shape.radius == null) return null;
+      return {
+        x: shape.x - shape.radius - 4,
+        y: shape.y - shape.radius - 4,
+        w: shape.radius * 2 + 8,
+        h: shape.radius * 2 + 8
+      };
+    case "rect":
+      if (shape.x == null || shape.y == null || shape.width == null || shape.height == null) return null;
+      return { x: shape.x - 4, y: shape.y - 4, w: shape.width + 8, h: shape.height + 8 };
+    case "polygon":
+      if (!shape.points || shape.points.length === 0) return null;
+      {
+        const xs = shape.points.map((p) => p.x);
+        const ys = shape.points.map((p) => p.y);
+        const minX = Math.min(...xs);
+        const minY = Math.min(...ys);
+        return {
+          x: minX - 4,
+          y: minY - 4,
+          w: Math.max(...xs) - minX + 8,
+          h: Math.max(...ys) - minY + 8
+        };
+      }
+    case "text":
+      if (shape.x == null || shape.y == null) return null;
+      return { x: shape.x - 4, y: shape.y - (shape.fontSize ?? 14) - 4, w: 120, h: (shape.fontSize ?? 14) + 8 };
+    default:
+      return null;
+  }
+}
+function drawArrowHead(ctx, x1, y1, x2, y2, size) {
+  const angle = Math.atan2(y2 - y1, x2 - x1);
+  ctx.beginPath();
+  ctx.moveTo(x2, y2);
+  ctx.lineTo(x2 - size * Math.cos(angle - Math.PI / 6), y2 - size * Math.sin(angle - Math.PI / 6));
+  ctx.lineTo(x2 - size * Math.cos(angle + Math.PI / 6), y2 - size * Math.sin(angle + Math.PI / 6));
+  ctx.closePath();
+  ctx.fill();
+}
+function drawShape(ctx, shape, width, height) {
+  ctx.save();
+  const opacity = shape.opacity ?? 1;
+  ctx.globalAlpha = opacity;
+  const stroke = resolveColor2(shape.color, ctx, "#333333");
+  const fill = shape.fill ? resolveColor2(shape.fill, ctx, "#cccccc") : void 0;
+  ctx.lineWidth = shape.lineWidth ?? 2;
+  switch (shape.type) {
+    case "grid": {
+      const step = shape.step ?? 40;
+      ctx.strokeStyle = stroke;
+      ctx.globalAlpha = opacity * 0.25;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      for (let x = 0; x <= width; x += step) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+      }
+      for (let y = 0; y <= height; y += step) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+      }
+      ctx.stroke();
+      break;
+    }
+    case "axis": {
+      const axis = shape.axis ?? "x";
+      ctx.strokeStyle = stroke;
+      ctx.lineWidth = shape.lineWidth ?? 2;
+      ctx.beginPath();
+      if (axis === "x") {
+        ctx.moveTo(0, height / 2);
+        ctx.lineTo(width, height / 2);
+      } else {
+        ctx.moveTo(width / 2, 0);
+        ctx.lineTo(width / 2, height);
+      }
+      ctx.stroke();
+      break;
+    }
+    case "line": {
+      if (shape.x1 == null || shape.y1 == null || shape.x2 == null || shape.y2 == null) break;
+      ctx.strokeStyle = stroke;
+      ctx.beginPath();
+      ctx.moveTo(shape.x1, shape.y1);
+      ctx.lineTo(shape.x2, shape.y2);
+      ctx.stroke();
+      break;
+    }
+    case "arrow": {
+      if (shape.x1 == null || shape.y1 == null || shape.x2 == null || shape.y2 == null) break;
+      ctx.strokeStyle = stroke;
+      ctx.fillStyle = stroke;
+      ctx.beginPath();
+      ctx.moveTo(shape.x1, shape.y1);
+      ctx.lineTo(shape.x2, shape.y2);
+      ctx.stroke();
+      drawArrowHead(ctx, shape.x1, shape.y1, shape.x2, shape.y2, 10);
+      break;
+    }
+    case "circle": {
+      if (shape.x == null || shape.y == null || shape.radius == null) break;
+      ctx.beginPath();
+      ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
+      if (fill) {
+        ctx.fillStyle = fill;
+        ctx.fill();
+      }
+      ctx.strokeStyle = stroke;
+      ctx.stroke();
+      break;
+    }
+    case "rect": {
+      if (shape.x == null || shape.y == null || shape.width == null || shape.height == null) break;
+      if (fill) {
+        ctx.fillStyle = fill;
+        ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
+      }
+      ctx.strokeStyle = stroke;
+      ctx.strokeRect(shape.x, shape.y, shape.width, shape.height);
+      break;
+    }
+    case "polygon": {
+      if (!shape.points || shape.points.length < 2) break;
+      ctx.beginPath();
+      ctx.moveTo(shape.points[0].x, shape.points[0].y);
+      for (let i = 1; i < shape.points.length; i++) {
+        ctx.lineTo(shape.points[i].x, shape.points[i].y);
+      }
+      ctx.closePath();
+      if (fill) {
+        ctx.fillStyle = fill;
+        ctx.fill();
+      }
+      ctx.strokeStyle = stroke;
+      ctx.stroke();
+      break;
+    }
+    case "path": {
+      if (!shape.path) break;
+      const p = new Path2D(shape.path);
+      if (fill) {
+        ctx.fillStyle = fill;
+        ctx.fill(p);
+      }
+      ctx.strokeStyle = stroke;
+      ctx.stroke(p);
+      break;
+    }
+    case "text": {
+      if (shape.x == null || shape.y == null || !shape.text) break;
+      ctx.fillStyle = stroke;
+      ctx.font = `${shape.fontSize ?? 14}px system-ui, sans-serif`;
+      ctx.textAlign = shape.align ?? "left";
+      ctx.textBaseline = "middle";
+      ctx.fillText(shape.text, shape.x, shape.y);
+      break;
+    }
+  }
+  ctx.restore();
+}
+exports.LearningCanvas = void 0;
+var init_LearningCanvas = __esm({
+  "components/learning/atoms/LearningCanvas.tsx"() {
+    "use client";
+    init_cn();
+    init_useEventBus();
+    exports.LearningCanvas = ({
+      className,
+      width = 600,
+      height = 400,
+      backgroundColor,
+      shapes = [],
+      interactive = false,
+      animate = false,
+      onShapeClick,
+      onShapeHover,
+      isLoading,
+      error
+    }) => {
+      const canvasRef = React74.useRef(null);
+      const eventBus = useEventBus();
+      const animRef = React74.useRef(0);
+      const hoverIndexRef = React74.useRef(-1);
+      const findShapeAt = React74.useCallback((clientX, clientY) => {
+        const canvas = canvasRef.current;
+        if (!canvas) return -1;
+        const rect = canvas.getBoundingClientRect();
+        const x = clientX - rect.left;
+        const y = clientY - rect.top;
+        for (let i = shapes.length - 1; i >= 0; i--) {
+          const b = shapeBounds(shapes[i]);
+          if (b && x >= b.x && x <= b.x + b.w && y >= b.y && y <= b.y + b.h) {
+            return i;
+          }
+        }
+        return -1;
+      }, [shapes]);
+      const draw = React74.useCallback(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+        const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+        canvas.width = Math.max(1, Math.floor(width * dpr));
+        canvas.height = Math.max(1, Math.floor(height * dpr));
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, width, height);
+        if (backgroundColor) {
+          ctx.fillStyle = backgroundColor;
+          ctx.fillRect(0, 0, width, height);
+        }
+        for (const shape of shapes) {
+          drawShape(ctx, shape, width, height);
+        }
+      }, [width, height, backgroundColor, shapes]);
+      React74.useEffect(() => {
+        draw();
+      }, [draw]);
+      React74.useEffect(() => {
+        if (!animate) return;
+        const loop = () => {
+          draw();
+          animRef.current = requestAnimationFrame(loop);
+        };
+        animRef.current = requestAnimationFrame(loop);
+        return () => cancelAnimationFrame(animRef.current);
+      }, [animate, draw]);
+      const handlePointerMove = React74.useCallback(
+        (e) => {
+          if (!interactive) return;
+          const idx = findShapeAt(e.clientX, e.clientY);
+          if (idx !== hoverIndexRef.current) {
+            hoverIndexRef.current = idx;
+            if (idx >= 0) {
+              const shape = shapes[idx];
+              const payload = { id: shape.id, type: shape.type, index: idx };
+              if (onShapeHover) onShapeHover(payload);
+              else if (eventBus) eventBus.emit(`UI:SHAPE_HOVER`, payload);
+            }
+          }
+        },
+        [interactive, onShapeHover, eventBus, findShapeAt, shapes]
+      );
+      const handleClick = React74.useCallback(
+        (e) => {
+          if (!interactive) return;
+          const idx = findShapeAt(e.clientX, e.clientY);
+          if (idx >= 0) {
+            const shape = shapes[idx];
+            const payload = { id: shape.id, type: shape.type, index: idx };
+            if (onShapeClick) onShapeClick(payload);
+            else if (eventBus) eventBus.emit(`UI:SHAPE_CLICK`, payload);
+          }
+        },
+        [interactive, onShapeClick, eventBus, findShapeAt, shapes]
+      );
+      if (isLoading || error) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-center rounded border border-border bg-surface",
+              className
+            ),
+            style: { width, height },
+            children: error ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-destructive", children: error.message }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Loading canvas\u2026" })
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          className: cn("block touch-none rounded border border-border", className),
+          style: { width, height },
+          onClick: handleClick,
+          onPointerMove: handlePointerMove
+        }
+      );
+    };
+  }
+});
+var DEFAULT_BAR_COLOR, DEFAULT_CELL_COLOR, DEFAULT_POINTER_COLOR, POINTER_BAND, TOP_PAD; exports.AlgorithmCanvas = void 0;
+var init_AlgorithmCanvas = __esm({
+  "components/learning/molecules/AlgorithmCanvas.tsx"() {
+    "use client";
+    init_atoms();
+    init_Stack();
+    init_LearningCanvas();
+    DEFAULT_BAR_COLOR = "#3b82f6";
+    DEFAULT_CELL_COLOR = "#e5e7eb";
+    DEFAULT_POINTER_COLOR = "#dc2626";
+    POINTER_BAND = 34;
+    TOP_PAD = 12;
+    exports.AlgorithmCanvas = ({
+      className,
+      width = 600,
+      height = 400,
+      title,
+      backgroundColor,
+      bars = [],
+      cells = [],
+      pointers = [],
+      shapes = [],
+      interactive = false,
+      animate = false,
+      onShapeClick,
+      isLoading,
+      error
+    }) => {
+      const derivedShapes = React74.useMemo(() => {
+        const out = [];
+        if (bars.length > 0) {
+          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 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;
+            const bh = Math.max(0, v / maxV * usableH);
+            const x = i * slot + gap;
+            const color = bar.color ?? DEFAULT_BAR_COLOR;
+            out.push({
+              type: "rect",
+              id: `bar-${i}`,
+              x,
+              y: baseline - bh,
+              width: barW,
+              height: bh,
+              color,
+              fill: color
+            });
+            const label = bar.label ?? (bars.length <= 24 ? String(v) : void 0);
+            if (label) {
+              out.push({
+                type: "text",
+                x: x + barW / 2,
+                y: baseline - 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;
+            const color = p.color ?? DEFAULT_POINTER_COLOR;
+            out.push({
+              type: "arrow",
+              x1: cx,
+              y1: height - 6,
+              x2: cx,
+              y2: baseline + 4,
+              color,
+              lineWidth: 2
+            });
+            if (p.label) {
+              out.push({
+                type: "text",
+                x: cx,
+                y: height - 22,
+                text: p.label,
+                color,
+                fontSize: 11,
+                align: "center"
+              });
+            }
+          });
+        }
+        if (cells.length > 0) {
+          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;
+          cells.forEach((c, i) => {
+            const x = c.col * cw;
+            const y = c.row * ch;
+            const color = c.color ?? DEFAULT_CELL_COLOR;
+            out.push({
+              type: "rect",
+              id: `cell-${i}`,
+              x: x + 1,
+              y: y + 1,
+              width: cw - 2,
+              height: ch - 2,
+              color: "#9ca3af",
+              fill: color
+            });
+            const label = c.label ?? (c.value != null ? String(c.value) : void 0);
+            if (label && cw >= 18 && ch >= 14) {
+              out.push({
+                type: "text",
+                x: x + cw / 2,
+                y: y + ch / 2,
+                text: label,
+                color: "#111827",
+                fontSize: 12,
+                align: "center"
+              });
+            }
+          });
+        }
+        out.push(...shapes);
+        return out;
+      }, [bars, cells, pointers, shapes, width, height]);
+      return /* @__PURE__ */ jsxRuntime.jsx(exports.Card, { className, children: /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "sm", children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h4", children: title }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          exports.LearningCanvas,
+          {
+            width,
+            height,
+            backgroundColor,
+            shapes: derivedShapes,
+            interactive,
+            animate,
+            onShapeClick,
+            isLoading,
+            error
+          }
+        )
+      ] }) });
+    };
+  }
+});
 exports.AuthLayout = void 0;
 var init_AuthLayout = __esm({
   "components/marketing/templates/AuthLayout.tsx"() {
@@ -9563,315 +10019,6 @@ var init_BehaviorView = __esm({
     exports.BehaviorView.displayName = "BehaviorView";
   }
 });
-function resolveColor2(color, ctx, fallback) {
-  if (!color) return fallback;
-  if (color.startsWith("var(")) {
-    ctx.canvas.style;
-    const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color);
-    if (m) {
-      const computed = getComputedStyle(ctx.canvas).getPropertyValue(m[1]).trim();
-      return computed || m[2]?.trim() || fallback;
-    }
-  }
-  return color;
-}
-function shapeBounds(shape) {
-  switch (shape.type) {
-    case "line":
-    case "arrow":
-      if (shape.x1 == null || shape.y1 == null || shape.x2 == null || shape.y2 == null) return null;
-      return {
-        x: Math.min(shape.x1, shape.x2) - 6,
-        y: Math.min(shape.y1, shape.y2) - 6,
-        w: Math.abs(shape.x2 - shape.x1) + 12,
-        h: Math.abs(shape.y2 - shape.y1) + 12
-      };
-    case "circle":
-      if (shape.x == null || shape.y == null || shape.radius == null) return null;
-      return {
-        x: shape.x - shape.radius - 4,
-        y: shape.y - shape.radius - 4,
-        w: shape.radius * 2 + 8,
-        h: shape.radius * 2 + 8
-      };
-    case "rect":
-      if (shape.x == null || shape.y == null || shape.width == null || shape.height == null) return null;
-      return { x: shape.x - 4, y: shape.y - 4, w: shape.width + 8, h: shape.height + 8 };
-    case "polygon":
-      if (!shape.points || shape.points.length === 0) return null;
-      {
-        const xs = shape.points.map((p) => p.x);
-        const ys = shape.points.map((p) => p.y);
-        const minX = Math.min(...xs);
-        const minY = Math.min(...ys);
-        return {
-          x: minX - 4,
-          y: minY - 4,
-          w: Math.max(...xs) - minX + 8,
-          h: Math.max(...ys) - minY + 8
-        };
-      }
-    case "text":
-      if (shape.x == null || shape.y == null) return null;
-      return { x: shape.x - 4, y: shape.y - (shape.fontSize ?? 14) - 4, w: 120, h: (shape.fontSize ?? 14) + 8 };
-    default:
-      return null;
-  }
-}
-function drawArrowHead(ctx, x1, y1, x2, y2, size) {
-  const angle = Math.atan2(y2 - y1, x2 - x1);
-  ctx.beginPath();
-  ctx.moveTo(x2, y2);
-  ctx.lineTo(x2 - size * Math.cos(angle - Math.PI / 6), y2 - size * Math.sin(angle - Math.PI / 6));
-  ctx.lineTo(x2 - size * Math.cos(angle + Math.PI / 6), y2 - size * Math.sin(angle + Math.PI / 6));
-  ctx.closePath();
-  ctx.fill();
-}
-function drawShape(ctx, shape, width, height) {
-  ctx.save();
-  const opacity = shape.opacity ?? 1;
-  ctx.globalAlpha = opacity;
-  const stroke = resolveColor2(shape.color, ctx, "#333333");
-  const fill = shape.fill ? resolveColor2(shape.fill, ctx, "#cccccc") : void 0;
-  ctx.lineWidth = shape.lineWidth ?? 2;
-  switch (shape.type) {
-    case "grid": {
-      const step = shape.step ?? 40;
-      ctx.strokeStyle = stroke;
-      ctx.globalAlpha = opacity * 0.25;
-      ctx.lineWidth = 1;
-      ctx.beginPath();
-      for (let x = 0; x <= width; x += step) {
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, height);
-      }
-      for (let y = 0; y <= height; y += step) {
-        ctx.moveTo(0, y);
-        ctx.lineTo(width, y);
-      }
-      ctx.stroke();
-      break;
-    }
-    case "axis": {
-      const axis = shape.axis ?? "x";
-      ctx.strokeStyle = stroke;
-      ctx.lineWidth = shape.lineWidth ?? 2;
-      ctx.beginPath();
-      if (axis === "x") {
-        ctx.moveTo(0, height / 2);
-        ctx.lineTo(width, height / 2);
-      } else {
-        ctx.moveTo(width / 2, 0);
-        ctx.lineTo(width / 2, height);
-      }
-      ctx.stroke();
-      break;
-    }
-    case "line": {
-      if (shape.x1 == null || shape.y1 == null || shape.x2 == null || shape.y2 == null) break;
-      ctx.strokeStyle = stroke;
-      ctx.beginPath();
-      ctx.moveTo(shape.x1, shape.y1);
-      ctx.lineTo(shape.x2, shape.y2);
-      ctx.stroke();
-      break;
-    }
-    case "arrow": {
-      if (shape.x1 == null || shape.y1 == null || shape.x2 == null || shape.y2 == null) break;
-      ctx.strokeStyle = stroke;
-      ctx.fillStyle = stroke;
-      ctx.beginPath();
-      ctx.moveTo(shape.x1, shape.y1);
-      ctx.lineTo(shape.x2, shape.y2);
-      ctx.stroke();
-      drawArrowHead(ctx, shape.x1, shape.y1, shape.x2, shape.y2, 10);
-      break;
-    }
-    case "circle": {
-      if (shape.x == null || shape.y == null || shape.radius == null) break;
-      ctx.beginPath();
-      ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
-      if (fill) {
-        ctx.fillStyle = fill;
-        ctx.fill();
-      }
-      ctx.strokeStyle = stroke;
-      ctx.stroke();
-      break;
-    }
-    case "rect": {
-      if (shape.x == null || shape.y == null || shape.width == null || shape.height == null) break;
-      if (fill) {
-        ctx.fillStyle = fill;
-        ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
-      }
-      ctx.strokeStyle = stroke;
-      ctx.strokeRect(shape.x, shape.y, shape.width, shape.height);
-      break;
-    }
-    case "polygon": {
-      if (!shape.points || shape.points.length < 2) break;
-      ctx.beginPath();
-      ctx.moveTo(shape.points[0].x, shape.points[0].y);
-      for (let i = 1; i < shape.points.length; i++) {
-        ctx.lineTo(shape.points[i].x, shape.points[i].y);
-      }
-      ctx.closePath();
-      if (fill) {
-        ctx.fillStyle = fill;
-        ctx.fill();
-      }
-      ctx.strokeStyle = stroke;
-      ctx.stroke();
-      break;
-    }
-    case "path": {
-      if (!shape.path) break;
-      const p = new Path2D(shape.path);
-      if (fill) {
-        ctx.fillStyle = fill;
-        ctx.fill(p);
-      }
-      ctx.strokeStyle = stroke;
-      ctx.stroke(p);
-      break;
-    }
-    case "text": {
-      if (shape.x == null || shape.y == null || !shape.text) break;
-      ctx.fillStyle = stroke;
-      ctx.font = `${shape.fontSize ?? 14}px system-ui, sans-serif`;
-      ctx.textAlign = shape.align ?? "left";
-      ctx.textBaseline = "middle";
-      ctx.fillText(shape.text, shape.x, shape.y);
-      break;
-    }
-  }
-  ctx.restore();
-}
-exports.LearningCanvas = void 0;
-var init_LearningCanvas = __esm({
-  "components/learning/atoms/LearningCanvas.tsx"() {
-    "use client";
-    init_cn();
-    init_useEventBus();
-    exports.LearningCanvas = ({
-      className,
-      width = 600,
-      height = 400,
-      backgroundColor,
-      shapes = [],
-      interactive = false,
-      animate = false,
-      onShapeClick,
-      onShapeHover,
-      isLoading,
-      error
-    }) => {
-      const canvasRef = React74.useRef(null);
-      const eventBus = useEventBus();
-      const animRef = React74.useRef(0);
-      const hoverIndexRef = React74.useRef(-1);
-      const findShapeAt = React74.useCallback((clientX, clientY) => {
-        const canvas = canvasRef.current;
-        if (!canvas) return -1;
-        const rect = canvas.getBoundingClientRect();
-        const x = clientX - rect.left;
-        const y = clientY - rect.top;
-        for (let i = shapes.length - 1; i >= 0; i--) {
-          const b = shapeBounds(shapes[i]);
-          if (b && x >= b.x && x <= b.x + b.w && y >= b.y && y <= b.y + b.h) {
-            return i;
-          }
-        }
-        return -1;
-      }, [shapes]);
-      const draw = React74.useCallback(() => {
-        const canvas = canvasRef.current;
-        if (!canvas) return;
-        const ctx = canvas.getContext("2d");
-        if (!ctx) return;
-        const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
-        canvas.width = Math.max(1, Math.floor(width * dpr));
-        canvas.height = Math.max(1, Math.floor(height * dpr));
-        canvas.style.width = `${width}px`;
-        canvas.style.height = `${height}px`;
-        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-        ctx.clearRect(0, 0, width, height);
-        if (backgroundColor) {
-          ctx.fillStyle = backgroundColor;
-          ctx.fillRect(0, 0, width, height);
-        }
-        for (const shape of shapes) {
-          drawShape(ctx, shape, width, height);
-        }
-      }, [width, height, backgroundColor, shapes]);
-      React74.useEffect(() => {
-        draw();
-      }, [draw]);
-      React74.useEffect(() => {
-        if (!animate) return;
-        const loop = () => {
-          draw();
-          animRef.current = requestAnimationFrame(loop);
-        };
-        animRef.current = requestAnimationFrame(loop);
-        return () => cancelAnimationFrame(animRef.current);
-      }, [animate, draw]);
-      const handlePointerMove = React74.useCallback(
-        (e) => {
-          if (!interactive) return;
-          const idx = findShapeAt(e.clientX, e.clientY);
-          if (idx !== hoverIndexRef.current) {
-            hoverIndexRef.current = idx;
-            if (idx >= 0) {
-              const shape = shapes[idx];
-              const payload = { id: shape.id, type: shape.type, index: idx };
-              if (onShapeHover) onShapeHover(payload);
-              else if (eventBus) eventBus.emit(`UI:SHAPE_HOVER`, payload);
-            }
-          }
-        },
-        [interactive, onShapeHover, eventBus, findShapeAt, shapes]
-      );
-      const handleClick = React74.useCallback(
-        (e) => {
-          if (!interactive) return;
-          const idx = findShapeAt(e.clientX, e.clientY);
-          if (idx >= 0) {
-            const shape = shapes[idx];
-            const payload = { id: shape.id, type: shape.type, index: idx };
-            if (onShapeClick) onShapeClick(payload);
-            else if (eventBus) eventBus.emit(`UI:SHAPE_CLICK`, payload);
-          }
-        },
-        [interactive, onShapeClick, eventBus, findShapeAt, shapes]
-      );
-      if (isLoading || error) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "flex items-center justify-center rounded border border-border bg-surface",
-              className
-            ),
-            style: { width, height },
-            children: error ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-destructive", children: error.message }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Loading canvas\u2026" })
-          }
-        );
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "canvas",
-        {
-          ref: canvasRef,
-          className: cn("block touch-none rounded border border-border", className),
-          style: { width, height },
-          onClick: handleClick,
-          onPointerMove: handlePointerMove
-        }
-      );
-    };
-  }
-});
 exports.BiologyCanvas = void 0;
 var init_BiologyCanvas = __esm({
   "components/learning/molecules/BiologyCanvas.tsx"() {
@@ -15457,6 +15604,76 @@ var init_useImageCache = __esm({
     init_verificationRegistry();
   }
 });
+
+// components/game/shared/atlasSlice.ts
+function isTilesheet(a) {
+  return typeof a.tileWidth === "number";
+}
+function getAtlas(url, onReady) {
+  if (atlasCache.has(url)) return atlasCache.get(url) ?? void 0;
+  atlasCache.set(url, void 0);
+  fetch(url).then((r) => r.json()).then((json) => {
+    atlasCache.set(url, json);
+    onReady();
+  }).catch(() => {
+    atlasCache.set(url, null);
+  });
+  return void 0;
+}
+function subRectFor(atlas, sprite) {
+  if (isTilesheet(atlas)) {
+    let col;
+    let row;
+    if (sprite.includes(",")) {
+      const [c, r] = sprite.split(",").map((n) => Number(n.trim()));
+      col = c;
+      row = r;
+    } else {
+      const i = Number(sprite);
+      if (!Number.isFinite(i)) return null;
+      col = i % atlas.columns;
+      row = Math.floor(i / atlas.columns);
+    }
+    if (!Number.isFinite(col) || !Number.isFinite(row) || col < 0 || row < 0 || col >= atlas.columns || row >= atlas.rows) return null;
+    const margin = atlas.margin ?? 0;
+    const spacing = atlas.spacing ?? 0;
+    return {
+      sx: margin + col * (atlas.tileWidth + spacing),
+      sy: margin + row * (atlas.tileHeight + spacing),
+      sw: atlas.tileWidth,
+      sh: atlas.tileHeight
+    };
+  }
+  const st = atlas.subTextures[sprite];
+  if (!st) return null;
+  return { sx: st.x, sy: st.y, sw: st.width, sh: st.height };
+}
+function isAtlasAsset(asset) {
+  return !!asset && typeof asset.atlas === "string" && typeof asset.sprite === "string";
+}
+function resolveAssetSource(img, asset, onReady) {
+  if (isAtlasAsset(asset)) {
+    const atlas = getAtlas(asset.atlas, onReady);
+    if (!atlas) return null;
+    const rect = subRectFor(atlas, asset.sprite);
+    if (!rect) return null;
+    return { img, rect, aspect: rect.sw / rect.sh };
+  }
+  const natW = img.naturalWidth || 1;
+  const natH = img.naturalHeight || 1;
+  return { img, rect: null, aspect: natW / natH };
+}
+function blit(ctx, src, dx, dy, dw, dh) {
+  if (src.rect) ctx.drawImage(src.img, src.rect.sx, src.rect.sy, src.rect.sw, src.rect.sh, dx, dy, dw, dh);
+  else ctx.drawImage(src.img, dx, dy, dw, dh);
+}
+var atlasCache;
+var init_atlasSlice = __esm({
+  "components/game/shared/atlasSlice.ts"() {
+    "use client";
+    atlasCache = /* @__PURE__ */ new Map();
+  }
+});
 function useCamera() {
   const cameraRef = React74.useRef({ x: 0, y: 0, zoom: 1 });
   const targetCameraRef = React74.useRef(null);
@@ -16212,15 +16429,18 @@ function SideView({
         const platType = plat.type ?? "ground";
         const spriteAsset = tSprites?.[platType];
         const tileImg = spriteAsset ? loadImage(spriteAsset.url) : null;
-        if (tileImg) {
-          const tileW = tileImg.naturalWidth;
-          const tileH = tileImg.naturalHeight;
+        const tileSrc = tileImg ? resolveAssetSource(tileImg, spriteAsset, NOOP) : null;
+        if (tileSrc) {
+          const originX = tileSrc.rect ? tileSrc.rect.sx : 0;
+          const originY = tileSrc.rect ? tileSrc.rect.sy : 0;
+          const tileW = tileSrc.rect ? tileSrc.rect.sw : tileImg.naturalWidth;
+          const tileH = tileSrc.rect ? tileSrc.rect.sh : tileImg.naturalHeight;
           const scaleH = plat.height / tileH;
           const scaledW = tileW * scaleH;
           for (let tx = 0; tx < plat.width; tx += scaledW) {
             const drawW = Math.min(scaledW, plat.width - tx);
             const srcW = drawW / scaleH;
-            ctx.drawImage(tileImg, 0, 0, srcW, tileH, platX + tx, platY, drawW, plat.height);
+            ctx.drawImage(tileImg, originX, originY, srcW, tileH, platX + tx, platY, drawW, plat.height);
           }
         } else {
           const color = PLATFORM_COLORS[platType] ?? PLATFORM_COLORS.ground;
@@ -16254,14 +16474,15 @@ function SideView({
       const ppy = py - camY;
       const facingRight = auth.facingRight ?? true;
       const playerImg = pSprite ? loadImage(pSprite.url) : null;
-      if (playerImg) {
+      const playerSrc = playerImg ? resolveAssetSource(playerImg, pSprite, NOOP) : null;
+      if (playerSrc) {
         ctx.save();
         if (!facingRight) {
           ctx.translate(ppx + pw, ppy);
           ctx.scale(-1, 1);
-          ctx.drawImage(playerImg, 0, 0, pw, ph);
+          blit(ctx, playerSrc, 0, 0, pw, ph);
         } else {
-          ctx.drawImage(playerImg, ppx, ppy, pw, ph);
+          blit(ctx, playerSrc, ppx, ppy, pw, ph);
         }
         ctx.restore();
       } else {
@@ -16462,10 +16683,11 @@ function Canvas2D({
   const attackTargetSet = React74.useMemo(() => new Set(attackTargets.map((p) => `${p.x},${p.y}`)), [attackTargets]);
   const spriteUrls = React74.useMemo(() => {
     const urls = [];
+    const toUrl = (x) => typeof x === "string" ? x : x?.url;
     for (const tile of sortedTiles) {
       if (tile.terrainSprite) urls.push(tile.terrainSprite.url);
       else if (getTerrainSprite) {
-        const url = getTerrainSprite(tile.terrain ?? "");
+        const url = toUrl(getTerrainSprite(tile.terrain ?? ""));
         if (url) urls.push(url);
       } else {
         const url = assetManifest?.terrains?.[tile.terrain ?? ""]?.url;
@@ -16475,7 +16697,7 @@ function Canvas2D({
     for (const feature of features) {
       if (feature.sprite) urls.push(feature.sprite.url);
       else if (getFeatureSprite) {
-        const url = getFeatureSprite(feature.type);
+        const url = toUrl(getFeatureSprite(feature.type));
         if (url) urls.push(url);
       } else {
         const url = assetManifest?.features?.[feature.type]?.url;
@@ -16485,7 +16707,7 @@ function Canvas2D({
     for (const unit of units) {
       if (unit.sprite) urls.push(unit.sprite.url);
       else if (getUnitSprite) {
-        const url = getUnitSprite(unit);
+        const url = toUrl(getUnitSprite(unit));
         if (url) urls.push(url);
       } else if (unit.unitType) {
         const url = assetManifest?.units?.[unit.unitType]?.url;
@@ -16526,14 +16748,25 @@ function Canvas2D({
     screenToWorld,
     lerpToTarget
   } = useCamera();
-  const resolveTerrainSpriteUrl = React74.useCallback((tile) => {
-    return tile.terrainSprite?.url || getTerrainSprite?.(tile.terrain ?? "") || assetManifest?.terrains?.[tile.terrain ?? ""]?.url;
+  const [, setAtlasVersion] = React74.useState(0);
+  const bumpAtlas = React74.useCallback(() => setAtlasVersion((v) => v + 1), []);
+  const resolveTerrainAsset = React74.useCallback((tile) => {
+    if (tile.terrainSprite) return tile.terrainSprite;
+    const s = getTerrainSprite?.(tile.terrain ?? "");
+    if (s) return typeof s === "string" ? { url: s } : s;
+    return assetManifest?.terrains?.[tile.terrain ?? ""];
   }, [getTerrainSprite, assetManifest]);
-  const resolveFeatureSpriteUrl = React74.useCallback((featureType) => {
-    return getFeatureSprite?.(featureType) || assetManifest?.features?.[featureType]?.url;
+  const resolveFeatureAsset = React74.useCallback((feature) => {
+    if (feature.sprite) return feature.sprite;
+    const s = getFeatureSprite?.(feature.type);
+    if (s) return typeof s === "string" ? { url: s } : s;
+    return assetManifest?.features?.[feature.type];
   }, [getFeatureSprite, assetManifest]);
-  const resolveUnitSpriteUrl = React74.useCallback((unit) => {
-    return unit.sprite?.url || getUnitSprite?.(unit) || (unit.unitType ? assetManifest?.units?.[unit.unitType]?.url : void 0);
+  const resolveUnitAsset = React74.useCallback((unit) => {
+    if (unit.sprite) return unit.sprite;
+    const s = getUnitSprite?.(unit);
+    if (s) return typeof s === "string" ? { url: s } : s;
+    return unit.unitType ? assetManifest?.units?.[unit.unitType] : void 0;
   }, [getUnitSprite, assetManifest]);
   const miniMapTiles = React74.useMemo(() => {
     if (!showMinimap) return [];
@@ -16597,18 +16830,17 @@ function Canvas2D({
       if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
         continue;
       }
-      const spriteUrl = resolveTerrainSpriteUrl(tile);
-      const img = spriteUrl ? getImage(spriteUrl) : null;
-      if (img) {
-        if (img.naturalWidth === 0) {
-          ctx.drawImage(img, pos.x, pos.y, scaledTileWidth, scaledTileHeight);
-        } else {
-          const drawW = scaledTileWidth;
-          const drawH = scaledTileWidth * (img.naturalHeight / img.naturalWidth);
-          const drawX = pos.x;
-          const drawY = flatLike ? pos.y : pos.y + scaledTileHeight - drawH;
-          ctx.drawImage(img, drawX, drawY, drawW, drawH);
-        }
+      const terrainAsset = resolveTerrainAsset(tile);
+      const img = terrainAsset?.url ? getImage(terrainAsset.url) : null;
+      const src = img ? resolveAssetSource(img, terrainAsset, bumpAtlas) : null;
+      if (src) {
+        const drawW = scaledTileWidth;
+        const drawH = scaledTileWidth / src.aspect;
+        const drawX = pos.x;
+        const drawY = flatLike ? pos.y : pos.y + scaledTileHeight - drawH;
+        blit(ctx, src, drawX, drawY, drawW, drawH);
+      } else if (img && img.naturalWidth === 0) {
+        ctx.drawImage(img, pos.x, pos.y, scaledTileWidth, scaledTileHeight);
       } else {
         const centerX = pos.x + scaledTileWidth / 2;
         const topY = pos.y + scaledDiamondTopY;
@@ -16662,15 +16894,16 @@ function Canvas2D({
       if (pos.x + scaledTileWidth < visLeft || pos.x > visRight || pos.y + scaledTileHeight < visTop || pos.y > visBottom) {
         continue;
       }
-      const spriteUrl = feature.sprite?.url || resolveFeatureSpriteUrl(feature.type);
-      const img = spriteUrl ? getImage(spriteUrl) : null;
+      const featureAsset = resolveFeatureAsset(feature);
+      const img = featureAsset?.url ? getImage(featureAsset.url) : null;
+      const src = img ? resolveAssetSource(img, featureAsset, bumpAtlas) : null;
       const centerX = pos.x + scaledTileWidth / 2;
       const featureGroundY = pos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
       const isCastle = feature.type === "castle";
       const featureDrawH = isCastle ? scaledFloorHeight * 3.5 : scaledFloorHeight * 1.6;
       const maxFeatureW = isCastle ? scaledTileWidth * 1.8 : scaledTileWidth * 0.7;
-      if (img) {
-        const ar = img.naturalWidth / img.naturalHeight;
+      if (src) {
+        const ar = src.aspect;
         let drawH = featureDrawH;
         let drawW = featureDrawH * ar;
         if (drawW > maxFeatureW) {
@@ -16679,7 +16912,7 @@ function Canvas2D({
         }
         const drawX = centerX - drawW / 2;
         const drawY = featureGroundY - drawH;
-        ctx.drawImage(img, drawX, drawY, drawW, drawH);
+        blit(ctx, src, drawX, drawY, drawW, drawH);
       } else {
         const color = exports.FEATURE_COLORS[feature.type] || exports.FEATURE_COLORS.default;
         ctx.beginPath();
@@ -16708,17 +16941,18 @@ function Canvas2D({
       const centerX = pos.x + scaledTileWidth / 2;
       const groundY = pos.y + scaledDiamondTopY + scaledFloorHeight * 0.5;
       const breatheOffset = 0;
-      const unitSpriteUrl = resolveUnitSpriteUrl(unit);
-      const img = unitSpriteUrl ? getImage(unitSpriteUrl) : null;
+      const unitAsset = resolveUnitAsset(unit);
+      const img = unitAsset?.url ? getImage(unitAsset.url) : null;
       const unitDrawH = scaledFloorHeight * spriteHeightRatio * unitScale;
       const maxUnitW = scaledTileWidth * spriteMaxWidthRatio * unitScale;
       const unitIsSheet = unit.spriteSheet?.url !== void 0;
+      const unitSrc = img && !unitIsSheet ? resolveAssetSource(img, unitAsset, bumpAtlas) : null;
       const SHEET_ROWS = 5;
       const sheetFrameW = img ? img.naturalWidth / exports.SHEET_COLUMNS : 0;
       const sheetFrameH = img ? img.naturalHeight / SHEET_ROWS : 0;
       const frameW = unitIsSheet ? sheetFrameW : img?.naturalWidth ?? 1;
       const frameH = unitIsSheet ? sheetFrameH : img?.naturalHeight ?? 1;
-      const ar = frameW / (frameH || 1);
+      const ar = unitIsSheet ? sheetFrameW / (sheetFrameH || 1) : unitSrc ? unitSrc.aspect : frameW / (frameH || 1);
       let drawH = unitDrawH;
       let drawW = unitDrawH * ar;
       if (drawW > maxUnitW) {
@@ -16734,6 +16968,8 @@ function Canvas2D({
         if (img) {
           if (unitIsSheet) {
             ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
+          } else if (unitSrc) {
+            blit(ctx, unitSrc, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
           } else {
             ctx.drawImage(img, ghostCenterX - drawW / 2, ghostGroundY - drawH, drawW, drawH);
           }
@@ -16782,6 +17018,8 @@ function Canvas2D({
         const drawUnit = (x) => {
           if (unitIsSheet) {
             ctx.drawImage(img, 0, 0, sheetFrameW, sheetFrameH, x, spriteY, drawW, drawH);
+          } else if (unitSrc) {
+            blit(ctx, unitSrc, x, spriteY, drawW, drawH);
           } else {
             ctx.drawImage(img, x, spriteY, drawW, drawH);
           }
@@ -16832,11 +17070,12 @@ function Canvas2D({
     flatLike,
     scale,
     debug2,
-    resolveTerrainSpriteUrl,
-    resolveFeatureSpriteUrl,
-    resolveUnitSpriteUrl,
+    resolveTerrainAsset,
+    resolveFeatureAsset,
+    resolveUnitAsset,
     resolveFrameForUnit,
     getImage,
+    bumpAtlas,
     baseOffsetX,
     scaledTileWidth,
     scaledTileHeight,
@@ -17150,7 +17389,7 @@ function Canvas2D({
     }
   );
 }
-var PLATFORM_COLORS, PLAYER_COLOR, PLAYER_EYE_COLOR, SKY_GRADIENT_TOP, SKY_GRADIENT_BOTTOM, GRID_COLOR, DEFAULT_PLATFORMS;
+var PLATFORM_COLORS, NOOP, PLAYER_COLOR, PLAYER_EYE_COLOR, SKY_GRADIENT_TOP, SKY_GRADIENT_BOTTOM, GRID_COLOR, DEFAULT_PLATFORMS;
 var init_Canvas2D = __esm({
   "components/game/2d/molecules/Canvas2D.tsx"() {
     "use client";
@@ -17164,6 +17403,7 @@ var init_Canvas2D = __esm({
     init_MiniMap();
     init_HealthBar();
     init_useImageCache();
+    init_atlasSlice();
     init_useCamera();
     init_useCanvasGestures();
     init_useRenderInterpolation();
@@ -17177,6 +17417,8 @@ var init_Canvas2D = __esm({
       hazard: "#c0392b",
       goal: "#f1c40f"
     };
+    NOOP = () => {
+    };
     PLAYER_COLOR = "#3498db";
     PLAYER_EYE_COLOR = "#ffffff";
     SKY_GRADIENT_TOP = "#1a1a2e";
@@ -40929,6 +41171,7 @@ var init_molecules2 = __esm({
     init_PhysicsCanvas();
     init_BiologyCanvas();
     init_ChemistryCanvas();
+    init_AlgorithmCanvas();
     init_GraphView();
     init_MapView();
     init_NumberStepper();
@@ -47587,6 +47830,7 @@ var init_component_registry_generated = __esm({
     init_ActionTile();
     init_ActivationBlock();
     init_ComponentPatterns();
+    init_AlgorithmCanvas();
     init_AnimatedCounter();
     init_AnimatedGraphic();
     init_AnimatedReveal();
@@ -47885,6 +48129,7 @@ var init_component_registry_generated = __esm({
       "ActivationBlock": exports.ActivationBlock,
       "Alert": AlertPattern,
       "AlertPattern": AlertPattern,
+      "AlgorithmCanvas": exports.AlgorithmCanvas,
       "AnimatedCounter": exports.AnimatedCounter,
       "AnimatedGraphic": exports.AnimatedGraphic,
       "AnimatedReveal": exports.AnimatedReveal,