@bemaestro/saas-ui 0.0.2

package/src/auth/auth-route.ts

@@ -0,0 +1,113 @@
+/** Auth screens addressed by path (product shell mini-router). Spec 04 A1–A7. */
+
+export type AuthScreen =
+  'sign-in' | 'sign-up' | 'forgot-password' | 'reset-password' | 'verify-email' | 'invitation';
+
+export interface AuthRoute {
+  screen: AuthScreen;
+  /** Token from query (`?token=`) or invitation path segment. */
+  token: string | null;
+  /** Optional return path after sign-in/sign-up (e.g. invitation). */
+  redirect: string | null;
+}
+
+const DEFAULT_ROUTE: AuthRoute = {
+  screen: 'sign-in',
+  token: null,
+  redirect: null,
+};
+
+function firstQuery(search: string, key: string): string | null {
+  const value = new URLSearchParams(search).get(key);
+  return value && value.length > 0 ? value : null;
+}
+
+/** Strip trailing slash except for root. */
+function normalizePath(pathname: string): string {
+  if (pathname.length > 1 && pathname.endsWith('/')) {
+    return pathname.slice(0, -1);
+  }
+  return pathname || '/';
+}
+
+/**
+ * Parse location pathname + search into an auth route.
+ * Accepts admin-style paths and Core email links (`/auth/verify`, `/auth/reset`,
+ * `/invitations/:token/accept`).
+ */
+export function parseAuthRoute(pathname: string, search = ''): AuthRoute {
+  const path = normalizePath(pathname);
+  const token = firstQuery(search, 'token');
+  const redirect = firstQuery(search, 'redirect');
+
+  if (path === '/' || path === '/sign-in' || path === '/login') {
+    return { screen: 'sign-in', token: null, redirect };
+  }
+  if (path === '/sign-up' || path === '/register') {
+    return { screen: 'sign-up', token: null, redirect };
+  }
+  if (path === '/forgot-password') {
+    return { screen: 'forgot-password', token: null, redirect };
+  }
+  if (path === '/reset-password' || path === '/auth/reset') {
+    return { screen: 'reset-password', token, redirect };
+  }
+  if (path === '/verify-email' || path === '/auth/verify') {
+    return { screen: 'verify-email', token, redirect };
+  }
+
+  const inviteMatch = path.match(/^\/invitations\/([^/]+)(?:\/accept)?$/);
+  if (inviteMatch?.[1]) {
+    return {
+      screen: 'invitation',
+      token: decodeURIComponent(inviteMatch[1]),
+      redirect,
+    };
+  }
+
+  return { ...DEFAULT_ROUTE, redirect };
+}
+
+/** Canonical path for a screen (for history.pushState). */
+export function authScreenPath(
+  screen: AuthScreen,
+  opts?: { token?: string | null; redirect?: string | null },
+): string {
+  const params = new URLSearchParams();
+  // Invitation carries the token in the path; other token screens use ?token=.
+  if (opts?.token && screen !== 'invitation') params.set('token', opts.token);
+  if (opts?.redirect) params.set('redirect', opts.redirect);
+  const qs = params.toString();
+  const suffix = qs ? `?${qs}` : '';
+
+  switch (screen) {
+    case 'sign-in':
+      return `/sign-in${suffix}`;
+    case 'sign-up':
+      return `/sign-up${suffix}`;
+    case 'forgot-password':
+      return `/forgot-password${suffix}`;
+    case 'reset-password':
+      return `/reset-password${suffix}`;
+    case 'verify-email':
+      return `/verify-email${suffix}`;
+    case 'invitation':
+      return opts?.token
+        ? `/invitations/${encodeURIComponent(opts.token)}${suffix}`
+        : `/sign-in${suffix}`;
+  }
+}
+
+export function readBrowserAuthRoute(): AuthRoute {
+  if (typeof window === 'undefined') return { ...DEFAULT_ROUTE };
+  return parseAuthRoute(window.location.pathname, window.location.search);
+}
+
+export function pushAuthRoute(
+  screen: AuthScreen,
+  opts?: { token?: string | null; redirect?: string | null },
+): void {
+  if (typeof window === 'undefined') return;
+  const path = authScreenPath(screen, opts);
+  window.history.pushState({ saasAuth: screen }, '', path);
+}

package/src/auth/use-anon-client.ts

