@industry-theme/repository-composition-panels 0.6.32 → 0.6.34

package/dist/{index-CBrdpzxz.js → index-IWPV2XCJ.js}

@@ -1555,7 +1555,7 @@ const DependencyRow = ({ dependency }) => {
   const [copied, setCopied] = useState(false);
   const getDependencyTypeBadgeStyle = (type2) => {
     const baseStyle = {
-      fontSize: "9px",
+      fontSize: `${theme2.fontSizes[0]}px`,
       fontWeight: theme2.fontWeights.medium,
       fontFamily: theme2.fonts.body,
       lineHeight: 1.2
@@ -1618,7 +1618,7 @@ const DependencyRow = ({ dependency }) => {
         padding: `${theme2.space[2]}px ${theme2.space[3]}px`,
         backgroundColor: theme2.colors.background,
         borderRadius: 0,
-        fontSize: `${theme2.fontSizes[1]}px`,
+        fontSize: `${theme2.fontSizes[0]}px`,
         fontFamily: theme2.fonts.body,
         borderBottom: `1px solid ${theme2.colors.border}`,
         transition: "all 0.2s",
@@ -1638,28 +1638,15 @@ const DependencyRow = ({ dependency }) => {
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ jsxs(
-                "div",
+              dependency.namespace && /* @__PURE__ */ jsx(
+                "span",
                 {
                   style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "4px"
+                    fontSize: `${theme2.fontSizes[0]}px`,
+                    color: theme2.colors.textSecondary,
+                    fontFamily: theme2.fonts.body
                   },
-                  children: [
-                    dependency.namespace && /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          fontSize: "10px",
-                          color: theme2.colors.textSecondary,
-                          fontFamily: theme2.fonts.body
-                        },
-                        children: dependency.namespace
-                      }
-                    ),
-                    dependency.dependencyTypes.map((type2) => /* @__PURE__ */ jsx("span", { style: getDependencyTypeBadgeStyle(type2), children: typeLabels[type2] }, type2))
-                  ]
+                  children: dependency.namespace
                 }
               ),
               /* @__PURE__ */ jsxs(
@@ -1675,6 +1662,7 @@ const DependencyRow = ({ dependency }) => {
                       "span",
                       {
                         style: {
+                          fontSize: `${theme2.fontSizes[2]}px`,
                           fontWeight: theme2.fontWeights.medium,
                           color: theme2.colors.text,
                           overflow: "hidden",
@@ -1711,33 +1699,38 @@ const DependencyRow = ({ dependency }) => {
           {
             style: {
               display: "flex",
-              alignItems: "center",
-              gap: "4px"
+              flexDirection: "column",
+              alignItems: "flex-end",
+              gap: "2px"
             },
             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$1, { size: 12 }) : /* @__PURE__ */ jsx(Copy$1, { size: 12 })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    color: theme2.colors.textSecondary,
-                    fontFamily: theme2.fonts.body
-                  },
-                  children: dependency.version
-                }
-              )
+              /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "4px" }, children: dependency.dependencyTypes.map((type2) => /* @__PURE__ */ jsx("span", { style: getDependencyTypeBadgeStyle(type2), children: typeLabels[type2] }, type2)) }),
+              /* @__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$1, { size: 12 }) : /* @__PURE__ */ jsx(Copy$1, { size: 12 })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: `${theme2.fontSizes[2]}px`,
+                      color: theme2.colors.textSecondary,
+                      fontFamily: theme2.fonts.body
+                    },
+                    children: dependency.version
+                  }
+                )
+              ] })
             ]
           }
         )
