@nextclaw/ui 0.12.35-beta.2 → 0.12.35-beta.4

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

@@ -1,196 +1,25 @@
-import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';
-import { getLanguage, type I18nLanguage } from '@/shared/lib/i18n';
-
-const DOCS_PRIMARY_DOMAIN = 'docs.nextclaw.io';
-const DOCS_PAGES_DEV = 'nextclaw-docs.pages.dev';
-const DOCS_HOSTS = new Set([
-  DOCS_PRIMARY_DOMAIN,
-  `www.${DOCS_PRIMARY_DOMAIN}`,
-  DOCS_PAGES_DEV,
-  `www.${DOCS_PAGES_DEV}`,
-]);
-
-export const DOCS_DEFAULT_BASE_URL = `https://${DOCS_PRIMARY_DOMAIN}`;
-const DOCS_DEFAULT_GUIDE_PATH = '/guide/getting-started';
-
-export type DocBrowserMode = 'floating' | 'docked';
-export type DocBrowserTabKind = 'docs' | 'content' | (string & {});
-
-export type DocBrowserTab = {
-  id: string;
-  kind: DocBrowserTabKind;
-  title: string;
-  currentUrl: string;
-  dedupeKey?: string;
-  history: string[];
-  historyIndex: number;
-  /** Increments on parent-initiated navigation to trigger iframe remount */
-  navVersion: number;
-};
-
-export type DocBrowserOpenOptions = {
-  activate?: boolean;
-  dedupeKey?: string;
-  newTab?: boolean;
-  title?: string;
-  kind?: DocBrowserTabKind;
-};
-
-type DocBrowserState = {
-  isOpen: boolean;
-  mode: DocBrowserMode;
-  tabs: DocBrowserTab[];
-  activeTabId: string;
-};
-
-interface DocBrowserActions {
-  open: (url?: string, options?: DocBrowserOpenOptions) => void;
-  close: () => void;
-  toggleMode: () => void;
-  navigate: (url: string) => void;
-  syncUrl: (url: string) => void;
-  goBack: () => void;
-  goForward: () => void;
-  closeTab: (tabId: string) => void;
-  setActiveTab: (tabId: string) => void;
-}
-
-export type DocBrowserContextValue = DocBrowserState & DocBrowserActions & {
-  currentTab?: DocBrowserTab;
-};
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { 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';
+
+export type {
+  DocBrowserActions,
+  DocBrowserContextValue,
+  DocBrowserMode,
+  DocBrowserOpenOptions,
+  DocBrowserState,
+  DocBrowserStateUpdate,
+  DocBrowserTab,
+  DocBrowserTabKind,
+} from '@/shared/components/doc-browser/types/doc-browser.types';
+export {
+  DOCS_DEFAULT_BASE_URL,
+  isDocsUrl,
+} from '@/shared/components/doc-browser/utils/doc-browser-url.utils';
 
 const DocBrowserContext = createContext<DocBrowserContextValue | null>(null);
-
-let tabCounter = 0;
-
-function nextTabId(): string {
-  tabCounter += 1;
-  return `doc-tab-${Date.now()}-${tabCounter}`;
-}
-
-/** Normalize URL for comparison: strip .html and trailing slash */
-function normalizeDocUrl(u: string): string {
-  try {
-    return new URL(u).pathname.replace(/\.html$/, '').replace(/\/$/, '');
-  } catch {
-    return u;
-  }
-}
-
-function toDocsLocale(language: I18nLanguage): 'en' | 'zh' {
-  return language === 'zh' ? 'zh' : 'en';
-}
-
-function ensureLocalizedDocsPath(pathname: string, locale: 'en' | 'zh'): string {
-  const normalized = pathname.startsWith('/') ? pathname : `/${pathname}`;
-
-  if (normalized === '/' || normalized === '') {
-    return `/${locale}/`;
-  }
-
-  if (/^\/(en|zh)(\/|$)/.test(normalized)) {
-    return normalized;
-  }
-
-  return `/${locale}${normalized}`;
-}
-
-function resolveLocalizedDocsUrl(url: string): string {
-  const locale = toDocsLocale(getLanguage());
-
-  try {
-    const parsed = new URL(url, DOCS_DEFAULT_BASE_URL);
-    if (!DOCS_HOSTS.has(parsed.hostname)) {
-      return parsed.toString();
-    }
-
-    parsed.pathname = ensureLocalizedDocsPath(parsed.pathname, locale);
-    return parsed.toString();
-  } catch {
-    return new URL(`/${locale}${DOCS_DEFAULT_GUIDE_PATH}`, DOCS_DEFAULT_BASE_URL).toString();
-  }
-}
-
-function getDefaultDocsUrl(): string {
-  return resolveLocalizedDocsUrl(DOCS_DEFAULT_GUIDE_PATH);
-}
-
-function inferTabTitle(url: string, kind: DocBrowserTabKind, fallback = 'Docs'): string {
-  try {
-    const parsed = new URL(url, DOCS_DEFAULT_BASE_URL);
-    if (parsed.protocol === 'data:') {
-      return kind === 'docs' ? fallback : 'Detail';
-    }
-
-    const segments = parsed.pathname.split('/').filter(Boolean);
-    const leaf = segments[segments.length - 1] ?? fallback;
-    return decodeURIComponent(leaf).replace(/[-_]/g, ' ').slice(0, 40) || fallback;
-  } catch {
-    return fallback;
-  }
-}
-
-function createTab(
-  url: string,
-  kind: DocBrowserTabKind,
-  title?: string,
-  dedupeKey?: string,
-): DocBrowserTab {
-  const tabTitle = title?.trim() || inferTabTitle(url, kind, kind === 'docs' ? 'Docs' : 'Detail');
-
-  return {
-    id: nextTabId(),
-    kind,
-    title: tabTitle,
-    currentUrl: url,
-    dedupeKey,
-    history: [url],
-    historyIndex: 0,
-    navVersion: 0,
-  };
-}
-
-function updateActiveTab(state: DocBrowserState, updater: (tab: DocBrowserTab) => DocBrowserTab): DocBrowserState {
-  return updateTab(state, state.activeTabId, updater);
-}
-
-function updateTab(
-  state: DocBrowserState,
-  tabId: string,
-  updater: (tab: DocBrowserTab) => DocBrowserTab,
-): DocBrowserState {
-  return {
-    ...state,
-    tabs: state.tabs.map((tab) => (tab.id === tabId ? updater(tab) : tab)),
-  };
-}
-
-function updateTabForOpen(
-  tab: DocBrowserTab,
-  url: string,
-  kind: DocBrowserTabKind,
-  options?: DocBrowserOpenOptions,
-  dedupeKey?: string,
-): DocBrowserTab {
-  const baseTab = {
-    ...tab,
-    title: options?.title || tab.title,
-    kind,
-    dedupeKey,
-  };
-
-  if (normalizeDocUrl(url) === normalizeDocUrl(tab.currentUrl)) {
-    return baseTab;
-  }
-
-  return {
-    ...baseTab,
-    currentUrl: url,
-    history: [...tab.history.slice(0, tab.historyIndex + 1), url],
-    historyIndex: tab.historyIndex + 1,
-    navVersion: tab.navVersion + 1,
-  };
-}
+const docBrowserManager = new DocBrowserManager();
 
 export function useDocBrowser(): DocBrowserContextValue {
   const ctx = useContext(DocBrowserContext);
@@ -198,263 +27,25 @@ export function useDocBrowser(): DocBrowserContextValue {
   return ctx;
 }
 
-/** Check if a URL belongs to the docs domain */
-export function isDocsUrl(url: string): boolean {
-  try {
-    const parsed = new URL(url, window.location.origin);
-    return DOCS_HOSTS.has(parsed.hostname);
-  } catch {
-    return false;
-  }
-}
-
-function inferTabKind(url: string): DocBrowserTabKind {
-  return isDocsUrl(url) ? 'docs' : 'content';
-}
-
-function normalizeUrlByKind(url: string, kind: DocBrowserTabKind): string {
-  if (kind === 'docs') {
-    return resolveLocalizedDocsUrl(url);
-  }
-  return url;
-}
-
-function resolveOpenTargetUrl(params: {
-  url?: string;
-  kind: DocBrowserTabKind;
-  activeTab?: DocBrowserTab;
-}): string {
-  const { activeTab, kind, url } = params;
-  if (url && url.trim().length > 0) {
-    return normalizeUrlByKind(url, kind);
-  }
-
-  if (kind === 'docs') {
-    return getDefaultDocsUrl();
-  }
-  return activeTab?.currentUrl ?? getDefaultDocsUrl();
-}
-
-function openDocBrowserState(
-  prev: DocBrowserState,
-  url?: string,
-  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 targetKind = kind ?? (url ? inferTabKind(url) : activeTab?.kind ?? 'docs');
-  const targetUrl = resolveOpenTargetUrl({ url, kind: targetKind, activeTab });
-  const dedupeKey = rawDedupeKey?.trim() || undefined;
-  const matchedTab = dedupeKey
-    ? prev.tabs.find((tab) => tab.dedupeKey === dedupeKey)
-    : undefined;
-
-  if (matchedTab) {
-    const next = updateTab(
-      prev,
-      matchedTab.id,
-      (tab) => updateTabForOpen(tab, targetUrl, targetKind, options, dedupeKey),
-    );
-    return {
-      ...next,
-      activeTabId: activate === false ? prev.activeTabId : matchedTab.id,
-      isOpen: true,
-    };
-  }
-
-  if (shouldForceNewTab || dedupeKey || !activeTab || activeTab.kind !== targetKind) {
-    const newTab = createTab(targetUrl, targetKind, title, dedupeKey);
-    return {
-      ...prev,
-      isOpen: true,
-      tabs: [...prev.tabs, newTab],
-      activeTabId: newTab.id,
-    };
-  }
-
-  const next = updateActiveTab(
-    prev,
-    (tab) => updateTabForOpen(tab, targetUrl, targetKind, options, dedupeKey),
-  );
-  return { ...next, isOpen: true };
-}
-
 export function DocBrowserProvider({ children }: { children: ReactNode }) {
-  const initialUrl = getDefaultDocsUrl();
-  const initialTab = createTab(initialUrl, 'docs', 'Docs');
-
-  const [state, setState] = useState<DocBrowserState>({
-    isOpen: false,
-    mode: 'docked',
-    tabs: [initialTab],
-    activeTabId: initialTab.id,
-  });
-
+  const snapshot = useDocBrowserStore((state) => state.snapshot);
   const currentTab = useMemo(() => {
-    return state.tabs.find((tab) => tab.id === state.activeTabId) ?? state.tabs[0];
-  }, [state.tabs, state.activeTabId]);
-
-  const open = useCallback((url?: string, options?: DocBrowserOpenOptions) => {
-    setState((prev) => openDocBrowserState(prev, url, options));
-  }, []);
-
-  const close = useCallback(() => {
-    setState((prev) => ({ ...prev, isOpen: false }));
-  }, []);
-
-  const toggleMode = useCallback(() => {
-    setState((prev) => ({ ...prev, mode: prev.mode === 'floating' ? 'docked' : 'floating' }));
-  }, []);
-
-  const navigate = useCallback((url: string) => {
-    setState((prev) => {
-      if (!prev.tabs.length) {
-        const fallbackTab = createTab(getDefaultDocsUrl(), 'docs', 'Docs');
-        return {
-          ...prev,
-          tabs: [fallbackTab],
-          activeTabId: fallbackTab.id,
-          isOpen: true,
-        };
-      }
-
-      return updateActiveTab(prev, (tab) => {
-        if (tab.kind !== 'docs') {
-          return tab;
-        }
-
-        const targetUrl = normalizeUrlByKind(url, 'docs');
-        if (normalizeDocUrl(targetUrl) === normalizeDocUrl(tab.currentUrl)) {
-          return tab;
-        }
-
-        return {
-          ...tab,
-          currentUrl: targetUrl,
-          history: [...tab.history.slice(0, tab.historyIndex + 1), targetUrl],
-          historyIndex: tab.historyIndex + 1,
-          navVersion: tab.navVersion + 1,
-        };
-      });
-    });
-  }, []);
-
-  const syncUrl = useCallback((url: string) => {
-    setState((prev) => {
-      if (!prev.tabs.length) {
-        const fallbackTab = createTab(getDefaultDocsUrl(), 'docs', 'Docs');
-        return {
-          ...prev,
-          tabs: [fallbackTab],
-          activeTabId: fallbackTab.id,
-        };
-      }
-
-      return updateActiveTab(prev, (tab) => {
-        if (tab.kind !== 'docs') {
-          return tab;
-        }
-
-        if (normalizeDocUrl(url) === normalizeDocUrl(tab.currentUrl)) {
-          return tab;
-        }
-
-        return {
-          ...tab,
-          currentUrl: url,
-          history: [...tab.history.slice(0, tab.historyIndex + 1), url],
-          historyIndex: tab.historyIndex + 1,
-        };
-      });
-    });
-  }, []);
-
-  const goBack = useCallback(() => {
-    setState((prev) => updateActiveTab(prev, (tab) => {
-      if (tab.kind !== 'docs' || tab.historyIndex <= 0) return tab;
-      const newIndex = tab.historyIndex - 1;
-      return { ...tab, historyIndex: newIndex, currentUrl: tab.history[newIndex] };
-    }));
-  }, []);
-
-  const goForward = useCallback(() => {
-    setState((prev) => updateActiveTab(prev, (tab) => {
-      if (tab.kind !== 'docs' || tab.historyIndex >= tab.history.length - 1) return tab;
-      const newIndex = tab.historyIndex + 1;
-      return { ...tab, historyIndex: newIndex, currentUrl: tab.history[newIndex] };
-    }));
-  }, []);
-
-  const closeTab = useCallback((tabId: string) => {
-    setState((prev) => {
-      if (prev.tabs.length <= 1) {
-        const fallbackTab = createTab(getDefaultDocsUrl(), 'docs', 'Docs');
-        return {
-          ...prev,
-          isOpen: false,
-          tabs: [fallbackTab],
-          activeTabId: fallbackTab.id,
-        };
-      }
-
-      const index = prev.tabs.findIndex((tab) => tab.id === tabId);
-      if (index < 0) {
-        return prev;
-      }
-
-      const nextTabs = prev.tabs.filter((tab) => tab.id !== tabId);
-      const nextActiveId = prev.activeTabId === tabId
-        ? nextTabs[Math.max(0, index - 1)]?.id ?? nextTabs[0].id
-        : prev.activeTabId;
-
-      return {
-        ...prev,
-        tabs: nextTabs,
-        activeTabId: nextActiveId,
-      };
-    });
-  }, []);
-
-  const setActiveTab = useCallback((tabId: string) => {
-    setState((prev) => {
-      if (!prev.tabs.some((tab) => tab.id === tabId)) {
-        return prev;
-      }
-      return { ...prev, activeTabId: tabId, isOpen: true };
-    });
-  }, []);
+    return snapshot.tabs.find((tab) => tab.id === snapshot.activeTabId) ?? snapshot.tabs[0];
+  }, [snapshot.activeTabId, snapshot.tabs]);
 
   const value = useMemo<DocBrowserContextValue>(() => ({
-    ...state,
-    currentTab,
-    open,
-    close,
-    toggleMode,
-    navigate,
-    syncUrl,
-    goBack,
-    goForward,
-    closeTab,
-    setActiveTab,
-  }), [
-    state,
+    ...snapshot,
     currentTab,
-    open,
-    close,
-    toggleMode,
-    navigate,
-    syncUrl,
-    goBack,
-    goForward,
-    closeTab,
-    setActiveTab,
-  ]);
+    open: docBrowserManager.open,
+    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]);
 
   return (
     <DocBrowserContext.Provider value={value}>

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

@@ -23,7 +23,7 @@ type DocBrowserPanelHeaderProps = {
   isDocked: boolean;
   isFullscreen: boolean;
   onClose: () => void;
-  onDragStart: (e: React.MouseEvent) => void;
+  onDragStart: (e: React.PointerEvent<HTMLElement>) => void;
   onToggleMode: () => void;
 };
 
@@ -73,7 +73,7 @@ export function DocBrowserPanelHeader({
         !isDocked && !isFullscreen && 'cursor-grab active:cursor-grabbing',
         isFullscreen && 'pt-[calc(env(safe-area-inset-top,0px)+0.625rem)]',
       )}
-      onMouseDown={!isDocked && !isFullscreen ? onDragStart : undefined}
+      onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
     >
       <div className="flex items-center gap-2.5 min-w-0">
         {icon}

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

@@ -8,9 +8,16 @@ export type DocBrowserCustomTabRenderParams = {
   tab: DocBrowserTab;
 };
 
+export type DocBrowserIframeMessageParams = {
+  event: MessageEvent;
+  iframe: HTMLIFrameElement | null;
+  tab: DocBrowserTab;
+};
+
 export type DocBrowserCustomTabRenderer = {
   getIframeSandbox?: (tab: DocBrowserTab) => string;
   getTitle?: (tab: DocBrowserTab) => string;
+  onIframeMessage?: (params: DocBrowserIframeMessageParams) => void;
   renderContent?: (params: DocBrowserCustomTabRenderParams) => ReactNode;
   renderIcon?: (tab: DocBrowserTab) => ReactNode;
   renderToolbar?: (params: DocBrowserCustomTabRenderParams) => ReactNode;

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

@@ -1,5 +1,5 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+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";
 
 const { docBrowserState } = vi.hoisted(() => ({
@@ -49,7 +49,34 @@ vi.mock("@/shared/components/doc-browser/doc-browser-context", async () => {
   };
 });
 
+function firePointerEvent(
+  target: Window | Document | Node | Element,
+  type: string,
+  point: { clientX: number; clientY?: number; pointerId?: number },
+) {
+  const event = new Event(type, { bubbles: true });
+  Object.defineProperties(event, {
+    clientX: { value: point.clientX },
+    clientY: { value: point.clientY ?? 0 },
+    pointerId: { value: point.pointerId ?? 1 },
+  });
+  fireEvent(target, event);
+}
+
 describe("DocBrowser", () => {
+  beforeEach(() => {
+    docBrowserState.mode = "docked";
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      value: 1200,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      configurable: true,
+      value: 900,
+    });
+    HTMLElement.prototype.setPointerCapture = vi.fn();
+  });
+
   it("uses the shared right panel resize handle in docked mode", () => {
     render(<DocBrowser />);
 
@@ -71,4 +98,57 @@ describe("DocBrowser", () => {
     expect(panel.querySelector(".cursor-ew-resize")).toBeNull();
     expect(panel.querySelector(".cursor-se-resize")).toBeNull();
   });
+
+  it("keeps the floating panel left edge stable when resizing from the right", () => {
+    docBrowserState.mode = "floating";
+
+    render(<DocBrowser />);
+
+    firePointerEvent(screen.getByTestId("doc-browser-resize-right"), "pointerdown", {
+      clientX: 1160,
+      pointerId: 1,
+    });
+    firePointerEvent(window, "pointermove", { clientX: 1120, pointerId: 1 });
+
+    const panel = screen.getByTestId("doc-browser-panel");
+    expect(panel.style.left).toBe("680px");
+    expect(panel.style.width).toBe("440px");
+  });
+
+  it("keeps the floating panel right edge stable when resizing from the left", () => {
+    docBrowserState.mode = "floating";
+
+    render(<DocBrowser />);
+
+    firePointerEvent(screen.getByTestId("doc-browser-resize-left"), "pointerdown", {
+      clientX: 680,
+      pointerId: 1,
+    });
+    firePointerEvent(window, "pointermove", { clientX: 620, pointerId: 1 });
+
+    const panel = screen.getByTestId("doc-browser-panel");
+    expect(panel.style.left).toBe("620px");
+    expect(panel.style.width).toBe("540px");
+  });
+
+  it("keeps the floating panel bottom edge stable when resizing from the top", () => {
+    docBrowserState.mode = "floating";
+
+    render(<DocBrowser />);
+
+    firePointerEvent(screen.getByTestId("doc-browser-resize-top"), "pointerdown", {
+      clientX: 900,
+      clientY: 80,
+      pointerId: 1,
+    });
+    firePointerEvent(window, "pointermove", {
+      clientX: 900,
+      clientY: 120,
+      pointerId: 1,
+    });
+
+    const panel = screen.getByTestId("doc-browser-panel");
+    expect(panel.style.top).toBe("120px");
+    expect(panel.style.height).toBe("560px");
+  });
 });