@almadar/ui 5.11.0 → 5.12.1

package/dist/avl/index.cjs

@@ -14619,7 +14619,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect89, useRef: useRef88, useCallback: useCallback130, useState: useState124 } = React98__namespace.default;
+      const { useEffect: useEffect89, useRef: useRef88, useCallback: useCallback130, useState: useState125 } = React98__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -14664,7 +14664,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus3();
-        const [clickedPosition, setClickedPosition] = useState124(null);
+        const [clickedPosition, setClickedPosition] = useState125(null);
         const handleMapClick = useCallback130((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -30441,8 +30441,16 @@ function GameCanvas2D({
   drawEventRef.current = drawEvent;
   const emitRef = React98__namespace.useRef(emit);
   emitRef.current = emit;
+  const assetBaseUrlRef = React98__namespace.useRef(assetBaseUrl);
+  assetBaseUrlRef.current = assetBaseUrl;
+  const backgroundImageRef = React98__namespace.useRef(backgroundImage);
+  backgroundImageRef.current = backgroundImage;
+  const widthRef = React98__namespace.useRef(width);
+  widthRef.current = width;
+  const heightRef = React98__namespace.useRef(height);
+  heightRef.current = height;
   const loadImage = React98__namespace.useCallback((url) => {
-    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
+    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrlRef.current}${url}`;
     const cached = imageCache.current.get(fullUrl);
     if (cached?.complete && cached.naturalWidth > 0) return cached;
     if (!cached) {
@@ -30452,7 +30460,7 @@ function GameCanvas2D({
       imageCache.current.set(fullUrl, img);
     }
     return null;
-  }, [assetBaseUrl]);
+  }, []);
   React98__namespace.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -30474,10 +30482,10 @@ function GameCanvas2D({
         if (tickEventRef.current) {
           emitRef.current(tickEventRef.current, { dt, frame });
         }
-        if (backgroundImage) {
-          const bgImg = loadImage(backgroundImage);
+        if (backgroundImageRef.current) {
+          const bgImg = loadImage(backgroundImageRef.current);
           if (bgImg) {
-            ctx.drawImage(bgImg, 0, 0, width, height);
+            ctx.drawImage(bgImg, 0, 0, widthRef.current, heightRef.current);
           }
         }
         onDrawRef.current?.(ctx, frame);
@@ -30493,7 +30501,7 @@ function GameCanvas2D({
       running = false;
       cancelAnimationFrame(rafRef.current);
     };
-  }, [fps]);
+  }, [fps, loadImage]);
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("inline-block", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     "canvas",
     {
@@ -31635,15 +31643,22 @@ function PlatformerCanvas({
   const eventBus = useEventBus();
   const keysRef = React98.useRef(/* @__PURE__ */ new Set());
   const imageCache = React98.useRef(/* @__PURE__ */ new Map());
+  const [loadedImages, setLoadedImages] = React98.useState(/* @__PURE__ */ new Set());
   const loadImage = React98.useCallback((url) => {
     const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
     const cached = imageCache.current.get(fullUrl);
-    if (cached?.complete && cached.naturalWidth > 0) return cached;
+    if (cached?.complete && cached.naturalWidth > 0) {
+      if (!loadedImages.has(fullUrl)) {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
+      }
+      return cached;
+    }
     if (!cached) {
       const img = new Image();
       img.crossOrigin = "anonymous";
       img.src = fullUrl;
       img.onload = () => {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
         updateAssetStatus(fullUrl, "loaded");
       };
       img.onerror = () => {
@@ -31653,7 +31668,7 @@ function PlatformerCanvas({
       updateAssetStatus(fullUrl, "pending");
     }
     return null;
-  }, [assetBaseUrl]);
+  }, [assetBaseUrl, loadedImages]);
   React98.useEffect(() => {
     if (typeof window === "undefined") return;
     const canvas = canvasRef.current;
@@ -31835,7 +31850,7 @@ function PlatformerCanvas({
       ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
       ctx.fill();
     }
-  });
+  }, [player, platforms, worldWidth, worldHeight, canvasWidth, canvasHeight, followCamera, bgColor, playerSprite, tileSprites, backgroundImage, assetBaseUrl, loadedImages]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "canvas",
     {
@@ -33031,10 +33046,13 @@ function TableView({
   }
   const lk = LOOKS[look];
   const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
+  const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
+  const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
   const gridTemplateColumns = [
     selectable ? "auto" : null,
     ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
-    hasActions ? "auto" : null
+    actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
@@ -33121,7 +33139,7 @@ function TableView({
             }
             return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
-          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "justify-end flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
             (maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions).map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
               Button,
               {

package/dist/avl/index.js

@@ -14570,7 +14570,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect89, useRef: useRef88, useCallback: useCallback130, useState: useState124 } = React98__default;
+      const { useEffect: useEffect89, useRef: useRef88, useCallback: useCallback130, useState: useState125 } = React98__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -14615,7 +14615,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus3();
-        const [clickedPosition, setClickedPosition] = useState124(null);
+        const [clickedPosition, setClickedPosition] = useState125(null);
         const handleMapClick = useCallback130((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -30392,8 +30392,16 @@ function GameCanvas2D({
   drawEventRef.current = drawEvent;
   const emitRef = React98.useRef(emit);
   emitRef.current = emit;
+  const assetBaseUrlRef = React98.useRef(assetBaseUrl);
+  assetBaseUrlRef.current = assetBaseUrl;
+  const backgroundImageRef = React98.useRef(backgroundImage);
+  backgroundImageRef.current = backgroundImage;
+  const widthRef = React98.useRef(width);
+  widthRef.current = width;
+  const heightRef = React98.useRef(height);
+  heightRef.current = height;
   const loadImage = React98.useCallback((url) => {
-    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
+    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrlRef.current}${url}`;
     const cached = imageCache.current.get(fullUrl);
     if (cached?.complete && cached.naturalWidth > 0) return cached;
     if (!cached) {
@@ -30403,7 +30411,7 @@ function GameCanvas2D({
       imageCache.current.set(fullUrl, img);
     }
     return null;
-  }, [assetBaseUrl]);
+  }, []);
   React98.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -30425,10 +30433,10 @@ function GameCanvas2D({
         if (tickEventRef.current) {
           emitRef.current(tickEventRef.current, { dt, frame });
         }
-        if (backgroundImage) {
-          const bgImg = loadImage(backgroundImage);
+        if (backgroundImageRef.current) {
+          const bgImg = loadImage(backgroundImageRef.current);
           if (bgImg) {
-            ctx.drawImage(bgImg, 0, 0, width, height);
+            ctx.drawImage(bgImg, 0, 0, widthRef.current, heightRef.current);
           }
         }
         onDrawRef.current?.(ctx, frame);
@@ -30444,7 +30452,7 @@ function GameCanvas2D({
       running = false;
       cancelAnimationFrame(rafRef.current);
     };
-  }, [fps]);
+  }, [fps, loadImage]);
   return /* @__PURE__ */ jsx(Box, { className: cn("inline-block", className), children: /* @__PURE__ */ jsx(
     "canvas",
     {
@@ -31586,15 +31594,22 @@ function PlatformerCanvas({
   const eventBus = useEventBus();
   const keysRef = useRef(/* @__PURE__ */ new Set());
   const imageCache = useRef(/* @__PURE__ */ new Map());
+  const [loadedImages, setLoadedImages] = useState(/* @__PURE__ */ new Set());
   const loadImage = useCallback((url) => {
     const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
     const cached = imageCache.current.get(fullUrl);
-    if (cached?.complete && cached.naturalWidth > 0) return cached;
+    if (cached?.complete && cached.naturalWidth > 0) {
+      if (!loadedImages.has(fullUrl)) {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
+      }
+      return cached;
+    }
     if (!cached) {
       const img = new Image();
       img.crossOrigin = "anonymous";
       img.src = fullUrl;
       img.onload = () => {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
         updateAssetStatus(fullUrl, "loaded");
       };
       img.onerror = () => {
@@ -31604,7 +31619,7 @@ function PlatformerCanvas({
       updateAssetStatus(fullUrl, "pending");
     }
     return null;
-  }, [assetBaseUrl]);
+  }, [assetBaseUrl, loadedImages]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     const canvas = canvasRef.current;
@@ -31786,7 +31801,7 @@ function PlatformerCanvas({
       ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
       ctx.fill();
     }
-  });
+  }, [player, platforms, worldWidth, worldHeight, canvasWidth, canvasHeight, followCamera, bgColor, playerSprite, tileSprites, backgroundImage, assetBaseUrl, loadedImages]);
   return /* @__PURE__ */ jsx(
     "canvas",
     {
@@ -32982,10 +32997,13 @@ function TableView({
   }
   const lk = LOOKS[look];
   const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
+  const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
+  const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
   const gridTemplateColumns = [
     selectable ? "auto" : null,
     ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
-    hasActions ? "auto" : null
+    actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxs(
     Box,
@@ -33072,7 +33090,7 @@ function TableView({
             }
             return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
-          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "justify-end flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
             (maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions).map((action, i) => /* @__PURE__ */ jsxs(
               Button,
               {

package/dist/components/index.cjs

@@ -8676,7 +8676,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect72, useRef: useRef66, useCallback: useCallback128, useState: useState110 } = React80__namespace.default;
+      const { useEffect: useEffect72, useRef: useRef66, useCallback: useCallback128, useState: useState111 } = React80__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -8721,7 +8721,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState110(null);
+        const [clickedPosition, setClickedPosition] = useState111(null);
         const handleMapClick = useCallback128((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -25826,8 +25826,16 @@ function GameCanvas2D({
   drawEventRef.current = drawEvent;
   const emitRef = React80__namespace.useRef(emit);
   emitRef.current = emit;
+  const assetBaseUrlRef = React80__namespace.useRef(assetBaseUrl);
+  assetBaseUrlRef.current = assetBaseUrl;
+  const backgroundImageRef = React80__namespace.useRef(backgroundImage);
+  backgroundImageRef.current = backgroundImage;
+  const widthRef = React80__namespace.useRef(width);
+  widthRef.current = width;
+  const heightRef = React80__namespace.useRef(height);
+  heightRef.current = height;
   const loadImage = React80__namespace.useCallback((url) => {
-    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
+    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrlRef.current}${url}`;
     const cached = imageCache.current.get(fullUrl);
     if (cached?.complete && cached.naturalWidth > 0) return cached;
     if (!cached) {
@@ -25837,7 +25845,7 @@ function GameCanvas2D({
       imageCache.current.set(fullUrl, img);
     }
     return null;
-  }, [assetBaseUrl]);
+  }, []);
   React80__namespace.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -25859,10 +25867,10 @@ function GameCanvas2D({
         if (tickEventRef.current) {
           emitRef.current(tickEventRef.current, { dt, frame });
         }
-        if (backgroundImage) {
-          const bgImg = loadImage(backgroundImage);
+        if (backgroundImageRef.current) {
+          const bgImg = loadImage(backgroundImageRef.current);
           if (bgImg) {
-            ctx.drawImage(bgImg, 0, 0, width, height);
+            ctx.drawImage(bgImg, 0, 0, widthRef.current, heightRef.current);
           }
         }
         onDrawRef.current?.(ctx, frame);
@@ -25878,7 +25886,7 @@ function GameCanvas2D({
       running = false;
       cancelAnimationFrame(rafRef.current);
     };
-  }, [fps]);
+  }, [fps, loadImage]);
   return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: cn("inline-block", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     "canvas",
     {
@@ -27072,15 +27080,22 @@ function PlatformerCanvas({
   const eventBus = useEventBus();
   const keysRef = React80.useRef(/* @__PURE__ */ new Set());
   const imageCache = React80.useRef(/* @__PURE__ */ new Map());
+  const [loadedImages, setLoadedImages] = React80.useState(/* @__PURE__ */ new Set());
   const loadImage = React80.useCallback((url) => {
     const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
     const cached = imageCache.current.get(fullUrl);
-    if (cached?.complete && cached.naturalWidth > 0) return cached;
+    if (cached?.complete && cached.naturalWidth > 0) {
+      if (!loadedImages.has(fullUrl)) {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
+      }
+      return cached;
+    }
     if (!cached) {
       const img = new Image();
       img.crossOrigin = "anonymous";
       img.src = fullUrl;
       img.onload = () => {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
         updateAssetStatus(fullUrl, "loaded");
       };
       img.onerror = () => {
@@ -27090,7 +27105,7 @@ function PlatformerCanvas({
       updateAssetStatus(fullUrl, "pending");
     }
     return null;
-  }, [assetBaseUrl]);
+  }, [assetBaseUrl, loadedImages]);
   React80.useEffect(() => {
     if (typeof window === "undefined") return;
     const canvas = canvasRef.current;
@@ -27272,7 +27287,7 @@ function PlatformerCanvas({
       ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
       ctx.fill();
     }
-  });
+  }, [player, platforms, worldWidth, worldHeight, canvasWidth, canvasHeight, followCamera, bgColor, playerSprite, tileSprites, backgroundImage, assetBaseUrl, loadedImages]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "canvas",
     {
@@ -28490,10 +28505,13 @@ function TableView({
   }
   const lk = LOOKS[look];
   const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
+  const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
+  const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
   const gridTemplateColumns = [
     selectable ? "auto" : null,
     ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
-    hasActions ? "auto" : null
+    actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxRuntime.jsxs(
     exports.Box,
@@ -28580,7 +28598,7 @@ function TableView({
             }
             return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
-          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", className: "justify-end flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
             (maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions).map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
               exports.Button,
               {

package/dist/components/index.js

@@ -8627,7 +8627,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect72, useRef: useRef66, useCallback: useCallback128, useState: useState110 } = React80__default;
+      const { useEffect: useEffect72, useRef: useRef66, useCallback: useCallback128, useState: useState111 } = React80__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -8672,7 +8672,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState110(null);
+        const [clickedPosition, setClickedPosition] = useState111(null);
         const handleMapClick = useCallback128((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -25777,8 +25777,16 @@ function GameCanvas2D({
   drawEventRef.current = drawEvent;
   const emitRef = React80.useRef(emit);
   emitRef.current = emit;
+  const assetBaseUrlRef = React80.useRef(assetBaseUrl);
+  assetBaseUrlRef.current = assetBaseUrl;
+  const backgroundImageRef = React80.useRef(backgroundImage);
+  backgroundImageRef.current = backgroundImage;
+  const widthRef = React80.useRef(width);
+  widthRef.current = width;
+  const heightRef = React80.useRef(height);
+  heightRef.current = height;
   const loadImage = React80.useCallback((url) => {
-    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
+    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrlRef.current}${url}`;
     const cached = imageCache.current.get(fullUrl);
     if (cached?.complete && cached.naturalWidth > 0) return cached;
     if (!cached) {
@@ -25788,7 +25796,7 @@ function GameCanvas2D({
       imageCache.current.set(fullUrl, img);
     }
     return null;
-  }, [assetBaseUrl]);
+  }, []);
   React80.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -25810,10 +25818,10 @@ function GameCanvas2D({
         if (tickEventRef.current) {
           emitRef.current(tickEventRef.current, { dt, frame });
         }
-        if (backgroundImage) {
-          const bgImg = loadImage(backgroundImage);
+        if (backgroundImageRef.current) {
+          const bgImg = loadImage(backgroundImageRef.current);
           if (bgImg) {
-            ctx.drawImage(bgImg, 0, 0, width, height);
+            ctx.drawImage(bgImg, 0, 0, widthRef.current, heightRef.current);
           }
         }
         onDrawRef.current?.(ctx, frame);
@@ -25829,7 +25837,7 @@ function GameCanvas2D({
       running = false;
       cancelAnimationFrame(rafRef.current);
     };
-  }, [fps]);
+  }, [fps, loadImage]);
   return /* @__PURE__ */ jsx(Box, { className: cn("inline-block", className), children: /* @__PURE__ */ jsx(
     "canvas",
     {
@@ -27023,15 +27031,22 @@ function PlatformerCanvas({
   const eventBus = useEventBus();
   const keysRef = useRef(/* @__PURE__ */ new Set());
   const imageCache = useRef(/* @__PURE__ */ new Map());
+  const [loadedImages, setLoadedImages] = useState(/* @__PURE__ */ new Set());
   const loadImage = useCallback((url) => {
     const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
     const cached = imageCache.current.get(fullUrl);
-    if (cached?.complete && cached.naturalWidth > 0) return cached;
+    if (cached?.complete && cached.naturalWidth > 0) {
+      if (!loadedImages.has(fullUrl)) {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
+      }
+      return cached;
+    }
     if (!cached) {
       const img = new Image();
       img.crossOrigin = "anonymous";
       img.src = fullUrl;
       img.onload = () => {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
         updateAssetStatus(fullUrl, "loaded");
       };
       img.onerror = () => {
@@ -27041,7 +27056,7 @@ function PlatformerCanvas({
       updateAssetStatus(fullUrl, "pending");
     }
     return null;
-  }, [assetBaseUrl]);
+  }, [assetBaseUrl, loadedImages]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     const canvas = canvasRef.current;
@@ -27223,7 +27238,7 @@ function PlatformerCanvas({
       ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
       ctx.fill();
     }
-  });
+  }, [player, platforms, worldWidth, worldHeight, canvasWidth, canvasHeight, followCamera, bgColor, playerSprite, tileSprites, backgroundImage, assetBaseUrl, loadedImages]);
   return /* @__PURE__ */ jsx(
     "canvas",
     {
@@ -28441,10 +28456,13 @@ function TableView({
   }
   const lk = LOOKS[look];
   const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
+  const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
+  const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
   const gridTemplateColumns = [
     selectable ? "auto" : null,
     ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
-    hasActions ? "auto" : null
+    actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxs(
     Box,
@@ -28531,7 +28549,7 @@ function TableView({
             }
             return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
-          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "justify-end flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
             (maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions).map((action, i) => /* @__PURE__ */ jsxs(
               Button,
               {

package/dist/providers/index.cjs

@@ -10244,7 +10244,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect69, useRef: useRef65, useCallback: useCallback114, useState: useState99 } = React86__namespace.default;
+      const { useEffect: useEffect69, useRef: useRef65, useCallback: useCallback114, useState: useState100 } = React86__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -10289,7 +10289,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState99(null);
+        const [clickedPosition, setClickedPosition] = useState100(null);
         const handleMapClick = useCallback114((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -26853,8 +26853,16 @@ function GameCanvas2D({
   drawEventRef.current = drawEvent;
   const emitRef = React86__namespace.useRef(emit);
   emitRef.current = emit;
+  const assetBaseUrlRef = React86__namespace.useRef(assetBaseUrl);
+  assetBaseUrlRef.current = assetBaseUrl;
+  const backgroundImageRef = React86__namespace.useRef(backgroundImage);
+  backgroundImageRef.current = backgroundImage;
+  const widthRef = React86__namespace.useRef(width);
+  widthRef.current = width;
+  const heightRef = React86__namespace.useRef(height);
+  heightRef.current = height;
   const loadImage = React86__namespace.useCallback((url) => {
-    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
+    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrlRef.current}${url}`;
     const cached = imageCache.current.get(fullUrl);
     if (cached?.complete && cached.naturalWidth > 0) return cached;
     if (!cached) {
@@ -26864,7 +26872,7 @@ function GameCanvas2D({
       imageCache.current.set(fullUrl, img);
     }
     return null;
-  }, [assetBaseUrl]);
+  }, []);
   React86__namespace.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -26886,10 +26894,10 @@ function GameCanvas2D({
         if (tickEventRef.current) {
           emitRef.current(tickEventRef.current, { dt, frame });
         }
-        if (backgroundImage) {
-          const bgImg = loadImage(backgroundImage);
+        if (backgroundImageRef.current) {
+          const bgImg = loadImage(backgroundImageRef.current);
           if (bgImg) {
-            ctx.drawImage(bgImg, 0, 0, width, height);
+            ctx.drawImage(bgImg, 0, 0, widthRef.current, heightRef.current);
           }
         }
         onDrawRef.current?.(ctx, frame);
@@ -26905,7 +26913,7 @@ function GameCanvas2D({
       running = false;
       cancelAnimationFrame(rafRef.current);
     };
-  }, [fps]);
+  }, [fps, loadImage]);
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("inline-block", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     "canvas",
     {
@@ -28047,15 +28055,22 @@ function PlatformerCanvas({
   const eventBus = useEventBus();
   const keysRef = React86.useRef(/* @__PURE__ */ new Set());
   const imageCache = React86.useRef(/* @__PURE__ */ new Map());
+  const [loadedImages, setLoadedImages] = React86.useState(/* @__PURE__ */ new Set());
   const loadImage = React86.useCallback((url) => {
     const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
     const cached = imageCache.current.get(fullUrl);
-    if (cached?.complete && cached.naturalWidth > 0) return cached;
+    if (cached?.complete && cached.naturalWidth > 0) {
+      if (!loadedImages.has(fullUrl)) {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
+      }
+      return cached;
+    }
     if (!cached) {
       const img = new Image();
       img.crossOrigin = "anonymous";
       img.src = fullUrl;
       img.onload = () => {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
         updateAssetStatus(fullUrl, "loaded");
       };
       img.onerror = () => {
@@ -28065,7 +28080,7 @@ function PlatformerCanvas({
       updateAssetStatus(fullUrl, "pending");
     }
     return null;
-  }, [assetBaseUrl]);
+  }, [assetBaseUrl, loadedImages]);
   React86.useEffect(() => {
     if (typeof window === "undefined") return;
     const canvas = canvasRef.current;
@@ -28247,7 +28262,7 @@ function PlatformerCanvas({
       ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
       ctx.fill();
     }
-  });
+  }, [player, platforms, worldWidth, worldHeight, canvasWidth, canvasHeight, followCamera, bgColor, playerSprite, tileSprites, backgroundImage, assetBaseUrl, loadedImages]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "canvas",
     {
@@ -29443,10 +29458,13 @@ function TableView({
   }
   const lk = LOOKS[look];
   const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
+  const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
+  const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
   const gridTemplateColumns = [
     selectable ? "auto" : null,
     ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
-    hasActions ? "auto" : null
+    actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
@@ -29533,7 +29551,7 @@ function TableView({
             }
             return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
-          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "justify-end flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
             (maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions).map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
               Button,
               {

package/dist/providers/index.js

@@ -10195,7 +10195,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect69, useRef: useRef65, useCallback: useCallback114, useState: useState99 } = React86__default;
+      const { useEffect: useEffect69, useRef: useRef65, useCallback: useCallback114, useState: useState100 } = React86__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -10240,7 +10240,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState99(null);
+        const [clickedPosition, setClickedPosition] = useState100(null);
         const handleMapClick = useCallback114((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -26804,8 +26804,16 @@ function GameCanvas2D({
   drawEventRef.current = drawEvent;
   const emitRef = React86.useRef(emit);
   emitRef.current = emit;
+  const assetBaseUrlRef = React86.useRef(assetBaseUrl);
+  assetBaseUrlRef.current = assetBaseUrl;
+  const backgroundImageRef = React86.useRef(backgroundImage);
+  backgroundImageRef.current = backgroundImage;
+  const widthRef = React86.useRef(width);
+  widthRef.current = width;
+  const heightRef = React86.useRef(height);
+  heightRef.current = height;
   const loadImage = React86.useCallback((url) => {
-    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
+    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrlRef.current}${url}`;
     const cached = imageCache.current.get(fullUrl);
     if (cached?.complete && cached.naturalWidth > 0) return cached;
     if (!cached) {
@@ -26815,7 +26823,7 @@ function GameCanvas2D({
       imageCache.current.set(fullUrl, img);
     }
     return null;
-  }, [assetBaseUrl]);
+  }, []);
   React86.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -26837,10 +26845,10 @@ function GameCanvas2D({
         if (tickEventRef.current) {
           emitRef.current(tickEventRef.current, { dt, frame });
         }
-        if (backgroundImage) {
-          const bgImg = loadImage(backgroundImage);
+        if (backgroundImageRef.current) {
+          const bgImg = loadImage(backgroundImageRef.current);
           if (bgImg) {
-            ctx.drawImage(bgImg, 0, 0, width, height);
+            ctx.drawImage(bgImg, 0, 0, widthRef.current, heightRef.current);
           }
         }
         onDrawRef.current?.(ctx, frame);
@@ -26856,7 +26864,7 @@ function GameCanvas2D({
       running = false;
       cancelAnimationFrame(rafRef.current);
     };
-  }, [fps]);
+  }, [fps, loadImage]);
   return /* @__PURE__ */ jsx(Box, { className: cn("inline-block", className), children: /* @__PURE__ */ jsx(
     "canvas",
     {
@@ -27998,15 +28006,22 @@ function PlatformerCanvas({
   const eventBus = useEventBus();
   const keysRef = useRef(/* @__PURE__ */ new Set());
   const imageCache = useRef(/* @__PURE__ */ new Map());
+  const [loadedImages, setLoadedImages] = useState(/* @__PURE__ */ new Set());
   const loadImage = useCallback((url) => {
     const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
     const cached = imageCache.current.get(fullUrl);
-    if (cached?.complete && cached.naturalWidth > 0) return cached;
+    if (cached?.complete && cached.naturalWidth > 0) {
+      if (!loadedImages.has(fullUrl)) {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
+      }
+      return cached;
+    }
     if (!cached) {
       const img = new Image();
       img.crossOrigin = "anonymous";
       img.src = fullUrl;
       img.onload = () => {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
         updateAssetStatus(fullUrl, "loaded");
       };
       img.onerror = () => {
@@ -28016,7 +28031,7 @@ function PlatformerCanvas({
       updateAssetStatus(fullUrl, "pending");
     }
     return null;
-  }, [assetBaseUrl]);
+  }, [assetBaseUrl, loadedImages]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     const canvas = canvasRef.current;
@@ -28198,7 +28213,7 @@ function PlatformerCanvas({
       ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
       ctx.fill();
     }
-  });
+  }, [player, platforms, worldWidth, worldHeight, canvasWidth, canvasHeight, followCamera, bgColor, playerSprite, tileSprites, backgroundImage, assetBaseUrl, loadedImages]);
   return /* @__PURE__ */ jsx(
     "canvas",
     {
@@ -29394,10 +29409,13 @@ function TableView({
   }
   const lk = LOOKS[look];
   const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
+  const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
+  const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
   const gridTemplateColumns = [
     selectable ? "auto" : null,
     ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
-    hasActions ? "auto" : null
+    actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxs(
     Box,
@@ -29484,7 +29502,7 @@ function TableView({
             }
             return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
-          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "justify-end flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
             (maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions).map((action, i) => /* @__PURE__ */ jsxs(
               Button,
               {

package/dist/runtime/index.cjs

@@ -10132,7 +10132,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect70, useRef: useRef65, useCallback: useCallback114, useState: useState102 } = React85__namespace.default;
+      const { useEffect: useEffect70, useRef: useRef65, useCallback: useCallback114, useState: useState103 } = React85__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -10177,7 +10177,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState102(null);
+        const [clickedPosition, setClickedPosition] = useState103(null);
         const handleMapClick = useCallback114((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -26558,8 +26558,16 @@ function GameCanvas2D({
   drawEventRef.current = drawEvent;
   const emitRef = React85__namespace.useRef(emit);
   emitRef.current = emit;
+  const assetBaseUrlRef = React85__namespace.useRef(assetBaseUrl);
+  assetBaseUrlRef.current = assetBaseUrl;
+  const backgroundImageRef = React85__namespace.useRef(backgroundImage);
+  backgroundImageRef.current = backgroundImage;
+  const widthRef = React85__namespace.useRef(width);
+  widthRef.current = width;
+  const heightRef = React85__namespace.useRef(height);
+  heightRef.current = height;
   const loadImage = React85__namespace.useCallback((url) => {
-    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
+    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrlRef.current}${url}`;
     const cached = imageCache.current.get(fullUrl);
     if (cached?.complete && cached.naturalWidth > 0) return cached;
     if (!cached) {
@@ -26569,7 +26577,7 @@ function GameCanvas2D({
       imageCache.current.set(fullUrl, img);
     }
     return null;
-  }, [assetBaseUrl]);
+  }, []);
   React85__namespace.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -26591,10 +26599,10 @@ function GameCanvas2D({
         if (tickEventRef.current) {
           emitRef.current(tickEventRef.current, { dt, frame });
         }
-        if (backgroundImage) {
-          const bgImg = loadImage(backgroundImage);
+        if (backgroundImageRef.current) {
+          const bgImg = loadImage(backgroundImageRef.current);
           if (bgImg) {
-            ctx.drawImage(bgImg, 0, 0, width, height);
+            ctx.drawImage(bgImg, 0, 0, widthRef.current, heightRef.current);
           }
         }
         onDrawRef.current?.(ctx, frame);
@@ -26610,7 +26618,7 @@ function GameCanvas2D({
       running = false;
       cancelAnimationFrame(rafRef.current);
     };
-  }, [fps]);
+  }, [fps, loadImage]);
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("inline-block", className), children: /* @__PURE__ */ jsxRuntime.jsx(
     "canvas",
     {
@@ -27752,15 +27760,22 @@ function PlatformerCanvas({
   const eventBus = useEventBus();
   const keysRef = React85.useRef(/* @__PURE__ */ new Set());
   const imageCache = React85.useRef(/* @__PURE__ */ new Map());
+  const [loadedImages, setLoadedImages] = React85.useState(/* @__PURE__ */ new Set());
   const loadImage = React85.useCallback((url) => {
     const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
     const cached = imageCache.current.get(fullUrl);
-    if (cached?.complete && cached.naturalWidth > 0) return cached;
+    if (cached?.complete && cached.naturalWidth > 0) {
+      if (!loadedImages.has(fullUrl)) {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
+      }
+      return cached;
+    }
     if (!cached) {
       const img = new Image();
       img.crossOrigin = "anonymous";
       img.src = fullUrl;
       img.onload = () => {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
         updateAssetStatus(fullUrl, "loaded");
       };
       img.onerror = () => {
@@ -27770,7 +27785,7 @@ function PlatformerCanvas({
       updateAssetStatus(fullUrl, "pending");
     }
     return null;
-  }, [assetBaseUrl]);
+  }, [assetBaseUrl, loadedImages]);
   React85.useEffect(() => {
     if (typeof window === "undefined") return;
     const canvas = canvasRef.current;
@@ -27952,7 +27967,7 @@ function PlatformerCanvas({
       ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
       ctx.fill();
     }
-  });
+  }, [player, platforms, worldWidth, worldHeight, canvasWidth, canvasHeight, followCamera, bgColor, playerSprite, tileSprites, backgroundImage, assetBaseUrl, loadedImages]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "canvas",
     {
@@ -29148,10 +29163,13 @@ function TableView({
   }
   const lk = LOOKS[look];
   const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
+  const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
+  const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
   const gridTemplateColumns = [
     selectable ? "auto" : null,
     ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
-    hasActions ? "auto" : null
+    actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
@@ -29238,7 +29256,7 @@ function TableView({
             }
             return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
-          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "justify-end flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
             (maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions).map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
               Button,
               {

package/dist/runtime/index.js

@@ -10083,7 +10083,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect70, useRef: useRef65, useCallback: useCallback114, useState: useState102 } = React85__default;
+      const { useEffect: useEffect70, useRef: useRef65, useCallback: useCallback114, useState: useState103 } = React85__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -10128,7 +10128,7 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState102(null);
+        const [clickedPosition, setClickedPosition] = useState103(null);
         const handleMapClick = useCallback114((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
@@ -26509,8 +26509,16 @@ function GameCanvas2D({
   drawEventRef.current = drawEvent;
   const emitRef = React85.useRef(emit);
   emitRef.current = emit;
+  const assetBaseUrlRef = React85.useRef(assetBaseUrl);
+  assetBaseUrlRef.current = assetBaseUrl;
+  const backgroundImageRef = React85.useRef(backgroundImage);
+  backgroundImageRef.current = backgroundImage;
+  const widthRef = React85.useRef(width);
+  widthRef.current = width;
+  const heightRef = React85.useRef(height);
+  heightRef.current = height;
   const loadImage = React85.useCallback((url) => {
-    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
+    const fullUrl = url.startsWith("http") ? url : `${assetBaseUrlRef.current}${url}`;
     const cached = imageCache.current.get(fullUrl);
     if (cached?.complete && cached.naturalWidth > 0) return cached;
     if (!cached) {
@@ -26520,7 +26528,7 @@ function GameCanvas2D({
       imageCache.current.set(fullUrl, img);
     }
     return null;
-  }, [assetBaseUrl]);
+  }, []);
   React85.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -26542,10 +26550,10 @@ function GameCanvas2D({
         if (tickEventRef.current) {
           emitRef.current(tickEventRef.current, { dt, frame });
         }
-        if (backgroundImage) {
-          const bgImg = loadImage(backgroundImage);
+        if (backgroundImageRef.current) {
+          const bgImg = loadImage(backgroundImageRef.current);
           if (bgImg) {
-            ctx.drawImage(bgImg, 0, 0, width, height);
+            ctx.drawImage(bgImg, 0, 0, widthRef.current, heightRef.current);
           }
         }
         onDrawRef.current?.(ctx, frame);
@@ -26561,7 +26569,7 @@ function GameCanvas2D({
       running = false;
       cancelAnimationFrame(rafRef.current);
     };
-  }, [fps]);
+  }, [fps, loadImage]);
   return /* @__PURE__ */ jsx(Box, { className: cn("inline-block", className), children: /* @__PURE__ */ jsx(
     "canvas",
     {
@@ -27703,15 +27711,22 @@ function PlatformerCanvas({
   const eventBus = useEventBus();
   const keysRef = useRef(/* @__PURE__ */ new Set());
   const imageCache = useRef(/* @__PURE__ */ new Map());
+  const [loadedImages, setLoadedImages] = useState(/* @__PURE__ */ new Set());
   const loadImage = useCallback((url) => {
     const fullUrl = url.startsWith("http") ? url : `${assetBaseUrl}${url}`;
     const cached = imageCache.current.get(fullUrl);
-    if (cached?.complete && cached.naturalWidth > 0) return cached;
+    if (cached?.complete && cached.naturalWidth > 0) {
+      if (!loadedImages.has(fullUrl)) {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
+      }
+      return cached;
+    }
     if (!cached) {
       const img = new Image();
       img.crossOrigin = "anonymous";
       img.src = fullUrl;
       img.onload = () => {
+        setLoadedImages((prev) => new Set(prev).add(fullUrl));
         updateAssetStatus(fullUrl, "loaded");
       };
       img.onerror = () => {
@@ -27721,7 +27736,7 @@ function PlatformerCanvas({
       updateAssetStatus(fullUrl, "pending");
     }
     return null;
-  }, [assetBaseUrl]);
+  }, [assetBaseUrl, loadedImages]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     const canvas = canvasRef.current;
@@ -27903,7 +27918,7 @@ function PlatformerCanvas({
       ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
       ctx.fill();
     }
-  });
+  }, [player, platforms, worldWidth, worldHeight, canvasWidth, canvasHeight, followCamera, bgColor, playerSprite, tileSprites, backgroundImage, assetBaseUrl, loadedImages]);
   return /* @__PURE__ */ jsx(
     "canvas",
     {
@@ -29099,10 +29114,13 @@ function TableView({
   }
   const lk = LOOKS[look];
   const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
+  const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
+  const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
   const gridTemplateColumns = [
     selectable ? "auto" : null,
     ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
-    hasActions ? "auto" : null
+    actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxs(
     Box,
@@ -29189,7 +29207,7 @@ function TableView({
             }
             return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
-          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "justify-end flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
             (maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions).map((action, i) => /* @__PURE__ */ jsxs(
               Button,
               {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.11.0",
+  "version": "5.12.1",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [