@xenide-io/the-old-ui-theme 0.5.2 → 0.5.4

package/dist/suite.js

@@ -386,10 +386,10 @@ var APP_ACCENTS = {
   },
   nakama: {
     label: "Nakama",
-    accent: "#0891b2",
-    tile: "#155e75",
-    onTile: "#ffffff",
-    onTileAccent: "#a5f3fc"
+    accent: "#b8eb44",
+    tile: "#17101f",
+    onTile: "#fff2e2",
+    onTileAccent: "#f54b87"
   }
 };
 var APP_GLYPHS = {
@@ -398,7 +398,7 @@ var APP_GLYPHS = {
   kraken: "squid-doc",
   shellstack: "stack-hex",
   crew: "crew-bot",
-  nakama: "crew-bot"
+  nakama: "nakama-fist"
 };
 
 // src/suite/icons/glyph-parts.tsx
@@ -408,7 +408,15 @@ function GlyphElement({ element }) {
   const stroke = element.filled ? "none" : void 0;
   switch (element.kind) {
     case "path":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: element.d, fill, stroke });
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          d: element.d,
+          fill,
+          stroke,
+          transform: element.transform
+        }
+      );
     case "circle":
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "circle",
@@ -513,6 +521,24 @@ var SUITE_GLYPHS = {
       { kind: "path", d: "M9.6 14.6q2.4 1.7 4.8 0", accent: true }
     ]
   },
