@noya-app/noya-designsystem 0.1.81 → 0.1.83

package/src/components/SelectionToolbar.tsx

@@ -8,47 +8,44 @@ import {
 } from "@noya-app/noya-designsystem";
 import { Rect } from "@noya-app/noya-geometry";
 import { useSize } from "@noya-app/react-utils";
-import * as PopperPrimitive from "@radix-ui/react-popper";
-import type { MeasurableElement } from "@radix-ui/utils";
-import React, { ComponentProps, memo, useMemo } from "react";
-import { createPortal } from "react-dom";
-
-// Create a Measurable from a Rect
-const createVirtualElement = (rect: Rect): MeasurableElement => ({
-  getBoundingClientRect: () => ({
-    width: rect.width,
-    height: rect.height,
-    x: rect.x,
-    y: rect.y,
-    top: rect.y,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height,
-    left: rect.x,
-    toJSON: () => null,
-  }),
-});
+import {
+  useFloating,
+  offset,
+  flip,
+  shift,
+  FloatingPortal,
+  type Placement,
+  type VirtualElement,
+} from "@floating-ui/react";
+import React, { memo, useCallback, useEffect, useMemo, useState } from "react";
 
-type PopperPrimitiveContentProps = ComponentProps<
-  typeof PopperPrimitive.Content
->;
+type Side = "top" | "right" | "bottom" | "left";
+type Align = "start" | "center" | "end";
 
