@noya-app/noya-designsystem 0.1.76 → 0.1.78

package/src/components/resizablePanels/types.ts

@@ -0,0 +1,65 @@
+import { ReactNode, RefObject } from "react";
+
+export interface PanelGroupProps {
+  id?: string;
+  className?: string;
+  direction: "horizontal";
+  autoSaveId?: string;
+  onLayout?: (sizes: number[]) => void;
+  children: ReactNode;
+  ref?: RefObject<ImperativePanelGroupHandle | null>;
+}
+
+export interface PanelProps {
+  id?: string;
+  order: number;
+  className?: string;
+  defaultSize?: number;
+  minSize?: number;
+  maxSize?: number;
+  collapsible?: boolean;
+  defaultCollapsed?: boolean;
+  children?: ReactNode;
+}
+
+export interface ImperativePanelHandle {
+  expand: () => void;
+  collapse: () => void;
+  isExpanded: () => boolean;
+  getSize: () => number;
+}
+
+export interface ImperativePanelGroupHandle {
+  getLayout: () => number[];
+  setLayout: (sizes: number[]) => void;
+}
+
+export interface PanelResizeHandleProps {
+  className?: string;
+  disabled?: boolean;
+  /** The index of this handle (0 = between panels 0 and 1, 1 = between panels 1 and 2, etc.) */
+  index: number;
+}
+
+export interface PanelRegistration {
+  id: string;
+  order: number;
+  defaultSize?: number;
+  minSize?: number;
+  maxSize?: number;
+  collapsible?: boolean;
+  defaultCollapsed?: boolean;
+}
+
+export interface PanelGroupContextValue {
+  registerPanel: (panel: PanelRegistration) => void;
+  unregisterPanel: (id: string) => void;
+  getPanelSize: (id: string) => number;
+  setPanelSize: (id: string, size: number) => void;
+  getPanelIndex: (id: string) => number;
+  expandPanel: (id: string) => void;
+  collapsePanel: (id: string) => void;
+  isPanelExpanded: (id: string) => boolean;
+  startResize: (handleIndex: number, startX: number) => void;
+  containerWidth: number;
+}

package/src/components/workspace/DrawerWorkspaceLayout.tsx

@@ -2,13 +2,13 @@
 
 import { memoGeneric } from "@noya-app/react-utils";
 import React, { useMemo, useRef, useState } from "react";
+import { Button } from "../Button";
 import { DividerVertical } from "../Divider";
 import { Drawer } from "../Drawer";
 import { isSelectableMenuItem, MenuItem } from "../internal/Menu";
 import { EDITOR_PANEL_GROUP_ID, RIGHT_SIDEBAR_ID } from "./constants";
 import { LayoutProps, PanelLayoutState, SidebarRef } from "./types";
 import { VerticalTabMenu } from "./VerticalTabMenu";
-import { Button } from "../Button";
 
 export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
   LeftTab extends string = string,
@@ -138,16 +138,29 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
               }}
               icon={allSelectableTabItems[0].icon}
               tooltip={
-                allSelectableTabItems[0].tooltip ?? allSelectableTabItems[0].title
+                allSelectableTabItems[0].tooltip ??
+                allSelectableTabItems[0].title
               }
               active={(() => {
-                const value = allSelectableTabItems[0].value as LeftTab | RightTab;
-                const isLeftItem = leftSelectableTabItems.some((i) => i.value === value);
-                const isRightItem = rightSelectableTabItems.some((i) => i.value === value);
-                return isLeftItem ? !leftSidebarCollapsed : isRightItem ? !rightSidebarCollapsed : false;
+                const value = allSelectableTabItems[0].value as
+                  | LeftTab
+                  | RightTab;
+                const isLeftItem = leftSelectableTabItems.some(
+                  (i) => i.value === value
+                );
+                const isRightItem = rightSelectableTabItems.some(
+                  (i) => i.value === value
+                );
+                return isLeftItem
+                  ? !leftSidebarCollapsed
+                  : isRightItem
+                    ? !rightSidebarCollapsed
+                    : false;
               })()}
               onClick={() => {
-                const value = allSelectableTabItems[0].value as LeftTab | RightTab;
+                const value = allSelectableTabItems[0].value as
+                  | LeftTab
+                  | RightTab;
                 handleSelectTab(value);
               }}
             />
