@industry-theme/repository-composition-panels 0.2.2 → 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$k = [
+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$k = [
   ["path", { d: "m12 8 4.74-2.85", key: "3rx089" }],
   ["path", { d: "M12 13.5V8", key: "1io7kd" }]
 ];
-const Boxes = createLucideIcon("boxes", __iconNode$k);
+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$j = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$j);
+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$i = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$i);
+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$h = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$h);
+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$g = [
+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$g);
+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$f = [
+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$f);
+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$e = [
+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$e);
+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$d = [
+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$d);
+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$c = [
+const __iconNode$f = [
   [
     "path",
     {
@@ -442,14 +479,14 @@ const __iconNode$c = [
   ["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$c);
+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$b = [
+const __iconNode$e = [
   [
     "path",
     {
@@ -460,14 +497,34 @@ const __iconNode$b = [
   ["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$b);
+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$a = [
+const __iconNode$d = [
+  [
+    "path",
+    {
+      d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+      key: "1oefj6"
+    }
+  ],
+  ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }],
+  ["path", { d: "M10 9H8", key: "b1mrlr" }],
+  ["path", { d: "M16 13H8", key: "t4e002" }],
+  ["path", { d: "M16 17H8", key: "z1uh3a" }]
+];
+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$c = [
   [
     "path",
     {
@@ -476,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
  *
@@ -8515,567 +8615,303 @@ const GitChangesPanel = ({ context }) => {
     }
   );
 };
-const PackageCard = ({
-  pkg,
-  isExpanded,
-  onToggle,
-  onCommandClick,
-  onConfigClick,
-  onPackageClick
+const NpmIcon = ({ size: size2 }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size2,
+    height: size2,
+    viewBox: "0 0 24 24",
+    fill: "#CB3837",
+    role: "img",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx("title", { children: "npm" }),
+      /* @__PURE__ */ jsx("path", { d: "M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z" })
+    ]
+  }
+);
+const YarnIcon = ({ size: size2 }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size2,
+    height: size2,
+    viewBox: "0 0 24 24",
+    fill: "#2C8EBB",
+    role: "img",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx("title", { children: "Yarn" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06zm.006.7c-.507.016-1.001 1.519-1.001 1.519s-1.27-.204-2.266.871c-.199.218-.468.334-.746.44-.079.028-.176.023-.417.672-.371.991.625 2.094.625 2.094s-1.186.839-1.626 1.881c-.486 1.144-.338 2.261-.338 2.261s-.843.732-.899 1.487c-.051.663.139 1.2.343 1.515.227.343.51.176.51.176s-.561.653-.037.931c.477.25 1.283.394 1.71-.037.31-.31.371-1.001.486-1.283.028-.065.12.111.209.199.097.093.264.195.264.195s-.755.324-.445 1.066c.102.246.468.403 1.066.398.222-.005 2.664-.139 3.313-.296.375-.088.505-.283.505-.283s1.566-.431 2.998-1.357c.917-.598 1.293-.76 2.034-.936.612-.148.57-1.098-.241-1.084-.839.009-1.575.44-2.196.825-1.163.718-1.742.672-1.742.672l-.018-.032c-.079-.13.371-1.293-.134-2.678-.547-1.515-1.413-1.881-1.344-1.997.297-.5 1.038-1.297 1.334-2.78.176-.899.13-2.377-.269-3.151-.074-.144-.732.241-.732.241s-.616-1.371-.788-1.483a.271.271 0 0 0-.157-.046z" })
+    ]
+  }
+);
+const PnpmIcon = ({ size: size2 }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size2,
+    height: size2,
+    viewBox: "0 0 24 24",
+    fill: "#F69220",
+    role: "img",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx("title", { children: "pnpm" }),
+      /* @__PURE__ */ jsx("path", { d: "M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" })
+    ]
+  }
+);
+const BunIcon = ({ size: size2 }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size2,
+    height: size2,
+    viewBox: "0 0 24 24",
+    fill: "#FBF0DF",
+    role: "img",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx("title", { children: "Bun" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 22.596c6.628 0 12-4.338 12-9.688 0-3.318-2.057-6.248-5.219-7.986-1.286-.715-2.297-1.357-3.139-1.89C14.058 2.025 13.08 1.404 12 1.404c-1.097 0-2.334.785-3.966 1.821a49.92 49.92 0 0 1-2.816 1.697C2.057 6.66 0 9.59 0 12.908c0 5.35 5.372 9.687 12 9.687v.001ZM10.599 4.715c.334-.759.503-1.58.498-2.409 0-.145.202-.187.23-.029.658 2.783-.902 4.162-2.057 4.624-.124.048-.199-.121-.103-.209a5.763 5.763 0 0 0 1.432-1.977Zm2.058-.102a5.82 5.82 0 0 0-.782-2.306v-.016c-.069-.123.086-.263.185-.172 1.962 2.111 1.307 4.067.556 5.051-.082.103-.23-.003-.189-.126a5.85 5.85 0 0 0 .23-2.431Zm1.776-.561a5.727 5.727 0 0 0-1.612-1.806v-.014c-.112-.085-.024-.274.114-.218 2.595 1.087 2.774 3.18 2.459 4.407a.116.116 0 0 1-.049.071.11.11 0 0 1-.153-.026.122.122 0 0 1-.022-.083 5.891 5.891 0 0 0-.737-2.331Zm-5.087.561c-.617.546-1.282.76-2.063 1-.117 0-.195-.078-.156-.181 1.752-.909 2.376-1.649 2.999-2.778 0 0 .155-.118.188.085 0 .304-.349 1.329-.968 1.874Zm4.945 11.237a2.957 2.957 0 0 1-.937 1.553c-.346.346-.8.565-1.286.62a2.178 2.178 0 0 1-1.327-.62 2.955 2.955 0 0 1-.925-1.553.244.244 0 0 1 .064-.198.234.234 0 0 1 .193-.069h3.965a.226.226 0 0 1 .19.07c.05.053.073.125.063.197Zm-5.458-2.176a1.862 1.862 0 0 1-2.384-.245 1.98 1.98 0 0 1-.233-2.447c.207-.319.503-.566.848-.713a1.84 1.84 0 0 1 1.092-.11c.366.075.703.261.967.531a1.98 1.98 0 0 1 .408 2.114 1.931 1.931 0 0 1-.698.869v.001Zm8.495.005a1.86 1.86 0 0 1-2.381-.253 1.964 1.964 0 0 1-.547-1.366c0-.384.11-.76.32-1.079.207-.319.503-.567.849-.713a1.844 1.844 0 0 1 1.093-.108c.367.076.704.262.968.534a1.98 1.98 0 0 1 .4 2.117 1.932 1.932 0 0 1-.702.868Z" })
+    ]
+  }
+);
+const PythonIcon = ({ size: size2 }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size2,
+    height: size2,
+    viewBox: "0 0 24 24",
+    fill: "#3776AB",
+    role: "img",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx("title", { children: "Python" }),
+      /* @__PURE__ */ jsx("path", { d: "M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z" })
+    ]
+  }
+);
+const PoetryIcon = ({ size: size2 }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size2,
+    height: size2,
+    viewBox: "0 0 24 24",
+    fill: "#60A5FA",
+    role: "img",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx("title", { children: "Poetry" }),
+      /* @__PURE__ */ jsx("path", { d: "M21.604 0a19.144 19.144 0 0 1-5.268 13.213L2.396 0l13.583 13.583a19.149 19.149 0 0 1-13.583 5.624V0h19.208Zm-1.911 17.297A24.455 24.455 0 0 1 7.189 24l-4.053-4.053a19.91 19.91 0 0 0 13.37-5.838l3.187 3.188Z" })
+    ]
+  }
+);
+const RustIcon = ({ size: size2 }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: size2,
+    height: size2,
+    viewBox: "0 0 24 24",
+    fill: "#000000",
+    role: "img",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx("title", { children: "Rust" }),
+      /* @__PURE__ */ jsx("path", { d: "M23.8346 11.7033l-1.0073-.6236a13.7268 13.7268 0 00-.0283-.2936l.8656-.8069a.3483.3483 0 00-.1154-.578l-1.1066-.414a8.4958 8.4958 0 00-.087-.2856l.6904-.9587a.3462.3462 0 00-.2257-.5446l-1.1663-.1894a9.3574 9.3574 0 00-.1407-.2622l.49-1.0761a.3437.3437 0 00-.0274-.3361.3486.3486 0 00-.3006-.154l-1.1845.0416a6.7444 6.7444 0 00-.1873-.2268l.2723-1.153a.3472.3472 0 00-.417-.4172l-1.1532.2724a14.0183 14.0183 0 00-.2278-.1873l.0415-1.1845a.3442.3442 0 00-.49-.328l-1.076.491c-.0872-.0476-.1742-.0952-.2623-.1407l-.1903-1.1673A.3483.3483 0 0016.256.955l-.9597.6905a8.4867 8.4867 0 00-.2855-.086l-.414-1.1066a.3483.3483 0 00-.5781-.1154l-.8069.8666a9.2936 9.2936 0 00-.2936-.0284L12.2946.1683a.3462.3462 0 00-.5892 0l-.6236 1.0073a13.7383 13.7383 0 00-.2936.0284L9.9803.3374a.3462.3462 0 00-.578.1154l-.4141 1.1065c-.0962.0274-.1903.0567-.2855.086L7.744.955a.3483.3483 0 00-.5447.2258L7.009 2.348a9.3574 9.3574 0 00-.2622.1407l-1.0762-.491a.3462.3462 0 00-.49.328l.0416 1.1845a7.9826 7.9826 0 00-.2278.1873L3.8413 3.425a.3472.3472 0 00-.4171.4171l.2713 1.1531c-.0628.075-.1255.1509-.1863.2268l-1.1845-.0415a.3462.3462 0 00-.328.49l.491 1.0761a9.167 9.167 0 00-.1407.2622l-1.1662.1894a.3483.3483 0 00-.2258.5446l.6904.9587a13.303 13.303 0 00-.087.2855l-1.1065.414a.3483.3483 0 00-.1155.5781l.8656.807a9.2936 9.2936 0 00-.0283.2935l-1.0073.6236a.3442.3442 0 000 .5892l1.0073.6236c.008.0982.0182.1964.0283.2936l-.8656.8079a.3462.3462 0 00.1155.578l1.1065.4141c.0273.0962.0567.1914.087.2855l-.6904.9587a.3452.3452 0 00.2268.5447l1.1662.1893c.0456.088.0922.1751.1408.2622l-.491 1.0762a.3462.3462 0 00.328.49l1.1834-.0415c.0618.0769.1235.1528.1873.2277l-.2713 1.1541a.3462.3462 0 00.4171.4161l1.153-.2713c.075.0638.151.1255.2279.1863l-.0415 1.1845a.3442.3442 0 00.49.327l1.0761-.49c.087.0486.1741.0951.2622.1407l.1903 1.1662a.3483.3483 0 00.5447.2268l.9587-.6904a9.299 9.299 0 00.2855.087l.414 1.1066a.3452.3452 0 00.5781.1154l.8079-.8656c.0972.0111.1954.0203.2936.0294l.6236 1.0073a.3472.3472 0 00.5892 0l.6236-1.0073c.0982-.0091.1964-.0183.2936-.0294l.8069.8656a.3483.3483 0 00.578-.1154l.4141-1.1066a8.4626 8.4626 0 00.2855-.087l.9587.6904a.3452.3452 0 00.5447-.2268l.1903-1.1662c.088-.0456.1751-.0931.2622-.1407l1.0762.49a.3472.3472 0 00.49-.327l-.0415-1.1845a6.7267 6.7267 0 00.2267-.1863l1.1531.2713a.3472.3472 0 00.4171-.416l-.2713-1.1542c.0628-.0749.1255-.1508.1863-.2278l1.1845.0415a.3442.3442 0 00.328-.49l-.49-1.076c.0475-.0872.0951-.1742.1407-.2623l1.1662-.1893a.3483.3483 0 00.2258-.5447l-.6904-.9587.087-.2855 1.1066-.414a.3462.3462 0 00.1154-.5781l-.8656-.8079c.0101-.0972.0202-.1954.0283-.2936l1.0073-.6236a.3442.3442 0 000-.5892zm-6.7413 8.3551a.7138.7138 0 01.2986-1.396.714.714 0 11-.2997 1.396zm-.3422-2.3142a.649.649 0 00-.7715.5l-.3573 1.6685c-1.1035.501-2.3285.7795-3.6193.7795a8.7368 8.7368 0 01-3.6951-.814l-.3574-1.6684a.648.648 0 00-.7714-.499l-1.473.3158a8.7216 8.7216 0 01-.7613-.898h7.1676c.081 0 .1356-.0141.1356-.088v-2.536c0-.074-.0536-.0881-.1356-.0881h-2.0966v-1.6077h2.2677c.2065 0 1.1065.0587 1.394 1.2088.0901.3533.2875 1.5044.4232 1.8729.1346.413.6833 1.2381 1.2685 1.2381h3.5716a.7492.7492 0 00.1296-.0131 8.7874 8.7874 0 01-.8119.9526zM6.8369 20.024a.714.714 0 11-.2997-1.396.714.714 0 01.2997 1.396zM4.1177 8.9972a.7137.7137 0 11-1.304.5791.7137.7137 0 011.304-.579zm-.8352 1.9813l1.5347-.6824a.65.65 0 00.33-.8585l-.3158-.7147h1.2432v5.6025H3.5669a8.7753 8.7753 0 01-.2834-3.348zm6.7343-.5437V8.7836h2.9601c.153 0 1.0792.1772 1.0792.8697 0 .575-.7107.7815-1.2948.7815zm10.7574 1.4862c0 .2187-.008.4363-.0243.651h-.9c-.09 0-.1265.0586-.1265.1477v.413c0 .973-.5487 1.1846-1.0296 1.2382-.4576.0517-.9648-.1913-1.0275-.4717-.2704-1.5186-.7198-1.8436-1.4305-2.4034.8817-.5599 1.799-1.386 1.799-2.4915 0-1.1936-.819-1.9458-1.3769-2.3153-.7825-.5163-1.6491-.6195-1.883-.6195H5.4682a8.7651 8.7651 0 014.907-2.7699l1.0974 1.151a.648.648 0 00.9182.0213l1.227-1.1743a8.7753 8.7753 0 016.0044 4.2762l-.8403 1.8982a.652.652 0 00.33.8585l1.6178.7188c.0283.2875.0425.577.0425.8717zm-9.3006-9.5993a.7128.7128 0 11.984 1.0316.7137.7137 0 01-.984-1.0316zm8.3389 6.71a.7107.7107 0 01.9395-.3625.7137.7137 0 11-.9405.3635z" })
+    ]
+  }
+);
+const PackageManagerIcon = ({
+  packageManager,
+  size: size2 = 18,
+  color
+}) => {
+  switch (packageManager) {
+    case "npm":
+      return /* @__PURE__ */ jsx(NpmIcon, { size: size2 });
+    case "yarn":
+      return /* @__PURE__ */ jsx(YarnIcon, { size: size2 });
+    case "pnpm":
+      return /* @__PURE__ */ jsx(PnpmIcon, { size: size2 });
+    case "bun":
+      return /* @__PURE__ */ jsx(BunIcon, { size: size2 });
+    case "pip":
+    case "pipenv":
+      return /* @__PURE__ */ jsx(PythonIcon, { size: size2 });
+    case "poetry":
+      return /* @__PURE__ */ jsx(PoetryIcon, { size: size2 });
+    case "cargo":
+      return /* @__PURE__ */ jsx(RustIcon, { size: size2 });
+    case "unknown":
+    default:
+      return /* @__PURE__ */ jsx(Package, { size: size2, color });
+  }
+};
+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 || [];
-  return /* @__PURE__ */ jsxs(
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
     "div",
     {
       style: {
-        backgroundColor: theme2.colors.backgroundSecondary,
-        borderRadius: "8px",
-        border: `1px solid ${theme2.colors.border}`,
-        overflow: "hidden"
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: theme2.colors.muted,
+        zIndex: theme2.zIndices[4],
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
       },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            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"
-            },
-            children: [
-              isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 16, color: theme2.colors.textSecondary }) : /* @__PURE__ */ jsx(ChevronRight, { size: 16, color: theme2.colors.textSecondary }),
-              /* @__PURE__ */ jsx(Package, { size: 18, color: theme2.colors.accent }),
-              /* @__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",
-                {
-                  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"
-                  },
-                  title: "Open package folder",
-                  children: [
-                    /* @__PURE__ */ jsx(Folder, { size: 12 }),
-                    pkg.packageData.path || "/"
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        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: 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",
+            flexDirection: "column",
+            boxShadow: theme2.shadows[3]
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
               {
-                onClick: () => onCommandClick == null ? void 0 : onCommandClick(cmd, pkg.packageData.path),
                 style: {
+                  padding: `${theme2.space[4]}px`,
+                  borderBottom: `1px solid ${theme2.colors.border}`,
                   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"
+                  justifyContent: "space-between"
                 },
                 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",
+                  /* @__PURE__ */ jsxs(
+                    "h2",
                     {
                       style: {
-                        padding: "2px 6px",
-                        backgroundColor: theme2.colors.accent + "20",
-                        color: theme2.colors.accent,
-                        borderRadius: "4px",
-                        fontSize: theme2.fontSizes[0]
+                        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: cmd.lensId
+                      children: [
+                        /* @__PURE__ */ jsx(CircleQuestionMark, { size: 20 }),
+                        "Understanding Dependencies"
+                      ]
                     }
                   ),
-                  /* @__PURE__ */ jsx(ExternalLink, { size: 12, color: theme2.colors.textSecondary })
+                  /* @__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 })
+                    }
+                  )
                 ]
-              },
-              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",
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
               {
-                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"
+                  padding: `${theme2.space[4]}px`,
+                  overflow: "auto",
+                  flex: 1
                 },
                 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__ */ jsxs(
+                    Section,
                     {
-                      style: {
-                        padding: "2px 6px",
-                        backgroundColor: theme2.colors.textSecondary + "20",
-                        color: theme2.colors.textSecondary,
-                        borderRadius: "4px",
-                        fontSize: theme2.fontSizes[0]
-                      },
-                      children: "inline"
+                      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
+                          }
+                        )
+                      ]
                     }
                   )
                 ]
-              },
-              idx
-            )) })
-          ] })
-        ] })
-      ]
+              }
+            )
+          ]
+        }
+      )
     }