@@ -1843,7 +1836,7 @@ const FilterBar = ({
               style: {
                 flex: 1,
                 padding: `${theme2.space[2]}px ${theme2.space[2]}px`,
-                fontSize: `${theme2.fontSizes[0]}px`,
+                fontSize: `${theme2.fontSizes[1]}px`,
                 fontWeight: theme2.fontWeights.medium,
                 fontFamily: theme2.fonts.body,
                 borderRadius: 0,
@@ -1876,191 +1869,6 @@ const FilterBar = ({
     }
   );
 };
-const InheritedConfigIndicator = ({
-  config,
-  onClick
-}) => {
-  const { theme: theme2 } = useTheme();
-  const isInherited = config.isInherited;
-  const isInline = config.isInline;
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick: () => onClick == null ? void 0 : onClick(config),
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "8px",
-        padding: "6px 10px",
-        backgroundColor: isInherited ? theme2.colors.primary + "08" : theme2.colors.backgroundTertiary,
-        border: `1px solid ${isInherited ? theme2.colors.primary + "30" : theme2.colors.border}`,
-        borderRadius: "4px",
-        cursor: onClick ? "pointer" : "default",
-        width: "100%",
-        textAlign: "left",
-        transition: "all 0.15s ease"
-      },
-      onMouseEnter: (e2) => {
-        if (onClick) {
-          e2.currentTarget.style.borderColor = theme2.colors.primary;
-        }
-      },
-      onMouseLeave: (e2) => {
-        e2.currentTarget.style.borderColor = isInherited ? theme2.colors.primary + "30" : theme2.colors.border;
-      },
-      children: [
-        isInherited ? /* @__PURE__ */ jsx(ArrowUp$1, { size: 14, color: theme2.colors.primary }) : /* @__PURE__ */ jsx(FileCode$1, { size: 14, color: theme2.colors.textSecondary }),
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                fontSize: theme2.fontSizes[1],
-                fontWeight: 500,
-                color: theme2.colors.text,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: [
-                config.name,
-                isInline && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      marginLeft: "6px",
-                      padding: "1px 5px",
-                      backgroundColor: theme2.colors.textSecondary + "20",
-                      color: theme2.colors.textSecondary,
-                      borderRadius: "3px",
-                      fontSize: theme2.fontSizes[0],
-                      fontWeight: 400
-                    },
-                    children: config.inlineField
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                fontSize: theme2.fontSizes[0],
-                color: theme2.colors.textSecondary,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: isInherited ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.primary }, children: "inherited" }),
-                config.inheritedFrom && /* @__PURE__ */ jsxs("span", { children: [
-                  " from ",
-                  config.inheritedFrom
-                ] })
-              ] }) : config.path
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              padding: "2px 6px",
-              backgroundColor: theme2.colors.backgroundSecondary,
-              color: theme2.colors.textSecondary,
-              borderRadius: "3px",
-              fontSize: theme2.fontSizes[0],
-              fontWeight: 500,
-              textTransform: "uppercase"
-            },
-            children: config.type
-          }
-        )
-      ]
-    }
-  );
-};
-const ConfigList = ({
-  configs,
-  onConfigClick
-}) => {
-  const { theme: theme2 } = useTheme();
-  const localConfigs = configs.filter((c2) => !c2.isInherited);
-  const inheritedConfigs = configs.filter((c2) => c2.isInherited);
-  if (configs.length === 0) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          padding: "12px",
-          color: theme2.colors.textSecondary,
-          fontSize: theme2.fontSizes[1],
-          textAlign: "center"
-        },
-        children: "No config files detected"
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
-    localConfigs.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            fontSize: theme2.fontSizes[0],
-            color: theme2.colors.textSecondary,
-            marginBottom: "6px",
-            fontWeight: 500
-          },
-          children: [
-            "Local (",
-            localConfigs.length,
-            ")"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: localConfigs.map((config) => /* @__PURE__ */ jsx(
-        InheritedConfigIndicator,
-        {
-          config,
-          onClick: onConfigClick
-        },
-        config.path + config.name
-      )) })
-    ] }),
-    inheritedConfigs.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            fontSize: theme2.fontSizes[0],
-            color: theme2.colors.primary,
-            marginBottom: "6px",
-            fontWeight: 500,
-            display: "flex",
-            alignItems: "center",
-            gap: "4px"
-          },
-          children: [
-            /* @__PURE__ */ jsx(ArrowUp$1, { size: 12 }),
-            "Inherited (",
-            inheritedConfigs.length,
-            ")"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: inheritedConfigs.map((config) => /* @__PURE__ */ jsx(
-        InheritedConfigIndicator,
-        {
-          config,
-          onClick: onConfigClick
-        },
-        config.path + config.name
-      )) })
-    ] })
-  ] });
-};
 const LensRow = ({ lens }) => {
   const { theme: theme2 } = useTheme();
   const [isExpanded, setIsExpanded] = useState(false);
@@ -2997,11 +2805,14 @@ const PackageDetailCard = ({
   onConfigClick,
   onPackageClick,
   standalone = false,
-  readFile
+  readFile,
+  onClose
 }) => {
   var _a, _b, _c, _d, _e2, _f, _g, _h, _i;
   const { theme: theme2 } = useTheme();
-  const [activeTab, setActiveTab] = useState("dependencies");
+  const [activeTab, setActiveTab] = useState(
+    "dependencies"
+  );
   const [activeFilters, setActiveFilters] = useState(/* @__PURE__ */ new Set());
   const [searchQuery, setSearchQuery] = useState("");
   const [showInfoModal, setShowInfoModal] = useState(false);
@@ -3029,7 +2840,7 @@ const PackageDetailCard = ({
     if (!pkg.configFiles) return [];
     return Object.entries(pkg.configFiles).filter(([, config]) => config == null ? void 0 : config.exists).map(([name2, config]) => ({ name: name2, ...config }));
   }, [pkg.configFiles]);
-  const configCounts = useMemo(() => {
+  useMemo(() => {
     const local = configFiles.filter((c2) => !c2.isInherited).length;
     const inherited = configFiles.filter((c2) => c2.isInherited).length;
     return { local, inherited, total: configFiles.length };
@@ -3127,7 +2938,7 @@ const PackageDetailCard = ({
               PackageManagerIcon,
               {
                 packageManager: pkg.packageData.packageManager,
-                size: 18
+                size: 32
               }
             ),
             /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
@@ -3146,7 +2957,7 @@ const PackageDetailCard = ({
                   children: pkg.packageData.name
                 }
               ),
-              pkg.packageData.version && /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsxs(
                 "div",
                 {
                   style: {
@@ -3155,34 +2966,36 @@ const PackageDetailCard = ({
                     color: theme2.colors.textSecondary
                   },
                   children: [
-                    "v",
-                    pkg.packageData.version
+                    pkg.packageData.path || "root",
+                    pkg.packageData.version && ` - v${pkg.packageData.version}`
                   ]
                 }
               )
             ] }),
-            pkg.packageData.path && /* @__PURE__ */ jsxs(
+            onClose && /* @__PURE__ */ jsx(
               "button",
               {
-                onClick: () => onPackageClick == null ? void 0 : onPackageClick(pkg.packageData.path),
+                onClick: onClose,
                 style: {
                   display: "flex",
                   alignItems: "center",
-                  gap: "4px",
-                  padding: "4px 8px",
-                  backgroundColor: theme2.colors.backgroundTertiary,
-                  border: `1px solid ${theme2.colors.border}`,
+                  justifyContent: "center",
+                  padding: "4px",
+                  backgroundColor: "transparent",
+                  border: "none",
                   borderRadius: "4px",
                   color: theme2.colors.textSecondary,
-                  fontSize: theme2.fontSizes[0],
-                  fontFamily: theme2.fonts.body,
-                  cursor: "pointer"
+                  cursor: "pointer",
+                  transition: "color 0.15s ease"
                 },
-                title: "Open package folder",
-                children: [
-                  /* @__PURE__ */ jsx(Folder$1, { size: 12 }),
-                  pkg.packageData.path || "root"
-                ]
+                onMouseEnter: (e2) => {
+                  e2.currentTarget.style.color = theme2.colors.text;
+                },
+                onMouseLeave: (e2) => {
+                  e2.currentTarget.style.color = theme2.colors.textSecondary;
+                },
+                title: "Close",
+                children: /* @__PURE__ */ jsx(X$3, { size: 18 })
               }
             )
           ]
@@ -3277,12 +3090,6 @@ const PackageDetailCard = ({
                 count: 1
               }
             ] : [],
-            {
-              id: "configs",
-              label: "Configs",
-              count: configCounts.total,
-              inherited: configCounts.inherited
-            },
             {
               id: "lenses",
               label: "Lenses",
@@ -3322,7 +3129,7 @@ const PackageDetailCard = ({
                       fontSize: theme2.fontSizes[0],
                       fontFamily: theme2.fonts.body
                     },
-                    children: "total" in tab2 ? `${tab2.count}/${tab2.total}` : "inherited" in tab2 && (tab2.inherited ?? 0) > 0 ? `${tab2.count} (${tab2.inherited}↑)` : tab2.count
+                    children: "total" in tab2 ? `${tab2.count}/${tab2.total}` : tab2.count
                   }
                 )
               ]
@@ -3593,7 +3400,6 @@ const PackageDetailCard = ({
                 }
               )
             ] }),
-            activeTab === "configs" && /* @__PURE__ */ jsx("div", { style: { padding: "12px" }, children: /* @__PURE__ */ jsx(ConfigList, { configs: configFiles, onConfigClick }) }),
             activeTab === "lenses" && /* @__PURE__ */ jsxs(
               "div",
               {
@@ -3754,7 +3560,7 @@ const PackageDetailCard = ({
                     children: pkg.packageData.name
                   }
                 ),
-                pkg.packageData.version && /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsxs(
                   "div",
                   {
                     style: {
@@ -3763,8 +3569,8 @@ const PackageDetailCard = ({
                       color: theme2.colors.textSecondary
                     },
                     children: [
-                      "v",
-                      pkg.packageData.version
+                      pkg.packageData.path || "root",
+                      pkg.packageData.version && ` - v${pkg.packageData.version}`
                     ]
                   }
                 )
@@ -3821,12 +3627,6 @@ const PackageDetailCard = ({
                     count: 1
                   }
                 ] : [],
-                {
-                  id: "configs",
-                  label: "Configs",
-                  count: configCounts.total,
-                  inherited: configCounts.inherited
-                },
                 {
                   id: "lenses",
                   label: "Lenses",
@@ -3866,7 +3666,7 @@ const PackageDetailCard = ({
                           fontSize: theme2.fontSizes[0],
                           fontFamily: theme2.fonts.body
                         },
-                        children: "total" in tab2 ? `${tab2.count}/${tab2.total}` : "inherited" in tab2 && (tab2.inherited ?? 0) > 0 ? `${tab2.count} (${tab2.inherited}↑)` : tab2.count
+                        children: "total" in tab2 ? `${tab2.count}/${tab2.total}` : tab2.count
                       }
                     )
                   ]
@@ -4137,13 +3937,6 @@ const PackageDetailCard = ({
                     }
                   )
                 ] }),
-                activeTab === "configs" && /* @__PURE__ */ jsx("div", { style: { padding: "12px" }, children: /* @__PURE__ */ jsx(
-                  ConfigList,
-                  {
-                    configs: configFiles,
-                    onConfigClick
-                  }
-                ) }),
                 activeTab === "lenses" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
                   /* @__PURE__ */ jsx(
                     LensReadinessSection,
@@ -4274,17 +4067,12 @@ const PackageSummaryCard = ({
   onClick,
   onHover
 }) => {
-  var _a, _b;
+  var _a;
   const { theme: theme2 } = useTheme();
   const deps = pkg.packageData.dependencies || {};
   const devDeps = pkg.packageData.devDependencies || {};
   const peerDeps = pkg.packageData.peerDependencies || {};
   const totalDeps = Object.keys(deps).length + Object.keys(devDeps).length + Object.keys(peerDeps).length;
-  const 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]
@@ -4334,7 +4122,7 @@ const PackageSummaryCard = ({
             PackageManagerIcon,
             {
               packageManager: pkg.packageData.packageManager,
-              size: 20
+              size: 32
             }
           ),
           /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
@@ -4353,22 +4141,19 @@ const PackageSummaryCard = ({
                 children: pkg.packageData.name
               }
             ),
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(
               "div",
               {
                 style: {
-                  fontSize: theme2.fontSizes[1],
+                  fontSize: theme2.fontSizes[0],
                   fontFamily: theme2.fonts.body,
                   color: theme2.colors.textSecondary
                 },
-                children: [
-                  pkg.packageData.path || "root",
-                  pkg.packageData.version && ` • v${pkg.packageData.version}`
-                ]
+                children: pkg.packageData.path || "root"
               }
             )
           ] }),
-          pkg.packageData.isMonorepoRoot && ((_b = pkg.packageData.monorepoMetadata) == null ? void 0 : _b.orchestrator) && /* @__PURE__ */ jsx(
+          pkg.packageData.isMonorepoRoot && ((_a = pkg.packageData.monorepoMetadata) == null ? void 0 : _a.orchestrator) && /* @__PURE__ */ jsx(
             OrchestratorBadge,
             {
               orchestrator: pkg.packageData.monorepoMetadata.orchestrator,
@@ -4464,32 +4249,16 @@ const PackageSummaryCard = ({
               color: theme2.colors.textSecondary
             },
             children: [
+              pkg.packageData.version && /* @__PURE__ */ jsxs("span", { children: [
+                "v",
+                pkg.packageData.version
+              ] }),
               /* @__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"
-                ] })
               ] })
             ]
           }
@@ -4690,7 +4459,7 @@ const PackageCompositionPanelContent = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(
               "div",
               {
                 style: {
@@ -4700,68 +4469,24 @@ const PackageCompositionPanelContent = ({
                   flexDirection: "column",
                   overflow: "hidden"
                 },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        padding: "8px 12px",
-                        borderBottom: `1px solid ${theme2.colors.border}`,
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "8px",
-                        flexShrink: 0
-                      },
-                      children: /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          onClick: () => {
-                            setSelectedPackageId(null);
-                            onPackageSelect == null ? void 0 : onPackageSelect(null);
-                          },
-                          style: {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "4px",
-                            padding: "4px 8px",
-                            backgroundColor: "transparent",
-                            border: "none",
-                            borderRadius: "4px",
-                            color: theme2.colors.accent,
-                            fontSize: theme2.fontSizes[1],
-                            fontFamily: theme2.fonts.body,
-                            cursor: "pointer",
-                            transition: "background-color 0.15s ease"
-                          },
-                          onMouseEnter: (e2) => {
-                            e2.currentTarget.style.backgroundColor = theme2.colors.backgroundTertiary;
-                          },
-                          onMouseLeave: (e2) => {
-                            e2.currentTarget.style.backgroundColor = "transparent";
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx(ChevronLeft$1, { size: 16 }),
-                            "All Packages"
-                          ]
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: selectedPackage && /* @__PURE__ */ jsx(
-                    PackageDetailCard,
-                    {
-                      pkg: selectedPackage,
-                      isExpanded: true,
-                      onToggle: () => {
-                      },
-                      onCommandClick,
-                      onConfigClick,
-                      onPackageClick,
-                      standalone: true,
-                      readFile
+                children: /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: selectedPackage && /* @__PURE__ */ jsx(
+                  PackageDetailCard,
+                  {
+                    pkg: selectedPackage,
+                    isExpanded: true,
+                    onToggle: () => {
+                    },
+                    onCommandClick,
+                    onConfigClick,
+                    onPackageClick,
+                    standalone: true,
+                    readFile,
+                    onClose: () => {
+                      setSelectedPackageId(null);
+                      onPackageSelect == null ? void 0 : onPackageSelect(null);
                     }
-                  ) })
-                ]
+                  }
+                ) })
               }
             )
           ]
