@arbidocs/blocks 0.4.2 → 0.4.3

package/dist/{chunk-2K33YGM6.cjs → chunk-DN3NFNIA.cjs}

@@ -2,7 +2,7 @@
 'use strict';
 
 var chunkOB5F4577_cjs = require('./chunk-OB5F4577.cjs');
-var chunkSCFYPAG6_cjs = require('./chunk-SCFYPAG6.cjs');
+var chunkKHX2BX3S_cjs = require('./chunk-KHX2BX3S.cjs');
 var chunkMHVNT4J3_cjs = require('./chunk-MHVNT4J3.cjs');
 var react = require('react');
 var lucideReact = require('lucide-react');
@@ -10,261 +10,6 @@ var ui = require('@arbidocs/react/ui');
 var jsxRuntime = require('react/jsx-runtime');
 var shell = require('@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 = react.useRef(onClose);
-  react.useEffect(() => {
-    onCloseRef.current = onClose;
-  });
-  react.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 = react.createContext(DEFAULT_OVERLAY_ZONE_ID);
-function useOverlayZoneId() {
-  return react.useContext(OverlayZoneContext);
-}
-function ShellRoot({
-  banner,
-  topbar,
-  sidebar,
-  tabBar,
-  aside,
-  overlays,
-  children,
-  className,
-  "data-testid": testId
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkSCFYPAG6_cjs.BlocksTooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      "data-slot": "shell",
-      "data-testid": testId,
-      className: ui.cn("flex h-screen flex-col", className),
-      children: [
-        banner,
-        topbar,
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "shell-content",
-      className: ui.cn("flex min-w-0 flex-1 flex-col", className),
-      onClick,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-h-0 flex-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(OverlayZoneContext.Provider, { value: overlayZoneId, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "h-full overflow-auto", children }) }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        "data-slot": "shell-topbar",
-        className: ui.cn("relative z-30 flex h-14 shrink-0 items-center bg-background px-2", className),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex w-full max-w-6xl items-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden min-w-0 flex-1 px-6 sm:block", children }) }),
-          /* @__PURE__ */ jsxRuntime.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 = react.useRef(null);
-  const closeMobile = react.useCallback(() => onOpenChange?.(false), [onOpenChange]);
-  useDrawerBehavior(isOpen && isMobile, closeMobile, mobileRef);
-  if (!isOpen) return null;
-  if (isMobile) {
-    return /* @__PURE__ */ jsxRuntime.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: ui.cn("fixed inset-0 z-40 flex flex-col bg-background", className),
-        children: [
-          onOpenChange && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-5" })
-            }
-          ),
-          children
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "aside",
-    {
-      "aria-label": label,
-      "data-slot": "shell-dock",
-      "data-state": "open",
-      "data-testid": testId,
-      style: { width },
-      className: ui.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__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "page-container",
-      className: ui.cn(
-        "bg-background pb-safe",
-        minScreen ? "min-h-screen" : "h-full min-h-0",
-        className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: ui.cn(
-            "flex h-full w-full flex-col pb-safe",
-            padding,
-            !wide && ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { className: "size-5" })
-    }
-  );
-}
 var DEFAULT_SIDEBAR_LABELS = {
   mainNavigation: "Main navigation",
   hideSidebar: "Hide sidebar",
@@ -372,7 +117,7 @@ function SidebarRoot({
   const mergedLabels = react.useMemo(() => ({ ...DEFAULT_SIDEBAR_LABELS, ...labels }), [labels]);
   const drawerRef = react.useRef(null);
   const isDrawer = mode === "drawer";
-  useDrawerBehavior(isDrawer, onBackdropClick ?? noop, drawerRef);
+  chunkKHX2BX3S_cjs.useDrawerBehavior(isDrawer, onBackdropClick ?? noop, drawerRef);
   const ariaLabel = ariaLabelProp ?? mergedLabels.mainNavigation;
   const contextValue = react.useMemo(() => ({ expanded, labels: mergedLabels }), [expanded, mergedLabels]);
   const navBase = "group/sidebar bg-sidebar border-r border-border text-foreground flex flex-col h-full overflow-y-auto overflow-x-hidden pb-safe pt-3 transition-all duration-300 ease-in-out";
@@ -488,7 +233,7 @@ function SidebarRoot({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(chunkSCFYPAG6_cjs.BlocksTooltipProvider, { children: body }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(chunkKHX2BX3S_cjs.BlocksTooltipProvider, { children: body }) });
 }
 function SidebarHeader({ children, className, "data-testid": testId }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -811,7 +556,7 @@ function SidebarRowAction({
     "text-muted-foreground hover:bg-muted hover:text-foreground",
     rowHovered ? "opacity-100" : "opacity-70"
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkSCFYPAG6_cjs.BlocksTooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Tooltip, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkKHX2BX3S_cjs.BlocksTooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Tooltip, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipTrigger, { asChild: true, onFocusCapture: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -1409,30 +1154,6 @@ function ActionCluster({
     }
   );
 }
-function ToolButton({
-  onClick,
-  label,
-  active = false,
-  "data-testid": testId,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      type: "button",
-      onClick,
-      title: label,
-      "aria-label": label,
-      "data-slot": "tool-button",
-      "data-testid": testId,
-      className: ui.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: lucideReact.Loader2, spin: true },
   success: { className: "bg-green-bg text-green-text", Icon: lucideReact.CheckCircle2 },
@@ -1794,6 +1515,62 @@ 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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "split-layout",
+      "data-testid": testId,
+      className: ui.cn("flex flex-col gap-6 @3xl:flex-row @3xl:items-start", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "split-primary",
+            className: ui.cn(
+              "min-w-0 @3xl:flex-1",
+              secondaryFirstWhenStacked && "order-2",
+              secondaryAtStart ? "@3xl:order-2" : "@3xl:order-1",
+              primaryClassName
+            ),
+            children: primary
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "split-secondary",
+            className: ui.cn(
+              "min-w-0 @3xl:shrink-0",
+              SECONDARY_WIDTH[secondarySize],
+              secondaryFirstWhenStacked && "order-1",
+              secondaryAtStart ? "@3xl:order-1" : "@3xl:order-2",
+              secondaryClassName
+            ),
+            children: secondary
+          }
+        )
+      ]
+    }
+  );
+}
 
 Object.defineProperty(exports, "UserMenu", {
   enumerable: true,
@@ -1810,11 +1587,8 @@ exports.AskTrigger = AskTrigger;
 exports.DEFAULT_ASK_FIELD_LABELS = DEFAULT_ASK_FIELD_LABELS;
 exports.DEFAULT_MOBILE_BARS_LABELS = DEFAULT_MOBILE_BARS_LABELS;
 exports.DEFAULT_OFFLINE_PILL_LABELS = DEFAULT_OFFLINE_PILL_LABELS;
-exports.DEFAULT_OVERLAY_ZONE_ID = DEFAULT_OVERLAY_ZONE_ID;
-exports.DEFAULT_PAGE_CONTAINER_PADDING = DEFAULT_PAGE_CONTAINER_PADDING;
 exports.DEFAULT_REMOTE_CONTROL_PILL_LABELS = DEFAULT_REMOTE_CONTROL_PILL_LABELS;
 exports.DEFAULT_SIDEBAR_LABELS = DEFAULT_SIDEBAR_LABELS;
-exports.DEFAULT_SIDEBAR_TOGGLE_BUTTON_LABELS = DEFAULT_SIDEBAR_TOGGLE_BUTTON_LABELS;
 exports.DEFAULT_TIP_CARD_LABELS = DEFAULT_TIP_CARD_LABELS;
 exports.DEFAULT_WORKSPACE_KIND_LABELS = DEFAULT_WORKSPACE_KIND_LABELS;
 exports.DEFAULT_WORKSPACE_SWITCHER_LABELS = DEFAULT_WORKSPACE_SWITCHER_LABELS;
@@ -1822,25 +1596,20 @@ exports.InfoBar = InfoBar;
 exports.MobileAppBar = MobileAppBar;
 exports.MobileTabBar = MobileTabBar;
 exports.OfflinePill = OfflinePill;
-exports.PageContainer = PageContainer;
 exports.RemoteControlPill = RemoteControlPill;
-exports.Shell = Shell;
 exports.Sidebar = Sidebar;
 exports.SidebarBadgeRow = SidebarBadgeRow;
 exports.SidebarRowAction = SidebarRowAction;
 exports.SidebarRowHoverContext = SidebarRowHoverContext;
-exports.SidebarToggleButton = SidebarToggleButton;
+exports.SplitLayout = SplitLayout;
 exports.StatusRow = StatusRow;
 exports.TipCard = TipCard;
-exports.ToolButton = ToolButton;
 exports.WorkspaceIdentity = WorkspaceIdentity;
 exports.WorkspaceSwitcher = WorkspaceSwitcher;
 exports.resolveSidebarLayout = resolveSidebarLayout;
-exports.useDrawerBehavior = useDrawerBehavior;
-exports.useOverlayZoneId = useOverlayZoneId;
 exports.useSidebarContext = useSidebarContext;
 exports.useSidebarSettle = useSidebarSettle;
 exports.workspaceKindColor = workspaceKindColor;
 exports.workspaceKindMeta = workspaceKindMeta;
-//# sourceMappingURL=chunk-2K33YGM6.cjs.map
-//# sourceMappingURL=chunk-2K33YGM6.cjs.map
+//# sourceMappingURL=chunk-DN3NFNIA.cjs.map
+//# sourceMappingURL=chunk-DN3NFNIA.cjs.map