+ {%- set footnotes = load_data(path="data/footnotes.toml", required=false) -%} + {%- if footnotes -%} +

+ {%- for footnote in footnotes -%} +

+ ^{+ {{ loop.index }}
+} +

+ {%- endfor -%} +

+ {%- endif -%} +

{title}

Hi

About

"); + await Bun.write(join(root, "src/components/Card.astro"), "

"); + await Bun.write(join(root, "src/styles/site.css"), ".page { color: red; }"); + await Bun.write(join(root, "src/content/posts/hello.md"), "---\ntitle: Hello\n---\n\nBody"); + const destination = join(root, "muddle"); + const result = await backportProject(root, destination); + expect(result.source).toBe("astro"); + expect(await readFile(join(destination, "modules/app/views/index.spug"), "utf8")).toContain("main"); + expect(await readFile(join(destination, "styles/site.stcss"), "utf8")).toContain(".page"); + expect(await readFile(join(destination, "content/posts/hello.md"), "utf8")).toContain("title: Hello"); + expect(await readFile(join(destination, "ct.config.ts"), "utf8")).toContain('name: "posts"'); + const engine = new TemplateEngine({ viewsDir: join(destination, "modules/app/views") }); + expect(await engine.render("index.spug")).toContain("

Hi

"); + expect(await engine.render("about.spug")).toContain("

About

"); + }); + + test("carries Zola configuration and partial templates into the Muddle project", async () => { + const root = await mkdtemp(join(tmpdir(), "muddle-zola-")); + await mkdir(join(root, "templates/partials"), { recursive: true }); + await mkdir(join(root, "content/posts"), { recursive: true }); + await Bun.write(join(root, "config.toml"), 'title = "Zola notes"\nbase_url = "https://notes.example"'); + await Bun.write(join(root, "templates/index.html"), '{% extends "base.html" %}{% block content %}

{% endblock %}'); + await Bun.write(join(root, "templates/partials/nav.html"), ""); + await Bun.write(join(root, "content/posts/first.md"), "---\ntitle: First\n---\n\nPost"); + const destination = join(root, "muddle"); + await backportProject(root, destination); + expect(await readFile(join(destination, "modules/app/site.config.ts"), "utf8")).toContain("Zola notes"); + expect(await readFile(join(destination, "modules/app/views/partials/nav.spug"), "utf8")).toContain("nav"); + expect(await readFile(join(destination, "modules/app/views/index.spug"), "utf8")).toContain("extends ./base.spug"); + }); + + test("compiles Sass before handing CSS to STCSS", async () => { + const root = await mkdtemp(join(tmpdir(), "muddle-sass-")); + const path = join(root, "site.scss"); + await writeFile(path, "$ink: #123456; .card { color: $ink; }"); + const loaded = await sassLoader().load({ path, relativePath: "styles/site.scss", source: await readFile(path, "utf8") }); + expect(loaded.content).toContain("color: #123456;"); + }); + + test("pulls declarative ShadCN registry components into Spug and STCSS", async () => { + const root = await mkdtemp(join(tmpdir(), "muddle-shadcn-")); + const integration = shadcnIntegration({ + components: ["button"], + fetch: async () => new Response(JSON.stringify({ files: [ + { path: "button.tsx", content: "export function Button() { return ; }" }, + { path: "button.css", content: ".btn { color: red; }" }, + ] })), + }); + await integration.setup?.({ config: { root } as any, route() {}, loader() {} }); + expect(await readFile(join(root, "modules/app/views/components/button.spug"), "utf8")).toContain("button"); + expect(await readFile(join(root, "styles/shadcn/button.stcss"), "utf8")).toContain(".btn"); + }); +}); diff --git a/tests/components.test.ts b/tests/components.test.ts new file mode 100644 index 0000000..537c4f2 --- /dev/null +++ b/tests/components.test.ts @@ -0,0 +1,21 @@ +import { describe, expect, test } from "bun:test"; +import { app } from "../samples/hello-world/index.ts"; + +/** + * The minimal blog deliberately has no application server components. + */ +describe("server components", () => { + test("renders the static blog shell", async () => { + const html = await ( + await app.fetch(new Request("http://localhost/")) + ).text(); + expect(html).toContain("Test1"); + }); + + test("does not ship a relation bridge for anchors", async () => { + const html = await ( + await app.fetch(new Request("http://localhost/")) + ).text(); + expect(html).not.toContain("window.__muddleRelations"); + }); +}); diff --git a/tests/core.test.ts b/tests/core.test.ts new file mode 100644 index 0000000..3d7b7f9 --- /dev/null +++ b/tests/core.test.ts @@ -0,0 +1,151 @@ +import { describe, expect, test } from "bun:test"; +import { mkdtemp, rm, writeFile } from "node:fs/promises"; +import { tmpdir } from "node:os"; +import { join } from "node:path"; +import { generate, renderProps } from "../contracts/typegen/generator.ts"; +import { Container } from "../core/container.ts"; +import { Module } from "../decorators/Module.ts"; +import { Service } from "../decorators/Service.ts"; +import { Controller } from "../decorators/Controller.ts"; +import { Route } from "../decorators/Route.ts"; +import { validate, toFormFields } from "../core/form.ts"; + +/** + * Tests of the container, of the modules and of the type generator. + */ + +describe("container", () => { + test("resolves a dependency by type", () => { + @Service() + class UserService { + find() { + return "ada"; + } + } + + @Controller("/") + class UserController { + constructor(private readonly users: UserService) {} + + find() { + return this.users.find(); + } + } + + const container = new Container(); + container.registerClass(UserService); + container.registerClass(UserController); + + const controller = container.resolve(UserController); + expect(controller.find()).toBe("ada"); + }); + + test("awaits an asynchronous provider", async () => { + @Service() + class AsyncService { + async load() { + return "loaded"; + } + } + + const container = new Container(); + container.registerFactory( + AsyncService, + async () => new AsyncService(), + ); + + const service = await container.resolveAsync(AsyncService); + expect(await service.load()).toBe("loaded"); + }); + + test("reports an unknown dependency", () => { + const container = new Container(); + expect(() => container.resolve("missing")).toThrow("Cannot resolve"); + }); +}); + +describe("modules", () => { + test("collects the controllers of a module", () => { + @Controller("/") + class HomeController { + @Route("/") + index() { + return "home"; + } + } + + @Module({ controllers: [HomeController] }) + class AppModule {} + + const container = new Container(); + container.registerClass(HomeController); + + expect(AppModule).toBeDefined(); + }); +}); + +describe("forms", () => { + test("reads the fields of a form", () => { + const fields = toFormFields({ title: "Hello", tags: ["a", "b"] }); + expect(fields.get("title")).toBe("Hello"); + expect(fields.has("tags")).toBe(true); + expect(fields.all().tags).toEqual(["a", "b"]); + }); + + test("validates the fields", () => { + const fields = toFormFields({ title: "Hello", age: "42" }); + const result = validate<{ title: string; age: number }>(fields, { + title: { required: true, maxLength: 10 }, + age: { type: "number", min: 18 }, + }); + expect(result.ok).toBe(true); + if (result.ok) { + expect(result.value.age).toBe(42); + } + }); + + test("reports the invalid fields", () => { + const fields = toFormFields({ title: "", age: "abc" }); + const result = validate(fields, { + title: { required: true }, + age: { type: "number" }, + }); + expect(result.ok).toBe(false); + expect(result.errors.title).toBe("title is required"); + expect(result.errors.age).toBe("age must be a number"); + }); +}); + +describe("typegen", () => { + test("renders the props of a view", () => { + expect(renderProps([])).toBe("Record"); + expect( + renderProps([ + { name: "title", type: "string", optional: false }, + { name: "body", type: "string", optional: true }, + ]), + ).toBe("{ title: string; body?: string }"); + }); + + test("generates the contracts of the templates", async () => { + const root = await mkdtemp(join(tmpdir(), "muddle-typegen-")); + await writeFile( + join(root, "index.spug"), + "props\n title: string\n count?: number\n\np= title", + "utf8", + ); + const result = await generate({ + root, + out: join(root, "out"), + viewRoots: ["."], + }); + expect(result.views).toHaveLength(1); + expect(result.views[0]?.key).toBe("index"); + expect(result.views[0]?.props.map((prop) => prop.name)).toEqual([ + "title", + "count", + ]); + + await rm(root, { recursive: true, force: true }); + }); +}); diff --git a/tests/css.test.ts b/tests/css.test.ts new file mode 100644 index 0000000..8dae563 --- /dev/null +++ b/tests/css.test.ts @@ -0,0 +1,263 @@ +import { describe, expect, test } from "bun:test"; +import { compileCss } from "../views/css/index.ts"; +import { evaluate } from "../views/css/evaluate.ts"; +import { defineHooks } from "../views/hooks.ts"; + +/** + * Tests of the structured css. + */ + +describe("stcss", () => { + test("flattens the nested rules", () => { + const css = compileCss(` +.card { + color: red; + + &__title { + font-weight: 700; + } +} +`); + expect(css).toContain(".card {"); + expect(css).toContain(".card__title {"); + expect(css).toContain("font-weight: 700;"); + }); + + test("accepts Pug-like indentation, colonless declarations and blocks", () => { + const css = compileCss(` +$ink #101828 +.card + color $ink + padding 1rem + &__title + font-weight 700 + &:hover + color #000 +`); + expect(css).toContain(".card {"); + expect(css).toContain("color: #101828;"); + expect(css).toContain("padding: 1rem;"); + expect(css).toContain(".card__title {"); + expect(css).toContain(".card:hover {"); + }); + + test("accepts Pug-like at-rule blocks", () => { + const css = compileCss(` +.panel + width: 30rem + @media (max-width: 48rem) + width 100% +`); + expect(css).toContain(".panel {"); + expect(css).toContain("@media (max-width: 48rem)"); + expect(css).toContain("width: 100%;"); + }); + + test("runs application-defined STCSS expansions from a contextual registry", () => { + const hooks = defineHooks((hook) => { + hook.stcss.value("double", ({ inner, resolve }) => `calc(${resolve(inner)} * 2)`); + hook.stcss.declaration(({ selector, declaration }) => declaration.property === "outline-token" + ? [`${selector}::before { content: "hook"; }`] + : undefined); + hook.stcss.atRule("paint", ({ selector, params }) => `${selector} { color: ${params}; }`); + }); + const css = compileCss(`.card { width: double(12px); outline-token: yes; @paint rebeccapurple; }`, { hooks }); + expect(css).toContain("width: calc(12px * 2);"); + expect(css).toContain('.card::before { content: "hook"; }'); + expect(css).toContain(".card { color: rebeccapurple; }"); + }); + + test("expands calculation hooks and centered position aliases", () => { + const css = compileCss(` +.dialog { + position: fixed-center; + width: 30rem; + margin-left: $offset($center(30rem), $pad); + padding: $pad(2); +} +.page-dialog { position: page-center; transform: scale(.96); } +`); + expect(css).toContain("position: fixed;"); + expect(css).toContain("left: 50%;"); + expect(css).toContain("top: 50%;"); + expect(css).toContain("transform: translate(-50%, -50%);"); + expect(css).toContain("margin-left: calc(calc(50% - (30rem / 2)) + var(--muddle-pad, 1rem));"); + expect(css).toContain("padding: calc(var(--muddle-pad, 1rem) * 2);"); + expect(css).toContain("position: absolute;"); + expect(css).toContain("transform: translate(-50%, -50%) scale(.96);"); + }); + + test("registers application calculation hooks", () => { + const hooks = defineHooks((hook) => { + hook.stcss.calculation("third", ({ args, resolve }) => `calc(${resolve(args ?? "100%")} / 3)`); + }); + expect(compileCss(".column { width: $third(90%); }", { hooks })).toContain("width: calc(90% / 3);"); + }); + + test("resolves the variables", () => { + const css = compileCss(` +$ink: #101828; + +.body { + color: $ink; +} +`); + expect(css).toContain("color: #101828;"); + }); + + test("interpolates an expression", () => { + const css = compileCss(` +$space: 1; + +.gutter { + padding: #{$space * 2}rem; +} +`); + expect(css).toContain("padding: 2rem;"); + }); + + test("repeats a block", () => { + const css = compileCss(` +@each $space in 1 2 3 { + .space-#{$space} { + margin: #{$space * 0.5}rem; + } +} +`); + expect(css).toContain(".space-1 {"); + expect(css).toContain(".space-2 {"); + expect(css).toContain(".space-3 {"); + expect(css).toContain("margin: 1.5rem;"); + }); + + test("counts a range", () => { + const css = compileCss(` +@for $i from 1 through 2 { + .col-#{$i} { + width: #{$i * 10}%; + } +} +`); + expect(css).toContain(".col-1 {"); + expect(css).toContain(".col-2 {"); + }); + + test("expands a mixin", () => { + const css = compileCss(` +@mixin rounded($size) { + border-radius: $size; +} + +.button { + @include rounded(4px); + color: blue; +} +`); + expect(css).toContain("border-radius: 4px;"); + expect(css).toContain("color: blue;"); + }); + + test("keeps the css functions untouched", () => { + const css = compileCss(` +.box { + border: 1px solid rgba(16, 24, 40, 0.12); + color: rgb(1, 2, 3); +} +`); + expect(css).toContain("rgba(16, 24, 40, 0.12)"); + expect(css).toContain("rgb(1, 2, 3)"); + }); + + test("darkens a colour", () => { + const css = compileCss(` +.button { + color: darken(#2b6cb0, 10); +} +`); + expect(css).toMatch(/color: #[0-9a-f]{6};/); + }); + + test("evaluates an expression", () => { + expect(evaluate("$a * 2", { scope: { $a: "21" } })).toBe("42"); + expect(evaluate("$a + 1", { scope: { $a: "1" } })).toBe("2"); + }); + + test("compiles anchor relations, loop ranges and back-propagated state", () => { + const css = compileCss(` +@each $n in [0..2] { + nav:with(@hello$n:active) li:nth-child(#{$n + 1}) { + left: calc($relate(d"@hello{$n + 1}") + $relate[width](d"@hello{$n + 1}")); + color: @hello$n.computed.backgroundColor; + } +} +nav li:when(nav @hello1:clicked) { opacity: 1; } +`); + expect(css).toContain('nav:has([data-muddle-anchor="hello0"]:active) li:nth-child(1)'); + expect(css).toContain("var(--muddle-relate-hello1-x)"); + expect(css).toContain("var(--muddle-relate-hello1-width)"); + expect(css).toContain('nav:has([data-muddle-anchor="hello1"]:active) li'); + }); + + test("resolves $refer as a relation value", () => { + const css = compileCss(`.tooltip { left: $refer[left](@trigger); width: $refer[width](@trigger); }`); + expect(css).toContain("var(--muddle-relate-trigger-x)"); + expect(css).toContain("var(--muddle-relate-trigger-width)"); + }); + + test("reflects dotted anchor groups without enumerating their members", () => { + const css = compileCss(`:reflect(@docs) { scroll-margin-top: 4rem; }`); + expect(css).toContain('[data-muddle-anchor^="docs."]'); + }); + + test("expands concentric border radii", () => { + const css = compileCss(` +.panel { + padding: 1rem; + border: 2px solid #333; + border-radius: concentric 0.75rem; +} +.panel-default { + border-radius: concentric; +} +.blind { + padding: 12px; + border: var(--bw, 1px) solid; + border-radius: concentric var(--outer, 12px); +} +`); + expect(css).toContain(".panel > * {\n\tborder-radius: calc((0.75rem) - (1rem) - (2px));"); + expect(css).toContain(".panel-default > * {\n\tborder-radius: inherit;"); + expect(css).toContain(".blind > * {\n\tborder-radius: calc((var(--outer, 12px)) - (12px) - (var(--bw, 1px)));"); + }); + + test("expands freeform gradients into radial gradient stacks", () => { + const css = compileCss(` +.paint { + background-image: freeform-gradient(hsl(270 50% 60%) 10% 50%, red 70% 40%, rgb(0 128 0) 40% 80% 30%); +} +`); + expect(css).toContain("radial-gradient(circle farthest-side at 10% 50%, hsl(270 50% 60%), transparent)"); + expect(css).toContain("radial-gradient(circle farthest-side at 70% 40%, red, transparent)"); + expect(css).toContain("radial-gradient(circle at 40% 80%, rgb(0 128 0), rgb(0 128 0) calc(30% * 0.97), transparent 30%)"); + expect(() => compileCss(".x { background-image: freeform-gradient(red 1% 2% 3% 4%); }")).toThrow(); + }); +}); + +describe("stcss @measure", () => { + test("records prediction targets and anchors them as relations", () => { + const measured: string[] = []; + const css = compileCss(` +.ribbon { + @measure; +} +@measure @trigger, .card, panel; +`, { measured }); + expect(css).toContain("/* muddle-predict:"); + expect(measured).toEqual([ + ".ribbon", + '[data-muddle-anchor="trigger"]', + ".card", + "panel", + ]); + }); +}); diff --git a/tests/d1.test.ts b/tests/d1.test.ts new file mode 100644 index 0000000..3b3c6c9 --- /dev/null +++ b/tests/d1.test.ts @@ -0,0 +1,66 @@ +import { afterAll, describe, expect, test } from "bun:test"; +import { createD1Driver } from "../modules/database/src/adapters/d1.ts"; + +const server = Bun.serve({ + port: 0, + async fetch(request) { + const payload = (await request.json()) as { + sql?: string; + params?: unknown[]; + }; + + if (payload.sql?.startsWith("SELECT")) { + return Response.json({ + success: true, + result: [ + { + results: [ + { id: "1", title: "First", position: 1 }, + ], + success: true, + meta: { changes: 1 }, + }, + ], + }); + } + + return Response.json({ + success: true, + result: [{ results: [], success: true, meta: { changes: 1 } }], + }); + }, +}); + +afterAll(() => { + server.stop(true); +}); + +describe("d1", () => { + test("sends the statements to the api", async () => { + const driver = createD1Driver({ + accountId: "account", + databaseId: "database", + apiToken: "token", + endpoint: `http://localhost:${server.port}/query`, + }); + + const rows = await driver.query("SELECT * FROM notes"); + expect(rows).toHaveLength(1); + expect(rows[0]?.title).toBe("First"); + + const result = await driver.execute("INSERT INTO notes VALUES (1)"); + expect(result.changes).toBe(1); + + await driver.close(); + }); + + test("uses the placeholders of sqlite", () => { + const driver = createD1Driver({ + accountId: "account", + databaseId: "database", + apiToken: "token", + }); + expect(driver.placeholder(1)).toBe("?"); + expect(driver.dialect).toBe("sqlite"); + }); +}); diff --git a/tests/hello-world.test.ts b/tests/hello-world.test.ts new file mode 100644 index 0000000..c4506d0 --- /dev/null +++ b/tests/hello-world.test.ts @@ -0,0 +1,36 @@ +import { describe, expect, test } from "bun:test"; +import { app } from "../samples/hello-world/index.ts"; + +/** + * End to end test of the hello world sample: the routes are rendered by the + * application, without a http server in between. + */ + +async function get(path: string): Promise { + return app.fetch(new Request(`http://localhost${path}`)); +} + +describe("hello world sample", () => { + test("renders the home page", async () => { + const response = await get("/"); + expect(response.status).toBe(200); + const html = await response.text(); + expect(html).toContain(""); + expect(html).toContain("Blog"); + expect(html).toContain("Test1"); + expect(html).toContain("Test2"); + }); + + test("renders a single post", async () => { + const response = await get("/posts/test1"); + expect(response.status).toBe(200); + const html = await response.text(); + expect(html).toContain("Test1"); + }); + + test("answers with 404 for unknown routes", async () => { + const response = await get("/nope"); + expect(response.status).toBe(404); + }); + +}); diff --git a/tests/hooks.test.ts b/tests/hooks.test.ts new file mode 100644 index 0000000..e4f74eb --- /dev/null +++ b/tests/hooks.test.ts @@ -0,0 +1,28 @@ +import { expect, test } from "bun:test"; +import { mkdtemp, rm, writeFile } from "node:fs/promises"; +import { tmpdir } from "node:os"; +import { join } from "node:path"; +import { createViews } from "../views/api.ts"; +import { defineHooks } from "../views/hooks.ts"; + +test("Spug hook registry composes render expansions with route context", async () => { + const hooks = defineHooks((hook) => { + hook.spug("stamp", ({ html, path, locals }) => `${html}`); + }); + const html = await hooks.renderSpug({ html: "

hello

", path: "/views/index.spug", locals: { title: "Muddle" } }); + expect(html).toContain(''); +}); + +test("Views applies Spug hooks after template composition", async () => { + const root = await mkdtemp(join(tmpdir(), "muddle-hooks-")); + try { + await writeFile(join(root, "index.spug"), "main= title\n"); + const hooks = defineHooks((hook) => { + hook.spug("mark", ({ html }) => `${html}`); + }); + const views = createViews({ root, viewsDir: root, hooks }); + expect(await views.render("index.spug", { title: "Muddle" } as never)).toContain(""); + } finally { + await rm(root, { recursive: true, force: true }); + } +}); diff --git a/tests/integrations.test.ts b/tests/integrations.test.ts new file mode 100644 index 0000000..6b030f6 --- /dev/null +++ b/tests/integrations.test.ts @@ -0,0 +1,83 @@ +import { describe, expect, test } from "bun:test"; +import { + checkboxMarkup, + mouseTrackerMarkup, + mouseTrackerCss, + reactCss, + reactIntegration, +} from "../integrations/react.ts"; + +/** + * Tests of the reactivity integration: the state utilities, the native + * checkbox hack and the mouse tracker of the parent hack. + */ + +describe("react integration", () => { + test("compiles the state utilities", () => { + const css = reactCss(); + expect(css).toContain(".state-open"); + expect(css).toContain(".state-closed"); + expect(css).toContain('[data-state="open"]'); + expect(css).toContain("--muddle-state: open;"); + }); + + test("exposes checkbox state without prescribing visual styles", () => { + const css = reactCss(); + expect(css).toContain('.peer:checked ~ [data-state="checked"]'); + expect(css).not.toContain("background:"); + expect(css).not.toContain("box-shadow:"); + }); + + test("scopes the parent hack of the mouse tracker", () => { + const css = mouseTrackerCss({ columns: 4, rows: 3, scope: "card" }); + const rules = css.match(/data-muddle-tracker="card"\]:has/g) ?? []; + expect(rules).toHaveLength(12); + expect(css).toContain("--muddle-mouse-x:"); + expect(css).toContain("nth-child(1)"); + expect(css).toContain("nth-child(12)"); + }); + + test("renders the markup of the mouse tracker", () => { + const markup = mouseTrackerMarkup({ columns: 2, rows: 2 }); + expect((markup.match(/mouse-tracker__cell/g) ?? [])).toHaveLength(4); + expect(markup).toContain('class="mouse-tracker"'); + expect(markup).toContain('data-muddle-capture="false"'); + }); + + test("renders the markup of a checkbox", () => { + const markup = checkboxMarkup({ + name: "published", + label: "Published", + checked: true, + }); + expect(markup).toContain('type="checkbox"'); + expect(markup).toContain('name="published"'); + expect(markup).toContain("checked"); + expect(markup).toContain("Published"); + }); + + test("serves the stylesheet", async () => { + const routes: { method: string; path: string }[] = []; + const integration = reactIntegration(); + await integration.setup?.({ + config: { + root: process.cwd(), + views: "views", + components: "views/components", + content: "content", + styles: "styles", + publicDir: "public", + viewRoots: ["views"], + loaders: {}, + collections: [], + integrations: [], + }, + route: (method, path) => routes.push({ method, path }), + loader: () => undefined, + }); + + expect(routes).toEqual([ + { method: "GET", path: "/_muddle/react.css" }, + ]); + }); +}); diff --git a/tests/markdown.test.ts b/tests/markdown.test.ts new file mode 100644 index 0000000..2337bb9 --- /dev/null +++ b/tests/markdown.test.ts @@ -0,0 +1,104 @@ +import { describe, expect, test } from "bun:test"; +import { mkdtemp, rm, writeFile } from "node:fs/promises"; +import { tmpdir } from "node:os"; +import { join } from "node:path"; +import { ContentRegistry } from "../core/content.ts"; +import { resolveConfig } from "../core/config.ts"; +import { markdownLoader, parseFrontmatter, renderMarkdown } from "../views/markdown.ts"; + +/** + * Tests of the markdown loader and of the content collections. + */ + +describe("markdown", () => { + test("parses the frontmatter", () => { + const { frontmatter, body } = parseFrontmatter( + "---\ntitle: Hello\ndraft: false\ncount: 3\ntags:\n - a\n - b\n---\n\nBody", + ); + expect(frontmatter.title).toBe("Hello"); + expect(frontmatter.draft).toBe(false); + expect(frontmatter.count).toBe(3); + expect(frontmatter.tags).toEqual(["a", "b"]); + expect(body.trim()).toBe("Body"); + }); + + test("renders the inline markup", () => { + expect(renderMarkdown("**bold** and *italic*")).toContain("bold"); + expect(renderMarkdown("`code`")).toContain("code"); + expect(renderMarkdown("[link](/x)")).toContain('link'); + }); + + test("renders the blocks", () => { + const html = renderMarkdown( + "# Title\n\nA paragraph.\n\n- one\n- two\n\n> quoted\n\n```js\nconst a = 1;\n```", + ); + expect(html).toContain("

Title

"); + expect(html).toContain("

A paragraph.

"); + expect(html).toContain("

one

"); + expect(html).toContain("

