@noya-app/noya-designsystem 0.1.88 → 0.1.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.88",
+  "version": "0.1.90",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -29,10 +29,10 @@
     "@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-icons": "0.1.19",
+    "@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",
     "@radix-ui/react-compose-refs": "^1.0.0",

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/InputField.tsx

@@ -434,23 +434,25 @@ function InputFieldNumberInput(props: InputFieldNumberInputProps) {
   );
 
   const handleChange = useCallback(
-    (value: string) => {
-      if (value === "" || value === "-" || value === ".") {
-        setInternalValue(value);
+    (inputValue: string) => {
+      if (inputValue === "" || inputValue === "-" || inputValue === ".") {
+        setInternalValue(inputValue);
         if (triggersOnEmpty) {
           onChange?.(0, { isEmpty: true });
         }
         return;
       }
 
-      if (value.endsWith(".")) {
-        setInternalValue(value);
+      if (inputValue.endsWith(".")) {
+        setInternalValue(inputValue);
         return;
       }
 
-      setInternalValue(undefined);
+      // Keep the text being edited stable if the parent rejects or normalizes
+      // an intermediate numeric value. The accepted prop value takes over on blur.
+      setInternalValue(inputValue);
 
-      const newValue = parseNumber(value);
+      const newValue = parseNumber(inputValue);
 
       if (!isNaN(newValue)) {
         onChange?.(newValue, { isEmpty: false });

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__/InputField.test.tsx

@@ -1,6 +1,6 @@
-import { act, cleanup, render } from "@testing-library/react";
-import { afterEach, describe, expect, test } from "bun:test";
-import React, { useEffect, useRef } from "react";
+import { act, cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, describe, expect, mock, test } from "bun:test";
+import React, { useEffect, useRef, useState } from "react";
 import { InputField } from "../InputField";
 
 afterEach(cleanup);
@@ -33,4 +33,228 @@ describe("InputField", () => {
 
     expect(document.activeElement === input).toBe(true);
   });
+
+  test("keeps a bounded number edit buffered until it becomes valid", () => {
+    const attemptedValues: number[] = [];
+
+    function BoundedNumberInput() {
+      const [value, setValue] = useState(400);
+      const [, setRevision] = useState(0);
+
+      return (
+        <InputField.Root>
+          <InputField.NumberInput
+            value={value}
+            onChange={(nextValue) => {
+              attemptedValues.push(nextValue);
+              if (nextValue >= 100 && nextValue <= 900) {
+                setValue(nextValue);
+              }
+              setRevision((revision) => revision + 1);
+            }}
+          />
+        </InputField.Root>
+      );
+    }
+
+    const { container } = render(<BoundedNumberInput />);
+    const input = container.querySelector("input")!;
+
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "7" } });
+    expect(input.value).toBe("7");
+
+    fireEvent.change(input, { target: { value: `${input.value}0` } });
+    expect(input.value).toBe("70");
+
+    fireEvent.change(input, { target: { value: `${input.value}0` } });
+    expect(input.value).toBe("700");
+    expect(attemptedValues).toEqual([7, 70, 700]);
+
+    fireEvent.blur(input);
+    expect(input.value).toBe("700");
+  });
+
+  test("restores the accepted number when a buffered edit remains invalid", () => {
+    function BoundedNumberInput() {
+      const [, setRevision] = useState(0);
+
+      return (
+        <InputField.Root>
+          <InputField.NumberInput
+            value={400}
+            onChange={() => setRevision((value) => value + 1)}
+          />
+        </InputField.Root>
+      );
+    }
+
+    const { container } = render(<BoundedNumberInput />);
+    const input = container.querySelector("input")!;
+
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "70" } });
+    expect(input.value).toBe("70");
+
+    fireEvent.blur(input);
+    expect(input.value).toBe("400");
+  });
+
+  test("shows a parent-normalized number after blur", () => {
+    function RoundedNumberInput() {
+      const [value, setValue] = useState(12);
+
+      return (
+        <InputField.Root>
+          <InputField.NumberInput
+            value={value}
+            onChange={(nextValue) =>
+              setValue(Math.round(nextValue * 100) / 100)
+            }
+          />
+        </InputField.Root>
+      );
+    }
+
+    const { container } = render(<RoundedNumberInput />);
+    const input = container.querySelector("input")!;
+
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "12.345" } });
+    expect(input.value).toBe("12.345");
+
+    fireEvent.blur(input);
+    expect(input.value).toBe("12.35");
+  });
+
+  test("buffers incomplete and invalid numeric text without notifying", () => {
+    const onChange = mock(() => {});
+    const { container } = render(
+      <InputField.Root>
+        <InputField.NumberInput value={12} onChange={onChange} />
+      </InputField.Root>
+    );
+    const input = container.querySelector("input")!;
+
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "12." } });
+    expect(input.value).toBe("12.");
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.change(input, { target: { value: "not-a-number" } });
+    expect(input.value).toBe("not-a-number");
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.blur(input);
+    expect(input.value).toBe("12");
+  });
+
+  test("clears a buffered edit when nudging", () => {
+    function NudgeableNumberInput() {
+      const [value, setValue] = useState(400);
+
+      return (
+        <InputField.Root>
+          <InputField.NumberInput
+            value={value}
+            onChange={(nextValue) => {
+              if (nextValue >= 100) setValue(nextValue);
+            }}
+            onNudge={(amount) => setValue((current) => current + amount)}
+          />
+        </InputField.Root>
+      );
+    }
+
+    const { container } = render(<NudgeableNumberInput />);
+    const input = container.querySelector("input")!;
+
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "70" } });
+    expect(input.value).toBe("70");
+
+    fireEvent.keyDown(input, { key: "ArrowUp", code: "ArrowUp" });
+    expect(input.value).toBe("401");
+  });
+
+  test("supports clearing and re-entering optional numbers", () => {
+    const changes: Array<{ value: number; isEmpty: boolean }> = [];
+
+    function OptionalNumberInput() {
+      const [value, setValue] = useState<number>(42);
+
+      return (
+        <InputField.Root>
+          <InputField.NumberInput
+            value={value}
+            triggersOnEmpty
+            onChange={(nextValue, options) => {
+              changes.push({ value: nextValue, isEmpty: options.isEmpty });
+              setValue(options.isEmpty ? undefined : nextValue);
+            }}
+          />
+        </InputField.Root>
+      );
+    }
+
+    const { container } = render(<OptionalNumberInput />);
+    const input = container.querySelector("input")!;
+
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "" } });
+    expect(input.value).toBe("");
+
+    fireEvent.change(input, { target: { value: "1" } });
+    fireEvent.change(input, { target: { value: "10" } });
+    expect(input.value).toBe("10");
+    expect(changes).toEqual([
+      { value: 0, isEmpty: true },
+      { value: 1, isEmpty: false },
+      { value: 10, isEmpty: false },
+    ]);
+  });
+
+  test("defers external prop updates until a focused edit blurs", () => {
+    let setExternalValue: (value: number) => void = () => {};
+
+    function ExternallyUpdatedNumberInput() {
+      const [value, setValue] = useState(400);
+      setExternalValue = setValue;
+
+      return (
+        <InputField.Root>
+          <InputField.NumberInput value={value} onChange={() => {}} />
+        </InputField.Root>
+      );
+    }
+
+    const { container } = render(<ExternallyUpdatedNumberInput />);
+    const input = container.querySelector("input")!;
+
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "70" } });
+    act(() => setExternalValue(500));
+    expect(input.value).toBe("70");
+
+    fireEvent.blur(input);
+    expect(input.value).toBe("500");
+  });
+
+  test("keeps number submission mode separate from change buffering", () => {
+    const onSubmit = mock(() => {});
+    const { container } = render(
+      <InputField.Root>
+        <InputField.NumberInput value={400} onSubmit={onSubmit} />
+      </InputField.Root>
+    );
+    const input = container.querySelector("input")!;
+
+    fireEvent.change(input, { target: { value: "invalid" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+    expect(onSubmit).not.toHaveBeenCalled();
+
+    fireEvent.change(input, { target: { value: "700" } });
+    fireEvent.keyDown(input, { key: "Enter", code: "Enter" });
+    expect(onSubmit).toHaveBeenCalledWith(700);
+  });
 });

package/src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx

@@ -3,7 +3,6 @@
 import React from "react";
 import { INPUT_HEIGHT } from "../../theme";
 import { Avatar, AvatarProps, AvatarStack } from "../Avatar";
-import { Button } from "../Button";
 import { Small } from "../Text";
 import { Tooltip } from "../Tooltip";
 
@@ -22,29 +21,14 @@ export const UserAvatar = ({ userId, name, image }: AvatarProps) => (
 
 type ConnectedUsersMenuLayoutProps = {
   renderUsers: () => React.ReactNode;
-  launchAIAssistant?: () => void;
-  isAssistantOpen?: boolean;
 };
 
 export const ConnectedUsersMenuLayout = ({
   renderUsers,
-  launchAIAssistant,
-  isAssistantOpen,
 }: ConnectedUsersMenuLayoutProps) => {
   return (
     <div className="n-flex n-gap-1.5">
       <AvatarStack size={INPUT_HEIGHT}>{renderUsers()}</AvatarStack>
-      {launchAIAssistant && (
-        <Tooltip content="AI Assistant">
-          <Button
-            active={isAssistantOpen}
-            onClick={launchAIAssistant}
-            icon="ChatBubbleWithDotsIcon"
-          >
-            AI
-          </Button>
-        </Tooltip>
-      )}
     </div>
   );
 };

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();
   });