@noya-app/noya-designsystem 0.1.81 → 0.1.83

package/src/components/workspace/PanelWorkspaceLayout.tsx

@@ -9,15 +9,14 @@ import {
   PanelGroup,
   PanelResizeHandle,
 } from "../resizablePanels";
-import { DividerVertical } from "../Divider";
 import {
   CONTENT_AREA_ID,
   EDITOR_PANEL_GROUP_ID,
   LEFT_SIDEBAR_ID,
   RIGHT_SIDEBAR_ID,
 } from "./constants";
+import { HorizontalTabBar } from "./HorizontalTabBar";
 import { LayoutProps } from "./types";
-import { VerticalTabMenu } from "./VerticalTabMenu";
 
 export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
   LeftTab extends string,
@@ -37,17 +36,21 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
   rightTabValue,
   onChangeLeftTab,
   onChangeRightTab,
-  compactDrawerMenu,
+  onLeftSidebarStateChange,
+  onRightSidebarStateChange,
+  shouldAutoSave = true,
 }: LayoutProps<LeftTab, RightTab>) {
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const autoSaveId = useMemo(() => {
+    if (!shouldAutoSave) return undefined;
     return autoSavePrefix
-      ? `${autoSavePrefix}--v3--${EDITOR_PANEL_GROUP_ID}`
+      ? `${autoSavePrefix}--v5--${EDITOR_PANEL_GROUP_ID}`
       : Math.random().toString(36).substring(2, 15);
-  }, [autoSavePrefix]);
+  }, [autoSavePrefix, shouldAutoSave]);
 
-  // Track collapsed state based on layout changes
+  // Track collapsed state for rendering purposes (PanelGroup owns the source of truth)
   const [leftSidebarCollapsed, setLeftSidebarCollapsed] = useState(
     leftSidebarOptions.defaultCollapsed ?? false
   );
@@ -55,20 +58,72 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
     rightSidebarOptions.defaultCollapsed ?? false
   );
 
+  // Track previous sidebar state to avoid redundant callbacks
+  const prevLeftSidebarState = useRef<{ width: number; collapsed: boolean } | null>(null);
+  const prevRightSidebarState = useRef<{ width: number; collapsed: boolean } | null>(null);
+
   const handleLayoutChange = useCallback(
     (sizes: number[]) => {
       // Update collapsed state based on sizes
       const leftIndex = leftPanel ? 0 : -1;
       const rightIndex = rightPanel ? (leftPanel ? 2 : 1) : -1;
 
+      // Get container width for pixel calculation using ref
+      const containerWidth = containerRef.current?.clientWidth ?? 0;
+
+      // Detect if sizes are in pixels or percentages by checking if they sum to ~100 or ~containerWidth
+      const sizesSum = sizes.reduce((a, b) => a + b, 0);
+
+      // Skip if sizesSum is too small compared to containerWidth - this indicates incomplete data
+      // during initial render (react-resizable-panels may report partial sizes)
+      if (containerWidth > 0 && sizesSum < containerWidth * 0.5 && sizesSum > 100) {
+        return;
+      }
+
+      const isPixels = containerWidth > 0 && Math.abs(sizesSum - containerWidth) < Math.abs(sizesSum - 100);
+
       if (leftIndex >= 0) {
-        setLeftSidebarCollapsed(sizes[leftIndex] === 0);
+        const collapsed = sizes[leftIndex] === 0;
+        setLeftSidebarCollapsed(collapsed);
+
+        // Calculate width in pixels - handle both percentage (0-100) and pixel formats
+        const widthPixels = isPixels
+          ? Math.round(sizes[leftIndex])
+          : containerWidth > 0
+            ? Math.round((sizes[leftIndex] / 100) * containerWidth)
+            : 0;
+
+        // Only call callback if state actually changed
+        if (
+          prevLeftSidebarState.current?.width !== widthPixels ||
+          prevLeftSidebarState.current?.collapsed !== collapsed
+        ) {
+          prevLeftSidebarState.current = { width: widthPixels, collapsed };
+          onLeftSidebarStateChange?.({ width: widthPixels, collapsed });
+        }
       }
       if (rightIndex >= 0) {
-        setRightSidebarCollapsed(sizes[rightIndex] === 0);
+        const collapsed = sizes[rightIndex] === 0;
+        setRightSidebarCollapsed(collapsed);
+
+        // Calculate width in pixels - handle both percentage (0-100) and pixel formats
+        const widthPixels = isPixels
+          ? Math.round(sizes[rightIndex])
+          : containerWidth > 0
+            ? Math.round((sizes[rightIndex] / 100) * containerWidth)
+            : 0;
+
+        // Only call callback if state actually changed
+        if (
+          prevRightSidebarState.current?.width !== widthPixels ||
+          prevRightSidebarState.current?.collapsed !== collapsed
+        ) {
+          prevRightSidebarState.current = { width: widthPixels, collapsed };
+          onRightSidebarStateChange?.({ width: widthPixels, collapsed });
+        }
       }
     },
-    [leftPanel, rightPanel]
+    [leftPanel, rightPanel, onLeftSidebarStateChange, onRightSidebarStateChange]
   );
 
   const handleLeftTabChange = useCallback(
@@ -107,39 +162,23 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
     [onChangeRightTab, rightSidebarRef, rightTabValue]
   );
 
