@noya-app/noya-designsystem 0.1.63 → 0.1.64

package/src/components/workspace/PanelWorkspaceLayout.tsx

@@ -1,5 +1,11 @@
-import { memoGeneric } from "@noya-app/react-utils";
-import React, { ComponentProps, useRef } from "react";
+"use client";
+
+import {
+  clientStorage,
+  memoGeneric,
+  usePersistentStateObject,
+} from "@noya-app/react-utils";
+import React, { useMemo, useRef } from "react";
 import {
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
@@ -7,19 +13,25 @@ import {
   PanelGroup,
   PanelResizeHandle,
 } from "react-resizable-panels";
+import { DividerVertical } from "../Divider";
 import {
   CONTENT_AREA_ID,
   EDITOR_PANEL_GROUP_ID,
   LEFT_SIDEBAR_ID,
   RIGHT_SIDEBAR_ID,
-  usePreservePanelSize,
-} from "../../hooks/usePreservePanelSize";
-import { cssVarNames } from "../../theme";
-import { DividerVertical } from "../Divider";
-import { MenuItem } from "../internal/Menu";
-import { ToolbarMenu } from "../Toolbar";
-import { Tooltip } from "../Tooltip";
-import { LayoutProps } from "./types";
+} from "./constants";
+import {
+  getInitialLayout,
+  getLayoutCollapsedState,
+  getLayoutIds,
+  getPropertyKey,
+  getStorageKey,
+  panelStorage,
+  setInitialLayout,
+  toPixelSize,
+} from "./panelStorage";
+import { LayoutProps, WorkspaceLayoutState } from "./types";
+import { VerticalTabMenu } from "./VerticalTabMenu";
 
 export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
   LeftTab extends string,
@@ -32,7 +44,6 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
   rightSidebarOptions,
   centerPanelPercentage,
   autoSavePrefix,
-  internalLayoutState,
   leftSidebarRef,
   rightSidebarRef,
   leftTabItems,
@@ -41,11 +52,59 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
   rightTabValue,
   onChangeLeftTab,
   onChangeRightTab,
