@industry-theme/repository-composition-panels 0.2.3 → 0.2.4

package/dist/panels.bundle.js

@@ -320,7 +320,36 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$l = [
+const __iconNode$q = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
+];
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$q);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$p = [
+  [
+    "path",
+    {
+      d: "M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z",
+      key: "hh9hay"
+    }
+  ],
+  ["path", { d: "m3.3 7 8.7 5 8.7-5", key: "g66t2b" }],
+  ["path", { d: "M12 22V12", key: "d0xqtd" }]
+];
+const Box = createLucideIcon("box", __iconNode$p);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$o = [
   [
     "path",
     {
@@ -352,85 +381,93 @@ const __iconNode$l = [
   ["path", { d: "m12 8 4.74-2.85", key: "3rx089" }],
   ["path", { d: "M12 13.5V8", key: "1io7kd" }]
 ];
-const Boxes = createLucideIcon("boxes", __iconNode$l);
+const Boxes = createLucideIcon("boxes", __iconNode$o);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$k = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$k);
+const __iconNode$n = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$n);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$j = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$j);
+const __iconNode$m = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$m);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$i);
+const __iconNode$l = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$l);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$h = [
+const __iconNode$k = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$k);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$j = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$h);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$j);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$g = [
+const __iconNode$i = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ];
-const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$g);
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$i);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$f = [
+const __iconNode$h = [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const Copy = createLucideIcon("copy", __iconNode$f);
+const Copy = createLucideIcon("copy", __iconNode$h);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$e = [
+const __iconNode$g = [
   ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
   ["path", { d: "M10 14 21 3", key: "gplh6r" }],
   ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
 ];
-const ExternalLink = createLucideIcon("external-link", __iconNode$e);
+const ExternalLink = createLucideIcon("external-link", __iconNode$g);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$d = [
+const __iconNode$f = [
   [
     "path",
     {
@@ -442,14 +479,14 @@ const __iconNode$d = [
   ["path", { d: "M10 12.5 8 15l2 2.5", key: "1tg20x" }],
   ["path", { d: "m14 12.5 2 2.5-2 2.5", key: "yinavb" }]
 ];
-const FileCode = createLucideIcon("file-code", __iconNode$d);
+const FileCode = createLucideIcon("file-code", __iconNode$f);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$c = [
+const __iconNode$e = [
   [
     "path",
     {
@@ -460,14 +497,14 @@ const __iconNode$c = [
   ["path", { d: "M12 17h.01", key: "p32p05" }],
   ["path", { d: "M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3", key: "mhlwft" }]
 ];
-const FileQuestionMark = createLucideIcon("file-question-mark", __iconNode$c);
+const FileQuestionMark = createLucideIcon("file-question-mark", __iconNode$e);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$b = [
+const __iconNode$d = [
   [
     "path",
     {
@@ -480,14 +517,14 @@ const __iconNode$b = [
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-const FileText = createLucideIcon("file-text", __iconNode$b);
+const FileText = createLucideIcon("file-text", __iconNode$d);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$a = [
+const __iconNode$c = [
   [
     "path",
     {
@@ -496,20 +533,63 @@ const __iconNode$a = [
     }
   ]
 ];
-const Folder = createLucideIcon("folder", __iconNode$a);
+const Folder = createLucideIcon("folder", __iconNode$c);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$9 = [
+const __iconNode$b = [
   ["line", { x1: "6", x2: "6", y1: "3", y2: "15", key: "17qcm7" }],
   ["circle", { cx: "18", cy: "6", r: "3", key: "1h7g24" }],
   ["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }],
   ["path", { d: "M18 9a9 9 0 0 1-9 9", key: "n2h4wq" }]
 ];
-const GitBranch = createLucideIcon("git-branch", __iconNode$9);
+const GitBranch = createLucideIcon("git-branch", __iconNode$b);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$a = [
+  [
+    "path",
+    {
+      d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z",
+      key: "zw3jo"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12",
+      key: "1wduqc"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17",
+      key: "kqbvx6"
+    }
+  ]
+];
+const Layers = createLucideIcon("layers", __iconNode$a);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$9 = [
+  ["rect", { width: "7", height: "7", x: "3", y: "3", rx: "1", key: "1g98yp" }],
+  ["rect", { width: "7", height: "7", x: "14", y: "3", rx: "1", key: "6d4xhi" }],
+  ["rect", { width: "7", height: "7", x: "14", y: "14", rx: "1", key: "nxv5o0" }],
+  ["rect", { width: "7", height: "7", x: "3", y: "14", rx: "1", key: "1bb6yr" }]
+];
+const LayoutGrid = createLucideIcon("layout-grid", __iconNode$9);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -8666,1187 +8746,1717 @@ const PackageManagerIcon = ({
       return /* @__PURE__ */ jsx(Package, { size: size2, color });
   }
 };
-const PackageCard = ({
-  pkg,
-  isExpanded,
-  onToggle,
-  onCommandClick,
-  onConfigClick,
-  onPackageClick,
-  standalone = false
+const DependencyInfoModal = ({
+  isOpen,
+  onClose
 }) => {
   const { theme: theme2 } = useTheme();
-  const [activeTab, setActiveTab] = useState("commands");
-  const configFiles = useMemo(() => {
-    if (!pkg.configFiles) return [];
-    return Object.entries(pkg.configFiles).filter(([, config]) => config == null ? void 0 : config.exists).map(([name, config]) => ({ name, ...config }));
-  }, [pkg.configFiles]);
-  const commands = pkg.packageData.availableCommands || [];
-  if (standalone) {
-    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-      /* @__PURE__ */ jsxs(
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: theme2.colors.muted,
+        zIndex: theme2.zIndices[4],
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs(
         "div",
         {
           style: {
+            backgroundColor: theme2.colors.background,
+            borderRadius: `${theme2.radii[3]}px`,
+            maxWidth: "600px",
+            maxHeight: "80vh",
+            width: "90%",
+            overflow: "hidden",
             display: "flex",
-            alignItems: "center",
-            gap: "8px",
-            padding: "12px 16px",
-            borderBottom: `1px solid ${theme2.colors.border}`
+            flexDirection: "column",
+            boxShadow: theme2.shadows[3]
           },
+          onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsx(PackageManagerIcon, { packageManager: pkg.packageData.packageManager, size: 18 }),
-            /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    fontSize: theme2.fontSizes[2],
-                    fontWeight: 600,
-                    color: theme2.colors.text,
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap"
-                  },
-                  children: pkg.packageData.name
-                }
-              ),
-              pkg.packageData.version && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    fontSize: theme2.fontSizes[0],
-                    color: theme2.colors.textSecondary
-                  },
-                  children: [
-                    "v",
-                    pkg.packageData.version
-                  ]
-                }
-              )
-            ] }),
-            pkg.packageData.path && /* @__PURE__ */ jsxs(
-              "button",
+            /* @__PURE__ */ jsxs(
+              "div",
               {
-                onClick: () => onPackageClick == null ? void 0 : onPackageClick(pkg.packageData.path),
                 style: {
+                  padding: `${theme2.space[4]}px`,
+                  borderBottom: `1px solid ${theme2.colors.border}`,
                   display: "flex",
                   alignItems: "center",
-                  gap: "4px",
-                  padding: "4px 8px",
-                  backgroundColor: theme2.colors.backgroundTertiary,
-                  border: `1px solid ${theme2.colors.border}`,
-                  borderRadius: "4px",
-                  color: theme2.colors.textSecondary,
-                  fontSize: theme2.fontSizes[0],
-                  cursor: "pointer"
+                  justifyContent: "space-between"
                 },
-                title: "Open package folder",
                 children: [
-                  /* @__PURE__ */ jsx(Folder, { size: 12 }),
-                  pkg.packageData.path || "/"
+                  /* @__PURE__ */ jsxs(
+                    "h2",
+                    {
+                      style: {
+                        fontSize: `${theme2.fontSizes[4]}px`,
+                        fontWeight: theme2.fontWeights.semibold,
+                        color: theme2.colors.text,
+                        display: "flex",
+                        alignItems: "center",
+                        gap: `${theme2.space[2]}px`,
+                        margin: 0
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(CircleQuestionMark, { size: 20 }),
+                        "Understanding Dependencies"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: onClose,
+                      style: {
+                        background: "none",
+                        border: "none",
+                        color: theme2.colors.textSecondary,
+                        cursor: "pointer",
+                        padding: `${theme2.space[1]}px`
+                      },
+                      children: /* @__PURE__ */ jsx(X, { size: 20 })
+                    }
+                  )
                 ]
               }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            display: "flex",
-            backgroundColor: theme2.colors.backgroundTertiary,
-            borderBottom: `1px solid ${theme2.colors.border}`
-          },
-          children: [
-            { id: "commands", label: "Commands", count: commands.length },
-            { id: "configs", label: "Configs", count: configFiles.length }
-          ].map((tab) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => setActiveTab(tab.id),
-              style: {
-                flex: 1,
-                padding: "8px 12px",
-                backgroundColor: activeTab === tab.id ? theme2.colors.backgroundSecondary : "transparent",
-                border: "none",
-                borderBottom: activeTab === tab.id ? `2px solid ${theme2.colors.accent}` : "2px solid transparent",
-                color: activeTab === tab.id ? theme2.colors.text : theme2.colors.textSecondary,
-                fontSize: theme2.fontSizes[1],
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: "6px"
-              },
-              children: [
-                tab.label,
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      backgroundColor: theme2.colors.backgroundTertiary,
-                      padding: "1px 6px",
-                      borderRadius: "10px",
-                      fontSize: theme2.fontSizes[0]
-                    },
-                    children: tab.count
-                  }
-                )
-              ]
-            },
-            tab.id
-          ))
-        }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  padding: `${theme2.space[4]}px`,
+                  overflow: "auto",
+                  flex: 1
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    Section,
+                    {
+                      icon: /* @__PURE__ */ jsx(Package, { size: 18 }),
+                      title: "Dependency Types",
+                      theme: theme2,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          InfoItem,
+                          {
+                            badge: { text: "prod", color: theme2.colors.primary },
+                            title: "Production Dependencies",
+                            description: "Required for your application to run in production. These are bundled with your app and affect its size and security.",
+                            theme: theme2
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          InfoItem,
+                          {
+                            badge: { text: "dev", color: theme2.colors.secondary },
+                            title: "Development Dependencies",
+                            description: "Only needed during development (build tools, testing, linters). Not included in production builds.",
+                            theme: theme2
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          InfoItem,
+                          {
+                            badge: { text: "peer", color: theme2.colors.accent },
+                            title: "Peer Dependencies",
+                            description: "Expected to be provided by the consumer of your package. Important for library authors to specify compatibility.",
+                            theme: theme2
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Section,
+                    {
+                      icon: /* @__PURE__ */ jsx(Scale, { size: 18 }),
+                      title: "Common Licenses",
+                      theme: theme2,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          InfoItem,
+                          {
+                            badge: { text: "MIT", color: theme2.colors.success },
+                            title: "Permissive Licenses (MIT, Apache, BSD)",
+                            description: "Few restrictions. Can use in commercial projects. Must include copyright notice.",
+                            theme: theme2
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          InfoItem,
+                          {
+                            badge: { text: "GPL", color: theme2.colors.warning },
+                            title: "Copyleft Licenses (GPL, LGPL, AGPL)",
+                            description: "Requires sharing source code of derivative works. Can impact your project's licensing.",
+                            theme: theme2
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+const Section = ({ icon, title, theme: theme2, children }) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: `${theme2.space[5]}px` }, children: [
+  /* @__PURE__ */ jsxs(
+    "h3",
+    {
+      style: {
+        fontSize: `${theme2.fontSizes[2]}px`,
+        fontWeight: theme2.fontWeights.semibold,
+        color: theme2.colors.text,
+        marginBottom: `${theme2.space[3]}px`,
+        display: "flex",
+        alignItems: "center",
+        gap: `${theme2.space[2]}px`
+      },
+      children: [
+        icon,
+        title
+      ]
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: `${theme2.space[2]}px`
+      },
+      children
+    }
+  )
+] });
+const InfoItem = ({ badge, title, description, theme: theme2 }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    style: {
+      padding: `${theme2.space[3]}px`,
+      backgroundColor: theme2.colors.backgroundSecondary,
+      borderRadius: `${theme2.radii[2]}px`,
+      border: `1px solid ${theme2.colors.border}`
+    },
+    children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: `${theme2.space[2]}px`,
+            marginBottom: `${theme2.space[1]}px`
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  padding: `${theme2.space[1]}px ${theme2.space[2]}px`,
+                  borderRadius: `${theme2.radii[1]}px`,
+                  fontSize: `${theme2.fontSizes[0]}px`,
+                  fontWeight: theme2.fontWeights.medium,
+                  backgroundColor: `${badge.color}20`,
+                  color: badge.color
+                },
+                children: badge.text
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: `${theme2.fontSizes[1]}px`,
+                  fontWeight: theme2.fontWeights.medium,
+                  color: theme2.colors.text
+                },
+                children: title
+              }
+            )
+          ]
+        }
       ),
-      /* @__PURE__ */ jsxs("div", { style: { flex: 1, padding: "12px", overflow: "auto" }, children: [
-        activeTab === "commands" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: commands.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: theme2.colors.textSecondary, fontSize: theme2.fontSizes[1] }, children: "No commands available" }) : commands.map((cmd, idx) => /* @__PURE__ */ jsxs(
-          "button",
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            fontSize: `${theme2.fontSizes[1]}px`,
+            color: theme2.colors.textSecondary,
+            lineHeight: theme2.lineHeights.relaxed
+          },
+          children: description
+        }
+      )
+    ]
+  }
+);
+const DependencyRow = ({ dependency }) => {
+  const { theme: theme2 } = useTheme();
+  const [isHovered, setIsHovered] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const getDependencyTypeBadgeStyle = (type) => {
+    const baseStyle = {
+      padding: `${theme2.space[1]}px ${theme2.space[2]}px`,
+      borderRadius: `${theme2.radii[1]}px`,
+      fontSize: `${theme2.fontSizes[0]}px`,
+      fontWeight: theme2.fontWeights.medium,
+      minWidth: "36px",
+      textAlign: "center"
+    };
+    switch (type) {
+      case "production":
+        return {
+          ...baseStyle,
+          backgroundColor: `${theme2.colors.primary}20`,
+          color: theme2.colors.primary
+        };
+      case "development":
+        return {
+          ...baseStyle,
+          backgroundColor: `${theme2.colors.secondary}20`,
+          color: theme2.colors.secondary
+        };
+      case "peer":
+        return {
+          ...baseStyle,
+          backgroundColor: `${theme2.colors.accent}20`,
+          color: theme2.colors.accent
+        };
+      default:
+        return {
+          ...baseStyle,
+          backgroundColor: theme2.colors.backgroundLight,
+          color: theme2.colors.textSecondary
+        };
+    }
+  };
+  const handleCopy = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      const copyText = `${dependency.name}@${dependency.version}`;
+      await navigator.clipboard.writeText(copyText);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+  const actionButtonStyle = {
+    padding: `${theme2.space[1]}px`,
+    borderRadius: `${theme2.radii[1]}px`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: "none",
+    backgroundColor: "transparent",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    opacity: isHovered ? 1 : 0,
+    pointerEvents: isHovered ? "auto" : "none"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: `${theme2.space[2]}px ${theme2.space[3]}px`,
+        backgroundColor: theme2.colors.background,
+        borderRadius: `${theme2.radii[1]}px`,
+        fontSize: `${theme2.fontSizes[1]}px`,
+        border: `1px solid ${theme2.colors.border}`,
+        transition: "all 0.2s"
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            onClick: () => onCommandClick == null ? void 0 : onCommandClick(cmd, pkg.packageData.path),
             style: {
               display: "flex",
               alignItems: "center",
-              gap: "8px",
-              padding: "8px 12px",
-              backgroundColor: theme2.colors.backgroundTertiary,
-              border: `1px solid ${theme2.colors.border}`,
-              borderRadius: "6px",
-              color: theme2.colors.text,
-              cursor: "pointer",
-              textAlign: "left"
+              gap: `${theme2.space[2]}px`,
+              flex: 1,
+              minWidth: 0
             },
             children: [
-              /* @__PURE__ */ jsx(Terminal, { size: 14, color: theme2.colors.accent }),
-              /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: theme2.fontSizes[1] }, children: cmd.name }),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      fontSize: theme2.fontSizes[0],
-                      color: theme2.colors.textSecondary,
-                      fontFamily: "monospace",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap"
-                    },
-                    children: cmd.command
-                  }
-                )
-              ] }),
-              cmd.isLensCommand && /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("span", { style: getDependencyTypeBadgeStyle(dependency.dependencyType), children: dependency.dependencyType === "production" ? "prod" : dependency.dependencyType === "development" ? "dev" : "peer" }),
+              /* @__PURE__ */ jsx(
                 "span",
                 {
                   style: {
-                    padding: "2px 6px",
-                    backgroundColor: theme2.colors.accent + "20",
-                    color: theme2.colors.accent,
-                    borderRadius: "4px",
-                    fontSize: theme2.fontSizes[0]
+                    fontWeight: theme2.fontWeights.medium,
+                    color: theme2.colors.text,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: dependency.name
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: `https://www.npmjs.com/package/${dependency.name}`,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  style: {
+                    ...actionButtonStyle,
+                    color: theme2.colors.textSecondary,
+                    textDecoration: "none",
+                    flexShrink: 0
+                  },
+                  title: "View on npm",
+                  children: /* @__PURE__ */ jsx(ExternalLink, { size: 12 })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "4px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleCopy,
+                  style: {
+                    ...actionButtonStyle,
+                    color: copied ? theme2.colors.success || "#10b981" : theme2.colors.textSecondary
                   },
-                  children: cmd.lensId
+                  title: copied ? "Copied!" : `Copy ${dependency.name}@${dependency.version}`,
+                  children: copied ? /* @__PURE__ */ jsx(Check, { size: 12 }) : /* @__PURE__ */ jsx(Copy, { size: 12 })
                 }
               ),
-              /* @__PURE__ */ jsx(ExternalLink, { size: 12, color: theme2.colors.textSecondary })
+              /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textSecondary }, children: dependency.version })
             ]
