generator-white-label 9.0.0 → 10.0.0

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

@@ -0,0 +1,26 @@
+import {html} from 'white-label-view/html';
+import CodeBlock, {syntax} from '../CodeBlock.js';
+
+/** Keep the shortest path from generator install to a verified local build visible. */
+export default function GettingStartedSection() {
+    return html`<section class="section" id="start" aria-labelledby="start-title">
+            <div class="container start-grid">
+                <div class="section-intro">
+                    <p class="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 class="code-label">Create a project</p>
+                    ${CodeBlock({lines: [html`<span class="${syntax.type}">npx</span> generator-white-label`]})}
+                    <p class="code-label">Then develop</p>
+                    ${CodeBlock({lines: [
+                        html`<span class="${syntax.type}">npm</span> ci`,
+                        html`<span class="${syntax.type}">npm</span> test`,
+                        html`<span class="${syntax.type}">npm</span> run build -- --version=<span class="${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.ts

@@ -0,0 +1,15 @@
+import {html} from 'white-label-view/html';
+
+/** Static presentation stays a plain tagged-template function; View is only needed for lifecycle/state. */
+export default function HeroSection() {
+    return html`<section class="hero" id="top" aria-labelledby="hero-title">
+            <div class="container hero__inner">
+                <h1 id="hero-title">Small pieces.<br>Complete applications.</h1>
+                <p class="hero__lede">Framework-independent TypeScript packages for state, rendering, coordination, routing, and project generation.</p>
+                <div class="hero__links">
+                    <a class="primary-link" href="#example">See the example</a>
+                    <a href="#start">Install the generator</a>
+                </div>
+            </div>
+        </section>`;
+}

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

@@ -0,0 +1,24 @@
+import {html} from 'white-label-view/html';
+import TaskExample from '../examples/tasks/TaskExample.js';
+import {createInitialTaskState, describeTaskStatus} from '../examples/tasks/task-state.js';
+
+/** Render useful initial HTML with the same tagged template reused by Browser View. */
+export default function LiveExampleSection() {
+    const state = createInitialTaskState();
+
+    return html`<section class="section" id="example" aria-labelledby="example-title">
+            <div class="container">
+                <div class="section-intro">
+                    <p class="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 class="demo" data-task-example>
+                    ${TaskExample({state})}
+                    <p class="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.ts

@@ -0,0 +1,69 @@
+import {html} from 'white-label-view/html';
+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 html`<section class="section" id="packages" aria-labelledby="packages-title">
+            <div class="container">
+                <div class="section-intro">
+                    <p class="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 class="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 class="docs-grid">
+                    <article>
+                        <p class="eyebrow">Model</p><h3>State is observable, not magical.</h3>
+                        ${CodeBlock({lines: [
+                            html`<span class="${syntax.keyword}">const</span> model = <span class="${syntax.keyword}">new</span> <span class="${syntax.type}">Model</span>({count: 0});`,
+                            html`model.addEventListener(<span class="${syntax.value}">'change'</span>, event =&gt; render(event.detail));`,
+                            html`model.update({count: 1});`
+                        ]})}
+                        <p><a href="${repositories.model}">Model documentation</a></p>
+                    </article>
+                    <article>
+                        <p class="eyebrow">View</p><h3>Tagged HTML is the first-party template syntax.</h3>
+                        ${CodeBlock({lines: [
+                            html`<span class="${syntax.keyword}">import</span> {html} from <span class="${syntax.value}">'white-label-view/html'</span>;`,
+                            html`<span class="${syntax.keyword}">const</span> view = <span class="${syntax.keyword}">new</span> <span class="${syntax.type}">View</span>({`,
+                            html`  model,`,
+                            html`  template: state =&gt; html\`${'<p>'}\${state.count}${'</p>'}\``,
+                            html`}).initialize();`
+                        ]})}
+                        <p><a href="${repositories.view}">View documentation</a></p>
+                    </article>
+                    <article>
+                        <p class="eyebrow">Mediator</p><h3>Modules communicate through events.</h3>
+                        ${CodeBlock({lines: [
+                            html`mediator.addEventListener(<span class="${syntax.value}">'counter:increment'</span>, increment);`,
+                            html`mediator.dispatchEvent(<span class="${syntax.keyword}">new</span> <span class="${syntax.type}">CustomEvent</span>(<span class="${syntax.value}">'counter:increment'</span>));`
+                        ]})}
+                        <p><a href="${repositories.mediator}">Mediator documentation</a></p>
+                    </article>
+                    <article>
+                        <p class="eyebrow">Router</p><h3>Routes describe intent.</h3>
+                        ${CodeBlock({lines: [
+                            html`router.routes = {`,
+                            html`  <span class="${syntax.value}">'/'</span>: (_scope, location) =&gt; {`,
+                            html`    mediator.dispatchEvent(<span class="${syntax.keyword}">new</span> <span class="${syntax.type}">CustomEvent</span>(<span class="${syntax.value}">'filter:set'</span>, {detail: location.data.query.filter}));`,
+                            html`  }`,
+                            html`};`
+                        ]})}
+                        <p><a href="${repositories.router}">Router documentation</a></p>
+                    </article>
+                </div>
+            </div>
+        </section>`;
+}

package/app/assets/view/sections/{SourceGuideSection.tsx → SourceGuideSection.ts}

@@ -1,28 +1,23 @@
-/**
- * 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.
- */
+import {html} from 'white-label-view/html';
+
+/** Point learners at the implementation paths that demonstrate each responsibility. */
 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>
+    return html`<section class="section" id="source" aria-labelledby="source-title">
+            <div class="container start-grid">
+                <div class="section-intro">
+                    <p class="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">
+                <div class="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>Page composition</dt><dd><code>app/index.ts</code></dd></div>
+                        <div><dt>Tagged HTML 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>
-    );
+        </section>`;
 }

package/app/index.ts

@@ -0,0 +1,50 @@
+import {html, unsafeHTML} from 'white-label-view/html';
+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';
+
+function structuredDataScript(value: unknown) {
+    const json = JSON.stringify(value).replaceAll('<', '\\u003c');
+    return unsafeHTML(`<script type="application/ld+json">${json}</script>`);
+}
+
+/** Compose the static page from small tagged-template functions. */
+export default function IndexPage(data: Record<string, unknown>) {
+    const page = data as unknown as PageData;
+
+    return html`<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">
+                ${structuredDataScript(page.structuredData)}
+            </head>
+            <body itemscope itemtype="https://schema.org/WebPage">
+                <a class="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></script>
+            </body>
+        </html>`;
+}

package/cli/index.ts

@@ -4,7 +4,6 @@ import {realpathSync} from 'node:fs';
 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';
 
@@ -13,22 +12,17 @@ export interface CliDependencies {
     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]',
+        '  white-label create <directory>',
         '',
         'Commands:',
-        '  create <directory>  Create a White Label project.',
+        '  create <directory>  Create a tagged-template 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');
 }
@@ -37,18 +31,6 @@ 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 {
@@ -67,8 +49,6 @@ export async function runCli(args: readonly string[], dependencies: CliDependenc
     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) {
@@ -76,31 +56,14 @@ export async function runCli(args: readonly string[], dependencies: CliDependenc
         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'))
-    ) {
+    if (command !== 'create' || !destination || options.length) {
         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});
+    await scaffold({destination: resolvedDestination});
     stdout.write(`Created White Label project at ${resolvedDestination}\n`);
     return 0;
 }

package/dist/app/404.d.ts

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

package/dist/app/404.js

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

package/dist/app/404.js.map

@@ -1 +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"]}
+{"version":3,"file":"404.js","sourceRoot":"","sources":["../../app/404.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,uBAAuB,CAAC;AAQ3C,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,IAA6B;IAC9D,MAAM,IAAI,GAAG,IAA2B,CAAC;IACzC,OAAO,IAAI,CAAA;;;;;;+CAMgC,IAAI,CAAC,GAAG,WAAW,IAAI,CAAC,OAAO;;;;;;;2EAOH,IAAI,CAAC,GAAG;;;gBAGnE,CAAC;AACjB,CAAC","sourcesContent":["import {html} from 'white-label-view/html';\n\ninterface 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 html`<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 class=\"skip-link\" href=\"#main\">Skip to the message</a>\n                <main id=\"main\" tabindex=\"-1\" class=\"mx-auto max-w-5xl px-4 py-24 sm:px-6 lg:px-8\">\n                    <h1 class=\"text-5xl font-extrabold tracking-tight\">Page not found</h1>\n                    <p class=\"mt-6 text-lg\">The requested page does not exist.</p>\n                    <p class=\"mt-6\"><a class=\"font-bold underline\" href=\"${page.www}\">Return to the White Label starter</a></p>\n                </main>\n            </body>\n        </html>`;\n}\n"]}

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

