@noya-app/noya-designsystem 0.1.89 → 0.1.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.89",
+  "version": "0.1.90",
   "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/__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/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/__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();
   });