@trops/dash-core 0.1.460 → 0.1.462

package/dist/index.js

@@ -6888,6 +6888,11 @@ var useRegistrySearch = function useRegistrySearch() {
     search: search,
     installPackage: installPackage,
     retry: retry,
+    // refetch is an alias of retry, exposed under the name the
+    // Wizard's sign-in flow uses to re-fetch the registry once
+    // the user signs in (so private results show up without a
+    // manual reload).
+    refetch: retry,
     showAllPackages: showAllPackages,
     setShowAllPackages: setShowAllPackages,
     appCapabilities: appCapabilities
@@ -6996,7 +7001,27 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
     isLoading = _useRegistrySearch.isLoading,
     error = _useRegistrySearch.error,
     searchQuery = _useRegistrySearch.searchQuery,
-    setSearchQuery = _useRegistrySearch.setSearchQuery;
+    setSearchQuery = _useRegistrySearch.setSearchQuery,
+    refetch = _useRegistrySearch.refetch;
+
+  // --- Registry auth (device-code OAuth) ---
+  // Surfaces a sign-in CTA when the user isn't authenticated so they
+  // see private dashboards/widgets they have access to. After
+  // successful auth, `refetch` re-runs the registry search so the
+  // results refresh automatically — no manual reload needed.
+  var _useRegistryAuth = useRegistryAuth(),
+    isAuthenticated = _useRegistryAuth.isAuthenticated,
+    isAuthenticating = _useRegistryAuth.isAuthenticating,
+    authError = _useRegistryAuth.authError,
+    checkAuth = _useRegistryAuth.checkAuth,
+    initiateAuth = _useRegistryAuth.initiateAuth,
+    cancelAuth = _useRegistryAuth.cancelAuth;
+  React.useEffect(function () {
+    checkAuth();
+  }, [checkAuth]);
+  var handleSignIn = React.useCallback(function () {
+    initiateAuth(refetch);
+  }, [initiateAuth, refetch]);
 
   // Sync search query from wizard state on mount
   React.useEffect(function () {
@@ -7121,226 +7146,263 @@ var WizardDiscoverStep = function WizardDiscoverStep(_ref) {
   };
   var sectionLabelClass = "text-xs font-semibold text-gray-400 uppercase tracking-wide px-3 mb-1";
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex flex-row gap-4",
-    children: [/*#__PURE__*/jsxRuntime.jsxs("aside", {
-      className: "flex-shrink-0 w-56 flex flex-col gap-4 overflow-y-auto",
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-col",
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          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__*/jsxRuntime.jsxs("button", {
-            type: "button",
-            onClick: function onClick() {
-              return setTypeFilter(opt.key);
-            },
-            className: rowClass(active),
-            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-              children: opt.label
-            }), showBadge && /*#__PURE__*/jsxRuntime.jsx(DashReact.Tag3, {
-              text: "".concat(state.selectedWidgets.length, " selected")
-            })]
-          }, opt.key);
-        })]
+    className: "flex flex-col gap-4",
+    children: [!isAuthenticated && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center gap-3 px-4 py-2 rounded-lg bg-gray-800 text-gray-300",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: "circle-info",
+        className: "text-blue-400 text-sm flex-shrink-0"
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-col",
+        className: "flex-1 min-w-0 flex flex-col",
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: sectionLabelClass,
-          children: "CATEGORIES"
-        }), DASHBOARD_TAGS$1.map(function (tag) {
-          var active = filters.categories.includes(tag);
-          return /*#__PURE__*/jsxRuntime.jsx("button", {
-            type: "button",
-            onClick: function onClick() {
-              return handleToggleCategory(tag);
-            },
-            className: "".concat(rowClass(active), " capitalize"),
-            children: /*#__PURE__*/jsxRuntime.jsx("span", {
-              children: tag
-            })
-          }, tag);
+          className: "text-sm text-gray-200",
+          children: "Sign in to registry"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs text-gray-400",
+          children: "See dashboards and widgets you have access to"
         })]
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-col",
+      }), !isAuthenticating ? /*#__PURE__*/jsxRuntime.jsx("button", {
+        type: "button",
+        onClick: handleSignIn,
+        className: "flex-shrink-0 text-xs py-1.5 px-3 rounded bg-blue-600 text-white hover:bg-blue-500 transition-colors",
+        children: "Sign in"
+      }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-2 flex-shrink-0",
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: sectionLabelClass,
-          children: "PROVIDERS"
-        }), KNOWN_PROVIDERS.map(function (prov) {
-          var active = filters.providers.includes(prov.key);
-          return /*#__PURE__*/jsxRuntime.jsx("button", {
-            type: "button",
-            onClick: function onClick() {
-              return handleToggleProvider(prov.key);
-            },
-            className: rowClass(active),
-            children: /*#__PURE__*/jsxRuntime.jsx("span", {
-              children: prov.name
-            })
-          }, prov.key);
+          className: "text-xs text-gray-400",
+          children: "Waiting for browser\u2026"
+        }), /*#__PURE__*/jsxRuntime.jsx("button", {
+          type: "button",
+          onClick: cancelAuth,
+          className: "text-xs text-gray-400 hover:text-gray-200 underline",
+          children: "Cancel"
         })]
