generator-white-label 5.0.0 → 8.0.0

package/app/assets/view/layout/SiteHeader.tsx

@@ -0,0 +1,23 @@
+/**
+ * Static navigation is ordinary HTML first.
+ *
+ * White Label's router enhances only links that opt in with data-pushstate,
+ * so global navigation stays conventional, crawlable, and usable without
+ * client-side JavaScript.
+ */
+export default function SiteHeader() {
+    return (
+        <header className="site-header">
+            <div className="container site-header__inner">
+                <a className="wordmark" href="#top">White Label</a>
+                <nav aria-label="Primary navigation">
+                    <a href="#example">Example</a>
+                    <a href="#packages">Packages</a>
+                    <a href="#source">Source</a>
+                    <a href="#start">Get started</a>
+                    <a href="https://github.com/bshack/white-label">GitHub</a>
+                </nav>
+            </div>
+        </header>
+    );
+}

package/app/assets/view/page-data.ts

@@ -0,0 +1,14 @@
+/**
+ * Build-time data available to every page template.
+ *
+ * Keeping this contract separate from the page component makes the top-level
+ * JSX read like application composition instead of deployment plumbing.
+ */
+export interface PageData {
+    cdn: string;
+    meta: {description: string};
+    siteUrl: string;
+    structuredData: unknown;
+    title: string;
+    version: string;
+}

package/app/assets/view/sections/GettingStartedSection.tsx

@@ -0,0 +1,27 @@
+import CodeBlock, {syntax} from '../CodeBlock.js';
+
+/** Keep the shortest path from generator install to a verified local build visible. */
+export default function GettingStartedSection() {
+    return (
+        <section className="section" id="start" aria-labelledby="start-title">
+            <div className="container start-grid">
+                <div className="section-intro">
+                    <p className="eyebrow">Get started</p>
+                    <h2 id="start-title">Create a project with the generator.</h2>
+                    <p>The generated project is static-first, TypeScript-first, accessible by default, and ready for application-specific code.</p>
+                </div>
+                <div>
+                    <p className="code-label">Create a project</p>
+                    <CodeBlock lines={[<><span className={syntax.type}>npx</span> generator-white-label</>]} />
+                    <p className="code-label">Then develop</p>
+                    <CodeBlock lines={[
+                        <><span className={syntax.type}>npm</span> ci</>,
+                        <><span className={syntax.type}>npm</span> test</>,
+                        <><span className={syntax.type}>npm</span> run build -- --version=<span className={syntax.value}>local</span></>
+                    ]} />
+                    <p><a href="https://github.com/bshack/white-label#readme">Read the complete generator documentation</a></p>
+                </div>
+            </div>
+        </section>
+    );
+}

package/app/assets/view/sections/HeroSection.tsx

@@ -0,0 +1,21 @@
+/**
+ * Marketing content can stay a plain JSX function.
+ *
+ * White Label does not require every piece of markup to become a stateful
+ * View instance. Use View where lifecycle or observable state is useful;
+ * keep static presentation simple.
+ */
+export default function HeroSection() {
+    return (
+        <section className="hero" id="top" aria-labelledby="hero-title">
+            <div className="container hero__inner">
+                <h1 id="hero-title">Small pieces.<br />Complete applications.</h1>
+                <p className="hero__lede">Framework-independent TypeScript packages for state, rendering, coordination, routing, and project generation.</p>
+                <div className="hero__links">
+                    <a className="primary-link" href="#example">See the example</a>
+                    <a href="#start">Install the generator</a>
+                </div>
+            </div>
+        </section>
+    );
+}

package/app/assets/view/sections/LiveExampleSection.tsx

@@ -0,0 +1,29 @@
+import TaskExample from '../examples/tasks/TaskExample.js';
+import {createInitialTaskState, describeTaskStatus} from '../examples/tasks/task-state.js';
+
+/**
+ * The initial task UI is rendered at build time with the same JSX used later
+ * by white-label-view in the browser. JavaScript adds behavior; it does not
+ * need to invent the initial document.
+ */
+export default function LiveExampleSection() {
+    const state = createInitialTaskState();
+
+    return (
+        <section className="section" id="example" aria-labelledby="example-title">
+            <div className="container">
+                <div className="section-intro">
+                    <p className="eyebrow">Live example</p>
+                    <h2 id="example-title">Four packages. One small application.</h2>
+                    <p>Add a task, toggle its state, or change the filter. Router translates the URL into intent, Mediator coordinates actions, Model owns state, and View keeps the interface in sync.</p>
+                </div>
+                <div className="demo" data-task-example>
+                    <TaskExample state={state} />
+                    <p className="visually-hidden" role="status" aria-live="polite" aria-atomic="true" data-task-status>
+                        {describeTaskStatus(state)}
+                    </p>
+                </div>
+            </div>
+        </section>
+    );
+}

