@trops/dash-core 0.1.35 → 0.1.37

package/dist/index.js

@@ -7931,7 +7931,7 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
       }), selectedWidget.packageDescription && /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "mb-2",
         children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
-          padding: false,
+          padding: "py-2",
           className: "text-sm",
           children: selectedWidget.packageDescription
         })
@@ -8244,7 +8244,7 @@ var EnhancedWidgetDropdown = function EnhancedWidgetDropdown(_ref) {
                       }), selectedWidget.description && /*#__PURE__*/jsxRuntime.jsx("div", {
                         className: "mb-2",
                         children: /*#__PURE__*/jsxRuntime.jsx(DashReact.Paragraph, {
-                          padding: false,
+                          padding: "py-2",
                           className: "text-sm",
                           children: selectedWidget.description
                         })
@@ -30695,7 +30695,11 @@ var DashboardStage = function DashboardStage(_ref) {
     _ref$preview = _ref.preview,
     preview = _ref$preview === void 0 ? true : _ref$preview,
     _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? null : _ref$backgroundColor;
+    backgroundColor = _ref$backgroundColor === void 0 ? null : _ref$backgroundColor,
+    _ref$popout = _ref.popout,
+    popout = _ref$popout === void 0 ? false : _ref$popout,
+    _ref$popoutWorkspaceI = _ref.popoutWorkspaceId,
+    popoutWorkspaceId = _ref$popoutWorkspaceI === void 0 ? null : _ref$popoutWorkspaceI;
   return /*#__PURE__*/jsxRuntime.jsx(React.Profiler, {
     id: "myapp",
     onRender: function onRender() {},
@@ -30708,7 +30712,9 @@ var DashboardStage = function DashboardStage(_ref) {
         credentials: credentials,
         workspace: workspace,
         preview: preview,
-        backgroundColor: backgroundColor
+        backgroundColor: backgroundColor,
+        popout: popout,
+        popoutWorkspaceId: popoutWorkspaceId
       })
     })
   });
@@ -30722,6 +30728,10 @@ var DashboardStageInner = function DashboardStageInner(_ref2) {
     _ref2$preview = _ref2.preview,
     preview = _ref2$preview === void 0 ? true : _ref2$preview;
     _ref2.backgroundColor;
+    var _ref2$popout = _ref2.popout,
+    popout = _ref2$popout === void 0 ? false : _ref2$popout,
+    _ref2$popoutWorkspace = _ref2.popoutWorkspaceId,
+    popoutWorkspaceId = _ref2$popoutWorkspace === void 0 ? null : _ref2$popoutWorkspace;
   var _useContext = React.useContext(DashboardContext),
     pub = _useContext.pub;
   var appContext = React.useContext(AppContext);
@@ -30836,6 +30846,41 @@ var DashboardStageInner = function DashboardStageInner(_ref2) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [workspace]);
 