");
+	});
+});
+
+describe("content collections", () => {
+	test("loads the entries of a collection", async () => {
+		const dir = await mkdtemp(join(tmpdir(), "muddle-content-"));
+		await writeFile(
+			join(dir, "first.md"),
+			"---\ntitle: First\n---\n\nHello **world**",
+			"utf8",
+		);
+		await writeFile(
+			join(dir, "second.md"),
+			"---\ntitle: Second\n---\n\nSecond note",
+			"utf8",
+		);
+
+		const registry = new ContentRegistry(
+			resolveConfig({
+				root: dir,
+				collections: [
+					{
+						name: "notes",
+						dir: ".",
+						loader: markdownLoader(),
+						schema: { required: ["title"] },
+					},
+				],
+			}),
+		);
+		await registry.load();
+
+		const entries = registry.entries("notes");
+		expect(entries).toHaveLength(2);
+		expect(entries[0]?.id).toBe("first");
+		expect(entries[0]?.frontmatter.title).toBe("First");
+		expect(entries[0]?.body).toContain("world");
+		expect(registry.get("notes", "second")?.frontmatter.title).toBe("Second");
+
+		await rm(dir, { recursive: true, force: true });
+	});
+
+	test("rejects an invalid frontmatter", async () => {
+		const dir = await mkdtemp(join(tmpdir(), "muddle-content-"));
+		await writeFile(join(dir, "broken.md"), "---\ndraft: true\n---\n\nBody", "utf8");
+
+		const registry = new ContentRegistry(
+			resolveConfig({
+				root: dir,
+				collections: [
+					{
+						name: "notes",
+						dir: ".",
+						loader: markdownLoader(),
+						schema: { required: ["title"] },
+					},
+				],
+			}),
+		);
+
+		await expect(registry.load()).rejects.toThrow("title is required");
+
+		await rm(dir, { recursive: true, force: true });
+	});
+});
diff --git a/tests/modules.test.ts b/tests/modules.test.ts
new file mode 100644
index 0000000..ad7a799
--- /dev/null
+++ b/tests/modules.test.ts
@@ -0,0 +1,61 @@
+import { expect, test } from "bun:test";
+import { mkdtemp, writeFile, rm } from "node:fs/promises";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { astroComponent } from "../modules/astro/index.ts";
+import { TemplateContext } from "../core/context.ts";
+import { createViews } from "../views/api.ts";
+import { authFromRequest, authGuard, authIntegration } from "../integrations/auth.ts";
+import { App } from "../core/app.ts";
+import { resolveConfig } from "../core/config.ts";
+import { renderMdx } from "../modules/mdx/index.ts";
+import { compileCss } from "../views/css/index.ts";
+
+test("Astro imports compose with typed props and SPUG slots", async () => {
+	const root = await mkdtemp(join(tmpdir(), "astro-compose-"));
+	try {
+		await writeFile(join(root, "Title.astro"), '---\nconst { title } = Astro.props;\n---\n{title}');
+		await writeFile(join(root, "Card.astro"), '---\nimport Title from "./Title.astro";\nconst { title } = Astro.props;\n---\n<slot /></article>');
+		await writeFile(join(root, "index.spug"), 'component Card\n  title: "Composed"\n  render content\n    p Slot body');
+		const context = new TemplateContext().import("Card", astroComponent(join(root, "Card.astro")));
+		const views = createViews({ viewsDir: root, context });
+		const html = await views.renderFile("index");
+		expect(html).toContain("<h2>Composed</h2>");
+		expect(html).toContain("<p>Slot body</p>");
+	} finally { await rm(root, { recursive: true, force: true }); }
+});
+
+test("form authentication issues an opaque session and rejects forged identity cookies", async () => {
+	const app = await App.create({ config: resolveConfig(), integrations: [authIntegration({ login: (email, password) => password === "secret" ? { id: email } : undefined })] });
+	const response = await app.fetch(new Request("https://example.test/auth/login", { method: "POST", headers: { origin: "https://example.test" }, body: new URLSearchParams({ email: "ada", password: "secret" }) }));
+	expect(response.status).toBe(302);
+	const cookie = response.headers.get("set-cookie")!;
+	expect((await authFromRequest(new Request("https://example.test", { headers: { cookie } })))?.id).toBe("ada");
+	expect(await authFromRequest(new Request("https://example.test", { headers: { cookie: 'muddle_auth=%7B%22id%22%3A%22admin%22%7D' } }))).toBeUndefined();
+});
+
+test("OAuth callback validates browser-bound state and exchanges a PKCE code", async () => {
+	const original = globalThis.fetch;
+	let exchanged = false;
+	globalThis.fetch = (async (input: string | URL | Request, init?: RequestInit) => {
+		if (String(input).endsWith("/token")) {
+			const body = init?.body as URLSearchParams;
+			expect(body.get("code_verifier")?.length).toBeGreaterThan(40);
+			exchanged = true;
+			return Response.json({ access_token: "test-token" });
+		}
+		return Response.json({ sub: "oauth-user" });
+	}) as typeof fetch;
+	try {
+		const app = await App.create({ config: resolveConfig(), integrations: [authIntegration({ providers: [{ name: "test", authorizationUrl: "https://provider.test/authorize", tokenUrl: "https://provider.test/token", userInfoUrl: "https://provider.test/user", clientId: "test", redirectUri: "https://app.test/auth/test/callback", identity: (profile) => ({ id: String(profile.sub) }) }] })] });
+		const start = await app.fetch(new Request("https://app.test/auth/test"));
+		const authorization = new URL(start.headers.get("location")!);
+		expect(authorization.searchParams.get("code_challenge_method")).toBe("S256");
+		const callback = `https://app.test/auth/test/callback?code=test-code&state=${authorization.searchParams.get("state")}`;
+		expect((await app.fetch(new Request(callback))).status).toBe(400);
+		const response = await app.fetch(new Request(callback, { headers: { cookie: start.headers.get("set-cookie")! } }));
+		expect(response.status).toBe(302);
+		expect(exchanged).toBe(true);
+		expect((await app.fetch(new Request(callback, { headers: { cookie: start.headers.get("set-cookie")! } }))).status).toBe(400);
+	} finally { globalThis.fetch = original; }
+});
diff --git a/tests/orm.test.ts b/tests/orm.test.ts
new file mode 100644
index 0000000..e5d6895
--- /dev/null
+++ b/tests/orm.test.ts
@@ -0,0 +1,191 @@
+import { describe, expect, test } from "bun:test";
+import { createDatabase, Database } from "../modules/database/src/index.ts";
+import { Field } from "../modules/database/src/decorators/Field.ts";
+import { Hydrate } from "../modules/database/src/decorators/Hydrate.ts";
+import { Table } from "../modules/database/src/decorators/Table.ts";
+import { encodeRow, hydrateRow } from "../modules/database/src/hydration.ts";
+
+/**
+ * Tests of the ORM: the fluent repository, the hydration of the rows and the
+ * encoding of the values.
+ */
+
+@Table("users")
+class User {
+	@Field({ type: "text", primary: true })
+	id: string;
+
+	@Field({
+		type: "text",
+		unique: true,
+		encode: (value: string) => value.trim().toLowerCase(),
+	})
+	email: string;
+
+	@Field({
+		type: "text",
+		nullable: true,
+		encode: (value: string | null) => value?.trim() ?? null,
+		decode: (value: unknown) => (value === null ? null : String(value)),
+	})
+	name: string | null;
+
+	@Field({ type: "int", default: 0 })
+	age: number;
+
+	@Hydrate({
+		decode: (row) => `${String(row.email).split("@")[1] ?? ""}`,
+	})
+	domain: string;
+}
+
+async function database(): Promise<Database> {
+	const db = createDatabase({ dialect: "sqlite", path: ":memory:" });
+	db.model(User);
+	await db.migrate();
+	return db;
+}
+
+describe("orm", () => {
+	test("creates the table of a model", async () => {
+		const db = await database();
+		const rows = await db
+			.model(User)
+			.query("SELECT name FROM sqlite_master WHERE type = 'table'");
+		expect(rows).toHaveLength(1);
+		await db.close();
+	});
+
+	test("inserts and reads a row", async () => {
+		const db = await database();
+		const users = db.model(User);
+
+		const created = await users.create({
+			id: "1",
+			email: "ADA@Example.COM",
+			name: "Ada",
+			age: 36,
+		});
+		expect(created.id).toBe("1");
+
+		const found = await users.where("id", "1").first();
+		expect(found?.email).toBe("ada@example.com");
+		expect(found?.name).toBe("Ada");
+		await db.close();
+	});
+
+	test("encodes the values before the commit", async () => {
+		const db = await database();
+		const users = db.model(User);
+
+		await users.create({
+			id: "1",
+			email: "ada@example.com",
+			name: "  Ada  ",
+			age: 36,
+		});
+
+		const rows = await users.query(
+			"SELECT name, email FROM users WHERE id = '1'",
+		);
+		expect(rows[0]?.name).toBe("Ada");
+		expect(rows[0]?.email).toBe("ada@example.com");
+		await db.close();
+	});
+
+	test("hydrates the rows before they are read", async () => {
+		const db = await database();
+		const users = db.model(User);
+
+		await users.create({
+			id: "1",
+			email: "ada@example.com",
+			name: null,
+			age: 36,
+		});
+
+		const found = await users.where("id", "1").first();
+		expect(found?.domain).toBe("example.com");
+		expect(found?.name).toBeNull();
+		await db.close();
+	});
+
+	test("queries with conditions, order and limit", async () => {
+		const db = await database();
+		const users = db.model(User);
+
+		for (const [index, name] of ["Ada", "Grace", "Alan"].entries()) {
+			await users.create({
+				id: String(index),
+				email: `${name.toLowerCase()}@example.com`,
+				name,
+				age: 30 + index,
+			});
+		}
+
+		expect(await users.count()).toBe(3);
+		expect(await users.where("age", ">", 30).count()).toBe(2);
+		expect(
+			(await users.orderBy("age", "desc").limit(1).all())[0]?.name,
+		).toBe("Alan");
+		expect(
+			await users
+				.where([{ column: "name", operator: "=", value: "Ada" }])
+				.count(),
+		).toBe(1);
+		await db.close();
+	});
+
+	test("updates and deletes rows", async () => {
+		const db = await database();
+		const users = db.model(User);
+
+		await users.create({
+			id: "1",
+			email: "ada@example.com",
+			name: "Ada",
+			age: 36,
+		});
+
+		expect(await users.where("id", "1").update({ age: 37 })).toBe(1);
+		expect((await users.where("id", "1").first())?.age).toBe(37);
+		expect(await users.where("id", "1").delete()).toBe(1);
+		expect(await users.count()).toBe(0);
+		await db.close();
+	});
+
+	test("runs a transaction", async () => {
+		const db = await database();
+		const users = db.model(User);
+
+		await db.transaction(async (tx) => {
+			await tx.model(User).create({
+				id: "1",
+				email: "ada@example.com",
+				name: "Ada",
+				age: 36,
+			});
+		});
+
+		expect(await users.count()).toBe(1);
+		await db.close();
+	});
+
+	test("encodes and hydrates a row on its own", () => {
+		const encoded = encodeRow<User>(User as never, {
+			email: " A@B.COM ",
+			name: " x ",
+		});
+		expect(encoded.email).toBe("a@b.com");
+		expect(encoded.name).toBe("x");
+
+		const hydrated = hydrateRow<User>(User as never, {
+			id: "1",
+			email: "ada@example.com",
+			name: null,
+			age: 36,
+		});
+		expect(hydrated.domain).toBe("example.com");
+		expect(hydrated.name).toBeNull();
+	});
+});
diff --git a/tests/postgres.test.ts b/tests/postgres.test.ts
new file mode 100644
index 0000000..2b8524b
--- /dev/null
+++ b/tests/postgres.test.ts
@@ -0,0 +1,105 @@
+import { describe, expect, test } from "bun:test";
+import { createDatabase, type Database } from "../modules/database/src/index.ts";
+import { Field } from "../modules/database/src/decorators/Field.ts";
+import { Hydrate } from "../modules/database/src/decorators/Hydrate.ts";
+import { Table } from "../modules/database/src/decorators/Table.ts";
+
+/**
+ * Tests of the postgres adapter.
+ *
+ * The tests need a database, the connection string is read from
+ * `DATABASE_URL`. Without it the suite is skipped.
+ */
+
+const url = process.env.DATABASE_URL;
+
+@Table("muddle_users")
+class User {
+	@Field({ type: "text", primary: true })
+	id: string;
+
+	@Field({
+		type: "text",
+		unique: true,
+		encode: (value: string) => value.trim().toLowerCase(),
+	})
+	email: string;
+
+	@Field({
+		type: "text",
+		nullable: true,
+		encode: (value: string | null) => value?.trim() ?? null,
+	})
+	name: string | null;
+
+	@Field({ type: "int", default: 0 })
+	age: number;
+
+	@Field({ type: "bool", default: false })
+	active: boolean;
+
+	@Hydrate({ decode: (row) => String(row.email).split("@")[1] ?? "" })
+	domain: string;
+}
+
+async function database(): Promise<Database> {
+	const db = createDatabase({ dialect: "postgres", url });
+	db.model(User);
+	await db.migrate();
+	return db;
+}
+
+describe.skipIf(!url)("postgres", () => {
+	test("creates the table of a model", async () => {
+		const db = await database();
+		const rows = await db.model(User).query(
+			"SELECT table_name FROM information_schema.tables WHERE table_name = 'muddle_users'",
+		);
+		expect(rows).toHaveLength(1);
+		await db.close();
+	});
+
+	test("inserts, reads, updates and deletes", async () => {
+		const db = await database();
+		const users = db.model(User);
+		await users.where("id", "1").delete();
+
+		await users.create({
+			id: "1",
+			email: " ADA@Example.COM ",
+			name: " Ada ",
+			age: 36,
+			active: true,
+		});
+
+		const found = await users.where("id", "1").first();
+		expect(found?.email).toBe("ada@example.com");
+		expect(found?.name).toBe("Ada");
+		expect(found?.active).toBe(true);
+		expect(found?.domain).toBe("example.com");
+
+		expect(await users.where("id", "1").update({ age: 37 })).toBe(1);
+		expect((await users.where("id", "1").first())?.age).toBe(37);
+
+		expect(await users.where("id", "1").delete()).toBe(1);
+		await db.close();
+	});
+
+	test("counts and filters rows", async () => {
+		const db = await database();
+		const users = db.model(User);
+		await users.where("id", "2").delete();
+
+		await users.create({
+			id: "2",
+			email: "grace@example.com",
+			name: "Grace",
+			age: 45,
+		});
+
+		expect(await users.count()).toBeGreaterThan(0);
+		expect(await users.where("age", ">", 40).count()).toBeGreaterThan(0);
+		await users.where("id", "2").delete();
+		await db.close();
+	});
+});
diff --git a/tests/prediction.test.ts b/tests/prediction.test.ts
new file mode 100644
index 0000000..658304d
--- /dev/null
+++ b/tests/prediction.test.ts
@@ -0,0 +1,75 @@
+import { expect, test } from "bun:test";
+import { predictLayout } from "../adapters/prediction.ts";
+
+test("prediction measures desktop and mobile geometry and restores closed disclosure", async () => {
+	const html = '<!doctype html><html><head><style>.panel { width: 400px; height: 180px; } @media(max-width:48rem) { .panel { width: 200px; height: 240px; } }</style></head><body><details><summary>Menu</summary><div class="panel" data-muddle-anchor="panel">Content</div></details></body></html>';
+	const result = await predictLayout(html, { selectors: [".panel"], strict: true });
+	expect(result.predictions.map((prediction) => prediction.width)).toEqual([400, 200]);
+	expect(result.predictions.map((prediction) => prediction.height)).toEqual([180, 240]);
+	expect(result.html).not.toContain("<details open");
+	expect(result.html).toContain('data-muddle-predicted="predict-0"');
+	expect(result.html).toContain("--muddle-predicted-desktop-width: 400px");
+	expect(result.html).toContain("--muddle-predicted-mobile-width: 200px");
+	expect(result.html).toContain("--muddle-relate-panel-desktop-width: 400px");
+	expect(result.html).toContain("--muddle-relate-panel-mobile-width: 200px");
+	expect(result.html).toContain("@media (max-width: 48rem)");
+});
+
+test("prediction resolves a target that is sized from an ahead-of-time relation", async () => {
+	const html = `<!doctype html><html><head><style>
+		.source { position: absolute; left: 100px; top: 20px; width: 240px; height: 32px; }
+		.target { position: absolute; left: var(--muddle-relate-source-x); top: 80px; width: var(--muddle-relate-source-width); height: 24px; }
+		@media (max-width: 48rem) {
+			.source { left: 24px; width: 160px; }
+		}
+	</style></head><body>
+		<div class="source" data-muddle-anchor="source"></div>
+		<div class="target"></div>
+	</body></html>`;
+	const result = await predictLayout(html, { selectors: [".target"], strict: true });
+	const target = result.predictions.filter((prediction) => prediction.selector === '[data-muddle-predicted="predict-0"]');
+	expect(target.map((prediction) => prediction.width)).toEqual([240, 160]);
+	expect(target.map((prediction) => prediction.x)).toEqual([100, 24]);
+	expect(result.html).toContain("--muddle-predicted-desktop-width: 240px");
+	expect(result.html).toContain("--muddle-predicted-mobile-width: 160px");
+});
+
+test("prediction settles chained relations before writing the static page", async () => {
+	const html = `<!doctype html><html><head><style>
+		.source { position: absolute; left: 72px; top: 20px; width: 216px; height: 24px; }
+		.middle { position: absolute; left: var(--muddle-relate-source-x); top: 60px; width: var(--muddle-relate-source-width); height: 24px; }
+		.target { position: absolute; left: var(--muddle-relate-middle-x); top: 100px; width: var(--muddle-relate-middle-width); height: 24px; }
+	</style></head><body>
+		<div class="source" data-muddle-anchor="source"></div>
+		<div class="middle" data-muddle-anchor="middle"></div>
+		<div class="target"></div>
+	</body></html>`;
+	const result = await predictLayout(html, { selectors: [".target"], strict: true });
+	const target = result.predictions.filter((prediction) => prediction.selector === '[data-muddle-predicted="predict-0"]');
+	expect(target.map((prediction) => prediction.width)).toEqual([216, 216]);
+	expect(target.map((prediction) => prediction.x)).toEqual([72, 72]);
+});
+
+test("prediction follows the page's widest mobile breakpoint", async () => {
+	const html = '<!doctype html><html><head><style>.panel { width: 500px; height: 24px; } @media (max-width: 40rem) { .panel { width: 280px; } }</style></head><body><div class="panel" data-muddle-anchor="panel"></div></body></html>';
+	const result = await predictLayout(html, { selectors: [".panel"], strict: true });
+	expect(result.predictions.map((prediction) => prediction.width)).toEqual([500, 280]);
+	expect(result.html).toContain("@media (max-width: 40rem)");
+});
+
+test("prediction emits each selected breakpointAcc relation layer", async () => {
+	const html = '<!doctype html><html><head><style>.panel { width: 600px; height: 24px; } @media (max-width: 64rem) { .panel { width: 420px; } } @media (max-width: 48rem) { .panel { width: 300px; } }</style></head><body><div class="panel" data-muddle-anchor="panel"></div></body></html>';
+	const result = await predictLayout(html, { selectors: [".panel"], breakpointAcc: ["LG", "MD"], strict: true });
+	expect(result.html).toContain("--muddle-relate-panel-lg-width: 420px");
+	expect(result.html).toContain("--muddle-relate-panel-md-width: 300px");
+	expect(result.html).toContain("@media (max-width: 64rem)");
+	expect(result.html).toContain("@media (max-width: 48rem)");
+});
+
+test("prediction discovers dotted anchor groups and emits reflective metadata", async () => {
+	const html = '<!doctype html><html><head><style>.item { width: 200px; }</style></head><body><a class="item" data-muddle-anchor="docs.intro"></a><a class="item" data-muddle-anchor="docs.api"></a></body></html>';
+	const result = await predictLayout(html, { strict: true });
+	expect(result.groups).toEqual([{ name: "docs", anchors: ["docs.intro", "docs.api"] }]);
+	expect(result.html).toContain('data-muddle-group="docs"');
+	expect(result.html).toContain('--muddle-reflect-docs-count: 2');
+});
diff --git a/tests/router.test.ts b/tests/router.test.ts
new file mode 100644
index 0000000..775c458
--- /dev/null
+++ b/tests/router.test.ts
@@ -0,0 +1,106 @@
+import { describe, expect, test } from "bun:test";
+import { mkdtemp, mkdir, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { App } from "../core/app.ts";
+import { Controller, Module, Root, ViewRoot } from "../decorators/index.ts";
+import { View } from "../decorators/View.ts";
+import { TemplateEngine } from "../views/engine/runtime.ts";
+import { Views } from "../views/api.ts";
+
+/**
+ * Tests of the file based router: the relative views, the static roots of the
+ * controllers and the renderers that are applied inline.
+ */
+
+const dir = await mkdtemp(join(tmpdir(), "muddle-router-"));
+
+await mkdir(join(dir, "views"), { recursive: true });
+await mkdir(join(dir, "public"), { recursive: true });
+
+await writeFile(
+	join(dir, "views/index.spug"),
+	"props\n  title: string\n\nh1= title",
+	"utf8",
+);
+await writeFile(join(dir, "views/about.spug"), "h2 About", "utf8");
+await writeFile(
+	join(dir, "views/card.spug"),
+	"props\n  title: string\n  content?: () => string | Promise<string>\n\narticle.card\n  h3= title\n  if content\n    .card__content!= content()",
+	"utf8",
+);
+await writeFile(join(dir, "public/robots.txt"), "Allow: /", "utf8");
+
+describe("file based router", () => {
+	test("resolves the views of the view root", async () => {
+		const engine = new TemplateEngine({
+			viewsDir: join(dir, "views"),
+			root: dir,
+		});
+		const html = await engine.render("index.spug", { title: "Hello" });
+		expect(html).toBe("<h1>Hello</h1>");
+	});
+
+	test("derives the route from the view", async () => {
+		const html = await engine("about.spug");
+		expect(html).toBe("<h2>About</h2>");
+
+		async function engine(path: string): Promise<string> {
+			return new TemplateEngine({
+				viewsDir: join(dir, "views"),
+				root: dir,
+			}).render(path);
+		}
+	});
+
+	test("renders a renderer that is applied inline", async () => {
+		const engine = new TemplateEngine({
+			viewsDir: join(dir, "views"),
+			root: dir,
+		});
+		const html = await engine.render("card.spug", {
+			title: "Card",
+			content: async () => "<p>inline</p>",
+		});
+		expect(html).toContain("<h3>Card</h3>");
+		expect(html).toContain('<div class="card__content"><p>inline</p></div>');
+	});
+
+	test("serves the static root of a controller", async () => {
+		@Controller("/assets")
+		@Root(join(dir, "public"))
+		class AssetController {}
+
+		@Controller("/")
+		@ViewRoot(join(dir, "views"))
+		class PageController {
+			@View("index.spug")
+			index() {
+				return { title: "Hello" };
+			}
+		}
+
+		@Module({ controllers: [AssetController, PageController] })
+		class AppModule {}
+
+		const app = await App.create({
+			modules: [AppModule],
+			views: new Views({ viewsDir: join(dir, "views"), root: dir }),
+		});
+
+		const page = await app.fetch(new Request("http://localhost/"));
+		expect(page.status).toBe(200);
+		expect(await page.text()).toBe("<h1>Hello</h1>");
+
+		const asset = await app.fetch(new Request("http://localhost/assets/robots.txt"));
+		expect(asset.status).toBe(200);
+		expect(await asset.text()).toBe("Allow: /");
+
+		const missing = await app.fetch(
+			new Request("http://localhost/assets/nope.txt"),
+		);
+		expect(missing.status).toBe(404);
+
+		await rm(dir, { recursive: true, force: true });
+	});
+});
diff --git a/tests/sessions-format.test.ts b/tests/sessions-format.test.ts
new file mode 100644
index 0000000..05baf20
--- /dev/null
+++ b/tests/sessions-format.test.ts
@@ -0,0 +1,51 @@
+import { expect, test } from "bun:test";
+import { DatabaseSessionStore } from "../modules/database/src/sessions.ts";
+import { createSqliteDriver } from "../modules/database/src/adapters/sqlite.ts";
+import { App } from "../core/app.ts";
+import { authIntegration } from "../integrations/auth.ts";
+import { Controller } from "../decorators/Controller.ts";
+import { Route } from "../decorators/Route.ts";
+import { Auth } from "../decorators/Auth.ts";
+import { Module } from "../decorators/Module.ts";
+import { resolveConfig } from "../core/config.ts";
+import { formatSource } from "../core/format-source.ts";
+import plugin from "../modules/prettier-plugin/index.ts";
+import prettier from "prettier";
+import { compileCss } from "../views/css/index.ts";
+
+test("database sessions authenticate across app instances, revoke and consume atomically", async () => {
+	const driver = createSqliteDriver({ path: ":memory:" });
+	const store = await DatabaseSessionStore.create(driver);
+	@Controller("/") class PrivateController {
+		@Route("/private") @Auth() private() { return "protected"; }
+	}
+	@Module({ controllers: [PrivateController] }) class Root {}
+	const create = () => App.create({ config: resolveConfig(), modules: [Root], integrations: [authIntegration({ store, login: () => ({ id: "ada" }) })] });
+	try {
+		const first = await create();
+		const second = await create();
+		const login = await first.fetch(new Request("https://app.test/auth/login", { method: "POST", headers: { origin: "https://app.test", "content-type": "application/json" }, body: JSON.stringify({ email: "ada", password: "secret" }) }));
+		const cookie = login.headers.get("set-cookie")!;
+		expect((await second.fetch(new Request("https://app.test/private", { headers: { cookie } }))).status).toBe(200);
+		await first.fetch(new Request("https://app.test/auth/logout", { method: "POST", headers: { origin: "https://app.test", cookie } }));
+		expect((await second.fetch(new Request("https://app.test/private", { headers: { cookie } }))).status).toBe(401);
+		await store.set("transaction", { value: { verifier: "once" }, expires: Date.now() + 10000 });
+		expect((await Promise.all([store.consume("transaction"), store.consume("transaction")])).filter(Boolean)).toHaveLength(1);
+		await store.set("expired", { value: {}, expires: 1 });
+		expect(await store.get("expired")).toBeUndefined();
+	} finally { await driver.close(); }
+});
+
+test("Prettier delegates to muddle formatting and preserves compiled STCSS", async () => {
+	const source = '.card{padding:1rem;@predict mobile max-height; &:hover{opacity:0.8;}}';
+	const formatted = await formatSource(source, "stcss");
+	expect(await prettier.format(source, { parser: "stcss", plugins: [plugin] })).toBe(formatted);
+	expect(await formatSource(formatted, "stcss")).toBe(formatted);
+	expect(compileCss(formatted)).toBe(compileCss(source));
+	const spug = 'javascript!\nconst title={text:"Hello"}\nend\ndiv\n    p= title.text\n';
+	const next = await formatSource(spug, "spug");
+	expect(next).toContain('const title = { text: "Hello" };');
+	expect(await formatSource(next, "spug")).toBe(next);
+	const raw = 'script.\n  const text = "a  b";\n\n  console.log(text);\np End\n';
+	expect(await formatSource(raw, "spug")).toBe(raw);
+});
diff --git a/tests/stage.test.ts b/tests/stage.test.ts
new file mode 100644
index 0000000..c3f8c25
--- /dev/null
+++ b/tests/stage.test.ts
@@ -0,0 +1,22 @@
+import { expect, test } from "bun:test";
+import { compileTemplate } from "../views/engine/compiler.ts";
+import { lex } from "../views/engine/lexer.ts";
+import { parse } from "../views/engine/parser.ts";
+import { stage } from "../views/stage.ts";
+
+test("stage manager emits native scroll-driven scenes and portal transitions", () => {
+	const css = stage()
+		.scene("intro-in", { selector: ".intro", keyframes: { "0%": { opacity: 0, transform: "translateY(2rem)" }, "100%": { opacity: 1, transform: "translateY(0)" } }, range: "entry 0% cover 45%" })
+		.portal("main", { old: { opacity: 1 }, new: { opacity: 0 }, duration: "180ms" })
+		.css();
+	expect(css).toContain("animation-timeline: view()");
+	expect(css).toContain("animation-range: entry 0% cover 45%");
+	expect(css).toContain("::view-transition-old(main)");
+});
+
+test("portal blocks compile to named view-transition boundaries", () => {
+	const parsed = parse(lex("portal main\n  h1 Hello"));
+	const compiled = compileTemplate(parsed.nodes, { path: "/tmp/portal.spug", dir: "/tmp" });
+	expect(compiled.source).toContain("data-muddle-portal=\\\"main\\\"");
+	expect(compiled.source).toContain("view-transition-name:main");
+});
diff --git a/tests/templates-generator.test.ts b/tests/templates-generator.test.ts
new file mode 100644
index 0000000..97ddef2
--- /dev/null
+++ b/tests/templates-generator.test.ts
@@ -0,0 +1,29 @@
+import { expect, test } from "bun:test";
+import { mkdtemp, readFile, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { createTemplate } from "../core/templates.ts";
+
+test("creates the responsive documentation template", async () => {
+	const root = await mkdtemp(join(tmpdir(), "muddle-docs-"));
+	try {
+		const result = await createTemplate("docs", root);
+		expect(result.files.length).toBeGreaterThan(6);
+		const view = await readFile(join(root, "modules/app/views/index.spug"), "utf8");
+		const styles = await readFile(join(root, "styles/app.stcss"), "utf8");
+		expect(view).toContain("@docs.{section.id}");
+		expect(styles).toContain(":reflect(@docs)");
+	} finally {
+		await rm(root, { recursive: true, force: true });
+	}
+});
+
+test("creates the minimal template", async () => {
+	const root = await mkdtemp(join(tmpdir(), "muddle-minimal-"));
+	try {
+		await createTemplate("minimal", root);
+		expect(await readFile(join(root, "index.ts"), "utf8")).toContain("export const app");
+	} finally {
+		await rm(root, { recursive: true, force: true });
+	}
+});
diff --git a/tests/templates.test.ts b/tests/templates.test.ts
new file mode 100644
index 0000000..f96ed52
--- /dev/null
+++ b/tests/templates.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, test } from "bun:test";
+import { join, resolve } from "node:path";
+import { runTemplateTests } from "../views/testing.ts";
+import { createViews } from "../views/api.ts";
+import { parse } from "../views/engine/parser.ts";
+import { lex } from "../views/engine/lexer.ts";
+import { compileTemplate } from "../views/engine/compiler.ts";
+import { registerAmezing } from "../modules/amezing/index.ts";
+
+const root = resolve(import.meta.dir, "..");
+const sample = join(root, "samples/hello-world");
+
+describe("template tests", () => {
+	test("SPUG anchors emit generated relation identities", () => {
+		const nodes = parse(lex("nav\n  ul\n    li@hello1() First\n    li@row(item.id) Second"));
+		const firstAnchor = nodes.nodes[0]?.kind === "element"
+			? nodes.nodes[0].children[0]?.kind === "element"
+				? nodes.nodes[0].children[0].children[0]
+				: undefined
+			: undefined;
+		expect(firstAnchor).toMatchObject({ kind: "element", anchor: { name: "hello1" } });
+		const compiled = compileTemplate(nodes.nodes, { path: "/tmp/relations.spug", dir: "/tmp" });
+		expect(compiled.source).toContain('data-muddle-anchor');
+		expect(compiled.source).toContain('"hello1"');
+		expect(compiled.source).toContain('"row" + String(item.id)');
+		expect(compiled.source).not.toContain("__muddleRelations");
+	});
+
+	test("SPUG derives a dotted anchor leaf from composition scope", () => {
+		const nodes = parse(lex("a@docs.{section.id}(href='#' + section.id) Link"));
+		const compiled = compileTemplate(nodes.nodes, { path: "/tmp/reflective.spug", dir: "/tmp" });
+		expect(compiled.source).toContain('"docs." + String(section.id)');
+	});
+
+	test(
+		"the assertions of the templates pass",
+		async () => {
+			const views = createViews({ viewsDir: join(sample, "modules/app/views") });
+			registerAmezing(views);
+			const run = await runTemplateTests({
+				root: sample,
+				viewRoots: [join(sample, "modules/app/views")],
+				components: views.components,
+				locals: {
+					title: "muddle",
+					nav: [{ label: "Home", href: "/" }],
+				posts: [{ id: "test1", title: "Test1", excerpt: "Test1" }],
+				post: { id: "test1", title: "Test1", excerpt: "Test1" },
+				},
+			});
+
+			if (run.skipped) {
+				console.log(`muddle: template tests skipped, ${run.reason}`);
+				return;
+			}
+
+			expect(run.tested.length).toBeGreaterThan(0);
+			for (const failure of run.failures) {
+				console.error(`muddle: ${failure.key}\n${failure.error.message}`);
+			}
+			expect(run.failures).toEqual([]);
+		},
+		30_000,
+	);
+});
diff --git a/tests/views.test.ts b/tests/views.test.ts
new file mode 100644
index 0000000..59c34be
--- /dev/null
+++ b/tests/views.test.ts
@@ -0,0 +1,195 @@
+import { afterAll, describe, expect, test } from "bun:test";
+import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { TemplateEngine } from "../views/engine/runtime.ts";
+import { lex } from "../views/engine/lexer.ts";
+import { parse } from "../views/engine/parser.ts";
+
+/**
+ * Tests of the pug like template engine.
+ */
+
+const dir = await mkdtemp(join(tmpdir(), "muddle-views-"));
+
+async function template(name: string, source: string): Promise<string> {
+	await writeFile(join(dir, `${name}.spug`), source, "utf8");
+	return name;
+}
+
+const engine = new TemplateEngine({ viewsDir: dir, root: dir });
+
+afterAll(async () => {
+	await rm(dir, { recursive: true, force: true });
+});
+
+describe("lexer", () => {
+	test("reads tags, classes and attributes", () => {
+		const tokens = lex("a.card#top(href='/x' target='_blank') Link");
+		const tag = tokens[0];
+		expect(tag?.name).toBe("a");
+		expect(tag?.attributes?.map((entry) => entry.name)).toEqual([
+			"class",
+			"id",
+			"href",
+			"target",
+		]);
+		expect(tag?.text).toBe("Link");
+	});
+
+	test("reads a buffered expression", () => {
+		const tokens = lex("p= title");
+		expect(tokens[0]?.output).toBe("title");
+	});
+
+	test("reads an unbuffered expression", () => {
+		const tokens = lex("p!= title");
+		expect(tokens[0]?.output).toBe("title");
+		expect(tokens[0]?.escaped).toBe(false);
+	});
+
+	test("reads the frontmatter", () => {
+		const tokens = lex("---\nconst a = 1\n---\np Hello");
+		expect(tokens[0]?.type).toBe("frontmatter");
+		expect(tokens[0]?.value).toContain("const a = 1");
+	});
+
+	test("reads a props block", () => {
+		const parsed = parse(lex("props\n  title: string\n  body?: string\np Hi"));
+		const props = parsed.nodes.find((node) => node.kind === "props");
+		expect(props?.kind).toBe("props");
+		if (props?.kind === "props") {
+			expect(props.props.map((prop) => prop.name)).toEqual([
+				"title",
+				"body",
+			]);
+			expect(props.props[0]?.optional).toBe(false);
+			expect(props.props[1]?.optional).toBe(true);
+			expect(props.props[1]?.type).toBe("string");
+		}
+	});
+});
+
+describe("renderer", () => {
+	test("renders a tag with a class", async () => {
+		const name = await template("class", "div.card Hello");
+		expect(await engine.render(name)).toBe('<div class="card">Hello</div>');
+	});
+
+	test("escapes the text", async () => {
+		const name = await template("escape", "p= value");
+		expect(await engine.render(name, { value: "<b>" })).toBe(
+			"<p><b></p>",
+		);
+	});
+
+	test("renders unescaped output", async () => {
+		const name = await template("raw", "p!= value");
+		expect(await engine.render(name, { value: "<b>x</b>" })).toBe(
+			"<p><b>x</b></p>",
+		);
+	});
+
+	test("renders a condition", async () => {
+		const name = await template(
+			"condition",
+			"if value\n  p yes\nelse\n  p no",
+		);
+		expect(await engine.render(name, { value: true })).toBe("<p>yes</p>");
+		expect(await engine.render(name, { value: false })).toBe("<p>no</p>");
+	});
+
+	test("renders a loop", async () => {
+		const name = await template(
+			"loop",
+			"ul\n  each item in items\n    li= item",
+		);
+		expect(await engine.render(name, { items: ["a", "b"] })).toBe(
+			"<ul><li>a</li><li>b</li></ul>",
+		);
+	});
+
+	test("renders an attribute expression", async () => {
+		const name = await template(
+			"attribute",
+			"a(href=link.href class=link.active ? 'on' : 'off')= link.label",
+		);
+		expect(
+			await engine.render(name, {
+				link: { href: "/x", active: true, label: "Link" },
+			}),
+		).toBe('<a href="/x" class="on">Link</a>');
+	});
+
+	test("merges the classes of the shorthand and of the attribute", async () => {
+		const name = await template(
+			"classes",
+			"div.card(class=extra) Text",
+		);
+		expect(await engine.render(name, { extra: "wide" })).toBe(
+			'<div class="card wide">Text</div>',
+		);
+	});
+
+	test("renders a mixin", async () => {
+		const name = await template(
+			"mixin",
+			"mixin Item({ text })\n  li= text\nul\n  +Item({ text: 'a' })",
+		);
+		expect(await engine.render(name)).toBe("<ul><li>a</li></ul>");
+	});
+
+	test("renders an included partial", async () => {
+		await template("partial", "footer Footer");
+		const name = await template(
+			"include",
+			"div\n  include ./partial.spug",
+		);
+		expect(await engine.render(name)).toBe("<div><footer>Footer</footer></div>");
+	});
+
+	test("renders a layout with a block", async () => {
+		await template(
+			"layout",
+			"html\n  body\n    block content\n    footer Footer",
+		);
+		const name = await template(
+			"page",
+			"extends ./layout.spug\nblock content\n  p Page",
+		);
+		expect(await engine.render(name)).toBe(
+			"<html><body><p>Page</p><footer>Footer</footer></body></html>",
+		);
+	});
+
+	test("renders the frontmatter of a layout", async () => {
+		await template(
+			"front-layout",
+			"---\nconst greeting = 'Hello'\n---\np= greeting",
+		);
+		expect(await engine.render("front-layout")).toBe("<p>Hello</p>");
+	});
+
+	test("renders a component of the components directory", async () => {
+		const components = join(dir, "components");
+		await mkdir(components, { recursive: true });
+		await writeFile(
+			join(components, "card.spug"),
+			"article.card\n  h3= title",
+			"utf8",
+		);
+		const scoped = new TemplateEngine({
+			viewsDir: dir,
+			componentsDir: components,
+			root: dir,
+		});
+		expect(
+			await scoped.renderComponent("card", { title: "Card" }),
+		).toBe('<article class="card"><h3>Card</h3></article>');
+	});
+
+	test("keeps the html of the optional props empty", async () => {
+		const name = await template("optional", "p= missing");
+		expect(await engine.render(name)).toBe("<p></p>");
+	});
+});
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..ba61408
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,49 @@
+{
+	"exclude": ["node_modules", "shadcn-svelte"],
+	"compilerOptions": {
+		// Environment setup & latest features
+		"lib": ["ESNext"],
+		"target": "ESNext",
+		"module": "Preserve",
+		"moduleDetection": "force",
+		"jsx": "react-jsx",
+		"allowJs": true,
+		"types": ["bun"],
+
+		// Bundler mode
+		"moduleResolution": "bundler",
+		"paths": {
+			"muddle/formatter": ["./core/format-source.ts"],
+			"muddle/sessions": ["./core/sessions.ts"],
+			"muddle/contracts": ["./contracts/index.ts"],
+			"muddle/contracts/*": ["./contracts/*"],
+			"muddle/metadata": ["./core/metadata.ts"],
+			"muddle/markdown": ["./views/markdown.ts"],
+			"muddle/views": ["./views/api.ts"],
+			"muddle/stcss": ["./views/css/index.ts"],
+			"muddle": ["./index.ts"],
+			"@muddle/database": ["./modules/database/index.ts"],
+			"@muddle/shadcn": ["./modules/shadcn/index.ts"],
+			"@muddle/*": ["./*"]
+		},
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"noEmit": true,
+
+		"experimentalDecorators": true,
+		"emitDecoratorMetadata": true,
+
+		// Best practices
+		"strict": true,
+		"strictPropertyInitialization": false,
+		"skipLibCheck": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedIndexedAccess": true,
+		"noImplicitOverride": true,
+
+		// Some stricter flags (disabled by default)
+		"noUnusedLocals": false,
+		"noUnusedParameters": false,
+		"noPropertyAccessFromIndexSignature": false
+	}
+}
diff --git a/views/api.ts b/views/api.ts
new file mode 100644
index 0000000..a9fcb3c
--- /dev/null
+++ b/views/api.ts
@@ -0,0 +1,303 @@
+import { dirname, isAbsolute, join, resolve } from "node:path";
+import { existsSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import type { ViewDescriptor } from "../core/router.ts";
+import type { RequestContext } from "../contracts/typegen/http/request.ts";
+import type { RenderedView } from "../contracts/typegen/http/response.ts";
+import type { ViewPath, ViewPropsOf } from "../contracts/typegen/views.ts";
+import type { DeferredChunk } from "../contracts/typegen/http/response.ts";
+import { TemplateEngine, type RenderContext } from "./engine/runtime.ts";
+import { compileCss, styleTag } from "./css/index.ts";
+import type { TemplateContext } from "../core/context.ts";
+import type {
+	ComponentDefinition,
+	ComponentRegistry,
+	ServerComponent,
+} from "./components.ts";
+import type { MuddleHooks } from "./hooks.ts";
+
+/**
+ * Fluent, type generated view api.
+ *
+ * The props of a template are declared inside the template itself, the
+ * generator turns them into a contract and the builder only accepts the props
+ * of the selected template.
+ */
+
+export interface ViewsOptions {
+	context?: TemplateContext;
+	/** Directory holding the templates. */
+	viewsDir: string;
+	/** Root directory of the project, template paths are resolved against it. */
+	root?: string;
+	/** Directory holding the components, defaults to `viewsDir/components`. */
+	componentsDir?: string;
+	/** Server components registered on creation. */
+	components?: ComponentRegistry;
+	globalLayouts?: string[];
+	/** Contextual hooks shared by Spug rendering and STCSS component styles. */
+	hooks?: MuddleHooks;
+}
+
+export interface SpugComponentOptions {
+	template?: string;
+	style?: string | string[];
+	deferred?: boolean;
+}
+
+/** Options of a single render. */
+export interface RenderOptions {
+	/** Route parameters handed to the template. */
+	params?: Record<string, string>;
+	/** Additional locals handed to the template. */
+	locals?: Record<string, unknown>;
+}
+
+/** Result of a render. */
+export interface RenderResult {
+	/** Html of the shell. */
+	html: string;
+	/** Chunks rendered after the shell. */
+	deferred: DeferredChunk[];
+}
+
+export class ViewBuilder<P extends ViewPath = ViewPath> {
+	private readonly state: {
+		props: Record<string, unknown>;
+		params: Record<string, string>;
+		locals: Record<string, unknown>;
+	};
+
+	constructor(
+		private readonly views: Views,
+		private readonly path: P,
+		props: Record<string, unknown> = {},
+		params: Record<string, string> = {},
+		locals: Record<string, unknown> = {},
+	) {
+		this.state = {
+			props: { ...props },
+			params: { ...params },
+			locals: { ...locals },
+		};
+	}
+
+	/** Sets the props of the template. */
+	with(props: ViewPropsOf<P>): this {
+		Object.assign(this.state.props, props);
+		return this;
+	}
+
+	/** Sets the route parameters handed to the template. */
+	params(params: Record<string, string>): this {
+		Object.assign(this.state.params, params);
+		return this;
+	}
+
+	/** Sets additional locals handed to the template. */
+	locals(locals: Record<string, unknown>): this {
+		Object.assign(this.state.locals, locals);
+		return this;
+	}
+
+	/** Renders the template and awaits the deferred components. */
+	async render(): Promise<string> {
+		const result = await this.renderResult();
+		const deferred = await Promise.all(
+			result.deferred.map((chunk) => chunk.content),
+		);
+		if (deferred.length === 0) return result.html;
+		const appended = deferred
+			.map(
+				(html, index) =>
+					`<div data-muddle-deferred="${result.deferred[index]?.id ?? index}">${html}</div>`,
+			)
+			.join("");
+		return `${result.html}${appended}`;
+	}
+
+	/** Renders the template and returns the deferred chunks separately. */
+	async renderResult(): Promise<RenderResult> {
+		const context: RenderContext = {
+			locals: { ...this.state.locals, ...this.state.props },
+			params: this.state.params,
+			deferred: [],
+		};
+		const html = await this.views.engine.render(
+			this.path,
+			context.locals,
+			context,
+		);
+		return { html, deferred: context.deferred };
+	}
+
+	/**
+	 * Renders the template as a stream.
+	 *
+	 * The shell is sent first, the deferred components follow as soon as they
+	 * are rendered. No javascript is required, the browser renders the chunks
+	 * while they arrive.
+	 */
+	async renderStream(): Promise<ReadableStream<Uint8Array>> {
+		const { html, deferred } = await this.renderResult();
+		const encoder = new TextEncoder();
+		return new ReadableStream<Uint8Array>({
+			async start(controller) {
+				controller.enqueue(encoder.encode(html));
+				for (const chunk of deferred) {
+					const content = await chunk.content;
+					controller.enqueue(
+						encoder.encode(
+							`<div data-muddle-deferred="${chunk.id}">${content}</div>`,
+						),
+					);
+				}
+				controller.close();
+			},
+		});
+	}
+}
+
+export class Views {
+	readonly engine: TemplateEngine;
+	readonly components: ComponentRegistry;
+	private readonly hooks?: MuddleHooks;
+
+	constructor(options: ViewsOptions) {
+		this.hooks = options.hooks;
+		this.components = options.components ?? new Map();
+		for (const [name, component] of options.context?.imports ?? []) this.components.set(name, { name, component: component as ServerComponent, deferred: false });
+		this.engine = new TemplateEngine({
+			viewsDir: options.viewsDir,
+			componentsDir: options.componentsDir,
+			root: options.root,
+			components: this.components,
+			globalLayouts: options.globalLayouts,
+			hooks: options.hooks,
+		});
+	}
+
+	/** Registers a server component. */
+	component(
+		name: string,
+		component: ServerComponent,
+		options: { deferred?: boolean } = {},
+	): this {
+		const definition: ComponentDefinition = {
+			name,
+			component,
+			deferred: options.deferred === true,
+		};
+		this.components.set(name, definition);
+		return this;
+	}
+
+	/** Registers a component rendered by a SPUG template and optional STCSS files. */
+	spugComponent(name: string, options: SpugComponentOptions = {}): this {
+		const template = options.template ?? name;
+		const styles = Array.isArray(options.style) ? options.style : options.style ? [options.style] : [];
+		return this.component(name, {
+			render: async (props) => {
+				const html = await this.engine.renderComponent(template, props);
+				const css = await Promise.all(styles.map(async (style) => {
+					const path = resolve(this.componentsDir, style);
+					return existsSync(path) ? compileCss(await readFile(path, "utf8"), { hooks: this.hooks }) : "";
+				}));
+				return `${css.filter(Boolean).map(styleTag).join("")}${html}`;
+			},
+		}, { deferred: options.deferred });
+	}
+
+	/** Starts a fluent render of a template. */
+	view<P extends ViewPath>(path: P): ViewBuilder<P> {
+		return new ViewBuilder<P>(this, path);
+	}
+
+	/** Renders a template with the given props. */
+	async render<P extends ViewPath>(
+		path: P,
+		props: ViewPropsOf<P>,
+		options: RenderOptions = {},
+	): Promise<string> {
+		const builder = this.view(path).with(props);
+		if (options.params) builder.params(options.params);
+		if (options.locals) builder.locals(options.locals);
+		return builder.render();
+	}
+
+	/**
+	 * Renders a template by its path on disk.
+	 *
+	 * Used by the `@View()` decorator, therefore the path is resolved relative
+	 * to the project.
+	 */
+	async renderFile(
+		path: string,
+		props: Record<string, unknown> = {},
+		options: RenderOptions = {},
+	): Promise<string> {
+		const context: RenderContext = {
+			locals: { ...options.locals, ...props },
+			params: options.params ?? {},
+			deferred: [],
+		};
+		const html = await this.engine.render(path, context.locals, context);
+		const deferred = await Promise.all(
+			context.deferred.map((chunk) => chunk.content),
+		);
+		if (deferred.length === 0) return html;
+		const appended = deferred
+			.map(
+				(html, index) =>
+					`<div data-muddle-deferred="${context.deferred[index]?.id ?? index}">${html}</div>`,
+			)
+			.join("");
+		return `${html}${appended}`;
+	}
+
+	/**
+	 * Renders a view descriptor of a route.
+	 *
+	 * The descriptor of a `@View()` decorator carries an absolute path, the
+	 * descriptor of a controller carries the key of a view.
+	 */
+	async renderDescriptor(
+		descriptor: ViewDescriptor,
+		context: RequestContext,
+	): Promise<string | RenderedView> {
+		const props = (descriptor.props ?? {}) as Record<string, unknown>;
+		if (isAbsolute(descriptor.template)) {
+			const html = await this.renderFile(descriptor.template, props, {
+				params: context.params,
+				locals: { ...context.locals },
+			});
+			return html;
+		}
+		const builder = this.view(
+			descriptor.template as Parameters<Views["view"]>[0],
+		).with(props as never);
+		builder.params(context.params);
+		builder.locals(context.locals);
+		return builder.renderResult();
+	}
+
+	/** Directory of the templates. */
+	get viewsDir(): string {
+		return this.engine.viewsDir;
+	}
+
+	/** Directory of the components. */
+	get componentsDir(): string {
+		return this.engine.componentsDir;
+	}
+}
+
+/** Creates the views of a project. */
+export function createViews(options: ViewsOptions): Views {
+	return new Views(options);
+}
+
+/** Resolves a template path relative to the views directory. */
+export function resolveTemplatePath(viewsDir: string, path: string): string {
+	return join(resolve(viewsDir), dirname(path), path);
+}
diff --git a/views/components.ts b/views/components.ts
new file mode 100644
index 0000000..3cecd4f
--- /dev/null
+++ b/views/components.ts
@@ -0,0 +1,79 @@
+import type { ComponentMetadata } from "../decorators/Component.ts";
+
+/**
+ * Server components.
+ *
+ * A server component is a class that renders html on the server. It behaves
+ * like a template, but it is written in TypeScript, may inject services and
+ * may be asynchronous.
+ */
+
+/** Context handed to a server component. */
+export interface ComponentContext {
+	/**
+	 * Defers a chunk of html until the end of the response.
+	 *
+	 * The response is streamed, therefore the shell reaches the browser
+	 * before the deferred content is rendered.
+	 */
+	defer(id: string, content: string | Promise<string>): void;
+	/** Locals of the current request. */
+	locals: Record<string, unknown>;
+	/** Route parameters of the current request. */
+	params: Record<string, string>;
+}
+
+/** Declarative output from a decorated server component. */
+export interface SpugComponentRender {
+	/** Component template name or path, resolved as SPUG. */
+	spug: string;
+	/** STCSS source or a stylesheet path relative to the component directory. */
+	stcss?: string | string[];
+	/** Props merged with the invocation props before rendering the SPUG template. */
+	props?: Record<string, unknown>;
+}
+
+/** Contract of a server component. */
+export interface ServerComponent {
+	/** Renders the component. */
+	render(
+		props: Record<string, unknown>,
+		context: ComponentContext,
+	): Promise<string | SpugComponentRender> | string | SpugComponentRender;
+}
+
+export function isSpugComponentRender(value: unknown): value is SpugComponentRender {
+	return typeof value === "object" && value !== null && typeof (value as { spug?: unknown }).spug === "string";
+}
+
+/** A registered server component. */
+export interface ComponentDefinition {
+	/** Name used inside the templates. */
+	name: string;
+	component: ServerComponent;
+	/** `true` when the component is rendered after the shell. */
+	deferred: boolean;
+	description?: string;
+	params?: Record<string, string>;
+	/** Decorated components must return a SPUG and STCSS composition. */
+	requiresSpug?: boolean;
+}
+
+/** Registry of the server components of an application. */
+export type ComponentRegistry = Map<string, ComponentDefinition>;
+
+/** Builds a component definition from a decorated class. */
+export function defineComponent(
+	name: string,
+	component: ServerComponent,
+	metadata?: ComponentMetadata,
+): ComponentDefinition {
+	return {
+		name,
+		component,
+		deferred: metadata?.deferred === true,
+		description: metadata?.description,
+		params: metadata?.params,
+		requiresSpug: metadata !== undefined,
+	};
+}
diff --git a/views/css/compiler.ts b/views/css/compiler.ts
new file mode 100644
index 0000000..0112243
--- /dev/null
+++ b/views/css/compiler.ts
@@ -0,0 +1,427 @@
+import { builtinFunctions, evaluate, type Scope } from "./evaluate.ts";
+import {
+	parseCss,
+	type CssAtRule,
+	type CssMixin,
+	type CssNode,
+} from "./parser.ts";
+import { createHooks, type MuddleHooks } from "../hooks.ts";
+
+export interface CompileOptions {
+	/** Variables added to the stylesheet, e.g. from the theme. */
+	variables?: Record<string, string>;
+	/** Named viewport breakpoints used by `@responsive`. */
+	breakpoints?: Record<string, string>;
+	/** Receives the `@measure` prediction targets of the stylesheet. */
+	measured?: string[];
+	/** Contextual STCSS expansions, including optional application-defined hooks. */
+	hooks?: MuddleHooks;
+}
+
+interface Context {
+	scope: Scope;
+	mixins: Map<string, CssMixin>;
+	breakpoints: Record<string, string>;
+	measured: string[];
+	hooks: MuddleHooks;
+}
+
+/** Compiles a stylesheet into plain css. */
+export function compileCss(
+	source: string,
+	options: CompileOptions = {},
+): string {
+	const scripted = source.replace(/(?:javascript|typescript)!\s*\n([\s\S]*?)\nend\s*/g, (_match, code: string) => {
+		for (const entry of code.matchAll(/(?:const|let)\s+([\w-]+)\s*=\s*([^;\n]+);?/g)) {
+			options.variables ??= {};
+			options.variables[`$${entry[1]}`] = String(entry[2]).replace(/^['"]|['"]$/g, "");
+		}
+		return "";
+	});
+	const stylesheet = parseCss(scripted);
+	const context: Context = {
+		scope: { ...(options.variables ?? {}) },
+		mixins: new Map(stylesheet.mixins.map((mixin) => [mixin.name, mixin])),
+		breakpoints: options.breakpoints ?? {},
+		measured: options.measured ?? [],
+		hooks: options.hooks ?? createHooks(),
+	};
+
+	for (const variable of stylesheet.variables) {
+		context.scope[variable.name] = resolveValue(variable.value, context);
+	}
+
+	const compiled = compileNodes(stylesheet.rules, "", context, 0);
+	return context.measured.length > 0
+		? `/* muddle-predict: ${context.measured.join(" | ")} */\n${compiled}`
+		: compiled;
+}
+
+function compileNodes(
+	nodes: CssNode[],
+	selector: string,
+	context: Context,
+	depth: number,
+): string {
+	const output: string[] = [];
+
+	for (const node of nodes) {
+		if (node.kind === "rule") {
+			const resolved = resolveSelector(
+				resolveValue(node.selector, context),
+				selector,
+			);
+			const declarationInput = node.declarations.map((declaration) => ({ ...declaration }));
+			const expansions = context.hooks.expandStcssDeclarations({
+				selector: resolved,
+				declarations: declarationInput,
+				depth,
+				resolve: (value) => resolveValue(value, context),
+			});
+			const declarations = declarationInput.map((declaration) =>
+				`${declaration.property}: ${resolveValue(declaration.value, context)};`,
+			);
+			const nested = compileNodes(node.children, resolved, context, depth + 1);
+
+			const indent = "\t".repeat(depth);
+			if (resolved.length === 0) {
+				for (const declaration of declarations) {
+					output.push(`${indent}${declaration}`);
+				}
+				if (expansions.length > 0) output.push(...expansions);
+				if (nested.length > 0) output.push(nested);
+				continue;
+			}
+			if (declarations.length > 0) {
+				output.push(`${indent}${resolved} {`);
+				for (const declaration of declarations) {
+					output.push(`${indent}\t${declaration}`);
+				}
+				output.push(`${indent}}`);
+			}
+			if (expansions.length > 0) {
+				if (declarations.length > 0) output.push("");
+				output.push(...expansions);
+			}
+			if (nested.length > 0) {
+				if (declarations.length > 0 || expansions.length > 0) output.push("");
+				output.push(nested);
+			}
+			continue;
+		}
+
+		output.push(compileAtRule(node, selector, context, depth));
+	}
+
+	return output.filter((entry) => entry.length > 0).join("\n");
+}
+
+function compileAtRule(
+	node: CssAtRule,
+	selector: string,
+	context: Context,
+	depth: number,
+): string {
+	const indent = "\t".repeat(depth);
+	const expanded = context.hooks.expandStcssAtRule({
+		name: node.name,
+		params: node.params,
+		selector,
+		depth,
+		children: node.children,
+		resolve: (value) => resolveValue(value, context),
+		renderChildren: () => compileNodes(node.children, selector, context, depth + 1),
+	});
+	if (expanded !== undefined) return expanded;
+
+	switch (node.name) {
+		case "each": {
+			const match = /^\$([\w-]+)\s+in\s+(.+)$/.exec(node.params);
+			if (!match) return "";
+			const name = `$${match[1] as string}`;
+			const items = splitValues(match[2] as string);
+			const output: string[] = [];
+			for (const item of items) {
+				const scope = { ...context.scope };
+				scope[name] = resolveValue(item, context);
+				const nested = compileNodes(
+					node.children,
+					selector,
+					{ ...context, scope },
+					depth,
+				);
+				if (nested.length > 0) output.push(nested);
+			}
+			return output.join("\n");
+		}
+		case "for": {
+			const match = /^\$([\w-]+)\s+from\s+([\d.]+)\s+through\s+([\d.]+)$/.exec(
+				node.params,
+			);
+			if (!match) return "";
+			const name = `$${match[1] as string}`;
+			const from = Number(match[2]);
+			const to = Number(match[3]);
+			const output: string[] = [];
+			for (let value = from; value <= to; value += 1) {
+				const scope = { ...context.scope };
+				scope[name] = String(value);
+				const nested = compileNodes(
+					node.children,
+					selector,
+					{ ...context, scope },
+					depth,
+				);
+				if (nested.length > 0) output.push(nested);
+			}
+			return output.join("\n");
+		}
+		case "include": {
+			const match = /^([\w-]+)\s*(?:\(([\s\S]*)\))?$/.exec(node.params.trim());
+			if (!match) return "";
+			const mixin = context.mixins.get(match[1] as string);
+			if (!mixin) {
+				throw new Error(`Unknown mixin "${match[1] as string}"`);
+			}
+			const arguments_ = splitList(match[2] ?? "");
+			const scope = { ...context.scope };
+			mixin.params.forEach((param, index) => {
+				const value = arguments_[index] ?? param.value;
+				if (value !== undefined) {
+					scope[param.name] = resolveValue(value, context);
+				}
+			});
+			return compileNodes(
+				mixin.children,
+				selector,
+				{ ...context, scope },
+				depth,
+			);
+		}
+		case "view-transition": {
+			const name = node.params.trim() || "none";
+			return selector ? `${indent}${selector} {\n${indent}\tview-transition-name: ${name};\n${indent}}` : "";
+		}
+		case "predict": {
+		const mobile = /\bmobile\b/.test(node.params);
+		const properties = node.params.replace(/\bmobile\b/g, "").trim() || "transform, max-width, max-height";
+		const transitions = properties.split(/[\s,]+/).filter(Boolean).map((property) => `${property} var(--muddle-predict-duration, 280ms) var(--muddle-predict-easing, ease)`).join(", ");
+		const css = selector ? `${indent}${selector} {\n${indent}\ttransition: ${transitions};\n${indent}}` : "";
+		return mobile ? `@media (max-width: 48rem) {\n${css}\n}` : css;
+		}
+		case "measure": {
+			const spec = node.params.trim();
+			const candidates = spec.length > 0 ? splitList(spec) : [selector];
+			for (const candidate of candidates) {
+				if (candidate.length === 0) continue;
+				const resolved = resolveValue(candidate, context);
+				const related = resolveRelationSelector(resolved).replace(/@([\w.-]+)/g, (_all, name: string) => `[data-muddle-anchor="${name}"]`);
+				context.measured.push(related);
+			}
+			return "";
+		}
+		case "media":
+		case "supports": {
+			const nested = compileNodes(node.children, selector, context, depth + 1);
+			if (nested.length === 0) return "";
+			return `${indent}@${node.name} ${node.params} {\n${nested}\n${indent}}`;
+		}
+		case "responsive": {
+			const width = context.breakpoints[node.params.trim()];
+			if (!width) throw new Error(`Unknown responsive breakpoint "${node.params.trim()}"`);
+			const nested = compileNodes(node.children, selector, context, depth + 1);
+			return nested ? `${indent}@media (min-width: ${width}) {\n${nested}\n${indent}}` : "";
+		}
+		default:
+			return "";
+	}
+}
+
+
+/** Resolves the selector of a nested rule. */
+export function resolveSelector(selector: string, parent: string): string {
+	selector = resolveRelationSelector(selector);
+	const parts = selector
+		.split(",")
+		.map((part) => part.trim())
+		.filter((part) => part.length > 0)
+		.map((part) => {
+			if (part.includes("&")) {
+				return part.replace(/&/g, parent);
+			}
+			return parent ? `${parent} ${part}` : part;
+		});
+	return parts.join(", ");
+}
+
+/** Resolves the variables, the interpolations and the functions of a value. */
+export function resolveValue(value: string, context: Context): string {
+	let result = value;
+
+	result = result.replace(/#\{([^}]*)\}/g, (_match, expression: string) => {
+		return evaluate(expression, { scope: context.scope });
+	});
+	result = result.replace(/d(["'])(.*?)\1/g, (_match, quote: string, name: string) => {
+		const resolved = name.replace(/\{([^}]*)\}/g, (_entry: string, expression: string) => evaluate(expression, { scope: context.scope }));
+		return `d${quote}${resolved}${quote}`;
+	});
+
+	result = result.replace(/\$[\w-]+/g, (match) => {
+		const resolved = context.scope[match];
+		return resolved ?? match;
+	});
+
+	result = replaceFunctions(result, context);
+	result = resolveRelationValue(result);
+
+	return result.replace(/\s+/g, " ").trim();
+}
+
+function relationKey(name: string): string {
+	return name.replace(/[^a-zA-Z0-9_-]/g, "_");
+}
+
+function relationState(name: string, state: string): string {
+	const anchor = `[data-muddle-anchor="${name}"]`;
+	if (state === "clicked") return `${anchor}:active`;
+	if (state === "active") return `${anchor}:active`;
+	if (state === "focus") return `${anchor}:focus-visible`;
+	return `${anchor}[data-muddle-${state}]`;
+}
+
+/** Turns relation pseudo selectors into native relational selectors. */
+function resolveRelationSelector(selector: string): string {
+	let result = selector;
+	result = result.replace(/:reflect\(\s*@([\w.-]+)\s*\)/g, (_all, group: string) =>
+		`[data-muddle-anchor^="${group}."]`,
+	);
+	result = result.replace(/:with\(\s*@([\w.-]+):([\w-]+)\s*\)/g, (_all, name: string, state: string) =>
+		`:has(${relationState(name, state)})`,
+	);
+	result = result.replace(/([^,{]+?):when\(\s*([^\s()]+)\s+@([\w.-]+):([\w-]+)\s*\)/g, (_all, target: string, root: string, name: string, state: string) => {
+		const normalized = target.trim();
+		const suffix = normalized.startsWith(root)
+			? normalized.slice(root.length).trim()
+			: normalized;
+		return `${root}:has(${relationState(name, state)})${suffix ? ` ${suffix}` : ""}`;
+	});
+	return result.replace(/@([\w.-]+):(active|clicked|focus)\b/g, (_all, name: string, state: string) => relationState(name, state));
+}
+
+/** Resolves precomputed anchor metrics and live computed-style mirrors. */
+function resolveRelationValue(value: string): string {
+	const self = value.replace(/\$self\[([a-zA-Z][\w-]*)\]/g, (_all, property: string) => {
+		return `var(--muddle-self-${relationKey(property)})`;
+	});
+
+	let result = self.replace(/\$(?:relate|refer)(?:\[([\w-]+)\])?\(\s*d?["']?@([^\s)"']+)["']?\s*\)/g, (_all, field: string | undefined, name: string) => {
+		const metric = ({ left: "x", top: "y" } as Record<string, string>)[field ?? ""] ?? field ?? "x";
+		return `var(--muddle-relate-${relationKey(name)}-${metric})`;
+	});
+	result = result.replace(/@([A-Za-z_][\w.-]*)\.computed\.([\w-]+)(?:\.replicate\(&\))?/g, (_all, name: string, property: string) => {
+		const cssProperty = property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+		return `var(--muddle-relate-${relationKey(name)}-${cssProperty})`;
+	});
+	result = result.replace(/@([A-Za-z_][\w-]*)\.([\w-]+)(?:\.replicate\(&\))?/g, (_all, name: string, property: string) => {
+		const cssProperty = property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+		return `var(--muddle-relate-${relationKey(name)}-${cssProperty})`;
+	});
+	return result;
+}
+
+function replaceFunctions(value: string, context: Context): string {
+	let result = value;
+	let index = result.indexOf("(");
+
+	while (index !== -1) {
+		const nameMatch = /(\$?[\w-]+)\s*$/.exec(result.slice(0, index));
+		if (!nameMatch) {
+			index = result.indexOf("(", index + 1);
+			continue;
+		}
+		const name = nameMatch[1] as string;
+		const depth = matchParens(result, index);
+		if (depth === -1) break;
+		const inner = result.slice(index + 1, depth);
+		if (name.startsWith("$")) {
+			const expandedCalculation = context.hooks.expandStcssCalculation(name.slice(1), inner, (entry) => resolveValue(entry, context));
+			if (expandedCalculation !== undefined) {
+				result = `${result.slice(0, index - name.length)}${expandedCalculation}${result.slice(depth + 1)}`;
+				index = result.indexOf("(", index + 1);
+				continue;
+			}
+		}
+		const expanded = context.hooks.expandStcssValue(name, inner, (value) => resolveValue(value, context));
+		if (expanded !== undefined) {
+			result = `${result.slice(0, index - name.length)}${expanded}${result.slice(depth + 1)}`;
+			index = result.indexOf("(", index + 1);
+			continue;
+		}
+		if (!builtinFunctions[name]) {
+			// unknown functions are css functions, they stay untouched
+			index = result.indexOf("(", index + 1);
+			continue;
+		}
+		const evaluated = evaluate(`${name}(${inner})`, { scope: context.scope });
+		result = `${result.slice(0, index - name.length)}${evaluated}${result.slice(depth + 1)}`;
+		index = result.indexOf("(", index + 1);
+	}
+
+	return context.hooks.expandStcssCalculationTokens(result, (entry) => resolveValue(entry, context));
+}
+
+function matchParens(source: string, start: number): number {
+	let depth = 0;
+	for (let index = start; index < source.length; index++) {
+		const char = source[index];
+		if (char === "(") depth += 1;
+		if (char === ")") {
+			depth -= 1;
+			if (depth === 0) return index;
+		}
+	}
+	return -1;
+}
+
+/**
+ * Splits a list of values.
+ *
+ * The values are separated by commas or by spaces, e.g. `1 2 3` and
+ * `red, green, blue`.
+ */
+function splitValues(value: string): string[] {
+	const range = /^\[\s*(-?\d+)\s*\.\.\s*(-?\d+)\s*\]$/.exec(value.trim());
+	if (range) {
+		const from = Number(range[1]);
+		const to = Number(range[2]);
+		const step = from <= to ? 1 : -1;
+		const values: string[] = [];
+		for (let current = from; step > 0 ? current <= to : current >= to; current += step) values.push(String(current));
+		return values;
+	}
+	const items: string[] = [];
+	for (const part of splitList(value)) {
+		for (const entry of part.split(/\s+/)) {
+			if (entry.length > 0) items.push(entry);
+		}
+	}
+	return items;
+}
+
+function splitList(value: string): string[] {
+	const items: string[] = [];
+	let depth = 0;
+	let current = "";
+	for (const char of value) {
+		if (char === "(") depth += 1;
+		if (char === ")") depth -= 1;
+		if (char === "," && depth === 0) {
+			items.push(current.trim());
+			current = "";
+			continue;
+		}
+		current += char;
+	}
+	if (current.trim().length > 0) items.push(current.trim());
+	return items;
+}
diff --git a/views/css/evaluate.ts b/views/css/evaluate.ts
new file mode 100644
index 0000000..862fe5a
--- /dev/null
+++ b/views/css/evaluate.ts
@@ -0,0 +1,318 @@
+/**
+ * Expression evaluation of the structured css.
+ *
+ * The evaluator understands numbers, strings, variables, arithmetic and a
+ * small set of colour functions. It is used by the interpolations
+ * (`#{$gap * 2}`) and by the functions of the stylesheets.
+ */
+
+export type Scope = Record<string, string>;
+
+export interface EvaluateOptions {
+	/** Variables of the current scope. */
+	scope?: Scope;
+	/** Names of the mixins that can be called. */
+	functions?: Record<string, (...args: string[]) => string>;
+}
+
+type Token =
+	| { type: "number"; value: number }
+	| { type: "string"; value: string }
+	| { type: "variable"; value: string }
+	| { type: "operator"; value: string }
+	| { type: "function"; value: string }
+	| { type: "punctuation"; value: string };
+
+const OPERATORS = ["+", "-", "*", "/", "(", ")", ","];
+
+function tokenize(source: string): Token[] {
+	const tokens: Token[] = [];
+	let index = 0;
+
+	while (index < source.length) {
+		const char = source[index] as string;
+
+		if (/\s/.test(char)) {
+			index += 1;
+			continue;
+		}
+
+		if (char === "$") {
+			const match = /^\$[\w-]+/.exec(source.slice(index));
+			if (!match) throw new Error(`Invalid variable in "${source}"`);
+			tokens.push({ type: "variable", value: match[0] });
+			index += match[0].length;
+			continue;
+		}
+
+		if (char === "#") {
+			const match = /^#[\da-fA-F]{3,8}/.exec(source.slice(index));
+			if (match) {
+				tokens.push({ type: "string", value: match[0] });
+				index += match[0].length;
+				continue;
+			}
+		}
+
+		if (/[\d.]/.test(char)) {
+			const match = /^[\d.]+/.exec(source.slice(index));
+			if (!match) throw new Error(`Invalid number in "${source}"`);
+			tokens.push({ type: "number", value: Number(match[0]) });
+			index += match[0].length;
+			continue;
+		}
+
+		if (/[a-zA-Z_]/.test(char)) {
+			const match = /^[a-zA-Z_][\w-]*/.exec(source.slice(index));
+			if (!match) throw new Error(`Invalid identifier in "${source}"`);
+			const word = match[0];
+			let cursor = index + word.length;
+			while (cursor < source.length && /\s/.test(source[cursor] as string)) {
+				cursor += 1;
+			}
+			if (source[cursor] === "(") {
+				tokens.push({ type: "function", value: word });
+				index = cursor;
+				continue;
+			}
+			tokens.push({ type: "string", value: word });
+			index += word.length;
+			continue;
+		}
+
+		if (char === '"' || char === "'") {
+			const end = source.indexOf(char, index + 1);
+			const value =
+				end === -1 ? source.slice(index + 1) : source.slice(index + 1, end);
+			tokens.push({ type: "string", value });
+			index = end === -1 ? source.length : end + 1;
+			continue;
+		}
+
+		const operator = OPERATORS.find((candidate) =>
+			source.startsWith(candidate, index),
+		);
+		if (operator) {
+			tokens.push({
+				type:
+					operator === "(" || operator === ")" || operator === ","
+						? "punctuation"
+						: "operator",
+				value: operator,
+			});
+			index += operator.length;
+			continue;
+		}
+
+		throw new Error(`Unexpected character "${char}" in "${source}"`);
+	}
+
+	return tokens;
+}
+
+class Parser {
+	private index = 0;
+
+	constructor(
+		private readonly tokens: Token[],
+		private readonly options: EvaluateOptions,
+	) {}
+
+	parse(): string {
+		const value = this.expression();
+		if (this.index < this.tokens.length) {
+			throw new Error("Unexpected token in expression");
+		}
+		return value;
+	}
+
+	private peek(): Token | undefined {
+		return this.tokens[this.index];
+	}
+
+	private expression(): string {
+		let left = this.term();
+		while (this.peek()?.type === "operator") {
+			const operator = (this.peek() as Token).value;
+			if (operator !== "+" && operator !== "-") break;
+			this.index += 1;
+			const right = this.term();
+			left = operator === "+" ? add(left, right) : subtract(left, right);
+		}
+		return left;
+	}
+
+	private term(): string {
+		let left = this.factor();
+		while (this.peek()?.type === "operator") {
+			const operator = (this.peek() as Token).value;
+			if (operator !== "*" && operator !== "/") break;
+			this.index += 1;
+			const right = this.factor();
+			left = operator === "*" ? multiply(left, right) : divide(left, right);
+		}
+		return left;
+	}
+
+	private factor(): string {
+		const token = this.peek();
+		if (!token) throw new Error("Unexpected end of expression");
+		this.index += 1;
+
+		if (token.type === "number") return String(token.value);
+		if (token.type === "string") {
+			if (token.value.startsWith("#")) return token.value;
+			return token.value;
+		}
+		if (token.type === "variable") {
+			const value = this.options.scope?.[token.value];
+			if (value === undefined) {
+				throw new Error(`Unknown variable ${token.value}`);
+			}
+			return value;
+		}
+		if (token.type === "punctuation" && token.value === "(") {
+			const value = this.expression();
+			const closing = this.peek();
+			if (closing?.type === "punctuation" && closing.value === ")") {
+				this.index += 1;
+			}
+			return value;
+		}
+		if (token.type === "function") {
+			const args: string[] = [];
+			const opening = this.peek();
+			if (opening?.type === "punctuation" && opening.value === "(") {
+				this.index += 1;
+				while (this.index < this.tokens.length) {
+					const current = this.peek() as Token;
+					if (current.type === "punctuation" && current.value === ")") {
+						this.index += 1;
+						break;
+					}
+					if (current.type === "punctuation" && current.value === ",") {
+						this.index += 1;
+						continue;
+					}
+					args.push(this.expression());
+				}
+			}
+			const fn = this.options.functions?.[token.value];
+			if (!fn) throw new Error(`Unknown function ${token.value}`);
+			return fn(...args);
+		}
+
+		throw new Error(`Unexpected token ${token.value}`);
+	}
+}
+
+function toNumber(value: string): number {
+	const numeric = Number(value);
+	return Number.isNaN(numeric) ? 0 : numeric;
+}
+
+function add(left: string, right: string): string {
+	if (left.startsWith("#") || right.startsWith("#")) {
+		return `${left}${right}`;
+	}
+	const result = toNumber(left) + toNumber(right);
+	return Number.isInteger(result) ? String(result) : String(result);
+}
+
+function subtract(left: string, right: string): string {
+	const result = toNumber(left) - toNumber(right);
+	return Number.isInteger(result) ? String(result) : String(result);
+}
+
+function multiply(left: string, right: string): string {
+	const result = toNumber(left) * toNumber(right);
+	return Number.isInteger(result) ? String(result) : String(result);
+}
+
+function divide(left: string, right: string): string {
+	const result = toNumber(left) / toNumber(right);
+	return Number.isInteger(result) ? String(result) : String(result);
+}
+
+/** Parses a colour into its channels. */
+export function parseColor(value: string):
+	| {
+			r: number;
+			g: number;
+			b: number;
+	  }
+	| undefined {
+	const hex = value.replace("#", "");
+	if (hex.length !== 3 && hex.length !== 6) return undefined;
+	const expanded =
+		hex.length === 3
+			? hex
+					.split("")
+					.map((char) => char + char)
+					.join("")
+			: hex;
+	return {
+		r: Number.parseInt(expanded.slice(0, 2), 16),
+		g: Number.parseInt(expanded.slice(2, 4), 16),
+		b: Number.parseInt(expanded.slice(4, 6), 16),
+	};
+}
+
+function toHex(value: number): string {
+	return Math.max(0, Math.min(255, Math.round(value)))
+		.toString(16)
+		.padStart(2, "0");
+}
+
+/** Darkens a colour by the given percentage. */
+export function darken(color: string, amount: number): string {
+	const parsed = parseColor(color);
+	if (!parsed) return color;
+	const factor = 1 - amount / 100;
+	return `#${toHex(parsed.r * factor)}${toHex(parsed.g * factor)}${toHex(parsed.b * factor)}`;
+}
+
+/** Lightens a colour by the given percentage. */
+export function lighten(color: string, amount: number): string {
+	const parsed = parseColor(color);
+	if (!parsed) return color;
+	const factor = 1 + amount / 100;
+	return `#${toHex(parsed.r * factor)}${toHex(parsed.g * factor)}${toHex(parsed.b * factor)}`;
+}
+
+/** Builds a rgba colour. */
+export function rgba(color: string, alpha: number): string {
+	const parsed = parseColor(color);
+	if (!parsed) return color;
+	return `rgba(${parsed.r}, ${parsed.g}, ${parsed.b}, ${alpha})`;
+}
+
+/** The functions available inside a stylesheet. */
+export const builtinFunctions: Record<string, (...args: string[]) => string> = {
+	darken: (...args) =>
+		String(args[0]).startsWith("#")
+			? darken(String(args[0]), Number(args[1]))
+			: `darken(${args.join(", ")})`,
+	lighten: (...args) =>
+		String(args[0]).startsWith("#")
+			? lighten(String(args[0]), Number(args[1]))
+			: `lighten(${args.join(", ")})`,
+	rgba: (...args) =>
+		String(args[0]).startsWith("#")
+			? rgba(String(args[0]), Number(args[1]))
+			: `rgba(${args.join(", ")})`,
+};
+
+/** Evaluates an expression of a stylesheet. */
+export function evaluate(
+	source: string,
+	options: EvaluateOptions = {},
+): string {
+	const trimmed = source.trim();
+	if (trimmed.length === 0) return "";
+	const parser = new Parser(tokenize(trimmed), {
+		scope: options.scope ?? {},
+		functions: { ...builtinFunctions, ...(options.functions ?? {}) },
+	});
+	return parser.parse();
+}
diff --git a/views/css/index.ts b/views/css/index.ts
new file mode 100644
index 0000000..b0dbc50
--- /dev/null
+++ b/views/css/index.ts
@@ -0,0 +1,43 @@
+import type { Loader, LoaderFile } from "../../contracts/index.ts";
+import { compileCss, type CompileOptions } from "./compiler.ts";
+
+/**
+ * Structured css.
+ *
+ * The stylesheets are written like pug: rules are nested, `&` refers to the
+ * parent selector, `#{$var}` interpolates an expression and `@each` repeats
+ * a block. The compiler flattens everything into plain css.
+ */
+
+export { compileCss, type CompileOptions } from "./compiler.ts";
+export { evaluate, darken, lighten, rgba } from "./evaluate.ts";
+export { parseCss } from "./parser.ts";
+export { sassLoader, type SassLoaderOptions } from "./sass.ts";
+
+export interface StcssLoaderOptions extends CompileOptions {
+	/** Directory the loader scans, relative to the project root. */
+	dir?: string;
+}
+
+/** Loader for structured css files. */
+export function stcssLoader(options: StcssLoaderOptions = {}): Loader {
+	return {
+		name: "stcss",
+		extensions: [".stcss", ".css"],
+		load(file: LoaderFile) {
+			return {
+				data: {},
+				content: compileCss(file.source, options),
+			};
+		},
+	};
+}
+
+/** Wraps compiled css into a style tag. */
+export function styleTag(css: string): string {
+	return `<style>${css}</style>`;
+}
+
+export function viewTransition(name: string): string {
+	return `view-transition-name: ${name};`;
+}
diff --git a/views/css/parser.ts b/views/css/parser.ts
new file mode 100644
index 0000000..06dfe29
--- /dev/null
+++ b/views/css/parser.ts
@@ -0,0 +1,381 @@
+export interface CssDeclaration {
+	property: string;
+	value: string;
+}
+
+export interface CssRule {
+	kind: "rule";
+	selector: string;
+	declarations: CssDeclaration[];
+	children: CssNode[];
+}
+
+export interface CssAtRule {
+	kind: "at-rule";
+	name: string;
+	params: string;
+	children: CssNode[];
+}
+
+/** A node of the stylesheet. */
+export type CssNode = CssRule | CssAtRule;
+
+export interface CssVariable {
+	name: string;
+	value: string;
+}
+
+export interface CssMixin {
+	name: string;
+	params: { name: string; value?: string }[];
+	children: CssNode[];
+}
+
+export interface CssStylesheet {
+	variables: CssVariable[];
+	mixins: CssMixin[];
+	rules: CssNode[];
+}
+
+const COMMENT = /\/\*[\s\S]*?\*\/|\/\/[^\n]*/g;
+
+const PUG_PROPERTIES = new Set([
+	"accent-color", "align-content", "align-items", "align-self", "animation", "appearance", "aspect-ratio",
+	"backdrop-filter", "background", "background-color", "background-image", "background-size", "block-size",
+	"border", "border-radius", "border-color", "border-width", "bottom", "box-shadow", "box-sizing",
+	"color", "columns", "contain", "content", "cursor", "display", "filter", "flex", "flex-basis",
+	"flex-direction", "flex-grow", "flex-shrink", "flex-wrap", "float", "font", "font-family", "font-size",
+	"font-weight", "gap", "grid", "grid-area", "grid-column", "grid-row", "grid-template-columns",
+	"grid-template-rows", "height", "inline-size", "inset", "justify-content", "justify-items", "justify-self",
+	"left", "letter-spacing", "line-height", "list-style", "margin", "max-height", "max-width", "min-height",
+	"min-width", "object-fit", "opacity", "order", "outline", "overflow", "overflow-x", "overflow-y",
+	"padding", "perspective", "place-content", "place-items", "pointer-events", "position", "right", "rotate",
+	"scale", "scroll-behavior", "scroll-margin-top", "text-align", "text-decoration", "text-transform", "top",
+	"transform", "transform-origin", "transition", "translate", "user-select", "visibility", "white-space", "width",
+	"will-change", "word-break", "z-index",
+]);
+
+function indentation(line: string): number {
+	let width = 0;
+	for (const char of line) {
+		if (char === " ") width += 1;
+		else if (char === "\t") width += 2;
+		else break;
+	}
+	return width;
+}
+
+function pugDeclaration(line: string): string | undefined {
+	if (/^\$[\w-]+\s*:\s*.+$/.test(line)) return line;
+	const variable = /^(\$[\w-]+)\s+(.+)$/.exec(line);
+	if (variable) return `${variable[1]}: ${variable[2]}`;
+	if (/^(?:--[\w-]+|[a-zA-Z][\w-]*)\s*:\s+.+$/.test(line)) return line;
+	const match = /^(--[\w-]+|[a-zA-Z][\w-]*)\s+(.+)$/.exec(line);
+	if (match && PUG_PROPERTIES.has(match[1] as string)) return `${match[1]}: ${match[2]}`;
+	return undefined;
+}
+
+function isPugStatement(line: string): boolean {
+	return /^@(include|measure|predict|concentric)\b/.test(line);
+}
+
+/** Converts indentation-delimited STCSS into the brace form used by the core parser. */
+function normalizePugSyntax(source: string): string {
+	const withoutInterpolations = source.replace(/#\{[^}]*\}/g, "");
+	if (/[{}]/.test(withoutInterpolations)) return source;
+	const lines = source.split("\n");
+	const significant = lines.filter((line) => line.trim().length > 0);
+	if (!significant.some((line) => /^\s+/.test(line))) return source;
+
+	const output: string[] = [];
+	const stack: number[] = [];
+	for (const raw of lines) {
+		const content = raw.trim();
+		if (!content) continue;
+		const level = indentation(raw);
+		while (stack.length > 0 && level <= (stack[stack.length - 1] as number)) {
+			output.push("}");
+			stack.pop();
+		}
+		const declaration = pugDeclaration(content);
+		if (declaration) {
+			output.push(`${declaration};`);
+			continue;
+		}
+		if (isPugStatement(content)) {
+			output.push(`${content};`);
+			continue;
+		}
+		const block = content.endsWith(":") ? content.slice(0, -1).trim() : content;
+		output.push(`${block} {`);
+		stack.push(level);
+	}
+	while (stack.length > 0) {
+		output.push("}");
+		stack.pop();
+	}
+	return output.join("\n");
+}
+
+class StcssParser {
+	private index = 0;
+
+	constructor(private readonly source: string) {}
+
+	parse(): CssStylesheet {
+		const stylesheet: CssStylesheet = {
+			variables: [],
+			mixins: [],
+			rules: [],
+		};
+		const nodes = this.parseNodes(stylesheet.variables);
+
+		for (const node of nodes) {
+			if (node.kind === "at-rule" && node.name === "mixin") {
+				stylesheet.mixins.push({
+					name: node.params.split(/[\s(]/)[0] ?? "",
+					params: parseMixinParams(node.params),
+					children: node.children,
+				});
+				continue;
+			}
+			if (node.kind === "at-rule" && node.name === "each") {
+				// the variable of the loop is handled by the compiler
+			}
+			stylesheet.rules.push(node);
+		}
+
+		return stylesheet;
+	}
+
+	private parseNodes(
+		variables?: CssVariable[],
+		declarations?: CssDeclaration[],
+	): CssNode[] {
+		const nodes: CssNode[] = [];
+
+		while (this.index < this.source.length) {
+			this.skipWhitespace();
+			if (this.index >= this.source.length) break;
+			if (this.source[this.index] === "}") {
+				this.index += 1;
+				break;
+			}
+
+			const chunk = this.readUntil(["{", ";", "}"]);
+			if (chunk.trim().length === 0) {
+				this.index += 1;
+				continue;
+			}
+
+			const delimiter = this.source[this.index];
+
+			if (delimiter === "{") {
+				this.index += 1;
+				const selector = chunk.trim();
+				if (selector.startsWith("@")) {
+					const match = /^@([\w-]+)\s*([\s\S]*)$/.exec(selector);
+					const name = match?.[1] ?? "";
+					const params = (match?.[2] ?? "").trim();
+					const body: CssDeclaration[] = [];
+					const children = this.parseNodes(undefined, body);
+					if (body.length > 0) {
+						children.unshift({
+							kind: "rule",
+							selector: "",
+							declarations: body,
+							children: [],
+						});
+					}
+					nodes.push({ kind: "at-rule", name, params, children });
+					continue;
+				}
+				const rule: CssRule = {
+					kind: "rule",
+					selector,
+					declarations: [],
+					children: [],
+				};
+				this.parseBody(rule);
+				nodes.push(rule);
+				continue;
+			}
+
+			// declaration or variable
+			this.index += 1;
+			const declaration = chunk.trim();
+			if (declaration.length === 0) continue;
+			if (declaration.startsWith("@")) {
+				const match = /^@([\w-]+)\s*([\s\S]*)$/.exec(declaration);
+				nodes.push({
+					kind: "at-rule",
+					name: match?.[1] ?? "",
+					params: (match?.[2] ?? "").trim(),
+					children: [],
+				});
+				continue;
+			}
+			if (!declaration.startsWith("$")) {
+				const separator = declaration.indexOf(":");
+				if (separator !== -1 && declarations) {
+					declarations.push({
+						property: declaration.slice(0, separator).trim(),
+						value: declaration.slice(separator + 1).trim(),
+					});
+				}
+			}
+			if (declaration.startsWith("$")) {
+				const separator = declaration.indexOf(":");
+				if (separator !== -1 && variables) {
+					variables.push({
+						name: declaration.slice(0, separator).trim(),
+						value: declaration.slice(separator + 1).trim(),
+					});
+				}
+			}
+		}
+
+		return nodes;
+	}
+
+	private parseBody(rule: CssRule): void {
+		while (this.index < this.source.length) {
+			this.skipWhitespace();
+			if (this.index >= this.source.length) return;
+			if (this.source[this.index] === "}") {
+				this.index += 1;
+				return;
+			}
+
+			const chunk = this.readUntil(["{", ";", "}"]);
+			const delimiter = this.source[this.index];
+
+			if (delimiter === "{") {
+				this.index += 1;
+				const selector = chunk.trim();
+				if (selector.startsWith("@")) {
+					const match = /^@([\w-]+)\s*([\s\S]*)$/.exec(selector);
+					const body: CssDeclaration[] = [];
+					const children = this.parseNodes(undefined, body);
+					if (body.length > 0) {
+						children.unshift({
+							kind: "rule",
+							selector: "",
+							declarations: body,
+							children: [],
+						});
+					}
+					rule.children.push({
+						kind: "at-rule",
+						name: match?.[1] ?? "",
+						params: (match?.[2] ?? "").trim(),
+						children,
+					});
+					continue;
+				}
+				const nested: CssRule = {
+					kind: "rule",
+					selector,
+					declarations: [],
+					children: [],
+				};
+				this.parseBody(nested);
+				rule.children.push(nested);
+				continue;
+			}
+
+			this.index += 1;
+			const declaration = chunk.trim();
+			if (declaration.length === 0) continue;
+			if (declaration.startsWith("@")) {
+				const match = /^@([\w-]+)\s*([\s\S]*)$/.exec(declaration);
+				rule.children.push({
+					kind: "at-rule",
+					name: match?.[1] ?? "",
+					params: (match?.[2] ?? "").trim(),
+					children: [],
+				});
+				continue;
+			}
+			const separator = declaration.indexOf(":");
+			if (separator === -1) continue;
+			rule.declarations.push({
+				property: declaration.slice(0, separator).trim(),
+				value: declaration.slice(separator + 1).trim(),
+			});
+		}
+	}
+
+	private readUntil(delimiters: string[]): string {
+		const start = this.index;
+		let quote: string | undefined;
+
+		while (this.index < this.source.length) {
+			const char = this.source[this.index] as string;
+
+			if (quote) {
+				if (char === quote) quote = undefined;
+				this.index += 1;
+				continue;
+			}
+			if (char === '"' || char === "'") {
+				quote = char;
+				this.index += 1;
+				continue;
+			}
+			if (char === "#" && this.source[this.index + 1] === "{") {
+				// an interpolation, the braces belong to the expression
+				const end = this.source.indexOf("}", this.index);
+				this.index = end === -1 ? this.source.length : end + 1;
+				continue;
+			}
+			if (delimiters.includes(char)) break;
+			this.index += 1;
+		}
+
+		return this.source.slice(start, this.index);
+	}
+
+	private skipWhitespace(): void {
+		while (this.index < this.source.length) {
+			const char = this.source[this.index] as string;
+			if (/\s/.test(char)) {
+				this.index += 1;
+				continue;
+			}
+			if (char === "/" && this.source[this.index + 1] === "*") {
+				const end = this.source.indexOf("*/", this.index);
+				this.index = end === -1 ? this.source.length : end + 2;
+				continue;
+			}
+			break;
+		}
+	}
+}
+
+/** Parses the parameters of a mixin, e.g. `$size: 1rem`. */
+export function parseMixinParams(
+	params: string,
+): { name: string; value?: string }[] {
+	const open = params.indexOf("(");
+	const close = params.lastIndexOf(")");
+	if (open === -1 || close === -1) return [];
+	const inner = params.slice(open + 1, close);
+	return inner
+		.split(",")
+		.map((entry) => entry.trim())
+		.filter((entry) => entry.length > 0)
+		.map((entry) => {
+			const separator = entry.indexOf(":");
+			if (separator === -1) return { name: entry };
+			return {
+				name: entry.slice(0, separator).trim(),
+				value: entry.slice(separator + 1).trim(),
+			};
+		});
+}
+
+/** Parses a stylesheet. */
+export function parseCss(source: string): CssStylesheet {
+	return new StcssParser(normalizePugSyntax(source.replace(COMMENT, ""))).parse();
+}
diff --git a/views/css/sass.ts b/views/css/sass.ts
new file mode 100644
index 0000000..05b20f2
--- /dev/null
+++ b/views/css/sass.ts
@@ -0,0 +1,29 @@
+import { compileStringAsync } from "sass";
+import { pathToFileURL } from "node:url";
+import type { Loader, LoaderFile } from "../../contracts/index.ts";
+import { compileCss, type CompileOptions } from "./compiler.ts";
+
+export interface SassLoaderOptions extends CompileOptions {
+	/** Directory scanned by the Sass integration, relative to the project root. */
+	dir?: string;
+	/** Extra directories searched by Sass `@use` and `@import`. */
+	loadPaths?: string[];
+}
+
+/**
+ * Compiles Sass to CSS and then runs it through STCSS. This lets a project
+ * move Sass files over incrementally while keeping one CSS output path.
+ */
+export function sassLoader(options: SassLoaderOptions = {}): Loader {
+	return {
+		name: "sass",
+		extensions: [".scss", ".sass"],
+		async load(file: LoaderFile) {
+			const result = await compileStringAsync(file.source, {
+				url: pathToFileURL(file.path),
+				loadPaths: options.loadPaths,
+			});
+			return { data: {}, content: compileCss(result.css, options) };
+		},
+	};
+}
diff --git a/views/engine/compiler.ts b/views/engine/compiler.ts
new file mode 100644
index 0000000..6123adc
--- /dev/null
+++ b/views/engine/compiler.ts
@@ -0,0 +1,707 @@
+import type { Node, PropDeclaration, RawAttribute } from "./types.ts";
+
+export interface CompileOptions {
+	/** Absolute path of the template, used to resolve frontmatter imports. */
+	path: string;
+	/** Directory of the template, used to resolve frontmatter imports. */
+	dir: string;
+	/** Frontmatter of the template. */
+	frontmatter?: string;
+}
+
+export interface CompiledSource {
+	/** Source of the module creating the compiled template. */
+	source: string;
+	/** Prop declarations found in the template. */
+	props: PropDeclaration[];
+	/** Names declared by the frontmatter. */
+	frontmatterNames: string[];
+}
+
+const RESERVED = new Set([
+	"await",
+	"async",
+	"break",
+	"case",
+	"catch",
+	"class",
+	"const",
+	"continue",
+	"debugger",
+	"default",
+	"delete",
+	"do",
+	"else",
+	"enum",
+	"export",
+	"extends",
+	"false",
+	"finally",
+	"for",
+	"from",
+	"function",
+	"get",
+	"if",
+	"implements",
+	"import",
+	"in",
+	"instanceof",
+	"interface",
+	"let",
+	"new",
+	"null",
+	"of",
+	"package",
+	"private",
+	"protected",
+	"public",
+	"return",
+	"set",
+	"static",
+	"super",
+	"switch",
+	"this",
+	"throw",
+	"true",
+	"try",
+	"typeof",
+	"undefined",
+	"var",
+	"void",
+	"while",
+	"with",
+	"yield",
+]);
+
+/**
+ * Identifiers used by an expression.
+ */
+export function collectIdentifiers(code: string): string[] {
+	const withoutStrings = code
+		.replace(/"(?:[^"\\]|\\.)*"/g, '""')
+		.replace(/'(?:[^'\\]|\\.)*'/g, "''")
+		.replace(/`(?:[^`\\]|\\.)*`/g, "``");
+	const names = new Set<string>();
+	const pattern = /(?<![.\w$])([A-Za-z_$][\w$]*)/g;
+	let match = pattern.exec(withoutStrings);
+	while (match) {
+		const name = match[1] as string;
+		if (!RESERVED.has(name)) names.add(name);
+		match = pattern.exec(withoutStrings);
+	}
+	return [...names];
+}
+
+/**
+ * Names declared by the frontmatter.
+ */
+export function extractDeclarations(code: string): string[] {
+	const names: string[] = [];
+	const pattern = /^\s*(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=/gm;
+	let match = pattern.exec(code);
+	while (match) {
+		names.push(match[1] as string);
+		match = pattern.exec(code);
+	}
+	return names;
+}
+
+const VOID_ELEMENTS = new Set([
+	"area",
+	"base",
+	"br",
+	"col",
+	"embed",
+	"hr",
+	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr",
+]);
+
+/** Escapes a string for use inside a JavaScript string literal. */
+function jsString(value: string): string {
+	return JSON.stringify(value);
+}
+
+/** Escapes HTML entities of static text. */
+export function escapeHtmlText(value: string): string {
+	return value
+		.replace(/&/g, "&")
+		.replace(/</g, "<")
+		.replace(/>/g, ">");
+}
+
+/** Resolves an import specifier of the frontmatter. */
+function resolveSpecifier(specifier: string, dir: string): string {
+	if (!specifier.startsWith(".")) return specifier;
+	return `${dir}/${specifier}`.replace(/\/{2,}/g, "/");
+}
+
+/**
+ * Rewrites the `import` statements of the frontmatter into dynamic imports,
+ * because the frontmatter is compiled into a function body.
+ */
+export function transformFrontmatter(code: string, dir: string): string {
+	const lines = code.split("\n");
+	const output: string[] = [];
+
+	for (const line of lines) {
+		const named = /^\s*import\s+([\s\S]+?)\s+from\s+['"]([^'"]+)['"]\s*$/.exec(
+			line,
+		);
+		if (named) {
+			const clause = (named[1] as string).trim();
+			const specifier = resolveSpecifier(named[2] as string, dir);
+			const defaultMatch = /^([A-Za-z_$][\w$]*)\s*,\s*([\s\S]+)$/.exec(clause);
+			if (defaultMatch) {
+				const alias = defaultMatch[1] as string;
+				const rest = (defaultMatch[2] as string).replace(/^\{|\}$/g, "").trim();
+				output.push(`const __module = await import(${jsString(specifier)});`);
+				output.push(`const ${alias} = __module.default;`);
+				output.push(`const { ${rest} } = __module;`);
+				continue;
+			}
+			if (/^\*\s*as\s+/.test(clause)) {
+				const alias = clause.replace(/^\*\s*as\s+/, "").trim();
+				output.push(`const ${alias} = await import(${jsString(specifier)});`);
+				continue;
+			}
+			if (/^\{[\s\S]*\}$/.test(clause)) {
+				const names = clause.replace(/^\{|\}$/g, "").trim();
+				output.push(
+					`const { ${names} } = await import(${jsString(specifier)});`,
+				);
+				continue;
+			}
+			if (/^[A-Za-z_$][\w$]*$/.test(clause)) {
+				output.push(
+					`const ${clause} = (await import(${jsString(specifier)})).default;`,
+				);
+				continue;
+			}
+			output.push(`await import(${jsString(specifier)});`);
+			continue;
+		}
+
+		const sideEffect = /^\s*import\s+['"]([^'"]+)['"]\s*$/.exec(line);
+		if (sideEffect) {
+			output.push(
+				`await import(${jsString(resolveSpecifier(sideEffect[1] as string, dir))});`,
+			);
+			continue;
+		}
+
+		output.push(line);
+	}
+
+	return output.join("\n");
+}
+
+/** Collects every mixin definition of a template. */
+export function collectMixinNodes(
+	nodes: Node[],
+): Extract<Node, { kind: "mixin" }>[] {
+	const result: Extract<Node, { kind: "mixin" }>[] = [];
+	for (const node of nodes) {
+		if (node.kind === "mixin") {
+			result.push(node);
+			continue;
+		}
+		const children = childrenOf(node);
+		if (children) result.push(...collectMixinNodes(children));
+	}
+	return result;
+}
+
+/** Collects every named block of a template. */
+export function collectBlockNodes(nodes: Node[]): {
+	name: string;
+	mode: "replace" | "append" | "prepend";
+	children: Node[];
+}[] {
+	const result: {
+		name: string;
+		mode: "replace" | "append" | "prepend";
+		children: Node[];
+	}[] = [];
+	for (const node of nodes) {
+		if (node.kind === "block") {
+			result.push({
+				name: node.name,
+				mode: node.mode,
+				children: node.children,
+			});
+			continue;
+		}
+		const children = childrenOf(node);
+		if (children) result.push(...collectBlockNodes(children));
+	}
+	return result;
+}
+
+class Compiler {
+	private readonly buffer: string[] = [];
+
+	compile(nodes: Node[]): string {
+		this.emitBody(nodes);
+		return this.buffer.join("\n");
+	}
+
+	private emit(line: string): void {
+		this.buffer.push(line);
+	}
+
+	private emitBody(nodes: Node[]): void {
+		for (const node of nodes) {
+			this.emitNode(node);
+		}
+	}
+
+	private emitNode(node: Node): void {
+		switch (node.kind) {
+			case "element":
+				this.emitElement(node);
+				break;
+			case "text":
+				this.emitText(node.parts);
+				break;
+			case "rawtext":
+				this.emit(`__push(${jsString(escapeHtmlText(node.value))});`);
+				break;
+			case "code":
+				this.emit(node.code);
+				break;
+			case "out":
+				this.emit(
+					`__push(__helpers.render(await (${node.code}), ${node.escaped !== false}));`,
+				);
+				break;
+			case "comment":
+				if (!node.silent) {
+					this.emit(`__push(${jsString(`<!--${node.value}-->`)});`);
+				}
+				break;
+			case "doctype":
+				this.emit(`__push(${jsString(`<!DOCTYPE ${node.value || "html"}>`)});`);
+				break;
+			case "if":
+				this.emitIf(node.branches);
+				break;
+			case "each":
+				this.emitEach(node);
+				break;
+			case "while":
+				this.emit(`while (${node.test}) {`);
+				this.emitBody(node.children);
+				this.emit("}");
+				break;
+			case "case":
+				this.emitCase(node);
+				break;
+			case "mixin":
+				break;
+			case "mixin-call":
+				this.emit(
+					`__push(await __mixins[${jsString(node.name)}](__runtime, __ctx, ${node.args || ""}));`,
+				);
+				break;
+			case "include":
+				this.emitBody(node.children);
+				break;
+			case "extends":
+				break;
+			case "block":
+			case "slot":
+				this.emitBlock(node.name, node.children);
+				break;
+			case "yield":
+				this.emitBlock(node.name, []);
+				break;
+			case "portal":
+				this.emit(`__push(${jsString(`<div data-muddle-portal="${node.name}" style="view-transition-name:${node.name}">`)});`);
+				this.emitBody(node.children);
+				this.emit(`__push("</div>");`);
+				break;
+			case "props":
+			case "test":
+				break;
+			case "component":
+				this.emitComponent(node.name, node.props, node.renders, false);
+				break;
+			case "island":
+				this.emitComponent(node.name, node.props, node.renders, true);
+				break;
+		}
+	}
+
+	private emitElement(node: Extract<Node, { kind: "element" }>): void {
+		const anchor = node.anchor
+			? node.anchor.expression
+				? ` + __helpers.attr("data-muddle-anchor", ${jsString(node.anchor.name)} + String(${node.anchor.expression}))`
+				: ` + __helpers.attr("data-muddle-anchor", ${jsString(node.anchor.name)})`
+			: "";
+		const attributes = this.emitAttributes(node.attributes) + anchor;
+		this.emit(
+			`__push(${jsString(`<${node.name}`)}${attributes} + ${jsString(">")});`,
+		);
+
+		if (VOID_ELEMENTS.has(node.name)) return;
+
+		this.emitBody(node.children);
+		this.emit(`__push(${jsString(`</${node.name}>`)});`);
+	}
+
+	/**
+	 * Renders the attributes of a tag.
+	 */
+	private emitAttributes(attributes: RawAttribute[]): string {
+		const classes: RawAttribute[] = [];
+		const others: RawAttribute[] = [];
+		for (const attribute of attributes) {
+			if (attribute.name === "class") classes.push(attribute);
+			else others.push(attribute);
+		}
+
+		let rendered = others
+			.map((attribute) => this.emitAttribute(attribute))
+			.join("");
+
+		if (classes.length === 1) {
+			rendered += this.emitAttribute(classes[0] as RawAttribute);
+			return rendered;
+		}
+		if (classes.length > 1) {
+			const values = classes
+				.map((attribute) =>
+					attribute.kind === "string"
+						? jsString(attribute.value ?? "")
+						: `(${attribute.value ?? ""})`,
+				)
+				.join(", ");
+			rendered += ` + __helpers.attr("class", __helpers.classes([${values}]))`;
+		}
+		return rendered;
+	}
+
+	private emitAttribute(attribute: RawAttribute): string {
+		if (attribute.kind === "boolean") {
+			return ` + __helpers.attrBoolean(${jsString(attribute.name)})`;
+		}
+		if (attribute.kind === "string") {
+			return ` + __helpers.attr(${jsString(attribute.name)}, ${jsString(attribute.value ?? "")})`;
+		}
+		if (attribute.name === "style") {
+			return ` + __helpers.attr("style", __helpers.style(${attribute.value ?? ""}))`;
+		}
+		return ` + __helpers.attr(${jsString(attribute.name)}, (${attribute.value ?? ""}))`;
+	}
+
+	private emitText(
+		parts: {
+			type: "literal" | "expression";
+			value?: string;
+			code?: string;
+			escaped?: boolean;
+		}[],
+	): void {
+		for (const part of parts) {
+			if (part.type === "literal") {
+				this.emit(`__push(${jsString(escapeHtmlText(part.value ?? ""))});`);
+				continue;
+			}
+			const code = part.code ?? "";
+			this.emit(
+				`__push(__helpers.render(await (${code}), ${part.escaped !== false}));`,
+			);
+		}
+	}
+
+	private emitIf(
+		branches: { test: string | null; negate: boolean; children: Node[] }[],
+	): void {
+		branches.forEach((branch, index) => {
+			if (index > 0) {
+				this.emit("}");
+			}
+			if (branch.test === null) {
+				this.emit("else {");
+			} else {
+				const test = branch.negate ? `!(${branch.test})` : branch.test;
+				this.emit(`${index === 0 ? "if" : "else if"} (${test}) {`);
+			}
+			this.emitBody(branch.children);
+		});
+		this.emit("}");
+	}
+
+	private emitEach(node: Extract<Node, { kind: "each" }>): void {
+		this.emit("{");
+		this.emit(`const __list = (${node.list});`);
+		this.emit("if (Array.isArray(__list)) {");
+		this.emit("for (let __index = 0; __index < __list.length; __index++) {");
+		this.emit(`const ${node.value} = __list[__index];`);
+		if (node.key) {
+			this.emit(`const ${node.key} = __index;`);
+		}
+		this.emitBody(node.children);
+		this.emit("}");
+		this.emit("} else {");
+		this.emit("for (const __key of Object.keys(__list ?? {})) {");
+		this.emit(`const ${node.value} = __list[__key];`);
+		if (node.key) {
+			this.emit(`const ${node.key} = __key;`);
+		}
+		this.emitBody(node.children);
+		this.emit("}");
+		this.emit("}");
+		this.emit("}");
+	}
+
+	private emitCase(node: Extract<Node, { kind: "case" }>): void {
+		this.emit(`switch (${node.subject}) {`);
+		for (const entry of node.cases) {
+			if (entry.test === undefined) {
+				this.emit("default: {");
+			} else {
+				this.emit(`case (${entry.test}): {`);
+			}
+			this.emitBody(entry.children);
+			this.emit("break;");
+			this.emit("}");
+		}
+		this.emit("}");
+	}
+
+	private emitBlock(name: string, children: Node[]): void {
+		this.emit(
+			`__push(await __runtime.getBlock(${jsString(name)}, async (__runtime, __ctx) => {`,
+		);
+		this.emit("const __out = [];");
+		this.emit("const __push = (__value) => { __out.push(__value); };");
+		this.emit("with (__ctx) {");
+		this.emitBody(children);
+		this.emit("}");
+		this.emit('return __out.join("");');
+		this.emit("}));");
+	}
+
+	private emitComponent(
+		name: string,
+		props: Record<string, string>,
+		renders: { name: string; children: Node[] }[] = [],
+		island = false,
+	): void {
+		const entries = Object.entries(props).map(
+			([key, value]) => `${jsString(key)}: (${value || "undefined"})`,
+		);
+
+		for (const render of renders) {
+			const renderer = new Compiler();
+			const body = renderer.compile(render.children);
+			entries.push(
+				`${jsString(render.name)}: async () => { const __out = []; const __push = (__value) => { __out.push(__value); }; const __helpers = __runtime.helpers; with (__ctx) { ${body} } return __out.join(""); }`,
+			);
+		}
+
+		const method = island ? "renderIsland" : "renderComponent";
+		this.emit(
+			`__push(await __runtime.${method}(${jsString(name)}, { ${entries.join(", ")} }));`,
+		);
+	}
+}
+
+
+export function compileTemplate(
+	nodes: Node[],
+	options: CompileOptions,
+): CompiledSource {
+	const bodyCompiler = new Compiler();
+	const body = bodyCompiler.compile(nodes);
+	const uses = collectUses(nodes);
+	const tests = collectTests(nodes);
+
+	const blockSource: string[] = [];
+	for (const block of collectBlockNodes(nodes)) {
+		const blockCompiler = new Compiler();
+		const blockBody = blockCompiler.compile(block.children);
+		blockSource.push(
+			`${jsString(block.name)}: { mode: ${jsString(block.mode)}, fn: async (__runtime, __ctx) => { const __out = []; const __push = (__value) => { __out.push(__value); }; const __helpers = __runtime.helpers; with (__ctx) { ${blockBody} } return __out.join(""); } }`,
+		);
+	}
+
+	const mixinSource: string[] = [];
+	for (const mixin of collectMixinNodes(nodes)) {
+		const mixinCompiler = new Compiler();
+		const mixinBody = mixinCompiler.compile(mixin.children);
+		const params = mixin.params.length > 0 ? mixin.params : "";
+		mixinSource.push(
+			`${jsString(mixin.name)}: async (__runtime, __ctx, ${params}) => { const __out = []; const __push = (__value) => { __out.push(__value); }; const __helpers = __runtime.helpers; with (__ctx) { ${mixinBody} } return __out.join(""); }`,
+		);
+	}
+
+	const frontmatter =
+		options.frontmatter && options.frontmatter.trim().length > 0
+			? transformFrontmatter(options.frontmatter, options.dir)
+			: "";
+	const frontmatterNames =
+		frontmatter.length > 0 ? extractDeclarations(frontmatter) : [];
+	const frontmatterAssignments = frontmatterNames
+		.map((name) => `    __values.${name} = ${name};`)
+		.join("\n");
+
+	const source = `
+const __blocks = { ${blockSource.join(", ")} };
+const __mixins = { ${mixinSource.join(", ")} };
+const __frontmatter = async (__runtime, __ctx) => {
+  const __values = {};
+  const __helpers = __runtime.helpers;
+  const __muddle = __runtime.file;
+  with (__ctx) {
+${frontmatter}
+${frontmatterAssignments}
+  }
+  return __values;
+};
+const __template = async (__runtime, __ctx) => {
+  const __out = [];
+  const __push = (__value) => { __out.push(__value); };
+  const __helpers = __runtime.helpers;
+  const __muddle = __runtime.file;
+  with (__ctx) {
+    ${body}
+  }
+  return __out.join("");
+};
+return { template: __template, frontmatter: __frontmatter, blocks: __blocks, mixins: __mixins, uses: ${JSON.stringify(uses)}, tests: ${JSON.stringify(tests)} };
+`;
+
+	return { source, props: [], frontmatterNames };
+}
+
+/**
+ * The assertions of a template.
+ */
+export function collectTests(nodes: Node[]): string[] {
+	const tests: string[] = [];
+	const visit = (nodes: Node[]): void => {
+		for (const node of nodes) {
+			if (node.kind === "test") {
+				tests.push(node.code);
+				continue;
+			}
+			const children = childrenOf(node);
+			if (children) visit(children);
+		}
+	};
+	visit(nodes);
+	return tests;
+}
+
+/**
+ * Every identifier used by a template.
+ */
+export function collectUses(nodes: Node[]): string[] {
+	const names = new Set<string>();
+	const declared = new Set<string>();
+
+	const visit = (node: Node): void => {
+		if (node.kind === "mixin") {
+			for (const name of mixinParamNames(node.params)) declared.add(name);
+		}
+		switch (node.kind) {
+			case "out":
+				for (const name of collectIdentifiers(node.code)) names.add(name);
+				break;
+			case "code":
+				for (const name of collectIdentifiers(node.code)) names.add(name);
+				break;
+			case "element":
+				for (const attribute of node.attributes) {
+					if (attribute.kind !== "expression") continue;
+					for (const name of collectIdentifiers(attribute.value ?? "")) {
+						names.add(name);
+					}
+				}
+				break;
+			case "text":
+				for (const part of node.parts) {
+					if (part.type !== "expression") continue;
+					for (const name of collectIdentifiers(part.code ?? "")) {
+						names.add(name);
+					}
+				}
+				break;
+			case "if":
+				for (const branch of node.branches) {
+					if (branch.test) {
+						for (const name of collectIdentifiers(branch.test)) names.add(name);
+					}
+				}
+				break;
+			case "each":
+				for (const name of collectIdentifiers(node.list)) names.add(name);
+				break;
+			case "while":
+				for (const name of collectIdentifiers(node.test)) names.add(name);
+				break;
+			case "case":
+				for (const name of collectIdentifiers(node.subject)) names.add(name);
+				break;
+			case "mixin-call":
+				for (const name of collectIdentifiers(node.args)) names.add(name);
+				break;
+			case "component":
+			case "island":
+				for (const value of Object.values(node.props)) {
+					for (const name of collectIdentifiers(value)) names.add(name);
+				}
+				break;
+		}
+
+		const children = childrenOf(node);
+		if (children) {
+			for (const child of children) visit(child);
+		}
+	};
+
+	for (const node of nodes) visit(node);
+	return [...names].filter((name) => !declared.has(name));
+}
+
+/** Names of the parameters of a mixin. */
+export function mixinParamNames(params: string): string[] {
+	const names: string[] = [];
+	const braced = /[{[(]([\s\S]*)[}\])]/.exec(params);
+	const inner = braced ? (braced[1] as string) : params;
+	for (const part of inner.split(",")) {
+		const cleaned = part.trim().replace(/^[.]{3}/, "");
+		if (!cleaned) continue;
+		const name = /^[A-Za-z_$][\w$]*/.exec(cleaned);
+		if (name) names.push(name[0]);
+	}
+	return names;
+}
+
+function childrenOf(node: Node): Node[] | undefined {
+	switch (node.kind) {
+		case "element":
+		case "each":
+		case "while":
+		case "mixin":
+		case "mixin-call":
+		case "include":
+		case "block":
+		case "slot":
+		case "comment":
+			return node.children;
+		case "if":
+			return node.branches.flatMap((branch) => branch.children);
+		default:
+			return undefined;
+	}
+}
diff --git a/views/engine/lexer.ts b/views/engine/lexer.ts
new file mode 100644
index 0000000..2f80388
--- /dev/null
+++ b/views/engine/lexer.ts
@@ -0,0 +1,616 @@
+import type { RawAttribute, TextPart, Token } from "./types.ts";
+
+const KEYWORDS = new Set([
+	"if",
+	"unless",
+	"else",
+	"each",
+	"while",
+	"case",
+	"when",
+	"default",
+	"mixin",
+	"include",
+	"extends",
+	"block",
+	"append",
+	"prepend",
+	"slot",
+	"yield",
+	"props",
+	"component",
+	"island",
+	"render",
+	"portal",
+]);
+
+const TAG_NAME = /^[a-zA-Z][a-zA-Z0-9:_-]*/;
+
+/** Converts tabs to spaces so indentation can be compared by width. */
+function indentWidth(line: string): { indent: number; rest: string } {
+	let indent = 0;
+	let index = 0;
+	while (index < line.length) {
+		const char = line[index];
+		if (char === " ") {
+			indent += 1;
+		} else if (char === "\t") {
+			indent += 2;
+		} else {
+			break;
+		}
+		index += 1;
+	}
+	return { indent, rest: line.slice(index) };
+}
+
+/** Counts the parentheses that are still open at the end of a line. */
+function parenBalance(line: string): number {
+	let balance = 0;
+	let quote: string | null = null;
+	for (let index = 0; index < line.length; index++) {
+		const char = line[index];
+		if (quote) {
+			if (char === "\\") {
+				index += 1;
+				continue;
+			}
+			if (char === quote) quote = null;
+			continue;
+		}
+		if (char === '"' || char === "'" || char === "`") {
+			quote = char;
+			continue;
+		}
+		if (char === "(") balance += 1;
+		if (char === ")") balance -= 1;
+	}
+	return balance;
+}
+
+interface LogicalLine {
+	indent: number;
+	text: string;
+	line: number;
+}
+
+/** Folds the source into logical lines, joining open attribute lists. */
+export function foldLines(source: string): LogicalLine[] {
+	const lines = source.split("\n");
+	const result: LogicalLine[] = [];
+	let index = 0;
+
+	while (index < lines.length) {
+		const raw = lines[index] as string;
+		const { indent, rest } = indentWidth(raw);
+		const lineNumber = index + 1;
+
+		if (rest.trim().length === 0) {
+			index += 1;
+			continue;
+		}
+
+		let text = rest;
+		while (parenBalance(text) > 0 && index + 1 < lines.length) {
+			index += 1;
+			text += `\n${(lines[index] as string).trim()}`;
+		}
+
+		result.push({ indent, text, line: lineNumber });
+		index += 1;
+	}
+
+	return result;
+}
+
+/** Extracts the Astro style frontmatter of a template. */
+export function extractFrontmatter(source: string): {
+	frontmatter: string;
+	body: string;
+} {
+	const lines = source.split("\n");
+	let start = 0;
+	while (start < lines.length && (lines[start] as string).trim().length === 0)
+		start += 1;
+	let frontmatter = "";
+	if (start >= lines.length || (lines[start] as string).trim() !== "---") {
+		return extractScriptBlocks(source, frontmatter);
+	}
+
+	const body: string[] = [];
+	let index = start + 1;
+	const frontmatterLines: string[] = [];
+	for (; index < lines.length; index++) {
+		const line = lines[index] as string;
+		if (line.trim() === "---") {
+			index += 1;
+			break;
+		}
+		frontmatterLines.push(line);
+	}
+	body.push(...lines.slice(index));
+	frontmatter = frontmatterLines.join("\n");
+	return extractScriptBlocks(body.join("\n"), frontmatter);
+}
+
+/** Reads `javascript!` and `typescript!` blocks terminated by `end`. */
+export function extractScriptBlocks(source: string, frontmatter = ""): { frontmatter: string; body: string } {
+	const body: string[] = [];
+	const scripts: string[] = [];
+	const lines = source.split("\n");
+	let index = 0;
+	while (index < lines.length) {
+		const directive = /^\s*(?:javascript|typescript)!\s*$/.test(lines[index] as string);
+		if (!directive) { body.push(lines[index] as string); index += 1; continue; }
+		index += 1;
+		while (index < lines.length && !/^\s*end\s*$/.test(lines[index] as string)) { scripts.push(lines[index] as string); index += 1; }
+		if (index < lines.length) index += 1;
+	}
+	return { frontmatter: [frontmatter, ...scripts].filter(Boolean).join("\n"), body: body.join("\n") };
+}
+
+/** Finds the index of the `}` matching the `{` at `start`. */
+export function findClosingBrace(text: string, start: number): number {
+	let depth = 0;
+	let quote: string | null = null;
+	for (let index = start; index < text.length; index++) {
+		const char = text[index];
+		if (quote) {
+			if (char === "\\") {
+				index += 1;
+				continue;
+			}
+			if (char === quote) quote = null;
+			continue;
+		}
+		if (char === '"' || char === "'" || char === "`") {
+			quote = char;
+			continue;
+		}
+		if (char === "{") depth += 1;
+		if (char === "}") {
+			depth -= 1;
+			if (depth === 0) return index;
+		}
+	}
+	return -1;
+}
+
+/** Splits text into literal and interpolated parts. */
+export function parseTextParts(text: string): TextPart[] {
+	const parts: TextPart[] = [];
+	let literal = "";
+	let index = 0;
+
+	const flush = () => {
+		if (literal.length > 0) {
+			parts.push({ type: "literal", value: literal });
+			literal = "";
+		}
+	};
+
+	while (index < text.length) {
+		const char = text[index];
+		const next = text[index + 1];
+
+		if ((char === "#" || char === "!") && next === "{") {
+			const end = findClosingBrace(text, index + 1);
+			if (end !== -1) {
+				flush();
+				parts.push({
+					type: "expression",
+					code: text.slice(index + 2, end).trim(),
+					escaped: char === "#",
+				});
+				index = end + 1;
+				continue;
+			}
+		}
+
+		literal += char;
+		index += 1;
+	}
+
+	flush();
+	return parts;
+}
+
+/**
+ * `true` when the text after the whitespace starts a new attribute.
+ */
+export function startsNewAttribute(source: string, index: number): boolean {
+	const rest = source.slice(index);
+	return /^\s+[A-Za-z_][\w-]*\s*(?:=|,|\)|$)/.test(rest);
+}
+
+/** Parses the attribute list of a tag. */
+export function parseAttributes(source: string): RawAttribute[] {
+	const attributes: RawAttribute[] = [];
+	let index = 0;
+
+	while (index < source.length) {
+		while (
+			index < source.length &&
+			(/\s/.test(source[index] as string) || source[index] === ",")
+		) {
+			index += 1;
+		}
+		if (index >= source.length) break;
+
+		const nameMatch = /^[^\s=,()]+/.exec(source.slice(index));
+		if (!nameMatch) {
+			index += 1;
+			continue;
+		}
+		const name = nameMatch[0];
+		index += name.length;
+
+		while (index < source.length && /\s/.test(source[index] as string))
+			index += 1;
+
+		if (source[index] !== "=") {
+			attributes.push({ name, kind: "boolean" });
+			continue;
+		}
+
+		index += 1;
+		while (index < source.length && /\s/.test(source[index] as string))
+			index += 1;
+
+		const quote = source[index];
+		if (quote === '"' || quote === "'") {
+			const end = source.indexOf(quote, index + 1);
+			const value =
+				end === -1 ? source.slice(index + 1) : source.slice(index + 1, end);
+			attributes.push({ name, kind: "string", value });
+			index = end === -1 ? source.length : end + 1;
+			continue;
+		}
+
+		if (quote === "(") {
+			let depth = 0;
+			const start = index;
+			for (; index < source.length; index++) {
+				const char = source[index];
+				if (char === "(") depth += 1;
+				if (char === ")") {
+					depth -= 1;
+					if (depth === 0) {
+						index += 1;
+						break;
+					}
+				}
+			}
+			attributes.push({
+				name,
+				kind: "expression",
+				value: source.slice(start + 1, index - 1).trim(),
+			});
+			continue;
+		}
+
+		const start = index;
+		let depth = 0;
+		while (index < source.length) {
+			const char = source[index] as string;
+			if (char === "(" || char === "[" || char === "{") depth += 1;
+			if (char === ")" || char === "]" || char === "}") depth -= 1;
+			if (depth === 0 && (char === "," || char === ")")) break;
+			if (depth === 0 && /\s/.test(char) && startsNewAttribute(source, index)) {
+				break;
+			}
+			index += 1;
+		}
+		attributes.push({
+			name,
+			kind: "expression",
+			value: source.slice(start, index).trim(),
+		});
+	}
+
+	return attributes;
+}
+
+/** Parses a tag line into its name, attributes and inline text. */
+export function parseTagLine(text: string): {
+	name: string;
+	attributes: RawAttribute[];
+	text?: string;
+	output?: string;
+	escaped?: boolean;
+	blockText: boolean;
+	anchor?: { name: string; expression?: string };
+} {
+	let rest = text;
+	const nameMatch = TAG_NAME.exec(rest);
+	const name = nameMatch ? nameMatch[0] : "div";
+	if (nameMatch) rest = rest.slice(name.length);
+
+	const classes: string[] = [];
+	let id: string | undefined;
+
+	while (rest.length > 0 && (rest[0] === "." || rest[0] === "#")) {
+		const marker = rest[0] as string;
+		const valueMatch = /^[^\s.#(=/!@]+/.exec(rest.slice(1));
+		if (!valueMatch) break;
+		if (marker === ".") classes.push(valueMatch[0]);
+		else id = valueMatch[0];
+		rest = rest.slice(1 + valueMatch[0].length);
+	}
+
+	let anchor: { name: string; expression?: string } | undefined;
+	if (rest.startsWith("@")) {
+		const match = /^@([A-Za-z_][\w-]*(?:\.[A-Za-z_][\w-]*)*)/.exec(rest);
+		if (match) {
+			let length = match[0].length;
+			let expression: string | undefined;
+			// `@docs.{section.id}` keeps the stable group prefix while deriving its
+			// leaf identity from the current composition scope.
+			if (rest.slice(length).startsWith(".{")) {
+				const end = rest.indexOf("}", length + 2);
+				if (end !== -1) {
+					expression = rest.slice(length + 2, end).trim() || undefined;
+					length = end + 1;
+					anchor = { name: `${match[1]}.`, ...(expression ? { expression } : {}) };
+				}
+			}
+			if (rest[length] === "(") {
+				let depth = 0;
+				let end = length;
+				for (; end < rest.length; end += 1) {
+					if (rest[end] === "(") depth += 1;
+					if (rest[end] === ")") {
+						depth -= 1;
+						if (depth === 0) break;
+					}
+				}
+				if (depth === 0) {
+					expression = rest.slice(length + 1, end).trim() || undefined;
+					length = end + 1;
+				}
+			}
+			anchor ??= { name: match[1] as string, ...(expression ? { expression } : {}) };
+			rest = rest.slice(length);
+		}
+	}
+
+	const attributes: RawAttribute[] = [];
+	if (rest.startsWith("(")) {
+		let depth = 0;
+		let end = 0;
+		for (; end < rest.length; end++) {
+			const char = rest[end];
+			if (char === "(") depth += 1;
+			if (char === ")") {
+				depth -= 1;
+				if (depth === 0) {
+					end += 1;
+					break;
+				}
+			}
+		}
+		attributes.push(...parseAttributes(rest.slice(1, end - 1)));
+		rest = rest.slice(end);
+	}
+
+	if (id !== undefined) {
+		attributes.unshift({ name: "id", kind: "string", value: id });
+	}
+	if (classes.length > 0) {
+		attributes.unshift({
+			name: "class",
+			kind: "string",
+			value: classes.join(" "),
+		});
+	}
+
+	const inline = rest.trim();
+	if (inline === ".") {
+		return { name, attributes, blockText: true, anchor };
+	}
+
+	if (inline.startsWith("!=")) {
+		return {
+			name,
+			attributes,
+			output: inline.slice(2).trim(),
+			escaped: false,
+			blockText: false,
+			anchor,
+		};
+	}
+
+	if (inline.startsWith("=")) {
+		return {
+			name,
+			attributes,
+			output: inline.slice(1).trim(),
+			escaped: true,
+			blockText: false,
+			anchor,
+		};
+	}
+
+	return {
+		name,
+		attributes,
+		text: inline.length > 0 ? inline : undefined,
+		blockText: false,
+		anchor,
+	};
+}
+
+/** Splits `each value, key in list` into its parts. */
+export function parseEach(value: string): {
+	value: string;
+	key?: string;
+	list: string;
+} {
+	const match = /^([\w$]+)\s*(?:,\s*([\w$]+)\s*)?\s+(?:in|of)\s+(.+)$/.exec(
+		value.trim(),
+	);
+	if (!match) {
+		throw new Error(`Invalid each expression: ${value}`);
+	}
+	return {
+		value: match[1] as string,
+		key: match[2],
+		list: (match[3] as string).trim(),
+	};
+}
+
+/** Turns a template into a flat list of tokens. */
+export function lex(source: string): Token[] {
+	const { frontmatter, body } = extractFrontmatter(source);
+	const tokens: Token[] = [];
+
+	if (frontmatter.trim().length > 0) {
+		tokens.push({
+			type: "frontmatter",
+			indent: 0,
+			line: 1,
+			value: frontmatter,
+		});
+	}
+
+	for (const line of foldLines(body)) {
+		const { text, indent, line: lineNumber } = line;
+		const trimmed = text.trim();
+
+		if (trimmed.startsWith("//-")) {
+			tokens.push({
+				type: "comment",
+				indent,
+				line: lineNumber,
+				value: trimmed.slice(3).trim(),
+				silent: true,
+			});
+			continue;
+		}
+
+		if (trimmed.startsWith("//")) {
+			tokens.push({
+				type: "comment",
+				indent,
+				line: lineNumber,
+				value: trimmed.slice(2).trim(),
+				silent: false,
+			});
+			continue;
+		}
+
+		if (trimmed.startsWith("!=")) {
+			tokens.push({
+				type: "out",
+				indent,
+				line: lineNumber,
+				value: trimmed.slice(2).trim(),
+				escaped: false,
+			});
+			continue;
+		}
+
+		if (trimmed.startsWith("=")) {
+			tokens.push({
+				type: "out",
+				indent,
+				line: lineNumber,
+				value: trimmed.slice(1).trim(),
+				escaped: true,
+			});
+			continue;
+		}
+
+		if (trimmed.startsWith("- ") || trimmed === "-") {
+			tokens.push({
+				type: "code",
+				indent,
+				line: lineNumber,
+				value: trimmed === "-" ? "" : trimmed.slice(2).trim(),
+			});
+			continue;
+		}
+
+		if (trimmed.startsWith("|")) {
+			tokens.push({
+				type: "text",
+				indent,
+				line: lineNumber,
+				value: trimmed.slice(1).trim(),
+			});
+			continue;
+		}
+
+		if (trimmed === "$$$") {
+			tokens.push({
+				type: "test",
+				indent,
+				line: lineNumber,
+				value: trimmed,
+			});
+			continue;
+		}
+
+		if (/^doctype\b/i.test(trimmed)) {
+			tokens.push({
+				type: "doctype",
+				indent,
+				line: lineNumber,
+				value: trimmed.slice("doctype".length).trim(),
+			});
+			continue;
+		}
+
+		const keywordMatch = /^([a-zA-Z]+)\b\s*(.*)$/.exec(trimmed);
+		if (keywordMatch) {
+			const keyword = keywordMatch[1] as string;
+			const keywordValue = (keywordMatch[2] ?? "").trim();
+			if (KEYWORDS.has(keyword)) {
+				tokens.push({
+					type: "keyword",
+					indent,
+					line: lineNumber,
+					value: trimmed,
+					keyword,
+					keywordValue,
+				});
+				continue;
+			}
+		}
+
+		if (trimmed.startsWith("+")) {
+			const callMatch = /^\+([a-zA-Z_$][\w$]*)\s*(?:\(([\s\S]*)\))?\s*$/.exec(
+				trimmed,
+			);
+			if (callMatch) {
+				tokens.push({
+					type: "keyword",
+					indent,
+					line: lineNumber,
+					value: trimmed,
+					keyword: "mixin-call",
+					keywordValue: callMatch[1] as string,
+					text: (callMatch[2] ?? "").trim(),
+				});
+				continue;
+			}
+		}
+
+		const tag = parseTagLine(text);
+		tokens.push({
+			type: "tag",
+			indent,
+			line: lineNumber,
+			value: trimmed,
+			name: tag.name,
+			attributes: tag.attributes,
+			text: tag.text,
+			output: tag.output,
+			escaped: tag.escaped,
+			blockText: tag.blockText,
+			anchor: tag.anchor,
+		});
+	}
+
+	return tokens;
+}
diff --git a/views/engine/parser.ts b/views/engine/parser.ts
new file mode 100644
index 0000000..be3d234
--- /dev/null
+++ b/views/engine/parser.ts
@@ -0,0 +1,485 @@
+import { parseEach, parseTextParts } from "./lexer.ts";
+import type {
+	CaseNode,
+	IfBranch,
+	Node,
+	PropDeclaration,
+	Token,
+} from "./types.ts";
+
+interface TokenNode {
+	token: Token;
+	children: TokenNode[];
+}
+
+/** Builds the indentation tree of the token list. */
+export function buildTree(tokens: Token[]): TokenNode[] {
+	const root: TokenNode[] = [];
+	const stack: { indent: number; nodes: TokenNode[] }[] = [
+		{ indent: -1, nodes: root },
+	];
+
+	for (const token of tokens) {
+		while (
+			stack.length > 1 &&
+			token.indent <= (stack[stack.length - 1] as { indent: number }).indent
+		) {
+			stack.pop();
+		}
+		const current = stack[stack.length - 1] as {
+			indent: number;
+			nodes: TokenNode[];
+		};
+		const node: TokenNode = { token, children: [] };
+		current.nodes.push(node);
+		stack.push({ indent: token.indent, nodes: node.children });
+	}
+
+	return root;
+}
+
+/**
+ * Splits a type into the type and the default value.
+ */
+export function splitDefault(value: string): {
+	type: string;
+	default?: string;
+} {
+	for (let index = 0; index < value.length; index += 1) {
+		if (value[index] !== "=") continue;
+		const next = value[index + 1];
+		const previous = value[index - 1];
+		if (next === "=" || next === ">") {
+			index += 1;
+			continue;
+		}
+		if (previous === "=" || previous === "!" || previous === "<" || previous === ">") {
+			continue;
+		}
+		return {
+			type: value.slice(0, index).trim(),
+			default: value.slice(index + 1).trim(),
+		};
+	}
+	return { type: value.trim() };
+}
+
+function parseProps(children: TokenNode[]): PropDeclaration[] {
+	const props: PropDeclaration[] = [];
+	for (const child of children) {
+		const token = child.token;
+		if (token.type !== "tag" && token.type !== "text") continue;
+		const rawName = (token.name ?? token.value).replace(/:$/, "").trim();
+		if (!rawName) continue;
+		let optional = rawName.endsWith("?");
+		const name = optional ? rawName.slice(0, -1) : rawName;
+		let rest = (token.text ?? "").trim();
+		if (rest.startsWith("?")) {
+			optional = true;
+			rest = rest.slice(1).trim();
+		}
+		if (rest.startsWith(":")) {
+			rest = rest.slice(1).trim();
+		}
+
+		const split = splitDefault(rest);
+		const type = split.type;
+		const defaultValue = split.default;
+
+		props.push({
+			name,
+			type: type.length > 0 ? type : "unknown",
+			optional,
+			defaultValue,
+		});
+	}
+	return props;
+}
+
+function parseComponentProps(children: TokenNode[]): Record<string, string> {
+	const props: Record<string, string> = {};
+	for (const child of children) {
+		const token = child.token;
+		if (token.type !== "tag" && token.type !== "text") continue;
+		const name = (token.name ?? token.value).replace(/:$/, "").trim();
+		if (!name) continue;
+		props[name] = (token.text ?? "").trim();
+	}
+	return props;
+}
+
+function transform(tokenNodes: TokenNode[]): Node[] {
+	const nodes: Node[] = [];
+	let index = 0;
+
+	while (index < tokenNodes.length) {
+		const entry = tokenNodes[index] as TokenNode;
+		const token = entry.token;
+
+		switch (token.type) {
+			case "tag": {
+				let children = transform(entry.children);
+				if (token.output !== undefined) {
+					children = [
+						{
+							kind: "out",
+							code: token.output,
+							escaped: token.escaped !== false,
+						},
+						...children,
+					];
+				}
+				if (token.text !== undefined && token.text.length > 0) {
+					children = [
+						{ kind: "text", parts: parseTextParts(token.text) },
+						...children,
+					];
+				}
+				if (token.blockText) {
+					const raw = entry.children
+						.map((child) => child.token.value.trim())
+						.join("\n");
+					children = [{ kind: "text", parts: parseTextParts(raw) }];
+				}
+				nodes.push({
+					kind: "element",
+					name: token.name ?? "div",
+					attributes: token.attributes ?? [],
+					children,
+					selfClosing: false,
+					anchor: token.anchor,
+				});
+				index += 1;
+				break;
+			}
+
+			case "text": {
+				nodes.push({ kind: "text", parts: parseTextParts(token.value) });
+				index += 1;
+				break;
+			}
+
+			case "code": {
+				nodes.push({ kind: "code", code: token.value });
+				index += 1;
+				break;
+			}
+
+			case "out": {
+				nodes.push({
+					kind: "out",
+					code: token.value,
+					escaped: token.escaped !== false,
+				});
+				index += 1;
+				break;
+			}
+
+			case "comment": {
+				nodes.push({
+					kind: "comment",
+					value: token.value ?? "",
+					silent: token.silent === true,
+					children: transform(entry.children),
+				});
+				index += 1;
+				break;
+			}
+
+			case "test": {
+				nodes.push({
+					kind: "test",
+					code: entry.children
+						.map((child) => child.token.value)
+						.join("\n"),
+				});
+				index += 1;
+				break;
+			}
+
+			case "doctype": {
+				nodes.push({ kind: "doctype", value: token.value });
+				index += 1;
+				break;
+			}
+
+			case "keyword": {
+				const keyword = token.keyword ?? "";
+
+				if (keyword === "if" || keyword === "unless") {
+					const branches: IfBranch[] = [
+						{
+							test: token.keywordValue ?? "",
+							negate: keyword === "unless",
+							children: transform(entry.children),
+						},
+					];
+
+					let cursor = index + 1;
+					while (cursor < tokenNodes.length) {
+						const next = (tokenNodes[cursor] as TokenNode).token;
+						if (next.keyword !== "else") break;
+						const value = (next.keywordValue ?? "").trim();
+						if (value.startsWith("if")) {
+							branches.push({
+								test: value.slice(2).trim(),
+								negate: false,
+								children: transform((tokenNodes[cursor] as TokenNode).children),
+							});
+						} else {
+							branches.push({
+								test: null,
+								negate: false,
+								children: transform((tokenNodes[cursor] as TokenNode).children),
+							});
+						}
+						cursor += 1;
+					}
+
+					nodes.push({ kind: "if", branches });
+					index = cursor;
+					break;
+				}
+
+				if (keyword === "each") {
+					const parsed = parseEach(token.keywordValue ?? "");
+					nodes.push({
+						kind: "each",
+						value: parsed.value,
+						key: parsed.key,
+						list: parsed.list,
+						children: transform(entry.children),
+					});
+					index += 1;
+					break;
+				}
+
+				if (keyword === "while") {
+					nodes.push({
+						kind: "while",
+						test: token.keywordValue ?? "",
+						children: transform(entry.children),
+					});
+					index += 1;
+					break;
+				}
+
+				if (keyword === "case") {
+					const cases: { test?: string; children: Node[] }[] = [];
+					for (const child of entry.children) {
+						const childToken = child.token;
+						if (childToken.keyword === "when") {
+							cases.push({
+								test: childToken.keywordValue ?? "",
+								children: transform(child.children),
+							});
+						} else if (childToken.keyword === "default") {
+							cases.push({ children: transform(child.children) });
+						}
+					}
+					const caseNode: CaseNode = {
+						kind: "case",
+						subject: token.keywordValue ?? "",
+						cases,
+					};
+					nodes.push(caseNode);
+					index += 1;
+					break;
+				}
+
+				if (keyword === "mixin") {
+					const definition = /^([\w$-]+)\s*\(([\s\S]*)\)\s*$/.exec(
+						(token.keywordValue ?? "").trim(),
+					);
+					nodes.push({
+						kind: "mixin",
+						name: definition
+							? (definition[1] as string)
+							: (token.keywordValue ?? "").trim(),
+						params: definition ? (definition[2] as string).trim() : "",
+						children: transform(entry.children),
+					});
+					index += 1;
+					break;
+				}
+
+				if (keyword === "mixin-call") {
+					nodes.push({
+						kind: "mixin-call",
+						name: token.keywordValue ?? "",
+						args: token.text ?? "",
+						children: transform(entry.children),
+					});
+					index += 1;
+					break;
+				}
+
+				if (keyword === "include") {
+					nodes.push({
+						kind: "include",
+						path: (token.keywordValue ?? "").replace(/^['"]|['"]$/g, ""),
+						children: [],
+					});
+					index += 1;
+					break;
+				}
+
+				if (keyword === "extends") {
+					nodes.push({
+						kind: "extends",
+						path: (token.keywordValue ?? "").replace(/^['"]|['"]$/g, ""),
+					});
+					index += 1;
+					break;
+				}
+
+				if (
+					keyword === "block" ||
+					keyword === "append" ||
+					keyword === "prepend"
+				) {
+					nodes.push({
+						kind: "block",
+						name: (token.keywordValue ?? "default").trim(),
+						mode:
+							keyword === "append"
+								? "append"
+								: keyword === "prepend"
+									? "prepend"
+									: "replace",
+						children: transform(entry.children),
+					});
+					index += 1;
+					break;
+				}
+
+				if (keyword === "slot") {
+					nodes.push({
+						kind: "slot",
+						name: (token.keywordValue ?? "default").trim(),
+						children: transform(entry.children),
+					});
+					index += 1;
+					break;
+				}
+
+				if (keyword === "yield") {
+					nodes.push({
+						kind: "yield",
+						name: (token.keywordValue ?? "default").trim(),
+					});
+					index += 1;
+					break;
+				}
+
+				if (keyword === "portal") {
+					nodes.push({
+						kind: "portal",
+						name: (token.keywordValue ?? "default").trim().replace(/^['"]|['"]$/g, ""),
+						children: transform(entry.children),
+					});
+					index += 1;
+					break;
+				}
+
+				if (keyword === "props") {
+					nodes.push({ kind: "props", props: parseProps(entry.children) });
+					index += 1;
+					break;
+				}
+
+				if (keyword === "component" || keyword === "island") {
+					const props: Record<string, string> = {};
+					const renders: { name: string; children: Node[] }[] = [];
+					for (const child of entry.children) {
+						if (child.token.keyword === "render") {
+							renders.push({
+								name: (child.token.keywordValue ?? "").trim(),
+								children: transform(child.children),
+							});
+							continue;
+						}
+						const assignment = parseComponentProps([child]);
+						Object.assign(props, assignment);
+					}
+					nodes.push({
+						kind: keyword,
+						name: (token.keywordValue ?? "").trim(),
+						props,
+						renders,
+					});
+					index += 1;
+					break;
+				}
+
+				index += 1;
+				break;
+			}
+
+			default:
+				index += 1;
+				break;
+		}
+	}
+
+	return nodes;
+}
+
+export interface ParsedTemplate {
+	nodes: Node[];
+	frontmatter: string;
+}
+
+/** Parses a template into its AST. */
+export function parse(tokens: Token[]): ParsedTemplate {
+	const frontmatterToken = tokens.find((token) => token.type === "frontmatter");
+	const rest = tokens.filter((token) => token.type !== "frontmatter");
+	return {
+		nodes: transform(buildTree(rest)),
+		frontmatter: frontmatterToken?.value ?? "",
+	};
+}
+
+/** Collects every `props` block of a template. */
+export function collectProps(nodes: Node[]): PropDeclaration[] {
+	const props: PropDeclaration[] = [];
+	for (const node of nodes) {
+		if (node.kind === "props") {
+			props.push(...node.props);
+		}
+	}
+	return props;
+}
+
+/** Collects every named block of a template. */
+export function collectBlocks(
+	nodes: Node[],
+): Map<string, { mode: "replace" | "append" | "prepend"; children: Node[] }> {
+	const blocks = new Map<
+		string,
+		{ mode: "replace" | "append" | "prepend"; children: Node[] }
+	>();
+	for (const node of nodes) {
+		if (node.kind === "block") {
+			blocks.set(node.name, { mode: node.mode, children: node.children });
+		}
+	}
+	return blocks;
+}
+
+/** Collects every mixin definition of a template. */
+export function collectMixins(
+	nodes: Node[],
+): { name: string; params: string; children: Node[] }[] {
+	const mixins: { name: string; params: string; children: Node[] }[] = [];
+	for (const node of nodes) {
+		if (node.kind === "mixin") {
+			mixins.push({
+				name: node.name,
+				params: node.params,
+				children: node.children,
+			});
+		}
+	}
+	return mixins;
+}
diff --git a/views/engine/runtime.ts b/views/engine/runtime.ts
new file mode 100644
index 0000000..a42a346
--- /dev/null
+++ b/views/engine/runtime.ts
@@ -0,0 +1,562 @@
+import { existsSync, statSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import { dirname, isAbsolute, join, resolve } from "node:path";
+import { compileTemplate } from "./compiler.ts";
+import { lex } from "./lexer.ts";
+import { collectProps, parse } from "./parser.ts";
+import type { Node, PropDeclaration } from "./types.ts";
+import { isSpugComponentRender, type ComponentContext, type ComponentRegistry, type SpugComponentRender } from "../components.ts";
+import { compileCss, styleTag } from "../css/index.ts";
+import { isRaw, raw, styleValue } from "../raw.ts";
+import type { DeferredChunk } from "../../contracts/typegen/http/response.ts";
+import type { MuddleHooks } from "../hooks.ts";
+
+/**
+ * Template runtime.
+ *
+ * Compiles templates, resolves includes and extends and provides the helpers
+ * used by the generated code.
+ */
+
+export interface TemplateHelpers {
+	escapeHtml(value: string): string;
+	stringify(value: unknown): string;
+	/** Renders a value, raw values are never escaped. */
+	render(value: unknown, escaped: boolean): string;
+	/** Transforms an object into the value of a style attribute. */
+	style(value: unknown): string;
+	attr(name: string, value: unknown): string;
+	attrBoolean(name: string): string;
+	/** Merges the classes of a tag. */
+	classes(values: unknown[]): string;
+}
+
+export type CompiledFunction = (
+	runtime: TemplateRuntime,
+	locals: Record<string, unknown>,
+) => Promise<string>;
+
+export interface CompiledBlock {
+	mode: "replace" | "append" | "prepend";
+	fn: CompiledFunction;
+}
+
+export interface CompiledTemplate {
+	/** Absolute path of the template. */
+	path: string;
+	template: CompiledFunction;
+	blocks: Map<string, CompiledBlock>;
+	mixins: Record<string, CompiledFunction>;
+	/** Props declared by the template. */
+	props: PropDeclaration[];
+	/** Frontmatter of the template. */
+	frontmatter: string;
+	/** Frontmatter of the template, evaluated before the body. */
+	frontmatterFn?: CompiledFunction;
+	/** Identifiers used by the template. */
+	uses: string[];
+	/** The assertions of the template, written in a `$$$` block. */
+	tests: string[];
+	/** Template this template extends, if any. */
+	extends?: string;
+}
+
+/** Context of a single render. */
+export interface RenderContext {
+	/** Locals of the render. */
+	locals: Record<string, unknown>;
+	/** Route parameters of the render. */
+	params: Record<string, string>;
+	/** Chunks rendered after the shell. */
+	deferred: DeferredChunk[];
+}
+
+export interface TemplateRuntime {
+	helpers: TemplateHelpers;
+	/** File of the template, available in the frontmatter as `__muddle`. */
+	file: { path: string; dir: string };
+	getBlock(name: string, fallback: CompiledFunction): Promise<string>;
+	renderComponent(
+		name: string,
+		props: Record<string, unknown>,
+	): Promise<string>;
+	renderIsland(name: string, props: Record<string, unknown>): Promise<string>;
+	/** Server components registered in the application. */
+	components: ComponentRegistry;
+	/** Context of the current render. */
+	context: RenderContext;
+}
+
+export const helpers: TemplateHelpers = {
+	escapeHtml(value: string): string {
+		return String(value)
+			.replace(/&/g, "&")
+			.replace(/</g, "<")
+			.replace(/>/g, ">")
+			.replace(/"/g, """)
+			.replace(/'/g, "'");
+	},
+	stringify(value: unknown): string {
+		if (value === null || value === undefined) return "";
+		if (typeof value === "string") return value;
+		if (typeof value === "number" || typeof value === "boolean") {
+			return String(value);
+		}
+		if (value instanceof Date) return value.toISOString();
+		if (typeof value === "object") {
+			try {
+				return JSON.stringify(value);
+			} catch {
+				return String(value);
+			}
+		}
+		return String(value);
+	},
+	attr(name: string, value: unknown): string {
+		if (value === false || value === null || value === undefined) return "";
+		if (value === true) return ` ${name}="${name}"`;
+		return ` ${name}="${helpers.escapeHtml(helpers.stringify(value))}"`;
+	},
+	attrBoolean(name: string): string {
+		return ` ${name}="${name}"`;
+	},
+	render(value: unknown, escaped: boolean): string {
+		if (isRaw(value)) return value.html;
+		const text = helpers.stringify(value);
+		return escaped ? helpers.escapeHtml(text) : text;
+	},
+	style(value: unknown): string {
+		return styleValue(value);
+	},
+	classes(values: unknown[]): string {
+		return values
+			.filter(
+				(value) =>
+					value !== undefined &&
+					value !== null &&
+					value !== false &&
+					value !== "",
+			)
+			.map((value) => String(value))
+			.join(" ");
+	},
+};
+
+interface CompiledArtifact {
+	template: CompiledFunction;
+	frontmatter?: CompiledFunction;
+	blocks: Record<string, CompiledBlock>;
+	mixins: Record<string, CompiledFunction>;
+	/** Identifiers used by the template. */
+	uses: string[];
+	/** The assertions of the template, written in a `$$$` block. */
+	tests: string[];
+}
+
+export interface TemplateEngineOptions {
+	/** Directory holding the templates. */
+	viewsDir: string;
+	/** Root directory of the project, template paths are resolved against it. */
+	root?: string;
+	/** Directory holding the components, defaults to `viewsDir/components`. */
+	componentsDir?: string;
+	/** Server components available to the templates. */
+	components?: ComponentRegistry;
+	/** Layout templates wrapped around every page render. */
+	globalLayouts?: string[];
+	/** Contextual render expansions applied after Spug composition. */
+	hooks?: MuddleHooks;
+}
+
+/** Merges the blocks of a child template into the blocks of its parent. */
+export function mergeBlocks(
+	parent: Map<string, CompiledBlock>,
+	child: Map<string, CompiledBlock>,
+): Map<string, CompiledBlock> {
+	const merged = new Map(parent);
+	for (const [name, block] of child) {
+		const existing = merged.get(name);
+		if (!existing) {
+			merged.set(name, block);
+			continue;
+		}
+		if (block.mode === "append") {
+			const parentFn = existing.fn;
+			const childFn = block.fn;
+			merged.set(name, {
+				mode: "replace",
+				fn: async (runtime, locals) =>
+					`${await parentFn(runtime, locals)}${await childFn(runtime, locals)}`,
+			});
+			continue;
+		}
+		if (block.mode === "prepend") {
+			const parentFn = existing.fn;
+			const childFn = block.fn;
+			merged.set(name, {
+				mode: "replace",
+				fn: async (runtime, locals) =>
+					`${await childFn(runtime, locals)}${await parentFn(runtime, locals)}`,
+			});
+			continue;
+		}
+		merged.set(name, block);
+	}
+	return merged;
+}
+
+export class TemplateEngine {
+	private readonly cache = new Map<
+		string,
+		{ mtime: number; compiled: CompiledTemplate }
+	>();
+
+	constructor(private readonly options: TemplateEngineOptions) {}
+
+	/** Directory holding the templates. */
+	get viewsDir(): string {
+		return this.options.viewsDir;
+	}
+
+	/** Directory holding the components. */
+	get componentsDir(): string {
+		return (
+			this.options.componentsDir ?? join(this.options.viewsDir, "components")
+		);
+	}
+
+	/** Server components available to the templates. */
+	get components(): ComponentRegistry {
+		return this.options.components ?? new Map();
+	}
+
+	/** Resolves a template path relative to the views directory. */
+	resolvePath(templatePath: string, from?: string): string {
+		const candidates: string[] = [];
+		if (isAbsolute(templatePath)) {
+			candidates.push(templatePath);
+		} else {
+			if (from) candidates.push(resolve(dirname(from), templatePath));
+			candidates.push(resolve(this.options.viewsDir, templatePath));
+			if (this.options.root) {
+				candidates.push(resolve(this.options.root, templatePath));
+			}
+		}
+		for (const candidate of candidates) {
+			if (existsSync(candidate)) return candidate;
+			if (existsSync(`${candidate}.spug`)) return `${candidate}.spug`;
+		}
+		throw new Error(`Template not found: ${templatePath}`);
+	}
+
+	/** Loads and compiles a template, using the cache when possible. */
+	async load(templatePath: string, from?: string): Promise<CompiledTemplate> {
+		const path = this.resolvePath(templatePath, from);
+		const mtime = statSync(path).mtimeMs;
+		const cached = this.cache.get(path);
+		if (cached && cached.mtime === mtime) return cached.compiled;
+
+		const compiled = await this.compile(path);
+		this.cache.set(path, { mtime, compiled });
+		return compiled;
+	}
+
+	/** Compiles a template without touching the cache. */
+	async compile(path: string): Promise<CompiledTemplate> {
+		const source = await readFile(path, "utf8");
+		const tokens = lex(source);
+		const parsed = parse(tokens);
+
+		const frontmatter = await this.linkIncludes(
+			parsed.nodes,
+			parsed.frontmatter,
+			path,
+		);
+		const extendsPath = parsed.nodes.find((node) => node.kind === "extends");
+		const { source: compiledSource } = compileTemplate(parsed.nodes, {
+			path,
+			dir: dirname(path),
+			frontmatter,
+		});
+
+		const factory = new Function(compiledSource) as () => CompiledArtifact;
+		const artifact = factory();
+
+		const blocks = new Map<string, CompiledBlock>(
+			Object.entries(artifact.blocks),
+		);
+		const props = collectProps(parsed.nodes);
+
+		return {
+			path,
+			template: artifact.template,
+			frontmatterFn: artifact.frontmatter,
+			uses: artifact.uses ?? [],
+			tests: artifact.tests ?? [],
+			blocks,
+			mixins: artifact.mixins,
+			props,
+			frontmatter,
+			extends: extendsPath?.kind === "extends" ? extendsPath.path : undefined,
+		};
+	}
+
+	/** Renders a template with the given locals. */
+	async render(
+		templatePath: string,
+		initialLocals: Record<string, unknown> = {},
+		context?: Partial<RenderContext>,
+	): Promise<string> {
+		const loaded = await this.load(templatePath);
+		const locals: Record<string, unknown> = { ...initialLocals };
+		const compiled = loaded;
+		this.fillLocals(compiled, locals);
+		const renderContext: RenderContext = {
+			locals,
+			params: context?.params ?? {},
+			deferred: context?.deferred ?? [],
+		};
+
+		let html: string;
+		if (compiled.extends) {
+			const parent = await this.load(compiled.extends, compiled.path);
+			const runtime = this.createRuntime(
+				compiled,
+				locals,
+				compiled.blocks,
+				renderContext,
+			);
+			await this.runFrontmatter(compiled, locals, runtime);
+			this.fillLocals(parent, locals);
+			const blocks = mergeBlocks(parent.blocks, compiled.blocks);
+			const parentRuntime = this.createRuntime(
+				parent,
+				locals,
+				blocks,
+				renderContext,
+			);
+			await this.runFrontmatter(parent, locals, parentRuntime);
+			html = await parent.template(parentRuntime, locals);
+		} else {
+			const blocks = mergeBlocks(compiled.blocks, new Map());
+			const runtime = this.createRuntime(compiled, locals, blocks, renderContext);
+			await this.runFrontmatter(compiled, locals, runtime);
+			html = await compiled.template(runtime, locals);
+		}
+		for (const layout of this.options.globalLayouts ?? []) {
+			html = await this.renderLayout(layout, { ...locals, content: raw(html) }, renderContext);
+		}
+		return this.options.hooks
+			? this.options.hooks.renderSpug({ html, path: loaded.path, locals })
+			: html;
+	}
+
+	private async renderLayout(path: string, locals: Record<string, unknown>, context: RenderContext): Promise<string> {
+		const compiled = await this.load(path);
+		const runtime = this.createRuntime(compiled, locals, compiled.blocks, context);
+		await this.runFrontmatter(compiled, locals, runtime);
+		return compiled.template(runtime, locals);
+	}
+
+	/**
+	 * Fills the missing identifiers of a template with `undefined`.
+	 */
+	private fillLocals(
+		compiled: CompiledTemplate,
+		locals: Record<string, unknown>,
+	): void {
+		for (const name of compiled.uses ?? []) {
+			if (!(name in locals)) locals[name] = undefined;
+		}
+	}
+
+	/**
+	 * Evaluates the frontmatter of a template.
+	 */
+	private async runFrontmatter(
+		compiled: CompiledTemplate,
+		locals: Record<string, unknown>,
+		runtime: TemplateRuntime,
+	): Promise<void> {
+		if (!compiled.frontmatterFn) return;
+		const values = await compiled.frontmatterFn(runtime, locals);
+		Object.assign(locals, values);
+	}
+
+	/** Renders a component by name. */
+	async renderComponent(
+		name: string,
+		props: Record<string, unknown>,
+		context?: Partial<RenderContext>,
+	): Promise<string> {
+		const path = this.resolveComponent(name);
+		const compiled = await this.load(path);
+		props = { ...props };
+		this.fillLocals(compiled, props);
+		const runtime = this.createRuntime(
+			compiled,
+			props,
+			compiled.blocks,
+			context,
+		);
+		await this.runFrontmatter(compiled, props, runtime);
+		return compiled.template(runtime, props);
+	}
+
+	/** Renders a component and marks it for client side hydration. */
+	async renderIsland(
+		name: string,
+		props: Record<string, unknown>,
+		context?: Partial<RenderContext>,
+	): Promise<string> {
+		const html = await this.renderComponent(name, props, context);
+		const payload = JSON.stringify(props).replace(/</g, "\\u003c");
+		return `${html}<script type="application/json" data-muddle-island="${name}">${payload}</script>`;
+	}
+
+	private resolveComponent(name: string): string {
+		if (isAbsolute(name) && existsSync(name)) return name;
+		const candidates = [
+			join(this.componentsDir, `${name}.spug`),
+			join(this.componentsDir, name),
+			join(this.viewsDir, `${name}.spug`),
+			join(this.viewsDir, name),
+		];
+		for (const candidate of candidates) {
+			if (existsSync(candidate) && statSync(candidate).isFile()) {
+				return candidate;
+			}
+		}
+		throw new Error(`Component not found: ${name}`);
+	}
+
+	private createRuntime(
+		compiled: CompiledTemplate,
+		locals: Record<string, unknown>,
+		blocks: Map<string, CompiledBlock>,
+		context?: Partial<RenderContext>,
+	): TemplateRuntime {
+		const renderContext: RenderContext = {
+			locals,
+			params: context?.params ?? {},
+			deferred: context?.deferred ?? [],
+		};
+
+		const componentContext: ComponentContext = {
+			defer: (id, content) => {
+				renderContext.deferred.push({
+					id,
+					content:
+						typeof content === "string" ? Promise.resolve(content) : content,
+				});
+			},
+			locals,
+			params: renderContext.params,
+		};
+
+		let deferredCount = 0;
+
+		const runtime: TemplateRuntime = {
+			helpers,
+			file: { path: compiled.path, dir: dirname(compiled.path) },
+			getBlock: async (name, fallback) => {
+				const block = blocks.get(name);
+				if (!block) return fallback(runtime, locals);
+				return block.fn(runtime, locals);
+			},
+			renderComponent: async (name, props) => {
+				const definition = this.components.get(name);
+				if (!definition) {
+					return this.renderComponent(name, props, renderContext);
+				}
+				if (definition.deferred) {
+					deferredCount += 1;
+					const id = `${name}-${deferredCount}`;
+					componentContext.defer(
+						id,
+						Promise.resolve(definition.component.render(props, componentContext))
+							.then((output) => this.renderComponentOutput(output, props, renderContext, definition.requiresSpug)),
+					);
+					return `<div data-muddle-deferred="${id}"></div>`;
+				}
+				return this.renderComponentOutput(await definition.component.render(props, componentContext), props, renderContext, definition.requiresSpug);
+			},
+			renderIsland: (name, props) =>
+				this.renderIsland(name, props, renderContext),
+			components: this.components,
+			context: renderContext,
+		};
+
+		return runtime;
+	}
+
+	private async renderComponentOutput(
+		output: string | SpugComponentRender,
+		props: Record<string, unknown>,
+		context: Partial<RenderContext>,
+		requiresSpug = false,
+	): Promise<string> {
+		if (!isSpugComponentRender(output)) {
+			if (requiresSpug) throw new Error("@Component renderers must return { spug, stcss } rather than raw HTML");
+			return output;
+		}
+		const html = await this.renderComponent(output.spug, { ...props, ...(output.props ?? {}) }, context);
+		const styles = Array.isArray(output.stcss) ? output.stcss : output.stcss ? [output.stcss] : [];
+		const css = await Promise.all(styles.map(async (style) => {
+			const path = resolve(this.componentsDir, style);
+			return existsSync(path) ? compileCss(await readFile(path, "utf8")) : compileCss(style);
+		}));
+		return `${css.filter(Boolean).map(styleTag).join("")}${html}`;
+	}
+
+	/** Inlines the included files and collects their frontmatter. */
+	private async linkIncludes(
+		nodes: Node[],
+		frontmatter: string,
+		from: string,
+	): Promise<string> {
+		let collected = frontmatter;
+
+		for (const node of nodes) {
+			const children = childrenOf(node);
+			if (!children) continue;
+
+			if (node.kind === "include") {
+				const path = this.resolvePath(node.path, from);
+				const source = await readFile(path, "utf8");
+				const parsed = parse(lex(source));
+				node.children = parsed.nodes;
+				const nested = await this.linkIncludes(
+					parsed.nodes,
+					parsed.frontmatter,
+					path,
+				);
+				collected = `${collected}\n${nested}`;
+				continue;
+			}
+
+			collected = await this.linkIncludes(children, collected, from);
+		}
+
+		return collected;
+	}
+}
+
+function childrenOf(node: Node): Node[] | undefined {
+	switch (node.kind) {
+		case "element":
+		case "each":
+		case "while":
+		case "mixin":
+		case "mixin-call":
+		case "include":
+		case "block":
+		case "slot":
+		case "comment":
+			return node.children;
+		case "if":
+			return node.branches.flatMap((branch) => branch.children);
+		default:
+			return undefined;
+	}
+}
diff --git a/views/engine/types.ts b/views/engine/types.ts
new file mode 100644
index 0000000..4b55a42
--- /dev/null
+++ b/views/engine/types.ts
@@ -0,0 +1,244 @@
+export type TokenType =
+	| "tag"
+	| "text"
+	| "code"
+	| "out"
+	| "comment"
+	| "doctype"
+	| "keyword"
+	| "frontmatter"
+	| "test"
+	| "rawtext";
+
+export interface RawAttribute {
+	name: string;
+	value?: string;
+	kind: "string" | "expression" | "boolean";
+}
+
+/** A single line of a template, already split into its semantic parts. */
+export interface Token {
+	type: TokenType;
+	/** Indentation width, used to build the tree. */
+	indent: number;
+	/** Line number in the source file, used for error messages. */
+	line: number;
+	/** Raw text of the line. */
+	value: string;
+	/** Tag name, only for `tag` tokens. */
+	name?: string;
+	/** Attributes, only for `tag` tokens. */
+	attributes?: RawAttribute[];
+	/** Inline text following the tag, only for `tag` tokens. */
+	text?: string;
+	/** Buffered expression of the tag, e.g. `p= title`. */
+	output?: string;
+	/** Keyword name, only for `keyword` tokens. */
+	keyword?: string;
+	/** Keyword payload (`each item in items`), only for `keyword` tokens. */
+	keywordValue?: string;
+	/** Whether the tag is followed by a block of raw text (`p.`). */
+	blockText?: boolean;
+	/** A generated relation identity declared with `tag@name()` in SPUG. */
+	anchor?: { name: string; expression?: string };
+	/** Whether a comment is silent (`//-`). */
+	silent?: boolean;
+	/** Whether an output expression is escaped (`=` vs `!=`). */
+	escaped?: boolean;
+}
+
+export type TextPart =
+	| { type: "literal"; value: string }
+	| { type: "expression"; code: string; escaped: boolean };
+
+export interface PropDeclaration {
+	name: string;
+	/** Type expression as written in the template. */
+	type: string;
+	optional: boolean;
+	/** Default value expression, when declared with `=`. */
+	defaultValue?: string;
+}
+
+export interface ElementNode {
+	kind: "element";
+	name: string;
+	attributes: RawAttribute[];
+	children: Node[];
+	selfClosing: boolean;
+	/** A generated relation identity declared with `tag@name()` in SPUG. */
+	anchor?: { name: string; expression?: string };
+}
+
+export interface TextNode {
+	kind: "text";
+	parts: TextPart[];
+}
+
+export interface RawTextNode {
+	kind: "rawtext";
+	value: string;
+}
+
+export interface CodeNode {
+	kind: "code";
+	code: string;
+}
+
+export interface OutNode {
+	kind: "out";
+	code: string;
+	escaped: boolean;
+}
+
+export interface CommentNode {
+	kind: "comment";
+	value: string;
+	silent: boolean;
+	children: Node[];
+}
+
+export interface DoctypeNode {
+	kind: "doctype";
+	value: string;
+}
+
+export interface IfBranch {
+	/** `null` marks the `else` branch. */
+	test: string | null;
+	negate: boolean;
+	children: Node[];
+}
+
+export interface IfNode {
+	kind: "if";
+	branches: IfBranch[];
+}
+
+export interface EachNode {
+	kind: "each";
+	value: string;
+	key?: string;
+	list: string;
+	children: Node[];
+}
+
+export interface WhileNode {
+	kind: "while";
+	test: string;
+	children: Node[];
+}
+
+export interface CaseNode {
+	kind: "case";
+	subject: string;
+	cases: { test?: string; children: Node[] }[];
+}
+
+export interface MixinDefNode {
+	kind: "mixin";
+	name: string;
+	params: string;
+	children: Node[];
+}
+
+export interface MixinCallNode {
+	kind: "mixin-call";
+	name: string;
+	args: string;
+	children: Node[];
+}
+
+export interface IncludeNode {
+	kind: "include";
+	path: string;
+	/** Included file content, resolved by the linker. */
+	children: Node[];
+}
+
+export interface ExtendsNode {
+	kind: "extends";
+	path: string;
+}
+
+export interface BlockNode {
+	kind: "block";
+	name: string;
+	mode: "replace" | "append" | "prepend";
+	children: Node[];
+}
+
+export interface SlotNode {
+	kind: "slot";
+	name: string;
+	children: Node[];
+}
+
+export interface YieldNode {
+	kind: "yield";
+	name: string;
+}
+
+export interface PropsNode {
+	kind: "props";
+	props: PropDeclaration[];
+}
+
+export interface ComponentNode {
+	kind: "component" | "island";
+	name: string;
+	/** Prop name to expression. */
+	props: Record<string, string>;
+	/** Renderers that are applied inline by the component. */
+	renders: { name: string; children: Node[] }[];
+}
+
+/**
+ * A block of assertions.
+ */
+export interface TestNode {
+	kind: "test";
+	/** The assertions of the block. */
+	code: string;
+}
+
+/**
+ * A renderer that is applied inline.
+ */
+export interface RenderNode {
+	kind: "render";
+	/** Name of the prop the renderer is handed to. */
+	name: string;
+	children: Node[];
+}
+
+export interface PortalNode {
+	kind: "portal";
+	name: string;
+	children: Node[];
+}
+
+export type Node =
+	| ElementNode
+	| TextNode
+	| RawTextNode
+	| CodeNode
+	| OutNode
+	| CommentNode
+	| DoctypeNode
+	| IfNode
+	| EachNode
+	| WhileNode
+	| CaseNode
+	| MixinDefNode
+	| MixinCallNode
+	| IncludeNode
+	| ExtendsNode
+	| BlockNode
+	| SlotNode
+	| YieldNode
+	| PropsNode
+	| ComponentNode
+	| TestNode
+	| RenderNode
+	| PortalNode;
diff --git a/views/hooks.ts b/views/hooks.ts
new file mode 100644
index 0000000..e8192c7
--- /dev/null
+++ b/views/hooks.ts
@@ -0,0 +1,246 @@
+import type { CssDeclaration, CssNode } from "./css/parser.ts";
+
+export interface SpugHookContext {
+	html: string;
+	path: string;
+	locals: Record<string, unknown>;
+}
+
+export type SpugExpansion = (context: SpugHookContext) => string | Promise<string>;
+
+export interface StcssValueHookContext {
+	name: string;
+	inner: string;
+	resolve(value: string): string;
+}
+
+export type StcssValueExpansion = (context: StcssValueHookContext) => string | undefined;
+
+export interface StcssCalculationHookContext {
+	name: string;
+	args?: string;
+	resolve(value: string): string;
+}
+
+export type StcssCalculationExpansion = (context: StcssCalculationHookContext) => string | undefined;
+
+export interface StcssDeclarationHookContext {
+	selector: string;
+	declaration: CssDeclaration;
+	declarations: CssDeclaration[];
+	depth: number;
+	resolve(value: string): string;
+}
+
+export type StcssDeclarationExpansion = (context: StcssDeclarationHookContext) => string[] | undefined;
+
+export interface StcssAtRuleHookContext {
+	name: string;
+	params: string;
+	selector: string;
+	depth: number;
+	children: CssNode[];
+	resolve(value: string): string;
+	renderChildren(): string;
+}
+
+export type StcssAtRuleExpansion = (context: StcssAtRuleHookContext) => string | undefined;
+
+/**
+ * A contextual registry for transformations performed while Spug renders or
+ * STCSS compiles. Registrations are scoped to an explicit registry instance,
+ * so applications can opt into a transformation without changing global state.
+ */
+export class MuddleHooks {
+	private readonly spugExpansions = new Map<string, SpugExpansion>();
+	private readonly valueExpansions = new Map<string, StcssValueExpansion>();
+	private readonly calculationExpansions = new Map<string, StcssCalculationExpansion>();
+	private readonly declarationExpansions: StcssDeclarationExpansion[] = [];
+	private readonly atRuleExpansions = new Map<string, StcssAtRuleExpansion>();
+
+	spug(name: string, expansion: SpugExpansion): this {
+		this.spugExpansions.set(name, expansion);
+		return this;
+	}
+
+	stcssValue(name: string, expansion: StcssValueExpansion): this {
+		this.valueExpansions.set(name, expansion);
+		return this;
+	}
+
+	stcssCalculation(name: string, expansion: StcssCalculationExpansion): this {
+		this.calculationExpansions.set(name.replace(/^\$/, ""), expansion);
+		return this;
+	}
+
+	stcssDeclaration(expansion: StcssDeclarationExpansion): this {
+		this.declarationExpansions.push(expansion);
+		return this;
+	}
+
+	stcssAtRule(name: string, expansion: StcssAtRuleExpansion): this {
+		this.atRuleExpansions.set(name, expansion);
+		return this;
+	}
+
+	async renderSpug(context: SpugHookContext): Promise<string> {
+		let html = context.html;
+		for (const expansion of this.spugExpansions.values()) {
+			html = await expansion({ ...context, html });
+		}
+		return html;
+	}
+
+	expandStcssValue(name: string, inner: string, resolve: (value: string) => string): string | undefined {
+		return this.valueExpansions.get(name)?.({ name, inner, resolve });
+	}
+
+	expandStcssCalculation(name: string, args: string | undefined, resolve: (value: string) => string): string | undefined {
+		return this.calculationExpansions.get(name.replace(/^\$/, ""))?.({ name, args, resolve });
+	}
+
+	expandStcssCalculationTokens(value: string, resolve: (value: string) => string): string {
+		return value.replace(/\$([A-Za-z][\w-]*)\b(?!\s*\()/g, (token, name: string) =>
+			this.expandStcssCalculation(name, undefined, resolve) ?? token);
+	}
+
+	expandStcssDeclarations(context: Omit<StcssDeclarationHookContext, "declaration">): string[] {
+		return context.declarations.flatMap((declaration) => this.declarationExpansions.flatMap((expansion) =>
+			expansion({ ...context, declaration }) ?? []));
+	}
+
+	expandStcssAtRule(context: StcssAtRuleHookContext): string | undefined {
+		return this.atRuleExpansions.get(context.name)?.(context);
+	}
+}
+
+export interface HookBuilder {
+	spug(name: string, expansion: SpugExpansion): void;
+	stcss: {
+		value(name: string, expansion: StcssValueExpansion): void;
+		calculation(name: string, expansion: StcssCalculationExpansion): void;
+		declaration(expansion: StcssDeclarationExpansion): void;
+		atRule(name: string, expansion: StcssAtRuleExpansion): void;
+	};
+}
+
+/** Creates an application-local hook registry through contextual builders. */
+export function defineHooks(build: (hooks: HookBuilder) => void, defaults = true): MuddleHooks {
+	const hooks = createHooks(defaults);
+	build({
+		spug: (name, expansion) => { hooks.spug(name, expansion); },
+		stcss: {
+			value: (name, expansion) => { hooks.stcssValue(name, expansion); },
+			calculation: (name, expansion) => { hooks.stcssCalculation(name, expansion); },
+			declaration: (expansion) => { hooks.stcssDeclaration(expansion); },
+			atRule: (name, expansion) => { hooks.stcssAtRule(name, expansion); },
+		},
+	});
+	return hooks;
+}
+
+export function createHooks(defaults = true): MuddleHooks {
+	const hooks = new MuddleHooks();
+	if (defaults) registerBuiltinStcssExpansions(hooks);
+	return hooks;
+}
+
+function registerBuiltinStcssExpansions(hooks: MuddleHooks): void {
+	hooks.stcssCalculation("center", ({ args, resolve }) => {
+		const size = args?.trim();
+		return size ? `calc(50% - (${resolve(size)} / 2))` : "50%";
+	});
+	hooks.stcssCalculation("offset", ({ args, resolve }) => {
+		const values = splitList(args ?? "").map((value) => resolve(value.trim())).filter(Boolean);
+		if (values.length === 0) return "0px";
+		return values.length === 1 ? values[0] : `calc(${values.join(" + ")})`;
+	});
+	hooks.stcssCalculation("pad", ({ args, resolve }) => {
+		const multiplier = args?.trim();
+		return multiplier ? `calc(var(--muddle-pad, 1rem) * ${resolve(multiplier)})` : "var(--muddle-pad, 1rem)";
+	});
+	hooks.stcssValue("freeform-gradient", ({ inner, resolve }) => {
+		return splitList(resolve(inner))
+			.filter((item) => item.trim().length > 0)
+			.map((item) => {
+				const tokens = gradientTokens(item.trim());
+				if (tokens.length !== 3 && tokens.length !== 4) throw new Error(`Invalid freeform-gradient item "${item.trim()}"`);
+				const [color, x, y, radius] = tokens as [string, string, string, string?];
+				return radius !== undefined
+					? `radial-gradient(circle at ${x} ${y}, ${color}, ${color} calc(${radius} * 0.97), transparent ${radius})`
+					: `radial-gradient(circle farthest-side at ${x} ${y}, ${color}, transparent)`;
+			})
+			.join(", ");
+	});
+	hooks.stcssDeclaration(({ selector, declaration, declarations, depth, resolve }) => {
+		if (declaration.property !== "border-radius" || !resolve(declaration.value).startsWith("concentric") || !selector) return undefined;
+		const outer = resolve(declaration.value).slice("concentric".length).trim() || "var(--concentric-radius, 1rem)";
+		declaration.value = outer;
+		const spacing = concentricSpacing(declarations, resolve);
+		const childRadius = spacing.length > 0 ? `calc(${[outer, ...spacing].map((token) => `(${token})`).join(" - ")})` : "inherit";
+		const indent = "\t".repeat(depth);
+		return [`${indent}${selector} > * {\n${indent}\tborder-radius: ${childRadius};\n${indent}}`];
+	});
+	hooks.stcssDeclaration(({ declaration, declarations }) => {
+		if (declaration.property !== "position" || (declaration.value !== "fixed-center" && declaration.value !== "page-center")) return undefined;
+		declaration.value = declaration.value === "fixed-center" ? "fixed" : "absolute";
+		const set = (property: string, value: string) => {
+			const current = declarations.find((entry) => entry.property === property);
+			if (current) current.value = value;
+			else declarations.push({ property, value });
+		};
+		set("left", "50%");
+		set("top", "50%");
+		const transform = declarations.find((entry) => entry.property === "transform");
+		if (transform) transform.value = `translate(-50%, -50%) ${transform.value}`;
+		else declarations.push({ property: "transform", value: "translate(-50%, -50%)" });
+		return undefined;
+	});
+	hooks.stcssAtRule("concentric", ({ params, selector, depth, resolve }) => {
+		if (!selector) return "";
+		const indent = "\t".repeat(depth);
+		const radius = resolve(params.trim() || "1rem");
+		return `${indent}${selector} {\n${indent}\tborder-radius: ${radius};\n${indent}}\n${indent}${selector} > * {\n${indent}\tborder-radius: inherit;\n${indent}}`;
+	});
+}
+
+function concentricSpacing(declarations: CssDeclaration[], resolve: (value: string) => string): string[] {
+	const find = (property: string): string | undefined => declarations
+		.filter((declaration) => declaration.property === property || declaration.property === `${property}-top` || declaration.property === `${property}-left` || declaration.property === `${property}-block-start` || declaration.property === `${property}-inline-start`)
+		.flatMap((declaration) => gradientTokens(resolve(declaration.value).trim()))
+		.find((value) => value.length > 0 && value !== "solid" && value !== "none" && value !== "0");
+	const spacing = [find("padding"), find("border-width") ?? find("border")].filter((value): value is string => value !== undefined);
+	return spacing;
+}
+
+function gradientTokens(item: string): string[] {
+	const tokens: string[] = [];
+	let current = "";
+	let depth = 0;
+	for (const char of item) {
+		if (char === "(") depth += 1;
+		if (char === ")") depth -= 1;
+		if (/\s/.test(char) && depth === 0) {
+			if (current) tokens.push(current);
+			current = "";
+		} else current += char;
+	}
+	if (current) tokens.push(current);
+	return tokens;
+}
+
+function splitList(value: string): string[] {
+	const items: string[] = [];
+	let current = "";
+	let depth = 0;
+	for (const char of value) {
+		if (char === "(") depth += 1;
+		if (char === ")") depth -= 1;
+		if (char === "," && depth === 0) {
+			items.push(current);
+			current = "";
+		} else current += char;
+	}
+	items.push(current);
+	return items;
+}
diff --git a/views/index.ts b/views/index.ts
new file mode 100644
index 0000000..77d243e
--- /dev/null
+++ b/views/index.ts
@@ -0,0 +1,18 @@
+export * from "./api.ts";
+export * from "./components.ts";
+export * from "./css/index.ts";
+export {
+	collectIdentifiers,
+	collectUses,
+	compileTemplate,
+	mixinParamNames,
+	transformFrontmatter,
+	type CompiledSource,
+	type CompileOptions,
+} from "./engine/compiler.ts";
+export * from "./engine/lexer.ts";
+export * from "./engine/parser.ts";
+export * from "./engine/runtime.ts";
+export * from "./engine/types.ts";
+export * from "./integrations.ts";
+export * from "./markdown.ts";
diff --git a/views/integrations.ts b/views/integrations.ts
new file mode 100644
index 0000000..a4594ae
--- /dev/null
+++ b/views/integrations.ts
@@ -0,0 +1,134 @@
+import { readdir, readFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { join, resolve } from "node:path";
+import type {
+	ContentSchema,
+	Integration,
+	IntegrationContext,
+} from "../contracts/index.ts";
+import { compileCss, type CompileOptions } from "./css/index.ts";
+import { markdownLoader } from "./markdown.ts";
+import { sassLoader, type SassLoaderOptions } from "./css/sass.ts";
+
+export { shadcnIntegration, type ShadcnIntegrationOptions } from "../integrations/shadcn.ts";
+
+export interface MarkdownIntegrationOptions {
+	/** Name of the collection, defaults to `notes`. */
+	name?: string;
+	/** Directory of the collection, relative to the project root. */
+	dir?: string;
+	/** Schema of the frontmatter. */
+	schema?: ContentSchema;
+}
+
+/**
+ * Markdown integration.
+ *
+ * The integration registers the markdown loader and adds the collection of
+ * the content directory to the project.
+ */
+export function markdownIntegration(
+	options: MarkdownIntegrationOptions = {},
+): Integration {
+	const name = options.name ?? "notes";
+	const dir = options.dir ?? "content/notes";
+
+	return {
+		name: "markdown",
+		setup(context: IntegrationContext) {
+			context.loader("markdown", markdownLoader());
+			const collections = context.config.collections ?? [];
+			if (collections.some((collection) => collection.name === name)) return;
+			collections.push({
+				name,
+				dir,
+				loader: "markdown",
+				schema: options.schema,
+			});
+			context.config.collections = collections;
+		},
+	};
+}
+
+export interface StcssIntegrationOptions extends CompileOptions {
+	/** Directory of the stylesheets, relative to the project root. */
+	dir?: string;
+	/** Route the compiled css is served at. */
+	route?: string;
+}
+
+/**
+ * Css integration.
+ *
+ * The integration compiles the structured stylesheets of the project and
+ * serves them at a single route, the browser caches the result.
+ */
+export function stcssIntegration(
+	options: StcssIntegrationOptions = {},
+): Integration {
+	const route = options.route ?? "/_muddle/styles.css";
+
+	return {
+		name: "stcss",
+		async setup(context: IntegrationContext) {
+			context.loader("stcss", {
+				name: "stcss",
+				extensions: [".stcss"],
+				load(file) {
+					return { data: {}, content: compileCss(file.source, options) };
+				},
+			});
+
+			const dir = resolve(context.config.root, options.dir ?? "styles");
+			if (!existsSync(dir)) return;
+
+			const files = (await readdir(dir)).filter((file) =>
+				file.endsWith(".stcss"),
+			);
+			const parts: string[] = [];
+			for (const file of files.sort()) {
+				const source = await readFile(join(dir, file), "utf8");
+				parts.push(compileCss(source, options));
+			}
+			const css = parts.join("\n");
+
+			context.route("GET", route, () =>
+				new Response(css, {
+					headers: {
+						"content-type": "text/css; charset=utf-8",
+						"cache-control": "public, max-age=3600",
+					},
+				}),
+			);
+		},
+	};
+}
+
+/** Registers Sass files as loaders and serves their compiled CSS alongside STCSS. */
+export function sassIntegration(options: SassLoaderOptions = {}): Integration {
+	const route = "/_muddle/sass.css";
+	return {
+		name: "sass",
+		async setup(context) {
+			const loader = sassLoader(options);
+			context.loader("sass", loader);
+			const dir = resolve(context.config.root, options.dir ?? "styles");
+			if (!existsSync(dir)) return;
+			const files = await sassFiles(dir);
+			context.route("GET", route, async () => {
+				const css = await Promise.all(files.filter((file) => !file.split("/").at(-1)?.startsWith("_")).map(async (file) => (await loader.load({ path: join(dir, file), relativePath: `styles/${file}`, source: await readFile(join(dir, file), "utf8") })).content ?? ""));
+				return new Response(css.join("\n"), { headers: { "content-type": "text/css; charset=utf-8" } });
+			});
+		},
+	};
+}
+
+async function sassFiles(dir: string, prefix = ""): Promise<string[]> {
+	const files: string[] = [];
+	for (const entry of await readdir(dir, { withFileTypes: true })) {
+		const relative = `${prefix}${entry.name}`;
+		if (entry.isDirectory()) files.push(...await sassFiles(join(dir, entry.name), `${relative}/`));
+		else if (/\.s[ac]ss$/i.test(entry.name)) files.push(relative);
+	}
+	return files.sort();
+}
diff --git a/views/language.ts b/views/language.ts
new file mode 100644
index 0000000..73e8820
--- /dev/null
+++ b/views/language.ts
@@ -0,0 +1,24 @@
+export interface LanguageCompletion { label: string; detail: string; insertText: string }
+
+export const SPUG_COMPLETIONS: LanguageCompletion[] = [
+	{ label: "props", detail: "Typed component props", insertText: "props\n  ${1:name}: ${2:string}" },
+	{ label: "javascript!", detail: "Embedded TypeScript block", insertText: "javascript!\n  ${1:const value = true;}\nend" },
+	{ label: "component", detail: "SPUG component", insertText: "component ${1:Name}" },
+	{ label: "portal", detail: "Named view-transition boundary", insertText: "portal ${1:main}\n  ${0}" },
+	{ label: "anchor", detail: "Relation identity", insertText: "${1:li}@${2:item}() ${3:content}" },
+];
+
+export const STCSS_COMPLETIONS: LanguageCompletion[] = [
+	{ label: "@responsive", detail: "Mobile-first breakpoint", insertText: "@responsive ${1:md} {\n  ${2}\n}" },
+	{ label: "@concentric", detail: "Inherited child radius", insertText: "@concentric ${1:1rem};" },
+	{ label: "border-radius: concentric", detail: "Concentric radii for children", insertText: "border-radius: concentric ${1:1rem};" },
+	{ label: "freeform-gradient", detail: "Stacked radial gradients", insertText: "background-image: freeform-gradient(${1:#7c3aed} ${2:10%} ${3:50%}, ${4:f00} ${5:70%} ${6:40%});" },
+	{ label: "$center", detail: "Center a known size", insertText: "$center(${1:30rem})" },
+	{ label: "$offset", detail: "Compose positional offsets", insertText: "$offset(${1:$center(30rem)}, ${2:$pad})" },
+	{ label: "$pad", detail: "Shared spacing token", insertText: "$pad(${1:1})" },
+	{ label: "position: fixed-center", detail: "Fixed viewport center", insertText: "position: fixed-center;" },
+	{ label: "position: page-center", detail: "Absolute containing-block center", insertText: "position: page-center;" },
+	{ label: "@predict", detail: "Prerendered geometry", insertText: "@predict max-width max-height transform;" },
+	{ label: "$relate", detail: "Predicted anchor metric", insertText: "$relate[${1:width}](d\"@${2:item}\")" },
+	{ label: "javascript!", detail: "Compile-time values", insertText: "javascript!\n  const ${1:space} = ${2:'1rem'};\nend" },
+];
diff --git a/views/markdown.ts b/views/markdown.ts
new file mode 100644
index 0000000..acb8171
--- /dev/null
+++ b/views/markdown.ts
@@ -0,0 +1,276 @@
+import type { Loader, LoaderFile } from "../contracts/index.ts";
+
+/**
+ * Markdown support.
+ *
+ * A small, dependency free renderer that covers the subset used by content
+ * collections: headings, paragraphs, lists, quotes, code and the usual inline
+ * markup. The loader turns a markdown file into frontmatter and html.
+ */
+
+export interface Frontmatter {
+	[key: string]: unknown;
+}
+
+/** Parses the frontmatter of a markdown file. */
+export function parseFrontmatter(source: string): {
+	frontmatter: Frontmatter;
+	body: string;
+} {
+	const match = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/.exec(source);
+	if (!match) return { frontmatter: {}, body: source };
+	const frontmatter = parseYaml(match[1] as string);
+	return { frontmatter, body: source.slice(match[0].length) };
+}
+
+/** Parses a small subset of yaml: scalars, lists and nested maps. */
+export function parseYaml(source: string): Frontmatter {
+	const result: Frontmatter = {};
+	const lines = source.split("\n");
+	let index = 0;
+
+	while (index < lines.length) {
+		const line = (lines[index] as string).trimEnd();
+		index += 1;
+		if (line.trim().length === 0 || line.trimStart().startsWith("#")) continue;
+
+		const separator = line.indexOf(":");
+		if (separator === -1) continue;
+		const key = line.slice(0, separator).trim();
+		const raw = line.slice(separator + 1).trim();
+
+		if (raw.length === 0) {
+			const items: unknown[] = [];
+			while (index < lines.length) {
+				const next = (lines[index] as string).trim();
+				if (next.length === 0) {
+					index += 1;
+					continue;
+				}
+				if (!next.startsWith("- ")) break;
+				items.push(parseScalar(next.slice(2).trim()));
+				index += 1;
+			}
+			result[key] = items.length > 0 ? items : "";
+			continue;
+		}
+
+		result[key] = parseScalar(raw);
+	}
+
+	return result;
+}
+
+function parseScalar(raw: string): unknown {
+	if (raw.startsWith("[") && raw.endsWith("]")) {
+		return raw
+			.slice(1, -1)
+			.split(",")
+			.map((entry) => parseScalar(entry.trim()))
+			.filter((entry) => entry !== "");
+	}
+	if (raw === "true") return true;
+	if (raw === "false") return false;
+	if (raw === "null") return null;
+	if (raw !== "" && !Number.isNaN(Number(raw))) return Number(raw);
+	return raw.replace(/^['"]|['"]$/g, "");
+}
+
+/** Escapes the html entities of a text. */
+export function escapeHtml(value: string): string {
+	return value
+		.replace(/&/g, "&")
+		.replace(/</g, "<")
+		.replace(/>/g, ">")
+		.replace(/"/g, """);
+}
+
+/**
+ * Renders markdown to html.
+ *
+ * The renderer is intentionally small, it covers the constructs used by the
+ * content collections of a project.
+ */
+export function renderMarkdown(source: string): string {
+	const lines = source.replace(/\r\n/g, "\n").split("\n");
+	const output: string[] = [];
+	let index = 0;
+
+	while (index < lines.length) {
+		const line = lines[index] as string;
+
+		if (line.trim().length === 0) {
+			index += 1;
+			continue;
+		}
+
+		if (/^\s*\$\$\s*$/.test(line)) {
+			const formula: string[] = [];
+			index += 1;
+			while (index < lines.length && !/^\s*\$\$\s*$/.test(lines[index] as string)) {
+				formula.push(lines[index] as string);
+				index += 1;
+			}
+			if (index < lines.length) index += 1;
+			output.push(`<div class="muddle-math">${renderLatex(formula.join("\n"), true)}</div>`);
+			continue;
+		}
+
+		const fence = /^\s*```(\w*)\s*$/.exec(line);
+		if (fence) {
+			const language = fence[1] ?? "";
+			const code: string[] = [];
+			index += 1;
+			while (
+				index < lines.length &&
+				!/^\s*```\s*$/.test(lines[index] as string)
+			) {
+				code.push(lines[index] as string);
+				index += 1;
+			}
+			index += 1;
+			const className = language ? ` class="language-${language}"` : "";
+			output.push(
+				`<pre><code${className}>${escapeHtml(code.join("\n"))}</code></pre>`,
+			);
+			continue;
+		}
+
+		if (/^\s*@@@\s*$/.test(line)) {
+			const graph: string[] = [];
+			index += 1;
+			while (index < lines.length && !/^\s*@@@\s*$/.test(lines[index] as string)) {
+				graph.push(lines[index] as string);
+				index += 1;
+			}
+			index += 1;
+			output.push(`<pre class="mermaid" data-muddle-animate="true">${escapeHtml(graph.join("\n"))}</pre>`);
+			continue;
+		}
+
+		const heading = /^(#{1,6})\s+(.*)$/.exec(line);
+		if (heading) {
+			const level = (heading[1] as string).length;
+			output.push(
+				`<h${level}>${renderInline(heading[2] as string)}</h${level}>`,
+			);
+			index += 1;
+			continue;
+		}
+
+		if (/^\s*(?:---+|\*\*\*+|___+)\s*$/.test(line)) {
+			output.push("<hr>");
+			index += 1;
+			continue;
+		}
+
+		const quote = /^\s*>\s?(.*)$/.exec(line);
+		if (quote) {
+			const quoted: string[] = [];
+			while (index < lines.length) {
+				const next = /^\s*>\s?(.*)$/.exec(lines[index] as string);
+				if (!next) break;
+				quoted.push(next[1] as string);
+				index += 1;
+			}
+			output.push(
+				`<blockquote>${renderMarkdown(quoted.join("\n"))}</blockquote>`,
+			);
+			continue;
+		}
+
+		const bullet = /^\s*[-*+]\s+(.*)$/.exec(line);
+		const ordered = /^\s*\d+[.)]\s+(.*)$/.exec(line);
+		if (bullet || ordered) {
+			const tag = bullet ? "ul" : "ol";
+			const items: unknown[] = [];
+			while (index < lines.length) {
+				const current = lines[index] as string;
+				const match = bullet
+					? /^\s*[-*+]\s+(.*)$/.exec(current)
+					: /^\s*\d+[.)]\s+(.*)$/.exec(current);
+				if (!match) break;
+				items.push(match[1] as string);
+				index += 1;
+			}
+			const rendered = items
+				.map((item) => `<li>${renderInline(String(item))}</li>`)
+				.join("");
+			output.push(`<${tag}>${rendered}</${tag}>`);
+			continue;
+		}
+
+		const paragraph: string[] = [];
+		while (index < lines.length) {
+			const current = lines[index] as string;
+			if (current.trim().length === 0) break;
+			if (/^(#{1,6})\s+/.test(current)) break;
+			if (/^\s*([-*+]\s|\d+[.)]\s|>)/.test(current)) break;
+			paragraph.push(current.trim());
+			index += 1;
+		}
+		output.push(`<p>${renderInline(paragraph.join(" "))}</p>`);
+	}
+
+	return output.join("\n");
+}
+
+/** Renders the inline markup of a text. */
+export function renderInline(source: string): string {
+	const codes: string[] = [];
+	const maths: string[] = [];
+	let text = source.replace(/`([^`]+)`/g, (_match, code: string) => {
+		codes.push(code);
+		return `\uE000${codes.length - 1}\uE000`;
+	});
+	text = text.replace(/(?<!\\)\$([^$\n]+?)\$/g, (_match, formula: string) => {
+		maths.push(renderLatex(formula));
+		return `\uE001${maths.length - 1}\uE001`;
+	});
+
+	text = escapeHtml(text);
+	text = text.replace(
+		/!\[([^\]]*)\]\(([^)\s]+)\)/g,
+		'<img src="$2" alt="$1" loading="lazy">',
+	);
+	text = text.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, '<a href="$2">$1</a>');
+	text = text.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+	text = text.replace(/__([^_]+)__/g, "<strong>$1</strong>");
+	text = text.replace(/(^|[^*])\*([^*\n]+)\*/g, "$1<em>$2</em>");
+	text = text.replace(/~~([^~]+)~~/g, "<del>$1</del>");
+
+	text = text.replace(/\uE000(\d+)\uE000/g, (_match, index: string) => {
+		return `<code>${escapeHtml(codes[Number(index)] ?? "")}</code>`;
+	});
+	return text.replace(/\uE001(\d+)\uE001/g, (_match, index: string) => maths[Number(index)] ?? "");
+}
+
+/** Renders a trusted LaTex formula to KaTeX HTML and MathML. */
+export function renderLatex(source: string, displayMode = false): string {
+	return escapeHtml(`${displayMode ? "$$" : "$"}${source}${displayMode ? "$$" : "$"}`);
+}
+
+export interface MarkdownLoaderOptions {
+	/** Directory the loader scans, relative to the project root. */
+	dir?: string;
+}
+
+/**
+ * Loader for markdown files.
+ *
+ * The loader turns a markdown file into its frontmatter and its rendered
+ * html, exactly like a content collection needs it.
+ */
+export function markdownLoader(_options: MarkdownLoaderOptions = {}): Loader {
+	return {
+		name: "markdown",
+		extensions: [".md", ".markdown"],
+		load(file: LoaderFile) {
+			const { frontmatter, body } = parseFrontmatter(file.source);
+			return {
+				data: frontmatter,
+				content: renderMarkdown(body),
+			};
+		},
+	};
+}
diff --git a/views/raw.ts b/views/raw.ts
new file mode 100644
index 0000000..d4dcc49
--- /dev/null
+++ b/views/raw.ts
@@ -0,0 +1,96 @@
+/**
+ * Raw values.
+ *
+ * A raw value is html that is already rendered, it is never escaped. The
+ * wrapper marks the values that come from a trusted source, e.g. the html of
+ * a markdown collection.
+ */
+export class Raw {
+	constructor(readonly html: string) {}
+
+	toString(): string {
+		return this.html;
+	}
+}
+
+/** Marks html as pre-rendered, it is never escaped. */
+export function raw(html: string): Raw {
+	return new Raw(html);
+}
+
+/** `true` when the value is a raw html value. */
+export function isRaw(value: unknown): value is Raw {
+	return value instanceof Raw;
+}
+
+/** Properties that do not take a unit. */
+const UNITLESS = new Set([
+	"animation-iteration-count",
+	"border-image-outset",
+	"border-image-slice",
+	"border-image-width",
+	"box-flex",
+	"box-flex-group",
+	"box-ordinal-group",
+	"column-count",
+	"columns",
+	"flex",
+	"flex-grow",
+	"flex-positive",
+	"flex-shrink",
+	"flex-negative",
+	"flex-order",
+	"font-weight",
+	"grid-area",
+	"grid-column",
+	"grid-column-end",
+	"grid-column-start",
+	"grid-row",
+	"grid-row-end",
+	"grid-row-start",
+	"line-clamp",
+	"line-height",
+	"opacity",
+	"order",
+	"orphans",
+	"scale",
+	"tab-size",
+	"widows",
+	"z-index",
+	"zoom",
+]);
+
+/** Converts a camel case property into its css name. */
+export function cssPropertyName(property: string): string {
+	if (property.startsWith("--")) return property;
+	return property.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+}
+
+/**
+ * Transforms an object into the value of a style attribute.
+ *
+ * The keys become css properties, the numbers become pixels unless the
+ * property does not take a unit.
+ */
+export function styleValue(value: unknown): string {
+	if (value === null || value === undefined || value === false) return "";
+	if (typeof value === "string" || typeof value === "number") return String(value);
+	if (isRaw(value)) return value.html;
+	if (typeof value !== "object") return "";
+
+	const parts: string[] = [];
+	for (const [property, entry] of Object.entries(value as Record<string, unknown>)) {
+		if (entry === null || entry === undefined || entry === false) continue;
+		const name = cssPropertyName(property);
+		if (typeof entry === "number") {
+			parts.push(`${name}: ${UNITLESS.has(name) ? entry : `${entry}px`}`);
+			continue;
+		}
+		if (typeof entry === "object") {
+			parts.push(`${name}: ${styleValue(entry)}`);
+			continue;
+		}
+		parts.push(`${name}: ${String(entry)}`);
+	}
+	return parts.join("; ");
+}
diff --git a/views/stage.ts b/views/stage.ts
new file mode 100644
index 0000000..00a784b
--- /dev/null
+++ b/views/stage.ts
@@ -0,0 +1,69 @@
+export interface KeyframeStep {
+	o: Record<string, string | number>;
+}
+
+export interface ScrollSceneOptions {
+	selector: string;
+	keyframes: Record<string, KeyframeStep | Record<string, string | number>>;
+	range?: string;
+	timeline?: "view" | "scroll" | string;
+	animation?: string;
+	duration?: string;
+	easing?: string;
+	fill?: string;
+}
+
+export interface TransitionPortalOptions {
+	name: string;
+	old?: Record<string, string | number>;
+	new?: Record<string, string | number>;
+	duration?: string;
+	easing?: string;
+}
+
+function declarations(values: Record<string, string | number>): string {
+	return Object.entries(values).map(([property, value]) => `${property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}: ${value};`).join(" ");
+}
+
+/** Builds declarative native CSS scenes and view transitions without a client runtime. */
+export class StageManager {
+	private readonly scenes: ScrollSceneOptions[] = [];
+	private readonly portals: TransitionPortalOptions[] = [];
+
+	scene(name: string, options: Omit<ScrollSceneOptions, "animation">): this {
+		this.scenes.push({ ...options, animation: name });
+		return this;
+	}
+
+	portal(name: string, options: Omit<TransitionPortalOptions, "name"> = {}): this {
+		this.portals.push({ name, ...options });
+		return this;
+	}
+
+	css(): string {
+		return [
+			...this.scenes.flatMap((scene) => {
+				const animation = scene.animation ?? "muddle-scene";
+				const timeline = scene.timeline ?? "view";
+				return [
+					`@keyframes ${animation} { ${Object.entries(scene.keyframes).map(([offset, step]) => {
+						const values = "to" in step && typeof step.to === "object" ? step.to : step as Record<string, string | number>;
+						return `${offset} { ${declarations(values)} }`;
+					}).join(" ")} }`,
+					`${scene.selector} { animation-name: ${animation}; animation-duration: ${scene.duration ?? "1ms"}; animation-timing-function: ${scene.easing ?? "linear"}; animation-fill-mode: ${scene.fill ?? "both"}; animation-timeline: ${timeline === "view" ? "view()" : timeline === "scroll" ? "scroll()" : timeline}; animation-range: ${scene.range ?? "entry 0% cover 100%"}; }`,
+				];
+			}),
+			...this.portals.flatMap((portal) => {
+				const timing = `animation-duration: ${portal.duration ?? "240ms"}; animation-timing-function: ${portal.easing ?? "ease"};`;
+				return [
+					portal.old ? `::view-transition-old(${portal.name}) { ${timing} ${declarations(portal.old)} }` : "",
+					portal.new ? `::view-transition-new(${portal.name}) { ${timing} ${declarations(portal.new)} }` : "",
+				].filter(Boolean);
+			}),
+		].join("\n");
+	}
+}
+
+export function stage(): StageManager {
+	return new StageManager();
+}
diff --git a/views/testing.ts b/views/testing.ts
new file mode 100644
index 0000000..498f7a9
--- /dev/null
+++ b/views/testing.ts
@@ -0,0 +1,263 @@
+import { existsSync } from "node:fs";
+import { readdir, readFile } from "node:fs/promises";
+import { join, relative, resolve } from "node:path";
+import { TemplateEngine } from "./engine/runtime.ts";
+import { lex } from "./engine/lexer.ts";
+import { parse } from "./engine/parser.ts";
+import type { Node } from "./engine/types.ts";
+import type { ComponentRegistry } from "./components.ts";
+
+/** The helpers that are available inside a `$$$` block. */
+export const ASSERTION_HELPERS = `
+window.muddle = window.muddle || {};
+window.muddle.assert = function (condition, message) {
+	if (!condition) {
+		throw new Error(message || "assertion failed");
+	}
+};
+window.muddle.assertText = function (selector, expected, message) {
+	const element = document.querySelector(selector);
+	const actual = element ? element.textContent.trim() : null;
+	if (actual !== expected) {
+		throw new Error(
+			(message || selector) + ": expected " + JSON.stringify(expected) + ", got " + JSON.stringify(actual),
+		);
+	}
+};
+window.muddle.assertHtml = function (selector, expected, message) {
+	const element = document.querySelector(selector);
+	const actual = element ? element.innerHTML.trim() : null;
+	if (actual !== expected) {
+		throw new Error(
+			(message || selector) + ": expected " + JSON.stringify(expected) + ", got " + JSON.stringify(actual),
+		);
+	}
+};
+window.muddle.assertCount = function (selector, expected, message) {
+	const actual = document.querySelectorAll(selector).length;
+	if (actual !== expected) {
+		throw new Error(
+			(message || selector) + ": expected " + expected + " elements, got " + actual,
+		);
+	}
+};
+window.muddle.assertExists = function (selector, message) {
+	if (!document.querySelector(selector)) {
+		throw new Error((message || selector) + ": the element does not exist");
+	}
+};
+window.muddle.assertMissing = function (selector, message) {
+	if (document.querySelector(selector)) {
+		throw new Error((message || selector) + ": the element should not exist");
+	}
+};
+window.muddle.assertAttribute = function (selector, name, expected, message) {
+	const element = document.querySelector(selector);
+	const actual = element ? element.getAttribute(name) : null;
+	if (actual !== expected) {
+		throw new Error(
+			(message || selector) + ": expected the attribute " + name + " to be " + JSON.stringify(expected) + ", got " + JSON.stringify(actual),
+		);
+	}
+};
+window.muddle.assertState = function (selector, state, message) {
+	const element = document.querySelector(selector);
+	const actual = element ? element.getAttribute("data-state") : null;
+	if (actual !== state) {
+		throw new Error(
+			(message || selector) + ": expected the state " + JSON.stringify(state) + ", got " + JSON.stringify(actual),
+		);
+	}
+};
+const assert = window.muddle.assert;
+const assertText = window.muddle.assertText;
+const assertHtml = window.muddle.assertHtml;
+const assertCount = window.muddle.assertCount;
+const assertExists = window.muddle.assertExists;
+const assertMissing = window.muddle.assertMissing;
+const assertAttribute = window.muddle.assertAttribute;
+const assertState = window.muddle.assertState;
+`;
+
+export interface TemplateTestOptions {
+	/** Root directory of the project. */
+	root: string;
+	/** Directories scanned for templates. */
+	viewRoots: string[];
+	/** Locals handed to the templates. */
+	locals?: Record<string, unknown>;
+	/** Directory of the components. */
+	componentsDir?: string;
+	/** Server components available to the templates. */
+	components?: ComponentRegistry;
+}
+
+export interface TemplateTest {
+	/** Absolute path of the template. */
+	path: string;
+	/** Path of the template, relative to the root. */
+	key: string;
+	/** The assertions of the template. */
+	assertions: string;
+}
+
+/** Reads the assertions of a template. */
+export function readAssertions(source: string): string {
+	const parsed = parse(lex(source));
+	const blocks: string[] = [];
+	collect(parsed.nodes, blocks);
+	return blocks.join("\n");
+}
+
+function collect(nodes: Node[], blocks: string[]): void {
+	for (const node of nodes) {
+		if (node.kind === "test") {
+			if (node.code.trim().length > 0) blocks.push(node.code);
+			continue;
+		}
+		const children = childrenOf(node);
+		if (children) collect(children, blocks);
+	}
+}
+
+function childrenOf(node: Node): Node[] | undefined {
+	switch (node.kind) {
+		case "element":
+		case "each":
+		case "while":
+		case "mixin":
+		case "mixin-call":
+		case "include":
+		case "block":
+		case "slot":
+		case "comment":
+			return node.children;
+		case "if":
+			return node.branches.flatMap((branch) => branch.children);
+		default:
+			return undefined;
+	}
+}
+
+/** Lists the templates of the project. */
+export async function listTemplates(dirs: string[]): Promise<string[]> {
+	const files: string[] = [];
+	for (const dir of dirs) {
+		if (!existsSync(dir)) continue;
+		for (const entry of await readdir(dir, { withFileTypes: true })) {
+			const path = join(dir, entry.name);
+			if (entry.isDirectory()) {
+				files.push(...(await listTemplates([path])));
+				continue;
+			}
+			if (entry.name.endsWith(".spug")) files.push(path);
+		}
+	}
+	return files;
+}
+
+/** Collects the templates that carry assertions. */
+export async function collectTemplateTests(
+	options: TemplateTestOptions,
+): Promise<TemplateTest[]> {
+	const tests: TemplateTest[] = [];
+	for (const file of await listTemplates(options.viewRoots)) {
+		const source = await readFile(file, "utf8");
+		const assertions = readAssertions(source);
+		if (assertions.trim().length === 0) continue;
+		tests.push({
+			path: file,
+			key: relative(options.root, file).replace(/\\/g, "/"),
+			assertions,
+		});
+	}
+	return tests;
+}
+
+export interface TemplateTestFailure {
+	/** Path of the template. */
+	key: string;
+	/** The failure of the template. */
+	error: Error;
+}
+
+export interface TemplateTestRun {
+	/** The templates that were tested. */
+	tested: TemplateTest[];
+	/** The failures of the templates. */
+	failures: TemplateTestFailure[];
+	/** `true` when the browser could not be started. */
+	skipped: boolean;
+	/** The reason of the skip. */
+	reason?: string;
+}
+
+/**
+ * Runs the tests of the templates.
+ *
+ * The templates are rendered on the server, the assertions are evaluated in a
+ * browser. When playwright is not installed the run is skipped, the tests of
+ * the templates do not fail the build.
+ */
+export async function runTemplateTests(
+	options: TemplateTestOptions,
+): Promise<TemplateTestRun> {
+	const tests = await collectTemplateTests(options);
+	const failures: TemplateTestFailure[] = [];
+	if (tests.length === 0) return { tested: [], failures, skipped: false };
+
+	let chromium: typeof import("playwright").chromium;
+	try {
+		({ chromium } = await import("playwright"));
+	} catch (error) {
+		return {
+			tested: tests,
+			failures,
+			skipped: true,
+			reason: `playwright is not installed: ${(error as Error).message}`,
+		};
+	}
+
+	const engine = new TemplateEngine({
+		viewsDir: options.viewRoots[0] ?? options.root,
+		componentsDir: options.componentsDir,
+		root: options.root,
+		components: options.components,
+	});
+
+	const browser = await chromium.launch();
+	try {
+		const page = await browser.newPage();
+		for (const test of tests) {
+			const html = await engine.render(
+				test.path,
+				options.locals ?? {},
+			);
+			await page.setContent(html, { waitUntil: "load" });
+			try {
+				await page.evaluate(
+					`(async () => {\n${ASSERTION_HELPERS}\n${test.assertions}\n})()`,
+				);
+			} catch (error) {
+				failures.push({
+					key: test.key,
+					error: error as Error,
+				});
+			}
+		}
+	} finally {
+		await browser.close();
+	}
+
+	return { tested: tests, failures, skipped: false };
+}
+
+/** The engine of the project, used by the runner. */
+export function createTestEngine(options: TemplateTestOptions): TemplateEngine {
+	return new TemplateEngine({
+		viewsDir: options.viewRoots[0] ?? resolve(options.root),
+		componentsDir: options.componentsDir,
+		root: options.root,
+		components: options.components,
+	});
+}

Comments

+ + {%- set icon = load_data(path="icons/phosphor/" ~ "message-circle" ~ ".svg", required=false) -%} + {%- if icon -%}{{ icon | safe }}{{ else }}💬{{ end }} + +

+ {%- set comments = load_data(path="data/comments.toml", required=false) -%} + {%- if comments -%} + {%- for comment in comments -%} +

+ {{ comment.author }} + {{ comment.date }} +

+ {%- endfor -%} + {%- else -%} +

💭

No comments yet. Be the first to share your thoughts!

Comments

ShadCN, ported to Muddle.

Button

Card

Hello

{{ page.title }}

{title}

Hi

Hi

{{ config.title }}

Title

{title}