@industry-theme/repository-composition-panels 0.2.0 → 0.2.2

package/dist/panels.bundle.js

@@ -1,5 +1,157 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React2, { createContext, useContext, forwardRef, createElement, useRef, useEffect, memo, PureComponent, isValidElement, cloneElement, useLayoutEffect, useMemo, useState, useCallback, useImperativeHandle } from "react";
+import React2, { createContext, useState, useEffect, useContext, forwardRef, createElement, useRef, memo, PureComponent, isValidElement, cloneElement, useLayoutEffect, useMemo, useCallback, useImperativeHandle } from "react";
+var terminalTheme = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fonts: {
+    body: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
+    heading: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
+    monospace: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace'
+  },
+  fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+  fontScale: 1,
+  fontWeights: {
+    body: 400,
+    heading: 500,
+    bold: 600,
+    light: 300,
+    medium: 500,
+    semibold: 600
+  },
+  lineHeights: {
+    body: 1.6,
+    heading: 1.3,
+    tight: 1.4,
+    relaxed: 1.8
+  },
+  breakpoints: ["640px", "768px", "1024px", "1280px"],
+  sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+  radii: [0, 2, 4, 6, 8, 12, 16, 24],
+  shadows: [
+    "none",
+    "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    "0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+    "0 4px 6px 0 rgba(0, 0, 0, 0.07)",
+    "0 8px 12px 0 rgba(0, 0, 0, 0.08)",
+    "0 16px 24px 0 rgba(0, 0, 0, 0.10)"
+  ],
+  zIndices: [0, 1, 10, 20, 30, 40, 50],
+  colors: {
+    text: "#e4e4e4",
+    background: "rgba(10, 10, 10, 0.85)",
+    primary: "#66b3ff",
+    secondary: "#80c4ff",
+    accent: "#66ff99",
+    highlight: "rgba(102, 179, 255, 0.15)",
+    muted: "rgba(26, 26, 26, 0.8)",
+    success: "#66ff99",
+    warning: "#ffcc66",
+    error: "#ff6666",
+    info: "#66b3ff",
+    border: "rgba(255, 255, 255, 0.1)",
+    backgroundSecondary: "rgba(15, 15, 15, 0.9)",
+    backgroundTertiary: "rgba(20, 20, 20, 0.9)",
+    backgroundLight: "rgba(255, 255, 255, 0.05)",
+    backgroundHover: "rgba(102, 179, 255, 0.08)",
+    surface: "rgba(15, 15, 15, 0.95)",
+    textSecondary: "rgba(255, 255, 255, 0.7)",
+    textTertiary: "rgba(255, 255, 255, 0.5)",
+    textMuted: "rgba(255, 255, 255, 0.4)",
+    highlightBg: "rgba(255, 235, 59, 0.25)",
+    highlightBorder: "rgba(255, 235, 59, 0.5)"
+  },
+  modes: {
+    light: {
+      text: "#1a1a1a",
+      background: "rgba(255, 255, 255, 0.9)",
+      primary: "#0066cc",
+      secondary: "#0052a3",
+      accent: "#00cc88",
+      highlight: "rgba(0, 102, 204, 0.08)",
+      muted: "rgba(245, 245, 245, 0.8)",
+      success: "#00cc88",
+      warning: "#ffaa00",
+      error: "#ff3333",
+      info: "#0066cc",
+      border: "rgba(0, 0, 0, 0.1)",
+      backgroundSecondary: "rgba(250, 250, 250, 0.9)",
+      backgroundTertiary: "rgba(245, 245, 245, 0.9)",
+      backgroundLight: "rgba(0, 0, 0, 0.02)",
+      backgroundHover: "rgba(0, 102, 204, 0.04)",
+      surface: "rgba(255, 255, 255, 0.95)",
+      textSecondary: "rgba(0, 0, 0, 0.6)",
+      textTertiary: "rgba(0, 0, 0, 0.4)",
+      textMuted: "rgba(0, 0, 0, 0.3)",
+      highlightBg: "rgba(255, 235, 59, 0.3)",
+      highlightBorder: "rgba(255, 235, 59, 0.6)"
+    }
+  },
+  buttons: {
+    primary: {
+      color: "white",
+      bg: "primary",
+      borderWidth: 0,
+      "&:hover": {
+        bg: "secondary"
+      }
+    },
+    secondary: {
+      color: "primary",
+      bg: "transparent",
+      borderWidth: 1,
+      borderStyle: "solid",
+      borderColor: "primary",
+      "&:hover": {
+        bg: "highlight"
+      }
+    },
+    ghost: {
+      color: "text",
+      bg: "transparent",
+      "&:hover": {
+        bg: "backgroundHover"
+      }
+    }
+  },
+  text: {
+    heading: {
+      fontFamily: "heading",
+      fontWeight: "heading",
+      lineHeight: "heading"
+    },
+    body: {
+      fontFamily: "body",
+      fontWeight: "body",
+      lineHeight: "body"
+    },
+    caption: {
+      fontSize: 1,
+      color: "textSecondary"
+    }
+  },
+  cards: {
+    primary: {
+      bg: "surface",
+      border: "1px solid",
+      borderColor: "border",
+      borderRadius: 1
+    },
+    secondary: {
+      bg: "backgroundSecondary",
+      border: "1px solid",
+      borderColor: "border",
+      borderRadius: 1
+    }
+  }
+};
+function getMode(theme2, mode) {
+  if (!mode || !theme2.modes || !theme2.modes[mode]) {
+    return theme2.colors;
+  }
+  return {
+    ...theme2.colors,
+    ...theme2.modes[mode]
+  };
+}
 var ThemeContext;
 var getThemeContext = () => {
   if (typeof window !== "undefined") {
@@ -23,6 +175,46 @@ var useTheme = () => {
   }
   return context;
 };
+var ThemeProvider = ({
+  children,
+  theme: customTheme = theme,
+  initialMode
+}) => {
+  const [mode, setMode] = useState(initialMode);
+  const activeTheme = React2.useMemo(() => {
+    if (!mode || !customTheme.modes || !customTheme.modes[mode]) {
+      return customTheme;
+    }
+    return {
+      ...customTheme,
+      colors: getMode(customTheme, mode)
+    };
+  }, [customTheme, mode]);
+  useEffect(() => {
+    if (!initialMode) {
+      const savedMode = localStorage.getItem("principlemd-theme-mode");
+      if (savedMode) {
+        setMode(savedMode);
+      }
+    }
+  }, [initialMode]);
+  useEffect(() => {
+    if (mode) {
+      localStorage.setItem("principlemd-theme-mode", mode);
+    } else {
+      localStorage.removeItem("principlemd-theme-mode");
+    }
+  }, [mode]);
+  const value = {
+    theme: activeTheme,
+    mode,
+    setMode
+  };
+  return /* @__PURE__ */ React2.createElement(ThemeContextSingleton.Provider, {
+    value
+  }, children);
+};
+var theme = terminalTheme;
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -128,35 +320,136 @@ 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$7 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$7);
+const __iconNode$k = [
+  [
+    "path",
+    {
+      d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z",
+      key: "lc1i9w"
+    }
+  ],
+  ["path", { d: "m7 16.5-4.74-2.85", key: "1o9zyk" }],
+  ["path", { d: "m7 16.5 5-3", key: "va8pkn" }],
+  ["path", { d: "M7 16.5v5.17", key: "jnp8gn" }],
+  [
+    "path",
+    {
+      d: "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z",
+      key: "8zsnat"
+    }
+  ],
+  ["path", { d: "m17 16.5-5-3", key: "8arw3v" }],
+  ["path", { d: "m17 16.5 4.74-2.85", key: "8rfmw" }],
+  ["path", { d: "M17 16.5v5.17", key: "k6z78m" }],
+  [
+    "path",
+    {
+      d: "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z",
+      key: "1xygjf"
+    }
+  ],
+  ["path", { d: "M12 8 7.26 5.15", key: "1vbdud" }],
+  ["path", { d: "m12 8 4.74-2.85", key: "3rx089" }],
+  ["path", { d: "M12 13.5V8", key: "1io7kd" }]
+];
+const Boxes = createLucideIcon("boxes", __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$6 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$6);
+const __iconNode$j = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __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$5 = [
+const __iconNode$i = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __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$h = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __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$g = [
   ["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$5);
+const CircleAlert = createLucideIcon("circle-alert", __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$4 = [
+const __iconNode$f = [
+  ["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);
+/**
+ * @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 = [
+  ["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);
+/**
+ * @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 = [
+  ["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);
+/**
+ * @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",
+    {
+      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 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);
+/**
+ * @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 = [
   [
     "path",
     {
@@ -167,46 +460,123 @@ const __iconNode$4 = [
   ["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$4);
+const FileQuestionMark = createLucideIcon("file-question-mark", __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$3 = [
+const __iconNode$a = [
+  [
+    "path",
+    {
+      d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",
+      key: "1kt360"
+    }
+  ]
+];
+const Folder = createLucideIcon("folder", __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 = [
   ["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$3);
+const GitBranch = createLucideIcon("git-branch", __iconNode$9);
 /**
  * @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$2 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-const Minus = createLucideIcon("minus", __iconNode$2);
+const __iconNode$8 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$8);
 /**
  * @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$1 = [
+const __iconNode$7 = [
+  [
+    "path",
+    {
+      d: "M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 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.73z",
+      key: "1a0edw"
+    }
+  ],
+  ["path", { d: "M12 22V12", key: "d0xqtd" }],
+  ["polyline", { points: "3.29 7 12 12 20.71 7", key: "ousv84" }],
+  ["path", { d: "m7.5 4.27 9 5.15", key: "1c824w" }]
+];
+const Package = createLucideIcon("package", __iconNode$7);
+/**
+ * @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$6 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$1);
+const Plus = createLucideIcon("plus", __iconNode$6);
 /**
  * @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 = [
+const __iconNode$5 = [
+  ["path", { d: "m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z", key: "7g6ntu" }],
+  ["path", { d: "m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z", key: "ijws7r" }],
+  ["path", { d: "M7 21h10", key: "1b0cd5" }],
+  ["path", { d: "M12 3v18", key: "108xh3" }],
+  ["path", { d: "M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2", key: "3gwbw2" }]
+];
+const Scale = createLucideIcon("scale", __iconNode$5);
+/**
+ * @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$4 = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+];
+const Search = createLucideIcon("search", __iconNode$4);
+/**
+ * @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$3 = [
+  [
+    "path",
+    {
+      d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915",
+      key: "1i5ecw"
+    }
+  ],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+];
+const Settings = createLucideIcon("settings", __iconNode$3);
+/**
+ * @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$2 = [
   ["path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7", key: "1m0v6g" }],
   [
     "path",
@@ -216,7 +586,29 @@ const __iconNode = [
     }
   ]
 ];
-const SquarePen = createLucideIcon("square-pen", __iconNode);
+const SquarePen = createLucideIcon("square-pen", __iconNode$2);
+/**
+ * @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$1 = [
+  ["path", { d: "M12 19h8", key: "baeox8" }],
+  ["path", { d: "m4 17 6-6-6-6", key: "1yngyt" }]
+];
+const Terminal = createLucideIcon("terminal", __iconNode$1);
+/**
+ * @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 = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("x", __iconNode);
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -7404,7 +7796,7 @@ function TreeNode({
   node,
   style,
   dragHandle,
-  theme,
+  theme: theme2,
   rightContent,
   extraContent,
   isSelectedDirectory = false,
@@ -7418,14 +7810,14 @@ function TreeNode({
     style: { marginRight: "4px", display: "flex", alignItems: "center" }
   }, node.isOpen ? /* @__PURE__ */ React2.createElement(ChevronDown, {
     size: 16,
-    color: theme.colors.text
+    color: theme2.colors.text
   }) : /* @__PURE__ */ React2.createElement(ChevronRight, {
     size: 16,
-    color: theme.colors.text
+    color: theme2.colors.text
   })) : null;
-  const backgroundColor = node.isSelected ? `${theme.colors.primary}20` : isSelectedDirectory ? `${theme.colors.primary}15` : isHovered ? `${theme.colors.text}10` : "transparent";
-  const border = node.isSelected ? `1px solid ${theme.colors.primary}` : "1px solid transparent";
-  const color = nameColor ? nameColor : node.isSelected || isSelectedDirectory ? theme.colors.primary : theme.colors.text;
+  const backgroundColor = node.isSelected ? `${theme2.colors.primary}20` : isSelectedDirectory ? `${theme2.colors.primary}15` : isHovered ? `${theme2.colors.text}10` : "transparent";
+  const border = node.isSelected ? `1px solid ${theme2.colors.primary}` : "1px solid transparent";
+  const color = nameColor ? nameColor : node.isSelected || isSelectedDirectory ? theme2.colors.primary : theme2.colors.text;
   return /* @__PURE__ */ React2.createElement("div", {
     style: {
       ...style,
@@ -7467,7 +7859,7 @@ function TreeNode({
     style: { flexShrink: 0 }
   }, rightContent));
 }
-var getGitStatusDisplay2 = (status, theme) => {
+var getGitStatusDisplay2 = (status, theme2) => {
   switch (status) {
     case "M":
     case "MM":
@@ -7475,7 +7867,7 @@ var getGitStatusDisplay2 = (status, theme) => {
         icon: /* @__PURE__ */ React2.createElement(SquarePen, {
           size: 14
         }),
-        color: theme.colors.primary || "#007bff",
+        color: theme2.colors.primary || "#007bff",
         label: "Modified"
       };
     case "A":
@@ -7600,7 +7992,7 @@ var countVisibleNodes2 = (nodes, openByDefault) => {
 };
 var GitStatusFileTree = ({
   fileTree,
-  theme,
+  theme: theme2,
   gitStatusData,
   selectedDirectories = [],
   selectedFile,
@@ -7623,12 +8015,12 @@ var GitStatusFileTree = ({
   }, [gitStatusData]);
   const NodeRenderer = (props) => {
     const { node } = props;
-    const gitDisplay = node.data.gitStatus ? getGitStatusDisplay2(node.data.gitStatus, theme) : null;
+    const gitDisplay = node.data.gitStatus ? getGitStatusDisplay2(node.data.gitStatus, theme2) : null;
     let nameColor;
     if (gitDisplay) {
       nameColor = gitDisplay.color;
     } else if (node.data.hasChangedChildren) {
-      const baseColor = theme.colors.primary || "#007bff";
+      const baseColor = theme2.colors.primary || "#007bff";
       nameColor = baseColor + "80";
     }
     const rightContent = gitDisplay ? /* @__PURE__ */ React2.createElement("div", {
@@ -7648,7 +8040,7 @@ var GitStatusFileTree = ({
     }, node.data.gitStatus)) : null;
     return /* @__PURE__ */ React2.createElement(TreeNode, {
       ...props,
-      theme,
+      theme: theme2,
       rightContent,
       nameColor,
       horizontalNodePadding,
@@ -7689,9 +8081,9 @@ var GitStatusFileTree = ({
   return /* @__PURE__ */ React2.createElement("div", {
     ref: containerRef,
     style: {
-      backgroundColor: transparentBackground ? "transparent" : theme.colors.background,
-      color: theme.colors.text,
-      fontFamily: theme.fonts.body,
+      backgroundColor: transparentBackground ? "transparent" : theme2.colors.background,
+      color: theme2.colors.text,
+      fontFamily: theme2.fonts.body,
       ...autoHeight ? {} : { height: "100%" }
     }
   }, /* @__PURE__ */ React2.createElement(Tree, {
@@ -7706,11 +8098,11 @@ var GitStatusFileTree = ({
 };
 class _ {
   static buildTreeFromPaths(j, k = "") {
-    let q = k.endsWith("/") ? k.slice(0, -1) : k, E = /* @__PURE__ */ new Map(), J = [], O = [], X = /* @__PURE__ */ new Set();
+    let q = k.endsWith("/") ? k.slice(0, -1) : k, E = /* @__PURE__ */ new Map(), J = [], O = [], X2 = /* @__PURE__ */ new Set();
     j.forEach((K) => {
       let Q = K.split("/");
-      for (let W = 1; W < Q.length; W++) X.add(Q.slice(0, W).join("/"));
-    }), Array.from(X).forEach((K) => {
+      for (let W = 1; W < Q.length; W++) X2.add(Q.slice(0, W).join("/"));
+    }), Array.from(X2).forEach((K) => {
       let Q = K.split("/"), W = Q[Q.length - 1] || "", Y = Q.length - 1, M = { path: K, name: W, children: [], fileCount: 0, totalSize: 0, depth: Y, relativePath: this.calculateRelativePath(K, q) };
       E.set(K, M), O.push(M);
     }), j.forEach((K) => {
@@ -7718,7 +8110,7 @@ class _ {
       J.push(A);
       let H = E.get(M);
       if (H && "children" in H) H.children.push(A), H.fileCount++;
-    }), Array.from(X).sort((K, Q) => Q.length - K.length).forEach((K) => {
+    }), Array.from(X2).sort((K, Q) => Q.length - K.length).forEach((K) => {
       let Q = K.split("/");
       if (Q.length > 1) {
         let W = Q.slice(0, -1).join("/"), Y = E.get(W), M = E.get(K);
@@ -7750,12 +8142,12 @@ class _ {
         if (W && Y) W.children.push(Y), W.fileCount += Y.fileCount, W.totalSize += Y.totalSize;
       }
     });
-    let X = q ? q.split("/").pop() || "root" : "root", $ = [];
+    let X2 = q ? q.split("/").pop() || "root" : "root", $ = [];
     return J.forEach((V) => {
       if (V.path.split("/").length === 1) $.push(V);
     }), j.forEach((V) => {
       if (V.path.split("/").length === 1) $.push(V);
-    }), { root: { path: q || ".", name: X, children: $, fileCount: j.length, totalSize: j.reduce((V, K) => V + (K.size || 0), 0), depth: 0, relativePath: "" }, allFiles: j, allDirectories: J };
+    }), { root: { path: q || ".", name: X2, children: $, fileCount: j.length, totalSize: j.reduce((V, K) => V + (K.size || 0), 0), depth: 0, relativePath: "" }, allFiles: j, allDirectories: J };
   }
   static calculateStats(j, k) {
     return { totalFiles: j.length, totalDirectories: k.length, totalSize: j.reduce((q, E) => q + (E.size || 0), 0), maxDepth: this.calculateMaxDepth(k) };
@@ -7811,8 +8203,8 @@ class G {
 }
 class N extends G {
   build(j) {
-    let { files: k, rootPath: q = "" } = j, { root: E, allFiles: J, allDirectories: O } = _.buildTreeFromPaths(k, q), X = _.calculateStats(J, O);
-    return { sha: this.calculateSha(j), metadata: this.generateMetadata(j), root: E, allFiles: J, allDirectories: O, stats: X };
+    let { files: k, rootPath: q = "" } = j, { root: E, allFiles: J, allDirectories: O } = _.buildTreeFromPaths(k, q), X2 = _.calculateStats(J, O);
+    return { sha: this.calculateSha(j), metadata: this.generateMetadata(j), root: E, allFiles: J, allDirectories: O, stats: X2 };
   }
   generateMetadata(j) {
     let { files: k, rootPath: q = "" } = j, E = this.calculateSha(j);
@@ -7832,7 +8224,7 @@ const GitChangesPanelContent = ({
   loadingMessage = "Loading git changes...",
   selectedFile
 }) => {
-  const { theme } = useTheme();
+  const { theme: theme2 } = useTheme();
   const hasChanges = gitStatus.staged.length > 0 || gitStatus.unstaged.length > 0 || gitStatus.untracked.length > 0 || gitStatus.deleted.length > 0;
   const [showFullTree, setShowFullTree] = useState(false);
   const userHasToggledView = useRef(false);
@@ -7938,7 +8330,7 @@ const GitChangesPanelContent = ({
       style: {
         display: "flex",
         alignItems: "stretch",
-        backgroundColor: theme.colors.backgroundTertiary,
+        backgroundColor: theme2.colors.backgroundTertiary,
         width: "100%"
       },
       children: [
@@ -7952,10 +8344,10 @@ const GitChangesPanelContent = ({
             style: {
               flex: 1,
               padding: "6px 12px",
-              fontSize: theme.fontSizes[1],
-              backgroundColor: showFullTree ? theme.colors.backgroundSecondary : "transparent",
-              color: showFullTree ? theme.colors.text : theme.colors.textSecondary,
-              border: showFullTree ? `1px solid ${theme.colors.border}` : "1px solid transparent",
+              fontSize: theme2.fontSizes[1],
+              backgroundColor: showFullTree ? theme2.colors.backgroundSecondary : "transparent",
+              color: showFullTree ? theme2.colors.text : theme2.colors.textSecondary,
+              border: showFullTree ? `1px solid ${theme2.colors.border}` : "1px solid transparent",
               cursor: "pointer",
               fontWeight: showFullTree ? 600 : 400,
               transition: "all 0.2s"
@@ -7973,10 +8365,10 @@ const GitChangesPanelContent = ({
             style: {
               flex: 1,
               padding: "6px 12px",
-              fontSize: theme.fontSizes[1],
-              backgroundColor: !showFullTree ? theme.colors.backgroundSecondary : "transparent",
-              color: !showFullTree ? theme.colors.text : theme.colors.textSecondary,
-              border: !showFullTree ? `1px solid ${theme.colors.border}` : "1px solid transparent",
+              fontSize: theme2.fontSizes[1],
+              backgroundColor: !showFullTree ? theme2.colors.backgroundSecondary : "transparent",
+              color: !showFullTree ? theme2.colors.text : theme2.colors.textSecondary,
+              border: !showFullTree ? `1px solid ${theme2.colors.border}` : "1px solid transparent",
               cursor: "pointer",
               fontWeight: !showFullTree ? 600 : 400,
               transition: "all 0.2s"
@@ -7995,7 +8387,7 @@ const GitChangesPanelContent = ({
           style: {
             padding: "20px",
             textAlign: "center",
-            color: theme.colors.textSecondary
+            color: theme2.colors.textSecondary
           },
           children: loadingMessage
         }
@@ -8008,7 +8400,7 @@ const GitChangesPanelContent = ({
           style: {
             padding: "20px",
             textAlign: "center",
-            color: theme.colors.textSecondary
+            color: theme2.colors.textSecondary
           },
           children: emptyMessage
         }
@@ -8021,7 +8413,7 @@ const GitChangesPanelContent = ({
       GitStatusFileTree,
       {
         fileTree: gitChangesData.tree,
-        theme,
+        theme: theme2,
         gitStatusData: gitChangesData.statusData,
         onFileSelect: handleFileSelect,
         selectedFile,
@@ -8033,19 +8425,19 @@ const GitChangesPanelContent = ({
     );
   };
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsx("div", { style: { borderBottom: `1px solid ${theme.colors.border}` }, children: /* @__PURE__ */ jsx(ToggleButtons, {}) }),
+    /* @__PURE__ */ jsx("div", { style: { borderBottom: `1px solid ${theme2.colors.border}` }, children: /* @__PURE__ */ jsx(ToggleButtons, {}) }),
     /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ jsx(Content, {}) })
   ] });
 };
 const GitChangesPanelPreview = () => {
-  const { theme } = useTheme();
+  const { theme: theme2 } = useTheme();
   return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
         padding: "12px",
         fontSize: "12px",
-        color: theme.colors.text,
+        color: theme2.colors.text,
         display: "flex",
         flexDirection: "column",
         gap: "6px"
@@ -8123,6 +8515,1322 @@ const GitChangesPanel = ({ context }) => {
     }
   );
 };
+const PackageCard = ({
+  pkg,
+  isExpanded,
+  onToggle,
+  onCommandClick,
+  onConfigClick,
+  onPackageClick
+}) => {
+  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(
+    "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(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: () => 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
+            )) })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+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(
+    "h3",
+    {
+      style: {
+        fontSize: `${theme2.fontSizes[2]}px`,
+        fontWeight: theme2.fontWeights.semibold,
+        color: theme2.colors.text,
+        marginBottom: `${theme2.space[3]}px`,
+        display: "flex",
+        alignItems: "center",
+        gap: `${theme2.space[2]}px`
+      },
+      children: [
+        icon,
+        title
+      ]
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: `${theme2.space[2]}px`
+      },
+      children
+    }
+  )
+] });
+const InfoItem = ({ badge, title, description, theme: theme2 }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    style: {
+      padding: `${theme2.space[3]}px`,
+      backgroundColor: theme2.colors.backgroundSecondary,
+      borderRadius: `${theme2.radii[2]}px`,
+      border: `1px solid ${theme2.colors.border}`
+    },
+    children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: `${theme2.space[2]}px`,
+            marginBottom: `${theme2.space[1]}px`
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  padding: `${theme2.space[1]}px ${theme2.space[2]}px`,
+                  borderRadius: `${theme2.radii[1]}px`,
+                  fontSize: `${theme2.fontSizes[0]}px`,
+                  fontWeight: theme2.fontWeights.medium,
+                  backgroundColor: `${badge.color}20`,
+                  color: badge.color
+                },
+                children: badge.text
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: `${theme2.fontSizes[1]}px`,
+                  fontWeight: theme2.fontWeights.medium,
+                  color: theme2.colors.text
+                },
+                children: title
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            fontSize: `${theme2.fontSizes[1]}px`,
+            color: theme2.colors.textSecondary,
+            lineHeight: theme2.lineHeights.relaxed
+          },
+          children: description
+        }
+      )
+    ]
+  }
+);
+const DependencyRow = ({ dependency }) => {
+  const { theme: theme2 } = useTheme();
+  const [isHovered, setIsHovered] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const getDependencyTypeBadgeStyle = (type) => {
+    const baseStyle = {
+      padding: `${theme2.space[1]}px ${theme2.space[2]}px`,
+      borderRadius: `${theme2.radii[1]}px`,
+      fontSize: `${theme2.fontSizes[0]}px`,
+      fontWeight: theme2.fontWeights.medium,
+      minWidth: "36px",
+      textAlign: "center"
+    };
+    switch (type) {
+      case "production":
+        return {
+          ...baseStyle,
+          backgroundColor: `${theme2.colors.primary}20`,
+          color: theme2.colors.primary
+        };
+      case "development":
+        return {
+          ...baseStyle,
+          backgroundColor: `${theme2.colors.secondary}20`,
+          color: theme2.colors.secondary
+        };
+      case "peer":
+        return {
+          ...baseStyle,
+          backgroundColor: `${theme2.colors.accent}20`,
+          color: theme2.colors.accent
+        };
+      default:
+        return {
+          ...baseStyle,
+          backgroundColor: theme2.colors.backgroundLight,
+          color: theme2.colors.textSecondary
+        };
+    }
+  };
+  const handleCopy = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      const copyText = `${dependency.name}@${dependency.version}`;
+      await navigator.clipboard.writeText(copyText);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+  const actionButtonStyle = {
+    padding: `${theme2.space[1]}px`,
+    borderRadius: `${theme2.radii[1]}px`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: "none",
+    backgroundColor: "transparent",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    opacity: isHovered ? 1 : 0,
+    pointerEvents: isHovered ? "auto" : "none"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: `${theme2.space[2]}px ${theme2.space[3]}px`,
+        backgroundColor: theme2.colors.background,
+        borderRadius: `${theme2.radii[1]}px`,
+        fontSize: `${theme2.fontSizes[1]}px`,
+        border: `1px solid ${theme2.colors.border}`,
+        transition: "all 0.2s"
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: `${theme2.space[2]}px`,
+              flex: 1,
+              minWidth: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: getDependencyTypeBadgeStyle(dependency.dependencyType), children: dependency.dependencyType === "production" ? "prod" : dependency.dependencyType === "development" ? "dev" : "peer" }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontWeight: theme2.fontWeights.medium,
+                    color: theme2.colors.text,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: dependency.name
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: `https://www.npmjs.com/package/${dependency.name}`,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  style: {
+                    ...actionButtonStyle,
+                    color: theme2.colors.textSecondary,
+                    textDecoration: "none",
+                    flexShrink: 0
+                  },
+                  title: "View on npm",
+                  children: /* @__PURE__ */ jsx(ExternalLink, { size: 12 })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "4px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleCopy,
+                  style: {
+                    ...actionButtonStyle,
+                    color: copied ? theme2.colors.success || "#10b981" : theme2.colors.textSecondary
+                  },
+                  title: copied ? "Copied!" : `Copy ${dependency.name}@${dependency.version}`,
+                  children: copied ? /* @__PURE__ */ jsx(Check, { size: 12 }) : /* @__PURE__ */ jsx(Copy, { size: 12 })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textSecondary }, children: dependency.version })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const FilterBar = ({
+  activeFilters,
+  onToggleFilter,
+  searchQuery,
+  onSearchChange,
+  counts
+}) => {
+  const { theme: theme2 } = useTheme();
+  const availableFilters = [
+    ...counts.peer > 0 ? ["peer"] : [],
+    ...counts.production > 0 ? ["production"] : [],
+    ...counts.development > 0 ? ["development"] : []
+  ];
+  const showFilters = availableFilters.length > 1;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: `${theme2.space[2]}px`
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              display: "flex",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Search,
+                {
+                  size: 14,
+                  style: {
+                    position: "absolute",
+                    left: `${theme2.space[3]}px`,
+                    color: theme2.colors.textSecondary,
+                    pointerEvents: "none"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Search dependencies...",
+                  value: searchQuery,
+                  onChange: (e) => onSearchChange(e.target.value),
+                  style: {
+                    width: "100%",
+                    padding: `${theme2.space[2]}px ${theme2.space[5]}px`,
+                    borderRadius: `${theme2.radii[2]}px`,
+                    border: `1px solid ${theme2.colors.border}`,
+                    backgroundColor: theme2.colors.backgroundSecondary,
+                    color: theme2.colors.text,
+                    fontSize: `${theme2.fontSizes[1]}px`,
+                    fontFamily: theme2.fonts.body,
+                    outline: "none",
+                    transition: "all 0.2s"
+                  }
+                }
+              ),
+              searchQuery && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => onSearchChange(""),
+                  style: {
+                    position: "absolute",
+                    right: `${theme2.space[2]}px`,
+                    padding: `${theme2.space[1]}px`,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: "transparent",
+                    border: "none",
+                    cursor: "pointer",
+                    borderRadius: `${theme2.radii[1]}px`
+                  },
+                  title: "Clear search",
+                  children: /* @__PURE__ */ jsx(X, { size: 14, color: theme2.colors.textSecondary })
+                }
+              )
+            ]
+          }
+        ),
+        showFilters && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: `${theme2.space[1]}px`, width: "100%" }, children: availableFilters.map((type) => {
+          const isActive = activeFilters.has(type);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => onToggleFilter(type),
+              style: {
+                flex: 1,
+                padding: `${theme2.space[1]}px ${theme2.space[2]}px`,
+                fontSize: `${theme2.fontSizes[0]}px`,
+                fontWeight: theme2.fontWeights.medium,
+                fontFamily: theme2.fonts.body,
+                borderRadius: `${theme2.radii[1]}px`,
+                border: `1px solid ${isActive ? theme2.colors.primary : theme2.colors.border}`,
+                backgroundColor: isActive ? `${theme2.colors.primary}20` : theme2.colors.backgroundSecondary,
+                color: isActive ? theme2.colors.primary : theme2.colors.text,
+                cursor: "pointer",
+                transition: "all 0.2s"
+              },
+              children: [
+                type === "production" ? "Prod" : type === "development" ? "Dev" : "Peer",
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: { marginLeft: `${theme2.space[1]}px`, opacity: 0.7 },
+                    children: [
+                      "(",
+                      counts[type],
+                      ")"
+                    ]
+                  }
+                )
+              ]
+            },
+            type
+          );
+        }) })
+      ]
+    }
+  );
+};
+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,
+                                ")"
+                              ]
+                            }
+                          )
+                        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(Package, { size: 16 }),
+                          "Dependencies"
+                        ] })
+                      }
+                    ),
+                    /* @__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 }) });
+};
 const panels = [
   {
     metadata: {
@@ -8144,6 +9852,48 @@ const panels = [
     onUnmount: async (_context) => {
       console.log("Git Changes Panel unmounting");
     }
+  },
+  {
+    metadata: {
+      id: "industry-theme.package-composition",
+      name: "Package Composition",
+      icon: "Package",
+      version: "0.1.0",
+      author: "Industry Theme",
+      description: "View detected packages, dependencies, configs, and available commands",
+      slices: ["packages"]
+    },
+    component: PackageCompositionPanel,
+    onMount: async (context) => {
+      console.log("Package Composition Panel mounted");
+      if (context.hasSlice("packages") && !context.isSliceLoading("packages")) {
+        await context.refresh("repository", "packages");
+      }
+    },
+    onUnmount: async (_context) => {
+      console.log("Package Composition Panel unmounting");
+    }
+  },
+  {
+    metadata: {
+      id: "industry-theme.dependencies",
+      name: "Dependencies",
+      icon: "Package",
+      version: "0.1.0",
+      author: "Industry Theme",
+      description: "View and explore package dependencies",
+      slices: ["packages"]
+    },
+    component: DependenciesPanel,
+    onMount: async (context) => {
+      console.log("Dependencies Panel mounted");
+      if (context.hasSlice("packages") && !context.isSliceLoading("packages")) {
+        await context.refresh("repository", "packages");
+      }
+    },
+    onUnmount: async (_context) => {
+      console.log("Dependencies Panel unmounting");
+    }
   }
 ];
 const onPackageLoad = async () => {
@@ -8153,9 +9903,13 @@ const onPackageUnload = async () => {
   console.log("Repository Composition Panels package unloading");
 };
 export {
+  DependenciesPanel,
   GitChangesPanel,
   GitChangesPanelContent,
   GitChangesPanelPreview,
+  PackageCompositionPanel,
+  PackageCompositionPanelContent,
+  PackageCompositionPanelPreview,
   onPackageLoad,
   onPackageUnload,
   panels