@trops/dash-core 0.1.93 → 0.1.94

package/dist/index.js

@@ -26384,6 +26384,257 @@ var ThemeManagerModal = function ThemeManagerModal(_ref) {
   });
 };
 
+var StarRating = function StarRating(_ref) {
+  var appId = _ref.appId,
+    packageName = _ref.packageName,
+    _ref$interactive = _ref.interactive,
+    interactive = _ref$interactive === void 0 ? true : _ref$interactive;
+  var _useContext = React.useContext(DashReact.ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    rating = _useState2[0],
+    setRating = _useState2[1];
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hoverRating = _useState4[0],
+    setHoverRating = _useState4[1];
+  var _useState5 = React.useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  React.useEffect(function () {
+    var _window$mainApi;
+    if (!appId || !packageName) return;
+    var cancelled = false;
+    setLoading(true);
+    (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.dashboardRatings) === null || _window$mainApi === void 0 || _window$mainApi.getDashboardRating(appId, packageName).then(function (result) {
+      if (!cancelled && result !== null && result !== void 0 && result.rating) {
+        setRating(result.rating);
+      }
+    })["catch"](function () {})["finally"](function () {
+      if (!cancelled) setLoading(false);
+    });
+    return function () {
+      cancelled = true;
+    };
+  }, [appId, packageName]);
+  function handleClick(_x) {
+    return _handleClick.apply(this, arguments);
+  }
+  function _handleClick() {
+    _handleClick = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(value) {
+      var newRating, _window$mainApi2;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!interactive || !appId || !packageName)) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            newRating = value === rating ? 0 : value;
+            setRating(newRating);
+            _context.prev = 2;
+            _context.next = 3;
+            return (_window$mainApi2 = window.mainApi) === null || _window$mainApi2 === void 0 || (_window$mainApi2 = _window$mainApi2.dashboardRatings) === null || _window$mainApi2 === void 0 ? void 0 : _window$mainApi2.saveDashboardRating(appId, packageName, newRating);
+          case 3:
+            _context.next = 5;
+            break;
+          case 4:
+            _context.prev = 4;
+            _context["catch"](2);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 4]]);
+    }));
+    return _handleClick.apply(this, arguments);
+  }
+  if (loading) return null;
+  var displayRating = hoverRating || rating;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "flex items-center gap-0.5",
+    onMouseLeave: function onMouseLeave() {
+      return setHoverRating(0);
+    },
+    children: [1, 2, 3, 4, 5].map(function (star) {
+      return /*#__PURE__*/jsxRuntime.jsx("button", {
+        type: "button",
+        disabled: !interactive,
+        onClick: function onClick() {
+          return handleClick(star);
+        },
+        onMouseEnter: function onMouseEnter() {
+          return interactive && setHoverRating(star);
+        },
+        className: "p-0.5 transition-colors ".concat(interactive ? "cursor-pointer hover:scale-110" : "cursor-default"),
+        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: star <= displayRating ? "star" : ["far", "star"],
+          className: "h-3.5 w-3.5 ".concat(star <= displayRating ? "text-yellow-400" : currentTheme["text-primary-medium"] || "text-gray-500")
+        })
+      }, star);
+    })
+  });
+};
+
+var PublishDashboardModal = function PublishDashboardModal(_ref) {
+  var isOpen = _ref.isOpen,
+    setIsOpen = _ref.setIsOpen,
+    appId = _ref.appId,
+    workspaceId = _ref.workspaceId,
+    workspaceName = _ref.workspaceName;
+  var _useContext = React.useContext(DashReact.ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    description = _useState2[0],
+    setDescription = _useState2[1];
+  var _useState3 = React.useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tags = _useState4[0],
+    setTags = _useState4[1];
+  var _useState5 = React.useState(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    icon = _useState6[0],
+    setIcon = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isPublishing = _useState8[0],
+    setIsPublishing = _useState8[1];
+  var _useState9 = React.useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    result = _useState0[0],
+    setResult = _useState0[1];
+  function handleClose() {
+    setIsOpen(false);
+    // Reset state after a brief delay to avoid flash
+    setTimeout(function () {
+      setDescription("");
+      setTags("");
+      setIcon("");
+      setIsPublishing(false);
+      setResult(null);
+    }, 200);
+  }
+  function handlePublish() {
+    return _handlePublish.apply(this, arguments);
+  }
+  function _handlePublish() {
+    _handlePublish = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var options, res, _t;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!appId || !workspaceId)) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            setIsPublishing(true);
+            setResult(null);
+            _context.prev = 2;
+            options = {
+              description: description.trim() || undefined,
+              tags: tags.split(",").map(function (t) {
+                return t.trim();
+              }).filter(Boolean),
+              icon: icon.trim() || undefined
+            };
+            _context.next = 3;
+            return window.mainApi.dashboardConfig.prepareDashboardForPublish(appId, workspaceId, options);
+          case 3:
+            res = _context.sent;
+            setResult(res);
+            _context.next = 5;
+            break;
+          case 4:
+            _context.prev = 4;
+            _t = _context["catch"](2);
+            setResult({
+              success: false,
+              error: _t.message || "Failed to prepare dashboard for publish."
+            });
+          case 5:
+            _context.prev = 5;
+            setIsPublishing(false);
+            return _context.finish(5);
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 4, 5, 6]]);
+    }));
+    return _handlePublish.apply(this, arguments);
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(DashReact.ConfirmationModal, {
+    isOpen: isOpen,
+    setIsOpen: handleClose,
+    title: "Publish \"".concat(workspaceName || "Dashboard", "\""),
+    confirmLabel: isPublishing ? "Preparing..." : "Prepare for Publish",
+    onConfirm: result ? handleClose : handlePublish,
+    onCancel: handleClose,
+    disabled: isPublishing,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "space-y-4 ".concat(panelStyles.textColor || "text-gray-200"),
+      children: !result ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+          className: "text-sm opacity-70",
+          children: "This will create a publish-ready ZIP file that can be submitted to the dashboard registry."
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "space-y-3",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+            label: "Description",
+            value: description,
+            onChange: setDescription,
+            placeholder: "A brief description of this dashboard..."
+          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+            label: "Tags (comma-separated)",
+            value: tags,
+            onChange: setTags,
+            placeholder: "productivity, slack, monitoring"
+          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+            label: "Icon (FontAwesome name)",
+            value: icon,
+            onChange: setIcon,
+            placeholder: "chart-line"
+          })]
+        })]
+      }) : result.success ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "space-y-3",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center gap-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "circle-check",
+            className: "h-4 w-4 text-green-400"
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-sm",
+            children: "Dashboard prepared for publishing."
+          })]
+        }), result.filePath && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "text-xs opacity-50 break-all",
+          children: ["Saved to: ", result.filePath]
+        })]
+      }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "circle-xmark",
+          className: "h-4 w-4 text-red-400"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-sm text-red-400",
+          children: result.error || "Publish preparation failed."
+        })]
+      })
+    })
+  });
+};
+
 function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LayoutPreview = function LayoutPreview(_ref) {
@@ -26443,6 +26694,7 @@ var LayoutPreview = function LayoutPreview(_ref) {
   });
 };
 var DashboardDetail = function DashboardDetail(_ref2) {
+  var _ws$_dashboardConfig, _ws$_dashboardConfig2;
   var workspace = _ref2.workspace,
     _ref2$menuItems = _ref2.menuItems,
     menuItems = _ref2$menuItems === void 0 ? [] : _ref2$menuItems,
@@ -26466,6 +26718,71 @@ var DashboardDetail = function DashboardDetail(_ref2) {
   var appId = credentials === null || credentials === void 0 ? void 0 : credentials.appId;
   var _useContext = React.useContext(DashReact.ThemeContext),
     themes = _useContext.themes;
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    exportStatus = _useState2[0],
+    setExportStatus = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    publishOpen = _useState4[0],
+    setPublishOpen = _useState4[1];
+  var registryPackage = (_ws$_dashboardConfig = ws._dashboardConfig) === null || _ws$_dashboardConfig === void 0 ? void 0 : _ws$_dashboardConfig.registryPackage;
+  var isShareable = ((_ws$_dashboardConfig2 = ws._dashboardConfig) === null || _ws$_dashboardConfig2 === void 0 ? void 0 : _ws$_dashboardConfig2.shareable) !== false;
+  function handleExport() {
+    return _handleExport.apply(this, arguments);
+  }
+  function _handleExport() {
+    _handleExport = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var result, _t;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (appId) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            setExportStatus({
+              status: "loading"
+            });
+            _context.prev = 2;
+            _context.next = 3;
+            return window.mainApi.dashboardConfig.exportDashboardConfig(appId, ws.id, {});
+          case 3:
+            result = _context.sent;
+            if (result !== null && result !== void 0 && result.success) {
+              setExportStatus({
+                status: "success",
+                message: "Exported successfully."
+              });
+            } else {
+              setExportStatus({
+                status: "error",
+                message: (result === null || result === void 0 ? void 0 : result.error) || "Export failed."
+              });
+            }
+            _context.next = 5;
+            break;
+          case 4:
+            _context.prev = 4;
+            _t = _context["catch"](2);
+            setExportStatus({
+              status: "error",
+              message: _t.message || "Export failed."
+            });
+          case 5:
+            setTimeout(function () {
+              return setExportStatus(null);
+            }, 3000);
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 4]]);
+    }));
+    return _handleExport.apply(this, arguments);
+  }
   var folderOptions = menuItems.map(function (m) {
     return {
       label: m.name,
@@ -26561,42 +26878,556 @@ var DashboardDetail = function DashboardDetail(_ref2) {
           onChange: function onChange(val) {
             return handleChangeTheme(val);
           },
-          options: themeOptions,
-          placeholder: "App Default"
-        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "flex flex-row items-center gap-2",
+          options: themeOptions,
+          placeholder: "App Default"
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-row items-center gap-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "th-large",
+            className: "h-3 w-3 opacity-50"
+          }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+            className: "text-sm opacity-70",
+            children: [widgetCount, " widget", widgetCount !== 1 ? "s" : ""]
+          })]
+        })]
+      }), registryPackage && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex-shrink-0 flex items-center gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "store",
+          className: "h-3 w-3 opacity-50"
+        }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+          className: "text-xs opacity-60",
+          children: ["Imported from registry:", " ", /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "font-medium",
+            children: registryPackage
+          })]
+        })]
+      }), registryPackage && appId && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-shrink-0",
+        children: /*#__PURE__*/jsxRuntime.jsx(StarRating, {
+          appId: appId,
+          packageName: registryPackage,
+          interactive: true
+        })
+      }), exportStatus && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex-shrink-0 flex items-center gap-2",
+        children: [exportStatus.status === "loading" && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-blue-500"
+        }), exportStatus.status === "success" && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "circle-check",
+          className: "h-3.5 w-3.5 text-green-400"
+        }), exportStatus.status === "error" && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "circle-xmark",
+          className: "h-3.5 w-3.5 text-red-400"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs ".concat(exportStatus.status === "error" ? "text-red-400" : "opacity-60"),
+          children: exportStatus.message
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(LayoutPreview, {
+        layout: ws.layout
+      })]
+    }), !isEditing && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex-shrink-0 flex flex-row justify-end gap-2 px-6 py-4 border-t border-white/10",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        title: "Export ZIP",
+        onClick: handleExport,
+        size: "sm"
+      }), isShareable && /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        title: "Publish",
+        onClick: function onClick() {
+          return setPublishOpen(true);
+        },
+        size: "sm"
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        title: "Rename",
+        onClick: function onClick() {
+          return onStartRename(ws);
+        },
+        size: "sm"
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        title: "Duplicate",
+        onClick: function onClick() {
+          return onDuplicate(ws);
+        },
+        size: "sm"
+      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        title: "Delete",
+        onClick: function onClick() {
+          return onDelete(ws);
+        },
+        size: "sm"
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(PublishDashboardModal, {
+      isOpen: publishOpen,
+      setIsOpen: setPublishOpen,
+      appId: appId,
+      workspaceId: ws.id,
+      workspaceName: ws.name
+    })]
+  });
+};
+
+var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
+  var dashboardPackage = _ref.dashboardPackage,
+    appId = _ref.appId;
+  var _useContext = React.useContext(DashReact.ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    preview = _useState2[0],
+    setPreview = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    previewLoading = _useState4[0],
+    setPreviewLoading = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isInstalling = _useState6[0],
+    setIsInstalling = _useState6[1];
+  var _useState7 = React.useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    installResult = _useState8[0],
+    setInstallResult = _useState8[1];
+  var pkg = dashboardPackage;
+  if (!pkg) return null;
+
+  // Load preview data on mount
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  React.useEffect(function () {
+    var _window$mainApi;
+    if (!pkg.name) return;
+    var cancelled = false;
+    setPreviewLoading(true);
+    setPreview(null);
+    setInstallResult(null);
+    (_window$mainApi = window.mainApi) === null || _window$mainApi === void 0 || (_window$mainApi = _window$mainApi.dashboardConfig) === null || _window$mainApi === void 0 || _window$mainApi.getDashboardPreview(pkg.name).then(function (result) {
+      if (!cancelled) setPreview(result);
+    })["catch"](function (err) {
+    })["finally"](function () {
+      if (!cancelled) setPreviewLoading(false);
+    });
+    return function () {
+      cancelled = true;
+    };
+  }, [pkg.name]);
+  function handleInstall() {
+    return _handleInstall.apply(this, arguments);
+  }
+  function _handleInstall() {
+    _handleInstall = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _result$workspace, result, _t;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!appId || !pkg.name)) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            setIsInstalling(true);
+            setInstallResult(null);
+            _context.prev = 2;
+            _context.next = 3;
+            return window.mainApi.dashboardConfig.installDashboardFromRegistry(appId, pkg.name);
+          case 3:
+            result = _context.sent;
+            setInstallResult({
+              status: result !== null && result !== void 0 && result.success ? "success" : "error",
+              message: result !== null && result !== void 0 && result.success ? "Dashboard \"".concat(((_result$workspace = result.workspace) === null || _result$workspace === void 0 ? void 0 : _result$workspace.name) || pkg.name, "\" installed successfully.") : (result === null || result === void 0 ? void 0 : result.error) || "Installation failed."
+            });
+            _context.next = 5;
+            break;
+          case 4:
+            _context.prev = 4;
+            _t = _context["catch"](2);
+            setInstallResult({
+              status: "error",
+              message: _t.message || "Failed to install dashboard."
+            });
+          case 5:
+            _context.prev = 5;
+            setIsInstalling(false);
+            return _context.finish(5);
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 4, 5, 6]]);
+    }));
+    return _handleInstall.apply(this, arguments);
+  }
+  var compatibility = preview === null || preview === void 0 ? void 0 : preview.compatibility;
+  var widgetDeps = (preview === null || preview === void 0 ? void 0 : preview.widgets) || pkg.widgets || [];
+  var providers = (preview === null || preview === void 0 ? void 0 : preview.providers) || [];
+  var wiring = (preview === null || preview === void 0 ? void 0 : preview.wiring) || [];
+  function getCompatIcon(status) {
+    if (status === "installed") return {
+      icon: "circle-check",
+      color: "text-green-400"
+    };
+    if (status === "available") return {
+      icon: "circle-down",
+      color: "text-blue-400"
+    };
+    return {
+      icon: "circle-xmark",
+      color: "text-red-400"
+    };
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col flex-1 min-h-0",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex-1 min-h-0 overflow-y-auto p-6 space-y-6 ".concat(panelStyles.textColor || "text-gray-200"),
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-row items-center gap-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "h-5 w-5 flex-shrink-0 flex items-center justify-center",
+          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: pkg.icon || "clone",
+            className: "h-5 w-5"
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading3, {
+            title: pkg.displayName || pkg.name,
+            padding: false
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center gap-2 mt-0.5",
+            children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+              className: "text-sm opacity-60",
+              children: ["by ", pkg.author || "Unknown"]
+            }), pkg.version && /*#__PURE__*/jsxRuntime.jsxs("span", {
+              className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-70"),
+              children: ["v", pkg.version]
+            })]
+          })]
+        })]
+      }), appId && /*#__PURE__*/jsxRuntime.jsx(StarRating, {
+        appId: appId,
+        packageName: pkg.name,
+        interactive: false
+      }), /*#__PURE__*/jsxRuntime.jsx("hr", {
+        className: currentTheme["border-primary-medium"]
+      }), pkg.description && /*#__PURE__*/jsxRuntime.jsx("p", {
+        className: "text-sm",
+        children: pkg.description
+      }), pkg.tags && pkg.tags.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex flex-wrap gap-1",
+        children: pkg.tags.map(function (tag) {
+          return /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-60"),
+            children: tag
+          }, tag);
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs font-semibold opacity-50 mb-1 block",
+          children: "REQUIRED WIDGETS"
+        }), previewLoading ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center gap-2 py-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500"
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-xs opacity-50",
+            children: "Checking compatibility..."
+          })]
+        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "space-y-1.5",
+          children: widgetDeps.map(function (w, idx) {
+            var _compatibility$widget;
+            var status = (compatibility === null || compatibility === void 0 || (_compatibility$widget = compatibility.widgets) === null || _compatibility$widget === void 0 ? void 0 : _compatibility$widget[w.name || w.packageName]) || "unknown";
+            var compat = getCompatIcon(status);
+            return /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "p-2 rounded ".concat(currentTheme["bg-primary-medium"], " flex items-center gap-2"),
+              children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                icon: compat.icon,
+                className: "h-3.5 w-3.5 ".concat(compat.color)
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-sm",
+                children: w.displayName || w.name || w.packageName
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-xs opacity-40 ml-auto",
+                children: status === "installed" ? "Installed" : status === "available" ? "Will install" : "Unavailable"
+              })]
+            }, idx);
+          })
+        })]
+      }), providers.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs font-semibold opacity-50 mb-1 block",
+          children: "REQUIRED PROVIDERS"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "space-y-1",
+          children: providers.map(function (p, idx) {
+            return /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex items-center gap-2",
+              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-xs px-1.5 py-0.5 rounded bg-blue-900/30 text-blue-400",
+                children: p.type
+              }), p.required && /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-[10px] opacity-40",
+                children: "Required"
+              })]
+            }, idx);
+          })
+        })]
+      }), wiring.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-xs font-semibold opacity-50 mb-1 block",
+          children: "EVENT WIRING"
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "space-y-1",
+          children: wiring.map(function (w, idx) {
+            return /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "text-xs p-2 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-70"),
+              children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "font-medium",
+                children: w.from || "Source"
+              }), /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                icon: "arrow-right",
+                className: "h-2.5 w-2.5 mx-1.5 opacity-50"
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "font-medium",
+                children: w.to || "Target"
+              }), w.event && /*#__PURE__*/jsxRuntime.jsxs("span", {
+                className: "opacity-50 ml-1.5",
+                children: ["(", w.event, ")"]
+              })]
+            }, idx);
+          })
+        })]
+      }), installResult && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "p-2 rounded border ".concat(installResult.status === "success" ? "bg-green-900/20 border-green-700" : "bg-red-900/30 border-red-700"),
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center gap-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: installResult.status === "success" ? "circle-check" : "circle-xmark",
+            className: "h-4 w-4 ".concat(installResult.status === "success" ? "text-green-400" : "text-red-400")
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-sm ".concat(installResult.status === "error" ? "text-red-400" : ""),
+            children: installResult.message
+          })]
+        })
+      })]
+    }), (installResult === null || installResult === void 0 ? void 0 : installResult.status) !== "success" && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex items-center justify-end px-6 py-3 border-t ".concat(currentTheme["border-primary-medium"]),
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+        title: isInstalling ? "Installing..." : "Install Dashboard",
+        bgColor: "bg-blue-600",
+        hoverBackgroundColor: isInstalling ? "" : "hover:bg-blue-700",
+        textSize: "text-sm",
+        padding: "py-1.5 px-4",
+        onClick: handleInstall,
+        disabled: isInstalling
+      })
+    })]
+  });
+};
+
+var DiscoverDashboardsDetail = function DiscoverDashboardsDetail(_ref) {
+  var onBack = _ref.onBack,
+    appId = _ref.appId;
+  var _useContext = React.useContext(DashReact.ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  var _useState = React.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    packages = _useState2[0],
+    setPackages = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var _useState7 = React.useState(""),
+    _useState8 = _slicedToArray(_useState7, 2),
+    searchQuery = _useState8[0],
+    setSearchQuery = _useState8[1];
+  var _useState9 = React.useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    selectedPackageName = _useState0[0],
+    setSelectedPackageName = _useState0[1];
+  var search = React.useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(query) {
+      var _window$mainApi;
+      var result, _t;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if ((_window$mainApi = window.mainApi) !== null && _window$mainApi !== void 0 && (_window$mainApi = _window$mainApi.registry) !== null && _window$mainApi !== void 0 && _window$mainApi.searchDashboards) {
+              _context.next = 1;
+              break;
+            }
+            setPackages([]);
+            return _context.abrupt("return");
+          case 1:
+            setIsLoading(true);
+            setError(null);
+            _context.prev = 2;
+            _context.next = 3;
+            return window.mainApi.registry.searchDashboards(query || "", {});
+          case 3:
+            result = _context.sent;
+            setPackages((result === null || result === void 0 ? void 0 : result.packages) || []);
+            _context.next = 5;
+            break;
+          case 4:
+            _context.prev = 4;
+            _t = _context["catch"](2);
+            setError(_t.message || "Failed to search dashboard registry");
+            setPackages([]);
+          case 5:
+            _context.prev = 5;
+            setIsLoading(false);
+            return _context.finish(5);
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 4, 5, 6]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), []);
+
+  // Debounce search on query changes
+  React.useEffect(function () {
+    var timer = setTimeout(function () {
+      search(searchQuery);
+    }, 300);
+    return function () {
+      return clearTimeout(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+  var retry = function retry() {
+    return search(searchQuery);
+  };
+  var selectedPackage = selectedPackageName ? packages.find(function (p) {
+    return p.name === selectedPackageName;
+  }) : null;
+
+  // If a package is selected, show its detail inline
+  if (selectedPackage) {
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col flex-1 min-h-0",
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-shrink-0 px-4 pt-4",
+        children: /*#__PURE__*/jsxRuntime.jsxs("button", {
+          type: "button",
+          onClick: function onClick() {
+            return setSelectedPackageName(null);
+          },
+          className: "flex items-center gap-1.5 text-sm opacity-60 hover:opacity-100 transition-opacity",
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-            icon: "th-large",
-            className: "h-3 w-3 opacity-50"
-          }), /*#__PURE__*/jsxRuntime.jsxs("span", {
-            className: "text-sm opacity-70",
-            children: [widgetCount, " widget", widgetCount !== 1 ? "s" : ""]
+            icon: "arrow-left",
+            className: "h-3 w-3"
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            children: "Back"
           })]
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsx(LayoutPreview, {
-        layout: ws.layout
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(RegistryDashboardDetail, {
+        dashboardPackage: selectedPackage,
+        appId: appId
       })]
-    }), !isEditing && /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex-shrink-0 flex flex-row justify-end gap-2 px-6 py-4 border-t border-white/10",
-      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-        title: "Rename",
-        onClick: function onClick() {
-          return onStartRename(ws);
-        },
-        size: "sm"
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-        title: "Duplicate",
-        onClick: function onClick() {
-          return onDuplicate(ws);
-        },
-        size: "sm"
+    });
+  }
+
+  // Package list view
+  var listBody;
+  if (isLoading) {
+    listBody = /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex items-center justify-center py-12",
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "text-center",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500 mx-auto mb-3"
+        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
+          className: "text-sm opacity-50",
+          children: "Loading dashboards..."
+        })]
+      })
+    });
+  } else if (error) {
+    listBody = /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "px-4 py-8 text-center",
+      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
+        className: "text-sm text-red-400 mb-3",
+        children: error
       }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