+      }), authError && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "flex-shrink-0 text-xs text-red-400",
+        children: authError
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex-1 min-w-0 flex flex-col gap-4",
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex items-center gap-3",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex-1",
-          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-            value: searchQuery,
-            onChange: handleSearchChange,
-            placeholder: "Search registry..."
-          })
-        }), hasSelection && /*#__PURE__*/jsxRuntime.jsx(DashReact.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__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
-        className: "flex flex-col gap-6",
-        children: isLoading ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-400",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "spinner",
-            spin: true,
-            fixedWidth: true
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            children: "Searching registry..."
+      className: "flex flex-row gap-4",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("aside", {
+        className: "flex-shrink-0 w-56 flex flex-col gap-4 sticky top-0 self-start",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col",
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            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__*/jsxRuntime.jsxs("button", {
+              type: "button",
+              onClick: function onClick() {
+                return setTypeFilter(opt.key);
+              },
+              className: rowClass(active),
+              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                children: opt.label
+              }), showBadge && /*#__PURE__*/jsxRuntime.jsx(DashReact.Tag3, {
+                text: "".concat(state.selectedWidgets.length, " selected")
+              })]
+            }, opt.key);
           })]
-        }) : error ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-2 text-red-400 py-4",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "circle-exclamation",
-            fixedWidth: true
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            children: error
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col",
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: sectionLabelClass,
+            children: "CATEGORIES"
+          }), DASHBOARD_TAGS$1.map(function (tag) {
+            var active = filters.categories.includes(tag);
+            return /*#__PURE__*/jsxRuntime.jsx("button", {
+              type: "button",
+              onClick: function onClick() {
+                return handleToggleCategory(tag);
+              },
+              className: "".concat(rowClass(active), " capitalize"),
+              children: /*#__PURE__*/jsxRuntime.jsx("span", {
+                children: tag
+              })
+            }, tag);
           })]
-        }) : !hasResults ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-500",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "magnifying-glass",
-            fixedWidth: true
-          }), /*#__PURE__*/jsxRuntime.jsx("p", {
-            children: "No results match your search."
-          }), hasActiveFilters && /*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "text-xs text-gray-600",
-            children: "Try removing some filters to see more results."
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col",
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: sectionLabelClass,
+            children: "PROVIDERS"
+          }), KNOWN_PROVIDERS.map(function (prov) {
+            var active = filters.providers.includes(prov.key);
+            return /*#__PURE__*/jsxRuntime.jsx("button", {
+              type: "button",
+              onClick: function onClick() {
+                return handleToggleProvider(prov.key);
+              },
+              className: rowClass(active),
+              children: /*#__PURE__*/jsxRuntime.jsx("span", {
+                children: prov.name
+              })
+            }, prov.key);
           })]
