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

package/dist/suite.mjs

@@ -2,7 +2,7 @@ import {
   DropdownItem,
   DropdownMenu,
   Tooltip
-} from "./chunk-G53YLHVE.mjs";
+} from "./chunk-E5ZBQYEX.mjs";
 import {
   SuiteThemeProvider,
   useSuiteTheme
@@ -99,10 +99,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 = {
@@ -111,7 +111,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
@@ -121,7 +121,15 @@ function GlyphElement({ element }) {
   const stroke = element.filled ? "none" : void 0;
   switch (element.kind) {
     case "path":
-      return /* @__PURE__ */ jsx2("path", { d: element.d, fill, stroke });
+      return /* @__PURE__ */ jsx2(
+        "path",
+        {
+          d: element.d,
+          fill,
+          stroke,
+          transform: element.transform
+        }
+      );
     case "circle":
       return /* @__PURE__ */ jsx2(
         "circle",
@@ -226,6 +234,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: [
@@ -239,7 +265,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 },
@@ -283,7 +317,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 }
@@ -942,13 +979,17 @@ function AppSwitcher({
   title,
   collapsed = false,
   dropdownMenu: DropdownMenu2,
-  dropdownItem: DropdownItem2
+  dropdownItem: DropdownItem2,
+  triggerId,
+  triggerDataTest
 }) {
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ jsx6(
     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",
@@ -970,11 +1011,12 @@ function AppSwitcher({
           ]
         }
       ),
-      children: /* @__PURE__ */ jsxs6("div", { className: "p-1", "data-test": "app-switcher-menu", children: [
+      children: /* @__PURE__ */ jsxs6("div", { id: "app-switcher-menu", className: "p-1", "data-test": "app-switcher-menu", children: [
         /* @__PURE__ */ jsx6("p", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext", children: "Switch application" }),
         apps.map((app) => /* @__PURE__ */ jsx6(
           DropdownItem2,
           {
+            id: `switch-app-${app.slug}`,
             "data-test": `switch-app-${app.slug}`,
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => {
@@ -1109,7 +1151,10 @@ function SuiteNotificationBell({
   markRead,
   markAllRead,
   dropdownMenu: DropdownMenu2,
-  cacheKey = "suite-notifications-cache"
+  cacheKey = "suite-notifications-cache",
+  dataTest = "suite-notifications",
+  triggerId,
+  triggerDataTest
 }) {
   const router = useRouter();
   const [open, setOpen] = useState2(false);
@@ -1210,11 +1255,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__ */ jsxs7("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__ */ jsxs7("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__ */ jsx7(Bell, { className: "h-5 w-5", strokeWidth: 1.75, "aria-hidden": true }),
         unread > 0 ? /* @__PURE__ */ jsx7("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
       ] }),
@@ -1225,6 +1272,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"
@@ -1235,6 +1284,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: [
@@ -1279,6 +1330,10 @@ function CommandPaletteHost({
   items,
   isAuthenticated = true,
   placeholder = "Type a command or search\u2026",
+  id,
+  dataTest,
+  inputId,
+  inputDataTest,
   commandPalette: CommandPalette
 }) {
   const [open, setOpen] = useState3(false);
@@ -1299,7 +1354,11 @@ function CommandPaletteHost({
       items,
       isOpen: open,
       onClose: () => setOpen(false),
-      placeholder
+      placeholder,
+      id,
+      dataTest,
+      inputId,
+      inputDataTest
     }
   );
 }
@@ -1347,6 +1406,10 @@ function SuiteMobileDrawer({
   durationMs = 200,
   dataTest,
   panelDataTest,
+  backdropId,
+  backdropDataTest,
+  closeButtonId,
+  closeButtonDataTest,
   panelClassName
 }) {
   const [rendered, setRendered] = useState5(open);
@@ -1398,6 +1461,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",
@@ -1438,6 +1503,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,
@@ -1463,6 +1530,7 @@ function SuiteMobileHeader({
   title,
   actions,
   menuLabel = "Open navigation",
+  menuId,
   menuDataTest,
   dataTest,
   className
@@ -1480,6 +1548,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,
@@ -1623,7 +1692,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",
@@ -1647,7 +1716,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
@@ -1667,7 +1736,7 @@ function SuitePageHeader({
             }
           ) : null
         ] }),
-        actions ? /* @__PURE__ */ jsx12("div", { className: "flex shrink-0 items-center gap-2 self-center", children: actions }) : null
+        actions ? /* @__PURE__ */ jsx12("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
       ]
     }
   );
@@ -1806,33 +1875,38 @@ function SuiteUserMenu({
   settingsHref,
   onSignOut,
   fallbackInitials,
+  showSignOutAction = false,
   dataTest = "suite-user-menu",
+  triggerId,
+  triggerDataTest,
   className
 }) {
   const router = useRouter2();
   const initials = fallbackInitials != null ? fallbackInitials : computeInitials(name, email);
-  const avatar = /* @__PURE__ */ jsx14("span", { className: "inline-flex h-11 w-11 items-center justify-center rounded-full transition-colors hover:bg-ph-muted", children: image ? /* @__PURE__ */ jsx14(
+  const avatar = /* @__PURE__ */ jsx14("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__ */ jsx14(
     Image2,
     {
       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__ */ jsx14("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__ */ jsxs12(
+  ) : /* @__PURE__ */ jsx14("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__ */ jsxs12(
     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__ */ jsxs12("div", { className: "px-2 py-1.5", children: [
@@ -1851,20 +1925,31 @@ function SuiteUserMenu({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs12(
-          DropdownItem,
-          {
-            "data-test": `${dataTest}-sign-out`,
-            onClick: onSignOut,
-            children: [
-              /* @__PURE__ */ jsx14(LogOut, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
-              "Sign out"
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs12(DropdownItem, { "data-test": `${dataTest}-sign-out`, onClick: onSignOut, children: [
+          /* @__PURE__ */ jsx14(LogOut, { className: "h-4 w-4 text-ph-mutedtext", "aria-hidden": true }),
+          "Sign out"
+        ] })
       ]
     }
   );
+  if (!showSignOutAction) {
+    return accountMenu;
+  }
+  return /* @__PURE__ */ jsxs12("div", { className: cn("flex min-w-0 items-center gap-2", className), children: [
+    accountMenu,
+    /* @__PURE__ */ jsx14(
+      "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__ */ jsx14(LogOut, { className: "h-4 w-4", "aria-hidden": true })
+      }
+    )
+  ] });
 }
 
 // src/suite/components/suite-bottom-nav.tsx
@@ -1915,6 +2000,7 @@ function SuiteBottomNav({
               Link,
               {
                 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(
@@ -2544,8 +2630,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] = useState8(SIDEBAR_DEFAULT_WIDTH);
+function useSidebarWidth(storageKey, defaultWidth = SIDEBAR_DEFAULT_WIDTH) {
+  const fallbackWidth = snapWidth(clampWidth(defaultWidth));
+  const [width, setWidth] = useState8(fallbackWidth);
   const [narrowViewport, setNarrowViewport] = useState8(false);
   const collapsed = narrowViewport || width <= SIDEBAR_COLLAPSE_THRESHOLD;
   useEffect7(() => {
@@ -2579,17 +2666,17 @@ function useSidebarWidth(storageKey) {
   const setCollapsed = useCallback3(
     (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 = useCallback3(() => {
-    setWidth(SIDEBAR_DEFAULT_WIDTH);
-    persist(SIDEBAR_DEFAULT_WIDTH);
-  }, [persist]);
+    setWidth(fallbackWidth);
+    persist(fallbackWidth);
+  }, [fallbackWidth, persist]);
   const startResize = useCallback3(
     (event) => {
       event.preventDefault();
@@ -2612,7 +2699,17 @@ function useSidebarWidth(storageKey) {
     },
     [persist, width]
   );
-  return { width, collapsed, setCollapsed, resetWidth, startResize };
+  const resizeBy = useCallback3(
+    (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
@@ -2809,6 +2906,7 @@ function SuiteSettingsMobileNav({
           "button",
           {
             type: "button",
+            id: item.id,
             "data-test": item.testId,
             onClick: () => onSelect(item.href),
             "aria-current": active ? "page" : void 0,
@@ -2881,67 +2979,62 @@ function SuiteSidebar({
               collapsed ? "px-1.5 py-2" : "p-2"
             ),
             children: [
-              /* @__PURE__ */ jsxs18(
-                "nav",
-                {
-                  "aria-label": "Pages",
-                  className: "shrink-0 space-y-0.5",
-                  children: [
-                    /* @__PURE__ */ jsx21("div", { className: cn("mb-3", collapsed && "flex justify-center"), children: renderNode(contextSwitcher, collapsed) }),
-                    /* @__PURE__ */ jsx21("div", { className: "space-y-0.5", children: navItems.map((item) => {
-                      const Icon = item.icon;
-                      const active = Boolean(item.active);
-                      const link = /* @__PURE__ */ jsxs18(
-                        Link2,
-                        {
-                          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__ */ jsx21(
-                              "span",
-                              {
-                                className: cn(
-                                  "relative flex h-4 w-4 shrink-0 items-center justify-center",
-                                  item.iconClassName
-                                ),
-                                "aria-hidden": true,
-                                children: /* @__PURE__ */ jsx21(
-                                  Icon,
-                                  {
-                                    className: "h-full w-full",
-                                    strokeWidth: active ? 2 : 1.75
-                                  }
-                                )
-                              }
+              /* @__PURE__ */ jsxs18("nav", { "aria-label": "Pages", className: "shrink-0 space-y-0.5", children: [
+                /* @__PURE__ */ jsx21("div", { className: cn("mb-3", collapsed && "flex justify-center"), children: renderNode(contextSwitcher, collapsed) }),
+                /* @__PURE__ */ jsx21("div", { className: "space-y-0.5", children: navItems.map((item) => {
+                  var _a;
+                  const Icon = item.icon;
+                  const active = Boolean(item.active);
+                  const link = /* @__PURE__ */ jsxs18(
+                    Link2,
+                    {
+                      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__ */ jsx21(
+                          "span",
+                          {
+                            className: cn(
+                              "relative flex h-4 w-4 shrink-0 items-center justify-center",
+                              item.iconClassName
                             ),
-                            /* @__PURE__ */ jsx21(
-                              "span",
+                            "aria-hidden": true,
+                            children: /* @__PURE__ */ jsx21(
+                              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__ */ jsx21(
+                          "span",
+                          {
+                            className: cn(
+                              "relative truncate",
+                              active ? "text-ph-ink" : "text-ph-subtle group-hover:text-ph-ink",
+                              collapsed && "sr-only"
                             ),
-                            !collapsed && item.badge ? /* @__PURE__ */ jsx21("span", { className: "relative ml-auto shrink-0", children: item.badge }) : null
-                          ]
-                        },
-                        item.label
-                      );
-                      return collapsed ? /* @__PURE__ */ jsx21(Tooltip, { content: item.label, side: "right", children: link }, item.label) : link;
-                    }) })
-                  ]
-                }
-              ),
+                            children: item.label
+                          }
+                        ),
+                        !collapsed && item.badge ? /* @__PURE__ */ jsx21("span", { className: "relative ml-auto shrink-0", children: item.badge }) : null
+                      ]
+                    },
+                    item.label
+                  );
+                  return collapsed ? /* @__PURE__ */ jsx21(Tooltip, { content: item.label, side: "right", children: link }, item.label) : link;
+                }) })
+              ] }),
               secondaryNav ? /* @__PURE__ */ jsx21(
                 "div",
                 {
@@ -2966,11 +3059,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__ */ jsx21("div", { className: "ml-auto shrink-0", children: renderNode(footerExtras, collapsed) }) : null
+                  footerExtras ? /* @__PURE__ */ jsx21("div", { className: cn("shrink-0", collapsed ? "mt-2" : "ml-auto"), children: renderNode(footerExtras, collapsed) }) : null
                 ]
               }
             )
@@ -2992,6 +3085,7 @@ function SuiteAppLayout({
   collapsed = false,
   lockMainScroll = false,
   onStartResize,
+  onResizeBy,
   onResetWidth,
   className
 }) {
@@ -2999,12 +3093,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__ */ jsxs19(
           "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: [
@@ -3015,9 +3112,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
             ]
@@ -3033,6 +3144,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