-  );
-};
-const PackageCompositionPanelContent = ({
-  packages,
-  isLoading = false,
-  emptyMessage = "No packages detected",
-  onCommandClick,
-  onConfigClick,
-  onPackageClick
-}) => {
-  const { theme: theme2 } = useTheme();
-  const [expandedPackages, setExpandedPackages] = useState(/* @__PURE__ */ new Set());
-  const togglePackage = (packageId) => {
-    setExpandedPackages((prev) => {
-      const next = new Set(prev);
-      if (next.has(packageId)) {
-        next.delete(packageId);
-      } else {
-        next.add(packageId);
-      }
-      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);
-  });
-  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(Package, { size: 14, color: theme2.colors.accent }),
-          /* @__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 PackageCompositionPanel = ({ context }) => {
-  const packagesSlice = context.getSlice("packages");
-  const packages = (packagesSlice == null ? void 0 : packagesSlice.data) ?? [];
-  const isLoading = (packagesSlice == null ? void 0 : packagesSlice.loading) || false;
-  return /* @__PURE__ */ jsx(
-    PackageCompositionPanelContent,
-    {
-      packages,
-      isLoading
-    }
-  );
-};
-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(
-        "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]
-          },
-          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",
-              {
-                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(
@@ -9455,12 +9291,12 @@ const FilterBar = ({
     }
   );
 };
-const dependencyTypeOrder = {
+const dependencyTypeOrder$1 = {
   peer: 0,
   production: 1,
   development: 2
 };
-function extractDependencies(packageLayer) {
+function extractDependencies$1(packageLayer) {
   const { dependencies, devDependencies, peerDependencies } = packageLayer.packageData;
   const items2 = [];
   if (dependencies) {
@@ -9479,54 +9315,243 @@ function extractDependencies(packageLayer) {
     });
   }
   return items2.sort((a, b) => {
-    const typeCompare = dependencyTypeOrder[a.dependencyType] - dependencyTypeOrder[b.dependencyType];
+    const typeCompare = dependencyTypeOrder$1[a.dependencyType] - dependencyTypeOrder$1[b.dependencyType];
     if (typeCompare !== 0) return typeCompare;
     return a.name.localeCompare(b.name);
   });
 }
-const DependenciesPanelContent = ({
-  context
-}) => {
-  var _a;
+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 [selectedPackagePath, setSelectedPackagePath] = useState(
-    null
+  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(
+    "button",
+    {
+      onClick,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        padding: "12px",
+        backgroundColor: theme2.colors.backgroundSecondary,
+        border: `1px solid ${theme2.colors.border}`,
+        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("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",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px",
+              fontSize: theme2.fontSizes[0]
+            },
+            children: [
+              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: {
+                      padding: "2px 6px",
+                      backgroundColor: theme2.colors.accent + "15",
+                      color: theme2.colors.accent,
+                      borderRadius: "4px",
+                      fontWeight: 500
+                    },
+                    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: {
+                      padding: "2px 6px",
+                      backgroundColor: theme2.colors.textSecondary + "20",
+                      color: theme2.colors.textSecondary,
+                      borderRadius: "4px",
+                      fontWeight: 500
+                    },
+                    children: dep.packageData.name
+                  },
+                  dep.id
+                ))
+              ] })
+            ]
+          }
+        ),
+        /* @__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 PackageCard = ({
+  pkg,
+  isExpanded,
+  onToggle,
+  onCommandClick,
+  onConfigClick,
+  onPackageClick,
+  standalone = false
+}) => {
+  const { theme: theme2 } = useTheme();
+  const [activeTab, setActiveTab] = useState("commands");
   const [activeFilters, setActiveFilters] = useState(/* @__PURE__ */ new Set());
   const [searchQuery, setSearchQuery] = useState("");
   const [showInfoModal, setShowInfoModal] = useState(false);
