@arbidocs/blocks 0.4.2 → 0.4.3

package/dist/{chunk-7PEELPMA.js → chunk-TI4UTYRL.js}

@@ -1,269 +1,14 @@
 "use client";
 import { ActionLink } from './chunk-S7PSMMRG.js';
-import { BlocksTooltipProvider } from './chunk-YDHO4AVL.js';
+import { useDrawerBehavior, BlocksTooltipProvider } from './chunk-2VBJ763Y.js';
 import { testIdOr, prefixedTestId } from './chunk-7F6CBP3Z.js';
-import { createContext, forwardRef, useContext, useRef, useEffect, useCallback, useMemo, useState, useId } from 'react';
-import { X, PanelLeft, PanelLeftClose, PanelLeftOpen, Globe, Users, Lock, ChevronDown, LayoutGrid, Plus, Sparkles, Search, ArrowUp, Menu, TriangleAlert, CheckCircle2, Loader2, RefreshCw, WifiOff, MousePointerClick, Lightbulb, Pencil, ChevronLeft, ChevronRight, Info } from 'lucide-react';
+import { createContext, forwardRef, useContext, useMemo, useRef, useState, useId, useEffect } from 'react';
+import { PanelLeftClose, PanelLeftOpen, X, Globe, Users, Lock, ChevronDown, LayoutGrid, Plus, Sparkles, Search, ArrowUp, Menu, TriangleAlert, CheckCircle2, Loader2, RefreshCw, WifiOff, MousePointerClick, Lightbulb, Pencil, ChevronLeft, ChevronRight, Info } from 'lucide-react';
 import { cn, Tooltip, TooltipTrigger, TooltipContent, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel, Button } from '@arbidocs/react/ui';
 export { UserMenu } from '@arbidocs/react/ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 export { NotificationBell } from '@arbidocs/react/shell';
 