-        title: "Delete",
-        onClick: function onClick() {
-          return onDelete(ws);
-        },
-        size: "sm"
+        title: "Retry",
+        bgColor: "bg-gray-700",
+        hoverBackgroundColor: "hover:bg-gray-600",
+        textSize: "text-sm",
+        padding: "py-1 px-3",
+        onClick: retry
       })]
+    });
+  } else if (packages.length === 0) {
+    listBody = /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "px-4 py-8 text-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
+        className: "text-sm opacity-50",
+        children: searchQuery ? "No dashboards match your search." : "No dashboard packages available."
+      })
+    });
+  } else {
+    listBody = /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "space-y-1",
+      children: packages.map(function (pkg) {
+        var widgetCount = (pkg.widgets || []).length;
+        return /*#__PURE__*/jsxRuntime.jsx(DashReact.Sidebar.Item, {
+          icon: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: pkg.icon || "clone",
+            className: "h-3.5 w-3.5"
+          }),
+          onClick: function onClick() {
+            return setSelectedPackageName(pkg.name);
+          },
+          badge: widgetCount > 0 ? "".concat(widgetCount) : undefined,
+          children: pkg.displayName || pkg.name
+        }, pkg.name);
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-col flex-1 min-h-0 ".concat(panelStyles.textColor || "text-gray-200"),
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0 px-4 pt-4",
+      children: /*#__PURE__*/jsxRuntime.jsxs("button", {
+        type: "button",
+        onClick: onBack,
+        className: "flex items-center gap-1.5 text-sm opacity-60 hover:opacity-100 transition-opacity",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "arrow-left",
+          className: "h-3 w-3"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: "Back"
+        })]
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-shrink-0 px-4 py-3",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.SearchInput, {
+        value: searchQuery,
+        onChange: setSearchQuery,
+        placeholder: "Search dashboards...",
+        inputClassName: "py-1.5 text-xs"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-1 min-h-0 overflow-y-auto px-2",
+      children: listBody
+    }), !isLoading && !error && packages.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex-shrink-0 px-4 py-2 text-[10px] opacity-40 border-t border-white/10",
+      children: [packages.length, " dashboard", packages.length !== 1 ? "s" : ""]
     })]
   });
 };
