@arbidocs/blocks 0.4.141 → 0.4.142

package/dist/{chunk-O6W6RW3B.js → chunk-I7WG3JRD.js}

@@ -1,6 +1,8 @@
 "use client";
+import { useControllableState } from './chunk-RLWIUUQ5.js';
 import { ActionLink } from './chunk-444XKG46.js';
 import { useDrawerBehavior, BlocksTooltipProvider, useShellBottomInset } from './chunk-7XF5SFJ2.js';
+import { useIsPhone, useIsNarrow, useIsTouchScreen } from './chunk-SLSBJRWW.js';
 import { testIdOr, prefixedTestId } from './chunk-7F6CBP3Z.js';
 import { createContext, forwardRef, useContext, useMemo, useRef, useState, useEffect, useCallback, useId } 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';
@@ -101,7 +103,6 @@ function SidebarRoot({
   mode,
   expanded,
   isHovering = false,
-  isPeeking = false,
   onBackdropClick,
   hasRailBackdrop = false,
   onMouseEnter,
@@ -165,18 +166,16 @@ function SidebarRoot({
       "nav",
       {
         ...common,
-        className: cn(navBase, "absolute left-0 top-0 z-[45]", isPeeking && "shadow-xl", className),
+        className: cn(navBase, "absolute left-0 top-0 z-[45]", className),
         style: {
-          width: isPeeking ? EXPANDED_WIDTH : "0px",
+          width: "0px",
           minWidth: 0,
-          paddingLeft: isPeeking ? "0.75rem" : 0,
-          paddingRight: isPeeking ? "0.75rem" : 0,
-          borderRightWidth: isPeeking ? void 0 : 0,
-          pointerEvents: isPeeking ? "auto" : "none"
+          paddingLeft: 0,
+          paddingRight: 0,
+          borderRightWidth: 0,
+          pointerEvents: "none"
         },
-        inert: !isPeeking,
-        onMouseEnter,
-        onMouseLeave,
+        inert: true,
         children
       }
     );
@@ -245,7 +244,13 @@ function SidebarHeader({ children, className, "data-testid": testId }) {
     }
   );
 }
-function SidebarNav({ items, children, className, "data-testid": testId }) {
+function SidebarNav({
+  items,
+  sections,
+  children,
+  className,
+  "data-testid": testId
+}) {
   const { expanded } = useSidebarContext();
   return /* @__PURE__ */ jsxs(
     "div",
@@ -255,6 +260,16 @@ function SidebarNav({ items, children, className, "data-testid": testId }) {
       className: cn("flex flex-shrink-0 flex-col gap-0.5", !expanded && "items-center", className),
       children: [
         items?.map((item) => /* @__PURE__ */ jsx(SidebarNavItem, { ...item }, item.id)),
+        sections?.map((section) => /* @__PURE__ */ jsx(
+          SidebarGroup,
+          {
+            label: section.label,
+            ariaLabel: section.ariaLabel,
+            "data-testid": section.testId,
+            children: section.items.map((item) => /* @__PURE__ */ jsx(SidebarNavItem, { ...item }, item.id))
+          },
+          section.id
+        )),
         children
       ]
     }
@@ -319,6 +334,11 @@ function SidebarFooter({ children, className, "data-testid": testId }) {
     }
   );
 }
+var INDICATOR_TONES = {
+  progress: "bg-primary",
+  error: "bg-red-solid",
+  attention: "bg-yellow-solid"
+};
 function SidebarNavItem({
   label,
   icon,
@@ -330,6 +350,7 @@ function SidebarNavItem({
   testId,
   disabled = false,
   trailing,
+  indicator,
   className,
   tooltip
 }) {
@@ -353,7 +374,20 @@ function SidebarNavItem({
           disabled && "pointer-events-none cursor-not-allowed opacity-30",
           className
         ),
-        children: /* @__PURE__ */ jsx("div", { className: "flex size-5 items-center justify-center", children: icon })
+        children: /* @__PURE__ */ jsx("div", { className: "flex size-5 items-center justify-center", children: indicator ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          icon,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "sidebar-nav-indicator",
+              "data-tone": indicator,
+              className: cn(
+                "absolute -right-1 -top-1 size-2.5 rounded-full border border-sidebar",
+                INDICATOR_TONES[indicator]
+              )
+            }
+          )
+        ] }) : icon })
       }
     );
     if (!tip) return railButton;
@@ -535,6 +569,163 @@ var Sidebar = {
   BadgeRow: SidebarBadgeRow,
   DrawerHeader: SidebarDrawerHeader
 };
