@nextclaw/ui 0.25.4 → 0.26.0

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

@@ -1,18 +1,10 @@
-import { useState, type PointerEvent } from "react";
+import { PageResourceIcon } from '@/features/right-panel-resources';
 import {
-  AppWindow,
   ArrowLeft,
   ArrowRight,
-  BookOpen,
-  Boxes,
-  Github,
-  PanelRightOpen,
-  PictureInPicture2,
   Pin,
   PinOff,
   Plus,
-  X,
-  type LucideIcon,
 } from "lucide-react";
 import type { DocBrowserDockState, DocBrowserTab } from "./doc-browser-context";
 import type { ContextMenuGroup } from "@/shared/components/ui/context-menu/context-menu";
@@ -21,7 +13,6 @@ import {
   type CompactTabStripAction,
   type CompactTabStripTab,
 } from "@/shared/components/ui/tab-strip/compact-tab-strip";
-import { cn } from "@/shared/lib/utils";
 import { t } from "@/shared/lib/i18n";
 
 type DocBrowserTabStripProps = {
@@ -29,8 +20,6 @@ type DocBrowserTabStripProps = {
   activeTabId: string;
   canGoBack: boolean;
   canGoForward: boolean;
-  isDocked: boolean;
-  isFullscreen: boolean;
   dockState?: DocBrowserDockState;
   onGoBack: () => void;
   onGoForward: () => void;
@@ -38,78 +27,11 @@ type DocBrowserTabStripProps = {
   onToggleDock?: () => void;
   onSetActiveTab: (tabId: string) => void;
   onCloseTab: (tabId: string) => void;
-  onClose: () => void;
-  onDragStart: (event: PointerEvent<HTMLElement>) => void;
-  onToggleMode: () => void;
   getTabMenuGroups?: (tab: DocBrowserTab) => readonly ContextMenuGroup[] | undefined;
 };
 
-const DOC_BROWSER_BUILTIN_TAB_ICONS: Record<string, LucideIcon> = {
-  apps: Boxes,
-  docs: BookOpen,
-  github: Github,
-  "new-tab": Plus,
-  "panel-app": AppWindow,
-  "service-apps": AppWindow,
-};
-
-function DocBrowserUrlTabIcon({
-  fallbackIcon: FallbackIcon,
-  url,
-}: {
-  fallbackIcon: LucideIcon;
-  url: string;
-}) {
-  const [loadFailed, setLoadFailed] = useState(false);
-  return loadFailed ? (
-    <FallbackIcon className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
-  ) : (
-    <img
-      src={url}
-      alt=""
-      className="h-3.5 w-3.5 rounded-sm object-cover"
-      onError={() => setLoadFailed(true)}
-    />
-  );
-}
-
 function DocBrowserTabIcon({ tab }: { tab: DocBrowserTab }) {
-  const { dockIcon } = tab;
-  const fallbackIcon = tab.kind === "docs"
-    ? BookOpen
-    : tab.kind === "home"
-      ? Plus
-      : tab.kind === "apps"
-        ? Boxes
-        : AppWindow;
-  const Icon = dockIcon?.type === "builtin"
-    ? (DOC_BROWSER_BUILTIN_TAB_ICONS[dockIcon.name] ?? fallbackIcon)
-      : fallbackIcon;
-
-  if (dockIcon?.type === "url") {
-    return (
-      <DocBrowserUrlTabIcon
-        key={dockIcon.url}
-        fallbackIcon={fallbackIcon}
-        url={dockIcon.url}
-      />
-    );
-  }
-  if (dockIcon?.type === "text") {
-    return (
-      <span className="max-w-3.5 truncate text-[10px] font-semibold leading-none" aria-hidden="true">
-        {dockIcon.value}
-      </span>
-    );
-  }
-
-  return <Icon className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />;
-}
-
-function shouldBlockHeaderDrag(target: EventTarget | null): boolean {
-  return target instanceof Element && Boolean(
-    target.closest("button, a, input, textarea, select, [data-compact-tab-item]"),
-  );
+  return <PageResourceIcon uri={tab.resourceUri ?? tab.currentUrl} icon={tab.dockIcon} />;
 }
 
 export function DocBrowserTabStrip({
@@ -117,8 +39,6 @@ export function DocBrowserTabStrip({
   activeTabId,
   canGoBack,
   canGoForward,
-  isDocked,
-  isFullscreen,
   dockState,
   onGoBack,
   onGoForward,
@@ -126,21 +46,16 @@ export function DocBrowserTabStrip({
   onToggleDock,
   onSetActiveTab,
   onCloseTab,
-  onClose,
-  onDragStart,
-  onToggleMode,
   getTabMenuGroups,
 }: DocBrowserTabStripProps) {
   const backLabel = t("docBrowserBack");
-  const closeLabel = t("docBrowserClose");
-  const closeTabLabel = t("docBrowserCloseTab");
+  const closeTabLabel = t("workbenchCloseTab");
   const dockLabel = dockState?.isDocked
     ? dockState.removable
       ? t("sideDockUnpinCurrent")
       : t("sideDockBuiltInDocked")
     : t("sideDockPinCurrent");
   const forwardLabel = t("docBrowserForward");
-  const modeLabel = isDocked ? t("docBrowserFloatMode") : t("docBrowserDockMode");
   const newTabLabel = t("docBrowserNewTab");
   const compactTabs: CompactTabStripTab[] = tabs.map((tab) => ({
     key: tab.id,
@@ -170,17 +85,6 @@ export function DocBrowserTabStrip({
           },
         ]
       : []),
-    ...(!isFullscreen
-      ? [
-          {
-            key: "mode",
-            icon: isDocked ? <PictureInPicture2 className="h-3.5 w-3.5" /> : <PanelRightOpen className="h-3.5 w-3.5" />,
-            label: modeLabel,
-            onClick: onToggleMode,
-          },
-        ]
-      : []),
-    { key: "close", icon: <X className="h-3.5 w-3.5" />, label: closeLabel, onClick: onClose },
   ];
 
   return (
@@ -189,14 +93,8 @@ export function DocBrowserTabStrip({
       actionsTestId="doc-browser-tab-actions"
       tabs={compactTabs}
       actions={actions}
-      className={cn(
-        "h-10 gap-1.5 border-border/50 bg-card/80 px-2 shrink-0 select-none",
-        isFullscreen && "h-[calc(env(safe-area-inset-top,0px)+2.5rem)] pt-[env(safe-area-inset-top,0px)]",
-      )}
-      scrollClassName={cn(
-        "doc-browser-tab-scrollbar flex h-full items-center gap-0.5",
-        !isDocked && !isFullscreen && "cursor-grab active:cursor-grabbing",
-      )}
+      className="h-10 min-w-0 flex-1 gap-1 border-0 bg-transparent px-0 select-none"
+      scrollClassName="doc-browser-tab-scrollbar flex h-full items-center gap-0.5"
       tabsClassName="items-center gap-0.5"
       actionsClassName="h-full items-center gap-0.5"
       actionButtonClassName="rounded-md p-1.5 text-muted-foreground hover:bg-muted/60 hover:text-foreground disabled:opacity-50"
@@ -204,17 +102,7 @@ export function DocBrowserTabStrip({
       activeTabClassName="bg-muted/80 text-foreground"
       inactiveTabClassName="text-muted-foreground hover:bg-muted/45 hover:text-foreground"
       labelClassName="px-0.5 text-xs font-normal"
-      onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
-      onScrollPointerDown={(event) => {
-        if (shouldBlockHeaderDrag(event.target)) {
-          event.stopPropagation();
-          return;
-        }
-        if (!isDocked && !isFullscreen) {
-          event.stopPropagation();
-          onDragStart(event);
-        }
-      }}
+
     />
   );
 }

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

@@ -18,18 +18,11 @@ import {
   DocBrowserFrameContent,
 } from './doc-browser-panel-parts';
 import { DocBrowserTabStrip } from './doc-browser-tab-strip';
-import {
-  createInitialFloatingPanelRect,
-  moveFloatingPanelRect,
-  resizeFloatingPanelRect,
-  type FloatingPanelRect,
-  type FloatingPanelResizeEdge,
-} from './utils/doc-browser-floating-panel.utils';
-import { ResizableRightPanel } from '@/shared/components/resizable-right-panel/resizable-right-panel';
-import { cn } from '@/shared/lib/utils';
+import { WorkbenchSurface } from '@/shared/components/workbench/workbench-surface';
+import { GLOBAL_WORKBENCH_SURFACE } from '@/shared/components/workbench/types/workbench-surface.types';
+import { getAppPresenter } from '@/app/presenters/app.presenter';
 import { t } from '@/shared/lib/i18n';
 import type { ContextMenuGroup } from '@/shared/components/ui/context-menu/context-menu';
-import { GripVertical } from 'lucide-react';
 import {
   DOC_BROWSER_DOCKED_MAX_WIDTH,
   DOC_BROWSER_DOCKED_MIN_WIDTH,
@@ -44,16 +37,8 @@ type DocBrowserProps = {
 
 export type DocBrowserTabMenuGroupsResolver = NonNullable<DocBrowserProps['getTabMenuGroups']>;
 
-type FloatingPanelInteraction = {
-  startX: number;
-  startY: number;
-  startRect: FloatingPanelRect;
-} & (
-  | { kind: 'drag' }
-  | { kind: 'resize'; edge: FloatingPanelResizeEdge }
-);
 
-const DEFAULT_DOCS_IFRAME_SANDBOX = 'allow-same-origin allow-scripts allow-popups allow-forms';
+
 
 function resolveContentUrlInput(input: string, currentUrl: string): string {
   if (input.startsWith('/')) {
@@ -72,20 +57,6 @@ function resolveContentUrlInput(input: string, currentUrl: string): string {
   return `https://${input}`;
 }
 
-function resolveIframeSandbox(
-  customRenderer: DocBrowserCustomTabRenderers[string] | undefined,
-  currentTab: DocBrowserTab | undefined,
-): string | undefined {
-  if (!currentTab) {
-    return DEFAULT_DOCS_IFRAME_SANDBOX;
-  }
-  const customSandbox = customRenderer?.getIframeSandbox?.(currentTab);
-  if (customSandbox !== undefined) {
-    return customSandbox;
-  }
-  return currentTab.kind === 'content' ? undefined : DEFAULT_DOCS_IFRAME_SANDBOX;
-}
-
 function useDocBrowserDockAction(
   dockControls: DocBrowserDockControls | undefined,
   currentTab: DocBrowserTab | undefined,
@@ -172,7 +143,6 @@ export function DocBrowser({
 }: DocBrowserProps) {
   const {
     isOpen,
-    mode,
     dockedWidth,
     tabs,
     activeTabId,
@@ -183,7 +153,6 @@ export function DocBrowser({
     openTarget,
     openNewTab,
     close,
-    toggleMode,
     setDockedWidth,
     goBack,
     goForward,
@@ -194,8 +163,6 @@ export function DocBrowser({
   } = useDocBrowser();
 
   const [iframeReloadVersion, setIframeReloadVersion] = useState(0);
-  const [floatRect, setFloatRect] = useState<FloatingPanelRect>(createInitialFloatingPanelRect);
-  const [floatInteraction, setFloatInteraction] = useState<FloatingPanelInteraction | null>(null);
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const currentUrl = currentTab?.currentUrl ?? getDefaultDocsUrl();
   const navVersion = currentTab?.navVersion ?? 0;
@@ -251,7 +218,7 @@ export function DocBrowser({
 
   useEffect(() => {
     const handler = (e: MessageEvent) => {
-      if (!isDocsTab) {
+      if (!isDocsTab || e.source !== iframeRef.current?.contentWindow) {
         return;
       }
       if (e.data?.type === 'docs-route-change' && typeof e.data.url === 'string') {
@@ -283,65 +250,13 @@ export function DocBrowser({
     return () => window.removeEventListener('message', handler);
   }, [currentTab, customRenderer, iframeInstanceId]);
 
-  const startFloatDrag = useCallback((event: React.PointerEvent<HTMLElement>) => {
-    event.preventDefault();
-    setFloatInteraction({
-      kind: 'drag',
-      startX: event.clientX,
-      startY: event.clientY,
-      startRect: floatRect,
-    });
-  }, [floatRect]);
-
-  const startFloatResize = useCallback((edge: FloatingPanelResizeEdge) => (event: React.PointerEvent<HTMLElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-    setFloatInteraction({
-      kind: 'resize',
-      edge,
-      startX: event.clientX,
-      startY: event.clientY,
-      startRect: floatRect,
-    });
-  }, [floatRect]);
-
-  useEffect(() => {
-    if (!floatInteraction) return;
-
-    const onMove = (event: PointerEvent) => {
-      const { startRect, startX, startY } = floatInteraction;
-      const dx = event.clientX - startX;
-      const dy = event.clientY - startY;
-
-      if (floatInteraction.kind === 'drag') {
-        setFloatRect(moveFloatingPanelRect(startRect, dx, dy));
-        return;
-      }
-
-      setFloatRect(resizeFloatingPanelRect(floatInteraction.edge, startRect, dx, dy));
-    };
-
-    const onEnd = () => setFloatInteraction(null);
-
-    window.addEventListener('pointermove', onMove);
-    window.addEventListener('pointerup', onEnd);
-    window.addEventListener('pointercancel', onEnd);
-    return () => {
-      window.removeEventListener('pointermove', onMove);
-      window.removeEventListener('pointerup', onEnd);
-      window.removeEventListener('pointercancel', onEnd);
-    };
-  }, [floatInteraction]);
-
   const refreshIframe = useCallback(() => {
     setIframeReloadVersion((version) => version + 1);
   }, []);
 
   const handleToggleDock = useDocBrowserDockAction(dockControls, currentTab, dockState);
 
-  if (!isOpen) return null;
 
-  const isDocked = mode === 'docked';
   const isFullscreen = displayMode === 'fullscreen';
   const customRenderParams = currentTab ? {
     currentUrl,
@@ -354,29 +269,11 @@ export function DocBrowser({
   const customContent = customRenderParams
     ? customRenderer?.renderContent?.(customRenderParams) ?? (isHomeTab ? <DocBrowserHomePage /> : null)
     : null;
-  const iframeSandbox = resolveIframeSandbox(customRenderer, currentTab);
+  const iframeSandbox = currentTab ? customRenderer?.getIframeSandbox?.(currentTab) : undefined;
 
   const panelContent = (
     <>
-      <DocBrowserTabStrip
-        tabs={tabs}
-        activeTabId={activeTabId}
-        canGoBack={canGoBack}
-        canGoForward={canGoForward}
-        dockState={dockState}
-        isDocked={isDocked}
-        isFullscreen={isFullscreen}
-        onGoBack={goBack}
-        onGoForward={goForward}
-        onOpenNewTab={openNewTab}
-        onToggleDock={handleToggleDock}
-        onSetActiveTab={setActiveTab}
-        onCloseTab={closeTab}
-        onClose={close}
-        onDragStart={startFloatDrag}
-        onToggleMode={toggleMode}
-        getTabMenuGroups={getTabMenuGroups}
-      />
+
 
       <DocBrowserAddressToolbar
         isVisible={isAddressToolbarTab}
@@ -396,8 +293,8 @@ export function DocBrowser({
         iframeRef={iframeRef}
         iframeInstanceId={iframeInstanceId}
         iframeSandbox={iframeSandbox}
-        isDragging={floatInteraction?.kind === 'drag'}
-        isResizing={floatInteraction?.kind === 'resize'}
+        isDragging={false}
+        isResizing={false}
         onIframeLoad={restoreScroll}
         onIframePointerOver={customRenderer?.onIframePointerOver}
       />
@@ -406,89 +303,28 @@ export function DocBrowser({
     </>
   );
 
-  if (isDocked && !isFullscreen) {
-    return (
-      <ResizableRightPanel
-        data-testid="doc-browser-panel"
-        data-theme-surface="doc-browser"
-        defaultWidth={dockedWidth}
-        width={dockedWidth}
-        minWidth={DOC_BROWSER_DOCKED_MIN_WIDTH}
-        maxWidth={DOC_BROWSER_DOCKED_MAX_WIDTH}
-        onWidthCommit={setDockedWidth}
-      >
-        {panelContent}
-      </ResizableRightPanel>
-    );
-  }
-
   return (
-    <div
-      data-testid="doc-browser-panel"
-      data-theme-surface="doc-browser"
-      className={cn(
-        'relative flex flex-col overflow-hidden bg-card text-card-foreground',
-        isFullscreen
-          ? 'fixed inset-0 z-[var(--z-floating-panel)] h-[100dvh] w-screen rounded-none border-0 shadow-2xl'
-          : 'rounded-2xl border border-border shadow-2xl',
-      )}
-      style={
-        isFullscreen
-          ? undefined
-          : {
-              position: 'fixed',
-              left: floatRect.x,
-              top: floatRect.y,
-              width: floatRect.w,
-              height: floatRect.h,
-              zIndex: 'var(--z-floating-panel)',
-            }
-      }
-    >
+    <WorkbenchSurface id={GLOBAL_WORKBENCH_SURFACE} manager={getAppPresenter().workbenchSurfaceManager}
+      title={currentTab?.title || t('workbenchGlobalGroup')} testId="doc-browser-panel"
+      width={dockedWidth} minWidth={DOC_BROWSER_DOCKED_MIN_WIDTH} maxWidth={DOC_BROWSER_DOCKED_MAX_WIDTH}
+      onWidthCommit={setDockedWidth} onClose={close} closeLabel={t('workbenchHideGroup')}
+      hidden={!isOpen} fullscreen={isFullscreen} navigation={
+      <DocBrowserTabStrip
+        tabs={tabs}
+        activeTabId={activeTabId}
+        canGoBack={canGoBack}
+        canGoForward={canGoForward}
+        dockState={dockState}
+        onGoBack={goBack}
+        onGoForward={goForward}
+        onOpenNewTab={openNewTab}
+        onToggleDock={handleToggleDock}
+        onSetActiveTab={setActiveTab}
+        onCloseTab={closeTab}
+        getTabMenuGroups={getTabMenuGroups}
+      />
+      }>
       {panelContent}
-
-      {!isDocked && !isFullscreen && (
-        <>
-          <div className="absolute top-0 left-0 h-3 w-full cursor-ns-resize z-20 hover:bg-primary/10 transition-colors" data-testid="doc-browser-resize-top" onPointerDown={startFloatResize('top')} />
-          <div
-            className="absolute top-0 left-0 w-3 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors"
-            data-testid="doc-browser-resize-left"
-            onPointerDown={startFloatResize('left')}
-          />
-          <div
-            className="absolute top-0 right-0 w-3 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors"
-            data-testid="doc-browser-resize-right"
-            onPointerDown={startFloatResize('right')}
-          />
-          <div
-            className="absolute bottom-0 left-0 h-3 w-full cursor-ns-resize z-20 hover:bg-primary/10 transition-colors"
-            data-testid="doc-browser-resize-bottom"
-            onPointerDown={startFloatResize('bottom')}
-          />
-          <div
-            className="absolute top-0 left-0 z-30 h-4 w-4 cursor-nw-resize hover:bg-primary/10 transition-colors"
-            data-testid="doc-browser-resize-top-left"
-            onPointerDown={startFloatResize('top-left')}
-          />
-          <div
-            className="absolute top-0 right-0 z-30 h-4 w-4 cursor-ne-resize hover:bg-primary/10 transition-colors"
-            data-testid="doc-browser-resize-top-right"
-            onPointerDown={startFloatResize('top-right')}
-          />
-          <div
-            className="absolute bottom-0 left-0 z-30 h-4 w-4 cursor-sw-resize hover:bg-primary/10 transition-colors"
-            data-testid="doc-browser-resize-bottom-left"
-            onPointerDown={startFloatResize('bottom-left')}
-          />
-          <div
-            className="absolute bottom-0 right-0 z-30 flex h-4 w-4 cursor-se-resize items-center justify-center text-muted-foreground/45 transition-colors hover:text-muted-foreground"
-            data-testid="doc-browser-resize-bottom-right"
-            onPointerDown={startFloatResize('bottom-right')}
-          >
-            <GripVertical className="w-3 h-3 rotate-[-45deg]" />
-          </div>
-        </>
-      )}
-    </div>
+    </WorkbenchSurface>
   );
 }

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

@@ -17,6 +17,6 @@ export function useDocBrowserScrollRestoration({
     currentUrl: currentTab?.currentUrl ?? null,
     iframeRef,
     isEnabled,
-    restorationKey: currentTab ? `panel-app:doc-browser:${currentTab.id}` : null,
+    restorationKey: currentTab ? `panel-app:resource:${currentTab.dedupeKey ?? currentTab.resourceUri ?? currentTab.currentUrl}` : null,
   });
 }

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

@@ -1,3 +1,5 @@
+import type { WorkbenchSurfaceManager } from '@/shared/components/workbench/managers/workbench-surface.manager';
+import { GLOBAL_WORKBENCH_SURFACE } from '@/shared/components/workbench/types/workbench-surface.types';
 import type {
   DocBrowserActiveHistoryEntry,
   DocBrowserOpenOptions,
@@ -187,6 +189,7 @@ function openResolvedDocBrowserState(
       target.resourceUri ?? target.url,
       options?.dockIcon ?? target.dockIcon,
       target.contentParams,
+      options?.viewState ?? target.viewState,
     );
     if (isClosedDefaultHomeState(prev, activeTab)) {
       const nextState = {
@@ -244,6 +247,7 @@ function openDocBrowserState(
 
 export class DocBrowserManager {
   constructor(
+    private readonly surfaces: WorkbenchSurfaceManager,
     private readonly routeResolver: DocBrowserRouteResolver = defaultDocBrowserRouteResolver,
     private readonly onRightPanelOpened?: RightPanelOpenedHandler,
   ) {}
@@ -254,6 +258,8 @@ export class DocBrowserManager {
 
   readonly open = (url?: string, options?: DocBrowserOpenOptions): void => {
     this.setSnapshot((prev) => openDocBrowserState(this.routeResolver, prev, url, options));
+    if (options?.placement) this.surfaces.place(GLOBAL_WORKBENCH_SURFACE, options.placement);
+    this.surfaces.restore(GLOBAL_WORKBENCH_SURFACE);
     this.onRightPanelOpened?.();
   };
 
@@ -264,6 +270,8 @@ export class DocBrowserManager {
       kind: options?.kind ?? target.kind,
       title: options?.title ?? target.title,
     }));
+    if (options?.placement) this.surfaces.place(GLOBAL_WORKBENCH_SURFACE, options.placement);
+    this.surfaces.restore(GLOBAL_WORKBENCH_SURFACE);
     this.onRightPanelOpened?.();
   };
 
@@ -289,7 +297,9 @@ export class DocBrowserManager {
   };
 
   readonly toggleMode = (): void => {
-    this.setSnapshot((prev) => ({ ...prev, mode: prev.mode === 'floating' ? 'docked' : 'floating' }));
+    const { surfaces } = this;
+    surfaces.place(GLOBAL_WORKBENCH_SURFACE, surfaces.get(GLOBAL_WORKBENCH_SURFACE).placement === 'floating' ? 'docked' : 'floating');
+    this.surfaces.restore(GLOBAL_WORKBENCH_SURFACE);
     this.onRightPanelOpened?.();
   };
 

package/src/shared/components/doc-browser/stores/doc-browser.store.ts

@@ -1,9 +1,9 @@
+import { ViewMemoryStorage } from '@/shared/lib/navigation-history';
 import { create } from 'zustand';
 import { createJSONStorage, persist } from 'zustand/middleware';
 import type {
   DocBrowserActiveHistoryEntry,
   DocBrowserDockIcon,
-  DocBrowserMode,
   DocBrowserState,
   DocBrowserStateUpdate,
   DocBrowserTab,
@@ -28,9 +28,6 @@ function isRecord(value: unknown): value is Record<string, unknown> {
   return !!value && typeof value === 'object';
 }
 
-function isDocBrowserMode(value: unknown): value is DocBrowserMode {
-  return value === 'floating' || value === 'docked';
-}
 
 function normalizePersistedStringList(value: unknown, fallback: string): string[] {
   if (!Array.isArray(value)) {
@@ -91,6 +88,7 @@ function normalizePersistedDocBrowserTab(value: unknown): DocBrowserTab | null {
     currentUrl: history[historyIndex] ?? value.currentUrl,
     resourceUri,
     dockIcon,
+    viewState: value.viewState,
     dedupeKey,
     history,
     historyIndex,
@@ -170,7 +168,6 @@ function normalizePersistedDocBrowserState(value: unknown): DocBrowserState | nu
 
   return {
     isOpen: value.isOpen === true,
-    mode: isDocBrowserMode(value.mode) ? value.mode : 'docked',
     dockedWidth: normalizeDocBrowserDockedWidth(value.dockedWidth),
     tabs,
     activeTabId: resolvedActiveTabId,
@@ -197,11 +194,10 @@ export const useDocBrowserStore = create<DocBrowserStore>()(
     {
       name: DOC_BROWSER_STORAGE_KEY,
       version: DOC_BROWSER_STORAGE_VERSION,
-      storage: createJSONStorage(() => window.localStorage),
+      storage: createJSONStorage(() => new ViewMemoryStorage()),
       partialize: (state): { snapshot: PersistedDocBrowserState } => ({
         snapshot: {
           isOpen: state.snapshot.isOpen,
-          mode: state.snapshot.mode,
           dockedWidth: state.snapshot.dockedWidth,
           tabs: state.snapshot.tabs.slice(-DOC_BROWSER_MAX_PERSISTED_TABS),
           activeTabId: state.snapshot.activeTabId,

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

@@ -10,6 +10,8 @@ export type DocBrowserTab = {
   currentUrl: string;
   resourceUri?: string;
   contentParams?: UiContentParams;
+  /** Serializable renderer-owned view context; validated by the renderer. */
+  viewState?: unknown;
   dockIcon?: DocBrowserDockIcon;
   dedupeKey?: string;
   history: string[];
@@ -25,6 +27,8 @@ export type DocBrowserRouteTarget = {
   kind: DocBrowserTabKind;
   resourceUri?: string;
   contentParams?: UiContentParams;
+  /** Serializable renderer-owned view context; validated by the renderer. */
+  viewState?: unknown;
   title: string;
   url: string;
 };
@@ -69,6 +73,7 @@ export type DocBrowserActiveHistoryEntry = {
 };
 
 export type DocBrowserOpenOptions = {
+  placement?: DocBrowserMode;
   activate?: boolean;
   dedupeKey?: string;
   dockIcon?: DocBrowserDockIcon;
@@ -76,11 +81,12 @@ export type DocBrowserOpenOptions = {
   title?: string;
   kind?: DocBrowserTabKind;
   contentParams?: UiContentParams;
+  /** Serializable renderer-owned view context; validated by the renderer. */
+  viewState?: unknown;
 };
 
 export type DocBrowserState = {
   isOpen: boolean;
-  mode: DocBrowserMode;
   dockedWidth: number;
   tabs: DocBrowserTab[];
   activeTabId: string;
@@ -106,5 +112,6 @@ export type DocBrowserActions = {
 };
 
 export type DocBrowserContextValue = DocBrowserState & DocBrowserActions & {
+  mode: DocBrowserMode;
   currentTab?: DocBrowserTab;
 };