@xeplr/ui-account 1.0.0 → 1.0.2

package/src/designs/nav.css

@@ -0,0 +1,439 @@
+/* Uses the shared --xeplr-* theme tokens (see theme.css) — correct in both
+   light and dark automatically, as long as the app applies a .xeplr-theme-*
+   class (see ThemeContext.jsx / theme.css usage notes). */
+
+/* ─── Top bar: 10% / 80% / 10% ───
+   flexbox, not grid: fixed percentage grid tracks don't account for `gap`
+   or box-sizing the way flex-basis does, and 10%+80%+10% already sums to
+   100% before the gaps/padding are added — grid pushed the real content
+   width past the container and forced a horizontal scrollbar. flex-basis
+   percentages combined with box-sizing:border-box and the default
+   flex-shrink correctly negotiate the gaps back out of the 100%. */
+
+.xeplr-nav-top {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  background: var(--xeplr-bg-tertiary);
+  border-bottom: 1px solid var(--xeplr-border-primary);
+}
+
+.xeplr-nav-left { flex: 0 1 10%; display: flex; align-items: center; gap: 8px; min-width: 0; }
+.xeplr-nav-right { flex: 0 1 10%; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
+
+.xeplr-nav-logo { height: 32px; width: auto; display: block; }
+
+.xeplr-nav-middle {
+  flex: 1 1 80%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+/* ─── Settings trigger + dropdown ─── */
+
+.xeplr-nav-account { position: relative; }
+
+.xeplr-nav-settings-trigger {
+  position: relative;
+  width: 34px;
+  height: 34px;
+  border: none;
+  background: none;
+  border-radius: 50%;
+  color: var(--xeplr-text-secondary);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  align-self: center;
+}
+.xeplr-nav-settings-trigger:hover { background: var(--xeplr-bg-hover); color: var(--xeplr-text-primary); }
+.xeplr-nav-settings-trigger svg { width: 19px; height: 19px; flex-shrink: 0; }
+
+/* Drawer, expanded: a full-width labeled row instead of a circular icon
+   button, matching .xeplr-nav-drawer-link's look. */
+.xeplr-nav-settings-trigger-labeled {
+  width: 100%;
+  height: auto;
+  border-radius: 6px;
+  display: flex;
+  justify-content: flex-start;
+  gap: 10px;
+  padding: 9px 10px;
+}
+.xeplr-nav-settings-trigger-label { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.xeplr-nav-avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: var(--xeplr-accent);
+  color: var(--xeplr-accent-text);
+  display: grid;
+  place-items: center;
+  font-size: 14px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.xeplr-nav-avatar-img { object-fit: cover; }
+
+.xeplr-nav-bell {
+  position: relative;
+  width: 34px;
+  height: 34px;
+  border: none;
+  background: none;
+  border-radius: 50%;
+  color: var(--xeplr-text-secondary);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  align-self: center;
+}
+.xeplr-nav-bell:hover { background: var(--xeplr-bg-hover); color: var(--xeplr-text-primary); }
+.xeplr-nav-bell svg { width: 19px; height: 19px; flex-shrink: 0; }
+
+/* Drawer, expanded: a full-width labeled row instead of a circular icon
+   button, matching .xeplr-nav-drawer-link's look. */
+.xeplr-nav-bell-labeled {
+  position: relative;
+  width: 100%;
+  height: auto;
+  border-radius: 6px;
+  display: flex;
+  justify-content: flex-start;
+  gap: 10px;
+  padding: 9px 10px;
+}
+.xeplr-nav-bell-labeled .xeplr-nav-badge { position: static; margin-left: auto; }
+.xeplr-nav-bell-label { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.xeplr-nav-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: var(--xeplr-danger);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+  display: grid;
+  place-items: center;
+}
+
+.xeplr-nav-account-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 220px;
+  background: var(--xeplr-bg-tertiary);
+  border: 1px solid var(--xeplr-border-primary);
+  border-radius: 8px;
+  box-shadow: var(--xeplr-shadow-md);
+  padding: 6px;
+  z-index: 60;
+}
+
+/* Drawer placement: trigger sits near the bottom-left of the viewport, so the
+   menu opens upward (not off the bottom edge) and rightward from the trigger
+   (not off the left edge — the default `right: 0` anchoring would run the
+   menu's width past x=0 given how narrow/close-to-the-edge the drawer is). */
+.xeplr-nav-account-menu-top {
+  top: auto;
+  bottom: calc(100% + 8px);
+  left: 0;
+  right: auto;
+}
+
+.xeplr-nav-account-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px 10px;
+  margin-bottom: 6px;
+  border-bottom: 1px solid var(--xeplr-border-secondary);
+}
+
+.xeplr-nav-account-header-text { min-width: 0; }
+.xeplr-nav-account-name { font-size: 13px; font-weight: 600; color: var(--xeplr-text-primary); }
+.xeplr-nav-account-email { margin-top: 2px; font-size: 12px; color: var(--xeplr-text-muted); }
+
+.xeplr-nav-account-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 8px 10px;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: var(--xeplr-text-primary);
+  font-size: 13px;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.xeplr-nav-account-item:hover { background: var(--xeplr-bg-hover); }
+.xeplr-nav-account-logout { color: var(--xeplr-danger); }
+.xeplr-nav-account-divider { height: 1px; margin: 6px 0; background: var(--xeplr-border-secondary); }
+
+/* ─── Drawer rail — pinned to the viewport's top-left corner (0,0), full
+   height, `position: fixed` with a high z-index. A pure overlay: it never
+   pushes, offsets, or otherwise interacts with the top bar or the app's own
+   content — there IS no top bar when this renders (see pages.jsx, they're
+   mutually exclusive), and content underneath simply renders at its normal
+   position, with the drawer floating on top of whatever's in that corner.
+   No overflow set here (default: visible) so the account-menu popup in the
+   footer can escape this box — only the scrollable nav-links list below
+   clips/scrolls on its own. */
+
+.xeplr-nav-drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  /* ABOVE .xeplr-nav-floating (400). Both are global chrome, so the tie goes
+     to the one being operated: widen the drawer and it reaches under the
+     floating bell/settings in the top-right corner, where those two icons
+     swallow clicks meant for the drawer — the resize handle's top edge
+     included. The floating cluster keeps 400 and still outranks page-level
+     chrome, which is what that value is actually for.
+
+     THE CEILING THIS SETS: a real full-screen modal must out-stack this, or
+     the rail punches through it. Consumers with one are expected to sit above
+     500 — xeplr-bi's .dsh-expanded-backdrop was moved to 600 when this
+     changed. */
+  z-index: 500;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  padding: 16px 10px;
+  background: var(--xeplr-bg-tertiary);
+  border-right: 1px solid var(--xeplr-border-primary);
+  box-shadow: var(--xeplr-shadow-lg);
+  transition: width 0.15s;
+  flex-shrink: 0;
+}
+
+.xeplr-nav-drawer-collapsed { width: 60px; }
+/* The 240px is the DEFAULT only — NavDrawer sets an inline width from the
+   remembered drag, which outranks this. Kept here so the drawer still has a
+   sane width if the controller's stored value is unreadable. */
+.xeplr-nav-drawer-expanded { width: 240px; padding: 16px; }
+
+/* Mid-drag the width changes every pointermove, and a 0.15s transition on it
+   means the edge chases the cursor instead of tracking it. Kill it for the
+   duration; the toggle animation is unaffected because it never coincides
+   with a drag. */
+.xeplr-nav-drawer-resizing { transition: none; }
+
+/* ── the resize handle ─────────────────────────────────────────────────
+   Straddles the right border (right: -3px on a 6px strip) rather than sitting
+   inside it, so the grab target covers the edge the user is actually aiming
+   at — an inside-only strip makes you undershoot into the nav. */
+.xeplr-nav-drawer-resize {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  /* Invisible until wanted: an always-on divider line reads as a border and
+     invites clicks that do nothing. */
+  background: transparent;
+  transition: background 0.12s;
+  /* Above the drawer's own content so the grab always lands on the handle.
+     Local to the drawer's stacking context, so it stays under the footer's
+     account popup rather than competing with the page. */
+  z-index: 1;
+}
+.xeplr-nav-drawer-resize:hover,
+.xeplr-nav-drawer-resize:focus-visible,
+.xeplr-nav-drawer-resizing .xeplr-nav-drawer-resize {
+  background: var(--xeplr-accent, #2563eb);
+}
+/* The focus ring would be a 6px sliver and easy to miss; the accent fill above
+   is the visible focus state, so the default outline only gets in its way. */
+.xeplr-nav-drawer-resize:focus-visible { outline: none; }
+
+/* Set on <body> for the length of the drag (see useNavController). A drag
+   routinely outruns the 6px handle, and without this the cursor flips back to
+   a caret and the page starts blue-selecting the moment it does. */
+body.xeplr-nav-resizing { user-select: none; }
+body.xeplr-nav-resizing * { cursor: col-resize !important; }
+
+.xeplr-nav-drawer-toggle {
+  display: block;
+  flex-shrink: 0;
+  border: none;
+  background: none;
+  padding: 0;
+  margin-bottom: 12px;
+  cursor: pointer;
+  align-self: flex-start;
+}
+/* CENTRED WHEN COLLAPSED, like everything under it.
+   The rail's links get `justify-content: center`, so their icons sit in the
+   middle of the 40px of content width. The toggle had `padding: 0` and
+   `align-self: flex-start`, which pinned the logo hard against the left edge —
+   so the mark and the first menu icon were visibly on two different vertical
+   lines, which is the one thing a rail of icons cannot afford. */
+.xeplr-nav-drawer-collapsed .xeplr-nav-drawer-toggle { align-self: center; }
+
+/* The collapse affordance, when the lockup below is carrying the brand. */
+.xeplr-nav-drawer-collapse {
+  display: block;
+  width: 22px;
+  line-height: 22px;
+  text-align: center;
+  font-size: 15px;
+  color: var(--xeplr-text-secondary, #8b8f9a);
+}
+
+/* Fixed, small, and never swapped for a different image (see NavDrawer.jsx) —
+   deliberately smaller than the collapsed rail's content width (60px rail -
+   20px padding = 40px) so it can never force the rail wider than intended. */
+.xeplr-nav-drawer-logo { width: 22px; height: 22px; object-fit: contain; display: block; }
+
+/* Its own row, real height — typically a stacked icon+wordmark lockup
+   (near-square, not a wide banner), so 22px (the toggle icon's height) would
+   crush the wordmark to a few illegible pixels. */
+.xeplr-nav-drawer-expanded-logo {
+  height: 40px;
+  width: auto;
+  object-fit: contain;
+  display: block;
+  margin-bottom: 16px;
+  align-self: flex-start;
+}
+
+.xeplr-nav-drawer-search {
+  width: 100%;
+  margin-bottom: 12px;
+  padding: 8px 10px;
+  border: 1px solid var(--xeplr-border-secondary);
+  border-radius: 6px;
+  background: var(--xeplr-bg-primary);
+  color: var(--xeplr-text-primary);
+  font-size: 13px;
+}
+
+.xeplr-nav-drawer-links {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.xeplr-nav-drawer-group { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
+.xeplr-nav-drawer-group-label {
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--xeplr-text-muted);
+}
+
+.xeplr-nav-drawer-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 10px;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: var(--xeplr-text-primary);
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+}
+.xeplr-nav-drawer-link:hover { background: var(--xeplr-bg-hover); }
+.xeplr-nav-drawer-collapsed .xeplr-nav-drawer-link { justify-content: center; }
+
+.xeplr-nav-drawer-icon { display: grid; place-items: center; flex-shrink: 0; }
+.xeplr-nav-drawer-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ── item badges ─────────────────────────────────────────────────────────
+   Optional `item.badge`. The pill takes the remaining width (margin-left
+   auto) so counts line up down the rail instead of tracking label lengths.
+   The label keeps flex:1 so a long name still ellipsises rather than pushing
+   the pill off the edge. */
+.xeplr-nav-drawer-link-badged .xeplr-nav-drawer-label { flex: 1; }
+.xeplr-nav-drawer-badge {
+  margin-left: auto;
+  flex-shrink: 0;
+  min-width: 18px;
+  padding: 1px 6px;
+  border-radius: 9px;
+  background: var(--xeplr-danger, #c0392b);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+}
+/* Collapsed: the rail is icons only, so the count becomes a dot pinned to the
+   icon's corner. `position: relative` on the icon rather than the button
+   because the button is centred and the icon is what the eye is on. */
+.xeplr-nav-drawer-collapsed .xeplr-nav-drawer-icon { position: relative; }
+.xeplr-nav-drawer-dot {
+  position: absolute;
+  top: -2px;
+  right: -3px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--xeplr-danger, #c0392b);
+  /* Against the rail's own background, so the dot reads as ON the icon rather
+     than as part of it. */
+  box-shadow: 0 0 0 2px var(--xeplr-bg-elevated, #fff);
+}
+
+.xeplr-nav-drawer-empty { padding: 10px 12px; color: var(--xeplr-text-muted); font-size: 13px; }
+
+.xeplr-nav-drawer-promo { padding-top: 12px; }
+
+/* Settings (AccountMenu, placement="top") + notifications — the drawer's
+   footer, since there's no top bar for them to live in when the drawer is
+   the whole nav. `.xeplr-nav-drawer-links` already has flex:1, so this and
+   any promo above it are naturally pushed to the bottom without needing
+   their own margin-top:auto. */
+.xeplr-nav-drawer-footer {
+  display: flex;
+  flex-direction: column;
+  /* stretch so the expanded (labeled) rows can go full-width; the collapsed
+     circular icon buttons self-center via their own align-self: center. */
+  align-items: stretch;
+  gap: 6px;
+  padding-top: 12px;
+  margin-top: 12px;
+  border-top: 1px solid var(--xeplr-border-secondary);
+}
+
+/* Opt-in alternative to the drawer footer above (see NavPage's `floatingSettings`
+   prop) — same bell + account trigger, floating over the page instead of
+   pinned to the drawer. Just the two icons themselves, no card/box around
+   them — no background, border, or shadow.
+
+   z-index sits above page-level floating chrome, not below it. The icons
+   themselves never overlap anything, but the account menu drops DOWN over the
+   page — and a settings menu that opens behind a page toolbar is unusable.
+   Global chrome wins over page tools; a consumer's own floating toolbar
+   should stay below this and position itself clear of the icons. */
+.xeplr-nav-floating {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 400;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}

package/src/index.js

@@ -1,9 +1,24 @@
 // API client
-export { configure, registerUser, loginUser, activateAccount, forgotPassword, resetPassword, changePassword, getProfile, updateProfile, logoutUser, getMyTenants, authFetch } from './api.js';
+export { configure, setSessionExpiredHandler, registerUser, loginUser, activateAccount, forgotPassword, resetPassword, changePassword, getMe, getProfile, updateProfile, uploadAvatar, logoutUser, authFetch } from './api.js';
 
 // Token helpers
 export { getToken, setToken, getRefreshToken, setRefreshToken, getUser, setUser, clearAuth, isAuthenticated } from './token.js';
 
+// Multi-tenant levels — call registerMTs() once at app boot with the SAME
+// shape passed to @xeplr/db's registerMTs() on the backend. Teaches authFetch
+// which header to attach for each level, read from activeScope. See mt.js.
+export { registerMTs, getMtConfig } from './mt.js';
+
+// Active scope (e.g. company/workspace), keyed by MT level (l1, l2, ...) — a
+// bare, app-interpreted value per level, attached to every authFetch call as
+// that level's configured header. See activeScope.js.
+export { getActiveScope, setActiveScope, clearActiveScope, getLastScope, setLastScope } from './activeScope.js';
+
+// Where to send the user once a redirect-driven gate (auth, or an app's own
+// gate) resolves — e.g. back to the exact dashboard a deep link pointed at,
+// rather than always home. See returnTo.js.
+export { saveReturnTo, consumeReturnTo } from './returnTo.js';
+
 // Controller hooks
 export { useLoginController } from './useLoginController.js';
 export { useRegisterController } from './useRegisterController.js';
@@ -15,8 +30,7 @@ export { useProfileController } from './useProfileController.js';
 export { useUserRolesController } from './useUserRolesController.js';
 export { useAccessMatrixController } from './useAccessMatrixController.js';
 export { useMasterSettingsController } from './useMasterSettingsController.js';
-export { useTenantController } from './useTenantController.js';
-export { useTenantPickerController, getActiveTenant, setActiveTenant, clearActiveTenant, hasMultipleTenants } from './useTenantPickerController.js';
+export { useNavController } from './useNavController.js';
 
 // Theme
 export { ThemeProvider, useTheme, useThemeStrict, BUILT_IN_THEMES, DEFAULT_THEME } from './ThemeContext.jsx';
@@ -29,13 +43,15 @@ export { AccessGuard } from './AccessGuard.jsx';
 // Admin API (model layer for RBAC management)
 export { getUsers, getRoles, getAccessItems, toggleUserRole, toggleAccessRole, toggleModuleRole } from './adminApi.js';
 export { getMasterItems, saveMasterItem, deleteMasterItem, MASTER_TYPES } from './masterApi.js';
-export { getTenants, saveTenant, deleteTenant, assignUserTenant } from './adminApi.js';
 
 // Design validation (use when building custom designs)
-export { useDesignValidator, LOGIN_RULES, REGISTER_RULES, FORGOT_PASSWORD_RULES, RESET_PASSWORD_RULES, CHANGE_PASSWORD_RULES, PROFILE_RULES, USER_ROLES_MATRIX_RULES, ACCESS_MATRIX_RULES, MASTER_SETTINGS_RULES } from './validateDesign.js';
+export { useDesignValidator, LOGIN_RULES, REGISTER_RULES, FORGOT_PASSWORD_RULES, RESET_PASSWORD_RULES, CHANGE_PASSWORD_RULES, PROFILE_RULES, USER_ROLES_MATRIX_RULES, ACCESS_MATRIX_RULES, MASTER_SETTINGS_RULES, NAV_RULES } from './validateDesign.js';
 
 // Sample designs (use as reference or starting point)
-export { LoginSample, RegisterSample, ForgotPasswordSample, ResetPasswordSample, ActivateSample, NotActivatedSample, ChangePasswordSample, ProfileSample, UserRolesMatrixSample, AccessMatrixSample, MasterSettingsSample, TenantSample } from './designs/index.js';
+export { LoginSample, RegisterSample, ForgotPasswordSample, ResetPasswordSample, ActivateSample, NotActivatedSample, ChangePasswordSample, ProfileSample, UserRolesMatrixSample, AccessMatrixSample, MasterSettingsSample, NavTopSample, AccountMenu, NavDrawer, NavFloatingSettings, NotificationsBell } from './designs/index.js';
+
+// Ready-made pages (controller + sample design wired together; each takes an optional `design` prop)
+export { LoginPage, RegisterPage, ForgotPasswordPage, ResetPasswordPage, ActivatePage, NotActivatedPage, ChangePasswordPage, ProfilePage, UserRolesPage, AccessMatrixPage, MasterSettingsPage, NavPage } from './pages.jsx';
 
-// Ready-made pages (controller + sample design wired together)
-export { LoginPage, RegisterPage, ForgotPasswordPage, ResetPasswordPage, ActivatePage, NotActivatedPage, ChangePasswordPage, ProfilePage, UserRolesPage, AccessMatrixPage, MasterSettingsPage, TenantPage, TenantPickerPage } from './pages.jsx';
+// One-call auth routing — mount every auth page with no boilerplate; override just what you want
+export { authRoutes, authPath } from './authRoutes.jsx';

package/src/mt.js

@@ -0,0 +1,31 @@
+// Frontend counterpart to @xeplr/db's BaseModel.registerMTs() — call this once
+// at app boot with the SAME config object (same level keys, names, headers).
+// There's no shared runtime package between frontend and backend (by design —
+// duplicated by convention); keep one literal config in your own app and
+// import it into both boot entry points so it can't drift.
+//
+//   registerMTs({
+//     l1: { name: 'companyId', header: 'x-company-id' },
+//     l2: { name: 'workspaceId', header: 'x-workspace-id' }
+//   });
+//
+// This only teaches api.js's authFetch which header to attach for each level
+// (read from activeScope.js) — it doesn't validate anything itself.
+
+var SLOT_KEYS = ['l1', 'l2', 'l3', 'l4'];
+var _config = { slots: {} };
+
+export function registerMTs(config) {
+  config = config || {};
+  var slots = {};
+  SLOT_KEYS.forEach(function(key) {
+    if (config[key]) {
+      slots[key] = { name: config[key].name, header: String(config[key].header).toLowerCase() };
+    }
+  });
+  _config = { slots: slots };
+}
+
+export function getMtConfig() {
+  return { slots: Object.assign({}, _config.slots) };
+}