@trops/dash-core 0.1.93 → 0.1.96

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import * as DashReact from '@trops/dash-react';
-import { isObject, ThemeContext, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SubHeading3, InputText, Button, FontAwesomeIcon, Tag, SearchInput, ButtonIcon, Modal, Panel, Stepper, Paragraph, Heading3, MenuItem3, FormLabel, SelectMenu, CodeEditorInline, Sidebar, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, DropdownPanel, MenuItem2, ButtonIcon2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, colorTypes, getCSSStyleForClassname, Panel2, Heading2, SubHeading, Paragraph2, Paragraph3, Button2, Button3, MenuItem, Tag2, Tag3, ButtonIcon3, DashPanel, colorNames, shades, themeVariants, Tabs3, DataList, Checkbox, Switch, StatCard, Card, Tabs, Accordion, Alert, Toast, ProgressBar, Toggle, Breadcrumbs, Card2, Tabs2, Accordion2, Alert2, Toast2, ProgressBar2, Toggle2, Breadcrumbs2, Card3, Accordion3, Alert3, Toast3, ProgressBar3, Toggle3, Breadcrumbs3, SelectInput, Icon2, AlgoliaSearchBox, CommandPalette, EmptyState, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
+import { isObject, ThemeContext, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SubHeading3, InputText, Button, FontAwesomeIcon, Tag, SearchInput, ButtonIcon, Modal, Panel, Stepper, Paragraph, Heading3, MenuItem3, FormLabel, SelectMenu, CodeEditorInline, Sidebar, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, DropdownPanel, MenuItem2, ButtonIcon2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, colorTypes, getCSSStyleForClassname, Panel2, Heading2, SubHeading, Paragraph2, Paragraph3, Button2, Button3, MenuItem, Tag2, Tag3, ButtonIcon3, DashPanel, colorNames, shades, themeVariants, Tabs3, DataList, Checkbox, Switch, StatCard, Card, Tabs, Accordion, Alert, Toast, ProgressBar, Toggle, Breadcrumbs, Card2, Tabs2, Accordion2, Alert2, Toast2, ProgressBar2, Toggle2, Breadcrumbs2, Card3, Accordion3, Alert3, Toast3, ProgressBar3, Toggle3, Breadcrumbs3, TextArea, SelectInput, Icon2, AlgoliaSearchBox, CommandPalette, EmptyState, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
 export * from '@trops/dash-react';
 export { ThemeContext } from '@trops/dash-react';
 import _typeof from '@babel/runtime/helpers/typeof';
@@ -3061,7 +3061,7 @@ var LayoutManagerPicker = function LayoutManagerPicker(_ref2) {
   });
 };
 
