Qué Vamos a Construir

Este artículo construye un dashboard SaaS completamente funcional multi-tenant desde un proyecto SvelteKit en blanco. Cada archivo se muestra completo. Cada fragmento se ejecuta sin modificaciones. No se requiere ningún servicio de base de datos, servicio de feature flags ni dependencias externas; usamos una BD falsa en memoria para que puedas ejecutarlo de inmediato.

Al final tendrás:

Aislamiento de tenant basado en subdominio (acme.localhost → Acme Corp, globex.localhost → Globex Inc)
Arquitectura de contexto en capas - tema predeterminado → branding del tenant → modo oscuro para admin, todo usando la misma clave de contexto theme con shadowing
Feature flags por tenant cargados del lado del servidor desde una BD falsa (nunca calculados en el cliente)
Un grupo de rutas admin protegido con verificaciones de rol que producen un 403 real, no un botón oculto
Un componente RequireFeature para UI con feature gates declarativas
Todos los componentes implementados - AppHeader, AppSidebar, StatsCard, AdminNav - no solo referenciados

El stack: SvelteKit 2 + Svelte 5 Runes + TypeScript. Sin Prisma, sin Lucia, sin 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 del Proyecto

Comienza desde cero:

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

Favicon y App Shell

<!-- 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>

Coloca cualquier PNG de 32×32 en static/favicon.png, o crea un static/favicon.svg y cambia el href en consecuencia. Inter se carga desde Google Fonts, le da a la app un aspecto pulido sin necesidad de configurar fuentes locales.

Soporte de Subdominio en Desarrollo

El servidor de desarrollo de SvelteKit escucha en localhost. Hay dos formas de cambiar de tenant localmente, ninguna requiere editar /etc/hosts:

Opción 1 - Query param (funciona en todos lados, sin configuración)

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

Opción 2 - Subdominio (funciona de inmediato en navegadores modernos)

Los navegadores modernos resuelven *.localhost automáticamente. Sin configuración DNS, sin cambios en /etc/hosts:

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

No se necesitan cambios en vite.config.ts, el hook maneja ambos enfoques.

Estructura Final del Proyecto

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

Paso 1: Tipos Compartidos

// 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
}

Paso 1b: Funciones Helper de Contexto

A medida que crece el número de claves de contexto, repetir getContext<{ readonly current: Tenant }>('tenant') en cada componente se vuelve ruidoso. Extrae las llamadas en un pequeño archivo de helpers:

// 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')

Los componentes luego importan los helpers y los desenvuelven con $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>

Si renombras una clave de contexto o cambias un tipo, el error de TypeScript aparece de inmediato en todos los consumidores, no como un undefined en tiempo de ejecución difícil de rastrear. Los componentes de este artículo llaman a getContext directamente por claridad, pero en un proyecto real usarías estos helpers en todas partes.

Paso 2: La Base de Datos Falsa en Memoria

Esto se reinicia en cada reinicio del servidor y no tiene hashing real de contraseñas. Úsalo para entender los patrones, luego reemplázalo con Drizzle + better-auth para producción.

// 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
	}
}

Cuentas de Demo

Email	Contraseña	Tenant	Rol	Plan	Acceso admin
`admin@platform.com`	`password123`	Platform	superadmin	—	`/admin/panel` (todos los tenants)
`alice@acme.com`	`password123`	Acme Corp	owner	enterprise	`/admin/members`
`bob@acme.com`	`password123`	Acme Corp	member	enterprise	ninguno
`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`

La cuenta de superadmin pertenece al tenant interno tenant_platform y debe accederse a través de platform.localhost:5173. Es el único rol que ve /admin/panel (la vista completa entre tenants) — todos los demás roles con capacidad admin llegan a /admin/members donde solo ven los datos de su propio tenant.

Paso 3: Extender los Locals de SvelteKit

event.locals es el bloc de notas por solicitud del lado del servidor de SvelteKit. Cada hook, función de carga y ruta de API en la misma solicitud lo comparte. Antes de poder escribir event.locals.tenant, TypeScript necesita conocer su forma.

// 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 {}

Cómo fluye locals a través de una solicitud

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 paso está tipado. Si cambias Locals en app.d.ts, TypeScript expone cada referencia rota.

Paso 4: Hook del Servidor - Resolución de Tenant

El hook se ejecuta antes de cada función de carga. Es el único lugar donde ocurren la resolución de tenant y la validación de sesión.

// 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
}

