@fayz-ai/portal 0.2.0

package/src/components/MemberHeader.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { useMemberConfig } from '../config'
+import { useMemberSession } from '../session'
+import { signOutMember } from '../auth'
+import { Link, navigateTo } from '../router'
+
+export function MemberHeader() {
+  const config = useMemberConfig()
+  const session = useMemberSession()
+  const [menuOpen, setMenuOpen] = React.useState(false)
+
+  return (
+    <header className="sticky top-0 z-30 border-b border-border bg-card/95 backdrop-blur">
+      <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4 sm:px-6">
+        <Link to="/" className="flex items-center gap-2 font-bold text-foreground" data-testid="member-logo">
+          {config.logoUrl ? (
+            <img src={config.logoUrl} alt={config.name} className="h-7" />
+          ) : (
+            <span>{config.name}</span>
+          )}
+        </Link>
+
+        {session.customerId ? (
+          <div className="relative">
+            <button
+              data-testid="member-usermenu"
+              onClick={() => setMenuOpen((v) => !v)}
+              className="flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted"
+            >
+              <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
+                {(session.email ?? '?').charAt(0).toUpperCase()}
+              </span>
+              <span className="hidden sm:inline">{session.name || session.email}</span>
+            </button>
+            {menuOpen && (
+              <div className="absolute right-0 mt-2 w-44 overflow-hidden rounded-lg border border-border bg-card shadow-lg">
+                <button
+                  onClick={() => { setMenuOpen(false); navigateTo('/account') }}
+                  className="block w-full px-4 py-2.5 text-left text-sm text-foreground hover:bg-muted"
+                >
+                  Minha conta
+                </button>
+                <button
+                  data-testid="member-header-signout"
+                  onClick={() => { setMenuOpen(false); void signOutMember(); navigateTo('/') }}
+                  className="block w-full px-4 py-2.5 text-left text-sm text-foreground hover:bg-muted"
+                >
+                  Sair
+                </button>
+              </div>
+            )}
+          </div>
+        ) : null}
+      </div>
+    </header>
+  )
+}

package/src/config.ts

@@ -0,0 +1,39 @@
+import React from 'react'
+
+// ---------------------------------------------------------------------------
+// MemberConfig — the declarative surface for the learner portal. Pure data so
+// it round-trips through an AppManifest (defineMember ↔ MemberScaffold).
+// ---------------------------------------------------------------------------
+
+export interface MemberConfig {
+  name: string
+  /** Logo image URL shown in the header (falls back to the name). */
+  logoUrl?: string
+  locale?: string
+  /** Accent color (CSS color) for the player progress + active states. */
+  accent?: string
+  /** Auth adapter: 'mock' (default) | 'supabase' | a bring-your-own adapter. */
+  auth?: { adapter?: 'mock' | 'supabase' | unknown }
+  supabaseUrl?: string
+  supabaseAnonKey?: string
+  /** Grant the logged-in learner every published course (demo behaviour). When
+   *  false, the learner only sees the courses they were explicitly enrolled in. */
+  autoEnroll?: boolean
+}
+
+export interface ResolvedMemberConfig extends MemberConfig {
+  locale: string
+}
+
+export function resolveConfig(config: MemberConfig): ResolvedMemberConfig {
+  return { ...config, locale: config.locale ?? 'pt-BR' }
+}
+
+const MemberConfigContext = React.createContext<ResolvedMemberConfig | null>(null)
+export const MemberConfigProvider = MemberConfigContext.Provider
+
+export function useMemberConfig(): ResolvedMemberConfig {
+  const ctx = React.useContext(MemberConfigContext)
+  if (!ctx) throw new Error('useMemberConfig must be used inside a MemberConfigProvider')
+  return ctx
+}

