@trops/dash-core 0.1.326 → 0.1.327

package/dist/index.js

@@ -27609,15 +27609,22 @@ var DashboardModel = /*#__PURE__*/function () {
       this.sidebarLayout = "sidebarLayout" in obj ? obj.sidebarLayout : [];
       this.sidebarWidth = "sidebarWidth" in obj ? obj.sidebarWidth : 280;
 
-      // Multi-page support: migrate single-page workspaces
+      // Multi-page support: every workspace always has at least one page.
+      // Existing multi-page workspaces load as-is; single-page workspaces
+      // are auto-migrated by wrapping their layout into a page.
       if ("pages" in obj && Array.isArray(obj.pages) && obj.pages.length > 0) {
         this.pages = obj.pages;
         this.activePageId = obj.activePageId || obj.pages[0].id;
       } else {
-        // Single-page workspace — no migration yet, pages stay empty
-        // Pages are created on demand when user clicks "Add Page"
-        this.pages = [];
-        this.activePageId = null;
+        // Auto-migrate: wrap existing layout into a single page
+        var page = {
+          id: "page-".concat(this.id || Date.now()),
+          name: this.name || "Page 1",
+          order: 0,
+          layout: this.layout
+        };
+        this.pages = [page];
+        this.activePageId = page.id;
       }
       obj = null;
 
@@ -27630,12 +27637,12 @@ var DashboardModel = /*#__PURE__*/function () {
           _step;
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var page = _step.value;
-            if (page.layout) {
+            var _page = _step.value;
+            if (_page.layout) {
               var saved = this.layout;
-              this.layout = page.layout;
+              this.layout = _page.layout;
               this._normalizeAllGrids();
-              page.layout = this.layout;
+              _page.layout = this.layout;
               this.layout = saved;
             }
           }
@@ -27709,10 +27716,8 @@ var DashboardModel = /*#__PURE__*/function () {
         themeKey: this.themeKey,
         selectedProviders: this.selectedProviders
       };
-      if (this.pages && this.pages.length > 0) {
-        ws.pages = this.pages;
-        ws.activePageId = this.activePageId;
-      }
+      ws.pages = this.pages;
+      ws.activePageId = this.activePageId;
       if (this.sidebarEnabled || ((_this$sidebarLayout = this.sidebarLayout) === null || _this$sidebarLayout === void 0 ? void 0 : _this$sidebarLayout.length) > 0) {
         ws.sidebarEnabled = this.sidebarEnabled;
         ws.sidebarLayout = this.sidebarLayout;
@@ -48804,7 +48809,11 @@ var PageTabBar = function PageTabBar(_ref) {
     _ref$onReorderPages = _ref.onReorderPages,
     onReorderPages = _ref$onReorderPages === void 0 ? null : _ref$onReorderPages,
     _ref$editMode = _ref.editMode,
-    editMode = _ref$editMode === void 0 ? false : _ref$editMode;
+    editMode = _ref$editMode === void 0 ? false : _ref$editMode,
+    _ref$scrollableEnable = _ref.scrollableEnabled,
+    scrollableEnabled = _ref$scrollableEnable === void 0 ? false : _ref$scrollableEnable,
+    _ref$onScrollableChan = _ref.onScrollableChange,
+    onScrollableChange = _ref$onScrollableChan === void 0 ? null : _ref$onScrollableChan;
   var _useContext = React.useContext(DashReact.ThemeContext),
     currentTheme = _useContext.currentTheme;
   var _useState = React.useState(null),
@@ -48957,6 +48966,13 @@ var PageTabBar = function PageTabBar(_ref) {
       }), /*#__PURE__*/jsxRuntime.jsx("span", {
         children: "Add Page"
       })]
+    }), editMode && onScrollableChange && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "ml-auto flex items-center shrink-0",
+      children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Toggle, {
+        text: "Scrollable",
+        enabled: scrollableEnabled,
+        setEnabled: onScrollableChange
+      })
     })]
   });
 };
@@ -51471,37 +51487,23 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
     activePageId = _useState48[0],
     setActivePageId = _useState48[1];
   var workspacePages = (workspaceSelected === null || workspaceSelected === void 0 ? void 0 : workspaceSelected.pages) || [];