package/app/assets/view/sections/PackageDocsSection.tsx

@@ -0,0 +1,69 @@
+import CodeBlock, {syntax} from '../CodeBlock.js';
+
+const repositories = {
+    mediator: 'https://github.com/bshack/white-label-mediator',
+    model: 'https://github.com/bshack/white-label-model',
+    router: 'https://github.com/bshack/white-label-router',
+    view: 'https://github.com/bshack/white-label-view'
+};
+
+/** Package documentation stays close to the example it describes. */
+export default function PackageDocsSection() {
+    return (
+        <section className="section" id="packages" aria-labelledby="packages-title">
+            <div className="container">
+                <div className="section-intro">
+                    <p className="eyebrow">Documentation</p>
+                    <h2 id="packages-title">The core flow stays explicit.</h2>
+                    <p>Each package has one job, can be used independently, and stays easy to replace or test because application concerns are not hidden behind a framework.</p>
+                </div>
+                <div className="architecture"><ol>
+                    <li><strong>Router</strong><span>turns a URL into application intent</span></li>
+                    <li><strong>Mediator</strong><span>coordinates that intent between modules</span></li>
+                    <li><strong>Model</strong><span>stores and publishes application state</span></li>
+                    <li><strong>View</strong><span>renders the resulting interface</span></li>
+                </ol></div>
+                <div className="docs-grid">
+                    <article>
+                        <p className="eyebrow">Model</p><h3>State is observable, not magical.</h3>
+                        <CodeBlock lines={[
+                            <><span className={syntax.keyword}>const</span> model = <span className={syntax.keyword}>new</span> <span className={syntax.type}>Model</span>({'{'}count: 0{'}'});</>,
+                            <>model.on(<span className={syntax.value}>'change'</span>, state =&gt; render(state));</>,
+                            <>model.update({'{'}count: 1{'}'});</>
+                        ]} />
+                        <p><a href={repositories.model}>Model documentation</a></p>
+                    </article>
+                    <article>
+                        <p className="eyebrow">View</p><h3>JSX renders through White Label.</h3>
+                        <CodeBlock lines={[
+                            <><span className={syntax.keyword}>const</span> view = <span className={syntax.keyword}>new</span> <span className={syntax.type}>View</span>({'{'}</>,
+                            <>  model,</>,
+                            <>  template: state =&gt; &lt;p&gt;{'{'}state.count{'}'}&lt;/p&gt;</>,
+                            <>{'}'}).initialize();</>
+                        ]} />
+                        <p><a href={repositories.view}>View documentation</a></p>
+                    </article>
+                    <article>
+                        <p className="eyebrow">Mediator</p><h3>Modules communicate through events.</h3>
+                        <CodeBlock lines={[
+                            <>mediator.on(<span className={syntax.value}>'counter:increment'</span>, increment);</>,
+                            <>mediator.emit(<span className={syntax.value}>'counter:increment'</span>);</>
+                        ]} />
+                        <p><a href={repositories.mediator}>Mediator documentation</a></p>
+                    </article>
+                    <article>
+                        <p className="eyebrow">Router</p><h3>Routes describe intent.</h3>
+                        <CodeBlock lines={[
+                            <>router.routes = {'{'}</>,
+                            <>  <span className={syntax.value}>'/'</span>: (_scope, location) =&gt; {'{'}</>,
+                            <>    mediator.emit(<span className={syntax.value}>'filter:set'</span>, location.data.query.filter);</>,
+                            <>  {'}'}</>,
+                            <>{'}'};</>
+                        ]} />
+                        <p><a href={repositories.router}>Router documentation</a></p>
+                    </article>
+                </div>
+            </div>
+        </section>
+    );
+}

package/app/assets/view/sections/SourceGuideSection.tsx

