@trops/dash-core 0.1.27 → 0.1.29

package/dist/index.js

@@ -7180,39 +7180,45 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
     isCreatingProvider = _useState24[0],
     setIsCreatingProvider = _useState24[1];
 
-  // Registry state
-  var _useState25 = React.useState(false),
+  // Installed widget grouping
+  var _useState25 = React.useState(new Set()),
     _useState26 = _slicedToArray(_useState25, 2),
-    isLoadingRegistry = _useState26[0],
-    setIsLoadingRegistry = _useState26[1];
-  var _useState27 = React.useState(null),
+    expandedGroups = _useState26[0],
+    setExpandedGroups = _useState26[1];
+
+  // Registry state
+  var _useState27 = React.useState(false),
     _useState28 = _slicedToArray(_useState27, 2),
-    registryError = _useState28[0],
-    setRegistryError = _useState28[1];
-  var _useState29 = React.useState([]),
+    isLoadingRegistry = _useState28[0],
+    setIsLoadingRegistry = _useState28[1];
+  var _useState29 = React.useState(null),
     _useState30 = _slicedToArray(_useState29, 2),
-    registryPackages = _useState30[0],
-    setRegistryPackages = _useState30[1];
-  var _useState31 = React.useState("packages"),
+    registryError = _useState30[0],
+    setRegistryError = _useState30[1];
+  var _useState31 = React.useState([]),
     _useState32 = _slicedToArray(_useState31, 2),
-    registryViewMode = _useState32[0],
-    setRegistryViewMode = _useState32[1]; // "packages" | "widgets"
-  var _useState33 = React.useState(new Set()),
+    registryPackages = _useState32[0],
+    setRegistryPackages = _useState32[1];
+  var _useState33 = React.useState("packages"),
     _useState34 = _slicedToArray(_useState33, 2),
-    expandedPackages = _useState34[0],
-    setExpandedPackages = _useState34[1];
-  var _useState35 = React.useState(null),
+    registryViewMode = _useState34[0],
+    setRegistryViewMode = _useState34[1]; // "packages" | "widgets"
+  var _useState35 = React.useState(new Set()),
     _useState36 = _slicedToArray(_useState35, 2),
-    selectedPackage = _useState36[0],
-    setSelectedPackage = _useState36[1];
-  var _useState37 = React.useState(false),
+    expandedPackages = _useState36[0],
+    setExpandedPackages = _useState36[1];
+  var _useState37 = React.useState(null),
     _useState38 = _slicedToArray(_useState37, 2),
-    isInstalling = _useState38[0],
-    setIsInstalling = _useState38[1];
-  var _useState39 = React.useState(null),
+    selectedPackage = _useState38[0],
+    setSelectedPackage = _useState38[1];
+  var _useState39 = React.useState(false),
     _useState40 = _slicedToArray(_useState39, 2),
-    installError = _useState40[0],
-    setInstallError = _useState40[1];
+    isInstalling = _useState40[0],
+    setIsInstalling = _useState40[1];
+  var _useState41 = React.useState(null),
+    _useState42 = _slicedToArray(_useState41, 2),
+    installError = _useState42[0],
+    setInstallError = _useState42[1];
 
   // Phase 3: Recent Widgets - localStorage functions
   var loadRecentWidgets = function loadRecentWidgets() {
@@ -7284,6 +7290,7 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
       setSearchQuery("");
       setSelectedAuthor("all");
       setSelectedProvider("all");
+      setExpandedGroups(new Set()); // Start with all groups collapsed
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
@@ -7437,6 +7444,42 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
   };
   var filteredWidgets = getFilteredWidgets();
 
