@webjsdev/cli 0.10.44 → 0.10.46

package/templates/gallery/app/features/routing/[id]/page.ts

@@ -14,6 +14,7 @@
 // route literal that does not exist and it is a compile error.
 import { html, notFound } from '@webjsdev/core';
 import type { PageProps } from '@webjsdev/core';
+import { pageHeading } from '#lib/utils/ui.ts';
 
 export default async function RoutingParam({ params }: PageProps<'/features/routing/[id]'>) {
   // The Next-style await also works; `params.id` sync would be identical.
@@ -23,23 +24,23 @@ export default async function RoutingParam({ params }: PageProps<'/features/rout
   // you throw this after a DB lookup returns nothing. Try /features/routing/missing.
   if (id === 'missing') notFound();
   return html`
-    <h1 class="text-h2 font-bold mb-4">Route param</h1>
+    ${pageHeading('Route param')}
     <p>The <code>[id]</code> segment is: <strong>${id}</strong></p>
-    <p class="text-muted-foreground text-sm mt-3">
+    <p class="text-muted-foreground text-sm">
       Typed with <code class="font-mono">PageProps&lt;'/features/routing/[id]'&gt;</code>,
       so <code class="font-mono">params.id</code> is a checked
       <code class="font-mono">string</code> from the generated route union.
       <code class="font-mono">params</code> is awaitable too:
       <code class="font-mono">const { id } = await params</code> works, same value.
     </p>
-    <p class="text-muted-foreground text-sm mt-3">
-      Throwing wins over rendering: <a class="text-primary" href="/features/routing/missing">/features/routing/missing</a>
+    <p class="text-muted-foreground text-sm">
+      Throwing wins over rendering: <a class="text-primary underline underline-offset-2" href="/features/routing/missing">/features/routing/missing</a>
       throws <code class="font-mono">notFound()</code> and renders the nearest
       not-found boundary at 404. See the
-      <a class="text-primary" href="/features/boundaries">Boundaries</a> demo for
+      <a class="text-primary underline underline-offset-2" href="/features/boundaries">Boundaries</a> demo for
       <code class="font-mono">forbidden()</code> and
       <code class="font-mono">unauthorized()</code>.
     </p>
-    <p class="mt-3"><a class="text-primary" href="/features/routing">Back</a></p>
+    <p class="mt-3"><a class="text-primary underline underline-offset-2" href="/features/routing">Back</a></p>
   `;
 }

package/templates/gallery/app/features/routing/page.ts

@@ -3,19 +3,20 @@
 // `params`. See app/features/routing/[id]/page.ts.
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 
 export const metadata: Metadata = { title: 'Routing (dynamic params) | features' };
 
 export default function RoutingExample() {
   return html`
-    <h1 class="text-h2 font-bold mb-4">Routing</h1>
-    <p class="text-muted-foreground mb-4">A folder is a URL segment; a <code>[id]</code> folder is a dynamic param.</p>
+    ${pageHeading('Routing')}
+    ${lede(html`A folder is a URL segment; a <code>[id]</code> folder is a dynamic param.`)}
     <ul class="list-disc pl-5 mb-4">
-      <li><a class="text-primary" href="/features/routing/42">/features/routing/42</a></li>
-      <li><a class="text-primary" href="/features/routing/hello">/features/routing/hello</a></li>
-      <li><a class="text-primary" href="/features/routing/legacy">/features/routing/legacy</a> throws <code class="font-mono">redirect()</code> back here</li>
+      <li><a class="text-primary underline underline-offset-2" href="/features/routing/42">/features/routing/42</a></li>
+      <li><a class="text-primary underline underline-offset-2" href="/features/routing/hello">/features/routing/hello</a></li>
+      <li><a class="text-primary underline underline-offset-2" href="/features/routing/legacy">/features/routing/legacy</a> throws <code class="font-mono">redirect()</code> back here</li>
     </ul>
-    <p class="text-muted-foreground text-sm mb-2">
+    <p class="text-muted-foreground text-sm">
       Routes are type-safe: <code class="font-mono">webjs types</code> (run by
       <code class="font-mono">webjs dev</code>) generates a
       <code class="font-mono">Route</code> union, and the
@@ -23,7 +24,7 @@ export default function RoutingExample() {
       <code class="font-mono">PageProps&lt;'/features/routing/[id]'&gt;</code>
       so <code class="font-mono">params</code> is checked against the real routes.
     </p>
-    <p class="text-muted-foreground text-sm mb-2">
+    <p class="text-muted-foreground text-sm">
       Programmatic navigation is checked too:
       <code class="font-mono">navigate(url)</code> takes that
       <code class="font-mono">Route</code> union, so
@@ -43,13 +44,13 @@ export default function RoutingExample() {
       <code class="font-mono">redirect()</code> on the server, call
       <code class="font-mono">navigate()</code> on the client.
     </p>
-    <p class="text-muted-foreground text-sm mt-3">
+    <p class="text-muted-foreground text-sm">
       A page can also THROW to short-circuit rendering:
       <code class="font-mono">notFound()</code> (404),
       <code class="font-mono">forbidden()</code> (403), and
       <code class="font-mono">unauthorized()</code> (401), each rendering the
       nearest matching boundary file. See the
-      <a class="text-primary" href="/features/boundaries">Boundaries</a> demo.
+      <a class="text-primary underline underline-offset-2" href="/features/boundaries">Boundaries</a> demo.
     </p>
   `;
 }

package/templates/gallery/app/features/server-actions/page.ts

@@ -1,21 +1,24 @@
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 import '#modules/server-actions/components/greeter.ts';
 
 export const metadata: Metadata = { title: 'Server actions (.server vs use server) | features' };
 
 export default function ServerActionsExample() {
   return html`
-    <h1 class="text-h2 font-bold mb-4">Server actions</h1>
-    <p class="text-muted-foreground mb-4">A 'use server' action is RPC-callable from the client; a plain .server.ts is a server-only utility you never import into a component.</p>
+    ${pageHeading('Server actions')}
+    ${lede(html`A 'use server' action is RPC-callable from the client; a plain .server.ts is a server-only utility you never import into a component.`)}
     <p class="text-muted-foreground mb-4">
       This action also declares <code class="font-mono">export const middleware</code>: a
-      chain that runs around it on every boundary. The auth middleware sets the
-      caller on the request context (read back with <code class="font-mono">actionContext()</code>)
+      chain that runs around it on every boundary. The auth middleware reads the
+      real signed session (from the <a class="text-primary underline underline-offset-2" href="/features/auth">auth card</a>) and
+      sets the caller on the request context (read back with <code class="font-mono">actionContext()</code>),
       or 401s before the action runs. The action threads
       <code class="font-mono">actionSignal()</code>, the request AbortSignal, through
       its work so a client disconnect or a superseded render stops it early.
     </p>
+    <p class="text-muted-foreground mb-4 text-sm">Signed out, the greeter returns a real 401. <a class="text-primary underline underline-offset-2" href="/features/auth/login">Sign in</a> first to see it succeed. (This card depends on the auth card; prune both together.)</p>
     <server-greeter></server-greeter>
   `;
 }

package/templates/gallery/app/features/service-worker/page.ts

@@ -6,17 +6,18 @@
 // agent-docs/service-worker.md for the full recipe.
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 
 export const metadata: Metadata = { title: 'Service worker (opt-in) | features' };
 
 export default function ServiceWorkerExample() {
   return html`
-    <h1 class="text-h2 font-bold mb-4">Service worker</h1>
-    <p class="text-muted-foreground mb-4">
+    ${pageHeading('Service worker')}
+    ${lede(html`
       Opt-in offline/caching enhancement. Nothing is registered until you add
       <code class="font-mono">public/sw.js</code> and register it from a
       browser-only lifecycle hook.
-    </p>
+    `)}
     <p class="mb-2 text-sm font-medium">Register inside a component (never in a page or layout):</p>
     <pre class="bg-card border border-border rounded-xl p-4 overflow-x-auto text-sm font-mono mb-4"><code>connectedCallback() {
   super.connectedCallback();

package/templates/gallery/app/features/sessions/page.ts

@@ -5,14 +5,15 @@
 // browser. See modules/sessions/session-config.server.ts.
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 
 export const metadata: Metadata = { title: 'Sessions (cookie + store) | features' };
 
 export default function SessionsExample() {
   return html`
-    <h1 class="text-h2 font-bold mb-4">Sessions</h1>
-    <p class="text-muted-foreground mb-4">A per-segment <code>middleware.ts</code> applies <code>session()</code>; a <code>route.ts</code> reads it with <code>getSession(req)</code>.</p>
-    <p>GET <a class="text-primary" href="/features/sessions/count" data-no-router>/features/sessions/count</a> increments a per-visitor counter kept in the signed session cookie. Reload it and the count climbs; open it in a private window and it starts over. (<code class="font-mono">data-no-router</code> opts the link out of the client router, since a <code>route.ts</code> returns JSON, not a page.)</p>
-    <p class="text-muted-foreground text-sm mt-3">Swap the storage from <code class="font-mono">cookieSession()</code> to <code class="font-mono">storeSession()</code> to hold larger sessions in the active store (Redis in production).</p>
+    ${pageHeading('Sessions')}
+    ${lede(html`A per-segment <code>middleware.ts</code> applies <code>session()</code>; a <code>route.ts</code> reads it with <code>getSession(req)</code>.`)}
+    <p>GET <a class="text-primary underline underline-offset-2" href="/features/sessions/count" data-no-router>/features/sessions/count</a> increments a per-visitor counter kept in the signed session cookie. Reload it and the count climbs; open it in a private window and it starts over. (<code class="font-mono">data-no-router</code> opts the link out of the client router, since a <code>route.ts</code> returns JSON, not a page.)</p>
+    <p class="text-muted-foreground text-sm">Swap the storage from <code class="font-mono">cookieSession()</code> to <code class="font-mono">storeSession()</code> to hold larger sessions in the active store (Redis in production).</p>
   `;
 }

package/templates/gallery/app/features/stream/page.ts

@@ -0,0 +1,46 @@
+// Stream updates: the <webjs-stream> element + renderStream() (#248). It is the
+// element-level DOM-update grammar (Turbo Streams parity): a self-applying
+// element that clones its <template> and runs ONE native DOM method (append /
+// prepend / before / after / replace / update / remove) against a target id, then
+// removes itself. See modules/stream/components/stream-demo.ts.
+//
+// How it differs from the neighbours:
+//   - The client router swaps a whole page (a navigation to a different URL).
+//   - A <webjs-frame> refreshes one URL-addressable region in place.
+//   - <webjs-stream> is finer still: it mutates individual ELEMENTS by id (add a
+//     row, remove a row, replace one node), with no region redraw and no
+//     component re-render. Reach for it when a signal re-render or a frame swap
+//     would be too coarse (a chat append, an optimistic row removal, a toast).
+//
+// Three delivery paths share this one applier: the client renderStream() below;
+// a content-negotiated <form> response the router applies surgically (JS off
+// degrades to a normal round-trip); and a live channel (a broadcast() / connectWS
+// message applied with renderStream() from a WS handler, see the WebSockets card).
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
+import '#modules/stream/components/stream-demo.ts';
+
+export const metadata: Metadata = { title: 'Stream updates (webjs-stream) | features' };
+
+export default function StreamExample() {
+  return html`
+    ${pageHeading('Stream updates')}
+    ${lede(html`
+      <code class="font-mono">renderStream()</code> applies a
+      <code class="font-mono">&lt;webjs-stream action="..." target="..."&gt;</code>
+      payload: a surgical, element-level DOM update by id. Each button below mutates
+      the live list in place, and the component never re-renders (contrast a frame,
+      which swaps a whole region, and the client router, which swaps a whole page).
+    `)}
+    <stream-demo></stream-demo>
+    <p class="text-muted-foreground text-sm mt-6">
+      The same grammar arrives over HTTP (a content-negotiated
+      <code class="font-mono">&lt;form&gt;</code> response the router applies
+      surgically, degrading to a full round-trip with JS off) and over a live
+      channel (a <code class="font-mono">broadcast()</code> message applied with
+      <code class="font-mono">renderStream()</code> from a
+      <code class="font-mono">connectWS</code> handler, see the WebSockets card).
+    </p>
+  `;
+}

package/templates/gallery/app/features/streaming/page.ts

@@ -0,0 +1,32 @@
+// Streaming server-action results (#489). A `'use server'` action that returns
+// an async generator streams its chunks over the one RPC response; the call
+// site consumes them with `for await`, rendering each as it arrives. This is
+// the token-by-token shape (LLM output, a log tail, a DB cursor) over the
+// normal action call site, back-pressured and cancelled on client disconnect.
+// Contrast with a route.ts that hands back a raw HTTP ReadableStream: this rides
+// the typed action mechanism, no hand-written fetch.
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
+import '#modules/streaming/components/token-stream.ts';
+
+export const metadata: Metadata = { title: 'Streaming actions (for await) | features' };
+
+export default function StreamingExample() {
+  return html`
+    ${pageHeading('Streaming actions')}
+    ${lede(html`
+      A <code class="font-mono">'use server'</code> action that returns an
+      <code class="font-mono">async function*</code> streams each
+      <code class="font-mono">yield</code> over the single RPC response. The call
+      site consumes it with <code class="font-mono">for await (const chunk of await streamTokens())</code>,
+      so tokens render as they arrive instead of waiting for the whole result.
+    `)}
+    <p class="text-muted-foreground mb-6 text-sm">
+      Detection is on the return value (no config export), and a streamed result
+      is never cached, ETagged, or seeded. The source generator is cancelled if
+      the client navigates away mid-stream.
+    </p>
+    <token-stream></token-stream>
+  `;
+}

package/templates/gallery/app/features/suspense/page.ts

@@ -0,0 +1,35 @@
+// Component-level <webjs-suspense> streaming (#471). Page-level Suspense (the
+// async-render demo) streams a region of the PAGE; <webjs-suspense> is the
+// element that wraps one or more COMPONENTS, flushes its .fallback on the first
+// byte, and streams the resolved content in. It is the only way to show a
+// first-paint fallback for a SLOW component, and the deliberate choice when
+// blocking the first byte on that component's data would hurt. Plain async
+// render() blocks SSR so its data is in the first paint with NO fallback (right
+// for fast data); reach for <webjs-suspense> when the data is genuinely slow.
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
+import '#modules/suspense/components/slow-fact.ts';
+
+export const metadata: Metadata = { title: 'Suspense boundary (<webjs-suspense>) | features' };
+
+export default function SuspenseExample() {
+  return html`
+    ${pageHeading('Suspense boundary')}
+    ${lede(html`
+      The slow component below is wrapped in
+      <code class="font-mono">&lt;webjs-suspense&gt;</code>. Its fallback shows on
+      the first byte and the resolved content streams in when the slow await
+      settles. Reload to see the fallback, then the fact stream in.
+    `)}
+    <p class="text-muted-foreground mb-6 text-sm">
+      <code class="font-mono">.fallback</code> is a property hole (unquoted, per
+      invariant 4). Contrast with the
+      <a href="/features/async-render" class="text-primary no-underline font-medium">async render</a>
+      demo, where SSR blocks so the data is in the first paint with no fallback.
+    </p>
+    <webjs-suspense .fallback=${html`<p class="rounded-2xl border border-dashed border-border p-5 text-muted-foreground">loading the fact…</p>`}>
+      <slow-fact></slow-fact>
+    </webjs-suspense>
+  `;
+}

package/templates/gallery/app/features/view-transitions/page.ts

@@ -0,0 +1,44 @@
+// View Transitions: opt in with a <meta name="view-transition" content="same-origin">
+// (declared here via metadata.other, so it scopes to this page, not the whole
+// app). When present, the client router wraps its DOM swap in the native View
+// Transitions API, so a soft navigation cross-fades instead of snapping. Where
+// startViewTransition is unavailable the swap runs synchronously with no flash
+// and no throw, so it degrades cleanly. The <input> below is marked
+// data-webjs-permanent with an id, so the router carries the SAME live node
+// across the swap: type into it, navigate, and your text survives the transition.
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { buttonClass } from '#components/ui/button.ts';
+import { inputClass } from '#components/ui/input.ts';
+import { pageHeading } from '#lib/utils/ui.ts';
+
+export const metadata: Metadata = {
+  title: 'View transitions (soft-nav cross-fade) | features',
+  other: { 'view-transition': 'same-origin' },
+};
+
+export default function ViewTransitionsExample() {
+  return html`
+    ${pageHeading('View transitions')}
+    <div class="rounded-2xl bg-primary/10 border border-primary/30 p-6 mb-6">
+      <p class="text-foreground m-0">Page one. Navigate to page two: with the
+        <code class="font-mono">&lt;meta name="view-transition"&gt;</code> opt-in,
+        the swap cross-fades.</p>
+    </div>
+    <label class="block mb-6">
+      <span class="text-muted-foreground text-sm">Type here, then navigate. This input is
+        <code class="font-mono">data-webjs-permanent</code>, so its value survives the swap:</span>
+      <input id="vt-note" data-webjs-permanent type="text" placeholder="type something…"
+        class=${inputClass('mt-2 block max-w-sm')} />
+    </label>
+    <div class="flex gap-3 items-center">
+      <a href="/features/view-transitions/second" class="${buttonClass()} no-underline">Go to page two</a>
+      <a href="/" class="text-muted-foreground no-underline font-medium text-sm hover:text-foreground transition-colors">Home</a>
+    </div>
+    <p class="text-muted-foreground text-sm mt-6">
+      Opt in app-wide instead by putting the meta on the root layout. Keep the
+      transition simple: toggling root attributes mid-nav can cause a one-frame
+      repaint flash on iOS WebKit.
+    </p>
+  `;
+}

package/templates/gallery/app/features/view-transitions/second/page.ts

@@ -0,0 +1,30 @@
+// The soft-navigation target. It carries the same view-transition opt-in so the
+// cross-fade wraps the swap in BOTH directions, and the same
+// data-webjs-permanent input (same id) so the router regrafts the one live node
+// across the swap: the text you typed on page one is still here.
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { inputClass } from '#components/ui/input.ts';
+import { pageHeading } from '#lib/utils/ui.ts';
+
+export const metadata: Metadata = {
+  title: 'View transitions: page two | features',
+  other: { 'view-transition': 'same-origin' },
+};
+
+export default function ViewTransitionsSecond() {
+  return html`
+    ${pageHeading('Page two')}
+    <div class="rounded-2xl bg-foreground/5 border border-border p-6 mb-6">
+      <p class="text-foreground m-0">You arrived with a cross-fade, no full
+        reload. The input below is the same node from page one, regrafted across
+        the swap.</p>
+    </div>
+    <label class="block mb-6">
+      <span class="text-muted-foreground text-sm">Its value persisted across the transition:</span>
+      <input id="vt-note" data-webjs-permanent type="text" placeholder="type something…"
+        class=${inputClass('mt-2 block max-w-sm')} />
+    </label>
+    <a href="/features/view-transitions" class="text-primary no-underline font-medium">&larr; Back to page one</a>
+  `;
+}

package/templates/gallery/app/features/websockets/page.ts

@@ -6,19 +6,20 @@
 // it does not collide with this page).
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 import '#modules/websockets/components/ws-echo.ts';
 
 export const metadata: Metadata = { title: 'WebSockets (connectWS + WS) | features' };
 
 export default function WebSocketsExample() {
   return html`
-    <h1 class="text-h2 font-bold mb-4">WebSockets</h1>
-    <p class="text-muted-foreground mb-4">
+    ${pageHeading('WebSockets')}
+    ${lede(html`
       A <code class="font-mono">WS(ws, req)</code> export in
       <code class="font-mono">route.ts</code> is the server endpoint;
       <code class="font-mono">connectWS()</code> (auto-reconnect, JSON
       encode/decode, queued sends) is the client. This echoes each message back.
-    </p>
+    `)}
     <ws-echo></ws-echo>
   `;
 }

package/templates/gallery/app/global-error.ts

@@ -1,6 +1,3 @@
-// file), then delete this marker line. webjs check fails while the marker
-// remains.
-//
 // app/global-error.ts is the ROOT-ONLY, app-wide catch-all error boundary. It
 // fires only after every nested error.ts boundary is exhausted, which includes
 // a failure in the root layout itself. Because a root-layout failure is exactly
@@ -29,9 +26,9 @@ export default function GlobalError({ error }: { error: Error }) {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>Something went wrong</title>
         <style nonce="${cspNonce()}">
-          body { font: 16px/1.6 system-ui, sans-serif; margin: 0; display: grid; place-items: center; min-height: 100vh; background: #1c1613; color: #f5f0eb; }
+          body { font: 16px/1.6 system-ui, sans-serif; margin: 0; display: grid; place-items: center; min-height: 100vh; background: #1e2226; color: #dee2e6; }
           main { max-width: 32rem; padding: 2rem; text-align: center; }
-          a { color: #ff8a3d; }
+          a { color: #94989c; }
         </style>
       </head>
       <body>

package/templates/gallery/app/global-not-found.ts

@@ -1,6 +1,3 @@
-// file), then delete this marker line. webjs check fails while the marker
-// remains.
-//
 // app/global-not-found.ts is the ROOT-ONLY 404 for a URL that matches nothing
 // anywhere, used when no nested not-found.ts applies. Unlike global-error.ts it
 // renders only a BODY fragment: the framework wraps it in the document shell
@@ -8,14 +5,15 @@
 // here. Use a nested <segment>/not-found.ts for a section-specific 404 (nearest
 // wins); this file is the app-wide fallback.
 import { html } from '@webjsdev/core';
+import { buttonClass } from '#components/ui/button.ts';
 
 export default function GlobalNotFound() {
   return html`
     <main class="mx-auto max-w-[40rem] px-6 py-24 text-center">
-      <p class="text-sm font-semibold uppercase tracking-wide text-orange-500">404</p>
+      <p class="text-sm font-semibold uppercase tracking-wide text-primary">404</p>
       <h1 class="mt-2 text-3xl font-bold">Page not found</h1>
-      <p class="mt-4 text-neutral-500">We could not find the page you were looking for.</p>
-      <a href="/" class="mt-8 inline-block rounded-md bg-neutral-900 px-4 py-2 text-white transition-colors hover:bg-neutral-700 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-200">Back to home</a>
+      <p class="mt-4 text-muted-foreground">We could not find the page you were looking for.</p>
+      <a href="/" class="${buttonClass()} mt-8 inline-block no-underline">Back to home</a>
     </main>
   `;
 }

package/templates/gallery/app/icon.ts

@@ -1,6 +1,3 @@
-// (delete this file), then delete this marker line. webjs check fails while the
-// marker remains.
-//
 // app/icon.ts serves /icon (the dynamic favicon). The default export is a
 // (possibly async) server function; returning a Response lets you set the exact
 // content type, so an inline SVG needs no asset file. For a favicon that never
@@ -9,8 +6,8 @@
 // mark must be computed at request time.
 export default function Icon() {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-    <rect width="32" height="32" rx="7" fill="#1c1613"/>
-    <text x="16" y="22" font-family="system-ui, sans-serif" font-size="18" font-weight="700" fill="#ff8a3d" text-anchor="middle">w</text>
+    <rect width="32" height="32" rx="7" fill="#1e2226"/>
+    <text x="16" y="22" font-family="system-ui, sans-serif" font-size="18" font-weight="700" fill="#94989c" text-anchor="middle">w</text>
   </svg>`;
   return new Response(svg, {
     headers: { 'content-type': 'image/svg+xml', 'cache-control': 'public, max-age=3600' },

package/templates/gallery/app/manifest.ts

@@ -1,6 +1,3 @@
-// (delete this file), then delete this marker line. webjs check fails while the
-// marker remains.
-//
 // app/manifest.ts serves /manifest.json (the web app manifest). The default
 // export returns an object, serialized to JSON. Adapt the name, colors, and
 // icons to your app; pair it with the opt-in service worker for an installable
@@ -13,7 +10,7 @@ export default function Manifest() {
     start_url: '/',
     display: 'standalone',
     background_color: '#ffffff',
-    theme_color: '#1c1613',
+    theme_color: '#1e2226',
     icons: [
       { src: '/favicon.svg', sizes: 'any', type: 'image/svg+xml' },
     ],

package/templates/gallery/app/opengraph-image.ts

@@ -1,6 +1,3 @@
-// (delete this file), then delete this marker line. webjs check fails while the
-// marker remains.
-//
 // app/opengraph-image.ts serves /opengraph-image (the preview card social
 // platforms show when the site is shared). The Open Graph spec wants 1200x630.
 // Returning a Response with an inline SVG keeps this buildless; for per-page
@@ -9,9 +6,9 @@
 // `openGraph: { images: ['/opengraph-image'] }`.
 export default function OpengraphImage() {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
-    <rect width="1200" height="630" fill="#1c1613"/>
-    <text x="80" y="330" font-family="system-ui, sans-serif" font-size="88" font-weight="700" fill="#f5f0eb">My App</text>
-    <text x="80" y="410" font-family="system-ui, sans-serif" font-size="36" fill="#ff8a3d">Build on the platform, not against it</text>
+    <rect width="1200" height="630" fill="#1e2226"/>
+    <text x="80" y="330" font-family="system-ui, sans-serif" font-size="88" font-weight="700" fill="#dee2e6">My App</text>
+    <text x="80" y="410" font-family="system-ui, sans-serif" font-size="36" fill="#94989c">Build on the platform, not against it</text>
   </svg>`;
   return new Response(svg, {
     headers: { 'content-type': 'image/svg+xml', 'cache-control': 'public, max-age=3600' },

package/templates/gallery/app/robots.ts

@@ -1,6 +1,3 @@
-// (delete this file), then delete this marker line. webjs check fails while the
-// marker remains.
-//
 // app/robots.ts serves /robots.txt. The default export returns a string (served
 // as text/plain) or an object. This example allows all crawlers and points them
 // at the sitemap. Tighten the rules (Disallow paths) for a real app.

package/templates/gallery/app/sitemap.ts

@@ -1,6 +1,3 @@
-// routes, or prune it (delete this file), then delete this marker line. webjs
-// check fails while the marker remains.
-//
 // app/sitemap.ts serves /sitemap.xml. The default export is a (possibly async)
 // server function; `sitemap(entries)` from @webjsdev/server serializes a
 // spec-valid XML sitemap. In a real app, build the entries from your content

package/templates/gallery/app/twitter-image.ts

@@ -1,6 +1,3 @@
-// (delete this file), then delete this marker line. webjs check fails while the
-// marker remains.
-//
 // app/twitter-image.ts serves /twitter-image (the card image shown when the
 // site is shared on Twitter/X). Its own route so the Twitter card can differ
 // from the Open Graph image (opengraph-image.ts); when they are identical, drop
@@ -8,9 +5,9 @@
 // roughly 1200x630. Reference it via metadata `twitter: { images: [...] }`.
 export default function TwitterImage() {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
-    <rect width="1200" height="630" fill="#1c1613"/>
-    <text x="80" y="330" font-family="system-ui, sans-serif" font-size="88" font-weight="700" fill="#f5f0eb">My App</text>
-    <text x="80" y="410" font-family="system-ui, sans-serif" font-size="36" fill="#ff8a3d">Build on the platform, not against it</text>
+    <rect width="1200" height="630" fill="#1e2226"/>
+    <text x="80" y="330" font-family="system-ui, sans-serif" font-size="88" font-weight="700" fill="#dee2e6">My App</text>
+    <text x="80" y="410" font-family="system-ui, sans-serif" font-size="36" fill="#94989c">Build on the platform, not against it</text>
   </svg>`;
   return new Response(svg, {
     headers: { 'content-type': 'image/svg+xml', 'cache-control': 'public, max-age=3600' },

package/templates/gallery/components/ui/badge.ts

@@ -0,0 +1,41 @@
+/**
+ * badgeClass: the gallery's badge/pill design token, built on @webjsdev/ui.
+ *
+ * A `@webjsdev/ui` tier-1 CLASS HELPER (like buttonClass): it returns a Tailwind
+ * class string you spread onto a NATIVE inline element, almost always a `<span>`
+ * (a static label) or an `<a>` (a linked tag). Native markup means no wrapper
+ * component and correct semantics for free:
+ *
+ *   <span class=${badgeClass()}>Signed in</span>
+ *   <span class=${badgeClass({ variant: 'outline' })}>Example app</span>
+ *
+ * OWN-AND-THEME: this is `@webjsdev/ui`'s badge THEMED to this scaffold's two
+ * real uses, NOT the fuller shadcn badge (solid primary, secondary, destructive,
+ * ghost, link). Keep only the variants you use, styled to your look. `default`
+ * is a soft primary pill (a status chip); `outline` is a quiet muted tag.
+ *
+ * A11y: a static badge is a plain non-focusable `<span>`. Make it an `<a>` only
+ * when it links somewhere.
+ *
+ * Design tokens used (app/layout.ts): --color-primary, --color-border,
+ * --color-muted-foreground.
+ */
+import { cn } from '#lib/utils/cn.ts';
+
+// Shared by every variant: an inline pill that hugs its content and never wraps.
+const BASE = 'inline-flex w-fit shrink-0 items-center whitespace-nowrap';
+
+const VARIANTS = {
+  // A soft, tinted primary chip. Used for a status ("Signed in").
+  default: 'rounded-full bg-primary/15 text-primary px-2.5 py-1 text-xs font-medium',
+  // A tiny, quiet outline tag. Used to label a kind of thing ("Example app").
+  outline:
+    'rounded border border-border text-muted-foreground px-1.5 py-0.5 text-[0.6rem] font-semibold uppercase tracking-wider',
+} as const;
+
+export type BadgeVariant = keyof typeof VARIANTS;
+
+/** Compose the Tailwind classes for a badge/pill. Append your own layout as needed. */
+export function badgeClass(opts: { variant?: BadgeVariant } = {}): string {
+  return cn(BASE, VARIANTS[opts.variant ?? 'default']);
+}