-  const packagesSlice = context.getSlice("packages");
-  const isLoading = context.isSliceLoading("packages");
-  const hasPackages = context.hasSlice("packages");
-  const packages = useMemo(() => {
-    var _a2;
-    return ((_a2 = packagesSlice == null ? void 0 : packagesSlice.data) == null ? void 0 : _a2.packages) ?? [];
-  }, [(_a = packagesSlice == null ? void 0 : packagesSlice.data) == null ? void 0 : _a.packages]);
-  const effectiveSelectedPath = useMemo(() => {
-    if (selectedPackagePath !== null) return selectedPackagePath;
-    if (packages.length === 1) return packages[0].packageData.path;
-    const rootPackage = packages.find((p) => p.packageData.path === "");
-    if (rootPackage) return "";
-    return null;
-  }, [selectedPackagePath, packages]);
-  const selectedPackage = useMemo(() => {
-    if (effectiveSelectedPath === null) return null;
-    return packages.find((p) => p.packageData.path === effectiveSelectedPath);
-  }, [effectiveSelectedPath, packages]);
-  const dependencyItems = useMemo(() => {
-    if (!selectedPackage) return [];
-    return extractDependencies(selectedPackage);
-  }, [selectedPackage]);
-  const counts = useMemo(() => {
-    return {
-      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 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);
@@ -9542,119 +9567,1096 @@ const DependenciesPanelContent = ({
     let filtered = [...dependencyItems];
     if (searchQuery.trim()) {
       const query = searchQuery.toLowerCase();
-      filtered = filtered.filter(
-        (dep) => dep.name.toLowerCase().includes(query)
-      );
+      filtered = filtered.filter((dep) => dep.name.toLowerCase().includes(query));
     }
     const allTypes = ["production", "development", "peer"];
-    const availableTypes = allTypes.filter((t) => counts[t] > 0);
+    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));
     }
     return filtered;
-  }, [dependencyItems, searchQuery, activeFilters, counts]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          padding: `${theme2.space[3]}px`,
-          height: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          color: theme2.colors.textSecondary,
-          backgroundColor: theme2.colors.background,
-          fontFamily: theme2.fonts.body
-        },
-        children: "Loading packages..."
-      }
-    );
-  }
-  if (!hasPackages || packages.length === 0) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          padding: `${theme2.space[3]}px`,
-          height: "100%",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: `${theme2.space[2]}px`,
-          color: theme2.colors.textSecondary,
-          backgroundColor: theme2.colors.background,
-          fontFamily: theme2.fonts.body
-        },
-        children: [
-          /* @__PURE__ */ jsx(Package, { size: 32 }),
-          /* @__PURE__ */ jsx("p", { style: { margin: 0 }, children: "No package data available" })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        backgroundColor: theme2.colors.background,
-        color: theme2.colors.text,
-        fontFamily: theme2.fonts.body,
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              flexShrink: 0,
-              padding: `${theme2.space[3]}px`,
-              paddingBottom: `${theme2.space[2]}px`,
-              display: "flex",
-              flexDirection: "column",
-              gap: `${theme2.space[2]}px`,
-              borderBottom: `1px solid ${theme2.colors.border}`
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
+  }, [dependencyItems, searchQuery, activeFilters, depCounts]);
+  if (standalone) {
+    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            padding: "12px 16px",
+            borderBottom: `1px solid ${theme2.colors.border}`
+          },
+          children: [
+            /* @__PURE__ */ jsx(PackageManagerIcon, { packageManager: pkg.packageData.packageManager, size: 18 }),
+            /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx(
                 "div",
                 {
                   style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between"
+                    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: [
-                    /* @__PURE__ */ jsx(
-                      "h3",
-                      {
-                        style: {
-                          fontSize: `${theme2.fontSizes[2]}px`,
-                          fontWeight: theme2.fontWeights.semibold,
-                          color: theme2.colors.text,
-                          display: "flex",
-                          alignItems: "center",
-                          gap: `${theme2.space[2]}px`,
-                          margin: 0
-                        },
-                        children: packages.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsx(Boxes, { size: 16 }),
-                          "Monorepo Dependencies",
-                          /* @__PURE__ */ jsxs(
-                            "span",
-                            {
-                              style: {
-                                fontSize: `${theme2.fontSizes[0]}px`,
-                                fontWeight: theme2.fontWeights.body,
-                                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: {
+                  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__ */ jsx(Folder, { size: 12 }),
+                  pkg.packageData.path || "/"
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__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: "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"
+                }
+              )
+            ]
+          },
+          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,
+              {
+                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)
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        backgroundColor: theme2.colors.backgroundSecondary,
+        borderRadius: "8px",
+        border: `1px solid ${theme2.colors.border}`,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            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"
+            },
+            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",
+                  {
+                    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",
+                {
+                  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"
+                  },
+                  title: "Open package folder",
+                  children: [
+                    /* @__PURE__ */ jsx(Folder, { size: 12 }),
+                    pkg.packageData.path || "/"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        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",
+                {
+                  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: 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__ */ 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 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();
+  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" })
+        ] }),
+        /* @__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,
+  development: 2
+};
+function extractDependencies(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[a.dependencyType] - dependencyTypeOrder[b.dependencyType];
+    if (typeCompare !== 0) return typeCompare;
+    return a.name.localeCompare(b.name);
+  });
+}
+const DependenciesPanelContent = ({
+  context
+}) => {
+  var _a;
+  const { theme: theme2 } = useTheme();
+  const [selectedPackagePath, setSelectedPackagePath] = useState(
+    null
+  );
+  const [activeFilters, setActiveFilters] = useState(/* @__PURE__ */ new Set());
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showInfoModal, setShowInfoModal] = useState(false);
+  const packagesSlice = context.getSlice("packages");
+  const isLoading = context.isSliceLoading("packages");
+  const hasPackages = context.hasSlice("packages");
+  const packages = useMemo(() => {
+    var _a2;
+    return ((_a2 = packagesSlice == null ? void 0 : packagesSlice.data) == null ? void 0 : _a2.packages) ?? [];
+  }, [(_a = packagesSlice == null ? void 0 : packagesSlice.data) == null ? void 0 : _a.packages]);
+  const effectiveSelectedPath = useMemo(() => {
+    if (selectedPackagePath !== null) return selectedPackagePath;
+    if (packages.length === 1) return packages[0].packageData.path;
+    const rootPackage = packages.find((p) => p.packageData.path === "");
+    if (rootPackage) return "";
+    return null;
+  }, [selectedPackagePath, packages]);
+  const selectedPackage = useMemo(() => {
+    if (effectiveSelectedPath === null) return null;
+    return packages.find((p) => p.packageData.path === effectiveSelectedPath);
+  }, [effectiveSelectedPath, packages]);
+  const dependencyItems = useMemo(() => {
+    if (!selectedPackage) return [];
+    return extractDependencies(selectedPackage);
+  }, [selectedPackage]);
+  const counts = useMemo(() => {
+    return {
+      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(type)) {
+        next.delete(type);
+      } else {
+        next.add(type);
+      }
+      return next;
+    });
+  };
+  const filteredDependencies = useMemo(() => {
+    let filtered = [...dependencyItems];
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(
+        (dep) => dep.name.toLowerCase().includes(query)
+      );
+    }
+    const allTypes = ["production", "development", "peer"];
+    const availableTypes = allTypes.filter((t) => counts[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));
+    }
+    return filtered;
+  }, [dependencyItems, searchQuery, activeFilters, counts]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          padding: `${theme2.space[3]}px`,
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: theme2.colors.textSecondary,
+          backgroundColor: theme2.colors.background,
+          fontFamily: theme2.fonts.body
+        },
+        children: "Loading packages..."
+      }
+    );
+  }
+  if (!hasPackages || packages.length === 0) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          padding: `${theme2.space[3]}px`,
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: `${theme2.space[2]}px`,
+          color: theme2.colors.textSecondary,
+          backgroundColor: theme2.colors.background,
+          fontFamily: theme2.fonts.body
+        },
+        children: [
+          /* @__PURE__ */ jsx(Package, { size: 32 }),
+          /* @__PURE__ */ jsx("p", { style: { margin: 0 }, children: "No package data available" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: theme2.colors.background,
+        color: theme2.colors.text,
+        fontFamily: theme2.fonts.body,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              padding: `${theme2.space[3]}px`,
+              paddingBottom: `${theme2.space[2]}px`,
+              display: "flex",
+              flexDirection: "column",
+              gap: `${theme2.space[2]}px`,
+              borderBottom: `1px solid ${theme2.colors.border}`
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "h3",
+                      {
+                        style: {
+                          fontSize: `${theme2.fontSizes[2]}px`,
+                          fontWeight: theme2.fontWeights.semibold,
+                          color: theme2.colors.text,
+                          display: "flex",
+                          alignItems: "center",
+                          gap: `${theme2.space[2]}px`,
+                          margin: 0
+                        },
+                        children: packages.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(Boxes, { size: 16 }),
+                          "Monorepo Dependencies",
+                          /* @__PURE__ */ jsxs(
+                            "span",
+                            {
+                              style: {
+                                fontSize: `${theme2.fontSizes[0]}px`,
+                                fontWeight: theme2.fontWeights.body,
+                                color: theme2.colors.textSecondary
+                              },
+                              children: [
+                                "(",
                                 packages.length,
                                 ")"
                               ]
@@ -9666,170 +10668,1172 @@ const DependenciesPanelContent = ({
                         ] })
                       }
                     ),
-                    /* @__PURE__ */ jsxs(
-                      "button",
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => setShowInfoModal(true),
+                        style: {
+                          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 ${theme2.colors.border}`,
+                          backgroundColor: theme2.colors.backgroundSecondary,
+                          color: theme2.colors.primary,
+                          cursor: "pointer",
+                          display: "flex",
+                          alignItems: "center",
+                          gap: `${theme2.space[1]}px`,
+                          transition: "all 0.2s"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(CircleQuestionMark, { size: 12 }),
+                          "Learn More"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              packages.length > 1 && /* @__PURE__ */ jsx(
+                "select",
+                {
+                  value: effectiveSelectedPath ?? "__none__",
+                  onChange: (e) => setSelectedPackagePath(e.target.value === "__none__" ? null : e.target.value),
+                  style: {
+                    width: "100%",
+                    padding: `${theme2.space[2]}px`,
+                    borderRadius: `${theme2.radii[1]}px`,
+                    border: `1px solid ${theme2.colors.border}`,
+                    backgroundColor: theme2.colors.backgroundSecondary,
+                    color: theme2.colors.text,
+                    fontSize: `${theme2.fontSizes[1]}px`,
+                    fontFamily: theme2.fonts.body,
+                    cursor: "pointer"
+                  },
+                  children: packages.map((pkg) => /* @__PURE__ */ jsxs("option", { value: pkg.packageData.path, children: [
+                    pkg.packageData.name,
+                    " (",
+                    pkg.packageData.path || "root",
+                    ")"
+                  ] }, pkg.packageData.path || "__root__"))
+                }
+              ),
+              packages.length === 1 && selectedPackage && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    fontSize: `${theme2.fontSizes[0]}px`,
+                    color: theme2.colors.textSecondary
+                  },
+                  children: [
+                    selectedPackage.packageData.name,
+                    " • ",
+                    dependencyItems.length,
+                    " dependencies"
+                  ]
+                }
+              ),
+              selectedPackage && dependencyItems.length > 0 && /* @__PURE__ */ jsx(
+                FilterBar,
+                {
+                  activeFilters,
+                  onToggleFilter: handleToggleFilter,
+                  searchQuery,
+                  onSearchChange: setSearchQuery,
+                  counts
+                }
+              )
+            ]
+          }
+        ),
+        selectedPackage && dependencyItems.length > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflow: "auto",
+              padding: `${theme2.space[2]}px ${theme2.space[3]}px ${theme2.space[3]}px`
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    fontSize: `${theme2.fontSizes[0]}px`,
+                    color: theme2.colors.textSecondary,
+                    marginBottom: `${theme2.space[2]}px`
+                  },
+                  children: [
+                    "Showing ",
+                    filteredDependencies.length,
+                    " of ",
+                    dependencyItems.length,
+                    " dependencies"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: `${theme2.space[1]}px`
+                  },
+                  children: filteredDependencies.length === 0 ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        padding: `${theme2.space[3]}px`,
+                        textAlign: "center",
+                        color: theme2.colors.textSecondary,
+                        fontSize: `${theme2.fontSizes[1]}px`
+                      },
+                      children: "No dependencies match your filters"
+                    }
+                  ) : filteredDependencies.map((dep) => /* @__PURE__ */ jsx(
+                    DependencyRow,
+                    {
+                      dependency: dep
+                    },
+                    `${dep.name}-${dep.dependencyType}`
+                  ))
+                }
+              )
+            ]
+          }
+        ),
+        !selectedPackage && packages.length > 1 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: theme2.colors.textSecondary,
+              fontSize: `${theme2.fontSizes[1]}px`
+            },
+            children: "Select a package to view its dependencies"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DependencyInfoModal,
+          {
+            isOpen: showInfoModal,
+            onClose: () => setShowInfoModal(false)
+          }
+        )
+      ]
+    }
+  );
+};
+const DependenciesPanel = (props) => {
+  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(DependenciesPanelContent, { ...props }) });
+};
+class LocalSearchService {
+  constructor() {
+    this.documentsMap = /* @__PURE__ */ new Map();
+    this.baseDirectory = "";
+    this.initialized = false;
+  }
+  /**
+   * Index files from FileTree
+   */
+  indexFileSystemTree(tree, baseDirectory) {
+    this.baseDirectory = baseDirectory;
+    this.documentsMap.clear();
+    let index = 0;
+    for (const file of tree.allFiles) {
+      const absolutePath = file.path.startsWith("/") ? file.path : `${baseDirectory}/${file.path}`.replace(/\/+/g, "/");
+      const doc = {
+        id: index.toString(),
+        path: absolutePath,
+        name: file.name,
+        relativePath: file.relativePath
+      };
+      this.documentsMap.set(doc.id, doc);
+      index++;
+    }
+    this.initialized = true;
+  }
+  /**
+   * Convert glob pattern to regex
+   */
+  globToRegex(pattern) {
+    const escapedPattern = pattern.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, ".*").replace(/\?/g, ".");
+    return new RegExp(`^${escapedPattern}$`, "i");
+  }
+  /**
+   * Check if query contains wildcards
+   */
+  hasWildcards(query) {
+    return query.includes("*") || query.includes("?");
+  }
+  /**
+   * Check if document matches filter options
+   */
+  matchesFilters(doc, options) {
+    var _a;
+    if ((options == null ? void 0 : options.directoryFilters) && options.directoryFilters.length > 0) {
+      const includeFilters = options.directoryFilters.filter((f) => f.mode === "include");
+      const excludeFilters = options.directoryFilters.filter((f) => f.mode === "exclude");
+      for (const filter of excludeFilters) {
+        if (doc.relativePath.toLowerCase().includes(filter.path.toLowerCase())) {
+          return false;
+        }
+      }
+      if (includeFilters.length > 0) {
+        const matchesInclude = includeFilters.some(
+          (filter) => doc.relativePath.toLowerCase().includes(filter.path.toLowerCase())
+        );
+        if (!matchesInclude) return false;
+      }
+    } else if (options == null ? void 0 : options.directoryFilter) {
+      const shouldInclude = options.excludeDirectory ? !doc.relativePath.includes(options.directoryFilter) : doc.relativePath.includes(options.directoryFilter);
+      if (!shouldInclude) return false;
+    }
+    if (options == null ? void 0 : options.fileType) {
+      const fileExtension = ((_a = doc.name.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
+      if (fileExtension !== options.fileType.toLowerCase()) {
+        return false;
+      }
+    }
+    return true;
+  }
+  /**
+   * Calculate relevance score for a match
+   */
+  calculateScore(doc, query) {
+    const lowerQuery = query.toLowerCase();
+    const lowerName = doc.name.toLowerCase();
+    const lowerPath = doc.relativePath.toLowerCase();
+    let score = 0;
+    if (lowerName === lowerQuery) {
+      score += 100;
+    } else if (lowerName.startsWith(lowerQuery)) {
+      score += 80;
+    } else if (lowerName.includes(lowerQuery)) {
+      score += 60;
+    } else if (lowerPath.includes(lowerQuery)) {
+      score += 40;
+    }
+    score += Math.max(0, 20 - doc.relativePath.split("/").length * 2);
+    return score;
+  }
+  /**
+   * Search files by filename
+   */
+  search(query, options) {
+    if (!this.initialized || !query.trim()) {
+      return [];
+    }
+    const limit = (options == null ? void 0 : options.limit) || 100;
+    const results = [];
+    if (this.hasWildcards(query)) {
+      const regex = this.globToRegex(query);
+      this.documentsMap.forEach((doc) => {
+        if (doc && doc.name && regex.test(doc.name)) {
+          if (!this.matchesFilters(doc, options)) return;
+          results.push({
+            path: doc.path,
+            name: doc.name,
+            relativePath: doc.relativePath,
+            score: 90
+          });
+        }
+      });
+      return results.slice(0, limit);
+    }
+    const lowerQuery = query.toLowerCase();
+    this.documentsMap.forEach((doc) => {
+      if (!doc) return;
+      const lowerName = doc.name.toLowerCase();
+      const lowerPath = doc.relativePath.toLowerCase();
+      if (lowerName.includes(lowerQuery) || lowerPath.includes(lowerQuery)) {
+        if (!this.matchesFilters(doc, options)) return;
+        results.push({
+          path: doc.path,
+          name: doc.name,
+          relativePath: doc.relativePath,
+          score: this.calculateScore(doc, query)
+        });
+      }
+    });
+    results.sort((a, b) => b.score - a.score);
+    return results.slice(0, limit);
+  }
+  /**
+   * Get unique directories from indexed files
+   */
+  getDirectories() {
+    const directories = /* @__PURE__ */ new Set();
+    this.documentsMap.forEach((doc) => {
+      const parts = doc.relativePath.split("/");
+      let path = "";
+      for (let i = 0; i < parts.length - 1; i++) {
+        path = path ? `${path}/${parts[i]}` : parts[i];
+        directories.add(path);
+      }
+    });
+    return Array.from(directories).sort();
+  }
+  /**
+   * Clear the search index
+   */
+  clear() {
+    this.documentsMap.clear();
+    this.initialized = false;
+  }
+  isInitialized() {
+    return this.initialized;
+  }
+}
+const localSearchService = new LocalSearchService();
+const SearchPanelContent = ({
+  fileTree,
+  baseDirectory = "",
+  isLoading = false,
+  onFileSelect,
+  onSearchResultsChange,
+  onSearchResultHover,
+  onDirectoryFiltersChange,
+  selectedFile
+}) => {
+  const { theme: theme2 } = useTheme();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchResults, setSearchResults] = useState([]);
+  const [directoryFilter, setDirectoryFilter] = useState("");
+  const [directoryFilters, setDirectoryFilters] = useState([]);
+  const [excludeDirectory, setExcludeDirectory] = useState(false);
+  const [showDirectoryDropdown, setShowDirectoryDropdown] = useState(false);
+  const [selectedDirectoryIndex, setSelectedDirectoryIndex] = useState(0);
+  const [selectedSearchIndex, setSelectedSearchIndex] = useState(-1);
+  const [isSearchResultsFocused, setIsSearchResultsFocused] = useState(false);
+  const [copiedPath, setCopiedPath] = useState(null);
+  const searchInputRef = useRef(null);
+  const directoryInputRef = useRef(null);
+  const searchResultsRef = useRef(null);
+  const suppressDropdownRef = useRef(false);
+  useEffect(() => {
+    var _a;
+    (_a = searchInputRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  useEffect(() => {
+    if (fileTree && baseDirectory) {
+      localSearchService.indexFileSystemTree(fileTree, baseDirectory);
+    }
+  }, [fileTree, baseDirectory]);
+  useEffect(() => {
+    onDirectoryFiltersChange == null ? void 0 : onDirectoryFiltersChange(directoryFilters);
+  }, [directoryFilters, onDirectoryFiltersChange]);
+  const matchingDirectories = useMemo(() => {
+    if (!directoryFilter || !fileTree) return [];
+    const directories = localSearchService.getDirectories();
+    return directories.filter((dir) => {
+      const lowerDir = dir.toLowerCase();
+      const lowerFilter = directoryFilter.toLowerCase();
+      return lowerDir.includes(lowerFilter) && lowerDir !== lowerFilter;
+    }).map((dir) => ({
+      path: dir,
+      displayPath: dir,
+      score: dir.toLowerCase().startsWith(directoryFilter.toLowerCase()) ? 100 : 80
+    })).sort((a, b) => b.score - a.score).slice(0, 10);
+  }, [directoryFilter, fileTree]);
+  useEffect(() => {
+    if (suppressDropdownRef.current) {
+      suppressDropdownRef.current = false;
+      return;
+    }
+    setShowDirectoryDropdown(directoryFilter.length > 0 && matchingDirectories.length > 0);
+    setSelectedDirectoryIndex(0);
+  }, [directoryFilter, matchingDirectories.length]);
+  const addDirectoryFilter = useCallback(
+    (path, mode = "include") => {
+      if (!path.trim()) return;
+      const existingFilter = directoryFilters.find((f) => f.path === path);
+      if (existingFilter) {
+        setDirectoryFilters(
+          (filters) => filters.map(
+            (f) => f.path === path ? { ...f, mode: f.mode === "include" ? "exclude" : "include" } : f
+          )
+        );
+      } else {
+        const newFilter = {
+          id: `filter-${Date.now()}`,
+          path: path.trim(),
+          mode
+        };
+        setDirectoryFilters((filters) => [...filters, newFilter]);
+      }
+    },
+    [directoryFilters]
+  );
+  const removeDirectoryFilter = useCallback((filterId) => {
+    setDirectoryFilters((filters) => filters.filter((f) => f.id !== filterId));
+  }, []);
+  const toggleFilterMode = useCallback((filterId) => {
+    setDirectoryFilters(
+      (filters) => filters.map(
+        (f) => f.id === filterId ? { ...f, mode: f.mode === "include" ? "exclude" : "include" } : f
+      )
+    );
+  }, []);
+  const handleDirectoryKeyDown = useCallback(
+    (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          if (showDirectoryDropdown && matchingDirectories.length > 0) {
+            e.preventDefault();
+            setSelectedDirectoryIndex(
+              (prev) => prev < matchingDirectories.length - 1 ? prev + 1 : prev
+            );
+          }
+          break;
+        case "ArrowUp":
+          if (showDirectoryDropdown && matchingDirectories.length > 0) {
+            e.preventDefault();
+            setSelectedDirectoryIndex((prev) => prev > 0 ? prev - 1 : prev);
+          }
+          break;
+        case "Enter":
+          e.preventDefault();
+          setShowDirectoryDropdown(false);
+          suppressDropdownRef.current = true;
+          if (matchingDirectories.length > 0 && matchingDirectories[selectedDirectoryIndex]) {
+            const dir = matchingDirectories[selectedDirectoryIndex];
+            addDirectoryFilter(dir.path, excludeDirectory ? "exclude" : "include");
+            setDirectoryFilter("");
+          } else if (directoryFilter.trim()) {
+            addDirectoryFilter(directoryFilter, excludeDirectory ? "exclude" : "include");
+            setDirectoryFilter("");
+          }
+          break;
+        case "Escape":
+          if (showDirectoryDropdown) {
+            e.preventDefault();
+            setShowDirectoryDropdown(false);
+          }
+          break;
+      }
+    },
+    [
+      showDirectoryDropdown,
+      matchingDirectories,
+      selectedDirectoryIndex,
+      directoryFilter,
+      addDirectoryFilter,
+      excludeDirectory
+    ]
+  );
+  const performSearch = useCallback(
+    (query) => {
+      if (!query.trim()) {
+        setSearchResults([]);
+        onSearchResultsChange == null ? void 0 : onSearchResultsChange([]);
+        return;
+      }
+      const results = localSearchService.search(query, {
+        directoryFilters: directoryFilters.length > 0 ? directoryFilters : void 0,
+        limit: 100
+      });
+      setSearchResults(results);
+      onSearchResultsChange == null ? void 0 : onSearchResultsChange(results);
+    },
+    [directoryFilters, onSearchResultsChange]
+  );
+  useEffect(() => {
+    performSearch(searchQuery);
+  }, [searchQuery, performSearch]);
+  useEffect(() => {
+    setSelectedSearchIndex(-1);
+    setIsSearchResultsFocused(false);
+  }, [searchResults]);
+  useEffect(() => {
+    if (isSearchResultsFocused && selectedSearchIndex >= 0 && searchResultsRef.current) {
+      const selectedElement = searchResultsRef.current.querySelector(
+        `.search-result-item:nth-child(${selectedSearchIndex + 1})`
+      );
+      selectedElement == null ? void 0 : selectedElement.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }, [selectedSearchIndex, isSearchResultsFocused]);
+  const handleSearchKeyDown = useCallback(
+    (e) => {
+      var _a, _b;
+      switch (e.key) {
+        case "Tab":
+          if (e.target === searchInputRef.current && !e.shiftKey && searchResults.length > 0) {
+            e.preventDefault();
+            setIsSearchResultsFocused(true);
+            setSelectedSearchIndex(0);
+            (_a = searchResultsRef.current) == null ? void 0 : _a.focus();
+          }
+          break;
+        case "ArrowDown":
+          if (isSearchResultsFocused && searchResults.length > 0) {
+            e.preventDefault();
+            setSelectedSearchIndex(
+              (prev) => prev < searchResults.length - 1 ? prev + 1 : prev
+            );
+          }
+          break;
+        case "ArrowUp":
+          if (isSearchResultsFocused && searchResults.length > 0) {
+            e.preventDefault();
+            setSelectedSearchIndex((prev) => prev > 0 ? prev - 1 : 0);
+          }
+          break;
+        case "Enter":
+          if (isSearchResultsFocused && selectedSearchIndex >= 0) {
+            e.preventDefault();
+            const result = searchResults[selectedSearchIndex];
+            onFileSelect == null ? void 0 : onFileSelect(result.relativePath);
+          }
+          break;
+        case "Escape":
+          if (isSearchResultsFocused) {
+            e.preventDefault();
+            setIsSearchResultsFocused(false);
+            setSelectedSearchIndex(-1);
+            (_b = searchInputRef.current) == null ? void 0 : _b.focus();
+          }
+          break;
+      }
+    },
+    [searchResults, isSearchResultsFocused, selectedSearchIndex, onFileSelect]
+  );
+  const handleCopyPath = useCallback((path) => {
+    navigator.clipboard.writeText(path).then(() => {
+      setCopiedPath(path);
+      setTimeout(() => setCopiedPath(null), 2e3);
+    });
+  }, []);
+  const highlightMatch = (text2, match) => {
+    if (!match) return text2;
+    const escapedMatch = match.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const regex = new RegExp(`(${escapedMatch})`, "gi");
+    const parts = text2.split(regex);
+    return parts.map(
+      (part, i) => regex.test(part) ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            backgroundColor: `${theme2.colors.primary}40`,
+            fontWeight: "bold"
+          },
+          children: part
+        },
+        i
+      ) : part
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { borderBottom: `1px solid ${theme2.colors.border}` }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { padding: "12px", paddingBottom: "8px", position: "relative" }, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              marginBottom: "4px",
+              fontSize: theme2.fontSizes[0],
+              color: theme2.colors.textSecondary,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between"
+            },
+            children: /* @__PURE__ */ jsx("span", { children: "Directory Filter" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: directoryInputRef,
+              type: "text",
+              value: directoryFilter,
+              onChange: (e) => {
+                setDirectoryFilter(e.target.value);
+                suppressDropdownRef.current = false;
+              },
+              onKeyDown: handleDirectoryKeyDown,
+              onFocus: () => setShowDirectoryDropdown(
+                directoryFilter.length > 0 && matchingDirectories.length > 0
+              ),
+              onBlur: () => {
+                setTimeout(() => {
+                  var _a;
+                  if (!((_a = directoryInputRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
+                    setShowDirectoryDropdown(false);
+                  }
+                }, 200);
+              },
+              placeholder: "Type to filter by directory path",
+              style: {
+                flex: 1,
+                padding: "8px 12px",
+                fontSize: theme2.fontSizes[1],
+                borderRadius: "4px",
+                border: `1px solid ${directoryFilter && showDirectoryDropdown ? theme2.colors.primary : theme2.colors.border}`,
+                backgroundColor: theme2.colors.backgroundSecondary || theme2.colors.background,
+                color: theme2.colors.text,
+                outline: "none"
+              }
+            }
+          ),
+          directoryFilter && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setExcludeDirectory(!excludeDirectory),
+              style: {
+                padding: "8px 12px",
+                fontSize: theme2.fontSizes[0],
+                fontWeight: 500,
+                borderRadius: "4px",
+                border: `1px solid ${excludeDirectory ? theme2.colors.primary : theme2.colors.border}`,
+                backgroundColor: excludeDirectory ? `${theme2.colors.primary}20` : theme2.colors.backgroundSecondary || theme2.colors.background,
+                color: excludeDirectory ? theme2.colors.text : theme2.colors.textSecondary,
+                cursor: "pointer"
+              },
+              title: excludeDirectory ? "Excluding files in this directory" : "Including only files in this directory",
+              children: excludeDirectory ? "Exclude" : "Include"
+            }
+          )
+        ] }),
+        showDirectoryDropdown && matchingDirectories.length > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              zIndex: 10,
+              width: "calc(100% - 24px)",
+              marginTop: "4px",
+              borderRadius: "4px",
+              border: `1px solid ${theme2.colors.primary}`,
+              backgroundColor: theme2.colors.background,
+              boxShadow: `0 4px 6px -1px ${theme2.colors.border}40`,
+              maxHeight: "256px",
+              overflowY: "auto"
+            },
+            children: matchingDirectories.map((dir, index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  padding: "8px 12px",
+                  cursor: "pointer",
+                  fontSize: theme2.fontSizes[1],
+                  backgroundColor: index === selectedDirectoryIndex ? `${theme2.colors.primary}20` : "transparent",
+                  color: index === selectedDirectoryIndex ? theme2.colors.text : theme2.colors.textSecondary
+                },
+                onMouseEnter: () => setSelectedDirectoryIndex(index),
+                onClick: () => {
+                  var _a;
+                  addDirectoryFilter(dir.path, excludeDirectory ? "exclude" : "include");
+                  setDirectoryFilter("");
+                  setShowDirectoryDropdown(false);
+                  (_a = directoryInputRef.current) == null ? void 0 : _a.focus();
+                },
+                children: dir.displayPath
+              },
+              dir.path
+            ))
+          }
+        ),
+        directoryFilters.length > 0 && /* @__PURE__ */ jsx("div", { style: { marginTop: "8px", display: "flex", flexWrap: "wrap", gap: "8px" }, children: directoryFilters.map((filter) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "4px",
+              padding: "4px 8px",
+              borderRadius: "4px",
+              fontSize: theme2.fontSizes[0],
+              backgroundColor: filter.mode === "include" ? `${theme2.colors.primary}20` : `${theme2.colors.error}20`,
+              border: `1px solid ${filter.mode === "include" ? theme2.colors.primary : theme2.colors.error}`,
+              color: theme2.colors.text
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  style: { cursor: "pointer" },
+                  onClick: () => toggleFilterMode(filter.id),
+                  title: "Click to toggle include/exclude",
+                  children: [
+                    filter.mode === "include" ? "✓" : "✗",
+                    " ",
+                    filter.path
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => removeDirectoryFilter(filter.id),
+                  style: {
+                    marginLeft: "4px",
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    color: theme2.colors.textSecondary,
+                    padding: 0,
+                    display: "flex",
+                    alignItems: "center"
+                  },
+                  title: "Remove filter",
+                  children: /* @__PURE__ */ jsx(X, { size: 12 })
+                }
+              )
+            ]
+          },
+          filter.id
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            padding: "12px",
+            paddingTop: "8px",
+            borderTop: `1px solid ${theme2.colors.border}40`
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: searchInputRef,
+                  type: "text",
+                  value: searchQuery,
+                  onChange: (e) => setSearchQuery(e.target.value),
+                  onKeyDown: handleSearchKeyDown,
+                  placeholder: "Search files...",
+                  style: {
+                    width: "100%",
+                    padding: "8px 12px",
+                    paddingRight: "36px",
+                    fontSize: theme2.fontSizes[1],
+                    borderRadius: "4px",
+                    border: `1px solid ${theme2.colors.border}`,
+                    backgroundColor: theme2.colors.backgroundSecondary || theme2.colors.background,
+                    color: theme2.colors.text,
+                    outline: "none",
+                    boxSizing: "border-box"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    right: "8px",
+                    top: "50%",
+                    transform: "translateY(-50%)"
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: theme2.colors.textSecondary,
+                      strokeWidth: "2",
+                      children: [
+                        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+                        /* @__PURE__ */ jsx("path", { d: "m21 21-4.35-4.35" })
+                      ]
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  marginTop: "4px",
+                  fontSize: theme2.fontSizes[0],
+                  color: theme2.colors.textSecondary
+                },
+                children: "Supports wildcards: *.tsx, test?.js"
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: searchResultsRef,
+        tabIndex: -1,
+        onKeyDown: handleSearchKeyDown,
+        onBlur: () => {
+          setTimeout(() => {
+            if (document.activeElement !== searchInputRef.current) {
+              setIsSearchResultsFocused(false);
+              setSelectedSearchIndex(-1);
+            }
+          }, 100);
+        },
+        style: { flex: 1, overflowY: "auto", outline: "none" },
+        children: isLoading ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: "40px 20px",
+              textAlign: "center",
+              color: theme2.colors.textSecondary
+            },
+            children: "Loading file tree..."
+          }
+        ) : !searchQuery && searchResults.length === 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "32px"
+            },
+            children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", maxWidth: "320px" }, children: [
+              /* @__PURE__ */ jsx("div", { style: { marginBottom: "24px", position: "relative", display: "inline-block" }, children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  width: "64",
+                  height: "64",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  style: { color: theme2.colors.primary, opacity: 0.8 },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: "11",
+                        cy: "11",
+                        r: "8",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeDasharray: "4 2"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "path",
                       {
-                        onClick: () => setShowInfoModal(true),
-                        style: {
-                          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 ${theme2.colors.border}`,
-                          backgroundColor: theme2.colors.backgroundSecondary,
-                          color: theme2.colors.primary,
-                          cursor: "pointer",
-                          display: "flex",
-                          alignItems: "center",
-                          gap: `${theme2.space[1]}px`,
-                          transition: "all 0.2s"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx(CircleQuestionMark, { size: 12 }),
-                          "Learn More"
-                        ]
+                        d: "m21 21-4.35-4.35",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round"
                       }
                     )
                   ]
                 }