+  // Set of installed package names for "Installed" badge in Discover mode
+  var installedPackageNames = React.useMemo(function () {
+    var names = new Set();
+    var map = ComponentManager.map();
+    Object.values(map).forEach(function (widget) {
+      if (widget._sourcePackage) names.add(widget._sourcePackage);
+    });
+    return names;
+  }, [widgets]);
+
+  // Group installed widgets by package > author > "Other"
+  var groupedInstalledWidgets = React.useMemo(function () {
+    if (selectedSource !== "Installed") return {};
+    var groups = {};
+    filteredWidgets.forEach(function (widget) {
+      var group = widget["package"] || widget.author || "Other";
+      if (!groups[group]) groups[group] = [];
+      groups[group].push(widget);
+    });
+    return groups;
+  }, [filteredWidgets, selectedSource]);
+  var installedGroupNames = React.useMemo(function () {
+    return Object.keys(groupedInstalledWidgets).sort();
+  }, [groupedInstalledWidgets]);
+  var toggleGroup = function toggleGroup(groupName) {
+    setExpandedGroups(function (prev) {
+      var next = new Set(prev);
+      if (next.has(groupName)) {
+        next["delete"](groupName);
+      } else {
+        next.add(groupName);
+      }
+      return next;
+    });
+  };
+
   // Group filtered widgets by package (for package view in Discover)
   var getGroupedByPackage = function getGroupedByPackage() {
     var groups = {};
@@ -7637,8 +7680,10 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
   var isAddButtonEnabled = function isAddButtonEnabled() {
     if (!selectedWidget) return false;
 
-    // For registry widgets, always enabled (install action)
-    if (selectedWidget.isRegistry) return true;
+    // For registry widgets, enabled unless already installed
+    if (selectedWidget.isRegistry) {
+      return !installedPackageNames.has(selectedWidget.packageName);
+    }
 
     // Check providers: all required providers must be selected
     var hasRequiredProviders = selectedWidget.providers ? selectedWidget.providers.filter(function (p) {
@@ -7743,31 +7788,56 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
               children: /*#__PURE__*/jsxRuntime.jsx("div", {
                 className: "flex items-center justify-between w-full",
                 children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-                  className: "flex items-center space-x-2 flex-1 min-w-0",
+                  className: "flex items-center gap-2 flex-1 min-w-0",
                   children: [/*#__PURE__*/jsxRuntime.jsx("span", {
                     className: "text-xs text-gray-500",
                     children: expandedPackages.has(group.name) ? "\u25BC" : "\u25B6"
                   }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                     className: "min-w-0 flex-1",
                     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-                      className: "text-base font-medium truncate",
+                      className: "text-sm font-medium truncate",
                       children: group.displayName
                     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                       className: "text-xs text-gray-500",
                       children: [group.widgets.length, " widget", group.widgets.length !== 1 ? "s" : "", " \xB7 v", group.version]
                     })]
+                  }), installedPackageNames.has(group.name) && /*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "text-[10px] px-1.5 py-0.5 rounded bg-green-500/20 text-green-400 flex-shrink-0",
+                    children: "Installed"
                   })]
                 })
               })
             }), expandedPackages.has(group.name) && group.widgets.map(function (widget) {
+              var _widget$providers;
               return /*#__PURE__*/jsxRuntime.jsx(DashReact.MenuItem3, {
                 onClick: function onClick() {
                   return handleWidgetSelect(widget);
                 },
                 selected: (selectedWidget === null || selectedWidget === void 0 ? void 0 : selectedWidget.key) === widget.key,
-                children: /*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "pl-6 text-sm",
-                  children: widget.name
+                children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex items-center gap-2 pl-6 w-full",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(WidgetIcon, {
+                    icon: widget.icon,
+                    className: "h-4 w-4 opacity-60 flex-shrink-0",
+                    fallback: "puzzle-piece"
+                  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                    className: "flex-1 min-w-0",
+                    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                      className: "text-sm font-medium truncate",
+                      children: widget.name
+                    }), widget.description && /*#__PURE__*/jsxRuntime.jsx("div", {
+                      className: "text-xs opacity-50 truncate",
+                      children: widget.description
+                    }), ((_widget$providers = widget.providers) === null || _widget$providers === void 0 ? void 0 : _widget$providers.length) > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+                      className: "flex flex-wrap gap-1 mt-0.5",
+                      children: widget.providers.map(function (p) {
+                        return /*#__PURE__*/jsxRuntime.jsx("span", {
+                          className: "text-[10px] px-1.5 py-0.5 rounded bg-blue-500/20 text-blue-300",
+                          children: p.type
+                        }, p.type);
+                      })
+                    })]
+                  })]
                 })
               }, widget.key);
             })]
