01The shell
Topbar, sidebar, company switcher, dashboard grid and widget runtime in one screen.
- Collapse the sidebar and watch the 248px → 72px rail
- Switch company and observe the context revision invalidating caches
- Open the inspector on the right
Try it
Test the framework, do not take our word
The Foundation Lab is the reference consumer of @ottili/foundation-framework. It is the same code the products import, running against the same Unified API — with a scenario inspector on top so you can force the states that are normally hard to reproduce.
https://foundation.test.ottili.one
Guided tour
Six things worth opening first
Each entry is a real route in the Lab. Company acme is the seeded demo tenant.
02Component catalog
The full §47 inventory rendered live: primitives, forms, data grids, overlays, navigation and platform states.
- Toggle theme and density and see every component follow
- Open a Dialog, Drawer, Sheet and Popover for focus handling
- Sort and page the DataGrid
03Deep white label
Draft a branding change, preview it, publish it, then roll it back.
- Change the accent and preview before publishing
- Publish, then inspect the version history
- Roll back and confirm the previous version returns
04Policy & feature states
Permission, entitlement, rollout and degraded states rendered through one resolver.
- Flip a role in the scenario inspector
- Compare hidden vs locked vs upgrade-required
- Force a backend failure and read the degraded state
05Shared capabilities
The shared AI, Files, Flows, Approvals, Activity and Jobs surfaces.
- Open the AI side panel and inspect the context viewer
- Browse /c/acme/files and use the file picker
- Open /c/acme/flows and run a flow as a dry run
06Developer conformance
The Lab's own coverage matrix: which SoT chapter is proven by which screen.
- Read the §7.2 conformance matrix
- Open /developer/capabilities for the gate scenarios
Scenario inspector
Force the states nobody can reproduce on demand
A framework is judged by its bad days. The Lab can put every surface into a failure, empty, locked or expired state without touching a database.
| Axis | What it lets you check |
|---|---|
| Role | Switch between permission sets and watch navigation, actions and states change. |
| Theme | Light, dark, system and high contrast, plus per-company accent. |
| Backend health | Force a healthy, slow or failing Unified API and inspect the degraded states. |
| Data state | Empty, sparse, typical and stress datasets for every surface. |
| Product state | Locked, upgrade-required, rollout-off and fully entitled. |
| Session state | Active, refreshing, expired and re-authentication required. |
| Layout stress | Long labels, dense tables, narrow viewports and RTL-ish pressure. |
Keyboard
Shortcuts that work in the Lab
⌘ K
Command palette. Search routes, records, commands and settings through the registered search providers.
⌘ `
Ottili Workbench. Shell, API Explorer, Events, Logs, Runs, Approvals and Jobs panels.
⌘ /
Shortcut overview. Every shortcut is registered through the command contract, so it also appears in the palette.
Run it yourself
Local development
The package family is a pnpm workspace; the Lab consumes it through file links and transpiles the TypeScript source directly.
1
Install the package family
cd packages/foundation && pnpm install
2
Install the reference app
cd apps/foundation-lab && npm install
3
Start the Lab
npm run dev # http://localhost:3055
4
Run the release gate
cd packages/foundation && npm run release-gate
The release gate chains typecheck, the package test suites, the architecture boundary tests, the Lab's typecheck, build, unit tests and Playwright E2E, plus the Python tool suites that mirror the TypeScript validators. Cross-language parity is tested with shared JSON fixtures, so a manifest that validates in the browser also validates in the Unified API.