@trops/dash-core 0.1.459 → 0.1.460

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _typeof from '@babel/runtime/helpers/typeof';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import * as DashReact from '@trops/dash-react';
-import { isObject, ThemeContext, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, FontAwesomeIcon, Tag, Modal, Button3, Button2, Paragraph, Sidebar, Panel, Stepper, Tag2, Tag3, Card2, Card3, Heading3, MenuItem3, FormLabel, SelectMenu, Switch, SelectInput, CodeEditorVS, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, ButtonIcon2, DropdownPanel, MenuItem2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, colorTypes, getCSSStyleForClassname, Panel2, Heading2, SubHeading, Paragraph2, Paragraph3, MenuItem, ButtonIcon3, DashPanel, colorNames, shades, themeVariants, Tabs3, DataList, Checkbox, StatCard, Card, Tabs, Accordion, Alert, Toast, ProgressBar, Toggle, Breadcrumbs, Tabs2, Accordion2, Alert2, Toast2, ProgressBar2, Toggle2, Breadcrumbs2, Accordion3, Alert3, Toast3, ProgressBar3, Toggle3, Breadcrumbs3, ThemeFromUrlPane, TextArea, CodeEditorInline, Icon2, AlgoliaSearchBox, CommandPalette, useSidebar, EmptyState, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
+import { isObject, ThemeContext, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, FontAwesomeIcon, Tag, Modal, Button3, Button2, Paragraph, Sidebar, Panel, Stepper, Tag3, Card2, Card3, Heading3, MenuItem3, FormLabel, SelectMenu, Switch, SelectInput, CodeEditorVS, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, ButtonIcon2, DropdownPanel, MenuItem2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, colorTypes, getCSSStyleForClassname, Panel2, Heading2, SubHeading, Paragraph2, Paragraph3, MenuItem, Tag2, ButtonIcon3, DashPanel, colorNames, shades, themeVariants, Tabs3, DataList, Checkbox, StatCard, Card, Tabs, Accordion, Alert, Toast, ProgressBar, Toggle, Breadcrumbs, Tabs2, Accordion2, Alert2, Toast2, ProgressBar2, Toggle2, Breadcrumbs2, Accordion3, Alert3, Toast3, ProgressBar3, Toggle3, Breadcrumbs3, ThemeFromUrlPane, TextArea, CodeEditorInline, Icon2, AlgoliaSearchBox, CommandPalette, useSidebar, EmptyState, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
 export * from '@trops/dash-react';
 export { ThemeContext } from '@trops/dash-react';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -6946,12 +6946,19 @@ var KNOWN_PROVIDERS = [{
 /**
  * WizardDiscoverStep
  *
- * Step 0 of the Dashboard Wizard. Combines search, category/provider
- * filter chips, and results (dashboards + widgets) in a single view.
- * Replaces the old Intent, Providers, and Results steps.
+ * Step 0 of the Dashboard Wizard. Two-column layout mirroring the
+ * dash-registry homepage: a left filter sidebar (TYPE / CATEGORIES /
+ * PROVIDERS as vertical lists) and a right content pane with the
+ * search input + result grid.
  *
- * - Selecting a dashboard sets path to "prebuilt" and clears widget selections.
- * - Selecting widgets sets path to "custom" and clears dashboard selection.
+ * - TYPE filter (single-select): All / Dashboards / Widgets. Replaces
+ *   the previous tab bar so the right pane is a single result surface.
+ * - CATEGORIES + PROVIDERS (multi-select): preserves the existing
+ *   wizard filter shape (`filters.categories[]`, `filters.providers[]`).
+ *
+ * Selecting a dashboard sets path = "prebuilt" and clears widget
+ * selections. Selecting widgets sets path = "custom" and clears the
+ * dashboard selection.
  *
  * @param {Object} props
  * @param {Object} props.state - Wizard state from useWizardState
@@ -7034,7 +7041,7 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
     });
   }, [state.selectedWidgets]);
 
-  // --- Filter chip handlers ---
+  // --- Filter handlers ---
   var handleToggleCategory = useCallback(function (cat) {
     return dispatch({
       type: "TOGGLE_FILTER_CATEGORY",
@@ -7048,13 +7055,26 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
     });
   }, [dispatch]);
 
-  // Tab state (DASH-185)
+  // TYPE filter — replaces the old tab bar. Binary because the
+  // wizard's data model is mutually exclusive: selecting a dashboard
+  // clears widgets and sets path="prebuilt"; selecting a widget
+  // clears the dashboard and sets path="custom". An "All" view would
+  // imply you can browse both freely when in reality the first click
+  // commits you to one of two paths. Defaulting to "dashboards" since
+  // pre-built is the simpler, more common starting point.
   var _useState = useState("dashboards"),
     _useState2 = _slicedToArray(_useState, 2),
-    activeTab = _useState2[0],
-    setActiveTab = _useState2[1];
+    typeFilter = _useState2[0],
+    setTypeFilter = _useState2[1];
+  var TYPE_OPTIONS = [{
+    key: "dashboards",
+    label: "Dashboards"
+  }, {
+    key: "widgets",
+    label: "Widgets"
+  }];
 
-  // Clear selection handler (DASH-186)
+  // Clear-selection handler
   var hasSelection = state.selectedDashboard !== null || state.selectedWidgets.length > 0;
   var handleClearSelection = useCallback(function () {
     dispatch({
@@ -7070,236 +7090,240 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
       payload: null
     });
   }, [dispatch]);
-  var hasResults = filteredDashboards.length > 0 || filteredWidgets.length > 0;
+  var showDashboards = typeFilter === "dashboards";
+  var showWidgets = typeFilter === "widgets";
+  var visibleDashboards = showDashboards ? filteredDashboards : [];
+  var visibleWidgets = showWidgets ? filteredWidgets : [];
+  var hasResults = visibleDashboards.length > 0 || visibleWidgets.length > 0;
   var hasActiveFilters = filters.categories.length > 0 || filters.providers.length > 0;
+
+  // Shared row class for sidebar list items.
+  var rowClass = function rowClass(active) {
+    return "text-sm py-1.5 px-3 rounded text-left transition-colors flex items-center justify-between ".concat(active ? "bg-blue-900 text-blue-200" : "text-gray-400 hover:bg-gray-800 hover:text-gray-200");
+  };
+  var sectionLabelClass = "text-xs font-semibold text-gray-400 uppercase tracking-wide px-3 mb-1";
   return /*#__PURE__*/jsxs("div", {
-    className: "flex flex-col gap-4",
-    children: [/*#__PURE__*/jsx(InputText, {
-      value: searchQuery,
-      onChange: handleSearchChange,
-      placeholder: "Search registry..."
-    }), /*#__PURE__*/jsxs("div", {
-      className: "flex flex-col gap-3",
+    className: "flex flex-row gap-4",
+    children: [/*#__PURE__*/jsxs("aside", {
+      className: "flex-shrink-0 w-56 flex flex-col gap-4 overflow-y-auto",
       children: [/*#__PURE__*/jsxs("div", {
-        className: "flex flex-col gap-1.5",
+        className: "flex flex-col",
         children: [/*#__PURE__*/jsx("span", {
-          className: "text-xs font-semibold text-gray-400 uppercase tracking-wide",
-          children: "Categories"
-        }), /*#__PURE__*/jsx("div", {
-          className: "flex flex-wrap gap-1.5",
-          children: DASHBOARD_TAGS$1.map(function (tag) {
-            return /*#__PURE__*/jsx(Tag2, {
-              text: tag,
-              onClick: function onClick() {
-                return handleToggleCategory(tag);
-              },
-              active: filters.categories.includes(tag)
-            }, tag);
-          })
+          className: sectionLabelClass,
+          children: "TYPE"
+        }), TYPE_OPTIONS.map(function (opt) {
+          var active = typeFilter === opt.key;
+          var showBadge = opt.key === "widgets" && state.selectedWidgets.length > 0;
+          return /*#__PURE__*/jsxs("button", {
+            type: "button",
+            onClick: function onClick() {
+              return setTypeFilter(opt.key);
+            },
+            className: rowClass(active),
+            children: [/*#__PURE__*/jsx("span", {
+              children: opt.label
+            }), showBadge && /*#__PURE__*/jsx(Tag3, {
+              text: "".concat(state.selectedWidgets.length, " selected")
+            })]
+          }, opt.key);
         })]
       }), /*#__PURE__*/jsxs("div", {
-        className: "flex flex-col gap-1.5",
+        className: "flex flex-col",
         children: [/*#__PURE__*/jsx("span", {
-          className: "text-xs font-semibold text-gray-400 uppercase tracking-wide",
-          children: "Providers"
-        }), /*#__PURE__*/jsx("div", {
-          className: "flex flex-wrap gap-1.5",
-          children: KNOWN_PROVIDERS.map(function (prov) {
-            return /*#__PURE__*/jsx(Tag2, {
-              text: prov.name,
-              onClick: function onClick() {
-                return handleToggleProvider(prov.key);
-              },
-              active: filters.providers.includes(prov.key)
-            }, prov.key);
-          })
+          className: sectionLabelClass,
+          children: "CATEGORIES"
+        }), DASHBOARD_TAGS$1.map(function (tag) {
+          var active = filters.categories.includes(tag);
+          return /*#__PURE__*/jsx("button", {
+            type: "button",
+            onClick: function onClick() {
+              return handleToggleCategory(tag);
+            },
+            className: "".concat(rowClass(active), " capitalize"),
+            children: /*#__PURE__*/jsx("span", {
+              children: tag
+            })
+          }, tag);
         })]
-      })]
-    }), /*#__PURE__*/jsxs("div", {
-      className: "flex items-center justify-between",
-      children: [/*#__PURE__*/jsxs("div", {
-        className: "flex gap-1",
-        children: [/*#__PURE__*/jsxs("button", {
-          type: "button",
-          className: "px-4 py-2 text-sm font-medium rounded-t transition-colors ".concat(activeTab === "dashboards" ? "bg-gray-800 text-blue-400 border-b-2 border-blue-400" : "text-gray-400 hover:text-gray-200"),
-          onClick: function onClick() {
-            return setActiveTab("dashboards");
-          },
-          children: ["Dashboards (", filteredDashboards.length, ")"]
-        }), /*#__PURE__*/jsxs("button", {
-          type: "button",
-          className: "px-4 py-2 text-sm font-medium rounded-t transition-colors ".concat(activeTab === "widgets" ? "bg-gray-800 text-blue-400 border-b-2 border-blue-400" : "text-gray-400 hover:text-gray-200"),
-          onClick: function onClick() {
-            return setActiveTab("widgets");
-          },
-          children: ["Widgets (", filteredWidgets.length, ")", state.selectedWidgets.length > 0 && /*#__PURE__*/jsx("span", {
-            className: "ml-1.5",
-            children: /*#__PURE__*/jsx(Tag3, {
-              text: "".concat(state.selectedWidgets.length, " selected")
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex flex-col",
+        children: [/*#__PURE__*/jsx("span", {
+          className: sectionLabelClass,
+          children: "PROVIDERS"
+        }), KNOWN_PROVIDERS.map(function (prov) {
+          var active = filters.providers.includes(prov.key);
+          return /*#__PURE__*/jsx("button", {
+            type: "button",
+            onClick: function onClick() {
+              return handleToggleProvider(prov.key);
+            },
+            className: rowClass(active),
+            children: /*#__PURE__*/jsx("span", {
+              children: prov.name
             })
-          })]
+          }, prov.key);
         })]
-      }), hasSelection && /*#__PURE__*/jsx(Button, {
-        onClick: handleClearSelection,
-        title: "Clear Selection",
-        textSize: "text-xs",
-        padding: "py-1 px-3",
-        backgroundColor: "bg-gray-700",
-        textColor: "text-gray-400",
-        hoverTextColor: "hover:text-white",
-        hoverBackgroundColor: "hover:bg-gray-600",
-        icon: "xmark"
       })]
-    }), /*#__PURE__*/jsx("div", {
-      className: "flex flex-col gap-6",
-      children: isLoading ? /*#__PURE__*/jsxs("div", {
-        className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-400",
-        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-          icon: "spinner",
-          spin: true,
-          fixedWidth: true
-        }), /*#__PURE__*/jsx("span", {
-          children: "Searching registry..."
-        })]
-      }) : error ? /*#__PURE__*/jsxs("div", {
-        className: "flex items-center gap-2 text-red-400 py-4",
-        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-          icon: "circle-exclamation",
-          fixedWidth: true
-        }), /*#__PURE__*/jsx("span", {
-          children: error
-        })]
-      }) : !hasResults ? /*#__PURE__*/jsxs("div", {
-        className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-500",
-        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-          icon: "magnifying-glass",
-          fixedWidth: true
-        }), /*#__PURE__*/jsx("p", {
-          children: "No results match your search."
-        }), hasActiveFilters && /*#__PURE__*/jsx("p", {
-          className: "text-xs text-gray-600",
-          children: "Try removing some filters to see more results."
-        })]
-      }) : /*#__PURE__*/jsxs(Fragment, {
-        children: [activeTab === "dashboards" && filteredDashboards.length > 0 && /*#__PURE__*/jsx("div", {
-          className: "flex flex-col gap-3",
-          children: /*#__PURE__*/jsx("div", {
-            className: "grid grid-cols-3 gap-3",
-            children: filteredDashboards.map(function (dash) {
-              var isSelected = state.selectedDashboard && state.selectedDashboard.name === dash.name;
-              var widgetCount = (dash.widgets || []).length;
-              var providerTags = (dash.providers || []).map(function (p) {
-                return p.name || p.type;
-              }).filter(Boolean);
-              return /*#__PURE__*/jsxs(Card2, {
-                hover: true,
-                selected: isSelected,
-                padding: "p-5",
-                rounded: "rounded-lg",
-                className: "hover:shadow-lg",
-                onClick: function onClick() {
-                  return handleSelectDashboard(dash);
-                },
-                children: [/*#__PURE__*/jsxs("div", {
-                  className: "flex flex-col items-center text-center gap-2",
-                  children: [/*#__PURE__*/jsxs("div", {
-                    className: "relative",
-                    children: [/*#__PURE__*/jsx("span", {
-                      className: "text-2xl",
-                      children: /*#__PURE__*/jsx(FontAwesomeIcon, {
-                        icon: resolveIcon(dash.icon || "grid-2"),
-                        fixedWidth: true,
-                        className: "text-gray-400"
-                      })
-                    }), isSelected && /*#__PURE__*/jsx(FontAwesomeIcon, {
-                      icon: "circle-check",
-                      className: "absolute -top-1 -right-3 text-blue-400 text-xs"
-                    })]
-                  }), /*#__PURE__*/jsx("span", {
-                    className: "text-sm font-semibold text-gray-200",
-                    children: dash.displayName || dash.name
-                  })]
-                }), dash.description && /*#__PURE__*/jsx("p", {
-                  className: "text-xs text-gray-400 mt-2 line-clamp-2 text-center",
-                  children: dash.description
-                }), /*#__PURE__*/jsxs("div", {
-                  className: "flex items-center justify-between mt-3 pt-2 border-t border-gray-700/50",
-                  children: [/*#__PURE__*/jsxs("span", {
-                    className: "text-xs text-gray-500",
-                    children: [widgetCount, " widget", widgetCount !== 1 ? "s" : ""]
-                  }), providerTags.length > 0 && /*#__PURE__*/jsx("div", {
-                    className: "flex flex-wrap gap-1 justify-end",
-                    children: providerTags.slice(0, 3).map(function (tag) {
-                      return /*#__PURE__*/jsx("span", {
-                        className: "text-xs px-1.5 py-0.5 rounded bg-gray-800 text-gray-400",
-                        children: tag
-                      }, tag);
-                    })
-                  })]
-                })]
-              }, dash.name);
-            })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex-1 min-w-0 flex flex-col gap-4",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-3",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "flex-1",
+          children: /*#__PURE__*/jsx(InputText, {
+            value: searchQuery,
+            onChange: handleSearchChange,
+            placeholder: "Search registry..."
           })
-        }), activeTab === "dashboards" && filteredDashboards.length === 0 && /*#__PURE__*/jsxs("div", {
+        }), hasSelection && /*#__PURE__*/jsx(Button, {
+          onClick: handleClearSelection,
+          title: "Clear Selection",
+          textSize: "text-xs",
+          padding: "py-1 px-3",
+          backgroundColor: "bg-gray-700",
+          textColor: "text-gray-400",
+          hoverTextColor: "hover:text-white",
+          hoverBackgroundColor: "hover:bg-gray-600",
+          icon: "xmark"
+        })]
+      }), !isLoading && !error && /*#__PURE__*/jsx("div", {
+        className: "text-xs text-gray-500 px-1",
+        children: showDashboards ? "".concat(visibleDashboards.length, " dashboard").concat(visibleDashboards.length === 1 ? "" : "s") : "".concat(visibleWidgets.length, " widget").concat(visibleWidgets.length === 1 ? "" : "s")
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex flex-col gap-6",
+        children: isLoading ? /*#__PURE__*/jsxs("div", {
+          className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-400",
+          children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "spinner",
+            spin: true,
+            fixedWidth: true
+          }), /*#__PURE__*/jsx("span", {
+            children: "Searching registry..."
+          })]
+        }) : error ? /*#__PURE__*/jsxs("div", {
+          className: "flex items-center gap-2 text-red-400 py-4",
+          children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "circle-exclamation",
+            fixedWidth: true
+          }), /*#__PURE__*/jsx("span", {
+            children: error
+          })]
+        }) : !hasResults ? /*#__PURE__*/jsxs("div", {
           className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-500",
           children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-            icon: "grid-2",
+            icon: "magnifying-glass",
             fixedWidth: true
           }), /*#__PURE__*/jsx("p", {
-            children: "No dashboards match your search."
+            children: "No results match your search."
+          }), hasActiveFilters && /*#__PURE__*/jsx("p", {
+            className: "text-xs text-gray-600",
+            children: "Try removing some filters to see more results."
           })]
-        }), activeTab === "widgets" && filteredWidgets.length > 0 && /*#__PURE__*/jsx("div", {
-          className: "flex flex-col gap-3",
-          children: /*#__PURE__*/jsx("div", {
-            className: "grid grid-cols-3 gap-3",
-            children: filteredWidgets.map(function (widget) {
-              var checked = isWidgetSelected(widget);
-              return /*#__PURE__*/jsxs(Card2, {
-                hover: true,
-                selected: checked,
-                padding: "p-4",
-                rounded: "rounded-lg",
-                className: "hover:shadow-lg flex flex-col",
-                onClick: function onClick() {
-                  return handleToggleWidget(widget);
-                },
-                children: [/*#__PURE__*/jsxs("div", {
-                  className: "flex items-start justify-between gap-2",
+        }) : /*#__PURE__*/jsxs(Fragment, {
+          children: [showDashboards && visibleDashboards.length > 0 && /*#__PURE__*/jsx("div", {
+            className: "flex flex-col gap-3",
+            children: /*#__PURE__*/jsx("div", {
+              className: "grid grid-cols-3 gap-3",
+              children: visibleDashboards.map(function (dash) {
+                var isSelected = state.selectedDashboard && state.selectedDashboard.name === dash.name;
+                var widgetCount = (dash.widgets || []).length;
+                var providerTags = (dash.providers || []).map(function (p) {
+                  return p.name || p.type;
+                }).filter(Boolean);
+                return /*#__PURE__*/jsxs(Card2, {
+                  hover: true,
+                  selected: isSelected,
+                  padding: "p-5",
+                  rounded: "rounded-lg",
+                  className: "hover:shadow-lg",
+                  onClick: function onClick() {
+                    return handleSelectDashboard(dash);
+                  },
                   children: [/*#__PURE__*/jsxs("div", {
-                    className: "flex items-center gap-1.5",
-                    children: [widget.icon && /*#__PURE__*/jsx(FontAwesomeIcon, {
-                      icon: resolveIcon(widget.icon),
-                      fixedWidth: true,
-                      className: "text-gray-400 text-sm"
+                    className: "flex flex-col items-center text-center gap-2",
+                    children: [/*#__PURE__*/jsxs("div", {
+                      className: "relative",
+                      children: [/*#__PURE__*/jsx("span", {
+                        className: "text-2xl",
+                        children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+                          icon: resolveIcon(dash.icon || "grid-2"),
+                          fixedWidth: true,
+                          className: "text-gray-400"
+                        })
+                      }), isSelected && /*#__PURE__*/jsx(FontAwesomeIcon, {
+                        icon: "circle-check",
+                        className: "absolute -top-1 -right-3 text-blue-400 text-xs"
+                      })]
                     }), /*#__PURE__*/jsx("span", {
-                      className: "text-sm font-medium text-gray-200 truncate",
-                      children: widget.name
+                      className: "text-sm font-semibold text-gray-200",
+                      children: dash.displayName || dash.name
+                    })]
+                  }), dash.description && /*#__PURE__*/jsx("p", {
+                    className: "text-xs text-gray-400 mt-2 line-clamp-2 text-center",
+                    children: dash.description
+                  }), /*#__PURE__*/jsxs("div", {
+                    className: "flex items-center justify-between mt-3 pt-2 border-t border-gray-700/50",
+                    children: [/*#__PURE__*/jsxs("span", {
+                      className: "text-xs text-gray-500",
+                      children: [widgetCount, " widget", widgetCount !== 1 ? "s" : ""]
+                    }), providerTags.length > 0 && /*#__PURE__*/jsx("div", {
+                      className: "flex flex-wrap gap-1 justify-end",
+                      children: providerTags.slice(0, 3).map(function (tag) {
+                        return /*#__PURE__*/jsx("span", {
+                          className: "text-xs px-1.5 py-0.5 rounded bg-gray-800 text-gray-400",
+                          children: tag
+                        }, tag);
+                      })
                     })]
-                  }), /*#__PURE__*/jsx(FontAwesomeIcon, {
-                    icon: checked ? "square-check" : "square",
-                    fixedWidth: true,
-                    className: checked ? "text-blue-400 flex-shrink-0" : "text-gray-500 flex-shrink-0"
                   })]
-                }), widget.description && /*#__PURE__*/jsx("p", {
-                  className: "text-xs text-gray-400 line-clamp-2 mt-1.5 flex-1",
-                  children: widget.description
-                }), widget.packageDisplayName && /*#__PURE__*/jsx("span", {
-                  className: "text-xs text-gray-500 mt-2 pt-1.5 border-t border-gray-700/50 truncate",
-                  children: widget.packageDisplayName
-                })]
-              }, widget.key);
+                }, dash.name);
+              })
+            })
+          }), showWidgets && visibleWidgets.length > 0 && /*#__PURE__*/jsx("div", {
+            className: "flex flex-col gap-3",
+            children: /*#__PURE__*/jsx("div", {
+              className: "grid grid-cols-3 gap-3",
+              children: visibleWidgets.map(function (widget) {
+                var checked = isWidgetSelected(widget);
+                return /*#__PURE__*/jsxs(Card2, {
+                  hover: true,
+                  selected: checked,
+                  padding: "p-4",
+                  rounded: "rounded-lg",
+                  className: "hover:shadow-lg flex flex-col",
+                  onClick: function onClick() {
+                    return handleToggleWidget(widget);
+                  },
+                  children: [/*#__PURE__*/jsxs("div", {
+                    className: "flex items-start justify-between gap-2",
+                    children: [/*#__PURE__*/jsxs("div", {
+                      className: "flex items-center gap-1.5",
+                      children: [widget.icon && /*#__PURE__*/jsx(FontAwesomeIcon, {
+                        icon: resolveIcon(widget.icon),
+                        fixedWidth: true,
+                        className: "text-gray-400 text-sm"
+                      }), /*#__PURE__*/jsx("span", {
+                        className: "text-sm font-medium text-gray-200 truncate",
+                        children: widget.name
+                      })]
+                    }), /*#__PURE__*/jsx(FontAwesomeIcon, {
+                      icon: checked ? "square-check" : "square",
+                      fixedWidth: true,
+                      className: checked ? "text-blue-400 flex-shrink-0" : "text-gray-500 flex-shrink-0"
+                    })]
+                  }), widget.description && /*#__PURE__*/jsx("p", {
+                    className: "text-xs text-gray-400 line-clamp-2 mt-1.5 flex-1",
+                    children: widget.description
+                  }), widget.packageDisplayName && /*#__PURE__*/jsx("span", {
+                    className: "text-xs text-gray-500 mt-2 pt-1.5 border-t border-gray-700/50 truncate",
+                    children: widget.packageDisplayName
+                  })]
+                }, widget.key);
+              })
             })
-          })
-        }), activeTab === "widgets" && filteredWidgets.length === 0 && /*#__PURE__*/jsxs("div", {
-          className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-500",
-          children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-            icon: "puzzle-piece",
-            fixedWidth: true
-          }), /*#__PURE__*/jsx("p", {
-            children: "No widgets match your search."
           })]
-        })]
-      })
+        })
+      })]
     })]
   });
 };