@@ -7782,19 +7852,44 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
       padding: true,
       height: "h-full",
       children: filteredWidgets.map(function (widget) {
+        var _widget$providers2;
         return /*#__PURE__*/jsxRuntime.jsx(DashReact.MenuItem3, {
           onClick: function onClick() {
             return handleWidgetSelect(widget);
           },
           selected: (selectedWidget === null || selectedWidget === void 0 ? void 0 : selectedWidget.key) === widget.key,
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex items-center justify-between w-full",
-            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "text-base font-medium",
-              children: widget.name
-            }), /*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "text-xs text-gray-500",
-              children: widget.packageDisplayName
+            className: "flex items-center gap-2 w-full",
+            children: [/*#__PURE__*/jsxRuntime.jsx(WidgetIcon, {
+              icon: widget.icon,
+              className: "h-4 w-4 opacity-60 flex-shrink-0",
+              fallback: "puzzle-piece"
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex-1 min-w-0",
+              children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "text-sm font-medium truncate",
+                children: widget.name
+              }), widget.description && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "text-xs opacity-50 truncate",
+                children: widget.description
+              }), ((_widget$providers2 = widget.providers) === null || _widget$providers2 === void 0 ? void 0 : _widget$providers2.length) > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "flex flex-wrap gap-1 mt-0.5",
+                children: widget.providers.map(function (p) {
+                  return /*#__PURE__*/jsxRuntime.jsx("span", {
+                    className: "text-[10px] px-1.5 py-0.5 rounded bg-blue-500/20 text-blue-300",
+                    children: p.type
+                  }, p.type);
+                })
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex items-center gap-1.5 flex-shrink-0",
+              children: [installedPackageNames.has(widget.packageName) && /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-[10px] px-1.5 py-0.5 rounded bg-green-500/20 text-green-400",
+                children: "Installed"
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-xs text-gray-500",
+                children: widget.packageDisplayName
+              })]
             })]
           })
         }, widget.key);