-          },
-          idx
-        )) }),
-        activeTab === "configs" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: configFiles.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: theme2.colors.textSecondary, fontSize: theme2.fontSizes[1] }, children: "No config files detected" }) : configFiles.map((config, idx) => /* @__PURE__ */ jsxs(
-          "button",
+          }
+        )
+      ]
+    }
+  );
+};
+const FilterBar = ({
+  activeFilters,
+  onToggleFilter,
+  searchQuery,
+  onSearchChange,
+  counts
+}) => {
+  const { theme: theme2 } = useTheme();
+  const availableFilters = [
+    ...counts.peer > 0 ? ["peer"] : [],
+    ...counts.production > 0 ? ["production"] : [],
+    ...counts.development > 0 ? ["development"] : []
+  ];
+  const showFilters = availableFilters.length > 1;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: `${theme2.space[2]}px`
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            onClick: () => onConfigClick == null ? void 0 : onConfigClick(config),
             style: {
+              position: "relative",
               display: "flex",
-              alignItems: "center",
-              gap: "8px",
-              padding: "8px 12px",
-              backgroundColor: theme2.colors.backgroundTertiary,
-              border: `1px solid ${theme2.colors.border}`,
-              borderRadius: "6px",
-              color: theme2.colors.text,
-              cursor: "pointer",
-              textAlign: "left"
+              alignItems: "center"
             },
             children: [
-              /* @__PURE__ */ jsx(Settings, { size: 14, color: theme2.colors.textSecondary }),
-              /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-                /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: theme2.fontSizes[1] }, children: config.name }),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      fontSize: theme2.fontSizes[0],
-                      color: theme2.colors.textSecondary,
-                      fontFamily: "monospace"
-                    },
-                    children: config.path
-                  }
-                )
-              ] }),
-              config.isInline && /* @__PURE__ */ jsx(
-                "span",
+              /* @__PURE__ */ jsx(
+                Search,
                 {
+                  size: 14,
                   style: {
-                    padding: "2px 6px",
-                    backgroundColor: theme2.colors.textSecondary + "20",
+                    position: "absolute",
+                    left: `${theme2.space[3]}px`,
                     color: theme2.colors.textSecondary,
-                    borderRadius: "4px",
-                    fontSize: theme2.fontSizes[0]
+                    pointerEvents: "none"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Search dependencies...",
+                  value: searchQuery,
+                  onChange: (e) => onSearchChange(e.target.value),
+                  style: {
+                    width: "100%",
+                    padding: `${theme2.space[2]}px ${theme2.space[5]}px`,
+                    borderRadius: `${theme2.radii[2]}px`,
+                    border: `1px solid ${theme2.colors.border}`,
+                    backgroundColor: theme2.colors.backgroundSecondary,
+                    color: theme2.colors.text,
+                    fontSize: `${theme2.fontSizes[1]}px`,
+                    fontFamily: theme2.fonts.body,
+                    outline: "none",
+                    transition: "all 0.2s"
+                  }
+                }
+              ),
+              searchQuery && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => onSearchChange(""),
+                  style: {
+                    position: "absolute",
+                    right: `${theme2.space[2]}px`,
+                    padding: `${theme2.space[1]}px`,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: "transparent",
+                    border: "none",
+                    cursor: "pointer",
+                    borderRadius: `${theme2.radii[1]}px`
                   },
-                  children: "inline"
+                  title: "Clear search",
+                  children: /* @__PURE__ */ jsx(X, { size: 14, color: theme2.colors.textSecondary })
                 }
               )
             ]
