@industry-theme/repository-composition-panels 0.2.64 → 0.2.66

package/dist/{index-CUUJZ_zh.js → index-C_imh7Vn.js}

@@ -9409,135 +9409,152 @@ function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
 var withSelector = { exports: {} };
-var withSelector_production_min = {};
+var withSelector_production = {};
 var shim = { exports: {} };
-var useSyncExternalStoreShim_production_min = {};
+var useSyncExternalStoreShim_production = {};
 /**
  * @license React
- * use-sync-external-store-shim.production.min.js
+ * use-sync-external-store-shim.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var hasRequiredUseSyncExternalStoreShim_production_min;
-function requireUseSyncExternalStoreShim_production_min() {
-  if (hasRequiredUseSyncExternalStoreShim_production_min) return useSyncExternalStoreShim_production_min;
-  hasRequiredUseSyncExternalStoreShim_production_min = 1;
-  var e2 = React2__default;
-  function h2(a2, b2) {
-    return a2 === b2 && (0 !== a2 || 1 / a2 === 1 / b2) || a2 !== a2 && b2 !== b2;
-  }
-  var k2 = "function" === typeof Object.is ? Object.is : h2, l2 = e2.useState, m2 = e2.useEffect, n2 = e2.useLayoutEffect, p2 = e2.useDebugValue;
-  function q2(a2, b2) {
-    var d2 = b2(), f2 = l2({ inst: { value: d2, getSnapshot: b2 } }), c2 = f2[0].inst, g2 = f2[1];
-    n2(function() {
-      c2.value = d2;
-      c2.getSnapshot = b2;
-      r2(c2) && g2({ inst: c2 });
-    }, [a2, d2, b2]);
-    m2(function() {
-      r2(c2) && g2({ inst: c2 });
-      return a2(function() {
-        r2(c2) && g2({ inst: c2 });
-      });
-    }, [a2]);
-    p2(d2);
-    return d2;
+var hasRequiredUseSyncExternalStoreShim_production;
+function requireUseSyncExternalStoreShim_production() {
+  if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
+  hasRequiredUseSyncExternalStoreShim_production = 1;
+  var React = React2__default;
+  function is(x2, y2) {
+    return x2 === y2 && (0 !== x2 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
+  }
+  var objectIs = "function" === typeof Object.is ? Object.is : is, useState2 = React.useState, useEffect2 = React.useEffect, useLayoutEffect2 = React.useLayoutEffect, useDebugValue2 = React.useDebugValue;
+  function useSyncExternalStore$2(subscribe, getSnapshot) {
+    var value = getSnapshot(), _useState = useState2({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+    useLayoutEffect2(
+      function() {
+        inst.value = value;
+        inst.getSnapshot = getSnapshot;
+        checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+      },
+      [subscribe, value, getSnapshot]
+    );
+    useEffect2(
+      function() {
+        checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+        return subscribe(function() {
+          checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+        });
+      },
+      [subscribe]
+    );
+    useDebugValue2(value);
+    return value;
   }
-  function r2(a2) {
-    var b2 = a2.getSnapshot;
-    a2 = a2.value;
+  function checkIfSnapshotChanged(inst) {
+    var latestGetSnapshot = inst.getSnapshot;
+    inst = inst.value;
     try {
-      var d2 = b2();
-      return !k2(a2, d2);
-    } catch (f2) {
+      var nextValue = latestGetSnapshot();
+      return !objectIs(inst, nextValue);
+    } catch (error) {
       return true;
     }
   }
-  function t2(a2, b2) {
-    return b2();
+  function useSyncExternalStore$1(subscribe, getSnapshot) {
+    return getSnapshot();
   }
-  var u2 = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? t2 : q2;
-  useSyncExternalStoreShim_production_min.useSyncExternalStore = void 0 !== e2.useSyncExternalStore ? e2.useSyncExternalStore : u2;
-  return useSyncExternalStoreShim_production_min;
+  var shim2 = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+  useSyncExternalStoreShim_production.useSyncExternalStore = void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim2;
+  return useSyncExternalStoreShim_production;
 }
 var hasRequiredShim;
 function requireShim() {
   if (hasRequiredShim) return shim.exports;
   hasRequiredShim = 1;
   {
-    shim.exports = requireUseSyncExternalStoreShim_production_min();
+    shim.exports = requireUseSyncExternalStoreShim_production();
   }
   return shim.exports;
 }
 /**
  * @license React
- * use-sync-external-store-shim/with-selector.production.min.js
+ * use-sync-external-store-shim/with-selector.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var hasRequiredWithSelector_production_min;
-function requireWithSelector_production_min() {
-  if (hasRequiredWithSelector_production_min) return withSelector_production_min;
-  hasRequiredWithSelector_production_min = 1;
-  var h2 = React2__default, n2 = requireShim();
-  function p2(a2, b2) {
-    return a2 === b2 && (0 !== a2 || 1 / a2 === 1 / b2) || a2 !== a2 && b2 !== b2;
-  }
-  var q2 = "function" === typeof Object.is ? Object.is : p2, r2 = n2.useSyncExternalStore, t2 = h2.useRef, u2 = h2.useEffect, v2 = h2.useMemo, w2 = h2.useDebugValue;
-  withSelector_production_min.useSyncExternalStoreWithSelector = function(a2, b2, e2, l2, g2) {
-    var c2 = t2(null);
-    if (null === c2.current) {
-      var f2 = { hasValue: false, value: null };
-      c2.current = f2;
-    } else f2 = c2.current;
-    c2 = v2(function() {
-      function a3(a4) {
-        if (!c3) {
-          c3 = true;
-          d3 = a4;
-          a4 = l2(a4);
-          if (void 0 !== g2 && f2.hasValue) {
-            var b3 = f2.value;
-            if (g2(b3, a4)) return k2 = b3;
+var hasRequiredWithSelector_production;
+function requireWithSelector_production() {
+  if (hasRequiredWithSelector_production) return withSelector_production;
+  hasRequiredWithSelector_production = 1;
+  var React = React2__default, shim2 = requireShim();
+  function is(x2, y2) {
+    return x2 === y2 && (0 !== x2 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
+  }
+  var objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore = shim2.useSyncExternalStore, useRef2 = React.useRef, useEffect2 = React.useEffect, useMemo2 = React.useMemo, useDebugValue2 = React.useDebugValue;
+  withSelector_production.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector2, isEqual) {
+    var instRef = useRef2(null);
+    if (null === instRef.current) {
+      var inst = { hasValue: false, value: null };
+      instRef.current = inst;
+    } else inst = instRef.current;
+    instRef = useMemo2(
+      function() {
+        function memoizedSelector(nextSnapshot) {
+          if (!hasMemo) {
+            hasMemo = true;
+            memoizedSnapshot = nextSnapshot;
+            nextSnapshot = selector2(nextSnapshot);
+            if (void 0 !== isEqual && inst.hasValue) {
+              var currentSelection = inst.value;
+              if (isEqual(currentSelection, nextSnapshot))
+                return memoizedSelection = currentSelection;
+            }
+            return memoizedSelection = nextSnapshot;
+          }
+          currentSelection = memoizedSelection;
+          if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection;
+          var nextSelection = selector2(nextSnapshot);
+          if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
+            return memoizedSnapshot = nextSnapshot, currentSelection;
+          memoizedSnapshot = nextSnapshot;
+          return memoizedSelection = nextSelection;
+        }
+        var hasMemo = false, memoizedSnapshot, memoizedSelection, maybeGetServerSnapshot = void 0 === getServerSnapshot ? null : getServerSnapshot;
+        return [
+          function() {
+            return memoizedSelector(getSnapshot());
+          },
+          null === maybeGetServerSnapshot ? void 0 : function() {
+            return memoizedSelector(maybeGetServerSnapshot());
           }
-          return k2 = a4;
-        }
-        b3 = k2;
-        if (q2(d3, a4)) return b3;
-        var e3 = l2(a4);
-        if (void 0 !== g2 && g2(b3, e3)) return b3;
-        d3 = a4;
-        return k2 = e3;
-      }
-      var c3 = false, d3, k2, m2 = void 0 === e2 ? null : e2;
-      return [function() {
-        return a3(b2());
-      }, null === m2 ? void 0 : function() {
-        return a3(m2());
-      }];
-    }, [b2, e2, l2, g2]);
-    var d2 = r2(a2, c2[0], c2[1]);
-    u2(function() {
-      f2.hasValue = true;
-      f2.value = d2;
-    }, [d2]);
-    w2(d2);
-    return d2;
-  };
-  return withSelector_production_min;
+        ];
+      },
+      [getSnapshot, getServerSnapshot, selector2, isEqual]
+    );
+    var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
+    useEffect2(
+      function() {
+        inst.hasValue = true;
+        inst.value = value;
+      },
+      [value]
+    );
+    useDebugValue2(value);
+    return value;
+  };
+  return withSelector_production;
 }
 var hasRequiredWithSelector;
 function requireWithSelector() {
   if (hasRequiredWithSelector) return withSelector.exports;
   hasRequiredWithSelector = 1;
   {
-    withSelector.exports = requireWithSelector_production_min();
+    withSelector.exports = requireWithSelector_production();
   }
   return withSelector.exports;
 }
@@ -9603,8 +9620,7 @@ function shallow$1(objA, objB) {
     return false;
   }
   if (objA instanceof Map && objB instanceof Map) {
-    if (objA.size !== objB.size)
-      return false;
+    if (objA.size !== objB.size) return false;
     for (const [key, value] of objA) {
       if (!Object.is(value, objB.get(key))) {
         return false;
@@ -9613,8 +9629,7 @@ function shallow$1(objA, objB) {
     return true;
   }
   if (objA instanceof Set && objB instanceof Set) {
-    if (objA.size !== objB.size)
-      return false;
+    if (objA.size !== objB.size) return false;
     for (const value of objA) {
       if (!objB.has(value)) {
         return false;
@@ -9626,8 +9641,8 @@ function shallow$1(objA, objB) {
   if (keysA.length !== Object.keys(objB).length) {
     return false;
   }
-  for (let i2 = 0; i2 < keysA.length; i2++) {
-    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i2]) || !Object.is(objA[keysA[i2]], objB[keysA[i2]])) {
+  for (const keyA of keysA) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keyA) || !Object.is(objA[keyA], objB[keyA])) {
       return false;
     }
   }
@@ -104251,7 +104266,7 @@ const browserExt = {
   },
   test: () => true,
   load: async () => {
-    await import("./browserAll-DwisySPK.js");
+    await import("./browserAll-Bp7xIfsf.js");
   }
 };
 const webworkerExt = {
@@ -104262,7 +104277,7 @@ const webworkerExt = {
   },
   test: () => typeof self !== "undefined" && self.WorkerGlobalScope !== void 0,
   load: async () => {
-    await import("./webworkerAll-DHfMW-FC.js");
+    await import("./webworkerAll-N1ovo-FZ.js");
   }
 };
 class ObservablePoint {
@@ -116505,19 +116520,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-0iXYgxTx.js");
+      const { WebGPURenderer } = await import("./WebGPURenderer-CwrC7W35.js");
       RendererClass = WebGPURenderer;
       finalOptions = { ...options, ...options.webgpu };
       break;
     } else if (rendererType === "webgl" && isWebGLSupported(
       options.failIfMajorPerformanceCaveat ?? AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat
     )) {
-      const { WebGLRenderer } = await import("./WebGLRenderer-BsVSX8De.js");
+      const { WebGLRenderer } = await import("./WebGLRenderer-Z06PCBhQ.js");
       RendererClass = WebGLRenderer;
       finalOptions = { ...options, ...options.webgl };
       break;
     } else if (rendererType === "canvas") {
-      const { CanvasRenderer } = await import("./CanvasRenderer-CFxYLt8V.js");
+      const { CanvasRenderer } = await import("./CanvasRenderer-CxXcVqJ_.js");
       RendererClass = CanvasRenderer;
       finalOptions = { ...options, ...options.canvasOptions };
       break;
@@ -131113,7 +131128,7 @@ class IsometricRenderer {
     const paths = new Container();
     const nodes = new Container();
     if (showGrid) {
-      const grid = this.renderGrid(mapData.width, mapData.height, 25);
+      const grid = this.renderGrid(mapData.width, mapData.height, mapData.regions);
       background.addChild(grid);
     }
     const terrainContainer = this.renderTerrain(mapData.tiles);
@@ -131147,17 +131162,39 @@ class IsometricRenderer {
   }
   /**
    * Render isometric grid with region boundaries
-   * Extracted from IsometricGridTest.tsx lines 56-128
+   * Only draws grid cells for existing regions (not the entire world)
    */