package/src/createMemberApp.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { MemberConfigProvider, resolveConfig, useMemberConfig } from './config'
+import type { MemberConfig } from './config'
+import { initMemberAuth, resolveAuthAdapter } from './auth'
+import { useHashPath, matchPath } from './router'
+import { MemberHeader } from './components/MemberHeader'
+import { MyCoursesPage } from './pages/MyCoursesPage'
+import { CoursePlayerPage } from './pages/CoursePlayerPage'
+import { AccountPage } from './pages/AccountPage'
+
+function RouteSwitch() {
+  const path = useHashPath()
+
+  const lesson = matchPath('/course/:slug/lesson/:id', path)
+  if (lesson?.slug) return <CoursePlayerPage slug={lesson.slug} lessonId={lesson.id} />
+
+  const course = matchPath('/course/:slug', path)
+  if (course?.slug) return <CoursePlayerPage slug={course.slug} />
+
+  if (matchPath('/account', path)) return <AccountPage />
+
+  return <MyCoursesPage />
+}
+
+/** Side-effect runtime init shared by the factory and the manifest scaffold:
+ *  wires learner auth (+ optional Supabase client). Idempotent. */
+export function initMemberRuntime(config: MemberConfig): void {
+  // The courses data provider is owned by the host app (mock or Supabase). The
+  // portal only wires learner auth here; a Supabase-backed app sets the global
+  // client + provider before mounting.
+  initMemberAuth(
+    resolveAuthAdapter(config.auth?.adapter, { url: config.supabaseUrl, anonKey: config.supabaseAnonKey }),
+    { autoEnroll: config.autoEnroll ?? true },
+  )
+}
+
+/** Inner portal UI — reads everything from config context, so it is shared by
+ *  createMemberApp and the manifest-driven MemberScaffold. */
+export function MemberShell() {
+  const config = useMemberConfig()
+  return (
+    <div className="min-h-screen bg-background text-foreground" data-portal={config.name}>
+      {config.accent && (
+        <style>{`:root{--primary:${config.accent};}`}</style>
+      )}
+      <MemberHeader />
+      <RouteSwitch />
+    </div>
+  )
+}
+
+/** Declarative member-portal factory — sugar over the manifest path (equivalent
+ *  to renderApp(defineMember(config))). */
+export function createMemberApp(config: MemberConfig): React.ComponentType {
+  const resolved = resolveConfig(config)
+  initMemberRuntime(config)
+  function MemberApp() {
+    return (
+      <MemberConfigProvider value={resolved}>
+        <MemberShell />
+      </MemberConfigProvider>
+    )
+  }
+  MemberApp.displayName = 'MemberApp'
+  return MemberApp
+}

package/src/index.ts

@@ -0,0 +1,45 @@
+// @fayz-ai/portal — the authenticated member/learner surface (counterpart of
+// @fayz-ai/shop). Importing this package registers the 'member' scaffold.
+export type { MemberConfig, ResolvedMemberConfig } from './config'
+export { MemberConfigProvider, useMemberConfig, resolveConfig } from './config'
+
+export { createMemberApp, initMemberRuntime, MemberShell } from './createMemberApp'
+export { defineMember, MemberScaffold } from './scaffold'
+
+export { useMemberSession } from './session'
+export type { MemberSessionState } from './session'
+
+export {
+  initMemberAuth,
+  establishMemberSession,
+  signUpMember,
+  signOutMember,
+  customerIdForEmail,
+  resolveAuthAdapter,
+} from './auth'
+
+export { useHashPath, matchPath, navigateTo, Link } from './router'
+
+export { MyCoursesPage } from './pages/MyCoursesPage'
+export { CoursePlayerPage } from './pages/CoursePlayerPage'
+export { AccountPage } from './pages/AccountPage'
+export { MemberHeader } from './components/MemberHeader'
+
+// ---------------------------------------------------------------------------
+// Front-door re-exports: member apps depend on @fayz-ai/portal alone.
+// Runtime (renderApp/defineApp) from @fayz-ai/core; the courses provider API
+// from @fayz-ai/courses, so plugins.generated.ts wires providers through the
+// portal front door. Mirrors the @fayz-ai/saas front door.
+// ---------------------------------------------------------------------------
+export { renderApp, defineApp } from '@fayz-ai/core'
+export {
+  setCoursesProvider,
+  getCoursesProvider,
+  getCoursesProviderOptional,
+  MockCoursesProvider,
+  createMockCoursesProvider,
+  useMyCourses,
+  useCourse,
+  useCourseProgress,
+} from '@fayz-ai/courses'
+export type { CoursesProvider, MockCoursesSeed } from '@fayz-ai/courses'

