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

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

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback, useEffect, type CSSProperties } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import {
   DOCS_DEFAULT_BASE_URL,
   useDocBrowser,
@@ -20,30 +20,22 @@ type DocBrowserProps = {
   displayMode?: 'desktop' | 'fullscreen';
 };
 
-function getPanelClassName(isFullscreen: boolean): string {
-  return cn(
-    'flex flex-col bg-white overflow-hidden relative',
-    isFullscreen
-      ? 'fixed inset-0 z-[9999] h-[100dvh] w-screen rounded-none border-0 shadow-2xl'
-      : 'rounded-2xl shadow-2xl border border-gray-200',
-  );
-}
+type FloatingPanelRect = { x: number; y: number; w: number; h: number };
+type FloatingPanelResizeEdge = 'left' | 'right' | 'top' | 'bottom' | 'bottom-right';
+type FloatingPanelInteraction = {
+  kind: 'drag' | 'resize';
+  edge?: FloatingPanelResizeEdge;
+  startX: number;
+  startY: number;
+  startRect: FloatingPanelRect;
+};
+
+const FLOATING_PANEL_MARGIN = 40;
+const FLOATING_PANEL_MIN_WIDTH = 360;
+const FLOATING_PANEL_MIN_HEIGHT = 400;
 
-function getPanelStyle(params: {
-  isFullscreen: boolean;
-  floatPos: { x: number; y: number };
-  floatSize: { w: number; h: number };
-}): CSSProperties | undefined {
-  const { isFullscreen, floatPos, floatSize } = params;
-  if (isFullscreen) return undefined;
-  return {
-    position: 'fixed',
-    left: floatPos.x,
-    top: floatPos.y,
-    width: floatSize.w,
-    height: floatSize.h,
-    zIndex: 9999,
-  };
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
 }
 
 export function DocBrowser({
@@ -68,21 +60,20 @@ export function DocBrowser({
   } = useDocBrowser();
 
   const [urlInput, setUrlInput] = useState('');
-  const [isDragging, setIsDragging] = useState(false);
-  const [isResizing, setIsResizing] = useState(false);
   const [iframeReloadVersion, setIframeReloadVersion] = useState(0);
-  const [floatPos, setFloatPos] = useState(() => ({
-    x: Math.max(40, window.innerWidth - 520),
+  const [floatRect, setFloatRect] = useState<FloatingPanelRect>(() => ({
+    x: Math.max(FLOATING_PANEL_MARGIN, window.innerWidth - 520),
     y: 80,
+    w: 480,
+    h: 600,
   }));
-  const [floatSize, setFloatSize] = useState({ w: 480, h: 600 });
-  const dragRef = useRef<{ startX: number; startY: number; startPosX: number; startPosY: number } | null>(null);
-  const resizeRef = useRef<{ startX: number; startY: number; startW: number; startH: number } | null>(null);
+  const [floatInteraction, setFloatInteraction] = useState<FloatingPanelInteraction | null>(null);
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const currentUrl = currentTab?.currentUrl ?? DOCS_DEFAULT_BASE_URL;
   const navVersion = currentTab?.navVersion ?? 0;
   const prevNavVersionRef = useRef(navVersion);
   const isDocsTab = currentTab?.kind === 'docs';
+  const customRenderer = currentTab ? customTabRenderers[currentTab.kind] : undefined;
 
   useEffect(() => {
     if (!isDocsTab) {
@@ -118,15 +109,6 @@ export function DocBrowser({
     }
   }, [currentUrl, navVersion, isDocsTab]);
 
-  useEffect(() => {
-    if (mode === 'floating') {
-      setFloatPos((prev) => ({
-        x: Math.max(40, window.innerWidth - floatSize.w - 40),
-        y: prev.y,
-      }));
-    }
-  }, [mode, floatSize.w]);
-
   useEffect(() => {
     const handler = (e: MessageEvent) => {
       if (!isDocsTab) {
@@ -140,6 +122,91 @@ export function DocBrowser({
     return () => window.removeEventListener('message', handler);
   }, [syncUrl, isDocsTab]);
 
+  useEffect(() => {
+    if (!currentTab || !customRenderer?.onIframeMessage) {
+      return;
+    }
+    const handler = (event: MessageEvent) => {
+      customRenderer.onIframeMessage?.({
+        event,
+        iframe: iframeRef.current,
+        tab: currentTab,
+      });
+    };
+    window.addEventListener('message', handler);
+    return () => window.removeEventListener('message', handler);
+  }, [currentTab, customRenderer]);
+
+  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({
+          ...startRect,
+          x: clamp(startRect.x + dx, FLOATING_PANEL_MARGIN, window.innerWidth - FLOATING_PANEL_MARGIN - startRect.w),
+          y: clamp(startRect.y + dy, FLOATING_PANEL_MARGIN, window.innerHeight - FLOATING_PANEL_MARGIN - startRect.h),
+        });
+        return;
+      }
+
+      if (floatInteraction.edge === 'left' || floatInteraction.edge === 'top') {
+        const isLeftEdge = floatInteraction.edge === 'left';
+        const fixedEdge = isLeftEdge ? startRect.x + startRect.w : startRect.y + startRect.h;
+        const movingEdge = isLeftEdge ? startRect.x + dx : startRect.y + dy;
+        const minSize = isLeftEdge ? FLOATING_PANEL_MIN_WIDTH : FLOATING_PANEL_MIN_HEIGHT;
+        const nextEdge = clamp(movingEdge, FLOATING_PANEL_MARGIN, fixedEdge - minSize);
+        setFloatRect(isLeftEdge ? { ...startRect, x: nextEdge, w: fixedEdge - nextEdge } : { ...startRect, y: nextEdge, h: fixedEdge - nextEdge });
+        return;
+      }
+
+      const right = clamp(startRect.x + startRect.w + dx, startRect.x + FLOATING_PANEL_MIN_WIDTH, window.innerWidth - FLOATING_PANEL_MARGIN);
+      const bottom = clamp(startRect.y + startRect.h + dy, startRect.y + FLOATING_PANEL_MIN_HEIGHT, window.innerHeight - FLOATING_PANEL_MARGIN);
+      setFloatRect({
+        ...startRect,
+        w: floatInteraction.edge === 'bottom' ? startRect.w : right - startRect.x,
+        h: floatInteraction.edge === 'right' ? startRect.h : bottom - startRect.y,
+      });
+    };
+
+    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 handleUrlSubmit = useCallback((e: React.FormEvent) => {
     e.preventDefault();
     if (!isDocsTab) return;
@@ -154,88 +221,6 @@ export function DocBrowser({
     }
   }, [urlInput, navigate, isDocsTab]);
 
-  const onDragStart = useCallback((e: React.MouseEvent) => {
-    if (mode !== 'floating') return;
-    setIsDragging(true);
-    dragRef.current = {
-      startX: e.clientX,
-      startY: e.clientY,
-      startPosX: floatPos.x,
-      startPosY: floatPos.y,
-    };
-  }, [mode, floatPos]);
-
-  useEffect(() => {
-    if (!isDragging) return;
-    const onMove = (e: MouseEvent) => {
-      if (!dragRef.current) return;
-      setFloatPos({
-        x: dragRef.current.startPosX + (e.clientX - dragRef.current.startX),
-        y: dragRef.current.startPosY + (e.clientY - dragRef.current.startY),
-      });
-    };
-    const onUp = () => {
-      setIsDragging(false);
-      dragRef.current = null;
-    };
-    window.addEventListener('mousemove', onMove);
-    window.addEventListener('mouseup', onUp);
-    return () => {
-      window.removeEventListener('mousemove', onMove);
-      window.removeEventListener('mouseup', onUp);
-    };
-  }, [isDragging]);
-
-  const onResizeStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsResizing(true);
-    const { axis } = (e.currentTarget as HTMLElement).dataset;
-    resizeRef.current = {
-      startX: e.clientX,
-      startY: e.clientY,
-      startW: floatSize.w,
-      startH: floatSize.h,
-    };
-    const onMove = (ev: MouseEvent) => {
-      if (!resizeRef.current) return;
-      setFloatSize((prev) => ({
-        w: axis === 'y' ? prev.w : Math.max(360, resizeRef.current!.startW + (ev.clientX - resizeRef.current!.startX)),
-        h: axis === 'x' ? prev.h : Math.max(400, resizeRef.current!.startH + (ev.clientY - resizeRef.current!.startY)),
-      }));
-    };
-    const onUp = () => {
-      setIsResizing(false);
-      resizeRef.current = null;
-      window.removeEventListener('mousemove', onMove);
-      window.removeEventListener('mouseup', onUp);
-    };
-    window.addEventListener('mousemove', onMove);
-    window.addEventListener('mouseup', onUp);
-  }, [floatSize]);
-
-  const onLeftResizeStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsResizing(true);
-    const startX = e.clientX;
-    const startW = floatSize.w;
-    const startPosX = floatPos.x;
-    const onMove = (ev: MouseEvent) => {
-      const delta = startX - ev.clientX;
-      const newW = Math.max(360, startW + delta);
-      setFloatSize((prev) => ({ ...prev, w: newW }));
-      setFloatPos((prev) => ({ ...prev, x: startPosX - (newW - startW) }));
-    };
-    const onUp = () => {
-      setIsResizing(false);
-      window.removeEventListener('mousemove', onMove);
-      window.removeEventListener('mouseup', onUp);
-    };
-    window.addEventListener('mousemove', onMove);
-    window.addEventListener('mouseup', onUp);
-  }, [floatSize.w, floatPos.x]);
-
   const refreshIframe = useCallback(() => {
     setIframeReloadVersion((version) => version + 1);
   }, []);
@@ -244,7 +229,6 @@ export function DocBrowser({
 
   const isDocked = mode === 'docked';
   const isFullscreen = displayMode === 'fullscreen';
-  const customRenderer = currentTab ? customTabRenderers[currentTab.kind] : undefined;
   const customRenderParams = currentTab ? {
     currentUrl,
     open,
@@ -265,7 +249,7 @@ export function DocBrowser({
         isDocked={isDocked}
         isFullscreen={isFullscreen}
         onClose={close}
-        onDragStart={onDragStart}
+        onDragStart={startFloatDrag}
         onToggleMode={toggleMode}
       />
 
@@ -297,8 +281,8 @@ export function DocBrowser({
         iframeRef={iframeRef}
         iframeReloadVersion={iframeReloadVersion}
         iframeSandbox={iframeSandbox}
-        isDragging={isDragging}
-        isResizing={isResizing}
+        isDragging={floatInteraction?.kind === 'drag'}
+        isResizing={floatInteraction?.kind === 'resize'}
         navVersion={navVersion}
       />
 
@@ -319,22 +303,52 @@ export function DocBrowser({
     );
   }
 
-  const panel = (
+  return (
     <div
       data-testid="doc-browser-panel"
-      className={getPanelClassName(isFullscreen)}
-      style={getPanelStyle({ isFullscreen, floatPos, floatSize })}
+      className={cn(
+        'flex flex-col bg-white overflow-hidden relative',
+        isFullscreen
+          ? 'fixed inset-0 z-[9999] h-[100dvh] w-screen rounded-none border-0 shadow-2xl'
+          : 'rounded-2xl shadow-2xl border border-gray-200',
+      )}
+      style={
+        isFullscreen
+          ? undefined
+          : {
+              position: 'fixed',
+              left: floatRect.x,
+              top: floatRect.y,
+              width: floatRect.w,
+              height: floatRect.h,
+              zIndex: 9999,
+            }
+      }
     >
       {panelContent}
 
       {!isDocked && !isFullscreen && (
         <>
-          <div className="absolute top-0 left-0 w-1.5 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors" onMouseDown={onLeftResizeStart} />
-          <div className="absolute top-0 right-0 w-1.5 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors" onMouseDown={onResizeStart} data-axis="x" />
-          <div className="absolute bottom-0 left-0 h-1.5 w-full cursor-ns-resize z-20 hover:bg-primary/10 transition-colors" onMouseDown={onResizeStart} data-axis="y" />
+          <div className="absolute top-0 left-0 h-1.5 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-1.5 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-1.5 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-1.5 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 bottom-0 right-0 w-4 h-4 cursor-se-resize z-30 flex items-center justify-center text-gray-300 hover:text-gray-500 transition-colors"
-            onMouseDown={onResizeStart}
+            data-testid="doc-browser-resize-bottom-right"
+            onPointerDown={startFloatResize('bottom-right')}
           >
             <GripVertical className="w-3 h-3 rotate-[-45deg]" />
           </div>
@@ -342,6 +356,4 @@ export function DocBrowser({
       )}
     </div>
   );
-
-  return panel;
 }

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

@@ -0,0 +1,272 @@
+import type {
+  DocBrowserOpenOptions,
+  DocBrowserState,
+  DocBrowserStateUpdate,
+  DocBrowserTab,
+  DocBrowserTabKind,
+} from '@/shared/components/doc-browser/types/doc-browser.types';
+import {
+  createDefaultDocBrowserState,
+  createDocBrowserTab,
+} from '@/shared/components/doc-browser/utils/doc-browser-state.utils';
+import {
+  getDefaultDocsUrl,
+  inferTabKind,
+  normalizeDocUrl,
+  normalizeUrlByKind,
+} from '@/shared/components/doc-browser/utils/doc-browser-url.utils';
+import { useDocBrowserStore } from '@/shared/components/doc-browser/stores/doc-browser.store';
+
+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 updateActiveTab(state: DocBrowserState, updater: (tab: DocBrowserTab) => DocBrowserTab): DocBrowserState {
+  return updateTab(state, state.activeTabId, updater);
+}
+
+function areOpenUrlsEquivalent(
+  currentUrl: string,
+  nextUrl: string,
+  currentKind: DocBrowserTabKind,
+  nextKind: DocBrowserTabKind,
+): boolean {
+  if (currentKind === 'docs' && nextKind === 'docs') {
+    return normalizeDocUrl(currentUrl) === normalizeDocUrl(nextUrl);
+  }
+  return currentUrl === nextUrl;
+}
+
+function updateTabForOpen(
+  tab: DocBrowserTab,
+  url: string,
+  kind: DocBrowserTabKind,
+  options?: DocBrowserOpenOptions,
+  dedupeKey?: string,
+): DocBrowserTab {
+  const baseTab = {
+    ...tab,
+    title: options?.title || tab.title,
+    kind,
+    dedupeKey,
+  };
+
+  if (areOpenUrlsEquivalent(tab.currentUrl, url, tab.kind, kind)) {
+    return baseTab;
+  }
+
+  return {
+    ...baseTab,
+    currentUrl: url,
+    history: [...tab.history.slice(0, tab.historyIndex + 1), url],
+    historyIndex: tab.historyIndex + 1,
+    navVersion: tab.navVersion + 1,
+  };
+}
+
+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 = createDocBrowserTab(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 class DocBrowserManager {
+  private readonly setSnapshot = (next: DocBrowserStateUpdate): void => {
+    useDocBrowserStore.getState().setSnapshot(next);
+  };
+
+  readonly open = (url?: string, options?: DocBrowserOpenOptions): void => {
+    this.setSnapshot((prev) => openDocBrowserState(prev, url, options));
+  };
+
+  readonly close = (): void => {
+    this.setSnapshot((prev) => ({ ...prev, isOpen: false }));
+  };
+
+  readonly toggleMode = (): void => {
+    this.setSnapshot((prev) => ({ ...prev, mode: prev.mode === 'floating' ? 'docked' : 'floating' }));
+  };
+
+  readonly navigate = (url: string): void => {
+    this.setSnapshot((prev) => {
+      if (!prev.tabs.length) {
+        const fallbackTab = createDocBrowserTab(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,
+        };
+      });
+    });
+  };
+
+  readonly syncUrl = (url: string): void => {
+    this.setSnapshot((prev) => {
+      if (!prev.tabs.length) {
+        const fallbackTab = createDocBrowserTab(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,
+        };
+      });
+    });
+  };
+
+  readonly goBack = (): void => {
+    this.setSnapshot((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] };
+    }));
+  };
+
+  readonly goForward = (): void => {
+    this.setSnapshot((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] };
+    }));
+  };
+
+  readonly closeTab = (tabId: string): void => {
+    this.setSnapshot((prev) => {
+      if (prev.tabs.length <= 1) {
+        const fallbackState = createDefaultDocBrowserState();
+        return {
+          ...fallbackState,
+          isOpen: false,
+        };
+      }
+
+      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,
+      };
+    });
+  };
+
+  readonly setActiveTab = (tabId: string): void => {
+    this.setSnapshot((prev) => {
+      if (!prev.tabs.some((tab) => tab.id === tabId)) {
+        return prev;
+      }
+      return { ...prev, activeTabId: tabId, isOpen: true };
+    });
+  };
+}