@@ -106176,7 +105901,7 @@ const browserExt = {
   },
   test: () => true,
   load: async () => {
-    await import("./browserAll-DI7lMMAJ.js");
+    await import("./browserAll-C4GwI3ax.js");
   }
 };
 const webworkerExt = {
@@ -106187,7 +105912,7 @@ const webworkerExt = {
   },
   test: () => typeof self !== "undefined" && self.WorkerGlobalScope !== void 0,
   load: async () => {
-    await import("./webworkerAll-BDQrDn0n.js");
+    await import("./webworkerAll-vHNhL1AY.js");
   }
 };
 class ObservablePoint {
@@ -118430,19 +118155,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-BcDZvCNz.js");
+      const { WebGPURenderer } = await import("./WebGPURenderer-HXlJ-pks.js");
       RendererClass = WebGPURenderer;
       finalOptions = { ...options, ...options.webgpu };
       break;
     } else if (rendererType === "webgl" && isWebGLSupported(
       options.failIfMajorPerformanceCaveat ?? AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat
     )) {
-      const { WebGLRenderer } = await import("./WebGLRenderer-BSys64oZ.js");
+      const { WebGLRenderer } = await import("./WebGLRenderer-CQCm4mBz.js");
       RendererClass = WebGLRenderer;
       finalOptions = { ...options, ...options.webgl };
       break;
     } else if (rendererType === "canvas") {
-      const { CanvasRenderer } = await import("./CanvasRenderer--e2h72qI.js");
+      const { CanvasRenderer } = await import("./CanvasRenderer-D4giVlw_.js");
       RendererClass = CanvasRenderer;
       finalOptions = { ...options, ...options.canvasOptions };
       break;
@@ -138497,4 +138222,4 @@ export {
   UPDATE_PRIORITY as y,
   removeItems as z
 };
-//# sourceMappingURL=index-CBrdpzxz.js.map
+//# sourceMappingURL=index-IWPV2XCJ.js.map