@trops/dash-core 0.1.602 → 0.1.604

package/dist/index.js

@@ -6537,7 +6537,7 @@ var FolderDetail = function FolderDetail(_ref) {
   });
 };
 
-var OptionCard$2 = function OptionCard(_ref) {
+var OptionCard$3 = function OptionCard(_ref) {
   var icon = _ref.icon,
     title = _ref.title,
     description = _ref.description,
@@ -6586,28 +6586,28 @@ var CreationMethodPicker = function CreationMethodPicker(_ref2) {
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col w-2/3 p-6 pt-10 space-y-3",
-      children: [/*#__PURE__*/jsxRuntime.jsx(OptionCard$2, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(OptionCard$3, {
         icon: "plus",
         title: "New Dashboard",
         description: "Start from a blank template and customize your layout",
         onClick: function onClick() {
           return onSelect("template");
         }
-      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$2, {
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$3, {
         icon: "file-zipper",
         title: "Import from File",
         description: "Import a dashboard from a .zip file on your computer",
         onClick: function onClick() {
           return onSelect("import");
         }
-      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$2, {
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$3, {
         icon: "compass",
         title: "Search Registry",
         description: "Browse and install dashboards from the online registry",
         onClick: function onClick() {
           return onSelect("registry");
         }
-      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$2, {
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$3, {
         icon: "wand-magic-sparkles",
         title: "Dashboard Wizard",
         description: "Guided setup \u2014 pick categories, providers, and widgets step by step",
@@ -41733,6 +41733,94 @@ var DashboardDetail = function DashboardDetail(_ref2) {
   });
 };
 
+var OptionCard$2 = function OptionCard(_ref) {
+  var icon = _ref.icon,
+    title = _ref.title,
+    description = _ref.description,
+    onClick = _ref.onClick,
+    currentTheme = _ref.currentTheme;
+  return /*#__PURE__*/jsxRuntime.jsxs("button", {
+    type: "button",
+    onClick: onClick,
+    className: "w-full flex flex-row items-center gap-4 p-4 rounded-lg text-left transition-opacity ".concat(currentTheme["bg-primary-medium"] || "bg-white/5", " hover:opacity-80"),
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0 h-8 w-8 flex items-center justify-center opacity-60",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: icon,
+        className: "h-5 w-5"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col min-w-0",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-sm font-medium",
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-xs opacity-50 mt-0.5",
+        children: description
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0 ml-auto opacity-30",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: "chevron-right",
+        className: "h-3 w-3"
+      })
+    })]
+  });
+};
+
+/**
+ * NewDashboardChooser — consolidated entry point for the
+ * "New Dashboard" header button in Settings → Dashboards.
+ *
+ * Audit #19 fix: the prior header button was labeled "Marketplace"
+ * which was ambiguous (it set installMode=marketplace, duplicating
+ * the Marketplace tab in the list). Renamed to "New Dashboard"; the
+ * chooser presents the actual creation paths as labeled cards,
+ * matching the ThemeNewChooser pattern.
+ *
+ * Options:
+ *   - "marketplace" → registry browser (existing DiscoverDashboardsDetail)
+ *   - "wizard"      → existing dashboard creation wizard
+ *
+ * The Marketplace TAB in the list view stays — it's the in-place
+ * browse affordance, distinct from this "I want to create a new
+ * dashboard" entry.
+ */
+var NewDashboardChooser = function NewDashboardChooser(_ref2) {
+  var onSelect = _ref2.onSelect;
+  var _useContext = React.useContext(DashReact.ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "flex flex-col flex-1 min-h-0",
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex-1 overflow-y-auto p-6 space-y-3 ".concat(panelStyles.textColor || "text-gray-200"),
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-xs font-semibold opacity-50 block mb-4",
+        children: "CREATE A DASHBOARD"
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$2, {
+        icon: "compass",
+        title: "Search Marketplace",
+        description: "Browse and install community dashboards from the online registry",
+        onClick: function onClick() {
+          return onSelect("marketplace");
+        },
+        currentTheme: currentTheme
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard$2, {
+        icon: "wand-magic-sparkles",
+        title: "From Wizard",
+        description: "Build a new dashboard from a layout + theme + widgets",
+        onClick: function onClick() {
+          return onSelect("wizard");
+        },
+        currentTheme: currentTheme
+      })]
+    })
+  });
+};
+
 function ownKeys$x(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$x(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$x(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$x(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DashboardsSection = function DashboardsSection(_ref) {
@@ -41778,7 +41866,9 @@ var DashboardsSection = function DashboardsSection(_ref) {
     _useState10 = _slicedToArray(_useState1, 2),
     viewMode = _useState10[0],
     setViewMode = _useState10[1];
-  // null | "marketplace"
+  // null | "picker" | "marketplace"
+  //   picker      — NewDashboardChooser (Phase 19 / audit #19)
+  //   marketplace — DiscoverDashboardsDetail (registry browser)
   var _useState11 = React.useState(null),
     _useState12 = _slicedToArray(_useState11, 2),
     installMode = _useState12[0],
@@ -41864,12 +41954,16 @@ var DashboardsSection = function DashboardsSection(_ref) {
     });
   }
 
-  // Respond to external create trigger from header button (marketplace)
+  // Respond to external create trigger from the "New Dashboard"
+  // header button. Audit #19: this now opens the consolidated
+  // NewDashboardChooser (Marketplace + Wizard cards), matching the
+  // ThemeNewChooser pattern. Pre-fix this went straight to
+  // installMode="marketplace" which made the button ambiguous.
   var prevCreateRequested = React.useRef(false);
   React.useEffect(function () {
     if (createRequested && !prevCreateRequested.current) {
       setSelectedId(null);
-      setInstallMode("marketplace");
+      setInstallMode("picker");
     }
     prevCreateRequested.current = createRequested;
     if (createRequested && onCreateAcknowledged) {
@@ -41877,6 +41971,16 @@ var DashboardsSection = function DashboardsSection(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [createRequested]);
+  function handleChooserSelect(option) {
+    if (option === "marketplace") {
+      setInstallMode("marketplace");
+    } else if (option === "wizard") {
+      // onOpenWizard closes the Settings modal and opens the
+      // dashboard wizard. Provided by AppSettingsModal.
+      setInstallMode(null);
+      if (typeof onOpenWizard === "function") onOpenWizard();
+    }
+  }
   var selectedWorkspace = workspaces.find(function (ws) {
     return ws.id === selectedId;
   });
@@ -41988,7 +42092,11 @@ var DashboardsSection = function DashboardsSection(_ref) {
     })]
   });
   var detailContent = null;
-  if (installMode === "marketplace") {
+  if (installMode === "picker") {
+    detailContent = /*#__PURE__*/jsxRuntime.jsx(NewDashboardChooser, {
+      onSelect: handleChooserSelect
+    });
+  } else if (installMode === "marketplace") {
     detailContent = /*#__PURE__*/jsxRuntime.jsx(DiscoverDashboardsDetail, {
       onBack: function onBack() {
         setInstallMode(null);
@@ -48521,12 +48629,15 @@ var OptionCard = function OptionCard(_ref) {
 };
 
 /**
- * InstallWidgetPicker — the 3-option menu shown when "Install Widgets" is clicked.
+ * InstallWidgetPicker — the consolidated chooser shown when the
+ * "New Widget" header button is clicked (audit #19).
  *
  * Options:
- * 1. Search for Widgets (registry browser)
- * 2. Install from File (.zip)
- * 3. Load from Folder
+ * 1. Use Widget Builder (Phase 19 — folds the inline "+ New Widget"
+ *    button's function into the chooser so there's one entry point)
+ * 2. Search for Widgets (registry browser)
+ * 3. Install from File (.zip)
+ * 4. Load from Folder
  */
 var InstallWidgetPicker = function InstallWidgetPicker(_ref2) {
   var onSelect = _ref2.onSelect;
@@ -48541,7 +48652,15 @@ var InstallWidgetPicker = function InstallWidgetPicker(_ref2) {
       className: "flex-1 overflow-y-auto p-6 space-y-3 ".concat(panelStyles.textColor || "text-gray-200"),
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
         className: "text-xs font-semibold opacity-50 block mb-4",
-        children: "HOW TO INSTALL"
+        children: "CREATE A WIDGET"
+      }), /*#__PURE__*/jsxRuntime.jsx(OptionCard, {
+        icon: "wand-magic-sparkles",
+        title: "Use Widget Builder",
+        description: "Open the AI Widget Builder to create a new widget from scratch",
+        onClick: function onClick() {
+          return onSelect("builder");
+        },
+        currentTheme: currentTheme
       }), /*#__PURE__*/jsxRuntime.jsx(OptionCard, {
         icon: "compass",
         title: "Search for Widgets",
@@ -49833,7 +49952,14 @@ var WidgetsSection = function WidgetsSection(_ref) {
     setProgressComplete(false);
   }
   function handlePickerSelect(option) {
-    if (option === "discover") {
+    if (option === "builder") {
+      // Audit #19: the inline "+ New Widget" button was removed in
+      // favor of this card so there's a single entry point for new-
+      // widget creation. Closes the picker and fires the same event
+      // the inline button used to dispatch.
+      setInstallMode(null);
+      window.dispatchEvent(new Event("dash:open-widget-builder"));
+    } else if (option === "discover") {
       setInstallMode("discover");
     } else if (option === "zip") {
       handleInstallFromZip();
@@ -49931,23 +50057,7 @@ var WidgetsSection = function WidgetsSection(_ref) {
   }
   var listContent = /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col h-full",
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex-shrink-0 px-3 pt-2 pb-1",
-      children: /*#__PURE__*/jsxRuntime.jsxs("button", {
-        type: "button",
-        onClick: function onClick() {
-          return window.dispatchEvent(new Event("dash:open-widget-builder"));
-        },
-        className: "w-full flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded bg-indigo-600 hover:bg-indigo-500 text-white",
-        "data-testid": "widgets-section-new-widget-button",
-        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-          icon: "plus",
-          className: "text-xs"
-        }), /*#__PURE__*/jsxRuntime.jsx("span", {
-          children: "New Widget"
-        })]
-      })
-    }), isChecking && packagesWithUpdates.length === 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: [isChecking && packagesWithUpdates.length === 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex-shrink-0 px-3 py-2 border-b border-white/10 bg-gray-800/60 flex items-center gap-2 text-xs text-gray-400",
       "data-testid": "widgets-section-checking-updates",
       children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
@@ -54583,7 +54693,7 @@ var AppSettingsModal = function AppSettingsModal(_ref) {
         padding: false
       }), (activeSection === "dashboards" || activeSection === "folders" || activeSection === "providers" || activeSection === "themes" || activeSection === "widgets") && /*#__PURE__*/jsxRuntime.jsx(DashReact.ButtonIcon3, {
         icon: "plus",
-        text: activeSection === "dashboards" ? "Marketplace" : activeSection === "folders" ? "New Folder" : activeSection === "providers" ? "New Provider" : activeSection === "widgets" ? "Install Widgets" : "New Theme",
+        text: activeSection === "dashboards" ? "New Dashboard" : activeSection === "folders" ? "New Folder" : activeSection === "providers" ? "New Provider" : activeSection === "widgets" ? "New Widget" : "New Theme",
         onClick: function onClick() {
           return setCreateRequested(true);
         },
@@ -54800,13 +54910,41 @@ var DashboardLoaderModal = function DashboardLoaderModal(_ref) {
 var KITCHEN_SINK_PACKAGE = "trops/kitchen-sink";
 var STATE = {
   WELCOME: "welcome",
+  // AUTH_REQUIRED replaces the generic "Install Failed" screen when
+  // the registry returns `authRequired: true`. Surfaces a
+  // benefits-driven sign-in CTA instead of asking the user to
+  // figure out why install died.
+  AUTH_REQUIRED: "auth-required",
   INSTALLING: "installing",
   DONE: "done",
   ERROR: "error"
 };
+
+/**
+ * Returns the first workspace that was installed from the Kitchen
+ * Sink package, or null. Used for the modal's dedupe check so we
+ * never create a second Kitchen Sink when one already exists.
+ *
+ * Workspaces installed via the registry carry a
+ * `_dashboardConfig.registryPackage` field — historically the
+ * unscoped name ("kitchen-sink"), more recently the scoped form
+ * ("trops/kitchen-sink"). Match on either trailing segment.
+ */
+function findExistingKitchenSink(workspaces) {
+  if (!Array.isArray(workspaces)) return null;
+  return workspaces.find(function (ws) {
+    var _ws$_dashboardConfig;
+    var pkg = ws === null || ws === void 0 || (_ws$_dashboardConfig = ws._dashboardConfig) === null || _ws$_dashboardConfig === void 0 ? void 0 : _ws$_dashboardConfig.registryPackage;
+    if (typeof pkg !== "string") return false;
+    var trailing = pkg.includes("/") ? pkg.split("/").pop() : pkg;
+    return trailing === "kitchen-sink";
+  }) || null;
+}
 var OnboardingModal = function OnboardingModal(_ref) {
   var open = _ref.open,
     appId = _ref.appId,
+    _ref$workspaces = _ref.workspaces,
+    workspaces = _ref$workspaces === void 0 ? [] : _ref$workspaces,
     onOpenDashboard = _ref.onOpenDashboard,
     onDismiss = _ref.onDismiss,
     onComplete = _ref.onComplete;
@@ -54826,6 +54964,16 @@ var OnboardingModal = function OnboardingModal(_ref) {
     setInstallError = _useState6[1];
   var installResultRef = React.useRef(null);
   var cleanupProgressRef = React.useRef(null);
+
+  // Reused device-code OAuth state machine (same hook AppUpdatesModal
+  // uses). `authFlow` carries the user code + verification URL once
+  // initiateAuth fires; while non-null we render the polling panel.
+  var _useRegistryAuth = useRegistryAuth(),
+    isAuthenticating = _useRegistryAuth.isAuthenticating,
+    authFlow = _useRegistryAuth.authFlow,
+    authError = _useRegistryAuth.authError,
+    initiateAuth = _useRegistryAuth.initiateAuth,
+    cancelAuth = _useRegistryAuth.cancelAuth;
   React.useEffect(function () {
     if (open) {
       setState(STATE.WELCOME);
@@ -54887,7 +55035,7 @@ var OnboardingModal = function OnboardingModal(_ref) {
   })), [markCompletedAndClose, onDismiss]);
   var handleInstall = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var _window$mainApi2, _window$mainApi2$onIn;
-    var _window$mainApi3, _window$mainApi3$inst, result, _t2;
+    var existing, _window$mainApi3, _window$mainApi3$inst, result, _t2;
     return _regeneratorRuntime.wrap(function (_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
@@ -54899,6 +55047,24 @@ var OnboardingModal = function OnboardingModal(_ref) {
           setState(STATE.ERROR);
           return _context3.abrupt("return");
         case 1:
+          // Dedupe: if the user already has a Kitchen Sink workspace
+          // installed from the registry, skip the install entirely and
+          // route them to the existing one. Without this, the modal
+          // could be re-triggered (e.g. after clearing the
+          // onboarding.completed flag) and would silently create
+          // "Kitchen Sink 2", "Kitchen Sink 3", etc.
+          existing = findExistingKitchenSink(workspaces);
+          if (!existing) {
+            _context3.next = 2;
+            break;
+          }
+          installResultRef.current = {
+            success: true,
+            workspace: existing
+          };
+          setState(STATE.DONE);
+          return _context3.abrupt("return");
+        case 2:
           setState(STATE.INSTALLING);
           setProgressItems([]);
           setInstallError(null);
@@ -54926,42 +55092,49 @@ var OnboardingModal = function OnboardingModal(_ref) {
               return next;
             });
           });
-          _context3.prev = 2;
-          _context3.next = 3;
+          _context3.prev = 3;
+          _context3.next = 4;
           return (_window$mainApi3 = window.mainApi) === null || _window$mainApi3 === void 0 || (_window$mainApi3 = _window$mainApi3.dashboardConfig) === null || _window$mainApi3 === void 0 || (_window$mainApi3$inst = _window$mainApi3.installDashboardFromRegistry) === null || _window$mainApi3$inst === void 0 ? void 0 : _window$mainApi3$inst.call(_window$mainApi3, appId, KITCHEN_SINK_PACKAGE, {});
-        case 3:
+        case 4:
           result = _context3.sent;
           if (cleanupProgressRef.current) {
             cleanupProgressRef.current();
             cleanupProgressRef.current = null;
           }
           if (!(!result || !result.success)) {
-            _context3.next = 4;
+            _context3.next = 6;
             break;
           }
+          if (!(result !== null && result !== void 0 && result.authRequired)) {
+            _context3.next = 5;
+            break;
+          }
+          setState(STATE.AUTH_REQUIRED);
+          return _context3.abrupt("return");
+        case 5:
           setInstallError((result === null || result === void 0 ? void 0 : result.error) || "Failed to install Kitchen Sink. Check your internet connection and try again.");
           setState(STATE.ERROR);
           return _context3.abrupt("return");
-        case 4:
+        case 6:
           installResultRef.current = result;
           setState(STATE.DONE);
-          _context3.next = 6;
+          _context3.next = 8;
           break;
-        case 5:
-          _context3.prev = 5;
-          _t2 = _context3["catch"](2);
+        case 7:
+          _context3.prev = 7;
+          _t2 = _context3["catch"](3);
           if (cleanupProgressRef.current) {
             cleanupProgressRef.current();
             cleanupProgressRef.current = null;
           }
           setInstallError((_t2 === null || _t2 === void 0 ? void 0 : _t2.message) || "Installation failed.");
           setState(STATE.ERROR);
-        case 6:
+        case 8:
         case "end":
           return _context3.stop();
       }
-    }, _callee3, null, [[2, 5]]);
-  })), [appId]);
+    }, _callee3, null, [[3, 7]]);
+  })), [appId, workspaces]);
   var handleOpen = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var _installResultRef$cur;
     var workspace;
@@ -54986,6 +55159,17 @@ var OnboardingModal = function OnboardingModal(_ref) {
     handleInstall();
   }, [handleInstall]);
 
+  // From the AUTH_REQUIRED state: kick off device-code OAuth. The
+  // hook opens the browser, polls in the background, and fires our
+  // onAuthorized callback on success. We auto-retry the install
+  // there so the user lands on the DONE state without a second
+  // click.
+  var handleSignIn = React.useCallback(function () {
+    initiateAuth(function () {
+      handleInstall();
+    });
+  }, [initiateAuth, handleInstall]);
+
   // The Modal dispatches setIsOpen(false) on Escape / backdrop click.
   // Route any close attempt through handleSkip so the completion flag
   // is always stamped (otherwise Escape would silently re-show the
@@ -55009,6 +55193,15 @@ var OnboardingModal = function OnboardingModal(_ref) {
         onInstall: handleInstall,
         onSkip: handleSkip,
         textMuted: textMuted
+      }), state === STATE.AUTH_REQUIRED && /*#__PURE__*/jsxRuntime.jsx(AuthRequiredBody, {
+        onSignIn: handleSignIn,
+        onCancelAuth: cancelAuth,
+        onSkip: handleSkip,
+        isAuthenticating: isAuthenticating,
+        authFlow: authFlow,
+        authError: authError,
+        textMuted: textMuted,
+        borderPanel: borderPanel
       }), state === STATE.INSTALLING && /*#__PURE__*/jsxRuntime.jsx(InstallingBody, {
         items: progressItems,
         borderPanel: borderPanel,
@@ -55038,11 +55231,13 @@ function WelcomeBody(_ref7) {
       }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Heading2, {
         title: "Welcome to Dash"
       })]
