@startsimpli/ui 0.4.15 → 0.4.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.15",
+  "version": "0.4.16",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/team/__tests__/team-settings-page.test.tsx

@@ -0,0 +1,146 @@
+/**
+ * Smoke tests for the shared TeamSettingsPage composer (startsim-o7s).
+ *
+ * The real auth hooks are mocked so the test doesn't spin up an AuthProvider
+ * — we just confirm the page wires the supplied api shape through to the
+ * presentational components (MembersTable, invitations table, danger zone).
+ */
+import { render, screen, waitFor, fireEvent, act } from '@testing-library/react'
+import { TeamSettingsPage } from '../pages/TeamSettingsPage'
+import { DomainsSettingsPage } from '../pages/DomainsSettingsPage'
+
+jest.mock('@startsimpli/auth', () => {
+  const noop = () => {}
+  return {
+    __esModule: true,
+    useAuth: () => ({
+      user: { id: 'u1', email: 'q@x.com' },
+      logout: jest.fn().mockResolvedValue(undefined),
+    }),
+    buildCentralAuthUrl: (flow: string, opts: { app: string }) =>
+      `https://auth.startsimpli.com/${flow}?app=${opts.app}`,
+    useMembershipFromApi: () => ({
+      company: { id: 'c1', slug: 'acme', name: 'Acme' },
+      currentTeam: { id: 't1', slug: 'core', name: 'Core', companyId: 'c1' },
+      role: 'owner',
+      isOwner: true,
+      isAdmin: true,
+      isMemberOrAbove: true,
+      canInvite: true,
+      memberships: [],
+      isLoading: false,
+      error: null,
+      refresh: jest.fn().mockResolvedValue(undefined),
+    }),
+    useInvitations: ({ fetchInvitations, autoFetch: _ }: { fetchInvitations: () => Promise<unknown>; autoFetch?: boolean }) => ({
+      pending: [],
+      isLoading: false,
+      error: null,
+      refresh: async () => {
+        await fetchInvitations()
+      },
+      revoke: noop,
+      bulkInvite: async () => ({ invited: [] }),
+    }),
+    useDomainClaims: () => ({
+      claims: [],
+      isLoading: false,
+      error: null,
+      refresh: jest.fn().mockResolvedValue(undefined),
+      create: jest.fn(),
+      verifyDns: jest.fn(),
+      initiateEmail: jest.fn(),
+      verifyEmail: jest.fn(),
+      revoke: jest.fn(),
+    }),
+  }
+})
+
+function buildApi() {
+  return {
+    teams: {
+      myTeams: jest.fn().mockResolvedValue([]),
+      retrieve: jest.fn(),
+      members: jest.fn().mockResolvedValue([
+        {
+          id: 'm1',
+          userId: 'u1',
+          teamId: 't1',
+          role: 'owner',
+          joinedAt: '2025-01-01',
+          user: { id: 'u1', email: 'q@x.com', firstName: 'Quinn' },
+        },
+      ]),
+      updateRole: jest.fn().mockResolvedValue(undefined),
+      removeMember: jest.fn().mockResolvedValue(undefined),
+      bulkInvite: jest.fn().mockResolvedValue({ invited: [], skipped: [] }),
+    },
+    teamInvitations: {
+      list: jest.fn().mockResolvedValue({ results: [] }),
+      create: jest.fn(),
+      revoke: jest.fn().mockResolvedValue(undefined),
+    },
+    companies: {
+      retrieve: jest.fn(),
+    },
+    domainClaims: {
+      list: jest.fn().mockResolvedValue({ results: [] }),
+      create: jest.fn(),
+      verifyDns: jest.fn(),
+      verifyEmailInitiate: jest.fn(),
+      verifyEmailCode: jest.fn(),
+      revoke: jest.fn(),
+    },
+  } as any
+}
+
+describe('TeamSettingsPage', () => {
+  it('renders header + members table after fetch', async () => {
+    const api = buildApi()
+    render(<TeamSettingsPage api={api} centralAuthApp="vault" />)
+    expect(screen.getByText('Team & members')).toBeInTheDocument()
+    expect(screen.getByText('Acme · Core')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(api.teams.members).toHaveBeenCalledWith('core')
+    })
+    expect(screen.getByText(/Quinn/)).toBeInTheDocument()
+  })
+
+  it('shows the danger-zone Leave button for the current team', async () => {
+    const api = buildApi()
+    render(<TeamSettingsPage api={api} centralAuthApp="vault" />)
+    await waitFor(() => expect(api.teams.members).toHaveBeenCalled())
+    expect(screen.getByText('Danger zone')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Leave team/i })).toBeInTheDocument()
+  })
+
+  it('exposes the +Invite trigger when the current user is admin', async () => {
+    const api = buildApi()
+    render(<TeamSettingsPage api={api} centralAuthApp="vault" />)
+    await waitFor(() => expect(api.teams.members).toHaveBeenCalled())
+    expect(screen.getByRole('button', { name: '+ Invite' })).toBeInTheDocument()
+  })
+})
+
+describe('DomainsSettingsPage', () => {
+  it('renders the title + Add Domain trigger when admin + has companyId', async () => {
+    const api = buildApi()
+    render(<DomainsSettingsPage api={api} />)
+    expect(screen.getByText('Email domains')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Add domain/i })).toBeInTheDocument()
+  })
+
+  it('opens the add-domain form when clicked + validates input', async () => {
+    const api = buildApi()
+    render(<DomainsSettingsPage api={api} />)
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: /Add domain/i }))
+    })
+    const input = screen.getByLabelText(/Domain/i) as HTMLInputElement
+    fireEvent.change(input, { target: { value: 'nope' } })
+    fireEvent.click(screen.getByRole('button', { name: /Add domain/i }))
+    expect(
+      await screen.findByText(/valid domain/i),
+    ).toBeInTheDocument()
+  })
+})

