@almadar/ui 5.136.0 → 5.138.0

package/dist/avl/index.cjs

@@ -12578,19 +12578,12 @@ var init_useCanvasGestures = __esm({
 });
 
 // lib/imageCache.ts
-function getOrLoadImage(url, onReady) {
-  if (!url || typeof window === "undefined") return null;
-  const existing = cache.get(url);
-  if (existing) {
-    if (existing.status === "loaded") return existing.img;
-    if (existing.status === "pending" && onReady) existing.onReady = onReady;
-    return null;
-  }
+function startLoad(url, onReady, existing) {
   const img = new Image();
   img.crossOrigin = "anonymous";
-  const entry = { img, status: "pending", onReady };
-  cache.set(url, entry);
-  updateAssetStatus(url, "pending");
+  const entry = existing ?? { img, status: "pending" };
+  entry.img = img;
+  if (onReady) entry.onReady = onReady;
   img.onload = () => {
     entry.status = "loaded";
     updateAssetStatus(url, "loaded");
@@ -12598,20 +12591,39 @@ function getOrLoadImage(url, onReady) {
   };
   img.onerror = () => {
     entry.status = "failed";
+    entry.failedAt = Date.now();
     updateAssetStatus(url, "failed");
     entry.onReady?.();
   };
   img.src = url;
+  return entry;
+}
+function getOrLoadImage(url, onReady) {
+  if (!url || typeof window === "undefined") return null;
+  const existing = cache.get(url);
+  if (existing) {
+    if (existing.status === "loaded") return existing.img;
+    if (existing.status === "pending" && onReady) existing.onReady = onReady;
+    if (existing.status === "failed" && Date.now() - (existing.failedAt ?? 0) >= RETRY_AFTER_MS) {
+      existing.failedAt = Date.now();
+      startLoad(url, onReady, existing);
+    }
+    return null;
+  }
+  const entry = startLoad(url, onReady);
+  cache.set(url, entry);
+  updateAssetStatus(url, "pending");
   return null;
 }
 function getImageStatus(url) {
   return cache.get(url)?.status;
 }
-var cache;
+var RETRY_AFTER_MS, cache;
 var init_imageCache = __esm({
   "lib/imageCache.ts"() {
     "use client";
     init_verificationRegistry();
+    RETRY_AFTER_MS = 5e3;
     cache = /* @__PURE__ */ new Map();
   }
 });
@@ -13207,6 +13219,11 @@ function Canvas2D({
     }
     return { width: maxX + 1, height: maxY + 1 };
   }, [scenePositions]);
+  const defaultGridFocus = React92.useMemo(() => {
+    if (isFree || projection === "side") return void 0;
+    if (gridExtent.width < 2 || gridExtent.height < 2) return void 0;
+    return { x: (gridExtent.width - 1) / 2, y: (gridExtent.height - 1) / 2 };
+  }, [isFree, projection, gridExtent]);
   const baseOffsetX = React92.useMemo(() => {
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
@@ -13311,10 +13328,13 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
-    if (cameraPos && dragDistance() === 0) {
-      const p = projector.anchorPoint(cameraPos, "center");
-      cam.x = p.x - viewportSize.width / 2;
-      cam.y = p.y - viewportSize.height / 2;
+    if (camera !== "follow" && dragDistance() === 0) {
+      const focus = cameraPos ?? defaultGridFocus;
+      if (focus) {
+        const p = projector.anchorPoint(focus, "center");
+        cam.x = p.x - viewportSize.width / 2;
+        cam.y = p.y - viewportSize.height / 2;
+      }
     }
     const containerRect = containerRef.current?.getBoundingClientRect();
     const canvasRect = canvas.getBoundingClientRect();
@@ -13327,7 +13347,7 @@ function Canvas2D({
     const dctx = { projector, time: 0, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage]);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
   React92.useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");

package/dist/avl/index.js

@@ -12502,19 +12502,12 @@ var init_useCanvasGestures = __esm({
 });
 
 // lib/imageCache.ts
-function getOrLoadImage(url, onReady) {
-  if (!url || typeof window === "undefined") return null;
-  const existing = cache.get(url);
-  if (existing) {
-    if (existing.status === "loaded") return existing.img;
-    if (existing.status === "pending" && onReady) existing.onReady = onReady;
-    return null;
-  }
+function startLoad(url, onReady, existing) {
   const img = new Image();
   img.crossOrigin = "anonymous";
-  const entry = { img, status: "pending", onReady };
-  cache.set(url, entry);
-  updateAssetStatus(url, "pending");
+  const entry = existing ?? { img, status: "pending" };
+  entry.img = img;
+  if (onReady) entry.onReady = onReady;
   img.onload = () => {
     entry.status = "loaded";
     updateAssetStatus(url, "loaded");
@@ -12522,20 +12515,39 @@ function getOrLoadImage(url, onReady) {
   };
   img.onerror = () => {
     entry.status = "failed";
+    entry.failedAt = Date.now();
     updateAssetStatus(url, "failed");
     entry.onReady?.();
   };
   img.src = url;
+  return entry;
+}
+function getOrLoadImage(url, onReady) {
+  if (!url || typeof window === "undefined") return null;
+  const existing = cache.get(url);
+  if (existing) {
+    if (existing.status === "loaded") return existing.img;
+    if (existing.status === "pending" && onReady) existing.onReady = onReady;
+    if (existing.status === "failed" && Date.now() - (existing.failedAt ?? 0) >= RETRY_AFTER_MS) {
+      existing.failedAt = Date.now();
+      startLoad(url, onReady, existing);
+    }
+    return null;
+  }
+  const entry = startLoad(url, onReady);
+  cache.set(url, entry);
+  updateAssetStatus(url, "pending");
   return null;
 }
 function getImageStatus(url) {
   return cache.get(url)?.status;
 }
-var cache;
+var RETRY_AFTER_MS, cache;
 var init_imageCache = __esm({
   "lib/imageCache.ts"() {
     "use client";
     init_verificationRegistry();
+    RETRY_AFTER_MS = 5e3;
     cache = /* @__PURE__ */ new Map();
   }
 });
@@ -13131,6 +13143,11 @@ function Canvas2D({
     }
     return { width: maxX + 1, height: maxY + 1 };
   }, [scenePositions]);
+  const defaultGridFocus = useMemo(() => {
+    if (isFree || projection === "side") return void 0;
+    if (gridExtent.width < 2 || gridExtent.height < 2) return void 0;
+    return { x: (gridExtent.width - 1) / 2, y: (gridExtent.height - 1) / 2 };
+  }, [isFree, projection, gridExtent]);
   const baseOffsetX = useMemo(() => {
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
@@ -13235,10 +13252,13 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
-    if (cameraPos && dragDistance() === 0) {
-      const p = projector.anchorPoint(cameraPos, "center");
-      cam.x = p.x - viewportSize.width / 2;
-      cam.y = p.y - viewportSize.height / 2;
+    if (camera !== "follow" && dragDistance() === 0) {
+      const focus = cameraPos ?? defaultGridFocus;
+      if (focus) {
+        const p = projector.anchorPoint(focus, "center");
+        cam.x = p.x - viewportSize.width / 2;
+        cam.y = p.y - viewportSize.height / 2;
+      }
     }
     const containerRect = containerRef.current?.getBoundingClientRect();
     const canvasRect = canvas.getBoundingClientRect();
@@ -13251,7 +13271,7 @@ function Canvas2D({
     const dctx = { projector, time: 0, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage]);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
   useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");

package/dist/components/index.cjs

@@ -15646,19 +15646,12 @@ var init_useCanvasGestures = __esm({
 });
 
 // lib/imageCache.ts
-function getOrLoadImage(url, onReady) {
-  if (!url || typeof window === "undefined") return null;
-  const existing = cache.get(url);
-  if (existing) {
-    if (existing.status === "loaded") return existing.img;
-    if (existing.status === "pending" && onReady) existing.onReady = onReady;
-    return null;
-  }
+function startLoad(url, onReady, existing) {
   const img = new Image();
   img.crossOrigin = "anonymous";
-  const entry = { img, status: "pending", onReady };
-  cache.set(url, entry);
-  updateAssetStatus(url, "pending");
+  const entry = existing ?? { img, status: "pending" };
+  entry.img = img;
+  if (onReady) entry.onReady = onReady;
   img.onload = () => {
     entry.status = "loaded";
     updateAssetStatus(url, "loaded");
@@ -15666,20 +15659,39 @@ function getOrLoadImage(url, onReady) {
   };
   img.onerror = () => {
     entry.status = "failed";
+    entry.failedAt = Date.now();
     updateAssetStatus(url, "failed");
     entry.onReady?.();
   };
   img.src = url;
+  return entry;
+}
+function getOrLoadImage(url, onReady) {
+  if (!url || typeof window === "undefined") return null;
+  const existing = cache.get(url);
+  if (existing) {
+    if (existing.status === "loaded") return existing.img;
+    if (existing.status === "pending" && onReady) existing.onReady = onReady;
+    if (existing.status === "failed" && Date.now() - (existing.failedAt ?? 0) >= RETRY_AFTER_MS) {
+      existing.failedAt = Date.now();
+      startLoad(url, onReady, existing);
+    }
+    return null;
+  }
+  const entry = startLoad(url, onReady);
+  cache.set(url, entry);
+  updateAssetStatus(url, "pending");
   return null;
 }
 function getImageStatus(url) {
   return cache.get(url)?.status;
 }
-var cache;
+var RETRY_AFTER_MS, cache;
 var init_imageCache = __esm({
   "lib/imageCache.ts"() {
     "use client";
     init_verificationRegistry();
+    RETRY_AFTER_MS = 5e3;
     cache = /* @__PURE__ */ new Map();
   }
 });
@@ -16337,6 +16349,11 @@ function Canvas2D({
     }
     return { width: maxX + 1, height: maxY + 1 };
   }, [scenePositions]);
+  const defaultGridFocus = React75.useMemo(() => {
+    if (isFree || projection === "side") return void 0;
+    if (gridExtent.width < 2 || gridExtent.height < 2) return void 0;
+    return { x: (gridExtent.width - 1) / 2, y: (gridExtent.height - 1) / 2 };
+  }, [isFree, projection, gridExtent]);
   const baseOffsetX = React75.useMemo(() => {
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
@@ -16441,10 +16458,13 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
-    if (cameraPos && dragDistance() === 0) {
-      const p = projector.anchorPoint(cameraPos, "center");
-      cam.x = p.x - viewportSize.width / 2;
-      cam.y = p.y - viewportSize.height / 2;
+    if (camera !== "follow" && dragDistance() === 0) {
+      const focus = cameraPos ?? defaultGridFocus;
+      if (focus) {
+        const p = projector.anchorPoint(focus, "center");
+        cam.x = p.x - viewportSize.width / 2;
+        cam.y = p.y - viewportSize.height / 2;
+      }
     }
     const containerRect = containerRef.current?.getBoundingClientRect();
     const canvasRect = canvas.getBoundingClientRect();
@@ -16457,7 +16477,7 @@ function Canvas2D({
     const dctx = { projector, time: 0, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage]);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
   React75.useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");

package/dist/components/index.js

@@ -15571,19 +15571,12 @@ var init_useCanvasGestures = __esm({
 });
 
 // lib/imageCache.ts
-function getOrLoadImage(url, onReady) {
-  if (!url || typeof window === "undefined") return null;
-  const existing = cache.get(url);
-  if (existing) {
-    if (existing.status === "loaded") return existing.img;
-    if (existing.status === "pending" && onReady) existing.onReady = onReady;
-    return null;
-  }
+function startLoad(url, onReady, existing) {
   const img = new Image();
   img.crossOrigin = "anonymous";
-  const entry = { img, status: "pending", onReady };
-  cache.set(url, entry);
-  updateAssetStatus(url, "pending");
+  const entry = existing ?? { img, status: "pending" };
+  entry.img = img;
+  if (onReady) entry.onReady = onReady;
   img.onload = () => {
     entry.status = "loaded";
     updateAssetStatus(url, "loaded");
@@ -15591,20 +15584,39 @@ function getOrLoadImage(url, onReady) {
   };
   img.onerror = () => {
     entry.status = "failed";
+    entry.failedAt = Date.now();
     updateAssetStatus(url, "failed");
     entry.onReady?.();
   };
   img.src = url;
+  return entry;
+}
+function getOrLoadImage(url, onReady) {
+  if (!url || typeof window === "undefined") return null;
+  const existing = cache.get(url);
+  if (existing) {
+    if (existing.status === "loaded") return existing.img;
+    if (existing.status === "pending" && onReady) existing.onReady = onReady;
+    if (existing.status === "failed" && Date.now() - (existing.failedAt ?? 0) >= RETRY_AFTER_MS) {
+      existing.failedAt = Date.now();
+      startLoad(url, onReady, existing);
+    }
+    return null;
+  }
+  const entry = startLoad(url, onReady);
+  cache.set(url, entry);
+  updateAssetStatus(url, "pending");
   return null;
 }
 function getImageStatus(url) {
   return cache.get(url)?.status;
 }
-var cache;
+var RETRY_AFTER_MS, cache;
 var init_imageCache = __esm({
   "lib/imageCache.ts"() {
     "use client";
     init_verificationRegistry();
+    RETRY_AFTER_MS = 5e3;
     cache = /* @__PURE__ */ new Map();
   }
 });
@@ -16262,6 +16274,11 @@ function Canvas2D({
     }
     return { width: maxX + 1, height: maxY + 1 };
   }, [scenePositions]);
+  const defaultGridFocus = useMemo(() => {
+    if (isFree || projection === "side") return void 0;
+    if (gridExtent.width < 2 || gridExtent.height < 2) return void 0;
+    return { x: (gridExtent.width - 1) / 2, y: (gridExtent.height - 1) / 2 };
+  }, [isFree, projection, gridExtent]);
   const baseOffsetX = useMemo(() => {
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
@@ -16366,10 +16383,13 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
-    if (cameraPos && dragDistance() === 0) {
-      const p = projector.anchorPoint(cameraPos, "center");
-      cam.x = p.x - viewportSize.width / 2;
-      cam.y = p.y - viewportSize.height / 2;
+    if (camera !== "follow" && dragDistance() === 0) {
+      const focus = cameraPos ?? defaultGridFocus;
+      if (focus) {
+        const p = projector.anchorPoint(focus, "center");
+        cam.x = p.x - viewportSize.width / 2;
+        cam.y = p.y - viewportSize.height / 2;
+      }
     }
     const containerRect = containerRef.current?.getBoundingClientRect();
     const canvasRect = canvas.getBoundingClientRect();
@@ -16382,7 +16402,7 @@ function Canvas2D({
     const dctx = { projector, time: 0, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage]);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
   useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");

package/dist/providers/index.cjs

@@ -8836,19 +8836,12 @@ var init_useCanvasGestures = __esm({
 });
 
 // lib/imageCache.ts
-function getOrLoadImage(url, onReady) {
-  if (!url || typeof window === "undefined") return null;
-  const existing = cache.get(url);
-  if (existing) {
-    if (existing.status === "loaded") return existing.img;
-    if (existing.status === "pending" && onReady) existing.onReady = onReady;
-    return null;
-  }
+function startLoad(url, onReady, existing) {
   const img = new Image();
   img.crossOrigin = "anonymous";
-  const entry = { img, status: "pending", onReady };
-  cache.set(url, entry);
-  updateAssetStatus(url, "pending");
+  const entry = existing ?? { img, status: "pending" };
+  entry.img = img;
+  if (onReady) entry.onReady = onReady;
   img.onload = () => {
     entry.status = "loaded";
     updateAssetStatus(url, "loaded");
@@ -8856,20 +8849,39 @@ function getOrLoadImage(url, onReady) {
   };
   img.onerror = () => {
     entry.status = "failed";
+    entry.failedAt = Date.now();
     updateAssetStatus(url, "failed");
     entry.onReady?.();
   };
   img.src = url;
+  return entry;
+}
+function getOrLoadImage(url, onReady) {
+  if (!url || typeof window === "undefined") return null;
+  const existing = cache.get(url);
+  if (existing) {
+    if (existing.status === "loaded") return existing.img;
+    if (existing.status === "pending" && onReady) existing.onReady = onReady;
+    if (existing.status === "failed" && Date.now() - (existing.failedAt ?? 0) >= RETRY_AFTER_MS) {
+      existing.failedAt = Date.now();
+      startLoad(url, onReady, existing);
+    }
+    return null;
+  }
+  const entry = startLoad(url, onReady);
+  cache.set(url, entry);
+  updateAssetStatus(url, "pending");
   return null;
 }
 function getImageStatus(url) {
   return cache.get(url)?.status;
 }
-var cache;
+var RETRY_AFTER_MS, cache;
 var init_imageCache = __esm({
   "lib/imageCache.ts"() {
     "use client";
     init_verificationRegistry();
+    RETRY_AFTER_MS = 5e3;
     cache = /* @__PURE__ */ new Map();
   }
 });
@@ -9465,6 +9477,11 @@ function Canvas2D({
     }
     return { width: maxX + 1, height: maxY + 1 };
   }, [scenePositions]);
+  const defaultGridFocus = React85.useMemo(() => {
+    if (isFree || projection === "side") return void 0;
+    if (gridExtent.width < 2 || gridExtent.height < 2) return void 0;
+    return { x: (gridExtent.width - 1) / 2, y: (gridExtent.height - 1) / 2 };
+  }, [isFree, projection, gridExtent]);
   const baseOffsetX = React85.useMemo(() => {
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
@@ -9569,10 +9586,13 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
-    if (cameraPos && dragDistance() === 0) {
-      const p = projector.anchorPoint(cameraPos, "center");
-      cam.x = p.x - viewportSize.width / 2;
-      cam.y = p.y - viewportSize.height / 2;
+    if (camera !== "follow" && dragDistance() === 0) {
+      const focus = cameraPos ?? defaultGridFocus;
+      if (focus) {
+        const p = projector.anchorPoint(focus, "center");
+        cam.x = p.x - viewportSize.width / 2;
+        cam.y = p.y - viewportSize.height / 2;
+      }
     }
     const containerRect = containerRef.current?.getBoundingClientRect();
     const canvasRect = canvas.getBoundingClientRect();
@@ -9585,7 +9605,7 @@ function Canvas2D({
     const dctx = { projector, time: 0, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage]);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
   React85.useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");

package/dist/providers/index.js

@@ -8762,19 +8762,12 @@ var init_useCanvasGestures = __esm({
 });
 
 // lib/imageCache.ts
-function getOrLoadImage(url, onReady) {
-  if (!url || typeof window === "undefined") return null;
-  const existing = cache.get(url);
-  if (existing) {
-    if (existing.status === "loaded") return existing.img;
-    if (existing.status === "pending" && onReady) existing.onReady = onReady;
-    return null;
-  }
+function startLoad(url, onReady, existing) {
   const img = new Image();
   img.crossOrigin = "anonymous";
-  const entry = { img, status: "pending", onReady };
-  cache.set(url, entry);
-  updateAssetStatus(url, "pending");
+  const entry = existing ?? { img, status: "pending" };
+  entry.img = img;
+  if (onReady) entry.onReady = onReady;
   img.onload = () => {
     entry.status = "loaded";
     updateAssetStatus(url, "loaded");
@@ -8782,20 +8775,39 @@ function getOrLoadImage(url, onReady) {
   };
   img.onerror = () => {
     entry.status = "failed";
+    entry.failedAt = Date.now();
     updateAssetStatus(url, "failed");
     entry.onReady?.();
   };
   img.src = url;
+  return entry;
+}
+function getOrLoadImage(url, onReady) {
+  if (!url || typeof window === "undefined") return null;
+  const existing = cache.get(url);
+  if (existing) {
+    if (existing.status === "loaded") return existing.img;
+    if (existing.status === "pending" && onReady) existing.onReady = onReady;
+    if (existing.status === "failed" && Date.now() - (existing.failedAt ?? 0) >= RETRY_AFTER_MS) {
+      existing.failedAt = Date.now();
+      startLoad(url, onReady, existing);
+    }
+    return null;
+  }
+  const entry = startLoad(url, onReady);
+  cache.set(url, entry);
+  updateAssetStatus(url, "pending");
   return null;
 }
 function getImageStatus(url) {
   return cache.get(url)?.status;
 }
-var cache;
+var RETRY_AFTER_MS, cache;
 var init_imageCache = __esm({
   "lib/imageCache.ts"() {
     "use client";
     init_verificationRegistry();
+    RETRY_AFTER_MS = 5e3;
     cache = /* @__PURE__ */ new Map();
   }
 });
@@ -9391,6 +9403,11 @@ function Canvas2D({
     }
     return { width: maxX + 1, height: maxY + 1 };
   }, [scenePositions]);
+  const defaultGridFocus = useMemo(() => {
+    if (isFree || projection === "side") return void 0;
+    if (gridExtent.width < 2 || gridExtent.height < 2) return void 0;
+    return { x: (gridExtent.width - 1) / 2, y: (gridExtent.height - 1) / 2 };
+  }, [isFree, projection, gridExtent]);
   const baseOffsetX = useMemo(() => {
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
@@ -9495,10 +9512,13 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
-    if (cameraPos && dragDistance() === 0) {
-      const p = projector.anchorPoint(cameraPos, "center");
-      cam.x = p.x - viewportSize.width / 2;
-      cam.y = p.y - viewportSize.height / 2;
+    if (camera !== "follow" && dragDistance() === 0) {
+      const focus = cameraPos ?? defaultGridFocus;
+      if (focus) {
+        const p = projector.anchorPoint(focus, "center");
+        cam.x = p.x - viewportSize.width / 2;
+        cam.y = p.y - viewportSize.height / 2;
+      }
     }
     const containerRect = containerRef.current?.getBoundingClientRect();
     const canvasRect = canvas.getBoundingClientRect();
@@ -9511,7 +9531,7 @@ function Canvas2D({
     const dctx = { projector, time: 0, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage]);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
   useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");

package/dist/runtime/index.cjs

@@ -9190,19 +9190,12 @@ var init_useCamera = __esm({
 });
 
 // lib/imageCache.ts
-function getOrLoadImage(url, onReady) {
-  if (!url || typeof window === "undefined") return null;
-  const existing = cache.get(url);
-  if (existing) {
-    if (existing.status === "loaded") return existing.img;
-    if (existing.status === "pending" && onReady) existing.onReady = onReady;
-    return null;
-  }
+function startLoad(url, onReady, existing) {
   const img = new Image();
   img.crossOrigin = "anonymous";
-  const entry = { img, status: "pending", onReady };
-  cache.set(url, entry);
-  updateAssetStatus(url, "pending");
+  const entry = existing ?? { img, status: "pending" };
+  entry.img = img;
+  if (onReady) entry.onReady = onReady;
   img.onload = () => {
     entry.status = "loaded";
     updateAssetStatus(url, "loaded");
@@ -9210,20 +9203,39 @@ function getOrLoadImage(url, onReady) {
   };
   img.onerror = () => {
     entry.status = "failed";
+    entry.failedAt = Date.now();
     updateAssetStatus(url, "failed");
     entry.onReady?.();
   };
   img.src = url;
+  return entry;
+}
+function getOrLoadImage(url, onReady) {
+  if (!url || typeof window === "undefined") return null;
+  const existing = cache.get(url);
+  if (existing) {
+    if (existing.status === "loaded") return existing.img;
+    if (existing.status === "pending" && onReady) existing.onReady = onReady;
+    if (existing.status === "failed" && Date.now() - (existing.failedAt ?? 0) >= RETRY_AFTER_MS) {
+      existing.failedAt = Date.now();
+      startLoad(url, onReady, existing);
+    }
+    return null;
+  }
+  const entry = startLoad(url, onReady);
+  cache.set(url, entry);
+  updateAssetStatus(url, "pending");
   return null;
 }
 function getImageStatus(url) {
   return cache.get(url)?.status;
 }
-var cache;
+var RETRY_AFTER_MS, cache;
 var init_imageCache = __esm({
   "lib/imageCache.ts"() {
     "use client";
     init_verificationRegistry();
+    RETRY_AFTER_MS = 5e3;
     cache = /* @__PURE__ */ new Map();
   }
 });
@@ -9819,6 +9831,11 @@ function Canvas2D({
     }
     return { width: maxX + 1, height: maxY + 1 };
   }, [scenePositions]);
+  const defaultGridFocus = React83.useMemo(() => {
+    if (isFree || projection === "side") return void 0;
+    if (gridExtent.width < 2 || gridExtent.height < 2) return void 0;
+    return { x: (gridExtent.width - 1) / 2, y: (gridExtent.height - 1) / 2 };
+  }, [isFree, projection, gridExtent]);
   const baseOffsetX = React83.useMemo(() => {
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
@@ -9923,10 +9940,13 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
-    if (cameraPos && dragDistance() === 0) {
-      const p = projector.anchorPoint(cameraPos, "center");
-      cam.x = p.x - viewportSize.width / 2;
-      cam.y = p.y - viewportSize.height / 2;
+    if (camera !== "follow" && dragDistance() === 0) {
+      const focus = cameraPos ?? defaultGridFocus;
+      if (focus) {
+        const p = projector.anchorPoint(focus, "center");
+        cam.x = p.x - viewportSize.width / 2;
+        cam.y = p.y - viewportSize.height / 2;
+      }
     }
     const containerRect = containerRef.current?.getBoundingClientRect();
     const canvasRect = canvas.getBoundingClientRect();
@@ -9939,7 +9959,7 @@ function Canvas2D({
     const dctx = { projector, time: 0, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage]);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
   React83.useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");

package/dist/runtime/index.js

@@ -9116,19 +9116,12 @@ var init_useCamera = __esm({
 });
 
 // lib/imageCache.ts
-function getOrLoadImage(url, onReady) {
-  if (!url || typeof window === "undefined") return null;
-  const existing = cache.get(url);
-  if (existing) {
-    if (existing.status === "loaded") return existing.img;
-    if (existing.status === "pending" && onReady) existing.onReady = onReady;
-    return null;
-  }
+function startLoad(url, onReady, existing) {
   const img = new Image();
   img.crossOrigin = "anonymous";
-  const entry = { img, status: "pending", onReady };
-  cache.set(url, entry);
-  updateAssetStatus(url, "pending");
+  const entry = existing ?? { img, status: "pending" };
+  entry.img = img;
+  if (onReady) entry.onReady = onReady;
   img.onload = () => {
     entry.status = "loaded";
     updateAssetStatus(url, "loaded");
@@ -9136,20 +9129,39 @@ function getOrLoadImage(url, onReady) {
   };
   img.onerror = () => {
     entry.status = "failed";
+    entry.failedAt = Date.now();
     updateAssetStatus(url, "failed");
     entry.onReady?.();
   };
   img.src = url;
+  return entry;
+}
+function getOrLoadImage(url, onReady) {
+  if (!url || typeof window === "undefined") return null;
+  const existing = cache.get(url);
+  if (existing) {
+    if (existing.status === "loaded") return existing.img;
+    if (existing.status === "pending" && onReady) existing.onReady = onReady;
+    if (existing.status === "failed" && Date.now() - (existing.failedAt ?? 0) >= RETRY_AFTER_MS) {
+      existing.failedAt = Date.now();
+      startLoad(url, onReady, existing);
+    }
+    return null;
+  }
+  const entry = startLoad(url, onReady);
+  cache.set(url, entry);
+  updateAssetStatus(url, "pending");
   return null;
 }
 function getImageStatus(url) {
   return cache.get(url)?.status;
 }
-var cache;
+var RETRY_AFTER_MS, cache;
 var init_imageCache = __esm({
   "lib/imageCache.ts"() {
     "use client";
     init_verificationRegistry();
+    RETRY_AFTER_MS = 5e3;
     cache = /* @__PURE__ */ new Map();
   }
 });
@@ -9745,6 +9757,11 @@ function Canvas2D({
     }
     return { width: maxX + 1, height: maxY + 1 };
   }, [scenePositions]);
+  const defaultGridFocus = useMemo(() => {
+    if (isFree || projection === "side") return void 0;
+    if (gridExtent.width < 2 || gridExtent.height < 2) return void 0;
+    return { x: (gridExtent.width - 1) / 2, y: (gridExtent.height - 1) / 2 };
+  }, [isFree, projection, gridExtent]);
   const baseOffsetX = useMemo(() => {
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
@@ -9849,10 +9866,13 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
-    if (cameraPos && dragDistance() === 0) {
-      const p = projector.anchorPoint(cameraPos, "center");
-      cam.x = p.x - viewportSize.width / 2;
-      cam.y = p.y - viewportSize.height / 2;
+    if (camera !== "follow" && dragDistance() === 0) {
+      const focus = cameraPos ?? defaultGridFocus;
+      if (focus) {
+        const p = projector.anchorPoint(focus, "center");
+        cam.x = p.x - viewportSize.width / 2;
+        cam.y = p.y - viewportSize.height / 2;
+      }
     }
     const containerRect = containerRef.current?.getBoundingClientRect();
     const canvasRect = canvas.getBoundingClientRect();
@@ -9865,7 +9885,7 @@ function Canvas2D({
     const dctx = { projector, time: 0, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage]);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
   useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.136.0",
+  "version": "5.138.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -118,11 +118,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.43.0",
+    "@almadar/core": "^10.44.0",
     "@almadar/evaluator": "^2.38.0",
     "@almadar/logger": "^1.10.0",
-    "@almadar/runtime": "^6.45.0",
-    "@almadar/std": "^16.153.0",
+    "@almadar/runtime": "^6.46.0",
+    "@almadar/std": "^16.154.0",
     "@almadar/syntax": "^1.13.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",