@industry-theme/repository-composition-panels 0.7.4 → 0.7.6

package/dist/{index-BL0L_jZJ.js → index-mh2Usj7o.js}

@@ -1584,15 +1584,71 @@ const PackageLoadingGraph = () => {
   const fadeDuration = 0.4;
   const boxes = [
     // Bottom row - drops first, left to right (no bounce)
-    { id: "pkg-1", x: 20, finalY: 78, delay: 0, size: "md", bounce: [0, 0, 0], pm: "npm" },
-    { id: "pkg-2", x: 40, finalY: 78, delay: staggerDelay * 1, size: "md", bounce: [0, 0, 0], pm: "yarn" },
-    { id: "pkg-3", x: 60, finalY: 78, delay: staggerDelay * 2, size: "md", bounce: [0, 0, 0], pm: "pnpm" },
-    { id: "pkg-4", x: 80, finalY: 78, delay: staggerDelay * 3, size: "md", bounce: [0, 0, 0], pm: "cargo" },
+    {
+      id: "pkg-1",
+      x: 20,
+      finalY: 78,
+      delay: 0,
+      size: "md",
+      bounce: [0, 0, 0],
+      pm: "npm"
+    },
+    {
+      id: "pkg-2",
+      x: 40,
+      finalY: 78,
+      delay: staggerDelay * 1,
+      size: "md",
+      bounce: [0, 0, 0],
+      pm: "yarn"
+    },
+    {
+      id: "pkg-3",
+      x: 60,
+      finalY: 78,
+      delay: staggerDelay * 2,
+      size: "md",
+      bounce: [0, 0, 0],
+      pm: "pnpm"
+    },
+    {
+      id: "pkg-4",
+      x: 80,
+      finalY: 78,
+      delay: staggerDelay * 3,
+      size: "md",
+      bounce: [0, 0, 0],
+      pm: "cargo"
+    },
     // Middle row - stacks on top (bounces)
-    { id: "pkg-5", x: 35, finalY: 50, delay: staggerDelay * 4, size: "md", bounce: [9, 4, 0], pm: "pip" },
-    { id: "pkg-6", x: 65, finalY: 50, delay: staggerDelay * 5, size: "md", bounce: [11, 5, 0], pm: "poetry" },
+    {
+      id: "pkg-5",
+      x: 35,
+      finalY: 50,
+      delay: staggerDelay * 4,
+      size: "md",
+      bounce: [9, 4, 0],
+      pm: "pip"
+    },
+    {
+      id: "pkg-6",
+      x: 65,
+      finalY: 50,
+      delay: staggerDelay * 5,
+      size: "md",
+      bounce: [11, 5, 0],
+      pm: "poetry"
+    },
     // Top - crown of the pyramid (bounces + wobbles!)
-    { id: "pkg-7", x: 50, finalY: 22, delay: staggerDelay * 6, size: "lg", bounce: [15, 7, 6], pm: "bun" }
+    {
+      id: "pkg-7",
+      x: 50,
+      finalY: 22,
+      delay: staggerDelay * 6,
+      size: "lg",
+      bounce: [15, 7, 6],
+      pm: "bun"
+    }
   ];
   const bounceDuration = 0.6;
   const lastDropEnd = boxes[boxes.length - 1].delay + dropDuration + bounceDuration;
@@ -1607,12 +1663,14 @@ const PackageLoadingGraph = () => {
     {
       style: {
         height: "100%",
+        minHeight: "200px",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
         color: theme2.colors.textSecondary,
-        padding: theme2.space[5]
+        padding: theme2.space[5],
+        overflow: "hidden"
       },
       children: [
         /* @__PURE__ */ jsx("style", { children: `
@@ -1685,7 +1743,9 @@ const PackageLoadingGraph = () => {
               position: "relative",
               width: "100%",
               maxWidth: "400px",
+              minWidth: "340px",
               height: "220px",
+              flexShrink: 0,
               marginBottom: theme2.space[4]
             },
             children: [
@@ -1751,7 +1811,8 @@ const PackageLoadingGraph = () => {
               fontWeight: theme2.fontWeights.medium,
               color: theme2.colors.text,
               textAlign: "center",
-              marginBottom: theme2.space[2]
+              marginBottom: theme2.space[2],
+              flexShrink: 0
             },
             children: "Loading packages..."
           }
@@ -1763,7 +1824,8 @@ const PackageLoadingGraph = () => {
               fontSize: theme2.fontSizes[1],
               fontFamily: theme2.fonts.body,
               color: theme2.colors.textSecondary,
-              textAlign: "center"
+              textAlign: "center",
+              flexShrink: 0
             },
             children: "Discovering dependencies and configurations"
           }
@@ -106188,7 +106250,7 @@ const browserExt = {
   },
   test: () => true,
   load: async () => {
-    await import("./browserAll-Dvjnb3Ss.js");
+    await import("./browserAll-DsnGrrNf.js");
   }
 };
 const webworkerExt = {
@@ -106199,7 +106261,7 @@ const webworkerExt = {
   },
   test: () => typeof self !== "undefined" && self.WorkerGlobalScope !== void 0,
   load: async () => {
-    await import("./webworkerAll-q1iOXUTF.js");
+    await import("./webworkerAll-B1yAYeD0.js");
   }
 };
 class ObservablePoint {
@@ -118442,19 +118504,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-CKeryiWg.js");
+      const { WebGPURenderer } = await import("./WebGPURenderer-CgEpGyW-.js");
       RendererClass = WebGPURenderer;
       finalOptions = { ...options, ...options.webgpu };
       break;
     } else if (rendererType === "webgl" && isWebGLSupported(
       options.failIfMajorPerformanceCaveat ?? AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat
     )) {
-      const { WebGLRenderer } = await import("./WebGLRenderer-B9IXLBU3.js");
+      const { WebGLRenderer } = await import("./WebGLRenderer-KD33jTG8.js");
       RendererClass = WebGLRenderer;
       finalOptions = { ...options, ...options.webgl };
       break;
     } else if (rendererType === "canvas") {
-      const { CanvasRenderer } = await import("./CanvasRenderer-DHF2Dl6A.js");
+      const { CanvasRenderer } = await import("./CanvasRenderer-8qDPmI6y.js");
       RendererClass = CanvasRenderer;
       finalOptions = { ...options, ...options.canvasOptions };
       break;
@@ -132921,9 +132983,29 @@ function screenToGrid(screenX, screenY) {
 function getIsometricZIndex(gridX, gridY) {
   return gridX + gridY;
 }
+function calculateRegionCameraPosition(regionCenterX, regionCenterY, bounds) {
+  const center = gridToScreen(regionCenterX, regionCenterY);
+  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 screenWidth = rightCorner.screenX - leftCorner.screenX;
+  const screenHeight = bottomCorner.screenY - topCorner.screenY;
+  return {
+    centerX: center.screenX,
+    centerY: center.screenY,
+    screenWidth,
+    screenHeight
+  };
+}
 function domEventToGridCoords(clientX, clientY, viewport, canvasElement) {
   if (!viewport || !canvasElement) {
-    console.warn("[domEventToGridCoords] Missing viewport or canvas element, returning (0, 0)");
+    console.warn(
+      "[domEventToGridCoords] Missing viewport or canvas element, returning (0, 0)"
+    );
     return { gridX: 0, gridY: 0 };
   }
   const rect = canvasElement.getBoundingClientRect();
@@ -135869,6 +135951,7 @@ const OverworldMapPanelContent = ({
   const animationRef = useRef(null);
   const hasInitializedCamera = useRef(false);
   const skipNextAnimation = useRef(false);
+  const skipInitialAnimation = useRef(false);
   const previousCollectionKeyRef = useRef(null);
   const savedCameraPosition = useRef(null);
   const stableCollectionKey = useMemo(() => {
@@ -136073,28 +136156,16 @@ const OverworldMapPanelContent = ({
         viewport.setZoom(savedCameraPosition.current.scale);
       } else if (mapData.regions.length > 0 && !hasInitializedCamera.current) {
         const firstRegion = mapData.regions[0];
-        const bounds = firstRegion.bounds;
-        const topCorner = gridToScreen(bounds.x, bounds.y);
-        const bottomCorner = gridToScreen(
-          bounds.x + bounds.width,
-          bounds.y + bounds.height
+        const cameraPosition = calculateRegionCameraPosition(
+          firstRegion.centerX,
+          firstRegion.centerY,
+          firstRegion.bounds
         );
-        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 zoomX = visibleWidth * 0.65 / cameraPosition.screenWidth;
+        const zoomY = visibleHeight * 0.65 / cameraPosition.screenHeight;
         const fitZoom = Math.min(zoomX, zoomY, 1);
         viewport.setZoom(fitZoom);
+        viewport.moveCenter(cameraPosition.centerX, cameraPosition.centerY);
         hasInitializedCamera.current = true;
       }
       const findAdjacentEmptyPositions = (regions) => {
@@ -136315,6 +136386,7 @@ const OverworldMapPanelContent = ({
       });
       setIsRendering(false);
       isInitializedRef.current = true;
+      skipInitialAnimation.current = true;
       setInitializationComplete((prev) => prev + 1);
     };
     let resizeObserver = null;
@@ -136498,6 +136570,10 @@ const OverworldMapPanelContent = ({
       skipNextAnimation.current = false;
       return;
     }
+    if (skipInitialAnimation.current) {
+      skipInitialAnimation.current = false;
+      return;
+    }
     setIsAnimating(true);
     const targetX = visibleDimensionsRef.current.width / 2 - regionCenter.screenX;
     const targetY = visibleDimensionsRef.current.height / 2 - regionCenter.screenY;
@@ -136864,9 +136940,29 @@ const CollectionMapPanelContent = ({
   const canvasRef = React2__default.useRef(null);
   const handleRenameRegion = useCallback(
     async (regionId, name2) => {
-      await regionCallbacks.onRegionUpdated(collection.id, regionId, { name: name2 });
+      const span = getTracer().startSpan("collection-map.region-renamed");
+      try {
+        const oldRegion = customRegions.find((r2) => r2.id === regionId);
+        const oldName = (oldRegion == null ? void 0 : oldRegion.name) || "Unknown";
+        span.addEvent("collection-map.region-renamed", {
+          "collection.id": collection.id,
+          "region.id": regionId,
+          "region.old.name": oldName,
+          "region.new.name": name2
+        });
+        await regionCallbacks.onRegionUpdated(collection.id, regionId, {
+          name: name2
+        });
+        span.setStatus({ code: 1 });
+        span.end();
+      } catch (error) {
+        span.recordException(error);
+        span.setStatus({ code: 2, message: error.message });
+        span.end();
+        throw error;
+      }
     },
-    [regionCallbacks, collection.id]
+    [regionCallbacks, collection.id, customRegions]
   );
   const handleDeleteRegion = useCallback(
     async (regionId) => {
@@ -136877,13 +136973,39 @@ const CollectionMapPanelContent = ({
         alert("Cannot delete the last region. At least one region must exist.");
         return;
       }
-      await regionCallbacks.onRegionDeleted(collection.id, regionId);
+      const span = getTracer().startSpan("collection-map.region-deleted");
+      try {
+        const region = customRegions.find((r2) => r2.id === regionId);
+        const regionName = (region == null ? void 0 : region.name) || "Unknown";
+        const orphanedCount = collection.members.filter(
+          (m2) => {
+            var _a2;
+            return ((_a2 = m2.metadata) == null ? void 0 : _a2.regionId) === regionId;
+          }
+        ).length;
+        span.addEvent("collection-map.region-deleted", {
+          "collection.id": collection.id,
+          "region.id": regionId,
+          "region.name": regionName,
+          "nodes.orphaned": orphanedCount
+        });
+        await regionCallbacks.onRegionDeleted(collection.id, regionId);
+        span.setStatus({ code: 1 });
+        span.end();
+      } catch (error) {
+        span.recordException(error);
+        span.setStatus({ code: 2, message: error.message });
+        span.end();
+        throw error;
+      }
     },
-    [regionCallbacks, collection.id, customRegions.length]
+    [regionCallbacks, collection.id, customRegions, collection.members]
   );
   const handleProjectMoved = useCallback(
-    async (projectId, gridX, gridY, metadata) => {
+    async (projectId, gridX, gridY, metadata, parentSpan) => {
       var _a2, _b;
+      const span = parentSpan ?? getTracer().startSpan("collection-map.project-moved");
+      const ownsSpan = !parentSpan;
       const isNewRepo = !!metadata;
       const existingMembership = collection.members.find(
         (m2) => m2.repositoryId === projectId
@@ -136895,6 +137017,11 @@ Memberships (${collection.members.length}): [${collection.members.map((m2) => m2
 This indicates a sprite was rendered without valid backing data.`
         );
         console.error(error);
+        if (ownsSpan) {
+          span.recordException(error);
+          span.setStatus({ code: 2, message: error.message });
+          span.end();
+        }
         throw error;
       }
       const isFirstPlacement = isNewRepo || !!existingMembership && !((_a2 = existingMembership.metadata) == null ? void 0 : _a2.regionId);
@@ -136915,6 +137042,15 @@ This indicates a sprite was rendered without valid backing data.`
         });
         newRegionId = newRegion.id;
       }
+      span.addEvent("collection-map.project-moved", {
+        "collection.id": collection.id,
+        "repository.id": projectId,
+        "is.new.repo": isNewRepo,
+        "is.first.placement": isFirstPlacement,
+        "region.id": newRegionId,
+        "grid.x": gridX,
+        "grid.y": gridY
+      });
       if (isFirstPlacement) {
         try {
           const regionBoundsX2 = regionCol * REGION_SIZE_TILES;
@@ -136943,8 +137079,25 @@ This indicates a sprite was rendered without valid backing data.`
               newRegionId
             );
           }
+          span.addEvent("collection-map.position-saved", {
+            "collection.id": collection.id,
+            "repository.id": projectId,
+            "region.id": newRegionId,
+            "region.changed": true,
+            "grid.x": relativeGridX2,
+            "grid.y": relativeGridY2
+          });
+          if (ownsSpan) {
+            span.setStatus({ code: 1 });
+            span.end();
+          }
         } catch (error) {
           console.error("[PLACEMENT] ✗ ERROR during placement:", error);
+          if (ownsSpan) {
+            span.recordException(error);
+            span.setStatus({ code: 2, message: error.message });
+            span.end();
+          }
           throw error;
         }
         return;
@@ -136966,13 +137119,26 @@ This indicates a sprite was rendered without valid backing data.`
         (m2) => m2.repositoryId === projectId
       );
       const oldRegionId = (_b = membership == null ? void 0 : membership.metadata) == null ? void 0 : _b.regionId;
-      if (oldRegionId !== newRegionId) {
+      const regionChanged = oldRegionId !== newRegionId;
+      if (regionChanged) {
         await regionCallbacks.onRepositoryAssigned(
           collection.id,
           projectId,
           newRegionId
         );
       }
+      span.addEvent("collection-map.position-saved", {
+        "collection.id": collection.id,
+        "repository.id": projectId,
+        "region.id": newRegionId,
+        "region.changed": regionChanged,
+        "grid.x": relativeGridX,
+        "grid.y": relativeGridY
+      });
+      if (ownsSpan) {
+        span.setStatus({ code: 1 });
+        span.end();
+      }
     },
     [
       collection.id,
@@ -136984,20 +137150,43 @@ This indicates a sprite was rendered without valid backing data.`
   );
   const handleProjectDrop = useCallback(
     async (data, event) => {
-      const repositoryPath = data.primaryData;
-      const repositoryMetadata = data.metadata || {};
-      const repoId = (repositoryMetadata == null ? void 0 : repositoryMetadata.name) || repositoryPath;
-      const gridCoords = domEventToGridCoords(
-        event.clientX,
-        event.clientY,
-        viewportRef.current,
-        canvasRef.current
-      );
-      const gridX = Math.round(gridCoords.gridX);
-      const gridY = Math.round(gridCoords.gridY);
-      await handleProjectMoved(repoId, gridX, gridY, repositoryMetadata);
+      const span = getTracer().startSpan("collection-map.project-drop");
+      try {
+        const repositoryPath = data.primaryData;
+        const repositoryMetadata = data.metadata || {};
+        const repoId = (repositoryMetadata == null ? void 0 : repositoryMetadata.name) || repositoryPath;
+        const gridCoords = domEventToGridCoords(
+          event.clientX,
+          event.clientY,
+          viewportRef.current,
+          canvasRef.current
+        );
+        const gridX = Math.round(gridCoords.gridX);
+        const gridY = Math.round(gridCoords.gridY);
+        span.addEvent("collection-map.project-drop", {
+          "collection.id": collection.id,
+          "source.type": "repository-project",
+          "repository.id": repoId,
+          "grid.x": gridX,
+          "grid.y": gridY
+        });
+        await handleProjectMoved(
+          repoId,
+          gridX,
+          gridY,
+          repositoryMetadata,
+          span
+        );
+        span.setStatus({ code: 1 });
+        span.end();
+      } catch (error) {
+        span.recordException(error);
+        span.setStatus({ code: 2, message: error.message });
+        span.end();
+        throw error;
+      }
     },
-    [handleProjectMoved]
+    [handleProjectMoved, collection.id]
   );
   const handleDrawerDrop = useCallback(
     async (event) => {
@@ -137007,41 +137196,80 @@ This indicates a sprite was rendered without valid backing data.`
       if (!unplacedNodeData) return;
       event.preventDefault();
       event.stopPropagation();
-      const { nodeId } = JSON.parse(unplacedNodeData);
-      const gridCoords = domEventToGridCoords(
-        event.clientX,
-        event.clientY,
-        viewportRef.current,
-        canvasRef.current
-      );
-      const gridX = Math.round(gridCoords.gridX);
-      const gridY = Math.round(gridCoords.gridY);
-      await handleProjectMoved(nodeId, gridX, gridY);
+      const span = getTracer().startSpan("collection-map.drawer-drop");
+      try {
+        const { nodeId } = JSON.parse(unplacedNodeData);
+        const gridCoords = domEventToGridCoords(
+          event.clientX,
+          event.clientY,
+          viewportRef.current,
+          canvasRef.current
+        );
+        const gridX = Math.round(gridCoords.gridX);
+        const gridY = Math.round(gridCoords.gridY);
+        span.addEvent("collection-map.drawer-drop", {
+          "collection.id": collection.id,
+          "repository.id": nodeId,
+          "grid.x": gridX,
+          "grid.y": gridY
+        });
+        await handleProjectMoved(nodeId, gridX, gridY, void 0, span);
+        span.setStatus({ code: 1 });
+        span.end();
+      } catch (error) {
+        span.recordException(error);
+        span.setStatus({ code: 2, message: error.message });
+        span.end();
+        throw error;
+      }
     },
-    [handleProjectMoved]
+    [handleProjectMoved, collection.id]
   );
   const handleGitHubDrop = useCallback(
     async (data, event) => {
-      const fullName = data.primaryData;
-      const metadata = data.metadata || {};
-      const repoId = fullName;
-      const repositoryMetadata = {
-        name: metadata.name || fullName.split("/")[1] || fullName,
-        path: fullName,
-        // Use full_name as path for GitHub repos
-        ...metadata
-      };
-      const gridCoords = domEventToGridCoords(
-        event.clientX,
-        event.clientY,
-        viewportRef.current,
-        canvasRef.current
-      );
-      const gridX = Math.round(gridCoords.gridX);
-      const gridY = Math.round(gridCoords.gridY);
-      await handleProjectMoved(repoId, gridX, gridY, repositoryMetadata);
+      const span = getTracer().startSpan("collection-map.project-drop");
+      try {
+        const fullName = data.primaryData;
+        const metadata = data.metadata || {};
+        const repoId = fullName;
+        const repositoryMetadata = {
+          name: metadata.name || fullName.split("/")[1] || fullName,
+          path: fullName,
+          // Use full_name as path for GitHub repos
+          ...metadata
+        };
+        const gridCoords = domEventToGridCoords(
+          event.clientX,
+          event.clientY,
+          viewportRef.current,
+          canvasRef.current
+        );
+        const gridX = Math.round(gridCoords.gridX);
+        const gridY = Math.round(gridCoords.gridY);
+        span.addEvent("collection-map.project-drop", {
+          "collection.id": collection.id,
+          "source.type": "repository-github",
+          "repository.id": repoId,
+          "grid.x": gridX,
+          "grid.y": gridY
+        });
+        await handleProjectMoved(
+          repoId,
+          gridX,
+          gridY,
+          repositoryMetadata,
+          span
+        );
+        span.setStatus({ code: 1 });
+        span.end();
+      } catch (error) {
+        span.recordException(error);
+        span.setStatus({ code: 2, message: error.message });
+        span.end();
+        throw error;
+      }
     },
-    [handleProjectMoved]
+    [handleProjectMoved, collection.id]
   );
   const { isDragOver, ...dropZoneProps } = useDropZone({
     handlers: [
@@ -137190,14 +137418,26 @@ This indicates a sprite was rendered without valid backing data.`
       return;
     }
     hasComputedLayout.current = true;
-    const span = getTracer().startSpan("collection-map.load");
+    const span = getTracer().startSpan("collection-map.collection-selected");
     span.setAttribute("collection.id", collection.id);
+    span.addEvent("collection-map.collection-selected", {
+      "collection.id": collection.id,
+      "collection.name": collection.name,
+      "members.count": collection.members.length
+    });
     span.addEvent("collection-map.convert-nodes", {
       "collection.id": collection.id,
       "memberships.count": collection.members.length,
       "repositories.count": repositories.length,
       "nodes.created": nodes.length
     });
+    span.addEvent("collection-map.validate-nodes", {
+      "collection.id": collection.id,
+      "nodes.total": nodes.length,
+      "nodes.valid": validNodes.length,
+      "nodes.unplaced": unplacedNodes.length,
+      "is.initial.load": isInitialLoad
+    });
     const map2 = nodesToUnifiedOverworldMap(nodes, {
       regionLayout,
       customRegions
@@ -137211,7 +137451,7 @@ This indicates a sprite was rendered without valid backing data.`
       "nodes.positioned": map2.nodes.length
     });
     (async () => {
-      var _a2;
+      var _a2, _b, _c, _d;
       try {
         const updates = {};
         if (needsRegions && map2.regions.length > 0) {
@@ -137251,6 +137491,18 @@ This indicates a sprite was rendered without valid backing data.`
           }
         }
         await regionCallbacks.onBatchLayoutInitialized(collection.id, updates);
+        span.addEvent("collection-map.batch-save", {
+          "collection.id": collection.id,
+          "regions.saved": ((_b = updates.regions) == null ? void 0 : _b.length) || 0,
+          "assignments.saved": ((_c = updates.assignments) == null ? void 0 : _c.length) || 0,
+          "positions.saved": ((_d = updates.positions) == null ? void 0 : _d.length) || 0
+        });
+        span.addEvent("collection-map.map-rendered", {
+          "collection.id": collection.id,
+          "nodes.rendered": validNodes.length,
+          "regions.rendered": customRegions.length || map2.regions.length,
+          "unplaced.count": unplacedNodes.length
+        });
         span.setStatus({ code: 1 });
         span.end();
       } catch (error) {
@@ -137262,9 +137514,12 @@ This indicates a sprite was rendered without valid backing data.`
     })();
   }, [
     collection.id,
+    collection.name,
     collection.members.length,
     repositories.length,
     nodes,
+    validNodes.length,
+    unplacedNodes.length,
     regionLayout,
     customRegions,
     regionCallbacks
@@ -137272,6 +137527,48 @@ This indicates a sprite was rendered without valid backing data.`
   const handleViewportReady = useCallback((viewport) => {
     viewportRef.current = viewport;
   }, []);
+  const handleRepositoryClicked = useCallback(
+    (repositoryId) => {
+      const span = getTracer().startSpan("collection-map.repository-clicked");
+      span.addEvent("collection-map.repository-clicked", {
+        "collection.id": collection.id,
+        "repository.id": repositoryId || "",
+        action: repositoryId ? "selected" : "deselected"
+      });
+      span.setStatus({ code: 1 });
+      span.end();
+      onRepositoryClicked == null ? void 0 : onRepositoryClicked(repositoryId);
+    },
+    [collection.id, onRepositoryClicked]
+  );
+  const handleAddRegion = useCallback(
+    async (position2) => {
+      const span = getTracer().startSpan("collection-map.region-created");
+      try {
+        const order2 = position2.row * 10 + position2.col;
+        const name2 = `Region ${customRegions.length + 1}`;
+        const newRegion = await regionCallbacks.onRegionCreated(collection.id, {
+          name: name2,
+          order: order2,
+          createdAt: 0
+        });
+        span.addEvent("collection-map.region-created", {
+          "collection.id": collection.id,
+          "region.id": newRegion.id,
+          "region.name": name2,
+          "region.order": order2
+        });
+        span.setStatus({ code: 1 });
+        span.end();
+      } catch (error) {
+        span.recordException(error);
+        span.setStatus({ code: 2, message: error.message });
+        span.end();
+        throw error;
+      }
+    },
+    [collection.id, customRegions.length, regionCallbacks]
+  );
   const handleDragOver = useCallback((e2) => {
     if (e2.dataTransfer.types.includes("application/x-unplaced-node") || e2.dataTransfer.types.includes("application/x-panel-data")) {
       e2.preventDefault();
@@ -137347,21 +137644,13 @@ This indicates a sprite was rendered without valid backing data.`
             customRegions,
             collectionKey: collection.id,
             onProjectMoved: handleProjectMoved,
-            onNodeClicked: onRepositoryClicked,
+            onNodeClicked: handleRepositoryClicked,
             selectedNodeId: selectedRepositoryId,
             onPackageHover,
             onPackageHoverEnd,
             onPackageClick,
             onViewportReady: handleViewportReady,
-            onAddRegion: async (position2) => {
-              const order2 = position2.row * 10 + position2.col;
-              const name2 = `Region ${customRegions.length + 1}`;
-              await regionCallbacks.onRegionCreated(collection.id, {
-                name: name2,
-                order: order2,
-                createdAt: 0
-              });
-            },
+            onAddRegion: handleAddRegion,
             onRenameRegion: handleRenameRegion,
             onDeleteRegion: handleDeleteRegion
           }
@@ -138615,4 +138904,4 @@ export {
   UPDATE_PRIORITY as y,
   removeItems as z
 };
-//# sourceMappingURL=index-BL0L_jZJ.js.map
+//# sourceMappingURL=index-mh2Usj7o.js.map