@@ -1,8 +1,3 @@
-/**
- * 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.
- */
+/** Start the feature composition for this document. */
 export { initializeTaskApplication } from './tasks/TaskApplication.js';
 export { normalizeTaskFilter } from './tasks/TaskRouter.js';

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

@@ -1,11 +1,6 @@
 /** @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.
- */
+/** Start the feature composition for this document. */
 export { initializeTaskApplication } from './tasks/TaskApplication.js';
 export { normalizeTaskFilter } from './tasks/TaskRouter.js';
 initializeTaskApplication(document);

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../app/assets/script/index.ts"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAC,yBAAyB,EAAC,MAAM,4BAA4B,CAAC;AAErE,uDAAuD;AACvD,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/** Start the feature composition for this document. */\nexport {initializeTaskApplication} from './tasks/TaskApplication.js';\nexport {normalizeTaskFilter} from './tasks/TaskRouter.js';\n\ninitializeTaskApplication(document);\n"]}

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

@@ -1,9 +1,4 @@
 import View from 'white-label-view';
 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.
- */
+/** Adopt the build-time task root and reuse the same tagged template for model updates. */
 export declare function createTaskView(parentElement: HTMLElement, model: TaskModel): View;

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

@@ -1,12 +1,6 @@
-import { jsx as _jsx } from "white-label-view/jsx-runtime";
 import View from 'white-label-view';
 import TaskExample from '../../view/examples/tasks/TaskExample.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.