-  const showLeftTabs =
-    !!leftSidebarOptions.showTabs &&
-    !!leftTabItems &&
-    // When compact drawer UI is enabled, only show the rail when the
-    // sidebar is collapsed (for large screens/panel layout).
-    (!compactDrawerMenu || leftSidebarCollapsed);
+  const showLeftTabs = !!leftSidebarOptions.showTabs && !!leftTabItems;
 
   return (
-    <PanelGroup
-      ref={panelGroupRef}
-      id={EDITOR_PANEL_GROUP_ID}
-      className="n-flex-1"
-      direction="horizontal"
-      autoSaveId={autoSaveId}
-      onLayout={handleLayoutChange}
-    >
+    <div ref={containerRef} className="n-flex n-flex-1">
+      <PanelGroup
+        ref={panelGroupRef}
+        id={EDITOR_PANEL_GROUP_ID}
+        className="n-flex-1"
+        direction="horizontal"
+        autoSaveId={autoSaveId}
+        onLayout={handleLayoutChange}
+      >
       {leftPanel && (
         <>
-          {showLeftTabs && (
-            <VerticalTabMenu
-              tooltipSide="right"
-              items={leftTabItems}
-              activeValue={leftTabValue}
-              isSidebarCollapsed={leftSidebarCollapsed}
-              onChange={handleLeftTabChange}
-            />
-          )}
-          {showLeftTabs && !leftSidebarCollapsed && (
-            <DividerVertical className="n-h-full" />
-          )}
           <Panel
             id={LEFT_SIDEBAR_ID}
-            className="n-relative"
+            className="n-relative n-workspace-sidebar"
             order={1}
             ref={leftSidebarRef as React.RefObject<ImperativePanelHandle>}
             defaultSize={leftSidebarOptions.initialSize}
@@ -153,9 +192,23 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
             collapsible
             defaultCollapsed={leftSidebarOptions.defaultCollapsed}
           >
-            {leftSidebarCollapsed ? null : leftPanel}
+            {leftSidebarCollapsed ? null : (
+              <div className="n-flex n-flex-col n-h-full">
+                {showLeftTabs && (
+                  <HorizontalTabBar
+                    items={leftTabItems}
+                    activeValue={leftTabValue}
+                    onChange={handleLeftTabChange}
+                  />
+                )}
+                <div className="n-flex-1 n-relative n-min-h-0">{leftPanel}</div>
+              </div>
+            )}
           </Panel>
-          <PanelResizeHandle index={0} className="n-cursor-col-resize n-w-px n-h-full n-bg-divider" />
+          <PanelResizeHandle
+            index={0}
+            className={`n-cursor-col-resize n-w-px n-h-full ${leftSidebarCollapsed ? "" : "n-bg-divider"}`}
+          />
         </>
       )}
       <Panel
@@ -167,10 +220,13 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
       </Panel>
       {rightPanel && (
         <>
-          <PanelResizeHandle index={1} className="n-cursor-col-resize n-w-px n-h-full n-bg-divider" />
+          <PanelResizeHandle
+            index={1}
+            className={`n-cursor-col-resize n-w-px n-h-full ${rightSidebarCollapsed ? "" : "n-bg-divider"}`}
+          />
           <Panel
             id={RIGHT_SIDEBAR_ID}
-            className="n-relative"
+            className="n-relative n-workspace-sidebar"
             order={3}
             ref={rightSidebarRef as React.RefObject<ImperativePanelHandle>}
             minSize={rightSidebarOptions.minSize}
@@ -184,22 +240,24 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
             collapsible
             defaultCollapsed={rightSidebarOptions.defaultCollapsed}
           >
-            {rightSidebarCollapsed ? null : rightPanel}
+            {rightSidebarCollapsed ? null : (
+              <div className="n-flex n-flex-col n-h-full">
+                {rightSidebarOptions.showTabs && rightTabItems && (
+                  <HorizontalTabBar
+                    items={rightTabItems}
+                    activeValue={rightTabValue}
+                    onChange={handleRightTabChange}
+                  />
+                )}
+                <div className="n-flex-1 n-relative n-min-h-0">
+                  {rightPanel}
+                </div>
+              </div>
+            )}
           </Panel>
-          {rightSidebarOptions.showTabs &&
-            rightTabItems &&
-            !rightSidebarCollapsed && <DividerVertical className="n-h-full" />}
-          {rightSidebarOptions.showTabs && rightTabItems && (
-            <VerticalTabMenu
-              tooltipSide="left"
-              items={rightTabItems}
-              activeValue={rightTabValue}
-              isSidebarCollapsed={rightSidebarCollapsed}
-              onChange={handleRightTabChange}
-            />
-          )}
         </>
       )}
-    </PanelGroup>
+      </PanelGroup>
+    </div>
   );
 });