-              ),
-              packages.length > 1 && /* @__PURE__ */ jsx(
-                "select",
+              ) }),
+              /* @__PURE__ */ jsx(
+                "h3",
                 {
-                  value: effectiveSelectedPath ?? "__none__",
-                  onChange: (e) => setSelectedPackagePath(e.target.value === "__none__" ? null : e.target.value),
                   style: {
-                    width: "100%",
-                    padding: `${theme2.space[2]}px`,
-                    borderRadius: `${theme2.radii[1]}px`,
-                    border: `1px solid ${theme2.colors.border}`,
-                    backgroundColor: theme2.colors.backgroundSecondary,
-                    color: theme2.colors.text,
-                    fontSize: `${theme2.fontSizes[1]}px`,
-                    fontFamily: theme2.fonts.body,
-                    cursor: "pointer"
+                    fontSize: theme2.fontSizes[3],
+                    fontWeight: 600,
+                    marginBottom: "8px",
+                    color: theme2.colors.text
                   },
-                  children: packages.map((pkg) => /* @__PURE__ */ jsxs("option", { value: pkg.packageData.path, children: [
-                    pkg.packageData.name,
-                    " (",
-                    pkg.packageData.path || "root",
-                    ")"
-                  ] }, pkg.packageData.path || "__root__"))
+                  children: "Search files"
                 }
               ),
