@arbidocs/blocks 0.5.38 → 0.5.39

package/dist/{chunk-PXYP3DM5.js → chunk-PD4AKBYZ.js}

@@ -1,10 +1,14 @@
 "use client";
+import { useHost } from './chunk-ILBBV2ZY.js';
+import { DEFAULT_OVERLAY_ZONE_ID } from './chunk-7XF5SFJ2.js';
+import { useIsPhone, useMediaQuery } from './chunk-SLSBJRWW.js';
 import { testIdOr, prefixedTestId } from './chunk-7F6CBP3Z.js';
-import { createContext, forwardRef, useContext, useId } from 'react';
-import { cn, Tooltip, TooltipTrigger, TooltipContent, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel } from '@arbidocs/react/ui';
+import { createContext, forwardRef, useContext, useId, useState, useRef, useEffect, useCallback } from 'react';
+import { cn, Tooltip, TooltipTrigger, TooltipContent, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel, PortalContainerProvider, Button } from '@arbidocs/react/ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Globe, Users, Lock, ChevronDown, LayoutGrid, Plus } from 'lucide-react';
+import { Globe, Users, Lock, ChevronDown, LayoutGrid, Plus, ExternalLink, PanelRight, PictureInPicture2, X } from 'lucide-react';
 import { notify } from '@arbidocs/react/shell';
+import { createPortal } from 'react-dom';
 
 var DEFAULT_SIDEBAR_LABELS = {
   mainNavigation: "Main navigation",
@@ -593,7 +597,429 @@ function ActionCluster({
     }
   );
 }