-var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function focusableIn(container) {
-  return Array.from(container.querySelectorAll(FOCUSABLE)).filter(
-    (el) => !el.closest("[inert]") && el.getAttribute("aria-hidden") !== "true"
-  );
-}
-function useDrawerBehavior(isOpen, onClose, containerRef) {
-  const onCloseRef = useRef(onClose);
-  useEffect(() => {
-    onCloseRef.current = onClose;
-  });
-  useEffect(() => {
-    if (!isOpen) return;
-    const previousOverflow = document.body.style.overflow;
-    const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    document.body.style.overflow = "hidden";
-    const container = containerRef?.current ?? null;
-    if (container) {
-      const first = focusableIn(container)[0];
-      if (first) first.focus();
-      else {
-        if (!container.hasAttribute("tabindex")) container.setAttribute("tabindex", "-1");
-        container.focus();
-      }
-    }
-    const onKey = (e) => {
-      if (e.key === "Escape") {
-        onCloseRef.current();
-        return;
-      }
-      if (e.key !== "Tab" || !container) return;
-      const items = focusableIn(container);
-      if (items.length === 0) {
-        e.preventDefault();
-        return;
-      }
-      const firstItem = items[0];
-      const lastItem = items[items.length - 1];
-      const active = document.activeElement;
-      if (!container.contains(active)) {
-        e.preventDefault();
-        firstItem.focus();
-      } else if (e.shiftKey && active === firstItem) {
-        e.preventDefault();
-        lastItem.focus();
-      } else if (!e.shiftKey && active === lastItem) {
-        e.preventDefault();
-        firstItem.focus();
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => {
-      document.body.style.overflow = previousOverflow;
-      window.removeEventListener("keydown", onKey);
-      if (opener?.isConnected) opener.focus();
-    };
-  }, [isOpen, containerRef]);
-}
-var DEFAULT_OVERLAY_ZONE_ID = "app-overlay-zone";
-var OverlayZoneContext = createContext(DEFAULT_OVERLAY_ZONE_ID);
-function useOverlayZoneId() {
-  return useContext(OverlayZoneContext);
-}
-function ShellRoot({
-  banner,
-  topbar,
-  sidebar,
-  tabBar,
-  aside,
-  overlays,
-  children,
-  className,
-  "data-testid": testId
-}) {
-  return /* @__PURE__ */ jsx(BlocksTooltipProvider, { children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "shell",
-      "data-testid": testId,
-      className: cn("flex h-screen flex-col", className),
-      children: [
-        banner,
-        topbar,
-        /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1 overflow-hidden", children: [
-          sidebar,
-          children,
-          aside,
-          overlays
-        ] }),
-        tabBar
-      ]
-    }
-  ) });
-}
-function ShellContent({
-  children,
-  scrollRef,
-  onClick,
-  overlayZoneId = DEFAULT_OVERLAY_ZONE_ID,
-  className
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "shell-content",
-      className: cn("flex min-w-0 flex-1 flex-col", className),
-      onClick,
-      children: /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1", children: [
-        /* @__PURE__ */ jsx(OverlayZoneContext.Provider, { value: overlayZoneId, children: /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "h-full overflow-auto", children }) }),
-        /* @__PURE__ */ jsx("div", { id: overlayZoneId, "data-slot": "overlay-zone" })
-      ] })
-    }
-  );
-}
-function ShellTopbar({ children, actions, className }) {
-  return (
-    // `relative z-30` keeps dropdowns the header opens above the page region (a later sibling).
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-slot": "shell-topbar",
-        className: cn("relative z-30 flex h-14 shrink-0 items-center bg-background px-2", className),
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "mx-auto flex w-full max-w-6xl items-center", children: /* @__PURE__ */ jsx("div", { className: "hidden min-w-0 flex-1 px-6 sm:block", children }) }),
-          /* @__PURE__ */ jsx("div", { className: "absolute right-4 top-1/2 flex -translate-y-1/2 items-center gap-1", children: actions })
-        ]
-      }
-    )
-  );
-}
-function ShellDock({
-  isOpen,
-  onOpenChange,
-  width = "24rem",
-  isMobile = false,
-  label,
-  closeLabel = "Close",
-  children,
-  className,
-  "data-testid": testId
-}) {
-  const mobileRef = useRef(null);
-  const closeMobile = useCallback(() => onOpenChange?.(false), [onOpenChange]);
-  useDrawerBehavior(isOpen && isMobile, closeMobile, mobileRef);
-  if (!isOpen) return null;
-  if (isMobile) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: mobileRef,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": label,
-        "data-slot": "shell-dock",
-        "data-state": "open",
-        "data-mobile": "true",
-        "data-testid": testId,
-        className: cn("fixed inset-0 z-40 flex flex-col bg-background", className),
-        children: [
-          onOpenChange && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => onOpenChange(false),
-              "aria-label": closeLabel,
-              className: "absolute right-2 top-2 z-10 rounded-md p-2 text-muted-foreground hover:bg-muted",
-              children: /* @__PURE__ */ jsx(X, { className: "size-5" })
-            }
-          ),
-          children
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "aside",
-    {
-      "aria-label": label,
-      "data-slot": "shell-dock",
-      "data-state": "open",
-      "data-testid": testId,
-      style: { width },
-      className: cn(
-        "flex shrink-0 flex-col overflow-hidden border-l border-border bg-background",
-        className
-      ),
-      children
-    }
-  );
-}
-var Shell = {
-  Root: ShellRoot,
-  Content: ShellContent,
-  Topbar: ShellTopbar,
-  Dock: ShellDock
-};
-var DEFAULT_PAGE_CONTAINER_PADDING = "px-4 sm:px-6 lg:px-8";
-function PageContainer({
-  children,
-  wide = false,
-  minScreen = false,
-  maxWidth = "max-w-6xl",
-  padding = DEFAULT_PAGE_CONTAINER_PADDING,
-  innerClassName,
-  className
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "page-container",
-      className: cn(
-        "bg-background pb-safe",
-        minScreen ? "min-h-screen" : "h-full min-h-0",
-        className
-      ),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "flex h-full w-full flex-col pb-safe",
-            padding,
-            !wide && cn("mx-auto", maxWidth),
-            innerClassName
-          ),
-          children
-        }
-      )
-    }
-  );
-}
-var DEFAULT_SIDEBAR_TOGGLE_BUTTON_LABELS = {
-  closeSidebar: "Close sidebar",
-  openSidebar: "Open sidebar"
-};
-function SidebarToggleButton({
-  isOpen,
-  onToggle,
-  labels,
-  "data-testid": testId = "tabheader-sidebar-toggle"
-}) {
-  const l = { ...DEFAULT_SIDEBAR_TOGGLE_BUTTON_LABELS, ...labels };
-  const label = isOpen ? l.closeSidebar : l.openSidebar;
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: onToggle,
-      className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground pointer-coarse:p-2.5",
-      "aria-label": label,
-      title: label,
-      "data-testid": testId,
-      children: /* @__PURE__ */ jsx(PanelLeft, { className: "size-5" })
-    }
-  );
-}
 var DEFAULT_SIDEBAR_LABELS = {
   mainNavigation: "Main navigation",
   hideSidebar: "Hide sidebar",
@@ -1408,30 +1153,6 @@ function ActionCluster({
     }
   );
 }