@@ -0,0 +1,32 @@
+import { createMaestroClient, type MaestroClient } from '@bemaestro/sdk/runtime';
+
+export type SaasShellConfig = { baseUrl: string; app: string; appName?: string };
+
+export function createAnonClient(config: SaasShellConfig): MaestroClient {
+  return createMaestroClient({
+    baseUrl: config.baseUrl,
+    app: config.app,
+  });
+}
+
+export function errorMessage(error: unknown, fallback: string): string {
+  return error instanceof Error ? error.message : fallback;
+}
+
+export function errorCode(error: unknown): string | null {
+  if (
+    error &&
+    typeof error === 'object' &&
+    'body' in error &&
+    error.body &&
+    typeof error.body === 'object' &&
+    'error' in error.body &&
+    error.body.error &&
+    typeof error.body.error === 'object' &&
+    'code' in error.body.error &&
+    typeof error.body.error.code === 'string'
+  ) {
+    return error.body.error.code;
+  }
+  return null;
+}

package/src/cookies.ts

@@ -0,0 +1,28 @@
+/**
+ * Cookie helpers shared by product shells (apps/client and future apps).
+ * Secure only over HTTPS so localhost login keeps working.
+ */
+
+const DEFAULT_MAX_AGE = 60 * 60 * 24 * 7;
+
+export function getCookie(name: string): string | undefined {
+  if (typeof document === 'undefined') return undefined;
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) {
+    return parts.pop()?.split(';').shift();
+  }
+  return undefined;
+}
+
+export function setCookie(name: string, value: string, maxAge = DEFAULT_MAX_AGE): void {
+  if (typeof document === 'undefined') return;
+  const secure =
+    typeof location !== 'undefined' && location.protocol === 'https:' ? '; Secure' : '';
+  document.cookie = `${name}=${value}; path=/; max-age=${maxAge}; SameSite=Lax${secure}`;
+}
+
+export function removeCookie(name: string): void {
+  if (typeof document === 'undefined') return;
+  document.cookie = `${name}=; path=/; max-age=0`;
+}

package/src/index.ts

@@ -0,0 +1,19 @@
+export { default as SaasShell } from './SaasShell.vue';
+export type { SaasAccountSection } from './SaasShell.vue';
+export {
+  clearSession,
+  createAuthenticatedClient,
+  persistSession,
+  readPersistedSession,
+  sessionFromLogin,
+  type SaasOrgMembership,
+  type SaasSession,
+  type SaasSessionUser,
+} from './session.js';
+export { getCookie, removeCookie, setCookie } from './cookies.js';
+export {
+  authScreenPath,
+  parseAuthRoute,
+  type AuthRoute,
+  type AuthScreen,
+} from './auth/auth-route.js';

package/src/session.ts

@@ -0,0 +1,104 @@
+import {
+  createMaestroClient,
+  type AuthLoginResult,
+  type MaestroClient,
+} from '@bemaestro/sdk/runtime';
+import { getCookie, removeCookie, setCookie } from './cookies.js';
+
+const ACCESS_COOKIE = 'maestro_client_access_token';
+const REFRESH_COOKIE = 'maestro_client_refresh_token';
+const SESSION_COOKIE = 'maestro_client_session';
+
+export interface SaasSessionUser {
+  id: string;
+  email: string;
+  name: string;
+}
+
+export interface SaasOrgMembership {
+  orgId: string;
+  orgName: string;
+  role: string;
+}
+
+export interface SaasSession {
+  user: SaasSessionUser;
+  orgId: string | null;
+  role: string | null;
+  orgs: SaasOrgMembership[];
+}
+
+function mapOrgs(orgs: AuthLoginResult['orgs']): SaasOrgMembership[] {
+  return orgs
+    .filter((org) => org.membershipStatus === 'active')
+    .map((org) => ({
+      orgId: org.orgId,
+      orgName: org.orgName,
+      role: org.role,
+    }));
+}
+
+export function readPersistedSession(): {
+  accessToken: string;
+  refreshToken: string;
+  session: SaasSession | null;
+} {
+  const accessToken = getCookie(ACCESS_COOKIE) ?? '';
+  const refreshToken = getCookie(REFRESH_COOKIE) ?? '';
+  const raw = getCookie(SESSION_COOKIE);
+  if (!accessToken || !refreshToken || !raw) {
+    return { accessToken: '', refreshToken: '', session: null };
+  }
+  try {
+    return { accessToken, refreshToken, session: JSON.parse(raw) as SaasSession };
+  } catch {
+    return { accessToken: '', refreshToken: '', session: null };
+  }
+}
+
+export function persistSession(
+  tokens: { accessToken: string; refreshToken: string },
+  session: SaasSession,
+): void {
+  setCookie(ACCESS_COOKIE, tokens.accessToken);
+  setCookie(REFRESH_COOKIE, tokens.refreshToken);
+  setCookie(SESSION_COOKIE, JSON.stringify(session));
+}
+
+export function clearSession(): void {
+  removeCookie(ACCESS_COOKIE);
+  removeCookie(REFRESH_COOKIE);
+  removeCookie(SESSION_COOKIE);
+}
+
+export function sessionFromLogin(result: AuthLoginResult): SaasSession {
+  const orgs = mapOrgs(result.orgs);
+  const primary = orgs[0];
+  return {
+    user: result.user,
+    orgs,
+    orgId: primary?.orgId ?? null,
+    role: primary?.role ?? null,
+  };
+}
+
+export function createAuthenticatedClient(input: {
+  baseUrl: string;
+  app: string;
+  accessToken: string;
+  refreshToken: string;
+  orgId?: string | null;
+  onTokens: (tokens: { accessToken: string; refreshToken: string }) => void;
+}): MaestroClient {
+  return createMaestroClient({
+    baseUrl: input.baseUrl,
+    app: input.app,
+    orgId: input.orgId ?? undefined,
+    auth: {
+      mode: 'user',
+      accessToken: input.accessToken,
+      refreshToken: input.refreshToken,
+      onTokens: input.onTokens,
+    },
+  });
+}

