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

package/dist/{index-D-SkQLOk.js → index-BL0L_jZJ.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,211 @@ 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 +4617,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 +106188,7 @@ const browserExt = {
   },
   test: () => true,
   load: async () => {
-    await import("./browserAll-CiG96Bal.js");
+    await import("./browserAll-Dvjnb3Ss.js");
   }
 };
 const webworkerExt = {
@@ -106005,7 +106199,7 @@ const webworkerExt = {
   },
   test: () => typeof self !== "undefined" && self.WorkerGlobalScope !== void 0,
   load: async () => {
-    await import("./webworkerAll-ApBSWfHO.js");
+    await import("./webworkerAll-q1iOXUTF.js");
   }
 };
 class ObservablePoint {
@@ -118248,19 +118442,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-CKeryiWg.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-B9IXLBU3.js");
       RendererClass = WebGLRenderer;
       finalOptions = { ...options, ...options.webgl };
       break;
     } else if (rendererType === "canvas") {
-      const { CanvasRenderer } = await import("./CanvasRenderer-DXt8RTfi.js");
+      const { CanvasRenderer } = await import("./CanvasRenderer-DHF2Dl6A.js");
       RendererClass = CanvasRenderer;
       finalOptions = { ...options, ...options.canvasOptions };
       break;
@@ -138421,4 +138615,4 @@ export {
   UPDATE_PRIORITY as y,
   removeItems as z
 };
-//# sourceMappingURL=index-D-SkQLOk.js.map
+//# sourceMappingURL=index-BL0L_jZJ.js.map