@@ -0,0 +1,28 @@
+/**
+ * Point learners at the implementation itself.
+ *
+ * The landing page is intentionally organized so each path answers a different
+ * question: composition, rendering, state, coordination, routing, or testing.
+ */
+export default function SourceGuideSection() {
+    return (
+        <section className="section" id="source" aria-labelledby="source-title">
+            <div className="container start-grid">
+                <div className="section-intro">
+                    <p className="eyebrow">Read the source</p>
+                    <h2 id="source-title">This site is part of the documentation.</h2>
+                    <p>The landing page is built with the same White Label packages it teaches. Start at the page composition, then follow the imports into the interactive example.</p>
+                </div>
+                <div className="source-paths">
+                    <dl>
+                        <div><dt>Page composition</dt><dd><code>app/index.tsx</code></dd></div>
+                        <div><dt>Static JSX views</dt><dd><code>app/assets/view/</code></dd></div>
+                        <div><dt>Task application</dt><dd><code>app/assets/script/tasks/</code></dd></div>
+                        <div><dt>Integration tests</dt><dd><code>test/app.test.js</code></dd></div>
+                    </dl>
+                    <p><a href="https://github.com/bshack/white-label/tree/master/app">Browse the application source</a></p>
+                </div>
+            </div>
+        </section>
+    );
+}

package/app/index.tsx

@@ -0,0 +1,54 @@
+import {raw} from 'white-label-view/jsx-runtime';
+import SiteFooter from './assets/view/layout/SiteFooter.js';
+import SiteHeader from './assets/view/layout/SiteHeader.js';
+import type {PageData} from './assets/view/page-data.js';
+import GettingStartedSection from './assets/view/sections/GettingStartedSection.js';
+import HeroSection from './assets/view/sections/HeroSection.js';
+import LiveExampleSection from './assets/view/sections/LiveExampleSection.js';
+import PackageDocsSection from './assets/view/sections/PackageDocsSection.js';
+import SourceGuideSection from './assets/view/sections/SourceGuideSection.js';
+
+/**
+ * The page template is intentionally thin.
+ *
+ * Developers learning White Label can start here to see the complete page at
+ * a glance, then follow each import into a focused example. Build-time data is
+ * kept at this boundary while individual views stay reusable and easy to read.
+ */
+export default function IndexPage(data: Record<string, unknown>) {
+    const page = data as unknown as PageData;
+    const structuredData = JSON.stringify(page.structuredData).replaceAll('<', '\\u003c');
+
+    return (
+        <html id="index" lang="en-US" dir="ltr">
+            <head>
+                <meta charset="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <title>{page.title}</title>
+                <meta name="description" content={page.meta.description} />
+                <meta name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1" />
+                <link rel="canonical" href={`${page.siteUrl}/`} />
+                <meta property="og:title" content={page.title} />
+                <meta property="og:description" content={page.meta.description} />
+                <meta property="og:type" content="website" />
+                <meta property="og:url" content={`${page.siteUrl}/`} />
+                <link rel="stylesheet" href={`${page.cdn}release/${page.version}/assets/style/global.css`} media="all" />
+                <link rel="stylesheet" href={`${page.cdn}release/${page.version}/assets/style/print.css`} media="print" />
+                <script type="application/ld+json">{raw(structuredData)}</script>
+            </head>
+            <body itemscope itemtype="https://schema.org/WebPage">
+                <a className="skip-link" href="#main">Skip to content</a>
+                <SiteHeader />
+                <main id="main" tabindex="-1">
+                    <HeroSection />
+                    <LiveExampleSection />
+                    <PackageDocsSection />
+                    <SourceGuideSection />
+                    <GettingStartedSection />
+                </main>
+                <SiteFooter />
+                <script src={`${page.cdn}release/${page.version}/assets/script/index.compiled.js`} defer />
+            </body>
+        </html>
+    );
+}

package/cli/index.ts

