@nextclaw/ui 0.13.1 → 0.13.3

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

@@ -1,6 +1,8 @@
 import { act, renderHook, waitFor } from '@testing-library/react';
 import type { ReactNode } from 'react';
 import { DocBrowserProvider, useDocBrowser } from './doc-browser-context';
+import { RightPanelResourceRouteResolver } from '@/features/right-panel-resources';
+import { DocBrowserManager } from '@/shared/components/doc-browser/managers/doc-browser.manager';
 import { createDefaultDocBrowserState } from '@/shared/components/doc-browser/utils/doc-browser-state.utils';
 import { useDocBrowserStore } from '@/shared/components/doc-browser/stores/doc-browser.store';
 
@@ -13,9 +15,11 @@ vi.mock('@/shared/lib/i18n', async () => {
 });
 
 const wrapper = ({ children }: { children: ReactNode }) => (
-  <DocBrowserProvider>{children}</DocBrowserProvider>
+  <DocBrowserProvider manager={testDocBrowserManager}>{children}</DocBrowserProvider>
 );
 
+const testDocBrowserManager = new DocBrowserManager(new RightPanelResourceRouteResolver());
+
 const docBrowserStorageKey = 'nextclaw.doc-browser.state';
 
 beforeEach(() => {
@@ -175,6 +179,24 @@ describe('DocBrowserProvider dedupe keys', () => {
     });
   });
 
+  it('replaces the closed default start page when opening docs as a new tab', () => {
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    act(() => {
+      result.current.open(undefined, {
+        kind: 'docs',
+        newTab: true,
+        title: 'Help Docs',
+      });
+    });
+
+    expect(result.current.tabs).toHaveLength(1);
+    expect(result.current.currentTab).toMatchObject({
+      kind: 'docs',
+      title: 'Help Docs',
+    });
+  });
+
   it('infers built-in apps routes without component-level options', () => {
     const { result } = renderHook(() => useDocBrowser(), { wrapper });
 
@@ -190,6 +212,27 @@ describe('DocBrowserProvider dedupe keys', () => {
     });
   });
 
+  it('opens an already resolved panel app target without reparsing its content URL', () => {
+    const { result } = renderHook(() => useDocBrowser(), { wrapper });
+
+    act(() => {
+      result.current.openTarget({
+        dedupeKey: 'panel-app:demo',
+        historyPolicy: 'managed',
+        kind: 'panel-app',
+        title: 'Demo Panel App',
+        url: '/api/panel-apps/demo/content',
+      });
+    });
+
+    expect(result.current.currentTab).toMatchObject({
+      currentUrl: '/api/panel-apps/demo/content',
+      dedupeKey: 'panel-app:demo',
+      kind: 'panel-app',
+      title: 'Demo Panel App',
+    });
+  });
+
   it('uses managed history for non-doc routes', () => {
     const { result } = renderHook(() => useDocBrowser(), { wrapper });
 
@@ -238,7 +281,8 @@ describe('DocBrowserProvider dedupe keys', () => {
     });
 
     expect(result.current.currentTab).toMatchObject({
-      kind: 'docs',
+      currentUrl: 'data:text/html,A',
+      kind: 'content',
     });
     expect(result.current.activeHistoryIndex).toBe(0);
 
@@ -253,7 +297,7 @@ describe('DocBrowserProvider dedupe keys', () => {
       historyIndex: 1,
       history: ['data:text/html,A', 'data:text/html,B'],
     });
-    expect(result.current.activeHistoryIndex).toBe(2);
+    expect(result.current.activeHistoryIndex).toBe(1);
   });
 
   it('records active tab switching in the top-level browser history', () => {
@@ -400,7 +444,7 @@ describe('DocBrowserProvider persistence', () => {
     });
   });
 
