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

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 }
@@ -2205,23 +2242,24 @@ function SuiteUserMenu({
   settingsHref,
   onSignOut,
   fallbackInitials,
+  showSignOutAction = false,
   dataTest = "suite-user-menu",
   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,
@@ -2231,7 +2269,7 @@ function SuiteUserMenu({
       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 +2288,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
@@ -2935,8 +2984,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 +3020,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 +3053,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
@@ -3409,67 +3469,60 @@ 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) => {
+                  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
                             ),
-                            /* @__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 +3547,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 +3573,7 @@ function SuiteAppLayout({
   collapsed = false,
   lockMainScroll = false,
   onStartResize,
+  onResizeBy,
   onResetWidth,
   className
 }) {
@@ -3527,12 +3581,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 min-h-dvh lg:h-screen lg: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 +3600,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 +3632,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