@noya-app/noya-designsystem 0.1.89 → 0.1.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.89",
+  "version": "0.1.91",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -29,9 +29,9 @@
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@floating-ui/react": "^0.27.0",
-    "@noya-app/noya-colorpicker": "0.1.35",
-    "@noya-app/noya-utils": "0.1.9",
-    "@noya-app/noya-geometry": "0.1.18",
+    "@noya-app/noya-colorpicker": "0.1.36",
+    "@noya-app/noya-utils": "0.1.10",
+    "@noya-app/noya-geometry": "0.1.19",
     "@noya-app/noya-icons": "0.1.20",
     "@noya-app/noya-keymap": "0.1.4",
     "@noya-app/noya-tailwind-config": "0.1.10",

package/src/components/BaseToolbar.tsx

@@ -9,6 +9,7 @@ export interface BaseToolbarProps {
   left?: React.ReactNode;
   right?: React.ReactNode;
   logo?: React.ReactNode;
+  showLogoDivider?: boolean;
   showDivider?: boolean;
   className?: string;
   innerClassName?: string;
@@ -63,6 +64,7 @@ export function BaseToolbar({
   left,
   right,
   logo,
+  showLogoDivider = true,
   showDivider = true,
   className,
   innerClassName,
@@ -97,7 +99,7 @@ export function BaseToolbar({
       {logo && (
         <>
           {logo}
-          <DividerVertical />
+          {showLogoDivider && <DividerVertical />}
         </>
       )}
       <Spacer.Horizontal size={10} />

package/src/components/Dialog.tsx

@@ -19,7 +19,10 @@ const StyledBackdrop = forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Backdrop
     ref={ref}
-    className={cx(`n-fixed n-inset-0 n-bg-[rgba(0,0,0,0.5)]`, className)}
+    className={cx(
+      `n-fixed n-inset-0 n-z-[999] n-bg-[rgba(0,0,0,0.5)]`,
+      className
+    )}
     {...props}
   />
 ));

package/src/components/OverlayToolbar.tsx

@@ -1,17 +1,23 @@
 "use client";
 
-import React, { useMemo } from "react";
+import React, { useCallback, useLayoutEffect, useMemo, useRef } from "react";
 import { cx } from "../utils/classNames";
 import { toolbarTransparentStyle } from "./BaseToolbar";
 
 export type OverlayLayout = "bottomCenterTopRight" | "topLeftTopRight";
 
+export type OverlayToolbarRect = {
+  id: string;
+  rect: { x: number; y: number; width: number; height: number };
+};
+
 export interface OverlayToolbarProps {
   left?: React.ReactNode;
   right?: React.ReactNode;
   overlayLayout?: OverlayLayout;
   className?: string;
   style?: React.CSSProperties;
+  onRectsChange?: (rects: OverlayToolbarRect[]) => void;
 }
 
 const panelClassName =
@@ -23,11 +29,16 @@ export function OverlayToolbar({
   overlayLayout = "bottomCenterTopRight",
   className,
   style,
+  onRectsChange,
 }: OverlayToolbarProps) {
   const resolvedLayout =
     overlayLayout === "topLeftTopRight"
       ? "topLeftTopRight"
       : "bottomCenterTopRight";
+  const leftPanelRef = useRef<HTMLDivElement>(null);
+  const rightPanelRef = useRef<HTMLDivElement>(null);
+  const hasLeft = Boolean(left);
+  const hasRight = Boolean(right);
 
   // Merge transparent backgrounds with custom style
   const panelStyle = useMemo(
@@ -38,11 +49,85 @@ export function OverlayToolbar({
     [style]
   );
 
+  const emitRects = useCallback(() => {
+    if (!onRectsChange) return;
+
+    const panels = [
+      {
+        id:
+          resolvedLayout === "topLeftTopRight"
+            ? "noya-toolbar-top-left"
+            : "noya-toolbar-bottom-center",
+        element: leftPanelRef.current,
+      },
+      {
+        id: "noya-toolbar-top-right",
+        element: rightPanelRef.current,
+      },
+    ];
+
+    onRectsChange(
+      panels.flatMap(({ id, element }) => {
+        if (!element) return [];
+
+        const rect = element.getBoundingClientRect();
+        const containerRect = element
+          .closest<HTMLElement>("[data-workspace-content]")
+          ?.getBoundingClientRect();
+        return [
+          {
+            id,
+            rect: {
+              x: rect.x - (containerRect?.x ?? 0),
+              y: rect.y - (containerRect?.y ?? 0),
+              width: rect.width,
+              height: rect.height,
+            },
+          },
+        ];
+      })
+    );
+  }, [onRectsChange, resolvedLayout]);
+
+  useLayoutEffect(() => {
+    if (!onRectsChange) return;
+
+    let animationFrame: number | undefined;
+    const scheduleEmit = () => {
+      if (animationFrame !== undefined) {
+        cancelAnimationFrame(animationFrame);
+      }
+      animationFrame = requestAnimationFrame(emitRects);
+    };
+
+    emitRects();
+
+    const resizeObserver =
+      typeof ResizeObserver === "undefined"
+        ? undefined
+        : new ResizeObserver(scheduleEmit);
+    const panels = [leftPanelRef.current, rightPanelRef.current];
+    panels.forEach((panel) => panel && resizeObserver?.observe(panel));
+    window.addEventListener("resize", scheduleEmit);
+    window.addEventListener("scroll", scheduleEmit, true);
+
+    return () => {
+      if (animationFrame !== undefined) {
+        cancelAnimationFrame(animationFrame);
+      }
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", scheduleEmit);
+      window.removeEventListener("scroll", scheduleEmit, true);
+      onRectsChange([]);
+    };
+  }, [emitRects, hasLeft, hasRight, onRectsChange]);
+
   const renderLeftPanel = (overlayId: string) => {
     if (!left) return null;
 
     return (
       <div
+        ref={leftPanelRef}
         className={panelClassName}
         data-embedded-overlay-id={overlayId}
         style={panelStyle}
@@ -84,6 +169,7 @@ export function OverlayToolbar({
           )}
         >
           <div
+            ref={rightPanelRef}
             className={panelClassName}
             data-embedded-overlay-id="noya-toolbar-top-right"
             style={panelStyle}

package/src/components/__tests__/BaseToolbar.test.tsx

@@ -0,0 +1,22 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { cleanup, render } from "@testing-library/react";
+import React from "react";
+import { BaseToolbar } from "../BaseToolbar";
+
+afterEach(cleanup);
+
+describe("BaseToolbar", () => {
+  test("shows a vertical divider after the logo by default", () => {
+    const { container } = render(<BaseToolbar logo={<div>Logo</div>} />);
+
+    expect(container.querySelector(".n-w-px")).toBeTruthy();
+  });
+
+  test("can hide the vertical divider after the logo", () => {
+    const { container } = render(
+      <BaseToolbar logo={<div>Back</div>} showLogoDivider={false} />
+    );
+
+    expect(container.querySelector(".n-w-px")).toBeNull();
+  });
+});

package/src/components/__tests__/DialogNavigator.test.tsx

@@ -64,6 +64,19 @@ describe("DialogNavigator", () => {
     expect(view.getByRole("button", { name: "Close" })).toBeTruthy();
   });
 
+  test("stacks the backdrop above elevated page controls", () => {
+    render(<TestDialogNavigator onOpenChange={() => {}} />);
+
+    const backdrop = Array.from(document.querySelectorAll("div")).find(
+      (element) =>
+        element.classList.contains("n-bg-[rgba(0,0,0,0.5)]") &&
+        element.classList.contains("n-inset-0")
+    );
+
+    expect(backdrop).toBeTruthy();
+    expect(backdrop?.classList.contains("n-z-[999]")).toBe(true);
+  });
+
   test("combines navigation and dialog controls in the header", async () => {
     const onOpenChange = mock(() => {});
     const view = render(<TestDialogNavigator onOpenChange={onOpenChange} />);

package/src/components/__tests__/OverlayToolbar.test.tsx

@@ -0,0 +1,63 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { cleanup, render } from "@testing-library/react";
+import React from "react";
+import { OverlayToolbar, OverlayToolbarRect } from "../OverlayToolbar";
+
+afterEach(cleanup);
+
+describe("OverlayToolbar", () => {
+  test("reports the bounds of its local panels", () => {
+    const originalGetBoundingClientRect =
+      HTMLElement.prototype.getBoundingClientRect;
+    const updates: OverlayToolbarRect[][] = [];
+
+    HTMLElement.prototype.getBoundingClientRect = function () {
+      const id = this.getAttribute("data-embedded-overlay-id");
+      const rect = this.hasAttribute("data-workspace-content")
+        ? { x: 100, y: 200, width: 800, height: 600 }
+        : id === "noya-toolbar-top-left"
+          ? { x: 116, y: 216, width: 120, height: 40 }
+          : id === "noya-toolbar-top-right"
+            ? { x: 700, y: 224, width: 160, height: 48 }
+            : undefined;
+
+      if (!rect) return originalGetBoundingClientRect.call(this);
+
+      return {
+        ...rect,
+        top: rect.y,
+        right: rect.x + rect.width,
+        bottom: rect.y + rect.height,
+        left: rect.x,
+        toJSON: () => rect,
+      } as DOMRect;
+    };
+
+    try {
+      render(
+        <div data-workspace-content>
+          <OverlayToolbar
+            left={<div>Left</div>}
+            right={<div>Right</div>}
+            overlayLayout="topLeftTopRight"
+            onRectsChange={(rects) => updates.push(rects)}
+          />
+        </div>
+      );
+
+      expect(updates.at(-1)).toEqual([
+        {
+          id: "noya-toolbar-top-left",
+          rect: { x: 16, y: 16, width: 120, height: 40 },
+        },
+        {
+          id: "noya-toolbar-top-right",
+          rect: { x: 600, y: 24, width: 160, height: 48 },
+        },
+      ]);
+    } finally {
+      HTMLElement.prototype.getBoundingClientRect =
+        originalGetBoundingClientRect;
+    }
+  });
+});

package/src/components/workspace/DrawerWorkspaceLayout.tsx

@@ -182,7 +182,7 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
       )}
 
       {compactTabItem && (
-        <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">
+        <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-b n-border-divider-strong n-z-10 n-flex n-items-center n-justify-center">
           <Button
             aria-label={
               typeof compactTabItem.title === "string"

package/src/components/workspace/WorkspaceLayout.tsx

@@ -16,7 +16,11 @@ import React, {
 } from "react";
 import { cx } from "../../utils/classNames";
 import { MenuItem } from "../internal/Menu";
-import { OverlayLayout, OverlayToolbar } from "../OverlayToolbar";
+import {
+  OverlayLayout,
+  OverlayToolbar,
+  OverlayToolbarRect,
+} from "../OverlayToolbar";
 import { DrawerWorkspaceLayout } from "./DrawerWorkspaceLayout";
 import { PanelWorkspaceLayout } from "./PanelWorkspaceLayout";
 import { renderPanelChildren } from "./renderPanelChildren";
@@ -76,6 +80,10 @@ export interface WorkspaceLayoutProps<
    * @default "bottomCenterTopRight"
    */
   overlayLayout?: OverlayLayout;
+  /** Empty space to reserve above workspace content. @default 0 */
+  contentTopInset?: number;
+  /** Called when the local overlay toolbar panels move or resize. */
+  onOverlayToolbarRectsChange?: (rects: OverlayToolbarRect[]) => void;
   sideType?: SideType;
   sideTypeBreakpoint?: number;
   detectSize?: DetectSizeType;
@@ -165,6 +173,8 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     overlayToolbarLeft,
     overlayToolbarRight,
     overlayLayout,
+    contentTopInset = 0,
+    onOverlayToolbarRectsChange,
     children,
     sideType = "auto",
     sideTypeBreakpoint = 800,
@@ -450,7 +460,13 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
       data-theme={theme}
     >
       {!isOverlay && toolbar}
-      <div className="n-flex n-flex-row n-flex-1 n-relative">
+      <div
+        className="n-flex n-flex-row n-flex-1 n-min-h-0 n-relative"
+        data-workspace-content
+        style={
+          contentTopInset > 0 ? { paddingTop: contentTopInset } : undefined
+        }
+      >
         {readyToRender && (
           <>
             <LayoutComponent
@@ -478,6 +494,7 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
                 left={overlayToolbarLeft}
                 right={overlayToolbarRight}
                 overlayLayout={overlayLayout}
+                onRectsChange={onOverlayToolbarRectsChange}
               />
             )}
           </>

package/src/components/workspace/__tests__/DrawerWorkspaceLayout.test.tsx

@@ -27,7 +27,12 @@ describe("DrawerWorkspaceLayout", () => {
 
     expect(container.textContent).toBe("Center content");
 
-    fireEvent.click(getByRole("button", { name: "Navigation" }));
+    const navigationButton = getByRole("button", { name: "Navigation" });
+    const compactTrigger = navigationButton.parentElement;
+    expect(compactTrigger?.classList.contains("n-border-b")).toBe(true);
+    expect(compactTrigger?.classList.contains("n-border-r")).toBe(false);
+
+    fireEvent.click(navigationButton);
 
     expect(getByText("Sidebar content")).toBeTruthy();
   });

package/src/components/workspace/__tests__/WorkspaceLayout.test.tsx

@@ -0,0 +1,41 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { cleanup, render } from "@testing-library/react";
+import React from "react";
+import { WorkspaceLayout } from "../WorkspaceLayout";
+
+afterEach(cleanup);
+
+describe("WorkspaceLayout", () => {
+  test("applies the top inset to content without moving the toolbar", () => {
+    const { container, getByText } = render(
+      <WorkspaceLayout
+        contentTopInset={72}
+        detectSize="window"
+        toolbar={<div>Toolbar</div>}
+      >
+        <div>Content</div>
+      </WorkspaceLayout>
+    );
+
+    const content = container.querySelector<HTMLElement>(
+      "[data-workspace-content]"
+    );
+
+    expect(content?.style.paddingTop).toBe("72px");
+    expect(content?.contains(getByText("Toolbar"))).toBe(false);
+    expect(content?.contains(getByText("Content"))).toBe(true);
+  });
+
+  test("does not pad content when the inset is zero", () => {
+    const { container } = render(
+      <WorkspaceLayout contentTopInset={0} detectSize="window">
+        <div>Content</div>
+      </WorkspaceLayout>
+    );
+
+    const content = container.querySelector<HTMLElement>(
+      "[data-workspace-content]"
+    );
+    expect(content?.style.paddingTop).toBe("");
+  });
+});