@trops/dash-core 0.1.256 → 0.1.259

package/dist/index.esm.js

@@ -3565,17 +3565,14 @@ var InstallProgressModal = function InstallProgressModal(_ref) {
     widgets = _ref$widgets === void 0 ? [] : _ref$widgets,
     _ref$isComplete = _ref.isComplete,
     isComplete = _ref$isComplete === void 0 ? false : _ref$isComplete,
-    onDone = _ref.onDone;
+    onDone = _ref.onDone,
+    _ref$onCancel = _ref.onCancel,
+    onCancel = _ref$onCancel === void 0 ? null : _ref$onCancel;
   var _useContext = useContext(ThemeContext),
     currentTheme = _useContext.currentTheme;
   var panelStyles = getStylesForItem(themeObjects.PANEL, currentTheme, {
     grow: false
   });
-
-  // Prevent dismissal while installation is in progress
-  var guardedSetIsOpen = function guardedSetIsOpen(val) {
-    if (isComplete) setIsOpen(val);
-  };
   var doneCount = widgets.filter(function (w) {
     return w.status === "installed" || w.status === "already-installed" || w.status === "failed";
   }).length;
@@ -3606,7 +3603,7 @@ var InstallProgressModal = function InstallProgressModal(_ref) {
   }
   return /*#__PURE__*/jsx(Modal, {
     isOpen: isOpen,
-    setIsOpen: guardedSetIsOpen,
+    setIsOpen: setIsOpen,
     width: "w-[440px]",
     height: "auto",
     children: /*#__PURE__*/jsxs("div", {
@@ -3636,9 +3633,19 @@ var InstallProgressModal = function InstallProgressModal(_ref) {
             })]
           }, idx);
         })
-      }), /*#__PURE__*/jsx("div", {
-        className: "flex items-center justify-end px-5 py-3 border-t ".concat(currentTheme["border-primary-medium"] || "border-white/10"),
-        children: /*#__PURE__*/jsx(Button, {
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between px-5 py-3 border-t ".concat(currentTheme["border-primary-medium"] || "border-white/10"),
+        children: [/*#__PURE__*/jsx("div", {
+          children: !isComplete && onCancel && /*#__PURE__*/jsx("button", {
+            type: "button",
+            onClick: function onClick() {
+              if (onCancel) onCancel();
+              setIsOpen(false);
+            },
+            className: "text-sm text-gray-500 hover:text-gray-300 transition-colors",
+            children: "Cancel"
+          })
+        }), /*#__PURE__*/jsx(Button, {
           title: "Done",
           bgColor: isComplete ? "bg-blue-600" : "bg-gray-700",
           hoverBackgroundColor: isComplete ? "hover:bg-blue-700" : "",
@@ -3648,12 +3655,273 @@ var InstallProgressModal = function InstallProgressModal(_ref) {
             if (isComplete && onDone) onDone();
           },
           disabled: !isComplete
-        })
+        })]
       })]
     })
   });
 };
 