-          },
-          idx
-        )) })
-      ] })
-    ] });
+          }
+        ),
+        showFilters && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: `${theme2.space[1]}px`, width: "100%" }, children: availableFilters.map((type) => {
+          const isActive = activeFilters.has(type);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => onToggleFilter(type),
+              style: {
+                flex: 1,
+                padding: `${theme2.space[1]}px ${theme2.space[2]}px`,
+                fontSize: `${theme2.fontSizes[0]}px`,
+                fontWeight: theme2.fontWeights.medium,
+                fontFamily: theme2.fonts.body,
+                borderRadius: `${theme2.radii[1]}px`,
+                border: `1px solid ${isActive ? theme2.colors.primary : theme2.colors.border}`,
+                backgroundColor: isActive ? `${theme2.colors.primary}20` : theme2.colors.backgroundSecondary,
+                color: isActive ? theme2.colors.primary : theme2.colors.text,
+                cursor: "pointer",
+                transition: "all 0.2s"
+              },
+              children: [
+                type === "production" ? "Prod" : type === "development" ? "Dev" : "Peer",
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: { marginLeft: `${theme2.space[1]}px`, opacity: 0.7 },
+                    children: [
+                      "(",
+                      counts[type],
+                      ")"
+                    ]
+                  }
+                )
+              ]
+            },
+            type
+          );
+        }) })
+      ]
+    }
+  );
+};
+const dependencyTypeOrder$1 = {
+  peer: 0,
+  production: 1,
+  development: 2
+};
+function extractDependencies$1(packageLayer) {
+  const { dependencies, devDependencies, peerDependencies } = packageLayer.packageData;
+  const items2 = [];
+  if (dependencies) {
+    Object.entries(dependencies).forEach(([name, version]) => {
+      items2.push({ name, version, dependencyType: "production" });
+    });
   }
+  if (devDependencies) {
+    Object.entries(devDependencies).forEach(([name, version]) => {
+      items2.push({ name, version, dependencyType: "development" });
+    });
+  }
+  if (peerDependencies) {
+    Object.entries(peerDependencies).forEach(([name, version]) => {
+      items2.push({ name, version, dependencyType: "peer" });
+    });
+  }
+  return items2.sort((a, b) => {
+    const typeCompare = dependencyTypeOrder$1[a.dependencyType] - dependencyTypeOrder$1[b.dependencyType];
+    if (typeCompare !== 0) return typeCompare;
+    return a.name.localeCompare(b.name);
+  });
+}
+function findInternalDependencies(pkg, allPackages) {
+  const currentName = pkg.packageData.name;
+  const allDeps = /* @__PURE__ */ new Set([
+    ...Object.keys(pkg.packageData.dependencies || {}),
+    ...Object.keys(pkg.packageData.devDependencies || {}),
+    ...Object.keys(pkg.packageData.peerDependencies || {})
+  ]);
+  const dependsOn = allPackages.filter(
+    (p) => p.packageData.name !== currentName && allDeps.has(p.packageData.name)
+  );
+  const usedBy = allPackages.filter((other) => {
+    if (other.packageData.name === currentName) return false;
+    const otherDeps = /* @__PURE__ */ new Set([
+      ...Object.keys(other.packageData.dependencies || {}),
+      ...Object.keys(other.packageData.devDependencies || {}),
+      ...Object.keys(other.packageData.peerDependencies || {})
+    ]);
+    return otherDeps.has(currentName);
+  });
+  return { dependsOn, usedBy };
+}
+const PackageSummaryCard = ({ pkg, allPackages, onClick }) => {
+  var _a;
+  const { theme: theme2 } = useTheme();
+  const deps = pkg.packageData.dependencies || {};
+  const devDeps = pkg.packageData.devDependencies || {};
+  const peerDeps = pkg.packageData.peerDependencies || {};
+  const totalDeps = Object.keys(deps).length + Object.keys(devDeps).length + Object.keys(peerDeps).length;
+  const configFiles = pkg.configFiles ? Object.values(pkg.configFiles).filter((c) => c == null ? void 0 : c.exists).length : 0;
+  const commands = ((_a = pkg.packageData.availableCommands) == null ? void 0 : _a.length) || 0;
+  const { dependsOn, usedBy } = useMemo(
+    () => findInternalDependencies(pkg, allPackages),
+    [pkg, allPackages]
+  );
+  const hasInternalDeps = dependsOn.length > 0 || usedBy.length > 0;
+  const packageRole = useMemo(() => {
+    if (dependsOn.length === 0 && usedBy.length === 0) {
+      return null;
+    }
+    if (dependsOn.length === 0 && usedBy.length > 0) {
+      return { label: "core", icon: Box, color: "#10b981" };
+    }
+    if (dependsOn.length > 0 && usedBy.length === 0) {
+      return { label: "app", icon: Layers, color: "#8b5cf6" };
+    }
+    return { label: "shared", icon: LayoutGrid, color: "#f59e0b" };
+  }, [dependsOn.length, usedBy.length]);
   return /* @__PURE__ */ jsxs(
-    "div",
+    "button",
     {
+      onClick,
       style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        padding: "12px",
         backgroundColor: theme2.colors.backgroundSecondary,
-        borderRadius: "8px",
         border: `1px solid ${theme2.colors.border}`,
-        overflow: "hidden"
+        borderRadius: "8px",
+        cursor: "pointer",
+        textAlign: "left",
+        transition: "all 0.15s ease",
+        width: "100%"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.borderColor = theme2.colors.accent;
+        e.currentTarget.style.backgroundColor = theme2.colors.backgroundTertiary;
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.borderColor = theme2.colors.border;
+        e.currentTarget.style.backgroundColor = theme2.colors.backgroundSecondary;
       },
       children: [
-        /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx(PackageManagerIcon, { packageManager: pkg.packageData.packageManager, size: 20 }),
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontSize: theme2.fontSizes[2],
+                  fontWeight: 600,
+                  color: theme2.colors.text,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: pkg.packageData.name
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  fontSize: theme2.fontSizes[0],
+                  color: theme2.colors.textSecondary
+                },
+                children: [
+                  pkg.packageData.path || "/",
+                  pkg.packageData.version && ` • v${pkg.packageData.version}`
+                ]
+              }
+            )
+          ] }),
+          packageRole && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "4px",
+                padding: "3px 8px",
+                backgroundColor: packageRole.color + "20",
+                color: packageRole.color,
+                borderRadius: "4px",
+                fontSize: theme2.fontSizes[0],
+                fontWeight: 500,
+                flexShrink: 0
+              },
+              children: [
+                /* @__PURE__ */ jsx(packageRole.icon, { size: 12 }),
+                packageRole.label
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(ChevronRight, { size: 16, color: theme2.colors.textSecondary })
+        ] }),
+        hasInternalDeps && /* @__PURE__ */ jsxs(
+          "div",
           {
-            onClick: onToggle,
             style: {
-              width: "100%",
               display: "flex",
-              alignItems: "center",
-              gap: "8px",
-              padding: "12px 16px",
-              backgroundColor: "transparent",
-              border: "none",
-              cursor: "pointer",
-              color: theme2.colors.text,
-              textAlign: "left"
+              flexDirection: "column",
+              gap: "4px",
+              fontSize: theme2.fontSizes[0]
             },
             children: [
-              isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 16, color: theme2.colors.textSecondary }) : /* @__PURE__ */ jsx(ChevronRight, { size: 16, color: theme2.colors.textSecondary }),
-              /* @__PURE__ */ jsx(PackageManagerIcon, { packageManager: pkg.packageData.packageManager, size: 18 }),
-              /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsx(
-                  "div",
+              dependsOn.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ jsxs("span", { style: { color: theme2.colors.textSecondary, display: "flex", alignItems: "center", gap: "2px" }, children: [
+                  /* @__PURE__ */ jsx(ArrowRight, { size: 10 }),
+                  "uses"
+                ] }),
+                dependsOn.map((dep) => /* @__PURE__ */ jsx(
+                  "span",
                   {
                     style: {
-                      fontSize: theme2.fontSizes[2],
-                      fontWeight: 600,
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap"
+                      padding: "2px 6px",
+                      backgroundColor: theme2.colors.accent + "15",
+                      color: theme2.colors.accent,
+                      borderRadius: "4px",
+                      fontWeight: 500
                     },
-                    children: pkg.packageData.name
-                  }
-                ),
-                pkg.packageData.version && /* @__PURE__ */ jsxs(
-                  "div",
+                    children: dep.packageData.name
+                  },
+                  dep.id
+                ))
+              ] }),
+              usedBy.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textSecondary }, children: "used by" }),
+                usedBy.map((dep) => /* @__PURE__ */ jsx(
+                  "span",
                   {
                     style: {
-                      fontSize: theme2.fontSizes[0],
-                      color: theme2.colors.textSecondary
+                      padding: "2px 6px",
+                      backgroundColor: theme2.colors.textSecondary + "20",
+                      color: theme2.colors.textSecondary,
+                      borderRadius: "4px",
+                      fontWeight: 500
                     },
-                    children: [
-                      "v",
-                      pkg.packageData.version
-                    ]
-                  }
-                )
-              ] }),
-              pkg.packageData.path && /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onPackageClick == null ? void 0 : onPackageClick(pkg.packageData.path);
-                  },
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "4px",
-                    padding: "4px 8px",
-                    backgroundColor: theme2.colors.backgroundTertiary,
-                    border: `1px solid ${theme2.colors.border}`,
-                    borderRadius: "4px",
-                    color: theme2.colors.textSecondary,
-                    fontSize: theme2.fontSizes[0],
-                    cursor: "pointer"
+                    children: dep.packageData.name
                   },
