@noya-app/noya-designsystem 0.1.87 → 0.1.89

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/__tests__/SegmentedControl.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, test } from "bun:test";
+import { snapIndicatorEdgesToDevicePixels } from "../SegmentedControl";
+
+describe("snapIndicatorEdgesToDevicePixels", () => {
+  test("snaps both rounded indicator edges at 1x density", () => {
+    expect(
+      snapIndicatorEdgesToDevicePixels({
+        containerLeft: 548,
+        itemLeft: 623.59375,
+        itemRight: 678.1875,
+        devicePixelRatio: 1,
+      })
+    ).toEqual({
+      left: 76,
+      width: 54,
+    });
+  });
+
+  test("preserves half-pixel edges at 2x density", () => {
+    expect(
+      snapIndicatorEdgesToDevicePixels({
+        containerLeft: 10.25,
+        itemLeft: 20.3,
+        itemRight: 40.8,
+        devicePixelRatio: 2,
+      })
+    ).toEqual({
+      left: 10.25,
+      width: 20.5,
+    });
+  });
+
+  test("falls back to 1x density for an invalid scale", () => {
+    expect(
+      snapIndicatorEdgesToDevicePixels({
+        containerLeft: 0,
+        itemLeft: 1.4,
+        itemRight: 3.6,
+        devicePixelRatio: 0,
+      })
+    ).toEqual({
+      left: 1,
+      width: 3,
+    });
+  });
+});

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

@@ -0,0 +1,56 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { cleanup, render } from "@testing-library/react";
+import React from "react";
+import { cssVarNames } from "../../theme";
+import { AppToolbar } from "../AppToolbar";
+import { Toolbar } from "../Toolbar";
+
+afterEach(cleanup);
+
+describe("Toolbar", () => {
+  test("renders the floating toolbar surface with transparent controls", () => {
+    const { getByRole } = render(
+      <Toolbar aria-label="Canvas tools">Controls</Toolbar>
+    );
+    const toolbar = getByRole("toolbar", { name: "Canvas tools" });
+
+    expect(toolbar.classList.contains("n-bg-popover-background")).toBe(true);
+    expect(toolbar.classList.contains("n-shadow-popover")).toBe(true);
+    expect(toolbar.classList.contains("n-gap-toolbar-separator")).toBe(true);
+    expect(toolbar.classList.contains("n-p-2")).toBe(true);
+    expect(
+      toolbar.style.getPropertyValue(cssVarNames.colors.buttonBackground)
+    ).toBe("transparent");
+    expect(
+      toolbar.style.getPropertyValue(cssVarNames.colors.inputBackground)
+    ).toBe("transparent");
+  });
+
+  test("supports compact spacing and consumer style overrides", () => {
+    const { getByRole } = render(
+      <Toolbar
+        aria-label="Selection tools"
+        size="small"
+        style={{ backgroundColor: "transparent" }}
+      />
+    );
+    const toolbar = getByRole("toolbar", { name: "Selection tools" });
+
+    expect(toolbar.classList.contains("n-gap-1")).toBe(true);
+    expect(toolbar.classList.contains("n-p-1")).toBe(true);
+    expect(toolbar.style.backgroundColor).toBe("transparent");
+  });
+});
+
+describe("AppToolbar", () => {
+  test("renders menu-driven application actions", () => {
+    const { getByRole } = render(
+      <AppToolbar
+        leftMenuItems={[{ title: "Undo", value: "undo" }]}
+        shouldBindKeyboardShortcuts={false}
+      />
+    );
+
+    expect(getByRole("button", { name: "Undo" })).toBeTruthy();
+  });
+});

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/sorting/SharedDragProvider.tsx