@@ -26613,7 +27444,11 @@ var DashboardsSection = function DashboardsSection(_ref) {
     _ref$credentials = _ref.credentials,
     credentials = _ref$credentials === void 0 ? null : _ref$credentials,
     _ref$onReloadWorkspac = _ref.onReloadWorkspaces,
-    onReloadWorkspaces = _ref$onReloadWorkspac === void 0 ? null : _ref$onReloadWorkspac;
+    onReloadWorkspaces = _ref$onReloadWorkspac === void 0 ? null : _ref$onReloadWorkspac,
+    _ref$createRequested = _ref.createRequested,
+    createRequested = _ref$createRequested === void 0 ? false : _ref$createRequested,
+    _ref$onCreateAcknowle = _ref.onCreateAcknowledged,
+    onCreateAcknowledged = _ref$onCreateAcknowle === void 0 ? null : _ref$onCreateAcknowle;
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     selectedId = _useState2[0],
@@ -26638,6 +27473,15 @@ var DashboardsSection = function DashboardsSection(_ref) {
     _useState10 = _slicedToArray(_useState1, 2),
     viewMode = _useState10[0],
     setViewMode = _useState10[1];
+  // null | "marketplace" | "import-result"
+  var _useState11 = React.useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    installMode = _useState12[0],
+    setInstallMode = _useState12[1];
+  var _useState13 = React.useState(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    importResult = _useState14[0],
+    setImportResult = _useState14[1];
   var appId = credentials === null || credentials === void 0 ? void 0 : credentials.appId;
   var _useContext = React.useContext(DashReact.ThemeContext),
     currentTheme = _useContext.currentTheme;
@@ -26717,6 +27561,84 @@ var DashboardsSection = function DashboardsSection(_ref) {
       setDeleteTarget(null);
     });
   }
+
+  // Respond to external create trigger from header button (marketplace)
+  var prevCreateRequested = React.useRef(false);
+  React.useEffect(function () {
+    if (createRequested && !prevCreateRequested.current) {
+      setSelectedId(null);
+      setInstallMode("marketplace");
+      setImportResult(null);
+    }
+    prevCreateRequested.current = createRequested;
+    if (createRequested && onCreateAcknowledged) {
+      onCreateAcknowledged();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [createRequested]);
+  function handleImport() {
+    return _handleImport.apply(this, arguments);
+  }
+  function _handleImport() {
+    _handleImport = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var result, _result$workspace, _t;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (appId) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            setInstallMode("import-result");
+            setImportResult({
+              status: "loading",
+              message: "Importing dashboard..."
+            });
+            _context.prev = 2;
+            _context.next = 3;
+            return window.mainApi.dashboardConfig.importDashboardConfig(appId);
+          case 3:
+            result = _context.sent;
+            if (result) {
+              _context.next = 4;
+              break;
+            }
+            // User cancelled the file picker
+            setInstallMode(null);
+            setImportResult(null);
+            return _context.abrupt("return");
+          case 4:
+            if (result.success) {
+              setImportResult({
+                status: "success",
+                message: "Dashboard \"".concat(((_result$workspace = result.workspace) === null || _result$workspace === void 0 ? void 0 : _result$workspace.name) || "Untitled", "\" imported successfully.")
+              });
+              onReloadWorkspaces && onReloadWorkspaces();
+            } else {
+              setImportResult({
+                status: "error",
+                message: result.error || "Import failed."
+              });
+            }
+            _context.next = 6;
+            break;
+          case 5:
+            _context.prev = 5;
+            _t = _context["catch"](2);
+            setImportResult({
+              status: "error",
+              message: _t.message || "Failed to import dashboard."
+            });
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 5]]);
+    }));
+    return _handleImport.apply(this, arguments);
+  }
   var selectedWorkspace = workspaces.find(function (ws) {
     return ws.id === selectedId;
   });