package/src/pages/AccountPage.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { useMemberSession } from '../session'
+import { signOutMember } from '../auth'
+import { navigateTo } from '../router'
+
+export function AccountPage() {
+  const session = useMemberSession()
+
+  if (!session.customerId) {
+    navigateTo('/')
+    return null
+  }
+
+  return (
+    <main className="mx-auto max-w-xl px-4 py-10 sm:px-6">
+      <h1 className="mb-6 text-2xl font-bold text-foreground">Minha conta</h1>
+      <div className="space-y-4 rounded-xl border border-border bg-card p-6">
+        <Row label="Nome" value={session.name || '—'} />
+        <Row label="E-mail" value={session.email || '—'} />
+        <button
+          data-testid="account-signout"
+          onClick={() => { void signOutMember(); navigateTo('/') }}
+          className="mt-2 rounded-md border border-border bg-card px-4 py-2 text-sm font-medium text-foreground hover:bg-muted"
+        >
+          Sair
+        </button>
+      </div>
+    </main>
+  )
+}
+
+function Row({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex justify-between border-b border-border pb-3 last:border-0 last:pb-0">
+      <span className="text-sm text-muted-foreground">{label}</span>
+      <span className="text-sm font-medium text-foreground">{value}</span>
+    </div>
+  )
+}

package/src/pages/CoursePlayerPage.tsx

