@xeplr/ui-account 1.0.0 → 1.0.1

package/package.json

@@ -1,15 +1,35 @@
 {
   "name": "@xeplr/ui-account",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Account UI: auth, profile, RBAC admin, tenant management — React controller hooks and designs",
   "type": "module",
   "main": "src/index.js",
-  "files": ["src/"],
-  "keywords": ["auth", "account", "profile", "react", "hooks", "login", "register", "rbac", "multi-tenancy"],
+  "files": [
+    "src/"
+  ],
+  "keywords": [
+    "auth",
+    "account",
+    "profile",
+    "react",
+    "hooks",
+    "login",
+    "register",
+    "rbac",
+    "multi-tenancy"
+  ],
   "author": "xeplr",
   "license": "MIT",
-  "repository": { "type": "git", "url": "https://github.com/Xeplr/xeplr-ui-account" },
-  "publishConfig": { "access": "public" },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Xeplr/xeplr-ui-account"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@xeplr/ui-utils": "^1.0.0"
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0"

package/src/activeScope.js

@@ -0,0 +1,46 @@
+const STORAGE_PREFIX = 'xeplr:activeScope:';
+
+/**
+ * The app's active value at a given MT level (l1, l2, ...) — e.g. the current
+ * company at l1, workspace at l2. Auth doesn't know or care what it means:
+ * it's a bare value per level, mirroring how userTenantsMapping stores a bare
+ * {level, value} row server-side. api.js's authFetch reads this (per the
+ * level's header, from registerMTs() — see mt.js) and attaches it to every
+ * request.
+ *
+ *   setActiveScope('l1', { id: 'acme-co', name: 'Acme Co' });
+ *   getActiveScope('l1');   // => { id: 'acme-co', name: 'Acme Co' }
+ */
+export function getActiveScope(level) {
+  try {
+    const raw = localStorage.getItem(STORAGE_PREFIX + level);
+    return raw ? JSON.parse(raw) : null;
+  } catch (e) {
+    return null;
+  }
+}
+
+export function setActiveScope(level, scope) {
+  try {
+    if (scope) localStorage.setItem(STORAGE_PREFIX + level, JSON.stringify(scope));
+    else localStorage.removeItem(STORAGE_PREFIX + level);
+  } catch (e) {}
+}
+
+/**
+ * Clear one level's scope, or every level if omitted (e.g. on logout).
+ */
+export function clearActiveScope(level) {
+  if (level) {
+    setActiveScope(level, null);
+    return;
+  }
+  try {
+    var keys = [];
+    for (var i = 0; i < localStorage.length; i++) {
+      var key = localStorage.key(i);
+      if (key && key.indexOf(STORAGE_PREFIX) === 0) keys.push(key);
+    }
+    keys.forEach(function(key) { localStorage.removeItem(key); });
+  } catch (e) {}
+}

package/src/adminApi.js

@@ -37,32 +37,3 @@ export function toggleModuleRole({ module, action, roleId, assign }) {
     body: JSON.stringify({ module, action, roleId, assign }),
   });
 }
-
-// ─── Tenant management (Super Admin) ───
-
-export function getTenants(level) {
-  var url = '/auth/api/admin/tenants';
-  if (level) url += '?level=' + level;
-  return authFetch(url);
-}
-
-export function saveTenant(data) {
-  return authFetch('/auth/api/admin/tenants', {
-    method: 'POST',
-    body: JSON.stringify(data),
-  });
-}
-
-export function deleteTenant(id) {
-  return authFetch('/auth/api/admin/tenants/delete', {
-    method: 'POST',
-    body: JSON.stringify({ id }),
-  });
-}
-
-export function assignUserTenant({ userId, tenantId, level }) {
-  return authFetch('/auth/api/admin/tenants/assign-user', {
-    method: 'POST',
-    body: JSON.stringify({ userId, tenantId, level }),
-  });
-}

