@multiplatform.one/backoffice 7.34.3 → 7.35.0

package/dist/cjs/shell/BackofficeShell.cjs

@@ -50,9 +50,12 @@ var import_shortcuts = require("../chrome/shortcuts.cjs");
 var import_UserMenu = require("../chrome/UserMenu.cjs");
 var import_BackofficeProvider = require("../config/BackofficeProvider.cjs");
 var import_i18n = require("../i18n/index.cjs");
+var import_shellSidebarSlot = require("./shellSidebarSlot.cjs");
 var import_WorkspaceSidebar = require("./WorkspaceSidebar.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const ToastViewport = componentsBarrel.ToastViewport;
+const MenuGlyph = (0, import_components.themed)(import_react.ListIcon);
+const CloseGlyph = (0, import_components.themed)(import_react.XIcon);
 function useIsNarrow() {
   return (0, import_theme.useLayoutSizeClass)() === "compact";
 }
@@ -72,10 +75,44 @@ function ShellHairline({
     "data-testid": testId
   });
 }
+function StackedSidebarPanel({
+  panel
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [open, setOpen] = (0, import_react2.useState)(true);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    flex: open ? 1 : void 0,
+    flexShrink: open ? 1 : 0,
+    minHeight: 0,
+    width: "100%",
+    "data-testid": "backoffice-shell-page-panel",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ShellHairline, {
+      axis: "horizontal",
+      testId: "backoffice-shell-panel-rule"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      chromeless: true,
+      size: knobProps.sizeToken,
+      justifyContent: "flex-start",
+      icon: open ? import_react.CaretDownIcon : import_react.CaretRightIcon,
+      "aria-expanded": open,
+      onPress: () => setOpen(value => !value),
+      "data-testid": "backoffice-shell-page-panel-toggle",
+      children: panel.title
+    }), open ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ScrollView, {
+      flex: 1,
+      minHeight: 0,
+      paddingHorizontal: "$2",
+      children: panel.content
+    }) : null]
+  });
+}
 function BackofficeShell({
   children,
   activePath,
-  onNavigate
+  onNavigate,
+  title
 }) {
   const {
     t
@@ -89,7 +126,9 @@ function BackofficeShell({
   const location = (0, import_BackofficeProvider.useBackofficeLocation)();
   const paths = (0, import_BackofficeProvider.useBackofficePaths)();
   const isNarrow = useIsNarrow();
-  const [drawerOpen, setDrawerOpen] = (0, import_react2.useState)(false);
+  const [sidebarOpen, setSidebarOpen] = (0, import_react2.useState)(false);
+  const sidebarSlot = (0, import_shellSidebarSlot.useShellSidebarSlotState)();
+  const pagePanel = sidebarSlot.panel;
   const resolvedActivePath = activePath ?? location.path;
   const navigate = onNavigate ?? navigator.navigate;
   const sidebarEnabled = capabilities.sidebar.enabled;
@@ -98,26 +137,19 @@ function BackofficeShell({
     onFocusSearch: capabilities.awesomebar.enabled ? () => awesomebarRef.current?.focus() : void 0
   });
   (0, import_react2.useEffect)(() => {
-    if (!isNarrow) setDrawerOpen(false);
+    setSidebarOpen(false);
   }, [isNarrow]);
-  (0, import_react2.useEffect)(() => {
-    if (!import_components.isWeb || typeof document === "undefined" || !drawerOpen) return;
-    const onKeyDown = event => {
-      if (event.key === "Escape") setDrawerOpen(false);
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [drawerOpen]);
   const handleNavigate = path => {
-    if (isNarrow) setDrawerOpen(false);
+    if (isNarrow) setSidebarOpen(false);
     navigate(path);
   };
-  const bannerHeight = knobProps.sizeToken === "$5" ? "$7" : knobProps.sizeToken === "$3" ? "$5" : "$6";
+  const deskTitle = t("shell.title", "Backoffice");
+  const bannerTitle = isNarrow && title ? title : deskTitle;
   const sidebarContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
     flex: 1,
     height: "100%",
     minHeight: 0,
-    width: import_WorkspaceSidebar.WORKSPACE_SIDEBAR_WIDTH,
+    width: "100%",
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
       flex: 1,
       minHeight: 0,
@@ -125,7 +157,9 @@ function BackofficeShell({
         activePath: resolvedActivePath,
         onNavigate: handleNavigate
       })
-    }), slots.renderSidebarFooter ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    }), pagePanel && !isNarrow ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(StackedSidebarPanel, {
+      panel: pagePanel
+    }) : null, slots.renderSidebarFooter ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
       flexShrink: 0,
       width: "100%",
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ShellHairline, {
@@ -135,29 +169,34 @@ function BackofficeShell({
     }) : null]
   });
   const headerContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [isNarrow && sidebarEnabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+    children: [sidebarEnabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
       chromeless: true,
       circular: true,
       size: knobProps.sizeToken,
-      icon: drawerOpen ? import_react.XIcon : import_react.ListIcon,
+      icon: sidebarOpen ? CloseGlyph : MenuGlyph,
       "aria-label": t("shell.toggleSidebar", "Toggle sidebar"),
-      "aria-expanded": drawerOpen,
-      onPress: () => setDrawerOpen(open => !open),
+      "aria-expanded": sidebarOpen,
+      onPress: () => setSidebarOpen(open => !open),
       "data-testid": "backoffice-sidebar-toggle"
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
       chromeless: true,
       size: knobProps.sizeToken,
       paddingHorizontal: "$2",
+      flex: isNarrow ? 1 : void 0,
+      flexShrink: 1,
+      minWidth: 0,
+      justifyContent: "flex-start",
       onPress: () => handleNavigate(paths.home()),
       "aria-label": t("shell.home", "Home"),
       "data-testid": "backoffice-home",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
         ...knobProps.heading,
-        fontWeight: "400",
-        children: t("shell.title", "Backoffice")
+        numberOfLines: 1,
+        children: bannerTitle
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+    }), !isNarrow && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
       flex: 1,