@@ -0,0 +1,126 @@
+import React from 'react'
+import { useCourse, useCourseProgress, getCoursesProvider } from '@fayz-ai/courses'
+import { useMemberSession } from '../session'
+import { navigateTo } from '../router'
+
+export function CoursePlayerPage({ slug, lessonId }: { slug: string; lessonId?: string }) {
+  const session = useMemberSession()
+  const { course, modules, lessons, loading } = useCourse(slug)
+  const [enrollmentId, setEnrollmentId] = React.useState<string | null>(null)
+
+  // Resolve this learner's enrollment for the course → drives progress.
+  React.useEffect(() => {
+    let active = true
+    if (!course || !session.customerId) return
+    ;(async () => {
+      const provider = getCoursesProvider()
+      const enrollments = await provider.listEnrollments(session.customerId!)
+      let enrollment = enrollments.find((e) => e.courseId === course.id)
+      if (!enrollment) enrollment = await provider.enroll(course.id, session.customerId!)
+      if (active) setEnrollmentId(enrollment.id)
+    })()
+    return () => { active = false }
+  }, [course, session.customerId])
+
+  const { isCompleted, markLessonComplete } = useCourseProgress(enrollmentId)
+
+  if (loading || !course) {
+    return <main className="px-4 py-12 text-center text-muted-foreground">Carregando…</main>
+  }
+
+  // Flatten lessons in true curriculum order (module order, then lesson order).
+  // The provider sorts lessons by their per-module sortOrder, so a plain flat
+  // list interleaves modules — walk modules to get the real sequence.
+  const orderedLessons = modules.flatMap((m) => lessons.filter((l) => l.moduleId === m.id))
+
+  const activeLesson = (lessonId && orderedLessons.find((l) => l.id === lessonId)) || orderedLessons[0]
+  if (!activeLesson) {
+    return <main className="px-4 py-12 text-center text-muted-foreground">Curso sem aulas ainda.</main>
+  }
+
+  const idx = orderedLessons.findIndex((l) => l.id === activeLesson.id)
+  const nextLesson = idx >= 0 && idx < orderedLessons.length - 1 ? orderedLessons[idx + 1] : null
+
+  function open(lid: string) {
+    navigateTo(`/course/${course!.slug}/lesson/${lid}`)
+  }
+
+  async function completeAndAdvance() {
+    await markLessonComplete(activeLesson!.id, true)
+    if (nextLesson) open(nextLesson.id)
+  }
+
+  return (
+    <main className="mx-auto grid max-w-6xl grid-cols-1 gap-6 px-4 py-6 sm:px-6 lg:grid-cols-[1fr_320px]">
+      {/* Player + lesson body */}
+      <div>
+        <button onClick={() => navigateTo('/')} className="mb-3 text-sm text-muted-foreground hover:text-foreground">
+          ← Meus cursos
+        </button>
+        <div className="aspect-video w-full overflow-hidden rounded-xl bg-black">
+          <iframe
+            key={activeLesson.id}
+            data-testid="lesson-video"
+            src={activeLesson.videoUrl}
+            title={activeLesson.title}
+            className="h-full w-full"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          />
+        </div>
+        <div className="mt-4 flex items-start justify-between gap-4">
+          <div>
+            <p className="text-xs text-muted-foreground">{course.title}</p>
+            <h1 data-testid="lesson-title" className="text-xl font-bold text-foreground">{activeLesson.title}</h1>
+          </div>
+          <button
+            data-testid="mark-complete"
+            onClick={completeAndAdvance}
+            className={`shrink-0 rounded-md px-4 py-2 text-sm font-semibold ${
+              isCompleted(activeLesson.id)
+                ? 'border border-border bg-card text-muted-foreground'
+                : 'bg-primary text-primary-foreground'
+            }`}
+          >
+            {isCompleted(activeLesson.id) ? '✓ Concluída' : 'Marcar como concluída'}
+          </button>
+        </div>
+        {activeLesson.description && (
+          <p className="mt-3 text-sm text-muted-foreground">{activeLesson.description}</p>
+        )}
+      </div>
+
+      {/* Curriculum sidebar */}
+      <aside data-testid="lesson-sidebar" className="rounded-xl border border-border bg-card p-3">
+        {modules.map((mod) => (
+          <div key={mod.id} className="mb-3">
+            <p className="px-2 py-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">{mod.title}</p>
+            <ul className="space-y-0.5">
+              {lessons.filter((l) => l.moduleId === mod.id).map((lesson) => {
+                const done = isCompleted(lesson.id)
+                const current = lesson.id === activeLesson.id
+                return (
+                  <li key={lesson.id}>
+                    <button
+                      data-testid="sidebar-lesson"
+                      data-completed={done ? 'true' : 'false'}
+                      onClick={() => open(lesson.id)}
+                      className={`flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm ${
+                        current ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground hover:bg-muted/60'
+                      }`}
+                    >
+                      <span className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-full border text-[10px] ${
+                        done ? 'border-primary bg-primary text-primary-foreground' : 'border-border'
+                      }`}>{done ? '✓' : ''}</span>
+                      <span className="line-clamp-2">{lesson.title}</span>
+                    </button>
+                  </li>
+                )
+              })}
+            </ul>
+          </div>
+        ))}
+      </aside>
+    </main>
+  )
+}

package/src/pages/MyCoursesPage.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react'
+import { useMyCourses } from '@fayz-ai/courses'
+import { useMemberSession } from '../session'
+import { establishMemberSession } from '../auth'
+import { useMemberConfig } from '../config'
+import { navigateTo } from '../router'
+
+function AuthForm() {
+  const config = useMemberConfig()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault()
+    setError(null)
+    if (!email.trim() || !password) return
+    setBusy(true)
+    try {
+      await establishMemberSession(email, { password })
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Não foi possível entrar.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="mx-auto max-w-sm rounded-xl border border-border bg-card p-7 shadow-sm">
+      <h2 className="text-xl font-semibold text-foreground">{config.name}</h2>
+      <p className="mt-1 text-sm text-muted-foreground">Entre para acessar seus cursos.</p>
+      <form className="mt-5 space-y-3" onSubmit={submit}>
+        <input
+          data-testid="member-email"
+          type="email"
+          required
+          placeholder="voce@exemplo.com"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="w-full rounded-md border border-input bg-background px-3 py-2.5 text-sm"
+        />
+        <input
+          data-testid="member-password"
+          type="password"
+          required
+          placeholder="Senha"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="w-full rounded-md border border-input bg-background px-3 py-2.5 text-sm"
+        />
+        {error && <p data-testid="member-auth-error" className="text-sm text-destructive">{error}</p>}
+        <button
+          type="submit"
+          data-testid="member-signin"
+          disabled={busy}
+          className="w-full rounded-md bg-primary py-2.5 font-semibold text-primary-foreground disabled:opacity-60"
+        >
+          {busy ? 'Entrando…' : 'Entrar'}
+        </button>
+      </form>
+    </div>
+  )
+}
+
+export function MyCoursesPage() {
+  const session = useMemberSession()
+  const { courses, loading } = useMyCourses(session.customerId)
+
+  if (!session.customerId) {
+    return (
+      <main className="mx-auto max-w-3xl px-4 py-12 sm:px-6">
+        <AuthForm />
+      </main>
+    )
+  }
+
+  return (
+    <main className="mx-auto max-w-5xl px-4 py-8 sm:px-6">
+      <h1 className="mb-1 text-2xl font-bold tracking-tight text-foreground">Meus cursos</h1>
+      <p className="mb-6 text-sm text-muted-foreground">{session.email}</p>
+
+      {loading ? (
+        <div className="py-16 text-center text-muted-foreground">Carregando…</div>
+      ) : courses.length === 0 ? (
+        <div data-testid="member-empty" className="rounded-xl border border-border bg-card py-16 text-center text-muted-foreground">
+          Você ainda não tem cursos.
+        </div>
+      ) : (
+        <div data-testid="member-courses" className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+          {courses.map(({ course, progressPercent, completedLessons, totalLessons }) => (
+            <button
+              key={course.id}
+              data-testid="member-course-card"
+              data-slug={course.slug}
+              onClick={() => navigateTo(`/course/${course.slug}`)}
+              className="group overflow-hidden rounded-xl border border-border bg-card text-left transition hover:border-primary hover:shadow-md"
+            >
+              <div className="aspect-video w-full overflow-hidden bg-muted">
+                {course.thumbnailUrl && <img src={course.thumbnailUrl} alt="" className="h-full w-full object-cover" />}
+              </div>
+              <div className="space-y-2 p-4">
+                <h3 className="font-semibold text-foreground line-clamp-2">{course.title}</h3>
+                <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+                  <div className="h-full rounded-full bg-primary transition-all" style={{ width: `${progressPercent}%` }} />
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  {completedLessons}/{totalLessons} aulas · {progressPercent}%
+                </p>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </main>
+  )
+}

package/src/router.ts

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react'
+import { hashRouterAdapter } from '@fayz-ai/core'
+
+// Minimal hash router for the member portal — the same lightweight approach the
+// storefront uses (no react-router; avoids singleton hazards under source-alias).
+
+const adapter = hashRouterAdapter()
+
+export function navigateTo(to: string): void {
+  adapter.navigate(to)
+}
+
+export function useHashPath(): string {
+  const [path, setPath] = useState(() => adapter.getCurrentPath() || '/')
+  useEffect(() => {
+    return adapter.onPathChange((p) => {
+      setPath(p || '/')
+      if (typeof window !== 'undefined') window.scrollTo(0, 0)
+    })
+  }, [])
+  return path
+}
+
+export function matchPath(pattern: string, path: string): Record<string, string> | null {
+  const cleanPath = (path.split('?')[0] ?? '').replace(/\/+$/, '') || '/'
+  const patternParts = pattern.split('/').filter(Boolean)
+  const pathParts = cleanPath.split('/').filter(Boolean)
+  if (patternParts.length !== pathParts.length) return null
+  const params: Record<string, string> = {}
+  for (let i = 0; i < patternParts.length; i++) {
+    const pat = patternParts[i]!
+    const part = pathParts[i]!
+    if (pat.startsWith(':')) params[pat.slice(1)] = decodeURIComponent(part)
+    else if (pat !== part) return null
+  }
+  return params
+}
+
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  to: string
+}
+
+export function Link({ to, children, ...rest }: LinkProps) {
+  return React.createElement('a', { href: `#${to}`, ...rest }, children)
+}

package/src/scaffold.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { registerScaffold, defineApp } from '@fayz-ai/core'
+import type { AppManifest } from '@fayz-ai/core'
+import { MemberConfigProvider, resolveConfig } from './config'
+import type { MemberConfig } from './config'
+import { initMemberRuntime, MemberShell } from './createMemberApp'
+
+// ---------------------------------------------------------------------------
+// Member scaffold — renders the learner portal from a pure-data AppManifest.
+// Mirrors the storefront scaffold's dual path: defineMember (config → manifest)
+// and MemberScaffold (manifest → render). This is the SDK's third surface type
+// (authenticated member area), alongside 'admin' and 'storefront'.
+// ---------------------------------------------------------------------------
+
+function slug(name: string): string {
+  return name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'app'
+}
+
+export function defineMember(config: MemberConfig): AppManifest {
+  return defineApp({
+    id: slug(config.name),
+    name: config.name,
+    backend: config.supabaseUrl ? { provider: 'supabase', url: config.supabaseUrl } : { provider: 'mock' },
+    locale: { default: config.locale ?? 'pt-BR', supported: [config.locale ?? 'pt-BR'] },
+    surfaces: {
+      member: {
+        scaffold: 'member',
+        options: {
+          logoUrl: config.logoUrl,
+          accent: config.accent,
+          autoEnroll: config.autoEnroll ?? true,
+        },
+      },
+    },
+  })
+}
+
+function manifestToMemberConfig(manifest: AppManifest, surfaceName: string): MemberConfig {
+  const o = (manifest.surfaces[surfaceName]?.options ?? {}) as Record<string, unknown>
+  return {
+    name: manifest.name,
+    locale: (manifest.locale as { default?: string } | undefined)?.default,
+    logoUrl: o.logoUrl as string | undefined,
+    accent: o.accent as string | undefined,
+    autoEnroll: (o.autoEnroll as boolean | undefined) ?? true,
+    supabaseUrl: manifest.backend?.provider === 'supabase' ? manifest.backend.url : undefined,
+  }
+}
+
+export function MemberScaffold({ manifest, surface }: { manifest: AppManifest; surface: string }) {
+  const config = React.useMemo(() => manifestToMemberConfig(manifest, surface), [manifest, surface])
+  const resolved = React.useMemo(() => resolveConfig(config), [config])
+  const inited = React.useRef(false)
+  if (!inited.current) {
+    initMemberRuntime(config)
+    inited.current = true
+  }
+  return (
+    <MemberConfigProvider value={resolved}>
+      <MemberShell />
+    </MemberConfigProvider>
+  )
+}
+MemberScaffold.displayName = 'MemberScaffold'
+
+// Self-register so renderApp(manifest, { surface: 'member' }) resolves once this
+// package is imported.
+registerScaffold('member', MemberScaffold, { source: 'sdk', label: 'Member' })

package/src/session.ts

@@ -0,0 +1,26 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+// Learner session — mirrors the auth identity for synchronous UI access. The
+// customerId is the key courses enrollments/progress are stored against.
+
+export interface MemberSessionState {
+  customerId: string | null
+  email: string | null
+  name: string | null
+  setSession(s: { customerId: string; email: string; name?: string | null }): void
+  signOut(): void
+}
+
+export const useMemberSession = create<MemberSessionState>()(
+  persist(
+    (set) => ({
+      customerId: null,
+      email: null,
+      name: null,
+      setSession: ({ customerId, email, name }) => set({ customerId, email, name: name ?? null }),
+      signOut: () => set({ customerId: null, email: null, name: null }),
+    }),
+    { name: 'fayz.portal.session.v1' },
+  ),
+)