-                  title: "Open package folder",
-                  children: [
-                    /* @__PURE__ */ jsx(Folder, { size: 12 }),
-                    pkg.packageData.path || "/"
-                  ]
-                }
-              )
+                  dep.id
+                ))
+              ] })
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ jsxs("div", { style: { borderTop: `1px solid ${theme2.colors.border}` }, children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                display: "flex",
-                backgroundColor: theme2.colors.backgroundTertiary,
-                borderBottom: `1px solid ${theme2.colors.border}`
-              },
-              children: [
-                { id: "commands", label: "Commands", count: commands.length },
-                { id: "configs", label: "Configs", count: configFiles.length }
-              ].map((tab) => /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: () => setActiveTab(tab.id),
-                  style: {
-                    flex: 1,
-                    padding: "8px 12px",
-                    backgroundColor: activeTab === tab.id ? theme2.colors.backgroundSecondary : "transparent",
-                    border: "none",
-                    borderBottom: activeTab === tab.id ? `2px solid ${theme2.colors.accent}` : "2px solid transparent",
-                    color: activeTab === tab.id ? theme2.colors.text : theme2.colors.textSecondary,
-                    fontSize: theme2.fontSizes[1],
-                    cursor: "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: "6px"
-                  },
-                  children: [
-                    tab.label,
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          backgroundColor: theme2.colors.backgroundTertiary,
-                          padding: "1px 6px",
-                          borderRadius: "10px",
-                          fontSize: theme2.fontSizes[0]
-                        },
-                        children: tab.count
-                      }
-                    )
-                  ]
-                },
-                tab.id
-              ))
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { style: { padding: "12px", maxHeight: "300px", overflow: "auto" }, children: [
-            activeTab === "commands" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: commands.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: theme2.colors.textSecondary, fontSize: theme2.fontSizes[1] }, children: "No commands available" }) : commands.map((cmd, idx) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => onCommandClick == null ? void 0 : onCommandClick(cmd, pkg.packageData.path),
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "8px",
-                  padding: "8px 12px",
-                  backgroundColor: theme2.colors.backgroundTertiary,
-                  border: `1px solid ${theme2.colors.border}`,
-                  borderRadius: "6px",
-                  color: theme2.colors.text,
-                  cursor: "pointer",
-                  textAlign: "left"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(Terminal, { size: 14, color: theme2.colors.accent }),
-                  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-                    /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: theme2.fontSizes[1] }, children: cmd.name }),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          fontSize: theme2.fontSizes[0],
-                          color: theme2.colors.textSecondary,
-                          fontFamily: "monospace",
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
-                          whiteSpace: "nowrap"
-                        },
-                        children: cmd.command
-                      }
-                    )
-                  ] }),
-                  cmd.isLensCommand && /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      style: {
-                        padding: "2px 6px",
-                        backgroundColor: theme2.colors.accent + "20",
-                        color: theme2.colors.accent,
-                        borderRadius: "4px",
-                        fontSize: theme2.fontSizes[0]
-                      },
-                      children: cmd.lensId
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(ExternalLink, { size: 12, color: theme2.colors.textSecondary })
-                ]
-              },
-              idx
-            )) }),
-            activeTab === "configs" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: configFiles.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: theme2.colors.textSecondary, fontSize: theme2.fontSizes[1] }, children: "No config files detected" }) : configFiles.map((config, idx) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => onConfigClick == null ? void 0 : onConfigClick(config),
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "8px",
-                  padding: "8px 12px",
-                  backgroundColor: theme2.colors.backgroundTertiary,
-                  border: `1px solid ${theme2.colors.border}`,
-                  borderRadius: "6px",
-                  color: theme2.colors.text,
-                  cursor: "pointer",
-                  textAlign: "left"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(Settings, { size: 14, color: theme2.colors.textSecondary }),
-                  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-                    /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: theme2.fontSizes[1] }, children: config.name }),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          fontSize: theme2.fontSizes[0],
-                          color: theme2.colors.textSecondary,
-                          fontFamily: "monospace"
-                        },
-                        children: config.path
-                      }
-                    )
-                  ] }),
-                  config.isInline && /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      style: {
-                        padding: "2px 6px",
-                        backgroundColor: theme2.colors.textSecondary + "20",
-                        color: theme2.colors.textSecondary,
-                        borderRadius: "4px",
-                        fontSize: theme2.fontSizes[0]
-                      },
-                      children: "inline"
-                    }
-                  )
-                ]
-              },
-              idx
-            )) })
-          ] })
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "12px",
+              fontSize: theme2.fontSizes[0],
+              color: theme2.colors.textSecondary
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                /* @__PURE__ */ jsx(Terminal, { size: 12 }),
+                /* @__PURE__ */ jsx("span", { children: commands })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                /* @__PURE__ */ jsx(Settings, { size: 12 }),
+                /* @__PURE__ */ jsx("span", { children: configFiles })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                /* @__PURE__ */ jsx(Package, { size: 12 }),
+                /* @__PURE__ */ jsx("span", { children: totalDeps })
+              ] })
+            ]
+          }
+        )
       ]
     }
   );
 };
