@arbidocs/blocks 0.5.38 → 0.5.40

package/dist/{chunk-QWKT4DO6.cjs → chunk-GX5MKJ3F.cjs}

@@ -1,12 +1,16 @@
 "use client";
 'use strict';
 
+var chunkG2BKHCI2_cjs = require('./chunk-G2BKHCI2.cjs');
+var chunkB6MVQCXW_cjs = require('./chunk-B6MVQCXW.cjs');
+var chunkFX3K6LNZ_cjs = require('./chunk-FX3K6LNZ.cjs');
 var chunkMHVNT4J3_cjs = require('./chunk-MHVNT4J3.cjs');
 var react = require('react');
 var ui = require('@arbidocs/react/ui');
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var shell = require('@arbidocs/react/shell');
+var reactDom = require('react-dom');
 
 var DEFAULT_SIDEBAR_LABELS = {
   mainNavigation: "Main navigation",
@@ -595,23 +599,450 @@ 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__ */ jsxRuntime.jsx(
+    ui.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__ */ jsxRuntime.jsxs(ui.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.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 = chunkFX3K6LNZ_cjs.useIsPhone();
+  const isTabletAndBelow = chunkFX3K6LNZ_cjs.useMediaQuery(TABLET_AND_BELOW_QUERY);
+  const closeButton = onClose && /* @__PURE__ */ jsxRuntime.jsx(SwitcherButton, { label: "Close (Esc)", onClick: onClose, testId: closeTestId, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" }) });
+  if (isSmallScreen) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: closeButton });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+    !disablePopout && !isTabletAndBelow && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "w-3.5 h-3.5" })
+      }
+    ),
+    !isPopout && mode !== "docked" && /* @__PURE__ */ jsxRuntime.jsx(
+      SwitcherButton,
+      {
+        label: "Split screen",
+        onClick: () => onModeChange("docked"),
+        testId: "dock-panel-button",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelRight, { className: "w-3.5 h-3.5" })
+      }
+    ),
+    !isPopout && mode !== "overlay" && !isTabletAndBelow && /* @__PURE__ */ jsxRuntime.jsx(
+      SwitcherButton,
+      {
+        label: "Float as overlay",
+        onClick: () => onModeChange("overlay"),
+        testId: "overlay-panel-button",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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 } = chunkG2BKHCI2_cjs.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] = react.useState(defaultWidth ?? OVERLAY_DEFAULT_PX);
+  const [isResizing, setIsResizing] = react.useState(false);
+  const [dragWidth, setDragWidth] = react.useState(null);
+  const dragWidthRef = react.useRef(null);
+  const [hasEntered, setHasEntered] = react.useState(false);
+  const handleResizeStart = react.useCallback((e) => {
+    e.preventDefault();
+    setHasEntered(true);
+    setIsResizing(true);
+    setDragWidth(null);
+    dragWidthRef.current = null;
+  }, []);
+  react.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: scoped ? "absolute inset-0 z-40" : "fixed inset-0 z-50",
+        "data-testid": `${panelId}-overlay`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute top-0 bottom-0 z-[60] w-0.5 bg-primary pointer-events-none",
+              style: { right: dragWidth }
+            }
+          ),
+          isResizing && /* @__PURE__ */ jsxRuntime.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] = react.useState(null);
+  const popupWindowIdRef = react.useRef(null);
+  react.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]);
+  react.useEffect(() => {
+    return () => {
+      if (popupWindowIdRef.current) {
+        windowManager.closeWindow(popupWindowIdRef.current);
+      }
+    };
+  }, [windowManager]);
+  if (!isOpen && !isExiting) return null;
+  if (mode === "popout" && popupRoot) {
+    return reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(ui.PortalContainerProvider, { container: popupRoot, children }),
+      popupRoot
+    );
+  }
+  if (mode === "overlay") {
+    const overlayZone = document.getElementById(chunkB6MVQCXW_cjs.DEFAULT_OVERLAY_ZONE_ID);
+    return reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.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 reactDom.createPortal(children, mainZone);
+    }
+  }
+  const dockZone = document.getElementById("dock-zone");
+  if (dockZone) {
+    return reactDom.createPortal(children, dockZone);
+  }
+  return null;
+}
 
 exports.ActionCluster = ActionCluster;
 exports.DEFAULT_SIDEBAR_LABELS = DEFAULT_SIDEBAR_LABELS;
 exports.DEFAULT_WORKSPACE_KIND_LABELS = DEFAULT_WORKSPACE_KIND_LABELS;
 exports.DEFAULT_WORKSPACE_SWITCHER_LABELS = DEFAULT_WORKSPACE_SWITCHER_LABELS;
+exports.PanelModeSwitcher = PanelModeSwitcher;
+exports.PanelPortal = PanelPortal;
+exports.PanelWindowManager = PanelWindowManager;
 exports.SidebarBadgeRow = SidebarBadgeRow;
 exports.SidebarContext = SidebarContext;
 exports.SidebarRowHoverContext = SidebarRowHoverContext;
 exports.WorkspaceIdentity = WorkspaceIdentity;
 exports.WorkspaceSwitcher = WorkspaceSwitcher;
+exports.createPanelWindowManager = createPanelWindowManager;
 exports.hasUnsavedInput = hasUnsavedInput;
 exports.installReloadPolicy = installReloadPolicy;
 exports.markBuildStale = markBuildStale;
 exports.prefetchChunk = prefetchChunk;
 exports.requestReload = requestReload;
+exports.usePanelHostSupport = usePanelHostSupport;
 exports.useSidebarContext = useSidebarContext;
 exports.workspaceKindColor = workspaceKindColor;
 exports.workspaceKindMeta = workspaceKindMeta;
-//# sourceMappingURL=chunk-QWKT4DO6.cjs.map
-//# sourceMappingURL=chunk-QWKT4DO6.cjs.map
+//# sourceMappingURL=chunk-GX5MKJ3F.cjs.map
+//# sourceMappingURL=chunk-GX5MKJ3F.cjs.map