-              packages.length === 1 && selectedPackage && /* @__PURE__ */ jsxs(
-                "div",
+              /* @__PURE__ */ jsx(
+                "p",
                 {
                   style: {
-                    fontSize: `${theme2.fontSizes[0]}px`,
+                    fontSize: theme2.fontSizes[1],
+                    marginBottom: "16px",
                     color: theme2.colors.textSecondary
                   },
-                  children: [
-                    selectedPackage.packageData.name,
-                    " • ",
-                    dependencyItems.length,
-                    " dependencies"
-                  ]
+                  children: "Search through filenames to find what you need"
                 }
               ),
-              selectedPackage && dependencyItems.length > 0 && /* @__PURE__ */ jsx(
-                FilterBar,
-                {
-                  activeFilters,
-                  onToggleFilter: handleToggleFilter,
-                  searchQuery,
-                  onSearchChange: setSearchQuery,
-                  counts
-                }
-              )
-            ]
+              /* @__PURE__ */ jsxs("div", { style: { textAlign: "left" }, children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "8px", marginBottom: "8px" }, children: [
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: theme2.fontSizes[0], color: theme2.colors.primary }, children: "💡" }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("div", { style: { fontSize: theme2.fontSizes[0], fontWeight: 500, color: theme2.colors.text }, children: "Quick search" }),
+                    /* @__PURE__ */ jsx("div", { style: { fontSize: theme2.fontSizes[0], color: theme2.colors.textSecondary }, children: "Type to instantly filter by filename" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "8px" }, children: [
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: theme2.fontSizes[0], color: theme2.colors.primary }, children: "📁" }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("div", { style: { fontSize: theme2.fontSizes[0], fontWeight: 500, color: theme2.colors.text }, children: "Filter by directory" }),
+                    /* @__PURE__ */ jsx("div", { style: { fontSize: theme2.fontSizes[0], color: theme2.colors.textSecondary }, children: "Use the directory filter to narrow your search" })
+                  ] })
+                ] })
+              ] })
+            ] })
           }