-  renderGrid(gridWidth, gridHeight, regionSize) {
+  renderGrid(gridWidth, gridHeight, regions) {
     const grid = new Graphics();
+    const isInsideRegion = (x2, y2) => {
+      for (const region of regions) {
+        const { x: rx, y: ry, width: rw, height: rh } = region.bounds;
+        if (x2 >= rx && x2 < rx + rw && y2 >= ry && y2 < ry + rh) {
+          return true;
+        }
+      }
+      return false;
+    };
+    const isOnRegionBoundary = (x2, y2) => {
+      for (const region of regions) {
+        const { x: rx, y: ry, width: rw, height: rh } = region.bounds;
+        if ((x2 === rx || x2 === rx + rw - 1) && y2 >= ry && y2 < ry + rh) {
+          return true;
+        }
+        if ((y2 === ry || y2 === ry + rh - 1) && x2 >= rx && x2 < rx + rw) {
+          return true;
+        }
+      }
+      return false;
+    };
     for (let y2 = 0; y2 < gridHeight; y2++) {
       for (let x2 = 0; x2 < gridWidth; x2++) {
+        if (!isInsideRegion(x2, y2)) {
+          continue;
+        }
         const screenX = (x2 - y2) * (this.tileWidth / 2);
         const screenY = (x2 + y2) * (this.tileHeight / 2);
-        const isRegionBoundaryX = x2 % regionSize === 0;
-        const isRegionBoundaryY = y2 % regionSize === 0;
-        const isRegionBoundary = isRegionBoundaryX || isRegionBoundaryY;
+        const isRegionBoundary = isOnRegionBoundary(x2, y2);
         grid.strokeStyle = {
           width: isRegionBoundary ? 2 : 1,
           color: isRegionBoundary ? this.regionColor : this.gridColor
@@ -131828,7 +131865,13 @@ const OverworldMapPanelContent = ({
   regionLayout,
   width,
   height,
-  isLoading = false
+  isLoading = false,
+  onProjectMoved,
+  isEditingRegions = false,
+  customRegions = [],
+  onAddRegion,
+  onRenameRegion,
+  onDeleteRegion
 }) => {
   const canvasRef = useRef(null);
   const appRef = useRef(null);
@@ -131840,17 +131883,25 @@ const OverworldMapPanelContent = ({
   const [isRendering, setIsRendering] = useState(true);
   const [isResizing, setIsResizing] = useState(false);
   const dimensionsRef = useRef({ width: width || 800, height: height || 600 });
+  const placeholdersRef = useRef(null);
+  const sceneContainersRef = useRef(null);
+  const offsetRef = useRef({ offsetX: 0, offsetY: 0 });
+  const renderPlaceholdersRef = useRef(null);
+  const mapDataRef = useRef(null);
+  const isEditingRegionsRef = useRef(isEditingRegions);
   const [currentRegionIndex, setCurrentRegionIndex] = useState(0);
   const [isAnimating, setIsAnimating] = useState(false);
   const animationRef = useRef(null);
   const hasInitializedCamera = useRef(false);
   const skipNextAnimation = useRef(false);
   const mapData = useMemo(() => {
-    return packagesToUnifiedOverworldMap(packages, {
+    const map2 = packagesToUnifiedOverworldMap(packages, {
       includeDevDependencies,
       includePeerDependencies,
       regionLayout
     });
+    mapDataRef.current = map2;
+    return map2;
   }, [packages, includeDevDependencies, includePeerDependencies, regionLayout]);
   const currentRegion = mapData.regions[currentRegionIndex] || mapData.regions[0];
   useEffect(() => {
@@ -131923,6 +131974,11 @@ const OverworldMapPanelContent = ({
       viewport.addChild(scene.paths);
       viewport.addChild(scene.nodes);
       scene.nodes.sortableChildren = true;
+      sceneContainersRef.current = scene;
+      offsetRef.current = { offsetX: 0, offsetY: 0 };
+      const placeholdersContainer = new Container();
+      viewport.addChild(placeholdersContainer);
+      placeholdersRef.current = placeholdersContainer;
       const pathConnections = Array.from(scene.pathGraphics.entries()).map(([id2, graphics]) => {
         const pathData = mapData.paths.find((p2) => `${p2.from}-${p2.to}` === id2);
         return {
@@ -131963,6 +132019,7 @@ const OverworldMapPanelContent = ({
               node2.gridX = gridX;
               node2.gridY = gridY;
             }
+            onProjectMoved == null ? void 0 : onProjectMoved(nodeId, gridX, gridY);
           }
         }
       );
@@ -131978,6 +132035,156 @@ const OverworldMapPanelContent = ({
           gridToScreen(firstRegion.centerX, firstRegion.centerY).screenY
         );
       }
+      const findAdjacentEmptyPositions = (regions) => {
+        var _a2;
+        const regionSize = ((_a2 = regions[0]) == null ? void 0 : _a2.bounds.width) || 25;
+        const occupied = /* @__PURE__ */ new Set();
+        regions.forEach((r2) => {
+          const row2 = r2.bounds.y / regionSize;
+          const col = r2.bounds.x / regionSize;
+          occupied.add(`${row2}-${col}`);
+        });
+        const adjacent = [];
+        const checked = /* @__PURE__ */ new Set();
+        regions.forEach((r2) => {
+          const row2 = r2.bounds.y / regionSize;
+          const col = r2.bounds.x / regionSize;
+          const directions = [
+            { row: row2 - 1, col },
+            // up
+            { row: row2 + 1, col },
+            // down
+            { row: row2, col: col - 1 },
+            // left
+            { row: row2, col: col + 1 }
+            // right
+          ];
+          directions.forEach((pos) => {
+            const key = `${pos.row}-${pos.col}`;
+            if (!occupied.has(key) && !checked.has(key) && pos.row >= 0 && pos.col >= 0) {
+              adjacent.push(pos);
+              checked.add(key);
+            }
+          });
+        });
+        return adjacent;
+      };
+      const renderPlaceholders = () => {
+        var _a2;
+        if (!placeholdersRef.current || !mapDataRef.current) return;
+        placeholdersRef.current.removeChildren();
+        if (!isEditingRegionsRef.current || !onAddRegion) return;
+        const adjacentPositions = findAdjacentEmptyPositions(mapDataRef.current.regions);
+        const regionSize = ((_a2 = mapDataRef.current.regions[0]) == null ? void 0 : _a2.bounds.width) || 25;
+        const placeholderColor = 2278750;
+        adjacentPositions.forEach((pos) => {
+          const placeholder = new Graphics();
+          const topLeft = gridToScreen(pos.col * regionSize, pos.row * regionSize);
+          const topRight = gridToScreen(pos.col * regionSize + regionSize, pos.row * regionSize);
+          const bottomLeft = gridToScreen(pos.col * regionSize, pos.row * regionSize + regionSize);
+          const bottomRight = gridToScreen(pos.col * regionSize + regionSize, pos.row * regionSize + regionSize);
+          placeholder.setStrokeStyle({
+            width: 2,
+            color: placeholderColor,
+            alpha: 0.6
+          });
+          placeholder.setFillStyle({
+            color: placeholderColor,
+            alpha: 0.1
+            // Very transparent so it's barely visible but still clickable
+          });
+          placeholder.moveTo(topLeft.screenX, topLeft.screenY);
+          placeholder.lineTo(topRight.screenX, topRight.screenY);
+          placeholder.lineTo(bottomRight.screenX, bottomRight.screenY);
+          placeholder.lineTo(bottomLeft.screenX, bottomLeft.screenY);
+          placeholder.lineTo(topLeft.screenX, topLeft.screenY);
+          placeholder.fill();
+          placeholder.stroke();
+          const centerX = pos.col * regionSize + regionSize / 2;
+          const centerY = pos.row * regionSize + regionSize / 2;
+          const centerScreen = gridToScreen(centerX, centerY);
+          const iconSize = 40;
+          placeholder.setStrokeStyle({
+            width: 4,
+            color: placeholderColor,
+            alpha: 0.8
+          });
+          placeholder.moveTo(centerScreen.screenX - iconSize / 2, centerScreen.screenY);
+          placeholder.lineTo(centerScreen.screenX + iconSize / 2, centerScreen.screenY);
+          placeholder.moveTo(centerScreen.screenX, centerScreen.screenY - iconSize / 2);
+          placeholder.lineTo(centerScreen.screenX, centerScreen.screenY + iconSize / 2);
+          placeholder.stroke();
+          placeholder.eventMode = "static";
+          placeholder.cursor = "pointer";
+          placeholder.on("pointerenter", () => {
+            placeholder.clear();
+            placeholder.setStrokeStyle({
+              width: 2,
+              color: placeholderColor,
+              alpha: 1
+            });
+            placeholder.setFillStyle({
+              color: placeholderColor,
+              alpha: 0.2
+              // More visible on hover
+            });
+            placeholder.moveTo(topLeft.screenX, topLeft.screenY);
+            placeholder.lineTo(topRight.screenX, topRight.screenY);
+            placeholder.lineTo(bottomRight.screenX, bottomRight.screenY);
+            placeholder.lineTo(bottomLeft.screenX, bottomLeft.screenY);
+            placeholder.lineTo(topLeft.screenX, topLeft.screenY);
+            placeholder.fill();
+            placeholder.stroke();
+            const iconSize2 = 40;
+            placeholder.setStrokeStyle({
+              width: 4,
+              color: placeholderColor,
+              alpha: 1
+            });
+            placeholder.moveTo(centerScreen.screenX - iconSize2 / 2, centerScreen.screenY);
+            placeholder.lineTo(centerScreen.screenX + iconSize2 / 2, centerScreen.screenY);
+            placeholder.moveTo(centerScreen.screenX, centerScreen.screenY - iconSize2 / 2);
+            placeholder.lineTo(centerScreen.screenX, centerScreen.screenY + iconSize2 / 2);
+            placeholder.stroke();
+          });
+          placeholder.on("pointerleave", () => {
+            placeholder.clear();
+            placeholder.setStrokeStyle({
+              width: 2,
+              color: placeholderColor,
+              alpha: 0.6
+            });
+            placeholder.setFillStyle({
+              color: placeholderColor,
+              alpha: 0.1
+            });
+            placeholder.moveTo(topLeft.screenX, topLeft.screenY);
+            placeholder.lineTo(topRight.screenX, topRight.screenY);
+            placeholder.lineTo(bottomRight.screenX, bottomRight.screenY);
+            placeholder.lineTo(bottomLeft.screenX, bottomLeft.screenY);
+            placeholder.lineTo(topLeft.screenX, topLeft.screenY);
+            placeholder.fill();
+            placeholder.stroke();
+            const iconSize2 = 40;
+            placeholder.setStrokeStyle({
+              width: 4,
+              color: placeholderColor,
+              alpha: 0.8
+            });
+            placeholder.moveTo(centerScreen.screenX - iconSize2 / 2, centerScreen.screenY);
+            placeholder.lineTo(centerScreen.screenX + iconSize2 / 2, centerScreen.screenY);
+            placeholder.moveTo(centerScreen.screenX, centerScreen.screenY - iconSize2 / 2);
+            placeholder.lineTo(centerScreen.screenX, centerScreen.screenY + iconSize2 / 2);
+            placeholder.stroke();
+          });
+          placeholder.on("pointerdown", () => {
+            onAddRegion(pos);
+          });
+          placeholdersRef.current.addChild(placeholder);
+        });
+      };
+      renderPlaceholdersRef.current = renderPlaceholders;
+      renderPlaceholders();
       const easeOutCubic2 = (t2) => {
         return 1 - Math.pow(1 - t2, 3);
       };
@@ -132071,6 +132278,12 @@ const OverworldMapPanelContent = ({
       targetY
     };
   }, [currentRegionIndex, currentRegion, isRendering]);
+  useEffect(() => {
+    isEditingRegionsRef.current = isEditingRegions;
+    if (renderPlaceholdersRef.current) {
+      renderPlaceholdersRef.current();
+    }
+  }, [isEditingRegions]);
   return /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", height: "100%", overflow: "hidden" }, children: [
     (isLoading || isRendering) && /* @__PURE__ */ jsx(
       "div",
@@ -132156,7 +132369,8 @@ const OverworldMapPanelContent = ({
           fontSize: 14,
           borderRadius: 6,
           border: "2px solid #fbbf24",
-          boxShadow: "0 4px 8px rgba(0, 0, 0, 0.3)"
+          boxShadow: "0 4px 8px rgba(0, 0, 0, 0.3)",
+          pointerEvents: "auto"
         },
         children: [
           /* @__PURE__ */ jsx(
@@ -132178,7 +132392,65 @@ const OverworldMapPanelContent = ({
             }
           ),
           /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "2px" }, children: [
-            /* @__PURE__ */ jsx("div", { style: { fontSize: 16, fontWeight: "bold", color: "#fbbf24" }, children: currentRegion.name }),
+            /* @__PURE__ */ jsxs("div", { style: { fontSize: 16, fontWeight: "bold", color: "#fbbf24", display: "flex", alignItems: "center", gap: "8px" }, children: [
+              currentRegion.name,
+              isEditingRegions && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => {
+                      const newName = prompt("Rename region:", currentRegion.name);
+                      if (newName && newName.trim() && newName !== currentRegion.name) {
+                        const matchingRegion = customRegions.find((r2) => r2.name === currentRegion.name);
+                        if (matchingRegion && onRenameRegion) {
+                          onRenameRegion(matchingRegion.id, newName.trim());
+                        }
+                      }
+                    },
+                    style: {
+                      background: "rgba(59, 130, 246, 0.2)",
+                      border: "1px solid #3b82f6",
+                      borderRadius: 3,
+                      padding: "2px 6px",
+                      cursor: "pointer",
+                      fontSize: 10,
+                      color: "#3b82f6",
+                      fontWeight: "normal"
+                    },
+                    title: "Rename region",
+                    children: "✏️"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => {
+                      if (confirm(`Delete region "${currentRegion.name}"? Repositories will be unassigned.`)) {
+                        const matchingRegion = customRegions.find((r2) => r2.name === currentRegion.name);
+                        if (matchingRegion && onDeleteRegion) {
+                          onDeleteRegion(matchingRegion.id);
+                          if (currentRegionIndex > 0) {
+                            setCurrentRegionIndex((prev) => prev - 1);
+                          }
+                        }
+                      }
+                    },
+                    style: {
+                      background: "rgba(239, 68, 68, 0.2)",
+                      border: "1px solid #ef4444",
+                      borderRadius: 3,
+                      padding: "2px 6px",
+                      cursor: "pointer",
+                      fontSize: 10,
+                      color: "#ef4444",
+                      fontWeight: "normal"
+                    },
+                    title: "Delete region",
+                    children: "🗑️"
+                  }
+                )
+              ] })
+            ] }),
             /* @__PURE__ */ jsxs("div", { style: { fontSize: 10, color: "#94a3b8" }, children: [
               "Region ",
               currentRegionIndex + 1,
@@ -132225,7 +132497,7 @@ const OverworldMapPanelContent = ({
           borderRadius: 4,
           pointerEvents: "none"
         },
-        children: /* @__PURE__ */ jsx("div", { children: "Click on packages to view details" })
+        children: isEditingRegions ? /* @__PURE__ */ jsx("div", { children: "Click green placeholders to add new regions" }) : /* @__PURE__ */ jsx("div", { children: "Click on packages to view details" })
       }
     )
   ] });
@@ -132235,7 +132507,13 @@ const GitProjectsMapPanelContent = ({
   regionLayout,
   width,
   height,
-  isLoading = false
+  isLoading = false,
+  onProjectMoved,
+  isEditingRegions = false,
+  customRegions = [],
+  onAddRegion,
+  onRenameRegion,
+  onDeleteRegion
 }) => {
   const packages = useMemo(() => {
     return projects.map((project) => ({
@@ -132279,7 +132557,13 @@ const GitProjectsMapPanelContent = ({
       height,
       isLoading,
       includeDevDependencies: false,
-      includePeerDependencies: false
+      includePeerDependencies: false,
+      onProjectMoved,
+      isEditingRegions,
+      customRegions,
+      onAddRegion,
+      onRenameRegion,
+      onDeleteRegion
     }
   );
 };
@@ -132345,6 +132629,49 @@ function calculateAgingMetrics(lastEditedAt) {
     // Store for region grouping
   };
 }
+function generateRegionId() {
+  return `region-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+function createDefaultRegion(name2 = "Main") {
+  return {
+    id: generateRegionId(),
+    name: name2,
+    order: 0,
+    createdAt: Date.now()
+  };
+}
+function createDefaultAgeRegions() {
+  return [
+    {
+      id: generateRegionId(),
+      name: "Last Month",
+      description: "Repositories edited in the last 30 days",
+      order: 0,
+      createdAt: Date.now()
+    },
+    {
+      id: generateRegionId(),
+      name: "Last 3 Months",
+      description: "Repositories edited in the last 90 days",
+      order: 1,
+      createdAt: Date.now()
+    },
+    {
+      id: generateRegionId(),
+      name: "Last Year",
+      description: "Repositories edited in the last 365 days",
+      order: 2,
+      createdAt: Date.now()
+    },
+    {
+      id: generateRegionId(),
+      name: "Older",
+      description: "Repositories not edited in over a year",
+      order: 3,
+      createdAt: Date.now()
+    }
+  ];
+}
 const CollectionMapPanelContent = ({
   collection,
   memberships,
@@ -132355,9 +132682,44 @@ const CollectionMapPanelContent = ({
   height,
   isLoading = false,
   onProjectMoved,
-  onProjectAdded
+  onProjectAdded,
+  regionCallbacks
 }) => {
-  const handleProjectDrop = useCallback((data, event) => {
+  var _a, _b;
+  const layoutMode = ((_a = collection.metadata) == null ? void 0 : _a.layoutMode) || "auto";
+  const customRegions = ((_b = collection.metadata) == null ? void 0 : _b.customRegions) || [];
+  const [isEditingRegions, setIsEditingRegions] = React2__default.useState(false);
+  React2__default.useEffect(() => {
+    if (customRegions.length === 0 && (regionCallbacks == null ? void 0 : regionCallbacks.onInitializeDefaultRegions)) {
+      const defaultRegions = createDefaultAgeRegions();
+      regionCallbacks.onInitializeDefaultRegions(collection.id, defaultRegions);
+    }
+  }, [collection.id, customRegions.length, regionCallbacks]);
+  const switchToManualMode = useCallback(async () => {
+    if (layoutMode === "auto" && (regionCallbacks == null ? void 0 : regionCallbacks.onSwitchLayoutMode)) {
+      await regionCallbacks.onSwitchLayoutMode(collection.id, "manual");
+    }
+  }, [layoutMode, collection.id, regionCallbacks]);
+  const handleRenameRegion = useCallback(async (regionId, name2) => {
+    if (!(regionCallbacks == null ? void 0 : regionCallbacks.onRegionUpdated)) {
+      console.warn("No onRegionUpdated callback provided");
+      return;
+    }
+    await switchToManualMode();
+    await regionCallbacks.onRegionUpdated(collection.id, regionId, { name: name2 });
+    console.log("Renamed region:", regionId, name2);
+  }, [regionCallbacks, collection.id, switchToManualMode]);
+  const handleDeleteRegion = useCallback(async (regionId) => {
+    if (!(regionCallbacks == null ? void 0 : regionCallbacks.onRegionDeleted)) {
+      console.warn("No onRegionDeleted callback provided");
+      return;
+    }
+    await switchToManualMode();
+    await regionCallbacks.onRegionDeleted(collection.id, regionId);
+    console.log("Deleted region:", regionId);
+  }, [regionCallbacks, collection.id, switchToManualMode]);
+  const handleProjectDrop = useCallback(async (data, event) => {
+    var _a2;
     if (!onProjectAdded) {
       console.warn("No onProjectAdded callback provided - cannot add project to collection");
       return;
@@ -132368,10 +132730,32 @@ const CollectionMapPanelContent = ({
       path: repositoryPath,
       metadata: repositoryMetadata,
       collectionId: collection.id,
-      sourcePanel: data.sourcePanel
+      sourcePanel: data.sourcePanel,
+      layoutMode
     });
-    onProjectAdded(repositoryPath, repositoryMetadata);
-  }, [collection.id, onProjectAdded]);
+    if (layoutMode === "manual") {
+      let targetRegionId;
+      if (customRegions.length === 0 && (regionCallbacks == null ? void 0 : regionCallbacks.onRegionCreated)) {
+        console.log("No regions exist - creating default region");
+        const defaultRegion = await regionCallbacks.onRegionCreated(collection.id, {
+          name: "Main",
+          order: 0
+        });
+        targetRegionId = defaultRegion.id;
+      } else {
+        targetRegionId = (_a2 = customRegions[0]) == null ? void 0 : _a2.id;
+      }
+      if (targetRegionId && (regionCallbacks == null ? void 0 : regionCallbacks.onRepositoryAssigned)) {
+        onProjectAdded(repositoryPath, repositoryMetadata);
+        await regionCallbacks.onRepositoryAssigned(collection.id, repositoryPath, targetRegionId);
+      } else {
+        console.warn("No region available to assign repository to");
+        onProjectAdded(repositoryPath, repositoryMetadata);
+      }
+    } else {
+      onProjectAdded(repositoryPath, repositoryMetadata);
+    }
+  }, [collection.id, onProjectAdded, layoutMode, customRegions, regionCallbacks]);
   const { isDragOver, ...dropZoneProps } = useDropZone({
     handlers: [
       {
@@ -132386,10 +132770,10 @@ const CollectionMapPanelContent = ({
       (m2) => m2.collectionId === collection.id
     );
     return collectionMemberships.map((membership) => {
-      var _a, _b, _c, _d, _e2;
+      var _a2, _b2, _c, _d, _e2;
       const repo = repositories.find((r2) => {
-        var _a2;
-        const repoId = ((_a2 = r2.github) == null ? void 0 : _a2.id) || r2.name;
+        var _a3;
+        const repoId = ((_a3 = r2.github) == null ? void 0 : _a3.id) || r2.name;
         return repoId === membership.repositoryId;
       });
       if (!repo) {
@@ -132403,7 +132787,7 @@ const CollectionMapPanelContent = ({
       }
       let language2;
       if (repo.github) {
-        language2 = ((_a = repo.github) == null ? void 0 : _a.language) || ((_b = repo.github) == null ? void 0 : _b.primaryLanguage);
+        language2 = ((_a2 = repo.github) == null ? void 0 : _a2.language) || ((_b2 = repo.github) == null ? void 0 : _b2.primaryLanguage);
       }
       const importance = ((_c = membership.metadata) == null ? void 0 : _c.pinned) ? 95 : 75;
       const size = calculateRepositorySize(repo.metrics);
@@ -132460,16 +132844,65 @@ const CollectionMapPanelContent = ({
             children: [
               collection.icon && /* @__PURE__ */ jsx("span", { style: { marginRight: 8 }, children: collection.icon }),
               collection.name,
-              isDragOver && /* @__PURE__ */ jsx("span", { style: { marginLeft: 8 }, children: "+ Drop to add" })
+              isDragOver && /* @__PURE__ */ jsx("span", { style: { marginLeft: 8 }, children: "+ Drop to add" }),
+              layoutMode === "manual" && /* @__PURE__ */ jsxs("span", { style: { marginLeft: 8, fontSize: 12, opacity: 0.8 }, children: [
+                "(",
+                customRegions.length,
+                " region",
+                customRegions.length !== 1 ? "s" : "",
+                ")"
+              ] })
             ]
           }
         ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsEditingRegions(!isEditingRegions),
+            style: {
+              position: "absolute",
+              top: 8,
+              right: 8,
+              zIndex: 100,
+              backgroundColor: isEditingRegions ? "rgba(251, 191, 36, 0.9)" : "rgba(0, 0, 0, 0.7)",
+              border: isEditingRegions ? "2px solid #fbbf24" : "2px solid #4b5563",
+              padding: "8px 16px",
+              borderRadius: 8,
+              color: "white",
+              fontFamily: "monospace",
+              fontSize: 14,
+              fontWeight: "bold",
+              cursor: "pointer",
+              transition: "all 0.2s ease",
+              pointerEvents: "auto"
+            },
+            onMouseEnter: (e2) => {
+              e2.currentTarget.style.backgroundColor = isEditingRegions ? "rgba(251, 191, 36, 1)" : "rgba(75, 85, 99, 0.9)";
+            },
+            onMouseLeave: (e2) => {
+              e2.currentTarget.style.backgroundColor = isEditingRegions ? "rgba(251, 191, 36, 0.9)" : "rgba(0, 0, 0, 0.7)";
+            },
+            children: isEditingRegions ? "✓ Done Editing" : "⚙️ Edit Regions"
+          }
+        ),
         /* @__PURE__ */ jsx(
           GitProjectsMapPanelContent,
           {
             projects,
             regionLayout,
-            isLoading
+            isLoading,
+            isEditingRegions,
+            customRegions,
+            onAddRegion: async (position2) => {
+              await switchToManualMode();
+              const order2 = position2.row * 10 + position2.col;
+              const name2 = `Region ${customRegions.length + 1}`;
+              if (regionCallbacks == null ? void 0 : regionCallbacks.onRegionCreated) {
+                await regionCallbacks.onRegionCreated(collection.id, { name: name2, order: order2 });
+              }
+            },
+            onRenameRegion: handleRenameRegion,
+            onDeleteRegion: handleDeleteRegion
           }
         )
       ]
@@ -132494,6 +132927,56 @@ const CollectionMapPanel = ({ context: context2, actions }) => {
       console.warn("Actions does not support addRepositoryToCollection - drag-drop feature requires context integration");
     }
   }, [actions, selectedCollectionId]);
+  const regionCallbacks = useMemo(() => ({
+    onInitializeDefaultRegions: async (collectionId, regions) => {
+      console.log("Initializing default age regions:", { collectionId, regions });
+      if (actions == null ? void 0 : actions.initializeDefaultRegions) {
+        await actions.initializeDefaultRegions(collectionId, regions);
+      } else {
+        console.warn("Actions does not support initializeDefaultRegions - region management requires context integration");
+      }
+    },
+    onSwitchLayoutMode: async (collectionId, mode) => {
+      console.log("Switching layout mode:", { collectionId, mode });
+      if (actions == null ? void 0 : actions.switchLayoutMode) {
+        await actions.switchLayoutMode(collectionId, mode);
+      } else {
+        console.warn("Actions does not support switchLayoutMode - region management requires context integration");
+      }
+    },
+    onRegionCreated: async (collectionId, region) => {
+      console.log("Region created:", { collectionId, region });
+      const newRegion = {
+        ...region,
+        id: generateRegionId(),
+        createdAt: Date.now()
+      };
+      if (actions == null ? void 0 : actions.createRegion) {
+        await actions.createRegion(collectionId, newRegion);
+      } else {
+        console.warn("Actions does not support createRegion - region management requires context integration");
+      }
+      return newRegion;
+    },
+    onRegionUpdated: async (collectionId, regionId, updates) => {
+      console.log("Region updated:", { collectionId, regionId, updates });
+      if (actions == null ? void 0 : actions.updateRegion) {
+        await actions.updateRegion(collectionId, regionId, updates);
+      }
+    },
+    onRegionDeleted: async (collectionId, regionId) => {
+      console.log("Region deleted:", { collectionId, regionId });
+      if (actions == null ? void 0 : actions.deleteRegion) {
+        await actions.deleteRegion(collectionId, regionId);
+      }
+    },
+    onRepositoryAssigned: async (collectionId, repositoryId, regionId) => {
+      console.log("Repository assigned to region:", { collectionId, repositoryId, regionId });
+      if (actions == null ? void 0 : actions.assignRepositoryToRegion) {
+        await actions.assignRepositoryToRegion(collectionId, repositoryId, regionId);
+      }
+    }
+  }), [actions]);
   if (!selectedCollection) {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -132528,7 +133011,8 @@ const CollectionMapPanel = ({ context: context2, actions }) => {
       repositories,
       dependencies,
       isLoading,
-      onProjectAdded: handleProjectAdded
+      onProjectAdded: handleProjectAdded,
+      regionCallbacks
     }
   ) });
 };
@@ -133518,6 +134002,8 @@ export {
   GitProjectsMapPanelContent as aU,
   CollectionMapPanel as aV,
   CollectionMapPanelContent as aW,
+  createDefaultRegion as aX,
+  createDefaultAgeRegions as aY,
   Rectangle as aa,
   getLocalBounds as ab,
   color32BitToUniform as ac,
@@ -133570,4 +134056,4 @@ export {
   UPDATE_PRIORITY as y,
   removeItems as z
 };
-//# sourceMappingURL=index-CUUJZ_zh.js.map
+//# sourceMappingURL=index-C_imh7Vn.js.map