-        }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [showDashboards && visibleDashboards.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "flex flex-col gap-3",
-            children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs(DashReact.Card2, {
-                  hover: true,
-                  selected: isSelected,
-                  padding: "p-5",
-                  rounded: "rounded-lg",
-                  className: "hover:shadow-lg",
-                  onClick: function onClick() {
-                    return handleSelectDashboard(dash);
-                  },
-                  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                    className: "flex flex-col items-center text-center gap-2",
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex-1 min-w-0 flex flex-col gap-4",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center gap-3",
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex-1",
+            children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+              value: searchQuery,
+              onChange: handleSearchChange,
+              placeholder: "Search registry..."
+            })
+          }), hasSelection && /*#__PURE__*/jsxRuntime.jsx(DashReact.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__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+          className: "flex flex-col gap-6",
+          children: isLoading ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-400",
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+              icon: "spinner",
+              spin: true,
+              fixedWidth: true
+            }), /*#__PURE__*/jsxRuntime.jsx("span", {
+              children: "Searching registry..."
+            })]
+          }) : error ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center gap-2 text-red-400 py-4",
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+              icon: "circle-exclamation",
+              fixedWidth: true
+            }), /*#__PURE__*/jsxRuntime.jsx("span", {
+              children: error
+            })]
+          }) : !hasResults ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-col items-center justify-center gap-2 py-12 text-gray-500",
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+              icon: "magnifying-glass",
+              fixedWidth: true
+            }), /*#__PURE__*/jsxRuntime.jsx("p", {
+              children: "No results match your search."
+            }), hasActiveFilters && /*#__PURE__*/jsxRuntime.jsx("p", {
+              className: "text-xs text-gray-600",
+              children: "Try removing some filters to see more results."
+            })]
+          }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [showDashboards && visibleDashboards.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "flex flex-col gap-3",
+              children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs(DashReact.Card2, {
+                    hover: true,
+                    selected: isSelected,
+                    padding: "p-5",
+                    rounded: "rounded-lg",
+                    className: "hover:shadow-lg",
+                    onClick: function onClick() {
+                      return handleSelectDashboard(dash);
+                    },
                     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                      className: "relative",
-                      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                        className: "text-2xl",
-                        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                          icon: resolveIcon(dash.icon || "grid-2"),
-                          fixedWidth: true,
-                          className: "text-gray-400"
+                      className: "flex flex-col items-center text-center gap-2",
+                      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                        className: "relative",
+                        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                          className: "text-2xl",
+                          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                            icon: resolveIcon(dash.icon || "grid-2"),
+                            fixedWidth: true,
+                            className: "text-gray-400"
+                          })
+                        }), isSelected && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                          icon: "circle-check",
+                          className: "absolute -top-1 -right-3 text-blue-400 text-xs"
+                        })]
+                      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                        className: "text-sm font-semibold text-gray-200",
+                        children: dash.displayName || dash.name
+                      })]
+                    }), dash.description && /*#__PURE__*/jsxRuntime.jsx("p", {
+                      className: "text-xs text-gray-400 mt-2 line-clamp-2 text-center",
+                      children: dash.description
+                    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+                      className: "flex items-center justify-between mt-3 pt-2 border-t border-gray-700/50",
+                      children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+                        className: "text-xs text-gray-500",
+                        children: [widgetCount, " widget", widgetCount !== 1 ? "s" : ""]
+                      }), providerTags.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+                        className: "flex flex-wrap gap-1 justify-end",
+                        children: providerTags.slice(0, 3).map(function (tag) {
+                          return /*#__PURE__*/jsxRuntime.jsx("span", {
+                            className: "text-xs px-1.5 py-0.5 rounded bg-gray-800 text-gray-400",
+                            children: tag
+                          }, tag);
                         })
-                      }), isSelected && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                        icon: "circle-check",
-                        className: "absolute -top-1 -right-3 text-blue-400 text-xs"
                       })]
