@multiplatform.one/backoffice 6.6.0 → 7.0.0

package/dist/cjs/shell/BackofficeShell.cjs

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all) __defProp(target, name, {
@@ -17,6 +19,15 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
@@ -26,6 +37,7 @@ __export(BackofficeShell_exports, {
 });
 module.exports = __toCommonJS(BackofficeShell_exports);
 var import_components = require("@multiplatform.one/components");
+var componentsBarrel = __toESM(require("@multiplatform.one/components"));
 var import_theme = require("@multiplatform.one/theme");
 var import_react = require("@phosphor-icons/react");
 var import_react2 = require("react");
@@ -39,9 +51,26 @@ var import_BackofficeProvider = require("../config/BackofficeProvider.cjs");
 var import_i18n = require("../i18n/index.cjs");
 var import_WorkspaceSidebar = require("./WorkspaceSidebar.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+const ToastViewport = componentsBarrel.ToastViewport;
 function useIsNarrow() {
   return (0, import_theme.useLayoutSizeClass)() === "compact";
 }
+function ShellHairline({
+  axis,
+  testId
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+    ...(axis === "horizontal" ? import_theme.hairline.line : import_theme.hairline.vline),
+    alignSelf: "stretch",
+    ...(axis === "horizontal" ? {
+      width: "100%"
+    } : {
+      height: "100%"
+    }),
+    flexShrink: 0,
+    "data-testid": testId
+  });
+}
 function BackofficeShell({
   children,
   activePath,
@@ -82,12 +111,27 @@ function BackofficeShell({
     if (isNarrow) setDrawerOpen(false);
     navigate(path);
   };
-  const surfaceBorderWidth = knobProps.surface.borderWidth;
-  const sidebarContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_WorkspaceSidebar.WorkspaceSidebar, {
-      activePath: resolvedActivePath,
-      onNavigate: handleNavigate
-    }), slots.renderSidebarFooter?.()]
+  const bannerHeight = knobProps.sizeToken === "$5" ? "$7" : knobProps.sizeToken === "$3" ? "$5" : "$6";
+  const sidebarContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    flex: 1,
+    height: "100%",
+    minHeight: 0,
+    width: import_WorkspaceSidebar.WORKSPACE_SIDEBAR_WIDTH,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      flex: 1,
+      minHeight: 0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_WorkspaceSidebar.WorkspaceSidebar, {
+        activePath: resolvedActivePath,
+        onNavigate: handleNavigate
+      })
+    }), slots.renderSidebarFooter ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      flexShrink: 0,
+      width: "100%",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ShellHairline, {
+        axis: "horizontal",
+        testId: "backoffice-shell-footer-rule"
+      }), slots.renderSidebarFooter()]
+    }) : null]
   });
   const headerContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [isNarrow && sidebarEnabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
@@ -130,37 +174,49 @@ function BackofficeShell({
       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, {})]
     })]
   });
+  const rail = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+    role: "navigation",
+    flexShrink: 0,
+    height: "100%",
+    minHeight: 0,
+    backgroundColor: "$color2",
+    "data-testid": "backoffice-sidebar-rail",
+    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: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+    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,
-      borderBottomWidth: surfaceBorderWidth,
-      borderBottomColor: knobProps.surface.borderColor,
+      borderRadius: 0,
+      height: bannerHeight,
       alignItems: "center",
       paddingHorizontal: "$3",