+      flexShrink: 0,
       minWidth: 0,
       justifyContent: "center",
       children: capabilities.awesomebar.enabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
@@ -172,7 +211,9 @@ function BackofficeShell({
       alignItems: "center",
       gap: "$1",
       flexShrink: 0,
-      children: [capabilities.notifications.enabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_NotificationsButton.NotificationsButton, {}), capabilities.help.enabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_HelpMenu.HelpMenu, {}), capabilities.userMenu.enabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_UserMenu.UserMenu, {})]
+      children: [isNarrow && capabilities.awesomebar.enabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BackofficeAwesomebar.BackofficeAwesomebar, {
+        focusRef: awesomebarRef
+      }), capabilities.notifications.enabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_NotificationsButton.NotificationsButton, {}), capabilities.help.enabled && !isNarrow && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_HelpMenu.HelpMenu, {}), capabilities.userMenu.enabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_UserMenu.UserMenu, {})]
     })]
   });
   const rail = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
@@ -182,77 +223,79 @@ function BackofficeShell({
     minHeight: 0,
     backgroundColor: "$color2",
     "data-testid": "backoffice-sidebar-rail",
-    children: [sidebarContent, /* @__PURE__ */(0, import_jsx_runtime.jsx)(ShellHairline, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      width: import_WorkspaceSidebar.WORKSPACE_SIDEBAR_WIDTH,
+      height: "100%",
+      minHeight: 0,
+      children: sidebarContent
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ShellHairline, {
       axis: "vertical",
       testId: "backoffice-shell-column-rule"
     })]
   });
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-    flex: 1,
-    height: "100%",
-    width: "100%",
-    overflow: "hidden",
-    "data-testid": "backoffice-shell",
-    children: [import_components.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SkipLink, {
-      targetId: "backoffice-main",
-      children: t("shell.skipToContent", "Skip to content")
-    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
-      role: "banner",
-      ...knobProps.surface,
-      borderWidth: 0,
-      borderRadius: 0,
-      height: bannerHeight,
-      alignItems: "center",
-      paddingHorizontal: "$3",
-      gap: "$2",
-      flexShrink: 0,
-      children: slots.renderShellHeader ? slots.renderShellHeader({
-        defaultContent: headerContent
-      }) : headerContent
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ShellHairline, {
-      axis: "horizontal",
-      testId: "backoffice-shell-banner-rule"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_shellSidebarSlot.ShellSidebarSlotProvider, {
+    value: sidebarEnabled ? sidebarSlot.value : null,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
       flex: 1,
-      minWidth: 0,
-      position: "relative",
+      height: "100%",
+      width: "100%",
       overflow: "hidden",
-      children: [sidebarEnabled && !isNarrow && rail, sidebarEnabled && isNarrow && drawerOpen && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          backgroundColor: "$shadowColor",
-          opacity: 0.5,
-          zIndex: 10,
-          onPress: () => setDrawerOpen(false),
-          "data-testid": "backoffice-sidebar-scrim"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-          role: "navigation",
-          position: "absolute",
-          top: 0,
-          left: 0,
-          bottom: 0,
-          zIndex: 11,
-          backgroundColor: "$color2",
-          "data-testid": "backoffice-sidebar-drawer",
-          children: [sidebarContent, /* @__PURE__ */(0, import_jsx_runtime.jsx)(ShellHairline, {
-            axis: "vertical",
-            testId: "backoffice-shell-drawer-rule"
-          })]
-        })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-        role: "main",
-        id: "backoffice-main",
-        tabIndex: -1,
+      "data-testid": "backoffice-shell",
+      children: [import_components.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SkipLink, {
+        targetId: "backoffice-main",
+        children: t("shell.skipToContent", "Skip to content")
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        role: "banner",
+        ...knobProps.surface,
+        borderWidth: 0,
+        borderRadius: 0,
+        ...knobProps.bar.frame,
+        alignItems: "center",
+        gap: "$2",
+        flexShrink: 0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.Surface, {
+          size: knobProps.bar.sizeToken,
+          children: slots.renderShellHeader ? slots.renderShellHeader({
+            defaultContent: headerContent
+          }) : headerContent
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ShellHairline, {
+        axis: "horizontal",
+        testId: "backoffice-shell-banner-rule"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
         flex: 1,
         minWidth: 0,
-        minHeight: 0,
+        position: "relative",
         overflow: "hidden",
-        children
-      })]
-    }), ToastViewport ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastViewport, {}) : null]
+        children: [sidebarEnabled && !isNarrow && sidebarOpen && rail, sidebarEnabled && isNarrow && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SheetModal, {
+          open: sidebarOpen,
+          onOpenChange: setSidebarOpen,
+          snapPoint: 85,
+          fill: true,
+          header: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+            ...knobProps.heading,
+            numberOfLines: 1,
+            children: deskTitle
+          }),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+            role: "navigation",
+            flex: 1,
+            minHeight: 0,
+            width: "100%",
+            "data-testid": "backoffice-sidebar-drawer",
+            children: sidebarContent
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+          role: "main",
+          id: "backoffice-main",
+          tabIndex: -1,
+          flex: 1,
+          minWidth: 0,
+          minHeight: 0,
+          overflow: "hidden",
+          children
+        })]
+      }), ToastViewport ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastViewport, {}) : null]
+    })
   });
 }

