@arbidocs/blocks 0.5.34 → 0.5.36

package/dist/{chunk-LTEDORG3.js → chunk-QFYRXQTD.js}

@@ -3,10 +3,10 @@ import { SidebarBadgeRow, DEFAULT_SIDEBAR_LABELS, SidebarContext, useSidebarCont
 import { useControllableState } from './chunk-RLWIUUQ5.js';
 import { ActionLink } from './chunk-73DANGPH.js';
 import { useDrawerBehavior, BlocksTooltipProvider, useShellBottomInset } from './chunk-7XF5SFJ2.js';
-import { useIsPhone, useIsNarrow, useIsTouchScreen } from './chunk-SLSBJRWW.js';
+import { useIsPhone, useIsNarrow, useIsTouchScreen, useMediaQuery } from './chunk-SLSBJRWW.js';
 import { testIdOr, prefixedTestId } from './chunk-7F6CBP3Z.js';
 import { useEffect, useMemo, useRef, useState, useCallback, useContext } from 'react';
-import { TriangleAlert, CheckCircle2, Loader2, PanelLeftClose, PanelLeftOpen, X, Sparkles, Search, ArrowUp, Menu, Download, RefreshCw, WifiOff, MousePointerClick, Lightbulb, Pencil, ChevronLeft, ChevronRight, Info } from 'lucide-react';
+import { TriangleAlert, CheckCircle2, Loader2, PanelLeftClose, PanelLeftOpen, X, Sparkles, Search, ArrowUp, Menu, Download, RefreshCw, WifiOff, MousePointerClick, Lightbulb, Pencil, ChevronLeft, ChevronRight, Info, ExternalLink, PanelRight, PictureInPicture2 } from 'lucide-react';
 import { cn, Tooltip, TooltipTrigger, TooltipContent, Button } from '@arbidocs/react/ui';
 export { UserMenu } from '@arbidocs/react/ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -1684,7 +1684,222 @@ 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] = useState(false);
+  const [dockWidth, setDockWidth] = useState(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const [dragPosition, setDragPosition] = useState(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const containerRef = useRef(null);
+  const dockZoneRef = useRef(null);
+  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;
+  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 = useCallback(() => {
+    setIsResizing(true);
+    setDragPosition(null);
+  }, []);
+  const handleMouseMove = 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 = useCallback(() => {
+    if (dragPosition !== null && containerRef.current) {
+      const containerWidth2 = containerRef.current.getBoundingClientRect().width;
+      setDockWidth(containerWidth2 - dragPosition);
+    }
+    setIsResizing(false);
+    setDragPosition(null);
+  }, [dragPosition]);
+  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__ */ jsxs("div", { ref: containerRef, className: "h-full relative flex", "data-testid": props["data-testid"], children: [
+    /* @__PURE__ */ 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: 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__ */ 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__ */ jsx("div", { className: "h-12 w-1 rounded-full bg-muted-foreground/40 transition-colors group-hover:bg-primary" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: dockZoneRef,
+        id: "dock-zone",
+        style: { width: effectiveDockWidth },
+        className: cn(
+          "h-full overflow-hidden flex-shrink-0",
+          hasDockedContent && !isResizing && "transition-[width] duration-300 ease-in-out"
+        )
+      }
+    ),
+    isResizing && dragPosition !== null && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute top-0 bottom-0 w-0.5 bg-primary z-50 pointer-events-none",
+        style: { left: dragPosition }
+      }
+    ),
+    isResizing && /* @__PURE__ */ 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__ */ 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
+  ] });
+}
 
-export { AskField, AskRow, AskTrigger, DEFAULT_ASK_FIELD_LABELS, DEFAULT_INSTALL_PROMPT_LABELS, DEFAULT_MOBILE_BARS_LABELS, DEFAULT_OFFLINE_PILL_LABELS, DEFAULT_REMOTE_CONTROL_PILL_LABELS, DEFAULT_TIP_CARD_LABELS, INSTALL_PROMPT_DISMISSED_KEY, InfoBar, InstallPrompt, MobileAppBar, MobileTabBar, OfflinePill, RemoteControlPill, SHELL_START_INSET_VAR, STATUS_ROW_BASE_CLASS, STATUS_ROW_TONES, ShellSidebar, Sidebar, SidebarRowAction, SplitLayout, StatusBadge, StatusRow, TipCard, getInstallInstructions, initInstallPrompt, isIosDevice, promptAppInstall, resolveSidebarLayout, useCloseOnEscape, useInstallPrompt, useShellStartInset, useSidebarController, useSidebarSettle };
-//# sourceMappingURL=chunk-LTEDORG3.js.map
-//# sourceMappingURL=chunk-LTEDORG3.js.map
+export { AskField, AskRow, AskTrigger, DEFAULT_ASK_FIELD_LABELS, DEFAULT_INSTALL_PROMPT_LABELS, DEFAULT_MOBILE_BARS_LABELS, DEFAULT_OFFLINE_PILL_LABELS, DEFAULT_REMOTE_CONTROL_PILL_LABELS, DEFAULT_TIP_CARD_LABELS, DockZone, INSTALL_PROMPT_DISMISSED_KEY, InfoBar, InstallPrompt, MobileAppBar, MobileTabBar, OfflinePill, PanelModeSwitcher, RemoteControlPill, SHELL_START_INSET_VAR, STATUS_ROW_BASE_CLASS, STATUS_ROW_TONES, ShellSidebar, Sidebar, SidebarRowAction, SplitLayout, StatusBadge, StatusRow, TipCard, getInstallInstructions, initInstallPrompt, isIosDevice, promptAppInstall, resolveSidebarLayout, useCloseOnEscape, useInstallPrompt, useShellStartInset, useSidebarController, useSidebarSettle };
+//# sourceMappingURL=chunk-QFYRXQTD.js.map
+//# sourceMappingURL=chunk-QFYRXQTD.js.map