@@ -26766,13 +27688,33 @@ var DashboardsSection = function DashboardsSection(_ref) {
     className: "flex flex-col h-full",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex-shrink-0 flex flex-col gap-2 px-3 pt-3 pb-2 ".concat(headerStyles.backgroundColor || ""),
-      children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SearchInput, {
-        value: searchQuery,
-        onChange: setSearchQuery,
-        placeholder: "Search dashboards..."
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex-1",
+          children: /*#__PURE__*/jsxRuntime.jsx(DashReact.SearchInput, {
+            value: searchQuery,
+            onChange: setSearchQuery,
+            placeholder: "Search dashboards..."
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.ButtonIcon, {
+          icon: "file-import",
+          onClick: handleImport,
+          size: "sm",
+          title: "Import dashboard"
+        })]
       }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Tabs3, {
-        value: viewMode,
-        onValueChange: setViewMode,
+        value: installMode === "marketplace" ? "marketplace" : viewMode,
+        onValueChange: function onValueChange(val) {
+          if (val === "marketplace") {
+            setInstallMode("marketplace");
+            setSelectedId(null);
+          } else {
+            setInstallMode(null);
+            setImportResult(null);
+            setViewMode(val);
+          }
+        },
         backgroundColor: "bg-transparent",
         spacing: "p-0",
         children: /*#__PURE__*/jsxRuntime.jsxs(DashReact.Tabs3.List, {
@@ -26786,6 +27728,10 @@ var DashboardsSection = function DashboardsSection(_ref) {
             value: "alphabetical",
             className: "flex-1",
             children: "A-Z"
+          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Tabs3.Trigger, {
+            value: "marketplace",
+            className: "flex-1",
+            children: "Marketplace"
           })]
         })
       })]
