@nextclaw/ui 0.15.21 → 0.15.23

package/src/platforms/mobile/components/__tests__/mobile-bottom-nav.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MemoryRouter } from "react-router-dom";
 import { describe, expect, it, vi } from "vitest";
 import { I18nProvider } from "@/app/components/i18n-provider";
@@ -11,15 +12,24 @@ vi.mock("@/shared/components/doc-browser", () => ({
   useDocBrowser: () => ({ open: vi.fn() }),
 }));
 
-describe("MobileBottomNav", () => {
-  it("highlights the settings tab for nested settings routes", () => {
-    render(
+function renderBottomNav(pathname: string) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
       <I18nProvider>
-        <MemoryRouter initialEntries={["/providers"]}>
+        <MemoryRouter initialEntries={[pathname]}>
           <MobileBottomNav />
         </MemoryRouter>
-      </I18nProvider>,
-    );
+      </I18nProvider>
+    </QueryClientProvider>,
+  );
+}
+
+describe("MobileBottomNav", () => {
+  it("highlights the settings tab for nested settings routes", () => {
+    renderBottomNav("/providers");
 
     expect(
       screen.getByRole("link", { name: /settings/i }).getAttribute("aria-current"),
@@ -37,13 +47,7 @@ describe("MobileBottomNav", () => {
   });
 
   it("highlights the chat tab for chat routes", () => {
-    render(
-      <I18nProvider>
-        <MemoryRouter initialEntries={["/chat/demo-session"]}>
-          <MobileBottomNav />
-        </MemoryRouter>
-      </I18nProvider>,
-    );
+    renderBottomNav("/chat/demo-session");
 
     expect(
       screen.getByRole("link", { name: /chat/i }).getAttribute("aria-current"),
@@ -51,13 +55,7 @@ describe("MobileBottomNav", () => {
   });
 
   it("opens the apps panel from the mobile navigation", () => {
-    render(
-      <I18nProvider>
-        <MemoryRouter initialEntries={["/chat"]}>
-          <MobileBottomNav />
-        </MemoryRouter>
-      </I18nProvider>,
-    );
+    renderBottomNav("/chat");
 
     fireEvent.click(screen.getByRole("button", { name: "Apps" }));
 

package/src/shared/components/actions/__tests__/navigation-link.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { NavigationLink } from "@/shared/components/actions/navigation-link";
 
@@ -37,11 +38,21 @@ describe("NavigationLink", () => {
     );
   });
 
-  it("keeps same-page links on the browser navigation path", () => {
-    render(<NavigationLink href="/settings">Settings</NavigationLink>);
+  it("navigates internal destinations through the app router", () => {
+    render(
+      <MemoryRouter initialEntries={["/cron"]}>
+        <NavigationLink href="/chat/session-1">Open session</NavigationLink>
+        <Routes>
+          <Route path="/chat/:sessionId" element={<p>Session route</p>} />
+        </Routes>
+      </MemoryRouter>,
+    );
 
-    const link = screen.getByRole("link", { name: "Settings" });
+    const link = screen.getByRole("link", { name: "Open session" });
     expect(link.getAttribute("target")).toBeNull();
+    fireEvent.click(link);
+
+    expect(screen.getByText("Session route")).toBeTruthy();
     expect(mocks.openExternalUrl).not.toHaveBeenCalled();
   });
 });

package/src/shared/components/actions/navigation-link.tsx

@@ -4,6 +4,7 @@ import type {
   ReactNode,
 } from "react";
 import { ExternalLink as ExternalLinkIcon, type LucideIcon } from "lucide-react";
+import { Link } from "react-router-dom";
 import { hostCapabilityManager } from "@/shared/lib/host-capabilities";
 import { cn } from "@/shared/lib/utils";
 
@@ -58,8 +59,8 @@ function resolveExternalHttpUrl(href: string): string | null {
 
 /**
  * Shared navigation primitive for visible URL destinations.
- * External links retain native link semantics while delegating ordinary clicks
- * to the desktop host when one is available.
+ * Internal links use client-side routing; external links delegate ordinary
+ * clicks to the desktop host when one is available.
  */
 export function NavigationLink({
   children,
@@ -75,29 +76,50 @@ export function NavigationLink({
   ...props
 }: NavigationLinkProps) {
   const Icon = icon === undefined && external ? ExternalLinkIcon : icon;
+  const linkClassName = cn(
+    "inline-flex items-center rounded-sm font-medium text-primary underline-offset-4 transition-colors hover:text-primary-hover hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25",
+    LINK_SIZE_CLASS[size],
+    className,
+  );
   const linkIcon = Icon ? (
     <Icon
       aria-hidden="true"
       className={cn("shrink-0", LINK_ICON_SIZE_CLASS[size])}
     />
   ) : null;
+  const content = (
+    <>
+      {iconPosition === "leading" ? linkIcon : null}
+      {children}
+      {iconPosition === "trailing" ? linkIcon : null}
+    </>
+  );
+
+  if (!external) {
+    return (
+      <Link
+        {...props}
+        to={href}
+        target={target}
+        rel={rel}
+        className={linkClassName}
+        onClick={onClick}
+      >
+        {content}
+      </Link>
+    );
+  }
 
   return (
     <a
       {...props}
       href={href}
-      target={external ? target ?? "_blank" : target}
-      rel={external ? resolveExternalRel(rel) : rel}
-      className={cn(
-        "inline-flex items-center rounded-sm font-medium text-primary underline-offset-4 transition-colors hover:text-primary-hover hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25",
-        LINK_SIZE_CLASS[size],
-        className,
-      )}
+      target={target ?? "_blank"}
+      rel={resolveExternalRel(rel)}
+      className={linkClassName}
       onClick={(event) => {
         onClick?.(event);
-        const externalHttpUrl = external
-          ? resolveExternalHttpUrl(href)
-          : null;
+        const externalHttpUrl = resolveExternalHttpUrl(href);
         if (
           externalHttpUrl &&
           !event.defaultPrevented &&
@@ -108,9 +130,7 @@ export function NavigationLink({
         }
       }}
     >
-      {iconPosition === "leading" ? linkIcon : null}
-      {children}
-      {iconPosition === "trailing" ? linkIcon : null}
+      {content}
     </a>
   );
 }

package/src/shared/components/common/__tests__/agent-avatar.test.tsx

@@ -23,8 +23,9 @@ describe('AgentAvatar', () => {
     const avatar = screen.getByLabelText('Main');
     expect(avatar.querySelector('svg')).toBeTruthy();
     expect(avatar.textContent).not.toContain('M');
-    expect(avatar.className).toContain('bg-primary');
-    expect(avatar.className).toContain('text-primary-foreground');
+    expect(avatar.className).toContain('bg-[#ede7dc]');
+    expect(avatar.className).toContain('text-[#57534e]');
+    expect(avatar.className).not.toContain('primary');
   });
 
   it('keeps letter fallback avatars for specialist agents', () => {

package/src/shared/components/common/agent-avatar.tsx

@@ -29,9 +29,9 @@ function hashText(value: string): number {
 export function AgentAvatar({ agentId, displayName, avatarUrl, className }: AgentAvatarProps) {
   const seed = displayName?.trim() || agentId;
   const isMainAgent = agentId.trim().toLowerCase() === 'main';
-  const [paletteBgClass, paletteTextClass] = PALETTE[hashText(agentId) % PALETTE.length] ?? PALETTE[0];
-  const bgClass = isMainAgent ? 'bg-primary' : paletteBgClass;
-  const textClass = isMainAgent ? 'text-primary-foreground' : paletteTextClass;
+  const [bgClass, textClass] = isMainAgent
+    ? ['bg-[#ede7dc] [html[data-theme-appearance=dark]_&]:bg-[#373229]', 'text-[#57534e] [html[data-theme-appearance=dark]_&]:text-[#e2ded7]']
+    : PALETTE[hashText(agentId) % PALETTE.length] ?? PALETTE[0];
 
   if (avatarUrl?.trim()) {
     return (

package/src/shared/components/doc-browser/__tests__/doc-browser.test.tsx

@@ -8,6 +8,7 @@ import type {
   DocBrowserTab,
 } from "@/shared/components/doc-browser/doc-browser-context";
 import { PANEL_APPS_DOC_BROWSER_RENDERERS } from "@/features/panel-apps";
+import { PANEL_APP_SCROLL_RESTORATION_CONTRACT } from "@nextclaw/shared";
 
 const { navigateMock } = vi.hoisted(() => ({
   navigateMock: vi.fn(),
@@ -460,7 +461,72 @@ describe("DocBrowser", () => {
 
     expect(screen.getByTitle("Local App").getAttribute("tabindex")).toBeNull();
   });
+});
 
+describe("DocBrowser scroll restoration", () => {
+  beforeEach(() => {
+    resetDocBrowserTestState();
+    installDocBrowserPointerTestEnvironment();
+  });
+
+  it("restores the active Panel App scroll surface after refresh", () => {
+    const panelAppTab: DocBrowserTab = {
+      id: "piano",
+      kind: "panel-app" as const,
+      title: "Piano",
+      currentUrl: "/api/panel-apps/piano/content",
+      history: ["/api/panel-apps/piano/content"],
+      historyIndex: 0,
+      navVersion: 0,
+    };
+    docBrowserState.tabs = [panelAppTab];
+    docBrowserState.activeTabId = panelAppTab.id;
+    docBrowserState.currentTab = panelAppTab;
+
+    const { container } = render(<DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />);
+
+    const initialIframe = container.querySelector('iframe[title="Piano"]') as HTMLIFrameElement;
+    const initialWindow = {} as Window;
+    Object.defineProperty(initialIframe, "contentWindow", {
+      configurable: true,
+      value: initialWindow,
+    });
+    window.dispatchEvent(new MessageEvent("message", {
+      data: {
+        type: PANEL_APP_SCROLL_RESTORATION_CONTRACT.scrollMessageType,
+        version: PANEL_APP_SCROLL_RESTORATION_CONTRACT.version,
+        target: {
+          kind: "element",
+          path: [{ index: 0, tagName: "main" }],
+        },
+        x: 24,
+        y: 360,
+      },
+      source: initialWindow,
+    }));
+
+    fireEvent.click(screen.getByRole("button", { name: "Refresh current panel app" }));
+
+    const refreshedIframe = container.querySelector('iframe[title="Piano"]') as HTMLIFrameElement;
+    const refreshedPostMessage = vi.fn();
+    Object.defineProperty(refreshedIframe, "contentWindow", {
+      configurable: true,
+      value: { postMessage: refreshedPostMessage },
+    });
+    fireEvent.load(refreshedIframe);
+
+    expect(refreshedIframe).not.toBe(initialIframe);
+    expect(refreshedPostMessage).toHaveBeenCalledWith({
+      type: PANEL_APP_SCROLL_RESTORATION_CONTRACT.restoreScrollMessageType,
+      version: PANEL_APP_SCROLL_RESTORATION_CONTRACT.version,
+      target: {
+        kind: "element",
+        path: [{ index: 0, tagName: "main" }],
+      },
+      x: 24,
+      y: 360,
+    }, "*");
+  });
 });
 
 describe("DocBrowser floating interactions", () => {

package/src/shared/components/doc-browser/doc-browser-panel-parts.tsx

@@ -1,4 +1,4 @@
-import type { PointerEventHandler, ReactNode, Ref } from 'react';
+import type { PointerEventHandler, ReactNode, Ref, ReactEventHandler } from 'react';
 import {
   RefreshCw,
   Search,
@@ -30,6 +30,7 @@ type DocBrowserFrameContentProps = {
   iframeSandbox?: string;
   isDragging: boolean;
   isResizing: boolean;
+  onIframeLoad?: ReactEventHandler<HTMLIFrameElement>;
   onIframePointerOver?: PointerEventHandler<HTMLIFrameElement>;
 };
 
@@ -55,7 +56,7 @@ export function DocBrowserAddressToolbar({
           onChange={(e) => onUrlInputChange(e.target.value)}
           aria-label={t('docBrowserAddressLabel')}
           placeholder={placeholder}
-          className="h-8 w-full rounded-lg border border-border/75 bg-background pl-8 pr-3 text-xs text-foreground transition-colors placeholder:text-muted-foreground/55 focus:border-border focus:outline-none focus:ring-0"
+          className="h-8 w-full rounded-lg border border-border/75 bg-background pl-8 pr-3 text-xs text-foreground transition-colors placeholder:text-muted-foreground/55 focus:outline-none focus:ring-0"
         />
       </form>
       <IconActionButton
@@ -76,6 +77,7 @@ export function DocBrowserFrameContent({
   iframeSandbox,
   isDragging,
   isResizing,
+  onIframeLoad,
   onIframePointerOver,
 }: DocBrowserFrameContentProps) {
   return (
@@ -92,6 +94,7 @@ export function DocBrowserFrameContent({
           title={currentTab?.title || 'NextClaw Docs'}
           sandbox={iframeSandbox}
           tabIndex={onIframePointerOver ? 0 : undefined}
+          onLoad={onIframeLoad}
           onPointerOver={onIframePointerOver}
           allow="clipboard-read; clipboard-write"
           allowFullScreen

package/src/shared/components/doc-browser/doc-browser-renderer.types.ts

@@ -24,6 +24,7 @@ export type DocBrowserCustomTabRenderer = {
   renderContent?: (params: DocBrowserCustomTabRenderParams) => ReactNode;
   renderIcon?: (tab: DocBrowserTab) => ReactNode;
   renderToolbar?: (params: DocBrowserCustomTabRenderParams) => ReactNode;
+  supportsScrollRestoration?: boolean;
 };
 
 export type DocBrowserCustomTabRenderers = Record<string, DocBrowserCustomTabRenderer>;

package/src/shared/components/doc-browser/doc-browser.tsx

@@ -10,6 +10,7 @@ import {
 } from './doc-browser-context';
 import { normalizeDocUrl } from './utils/doc-browser-url.utils';
 import { DocBrowserHomePage } from './doc-browser-home-page';
+import { useDocBrowserScrollRestoration } from './hooks/use-doc-browser-scroll-restoration';
 import type { DocBrowserCustomTabRenderers } from './doc-browser-renderer.types';
 import {
   DocBrowserAddressToolbar,
@@ -200,6 +201,13 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
   const dockState = dockControls?.getDockState(currentTab);
   const isContentTab = currentTab?.kind === 'content';
   const isAddressToolbarTab = isDocsTab || isContentTab;
+  const supportsScrollRestoration = customRenderer?.supportsScrollRestoration === true;
+  const restoreScroll = useDocBrowserScrollRestoration({
+    currentTab,
+    iframeRef,
+    isEnabled: supportsScrollRestoration,
+    tabs,
+  });
   const { handleUrlSubmit, setUrlInput, urlInput } = useDocBrowserAddressBar({
     activeTabId,
     currentUrl,
@@ -381,6 +389,7 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
         iframeSandbox={iframeSandbox}
         isDragging={floatInteraction?.kind === 'drag'}
         isResizing={floatInteraction?.kind === 'resize'}
+        onIframeLoad={restoreScroll}
         onIframePointerOver={customRenderer?.onIframePointerOver}
       />
 

package/src/shared/components/doc-browser/hooks/use-doc-browser-scroll-restoration.ts

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useRef, type RefObject } from 'react';
+import { PANEL_APP_SCROLL_RESTORATION_CONTRACT } from '@nextclaw/shared';
+import type { DocBrowserTab } from '@/shared/components/doc-browser/doc-browser-context';
+
+type ScrollTarget =
+  | { kind: 'document' }
+  | { kind: 'element'; path: Array<{ index: number; tagName: string }> };
+
+type ScrollPosition = {
+  currentUrl: string;
+  target: ScrollTarget;
+  x: number;
+  y: number;
+};
+
+type UseDocBrowserScrollRestorationParams = {
+  currentTab?: DocBrowserTab;
+  iframeRef: RefObject<HTMLIFrameElement | null>;
+  isEnabled: boolean;
+  tabs: DocBrowserTab[];
+};
+
+function isScrollTarget(value: unknown): value is ScrollTarget {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+  const candidate = value as Partial<ScrollTarget>;
+  if (candidate.kind === 'document') {
+    return true;
+  }
+  return candidate.kind === 'element'
+    && Array.isArray(candidate.path)
+    && candidate.path.length > 0
+    && candidate.path.length <= 30
+    && candidate.path.every((segment) => (
+      typeof segment?.index === 'number'
+      && Number.isInteger(segment.index)
+      && segment.index >= 0
+      && segment.index <= 1000
+      && typeof segment.tagName === 'string'
+      && segment.tagName.length > 0
+      && segment.tagName.length <= 32
+    ));
+}
+
+function isScrollMessage(value: unknown): value is {
+  target: ScrollTarget;
+  type: string;
+  version: number;
+  x: number;
+  y: number;
+} {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+  const candidate = value as Partial<{
+    target: unknown;
+    type: string;
+    version: number;
+    x: number;
+    y: number;
+  }>;
+  return candidate.type === PANEL_APP_SCROLL_RESTORATION_CONTRACT.scrollMessageType
+    && candidate.version === PANEL_APP_SCROLL_RESTORATION_CONTRACT.version
+    && isScrollTarget(candidate.target)
+    && typeof candidate.x === 'number'
+    && Number.isFinite(candidate.x)
+    && candidate.x >= 0
+    && typeof candidate.y === 'number'
+    && Number.isFinite(candidate.y)
+    && candidate.y >= 0;
+}
+
+export function useDocBrowserScrollRestoration({
+  currentTab,
+  iframeRef,
+  isEnabled,
+  tabs,
+}: UseDocBrowserScrollRestorationParams) {
+  const positionsRef = useRef(new Map<string, ScrollPosition>());
+
+  useEffect(() => {
+    const activeTabIds = new Set(tabs.map((tab) => tab.id));
+    for (const tabId of positionsRef.current.keys()) {
+      if (!activeTabIds.has(tabId)) {
+        positionsRef.current.delete(tabId);
+      }
+    }
+  }, [tabs]);
+
+  useEffect(() => {
+    if (!currentTab || !isEnabled) {
+      return;
+    }
+    const onMessage = (event: MessageEvent) => {
+      if (event.source !== iframeRef.current?.contentWindow || !isScrollMessage(event.data)) {
+        return;
+      }
+      positionsRef.current.set(currentTab.id, {
+        currentUrl: currentTab.currentUrl,
+        target: event.data.target,
+        x: event.data.x,
+        y: event.data.y,
+      });
+    };
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, [currentTab, iframeRef, isEnabled]);
+
+  return useCallback(() => {
+    if (!currentTab || !isEnabled) {
+      return;
+    }
+    const position = positionsRef.current.get(currentTab.id);
+    if (!position || position.currentUrl !== currentTab.currentUrl) {
+      return;
+    }
+    iframeRef.current?.contentWindow?.postMessage({
+      type: PANEL_APP_SCROLL_RESTORATION_CONTRACT.restoreScrollMessageType,
+      version: PANEL_APP_SCROLL_RESTORATION_CONTRACT.version,
+      target: position.target,
+      x: position.x,
+      y: position.y,
+    }, '*');
+  }, [currentTab, iframeRef, isEnabled]);
+}

package/src/shared/components/path-picker/server-path-picker-directory-list.tsx

@@ -63,7 +63,7 @@ export function ServerPathPickerDirectoryList({
                     'grid w-full grid-cols-[minmax(0,1fr)_8rem] items-center rounded-sm border border-transparent px-2 py-1.5 text-left text-sm text-foreground outline-none transition-colors',
                     selected
                       ? 'border-primary/25 bg-primary/15'
-                      : 'hover:bg-accent/70 focus-visible:border-primary/35 focus-visible:bg-accent/70',
+                      : 'hover:bg-[var(--interaction-hover)] focus-visible:border-primary/35 focus-visible:bg-accent/70',
                   )}
                   onClick={() => onSelect(entry.path)}
                   onDoubleClick={() => onOpen(entry.path)}

package/src/shared/components/path-picker/server-path-picker-locations.tsx

@@ -112,7 +112,7 @@ export function ServerPathPickerLocations({
         type="button"
         className={cn(
           'flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
-          active ? 'bg-primary/12 text-primary' : 'text-foreground hover:bg-accent',
+          active ? 'bg-primary/12 text-primary' : 'text-foreground hover:bg-[var(--interaction-hover)]',
         )}
         aria-current={active ? 'location' : undefined}
         onClick={() => onNavigate(item.path)}

package/src/shared/components/path-picker/server-path-picker-navigation-bar.tsx

@@ -99,7 +99,7 @@ export function ServerPathPickerNavigationBar({
         disabled={!canGoUp || disabled}
       />
 
-      <div className="ml-1 flex h-9 min-w-0 flex-1 items-center overflow-hidden rounded-md border border-border bg-background shadow-sm focus-within:ring-1 focus-within:ring-primary/50">
+      <div className="ml-1 flex h-9 min-w-0 flex-1 items-center overflow-hidden rounded-md border border-border bg-background shadow-sm">
         {editingAddress ? (
           <Input
             value={addressDraft}
@@ -136,7 +136,7 @@ export function ServerPathPickerNavigationBar({
                           <>
                             <button
                               type="button"
-                              className="rounded px-1.5 py-1 text-sm text-muted-foreground hover:bg-accent"
+                              className="rounded px-1.5 py-1 text-sm text-muted-foreground hover:bg-[var(--interaction-hover)]"
                               aria-label={t('pathPickerShowFullAddress')}
                               onClick={beginAddressEdit}
                             >
@@ -149,7 +149,7 @@ export function ServerPathPickerNavigationBar({
                     ) : null}
                     <button
                       type="button"
-                      className="max-w-40 truncate rounded px-1.5 py-1 text-sm text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                      className="max-w-40 truncate rounded px-1.5 py-1 text-sm text-foreground hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
                       onClick={() => onNavigate(breadcrumb.path)}
                       disabled={disabled}
                     >

package/src/shared/components/settings/settings-page.tsx

@@ -27,7 +27,7 @@ export function SettingsPage({
         className
       )}
     >
-      <PageHeader title={title} description={description} actions={actions} className='mb-0' />
+      <PageHeader title={title} description={description} actions={actions} />
       {children}
     </PageLayout>
   );

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

@@ -31,7 +31,7 @@ describe('IconActionButton', () => {
     const button = screen.getByRole('button', { name: 'More' });
     expect(button.className).toContain('h-7');
     expect(button.className).toContain('w-7');
-    expect(button.className).toContain('hover:bg-accent');
+    expect(button.className).toContain('hover:bg-[var(--interaction-hover)]');
   });
 
   it('ignores restored pointer focus while preserving keyboard tooltip focus', () => {

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

@@ -31,7 +31,7 @@ const SIZE_CLASS: Record<IconActionButtonSize, string> = {
 
 const TONE_CLASS: Record<IconActionButtonTone, string> = {
   default:
-    'text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
+    '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',
   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/button.tsx

@@ -9,12 +9,12 @@ const buttonVariants = cva(
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-muted text-foreground hover:bg-accent hover:text-accent-foreground',
-        ghost: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+        outline: 'border border-border bg-card text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
+        secondary: 'bg-muted text-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
+        ghost: 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         primary: 'bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm',
-        subtle: 'bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+        subtle: 'bg-muted text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
         'primary-outline': 'border border-primary/30 text-primary hover:bg-primary hover:text-primary-foreground'
       },
       size: {