Nota la verificación rawUser.tenantId === rawTenant.id. Si Alice de Acme de alguna manera tiene una cookie de sesión válida pero llega a globex.localhost, se le cierra la sesión en lugar de acceder a los datos de Globex. El aislamiento de tenant ocurre en la capa de validación de sesión, no solo en la UI.

Paso 5: Carga del Servidor en el Layout Raíz

// 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
	}
}

Paso 6: Carga del Servidor del Layout del Dashboard

En el proyecto fuente, el layout que proporciona el contexto del tenant vive en src/routes/(app)/dashboard/+layout.server.ts en lugar de estar en la raíz del grupo (app). Esto significa que los datos del tenant y de funcionalidades están limitados específicamente al subárbol del dashboard — otras rutas futuras dentro de (app)/ pueden optar por formas de datos diferentes sin heredar esta carga automáticamente.

// 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
	}
}

Paso 7: Carga del Servidor del Grupo de Rutas de Administración

La función de carga del layout de administración es la única puerta de autorización para todas las rutas dentro de (admin)/admin/. Distingue entre dos niveles de administración: superadmin, que pertenece al tenant interno de la plataforma y puede ver todos los tenants de clientes, y admin/owner, que pertenece a un tenant de cliente específico y solo ve sus propios datos.

// 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
		}
	}
}

El flag isSuperAdmin fluye hacia el componente del layout de administración y desde allí como prop hacia AdminNav, que lo utiliza para mostrar condicionalmente la estadística de conteo de tenants y alternar entre el enlace "All Tenants" para superadmins y el enlace "Members" para admins a nivel de tenant.

Paso 8: Página de Inicio de Sesión

// 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>

Paso 9: Layout Raíz - 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>

Paso 10: Página de Inicio Pública

La página de inicio es lo primero que ve un visitante. Tiene dos funciones: demostrar el aislamiento de tenants de inmediato al renderizar el branding del tenant actual, y darles a los desarrolladores que prueban la demo un mapa claro de qué cuenta pertenece a qué URL. Sin esta página, acceder a / simplemente redirige directamente a /login sin contexto, lo cual resulta confuso para cualquiera que siga el artículo.

Necesitamos un +page.server.ts para redirigir a los usuarios ya autenticados y pasar los datos del tenant hacia abajo, y un +page.svelte que use el contexto del layout raíz para reflejar el tenant activo.

// 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>

Lo que esta página demuestra de inmediato. Antes de que el lector inicie sesión, el hero principal ofrece una descripción clara de qué es la demo, y la sección del hero con branding ya muestra la API de Context funcionando: visita ?tenant=acme y se renderiza con el branding naranja-rojo de Acme y un ícono de Rocket. Cambia a ?tenant=globex, misma página, mismos archivos de componentes, cyan y un ícono Zap. El branding del tenant está activo en la barra de URL antes de intentar iniciar sesión siquiera.

La lectura de url.searchParams.get('tenant') en la función de carga es crucial: sin ella, SvelteKit no rastreará el parámetro ?tenant= como una dependencia, y hacer clic en las tarjetas de tenant en la página de inicio no disparará una nueva ejecución del servidor — el hero permanece obsoleto con el tenant anterior.

Paso 11: Layout del Dashboard - Contexto del Tenant

Aquí es donde ocurre el shadowing clave. La raíz estableció theme con un valor predeterminado. Este layout lo sobreescribe con el branding del tenant. Nota que el archivo vive en src/routes/(app)/dashboard/+layout.svelte — solo aplica al subárbol del dashboard, no a todas las rutas dentro del 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>

¿Qué acaba de pasar con setContext('theme', tenantTheme)?

