@trops/dash-core 0.1.120 → 0.1.121

package/dist/index.js

@@ -49,8 +49,8 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var jsxRuntime__namespace = /*#__PURE__*/_interopNamespaceDefault(jsxRuntime);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
 
-function ownKeys$B(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$B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$B(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$C(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$C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$C(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var event = {
   list: new Map(),
   //  Map(1) { '<widget-UUID>' => { 'CustomSearchbar[10].searchQueryChanged': [] } }
@@ -112,7 +112,7 @@ var event = {
           uuid: subscriber["uuid"]
         };
         if ("action" in subscriber && subscriber.action !== undefined) {
-          subscriber["action"](_objectSpread$B({}, objectToSend));
+          subscriber["action"](_objectSpread$C({}, objectToSend));
         }
       });
     }
@@ -2552,8 +2552,8 @@ var DashboardWrapper = function DashboardWrapper(_ref) {
   });
 };
 
-function ownKeys$A(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$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$B(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$B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$B(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DashboardThemeProvider = function DashboardThemeProvider(_ref) {
   var themeKey = _ref.themeKey,
     children = _ref.children;
@@ -2565,7 +2565,7 @@ var DashboardThemeProvider = function DashboardThemeProvider(_ref) {
     var dashboardTheme = themes[themeKey];
     var themeValue = dashboardTheme ? dashboardTheme[themeVariant] || null : null;
     if (!themeValue) return null;
-    return _objectSpread$A(_objectSpread$A({}, parentContext), {}, {
+    return _objectSpread$B(_objectSpread$B({}, parentContext), {}, {
       currentTheme: themeValue,
       currentThemeKey: themeKey,
       theme: themeValue,
@@ -2583,8 +2583,8 @@ var DashboardThemeProvider = function DashboardThemeProvider(_ref) {
   });
 };
 
-function ownKeys$z(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$z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$z(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$A(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$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var AppThemeScope = function AppThemeScope(_ref) {
   var children = _ref.children;
   var ctx = React.useContext(DashReact.ThemeContext);
@@ -2592,7 +2592,7 @@ var AppThemeScope = function AppThemeScope(_ref) {
     children: children
   });
   return /*#__PURE__*/jsxRuntime.jsx(DashReact.ThemeContext.Provider, {
-    value: _objectSpread$z(_objectSpread$z({}, ctx), {}, {
+    value: _objectSpread$A(_objectSpread$A({}, ctx), {}, {
       currentTheme: ctx.appTheme,
       currentThemeKey: ctx.appThemeKey,
       theme: ctx.appTheme,
@@ -2704,8 +2704,8 @@ var LayoutContainer = function LayoutContainer(_ref) {
   });
 };
 
-function ownKeys$y(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$y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$y(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$z(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$z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$z(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper$a(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$a(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$a(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$a(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$a(r, a) : void 0; } }
 function _arrayLikeToArray$a(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -2949,7 +2949,7 @@ function createLayoutFromTemplate(template) {
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var cell = _step.value;
-      grid[cell.key] = _objectSpread$y({
+      grid[cell.key] = _objectSpread$z({
         component: null,
         hide: cell.hide || false
       }, cell.span ? {
@@ -3464,7 +3464,8 @@ var StarRating = function StarRating(_ref) {
 
 var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
   var dashboardPackage = _ref.dashboardPackage,
-    appId = _ref.appId;
+    appId = _ref.appId,
+    onInstallComplete = _ref.onInstallComplete;
   var _useContext = React.useContext(DashReact.ThemeContext),
     currentTheme = _useContext.currentTheme;
   var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
@@ -3534,6 +3535,9 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
               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."
             });
+            if (result !== null && result !== void 0 && result.success && onInstallComplete) {
+              onInstallComplete(result);
+            }
             _context.next = 5;
             break;
           case 4:
@@ -3724,7 +3728,8 @@ var RegistryDashboardDetail = function RegistryDashboardDetail(_ref) {
 
 var DiscoverDashboardsDetail = function DiscoverDashboardsDetail(_ref) {
   var onBack = _ref.onBack,
-    appId = _ref.appId;
+    appId = _ref.appId,
+    onInstallComplete = _ref.onInstallComplete;
   var _useContext = React.useContext(DashReact.ThemeContext),
     currentTheme = _useContext.currentTheme;
   var panelStyles = DashReact.getStylesForItem(DashReact.themeObjects.PANEL, currentTheme, {
@@ -3832,7 +3837,8 @@ var DiscoverDashboardsDetail = function DiscoverDashboardsDetail(_ref) {
         })
       }), /*#__PURE__*/jsxRuntime.jsx(RegistryDashboardDetail, {
         dashboardPackage: selectedPackage,
-        appId: appId
+        appId: appId,
+        onInstallComplete: onInstallComplete
       })]
     });
   }
@@ -3927,6 +3933,8 @@ var DiscoverDashboardsDetail = function DiscoverDashboardsDetail(_ref) {
   });
 };
 
+function ownKeys$y(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$y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$y(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LayoutManagerModal = function LayoutManagerModal(_ref) {
   var open = _ref.open,
     setIsOpen = _ref.setIsOpen,
@@ -3936,7 +3944,9 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
     _ref$onSaveMenuItem = _ref.onSaveMenuItem,
     onSaveMenuItem = _ref$onSaveMenuItem === void 0 ? null : _ref$onSaveMenuItem,
     appId = _ref.appId,
-    onReloadWorkspaces = _ref.onReloadWorkspaces;
+    onReloadWorkspaces = _ref.onReloadWorkspaces,
+    _ref$onOpenWorkspace = _ref.onOpenWorkspace,
+    onOpenWorkspace = _ref$onOpenWorkspace === void 0 ? null : _ref$onOpenWorkspace;
   var _useContext = React.useContext(DashReact.ThemeContext),
     themes = _useContext.themes,
     appThemeKey = _useContext.themeKey;
@@ -3969,19 +3979,31 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
     localMenuItems = _useState12[0],
     setLocalMenuItems = _useState12[1];
 
-  // Inline new-folder form state
-  var _useState13 = React.useState(false),
+  // Post-install workspace for registry stepper customization
+  var _useState13 = React.useState(null),
     _useState14 = _slicedToArray(_useState13, 2),
-    isCreatingFolder = _useState14[0],
-    setIsCreatingFolder = _useState14[1];
-  var _useState15 = React.useState(""),
+    importedWorkspace = _useState14[0],
+    setImportedWorkspace = _useState14[1];
+
+  // Pre-import file selection (file preview, not yet saved)
+  var _useState15 = React.useState(null),
     _useState16 = _slicedToArray(_useState15, 2),
-    newFolderName = _useState16[0],
-    setNewFolderName = _useState16[1];
-  var _useState17 = React.useState(null),
+    selectedFile = _useState16[0],
+    setSelectedFile = _useState16[1];
+
+  // Inline new-folder form state
+  var _useState17 = React.useState(false),
     _useState18 = _slicedToArray(_useState17, 2),
-    newFolderIcon = _useState18[0],
-    setNewFolderIcon = _useState18[1];
+    isCreatingFolder = _useState18[0],
+    setIsCreatingFolder = _useState18[1];
+  var _useState19 = React.useState(""),
+    _useState20 = _slicedToArray(_useState19, 2),
+    newFolderName = _useState20[0],
+    setNewFolderName = _useState20[1];
+  var _useState21 = React.useState(null),
+    _useState22 = _slicedToArray(_useState21, 2),
+    newFolderIcon = _useState22[0],
+    setNewFolderIcon = _useState22[1];
 
   // Reset state when modal opens
   React.useEffect(function () {
@@ -3993,6 +4015,8 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
       setSelectedMenuId(menuItems && menuItems.length > 0 ? menuItems[0].id : 1);
       setSelectedTemplate(layoutTemplates[0]);
       setSelectedThemeKey(null);
+      setImportedWorkspace(null);
+      setSelectedFile(null);
       setIsCreatingFolder(false);
       setNewFolderName("");
       setNewFolderIcon(null);
@@ -4035,29 +4059,29 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
     setActiveStep(2);
   }
   function handleMethodSelect(method) {
-    if (method === "import") {
-      handleImportFromFile();
-    } else {
-      setCreationMethod(method);
-    }
+    setCreationMethod(method);
   }
   function handleImportFromFile() {
     return _handleImportFromFile.apply(this, arguments);
   }
   function _handleImportFromFile() {
     _handleImportFromFile = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var result;
+      var result, _result$dashboardConf, _result$dashboardConf2, _result$dashboardConf3, _result$dashboardConf4;
       return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _context.prev = 0;
             _context.next = 1;
-            return window.mainApi.dashboardConfig.importDashboardConfig(appId);
+            return window.mainApi.dashboardConfig.selectDashboardFile();
           case 1:
             result = _context.sent;
             if (result && !result.canceled && result.success) {
-              onReloadWorkspaces && onReloadWorkspaces();
-              handleClose();
+              setSelectedFile(result);
+              setDashboardName(((_result$dashboardConf = result.dashboardConfig) === null || _result$dashboardConf === void 0 || (_result$dashboardConf = _result$dashboardConf.workspace) === null || _result$dashboardConf === void 0 ? void 0 : _result$dashboardConf.name) || ((_result$dashboardConf2 = result.dashboardConfig) === null || _result$dashboardConf2 === void 0 ? void 0 : _result$dashboardConf2.name) || "");
+              setSelectedMenuId(((_result$dashboardConf3 = result.dashboardConfig) === null || _result$dashboardConf3 === void 0 || (_result$dashboardConf3 = _result$dashboardConf3.workspace) === null || _result$dashboardConf3 === void 0 ? void 0 : _result$dashboardConf3.menuId) || (menuItems.length > 0 ? menuItems[0].id : 1));
+              setSelectedThemeKey(((_result$dashboardConf4 = result.dashboardConfig) === null || _result$dashboardConf4 === void 0 || (_result$dashboardConf4 = _result$dashboardConf4.workspace) === null || _result$dashboardConf4 === void 0 ? void 0 : _result$dashboardConf4.themeKey) || null);
+              setActiveStep(0);
+              setCreationMethod("import");
             }
             _context.next = 3;
             break;
@@ -4072,10 +4096,392 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
     }));
     return _handleImportFromFile.apply(this, arguments);
   }
+  function handleRegistryInstallComplete(result) {
+    var _result$workspace, _result$workspace2, _result$workspace3;
+    setImportedWorkspace(result.workspace);
+    setDashboardName(((_result$workspace = result.workspace) === null || _result$workspace === void 0 ? void 0 : _result$workspace.name) || "");
+    setSelectedMenuId(((_result$workspace2 = result.workspace) === null || _result$workspace2 === void 0 ? void 0 : _result$workspace2.menuId) || (menuItems.length > 0 ? menuItems[0].id : 1));
+    setSelectedThemeKey(((_result$workspace3 = result.workspace) === null || _result$workspace3 === void 0 ? void 0 : _result$workspace3.themeKey) || null);
+    setActiveStep(0);
+  }
+  function handleImportRegistryConfirm() {
+    return _handleImportRegistryConfirm.apply(this, arguments);
+  }
+  function _handleImportRegistryConfirm() {
+    _handleImportRegistryConfirm = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var menuId, newItem, result, updatedWorkspace;
+      return _regeneratorRuntime.wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            menuId = selectedMenuId;
+            if (isCreatingFolder && newFolderName.trim() && newFolderIcon) {
+              newItem = {
+                id: Date.now(),
+                name: newFolderName.trim(),
+                icon: newFolderIcon
+              };
+              menuId = newItem.id;
+              if (onSaveMenuItem) {
+                onSaveMenuItem(newItem);
+              }
+            }
+
+            // Import flow: file not yet saved, call importDashboardConfig with overrides
+            if (!(creationMethod === "import" && selectedFile)) {
+              _context2.next = 5;
+              break;
+            }
+            _context2.prev = 1;
+            _context2.next = 2;
+            return window.mainApi.dashboardConfig.importDashboardConfig(appId, {
+              filePath: selectedFile.filePath,
+              name: dashboardName.trim(),
+              menuId: menuId,
+              themeKey: selectedThemeKey
+            });
+          case 2:
+            result = _context2.sent;
+            if (result && result.success) {
+              onReloadWorkspaces && onReloadWorkspaces();
+              if (onOpenWorkspace && result.workspace) {
+                onOpenWorkspace(result.workspace);
+              }
+              handleClose();
+            }
+            _context2.next = 4;
+            break;
+          case 3:
+            _context2.prev = 3;
+            _context2["catch"](1);
+          case 4:
+            return _context2.abrupt("return");
+          case 5:
+            if (importedWorkspace) {
+              _context2.next = 6;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 6:
+            updatedWorkspace = _objectSpread$y(_objectSpread$y({}, importedWorkspace), {}, {
+              name: dashboardName.trim(),
+              menuId: menuId,
+              themeKey: selectedThemeKey
+            });
+            _context2.prev = 7;
+            _context2.next = 8;
+            return window.mainApi.workspace.saveWorkspaceForApplication(appId, updatedWorkspace);
+          case 8:
+            onReloadWorkspaces && onReloadWorkspaces();
+            if (onOpenWorkspace) {
+              onOpenWorkspace(updatedWorkspace);
+            }
+            handleClose();
+            _context2.next = 10;
+            break;
+          case 9:
+            _context2.prev = 9;
+            _context2["catch"](7);
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[1, 3], [7, 9]]);
+    }));
+    return _handleImportRegistryConfirm.apply(this, arguments);
+  }
   var selectedFolder = localMenuItems.find(function (item) {
     return item.id === selectedMenuId;
   });
 
+  // ─── Shared step renderers ──────────────────────────────────────
+  function renderNameStep() {
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-row w-full h-full",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col w-1/3 p-6 py-10 space-y-4 justify-start",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Heading, {
+          title: "Name",
+          padding: false,
+          textColor: "text-gray-300"
+        }), /*#__PURE__*/jsxRuntime.jsx("p", {
+          className: "text-base font-normal text-gray-400",
+          children: "Give your new dashboard a name."
+        }), dashboardName.trim() && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-row items-center space-x-2 mt-4 pt-4 border-t border-gray-700",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "clone",
+            className: "text-blue-400"
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-sm font-medium text-gray-300",
+            children: dashboardName.trim()
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex flex-col w-2/3 p-6 justify-start pt-10",
+        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+          value: dashboardName,
+          onChange: function onChange(val) {
+            return setDashboardName(val);
+          },
+          placeholder: "Dashboard name",
+          autoFocus: true
+        })
+      })]
+    });
+  }
+  function renderFolderStep() {
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-row w-full h-full",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col w-1/3 p-6 py-10 space-y-4 justify-start",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Heading, {
+          title: "Organize",
+          padding: false,
+          textColor: "text-gray-300"
+        }), /*#__PURE__*/jsxRuntime.jsx("p", {
+          className: "text-base font-normal text-gray-400",
+          children: "Assign this dashboard to a folder for easy organization in the sidebar."
+        }), selectedFolder && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-row items-center space-x-2 mt-4 pt-4 border-t border-gray-700",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: selectedFolder.icon || selectedFolder.folder || "folder",
+            className: "text-blue-400"
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-sm font-medium text-gray-300",
+            children: selectedFolder.name
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col w-2/3 p-6 overflow-y-auto space-y-2",
+        children: [!isCreatingFolder ? /*#__PURE__*/jsxRuntime.jsxs("button", {
+          type: "button",
+          className: "flex flex-row items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer transition-all text-gray-400 hover:text-gray-200 hover:bg-gray-700",
+          onClick: function onClick() {
+            return setIsCreatingFolder(true);
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "plus",
+            className: "w-5 h-5"
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-sm font-medium",
+            children: "Create New Folder"
+          })]
+        }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-col space-y-3 p-4 rounded-lg bg-gray-800 border border-gray-700",
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-row items-center justify-between",
+            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-sm font-medium text-gray-300",
+              children: "New Folder"
+            }), /*#__PURE__*/jsxRuntime.jsx("button", {
+              type: "button",
+              className: "text-gray-500 hover:text-gray-300 transition-colors",
+              onClick: handleCancelNewFolder,
+              children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                icon: "xmark"
+              })
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
+            value: newFolderName,
+            onChange: function onChange(val) {
+              return setNewFolderName(val);
+            },
+            placeholder: "Folder name"
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "grid grid-cols-10 gap-2",
+            children: FOLDER_ICONS.map(function (icon) {
+              var isIconSelected = icon === newFolderIcon;
+              return /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "flex items-center justify-center p-2 rounded cursor-pointer transition-all ".concat(isIconSelected ? "bg-blue-600 ring-2 ring-blue-400 text-white" : "bg-gray-700 text-gray-400 hover:bg-gray-600 hover:text-gray-200"),
+                onClick: function onClick() {
+                  return setNewFolderIcon(icon);
+                },
+                children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+                  icon: icon
+                })
+              }, icon);
+            })
+          })]
+        }), localMenuItems.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "border-t border-gray-700 my-2"
+        }), localMenuItems.map(function (item) {
+          var isSelected = !isCreatingFolder && item.id === selectedMenuId;
+          return /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-row items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer transition-all ".concat(isSelected ? "ring-2 ring-blue-500 bg-gray-700" : "hover:bg-gray-750 hover:ring-1 hover:ring-gray-600 bg-gray-800/50"),
+            onClick: function onClick() {
+              setSelectedMenuId(item.id);
+              setIsCreatingFolder(false);
+              setNewFolderName("");
+              setNewFolderIcon(null);
+            },
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+              icon: item.icon || item.folder || "folder",
+              className: "w-5 h-5 ".concat(isSelected ? "text-blue-400" : "text-gray-400")
+            }), /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-sm font-medium ".concat(isSelected ? "text-blue-300" : "text-gray-300"),
+              children: item.name
+            }), isSelected && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+              icon: "check",
+              className: "ml-auto text-blue-400 text-sm"
+            })]
+          }, item.id);
+        })]
+      })]
+    });
+  }
+  function renderThemeStep() {
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-row w-full h-full",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col w-1/3 p-6 py-10 space-y-4 justify-start",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Heading, {
+          title: "Theme",
+          padding: false,
+          textColor: "text-gray-300"
+        }), /*#__PURE__*/jsxRuntime.jsx("p", {
+          className: "text-base font-normal text-gray-400",
+          children: "Choose a theme for this dashboard, or use the application default."
+        }), selectedThemeKey !== null && themes && themes[selectedThemeKey] && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-row items-center space-x-2 mt-4 pt-4 border-t border-gray-700",
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+              icon: "palette",
+              className: "text-blue-400"
+            }), /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-sm font-medium text-gray-300",
+              children: themes[selectedThemeKey].name || selectedThemeKey
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-row space-x-2 mt-3",
+            children: [themes[selectedThemeKey].primary && /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "w-8 h-8 rounded bg-".concat(themes[selectedThemeKey].primary, "-500")
+            }), themes[selectedThemeKey].secondary && /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "w-8 h-8 rounded bg-".concat(themes[selectedThemeKey].secondary, "-500")
+            }), themes[selectedThemeKey].tertiary && /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "w-8 h-8 rounded bg-".concat(themes[selectedThemeKey].tertiary, "-500")
+            })]
+          })]
+        }), selectedThemeKey === null && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-row items-center space-x-2 mt-4 pt-4 border-t border-gray-700",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "palette",
+            className: "text-blue-400"
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-sm font-medium text-gray-300",
+            children: "App Default"
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col w-2/3 p-6 overflow-y-auto space-y-2",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-row items-center px-4 py-3 rounded-lg cursor-pointer transition-all ".concat(selectedThemeKey === null ? "ring-2 ring-blue-500 bg-gray-700" : "hover:bg-gray-750 hover:ring-1 hover:ring-gray-600 bg-gray-800/50"),
+          onClick: function onClick() {
+            return setSelectedThemeKey(null);
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "palette",
+            className: "w-5 h-5 mr-3 ".concat(selectedThemeKey === null ? "text-blue-400" : "text-gray-400")
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-sm font-medium ".concat(selectedThemeKey === null ? "text-blue-300" : "text-gray-300"),
+            children: "App Default"
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex flex-row space-x-1 ml-auto",
+            children: themes && appThemeKey && themes[appThemeKey] && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [themes[appThemeKey].primary && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "w-4 h-4 rounded bg-".concat(themes[appThemeKey].primary, "-500")
+              }), themes[appThemeKey].secondary && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "w-4 h-4 rounded bg-".concat(themes[appThemeKey].secondary, "-500")
+              }), themes[appThemeKey].tertiary && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "w-4 h-4 rounded bg-".concat(themes[appThemeKey].tertiary, "-500")
+              })]
+            })
+          })]
+        }), themes && Object.entries(themes).map(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 2),
+            key = _ref3[0],
+            t = _ref3[1];
+          var isThemeSelected = selectedThemeKey === key;
+          return /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex flex-row items-center px-4 py-3 rounded-lg cursor-pointer transition-all ".concat(isThemeSelected ? "ring-2 ring-blue-500 bg-gray-700" : "hover:bg-gray-750 hover:ring-1 hover:ring-gray-600 bg-gray-800/50"),
+            onClick: function onClick() {
+              return setSelectedThemeKey(key);
+            },
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+              icon: "palette",
+              className: "w-5 h-5 mr-3 ".concat(isThemeSelected ? "text-blue-400" : "text-gray-400")
+            }), /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-sm font-medium ".concat(isThemeSelected ? "text-blue-300" : "text-gray-300"),
+              children: t.name || key
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex flex-row space-x-1 ml-auto",
+              children: [t.primary && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "w-4 h-4 rounded bg-".concat(t.primary, "-500")
+              }), t.secondary && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "w-4 h-4 rounded bg-".concat(t.secondary, "-500")
+              }), t.tertiary && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "w-4 h-4 rounded bg-".concat(t.tertiary, "-500")
+              })]
+            })]
+          }, key);
+        })]
+      })]
+    });
+  }
+  function renderFileStep() {
+    var fileName = selectedFile !== null && selectedFile !== void 0 && selectedFile.filePath ? selectedFile.filePath.split("/").pop() : null;
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-row w-full h-full",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col w-1/3 p-6 py-10 space-y-4 justify-start",
+        children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Heading, {
+          title: "File",
+          padding: false,
+          textColor: "text-gray-300"
+        }), /*#__PURE__*/jsxRuntime.jsxs("p", {
+          className: "text-base font-normal text-gray-400",
+          children: ["Select a dashboard ZIP file downloaded from the registry or shared by a developer you trust. The filename should begin with", " ", /*#__PURE__*/jsxRuntime.jsx("code", {
+            className: "text-gray-300",
+            children: "dashboard"
+          }), " and end with", " ", /*#__PURE__*/jsxRuntime.jsx("code", {
+            className: "text-gray-300",
+            children: ".zip"
+          }), "."]
+        }), fileName && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-row items-center space-x-2 mt-4 pt-4 border-t border-gray-700",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "file-zipper",
+            className: "text-blue-400"
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-sm font-medium text-gray-300",
+            children: fileName
+          })]
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-col w-2/3 p-6 justify-start pt-10 space-y-4",
+        children: [fileName && /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-row items-center space-x-3 p-4 rounded-lg bg-gray-800 border border-gray-700",
+          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
+            icon: "file-zipper",
+            className: "text-blue-400 text-lg"
+          }), /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-sm font-medium text-gray-300 truncate",
+            children: fileName
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+          onClick: handleImportFromFile,
+          title: "Choose File",
+          textSize: "text-base",
+          padding: "py-2 px-4",
+          backgroundColor: "bg-blue-600",
+          textColor: "text-white",
+          hoverTextColor: "hover:text-white",
+          hoverBackgroundColor: "hover:bg-blue-500",
+          icon: "folder-open"
+        })]
+      })]
+    });
+  }
+
   // ─── Render body based on creationMethod ─────────────────────────
   function renderBody() {
     if (creationMethod === null) {
@@ -4094,7 +4500,9 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
         })
       });
     }