package/src/styles.css

@@ -0,0 +1,187 @@
+/* Shared product-shell styles for @bemaestro/saas-ui */
+
+.saas-login {
+  max-width: 22rem;
+  margin: 12vh auto;
+  display: grid;
+  gap: 1rem;
+  font-family: system-ui, sans-serif;
+}
+
+.saas-auth-form,
+.saas-login form {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.saas-login input,
+.saas-login button,
+.saas-auth-form input,
+.saas-auth-form button,
+.saas-invite input,
+.saas-invite select,
+.saas-invite button,
+.saas-portal,
+.saas-plans button,
+.saas-list button {
+  padding: 0.6rem 0.75rem;
+  font-size: 1rem;
+}
+
+.saas-btn-secondary {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  cursor: pointer;
+}
+
+.saas-auth-links {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem 0.5rem;
+  margin: 0.25rem 0 0;
+  font-size: 0.875rem;
+}
+
+.saas-link {
+  padding: 0 !important;
+  border: 0;
+  background: none;
+  color: #1d4ed8;
+  cursor: pointer;
+  font-size: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.saas-org-pick {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.15rem;
+  width: 100%;
+  text-align: left;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  background: #fff;
+  cursor: pointer;
+}
+
+.saas-org-pick:hover:not(:disabled) {
+  border-color: #c7d2fe;
+  background: #eef2ff;
+}
+
+.saas-error {
+  color: #c0392b;
+}
+
+.saas-muted {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.saas-app {
+  display: grid;
+  grid-template-columns: 15rem 1fr;
+  min-height: 100vh;
+  font-family: system-ui, sans-serif;
+}
+
+.saas-nav {
+  border-right: 1px solid #e5e7eb;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.saas-brand h2 {
+  margin: 0;
+  font-size: 1.1rem;
+}
+
+.saas-group {
+  margin: 1rem 0 0.25rem;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #6b7280;
+}
+
+.saas-nav-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 0.4rem 0.5rem;
+  border: 0;
+  background: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+}
+
+.saas-nav-item.active {
+  background: #eef2ff;
+  font-weight: 600;
+}
+
+.saas-signout {
+  margin-top: 1.5rem;
+  padding: 0.4rem 0.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  background: #fff;
+  cursor: pointer;
+}
+
+.saas-content {
+  padding: 1.5rem;
+}
+
+.saas-dl {
+  display: grid;
+  grid-template-columns: 8rem 1fr;
+  gap: 0.5rem 1rem;
+}
+
+.saas-dl dt {
+  color: #6b7280;
+}
+
+.saas-list {
+  list-style: none;
+  padding: 0;
+  display: grid;
+  gap: 0.75rem;
+}
+
+.saas-plans {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+}
+
+.saas-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+
+.saas-invite {
+  margin-top: 2rem;
+  display: grid;
+  gap: 0.5rem;
+  max-width: 24rem;
+}
+
+.saas-pre {
+  background: #f9fafb;
+  padding: 0.75rem;
+  border-radius: 0.375rem;
+  overflow: auto;
+  font-size: 0.8rem;
+}
+
+.saas-portal {
+  margin-top: 1rem;
+}