@@ -0,0 +1,117 @@
+#!/usr/bin/env node
+
+import {readdir} from 'node:fs/promises';
+import path from 'node:path';
+import process from 'node:process';
+import {createInterface} from 'node:readline/promises';
+import {fileURLToPath} from 'node:url';
+import {createProject} from '../scaffold/index.js';
+
+export interface CliDependencies {
+    cwd?: () => string;
+    createProject?: typeof createProject;
+    stdout?: Pick<NodeJS.WriteStream, 'write'>;
+    stderr?: Pick<NodeJS.WriteStream, 'write'>;
+    input?: NodeJS.ReadableStream;
+    output?: NodeJS.WritableStream;
+    isInteractive?: boolean;
+}
+
+function usage() {
+    return [
+        'Usage:',
+        '  white-label create <directory> [--jsx | --no-jsx]',
+        '',
+        'Commands:',
+        '  create <directory>  Create a White Label project.',
+        '',
+        'Options:',
+        '  --jsx              Generate TypeScript with JSX/TSX templates.',
+        '  --no-jsx           Generate plain TypeScript with HTML string templates.',
+        '  -h, --help         Show this help message.'
+    ].join('\n');
+}
+
+export function formatCliError(error: unknown) {
+    return error instanceof Error ? error.message : String(error);
+}
+
+async function askForJsx(input: NodeJS.ReadableStream, output: NodeJS.WritableStream): Promise<boolean> {
+    const readline = createInterface({input, output});
+    try {
+        const answer = await readline.question(
+            'Use JSX/TSX for page and view templates? Choose Yes for JSX syntax like <section>...</section>, or No for plain TypeScript that returns HTML strings. (Y/n) '
+        );
+        return !/^n(?:o)?$/i.test(answer.trim());
+    } finally {
+        readline.close();
+    }
+}
+
+/** Reject an existing non-empty target so a mistyped CLI destination cannot overwrite project files. */
+async function assertDestinationAvailable(destination: string) {
+    try {
+        const entries = await readdir(destination);
+        if (entries.length) {
+            throw new Error(`Destination directory must be empty: ${destination}`);
+        }
+    } catch (error) {
+        if (error instanceof Error && 'code' in error && error.code === 'ENOENT') {return;}
+        throw error;
+    }
+}
+
+export async function runCli(args: readonly string[], dependencies: CliDependencies = {}) {
+    const cwd = dependencies.cwd ?? process.cwd;
+    const scaffold = dependencies.createProject ?? createProject;
+    const stdout = dependencies.stdout ?? process.stdout;
+    const stderr = dependencies.stderr ?? process.stderr;
+    const input = dependencies.input ?? process.stdin;
+    const output = dependencies.output ?? process.stdout;
+    const [command, destination, ...options] = args;
+
+    if (command === '--help' || command === '-h' || args.length === 0) {
+        stdout.write(`${usage()}\n`);
+        return 0;
+    }
+
+    const allowedOptions = new Set(['--jsx', '--no-jsx']);
+    if (
+        command !== 'create' ||
+        !destination ||
+        options.some(option => !allowedOptions.has(option)) ||
+        (options.includes('--jsx') && options.includes('--no-jsx'))
+    ) {
+        stderr.write(`${usage()}\n`);
+        return 1;
+    }
+
+    let jsx: boolean;
+    if (options.includes('--jsx')) {
+        jsx = true;
+    } else if (options.includes('--no-jsx')) {
+        jsx = false;
+    } else if (dependencies.isInteractive ?? Boolean(process.stdin.isTTY && process.stdout.isTTY)) {
+        jsx = await askForJsx(input, output);
+    } else {
+        jsx = true;
+    }
+
+    const resolvedDestination = path.resolve(cwd(), destination);
+    await assertDestinationAvailable(resolvedDestination);
+    await scaffold({destination: resolvedDestination, jsx});
+    stdout.write(`Created White Label project at ${resolvedDestination}\n`);
+    return 0;
+}
+
+const invokedPath = path.resolve(process.argv[1] as string);
+const modulePath = fileURLToPath(import.meta.url);
+if (invokedPath === modulePath) {
+    runCli(process.argv.slice(2)).then(
+        (exitCode) => {process.exitCode = exitCode;},
+        (error: unknown) => {
+            process.stderr.write(`Unable to create White Label project: ${formatCliError(error)}\n`);
+            process.exitCode = 1;
+        }
+    );
+}

package/dist/app/404.d.ts

@@ -0,0 +1 @@
+export default function NotFoundPage(data: Record<string, unknown>): import("white-label-view/jsx-runtime").JSXMarkup;