+var btnClass = "h-7 w-7 p-0 text-muted-foreground hover:text-foreground";
+function SwitcherButton({
+  label,
+  inPopout = false,
+  onClick,
+  testId,
+  children
+}) {
+  const button = /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      className: btnClass,
+      "aria-label": label,
+      title: inPopout ? label : void 0,
+      onClick,
+      "data-testid": testId,
+      children
+    }
+  );
+  if (inPopout) return button;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: label })
+  ] });
+}
+var TABLET_AND_BELOW_QUERY = "(max-width: 1024px)";
+function PanelModeSwitcher({
+  mode,
+  onModeChange,
+  onClose,
+  disablePopout,
+  closeTestId = "dialog-close-button"
+}) {
+  const isPopout = mode === "popout";
+  const isSmallScreen = useIsPhone();
+  const isTabletAndBelow = useMediaQuery(TABLET_AND_BELOW_QUERY);
+  const closeButton = onClose && /* @__PURE__ */ jsx(SwitcherButton, { label: "Close (Esc)", onClick: onClose, testId: closeTestId, children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" }) });
+  if (isSmallScreen) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: closeButton });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+    !disablePopout && !isTabletAndBelow && /* @__PURE__ */ jsx(
+      SwitcherButton,
+      {
+        label: isPopout ? "Pop back in" : "Open in new window",
+        inPopout: isPopout,
+        onClick: () => onModeChange(isPopout ? "docked" : "popout"),
+        testId: isPopout ? "pop-into-main-window-button" : "open-in-new-window-button",
+        children: /* @__PURE__ */ jsx(ExternalLink, { className: "w-3.5 h-3.5" })
+      }
+    ),
+    !isPopout && mode !== "docked" && /* @__PURE__ */ jsx(
+      SwitcherButton,
+      {
+        label: "Split screen",
+        onClick: () => onModeChange("docked"),
+        testId: "dock-panel-button",
+        children: /* @__PURE__ */ jsx(PanelRight, { className: "w-3.5 h-3.5" })
+      }
+    ),
+    !isPopout && mode !== "overlay" && !isTabletAndBelow && /* @__PURE__ */ jsx(
+      SwitcherButton,
+      {
+        label: "Float as overlay",
+        onClick: () => onModeChange("overlay"),
+        testId: "overlay-panel-button",
+        children: /* @__PURE__ */ jsx(PictureInPicture2, { className: "w-3.5 h-3.5" })
+      }
+    ),
+    !isPopout && closeButton
+  ] });
+}
+
+// src/shell/panel-windows.ts
+var PanelWindowManager = class {
+  constructor(defaultTitle = "Panel") {
+    this.defaultTitle = defaultTitle;
+  }
+  defaultTitle;
+  windows = /* @__PURE__ */ new Map();
+  createPopupWindow(panelId, onClose, title) {
+    const windowId = `panel-window-${panelId}`;
+    if (this.windows.has(windowId)) {
+      const existing = this.windows.get(windowId);
+      if (existing && !existing.window.closed) {
+        existing.window.focus();
+        return windowId;
+      } else {
+        this.windows.delete(windowId);
+      }
+    }
+    const currentWidth = window.outerWidth;
+    const currentHeight = window.outerHeight;
+    const currentLeft = window.screenX ?? window.screenLeft ?? 0;
+    const currentTop = window.screenY ?? window.screenTop ?? 0;
+    const halfWidth = Math.floor(currentWidth / 2);
+    const popupWidth = halfWidth;
+    const popupHeight = currentHeight;
+    const left = currentLeft + halfWidth;
+    const top = currentTop;
+    const popup = window.open(
+      "",
+      windowId,
+      `width=${popupWidth},height=${popupHeight},left=${left},top=${top},scrollbars=yes,resizable=yes,menubar=no,toolbar=no,location=no,status=no`
+    );
+    if (!popup) {
+      console.error("Failed to create popup window - popup blocked?");
+      return null;
+    }
+    const mainDocument = document;
+    const stylesheets = Array.from(
+      mainDocument.head.querySelectorAll('link[rel="stylesheet"], style')
+    ).map((el) => el.outerHTML).join("\n");
+    popup.document.write(`
+      <!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <title></title>
+          <!-- about:blank has no base, so copied @font-face / asset URLs (e.g.
+               /assets/font.woff2) would resolve against nothing and render as
+               tofu squares. Anchor relative URLs to the app origin. -->
+          <base href="${window.location.origin}/">
+          ${stylesheets}
+          <style>
+            body {
+              margin: 0;
+              padding: 0;
+              font-family: system-ui, -apple-system, sans-serif;
+            }
+            #panel-root {
+              width: 100%;
+              height: 100vh;
+              overflow: hidden;
+            }
+            * {
+              box-sizing: border-box;
+            }
+          </style>
+        </head>
+        <body>
+          <div id="panel-root"></div>
+        </body>
+      </html>
+    `);
+    popup.document.close();
+    popup.document.title = title || this.defaultTitle;
+    try {
+      mainDocument.fonts.forEach((font) => {
+        try {
+          popup.document.fonts.add(font);
+        } catch {
+        }
+      });
+    } catch {
+    }
+    const rootElement = popup.document.getElementById("panel-root");
+    const popupWindow = {
+      id: windowId,
+      window: popup,
+      panelId,
+      rootElement,
+      onClose
+    };
+    this.windows.set(windowId, popupWindow);
+    const closeCheckInterval = setInterval(() => {
+      if (popup.closed) {
+        clearInterval(closeCheckInterval);
+        const entry = this.windows.get(windowId);
+        this.windows.delete(windowId);
+        entry?.onClose?.();
+      }
+    }, 200);
+    return windowId;
+  }
+  getWindow(windowId) {
+    const popup = this.windows.get(windowId);
+    return popup && !popup.window.closed ? popup.window : null;
+  }
+  getRootElement(windowId) {
+    const popup = this.windows.get(windowId);
+    return popup && !popup.window.closed ? popup.rootElement : null;
+  }
+  /** Focus the popup window for a given panel ID. Returns true if focused. */
+  focusPanelWindow(panelId) {
+    const windowId = `panel-window-panel-${panelId}`;
+    const popup = this.windows.get(windowId);
+    if (popup && !popup.window.closed) {
+      popup.window.focus();
+      return true;
+    }
+    return false;
+  }
+  /** Remove the onClose callback so it won't fire when the window is closed programmatically. */
+  clearOnClose(windowId) {
+    const popup = this.windows.get(windowId);
+    if (popup) {
+      popup.onClose = void 0;
+    }
+  }
+  closeWindow(windowId) {
+    const popup = this.windows.get(windowId);
+    if (popup && !popup.window.closed) {
+      popup.window.close();
+    }
+    this.windows.delete(windowId);
+  }
+  closeAllWindows() {
+    for (const [, popup] of this.windows) {
+      if (!popup.window.closed) {
+        popup.window.close();
+      }
+    }
+    this.windows.clear();
+  }
+};
+function createPanelWindowManager(options = {}) {
+  return new PanelWindowManager(options.defaultTitle);
+}
+
+// src/shell/panel-host.ts
+var defaultWindows = createPanelWindowManager();
+var titleOnly = (title) => title;
+function usePanelHostSupport() {
+  const { panels } = useHost();
+  return {
+    windows: panels?.windows ?? defaultWindows,
+    popoutTitle: panels?.popoutTitle ?? titleOnly
+  };
+}
+var OVERLAY_DEFAULT_PX = 544;
+var OVERLAY_MIN_PX = 360;
+function OverlaySheet({
+  panelId,
+  isExiting,
+  onClose,
+  defaultWidth,
+  scoped,
+  children
+}) {
+  const [width, setWidth] = useState(defaultWidth ?? OVERLAY_DEFAULT_PX);
+  const [isResizing, setIsResizing] = useState(false);
+  const [dragWidth, setDragWidth] = useState(null);
+  const dragWidthRef = useRef(null);
+  const [hasEntered, setHasEntered] = useState(false);
+  const handleResizeStart = useCallback((e) => {
+    e.preventDefault();
+    setHasEntered(true);
+    setIsResizing(true);
+    setDragWidth(null);
+    dragWidthRef.current = null;
+  }, []);
+  useEffect(() => {
+    if (!isResizing) return;
+    const handleMouseMove = (e) => {
+      const max = window.innerWidth * 0.92;
+      const next = Math.min(Math.max(window.innerWidth - e.clientX, OVERLAY_MIN_PX), max);
+      dragWidthRef.current = next;
+      setDragWidth(next);
+    };
+    const handleMouseUp = () => {
+      if (dragWidthRef.current !== null) setWidth(dragWidthRef.current);
+      setIsResizing(false);
+      setDragWidth(null);
+      dragWidthRef.current = null;
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isResizing]);
+  return (
+    // Scoped: absolute within the layout's overlay zone (below the topbar).
+    // Unscoped fallback: fixed over the whole viewport, as before.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: scoped ? "absolute inset-0 z-40" : "fixed inset-0 z-50",
+        "data-testid": `${panelId}-overlay`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `absolute inset-0 bg-black/40 dark:bg-black/20 duration-200 ${// fill-mode-forwards holds the exit end-state — without it the
+              // element snaps back fully visible for the frames between the
+              // animation finishing and React unmounting it (a flicker).
+              isExiting ? "animate-out fade-out fill-mode-forwards" : "animate-in fade-in"}`,
+              onClick: onClose,
+              "aria-hidden": "true",
+              "data-testid": `${panelId}-overlay-backdrop`
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: { width },
+              onAnimationEnd: () => !isExiting && setHasEntered(true),
+              className: `absolute right-0 top-0 bottom-0 flex max-w-[92vw] flex-col border-l max-sm:!w-full max-sm:!max-w-full max-sm:border-l-0 border-border bg-muted shadow-2xl duration-200 ${isExiting ? "animate-out slide-out-to-right fill-mode-forwards" : (
+                // Suppress the slide transform once entered so it doesn't replay.
+                hasEntered ? "" : "animate-in slide-in-from-right"
+              )}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute left-0 top-0 bottom-0 z-10 w-1.5 -translate-x-1/2 cursor-col-resize hover:bg-primary/40",
+                    onMouseDown: handleResizeStart,
+                    "data-testid": `${panelId}-overlay-resize-handle`
+                  }
+                ),
+                children
+              ]
+            }
+          ),
+          isResizing && dragWidth !== null && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute top-0 bottom-0 z-[60] w-0.5 bg-primary pointer-events-none",
+              style: { right: dragWidth }
+            }
+          ),
+          isResizing && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-[55] cursor-col-resize" })
+        ]
+      }
+    )
+  );
+}
+function PanelPortal({
+  panelId,
+  mode,
+  isOpen,
+  isExiting,
+  onPopupClosed,
+  onClose,
+  popoutTitle,
+  defaultWidth,
+  children
+}) {
+  const { windows: windowManager } = usePanelHostSupport();
+  const [popupRoot, setPopupRoot] = useState(null);
+  const popupWindowIdRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen || mode !== "popout") {
+      if (popupWindowIdRef.current) {
+        windowManager.clearOnClose(popupWindowIdRef.current);
+        windowManager.closeWindow(popupWindowIdRef.current);
+        popupWindowIdRef.current = null;
+        setPopupRoot(null);
+      }
+      return;
+    }
+    if (popupWindowIdRef.current) return;
+    const windowId = windowManager.createPopupWindow(
+      `panel-${panelId}`,
+      () => {
+        popupWindowIdRef.current = null;
+        setPopupRoot(null);
+        onPopupClosed?.();
+      },
+      popoutTitle || panelId
+    );
+    if (windowId) {
+      const rootElement = windowManager.getRootElement(windowId);
+      if (rootElement) {
+        popupWindowIdRef.current = windowId;
+        setPopupRoot(rootElement);
+        windowManager.getWindow(windowId)?.focus();
+      }
+    }
+  }, [isOpen, mode, panelId, popoutTitle, onPopupClosed, windowManager]);
+  useEffect(() => {
+    return () => {
+      if (popupWindowIdRef.current) {
+        windowManager.closeWindow(popupWindowIdRef.current);
+      }
+    };
+  }, [windowManager]);
+  if (!isOpen && !isExiting) return null;
+  if (mode === "popout" && popupRoot) {
+    return createPortal(
+      /* @__PURE__ */ jsx(PortalContainerProvider, { container: popupRoot, children }),
+      popupRoot
+    );
+  }
+  if (mode === "overlay") {
+    const overlayZone = document.getElementById(DEFAULT_OVERLAY_ZONE_ID);
+    return createPortal(
+      /* @__PURE__ */ jsx(
+        OverlaySheet,
+        {
+          panelId,
+          isExiting,
+          onClose,
+          defaultWidth,
+          scoped: overlayZone !== null,
+          children
+        }
+      ),
+      overlayZone ?? document.body
+    );
+  }
+  if (mode === "main") {
+    const mainZone = document.getElementById("main-zone");
+    if (mainZone) {
+      return createPortal(children, mainZone);
+    }
+  }
+  const dockZone = document.getElementById("dock-zone");
+  if (dockZone) {
+    return createPortal(children, dockZone);
+  }
+  return null;
+}
 
-export { ActionCluster, DEFAULT_SIDEBAR_LABELS, DEFAULT_WORKSPACE_KIND_LABELS, DEFAULT_WORKSPACE_SWITCHER_LABELS, SidebarBadgeRow, SidebarContext, SidebarRowHoverContext, WorkspaceIdentity, WorkspaceSwitcher, hasUnsavedInput, installReloadPolicy, markBuildStale, prefetchChunk, requestReload, useSidebarContext, workspaceKindColor, workspaceKindMeta };
-//# sourceMappingURL=chunk-PXYP3DM5.js.map
-//# sourceMappingURL=chunk-PXYP3DM5.js.map
+export { ActionCluster, DEFAULT_SIDEBAR_LABELS, DEFAULT_WORKSPACE_KIND_LABELS, DEFAULT_WORKSPACE_SWITCHER_LABELS, PanelModeSwitcher, PanelPortal, PanelWindowManager, SidebarBadgeRow, SidebarContext, SidebarRowHoverContext, WorkspaceIdentity, WorkspaceSwitcher, createPanelWindowManager, hasUnsavedInput, installReloadPolicy, markBuildStale, prefetchChunk, requestReload, usePanelHostSupport, useSidebarContext, workspaceKindColor, workspaceKindMeta };
+//# sourceMappingURL=chunk-PD4AKBYZ.js.map
+//# sourceMappingURL=chunk-PD4AKBYZ.js.map