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

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,16 +60,14 @@ 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;
@@ -118,15 +108,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 +121,76 @@ export function DocBrowser({
     return () => window.removeEventListener('message', handler);
   }, [syncUrl, isDocsTab]);
 
+  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 +205,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);
   }, []);
@@ -265,7 +234,7 @@ export function DocBrowser({
         isDocked={isDocked}
         isFullscreen={isFullscreen}
         onClose={close}
-        onDragStart={onDragStart}
+        onDragStart={startFloatDrag}
         onToggleMode={toggleMode}
       />
 
@@ -297,8 +266,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 +288,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 +341,4 @@ export function DocBrowser({
       )}
     </div>
   );
-
-  return panel;
 }

package/dist/assets/doc-browser-DInzGY0W.js

@@ -1 +0,0 @@
-import{t as e}from"./doc-browser-DxVvmYQk.js";export{e as DocBrowser};

package/dist/assets/doc-browser-DxVvmYQk.js

@@ -1 +0,0 @@
-import{_ as e,m as t,p as n,r,u as i}from"./i18n-tWKGEGxB.js";import{t as a}from"./createLucideIcon-Cwr2o6Zq.js";import{n as o,t as s}from"./search-Czito3Dk.js";import{t as c}from"./book-open--T9dJHnp.js";import{t as l}from"./external-link-CZ9bQY0L.js";import{t as u}from"./plus-BqfNq7Tu.js";import{t as d}from"./x-DBP3WiC9.js";import{i as f,r as p,t as m}from"./doc-browser-context-CLczyX2Z.js";var h=a(`ArrowRight`,[[`path`,{d:`M5 12h14`,key:`1ays0h`}],[`path`,{d:`m12 5 7 7-7 7`,key:`xquz4c`}]]),g=a(`GripVertical`,[[`circle`,{cx:`9`,cy:`12`,r:`1`,key:`1vctgf`}],[`circle`,{cx:`9`,cy:`5`,r:`1`,key:`hp0tcf`}],[`circle`,{cx:`9`,cy:`19`,r:`1`,key:`fkjjf6`}],[`circle`,{cx:`15`,cy:`12`,r:`1`,key:`1tmaij`}],[`circle`,{cx:`15`,cy:`5`,r:`1`,key:`19l28e`}],[`circle`,{cx:`15`,cy:`19`,r:`1`,key:`f4zoj3`}]]),_=a(`Maximize2`,[[`polyline`,{points:`15 3 21 3 21 9`,key:`mznyad`}],[`polyline`,{points:`9 21 3 21 3 15`,key:`1avn1i`}],[`line`,{x1:`21`,x2:`14`,y1:`3`,y2:`10`,key:`ota7mn`}],[`line`,{x1:`3`,x2:`10`,y1:`21`,y2:`14`,key:`1atl0r`}]]),v=a(`PanelRightOpen`,[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,key:`afitv7`}],[`path`,{d:`M15 3v18`,key:`14nvp0`}],[`path`,{d:`m10 15-3-3 3-3`,key:`1pgupc`}]]),y=n();function b({currentTab:e,customRenderer:t,isDocked:n,isFullscreen:a,onClose:o,onDragStart:s,onToggleMode:l}){let u=e&&t?.getTitle?t.getTitle(e):r(`docBrowserTitle`),f=e&&t?.renderIcon?t.renderIcon(e):(0,y.jsx)(c,{className:`w-4 h-4 text-primary shrink-0`});return(0,y.jsxs)(`div`,{className:i(`flex items-center justify-between px-4 py-2.5 bg-gray-50 border-b border-gray-200 shrink-0 select-none`,!n&&!a&&`cursor-grab active:cursor-grabbing`,a&&`pt-[calc(env(safe-area-inset-top,0px)+0.625rem)]`),onMouseDown:!n&&!a?s:void 0,children:[(0,y.jsxs)(`div`,{className:`flex items-center gap-2.5 min-w-0`,children:[f,(0,y.jsx)(`span`,{className:`text-sm font-semibold text-gray-900 truncate`,children:u})]}),(0,y.jsxs)(`div`,{className:`flex items-center gap-1`,children:[a?null:(0,y.jsx)(`button`,{onClick:l,className:`hover:bg-gray-200 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors`,title:r(n?`docBrowserFloatMode`:`docBrowserDockMode`),children:n?(0,y.jsx)(_,{className:`w-3.5 h-3.5`}):(0,y.jsx)(v,{className:`w-3.5 h-3.5`})}),(0,y.jsx)(`button`,{onClick:o,className:`hover:bg-gray-200 rounded-md p-1.5 text-gray-500 hover:text-gray-700 transition-colors`,title:r(`docBrowserClose`),children:(0,y.jsx)(d,{className:`w-3.5 h-3.5`})})]})]})}function ee({currentTab:e,isDocsTab:t,onBack:n,onForward:i,onSubmit:a,onUrlInputChange:c,urlInput:l}){return t?(0,y.jsxs)(`div`,{className:`flex items-center gap-2 px-3.5 py-2 bg-white border-b border-gray-100 shrink-0`,children:[(0,y.jsx)(`button`,{onClick:n,disabled:!t||(e?.historyIndex??0)<=0,className:`p-1.5 rounded-md hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed text-gray-600 transition-colors`,children:(0,y.jsx)(o,{className:`w-4 h-4`})}),(0,y.jsx)(`button`,{onClick:i,disabled:!t||(e?.historyIndex??0)>=(e?.history.length??0)-1,className:`p-1.5 rounded-md hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed text-gray-600 transition-colors`,children:(0,y.jsx)(h,{className:`w-4 h-4`})}),(0,y.jsxs)(`form`,{onSubmit:a,className:`flex-1 relative`,children:[(0,y.jsx)(s,{className:`w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400`}),(0,y.jsx)(`input`,{type:`text`,value:l,onChange:e=>c(e.target.value),placeholder:r(`docBrowserSearchPlaceholder`),className:`w-full h-8 pl-8 pr-3 rounded-lg bg-gray-50 border border-gray-200 text-xs text-gray-700 focus:outline-none focus:ring-1 focus:ring-primary/30 focus:border-primary/40 transition-colors placeholder:text-gray-400`})]})]}):null}function te({activeTabId:e,currentTab:t,currentUrl:n,customContent:r,iframeRef:i,iframeReloadVersion:a,iframeSandbox:o,isDragging:s,isResizing:c,navVersion:l}){return(0,y.jsxs)(`div`,{className:`flex-1 relative overflow-hidden`,children:[r||(0,y.jsx)(`iframe`,{ref:i,src:n,className:`absolute inset-0 w-full h-full border-0`,title:t?.title||`NextClaw Docs`,sandbox:o,allow:`clipboard-read; clipboard-write`},`${e}:${l}:${a}`),(c||s)&&(0,y.jsx)(`div`,{className:`absolute inset-0 z-10`})]})}function ne({currentUrl:e,isDocsTab:t}){return!t||!p(e)?null:(0,y.jsx)(`div`,{className:`flex items-center justify-between px-4 py-2 bg-gray-50 border-t border-gray-200 shrink-0`,children:(0,y.jsxs)(`a`,{href:e,target:`_blank`,rel:`noopener noreferrer`,"data-doc-external":!0,className:`flex items-center gap-1.5 text-xs text-primary hover:text-primary-hover font-medium transition-colors`,children:[r(`docBrowserOpenExternal`),(0,y.jsx)(l,{className:`w-3 h-3`})]})})}function re({tabs:e,activeTabId:t,onOpenDocs:n,onSetActiveTab:a,onCloseTab:o}){return(0,y.jsxs)(`div`,{className:`flex items-center gap-1.5 px-2.5 py-2 bg-background border-b border-[#f1e7d4] overflow-x-auto custom-scrollbar`,children:[e.map(e=>(0,y.jsxs)(`div`,{className:i(`inline-flex items-center gap-1 h-7 px-1.5 rounded-lg text-xs border max-w-[220px] shrink-0 transition-colors`,e.id===t?`bg-amber-50/80 border-amber-200 text-amber-900 shadow-[0_1px_2px_rgba(30,20,10,0.04)]`:`bg-[#f9f8f5] border-[#eee3d1] text-[#78644d] hover:bg-[#fff7ea] hover:text-[#2f2212]`),children:[(0,y.jsx)(`button`,{type:`button`,onClick:()=>a(e.id),className:`truncate text-left px-1`,title:e.title,children:e.title||r(`docBrowserTabUntitled`)}),(0,y.jsx)(`button`,{type:`button`,onClick:t=>{t.stopPropagation(),o(e.id)},className:`rounded p-0.5 hover:bg-black/10`,"aria-label":r(`docBrowserCloseTab`),children:(0,y.jsx)(d,{className:`w-3 h-3`})})]},e.id)),(0,y.jsx)(`button`,{type:`button`,onClick:n,className:`inline-flex items-center justify-center w-7 h-7 rounded-lg border border-[#eee3d1] bg-white text-[#78644d] hover:bg-[#fff7ea] hover:text-[#2f2212] shrink-0`,title:r(`docBrowserNewTab`),children:(0,y.jsx)(u,{className:`w-3.5 h-3.5`})})]})}var x=e(t(),1);function S({children:e,className:t,style:n,defaultWidth:r=420,minWidth:a=320,maxWidth:o=860,overlay:s=!1,...c}){let l=(0,x.useRef)(null),[u,d]=(0,x.useState)(!1),[f,p]=(0,x.useState)(r),m=e=>{if(s)return;e.preventDefault(),e.stopPropagation(),d(!0),l.current={startX:e.clientX,startWidth:f};let t=e=>{let t=l.current;if(!t)return;let n=t.startWidth+t.startX-e.clientX;p(Math.max(a,Math.min(o,n)))},n=()=>{d(!1),l.current=null,window.removeEventListener(`mousemove`,t),window.removeEventListener(`mouseup`,n)};window.addEventListener(`mousemove`,t),window.addEventListener(`mouseup`,n)};return(0,y.jsxs)(`aside`,{...c,className:i(`relative flex h-full min-h-0 shrink-0 overflow-hidden bg-white`,s?`fixed inset-0 z-40`:`border-l border-gray-200`,t),style:s?n:{...n,width:f},children:[s?null:(0,y.jsx)(`div`,{className:`absolute left-0 top-0 z-20 h-full w-1.5 cursor-ew-resize transition-colors hover:bg-primary/10`,"data-testid":`resizable-right-panel-handle`,onMouseDown:m}),(0,y.jsx)(`div`,{className:`flex h-full min-h-0 w-full flex-col overflow-hidden`,children:e}),u?(0,y.jsx)(`div`,{className:`absolute inset-0 z-10`}):null]})}function C(e){return i(`flex flex-col bg-white overflow-hidden relative`,e?`fixed inset-0 z-[9999] h-[100dvh] w-screen rounded-none border-0 shadow-2xl`:`rounded-2xl shadow-2xl border border-gray-200`)}function w(e){let{isFullscreen:t,floatPos:n,floatSize:r}=e;if(!t)return{position:`fixed`,left:n.x,top:n.y,width:r.w,height:r.h,zIndex:9999}}function T({customTabRenderers:e={},displayMode:t=`desktop`}){let{isOpen:n,mode:r,tabs:i,activeTabId:a,currentTab:o,open:s,close:c,toggleMode:l,goBack:u,goForward:d,navigate:p,syncUrl:h,setActiveTab:_,closeTab:v}=f(),[T,E]=(0,x.useState)(``),[D,O]=(0,x.useState)(!1),[k,A]=(0,x.useState)(!1),[j,M]=(0,x.useState)(0),[N,P]=(0,x.useState)(()=>({x:Math.max(40,window.innerWidth-520),y:80})),[F,I]=(0,x.useState)({w:480,h:600}),L=(0,x.useRef)(null),R=(0,x.useRef)(null),z=(0,x.useRef)(null),B=o?.currentUrl??m,V=o?.navVersion??0,H=(0,x.useRef)(V),U=o?.kind===`docs`;(0,x.useEffect)(()=>{if(!U){E(``);return}try{E(new URL(B).pathname)}catch{E(B)}},[B,a,U]),(0,x.useEffect)(()=>{if(U){if(V!==H.current){H.current=V;return}if(z.current?.contentWindow)try{let e=new URL(B).pathname;z.current.contentWindow.postMessage({type:`docs-navigate`,path:e},`*`)}catch{}}},[B,V,U]),(0,x.useEffect)(()=>{r===`floating`&&P(e=>({x:Math.max(40,window.innerWidth-F.w-40),y:e.y}))},[r,F.w]),(0,x.useEffect)(()=>{let e=e=>{U&&e.data?.type===`docs-route-change`&&typeof e.data.url==`string`&&h(e.data.url)};return window.addEventListener(`message`,e),()=>window.removeEventListener(`message`,e)},[h,U]);let W=(0,x.useCallback)(e=>{if(e.preventDefault(),!U)return;let t=T.trim();t&&(t.startsWith(`/`)?p(`${m}${t}`):t.startsWith(`http`)?p(t):p(`${m}/${t}`))},[T,p,U]),G=(0,x.useCallback)(e=>{r===`floating`&&(O(!0),L.current={startX:e.clientX,startY:e.clientY,startPosX:N.x,startPosY:N.y})},[r,N]);(0,x.useEffect)(()=>{if(!D)return;let e=e=>{L.current&&P({x:L.current.startPosX+(e.clientX-L.current.startX),y:L.current.startPosY+(e.clientY-L.current.startY)})},t=()=>{O(!1),L.current=null};return window.addEventListener(`mousemove`,e),window.addEventListener(`mouseup`,t),()=>{window.removeEventListener(`mousemove`,e),window.removeEventListener(`mouseup`,t)}},[D]);let K=(0,x.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),A(!0);let{axis:t}=e.currentTarget.dataset;R.current={startX:e.clientX,startY:e.clientY,startW:F.w,startH:F.h};let n=e=>{R.current&&I(n=>({w:t===`y`?n.w:Math.max(360,R.current.startW+(e.clientX-R.current.startX)),h:t===`x`?n.h:Math.max(400,R.current.startH+(e.clientY-R.current.startY))}))},r=()=>{A(!1),R.current=null,window.removeEventListener(`mousemove`,n),window.removeEventListener(`mouseup`,r)};window.addEventListener(`mousemove`,n),window.addEventListener(`mouseup`,r)},[F]),q=(0,x.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),A(!0);let t=e.clientX,n=F.w,r=N.x,i=e=>{let i=t-e.clientX,a=Math.max(360,n+i);I(e=>({...e,w:a})),P(e=>({...e,x:r-(a-n)}))},a=()=>{A(!1),window.removeEventListener(`mousemove`,i),window.removeEventListener(`mouseup`,a)};window.addEventListener(`mousemove`,i),window.addEventListener(`mouseup`,a)},[F.w,N.x]),J=(0,x.useCallback)(()=>{M(e=>e+1)},[]);if(!n)return null;let Y=r===`docked`,X=t===`fullscreen`,Z=o?e[o.kind]:void 0,Q=o?{currentUrl:B,open:s,refreshIframe:J,tab:o}:void 0,ie=Q?Z?.renderToolbar?.(Q):null,ae=Q?Z?.renderContent?.(Q):null,oe=o?Z?.getIframeSandbox?.(o)??`allow-same-origin allow-scripts allow-popups allow-forms`:`allow-same-origin allow-scripts allow-popups allow-forms`,$=(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(b,{currentTab:o,customRenderer:Z,isDocked:Y,isFullscreen:X,onClose:c,onDragStart:G,onToggleMode:l}),(0,y.jsx)(re,{tabs:i,activeTabId:a,onOpenDocs:()=>s(void 0,{kind:`docs`,newTab:!0,title:`Docs`}),onSetActiveTab:_,onCloseTab:v}),(0,y.jsx)(ee,{currentTab:o,isDocsTab:U,onBack:u,onForward:d,onSubmit:W,onUrlInputChange:E,urlInput:T}),ie,(0,y.jsx)(te,{activeTabId:a,currentTab:o,currentUrl:B,customContent:ae,iframeRef:z,iframeReloadVersion:j,iframeSandbox:oe,isDragging:D,isResizing:k,navVersion:V}),(0,y.jsx)(ne,{currentUrl:B,isDocsTab:U})]});return Y&&!X?(0,y.jsx)(S,{"data-testid":`doc-browser-panel`,defaultWidth:420,minWidth:320,maxWidth:860,children:$}):(0,y.jsxs)(`div`,{"data-testid":`doc-browser-panel`,className:C(X),style:w({isFullscreen:X,floatPos:N,floatSize:F}),children:[$,!Y&&!X&&(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(`div`,{className:`absolute top-0 left-0 w-1.5 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors`,onMouseDown:q}),(0,y.jsx)(`div`,{className:`absolute top-0 right-0 w-1.5 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors`,onMouseDown:K,"data-axis":`x`}),(0,y.jsx)(`div`,{className:`absolute bottom-0 left-0 h-1.5 w-full cursor-ns-resize z-20 hover:bg-primary/10 transition-colors`,onMouseDown:K,"data-axis":`y`}),(0,y.jsx)(`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:K,children:(0,y.jsx)(g,{className:`w-3 h-3 rotate-[-45deg]`})})]})]})}export{S as n,T as t};

package/dist/assets/mcp-marketplace-page-D-dydvbL.js

@@ -1 +0,0 @@
-import{t as e}from"./mcp-marketplace-page-n9Z25Cyk.js";export{e as McpMarketplacePage};

package/dist/assets/remote-DxTFnQm8.js

@@ -1 +0,0 @@
-import{Rt as e}from"./index-dHwM4pEn.js";export{e as RemoteAccessPage};