+/**
+ * useRegistryAuth — reusable hook for device-code OAuth against the Dash Registry.
+ *
+ * Encapsulates the full auth state machine: check status, initiate login,
+ * poll for token, and cancel.  Cleans up the poll interval on unmount.
+ *
+ * @returns {{
+ *   isAuthenticated: boolean,
+ *   isAuthenticating: boolean,
+ *   authFlow: { userCode: string, verificationUrlComplete: string } | null,
+ *   authError: string | null,
+ *   checkAuth: () => Promise<boolean>,
+ *   initiateAuth: () => Promise<void>,
+ *   cancelAuth: () => void,
+ * }}
+ */
+function useRegistryAuth() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAuthenticated = _useState2[0],
+    setIsAuthenticated = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isAuthenticating = _useState4[0],
+    setIsAuthenticating = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    authFlow = _useState6[0],
+    setAuthFlow = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    authError = _useState8[0],
+    setAuthError = _useState8[1];
+  var pollIntervalRef = useRef(null);
+  var onAuthorizedRef = useRef(null);
+
+  // Clean up polling on unmount
+  useEffect(function () {
+    return function () {
+      if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
+    };
+  }, []);
+  var checkAuth = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var status, authed;
+    return _regeneratorRuntime.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          _context.next = 1;
+          return window.mainApi.registryAuth.getStatus();
+        case 1:
+          status = _context.sent;
+          authed = !!(status !== null && status !== void 0 && status.authenticated);
+          setIsAuthenticated(authed);
+          return _context.abrupt("return", authed);
+        case 2:
+          _context.prev = 2;
+          _context["catch"](0);
+          return _context.abrupt("return", false);
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 2]]);
+  })), []);
+  var cancelAuth = useCallback(function () {
+    if (pollIntervalRef.current) {
+      clearInterval(pollIntervalRef.current);
+      pollIntervalRef.current = null;
+    }
+    setIsAuthenticating(false);
+    setAuthFlow(null);
+  }, []);
+  var initiateAuth = useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(onAuthorized) {
+      var flow, interval;
+      return _regeneratorRuntime.wrap(function (_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            setAuthError(null);
+            onAuthorizedRef.current = onAuthorized || null;
+            _context3.prev = 1;
+            _context3.next = 2;
+            return window.mainApi.registryAuth.initiateLogin();
+          case 2:
+            flow = _context3.sent;
+            setAuthFlow(flow);
+            if (flow.verificationUrlComplete) {
+              window.mainApi.shell.openExternal(flow.verificationUrlComplete);
+            }
+            setIsAuthenticating(true);
+            interval = (flow.interval || 5) * 1000;
+            pollIntervalRef.current = setInterval(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+              var pollResult;
+              return _regeneratorRuntime.wrap(function (_context2) {
+                while (1) switch (_context2.prev = _context2.next) {
+                  case 0:
+                    _context2.prev = 0;
+                    _context2.next = 1;
+                    return window.mainApi.registryAuth.pollToken(flow.deviceCode);
+                  case 1:
+                    pollResult = _context2.sent;
+                    if (pollResult.status === "authorized") {
+                      clearInterval(pollIntervalRef.current);
+                      pollIntervalRef.current = null;
+                      setIsAuthenticating(false);
+                      setAuthFlow(null);
+                      setIsAuthenticated(true);
+                      if (onAuthorizedRef.current) {
+                        onAuthorizedRef.current();
+                      }
+                    } else if (pollResult.status === "expired") {
+                      clearInterval(pollIntervalRef.current);
+                      pollIntervalRef.current = null;
+                      setIsAuthenticating(false);
+                      setAuthFlow(null);
+                      setAuthError("Authorization expired. Please try again.");
+                    }
+                    _context2.next = 3;
+                    break;
+                  case 2:
+                    _context2.prev = 2;
+                    _context2["catch"](0);
+                    clearInterval(pollIntervalRef.current);
+                    pollIntervalRef.current = null;
+                    setIsAuthenticating(false);
+                  case 3:
+                  case "end":
+                    return _context2.stop();
+                }
+              }, _callee2, null, [[0, 2]]);
+            })), interval);
+            _context3.next = 4;
+            break;
+          case 3:
+            _context3.prev = 3;
+            _context3["catch"](1);
+            setAuthError("Could not reach the registry. Check your connection and try again.");
+          case 4:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3, null, [[1, 3]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [cancelAuth]);
+  return {
+    isAuthenticated: isAuthenticated,
+    isAuthenticating: isAuthenticating,
+    authFlow: authFlow,
+    authError: authError,
+    checkAuth: checkAuth,
+    initiateAuth: initiateAuth,
+    cancelAuth: cancelAuth
+  };
+}
+
+var RegistryAuthPrompt = function RegistryAuthPrompt(_ref) {
+  var onAuthenticated = _ref.onAuthenticated,
+    _ref$onCancel = _ref.onCancel,
+    onCancel = _ref$onCancel === void 0 ? null : _ref$onCancel,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? "Sign in to install from the Dash Registry." : _ref$message;
+  var _useRegistryAuth = useRegistryAuth(),
+    isAuthenticating = _useRegistryAuth.isAuthenticating,
+    authFlow = _useRegistryAuth.authFlow,
+    authError = _useRegistryAuth.authError,
+    checkAuth = _useRegistryAuth.checkAuth,
+    initiateAuth = _useRegistryAuth.initiateAuth,
+    cancelAuth = _useRegistryAuth.cancelAuth;
+  var checkedRef = useRef(false);
+
+  // Check auth on mount — if already authenticated, short-circuit
+  useEffect(function () {
+    if (checkedRef.current) return;
+    checkedRef.current = true;
+    checkAuth().then(function (authed) {
+      if (authed && onAuthenticated) onAuthenticated();
+    });
+  }, [checkAuth, onAuthenticated]);
+  function handleSignIn() {
+    initiateAuth(function () {
+      if (onAuthenticated) onAuthenticated();
+    });
+  }
+  function handleCancel() {
+    cancelAuth();
+    if (onCancel) onCancel();
+  }
+
+  // Polling state: show user code
+  if (authFlow && isAuthenticating) {
+    return /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col gap-3 p-4",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "bg-blue-500/10 border border-blue-500/20 rounded-lg p-4 space-y-3",
+        children: [/*#__PURE__*/jsx("p", {
+          className: "text-xs text-blue-300/90",
+          children: "Enter this code in your browser:"
+        }), /*#__PURE__*/jsx("div", {
+          className: "text-center",
+          children: /*#__PURE__*/jsx("span", {
+            className: "text-2xl font-mono font-bold tracking-widest text-white",
+            children: authFlow.userCode
+          })
+        }), /*#__PURE__*/jsx("p", {
+          className: "text-xs text-blue-300/70 text-center",
+          children: "Waiting for authorization \u2014 install will resume automatically..."
+        })]
+      }), onCancel && /*#__PURE__*/jsx("button", {
+        type: "button",
+        onClick: handleCancel,
+        className: "self-center text-xs text-gray-500 hover:text-gray-300 transition-colors",
+        children: "Cancel"
+      })]
+    });
+  }
+
+  // Default: not-started / error state
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col gap-3 p-4",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-3",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "flex items-start gap-2",
+        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "lock",
+          className: "h-3.5 w-3.5 text-yellow-400 mt-0.5 flex-shrink-0"
+        }), /*#__PURE__*/jsx("span", {
+          className: "text-sm text-yellow-300/90",
+          children: message
+        })]
+      })
+    }), /*#__PURE__*/jsx("button", {
+      type: "button",
+      onClick: handleSignIn,
+      className: "px-4 py-2 rounded-lg text-sm bg-blue-500/20 border border-blue-500/30 text-blue-300 hover:bg-blue-500/30 transition-colors cursor-pointer",
+      children: "Sign in to Registry"
+    }), authError && /*#__PURE__*/jsx("div", {
+      className: "bg-red-500/10 border border-red-500/20 rounded-lg p-3",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "flex items-start gap-2",
+        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "circle-xmark",
+          className: "h-3.5 w-3.5 text-red-400 mt-0.5 flex-shrink-0"
+        }), /*#__PURE__*/jsx("span", {
+          className: "text-xs text-red-300/90",
+          children: authError
+        })]
+      })
+    }), onCancel && /*#__PURE__*/jsx("button", {
+      type: "button",
+      onClick: handleCancel,
+      className: "self-center text-xs text-gray-500 hover:text-gray-300 transition-colors",
+      children: "Cancel"
+    })]
+  });
+};
+
 function _createForOfIteratorHelper$g(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$g(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$g(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$g(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$g(r, a) : void 0; } }
 function _arrayLikeToArray$g(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -3684,41 +3952,27 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     installResult = _useState8[0],
     setInstallResult = _useState8[1];
-  var _useState9 = useState(null),
+  var _useState9 = useState(false),
     _useState0 = _slicedToArray(_useState9, 2),
-    authFlow = _useState0[0],
-    setAuthFlow = _useState0[1];
-  var _useState1 = useState(false),
+    showProgressModal = _useState0[0],
+    setShowProgressModal = _useState0[1];
+  var _useState1 = useState([]),
     _useState10 = _slicedToArray(_useState1, 2),
-    isPolling = _useState10[0],
-    setIsPolling = _useState10[1];
-  var _useState11 = useState(null),
+    progressWidgets = _useState10[0],
+    setProgressWidgets = _useState10[1];
+  var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    authError = _useState12[0],
-    setAuthError = _useState12[1];
-  var _useState13 = useState(false),
-    _useState14 = _slicedToArray(_useState13, 2),
-    showProgressModal = _useState14[0],
-    setShowProgressModal = _useState14[1];
-  var _useState15 = useState([]),
-    _useState16 = _slicedToArray(_useState15, 2),
-    progressWidgets = _useState16[0],
-    setProgressWidgets = _useState16[1];
-  var _useState17 = useState(false),
-    _useState18 = _slicedToArray(_useState17, 2),
-    progressComplete = _useState18[0],
-    setProgressComplete = _useState18[1];
+    progressComplete = _useState12[0],
+    setProgressComplete = _useState12[1];
   var progressResultRef = useRef(null);
-  var pollIntervalRef = useRef(null);
   var cleanupProgressRef = useRef(null);
   var pkg = dashboardPackage;
   if (!pkg) return null;
 
-  // Clean up polling and progress listener on unmount
+  // Clean up progress listener on unmount
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(function () {
     return function () {
-      if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
       if (cleanupProgressRef.current) cleanupProgressRef.current();
     };
   }, []);
@@ -3732,10 +3986,6 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
     setPreviewLoading(true);
     setPreview(null);
     setInstallResult(null);
-    setAuthFlow(null);
-    setIsPolling(false);
-    setAuthError(null);
-    if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
     (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.dashboardConfig) === null || _window$mainApi === void 0 || _window$mainApi.getDashboardPreview(pkg.name).then(function (result) {
       if (!cancelled) setPreview(result);
     })["catch"](function (err) {
@@ -3763,8 +4013,6 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
           case 1:
             setIsInstalling(true);
             setInstallResult(null);
-            setAuthFlow(null);
-            setAuthError(null);
 
             // Initialize progress modal from widget deps
             deps = widgetDeps.length > 0 ? widgetDeps : [];
@@ -3872,83 +4120,6 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
       }
     }
   }, [pkg.name, onInstallComplete]);
-  function handleSignIn() {
-    return _handleSignIn.apply(this, arguments);
-  }
-  function _handleSignIn() {
-    _handleSignIn = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-      var flow, interval;
-      return _regeneratorRuntime.wrap(function (_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            setAuthError(null);
-            _context3.prev = 1;
-            _context3.next = 2;
-            return window.mainApi.registryAuth.initiateLogin();
-          case 2:
-            flow = _context3.sent;
-            setAuthFlow(flow);
-
-            // Open verification URL in browser
-            if (flow.verificationUrlComplete) {
-              window.mainApi.shell.openExternal(flow.verificationUrlComplete);
-            }
-
-            // Start polling for token
-            setIsPolling(true);
-            interval = (flow.interval || 5) * 1000;
-            pollIntervalRef.current = setInterval(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-              var pollResult;
-              return _regeneratorRuntime.wrap(function (_context2) {
-                while (1) switch (_context2.prev = _context2.next) {
-                  case 0:
-                    _context2.prev = 0;
-                    _context2.next = 1;
-                    return window.mainApi.registryAuth.pollToken(flow.deviceCode);
-                  case 1:
-                    pollResult = _context2.sent;
-                    if (pollResult.status === "authorized") {
-                      clearInterval(pollIntervalRef.current);
-                      pollIntervalRef.current = null;
-                      setIsPolling(false);
-                      setAuthFlow(null);
-                      // DASH-136: Auto-retry install after successful auth
-                      handleInstall();
-                    } else if (pollResult.status === "expired") {
-                      clearInterval(pollIntervalRef.current);
-                      pollIntervalRef.current = null;
-                      setIsPolling(false);
-                      setAuthFlow(null);
-                      setAuthError("Authorization expired. Please try again.");
-                    }
-                    _context2.next = 3;
-                    break;
-                  case 2:
-                    _context2.prev = 2;
-                    _context2["catch"](0);
-                    clearInterval(pollIntervalRef.current);
-                    pollIntervalRef.current = null;
-                    setIsPolling(false);
-                  case 3:
-                  case "end":
-                    return _context2.stop();
-                }
-              }, _callee2, null, [[0, 2]]);
-            })), interval);
-            _context3.next = 4;
-            break;
-          case 3:
-            _context3.prev = 3;
-            _context3["catch"](1);
-            setAuthError("Could not reach the registry. Check your connection and try again.");
-          case 4:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3, null, [[1, 3]]);
-    }));
-    return _handleSignIn.apply(this, arguments);
-  }
   var widgetDeps = (preview === null || preview === void 0 ? void 0 : preview.widgets) || pkg.widgets || [];
   var providers = (preview === null || preview === void 0 ? void 0 : preview.providers) || [];
 
