@webjsdev/cli 0.10.44 → 0.10.45

package/templates/gallery/modules/server-actions/actions/greet.test.ts

@@ -1,15 +1,24 @@
 // Example node test for the documented test helpers (from @webjsdev/server).
 // Run it with node --test (or webjs test after moving it under test/). The
 // handle() harness drives the FULL request pipeline: createRequestHandler({
-// appDir }) builds it, and rawActionRequest() fires a 'use server' action
-// through it (CSRF + the rich serializer included), returning the raw Response.
+// appDir }) builds it, and rawActionRequest() / invokeActionForTest() fire a
+// 'use server' action through it (CSRF + the rich serializer included).
 // buildRouteTable(appDir) parses the file router; matchPage / matchApi resolve a
 // URL against it, params included. See the testing docs.
+//
+// greet is gated by the requireAuth middleware, which reads the REAL signed
+// session off the request (the auth gallery card). So an unauthenticated call is
+// genuinely denied (401), and the success path needs a real session cookie
+// (obtained via a signup + loginAndGetCookies, skipped until the db is migrated).
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
-import { createRequestHandler, buildRouteTable, matchPage, matchApi, rawActionRequest, invokeActionForTest } from '@webjsdev/server';
+import { createRequestHandler, buildRouteTable, matchPage, matchApi, invokeActionForTest } from '@webjsdev/server';
+import { testRequest, loginAndGetCookies } from '@webjsdev/server/testing';
 
 const appDir = process.cwd();