-    if (creationMethod === "registry") {
+
+    // Registry browser: show until install completes
+    if (creationMethod === "registry" && !importedWorkspace) {
       return /*#__PURE__*/jsxRuntime.jsx(DashReact.Panel, {
         backgroundColor: "bg-slate-800",
         padding: false,
@@ -4105,7 +4513,74 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
             onBack: function onBack() {
               return setCreationMethod(null);
             },
-            appId: appId
+            appId: appId,
+            onInstallComplete: handleRegistryInstallComplete
+          })
+        })
+      });
+    }
+
+    // Import stepper: 4 steps (File, Name, Folder, Theme)
+    if (creationMethod === "import") {
+      return /*#__PURE__*/jsxRuntime.jsx(DashReact.Panel, {
+        backgroundColor: "bg-slate-800",
+        padding: false,
+        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Panel.Body, {
+          scrollable: false,
+          className: "h-full",
+          children: /*#__PURE__*/jsxRuntime.jsxs(DashReact.Stepper, {
+            activeStep: activeStep,
+            onStepChange: setActiveStep,
+            showNavigation: false,
+            className: "h-full p-6 pb-0",
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+              label: "File",
+              description: "Select a file",
+              children: renderFileStep()
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+              label: "Name",
+              description: "Name your dashboard",
+              children: renderNameStep()
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+              label: "Organize",
+              description: "Choose a folder",
+              children: renderFolderStep()
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+              label: "Choose Theme",
+              description: "Dashboard theme",
+              children: renderThemeStep()
+            })]
+          })
+        })
+      });
+    }
+
+    // Registry stepper: 3 steps (Name, Folder, Theme)
+    if (creationMethod === "registry" && importedWorkspace) {
+      return /*#__PURE__*/jsxRuntime.jsx(DashReact.Panel, {
+        backgroundColor: "bg-slate-800",
+        padding: false,
+        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Panel.Body, {
+          scrollable: false,
+          className: "h-full",
+          children: /*#__PURE__*/jsxRuntime.jsxs(DashReact.Stepper, {
+            activeStep: activeStep,
+            onStepChange: setActiveStep,
+            showNavigation: false,
+            className: "h-full p-6 pb-0",
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+              label: "Name",
+              description: "Name your dashboard",
+              children: renderNameStep()
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+              label: "Organize",
+              description: "Choose a folder",
+              children: renderFolderStep()
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
+              label: "Choose Theme",
+              description: "Dashboard theme",
+              children: renderThemeStep()
+            })]
           })
         })
       });