package/dist/cjs/shell/BackofficeShell.native.js

@@ -53,8 +53,11 @@ var import_shortcuts = require("../chrome/shortcuts.native.js");
 var import_UserMenu = require("../chrome/UserMenu.native.js");
 var import_BackofficeProvider = require("../config/BackofficeProvider.native.js");
 var import_i18n = require("../i18n/index.native.js");
+var import_shellSidebarSlot = require("./shellSidebarSlot.native.js");
 var import_WorkspaceSidebar = require("./WorkspaceSidebar.native.js");
 var ToastViewport = componentsBarrel.ToastViewport;
+var MenuGlyph = (0, import_components.themed)(import_react.ListIcon);
+var CloseGlyph = (0, import_components.themed)(import_react.XIcon);
 function useIsNarrow() {
   return (0, import_theme.useLayoutSizeClass)() === "compact";
 }
@@ -75,11 +78,50 @@ function ShellHairline(param) {
     "data-testid": testId
   });
 }
+function StackedSidebarPanel(param) {
+  var {
+    panel
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var [open, setOpen] = (0, import_react2.useState)(true);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    flex: open ? 1 : void 0,
+    flexShrink: open ? 1 : 0,
+    minHeight: 0,
+    width: "100%",
+    "data-testid": "backoffice-shell-page-panel",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ShellHairline, {
+      axis: "horizontal",
+      testId: "backoffice-shell-panel-rule"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      chromeless: true,
+      size: knobProps.sizeToken,
+      justifyContent: "flex-start",
+      icon: open ? import_react.CaretDownIcon : import_react.CaretRightIcon,
+      "aria-expanded": open,
+      onPress: function onPress() {
+        return setOpen(function (value) {
+          return !value;
+        });
+      },
+      "data-testid": "backoffice-shell-page-panel-toggle",
+      children: panel.title
+    }), open ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ScrollView, {
+      flex: 1,
+      minHeight: 0,
+      paddingHorizontal: "$2",
+      children: panel.content
+    }) : null]
+  });
+}
 function BackofficeShell(param) {
   var {
     children,
     activePath,
-    onNavigate
+    onNavigate,
+    title
   } = param;
   var {
     t
@@ -93,7 +135,9 @@ function BackofficeShell(param) {
   var location = (0, import_BackofficeProvider.useBackofficeLocation)();
   var paths = (0, import_BackofficeProvider.useBackofficePaths)();
   var isNarrow = useIsNarrow();
-  var [drawerOpen, setDrawerOpen] = (0, import_react2.useState)(false);
+  var [sidebarOpen, setSidebarOpen] = (0, import_react2.useState)(false);
+  var sidebarSlot = (0, import_shellSidebarSlot.useShellSidebarSlotState)();
+  var pagePanel = sidebarSlot.panel;
   var resolvedActivePath = activePath !== null && activePath !== void 0 ? activePath : location.path;
   var navigate = onNavigate !== null && onNavigate !== void 0 ? onNavigate : navigator.navigate;
   var sidebarEnabled = capabilities.sidebar.enabled;
@@ -105,28 +149,19 @@ function BackofficeShell(param) {
     } : void 0
   });
   (0, import_react2.useEffect)(function () {
-    if (!isNarrow) setDrawerOpen(false);
+    setSidebarOpen(false);
   }, [isNarrow]);
-  (0, import_react2.useEffect)(function () {
-    if (!import_components.isWeb || typeof document === "undefined" || !drawerOpen) return;
-    var onKeyDown = function onKeyDown2(event) {
-      if (event.key === "Escape") setDrawerOpen(false);
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return function () {
-      return document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [drawerOpen]);
   var handleNavigate = function handleNavigate2(path) {
-    if (isNarrow) setDrawerOpen(false);
+    if (isNarrow) setSidebarOpen(false);
     navigate(path);
   };
-  var bannerHeight = knobProps.sizeToken === "$5" ? "$7" : knobProps.sizeToken === "$3" ? "$5" : "$6";
+  var deskTitle = t("shell.title", "Backoffice");
+  var bannerTitle = isNarrow && title ? title : deskTitle;
   var sidebarContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
     flex: 1,
     height: "100%",
     minHeight: 0,
-    width: import_WorkspaceSidebar.WORKSPACE_SIDEBAR_WIDTH,
+    width: "100%",
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
       flex: 1,
       minHeight: 0,
@@ -134,7 +169,9 @@ function BackofficeShell(param) {
         activePath: resolvedActivePath,
         onNavigate: handleNavigate
       })
-    }), slots.renderSidebarFooter ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    }), pagePanel && !isNarrow ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(StackedSidebarPanel, {
+      panel: pagePanel
+    }) : null, slots.renderSidebarFooter ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
       flexShrink: 0,
       width: "100%",
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ShellHairline, {
@@ -144,15 +181,15 @@ function BackofficeShell(param) {
     }) : null]
   });
   var headerContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [isNarrow && sidebarEnabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+    children: [sidebarEnabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
       chromeless: true,
       circular: true,
       size: knobProps.sizeToken,
-      icon: drawerOpen ? import_react.XIcon : import_react.ListIcon,
+      icon: sidebarOpen ? CloseGlyph : MenuGlyph,
       "aria-label": t("shell.toggleSidebar", "Toggle sidebar"),
-      "aria-expanded": drawerOpen,
+      "aria-expanded": sidebarOpen,
       onPress: function onPress() {
-        return setDrawerOpen(function (open) {
+        return setSidebarOpen(function (open) {
           return !open;
         });
       },
@@ -161,6 +198,10 @@ function BackofficeShell(param) {
       chromeless: true,
       size: knobProps.sizeToken,
       paddingHorizontal: "$2",
+      flex: isNarrow ? 1 : void 0,
+      flexShrink: 1,
+      minWidth: 0,
+      justifyContent: "flex-start",
       onPress: function onPress() {
         return handleNavigate(paths.home());
       },
@@ -168,15 +209,15 @@ function BackofficeShell(param) {
       "data-testid": "backoffice-home",
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
         ...knobProps.heading,
-        fontWeight: "400",
-        children: t("shell.title", "Backoffice")
+        numberOfLines: 1,
+        children: bannerTitle
       })
     }),
     /* Centered awesomebar (the flex spacer keeps the right chrome pinned
     when the awesomebar capability is off) */
-    /* @__PURE__ */
-    (0, import_jsx_runtime.jsx)(import_components.XStack, {
+    !isNarrow && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
       flex: 1,
+      flexShrink: 0,
       minWidth: 0,
       justifyContent: "center",
       children: capabilities.awesomebar.enabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
@@ -192,7 +233,9 @@ function BackofficeShell(param) {
       alignItems: "center",
       gap: "$1",
       flexShrink: 0,
-      children: [capabilities.notifications.enabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_NotificationsButton.NotificationsButton, {}), capabilities.help.enabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_HelpMenu.HelpMenu, {}), capabilities.userMenu.enabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_UserMenu.UserMenu, {})]
+      children: [isNarrow && capabilities.awesomebar.enabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BackofficeAwesomebar.BackofficeAwesomebar, {
+        focusRef: awesomebarRef
+      }), capabilities.notifications.enabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_NotificationsButton.NotificationsButton, {}), capabilities.help.enabled && !isNarrow && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_HelpMenu.HelpMenu, {}), capabilities.userMenu.enabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_UserMenu.UserMenu, {})]
     })]
   });
   var rail = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