package/dist/app/404.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "white-label-view/jsx-runtime";
+export default function NotFoundPage(data) {
+    const page = data;
+    return (_jsxs("html", { lang: "en-US", dir: "ltr", children: [_jsxs("head", { children: [_jsx("meta", { charset: "utf-8" }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), _jsx("meta", { name: "robots", content: "noindex,follow" }), _jsx("title", { children: "Page not found | White Label" }), _jsx("link", { rel: "stylesheet", href: `${page.cdn}release/${page.version}/assets/style/global.css` })] }), _jsxs("body", { children: [_jsx("a", { className: "skip-link", href: "#main", children: "Skip to the message" }), _jsxs("main", { id: "main", tabindex: "-1", className: "mx-auto max-w-5xl px-4 py-24 sm:px-6 lg:px-8", children: [_jsx("h1", { className: "text-5xl font-extrabold tracking-tight", children: "Page not found" }), _jsx("p", { className: "mt-6 text-lg", children: "The requested page does not exist." }), _jsx("p", { className: "mt-6", children: _jsx("a", { className: "font-bold underline", href: page.www, children: "Return to the White Label starter" }) })] })] })] }));
+}
+//# sourceMappingURL=404.js.map

package/dist/app/404.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"404.js","sourceRoot":"","sources":["../../app/404.tsx"],"names":[],"mappings":";AAMA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,IAA6B;IAC9D,MAAM,IAAI,GAAG,IAA2B,CAAC;IACzC,OAAO,CACH,gBAAM,IAAI,EAAC,OAAO,EAAC,GAAG,EAAC,KAAK,aACxB,2BACI,eAAM,OAAO,EAAC,OAAO,GAAG,EACxB,eAAM,IAAI,EAAC,UAAU,EAAC,OAAO,EAAC,qCAAqC,GAAG,EACtE,eAAM,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,gBAAgB,GAAG,EAC/C,2DAA2C,EAC3C,eAAM,GAAG,EAAC,YAAY,EAAC,IAAI,EAAE,GAAG,IAAI,CAAC,GAAG,WAAW,IAAI,CAAC,OAAO,0BAA0B,GAAI,IAC1F,EACP,2BACI,YAAG,SAAS,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,oCAAwB,EAC7D,gBAAM,EAAE,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAC,SAAS,EAAC,8CAA8C,aAClF,aAAI,SAAS,EAAC,wCAAwC,+BAAoB,EAC1E,YAAG,SAAS,EAAC,cAAc,mDAAuC,EAClE,YAAG,SAAS,EAAC,MAAM,YAAC,YAAG,SAAS,EAAC,qBAAqB,EAAC,IAAI,EAAE,IAAI,CAAC,GAAG,kDAAuC,GAAI,IAC7G,IACJ,IACJ,CACV,CAAC;AACN,CAAC","sourcesContent":["interface PageData {\n    cdn: string;\n    version: string;\n    www: string;\n}\n\nexport default function NotFoundPage(data: Record<string, unknown>) {\n    const page = data as unknown as PageData;\n    return (\n        <html lang=\"en-US\" dir=\"ltr\">\n            <head>\n                <meta charset=\"utf-8\" />\n                <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n                <meta name=\"robots\" content=\"noindex,follow\" />\n                <title>Page not found | White Label</title>\n                <link rel=\"stylesheet\" href={`${page.cdn}release/${page.version}/assets/style/global.css`} />\n            </head>\n            <body>\n                <a className=\"skip-link\" href=\"#main\">Skip to the message</a>\n                <main id=\"main\" tabindex=\"-1\" className=\"mx-auto max-w-5xl px-4 py-24 sm:px-6 lg:px-8\">\n                    <h1 className=\"text-5xl font-extrabold tracking-tight\">Page not found</h1>\n                    <p className=\"mt-6 text-lg\">The requested page does not exist.</p>\n                    <p className=\"mt-6\"><a className=\"font-bold underline\" href={page.www}>Return to the White Label starter</a></p>\n                </main>\n            </body>\n        </html>\n    );\n}\n"]}

package/dist/app/assets/script/index.d.ts