+process.env.AUTH_SECRET ||= 'test-secret-at-least-32-characters-long!!';
+
+const GREET = 'modules/server-actions/actions/greet.server.ts';
 
 test('buildRouteTable + matchPage resolve a dynamic route with its params', async () => {
   const table = await buildRouteTable(appDir);
@@ -24,47 +33,41 @@ test('matchApi resolves the route-handler endpoint', async () => {
   assert.ok(m, 'the route.ts endpoint matches');
 });
 
-test('rawActionRequest fires the greet action through the pipeline', async () => {
+test('an unauthenticated greet is denied by requireAuth before greet runs', async () => {
   const app = await createRequestHandler({ appDir, dev: true });
   if (app.warmup) await app.warmup();
-  const res = await rawActionRequest(
-    app,
-    'modules/server-actions/actions/greet.server.ts',
-    'greet',
-    [{ name: 'Ada' }],
-  );
-  assert.equal(res.status, 200);
+  // No session cookie -> requireAuth short-circuits with a 401 failure envelope
+  // (it reads only the cookie, so this is real without a migrated db).
+  const r = (await invokeActionForTest(
+    app, GREET, 'greet', [{ name: 'Bob' }], { throwOnError: false },
+  )) as { success: boolean; error?: string; status?: number };
+  assert.equal(r.success, false);
+  assert.equal(r.status, 401);
 });
 
-test('the middleware sets the caller on the context and greet reads it via actionContext()', async () => {
+test('an authenticated greet reads the caller off the session via actionContext()', async (t) => {
   const app = await createRequestHandler({ appDir, dev: true });
   if (app.warmup) await app.warmup();
-  // invokeActionForTest returns the deserialized result as unknown; cast to the
-  // action's ActionResult shape to read it.
+
+  // Real signup through the auth card's page action, then a real login to capture
+  // the signed session cookie. Both hit the users table, so skip until the db is
+  // migrated (run db:generate + db:migrate) rather than fail misleadingly.
+  const email = `greet+${Date.now()}@example.com`;
+  const password = 'password123';
+  const signupRes = await testRequest(app.handle, '/features/auth/signup', {
+    method: 'POST',
+    headers: { 'content-type': 'application/x-www-form-urlencoded' },
+    body: new URLSearchParams({ name: 'Ada', email, password }).toString(),
+  });
+  if (signupRes.status !== 302) { t.skip('app deps/db not ready; run db:generate + db:migrate'); return; }
+  const { cookies } = await loginAndGetCookies(app.handle, { email, password });
+
+  // With the session cookie the middleware sets the caller, and greet reads it.
   const r = (await invokeActionForTest(
-    app,
-    'modules/server-actions/actions/greet.server.ts',
-    'greet',
-    [{ name: 'Bob' }],
-  )) as { success: boolean; data?: { message: string }; error?: string; status?: number };
+    app, GREET, 'greet', [{ name: 'Bob' }], { extraCookies: cookies },
+  )) as { success: boolean; data?: { message: string } };
   assert.equal(r.success, true);
-  // The message carries BOTH the input (Bob) and the middleware-set caller (Ada).
+  // The message carries BOTH the input (Bob) and the session caller (Ada).
   assert.match(r.data?.message ?? '', /BOB/);
   assert.match(r.data?.message ?? '', /Ada/);
 });
-
-test('the auth middleware short-circuits a signed-out request before greet runs', async () => {
-  const app = await createRequestHandler({ appDir, dev: true });
-  if (app.warmup) await app.warmup();
-  // A middleware short-circuit rides as a normal failure envelope (200 with the
-  // status inside), so read the result rather than expecting a thrown non-2xx.
-  const r = (await invokeActionForTest(
-    app,
-    'modules/server-actions/actions/greet.server.ts',
-    'greet',
-    [{ name: 'Bob', signedOut: true }],
-    { throwOnError: false },
-  )) as { success: boolean; data?: { message: string }; error?: string; status?: number };
-  assert.equal(r.success, false);
-  assert.equal(r.status, 401);
-});

package/templates/gallery/modules/server-actions/components/greeter.ts

@@ -5,14 +5,14 @@ import { greet } from '../actions/greet.server.ts';
 
 export class Greeter extends WebComponent {
   private msg = signal('');
-  // Drives the requireAuth middleware on the action: when true the request is
-  // treated as signed-out, so the middleware 401s BEFORE greet() runs.
-  private signedOut = signal(false);
 
   async run(e: SubmitEvent) {
     e.preventDefault();
     const name = String(new FormData(e.target as HTMLFormElement).get('name') ?? '');
-    const r = await greet({ name, signedOut: this.signedOut.get() });
+    // The action's requireAuth middleware reads the real session off the request.
+    // Signed out, this comes back as a 401 failure envelope ("Sign in to
+    // continue."); sign in at /features/auth/login and the greeting succeeds.
+    const r = await greet({ name });
     // Narrow on r.success so TS knows `data` (success) vs `error` (failure). A
     // middleware short-circuit arrives here as a normal failure envelope.
     this.msg.set(r.success ? (r.data?.message ?? '') : (r.error ?? 'error'));
@@ -27,10 +27,7 @@ export class Greeter extends WebComponent {
           <button type="submit"
             class="shrink-0 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]">Greet</button>
         </form>
-        <label class="flex items-center gap-2 text-sm text-muted-foreground cursor-pointer select-none">
-          <input type="checkbox" @change=${(e: Event) => this.signedOut.set((e.target as HTMLInputElement).checked)} />
-          Simulate a signed-out visitor (the middleware 401s before the action runs)
-        </label>
+        <p class="m-0 text-sm text-muted-foreground">The action is gated by requireAuth. <a class="text-primary" href="/features/auth/login">Sign in</a> to greet; signed out returns a real 401.</p>
         ${this.msg.get() ? html`<p class="m-0 font-semibold text-foreground">${this.msg.get()}</p>` : ''}
       </div>
     `;

package/templates/gallery/modules/server-actions/middleware/require-auth.server.ts

@@ -7,10 +7,16 @@
 // .server.ts with NO 'use server'): the action imports it server-side; it never
 // ships to the browser.
 import type { ActionResult } from '@webjsdev/server';
+// This demo depends on the auth gallery card (modules/auth): getCurrentUser
+// reads the real signed session. If you prune the auth card, prune this
+// server-actions card too (or swap this for your own session read); gallery:clear
+// removes both together.
+import { getCurrentUser } from '#modules/auth/auth.server.ts';
 
 export interface AuthUser {
   id: string;
-  name: string;
+  name?: string | null;
+  email?: string;
 }
 
 // The context object the framework passes each middleware. `context` is the
@@ -24,17 +30,16 @@ interface ActionMiddlewareCtx {
 }
 
 export async function requireAuth(ctx: ActionMiddlewareCtx, next: () => Promise<unknown>): Promise<unknown> {
-  // A REAL guard reads the signed session or JWT off ctx.request, because auth
-  // belongs to the request, not the payload. This gallery has no login backend on
-  // the action path, so to keep BOTH branches exercisable the demo treats the
-  // caller as signed in UNLESS the request asks to simulate a signed-out visitor
-  // (the checkbox in the component sends { signedOut: true } in the action input).
-  const [input] = ctx.args as [{ signedOut?: boolean } | undefined];
-  const user: AuthUser | null = input?.signedOut ? null : { id: 'u_1', name: 'Ada' };
+  // A REAL guard reads the signed session off the request, because auth belongs
+  // to the request, not the payload. The RPC POST is same-origin, so the auth
+  // cookie rides along and getCurrentUser(ctx.request) reads it (this uses the
+  // auth gallery card's createAuth config; sign in at /features/auth/login).
+  const user = (await getCurrentUser(ctx.request)) as AuthUser | null;
 
   // Short-circuit: return an ActionResult WITHOUT calling next(), so the action
   // never runs. On the RPC boundary the short-circuit rides as the result with its
-  // status inside the envelope, and a denied call is served no-store (never cached).
+  // status inside the envelope, and a denied call is served no-store (never
+  // cached). An anonymous caller is genuinely denied here.
   if (!user) return { success: false, error: 'Sign in to continue.', status: 401 } satisfies ActionResult<never>;
 
   ctx.context.user = user; // what actionContext().user reads inside the action

package/templates/gallery/modules/stream/components/stream-demo.ts

@@ -0,0 +1,76 @@
+// <webjs-stream> is the element-level DOM-update grammar (#248): a self-applying
+// element that clones its <template> and runs one native DOM method against a
+// target (by id), then removes itself. `renderStream(htmlString)` from
+// @webjsdev/core applies such a payload on the client. It is WebJs's take on
+// Turbo Streams: surgical append / prepend / replace / update / remove, without
+// redrawing a whole region.
+//
+// This demo drives it from the client with buttons. The list below is seeded
+// ONCE in render(); every button mutates the LIVE DOM via renderStream() and the
+// component never re-renders (the row counter is a plain field, deliberately not
+// a signal, so reading it never re-runs render() and wipes the surgical updates).
+// That is the whole point: out-of-band updates that a signal re-render or a frame
+// region-swap would clobber.
+import { WebComponent, html, renderStream } from '@webjsdev/core';
+
+// Build a <webjs-stream> payload string. It is a plain string (NOT an html``
+// template), so interpolating the row markup here is fine. `remove` needs no
+// <template>; every other action wraps its content in one.
+function streamPayload(action: string, target: string, inner = '') {
+  const body = action === 'remove' ? '' : `<template>${inner}</template>`;
+  return `<webjs-stream action="${action}" target="${target}">${body}</webjs-stream>`;
+}
+
+const rowCls = 'flex items-center gap-2 px-3 py-2 rounded-xl bg-card border border-border text-[15px] text-foreground';
+const row = (id: string, label: string) => `<li id="${id}" class="${rowCls}">${label}</li>`;
+
+export class StreamDemo extends WebComponent {
+  // A plain instance field, NOT a signal: incremented to mint unique row ids.
+  // It is never read inside render(), so appending a row does not re-render the
+  // component and blow away the streamed-in rows.
+  #n = 2;
+
+  append() {
+    this.#n++;
+    renderStream(streamPayload('append', 'stream-list', row(`row-${this.#n}`, `Row ${this.#n} (appended)`)));
+  }
+  prepend() {
+    this.#n++;
+    renderStream(streamPayload('prepend', 'stream-list', row(`row-${this.#n}`, `Row ${this.#n} (prepended)`)));
+  }
+  replaceFirst() {
+    // `replace` swaps the target element itself. The replacement keeps id row-1,
+    // so the button stays repeatable.
+    renderStream(streamPayload('replace', 'row-1', row('row-1', 'Row 1 (replaced)')));
+  }
+  removeSecond() {
+    // `remove` deletes the target and needs no <template>.
+    renderStream(streamPayload('remove', 'row-2'));
+  }
+  reset() {
+    // `update` replaces the target's children, restoring the seed list.
+    renderStream(streamPayload('update', 'stream-list', row('row-1', 'Row 1') + row('row-2', 'Row 2')));
+  }
+
+  render() {
+    const btn = 'px-3 py-1.5 rounded-lg bg-card border border-border text-sm font-medium text-foreground cursor-pointer transition-colors hover:border-border-strong';
+    return html`
+      <div class="grid gap-4 max-w-[460px]">
+        <div class="flex flex-wrap gap-2">
+          <button class=${btn} @click=${() => this.append()}>Append</button>
+          <button class=${btn} @click=${() => this.prepend()}>Prepend</button>
+          <button class=${btn} @click=${() => this.replaceFirst()}>Replace Row 1</button>
+          <button class=${btn} @click=${() => this.removeSecond()}>Remove Row 2</button>
+          <button class=${btn} @click=${() => this.reset()}>Reset</button>
+        </div>
+        <!-- The target list. renderStream() mutates it by id; this markup renders
+             once and is never re-rendered by the component. -->
+        <ul id="stream-list" class="grid gap-2 m-0 p-0 list-none">
+          <li id="row-1" class="flex items-center gap-2 px-3 py-2 rounded-xl bg-card border border-border text-[15px] text-foreground">Row 1</li>
+          <li id="row-2" class="flex items-center gap-2 px-3 py-2 rounded-xl bg-card border border-border text-[15px] text-foreground">Row 2</li>
+        </ul>
+      </div>
+    `;
+  }
+}
+StreamDemo.register('stream-demo');

package/templates/gallery/modules/streaming/actions/stream-tokens.server.ts

@@ -0,0 +1,17 @@
+'use server';
+// A STREAMING server action (#489). Detection is purely on the RETURN VALUE, no
+// config export: an action that returns a ReadableStream / async iterable /
+// async generator streams its chunks over the single RPC response instead of
+// buffering. Each `yield` is rich-serialized and flushed as it is produced, so
+// the call site sees tokens arrive live. Back-pressure is respected and the
+// generator is cancelled if the client disconnects. A streamed result is never
+// cached / ETagged / seeded. One function per file, like every action.
+export async function* streamTokens(prompt: string): AsyncGenerator<string> {
+  const words = `Streaming ${prompt} one token at a time, straight from the server.`.split(' ');
+  for (const word of words) {
+    // A deliberate per-token delay so the streaming is visible; a real action
+    // would yield as its upstream (an LLM, a DB cursor, a log tail) produces.
+    await new Promise((r) => setTimeout(r, 140));
+    yield word + ' ';
+  }
+}

package/templates/gallery/modules/streaming/components/token-stream.ts

@@ -0,0 +1,46 @@
+// Consumes a streaming action at the call site with `for await`. The import of
+// a `'use server'` action is rewritten to an RPC stub, so `await streamTokens()`
+// resolves to an async iterable whose chunks arrive as the server yields them.
+// We append each chunk to an instance signal, so the text builds up live as it
+// streams (the built-in SignalWatcher re-renders on each `.set`). With JS off
+// the button is inert and the empty output renders (streaming is inherently a
+// JS behaviour), so nothing here breaks the no-JS first paint.
+import { WebComponent, signal, html } from '@webjsdev/core';
+import { streamTokens } from '../actions/stream-tokens.server.ts';
+
+export class TokenStream extends WebComponent {
+  // Plain instance signals (not reactive props), so a class field is fine here.
+  private output = signal('');
+  private busy = signal(false);
+
+  private async run() {
+    this.output.set('');
+    this.busy.set(true);
+    try {
+      // `await streamTokens(...)` gives the async iterable; `for await` pulls
+      // each token as it arrives instead of waiting for the whole response.
+      for await (const chunk of await streamTokens('webjs')) {
+        this.output.set(this.output.get() + chunk);
+      }
+    } finally {
+      this.busy.set(false);
+    }
+  }
+
+  render() {
+    const busy = this.busy.get();
+    return html`
+      <div class="rounded-2xl border border-border bg-card p-5">
+        <button
+          @click=${() => this.run()}
+          ?disabled=${busy}
+          class="inline-flex items-center px-4 py-2 rounded-xl bg-primary text-primary-foreground font-semibold text-sm transition-all hover:bg-primary/90 active:scale-[0.97] disabled:opacity-60"
+        >
+          ${busy ? 'streaming…' : 'Stream tokens'}
+        </button>
+        <pre class="mt-4 whitespace-pre-wrap font-mono text-sm text-foreground min-h-[3rem]">${this.output.get()}</pre>
+      </div>
+    `;
+  }
+}
+TokenStream.register('token-stream');

package/templates/gallery/modules/suspense/components/slow-fact.ts

@@ -0,0 +1,19 @@
+// A bare async-render component whose server data is deliberately SLOW. On its
+// own, async render() BLOCKS the SSR first byte (the resolved value lands in the
+// first paint with no fallback, which is what the async-render demo shows). That
+// is the right default for fast data. Here the data is slow, so the page wraps
+// it in a <webjs-suspense> boundary that flushes its fallback on the first byte
+// and STREAMS this content in when the await settles (progressively on soft
+// navigation too). Same component either way; the boundary is what changes the
+// SSR behaviour from block to stream.
+import { WebComponent, html } from '@webjsdev/core';
+
+export class SlowFact extends WebComponent {
+  async render() {
+    await new Promise((r) => setTimeout(r, 900));
+    return html`<p class="rounded-2xl border border-border bg-card p-5 text-foreground">
+      The answer, after a slow lookup, is <strong>42</strong>.
+    </p>`;
+  }
+}
+SlowFact.register('slow-fact');

package/templates/gallery/test/auth/auth.test.ts

@@ -0,0 +1,81 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
+
+import { createRequestHandler } from '@webjsdev/server';
+import { testRequest, loginAndGetCookies, withSessionCookie } from '@webjsdev/server/testing';
+
+const appDir = resolve(dirname(fileURLToPath(import.meta.url)), '..', '..');
+
+// The auth pages + dashboard middleware query the users table via Drizzle. Until
+// `db:generate` has authored the migration (then `db:migrate` applies it, or
+// `dev` applies it via webjs.dev.before), a request hitting those modules 500s;
+// we detect that at the RESPONSE level (a 5xx on the dashboard) and SKIP with a
+// clear message rather than report a misleading failure. After the db is set up
+// every assertion runs for real.
+process.env.DATABASE_URL ||= 'file:./dev.db';
+process.env.AUTH_SECRET ||= 'test-secret-at-least-32-characters-long!!';
+
+function makeHandler() {
+  // createRequestHandler builds lazily, so it succeeds even before the DB is
+  // migrated; the missing table only surfaces when a request reaches a module
+  // that queries it. That is why readiness is probed per-response.
+  return createRequestHandler({ appDir, dev: true });
+}
+
+test('protected route redirects to login when unauthenticated', async (t) => {
+  const app = await makeHandler();
+  const res = await testRequest(app.handle, '/features/auth/dashboard');
+  if (res.status >= 500) {
+    t.skip('app deps not ready (run db:generate + db:migrate)');
+    return;
+  }
+  // The dashboard middleware calls auth(req); with no session cookie it 302s to
+  // login. This needs no DB row, only a cookie read, so it is always real once
+  // the modules import.
+  assert.equal(res.status, 302, 'unauthenticated dashboard is gated');
+  assert.equal(res.headers.get('location'), '/features/auth/login');
+});
+
+test('signup -> login -> dashboard renders for the authenticated user', async (t) => {
+  const app = await makeHandler();
+  // Probe readiness: a 5xx on the dashboard means deps/DB are not set up.
+  const probe = await testRequest(app.handle, '/features/auth/dashboard');
+  if (probe.status >= 500) { t.skip('app deps not ready; run db:generate + db:migrate'); return; }
+
+  const email = `harness+${Date.now()}@example.com`;
+  const password = 'password123';
+
+  // Real signup through the page server action (the no-JS form write-path).
+  let canSignup = true;
+  try {
+    const signupRes = await testRequest(app.handle, '/features/auth/signup', {
+      method: 'POST',
+      headers: { 'content-type': 'application/x-www-form-urlencoded' },
+      body: new URLSearchParams({ name: 'Harness', email, password }).toString(),
+    });
+    // Success auto-logs-in and 302s to the dashboard (carrying the session
+    // cookie); a 422 means validation failed. Either way the action ran.
+    assert.ok([302, 422].includes(signupRes.status), 'signup action ran');
+    if (signupRes.status === 302) assert.equal(signupRes.headers.get('location'), '/features/auth/dashboard', 'signup lands on the dashboard');
+    if (signupRes.status !== 302) canSignup = false;
+  } catch {
+    // No migrated DB table -> the action throws. Skip the DB-backed assertions.
+    canSignup = false;
+  }
+  if (!canSignup) { t.skip('no migrated DB; run db:migrate to enable the full flow'); return; }
+
+  // Real login captures the genuine signed session cookie.
+  const { cookies } = await loginAndGetCookies(app.handle, { email, password });
+
+  // With the session cookie the protected route now renders (200).
+  const dash = await testRequest(app.handle, '/features/auth/dashboard', withSessionCookie({}, cookies));
+  assert.equal(dash.status, 200, 'the session cookie unlocks the dashboard');
+  const body = await dash.text();
+  assert.match(body, /Dashboard/, 'the dashboard content rendered');
+  // The greeting interpolates the real user, so the name renders and the literal
+  // template source never leaks (a counterfactual for the escaping bug).
+  assert.match(body, /Harness/, 'the dashboard greets the signed-in user by name');
+  assert.ok(!body.includes('${user'), 'the greeting interpolation is not a literal string');
+});

package/templates/scripts/clear-api-gallery.mjs

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+// Clear the api scaffold's backend-features showcase to a clean, buildable base.
+//
+// The api template ships a browsable showcase (JSON/HTTP endpoints under
+// app/api/features/, their modules, an env.ts example, and a starter test) so an
+// agent can learn the backend idioms from real, running code. It is the api
+// counterpart of the UI gallery's `gallery:clear`. Learn from the demos relevant
+// to your task first (the skill at .agents/skills/webjs/ teaches the same
+// patterns and SURVIVES this reset), then run this once to shed the showcase, then
+// grow the api in place.
+//
+// It removes the showcase routes + modules + the env.ts example + the widgets
+// test, and resets the root app/route.ts to list only the kept baseline endpoints
+// (/api/health, /api/users). It KEEPS the agent skill, middleware.ts (CORS), the
+// health + users endpoints, modules/users, the database wiring, and the users
+// example test. It is a one-time reset: if the showcase is already gone (no
+// app/api/features/) it does nothing, so a rerun never clobbers an app you built.
+import { rmSync, existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const root = process.cwd();
+const rm = (p) => { if (existsSync(join(root, p))) { rmSync(join(root, p), { recursive: true, force: true }); return true; } return false; };
+
+// Guard: the showcase is identified by app/api/features/. If it is absent, the
+// showcase was already cleared (or this is not an api scaffold), so exit before
+// any destructive write. This keeps a rerun safe and never clobbers a built app.
+if (!existsSync(join(root, 'app/api/features'))) {
+  console.log('No backend-features showcase found (app/api/features/ is absent); nothing to clear.');
+  process.exit(0);
+}
+
+// 1) The showcase route tree + its module + the env.ts example + the widgets test.
+const showcasePaths = [
+  'app/api/features',
+  'modules/widgets',
+  'env.ts',
+  'test/unit/widgets.test.ts',
+];
+
+let removed = 0;
+for (const p of showcasePaths) if (rm(p)) removed++;
+
+// 2) Reset the root app/route.ts to list only the kept baseline endpoints. The
+// generated index also lists a `features:` block linking the showcase; strip it
+// (and its comment) so the index does not point at routes that no longer exist.
+// The regex preserves everything else (the app name, the health + users links).
+const routePath = join(root, 'app/route.ts');
+if (existsSync(routePath)) {
+  let s = readFileSync(routePath, 'utf8');
+  s = s.replace(/\n[ \t]*\/\/ The backend-features showcase[^\n]*\n[ \t]*features: \{[\s\S]*?\n[ \t]*\},\n/, '\n');
+  writeFileSync(routePath, s);
+}
+
+console.log(`Backend-features showcase cleared (${removed} paths removed). The agent skill, your database wiring, and the health + users endpoints are kept.`);
+console.log('Next: build your api in app/api/ and modules/, keeping server-only code behind .server.ts.');

package/templates/scripts/clear-gallery.mjs

@@ -10,11 +10,12 @@
 // once to shed the gallery, then grow the app in place.
 //
 // It removes the gallery routes + modules + demo metadata routes, resets
-// app/page.ts to a minimal home, and drops the demo `todos` table from the
-// schema. It KEEPS the agent skill (.agents/skills/webjs/), the layout, the
-// database wiring, the theme toggle, and (for the saas template) the auth
-// modules. It is a one-time reset: if the gallery is already gone (no
-// app/features/) it does nothing, so a rerun never clobbers an app you built.
+// app/page.ts to a minimal home, and drops the demo `todos` table plus the auth
+// card's `passwordHash` column from the schema. It KEEPS the agent skill
+// (.agents/skills/webjs/), the layout, the database wiring, the theme toggle, and
+// the example `users` table. It is a one-time reset: if the gallery is already
+// gone (no app/features/) it does nothing, so a rerun never clobbers an app you
+// built.
 import { rmSync, existsSync, readFileSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
 
@@ -30,18 +31,24 @@ if (!existsSync(join(root, 'app/features'))) {
   process.exit(0);
 }
 
-// 1) Gallery route trees + example metadata routes.
+// 1) Gallery route trees + example metadata routes. `app/api/auth` is the auth
+// card's createAuth handler (it lives at the app root, not under app/features/,
+// because createAuth hardcodes /api/auth/*), and `test/auth` is the auth card's
+// request-pipeline test, so both are removed here alongside the card.
 const galleryPaths = [
-  'app/features', 'app/examples', 'app/sitemaps',
+  'app/features', 'app/examples', 'app/sitemaps', 'app/api/auth', 'test/auth',
   'app/icon.ts', 'app/apple-icon.ts', 'app/manifest.ts', 'app/opengraph-image.ts',
   'app/twitter-image.ts', 'app/robots.ts', 'app/sitemap.ts',
   'app/global-error.ts', 'app/global-not-found.ts',
 ];
-// 2) The gallery's feature modules (by name, so saas auth modules survive).
+// 2) The gallery's feature modules (by name). `auth` is the auth card's server
+// modules (createAuth config, password hashing, signup action, current-user
+// query), pruned with the rest of the card.
 const galleryModules = [
-  'async-render', 'broadcast', 'caching', 'client-router', 'components',
+  'async-render', 'auth', 'broadcast', 'caching', 'client-router', 'components',
   'directives', 'file-storage', 'frames', 'optimistic-ui', 'rate-limit',
-  'route-handler', 'server-actions', 'sessions', 'todo', 'websockets',
+  'route-handler', 'server-actions', 'sessions', 'stream', 'streaming', 'suspense',
+  'todo', 'websockets',
 ].map((m) => `modules/${m}`);
 
 let removed = 0;
@@ -50,12 +57,17 @@ for (const p of [...galleryPaths, ...galleryModules]) if (rm(p)) removed++;
 // 3) Reset app/page.ts to a minimal home (no gallery grid, no dead links).
 writeFileSync(join(root, 'app/page.ts'), MINIMAL_PAGE());
 
-// 4) Drop the demo `todos` table from the schema (keep everything else).
+// 4) Drop the demo `todos` table and the auth card's `passwordHash` column from
+// the schema (keep the example `users` table and everything else), reverting the
+// schema to the minimal base.
 const schemaPath = join(root, 'db/schema.server.ts');
 if (existsSync(schemaPath)) {
   let s = readFileSync(schemaPath, 'utf8');
   s = s.replace(/\n(?:\/\/[^\n]*\n)*export const todos = table\('todos',[\s\S]*?\n\}\);\n/, '\n');
   s = s.replace(/defineRelations\(\{ users, todos \}/, 'defineRelations({ users }');
+  // Strip the auth `passwordHash` column (and its leading comment lines) from the
+  // users table; the rest of the table is the minimal example base.
+  s = s.replace(/\n(?:[ \t]*\/\/[^\n]*\n)*[ \t]*passwordHash: text\(\),\n/, '\n');
   writeFileSync(schemaPath, s);
 }
 

package/lib/lean-copy.js

@@ -1,43 +0,0 @@
-/**
- * The scaffold's lean-copy of a ui component (#983).
- *
- * `webjs create` copies a few `@webjsdev/ui` registry components into a
- * generated app. To match what `webjs ui add` writes, a Tier-1 helper's worked
- * `@example` is stripped (the example is served on demand by `webjs ui view` /
- * the MCP `ui` tool), while a Tier-2 element file is kept whole. Both scaffold
- * copiers (`create.js` and `saas-template.js`) go through THIS one helper so
- * they cannot drift.
- *
- * The strip primitives live in `@webjsdev/ui/registry/extract`; if that subpath
- * cannot be resolved, this degrades to a no-op (keep the example) so the strip
- * is never a reason `webjs create` fails.
- *
- * @module lean-copy
- */
-
-let _mod = null;
-
-async function loadPrimitives() {
-  if (_mod) return _mod;
-  try {
-    const m = await import('@webjsdev/ui/registry/extract');
-    _mod = { stripExample: m.stripExample, isCustomElementSource: m.isCustomElementSource };
-  } catch {
-    _mod = { stripExample: (s) => s, isCustomElementSource: () => true };
-  }
-  return _mod;
-}
-
-/**
- * Return the component source as `webjs ui add` would write it: a Tier-1 helper
- * has its worked `@example` stripped and a pointer left; a Tier-2 element is
- * returned unchanged.
- *
- * @param {string} source  the component source (imports already rewritten)
- * @param {string} name    the component name (for the pointer)
- * @returns {Promise<string>}
- */
-export async function leanComponentSource(source, name) {
-  const { stripExample, isCustomElementSource } = await loadPrimitives();
-  return isCustomElementSource(source) ? source : stripExample(source, name);
-}