package/src/components/workspace/WorkspaceLayout.tsx

@@ -25,6 +25,7 @@ import {
   RenderPanel,
   SidebarOptions,
   SidebarRef,
+  SidebarState,
 } from "./types";
 import { WorkspaceSideProvider } from "./WorkspaceSideContext";
 
@@ -79,10 +80,19 @@ export interface WorkspaceLayoutProps<
   sideTypeBreakpoint?: number;
   detectSize?: DetectSizeType;
   /**
-   * Use a compact top-row menu in Drawer (mobile) layout instead of a
-   * full-height left menu. Useful when there is only a single icon.
+   * Callback when left sidebar state changes (width or collapsed).
    */
-  compactDrawerMenu?: boolean;
+  onLeftSidebarStateChange?: (state: SidebarState) => void;
+  /**
+   * Callback when right sidebar state changes (width or collapsed).
+   */
+  onRightSidebarStateChange?: (state: SidebarState) => void;
+  /**
+   * Whether to persist panel sizes to localStorage.
+   * Set to false when using external storage (e.g., cookies) for sidebar state.
+   * @default true
+   */
+  shouldAutoSave?: boolean;
 }
 
 export type WorkspaceLayoutRef = {
@@ -177,7 +187,9 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
       showTabs: rightShowTabs = true,
     } = {},
     theme,
