@industry-theme/repository-composition-panels 0.6.24 → 0.6.26

package/dist/{index-DqpaKlrF.js → index-BwWx2Yhi.js}

@@ -151,28 +151,17 @@ const Activity$1 = createLucideIcon$1("activity", __iconNode$qk);
  * See the LICENSE file in the root directory of this source tree.
  */
 const __iconNode$qj = [
-  ["path", { d: "M5 12h14", key: "1ays0h" }],
-  ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
-];
-const ArrowRight$1 = createLucideIcon$1("arrow-right", __iconNode$qj);
-/**
- * @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$qi = [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
 ];
-const ArrowUp$1 = createLucideIcon$1("arrow-up", __iconNode$qi);
+const ArrowUp$1 = createLucideIcon$1("arrow-up", __iconNode$qj);
 /**
  * @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$qh = [
+const __iconNode$qi = [
   [
     "path",
     {
@@ -183,59 +172,70 @@ const __iconNode$qh = [
   ["path", { d: "m3.3 7 8.7 5 8.7-5", key: "g66t2b" }],
   ["path", { d: "M12 22V12", key: "d0xqtd" }]
 ];
-const Box$1 = createLucideIcon$1("box", __iconNode$qh);
+const Box$1 = createLucideIcon$1("box", __iconNode$qi);
 /**
  * @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$qg = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check$1 = createLucideIcon$1("check", __iconNode$qg);
+const __iconNode$qh = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check$1 = createLucideIcon$1("check", __iconNode$qh);
 /**
  * @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$qf = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown$1 = createLucideIcon$1("chevron-down", __iconNode$qf);
+const __iconNode$qg = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown$1 = createLucideIcon$1("chevron-down", __iconNode$qg);
 /**
  * @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$qe = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft$1 = createLucideIcon$1("chevron-left", __iconNode$qe);
+const __iconNode$qf = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft$1 = createLucideIcon$1("chevron-left", __iconNode$qf);
 /**
  * @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$qd = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight$1 = createLucideIcon$1("chevron-right", __iconNode$qd);
+const __iconNode$qe = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight$1 = createLucideIcon$1("chevron-right", __iconNode$qe);
 /**
  * @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$qc = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp$1 = createLucideIcon$1("chevron-up", __iconNode$qc);
+const __iconNode$qd = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp$1 = createLucideIcon$1("chevron-up", __iconNode$qd);
 /**
  * @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$qb = [
+const __iconNode$qc = [
   ["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$1 = createLucideIcon$1("circle-alert", __iconNode$qb);
+const CircleAlert$1 = createLucideIcon$1("circle-alert", __iconNode$qc);
+/**
+ * @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$qb = [
+  ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
+  ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
+];
+const CircleCheckBig$1 = createLucideIcon$1("circle-check-big", __iconNode$qb);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -1554,6 +1554,7 @@ const DependencyRow = ({ dependency }) => {
       borderRadius: `${theme2.radii[1]}px`,
       fontSize: `${theme2.fontSizes[0]}px`,
       fontWeight: theme2.fontWeights.medium,
+      fontFamily: theme2.fonts.body,
       minWidth: "36px",
       textAlign: "center"
     };
@@ -1616,11 +1617,12 @@ const DependencyRow = ({ dependency }) => {
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
-        padding: `${theme2.space[2]}px ${theme2.space[3]}px`,
+        padding: `${theme2.space[3]}px ${theme2.space[2]}px`,
         backgroundColor: theme2.colors.background,
-        borderRadius: `${theme2.radii[1]}px`,
+        borderRadius: 0,
         fontSize: `${theme2.fontSizes[1]}px`,
-        border: `1px solid ${theme2.colors.border}`,
+        fontFamily: theme2.fonts.body,
+        borderBottom: `1px solid ${theme2.colors.border}`,
         transition: "all 0.2s"
       },
       onMouseEnter: () => setIsHovered(true),
@@ -1692,7 +1694,16 @@ const DependencyRow = ({ dependency }) => {
                   children: copied ? /* @__PURE__ */ jsx(Check$1, { size: 12 }) : /* @__PURE__ */ jsx(Copy$1, { size: 12 })
                 }
               ),
-              /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textSecondary }, children: dependency.version })
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    color: theme2.colors.textSecondary,
+                    fontFamily: theme2.fonts.body
+                  },
+                  children: dependency.version
+                }
+              )
             ]
           }
         )