@@ -4192,55 +4363,15 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
             children: installResult.message
           })]
         })
-      }), (installResult === null || installResult === void 0 ? void 0 : installResult.status) === "auth" && /*#__PURE__*/jsxs("div", {
-        className: "space-y-3",
-        children: [/*#__PURE__*/jsx("div", {
-          className: "bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-3",
-          children: /*#__PURE__*/jsxs("div", {
-            className: "flex items-start gap-2",
-            children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-              icon: "lock",
-              className: "h-3.5 w-3.5 text-yellow-400 mt-0.5 flex-shrink-0"
-            }), /*#__PURE__*/jsx("span", {
-              className: "text-sm text-yellow-300/90",
-              children: installResult.message
-            })]
-          })
-        }), !authFlow && !isPolling && /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx("button", {
-            type: "button",
-            onClick: handleSignIn,
-            className: "px-4 py-2 rounded-lg text-sm bg-blue-500/20 border border-blue-500/30 text-blue-300 hover:bg-blue-500/30 transition-colors cursor-pointer",
-            children: "Sign in to Registry"
-          }), authError && /*#__PURE__*/jsx("div", {
-            className: "bg-red-500/10 border border-red-500/20 rounded-lg p-3",
-            children: /*#__PURE__*/jsxs("div", {
-              className: "flex items-start gap-2",
-              children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-                icon: "circle-xmark",
-                className: "h-3.5 w-3.5 text-red-400 mt-0.5 flex-shrink-0"
-              }), /*#__PURE__*/jsx("span", {
-                className: "text-xs text-red-300/90",
-                children: authError
-              })]
-            })
-          })]
-        }), authFlow && isPolling && /*#__PURE__*/jsxs("div", {
-          className: "bg-blue-500/10 border border-blue-500/20 rounded-lg p-4 space-y-3",
-          children: [/*#__PURE__*/jsx("p", {
-            className: "text-xs text-blue-300/90",
-            children: "Enter this code in your browser:"
-          }), /*#__PURE__*/jsx("div", {
-            className: "text-center",
-            children: /*#__PURE__*/jsx("span", {
-              className: "text-2xl font-mono font-bold tracking-widest text-white",
-              children: authFlow.userCode
-            })
-          }), /*#__PURE__*/jsx("p", {
-            className: "text-xs text-blue-300/70 text-center",
-            children: "Waiting for authorization \u2014 install will resume automatically..."
-          })]
-        })]
+      }), (installResult === null || installResult === void 0 ? void 0 : installResult.status) === "auth" && /*#__PURE__*/jsx(RegistryAuthPrompt, {
+        onAuthenticated: function onAuthenticated() {
+          setInstallResult(null);
+          handleInstall();
+        },
+        onCancel: function onCancel() {
+          return setInstallResult(null);
+        },
+        message: installResult.message
       })]
     }), (installResult === null || installResult === void 0 ? void 0 : installResult.status) !== "success" && (installResult === null || installResult === void 0 ? void 0 : installResult.status) !== "auth" && /*#__PURE__*/jsx("div", {
       className: "flex items-center justify-end px-6 py-3 border-t ".concat(currentTheme["border-primary-medium"]),
@@ -5669,6 +5800,23 @@ var LayoutQuickAddMenu = function LayoutQuickAddMenu(_ref) {
   });
 };
 