@@ -7826,6 +7921,9 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
           }), /*#__PURE__*/jsxRuntime.jsxs("span", {
             className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " text-gray-300"),
             children: ["v", selectedWidget.packageVersion]
+          }), installedPackageNames.has(selectedWidget.packageName) && /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-xs px-2 py-0.5 rounded bg-green-500/20 text-green-400",
+            children: "Installed"
           })]
         })]
       }), /*#__PURE__*/jsxRuntime.jsx("hr", {
@@ -7903,7 +8001,7 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
         children: /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "flex flex-col w-full h-full overflow-clip",
           children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex flex-row w-full h-full space-x-4 overflow-clip p-6",
+            className: "flex flex-row w-full flex-1 min-h-0 space-x-4 overflow-clip p-6",
             children: [/*#__PURE__*/jsxRuntime.jsx("div", {
               className: "hidden lg:flex flex-col flex-shrink h-full rounded font-medium text-gray-400 w-1/3",
               children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -7919,70 +8017,78 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
             }), /*#__PURE__*/jsxRuntime.jsxs("div", {
               className: "flex flex-col w-full lg:w-2/3 h-full overflow-hidden",
               children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex flex-row items-center space-x-3 mb-4 px-2",
-                children: [/*#__PURE__*/jsxRuntime.jsx("input", {
-                  type: "text",
-                  placeholder: selectedSource === "Discover" ? "Search packages and widgets..." : "Search widgets...",
-                  value: searchQuery,
-                  onChange: function onChange(e) {
-                    return setSearchQuery(e.target.value);
-                  },
-                  className: "flex-1 px-3 py-2 rounded text-sm ".concat(currentTheme["bg-primary-medium"], " ").concat(currentTheme["text-primary-light"], " ").concat(currentTheme["border-primary-medium"], " border focus:outline-none focus:ring-2 focus:ring-blue-500")
-                }), /*#__PURE__*/jsxRuntime.jsxs("select", {
-                  value: selectedAuthor,
-                  onChange: function onChange(e) {
-                    return setSelectedAuthor(e.target.value);
-                  },
-                  className: "px-3 py-2 rounded text-sm ".concat(currentTheme["bg-primary-medium"], " ").concat(currentTheme["text-primary-light"], " ").concat(currentTheme["border-primary-medium"], " border focus:outline-none focus:ring-2 focus:ring-blue-500"),
-                  children: [/*#__PURE__*/jsxRuntime.jsx("option", {
-                    value: "all",
-                    children: "All Authors"
-                  }), getUniqueAuthors().map(function (author) {
-                    return /*#__PURE__*/jsxRuntime.jsx("option", {
-                      value: author,
-                      children: author
-                    }, author);
-                  })]
-                }), selectedSource === "Installed" && /*#__PURE__*/jsxRuntime.jsxs("select", {
-                  value: selectedProvider,
-                  onChange: function onChange(e) {
-                    return setSelectedProvider(e.target.value);
-                  },
-                  className: "px-3 py-2 rounded text-sm ".concat(currentTheme["bg-primary-medium"], " ").concat(currentTheme["text-primary-light"], " ").concat(currentTheme["border-primary-medium"], " border focus:outline-none focus:ring-2 focus:ring-blue-500"),
-                  children: [/*#__PURE__*/jsxRuntime.jsx("option", {
-                    value: "all",
-                    children: "All Providers"
-                  }), getUniqueProviders().map(function (provider) {
-                    return /*#__PURE__*/jsxRuntime.jsx("option", {
-                      value: provider,
-                      children: provider === "none" ? "No Providers" : provider
-                    }, provider);
-                  })]
-                }), selectedSource === "Discover" && /*#__PURE__*/jsxRuntime.jsxs("select", {
-                  value: registryViewMode,
-                  onChange: function onChange(e) {
-                    return setRegistryViewMode(e.target.value);
-                  },
-                  className: "px-3 py-2 rounded text-sm ".concat(currentTheme["bg-primary-medium"], " ").concat(currentTheme["text-primary-light"], " ").concat(currentTheme["border-primary-medium"], " border focus:outline-none focus:ring-2 focus:ring-blue-500"),
-                  children: [/*#__PURE__*/jsxRuntime.jsx("option", {
-                    value: "packages",
-                    children: "Packages"
-                  }), /*#__PURE__*/jsxRuntime.jsx("option", {
-                    value: "widgets",
-                    children: "Widgets"
+                className: "flex flex-col gap-3 mb-4 px-2",
+                children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex flex-row items-center gap-3",
+                  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                    className: "flex bg-white/5 rounded-md p-0.5 flex-shrink-0",
+                    children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+                      type: "button",
+                      onClick: function onClick() {
+                        return setSelectedSource("Installed");
+                      },
+                      className: "px-3 py-1.5 rounded text-sm transition-colors ".concat(selectedSource === "Installed" ? "bg-white/10 font-medium opacity-90" : "opacity-50 hover:opacity-70"),
+                      children: "Installed"
+                    }), /*#__PURE__*/jsxRuntime.jsx("button", {
+                      type: "button",
+                      onClick: function onClick() {
+                        return setSelectedSource("Discover");
+                      },
+                      className: "px-3 py-1.5 rounded text-sm transition-colors ".concat(selectedSource === "Discover" ? "bg-white/10 font-medium opacity-90" : "opacity-50 hover:opacity-70"),
+                      children: "Discover"
+                    })]
+                  }), /*#__PURE__*/jsxRuntime.jsx(DashReact.SearchInput, {
+                    value: searchQuery,
+                    onChange: setSearchQuery,
+                    placeholder: selectedSource === "Discover" ? "Search packages and widgets..." : "Search widgets...",
+                    className: "flex-1",
+                    inputClassName: "py-1.5 text-sm"
                   })]
-                }), /*#__PURE__*/jsxRuntime.jsxs("select", {
-                  value: selectedSource,
-                  onChange: function onChange(e) {
-                    return setSelectedSource(e.target.value);
-                  },
-                  className: "px-3 py-2 rounded text-sm ".concat(currentTheme["bg-primary-medium"], " ").concat(currentTheme["text-primary-light"], " ").concat(currentTheme["border-primary-medium"], " border focus:outline-none focus:ring-2 focus:ring-blue-500"),
-                  children: [/*#__PURE__*/jsxRuntime.jsx("option", {
-                    value: "Installed",
-                    children: "Installed"
-                  }), /*#__PURE__*/jsxRuntime.jsx("option", {
-                    value: "Discover",
-                    children: "Discover"
+                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                  className: "flex flex-row items-center gap-2",
+                  children: [/*#__PURE__*/jsxRuntime.jsxs("select", {
+                    value: selectedAuthor,
+                    onChange: function onChange(e) {
+                      return setSelectedAuthor(e.target.value);
+                    },
+                    className: "px-2 py-1 rounded text-xs bg-transparent border ".concat(currentTheme["border-primary-medium"] || "border-gray-700", " ").concat(currentTheme["text-primary-light"] || "text-gray-300", " focus:outline-none appearance-none cursor-pointer"),
+                    children: [/*#__PURE__*/jsxRuntime.jsx("option", {
+                      value: "all",
+                      children: "All Authors"
+                    }), getUniqueAuthors().map(function (author) {
+                      return /*#__PURE__*/jsxRuntime.jsx("option", {
+                        value: author,
+                        children: author
+                      }, author);
+                    })]
+                  }), selectedSource === "Installed" && /*#__PURE__*/jsxRuntime.jsxs("select", {
+                    value: selectedProvider,
+                    onChange: function onChange(e) {
+                      return setSelectedProvider(e.target.value);
+                    },
+                    className: "px-2 py-1 rounded text-xs bg-transparent border ".concat(currentTheme["border-primary-medium"] || "border-gray-700", " ").concat(currentTheme["text-primary-light"] || "text-gray-300", " focus:outline-none appearance-none cursor-pointer"),
+                    children: [/*#__PURE__*/jsxRuntime.jsx("option", {
+                      value: "all",
+                      children: "All Providers"
+                    }), getUniqueProviders().map(function (provider) {
+                      return /*#__PURE__*/jsxRuntime.jsx("option", {
+                        value: provider,
+                        children: provider === "none" ? "No Providers" : provider
+                      }, provider);
+                    })]
+                  }), selectedSource === "Discover" && /*#__PURE__*/jsxRuntime.jsxs("select", {
+                    value: registryViewMode,
+                    onChange: function onChange(e) {
+                      return setRegistryViewMode(e.target.value);
+                    },
+                    className: "px-2 py-1 rounded text-xs bg-transparent border ".concat(currentTheme["border-primary-medium"] || "border-gray-700", " ").concat(currentTheme["text-primary-light"] || "text-gray-300", " focus:outline-none appearance-none cursor-pointer"),
+                    children: [/*#__PURE__*/jsxRuntime.jsx("option", {
+                      value: "packages",
+                      children: "Packages"
+                    }), /*#__PURE__*/jsxRuntime.jsx("option", {
+                      value: "widgets",
+                      children: "Widgets"
+                    })]
                   })]
                 })]
               }), /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -8013,7 +8119,7 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
                           className: "px-2 py-1 mb-2 border-b ".concat(currentTheme["border-primary-medium"]),
                           children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
                             className: "text-xs font-semibold text-gray-400",
-                            children: "RECENT WIDGETS"
+                            children: "RECENT"
                           })
                         }), recentWidgets.map(function (widget) {
                           return /*#__PURE__*/jsxRuntime.jsx(DashReact.MenuItem3, {
@@ -8022,28 +8128,75 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
                             },
                             selected: (selectedWidget === null || selectedWidget === void 0 ? void 0 : selectedWidget.key) === widget.key,
                             children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-                              className: "flex items-center space-x-2 w-full",
-                              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                                className: "text-xs",
-                                children: "\uD83D\uDD52"
-                              }), /*#__PURE__*/jsxRuntime.jsx("div", {
-                                className: "text-base font-medium flex-1",
-                                children: widget.name
+                              className: "flex items-center gap-2 w-full",
+                              children: [/*#__PURE__*/jsxRuntime.jsx(WidgetIcon, {
+                                icon: widget.icon,
+                                className: "h-4 w-4 opacity-60 flex-shrink-0",
+                                fallback: "puzzle-piece"
+                              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                                className: "flex-1 min-w-0",
+                                children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                                  className: "text-sm font-medium truncate",
+                                  children: widget.name
+                                }), widget.description && /*#__PURE__*/jsxRuntime.jsx("div", {
+                                  className: "text-xs opacity-50 truncate",
+                                  children: widget.description
+                                })]
                               })]
                             })
                           }, "recent-".concat(widget.key));
                         })]
