@trops/dash-core 0.1.249 → 0.1.252

package/dist/index.esm.js

@@ -8315,7 +8315,7 @@ hasPropertyDescriptors.hasArrayLengthDefineBug = function hasArrayLengthDefineBu
 var hasPropertyDescriptors_1 = hasPropertyDescriptors;
 
 var keys = objectKeys$2;
-var hasSymbols$4 = typeof Symbol === 'function' && typeof Symbol('foo') === 'symbol';
+var hasSymbols$5 = typeof Symbol === 'function' && typeof Symbol('foo') === 'symbol';
 
 var toStr$4 = Object.prototype.toString;
 var concat = Array.prototype.concat;
@@ -8348,7 +8348,7 @@ var defineProperty$1 = function (object, name, value, predicate) {
 var defineProperties$1 = function (object, map) {
 	var predicates = arguments.length > 2 ? arguments[2] : {};
 	var props = keys(map);
-	if (hasSymbols$4) {
+	if (hasSymbols$5) {
 		props = concat.call(props, Object.getOwnPropertySymbols(map));
 	}
 	for (var i = 0; i < props.length; i += 1) {
@@ -8414,11 +8414,11 @@ var sign$1 = function sign(number) {
 };
 
 var shams$1;
-var hasRequiredShams$1;
+var hasRequiredShams;
 
-function requireShams$1 () {
-	if (hasRequiredShams$1) return shams$1;
-	hasRequiredShams$1 = 1;
+function requireShams () {
+	if (hasRequiredShams) return shams$1;
+	hasRequiredShams = 1;
 
 	/** @type {import('./shams')} */
 	/* eslint complexity: [2, 18], max-statements: [2, 33] */
@@ -8467,10 +8467,10 @@ function requireShams$1 () {
 }
 
 var origSymbol = typeof Symbol !== 'undefined' && Symbol;
-var hasSymbolSham = requireShams$1();
+var hasSymbolSham = requireShams();
 
 /** @type {import('.')} */
-var hasSymbols$3 = function hasNativeSymbols() {
+var hasSymbols$4 = function hasNativeSymbols() {
 	if (typeof origSymbol !== 'function') { return false; }
 	if (typeof Symbol !== 'function') { return false; }
 	if (typeof origSymbol('foo') !== 'symbol') { return false; }
@@ -8774,7 +8774,7 @@ var ThrowTypeError = $gOPD$1
 	}())
 	: throwTypeError;
 
-var hasSymbols$2 = hasSymbols$3();
+var hasSymbols$3 = hasSymbols$4();
 
 var getProto$2 = getProto$3;
 var $ObjectGPO = requireObject_getPrototypeOf();
@@ -8792,7 +8792,7 @@ var INTRINSICS = {
 	'%AggregateError%': typeof AggregateError === 'undefined' ? undefined$1 : AggregateError,
 	'%Array%': Array,
 	'%ArrayBuffer%': typeof ArrayBuffer === 'undefined' ? undefined$1 : ArrayBuffer,
-	'%ArrayIteratorPrototype%': hasSymbols$2 && getProto$2 ? getProto$2([][Symbol.iterator]()) : undefined$1,
+	'%ArrayIteratorPrototype%': hasSymbols$3 && getProto$2 ? getProto$2([][Symbol.iterator]()) : undefined$1,
 	'%AsyncFromSyncIteratorPrototype%': undefined$1,
 	'%AsyncFunction%': needsEval,
 	'%AsyncGenerator%': needsEval,
@@ -8823,10 +8823,10 @@ var INTRINSICS = {
 	'%Int32Array%': typeof Int32Array === 'undefined' ? undefined$1 : Int32Array,
 	'%isFinite%': isFinite,
 	'%isNaN%': isNaN,
-	'%IteratorPrototype%': hasSymbols$2 && getProto$2 ? getProto$2(getProto$2([][Symbol.iterator]())) : undefined$1,
+	'%IteratorPrototype%': hasSymbols$3 && getProto$2 ? getProto$2(getProto$2([][Symbol.iterator]())) : undefined$1,
 	'%JSON%': typeof JSON === 'object' ? JSON : undefined$1,
 	'%Map%': typeof Map === 'undefined' ? undefined$1 : Map,
-	'%MapIteratorPrototype%': typeof Map === 'undefined' || !hasSymbols$2 || !getProto$2 ? undefined$1 : getProto$2(new Map()[Symbol.iterator]()),
+	'%MapIteratorPrototype%': typeof Map === 'undefined' || !hasSymbols$3 || !getProto$2 ? undefined$1 : getProto$2(new Map()[Symbol.iterator]()),
 	'%Math%': Math,
 	'%Number%': Number,
 	'%Object%': $Object$2,
@@ -8840,11 +8840,11 @@ var INTRINSICS = {
 	'%Reflect%': typeof Reflect === 'undefined' ? undefined$1 : Reflect,
 	'%RegExp%': RegExp,
 	'%Set%': typeof Set === 'undefined' ? undefined$1 : Set,
-	'%SetIteratorPrototype%': typeof Set === 'undefined' || !hasSymbols$2 || !getProto$2 ? undefined$1 : getProto$2(new Set()[Symbol.iterator]()),
+	'%SetIteratorPrototype%': typeof Set === 'undefined' || !hasSymbols$3 || !getProto$2 ? undefined$1 : getProto$2(new Set()[Symbol.iterator]()),
 	'%SharedArrayBuffer%': typeof SharedArrayBuffer === 'undefined' ? undefined$1 : SharedArrayBuffer,
 	'%String%': String,
-	'%StringIteratorPrototype%': hasSymbols$2 && getProto$2 ? getProto$2(''[Symbol.iterator]()) : undefined$1,
-	'%Symbol%': hasSymbols$2 ? Symbol : undefined$1,
+	'%StringIteratorPrototype%': hasSymbols$3 && getProto$2 ? getProto$2(''[Symbol.iterator]()) : undefined$1,
+	'%Symbol%': hasSymbols$3 ? Symbol : undefined$1,
 	'%SyntaxError%': $SyntaxError$1,
 	'%ThrowTypeError%': ThrowTypeError,
 	'%TypedArray%': TypedArray,
@@ -9197,12 +9197,12 @@ var callBound$i = function callBoundIntrinsic(name, allowMissing) {
 
 // modified from https://github.com/es-shims/es6-shim
 var objectKeys$1 = objectKeys$2;
-var hasSymbols$1 = requireShams$1()();
+var hasSymbols$2 = requireShams()();
 var callBound$h = callBound$i;
 var $Object$1 = esObjectAtoms;
 var $push = callBound$h('Array.prototype.push');
 var $propIsEnumerable = callBound$h('Object.prototype.propertyIsEnumerable');
-var originalGetSymbols = hasSymbols$1 ? $Object$1.getOwnPropertySymbols : null;
+var originalGetSymbols = hasSymbols$2 ? $Object$1.getOwnPropertySymbols : null;
 
 // eslint-disable-next-line no-unused-vars
 var implementation$8 = function assign(target, source1) {
@@ -9216,7 +9216,7 @@ var implementation$8 = function assign(target, source1) {
 
 		// step 3.a.ii:
 		var keys = objectKeys$1(from);
-		var getSymbols = hasSymbols$1 && ($Object$1.getOwnPropertySymbols || originalGetSymbols);
+		var getSymbols = hasSymbols$2 && ($Object$1.getOwnPropertySymbols || originalGetSymbols);
 		if (getSymbols) {
 			var syms = getSymbols(from);
 			for (var j = 0; j < syms.length; ++j) {
@@ -9513,23 +9513,14 @@ var regexp_prototype_flags = flagsBound;
 
 var esGetIterator = {exports: {}};
 
-var shams;
-var hasRequiredShams;
-
-function requireShams () {
-	if (hasRequiredShams) return shams;
-	hasRequiredShams = 1;
-
-	var hasSymbols = requireShams$1();
+var hasSymbols$1 = requireShams();
 
-	/** @type {import('.')} */
-	shams = function hasToStringTagShams() {
-		return hasSymbols() && !!Symbol.toStringTag;
-	};
-	return shams;
-}
+/** @type {import('.')} */
+var shams = function hasToStringTagShams() {
+	return hasSymbols$1() && !!Symbol.toStringTag;
+};
 
-var hasToStringTag$7 = requireShams()();
+var hasToStringTag$7 = shams();
 var callBound$f = callBound$i;
 
 var $toString$7 = callBound$f('Object.prototype.toString');
@@ -10566,7 +10557,7 @@ var tryStringObject = function tryStringObject(value) {
 /** @type {(receiver: ThisParameterType<typeof Object.prototype.toString>, ...args: Parameters<typeof Object.prototype.toString>) => ReturnType<typeof Object.prototype.toString>} */
 var $toString$6 = callBound$c('Object.prototype.toString');
 var strClass = '[object String]';
-var hasToStringTag$6 = requireShams()();
+var hasToStringTag$6 = shams();
 
 /** @type {import('.')} */
 var isString$2 = function isString(value) {
@@ -10682,7 +10673,7 @@ var isSet$2 = exported$1 || function isSet(x) {
 var isArguments$1 = isArguments$2;
 var getStopIterationIterator = stopIterationIterator;
 
-if (hasSymbols$3() || requireShams$1()()) {
+if (hasSymbols$4() || requireShams()()) {
 	var $iterator = Symbol.iterator;
 	// Symbol is available natively or shammed
 	// natively:
@@ -10971,7 +10962,7 @@ var tryDateObject = function tryDateGetDayCall(value) {
 /** @type {(value: unknown) => string} */
 var toStr$2 = callBound$9('Object.prototype.toString');
 var dateClass = '[object Date]';
-var hasToStringTag$5 = requireShams()();
+var hasToStringTag$5 = shams();
 
 /** @type {import('.')} */
 var isDateObject = function isDateObject(value) {
@@ -10982,7 +10973,7 @@ var isDateObject = function isDateObject(value) {
 };
 
 var callBound$8 = callBound$i;
-var hasToStringTag$4 = requireShams()();
+var hasToStringTag$4 = shams();
 var hasOwn = hasown;
 var gOPD$1 = gopd$1;
 
@@ -11087,7 +11078,7 @@ var tryNumberObject = function tryNumberObject(value) {
 };
 var $toString$3 = callBound$6('Object.prototype.toString');
 var numClass = '[object Number]';
-var hasToStringTag$3 = requireShams()();
+var hasToStringTag$3 = shams();
 
 /** @type {import('.')} */
 var isNumberObject = function isNumberObject(value) {
@@ -11114,7 +11105,7 @@ var tryBooleanObject = function booleanBrandCheck(value) {
 	}
 };
 var boolClass = '[object Boolean]';
-var hasToStringTag$2 = requireShams()();
+var hasToStringTag$2 = shams();
 
 /** @type {import('.')} */
 var isBooleanObject = function isBoolean(value) {
@@ -11156,7 +11147,7 @@ function requireSafeRegexTest () {
 
 var callBound$4 = callBound$i;
 var $toString$1 = callBound$4('Object.prototype.toString');
-var hasSymbols = hasSymbols$3();
+var hasSymbols = hasSymbols$4();
 var safeRegexTest = requireSafeRegexTest();
 
 if (hasSymbols) {
@@ -11602,7 +11593,7 @@ var gOPD = gopd$1;
 var getProto = getProto$3;
 
 var $toString = callBound$2('Object.prototype.toString');
-var hasToStringTag = requireShams()();
+var hasToStringTag = shams();
 
 var g = typeof globalThis === 'undefined' ? commonjsGlobal : globalThis;
 var typedArrays = availableTypedArrays();
@@ -23282,6 +23273,267 @@ 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) {
@@ -23331,7 +23583,8 @@ function packageToFlatWidget(pkg) {
  *
  * Shows the existing "Widget Not Found" error display and adds a
  * "Find in Registry" button that does an exact registry lookup and
- * opens an install modal.
+ * opens an install modal.  When install requires auth, shows an inline
+ * RegistryAuthPrompt and auto-retries after successful sign-in.
  */
 var WidgetNotFound = function WidgetNotFound(_ref) {
   var component = _ref.component;
@@ -23359,6 +23612,12 @@ var WidgetNotFound = function WidgetNotFound(_ref) {
     _useState10 = _slicedToArray(_useState1, 2),
     installError = _useState10[0],
     setInstallError = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    needsAuth = _useState12[0],
+    setNeedsAuth = _useState12[1];
+  var _useRegistryAuth = useRegistryAuth(),
+    checkAuth = _useRegistryAuth.checkAuth;
   var lookupWidget = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _getWidgetSearchQuery, packageName, widgetName, pkg, result;
     return _regeneratorRuntime.wrap(function (_context) {
@@ -23369,6 +23628,7 @@ var WidgetNotFound = function WidgetNotFound(_ref) {
           setNotFound(false);
           setRegistryWidget(null);
           setInstallError(null);
+          setNeedsAuth(false);
           _getWidgetSearchQuery = getWidgetSearchQuery(component), packageName = _getWidgetSearchQuery.packageName, widgetName = _getWidgetSearchQuery.widgetName;
           _context.prev = 1;
           pkg = null; // Scoped ID — exact package lookup
@@ -23415,7 +23675,7 @@ var WidgetNotFound = function WidgetNotFound(_ref) {
     }, _callee, null, [[1, 6]]);
   })), [component]);
   var handleInstall = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var packageName, packageScope, downloadUrl, packageVersion, scopedId, resolvedUrl, _t2;
+    var authed, packageName, packageScope, downloadUrl, packageVersion, scopedId, resolvedUrl, msg, _t2;
     return _regeneratorRuntime.wrap(function (_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
@@ -23427,28 +23687,53 @@ var WidgetNotFound = function WidgetNotFound(_ref) {
         case 1:
           setIsInstalling(true);
           setInstallError(null);
+          setNeedsAuth(false);
           _context2.prev = 2;
+          _context2.next = 3;
+          return checkAuth();
+        case 3:
+          authed = _context2.sent;
+          if (authed) {
+            _context2.next = 4;
+            break;
+          }
+          setNeedsAuth(true);
+          setIsInstalling(false);
+          return _context2.abrupt("return");
+        case 4:
           packageName = registryWidget.packageName, packageScope = registryWidget.packageScope, downloadUrl = registryWidget.downloadUrl, packageVersion = registryWidget.packageVersion;
           scopedId = packageScope ? "@".concat(packageScope.replace(/^@/, ""), "/").concat(packageName) : packageName;
           resolvedUrl = downloadUrl.replace(/\{version\}/g, packageVersion).replace(/\{name\}/g, packageName);
-          _context2.next = 3;
+          _context2.next = 5;
           return window.mainApi.widgets.install(scopedId, resolvedUrl);
-        case 3:
+        case 5:
           setShowModal(false);
-          _context2.next = 5;
+          _context2.next = 7;
           break;
-        case 4:
-          _context2.prev = 4;
+        case 6:
+          _context2.prev = 6;
           _t2 = _context2["catch"](2);
-          setInstallError(_t2.message || "Failed to install package");
-        case 5:
+          msg = _t2.message || "Failed to install package";
+          if (msg.toLowerCase().includes("unauthorized")) {
+            setNeedsAuth(true);
+          } else {
+            setInstallError(msg);
+          }
+        case 7:
           setIsInstalling(false);
-        case 6:
+        case 8:
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[2, 4]]);
-  })), [registryWidget]);
+    }, _callee2, null, [[2, 6]]);
+  })), [registryWidget, checkAuth]);
+  var handleAuthSuccess = useCallback(function () {
+    setNeedsAuth(false);
+    handleInstall();
+  }, [handleInstall]);
+  var handleClose = useCallback(function () {
+    setShowModal(false);
+  }, []);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs("div", {
       className: "flex flex-col h-full justify-center items-center w-full z-10 gap-2 p-4 text-center",
@@ -23473,43 +23758,56 @@ var WidgetNotFound = function WidgetNotFound(_ref) {
           className: "h-3 w-3"
         }), "Find in Registry"]
       })]
-    }), showModal && /*#__PURE__*/jsxs(Modal, {
-      title: "Registry Package",
+    }), /*#__PURE__*/jsx(Modal, {
+      isOpen: showModal,
+      setIsOpen: setShowModal,
       width: "w-1/3",
-      height: "h-auto",
-      onClose: function onClose() {
-        return setShowModal(false);
-      },
-      children: [isLoading && /*#__PURE__*/jsx("div", {
-        className: "flex items-center justify-center p-12",
-        children: /*#__PURE__*/jsx(FontAwesomeIcon, {
-          icon: "spinner",
-          className: "h-5 w-5 text-gray-400 animate-spin"
-        })
-      }), !isLoading && registryWidget && /*#__PURE__*/jsx(RegistryPackageDetail, {
-        widget: registryWidget,
-        onInstall: handleInstall,
-        isInstalling: isInstalling,
-        installError: installError
-      }), !isLoading && notFound && /*#__PURE__*/jsxs("div", {
-        className: "flex flex-col items-center justify-center gap-3 p-12 text-center",
-        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-          icon: "triangle-exclamation",
-          className: "h-6 w-6 text-amber-500"
-        }), /*#__PURE__*/jsx("div", {
-          className: "text-sm text-gray-400",
-          children: "This widget is not available in the registry."
-        }), /*#__PURE__*/jsx(Button, {
-          title: "Close",
-          bgColor: "bg-gray-600",
-          hoverBackgroundColor: "hover:bg-gray-700",
-          textSize: "text-sm",
-          padding: "py-1.5 px-4",
-          onClick: function onClick() {
-            return setShowModal(false);
-          }
+      height: "auto",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "relative",
+        children: [/*#__PURE__*/jsx("button", {
+          type: "button",
+          className: "absolute top-3 right-3 z-10 text-gray-500 hover:text-gray-300 transition-colors",
+          onClick: handleClose,
+          children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "xmark",
+            className: "h-4 w-4"
+          })
+        }), isLoading && /*#__PURE__*/jsx("div", {
+          className: "flex items-center justify-center p-12",
+          children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "spinner",
+            className: "h-5 w-5 text-gray-400 animate-spin"
+          })
+        }), !isLoading && needsAuth && registryWidget && /*#__PURE__*/jsx(RegistryAuthPrompt, {
+          onAuthenticated: handleAuthSuccess,
+          onCancel: function onCancel() {
+            return setNeedsAuth(false);
+          },
+          message: "Sign in to install this widget from the Dash Registry."
+        }), !isLoading && !needsAuth && registryWidget && /*#__PURE__*/jsx(RegistryPackageDetail, {
+          widget: registryWidget,
+          onInstall: handleInstall,
+          isInstalling: isInstalling,
+          installError: installError
+        }), !isLoading && notFound && /*#__PURE__*/jsxs("div", {
+          className: "flex flex-col items-center justify-center gap-3 p-12 text-center",
+          children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "triangle-exclamation",
+            className: "h-6 w-6 text-amber-500"
+          }), /*#__PURE__*/jsx("div", {
+            className: "text-sm text-gray-400",
+            children: "This widget is not available in the registry."
+          }), /*#__PURE__*/jsx(Button, {
+            title: "Close",
+            bgColor: "bg-gray-600",
+            hoverBackgroundColor: "hover:bg-gray-700",
+            textSize: "text-sm",
+            padding: "py-1.5 px-4",
+            onClick: handleClose
+          })]
         })]
-      })]
+      })
     })]
   });
 };