@noya-app/noya-designsystem 0.1.83 → 0.1.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.83",
+  "version": "0.1.85",
   "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.34",
+    "@noya-app/noya-colorpicker": "0.1.35",
     "@noya-app/noya-utils": "0.1.9",
-    "@noya-app/noya-geometry": "0.1.17",
+    "@noya-app/noya-geometry": "0.1.18",
     "@noya-app/noya-icons": "0.1.19",
     "@noya-app/noya-keymap": "0.1.4",
     "@noya-app/noya-tailwind-config": "0.1.10",

package/src/components/Toast.tsx

@@ -38,28 +38,35 @@ function ToastContent({ toast }: { toast: ToastObject }) {
   return (
     <ToastPrimitive.Root
       toast={toast}
-      className="n-px-2 n-py-2.5 n-grid n-grid-cols-[auto_max-content] n-gap-x-2.5 n-items-center n-rounded n-text-sm n-bg-popover-background n-shadow-popover n-text-text-muted"
+      className="n-relative n-flex n-items-start n-gap-2 n-rounded n-text-sm n-bg-popover-background n-shadow-popover n-text-text-muted n-px-3 n-py-2.5 n-pr-10"
     >
-      {toast.data?.title && (
-        <ToastPrimitive.Title
-          className={`n-mb-[5px] ${textStyles.label} n-font-bold n-text-text`}
+      <div className="n-flex n-flex-col n-gap-0.5 n-min-w-0">
+        {toast.data?.title && (
+          <ToastPrimitive.Title
+            className={`${textStyles.label} n-font-bold n-text-text`}
+          >
+            {toast.data.title}
+          </ToastPrimitive.Title>
+        )}
+        <ToastPrimitive.Description
+          className={`${textStyles.small} n-text-text-muted`}
         >
-          {toast.data.title}
-        </ToastPrimitive.Title>
-      )}
-      <ToastPrimitive.Description
-        className={`${textStyles.small} n-text-text-muted`}
-      >
-        {toast.data?.content}
-      </ToastPrimitive.Description>
-      {toast.data?.action && (
-        <ToastPrimitive.Action render={<span />}>
-          {toast.data.action}
-        </ToastPrimitive.Action>
-      )}
+          {toast.data?.content}
+        </ToastPrimitive.Description>
+        {toast.data?.action && (
+          <ToastPrimitive.Action render={<span className="n-mt-1" />}>
+            {toast.data.action}
+          </ToastPrimitive.Action>
+        )}
+      </div>
       <ToastPrimitive.Close
         aria-label="Close"
-        render={<IconButton iconName="Cross1Icon" />}
+        render={
+          <IconButton
+            className="!n-absolute n-top-2 n-right-2"
+            iconName="Cross1Icon"
+          />
+        }
       />
     </ToastPrimitive.Root>
   );

package/src/components/workspace/DrawerWorkspaceLayout.tsx

@@ -3,6 +3,7 @@
 import { memoGeneric } from "@noya-app/react-utils";
 import React, { useMemo, useState } from "react";
 import { cssVarNames } from "../../theme";
+import { Button } from "../Button";
 import { Divider } from "../Divider";
 import { isSelectableMenuItem, MenuItem } from "../internal/Menu";
 import { ToolbarMenu } from "../Toolbar";
@@ -24,6 +25,7 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
   rightTabValue,
   onChangeRightTab,
   onChangeLeftTab,
+  compactDrawerMenu,
 }: LayoutProps<LeftTab, RightTab>) {
   const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] =
     useState<PanelLayoutState>({
@@ -79,6 +81,10 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
   );
 
   const hasTabs = allSelectableTabItems.length > 0;
+  const compactTabItem =
+    compactDrawerMenu && allSelectableTabItems.length === 1
+      ? allSelectableTabItems[0]
+      : undefined;
 
   const leftSelectableTabItems = useMemo(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
@@ -157,7 +163,7 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
       className="n-flex n-flex-col n-flex-1 n-relative focus:n-outline-none"
     >
       {/* Horizontal toggle bar - secondary toolbar row */}
-      {hasTabs && (
+      {hasTabs && !compactTabItem && (
         <>
           <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"
@@ -175,6 +181,28 @@ 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">
+          <Button
+            aria-label={
+              typeof compactTabItem.title === "string"
+                ? compactTabItem.title
+                : "Toggle sidebar"
+            }
+            variant="none"
+            className="n-rounded"
+            style={{
+              width: "var(--n-input-height)",
+              height: "var(--n-input-height)",
+            }}
+            icon={compactTabItem.icon}
+            tooltip={compactTabItem.tooltip ?? compactTabItem.title}
+            active={activeTabValue === compactTabItem.value}
+            onClick={() => handleSelectTab(compactTabItem.value)}
+          />
+        </div>
+      )}
+
       {/* 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 */}

package/src/components/workspace/WorkspaceLayout.tsx

@@ -79,6 +79,11 @@ export interface WorkspaceLayoutProps<
   sideType?: SideType;
   sideTypeBreakpoint?: number;
   detectSize?: DetectSizeType;
+  /**
+   * Render a single drawer tab as an overlaid toolbar button instead of a
+   * dedicated toolbar row.
+   */
+  compactDrawerMenu?: boolean;
   /**
    * Callback when left sidebar state changes (width or collapsed).
    */
@@ -164,6 +169,7 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     sideType = "auto",
     sideTypeBreakpoint = 800,
     detectSize = "container",
+    compactDrawerMenu,
     leftOptions: {
       visible: leftVisible = true,
       minSize: leftMinSize = 200,
@@ -462,6 +468,7 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
               autoSavePrefix={autoSavePrefix}
               leftSidebarRef={leftSidebarRef}
               rightSidebarRef={rightSidebarRef}
+              compactDrawerMenu={compactDrawerMenu}
               onLeftSidebarStateChange={onLeftSidebarStateChange}
               onRightSidebarStateChange={onRightSidebarStateChange}
               shouldAutoSave={shouldAutoSave}

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

@@ -0,0 +1,34 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import React from "react";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { DrawerWorkspaceLayout } from "../DrawerWorkspaceLayout";
+import type { SidebarRef } from "../types";
+
+afterEach(cleanup);
+
+describe("DrawerWorkspaceLayout", () => {
+  test("renders a single compact tab without a dedicated toolbar row", () => {
+    const leftSidebarRef = React.createRef<SidebarRef>();
+    const rightSidebarRef = React.createRef<SidebarRef>();
+    const { container, getByRole, getByText } = render(
+      <DrawerWorkspaceLayout
+        leftPanel={<div>Sidebar content</div>}
+        leftTabItems={[{ title: "Navigation", value: "navigation" }]}
+        leftTabValue="navigation"
+        rightPanel={null}
+        centerPanel={<div>Center content</div>}
+        leftSidebarOptions={{}}
+        rightSidebarOptions={{}}
+        leftSidebarRef={leftSidebarRef}
+        rightSidebarRef={rightSidebarRef}
+        compactDrawerMenu
+      />
+    );
+
+    expect(container.textContent).toBe("Center content");
+
+    fireEvent.click(getByRole("button", { name: "Navigation" }));
+
+    expect(getByText("Sidebar content")).toBeTruthy();
+  });
+});

package/src/components/workspace/types.ts

@@ -58,6 +58,11 @@ export type LayoutProps<
   autoSavePrefix?: string;
   leftSidebarRef: React.RefObject<SidebarRef | null>;
   rightSidebarRef: React.RefObject<SidebarRef | null>;
+  /**
+   * Render a single drawer tab as an overlaid toolbar button instead of a
+   * dedicated toolbar row.
+   */
+  compactDrawerMenu?: boolean;
   /**
    * Callback when left sidebar state changes (width or collapsed).
    */

package/src/contexts/DialogContext.tsx

@@ -231,20 +231,27 @@ export const DialogProvider = function DialogProvider({
   const confirmButtonRef = useRef<HTMLButtonElement>(null);
   const dialogRef = useRef<IDialog>(null);
 
-  // Handle auto-focus when dialog opens
+  // Handle auto-focus when dialog opens. The `resolve` function is created
+  // once per dialog instance and preserved across state updates (e.g. typing
+  // in the input replaces `contents` but keeps the same `resolve`), so keying
+  // the effect on it ensures focus is only set when a dialog opens, not on
+  // every keystroke.
+  const contentsType = contents?.type;
+  const contentsInstance = contents?.resolve;
+
   React.useEffect(() => {
-    if (!contents) return;
+    if (!contentsType || !contentsInstance) return;
 
     // Use requestAnimationFrame to ensure the dialog is rendered
     requestAnimationFrame(() => {
-      if (contents.type === "input") {
+      if (contentsType === "input") {
         inputRef.current?.focus();
         inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
-      } else if (contents.type === "confirmation") {
+      } else if (contentsType === "confirmation") {
         confirmButtonRef.current?.focus();
       }
     });
-  }, [contents]);
+  }, [contentsType, contentsInstance]);
 
   const containsElement = useCallback((element: HTMLElement) => {
     if (!dialogRef.current) return false;

package/src/contexts/__tests__/DialogContext.test.tsx

@@ -0,0 +1,142 @@
+import { afterEach, describe, expect, mock, test } from "bun:test";
+import React from "react";
+
+// `@radix-ui/react-icons` has a nested React 18 copy in node_modules, which
+// creates legacy React elements that React 19 refuses to render under
+// `bun test` (app bundlers alias react, so this only affects tests). Mock the
+// icon used by the Dialog close button so everything renders with one React.
+const actualIcons = await import("@radix-ui/react-icons");
+
+mock.module("@radix-ui/react-icons", () => ({
+  ...actualIcons,
+  Cross1Icon: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg {...props} data-testid="cross-icon" />
+  ),
+}));
+
+const { cleanup, fireEvent, render, waitFor } = await import(
+  "@testing-library/react"
+);
+const { DialogProvider, useOpenInputDialog } = await import(
+  "../DialogContext"
+);
+
+const focusListeners: ((event: Event) => void)[] = [];
+
+afterEach(() => {
+  cleanup();
+
+  for (const listener of focusListeners) {
+    document.removeEventListener("focus", listener, true);
+  }
+  focusListeners.length = 0;
+});
+
+function flushAnimationFrames() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+}
+
+function OpenDialogButton({
+  onResult,
+}: {
+  onResult: (value: string | undefined) => void;
+}) {
+  const openInputDialog = useOpenInputDialog();
+
+  return (
+    <button
+      onClick={async () => {
+        const result = await openInputDialog({
+          title: "Rename",
+          initialValue: "hello",
+        });
+        onResult(result);
+      }}
+    >
+      Open
+    </button>
+  );
+}
+
+async function openInputDialogForTest(
+  onResult: (value: string | undefined) => void = () => {}
+) {
+  const utils = render(
+    <DialogProvider>
+      <OpenDialogButton onResult={onResult} />
+    </DialogProvider>
+  );
+
+  // Count focus events on the dialog's input, attached before the dialog
+  // opens so the initial auto-focus is captured
+  let focusCount = 0;
+  const handleFocus = (event: Event) => {
+    if ((event.target as HTMLElement).tagName === "INPUT") {
+      focusCount++;
+    }
+  };
+  document.addEventListener("focus", handleFocus, true);
+  focusListeners.push(handleFocus);
+
+  fireEvent.click(utils.getByText("Open"));
+
+  const input = await waitFor(() => {
+    const element = document.querySelector<HTMLInputElement>(
+      'input[type="text"], input:not([type])'
+    );
+    if (!element) throw new Error("Input not found");
+    return element;
+  });
+
+  await flushAnimationFrames();
+
+  return { ...utils, input, getFocusCount: () => focusCount };
+}
+
+describe("DialogProvider input dialog", () => {
+  test("focuses and selects the initial value when opened", async () => {
+    const { input, getFocusCount } = await openInputDialogForTest();
+
+    expect(getFocusCount()).toBeGreaterThanOrEqual(1);
+    expect(input.selectionStart).toEqual(0);
+    expect(input.selectionEnd).toEqual("hello".length);
+  });
+
+  test("does not re-focus or re-select on keystrokes", async () => {
+    const { input, getFocusCount } = await openInputDialogForTest();
+
+    const focusCountAfterOpen = getFocusCount();
+
+    fireEvent.change(input, { target: { value: "hello w" } });
+
+    // Simulate the caret position after typing (collapsed at the end)
+    input.setSelectionRange(input.value.length, input.value.length);
+
+    await flushAnimationFrames();
+
+    expect(input.value).toEqual("hello w");
+    // The focus side effect must not run again on a keystroke
+    expect(getFocusCount()).toEqual(focusCountAfterOpen);
+    // Selection must not be reset to cover the whole value
+    expect(input.selectionStart).toEqual(input.value.length);
+    expect(input.selectionEnd).toEqual(input.value.length);
+  });
+
+  test("submits the typed value on Enter", async () => {
+    let result: string | undefined;
+    const { input } = await openInputDialogForTest((value) => {
+      result = value;
+    });
+
+    fireEvent.change(input, { target: { value: "world" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    await waitFor(() => {
+      expect(result).toEqual("world");
+    });
+  });
+});