@@ -1719,8 +1730,7 @@ const FilterBar = ({
     {
       style: {
         display: "flex",
-        flexDirection: "column",
-        gap: `${theme2.space[2]}px`
+        flexDirection: "column"
       },
       children: [
         /* @__PURE__ */ jsxs(
@@ -1753,9 +1763,10 @@ const FilterBar = ({
                   onChange: (e2) => onSearchChange(e2.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}`,
+                    padding: `${theme2.space[3]}px ${theme2.space[5]}px`,
+                    borderRadius: 0,
+                    border: "none",
+                    borderBottom: `1px solid ${theme2.colors.border}`,
                     backgroundColor: theme2.colors.backgroundSecondary,
                     color: theme2.colors.text,
                     fontSize: `${theme2.fontSizes[1]}px`,
@@ -1788,7 +1799,7 @@ const FilterBar = ({
             ]
           }
         ),
-        showFilters && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: `${theme2.space[1]}px`, width: "100%" }, children: availableFilters.map((type2) => {
+        showFilters && /* @__PURE__ */ jsx("div", { style: { display: "flex", width: "100%" }, children: availableFilters.map((type2) => {
           const isActive = activeFilters.has(type2);
           return /* @__PURE__ */ jsxs(
             "button",
@@ -1796,12 +1807,13 @@ const FilterBar = ({
               onClick: () => onToggleFilter(type2),
               style: {
                 flex: 1,
-                padding: `${theme2.space[1]}px ${theme2.space[2]}px`,
+                padding: `${theme2.space[2]}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}`,
+                borderRadius: 0,
+                border: "none",
+                borderRight: `1px solid ${theme2.colors.border}`,
                 backgroundColor: isActive ? `${theme2.colors.primary}20` : theme2.colors.backgroundSecondary,
                 color: isActive ? theme2.colors.primary : theme2.colors.text,
                 cursor: "pointer",
@@ -2565,6 +2577,110 @@ const OtherScriptsSection = ({
     )
   ] });
 };
+function parseEnvJson(content2) {
+  const parsed = JSON.parse(content2);
+  if (!parsed.variables || !Array.isArray(parsed.variables)) {
+    throw new Error('Invalid env.json: missing "variables" array');
+  }
+  return parsed.variables.map((v2) => ({
+    name: v2.name,
+    description: v2.description,
+    required: v2.required ?? false,
+    default: v2.default,
+    example: v2.example,
+    group: v2.group,
+    link: v2.link
+  }));
+}
+const urlPattern = /https?:\/\/[^\s)>\]]+/gi;
+function parseDotEnv(content2) {
+  const lines = content2.split("\n");
+  const variables = [];
+  const commentBuffer = [];
+  let currentGroup = void 0;
+  const sectionPatterns = [
+    /^#\s*===\s*(.+?)\s*===\s*$/,
+    // # === Section ===
+    /^##\s+(.+?)\s*$/,
+    // ## Section
+    /^#\s*\[(.+?)\]\s*$/
+    // # [Section]
+  ];
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed) {
+      commentBuffer.length = 0;
+      continue;
+    }
+    if (trimmed.startsWith("#")) {
+      let isSection = false;
+      for (const pattern of sectionPatterns) {
+        const sectionMatch = trimmed.match(pattern);
+        if (sectionMatch) {
+          currentGroup = sectionMatch[1].trim();
+          commentBuffer.length = 0;
+          isSection = true;
+          break;
+        }
+      }
+      if (!isSection) {
+        commentBuffer.push(trimmed.slice(1).trim());
+      }
+      continue;
+    }
+    const match = trimmed.match(/^([A-Z_][A-Z0-9_]*)=(.*)$/i);
+    if (match) {
+      const [, name2, value] = match;
+      let required = false;
+      let link2 = void 0;
+      const descriptionParts = [];
+      for (const comment2 of commentBuffer) {
+        const lowerComment = comment2.toLowerCase();
+        if (!link2) {
+          const urlMatch = comment2.match(urlPattern);
+          if (urlMatch) {
+            link2 = urlMatch[0];
+          }
+        }
+        if (lowerComment === "required" || lowerComment === "(required)") {
+          required = true;
+        } else if (lowerComment.includes("required")) {
+          required = true;
+          descriptionParts.push(
+            comment2.replace(/\s*\(?\s*required\s*\)?\s*/gi, "").trim()
+          );
+        } else {
+          descriptionParts.push(comment2);
+        }
+      }
+      const description = descriptionParts.filter(Boolean).join(" ") || void 0;
+      const defaultValue = value.trim() || void 0;
+      variables.push({
+        name: name2,
+        description,
+        required,
+        default: defaultValue,
+        example: defaultValue,
+        group: currentGroup,
+        link: link2
+      });
+      commentBuffer.length = 0;
+    }
+  }
+  return variables;
+}
+function parseEnvFile(content2, fileType) {
+  if (fileType === "json") {
+    return {
+      variables: parseEnvJson(content2),
+      format: "json"
+    };
+  }
+  return {
+    variables: parseDotEnv(content2),
+    format: "dotenv"
+  };
+}
 const dependencyTypeOrder = {
   peer: 0,
   production: 1,
@@ -2594,369 +2710,42 @@ function extractDependencies(packageLayer) {
     return a2.name.localeCompare(b2.name);
   });
 }
-function findInternalDependencies(pkg, allPackages) {
-  const currentName = pkg.packageData.name;
-  const allDeps = /* @__PURE__ */ new Set([
-    ...Object.keys(pkg.packageData.dependencies || {}),
-    ...Object.keys(pkg.packageData.devDependencies || {}),
-    ...Object.keys(pkg.packageData.peerDependencies || {})
-  ]);
-  const dependsOn = allPackages.filter(
-    (p2) => p2.packageData.name !== currentName && allDeps.has(p2.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,
-  onHover
-}) => {
-  var _a, _b;
-  const { theme: theme2 } = useTheme();
-  const deps = pkg.packageData.dependencies || {};
-  const devDeps = pkg.packageData.devDependencies || {};
-  const peerDeps = pkg.packageData.peerDependencies || {};
-  const totalDeps = Object.keys(deps).length + Object.keys(devDeps).length + Object.keys(peerDeps).length;
-  const configFilesArray = pkg.configFiles ? Object.values(pkg.configFiles).filter((c2) => c2 == null ? void 0 : c2.exists) : [];
-  configFilesArray.filter((c2) => !(c2 == null ? void 0 : c2.isInherited)).length;
-  const inheritedConfigs = configFilesArray.filter(
-    (c2) => c2 == null ? void 0 : c2.isInherited
-  ).length;
-  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$1, color: "#10b981" };
-    }
-    if (dependsOn.length > 0 && usedBy.length === 0) {
-      return { label: "app", icon: Layers$1, color: "#8b5cf6" };
-    }
-    return { label: "shared", icon: LayoutGrid$1, 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: "0",
-        cursor: "pointer",
-        textAlign: "left",
-        transition: "all 0.15s ease",
-        width: "100%"
-      },
-      onMouseEnter: (e2) => {
-        e2.currentTarget.style.borderColor = theme2.colors.primary;
-        e2.currentTarget.style.backgroundColor = theme2.colors.backgroundTertiary;
-        onHover == null ? void 0 : onHover(pkg);
-      },
-      onMouseLeave: (e2) => {
-        e2.currentTarget.style.borderColor = theme2.colors.border;
-        e2.currentTarget.style.backgroundColor = theme2.colors.backgroundSecondary;
-        onHover == null ? void 0 : onHover(null);
-      },
-      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: theme2.fontWeights.semibold,
-                  fontFamily: theme2.fonts.body,
-                  color: theme2.colors.text,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap"
-                },
-                children: pkg.packageData.name
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  fontSize: theme2.fontSizes[0],
-                  fontFamily: theme2.fonts.body,
-                  color: theme2.colors.textSecondary
-                },
-                children: [
-                  pkg.packageData.path || "/",
-                  pkg.packageData.version && ` • v${pkg.packageData.version}`
-                ]
-              }
-            )
-          ] }),
-          pkg.packageData.isMonorepoRoot && ((_b = pkg.packageData.monorepoMetadata) == null ? void 0 : _b.orchestrator) && /* @__PURE__ */ jsx(
-            OrchestratorBadge,
-            {
-              orchestrator: pkg.packageData.monorepoMetadata.orchestrator,
-              rootRole: pkg.packageData.monorepoMetadata.rootRole,
-              size: "sm"
-            }
-          ),
-          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: theme2.fontWeights.medium,
-                fontFamily: theme2.fonts.body,
-                flexShrink: 0
-              },
-              children: [
-                /* @__PURE__ */ jsx(packageRole.icon, { size: 12 }),
-                packageRole.label
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(ChevronRight$1, { size: 16, color: theme2.colors.textSecondary })
-        ] }),
-        (pkg.packageData.description || pkg.packageData.license) && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              gap: "4px"
-            },
-            children: [
-              pkg.packageData.description && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    fontSize: theme2.fontSizes[0],
-                    fontFamily: theme2.fonts.body,
-                    color: theme2.colors.textSecondary,
-                    lineHeight: 1.4,
-                    overflow: "hidden",
-                    display: "-webkit-box",
-                    WebkitLineClamp: 2,
-                    WebkitBoxOrient: "vertical"
-                  },
-                  children: pkg.packageData.description
-                }
-              ),
-              pkg.packageData.license && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "4px",
-                    fontSize: theme2.fontSizes[0]
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      style: {
-                        padding: "1px 6px",
-                        backgroundColor: theme2.colors.textSecondary + "15",
-                        color: theme2.colors.textSecondary,
-                        borderRadius: "3px",
-                        fontWeight: theme2.fontWeights.medium,
-                        fontFamily: theme2.fonts.body
-                      },
-                      children: pkg.packageData.license
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        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,
-                          fontFamily: theme2.fonts.body,
-                          display: "flex",
-                          alignItems: "center",
-                          gap: "2px"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx(ArrowRight$1, { size: 10 }),
-                          "uses"
-                        ]
-                      }
-                    ),
-                    dependsOn.map((dep) => /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          padding: "2px 6px",
-                          backgroundColor: theme2.colors.primary + "15",
-                          color: theme2.colors.primary,
-                          borderRadius: "4px",
-                          fontWeight: theme2.fontWeights.medium,
-                          fontFamily: theme2.fonts.body
-                        },
-                        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,
-                          fontFamily: theme2.fonts.body
-                        },
-                        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: theme2.fontWeights.medium,
-                          fontFamily: theme2.fonts.body
-                        },
-                        children: dep.packageData.name
-                      },
-                      dep.id
-                    ))
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              gap: "12px",
-              fontSize: theme2.fontSizes[0],
-              fontFamily: theme2.fonts.body,
-              color: theme2.colors.textSecondary
-            },
-            children: [
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-                /* @__PURE__ */ jsx(Package$1, { size: 12 }),
-                /* @__PURE__ */ jsxs("span", { children: [
-                  totalDeps,
-                  " deps"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-                /* @__PURE__ */ jsx(Settings$1, { size: 12 }),
-                /* @__PURE__ */ jsxs("span", { children: [
-                  configFilesArray.length,
-                  " configs",
-                  inheritedConfigs > 0 && /* @__PURE__ */ jsxs("span", { style: { color: theme2.colors.primary }, children: [
-                    " ",
-                    "(",
-                    inheritedConfigs,
-                    "↑)"
-                  ] })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-                /* @__PURE__ */ jsx(Terminal$1, { size: 12 }),
-                /* @__PURE__ */ jsxs("span", { children: [
-                  commands,
-                  " commands"
-                ] })
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-const PackageCard = ({
+const PackageDetailCard = ({
   pkg,
   isExpanded,
   onToggle,
   onCommandClick,
   onConfigClick,
   onPackageClick,
-  standalone = false
+  standalone = false,
+  readFile
 }) => {
-  var _a, _b, _c, _d, _e2, _f, _g, _h;
+  var _a, _b, _c, _d, _e2, _f, _g, _h, _i;
   const { theme: theme2 } = useTheme();
   const [activeTab, setActiveTab] = useState("dependencies");
   const [activeFilters, setActiveFilters] = useState(/* @__PURE__ */ new Set());
   const [searchQuery, setSearchQuery] = useState("");
   const [showInfoModal, setShowInfoModal] = useState(false);
+  const [envVariables, setEnvVariables] = useState([]);
+  const [envLoading, setEnvLoading] = useState(false);
+  const [envError, setEnvError] = useState(null);
+  const groupedEnvVariables = useMemo(() => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const variable of envVariables) {
+      const group = variable.group;
+      if (!groups.has(group)) {
+        groups.set(group, []);
+      }
+      groups.get(group).push(variable);
+    }
+    const sortedGroups = Array.from(groups.entries()).sort(([a2], [b2]) => {
+      if (a2 === void 0 && b2 === void 0) return 0;
+      if (a2 === void 0) return 1;
+      if (b2 === void 0) return -1;
+      return a2.localeCompare(b2);
+    });
+    return sortedGroups;
+  }, [envVariables]);
   const configFiles = useMemo(() => {
     if (!pkg.configFiles) return [];
     return Object.entries(pkg.configFiles).filter(([, config]) => config == null ? void 0 : config.exists).map(([name2, config]) => ({ name: name2, ...config }));
@@ -2966,6 +2755,34 @@ const PackageCard = ({
     const inherited = configFiles.filter((c2) => c2.isInherited).length;
     return { local, inherited, total: configFiles.length };
   }, [configFiles]);
+  const envConfig = (_a = pkg.configFiles) == null ? void 0 : _a.envvars;
+  const hasEnvConfig = (envConfig == null ? void 0 : envConfig.exists) ?? false;
+  useEffect(() => {
+    if (activeTab !== "env" || !(envConfig == null ? void 0 : envConfig.exists) || !readFile) {
+      return;
+    }
+    const fetchEnvFile = async () => {
+      setEnvLoading(true);
+      setEnvError(null);
+      try {
+        const filePath = pkg.packageData.path ? `${pkg.packageData.path}/${envConfig.path}` : envConfig.path;
+        const content2 = await readFile(filePath);
+        const result = parseEnvFile(content2, envConfig.type);
+        const sorted = [...result.variables].sort(
+          (a2, b2) => a2.name.localeCompare(b2.name)
+        );
+        setEnvVariables(sorted);
+      } catch (err) {
+        setEnvError(
+          err instanceof Error ? err.message : "Failed to load env file"
+        );
+        setEnvVariables([]);
+      } finally {
+        setEnvLoading(false);
+      }
+    };
+    fetchEnvFile();
+  }, [activeTab, envConfig, readFile, pkg.packageData.path]);
   const commands = pkg.packageData.availableCommands || [];
   const dependencyItems = useMemo(() => extractDependencies(pkg), [pkg]);
   const depCounts = useMemo(
@@ -3085,7 +2902,7 @@ const PackageCard = ({
                 title: "Open package folder",
                 children: [
                   /* @__PURE__ */ jsx(Folder$1, { size: 12 }),
-                  pkg.packageData.path || "/"
+                  pkg.packageData.path || "root"
                 ]
               }
             )
@@ -3140,7 +2957,7 @@ const PackageCard = ({
                       children: pkg.packageData.license
                     }
                   ),
-                  (pkg.packageData.author || ((_a = pkg.packageData.authors) == null ? void 0 : _a[0])) && /* @__PURE__ */ jsxs(
+                  (pkg.packageData.author || ((_b = pkg.packageData.authors) == null ? void 0 : _b[0])) && /* @__PURE__ */ jsxs(
                     "span",
                     {
                       style: {
@@ -3150,7 +2967,7 @@ const PackageCard = ({
                       },
                       children: [
                         "by ",
-                        pkg.packageData.author || ((_b = pkg.packageData.authors) == null ? void 0 : _b[0])
+                        pkg.packageData.author || ((_c = pkg.packageData.authors) == null ? void 0 : _c[0])
                       ]
                     }
                   )
@@ -3174,6 +2991,13 @@ const PackageCard = ({
               label: "Dependencies",
               count: dependencyItems.length
             },
+            ...hasEnvConfig ? [
+              {
+                id: "env",
+                label: "Env",
+                count: 1
+              }
+            ] : [],
             {
               id: "configs",
               label: "Configs",
@@ -3183,10 +3007,10 @@ const PackageCard = ({
             {
               id: "lenses",
               label: "Lenses",
-              count: ((_c = pkg.qualityMetrics) == null ? void 0 : _c.lensReadiness) ? Object.values(pkg.qualityMetrics.lensReadiness).filter(
+              count: ((_d = pkg.qualityMetrics) == null ? void 0 : _d.lensReadiness) ? Object.values(pkg.qualityMetrics.lensReadiness).filter(
                 (l2) => l2.ready
               ).length : 0,
-              total: ((_d = pkg.qualityMetrics) == null ? void 0 : _d.lensReadiness) ? Object.keys(pkg.qualityMetrics.lensReadiness).length : 0
+              total: ((_e2 = pkg.qualityMetrics) == null ? void 0 : _e2.lensReadiness) ? Object.keys(pkg.qualityMetrics.lensReadiness).length : 0
             }
           ].map((tab2) => /* @__PURE__ */ jsxs(
             "button",
@@ -3237,6 +3061,259 @@ const PackageCard = ({
             overflow: "auto"
           },
           children: [
+            activeTab === "env" && envConfig && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: `${theme2.space[2]}px ${theme2.space[4]}px`,
+                    borderBottom: `1px solid ${theme2.colors.border}`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: theme2.fontSizes[0],
+                          fontFamily: theme2.fonts.body,
+                          color: theme2.colors.textSecondary
+                        },
+                        children: envVariables.length > 0 ? `${envVariables.length} variables` : "Environment Variables"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => onConfigClick == null ? void 0 : onConfigClick(envConfig),
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "4px",
+                          padding: "4px 8px",
+                          backgroundColor: "transparent",
+                          border: `1px solid ${theme2.colors.border}`,
+                          borderRadius: "4px",
+                          cursor: "pointer",
+                          color: theme2.colors.textSecondary,
+                          fontSize: theme2.fontSizes[0],
+                          fontFamily: theme2.fonts.body
+                        },
+                        title: `Open ${envConfig.path}`,
+                        children: [
+                          /* @__PURE__ */ jsx(FileText$1, { size: 12 }),
+                          envConfig.path
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              envLoading && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    padding: "20px",
+                    textAlign: "center",
+                    color: theme2.colors.textSecondary,
+                    fontSize: theme2.fontSizes[1],
+                    fontFamily: theme2.fonts.body
+                  },
+                  children: "Loading environment variables..."
+                }
+              ),
+              envError && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    padding: "12px",
+                    backgroundColor: theme2.colors.error + "15",
+                    border: `1px solid ${theme2.colors.error}30`,
+                    borderRadius: "6px",
+                    color: theme2.colors.error,
+                    fontSize: theme2.fontSizes[1],
+                    fontFamily: theme2.fonts.body,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(CircleAlert$1, { size: 16 }),
+                    envError
+                  ]
+                }
+              ),
+              !envLoading && !envError && envVariables.length > 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column"
+                  },
+                  children: groupedEnvVariables.map(([groupName, variables]) => /* @__PURE__ */ jsxs("div", { children: [
+                    groupName && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          padding: "8px 12px",
+                          backgroundColor: theme2.colors.backgroundTertiary,
+                          borderBottom: `1px solid ${theme2.colors.border}`,
+                          fontSize: theme2.fontSizes[0],
+                          fontFamily: theme2.fonts.body,
+                          fontWeight: theme2.fontWeights.semibold,
+                          color: theme2.colors.textSecondary,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.5px"
+                        },
+                        children: groupName
+                      }
+                    ),
+                    variables.map((variable) => /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          padding: `${theme2.space[3]}px ${theme2.space[4]}px`,
+                          backgroundColor: theme2.colors.background,
+                          borderBottom: `1px solid ${theme2.colors.border}`
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "8px",
+                                marginBottom: variable.description ? "6px" : 0
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  "code",
+                                  {
+                                    style: {
+                                      fontSize: theme2.fontSizes[1],
+                                      fontFamily: theme2.fonts.monospace,
+                                      color: theme2.colors.text,
+                                      fontWeight: theme2.fontWeights.medium
+                                    },
+                                    children: variable.name
+                                  }
+                                ),
+                                variable.link && /* @__PURE__ */ jsx(
+                                  "a",
+                                  {
+                                    href: variable.link,
+                                    target: "_blank",
+                                    rel: "noopener noreferrer",
+                                    style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      color: theme2.colors.accent,
+                                      opacity: 0.7,
+                                      transition: "opacity 0.15s ease"
+                                    },
+                                    onMouseEnter: (e2) => {
+                                      e2.currentTarget.style.opacity = "1";
+                                    },
+                                    onMouseLeave: (e2) => {
+                                      e2.currentTarget.style.opacity = "0.7";
+                                    },
+                                    title: variable.link,
+                                    children: /* @__PURE__ */ jsx(ExternalLink$1, { size: 12 })
+                                  }
+                                ),
+                                variable.required ? /* @__PURE__ */ jsxs(
+                                  "span",
+                                  {
+                                    style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: "3px",
+                                      padding: "2px 6px",
+                                      backgroundColor: theme2.colors.error + "20",
+                                      color: theme2.colors.error,
+                                      borderRadius: "4px",
+                                      fontSize: theme2.fontSizes[0],
+                                      fontFamily: theme2.fonts.body,
+                                      fontWeight: theme2.fontWeights.medium
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsx(CircleAlert$1, { size: 10 }),
+                                      "required"
+                                    ]
+                                  }
+                                ) : /* @__PURE__ */ jsxs(
+                                  "span",
+                                  {
+                                    style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: "3px",
+                                      padding: "2px 6px",
+                                      backgroundColor: theme2.colors.success + "20",
+                                      color: theme2.colors.success,
+                                      borderRadius: "4px",
+                                      fontSize: theme2.fontSizes[0],
+                                      fontFamily: theme2.fonts.body
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsx(CircleCheckBig$1, { size: 10 }),
+                                      "optional"
+                                    ]
+                                  }
+                                ),
+                                variable.default && /* @__PURE__ */ jsxs(
+                                  "span",
+                                  {
+                                    style: {
+                                      fontSize: theme2.fontSizes[0],
+                                      fontFamily: theme2.fonts.monospace,
+                                      color: theme2.colors.textSecondary
+                                    },
+                                    children: [
+                                      "default: ",
+                                      variable.default
+                                    ]
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          variable.description && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                fontSize: theme2.fontSizes[1],
+                                fontFamily: theme2.fonts.body,
+                                color: theme2.colors.textSecondary,
+                                lineHeight: 1.4
+                              },
+                              children: variable.description
+                            }
+                          )
+                        ]
+                      },
+                      variable.name
+                    ))
+                  ] }, groupName ?? "__ungrouped__"))
+                }
+              ),
+              !envLoading && !envError && envVariables.length === 0 && !readFile && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    padding: "20px",
+                    textAlign: "center",
+                    color: theme2.colors.textSecondary,
+                    fontSize: theme2.fontSizes[1],
+                    fontFamily: theme2.fonts.body
+                  },
+                  children: "Click the file to view environment variables"
+                }
+              )
+            ] }),
             activeTab === "configs" && /* @__PURE__ */ jsx("div", { style: { padding: "12px" }, children: /* @__PURE__ */ jsx(ConfigList, { configs: configFiles, onConfigClick }) }),
             activeTab === "lenses" && /* @__PURE__ */ jsxs(
               "div",
@@ -3250,7 +3327,7 @@ const PackageCard = ({
                   /* @__PURE__ */ jsx(
                     LensReadinessSection,
                     {
-                      lensReadiness: (_e2 = pkg.qualityMetrics) == null ? void 0 : _e2.lensReadiness
+                      lensReadiness: (_f = pkg.qualityMetrics) == null ? void 0 : _f.lensReadiness
                     }
                   ),
                   /* @__PURE__ */ jsx(
@@ -3295,7 +3372,6 @@ const PackageCard = ({
                       "div",
                       {
                         style: {
-                          padding: "12px",
                           borderBottom: `1px solid ${theme2.colors.border}`
                         },
                         children: /* @__PURE__ */ jsx(
@@ -3310,59 +3386,44 @@ const PackageCard = ({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsxs(
+                    /* @__PURE__ */ jsx(
                       "div",
                       {
-                        style: { flex: 1, overflow: "auto", padding: "8px 12px" },
-                        children: [
-                          /* @__PURE__ */ jsxs(
-                            "div",
-                            {
-                              style: {
-                                fontSize: theme2.fontSizes[0],
-                                fontFamily: theme2.fonts.body,
-                                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],
-                                    fontFamily: theme2.fonts.body
-                                  },
-                                  children: "No dependencies match your filters"
-                                }
-                              ) : filteredDependencies.map((dep) => /* @__PURE__ */ jsx(
-                                DependencyRow,
-                                {
-                                  dependency: dep
+                        style: {
+                          flex: 1,
+                          overflow: "auto",
+                          scrollbarWidth: "none",
+                          msOverflowStyle: "none"
+                        },
+                        className: "hide-scrollbar",
+                        children: /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              flexDirection: "column"
+                            },
+                            children: filteredDependencies.length === 0 ? /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  padding: "12px",
+                                  textAlign: "center",
+                                  color: theme2.colors.textSecondary,
+                                  fontSize: theme2.fontSizes[1],
+                                  fontFamily: theme2.fonts.body
                                 },
-                                `${dep.name}-${dep.dependencyType}`
-                              ))
-                            }
-                          )
-                        ]
+                                children: "No dependencies match your filters"
+                              }
+                            ) : filteredDependencies.map((dep) => /* @__PURE__ */ jsx(
+                              DependencyRow,
+                              {
+                                dependency: dep
+                              },
+                              `${dep.name}-${dep.dependencyType}`
+                            ))
+                          }
+                        )
                       }
                     )
                   ] }),
@@ -3469,7 +3530,7 @@ const PackageCard = ({
                   title: "Open package folder",
                   children: [
                     /* @__PURE__ */ jsx(Folder$1, { size: 12 }),
-                    pkg.packageData.path || "/"
+                    pkg.packageData.path || "root"
                   ]
                 }
               )
@@ -3491,6 +3552,13 @@ const PackageCard = ({
                   label: "Deps",
                   count: dependencyItems.length
                 },
+                ...hasEnvConfig ? [
+                  {
+                    id: "env",
+                    label: "Env",
+                    count: 1
+                  }
+                ] : [],
                 {
                   id: "configs",
                   label: "Configs",
@@ -3500,10 +3568,10 @@ const PackageCard = ({
                 {
                   id: "lenses",
                   label: "Lenses",
-                  count: ((_f = pkg.qualityMetrics) == null ? void 0 : _f.lensReadiness) ? Object.values(pkg.qualityMetrics.lensReadiness).filter(
+                  count: ((_g = pkg.qualityMetrics) == null ? void 0 : _g.lensReadiness) ? Object.values(pkg.qualityMetrics.lensReadiness).filter(
                     (l2) => l2.ready
                   ).length : 0,
-                  total: ((_g = pkg.qualityMetrics) == null ? void 0 : _g.lensReadiness) ? Object.keys(pkg.qualityMetrics.lensReadiness).length : 0
+                  total: ((_h = pkg.qualityMetrics) == null ? void 0 : _h.lensReadiness) ? Object.keys(pkg.qualityMetrics.lensReadiness).length : 0
                 }
               ].map((tab2) => /* @__PURE__ */ jsxs(
                 "button",
@@ -3554,6 +3622,259 @@ const PackageCard = ({
                 overflow: "auto"
               },
               children: [
+                activeTab === "env" && envConfig && /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        padding: `${theme2.space[2]}px ${theme2.space[4]}px`,
+                        borderBottom: `1px solid ${theme2.colors.border}`
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              fontSize: theme2.fontSizes[0],
+                              fontFamily: theme2.fonts.body,
+                              color: theme2.colors.textSecondary
+                            },
+                            children: envVariables.length > 0 ? `${envVariables.length} variables` : "Environment Variables"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            onClick: () => onConfigClick == null ? void 0 : onConfigClick(envConfig),
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              gap: "4px",
+                              padding: "4px 8px",
+                              backgroundColor: "transparent",
+                              border: `1px solid ${theme2.colors.border}`,
+                              borderRadius: "4px",
+                              cursor: "pointer",
+                              color: theme2.colors.textSecondary,
+                              fontSize: theme2.fontSizes[0],
+                              fontFamily: theme2.fonts.body
+                            },
+                            title: `Open ${envConfig.path}`,
+                            children: [
+                              /* @__PURE__ */ jsx(FileText$1, { size: 12 }),
+                              envConfig.path
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  envLoading && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        padding: "20px",
+                        textAlign: "center",
+                        color: theme2.colors.textSecondary,
+                        fontSize: theme2.fontSizes[1],
+                        fontFamily: theme2.fonts.body
+                      },
+                      children: "Loading environment variables..."
+                    }
+                  ),
+                  envError && /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        padding: "12px",
+                        backgroundColor: theme2.colors.error + "15",
+                        border: `1px solid ${theme2.colors.error}30`,
+                        borderRadius: "6px",
+                        color: theme2.colors.error,
+                        fontSize: theme2.fontSizes[1],
+                        fontFamily: theme2.fonts.body,
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "8px"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(CircleAlert$1, { size: 16 }),
+                        envError
+                      ]
+                    }
+                  ),
+                  !envLoading && !envError && envVariables.length > 0 && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        flexDirection: "column"
+                      },
+                      children: groupedEnvVariables.map(([groupName, variables]) => /* @__PURE__ */ jsxs("div", { children: [
+                        groupName && /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              padding: "8px 12px",
+                              backgroundColor: theme2.colors.backgroundTertiary,
+                              borderBottom: `1px solid ${theme2.colors.border}`,
+                              fontSize: theme2.fontSizes[0],
+                              fontFamily: theme2.fonts.body,
+                              fontWeight: theme2.fontWeights.semibold,
+                              color: theme2.colors.textSecondary,
+                              textTransform: "uppercase",
+                              letterSpacing: "0.5px"
+                            },
+                            children: groupName
+                          }
+                        ),
+                        variables.map((variable) => /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              padding: `${theme2.space[3]}px ${theme2.space[4]}px`,
+                              backgroundColor: theme2.colors.background,
+                              borderBottom: `1px solid ${theme2.colors.border}`
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxs(
+                                "div",
+                                {
+                                  style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "8px",
+                                    marginBottom: variable.description ? "6px" : 0
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsx(
+                                      "code",
+                                      {
+                                        style: {
+                                          fontSize: theme2.fontSizes[1],
+                                          fontFamily: theme2.fonts.monospace,
+                                          color: theme2.colors.text,
+                                          fontWeight: theme2.fontWeights.medium
+                                        },
+                                        children: variable.name
+                                      }
+                                    ),
+                                    variable.link && /* @__PURE__ */ jsx(
+                                      "a",
+                                      {
+                                        href: variable.link,
+                                        target: "_blank",
+                                        rel: "noopener noreferrer",
+                                        style: {
+                                          display: "flex",
+                                          alignItems: "center",
+                                          color: theme2.colors.accent,
+                                          opacity: 0.7,
+                                          transition: "opacity 0.15s ease"
+                                        },
+                                        onMouseEnter: (e2) => {
+                                          e2.currentTarget.style.opacity = "1";
+                                        },
+                                        onMouseLeave: (e2) => {
+                                          e2.currentTarget.style.opacity = "0.7";
+                                        },
+                                        title: variable.link,
+                                        children: /* @__PURE__ */ jsx(ExternalLink$1, { size: 12 })
+                                      }
+                                    ),
+                                    variable.required ? /* @__PURE__ */ jsxs(
+                                      "span",
+                                      {
+                                        style: {
+                                          display: "flex",
+                                          alignItems: "center",
+                                          gap: "3px",
+                                          padding: "2px 6px",
+                                          backgroundColor: theme2.colors.error + "20",
+                                          color: theme2.colors.error,
+                                          borderRadius: "4px",
+                                          fontSize: theme2.fontSizes[0],
+                                          fontFamily: theme2.fonts.body,
+                                          fontWeight: theme2.fontWeights.medium
+                                        },
+                                        children: [
+                                          /* @__PURE__ */ jsx(CircleAlert$1, { size: 10 }),
+                                          "required"
+                                        ]
+                                      }
+                                    ) : /* @__PURE__ */ jsxs(
+                                      "span",
+                                      {
+                                        style: {
+                                          display: "flex",
+                                          alignItems: "center",
+                                          gap: "3px",
+                                          padding: "2px 6px",
+                                          backgroundColor: theme2.colors.success + "20",
+                                          color: theme2.colors.success,
+                                          borderRadius: "4px",
+                                          fontSize: theme2.fontSizes[0],
+                                          fontFamily: theme2.fonts.body
+                                        },
+                                        children: [
+                                          /* @__PURE__ */ jsx(CircleCheckBig$1, { size: 10 }),
+                                          "optional"
+                                        ]
+                                      }
+                                    ),
+                                    variable.default && /* @__PURE__ */ jsxs(
+                                      "span",
+                                      {
+                                        style: {
+                                          fontSize: theme2.fontSizes[0],
+                                          fontFamily: theme2.fonts.monospace,
+                                          color: theme2.colors.textSecondary
+                                        },
+                                        children: [
+                                          "default: ",
+                                          variable.default
+                                        ]
+                                      }
+                                    )
+                                  ]
+                                }
+                              ),
+                              variable.description && /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  style: {
+                                    fontSize: theme2.fontSizes[1],
+                                    fontFamily: theme2.fonts.body,
+                                    color: theme2.colors.textSecondary,
+                                    lineHeight: 1.4
+                                  },
+                                  children: variable.description
+                                }
+                              )
+                            ]
+                          },
+                          variable.name
+                        ))
+                      ] }, groupName ?? "__ungrouped__"))
+                    }
+                  ),
+                  !envLoading && !envError && envVariables.length === 0 && !readFile && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        padding: "20px",
+                        textAlign: "center",
+                        color: theme2.colors.textSecondary,
+                        fontSize: theme2.fontSizes[1],
+                        fontFamily: theme2.fonts.body
+                      },
+                      children: "Click the file to view environment variables"
+                    }
+                  )
+                ] }),
                 activeTab === "configs" && /* @__PURE__ */ jsx("div", { style: { padding: "12px" }, children: /* @__PURE__ */ jsx(
                   ConfigList,
                   {
@@ -3565,7 +3886,7 @@ const PackageCard = ({
                   /* @__PURE__ */ jsx(
                     LensReadinessSection,
                     {
-                      lensReadiness: (_h = pkg.qualityMetrics) == null ? void 0 : _h.lensReadiness
+                      lensReadiness: (_i = pkg.qualityMetrics) == null ? void 0 : _i.lensReadiness
                     }
                   ),
                   /* @__PURE__ */ jsx(
@@ -3608,7 +3929,6 @@ const PackageCard = ({
                           "div",
                           {
                             style: {
-                              padding: "12px",
                               borderBottom: `1px solid ${theme2.colors.border}`
                             },
                             children: /* @__PURE__ */ jsx(
@@ -3623,59 +3943,44 @@ const PackageCard = ({
                             )
                           }
                         ),
-                        /* @__PURE__ */ jsxs(
+                        /* @__PURE__ */ jsx(
                           "div",
                           {
-                            style: { flex: 1, overflow: "auto", padding: "8px 12px" },
-                            children: [
-                              /* @__PURE__ */ jsxs(
-                                "div",
-                                {
-                                  style: {
-                                    fontSize: theme2.fontSizes[0],
-                                    fontFamily: theme2.fonts.body,
-                                    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],
-                                        fontFamily: theme2.fonts.body
-                                      },
-                                      children: "No dependencies match your filters"
-                                    }
-                                  ) : filteredDependencies.map((dep) => /* @__PURE__ */ jsx(
-                                    DependencyRow,
-                                    {
-                                      dependency: dep
+                            style: {
+                              flex: 1,
+                              overflow: "auto",
+                              scrollbarWidth: "none",
+                              msOverflowStyle: "none"
+                            },
+                            className: "hide-scrollbar",
+                            children: /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  display: "flex",
+                                  flexDirection: "column"
+                                },
+                                children: filteredDependencies.length === 0 ? /* @__PURE__ */ jsx(
+                                  "div",
+                                  {
+                                    style: {
+                                      padding: "12px",
+                                      textAlign: "center",
+                                      color: theme2.colors.textSecondary,
+                                      fontSize: theme2.fontSizes[1],
+                                      fontFamily: theme2.fonts.body
                                     },
-                                    `${dep.name}-${dep.dependencyType}`
-                                  ))
-                                }
-                              )
-                            ]
+                                    children: "No dependencies match your filters"
+                                  }
+                                ) : filteredDependencies.map((dep) => /* @__PURE__ */ jsx(
+                                  DependencyRow,
+                                  {
+                                    dependency: dep
+                                  },
+                                  `${dep.name}-${dep.dependencyType}`
+                                ))
+                              }
+                            )
                           }
                         )
                       ] }),
@@ -3697,6 +4002,257 @@ const PackageCard = ({
     }
   );
 };
+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(
+    (p2) => p2.packageData.name !== currentName && allDeps.has(p2.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,
+  onHover
+}) => {
+  var _a, _b;
+  const { theme: theme2 } = useTheme();
+  const deps = pkg.packageData.dependencies || {};
+  const devDeps = pkg.packageData.devDependencies || {};
+  const peerDeps = pkg.packageData.peerDependencies || {};
+  const totalDeps = Object.keys(deps).length + Object.keys(devDeps).length + Object.keys(peerDeps).length;
+  const configFilesArray = pkg.configFiles ? Object.values(pkg.configFiles).filter((c2) => c2 == null ? void 0 : c2.exists) : [];
+  const inheritedConfigs = configFilesArray.filter(
+    (c2) => c2 == null ? void 0 : c2.isInherited
+  ).length;
+  const commands = ((_a = pkg.packageData.availableCommands) == null ? void 0 : _a.length) || 0;
+  const { dependsOn, usedBy } = useMemo(
+    () => findInternalDependencies(pkg, allPackages),
+    [pkg, allPackages]
+  );
+  const packageRole = useMemo(() => {
+    if (dependsOn.length === 0 && usedBy.length === 0) {
+      return null;
+    }
+    if (dependsOn.length === 0 && usedBy.length > 0) {
+      return { label: "core", icon: Box$1, color: "#10b981" };
+    }
+    if (dependsOn.length > 0 && usedBy.length === 0) {
+      return { label: "app", icon: Layers$1, color: "#8b5cf6" };
+    }
+    return { label: "shared", icon: LayoutGrid$1, color: "#f59e0b" };
+  }, [dependsOn.length, usedBy.length]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        padding: "20px",
+        backgroundColor: theme2.colors.backgroundSecondary,
+        border: `1px solid ${theme2.colors.border}`,
+        borderRadius: "0",
+        cursor: "pointer",
+        textAlign: "left",
+        transition: "all 0.15s ease",
+        width: "100%"
+      },
+      onMouseEnter: (e2) => {
+        e2.currentTarget.style.borderColor = theme2.colors.primary;
+        e2.currentTarget.style.backgroundColor = theme2.colors.backgroundTertiary;
+        onHover == null ? void 0 : onHover(pkg);
+      },
+      onMouseLeave: (e2) => {
+        e2.currentTarget.style.borderColor = theme2.colors.border;
+        e2.currentTarget.style.backgroundColor = theme2.colors.backgroundSecondary;
+        onHover == null ? void 0 : onHover(null);
+      },
+      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[3],
+                  fontWeight: theme2.fontWeights.semibold,
+                  fontFamily: theme2.fonts.body,
+                  color: theme2.colors.text,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: pkg.packageData.name
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  fontSize: theme2.fontSizes[1],
+                  fontFamily: theme2.fonts.body,
+                  color: theme2.colors.textSecondary
+                },
+                children: [
+                  pkg.packageData.path || "root",
+                  pkg.packageData.version && ` • v${pkg.packageData.version}`
+                ]
+              }
+            )
+          ] }),
+          pkg.packageData.isMonorepoRoot && ((_b = pkg.packageData.monorepoMetadata) == null ? void 0 : _b.orchestrator) && /* @__PURE__ */ jsx(
+            OrchestratorBadge,
+            {
+              orchestrator: pkg.packageData.monorepoMetadata.orchestrator,
+              rootRole: pkg.packageData.monorepoMetadata.rootRole,
+              size: "sm"
+            }
+          ),
+          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[1],
+                fontWeight: theme2.fontWeights.medium,
+                fontFamily: theme2.fonts.body,
+                flexShrink: 0
+              },
+              children: [
+                /* @__PURE__ */ jsx(packageRole.icon, { size: 12 }),
+                packageRole.label
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(ChevronRight$1, { size: 16, color: theme2.colors.textSecondary })
+        ] }),
+        (pkg.packageData.description || pkg.packageData.license) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px"
+            },
+            children: [
+              pkg.packageData.description && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: theme2.fontSizes[1],
+                    fontFamily: theme2.fonts.body,
+                    color: theme2.colors.textSecondary,
+                    lineHeight: 1.4,
+                    overflow: "hidden",
+                    display: "-webkit-box",
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: "vertical"
+                  },
+                  children: pkg.packageData.description
+                }
+              ),
+              pkg.packageData.license && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    fontSize: theme2.fontSizes[1]
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        padding: "1px 6px",
+                        backgroundColor: theme2.colors.textSecondary + "15",
+                        color: theme2.colors.textSecondary,
+                        borderRadius: "3px",
+                        fontWeight: theme2.fontWeights.medium,
+                        fontFamily: theme2.fonts.body
+                      },
+                      children: pkg.packageData.license
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "12px",
+              fontSize: theme2.fontSizes[1],
+              fontFamily: theme2.fonts.body,
+              color: theme2.colors.textSecondary
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                /* @__PURE__ */ jsx(Package$1, { size: 12 }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  totalDeps,
+                  " deps"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                /* @__PURE__ */ jsx(Settings$1, { size: 12 }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  configFilesArray.length,
+                  " configs",
+                  inheritedConfigs > 0 && /* @__PURE__ */ jsxs("span", { style: { color: theme2.colors.primary }, children: [
+                    " ",
+                    "(",
+                    inheritedConfigs,
+                    "↑)"
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                /* @__PURE__ */ jsx(Terminal$1, { size: 12 }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  commands,
+                  " commands"
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 const PackageCompositionPanelContent = ({
   packages,
   isLoading = false,
@@ -3706,7 +4262,8 @@ const PackageCompositionPanelContent = ({
   onPackageClick,
   onPackageHover,
   onPackageSelect,
-  events
+  events,
+  readFile
 }) => {
   const { theme: theme2 } = useTheme();
   const [selectedPackageId, setSelectedPackageId] = useState(
@@ -3755,7 +4312,7 @@ const PackageCompositionPanelContent = ({
   }
   if (packages.length === 1) {
     return /* @__PURE__ */ jsx(
-      PackageCard,
+      PackageDetailCard,
       {
         pkg: packages[0],
         isExpanded: true,
@@ -3764,7 +4321,8 @@ const PackageCompositionPanelContent = ({
         onCommandClick,
         onConfigClick,
         onPackageClick,
-        standalone: true
+        standalone: true,
+        readFile
       }
     );
   }
@@ -3957,7 +4515,7 @@ const PackageCompositionPanelContent = ({
                     }
                   ),
                   /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: selectedPackage && /* @__PURE__ */ jsx(
-                    PackageCard,
+                    PackageDetailCard,
                     {
                       pkg: selectedPackage,
                       isExpanded: true,
@@ -3966,7 +4524,8 @@ const PackageCompositionPanelContent = ({
                       onCommandClick,
                       onConfigClick,
                       onPackageClick,
-                      standalone: true
+                      standalone: true,
+                      readFile
                     }
                   ) })
                 ]
@@ -4046,7 +4605,7 @@ const PackageCompositionPanelPreview = () => {
     }
   );
 };
-const PackageCompositionPanel = ({ context: context2, events }) => {
+const PackageCompositionPanel = ({ context: context2, actions, events }) => {
   var _a;
   const packagesSlice = context2.packages;
   const packages = ((_a = packagesSlice == null ? void 0 : packagesSlice.data) == null ? void 0 : _a.packages) ?? [];
@@ -4080,7 +4639,8 @@ const PackageCompositionPanel = ({ context: context2, events }) => {
       isLoading,
       onPackageHover: handlePackageHover,
       onPackageSelect: handlePackageSelect,
-      events
+      events,
+      readFile: actions.readFile
     }
   );
 };
@@ -105383,7 +105943,7 @@ const browserExt = {
   },
   test: () => true,
   load: async () => {
-    await import("./browserAll-B-6hqqmg.js");
+    await import("./browserAll-C1iy5xbx.js");
   }
 };
 const webworkerExt = {
@@ -105394,7 +105954,7 @@ const webworkerExt = {
   },
   test: () => typeof self !== "undefined" && self.WorkerGlobalScope !== void 0,
   load: async () => {
-    await import("./webworkerAll-Bvp7nJ85.js");
+    await import("./webworkerAll-BmgxtxZy.js");
   }
 };
 class ObservablePoint {
@@ -117637,19 +118197,19 @@ async function autoDetectRenderer(options) {
   for (let i2 = 0; i2 < preferredOrder.length; i2++) {
     const rendererType = preferredOrder[i2];
     if (rendererType === "webgpu" && await isWebGPUSupported()) {
-      const { WebGPURenderer } = await import("./WebGPURenderer-kG50TdbS.js");
+      const { WebGPURenderer } = await import("./WebGPURenderer-Dlw7vvZU.js");
       RendererClass = WebGPURenderer;
       finalOptions = { ...options, ...options.webgpu };
       break;
     } else if (rendererType === "webgl" && isWebGLSupported(
       options.failIfMajorPerformanceCaveat ?? AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat
     )) {
-      const { WebGLRenderer } = await import("./WebGLRenderer-BC7QWBvA.js");
+      const { WebGLRenderer } = await import("./WebGLRenderer-CSpWLo6L.js");
       RendererClass = WebGLRenderer;
       finalOptions = { ...options, ...options.webgl };
       break;
     } else if (rendererType === "canvas") {
-      const { CanvasRenderer } = await import("./CanvasRenderer-BDNCY5O9.js");
+      const { CanvasRenderer } = await import("./CanvasRenderer-CPXgnUH1.js");
       RendererClass = CanvasRenderer;
       finalOptions = { ...options, ...options.canvasOptions };
       break;
@@ -132772,8 +133332,10 @@ class IsometricInteractionManager {
     this.sprites = /* @__PURE__ */ new Map();
     this.dragState = null;
     this.hoveredNodeId = null;
+    this.selectedNodeId = null;
     this.draggingEnabled = true;
     this.mapBounds = null;
+    this.hoverColor = 16776960;
     this.onGlobalPointerMove = (event) => {
       var _a, _b;
       if (!this.dragState || !this.dragState.isDragging) return;
@@ -132794,6 +133356,12 @@ class IsometricInteractionManager {
       if (this.wouldCollide(this.dragState.nodeId, { gridX: newGridX, gridY: newGridY })) {
         return;
       }
+      const movedDistance = Math.sqrt(
+        Math.pow(newGridX - this.dragState.spriteStartPos.gridX, 2) + Math.pow(newGridY - this.dragState.spriteStartPos.gridY, 2)
+      );
+      if (movedDistance > 0.5) {
+        this.dragState.hasMoved = true;
+      }
       this.dragState.instance.update(newGridX, newGridY);
       this.updateNearbyHighlights(this.dragState.nodeId, { gridX: newGridX, gridY: newGridY });
       (_b = (_a = this.events).onDragMove) == null ? void 0 : _b.call(_a, this.dragState.nodeId, newGridX, newGridY);
@@ -132813,6 +133381,7 @@ class IsometricInteractionManager {
     this.config = config;
     this.events = events;
     this.mapBounds = config.mapBounds || null;
+    this.selectedColor = config.selectedColor ?? 3900150;
   }
   /**
    * Register a sprite for interaction
@@ -132873,6 +133442,7 @@ class IsometricInteractionManager {
       nodeId,
       instance,
       isDragging: true,
+      hasMoved: false,
       dragStartPos: { x: event.global.x, y: event.global.y },
       spriteStartPos: { gridX: instance.gridPosition.gridX, gridY: instance.gridPosition.gridY },
       nearbySprites: /* @__PURE__ */ new Set()
@@ -132941,9 +133511,9 @@ class IsometricInteractionManager {
    * Finish dragging - snap to grid and cleanup
    */
   finishDrag() {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (!this.dragState) return;
-    const { nodeId, instance, nearbySprites } = this.dragState;
+    const { nodeId, instance, nearbySprites, hasMoved } = this.dragState;
     let snappedGridX = Math.round(instance.gridPosition.gridX);
     let snappedGridY = Math.round(instance.gridPosition.gridY);
     const clamped = this.clampToMapBounds(snappedGridX, snappedGridY, instance.size);
@@ -132956,19 +133526,24 @@ class IsometricInteractionManager {
     instance.update(snappedGridX, snappedGridY);
     instance.sprite.cursor = "pointer";
     instance.highlight.cursor = "pointer";
-    if (this.hoveredNodeId !== nodeId) {
+    if (this.hoveredNodeId !== nodeId && this.selectedNodeId !== nodeId) {
       instance.highlight.visible = false;
     }
     for (const nearbyId of nearbySprites) {
       const nearbyInstance = this.sprites.get(nearbyId);
-      if (nearbyInstance && this.hoveredNodeId !== nearbyId) {
+      if (nearbyInstance && this.hoveredNodeId !== nearbyId && this.selectedNodeId !== nearbyId) {
         nearbyInstance.highlight.visible = false;
       }
     }
     if (this.viewport) {
       this.viewport.plugins.resume("drag");
     }
-    (_b = (_a = this.events).onDragEnd) == null ? void 0 : _b.call(_a, nodeId, snappedGridX, snappedGridY);
+    if (hasMoved) {
+      (_b = (_a = this.events).onDragEnd) == null ? void 0 : _b.call(_a, nodeId, snappedGridX, snappedGridY);
+    } else {
+      this.setSelected(nodeId);
+      (_d = (_c = this.events).onClick) == null ? void 0 : _d.call(_c, nodeId);
+    }
     const eventTarget = this.viewport || this.worldContainer;
     eventTarget.off("globalpointermove", this.onGlobalPointerMove);
     eventTarget.off("pointerup", this.onPointerUp);
@@ -132985,14 +133560,16 @@ class IsometricInteractionManager {
     (_b = (_a = this.events).onHover) == null ? void 0 : _b.call(_a, nodeId);
   }
   /**
-   * Handle pointer out - hide highlight (unless dragging)
+   * Handle pointer out - hide highlight (unless dragging or selected)
    */
   onPointerOut(nodeId, instance) {
     var _a, _b;
     if (this.hoveredNodeId === nodeId) {
       this.hoveredNodeId = null;
     }
-    if (!this.dragState || this.dragState.nodeId !== nodeId) {
+    const isDragging = this.dragState && this.dragState.nodeId === nodeId;
+    const isSelected = this.selectedNodeId === nodeId;
+    if (!isDragging && !isSelected) {
       instance.highlight.visible = false;
     }
     (_b = (_a = this.events).onHoverEnd) == null ? void 0 : _b.call(_a, nodeId);
@@ -133007,6 +133584,55 @@ class IsometricInteractionManager {
       instance.highlight.cursor = enabled ? "pointer" : "default";
     }
   }
+  /**
+   * Set the selected node
+   */
+  setSelected(nodeId) {
+    const previousSelected = this.selectedNodeId;
+    this.selectedNodeId = nodeId;
+    if (previousSelected && previousSelected !== nodeId) {
+      const prevInstance = this.sprites.get(previousSelected);
+      if (prevInstance) {
+        if (this.hoveredNodeId !== previousSelected) {
+          prevInstance.highlight.visible = false;
+        }
+        this.updateHighlightColor(prevInstance, false);
+      }
+    }
+    if (nodeId) {
+      const instance = this.sprites.get(nodeId);
+      if (instance) {
+        instance.highlight.visible = true;
+        this.updateHighlightColor(instance, true);
+      }
+    }
+  }
+  /**
+   * Get the currently selected node ID
+   */
+  getSelectedNodeId() {
+    return this.selectedNodeId;
+  }
+  /**
+   * Update highlight color based on selected state
+   */
+  updateHighlightColor(instance, isSelected) {
+    const color2 = isSelected ? this.selectedColor : this.hoverColor;
+    instance.highlight.clear();
+    const pos = gridToScreen(instance.gridPosition.gridX, instance.gridPosition.gridY);
+    const hoverSize = 4 * instance.size;
+    const tileWidth = hoverSize * (this.config.tileWidth ?? 64);
+    const tileHeight = hoverSize * (this.config.tileHeight ?? 32);
+    instance.highlight.setStrokeStyle({ width: 3, color: color2, alpha: 1 });
+    instance.highlight.setFillStyle({ color: color2, alpha: isSelected ? 0.25 : 0.1 });
+    instance.highlight.moveTo(pos.screenX, pos.screenY - tileHeight / 2);
+    instance.highlight.lineTo(pos.screenX + tileWidth / 2, pos.screenY);
+    instance.highlight.lineTo(pos.screenX, pos.screenY + tileHeight / 2);
+    instance.highlight.lineTo(pos.screenX - tileWidth / 2, pos.screenY);
+    instance.highlight.closePath();
+    instance.highlight.fill();
+    instance.highlight.stroke();
+  }
   /**
    * Check if position would cause boundary overlap with other sprites
    * Boundary size is 4 × size tiles, extending 2 × size in each direction
@@ -133885,6 +134511,8 @@ const OverworldMapPanelContent = ({
   height,
   isLoading = false,
   onProjectMoved,
+  onNodeClicked,
+  selectedNodeId,
   isEditingRegions = false,
   customRegions = [],
   onAddRegion,
@@ -134096,6 +134724,9 @@ const OverworldMapPanelContent = ({
           },
           onDragEnd: (nodeId, gridX, gridY) => {
             onProjectMoved == null ? void 0 : onProjectMoved(nodeId, gridX, gridY);
+          },
+          onClick: (nodeId) => {
+            onNodeClicked == null ? void 0 : onNodeClicked(nodeId);
           }
         }
       );
@@ -134497,6 +135128,11 @@ const OverworldMapPanelContent = ({
       renderPlaceholdersRef.current();
     }
   }, [isEditingRegions]);
+  useEffect(() => {
+    if (interactionRef.current) {
+      interactionRef.current.setSelected(selectedNodeId ?? null);
+    }
+  }, [selectedNodeId]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -134823,7 +135459,9 @@ const CollectionMapPanelContent = ({
   regionLayout,
   isLoading = false,
   regionCallbacks,
-  addRepositoryToCollection
+  addRepositoryToCollection,
+  onRepositoryClicked,
+  selectedRepositoryId
 }) => {
   var _a;
   const customRegions = React2__default.useMemo(
@@ -135316,6 +135954,8 @@ This indicates a sprite was rendered without valid backing data.`
             customRegions,
             collectionKey: collection.id,
             onProjectMoved: handleProjectMoved,
+            onNodeClicked: onRepositoryClicked,
+            selectedNodeId: selectedRepositoryId,
             onViewportReady: handleViewportReady,
             onAddRegion: async (position2) => {
               const order2 = position2.row * 10 + position2.col;
@@ -135480,7 +136120,9 @@ const CollectionMapPanel = ({ context: context2, actions }) => {
       dependencies,
       isLoading,
       regionCallbacks,
-      addRepositoryToCollection: actions.addRepositoryToCollection
+      addRepositoryToCollection: actions.addRepositoryToCollection,
+      onRepositoryClicked: actions.onRepositoryClicked,
+      selectedRepositoryId: actions.selectedRepositoryId
     }
   ) });
 };
@@ -136577,4 +137219,4 @@ export {
   UPDATE_PRIORITY as y,
   removeItems as z
 };
-//# sourceMappingURL=index-DqpaKlrF.js.map
+//# sourceMappingURL=index-BwWx2Yhi.js.map