@@ -4126,39 +4601,7 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
           children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
             label: "Name",
             description: "Name your dashboard",
-            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex flex-row w-full h-full",
-              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex flex-col w-1/3 p-6 py-10 space-y-4 justify-start",
-                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Heading, {
-                  title: "Name",
-                  padding: false,
-                  textColor: "text-gray-300"
-                }), /*#__PURE__*/jsxRuntime.jsx("p", {
-                  className: "text-base font-normal text-gray-400",
-                  children: "Give your new dashboard a name."
-                }), dashboardName.trim() && /*#__PURE__*/jsxRuntime.jsxs("div", {
-                  className: "flex flex-row items-center space-x-2 mt-4 pt-4 border-t border-gray-700",
-                  children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                    icon: "clone",
-                    className: "text-blue-400"
-                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                    className: "text-sm font-medium text-gray-300",
-                    children: dashboardName.trim()
-                  })]
-                })]
-              }), /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "flex flex-col w-2/3 p-6 justify-start pt-10",
-                children: /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-                  value: dashboardName,
-                  onChange: function onChange(val) {
-                    return setDashboardName(val);
-                  },
-                  placeholder: "Dashboard name",
-                  autoFocus: true
-                })
-              })]
-            })
+            children: renderNameStep()
           }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
             label: "Choose Layout",
             description: "Pick a template",