+/**
+ * Strip the Electron IPC error prefix from error messages.
+ *
+ * Raw IPC errors look like:
+ *   "Error invoking remote method 'widget:install': Error: Failed to fetch: Unauthorized"
+ *
+ * This extracts just the meaningful part after the last "Error: " prefix.
+ *
+ * @param {string} message - Raw error message
+ * @returns {string} Cleaned error message
+ */
+function cleanIpcError(message) {
+  if (!message || typeof message !== "string") return message;
+  var match = message.match(/Error invoking remote method '[^']+': (?:Error: )?(.*)/);
+  return match ? match[1] : message;
+}
+
 function _createForOfIteratorHelper$f(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$f(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$f(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$f(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$f(r, a) : void 0; } }
 function _arrayLikeToArray$f(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -5730,8 +5878,12 @@ var useRegistrySearch = function useRegistrySearch() {
     setInstallError = _useState12[1];
   var _useState13 = useState(false),
     _useState14 = _slicedToArray(_useState13, 2),
-    showAllPackages = _useState14[0],
-    setShowAllPackages = _useState14[1];
+    needsAuth = _useState14[0],
+    setNeedsAuth = _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    showAllPackages = _useState16[0],
+    setShowAllPackages = _useState16[1];
 
   // Discover app capabilities from window.mainApi
   var appCapabilities = useMemo(function () {
@@ -5896,9 +6048,12 @@ var useRegistrySearch = function useRegistrySearch() {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchQuery, showAllPackages]);
+  var clearNeedsAuth = useCallback(function () {
+    return setNeedsAuth(false);
+  }, []);
   var installPackage = useCallback(/*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(widget) {
-      var packageName, packageScope, downloadUrl, packageVersion, scopedId, resolvedUrl, _t2;
+      var _window$mainApi2, status, packageName, packageScope, downloadUrl, packageVersion, scopedId, resolvedUrl, msg, _t3;
       return _regeneratorRuntime.wrap(function (_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -5910,28 +6065,53 @@ var useRegistrySearch = function useRegistrySearch() {
           case 1:
             setIsInstalling(true);
             setInstallError(null);
+            setNeedsAuth(false);
             _context2.prev = 2;
+            _context2.prev = 3;
+            _context2.next = 4;
+            return (_window$mainApi2 = window.mainApi) === null || _window$mainApi2 === void 0 || (_window$mainApi2 = _window$mainApi2.registryAuth) === null || _window$mainApi2 === void 0 ? void 0 : _window$mainApi2.getStatus();
+          case 4:
+            status = _context2.sent;
+            if (status !== null && status !== void 0 && status.authenticated) {
+              _context2.next = 5;
+              break;
+            }
+            setNeedsAuth(true);
+            setIsInstalling(false);
+            return _context2.abrupt("return");
+          case 5:
+            _context2.next = 7;
+            break;
+          case 6:
+            _context2.prev = 6;
+            _context2["catch"](3);
+          case 7:
             packageName = widget.packageName, packageScope = widget.packageScope, downloadUrl = widget.downloadUrl, packageVersion = widget.packageVersion; // Build scoped ID (e.g. "@trops/slack") for the install key
             scopedId = packageScope ? "@".concat(packageScope.replace(/^@/, ""), "/").concat(packageName) : packageName; // Resolve placeholders in the download URL
             resolvedUrl = downloadUrl.replace(/\{version\}/g, packageVersion).replace(/\{name\}/g, packageName);
-            _context2.next = 3;
+            _context2.next = 8;
             return window.mainApi.widgets.install(scopedId, resolvedUrl);
-          case 3:
-            _context2.next = 5;
+          case 8:
+            _context2.next = 10;
             break;
-          case 4:
-            _context2.prev = 4;
-            _t2 = _context2["catch"](2);
-            setInstallError(_t2.message || "Failed to install package");
-          case 5:
-            _context2.prev = 5;
+          case 9:
+            _context2.prev = 9;
+            _t3 = _context2["catch"](2);
+            msg = cleanIpcError(_t3.message || "Failed to install package");
+            if (msg.toLowerCase().includes("unauthorized") || msg.toLowerCase().includes("authentication required")) {
+              setNeedsAuth(true);
+            } else {
+              setInstallError(msg);
+            }
+          case 10:
+            _context2.prev = 10;
             setIsInstalling(false);
-            return _context2.finish(5);
-          case 6:
+            return _context2.finish(10);
+          case 11:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[2, 4, 5, 6]]);
+      }, _callee2, null, [[2, 9, 10, 11], [3, 6]]);
     }));
     return function (_x2) {
       return _ref3.apply(this, arguments);
@@ -5949,6 +6129,8 @@ var useRegistrySearch = function useRegistrySearch() {
     setSearchQuery: setSearchQuery,
     isInstalling: isInstalling,
     installError: installError,
+    needsAuth: needsAuth,
+    clearNeedsAuth: clearNeedsAuth,
     search: search,
     installPackage: installPackage,
     retry: retry,
@@ -16323,6 +16505,10 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
     _useState64 = _slicedToArray(_useState63, 2),
     installError = _useState64[0],
     setInstallError = _useState64[1];
+  var _useState65 = useState(false),
+    _useState66 = _slicedToArray(_useState65, 2),
+    needsAuth = _useState66[0],
+    setNeedsAuth = _useState66[1];
 
   // Phase 3: Recent Widgets - localStorage functions
   var loadRecentWidgets = function loadRecentWidgets() {
@@ -16917,7 +17103,7 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
   // Install a package from the registry
   var handleInstallPackage = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      var packageName, downloadUrl, packageVersion, resolvedUrl, _t2;
+      var _window$mainApi, status, packageName, downloadUrl, packageVersion, resolvedUrl, msg, _t3;
       return _regeneratorRuntime.wrap(function (_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -16929,32 +17115,57 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
           case 1:
             setIsInstalling(true);
             setInstallError(null);
+            setNeedsAuth(false);
             _context2.prev = 2;
+            _context2.prev = 3;
+            _context2.next = 4;
+            return (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.registryAuth) === null || _window$mainApi === void 0 ? void 0 : _window$mainApi.getStatus();
+          case 4:
+            status = _context2.sent;
+            if (status !== null && status !== void 0 && status.authenticated) {
+              _context2.next = 5;
+              break;
+            }
+            setNeedsAuth(true);
+            setIsInstalling(false);
+            return _context2.abrupt("return");
+          case 5:
+            _context2.next = 7;
+            break;
+          case 6:
+            _context2.prev = 6;
+            _context2["catch"](3);
+          case 7:
             packageName = selectedWidget.packageName, downloadUrl = selectedWidget.downloadUrl, packageVersion = selectedWidget.packageVersion; // Resolve version placeholder in download URL
             resolvedUrl = downloadUrl.replace(/\{version\}/g, packageVersion).replace(/\{name\}/g, packageName);
-            _context2.next = 3;
+            _context2.next = 8;
             return window.mainApi.widgets.install(packageName, resolvedUrl);
-          case 3:
+          case 8:
 
             // Switch to Installed tab after successful install
             setSelectedSource("Installed");
             setSelectedWidget(null);
             setSelectedPackage(null);
-            _context2.next = 5;
+            _context2.next = 10;
             break;
-          case 4:
-            _context2.prev = 4;
-            _t2 = _context2["catch"](2);
-            setInstallError(_t2.message || "Failed to install package");
-          case 5:
-            _context2.prev = 5;
+          case 9:
+            _context2.prev = 9;
+            _t3 = _context2["catch"](2);
+            msg = cleanIpcError(_t3.message || "Failed to install package");
+            if (msg.toLowerCase().includes("unauthorized") || msg.toLowerCase().includes("authentication required")) {
+              setNeedsAuth(true);
+            } else {
+              setInstallError(msg);
+            }
+          case 10:
+            _context2.prev = 10;
             setIsInstalling(false);
-            return _context2.finish(5);
-          case 6:
+            return _context2.finish(10);
+          case 11:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[2, 4, 5, 6]]);
+      }, _callee2, null, [[2, 9, 10, 11], [3, 6]]);
     }));
     return function handleInstallPackage() {
       return _ref3.apply(this, arguments);
@@ -17273,6 +17484,18 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
           className: "text-xs text-red-400",
           children: installError
         })
+      }), needsAuth && /*#__PURE__*/jsx("div", {
+        className: "mt-3",
+        children: /*#__PURE__*/jsx(RegistryAuthPrompt, {
+          onAuthenticated: function onAuthenticated() {
+            setNeedsAuth(false);
+            handleInstallPackage();
+          },
+          onCancel: function onCancel() {
+            return setNeedsAuth(false);
+          },
+          message: "Sign in to install this widget from the Dash Registry."
+        })
       })]
     });
   };
@@ -23125,7 +23348,13 @@ var RegistryPackageDetail = function RegistryPackageDetail(_ref) {
     _ref$installError = _ref.installError,
     installError = _ref$installError === void 0 ? null : _ref$installError,
     _ref$isInstalled = _ref.isInstalled,
-    isInstalled = _ref$isInstalled === void 0 ? false : _ref$isInstalled;
+    isInstalled = _ref$isInstalled === void 0 ? false : _ref$isInstalled,
+    _ref$showAuth = _ref.showAuth,
+    showAuth = _ref$showAuth === void 0 ? false : _ref$showAuth,
+    _ref$onAuthSuccess = _ref.onAuthSuccess,
+    onAuthSuccess = _ref$onAuthSuccess === void 0 ? null : _ref$onAuthSuccess,
+    _ref$onAuthCancel = _ref.onAuthCancel,
+    onAuthCancel = _ref$onAuthCancel === void 0 ? null : _ref$onAuthCancel;
   var _useContext = useContext(ThemeContext),
     currentTheme = _useContext.currentTheme;
   var panelStyles = getStylesForItem(themeObjects.PANEL, currentTheme, {
@@ -23261,7 +23490,11 @@ var RegistryPackageDetail = function RegistryPackageDetail(_ref) {
           children: installError
         })
       })]
-    }), /*#__PURE__*/jsx("div", {
+    }), showAuth && /*#__PURE__*/jsx(RegistryAuthPrompt, {
+      onAuthenticated: onAuthSuccess,
+      onCancel: onAuthCancel,
+      message: "Sign in to install this widget from the Dash Registry."
+    }), !showAuth && /*#__PURE__*/jsx("div", {
       className: "flex items-center justify-end px-6 py-3 border-t ".concat(currentTheme["border-primary-medium"]),
       children: /*#__PURE__*/jsx(Button, {
         title: isInstalled ? "Installed" : isInstalling ? "Installing..." : "Install Package",
@@ -23276,267 +23509,6 @@ var RegistryPackageDetail = function RegistryPackageDetail(_ref) {
   });
 };
 
-/**
- * useRegistryAuth — reusable hook for device-code OAuth against the Dash Registry.
- *
- * Encapsulates the full auth state machine: check status, initiate login,
- * poll for token, and cancel.  Cleans up the poll interval on unmount.
- *
- * @returns {{
- *   isAuthenticated: boolean,
- *   isAuthenticating: boolean,
- *   authFlow: { userCode: string, verificationUrlComplete: string } | null,
- *   authError: string | null,
- *   checkAuth: () => Promise<boolean>,
- *   initiateAuth: () => Promise<void>,
- *   cancelAuth: () => void,
- * }}
- */
-function useRegistryAuth() {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isAuthenticated = _useState2[0],
-    setIsAuthenticated = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isAuthenticating = _useState4[0],
-    setIsAuthenticating = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    authFlow = _useState6[0],
-    setAuthFlow = _useState6[1];
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    authError = _useState8[0],
-    setAuthError = _useState8[1];
-  var pollIntervalRef = useRef(null);
-  var onAuthorizedRef = useRef(null);
-
-  // Clean up polling on unmount
-  useEffect(function () {
-    return function () {
-      if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
-    };
-  }, []);
-  var checkAuth = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var status, authed;
-    return _regeneratorRuntime.wrap(function (_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _context.prev = 0;
-          _context.next = 1;
-          return window.mainApi.registryAuth.getStatus();
-        case 1:
-          status = _context.sent;
-          authed = !!(status !== null && status !== void 0 && status.authenticated);
-          setIsAuthenticated(authed);
-          return _context.abrupt("return", authed);
-        case 2:
-          _context.prev = 2;
-          _context["catch"](0);
-          return _context.abrupt("return", false);
-        case 3:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee, null, [[0, 2]]);
-  })), []);
-  var cancelAuth = useCallback(function () {
-    if (pollIntervalRef.current) {
-      clearInterval(pollIntervalRef.current);
-      pollIntervalRef.current = null;
-    }
-    setIsAuthenticating(false);
-    setAuthFlow(null);
-  }, []);
-  var initiateAuth = useCallback(/*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(onAuthorized) {
-      var flow, interval;
-      return _regeneratorRuntime.wrap(function (_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            setAuthError(null);
-            onAuthorizedRef.current = onAuthorized || null;
-            _context3.prev = 1;
-            _context3.next = 2;
-            return window.mainApi.registryAuth.initiateLogin();
-          case 2:
-            flow = _context3.sent;
-            setAuthFlow(flow);
-            if (flow.verificationUrlComplete) {
-              window.mainApi.shell.openExternal(flow.verificationUrlComplete);
-            }
-            setIsAuthenticating(true);
-            interval = (flow.interval || 5) * 1000;
-            pollIntervalRef.current = setInterval(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-              var pollResult;
-              return _regeneratorRuntime.wrap(function (_context2) {
-                while (1) switch (_context2.prev = _context2.next) {
-                  case 0:
-                    _context2.prev = 0;
-                    _context2.next = 1;
-                    return window.mainApi.registryAuth.pollToken(flow.deviceCode);
-                  case 1:
-                    pollResult = _context2.sent;
-                    if (pollResult.status === "authorized") {
-                      clearInterval(pollIntervalRef.current);
-                      pollIntervalRef.current = null;
-                      setIsAuthenticating(false);
-                      setAuthFlow(null);
-                      setIsAuthenticated(true);
-                      if (onAuthorizedRef.current) {
-                        onAuthorizedRef.current();
-                      }
-                    } else if (pollResult.status === "expired") {
-                      clearInterval(pollIntervalRef.current);
-                      pollIntervalRef.current = null;
-                      setIsAuthenticating(false);
-                      setAuthFlow(null);
-                      setAuthError("Authorization expired. Please try again.");
-                    }
-                    _context2.next = 3;
-                    break;
-                  case 2:
-                    _context2.prev = 2;
-                    _context2["catch"](0);
-                    clearInterval(pollIntervalRef.current);
-                    pollIntervalRef.current = null;
-                    setIsAuthenticating(false);
-                  case 3:
-                  case "end":
-                    return _context2.stop();
-                }
-              }, _callee2, null, [[0, 2]]);
-            })), interval);
-            _context3.next = 4;
-            break;
-          case 3:
-            _context3.prev = 3;
-            _context3["catch"](1);
-            setAuthError("Could not reach the registry. Check your connection and try again.");
-          case 4:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3, null, [[1, 3]]);
-    }));
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), [cancelAuth]);
-  return {
-    isAuthenticated: isAuthenticated,
-    isAuthenticating: isAuthenticating,
-    authFlow: authFlow,
-    authError: authError,
-    checkAuth: checkAuth,
-    initiateAuth: initiateAuth,
-    cancelAuth: cancelAuth
-  };
-}
-
-var RegistryAuthPrompt = function RegistryAuthPrompt(_ref) {
-  var onAuthenticated = _ref.onAuthenticated,
-    _ref$onCancel = _ref.onCancel,
-    onCancel = _ref$onCancel === void 0 ? null : _ref$onCancel,
-    _ref$message = _ref.message,
-    message = _ref$message === void 0 ? "Sign in to install from the Dash Registry." : _ref$message;
-  var _useRegistryAuth = useRegistryAuth(),
-    isAuthenticating = _useRegistryAuth.isAuthenticating,
-    authFlow = _useRegistryAuth.authFlow,
-    authError = _useRegistryAuth.authError,
-    checkAuth = _useRegistryAuth.checkAuth,
-    initiateAuth = _useRegistryAuth.initiateAuth,
-    cancelAuth = _useRegistryAuth.cancelAuth;
-  var checkedRef = useRef(false);
-
-  // Check auth on mount — if already authenticated, short-circuit
-  useEffect(function () {
-    if (checkedRef.current) return;
-    checkedRef.current = true;
-    checkAuth().then(function (authed) {
-      if (authed && onAuthenticated) onAuthenticated();
-    });
-  }, [checkAuth, onAuthenticated]);
-  function handleSignIn() {
-    initiateAuth(function () {
-      if (onAuthenticated) onAuthenticated();
-    });
-  }
-  function handleCancel() {
-    cancelAuth();
-    if (onCancel) onCancel();
-  }
-
-  // Polling state: show user code
-  if (authFlow && isAuthenticating) {
-    return /*#__PURE__*/jsxs("div", {
-      className: "flex flex-col gap-3 p-4",
-      children: [/*#__PURE__*/jsxs("div", {
-        className: "bg-blue-500/10 border border-blue-500/20 rounded-lg p-4 space-y-3",
-        children: [/*#__PURE__*/jsx("p", {
-          className: "text-xs text-blue-300/90",
-          children: "Enter this code in your browser:"
-        }), /*#__PURE__*/jsx("div", {
-          className: "text-center",
-          children: /*#__PURE__*/jsx("span", {
-            className: "text-2xl font-mono font-bold tracking-widest text-white",
-            children: authFlow.userCode
-          })
-        }), /*#__PURE__*/jsx("p", {
-          className: "text-xs text-blue-300/70 text-center",
-          children: "Waiting for authorization \u2014 install will resume automatically..."
-        })]
-      }), onCancel && /*#__PURE__*/jsx("button", {
-        type: "button",
-        onClick: handleCancel,
-        className: "self-center text-xs text-gray-500 hover:text-gray-300 transition-colors",
-        children: "Cancel"
-      })]
-    });
-  }
-
-  // Default: not-started / error state
-  return /*#__PURE__*/jsxs("div", {
-    className: "flex flex-col gap-3 p-4",
-    children: [/*#__PURE__*/jsx("div", {
-      className: "bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-3",
-      children: /*#__PURE__*/jsxs("div", {
-        className: "flex items-start gap-2",
-        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-          icon: "lock",
-          className: "h-3.5 w-3.5 text-yellow-400 mt-0.5 flex-shrink-0"
-        }), /*#__PURE__*/jsx("span", {
-          className: "text-sm text-yellow-300/90",
-          children: message
-        })]
-      })
-    }), /*#__PURE__*/jsx("button", {
-      type: "button",
-      onClick: handleSignIn,
-      className: "px-4 py-2 rounded-lg text-sm bg-blue-500/20 border border-blue-500/30 text-blue-300 hover:bg-blue-500/30 transition-colors cursor-pointer",
-      children: "Sign in to Registry"
-    }), authError && /*#__PURE__*/jsx("div", {
-      className: "bg-red-500/10 border border-red-500/20 rounded-lg p-3",
-      children: /*#__PURE__*/jsxs("div", {
-        className: "flex items-start gap-2",
-        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-          icon: "circle-xmark",
-          className: "h-3.5 w-3.5 text-red-400 mt-0.5 flex-shrink-0"
-        }), /*#__PURE__*/jsx("span", {
-          className: "text-xs text-red-300/90",
-          children: authError
-        })]
-      })
-    }), onCancel && /*#__PURE__*/jsx("button", {
-      type: "button",
-      onClick: handleCancel,
-      className: "self-center text-xs text-gray-500 hover:text-gray-300 transition-colors",
-      children: "Cancel"
-    })]
-  });
-};
-
 function getWidgetSearchQuery(componentKey) {
   var parts = componentKey.split(".");
   if (parts.length >= 3) {
@@ -25353,7 +25325,7 @@ var _renderLayout = function renderLayout(_ref) {
 
       // if (gridLayout) console.log("rendering grid ", child, childLayout);
 
-      return hasChildren === 1 && canHaveChildren === true ? /*#__PURE__*/jsx(LayoutGridContainer, {
+      return hasChildren === 1 && canHaveChildren === true || component === "LayoutGridContainer" ? /*#__PURE__*/jsx(LayoutGridContainer, {
         uuid: uuid,
         id: id,
         item: childLayout,
@@ -44632,6 +44604,8 @@ var DiscoverWidgetsDetail = function DiscoverWidgetsDetail(_ref) {
     setSearchQuery = _useRegistrySearch.setSearchQuery,
     isInstalling = _useRegistrySearch.isInstalling,
     installError = _useRegistrySearch.installError,
+    needsAuth = _useRegistrySearch.needsAuth,
+    clearNeedsAuth = _useRegistrySearch.clearNeedsAuth,
     installPackage = _useRegistrySearch.installPackage,
     retry = _useRegistrySearch.retry,
     showAllPackages = _useRegistrySearch.showAllPackages,
@@ -44832,7 +44806,13 @@ var DiscoverWidgetsDetail = function DiscoverWidgetsDetail(_ref) {
         installError: installError,
         isInstalled: selectedWidget ? isPackageInstalled(packages.find(function (p) {
           return p.name === selectedPackageName;
-        }) || {}) : false
+        }) || {}) : false,
+        showAuth: needsAuth,
+        onAuthSuccess: function onAuthSuccess() {
+          clearNeedsAuth();
+          installPackage(selectedWidget);
+        },
+        onAuthCancel: clearNeedsAuth
       })]
     });
   }
