@xeplr/ui-account 1.0.0 → 1.0.1

package/src/designs/NavTopSample.jsx

@@ -0,0 +1,34 @@
+import { memo } from 'react';
+import AccountMenu from './AccountMenu.jsx';
+import NotificationsBell from './NotificationsBell.jsx';
+import './nav.css';
+
+// The (default, swappable via NavPage's `design` prop) top bar: 10% / 80% / 10%
+// columns. Only ever rendered when there's NO drawer — NavPage renders the
+// drawer instead of this, never both (see pages.jsx). Left holds the small
+// `logo`, middle is `navMiddle` (a fully exposed slot, e.g. an app's
+// company/workspace picker), right is always the settings trigger plus the
+// notifications bell when `notifications` is set.
+function NavTopSample({
+  logo, navMiddle,
+  user, accountItems, notifications, accountOpen, toggleAccount, closeAccount, accountRef, logout
+}) {
+  return (
+    <header className="xeplr-nav xeplr-nav-top">
+      <div className="xeplr-nav-left">
+        {logo && <img src={logo} alt="" className="xeplr-nav-logo" />}
+      </div>
+      <div className="xeplr-nav-middle">{navMiddle}</div>
+      <div className="xeplr-nav-right">
+        <NotificationsBell notifications={notifications} />
+        <AccountMenu
+          user={user} accountItems={accountItems}
+          accountOpen={accountOpen} toggleAccount={toggleAccount} closeAccount={closeAccount}
+          accountRef={accountRef} logout={logout}
+        />
+      </div>
+    </header>
+  );
+}
+
+export default memo(NavTopSample);

package/src/designs/NotificationsBell.jsx

@@ -0,0 +1,31 @@
+import { memo } from 'react';
+
+// Its own control, separate from AccountMenu on purpose — memoized independently
+// so a notification count changing doesn't re-render the account dropdown (and
+// vice versa). `notifications` is optional; omit it to hide the bell entirely.
+// Wire a real feed later (open a popover, etc.) without touching the other parts.
+// `label` is optional text shown next to the icon — the drawer passes
+// "Notifications" 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 NotificationsBell({ notifications, label }) {
+  if (!notifications) return null;
+  var count = notifications.count;
+
+  return (
+    <button
+      type="button"
+      className={'xeplr-nav-bell' + (label ? ' xeplr-nav-bell-labeled' : '')}
+      onClick={notifications.onClick}
+      aria-label={count > 0 ? count + ' unread notifications' : 'Notifications'}
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+        <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+      </svg>
+      {count > 0 && <span className="xeplr-nav-badge">{count > 9 ? '9+' : count}</span>}
+      {label && <span className="xeplr-nav-bell-label">{label}</span>}
+    </button>
+  );
+}
+
+export default memo(NotificationsBell);

package/src/designs/ProfileSample.jsx

@@ -1,7 +1,9 @@
 import './auth.css';
 