@@ -159,6 +172,7 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
 
       {leftPanel && (
         <Drawer
+          modal={false}
           ref={leftSidebarRef}
           className="n-flex-1"
           style={
@@ -185,6 +199,7 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
       {rightPanel && (
         <Drawer
           id={RIGHT_SIDEBAR_ID}
+          modal={false}
           ref={rightSidebarRef}
           className="n-flex-1"
           style={

package/src/components/workspace/PanelWorkspaceLayout.tsx

@@ -1,18 +1,14 @@
 "use client";
 
-import {
-  clientStorage,
-  memoGeneric,
-  usePersistentStateObject,
-} from "@noya-app/react-utils";
-import React, { useCallback, useMemo, useRef } from "react";
+import { memoGeneric } from "@noya-app/react-utils";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import {
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
   Panel,
   PanelGroup,
   PanelResizeHandle,
-} from "react-resizable-panels";
+} from "../resizablePanels";
 import { DividerVertical } from "../Divider";
 import {
   CONTENT_AREA_ID,
@@ -20,17 +16,7 @@ import {
   LEFT_SIDEBAR_ID,
   RIGHT_SIDEBAR_ID,
 } from "./constants";
-import {
-  getInitialLayout,
-  getLayoutCollapsedState,
-  getLayoutIds,
-  getPropertyKey,
-  getStorageKey,
-  panelStorage,
-  setInitialLayout,
-  toPixelSize,
-} from "./panelStorage";
-import { LayoutProps, WorkspaceLayoutState } from "./types";
+import { LayoutProps } from "./types";
 import { VerticalTabMenu } from "./VerticalTabMenu";
 
 export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
@@ -42,7 +28,6 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
   centerPanel,
   leftSidebarOptions,
   rightSidebarOptions,
-  centerPanelPercentage,
   autoSavePrefix,
   leftSidebarRef,
   rightSidebarRef,
@@ -56,56 +41,35 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
 }: LayoutProps<LeftTab, RightTab>) {
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
 
-  const hasLeftPanel = !!leftPanel;
-  const hasRightPanel = !!rightPanel;
-  const hasCenterPanel = !!centerPanel;
-
   const autoSaveId = useMemo(() => {
     return autoSavePrefix
-      ? `${autoSavePrefix}--v2--${EDITOR_PANEL_GROUP_ID}`
+      ? `${autoSavePrefix}--v3--${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, {});
+  // Track collapsed state based on layout changes
+  const [leftSidebarCollapsed, setLeftSidebarCollapsed] = useState(
+    leftSidebarOptions.defaultCollapsed ?? false
+  );
+  const [rightSidebarCollapsed, setRightSidebarCollapsed] = useState(
+    rightSidebarOptions.defaultCollapsed ?? false
+  );
 
-  const layoutGroup = data?.[propertyKey];
+  const handleLayoutChange = useCallback(
+    (sizes: number[]) => {
+      // Update collapsed state based on sizes
+      const leftIndex = leftPanel ? 0 : -1;
+      const rightIndex = rightPanel ? (leftPanel ? 2 : 1) : -1;
 
-  const { leftSidebarCollapsed, rightSidebarCollapsed } = useMemo(() => {
-    return getLayoutCollapsedState({
-      layoutGroup,
-      propertyKey,
-      layoutIds,
-      hasLeftPanel,
-      hasRightPanel,
-    });
-  }, [layoutGroup, propertyKey, layoutIds, hasLeftPanel, hasRightPanel]);
+      if (leftIndex >= 0) {
+        setLeftSidebarCollapsed(sizes[leftIndex] === 0);
+      }
+      if (rightIndex >= 0) {
+        setRightSidebarCollapsed(sizes[rightIndex] === 0);
+      }
+    },
+    [leftPanel, rightPanel]
+  );
 
   const handleLeftTabChange = useCallback(
     (value: LeftTab) => {
@@ -143,23 +107,6 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
     [onChangeRightTab, rightSidebarRef, rightTabValue]
   );
 
-  const handleLayoutChange = useCallback(
-    (layout: number[]) => {
-      setData((prev) => {
-        const newData = {
-          ...prev,
-          [propertyKey]: {
-            layout: layout.map((size) => toPixelSize(size)),
-            expandToSizes: prev?.[propertyKey]?.expandToSizes ?? {},
-          },
-        };
-
-        return newData;
-      });
-    },
-    [setData, propertyKey]
-  );
-
   const showLeftTabs =
     !!leftSidebarOptions.showTabs &&
     !!leftTabItems &&
@@ -173,7 +120,6 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
       id={EDITOR_PANEL_GROUP_ID}
       className="n-flex-1"
       direction="horizontal"
-      storage={panelStorage}
       autoSaveId={autoSaveId}
       onLayout={handleLayoutChange}
     >
@@ -205,24 +151,23 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
                 : undefined)
             }
             collapsible
+            defaultCollapsed={leftSidebarOptions.defaultCollapsed}
           >
             {leftSidebarCollapsed ? null : leftPanel}
           </Panel>
-          <PanelResizeHandle 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 n-bg-divider" />
         </>
       )}
       <Panel
         id={CONTENT_AREA_ID}
         order={2}
-        defaultSize={centerPanelPercentage}
-        minSize={10}
         className="n-flex n-relative"
       >
         {centerPanel}
       </Panel>
       {rightPanel && (
         <>
-          <PanelResizeHandle 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 n-bg-divider" />
           <Panel
             id={RIGHT_SIDEBAR_ID}
             className="n-relative"
@@ -237,6 +182,7 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
                 : undefined)
             }
             collapsible
+            defaultCollapsed={rightSidebarOptions.defaultCollapsed}
           >
             {rightSidebarCollapsed ? null : rightPanel}
           </Panel>

package/src/components/workspace/WorkspaceLayout.tsx

@@ -16,13 +16,14 @@ import React, {
 } from "react";
 import { cx } from "../../utils/classNames";
 import { MenuItem } from "../internal/Menu";
+import { OverlayLayout, OverlayToolbar } from "../OverlayToolbar";
 import { DrawerWorkspaceLayout } from "./DrawerWorkspaceLayout";
 import { PanelWorkspaceLayout } from "./PanelWorkspaceLayout";
 import { renderPanelChildren } from "./renderPanelChildren";
 import {
   LayoutProps,
-  PercentageSidebarOptions,
   RenderPanel,
+  SidebarOptions,
   SidebarRef,
 } from "./types";
 import { WorkspaceSideProvider } from "./WorkspaceSideContext";
@@ -31,6 +32,8 @@ export type SideType = "auto" | "panel" | "drawer";
 
 export type DetectSizeType = "container" | "window";
 
+export type ToolbarVariant = "default" | "overlay";
+
 export interface WorkspaceLayoutProps<
   LeftTab extends string,
   RightTab extends string,
@@ -54,6 +57,24 @@ export interface WorkspaceLayoutProps<
   right?: RenderPanel<RightTab>;
   rightOptions?: SideOptions;
   toolbar?: React.ReactNode;
+  /**
+   * Toolbar variant - "default" renders above content, "overlay" renders floating panels
+   * @default "default"
+   */
+  toolbarVariant?: ToolbarVariant;
+  /**
+   * Content for the left/bottom-center overlay panel (when toolbarVariant is "overlay")
+   */
+  overlayToolbarLeft?: React.ReactNode;
+  /**
+   * Content for the right overlay panel (when toolbarVariant is "overlay")
+   */
+  overlayToolbarRight?: React.ReactNode;
+  /**
+   * Layout configuration for overlay toolbar
+   * @default "bottomCenterTopRight"
+   */
+  overlayLayout?: OverlayLayout;
   sideType?: SideType;
   sideTypeBreakpoint?: number;
   detectSize?: DetectSizeType;
@@ -125,6 +146,10 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     className,
     style,
     toolbar,
+    toolbarVariant = "default",
+    overlayToolbarLeft,
+    overlayToolbarRight,
+    overlayLayout,
     children,
     sideType = "auto",
     sideTypeBreakpoint = 800,
@@ -169,46 +194,22 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
         ? containerSize
         : windowSize;
 
-  function getPercentage(size: number | string) {
-    return typeof size === "string"
-      ? parseFloat(size)
-      : (size / parentSize.width) * 100;
+  // Convert size to pixels (handles both number and percentage string)
+  function toPixels(size: number | string | undefined): number | undefined {
+    if (size === undefined) return undefined;
+    if (typeof size === "number") return size;
+    // Parse percentage string like "20%"
+    const percentage = parseFloat(size);
+    return Math.round((percentage / 100) * parentSize.width);
   }
 
-  function clampPercentage(
-    value: number,
-    min: number | undefined,
-    max: number | undefined
-  ) {
-    let result = value;
-    if (min !== undefined) {
-      result = Math.max(result, min);
-    }
-    if (max !== undefined) {
-      result = Math.min(result, max);
-    }
-    return result;
-  }
+  const leftSidebarMinPixels = toPixels(leftMinSize);
+  const leftSidebarMaxPixels = toPixels(leftMaxSize);
+  const leftSidebarInitialPixels = toPixels(leftInitialSize) ?? 280;
 
-  const leftSidebarMinPercentage =
-    leftMinSize !== undefined ? getPercentage(leftMinSize) : undefined;
-  const rightSidebarMinPercentage =
-    rightMinSize !== undefined ? getPercentage(rightMinSize) : undefined;
-  const leftSidebarMaxPercentage =
-    leftMaxSize !== undefined ? getPercentage(leftMaxSize) : undefined;
-  const rightSidebarMaxPercentage =
-    rightMaxSize !== undefined ? getPercentage(rightMaxSize) : undefined;
-
-  const leftSidebarPercentage = clampPercentage(
-    getPercentage(leftInitialSize),
-    leftSidebarMinPercentage,
-    leftSidebarMaxPercentage
-  );
-  const rightSidebarPercentage = clampPercentage(
-    getPercentage(rightInitialSize),
-    rightSidebarMinPercentage,
-    rightSidebarMaxPercentage
-  );
+  const rightSidebarMinPixels = toPixels(rightMinSize);
+  const rightSidebarMaxPixels = toPixels(rightMaxSize);
+  const rightSidebarInitialPixels = toPixels(rightInitialSize) ?? 280;
 
   const leftSidebarRef = useRef<SidebarRef>(null);
   const rightSidebarRef = useRef<SidebarRef>(null);
@@ -288,11 +289,6 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     },
   });
 
-  const centerPanelPercentage =
-    100 -
-    (left ? leftSidebarPercentage : 0) -
-    (right ? rightSidebarPercentage : 0);
-
   const isDrawerActive =
     sideType === "drawer" ||
     (sideType === "auto" && parentSize.width <= sideTypeBreakpoint);
@@ -365,38 +361,38 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     <PanelInner className="n-bg-canvas-background">{children}</PanelInner>
   );
 
-  const leftSidebarOptions: PercentageSidebarOptions = useMemo(
+  const leftSidebarOptions: SidebarOptions = useMemo(
     () => ({
-      minSize: leftSidebarMinPercentage,
-      maxSize: leftSidebarMaxPercentage,
-      initialSize: leftSidebarPercentage,
+      minSize: leftSidebarMinPixels,
+      maxSize: leftSidebarMaxPixels,
+      initialSize: leftSidebarInitialPixels,
       resizable: leftResizable,
       defaultCollapsed: leftDefaultCollapsed,
       showTabs: leftShowTabs,
     }),
     [
-      leftSidebarMinPercentage,
-      leftSidebarMaxPercentage,
-      leftSidebarPercentage,
+      leftSidebarMinPixels,
+      leftSidebarMaxPixels,
+      leftSidebarInitialPixels,
       leftResizable,
       leftDefaultCollapsed,
       leftShowTabs,
     ]
   );
 
-  const rightSidebarOptions: PercentageSidebarOptions = useMemo(
+  const rightSidebarOptions: SidebarOptions = useMemo(
     () => ({
-      minSize: rightSidebarMinPercentage,
-      maxSize: rightSidebarMaxPercentage,
-      initialSize: rightSidebarPercentage,
+      minSize: rightSidebarMinPixels,
+      maxSize: rightSidebarMaxPixels,
+      initialSize: rightSidebarInitialPixels,
       resizable: rightResizable,
       defaultCollapsed: rightDefaultCollapsed,
       showTabs: rightShowTabs,
     }),
     [
-      rightSidebarMinPercentage,
-      rightSidebarMaxPercentage,
-      rightSidebarPercentage,
+      rightSidebarMinPixels,
+      rightSidebarMaxPixels,
+      rightSidebarInitialPixels,
       rightResizable,
       rightDefaultCollapsed,
       rightShowTabs,
@@ -422,6 +418,8 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
   const readyToRender =
     detectSize === "window" || (containerSize && containerSize.width > 0);
 
+  const isOverlay = toolbarVariant === "overlay";
+
   return (
     <div
       ref={containerRef}
@@ -433,27 +431,35 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
       style={style}
       data-theme={theme}
     >
-      {toolbar}
+      {!isOverlay && toolbar}
       <div className="n-flex n-flex-row n-flex-1 n-relative">
         {readyToRender && (
-          <LayoutComponent
-            leftPanel={leftPanel}
-            rightPanel={rightPanel}
-            centerPanel={centerPanel}
-            leftTabItems={leftTabItems}
-            leftTabValue={leftTabValue}
-            onChangeLeftTab={setLeftTabValue}
-            rightTabItems={rightTabItems}
-            rightTabValue={rightTabValue}
-            onChangeRightTab={setRightTabValue}
-            leftSidebarOptions={leftSidebarOptions}
-            rightSidebarOptions={rightSidebarOptions}
-            centerPanelPercentage={centerPanelPercentage}
-            autoSavePrefix={autoSavePrefix}
-            leftSidebarRef={leftSidebarRef}
-            rightSidebarRef={rightSidebarRef}
-            compactDrawerMenu={compactDrawerMenu}
-          />
+          <>
+            <LayoutComponent
+              leftPanel={leftPanel}
+              rightPanel={rightPanel}
+              centerPanel={centerPanel}
+              leftTabItems={leftTabItems}
+              leftTabValue={leftTabValue}
+              onChangeLeftTab={setLeftTabValue}
+              rightTabItems={rightTabItems}
+              rightTabValue={rightTabValue}
+              onChangeRightTab={setRightTabValue}
+              leftSidebarOptions={leftSidebarOptions}
+              rightSidebarOptions={rightSidebarOptions}
+              autoSavePrefix={autoSavePrefix}
+              leftSidebarRef={leftSidebarRef}
+              rightSidebarRef={rightSidebarRef}
+              compactDrawerMenu={compactDrawerMenu}
+            />
+            {isOverlay && (
+              <OverlayToolbar
+                left={overlayToolbarLeft}
+                right={overlayToolbarRight}
+                overlayLayout={overlayLayout}
+              />
+            )}
+          </>
         )}
       </div>
     </div>

package/src/components/workspace/types.ts

@@ -7,7 +7,10 @@ export type SidebarRef = {
   isExpanded: () => boolean;
 };
 
-export type PercentageSidebarOptions = {
+/**
+ * Sidebar options with pixel-based sizing.
+ */
+export type SidebarOptions = {
   minSize?: number;
   maxSize?: number;
   initialSize?: number;
@@ -45,9 +48,8 @@ export type LayoutProps<
   rightTabValue?: RightTab;
   onChangeRightTab?: (value: RightTab) => void;
   centerPanel: React.ReactNode;
-  leftSidebarOptions: PercentageSidebarOptions;
-  rightSidebarOptions: PercentageSidebarOptions;
-  centerPanelPercentage: number;
+  leftSidebarOptions: SidebarOptions;
+  rightSidebarOptions: SidebarOptions;
   autoSavePrefix?: string;
   leftSidebarRef: React.RefObject<SidebarRef | null>;
   rightSidebarRef: React.RefObject<SidebarRef | null>;

package/src/contexts/DialogContext.tsx

@@ -231,6 +231,21 @@ export const DialogProvider = function DialogProvider({
   const confirmButtonRef = useRef<HTMLButtonElement>(null);
   const dialogRef = useRef<IDialog>(null);
 
+  // Handle auto-focus when dialog opens
+  React.useEffect(() => {
+    if (!contents) return;
+
+    // Use requestAnimationFrame to ensure the dialog is rendered
+    requestAnimationFrame(() => {
+      if (contents.type === "input") {
+        inputRef.current?.focus();
+        inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
+      } else if (contents.type === "confirmation") {
+        confirmButtonRef.current?.focus();
+      }
+    });
+  }, [contents]);
+
   const containsElement = useCallback((element: HTMLElement) => {
     if (!dialogRef.current) return false;
 
@@ -267,30 +282,6 @@ export const DialogProvider = function DialogProvider({
           },
           [close]
         )}
-        onOpenAutoFocus={useCallback(
-          (event: Event) => {
-            if (!contents) return;
-
-            if (contents.type === "input") {
-              event.stopPropagation();
-              event.preventDefault();
-              inputRef.current?.focus();
-              inputRef.current?.setSelectionRange(
-                0,
-                inputRef.current.value.length
-              );
-              return;
-            }
-
-            if (contents.type === "confirmation") {
-              event.stopPropagation();
-              event.preventDefault();
-              confirmButtonRef.current?.focus();
-              return;
-            }
-          },
-          [contents]
-        )}
       >
         {contents?.type === "confirmation" ? (
           <div className="n-flex n-flex-1 n-flex-row n-items-center">

package/src/emojis.ts

@@ -0,0 +1 @@
+export { gemoji as emojis } from "gemoji";