@almadar/ui 5.94.1 → 5.95.0

package/dist/components/learning/molecules/AlgorithmCanvas.d.ts

@@ -0,0 +1,58 @@
+/**
+ * AlgorithmCanvas
+ *
+ * A field-scoped learning molecule for computer-science algorithm visualizations.
+ * Projects semantic `bars` (sorting/histograms), `cells` (grids/arrays/DP tables),
+ * and `pointers` (index cursors) into pixel-space shapes on the declarative
+ * `LearningCanvas` atom, so a `.lolo` behavior never computes pixel coordinates —
+ * it just sets `bars`/`cells`/`pointers` and lets this molecule lay them out.
+ * Graph/tree algorithms reuse `BiologyCanvas` (nodes + edges); this canvas owns
+ * only the bar/cell/pointer vocabulary.
+ *
+ * @packageDocumentation
+ */
+import * as React from 'react';
+import type { LearningShape } from '../atoms/LearningCanvas';
+import type { UiError } from '../../core/atoms/types';
+export interface AlgorithmBar {
+    value: number;
+    color?: string;
+    label?: string;
+}
+export interface AlgorithmCell {
+    row: number;
+    col: number;
+    value?: number;
+    color?: string;
+    label?: string;
+}
+export interface AlgorithmPointer {
+    index: number;
+    label?: string;
+    color?: string;
+}
+export interface AlgorithmCanvasProps {
+    className?: string;
+    width?: number;
+    height?: number;
+    title?: string;
+    backgroundColor?: string;
+    /** Sorting/histogram bars; laid out left-to-right, height proportional to value. */
+    bars?: AlgorithmBar[];
+    /** Grid/array/DP cells; laid out on a row/col lattice sized to the extent. */
+    cells?: AlgorithmCell[];
+    /** Index cursors (i/j/lo/hi/mid); drawn as markers beneath the referenced bar/cell column. */
+    pointers?: AlgorithmPointer[];
+    /** Extra declarative shapes in canvas pixel coordinates. */
+    shapes?: LearningShape[];
+    interactive?: boolean;
+    animate?: boolean;
+    onShapeClick?: (payload: {
+        id?: string;
+        type?: string;
+        index: number;
+    }) => void;
+    isLoading?: boolean;
+    error?: UiError | null;
+}
+export declare const AlgorithmCanvas: React.FC<AlgorithmCanvasProps>;

package/dist/providers/index.cjs

@@ -9661,6 +9661,76 @@ var init_StateGraph = __esm({
     init_TransitionArrow();
   }
 });
+
+// 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 = React97.useRef({ x: 0, y: 0, zoom: 1 });
   const targetCameraRef = React97.useRef(null);
@@ -10232,15 +10302,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;
@@ -10274,14 +10347,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 {
@@ -10482,10 +10556,11 @@ function Canvas2D({
   const attackTargetSet = React97.useMemo(() => new Set(attackTargets.map((p) => `${p.x},${p.y}`)), [attackTargets]);
   const spriteUrls = React97.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;
@@ -10495,7 +10570,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;
@@ -10505,7 +10580,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;
@@ -10546,14 +10621,25 @@ function Canvas2D({
     screenToWorld,
     lerpToTarget
   } = useCamera();
-  const resolveTerrainSpriteUrl = React97.useCallback((tile) => {
-    return tile.terrainSprite?.url || getTerrainSprite?.(tile.terrain ?? "") || assetManifest?.terrains?.[tile.terrain ?? ""]?.url;
+  const [, setAtlasVersion] = React97.useState(0);
+  const bumpAtlas = React97.useCallback(() => setAtlasVersion((v) => v + 1), []);
+  const resolveTerrainAsset = React97.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 = React97.useCallback((featureType) => {
-    return getFeatureSprite?.(featureType) || assetManifest?.features?.[featureType]?.url;
+  const resolveFeatureAsset = React97.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 = React97.useCallback((unit) => {
-    return unit.sprite?.url || getUnitSprite?.(unit) || (unit.unitType ? assetManifest?.units?.[unit.unitType]?.url : void 0);
+  const resolveUnitAsset = React97.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 = React97.useMemo(() => {
     if (!showMinimap) return [];
@@ -10617,18 +10703,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;
@@ -10682,15 +10767,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) {
@@ -10699,7 +10785,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 = FEATURE_COLORS[feature.type] || FEATURE_COLORS.default;
         ctx.beginPath();
@@ -10728,17 +10814,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 / 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) {
@@ -10754,6 +10841,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);
           }
@@ -10802,6 +10891,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);
           }
@@ -10852,11 +10943,12 @@ function Canvas2D({
     flatLike,
     scale,
     debug2,
-    resolveTerrainSpriteUrl,
-    resolveFeatureSpriteUrl,
-    resolveUnitSpriteUrl,
+    resolveTerrainAsset,
+    resolveFeatureAsset,
+    resolveUnitAsset,
     resolveFrameForUnit,
     getImage,
+    bumpAtlas,
     baseOffsetX,
     scaledTileWidth,
     scaledTileHeight,
@@ -11170,7 +11262,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";
@@ -11184,6 +11276,7 @@ var init_Canvas2D = __esm({
     init_MiniMap();
     init_HealthBar();
     init_useImageCache();
+    init_atlasSlice();
     init_useCamera();
     init_useCanvasGestures();
     init_useRenderInterpolation();
@@ -11197,6 +11290,8 @@ var init_Canvas2D = __esm({
       hazard: "#c0392b",
       goal: "#f1c40f"
     };
+    NOOP = () => {
+    };
     PLAYER_COLOR = "#3498db";
     PLAYER_EYE_COLOR = "#ffffff";
     SKY_GRADIENT_TOP = "#1a1a2e";
@@ -16238,6 +16333,153 @@ var init_ComponentPatterns = __esm({
     AlertPattern.displayName = "AlertPattern";
   }
 });
+var DEFAULT_BAR_COLOR, DEFAULT_CELL_COLOR, DEFAULT_POINTER_COLOR, POINTER_BAND, TOP_PAD, AlgorithmCanvas;
+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;
+    AlgorithmCanvas = ({
+      className,
+      width = 600,
+      height = 400,
+      title,
+      backgroundColor,
+      bars = [],
+      cells = [],
+      pointers = [],
+      shapes = [],
+      interactive = false,
+      animate = false,
+      onShapeClick,
+      isLoading,
+      error
+    }) => {
+      const derivedShapes = React97.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(Card, { className, children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", children: title }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LearningCanvas,
+          {
+            width,
+            height,
+            backgroundColor,
+            shapes: derivedShapes,
+            interactive,
+            animate,
+            onShapeClick,
+            isLoading,
+            error
+          }
+        )
+      ] }) });
+    };
+  }
+});
 var AuthLayout;
 var init_AuthLayout = __esm({
   "components/marketing/templates/AuthLayout.tsx"() {
@@ -45910,6 +46152,7 @@ var init_component_registry_generated = __esm({
     init_ActionTile();
     init_ActivationBlock();
     init_ComponentPatterns();
+    init_AlgorithmCanvas();
     init_AnimatedCounter();
     init_AnimatedGraphic();
     init_AnimatedReveal();
@@ -46208,6 +46451,7 @@ var init_component_registry_generated = __esm({
       "ActivationBlock": ActivationBlock,
       "Alert": AlertPattern,
       "AlertPattern": AlertPattern,
+      "AlgorithmCanvas": AlgorithmCanvas,
       "AnimatedCounter": AnimatedCounter,
       "AnimatedGraphic": AnimatedGraphic,
       "AnimatedReveal": AnimatedReveal,