@@ -202,88 +245,92 @@ function BackofficeShell(param) {
     minHeight: 0,
     backgroundColor: "$color2",
     "data-testid": "backoffice-sidebar-rail",
-    children: [sidebarContent, /* @__PURE__ */(0, import_jsx_runtime.jsx)(ShellHairline, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      width: import_WorkspaceSidebar.WORKSPACE_SIDEBAR_WIDTH,
+      height: "100%",
+      minHeight: 0,
+      children: sidebarContent
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ShellHairline, {
       axis: "vertical",
       testId: "backoffice-shell-column-rule"
     })]
   });
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
-    flex: 1,
-    height: "100%",
-    width: "100%",
-    overflow: "hidden",
-    "data-testid": "backoffice-shell",
-    children: [import_components.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SkipLink, {
-      targetId: "backoffice-main",
-      children: t("shell.skipToContent", "Skip to content")
-    }) : null, /* Top navbar — Frappe inverted-L: full width above the rail. */
-    /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
-      role: "banner",
-      ...knobProps.surface,
-      borderWidth: 0,
-      borderRadius: 0,
-      height: bannerHeight,
-      alignItems: "center",
-      paddingHorizontal: "$3",
-      gap: "$2",
-      flexShrink: 0,
-      children: slots.renderShellHeader ? slots.renderShellHeader({
-        defaultContent: headerContent
-      }) : headerContent
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ShellHairline, {
-      axis: "horizontal",
-      testId: "backoffice-shell-banner-rule"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_shellSidebarSlot.ShellSidebarSlotProvider, {
+    value: sidebarEnabled ? sidebarSlot.value : null,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
       flex: 1,
-      minWidth: 0,
-      position: "relative",
+      height: "100%",
+      width: "100%",
       overflow: "hidden",
-      children: [sidebarEnabled && !isNarrow && rail, /* Narrow drawer + scrim */
-      sidebarEnabled && isNarrow && drawerOpen && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          backgroundColor: "$shadowColor",
-          opacity: 0.5,
-          zIndex: 10,
-          onPress: function onPress() {
-            return setDrawerOpen(false);
-          },
-          "data-testid": "backoffice-sidebar-scrim"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
-          role: "navigation",
-          position: "absolute",
-          top: 0,
-          left: 0,
-          bottom: 0,
-          zIndex: 11,
-          backgroundColor: "$color2",
-          "data-testid": "backoffice-sidebar-drawer",
-          children: [sidebarContent, /* @__PURE__ */(0, import_jsx_runtime.jsx)(ShellHairline, {
-            axis: "vertical",
-            testId: "backoffice-shell-drawer-rule"
-          })]
-        })]
-      }), /* Routed content — pages own their own headers/breadcrumbs */
-      /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-        role: "main",
-        id: "backoffice-main",
-        tabIndex: -1,
+      "data-testid": "backoffice-shell",
+      children: [import_components.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SkipLink, {
+        targetId: "backoffice-main",
+        children: t("shell.skipToContent", "Skip to content")
+      }) : null, /* Top navbar — Frappe inverted-L: full width above the rail. */
+      /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        role: "banner",
+        ...knobProps.surface,
+        borderWidth: 0,
+        borderRadius: 0,
+        ...knobProps.bar.frame,
+        alignItems: "center",
+        gap: "$2",
+        flexShrink: 0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.Surface, {
+          size: knobProps.bar.sizeToken,
+          children: slots.renderShellHeader ? slots.renderShellHeader({
+            defaultContent: headerContent
+          }) : headerContent
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ShellHairline, {
+        axis: "horizontal",
+        testId: "backoffice-shell-banner-rule"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
         flex: 1,
         minWidth: 0,
-        minHeight: 0,
+        position: "relative",
         overflow: "hidden",
-        children
-      })]
-    }),
-    /* THE backoffice toast host: one shell-level viewport so every desk
-    surface (list, form, report, kanban, …) renders notify()/showToast
-    feedback without mounting its own. Double-mount safe — a second
-    viewport lower in the tree no-ops (components Toast contract). */
-    ToastViewport ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastViewport, {}) : null]
+        children: [sidebarEnabled && !isNarrow && sidebarOpen && rail,
+        /* Narrow: the nav opens as a bottom sheet off the hamburger
+        (phones take sheets, not side drawers), titled with the desk name
+        the compact banner gives up to the surface title. SheetModal owns
+        Escape and scrim dismissal. */
+        sidebarEnabled && isNarrow && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SheetModal, {
+          open: sidebarOpen,
+          onOpenChange: setSidebarOpen,
+          snapPoint: 85,
+          fill: true,
+          header: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+            ...knobProps.heading,
+            numberOfLines: 1,
+            children: deskTitle
+          }),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+            role: "navigation",
+            flex: 1,
+            minHeight: 0,
+            width: "100%",
+            "data-testid": "backoffice-sidebar-drawer",
+            children: sidebarContent
+          })
+        }), /* Routed content — pages own their own headers/breadcrumbs */
+        /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+          role: "main",
+          id: "backoffice-main",
+          tabIndex: -1,
+          flex: 1,
+          minWidth: 0,
+          minHeight: 0,
+          overflow: "hidden",
+          children
+        })]
+      }),
+      /* THE backoffice toast host: one shell-level viewport so every desk
+      surface (list, form, report, kanban, …) renders notify()/showToast
+      feedback without mounting its own. Double-mount safe — a second
+      viewport lower in the tree no-ops (components Toast contract). */
+      ToastViewport ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastViewport, {}) : null]
+    })
   });
 }
 //# sourceMappingURL=BackofficeShell.native.js.map