-    compactDrawerMenu,
+    onLeftSidebarStateChange,
+    onRightSidebarStateChange,
+    shouldAutoSave,
   }: WorkspaceLayoutProps<LeftTab, RightTab>,
   forwardedRef: React.ForwardedRef<WorkspaceLayoutRef>
 ) {
@@ -450,7 +462,9 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
               autoSavePrefix={autoSavePrefix}
               leftSidebarRef={leftSidebarRef}
               rightSidebarRef={rightSidebarRef}
-              compactDrawerMenu={compactDrawerMenu}
+              onLeftSidebarStateChange={onLeftSidebarStateChange}
+              onRightSidebarStateChange={onRightSidebarStateChange}
+              shouldAutoSave={shouldAutoSave}
             />
             {isOverlay && (
               <OverlayToolbar

package/src/components/workspace/types.ts

@@ -24,6 +24,11 @@ export type PanelLayoutState = {
   rightSidebarCollapsed: boolean;
 };
 
+export type SidebarState = {
+  width: number;
+  collapsed: boolean;
+};
+
 export type RenderPanel<TabValue extends string> =
   | ReactNode
   | ((props: {
@@ -54,12 +59,19 @@ export type LayoutProps<
   leftSidebarRef: React.RefObject<SidebarRef | null>;
   rightSidebarRef: React.RefObject<SidebarRef | null>;
   /**
-   * When using the Drawer (mobile) layout, render the vertical tab menu
-   * in a compact top row whose height equals the toolbar height.
-   * Intended for scenarios with a single icon to avoid reserving
-   * full-height left-side space.
+   * Callback when left sidebar state changes (width or collapsed).
+   */
+  onLeftSidebarStateChange?: (state: SidebarState) => void;
+  /**
+   * Callback when right sidebar state changes (width or collapsed).
+   */
+  onRightSidebarStateChange?: (state: SidebarState) => void;
+  /**
+   * Whether to persist panel sizes to localStorage.
+   * Set to false when using external storage (e.g., cookies) for sidebar state.
+   * @default true
    */
-  compactDrawerMenu?: boolean;
+  shouldAutoSave?: boolean;
 };
 
 export type WorkspaceLayoutGroup = {

package/src/index.css

@@ -73,7 +73,7 @@
   --n-toolbar-drawer-shadow: rgba(153, 153, 153, 0.25);
   --n-canvas-background: var(--n-indigo-25);
   --n-canvas-grid: rgba(0, 0, 0, 0.05);
-  --n-sidebar-background: rgb(255, 255, 255);
+  --n-sidebar-background: #fdfcff;
   --n-popover-background: rgb(252, 252, 252);
   --n-popover-divider: transparent;
   --n-listview-raised-background: rgba(0, 0, 0, 0.03);
@@ -103,7 +103,7 @@
   --n-text-link-focused: var(--n-primary-400);
   --n-inset-top: 46px;
   --n-sidebar-width: 260px;
-  --n-toolbar-height: 46px;
+  --n-toolbar-height: 52px;
   --n-toolbar-separator: 8px;
   --n-inspector-h-separator: 8px;
   --n-inspector-v-separator: 10px;
@@ -267,6 +267,16 @@
   --n-cm-info: #3390ff;
 }
 
+.n-workspace-sidebar {
+  --n-input-background: rgb(242, 240, 247);
+  --n-button-background: rgb(242, 240, 247);
+}
+
+[data-theme="dark"] .n-workspace-sidebar {
+  --n-input-background: rgb(55, 53, 65);
+  --n-button-background: rgb(55, 53, 65);
+}
+
 .markdown-editor-line-placeholder::after {
   content: var(--n-markdown-editor-line-placeholder-content);
   color: var(--n-text-disabled);

package/src/utils/mergeProps.ts

@@ -1,3 +1,4 @@
+import { assignRef } from "@noya-app/react-utils";
 import React from "react";
 
 /**
@@ -31,6 +32,43 @@ export function mergePropsWithEventComposition(
     }
   }
 
+  // Compose refs so both trigger and child refs get called
+  if (triggerProps.ref || childProps.ref) {
+    const triggerRef = triggerProps.ref as React.Ref<unknown> | undefined;
+    const childRef = childProps.ref as React.Ref<unknown> | undefined;
+    if (triggerRef && childRef) {
+      mergedProps.ref = (value: unknown) => {
+        assignRef(triggerRef as React.ForwardedRef<unknown>, value);
+        assignRef(childRef as React.ForwardedRef<unknown>, value);
+      };
+    } else if (childRef) {
+      mergedProps.ref = childRef;
+    }
+    // If only triggerRef exists, it's already in mergedProps from the spread
+  }
+
+  // Merge style objects (child styles take precedence)
+  if (
+    typeof triggerProps.style === "object" &&
+    triggerProps.style !== null &&
+    typeof childProps.style === "object" &&
+    childProps.style !== null
+  ) {
+    mergedProps.style = { ...triggerProps.style, ...childProps.style };
+  } else if (childProps.style !== undefined) {
+    mergedProps.style = childProps.style;
+  }
+
+  // Merge className strings
+  if (triggerProps.className || childProps.className) {
+    const classes = [triggerProps.className, childProps.className]
+      .filter(Boolean)
+      .join(" ");
+    if (classes) {
+      mergedProps.className = classes;
+    }
+  }
+
   return mergedProps;
 }
 

package/dist/chunk-D57E6H3M.mjs

@@ -1,36 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-
-export {
-  __commonJS,
-  __export,
-  __toESM
-};
-//# sourceMappingURL=chunk-D57E6H3M.mjs.map

package/dist/chunk-D57E6H3M.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-FJ6ZGZIA.mjs

@@ -1,43 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-var __commonJS = (cb, mod) => function __require2() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-
-export {
-  __require,
-  __commonJS,
-  __export,
-  __toESM
-};
-//# sourceMappingURL=chunk-FJ6ZGZIA.mjs.map

package/dist/chunk-FJ6ZGZIA.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}