@@ -26799,26 +27745,68 @@ var DashboardsSection = function DashboardsSection(_ref) {
       })
     })]
   });
-  var detailContent = selectedWorkspace ? /*#__PURE__*/jsxRuntime.jsx(DashboardDetail, {
-    workspace: selectedWorkspace,
-    menuItems: menuItems,
-    editingId: editingId,
-    editName: editName,
-    setEditName: setEditName,
-    onStartRename: handleStartRename,
-    onSaveRename: handleSaveRename,
-    onCancelRename: function onCancelRename() {
-      setEditingId(null);
-      setEditName("");
-    },
-    onDuplicate: handleDuplicate,
-    onDelete: function onDelete(ws) {
-      return setDeleteTarget(ws);
-    },
-    dashApi: dashApi,
-    credentials: credentials,
-    onReloadWorkspaces: onReloadWorkspaces
-  }) : null;
+  var detailContent = null;
+  if (installMode === "marketplace") {
+    detailContent = /*#__PURE__*/jsxRuntime.jsx(DiscoverDashboardsDetail, {
+      onBack: function onBack() {
+        setInstallMode(null);
+        setViewMode("grouped");
+      },
+      appId: appId
+    });
+  } else if (installMode === "import-result") {
+    detailContent = /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-col flex-1 min-h-0 p-6 space-y-4",
+      children: [(importResult === null || importResult === void 0 ? void 0 : importResult.status) === "loading" && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-3",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "animate-spin rounded-full h-5 w-5 border-b-2 border-blue-500"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-sm opacity-70",
+          children: importResult.message
+        })]
+      }), (importResult === null || importResult === void 0 ? void 0 : importResult.status) === "success" && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "circle-check",
+          className: "h-4 w-4 text-green-400"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-sm",
+          children: importResult.message
+        })]
+      }), (importResult === null || importResult === void 0 ? void 0 : importResult.status) === "error" && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+          icon: "circle-xmark",
+          className: "h-4 w-4 text-red-400"
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-sm text-red-400",
+          children: importResult.message
+        })]
+      })]
+    });
+  } else if (selectedWorkspace) {
+    detailContent = /*#__PURE__*/jsxRuntime.jsx(DashboardDetail, {
+      workspace: selectedWorkspace,
+      menuItems: menuItems,
+      editingId: editingId,
+      editName: editName,
+      setEditName: setEditName,
+      onStartRename: handleStartRename,
+      onSaveRename: handleSaveRename,
+      onCancelRename: function onCancelRename() {
+        setEditingId(null);
+        setEditName("");
+      },
+      onDuplicate: handleDuplicate,
+      onDelete: function onDelete(ws) {
+        return setDeleteTarget(ws);
+      },
+      dashApi: dashApi,
+      credentials: credentials,
+      onReloadWorkspaces: onReloadWorkspaces
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(SectionLayout, {
       listContent: listContent,
@@ -32149,9 +33137,9 @@ var AppSettingsModal = function AppSettingsModal(_ref) {
       children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.SubHeading2, {
         title: activeDef.label,
         padding: false
-      }), (activeSection === "folders" || activeSection === "providers" || activeSection === "themes" || activeSection === "widgets") && /*#__PURE__*/jsxRuntime.jsx(DashReact.ButtonIcon3, {
+      }), (activeSection === "dashboards" || activeSection === "folders" || activeSection === "providers" || activeSection === "themes" || activeSection === "widgets") && /*#__PURE__*/jsxRuntime.jsx(DashReact.ButtonIcon3, {
         icon: "plus",
-        text: activeSection === "folders" ? "New Folder" : activeSection === "providers" ? "New Provider" : activeSection === "widgets" ? "Install Widgets" : "New Theme",
+        text: activeSection === "dashboards" ? "Marketplace" : activeSection === "folders" ? "New Folder" : activeSection === "providers" ? "New Provider" : activeSection === "widgets" ? "Install Widgets" : "New Theme",
         onClick: function onClick() {
           return setCreateRequested(true);
         },
@@ -32168,7 +33156,11 @@ var AppSettingsModal = function AppSettingsModal(_ref) {
         menuItems: menuItems,
         dashApi: dashApi,
         credentials: credentials,
-        onReloadWorkspaces: onReloadWorkspaces
+        onReloadWorkspaces: onReloadWorkspaces,
+        createRequested: createRequested,
+        onCreateAcknowledged: function onCreateAcknowledged() {
+          return setCreateRequested(false);
+        }
       }), activeSection === "folders" && /*#__PURE__*/jsxRuntime.jsx(FoldersSection, {
         menuItems: menuItems,
         workspaces: workspaces,