@@ -4170,203 +4613,11 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
           }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
             label: "Organize",
             description: "Choose a folder",
-            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex flex-row w-full h-full",
-              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex flex-col w-1/3 p-6 py-10 space-y-4 justify-start",
-                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Heading, {
-                  title: "Organize",
-                  padding: false,
-                  textColor: "text-gray-300"
-                }), /*#__PURE__*/jsxRuntime.jsx("p", {
-                  className: "text-base font-normal text-gray-400",
-                  children: "Assign this dashboard to a folder for easy organization in the sidebar."
-                }), selectedFolder && /*#__PURE__*/jsxRuntime.jsxs("div", {
-                  className: "flex flex-row items-center space-x-2 mt-4 pt-4 border-t border-gray-700",
-                  children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                    icon: selectedFolder.icon || selectedFolder.folder || "folder",
-                    className: "text-blue-400"
-                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                    className: "text-sm font-medium text-gray-300",
-                    children: selectedFolder.name
-                  })]
-                })]
-              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex flex-col w-2/3 p-6 overflow-y-auto space-y-2",
-                children: [!isCreatingFolder ? /*#__PURE__*/jsxRuntime.jsxs("button", {
-                  type: "button",
-                  className: "flex flex-row items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer transition-all text-gray-400 hover:text-gray-200 hover:bg-gray-700",
-                  onClick: function onClick() {
-                    return setIsCreatingFolder(true);
-                  },
-                  children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                    icon: "plus",
-                    className: "w-5 h-5"
-                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                    className: "text-sm font-medium",
-                    children: "Create New Folder"
-                  })]
-                }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
-                  className: "flex flex-col space-y-3 p-4 rounded-lg bg-gray-800 border border-gray-700",
-                  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                    className: "flex flex-row items-center justify-between",
-                    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-                      className: "text-sm font-medium text-gray-300",
-                      children: "New Folder"
-                    }), /*#__PURE__*/jsxRuntime.jsx("button", {
-                      type: "button",
-                      className: "text-gray-500 hover:text-gray-300 transition-colors",
-                      onClick: handleCancelNewFolder,
-                      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                        icon: "xmark"
-                      })
-                    })]
-                  }), /*#__PURE__*/jsxRuntime.jsx(DashReact.InputText, {
-                    value: newFolderName,
-                    onChange: function onChange(val) {
-                      return setNewFolderName(val);
-                    },
-                    placeholder: "Folder name"
-                  }), /*#__PURE__*/jsxRuntime.jsx("div", {
-                    className: "grid grid-cols-10 gap-2",
-                    children: FOLDER_ICONS.map(function (icon) {
-                      var isIconSelected = icon === newFolderIcon;
-                      return /*#__PURE__*/jsxRuntime.jsx("div", {
-                        className: "flex items-center justify-center p-2 rounded cursor-pointer transition-all ".concat(isIconSelected ? "bg-blue-600 ring-2 ring-blue-400 text-white" : "bg-gray-700 text-gray-400 hover:bg-gray-600 hover:text-gray-200"),
-                        onClick: function onClick() {
-                          return setNewFolderIcon(icon);
-                        },
-                        children: /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                          icon: icon
-                        })
-                      }, icon);
-                    })
-                  })]
-                }), localMenuItems.length > 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
-                  className: "border-t border-gray-700 my-2"
-                }), localMenuItems.map(function (item) {
-                  var isSelected = !isCreatingFolder && item.id === selectedMenuId;
-                  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-                    className: "flex flex-row items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer transition-all ".concat(isSelected ? "ring-2 ring-blue-500 bg-gray-700" : "hover:bg-gray-750 hover:ring-1 hover:ring-gray-600 bg-gray-800/50"),
-                    onClick: function onClick() {
-                      setSelectedMenuId(item.id);
-                      setIsCreatingFolder(false);
-                      setNewFolderName("");
-                      setNewFolderIcon(null);
-                    },
-                    children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                      icon: item.icon || item.folder || "folder",
-                      className: "w-5 h-5 ".concat(isSelected ? "text-blue-400" : "text-gray-400")
-                    }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                      className: "text-sm font-medium ".concat(isSelected ? "text-blue-300" : "text-gray-300"),
-                      children: item.name
-                    }), isSelected && /*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                      icon: "check",
-                      className: "ml-auto text-blue-400 text-sm"
-                    })]
-                  }, item.id);
-                })]
-              })]
-            })
+            children: renderFolderStep()
           }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Stepper.Step, {
             label: "Choose Theme",
             description: "Dashboard theme",
-            children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-              className: "flex flex-row w-full h-full",
-              children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex flex-col w-1/3 p-6 py-10 space-y-4 justify-start",
-                children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Heading, {
-                  title: "Theme",
-                  padding: false,
-                  textColor: "text-gray-300"
-                }), /*#__PURE__*/jsxRuntime.jsx("p", {
-                  className: "text-base font-normal text-gray-400",
-                  children: "Choose a theme for this dashboard, or use the application default."
-                }), selectedThemeKey !== null && themes && themes[selectedThemeKey] && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                    className: "flex flex-row items-center space-x-2 mt-4 pt-4 border-t border-gray-700",
-                    children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                      icon: "palette",
-                      className: "text-blue-400"
-                    }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                      className: "text-sm font-medium text-gray-300",
-                      children: themes[selectedThemeKey].name || selectedThemeKey
-                    })]
-                  }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                    className: "flex flex-row space-x-2 mt-3",
-                    children: [themes[selectedThemeKey].primary && /*#__PURE__*/jsxRuntime.jsx("div", {
-                      className: "w-8 h-8 rounded bg-".concat(themes[selectedThemeKey].primary, "-500")
-                    }), themes[selectedThemeKey].secondary && /*#__PURE__*/jsxRuntime.jsx("div", {
-                      className: "w-8 h-8 rounded bg-".concat(themes[selectedThemeKey].secondary, "-500")
-                    }), themes[selectedThemeKey].tertiary && /*#__PURE__*/jsxRuntime.jsx("div", {
-                      className: "w-8 h-8 rounded bg-".concat(themes[selectedThemeKey].tertiary, "-500")
-                    })]
-                  })]
-                }), selectedThemeKey === null && /*#__PURE__*/jsxRuntime.jsxs("div", {
-                  className: "flex flex-row items-center space-x-2 mt-4 pt-4 border-t border-gray-700",
-                  children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                    icon: "palette",
-                    className: "text-blue-400"
-                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                    className: "text-sm font-medium text-gray-300",
-                    children: "App Default"
-                  })]
-                })]
-              }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                className: "flex flex-col w-2/3 p-6 overflow-y-auto space-y-2",
-                children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-                  className: "flex flex-row items-center px-4 py-3 rounded-lg cursor-pointer transition-all ".concat(selectedThemeKey === null ? "ring-2 ring-blue-500 bg-gray-700" : "hover:bg-gray-750 hover:ring-1 hover:ring-gray-600 bg-gray-800/50"),
-                  onClick: function onClick() {
-                    return setSelectedThemeKey(null);
-                  },
-                  children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                    icon: "palette",
-                    className: "w-5 h-5 mr-3 ".concat(selectedThemeKey === null ? "text-blue-400" : "text-gray-400")
-                  }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                    className: "text-sm font-medium ".concat(selectedThemeKey === null ? "text-blue-300" : "text-gray-300"),
-                    children: "App Default"
-                  }), /*#__PURE__*/jsxRuntime.jsx("div", {
-                    className: "flex flex-row space-x-1 ml-auto",
-                    children: themes && appThemeKey && themes[appThemeKey] && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                      children: [themes[appThemeKey].primary && /*#__PURE__*/jsxRuntime.jsx("div", {
-                        className: "w-4 h-4 rounded bg-".concat(themes[appThemeKey].primary, "-500")
-                      }), themes[appThemeKey].secondary && /*#__PURE__*/jsxRuntime.jsx("div", {
-                        className: "w-4 h-4 rounded bg-".concat(themes[appThemeKey].secondary, "-500")
-                      }), themes[appThemeKey].tertiary && /*#__PURE__*/jsxRuntime.jsx("div", {
-                        className: "w-4 h-4 rounded bg-".concat(themes[appThemeKey].tertiary, "-500")
-                      })]
-                    })
-                  })]
-                }), themes && Object.entries(themes).map(function (_ref2) {
-                  var _ref3 = _slicedToArray(_ref2, 2),
-                    key = _ref3[0],
-                    t = _ref3[1];
-                  var isThemeSelected = selectedThemeKey === key;
-                  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-                    className: "flex flex-row items-center px-4 py-3 rounded-lg cursor-pointer transition-all ".concat(isThemeSelected ? "ring-2 ring-blue-500 bg-gray-700" : "hover:bg-gray-750 hover:ring-1 hover:ring-gray-600 bg-gray-800/50"),
-                    onClick: function onClick() {
-                      return setSelectedThemeKey(key);
-                    },
-                    children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.FontAwesomeIcon, {
-                      icon: "palette",
-                      className: "w-5 h-5 mr-3 ".concat(isThemeSelected ? "text-blue-400" : "text-gray-400")
-                    }), /*#__PURE__*/jsxRuntime.jsx("span", {
-                      className: "text-sm font-medium ".concat(isThemeSelected ? "text-blue-300" : "text-gray-300"),
-                      children: t.name || key
-                    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-                      className: "flex flex-row space-x-1 ml-auto",
-                      children: [t.primary && /*#__PURE__*/jsxRuntime.jsx("div", {
-                        className: "w-4 h-4 rounded bg-".concat(t.primary, "-500")
-                      }), t.secondary && /*#__PURE__*/jsxRuntime.jsx("div", {
-                        className: "w-4 h-4 rounded bg-".concat(t.secondary, "-500")
-                      }), t.tertiary && /*#__PURE__*/jsxRuntime.jsx("div", {
-                        className: "w-4 h-4 rounded bg-".concat(t.tertiary, "-500")
-                      })]
-                    })]
-                  }, key);
-                })]
-              })]
-            })
+            children: renderThemeStep()
           })]
         })
       })