-        ),
-        selectedPackage && dependencyItems.length > 0 && /* @__PURE__ */ jsxs(
+        ) : searchQuery && searchResults.length === 0 ? /* @__PURE__ */ jsx(
           "div",
           {
             style: {
-              flex: 1,
-              overflow: "auto",
-              padding: `${theme2.space[2]}px ${theme2.space[3]}px ${theme2.space[3]}px`
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "32px"
             },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
+            children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", maxWidth: "320px" }, children: [
+              /* @__PURE__ */ jsx("div", { style: { marginBottom: "16px" }, children: /* @__PURE__ */ jsxs(
+                "svg",
                 {
-                  style: {
-                    fontSize: `${theme2.fontSizes[0]}px`,
-                    color: theme2.colors.textSecondary,
-                    marginBottom: `${theme2.space[2]}px`
-                  },
+                  width: "64",
+                  height: "64",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  style: { color: theme2.colors.textSecondary, opacity: 0.5 },
                   children: [
-                    "Showing ",
-                    filteredDependencies.length,
-                    " of ",
-                    dependencyItems.length,
-                    " dependencies"
+                    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
+                    /* @__PURE__ */ jsx("path", { d: "m21 21-4.35-4.35", stroke: "currentColor", strokeWidth: "2" }),
+                    /* @__PURE__ */ jsx("path", { d: "M8 11h6M11 8v6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
                   ]
                 }
-              ),
+              ) }),
               /* @__PURE__ */ jsx(
-                "div",
+                "h3",
                 {
                   style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: `${theme2.space[1]}px`
+                    fontSize: theme2.fontSizes[2],
+                    fontWeight: 500,
+                    marginBottom: "8px",
+                    color: theme2.colors.text
                   },
-                  children: filteredDependencies.length === 0 ? /* @__PURE__ */ jsx(
-                    "div",
+                  children: "No results found"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "p",
+                {
+                  style: {
+                    fontSize: theme2.fontSizes[1],
+                    color: theme2.colors.textSecondary
+                  },
+                  children: [
+                    "No files match",
+                    " ",
+                    /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace", color: theme2.colors.primary }, children: [
+                      '"',
+                      searchQuery,
+                      '"'
+                    ] })
+                  ]
+                }
+              )
+            ] })
+          }
+        ) : /* @__PURE__ */ jsx("div", { children: searchResults.map((result, index) => {
+          const isCurrentFile = selectedFile === result.path || selectedFile === result.relativePath;
+          const isSelected = isSearchResultsFocused && index === selectedSearchIndex;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "search-result-item",
+              style: {
+                padding: "8px 12px",
+                cursor: "pointer",
+                backgroundColor: isSelected ? `${theme2.colors.primary}25` : isCurrentFile ? `${theme2.colors.primary}15` : "transparent",
+                borderLeft: isCurrentFile ? `3px solid ${theme2.colors.primary}` : isSelected ? `3px solid ${theme2.colors.primary}80` : "3px solid transparent",
+                borderBottom: `1px solid ${theme2.colors.border}20`,
+                transition: "background-color 0.15s"
+              },
+              onClick: () => onFileSelect == null ? void 0 : onFileSelect(result.relativePath),
+              onMouseEnter: () => {
+                if (isSearchResultsFocused) {
+                  setSelectedSearchIndex(index);
+                }
+                onSearchResultHover == null ? void 0 : onSearchResultHover(result.relativePath);
+              },
+              onMouseLeave: () => onSearchResultHover == null ? void 0 : onSearchResultHover(null),
+              children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "8px" }, children: [
+                /* @__PURE__ */ jsx("div", { style: { flexShrink: 0, marginTop: "2px" }, children: /* @__PURE__ */ jsx(FileText, { size: 14, color: theme2.colors.textSecondary }) }),
+                /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px" }, children: [
+                  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            fontSize: theme2.fontSizes[1],
+                            fontWeight: 500,
+                            color: theme2.colors.text
+                          },
+                          children: highlightMatch(result.name, searchQuery)
+                        }
+                      ),
+                      isCurrentFile && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: "10px",
+                            padding: "2px 6px",
+                            borderRadius: "4px",
+                            backgroundColor: `${theme2.colors.primary}20`,
+                            color: theme2.colors.primary
+                          },
+                          children: "CURRENT"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: theme2.fontSizes[0],
+                          marginTop: "2px",
+                          color: theme2.colors.textSecondary,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: result.relativePath
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "button",
                     {
                       style: {
-                        padding: `${theme2.space[3]}px`,
-                        textAlign: "center",
-                        color: theme2.colors.textSecondary,
-                        fontSize: `${theme2.fontSizes[1]}px`
+                        flexShrink: 0,
+                        padding: "4px",
+                        borderRadius: "4px",
+                        border: `1px solid ${copiedPath === result.path ? theme2.colors.success : theme2.colors.border}`,
+                        backgroundColor: copiedPath === result.path ? `${theme2.colors.success}20` : theme2.colors.backgroundSecondary || theme2.colors.background,
+                        color: copiedPath === result.path ? theme2.colors.success : theme2.colors.textSecondary,
+                        cursor: "pointer",
+                        opacity: isSelected || isCurrentFile ? 0.7 : 0,
+                        transition: "opacity 0.15s"
                       },
-                      children: "No dependencies match your filters"
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.opacity = "1";
+                      },
+                      onMouseLeave: (e) => {
+                        if (!isSelected && !isCurrentFile && copiedPath !== result.path) {
+                          e.currentTarget.style.opacity = "0";
+                        }
+                      },
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleCopyPath(result.path);
+                      },
+                      title: copiedPath === result.path ? "Copied!" : "Copy full path",
+                      children: copiedPath === result.path ? /* @__PURE__ */ jsx(Check, { size: 14 }) : /* @__PURE__ */ jsx(Copy, { size: 14 })
                     }
