@noya-app/noya-designsystem 0.1.18 → 0.1.20

package/.turbo/turbo-build.log

@@ -5,13 +5,13 @@
 CLI Target: esnext
 CJS Build start
 ESM Build start
-CJS dist/index.js     226.61 KB
-CJS dist/index.js.map 457.18 KB
-CJS ⚡️ Build success in 151ms
-ESM dist/index.mjs     208.82 KB
-ESM dist/index.mjs.map 457.30 KB
-ESM ⚡️ Build success in 147ms
 DTS Build start
-DTS ⚡️ Build success in 10168ms
-DTS dist/index.d.ts  60.18 KB
-DTS dist/index.d.mts 60.18 KB
+CJS dist/index.js     227.57 KB
+CJS dist/index.js.map 458.94 KB
+CJS ⚡️ Build success in 249ms
+ESM dist/index.mjs     209.78 KB
+ESM dist/index.mjs.map 459.06 KB
+ESM ⚡️ Build success in 252ms
+DTS ⚡️ Build success in 9569ms
+DTS dist/index.d.ts  60.59 KB
+DTS dist/index.d.mts 60.59 KB

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @noya-app/noya-designsystem
 
+## 0.1.20
+
+### Patch Changes
+
+- 7306000: Improve embedded apis
+- 5f3843e: Improve workspace sizing
+
+## 0.1.19
+
+### Patch Changes
+
+- 1114573: Don't autosave workspace layout by default
+
 ## 0.1.18
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1075,9 +1075,22 @@ interface Props$1 {
     hasRightSidebar?: boolean;
     hasLeftSidebar?: boolean;
     onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
-    leftSidebarInitialSize?: number;
-    rightSidebarInitialSize?: number;
     leftSidebarCanResize?: boolean;
+    id?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+    /**
+     * Accepts a number (px) or % string (e.g. "50%").
+     * Use % to avoid flicker server-rendering.
+     */
+    leftSidebarInitialSize?: number | string;
+    leftSidebarMinSize?: number | string;
+    /**
+     * Accepts a number (px) or % string (e.g. "50%").
+     * Use % to avoid flicker server-rendering.
+     */
+    rightSidebarInitialSize?: number | string;
+    rightSidebarMinSize?: number | string;
 }
 type IWorkspaceLayout = {
     setLeftSidebarExpanded: (expanded: boolean) => void;

package/dist/index.d.ts

@@ -1075,9 +1075,22 @@ interface Props$1 {
     hasRightSidebar?: boolean;
     hasLeftSidebar?: boolean;
     onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
-    leftSidebarInitialSize?: number;
-    rightSidebarInitialSize?: number;
     leftSidebarCanResize?: boolean;
+    id?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+    /**
+     * Accepts a number (px) or % string (e.g. "50%").
+     * Use % to avoid flicker server-rendering.
+     */
+    leftSidebarInitialSize?: number | string;
+    leftSidebarMinSize?: number | string;
+    /**
+     * Accepts a number (px) or % string (e.g. "50%").
+     * Use % to avoid flicker server-rendering.
+     */
+    rightSidebarInitialSize?: number | string;
+    rightSidebarMinSize?: number | string;
 }
 type IWorkspaceLayout = {
     setLeftSidebarExpanded: (expanded: boolean) => void;

package/dist/index.js

@@ -6305,11 +6305,21 @@ var WorkspaceLayout = (0, import_react63.forwardRef)(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 = (0, import_react63.useRef)(null);
   const leftSidebarRef = (0, import_react63.useRef)(null);
   const rightSidebarRef = (0, import_react63.useRef)(null);
@@ -6371,82 +6381,97 @@ var WorkspaceLayout = (0, import_react63.forwardRef)(function WorkspaceLayout2({
       }
     }
   });
-  return /* @__PURE__ */ import_react63.default.createElement(Stack.H, { flex: "1" }, /* @__PURE__ */ import_react63.default.createElement(
-    import_react_resizable_panels.PanelGroup,
+  const centerPanelPercentage = 100 - (leftPanelContent ? leftSidebarPercentage : 0) - (rightPanelContent ? rightSidebarPercentage : 0);
+  return /* @__PURE__ */ import_react63.default.createElement(
+    "div",
     {
-      ref: panelGroupRef,
-      id: EDITOR_PANEL_GROUP_ID,
-      direction: "horizontal",
-      autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : EDITOR_PANEL_GROUP_ID,
-      style: { flex: "1" }
-    },
-    hasLeftSidebar && /* @__PURE__ */ import_react63.default.createElement(import_react63.default.Fragment, null, /* @__PURE__ */ import_react63.default.createElement(
-      import_react_resizable_panels.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__ */ import_react63.default.createElement(
-      import_react_resizable_panels.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__ */ import_react63.default.createElement(
-      import_react_resizable_panels.Panel,
+      import_react_resizable_panels.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__ */ import_react63.default.createElement(import_react63.default.Fragment, null, /* @__PURE__ */ import_react63.default.createElement(
-      import_react_resizable_panels.PanelResizeHandle,
-      {
-        style: {
-          cursor: "col-resize",
-          width: "1px",
-          height: "100%",
-          backgroundColor: theme.colors.divider
+      hasLeftSidebar && /* @__PURE__ */ import_react63.default.createElement(import_react63.default.Fragment, null, /* @__PURE__ */ import_react63.default.createElement(
+        import_react_resizable_panels.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__ */ import_react63.default.createElement(
+        import_react_resizable_panels.PanelResizeHandle,
+        {
+          style: {
+            cursor: "col-resize",
+            width: "1px",
+            height: "100%",
+            backgroundColor: theme.colors.divider
+          }
         }
-      }
-    ), /* @__PURE__ */ import_react63.default.createElement(
-      import_react_resizable_panels.Panel,
-      {
-        id: RIGHT_SIDEBAR_ID,
-        order: 3,
-        ref: rightSidebarRef,
-        minSize: rightSidebarPercentage,
-        defaultSize: rightSidebarPercentage,
-        collapsible: true,
-        style: {
-          display: "flex",
-          flexDirection: "row"
+      )),
+      /* @__PURE__ */ import_react63.default.createElement(
+        import_react_resizable_panels.Panel,
+        {
+          id: CONTENT_AREA_ID,
+          order: 2,
+          defaultSize: centerPanelPercentage,
+          minSize: 10,
+          style: {
+            display: "flex",
+            flexDirection: "row"
+          }
+        },
+        centerPanelContent
+      ),
+      hasRightSidebar && /* @__PURE__ */ import_react63.default.createElement(import_react63.default.Fragment, null, /* @__PURE__ */ import_react63.default.createElement(
+        import_react_resizable_panels.PanelResizeHandle,
+        {
+          style: {
+            cursor: "col-resize",
+            width: "1px",
+            height: "100%",
+            backgroundColor: theme.colors.divider
+          }
         }
-      },
-      rightPanelContent
-    ))
-  ));
+      ), /* @__PURE__ */ import_react63.default.createElement(
+        import_react_resizable_panels.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