+  // ─── Popout: auto-load workspace by ID ──────────────────────────
+  React.useEffect(function () {
+    if (!popout || popoutWorkspaceId === null) return;
+    if (workspaceConfig.length === 0) return;
+    var target = workspaceConfig.find(function (ws) {
+      return ws.id === popoutWorkspaceId;
+    });
+    if (target) {
+      var _window$mainApi;
+      handleOpenTab(target);
+      if ((_window$mainApi = window.mainApi) !== null && _window$mainApi !== void 0 && (_window$mainApi = _window$mainApi.popout) !== null && _window$mainApi !== void 0 && _window$mainApi.setTitle) {
+        window.mainApi.popout.setTitle(popoutWorkspaceId, target.name || "Untitled");
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [popout, popoutWorkspaceId, workspaceConfig]);
+
+  // ─── Popout: listen for workspace:saved broadcasts ─────────────
+  React.useEffect(function () {
+    var _window$mainApi2;
+    if (!popout) return;
+    if (!((_window$mainApi2 = window.mainApi) !== null && _window$mainApi2 !== void 0 && _window$mainApi2.on)) return;
+    var handler = function handler() {
+      loadWorkspaces();
+    };
+    window.mainApi.on("workspace:saved", handler);
+    return function () {
+      var _window$mainApi3;
+      if ((_window$mainApi3 = window.mainApi) !== null && _window$mainApi3 !== void 0 && _window$mainApi3.removeListener) {
+        window.mainApi.removeListener("workspace:saved", handler);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [popout]);
+
   // ─── Tab Handlers ─────────────────────────────────────────────────
 
   function handleOpenTab(workspaceItem) {
@@ -31211,6 +31256,12 @@ var DashboardStageInner = function DashboardStageInner(_ref2) {
   function handleToggleThemeVariant() {
     changeThemeVariant(themeVariant === "dark" ? "light" : "dark");
   }
+  function handlePopout() {
+    var _window$mainApi4;
+    if (workspaceSelected && (_window$mainApi4 = window.mainApi) !== null && _window$mainApi4 !== void 0 && (_window$mainApi4 = _window$mainApi4.popout) !== null && _window$mainApi4 !== void 0 && _window$mainApi4.open) {
+      window.mainApi.popout.open(workspaceSelected.id);
+    }
+  }
   return /*#__PURE__*/jsxRuntime.jsxs(LayoutContainer, {
     padding: false,
     space: false,
@@ -31223,7 +31274,7 @@ var DashboardStageInner = function DashboardStageInner(_ref2) {
       backend: reactDndHtml5Backend.HTML5Backend,
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-row flex-1 overflow-hidden",
-        children: [/*#__PURE__*/jsxRuntime.jsx(DashSidebar, {
+        children: [!popout && /*#__PURE__*/jsxRuntime.jsx(DashSidebar, {
           collapsed: sidebarCollapsed,
           onCollapsedChange: setSidebarCollapsed,
           workspaces: workspaceConfig,
@@ -31254,23 +31305,24 @@ var DashboardStageInner = function DashboardStageInner(_ref2) {
           children: workspaceSelected !== null ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [/*#__PURE__*/jsxRuntime.jsx(DashboardHeader, {
               workspace: workspaceSelected,
-              preview: previewMode,
+              preview: popout ? true : previewMode,
               onNameChange: handleWorkspaceNameChange,
-              onClickEdit: handleToggleEditMode,
-              onSaveChanges: handleClickSaveWorkspace,
+              onClickEdit: popout ? null : handleToggleEditMode,
+              onPopout: popout ? null : handlePopout,
+              onSaveChanges: popout ? null : handleClickSaveWorkspace,
               menuItems: menuItems,
               themes: themes || {},
-              onFolderChange: handleWorkspaceFolderChange,
-              onThemeChange: handleWorkspaceThemeChange,
+              onFolderChange: popout ? null : handleWorkspaceFolderChange,
+              onThemeChange: popout ? null : handleWorkspaceThemeChange,
               scrollableEnabled: getRootScrollable(),
-              onScrollableChange: handleScrollableChange
+              onScrollableChange: popout ? null : handleScrollableChange
             }), /*#__PURE__*/jsxRuntime.jsx(DashboardThemeProvider, {
               themeKey: workspaceSelected === null || workspaceSelected === void 0 ? void 0 : workspaceSelected.themeKey,
               children: /*#__PURE__*/jsxRuntime.jsx("div", {
-                className: "flex flex-col w-full flex-1 ".concat(previewMode === true ? "overflow-y-auto" : "overflow-clip"),
+                className: "flex flex-col w-full flex-1 ".concat(popout || previewMode === true ? "overflow-y-auto" : "overflow-clip"),
                 children: renderComponent(workspaceSelected)
               })
-            }), /*#__PURE__*/jsxRuntime.jsx(DashTabBar, {
+            }), !popout && /*#__PURE__*/jsxRuntime.jsx(DashTabBar, {
               tabs: openTabs,
               activeTabId: activeTabId,
               onSwitchTab: handleSwitchTab,
@@ -31283,9 +31335,9 @@ var DashboardStageInner = function DashboardStageInner(_ref2) {
                 icon: "clone",
                 className: "h-12 w-12"
               }),
-              title: "No dashboards open",
-              description: "Press \u2318K to search dashboards, or create a new one.",
-              children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+              title: popout ? "Dashboard not found" : "No dashboards open",
+              description: popout ? "The requested dashboard could not be loaded." : "Press \u2318K to search dashboards, or create a new one.",
+              children: !popout && /*#__PURE__*/jsxRuntime.jsxs("div", {
                 className: "flex flex-row gap-2",
                 children: [/*#__PURE__*/jsxRuntime.jsx(DashReact.ButtonIcon, {
                   icon: "magnifying-glass",
@@ -31303,51 +31355,53 @@ var DashboardStageInner = function DashboardStageInner(_ref2) {
               })
             })
           })
-        }), !previewMode && workspaceSelected && /*#__PURE__*/jsxRuntime.jsx(WidgetSidebar, {
+        }), !popout && !previewMode && workspaceSelected && /*#__PURE__*/jsxRuntime.jsx(WidgetSidebar, {
           collapsed: widgetSidebarCollapsed,
           onCollapsedChange: setWidgetSidebarCollapsed
         })]
-      }), /*#__PURE__*/jsxRuntime.jsx(AppSettingsModal, {
-        isOpen: isAppSettingsOpen,
-        setIsOpen: setIsAppSettingsOpen,
-        initialSection: appSettingsInitialSection,
-        workspaces: workspaceConfig,
-        menuItems: menuItems,
-        dashApi: dashApi,
-        credentials: credentials,
-        onReloadWorkspaces: loadWorkspaces,
-        onReloadMenuItems: loadMenuItems,
-        onOpenThemeEditor: function onOpenThemeEditor() {
-          setIsAppSettingsOpen(false);
-          setIsThemeManagerOpen(true);
-        }
-      }), /*#__PURE__*/jsxRuntime.jsx(ThemeManagerModal, {
-        open: isThemeManagerOpen,
-        setIsOpen: function setIsOpen() {
-          return setIsThemeManagerOpen(!isThemeManagerOpen);
-        },
-        onSave: function onSave(themeKey) {
-          changeCurrentTheme(themeKey);
-          setIsThemeManagerOpen(function () {
-            return false;
-          });
-        }
-      }), /*#__PURE__*/jsxRuntime.jsx(DashboardLoaderModal, {
-        open: isDashboardLoaderOpen,
-        setIsOpen: setIsDashboardLoaderOpen,
-        workspaces: workspaceConfig,
-        onSelecDashboard: handleSelectLoadDashboard,
-        onClose: function onClose() {
-          return handleCloseDashboardLoader();
-        }
-      }), /*#__PURE__*/jsxRuntime.jsx(LayoutManagerModal, {
-        open: isLayoutPickerOpen,
-        setIsOpen: setIsLayoutPickerOpen,
-        onCreateWorkspace: handleCreateFromTemplate,
-        menuItems: menuItems,
-        onSaveMenuItem: handleSaveNewMenuItem
+      }), !popout && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(AppSettingsModal, {
+          isOpen: isAppSettingsOpen,
+          setIsOpen: setIsAppSettingsOpen,
+          initialSection: appSettingsInitialSection,
+          workspaces: workspaceConfig,
+          menuItems: menuItems,
+          dashApi: dashApi,
+          credentials: credentials,
+          onReloadWorkspaces: loadWorkspaces,
+          onReloadMenuItems: loadMenuItems,
+          onOpenThemeEditor: function onOpenThemeEditor() {
+            setIsAppSettingsOpen(false);
+            setIsThemeManagerOpen(true);
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(ThemeManagerModal, {
+          open: isThemeManagerOpen,
+          setIsOpen: function setIsOpen() {
+            return setIsThemeManagerOpen(!isThemeManagerOpen);
+          },
+          onSave: function onSave(themeKey) {
+            changeCurrentTheme(themeKey);
+            setIsThemeManagerOpen(function () {
+              return false;
+            });
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(DashboardLoaderModal, {
+          open: isDashboardLoaderOpen,
+          setIsOpen: setIsDashboardLoaderOpen,
+          workspaces: workspaceConfig,
+          onSelecDashboard: handleSelectLoadDashboard,
+          onClose: function onClose() {
+            return handleCloseDashboardLoader();
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(LayoutManagerModal, {
+          open: isLayoutPickerOpen,
+          setIsOpen: setIsLayoutPickerOpen,
+          onCreateWorkspace: handleCreateFromTemplate,
+          menuItems: menuItems,
+          onSaveMenuItem: handleSaveNewMenuItem
+        })]
       })]
-    }), /*#__PURE__*/jsxRuntime.jsx(DashCommandPalette, {
+    }), !popout && /*#__PURE__*/jsxRuntime.jsx(DashCommandPalette, {
       isOpen: isCommandPaletteOpen,
       setIsOpen: setIsCommandPaletteOpen,
       workspaces: workspaceConfig,
@@ -31480,6 +31534,8 @@ var DashboardHeader = function DashboardHeader(_ref) {
     preview = _ref.preview,
     _ref$onClickEdit = _ref.onClickEdit,
     onClickEdit = _ref$onClickEdit === void 0 ? null : _ref$onClickEdit,
+    _ref$onPopout = _ref.onPopout,
+    onPopout = _ref$onPopout === void 0 ? null : _ref$onPopout,
     onNameChange = _ref.onNameChange,
     _ref$onSaveChanges = _ref.onSaveChanges,
     onSaveChanges = _ref$onSaveChanges === void 0 ? null : _ref$onSaveChanges,
@@ -31519,10 +31575,17 @@ var DashboardHeader = function DashboardHeader(_ref) {
         }),
         padding: false,
         className: "font-bold text-base"
-      }), onClickEdit !== null && /*#__PURE__*/jsxRuntime.jsx(DashReact.ButtonIcon, {
-        icon: "pencil",
-        onClick: onClickEdit,
-        hoverBackgroundColor: "hover:bg-indigo-700"
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-row items-center gap-1",
+        children: [onPopout !== null && /*#__PURE__*/jsxRuntime.jsx(DashReact.ButtonIcon, {
+          icon: "arrow-up-right-from-square",
+          onClick: onPopout,
+          hoverBackgroundColor: "hover:bg-indigo-700"
+        }), onClickEdit !== null && /*#__PURE__*/jsxRuntime.jsx(DashReact.ButtonIcon, {
+          icon: "pencil",
+          onClick: onClickEdit,
+          hoverBackgroundColor: "hover:bg-indigo-700"
+        })]
       })]
     }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {