O Que Estamos Construindo

Este artigo constrói um painel SaaS totalmente funcional multi-tenant a partir de um projeto SvelteKit em branco. Cada arquivo é mostrado na íntegra. Cada trecho executa sem modificação. Nenhum serviço de banco de dados, nenhum serviço de feature flags, nenhuma dependência externa necessária — usamos um banco de dados falso em memória para que você possa executar isso imediatamente.

Ao final você terá:

Isolamento de tenant baseado em subdomínio (acme.localhost → Acme Corp, globex.localhost → Globex Inc)
Arquitetura de contexto em camadas - tema padrão → branding do tenant → modo escuro admin, todos usando a mesma chave de contexto theme com sombreamento
Feature flags por tenant carregadas no servidor a partir de um banco de dados falso (nunca computadas no cliente)
Um grupo de rotas admin protegidas com verificações de papel que produzem um 403 adequado, não um botão oculto
Um componente RequireFeature para UI com controle declarativo de funcionalidades
Todos os componentes implementados - AppHeader, AppSidebar, StatsCard, AdminNav - não apenas referenciados

A stack: SvelteKit 2 + Svelte 5 Runes + TypeScript. Sem Prisma, sem Lucia, sem Unleash.

What we're building:
══════════════════════════════════════════════════════════════

  acme.localhost/dashboard          → Acme Corp dashboard (tenant branding)
  globex.localhost/dashboard        → Globex Inc dashboard (different branding)
  acme.localhost/admin/members      → Tenant admin panel (role-gated, dark theme)
  platform.localhost/admin/panel    → Superadmin: all tenants (platform-only)

  Context layers:
  ┌─────────────────────────────────────────────────────────┐
  │  +layout.svelte (root)                                  │
  │  └── setContext('theme', defaultTheme)  ← base          │
  │  └── setContext('appConfig', …)                         │
  │  └── setContext('session', …)                           │
  │       │                                                 │
  │       ▼ (app)/dashboard/+layout.svelte                  │
  │       └── setContext('tenant', …)                       │
  │       └── setContext('features', …)                     │
  │       └── setContext('theme', tenantTheme)  ← shadows   │
  │            │                                            │
  │            ▼ (admin)/admin/+layout.svelte               │
  │            └── setContext('theme', adminTheme) ← shadows│
  │            └── setContext('adminStats', …)              │
  │                                                         │
  │  Any deep component                                     │
  │  └── getContext('theme') → whichever is closest         │
  └─────────────────────────────────────────────────────────┘

Bootstrap do Projeto

Comece do zero:

npx sv create saas-context-demo
# Choose: SvelteKit minimal, TypeScript: Yes
cd saas-context-demo
npm install

Favicon & Shell da Aplicação

<!-- src/app.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
		<link
			href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
			rel="stylesheet"
		/>
		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>
	</body>
</html>

Coloque qualquer PNG 32×32 em static/favicon.png, ou crie um static/favicon.svg e altere o href adequadamente. O Inter é carregado do Google Fonts, ele dá à aplicação uma aparência refinada sem nenhuma configuração de fonte local.

Suporte a Subdomínio no Desenvolvimento

O servidor de desenvolvimento do SvelteKit escuta em localhost. Há duas maneiras de alternar entre tenants localmente, sem necessidade de editar /etc/hosts em nenhuma delas:

Opção 1 - Query param (funciona em qualquer lugar, configuração zero)

http://localhost:5173?tenant=acme
http://localhost:5173?tenant=globex

Opção 2 - Subdomínio (funciona nativamente em navegadores modernos)

Navegadores modernos resolvem *.localhost automaticamente. Nenhuma configuração de DNS, nenhuma alteração em /etc/hosts necessária:

http://acme.localhost:5173/dashboard
http://globex.localhost:5173/dashboard

Nenhuma alteração em vite.config.ts é necessária, o hook cuida de ambas as abordagens.

Estrutura Final do Projeto

src/
├── app.d.ts                                     ← locals types
├── app.html                                     ← Inter font + favicon
├── hooks.server.ts                              ← tenant resolution, session check
├── lib/
│   ├── assets/
│   │   └── favicon.svg                          ← SVG favicon (optional)
│   ├── context-helpers.ts                       ← typed getContext wrappers
│   ├── server/
│   │   └── db.ts                                ← in-memory fake database
│   ├── types/
│   │   └── context.ts                           ← shared TS interfaces
│   └── components/
│       ├── TenantLogo.svelte                    ← maps TenantIconName → lucide icon
│       ├── AppHeader.svelte
│       ├── AppSidebar.svelte
│       ├── AdminNav.svelte
│       ├── StatsCard.svelte
│       └── RequireFeature.svelte
└── routes/
    ├── +layout.server.ts                        ← loads appConfig + session
    ├── +layout.svelte                           ← root context (theme, appConfig, session)
    ├── +page.server.ts                          ← redirect if authed, pass tenant
    ├── +page.svelte                             ← public landing (tenant-aware)
    ├── login/
    │   ├── +page.server.ts
    │   └── +page.svelte
    ├── logout/
    │   └── +page.server.ts                      ← clears session cookie
    ├── (app)/                                   ← user-facing route group
    │   └── dashboard/
    │       ├── +layout.server.ts                ← loads tenant + features
    │       ├── +layout.svelte                   ← tenant context (shadows theme)
    │       ├── +page.server.ts
    │       └── +page.svelte
    └── (admin)/                                 ← admin route group
        └── admin/
            ├── +layout.server.ts                ← role check → 403, isSuperAdmin branching
            ├── +layout.svelte                   ← admin context (shadows theme dark)
            ├── panel/                           ← superadmin only: all tenants
            │   ├── +page.server.ts
            │   └── +page.svelte
            └── members/                         ← tenant admins: own tenant members
                ├── +page.server.ts
                └── +page.svelte
static/
└── favicon.png

Passo 1: Tipos Compartilhados

// src/lib/types/context.ts

export interface AppConfig {
	name: string
	version: string
	environment: string
}

export interface Theme {
	mode: 'light' | 'dark'
	colors: {
		primary: string
		accent: string
		background: string
		surface: string
		border: string
		text: string
		textMuted: string
	}
}

export type TenantIconName = 'rocket' | 'zap' | 'building2' | 'shield'

export interface Tenant {
	id: string
	slug: string
	name: string
	branding: {
		logoIcon: TenantIconName // maps to a lucide-svelte icon via TenantLogo.svelte
		primaryColor: string // CSS color string
		accentColor: string
	}
	plan: 'free' | 'pro' | 'enterprise'
}

export interface Features {
	advancedReporting: boolean
	apiAccess: boolean
	customDomains: boolean
	prioritySupport: boolean
	whiteLabeling: boolean
}

export interface UserSession {
	userId: string
	name: string
	email: string
	role: 'member' | 'admin' | 'owner' | 'superadmin'
	tenantId: string
}

Passo 1b: Funções Auxiliares de Contexto

À medida que o número de chaves de contexto cresce, repetir getContext<{ readonly current: Tenant }>('tenant') em cada componente fica verboso. Extraia as chamadas para um pequeno arquivo de auxiliares:

// src/lib/context-helpers.ts
import { getContext } from 'svelte'
import type { AppConfig, Features, Tenant, Theme, UserSession } from '$lib/types/context'

// Theme is set as a plain object with getter properties for reactive colors.
// The object reference itself is stable, getContext returns it directly.
export const getTheme = () => getContext<Theme>('theme')

// All other context values use the getter-object pattern because they derive
// from $props(). Call .current in the component and wrap with $derived so
// Svelte tracks the dependency correctly.
export const getTenantCtx = () => getContext<{ readonly current: Tenant }>('tenant')
export const getFeaturesCtx = () => getContext<{ readonly current: Features }>('features')
export const getSessionCtx = () => getContext<{ readonly current: UserSession | null }>('session')
export const getAppConfigCtx = () => getContext<{ readonly current: AppConfig }>('appConfig')

Os componentes então importam os auxiliares e desempacotam com $derived:

<script lang="ts">
	import { getTheme, getTenantCtx, getFeaturesCtx } from '$lib/context-helpers'

	const theme = getTheme()
	const tenantCtx = getTenantCtx()
	const featuresCtx = getFeaturesCtx()

	const tenant = $derived(tenantCtx.current)
	const features = $derived(featuresCtx.current)
</script>

Se você renomear uma chave de contexto ou alterar um tipo, o erro do TypeScript aparece imediatamente em todos os consumidores, não como um undefined em tempo de execução difícil de rastrear. Os componentes neste artigo chamam getContext diretamente por clareza, mas em um projeto real você usaria esses auxiliares em todo lugar.

Passo 2: O Banco de Dados Falso em Memória

Isso é reiniciado a cada reinicialização do servidor e não possui hash de senha real. Use para entender os padrões e substitua por Drizzle + better-auth em produção.

// src/lib/server/db.ts

import type { Features, Tenant, TenantIconName, UserSession } from '$lib/types/context'

// ─── Internal shapes ────────────────────────────────────────────────────────

interface DBTenant {
	id: string
	slug: string
	name: string
	plan: 'free' | 'pro' | 'enterprise'
	branding: {
		logoIcon: TenantIconName
		primaryColor: string
		accentColor: string
	}
}

interface DBUser {
	id: string
	tenantId: string
	name: string
	email: string
	/** ⚠️ Demo only — plaintext comparison */
	password: string
	role: 'member' | 'admin' | 'owner' | 'superadmin'
}

interface DBSession {
	token: string
	userId: string
	expiresAt: Date
}

interface DBFeatureFlag {
	tenantId: string | null // null = global default
	key: string
	enabled: boolean
}

// ─── Seed data ───────────────────────────────────────────────────────────────

const tenants: DBTenant[] = [
	// ── Platform (internal — not a customer tenant) ───────────────────────────
	{
		id: 'tenant_platform',
		slug: 'platform',
		name: 'SaaS Platform',
		plan: 'enterprise',
		branding: {
			logoIcon: 'shield',
			primaryColor: '#6366f1',
			accentColor: '#818cf8'
		}
	},
	// ── Customer tenants ──────────────────────────────────────────────────────
	{
		id: 'tenant_acme',
		slug: 'acme',
		name: 'Acme Corp',
		plan: 'enterprise',
		branding: {
			logoIcon: 'rocket',
			primaryColor: '#ff6452',
			accentColor: '#ff7961'
		}
	},
	{
		id: 'tenant_globex',
		slug: 'globex',
		name: 'Globex Inc',
		plan: 'pro',
		branding: {
			logoIcon: 'zap',
			primaryColor: '#0ec5e9',
			accentColor: '#33a6e0'
		}
	},
	{
		id: 'tenant_initech',
		slug: 'initech',
		name: 'Initech LLC',
		plan: 'free',
		branding: {
			logoIcon: 'building2',
			primaryColor: '#ff7ee1',
			accentColor: '#ff17bd'
		}
	}
]

const users: DBUser[] = [
	// ── Platform superadmin ───────────────────────────────────────────────────
	{
		id: 'user_superadmin',
		tenantId: 'tenant_platform',
		name: 'Platform Admin',
		email: 'admin@platform.com',
		password: 'password123',
		role: 'superadmin'
	},
	// ── Acme Corp (enterprise) ────────────────────────────────────────────────
	{
		id: 'user_alice',
		tenantId: 'tenant_acme',
		name: 'Alice Anderson',
		email: 'alice@acme.com',
		password: 'password123',
		role: 'owner'
	},
	{
		id: 'user_bob',
		tenantId: 'tenant_acme',
		name: 'Bob Baker',
		email: 'bob@acme.com',
		password: 'password123',
		role: 'member'
	},
	{
		id: 'user_charlie',
		tenantId: 'tenant_acme',
		name: 'Charlie Chen',
		email: 'charlie@acme.com',
		password: 'password123',
		role: 'member'
	},
	{
		id: 'user_diana',
		tenantId: 'tenant_acme',
		name: 'Diana Patel',
		email: 'diana@acme.com',
		password: 'password123',
		role: 'member'
	},
	{
		id: 'user_ethan',
		tenantId: 'tenant_acme',
		name: 'Ethan Moore',
		email: 'ethan@acme.com',
		password: 'password123',
		role: 'member'
	},
	{
		id: 'user_fiona',
		tenantId: 'tenant_acme',
		name: 'Fiona Liu',
		email: 'fiona@acme.com',
		password: 'password123',
		role: 'member'
	},
	// ── Globex Inc (pro) ──────────────────────────────────────────────────────
	{
		id: 'user_carol',
		tenantId: 'tenant_globex',
		name: 'Carol Owen',
		email: 'carol@globex.com',
		password: 'password123',
		role: 'owner'
	},
	{
		id: 'user_george',
		tenantId: 'tenant_globex',
		name: 'George Walsh',
		email: 'george@globex.com',
		password: 'password123',
		role: 'admin'
	},
	{
		id: 'user_hannah',
		tenantId: 'tenant_globex',
		name: 'Hannah Brooks',
		email: 'hannah@globex.com',
		password: 'password123',
		role: 'member'
	},
	{
		id: 'user_ivan',
		tenantId: 'tenant_globex',
		name: 'Ivan Reyes',
		email: 'ivan@globex.com',
		password: 'password123',
		role: 'member'
	},
	// ── Initech LLC (free) ────────────────────────────────────────────────────
	{
		id: 'user_dave',
		tenantId: 'tenant_initech',
		name: 'Dave Nguyen',
		email: 'dave@initech.com',
		password: 'password123',
		role: 'owner'
	},
	{
		id: 'user_judy',
		tenantId: 'tenant_initech',
		name: 'Judy Kim',
		email: 'judy@initech.com',
		password: 'password123',
		role: 'admin'
	},
	{
		id: 'user_kevin',
		tenantId: 'tenant_initech',
		name: 'Kevin Scott',
		email: 'kevin@initech.com',
		password: 'password123',
		role: 'member'
	},
	{
		id: 'user_laura',
		tenantId: 'tenant_initech',
		name: 'Laura Stone',
		email: 'laura@initech.com',
		password: 'password123',
		role: 'member'
	}
]

/** Feature flags: null tenantId = global default; specific tenantId = override. */
const featureFlags: DBFeatureFlag[] = [
	// Global defaults (all tenants)
	{ tenantId: null, key: 'advancedReporting', enabled: false },
	{ tenantId: null, key: 'apiAccess', enabled: false },
	{ tenantId: null, key: 'customDomains', enabled: false },
	{ tenantId: null, key: 'prioritySupport', enabled: false },
	{ tenantId: null, key: 'whiteLabeling', enabled: false },

	// Acme (enterprise) — override everything on
	{ tenantId: 'tenant_acme', key: 'advancedReporting', enabled: true },
	{ tenantId: 'tenant_acme', key: 'apiAccess', enabled: true },
	{ tenantId: 'tenant_acme', key: 'customDomains', enabled: true },
	{ tenantId: 'tenant_acme', key: 'prioritySupport', enabled: true },
	{ tenantId: 'tenant_acme', key: 'whiteLabeling', enabled: true },

	// Globex (pro) — some features on
	{ tenantId: 'tenant_globex', key: 'advancedReporting', enabled: true },
	{ tenantId: 'tenant_globex', key: 'apiAccess', enabled: true },
	{ tenantId: 'tenant_globex', key: 'prioritySupport', enabled: true }
]

// Sessions created at runtime
const sessions: DBSession[] = []

// ─── Public API ──────────────────────────────────────────────────────────────

import { randomBytes } from 'node:crypto'

function generateToken() {
	return randomBytes(32).toString('hex')
}

function resolveFeatureFlags(tenantId: string): Features {
	function resolve(key: string): boolean {
		const override = featureFlags.find((f) => f.tenantId === tenantId && f.key === key)
		if (override !== undefined) return override.enabled
		const global = featureFlags.find((f) => f.tenantId === null && f.key === key)
		return global?.enabled ?? false
	}

	return {
		advancedReporting: resolve('advancedReporting'),
		apiAccess: resolve('apiAccess'),
		customDomains: resolve('customDomains'),
		prioritySupport: resolve('prioritySupport'),
		whiteLabeling: resolve('whiteLabeling')
	}
}

export const db = {
	tenants: {
		findBySlug(slug: string): DBTenant | null {
			return tenants.find((t) => t.slug === slug) ?? null
		},
		/** All tenants including the internal platform tenant. */
		all(): DBTenant[] {
			return [...tenants]
		},
		/** Customer tenants only — excludes the internal platform tenant. */
		customer(): DBTenant[] {
			return tenants.filter((t) => t.id !== 'tenant_platform')
		}
	},

	users: {
		authenticate(email: string, password: string): DBUser | null {
			const user = users.find(
				(u) => u.email.toLowerCase() === email.toLowerCase() && u.password === password
			)
			return user ?? null
		},
		findById(id: string): DBUser | null {
			return users.find((u) => u.id === id) ?? null
		},
		/** All users belonging to a specific tenant. */
		forTenant(tenantId: string): DBUser[] {
			return users.filter((u) => u.tenantId === tenantId)
		},
		/** All customer users — excludes platform superadmins. */
		allCustomer(): DBUser[] {
			return users.filter((u) => u.tenantId !== 'tenant_platform')
		}
	},

	sessions: {
		create(userId: string, ttlDays = 1): DBSession {
			const session: DBSession = {
				token: generateToken(),
				userId,
				expiresAt: new Date(Date.now() + ttlDays * 24 * 60 * 60 * 1000)
			}
			sessions.push(session)
			return session
		},
		findByToken(token: string): DBSession | null {
			const s = sessions.find((s) => s.token === token)
			if (!s || s.expiresAt < new Date()) return null
			return s
		},
		deleteByToken(token: string): void {
			const i = sessions.findIndex((s) => s.token === token)
			if (i !== -1) sessions.splice(i, 1)
		}
	},

	features: {
		forTenant(tenantId: string): Features {
			return resolveFeatureFlags(tenantId)
		}
	}
}

/** Build a typed Tenant from a raw DB record. */
export function toPublicTenant(raw: ReturnType<typeof db.tenants.findBySlug>): Tenant {
	if (!raw) throw new Error('toPublicTenant: null input')
	return {
		id: raw.id,
		slug: raw.slug,
		name: raw.name,
		plan: raw.plan,
		branding: raw.branding
	}
}

/** Build a typed UserSession from a raw DB user. */
export function toSession(raw: ReturnType<typeof db.users.findById>): UserSession {
	if (!raw) throw new Error('toSession: null input')
	return {
		userId: raw.id,
		name: raw.name,
		email: raw.email,
		role: raw.role,
		tenantId: raw.tenantId
	}
}

Contas de Demo

Email	Senha	Tenant	Papel	Plano	Acesso admin
`admin@platform.com`	`password123`	Platform	superadmin	—	`/admin/panel` (todos os tenants)
`alice@acme.com`	`password123`	Acme Corp	owner	enterprise	`/admin/members`
`bob@acme.com`	`password123`	Acme Corp	member	enterprise	nenhum
`carol@globex.com`	`password123`	Globex Inc	owner	pro	`/admin/members`
`george@globex.com`	`password123`	Globex Inc	admin	pro	`/admin/members`
`dave@initech.com`	`password123`	Initech LLC	owner	free	`/admin/members`
`judy@initech.com`	`password123`	Initech LLC	admin	free	`/admin/members`

A conta superadmin pertence ao tenant interno tenant_platform e deve ser acessada via platform.localhost:5173. É o único papel que vê /admin/panel (a visão completa entre tenants) — todos os outros papéis com capacidade admin são direcionados para /admin/members, onde veem apenas os dados do próprio tenant.

Passo 3: Estender os Locals do SvelteKit

event.locals é o bloco de notas por requisição do lado do servidor no SvelteKit. Cada hook, função de load e rota de API na mesma requisição o compartilham. Antes de poder escrever event.locals.tenant, o TypeScript precisa conhecer a estrutura.

// src/app.d.ts
import type { Tenant, UserSession } from '$lib/types/context'

declare global {
	namespace App {
		interface Locals {
			/**
			 * The resolved tenant for this request.
			 * Set by hooks.server.ts based on subdomain (or ?tenant= in dev).
			 * null when no matching tenant is found.
			 */
			tenant: Tenant | null

			/**
			 * The authenticated user session, or null if unauthenticated.
			 * Set by hooks.server.ts after validating the session cookie.
			 */
			session: UserSession | null
		}
	}
}

export {}

Como os locals fluem por uma requisição

Browser request to acme.localhost/dashboard
        │
        ▼
hooks.server.ts
  ├── Extracts "acme" from host → db.tenants.findBySlug('acme')
  ├── Sets event.locals.tenant = { id, name, branding, plan, … }
  ├── Reads session cookie → validates → db.users.findById(…)
  └── Sets event.locals.session = { userId, name, role, … }
        │
        ▼
+layout.server.ts (root)
  └── Reads locals.tenant, locals.session
  └── Returns { appConfig, session, tenantSlug }
        │
        ▼
(app)/+layout.server.ts
  └── Reads locals.tenant → db.features.forTenant(tenant.id)
  └── Returns { tenant, features }
        │
        ▼
Root +layout.svelte → setContext('theme', defaultTheme)
(app)/+layout.svelte → setContext('tenant', …), setContext('features', …),
                        setContext('theme', tenantTheme)  ← shadows root
(admin)/+layout.svelte → setContext('theme', adminTheme)  ← shadows app
        │
        ▼
Any deep component → getContext('theme') gets the closest ancestor's value

Cada etapa é tipada. Se você alterar Locals em app.d.ts, o TypeScript expõe toda referência quebrada.

Passo 4: Hook do Servidor - Resolução de Tenant

O hook é executado antes de cada função de load. É o único lugar onde a resolução de tenant e a validação de sessão acontecem.

// src/hooks.server.ts

import type { Handle } from '@sveltejs/kit'
import { db, toPublicTenant, toSession } from '$lib/server/db'

export const handle: Handle = async ({ event, resolve }) => {
	const host = event.request.headers.get('host') ?? ''

	// ── 1. Resolve tenant from subdomain ───────────────────────────────────────
	//
	// Production:  acme.yourapp.com  → slug = 'acme'
	// Development: acme.localhost    → slug = 'acme'
	// Fallback:    localhost:5173    → read ?tenant= query param, or 'acme' as demo default

	const tenantSlug = resolveTenantSlug(host, event.url)

	const rawTenant = db.tenants.findBySlug(tenantSlug)

	if (!rawTenant) {
		// Unknown tenant - return plain 404 (no HTML layout needed)
		return new Response(`Tenant "${tenantSlug}" not found.`, { status: 404 })
	}

	event.locals.tenant = toPublicTenant(rawTenant)

	// ── 2. Validate session ───────────────────────────────────────────────────
	const sessionToken = event.cookies.get('session')

	if (sessionToken) {
		const dbSession = db.sessions.findByToken(sessionToken)

		if (dbSession) {
			const rawUser = db.users.findById(dbSession.userId)

			if (rawUser && rawUser.tenantId === rawTenant.id) {
				// User must belong to this tenant - no cross-tenant access
				event.locals.session = toSession(rawUser)
			} else {
				// Stale or cross-tenant session - clear it
				db.sessions.deleteByToken(sessionToken)
				event.cookies.delete('session', { path: '/' })
				event.locals.session = null
			}
		} else {
			// Expired or invalid token - clear the cookie
			event.cookies.delete('session', { path: '/' })
			event.locals.session = null
		}
	} else {
		event.locals.session = null
	}

	return resolve(event)
}

function resolveTenantSlug(host: string, url: URL): string {
	// Strip port number
	const hostname = host.split(':')[0]

	// Single-label host (plain 'localhost') - use query param or demo default
	if (!hostname.includes('.')) {
		return url.searchParams.get('tenant') ?? 'acme'
	}

	// Multi-label: first segment is the subdomain (acme.localhost, acme.yourapp.com)
	const subdomain = hostname.split('.')[0]

	// Treat 'www' and 'app' as marketing / auth subdomains - no tenant
	if (subdomain === 'www' || subdomain === 'app') {
		return url.searchParams.get('tenant') ?? 'acme'
	}

	return subdomain
}

Observe a verificação rawUser.tenantId === rawTenant.id. Se Alice da Acme de alguma forma tiver um cookie de sessão válido mas acessar globex.localhost, ela será desconectada em vez de acessar os dados da Globex. O isolamento de tenant acontece na camada de validação de sessão, não apenas na UI.

Passo 5: Load do Servidor no Layout Raiz

// src/routes/+layout.server.ts

import { redirect } from '@sveltejs/kit'
import type { LayoutServerLoad } from './$types'

// Routes that guests can access without logging in
const PUBLIC_PATHS = ['/', '/login']

export const load: LayoutServerLoad = async ({ locals, url }) => {
	const { tenant, session } = locals

	// Redirect to login for protected routes
	const isPublic = PUBLIC_PATHS.some((p) => url.pathname.startsWith(p))
	if (!session && !isPublic) {
		const returnUrl = encodeURIComponent(url.pathname + url.search)
		redirect(303, `/login?returnUrl=${returnUrl}`)
	}

	return {
		appConfig: {
			name: 'SaaS Demo',
			version: '1.0.0',
			environment: process.env.NODE_ENV ?? 'development'
		},
		// Pass minimal session data to the client
		session: session
			? { userId: session.userId, name: session.name, email: session.email, role: session.role }
			: null,
		// Pass tenant slug so the app layout can load the full tenant
		tenantSlug: tenant?.slug ?? null
	}
}

Passo 6: Server Load do Layout do Dashboard

No projeto de origem, o layout que fornece o contexto do tenant está em src/routes/(app)/dashboard/+layout.server.ts em vez de estar na raiz do grupo (app). Isso significa que os dados de tenant e de funcionalidades estão com escopo específico para a subárvore do dashboard — outras rotas futuras dentro de (app)/ podem optar por formatos de dados diferentes sem herdar esse load automaticamente.

// src/routes/(app)/dashboard/+layout.server.ts

import { redirect } from '@sveltejs/kit'
import type { LayoutServerLoad } from './$types'
import { db } from '$lib/server/db'

export const load: LayoutServerLoad = async ({ locals }) => {
	const { tenant, session } = locals

	if (!session || !tenant) {
		redirect(303, '/login')
	}

	// Load feature flags from DB — never compute entitlements client-side
	const features = db.features.forTenant(tenant.id)

	return {
		tenant, // Full Tenant object including branding
		features // Feature flags resolved for this tenant
	}
}

Passo 7: Server Load do Grupo de Rotas Admin

A função de load do layout admin é o único portão de autorização para todas as rotas dentro de (admin)/admin/. Ela distingue entre dois níveis de administrador: superadmin, que pertence ao tenant interno da plataforma e pode visualizar todos os tenants de clientes, e admin/owner, que pertencem a um tenant específico de cliente e visualizam apenas seus próprios dados.

// src/routes/(admin)/admin/+layout.server.ts

import { error, redirect } from '@sveltejs/kit'
import type { LayoutServerLoad } from './$types'
import { db } from '$lib/server/db'

export const load: LayoutServerLoad = async ({ locals }) => {
	const { session, tenant } = locals

	if (!session) {
		redirect(303, '/login')
	}

	// Hard gate — members get 403, not a redirect
	if (!['admin', 'owner', 'superadmin'].includes(session.role)) {
		error(403, 'You need admin or owner role to access this area.')
	}

	const isSuperAdmin = session.role === 'superadmin'

	if (isSuperAdmin) {
		// Platform-level view: counts across all customer tenants
		return {
			adminStats: {
				totalTenants: db.tenants.customer().length,
				totalUsers: db.users.allCustomer().length,
				activeSessions: 1,
				tenantName: 'Platform',
				isSuperAdmin: true
			}
		}
	}

	// Tenant-scoped view: counts for this tenant only
	const memberCount = db.users.forTenant(tenant!.id).length

	return {
		adminStats: {
			totalTenants: 1,
			totalUsers: memberCount,
			activeSessions: 1,
			tenantName: tenant?.name ?? 'Unknown',
			isSuperAdmin: false
		}
	}
}

O sinalizador isSuperAdmin flui para o componente de layout admin e, a partir daí, como uma prop para AdminNav, que o utiliza para mostrar condicionalmente a estatística de contagem de tenants e alternar entre o link "All Tenants" para superadmins e o link "Members" para admins em nível de tenant.

// src/routes/login/+page.server.ts

import { fail, redirect } from '@sveltejs/kit'
import type { Actions, PageServerLoad } from './$types'
import { db } from '$lib/server/db'

export const load: PageServerLoad = async ({ locals, url }) => {
	if (locals.session) {
		redirect(303, '/dashboard')
	}
	return {
		tenant: locals.tenant,
		returnUrl: url.searchParams.get('returnUrl')
	}
}

export const actions: Actions = {
	default: async ({ request, cookies, locals }) => {
		const form = await request.formData()
		const email = String(form.get('email') ?? '').trim()
		const password = String(form.get('password') ?? '')

		if (!email || !password) {
			return fail(400, { error: 'Email and password are required', email })
		}

		const dbUser = db.users.authenticate(email, password)

		if (!dbUser) {
			return fail(401, { error: 'Invalid email or password', email })
		}

		// Ensure user belongs to the current tenant
		if (locals.tenant && dbUser.tenantId !== locals.tenant.id) {
			return fail(401, { error: 'Invalid email or password', email })
		}

		const session = db.sessions.create(dbUser.id, 1)

		cookies.set('session', session.token, {
			path: '/',
			httpOnly: true,
			secure: process.env.NODE_ENV === 'production',
			sameSite: 'lax',
			maxAge: 60 * 60 * 24
		})

		const returnUrl = String(form.get('returnUrl') ?? '/dashboard')
		redirect(303, returnUrl.startsWith('/') ? returnUrl : '/dashboard')
	}
}

<!-- src/routes/login/+page.svelte -->
<script lang="ts">
	import { enhance } from '$app/forms'
	import TenantLogo from '$lib/components/TenantLogo.svelte'
	import { Building2, Rocket, Zap } from 'lucide-svelte'
	import type { Tenant } from '$lib/types/context'

	interface Props {
		data: { tenant: Tenant | null; returnUrl: string | null }
		form?: { error?: string; email?: string }
	}

	let { data, form }: Props = $props()
	let isSubmitting = $state(false)

	const primaryColor = $derived(data.tenant?.branding.primaryColor ?? '#6366f1')
</script>

<svelte:head>
	<title>Sign In — {data.tenant?.name ?? 'SaaS Demo'}</title>
</svelte:head>

<div class="login-page">
	<div class="login-card">
		<div class="card-header">
			<div class="brand">
				<span class="logo-icon">
					<TenantLogo icon={data.tenant?.branding.logoIcon ?? 'rocket'} size={24} />
				</span>
				<span class="brand-name">{data.tenant?.name ?? 'SaaS Demo'}</span>
			</div>
			<h1>Sign in to your account</h1>
			<p class="subtitle">Enter your email and password below</p>
		</div>

		{#if form?.error}
			<div class="error-alert" role="alert">
				<!-- inline error icon -->
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="16"
					height="16"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					stroke-width="2"
				>
					<circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" />
					<line x1="12" y1="16" x2="12.01" y2="16" />
				</svg>
				{form.error}
			</div>
		{/if}

		<form
			method="POST"
			use:enhance={() => {
				isSubmitting = true
				return async ({ update }) => {
					await update()
					isSubmitting = false
				}
			}}
		>
			<input type="hidden" name="returnUrl" value={data.returnUrl ?? ''} />

			<div class="field">
				<label for="email">Email</label>
				<input
					type="email"
					id="email"
					name="email"
					value={form?.email ?? ''}
					placeholder="you@company.com"
					autocomplete="email"
					required
					disabled={isSubmitting}
				/>
			</div>

			<div class="field">
				<label for="password">Password</label>
				<input
					type="password"
					id="password"
					name="password"
					placeholder="••••••••"
					autocomplete="current-password"
					required
					disabled={isSubmitting}
				/>
			</div>

			<button
				type="submit"
				class="submit-btn"
				style:background={primaryColor}
				disabled={isSubmitting}
			>
				{#if isSubmitting}
					<!-- Spinner -->
					<svg
						xmlns="http://www.w3.org/2000/svg"
						width="16"
						height="16"
						viewBox="0 0 24 24"
						fill="none"
						stroke="currentColor"
						stroke-width="2"
						class="spin"
					>
						<path d="M21 12a9 9 0 1 1-6.219-8.56" />
					</svg>
					Signing in…
				{:else}
					Sign in
				{/if}
			</button>
		</form>

		<!-- Demo hint with per-tenant icons -->
		<div class="demo-hint">
			<p class="hint-label">Demo accounts — password: <code>password123</code></p>
			<div class="hint-accounts">
				<div class="hint-row">
					<code>alice@acme.com</code>
					<span class="hint-badge admin">admin</span>
					<span class="hint-tenant"><Rocket size={11} /> acme.localhost</span>
				</div>
				<div class="hint-row">
					<code>bob@acme.com</code>
					<span class="hint-badge member">member</span>
					<span class="hint-tenant"><Rocket size={11} /> acme.localhost</span>
				</div>
				<div class="hint-row">
					<code>carol@globex.com</code>
					<span class="hint-badge owner">owner</span>
					<span class="hint-tenant"><Zap size={11} /> globex.localhost</span>
				</div>
				<div class="hint-row">
					<code>dave@initech.com</code>
					<span class="hint-badge member">member</span>
					<span class="hint-tenant"><Building2 size={11} /> initech.localhost</span>
				</div>
			</div>
		</div>
	</div>
</div>

<style>
	.login-page {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background: var(--muted);
		padding: 2rem;
	}

	.login-card {
		background: var(--card);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		padding: 2rem;
		width: 100%;
		max-width: 400px;
		box-shadow: var(--shadow-md);
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.card-header {
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
	}

	.brand {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin-bottom: 0.75rem;
	}

	.logo-icon {
		display: flex;
		align-items: center;
		color: var(--foreground);
	}

	.brand-name {
		font-size: 0.9375rem;
		font-weight: 700;
		color: var(--foreground);
		letter-spacing: -0.01em;
	}

	.card-header h1 {
		font-size: 1.375rem;
		font-weight: 700;
		color: var(--foreground);
		letter-spacing: -0.03em;
	}

	.subtitle {
		font-size: 0.875rem;
		color: var(--muted-foreground);
	}

	.error-alert {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		background: #fef2f2;
		border: 1px solid #fecaca;
		color: #dc2626;
		padding: 0.75rem 1rem;
		border-radius: var(--radius);
		font-size: 0.875rem;
	}

	form {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.field {
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
	}

	label {
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--foreground);
	}

	input[type='email'],
	input[type='password'] {
		padding: 0.5625rem 0.875rem;
		border: 1px solid var(--input);
		border-radius: var(--radius-sm);
		font-size: 0.9375rem;
		width: 100%;
		background: var(--background);
		color: var(--foreground);
		font-family: inherit;
		transition:
			border-color 0.15s,
			box-shadow 0.15s;
	}

	input:focus {
		outline: none;
		border-color: var(--foreground);
		box-shadow: 0 0 0 3px rgb(9 9 11 / 0.08);
	}

	input:disabled {
		opacity: 0.6;
		cursor: not-allowed;
		background: var(--muted);
	}

	.submit-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 0.625rem;
		color: white;
		border: none;
		border-radius: var(--radius-sm);
		font-size: 0.9375rem;
		font-weight: 600;
		cursor: pointer;
		width: 100%;
		margin-top: 0.25rem;
		font-family: inherit;
		transition: opacity 0.15s;
	}

	.submit-btn:hover:not(:disabled) {
		opacity: 0.9;
	}
	.submit-btn:disabled {
		opacity: 0.65;
		cursor: not-allowed;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}
	.spin {
		animation: spin 0.8s linear infinite;
	}

	/* Demo hint */
	.demo-hint {
		padding-top: 1.25rem;
		border-top: 1px solid var(--border);
	}

	.hint-label {
		font-size: 0.8125rem;
		color: var(--muted-foreground);
		margin-bottom: 0.625rem;
	}

	.hint-accounts {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	.hint-row {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.75rem;
		padding: 0.25rem 0;
	}

	.hint-badge {
		font-size: 0.625rem;
		font-weight: 600;
		padding: 0.125rem 0.4rem;
		border-radius: 999px;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: white;
	}

	.hint-badge.admin {
		background: #6366f1;
	}
	.hint-badge.owner {
		background: #0ea5e9;
	}
	.hint-badge.member {
		background: #71717a;
	}

	.hint-tenant {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		margin-left: auto;
		color: var(--muted-foreground);
		font-size: 0.6875rem;
	}
</style>

Passo 9: Layout Raiz - Contexto Base

<!-- src/routes/+layout.svelte -->
<script lang="ts">
	import { setContext } from 'svelte'
	import type { AppConfig, Theme } from '$lib/types/context'

	interface Props {
		data: {
			appConfig: AppConfig
			session: { userId: string; name: string; email: string; role: string } | null
		}
		children: import('svelte').Snippet
	}

	let { data, children }: Props = $props()

	// Getter wrappers for the same reason as tenant/features in (app)/+layout.svelte:
	// data is reactive ($props). Reading data.appConfig or data.session directly
	// at the top-level script body captures only the initial value. A getter
	// defers the read so consumers always get the live value via .current.
	setContext<{ readonly current: AppConfig }>('appConfig', {
		get current() {
			return data.appConfig
		}
	})
	setContext<{ readonly current: typeof data.session }>('session', {
		get current() {
			return data.session
		}
	})

	// Base theme - will be shadowed by tenant and admin layouts.
	// Colors match the CSS custom properties defined in :global(:root) below
	// so inline styles and CSS vars stay in sync.
	const defaultTheme: Theme = {
		mode: 'light',
		colors: {
			primary: '#ff6452', // matches --primary fallback
			accent: '#FF1C01',
			background: '#ffffff',
			surface: '#f4f4f5', // zinc-100
			border: '#e4e4e7', // zinc-200
			text: '#09090b', // zinc-950
			textMuted: '#71717a' // zinc-500
		}
	}

	setContext<Theme>('theme', defaultTheme)
</script>

{@render children()}

<style>
	:global(*, *::before, *::after) {
		box-sizing: border-box;
	}

	/* Design token layer - components use these vars for non-themed values.
     Tenant-specific colors go through context (theme.colors.*), not here. */
	:global(:root) {
		--background: #ffffff;
		--foreground: #09090b;
		--card: #ffffff;
		--muted: #f4f4f5;
		--muted-foreground: #71717a;
		--border: #e4e4e7;
		--input: #e4e4e7;
		--radius-sm: 0.375rem;
		--radius: 0.5rem;
		--radius-lg: 0.75rem;
		--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
		--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
		--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	}

	:global(body) {
		margin: 0;
		font-family:
			'Inter',
			-apple-system,
			BlinkMacSystemFont,
			'Segoe UI',
			sans-serif;
		font-size: 14px;
		line-height: 1.5;
		background: var(--background);
		color: var(--foreground);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	:global(a) {
		color: inherit;
		text-decoration: none;
	}

	:global(h1, h2, h3, h4, h5, h6) {
		margin: 0;
		line-height: 1.25;
		letter-spacing: -0.02em;
	}

	:global(p) {
		margin: 0;
	}

	:global(code) {
		font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
		font-size: 0.8125em;
		background: var(--muted);
		padding: 0.15em 0.4em;
		border-radius: 0.25rem;
	}
</style>

Passo 10: Landing Page Pública

A landing page é a primeira coisa que um visitante vê. Ela tem dois objetivos: demonstrar imediatamente o isolamento de tenant renderizando a identidade visual do tenant atual, e dar aos desenvolvedores que testam a demo um mapa claro de qual conta pertence a qual URL. Sem essa página, acessar / simplesmente redireciona direto para /login sem contexto algum, o que confunde qualquer pessoa que esteja seguindo o artigo.

Precisamos de um +page.server.ts para redirecionar usuários já autenticados e passar dados de tenant para baixo, e de um +page.svelte que use o contexto do layout raiz para refletir o tenant ativo.

// src/routes/+page.server.ts
import { redirect } from '@sveltejs/kit'
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async ({ locals, url }) => {
	// Authenticated users have nothing to do here - send them to the dashboard
	if (locals.session) {
		redirect(303, '/dashboard')
	}

	// locals.tenant is always set by the hook - the landing page is tenant-aware
	// even though it's public. Visiting acme.localhost shows Acme branding;
	// visiting globex.localhost shows Globex branding.
	//
	// IMPORTANT: we must read url.searchParams here so SvelteKit knows this
	// load function depends on the ?tenant= param. Without this, SvelteKit
	// skips re-running the function on same-route client-side navigation
	// (e.g. clicking a tenant card), and the hero stays stale.
	url.searchParams.get('tenant')

	return {
		tenant: locals.tenant
	}
}

<!-- src/routes/+page.svelte -->
<script lang="ts">
	import TenantLogo from '$lib/components/TenantLogo.svelte'
	import { ArrowRight, Building2, Rocket, Zap } from 'lucide-svelte'
	import type { Tenant, TenantIconName } from '$lib/types/context'

	interface Props {
		data: { tenant: Tenant | null }
	}

	let { data }: Props = $props()

	const demoAccounts: Array<{
		email: string
		role: string
		tenant: string
		iconName: TenantIconName
		color: string
		url: string
		subdomain: string
	}> = [
		{
			email: 'alice@acme.com',
			role: 'admin',
			tenant: 'Acme Corp',
			iconName: 'rocket',
			color: '#ff6452',
			url: 'http://localhost:5173?tenant=acme',
			subdomain: 'http://acme.localhost:5173'
		},
		{
			email: 'bob@acme.com',
			role: 'member',
			tenant: 'Acme Corp',
			iconName: 'rocket',
			color: '#ff6452',
			url: 'http://localhost:5173?tenant=acme',
			subdomain: 'http://acme.localhost:5173'
		},
		{
			email: 'carol@globex.com',
			role: 'owner',
			tenant: 'Globex Inc',
			iconName: 'zap',
			color: '#0ec5e9',
			url: 'http://localhost:5173?tenant=globex',
			subdomain: 'http://globex.localhost:5173'
		},
		{
			email: 'dave@initech.com',
			role: 'member',
			tenant: 'Initech LLC',
			iconName: 'building2',
			color: '#ff7ee1',
			url: 'http://localhost:5173?tenant=initech',
			subdomain: 'http://initech.localhost:5173'
		}
	]

	const primaryColor = $derived(data.tenant?.branding.primaryColor ?? '#ff6452')

	// When a tenant is active, send the user to their subdomain login page so
	// cross-tenant isolation works correctly from the very first click.
	const loginUrl = $derived(
		data.tenant ? `http://${data.tenant.slug}.localhost:5173/login` : '/login'
	)
</script>

<svelte:head>
	<title>{data.tenant?.name ?? 'SaaS Demo'} — Context API Demo</title>
</svelte:head>

<div class="page">
	<!-- Lead hero: large title, no branding yet -->
	<section class="lead-hero">
		<h1>Multi-tenant SaaS with Svelte 5 Context API</h1>
		<p>
			A fully working multi-tenant SaaS demo built with SvelteKit and the Context API. Tenant
			branding, feature flags, and role-based admin — all from context, no prop drilling.
		</p>
	</section>

	<!-- Branded hero: shows the active tenant immediately -->
	<section class="hero" style:background="color-mix(in srgb, {primaryColor} 15%, transparent)">
		<div class="hero-brand">
			<span class="hero-icon">
				<TenantLogo icon={data.tenant?.branding.logoIcon ?? 'rocket'} size={36} />
			</span>
			<h1 style:color={primaryColor}>{data.tenant?.name ?? 'SaaS Demo'}</h1>
		</div>
		{#if data.tenant}
			<div class="hero-chips">
				<span class="chip">plan: <strong>{data.tenant.plan}</strong></span>
				<span class="chip">primary: <code style:color={primaryColor}>{primaryColor}</code></span>
			</div>
		{/if}
		<p class="hero-desc">
			Each tenant has its own isolated data, branding, and feature flags determined by the URL. Sign
			in to see the magic!
		</p>
		<a href={loginUrl} class="btn-primary" style:background={primaryColor}>
			Sign in <ArrowRight size={14} />
		</a>
	</section>

	<!-- Tenant switcher -->
	<section class="card-section">
		<div class="section-header">
			<h2>Each tenant is a separate world</h2>
			<p>
				The URL determines which tenant you're on. The server hook reads the subdomain (or <code
					>?tenant=</code
				> param) and isolates all data, branding, and feature flags before any load function runs.
			</p>
		</div>
		<div class="tenants-grid">
			<a href="http://localhost:5173?tenant=acme" class="tenant-card" style:--color="#ff6452">
				<span class="t-icon"><Rocket size={20} /></span>
				<div class="t-info">
					<strong>Acme Corp</strong>
					<span>enterprise · orange</span>
					<code>?tenant=acme</code>
				</div>
			</a>
			<a href="http://localhost:5173?tenant=globex" class="tenant-card" style:--color="#0ec5e9">
				<span class="t-icon"><Zap size={20} /></span>
				<div class="t-info">
					<strong>Globex Inc</strong>
					<span>pro · sky blue</span>
					<code>?tenant=globex</code>
				</div>
			</a>
			<a href="http://localhost:5173?tenant=initech" class="tenant-card" style:--color="#ff7ee1">
				<span class="t-icon"><Building2 size={20} /></span>
				<div class="t-info">
					<strong>Initech LLC</strong>
					<span>free · pink</span>
					<code>?tenant=initech</code>
				</div>
			</a>
		</div>
	</section>

	<!-- Demo accounts table -->
	<section class="card-section">
		<div class="section-header">
			<h2>Demo accounts</h2>
			<p>
				All passwords are <code>password123</code>. Each account must be accessed from its tenant’s
				URL — cross-tenant credentials are silently rejected.
			</p>
		</div>
		<div class="accounts-table">
			<div class="table-head">
				<span>Email</span><span>Role</span><span>Tenant</span><span>URL to use</span>
			</div>
			{#each demoAccounts as account}
				<div class="table-row">
					<code class="email-cell">{account.email}</code>
					<span class="role-badge" style:background={account.color}>{account.role}</span>
					<span class="tenant-cell">
						<TenantLogo icon={account.iconName} size={14} />
						<span>{account.tenant}</span>
					</span>
					<div class="url-cell">
						<a href={account.url} class="url-link" style:color={account.color}>{account.url}</a>
						<span class="url-sep">or</span>
						<a href={account.subdomain} class="url-link url-alt" style:color={account.color}>
							{account.subdomain}
						</a>
					</div>
				</div>
			{/each}
		</div>
	</section>

	<!-- Subdomain tip -->
	<section class="hint-section">
		<div class="hint-header">
			<svg
				xmlns="http://www.w3.org/2000/svg"
				width="16"
				height="16"
				viewBox="0 0 24 24"
				fill="none"
				stroke="currentColor"
				stroke-width="2"
			>
				<circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line
					x1="12"
					y1="16"
					x2="12.01"
					y2="16"
				/>
			</svg>
			<h2>Two ways to switch tenants</h2>
		</div>
		<p class="hint-desc">
			Use the <code>?tenant=</code> query param, or go straight to the subdomain — modern browsers
			resolve <code>*.localhost</code> automatically, no <code>/etc/hosts</code> setup needed.
		</p>
		<pre class="code-block"># Query param
http://localhost:5173?tenant=acme

# Subdomain (works out of the box)
http://acme.localhost:5173</pre>
	</section>
</div>

<style>
	.page {
		max-width: 880px;
		margin: 0 auto;
		padding: 3rem 1.5rem 5rem;
		display: flex;
		flex-direction: column;
		gap: 2rem;
		/* color: #ff6452; */
	}

	/* Lead hero */
	.lead-hero {
		padding: 1rem 0 0.5rem;
	}

	.lead-hero h1 {
		font-size: clamp(2.5rem, 5vw + 1rem, 5.5rem);
		font-weight: 900;
		letter-spacing: -0.05em;
		line-height: 0.95;
		color: var(--foreground);
		margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
	}

	.lead-hero p {
		font-size: clamp(1rem, 1.25vw + 0.5rem, 1.25rem);
		color: var(--muted-foreground);
		line-height: 1.7;
		letter-spacing: -0.01em;
		max-width: 52ch;
	}

	/* Branded hero */
	.hero {
		background: var(--card);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		padding: 2rem 2.5rem;
		box-shadow: var(--shadow);
	}

	.hero-brand {
		display: flex;
		align-items: center;
		gap: 0.875rem;
		margin-bottom: 0.75rem;
	}

	.hero-icon {
		display: flex;
		align-items: center;
		color: var(--foreground);
	}

	.hero-brand h1 {
		font-size: clamp(2.25rem, 4vw + 1rem, 4.5rem);
		font-weight: 900;
		letter-spacing: -0.05em;
		line-height: 1;
	}

	.hero-chips {
		display: flex;
		gap: 0.5rem;
		margin-bottom: 1rem;
	}

	.chip {
		font-size: clamp(0.75rem, 0.4vw + 0.5rem, 0.875rem);
		color: var(--muted-foreground);
		background: var(--background);
		padding: 0.2rem 0.625rem;
		border-radius: var(--radius-sm);
	}

	.hero-desc {
		font-size: clamp(1rem, 1.25vw + 0.5rem, 1.1875rem);
		color: var(--muted-foreground);
		margin-bottom: 1.5rem;
		max-width: 560px;
		line-height: 1.7;
		letter-spacing: -0.005em;
	}

	.btn-primary {
		display: inline-flex;
		align-items: center;
		padding: 0.5625rem 1.25rem;
		color: white;
		border-radius: var(--radius-sm);
		font-weight: 600;
		font-size: clamp(0.9rem, 0.75vw + 0.5rem, 1.0625rem);
		transition:
			opacity 0.15s,
			box-shadow 0.15s;
		box-shadow: var(--shadow-sm);
	}

	.btn-primary:hover {
		opacity: 0.9;
		box-shadow: var(--shadow);
	}

	/* Card sections */
	.card-section {
		background: var(--card);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		padding: 1.5rem;
		box-shadow: var(--shadow-sm);
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}

	.section-header h2 {
		font-size: clamp(0.9375rem, 0.75vw + 0.5rem, 1.125rem);
		font-weight: 600;
		margin-bottom: 0.375rem;
		color: var(--foreground);
	}
	.section-header p {
		font-size: clamp(0.875rem, 0.5vw + 0.5rem, 1rem);
		color: var(--muted-foreground);
		line-height: 1.6;
	}

	/* Tenant cards */
	.tenants-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
		gap: 0.75rem;
	}

	.tenant-card {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		background: var(--background);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		padding: 0.875rem 1rem;
		transition:
			box-shadow 0.15s,
			transform 0.15s;
	}

	.tenant-card:hover {
		background: color-mix(in srgb, var(--color) 8%, transparent);
	}

	.t-icon {
		display: flex;
		align-items: center;
		color: var(--foreground);
		flex-shrink: 0;
	}

	.t-info {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
	}
	.t-info strong {
		font-size: clamp(0.875rem, 0.5vw + 0.5rem, 1rem);
		font-weight: 600;
		color: var(--foreground);
	}
	.t-info span {
		font-size: clamp(0.6875rem, 0.3vw + 0.5rem, 0.8125rem);
		color: var(--muted-foreground);
	}
	.t-info code {
		font-size: clamp(0.625rem, 0.3vw + 0.4rem, 0.75rem);
		color: var(--color);
		background: color-mix(in srgb, var(--color) 8%, transparent);
		padding: 0.125rem 0.375rem;
		border-radius: 0.25rem;
	}

	/* Accounts table */
	.accounts-table {
		border: 1px solid var(--border);
		border-radius: var(--radius);
		overflow: hidden;
	}

	.table-head {
		display: grid;
		grid-template-columns: 2fr 0.75fr 1.25fr 2.5fr;
		gap: 0.5rem;
		padding: 0.625rem 1rem;
		background: var(--muted);
		color: var(--muted-foreground);
		font-size: 0.6875rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	.table-row {
		display: grid;
		grid-template-columns: 2fr 0.75fr 1.25fr 2.5fr;
		gap: 0.5rem;
		align-items: center;
		padding: 0.625rem 1rem;
		border-top: 1px solid var(--border);
		font-size: clamp(0.8125rem, 0.5vw + 0.5rem, 0.9375rem);
	}

	.table-row:hover {
		background: var(--muted);
	}

	.email-cell {
		color: var(--foreground);
		font-size: clamp(0.75rem, 0.4vw + 0.45rem, 0.875rem);
	}

	.role-badge {
		display: inline-flex;
		justify-content: center;
		font-size: 0.625rem;
		font-weight: 700;
		color: white;
		padding: 0.2rem 0.5rem;
		border-radius: 999px;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		white-space: nowrap;
	}

	.tenant-cell {
		display: flex;
		align-items: center;
		gap: 0.375rem;
		font-size: clamp(0.75rem, 0.4vw + 0.45rem, 0.875rem);
		color: var(--foreground);
	}

	.url-cell {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
	}

	.url-link {
		font-size: clamp(0.6875rem, 0.3vw + 0.45rem, 0.8125rem);
		font-family: ui-monospace, monospace;
		transition: opacity 0.15s;
	}
	.url-link:hover {
		text-decoration: underline;
	}

	.url-sep {
		font-size: 0.625rem;
		color: var(--muted-foreground);
	}
	.url-alt {
		opacity: 0.65;
	}

	/* Hint section */
	.hint-section {
		background: var(--muted);
		border: 1px solid #b6b6b6;
		border-radius: var(--radius-lg);
		padding: 1.25rem 1.5rem;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.hint-header {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		color: #fa1b53;
	}

	.hint-header h2 {
		font-size: clamp(0.875rem, 0.75vw + 0.5rem, 1.0625rem);
		font-weight: 600;
	}

	.hint-desc {
		font-size: clamp(0.875rem, 0.5vw + 0.5rem, 1rem);
		color: #2e2e37;
		line-height: 1.6;
	}

	.code-block {
		background: #09090b;
		color: #e4e4e7;
		padding: 0.875rem 1.125rem;
		border-radius: var(--radius);
		font-size: clamp(0.75rem, 0.4vw + 0.5rem, 0.875rem);
		font-family: ui-monospace, monospace;
		line-height: 1.75;
		margin: 0;
		overflow-x: auto;
	}
</style>

O que essa página demonstra imediatamente. Antes de o leitor fazer login, o hero principal fornece uma descrição clara do que é a demo, e a seção hero com identidade visual já mostra a Context API funcionando: acesse ?tenant=acme e ela renderiza com a identidade visual laranja-avermelhada da Acme e um ícone de Foguete. Mude para ?tenant=globex, mesma página, mesmos arquivos de componente, ciano e um ícone de Raio. A identidade visual do tenant está ativa na barra de URL antes de qualquer tentativa de login.

A leitura de url.searchParams.get('tenant') na função de load é crucial: sem ela, o SvelteKit não rastreará o parâmetro ?tenant= como uma dependência, e clicar nos cards de tenant na landing page não acionará uma nova execução no servidor — o hero ficará desatualizado com o tenant antigo.

Passo 11: Layout do Dashboard - Contexto de Tenant

É aqui que acontece o shadowing de chave. O layout raiz definiu theme com um valor padrão. Este layout faz o shadowing com a identidade visual do tenant. Observe que o arquivo está em src/routes/(app)/dashboard/+layout.svelte — ele se aplica apenas à subárvore do dashboard, não a todas as rotas dentro do grupo (app).

<!-- src/routes/(app)/dashboard/+layout.svelte -->
<script lang="ts">
	import { getContext, setContext } from 'svelte'
	import AppHeader from '$lib/components/AppHeader.svelte'
	import AppSidebar from '$lib/components/AppSidebar.svelte'
	import type { Features, Tenant, Theme } from '$lib/types/context'

	interface Props {
		data: { tenant: Tenant; features: Features }
		children: import('svelte').Snippet
	}

	let { data, children }: Props = $props()

	// Set tenant and features using getter objects so context always reflects
	// the *current* value of data - not only the initial snapshot.
	//
	// Why getters? data comes from $props(), which is reactive. Reading
	// data.tenant directly at the top-level script body - outside any reactive
	// context - means Svelte can only capture the value once at initialization.
	// If SvelteKit re-runs the load function (e.g. after invalidateAll() or a
	// form action), data updates but the context value would silently stay stale.
	//
	// Wrapping each read in a getter closure defers the access to call time.
	// Svelte tracks the dependency correctly, and consumers always get the
	// live value via .current.
	setContext<{ readonly current: Tenant }>('tenant', {
		get current() {
			return data.tenant
		}
	})
	setContext<{ readonly current: Features }>('features', {
		get current() {
			return data.features
		}
	})

	// Get the default theme from the root layout
	const defaultTheme = getContext<Theme>('theme')

	// Build a tenant-branded theme - same 'theme' key, shadowed value.
	// Any component in (app)/dashboard/* that calls getContext('theme') gets this,
	// NOT the root default.
	//
	// Spread defaultTheme.colors first so any future color properties added to
	// the Theme interface are automatically inherited here without a manual update.
	// Then override only the brand-specific properties with getters so the theme
	// stays in sync if data updates after SvelteKit invalidation.
	const tenantTheme: Theme = {
		...defaultTheme,
		colors: {
			...defaultTheme.colors,
			// Updated zinc-based neutral palette
			background: '#ffffff',
			surface: '#f4f4f5', // zinc-100
			border: '#e4e4e7', // zinc-200
			text: '#09090b', // zinc-950
			textMuted: '#71717a', // zinc-500
			get primary() {
				return data.tenant.branding.primaryColor
			},
			get accent() {
				return data.tenant.branding.accentColor
			}
		}
	}

	setContext<Theme>('theme', tenantTheme)
</script>

<div class="app-shell">
	<AppHeader />

	<div class="app-body">
		<AppSidebar />
		<main class="app-content">
			{@render children()}
		</main>
	</div>
</div>

<style>
	.app-shell {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background: var(--muted);
	}

	.app-body {
		display: flex;
		flex: 1;
	}

	.app-content {
		flex: 1;
		padding: 2rem 2.5rem;
		overflow-y: auto;
		min-width: 0;
	}
</style>

O que acabou de acontecer com setContext('theme', tenantTheme)?

O layout raiz já chamou setContext('theme', defaultTheme). Quando este layout chama setContext('theme', tenantTheme), ele não substitui o contexto da raiz. Ele cria uma nova entrada no mapa de contexto para esta subárvore. Componentes dentro de (app)/dashboard/* recebem tenantTheme; componentes fora desse caminho (login, landing page) ainda recebem defaultTheme. Isso é context shadowing — o mesmo mecanismo que permite aninhar providers sem poluir o estado global.

O spread ...defaultTheme.colors na linha 3 de tenantTheme.colors é um detalhe sutil, mas importante. Sem ele, se uma nova propriedade for adicionada à interface Theme.colors, esse objeto literal não a teria, e o TypeScript só detectaria a omissão na atribuição de tipo — não aqui. O spread garante que o tema do tenant sempre herde todas as cores neutras do padrão, substituindo apenas as específicas da marca.

Passo 12: Componentes do App

TenantLogo

Em vez de armazenar strings de emoji no banco de dados, o projeto usa ícones do lucide-svelte mapeados por uma chave de string. Isso mantém o schema do banco serializável (sem estranhezas com Unicode) e fornece ícones SVG nítidos em qualquer tamanho.

Adicione a dependência primeiro:

npm install lucide-svelte

lucide-svelte distribui imports ESM sem extensão (ex.: './icons/index' em vez de './icons/index.js'), o que quebra o resolver ESM estrito do Node durante o SSR. Você deve instruir o Vite a empacotá-lo em vez de externalizá-lo.

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'

export default defineConfig({
	plugins: [sveltekit()],
	ssr: {
		// lucide-svelte ships extensionless ESM imports that break Node's strict
		// ESM resolver. Bundling via Vite works around this.
		noExternal: ['lucide-svelte']
	}
})

Sem isso, o servidor de desenvolvimento lançará ERR_MODULE_NOT_FOUND no momento em que qualquer rota importar um ícone do lucide no lado do servidor.

<!-- src/lib/components/TenantLogo.svelte -->
<script lang="ts">
	import { Building2, Hexagon, Rocket, Shield, Zap } from 'lucide-svelte'
	import type { TenantIconName } from '$lib/types/context'

	interface Props {
		icon: TenantIconName | string
		size?: number
	}

	let { icon, size = 24 }: Props = $props()
</script>

{#if icon === 'rocket'}
	<Rocket {size} />
{:else if icon === 'zap'}
	<Zap {size} />
{:else if icon === 'building2'}
	<Building2 {size} />
{:else if icon === 'shield'}
	<Shield {size} />
{:else}
	<Hexagon {size} />
{/if}

O ícone shield é usado pelo tenant interno tenant_platform para que o login do superadmin e a navegação admin exibam uma marca distinta. O | string no tipo da prop é uma válvula de segurança: se um novo nome de ícone for adicionado ao banco antes de o componente ser atualizado, o Hexagon de fallback é renderizado em vez de um erro em tempo de execução.

AppHeader

<!-- src/lib/components/AppHeader.svelte -->
<script lang="ts">
	import { getContext } from 'svelte'
	import TenantLogo from '$lib/components/TenantLogo.svelte'
	import type { Tenant, Theme, UserSession } from '$lib/types/context'

	const theme = getContext<Theme>('theme')
	const tenantCtx = getContext<{ readonly current: Tenant }>('tenant')
	const sessionCtx = getContext<{ readonly current: UserSession | null }>('session')

	const tenant = $derived(tenantCtx.current)
	const session = $derived(sessionCtx.current)
</script>

<header class="app-header">
	<div class="brand">
		<span class="logo-icon"><TenantLogo icon={tenant.branding.logoIcon} size={20} /></span>
		<span class="tenant-name">{tenant.name}</span>
		<span class="plan-badge" style:background={theme.colors.primary}>{tenant.plan}</span>
	</div>

	<nav class="nav-links">
		<a href="/dashboard" class="nav-link">Dashboard</a>
		{#if session?.role === 'admin' || session?.role === 'owner' || session?.role === 'superadmin'}
			<a href="/admin/panel" class="nav-link nav-link-admin" style:color={theme.colors.accent}>
				Admin Panel
			</a>
		{/if}
	</nav>

	<div class="user-area">
		{#if session}
			<div class="user-pill">
				<span class="avatar" style:background={theme.colors.primary}>
					{session.name.charAt(0).toUpperCase()}
				</span>
				<div class="user-meta">
					<span class="user-name">{session.name}</span>
					<span class="user-role">{session.role}</span>
				</div>
			</div>
			<form method="POST" action="/logout">
				<button type="submit" class="btn-ghost">Sign out</button>
			</form>
		{/if}
	</div>
</header>

<style>
	.app-header {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		padding: 0 1.5rem;
		height: 3.5rem;
		background: var(--card);
		border-bottom: 1px solid var(--border);
		position: sticky;
		top: 0;
		z-index: 10;
		box-shadow: var(--shadow-sm);
	}

	.brand {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		flex-shrink: 0;
	}

	.logo-icon {
		display: flex;
		align-items: center;
		color: var(--foreground);
	}

	.tenant-name {
		font-size: 0.9375rem;
		font-weight: 700;
		color: var(--foreground);
		letter-spacing: -0.01em;
	}

	.plan-badge {
		font-size: 0.625rem;
		font-weight: 600;
		color: white;
		padding: 0.2rem 0.5rem;
		border-radius: 999px;
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	.nav-links {
		display: flex;
		gap: 0.25rem;
		flex: 1;
	}

	.nav-link {
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--muted-foreground);
		padding: 0.375rem 0.625rem;
		border-radius: var(--radius-sm);
		transition:
			background 0.15s,
			color 0.15s;
	}

	.nav-link:hover {
		background: var(--muted);
		color: var(--foreground);
	}

	.nav-link-admin {
		font-weight: 600;
	}

	.user-area {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		margin-left: auto;
	}

	.user-pill {
		display: flex;
		align-items: center;
		gap: 0.625rem;
	}

	.avatar {
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		font-size: 0.8125rem;
		flex-shrink: 0;
	}

	.user-meta {
		display: flex;
		flex-direction: column;
		line-height: 1.2;
	}

	.user-name {
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--foreground);
	}

	.user-role {
		font-size: 0.6875rem;
		color: var(--muted-foreground);
		text-transform: capitalize;
	}

	.btn-ghost {
		background: transparent;
		border: 1px solid var(--border);
		border-radius: var(--radius-sm);
		padding: 0.3125rem 0.75rem;
		font-size: 0.8125rem;
		font-weight: 500;
		cursor: pointer;
		color: var(--muted-foreground);
		transition:
			background 0.15s,
			color 0.15s;
		font-family: inherit;
	}

	.btn-ghost:hover {
		background: var(--muted);
		color: var(--foreground);
	}
</style>

AppSidebar

<!-- src/lib/components/AppSidebar.svelte -->
<script lang="ts">
	import { Activity, ArrowRight, Code, Globe, LayoutDashboard, Settings } from 'lucide-svelte'
	import { getContext } from 'svelte'
	import type { Features, Theme } from '$lib/types/context'

	const theme = getContext<Theme>('theme')
	const featuresCtx = getContext<{ readonly current: Features }>('features')
	const features = $derived(featuresCtx.current)
</script>

<aside class="sidebar">
	<nav class="sidebar-nav">
		<div class="section-label">Main</div>
		<a href="/dashboard" class="nav-item" style:--primary={theme.colors.primary}>
			<LayoutDashboard size={16} />
			Dashboard
		</a>

		{#if features.advancedReporting}
			<a href="/dashboard" class="nav-item" style:--primary={theme.colors.primary}>
				<Activity size={16} />
				Reports
			</a>
		{/if}

		{#if features.apiAccess}
			<a href="/dashboard" class="nav-item" style:--primary={theme.colors.primary}>
				<Code size={16} />
				API
			</a>
		{/if}

		<div class="section-label">Account</div>

		{#if features.customDomains}
			<a href="/dashboard" class="nav-item" style:--primary={theme.colors.primary}>
				<Globe size={16} />
				Domains
			</a>
		{/if}

		<a href="/dashboard" class="nav-item" style:--primary={theme.colors.primary}>
			<Settings size={16} />
			Settings
		</a>
	</nav>

	{#if !features.prioritySupport}
		<div class="upgrade-nudge" style:--primary={theme.colors.primary}>
			<p class="nudge-title">Upgrade your plan</p>
			<p class="nudge-desc">Get priority support and more features.</p>
			<a href="/dashboard" class="nudge-link">Learn more <ArrowRight size={11} /></a>
		</div>
	{/if}
</aside>

<style>
	.sidebar {
		width: 240px;
		flex-shrink: 0;
		background: var(--card);
		border-right: 1px solid var(--border);
		padding: 1rem 0;
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.sidebar-nav {
		flex: 1;
		padding: 0 0.75rem;
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
	}

	.section-label {
		font-size: 0.6875rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--muted-foreground);
		padding: 0.5rem 0.625rem 0.25rem;
		margin-top: 0.5rem;
	}

	.section-label:first-child {
		margin-top: 0;
	}

	.nav-item {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		padding: 0.4375rem 0.625rem;
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--muted-foreground);
		border-radius: var(--radius-sm);
		transition:
			background 0.15s,
			color 0.15s;
	}

	.nav-item :global(svg) {
		flex-shrink: 0;
		opacity: 0.7;
	}

	.nav-item:hover {
		background: color-mix(in srgb, var(--primary) 8%, transparent);
		color: var(--primary);
	}

	.nav-item:hover :global(svg) {
		opacity: 1;
	}

	.upgrade-nudge {
		margin: 0.75rem 0.75rem 0.25rem;
		padding: 0.875rem 1rem;
		background: color-mix(in srgb, var(--primary) 6%, transparent);
		border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
		border-radius: var(--radius);
	}

	.nudge-title {
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--foreground);
		margin-bottom: 0.25rem;
	}

	.nudge-desc {
		font-size: 0.75rem;
		color: var(--muted-foreground);
		margin-bottom: 0.5rem;
	}

	.nudge-link {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
		font-size: 0.75rem;
		font-weight: 600;
		color: var(--primary);
	}
</style>

StatsCard

<!-- src/lib/components/StatsCard.svelte -->
<script lang="ts">
	import { getContext } from 'svelte'
	import type { ComponentType, SvelteComponent } from 'svelte'
	import type { Theme } from '$lib/types/context'

	interface Props {
		title: string
		value: string | number
		icon?: ComponentType<SvelteComponent> // lucide-svelte icon component
		note?: string
	}

	let { title, value, icon: IconComponent, note }: Props = $props()
	const theme = getContext<Theme>('theme')
</script>

<div class="stat-card">
	<div class="stat-header">
		<span class="stat-title">{title}</span>
		{#if IconComponent}
			<span class="stat-icon"><IconComponent size={16} /></span>
		{/if}
	</div>
	<div class="stat-value" style:color={theme.colors.primary}>{value}</div>
	{#if note}<p class="stat-note">{note}</p>{/if}
</div>

<style>
	.stat-card {
		background: var(--card);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		padding: 1.25rem 1.5rem;
		box-shadow: var(--shadow-sm);
	}

	.stat-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0.875rem;
	}

	.stat-title {
		font-size: 0.8125rem;
		font-weight: 500;
		color: var(--muted-foreground);
		letter-spacing: 0.01em;
	}

	.stat-icon {
		display: flex;
		align-items: center;
		color: var(--muted-foreground);
		opacity: 0.6;
	}

	.stat-value {
		font-size: 2rem;
		font-weight: 700;
		line-height: 1;
		letter-spacing: -0.03em;
	}

	.stat-note {
		font-size: 0.75rem;
		color: var(--muted-foreground);
		margin-top: 0.375rem;
	}
</style>

O ícone agora é uma referência de componente, não uma string. Passe-o assim:

<script lang="ts">
	import { Users, Activity } from 'lucide-svelte'
</script>

<StatsCard title="Active Users" value={12} icon={Users} />
<StatsCard title="Live Sessions" value={3} icon={Activity} />

RequireFeature

<!-- src/lib/components/RequireFeature.svelte -->
<script lang="ts">
	import { getContext } from 'svelte'
	import type { Features } from '$lib/types/context'

	interface Props {
		feature: keyof Features
		fallback?: import('svelte').Snippet
		children: import('svelte').Snippet
	}

	let { feature, fallback, children }: Props = $props()

	const featuresCtx = getContext<{ readonly current: Features }>('features')
	const hasFeature = $derived(featuresCtx.current[feature])
</script>

{#if hasFeature}
	{@render children()}
{:else if fallback}
	{@render fallback()}
{/if}

Uso:

<!-- Single feature gate -->
<RequireFeature feature="advancedReporting">
	<ReportBuilder />
</RequireFeature>

<!-- With upgrade nudge fallback -->
{#snippet upgradePrompt()}
	<p>Upgrade your plan to access Advanced Reports.</p>
{/snippet}

<RequireFeature feature="advancedReporting" fallback={upgradePrompt}>
	<ReportBuilder />
</RequireFeature>

Isso oculta elementos. Não protege endpoints de API. Um usuário poderia remover o elemento do DOM e ainda acessar /api/reports — seus endpoints de servidor devem verificar locals.features de forma independente (ou derivá-los novamente) para qualquer operação sensível.

Passo 13: Página do Dashboard

// src/routes/(app)/dashboard/+page.server.ts

import { redirect } from '@sveltejs/kit'
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async ({ locals }) => {
	if (!locals.session) redirect(303, '/login')

	// In a real app: query DB for this tenant's stats
	// We return plausible mock numbers here
	return {
		stats: {
			users: 12,
			sessions: 3,
			apiCalls: 14_823,
			documents: 47
		}
	}
}

<!-- src/routes/(app)/dashboard/+page.svelte -->
<script lang="ts">
	import { getContext } from 'svelte'
	import RequireFeature from '$lib/components/RequireFeature.svelte'
	import StatsCard from '$lib/components/StatsCard.svelte'
	import { Activity, FileText, Plug, Users } from 'lucide-svelte'
	import type { Features, Tenant, Theme } from '$lib/types/context'

	interface Props {
		data: {
			stats: { users: number; sessions: number; apiCalls: number; documents: number }
		}
	}

	let { data }: Props = $props()

	const theme = getContext<Theme>('theme')
	const tenantCtx = getContext<{ readonly current: Tenant }>('tenant')
	const featuresCtx = getContext<{ readonly current: Features }>('features')

	const tenant = $derived(tenantCtx.current)
	const features = $derived(featuresCtx.current)
</script>

<svelte:head>
	<title>Dashboard — {tenant.name}</title>
</svelte:head>

<div class="dashboard">
	<header class="page-header">
		<h1 style:color={theme.colors.primary}>{tenant.name}</h1>
		<div class="header-chips">
			<span class="chip">plan: <strong>{tenant.plan}</strong></span>
			<span class="chip"
				>primary: <code style:color={theme.colors.primary}>{theme.colors.primary}</code></span
			>
		</div>
	</header>

	<!-- Stats grid - some cards only appear with the right features -->
	<div class="stats-grid">
		<StatsCard title="Active Users" value={data.stats.users} icon={Users} />
		<StatsCard title="Live Sessions" value={data.stats.sessions} icon={Activity} />

		<RequireFeature feature="apiAccess">
			<StatsCard
				title="API Calls"
				value={data.stats.apiCalls.toLocaleString()}
				icon={Plug}
				note="last 30 days"
			/>
		</RequireFeature>

		<RequireFeature feature="advancedReporting">
			<StatsCard title="Documents" value={data.stats.documents} icon={FileText} />
		</RequireFeature>
	</div>

	<!-- Feature flags -->
	<section class="card">
		<div class="card-header">
			<div>
				<h2>Available Features</h2>
				<p class="card-desc">
					Resolved from the in-memory DB for tenant <code>{tenant.id}</code> (plan: {tenant.plan}).
					Context distributes them - no prop drilling.
				</p>
			</div>
		</div>
		<div class="feature-list">
			{#each Object.entries(features) as [key, enabled]}
				<div class="feature-row" class:enabled>
					<span
						class="feature-dot"
						style:background={enabled ? theme.colors.primary : 'var(--border)'}
					></span>
					<code class="feature-key">{key}</code>
					<span
						class="feature-badge"
						class:badge-enabled={enabled}
						style:background={enabled
							? `color-mix(in srgb, ${theme.colors.primary} 12%, transparent)`
							: ''}
						style:color={enabled ? theme.colors.primary : ''}
					>
						{enabled ? 'Enabled' : 'Disabled'}
					</span>
				</div>
			{/each}
		</div>
	</section>

	<!-- Context layer explainer -->
	<section class="card">
		<h2>Context layers active on this page</h2>
		<p class="card-desc">How the theme is resolved through nested context providers.</p>
		<ol class="explainer-list">
			<li>
				<strong>Root +layout.svelte</strong> set <code>theme</code> to the default orange-red
				palette,
				<code>appConfig</code>, and <code>session</code>.
			</li>
			<li>
				<strong>(app)/+layout.svelte</strong> shadowed <code>theme</code> with tenant branding
				(primary: <code style:color={theme.colors.primary}>{theme.colors.primary}</code>), and set
				<code>tenant</code> and <code>features</code>.
			</li>
			<li>
				<strong>This page</strong> called <code>getContext('theme')</code> and got the tenant branding
				— not the default - because context shadowing resolves to the nearest ancestor.
			</li>
		</ol>
		<p class="explainer-note">
			Switch to <code>globex.localhost</code> for sky-blue or <code>initech.localhost</code> for pink.
			Same components, different context values.
		</p>
	</section>
</div>

<style>
	.dashboard {
		max-width: 880px;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.page-header {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.page-header h1 {
		font-size: 1.75rem;
		font-weight: 800;
		letter-spacing: -0.04em;
	}

	.header-chips {
		display: flex;
		gap: 0.5rem;
	}

	.chip {
		font-size: 0.8125rem;
		color: var(--muted-foreground);
		background: var(--card);
		border: 1px solid var(--border);
		padding: 0.2rem 0.625rem;
		border-radius: var(--radius-sm);
	}

	.stats-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 1rem;
	}

	/* Cards */
	.card {
		background: var(--card);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		padding: 1.5rem;
		box-shadow: var(--shadow-sm);
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.card-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.card h2 {
		font-size: 0.9375rem;
		font-weight: 600;
		color: var(--foreground);
		margin-bottom: 0.25rem;
	}

	.card-desc {
		font-size: 0.875rem;
		color: var(--muted-foreground);
		line-height: 1.5;
	}

	/* Feature flags */
	.feature-list {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
	}

	.feature-row {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		padding: 0.5rem 0.75rem;
		border-radius: var(--radius-sm);
		font-size: 0.875rem;
		color: var(--muted-foreground);
		transition: background 0.15s;
	}

	.feature-row:hover {
		background: var(--muted);
	}
	.feature-row.enabled {
		color: var(--foreground);
	}

	.feature-dot {
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		flex-shrink: 0;
		transition: background 0.2s;
	}

	.feature-key {
		flex: 1;
		font-size: 0.8125rem;
	}

	.feature-badge {
		font-size: 0.6875rem;
		font-weight: 600;
		padding: 0.2rem 0.5rem;
		border-radius: 999px;
		background: var(--muted);
		color: var(--muted-foreground);
	}

	/* Explainer */
	.explainer-list {
		padding-left: 1.25rem;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		margin: 0;
	}

	.explainer-list li {
		font-size: 0.875rem;
		color: var(--muted-foreground);
		line-height: 1.6;
	}

	.explainer-note {
		font-size: 0.875rem;
		color: var(--muted-foreground);
		padding-top: 0.5rem;
		border-top: 1px solid var(--border);
		line-height: 1.6;
	}
</style>

Passo 14: Layout do Grupo de Rotas Admin - Sombra com Tema Escuro

<!-- src/routes/(admin)/admin/+layout.svelte -->
<script lang="ts">
	import { getContext, setContext } from 'svelte'
	import AdminNav from '$lib/components/AdminNav.svelte'
	import type { Theme } from '$lib/types/context'

	interface Props {
		data: {
			adminStats: {
				totalTenants: number
				totalUsers: number
				activeSessions: number
				tenantName: string
				isSuperAdmin: boolean
			}
		}
		children: import('svelte').Snippet
	}

	let { data, children }: Props = $props()

	// Get the tenant-branded theme from (app)/dashboard/+layout.svelte
	const tenantTheme = getContext<Theme>('theme')

	// Derive adminStats so the prop reference stays reactive.
	// AdminNav receives this as a prop - if data re-runs after an admin
	// action, the prop passed to AdminNav will reflect the fresh value.
	const adminStats = $derived(data.adminStats)

	// Shadow it with dark mode - preserving tenant brand colors.
	// Uses zinc rather than slate for a more neutral, less blue-tinted dark palette.
	// Any component inside (admin)/* gets this theme, not the tenant one.
	const adminTheme: Theme = {
		mode: 'dark',
		colors: {
			primary: tenantTheme.colors.primary, // Keep tenant brand
			accent: tenantTheme.colors.accent, // Keep tenant brand
			background: '#09090b', // zinc-950
			surface: '#18181b', // zinc-900
			border: '#27272a', // zinc-800
			text: '#fafafa', // zinc-50
			textMuted: '#a1a1aa' // zinc-400
		}
	}

	setContext<Theme>('theme', adminTheme)

	// Getter wrapper for the same reason as tenant and features in (app)/dashboard/+layout.svelte:
	// data is reactive ($props), reading data.adminStats directly at init captures
	// only the initial snapshot. The getter defers the read so any re-run of the
	// admin load function (e.g. after an admin action invalidates the route) is
	// automatically reflected in every consumer via .current.
	setContext<{ readonly current: typeof data.adminStats }>('adminStats', {
		get current() {
			return data.adminStats
		}
	})
</script>

<div
	class="admin-shell"
	style:background={adminTheme.colors.background}
	style:color={adminTheme.colors.text}
>
	<AdminNav stats={data.adminStats} />
	<main class="admin-content">
		{@render children()}
	</main>
</div>

<style>
	.admin-shell {
		display: flex;
		min-height: 100vh;
	}

	.admin-content {
		flex: 1;
		padding: 2rem 2.5rem;
		overflow-y: auto;
		min-width: 0;
	}
</style>

AdminNav

AdminNav recebe isSuperAdmin do layout e o utiliza em três lugares: a contagem de colunas do grid de estatísticas (superadmins exibem um contador de Tenants que admins de tenant não possuem), os links de navegação (superadmins vão para /admin/panel, admins de tenant vão para /admin/members), e o badge do rodapé (superadmins veem "Platform Admin", admins de tenant veem o nome do seu tenant).

<!-- src/lib/components/AdminNav.svelte -->
<script lang="ts">
	import { ArrowLeft, LayoutDashboard, Shield, Users, User } from 'lucide-svelte'
	import { getContext } from 'svelte'
	import type { Theme } from '$lib/types/context'

	interface Props {
		stats: {
			totalTenants: number
			totalUsers: number
			activeSessions: number
			tenantName: string
			isSuperAdmin: boolean
		}
	}

	let { stats }: Props = $props()
	const theme = getContext<Theme>('theme')

	// Alternatively, AdminNav could read adminStats directly from context
	// via getContext<{ readonly current: ... }>('adminStats').current
	// but receiving it as a prop from the layout keeps the component
	// decoupled from the context key name — easier to test in isolation.
</script>

<aside
	class="admin-nav"
	style:background={theme.colors.surface}
	style:border-right-color={theme.colors.border}
>
	<div class="admin-brand">
		<Shield size={16} color={theme.colors.primary} />
		<span style:color={theme.colors.text}>Admin Panel</span>
	</div>

	<div
		class="stats-grid"
		class:two-col={!stats.isSuperAdmin}
		style:border-color={theme.colors.border}
	>
		{#if stats.isSuperAdmin}
			<div class="mini-stat">
				<span class="mini-value" style:color={theme.colors.primary}>{stats.totalTenants}</span>
				<span class="mini-label" style:color={theme.colors.textMuted}>Tenants</span>
			</div>
		{/if}
		<div class="mini-stat">
			<span class="mini-value" style:color={theme.colors.primary}>{stats.totalUsers}</span>
			<span class="mini-label" style:color={theme.colors.textMuted}>
				{stats.isSuperAdmin ? 'Users' : 'Members'}
			</span>
		</div>
		<div class="mini-stat">
			<span class="mini-value" style:color={theme.colors.primary}>{stats.activeSessions}</span>
			<span class="mini-label" style:color={theme.colors.textMuted}>Sessions</span>
		</div>
	</div>

	<nav class="admin-nav-links">
		{#if !stats.isSuperAdmin}
			<a
				href="/dashboard"
				class="nav-link"
				style:color={theme.colors.textMuted}
				style:--hover-bg={theme.colors.border}
			>
				<ArrowLeft size={14} />
				Dashboard
			</a>
		{/if}

		<div class="nav-divider" style:background={theme.colors.border}></div>

		{#if stats.isSuperAdmin}
			<a
				href="/admin/panel"
				class="nav-link"
				style:color={theme.colors.textMuted}
				style:--hover-bg={theme.colors.border}
			>
				<LayoutDashboard size={14} />
				All Tenants
			</a>
		{:else}
			<a
				href="/admin/members"
				class="nav-link"
				style:color={theme.colors.textMuted}
				style:--hover-bg={theme.colors.border}
			>
				<Users size={14} />
				Members
			</a>
		{/if}
	</nav>

	<div
		class="tenant-badge"
		style:border-color={theme.colors.border}
		style:color={theme.colors.textMuted}
	>
		<User size={12} />
		{#if stats.isSuperAdmin}
			<strong style:color={theme.colors.text}>Platform Admin</strong>
		{:else}
			Viewing: <strong style:color={theme.colors.text}>{stats.tenantName}</strong>
		{/if}
	</div>
</aside>

<style>
	.admin-nav {
		width: 240px;
		flex-shrink: 0;
		border-right: 1px solid;
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 1.5rem 0;
	}

	.admin-brand {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-weight: 700;
		font-size: 0.875rem;
		padding: 0 1.25rem 1.25rem;
		letter-spacing: -0.01em;
	}

	.stats-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
		padding: 1rem 1rem 1.25rem;
		border-top: 1px solid;
		border-bottom: 1px solid;
		margin-bottom: 0.75rem;
	}

	/* Tenant admins don’t have a Tenants stat — two columns fit better */
	.stats-grid.two-col {
		grid-template-columns: repeat(2, 1fr);
	}

	.mini-stat {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.125rem;
	}

	.mini-value {
		font-size: 1.375rem;
		font-weight: 700;
		letter-spacing: -0.04em;
	}

	.mini-label {
		font-size: 0.625rem;
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	.admin-nav-links {
		flex: 1;
		padding: 0 0.75rem;
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
	}

	.nav-link {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		padding: 0.4375rem 0.625rem;
		font-size: 0.875rem;
		font-weight: 500;
		border-radius: var(--radius-sm);
		transition:
			background 0.15s,
			color 0.15s;
	}

	.nav-link:hover {
		background: var(--hover-bg);
	}

	.nav-divider {
		height: 1px;
		margin: 0.375rem 0.625rem;
	}

	.tenant-badge {
		margin-top: auto;
		padding: 0.75rem 1.25rem;
		border-top: 1px solid;
		font-size: 0.75rem;
		display: flex;
		align-items: center;
		gap: 0.375rem;
	}
</style>

Passo 15: Página do Painel Admin

/admin/panel é a visão geral de toda a plataforma — ela mostra cada tenant cliente e sua matriz de feature flags. Apenas a conta superadmin deve acessar esta página. Admins de nível tenant (owner, admin) são redirecionados para /admin/members, que exibe apenas a associação do próprio tenant.

// src/routes/(admin)/admin/panel/+page.server.ts

import { redirect } from '@sveltejs/kit'
import type { PageServerLoad } from './$types'
import { db } from '$lib/server/db'

export const load: PageServerLoad = async ({ locals }) => {
	const { session } = locals

	// Only the platform superadmin sees all tenants — tenant admins go to /admin/members
	if (session?.role !== 'superadmin') {
		redirect(303, '/admin/members')
	}

	// customer() excludes the internal platform tenant so it doesn’t appear in its own table
	const customerTenants = db.tenants.customer()

	return {
		tenants: customerTenants.map((t) => ({
			id: t.id,
			name: t.name,
			slug: t.slug,
			plan: t.plan,
			features: db.features.forTenant(t.id)
		}))
	}
}

<!-- src/routes/(admin)/admin/panel/+page.svelte -->
<script lang="ts">
	import { getContext } from 'svelte'
	import type { Theme } from '$lib/types/context'
	import type { Features } from '$lib/types/context'

	interface TenantRow {
		id: string
		name: string
		slug: string
		plan: string
		features: Features
	}

	interface Props {
		data: { tenants: TenantRow[] }
	}

	let { data }: Props = $props()

	// Gets the DARK admin theme because (admin)/admin/+layout.svelte shadowed 'theme'
	// with adminTheme. Same getContext call, nearest ancestor wins.
	const theme = getContext<Theme>('theme')

	const featureKeys: (keyof Features)[] = [
		'advancedReporting',
		'apiAccess',
		'customDomains',
		'prioritySupport',
		'whiteLabeling'
	]

	// Short labels for the feature columns - full key names are too wide for the table
	const featureLabels: Record<keyof Features, string> = {
		advancedReporting: 'Reports',
		apiAccess: 'API',
		customDomains: 'Domains',
		prioritySupport: 'Support',
		whiteLabeling: 'White-label'
	}
</script>

<svelte:head>
	<title>Admin Panel</title>
</svelte:head>

<div class="panel">
	<div class="page-header">
		<h1 style:color={theme.colors.text}>All Tenants</h1>
		<p style:color={theme.colors.textMuted}>All customer tenants on the platform.</p>
	</div>

	<div class="tenant-table" style:border-color={theme.colors.border}>
		<div
			class="table-head"
			style:background={theme.colors.surface}
			style:color={theme.colors.textMuted}
		>
			<span>Tenant</span>
			<span>Plan</span>
			{#each featureKeys as key}
				<span class="feat-col">{featureLabels[key]}</span>
			{/each}
		</div>

		{#each data.tenants as tenant}
			<div
				class="table-row"
				style:border-top-color={theme.colors.border}
				style:--hover-bg={theme.colors.surface}
			>
				<div class="tenant-info">
					<div class="tenant-name" style:color={theme.colors.text}>{tenant.name}</div>
					<div class="tenant-slug" style:color={theme.colors.textMuted}>
						<code>{tenant.slug}.localhost</code>
					</div>
				</div>
				<div>
					<span
						class="plan-chip"
						class:enterprise={tenant.plan === 'enterprise'}
						class:pro={tenant.plan === 'pro'}
						class:free={tenant.plan === 'free'}
						style:background={tenant.plan === 'enterprise'
							? theme.colors.primary
							: tenant.plan === 'pro'
								? theme.colors.accent
								: theme.colors.border}
					>
						{tenant.plan}
					</span>
				</div>
				{#each featureKeys as key}
					<div class="feat-cell" style:color={theme.colors.textMuted}>
						{#if tenant.features[key]}
							<!-- Inline SVG checkmark avoids an extra import -->
							<svg
								xmlns="http://www.w3.org/2000/svg"
								width="14"
								height="14"
								viewBox="0 0 24 24"
								fill="none"
								stroke="currentColor"
								stroke-width="2.5"
								style:color={theme.colors.primary}><polyline points="20 6 9 17 4 12" /></svg
							>
						{:else}
							<span class="feat-dash">—</span>
						{/if}
					</div>
				{/each}
			</div>
		{/each}
	</div>
</div>

<style>
	.panel {
		max-width: 960px;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.page-header h1 {
		font-size: 1.75rem;
		font-weight: 800;
		letter-spacing: -0.04em;
		margin-bottom: 0.375rem;
	}

	.page-header p {
		font-size: 0.875rem;
		line-height: 1.5;
	}

	.tenant-table {
		border: 1px solid;
		border-radius: var(--radius-lg);
		overflow: hidden;
		font-size: 0.875rem;
	}

	.table-head,
	.table-row {
		display: grid;
		grid-template-columns: 2fr 1fr repeat(5, 1fr);
		align-items: center;
		padding: 0.625rem 1rem;
		gap: 0.5rem;
	}

	.table-head {
		font-size: 0.6875rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	.table-row {
		border-top: 1px solid;
		transition: background 0.15s;
	}

	.table-row:hover {
		background: var(--hover-bg);
	}

	.tenant-info {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
	}
	.tenant-name {
		font-weight: 600;
		font-size: 0.875rem;
	}
	.tenant-slug {
		font-size: 0.75rem;
	}

	.plan-chip {
		display: inline-flex;
		align-items: center;
		font-size: 0.625rem;
		font-weight: 700;
		color: white;
		padding: 0.2rem 0.5rem;
		border-radius: 999px;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.feat-col {
		font-size: 0.6875rem;
		text-align: center;
	}

	.feat-cell {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.feat-dash {
		font-size: 0.75rem;
		opacity: 0.4;
	}
</style>

Passo 16: Página de Membros

Enquanto o superadmin vê /admin/panel com todos os tenants clientes, um owner ou admin de tenant acessa /admin/members — a lista de membros do próprio tenant, além de um resumo dos recursos que o plano inclui. A função de carregamento do servidor redireciona superadmins para garantir que a página sempre reflita um único tenant.

// src/routes/(admin)/admin/members/+page.server.ts

import { redirect } from '@sveltejs/kit'
import type { PageServerLoad } from './$types'
import { db } from '$lib/server/db'

export const load: PageServerLoad = async ({ locals }) => {
	const { session, tenant } = locals

	// Superadmins see all tenants at /admin/panel, not a single tenant’s members
	if (session?.role === 'superadmin') {
		redirect(303, '/admin/panel')
	}

	const members = db.users.forTenant(tenant!.id)
	const features = db.features.forTenant(tenant!.id)

	return {
		tenant: {
			name: tenant!.name,
			slug: tenant!.slug,
			plan: tenant!.plan,
			features
		},
		members: members.map((u) => ({
			id: u.id,
			name: u.name,
			email: u.email,
			role: u.role
		}))
	}
}

As feature flags também são carregadas aqui para que a página possa renderizar um card de resumo do plano — dando aos admins uma visão clara do que seu tenant tem acesso, na mesma UI admin onde gerenciam sua equipe.

<!-- src/routes/(admin)/admin/members/+page.svelte -->
<script lang="ts">
	import { getContext } from 'svelte'
	import type { Theme } from '$lib/types/context'
	import type { Features } from '$lib/types/context'

	interface Member {
		id: string
		name: string
		email: string
		role: 'member' | 'admin' | 'owner'
	}

	interface Props {
		data: {
			tenant: {
				name: string
				slug: string
				plan: 'free' | 'pro' | 'enterprise'
				features: Features
			}
			members: Member[]
		}
	}

	let { data }: Props = $props()

	// Gets the DARK admin theme because (admin)/admin/+layout.svelte shadowed
	// 'theme' with adminTheme. The brand colors (primary, accent) are preserved
	// from the tenant theme even in dark mode — see the admin layout section.
	const theme = getContext<Theme>('theme')

	const featureKeys: (keyof Features)[] = [
		'advancedReporting',
		'apiAccess',
		'customDomains',
		'prioritySupport',
		'whiteLabeling'
	]

	const featureLabels: Record<keyof Features, string> = {
		advancedReporting: 'Reports',
		apiAccess: 'API',
		customDomains: 'Domains',
		prioritySupport: 'Support',
		whiteLabeling: 'White-label'
	}
</script>

<svelte:head>
	<title>Members — {data.tenant.name}</title>
</svelte:head>

<div class="panel">
	<div class="page-header">
		<h1 style:color={theme.colors.text}>{data.tenant.name}</h1>
		<p style:color={theme.colors.textMuted}>Members and plan details for your tenant.</p>
	</div>

	<!-- Plan + features card -->
	<div
		class="plan-card"
		style:background={theme.colors.surface}
		style:border-color={theme.colors.border}
	>
		<div class="plan-row">
			<span style:color={theme.colors.textMuted}>Plan</span>
			<span
				class="plan-chip"
				class:enterprise={data.tenant.plan === 'enterprise'}
				class:pro={data.tenant.plan === 'pro'}
				class:free={data.tenant.plan === 'free'}
				style:background={data.tenant.plan === 'enterprise'
					? theme.colors.primary
					: data.tenant.plan === 'pro'
						? theme.colors.accent
						: theme.colors.border}
			>
				{data.tenant.plan}
			</span>
		</div>
		<div class="features-row" style:border-top-color={theme.colors.primary}>
			{#each featureKeys as key}
				<div class="feature-pill" style:color={theme.colors.textMuted}>
					{#if data.tenant.features[key]}
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="12"
							height="12"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2.5"
							style:color={theme.colors.primary}><polyline points="20 6 9 17 4 12" /></svg
						>
					{:else}
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="12"
							height="12"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2.5"
							style:color={theme.colors.border}
							><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg
						>
					{/if}
					<span
						style:color={data.tenant.features[key] ? theme.colors.text : theme.colors.textMuted}
					>
						{featureLabels[key]}
					</span>
				</div>
			{/each}
		</div>
	</div>

	<!-- Members table -->
	<div class="members-table" style:border-color={theme.colors.border}>
		<div
			class="table-head"
			style:background={theme.colors.surface}
			style:color={theme.colors.textMuted}
		>
			<span>Name</span>
			<span>Email</span>
			<span>Role</span>
		</div>

		{#each data.members as member}
			<div
				class="table-row"
				style:border-top-color={theme.colors.border}
				style:--hover-bg={theme.colors.surface}
			>
				<div class="member-name" style:color={theme.colors.text}>{member.name}</div>
				<div class="member-email" style:color={theme.colors.textMuted}>{member.email}</div>
				<span
					class="role-chip"
					class:role-owner={member.role === 'owner'}
					class:role-admin={member.role === 'admin'}
					class:role-member={member.role === 'member'}
					style:background={member.role === 'owner'
						? theme.colors.primary
						: member.role === 'admin'
							? theme.colors.accent
							: theme.colors.border}
				>
					{member.role}
				</span>
			</div>
		{/each}
	</div>
</div>

<style>
	.panel {
		max-width: 720px;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.page-header h1 {
		font-size: 1.75rem;
		font-weight: 800;
		letter-spacing: -0.04em;
		margin-bottom: 0.375rem;
	}

	.page-header p {
		font-size: 0.875rem;
		line-height: 1.5;
	}

	/* Plan card */
	.plan-card {
		border: 1px solid;
		border-radius: var(--radius-lg);
		overflow: hidden;
	}

	.plan-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.875rem 1rem;
		font-size: 0.875rem;
	}

	.plan-chip,
	.role-chip {
		display: inline-flex;
		align-items: center;
		font-size: 0.625rem;
		font-weight: 700;
		color: white;
		padding: 0.2rem 0.5rem;
		border-radius: 999px;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.features-row {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		padding: 0.75rem 1rem;
		border-top: 1px solid;
	}

	.feature-pill {
		display: flex;
		align-items: center;
		gap: 0.3rem;
		font-size: 0.75rem;
	}

	/* Members table */
	.members-table {
		border: 1px solid;
		border-radius: var(--radius-lg);
		overflow: hidden;
		font-size: 0.875rem;
	}

	.table-head,
	.table-row {
		display: grid;
		grid-template-columns: 1.5fr 2fr 0.75fr;
		align-items: center;
		padding: 0.625rem 1rem;
		gap: 0.5rem;
	}

	.table-head {
		font-size: 0.6875rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}

	.table-row {
		border-top: 1px solid;
		transition: background 0.15s;
	}

	.table-row:hover {
		background: var(--hover-bg);
	}

	.member-name {
		font-weight: 600;
		font-size: 0.875rem;
	}

	.member-email {
		font-size: 0.8125rem;
	}
</style>

O card do plano torna os direitos de recursos do admin de tenant visíveis de relance, coloridos com a mesma cor primária da marca do tenant que flui pelo tema escuro admin. A linha de recursos de um tenant gratuito será majoritariamente cruzes sem destaque; um tenant enterprise como a Acme recebe checkmarks em cor primária sólida em toda a linha.

// src/routes/logout/+page.server.ts
import { redirect } from '@sveltejs/kit'
import type { Actions } from './$types'
import { db } from '$lib/server/db'

export const actions: Actions = {
	default: async ({ cookies }) => {
		const token = cookies.get('session')
		if (token) {
			db.sessions.deleteByToken(token)
			cookies.delete('session', { path: '/' })
		}
		redirect(303, '/login')
	}
}

O AppHeader já possui um botão <form method="POST" action="/logout">, nenhum componente de página adicional é necessário.

O Fluxo de Contexto Completo

Veja o que acontece da URL ao componente, de forma concreta:

Browser: GET acme.localhost/dashboard
                │
        hooks.server.ts
          ├── hostname = 'acme.localhost' → slug = 'acme'
          ├── db.tenants.findBySlug('acme') → Acme Corp (enterprise)
          ├── event.locals.tenant = { id: 'tenant_acme', name: 'Acme Corp', … }
          ├── cookies.get('session') → validate → db.users.findById(userId)
          └── event.locals.session = { name: 'Alice Admin', role: 'admin', … }
                │
        +layout.server.ts (root)
          └── returns { appConfig, session: { name, role, … }, tenantSlug: 'acme' }
                │
        (app)/+layout.server.ts
          ├── locals.tenant already set by hook
          ├── db.features.forTenant('tenant_acme')
          └── returns { tenant: { branding: { primaryColor: '#ff6452', … } }, features: { all true } }
                │
        Component tree rendering:
          +layout.svelte (root)
            setContext('theme', { colors: { primary: '#ff6452', … } })  ← default
            setContext('session', { name: 'Alice', role: 'admin' })
                │
          (app)/+layout.svelte
            getContext('theme')  → gets the root default theme
            tenantTheme = { colors: { primary: '#ff6452', accent: '#ff7961', … } }
            setContext('theme', tenantTheme)   ← SHADOWS root theme
            setContext('tenant', { name: 'Acme Corp', … })
            setContext('features', { advancedReporting: true, … })
                │
          dashboard/+page.svelte
            getContext('theme')    → gets tenantTheme (orange-red, enterprise)
            getContext('tenant')   → gets Acme Corp
            getContext('features') → all enabled (enterprise)
            AppHeader, AppSidebar, StatsCard all call getContext('theme')
            → all get tenantTheme automatically, zero prop passing

Switch to globex.localhost/dashboard:
  hook → slug = 'globex' → Globex Inc (sky blue, pro plan)
  (app)/layout sets tenant theme with primary: '#0ea5e9'
  Every component gets sky blue, same component files, different context values.

Navigate to acme.localhost/admin/panel (alice, role=admin):
  (admin)/+layout.server.ts → role check passes
  (admin)/+layout.svelte
    getContext('theme')  → gets current tenant theme (indigo)
    adminTheme = { mode: 'dark', colors: { background: '#09090b', primary: '#ff6452' } }
    setContext('theme', adminTheme)  ← SHADOWS tenant theme
  AdminNav + panel page
    getContext('theme') → dark admin theme with tenant brand colors preserved

Sombreamento de Contexto: O Conceito Central Ilustrado

A chave do tema é definida três vezes ao longo da hierarquia de layouts:

Root layout       setContext('theme', defaultTheme)      ← orange-red, light
  (app) layout    setContext('theme', tenantTheme)        ← tenant brand, light  [shadows root]
    (admin) layout  setContext('theme', adminTheme)       ← tenant brand, dark   [shadows app]

Cada chamada setContext cria um novo binding no escopo de contexto daquele componente. Componentes descendentes que chamam getContext('theme') sempre recebem o valor do ancestral mais próximo que chamou setContext com aquela chave. O valor raiz nunca é destruído, ele simplesmente se torna inacessível de dentro da subárvore de sombreamento.

É por isso que o sombreamento de contexto é poderoso para temas SaaS:

Component in (app)/dashboard   → tenantTheme  (light, brand colors)
Component in (admin)/panel     → adminTheme   (dark, same brand colors)
Hypothetical component at /    → defaultTheme (light, generic)

Zero prop drilling. Zero estado global. Cada camada independentemente composável.

Acesso a Contexto com Tipagem Segura

O parâmetro genérico getContext<T>() é verificado em tempo de compilação:

// ✅ TypeScript knows what you get
const theme = getContext<Theme>('theme')
const tenantCtx = getContext<{ readonly current: Tenant }>('tenant')
const featuresCtx = getContext<{ readonly current: Features }>('features')

// Unwrap with $derived so Svelte tracks the dependency
const tenant = $derived(tenantCtx.current)
const features = $derived(featuresCtx.current)

theme.colors.primary // ✅ string - TypeScript knows
tenant.branding.logoIcon // ✅ TenantIconName - from Tenant type
features.apiAccess // ✅ boolean - from Features type
features.nonExistent // ❌ TypeScript error - 'nonExistent' doesn't exist on Features

Para uma segurança ainda maior, utilize as funções auxiliares de $lib/context-helpers (criadas no Passo 1b), que centralizam as anotações de tipo e o padrão de objeto getter em um único lugar. Qualquer renomeação ou alteração de tipo aparece como um erro TypeScript em todos os consumidores imediatamente.

Erros Comuns

Erro 1: Computar feature flags no lado do cliente

// ❌ WRONG - client can modify plan, bypass gates
const features = {
	advancedReporting: tenant.plan === 'enterprise'
}
setContext('features', features)

Os recursos devem vir da função de carregamento do servidor, que lê do banco de dados. O cliente recebe o booleano resolvido, ele nunca vê a lógica que o produziu.

// ✅ CORRECT - resolved server-side, forwarded to context
// (app)/+layout.server.ts
const features = db.features.forTenant(tenant.id)
return { features }

// (app)/+layout.svelte
setContext<{ readonly current: Features }>('features', {
	get current() {
		return data.features
	}
})

Erro 2: Vazamento de sessão entre tenants

// ❌ WRONG - only checks session exists, not which tenant it belongs to
if (sessionToken) {
	const session = db.sessions.findByToken(sessionToken)
	event.locals.session = session ? toSession(db.users.findById(session.userId)) : null
}

Se Alice da Acme visitar globex.localhost, ela estaria autenticada como Alice nos dados da Globex. Sempre verifique a associação ao tenant na validação da sessão:

// ✅ CORRECT - cross-tenant check in the hook
if (rawUser && rawUser.tenantId === rawTenant.id) {
	event.locals.session = toSession(rawUser)
} else {
	// Cross-tenant - destroy the session
	db.sessions.deleteByToken(sessionToken)
	event.locals.session = null
}

Erro 3: Chamar setContext após a inicialização do componente

<!-- ❌ WRONG - setContext must be called during component init, not in effects -->
<script>
	$effect(() => {
		setContext('theme', newTheme) // Too late - context is frozen after init
	})
</script>

<!-- ✅ CORRECT - call at top level of script -->
<script>
	setContext('theme', tenantTheme)
</script>

Erro 4: Usar contexto entre subárvores não relacionadas

<!-- ❌ WRONG - context only flows down, not sideways -->
<!-- ComponentA sets context -->
<!-- ComponentB (sibling) tries to read it - gets undefined -->

O contexto flui estritamente do pai para os filhos. Se dois componentes irmãos precisam de estado compartilhado, eleve o contexto para o layout ancestral comum.

Erro 5: Mutar o objeto de contexto diretamente

<!-- ❌ WRONG - mutating bypasses reactivity -->
<script>
	const features = getContext('features')
	features.apiAccess = true // Silent mutation - other components won't re-render
</script>

Se as feature flags precisarem ser alteradas (por exemplo, após uma atualização), chame invalidateAll() para re-executar as funções de load do servidor e reconstruir o contexto com dados frescos do banco de dados.

Notas de Performance

A consulta de feature flags é O(n × m) na implementação atual (n flags × m tenants). Para produção com centenas de tenants e dezenas de flags, indexe a tabela de flags por (tenantId, key) e armazene em cache as flags resolvidas em memória com um TTL curto:

// Production pattern - simple in-process cache
const flagCache = new Map<string, { flags: Features; expiresAt: number }>()

function cachedFlagsForTenant(tenantId: string): Features {
	const cached = flagCache.get(tenantId)
	if (cached && cached.expiresAt > Date.now()) return cached.flags

	const flags = db.features.forTenant(tenantId)
	flagCache.set(tenantId, { flags, expiresAt: Date.now() + 60_000 }) // 1 min TTL
	return flags
}

Os objetos de contexto não precisam ser reativos em si mesmos. Os valores dentro do contexto (theme, features) são passados por referência. Se você precisar que eles sejam atualizados após mudanças nos dados do SvelteKit, deixe o layout re-executar via invalidateAll(), o layout irá reconstruir o contexto a partir das props data atualizadas.

setContext / getContext são síncronos e sem alocação no momento da leitura. A consulta é um simples acesso por chave em um Map, sem proxying, sem assinaturas. Não hesite em chamar getContext dentro de componentes; não é caro.

Próximos Passos

Esta demonstração cobre os padrões essenciais de multi-tenant. Em produção você estenderia com:

Roteamento wildcard por subdomínio no seu provedor de hospedagem (Vercel/Fly.io) para que *.yourapp.com alcance a mesma instância do SvelteKit
Serviço de feature flags real como Unleash ou LaunchDarkly, o (app)/+layout.server.ts é o ponto de integração; substitua db.features.forTenant() pela chamada ao serviço
Schemas de banco de dados por tenant ou segurança em nível de linha (RLS) no Postgres, o locals.tenant.id é a chave de isolamento para cada query
SSO por tenant - locals.tenant.id determina qual configuração SAML/OIDC usar no seu hook de autenticação

A arquitetura de contexto apresentada aqui escala diretamente. As camadas (root → app → admin) e o padrão de shadowing (setContext / getContext) não mudam, apenas as fontes de dados por trás deles.

Principais Conclusões

O servidor determina o tenant, o contexto o distribui. O hook resolve o tenant a partir do subdomínio antes de qualquer função de load ser executada. O contexto apenas disponibiliza esses dados nas camadas mais profundas da árvore sem prop drilling.

As feature flags pertencem ao servidor. Nunca compute plan === 'enterprise' em layouts. Resolva as flags a partir de um banco de dados ou serviço na função de load e passe os booleanos resolvidos para o contexto. O cliente nunca vê a lógica de entitlement.

O shadowing de contexto é o primitivo de tematização multi-tenant. A mesma chave 'theme' é definida três vezes — padrão, com a marca do tenant, admin escuro — e cada subárvore lê automaticamente o valor do ancestral mais próximo. Sem lógica condicional nos componentes, sem store de tema global.

Rotas de admin precisam de separação adequada. Um grupo de rotas (admin)/* com seu próprio +layout.server.ts que chama error(403, …) é o padrão correto. Esconder botões de admin no dashboard regular não é controle de acesso.

O isolamento de tenant requer verificação cruzada na camada de sessão. Uma sessão válida do Tenant A deve ser rejeitada no subdomínio do Tenant B. Essa verificação acontece no hook, antes de qualquer carregamento de dados.