-type SelectionToolbarContainerProps = Pick<
-  PopperPrimitiveContentProps,
-  "side" | "sideOffset" | "align" | "avoidCollisions"
-> & {
+type SelectionToolbarContainerProps = {
+  side?: Side;
+  sideOffset?: number;
+  align?: Align;
+  avoidCollisions?: boolean;
   rect: Rect;
   children: React.ReactNode;
-  portalContainer?: HTMLElement | null;
   containerClassName?: string;
   containerStyle?: React.CSSProperties;
   transitionDuration?: number;
 };
 
+// Map side + align to floating-ui placement
+function getPlacement(side: Side, align: Align): Placement {
+  if (align === "center") {
+    return side;
+  }
+  return `${side}-${align}` as Placement;
+}
+
 export const SelectionToolbarContainer = memo(
   function SelectionToolbarContainer({
     rect,
     children,
-    portalContainer,
     side = "top",
     sideOffset = 10,
     align = "center",
@@ -58,58 +55,78 @@ export const SelectionToolbarContainer = memo(
     transitionDuration = 0.2,
   }: SelectionToolbarContainerProps) {
     const portalScopeId = usePortalScopeId();
-    const containerRef = React.useRef<HTMLDivElement>(null);
-    const size = useSize(containerRef, "width");
+    const [containerElement, setContainerElement] =
+      useState<HTMLDivElement | null>(null);
+    const containerRef = useCallback((el: HTMLDivElement | null) => {
+      setContainerElement(el);
+    }, []);
+    const containerRefObject = useMemo(
+      () => ({ current: containerElement }),
+      [containerElement]
+    );
+    const size = useSize(containerRefObject, "width");
 
     // Create a virtual reference element from the rect
-    const virtualRef = useMemo(
-      () => ({
-        current: createVirtualElement(rect),
+    const virtualElement = useMemo(
+      (): VirtualElement => ({
+        getBoundingClientRect: () => ({
+          width: rect.width,
+          height: rect.height,
+          x: rect.x,
+          y: rect.y,
+          top: rect.y,
+          right: rect.x + rect.width,
+          bottom: rect.y + rect.height,
+          left: rect.x,
+        }),
       }),
       [rect]
     );
 
-    const popperContent = (
-      <PopperPrimitive.Content
-        {...portalScopeProps(portalScopeId)}
-        side={side}
-        sideOffset={sideOffset}
-        align={align}
-        avoidCollisions={avoidCollisions}
-        collisionPadding={10}
-        contentEditable={false}
-        style={{
-          zIndex: 10,
-          opacity: size ? 1 : 0,
-          transition: `opacity ${transitionDuration}s ease-in-out`,
-          [cssVarNames.colors.inputBackground]: "transparent",
-          [cssVarNames.colors.buttonBackground]: "transparent",
-        }}
-      >
+    const placement = getPlacement(side, align);
+
+    const { refs, floatingStyles } = useFloating({
+      placement,
+      middleware: avoidCollisions
+        ? [offset(sideOffset), flip(), shift({ padding: 10 })]
+        : [offset(sideOffset)],
+    });
+
+    useEffect(() => {
+      refs.setPositionReference(virtualElement);
+    }, [refs, virtualElement]);
+
+    return (
+      <FloatingPortal>
         <div
-          ref={containerRef}
-          className={cx(
-            "n-flex n-gap-1 n-bg-popover-background n-rounded n-shadow-popover n-p-1",
-            containerClassName
-          )}
-          style={containerStyle}
-          onClick={(e) => e.stopPropagation()}
-          onMouseDown={(e) => e.stopPropagation()}
-          onPointerDown={(e) => e.stopPropagation()}
-          onWheel={(e) => e.stopPropagation()}
+          ref={refs.setFloating}
+          {...portalScopeProps(portalScopeId)}
+          contentEditable={false}
+          style={{
+            ...floatingStyles,
+            opacity: size ? 1 : 0,
+            transition: `opacity ${transitionDuration}s ease-in-out`,
+            [cssVarNames.colors.inputBackground]: "transparent",
+            [cssVarNames.colors.buttonBackground]: "transparent",
+          }}
+          className="n-z-menu"
         >
-          {children}
+          <div
+            ref={containerRef}
+            className={cx(
+              "n-flex n-gap-1 n-bg-popover-background n-rounded n-shadow-popover n-p-1",
+              containerClassName
+            )}
+            style={containerStyle}
+            onClick={(e) => e.stopPropagation()}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+            onWheel={(e) => e.stopPropagation()}
+          >
+            {children}
+          </div>
         </div>
-      </PopperPrimitive.Content>
-    );
-
-    return (
-      <PopperPrimitive.Root>
-        <PopperPrimitive.Anchor virtualRef={virtualRef} />
-        {portalContainer
-          ? createPortal(popperContent, portalContainer)
-          : popperContent}
-      </PopperPrimitive.Root>
+      </FloatingPortal>
     );
   }
 );

package/src/components/resizablePanels/Panel.tsx

@@ -25,7 +25,17 @@ interface PanelProps {
 
 export const Panel = forwardRef<ImperativePanelHandle, PanelProps>(
   function Panel(
-    { id: propId, order, className, defaultSize, minSize, maxSize, collapsible, defaultCollapsed, children },
+    {
+      id: propId,
+      order,
+      className,
+      defaultSize,
+      minSize,
+      maxSize,
+      collapsible,
+      defaultCollapsed,
+      children,
+    },
     ref
   ) {
     const generatedId = useId();
@@ -56,7 +66,17 @@ export const Panel = forwardRef<ImperativePanelHandle, PanelProps>(
       return () => {
         unregisterPanel(id);
       };
-    }, [id, order, defaultSize, minSize, maxSize, collapsible, defaultCollapsed, registerPanel, unregisterPanel]);
+    }, [
+      id,
+      order,
+      defaultSize,
+      minSize,
+      maxSize,
+      collapsible,
+      defaultCollapsed,
+      registerPanel,
+      unregisterPanel,
+    ]);
 
     const size = getPanelSize(id);
     const isFlexPanel = defaultSize === undefined;

package/src/components/resizablePanels/PanelGroup.tsx

@@ -144,17 +144,24 @@ export const PanelGroup = forwardRef<ImperativePanelGroupHandle, PanelGroupProps
     const registerPanel = useCallback(
       (panel: PanelRegistration) => {
         setPanels((prev) => {
+          // Check saved sizes first, then use defaultCollapsed
           const savedSizes = loadSavedSizes(autoSaveId);
           const savedSize = savedSizes?.[panel.id];
-          // Use saved size if available, otherwise check defaultCollapsed, then use defaultSize
           const hasSavedSize = savedSize !== undefined;
-          const collapsed = hasSavedSize
-            ? savedSize === 0 && !!panel.collapsible
-            : !!panel.defaultCollapsed && !!panel.collapsible;
-          const initialSize = hasSavedSize
-            ? savedSize
-            : collapsed
-              ? 0
+
+          let collapsed: boolean;
+          if (hasSavedSize) {
+            // Use saved state
+            collapsed = savedSize === 0 && !!panel.collapsible;
+          } else {
+            // Use defaultCollapsed
+            collapsed = !!panel.defaultCollapsed && !!panel.collapsible;
+          }
+
+          const initialSize = collapsed
+            ? 0
+            : hasSavedSize
+              ? savedSize
               : panel.defaultSize ?? 0;
 
           const newPanels = new Map(prev);

package/src/components/workspace/DrawerWorkspaceLayout.tsx

@@ -1,14 +1,13 @@
 "use client";
 
 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 React, { useMemo, useState } from "react";
+import { cssVarNames } from "../../theme";
+import { Divider } from "../Divider";
 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 { ToolbarMenu } from "../Toolbar";
+import { EDITOR_PANEL_GROUP_ID } from "./constants";
+import { LayoutProps, PanelLayoutState } from "./types";
 
 export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
   LeftTab extends string = string,
@@ -25,16 +24,46 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
   rightTabValue,
   onChangeRightTab,
   onChangeLeftTab,
-  compactDrawerMenu,
 }: LayoutProps<LeftTab, RightTab>) {
-  const portalContainer = useRef<HTMLDivElement>(null);
-
   const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] =
     useState<PanelLayoutState>({
       leftSidebarCollapsed: true,
       rightSidebarCollapsed: true,
     });
 
+  // Expose expand/collapse methods via refs
+  React.useImperativeHandle(
+    leftSidebarRef,
+    () => ({
+      expand: () =>
+        setLayoutState((prev) => ({
+          ...prev,
+          leftSidebarCollapsed: false,
+          rightSidebarCollapsed: true,
+        })),
+      collapse: () =>
+        setLayoutState((prev) => ({ ...prev, leftSidebarCollapsed: true })),
+      isExpanded: () => !leftSidebarCollapsed,
+    }),
+    [leftSidebarCollapsed]
+  );
+
+  React.useImperativeHandle(
+    rightSidebarRef,
+    () => ({
+      expand: () =>
+        setLayoutState((prev) => ({
+          ...prev,
+          rightSidebarCollapsed: false,
+          leftSidebarCollapsed: true,
+        })),
+      collapse: () =>
+        setLayoutState((prev) => ({ ...prev, rightSidebarCollapsed: true })),
+      isExpanded: () => !rightSidebarCollapsed,
+    }),
+    [rightSidebarCollapsed]
+  );
+
   const allTabItems = useMemo(
     () =>
       [
@@ -44,15 +73,12 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
     [leftTabItems, rightTabItems, leftPanel, rightPanel]
   );
 
-  const hasTabs = allTabItems.length > 0;
-
-  // Determine if we should use the compact top-row menu variant.
   const allSelectableTabItems = useMemo(
     () => allTabItems.filter(isSelectableMenuItem),
     [allTabItems]
   );
-  const useCompactInToolbar =
-    !!compactDrawerMenu && allSelectableTabItems.length <= 1;
+
+  const hasTabs = allSelectableTabItems.length > 0;
 
   const leftSelectableTabItems = useMemo(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
@@ -64,165 +90,118 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
     [rightTabItems]
   );
 
-  // Shared helpers for expanding/collapsing drawers
-  const toggleSidebar = (ref: React.RefObject<SidebarRef | null>) => {
-    if (ref.current?.isExpanded()) {
-      ref.current?.collapse();
-    } else {
-      ref.current?.expand();
-    }
-  };
-
-  const ensureExpanded = (ref: React.RefObject<SidebarRef | null>) => {
-    if (!ref.current?.isExpanded()) {
-      ref.current?.expand();
-    }
-  };
-
   const handleSelectTab = (value: LeftTab | RightTab) => {
-    if (leftSelectableTabItems.some((item) => item.value === value)) {
-      if (value === leftTabValue) {
-        toggleSidebar(leftSidebarRef);
+    const isLeftItem = leftSelectableTabItems.some(
+      (item) => item.value === value
+    );
+    const isRightItem = rightSelectableTabItems.some(
+      (item) => item.value === value
+    );
+
+    if (isLeftItem) {
+      if (value === leftTabValue && !leftSidebarCollapsed) {
+        // Toggle off - clicking same tab that's already open
+        setLayoutState((prev) => ({ ...prev, leftSidebarCollapsed: true }));
       } else {
-        ensureExpanded(leftSidebarRef);
+        // Open this tab, close other
+        setLayoutState({
+          leftSidebarCollapsed: false,
+          rightSidebarCollapsed: true,
+        });
         onChangeLeftTab?.(value as LeftTab);
       }
-    } else if (rightSelectableTabItems.some((item) => item.value === value)) {
-      if (value === rightTabValue) {
-        toggleSidebar(rightSidebarRef);
+    } else if (isRightItem) {
+      if (value === rightTabValue && !rightSidebarCollapsed) {
+        // Toggle off - clicking same tab that's already open
+        setLayoutState((prev) => ({ ...prev, rightSidebarCollapsed: true }));
       } else {
-        ensureExpanded(rightSidebarRef);
+        // Open this tab, close other
+        setLayoutState({
+          leftSidebarCollapsed: true,
+          rightSidebarCollapsed: false,
+        });
         onChangeRightTab?.(value as RightTab);
       }
     }
   };
 
-  const { activeValue, isSidebarCollapsed } =
-    leftSelectableTabItems.length > 0 && !leftSidebarCollapsed
-      ? { activeValue: leftTabValue, isSidebarCollapsed: leftSidebarCollapsed }
-      : rightSelectableTabItems.length > 0 && !rightSidebarCollapsed
-        ? {
-            activeValue: rightTabValue,
-            isSidebarCollapsed: rightSidebarCollapsed,
-          }
-        : { activeValue: undefined, isSidebarCollapsed: true };
+  // Determine which panel is currently showing
+  const activeDrawerPanel = !leftSidebarCollapsed
+    ? leftPanel
+    : !rightSidebarCollapsed
+      ? rightPanel
+      : null;
+
+  const isDrawerOpen = activeDrawerPanel !== null;
+
+  // Determine active tab value for highlighting
+  const activeTabValue = !leftSidebarCollapsed
+    ? leftTabValue
+    : !rightSidebarCollapsed
+      ? rightTabValue
+      : undefined;
+
+  // Create toolbar menu items with checked state
+  const toolbarMenuItems = useMemo(
+    () =>
+      allSelectableTabItems.map((item) => ({
+        ...item,
+        checked: activeTabValue === item.value,
+      })),
+    [allSelectableTabItems, activeTabValue]
+  );
 
   return (
     <div
-      ref={portalContainer}
       id={EDITOR_PANEL_GROUP_ID}
-      className="n-flex n-flex-1 n-relative focus:n-outline-none"
+      className="n-flex n-flex-col n-flex-1 n-relative focus:n-outline-none"
     >
-      {hasTabs && !useCompactInToolbar && (
+      {/* Horizontal toggle bar - secondary toolbar row */}
+      {hasTabs && (
         <>
-          <VerticalTabMenu
-            tooltipSide="right"
-            items={allTabItems}
-            activeValue={activeValue}
-            isSidebarCollapsed={isSidebarCollapsed}
-            onChange={(value) => handleSelectTab(value as LeftTab | RightTab)}
-          />
-          <DividerVertical className="n-h-full" />
+          <div
+            className="n-flex n-flex-row n-items-center n-gap-1 n-px-2 n-py-1.5 n-bg-sidebar-background n-flex-none"
+            style={{
+              [cssVarNames.colors.inputBackground]: "transparent",
+              [cssVarNames.colors.buttonBackground]: "transparent",
+            }}
+          >
+            <ToolbarMenu
+              items={toolbarMenuItems}
+              onSelectMenuItem={handleSelectTab}
+            />
+          </div>
+          <Divider />
         </>
       )}
 
-      {useCompactInToolbar && (
-        <div className="n-absolute n-top-0 n-left-0 n-h-[calc(var(--n-toolbar-height)+1px)] n-w-[calc(var(--n-toolbar-height)+1px)] n-bg-sidebar-background n-border-r n-border-b n-border-divider-strong n-z-10 n-flex n-items-center n-justify-center">
-          {allSelectableTabItems[0] && (
-            <Button
-              variant="none"
-              className="n-rounded"
-              style={{
-                width: "var(--n-input-height)",
-                height: "var(--n-input-height)",
-              }}
-              icon={allSelectableTabItems[0].icon}
-              tooltip={
-                allSelectableTabItems[0].tooltip ??
-                allSelectableTabItems[0].title
+      {/* Main content area with drawer overlay */}
+      <div className="n-flex-1 n-flex n-flex-col n-relative n-min-h-0">
+        {/* Drawer panel - positioned absolutely over content */}
+        {isDrawerOpen && (
+          <div className="n-absolute n-inset-0 n-z-20 n-flex n-flex-col">
+            {/* Drawer content */}
+            <div className="n-flex-none n-max-h-[50vh] n-overflow-auto n-bg-sidebar-background n-border-b n-border-divider-strong n-shadow-lg">
+              {activeDrawerPanel}
+            </div>
+            {/* Backdrop - click to close */}
+            <div
+              className="n-flex-1 n-bg-black/30"
+              onClick={() =>
+                setLayoutState({
+                  leftSidebarCollapsed: true,
+                  rightSidebarCollapsed: true,
+                })
               }
-              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;
-              })()}
-              onClick={() => {
-                const value = allSelectableTabItems[0].value as
-                  | LeftTab
-                  | RightTab;
-                handleSelectTab(value);
-              }}
             />
-          )}
-        </div>
-      )}
+          </div>
+        )}
 
-      <div className="n-flex-1 n-flex n-relative">{centerPanel}</div>
-
-      {leftPanel && (
-        <Drawer
-          modal={false}
-          ref={leftSidebarRef}
-          className="n-flex-1"
-          style={
-            useCompactInToolbar
-              ? undefined
-              : { left: 48, maxWidth: "calc(100% - 48px)" }
-          }
-          overlayStyle={useCompactInToolbar ? undefined : { left: 48 }}
-          open={!leftSidebarCollapsed}
-          positioning="absolute"
-          side="left"
-          trigger={null}
-          portalContainer={portalContainer.current}
-          onOpenChange={(open) => {
-            setLayoutState({
-              leftSidebarCollapsed: !open,
-              rightSidebarCollapsed: rightSidebarCollapsed,
-            });
-          }}
-        >
-          {leftPanel}
-        </Drawer>
-      )}
-      {rightPanel && (
-        <Drawer
-          id={RIGHT_SIDEBAR_ID}
-          modal={false}
-          ref={rightSidebarRef}
-          className="n-flex-1"
-          style={
-            useCompactInToolbar
-              ? undefined
-              : { left: 48, maxWidth: "calc(100% - 48px)" }
-          }
-          overlayStyle={useCompactInToolbar ? undefined : { left: 48 }}
-          open={!rightSidebarCollapsed}
-          positioning="absolute"
-          side="left"
-          trigger={null}
-          portalContainer={portalContainer.current}
-          onOpenChange={(open) => {
-            setLayoutState({
-              leftSidebarCollapsed: leftSidebarCollapsed,
-              rightSidebarCollapsed: !open,
-            });
-          }}
-        >
-          {rightPanel}
-        </Drawer>
-      )}
+        {/* Center content */}
+        <div className="n-flex-1 n-flex n-relative n-min-h-0">
+          {centerPanel}
+        </div>
+      </div>
     </div>
   );
 });

package/src/components/workspace/HorizontalTabBar.tsx

@@ -0,0 +1,43 @@
+import { memoGeneric } from "@noya-app/react-utils";
+import React from "react";
+import { isSelectableMenuItem, MenuItem } from "../internal/Menu";
+import { SegmentedControl } from "../SegmentedControl";
+
+type HorizontalTabBarProps<TabValue extends string> = {
+  items: MenuItem<TabValue>[];
+  activeValue: TabValue | undefined;
+  onChange: (value: TabValue) => void;
+};
+
+export const HorizontalTabBar = memoGeneric(function HorizontalTabBar<
+  TabValue extends string,
+>({ items, activeValue, onChange }: HorizontalTabBarProps<TabValue>) {
+  const selectableItems = items.filter(isSelectableMenuItem);
+
+  // Don't render if there's nothing to switch between
+  if (selectableItems.length <= 1) {
+    return null;
+  }
+
+  return (
+    <div className="n-flex n-flex-col n-bg-sidebar-background n-flex-none">
+      <div className="n-flex n-flex-row n-px-3 n-py-3">
+        <SegmentedControl
+          enableCompactMode
+          className="n-flex-1"
+          value={activeValue}
+          onValueChange={onChange}
+          variant="default"
+          items={selectableItems.map((item) => ({
+            value: item.value,
+            title: item.title,
+            icon: item.icon,
+            tooltip: item.tooltip,
+            disabled: item.disabled,
+          }))}
+        />
+      </div>
+      {/* <Divider /> */}
+    </div>
+  );
+});