@@ -12,6 +12,7 @@ import {
   DragStartEvent,
   Over,
   PointerSensor,
+  PointerSensorProps,
   pointerWithin,
   useSensor,
   useSensors,
@@ -54,6 +55,41 @@ export type SharedDragProviderProps = {
   itemHitSlop?: Insets;
 };
 
+export class ContinuousPointerSensor extends PointerSensor {
+  constructor(props: PointerSensorProps) {
+    const ownerDocument =
+      props.event.target instanceof Node
+        ? (props.event.target.ownerDocument ?? document)
+        : document;
+    let latestCoordinates: Point | null = null;
+
+    const trackPointer = (event: PointerEvent) => {
+      latestCoordinates = { x: event.clientX, y: event.clientY };
+    };
+    const cleanup = () => {
+      ownerDocument.removeEventListener("pointermove", trackPointer, true);
+      ownerDocument.removeEventListener("pointerup", cleanup, true);
+      ownerDocument.removeEventListener("pointercancel", cleanup, true);
+    };
+
+    ownerDocument.addEventListener("pointermove", trackPointer, true);
+    ownerDocument.addEventListener("pointerup", cleanup, true);
+    ownerDocument.addEventListener("pointercancel", cleanup, true);
+
+    super({
+      ...props,
+      onStart(coordinates) {
+        cleanup();
+        props.onStart(coordinates);
+
+        if (latestCoordinates) {
+          props.onMove(latestCoordinates);
+        }
+      },
+    });
+  }
+}
+
 export function SharedDragProvider({
   children,
   acceptsDrop,
@@ -65,7 +101,7 @@ export function SharedDragProvider({
   itemHitSlop,
 }: SharedDragProviderProps) {
   const sensors = useSensors(
-    useSensor(PointerSensor, {
+    useSensor(ContinuousPointerSensor, {
       activationConstraint: {
         distance: 4,
       },

package/src/components/workspace/DrawerWorkspaceLayout.tsx

@@ -6,7 +6,7 @@ import { cssVarNames } from "../../theme";
 import { Button } from "../Button";
 import { Divider } from "../Divider";
 import { isSelectableMenuItem, MenuItem } from "../internal/Menu";
-import { ToolbarMenu } from "../Toolbar";
+import { ToolbarMenu } from "../AppToolbar";
 import { EDITOR_PANEL_GROUP_ID } from "./constants";
 import { LayoutProps, PanelLayoutState } from "./types";
 
@@ -216,7 +216,7 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
         )}
 
         {/* Center content */}
-        <div className="n-flex-1 n-flex n-relative n-min-h-0">
+        <div className="n-z-0 n-flex-1 n-flex n-relative n-min-h-0">
           {centerPanel}
         </div>
       </div>

package/src/components/workspace/VerticalTabMenu.tsx

@@ -2,7 +2,7 @@ import { memoGeneric } from "@noya-app/react-utils";
 import React, { ComponentProps, useMemo } from "react";
 import { cssVarNames } from "../../theme";
 import { MenuItem } from "../internal/Menu";
-import { ToolbarMenu } from "../Toolbar";
+import { ToolbarMenu } from "../AppToolbar";
 import { Tooltip } from "../Tooltip";
 
 type VerticalTabMenuProps<TabValue extends string> = {

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

@@ -83,12 +83,14 @@ describe("DrawerWorkspaceLayout", () => {
     fireEvent.click(getByRole("button", { name: "Navigation" }));
     const action = getByRole("button", { name: "Drawer action" });
     const drawer = getByText("Drawer action").parentElement?.parentElement;
+    const center = getByText("Center content").parentElement;
 
     fireEvent.pointerDown(action, { pointerType: "touch" });
     fireEvent.pointerUp(action, { pointerType: "touch" });
     fireEvent.click(action);
 
     expect(drawer?.classList.contains("n-z-20")).toBe(true);
+    expect(center?.classList.contains("n-z-0")).toBe(true);
     expect(queryByRole("button", { name: "Close drawer" })).toBeNull();
     expect(touchCount).toBe(1);
     expect(leftSidebarRef.current?.isExpanded()).toBe(true);

package/src/index.css

@@ -185,6 +185,12 @@
   }
 }
 
+@media (max-width: 639px) {
+  :root {
+    --n-dialog-padding: 16px;
+  }
+}
+
 [data-theme="dark"] {
   --n-background: #111111;
   --n-input-background: rgb(45 43 54);

package/src/index.tsx

@@ -10,6 +10,7 @@ export * from "./components/Banner";
 export * from "./components/blocks/ImageBlockComponent";
 export * from "./components/Breadcrumbs";
 export * from "./components/Button";
+export * from "./components/Card";
 export * from "./components/Checkbox";
 export * from "./components/Chip";
 export * from "./components/Collection";
@@ -21,6 +22,7 @@ export * from "./components/CommandPalette";
 export * from "./components/connected-users-menu/ConnectedUsersMenuLayout";
 export * from "./components/ContextMenu";
 export * from "./components/Dialog";
+export * from "./components/DialogNavigator";
 export * from "./components/Divider";
 export * from "./components/DraggableMenuButton";
 export * from "./components/Drawer";
@@ -75,6 +77,7 @@ export * from "./components/sorting/Sortable";
 export * from "./components/sorting/sorting";
 export * from "./components/Spacer";
 export * from "./components/StackNavigator";
+export * from "./components/StatCard";
 export * from "./components/Stepper";
 export * from "./components/Switch";
 export * from "./components/Tabs";
@@ -128,6 +131,7 @@ export * from "./components/DimensionInput";
 export * as InspectorPrimitives from "./components/InspectorPrimitives";
 
 export * from "./components/BaseToolbar";
+export * from "./components/AppToolbar";
 export * from "./components/OverlayToolbar";
 export * from "./components/Toolbar";
 export * from "./components/ToolbarDrawer";