@industry-theme/repository-composition-panels 0.7.0 → 0.7.1

package/dist/{index-DxPhfLrj.js → index-OydwIwzQ.js}

@@ -105994,7 +105994,7 @@ const browserExt = {
   },
   test: () => true,
   load: async () => {
-    await import("./browserAll-C6wZ1sgi.js");
+    await import("./browserAll-CKPglyL3.js");
   }
 };
 const webworkerExt = {
@@ -106005,7 +106005,7 @@ const webworkerExt = {
   },
   test: () => typeof self !== "undefined" && self.WorkerGlobalScope !== void 0,
   load: async () => {
-    await import("./webworkerAll-Dpd908jq.js");
+    await import("./webworkerAll-Cg7mdcVI.js");
   }
 };
 class ObservablePoint {
@@ -118248,19 +118248,19 @@ async function autoDetectRenderer(options) {
   for (let i2 = 0; i2 < preferredOrder.length; i2++) {
     const rendererType = preferredOrder[i2];
     if (rendererType === "webgpu" && await isWebGPUSupported()) {
-      const { WebGPURenderer } = await import("./WebGPURenderer-RZ0i-r4B.js");
+      const { WebGPURenderer } = await import("./WebGPURenderer-BZJD_jqI.js");
       RendererClass = WebGPURenderer;
       finalOptions = { ...options, ...options.webgpu };
       break;
     } else if (rendererType === "webgl" && isWebGLSupported(
       options.failIfMajorPerformanceCaveat ?? AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat
     )) {
-      const { WebGLRenderer } = await import("./WebGLRenderer-BIohIvX4.js");
+      const { WebGLRenderer } = await import("./WebGLRenderer-BCeLuv-q.js");
       RendererClass = WebGLRenderer;
       finalOptions = { ...options, ...options.webgl };
       break;
     } else if (rendererType === "canvas") {
-      const { CanvasRenderer } = await import("./CanvasRenderer-N5jLNLxg.js");
+      const { CanvasRenderer } = await import("./CanvasRenderer-COO-STVN.js");
       RendererClass = CanvasRenderer;
       finalOptions = { ...options, ...options.canvasOptions };
       break;
@@ -135567,9 +135567,8 @@ const OverworldMapPanelContent = ({
   const pathManagerRef = useRef(null);
   const rendererRef = useRef(null);
   const [isRendering, setIsRendering] = useState(true);
-  const [isResizing, setIsResizing] = useState(false);
   const [initializationComplete, setInitializationComplete] = useState(0);
-  const dimensionsRef = useRef({ width: width || 800, height: height || 600 });
+  const visibleDimensionsRef = useRef({ width: width || 800, height: height || 600 });
   const placeholdersRef = useRef(null);
   const sceneContainersRef = useRef(null);
   const offsetRef = useRef({
@@ -135646,16 +135645,18 @@ const OverworldMapPanelContent = ({
           scale: viewportRef.current.scale.x
         };
       }
-      const containerWidth = ((_a = canvasRef.current) == null ? void 0 : _a.clientWidth) || width || 800;
-      const containerHeight = ((_b = canvasRef.current) == null ? void 0 : _b.clientHeight) || height || 600;
-      dimensionsRef.current = {
-        width: containerWidth,
-        height: containerHeight
+      const canvasWidth = window.innerWidth;
+      const canvasHeight = window.innerHeight;
+      const visibleWidth = ((_a = canvasRef.current) == null ? void 0 : _a.clientWidth) || width || 800;
+      const visibleHeight = ((_b = canvasRef.current) == null ? void 0 : _b.clientHeight) || height || 600;
+      visibleDimensionsRef.current = {
+        width: visibleWidth,
+        height: visibleHeight
       };
       app = new Application();
       await app.init({
-        width: containerWidth,
-        height: containerHeight,
+        width: canvasWidth,
+        height: canvasHeight,
         backgroundColor: 1710618,
         // Dark gray background (matches LayoutEngineTest)
         antialias: false,
@@ -135689,8 +135690,8 @@ const OverworldMapPanelContent = ({
       const worldWidth = mapData.width * ISO_TILE_WIDTH$1;
       const worldHeight = mapData.height * ISO_TILE_HEIGHT$1;
       const viewport = new it({
-        screenWidth: containerWidth,
-        screenHeight: containerHeight,
+        screenWidth: visibleWidth,
+        screenHeight: visibleHeight,
         worldWidth,
         worldHeight,
         events: app.renderer.events
@@ -135787,10 +135788,25 @@ const OverworldMapPanelContent = ({
         viewport.setZoom(savedCameraPosition.current.scale);
       } else if (mapData.regions.length > 0 && !hasInitializedCamera.current) {
         const firstRegion = mapData.regions[0];
-        viewport.moveCenter(
-          gridToScreen(firstRegion.centerX, firstRegion.centerY).screenX,
-          gridToScreen(firstRegion.centerX, firstRegion.centerY).screenY
-        );
+        const bounds = firstRegion.bounds;
+        const topCorner = gridToScreen(bounds.x, bounds.y);
+        const bottomCorner = gridToScreen(bounds.x + bounds.width, bounds.y + bounds.height);
+        const leftCorner = gridToScreen(bounds.x, bounds.y + bounds.height);
+        const rightCorner = gridToScreen(bounds.x + bounds.width, bounds.y);
+        const spriteHeightOffset = 140;
+        const screenMinX = leftCorner.screenX;
+        const screenMaxX = rightCorner.screenX;
+        const screenMinY = topCorner.screenY - spriteHeightOffset;
+        const screenMaxY = bottomCorner.screenY;
+        const screenCenterX = (screenMinX + screenMaxX) / 2;
+        const screenCenterY = (screenMinY + screenMaxY) / 2;
+        viewport.moveCenter(screenCenterX, screenCenterY);
+        const regionScreenWidth = screenMaxX - screenMinX;
+        const regionScreenHeight = screenMaxY - screenMinY;
+        const zoomX = visibleWidth * 0.65 / regionScreenWidth;
+        const zoomY = visibleHeight * 0.65 / regionScreenHeight;
+        const fitZoom = Math.min(zoomX, zoomY, 1);
+        viewport.setZoom(fitZoom);
         hasInitializedCamera.current = true;
       }
       const findAdjacentEmptyPositions = (regions) => {
@@ -136014,26 +136030,17 @@ const OverworldMapPanelContent = ({
       setInitializationComplete((prev) => prev + 1);
     };
     let resizeObserver = null;
-    let resizeTimeout = null;
     const initAndSetupResize = async () => {
       await initPixi();
-      if (canvasRef.current && appRef.current) {
+      if (canvasRef.current) {
         resizeObserver = new ResizeObserver((entries) => {
-          if (!appRef.current || !viewportRef.current) return;
-          setIsResizing(true);
-          if (resizeTimeout) {
-            clearTimeout(resizeTimeout);
-          }
           for (const entry of entries) {
             const { width: newWidth, height: newHeight } = entry.contentRect;
-            dimensionsRef.current = { width: newWidth, height: newHeight };
-            appRef.current.renderer.resize(newWidth, newHeight);
-            viewportRef.current.resize(newWidth, newHeight);
-            appRef.current.stage.hitArea = appRef.current.screen;
+            visibleDimensionsRef.current = { width: newWidth, height: newHeight };
+            if (viewportRef.current) {
+              viewportRef.current.resize(newWidth, newHeight);
+            }
           }
-          resizeTimeout = window.setTimeout(() => {
-            setIsResizing(false);
-          }, 100);
         });
         resizeObserver.observe(canvasRef.current);
       }
@@ -136042,9 +136049,6 @@ const OverworldMapPanelContent = ({
     return () => {
       cleanup = true;
       isInitializedRef.current = false;
-      if (resizeTimeout) {
-        clearTimeout(resizeTimeout);
-      }
       if (resizeObserver) {
         resizeObserver.disconnect();
       }
@@ -136065,7 +136069,7 @@ const OverworldMapPanelContent = ({
       animationRef.current = null;
       rendererRef.current = null;
     };
-  }, [stableCollectionKey, width, height]);
+  }, [stableCollectionKey]);
   useEffect(() => {
     var _a, _b;
     if (!isInitializedRef.current) {
@@ -136200,8 +136204,8 @@ const OverworldMapPanelContent = ({
       return;
     }
     setIsAnimating(true);
-    const targetX = dimensionsRef.current.width / 2 - regionCenter.screenX;
-    const targetY = dimensionsRef.current.height / 2 - regionCenter.screenY;
+    const targetX = visibleDimensionsRef.current.width / 2 - regionCenter.screenX;
+    const targetY = visibleDimensionsRef.current.height / 2 - regionCenter.screenY;
     animationRef.current = {
       startTime: performance.now(),
       startX: viewport.x,
@@ -136229,6 +136233,7 @@ const OverworldMapPanelContent = ({
         width: "100%",
         height: "100%",
         overflow: "hidden"
+        // Container clips the viewport-sized canvas to its actual bounds
       },
       children: [
         (isLoading || isRendering) && /* @__PURE__ */ jsx(
@@ -136256,15 +136261,13 @@ const OverworldMapPanelContent = ({
           {
             ref: canvasRef,
             style: {
-              width: "100%",
-              height: "100%",
+              width: "100dvw",
+              height: "100dvh",
               imageRendering: "pixelated",
               border: "2px solid #1f2937",
               boxSizing: "border-box",
-              backgroundColor: "#1a1a1a",
+              backgroundColor: "#1a1a1a"
               // Match Pixi background to prevent flash
-              opacity: isResizing ? 0.95 : 1,
-              transition: "opacity 0.1s ease-out"
             }
           }
         ),
@@ -136274,8 +136277,7 @@ const OverworldMapPanelContent = ({
             style: {
               position: "absolute",
               top: 8,
-              left: "50%",
-              transform: "translateX(-50%)",
+              left: 8,
               display: "flex",
               alignItems: "center",
               gap: "12px",
@@ -138315,4 +138317,4 @@ export {
   UPDATE_PRIORITY as y,
   removeItems as z
 };
-//# sourceMappingURL=index-DxPhfLrj.js.map
+//# sourceMappingURL=index-OydwIwzQ.js.map