@trops/dash-core 0.1.268 → 0.1.270

package/dist/index.esm.js

@@ -23109,6 +23109,465 @@ var WidgetHelpers = /*#__PURE__*/function () {
   }]);
 }();
 
+var RegistryPackageDetail = function RegistryPackageDetail(_ref) {
+  var widget = _ref.widget,
+    onInstall = _ref.onInstall,
+    _ref$isInstalling = _ref.isInstalling,
+    isInstalling = _ref$isInstalling === void 0 ? false : _ref$isInstalling,
+    _ref$installError = _ref.installError,
+    installError = _ref$installError === void 0 ? null : _ref$installError,
+    _ref$isInstalled = _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, {
+    grow: false
+  });
+  if (!widget) return null;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col flex-1 min-h-0",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex-1 min-h-0 overflow-y-auto p-6 space-y-6 ".concat(panelStyles.textColor || "text-gray-200"),
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex flex-row items-center gap-3",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "h-5 w-5 flex-shrink-0 flex items-center justify-center",
+          children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: widget.icon || "cube",
+            className: "h-5 w-5"
+          })
+        }), /*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsxs("div", {
+            className: "flex items-center gap-2",
+            children: [/*#__PURE__*/jsx(SubHeading3, {
+              title: widget.packageDisplayName,
+              padding: false
+            }), isInstalled && /*#__PURE__*/jsx("span", {
+              className: "text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400 flex-shrink-0",
+              children: "Installed"
+            })]
+          }), /*#__PURE__*/jsxs("div", {
+            className: "flex items-center gap-2 mt-0.5",
+            children: [/*#__PURE__*/jsxs("span", {
+              className: "text-sm opacity-60",
+              children: ["by ", widget.packageAuthor || "Unknown"]
+            }), /*#__PURE__*/jsxs("span", {
+              className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-70"),
+              children: ["v", widget.packageVersion]
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/jsx("hr", {
+        className: currentTheme["border-primary-medium"]
+      }), widget.packageDescription && /*#__PURE__*/jsx("p", {
+        className: "text-sm",
+        children: widget.packageDescription
+      }), widget.packageTags && widget.packageTags.length > 0 && /*#__PURE__*/jsx("div", {
+        className: "flex flex-wrap gap-1",
+        children: widget.packageTags.map(function (tag) {
+          return /*#__PURE__*/jsx("span", {
+            className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-60"),
+            children: tag
+          }, tag);
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx("span", {
+          className: "text-xs font-semibold opacity-50 mb-1 block",
+          children: "INCLUDED WIDGETS"
+        }), /*#__PURE__*/jsx("div", {
+          className: "space-y-1.5",
+          children: (widget.packageWidgets || []).map(function (w, idx) {
+            return /*#__PURE__*/jsxs("div", {
+              className: "p-2 rounded ".concat(currentTheme["bg-primary-medium"]),
+              children: [/*#__PURE__*/jsx("div", {
+                className: "text-sm font-medium",
+                children: w.displayName || w.name
+              }), w.description && /*#__PURE__*/jsx("div", {
+                className: "text-xs opacity-50 mt-0.5",
+                children: w.description
+              }), getUserConfigurableProviders(w.providers).length > 0 && /*#__PURE__*/jsxs("div", {
+                className: "space-y-1 mt-1",
+                children: [/*#__PURE__*/jsx("div", {
+                  className: "flex gap-1 flex-wrap",
+                  children: getUserConfigurableProviders(w.providers).map(function (p, pidx) {
+                    return /*#__PURE__*/jsxs("span", {
+                      className: "text-xs px-1.5 py-0.5 rounded bg-blue-900/30 text-blue-400",
+                      children: [p.type, p.required ? " *" : ""]
+                    }, pidx);
+                  })
+                }), getUserConfigurableProviders(w.providers).some(function (p) {
+                  var _p$requiredTools;
+                  return ((_p$requiredTools = p.requiredTools) === null || _p$requiredTools === void 0 ? void 0 : _p$requiredTools.length) > 0;
+                }) && /*#__PURE__*/jsx("div", {
+                  className: "flex flex-wrap gap-1 ml-1",
+                  children: getUserConfigurableProviders(w.providers).filter(function (p) {
+                    var _p$requiredTools2;
+                    return ((_p$requiredTools2 = p.requiredTools) === null || _p$requiredTools2 === void 0 ? void 0 : _p$requiredTools2.length) > 0;
+                  }).flatMap(function (p) {
+                    return p.requiredTools.map(function (tool) {
+                      return /*#__PURE__*/jsx("span", {
+                        className: "text-[10px] font-mono px-1.5 py-0.5 rounded bg-white/5 opacity-60",
+                        children: tool
+                      }, "".concat(p.type, "-").concat(tool));
+                    });
+                  })
+                })]
+              })]
+            }, idx);
+          })
+        })]
+      }), widget.appOrigin && /*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-1.5 text-xs opacity-50",
+        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "laptop",
+          className: "h-3 w-3"
+        }), /*#__PURE__*/jsxs("span", {
+          children: ["Built for ", widget.appOrigin]
+        })]
+      }), widget.missingApis && widget.missingApis.length > 0 && /*#__PURE__*/jsx("div", {
+        className: "p-2 rounded bg-yellow-900/30 border border-yellow-700",
+        children: /*#__PURE__*/jsxs("p", {
+          className: "text-xs text-yellow-400",
+          children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "triangle-exclamation",
+            className: "mr-1"
+          }), "Incompatible \u2014 requires ", widget.missingApis.join(", "), " API", widget.missingApis.length !== 1 ? "s" : ""]
+        })
+      }), widget.repository && /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx("span", {
+          className: "text-xs font-semibold opacity-50 mb-1 block",
+          children: "REPOSITORY"
+        }), /*#__PURE__*/jsx("button", {
+          type: "button",
+          onClick: function onClick() {
+            var _window$mainApi;
+            return (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.shell) === null || _window$mainApi === void 0 ? void 0 : _window$mainApi.openExternal(widget.repository);
+          },
+          className: "text-sm text-blue-400 hover:text-blue-300 hover:underline transition-colors break-all text-left",
+          children: widget.repository
+        })]
+      }), installError && /*#__PURE__*/jsx("div", {
+        className: "p-2 rounded bg-red-900/30 border border-red-700",
+        children: /*#__PURE__*/jsx("p", {
+          className: "text-xs text-red-400",
+          children: installError
+        })
+      })]
+    }), /*#__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",
+        bgColor: isInstalled ? "bg-emerald-600/50" : "bg-blue-600",
+        hoverBackgroundColor: isInstalled || isInstalling ? "" : "hover:bg-blue-700",
+        textSize: "text-sm",
+        padding: "py-1.5 px-4",
+        onClick: onInstall,
+        disabled: isInstalling || isInstalled
+      })
+    }), /*#__PURE__*/jsx(RegistryAuthModal, {
+      isOpen: showAuth,
+      setIsOpen: function setIsOpen(open) {
+        if (!open && onAuthCancel) onAuthCancel();
+      },
+      onAuthenticated: onAuthSuccess,
+      onCancel: onAuthCancel,
+      message: "Sign in to install this widget from the Dash Registry."
+    })]
+  });
+};
+
+/**
+ * Extract a search query from a widget component key.
+ *
+ * Scoped IDs look like "scope.packageName.WidgetName" — we can do an exact
+ * package lookup with the middle segment.  Plain names are just the widget
+ * class name, so we fall back to a search.
+ */
+function getWidgetSearchQuery(componentKey) {
+  var parts = componentKey.split(".");
+  if (parts.length >= 3) {
+    return {
+      packageName: parts[1],
+      widgetName: parts[2],
+      scope: parts[0]
+    };
+  }
+  return {
+    packageName: null,
+    widgetName: componentKey,
+    scope: null
+  };
+}
+
+/**
+ * Convert a raw registry package object into the flat widget shape
+ * expected by RegistryPackageDetail.
+ */
+function packageToFlatWidget(pkg) {
+  return {
+    key: "".concat(pkg.name, "/0"),
+    name: pkg.displayName || pkg.name,
+    icon: pkg.icon || null,
+    isRegistry: true,
+    packageName: pkg.name,
+    packageScope: pkg.scope || null,
+    packageDisplayName: pkg.displayName || pkg.name,
+    packageVersion: pkg.version,
+    packageAuthor: pkg.author || "",
+    packageDescription: pkg.description || "",
+    packageTags: pkg.tags || [],
+    packageCategory: pkg.category || "",
+    downloadUrl: pkg.downloadUrl || "",
+    repository: pkg.repository || "",
+    publishedAt: pkg.publishedAt || "",
+    packageWidgets: pkg.widgets || [],
+    appOrigin: pkg.appOrigin || null,
+    packageProviders: pkg.providers || [],
+    missingApis: []
+  };
+}
+
+var WidgetNotFound = function WidgetNotFound(_ref) {
+  var component = _ref.component;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showModal = _useState2[0],
+    setShowModal = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    registryWidget = _useState4[0],
+    setRegistryWidget = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isLoading = _useState6[0],
+    setIsLoading = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    notFound = _useState8[0],
+    setNotFound = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isInstalling = _useState0[0],
+    setIsInstalling = _useState0[1];
+  var _useState1 = useState(null),
+    _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 lookupWidget = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _getWidgetSearchQuery, packageName, widgetName, pkg, result;
+    return _regeneratorRuntime.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          setShowModal(true);
+          setIsLoading(true);
+          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
+          if (!packageName) {
+            _context.next = 3;
+            break;
+          }
+          _context.next = 2;
+          return window.mainApi.registry.getPackage(packageName);
+        case 2:
+          pkg = _context.sent;
+        case 3:
+          if (pkg) {
+            _context.next = 5;
+            break;
+          }
+          _context.next = 4;
+          return window.mainApi.registry.search(widgetName);
+        case 4:
+          result = _context.sent;
+          pkg = (result.packages || []).find(function (p) {
+            return (p.widgets || []).some(function (w) {
+              return w.name === widgetName;
+            });
+          });
+        case 5:
+          if (pkg) {
+            setRegistryWidget(packageToFlatWidget(pkg));
+          } else {
+            setNotFound(true);
+          }
+          _context.next = 7;
+          break;
+        case 6:
+          _context.prev = 6;
+          _context["catch"](1);
+          setNotFound(true);
+        case 7:
+          setIsLoading(false);
+        case 8:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[1, 6]]);
+  })), [component]);
+  var handleInstall = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    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:
+          if (registryWidget) {
+            _context2.next = 1;
+            break;
+          }
+          return _context2.abrupt("return");
+        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 = 8;
+          return window.mainApi.widgets.install(scopedId, resolvedUrl);
+        case 8:
+          setShowModal(false);
+          _context2.next = 10;
+          break;
+        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 11:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[2, 9], [3, 6]]);
+  })), [registryWidget]);
+  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",
+      children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+        icon: "triangle-exclamation",
+        className: "h-6 w-6 text-amber-500"
+      }), /*#__PURE__*/jsx("div", {
+        className: "text-sm font-semibold text-gray-300",
+        children: "Widget Not Found"
+      }), /*#__PURE__*/jsx("div", {
+        className: "text-xs text-gray-500 font-mono",
+        children: component
+      }), /*#__PURE__*/jsx("div", {
+        className: "text-xs text-gray-600 mt-1",
+        children: "This widget may have been uninstalled or renamed."
+      }), /*#__PURE__*/jsxs("button", {
+        type: "button",
+        className: "flex items-center gap-1.5 text-xs text-blue-400 hover:text-blue-300 transition-colors mt-2",
+        onClick: lookupWidget,
+        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "magnifying-glass",
+          className: "h-3 w-3"
+        }), "Find in Registry"]
+      })]
+    }), /*#__PURE__*/jsx(Modal, {
+      isOpen: showModal,
+      setIsOpen: setShowModal,
+      width: "w-1/3",
+      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 && 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
+          })]
+        })]
+      })
+    }), /*#__PURE__*/jsx(RegistryAuthModal, {
+      isOpen: needsAuth && !!registryWidget,
+      setIsOpen: function setIsOpen(open) {
+        if (!open) setNeedsAuth(false);
+      },
+      onAuthenticated: handleAuthSuccess,
+      onCancel: function onCancel() {
+        return setNeedsAuth(false);
+      },
+      message: "Sign in to install this widget from the Dash Registry."
+    })]
+  });
+};
+
 function ownKeys$q(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$q(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper$2(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$2() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -23199,728 +23658,277 @@ var WidgetRenderer = function WidgetRenderer(_ref) {
       var _ComponentManager$get;
       var isLayout = ComponentManager.isLayoutContainer(component);
       // grab the component from the map
-      var WidgetComponent = isLayout === false ? m[component]["component"] : (_ComponentManager$get = ComponentManager.getComponent(component)) === null || _ComponentManager$get === void 0 ? void 0 : _ComponentManager$get.component;
+      var WidgetComponent = (_ComponentManager$get = ComponentManager.getComponent(component)) === null || _ComponentManager$get === void 0 ? void 0 : _ComponentManager$get.component;
 
       // get the config details from the .dash file
       var config = ComponentManager.config(component, params);
       var styles = null;
       // if the config is not null, then we can check for styles
       if (config !== null && config !== undefined) {
-        // check to see if the config has styles
-        // if it does, then we can use those styles
-        // otherwise, we will use the default styles
-        // styles will be an object with the styles for the widget
-        // and set the styles from the config if they exist
-        styles = "styles" in config ? config["styles"] : null;
-      }
-
-      // user input for the customization of the widget
-      var userPrefs = params["userPrefs"];
-
-      // Check to make sure this is a Component
-      if (typeof WidgetComponent !== "function") return null;
-      if (isLayout === false) {
-        params["width"] = "w-full";
-      }
-      if ("width" in params === false) {
-        params["width"] = "w-full";
-      }
-      params["componentName"] = component;
-
-      // init will inject the params from the widget into the widgetAPI
-      // widgetApi.init(params);
-
-      var bgColor = "";
-      if (styles !== null) {
-        bgColor = "backgroundColor" in styles ? styles["backgroundColor"] : "";
-      }
-
-      // Build widgetData for WidgetContext — hooks read from this
-      var uuidString = getUUID(params.uuid);
-      var widgetData = _objectSpread$q(_objectSpread$q({}, params), {}, {
-        uuidString: uuidString,
-        providers: (config === null || config === void 0 ? void 0 : config.providers) || [],
-        notifications: (config === null || config === void 0 ? void 0 : config.notifications) || []
-      });
-
-      // need to set the electron api here.
-      var w = WidgetApi;
-      w.init({
-        id: widgetKey,
-        name: component
-      });
-      w.setElectronApi(dashApi);
-      w.setPublisher(DashboardPublisher);
-
-      // init the helpers — pass WidgetApi (which has publishEvent/registerListeners
-      // that delegate to DashboardPublisher), not the raw Electron dashApi
-      var helpers = new WidgetHelpers(params, w);
-
-      // Memoize context value to prevent unnecessary re-renders
-      var widgetContextValue = {
-        widgetData: widgetData
-      };
-      var hasScheduledTasks = ((config === null || config === void 0 ? void 0 : config.scheduledTasks) || []).length > 0;
-      var widgetElement = children === null ? /*#__PURE__*/jsx(WidgetComponent, _objectSpread$q(_objectSpread$q(_objectSpread$q({
-        id: "widget-nokids-".concat(widgetKey),
-        listen: function listen(listeners, handlers) {
-          return helpers.listen(listeners, handlers);
-        },
-        publishEvent: function publishEvent(eventName, payload) {
-          return helpers.publishEvent(eventName, payload);
-        },
-        api: w
-      }, params), userPrefs), {}, {
-        backgroundColor: bgColor,
-        widgetConfig: helpers.config(),
-        widgetEventNames: helpers.events()
-      }), "widget-nokids-".concat(widgetKey)) : /*#__PURE__*/jsx(WidgetComponent, _objectSpread$q(_objectSpread$q(_objectSpread$q({
-        listen: function listen(listeners, handlers) {
-          return helpers.listen(listeners, handlers);
-        },
-        publishEvent: function publishEvent(eventName, payload) {
-          return helpers.publishEvent(eventName, payload);
-        },
-        api: w,
-        id: "widget-kids-".concat(widgetKey)
-      }, params), userPrefs), {}, {
-        backgroundColor: bgColor,
-        children: children
-      }), "widget-kids-".concat(widgetKey));
-
-      // Wrap widget rendering with WidgetContext + error boundary
-      return /*#__PURE__*/jsx(WidgetContext.Provider, {
-        value: widgetContextValue,
-        children: /*#__PURE__*/jsx(WidgetErrorBoundary, {
-          widgetName: component,
-          children: hasScheduledTasks ? /*#__PURE__*/jsxs("div", {
-            className: "flex flex-col w-full h-full min-h-0",
-            children: [/*#__PURE__*/jsx("div", {
-              className: "flex-1 min-h-0 overflow-auto",
-              children: widgetElement
-            }), /*#__PURE__*/jsx(WidgetCardStatusBar, {
-              item: params
-            })]
-          }) : widgetElement
-        })
-      });
-    }
-  } catch (e) {
-    return null;
-  }
-  return null;
-};
-
-/**
- * WidgetFactory
- * Get the "component" and params and dynamically generate the Component
- */
-var WidgetFactory = {
-  getComponent: function getComponent(component) {
-    try {
-      return ComponentManager.getComponent(component);
-    } catch (e) {
-      return null;
-    }
-  },
-  render: function render(component, key) {
-    var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    var children = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-    return /*#__PURE__*/jsx(WidgetRenderer, {
-      component: component,
-      widgetKey: key,
-      params: params,
-      children: children
-    });
-  },
-  renderChildren: function renderChildren(children) {
-    return React__default.Children.map(children, function (el) {
-      return el;
-      // const clonedComponent = React.cloneElement(el);
-      // return clonedComponent;
-    });
-  },
-  /**
-   * config
-   * Get the developer's component configuration and enhance that configuration with
-   * required fields if they are not present
-   *
-   * @param {object} component
-   * @returns
-   */
-  config: function config(component) {
-    if (component) {
-      var requiredFields = {
-        type: {
-          value: "text"
-        },
-        required: {
-          value: false
-        },
-        options: {
-          value: []
-        },
-        defaultValue: {
-          value: ""
-        },
-        events: [] // events that will be published
-      };
-
-      // get the component configuration from the map
-      var components = ComponentManager.map();
-
-      // let c = deepCopy(components['component']);
-      var c = JSON.parse(JSON.stringify(components[component]));
-      c["component"] = component;
-      if ("userConfig" in c === false) {
-        c["userConfig"] = {};
-        return c;
+        // check to see if the config has styles
+        // if it does, then we can use those styles
+        // otherwise, we will use the default styles
+        // styles will be an object with the styles for the widget
+        // and set the styles from the config if they exist
+        styles = "styles" in config ? config["styles"] : null;
       }
-      var userPrefs = {};
-      // now we can make sure the configuration is "complete"
-      Object.keys(c["userConfig"]).forEach(function (key) {
-        // check the required fields!
-        Object.keys(requiredFields).forEach(function (k) {
-          if (k in c["userConfig"][key] === false) {
-            c["userConfig"][key][k] = requiredFields[k]["value"];
-          }
+
+      // user input for the customization of the widget
+      var userPrefs = params["userPrefs"];
+
+      // Check to make sure this is a Component
+      if (typeof WidgetComponent !== "function") {
+        return /*#__PURE__*/jsx(WidgetNotFound, {
+          component: component
         });
-        // tack on the user preferences
-        userPrefs[key] = WidgetFactory.userPrefsForItem(c, key, c["userConfig"][key]);
-      });
-      c["userPrefs"] = userPrefs;
-      return c;
-    }
-    return null;
-  },
-  workspace: function workspace(component) {
-    var components = WidgetFactory.map();
-    if (component !== undefined && components) {
-      if (component in components) {
-        var c = components[component];
-        if ("workspace" in c) {
-          return c["workspace"];
-        }
       }
-    }
-    return null;
-  },
-  map: function map() {
-    return ComponentManager.map();
-  },
-  /**
-   * userConfig
-   * We want to make sure all of the keys are available, and if not, set defaults...
-   * @param {object} config the current configuration object
-   * @returns
-   */
-  userPrefsForItem: function userPrefsForItem(item, key, config) {
-    try {
-      // console.log('value: ', item['userPrefs'][key]);
-      // console.log('user prefs config item ', item, key, config);
-
-      var prefsForItem = {};
-      if ("userPrefs" in item) {
-        if (key in item["userPrefs"]) {
-          prefsForItem = _defineProperty({}, key, item["userPrefs"][key]);
-        } else {
-          if ("defaultValue" in config) {
-            prefsForItem = _defineProperty({}, key, config["defaultValue"]);
-          }
-        }
-      } else {
-        // no user preferences in the item yet so we can try and set the defaults.
-        // console.log('config item ', config);
-        prefsForItem[key] = "defaultValue" in config ? config["defaultValue"] : "";
+      if (isLayout === false) {
+        params["width"] = "w-full";
+      }
+      if ("width" in params === false) {
+        params["width"] = "w-full";
       }
+      params["componentName"] = component;
 
-      // console.log('config item prefs ', prefsForItem);
-      return prefsForItem;
-    } catch (e) {
-      return {};
-    }
-  }
-};
+      // init will inject the params from the widget into the widgetAPI
+      // widgetApi.init(params);
 
-var _excluded$3 = ["title", "description", "icon"];
-var ExternalWidget = function ExternalWidget(_ref) {
-  var title = _ref.title,
-    description = _ref.description,
-    icon = _ref.icon;
-    _objectWithoutProperties(_ref, _excluded$3);
-  return /*#__PURE__*/jsx(Panel, {
-    children: /*#__PURE__*/jsxs("div", {
-      className: "flex flex-col items-center justify-center gap-2 py-6 text-center opacity-70",
-      children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-        icon: icon || "puzzle-piece",
-        className: "h-6 w-6 opacity-50"
-      }), /*#__PURE__*/jsx(Heading, {
-        title: title || "External Widget",
-        padding: false
-      }), description && /*#__PURE__*/jsx("p", {
-        className: "text-sm text-gray-400 max-w-xs",
-        children: description
-      })]
-    })
-  });
-};
+      var bgColor = "";
+      if (styles !== null) {
+        bgColor = "backgroundColor" in styles ? styles["backgroundColor"] : "";
+      }
 
-var RegistryPackageDetail = function RegistryPackageDetail(_ref) {
-  var widget = _ref.widget,
-    onInstall = _ref.onInstall,
-    _ref$isInstalling = _ref.isInstalling,
-    isInstalling = _ref$isInstalling === void 0 ? false : _ref$isInstalling,
-    _ref$installError = _ref.installError,
-    installError = _ref$installError === void 0 ? null : _ref$installError,
-    _ref$isInstalled = _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, {
-    grow: false
-  });
-  if (!widget) return null;
-  return /*#__PURE__*/jsxs("div", {
-    className: "flex flex-col flex-1 min-h-0",
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "flex-1 min-h-0 overflow-y-auto p-6 space-y-6 ".concat(panelStyles.textColor || "text-gray-200"),
-      children: [/*#__PURE__*/jsxs("div", {
-        className: "flex flex-row items-center gap-3",
-        children: [/*#__PURE__*/jsx("div", {
-          className: "h-5 w-5 flex-shrink-0 flex items-center justify-center",
-          children: /*#__PURE__*/jsx(FontAwesomeIcon, {
-            icon: widget.icon || "cube",
-            className: "h-5 w-5"
-          })
-        }), /*#__PURE__*/jsxs("div", {
-          children: [/*#__PURE__*/jsxs("div", {
-            className: "flex items-center gap-2",
-            children: [/*#__PURE__*/jsx(SubHeading3, {
-              title: widget.packageDisplayName,
-              padding: false
-            }), isInstalled && /*#__PURE__*/jsx("span", {
-              className: "text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400 flex-shrink-0",
-              children: "Installed"
-            })]
-          }), /*#__PURE__*/jsxs("div", {
-            className: "flex items-center gap-2 mt-0.5",
-            children: [/*#__PURE__*/jsxs("span", {
-              className: "text-sm opacity-60",
-              children: ["by ", widget.packageAuthor || "Unknown"]
-            }), /*#__PURE__*/jsxs("span", {
-              className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-70"),
-              children: ["v", widget.packageVersion]
-            })]
-          })]
-        })]
-      }), /*#__PURE__*/jsx("hr", {
-        className: currentTheme["border-primary-medium"]
-      }), widget.packageDescription && /*#__PURE__*/jsx("p", {
-        className: "text-sm",
-        children: widget.packageDescription
-      }), widget.packageTags && widget.packageTags.length > 0 && /*#__PURE__*/jsx("div", {
-        className: "flex flex-wrap gap-1",
-        children: widget.packageTags.map(function (tag) {
-          return /*#__PURE__*/jsx("span", {
-            className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-60"),
-            children: tag
-          }, tag);
-        })
-      }), /*#__PURE__*/jsxs("div", {
-        children: [/*#__PURE__*/jsx("span", {
-          className: "text-xs font-semibold opacity-50 mb-1 block",
-          children: "INCLUDED WIDGETS"
-        }), /*#__PURE__*/jsx("div", {
-          className: "space-y-1.5",
-          children: (widget.packageWidgets || []).map(function (w, idx) {
-            return /*#__PURE__*/jsxs("div", {
-              className: "p-2 rounded ".concat(currentTheme["bg-primary-medium"]),
-              children: [/*#__PURE__*/jsx("div", {
-                className: "text-sm font-medium",
-                children: w.displayName || w.name
-              }), w.description && /*#__PURE__*/jsx("div", {
-                className: "text-xs opacity-50 mt-0.5",
-                children: w.description
-              }), getUserConfigurableProviders(w.providers).length > 0 && /*#__PURE__*/jsxs("div", {
-                className: "space-y-1 mt-1",
-                children: [/*#__PURE__*/jsx("div", {
-                  className: "flex gap-1 flex-wrap",
-                  children: getUserConfigurableProviders(w.providers).map(function (p, pidx) {
-                    return /*#__PURE__*/jsxs("span", {
-                      className: "text-xs px-1.5 py-0.5 rounded bg-blue-900/30 text-blue-400",
-                      children: [p.type, p.required ? " *" : ""]
-                    }, pidx);
-                  })
-                }), getUserConfigurableProviders(w.providers).some(function (p) {
-                  var _p$requiredTools;
-                  return ((_p$requiredTools = p.requiredTools) === null || _p$requiredTools === void 0 ? void 0 : _p$requiredTools.length) > 0;
-                }) && /*#__PURE__*/jsx("div", {
-                  className: "flex flex-wrap gap-1 ml-1",
-                  children: getUserConfigurableProviders(w.providers).filter(function (p) {
-                    var _p$requiredTools2;
-                    return ((_p$requiredTools2 = p.requiredTools) === null || _p$requiredTools2 === void 0 ? void 0 : _p$requiredTools2.length) > 0;
-                  }).flatMap(function (p) {
-                    return p.requiredTools.map(function (tool) {
-                      return /*#__PURE__*/jsx("span", {
-                        className: "text-[10px] font-mono px-1.5 py-0.5 rounded bg-white/5 opacity-60",
-                        children: tool
-                      }, "".concat(p.type, "-").concat(tool));
-                    });
-                  })
-                })]
-              })]
-            }, idx);
-          })
-        })]
-      }), widget.appOrigin && /*#__PURE__*/jsxs("div", {
-        className: "flex items-center gap-1.5 text-xs opacity-50",
-        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-          icon: "laptop",
-          className: "h-3 w-3"
-        }), /*#__PURE__*/jsxs("span", {
-          children: ["Built for ", widget.appOrigin]
-        })]
-      }), widget.missingApis && widget.missingApis.length > 0 && /*#__PURE__*/jsx("div", {
-        className: "p-2 rounded bg-yellow-900/30 border border-yellow-700",
-        children: /*#__PURE__*/jsxs("p", {
-          className: "text-xs text-yellow-400",
-          children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-            icon: "triangle-exclamation",
-            className: "mr-1"
-          }), "Incompatible \u2014 requires ", widget.missingApis.join(", "), " API", widget.missingApis.length !== 1 ? "s" : ""]
-        })
-      }), widget.repository && /*#__PURE__*/jsxs("div", {
-        children: [/*#__PURE__*/jsx("span", {
-          className: "text-xs font-semibold opacity-50 mb-1 block",
-          children: "REPOSITORY"
-        }), /*#__PURE__*/jsx("button", {
-          type: "button",
-          onClick: function onClick() {
-            var _window$mainApi;
-            return (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.shell) === null || _window$mainApi === void 0 ? void 0 : _window$mainApi.openExternal(widget.repository);
-          },
-          className: "text-sm text-blue-400 hover:text-blue-300 hover:underline transition-colors break-all text-left",
-          children: widget.repository
-        })]
-      }), installError && /*#__PURE__*/jsx("div", {
-        className: "p-2 rounded bg-red-900/30 border border-red-700",
-        children: /*#__PURE__*/jsx("p", {
-          className: "text-xs text-red-400",
-          children: installError
+      // Build widgetData for WidgetContext — hooks read from this
+      var uuidString = getUUID(params.uuid);
+      var widgetData = _objectSpread$q(_objectSpread$q({}, params), {}, {
+        uuidString: uuidString,
+        providers: (config === null || config === void 0 ? void 0 : config.providers) || [],
+        notifications: (config === null || config === void 0 ? void 0 : config.notifications) || []
+      });
+
+      // need to set the electron api here.
+      var w = WidgetApi;
+      w.init({
+        id: widgetKey,
+        name: component
+      });
+      w.setElectronApi(dashApi);
+      w.setPublisher(DashboardPublisher);
+
+      // init the helpers — pass WidgetApi (which has publishEvent/registerListeners
+      // that delegate to DashboardPublisher), not the raw Electron dashApi
+      var helpers = new WidgetHelpers(params, w);
+
+      // Memoize context value to prevent unnecessary re-renders
+      var widgetContextValue = {
+        widgetData: widgetData
+      };
+      var hasScheduledTasks = ((config === null || config === void 0 ? void 0 : config.scheduledTasks) || []).length > 0;
+      var widgetElement = children === null ? /*#__PURE__*/jsx(WidgetComponent, _objectSpread$q(_objectSpread$q(_objectSpread$q({
+        id: "widget-nokids-".concat(widgetKey),
+        listen: function listen(listeners, handlers) {
+          return helpers.listen(listeners, handlers);
+        },
+        publishEvent: function publishEvent(eventName, payload) {
+          return helpers.publishEvent(eventName, payload);
+        },
+        api: w
+      }, params), userPrefs), {}, {
+        backgroundColor: bgColor,
+        widgetConfig: helpers.config(),
+        widgetEventNames: helpers.events()
+      }), "widget-nokids-".concat(widgetKey)) : /*#__PURE__*/jsx(WidgetComponent, _objectSpread$q(_objectSpread$q(_objectSpread$q({
+        listen: function listen(listeners, handlers) {
+          return helpers.listen(listeners, handlers);
+        },
+        publishEvent: function publishEvent(eventName, payload) {
+          return helpers.publishEvent(eventName, payload);
+        },
+        api: w,
+        id: "widget-kids-".concat(widgetKey)
+      }, params), userPrefs), {}, {
+        backgroundColor: bgColor,
+        children: children
+      }), "widget-kids-".concat(widgetKey));
+
+      // Wrap widget rendering with WidgetContext + error boundary
+      return /*#__PURE__*/jsx(WidgetContext.Provider, {
+        value: widgetContextValue,
+        children: /*#__PURE__*/jsx(WidgetErrorBoundary, {
+          widgetName: component,
+          children: hasScheduledTasks ? /*#__PURE__*/jsxs("div", {
+            className: "flex flex-col w-full h-full min-h-0",
+            children: [/*#__PURE__*/jsx("div", {
+              className: "flex-1 min-h-0 overflow-auto",
+              children: widgetElement
+            }), /*#__PURE__*/jsx(WidgetCardStatusBar, {
+              item: params
+            })]
+          }) : widgetElement
         })
-      })]
-    }), /*#__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",
-        bgColor: isInstalled ? "bg-emerald-600/50" : "bg-blue-600",
-        hoverBackgroundColor: isInstalled || isInstalling ? "" : "hover:bg-blue-700",
-        textSize: "text-sm",
-        padding: "py-1.5 px-4",
-        onClick: onInstall,
-        disabled: isInstalling || isInstalled
-      })
-    }), /*#__PURE__*/jsx(RegistryAuthModal, {
-      isOpen: showAuth,
-      setIsOpen: function setIsOpen(open) {
-        if (!open && onAuthCancel) onAuthCancel();
-      },
-      onAuthenticated: onAuthSuccess,
-      onCancel: onAuthCancel,
-      message: "Sign in to install this widget from the Dash Registry."
-    })]
+      });
+    }
+  } catch (e) {
+    return /*#__PURE__*/jsx(WidgetNotFound, {
+      component: component
+    });
+  }
+  return /*#__PURE__*/jsx(WidgetNotFound, {
+    component: component
   });
 };
 
 /**
- * Extract a search query from a widget component key.
- *
- * Scoped IDs look like "scope.packageName.WidgetName" — we can do an exact
- * package lookup with the middle segment.  Plain names are just the widget
- * class name, so we fall back to a search.
- */
-function getWidgetSearchQuery(componentKey) {
-  var parts = componentKey.split(".");
-  if (parts.length >= 3) {
-    return {
-      packageName: parts[1],
-      widgetName: parts[2],
-      scope: parts[0]
-    };
-  }
-  return {
-    packageName: null,
-    widgetName: componentKey,
-    scope: null
-  };
-}
-
-/**
- * Convert a raw registry package object into the flat widget shape
- * expected by RegistryPackageDetail.
+ * WidgetFactory
+ * Get the "component" and params and dynamically generate the Component
  */