-                    }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                      className: "text-sm font-semibold text-gray-200",
-                      children: dash.displayName || dash.name
-                    })]
-                  }), dash.description && /*#__PURE__*/jsxRuntime.jsx("p", {
-                    className: "text-xs text-gray-400 mt-2 line-clamp-2 text-center",
-                    children: dash.description
-                  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                    className: "flex items-center justify-between mt-3 pt-2 border-t border-gray-700/50",
-                    children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
-                      className: "text-xs text-gray-500",
-                      children: [widgetCount, " widget", widgetCount !== 1 ? "s" : ""]
-                    }), providerTags.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-                      className: "flex flex-wrap gap-1 justify-end",
-                      children: providerTags.slice(0, 3).map(function (tag) {
-                        return /*#__PURE__*/jsxRuntime.jsx("span", {
-                          className: "text-xs px-1.5 py-0.5 rounded bg-gray-800 text-gray-400",
-                          children: tag
-                        }, tag);
-                      })
                     })]
-                  })]
-                }, dash.name);
+                  }, dash.name);
+                })
               })
-            })
-          }), showWidgets && visibleWidgets.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "flex flex-col gap-3",
-            children: /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "grid grid-cols-3 gap-3",
-              children: visibleWidgets.map(function (widget) {
-                var checked = isWidgetSelected(widget);
-                return /*#__PURE__*/jsxRuntime.jsxs(DashReact.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__*/jsxRuntime.jsxs("div", {
-                    className: "flex items-start justify-between gap-2",
+            }), showWidgets && visibleWidgets.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "flex flex-col gap-3",
+              children: /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "grid grid-cols-3 gap-3",
+                children: visibleWidgets.map(function (widget) {
+                  var checked = isWidgetSelected(widget);
+                  return /*#__PURE__*/jsxRuntime.jsxs(DashReact.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__*/jsxRuntime.jsxs("div", {
-                      className: "flex items-center gap-1.5",
-                      children: [widget.icon && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                        icon: resolveIcon(widget.icon),
+                      className: "flex items-start justify-between gap-2",
+                      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+                        className: "flex items-center gap-1.5",
+                        children: [widget.icon && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                          icon: resolveIcon(widget.icon),
+                          fixedWidth: true,
+                          className: "text-gray-400 text-sm"
+                        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                          className: "text-sm font-medium text-gray-200 truncate",
+                          children: widget.name
+                        })]
+                      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                        icon: checked ? "square-check" : "square",
                         fixedWidth: true,
-                        className: "text-gray-400 text-sm"
-                      }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                        className: "text-sm font-medium text-gray-200 truncate",
-                        children: widget.name
+                        className: checked ? "text-blue-400 flex-shrink-0" : "text-gray-500 flex-shrink-0"
                       })]
-                    }), /*#__PURE__*/jsxRuntime.jsx(DashReact.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__*/jsxRuntime.jsx("p", {
+                      className: "text-xs text-gray-400 line-clamp-2 mt-1.5 flex-1",
+                      children: widget.description
+                    }), widget.packageDisplayName && /*#__PURE__*/jsxRuntime.jsx("span", {
+                      className: "text-xs text-gray-500 mt-2 pt-1.5 border-t border-gray-700/50 truncate",
+                      children: widget.packageDisplayName
                     })]
-                  }), widget.description && /*#__PURE__*/jsxRuntime.jsx("p", {
-                    className: "text-xs text-gray-400 line-clamp-2 mt-1.5 flex-1",
-                    children: widget.description
-                  }), widget.packageDisplayName && /*#__PURE__*/jsxRuntime.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);
+                  }, widget.key);
+                })
               })
-            })
-          })]
-        })
+            })]
+          })
+        })]
       })]
     })]
   });