@@ -1,2 +1,8 @@
-/** @module app/assets/script/index */
-export {};
+/**
+ * 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';

package/dist/app/assets/script/index.js

@@ -1,2 +1,12 @@
-export {};
+/** @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);
 //# sourceMappingURL=index.js.map

package/dist/app/assets/script/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../app/assets/script/index.ts"],"names":[],"mappings":"","sourcesContent":["/** @module app/assets/script/index */\nexport {};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../app/assets/script/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAC,yBAAyB,EAAC,MAAM,4BAA4B,CAAC;AAErE;;;;;GAKG;AACH,OAAO,EAAC,yBAAyB,EAAC,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D,yBAAyB,CAAC,QAAQ,CAAC,CAAC","sourcesContent":["/** @module app/assets/script/index */\nimport {initializeTaskApplication} from './tasks/TaskApplication.js';\n\n/**\n * Browser entry points should stay small.\n *\n * The task application owns its own composition and lifecycle, so the entry\n * module has one obvious responsibility: start the feature for this document.\n */\nexport {initializeTaskApplication} from './tasks/TaskApplication.js';\nexport {normalizeTaskFilter} from './tasks/TaskRouter.js';\n\ninitializeTaskApplication(document);\n"]}

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

@@ -0,0 +1,20 @@
+import type Router from 'white-label-router';
+import type View from 'white-label-view';
+import { type TaskMediator } from './TaskMediator.js';
+import TaskModel from './TaskModel.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 declare function initializeTaskApplication(documentRoot: Document): TaskApplication;

package/dist/app/assets/script/tasks/TaskApplication.js

@@ -0,0 +1,63 @@
+import { createInitialTaskState, describeTaskStatus } from '../../view/examples/tasks/task-state.js';
+import { createTaskMediator } from './TaskMediator.js';
+import TaskModel from './TaskModel.js';
+import { createTaskRouter } from './TaskRouter.js';
+import { createTaskView } from './TaskView.js';
+/**
+ * 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) {
+    const parentElement = documentRoot.querySelector('[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('[data-task-status]');
+    const updateStatus = () => { status.textContent = describeTaskStatus(model.get()); };
+    const addTask = (title) => { model.add(title); updateStatus(); };
+    const toggleTask = (id) => { model.toggle(id); updateStatus(); };
+    const setFilter = (filter) => { model.setFilter(filter); updateStatus(); };
+    mediator.on('task:add', addTask);
+    mediator.on('task:toggle', toggleTask);
+    mediator.on('task:filter', setFilter);
+    const delegated = view.delegate(parentElement);
+    delegated.on('submit', '[data-task-form]', (event) => {
+        event.preventDefault();
+        const form = event.target;
+        const input = form.querySelector('[name="task"]');
+        mediator.emit('task:add', input.value);
+        parentElement.querySelector('[name="task"]').focus();
+    });
+    delegated.on('change', '[data-task-toggle]', (event) => {
+        const input = event.target;
+        const id = Number(input.dataset.taskId);
+        mediator.emit('task:toggle', id);
+        const focusTarget = parentElement.querySelector(`[data-task-id="${id}"]`)
+            ?? parentElement.querySelector('[data-task-filter][aria-current="page"]');
+        focusTarget.focus();
+    });
+    const router = createTaskRouter(documentRoot, mediator);
+    return {
+        mediator,
+        model,
+        router,
+        view,
+        destroy() {
+            delegated.clear();
+            router.destroy();
+            mediator.removeListener('task:add', addTask);
+            mediator.removeListener('task:toggle', toggleTask);
+            mediator.removeListener('task:filter', setFilter);
+            view.destroy();
+            model.destroy();
+            mediator.destroy();
+        }
+    };
+}
+//# sourceMappingURL=TaskApplication.js.map

package/dist/app/assets/script/tasks/TaskApplication.js.map

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

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

@@ -0,0 +1,15 @@
+import Mediator from 'white-label-mediator';
+import type { TaskFilter } from '../../view/examples/tasks/task-state.js';
+/**
+ * Document the event protocol in one place even though the currently installed
+ * Mediator exposes the EventEmitter-compatible runtime without a generic map.
+ * Keeping names and payloads explicit still gives learners one clear contract
+ * to follow when tracing the example.
+ */
+export type TaskEvents = {
+    'task:add': [title: string];
+    'task:filter': [filter: TaskFilter];
+    'task:toggle': [id: number];
+};
+export type TaskMediator = Mediator;
+export declare function createTaskMediator(): TaskMediator;

package/dist/app/assets/script/tasks/TaskMediator.js