-    }), /*#__PURE__*/jsxRuntime.jsxs(DashReact.Paragraph, {
+    }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
       className: "".concat(textMuted, " mb-6"),
-      children: ["Get started with the ", /*#__PURE__*/jsxRuntime.jsx("strong", {
-        children: "Kitchen Sink"
-      }), " dashboard \u2014 a curated set of widgets that shows what Dash can do. You can swap anything out, or build your own from scratch later."]
+      children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+        children: ["Get started with the ", /*#__PURE__*/jsxRuntime.jsx("strong", {
+          children: "Kitchen Sink"
+        }), " dashboard \u2014 a curated set of widgets that shows what Dash can do. You can swap anything out, or build your own from scratch later."]
+      })
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex items-center justify-end gap-3 mt-2",
       children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
@@ -55203,6 +55398,153 @@ function ErrorBody(_ref1) {
     })]
   });
 }
+function BenefitRow(_ref10) {
+  var icon = _ref10.icon,
+    title = _ref10.title,
+    description = _ref10.description,
+    textMuted = _ref10.textMuted;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex items-start gap-3",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0 w-7 h-7 flex items-center justify-center mt-0.5",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: icon,
+        className: "text-base opacity-70"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-sm font-medium",
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "text-xs ".concat(textMuted),
+        children: description
+      })]
+    })]
+  });
+}
+function AuthRequiredBody(_ref11) {
+  var onSignIn = _ref11.onSignIn,
+    onCancelAuth = _ref11.onCancelAuth,
+    onSkip = _ref11.onSkip,
+    isAuthenticating = _ref11.isAuthenticating,
+    authFlow = _ref11.authFlow,
+    authError = _ref11.authError,
+    textMuted = _ref11.textMuted,
+    borderPanel = _ref11.borderPanel;
+  // While the device-code flow is polling, swap the benefits panel
+  // for the user-code + verification-URL display so the user knows
+  // what to enter in the browser tab we just opened.
+  if (isAuthenticating && authFlow) {
+    return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-3 mb-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "circle-notch",
+          className: "text-2xl animate-spin"
+        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Heading2, {
+          title: "Waiting for browser sign-in"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
+        className: "".concat(textMuted, " mb-4"),
+        children: /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: "We opened a browser tab where you can sign in to the Dash Registry. Enter this code if prompted:"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "border ".concat(borderPanel, " rounded-md p-4 mb-4 text-center"),
+        "data-testid": "onboarding-auth-user-code",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "text-2xl font-mono tracking-widest",
+          children: authFlow.userCode || "—"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "text-xs ".concat(textMuted, " mt-2 break-all"),
+          children: authFlow.verificationUrlComplete || authFlow.verificationUrl || ""
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex items-center justify-end gap-3",
+        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          onClick: onCancelAuth,
+          title: "Cancel",
+          textSize: "text-sm",
+          padding: "py-2 px-4",
+          backgroundColor: "bg-gray-700",
+          textColor: "text-gray-300",
+          hoverTextColor: "hover:text-white",
+          hoverBackgroundColor: "hover:bg-gray-600",
+          "data-testid": "onboarding-auth-cancel-button"
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center gap-3 mb-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+        icon: "user-plus",
+        className: "text-2xl"
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Heading2, {
+        title: "Sign in to the Dash Registry"
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
+      className: "".concat(textMuted, " mb-5"),
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: "A free Dash account unlocks the community ecosystem. Sign in to continue installing Kitchen Sink \u2014 and to use everything else the registry offers."
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6",
+      children: [/*#__PURE__*/jsxRuntime.jsx(BenefitRow, {
+        icon: "cube",
+        title: "Install widgets",
+        description: "Browse and one-click install community widgets",
+        textMuted: textMuted
+      }), /*#__PURE__*/jsxRuntime.jsx(BenefitRow, {
+        icon: "table-cells",
+        title: "Discover dashboards",
+        description: "Like Kitchen Sink \u2014 curated starters built by others",
+        textMuted: textMuted
+      }), /*#__PURE__*/jsxRuntime.jsx(BenefitRow, {
+        icon: "palette",
+        title: "Apply themes",
+        description: "Community-built themes for any taste",
+        textMuted: textMuted
+      }), /*#__PURE__*/jsxRuntime.jsx(BenefitRow, {
+        icon: "upload",
+        title: "Publish your own",
+        description: "Share your widgets and dashboards with the Dash community",
+        textMuted: textMuted
+      })]
+    }), authError && /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
+      className: "text-red-400 mb-4",
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: authError
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center justify-end gap-3 mt-2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        onClick: onSkip,
+        title: "Skip for now",
+        textSize: "text-sm",
+        padding: "py-2 px-4",
+        backgroundColor: "bg-gray-700",
+        textColor: "text-gray-300",
+        hoverTextColor: "hover:text-white",
+        hoverBackgroundColor: "hover:bg-gray-600",
+        "data-testid": "onboarding-auth-skip-button"
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        onClick: onSignIn,
+        title: "Sign in to Registry",
+        textSize: "text-sm",
+        padding: "py-2 px-4",
+        backgroundColor: "bg-blue-600",
+        textColor: "text-white",
+        hoverTextColor: "hover:text-white",
+        hoverBackgroundColor: "hover:bg-blue-500",
+        icon: "arrow-up-right-from-square",
+        "data-testid": "onboarding-auth-signin-button"
+      })]
+    })]
+  });
+}
 
 var DashCommandPalette = function DashCommandPalette(_ref) {
   var isOpen = _ref.isOpen,
@@ -61216,7 +61558,7 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
     onboardingCheckedRef.current = true;
     var cancelled = false;
     _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _window$mainApi, _window$mainApi$getSt, status;
+      var _window$mainApi, _window$mainApi$getSt, status, alreadyHasKitchenSink;
       return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -61231,7 +61573,20 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
             }
             return _context.abrupt("return");
           case 2:
-            if (status && status.completed === false && workspaceConfig.length === 0) {
+            // Defense-in-depth: even if `workspaceConfig.length === 0`
+            // briefly reads true during a race between `isLoadingWorkspaces`
+            // and the workspace array populating, don't show the modal
+            // if the user already has a Kitchen Sink dashboard installed
+            // from the registry. Same dedupe rule the modal's install
+            // path applies.
+            alreadyHasKitchenSink = workspaceConfig.some(function (ws) {
+              var _ws$_dashboardConfig;
+              var pkg = ws === null || ws === void 0 || (_ws$_dashboardConfig = ws._dashboardConfig) === null || _ws$_dashboardConfig === void 0 ? void 0 : _ws$_dashboardConfig.registryPackage;
+              if (typeof pkg !== "string") return false;
+              var trailing = pkg.includes("/") ? pkg.split("/").pop() : pkg;
+              return trailing === "kitchen-sink";
+            });
+            if (status && status.completed === false && workspaceConfig.length === 0 && !alreadyHasKitchenSink) {
               setIsOnboardingOpen(true);
             } else {
               setIsOnboardingOpen(false);
@@ -63035,6 +63390,7 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
         }), /*#__PURE__*/jsxRuntime.jsx(OnboardingModal, {
           open: isOnboardingOpen === true,
           appId: credentials === null || credentials === void 0 ? void 0 : credentials.appId,
+          workspaces: workspaceConfig,
           onDismiss: function onDismiss() {
             return setIsOnboardingOpen(false);
           },