package/src/api.js

@@ -1,4 +1,6 @@
 import { getToken, setToken, getRefreshToken, setRefreshToken, clearAuth } from './token.js';
+import { getActiveScope, clearActiveScope } from './activeScope.js';
+import { getMtConfig } from './mt.js';
 
 let _baseUrl = '';
 let _onSessionExpired = null;
@@ -64,8 +66,23 @@ async function refreshAccessToken() {
 }
 
 /**
- * Authenticated fetch with auto-refresh.
- * Attaches Bearer token, retries once on 401 after refreshing.
+ * Absorb a server-issued sliding-refresh token. When the access token was
+ * expired-but-within-tolerance, the API serves the request normally and hands
+ * back a fresh token via the `X-New-Token` header (see @xeplr/auth
+ * authMiddleware). We just swap it into storage — no gating, no retry. This is
+ * the happy path; it means most expiries never produce a 401 at all.
+ */
+function absorbNewToken(res) {
+  try {
+    const fresh = res.headers.get('X-New-Token');
+    if (fresh) setToken(fresh);
+  } catch (e) {}
+}
+
+/**
+ * Authenticated fetch with sliding refresh.
+ * Attaches Bearer token; absorbs X-New-Token off every response. The 401→refresh
+ * path below is now only a fallback for a token past the whole tolerance window.
  */
 export async function authFetch(endpoint, options = {}) {
   const url = endpoint.startsWith('http') ? endpoint : `${getBaseUrl()}${endpoint}`;
@@ -80,23 +97,27 @@ export async function authFetch(endpoint, options = {}) {
     headers['Authorization'] = `Bearer ${token}`;
   }
 
-  // Attach active tenant from session
-  try {
-    var tenantRaw = localStorage.getItem('xeplr:activeTenant');
-    if (tenantRaw) {
-      var tenant = JSON.parse(tenantRaw);
-      if (tenant && tenant.id) headers['X-Tenant-Id'] = tenant.id;
-    }
-  } catch (e) {}
+  // Attach the app's active scope (e.g. company/workspace) per configured MT
+  // level — see mt.js's registerMTs() and activeScope.js.
+  const mtConfig = getMtConfig();
+  Object.keys(mtConfig.slots).forEach((level) => {
+    const slot = mtConfig.slots[level];
+    const scope = getActiveScope(level);
+    if (scope && scope.id) headers[slot.header] = scope.id;
+  });
 
   let res = await fetch(url, { ...options, headers });
+  absorbNewToken(res);
 
-  // If 401, try refreshing the token and retry once
+  // Fallback: token is past the tolerance window (truly dead) → rotate via the
+  // refresh token and retry once. With server-side sliding refresh this rarely
+  // fires; the tolerance window absorbs ordinary expiries above.
   if (res.status === 401) {
     const refreshed = await refreshAccessToken();
     if (refreshed) {
       headers['Authorization'] = `Bearer ${getToken()}`;
       res = await fetch(url, { ...options, headers });
+      absorbNewToken(res);
     }
   }
 
@@ -157,7 +178,7 @@ export function resetPassword({ token, newPassword }) {
 export function changePassword({ currentPassword, newPassword }) {
   return authFetch('/auth/api/change-password', {
     method: 'POST',
-    body: JSON.stringify({ currentPassword, newPassword }),
+    body: JSON.stringify({ oldPassword: currentPassword, newPassword }),
   });
 }
 
@@ -172,8 +193,29 @@ export function updateProfile(fields) {
   });
 }
 