- */
+/** Adopt the build-time task root and reuse the same tagged template for model updates. */
 export function createTaskView(parentElement, model) {
     const element = parentElement.querySelector('[data-task-app]');
     if (!element) {
@@ -17,7 +11,7 @@ export function createTaskView(parentElement, model) {
         model,
         parentElement,
         template(data) {
-            return _jsx(TaskExample, { state: data });
+            return TaskExample({ state: data });
         }
     }).initialize();
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TaskView.js","sourceRoot":"","sources":["../../../../../app/assets/script/tasks/TaskView.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,kBAAkB,CAAC;AACpC,OAAO,WAAW,MAAM,0CAA0C,CAAC;AAInE;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,aAA0B,EAAE,KAAgB;IACvE,MAAM,OAAO,GAAG,aAAa,CAAC,aAAa,CAAc,iBAAiB,CAAC,CAAC;IAC5E,IAAI,CAAC,OAAO,EAAE,CAAC;QAAA,MAAM,IAAI,SAAS,CAAC,gDAAgD,CAAC,CAAC;IAAA,CAAC;IAEtF,OAAO,IAAI,IAAI,CAAC;QACZ,OAAO;QACP,KAAK;QACL,aAAa;QACb,QAAQ,CAAC,IAAI;YACT,OAAO,KAAC,WAAW,IAAC,KAAK,EAAE,IAAiB,GAAI,CAAC;QACrD,CAAC;KACJ,CAAC,CAAC,UAAU,EAAE,CAAC;AACpB,CAAC","sourcesContent":["import View from 'white-label-view';\nimport TaskExample from '../../view/examples/tasks/TaskExample.js';\nimport type {TaskState} from '../../view/examples/tasks/task-state.js';\nimport type TaskModel from './TaskModel.js';\n\n/**\n * View owns rendering, but not application decisions.\n *\n * Passing the already-rendered task root lets View adopt useful static HTML\n * instead of replacing the document merely because JavaScript has started.\n */\nexport function createTaskView(parentElement: HTMLElement, model: TaskModel): View {\n    const element = parentElement.querySelector<HTMLElement>('[data-task-app]');\n    if (!element) {throw new TypeError('Task example requires its static task-app root');}\n\n    return new View({\n        element,\n        model,\n        parentElement,\n        template(data) {\n            return <TaskExample state={data as TaskState} />;\n        }\n    }).initialize();\n}\n"]}
+{"version":3,"file":"TaskView.js","sourceRoot":"","sources":["../../../../../app/assets/script/tasks/TaskView.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,kBAAkB,CAAC;AACpC,OAAO,WAAW,MAAM,0CAA0C,CAAC;AAInE,2FAA2F;AAC3F,MAAM,UAAU,cAAc,CAAC,aAA0B,EAAE,KAAgB;IACvE,MAAM,OAAO,GAAG,aAAa,CAAC,aAAa,CAAc,iBAAiB,CAAC,CAAC;IAC5E,IAAI,CAAC,OAAO,EAAE,CAAC;QAAA,MAAM,IAAI,SAAS,CAAC,gDAAgD,CAAC,CAAC;IAAA,CAAC;IAEtF,OAAO,IAAI,IAAI,CAAC;QACZ,OAAO;QACP,KAAK;QACL,aAAa;QACb,QAAQ,CAAC,IAAI;YACT,OAAO,WAAW,CAAC,EAAC,KAAK,EAAE,IAAiB,EAAC,CAAC,CAAC;QACnD,CAAC;KACJ,CAAC,CAAC,UAAU,EAAE,CAAC;AACpB,CAAC","sourcesContent":["import View from 'white-label-view';\nimport TaskExample from '../../view/examples/tasks/TaskExample.js';\nimport type {TaskState} from '../../view/examples/tasks/task-state.js';\nimport type TaskModel from './TaskModel.js';\n\n/** Adopt the build-time task root and reuse the same tagged template for model updates. */\nexport function createTaskView(parentElement: HTMLElement, model: TaskModel): View {\n    const element = parentElement.querySelector<HTMLElement>('[data-task-app]');\n    if (!element) {throw new TypeError('Task example requires its static task-app root');}\n\n    return new View({\n        element,\n        model,\n        parentElement,\n        template(data) {\n            return TaskExample({state: data as TaskState});\n        }\n    }).initialize();\n}\n"]}

package/dist/app/assets/view/CodeBlock.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'white-label-view/jsx-runtime';
+import { type HTMLMarkup } from 'white-label-view/html';
 export declare const syntax: {
     keyword: string;
     type: string;
@@ -7,5 +7,5 @@ export declare const syntax: {
 };
 /** Render a readable code example with stable line numbers and caller-supplied syntax spans. */
 export default function CodeBlock({ lines }: {
-    lines: JSX.Element[];
-}): import("white-label-view/jsx-runtime").JSXMarkup;
+    lines: HTMLMarkup[];
+}): HTMLMarkup;

package/dist/app/assets/view/CodeBlock.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "white-label-view/jsx-runtime";
+import { html } from 'white-label-view/html';
 export const syntax = {
     keyword: 'code-syntax-keyword',
     type: 'code-syntax-type',
@@ -7,6 +7,8 @@ export const syntax = {
 };
 /** Render a readable code example with stable line numbers and caller-supplied syntax spans. */
 export default function CodeBlock({ lines }) {
-    return (_jsx("pre", { className: "code-block", children: _jsx("code", { children: lines.map((line, index) => (_jsxs("span", { className: "code-block__line", children: [_jsx("span", { "aria-hidden": "true", className: "code-block__number", children: index + 1 }), _jsx("span", { children: line })] }))) }) }));
+    return html `<pre class="code-block"><code>${lines.map((line, index) => html `<span class="code-block__line">
+                <span aria-hidden="true" class="code-block__number">${index + 1}</span><span>${line}</span>
+            </span>`)}</code></pre>`;
 }
 //# sourceMappingURL=CodeBlock.js.map

package/dist/app/assets/view/CodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../../app/assets/view/CodeBlock.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,OAAO,EAAE,qBAAqB;IAC9B,IAAI,EAAE,kBAAkB;IACxB,KAAK,EAAE,mBAAmB;IAC1B,KAAK,EAAE,mBAAmB;CAC7B,CAAC;AAEF,gGAAgG;AAChG,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAC,KAAK,EAAyB;IAC7D,OAAO,CACH,cAAK,SAAS,EAAC,YAAY,YAAC,yBAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1D,gBAAM,SAAS,EAAC,kBAAkB,aAAC,8BAAkB,MAAM,EAAC,SAAS,EAAC,oBAAoB,YAAE,KAAK,GAAG,CAAC,GAAQ,EAAA,yBAAO,IAAI,GAAQ,IAAO,CAC1I,CAAC,GAAQ,GAAM,CACnB,CAAC;AACN,CAAC","sourcesContent":["import type {JSX} from 'white-label-view/jsx-runtime';\n\nexport const syntax = {\n    keyword: 'code-syntax-keyword',\n    type: 'code-syntax-type',\n    value: 'code-syntax-value',\n    muted: 'code-syntax-muted'\n};\n\n/** Render a readable code example with stable line numbers and caller-supplied syntax spans. */\nexport default function CodeBlock({lines}: {lines: JSX.Element[]}) {\n    return (\n        <pre className=\"code-block\"><code>{lines.map((line, index) => (\n            <span className=\"code-block__line\"><span aria-hidden=\"true\" className=\"code-block__number\">{index + 1}</span><span>{line}</span></span>\n        ))}</code></pre>\n    );\n}\n"]}
+{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../../app/assets/view/CodeBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAkB,MAAM,uBAAuB,CAAC;AAE5D,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,OAAO,EAAE,qBAAqB;IAC9B,IAAI,EAAE,kBAAkB;IACxB,KAAK,EAAE,mBAAmB;IAC1B,KAAK,EAAE,mBAAmB;CAC7B,CAAC;AAEF,gGAAgG;AAChG,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAC,KAAK,EAAwB;IAC5D,OAAO,IAAI,CAAA,iCAAiC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;sEACT,KAAK,GAAG,CAAC,gBAAgB,IAAI;oBAC/E,CAAC,eAAe,CAAC;AACrC,CAAC","sourcesContent":["import {html, type HTMLMarkup} from 'white-label-view/html';\n\nexport const syntax = {\n    keyword: 'code-syntax-keyword',\n    type: 'code-syntax-type',\n    value: 'code-syntax-value',\n    muted: 'code-syntax-muted'\n};\n\n/** Render a readable code example with stable line numbers and caller-supplied syntax spans. */\nexport default function CodeBlock({lines}: {lines: HTMLMarkup[]}) {\n    return html`<pre class=\"code-block\"><code>${lines.map((line, index) => html`<span class=\"code-block__line\">\n                <span aria-hidden=\"true\" class=\"code-block__number\">${index + 1}</span><span>${line}</span>\n            </span>`)}</code></pre>`;\n}\n"]}

package/dist/app/assets/view/examples/tasks/TaskExample.d.ts

@@ -1,11 +1,5 @@
 import { type TaskState } from './task-state.js';
-/**
- * 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.
- */
+/** Render the task example from state for both build-time HTML and browser updates. */
 export default function TaskExample({ state }: {
     state: TaskState;
-}): import("white-label-view/jsx-runtime").JSXMarkup;
+}): import("white-label-view/html").HTMLMarkup;