-function packageToFlatWidget(pkg) {
-  return {
-    key: "".concat(pkg.name, "/0"),
-    name: pkg.displayName || pkg.name,
-    icon: pkg.icon || null,
-    isRegistry: true,
-    packageName: pkg.name,
-    packageScope: pkg.scope || null,
-    packageDisplayName: pkg.displayName || pkg.name,
-    packageVersion: pkg.version,
-    packageAuthor: pkg.author || "",
-    packageDescription: pkg.description || "",
-    packageTags: pkg.tags || [],
-    packageCategory: pkg.category || "",
-    downloadUrl: pkg.downloadUrl || "",
-    repository: pkg.repository || "",
-    publishedAt: pkg.publishedAt || "",
-    packageWidgets: pkg.widgets || [],
-    appOrigin: pkg.appOrigin || null,
-    packageProviders: pkg.providers || [],
-    missingApis: []
-  };
-}
-
-var WidgetNotFound = function WidgetNotFound(_ref) {
-  var component = _ref.component;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showModal = _useState2[0],
-    setShowModal = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    registryWidget = _useState4[0],
-    setRegistryWidget = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isLoading = _useState6[0],
-    setIsLoading = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    notFound = _useState8[0],
-    setNotFound = _useState8[1];
-  var _useState9 = useState(false),
-    _useState0 = _slicedToArray(_useState9, 2),
-    isInstalling = _useState0[0],
-    setIsInstalling = _useState0[1];
-  var _useState1 = useState(null),
-    _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 lookupWidget = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var _getWidgetSearchQuery, packageName, widgetName, pkg, result;
-    return _regeneratorRuntime.wrap(function (_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          setShowModal(true);
-          setIsLoading(true);
-          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
-          if (!packageName) {
-            _context.next = 3;
-            break;
-          }
-          _context.next = 2;
-          return window.mainApi.registry.getPackage(packageName);
-        case 2:
-          pkg = _context.sent;
-        case 3:
-          if (pkg) {
-            _context.next = 5;
-            break;
-          }
-          _context.next = 4;
-          return window.mainApi.registry.search(widgetName);
-        case 4:
-          result = _context.sent;
-          pkg = (result.packages || []).find(function (p) {
-            return (p.widgets || []).some(function (w) {
-              return w.name === widgetName;
-            });
-          });
-        case 5:
-          if (pkg) {
-            setRegistryWidget(packageToFlatWidget(pkg));
-          } else {
-            setNotFound(true);
-          }
-          _context.next = 7;
-          break;
-        case 6:
-          _context.prev = 6;
-          _context["catch"](1);
-          setNotFound(true);
-        case 7:
-          setIsLoading(false);
-        case 8:
-        case "end":
-          return _context.stop();
+var WidgetFactory = {
+  getComponent: function getComponent(component) {
+    try {
+      return ComponentManager.getComponent(component);
+    } catch (e) {
+      return null;
+    }
+  },
+  render: function render(component, key) {
+    var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var children = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+    return /*#__PURE__*/jsx(WidgetRenderer, {
+      component: component,
+      widgetKey: key,
+      params: params,
+      children: children
+    });
+  },
+  renderChildren: function renderChildren(children) {
+    return React__default.Children.map(children, function (el) {
+      return el;
+      // const clonedComponent = React.cloneElement(el);
+      // return clonedComponent;
+    });
+  },
+  /**
+   * config
+   * Get the developer's component configuration and enhance that configuration with
+   * required fields if they are not present
+   *
+   * @param {object} component
+   * @returns
+   */
+  config: function config(component) {
+    if (component) {
+      var requiredFields = {
+        type: {
+          value: "text"
+        },
+        required: {
+          value: false
+        },
+        options: {
+          value: []
+        },
+        defaultValue: {
+          value: ""
+        },
+        events: [] // events that will be published
+      };
+
+      // get the component configuration from the map
+      var components = ComponentManager.map();
+
+      // let c = deepCopy(components['component']);
+      var c = JSON.parse(JSON.stringify(components[component]));
+      c["component"] = component;
+      if ("userConfig" in c === false) {
+        c["userConfig"] = {};
+        return c;
       }
-    }, _callee, null, [[1, 6]]);
-  })), [component]);
-  var handleInstall = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    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:
-          if (registryWidget) {
-            _context2.next = 1;
-            break;
-          }
-          return _context2.abrupt("return");
-        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;
+      var userPrefs = {};
+      // now we can make sure the configuration is "complete"
+      Object.keys(c["userConfig"]).forEach(function (key) {
+        // check the required fields!
+        Object.keys(requiredFields).forEach(function (k) {
+          if (k in c["userConfig"][key] === false) {
+            c["userConfig"][key][k] = requiredFields[k]["value"];
           }
-          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 = 8;
-          return window.mainApi.widgets.install(scopedId, resolvedUrl);
-        case 8:
-          setShowModal(false);
-          _context2.next = 10;
-          break;
-        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);
+        });
+        // tack on the user preferences
+        userPrefs[key] = WidgetFactory.userPrefsForItem(c, key, c["userConfig"][key]);
+      });
+      c["userPrefs"] = userPrefs;
+      return c;
+    }
+    return null;
+  },
+  workspace: function workspace(component) {
+    var components = WidgetFactory.map();
+    if (component !== undefined && components) {
+      if (component in components) {
+        var c = components[component];
+        if ("workspace" in c) {
+          return c["workspace"];
+        }
+      }
+    }
+    return null;
+  },
+  map: function map() {
+    return ComponentManager.map();
+  },
+  /**
+   * userConfig
+   * We want to make sure all of the keys are available, and if not, set defaults...
+   * @param {object} config the current configuration object
+   * @returns
+   */
+  userPrefsForItem: function userPrefsForItem(item, key, config) {
+    try {
+      // console.log('value: ', item['userPrefs'][key]);
+      // console.log('user prefs config item ', item, key, config);
+
+      var prefsForItem = {};
+      if ("userPrefs" in item) {
+        if (key in item["userPrefs"]) {
+          prefsForItem = _defineProperty({}, key, item["userPrefs"][key]);
+        } else {
+          if ("defaultValue" in config) {
+            prefsForItem = _defineProperty({}, key, config["defaultValue"]);
           }
-        case 10:
-          setIsInstalling(false);
-        case 11:
-        case "end":
-          return _context2.stop();
+        }
+      } else {
+        // no user preferences in the item yet so we can try and set the defaults.
+        // console.log('config item ', config);
+        prefsForItem[key] = "defaultValue" in config ? config["defaultValue"] : "";
       }
-    }, _callee2, null, [[2, 9], [3, 6]]);
-  })), [registryWidget]);
-  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",
+
+      // console.log('config item prefs ', prefsForItem);
+      return prefsForItem;
+    } catch (e) {
+      return {};
+    }
+  }
+};
+
+var _excluded$3 = ["title", "description", "icon"];
+var ExternalWidget = function ExternalWidget(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    icon = _ref.icon;
+    _objectWithoutProperties(_ref, _excluded$3);
+  return /*#__PURE__*/jsx(Panel, {
+    children: /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col items-center justify-center gap-2 py-6 text-center opacity-70",
       children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-        icon: "triangle-exclamation",
-        className: "h-6 w-6 text-amber-500"
-      }), /*#__PURE__*/jsx("div", {
-        className: "text-sm font-semibold text-gray-300",
-        children: "Widget Not Found"
-      }), /*#__PURE__*/jsx("div", {
-        className: "text-xs text-gray-500 font-mono",
-        children: component
-      }), /*#__PURE__*/jsx("div", {
-        className: "text-xs text-gray-600 mt-1",
-        children: "This widget may have been uninstalled or renamed."
-      }), /*#__PURE__*/jsxs("button", {
-        type: "button",
-        className: "flex items-center gap-1.5 text-xs text-blue-400 hover:text-blue-300 transition-colors mt-2",
-        onClick: lookupWidget,
-        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-          icon: "magnifying-glass",
-          className: "h-3 w-3"
-        }), "Find in Registry"]
+        icon: icon || "puzzle-piece",
+        className: "h-6 w-6 opacity-50"
+      }), /*#__PURE__*/jsx(Heading, {
+        title: title || "External Widget",
+        padding: false
+      }), description && /*#__PURE__*/jsx("p", {
+        className: "text-sm text-gray-400 max-w-xs",
+        children: description
       })]