@@ -7946,6 +8008,54 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsx("h3", {
       className: "text-lg font-semibold text-gray-200",
       children: "Customize your dashboard"
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "rounded-lg border border-gray-700/50 bg-gray-800/50 p-4 flex flex-col gap-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-sm font-semibold text-gray-300",
+        children: "Summary"
+      }), state.customization.name.trim() && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-2 text-sm text-gray-300",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "clone",
+          className: "text-blue-400"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: state.customization.name.trim()
+        })]
+      }), selectedFolder && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-2 text-sm text-gray-300",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: selectedFolder.icon || selectedFolder.folder || "folder",
+          className: "text-blue-400"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: selectedFolder.name
+        })]
+      }), selectedTheme && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-2 text-sm text-gray-300",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "palette",
+          className: "text-blue-400"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: selectedTheme.name || state.customization.theme
+        }), state.customization.theme === appThemeKey && /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs text-gray-500",
+          children: "(default)"
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-row space-x-1 ml-2",
+          children: [selectedTheme.primary && /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "w-3 h-3 rounded bg-".concat(selectedTheme.primary, "-500")
+          }), selectedTheme.secondary && /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "w-3 h-3 rounded bg-".concat(selectedTheme.secondary, "-500")
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-2 text-sm text-gray-300",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: isPrebuilt ? "box" : "grid-2",
+          className: "text-blue-400"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: isPrebuilt ? ((_state$selectedDashbo = state.selectedDashboard) === null || _state$selectedDashbo === void 0 ? void 0 : _state$selectedDashbo.displayName) || ((_state$selectedDashbo2 = state.selectedDashboard) === null || _state$selectedDashbo2 === void 0 ? void 0 : _state$selectedDashbo2.name) || "Pre-built dashboard" : "".concat(state.selectedWidgets.length, " widget").concat(state.selectedWidgets.length !== 1 ? "s" : "")
+        })]
+      })]
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex items-center gap-2 mb-2",
       children: SUB_STEPS.map(function (s, i) {
@@ -8196,51 +8306,6 @@ var WizardCustomizeStep = function WizardCustomizeStep(_ref) {
             })]
           })]
         })]
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "rounded-lg border border-gray-700/50 bg-gray-800/50 p-4 flex flex-col gap-2",
-        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "text-sm font-semibold text-gray-300",
-          children: "Summary"
-        }), state.customization.name.trim() && /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-2 text-sm text-gray-300",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "clone",
-            className: "text-blue-400"
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            children: state.customization.name.trim()
-          })]
-        }), selectedFolder && /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-2 text-sm text-gray-300",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: selectedFolder.icon || selectedFolder.folder || "folder",
-            className: "text-blue-400"
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            children: selectedFolder.name
-          })]
-        }), selectedTheme && /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-2 text-sm text-gray-300",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "palette",
-            className: "text-blue-400"
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            children: selectedTheme.name || state.customization.theme
-          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex flex-row space-x-1 ml-2",
-            children: [selectedTheme.primary && /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "w-3 h-3 rounded bg-".concat(selectedTheme.primary, "-500")
-            }), selectedTheme.secondary && /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "w-3 h-3 rounded bg-".concat(selectedTheme.secondary, "-500")
-            })]
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex items-center gap-2 text-sm text-gray-300",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: isPrebuilt ? "box" : "grid-2",
-            className: "text-blue-400"
-          }), /*#__PURE__*/jsxRuntime.jsx("span", {
-            children: isPrebuilt ? ((_state$selectedDashbo = state.selectedDashboard) === null || _state$selectedDashbo === void 0 ? void 0 : _state$selectedDashbo.displayName) || ((_state$selectedDashbo2 = state.selectedDashboard) === null || _state$selectedDashbo2 === void 0 ? void 0 : _state$selectedDashbo2.name) || "Pre-built dashboard" : "".concat(state.selectedWidgets.length, " widget").concat(state.selectedWidgets.length !== 1 ? "s" : "")
-          })]
-        })]
       }), authNeeded && /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-col gap-3",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -8439,7 +8504,12 @@ function getCanProceed(state) {
     case 0:
       return state.selectedDashboard !== null || state.selectedWidgets.length > 0;
     case 1:
-      return state.customization.name.trim().length > 0;
+      // Create can fire only when the user has both a name and a theme.
+      // The wizard auto-defaults theme to the user's active app theme,
+      // so this gate is mostly belt-and-suspenders — but it locks the
+      // contract so a future refactor that drops the auto-default
+      // can't quietly let the Create button enable on name alone.
+      return state.customization.name.trim().length > 0 && !!state.customization.theme;
     default:
       return false;
   }