-                      }), filteredWidgets.map(function (widget) {
-                        return /*#__PURE__*/jsxRuntime.jsx(DashReact.MenuItem3, {
-                          onClick: function onClick() {
-                            return handleWidgetSelect(widget);
-                          },
-                          selected: (selectedWidget === null || selectedWidget === void 0 ? void 0 : selectedWidget.key) === widget.key,
-                          children: /*#__PURE__*/jsxRuntime.jsx("div", {
-                            className: "text-base font-medium",
-                            children: widget.name
-                          })
-                        }, widget.key);
+                      }), installedGroupNames.map(function (groupName) {
+                        return /*#__PURE__*/jsxRuntime.jsxs("div", {
+                          className: "mb-1",
+                          children: [/*#__PURE__*/jsxRuntime.jsxs("button", {
+                            type: "button",
+                            onClick: function onClick() {
+                              return toggleGroup(groupName);
+                            },
+                            className: "flex items-center gap-1.5 w-full px-2 py-1.5 text-xs font-semibold text-gray-400 hover:text-gray-300 transition-colors",
+                            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                              className: "text-[10px] opacity-60",
+                              children: expandedGroups.has(groupName) ? "\u25BC" : "\u25B6"
+                            }), groupName, /*#__PURE__*/jsxRuntime.jsx("span", {
+                              className: "opacity-40 ml-auto",
+                              children: groupedInstalledWidgets[groupName].length
+                            })]
+                          }), expandedGroups.has(groupName) && groupedInstalledWidgets[groupName].map(function (widget) {
+                            var _widget$providers3;
+                            return /*#__PURE__*/jsxRuntime.jsx(DashReact.MenuItem3, {
+                              onClick: function onClick() {
+                                return handleWidgetSelect(widget);
+                              },
+                              selected: (selectedWidget === null || selectedWidget === void 0 ? void 0 : selectedWidget.key) === widget.key,
+                              children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+                                className: "flex items-center gap-2 w-full",
+                                children: [/*#__PURE__*/jsxRuntime.jsx(WidgetIcon, {
+                                  icon: widget.icon,
+                                  className: "h-4 w-4 opacity-60 flex-shrink-0",
+                                  fallback: "puzzle-piece"
+                                }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                                  className: "flex-1 min-w-0",
+                                  children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+                                    className: "text-sm font-medium truncate",
+                                    children: widget.name
+                                  }), widget.description && /*#__PURE__*/jsxRuntime.jsx("div", {
+                                    className: "text-xs opacity-50 truncate",
+                                    children: widget.description
+                                  }), ((_widget$providers3 = widget.providers) === null || _widget$providers3 === void 0 ? void 0 : _widget$providers3.length) > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+                                    className: "flex flex-wrap gap-1 mt-0.5",
+                                    children: widget.providers.map(function (p) {
+                                      return /*#__PURE__*/jsxRuntime.jsx("span", {
+                                        className: "text-[10px] px-1.5 py-0.5 rounded bg-blue-500/20 text-blue-300",
+                                        children: p.type
+                                      }, p.type);
+                                    })
+                                  })]
+                                })]
+                              })
+                            }, widget.key);
+                          })]
+                        }, groupName);
                       })]
                     })
                   }), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -8185,10 +8338,12 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
                                 },
                                 className: "w-full px-3 py-2 rounded text-sm ".concat(currentTheme["bg-primary-medium"], " ").concat(currentTheme["text-primary-light"], " ").concat(currentTheme["border-primary-medium"], " border"),
                                 children: config.options && config.options.map(function (opt) {
+                                  var optValue = _typeof(opt) === "object" ? opt.value : opt;
+                                  var optLabel = _typeof(opt) === "object" ? opt.displayName || opt.value : opt;
                                   return /*#__PURE__*/jsxRuntime.jsx("option", {
-                                    value: opt,
-                                    children: opt
-                                  }, opt);
+                                    value: optValue,
+                                    children: optLabel
+                                  }, optValue);
                                 })
                               }), config.instructions && /*#__PURE__*/jsxRuntime.jsx("p", {
                                 className: "text-xs text-gray-400",
@@ -8232,7 +8387,7 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
                 padding: "py-2 px-4",
                 onClick: onClose
               }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-                title: selectedWidget !== null && selectedWidget !== void 0 && selectedWidget.isRegistry ? isInstalling ? "Installing..." : "Install Package" : "Add to Dashboard",
+                title: selectedWidget !== null && selectedWidget !== void 0 && selectedWidget.isRegistry ? isInstalling ? "Installing..." : installedPackageNames.has(selectedWidget.packageName) ? "Already Installed" : "Install Package" : "Add to Dashboard",
                 bgColor: "bg-gray-800",
                 hoverBackgroundColor: isAddButtonEnabled() && !isInstalling ? selectedWidget !== null && selectedWidget !== void 0 && selectedWidget.isRegistry ? "hover:bg-blue-700" : "hover:bg-green-700" : "",
                 textSize: "text-lg",