+function ShellSidebar({
+  controller,
+  drawerLogo,
+  drawerCloseTestId,
+  header,
+  items,
+  sections,
+  navClassName,
+  tips,
+  footer,
+  ...rootProps
+}) {
+  if (controller.layout.hidden) return null;
+  return /* @__PURE__ */ jsxs(Sidebar.Root, { ...controller.rootProps, ...rootProps, children: [
+    controller.isDrawer && drawerLogo && /* @__PURE__ */ jsx(
+      Sidebar.DrawerHeader,
+      {
+        logo: drawerLogo,
+        onClose: controller.closeDrawer,
+        "data-testid": drawerCloseTestId
+      }
+    ),
+    header && /* @__PURE__ */ jsx(Sidebar.Header, { children: header }),
+    /* @__PURE__ */ jsx(Sidebar.Nav, { items, sections, className: navClassName }),
+    (tips || footer) && /* @__PURE__ */ jsxs(Sidebar.Footer, { children: [
+      controller.tipsVisible && tips,
+      footer
+    ] })
+  ] });
+}
+function useCloseOnEscape(isActive, onClose) {
+  const onCloseRef = useRef(onClose);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  });
+  useEffect(() => {
+    if (!isActive) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape" && !e.defaultPrevented) onCloseRef.current();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [isActive]);
+}
+function resolveSidebarLayout(input) {
+  const { isSmallScreen, isDrawerRequested, isCollapsed, isPinned, isHovering } = input;
+  const canPin = isPinned && !isSmallScreen && !input.isNarrow;
+  const drawerOpen = isSmallScreen && isDrawerRequested;
+  const effectiveCollapsed = isCollapsed || isSmallScreen && !drawerOpen;
+  const hovering = isHovering && !isSmallScreen;
+  let mode;
+  if (drawerOpen) mode = "drawer";
+  else if (effectiveCollapsed) mode = "collapsed";
+  else if (canPin) mode = "pinned";
+  else mode = "rail";
+  const expanded = drawerOpen || !effectiveCollapsed && (canPin || hovering);
+  return { mode, expanded, hidden: isSmallScreen && !drawerOpen, hovering };
+}
+function useSidebarSettle(expanded, settleMs = 300) {
+  const [labelsExpanded, setLabelsExpanded] = useState(expanded);
+  const [tipsVisible, setTipsVisible] = useState(expanded);
+  const labelsTimer = useRef(null);
+  const tipsTimer = useRef(null);
+  useEffect(() => {
+    if (labelsTimer.current) clearTimeout(labelsTimer.current);
+    if (expanded) setLabelsExpanded(true);
+    else labelsTimer.current = setTimeout(() => setLabelsExpanded(false), settleMs);
+    return () => {
+      if (labelsTimer.current) clearTimeout(labelsTimer.current);
+    };
+  }, [expanded, settleMs]);
+  useEffect(() => {
+    if (tipsTimer.current) clearTimeout(tipsTimer.current);
+    if (expanded) tipsTimer.current = setTimeout(() => setTipsVisible(true), settleMs);
+    else setTipsVisible(false);
+    return () => {
+      if (tipsTimer.current) clearTimeout(tipsTimer.current);
+    };
+  }, [expanded, settleMs]);
+  return { labelsExpanded, tipsVisible };
+}
+
+// src/shell/use-sidebar-controller.ts
+var isMenuOpen = () => typeof document !== "undefined" && document.querySelector('[role="menu"][data-state="open"]') !== null;
+function useSidebarController(options = {}) {
+  const [storedPinned, setPinned] = useControllableState(
+    options.isPinned,
+    options.defaultPinned ?? true,
+    options.onPinnedChange
+  );
+  const [isHovering, setHovering] = useControllableState(
+    options.isHovering,
+    false,
+    options.onHoveringChange
+  );
+  const [isDrawerOpen, setDrawerOpen] = useControllableState(
+    options.isDrawerOpen,
+    false,
+    options.onDrawerOpenChange
+  );
+  const isSmallScreen = useIsPhone();
+  const isNarrow = useIsNarrow() || !!options.forceRail;
+  const isTouch = useIsTouchScreen();
+  const layout = resolveSidebarLayout({
+    isSmallScreen,
+    isDrawerRequested: isDrawerOpen,
+    isCollapsed: false,
+    isPinned: storedPinned,
+    isHovering,
+    isNarrow
+  });
+  const isDrawer = layout.mode === "drawer";
+  const { labelsExpanded, tipsVisible } = useSidebarSettle(layout.expanded);
+  const isPointerOver = useRef(false);
+  const closeDrawer = useCallback(() => setDrawerOpen(false), [setDrawerOpen]);
+  const openDrawer = useCallback(() => setDrawerOpen(true), [setDrawerOpen]);
+  useCloseOnEscape(layout.mode === "rail" && layout.hovering, () => setHovering(false));
+  useEffect(() => {
+    if (isDrawerOpen && !isSmallScreen) setDrawerOpen(false);
+  }, [isDrawerOpen, isSmallScreen, setDrawerOpen]);
+  const onMouseEnter = () => {
+    if (isTouch) return;
+    isPointerOver.current = true;
+    if (!isSmallScreen && !isNarrow && !isMenuOpen()) setHovering(true);
+  };
+  const onMouseLeave = () => {
+    if (isTouch) return;
+    isPointerOver.current = false;
+    if (!isSmallScreen) setHovering(false);
+  };
+  return {
+    layout,
+    expanded: labelsExpanded,
+    tipsVisible,
+    isDrawer,
+    isSmallScreen,
+    isNarrow,
+    isPinned: storedPinned && !isNarrow,
+    rootProps: {
+      mode: layout.mode,
+      expanded: labelsExpanded,
+      isHovering: layout.hovering,
+      onBackdropClick: isDrawer ? closeDrawer : () => setHovering(false),
+      hasRailBackdrop: isTouch,
+      onMouseEnter,
+      onMouseLeave
+    },
+    openDrawer,
+    closeDrawer,
+    togglePin: () => isNarrow ? setHovering(!isHovering) : setPinned(!storedPinned),
+    expand: () => isNarrow ? setHovering(true) : setPinned(true),
+    afterNavigate: () => {
+      if (!isPointerOver.current && !storedPinned) setHovering(false);
+      if (isDrawer) closeDrawer();
+    }
+  };
+}
 var PULSE_STYLES = {
   active: "animate-pulse-attention text-primary",
   success: "animate-pulse-attention text-green-text",
@@ -1496,44 +1687,6 @@ function TipCard({
     }
   );
 }
-function resolveSidebarLayout(input) {
-  const { isSmallScreen, isDrawerRequested, isCollapsed, isPinned, isHovering } = input;
-  const isPeeking = input.isPeeking ?? false;
-  const canPin = isPinned && !isSmallScreen && !input.isNarrow;
-  const drawerOpen = isSmallScreen && isDrawerRequested;
-  const effectiveCollapsed = isCollapsed || isSmallScreen && !drawerOpen;
-  const hovering = isHovering && !isSmallScreen;
-  let mode;
-  if (drawerOpen) mode = "drawer";
-  else if (effectiveCollapsed) mode = "collapsed";
-  else if (canPin) mode = "pinned";
-  else mode = "rail";
-  const expanded = drawerOpen || canPin || !isCollapsed && isHovering || isCollapsed && isPeeking;
-  return { mode, expanded, hidden: isSmallScreen && !drawerOpen, hovering };
-}
-function useSidebarSettle(expanded, settleMs = 300) {
-  const [labelsExpanded, setLabelsExpanded] = useState(expanded);
-  const [tipsVisible, setTipsVisible] = useState(expanded);
-  const labelsTimer = useRef(null);
-  const tipsTimer = useRef(null);
-  useEffect(() => {
-    if (labelsTimer.current) clearTimeout(labelsTimer.current);
-    if (expanded) setLabelsExpanded(true);
-    else labelsTimer.current = setTimeout(() => setLabelsExpanded(false), settleMs);
-    return () => {
-      if (labelsTimer.current) clearTimeout(labelsTimer.current);
-    };
-  }, [expanded, settleMs]);
-  useEffect(() => {
-    if (tipsTimer.current) clearTimeout(tipsTimer.current);
-    if (expanded) tipsTimer.current = setTimeout(() => setTipsVisible(true), settleMs);
-    else setTipsVisible(false);
-    return () => {
-      if (tipsTimer.current) clearTimeout(tipsTimer.current);
-    };
-  }, [expanded, settleMs]);
-  return { labelsExpanded, tipsVisible };
-}
 var VARIANT_TONE = {
   info: "bg-blue-bg text-primary border-blue-border",
   warning: "bg-yellow-bg text-yellow-text border-yellow-border",
@@ -1661,6 +1814,6 @@ function SplitLayout({
   );
 }
 
-export { ActionCluster, 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_SIDEBAR_LABELS, DEFAULT_TIP_CARD_LABELS, INSTALL_PROMPT_DISMISSED_KEY, InfoBar, InstallPrompt, MobileAppBar, MobileTabBar, OfflinePill, RemoteControlPill, STATUS_ROW_BASE_CLASS, STATUS_ROW_TONES, Sidebar, SidebarBadgeRow, SidebarRowAction, SidebarRowHoverContext, SplitLayout, StatusBadge, StatusRow, TipCard, getInstallInstructions, initInstallPrompt, isIosDevice, promptAppInstall, resolveSidebarLayout, useInstallPrompt, useSidebarContext, useSidebarSettle };
-//# sourceMappingURL=chunk-O6W6RW3B.js.map
-//# sourceMappingURL=chunk-O6W6RW3B.js.map
+export { ActionCluster, 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_SIDEBAR_LABELS, DEFAULT_TIP_CARD_LABELS, INSTALL_PROMPT_DISMISSED_KEY, InfoBar, InstallPrompt, MobileAppBar, MobileTabBar, OfflinePill, RemoteControlPill, STATUS_ROW_BASE_CLASS, STATUS_ROW_TONES, ShellSidebar, Sidebar, SidebarBadgeRow, SidebarRowAction, SidebarRowHoverContext, SplitLayout, StatusBadge, StatusRow, TipCard, getInstallInstructions, initInstallPrompt, isIosDevice, promptAppInstall, resolveSidebarLayout, useCloseOnEscape, useInstallPrompt, useSidebarContext, useSidebarController, useSidebarSettle };
+//# sourceMappingURL=chunk-I7WG3JRD.js.map
+//# sourceMappingURL=chunk-I7WG3JRD.js.map