El layout raíz ya llamó a setContext('theme', defaultTheme). Cuando este layout llama a setContext('theme', tenantTheme), no reemplaza el contexto de la raíz. Crea una nueva entrada en el mapa de contexto para este subárbol. Los componentes dentro de (app)/dashboard/* obtienen tenantTheme; los componentes fuera de esa ruta (login, página de inicio) aún obtienen defaultTheme. Esto es context shadowing — el mismo mecanismo que te permite anidar providers sin contaminación de estado global.

El spread ...defaultTheme.colors en la línea 3 de tenantTheme.colors es un detalle sutil pero importante. Sin él, si alguna vez se agrega una nueva propiedad a la interfaz Theme.colors, este objeto literal carecería de ella y TypeScript solo detectaría la omisión en la asignación de tipo — no aquí. El spread garantiza que el tema del tenant siempre herede todos los colores neutros del predeterminado, y solo sobreescriba los específicos de la marca.

Paso 12: Componentes de la App

TenantLogo

En lugar de almacenar strings de emoji en la BD, el proyecto usa íconos de lucide-svelte mapeados por una clave de string. Esto mantiene el esquema de la BD serializable (sin rarezas de Unicode) y proporciona íconos SVG nítidos a cualquier tamaño.

Agrega la dependencia primero:

npm install lucide-svelte

lucide-svelte incluye importaciones ESM sin extensión (p. ej. './icons/index' en lugar de './icons/index.js'), que rompen el resolver ESM estricto de Node durante el SSR. Debes indicarle a Vite que lo empaquete en lugar de externalizarlo.

// 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']
	}
})

Sin esto, el servidor de desarrollo lanzará ERR_MODULE_NOT_FOUND en el momento en que cualquier ruta importe un ícono de lucide del lado del 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}

El ícono shield lo usa el tenant interno tenant_platform para que el login y la nav de administración del superadmin muestren una marca distintiva. El | string en el tipo de la prop es una válvula de seguridad: si se agrega un nuevo nombre de ícono a la BD antes de que el componente sea actualizado, se renderiza el Hexagon de respaldo en lugar de un error en tiempo de ejecución.

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>

El ícono ahora es una referencia a un componente, no un string. Pásalo así:

<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>

Esto oculta elementos. No protege los endpoints de la API. Un usuario podría eliminar el elemento del DOM y aún así acceder a /api/reports — tus endpoints del servidor deben verificar de forma independiente locals.features (o rederivarlo) para cualquier operación sensible.

Paso 13: Página del 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>

Paso 14: Layout del Grupo de Rutas Admin - Sombra de Tema Oscuro

<!-- 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 recibe isSuperAdmin del layout y lo usa en tres lugares: el conteo de columnas de la grilla de estadísticas (los superadmins muestran un contador de Tenants que los admins de tenant no tienen), los enlaces de navegación (los superadmins van a /admin/panel, los admins de tenant van a /admin/members), y la insignia del pie de página (los superadmins ven "Platform Admin", los admins de tenant ven el nombre de su 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>

Paso 15: Página del Panel Admin

/admin/panel es el resumen global de la plataforma — muestra cada tenant cliente y su matriz de feature flags. Solo la cuenta superadmin debería acceder a esta página. Los admins a nivel de tenant (owner, admin) son redirigidos a /admin/members en su lugar, que muestra únicamente la membresía de su propio 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>

Paso 16: Página de Members

Mientras que el superadmin ve /admin/panel con todos los tenants clientes, un owner o admin de tenant llega a /admin/members — la lista de membresía de su propio tenant más un resumen de qué funcionalidades incluye su plan. La función de carga del servidor redirige a los superadmins para que la página siempre refleje un ú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
		}))
	}
}

Los feature flags también se cargan aquí para que la página pueda renderizar una tarjeta de resumen del plan — dándoles a los admins una imagen clara de a qué tiene acceso su tenant, en la misma UI de admin donde gestionan su equipo.

<!-- 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>

La tarjeta del plan hace visibles de un vistazo los derechos de funcionalidades del admin del tenant, coloreada con el mismo color primario de la marca del tenant que fluye a través del tema oscuro del admin. La fila de funcionalidades de un tenant gratuito estará mayormente compuesta por cruces apagadas; un tenant enterprise como Acme obtiene marcas de verificación en color primario sólido en toda la línea.

// 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')
	}
}

El AppHeader ya tiene un botón <form method="POST" action="/logout">, no se necesita ningún componente de página adicional.

El Flujo de Contexto Completo

Esto es lo que sucede desde la URL hasta el 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

Sombreado de Contexto: El Concepto Central Ilustrado

La clave de tema se establece tres veces a lo largo de la jerarquía 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 llamada a setContext crea un nuevo enlace en el ámbito de contexto de ese componente. Los componentes descendientes que llaman a getContext('theme') siempre reciben el valor del ancestro más cercano que llamó a setContext con esa clave. El valor raíz nunca se destruye, simplemente es inalcanzable desde dentro del subárbol que lo sombrea.

Esto es lo que hace que el sombreado de contexto sea poderoso para el theming en SaaS:

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

Sin prop drilling. Sin estado global. Cada capa es composable de forma independiente.

Acceso al Contexto con Seguridad de Tipos

El parámetro genérico getContext<T>() se verifica en tiempo de compilación:

// ✅ 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 una seguridad aún mayor, usa las funciones auxiliares de $lib/context-helpers (creadas en el Paso 1b) que centralizan las anotaciones de tipo y el patrón de objeto getter en un solo lugar. Cualquier cambio de nombre o de tipo aparece como un error de TypeScript en todos los consumidores de inmediato.

Errores Comunes

Error 1: Calcular feature flags en el lado del cliente

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

Las funcionalidades deben provenir de la función de carga del servidor, que lee desde la base de datos. El cliente recibe el booleano resuelto, nunca ve la lógica que lo produjo.

// ✅ 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
	}
})

Error 2: Filtración de sesión 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
}

Si Alice de Acme visita globex.localhost, estaría autenticada como Alice en los datos de Globex. Siempre verifica la membresía del tenant en la validación de sesión:

// ✅ 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
}

Error 3: Llamar a setContext después de la inicialización del 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>

Error 4: Usar contexto entre subárboles no relacionados

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

El contexto fluye estrictamente de padres a hijos. Si dos componentes hermanos necesitan estado compartido, eleva el contexto a su layout ancestro común.

Error 5: Mutar el objeto de contexto directamente

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

Si las banderas de características necesitan cambiar (por ejemplo, después de una actualización), llama a invalidateAll() para volver a ejecutar las funciones de carga del servidor y reconstruir el contexto con datos frescos de la base de datos.

Notas de Rendimiento

La búsqueda de banderas de características es O(n × m) en la implementación actual (n banderas × m tenants). Para producción con cientos de tenants y decenas de banderas, indexa la tabla de banderas por (tenantId, key) y almacena en caché las banderas resueltas en memoria con un TTL corto:

// 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
}

Los objetos de contexto no necesitan ser reactivos por sí mismos. Los valores dentro del contexto (theme, features) se pasan por referencia. Si necesitas que se actualicen después de que cambien los datos de SvelteKit, deja que el layout se vuelva a ejecutar mediante invalidateAll(); el layout reconstruirá el contexto a partir de las props data frescas.

setContext / getContext son síncronos y no generan asignaciones en tiempo de lectura. La búsqueda es un simple acceso a una clave de Map, sin proxying, sin suscripciones. No dudes en llamar a getContext dentro de los componentes; no es costoso.

¿Qué Sigue?

Esta demo cubre los patrones esenciales de multi-tenant. En producción lo extenderías con:

Enrutamiento wildcard de subdominio en tu proveedor de hosting (Vercel/Fly.io) para que *.yourapp.com llegue a la misma instancia de SvelteKit
Servicio real de banderas de características como Unleash o LaunchDarkly; (app)/+layout.server.ts es el punto de integración, reemplaza db.features.forTenant() por la llamada al servicio
Esquemas de base de datos por tenant o seguridad a nivel de fila (RLS) en Postgres; locals.tenant.id es la clave de aislamiento para cada consulta
SSO por tenant - locals.tenant.id determina qué configuración SAML/OIDC usar en tu hook de autenticación

La arquitectura de contexto que se muestra aquí escala directamente. Las capas (root → app → admin) y el patrón de sombreado (setContext / getContext) no cambian, solo las fuentes de datos detrás de ellas.

Conclusiones Clave

El servidor determina el tenant, el contexto lo distribuye. El hook resuelve el tenant desde el subdominio antes de que se ejecute cualquier función de carga. El contexto simplemente hace que esos datos estén disponibles en lo profundo del árbol sin perforación de props.

Las banderas de características pertenecen al servidor. Nunca calcules plan === 'enterprise' en los layouts. Resuelve las banderas desde una base de datos o servicio en la función de carga y pasa los booleanos resueltos al contexto. El cliente nunca ve la lógica de permisos.

El sombreado de contexto es el primitivo de tematización multi-tenant. La misma clave 'theme' se establece tres veces — predeterminada, con la marca del tenant, administrador oscuro — y cada subárbol lee automáticamente el valor del ancestro más cercano. Sin lógica condicional en los componentes, sin almacén global de temas.

Las rutas de administrador necesitan separación adecuada. Un grupo de rutas (admin)/* con su propio +layout.server.ts que llama a error(403, …) es el patrón correcto. Ocultar botones de administrador en el dashboard regular no es control de acceso.

El aislamiento de tenants requiere verificación cruzada en la capa de sesión. Una sesión válida del Tenant A debe ser rechazada en el subdominio del Tenant B. Esta verificación ocurre en el hook, antes de que se cargue cualquier dato.