@arbidocs/blocks 0.4.140 → 0.4.142

package/dist/chunk-RLWIUUQ5.js

@@ -0,0 +1,23 @@
+"use client";
+import { useState, useRef, useCallback } from 'react';
+
+// src/lib/useControllableState.ts
+function useControllableState(value, defaultValue, onChange) {
+  const [inner, setInner] = useState(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : inner;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const set = useCallback(
+    (next) => {
+      if (!isControlled) setInner(next);
+      onChangeRef.current?.(next);
+    },
+    [isControlled]
+  );
+  return [current, set];
+}
+
+export { useControllableState };
+//# sourceMappingURL=chunk-RLWIUUQ5.js.map
+//# sourceMappingURL=chunk-RLWIUUQ5.js.map

package/dist/chunk-RLWIUUQ5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/useControllableState.ts"],"names":[],"mappings":";;;AAMO,SAAS,oBAAA,CACd,KAAA,EACA,YAAA,EACA,QAAA,EACwB;AACxB,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAY,YAAY,CAAA;AAClD,EAAA,MAAM,eAAe,KAAA,KAAU,MAAA;AAC/B,EAAA,MAAM,OAAA,GAAU,eAAe,KAAA,GAAQ,KAAA;AACvC,EAAA,MAAM,WAAA,GAAc,OAAO,QAAQ,CAAA;AACnC,EAAA,WAAA,CAAY,OAAA,GAAU,QAAA;AACtB,EAAA,MAAM,GAAA,GAAM,WAAA;AAAA,IACV,CAAC,IAAA,KAAY;AACX,MAAA,IAAI,CAAC,YAAA,EAAc,QAAA,CAAS,IAAI,CAAA;AAChC,MAAA,WAAA,CAAY,UAAU,IAAI,CAAA;AAAA,IAC5B,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AACA,EAAA,OAAO,CAAC,SAAS,GAAG,CAAA;AACtB","file":"chunk-RLWIUUQ5.js","sourcesContent":["import { useCallback, useRef, useState } from 'react'\n\n/**\n * State that is controlled when `value` is passed and uncontrolled (seeded by `defaultValue`)\n * otherwise. `onChange` fires in both modes.\n */\nexport function useControllableState<T>(\n  value: T | undefined,\n  defaultValue: T,\n  onChange?: (next: T) => void\n): [T, (next: T) => void] {\n  const [inner, setInner] = useState<T>(defaultValue)\n  const isControlled = value !== undefined\n  const current = isControlled ? value : inner\n  const onChangeRef = useRef(onChange)\n  onChangeRef.current = onChange\n  const set = useCallback(\n    (next: T) => {\n      if (!isControlled) setInner(next)\n      onChangeRef.current?.(next)\n    },\n    [isControlled]\n  )\n  return [current, set]\n}\n"]}

package/dist/{chunk-ECERC6TI.js → chunk-VHJHY7TT.js}

@@ -1,6 +1,6 @@
 "use client";
-import { ModalScaffold } from './chunk-TX2ZICS7.js';
 import { testIdOr } from './chunk-7F6CBP3Z.js';
+import { ModalScaffold } from './chunk-TX2ZICS7.js';
 import { useMemo, useRef } from 'react';
 import { AlertTriangle } from 'lucide-react';
 import { Button } from '@arbidocs/react/ui';
@@ -73,5 +73,5 @@ function ConfirmDialog({
 }
 
 export { ConfirmDialog, DEFAULT_CONFIRM_DIALOG_LABELS };
-//# sourceMappingURL=chunk-ECERC6TI.js.map
-//# sourceMappingURL=chunk-ECERC6TI.js.map
+//# sourceMappingURL=chunk-VHJHY7TT.js.map
+//# sourceMappingURL=chunk-VHJHY7TT.js.map

package/dist/{chunk-ECERC6TI.js.map → chunk-VHJHY7TT.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/settings/ConfirmDialog.tsx"],"names":[],"mappings":";;;;;;;AAaO,IAAM,6BAAA,GAAqD;AAAA,EAChE,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ,QAAA;AAAA,EACR,UAAA,EAAY;AACd;AAyBO,SAAS,aAAA,CAAc;AAAA,EAC5B,MAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA,GAAU,aAAA;AAAA,EACV,SAAA,GAAY,KAAA;AAAA,EACZ,MAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAA,GAAI,OAAA,CAAQ,OAAO,EAAE,GAAG,6BAAA,EAA+B,GAAG,MAAA,EAAO,CAAA,EAAI,CAAC,MAAM,CAAC,CAAA;AACnF,EAAA,MAAM,SAAA,GAAY,OAA0B,IAAI,CAAA;AAChD,EAAA,uBACE,IAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,MAAA;AAAA,MACN,YAAA,EAAc,CAAC,IAAA,KAAS;AACtB,QAAA,IAAI,CAAC,MAAM,OAAA,EAAQ;AAAA,MACrB,CAAA;AAAA,MACA,IAAA,EAAK,aAAA;AAAA,MACL,eAAA,EAAiB,SAAA;AAAA,MACjB,KAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA,EAAe,IAAA;AAAA,MACf,IAAA,EACE,YAAY,aAAA,mBACV,GAAA,CAAC,iBAAc,SAAA,EAAU,uBAAA,EAAwB,aAAA,EAAY,MAAA,EAAO,CAAA,GAClE,IAAA;AAAA,MAEN,QAAQ,QAAA,CAAS,MAAA,EAAQ,EAAE,MAAA,EAAQ,sBAAsB,CAAA;AAAA,MAExD,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,IAAA,CAAC,aAAA,CAAc,MAAA,EAAd,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,SAAA;AAAA,cACL,OAAA,EAAQ,SAAA;AAAA,cACR,OAAA,EAAS,MAAM,OAAA,EAAQ;AAAA,cACvB,QAAA,EAAU,SAAA;AAAA,cACV,eAAa,QAAA,CAAS,OAAA,EAAS,QAAQ,EAAE,MAAA,EAAQ,oCAAoC,CAAA;AAAA,cAEpF,wBAAc,CAAA,CAAE;AAAA;AAAA,WACnB;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,OAAA;AAAA,cACA,OAAA,EAAS,SAAA;AAAA,cACT,QAAA,EAAU,SAAA;AAAA,cACV,eAAa,QAAA,CAAS,OAAA,EAAS,SAAS,EAAE,MAAA,EAAQ,qCAAqC,CAAA;AAAA,cAEtF,QAAA,EAAA,SAAA,GAAY,CAAA,CAAE,UAAA,GAAc,WAAA,IAAe,CAAA,CAAE;AAAA;AAAA;AAChD,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ","file":"chunk-ECERC6TI.js","sourcesContent":["import { useMemo, useRef, type ReactNode } from 'react'\nimport { AlertTriangle } from 'lucide-react'\nimport { Button } from '@arbidocs/react/ui'\nimport { testIdOr } from '../chat/test-id'\nimport { ModalScaffold } from './ModalScaffold'\n\n/** Every fixed string of the confirm dialog. `confirmText` / `cancelText` props win. */\nexport interface ConfirmDialogLabels {\n  confirm: string\n  cancel: string\n  pleaseWait: string\n}\n\nexport const DEFAULT_CONFIRM_DIALOG_LABELS: ConfirmDialogLabels = {\n  confirm: 'Confirm',\n  cancel: 'Cancel',\n  pleaseWait: 'Please wait...',\n}\n\nexport interface ConfirmDialogProps {\n  labels?: Partial<ConfirmDialogLabels>\n  isOpen: boolean\n  onClose: () => void\n  onConfirm: () => void\n  title: string\n  description: string\n  confirmText?: string\n  cancelText?: string\n  variant?: 'destructive' | 'default'\n  isLoading?: boolean\n  /** Dialog test id (default `confirmation-modal`). */\n  testId?: string\n  /** Button ids; defaults are the current ids. */\n  testIds?: Partial<Record<'cancel' | 'confirm', string>>\n  /** Extra content between the description and the buttons (e.g. an opt-in checkbox). */\n  children?: ReactNode\n}\n\n/**\n * Declarative yes/no confirmation with a loading state. An `alertdialog`: initial focus is on\n * Cancel (the safe action) and clicking outside does not dismiss it; Escape and Cancel do.\n */\nexport function ConfirmDialog({\n  isOpen,\n  onClose,\n  onConfirm,\n  title,\n  description,\n  confirmText,\n  cancelText,\n  variant = 'destructive',\n  isLoading = false,\n  labels,\n  testId,\n  testIds,\n  children,\n}: ConfirmDialogProps) {\n  const l = useMemo(() => ({ ...DEFAULT_CONFIRM_DIALOG_LABELS, ...labels }), [labels])\n  const cancelRef = useRef<HTMLButtonElement>(null)\n  return (\n    <ModalScaffold\n      open={isOpen}\n      onOpenChange={(next) => {\n        if (!next) onClose()\n      }}\n      role=\"alertdialog\"\n      initialFocusRef={cancelRef}\n      title={title}\n      description={description}\n      showDescription\n      icon={\n        variant === 'destructive' ? (\n          <AlertTriangle className=\"h-5 w-5 text-red-text\" aria-hidden=\"true\" />\n        ) : null\n      }\n      testId={testIdOr(testId, { testId: 'confirmation-modal' })}\n    >\n      {children}\n      <ModalScaffold.Footer>\n        <Button\n          ref={cancelRef}\n          variant=\"outline\"\n          onClick={() => onClose()}\n          disabled={isLoading}\n          data-testid={testIdOr(testIds?.cancel, { testId: 'confirmation-modal-cancel-button' })}\n        >\n          {cancelText ?? l.cancel}\n        </Button>\n        <Button\n          variant={variant}\n          onClick={onConfirm}\n          disabled={isLoading}\n          data-testid={testIdOr(testIds?.confirm, { testId: 'confirmation-modal-confirm-button' })}\n        >\n          {isLoading ? l.pleaseWait : (confirmText ?? l.confirm)}\n        </Button>\n      </ModalScaffold.Footer>\n    </ModalScaffold>\n  )\n}\n"]}
+{"version":3,"sources":["../src/settings/ConfirmDialog.tsx"],"names":[],"mappings":";;;;;;;AAaO,IAAM,6BAAA,GAAqD;AAAA,EAChE,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ,QAAA;AAAA,EACR,UAAA,EAAY;AACd;AAyBO,SAAS,aAAA,CAAc;AAAA,EAC5B,MAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA,GAAU,aAAA;AAAA,EACV,SAAA,GAAY,KAAA;AAAA,EACZ,MAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAA,GAAI,OAAA,CAAQ,OAAO,EAAE,GAAG,6BAAA,EAA+B,GAAG,MAAA,EAAO,CAAA,EAAI,CAAC,MAAM,CAAC,CAAA;AACnF,EAAA,MAAM,SAAA,GAAY,OAA0B,IAAI,CAAA;AAChD,EAAA,uBACE,IAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,MAAA;AAAA,MACN,YAAA,EAAc,CAAC,IAAA,KAAS;AACtB,QAAA,IAAI,CAAC,MAAM,OAAA,EAAQ;AAAA,MACrB,CAAA;AAAA,MACA,IAAA,EAAK,aAAA;AAAA,MACL,eAAA,EAAiB,SAAA;AAAA,MACjB,KAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA,EAAe,IAAA;AAAA,MACf,IAAA,EACE,YAAY,aAAA,mBACV,GAAA,CAAC,iBAAc,SAAA,EAAU,uBAAA,EAAwB,aAAA,EAAY,MAAA,EAAO,CAAA,GAClE,IAAA;AAAA,MAEN,QAAQ,QAAA,CAAS,MAAA,EAAQ,EAAE,MAAA,EAAQ,sBAAsB,CAAA;AAAA,MAExD,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,IAAA,CAAC,aAAA,CAAc,MAAA,EAAd,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,SAAA;AAAA,cACL,OAAA,EAAQ,SAAA;AAAA,cACR,OAAA,EAAS,MAAM,OAAA,EAAQ;AAAA,cACvB,QAAA,EAAU,SAAA;AAAA,cACV,eAAa,QAAA,CAAS,OAAA,EAAS,QAAQ,EAAE,MAAA,EAAQ,oCAAoC,CAAA;AAAA,cAEpF,wBAAc,CAAA,CAAE;AAAA;AAAA,WACnB;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,OAAA;AAAA,cACA,OAAA,EAAS,SAAA;AAAA,cACT,QAAA,EAAU,SAAA;AAAA,cACV,eAAa,QAAA,CAAS,OAAA,EAAS,SAAS,EAAE,MAAA,EAAQ,qCAAqC,CAAA;AAAA,cAEtF,QAAA,EAAA,SAAA,GAAY,CAAA,CAAE,UAAA,GAAc,WAAA,IAAe,CAAA,CAAE;AAAA;AAAA;AAChD,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ","file":"chunk-VHJHY7TT.js","sourcesContent":["import { useMemo, useRef, type ReactNode } from 'react'\nimport { AlertTriangle } from 'lucide-react'\nimport { Button } from '@arbidocs/react/ui'\nimport { testIdOr } from '../chat/test-id'\nimport { ModalScaffold } from './ModalScaffold'\n\n/** Every fixed string of the confirm dialog. `confirmText` / `cancelText` props win. */\nexport interface ConfirmDialogLabels {\n  confirm: string\n  cancel: string\n  pleaseWait: string\n}\n\nexport const DEFAULT_CONFIRM_DIALOG_LABELS: ConfirmDialogLabels = {\n  confirm: 'Confirm',\n  cancel: 'Cancel',\n  pleaseWait: 'Please wait...',\n}\n\nexport interface ConfirmDialogProps {\n  labels?: Partial<ConfirmDialogLabels>\n  isOpen: boolean\n  onClose: () => void\n  onConfirm: () => void\n  title: string\n  description: string\n  confirmText?: string\n  cancelText?: string\n  variant?: 'destructive' | 'default'\n  isLoading?: boolean\n  /** Dialog test id (default `confirmation-modal`). */\n  testId?: string\n  /** Button ids; defaults are the current ids. */\n  testIds?: Partial<Record<'cancel' | 'confirm', string>>\n  /** Extra content between the description and the buttons (e.g. an opt-in checkbox). */\n  children?: ReactNode\n}\n\n/**\n * Declarative yes/no confirmation with a loading state. An `alertdialog`: initial focus is on\n * Cancel (the safe action) and clicking outside does not dismiss it; Escape and Cancel do.\n */\nexport function ConfirmDialog({\n  isOpen,\n  onClose,\n  onConfirm,\n  title,\n  description,\n  confirmText,\n  cancelText,\n  variant = 'destructive',\n  isLoading = false,\n  labels,\n  testId,\n  testIds,\n  children,\n}: ConfirmDialogProps) {\n  const l = useMemo(() => ({ ...DEFAULT_CONFIRM_DIALOG_LABELS, ...labels }), [labels])\n  const cancelRef = useRef<HTMLButtonElement>(null)\n  return (\n    <ModalScaffold\n      open={isOpen}\n      onOpenChange={(next) => {\n        if (!next) onClose()\n      }}\n      role=\"alertdialog\"\n      initialFocusRef={cancelRef}\n      title={title}\n      description={description}\n      showDescription\n      icon={\n        variant === 'destructive' ? (\n          <AlertTriangle className=\"h-5 w-5 text-red-text\" aria-hidden=\"true\" />\n        ) : null\n      }\n      testId={testIdOr(testId, { testId: 'confirmation-modal' })}\n    >\n      {children}\n      <ModalScaffold.Footer>\n        <Button\n          ref={cancelRef}\n          variant=\"outline\"\n          onClick={() => onClose()}\n          disabled={isLoading}\n          data-testid={testIdOr(testIds?.cancel, { testId: 'confirmation-modal-cancel-button' })}\n        >\n          {cancelText ?? l.cancel}\n        </Button>\n        <Button\n          variant={variant}\n          onClick={onConfirm}\n          disabled={isLoading}\n          data-testid={testIdOr(testIds?.confirm, { testId: 'confirmation-modal-confirm-button' })}\n        >\n          {isLoading ? l.pleaseWait : (confirmText ?? l.confirm)}\n        </Button>\n      </ModalScaffold.Footer>\n    </ModalScaffold>\n  )\n}\n"]}

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

@@ -1,8 +1,10 @@
 "use client";
 'use strict';
 
+var chunkAHDJXIUB_cjs = require('./chunk-AHDJXIUB.cjs');
 var chunkR26BK7YL_cjs = require('./chunk-R26BK7YL.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
 }) {
@@ -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;
@@ -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",
@@ -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-YFY3TQ6Q.cjs.map
+//# sourceMappingURL=chunk-YFY3TQ6Q.cjs.map