@arbidocs/blocks 0.4.141 → 0.4.143

package/dist/{chunk-GFRQG36Y.cjs → chunk-COCGRJLA.cjs}

@@ -1,8 +1,10 @@
 "use client";
 'use strict';
 
-var chunkR26BK7YL_cjs = require('./chunk-R26BK7YL.cjs');
+var chunkAHDJXIUB_cjs = require('./chunk-AHDJXIUB.cjs');
+var chunkDTROMMDX_cjs = require('./chunk-DTROMMDX.cjs');
 var chunkB6MVQCXW_cjs = require('./chunk-B6MVQCXW.cjs');
+var chunkFX3K6LNZ_cjs = require('./chunk-FX3K6LNZ.cjs');
 var chunkMHVNT4J3_cjs = require('./chunk-MHVNT4J3.cjs');
 var react = require('react');
 var lucideReact = require('lucide-react');
@@ -102,7 +104,6 @@ function SidebarRoot({
   mode,
   expanded,
   isHovering = false,
-  isPeeking = false,
   onBackdropClick,
   hasRailBackdrop = false,
   onMouseEnter,
@@ -166,18 +167,16 @@ function SidebarRoot({
       "nav",
       {
         ...common,
-        className: ui.cn(navBase, "absolute left-0 top-0 z-[45]", isPeeking && "shadow-xl", className),
+        className: ui.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
       }
     );
@@ -246,7 +245,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__ */ jsxRuntime.jsxs(
     "div",
@@ -256,6 +261,16 @@ function SidebarNav({ items, children, className, "data-testid": testId }) {
       className: ui.cn("flex flex-shrink-0 flex-col gap-0.5", !expanded && "items-center", className),
       children: [
         items?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SidebarNavItem, { ...item }, item.id)),
+        sections?.map((section) => /* @__PURE__ */ jsxRuntime.jsx(
+          SidebarGroup,
+          {
+            label: section.label,
+            ariaLabel: section.ariaLabel,
+            "data-testid": section.testId,
+            children: section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SidebarNavItem, { ...item }, item.id))
+          },
+          section.id
+        )),
         children
       ]
     }
@@ -320,6 +335,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,
@@ -331,6 +351,7 @@ function SidebarNavItem({
   testId,
   disabled = false,
   trailing,
+  indicator,
   className,
   tooltip
 }) {
@@ -339,7 +360,7 @@ function SidebarNavItem({
   const tip = expanded ? void 0 : tooltip ?? label;
   if (!expanded) {
     const railButton = /* @__PURE__ */ jsxRuntime.jsx(
-      chunkR26BK7YL_cjs.ActionLink,
+      chunkDTROMMDX_cjs.ActionLink,
       {
         href,
         onSelect,
@@ -354,7 +375,20 @@ function SidebarNavItem({
           disabled && "pointer-events-none cursor-not-allowed opacity-30",
           className
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-5 items-center justify-center", children: icon })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-5 items-center justify-center", children: indicator ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          icon,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-slot": "sidebar-nav-indicator",
+              "data-tone": indicator,
+              className: ui.cn(
+                "absolute -right-1 -top-1 size-2.5 rounded-full border border-sidebar",
+                INDICATOR_TONES[indicator]
+              )
+            }
+          )
+        ] }) : icon })
       }
     );
     if (!tip) return railButton;