-function ToolButton({
-  onClick,
-  label,
-  active = false,
-  "data-testid": testId,
-  children
-}) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick,
-      title: label,
-      "aria-label": label,
-      "data-slot": "tool-button",
-      "data-testid": testId,
-      className: cn(
-        "relative flex size-9 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-accent-foreground pointer-coarse:size-11",
-        active ? "bg-accent text-accent-foreground" : "text-muted-foreground"
-      ),
-      children
-    }
-  );
-}
 var TONES = {
   progress: { className: "bg-muted text-foreground", Icon: Loader2, spin: true },
   success: { className: "bg-green-bg text-green-text", Icon: CheckCircle2 },
@@ -1793,7 +1514,63 @@ function InfoBar({
     }
   );
 }
+var SECONDARY_WIDTH = {
+  sm: "@3xl:w-72",
+  md: "@3xl:w-80",
+  lg: "@3xl:w-96",
+  xl: "@3xl:w-[28rem]"
+};
+function SplitLayout({
+  primary,
+  secondary,
+  secondarySize = "md",
+  secondaryPosition = "end",
+  secondaryFirstWhenStacked = false,
+  className,
+  primaryClassName,
+  secondaryClassName,
+  testId = "split-layout"
+}) {
+  const secondaryAtStart = secondaryPosition === "start";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "split-layout",
+      "data-testid": testId,
+      className: cn("flex flex-col gap-6 @3xl:flex-row @3xl:items-start", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "split-primary",
+            className: cn(
+              "min-w-0 @3xl:flex-1",
+              secondaryFirstWhenStacked && "order-2",
+              secondaryAtStart ? "@3xl:order-2" : "@3xl:order-1",
+              primaryClassName
+            ),
+            children: primary
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "split-secondary",
+            className: cn(
+              "min-w-0 @3xl:shrink-0",
+              SECONDARY_WIDTH[secondarySize],
+              secondaryFirstWhenStacked && "order-1",
+              secondaryAtStart ? "@3xl:order-1" : "@3xl:order-2",
+              secondaryClassName
+            ),
+            children: secondary
+          }
+        )
+      ]
+    }
+  );
+}
 
-export { ActionCluster, AskField, AskRow, AskTrigger, DEFAULT_ASK_FIELD_LABELS, DEFAULT_MOBILE_BARS_LABELS, DEFAULT_OFFLINE_PILL_LABELS, DEFAULT_OVERLAY_ZONE_ID, DEFAULT_PAGE_CONTAINER_PADDING, DEFAULT_REMOTE_CONTROL_PILL_LABELS, DEFAULT_SIDEBAR_LABELS, DEFAULT_SIDEBAR_TOGGLE_BUTTON_LABELS, DEFAULT_TIP_CARD_LABELS, DEFAULT_WORKSPACE_KIND_LABELS, DEFAULT_WORKSPACE_SWITCHER_LABELS, InfoBar, MobileAppBar, MobileTabBar, OfflinePill, PageContainer, RemoteControlPill, Shell, Sidebar, SidebarBadgeRow, SidebarRowAction, SidebarRowHoverContext, SidebarToggleButton, StatusRow, TipCard, ToolButton, WorkspaceIdentity, WorkspaceSwitcher, resolveSidebarLayout, useDrawerBehavior, useOverlayZoneId, useSidebarContext, useSidebarSettle, workspaceKindColor, workspaceKindMeta };
-//# sourceMappingURL=chunk-7PEELPMA.js.map
-//# sourceMappingURL=chunk-7PEELPMA.js.map
+export { ActionCluster, AskField, AskRow, AskTrigger, DEFAULT_ASK_FIELD_LABELS, DEFAULT_MOBILE_BARS_LABELS, DEFAULT_OFFLINE_PILL_LABELS, DEFAULT_REMOTE_CONTROL_PILL_LABELS, DEFAULT_SIDEBAR_LABELS, DEFAULT_TIP_CARD_LABELS, DEFAULT_WORKSPACE_KIND_LABELS, DEFAULT_WORKSPACE_SWITCHER_LABELS, InfoBar, MobileAppBar, MobileTabBar, OfflinePill, RemoteControlPill, Sidebar, SidebarBadgeRow, SidebarRowAction, SidebarRowHoverContext, SplitLayout, StatusRow, TipCard, WorkspaceIdentity, WorkspaceSwitcher, resolveSidebarLayout, useSidebarContext, useSidebarSettle, workspaceKindColor, workspaceKindMeta };
+//# sourceMappingURL=chunk-TI4UTYRL.js.map
+//# sourceMappingURL=chunk-TI4UTYRL.js.map