@industry-theme/repository-composition-panels 0.7.3 → 0.7.5

package/dist/{index-D-SkQLOk.js → index-7aQ4t9XI.js}

@@ -1272,7 +1272,7 @@ const RustIcon = ({ size }) => /* @__PURE__ */ jsxs(
     width: size,
     height: size,
     viewBox: "0 0 24 24",
-    fill: "#000000",
+    fill: "#DEA584",
     role: "img",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
@@ -1567,6 +1567,267 @@ const InfoItem = ({ badge, title, description, theme: theme2 }) => /* @__PURE__
     ]
   }
 );
+const PM_COLORS = {
+  npm: "#CB3837",
+  yarn: "#2C8EBB",
+  pnpm: "#F69220",
+  bun: "#FBF0DF",
+  pip: "#3776AB",
+  poetry: "#60A5FA",
+  cargo: "#DEA584"
+};
+const PackageLoadingGraph = () => {
+  const { theme: theme2 } = useTheme();
+  const dropDuration = 1;
+  const staggerDelay = 0.7;
+  const pauseDuration = 4;
+  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"
+    },
+    // 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"
+    },
+    // 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"
+    }
+  ];
+  const bounceDuration = 0.6;
+  const lastDropEnd = boxes[boxes.length - 1].delay + dropDuration + bounceDuration;
+  const totalCycleDuration = lastDropEnd + pauseDuration + fadeDuration;
+  const sizeMap = {
+    sm: { width: 42, height: 38, iconSize: 18 },
+    md: { width: 54, height: 48, iconSize: 24 },
+    lg: { width: 68, height: 60, iconSize: 30 }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        color: theme2.colors.textSecondary,
+        padding: theme2.space[5]
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+          ${boxes.map((box, index2) => {
+          const [bounce1, bounce2, wobble] = box.bounce;
+          const dropStart = box.delay / totalCycleDuration * 100;
+          const landPoint = (box.delay + dropDuration * 0.6) / totalCycleDuration * 100;
+          const bounce1Up = (box.delay + dropDuration * 0.7) / totalCycleDuration * 100;
+          const bounce1Down = (box.delay + dropDuration * 0.8) / totalCycleDuration * 100;
+          const bounce2Up = (box.delay + dropDuration * 0.9) / totalCycleDuration * 100;
+          const settlePoint = (box.delay + dropDuration + bounceDuration) / totalCycleDuration * 100;
+          const fadeStart = (lastDropEnd + pauseDuration) / totalCycleDuration * 100;
+          return `
+              @keyframes boxDrop-${index2} {
+                0% {
+                  opacity: 0;
+                  transform: translate(-50%, -50%) translateY(-120px) rotate(-5deg);
+                }
+                ${dropStart}% {
+                  opacity: 0;
+                  transform: translate(-50%, -50%) translateY(-120px) rotate(-5deg);
+                }
+                ${landPoint}% {
+                  opacity: 1;
+                  transform: translate(-50%, -50%) translateY(4px) rotate(${wobble}deg);
+                }
+                ${bounce1Up}% {
+                  opacity: 1;
+                  transform: translate(-50%, -50%) translateY(-${bounce1}px) rotate(${-wobble * 0.5}deg);
+                }
+                ${bounce1Down}% {
+                  opacity: 1;
+                  transform: translate(-50%, -50%) translateY(2px) rotate(${wobble * 0.3}deg);
+                }
+                ${bounce2Up}% {
+                  opacity: 1;
+                  transform: translate(-50%, -50%) translateY(-${bounce2}px) rotate(${-wobble * 0.2}deg);
+                }
+                ${settlePoint}% {
+                  opacity: 1;
+                  transform: translate(-50%, -50%) translateY(0) rotate(0deg);
+                }
+                ${fadeStart}% {
+                  opacity: 1;
+                  transform: translate(-50%, -50%) translateY(0) rotate(0deg);
+                }
+                100% {
+                  opacity: 0;
+                  transform: translate(-50%, -50%) translateY(20px) rotate(0deg);
+                }
+              }
+            `;
+        }).join("")}
+
+          @keyframes shadowPulse {
+            0%, 100% {
+              opacity: 0.1;
+              transform: translateX(-50%) scaleX(0.5);
+            }
+            50% {
+              opacity: 0.2;
+              transform: translateX(-50%) scaleX(1);
+            }
+          }
+        ` }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              width: "100%",
+              maxWidth: "400px",
+              height: "220px",
+              marginBottom: theme2.space[4]
+            },
+            children: [
+              boxes.map((box) => {
+                const { width } = sizeMap[box.size];
+                const color2 = PM_COLORS[box.pm];
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      left: `${box.x}%`,
+                      top: `${box.finalY + 12}%`,
+                      width: width * 0.8,
+                      height: 6,
+                      borderRadius: "50%",
+                      backgroundColor: color2,
+                      opacity: 0.2,
+                      transform: "translateX(-50%)",
+                      animation: `shadowPulse ${totalCycleDuration}s ease-in-out infinite`,
+                      animationDelay: `${box.delay}s`
+                    }
+                  },
+                  `shadow-${box.id}`
+                );
+              }),
+              boxes.map((box, index2) => {
+                const { width, height, iconSize } = sizeMap[box.size];
+                const color2 = PM_COLORS[box.pm];
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      left: `${box.x}%`,
+                      top: `${box.finalY}%`,
+                      width,
+                      height,
+                      borderRadius: theme2.radii[2],
+                      backgroundColor: theme2.colors.backgroundSecondary,
+                      border: `2px solid ${color2}`,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      opacity: 0,
+                      boxShadow: `0 4px 12px ${color2}40`,
+                      animation: `boxDrop-${index2} ${totalCycleDuration}s ease-out infinite`
+                    },
+                    children: /* @__PURE__ */ jsx(PackageManagerIcon, { packageManager: box.pm, size: iconSize })
+                  },
+                  box.id
+                );
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: theme2.fontSizes[2],
+              fontFamily: theme2.fonts.body,
+              fontWeight: theme2.fontWeights.medium,
+              color: theme2.colors.text,
+              textAlign: "center",
+              marginBottom: theme2.space[2]
+            },
+            children: "Loading packages..."
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: theme2.fontSizes[1],
+              fontFamily: theme2.fonts.body,
+              color: theme2.colors.textSecondary,
+              textAlign: "center"
+            },
+            children: "Discovering dependencies and configurations"
+          }
+        )
+      ]
+    }
+  );
+};
 const typeLabels = {
   production: "prod",
   development: "dev",
@@ -4412,18 +4673,7 @@ const PackageCompositionPanelContent = ({
     return packages.find((p2) => p2.id === selectedPackageId) || null;
   }, [selectedPackageId, packages]);
   if (isLoading) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          padding: "20px",
-          textAlign: "center",
-          color: theme2.colors.textSecondary,
-          fontFamily: theme2.fonts.body
-        },
-        children: "Loading packages..."
-      }
-    );
+    return /* @__PURE__ */ jsx(PackageLoadingGraph, {});
   }
   if (packages.length === 0) {
     return /* @__PURE__ */ jsx(EmptyDependencies, {});
@@ -105994,7 +106244,7 @@ const browserExt = {
   },
   test: () => true,
   load: async () => {
-    await import("./browserAll-CiG96Bal.js");
+    await import("./browserAll-DMDsy2el.js");
   }
 };
 const webworkerExt = {
@@ -106005,7 +106255,7 @@ const webworkerExt = {
   },
   test: () => typeof self !== "undefined" && self.WorkerGlobalScope !== void 0,
   load: async () => {
-    await import("./webworkerAll-ApBSWfHO.js");
+    await import("./webworkerAll-D8hIL1sE.js");
   }
 };
 class ObservablePoint {
@@ -118248,19 +118498,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-B2Pmx2Hh.js");
+      const { WebGPURenderer } = await import("./WebGPURenderer-Bggk73-1.js");
       RendererClass = WebGPURenderer;
       finalOptions = { ...options, ...options.webgpu };
       break;
     } else if (rendererType === "webgl" && isWebGLSupported(
       options.failIfMajorPerformanceCaveat ?? AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat
     )) {
-      const { WebGLRenderer } = await import("./WebGLRenderer-B_nBw2ba.js");
+      const { WebGLRenderer } = await import("./WebGLRenderer-BnHZE5Mp.js");
       RendererClass = WebGLRenderer;
       finalOptions = { ...options, ...options.webgl };
       break;
     } else if (rendererType === "canvas") {
-      const { CanvasRenderer } = await import("./CanvasRenderer-DXt8RTfi.js");
+      const { CanvasRenderer } = await import("./CanvasRenderer-ByT5AV8x.js");
       RendererClass = CanvasRenderer;
       finalOptions = { ...options, ...options.canvasOptions };
       break;
@@ -132727,6 +132977,24 @@ 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)");
@@ -135675,6 +135943,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(() => {
@@ -135879,28 +136148,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) => {
@@ -136121,6 +136378,7 @@ const OverworldMapPanelContent = ({
       });
       setIsRendering(false);
       isInitializedRef.current = true;
+      skipInitialAnimation.current = true;
       setInitializationComplete((prev) => prev + 1);
     };
     let resizeObserver = null;
@@ -136304,6 +136562,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;
@@ -136670,9 +136932,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) => {
@@ -136683,13 +136965,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
@@ -136701,6 +137009,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);
@@ -136721,6 +137034,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;
@@ -136749,8 +137071,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;
@@ -136772,13 +137111,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,
@@ -136790,20 +137142,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) => {
@@ -136813,41 +137188,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: [
@@ -136996,14 +137410,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
@@ -137017,7 +137443,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) {
@@ -137057,6 +137483,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) {
@@ -137068,9 +137506,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
@@ -137078,6 +137519,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();
@@ -137153,21 +137636,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
           }
@@ -138421,4 +138896,4 @@ export {
   UPDATE_PRIORITY as y,
   removeItems as z
 };
-//# sourceMappingURL=index-D-SkQLOk.js.map
+//# sourceMappingURL=index-7aQ4t9XI.js.map