@@ -48091,6 +48071,10 @@ var SidebarDiscoverContent = function SidebarDiscoverContent(_ref2) {
     _useState2 = _slicedToArray(_useState, 2),
     selectedPackageName = _useState2[0],
     setSelectedPackageName = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pendingInstallPkg = _useState4[0],
+    setPendingInstallPkg = _useState4[1];
 
   // Check if a package is installed by name or scope/name
   var isPackageInstalled = useCallback(function (pkg) {
@@ -48135,19 +48119,22 @@ var SidebarDiscoverContent = function SidebarDiscoverContent(_ref2) {
             }
             return _context.abrupt("return");
           case 1:
+            setPendingInstallPkg(pkg);
             installable = {
               isRegistry: true,
               packageName: pkg.name,
+              packageScope: pkg.scope || null,
               downloadUrl: pkg.downloadUrl || "",
               packageVersion: pkg.version || ""
             };
             _context.next = 2;
             return registry.installPackage(installable);
           case 2:
-            // If no install error, signal success
-            if (!registry.installError) {
+            // If no install error and no auth needed, signal success
+            if (!registry.installError && !registry.needsAuth) {
               onInstallSuccess(pkg.displayName || pkg.name);
               setSelectedPackageName(null);
+              setPendingInstallPkg(null);
             }
           case 3:
           case "end":
@@ -48242,8 +48229,21 @@ var SidebarDiscoverContent = function SidebarDiscoverContent(_ref2) {
         }), registry.installError && /*#__PURE__*/jsx("div", {
           className: "text-xs text-red-400 bg-red-500/10 rounded px-2 py-1.5 mb-3",
           children: registry.installError
+        }), registry.needsAuth && /*#__PURE__*/jsx("div", {
+          className: "mb-3",
+          children: /*#__PURE__*/jsx(RegistryAuthPrompt, {
+            onAuthenticated: function onAuthenticated() {
+              registry.clearNeedsAuth();
+              if (pendingInstallPkg) handleInstall(pendingInstallPkg);
+            },
+            onCancel: function onCancel() {
+              registry.clearNeedsAuth();
+              setPendingInstallPkg(null);
+            },
+            message: "Sign in to install this widget from the Dash Registry."
+          })
         })]
-      }), /*#__PURE__*/jsx("div", {
+      }), !registry.needsAuth && /*#__PURE__*/jsx("div", {
         className: "px-3 py-2 flex-shrink-0",
         children: /*#__PURE__*/jsx("button", {
           type: "button",
@@ -48371,45 +48371,45 @@ var WidgetSidebar = function WidgetSidebar(_ref4) {
     currentTheme = _useContext.currentTheme;
 
   // Tab state
-  var _useState3 = useState("installed"),
-    _useState4 = _slicedToArray(_useState3, 2),
-    activeTab = _useState4[0],
-    setActiveTab = _useState4[1]; // "installed" | "discover"
-  var _useState5 = useState(null),
+  var _useState5 = useState("installed"),
     _useState6 = _slicedToArray(_useState5, 2),
-    installSuccess = _useState6[0],
-    setInstallSuccess = _useState6[1];
+    activeTab = _useState6[0],
+    setActiveTab = _useState6[1]; // "installed" | "discover"
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    installSuccess = _useState8[0],
+    setInstallSuccess = _useState8[1];
 
   // Registry hook (only active when discover tab is shown)
   var registry = useRegistrySearch();
 
   // Filter state
-  var _useState7 = useState(""),
-    _useState8 = _slicedToArray(_useState7, 2),
-    searchQuery = _useState8[0],
-    setSearchQuery = _useState8[1];
-  var _useState9 = useState("all"),
+  var _useState9 = useState(""),
     _useState0 = _slicedToArray(_useState9, 2),
-    filterAuthor = _useState0[0],
-    setFilterAuthor = _useState0[1];
+    searchQuery = _useState0[0],
+    setSearchQuery = _useState0[1];
   var _useState1 = useState("all"),
     _useState10 = _slicedToArray(_useState1, 2),
-    filterProvider = _useState10[0],
-    setFilterProvider = _useState10[1];
+    filterAuthor = _useState10[0],
+    setFilterAuthor = _useState10[1];
   var _useState11 = useState("all"),
     _useState12 = _slicedToArray(_useState11, 2),
-    filterHasEvents = _useState12[0],
-    setFilterHasEvents = _useState12[1];
+    filterProvider = _useState12[0],
+    setFilterProvider = _useState12[1];
   var _useState13 = useState("all"),
     _useState14 = _slicedToArray(_useState13, 2),
-    filterHasHandlers = _useState14[0],
-    setFilterHasHandlers = _useState14[1];
+    filterHasEvents = _useState14[0],
+    setFilterHasEvents = _useState14[1];
+  var _useState15 = useState("all"),
+    _useState16 = _slicedToArray(_useState15, 2),
+    filterHasHandlers = _useState16[0],
+    setFilterHasHandlers = _useState16[1];
 
   // Counter to trigger re-computation when installed widgets change
-  var _useState15 = useState(0),
-    _useState16 = _slicedToArray(_useState15, 2),
-    widgetVersion = _useState16[0],
-    setWidgetVersion = _useState16[1];
+  var _useState17 = useState(0),
+    _useState18 = _slicedToArray(_useState17, 2),
+    widgetVersion = _useState18[0],
+    setWidgetVersion = _useState18[1];
   useEffect(function () {
     var handleWidgetsUpdated = function handleWidgetsUpdated() {
       return setWidgetVersion(function (v) {
@@ -48437,10 +48437,10 @@ var WidgetSidebar = function WidgetSidebar(_ref4) {
 
   // Set of installed package identifiers for "Installed" badge in Discover tab.
   // Stores folder names, package names, and "author/name" keys for matching.
-  var _useState17 = useState(new Set()),
-    _useState18 = _slicedToArray(_useState17, 2),
-    installedPackageNames = _useState18[0],
-    setInstalledPackageNames = _useState18[1];
+  var _useState19 = useState(new Set()),
+    _useState20 = _slicedToArray(_useState19, 2),
+    installedPackageNames = _useState20[0],
+    setInstalledPackageNames = _useState20[1];
   useEffect(function () {
     var cancelled = false;
     var loadInstalled = /*#__PURE__*/function () {