-                  ) : filteredDependencies.map((dep) => /* @__PURE__ */ jsx(
-                    DependencyRow,
-                    {
-                      dependency: dep
-                    },
-                    `${dep.name}-${dep.dependencyType}`
-                  ))
-                }
-              )
-            ]
-          }
-        ),
-        !selectedPackage && packages.length > 1 && /* @__PURE__ */ jsx(
+                  )
+                ] }) })
+              ] })
+            },
+            `${result.path}-${index}`
+          );
+        }) })
+      }
+    ),
+    searchQuery && searchResults.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          padding: "8px 12px",
+          borderTop: `1px solid ${theme2.colors.border}`,
+          fontSize: theme2.fontSizes[0],
+          color: theme2.colors.textSecondary,
+          backgroundColor: theme2.colors.backgroundSecondary || theme2.colors.background
+        },
+        children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Found ",
+            searchResults.length,
+            " result",
+            searchResults.length !== 1 ? "s" : "",
+            ' for "',
+            searchQuery,
+            '"'
+          ] }),
+          directoryFilters.length > 0 && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                padding: "2px 6px",
+                borderRadius: "4px",
+                backgroundColor: `${theme2.colors.primary}20`,
+                color: theme2.colors.textSecondary
+              },
+              children: [
+                directoryFilters.length,
+                " filter",
+                directoryFilters.length !== 1 ? "s" : ""
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
+const SearchPanelPreview = () => {
+  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__ */ jsx(
           "div",
           {
             style: {
-              flex: 1,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
+              padding: "6px 8px",
+              borderRadius: "4px",
+              backgroundColor: theme2.colors.backgroundSecondary,
+              border: `1px solid ${theme2.colors.border}`,
               color: theme2.colors.textSecondary,
-              fontSize: `${theme2.fontSizes[1]}px`
+              fontSize: "11px"
             },
-            children: "Select a package to view its dependencies"
+            children: "Search files..."
           }
         ),
-        /* @__PURE__ */ jsx(
-          DependencyInfoModal,
-          {
-            isOpen: showInfoModal,
-            onClose: () => setShowInfoModal(false)
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", opacity: 0.7 }, children: [
+          /* @__PURE__ */ jsx(FileText, { size: 12 }),
+          /* @__PURE__ */ jsx("span", { children: "index.tsx" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", opacity: 0.7 }, children: [
+          /* @__PURE__ */ jsx(FileText, { size: 12 }),
+          /* @__PURE__ */ jsx("span", { children: "utils.ts" })
+        ] })
       ]
     }
   );
 };
