@trops/dash-core 0.1.250 → 0.1.253

package/dist/index.js

@@ -23291,6 +23291,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 = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAuthenticated = _useState2[0],
+    setIsAuthenticated = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isAuthenticating = _useState4[0],
+    setIsAuthenticating = _useState4[1];
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    authFlow = _useState6[0],
+    setAuthFlow = _useState6[1];
+  var _useState7 = React.useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    authError = _useState8[0],
+    setAuthError = _useState8[1];
+  var pollIntervalRef = React.useRef(null);
+  var onAuthorizedRef = React.useRef(null);
+
+  // Clean up polling on unmount
+  React.useEffect(function () {
+    return function () {
+      if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
+    };
+  }, []);
+  var checkAuth = React.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 = React.useCallback(function () {
+    if (pollIntervalRef.current) {
+      clearInterval(pollIntervalRef.current);
+      pollIntervalRef.current = null;
+    }
+    setIsAuthenticating(false);
+    setAuthFlow(null);
+  }, []);
+  var initiateAuth = React.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 = React.useRef(false);
+
+  // Check auth on mount — if already authenticated, short-circuit
+  React.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__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col gap-3 p-4",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "bg-blue-500/10 border border-blue-500/20 rounded-lg p-4 space-y-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+          className: "text-xs text-blue-300/90",
+          children: "Enter this code in your browser:"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "text-center",
+          children: /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-2xl font-mono font-bold tracking-widest text-white",
+            children: authFlow.userCode
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("p", {
+          className: "text-xs text-blue-300/70 text-center",
+          children: "Waiting for authorization \u2014 install will resume automatically..."
+        })]
+      }), onCancel && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col gap-3 p-4",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-3",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-start gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "lock",
+          className: "h-3.5 w-3.5 text-yellow-400 mt-0.5 flex-shrink-0"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-sm text-yellow-300/90",
+          children: message
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+      className: "bg-red-500/10 border border-red-500/20 rounded-lg p-3",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-start gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "circle-xmark",
+          className: "h-3.5 w-3.5 text-red-400 mt-0.5 flex-shrink-0"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs text-red-300/90",
+          children: authError
+        })]
+      })
+    }), onCancel && /*#__PURE__*/jsxRuntime.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) {
@@ -23340,7 +23601,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;
@@ -23368,6 +23630,10 @@ var WidgetNotFound = function WidgetNotFound(_ref) {
     _useState10 = _slicedToArray(_useState1, 2),
     installError = _useState10[0],
     setInstallError = _useState10[1];
+  var _useState11 = React.useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    needsAuth = _useState12[0],
+    setNeedsAuth = _useState12[1];
   var lookupWidget = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _getWidgetSearchQuery, packageName, widgetName, pkg, result;
     return _regeneratorRuntime.wrap(function (_context) {
@@ -23378,6 +23644,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
@@ -23424,7 +23691,7 @@ var WidgetNotFound = function WidgetNotFound(_ref) {
     }, _callee, null, [[1, 6]]);
   })), [component]);
   var handleInstall = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var packageName, packageScope, downloadUrl, packageVersion, scopedId, resolvedUrl, _t2;
+    var _window$mainApi, status, packageName, packageScope, downloadUrl, packageVersion, scopedId, resolvedUrl, msg, _t3;
     return _regeneratorRuntime.wrap(function (_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
@@ -23436,28 +23703,60 @@ var WidgetNotFound = function WidgetNotFound(_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 = 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 = 8;
           return window.mainApi.widgets.install(scopedId, resolvedUrl);
-        case 3:
+        case 8:
           setShowModal(false);
-          _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:
+        case 9:
+          _context2.prev = 9;
+          _t3 = _context2["catch"](2);
+          msg = _t3.message || "Failed to install package";
+          if (msg.toLowerCase().includes("unauthorized")) {
+            setNeedsAuth(true);
+          } else {
+            setInstallError(msg);
+          }
+        case 10:
           setIsInstalling(false);
-        case 6:
+        case 11:
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[2, 4]]);
+    }, _callee2, null, [[2, 9], [3, 6]]);
   })), [registryWidget]);
+  var handleAuthSuccess = React.useCallback(function () {
+    setNeedsAuth(false);
+    handleInstall();
+  }, [handleInstall]);
+  var handleClose = React.useCallback(function () {
+    setShowModal(false);
+  }, []);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col h-full justify-center items-center w-full z-10 gap-2 p-4 text-center",
@@ -23482,41 +23781,56 @@ var WidgetNotFound = function WidgetNotFound(_ref) {
           className: "h-3 w-3"
         }), "Find in Registry"]
       })]
-    }), /*#__PURE__*/jsxRuntime.jsxs(DashReact.Modal, {
+    }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Modal, {
       isOpen: showModal,
       setIsOpen: setShowModal,
       width: "w-1/3",
       height: "auto",
-      children: [isLoading && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex items-center justify-center p-12",
-        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-          icon: "spinner",
-          className: "h-5 w-5 text-gray-400 animate-spin"
-        })
-      }), !isLoading && registryWidget && /*#__PURE__*/jsxRuntime.jsx(RegistryPackageDetail, {
-        widget: registryWidget,
-        onInstall: handleInstall,
-        isInstalling: isInstalling,
-        installError: installError
-      }), !isLoading && notFound && /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex flex-col items-center justify-center gap-3 p-12 text-center",
-        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-          icon: "triangle-exclamation",
-          className: "h-6 w-6 text-amber-500"
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "text-sm text-gray-400",
-          children: "This widget is not available in the registry."
-        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.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);
-          }
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "relative",
+        children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "xmark",
+            className: "h-4 w-4"
+          })
+        }), isLoading && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex items-center justify-center p-12",
+          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "spinner",
+            className: "h-5 w-5 text-gray-400 animate-spin"
+          })
+        }), !isLoading && needsAuth && registryWidget && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(RegistryPackageDetail, {
+          widget: registryWidget,
+          onInstall: handleInstall,
+          isInstalling: isInstalling,
+          installError: installError
+        }), !isLoading && notFound && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col items-center justify-center gap-3 p-12 text-center",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "triangle-exclamation",
+            className: "h-6 w-6 text-amber-500"
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "text-sm text-gray-400",
+            children: "This widget is not available in the registry."
+          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+            title: "Close",
+            bgColor: "bg-gray-600",
+            hoverBackgroundColor: "hover:bg-gray-700",
+            textSize: "text-sm",
+            padding: "py-1.5 px-4",
+            onClick: handleClose
+          })]
         })]
-      })]
+      })
     })]
   });
 };