@webjsdev/cli 0.10.45 → 0.10.46

package/templates/gallery/app/features/auth/login/page.ts

@@ -1,8 +1,11 @@
 import { html } from '@webjsdev/core';
+import { cardClass } from '#components/ui/card.ts';
+import { inputClass } from '#components/ui/input.ts';
+import { buttonClass } from '#components/ui/button.ts';
 
 export const metadata = { title: 'Log in' };
 
-const inputCls = 'w-full bg-background border border-border rounded-xl px-3 py-2 text-[15px] text-foreground outline-none transition-colors focus:border-primary placeholder:text-muted-foreground';
+const inputCls = inputClass();
 
 // A failed sign-in 302s back here with ?error=... (createAuth is configured with
 // pages.error: '/features/auth/login' in modules/auth/auth.server.ts). Map the
@@ -21,7 +24,7 @@ export default function LoginPage({ searchParams }: { searchParams: { error?: st
       <h1 class="text-h2 font-bold mb-2">Sign in</h1>
       <p class="text-muted-foreground mb-5">Welcome back: log in to continue.</p>
       ${error ? html`<p role="alert" class="mb-4 text-sm text-destructive">${error}</p>` : ''}
-      <form method="POST" action="/api/auth/signin/credentials" class="grid gap-4 p-5 rounded-2xl bg-card border border-border">
+      <form method="POST" action="/api/auth/signin/credentials" class="${cardClass()} grid gap-4 p-5">
         <!-- createAuth reads redirectTo from the posted form and 302s there after a successful signin. -->
         <input type="hidden" name="redirectTo" value="/features/auth/dashboard">
         <div class="grid gap-1.5">
@@ -32,9 +35,9 @@ export default function LoginPage({ searchParams }: { searchParams: { error?: st
           <label for="password" class="text-[13px] font-medium text-muted-foreground">Password</label>
           <input id="password" name="password" type="password" required class=${inputCls} />
         </div>
-        <button type="submit" class="justify-self-start px-4 py-2 rounded-xl bg-primary text-primary-foreground font-semibold text-sm border-0 cursor-pointer transition-all hover:bg-primary/90 active:scale-[0.97]">Sign in</button>
+        <button type="submit" class="${buttonClass()} justify-self-start">Sign in</button>
       </form>
-      <p class="text-sm text-muted-foreground mt-4">Don't have an account? <a href="/features/auth/signup" class="text-primary">Sign up</a></p>
+      <p class="text-sm text-muted-foreground mt-4">Don't have an account? <a href="/features/auth/signup" class="text-primary underline underline-offset-2">Sign up</a></p>
     </div>
   `;
 }

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

@@ -10,6 +10,7 @@
 // line is the real query during SSR and a safe RPC stub on the client.
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 import { currentUser } from '#modules/auth/queries/current-user.server.ts';
 
 export const metadata: Metadata = { title: 'Auth (login + protected route) | features' };
@@ -17,16 +18,16 @@ export const metadata: Metadata = { title: 'Auth (login + protected route) | fea
 export default async function AuthExample() {
   const user = await currentUser();
   return html`
-    <h1 class="text-h2 font-bold mb-4">Auth</h1>
-    <p class="text-muted-foreground mb-4">Password login on <code>createAuth</code>, a signed session cookie, and a protected <code>/features/auth/dashboard</code> that redirects anonymous visitors to login.</p>
+    ${pageHeading('Auth')}
+    ${lede(html`Password login on <code>createAuth</code>, a signed session cookie, and a protected <code>/features/auth/dashboard</code> that redirects anonymous visitors to login.`)}
 
     ${user
       ? html`
         <p class="mb-4">Signed in as <strong>${user.name || user.email}</strong>.</p>
-        <p><a class="text-primary" href="/features/auth/dashboard">Open the protected dashboard</a></p>`
+        <p><a class="text-primary underline underline-offset-2" href="/features/auth/dashboard">Open the protected dashboard</a></p>`
       : html`
-        <p class="mb-4">You are signed out. <a class="text-primary" href="/features/auth/dashboard">Visiting the dashboard</a> bounces you to login.</p>
-        <p class="flex gap-4"><a class="text-primary" href="/features/auth/login">Log in</a><a class="text-primary" href="/features/auth/signup">Create an account</a></p>`}
+        <p class="mb-4">You are signed out. <a class="text-primary underline underline-offset-2" href="/features/auth/dashboard">Visiting the dashboard</a> bounces you to login.</p>
+        <p class="flex gap-4"><a class="text-primary underline underline-offset-2" href="/features/auth/login">Log in</a><a class="text-primary underline underline-offset-2" href="/features/auth/signup">Create an account</a></p>`}
 
     <p class="text-muted-foreground text-sm mt-6">The gate is <code class="font-mono">app/features/auth/dashboard/middleware.ts</code> calling <code class="font-mono">auth(req)</code>; the login form posts to the <code class="font-mono">app/api/auth/[...path]</code> handler; OAuth (GitHub / Google) activates once you set the matching env vars.</p>
   `;

package/templates/gallery/app/features/auth/signup/middleware.ts

@@ -0,0 +1,11 @@
+import { auth } from '#modules/auth/auth.server.ts';
+
+// Like the login middleware: an already-signed-in visitor has no reason to see
+// the signup form, so send them to the dashboard before the page renders.
+export default async function redirectIfSignedIn(req: Request, next: () => Promise<Response>) {
+  const session = await auth(req);
+  if (session?.user) {
+    return new Response(null, { status: 302, headers: { location: '/features/auth/dashboard' } });
+  }
+  return next();
+}

package/templates/gallery/app/features/auth/signup/page.ts

@@ -1,9 +1,12 @@
 import { html } from '@webjsdev/core';
+import { cardClass } from '#components/ui/card.ts';
+import { inputClass } from '#components/ui/input.ts';
+import { buttonClass } from '#components/ui/button.ts';
 import { signup } from '#modules/auth/actions/signup.server.ts';
 
 export const metadata = { title: 'Sign up' };
 
-const inputCls = 'w-full bg-background border border-border rounded-xl px-3 py-2 text-[15px] text-foreground outline-none transition-colors focus:border-primary placeholder:text-muted-foreground';
+const inputCls = inputClass();
 
 // Page server action: handles the POST from the form below. With JS disabled this
 // is a plain <form> round-trip; with JS the client router swaps the 422 re-render
@@ -34,7 +37,7 @@ export default function SignupPage({ actionData }: { actionData?: { fieldErrors?
     <div class="max-w-[420px] mx-auto">
       <h1 class="text-h2 font-bold mb-2">Create an account</h1>
       <p class="text-muted-foreground mb-5">Get started with your new workspace.</p>
-      <form method="POST" class="grid gap-4 p-5 rounded-2xl bg-card border border-border">
+      <form method="POST" class="${cardClass()} grid gap-4 p-5">
         <div class="grid gap-1.5">
           <label for="name" class="text-[13px] font-medium text-muted-foreground">Name</label>
           <input id="name" name="name" type="text" value=${values.name || ''} required class=${inputCls} placeholder="Ada Lovelace" />
@@ -50,9 +53,9 @@ export default function SignupPage({ actionData }: { actionData?: { fieldErrors?
           <input id="password" name="password" type="password" minlength="8" required class=${inputCls} />
           ${errors.password ? html`<p class="m-0 text-[12.5px] text-destructive">${errors.password}</p>` : ''}
         </div>
-        <button type="submit" class="justify-self-start px-4 py-2 rounded-xl bg-primary text-primary-foreground font-semibold text-sm border-0 cursor-pointer transition-all hover:bg-primary/90 active:scale-[0.97]">Create account</button>
+        <button type="submit" class="${buttonClass()} justify-self-start">Create account</button>
       </form>
-      <p class="text-sm text-muted-foreground mt-4">Already have an account? <a href="/features/auth/login" class="text-primary">Log in</a></p>
+      <p class="text-sm text-muted-foreground mt-4">Already have an account? <a href="/features/auth/login" class="text-primary underline underline-offset-2">Log in</a></p>
     </div>
   `;
 }

package/templates/gallery/app/features/boundaries/error.ts

@@ -3,14 +3,15 @@
 // rendered scoped to this boundary, so outer layouts stay alive. The default
 // export receives { error, ...ctx }; in production only error.message is sent.
 import { html } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 
 export default function BoundariesError({ error }: { error: Error }) {
   return html`
-    <h1 class="text-h2 font-bold mb-4">Something went wrong</h1>
-    <p class="text-muted-foreground mb-4">
+    ${pageHeading('Something went wrong')}
+    ${lede(html`
       This segment's <code class="font-mono">error.ts</code> boundary caught a
       render error: <code class="font-mono">${error?.message ?? 'unknown'}</code>.
-    </p>
-    <p><a class="text-primary" href="/features/boundaries">Back to boundaries</a></p>
+    `)}
+    <p><a class="text-primary underline underline-offset-2" href="/features/boundaries">Back to boundaries</a></p>
   `;
 }

package/templates/gallery/app/features/boundaries/gated/forbidden.ts

@@ -4,15 +4,16 @@
 // forbidden.ts higher up the tree. Keep the message actionable for an
 // authenticated user who lacks permission.
 import { html } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 
 export default function Forbidden() {
   return html`
-    <h1 class="text-h2 font-bold mb-4">403 Forbidden</h1>
-    <p class="text-muted-foreground mb-4">
+    ${pageHeading('403 Forbidden')}
+    ${lede(html`
       You are signed in but do not have permission to view this page. This is the
       nearest <code class="font-mono">forbidden.ts</code> boundary, rendered
       because the page threw <code class="font-mono">forbidden()</code>.
-    </p>
-    <p><a class="text-primary" href="/features/boundaries">Back to boundaries</a></p>
+    `)}
+    <p><a class="text-primary underline underline-offset-2" href="/features/boundaries">Back to boundaries</a></p>
   `;
 }

package/templates/gallery/app/features/boundaries/not-found.ts

@@ -3,15 +3,16 @@
 // /features/boundaries/ (try /features/boundaries/does-not-exist). Nearest wins,
 // so this beats the root not-found for anything in this segment.
 import { html } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 
 export default function BoundariesNotFound() {
   return html`
-    <h1 class="text-h2 font-bold mb-4">404: Not here</h1>
-    <p class="text-muted-foreground mb-4">
+    ${pageHeading('404: Not here')}
+    ${lede(html`
       This segment's <code class="font-mono">not-found.ts</code> boundary rendered,
       because a page threw <code class="font-mono">notFound()</code> or the URL
       matched nothing under this segment.
-    </p>
-    <p><a class="text-primary" href="/features/boundaries">Back to boundaries</a></p>
+    `)}
+    <p><a class="text-primary underline underline-offset-2" href="/features/boundaries">Back to boundaries</a></p>
   `;
 }

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

@@ -16,47 +16,48 @@
 //   /features/boundaries/private throws unauthorized() -> private/unauthorized.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: 'Boundaries (throws + boundary files) | features' };
 
 export default function BoundariesExample() {
   return html`
-    <h1 class="text-h2 font-bold mb-4">Boundaries</h1>
-    <p class="text-muted-foreground mb-4">
+    ${pageHeading('Boundaries')}
+    ${lede(html`
       Throw a control-flow function from a page (or a page
       <code class="font-mono">action</code>) to short-circuit the render. The
       framework catches it and renders the nearest matching boundary file in the
       route's chain, innermost wins.
-    </p>
+    `)}
     <ul class="list-disc pl-5 mb-4">
       <li>
-        <a class="text-primary" href="/features/boundaries/gated">/features/boundaries/gated</a>
+        <a class="text-primary underline underline-offset-2" href="/features/boundaries/gated">/features/boundaries/gated</a>
         throws <code class="font-mono">forbidden()</code>, caught by
         <code class="font-mono">gated/forbidden.ts</code> (403).
       </li>
       <li>
-        <a class="text-primary" href="/features/boundaries/private">/features/boundaries/private</a>
+        <a class="text-primary underline underline-offset-2" href="/features/boundaries/private">/features/boundaries/private</a>
         throws <code class="font-mono">unauthorized()</code>, caught by
         <code class="font-mono">private/unauthorized.ts</code> (401).
       </li>
       <li>
-        <a class="text-primary" href="/features/boundaries/crash">/features/boundaries/crash</a>
+        <a class="text-primary underline underline-offset-2" href="/features/boundaries/crash">/features/boundaries/crash</a>
         throws a render error, caught by this segment's
         <code class="font-mono">error.ts</code> (500).
       </li>
       <li>
-        <a class="text-primary" href="/features/boundaries/does-not-exist">/features/boundaries/does-not-exist</a>
+        <a class="text-primary underline underline-offset-2" href="/features/boundaries/does-not-exist">/features/boundaries/does-not-exist</a>
         matches nothing, caught by the nearest
         <code class="font-mono">not-found.ts</code> (404).
       </li>
     </ul>
-    <p class="text-muted-foreground text-sm mb-2">
+    <p class="text-muted-foreground text-sm">
       <code class="font-mono">forbidden()</code> is for an authenticated user who
       lacks permission (403); <code class="font-mono">unauthorized()</code> is for
       a request that is not authenticated at all (401). Both import from
       <code class="font-mono">@webjsdev/core</code> and are thrown, never returned.
     </p>
-    <p class="text-muted-foreground text-sm mb-2">
+    <p class="text-muted-foreground text-sm">
       Same throw model as <code class="font-mono">notFound()</code> (renders the
       nearest <code class="font-mono">not-found.ts</code>) and
       <code class="font-mono">redirect(url)</code> (sends an HTTP 3xx). Inside a
@@ -71,6 +72,6 @@ export default function BoundariesExample() {
       and <code class="font-mono">app/global-not-found.ts</code> (a 404 for a URL
       that matches nothing anywhere).
     </p>
-    <p class="mt-3"><a class="text-primary" href="/">Back to the gallery</a></p>
+    <p class="mt-3"><a class="text-primary underline underline-offset-2" href="/">Back to the gallery</a></p>
   `;
 }

package/templates/gallery/app/features/boundaries/private/unauthorized.ts

@@ -3,15 +3,16 @@
 // in place of the page that threw. Nearest wins: this one (inside private/) beats
 // any unauthorized.ts higher up the tree. A real one usually links to sign-in.
 import { html } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 
 export default function Unauthorized() {
   return html`
-    <h1 class="text-h2 font-bold mb-4">401 Unauthorized</h1>
-    <p class="text-muted-foreground mb-4">
+    ${pageHeading('401 Unauthorized')}
+    ${lede(html`
       You need to sign in to view this page. This is the nearest
       <code class="font-mono">unauthorized.ts</code> boundary, rendered because the
       page threw <code class="font-mono">unauthorized()</code>.
-    </p>
-    <p><a class="text-primary" href="/features/boundaries">Back to boundaries</a></p>
+    `)}
+    <p><a class="text-primary underline underline-offset-2" href="/features/boundaries">Back to boundaries</a></p>
   `;
 }

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

@@ -5,19 +5,20 @@
 // Open this page in two browser tabs and send: both see every message.
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 import '#modules/broadcast/components/broadcast-feed.ts';
 
 export const metadata: Metadata = { title: 'Broadcast (fan-out to all clients) | features' };
 
 export default function BroadcastExample() {
   return html`
-    <h1 class="text-h2 font-bold mb-4">Broadcast</h1>
-    <p class="text-muted-foreground mb-4">
+    ${pageHeading('Broadcast')}
+    ${lede(html`
       Every message is fanned out to all connected clients via
       <code class="font-mono">broadcast()</code>. Open this page in a second tab
       and watch messages appear in both. Single-instance by default; wire Redis
       to scale across processes.
-    </p>
+    `)}
     <broadcast-feed></broadcast-feed>
   `;
 }

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

@@ -7,6 +7,7 @@
 // use HTTP Cache-Control + ETag (conditional GET).
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 import '#modules/caching/components/cache-buster.ts';
 
 export const metadata: Metadata = { title: 'Caching (revalidate) | features' };
@@ -19,11 +20,11 @@ export default function CachingExample() {
   // seconds, so this value is frozen until the window elapses.
   const renderedAt = new Date().toLocaleTimeString('en-US', { hour12: false });
   return html`
-    <h1 class="text-h2 font-bold mb-4">Caching</h1>
-    <p class="text-muted-foreground mb-4">
+    ${pageHeading('Caching')}
+    ${lede(html`
       This page sets <code>export const revalidate = 10</code>, so its
       server-rendered HTML is cached per URL for ten seconds.
-    </p>
+    `)}
     <p class="mb-4">
       Rendered at
       <code class="font-mono text-primary">${renderedAt}</code>.
@@ -35,7 +36,7 @@ export default function CachingExample() {
       <code>revalidateTag</code>, or a GET action's
       <code>export const cache</code>.
     </p>
-    <p class="text-muted-foreground text-sm mt-6 mb-2">
+    <p class="text-muted-foreground text-sm">
       A mutation evicts the cache on demand. Click below (it calls
       <code class="font-mono">revalidatePath('/features/caching')</code>), then refresh:
       the timestamp updates immediately, even inside the 10s window, because the

package/templates/gallery/app/features/client-router/page.ts

@@ -7,24 +7,26 @@
 // JS off, every link is a normal full-page navigation.
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
+import { buttonClass } from '#components/ui/button.ts';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 import '#modules/client-router/components/router-controls.ts';
 
 export const metadata: Metadata = { title: 'Client router (soft nav) | features' };
 
 export default function ClientRouterExample() {
   return html`
-    <h1 class="text-h2 font-bold mb-4">Client router</h1>
-    <p class="text-muted-foreground mb-4">
+    ${pageHeading('Client router')}
+    ${lede(html`
       Navigate to the second page and back. With JS on it is a soft swap (no full
       reload, scroll restored); open the network tab to see only a fragment
       fetched, prefetched on hover. With JS off the same links do full-page
       navigations. Nothing was imported to get this.
-    </p>
+    `)}
     <div class="flex gap-3 items-center">
-      <a href="/features/client-router/second" class="inline-flex items-center px-4 py-2 rounded-xl bg-primary text-primary-foreground font-semibold text-sm no-underline transition-all hover:bg-primary/90 active:scale-[0.97]">Go to page two</a>
+      <a href="/features/client-router/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 mb-2">Or drive it from JS with <code class="font-mono">navigate()</code> / <code class="font-mono">revalidate()</code>:</p>
+    <p class="text-muted-foreground text-sm mt-6">Or drive it from JS with <code class="font-mono">navigate()</code> / <code class="font-mono">revalidate()</code>:</p>
     <router-controls></router-controls>
     <p class="text-muted-foreground text-sm mt-6">
       Opt out app-wide with <code class="font-mono">{ "webjs": { "clientRouter": false } }</code>,

package/templates/gallery/app/features/client-router/second/page.ts

@@ -3,17 +3,18 @@
 // its scroll position from the client-router snapshot cache.
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 
 export const metadata: Metadata = { title: 'Client router: page two | features' };
 
 export default function ClientRouterSecond() {
   return html`
-    <h1 class="text-h2 font-bold mb-4">Page two</h1>
-    <p class="text-muted-foreground mb-4">
+    ${pageHeading('Page two')}
+    ${lede(html`
       You arrived here without a full reload. Press the browser Back button (or
       the link below): the previous page and its scroll position are restored
       from the snapshot cache.
-    </p>
+    `)}
     <a href="/features/client-router" class="text-primary no-underline font-medium">&larr; Back to page one</a>
   `;
 }

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

@@ -1,5 +1,6 @@
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 import '#modules/components/components/counter-card.ts';
 import '#modules/components/components/reactive-meter.ts';
 import '#modules/components/components/theme-context.ts';
@@ -9,8 +10,8 @@ export const metadata: Metadata = { title: 'Components (signals + slots) | featu
 
 export default function ComponentsExample() {
   return html`
-    <h1 class="text-h2 font-bold mb-4">Components</h1>
-    <p class="text-muted-foreground mb-4">The WebComponent factory, a reactive prop, an instance signal, and a slot.</p>
+    ${pageHeading('Components')}
+    ${lede(html`The WebComponent factory, a reactive prop, an instance signal, and a slot.`)}
     <counter-card label="Taps"><strong>A slotted title</strong></counter-card>
     <p class="text-muted-foreground mt-6 mb-2">Shadow DOM (scoped <code class="font-mono">css</code>) plus the rest of the signals API (<code class="font-mono">computed</code>, <code class="font-mono">effect</code>, <code class="font-mono">batch</code>):</p>
     <reactive-meter></reactive-meter>

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

@@ -1,13 +1,14 @@
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 import '#modules/directives/components/directive-demo.ts';
 
 export const metadata: Metadata = { title: 'Directives (repeat + watch) | features' };
 
 export default function DirectivesExample() {
   return html`
-    <h1 class="text-h2 font-bold mb-4">Directives</h1>
-    <p class="text-muted-foreground mb-4">The lit-html directive set: <code>repeat</code> keys a reordering list so nodes are reused, and <code>watch(signal)</code> swaps one node without a full re-render.</p>
+    ${pageHeading('Directives')}
+    ${lede(html`The lit-html directive set: <code>repeat</code> keys a reordering list so nodes are reused, and <code>watch(signal)</code> swaps one node without a full re-render.`)}
     <directive-demo></directive-demo>
   `;
 }

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

@@ -6,6 +6,7 @@
 // an app-root env.ts (a schema or a validator fn) that fails fast.
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 
 export const metadata: Metadata = { title: 'Env vars (public vs server) | features' };
 
@@ -16,11 +17,11 @@ export default function EnvExample() {
   // add WEBJS_PUBLIC_APP_NAME=... to .env, which demonstrates the default.
   const publicName = process.env.WEBJS_PUBLIC_APP_NAME || '(unset, add WEBJS_PUBLIC_APP_NAME to .env)';
   return html`
-    <h1 class="text-h2 font-bold mb-4">Environment variables</h1>
-    <p class="text-muted-foreground mb-4">
+    ${pageHeading('Environment variables')}
+    ${lede(html`
       Read on the server during SSR. Only <code>WEBJS_PUBLIC_</code>-prefixed
       names are exposed to the browser; the rest stay server-side.
-    </p>
+    `)}
     <ul class="list-disc pl-5 mb-4 space-y-1">
       <li><code class="font-mono text-sm">NODE_ENV</code> = <span class="text-primary">${nodeEnv}</span> <span class="text-muted-foreground text-sm">(defined both sides)</span></li>
       <li><code class="font-mono text-sm">WEBJS_PUBLIC_APP_NAME</code> = <span class="text-primary">${publicName}</span></li>

package/templates/gallery/app/features/file-storage/page.ts

@@ -5,6 +5,9 @@
 // streams the file back through file/[key]/route.ts. Works with JS off; the
 // client router applies the same flow in place with JS on.
 import { html } from '@webjsdev/core';
+import { buttonClass } from '#components/ui/button.ts';
+import { cardClass } from '#components/ui/card.ts';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 import type { Metadata } from '@webjsdev/core';
 import { storeUpload } from '#modules/file-storage/actions/store-upload.server.ts';
 
@@ -33,25 +36,25 @@ export default function FileStorageExample({
   const name = (searchParams.name || '').trim();
   const size = (searchParams.size || '').trim();
   return html`
-    <h1 class="text-h2 font-bold mb-4">File storage</h1>
-    <p class="text-muted-foreground mb-4">
+    ${pageHeading('File storage')}
+    ${lede(html`
       Upload a file: the bytes stream into the FileStore (a local
       <code class="font-mono">.webjs/uploads</code> directory by default,
       gitignored). Swap the backend for S3/R2 with one
       <code class="font-mono">setFileStore()</code> call, no call-site change.
-    </p>
+    `)}
     <form method="post" enctype="multipart/form-data" class="flex flex-wrap gap-3 items-center mb-4">
       <input type="file" name="file" required aria-label="Choose a file to upload"
         class="text-sm text-muted-foreground file:mr-3 file:px-3.5 file:py-2 file:rounded-xl file:border-0 file:bg-card file:border file:border-border file:text-foreground file:text-sm file:cursor-pointer" />
       <button type="submit"
-        class="px-4 py-2 rounded-xl bg-primary text-primary-foreground font-semibold text-sm border-0 cursor-pointer transition-all hover:bg-primary/90 active:scale-[0.97]">Upload</button>
+        class=${buttonClass()}>Upload</button>
     </form>
     ${actionData?.error
       ? html`<p class="text-destructive text-sm mb-4">${actionData.error}</p>`
       : ''}
     ${key
       ? html`
-        <div class="px-4 py-3 rounded-xl bg-card border border-border text-sm">
+        <div class="${cardClass('rounded-xl')} px-4 py-3 text-sm">
           Stored <span class="text-foreground font-medium">${name}</span>
           <span class="text-muted-foreground">(${size} bytes)</span>
           <a class="text-primary no-underline ml-2" href="/features/file-storage/file/${key}">download</a>

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

@@ -6,6 +6,10 @@
 // On failure the framework re-renders at 422 with the result; on success it
 // does a 303 Post-Redirect-Get, so we redirect to ?sent=1 to show a confirmation.
 import { html } from '@webjsdev/core';
+import { cardClass } from '#components/ui/card.ts';
+import { inputClass } from '#components/ui/input.ts';
+import { buttonClass } from '#components/ui/button.ts';
+import { pageHeading } from '#lib/utils/ui.ts';
 import type { Metadata } from '@webjsdev/core';
 
 export const metadata: Metadata = { title: 'Forms (no-JS PE) | features' };
@@ -25,18 +29,18 @@ const field = (label: string, name: string, input: unknown, error?: string) => h
   </div>
 `;
 
-const inputCls = 'w-full bg-background border border-border rounded-xl px-3 py-2 text-[15px] text-foreground outline-none transition-colors focus:border-primary placeholder:text-muted-foreground';
+const inputCls = inputClass();
 
 export default function FormsFeature({ searchParams, actionData }: { searchParams: Record<string, string | undefined>; actionData?: Result }) {
   if (searchParams.sent) {
     return html`
-      <h1 class="text-h2 font-bold mb-4">Forms</h1>
-      <div class="max-w-[460px] grid gap-3 p-6 rounded-2xl bg-card border border-border text-center">
+      ${pageHeading('Forms')}
+      <div class="${cardClass()} max-w-[460px] grid gap-3 p-6 text-center">
         <span class="mx-auto grid place-items-center w-12 h-12 rounded-2xl bg-primary/15 text-primary">
           <svg viewBox="0 0 24 24" class="w-6 h-6 stroke-current fill-none" style="stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round"><path d="m5 13 4 4L19 7"/></svg>
         </span>
         <p class="m-0 text-lg font-semibold text-foreground">Message sent</p>
-        <p class="m-0 text-sm text-muted-foreground">Thanks, we got it. <a class="text-primary" href="/features/forms">Send another</a>.</p>
+        <p class="m-0 text-sm text-muted-foreground">Thanks, we got it. <a class="text-primary underline underline-offset-2" href="/features/forms">Send another</a>.</p>
       </div>
     `;
   }
@@ -45,11 +49,11 @@ export default function FormsFeature({ searchParams, actionData }: { searchParam
   return html`
     <h1 class="text-h2 font-bold mb-2">Forms</h1>
     <p class="text-muted-foreground mb-5 max-w-[460px]">A real <code>&lt;form&gt;</code> posting to this page's <code>action</code>. It works with JS off; validation errors come back on <code>actionData</code>.</p>
-    <form method="post" action="" class="max-w-[460px] grid gap-4 p-5 rounded-2xl bg-card border border-border">
+    <form method="post" action="" class="${cardClass()} max-w-[460px] grid gap-4 p-5">
       ${field('Name', 'name', html`<input id="name" name="name" value=${v.name ?? ''} class=${inputCls} placeholder="Ada Lovelace" />`, errs.name)}
       ${field('Email', 'email', html`<input id="email" name="email" type="email" value=${v.email ?? ''} class=${inputCls} placeholder="ada@example.com" />`, errs.email)}
       ${field('Message', 'message', html`<textarea id="message" name="message" rows="3" class=${inputCls} placeholder="Say hello...">${v.message ?? ''}</textarea>`, errs.message)}
-      <button type="submit" class="justify-self-start px-4 py-2 rounded-xl bg-primary text-primary-foreground font-semibold text-sm border-0 cursor-pointer transition-all hover:bg-primary/90 active:scale-[0.97]">Send message</button>
+      <button type="submit" class="${buttonClass()} justify-self-start">Send message</button>
     </form>
   `;
 }

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

@@ -20,6 +20,10 @@
 // requirement. The frame element itself upgrades because the root layout ships a
 // component (the theme toggle), so @webjsdev/core and the router load app-wide.
 import { html } from '@webjsdev/core';
+import { cardClass } from '#components/ui/card.ts';
+import { buttonClass } from '#components/ui/button.ts';
+import { cn } from '#lib/utils/cn.ts';
+import { pageHeading, lede } from '#lib/utils/ui.ts';
 import type { Metadata } from '@webjsdev/core';
 import { filterTasks, normalizeStatus, type Status } from '#modules/frames/utils/tasks.ts';
 
@@ -30,10 +34,14 @@ export const metadata: Metadata = { title: 'Frames (webjs-frame partial swap) |
 // link OUTSIDE the frame would drive it from anywhere via data-webjs-frame="tasks".
 function filterTab(current: Status, status: Status, label: string) {
   const active = current === status;
-  const base = 'px-3 py-1.5 rounded-lg font-semibold text-sm no-underline transition-colors';
-  const cls = active
-    ? base + ' bg-primary text-primary-foreground'
-    : base + ' bg-card border border-border text-foreground font-medium hover:border-border-strong';
+  // A segmented control: keep ONE variant (constant weight, border, padding) so
+  // toggling the active tab never reflows the row, overriding only the active
+  // colors with cn().
+  const cls = cn(
+    buttonClass({ variant: 'secondary', size: 'sm' }),
+    'no-underline',
+    active && 'bg-primary text-primary-foreground border-primary hover:border-primary',
+  );
   return html`<a href="/features/frames?status=${status}" class=${cls}>${label}</a>`;
 }
 
@@ -41,16 +49,16 @@ export default function FramesExample({ searchParams }: { searchParams: Record<s
   const status = normalizeStatus(searchParams?.status);
   const tasks = filterTasks(status);
   return html`
-    <h1 class="text-h2 font-bold mb-4">Frames</h1>
-    <p class="text-muted-foreground mb-4">
+    ${pageHeading('Frames')}
+    ${lede(html`
       Filter the list. With JS on, only the framed region swaps (the response is
       just the frame's subtree, not the whole page) and the heading above never
       re-renders. With JS off, the same links do full-page navigations. It is one
       region refreshing independently of a navigation, which neither a page nor a
       layout can express: a layout wraps routes with shared chrome and only
       re-renders when you navigate, while a frame updates one region in place.
-    </p>
-    <webjs-frame id="tasks" class="block p-4 rounded-2xl bg-card border border-border">
+    `)}
+    <webjs-frame id="tasks" class="${cardClass()} block p-4">
       <div class="flex gap-2 mb-4">
         ${filterTab(status, 'all', 'All')}
         ${filterTab(status, 'active', 'Active')}