-const DependenciesPanel = (props) => {
-  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(DependenciesPanelContent, { ...props }) });
+const SearchPanel = ({ context }) => {
+  var _a;
+  const fileTreeSlice = context.getSlice("fileTree");
+  const fileTree = (fileTreeSlice == null ? void 0 : fileTreeSlice.data) ?? null;
+  const isLoading = (fileTreeSlice == null ? void 0 : fileTreeSlice.loading) || false;
+  const rootPath = context.currentScope.type === "repository" ? (_a = context.currentScope.repository) == null ? void 0 : _a.path : void 0;
+  return /* @__PURE__ */ jsx(
+    SearchPanelContent,
+    {
+      fileTree,
+      baseDirectory: rootPath,
+      isLoading
+    }
+  );
 };
 const panels = [
   {
@@ -9894,6 +11898,27 @@ const panels = [
     onUnmount: async (_context) => {
       console.log("Dependencies Panel unmounting");
     }
+  },
+  {
+    metadata: {
+      id: "industry-theme.search",
+      name: "Search",
+      icon: "Search",
+      version: "0.1.0",
+      author: "Industry Theme",
+      description: "Search files in the repository by filename",
+      slices: ["fileTree"]
+    },
+    component: SearchPanel,
+    onMount: async (context) => {
+      console.log("Search Panel mounted");
+      if (context.hasSlice("fileTree") && !context.isSliceLoading("fileTree")) {
+        await context.refresh("repository", "fileTree");
+      }
+    },
+    onUnmount: async (_context) => {
+      console.log("Search Panel unmounting");
+    }
   }
 ];
 const onPackageLoad = async () => {
@@ -9910,6 +11935,9 @@ export {
   PackageCompositionPanel,
   PackageCompositionPanelContent,
   PackageCompositionPanelPreview,
+  SearchPanel,
+  SearchPanelContent,
+  SearchPanelPreview,
   onPackageLoad,
   onPackageUnload,
   panels