-      paddingVertical: "$2",
       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, {
       flex: 1,
       minWidth: 0,
       position: "relative",
       overflow: "hidden",
-      children: [sidebarEnabled && !isNarrow && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-        role: "navigation",
-        flexShrink: 0,
-        "data-testid": "backoffice-sidebar-rail",
-        children: sidebarContent
-      }), sidebarEnabled && isNarrow && drawerOpen && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      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,
@@ -172,23 +228,30 @@ function BackofficeShell({
           zIndex: 10,
           onPress: () => setDrawerOpen(false),
           "data-testid": "backoffice-sidebar-scrim"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
           role: "navigation",
           position: "absolute",
           top: 0,
           left: 0,
           bottom: 0,
           zIndex: 11,
-          backgroundColor: "$background",
+          backgroundColor: "$color2",
           "data-testid": "backoffice-sidebar-drawer",
-          children: sidebarContent
+          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,
         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

@@ -1,8 +1,10 @@
 "use strict";
 
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all) __defProp(target, name, {
@@ -19,6 +21,15 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
@@ -29,6 +40,7 @@ __export(BackofficeShell_exports, {
 module.exports = __toCommonJS(BackofficeShell_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_components = require("@multiplatform.one/components");
+var componentsBarrel = __toESM(require("@multiplatform.one/components"));
 var import_theme = require("@multiplatform.one/theme");
 var import_react = require("@phosphor-icons/react");
 var import_react2 = require("react");
@@ -41,16 +53,33 @@ 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_WorkspaceSidebar = require("./WorkspaceSidebar.native.js");
+var ToastViewport = componentsBarrel.ToastViewport;
 function useIsNarrow() {
   return (0, import_theme.useLayoutSizeClass)() === "compact";
 }
+function ShellHairline(param) {
+  var {
+    axis,
+    testId
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+    ...(axis === "horizontal" ? import_theme.hairline.line : import_theme.hairline.vline),
+    alignSelf: "stretch",
+    ...(axis === "horizontal" ? {
+      width: "100%"
+    } : {
+      height: "100%"
+    }),
+    flexShrink: 0,
+    "data-testid": testId
+  });
+}
 function BackofficeShell(param) {
   var {
     children,
     activePath,
     onNavigate
   } = param;
-  var _slots_renderSidebarFooter;
   var {
     t
   } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
@@ -91,12 +120,27 @@ function BackofficeShell(param) {
     if (isNarrow) setDrawerOpen(false);
     navigate(path);
   };
-  var surfaceBorderWidth = knobProps.surface.borderWidth;
-  var sidebarContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_WorkspaceSidebar.WorkspaceSidebar, {
-      activePath: resolvedActivePath,
-      onNavigate: handleNavigate
-    }), (_slots_renderSidebarFooter = slots.renderSidebarFooter) === null || _slots_renderSidebarFooter === void 0 ? void 0 : _slots_renderSidebarFooter.call(slots)]
+  var bannerHeight = knobProps.sizeToken === "$5" ? "$7" : knobProps.sizeToken === "$3" ? "$5" : "$6";
+  var sidebarContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    flex: 1,
+    height: "100%",
+    minHeight: 0,
+    width: import_WorkspaceSidebar.WORKSPACE_SIDEBAR_WIDTH,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      flex: 1,
+      minHeight: 0,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_WorkspaceSidebar.WorkspaceSidebar, {
+        activePath: resolvedActivePath,
+        onNavigate: handleNavigate
+      })
+    }), slots.renderSidebarFooter ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      flexShrink: 0,
+      width: "100%",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ShellHairline, {
+        axis: "horizontal",
+        testId: "backoffice-shell-footer-rule"
+      }), slots.renderSidebarFooter()]
+    }) : null]
   });
   var headerContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [isNarrow && sidebarEnabled && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
@@ -150,41 +194,50 @@ function BackofficeShell(param) {
       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, {})]
     })]
   });
