@noya-app/noya-designsystem 0.1.19 → 0.1.21

package/.turbo/turbo-build.log

@@ -5,13 +5,13 @@
 CLI Target: esnext
 CJS Build start
 ESM Build start
-CJS dist/index.js     226.60 KB
-CJS dist/index.js.map 457.17 KB
-CJS ⚡️ Build success in 94ms
-ESM dist/index.mjs     208.81 KB
-ESM dist/index.mjs.map 457.29 KB
-ESM ⚡️ Build success in 94ms
+ESM dist/index.mjs     209.89 KB
+ESM dist/index.mjs.map 459.25 KB
+ESM ⚡️ Build success in 295ms
+CJS dist/index.js     227.68 KB
+CJS dist/index.js.map 459.13 KB
+CJS ⚡️ Build success in 296ms
 DTS Build start
-DTS ⚡️ Build success in 9611ms
-DTS dist/index.d.ts  60.18 KB
-DTS dist/index.d.mts 60.18 KB
+DTS ⚡️ Build success in 12004ms
+DTS dist/index.d.ts  60.59 KB
+DTS dist/index.d.mts 60.59 KB

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @noya-app/noya-designsystem
 
+## 0.1.21
+
+### Patch Changes
+
+- 57bf0c9: Improve pixel ratio, toolbar, details
+- dd8569c: Fix input styling
+
+## 0.1.20
+
+### Patch Changes
+
+- 7306000: Improve embedded apis
+- 5f3843e: Improve workspace sizing
+
 ## 0.1.19
 
 ### 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

@@ -788,7 +788,8 @@ var textStyles = {
     fontFamily: fonts.normal,
     fontSize: `${typeScale[6]}rem`,
     fontWeight: 400,
-    lineHeight: "1.4"
+    lineHeight: "19px"
+    // lineHeight: "1.4",
   },
   button: {
     fontFamily: fonts.normal,
@@ -2043,7 +2044,11 @@ var InputElement = (0, import_styled_components13.default)(TextInput_default)(({
     // },
   };
 });
-var InputFieldInput = (0, import_react32.forwardRef)(function InputFieldInput2(props, forwardedRef) {
+var InputFieldInput = (0, import_react32.forwardRef)(function InputFieldInput2({
+  textAlign,
+  variant,
+  ...rest
+}, forwardedRef) {
   const {
     labelPosition,
     labelSize,
@@ -2071,8 +2076,10 @@ var InputFieldInput = (0, import_react32.forwardRef)(function InputFieldInput2(p
       $hasLabel: hasLabel,
       $hasDropdown: hasDropdown,
       $size: size2,
+      $variant: variant,
+      $textAlign: textAlign,
       onFocusChange: handleFocusChange,
-      ...props
+      ...rest
     }
   );
 });
@@ -2597,15 +2604,15 @@ var ChipElement = import_styled_components16.default.span(({ theme, $colorScheme
     userSelect: "none",
     display: "inline-flex",
     alignItems: "center",
-    lineHeight: "1.4",
+    // lineHeight: "1.4",
+    lineHeight: "15px",
     whiteSpace: "pre",
     ...$size === "medium" ? {
       fontSize: "11px",
       padding: "4px 8px"
     } : {
       fontSize: "9px",
-      padding: "0px 4px",
-      lineHeight: "15px"
+      padding: "0px 4px"
     },
     ...$monospace && {
       fontFamily: theme.fonts.monospace
@@ -6305,11 +6312,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 +6388,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}` : void 0,
-      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