-  var hasPages = workspacePages.length > 0;
 
   // Memoize sorted pages so page object references stay stable across re-renders
   var sortedPagesForRender = React.useMemo(function () {
-    return hasPages ? _toConsumableArray(workspacePages).sort(function (a, b) {
+    return _toConsumableArray(workspacePages).sort(function (a, b) {
       return (a.order || 0) - (b.order || 0);
-    }) : [];
+    });
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [hasPages, workspacePages.length,
+  [workspacePages.length,
   // Re-sort when page names/order change but not on every parent render
   workspacePages.map(function (p) {
     return "".concat(p.id, ":").concat(p.order, ":").concat(p.name);
   }).join(",")]);
   var currentActivePageId = activePageId || (workspaceSelected === null || workspaceSelected === void 0 ? void 0 : workspaceSelected.activePageId) || ((_workspacePages$0$id = (_workspacePages$ = workspacePages[0]) === null || _workspacePages$ === void 0 ? void 0 : _workspacePages$.id) !== null && _workspacePages$0$id !== void 0 ? _workspacePages$0$id : null);
   function handleAddPage() {
-    var _workspaceSelected$la;
     if (!workspaceSelected) return;
     var existingPages = _toConsumableArray(workspacePages);
-
-    // If this is the first time adding a page to a single-page dashboard,
-    // migrate the existing layout into page 1 first.
-    if (existingPages.length === 0 && ((_workspaceSelected$la = workspaceSelected.layout) === null || _workspaceSelected$la === void 0 ? void 0 : _workspaceSelected$la.length) > 0) {
-      var page1 = {
-        id: "page-".concat(Date.now() - 1),
-        name: workspaceSelected.name || "Page 1",
-        order: 0,
-        layout: workspaceSelected.layout
-      };
-      existingPages = [page1];
-    }
     var newPage = DashboardModel.createPage("Page ".concat(existingPages.length + 1));
     newPage.order = existingPages.length;
     var updatedWorkspace = _objectSpread$5(_objectSpread$5({}, workspaceSelected), {}, {
@@ -51533,17 +51535,6 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
     });
     var newActiveId = currentActivePageId === pageId ? (_updatedPages$ = updatedPages[0]) === null || _updatedPages$ === void 0 ? void 0 : _updatedPages$.id : currentActivePageId;
     setActivePageId(newActiveId);
-
-    // If only one page remains, convert back to single-page mode
-    if (updatedPages.length === 1) {
-      handleWorkspaceChange(_objectSpread$5(_objectSpread$5({}, workspaceSelected), {}, {
-        layout: updatedPages[0].layout,
-        pages: [],
-        activePageId: null
-      }));
-      setActivePageId(null);
-      return;
-    }
     handleWorkspaceChange(_objectSpread$5(_objectSpread$5({}, workspaceSelected), {}, {
       pages: updatedPages,
       activePageId: newActiveId
@@ -51602,45 +51593,28 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
   function renderComponent(workspaceItem) {
     try {
       if (workspaceItem === undefined) return null;
-
-      // Multi-page mode
-      if (hasPages) {
-        return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-          children: sortedPagesForRender.map(function (page) {
-            var isActive = page.id === currentActivePageId;
-            return /*#__PURE__*/jsxRuntime.jsx("div", {
-              style: {
-                display: isActive ? "flex" : "none"
-              },
-              className: "flex-col w-full flex-1",
-              children: /*#__PURE__*/jsxRuntime.jsx(PageLayoutBuilder, {
-                page: page,
-                workspaceItem: workspaceItem,
-                previewMode: previewMode,
-                editMode: editMode,
-                onPageWorkspaceChange: handlePageWorkspaceChange,
-                onProviderSelect: stableProviderSelect,
-                onTogglePreview: stableTogglePreview,
-                workspaceRef: getPageRef(page.id),
-                onWidgetPopout: stableWidgetPopout
-              })
-            }, page.id);
-          })
-        });
-      }
-
-      // Single-page mode (backward compatible)
-      return /*#__PURE__*/jsxRuntime.jsx(LayoutBuilder, {
-        dashboardId: workspaceItem["id"],
-        preview: previewMode,
-        workspace: workspaceItem,
-        onWorkspaceChange: handleWorkspaceChange,
-        onProviderSelect: handleProviderSelect,
-        onTogglePreview: handleToggleEditMode,
-        editMode: editMode,
-        workspaceRef: currentWorkspaceRef,
-        onWidgetPopout: popout ? null : handleWidgetPopout
-      }, "LayoutBuilder-".concat(workspaceItem["id"]));
+      return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: sortedPagesForRender.map(function (page) {
+          var isActive = page.id === currentActivePageId;
+          return /*#__PURE__*/jsxRuntime.jsx("div", {
+            style: {
+              display: isActive ? "flex" : "none"
+            },
+            className: "flex-col w-full flex-1",
+            children: /*#__PURE__*/jsxRuntime.jsx(PageLayoutBuilder, {
+              page: page,
+              workspaceItem: workspaceItem,
+              previewMode: previewMode,
+              editMode: editMode,
+              onPageWorkspaceChange: handlePageWorkspaceChange,
+              onProviderSelect: stableProviderSelect,
+              onTogglePreview: stableTogglePreview,
+              workspaceRef: getPageRef(page.id),
+              onWidgetPopout: stableWidgetPopout
+            })
+          }, page.id);
+        })
+      });
     } catch (e) {
       return null;
     }
@@ -51734,27 +51708,43 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
     updateTabWorkspace(tempWorkspace);
   }
   function handleScrollableChange(enabled) {
-    var _tempWorkspace$layout;
     if (!workspaceSelected) return;
     var tempWorkspace = DashReact.deepCopy(currentWorkspaceRef.current || workspaceSelected);
-    // Find the root grid container layout item
-    var rootItem = (_tempWorkspace$layout = tempWorkspace.layout) === null || _tempWorkspace$layout === void 0 ? void 0 : _tempWorkspace$layout.find(function (item) {
-      return item.parent === 0;
+    // Update the active page's root layout item
+    tempWorkspace.pages = (tempWorkspace.pages || []).map(function (page) {
+      if (page.id !== currentActivePageId) return page;
+      return _objectSpread$5(_objectSpread$5({}, page), {}, {
+        layout: (page.layout || []).map(function (item) {
+          return item.parent === 0 ? _objectSpread$5(_objectSpread$5({}, item), {}, {
+            scrollable: enabled
+          }) : item;
+        })
+      });
     });
-    if (rootItem) {
-      rootItem.scrollable = enabled;
+    // Update page ref immediately so getRootScrollable() reads the new value
+    var pageRef = pageRefsMap.current[currentActivePageId];
+    if (pageRef !== null && pageRef !== void 0 && pageRef.current) {
+      pageRef.current.layout = (pageRef.current.layout || []).map(function (item) {
+        return item.parent === 0 ? _objectSpread$5(_objectSpread$5({}, item), {}, {
+          scrollable: enabled
+        }) : item;
+      });
     }
-    // Update ref immediately so getRootScrollable() reads the new value
-    // before LayoutBuilder's async useEffect syncs it
     currentWorkspaceRef.current = tempWorkspace;
     updateTabWorkspace(tempWorkspace);
   }
 
-  // Derive scrollable state from root layout item
+  // Derive scrollable state from the active page's root layout item
   function getRootScrollable() {
+    var _pageRef$current, _ws$pages;
     var ws = currentWorkspaceRef.current || workspaceSelected;
-    if (!(ws !== null && ws !== void 0 && ws.layout)) return false;
-    var rootItem = ws.layout.find(function (item) {
+    if (!ws) return false;
+    var pageRef = pageRefsMap.current[currentActivePageId];
+    var layout = (pageRef === null || pageRef === void 0 || (_pageRef$current = pageRef.current) === null || _pageRef$current === void 0 ? void 0 : _pageRef$current.layout) || ((_ws$pages = ws.pages) === null || _ws$pages === void 0 || (_ws$pages = _ws$pages.find(function (p) {
+      return p.id === currentActivePageId;
+    })) === null || _ws$pages === void 0 ? void 0 : _ws$pages.layout);
+    if (!layout) return false;
+    var rootItem = layout.find(function (item) {
       return item.parent === 0;
     });
     return (rootItem === null || rootItem === void 0 ? void 0 : rootItem.scrollable) || false;
@@ -51764,48 +51754,27 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
       var _sidebarWorkspaceRef$;
       // we have to remove the widgetConfig which contains the component
       // sanitize the workspace layout remove widgetConfig items
-      var workspaceToSave;
-      if (hasPages) {
-        // Multi-page: gather latest layout from each page's LayoutBuilder ref
-        workspaceToSave = DashReact.deepCopy(workspaceSelected);
-        workspaceToSave.pages = (workspaceToSave.pages || []).map(function (page) {
-          var _pageRef$current;
-          var pageRef = pageRefsMap.current[page.id];
-          var latestLayout = (pageRef === null || pageRef === void 0 || (_pageRef$current = pageRef.current) === null || _pageRef$current === void 0 ? void 0 : _pageRef$current.layout) || page.layout || [];
-          return _objectSpread$5(_objectSpread$5({}, page), {}, {
-            layout: latestLayout.map(function (item) {
-              var copy = _objectSpread$5({}, item);
-              delete copy.widgetConfig;
-              return copy;
-            })
-          });
-        });
-        workspaceToSave.activePageId = currentActivePageId;
-        // Also sanitize the root layout (may be stale from pre-pages era)
-        workspaceToSave.layout = (workspaceToSave.layout || []).map(function (item) {
-          var copy = _objectSpread$5({}, item);
-          delete copy.widgetConfig;
-          return copy;
+      // Gather latest layout from each page's LayoutBuilder ref
+      var workspaceToSave = DashReact.deepCopy(workspaceSelected);
+      workspaceToSave.pages = (workspaceToSave.pages || []).map(function (page) {
+        var _pageRef$current2;
+        var pageRef = pageRefsMap.current[page.id];
+        var latestLayout = (pageRef === null || pageRef === void 0 || (_pageRef$current2 = pageRef.current) === null || _pageRef$current2 === void 0 ? void 0 : _pageRef$current2.layout) || page.layout || [];
+        return _objectSpread$5(_objectSpread$5({}, page), {}, {
+          layout: latestLayout.map(function (item) {
+            var copy = _objectSpread$5({}, item);
+            delete copy.widgetConfig;
+            return copy;
+          })
         });
-      } else {
-        var _currentWorkspaceRef$;
-        // Single-page: merge workspace-level properties (themeKey, name, menuId, etc.)
-        // from workspaceSelected with the latest layout from currentWorkspaceRef.
-        // The ref only tracks layout changes; header-level property changes
-        // (theme, folder, scrollable) are tracked in workspaceSelected.
-        workspaceToSave = DashReact.deepCopy(workspaceSelected);
-        var refLayout = (_currentWorkspaceRef$ = currentWorkspaceRef.current) === null || _currentWorkspaceRef$ === void 0 ? void 0 : _currentWorkspaceRef$.layout;
-        if (refLayout) {
-          workspaceToSave["layout"] = refLayout.map(function (layoutItem) {
-            delete layoutItem["widgetConfig"];
-            return layoutItem;
-          });
-        } else {
-          workspaceToSave["layout"] = (workspaceToSave["layout"] || []).map(function (layoutItem) {
-            delete layoutItem["widgetConfig"];
-            return layoutItem;
-          });
-        }
+      });
+      workspaceToSave.activePageId = currentActivePageId;
+      // Sync root layout from active page for backward compat
+      var activePage = workspaceToSave.pages.find(function (p) {
+        return p.id === currentActivePageId;
+      });
+      if (activePage) {
+        workspaceToSave.layout = activePage.layout;
       }
 
       // Gather sidebar layout from its LayoutBuilder ref
@@ -52055,8 +52024,6 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
               themes: themes || {},
               onFolderChange: popout ? null : handleWorkspaceFolderChange,
               onThemeChange: popout ? null : handleWorkspaceThemeChange,
-              scrollableEnabled: getRootScrollable(),
-              onScrollableChange: popout ? null : handleScrollableChange,
               sidebarEnabled: sidebarEnabled,
               onSidebarChange: popout ? null : handleSidebarToggle
             }), /*#__PURE__*/jsxRuntime.jsxs(DashboardThemeProvider, {
@@ -52089,7 +52056,7 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
                     className: "h-3 w-3"
                   })
                 })]
-              }), (hasPages || !previewMode) && /*#__PURE__*/jsxRuntime.jsx(PageTabBar, {
+              }), /*#__PURE__*/jsxRuntime.jsx(PageTabBar, {
                 pages: workspacePages,
                 activePageId: currentActivePageId,
                 onSwitchPage: handleSwitchPage,
@@ -52097,7 +52064,9 @@ var DashboardStageInner = function DashboardStageInner(_ref3) {
                 onRenamePage: handleRenamePage,
                 onDeletePage: handleDeletePage,
                 onReorderPages: handleReorderPages,
-                editMode: !previewMode
+                editMode: !previewMode,
+                scrollableEnabled: getRootScrollable(),
+                onScrollableChange: popout ? null : handleScrollableChange
               }), /*#__PURE__*/jsxRuntime.jsxs("div", {
                 className: "flex flex-row flex-1 min-h-0 overflow-hidden",
                 children: [sidebarEnabled && !popout && /*#__PURE__*/jsxRuntime.jsx(PinnedSidebar, {