@@ -4394,8 +4645,8 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
       });
     }
 
-    // Registry screen: Cancel button only (DiscoverDashboardsDetail has its own inline back button)
-    if (creationMethod === "registry") {
+    // Registry browser: Cancel only (DiscoverDashboardsDetail has its own inline back button)
+    if (creationMethod === "registry" && !importedWorkspace) {
       return /*#__PURE__*/jsxRuntime.jsx(DashReact.Modal.Footer, {
         children: /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-row space-x-2",
@@ -4413,6 +4664,189 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
       });
     }
 
+    // Import stepper footer: 4 steps (File, Name, Organize, Theme)
+    if (creationMethod === "import") {
+      return /*#__PURE__*/jsxRuntime.jsx(DashReact.Modal.Footer, {
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-row space-x-2",
+          children: [activeStep === 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              onClick: handleClose,
+              title: "Cancel",
+              textSize: "text-base xl:text-lg",
+              padding: "py-2 px-4",
+              backgroundColor: "bg-gray-700",
+              textColor: "text-gray-300",
+              hoverTextColor: "hover:text-gray-100",
+              hoverBackgroundColor: "hover:bg-gray-600"
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              onClick: function onClick() {
+                return setActiveStep(1);
+              },
+              title: "Next",
+              textSize: "text-base xl:text-lg",
+              padding: "py-2 px-4",
+              backgroundColor: "bg-blue-600",
+              textColor: "text-white",
+              hoverTextColor: "hover:text-white",
+              hoverBackgroundColor: "hover:bg-blue-500",
+              disabled: !selectedFile
+            })]
+          }), activeStep === 1 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              onClick: function onClick() {
+                return setActiveStep(0);
+              },
+              title: "Back",
+              textSize: "text-base xl:text-lg",
+              padding: "py-2 px-4",
+              backgroundColor: "bg-gray-700",
+              textColor: "text-gray-300",
+              hoverTextColor: "hover:text-gray-100",
+              hoverBackgroundColor: "hover:bg-gray-600"
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              onClick: function onClick() {
+                return setActiveStep(2);
+              },
+              title: "Next",
+              textSize: "text-base xl:text-lg",
+              padding: "py-2 px-4",
+              backgroundColor: "bg-blue-600",
+              textColor: "text-white",
+              hoverTextColor: "hover:text-white",
+              hoverBackgroundColor: "hover:bg-blue-500",
+              disabled: !dashboardName.trim()
+            })]
+          }), activeStep === 2 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              onClick: function onClick() {
+                return setActiveStep(1);
+              },
+              title: "Back",
+              textSize: "text-base xl:text-lg",
+              padding: "py-2 px-4",
+              backgroundColor: "bg-gray-700",
+              textColor: "text-gray-300",
+              hoverTextColor: "hover:text-gray-100",
+              hoverBackgroundColor: "hover:bg-gray-600"
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              onClick: function onClick() {
+                return setActiveStep(3);
+              },
+              title: "Next",
+              textSize: "text-base xl:text-lg",
+              padding: "py-2 px-4",
+              backgroundColor: "bg-blue-600",
+              textColor: "text-white",
+              hoverTextColor: "hover:text-white",
+              hoverBackgroundColor: "hover:bg-blue-500"
+            })]
+          }), activeStep === 3 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              onClick: function onClick() {
+                return setActiveStep(2);
+              },
+              title: "Back",
+              textSize: "text-base xl:text-lg",
+              padding: "py-2 px-4",
+              backgroundColor: "bg-gray-700",
+              textColor: "text-gray-300",
+              hoverTextColor: "hover:text-gray-100",
+              hoverBackgroundColor: "hover:bg-gray-600"
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              onClick: handleImportRegistryConfirm,
+              title: "Save",
+              textSize: "text-base xl:text-lg",
+              padding: "py-2 px-4",
+              backgroundColor: "bg-blue-600",
+              textColor: "text-white",
+              hoverTextColor: "hover:text-white",
+              hoverBackgroundColor: "hover:bg-blue-500"
+            })]
+          })]
+        })
+      });
+    }
+
+    // Registry stepper footer: 3 steps (Name, Organize, Theme)
+    if (creationMethod === "registry" && importedWorkspace) {
+      return /*#__PURE__*/jsxRuntime.jsx(DashReact.Modal.Footer, {
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-row space-x-2",
+          children: [activeStep === 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              onClick: handleClose,
+              title: "Cancel",
+              textSize: "text-base xl:text-lg",
+              padding: "py-2 px-4",
+              backgroundColor: "bg-gray-700",
+              textColor: "text-gray-300",
+              hoverTextColor: "hover:text-gray-100",
+              hoverBackgroundColor: "hover:bg-gray-600"
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              onClick: function onClick() {
+                return setActiveStep(1);
+              },
+              title: "Next",
+              textSize: "text-base xl:text-lg",
+              padding: "py-2 px-4",
+              backgroundColor: "bg-blue-600",
+              textColor: "text-white",
+              hoverTextColor: "hover:text-white",
+              hoverBackgroundColor: "hover:bg-blue-500",
+              disabled: !dashboardName.trim()
+            })]
+          }), activeStep === 1 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              onClick: function onClick() {
+                return setActiveStep(0);
+              },
+              title: "Back",
+              textSize: "text-base xl:text-lg",
+              padding: "py-2 px-4",
+              backgroundColor: "bg-gray-700",
+              textColor: "text-gray-300",
+              hoverTextColor: "hover:text-gray-100",
+              hoverBackgroundColor: "hover:bg-gray-600"
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              onClick: function onClick() {
+                return setActiveStep(2);
+              },
+              title: "Next",
+              textSize: "text-base xl:text-lg",
+              padding: "py-2 px-4",
+              backgroundColor: "bg-blue-600",
+              textColor: "text-white",
+              hoverTextColor: "hover:text-white",
+              hoverBackgroundColor: "hover:bg-blue-500"
+            })]
+          }), activeStep === 2 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              onClick: function onClick() {
+                return setActiveStep(1);
+              },
+              title: "Back",
+              textSize: "text-base xl:text-lg",
+              padding: "py-2 px-4",
+              backgroundColor: "bg-gray-700",
+              textColor: "text-gray-300",
+              hoverTextColor: "hover:text-gray-100",
+              hoverBackgroundColor: "hover:bg-gray-600"
+            }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Button, {
+              onClick: handleImportRegistryConfirm,
+              title: "Save",
+              textSize: "text-base xl:text-lg",
+              padding: "py-2 px-4",
+              backgroundColor: "bg-blue-600",
+              textColor: "text-white",
+              hoverTextColor: "hover:text-white",
+              hoverBackgroundColor: "hover:bg-blue-500"
+            })]
+          })]
+        })
+      });
+    }
+
     // Template wizard footer
     return /*#__PURE__*/jsxRuntime.jsx(DashReact.Modal.Footer, {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -32782,7 +33216,8 @@ var DashboardsSection = function DashboardsSection(_ref) {
           children: /*#__PURE__*/jsxRuntime.jsx(DashReact.SearchInput, {
             value: searchQuery,
             onChange: setSearchQuery,
-            placeholder: "Search dashboards..."
+            placeholder: "Search dashboards...",
+            inputClassName: "py-1.5 text-xs"
           })
         }), /*#__PURE__*/jsxRuntime.jsx(DashReact.ButtonIcon, {
           icon: "file-import",
@@ -32790,36 +33225,34 @@ var DashboardsSection = function DashboardsSection(_ref) {
           size: "sm",
           title: "Import dashboard"
         })]
-      }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Tabs3, {
-        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, {
-          className: "w-full flex",
-          spacing: "p-0.5",
-          children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.Tabs3.Trigger, {
-            value: "grouped",
-            className: "flex-1",
-            children: "Grouped"
-          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Tabs3.Trigger, {
-            value: "alphabetical",
-            className: "flex-1",
-            children: "A-Z"
-          }), /*#__PURE__*/jsxRuntime.jsx(DashReact.Tabs3.Trigger, {
-            value: "marketplace",
-            className: "flex-1",
-            children: "Marketplace"
-          })]
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex bg-white/5 rounded-md p-0.5",
+        children: [{
+          key: "grouped",
+          label: "Grouped"
+        }, {
+          key: "alphabetical",
+          label: "A-Z"
+        }, {
+          key: "marketplace",
+          label: "Marketplace"
+        }].map(function (tab) {
+          var currentTab = installMode === "marketplace" ? "marketplace" : viewMode;
+          return /*#__PURE__*/jsxRuntime.jsx("button", {
+            type: "button",
+            onClick: function onClick() {
+              if (tab.key === "marketplace") {
+                setInstallMode("marketplace");
+                setSelectedId(null);
+              } else {
+                setInstallMode(null);
+                setImportResult(null);
+                setViewMode(tab.key);
+              }
+            },
+            className: "flex-1 px-2 py-0.5 rounded text-[11px] transition-colors ".concat(currentTab === tab.key ? "bg-white/10 font-medium opacity-90" : "opacity-50 hover:opacity-70"),
+            children: tab.label
+          }, tab.key);
         })
       })]
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -41633,7 +42066,8 @@ var DashboardStageInner = function DashboardStageInner(_ref2) {
           menuItems: menuItems,
           onSaveMenuItem: handleSaveNewMenuItem,
           appId: credentials === null || credentials === void 0 ? void 0 : credentials.appId,
-          onReloadWorkspaces: loadWorkspaces
+          onReloadWorkspaces: loadWorkspaces,
+          onOpenWorkspace: handleOpenTab
         })]
       })]
     }), !popout && /*#__PURE__*/jsxRuntime.jsx(DashCommandPalette, {