package/src/components/team/index.ts

@@ -55,3 +55,8 @@ export {
   type DomainVerificationMethod,
   type DomainClaimLite,
 } from './types'
+
+// Page-level composers (startsim-o7s) — drop-in /settings/team and
+// /settings/domains pages. Each app wires `api` + a className-slot
+// override map; total ≤10 LOC per page.
+export * from './pages'

package/src/components/team/pages/DomainsSettingsPage.tsx

@@ -0,0 +1,289 @@
+'use client'
+
+/**
+ * DomainsSettingsPage — shared composer for /settings/domains (startsim-o7s).
+ *
+ * Renders the list of EmailDomainClaim rows for the active company, the
+ * add-domain form, and the per-card verify-DNS / verify-email actions.
+ * Admin gating is read off useMembership; only admins see Add + Revoke.
+ */
+
+import * as React from 'react'
+import { useDomainClaims, useMembershipFromApi } from '@startsimpli/auth'
+import type { DomainClaimRow } from '@startsimpli/auth'
+import { DomainClaimCard } from '../DomainClaimCard'
+import type { DomainClaimLite } from '../types'
+import {
+  DOMAINS_SETTINGS_PAGE_DEFAULTS,
+  type DomainsSettingsPageClassNames,
+} from './domains-settings-page-default-class-names'
+import type { DomainsSettingsApi } from './types'
+
+export interface DomainsSettingsPageProps {
+  /** The @startsimpli/api client. */
+  api: DomainsSettingsApi
+  /** Per-slot className overrides. */
+  classNames?: DomainsSettingsPageClassNames
+  /**
+   * Optional override for the company id. Defaults to the company resolved
+   * by useMembership() on the current user.
+   */
+  companyId?: string
+  /** Back link href. Defaults to '/'. */
+  backHref?: string
+  /** Back link text. Defaults to '← Back'. */
+  backLabel?: string
+  /** Title. Defaults to 'Email domains'. */
+  title?: string
+}
+
+/** Loose domain pattern — backend is the canonical validator. */
+const DOMAIN_RE = /^[a-z0-9.-]+\.[a-z]{2,}$/i
+
+function toClaimLite(c: DomainClaimRow): DomainClaimLite {
+  return {
+    id: c.id,
+    companyId: c.companyId,
+    domain: c.domain,
+    verified: c.verified,
+    verificationMethod: c.verificationMethod,
+    verificationToken: c.verificationToken,
+    verifiedAt: c.verifiedAt,
+    createdAt: c.createdAt,
+  }
+}
+
+export function DomainsSettingsPage({
+  api,
+  classNames,
+  companyId: companyIdProp,
+  backHref = '/',
+  backLabel = '← Back',
+  title = 'Email domains',
+}: DomainsSettingsPageProps) {
+  const cls = { ...DOMAINS_SETTINGS_PAGE_DEFAULTS, ...(classNames ?? {}) }
+  const membership = useMembershipFromApi(api)
+  const { company, isAdmin, isLoading: membershipLoading } = membership
+  const companyId = companyIdProp ?? company?.id
+
+  const claims = useDomainClaims({
+    fetchClaims: async () => {
+      if (!companyId) return []
+      const res = await api.domainClaims.list({ companyId })
+      return res.results.map((c) => ({
+        id: c.id,
+        companyId: c.companyId,
+        domain: c.domain,
+        verified: c.verified,
+        verificationMethod: c.verificationMethod,
+        verificationToken: c.verificationToken,
+        verifiedAt: c.verifiedAt,
+        createdAt: c.createdAt,
+      }))
+    },
+    createClaim: async ({ companyId: cid, domain }) => {
+      const c = await api.domainClaims.create({ companyId: cid, domain })
+      return {
+        id: c.id,
+        companyId: c.companyId,
+        domain: c.domain,
+        verified: c.verified,
+        verificationMethod: c.verificationMethod,
+        verificationToken: c.verificationToken,
+        verifiedAt: c.verifiedAt,
+        createdAt: c.createdAt,
+      }
+    },
+    verifyDns: async (id) => {
+      const c = await api.domainClaims.verifyDns(id)
+      return {
+        id: c.id,
+        companyId: c.companyId,
+        domain: c.domain,
+        verified: c.verified,
+        verificationMethod: c.verificationMethod,
+        verificationToken: c.verificationToken,
+        verifiedAt: c.verifiedAt,
+        createdAt: c.createdAt,
+      }
+    },
+    initiateEmailVerification: (id) => api.domainClaims.verifyEmailInitiate(id),
+    submitEmailCode: async (id, code) => {
+      const c = await api.domainClaims.verifyEmailCode(id, code)
+      return {
+        id: c.id,
+        companyId: c.companyId,
+        domain: c.domain,
+        verified: c.verified,
+        verificationMethod: c.verificationMethod,
+        verificationToken: c.verificationToken,
+        verifiedAt: c.verifiedAt,
+        createdAt: c.createdAt,
+      }
+    },
+    revokeClaim: (id) => api.domainClaims.revoke(id),
+    autoFetch: !!companyId,
+  })
+
+  const [showAdd, setShowAdd] = React.useState(false)
+  const [domain, setDomain] = React.useState('')
+  const [addError, setAddError] = React.useState('')
+  const [submitting, setSubmitting] = React.useState(false)
+
+  async function handleAdd(e: React.FormEvent) {
+    e.preventDefault()
+    setAddError('')
+    const clean = domain.trim().toLowerCase()
+    if (!clean) {
+      setAddError('Domain is required')
+      return
+    }
+    if (!DOMAIN_RE.test(clean)) {
+      setAddError('Enter a valid domain like "example.com"')
+      return
+    }
+    if (!companyId) {
+      setAddError('No company in scope')
+      return
+    }
+    setSubmitting(true)
+    try {
+      await claims.create({ companyId, domain: clean })
+      setDomain('')
+      setShowAdd(false)
+    } catch (err) {
+      setAddError(err instanceof Error ? err.message : 'Could not add domain')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  if (membershipLoading) {
+    return <p className={cls.loadingText}>Loading…</p>
+  }
+
+  if (!companyId) {
+    return (
+      <div className={cls.root}>
+        <a href={backHref} className={cls.backLink}>
+          {backLabel}
+        </a>
+        <h1 className={cls.title}>{title}</h1>
+        <p className={cls.subtitle}>
+          You need a company to claim domains. Accept a team invitation first.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cls.root}>
+      <div className={cls.header}>
+        <a href={backHref} className={cls.backLink}>
+          {backLabel}
+        </a>
+        <div className={cls.titleRow}>
+          <div>
+            <h1 className={cls.title}>{title}</h1>
+            <p className={cls.subtitle}>
+              Verified domains auto-join new signups to your team. Add a domain
+              you own.
+            </p>
+          </div>
+          {isAdmin && !showAdd && (
+            <button
+              type="button"
+              onClick={() => setShowAdd(true)}
+              className={cls.primaryButton}
+            >
+              + Add domain
+            </button>
+          )}
+        </div>
+      </div>
+
+      {showAdd && (
+        <form onSubmit={handleAdd} className={cls.formCard}>
+          <label htmlFor="domain" className={cls.label}>
+            Domain
+          </label>
+          <input
+            id="domain"
+            type="text"
+            value={domain}
+            onChange={(e) => setDomain(e.target.value)}
+            placeholder="acme.com"
+            className={cls.input}
+            disabled={submitting}
+            autoFocus
+          />
+          {addError && <p className={cls.errorText}>{addError}</p>}
+          <div className={cls.formActions}>
+            <button type="submit" disabled={submitting} className={cls.primaryButton}>
+              {submitting ? 'Adding…' : 'Add domain'}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setShowAdd(false)
+                setDomain('')
+                setAddError('')
+              }}
+              className={cls.cancelButton}
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+      )}
+
+      {claims.isLoading ? (
+        <p className={cls.loadingText}>Loading domains…</p>
+      ) : claims.error ? (
+        <div className="space-y-2">
+          <p className={cls.errorText}>Could not load domains.</p>
+          <button
+            type="button"
+            onClick={() => void claims.refresh()}
+            className={cls.retryButton}
+          >
+            Retry
+          </button>
+        </div>
+      ) : claims.claims.length === 0 ? (
+        <div className={cls.emptyState}>
+          <p className={cls.emptyText}>
+            No domains claimed yet. Add one to auto-join new signups from your
+            team&apos;s email domain.
+          </p>
+        </div>
+      ) : (
+        <div className={cls.list}>
+          {claims.claims.map((c) => (
+            <DomainClaimCard
+              key={c.id}
+              claim={toClaimLite(c)}
+              classNames={cls.claimCard}
+              onVerifyDns={async () => {
+                await claims.verifyDns(c.id)
+              }}
+              onInitiateEmail={async () => {
+                await claims.initiateEmail(c.id)
+              }}
+              onVerifyEmail={async (_claim, code) => {
+                await claims.verifyEmail(c.id, code)
+              }}
+              onRevoke={
+                isAdmin
+                  ? async () => {
+                      await claims.revoke(c.id)
+                    }
+                  : undefined
+              }
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/team/pages/TeamSettingsPage.tsx

@@ -0,0 +1,423 @@
+'use client'
+
+/**
+ * TeamSettingsPage — shared composer for /settings/team across every app
+ * in the monorepo (startsim-o7s).
+ *
+ * Wires:
+ *   - useAuth (current user + logout)
+ *   - useMembershipFromApi (company + currentTeam + isAdmin)
+ *   - useInvitations (pending invitations)
+ *   - api.teams.members / updateRole / removeMember (members table)
+ *   - LeaveTeamDialog (calls api.teams.removeMember on the current user)
+ *
+ * Apps pass:
+ *   - api: the @startsimpli/api client (structurally typed below)
+ *   - centralAuthApp: app slug for buildCentralAuthUrl (e.g. 'vault')
+ *   - classNames: optional per-slot Tailwind overrides
+ *   - onLeftTeam: optional override; defaults to logout + central-auth bounce
+ */
+
+import * as React from 'react'
+import {
+  useAuth,
+  useInvitations,
+  useMembershipFromApi,
+  buildCentralAuthUrl,
+} from '@startsimpli/auth'
+import { MembersTable } from '../MembersTable'
+import { InviteMemberDialog } from '../InviteMemberDialog'
+import { LeaveTeamDialog } from '../LeaveTeamDialog'
+import type {
+  MemberRow,
+  TeamRole,
+  InvitationLite,
+} from '../types'
+import {
+  TEAM_SETTINGS_PAGE_DEFAULTS,
+  type TeamSettingsPageClassNames,
+} from './team-settings-page-default-class-names'
+import type {
+  TeamSettingsApi,
+  ApiInvitation,
+  ApiMember,
+} from './types'
+
+export interface TeamSettingsPageProps {
+  /** The @startsimpli/api client. */
+  api: TeamSettingsApi
+  /** Central-auth app slug (e.g. 'vault', 'market', 'raise'). */
+  centralAuthApp: string
+  /** Per-slot className overrides. */
+  classNames?: TeamSettingsPageClassNames
+  /**
+   * Optional override for the post-leave handler. Defaults to logout +
+   * redirect to central auth. Tested-only override path; most apps don't
+   * need to set it.
+   */
+  onLeftTeam?: () => void
+  /**
+   * Optional href used by the back link. Defaults to '/'. Apps can point at
+   * their dashboard route ('/environments', '/dashboard', etc.).
+   */
+  backHref?: string
+  /** Text shown for the back link. Defaults to '← Back'. */
+  backLabel?: string
+  /** Title shown in the header. Defaults to 'Team & members'. */
+  title?: string
+}
+
+/** Human-friendly relative-ish expiry. Keeps the wire untouched. */
+function formatExpiry(iso: string): string {
+  try {
+    const d = new Date(iso)
+    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+  } catch {
+    return iso
+  }
+}
+
+/** Render the backend's 400 "last owner" error in a friendly way. */
+function friendlyRoleError(err: unknown): string {
+  if (err instanceof Error && /owner/i.test(err.message)) {
+    return 'A team must always have at least one owner.'
+  }
+  return err instanceof Error ? err.message : 'Could not update role.'
+}
+
+function toInvitationLite(i: ApiInvitation): InvitationLite {
+  return {
+    id: i.id,
+    email: i.email,
+    teamId: i.teamId,
+    role: i.role,
+    token: i.token,
+    expiresAt: i.expiresAt,
+    acceptedAt: i.acceptedAt,
+    revokedAt: i.revokedAt,
+    isExpired: i.isExpired,
+    isAccepted: i.isAccepted,
+  }
+}
+
+export function TeamSettingsPage({
+  api,
+  centralAuthApp,
+  classNames,
+  onLeftTeam,
+  backHref = '/',
+  backLabel = '← Back',
+  title = 'Team & members',
+}: TeamSettingsPageProps) {
+  const cls = { ...TEAM_SETTINGS_PAGE_DEFAULTS, ...(classNames ?? {}) }
+  const { user, logout } = useAuth()
+  const membership = useMembershipFromApi(api)
+  const { company, currentTeam, isAdmin, isLoading, error, refresh } = membership
+
+  const teamId = currentTeam?.id
+  const teamSlug = currentTeam?.slug ?? teamId
+
+  const [members, setMembers] = React.useState<MemberRow[]>([])
+  const [membersLoading, setMembersLoading] = React.useState(false)
+  const [membersError, setMembersError] = React.useState<string>('')
+  const [mutationError, setMutationError] = React.useState<string>('')
+
+  const loadMembers = React.useCallback(async () => {
+    if (!teamSlug) return
+    setMembersLoading(true)
+    setMembersError('')
+    try {
+      const rows: ApiMember[] = await api.teams.members(teamSlug)
+      setMembers(
+        rows.map((m) => ({
+          id: m.id,
+          userId: m.userId,
+          teamId: m.teamId,
+          role: m.role,
+          joinedAt: m.joinedAt,
+          user: m.user,
+        })),
+      )
+    } catch (err) {
+      setMembersError(err instanceof Error ? err.message : 'Could not load members')
+    } finally {
+      setMembersLoading(false)
+    }
+  }, [api, teamSlug])
+
+  React.useEffect(() => {
+    void loadMembers()
+  }, [loadMembers])
+
+  const invitations = useInvitations({
+    fetchInvitations: async () => {
+      if (!teamSlug) return []
+      const res = await api.teamInvitations.list({ teamId: teamSlug })
+      return res.results.map((i) => ({
+        id: i.id,
+        email: i.email,
+        teamId: i.teamId,
+        role: i.role,
+        expiresAt: i.expiresAt,
+        acceptedAt: i.acceptedAt,
+        revokedAt: i.revokedAt,
+        isExpired: i.isExpired,
+        isAccepted: i.isAccepted,
+        createdAt: i.createdAt,
+      }))
+    },
+    revokeInvitation: async (id) => {
+      await api.teamInvitations.revoke(id)
+    },
+    bulkInviteToTeam: async (slug, invites) => {
+      const result = await api.teams.bulkInvite(slug, invites)
+      return {
+        invited: result.invited.map((i) => ({
+          id: i.id,
+          email: i.email,
+          teamId: i.teamId,
+          role: i.role,
+          expiresAt: i.expiresAt,
+          acceptedAt: i.acceptedAt,
+          revokedAt: i.revokedAt,
+          isExpired: i.isExpired,
+          isAccepted: i.isAccepted,
+          createdAt: i.createdAt,
+        })),
+        skipped: result.skipped,
+      }
+    },
+    autoFetch: false,
+  })
+
+  React.useEffect(() => {
+    if (teamSlug) void invitations.refresh()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [teamSlug])
+
+  async function handleChangeRole(userId: string, role: TeamRole) {
+    if (!teamSlug) return
+    setMutationError('')
+    const snapshot = members
+    setMembers((prev) => prev.map((m) => (m.userId === userId ? { ...m, role } : m)))
+    try {
+      await api.teams.updateRole(teamSlug, userId, role)
+    } catch (err) {
+      setMembers(snapshot)
+      setMutationError(friendlyRoleError(err))
+    }
+  }
+
+  async function handleRemove(userId: string) {
+    if (!teamSlug) return
+    setMutationError('')
+    const snapshot = members
+    setMembers((prev) => prev.filter((m) => m.userId !== userId))
+    try {
+      await api.teams.removeMember(teamSlug, userId)
+    } catch (err) {
+      setMembers(snapshot)
+      setMutationError(friendlyRoleError(err))
+    }
+  }
+
+  async function handleLeave() {
+    if (!teamSlug || !user) return
+    await api.teams.removeMember(teamSlug, user.id)
+  }
+
+  function defaultOnLeftTeam() {
+    void logout().finally(() => {
+      if (typeof window !== 'undefined') {
+        window.location.href = buildCentralAuthUrl('signin', {
+          app: centralAuthApp,
+          returnTo: `${window.location.origin}/`,
+        })
+      }
+    })
+  }
+
+  // ----- Render -----------------------------------------------------------
+
+  if (isLoading) {
+    return <p className={cls.loadingText}>Loading team…</p>
+  }
+
+  if (error) {
+    return (
+      <div className={cls.section}>
+        <p className={cls.errorText}>Could not load team membership.</p>
+        <button
+          type="button"
+          onClick={() => void refresh()}
+          className={cls.retryButton}
+        >
+          Retry
+        </button>
+      </div>
+    )
+  }
+
+  if (!currentTeam) {
+    return (
+      <div className={cls.section}>
+        <a href={backHref} className={cls.backLink}>
+          {backLabel}
+        </a>
+        <h1 className={cls.title}>{title}</h1>
+        <p className={cls.sectionBody}>
+          You aren&apos;t a member of any team yet. Accept an invitation or ask
+          an admin to add you.
+        </p>
+      </div>
+    )
+  }
+
+  const handleInvited = () => {
+    void invitations.refresh()
+  }
+
+  return (
+    <div className={cls.root}>
+      <div className={cls.header}>
+        <a href={backHref} className={cls.backLink}>
+          {backLabel}
+        </a>
+        <h1 className={cls.title}>{title}</h1>
+        <p className={cls.subtitle}>
+          {company ? `${company.name} · ` : ''}
+          {currentTeam.name}
+        </p>
+      </div>
+
+      {/* Members --------------------------------------------------------- */}
+      <section className={cls.section}>
+        <div className={cls.sectionHeader}>
+          <h2 className={cls.sectionHeading}>Members</h2>
+          {isAdmin && teamId && (
+            <InviteMemberDialog
+              teamId={teamId}
+              triggerLabel="+ Invite"
+              classNames={cls.inviteDialog}
+              onSubmit={(input) =>
+                api.teamInvitations
+                  .create({
+                    email: input.email,
+                    teamId: input.teamId,
+                    role: input.role,
+                  })
+                  .then(toInvitationLite)
+              }
+              onInvited={handleInvited}
+            />
+          )}
+        </div>
+        {mutationError && (
+          <p className={cls.errorText} role="alert">
+            {mutationError}
+          </p>
+        )}
+        {membersError && (
+          <div className="space-y-2">
+            <p className={cls.errorText}>{membersError}</p>
+            <button
+              type="button"
+              onClick={() => void loadMembers()}
+              className={cls.retryButton}
+            >
+              Retry
+            </button>
+          </div>
+        )}
+        {membersLoading ? (
+          <p className={cls.loadingText}>Loading members…</p>
+        ) : (
+          <MembersTable
+            members={members}
+            canManage={isAdmin}
+            onChangeRole={handleChangeRole}
+            onRemove={handleRemove}
+            classNames={cls.membersTable}
+          />
+        )}
+      </section>
+
+      {/* Pending invitations --------------------------------------------- */}
+      <section className={cls.section}>
+        <h2 className={cls.sectionHeading}>Pending invitations</h2>
+        {invitations.isLoading ? (
+          <p className={cls.loadingText}>Loading invitations…</p>
+        ) : invitations.error ? (
+          <div className="space-y-2">
+            <p className={cls.errorText}>Could not load invitations.</p>
+            <button
+              type="button"
+              onClick={() => void invitations.refresh()}
+              className={cls.retryButton}
+            >
+              Retry
+            </button>
+          </div>
+        ) : invitations.pending.length === 0 ? (
+          <p className={cls.emptyText}>No pending invitations.</p>
+        ) : (
+          <div className={cls.invitationsTableWrapper}>
+            <table className={cls.invitationsTable}>
+              <thead className={cls.invitationsThead}>
+                <tr>
+                  <th className={cls.invitationsTh}>Email</th>
+                  <th className={cls.invitationsTh}>Role</th>
+                  <th className={cls.invitationsTh}>Expires</th>
+                  <th className={`${cls.invitationsTh} text-right`}>Actions</th>
+                </tr>
+              </thead>
+              <tbody className={cls.invitationsTbody}>
+                {invitations.pending.map((inv) => (
+                  <tr key={inv.id}>
+                    <td className={cls.invitationsEmailCell}>{inv.email}</td>
+                    <td className={cls.invitationsRoleCell}>
+                      <span className={cls.invitationsRoleBadge}>{inv.role}</span>
+                    </td>
+                    <td className={cls.invitationsExpiryCell}>
+                      {formatExpiry(inv.expiresAt)}
+                    </td>
+                    <td className={cls.invitationsActionsCell}>
+                      {isAdmin && (
+                        <button
+                          type="button"
+                          onClick={() => void invitations.revoke(inv.id)}
+                          className={cls.invitationsRevokeButton}
+                        >
+                          Revoke
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+
+      {/* Leave team ------------------------------------------------------- */}
+      <section className={cls.dangerDivider}>
+        <h2 className={cls.sectionHeading}>Danger zone</h2>
+        <p className={cls.sectionBody}>
+          Leave this team. You&apos;ll need a fresh invitation to rejoin.
+        </p>
+        <LeaveTeamDialog
+          team={{
+            id: currentTeam.id,
+            slug: currentTeam.slug,
+            name: currentTeam.name,
+            companyId: currentTeam.companyId,
+          }}
+          onSubmit={handleLeave}
+          onLeft={onLeftTeam ?? defaultOnLeftTeam}
+          classNames={cls.leaveDialog}
+        />
+      </section>
+    </div>
+  )
+}

package/src/components/team/pages/domains-settings-page-default-class-names.ts

@@ -0,0 +1,89 @@
+/**
+ * Default Tailwind classes for the DomainsSettingsPage composer (startsim-o7s).
+ *
+ * Mirrors the slot pattern from TeamSettingsPage — apps override individual
+ * surfaces (primary button, input field, etc.) to tint the page in their
+ * visual identity.
+ */
+
+import type { DomainClaimCardClassNames } from '../domain-claim-card-default-class-names'
+
+export interface DomainsSettingsPageClassNames {
+  /** Outer page wrapper. */
+  root?: string
+  /** Header block (back link + title row + action). */
+  header?: string
+  /** Back link / breadcrumb. */
+  backLink?: string
+  /** Row pairing title with the "Add domain" trigger. */
+  titleRow?: string
+  /** Page title. */
+  title?: string
+  /** Subtitle text. */
+  subtitle?: string
+
+  /** Primary CTA (the "+ Add domain" button, the form's submit). */
+  primaryButton?: string
+  /** Plain text input. */
+  input?: string
+  /** Label above the input. */
+  label?: string
+  /** Form wrapper (border + padding). */
+  formCard?: string
+  /** Row containing the form's submit + cancel buttons. */
+  formActions?: string
+  /** "Cancel" button next to the form submit. */
+  cancelButton?: string
+
+  /** Inline error text. */
+  errorText?: string
+  /** Loading text. */
+  loadingText?: string
+
+  /** Wrapper for the empty-state ("No domains claimed yet"). */
+  emptyState?: string
+  /** Body text inside the empty state. */
+  emptyText?: string
+
+  /** Retry button shown next to fetch errors. */
+  retryButton?: string
+
+  /** Wrapper for the list of domain cards. */
+  list?: string
+
+  /** Nested className map for the DomainClaimCard. */
+  claimCard?: DomainClaimCardClassNames
+}
+
+export const DOMAINS_SETTINGS_PAGE_DEFAULTS: Required<
+  Omit<DomainsSettingsPageClassNames, 'claimCard'>
+> = {
+  root: 'space-y-6',
+  header: '',
+  backLink: 'text-sm text-primary-600 hover:underline',
+  titleRow: 'mt-2 flex items-center justify-between gap-4',
+  title: 'text-xl font-semibold text-gray-900',
+  subtitle: 'mt-1 text-sm text-gray-500',
+
+  primaryButton:
+    'rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50',
+  input:
+    'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500',
+  label: 'block text-sm font-medium text-gray-700',
+  formCard: 'rounded-xl border border-gray-200 bg-white p-4 space-y-3',
+  formActions: 'flex gap-2',
+  cancelButton:
+    'rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50',
+
+  errorText: 'text-sm text-red-600',
+  loadingText: 'text-sm text-gray-500',
+
+  emptyState:
+    'rounded-xl border border-dashed border-gray-300 bg-white p-10 text-center',
+  emptyText: 'text-sm text-gray-600',
+
+  retryButton:
+    'rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50',
+
+  list: 'space-y-4',
+}

package/src/components/team/pages/index.ts

@@ -0,0 +1,33 @@
+/**
+ * Shared /settings/team and /settings/domains page composers (startsim-o7s).
+ *
+ * Each app's page becomes a ~5 LOC wrapper that passes `api` + a tiny
+ * className-slot override map. See `vault-web/src/app/(dashboard)/settings/team/page.tsx`
+ * for the canonical wrapper.
+ */
+
+export { TeamSettingsPage } from './TeamSettingsPage'
+export type { TeamSettingsPageProps } from './TeamSettingsPage'
+export type {
+  TeamSettingsPageClassNames,
+} from './team-settings-page-default-class-names'
+export { TEAM_SETTINGS_PAGE_DEFAULTS } from './team-settings-page-default-class-names'
+
+export { DomainsSettingsPage } from './DomainsSettingsPage'
+export type { DomainsSettingsPageProps } from './DomainsSettingsPage'
+export type {
+  DomainsSettingsPageClassNames,
+} from './domains-settings-page-default-class-names'
+export { DOMAINS_SETTINGS_PAGE_DEFAULTS } from './domains-settings-page-default-class-names'
+
+export type {
+  TeamSettingsApi,
+  DomainsSettingsApi,
+  ApiInvitation,
+  ApiDomainClaim,
+  ApiMember,
+  ApiCompany,
+  ApiTeam,
+  ApiMyTeamMembership,
+  ApiPaginated,
+} from './types'

package/src/components/team/pages/team-settings-page-default-class-names.ts

@@ -0,0 +1,116 @@
+/**
+ * Default Tailwind classes for the TeamSettingsPage composer (startsim-o7s).
+ *
+ * Apps pass a partial override map to tint the page in their visual
+ * identity (indigo for vault, emerald for market, etc.). Each slot covers
+ * exactly one visual surface — section wrappers, headings, inline buttons,
+ * error rows.
+ */
+
+import type { MembersTableClassNames } from '../members-table-default-class-names'
+import type { InviteMemberDialogClassNames } from '../invite-member-dialog-default-class-names'
+import type { LeaveTeamDialogClassNames } from '../leave-team-dialog-default-class-names'
+
+export interface TeamSettingsPageClassNames {
+  /** Outer page wrapper (controls overall spacing). */
+  root?: string
+  /** Header block (back link + page title + meta line). */
+  header?: string
+  /** "Back to environments" or equivalent breadcrumb link. */
+  backLink?: string
+  /** Page title (`Team & members`). */
+  title?: string
+  /** Subtitle line under the title (company · team name). */
+  subtitle?: string
+
+  /** Wrapper for a single page section (members / invitations / danger). */
+  section?: string
+  /** Row that pairs a section heading with its primary action button. */
+  sectionHeader?: string
+  /** Section H2 label (small uppercase tracking). */
+  sectionHeading?: string
+  /** Body text inside a section. */
+  sectionBody?: string
+
+  /** Border divider above the danger zone. */
+  dangerDivider?: string
+
+  /** Inline error text (mutation failures, validation hits). */
+  errorText?: string
+  /** Loading text ("Loading team…", "Loading members…"). */
+  loadingText?: string
+  /** Empty-state text ("No pending invitations.", etc). */
+  emptyText?: string
+
+  /** "Retry" button rendered next to inline errors. */
+  retryButton?: string
+
+  /** Wrapper of the pending-invitations table. */
+  invitationsTableWrapper?: string
+  /** The invitations <table>. */
+  invitationsTable?: string
+  /** Thead of the invitations table. */
+  invitationsThead?: string
+  /** Th cells of the invitations table. */
+  invitationsTh?: string
+  /** Tbody (divide-y normally). */
+  invitationsTbody?: string
+  /** Cell containing the email column. */
+  invitationsEmailCell?: string
+  /** Cell containing the role badge. */
+  invitationsRoleCell?: string
+  /** Role badge style. */
+  invitationsRoleBadge?: string
+  /** Cell containing the expiry. */
+  invitationsExpiryCell?: string
+  /** Cell containing the revoke action. */
+  invitationsActionsCell?: string
+  /** Revoke button text. */
+  invitationsRevokeButton?: string
+
+  /** Nested className maps for the embedded shared components. */
+  membersTable?: MembersTableClassNames
+  inviteDialog?: InviteMemberDialogClassNames
+  leaveDialog?: LeaveTeamDialogClassNames
+}
+
+export const TEAM_SETTINGS_PAGE_DEFAULTS: Required<
+  Omit<
+    TeamSettingsPageClassNames,
+    'membersTable' | 'inviteDialog' | 'leaveDialog'
+  >
+> = {
+  root: 'space-y-8',
+  header: '',
+  backLink: 'text-sm text-primary-600 hover:underline',
+  title: 'mt-2 text-xl font-semibold text-gray-900',
+  subtitle: 'mt-1 text-sm text-gray-500',
+
+  section: 'space-y-3',
+  sectionHeader: 'flex items-center justify-between',
+  sectionHeading: 'text-sm font-semibold uppercase tracking-wide text-gray-500',
+  sectionBody: 'text-sm text-gray-500',
+
+  dangerDivider: 'space-y-3 border-t border-gray-200 pt-6',
+
+  errorText: 'text-sm text-red-600',
+  loadingText: 'text-sm text-gray-500',
+  emptyText: 'text-sm text-gray-500',
+
+  retryButton:
+    'rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50',
+
+  invitationsTableWrapper:
+    'overflow-hidden rounded-xl border border-gray-200 bg-white',
+  invitationsTable: 'w-full text-sm',
+  invitationsThead: 'bg-gray-50 text-left text-xs uppercase text-gray-500',
+  invitationsTh: 'px-4 py-3 font-medium',
+  invitationsTbody: 'divide-y divide-gray-100',
+  invitationsEmailCell: 'px-4 py-3 text-gray-700',
+  invitationsRoleCell: 'px-4 py-3',
+  invitationsRoleBadge:
+    'inline-flex items-center rounded-full bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary-700',
+  invitationsExpiryCell: 'px-4 py-3 text-gray-500',
+  invitationsActionsCell: 'px-4 py-3 text-right',
+  invitationsRevokeButton: 'text-red-600 hover:underline text-sm',
+}

package/src/components/team/pages/types.ts

@@ -0,0 +1,135 @@
+/**
+ * Narrow API-surface interfaces for the shared TeamSettingsPage /
+ * DomainsSettingsPage composers.
+ *
+ * Apps pass in the @startsimpli/api `api` instance and these interfaces
+ * structurally describe the slice the pages actually use. Keeping the slice
+ * shape inline here means @startsimpli/ui does NOT depend on @startsimpli/api
+ * directly. startsim-o7s.
+ */
+
+import type {
+  InvitationLite,
+  MemberRow,
+  TeamRole,
+  DomainClaimLite,
+} from '../types'
+
+/** A page-level `member` row hits the API as-is — keep the shape thin. */
+export interface ApiMember {
+  id: string
+  userId: string
+  teamId: string
+  role: TeamRole
+  joinedAt: string
+  user?: MemberRow['user']
+}
+
+/** Paginated wrapper used by @startsimpli/api list endpoints. */
+export interface ApiPaginated<T> {
+  count?: number
+  next?: string | null
+  previous?: string | null
+  results: T[]
+}
+
+/** A team membership row from /team-members/my-teams/. */
+export interface ApiMyTeamMembership {
+  id: string
+  userId: string
+  teamId: string
+  role: TeamRole
+  joinedAt: string
+  team?: {
+    id: string
+    slug: string
+    name: string
+    companyId: string
+  }
+}
+
+/** A team row from /teams/{idOrSlug}/. */
+export interface ApiTeam {
+  id: string
+  slug: string
+  name: string
+  companyId: string
+}
+
+/** A company row from /companies/{idOrSlug}/. */
+export interface ApiCompany {
+  id: string
+  slug: string
+  name: string
+}
+
+/** An invitation row from /team-invitations/. */
+export interface ApiInvitation extends InvitationLite {
+  createdAt: string
+}
+
+/** A domain-claim row from /team-domain-claims/. */
+export interface ApiDomainClaim extends DomainClaimLite {}
+
+/**
+ * Minimum API surface the TeamSettingsPage composer needs. The real
+ * @startsimpli/api `api` instance satisfies this structurally.
+ */
+export interface TeamSettingsApi {
+  teams: {
+    myTeams: () => Promise<ApiMyTeamMembership[]>
+    retrieve: (idOrSlug: string) => Promise<ApiTeam>
+    members: (idOrSlug: string) => Promise<ApiMember[]>
+    updateRole: (
+      idOrSlug: string,
+      userId: string,
+      role: TeamRole,
+    ) => Promise<unknown>
+    removeMember: (idOrSlug: string, userId: string) => Promise<unknown>
+    bulkInvite: (
+      idOrSlug: string,
+      invitations: Array<{ email: string; role: TeamRole }>,
+    ) => Promise<{
+      invited: ApiInvitation[]
+      skipped?: Array<{ email: string; reason: string }>
+    }>
+  }
+  teamInvitations: {
+    list: (params: { teamId: string }) => Promise<ApiPaginated<ApiInvitation>>
+    create: (input: {
+      email: string
+      teamId: string
+      role: TeamRole
+    }) => Promise<ApiInvitation>
+    revoke: (id: string) => Promise<void>
+  }
+  companies: {
+    retrieve: (idOrSlug: string) => Promise<ApiCompany>
+  }
+}
+
+/**
+ * Minimum API surface the DomainsSettingsPage composer needs. The real
+ * @startsimpli/api `api` instance satisfies this structurally.
+ */
+export interface DomainsSettingsApi {
+  domainClaims: {
+    list: (params: { companyId: string }) => Promise<ApiPaginated<ApiDomainClaim>>
+    create: (input: {
+      companyId: string
+      domain: string
+    }) => Promise<ApiDomainClaim>
+    verifyDns: (id: string) => Promise<ApiDomainClaim>
+    verifyEmailInitiate: (id: string) => Promise<{ detail: string }>
+    verifyEmailCode: (id: string, code: string) => Promise<ApiDomainClaim>
+    revoke: (id: string) => Promise<void>
+  }
+  /** Used to pick the default companyId when the prop is omitted. */
+  teams: {
+    myTeams: () => Promise<ApiMyTeamMembership[]>
+    retrieve: (idOrSlug: string) => Promise<ApiTeam>
+  }
+  companies: {
+    retrieve: (idOrSlug: string) => Promise<ApiCompany>
+  }
+}