@noya-app/noya-designsystem 0.1.19 → 0.1.20

package/dist/index.mjs

@@ -6343,11 +6343,21 @@ var WorkspaceLayout = forwardRef18(function WorkspaceLayout2({
   onChangeLayoutState,
   leftSidebarInitialSize = 280,
   rightSidebarInitialSize = 400,
-  leftSidebarCanResize = false
+  leftSidebarMinSize,
+  rightSidebarMinSize,
+  leftSidebarCanResize = false,
+  id,
+  className,
+  style: style3
 }, forwardedRef) {
   const windowSize = useWindowSize();
-  const leftSidebarPercentage = leftSidebarInitialSize / windowSize.width * 100;
-  const rightSidebarPercentage = rightSidebarInitialSize / windowSize.width * 100;
+  function getPercentage(size2) {
+    return typeof size2 === "string" ? parseFloat(size2) : size2 / windowSize.width * 100;
+  }
+  const leftSidebarPercentage = getPercentage(leftSidebarInitialSize);
+  const rightSidebarPercentage = getPercentage(rightSidebarInitialSize);
+  const leftSidebarMinPercentage = leftSidebarMinSize !== void 0 ? getPercentage(leftSidebarMinSize) : void 0;
+  const rightSidebarMinPercentage = rightSidebarMinSize !== void 0 ? getPercentage(rightSidebarMinSize) : void 0;
   const panelGroupRef = useRef20(null);
   const leftSidebarRef = useRef20(null);
   const rightSidebarRef = useRef20(null);
@@ -6409,82 +6419,97 @@ var WorkspaceLayout = forwardRef18(function WorkspaceLayout2({
       }
     }
   });
-  return /* @__PURE__ */ React47.createElement(Stack.H, { flex: "1" }, /* @__PURE__ */ React47.createElement(
-    PanelGroup,
+  const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
+  return /* @__PURE__ */ React47.createElement(
+    "div",
     {
-      ref: panelGroupRef,
-      id: EDITOR_PANEL_GROUP_ID,
-      direction: "horizontal",
-      autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
-      style: { flex: "1" }
-    },
-    hasLeftSidebar && /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
-      Panel,
-      {
-        id: LEFT_SIDEBAR_ID,
-        order: 1,
-        ref: leftSidebarRef,
-        defaultSize: leftSidebarPercentage,
-        minSize: leftSidebarPercentage,
-        ...!leftSidebarCanResize && { maxSize: leftSidebarPercentage },
-        collapsible: true,
-        style: {
-          display: "flex",
-          flexDirection: "row"
-        }
-      },
-      leftPanelContent
-    ), /* @__PURE__ */ React47.createElement(
-      PanelResizeHandle,
-      {
-        style: {
-          cursor: "col-resize",
-          width: "1px",
-          height: "100%",
-          backgroundColor: theme.colors.divider
-        }
+      id,
+      className,
+      style: {
+        backgroundColor: theme.colors.canvas.background,
+        display: "flex",
+        flexDirection: "row",
+        ...style3
       }
-    )),
+    },
     /* @__PURE__ */ React47.createElement(
-      Panel,
+      PanelGroup,
       {
-        id: CONTENT_AREA_ID,
-        order: 2,
-        minSize: 10,
-        style: {
-          display: "flex",
-          flexDirection: "row"
-        }
+        ref: panelGroupRef,
+        id: EDITOR_PANEL_GROUP_ID,
+        direction: "horizontal",
+        autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0,
+        style: { flex: "1" }
       },
-      centerPanelContent
-    ),
-    hasRightSidebar && /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
-      PanelResizeHandle,
-      {
-        style: {
-          cursor: "col-resize",
-          width: "1px",
-          height: "100%",
-          backgroundColor: theme.colors.divider
+      hasLeftSidebar && /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
+        Panel,
+        {
+          id: LEFT_SIDEBAR_ID,
+          order: 1,
+          ref: leftSidebarRef,
+          defaultSize: leftSidebarPercentage,
+          minSize: leftSidebarMinPercentage ?? leftSidebarPercentage,
+          ...!leftSidebarCanResize && { maxSize: leftSidebarPercentage },
+          collapsible: true,
+          style: {
+            display: "flex",
+            flexDirection: "row"
+          }
+        },
+        leftPanelContent
+      ), /* @__PURE__ */ React47.createElement(
+        PanelResizeHandle,
+        {
+          style: {
+            cursor: "col-resize",
+            width: "1px",
+            height: "100%",
+            backgroundColor: theme.colors.divider
+          }
         }
-      }
-    ), /* @__PURE__ */ React47.createElement(
-      Panel,
-      {
-        id: RIGHT_SIDEBAR_ID,
-        order: 3,
-        ref: rightSidebarRef,
-        minSize: rightSidebarPercentage,
-        defaultSize: rightSidebarPercentage,
-        collapsible: true,
-        style: {
-          display: "flex",
-          flexDirection: "row"
+      )),
+      /* @__PURE__ */ React47.createElement(
+        Panel,
+        {
+          id: CONTENT_AREA_ID,
+          order: 2,
+          defaultSize: centerPanelPercentage,
+          minSize: 10,
+          style: {
+            display: "flex",
+            flexDirection: "row"
+          }
+        },
+        centerPanelContent
+      ),
+      hasRightSidebar && /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
+        PanelResizeHandle,
+        {
+          style: {
+            cursor: "col-resize",
+            width: "1px",
+            height: "100%",
+            backgroundColor: theme.colors.divider
+          }
         }
-      },
-      rightPanelContent
-    ))
-  ));
+      ), /* @__PURE__ */ React47.createElement(
+        Panel,
+        {
+          id: RIGHT_SIDEBAR_ID,
+          order: 3,
+          ref: rightSidebarRef,
+          minSize: rightSidebarMinPercentage ?? rightSidebarPercentage,
+          defaultSize: rightSidebarPercentage,
+          collapsible: true,
+          style: {
+            display: "flex",
+            flexDirection: "row"
+          }
+        },
+        rightPanelContent
+      ))
+    )
+  );
 });
 
 // src/hooks/usePlatform.ts