+// error/success feedback fires as a snackbar (see useProfileController.js) —
+// this design doesn't render it inline.
 export default function ProfileSample({
-  form, error, success, loading, fetching, handleChange, handleSubmit
+  form, loading, fetching, handleChange, handleSubmit
 }) {
   if (fetching) {
     return (
@@ -14,8 +16,6 @@ export default function ProfileSample({
   return (
     <div className="xeplr-auth-container">
       <h1>Profile</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-profile-name">Name</label>

package/src/designs/RegisterSample.jsx

@@ -1,12 +1,12 @@
 import { Link } from 'react-router-dom';
 import './auth.css';
 
-export default function RegisterSample({ form, error, success, loading, handleChange, handleSubmit }) {
+// error/success feedback fires as a snackbar (see useRegisterController.js) —
+// this design doesn't render it inline.
+export default function RegisterSample({ form, loading, handleChange, handleSubmit }) {
   return (
     <div className="xeplr-auth-container">
       <h1>Register</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-name">Name</label>

package/src/designs/ResetPasswordSample.jsx

@@ -1,11 +1,13 @@
 import { Link } from 'react-router-dom';
 import './auth.css';
 
-export default function ResetPasswordSample({ token, password, setPassword, error, success, loading, handleSubmit }) {
+// error/success feedback fires as a snackbar (see useResetPasswordController.js,
+// including the "invalid link" case) — this design doesn't render it inline,
+// it just switches which block is visible.
+export default function ResetPasswordSample({ token, password, setPassword, success, loading, handleSubmit }) {
   if (!token && !success) {
     return (
       <div className="xeplr-auth-container">
-        <div className="xeplr-auth-alert xeplr-auth-alert-error">Invalid reset link</div>
         <div className="xeplr-auth-links">
           <p><Link to="/auth/forgot-password">Request a new reset link</Link></p>
         </div>
@@ -16,14 +18,10 @@ export default function ResetPasswordSample({ token, password, setPassword, erro
   return (
     <div className="xeplr-auth-container">
       <h1>Reset 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>
-          <div className="xeplr-auth-links">
-            <p><Link to="/auth/login">Go to Login</Link></p>
-          </div>
-        </>
+        <div className="xeplr-auth-links">
+          <p><Link to="/auth/login">Go to Login</Link></p>
+        </div>
       )}
       {!success && (
         <form onSubmit={handleSubmit}>

package/src/designs/admin.css

@@ -3,8 +3,14 @@
 /* ─── xeplr Admin Matrix ─── */
 
 .xeplr-admin-container {
-  max-width: 1200px;
-  margin: 20px auto;
+  /* Fill the available height of whatever container the host app uses
+     (e.g. the architects app's `.content` area) so the table area scrolls
+     internally instead of leaving empty whitespace below. */
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
   padding: 20px;
   border: 1px solid var(--xeplr-border-primary);
   border-radius: 8px;
@@ -165,7 +171,11 @@
 /* ─── Matrix Table ─── */
 
 .xeplr-admin-matrix-wrapper {
-  overflow-x: auto;
+  /* Fills remaining height inside the flex column container so the table
+     scrolls internally and the header/tabs/toolbar stay pinned at top. */
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
   border: 1px solid var(--xeplr-border-primary);
   border-radius: 6px;
 }

package/src/designs/auth.css

@@ -82,22 +82,16 @@
   text-decoration: underline;
 }
 
+/* In-progress status text (e.g. "Activating your account...") — error/success
+   feedback fires as a snackbar instead (see the use*Controller.js hooks), so
+   there's no -error/-success modifier here anymore. */
 .xeplr-auth-alert {
   padding: 10px 15px;
   border-radius: 4px;
   margin-bottom: 15px;
-}
-
-.xeplr-auth-alert-error {
-  background: var(--xeplr-danger-bg);
-  color: var(--xeplr-danger);
-  border: 1px solid var(--xeplr-danger-border);
-}
-
-.xeplr-auth-alert-success {
-  background: var(--xeplr-success-bg);
-  color: var(--xeplr-success);
-  border: 1px solid var(--xeplr-success-border);
+  background: var(--xeplr-info-bg);
+  color: var(--xeplr-info);
+  border: 1px solid var(--xeplr-info-border);
 }
 
 .xeplr-auth-not-activated {
@@ -110,51 +104,3 @@
   color: var(--xeplr-warning);
   margin: 20px 0;
 }
-
-/* Tenant Picker */
-.xeplr-tenant-picker {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-top: 16px;
-}
-
-.xeplr-tenant-option {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-  padding: 16px;
-  border: 1px solid var(--xeplr-border-primary, #333);
-  border-radius: 8px;
-  background: var(--xeplr-bg-secondary, #222);
-  cursor: pointer;
-  transition: all 0.15s;
-  text-align: left;
-  width: 100%;
-}
-
-.xeplr-tenant-option:hover {
-  border-color: var(--xeplr-accent, #646cff);
-  background: var(--xeplr-bg-active, #1a1a2a);
-}
-
-.xeplr-tenant-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--xeplr-text-primary, #e0e0e0);
-}
-
-.xeplr-tenant-code {
-  font-size: 12px;
-  font-family: monospace;
-  color: var(--xeplr-tag-text, #9999cc);
-  background: var(--xeplr-tag-bg, #2a2a3a);
-  padding: 2px 6px;
-  border-radius: 3px;
-}
-
-.xeplr-tenant-desc {
-  font-size: 13px;
-  color: var(--xeplr-text-muted, #777);
-}

package/src/designs/index.js

@@ -9,5 +9,7 @@ export { default as ProfileSample } from './ProfileSample.jsx';
 export { default as UserRolesMatrixSample } from './UserRolesMatrixSample.jsx';
 export { default as AccessMatrixSample } from './AccessMatrixSample.jsx';
 export { default as MasterSettingsSample } from './MasterSettingsSample.jsx';
-export { default as TenantSample } from './TenantSample.jsx';
-export { default as TenantPickerSample } from './TenantPickerSample.jsx';
+export { default as NavTopSample } from './NavTopSample.jsx';
+export { default as AccountMenu } from './AccountMenu.jsx';
+export { default as NavDrawer } from './NavDrawer.jsx';
+export { default as NotificationsBell } from './NotificationsBell.jsx';

package/src/designs/nav.css

@@ -0,0 +1,311 @@
+/* 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;
+  z-index: 90;
+  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; }
+.xeplr-nav-drawer-expanded { width: 240px; padding: 16px; }
+
+.xeplr-nav-drawer-toggle {
+  display: block;
+  flex-shrink: 0;
+  border: none;
+  background: none;
+  padding: 0;
+  margin-bottom: 12px;
+  cursor: pointer;
+  align-self: flex-start;
+}
+
+/* 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; }
+
+.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);
+}

package/src/index.js

@@ -1,9 +1,19 @@
 // API client
-export { configure, registerUser, loginUser, activateAccount, forgotPassword, resetPassword, changePassword, getProfile, updateProfile, logoutUser, getMyTenants, authFetch } from './api.js';
+export { configure, registerUser, loginUser, activateAccount, forgotPassword, resetPassword, changePassword, 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 } from './activeScope.js';
+
 // Controller hooks
 export { useLoginController } from './useLoginController.js';
 export { useRegisterController } from './useRegisterController.js';
@@ -15,8 +25,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 +38,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, 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) };
+}