+  "nakama-fist": {
+    description: "Nakama \u2014 raised fist with neon crew signal lines",
+    elements: [
+      {
+        kind: "path",
+        d: "M192 0c17.7 0 32 14.3 32 32v112h-64V32c0-17.7 14.3-32 32-32zM64 64c0-17.7-32-32 32-32s32 14.3 32 32v80H64V64zm192 0c0-17.7 14.3-32 32-32s32 14.3 32 32v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V64zm96 64c0-17.7 14.3-32 32-32s32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32v-64zm-96 88v-.6c9.4 5.4 20.3 8.6 32 8.6 13.2 0 25.4-4 35.6-10.8 8.7 24.9 32.5 42.8 60.4 42.8 11.7 0 22.6-3.1 32-8.6v8.6c0 52.3-25.1 98.8-64 128v96c0 17.7-14.3 32-32 32H160c-17.7 0-32-14.3-32-32v-78.4c-17.3-7.9-33.2-18.8-46.9-32.5L69.5 357.5C45.5 333.5 32 300.9 32 267v-27c0-35.3 28.7-64 64-64h88c22.1 0 40 17.9 40 40s-17.9 40-40 40h-56c-8.8 0-16 7.2-16 16s7.2 16 16 16h56c39.8 0 72-32.2 72-72z",
+        filled: true,
+        transform: "translate(2.5 1.75) scale(.0425 .0375)"
+      },
+      { kind: "path", d: "M7 18h3.5M12.2 18h3M8.5 19.5h6", accent: true },
+      {
+        kind: "path",
+        d: "M4.8 5.8h2.7M4.8 7.4h1.4M18.5 17.1h1.7",
+        accent: true
+      },
+      { kind: "circle", cx: 18.5, cy: 4.5, r: 0.8, accent: true, filled: true }
+    ]
+  },
   workspace: {
     description: "Workspace container \u2014 panel with header bar and content",
     elements: [
@@ -526,7 +552,15 @@ var SUITE_GLYPHS = {
   organisation: {
     description: "Organisation chart \u2014 root node with two members",
     elements: [
-      { kind: "rect", x: 9.5, y: 3.5, width: 5, height: 5, rx: 1.4, accent: true },
+      {
+        kind: "rect",
+        x: 9.5,
+        y: 3.5,
+        width: 5,
+        height: 5,
+        rx: 1.4,
+        accent: true
+      },
       { kind: "path", d: "M12 8.5v2.5" },
       { kind: "path", d: "M6.75 13.5v-2.5h10.5v2.5" },
       { kind: "rect", x: 4.25, y: 13.5, width: 5, height: 5, rx: 1.4 },
@@ -570,7 +604,10 @@ var SUITE_GLYPHS = {
   "bell-wave": {
     description: "Notifications \u2014 bell with sound waves",
     elements: [
-      { kind: "path", d: "M7 9.2a5 5 0 0 1 10 0c0 5.3 2.4 7.3 2.4 7.3H4.6S7 14.5 7 9.2" },
+      {
+        kind: "path",
+        d: "M7 9.2a5 5 0 0 1 10 0c0 5.3 2.4 7.3 2.4 7.3H4.6S7 14.5 7 9.2"
+      },
       { kind: "path", d: "M10.7 19.3a1.5 1.5 0 0 0 2.6 0" },
       { kind: "path", d: "M17.9 6.4a5.5 5.5 0 0 1 1.4 3.7", accent: true },
       { kind: "path", d: "M15.7 4a9.4 9.4 0 0 1 2.4 6", accent: true }
@@ -1229,13 +1266,17 @@ function AppSwitcher({
   title,
   collapsed = false,
   dropdownMenu: DropdownMenu2,
-  dropdownItem: DropdownItem2
+  dropdownItem: DropdownItem2,
+  triggerId,
+  triggerDataTest
 }) {
   const [open, setOpen] = (0, import_react.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     DropdownMenu2,
     {
       "aria-label": "Switch application",
+      triggerId: triggerId != null ? triggerId : "app-switcher-trigger",
+      triggerDataTest: triggerDataTest != null ? triggerDataTest : "app-switcher-trigger",
       className: collapsed ? "w-11 shrink-0" : "min-w-0 flex-1",
       panelClassName: "w-64",
       align: "start",
@@ -1257,11 +1298,12 @@ function AppSwitcher({
           ]
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "p-1", "data-test": "app-switcher-menu", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { id: "app-switcher-menu", className: "p-1", "data-test": "app-switcher-menu", children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext", children: "Switch application" }),
         apps.map((app) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           DropdownItem2,
           {
+            id: `switch-app-${app.slug}`,
             "data-test": `switch-app-${app.slug}`,
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => {
@@ -1396,7 +1438,10 @@ function SuiteNotificationBell({
   markRead,
   markAllRead,
   dropdownMenu: DropdownMenu2,
-  cacheKey = "suite-notifications-cache"
+  cacheKey = "suite-notifications-cache",
+  dataTest = "suite-notifications",
+  triggerId,
+  triggerDataTest
 }) {
   const router = (0, import_navigation.useRouter)();
   const [open, setOpen] = (0, import_react2.useState)(false);
@@ -1497,11 +1542,13 @@ function SuiteNotificationBell({
     DropdownMenu2,
     {
       "aria-label": "Notifications",
+      triggerId: triggerId != null ? triggerId : `${dataTest}-trigger`,
+      triggerDataTest: triggerDataTest != null ? triggerDataTest : `${dataTest}-trigger`,
       align: "end",
       panelClassName: "w-80 overflow-hidden p-0",
       open,
       onOpenChange,
-      trigger: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative inline-flex h-9 w-9 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: [
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative inline-flex h-11 w-11 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_iconoir_react3.Bell, { className: "h-5 w-5", strokeWidth: 1.75, "aria-hidden": true }),
         unread > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-ph-brand px-1 text-[10px] font-semibold leading-none text-white ring-2 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
       ] }),
@@ -1512,6 +1559,8 @@ function SuiteNotificationBell({
             "button",
             {
               type: "button",
+              id: `${dataTest}-mark-all`,
+              "data-test": `${dataTest}-mark-all`,
               onClick: markAll,
               className: "text-xs font-medium text-ph-brand hover:underline",
               children: "Mark all read"
@@ -1522,6 +1571,8 @@ function SuiteNotificationBell({
           "button",
           {
             type: "button",
+            id: `${dataTest}-item-${n.id}`,
+            "data-test": `${dataTest}-item-${n.id}`,
             onClick: () => void openItem(n),
             className: "flex w-full flex-col gap-0.5 px-3 py-2 text-left transition hover:bg-ph-muted",
             children: [
@@ -1566,6 +1617,10 @@ function CommandPaletteHost({
   items,
   isAuthenticated = true,
   placeholder = "Type a command or search\u2026",
+  id,
+  dataTest,
+  inputId,
+  inputDataTest,
   commandPalette: CommandPalette
 }) {
   const [open, setOpen] = (0, import_react3.useState)(false);
@@ -1586,7 +1641,11 @@ function CommandPaletteHost({
       items,
       isOpen: open,
       onClose: () => setOpen(false),
-      placeholder
+      placeholder,
+      id,
+      dataTest,
+      inputId,
+      inputDataTest
     }
   );
 }
@@ -1634,6 +1693,10 @@ function SuiteMobileDrawer({
   durationMs = 200,
   dataTest,
   panelDataTest,
+  backdropId,
+  backdropDataTest,
+  closeButtonId,
+  closeButtonDataTest,
   panelClassName
 }) {
   const [rendered, setRendered] = (0, import_react5.useState)(open);
@@ -1685,6 +1748,8 @@ function SuiteMobileDrawer({
       "button",
       {
         type: "button",
+        id: backdropId,
+        "data-test": backdropDataTest,
         tabIndex: -1,
         className: cn(
           "absolute inset-0 bg-black/25 backdrop-blur-sm motion-safe:transition-opacity motion-safe:ease-spring-subtle",
@@ -1725,6 +1790,8 @@ function SuiteMobileDrawer({
                   "button",
                   {
                     type: "button",
+                    id: closeButtonId,
+                    "data-test": closeButtonDataTest,
                     onClick: onClose,
                     className: "-mr-1.5 inline-flex h-11 w-11 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
                     "aria-label": closeLabel,
@@ -1750,6 +1817,7 @@ function SuiteMobileHeader({
   title,
   actions,
   menuLabel = "Open navigation",
+  menuId,
   menuDataTest,
   dataTest,
   className
@@ -1767,6 +1835,7 @@ function SuiteMobileHeader({
           "button",
           {
             type: "button",
+            id: menuId,
             "data-test": menuDataTest,
             className: "suite-press inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
             onClick: onMenuClick,
@@ -1906,7 +1975,7 @@ function SuitePageHeader({
       "data-test": dataTest,
       "data-stuck": sticky ? stuck ? "true" : "false" : void 0,
       className: cn(
-        "flex items-start justify-between gap-4 pb-2 sm:pb-3",
+        "flex min-w-0 flex-col items-start gap-3 pb-2 sm:flex-row sm:justify-between sm:gap-4 sm:pb-3",
         // No extra pt here — page inset sets the shared title baseline.
         // Stuck state adds pad via .suite-page-header-sticky[data-stuck].
         sticky && "suite-page-header-sticky",
@@ -1930,7 +1999,7 @@ function SuitePageHeader({
                 "h1",
                 {
                   className: cn(
-                    "font-display text-[1.625rem] font-bold leading-none tracking-tight text-ph-ink sm:text-[2.25rem]",
+                    "min-w-0 break-words font-display text-[1.625rem] font-bold leading-none tracking-tight text-ph-ink text-balance sm:text-[2.25rem]",
                     titleClassName
                   ),
                   children: title
@@ -1950,7 +2019,7 @@ function SuitePageHeader({
             }
           ) : null
         ] }),
-        actions ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex shrink-0 items-center gap-2 self-center", children: actions }) : null
+        actions ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex max-w-full items-center gap-2 self-stretch overflow-x-auto pb-1 sm:shrink-0 sm:self-center sm:overflow-visible sm:pb-0", children: actions }) : null
       ]
     }
   );
@@ -2111,7 +2180,14 @@ function DropdownContent({
       sticky: "partial",
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Arrow, { className: "ph-dropdown-arrow", width: 12, height: 6 })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          DropdownPrimitive.Arrow,
+          {
+            className: "ph-dropdown-arrow",
+            width: 12,
+            height: 6
+          }
+        )
       ]
     }
   ) });
@@ -2119,6 +2195,8 @@ function DropdownContent({
 function DropdownMenu(_a) {
   var _b = _a, {
     trigger,
+    triggerId,
+    triggerDataTest,
     children,
     align,
     side,
@@ -2136,6 +2214,8 @@ function DropdownMenu(_a) {
     disabled
   } = _b, props = __objRest(_b, [
     "trigger",
+    "triggerId",
+    "triggerDataTest",
     "children",
     "align",
     "side",
@@ -2160,7 +2240,17 @@ function DropdownMenu(_a) {
       onOpenChange,
       modal,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: "ph-dropdown-trigger", "aria-label": ariaLabel, children: trigger }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "button",
+          {
+            type: "button",
+            id: triggerId,
+            "data-test": triggerDataTest,
+            className: "ph-dropdown-trigger",
+            "aria-label": ariaLabel,
+            children: trigger
+          }
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           DropdownContent,
           {
@@ -2179,7 +2269,15 @@ function DropdownMenu(_a) {
   ) }));
 }
 function DropdownItem(_a) {
-  var _b = _a, { className, children, disabled } = _b, props = __objRest(_b, ["className", "children", "disabled"]);
+  var _b = _a, {
+    className,
+    children,
+    disabled
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "disabled"
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownPrimitive.Item, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "button",
     __spreadProps(__spreadValues({
@@ -2205,33 +2303,38 @@ function SuiteUserMenu({
   settingsHref,
   onSignOut,
   fallbackInitials,
+  showSignOutAction = false,
   dataTest = "suite-user-menu",
+  triggerId,
+  triggerDataTest,
   className
 }) {
   const router = (0, import_navigation2.useRouter)();
   const initials = fallbackInitials != null ? fallbackInitials : computeInitials(name, email);
-  const avatar = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "inline-flex h-11 w-11 items-center justify-center rounded-full transition-colors hover:bg-ph-muted", children: image ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const avatar = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "inline-flex h-11 w-11 items-center justify-center rounded-full ring-2 ring-ph-border ring-offset-1 ring-offset-ph-canvas transition-colors hover:bg-ph-muted", children: image ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     import_image2.default,
     {
       src: image,
       alt: "",
-      width: 32,
-      height: 32,
-      className: "h-8 w-8 rounded-full object-cover",
+      width: 40,
+      height: 40,
+      className: "h-10 w-10 rounded-full object-cover",
       unoptimized: true
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-ph-muted text-sm font-semibold text-ph-brand", children: initials }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-ph-muted text-sm font-semibold text-ph-brand", children: initials }) });
+  const accountMenu = /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     DropdownMenu,
     {
       trigger: avatar,
+      triggerId: triggerId != null ? triggerId : `${dataTest}-trigger`,
+      triggerDataTest: triggerDataTest != null ? triggerDataTest : `${dataTest}-trigger`,
       "aria-label": "Account menu",
       align: "end",
       side: "bottom",
       sideOffset: 6,
       collisionPadding: 16,
       modal: false,
-      className,
+      className: showSignOutAction ? void 0 : className,
       "data-test": dataTest,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "px-2 py-1.5", children: [
@@ -2250,20 +2353,31 @@ function SuiteUserMenu({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-          DropdownItem,
-          {
-            "data-test": `${dataTest}-sign-out`,
-            onClick: onSignOut,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_iconoir_react6.LogOut, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
-              "Sign out"
-            ]
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(DropdownItem, { "data-test": `${dataTest}-sign-out`, onClick: onSignOut, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_iconoir_react6.LogOut, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
+          "Sign out"
+        ] })
       ]
     }
   );
+  if (!showSignOutAction) {
+    return accountMenu;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("flex min-w-0 items-center gap-2", className), children: [
+    accountMenu,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "button",
+      {
+        type: "button",
+        "data-test": `${dataTest}-visible-sign-out`,
+        title: "Sign out",
+        "aria-label": "Sign out",
+        className: "inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ph-focus-ring",
+        onClick: onSignOut,
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_iconoir_react6.LogOut, { className: "h-4 w-4", "aria-hidden": true })
+      }
+    )
+  ] });
 }
 
 // src/suite/components/suite-bottom-nav.tsx
@@ -2314,6 +2428,7 @@ function SuiteBottomNav({
               import_link.default,
               {
                 href: item.href,
+                id: item.id,
                 "data-test": (_a = item.dataTest) != null ? _a : `suite-nav-${item.label.toLowerCase().replace(/\s+/g, "-")}`,
                 "aria-current": active ? "page" : void 0,
                 className: cn(
@@ -2935,8 +3050,9 @@ function snapWidth(width) {
   if (width < SIDEBAR_MIN_EXPANDED_WIDTH) return SIDEBAR_MIN_EXPANDED_WIDTH;
   return Math.min(SIDEBAR_MAX_WIDTH, width);
 }
-function useSidebarWidth(storageKey) {
-  const [width, setWidth] = (0, import_react11.useState)(SIDEBAR_DEFAULT_WIDTH);
+function useSidebarWidth(storageKey, defaultWidth = SIDEBAR_DEFAULT_WIDTH) {
+  const fallbackWidth = snapWidth(clampWidth(defaultWidth));
+  const [width, setWidth] = (0, import_react11.useState)(fallbackWidth);
   const [narrowViewport, setNarrowViewport] = (0, import_react11.useState)(false);
   const collapsed = narrowViewport || width <= SIDEBAR_COLLAPSE_THRESHOLD;
   (0, import_react11.useEffect)(() => {
@@ -2970,17 +3086,17 @@ function useSidebarWidth(storageKey) {
   const setCollapsed = (0, import_react11.useCallback)(
     (value) => {
       setWidth((current) => {
-        const next = value ? SIDEBAR_RAIL_WIDTH : current <= SIDEBAR_COLLAPSE_THRESHOLD ? SIDEBAR_DEFAULT_WIDTH : snapWidth(current);
+        const next = value ? SIDEBAR_RAIL_WIDTH : current <= SIDEBAR_COLLAPSE_THRESHOLD ? fallbackWidth : snapWidth(current);
         persist(next);
         return next;
       });
     },
-    [persist]
+    [fallbackWidth, persist]
   );
   const resetWidth = (0, import_react11.useCallback)(() => {
-    setWidth(SIDEBAR_DEFAULT_WIDTH);
-    persist(SIDEBAR_DEFAULT_WIDTH);
-  }, [persist]);
+    setWidth(fallbackWidth);
+    persist(fallbackWidth);
+  }, [fallbackWidth, persist]);
   const startResize = (0, import_react11.useCallback)(
     (event) => {
       event.preventDefault();
@@ -3003,7 +3119,17 @@ function useSidebarWidth(storageKey) {
     },
     [persist, width]
   );
-  return { width, collapsed, setCollapsed, resetWidth, startResize };
+  const resizeBy = (0, import_react11.useCallback)(
+    (delta) => {
+      setWidth((current) => {
+        const next = clampWidth(current + delta);
+        persist(next);
+        return next;
+      });
+    },
+    [persist]
+  );
+  return { width, collapsed, setCollapsed, resetWidth, startResize, resizeBy };
 }
 
 // src/suite/lib/motion.tsx
@@ -3200,6 +3326,7 @@ function SuiteSettingsMobileNav({
           "button",
           {
             type: "button",
+            id: item.id,
             "data-test": item.testId,
             onClick: () => onSelect(item.href),
             "aria-current": active ? "page" : void 0,
@@ -3409,67 +3536,62 @@ function SuiteSidebar({
               collapsed ? "px-1.5 py-2" : "p-2"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-                "nav",
-                {
-                  "aria-label": "Pages",
-                  className: "shrink-0 space-y-0.5",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("mb-3", collapsed && "flex justify-center"), children: renderNode(contextSwitcher, collapsed) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "space-y-0.5", children: navItems.map((item) => {
-                      const Icon = item.icon;
-                      const active = Boolean(item.active);
-                      const link = /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-                        import_link2.default,
-                        {
-                          href: item.href,
-                          "data-test": "nav-link",
-                          "aria-current": active ? "page" : void 0,
-                          onClick: item.onClick,
-                          className: cn(
-                            "group relative flex items-center gap-2.5 rounded-[var(--ph-radius-app)] text-sm font-medium transition-colors",
-                            active ? "bg-ph-muted" : "text-ph-subtle hover:bg-ph-muted hover:text-ph-ink",
-                            collapsed ? "mx-auto size-10 shrink-0 justify-center gap-0 px-0 py-0" : "w-full px-2.5 py-2"
-                          ),
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                              "span",
-                              {
-                                className: cn(
-                                  "relative flex h-4 w-4 shrink-0 items-center justify-center",
-                                  item.iconClassName
-                                ),
-                                "aria-hidden": true,
-                                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                                  Icon,
-                                  {
-                                    className: "h-full w-full",
-                                    strokeWidth: active ? 2 : 1.75
-                                  }
-                                )
-                              }
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("nav", { "aria-label": "Pages", className: "shrink-0 space-y-0.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("mb-3", collapsed && "flex justify-center"), children: renderNode(contextSwitcher, collapsed) }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "space-y-0.5", children: navItems.map((item) => {
+                  var _a;
+                  const Icon = item.icon;
+                  const active = Boolean(item.active);
+                  const link = /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                    import_link2.default,
+                    {
+                      href: item.href,
+                      id: item.id,
+                      "data-test": (_a = item.dataTest) != null ? _a : "nav-link",
+                      "aria-current": active ? "page" : void 0,
+                      onClick: item.onClick,
+                      className: cn(
+                        "group relative flex min-h-11 touch-manipulation items-center gap-2.5 rounded-[var(--ph-radius-app)] text-sm font-medium transition-colors",
+                        active ? "bg-ph-muted" : "text-ph-subtle hover:bg-ph-muted hover:text-ph-ink",
+                        collapsed ? "mx-auto size-11 shrink-0 justify-center gap-0 px-0 py-0" : "w-full px-2.5 py-2"
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                          "span",
+                          {
+                            className: cn(
+                              "relative flex h-4 w-4 shrink-0 items-center justify-center",
+                              item.iconClassName
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-                              "span",
+                            "aria-hidden": true,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                              Icon,
                               {
-                                className: cn(
-                                  "relative truncate",
-                                  active ? "text-ph-ink" : "text-ph-subtle group-hover:text-ph-ink",
-                                  collapsed && "sr-only"
-                                ),
-                                children: item.label
+                                className: "h-full w-full",
+                                strokeWidth: active ? 2 : 1.75
                               }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                          "span",
+                          {
+                            className: cn(
+                              "relative truncate",
+                              active ? "text-ph-ink" : "text-ph-subtle group-hover:text-ph-ink",
+                              collapsed && "sr-only"
                             ),
-                            !collapsed && item.badge ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "relative ml-auto shrink-0", children: item.badge }) : null
-                          ]
-                        },
-                        item.label
-                      );
-                      return collapsed ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Tooltip, { content: item.label, side: "right", children: link }, item.label) : link;
-                    }) })
-                  ]
-                }
-              ),
+                            children: item.label
+                          }
+                        ),
+                        !collapsed && item.badge ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "relative ml-auto shrink-0", children: item.badge }) : null
+                      ]
+                    },
+                    item.label
+                  );
+                  return collapsed ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Tooltip, { content: item.label, side: "right", children: link }, item.label) : link;
+                }) })
+              ] }),
               secondaryNav ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 "div",
                 {
@@ -3494,11 +3616,11 @@ function SuiteSidebar({
               {
                 className: cn(
                   "flex items-center gap-2",
-                  collapsed && "justify-center"
+                  collapsed ? "flex-col justify-center" : "min-w-0"
                 ),
                 children: [
                   renderNode(userMenu, collapsed),
-                  !collapsed && footerExtras ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "ml-auto shrink-0", children: renderNode(footerExtras, collapsed) }) : null
+                  footerExtras ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("shrink-0", collapsed ? "mt-2" : "ml-auto"), children: renderNode(footerExtras, collapsed) }) : null
                 ]
               }
             )
@@ -3520,6 +3642,7 @@ function SuiteAppLayout({
   collapsed = false,
   lockMainScroll = false,
   onStartResize,
+  onResizeBy,
   onResetWidth,
   className
 }) {
@@ -3527,12 +3650,15 @@ function SuiteAppLayout({
     "div",
     {
       "data-test": "app-shell",
-      className: cn("flex min-h-dvh lg:h-screen lg:overflow-hidden", className),
+      className: cn(
+        "suite-app-layout flex h-dvh overflow-hidden",
+        className
+      ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           "aside",
           {
-            className: "relative hidden shrink-0 flex-col overflow-hidden border-r border-ph-border transition-[width] duration-200 ease-out lg:flex",
+            className: "relative hidden shrink-0 flex-col overflow-visible border-r border-ph-border ease-out lg:flex",
             style: { width: `${sidebarWidth}px` },
             "data-collapsed": collapsed ? "true" : "false",
             children: [
@@ -3543,9 +3669,23 @@ function SuiteAppLayout({
                   role: "separator",
                   "aria-orientation": "vertical",
                   "aria-label": "Resize sidebar",
+                  "data-test": "sidebar-resize-handle",
+                  tabIndex: onResizeBy ? 0 : void 0,
                   onPointerDown: onStartResize,
                   onDoubleClick: onResetWidth,
-                  className: "absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize transition-colors hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
+                  onKeyDown: (event) => {
+                    if (event.key === "Home") {
+                      event.preventDefault();
+                      onResetWidth == null ? void 0 : onResetWidth();
+                    } else if (event.key === "ArrowLeft") {
+                      event.preventDefault();
+                      onResizeBy == null ? void 0 : onResizeBy(-16);
+                    } else if (event.key === "ArrowRight") {
+                      event.preventDefault();
+                      onResizeBy == null ? void 0 : onResizeBy(16);
+                    }
+                  },
+                  className: "absolute inset-y-0 -right-1 z-10 w-2 cursor-col-resize touch-none transition-colors hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
                 }
               ) : null
             ]
@@ -3561,6 +3701,7 @@ function SuiteAppLayout({
               "data-lock-scroll": lockMainScroll ? "true" : void 0,
               className: cn(
                 "flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overscroll-contain bg-ph-canvas focus:outline-none",
+                "suite-app-layout__main",
                 lockMainScroll ? "overflow-hidden" : "overflow-y-auto"
               ),
               children