generator-white-label 5.0.1 → 9.0.0

package/app/README.md

@@ -1,19 +1,103 @@
-# Your white-label site
+# White Label starter application
 
-This site uses TypeScript for application code, Handlebars for pages, and Sass plus full Bootstrap CSS for styling.
+This static starter was generated with the **JSX/TSX** template option. It uses TypeScript and the White Label JSX runtime for page and client-side View rendering, with Tailwind CSS 4 for styling. It makes no API or service calls.
+
+JSX is optional in White Label. If you prefer plain TypeScript or want a third-party template engine to own rendering, generate with `--no-jsx` (or answer **No** to the generator's JSX question), then install and call that renderer from the View `template` function. The Model, View, Router, Mediator, progressive-enhancement behavior, and generated feature set remain equivalent.
+
+See [Template engines and JSX options](https://whitelabeljs.org/docs/view/#template-engines) for the tested third-party engines, rendering contract, and no-JSX setup.
 
 ## Start developing
 
-Use Node.js 24. Run `npm install`, then `npm run typecheck` and `npm run build`. The build output is `_deploy`; serve that directory with your preferred static server. `npm test` runs the generated site's build check. The generator repository has the broader unit and coverage suites; add application-specific tests as your site grows.
+Use Node.js `^22.18.0` or `>=24.11.0`, matching the generated `package.json`. npm, Yarn, and pnpm are supported.
+
+With npm:
+
+```sh
+npm install
+npm test
+npm run build -- --version=local
+```
+
+With Yarn:
+
+```sh
+yarn install
+yarn test
+yarn build --version=local
+```
+
+With pnpm:
+
+```sh
+pnpm install
+pnpm test
+pnpm build -- --version=local
+```
+
+Then preview the generated output:
+
+```sh
+python3 -m http.server 8080 --directory _deploy
+```
+
+Open `http://localhost:8080/`.
+
+Serve `_deploy` as the web server's document root. Do **not** browse to `_deploy/index.html` through a server rooted at the project directory (for example, `/white-label-site/_deploy/index.html`), because generated asset URLs such as `/release/local/assets/style/global.css` are intentionally rooted at the deployed site's origin and will otherwise return 404 responses.
+
+The build output is `_deploy`. The test suite checks the starter content, progressive interaction, production build, accessibility/indexability signals, serverless request isolation, Web-standard bundling, and serverless size/startup budgets.
+
+Pages live in `app/*.tsx`, page data lives in `app/assets/data/view`, browser code lives in `app/assets/script`, the provider-neutral serverless example lives in `server/handler.ts`, and shared styles live in `app/assets/style`. TypeScript is configured with `jsx: react-jsx` and `jsxImportSource: white-label-view`, so this scaffold's JSX does not require React.
+
+## Simple View click event
+
+View lifecycle hooks are the simplest place to own a browser listener:
+
+```ts
+import View from 'white-label-view';
+
+class ButtonView extends View {
+    handleClick = () => {
+        console.log('Clicked');
+    };
+
+    addListeners() {
+        this.element.addEventListener('click', this.handleClick);
+        return this;
+    }
+
+    removeListeners() {
+        this.element.removeEventListener('click', this.handleClick);
+        return this;
+    }
+}
+```
+
+The same callback reference is used for both registration and cleanup. View calls `removeListeners()` before replacement or destruction.
+
+## Serverless / function runtimes
+
+`server/handler.ts` demonstrates a cloud-agnostic server function using the Web `Request` and `Response` APIs. It composes a request-scoped Mediator, Model, Router, and server View, then destroys those mutable instances before the invocation completes.
+
+```ts
+import {handleRequest} from './dist/server/handler.js';
+
+const response = await handleRequest(new Request('https://example.com/hello?name=Ada'));
+```
+
+Keep immutable configuration at module scope when useful, but create mutable Model/View/Router/Mediator instances per request unless their shared lifetime is intentional. Serverless platforms may reuse one process for many warm invocations, so module-level mutable application state can leak data between requests.
+
+Cloud adapters should stay thin: translate the provider's event/request into a Web `Request`, call `handleRequest`, then translate the resulting `Response` if the platform requires it. The starter does not depend on AWS, Vercel, Netlify, Cloudflare, Azure, or another provider SDK.
+
+The portability test bundles the server-side composition with a browser/Web target to catch unresolved Node built-ins. That is an edge-portability smoke test, not a claim that every edge provider is supported; verify the actual provider runtime before deployment.
 
-Edit `.ts` files under `app/assets/script`, and use `.tsx` for React components. Keep `.js` extensions in relative imports, for example `import User from './model/user.js'`. TypeScript resolves the source and emits valid JavaScript imports. Do not edit `dist`, which is generated by the compiler.
+`app/assets/style/global.css` imports Tailwind and contains the starter's custom theme styles. `print.css` remains plain CSS. Tailwind scans the project source during the build and emits static CSS; there is no browser-side Tailwind runtime.
 
-Pages live in `app/*.hbs`, partials in `app/assets/markup`, and page data in `app/assets/data/view`. Add shared styles in `app/assets/style`. The full Bootstrap stylesheet is included before the project styles.
+For production, pass a version and HTTPS site URL through your package manager's normal script-argument syntax. For example with npm:
 
 ```sh
-npm run build -- --version=release-1 --production=true
+npm run build -- --version=release-1 --production=true --site-url=https://www.example.com
 ```
 
-Optional flags are `--www`, `--cdn`, and `--service`. Their defaults are `/`, `/`, and `/service-endpoint`. The version selects `_deploy/release/<version>/assets`; without a version, the current timestamp is used. Each build replaces `_deploy`.
+Build flags use `--key=value`. `--www` and `--cdn` default to `/`; `--version` selects `_deploy/release/<version>/assets`; without a version, the current timestamp is used. Production builds require a real HTTPS `--site-url` for canonical, Open Graph, robots, and sitemap output. Each build replaces `_deploy`.
 
-Document new functions with JSDoc comments explaining behavior, parameters, return values, and meaningful errors. Keep strict type checking enabled. Templates accept trusted HTML, so validate or escape external content before rendering it. Optional SDK adapters need real provider configuration before use.
+Edit TypeScript/TSX sources, not `dist`. JSX expressions are escaped by the White Label runtime; reserve `raw()` for trusted application-authored markup. Replace the starter copy with application content while retaining the tested accessibility and progressive-enhancement patterns.

package/app/assets/data/view/global.json

@@ -1,49 +1,9 @@
 {
-    "title":"page title",
-    "meta":{
-        "description":"description here",
-        "keywords":"keywords, here",
-        "apple-mobile-web-app-title":"app title here"
-    },
-    "link":{
-        "apple-touch-icon-precomposed":"apple-touch-icon.png",
-        "author":"https://plus.google.com/",
-        "favicon":"favicon.png"
-    },
-    "twitter":{
-        "card":"summary",
-        "url":"url here",
-        "title":"title here",
-        "description":"description here",
-        "image":"apple-touch-icon.png"
-    },
-    "og":{
-        "title":"title here",
-        "type":"website",
-        "url":"url here",
-        "image":"apple-touch-icon.png",
-        "site_name":"site here",
-        "description":"description here",
-        "locale":"en_US"
-    },
-    "fb":{
-        "admins":"admins here",
-        "app_id":"app id here"
-    },
-    "metrics":{
-        "google-analytics":{
-            "id":"UA-XXXXXX-X"
-        }
-    },
-    "styles":{
-        "all":{
-            "global":"assets/style/global.css"
-        },
-        "print":{
-            "global":"assets/style/print.css"
-        }
-    },
-    "scripts":{
-        "global":"assets/script/global.compiled.js"
-    }
+  "title": "White Label | TypeScript Web Starter",
+  "meta": {"description": "A production-minded TypeScript web starter demonstrating static rendering, progressive enhancement, accessible UI, routing, state, and reusable White Label packages.", "apple-mobile-web-app-title": "White Label"},
+  "link": {},
+  "twitter": {"card": "summary", "title": "White Label", "description": "A modular TypeScript web stack and starter generator."},
+  "og": {"title": "White Label", "type": "website", "site_name": "White Label", "description": "A modular TypeScript web stack and starter generator.", "locale": "en_US"},
+  "styles": {"all": {"global": "assets/style/global.css"}, "print": {"global": "assets/style/print.css"}},
+  "scripts": {"global": "assets/script/global.compiled.js"}
 }

package/app/assets/data/view/index.json

@@ -1,7 +1,15 @@
 {
-    "title": "Home",
+    "title": "White Label | TypeScript Web Starter",
     "scripts":{
         "global":"assets/script/global.compiled.js",
         "section":"assets/script/index.compiled.js"
+    },
+    "structuredData": {
+      "@context": "https://schema.org",
+      "@type": "WebPage",
+      "name": "White Label TypeScript Web Starter",
+      "description": "A production-minded starter demonstrating the White Label TypeScript web stack.",
+      "author": {"@type": "Organization", "name": "White Label"},
+      "inLanguage": "en-US"
     }
 }

package/app/assets/script/index.tsx

@@ -0,0 +1,13 @@
+/** @module app/assets/script/index */
+import {initializeTaskApplication} from './tasks/TaskApplication.js';
+
+/**
+ * Browser entry points should stay small.
+ *
+ * The task application owns its own composition and lifecycle, so the entry
+ * module has one obvious responsibility: start the feature for this document.
+ */
+export {initializeTaskApplication} from './tasks/TaskApplication.js';
+export {normalizeTaskFilter} from './tasks/TaskRouter.js';
+
+initializeTaskApplication(document);

package/app/assets/script/tasks/TaskApplication.ts

@@ -0,0 +1,77 @@
+import type Router from 'white-label-router';
+import type View from 'white-label-view';
+import {createInitialTaskState, describeTaskStatus} from '../../view/examples/tasks/task-state.js';
+import {createTaskMediator, type TaskMediator} from './TaskMediator.js';
+import TaskModel from './TaskModel.js';
+import {createTaskRouter} from './TaskRouter.js';
+import {createTaskView} from './TaskView.js';
+
+/** Public handles make the example straightforward to test and tear down. */
+export interface TaskApplication {
+    mediator: TaskMediator;
+    model: TaskModel;
+    router: Router;
+    view: View;
+    destroy(): void;
+}
+
+/**
+ * Compose the application at one explicit boundary.
+ *
+ * This is the only module that knows every moving part. Model, View, Router,
+ * and Mediator stay independently understandable, while this file documents
+ * the small amount of wiring needed to make them cooperate in a real feature.
+ */
+export function initializeTaskApplication(documentRoot: Document): TaskApplication {
+    const parentElement = documentRoot.querySelector<HTMLElement>('[data-task-example]');
+    if (!parentElement) {throw new TypeError('White Label task example requires a data-task-example container');}
+
+    const mediator = createTaskMediator();
+    const model = new TaskModel(createInitialTaskState());
+    const view = createTaskView(parentElement, model);
+    const status = parentElement.querySelector<HTMLElement>('[data-task-status]')!;
+    const updateStatus = (): void => {status.textContent = describeTaskStatus(model.get());};
+
+    const addTask = (event: CustomEvent<string>): void => {model.add(event.detail); updateStatus();};
+    const toggleTask = (event: CustomEvent<number>): void => {model.toggle(event.detail); updateStatus();};
+    const setFilter = (event: CustomEvent<'all' | 'active' | 'completed'>): void => {model.setFilter(event.detail); updateStatus();};
+    mediator.addEventListener('task:add', addTask);
+    mediator.addEventListener('task:toggle', toggleTask);
+    mediator.addEventListener('task:filter', setFilter);
+
+    const delegated = view.delegate(parentElement);
+    delegated.on('submit', '[data-task-form]', (event: Event) => {
+        event.preventDefault();
+        const form = event.target as HTMLFormElement;
+        const input = form.querySelector<HTMLInputElement>('[name="task"]')!;
+        mediator.dispatchEvent(new CustomEvent('task:add', {detail: input.value}));
+        parentElement.querySelector<HTMLInputElement>('[name="task"]')!.focus();
+    });
+    delegated.on('change', '[data-task-toggle]', (event: Event) => {
+        const input = event.target as HTMLInputElement;
+        const id = Number(input.dataset.taskId);
+        mediator.dispatchEvent(new CustomEvent('task:toggle', {detail: id}));
+        const focusTarget = parentElement.querySelector<HTMLInputElement>(`[data-task-id="${id}"]`)
+            ?? parentElement.querySelector<HTMLAnchorElement>('[data-task-filter][aria-current="page"]')!;
+        focusTarget.focus();
+    });
+
+    const router = createTaskRouter(documentRoot, mediator);
+
+    return {
+        mediator,
+        model,
+        router,
+        view,
+        destroy() {
+            delegated.clear();
+            router.destroy();
+            mediator.removeEventListener('task:add', addTask);
+            mediator.removeEventListener('task:toggle', toggleTask);
+            mediator.removeEventListener('task:filter', setFilter);
+            view.destroy();
+            model.destroy();
+            mediator.destroy();
+        }
+    };
+}

package/app/assets/script/tasks/TaskMediator.ts

@@ -0,0 +1,15 @@
+import Mediator from 'white-label-mediator';
+import type {TaskFilter} from '../../view/examples/tasks/task-state.js';
+
+/** Application event vocabulary shared by the generated task modules. */
+export type TaskEvents = {
+    'task:add': string;
+    'task:filter': TaskFilter;
+    'task:toggle': number;
+};
+
+export type TaskMediator = Mediator<TaskEvents>;
+
+export function createTaskMediator(): TaskMediator {
+    return new Mediator<TaskEvents>().initialize();
+}

package/app/assets/script/tasks/TaskModel.ts

@@ -0,0 +1,32 @@
+import {Model} from 'white-label-model';
+import type {TaskFilter, TaskState} from '../../view/examples/tasks/task-state.js';
+
+/**
+ * Domain state belongs in Model, not in the DOM or router.
+ *
+ * Extending Model with small domain methods gives application code meaningful
+ * operations while preserving White Label's observable state contract.
+ */
+export default class TaskModel extends Model<TaskState> {
+    add(title: string): boolean {
+        const trimmed = title.trim();
+        if (!trimmed) {return false;}
+        const state = this.get();
+        const nextId = Math.max(0, ...state.tasks.map(task => task.id)) + 1;
+        return this.update({tasks: [...state.tasks, {complete: false, id: nextId, title: trimmed}]});
+    }
+
+    toggle(id: number): boolean {
+        const state = this.get();
+        const index = state.tasks.findIndex(task => task.id === id);
+        if (index < 0) {return false;}
+        const tasks = [...state.tasks];
+        const task = tasks[index]!;
+        tasks[index] = {...task, complete: !task.complete};
+        return this.update({tasks});
+    }
+
+    setFilter(filter: TaskFilter): boolean {
+        return this.update({filter});
+    }
+}

package/app/assets/script/tasks/TaskRouter.ts

@@ -0,0 +1,30 @@
+import Router from 'white-label-router';
+import type {TaskFilter} from '../../view/examples/tasks/task-state.js';
+import type {TaskMediator} from './TaskMediator.js';
+
+const taskFilters = new Set<TaskFilter>(['all', 'active', 'completed']);
+
+/** Normalize URL input at the routing boundary before it reaches domain state. */
+export function normalizeTaskFilter(value: string | undefined): TaskFilter {
+    return value && taskFilters.has(value as TaskFilter) ? value as TaskFilter : 'all';
+}
+
+/**
+ * Router translates URL state into an application event.
+ *
+ * It does not update the Model or DOM directly. That separation keeps routing
+ * usable in different applications and makes browser navigation easy to test.
+ */
+export function createTaskRouter(documentRoot: Document, mediator: TaskMediator): Router {
+    const router = new Router();
+    router.scope = documentRoot.querySelector('main');
+    router.mediator = mediator;
+    const route = (_scope: Element | null, location: {data: {query: Record<string, string>}}): void => {
+        const filter = normalizeTaskFilter(location.data.query.tasks);
+        const restoreFocus = documentRoot.activeElement?.hasAttribute('data-task-filter') === true;
+        mediator.dispatchEvent(new CustomEvent('task:filter', {detail: filter}));
+        if (restoreFocus) {documentRoot.querySelector<HTMLAnchorElement>(`[data-task-filter="${filter}"]`)!.focus();}
+    };
+    router.routes = {'/': route, defaultRoute: route};
+    return router.initialize();
+}

package/app/assets/script/tasks/TaskView.tsx

@@ -0,0 +1,24 @@
+import View from 'white-label-view';
+import TaskExample from '../../view/examples/tasks/TaskExample.js';
+import type {TaskState} from '../../view/examples/tasks/task-state.js';
+import type TaskModel from './TaskModel.js';
+
+/**
+ * View owns rendering, but not application decisions.
+ *
+ * Passing the already-rendered task root lets View adopt useful static HTML
+ * instead of replacing the document merely because JavaScript has started.
+ */
+export function createTaskView(parentElement: HTMLElement, model: TaskModel): View {
+    const element = parentElement.querySelector<HTMLElement>('[data-task-app]');
+    if (!element) {throw new TypeError('Task example requires its static task-app root');}
+
+    return new View({
+        element,
+        model,
+        parentElement,
+        template(data) {
+            return <TaskExample state={data as TaskState} />;
+        }
+    }).initialize();
+}

package/app/assets/style/global.css

@@ -0,0 +1,111 @@
+@import "tailwindcss" source("../../..");
+
+@theme {
+    --color-white-label-white: #ffffff;
+    --color-white-label-black: #000000;
+    --color-white-label-grey: #767676;
+}
+
+:root {
+    --white: #ffffff;
+    --black: #000000;
+    --grey: #767676;
+}
+
+html { scroll-behavior: smooth; }
+body { margin: 0; background: var(--white); color: var(--black); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.65; }
+a { color: var(--grey); text-decoration-thickness: 1px; text-underline-offset: .22em; }
+a:hover { color: var(--black); }
+button, input { font: inherit; }
+button { cursor: pointer; }
+.container { width: min(100% - 2rem, 72rem); margin-inline: auto; }
+.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 100; padding: .75rem 1rem; border: 1px solid var(--black); background: var(--white); color: var(--black); transform: translateY(-180%); }
+.skip-link:focus { transform: none; }
+.site-header { position: sticky; top: 0; z-index: 80; border-bottom: 1px solid var(--grey); background: var(--white); }
+.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 4.5rem; gap: 2rem; }
+.wordmark { color: var(--black); font-size: .9rem; font-weight: 800; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
+.site-header nav { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .9rem; }
+.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--grey); }
+.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--black); }
+.hero { padding: clamp(4rem, 8vw, 7rem) 0 clamp(4.5rem, 10vw, 8rem); border-bottom: 1px solid var(--grey); }
+.hero__inner { max-width: 64rem; }
+.hero h1 { margin: 0 0 1.75rem; font-size: clamp(3.6rem, 10vw, 8.75rem); font-weight: 800; line-height: .97; letter-spacing: -.04em; }
+.hero__lede { max-width: 45rem; margin: 0 0 2rem; font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.5; }
+.hero__links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }
+.primary-link { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem .85rem; border: 1px solid var(--black); background: var(--black); color: var(--white); text-decoration: none; }
+.primary-link:hover, .primary-link:focus-visible { background: var(--white); color: var(--black); }
+.eyebrow, .code-label { margin: 0 0 .7rem; color: var(--grey); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
+.section { padding: clamp(4.5rem, 9vw, 8rem) 0; border-bottom: 1px solid var(--grey); }
+.section-intro { max-width: 50rem; margin-bottom: clamp(3rem, 7vw, 5rem); }
+.section h2 { max-width: 13ch; margin: 0 0 1.35rem; font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: .98; letter-spacing: -.055em; }
+.section-intro > p:last-child { max-width: 44rem; font-size: 1.12rem; }
+.demo { border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); }
+.task-app { padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
+.task-form { display: grid; grid-template-columns: minmax(8rem, .35fr) minmax(0, 1.65fr); gap: clamp(1rem, 4vw, 4rem); align-items: end; padding-bottom: 1.5rem; border-bottom: 1px solid var(--grey); }
+.task-form > label { color: var(--grey); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
+.task-form__controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
+.task-form input { min-width: 0; min-height: 44px; padding: .6rem .75rem; border: 1px solid var(--grey); border-right: 0; border-radius: 0; background: var(--white); color: var(--black); }
+.task-form button { min-height: 44px; padding: .6rem 1rem; border: 1px solid var(--black); border-radius: 0; background: var(--black); color: var(--white); }
+.task-form button:hover, .task-form button:focus-visible { background: var(--white); color: var(--black); }
+.task-filters { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--grey); }
+.task-filters a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: .8rem; border: 1px solid var(--grey); color: var(--grey); text-decoration: none; }
+.task-filters a:hover, .task-filters a:focus-visible, .task-filters a[aria-current='page'] { border-color: var(--black); color: var(--black); }
+.task-filters a[aria-current='page'] { text-decoration: underline; text-underline-offset: .3em; }
+.task-list { margin: 0; padding: 0; list-style: none; }
+.task-list li { border-bottom: 1px solid var(--grey); }
+.task-list label { display: flex; gap: .85rem; align-items: center; min-height: 54px; padding: .55rem 0; cursor: pointer; }
+.task-list input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--black); }
+.task-list input:checked + span { color: var(--grey); text-decoration: line-through; }
+.demo__trace { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 1.5rem 0 0; }
+.demo__trace > div { min-width: 0; }
+.demo__trace dt { margin-bottom: .3rem; color: var(--grey); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
+.demo__trace dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .9rem; overflow-wrap: anywhere; }
+.architecture { margin-bottom: clamp(3rem, 8vw, 6rem); }
+.architecture ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--black); }
+.architecture li { display: grid; grid-template-columns: minmax(9rem, .4fr) minmax(0, 1.6fr); gap: 2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--grey); }
+.architecture strong { font-size: 1.15rem; }
+.architecture span { color: var(--grey); }
+.docs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--grey); border-left: 1px solid var(--grey); }
+.docs-grid article { min-width: 0; padding: clamp(1.5rem, 4vw, 2.5rem); border-right: 1px solid var(--grey); border-bottom: 1px solid var(--grey); }
+.docs-grid h3 { margin: 0 0 1.5rem; font-size: 1.35rem; }
+.docs-grid article > p:last-child { margin-bottom: 0; }
+pre { max-width: 100%; margin: 0; padding: 1.1rem; border: 1px solid var(--grey); background: var(--white); color: var(--black); overflow-x: auto; font-size: .84rem; line-height: 1.55; }
+code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
+.code-block { padding: .9rem 0; border-color: #cecece; background: #f4f4f4; color: #242424; }
+.code-block__line { display: grid; grid-template-columns: 2.75rem minmax(max-content, 1fr); padding-right: 1rem; }
+.code-block__number { padding-right: .85rem; color: #666666; text-align: right; user-select: none; }
+.code-syntax-keyword { color: #5f5f5f; }
+.code-syntax-type { color: #626262; }
+.code-syntax-value { color: #666666; }
+.code-syntax-muted { color: #6b6b6b; }
+.start-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .8fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
+.start-grid .section-intro { margin-bottom: 0; }
+.start-grid pre { margin-bottom: 1.5rem; }
+.source-paths dl { margin: 0; border-top: 1px solid var(--black); }
+.source-paths dl > div { padding: 1rem 0; border-bottom: 1px solid var(--grey); }
+.source-paths dt { color: var(--grey); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
+.source-paths dd { margin: .25rem 0 0; overflow-wrap: anywhere; }
+.site-footer { padding: 2rem 0; }
+.site-footer__inner { display: flex; justify-content: space-between; gap: 2rem; }
+.site-footer p { margin: 0; }
+.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
+section[id] { scroll-margin-top: 5.5rem; }
+*:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }
+
+@media (max-width: 767px) {
+    .site-header { position: static; }
+    .site-header__inner { align-items: flex-start; flex-direction: column; padding-block: 1rem; gap: .35rem; }
+    .site-header nav { gap: .35rem 1rem; }
+    .hero h1 { font-size: clamp(3.4rem, 18vw, 6rem); }
+    .task-form, .architecture li, .start-grid { grid-template-columns: 1fr; }
+    .task-form { align-items: stretch; gap: .5rem; }
+    .demo__trace, .docs-grid { grid-template-columns: 1fr; }
+    .demo__trace { gap: 1rem; }
+    .docs-grid { border-right: 1px solid var(--grey); }
+    .docs-grid article { border-right: 0; }
+    .site-footer__inner { flex-direction: column; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html { scroll-behavior: auto; }
+}

package/app/assets/style/print.css

@@ -0,0 +1,8 @@
+@media print {
+    .site-header, .task-form, .task-filters, .primary-link { display: none !important; }
+    body { color: #000000; background: #ffffff; font: 11pt/1.5 Georgia, serif; }
+    a { color: #000000; }
+    a[href^='http']::after { content: ' (' attr(href) ')'; overflow-wrap: anywhere; }
+    h1, h2, h3 { break-after: avoid; }
+    article, .task-app, pre { break-inside: avoid; }
+}

package/app/assets/view/CodeBlock.tsx

@@ -0,0 +1,17 @@
+import type {JSX} from 'white-label-view/jsx-runtime';
+
+export const syntax = {
+    keyword: 'code-syntax-keyword',
+    type: 'code-syntax-type',
+    value: 'code-syntax-value',
+    muted: 'code-syntax-muted'
+};
+
+/** Render a readable code example with stable line numbers and caller-supplied syntax spans. */
+export default function CodeBlock({lines}: {lines: JSX.Element[]}) {
+    return (
+        <pre className="code-block"><code>{lines.map((line, index) => (
+            <span className="code-block__line"><span aria-hidden="true" className="code-block__number">{index + 1}</span><span>{line}</span></span>
+        ))}</code></pre>
+    );
+}

package/app/assets/view/examples/tasks/TaskExample.tsx

@@ -0,0 +1,63 @@
+import {getVisibleTasks, type TaskFilter, type TaskState} from './task-state.js';
+
+const filters: TaskFilter[] = ['all', 'active', 'completed'];
+
+/**
+ * Render the task example from state only.
+ *
+ * The same JSX function is used twice: once while generating the initial HTML
+ * and again by white-label-view in the browser. Sharing one renderer keeps the
+ * static and interactive versions of the example from drifting apart.
+ */
+export default function TaskExample({state}: {state: TaskState}) {
+    const visibleTasks = getVisibleTasks(state);
+    const completed = state.tasks.filter(task => task.complete).length;
+
+    return (
+        <section className="task-app" data-task-app aria-label="Interactive task example">
+            <form className="task-form" data-task-form action="#example" method="get">
+                <label htmlFor="task-title">New task</label>
+                <div className="task-form__controls">
+                    <input id="task-title" name="task" type="text" autocomplete="off" required />
+                    <button type="submit">Add task</button>
+                </div>
+            </form>
+
+            <nav className="task-filters" aria-label="Filter tasks">
+                {filters.map(filter => (
+                    <a
+                        href={`/?tasks=${filter}#example`}
+                        data-task-filter={filter}
+                        data-pushstate
+                        aria-current={state.filter === filter ? 'page' : 'false'}
+                    >
+                        {filter.charAt(0).toUpperCase()}{filter.slice(1)}
+                    </a>
+                ))}
+            </nav>
+
+            <ul className="task-list">
+                {visibleTasks.map(task => (
+                    <li>
+                        <label>
+                            <input
+                                type="checkbox"
+                                checked={task.complete}
+                                data-task-toggle
+                                data-task-id={task.id}
+                            />
+                            <span>{task.title}</span>
+                        </label>
+                    </li>
+                ))}
+            </ul>
+
+            <dl className="demo__trace">
+                <div><dt>Router</dt><dd>/?tasks={state.filter}</dd></div>
+                <div><dt>Mediator</dt><dd>task:* application events</dd></div>
+                <div><dt>Model</dt><dd>{state.tasks.length} tasks · {completed} complete</dd></div>
+                <div><dt>View</dt><dd>{visibleTasks.length} tasks rendered</dd></div>
+            </dl>
+        </section>
+    );
+}

package/app/assets/view/examples/tasks/task-state.ts

@@ -0,0 +1,46 @@
+/** Shared state shape used by build-time JSX and the browser application. */
+export type TaskFilter = 'all' | 'active' | 'completed';
+
+export interface TaskItem {
+    complete: boolean;
+    id: number;
+    title: string;
+}
+
+export interface TaskState extends Record<PropertyKey, unknown> {
+    filter: TaskFilter;
+    tasks: TaskItem[];
+}
+
+const taskPredicates: Record<TaskFilter, (task: TaskItem) => boolean> = {
+    active: task => !task.complete,
+    all: () => true,
+    completed: task => task.complete
+};
+
+/** Return the tasks visible for the current filter. */
+export function getVisibleTasks(state: TaskState): TaskItem[] {
+    return state.tasks.filter(taskPredicates[state.filter]);
+}
+
+/** Describe the currently rendered task result for assistive technology. */
+export function describeTaskStatus(state: TaskState): string {
+    const visible = getVisibleTasks(state).length;
+    return `Showing ${visible} ${visible === 1 ? 'task' : 'tasks'} for the ${state.filter} filter.`;
+}
+
+/**
+ * Return fresh demo data for each application instance.
+ *
+ * A factory avoids sharing mutable state between tests, pages, or future
+ * server-side renders while keeping the initial HTML deterministic.
+ */
+export function createInitialTaskState(): TaskState {
+    return {
+        filter: 'all',
+        tasks: [
+            {complete: true, id: 1, title: 'Read the architecture'},
+            {complete: false, id: 2, title: 'Build something with White Label'}
+        ]
+    };
+}