@nextclaw/ui 0.15.24 → 0.15.26

package/src/shared/components/resizable-right-panel/__tests__/resizable-right-panel.test.tsx

@@ -1,6 +1,6 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { ResizableRightPanel } from "@/shared/components/resizable-right-panel/resizable-right-panel";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ResizableRightPanel } from '@/shared/components/resizable-right-panel/resizable-right-panel';
 
 function firePointerEvent(
   target: Window | Document | Node | Element,
@@ -15,12 +15,12 @@ function firePointerEvent(
   fireEvent(target, event);
 }
 
-describe("ResizableRightPanel", () => {
+describe('ResizableRightPanel', () => {
   beforeEach(() => {
     HTMLElement.prototype.setPointerCapture = vi.fn();
   });
 
-  it("resizes horizontally from the left handle and clamps to max width", () => {
+  it('resizes horizontally from the left handle and clamps to max width', () => {
     const onWidthCommit = vi.fn();
     render(
       <ResizableRightPanel
@@ -34,48 +34,51 @@ describe("ResizableRightPanel", () => {
       </ResizableRightPanel>,
     );
 
-    firePointerEvent(
-      screen.getByTestId("resizable-right-panel-handle"),
-      "pointerdown",
-      { clientX: 800, pointerId: 1 },
-    );
-    firePointerEvent(window, "pointermove", { clientX: 600, pointerId: 1 });
+    firePointerEvent(screen.getByTestId('resizable-right-panel-handle'), 'pointerdown', { clientX: 800, pointerId: 1 });
+    firePointerEvent(window, 'pointermove', { clientX: 600, pointerId: 1 });
 
-    expect(screen.getByTestId("right-panel").style.width).toBe("500px");
-    expect(
-      screen.getByTestId("resizable-right-panel-resize-shield"),
-    ).toBeTruthy();
+    expect(screen.getByTestId('right-panel').style.width).toBe('500px');
+    expect(screen.getByTestId('resizable-right-panel-resize-shield')).toBeTruthy();
 
-    firePointerEvent(window, "pointerup", { clientX: 600, pointerId: 1 });
+    firePointerEvent(window, 'pointerup', { clientX: 600, pointerId: 1 });
 
     expect(onWidthCommit).toHaveBeenCalledWith(500);
 
-    expect(
-      screen.queryByTestId("resizable-right-panel-resize-shield"),
-    ).toBeNull();
+    expect(screen.queryByTestId('resizable-right-panel-resize-shield')).toBeNull();
   });
 
-  it("does not render resize controls in overlay mode", () => {
+  it('does not render resize controls in overlay mode', () => {
     render(
       <ResizableRightPanel data-testid="right-panel" overlay>
         Content
       </ResizableRightPanel>,
     );
 
-    expect(
-      screen.queryByTestId("resizable-right-panel-handle"),
-    ).toBeNull();
-    expect(screen.getByTestId("right-panel").className).toContain("fixed");
+    expect(screen.queryByTestId('resizable-right-panel-handle')).toBeNull();
+    expect(screen.getByTestId('right-panel').className).toContain('fixed');
+  });
+
+  it('keeps the outer resize boundary above nested panel overlays', () => {
+    render(
+      <ResizableRightPanel data-testid="right-panel">
+        <div className="absolute inset-0 z-20" data-testid="nested-overlay" />
+      </ResizableRightPanel>,
+    );
+
+    const panel = screen.getByTestId('right-panel');
+    const handle = screen.getByTestId('resizable-right-panel-handle');
+    expect(handle.className).toContain('z-30');
+    expect(panel.compareDocumentPosition(handle) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
   });
 
-  it("applies a persisted controlled width after store rehydration", () => {
+  it('applies a persisted controlled width after store rehydration', () => {
     const view = render(
       <ResizableRightPanel data-testid="right-panel" width={480}>
         Content
       </ResizableRightPanel>,
     );
 
-    expect(screen.getByTestId("right-panel").style.width).toBe("480px");
+    expect(screen.getByTestId('right-panel').style.width).toBe('480px');
 
     view.rerender(
       <ResizableRightPanel data-testid="right-panel" width={620}>
@@ -83,24 +86,18 @@ describe("ResizableRightPanel", () => {
       </ResizableRightPanel>,
     );
 
-    expect(screen.getByTestId("right-panel").style.width).toBe("620px");
+    expect(screen.getByTestId('right-panel').style.width).toBe('620px');
   });
 
-  it("can scope overlay positioning to its container", () => {
+  it('can scope overlay positioning to its container', () => {
     render(
-      <ResizableRightPanel
-        data-testid="right-panel"
-        overlay
-        overlayScope="container"
-      >
+      <ResizableRightPanel data-testid="right-panel" overlay overlayScope="container">
         Content
       </ResizableRightPanel>,
     );
 
-    expect(
-      screen.queryByTestId("resizable-right-panel-handle"),
-    ).toBeNull();
-    expect(screen.getByTestId("right-panel").className).toContain("absolute");
-    expect(screen.getByTestId("right-panel").className).not.toContain("fixed");
+    expect(screen.queryByTestId('resizable-right-panel-handle')).toBeNull();
+    expect(screen.getByTestId('right-panel').className).toContain('absolute');
+    expect(screen.getByTestId('right-panel').className).not.toContain('fixed');
   });
 });

package/src/shared/components/resizable-right-panel/resizable-right-panel.tsx

@@ -1,13 +1,13 @@
-import { useRef, useState, type ComponentPropsWithoutRef } from "react";
-import { cn } from "@/shared/lib/utils";
+import { useRef, useState, type ComponentPropsWithoutRef } from 'react';
+import { cn } from '@/shared/lib/utils';
 
-type ResizableRightPanelProps = ComponentPropsWithoutRef<"aside"> & {
+type ResizableRightPanelProps = ComponentPropsWithoutRef<'aside'> & {
   defaultWidth?: number;
   minWidth?: number;
   maxWidth?: number;
   onWidthCommit?: (width: number) => void;
   overlay?: boolean;
-  overlayScope?: "viewport" | "container";
+  overlayScope?: 'viewport' | 'container';
   width?: number;
 };
 
@@ -20,7 +20,7 @@ export function ResizableRightPanel({
   maxWidth = 860,
   onWidthCommit,
   overlay = false,
-  overlayScope = "viewport",
+  overlayScope = 'viewport',
   width: controlledWidth,
   ...props
 }: ResizableRightPanelProps) {
@@ -31,10 +31,10 @@ export function ResizableRightPanel({
   const [uncontrolledWidth, setUncontrolledWidth] = useState(defaultWidth);
   const width = dragWidth ?? controlledWidth ?? uncontrolledWidth;
   const overlayClassName = overlay
-    ? overlayScope === "container"
-      ? "absolute inset-0 z-30"
-      : "fixed inset-0 z-40"
-    : "border-l border-border";
+    ? overlayScope === 'container'
+      ? 'absolute inset-0 z-30'
+      : 'fixed inset-0 z-40'
+    : 'border-l border-border';
 
   const onResizeStart = (event: React.PointerEvent<HTMLDivElement>) => {
     if (overlay) return;
@@ -60,30 +60,36 @@ export function ResizableRightPanel({
       setDragWidth(null);
       setIsResizing(false);
       resizeRef.current = null;
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", onUp);
-      window.removeEventListener("pointercancel", onUp);
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
     };
-    window.addEventListener("pointermove", onMove);
-    window.addEventListener("pointerup", onUp);
-    window.addEventListener("pointercancel", onUp);
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
   };
 
   return (
     <aside
       {...props}
       className={cn(
-        "relative flex h-full min-h-0 shrink-0 overflow-hidden bg-card text-card-foreground",
+        'relative flex h-full min-h-0 shrink-0 overflow-hidden bg-card text-card-foreground',
         overlayClassName,
         className,
       )}
       style={overlay ? style : { ...style, width }}
     >
+      <div className="flex h-full min-h-0 w-full flex-col overflow-hidden">{children}</div>
       {!overlay ? (
-        <div className="absolute left-0 top-0 z-20 h-full w-3 cursor-ew-resize transition-colors hover:bg-primary/10" data-testid="resizable-right-panel-handle" onPointerDown={onResizeStart} />
+        <div
+          className="absolute left-0 top-0 z-30 h-full w-3 cursor-ew-resize transition-colors hover:bg-primary/10"
+          data-testid="resizable-right-panel-handle"
+          onPointerDown={onResizeStart}
+        />
+      ) : null}
+      {isResizing ? (
+        <div className="absolute inset-0 z-10 cursor-ew-resize" data-testid="resizable-right-panel-resize-shield" />
       ) : null}
-      <div className="flex h-full min-h-0 w-full flex-col overflow-hidden">{children}</div>
-      {isResizing ? <div className="absolute inset-0 z-10 cursor-ew-resize" data-testid="resizable-right-panel-resize-shield" /> : null}
     </aside>
   );
 }

package/src/shared/components/ui/actions/__tests__/icon-action-button.test.tsx

@@ -34,6 +34,21 @@ describe('IconActionButton', () => {
     expect(button.className).toContain('hover:bg-[var(--interaction-hover)]');
   });
 
+  it('uses surface-relative feedback without introducing a new surface', () => {
+    render(
+      <IconActionButton
+        tone="surface"
+        icon={<span data-testid="icon" />}
+        label="Add project"
+      />,
+    );
+
+    const button = screen.getByRole('button', { name: 'Add project' });
+    expect(button.className).toContain('hover:bg-gray-200/60');
+    expect(button.className).toContain('hover:text-gray-900');
+    expect(button.className).toContain('active:bg-gray-200/80');
+  });
+
   it('ignores restored pointer focus while preserving keyboard tooltip focus', () => {
     render(
       <IconActionButton

package/src/shared/components/ui/actions/icon-action-button.tsx

@@ -8,7 +8,7 @@ import {
 import { cn } from '@/shared/lib/utils';
 
 type IconActionButtonSize = 'sm' | 'md' | 'lg';
-type IconActionButtonTone = 'default' | 'strong';
+type IconActionButtonTone = 'default' | 'surface' | 'strong';
 
 type IconActionButtonProps = Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -17,7 +17,7 @@ type IconActionButtonProps = Omit<
   icon: React.ReactNode;
   label: string;
   size?: IconActionButtonSize;
-  /** default: soft accent hover. strong: denser gray hover for nested hover surfaces. */
+  /** default: global interaction hover. surface: relative feedback on the current surface. strong: denser feedback for nested hover surfaces. */
   tone?: IconActionButtonTone;
   tooltip?: string | false | null;
   tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
@@ -32,6 +32,8 @@ const SIZE_CLASS: Record<IconActionButtonSize, string> = {
 const TONE_CLASS: Record<IconActionButtonTone, string> = {
   default:
     'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
+  surface:
+    'text-muted-foreground hover:bg-gray-200/60 hover:text-gray-900 active:bg-gray-200/80 disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
   strong:
     'text-muted-foreground hover:bg-black/10 hover:text-foreground disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
 };

package/src/shared/components/ui/context-menu/__tests__/context-menu.test.tsx

@@ -1,23 +1,20 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-import {
-  ContextMenu,
-  ContextMenuTrigger,
-} from "@/shared/components/ui/context-menu/context-menu";
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { ContextMenu, ContextMenuTrigger } from '@/shared/components/ui/context-menu/context-menu';
 
-describe("ContextMenu", () => {
-  it("opens at the trigger and supports keyboard selection", async () => {
+describe('ContextMenu', () => {
+  it('opens at the trigger and supports keyboard selection', async () => {
     const onSelect = vi.fn();
     render(
       <ContextMenu
         label="File actions"
         groups={[
           {
-            key: "file",
+            key: 'file',
             items: [
-              { key: "open", label: "Open", onSelect: vi.fn() },
-              { key: "copy", label: "Copy path", onSelect },
+              { key: 'open', label: 'Open', onSelect: vi.fn() },
+              { key: 'copy', label: 'Copy path', onSelect },
             ],
           },
         ]}
@@ -26,29 +23,27 @@ describe("ContextMenu", () => {
       </ContextMenu>,
     );
 
-    fireEvent.contextMenu(screen.getByRole("button", { name: "README.md" }), {
+    fireEvent.contextMenu(screen.getByRole('button', { name: 'README.md' }), {
       clientX: 120,
       clientY: 80,
     });
 
-    expect(screen.getByRole("menu", { name: "File actions" })).toBeTruthy();
-    expect(document.activeElement).toBe(
-      screen.getByRole("menuitem", { name: "Open" }),
-    );
-    await userEvent.keyboard("{ArrowDown}{Enter}");
+    expect(screen.getByRole('menu', { name: 'File actions' })).toBeTruthy();
+    expect(document.activeElement).toBe(screen.getByRole('menuitem', { name: 'Open' }));
+    await userEvent.keyboard('{ArrowDown}{Enter}');
     expect(onSelect).toHaveBeenCalledTimes(1);
-    expect(screen.queryByRole("menu")).toBeNull();
+    expect(screen.queryByRole('menu')).toBeNull();
   });
 
-  it("opens the same menu from an explicit trigger", async () => {
+  it('opens the same menu from an explicit trigger', async () => {
     const onSelect = vi.fn();
     render(
       <ContextMenu
         label="File actions"
         groups={[
           {
-            key: "file",
-            items: [{ key: "add", label: "Add to chat", onSelect }],
+            key: 'file',
+            items: [{ key: 'add', label: 'Add to chat', onSelect }],
           },
         ]}
       >
@@ -61,28 +56,59 @@ describe("ContextMenu", () => {
       </ContextMenu>,
     );
 
-    await userEvent.click(screen.getByRole("button", { name: "More actions" }));
-    expect(screen.getByRole("menu", { name: "File actions" })).toBeTruthy();
-    await userEvent.click(screen.getByRole("menuitem", { name: "Add to chat" }));
+    await userEvent.click(screen.getByRole('button', { name: 'More actions' }));
+    expect(screen.getByRole('menu', { name: 'File actions' })).toBeTruthy();
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Add to chat' }));
 
     expect(onSelect).toHaveBeenCalledTimes(1);
   });
 
-  it("does not steal focus back when an action focuses the composer", async () => {
+  it('keeps download actions as keyboard-focusable links', async () => {
+    render(
+      <ContextMenu
+        label="File actions"
+        groups={[
+          {
+            key: 'file',
+            items: [
+              {
+                key: 'download',
+                label: 'Download',
+                href: '/api/files/report.md',
+                download: 'report.md',
+              },
+            ],
+          },
+        ]}
+      >
+        <button type="button">report.md</button>
+      </ContextMenu>,
+    );
+
+    fireEvent.contextMenu(screen.getByRole('button', { name: 'report.md' }));
+    const download = screen.getByRole('menuitem', { name: 'Download' });
+    expect(document.activeElement).toBe(download);
+    expect(download.tagName).toBe('A');
+    expect(download.getAttribute('download')).toBe('report.md');
+  });
+
+  it('does not steal focus back when an action focuses the composer', async () => {
     render(
       <div>
-        <button type="button" data-testid="composer">Composer</button>
+        <button type="button" data-testid="composer">
+          Composer
+        </button>
         <ContextMenu
           label="File actions"
           groups={[
             {
-              key: "chat",
+              key: 'chat',
               items: [
                 {
-                  key: "add",
-                  label: "Add to chat",
+                  key: 'add',
+                  label: 'Add to chat',
                   restoreFocus: false,
-                  onSelect: () => screen.getByTestId("composer").focus(),
+                  onSelect: () => screen.getByTestId('composer').focus(),
                 },
               ],
             },
@@ -93,11 +119,11 @@ describe("ContextMenu", () => {
       </div>,
     );
 
-    fireEvent.contextMenu(screen.getByRole("button", { name: "README.md" }));
-    await userEvent.click(screen.getByRole("menuitem", { name: "Add to chat" }));
+    fireEvent.contextMenu(screen.getByRole('button', { name: 'README.md' }));
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Add to chat' }));
 
     await waitFor(() => {
-      expect(document.activeElement).toBe(screen.getByTestId("composer"));
+      expect(document.activeElement).toBe(screen.getByTestId('composer'));
     });
   });
 });