-export function getMyTenants() {
-  return authFetch('/auth/api/my-tenants');
+/**
+ * Upload a new profile picture. Bypasses authFetch's JSON Content-Type (the
+ * browser sets multipart/form-data with the right boundary itself when the
+ * body is a FormData — setting it manually breaks the boundary).
+ */
+export async function uploadAvatar(file) {
+  const formData = new FormData();
+  formData.append('avatar', file);
+
+  const headers = {};
+  const token = getToken();
+  if (token) headers['Authorization'] = `Bearer ${token}`;
+
+  const res = await fetch(`${getBaseUrl()}/auth/api/profile/avatar`, {
+    method: 'POST',
+    headers,
+    body: formData,
+  });
+  const data = await res.json();
+  if (!res.ok) {
+    throw new Error(data.error || 'Something went wrong');
+  }
+  return data;
 }
 
 export function logoutUser() {
@@ -181,6 +223,7 @@ export function logoutUser() {
   const accessToken = getToken();
 
   clearAuth();
+  clearActiveScope();
 
   // Best-effort server-side cleanup
   if (refreshToken) {

package/src/authRoutes.jsx

@@ -0,0 +1,125 @@
+import { isValidElement } from 'react';
+import { Route } from 'react-router-dom';
+import { ProtectedRoute } from './ProtectedRoute.jsx';
+import {
+  LoginPage, RegisterPage, ForgotPasswordPage, ResetPasswordPage, ActivatePage,
+  NotActivatedPage, ProfilePage, ChangePasswordPage,
+  UserRolesPage, AccessMatrixPage, MasterSettingsPage
+} from './pages.jsx';
+
+/**
+ * The auth-UI route table — the single source of truth for auth page paths.
+ *
+ *   group 'public'  → open (login, register, activate, …)
+ *   group 'account' → login required (profile, change-password, …)
+ *   group 'admin'   → login required (RBAC/master screens; add page/roles to gate further)
+ */
+var MANIFEST = [
+  { key: 'login',          path: '/auth/login',                 Page: LoginPage,          group: 'public' },
+  { key: 'register',       path: '/auth/register',              Page: RegisterPage,       group: 'public' },
+  { key: 'forgotPassword', path: '/auth/forgot-password',       Page: ForgotPasswordPage, group: 'public' },
+  { key: 'resetPassword',  path: '/auth/reset-password',        Page: ResetPasswordPage,  group: 'public' },
+  { key: 'activate',       path: '/auth/activate',              Page: ActivatePage,       group: 'public' },
+  { key: 'notActivated',   path: '/auth/not-activated',         Page: NotActivatedPage,   group: 'public' },
+  { key: 'profile',        path: '/auth/profile',               Page: ProfilePage,        group: 'account' },
+  { key: 'changePassword', path: '/auth/change-password',       Page: ChangePasswordPage, group: 'account' },
+  { key: 'userRoles',      path: '/auth/admin/user-roles',      Page: UserRolesPage,      group: 'admin' },
+  { key: 'accessMatrix',   path: '/auth/admin/access-matrix',   Page: AccessMatrixPage,   group: 'admin' },
+  { key: 'masterSettings', path: '/auth/admin/master-settings', Page: MasterSettingsPage, group: 'admin' }
+];
+
+var _pathByKey = {};
+MANIFEST.forEach(function (e) { _pathByKey[e.key] = e.path; });
+
+/**
+ * Resolve a manifest key to its canonical path — use it for cross-links so nothing
+ * hardcodes a URL:  <Link to={authPath('register')}>Register</Link>
+ */
+export function authPath(key) {
+  return _pathByKey[key] || null;
+}
+
+// /auth/login → /_login, /auth/admin/user-roles → /_admin/user-roles.
+// A stable "always the pristine framework page" escape hatch that ignores overrides.
+function rawPathOf(path) {
+  return path.replace(/^\/auth\//, '/_');
+}
+
+// Turn an override entry into the element to render at the canonical path.
+function resolveElement(entry, ov) {
+  var Page = entry.Page;
+  if (!ov) return <Page />;                          // framework default
+  if (isValidElement(ov)) return ov;                 // bare element  → full replace
+  if (ov.element) return ov.element;                 // { element }   → full replace
+  if (ov.design) return <Page design={ov.design} />; // { design }    → re-skin (keeps controller)
+  return <Page />;                                   // e.g. only { path } supplied
+}
+
+/**
+ * Emit every auth UI route in one call — the app writes no route boilerplate.
+ *
+ *   <Routes>
+ *     {authRoutes()}                                 // all framework defaults
+ *     {authRoutes({ login: { design: MyLogin } })}   // custom login, everything else default
+ *     {authRoutes({}, { layout: <Nav/> })}           // account/admin pages inside your shell
+ *   </Routes>
+ *
+ * @param {object} [overrides]  map of manifest key → how to render it:
+ *   - { design: MyDesign }   re-skin: framework controller + validation, your look
+ *                            (design receives the controller's props)
+ *   - { element: <X/> }      full replace: your element, framework logic ignored
+ *   - a React element        shorthand for { element }
+ *   - false | null           drop this route (app doesn't want it)
+ *   - { path: '/x', ... }    remount at a different path (combine with design/element)
+ * @param {object} [opts]
+ *   - layout: element        wrap account+admin pages in a parent layout route
+ *                            (your <Nav/> with an <Outlet/>); public pages stay bare
+ *   - raw: false             disable the /_<name> escape-hatch routes (on by default)
+ *   - loginPath: string      ProtectedRoute redirect target (default: manifest login path)
+ * @returns {Array} an array of <Route> — spread it inside <Routes>
+ */
+export function authRoutes(overrides, opts) {
+  overrides = overrides || {};
+  opts = opts || {};
+  var loginPath = opts.loginPath || _pathByKey.login;
+  var routes = [];
+  var layoutChildren = [];   // account+admin canonical routes, nested under opts.layout
+
+  function protect(el) {
+    return <ProtectedRoute loginPath={loginPath}>{el}</ProtectedRoute>;
+  }
+
+  MANIFEST.forEach(function (entry) {
+    var ov = overrides[entry.key];
+    if (ov === false || ov === null) return;   // opted out
+
+    var path = (ov && ov.path) || entry.path;
+    var el = resolveElement(entry, ov);
+
+    // Canonical route (override-aware).
+    if (entry.group === 'public') {
+      routes.push(<Route key={entry.key} path={path} element={el} />);
+    } else if (opts.layout) {
+      layoutChildren.push(<Route key={entry.key} path={path} element={el} />);
+    } else {
+      routes.push(<Route key={entry.key} path={path} element={protect(el)} />);
+    }
+
+    // Escape-hatch route: always the pristine framework page, ignores overrides.
+    if (opts.raw !== false) {
+      var Page = entry.Page;
+      var rawEl = entry.group === 'public' ? <Page /> : protect(<Page />);
+      routes.push(<Route key={'_' + entry.key} path={rawPathOf(entry.path)} element={rawEl} />);
+    }
+  });
+
+  if (opts.layout && layoutChildren.length) {
+    routes.push(
+      <Route key="__auth_layout" element={protect(opts.layout)}>
+        {layoutChildren}
+      </Route>
+    );
+  }
+
+  return routes;
+}

package/src/designs/AccountMenu.jsx

@@ -0,0 +1,71 @@
+import { memo } from 'react';
+import { Link } from 'react-router-dom';
+
+// The settings trigger — a gear icon, parallel to NotificationsBell's bell
+// icon — and its dropdown. Used two places: top-right of the top bar
+// (`placement="bottom"`, the default — trigger is near the top of the
+// viewport, so the menu opens downward) and the bottom of the drawer rail
+// (`placement="top"` — trigger is near the bottom of the viewport, so the
+// menu opens upward instead of running off-screen). Memoized and given only
+// its own slice of props — it does not receive drawerOpen/drawerItems, so
+// drawer interactions never touch it. accountItems is already resolved +
+// role-filtered + ordered (overrides above builtin) by useNavController —
+// this component just renders whatever it's handed. `triggerLabel` is
+// optional text next to the gear icon — the drawer passes "Settings" when
+// expanded (matching how its other items show a label), omits it when
+// collapsed; the top bar never passes it (icon-only, no room).
+function AccountMenu({
+  user, accountItems, placement, triggerLabel,
+  accountOpen, toggleAccount, closeAccount, accountRef, logout
+}) {
+  var label = (user && (user.name || user.email)) || 'Account';
+  var initial = label.charAt(0).toUpperCase();
+
+  return (
+    <div ref={accountRef} className={'xeplr-nav-account' + (accountOpen ? ' xeplr-nav-account-open' : '')}>
+      <button
+        type="button"
+        className={'xeplr-nav-settings-trigger' + (triggerLabel ? ' xeplr-nav-settings-trigger-labeled' : '')}
+        onClick={toggleAccount}
+        aria-haspopup="menu"
+        aria-expanded={accountOpen}
+        aria-label="Settings"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="3" />
+          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+        </svg>
+        {triggerLabel && <span className="xeplr-nav-settings-trigger-label">{triggerLabel}</span>}
+      </button>
+
+      {accountOpen && (
+        <div className={'xeplr-nav-account-menu' + (placement === 'top' ? ' xeplr-nav-account-menu-top' : '')} role="menu">
+          <div className="xeplr-nav-account-header">
+            {user && user.profilePicUrl
+              ? <img src={user.profilePicUrl} alt="" className="xeplr-nav-avatar xeplr-nav-avatar-img" />
+              : <span className="xeplr-nav-avatar">{initial}</span>}
+            <div className="xeplr-nav-account-header-text">
+              <div className="xeplr-nav-account-name">{label}</div>
+              {user && user.email && user.name && <div className="xeplr-nav-account-email">{user.email}</div>}
+            </div>
+          </div>
+
+          {(accountItems || []).map(function(item) {
+            return (
+              <Link key={item.name} to={item.path} className="xeplr-nav-account-item" role="menuitem" onClick={closeAccount}>
+                {item.name}
+              </Link>
+            );
+          })}
+
+          <div className="xeplr-nav-account-divider" />
+          <button type="button" className="xeplr-nav-account-item xeplr-nav-account-logout" role="menuitem" onClick={logout}>
+            Logout
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default memo(AccountMenu);

package/src/designs/ActivateSample.jsx

@@ -1,11 +1,14 @@
 import { Link } from 'react-router-dom';
 import './auth.css';
 
+// error/success feedback fires as a snackbar (see useActivateController.js,
+// including the "invalid link" case) — this design doesn't render it inline,
+// it just switches which block is visible. `loading`'s in-progress status
+// text stays inline (it's ongoing state, not a transient notification).
 export default function ActivateSample({ token, error, success, loading }) {
   if (!token) {
     return (
       <div className="xeplr-auth-container">
-        <div className="xeplr-auth-alert xeplr-auth-alert-error">Invalid activation link</div>
         <div className="xeplr-auth-links">
           <p><Link to="/auth/register">Register a new account</Link></p>
         </div>
@@ -17,21 +20,10 @@ export default function ActivateSample({ token, error, success, loading }) {
     <div className="xeplr-auth-container">
       <h1>Account Activation</h1>
       {loading && <div className="xeplr-auth-alert">Activating your account...</div>}
-      {error && (
-        <>
-          <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>
-          <div className="xeplr-auth-links">
-            <p><Link to="/auth/login">Go to Login</Link></p>
-          </div>
-        </>
-      )}
-      {success && (
-        <>
-          <div className="xeplr-auth-alert xeplr-auth-alert-success">{success}</div>
-          <div className="xeplr-auth-links">
-            <p><Link to="/auth/login">Go to Login</Link></p>
-          </div>
-        </>
+      {(error || success) && (
+        <div className="xeplr-auth-links">
+          <p><Link to="/auth/login">Go to Login</Link></p>
+        </div>
       )}
     </div>
   );

package/src/designs/ChangePasswordSample.jsx

@@ -1,16 +1,16 @@
 import './auth.css';
 
+// error/success feedback fires as a snackbar (see useChangePasswordController.js)
+// — this design doesn't render it inline.
 export default function ChangePasswordSample({
   currentPassword, setCurrentPassword,
   newPassword, setNewPassword,
   confirmPassword, setConfirmPassword,
-  error, success, loading, handleSubmit
+  loading, handleSubmit
 }) {
   return (
     <div className="xeplr-auth-container">
       <h1>Change Password</h1>
-      {error && <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>}
-      {success && <div className="xeplr-auth-alert xeplr-auth-alert-success">{success}</div>}
       <form onSubmit={handleSubmit}>
         <div className="xeplr-auth-form-group">
           <label htmlFor="xeplr-current-password">Current Password</label>

package/src/designs/ForgotPasswordSample.jsx

@@ -1,12 +1,12 @@
 import { Link } from 'react-router-dom';
 import './auth.css';
 
-export default function ForgotPasswordSample({ email, setEmail, error, success, loading, handleSubmit }) {
+// error/success feedback fires as a snackbar (see useForgotPasswordController.js)
+// — this design doesn't render it inline.
+export default function ForgotPasswordSample({ email, setEmail, loading, handleSubmit }) {
   return (
     <div className="xeplr-auth-container">
       <h1>Forgot Password</h1>
-      {error && <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>}
-      {success && <div className="xeplr-auth-alert xeplr-auth-alert-success">{success}</div>}
       <form onSubmit={handleSubmit}>
         <div className="xeplr-auth-form-group">
           <label htmlFor="xeplr-email">Email</label>

package/src/designs/LoginSample.jsx

@@ -1,11 +1,12 @@
 import { Link } from 'react-router-dom';
 import './auth.css';
 
-export default function LoginSample({ email, setEmail, password, setPassword, error, loading, handleSubmit }) {
+// error/success feedback fires as a snackbar (see useLoginController.js) —
+// this design doesn't render it inline.
+export default function LoginSample({ email, setEmail, password, setPassword, loading, handleSubmit }) {
   return (
     <div className="xeplr-auth-container">
       <h1>Login</h1>
-      {error && <div className="xeplr-auth-alert xeplr-auth-alert-error">{error}</div>}
       <form onSubmit={handleSubmit}>
         <div className="xeplr-auth-form-group">
           <label htmlFor="xeplr-email">Email</label>

package/src/designs/NavDrawer.jsx

@@ -0,0 +1,121 @@
+import { memo, useState, useMemo } from 'react';
+import AccountMenu from './AccountMenu.jsx';
+import NotificationsBell from './NotificationsBell.jsx';
+
+// The ENTIRE nav when drawerItems is non-empty — NavPage renders this instead
+// of (never alongside) the top bar, see pages.jsx. A pure overlay: `position:
+// fixed` (nav.css), pinned to (0,0), full height — it never pushes or resizes
+// anything else on the page, completely decoupled from the app's own content.
+// Two states: icon-only (collapsed, `drawerOpen=false`) and
+// icon+label+groups+search+promo (expanded). Toggled by clicking its own
+// logo. Settings + notifications live in its footer (bottom-pinned) instead
+// of a top bar, since there isn't one — same accountItems/notifications the
+// top bar would have gotten, just rendered here instead.
+//
+// Items are bucketed by their optional `group` — ungrouped items render first
+// (no header), grouped ones under a section header, groups in first-seen order.
+function bucketItems(items) {
+  var ungrouped = [];
+  var groupOrder = [];
+  var groups = {};
+  items.forEach(function(item) {
+    if (!item.group) {
+      ungrouped.push(item);
+      return;
+    }
+    if (!groups[item.group]) {
+      groups[item.group] = [];
+      groupOrder.push(item.group);
+    }
+    groups[item.group].push(item);
+  });
+  return { ungrouped: ungrouped, groupOrder: groupOrder, groups: groups };
+}
+
+function NavDrawer({
+  drawerOpen, toggleDrawer, drawerItems, expandedLogo, logo, drawerPromo,
+  user, accountItems, notifications, accountOpen, toggleAccount, closeAccount, accountRef, logout
+}) {
+  var [query, setQuery] = useState('');
+
+  var visibleItems = useMemo(function() {
+    if (!drawerOpen || !query.trim()) return drawerItems;
+    var q = query.trim().toLowerCase();
+    return drawerItems.filter(function(item) { return item.name.toLowerCase().indexOf(q) !== -1; });
+  }, [drawerItems, query, drawerOpen]);
+
+  var buckets = useMemo(function() { return bucketItems(visibleItems); }, [visibleItems]);
+
+  function renderItem(item) {
+    return (
+      <button
+        key={item.name}
+        type="button"
+        className="xeplr-nav-drawer-link"
+        onClick={item.clickHandler}
+        title={item.name}
+      >
+        {item.icon && <span className="xeplr-nav-drawer-icon">{item.icon}</span>}
+        {drawerOpen && <span className="xeplr-nav-drawer-label">{item.name}</span>}
+      </button>
+    );
+  }
+
+  return (
+    <aside className={'xeplr-nav-drawer' + (drawerOpen ? ' xeplr-nav-drawer-expanded' : ' xeplr-nav-drawer-collapsed')}>
+      <button
+        type="button"
+        className="xeplr-nav-drawer-toggle"
+        onClick={toggleDrawer}
+        aria-label={drawerOpen ? 'Collapse menu' : 'Expand menu'}
+        aria-expanded={drawerOpen}
+      >
+        {logo && <img src={logo} alt="" className="xeplr-nav-drawer-logo" />}
+      </button>
+      {/* Own row below the toggle, not squeezed inline beside it — expandedLogo
+          is typically a stacked icon+wordmark lockup (near-square, not a wide
+          banner), so it needs real height to stay legible, not the icon's 22px.
+          Additive, not a swap of the toggle's own image — no flicker either way. */}
+      {drawerOpen && expandedLogo && (
+        <img src={expandedLogo} alt="" className="xeplr-nav-drawer-expanded-logo" />
+      )}
+
+      {drawerOpen && (
+        <input
+          type="search"
+          className="xeplr-nav-drawer-search"
+          placeholder="Search"
+          value={query}
+          onChange={function(e) { setQuery(e.target.value); }}
+        />
+      )}
+
+      <nav className="xeplr-nav-drawer-links">
+        {buckets.ungrouped.map(renderItem)}
+        {buckets.groupOrder.map(function(groupName) {
+          return (
+            <div key={groupName} className="xeplr-nav-drawer-group">
+              {drawerOpen && <div className="xeplr-nav-drawer-group-label">{groupName}</div>}
+              {buckets.groups[groupName].map(renderItem)}
+            </div>
+          );
+        })}
+        {visibleItems.length === 0 && drawerOpen && <div className="xeplr-nav-drawer-empty">No matches</div>}
+      </nav>
+
+      {drawerOpen && drawerPromo && <div className="xeplr-nav-drawer-promo">{drawerPromo}</div>}
+
+      <div className="xeplr-nav-drawer-footer">
+        <NotificationsBell notifications={notifications} label={drawerOpen ? 'Notifications' : undefined} />
+        <AccountMenu
+          placement="top" triggerLabel={drawerOpen ? 'Settings' : undefined}
+          user={user} accountItems={accountItems}
+          accountOpen={accountOpen} toggleAccount={toggleAccount} closeAccount={closeAccount}
+          accountRef={accountRef} logout={logout}
+        />
+      </div>
+    </aside>
+  );
+}
+
+export default memo(NavDrawer);