@@ -9294,7 +9318,7 @@ hasPropertyDescriptors.hasArrayLengthDefineBug = function hasArrayLengthDefineBu
 var hasPropertyDescriptors_1 = hasPropertyDescriptors;
 
 var keys = objectKeys$2;
-var hasSymbols$4 = typeof Symbol === 'function' && typeof Symbol('foo') === 'symbol';
+var hasSymbols$5 = typeof Symbol === 'function' && typeof Symbol('foo') === 'symbol';
 
 var toStr$4 = Object.prototype.toString;
 var concat = Array.prototype.concat;
@@ -9327,7 +9351,7 @@ var defineProperty$1 = function (object, name, value, predicate) {
 var defineProperties$1 = function (object, map) {
 	var predicates = arguments.length > 2 ? arguments[2] : {};
 	var props = keys(map);
-	if (hasSymbols$4) {
+	if (hasSymbols$5) {
 		props = concat.call(props, Object.getOwnPropertySymbols(map));
 	}
 	for (var i = 0; i < props.length; i += 1) {
@@ -9393,11 +9417,11 @@ var sign$1 = function sign(number) {
 };
 
 var shams$1;
-var hasRequiredShams$1;
+var hasRequiredShams;
 
-function requireShams$1 () {
-	if (hasRequiredShams$1) return shams$1;
-	hasRequiredShams$1 = 1;
+function requireShams () {
+	if (hasRequiredShams) return shams$1;
+	hasRequiredShams = 1;
 
 	/** @type {import('./shams')} */
 	/* eslint complexity: [2, 18], max-statements: [2, 33] */
@@ -9446,10 +9470,10 @@ function requireShams$1 () {
 }
 
 var origSymbol = typeof Symbol !== 'undefined' && Symbol;
-var hasSymbolSham = requireShams$1();
+var hasSymbolSham = requireShams();
 
 /** @type {import('.')} */
-var hasSymbols$3 = function hasNativeSymbols() {
+var hasSymbols$4 = function hasNativeSymbols() {
 	if (typeof origSymbol !== 'function') { return false; }
 	if (typeof Symbol !== 'function') { return false; }
 	if (typeof origSymbol('foo') !== 'symbol') { return false; }
@@ -9753,7 +9777,7 @@ var ThrowTypeError = $gOPD$1
 	}())
 	: throwTypeError;
 
-var hasSymbols$2 = hasSymbols$3();
+var hasSymbols$3 = hasSymbols$4();
 
 var getProto$2 = getProto$3;
 var $ObjectGPO = requireObject_getPrototypeOf();
@@ -9771,7 +9795,7 @@ var INTRINSICS = {
 	'%AggregateError%': typeof AggregateError === 'undefined' ? undefined$1 : AggregateError,
 	'%Array%': Array,
 	'%ArrayBuffer%': typeof ArrayBuffer === 'undefined' ? undefined$1 : ArrayBuffer,
-	'%ArrayIteratorPrototype%': hasSymbols$2 && getProto$2 ? getProto$2([][Symbol.iterator]()) : undefined$1,
+	'%ArrayIteratorPrototype%': hasSymbols$3 && getProto$2 ? getProto$2([][Symbol.iterator]()) : undefined$1,
 	'%AsyncFromSyncIteratorPrototype%': undefined$1,
 	'%AsyncFunction%': needsEval,
 	'%AsyncGenerator%': needsEval,
@@ -9802,10 +9826,10 @@ var INTRINSICS = {
 	'%Int32Array%': typeof Int32Array === 'undefined' ? undefined$1 : Int32Array,
 	'%isFinite%': isFinite,
 	'%isNaN%': isNaN,
-	'%IteratorPrototype%': hasSymbols$2 && getProto$2 ? getProto$2(getProto$2([][Symbol.iterator]())) : undefined$1,
+	'%IteratorPrototype%': hasSymbols$3 && getProto$2 ? getProto$2(getProto$2([][Symbol.iterator]())) : undefined$1,
 	'%JSON%': typeof JSON === 'object' ? JSON : undefined$1,
 	'%Map%': typeof Map === 'undefined' ? undefined$1 : Map,
-	'%MapIteratorPrototype%': typeof Map === 'undefined' || !hasSymbols$2 || !getProto$2 ? undefined$1 : getProto$2(new Map()[Symbol.iterator]()),
+	'%MapIteratorPrototype%': typeof Map === 'undefined' || !hasSymbols$3 || !getProto$2 ? undefined$1 : getProto$2(new Map()[Symbol.iterator]()),
 	'%Math%': Math,
 	'%Number%': Number,
 	'%Object%': $Object$2,
@@ -9819,11 +9843,11 @@ var INTRINSICS = {
 	'%Reflect%': typeof Reflect === 'undefined' ? undefined$1 : Reflect,
 	'%RegExp%': RegExp,
 	'%Set%': typeof Set === 'undefined' ? undefined$1 : Set,
-	'%SetIteratorPrototype%': typeof Set === 'undefined' || !hasSymbols$2 || !getProto$2 ? undefined$1 : getProto$2(new Set()[Symbol.iterator]()),
+	'%SetIteratorPrototype%': typeof Set === 'undefined' || !hasSymbols$3 || !getProto$2 ? undefined$1 : getProto$2(new Set()[Symbol.iterator]()),
 	'%SharedArrayBuffer%': typeof SharedArrayBuffer === 'undefined' ? undefined$1 : SharedArrayBuffer,
 	'%String%': String,
-	'%StringIteratorPrototype%': hasSymbols$2 && getProto$2 ? getProto$2(''[Symbol.iterator]()) : undefined$1,
-	'%Symbol%': hasSymbols$2 ? Symbol : undefined$1,
+	'%StringIteratorPrototype%': hasSymbols$3 && getProto$2 ? getProto$2(''[Symbol.iterator]()) : undefined$1,
+	'%Symbol%': hasSymbols$3 ? Symbol : undefined$1,
 	'%SyntaxError%': $SyntaxError$1,
 	'%ThrowTypeError%': ThrowTypeError,
 	'%TypedArray%': TypedArray,
@@ -10176,12 +10200,12 @@ var callBound$i = function callBoundIntrinsic(name, allowMissing) {
 
 // modified from https://github.com/es-shims/es6-shim
 var objectKeys$1 = objectKeys$2;
-var hasSymbols$1 = requireShams$1()();
+var hasSymbols$2 = requireShams()();
 var callBound$h = callBound$i;
 var $Object$1 = esObjectAtoms;
 var $push = callBound$h('Array.prototype.push');
 var $propIsEnumerable = callBound$h('Object.prototype.propertyIsEnumerable');
-var originalGetSymbols = hasSymbols$1 ? $Object$1.getOwnPropertySymbols : null;
+var originalGetSymbols = hasSymbols$2 ? $Object$1.getOwnPropertySymbols : null;
 
 // eslint-disable-next-line no-unused-vars
 var implementation$8 = function assign(target, source1) {
@@ -10195,7 +10219,7 @@ var implementation$8 = function assign(target, source1) {
 
 		// step 3.a.ii:
 		var keys = objectKeys$1(from);
-		var getSymbols = hasSymbols$1 && ($Object$1.getOwnPropertySymbols || originalGetSymbols);
+		var getSymbols = hasSymbols$2 && ($Object$1.getOwnPropertySymbols || originalGetSymbols);
 		if (getSymbols) {
 			var syms = getSymbols(from);
 			for (var j = 0; j < syms.length; ++j) {
@@ -10492,23 +10516,14 @@ var regexp_prototype_flags = flagsBound;
 
 var esGetIterator = {exports: {}};
 
-var shams;
-var hasRequiredShams;
-
-function requireShams () {
-	if (hasRequiredShams) return shams;
-	hasRequiredShams = 1;
-
-	var hasSymbols = requireShams$1();
+var hasSymbols$1 = requireShams();
 
-	/** @type {import('.')} */
-	shams = function hasToStringTagShams() {
-		return hasSymbols() && !!Symbol.toStringTag;
-	};
-	return shams;
-}
+/** @type {import('.')} */
+var shams = function hasToStringTagShams() {
+	return hasSymbols$1() && !!Symbol.toStringTag;
+};
 
-var hasToStringTag$7 = requireShams()();
+var hasToStringTag$7 = shams();
 var callBound$f = callBound$i;
 
 var $toString$7 = callBound$f('Object.prototype.toString');
@@ -11545,7 +11560,7 @@ var tryStringObject = function tryStringObject(value) {
 /** @type {(receiver: ThisParameterType<typeof Object.prototype.toString>, ...args: Parameters<typeof Object.prototype.toString>) => ReturnType<typeof Object.prototype.toString>} */
 var $toString$6 = callBound$c('Object.prototype.toString');
 var strClass = '[object String]';
-var hasToStringTag$6 = requireShams()();
+var hasToStringTag$6 = shams();
 
 /** @type {import('.')} */
 var isString$2 = function isString(value) {
@@ -11661,7 +11676,7 @@ var isSet$2 = exported$1 || function isSet(x) {
 var isArguments$1 = isArguments$2;
 var getStopIterationIterator = stopIterationIterator;
 
-if (hasSymbols$3() || requireShams$1()()) {
+if (hasSymbols$4() || requireShams()()) {
 	var $iterator = Symbol.iterator;
 	// Symbol is available natively or shammed
 	// natively:
@@ -11950,7 +11965,7 @@ var tryDateObject = function tryDateGetDayCall(value) {
 /** @type {(value: unknown) => string} */
 var toStr$2 = callBound$9('Object.prototype.toString');
 var dateClass = '[object Date]';
-var hasToStringTag$5 = requireShams()();
+var hasToStringTag$5 = shams();
 
 /** @type {import('.')} */
 var isDateObject = function isDateObject(value) {
@@ -11961,7 +11976,7 @@ var isDateObject = function isDateObject(value) {
 };
 
 var callBound$8 = callBound$i;
-var hasToStringTag$4 = requireShams()();
+var hasToStringTag$4 = shams();
 var hasOwn = hasown;
 var gOPD$1 = gopd$1;
 
@@ -12066,7 +12081,7 @@ var tryNumberObject = function tryNumberObject(value) {
 };
 var $toString$3 = callBound$6('Object.prototype.toString');
 var numClass = '[object Number]';
-var hasToStringTag$3 = requireShams()();
+var hasToStringTag$3 = shams();
 
 /** @type {import('.')} */
 var isNumberObject = function isNumberObject(value) {
@@ -12093,7 +12108,7 @@ var tryBooleanObject = function booleanBrandCheck(value) {
 	}
 };
 var boolClass = '[object Boolean]';
-var hasToStringTag$2 = requireShams()();
+var hasToStringTag$2 = shams();
 
 /** @type {import('.')} */
 var isBooleanObject = function isBoolean(value) {
@@ -12135,7 +12150,7 @@ function requireSafeRegexTest () {
 
 var callBound$4 = callBound$i;
 var $toString$1 = callBound$4('Object.prototype.toString');
-var hasSymbols = hasSymbols$3();
+var hasSymbols = hasSymbols$4();
 var safeRegexTest = requireSafeRegexTest();
 
 if (hasSymbols) {
@@ -12581,7 +12596,7 @@ var gOPD = gopd$1;
 var getProto = getProto$3;
 
 var $toString = callBound$2('Object.prototype.toString');
-var hasToStringTag = requireShams()();
+var hasToStringTag = shams();
 
 var g = typeof globalThis === 'undefined' ? commonjsGlobal : globalThis;
 var typedArrays = availableTypedArrays();