-const PackageCompositionPanelContent = ({
-  packages,
-  isLoading = false,
-  emptyMessage = "No packages detected",
+const PackageCard = ({
+  pkg,
+  isExpanded,
+  onToggle,
   onCommandClick,
   onConfigClick,
-  onPackageClick
+  onPackageClick,
+  standalone = false
 }) => {
   const { theme: theme2 } = useTheme();
-  const [expandedPackages, setExpandedPackages] = useState(/* @__PURE__ */ new Set());
-  const togglePackage = (packageId) => {
-    setExpandedPackages((prev) => {
+  const [activeTab, setActiveTab] = useState("commands");
+  const [activeFilters, setActiveFilters] = useState(/* @__PURE__ */ new Set());
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showInfoModal, setShowInfoModal] = useState(false);
+  const configFiles = useMemo(() => {
+    if (!pkg.configFiles) return [];
+    return Object.entries(pkg.configFiles).filter(([, config]) => config == null ? void 0 : config.exists).map(([name, config]) => ({ name, ...config }));
+  }, [pkg.configFiles]);
+  const commands = pkg.packageData.availableCommands || [];
+  const dependencyItems = useMemo(() => extractDependencies$1(pkg), [pkg]);
+  const depCounts = useMemo(() => ({
+    all: dependencyItems.length,
+    production: dependencyItems.filter((d) => d.dependencyType === "production").length,
+    development: dependencyItems.filter((d) => d.dependencyType === "development").length,
+    peer: dependencyItems.filter((d) => d.dependencyType === "peer").length
+  }), [dependencyItems]);
+  const handleToggleFilter = (type) => {
+    setActiveFilters((prev) => {
       const next = new Set(prev);
-      if (next.has(packageId)) {
-        next.delete(packageId);
+      if (next.has(type)) {
+        next.delete(type);
       } else {
-        next.add(packageId);
+        next.add(type);
       }
       return next;
     });
   };
-  React2.useEffect(() => {
-    if (packages.length > 0 && expandedPackages.size === 0) {
-      setExpandedPackages(/* @__PURE__ */ new Set([packages[0].id]));
-    }
-  }, [packages, expandedPackages.size]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          padding: "20px",
-          textAlign: "center",
-          color: theme2.colors.textSecondary
-        },
-        children: "Loading packages..."
-      }
-    );
-  }
-  if (packages.length === 0) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          padding: "20px",
-          textAlign: "center",
-          color: theme2.colors.textSecondary
-        },
-        children: emptyMessage
-      }
-    );
-  }
-  const sortedPackages = [...packages].sort((a, b) => {
-    if (a.packageData.isMonorepoRoot && !b.packageData.isMonorepoRoot) return -1;
-    if (!a.packageData.isMonorepoRoot && b.packageData.isMonorepoRoot) return 1;
-    return a.packageData.path.localeCompare(b.packageData.path);
-  });
-  if (packages.length === 1) {
-    return /* @__PURE__ */ jsx(
-      PackageCard,
-      {
-        pkg: packages[0],
-        isExpanded: true,
-        onToggle: () => {
-        },
-        onCommandClick,
-        onConfigClick,
-        onPackageClick,
-        standalone: true
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          padding: "12px 16px",
-          borderBottom: `1px solid ${theme2.colors.border}`,
-          display: "flex",
-          alignItems: "center",
-          gap: "8px"
-        },
-        children: [
-          /* @__PURE__ */ jsx(FileCode, { size: 16, color: theme2.colors.accent }),
-          /* @__PURE__ */ jsxs("span", { style: { fontSize: theme2.fontSizes[1], color: theme2.colors.textSecondary }, children: [
-            packages.length,
-            " package",
-            packages.length !== 1 ? "s" : "",
-            " detected"
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto", padding: "12px", display: "flex", flexDirection: "column", gap: "8px" }, children: sortedPackages.map((pkg) => /* @__PURE__ */ jsx(
-      PackageCard,
-      {
-        pkg,
-        isExpanded: expandedPackages.has(pkg.id),
-        onToggle: () => togglePackage(pkg.id),
-        onCommandClick,
-        onConfigClick,
-        onPackageClick
-      },
-      pkg.id
-    )) })
-  ] });
-};
-const PackageCompositionPanelPreview = () => {
-  const { theme: theme2 } = useTheme();
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        padding: "12px",
-        fontSize: "12px",
-        color: theme2.colors.text,
-        display: "flex",
-        flexDirection: "column",
-        gap: "6px"
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
-          /* @__PURE__ */ jsx(PackageManagerIcon, { packageManager: "npm", size: 14 }),
-          /* @__PURE__ */ jsx("span", { children: "my-app" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", paddingLeft: "8px" }, children: [
-          /* @__PURE__ */ jsx(Terminal, { size: 12, color: theme2.colors.textSecondary }),
-          /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textSecondary }, children: "5 commands" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", paddingLeft: "8px" }, children: [
-          /* @__PURE__ */ jsx(Settings, { size: 12, color: theme2.colors.textSecondary }),
-          /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textSecondary }, children: "3 configs" })
-        ] })
-      ]
+  const filteredDependencies = useMemo(() => {
+    let filtered = [...dependencyItems];
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter((dep) => dep.name.toLowerCase().includes(query));
     }
-  );
-};
-const PackageCompositionPanel = ({ context }) => {
-  var _a;
-  const packagesSlice = context.getSlice("packages");
-  const packages = ((_a = packagesSlice == null ? void 0 : packagesSlice.data) == null ? void 0 : _a.packages) ?? [];
-  const isLoading = (packagesSlice == null ? void 0 : packagesSlice.loading) || false;
-  return /* @__PURE__ */ jsx(
-    PackageCompositionPanelContent,
-    {
-      packages,
-      isLoading
+    const allTypes = ["production", "development", "peer"];
+    const availableTypes = allTypes.filter((t) => depCounts[t] > 0);
+    const isAllSelected = activeFilters.size === 0 || availableTypes.every((t) => activeFilters.has(t));
+    if (!isAllSelected && activeFilters.size > 0) {
+      filtered = filtered.filter((dep) => activeFilters.has(dep.dependencyType));
     }
-  );
-};
-const DependencyInfoModal = ({
-  isOpen,
-  onClose
-}) => {
-  const { theme: theme2 } = useTheme();
-  if (!isOpen) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        position: "fixed",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: theme2.colors.muted,
-        zIndex: theme2.zIndices[4],
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      onClick: onClose,
-      children: /* @__PURE__ */ jsxs(
+    return filtered;
+  }, [dependencyItems, searchQuery, activeFilters, depCounts]);
+  if (standalone) {
+    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+      /* @__PURE__ */ jsxs(
         "div",
         {
           style: {
-            backgroundColor: theme2.colors.background,
-            borderRadius: `${theme2.radii[3]}px`,
-            maxWidth: "600px",
-            maxHeight: "80vh",
-            width: "90%",
-            overflow: "hidden",
             display: "flex",
-            flexDirection: "column",
-            boxShadow: theme2.shadows[3]
+            alignItems: "center",
+            gap: "8px",
+            padding: "12px 16px",
+            borderBottom: `1px solid ${theme2.colors.border}`
           },
-          onClick: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  padding: `${theme2.space[4]}px`,
-                  borderBottom: `1px solid ${theme2.colors.border}`,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between"
-                },
-                children: [
-                  /* @__PURE__ */ jsxs(
-                    "h2",
-                    {
-                      style: {
-                        fontSize: `${theme2.fontSizes[4]}px`,
-                        fontWeight: theme2.fontWeights.semibold,
-                        color: theme2.colors.text,
-                        display: "flex",
-                        alignItems: "center",
-                        gap: `${theme2.space[2]}px`,
-                        margin: 0
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx(CircleQuestionMark, { size: 20 }),
-                        "Understanding Dependencies"
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: onClose,
-                      style: {
-                        background: "none",
-                        border: "none",
-                        color: theme2.colors.textSecondary,
-                        cursor: "pointer",
-                        padding: `${theme2.space[1]}px`
-                      },
-                      children: /* @__PURE__ */ jsx(X, { size: 20 })
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
+            /* @__PURE__ */ jsx(PackageManagerIcon, { packageManager: pkg.packageData.packageManager, size: 18 }),
+            /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: theme2.fontSizes[2],
+                    fontWeight: 600,
+                    color: theme2.colors.text,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: pkg.packageData.name
+                }
+              ),
+              pkg.packageData.version && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    fontSize: theme2.fontSizes[0],
+                    color: theme2.colors.textSecondary
+                  },
+                  children: [
+                    "v",
+                    pkg.packageData.version
+                  ]
+                }
+              )
+            ] }),
+            pkg.packageData.path && /* @__PURE__ */ jsxs(
+              "button",
               {
+                onClick: () => onPackageClick == null ? void 0 : onPackageClick(pkg.packageData.path),
                 style: {
-                  padding: `${theme2.space[4]}px`,
-                  overflow: "auto",
-                  flex: 1
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  padding: "4px 8px",
+                  backgroundColor: theme2.colors.backgroundTertiary,
+                  border: `1px solid ${theme2.colors.border}`,
+                  borderRadius: "4px",
+                  color: theme2.colors.textSecondary,
+                  fontSize: theme2.fontSizes[0],
+                  cursor: "pointer"
                 },
+                title: "Open package folder",
                 children: [
-                  /* @__PURE__ */ jsxs(
-                    Section,
-                    {
-                      icon: /* @__PURE__ */ jsx(Package, { size: 18 }),
-                      title: "Dependency Types",
-                      theme: theme2,
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          InfoItem,
-                          {
-                            badge: { text: "prod", color: theme2.colors.primary },
-                            title: "Production Dependencies",
-                            description: "Required for your application to run in production. These are bundled with your app and affect its size and security.",
-                            theme: theme2
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          InfoItem,
-                          {
-                            badge: { text: "dev", color: theme2.colors.secondary },
-                            title: "Development Dependencies",
-                            description: "Only needed during development (build tools, testing, linters). Not included in production builds.",
-                            theme: theme2
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          InfoItem,
-                          {
-                            badge: { text: "peer", color: theme2.colors.accent },
-                            title: "Peer Dependencies",
-                            description: "Expected to be provided by the consumer of your package. Important for library authors to specify compatibility.",
-                            theme: theme2
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    Section,
-                    {
-                      icon: /* @__PURE__ */ jsx(Scale, { size: 18 }),
-                      title: "Common Licenses",
-                      theme: theme2,
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          InfoItem,
-                          {
-                            badge: { text: "MIT", color: theme2.colors.success },
-                            title: "Permissive Licenses (MIT, Apache, BSD)",
-                            description: "Few restrictions. Can use in commercial projects. Must include copyright notice.",
-                            theme: theme2
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          InfoItem,
-                          {
-                            badge: { text: "GPL", color: theme2.colors.warning },
-                            title: "Copyleft Licenses (GPL, LGPL, AGPL)",
-                            description: "Requires sharing source code of derivative works. Can impact your project's licensing.",
-                            theme: theme2
-                          }
-                        )
-                      ]
-                    }
-                  )
+                  /* @__PURE__ */ jsx(Folder, { size: 12 }),
+                  pkg.packageData.path || "/"
                 ]
               }
             )
           ]
         }
-      )
-    }
-  ) });
-};
-const Section = ({ icon, title, theme: theme2, children }) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: `${theme2.space[5]}px` }, children: [
-  /* @__PURE__ */ jsxs(
-    "h3",
-    {
-      style: {
-        fontSize: `${theme2.fontSizes[2]}px`,
-        fontWeight: theme2.fontWeights.semibold,
-        color: theme2.colors.text,
-        marginBottom: `${theme2.space[3]}px`,
-        display: "flex",
-        alignItems: "center",
-        gap: `${theme2.space[2]}px`
-      },
-      children: [
-        icon,
-        title
-      ]
-    }
-  ),
-  /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: `${theme2.space[2]}px`
-      },
-      children
-    }
-  )
-] });
-const InfoItem = ({ badge, title, description, theme: theme2 }) => /* @__PURE__ */ jsxs(
-  "div",
-  {
-    style: {
-      padding: `${theme2.space[3]}px`,
-      backgroundColor: theme2.colors.backgroundSecondary,
-      borderRadius: `${theme2.radii[2]}px`,
-      border: `1px solid ${theme2.colors.border}`
-    },
-    children: [
-      /* @__PURE__ */ jsxs(
+      ),
+      /* @__PURE__ */ jsx(
         "div",
         {
           style: {
             display: "flex",
-            alignItems: "center",
-            gap: `${theme2.space[2]}px`,
-            marginBottom: `${theme2.space[1]}px`
+            backgroundColor: theme2.colors.backgroundTertiary,
+            borderBottom: `1px solid ${theme2.colors.border}`
+          },
+          children: [
+            { id: "commands", label: "Commands", count: commands.length },
+            { id: "configs", label: "Configs", count: configFiles.length },
+            { id: "dependencies", label: "Dependencies", count: dependencyItems.length }
+          ].map((tab) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setActiveTab(tab.id),
+              style: {
+                flex: 1,
+                padding: "8px 12px",
+                backgroundColor: activeTab === tab.id ? theme2.colors.backgroundSecondary : "transparent",
+                border: "none",
+                borderBottom: activeTab === tab.id ? `2px solid ${theme2.colors.accent}` : "2px solid transparent",
+                color: activeTab === tab.id ? theme2.colors.text : theme2.colors.textSecondary,
+                fontSize: theme2.fontSizes[1],
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "6px"
+              },
+              children: [
+                tab.label,
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      backgroundColor: theme2.colors.backgroundTertiary,
+                      padding: "1px 6px",
+                      borderRadius: "10px",
+                      fontSize: theme2.fontSizes[0]
+                    },
+                    children: tab.count
+                  }
+                )
+              ]
+            },
+            tab.id
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1, padding: activeTab === "dependencies" ? "0" : "12px", overflow: "auto" }, children: [
+        activeTab === "commands" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: commands.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: theme2.colors.textSecondary, fontSize: theme2.fontSizes[1] }, children: "No commands available" }) : commands.map((cmd, idx) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onCommandClick == null ? void 0 : onCommandClick(cmd, pkg.packageData.path),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              padding: "8px 12px",
+              backgroundColor: theme2.colors.backgroundTertiary,
+              border: `1px solid ${theme2.colors.border}`,
+              borderRadius: "6px",
+              color: theme2.colors.text,
+              cursor: "pointer",
+              textAlign: "left"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Terminal, { size: 14, color: theme2.colors.accent }),
+              /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: theme2.fontSizes[1] }, children: cmd.name }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: theme2.fontSizes[0],
+                      color: theme2.colors.textSecondary,
+                      fontFamily: "monospace",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: cmd.command
+                  }
+                )
+              ] }),
+              cmd.isLensCommand && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    padding: "2px 6px",
+                    backgroundColor: theme2.colors.accent + "20",
+                    color: theme2.colors.accent,
+                    borderRadius: "4px",
+                    fontSize: theme2.fontSizes[0]
+                  },
+                  children: cmd.lensId
+                }
+              ),
+              /* @__PURE__ */ jsx(ExternalLink, { size: 12, color: theme2.colors.textSecondary })
+            ]
+          },
+          idx
+        )) }),
+        activeTab === "configs" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: configFiles.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: theme2.colors.textSecondary, fontSize: theme2.fontSizes[1] }, children: "No config files detected" }) : configFiles.map((config, idx) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onConfigClick == null ? void 0 : onConfigClick(config),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              padding: "8px 12px",
+              backgroundColor: theme2.colors.backgroundTertiary,
+              border: `1px solid ${theme2.colors.border}`,
+              borderRadius: "6px",
+              color: theme2.colors.text,
+              cursor: "pointer",
+              textAlign: "left"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Settings, { size: 14, color: theme2.colors.textSecondary }),
+              /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: theme2.fontSizes[1] }, children: config.name }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: theme2.fontSizes[0],
+                      color: theme2.colors.textSecondary,
+                      fontFamily: "monospace"
+                    },
+                    children: config.path
+                  }
+                )
+              ] }),
+              config.isInline && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    padding: "2px 6px",
+                    backgroundColor: theme2.colors.textSecondary + "20",
+                    color: theme2.colors.textSecondary,
+                    borderRadius: "4px",
+                    fontSize: theme2.fontSizes[0]
+                  },
+                  children: "inline"
+                }
+              )
+            ]
           },