-  handleChangeLayoutState,
 }: LayoutProps<LeftTab, RightTab>) {
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
 
-  usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
+  const hasLeftPanel = !!leftPanel;
+  const hasRightPanel = !!rightPanel;
+  const hasCenterPanel = !!centerPanel;
+
+  const autoSaveId = useMemo(() => {
+    return autoSavePrefix
+      ? `${autoSavePrefix}--v2--${EDITOR_PANEL_GROUP_ID}`
+      : Math.random().toString(36).substring(2, 15);
+  }, [autoSavePrefix]);
+
+  const layoutIds = getLayoutIds({
+    hasLeftPanel,
+    hasRightPanel,
+    hasCenterPanel,
+  });
+  const storageKey = getStorageKey(autoSaveId);
+  const propertyKey = getPropertyKey(layoutIds);
+
+  setInitialLayout({
+    storageKey,
+    propertyKey,
+    calculateLayout: () => {
+      return getInitialLayout({
+        layoutIds,
+        leftSidebarOptions,
+        rightSidebarOptions,
+        centerPanelPercentage,
+        hasLeftPanel,
+        hasRightPanel,
+        hasCenterPanel,
+      });
+    },
+  });
+
+  const [data, setData] = usePersistentStateObject<
+    WorkspaceLayoutState,
+    string
+  >(clientStorage, storageKey, {});
+
+  const layoutGroup = data?.[propertyKey];
+
+  const { leftSidebarCollapsed, rightSidebarCollapsed } = useMemo(() => {
+    return getLayoutCollapsedState({
+      layoutGroup,
+      propertyKey,
+      layoutIds,
+      hasLeftPanel,
+      hasRightPanel,
+    });
+  }, [layoutGroup, propertyKey, layoutIds, hasLeftPanel, hasRightPanel]);
 
   return (
     <PanelGroup
@@ -53,22 +112,29 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
       id={EDITOR_PANEL_GROUP_ID}
       className="flex-1"
       direction="horizontal"
-      autoSaveId={
-        autoSavePrefix
-          ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}`
-          : undefined
-      }
+      storage={panelStorage}
+      autoSaveId={autoSaveId}
+      onLayout={(layout) => {
+        setData((prev) => {
+          const newData = {
+            ...prev,
+            [propertyKey]: {
+              layout: layout.map((size) => toPixelSize(size)),
+              expandToSizes: prev?.[propertyKey]?.expandToSizes ?? {},
+            },
+          };
+          return newData;
+        });
+      }}
     >
       {leftPanel && (
         <>
-          {leftTabItems && (
+          {leftSidebarOptions.showTabs && leftTabItems && (
             <VerticalTabMenu
               tooltipSide="right"
               items={leftTabItems}
               activeValue={leftTabValue}
-              isSidebarCollapsed={
-                internalLayoutState?.leftSidebarCollapsed ?? false
-              }
+              isSidebarCollapsed={leftSidebarCollapsed}
               onChange={(value) => {
                 if (value === leftTabValue) {
                   if (leftSidebarRef.current?.isExpanded()) {
@@ -85,9 +151,9 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
               }}
             />
           )}
-          {leftTabItems && !internalLayoutState?.leftSidebarCollapsed && (
-            <DividerVertical className="h-full" />
-          )}
+          {leftSidebarOptions.showTabs &&
+            leftTabItems &&
+            !leftSidebarCollapsed && <DividerVertical className="h-full" />}
           <Panel
             id={LEFT_SIDEBAR_ID}
             className="relative"
@@ -103,7 +169,7 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
             }
             collapsible
           >
-            {internalLayoutState?.leftSidebarCollapsed ? null : leftPanel}
+            {leftSidebarCollapsed ? null : leftPanel}
           </Panel>
           <PanelResizeHandle className="cursor-col-resize w-px h-full bg-divider" />
         </>
@@ -135,19 +201,17 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
             }
             collapsible
           >
-            {internalLayoutState?.rightSidebarCollapsed ? null : rightPanel}
+            {rightSidebarCollapsed ? null : rightPanel}
           </Panel>
-          {rightTabItems && !internalLayoutState?.rightSidebarCollapsed && (
-            <DividerVertical className="h-full" />
-          )}
-          {rightTabItems && (
+          {rightSidebarOptions.showTabs &&
+            rightTabItems &&
+            !rightSidebarCollapsed && <DividerVertical className="h-full" />}
+          {rightSidebarOptions.showTabs && rightTabItems && (
             <VerticalTabMenu
               tooltipSide="left"
               items={rightTabItems}
               activeValue={rightTabValue}
-              isSidebarCollapsed={
-                internalLayoutState?.rightSidebarCollapsed ?? false
-              }
+              isSidebarCollapsed={rightSidebarCollapsed}
               onChange={(value) => {
                 if (value === rightTabValue) {
                   if (rightSidebarRef.current?.isExpanded()) {
@@ -169,34 +233,3 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
     </PanelGroup>
   );
 });
-
-function VerticalTabMenu<TabValue extends string>({
-  items,
-  activeValue,
-  isSidebarCollapsed,
-  onChange,
-  tooltipSide,
-}: {
-  items: MenuItem<TabValue>[];
-  activeValue: TabValue | undefined;
-  isSidebarCollapsed: boolean;
-  onChange: (value: TabValue) => void;
-  tooltipSide?: ComponentProps<typeof Tooltip>["side"];
-}) {
-  return (
-    <div
-      className="w-[47px] h-full bg-sidebar-background flex flex-col items-center py-3 gap-3"
-      style={{
-        [cssVarNames.colors.inputBackground]: "transparent",
-        [cssVarNames.colors.buttonBackground]: "transparent",
-      }}
-    >
-      <ToolbarMenu
-        items={items}
-        activeValue={isSidebarCollapsed ? undefined : activeValue}
-        onSelectMenuItem={onChange}
-        tooltipSide={tooltipSide}
-      />
-    </div>
-  );
-}

package/src/components/workspace/VerticalTabMenu.tsx

@@ -0,0 +1,36 @@
+import React, { ComponentProps } from "react";
+import { cssVarNames } from "../../theme";
+import { MenuItem } from "../internal/Menu";
+import { ToolbarMenu } from "../Toolbar";
+import { Tooltip } from "../Tooltip";
+
+export function VerticalTabMenu<TabValue extends string>({
+  items,
+  activeValue,
+  isSidebarCollapsed,
+  onChange,
+  tooltipSide,
+}: {
+  items: MenuItem<TabValue>[];
+  activeValue: TabValue | undefined;
+  isSidebarCollapsed: boolean;
+  onChange: (value: TabValue) => void;
+  tooltipSide?: ComponentProps<typeof Tooltip>["side"];
+}) {
+  return (
+    <div
+      className="w-[47px] h-full bg-sidebar-background flex flex-col items-center py-3 gap-3"
+      style={{
+        [cssVarNames.colors.inputBackground]: "transparent",
+        [cssVarNames.colors.buttonBackground]: "transparent",
+      }}
+    >
+      <ToolbarMenu
+        items={items}
+        activeValue={isSidebarCollapsed ? undefined : activeValue}
+        onSelectMenuItem={onChange}
+        tooltipSide={tooltipSide}
+      />
+    </div>
+  );
+}

package/src/components/workspace/WorkspaceLayout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import {
   forwardRefGeneric,
@@ -5,13 +7,7 @@ import {
   useSize,
   useWindowSize,
 } from "@noya-app/react-utils";
-import React, {
-  memo,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
+import React, { memo, useImperativeHandle, useMemo, useRef } from "react";
 import { cx } from "../../utils/classNames";
 import { MenuItem } from "../internal/Menu";
 import { DrawerWorkspaceLayout } from "./DrawerWorkspaceLayout";
@@ -19,7 +15,6 @@ import { PanelWorkspaceLayout } from "./PanelWorkspaceLayout";
 import { renderPanelChildren } from "./renderPanelChildren";
 import {
   LayoutProps,
-  PanelLayoutState,
   PercentageSidebarOptions,
   RenderPanel,
   SidebarRef,
@@ -55,7 +50,6 @@ export interface WorkspaceLayoutProps<
   sideType?: SideType;
   sideTypeBreakpoint?: number;
   detectSize?: DetectSizeType;
-  onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
 }
 
 export type WorkspaceLayoutRef = {
@@ -78,23 +72,24 @@ export type SideOptions = {
   minSize?: number | string;
   maxSize?: number | string;
   defaultCollapsed?: boolean;
+  showTabs?: boolean;
 };
 
 const defaultLeftTabItems: MenuItem<string>[] = [
   {
     title: "",
-    value: "default",
+    value: "defaultLeft",
     icon: "BorderLeftIcon",
-    tooltip: "Sidebar",
+    tooltip: "Left Sidebar",
   },
 ];
 
 const defaultRightTabItems: MenuItem<string>[] = [
   {
     title: "",
-    value: "default",
+    value: "defaultRight",
     icon: "BorderRightIcon",
-    tooltip: "Sidebar",
+    tooltip: "Right Sidebar",
   },
 ];
 
@@ -117,7 +112,6 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     style,
     toolbar,
     children,
-    onChangeLayoutState,
     sideType = "auto",
     sideTypeBreakpoint = 800,
     detectSize = "container",
@@ -129,6 +123,7 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
       style: leftStyle,
       className: leftClassName,
       defaultCollapsed: leftDefaultCollapsed = false,
+      showTabs: leftShowTabs = true,
     } = {},
     rightOptions: {
       minSize: rightMinSize = 200,
@@ -138,6 +133,7 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
       style: rightStyle,
       className: rightClassName,
       defaultCollapsed: rightDefaultCollapsed = false,
+      showTabs: rightShowTabs = true,
     } = {},
     theme,
   }: WorkspaceLayoutProps<LeftTab, RightTab>,
@@ -213,20 +209,6 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
       defaultValue: getFirstTabValue(rightTabItems, "" as RightTab),
     });
 
-  const [internalLayoutState, setInternalLayoutState] =
-    useState<PanelLayoutState | null>({
-      leftSidebarCollapsed: leftDefaultCollapsed,
-      rightSidebarCollapsed: rightDefaultCollapsed,
-    });
-
-  const handleChangeLayoutState = useCallback(
-    (state: PanelLayoutState) => {
-      setInternalLayoutState(state);
-      onChangeLayoutState?.(state);
-    },
-    [onChangeLayoutState]
-  );
-
   useImperativeHandle(forwardedRef, () => ({
     setLeftExpanded: (expanded: boolean) => {
       if (expanded) {
@@ -316,19 +298,43 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     <PanelInner className="bg-canvas-background">{children}</PanelInner>
   );
 
-  const leftSidebarOptions: PercentageSidebarOptions = {
-    minSize: leftSidebarMinPercentage,
-    maxSize: leftSidebarMaxPercentage,
-    initialSize: leftSidebarPercentage,
-    resizable: leftResizable,
-  };
+  const leftSidebarOptions: PercentageSidebarOptions = useMemo(
+    () => ({
+      minSize: leftSidebarMinPercentage,
+      maxSize: leftSidebarMaxPercentage,
+      initialSize: leftSidebarPercentage,
+      resizable: leftResizable,
+      defaultCollapsed: leftDefaultCollapsed,
+      showTabs: leftShowTabs,
+    }),
+    [
+      leftSidebarMinPercentage,
+      leftSidebarMaxPercentage,
+      leftSidebarPercentage,
+      leftResizable,
+      leftDefaultCollapsed,
+      leftShowTabs,
+    ]
+  );
 
-  const rightSidebarOptions: PercentageSidebarOptions = {
-    minSize: rightSidebarMinPercentage,
-    maxSize: rightSidebarMaxPercentage,
-    initialSize: rightSidebarPercentage,
-    resizable: rightResizable,
-  };
+  const rightSidebarOptions: PercentageSidebarOptions = useMemo(
+    () => ({
+      minSize: rightSidebarMinPercentage,
+      maxSize: rightSidebarMaxPercentage,
+      initialSize: rightSidebarPercentage,
+      resizable: rightResizable,
+      defaultCollapsed: rightDefaultCollapsed,
+      showTabs: rightShowTabs,
+    }),
+    [
+      rightSidebarMinPercentage,
+      rightSidebarMaxPercentage,
+      rightSidebarPercentage,
+      rightResizable,
+      rightDefaultCollapsed,
+      rightShowTabs,
+    ]
+  );
 
   const LayoutComponent =
     sideType === "panel"
@@ -374,10 +380,8 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
             rightSidebarOptions={rightSidebarOptions}
             centerPanelPercentage={centerPanelPercentage}
             autoSavePrefix={autoSavePrefix}
-            internalLayoutState={internalLayoutState}
             leftSidebarRef={leftSidebarRef}
             rightSidebarRef={rightSidebarRef}
-            handleChangeLayoutState={handleChangeLayoutState}
           />
         )}
       </div>

package/src/components/workspace/constants.ts

@@ -0,0 +1,4 @@
+export const EDITOR_PANEL_GROUP_ID = "editor-panel-group";
+export const LEFT_SIDEBAR_ID = "editor-1-left-sidebar";
+export const RIGHT_SIDEBAR_ID = "editor-3-right-sidebar";
+export const CONTENT_AREA_ID = "editor-2-content-area";

package/src/components/workspace/panelStorage.ts

@@ -0,0 +1,216 @@
+import { clientStorage, IClientStorage } from "@noya-app/react-utils";
+import { PanelGroupStorage } from "react-resizable-panels";
+import {
+  CONTENT_AREA_ID,
+  LEFT_SIDEBAR_ID,
+  RIGHT_SIDEBAR_ID,
+} from "./constants";
+import {
+  PercentageSidebarOptions,
+  WorkspaceLayoutGroup,
+  WorkspaceLayoutState,
+} from "./types";
+
+// Workspace sizes are stored as percentages (e.g. layout: [78.7224911972, 21.2775088028])
+// we need to convert them to pixels relative to the window width before storing
+// and convert them back to percentages when getting the item
+export const panelStorage: PanelGroupStorage = {
+  getItem: (name) => {
+    const item = clientStorage.getItem(name);
+
+    if (item) {
+      const parsed = JSON.parse(item);
+      const percentageSize = mapWorkspaceLayoutState(parsed, (size) =>
+        toPercentageSize(size)
+      );
+      const stringified = JSON.stringify(percentageSize);
+      // console.log("getItem", name, stringified);
+      return stringified;
+    }
+
+    return item;
+  },
+
+  setItem: (name, value) => {
+    const parsed = JSON.parse(value);
+    const pixelSize = mapWorkspaceLayoutState(parsed, (size) =>
+      toPixelSize(size)
+    );
+    // console.log("setItem", name, pixelSize);
+    clientStorage.setItem(name, JSON.stringify(pixelSize));
+  },
+};
+
+export const toPixelSize = (size: number, windowWidth = window.innerWidth) =>
+  Math.round((size * windowWidth) / 100);
+export const toPercentageSize = (
+  size: number,
+  windowWidth = window.innerWidth
+) => (size * 100) / windowWidth;
+
+export function mapWorkspaceLayoutState(
+  layout: WorkspaceLayoutState,
+  f: (size: number) => number
+): WorkspaceLayoutState {
+  return Object.fromEntries(
+    Object.entries(layout).map(
+      ([key, value]): [string, WorkspaceLayoutGroup] => {
+        const expandToSizes = Object.fromEntries(
+          Object.entries(value.expandToSizes).map(([key, value]) => [
+            key,
+            f(value),
+          ])
+        );
+
+        return [
+          key,
+          {
+            expandToSizes,
+            layout: value.layout.map(f),
+          },
+        ];
+      }
+    )
+  );
+}
+
+export function getLayoutIds({
+  hasLeftPanel,
+  hasRightPanel,
+  hasCenterPanel,
+}: {
+  hasLeftPanel: boolean;
+  hasRightPanel: boolean;
+  hasCenterPanel: boolean;
+}) {
+  return [
+    hasLeftPanel && LEFT_SIDEBAR_ID,
+    hasCenterPanel && CONTENT_AREA_ID,
+    hasRightPanel && RIGHT_SIDEBAR_ID,
+  ].flatMap((id) => (id ? [id] : []));
+}
+
+export function getPropertyKey(layoutIds: string[]) {
+  return layoutIds.sort().join(",");
+}
+
+export function getStorageKey(autoSaveId: string) {
+  return `react-resizable-panels:${autoSaveId}`;
+}
+
+export function getInitialLayout({
+  layoutIds,
+  leftSidebarOptions,
+  rightSidebarOptions,
+  centerPanelPercentage,
+  hasLeftPanel,
+  hasRightPanel,
+  hasCenterPanel,
+  windowWidth = window.innerWidth,
+}: {
+  layoutIds: string[];
+  leftSidebarOptions: PercentageSidebarOptions;
+  rightSidebarOptions: PercentageSidebarOptions;
+  centerPanelPercentage: number;
+  hasLeftPanel: boolean;
+  hasRightPanel: boolean;
+  hasCenterPanel: boolean;
+  windowWidth?: number;
+}) {
+  return layoutIds.map((id) => {
+    if (id === LEFT_SIDEBAR_ID && hasLeftPanel) {
+      return leftSidebarOptions.defaultCollapsed
+        ? 0
+        : toPixelSize(leftSidebarOptions.initialSize ?? 0, windowWidth);
+    } else if (id === RIGHT_SIDEBAR_ID && hasRightPanel) {
+      return rightSidebarOptions.defaultCollapsed
+        ? 0
+        : toPixelSize(rightSidebarOptions.initialSize ?? 0, windowWidth);
+    } else if (id === CONTENT_AREA_ID && hasCenterPanel) {
+      const shouldShowLeftSidebar =
+        hasLeftPanel && !leftSidebarOptions.defaultCollapsed;
+      const shouldShowRightSidebar =
+        hasRightPanel && !rightSidebarOptions.defaultCollapsed;
+
+      if (!shouldShowLeftSidebar && !shouldShowRightSidebar) {
+        return toPixelSize(100, windowWidth);
+      }
+
+      return toPixelSize(centerPanelPercentage, windowWidth);
+    }
+    return 0;
+  });
+}
+
+export function setInitialLayout({
+  storageKey,
+  propertyKey,
+  calculateLayout,
+  storage = clientStorage,
+}: {
+  storageKey: string;
+  propertyKey: string;
+  calculateLayout: () => number[];
+  storage?: IClientStorage;
+}) {
+  const savedLayout = storage.getItem(storageKey);
+
+  if (!savedLayout) {
+    const layoutObject: WorkspaceLayoutState = {
+      [propertyKey]: {
+        layout: calculateLayout(),
+        expandToSizes: {},
+      },
+    };
+
+    storage.setItem(storageKey, JSON.stringify(layoutObject));
+  } else {
+    let parsedLayout: WorkspaceLayoutState;
+
+    try {
+      parsedLayout = JSON.parse(savedLayout);
+    } catch (error) {
+      console.error(error);
+      return;
+    }
+
+    if (!(propertyKey in parsedLayout)) {
+      const layoutObject: WorkspaceLayoutState = {
+        ...parsedLayout,
+        [propertyKey]: {
+          layout: calculateLayout(),
+          expandToSizes: {},
+        },
+      };
+
+      storage.setItem(storageKey, JSON.stringify(layoutObject));
+    }
+  }
+}
+
+export function getLayoutCollapsedState({
+  layoutGroup,
+  layoutIds,
+  hasLeftPanel,
+  hasRightPanel,
+}: {
+  layoutGroup: WorkspaceLayoutGroup;
+  propertyKey: string;
+  layoutIds: string[];
+  hasLeftPanel: boolean;
+  hasRightPanel: boolean;
+}) {
+  const propertySize = Object.fromEntries(
+    layoutIds.map((id, index) => [id, layoutGroup.layout?.[index]])
+  );
+
+  const leftSize = propertySize?.[LEFT_SIDEBAR_ID];
+  const leftSidebarCollapsed = hasLeftPanel && leftSize === 0 ? true : false;
+  const rightSize = propertySize?.[RIGHT_SIDEBAR_ID];
+  const rightSidebarCollapsed = hasRightPanel && rightSize === 0 ? true : false;
+
+  return {
+    leftSidebarCollapsed,
+    rightSidebarCollapsed,
+  };
+}

package/src/components/workspace/types.ts

@@ -12,6 +12,8 @@ export type PercentageSidebarOptions = {
   maxSize?: number;
   initialSize?: number;
   resizable?: boolean;
+  defaultCollapsed?: boolean;
+  showTabs?: boolean;
 };
 
 export type PanelLayoutState = {
@@ -40,8 +42,13 @@ export type LayoutProps<
   rightSidebarOptions: PercentageSidebarOptions;
   centerPanelPercentage: number;
   autoSavePrefix?: string;
-  internalLayoutState: PanelLayoutState | null;
-  leftSidebarRef: React.RefObject<SidebarRef>;
-  rightSidebarRef: React.RefObject<SidebarRef>;
-  handleChangeLayoutState: (state: PanelLayoutState) => void;
+  leftSidebarRef: React.RefObject<SidebarRef | null>;
+  rightSidebarRef: React.RefObject<SidebarRef | null>;
 };
+
+export type WorkspaceLayoutGroup = {
+  expandToSizes: Record<string, number>;
+  layout: number[];
+};
+
+export type WorkspaceLayoutState = Record<string, WorkspaceLayoutGroup>;