@@ -384,7 +418,7 @@ function SidebarNavItem({
   );
   if (href && !disabled && !trailing) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      chunkR26BK7YL_cjs.ActionLink,
+      chunkDTROMMDX_cjs.ActionLink,
       {
         href,
         onSelect,
@@ -415,7 +449,7 @@ function SidebarNavItem({
         className: ui.cn(rowClass, "relative"),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkR26BK7YL_cjs.ActionLink,
+            chunkDTROMMDX_cjs.ActionLink,
             {
               href,
               onSelect,
@@ -536,6 +570,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__ */ jsxRuntime.jsxs(Sidebar.Root, { ...controller.rootProps, ...rootProps, children: [
+    controller.isDrawer && drawerLogo && /* @__PURE__ */ jsxRuntime.jsx(
+      Sidebar.DrawerHeader,
+      {
+        logo: drawerLogo,
+        onClose: controller.closeDrawer,
+        "data-testid": drawerCloseTestId
+      }
+    ),
+    header && /* @__PURE__ */ jsxRuntime.jsx(Sidebar.Header, { children: header }),
+    /* @__PURE__ */ jsxRuntime.jsx(Sidebar.Nav, { items, sections, className: navClassName }),
+    (tips || footer) && /* @__PURE__ */ jsxRuntime.jsxs(Sidebar.Footer, { children: [
+      controller.tipsVisible && tips,
+      footer
+    ] })
+  ] });
+}
+function useCloseOnEscape(isActive, onClose) {
+  const onCloseRef = react.useRef(onClose);
+  react.useEffect(() => {
+    onCloseRef.current = onClose;
+  });
+  react.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] = react.useState(expanded);
+  const [tipsVisible, setTipsVisible] = react.useState(expanded);
+  const labelsTimer = react.useRef(null);
+  const tipsTimer = react.useRef(null);
+  react.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]);
+  react.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] = chunkAHDJXIUB_cjs.useControllableState(
+    options.isPinned,
+    options.defaultPinned ?? true,
+    options.onPinnedChange
+  );
+  const [isHovering, setHovering] = chunkAHDJXIUB_cjs.useControllableState(
+    options.isHovering,
+    false,
+    options.onHoveringChange
+  );
+  const [isDrawerOpen, setDrawerOpen] = chunkAHDJXIUB_cjs.useControllableState(
+    options.isDrawerOpen,
+    false,
+    options.onDrawerOpenChange
+  );
+  const isSmallScreen = chunkFX3K6LNZ_cjs.useIsPhone();
+  const isNarrow = chunkFX3K6LNZ_cjs.useIsNarrow() || !!options.forceRail;
+  const isTouch = chunkFX3K6LNZ_cjs.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 = react.useRef(false);
+  const closeDrawer = react.useCallback(() => setDrawerOpen(false), [setDrawerOpen]);
+  const openDrawer = react.useCallback(() => setDrawerOpen(true), [setDrawerOpen]);
+  useCloseOnEscape(layout.mode === "rail" && layout.hovering, () => setHovering(false));
+  react.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",
@@ -861,7 +1052,7 @@ function MobileTabBar({
         className
       ),
       children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-        chunkR26BK7YL_cjs.ActionLink,
+        chunkDTROMMDX_cjs.ActionLink,
         {
           href: item.href,
           onSelect: item.onSelect,
@@ -1497,44 +1688,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] = react.useState(expanded);
-  const [tipsVisible, setTipsVisible] = react.useState(expanded);
-  const labelsTimer = react.useRef(null);
-  const tipsTimer = react.useRef(null);
-  react.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]);
-  react.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",
@@ -1690,6 +1843,7 @@ exports.OfflinePill = OfflinePill;
 exports.RemoteControlPill = RemoteControlPill;
 exports.STATUS_ROW_BASE_CLASS = STATUS_ROW_BASE_CLASS;
 exports.STATUS_ROW_TONES = STATUS_ROW_TONES;
+exports.ShellSidebar = ShellSidebar;
 exports.Sidebar = Sidebar;
 exports.SidebarBadgeRow = SidebarBadgeRow;
 exports.SidebarRowAction = SidebarRowAction;
@@ -1703,8 +1857,10 @@ exports.initInstallPrompt = initInstallPrompt;
 exports.isIosDevice = isIosDevice;
 exports.promptAppInstall = promptAppInstall;
 exports.resolveSidebarLayout = resolveSidebarLayout;
+exports.useCloseOnEscape = useCloseOnEscape;
 exports.useInstallPrompt = useInstallPrompt;
 exports.useSidebarContext = useSidebarContext;
+exports.useSidebarController = useSidebarController;
 exports.useSidebarSettle = useSidebarSettle;
-//# sourceMappingURL=chunk-GFRQG36Y.cjs.map
-//# sourceMappingURL=chunk-GFRQG36Y.cjs.map
+//# sourceMappingURL=chunk-COCGRJLA.cjs.map
+//# sourceMappingURL=chunk-COCGRJLA.cjs.map