-          children: [
-            /* @__PURE__ */ jsx(
-              "span",
+          idx
+        )) }),
+        activeTab === "dependencies" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+          dependencyItems.length === 0 ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                padding: "12px",
+                color: theme2.colors.textSecondary,
+                fontSize: theme2.fontSizes[1],
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "8px"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Package, { size: 16 }),
+                "No dependencies"
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { style: { padding: "12px", borderBottom: `1px solid ${theme2.colors.border}` }, children: /* @__PURE__ */ jsx(
+              FilterBar,
               {
-                style: {
-                  padding: `${theme2.space[1]}px ${theme2.space[2]}px`,
-                  borderRadius: `${theme2.radii[1]}px`,
-                  fontSize: `${theme2.fontSizes[0]}px`,
-                  fontWeight: theme2.fontWeights.medium,
-                  backgroundColor: `${badge.color}20`,
-                  color: badge.color
-                },
-                children: badge.text
+                activeFilters,
+                onToggleFilter: handleToggleFilter,
+                searchQuery,
+                onSearchChange: setSearchQuery,
+                counts: depCounts
               }
-            ),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  fontSize: `${theme2.fontSizes[1]}px`,
-                  fontWeight: theme2.fontWeights.medium,
-                  color: theme2.colors.text
+            ) }),
+            /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto", padding: "8px 12px" }, children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    fontSize: theme2.fontSizes[0],
+                    color: theme2.colors.textSecondary,
+                    marginBottom: "8px"
+                  },
+                  children: [
+                    "Showing ",
+                    filteredDependencies.length,
+                    " of ",
+                    dependencyItems.length
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: filteredDependencies.length === 0 ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    padding: "12px",
+                    textAlign: "center",
+                    color: theme2.colors.textSecondary,
+                    fontSize: theme2.fontSizes[1]
+                  },
+                  children: "No dependencies match your filters"
+                }
+              ) : filteredDependencies.map((dep) => /* @__PURE__ */ jsx(
+                DependencyRow,
+                {
+                  dependency: dep
                 },
-                children: title
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            fontSize: `${theme2.fontSizes[1]}px`,
-            color: theme2.colors.textSecondary,
-            lineHeight: theme2.lineHeights.relaxed
-          },
-          children: description
-        }
-      )
-    ]
+                `${dep.name}-${dep.dependencyType}`
+              )) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            DependencyInfoModal,
+            {
+              isOpen: showInfoModal,
+              onClose: () => setShowInfoModal(false)
+            }
+          )
+        ] })
+      ] })
+    ] });
   }