package/dist/app/assets/view/examples/tasks/TaskExample.js

@@ -1,16 +1,48 @@
-import { jsx as _jsx, jsxs as _jsxs } from "white-label-view/jsx-runtime";
+import { attributes, html } from 'white-label-view/html';
 import { getVisibleTasks } from './task-state.js';
 const filters = ['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.
- */
+/** Render the task example from state for both build-time HTML and browser updates. */
 export default function TaskExample({ state }) {
     const visibleTasks = getVisibleTasks(state);
     const completed = state.tasks.filter(task => task.complete).length;
-    return (_jsxs("section", { className: "task-app", "data-task-app": true, "aria-label": "Interactive task example", children: [_jsxs("form", { className: "task-form", "data-task-form": true, action: "#example", method: "get", children: [_jsx("label", { htmlFor: "task-title", children: "New task" }), _jsxs("div", { className: "task-form__controls", children: [_jsx("input", { id: "task-title", name: "task", type: "text", autocomplete: "off", required: true }), _jsx("button", { type: "submit", children: "Add task" })] })] }), _jsx("nav", { className: "task-filters", "aria-label": "Filter tasks", children: filters.map(filter => (_jsxs("a", { href: `/?tasks=${filter}#example`, "data-task-filter": filter, "data-pushstate": true, "aria-current": state.filter === filter ? 'page' : 'false', children: [filter.charAt(0).toUpperCase(), filter.slice(1)] }))) }), _jsx("ul", { className: "task-list", children: visibleTasks.map(task => (_jsx("li", { children: _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: task.complete, "data-task-toggle": true, "data-task-id": task.id }), _jsx("span", { children: task.title })] }) }))) }), _jsxs("dl", { className: "demo__trace", children: [_jsxs("div", { children: [_jsx("dt", { children: "Router" }), _jsxs("dd", { children: ["/?tasks=", state.filter] })] }), _jsxs("div", { children: [_jsx("dt", { children: "Mediator" }), _jsx("dd", { children: "task:* application events" })] }), _jsxs("div", { children: [_jsx("dt", { children: "Model" }), _jsxs("dd", { children: [state.tasks.length, " tasks \u00B7 ", completed, " complete"] })] }), _jsxs("div", { children: [_jsx("dt", { children: "View" }), _jsxs("dd", { children: [visibleTasks.length, " tasks rendered"] })] })] })] }));
+    return html `<section class="task-app" data-task-app aria-label="Interactive task example">
+            <form class="task-form" data-task-form action="#example" method="get">
+                <label for="task-title">New task</label>
+                <div class="task-form__controls">
+                    <input id="task-title" name="task" type="text" autocomplete="off" required>
+                    <button type="submit">Add task</button>
+                </div>
+            </form>
+
+            <nav class="task-filters" aria-label="Filter tasks">
+                ${filters.map(filter => html `<a ${attributes({
+        href: `/?tasks=${filter}#example`,
+        'data-task-filter': filter,
+        'data-pushstate': true,
+        'aria-current': state.filter === filter ? 'page' : 'false'
+    })}>${filter.charAt(0).toUpperCase()}${filter.slice(1)}</a>`)}
+            </nav>
+
+            <ul class="task-list">
+                ${visibleTasks.map(task => html `<li>
+                        <label>
+                            <input ${attributes({
+        type: 'checkbox',
+        checked: task.complete,
+        'data-task-toggle': true,
+        'data-task-id': task.id
+    })}>
+                            <span>${task.title}</span>
+                        </label>
+                    </li>`)}
+            </ul>
+
+            <dl class="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>`;
 }
 //# sourceMappingURL=TaskExample.js.map

