@arbidocs/blocks 0.5.34 → 0.5.36

package/dist/{chunk-FSEZEVWZ.cjs → chunk-5NTSJV5H.cjs}

@@ -1685,6 +1685,221 @@ function SplitLayout({
     }
   );
 }
+var MIN_DOCK_PX = 200;
+var MIN_MAIN_PX = 300;
+var DEFAULT_DOCK_PX = 544;
+var MOBILE_BREAKPOINT_PX = 640;
+function DockZone({ children, ...props }) {
+  const [hasDockedContent, setHasDockedContent] = react.useState(false);
+  const [dockWidth, setDockWidth] = react.useState(null);
+  const [isResizing, setIsResizing] = react.useState(false);
+  const [dragPosition, setDragPosition] = react.useState(null);
+  const [containerWidth, setContainerWidth] = react.useState(0);
+  const containerRef = react.useRef(null);
+  const dockZoneRef = react.useRef(null);
+  react.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width;
+      if (width !== void 0) setContainerWidth(width);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const isMobile = containerWidth > 0 && containerWidth < MOBILE_BREAKPOINT_PX;
+  react.useEffect(() => {
+    const el = dockZoneRef.current;
+    if (!el) return;
+    const update = () => {
+      const hasChildren = el.children.length > 0;
+      setHasDockedContent(hasChildren);
+      if (hasChildren) {
+        const requestedWidth = el.firstElementChild?.getAttribute("data-dock-width");
+        if (requestedWidth) {
+          setDockWidth(parseInt(requestedWidth, 10));
+        }
+      }
+    };
+    const observer = new MutationObserver(update);
+    update();
+    observer.observe(el, { childList: true });
+    return () => observer.disconnect();
+  }, []);
+  const handleMouseDown = react.useCallback(() => {
+    setIsResizing(true);
+    setDragPosition(null);
+  }, []);
+  const handleMouseMove = react.useCallback(
+    (e) => {
+      if (!isResizing || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const clamped = Math.min(Math.max(x, MIN_MAIN_PX), rect.width - MIN_DOCK_PX);
+      setDragPosition(clamped);
+    },
+    [isResizing]
+  );
+  const handleMouseUp = react.useCallback(() => {
+    if (dragPosition !== null && containerRef.current) {
+      const containerWidth2 = containerRef.current.getBoundingClientRect().width;
+      setDockWidth(containerWidth2 - dragPosition);
+    }
+    setIsResizing(false);
+    setDragPosition(null);
+  }, [dragPosition]);
+  react.useEffect(() => {
+    if (!isResizing) return;
+    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, handleMouseMove, handleMouseUp]);
+  const effectiveDockWidth = hasDockedContent && containerWidth > 0 ? isMobile ? containerWidth : Math.min(
+    Math.max(dockWidth ?? DEFAULT_DOCK_PX, MIN_DOCK_PX),
+    containerWidth - MIN_MAIN_PX
+  ) : 0;
+  const mainHidden = isMobile && hasDockedContent;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "h-full relative flex", "data-testid": props["data-testid"], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          width: mainHidden ? 0 : `calc(100% - ${effectiveDockWidth}px)`,
+          // Reserve gutter space so the vertical scrollbar doesn't appear and
+          // disappear as streaming content crosses the viewport boundary —
+          // that toggle reflows the layout and reads as a screen-wide flicker.
+          scrollbarGutter: "stable"
+        },
+        className: ui.cn(
+          // The CSS container for the page's @-variants (PageContainer must not be one; see there).
+          "@container h-full overflow-auto",
+          hasDockedContent && !isMobile && "border-r",
+          mainHidden && "overflow-hidden",
+          // Animate opening only. On close the portaled content has already
+          // unmounted, so animating leaves an empty strip shrinking while the
+          // page behind reflows — reads as flicker over heavy content like the
+          // documents grid. Snap closed instead. Resizing is also instant so
+          // the divider doesn't lag the cursor.
+          hasDockedContent && !isResizing && "transition-[width] duration-300 ease-in-out"
+        ),
+        "aria-hidden": mainHidden,
+        inert: mainHidden,
+        "data-scroll-container": true,
+        children
+      }
+    ),
+    hasDockedContent && !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "group flex w-2 flex-shrink-0 cursor-col-resize items-center justify-center",
+        onMouseDown: handleMouseDown,
+        "data-testid": "dock-resize-handle",
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-1 rounded-full bg-muted-foreground/40 transition-colors group-hover:bg-primary" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: dockZoneRef,
+        id: "dock-zone",
+        style: { width: effectiveDockWidth },
+        className: ui.cn(
+          "h-full overflow-hidden flex-shrink-0",
+          hasDockedContent && !isResizing && "transition-[width] duration-300 ease-in-out"
+        )
+      }
+    ),
+    isResizing && dragPosition !== null && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute top-0 bottom-0 w-0.5 bg-primary z-50 pointer-events-none",
+        style: { left: dragPosition }
+      }
+    ),
+    isResizing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-40 cursor-col-resize" })
+  ] });
+}
+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
+  ] });
+}
 
 Object.defineProperty(exports, "UserMenu", {
   enumerable: true,
@@ -1703,12 +1918,14 @@ exports.DEFAULT_MOBILE_BARS_LABELS = DEFAULT_MOBILE_BARS_LABELS;
 exports.DEFAULT_OFFLINE_PILL_LABELS = DEFAULT_OFFLINE_PILL_LABELS;
 exports.DEFAULT_REMOTE_CONTROL_PILL_LABELS = DEFAULT_REMOTE_CONTROL_PILL_LABELS;
 exports.DEFAULT_TIP_CARD_LABELS = DEFAULT_TIP_CARD_LABELS;
+exports.DockZone = DockZone;
 exports.INSTALL_PROMPT_DISMISSED_KEY = INSTALL_PROMPT_DISMISSED_KEY;
 exports.InfoBar = InfoBar;
 exports.InstallPrompt = InstallPrompt;
 exports.MobileAppBar = MobileAppBar;
 exports.MobileTabBar = MobileTabBar;
 exports.OfflinePill = OfflinePill;
+exports.PanelModeSwitcher = PanelModeSwitcher;
 exports.RemoteControlPill = RemoteControlPill;
 exports.SHELL_START_INSET_VAR = SHELL_START_INSET_VAR;
 exports.STATUS_ROW_BASE_CLASS = STATUS_ROW_BASE_CLASS;
@@ -1730,5 +1947,5 @@ exports.useInstallPrompt = useInstallPrompt;
 exports.useShellStartInset = useShellStartInset;
 exports.useSidebarController = useSidebarController;
 exports.useSidebarSettle = useSidebarSettle;
-//# sourceMappingURL=chunk-FSEZEVWZ.cjs.map
-//# sourceMappingURL=chunk-FSEZEVWZ.cjs.map
+//# sourceMappingURL=chunk-5NTSJV5H.cjs.map
+//# sourceMappingURL=chunk-5NTSJV5H.cjs.map