-);
-const DependencyRow = ({ dependency }) => {
-  const { theme: theme2 } = useTheme();
-  const [isHovered, setIsHovered] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const getDependencyTypeBadgeStyle = (type) => {
-    const baseStyle = {
-      padding: `${theme2.space[1]}px ${theme2.space[2]}px`,
-      borderRadius: `${theme2.radii[1]}px`,
-      fontSize: `${theme2.fontSizes[0]}px`,
-      fontWeight: theme2.fontWeights.medium,
-      minWidth: "36px",
-      textAlign: "center"
-    };
-    switch (type) {
-      case "production":
-        return {
-          ...baseStyle,
-          backgroundColor: `${theme2.colors.primary}20`,
-          color: theme2.colors.primary
-        };
-      case "development":
-        return {
-          ...baseStyle,
-          backgroundColor: `${theme2.colors.secondary}20`,
-          color: theme2.colors.secondary
-        };
-      case "peer":
-        return {
-          ...baseStyle,
-          backgroundColor: `${theme2.colors.accent}20`,
-          color: theme2.colors.accent
-        };
-      default:
-        return {
-          ...baseStyle,
-          backgroundColor: theme2.colors.backgroundLight,
-          color: theme2.colors.textSecondary
-        };
-    }
-  };
-  const handleCopy = async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    try {
-      const copyText = `${dependency.name}@${dependency.version}`;
-      await navigator.clipboard.writeText(copyText);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch (err) {
-      console.error("Failed to copy:", err);
-    }
-  };
-  const actionButtonStyle = {
-    padding: `${theme2.space[1]}px`,
-    borderRadius: `${theme2.radii[1]}px`,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    border: "none",
-    backgroundColor: "transparent",
-    cursor: "pointer",
-    transition: "all 0.15s ease",
-    opacity: isHovered ? 1 : 0,
-    pointerEvents: isHovered ? "auto" : "none"
-  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: `${theme2.space[2]}px ${theme2.space[3]}px`,
-        backgroundColor: theme2.colors.background,
-        borderRadius: `${theme2.radii[1]}px`,
-        fontSize: `${theme2.fontSizes[1]}px`,
+        backgroundColor: theme2.colors.backgroundSecondary,
+        borderRadius: "8px",
         border: `1px solid ${theme2.colors.border}`,
-        transition: "all 0.2s"
+        overflow: "hidden"
       },
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
       children: [
         /* @__PURE__ */ jsxs(
-          "div",
+          "button",
           {
+            onClick: onToggle,
             style: {
+              width: "100%",
               display: "flex",
               alignItems: "center",
-              gap: `${theme2.space[2]}px`,
-              flex: 1,
-              minWidth: 0
+              gap: "8px",
+              padding: "12px 16px",
+              backgroundColor: "transparent",
+              border: "none",
+              cursor: "pointer",
+              color: theme2.colors.text,
+              textAlign: "left"
             },
             children: [
-              /* @__PURE__ */ jsx("span", { style: getDependencyTypeBadgeStyle(dependency.dependencyType), children: dependency.dependencyType === "production" ? "prod" : dependency.dependencyType === "development" ? "dev" : "peer" }),
-              /* @__PURE__ */ jsx(
-                "span",
+              isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 16, color: theme2.colors.textSecondary }) : /* @__PURE__ */ jsx(ChevronRight, { size: 16, color: theme2.colors.textSecondary }),
+              /* @__PURE__ */ jsx(PackageManagerIcon, { packageManager: pkg.packageData.packageManager, size: 18 }),
+              /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: theme2.fontSizes[2],
+                      fontWeight: 600,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    children: pkg.packageData.name
+                  }
+                ),
+                pkg.packageData.version && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      fontSize: theme2.fontSizes[0],
+                      color: theme2.colors.textSecondary
+                    },
+                    children: [
+                      "v",
+                      pkg.packageData.version
+                    ]
+                  }
+                )
+              ] }),
+              pkg.packageData.path && /* @__PURE__ */ jsxs(
+                "button",
                 {
-                  style: {
-                    fontWeight: theme2.fontWeights.medium,
-                    color: theme2.colors.text,
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap"
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onPackageClick == null ? void 0 : onPackageClick(pkg.packageData.path);
                   },
-                  children: dependency.name
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "a",
-                {
-                  href: `https://www.npmjs.com/package/${dependency.name}`,
-                  target: "_blank",
-                  rel: "noopener noreferrer",
                   style: {
-                    ...actionButtonStyle,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    padding: "4px 8px",
+                    backgroundColor: theme2.colors.backgroundTertiary,
+                    border: `1px solid ${theme2.colors.border}`,
+                    borderRadius: "4px",
                     color: theme2.colors.textSecondary,
-                    textDecoration: "none",
-                    flexShrink: 0
+                    fontSize: theme2.fontSizes[0],
+                    cursor: "pointer"
                   },
-                  title: "View on npm",
-                  children: /* @__PURE__ */ jsx(ExternalLink, { size: 12 })
+                  title: "Open package folder",
+                  children: [
+                    /* @__PURE__ */ jsx(Folder, { size: 12 }),
+                    pkg.packageData.path || "/"
+                  ]
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "4px"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
+        isExpanded && /* @__PURE__ */ jsxs("div", { style: { borderTop: `1px solid ${theme2.colors.border}` }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                backgroundColor: theme2.colors.backgroundTertiary,
+                borderBottom: `1px solid ${theme2.colors.border}`
+              },
+              children: [
+                { id: "commands", label: "Commands", count: commands.length },
+                { id: "configs", label: "Configs", count: configFiles.length },
+                { id: "dependencies", label: "Deps", count: dependencyItems.length }
+              ].map((tab) => /* @__PURE__ */ jsxs(
                 "button",
                 {
-                  type: "button",
-                  onClick: handleCopy,
+                  onClick: () => setActiveTab(tab.id),
                   style: {
-                    ...actionButtonStyle,
-                    color: copied ? theme2.colors.success || "#10b981" : theme2.colors.textSecondary
+                    flex: 1,
+                    padding: "8px 12px",
+                    backgroundColor: activeTab === tab.id ? theme2.colors.backgroundSecondary : "transparent",
+                    border: "none",
+                    borderBottom: activeTab === tab.id ? `2px solid ${theme2.colors.accent}` : "2px solid transparent",
+                    color: activeTab === tab.id ? theme2.colors.text : theme2.colors.textSecondary,
+                    fontSize: theme2.fontSizes[1],
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "6px"
                   },
-                  title: copied ? "Copied!" : `Copy ${dependency.name}@${dependency.version}`,
-                  children: copied ? /* @__PURE__ */ jsx(Check, { size: 12 }) : /* @__PURE__ */ jsx(Copy, { size: 12 })
+                  children: [
+                    tab.label,
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          backgroundColor: theme2.colors.backgroundTertiary,
+                          padding: "1px 6px",
+                          borderRadius: "10px",
+                          fontSize: theme2.fontSizes[0]
+                        },
+                        children: tab.count
+                      }
+                    )
+                  ]
+                },
+                tab.id
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { padding: activeTab === "dependencies" ? "0" : "12px", maxHeight: "300px", overflow: "auto" }, children: [
+            activeTab === "commands" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: commands.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: theme2.colors.textSecondary, fontSize: theme2.fontSizes[1] }, children: "No commands available" }) : commands.map((cmd, idx) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => onCommandClick == null ? void 0 : onCommandClick(cmd, pkg.packageData.path),
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  padding: "8px 12px",
+                  backgroundColor: theme2.colors.backgroundTertiary,
+                  border: `1px solid ${theme2.colors.border}`,
+                  borderRadius: "6px",
+                  color: theme2.colors.text,
+                  cursor: "pointer",
+                  textAlign: "left"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Terminal, { size: 14, color: theme2.colors.accent }),
+                  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+                    /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: theme2.fontSizes[1] }, children: cmd.name }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: theme2.fontSizes[0],
+                          color: theme2.colors.textSecondary,
+                          fontFamily: "monospace",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: cmd.command
+                      }
+                    )
+                  ] }),
+                  cmd.isLensCommand && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        padding: "2px 6px",
+                        backgroundColor: theme2.colors.accent + "20",
+                        color: theme2.colors.accent,
+                        borderRadius: "4px",
+                        fontSize: theme2.fontSizes[0]
+                      },
+                      children: cmd.lensId
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ExternalLink, { size: 12, color: theme2.colors.textSecondary })
+                ]
+              },
+              idx
+            )) }),
+            activeTab === "configs" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: configFiles.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: theme2.colors.textSecondary, fontSize: theme2.fontSizes[1] }, children: "No config files detected" }) : configFiles.map((config, idx) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => onConfigClick == null ? void 0 : onConfigClick(config),
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  padding: "8px 12px",
+                  backgroundColor: theme2.colors.backgroundTertiary,
+                  border: `1px solid ${theme2.colors.border}`,
+                  borderRadius: "6px",
+                  color: theme2.colors.text,
+                  cursor: "pointer",
+                  textAlign: "left"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Settings, { size: 14, color: theme2.colors.textSecondary }),
+                  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                    /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: theme2.fontSizes[1] }, children: config.name }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: theme2.fontSizes[0],
+                          color: theme2.colors.textSecondary,
+                          fontFamily: "monospace"
+                        },
+                        children: config.path
+                      }
+                    )
+                  ] }),
+                  config.isInline && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        padding: "2px 6px",
+                        backgroundColor: theme2.colors.textSecondary + "20",
+                        color: theme2.colors.textSecondary,
+                        borderRadius: "4px",
+                        fontSize: theme2.fontSizes[0]
+                      },
+                      children: "inline"
+                    }
+                  )
+                ]
+              },
+              idx
+            )) }),
+            activeTab === "dependencies" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+              dependencyItems.length === 0 ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    padding: "12px",
+                    color: theme2.colors.textSecondary,
+                    fontSize: theme2.fontSizes[1],
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "8px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Package, { size: 16 }),
+                    "No dependencies"
+                  ]
                 }
-              ),
-              /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textSecondary }, children: dependency.version })
-            ]
-          }
-        )
+              ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { style: { padding: "12px", borderBottom: `1px solid ${theme2.colors.border}` }, children: /* @__PURE__ */ jsx(
+                  FilterBar,
+                  {
+                    activeFilters,
+                    onToggleFilter: handleToggleFilter,
+                    searchQuery,
+                    onSearchChange: setSearchQuery,
+                    counts: depCounts
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflow: "auto", padding: "8px 12px" }, children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        fontSize: theme2.fontSizes[0],
+                        color: theme2.colors.textSecondary,
+                        marginBottom: "8px"
+                      },
+                      children: [
+                        "Showing ",
+                        filteredDependencies.length,
+                        " of ",
+                        dependencyItems.length
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: filteredDependencies.length === 0 ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        padding: "12px",
+                        textAlign: "center",
+                        color: theme2.colors.textSecondary,
+                        fontSize: theme2.fontSizes[1]
+                      },
+                      children: "No dependencies match your filters"
+                    }
+                  ) : filteredDependencies.map((dep) => /* @__PURE__ */ jsx(
+                    DependencyRow,
+                    {
+                      dependency: dep
+                    },
+                    `${dep.name}-${dep.dependencyType}`
+                  )) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                DependencyInfoModal,
+                {
+                  isOpen: showInfoModal,
+                  onClose: () => setShowInfoModal(false)
+                }
+              )
+            ] })
+          ] })
+        ] })
       ]
     }
   );
 };