package/dist/app/assets/view/examples/tasks/TaskExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"TaskExample.js","sourceRoot":"","sources":["../../../../../../app/assets/view/examples/tasks/TaskExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,eAAe,EAAkC,MAAM,iBAAiB,CAAC;AAEjF,MAAM,OAAO,GAAiB,CAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;AAE7D;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAC,KAAK,EAAqB;IAC3D,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;IAEnE,OAAO,CACH,mBAAS,SAAS,EAAC,UAAU,uCAA0B,0BAA0B,aAC7E,gBAAM,SAAS,EAAC,WAAW,0BAAgB,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,aACrE,gBAAO,OAAO,EAAC,YAAY,yBAAiB,EAC5C,eAAK,SAAS,EAAC,qBAAqB,aAChC,gBAAO,EAAE,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,YAAY,EAAC,KAAK,EAAC,QAAQ,SAAG,EAC7E,iBAAQ,IAAI,EAAC,QAAQ,yBAAkB,IACrC,IACH,EAEP,cAAK,SAAS,EAAC,cAAc,gBAAY,cAAc,YAClD,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACnB,aACI,IAAI,EAAE,WAAW,MAAM,UAAU,sBACf,MAAM,0CAEV,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,aAEvD,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAChD,CACP,CAAC,GACA,EAEN,aAAI,SAAS,EAAC,WAAW,YACpB,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,uBACI,4BACI,gBACI,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,QAAQ,4CAER,IAAI,CAAC,EAAE,GACvB,EACF,yBAAO,IAAI,CAAC,KAAK,GAAQ,IACrB,GACP,CACR,CAAC,GACD,EAEL,cAAI,SAAS,EAAC,aAAa,aACvB,0BAAK,kCAAe,EAAA,qCAAa,KAAK,CAAC,MAAM,IAAM,IAAM,EACzD,0BAAK,oCAAiB,EAAA,qDAAkC,IAAM,EAC9D,0BAAK,iCAAc,EAAA,yBAAK,KAAK,CAAC,KAAK,CAAC,MAAM,oBAAW,SAAS,iBAAe,IAAM,EACnF,0BAAK,gCAAa,EAAA,yBAAK,YAAY,CAAC,MAAM,uBAAqB,IAAM,IACpE,IACC,CACb,CAAC;AACN,CAAC","sourcesContent":["import {getVisibleTasks, type TaskFilter, type TaskState} from './task-state.js';\n\nconst filters: TaskFilter[] = ['all', 'active', 'completed'];\n\n/**\n * Render the task example from state only.\n *\n * The same JSX function is used twice: once while generating the initial HTML\n * and again by white-label-view in the browser. Sharing one renderer keeps the\n * static and interactive versions of the example from drifting apart.\n */\nexport default function TaskExample({state}: {state: TaskState}) {\n    const visibleTasks = getVisibleTasks(state);\n    const completed = state.tasks.filter(task => task.complete).length;\n\n    return (\n        <section className=\"task-app\" data-task-app aria-label=\"Interactive task example\">\n            <form className=\"task-form\" data-task-form action=\"#example\" method=\"get\">\n                <label htmlFor=\"task-title\">New task</label>\n                <div className=\"task-form__controls\">\n                    <input id=\"task-title\" name=\"task\" type=\"text\" autocomplete=\"off\" required />\n                    <button type=\"submit\">Add task</button>\n                </div>\n            </form>\n\n            <nav className=\"task-filters\" aria-label=\"Filter tasks\">\n                {filters.map(filter => (\n                    <a\n                        href={`/?tasks=${filter}#example`}\n                        data-task-filter={filter}\n                        data-pushstate\n                        aria-current={state.filter === filter ? 'page' : 'false'}\n                    >\n                        {filter.charAt(0).toUpperCase()}{filter.slice(1)}\n                    </a>\n                ))}\n            </nav>\n\n            <ul className=\"task-list\">\n                {visibleTasks.map(task => (\n                    <li>\n                        <label>\n                            <input\n                                type=\"checkbox\"\n                                checked={task.complete}\n                                data-task-toggle\n                                data-task-id={task.id}\n                            />\n                            <span>{task.title}</span>\n                        </label>\n                    </li>\n                ))}\n            </ul>\n\n            <dl className=\"demo__trace\">\n                <div><dt>Router</dt><dd>/?tasks={state.filter}</dd></div>\n                <div><dt>Mediator</dt><dd>task:* application events</dd></div>\n                <div><dt>Model</dt><dd>{state.tasks.length} tasks · {completed} complete</dd></div>\n                <div><dt>View</dt><dd>{visibleTasks.length} tasks rendered</dd></div>\n            </dl>\n        </section>\n    );\n}\n"]}
+{"version":3,"file":"TaskExample.js","sourceRoot":"","sources":["../../../../../../app/assets/view/examples/tasks/TaskExample.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAC,eAAe,EAAkC,MAAM,iBAAiB,CAAC;AAEjF,MAAM,OAAO,GAAiB,CAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;AAE7D,uFAAuF;AACvF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAC,KAAK,EAAqB;IAC3D,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;IAEnE,OAAO,IAAI,CAAA;;;;;;;;;;kBAUG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,MAAM,UAAU,CAAC;QACzC,IAAI,EAAE,WAAW,MAAM,UAAU;QACjC,kBAAkB,EAAE,MAAM;QAC1B,gBAAgB,EAAE,IAAI;QACtB,cAAc,EAAE,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;KAC7D,CAAC,IAAI,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;;;;kBAI3D,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;qCAEV,UAAU,CAAC;QAChB,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE,IAAI,CAAC,QAAQ;QACtB,kBAAkB,EAAE,IAAI;QACxB,cAAc,EAAE,IAAI,CAAC,EAAE;KAC1B,CAAC;oCACM,IAAI,CAAC,KAAK;;0BAEpB,CAAC;;;;kDAIuB,KAAK,CAAC,MAAM;;yCAErB,KAAK,CAAC,KAAK,CAAC,MAAM,YAAY,SAAS;wCACxC,YAAY,CAAC,MAAM;;mBAExC,CAAC;AACpB,CAAC","sourcesContent":["import {attributes, html} from 'white-label-view/html';\nimport {getVisibleTasks, type TaskFilter, type TaskState} from './task-state.js';\n\nconst filters: TaskFilter[] = ['all', 'active', 'completed'];\n\n/** Render the task example from state for both build-time HTML and browser updates. */\nexport default function TaskExample({state}: {state: TaskState}) {\n    const visibleTasks = getVisibleTasks(state);\n    const completed = state.tasks.filter(task => task.complete).length;\n\n    return html`<section class=\"task-app\" data-task-app aria-label=\"Interactive task example\">\n            <form class=\"task-form\" data-task-form action=\"#example\" method=\"get\">\n                <label for=\"task-title\">New task</label>\n                <div class=\"task-form__controls\">\n                    <input id=\"task-title\" name=\"task\" type=\"text\" autocomplete=\"off\" required>\n                    <button type=\"submit\">Add task</button>\n                </div>\n            </form>\n\n            <nav class=\"task-filters\" aria-label=\"Filter tasks\">\n                ${filters.map(filter => html`<a ${attributes({\n                    href: `/?tasks=${filter}#example`,\n                    'data-task-filter': filter,\n                    'data-pushstate': true,\n                    'aria-current': state.filter === filter ? 'page' : 'false'\n                })}>${filter.charAt(0).toUpperCase()}${filter.slice(1)}</a>`)}\n            </nav>\n\n            <ul class=\"task-list\">\n                ${visibleTasks.map(task => html`<li>\n                        <label>\n                            <input ${attributes({\n                                type: 'checkbox',\n                                checked: task.complete,\n                                'data-task-toggle': true,\n                                'data-task-id': task.id\n                            })}>\n                            <span>${task.title}</span>\n                        </label>\n                    </li>`)}\n            </ul>\n\n            <dl class=\"demo__trace\">\n                <div><dt>Router</dt><dd>/?tasks=${state.filter}</dd></div>\n                <div><dt>Mediator</dt><dd>task:* application events</dd></div>\n                <div><dt>Model</dt><dd>${state.tasks.length} tasks · ${completed} complete</dd></div>\n                <div><dt>View</dt><dd>${visibleTasks.length} tasks rendered</dd></div>\n            </dl>\n        </section>`;\n}\n"]}

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

@@ -1,4 +1,4 @@
-/** Shared state shape used by build-time JSX and the browser application. */
+/** Shared state shape used by build-time tagged HTML and the browser application. */
 export type TaskFilter = 'all' | 'active' | 'completed';
 export interface TaskItem {
     complete: boolean;