-  it('falls back to the default docs tab when persisted state is malformed', async () => {
+  it('falls back to the start page when persisted state is malformed', async () => {
     window.localStorage.setItem(docBrowserStorageKey, JSON.stringify({
       version: 1,
       state: {
@@ -416,6 +460,9 @@ describe('DocBrowserProvider persistence', () => {
     const { result } = renderHook(() => useDocBrowser(), { wrapper });
 
     expect(result.current.isOpen).toBe(false);
-    expect(result.current.currentTab?.kind).toBe('docs');
+    expect(result.current.currentTab).toMatchObject({
+      currentUrl: 'nextclaw://new-tab',
+      kind: 'home',
+    });
   });
 });

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

@@ -1,5 +1,5 @@
 import { createContext, useContext, useMemo, type ReactNode } from 'react';
-import { DocBrowserManager } from '@/shared/components/doc-browser/managers/doc-browser.manager';
+import type { DocBrowserManager } from '@/shared/components/doc-browser/managers/doc-browser.manager';
 import { useDocBrowserStore } from '@/shared/components/doc-browser/stores/doc-browser.store';
 import type { DocBrowserContextValue } from '@/shared/components/doc-browser/types/doc-browser.types';
 
@@ -8,6 +8,8 @@ export type {
   DocBrowserContextValue,
   DocBrowserMode,
   DocBrowserOpenOptions,
+  DocBrowserRouteResolver,
+  DocBrowserRouteTarget,
   DocBrowserState,
   DocBrowserStateUpdate,
   DocBrowserTab,
@@ -21,7 +23,6 @@ export {
 } from '@/shared/components/doc-browser/utils/doc-browser-url.utils';
 
 const DocBrowserContext = createContext<DocBrowserContextValue | null>(null);
-const docBrowserManager = new DocBrowserManager();
 
 export function useDocBrowser(): DocBrowserContextValue {
   const ctx = useContext(DocBrowserContext);
@@ -29,7 +30,13 @@ export function useDocBrowser(): DocBrowserContextValue {
   return ctx;
 }
 
-export function DocBrowserProvider({ children }: { children: ReactNode }) {
+export function DocBrowserProvider({
+  children,
+  manager,
+}: {
+  children: ReactNode;
+  manager: DocBrowserManager;
+}) {
   const snapshot = useDocBrowserStore((state) => state.snapshot);
   const currentTab = useMemo(() => {
     return snapshot.tabs.find((tab) => tab.id === snapshot.activeTabId) ?? snapshot.tabs[0];
@@ -38,17 +45,18 @@ export function DocBrowserProvider({ children }: { children: ReactNode }) {
   const value = useMemo<DocBrowserContextValue>(() => ({
     ...snapshot,
     currentTab,
-    open: docBrowserManager.open,
-    openNewTab: docBrowserManager.openNewTab,
-    close: docBrowserManager.close,
-    toggleMode: docBrowserManager.toggleMode,
-    navigate: docBrowserManager.navigate,
-    syncUrl: docBrowserManager.syncUrl,
-    goBack: docBrowserManager.goBack,
-    goForward: docBrowserManager.goForward,
-    closeTab: docBrowserManager.closeTab,
-    setActiveTab: docBrowserManager.setActiveTab,
-  }), [currentTab, snapshot]);
+    open: manager.open,
+    openTarget: manager.openTarget,
+    openNewTab: manager.openNewTab,
+    close: manager.close,
+    toggleMode: manager.toggleMode,
+    navigate: manager.navigate,
+    syncUrl: manager.syncUrl,
+    goBack: manager.goBack,
+    goForward: manager.goForward,
+    closeTab: manager.closeTab,
+    setActiveTab: manager.setActiveTab,
+  }), [currentTab, manager, snapshot]);
 
   return (
     <DocBrowserContext.Provider value={value}>

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

@@ -1,94 +1,14 @@
-import type { ReactNode } from 'react';
-import {
-  BookOpen,
-  Boxes,
-  BrainCircuit,
-  Grid3X3,
-  Wrench,
-} from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
-import type { DocBrowserContextValue } from './doc-browser-context';
-import {
-  docBrowserRouteRegistry,
-  type DocBrowserHomeNavigationItem,
-  type DocBrowserNavigationTarget,
-} from './utils/doc-browser-route-registry.utils';
-import { cn } from '@/shared/lib/utils';
-
-type DocBrowserHomePageProps = {
-  open: DocBrowserContextValue['open'];
-};
-
-type DocBrowserHomeItem = {
-  accentClassName: string;
-  icon: ReactNode;
-};
-
-const HOME_ITEM_VIEW_BY_ID: Record<string, DocBrowserHomeItem> = {
-  apps: {
-    accentClassName: 'bg-emerald-50 text-emerald-700 border-emerald-100',
-    icon: <Boxes className="h-5 w-5" />,
-  },
-  'service-apps': {
-    accentClassName: 'bg-sky-50 text-sky-700 border-sky-100',
-    icon: <Grid3X3 className="h-5 w-5" />,
-  },
-  docs: {
-    accentClassName: 'bg-amber-50 text-amber-700 border-amber-100',
-    icon: <BookOpen className="h-5 w-5" />,
-  },
-  'skill-marketplace': {
-    accentClassName: 'bg-rose-50 text-rose-700 border-rose-100',
-    icon: <BrainCircuit className="h-5 w-5" />,
-  },
-  'mcp-marketplace': {
-    accentClassName: 'bg-indigo-50 text-indigo-700 border-indigo-100',
-    icon: <Wrench className="h-5 w-5" />,
-  },
-};
-
-function resolveHomeItemView(item: DocBrowserHomeNavigationItem): DocBrowserHomeItem {
-  return HOME_ITEM_VIEW_BY_ID[item.id] ?? {
-    accentClassName: 'bg-gray-50 text-gray-700 border-gray-100',
-    icon: <Boxes className="h-5 w-5" />,
-  };
-}
-
-export function DocBrowserHomePage({ open }: DocBrowserHomePageProps) {
-  const navigate = useNavigate();
-  const items = docBrowserRouteRegistry.getHomeNavigationItems();
-
-  const openTarget = (target: DocBrowserNavigationTarget) => {
-    if (target.type === 'app-route') {
-      navigate(target.path);
-      return;
-    }
-    open(target.url, target.options);
-  };
+import { Boxes } from 'lucide-react';
+import { t } from '@/shared/lib/i18n';
 
+export function DocBrowserHomePage() {
   return (
-    <div className="h-full overflow-auto bg-[#fbfaf7] px-5 py-6">
-      <div className="mx-auto w-full max-w-[640px]">
-        <div className="grid grid-cols-[repeat(auto-fit,minmax(88px,1fr))] gap-x-3 gap-y-5">
-          {items.map((item) => {
-            const view = resolveHomeItemView(item);
-            return (
-              <button
-                key={item.id}
-                type="button"
-                onClick={() => openTarget(item.target)}
-                className="group flex min-h-[82px] flex-col items-center gap-2 rounded-lg px-2 py-2 text-center transition-colors hover:bg-white/80"
-              >
-                <span className={cn('flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border shadow-[0_1px_2px_rgba(30,20,10,0.04)] transition-transform group-hover:scale-[1.03]', view.accentClassName)}>
-                  {view.icon}
-                </span>
-                <span className="min-w-0 max-w-full">
-                  <span className="line-clamp-2 block text-xs font-medium leading-snug text-gray-800">{item.label}</span>
-                </span>
-              </button>
-            );
-          })}
-        </div>
+    <div className="flex h-full items-center justify-center bg-background px-5 py-6">
+      <div className="flex max-w-[260px] flex-col items-center gap-3 text-center">
+        <span className="flex h-12 w-12 items-center justify-center rounded-lg border border-gray-100 bg-gray-50 text-gray-600 shadow-[0_1px_2px_rgba(30,20,10,0.04)]">
+          <Boxes className="h-5 w-5" />
+        </span>
+        <span className="text-sm font-medium text-gray-800">{t('docBrowserHomeTitle')}</span>
       </div>
     </div>
   );

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

@@ -4,6 +4,7 @@ import type { DocBrowserContextValue, DocBrowserTab } from './doc-browser-contex
 export type DocBrowserCustomTabRenderParams = {
   currentUrl: string;
   open: DocBrowserContextValue['open'];
+  openTarget: DocBrowserContextValue['openTarget'];
   refreshIframe: () => void;
   tab: DocBrowserTab;
 };

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

@@ -2,6 +2,7 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { DocBrowser } from "@/shared/components/doc-browser/doc-browser";
 import type { DocBrowserContextValue, DocBrowserTab } from "@/shared/components/doc-browser/doc-browser-context";
+import { PANEL_APPS_DOC_BROWSER_RENDERERS } from "@/features/panel-apps";
 
 const { navigateMock } = vi.hoisted(() => ({
   navigateMock: vi.fn(),
@@ -44,6 +45,7 @@ const { docBrowserState } = vi.hoisted<{ docBrowserState: DocBrowserContextValue
       navVersion: 0,
     },
     open: vi.fn(),
+    openTarget: vi.fn(),
     openNewTab: vi.fn(),
     close: vi.fn(),
     toggleMode: vi.fn(),
@@ -138,7 +140,7 @@ describe("DocBrowser", () => {
   });
 
   it("keeps browser window controls on the tab strip", () => {
-    render(<DocBrowser />);
+    render(<DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />);
 
     const tabStrip = screen.getByTestId("doc-browser-tab-strip");
     const tabActions = screen.getByTestId("doc-browser-tab-actions");
@@ -176,7 +178,7 @@ describe("DocBrowser", () => {
     docBrowserState.activeHistoryIndex = 1;
     docBrowserState.currentTab = historyTab;
 
-    render(<DocBrowser />);
+    render(<DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />);
 
     fireEvent.click(screen.getByTitle("Back"));
     fireEvent.click(screen.getByTitle("Forward"));
@@ -249,7 +251,7 @@ describe("DocBrowser", () => {
     docBrowserState.activeTabId = homeTab.id;
     docBrowserState.currentTab = homeTab;
 
-    render(<DocBrowser />);
+    render(<DocBrowser customTabRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} />);
 
     expect(screen.getAllByText("Start Page").length).toBeGreaterThan(0);
     expect(screen.getByText("Apps")).toBeTruthy();

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

@@ -62,6 +62,7 @@ export function DocBrowser({
     activeHistoryIndex,
     currentTab,
     open,
+    openTarget,
     openNewTab,
     close,
     toggleMode,
@@ -255,12 +256,13 @@ export function DocBrowser({
   const customRenderParams = currentTab ? {
     currentUrl,
     open,
+    openTarget,
     refreshIframe,
     tab: currentTab,
   } : undefined;
   const customToolbar = customRenderParams ? customRenderer?.renderToolbar?.(customRenderParams) : null;
   const customContent = customRenderParams
-    ? customRenderer?.renderContent?.(customRenderParams) ?? (isHomeTab ? <DocBrowserHomePage open={open} /> : null)
+    ? customRenderer?.renderContent?.(customRenderParams) ?? (isHomeTab ? <DocBrowserHomePage /> : null)
     : null;
   const iframeSandbox = currentTab
     ? customRenderer?.getIframeSandbox?.(currentTab) ?? 'allow-same-origin allow-scripts allow-popups allow-forms'

package/src/shared/components/doc-browser/managers/doc-browser.manager.ts

@@ -1,10 +1,11 @@
 import type {
   DocBrowserActiveHistoryEntry,
   DocBrowserOpenOptions,
+  DocBrowserRouteResolver,
+  DocBrowserRouteTarget,
   DocBrowserState,
   DocBrowserStateUpdate,
   DocBrowserTab,
-  DocBrowserTabKind,
 } from '@/shared/components/doc-browser/types/doc-browser.types';
 import {
   createDocBrowserActiveHistoryEntry,
@@ -13,13 +14,14 @@ import {
 } from '@/shared/components/doc-browser/utils/doc-browser-state.utils';
 import {
   DOC_BROWSER_HOME_TAB_KIND,
+  DOC_BROWSER_HOME_URL,
   getDefaultDocsUrl,
 } from '@/shared/components/doc-browser/utils/doc-browser-url.utils';
-import {
-  docBrowserRouteRegistry,
-} from '@/shared/components/doc-browser/utils/doc-browser-route-registry.utils';
+import { DefaultDocBrowserRouteResolver } from '@/shared/components/doc-browser/utils/doc-browser-route-resolver.utils';
 import { useDocBrowserStore } from '@/shared/components/doc-browser/stores/doc-browser.store';
 
+const defaultDocBrowserRouteResolver = new DefaultDocBrowserRouteResolver();
+
 function updateTab(
   state: DocBrowserState,
   tabId: string,
@@ -44,17 +46,22 @@ function appendManualNavigation(tab: DocBrowserTab, url: string): Pick<DocBrowse
 }
 
 function areActiveHistoryEntriesEquivalent(
+  routeResolver: DocBrowserRouteResolver,
   current: DocBrowserActiveHistoryEntry,
   next: DocBrowserActiveHistoryEntry,
 ): boolean {
   return current.tabId === next.tabId
     && current.kind === next.kind
-    && docBrowserRouteRegistry.areUrlsEquivalent(current.url, next.url, current.kind, next.kind);
+    && routeResolver.areUrlsEquivalent(current.url, next.url, current.kind, next.kind);
 }
 
-function pushActiveHistory(state: DocBrowserState, entry: DocBrowserActiveHistoryEntry): DocBrowserState {
+function pushActiveHistory(
+  routeResolver: DocBrowserRouteResolver,
+  state: DocBrowserState,
+  entry: DocBrowserActiveHistoryEntry,
+): DocBrowserState {
   const current = state.activeHistory[state.activeHistoryIndex];
-  if (current && areActiveHistoryEntriesEquivalent(current, entry)) {
+  if (current && areActiveHistoryEntriesEquivalent(routeResolver, current, entry)) {
     return state;
   }
   const activeHistory = [...state.activeHistory.slice(0, state.activeHistoryIndex + 1), entry];
@@ -65,26 +72,30 @@ function pushActiveHistory(state: DocBrowserState, entry: DocBrowserActiveHistor
   };
 }
 
-function findTabHistoryIndex(tab: DocBrowserTab, url: string): number {
+function findTabHistoryIndex(routeResolver: DocBrowserRouteResolver, tab: DocBrowserTab, url: string): number {
   for (let index = tab.history.length - 1; index >= 0; index -= 1) {
-    if (docBrowserRouteRegistry.areUrlsEquivalent(tab.history[index], url, tab.kind, tab.kind)) {
+    if (routeResolver.areUrlsEquivalent(tab.history[index], url, tab.kind, tab.kind)) {
       return index;
     }
   }
   return -1;
 }
 
-function restoreActiveHistoryEntry(state: DocBrowserState, entry: DocBrowserActiveHistoryEntry): DocBrowserState {
+function restoreActiveHistoryEntry(
+  routeResolver: DocBrowserRouteResolver,
+  state: DocBrowserState,
+  entry: DocBrowserActiveHistoryEntry,
+): DocBrowserState {
   const tab = state.tabs.find((item) => item.id === entry.tabId);
   if (!tab) {
     return state;
   }
-  const target = docBrowserRouteRegistry.resolveOpenTarget({
+  const target = routeResolver.resolveOpenTarget({
     activeTab: tab,
     kind: entry.kind,
     url: entry.url,
   });
-  const historyIndex = findTabHistoryIndex(tab, target.url);
+  const historyIndex = findTabHistoryIndex(routeResolver, tab, target.url);
   return updateTab(
     {
       ...state,
@@ -104,12 +115,9 @@ function restoreActiveHistoryEntry(state: DocBrowserState, entry: DocBrowserActi
 }
 
 function updateTabForOpen(
+  routeResolver: DocBrowserRouteResolver,
   tab: DocBrowserTab,
-  target: {
-    kind: DocBrowserTabKind;
-    title: string;
-    url: string;
-  },
+  target: DocBrowserRouteTarget,
   options?: DocBrowserOpenOptions,
   dedupeKey?: string,
 ): DocBrowserTab {
@@ -120,7 +128,7 @@ function updateTabForOpen(
     dedupeKey,
   };
 
-  if (docBrowserRouteRegistry.areUrlsEquivalent(tab.currentUrl, target.url, tab.kind, target.kind)) {
+  if (routeResolver.areUrlsEquivalent(tab.currentUrl, target.url, tab.kind, target.kind)) {
     return baseTab;
   }
 
@@ -132,25 +140,27 @@ function updateTabForOpen(
   };
 }
 
-function openDocBrowserState(
+function isClosedDefaultHomeState(state: DocBrowserState, activeTab?: DocBrowserTab): boolean {
+  return !state.isOpen
+    && state.tabs.length === 1
+    && activeTab?.kind === DOC_BROWSER_HOME_TAB_KIND
+    && activeTab.currentUrl === DOC_BROWSER_HOME_URL;
+}
+
+function openResolvedDocBrowserState(
+  routeResolver: DocBrowserRouteResolver,
   prev: DocBrowserState,
-  url?: string,
+  target: DocBrowserRouteTarget,
   options?: DocBrowserOpenOptions,
 ): DocBrowserState {
   const {
     activate,
     dedupeKey: rawDedupeKey,
-    kind,
     newTab: shouldForceNewTab,
     title,
   } = options ?? {};
-  const activeTab = prev.tabs.find((tab) => tab.id === prev.activeTabId) ?? prev.tabs[0];
-  const target = docBrowserRouteRegistry.resolveOpenTarget({
-    activeTab,
-    kind,
-    url,
-  });
   const dedupeKey = rawDedupeKey?.trim() || target.dedupeKey;
+  const activeTab = prev.tabs.find((tab) => tab.id === prev.activeTabId) ?? prev.tabs[0];
   const matchedTab = dedupeKey
     ? prev.tabs.find((tab) => tab.dedupeKey === dedupeKey)
     : undefined;
@@ -159,7 +169,7 @@ function openDocBrowserState(
     const next = updateTab(
       prev,
       matchedTab.id,
-      (tab) => updateTabForOpen(tab, target, options, dedupeKey),
+      (tab) => updateTabForOpen(routeResolver, tab, target, options, dedupeKey),
     );
     const shouldActivate = activate !== false;
     const activeTabId = shouldActivate ? matchedTab.id : prev.activeTabId;
@@ -170,38 +180,76 @@ function openDocBrowserState(
     };
     const shouldPushActiveHistory = shouldActivate || matchedTab.id === prev.activeTabId;
     return shouldPushActiveHistory
-      ? pushActiveHistory(nextState, { kind: target.kind, tabId: matchedTab.id, url: target.url })
+      ? pushActiveHistory(routeResolver, nextState, { kind: target.kind, tabId: matchedTab.id, url: target.url })
       : nextState;
   }
 
   if (shouldForceNewTab || dedupeKey || !activeTab || activeTab.kind !== target.kind) {
     const newTab = createDocBrowserTab(target.url, target.kind, title ?? target.title, dedupeKey);
+    if (isClosedDefaultHomeState(prev, activeTab)) {
+      const nextState = {
+        ...prev,
+        isOpen: true,
+        tabs: [newTab],
+        activeTabId: newTab.id,
+        activeHistory: [createDocBrowserActiveHistoryEntry(newTab)],
+        activeHistoryIndex: 0,
+      };
+      return nextState;
+    }
     const nextState = {
       ...prev,
       isOpen: true,
       tabs: [...prev.tabs, newTab],
       activeTabId: newTab.id,
     };
-    return pushActiveHistory(nextState, createDocBrowserActiveHistoryEntry(newTab));
+    return pushActiveHistory(routeResolver, nextState, createDocBrowserActiveHistoryEntry(newTab));
   }
 
   const next = updateActiveTab(
     prev,
-    (tab) => updateTabForOpen(tab, target, options, dedupeKey),
+    (tab) => updateTabForOpen(routeResolver, tab, target, options, dedupeKey),
   );
   return pushActiveHistory(
+    routeResolver,
     { ...next, isOpen: true },
     { kind: target.kind, tabId: prev.activeTabId, url: target.url },
   );
 }
 
+function openDocBrowserState(
+  routeResolver: DocBrowserRouteResolver,
+  prev: DocBrowserState,
+  url?: string,
+  options?: DocBrowserOpenOptions,
+): DocBrowserState {
+  const activeTab = prev.tabs.find((tab) => tab.id === prev.activeTabId) ?? prev.tabs[0];
+  const target = routeResolver.resolveOpenTarget({
+    activeTab,
+    kind: options?.kind,
+    url,
+  });
+  return openResolvedDocBrowserState(routeResolver, prev, target, options);
+}
+
 export class DocBrowserManager {
+  constructor(private readonly routeResolver: DocBrowserRouteResolver = defaultDocBrowserRouteResolver) {}
+
   private readonly setSnapshot = (next: DocBrowserStateUpdate): void => {
     useDocBrowserStore.getState().setSnapshot(next);
   };
 
   readonly open = (url?: string, options?: DocBrowserOpenOptions): void => {
-    this.setSnapshot((prev) => openDocBrowserState(prev, url, options));
+    this.setSnapshot((prev) => openDocBrowserState(this.routeResolver, prev, url, options));
+  };
+
+  readonly openTarget = (target: DocBrowserRouteTarget, options?: DocBrowserOpenOptions): void => {
+    this.setSnapshot((prev) => openResolvedDocBrowserState(this.routeResolver, prev, target, {
+      ...options,
+      dedupeKey: options?.dedupeKey ?? target.dedupeKey,
+      kind: options?.kind ?? target.kind,
+      title: options?.title ?? target.title,
+    }));
   };
 
   readonly openNewTab = (): void => {
@@ -229,12 +277,12 @@ export class DocBrowserManager {
       }
 
       const next = updateActiveTab(prev, (tab) => {
-        if (!docBrowserRouteRegistry.usesManagedHistory(tab)) {
+        if (!this.routeResolver.usesManagedHistory(tab)) {
           return tab;
         }
-        const target = docBrowserRouteRegistry.resolveOpenTarget({ activeTab: tab, url });
+        const target = this.routeResolver.resolveOpenTarget({ activeTab: tab, url });
 
-        if (docBrowserRouteRegistry.areUrlsEquivalent(tab.currentUrl, target.url, tab.kind, target.kind)) {
+        if (this.routeResolver.areUrlsEquivalent(tab.currentUrl, target.url, tab.kind, target.kind)) {
           return tab;
         }
 
@@ -250,7 +298,7 @@ export class DocBrowserManager {
       });
       const currentTab = next.tabs.find((tab) => tab.id === next.activeTabId);
       return currentTab
-        ? pushActiveHistory(next, createDocBrowserActiveHistoryEntry(currentTab))
+        ? pushActiveHistory(this.routeResolver, next, createDocBrowserActiveHistoryEntry(currentTab))
         : next;
     });
   };
@@ -267,12 +315,12 @@ export class DocBrowserManager {
       }
 
       const next = updateActiveTab(prev, (tab) => {
-        if (!docBrowserRouteRegistry.usesManagedHistory(tab)) {
+        if (!this.routeResolver.usesManagedHistory(tab)) {
           return tab;
         }
-        const target = docBrowserRouteRegistry.resolveOpenTarget({ activeTab: tab, kind: tab.kind, url });
+        const target = this.routeResolver.resolveOpenTarget({ activeTab: tab, kind: tab.kind, url });
 
-        if (docBrowserRouteRegistry.areUrlsEquivalent(tab.currentUrl, target.url, tab.kind, target.kind)) {
+        if (this.routeResolver.areUrlsEquivalent(tab.currentUrl, target.url, tab.kind, target.kind)) {
           return tab;
         }
 
@@ -287,7 +335,7 @@ export class DocBrowserManager {
       });
       const currentTab = next.tabs.find((tab) => tab.id === next.activeTabId);
       return currentTab
-        ? pushActiveHistory(next, createDocBrowserActiveHistoryEntry(currentTab))
+        ? pushActiveHistory(this.routeResolver, next, createDocBrowserActiveHistoryEntry(currentTab))
         : next;
     });
   };
@@ -302,7 +350,7 @@ export class DocBrowserManager {
       if (!entry) {
         return prev;
       }
-      return restoreActiveHistoryEntry({ ...prev, activeHistoryIndex }, entry);
+      return restoreActiveHistoryEntry(this.routeResolver, { ...prev, activeHistoryIndex }, entry);
     });
   };
 
@@ -316,7 +364,7 @@ export class DocBrowserManager {
       if (!entry) {
         return prev;
       }
-      return restoreActiveHistoryEntry({ ...prev, activeHistoryIndex }, entry);
+      return restoreActiveHistoryEntry(this.routeResolver, { ...prev, activeHistoryIndex }, entry);
     });
   };
 
@@ -361,7 +409,7 @@ export class DocBrowserManager {
         ),
       };
       return prev.activeTabId === tabId
-        ? pushActiveHistory(reconciledState, createDocBrowserActiveHistoryEntry(nextActiveTab))
+        ? pushActiveHistory(this.routeResolver, reconciledState, createDocBrowserActiveHistoryEntry(nextActiveTab))
         : reconciledState;
     });
   };
@@ -376,6 +424,7 @@ export class DocBrowserManager {
         return prev;
       }
       return pushActiveHistory(
+        this.routeResolver,
         { ...prev, activeTabId: tabId, isOpen: true },
         createDocBrowserActiveHistoryEntry(tab),
       );