-    }), /*#__PURE__*/jsx(Modal, {
-      isOpen: showModal,
-      setIsOpen: setShowModal,
-      width: "w-1/3",
-      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 && 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
-          })]
-        })]
-      })
-    }), /*#__PURE__*/jsx(RegistryAuthModal, {
-      isOpen: needsAuth && !!registryWidget,
-      setIsOpen: function setIsOpen(open) {
-        if (!open) setNeedsAuth(false);
-      },
-      onAuthenticated: handleAuthSuccess,
-      onCancel: function onCancel() {
-        return setNeedsAuth(false);
-      },
-      message: "Sign in to install this widget from the Dash Registry."
-    })]
+    })
   });
 };
 
@@ -25063,7 +25071,7 @@ var LayoutGridContainer = /*#__PURE__*/memo(function (_ref3) {
         onDelete: cellComponent ? function () {
           if (onClickRemove) onClickRemove(cellComponent.id);
         } : undefined
-      }), cellComponent && isWidgetResolvable(cellComponent.component) ? /*#__PURE__*/jsx(DraggableDroppableCellBody, {
+      }), cellComponent && ComponentManager.config(cellComponent.component, cellComponent) ? /*#__PURE__*/jsx(DraggableDroppableCellBody, {
         cellNumber: cellNumber,
         gridContainerId: id,
         onMoveWidgetToCell: onMoveWidgetToCell,
@@ -25077,7 +25085,9 @@ var LayoutGridContainer = /*#__PURE__*/memo(function (_ref3) {
         onDropWidgetFromSidebar: onDropWidgetFromSidebar,
         children: cellComponent ? /*#__PURE__*/jsx("div", {
           className: "flex-1 flex flex-col min-h-[120px]",
-          children: renderedWidget
+          children: /*#__PURE__*/jsx(WidgetNotFound, {
+            component: cellComponent.component
+          })
         }) : /*#__PURE__*/jsx(WidgetCard.Body, {
           padding: "p-0",
           children: renderEmptyCellContent(cellNumber)