-var FOLDER_ICONS = [
+var FOLDER_ICONS$1 = [
 // General / UI
 "home", "folder", "star", "heart", "bookmark", "tag", "flag", "bell", "circle", "square", "circle-check", "thumbs-up", "clone", "signal",
 // Communication
@@ -3084,7 +3084,7 @@ var FOLDER_ICONS = [
 "file", "file-code", "clipboard", "book", "pen", "pencil",
 // Misc
 "magnifying-glass", "eye", "lock", "key", "shield", "clock", "calendar", "link"];
-var ALL_ICON_NAMES = Object.keys(DashReact).filter(function (key) {
+var ALL_ICON_NAMES$1 = Object.keys(DashReact).filter(function (key) {
   return key.startsWith("fa") && key !== "fas";
 }).map(function (key) {
   var _DashReact$key;
@@ -3092,8 +3092,8 @@ var ALL_ICON_NAMES = Object.keys(DashReact).filter(function (key) {
 }).filter(Boolean).filter(function (name, index, arr) {
   return arr.indexOf(name) === index;
 }).sort();
-var CURATED_SET = new Set(FOLDER_ICONS);
-var IconPicker = function IconPicker(_ref) {
+var CURATED_SET$1 = new Set(FOLDER_ICONS$1);
+var IconPicker$1 = function IconPicker(_ref) {
   var selectedIcon = _ref.selectedIcon,
     onSelectIcon = _ref.onSelectIcon;
   var _useState = useState(""),
@@ -3102,13 +3102,13 @@ var IconPicker = function IconPicker(_ref) {
     setSearch = _useState2[1];
   var query = search.trim().toLowerCase();
   var filteredCurated = useMemo(function () {
-    return query ? FOLDER_ICONS.filter(function (name) {
+    return query ? FOLDER_ICONS$1.filter(function (name) {
       return name.includes(query);
-    }) : FOLDER_ICONS;
+    }) : FOLDER_ICONS$1;
   }, [query]);
   var remainingIcons = useMemo(function () {
-    var all = ALL_ICON_NAMES.filter(function (name) {
-      return !CURATED_SET.has(name);
+    var all = ALL_ICON_NAMES$1.filter(function (name) {
+      return !CURATED_SET$1.has(name);
     });
     return query ? all.filter(function (name) {
       return name.includes(query);
@@ -3209,7 +3209,7 @@ var FolderDetail = function FolderDetail(_ref2) {
         children: [/*#__PURE__*/jsx("span", {
           className: "flex-shrink-0 text-sm font-medium opacity-70",
           children: "Icon"
-        }), /*#__PURE__*/jsx(IconPicker, {
+        }), /*#__PURE__*/jsx(IconPicker$1, {
           selectedIcon: formIcon,
           onSelectIcon: setFormIcon
         })]
@@ -3500,7 +3500,7 @@ var LayoutManagerModal = function LayoutManagerModal(_ref) {
                     placeholder: "Folder name"
                   }), /*#__PURE__*/jsx("div", {
                     className: "grid grid-cols-10 gap-2",
-                    children: FOLDER_ICONS.map(function (icon) {
+                    children: FOLDER_ICONS$1.map(function (icon) {
                       var isIconSelected = icon === newFolderIcon;
                       return /*#__PURE__*/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"),
@@ -26365,236 +26365,1378 @@ var ThemeManagerModal = function ThemeManagerModal(_ref) {
   });
 };
 
-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) {
-  var layout = _ref.layout;
-  var gridRoot = (layout || []).find(function (item) {
-    return item.component === "LayoutGridContainer";
-  });
-  var grid = (gridRoot === null || gridRoot === void 0 ? void 0 : gridRoot.grid) || null;
-  if (!grid || !grid.rows || !grid.cols) return null;
-
-  // Build preview cells from grid keys (e.g. "1.1", "2.3")
-  var previewCells = [];
-  for (var r = 1; r <= grid.rows; r++) {
-    for (var c = 1; c <= grid.cols; c++) {
-      var _cell$span, _cell$span2;
-      var key = "".concat(r, ".").concat(c);
-      var cell = grid[key];
-      if (!cell || cell.hide) continue;
-      var colSpan = ((_cell$span = cell.span) === null || _cell$span === void 0 ? void 0 : _cell$span.col) || undefined;
-      var rowSpan = ((_cell$span2 = cell.span) === null || _cell$span2 === void 0 ? void 0 : _cell$span2.row) || undefined;
-      previewCells.push({
-        row: r,
-        col: c,
-        colSpan: colSpan,
-        rowSpan: rowSpan
-      });
-    }
-  }
-  if (previewCells.length === 0) return null;
-  return /*#__PURE__*/jsx("div", {
-    className: "flex-1 min-h-0 w-full rounded bg-white/5 border border-white/10 p-2 overflow-hidden",
-    style: {
-      display: "grid",
-      gridTemplateRows: "repeat(".concat(grid.rows, ", 1fr)"),
-      gridTemplateColumns: "repeat(".concat(grid.cols, ", 1fr)"),
-      gap: "4px"
-    },
-    children: previewCells.map(function (cell, i) {
-      return /*#__PURE__*/jsxs("div", {
-        className: "rounded-sm overflow-hidden border border-white/10 bg-white/5",
-        style: {
-          gridColumn: cell.colSpan ? "span ".concat(cell.colSpan) : undefined,
-          gridRow: cell.rowSpan ? "span ".concat(cell.rowSpan) : undefined
-        },
-        children: [/*#__PURE__*/jsx("div", {
-          className: "h-1.5 bg-white/10"
-        }), /*#__PURE__*/jsxs("div", {
-          className: "p-1 space-y-0.5",
-          children: [/*#__PURE__*/jsx("div", {
-            className: "h-0.5 w-3/4 rounded-full bg-white/5"
-          }), /*#__PURE__*/jsx("div", {
-            className: "h-0.5 w-1/2 rounded-full bg-white/5"
-          })]
-        })]
-      }, i);
-    })
-  });
-};
-var DashboardDetail = function DashboardDetail(_ref2) {
-  var workspace = _ref2.workspace,
-    _ref2$menuItems = _ref2.menuItems,
-    menuItems = _ref2$menuItems === void 0 ? [] : _ref2$menuItems,
-    editingId = _ref2.editingId,
-    editName = _ref2.editName,
-    setEditName = _ref2.setEditName,
-    onStartRename = _ref2.onStartRename,
-    onSaveRename = _ref2.onSaveRename,
-    onCancelRename = _ref2.onCancelRename,
-    onDuplicate = _ref2.onDuplicate,
-    onDelete = _ref2.onDelete,
-    _ref2$dashApi = _ref2.dashApi,
-    dashApi = _ref2$dashApi === void 0 ? null : _ref2$dashApi,
-    _ref2$credentials = _ref2.credentials,
-    credentials = _ref2$credentials === void 0 ? null : _ref2$credentials,
-    _ref2$onReloadWorkspa = _ref2.onReloadWorkspaces,
-    onReloadWorkspaces = _ref2$onReloadWorkspa === void 0 ? null : _ref2$onReloadWorkspa;
-  var ws = workspace;
-  var isEditing = editingId === ws.id;
-  var widgetCount = (ws.layout || []).length;
-  var appId = credentials === null || credentials === void 0 ? void 0 : credentials.appId;
+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 = useContext(ThemeContext),
-    themes = _useContext.themes;
-  var folderOptions = menuItems.map(function (m) {
-    return {
-      label: m.name,
-      value: String(m.id)
-    };
-  });
-  var themeOptions = [{
-    label: "App Default",
-    value: ""
-  }].concat(_toConsumableArray(Object.entries(themes || {}).map(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-      key = _ref4[0],
-      t = _ref4[1];
-    return {
-      label: t.name || key,
-      value: key
-    };
-  })));
-  function handleChangeFolder(val) {
-    if (!dashApi || !appId) return;
-    var updated = deepCopy(ws);
-    updated.menuId = val ? Number(val) : null;
-    // Strip widgetConfig from layout before saving
-    updated.layout = (updated.layout || []).map(function (layoutItem) {
-      var cleaned = _objectSpread$8({}, layoutItem);
-      delete cleaned.widgetConfig;
-      return cleaned;
-    });
-    dashApi.saveWorkspace(appId, updated, function () {
-      onReloadWorkspaces && onReloadWorkspaces();
-    }, function (e, err) {
-      return (void 0);
+    currentTheme = _useContext.currentTheme;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    rating = _useState2[0],
+    setRating = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hoverRating = _useState4[0],
+    setHoverRating = _useState4[1];
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  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 handleChangeTheme(val) {
-    if (!dashApi || !appId) return;
-    var updated = deepCopy(ws);
-    updated.themeKey = val || null;
-    updated.layout = (updated.layout || []).map(function (layoutItem) {
-      var cleaned = _objectSpread$8({}, layoutItem);
-      delete cleaned.widgetConfig;
-      return cleaned;
-    });
-    dashApi.saveWorkspace(appId, updated, function () {
-      onReloadWorkspaces && onReloadWorkspaces();
-    }, function (e, err) {
-      return (void 0);
-    });
+  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);
   }
-  return /*#__PURE__*/jsxs("div", {
-    className: "flex flex-col flex-1 min-h-0",
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "flex flex-col flex-1 min-h-0 overflow-y-auto p-6 gap-6",
-      children: [/*#__PURE__*/jsx("div", {
-        className: "flex-shrink-0 flex flex-row items-center justify-between",
-        children: isEditing ? /*#__PURE__*/jsxs("div", {
-          className: "flex flex-row items-center gap-2 flex-1",
-          children: [/*#__PURE__*/jsx(InputText, {
-            value: editName,
-            onChange: function onChange(value) {
-              return setEditName(value);
-            },
-            placeholder: "Dashboard name",
-            className: "flex-1"
-          }), /*#__PURE__*/jsx(ButtonIcon, {
-            icon: "check",
-            onClick: function onClick() {
-              return onSaveRename(ws);
-            },
-            size: "sm"
-          }), /*#__PURE__*/jsx(ButtonIcon, {
-            icon: "xmark",
-            onClick: onCancelRename,
-            size: "sm"
-          })]
-        }) : /*#__PURE__*/jsx(SubHeading, {
-          title: ws.name || "Untitled",
-          padding: false
-        })
-      }), /*#__PURE__*/jsxs("div", {
-        className: "flex-shrink-0 flex flex-col space-y-3",
-        children: [/*#__PURE__*/jsx(SelectInput, {
-          label: "Folder",
-          value: String(ws.menuId || ""),
-          onChange: function onChange(val) {
-            return handleChangeFolder(val);
-          },
-          options: folderOptions,
-          placeholder: "No folder"
-        }), /*#__PURE__*/jsx(SelectInput, {
-          label: "Theme",
-          value: ws.themeKey || "",
-          onChange: function onChange(val) {
-            return handleChangeTheme(val);
-          },
-          options: themeOptions,
-          placeholder: "App Default"
-        }), /*#__PURE__*/jsxs("div", {
-          className: "flex flex-row items-center gap-2",
-          children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-            icon: "th-large",
-            className: "h-3 w-3 opacity-50"
-          }), /*#__PURE__*/jsxs("span", {
-            className: "text-sm opacity-70",
-            children: [widgetCount, " widget", widgetCount !== 1 ? "s" : ""]
-          })]
-        })]
-      }), /*#__PURE__*/jsx(LayoutPreview, {
-        layout: ws.layout
-      })]
-    }), !isEditing && /*#__PURE__*/jsxs("div", {
-      className: "flex-shrink-0 flex flex-row justify-end gap-2 px-6 py-4 border-t border-white/10",
-      children: [/*#__PURE__*/jsx(Button, {
-        title: "Rename",
-        onClick: function onClick() {
-          return onStartRename(ws);
-        },
-        size: "sm"
-      }), /*#__PURE__*/jsx(Button, {
-        title: "Duplicate",
+  if (loading) return null;
+  var displayRating = hoverRating || rating;
+  return /*#__PURE__*/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__*/jsx("button", {
+        type: "button",
+        disabled: !interactive,
         onClick: function onClick() {
-          return onDuplicate(ws);
+          return handleClick(star);
         },
-        size: "sm"
-      }), /*#__PURE__*/jsx(Button, {
-        title: "Delete",
-        onClick: function onClick() {
-          return onDelete(ws);
+        onMouseEnter: function onMouseEnter() {
+          return interactive && setHoverRating(star);
         },
-        size: "sm"
-      })]
-    })]
+        className: "p-0.5 transition-colors ".concat(interactive ? "cursor-pointer hover:scale-110" : "cursor-default"),
+        children: /*#__PURE__*/jsx(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);
+    })
   });
 };
 
-function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var DashboardsSection = function DashboardsSection(_ref) {
-  var _ref$workspaces = _ref.workspaces,
-    workspaces = _ref$workspaces === void 0 ? [] : _ref$workspaces,
-    _ref$menuItems = _ref.menuItems,
+var FOLDER_ICONS = [
+// General / UI
+"home", "folder", "star", "heart", "bookmark", "tag", "flag", "bell", "circle", "square", "circle-check", "thumbs-up", "clone", "signal",
+// Communication
+"phone", "envelope", "comment", "message", "paper-plane",
+// Media
+"image", "camera", "music", "video", "film", "headphones",
+// Tech
+"code", "terminal", "database", "server", "wifi", "plug", "robot", "microchip", "globe",
+// Nature
+"leaf", "seedling", "tree", "sun", "moon", "cloud", "bolt", "fire", "snowflake", "water",
+// Objects
+"hammer", "wrench", "gear", "briefcase", "cart-shopping", "truck", "car", "plane", "rocket",
+// People / Activity
+"user", "users", "trophy", "gamepad", "dumbbell", "graduation-cap", "baby", "baby-carriage",
+// Arrows / Navigation
+"arrow-up", "arrow-down", "arrow-left", "arrow-right", "arrows-up-down", "arrows-left-right", "minus",
+// Data / Charts
+"chart-bar", "chart-line", "chart-pie", "table", "list", "layer-group",
+// Files
+"file", "file-code", "clipboard", "book", "pen", "pencil",
+// Misc
+"magnifying-glass", "eye", "lock", "key", "shield", "clock", "calendar", "link"];
+var ALL_ICON_NAMES = Object.keys(DashReact).filter(function (key) {
+  return key.startsWith("fa") && key !== "fas";
+}).map(function (key) {
+  var _DashReact$key;
+  return (_DashReact$key = DashReact[key]) === null || _DashReact$key === void 0 ? void 0 : _DashReact$key.iconName;
+}).filter(Boolean).filter(function (name, index, arr) {
+  return arr.indexOf(name) === index;
+}).sort();
+var CURATED_SET = new Set(FOLDER_ICONS);
+var IconPicker = function IconPicker(_ref) {
+  var selectedIcon = _ref.selectedIcon,
+    onSelectIcon = _ref.onSelectIcon;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    search = _useState2[0],
+    setSearch = _useState2[1];
+  var query = search.trim().toLowerCase();
+  var filteredCurated = useMemo(function () {
+    return query ? FOLDER_ICONS.filter(function (name) {
+      return name.includes(query);
+    }) : FOLDER_ICONS;
+  }, [query]);
+  var remainingIcons = useMemo(function () {
+    var all = ALL_ICON_NAMES.filter(function (name) {
+      return !CURATED_SET.has(name);
+    });
+    return query ? all.filter(function (name) {
+      return name.includes(query);
+    }) : all;
+  }, [query]);
+  var hasResults = filteredCurated.length > 0 || remainingIcons.length > 0;
+  var renderIcon = function renderIcon(icon) {
+    return /*#__PURE__*/jsx(ButtonIcon, {
+      icon: icon,
+      selected: icon === selectedIcon,
+      onClick: function onClick() {
+        return onSelectIcon(icon);
+      },
+      iconSize: "h-6 w-6",
+      backgroundColor: "transparent",
+      className: icon !== selectedIcon ? "opacity-50 hover:!opacity-80" : ""
+    }, icon);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col flex-1 min-h-0 space-y-3",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "flex-shrink-0",
+      children: /*#__PURE__*/jsx(SearchInput, {
+        value: search,
+        onChange: setSearch,
+        placeholder: "Search icons..."
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex-1 min-h-0 overflow-y-auto space-y-3",
+      children: [!hasResults && /*#__PURE__*/jsxs("span", {
+        className: "text-sm opacity-50 py-2",
+        children: ["No icons match \"", search, "\""]
+      }), filteredCurated.length > 0 && /*#__PURE__*/jsxs("div", {
+        className: "flex flex-col space-y-1.5",
+        children: [/*#__PURE__*/jsx("span", {
+          className: "text-xs font-medium opacity-50",
+          children: "Suggested"
+        }), /*#__PURE__*/jsx("div", {
+          className: "grid grid-cols-6 gap-2",
+          children: filteredCurated.map(renderIcon)
+        })]
+      }), remainingIcons.length > 0 && /*#__PURE__*/jsxs("div", {
+        className: "flex flex-col space-y-1.5",
+        children: [/*#__PURE__*/jsx("span", {
+          className: "text-xs font-medium opacity-50",
+          children: "All Icons"
+        }), /*#__PURE__*/jsx("div", {
+          className: "grid grid-cols-6 gap-2",
+          children: remainingIcons.map(renderIcon)
+        })]
+      })]
+    })]
+  });
+};
+
+var DASHBOARD_TAGS = ["productivity", "monitoring", "analytics", "communication", "developer", "sales", "marketing", "finance", "project-management", "social", "news", "utilities"];
+
+/**
+ * PublishDashboardModal — multi-step stepper for preparing a dashboard
+ * for registry publishing.
+ *
+ * Steps:
+ *   1. Details — Author name (required) + description (textarea)
+ *   2. Tags — Predefined tag selection with toggle-pill styling
+ *   3. Icon — Full icon picker with search
+ *   4. Publish — Review summary, publish action, result display
+ */
+var PublishDashboardModal = function PublishDashboardModal(_ref) {
+  var isOpen = _ref.isOpen,
+    setIsOpen = _ref.setIsOpen,
+    appId = _ref.appId,
+    workspaceId = _ref.workspaceId,
+    workspaceName = _ref.workspaceName;
+  var _useContext = useContext(ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = getStylesForItem(themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  // Stepper state
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    step = _useState2[0],
+    setStep = _useState2[1];
+
+  // Step 1: Details
+  var _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    authorName = _useState4[0],
+    setAuthorName = _useState4[1];
+  var _useState5 = useState(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    description = _useState6[0],
+    setDescription = _useState6[1];
+
+  // Step 2: Tags
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedTags = _useState8[0],
+    setSelectedTags = _useState8[1];
+
+  // Step 3: Icon
+  var _useState9 = useState("grip"),
+    _useState0 = _slicedToArray(_useState9, 2),
+    icon = _useState0[0],
+    setIcon = _useState0[1];
+
+  // Step 4: Publish
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    isPublishing = _useState10[0],
+    setIsPublishing = _useState10[1];
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    result = _useState12[0],
+    setResult = _useState12[1];
+  function resetState() {
+    setStep(0);
+    setAuthorName("");
+    setDescription("");
+    setSelectedTags([]);
+    setIcon("grip");
+    setIsPublishing(false);
+    setResult(null);
+  }
+  function handleClose() {
+    setIsOpen(false);
+    setTimeout(resetState, 200);
+  }
+  function handleStepChange(nextStep) {
+    if (step === 0 && nextStep > 0 && !authorName.trim()) return;
+    if (step === 1 && nextStep > 1 && selectedTags.length === 0) return;
+    setStep(nextStep);
+  }
+  function toggleTag(tag) {
+    setSelectedTags(function (prev) {
+      return prev.includes(tag) ? prev.filter(function (t) {
+        return t !== tag;
+      }) : [].concat(_toConsumableArray(prev), [tag]);
+    });
+  }
+  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 = {
+              authorName: authorName.trim(),
+              description: description.trim() || undefined,
+              tags: selectedTags,
+              icon: icon || 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);
+  }
+  var isLastStep = step === 3;
+  var canAdvance = step === 0 ? !!authorName.trim() : step === 1 ? selectedTags.length > 0 : true;
+  return /*#__PURE__*/jsx(Modal, {
+    isOpen: isOpen,
+    setIsOpen: handleClose,
+    width: "w-full max-w-2xl",
+    height: "h-[70vh]",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col h-full rounded-lg overflow-clip border ".concat(panelStyles.backgroundColor || "", " ").concat(panelStyles.borderColor || "", " ").concat(panelStyles.textColor || ""),
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex-shrink-0 flex flex-row items-center justify-between p-4 border-b border-white/10",
+        children: [/*#__PURE__*/jsxs("span", {
+          className: "text-lg font-semibold",
+          children: ["Publish \"", workspaceName || "Dashboard", "\""]
+        }), /*#__PURE__*/jsx("button", {
+          type: "button",
+          onClick: handleClose,
+          className: "opacity-50 hover:opacity-100 transition-opacity cursor-pointer",
+          children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "xmark",
+            className: "h-5 w-5"
+          })
+        })]
+      }), /*#__PURE__*/jsxs(Stepper, {
+        activeStep: step,
+        onStepChange: handleStepChange,
+        showNavigation: false,
+        className: "flex-1 min-h-0 flex flex-col px-6 pt-2",
+        children: [/*#__PURE__*/jsx(Stepper.Step, {
+          label: "Details",
+          children: /*#__PURE__*/jsxs("div", {
+            className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
+            children: [/*#__PURE__*/jsx("p", {
+              className: "text-sm opacity-70",
+              children: "Provide details about your dashboard for the registry listing."
+            }), /*#__PURE__*/jsx(InputText, {
+              label: "Author Name *",
+              value: authorName,
+              onChange: setAuthorName,
+              placeholder: "Your name"
+            }), /*#__PURE__*/jsx(TextArea, {
+              label: "Description",
+              value: description,
+              onChange: setDescription,
+              placeholder: "A brief description of this dashboard...",
+              rows: 3
+            })]
+          })
+        }), /*#__PURE__*/jsx(Stepper.Step, {
+          label: "Tags",
+          children: /*#__PURE__*/jsxs("div", {
+            className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-5",
+            children: [/*#__PURE__*/jsx("p", {
+              className: "text-sm opacity-70",
+              children: "Select at least one tag to categorize your dashboard."
+            }), /*#__PURE__*/jsx("div", {
+              className: "grid grid-cols-3 gap-2",
+              children: DASHBOARD_TAGS.map(function (tag) {
+                var isSelected = selectedTags.includes(tag);
+                return /*#__PURE__*/jsx("button", {
+                  type: "button",
+                  onClick: function onClick() {
+                    return toggleTag(tag);
+                  },
+                  className: "px-3 py-1.5 rounded-full text-sm border transition-colors cursor-pointer ".concat(isSelected ? "bg-white/15 border-white/30 text-white" : "bg-transparent border-white/10 text-white/60 hover:border-white/20 hover:text-white/80"),
+                  children: tag
+                }, tag);
+              })
+            })]
+          })
+        }), /*#__PURE__*/jsx(Stepper.Step, {
+          label: "Icon",
+          children: /*#__PURE__*/jsx("div", {
+            className: "flex-1 min-h-0 flex flex-col pb-4",
+            children: /*#__PURE__*/jsx(IconPicker, {
+              selectedIcon: icon,
+              onSelectIcon: setIcon
+            })
+          })
+        }), /*#__PURE__*/jsx(Stepper.Step, {
+          label: "Publish",
+          children: /*#__PURE__*/jsx("div", {
+            className: "flex-1 min-h-0 overflow-y-auto pb-4 space-y-4",
+            children: !result ? /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/jsx("p", {
+                className: "text-sm opacity-70",
+                children: "Review your dashboard details before publishing."
+              }), /*#__PURE__*/jsxs("div", {
+                className: "bg-white/5 border border-white/10 rounded-lg p-4 space-y-2 text-sm",
+                children: [/*#__PURE__*/jsxs("div", {
+                  className: "flex gap-2",
+                  children: [/*#__PURE__*/jsx("span", {
+                    className: "opacity-50 w-20 flex-shrink-0",
+                    children: "Author"
+                  }), /*#__PURE__*/jsx("span", {
+                    children: authorName
+                  })]
+                }), description.trim() && /*#__PURE__*/jsxs("div", {
+                  className: "flex gap-2",
+                  children: [/*#__PURE__*/jsx("span", {
+                    className: "opacity-50 w-20 flex-shrink-0",
+                    children: "Description"
+                  }), /*#__PURE__*/jsx("span", {
+                    children: description
+                  })]
+                }), /*#__PURE__*/jsxs("div", {
+                  className: "flex gap-2",
+                  children: [/*#__PURE__*/jsx("span", {
+                    className: "opacity-50 w-20 flex-shrink-0",
+                    children: "Tags"
+                  }), /*#__PURE__*/jsx("span", {
+                    children: selectedTags.length > 0 ? selectedTags.join(", ") : "None"
+                  })]
+                }), /*#__PURE__*/jsxs("div", {
+                  className: "flex gap-2 items-center",
+                  children: [/*#__PURE__*/jsx("span", {
+                    className: "opacity-50 w-20 flex-shrink-0",
+                    children: "Icon"
+                  }), /*#__PURE__*/jsx(FontAwesomeIcon, {
+                    icon: icon || "grip",
+                    className: "h-4 w-4"
+                  }), /*#__PURE__*/jsx("span", {
+                    className: "opacity-70",
+                    children: icon || "grip"
+                  })]
+                })]
+              })]
+            }) : result.success ? /*#__PURE__*/jsxs("div", {
+              className: "space-y-3",
+              children: [/*#__PURE__*/jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+                  icon: "circle-check",
+                  className: "h-4 w-4 text-green-400"
+                }), /*#__PURE__*/jsx("span", {
+                  className: "text-sm",
+                  children: "Dashboard prepared for publishing."
+                })]
+              }), result.filePath && /*#__PURE__*/jsxs("div", {
+                className: "text-xs opacity-50 break-all",
+                children: ["Saved to: ", result.filePath]
+              }), result.warnings && result.warnings.length > 0 && /*#__PURE__*/jsxs("div", {
+                className: "bg-amber-500/10 border border-amber-500/20 rounded-lg p-3 space-y-2",
+                children: [/*#__PURE__*/jsxs("div", {
+                  className: "flex items-start gap-2",
+                  children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+                    icon: "triangle-exclamation",
+                    className: "h-3.5 w-3.5 text-amber-400 mt-0.5 flex-shrink-0"
+                  }), /*#__PURE__*/jsx("span", {
+                    className: "text-xs text-amber-300/90",
+                    children: "The following widgets are not currently on the registry. This may be intentional if they are private. Dashboards referencing these widgets can only be installed by users who already have them."
+                  })]
+                }), /*#__PURE__*/jsx("ul", {
+                  className: "text-xs opacity-60 pl-5 list-disc space-y-0.5",
+                  children: result.warnings.map(function (w) {
+                    return /*#__PURE__*/jsx("li", {
+                      children: w
+                    }, w);
+                  })
+                })]
+              }), result.registryCheckFailed && /*#__PURE__*/jsx("div", {
+                className: "bg-amber-500/10 border border-amber-500/20 rounded-lg p-3",
+                children: /*#__PURE__*/jsxs("div", {
+                  className: "flex items-start gap-2",
+                  children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+                    icon: "triangle-exclamation",
+                    className: "h-3.5 w-3.5 text-amber-400 mt-0.5 flex-shrink-0"
+                  }), /*#__PURE__*/jsx("span", {
+                    className: "text-xs text-amber-300/90",
+                    children: "Unable to reach the registry to verify widget availability. Your dashboard was still prepared successfully."
+                  })]
+                })
+              })]
+            }) : /*#__PURE__*/jsxs("div", {
+              className: "flex items-center gap-2",
+              children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+                icon: "circle-xmark",
+                className: "h-4 w-4 text-red-400"
+              }), /*#__PURE__*/jsx("span", {
+                className: "text-sm text-red-400",
+                children: result.error || "Publish preparation failed."
+              })]
+            })
+          })
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex-shrink-0 flex flex-row items-center px-6 py-4 border-t border-white/10",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "flex flex-row gap-2",
+          children: /*#__PURE__*/jsx(Button3, {
+            title: step === 0 ? "Cancel" : "Back",
+            onClick: step === 0 ? handleClose : function () {
+              return setStep(step - 1);
+            },
+            disabled: isPublishing
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: "flex-1 text-center",
+          children: /*#__PURE__*/jsxs("span", {
+            className: "text-xs opacity-40",
+            children: ["Step ", step + 1, " of 4"]
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: "flex flex-row gap-2",
+          children: result !== null && result !== void 0 && result.success ? /*#__PURE__*/jsx(Button2, {
+            title: "Done",
+            onClick: handleClose
+          }) : isLastStep ? /*#__PURE__*/jsx(Button2, {
+            title: isPublishing ? "Preparing..." : "Publish",
+            onClick: handlePublish,
+            disabled: isPublishing
+          }) : /*#__PURE__*/jsx(Button2, {
+            title: "Next",
+            onClick: function onClick() {
+              return handleStepChange(step + 1);
+            },
+            disabled: !canAdvance
+          })
+        })]
+      })]
+    })
+  });
+};
+
+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) {
+  var layout = _ref.layout;
+  var gridRoot = (layout || []).find(function (item) {
+    return item.component === "LayoutGridContainer";
+  });
+  var grid = (gridRoot === null || gridRoot === void 0 ? void 0 : gridRoot.grid) || null;
+  if (!grid || !grid.rows || !grid.cols) return null;
+
+  // Build preview cells from grid keys (e.g. "1.1", "2.3")
+  var previewCells = [];
+  for (var r = 1; r <= grid.rows; r++) {
+    for (var c = 1; c <= grid.cols; c++) {
+      var _cell$span, _cell$span2;
+      var key = "".concat(r, ".").concat(c);
+      var cell = grid[key];
+      if (!cell || cell.hide) continue;
+      var colSpan = ((_cell$span = cell.span) === null || _cell$span === void 0 ? void 0 : _cell$span.col) || undefined;
+      var rowSpan = ((_cell$span2 = cell.span) === null || _cell$span2 === void 0 ? void 0 : _cell$span2.row) || undefined;
+      previewCells.push({
+        row: r,
+        col: c,
+        colSpan: colSpan,
+        rowSpan: rowSpan
+      });
+    }
+  }
+  if (previewCells.length === 0) return null;
+  return /*#__PURE__*/jsx("div", {
+    className: "flex-1 min-h-0 w-full rounded bg-white/5 border border-white/10 p-2 overflow-hidden",
+    style: {
+      display: "grid",
+      gridTemplateRows: "repeat(".concat(grid.rows, ", 1fr)"),
+      gridTemplateColumns: "repeat(".concat(grid.cols, ", 1fr)"),
+      gap: "4px"
+    },
+    children: previewCells.map(function (cell, i) {
+      return /*#__PURE__*/jsxs("div", {
+        className: "rounded-sm overflow-hidden border border-white/10 bg-white/5",
+        style: {
+          gridColumn: cell.colSpan ? "span ".concat(cell.colSpan) : undefined,
+          gridRow: cell.rowSpan ? "span ".concat(cell.rowSpan) : undefined
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          className: "h-1.5 bg-white/10"
+        }), /*#__PURE__*/jsxs("div", {
+          className: "p-1 space-y-0.5",
+          children: [/*#__PURE__*/jsx("div", {
+            className: "h-0.5 w-3/4 rounded-full bg-white/5"
+          }), /*#__PURE__*/jsx("div", {
+            className: "h-0.5 w-1/2 rounded-full bg-white/5"
+          })]
+        })]
+      }, i);
+    })
+  });
+};
+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,
+    editingId = _ref2.editingId,
+    editName = _ref2.editName,
+    setEditName = _ref2.setEditName,
+    onStartRename = _ref2.onStartRename,
+    onSaveRename = _ref2.onSaveRename,
+    onCancelRename = _ref2.onCancelRename,
+    onDuplicate = _ref2.onDuplicate,
+    onDelete = _ref2.onDelete,
+    _ref2$dashApi = _ref2.dashApi,
+    dashApi = _ref2$dashApi === void 0 ? null : _ref2$dashApi,
+    _ref2$credentials = _ref2.credentials,
+    credentials = _ref2$credentials === void 0 ? null : _ref2$credentials,
+    _ref2$onReloadWorkspa = _ref2.onReloadWorkspaces,
+    onReloadWorkspaces = _ref2$onReloadWorkspa === void 0 ? null : _ref2$onReloadWorkspa;
+  var ws = workspace;
+  var isEditing = editingId === ws.id;
+  var widgetCount = (ws.layout || []).length;
+  var appId = credentials === null || credentials === void 0 ? void 0 : credentials.appId;
+  var _useContext = useContext(ThemeContext),
+    themes = _useContext.themes;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    exportStatus = _useState2[0],
+    setExportStatus = _useState2[1];
+  var _useState3 = 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,
+      value: String(m.id)
+    };
+  });
+  var themeOptions = [{
+    label: "App Default",
+    value: ""
+  }].concat(_toConsumableArray(Object.entries(themes || {}).map(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      key = _ref4[0],
+      t = _ref4[1];
+    return {
+      label: t.name || key,
+      value: key
+    };
+  })));
+  function handleChangeFolder(val) {
+    if (!dashApi || !appId) return;
+    var updated = deepCopy(ws);
+    updated.menuId = val ? Number(val) : null;
+    // Strip widgetConfig from layout before saving
+    updated.layout = (updated.layout || []).map(function (layoutItem) {
+      var cleaned = _objectSpread$8({}, layoutItem);
+      delete cleaned.widgetConfig;
+      return cleaned;
+    });
+    dashApi.saveWorkspace(appId, updated, function () {
+      onReloadWorkspaces && onReloadWorkspaces();
+    }, function (e, err) {
+      return (void 0);
+    });
+  }
+  function handleChangeTheme(val) {
+    if (!dashApi || !appId) return;
+    var updated = deepCopy(ws);
+    updated.themeKey = val || null;
+    updated.layout = (updated.layout || []).map(function (layoutItem) {
+      var cleaned = _objectSpread$8({}, layoutItem);
+      delete cleaned.widgetConfig;
+      return cleaned;
+    });
+    dashApi.saveWorkspace(appId, updated, function () {
+      onReloadWorkspaces && onReloadWorkspaces();
+    }, function (e, err) {
+      return (void 0);
+    });
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col flex-1 min-h-0",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex flex-col flex-1 min-h-0 overflow-y-auto p-6 gap-6",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "flex-shrink-0 flex flex-row items-center justify-between",
+        children: isEditing ? /*#__PURE__*/jsxs("div", {
+          className: "flex flex-row items-center gap-2 flex-1",
+          children: [/*#__PURE__*/jsx(InputText, {
+            value: editName,
+            onChange: function onChange(value) {
+              return setEditName(value);
+            },
+            placeholder: "Dashboard name",
+            className: "flex-1"
+          }), /*#__PURE__*/jsx(ButtonIcon, {
+            icon: "check",
+            onClick: function onClick() {
+              return onSaveRename(ws);
+            },
+            size: "sm"
+          }), /*#__PURE__*/jsx(ButtonIcon, {
+            icon: "xmark",
+            onClick: onCancelRename,
+            size: "sm"
+          })]
+        }) : /*#__PURE__*/jsx(SubHeading, {
+          title: ws.name || "Untitled",
+          padding: false
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex-shrink-0 flex flex-col space-y-3",
+        children: [/*#__PURE__*/jsx(SelectInput, {
+          label: "Folder",
+          value: String(ws.menuId || ""),
+          onChange: function onChange(val) {
+            return handleChangeFolder(val);
+          },
+          options: folderOptions,
+          placeholder: "No folder"
+        }), /*#__PURE__*/jsx(SelectInput, {
+          label: "Theme",
+          value: ws.themeKey || "",
+          onChange: function onChange(val) {
+            return handleChangeTheme(val);
+          },
+          options: themeOptions,
+          placeholder: "App Default"
+        }), /*#__PURE__*/jsxs("div", {
+          className: "flex flex-row items-center gap-2",
+          children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "th-large",
+            className: "h-3 w-3 opacity-50"
+          }), /*#__PURE__*/jsxs("span", {
+            className: "text-sm opacity-70",
+            children: [widgetCount, " widget", widgetCount !== 1 ? "s" : ""]
+          })]
+        })]
+      }), registryPackage && /*#__PURE__*/jsxs("div", {
+        className: "flex-shrink-0 flex items-center gap-2",
+        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "store",
+          className: "h-3 w-3 opacity-50"
+        }), /*#__PURE__*/jsxs("span", {
+          className: "text-xs opacity-60",
+          children: ["Imported from registry:", " ", /*#__PURE__*/jsx("span", {
+            className: "font-medium",
+            children: registryPackage
+          })]
+        })]
+      }), registryPackage && appId && /*#__PURE__*/jsx("div", {
+        className: "flex-shrink-0",
+        children: /*#__PURE__*/jsx(StarRating, {
+          appId: appId,
+          packageName: registryPackage,
+          interactive: true
+        })
+      }), exportStatus && /*#__PURE__*/jsxs("div", {
+        className: "flex-shrink-0 flex items-center gap-2",
+        children: [exportStatus.status === "loading" && /*#__PURE__*/jsx("div", {
+          className: "animate-spin rounded-full h-3.5 w-3.5 border-b-2 border-blue-500"
+        }), exportStatus.status === "success" && /*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "circle-check",
+          className: "h-3.5 w-3.5 text-green-400"
+        }), exportStatus.status === "error" && /*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "circle-xmark",
+          className: "h-3.5 w-3.5 text-red-400"
+        }), /*#__PURE__*/jsx("span", {
+          className: "text-xs ".concat(exportStatus.status === "error" ? "text-red-400" : "opacity-60"),
+          children: exportStatus.message
+        })]
+      }), /*#__PURE__*/jsx(LayoutPreview, {
+        layout: ws.layout
+      })]
+    }), !isEditing && /*#__PURE__*/jsxs("div", {
+      className: "flex-shrink-0 flex flex-row justify-end gap-2 px-6 py-4 border-t border-white/10",
+      children: [/*#__PURE__*/jsx(Button, {
+        title: "Export ZIP",
+        onClick: handleExport,
+        size: "sm"
+      }), isShareable && /*#__PURE__*/jsx(Button, {
+        title: "Publish",
+        onClick: function onClick() {
+          return setPublishOpen(true);
+        },
+        size: "sm"
+      }), /*#__PURE__*/jsx(Button, {
+        title: "Rename",
+        onClick: function onClick() {
+          return onStartRename(ws);
+        },
+        size: "sm"
+      }), /*#__PURE__*/jsx(Button, {
+        title: "Duplicate",
+        onClick: function onClick() {
+          return onDuplicate(ws);
+        },
+        size: "sm"
+      }), /*#__PURE__*/jsx(Button, {
+        title: "Delete",
+        onClick: function onClick() {
+          return onDelete(ws);
+        },
+        size: "sm"
+      })]
+    }), /*#__PURE__*/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 = useContext(ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = getStylesForItem(themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    preview = _useState2[0],
+    setPreview = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    previewLoading = _useState4[0],
+    setPreviewLoading = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isInstalling = _useState6[0],
+    setIsInstalling = _useState6[1];
+  var _useState7 = 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
+  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__*/jsxs("div", {
+    className: "flex flex-col flex-1 min-h-0",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex-1 min-h-0 overflow-y-auto p-6 space-y-6 ".concat(panelStyles.textColor || "text-gray-200"),
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex flex-row items-center gap-3",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "h-5 w-5 flex-shrink-0 flex items-center justify-center",
+          children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: pkg.icon || "clone",
+            className: "h-5 w-5"
+          })
+        }), /*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsx(SubHeading3, {
+            title: pkg.displayName || pkg.name,
+            padding: false
+          }), /*#__PURE__*/jsxs("div", {
+            className: "flex items-center gap-2 mt-0.5",
+            children: [/*#__PURE__*/jsxs("span", {
+              className: "text-sm opacity-60",
+              children: ["by ", pkg.author || "Unknown"]
+            }), pkg.version && /*#__PURE__*/jsxs("span", {
+              className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-70"),
+              children: ["v", pkg.version]
+            })]
+          })]
+        })]
+      }), appId && /*#__PURE__*/jsx(StarRating, {
+        appId: appId,
+        packageName: pkg.name,
+        interactive: false
+      }), /*#__PURE__*/jsx("hr", {
+        className: currentTheme["border-primary-medium"]
+      }), pkg.description && /*#__PURE__*/jsx("p", {
+        className: "text-sm",
+        children: pkg.description
+      }), pkg.tags && pkg.tags.length > 0 && /*#__PURE__*/jsx("div", {
+        className: "flex flex-wrap gap-1",
+        children: pkg.tags.map(function (tag) {
+          return /*#__PURE__*/jsx("span", {
+            className: "text-xs px-2 py-0.5 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-60"),
+            children: tag
+          }, tag);
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx("span", {
+          className: "text-xs font-semibold opacity-50 mb-1 block",
+          children: "REQUIRED WIDGETS"
+        }), previewLoading ? /*#__PURE__*/jsxs("div", {
+          className: "flex items-center gap-2 py-2",
+          children: [/*#__PURE__*/jsx("div", {
+            className: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500"
+          }), /*#__PURE__*/jsx("span", {
+            className: "text-xs opacity-50",
+            children: "Checking compatibility..."
+          })]
+        }) : /*#__PURE__*/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__*/jsxs("div", {
+              className: "p-2 rounded ".concat(currentTheme["bg-primary-medium"], " flex items-center gap-2"),
+              children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+                icon: compat.icon,
+                className: "h-3.5 w-3.5 ".concat(compat.color)
+              }), /*#__PURE__*/jsx("span", {
+                className: "text-sm",
+                children: w.displayName || w.name || w.packageName
+              }), /*#__PURE__*/jsx("span", {
+                className: "text-xs opacity-40 ml-auto",
+                children: status === "installed" ? "Installed" : status === "available" ? "Will install" : "Unavailable"
+              })]
+            }, idx);
+          })
+        })]
+      }), providers.length > 0 && /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx("span", {
+          className: "text-xs font-semibold opacity-50 mb-1 block",
+          children: "REQUIRED PROVIDERS"
+        }), /*#__PURE__*/jsx("div", {
+          className: "space-y-1",
+          children: providers.map(function (p, idx) {
+            return /*#__PURE__*/jsxs("div", {
+              className: "flex items-center gap-2",
+              children: [/*#__PURE__*/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__*/jsx("span", {
+                className: "text-[10px] opacity-40",
+                children: "Required"
+              })]
+            }, idx);
+          })
+        })]
+      }), wiring.length > 0 && /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsx("span", {
+          className: "text-xs font-semibold opacity-50 mb-1 block",
+          children: "EVENT WIRING"
+        }), /*#__PURE__*/jsx("div", {
+          className: "space-y-1",
+          children: wiring.map(function (w, idx) {
+            return /*#__PURE__*/jsxs("div", {
+              className: "text-xs p-2 rounded ".concat(currentTheme["bg-primary-medium"], " opacity-70"),
+              children: [/*#__PURE__*/jsx("span", {
+                className: "font-medium",
+                children: w.from || "Source"
+              }), /*#__PURE__*/jsx(FontAwesomeIcon, {
+                icon: "arrow-right",
+                className: "h-2.5 w-2.5 mx-1.5 opacity-50"
+              }), /*#__PURE__*/jsx("span", {
+                className: "font-medium",
+                children: w.to || "Target"
+              }), w.event && /*#__PURE__*/jsxs("span", {
+                className: "opacity-50 ml-1.5",
+                children: ["(", w.event, ")"]
+              })]
+            }, idx);
+          })
+        })]
+      }), installResult && /*#__PURE__*/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__*/jsxs("div", {
+          className: "flex items-center gap-2",
+          children: [/*#__PURE__*/jsx(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__*/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__*/jsx("div", {
+      className: "flex items-center justify-end px-6 py-3 border-t ".concat(currentTheme["border-primary-medium"]),
+      children: /*#__PURE__*/jsx(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 = useContext(ThemeContext),
+    currentTheme = _useContext.currentTheme;
+  var panelStyles = getStylesForItem(themeObjects.PANEL, currentTheme, {
+    grow: false
+  });
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    packages = _useState2[0],
+    setPackages = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var _useState7 = useState(""),
+    _useState8 = _slicedToArray(_useState7, 2),
+    searchQuery = _useState8[0],
+    setSearchQuery = _useState8[1];
+  var _useState9 = useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    selectedPackageName = _useState0[0],
+    setSelectedPackageName = _useState0[1];
+  var search = 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
+  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__*/jsxs("div", {
+      className: "flex flex-col flex-1 min-h-0",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "flex-shrink-0 px-4 pt-4",
+        children: /*#__PURE__*/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__*/jsx(FontAwesomeIcon, {
+            icon: "arrow-left",
+            className: "h-3 w-3"
+          }), /*#__PURE__*/jsx("span", {
+            children: "Back"
+          })]
+        })
+      }), /*#__PURE__*/jsx(RegistryDashboardDetail, {
+        dashboardPackage: selectedPackage,
+        appId: appId
+      })]
+    });
+  }
+
+  // Package list view
+  var listBody;
+  if (isLoading) {
+    listBody = /*#__PURE__*/jsx("div", {
+      className: "flex items-center justify-center py-12",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "text-center",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500 mx-auto mb-3"
+        }), /*#__PURE__*/jsx(Paragraph, {
+          className: "text-sm opacity-50",
+          children: "Loading dashboards..."
+        })]
+      })
+    });
+  } else if (error) {
+    listBody = /*#__PURE__*/jsxs("div", {
+      className: "px-4 py-8 text-center",
+      children: [/*#__PURE__*/jsx(Paragraph, {
+        className: "text-sm text-red-400 mb-3",
+        children: error
+      }), /*#__PURE__*/jsx(Button, {
+        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__*/jsx("div", {
+      className: "px-4 py-8 text-center",
+      children: /*#__PURE__*/jsx(Paragraph, {
+        className: "text-sm opacity-50",
+        children: searchQuery ? "No dashboards match your search." : "No dashboard packages available."
+      })
+    });
+  } else {
+    listBody = /*#__PURE__*/jsx("div", {
+      className: "space-y-1",
+      children: packages.map(function (pkg) {
+        var widgetCount = (pkg.widgets || []).length;
+        return /*#__PURE__*/jsx(Sidebar.Item, {
+          icon: /*#__PURE__*/jsx(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__*/jsxs("div", {
+    className: "flex flex-col flex-1 min-h-0 ".concat(panelStyles.textColor || "text-gray-200"),
+    children: [/*#__PURE__*/jsx("div", {
+      className: "flex-shrink-0 px-4 pt-4",
+      children: /*#__PURE__*/jsxs("button", {
+        type: "button",
+        onClick: onBack,
+        className: "flex items-center gap-1.5 text-sm opacity-60 hover:opacity-100 transition-opacity",
+        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "arrow-left",
+          className: "h-3 w-3"
+        }), /*#__PURE__*/jsx("span", {
+          children: "Back"
+        })]
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex-shrink-0 px-4 py-3",
+      children: /*#__PURE__*/jsx(SearchInput, {
+        value: searchQuery,
+        onChange: setSearchQuery,
+        placeholder: "Search dashboards...",
+        inputClassName: "py-1.5 text-xs"
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex-1 min-h-0 overflow-y-auto px-2",
+      children: listBody
+    }), !isLoading && !error && packages.length > 0 && /*#__PURE__*/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" : ""]
+    })]
+  });
+};
+
+function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DashboardsSection = function DashboardsSection(_ref) {
+  var _ref$workspaces = _ref.workspaces,
+    workspaces = _ref$workspaces === void 0 ? [] : _ref$workspaces,
+    _ref$menuItems = _ref.menuItems,
     menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems,
     _ref$dashApi = _ref.dashApi,
     dashApi = _ref$dashApi === void 0 ? null : _ref$dashApi,
     _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 = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     selectedId = _useState2[0],
@@ -26619,6 +27761,15 @@ var DashboardsSection = function DashboardsSection(_ref) {
     _useState10 = _slicedToArray(_useState1, 2),
     viewMode = _useState10[0],
     setViewMode = _useState10[1];
+  // null | "marketplace" | "import-result"
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    installMode = _useState12[0],
+    setInstallMode = _useState12[1];
+  var _useState13 = 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 = useContext(ThemeContext),
     currentTheme = _useContext.currentTheme;
@@ -26698,6 +27849,84 @@ var DashboardsSection = function DashboardsSection(_ref) {
       setDeleteTarget(null);
     });
   }
+
+  // Respond to external create trigger from header button (marketplace)
+  var prevCreateRequested = useRef(false);
+  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;
   });
@@ -26747,13 +27976,33 @@ var DashboardsSection = function DashboardsSection(_ref) {
     className: "flex flex-col h-full",
     children: [/*#__PURE__*/jsxs("div", {
       className: "flex-shrink-0 flex flex-col gap-2 px-3 pt-3 pb-2 ".concat(headerStyles.backgroundColor || ""),
-      children: [/*#__PURE__*/jsx(SearchInput, {
-        value: searchQuery,
-        onChange: setSearchQuery,
-        placeholder: "Search dashboards..."
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "flex-1",
+          children: /*#__PURE__*/jsx(SearchInput, {
+            value: searchQuery,
+            onChange: setSearchQuery,
+            placeholder: "Search dashboards..."
+          })
+        }), /*#__PURE__*/jsx(ButtonIcon, {
+          icon: "file-import",
+          onClick: handleImport,
+          size: "sm",
+          title: "Import dashboard"
+        })]
       }), /*#__PURE__*/jsx(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__*/jsxs(Tabs3.List, {
@@ -26767,6 +28016,10 @@ var DashboardsSection = function DashboardsSection(_ref) {
             value: "alphabetical",
             className: "flex-1",
             children: "A-Z"
+          }), /*#__PURE__*/jsx(Tabs3.Trigger, {
+            value: "marketplace",
+            className: "flex-1",
+            children: "Marketplace"
           })]
         })
       })]
@@ -26780,26 +28033,68 @@ var DashboardsSection = function DashboardsSection(_ref) {
       })
     })]
   });
-  var detailContent = selectedWorkspace ? /*#__PURE__*/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__*/jsx(DiscoverDashboardsDetail, {
+      onBack: function onBack() {
+        setInstallMode(null);
+        setViewMode("grouped");
+      },
+      appId: appId
+    });
+  } else if (installMode === "import-result") {
+    detailContent = /*#__PURE__*/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__*/jsxs("div", {
+        className: "flex items-center gap-3",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "animate-spin rounded-full h-5 w-5 border-b-2 border-blue-500"
+        }), /*#__PURE__*/jsx("span", {
+          className: "text-sm opacity-70",
+          children: importResult.message
+        })]
+      }), (importResult === null || importResult === void 0 ? void 0 : importResult.status) === "success" && /*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "circle-check",
+          className: "h-4 w-4 text-green-400"
+        }), /*#__PURE__*/jsx("span", {
+          className: "text-sm",
+          children: importResult.message
+        })]
+      }), (importResult === null || importResult === void 0 ? void 0 : importResult.status) === "error" && /*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: "circle-xmark",
+          className: "h-4 w-4 text-red-400"
+        }), /*#__PURE__*/jsx("span", {
+          className: "text-sm text-red-400",
+          children: importResult.message
+        })]
+      })]
+    });
+  } else if (selectedWorkspace) {
+    detailContent = /*#__PURE__*/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__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(SectionLayout, {
       listContent: listContent,
@@ -32130,9 +33425,9 @@ var AppSettingsModal = function AppSettingsModal(_ref) {
       children: [/*#__PURE__*/jsx(SubHeading2, {
         title: activeDef.label,
         padding: false
-      }), (activeSection === "folders" || activeSection === "providers" || activeSection === "themes" || activeSection === "widgets") && /*#__PURE__*/jsx(ButtonIcon3, {
+      }), (activeSection === "dashboards" || activeSection === "folders" || activeSection === "providers" || activeSection === "themes" || activeSection === "widgets") && /*#__PURE__*/jsx(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);
         },
@@ -32149,7 +33444,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__*/jsx(FoldersSection, {
         menuItems: menuItems,
         workspaces: workspaces,