@@ -0,0 +1,5 @@
+import Mediator from 'white-label-mediator';
+export function createTaskMediator() {
+    return new Mediator().initialize();
+}
+//# sourceMappingURL=TaskMediator.js.map

package/dist/app/assets/script/tasks/TaskMediator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskMediator.js","sourceRoot":"","sources":["../../../../../app/assets/script/tasks/TaskMediator.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,sBAAsB,CAAC;AAiB5C,MAAM,UAAU,kBAAkB;IAC9B,OAAO,IAAI,QAAQ,EAAE,CAAC,UAAU,EAAE,CAAC;AACvC,CAAC","sourcesContent":["import Mediator from 'white-label-mediator';\nimport type {TaskFilter} from '../../view/examples/tasks/task-state.js';\n\n/**\n * Document the event protocol in one place even though the currently installed\n * Mediator exposes the EventEmitter-compatible runtime without a generic map.\n * Keeping names and payloads explicit still gives learners one clear contract\n * to follow when tracing the example.\n */\nexport type TaskEvents = {\n    'task:add': [title: string];\n    'task:filter': [filter: TaskFilter];\n    'task:toggle': [id: number];\n};\n\nexport type TaskMediator = Mediator;\n\nexport function createTaskMediator(): TaskMediator {\n    return new Mediator().initialize();\n}\n"]}

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

@@ -0,0 +1,13 @@
+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;
+    toggle(id: number): boolean;
+    setFilter(filter: TaskFilter): boolean;
+}

package/dist/app/assets/script/tasks/TaskModel.js

@@ -0,0 +1,33 @@
+import { Model } from 'white-label-model';
+/**
+ * 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 {
+    add(title) {
+        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) {
+        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) {
+        return this.update({ filter });
+    }
+}
+//# sourceMappingURL=TaskModel.js.map

package/dist/app/assets/script/tasks/TaskModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskModel.js","sourceRoot":"","sources":["../../../../../app/assets/script/tasks/TaskModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAGxC;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAgB;IACnD,GAAG,CAAC,KAAa;QACb,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;QAC7B,IAAI,CAAC,OAAO,EAAE,CAAC;YAAA,OAAO,KAAK,CAAC;QAAA,CAAC;QAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACzB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;QACpE,OAAO,IAAI,CAAC,MAAM,CAAC,EAAC,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAC,CAAC,EAAC,CAAC,CAAC;IACjG,CAAC;IAED,MAAM,CAAC,EAAU;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACzB,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QAC5D,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YAAA,OAAO,KAAK,CAAC;QAAA,CAAC;QAC9B,MAAM,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;QAC/B,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAE,CAAC;QAC3B,KAAK,CAAC,KAAK,CAAC,GAAG,EAAC,GAAG,IAAI,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAC,CAAC;QACnD,OAAO,IAAI,CAAC,MAAM,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC;IAChC,CAAC;IAED,SAAS,CAAC,MAAkB;QACxB,OAAO,IAAI,CAAC,MAAM,CAAC,EAAC,MAAM,EAAC,CAAC,CAAC;IACjC,CAAC;CACJ","sourcesContent":["import {Model} from 'white-label-model';\nimport type {TaskFilter, TaskState} from '../../view/examples/tasks/task-state.js';\n\n/**\n * Domain state belongs in Model, not in the DOM or router.\n *\n * Extending Model with small domain methods gives application code meaningful\n * operations while preserving White Label's observable state contract.\n */\nexport default class TaskModel extends Model<TaskState> {\n    add(title: string): boolean {\n        const trimmed = title.trim();\n        if (!trimmed) {return false;}\n        const state = this.get();\n        const nextId = Math.max(0, ...state.tasks.map(task => task.id)) + 1;\n        return this.update({tasks: [...state.tasks, {complete: false, id: nextId, title: trimmed}]});\n    }\n\n    toggle(id: number): boolean {\n        const state = this.get();\n        const index = state.tasks.findIndex(task => task.id === id);\n        if (index < 0) {return false;}\n        const tasks = [...state.tasks];\n        const task = tasks[index]!;\n        tasks[index] = {...task, complete: !task.complete};\n        return this.update({tasks});\n    }\n\n    setFilter(filter: TaskFilter): boolean {\n        return this.update({filter});\n    }\n}\n"]}