-const FilterBar = ({
-  activeFilters,
-  onToggleFilter,
-  searchQuery,
-  onSearchChange,
-  counts
-}) => {
+const PackageCompositionPanelContent = ({
+  packages,
+  isLoading = false,
+  emptyMessage = "No packages detected",
+  onCommandClick,
+  onConfigClick,
+  onPackageClick
+}) => {
+  const { theme: theme2 } = useTheme();
+  const [selectedPackageId, setSelectedPackageId] = useState(null);
+  const sortedPackages = useMemo(() => {
+    return [...packages].sort((a, b) => {
+      if (a.packageData.isMonorepoRoot && !b.packageData.isMonorepoRoot) return -1;
+      if (!a.packageData.isMonorepoRoot && b.packageData.isMonorepoRoot) return 1;
+      return a.packageData.path.localeCompare(b.packageData.path);
+    });
+  }, [packages]);
+  const selectedPackage = useMemo(() => {
+    if (!selectedPackageId) return null;
+    return packages.find((p) => p.id === selectedPackageId) || null;
+  }, [selectedPackageId, packages]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          padding: "20px",
+          textAlign: "center",
+          color: theme2.colors.textSecondary
+        },
+        children: "Loading packages..."
+      }
+    );
+  }
+  if (packages.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          padding: "20px",
+          textAlign: "center",
+          color: theme2.colors.textSecondary
+        },
+        children: emptyMessage
+      }
+    );
+  }
+  if (packages.length === 1) {
+    return /* @__PURE__ */ jsx(
+      PackageCard,
+      {
+        pkg: packages[0],
+        isExpanded: true,
+        onToggle: () => {
+        },
+        onCommandClick,
+        onConfigClick,
+        onPackageClick,
+        standalone: true
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        overflow: "hidden",
+        position: "relative"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            width: "200%",
+            height: "100%",
+            transform: selectedPackage ? "translateX(-50%)" : "translateX(0)",
+            transition: "transform 0.25s ease-in-out"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  width: "50%",
+                  height: "100%",
+                  display: "flex",
+                  flexDirection: "column",
+                  overflow: "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        padding: "12px 16px",
+                        borderBottom: `1px solid ${theme2.colors.border}`,
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "8px",
+                        flexShrink: 0
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(FileCode, { size: 16, color: theme2.colors.accent }),
+                        /* @__PURE__ */ jsxs("span", { style: { fontSize: theme2.fontSizes[1], color: theme2.colors.textSecondary }, children: [
+                          packages.length,
+                          " packages"
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        flex: 1,
+                        overflow: "auto",
+                        padding: "12px",
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "8px"
+                      },
+                      children: sortedPackages.map((pkg) => /* @__PURE__ */ jsx(
+                        PackageSummaryCard,
+                        {
+                          pkg,
+                          allPackages: packages,
+                          onClick: () => setSelectedPackageId(pkg.id)
+                        },
+                        pkg.id
+                      ))
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  width: "50%",
+                  height: "100%",
+                  display: "flex",
+                  flexDirection: "column",
+                  overflow: "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        padding: "8px 12px",
+                        borderBottom: `1px solid ${theme2.colors.border}`,
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "8px",
+                        flexShrink: 0
+                      },
+                      children: /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          onClick: () => setSelectedPackageId(null),
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "4px",
+                            padding: "4px 8px",
+                            backgroundColor: "transparent",
+                            border: "none",
+                            borderRadius: "4px",
+                            color: theme2.colors.accent,
+                            fontSize: theme2.fontSizes[1],
+                            cursor: "pointer",
+                            transition: "background-color 0.15s ease"
+                          },
+                          onMouseEnter: (e) => {
+                            e.currentTarget.style.backgroundColor = theme2.colors.backgroundTertiary;
+                          },
+                          onMouseLeave: (e) => {
+                            e.currentTarget.style.backgroundColor = "transparent";
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(ChevronLeft, { size: 16 }),
+                            "All Packages"
+                          ]
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: selectedPackage && /* @__PURE__ */ jsx(
+                    PackageCard,
+                    {
+                      pkg: selectedPackage,
+                      isExpanded: true,
+                      onToggle: () => {
+                      },
+                      onCommandClick,
+                      onConfigClick,
+                      onPackageClick,
+                      standalone: true
+                    }
+                  ) })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const PackageCompositionPanelPreview = () => {
   const { theme: theme2 } = useTheme();
-  const availableFilters = [
-    ...counts.peer > 0 ? ["peer"] : [],
-    ...counts.production > 0 ? ["production"] : [],
-    ...counts.development > 0 ? ["development"] : []
-  ];
-  const showFilters = availableFilters.length > 1;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
+        padding: "12px",
+        fontSize: "12px",
+        color: theme2.colors.text,
         display: "flex",
         flexDirection: "column",
-        gap: `${theme2.space[2]}px`
+        gap: "6px"
       },
       children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "relative",
-              display: "flex",
-              alignItems: "center"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                Search,
-                {
-                  size: 14,
-                  style: {
-                    position: "absolute",
-                    left: `${theme2.space[3]}px`,
-                    color: theme2.colors.textSecondary,
-                    pointerEvents: "none"
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "text",
-                  placeholder: "Search dependencies...",
-                  value: searchQuery,
-                  onChange: (e) => onSearchChange(e.target.value),
-                  style: {
-                    width: "100%",
-                    padding: `${theme2.space[2]}px ${theme2.space[5]}px`,
-                    borderRadius: `${theme2.radii[2]}px`,
-                    border: `1px solid ${theme2.colors.border}`,
-                    backgroundColor: theme2.colors.backgroundSecondary,
-                    color: theme2.colors.text,
-                    fontSize: `${theme2.fontSizes[1]}px`,
-                    fontFamily: theme2.fonts.body,
-                    outline: "none",
-                    transition: "all 0.2s"
-                  }
-                }
-              ),
-              searchQuery && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => onSearchChange(""),
-                  style: {
-                    position: "absolute",
-                    right: `${theme2.space[2]}px`,
-                    padding: `${theme2.space[1]}px`,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    backgroundColor: "transparent",
-                    border: "none",
-                    cursor: "pointer",
-                    borderRadius: `${theme2.radii[1]}px`
-                  },
-                  title: "Clear search",
-                  children: /* @__PURE__ */ jsx(X, { size: 14, color: theme2.colors.textSecondary })
-                }
-              )
-            ]
-          }
-        ),
-        showFilters && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: `${theme2.space[1]}px`, width: "100%" }, children: availableFilters.map((type) => {
-          const isActive = activeFilters.has(type);
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => onToggleFilter(type),
-              style: {
-                flex: 1,
-                padding: `${theme2.space[1]}px ${theme2.space[2]}px`,
-                fontSize: `${theme2.fontSizes[0]}px`,
-                fontWeight: theme2.fontWeights.medium,
-                fontFamily: theme2.fonts.body,
-                borderRadius: `${theme2.radii[1]}px`,
-                border: `1px solid ${isActive ? theme2.colors.primary : theme2.colors.border}`,
-                backgroundColor: isActive ? `${theme2.colors.primary}20` : theme2.colors.backgroundSecondary,
-                color: isActive ? theme2.colors.primary : theme2.colors.text,
-                cursor: "pointer",
-                transition: "all 0.2s"
-              },
-              children: [
-                type === "production" ? "Prod" : type === "development" ? "Dev" : "Peer",
-                /* @__PURE__ */ jsxs(
-                  "span",
-                  {
-                    style: { marginLeft: `${theme2.space[1]}px`, opacity: 0.7 },
-                    children: [
-                      "(",
-                      counts[type],
-                      ")"
-                    ]
-                  }
-                )
-              ]
-            },
-            type
-          );
-        }) })
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          /* @__PURE__ */ jsx(PackageManagerIcon, { packageManager: "npm", size: 14 }),
+          /* @__PURE__ */ jsx("span", { children: "my-app" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", paddingLeft: "8px" }, children: [
+          /* @__PURE__ */ jsx(Terminal, { size: 12, color: theme2.colors.textSecondary }),
+          /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textSecondary }, children: "5 commands" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", paddingLeft: "8px" }, children: [
+          /* @__PURE__ */ jsx(Settings, { size: 12, color: theme2.colors.textSecondary }),
+          /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textSecondary }, children: "3 configs" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", paddingLeft: "8px" }, children: [
+          /* @__PURE__ */ jsx(Package, { size: 12, color: theme2.colors.textSecondary }),
+          /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textSecondary }, children: "12 deps" })
+        ] })
       ]
     }
   );
 };
+const PackageCompositionPanel = ({ context }) => {
+  var _a;
+  const packagesSlice = context.getSlice("packages");
+  const packages = ((_a = packagesSlice == null ? void 0 : packagesSlice.data) == null ? void 0 : _a.packages) ?? [];
+  const isLoading = (packagesSlice == null ? void 0 : packagesSlice.loading) || false;
+  return /* @__PURE__ */ jsx(
+    PackageCompositionPanelContent,
+    {
+      packages,
+      isLoading
+    }
+  );
+};
 const dependencyTypeOrder = {
   peer: 0,
   production: 1,