+  var rail = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+    role: "navigation",
+    flexShrink: 0,
+    height: "100%",
+    minHeight: 0,
+    backgroundColor: "$color2",
+    "data-testid": "backoffice-sidebar-rail",
+    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: [/* Top navbar */
+    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,
-      // Surface knobs paint a full box border; keep only the bottom edge
-      // (DeskShell precedent, SB-M-1708).
       borderWidth: 0,
-      borderBottomWidth: surfaceBorderWidth,
-      borderBottomColor: knobProps.surface.borderColor,
+      borderRadius: 0,
+      height: bannerHeight,
       alignItems: "center",
       paddingHorizontal: "$3",
-      paddingVertical: "$2",
       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, {
       flex: 1,
       minWidth: 0,
       position: "relative",
       overflow: "hidden",
-      children: [/* Desktop rail — in flow */
-      sidebarEnabled && !isNarrow && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
-        role: "navigation",
-        flexShrink: 0,
-        "data-testid": "backoffice-sidebar-rail",
-        children: sidebarContent
-      }), /* Narrow drawer + scrim */
+      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",
@@ -199,25 +252,37 @@ function BackofficeShell(param) {
             return setDrawerOpen(false);
           },
           "data-testid": "backoffice-sidebar-scrim"
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
           role: "navigation",
           position: "absolute",
           top: 0,
           left: 0,
           bottom: 0,
           zIndex: 11,
-          backgroundColor: "$background",
+          backgroundColor: "$color2",
           "data-testid": "backoffice-sidebar-drawer",
-          children: sidebarContent
+          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,
         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

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

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","BackofficeShell_exports","__export","BackofficeShell","module","exports","import_jsx_runtime","require","import_components","import_theme","import_react","import_react2","import_react_i18next","import_BackofficeAwesomebar","import_HelpMenu","import_NotificationsButton","import_shortcuts","import_UserMenu","import_BackofficeProvider","import_i18n","import_WorkspaceSidebar","useIsNarrow","useLayoutSizeClass","param","children","activePath","onNavigate","_slots_renderSidebarFooter","t","useTranslation","BACKOFFICE_I18N_NAMESPACE","knobProps","useResolvedKnobs","capabilities","useBackofficeCapabilities","slots","useBackofficeSlots","navigator","useBackofficeNavigator","location","useBackofficeLocation","paths","useBackofficePaths","isNarrow","drawerOpen","setDrawerOpen","useState","resolvedActivePath","path","navigate","sidebarEnabled","sidebar","enabled","awesomebarRef","useRef","useBackofficeShortcuts","onFocusSearch","awesomebar","_awesomebarRef_current","current","focus","useEffect","isWeb","document","onKeyDown","onKeyDown2","event","key","addEventListener","removeEventListener","handleNavigate","handleNavigate2","surfaceBorderWidth","surface","borderWidth","sidebarContent","jsxs","Fragment","jsx","WorkspaceSidebar","renderSidebarFooter","call","headerContent","Button","chromeless","circular","size","icon","XIcon","ListIcon","onPress","open","paddingHorizontal","home","SizableText","fontWeight","XStack","flex","minWidth","justifyContent","maxWidth","BackofficeAwesomebar","focusRef","alignItems","gap","flexShrink","notifications","NotificationsButton","help","HelpMenu","userMenu","UserMenu","YStack","height","width","overflow","role"],"sources":["../../../src/shell/BackofficeShell.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","BackofficeShell_exports","__export","BackofficeShell","module","exports","import_jsx_runtime","require","import_components","componentsBarrel","__toESM","import_theme","import_react","import_react2","import_react_i18next","import_BackofficeAwesomebar","import_HelpMenu","import_NotificationsButton","import_shortcuts","import_UserMenu","import_BackofficeProvider","import_i18n","import_WorkspaceSidebar","ToastViewport","useIsNarrow","useLayoutSizeClass","ShellHairline","param","axis","testId","jsx","YStack","hairline","line","vline","alignSelf","width","height","flexShrink","children","activePath","onNavigate","t","useTranslation","BACKOFFICE_I18N_NAMESPACE","knobProps","useResolvedKnobs","capabilities","useBackofficeCapabilities","slots","useBackofficeSlots","navigator","useBackofficeNavigator","location","useBackofficeLocation","paths","useBackofficePaths","isNarrow","drawerOpen","setDrawerOpen","useState","resolvedActivePath","path","navigate","sidebarEnabled","sidebar","enabled","awesomebarRef","useRef","useBackofficeShortcuts","onFocusSearch","awesomebar","_awesomebarRef_current","current","focus","useEffect","isWeb","document","onKeyDown","onKeyDown2","event","key","addEventListener","removeEventListener","handleNavigate","handleNavigate2","bannerHeight","sizeToken","sidebarContent","jsxs","flex","minHeight","WORKSPACE_SIDEBAR_WIDTH","WorkspaceSidebar","renderSidebarFooter","headerContent","Fragment","Button","chromeless","circular","size","icon","XIcon","ListIcon","onPress","open","paddingHorizontal","home","SizableText","fontWeight","XStack","minWidth","justifyContent","maxWidth","BackofficeAwesomebar","focusRef","alignItems","gap","notifications","NotificationsButton","help","HelpMenu","userMenu","UserMenu","rail","role","backgroundColor","overflow","SkipLink","targetId"],"sources":["../../../src/shell/BackofficeShell.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/shell/WorkspaceSidebar.cjs

@@ -27,6 +27,7 @@ __export(WorkspaceSidebar_exports, {
 });
 module.exports = __toCommonJS(WorkspaceSidebar_exports);
 var import_components = require("@multiplatform.one/components");
+var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
 var import_react_i18next = require("react-i18next");
 var import_BackofficeProvider = require("../config/BackofficeProvider.cjs");
@@ -37,7 +38,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 const WORKSPACE_SIDEBAR_WIDTH = 250;
 function workspaceItem(workspace, depth, paths, activePath, onNavigate) {
   const path = paths.workspace(workspace.name);
-  const IconComponent = (0, import_workspaceIcons.workspaceIcon)(workspace.icon);
+  const IconComponent = (0, import_workspaceIcons.workspaceIcon)(workspace.icon, workspace.name);
   const icon =
   // Depth-based inset carried by the icon slot — the Sidebar row API has
   // no nesting support, so children indent icon+label via this wrapper.
@@ -67,6 +68,113 @@ function flattenTree(roots, childrenByParent, paths, activePath, onNavigate, dep
   }
   return items;
 }
+function NavRow({
+  item,
+  position
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const onAccent = (0, import_theme.useReadableTextOn)("$accentBackground");
+  const rowPad = knobProps.panelPadding.padding;
+  const corners = (0, import_theme.stackRadiusProps)(position, knobProps.borderRadius.borderRadius);
+  const ink = item.active && onAccent ? onAccent : void 0;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+    role: "button",
+    "aria-current": item.active ? "page" : void 0,
+    "data-testid": "backoffice-workspace-row",
+    "data-group-position": position,
+    "data-active": item.active ? "true" : "false",
+    alignItems: "center",
+    gap: "$2",
+    minHeight: knobProps.sizeToken,
+    paddingHorizontal: rowPad,
+    paddingVertical: "$2",
+    overflow: "hidden",
+    userSelect: "none",
+    ...corners,
+    backgroundColor: item.active ? "$accentBackground" : "transparent",
+    hoverStyle: {
+      backgroundColor: item.active ? "$accentBackground" : "$color3",
+      ...corners
+    },
+    pressStyle: {
+      backgroundColor: item.active ? "$accentBackground" : "$color4",
+      ...corners
+    },
+    cursor: item.onPress ? "pointer" : "default",
+    onPress: item.onPress,
+    tabIndex: item.onPress ? 0 : void 0,
+    outlineWidth: 0,
+    focusStyle: {
+      outlineWidth: 0
+    },
+    focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+      outlineOffset: -2,
+      outlineColor: ink ?? "$outlineColor"
+    }),
+    onKeyDown: e => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault?.();
+        item.onPress?.();
+      }
+    },
+    children: [item.icon, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+      size: "$3",
+      numberOfLines: 1,
+      flex: 1,
+      flexShrink: 1,
+      fontWeight: item.active ? "600" : "400",
+      color: ink,
+      children: item.label
+    })]
+  });
+}
+function WorkspaceNav({
+  sections
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const rowPad = knobProps.panelPadding.padding;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+    width: WORKSPACE_SIDEBAR_WIDTH,
+    flex: 1,
+    height: "100%",
+    minHeight: 0,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ScrollView, {
+      flex: 1,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        ...knobProps.panelPadding,
+        paddingHorizontal: 0,
+        ...knobProps.gapLg,
+        children: sections.map((section, sectionIdx) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+          ...knobProps.gap,
+          children: [section.title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+            size: "$2",
+            fontWeight: "600",
+            textTransform: "uppercase",
+            color: "$color11",
+            marginHorizontal: rowPad,
+            children: section.title
+          }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+            children: section.items.map((item, itemIdx) => {
+              const position = (0, import_theme.getGroupPosition)(itemIdx, section.items.length);
+              return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+                children: [itemIdx > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Separator, {
+                  ...import_theme.hairline.line
+                }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(NavRow, {
+                  item,
+                  position
+                })]
+              }, String(item.value ?? item.label));
+            })
+          })]
+        }, section.title ?? sectionIdx))
+      })
+    })
+  });
+}
 function WorkspaceSidebar({
   activePath,
   onNavigate
@@ -104,6 +212,8 @@ function WorkspaceSidebar({
   if (isLoading && sections.length === 0) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
       width: WORKSPACE_SIDEBAR_WIDTH,
+      flex: 1,
+      height: "100%",
       alignItems: "center",
       paddingTop: "$6",
       "aria-label": t("sidebar.loading", "Loading workspaces"),
@@ -112,8 +222,7 @@ function WorkspaceSidebar({
       })
     });
   }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Sidebar, {
-    sections,
-    width: WORKSPACE_SIDEBAR_WIDTH
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(WorkspaceNav, {
+    sections
   });
 }