rift-ds 1.13.0 → 1.14.0

package/bin/rift-ds.mjs

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 /**
- * The package's one bin: `npx rift-ds init` and `npx rift-ds init chat`.
+ * The package's one bin: `npx rift-ds init`, `npx rift-ds init app`,
+ * `npx rift-ds init chat` and `npx rift-ds init block`.
  *
  * `init` fetches the generated agent skills from the live site into the
  * project's .claude/skills/ folder, one folder per skill, then prints the
@@ -20,6 +21,22 @@
  * installed version's own subpaths and must match it. It never overwrites:
  * a file that exists is skipped and listed, so re-running is safe.
  *
+ * `init app` sets a Next.js app router project up for the library the same
+ * way, from dist/bin/templates/app/: a root wrapper that hands Next's Link
+ * to every link-rendering component, a component that renders the
+ * colour-mode script before first paint, and the base theme's face through
+ * next/font, all under components/rift/. It never edits the root layout
+ * (every app already has one): it prints the whole layout to use instead,
+ * importing tokens.css, base.css and the font, rendering the script and
+ * wrapping the body, and points at init block for a first page.
+ *
+ * `init block <name>` copies one block, a whole starting page, from
+ * dist/bin/templates/blocks/: the files its registry.json entry lists,
+ * held at their target paths so the relative imports between them resolve
+ * as they do there. Blocks share files (the app shell), and the
+ * never-overwrite rule means a shared file is written by whichever block
+ * comes first. With no name it lists the blocks.
+ *
  * The manifest is data from the network that decides where this command
  * writes, so every name and path in it is checked before anything touches
  * the disk: a skill name is one kebab-case folder, a file is a plain
@@ -45,7 +62,10 @@ const PACKAGE_NAME = 'rift-ds';
 const CHAT_SLUG = 'ai-chat';
 const MANIFEST_URL = `${SITE_ORIGIN}/skill/manifest.json`;
 const DEFAULT_DIR = join('.claude', 'skills');
-const TEMPLATES_DIR = join(dirname(fileURLToPath(import.meta.url)), 'templates', 'chat');
+const TEMPLATES_ROOT = join(dirname(fileURLToPath(import.meta.url)), 'templates');
+const TEMPLATES_DIR = join(TEMPLATES_ROOT, 'chat');
+const APP_TEMPLATES_DIR = join(TEMPLATES_ROOT, 'app');
+const BLOCKS_DIR = join(TEMPLATES_ROOT, 'blocks');
 
 /* What `init chat` needs installed beside the package. The optional peers
    each chat subpath imports; the demo's recharts is only for the scripted
@@ -60,7 +80,9 @@ const CHAT_PEERS = [
 ];
 
 const USAGE = `Usage: npx ${PACKAGE_NAME} init [--skill <name>] [--dir <dir>]
+       npx ${PACKAGE_NAME} init app [--app <dir>] [--dry-run]
        npx ${PACKAGE_NAME} init chat [--app <dir>] [--dry-run]
+       npx ${PACKAGE_NAME} init block [<name>] [--app <dir>] [--dry-run]
 
 init
   Fetches the agent skills for this package from ${SITE_ORIGIN} into
@@ -74,6 +96,17 @@ init
   --out <dir>     Deprecated: write one skill's files straight into <dir>
                   (${SKILL_NAME} unless --skill names another). Use --dir.
 
+init app
+  Sets a Next.js app router project up for the library, under
+  components/rift/: a root wrapper that routes every link through Next's
+  Link, a component that applies the stored colour mode before first paint,
+  and the base theme's font. Prints the root layout to use; it never edits
+  the layout itself.
+  Existing files are never overwritten.
+
+  --app <dir>     The app router folder (default: app/ or src/app/, whichever exists)
+  --dry-run       Print what would be written and write nothing
+
 init chat
   Scaffolds the chat widget into a Next.js app router project: the chat,
   follow-ups and feedback routes under app/api/chat/, the guardrails beside
@@ -83,6 +116,16 @@ init chat
   --app <dir>     The app router folder (default: app/ or src/app/, whichever exists)
   --dry-run       Print what would be written and write nothing
 
+init block [<name>]
+  Copies a block into a Next.js app router project: a whole starting page
+  (an app shell, a dashboard, a sign-in) built from the library, its page
+  under app/ and any shared parts under components/blocks/. The files are
+  yours from then on. With no name, lists the blocks. Run init app first.
+  Existing files are never overwritten.
+
+  --app <dir>     The app router folder (default: app/ or src/app/, whichever exists)
+  --dry-run       Print what would be written and write nothing
+
   --help          Show this message
 
 The list of skills is at ${MANIFEST_URL}`;
@@ -162,38 +205,31 @@ async function init({ only, dir, out }) {
   console.log(`  claude mcp add --transport http ${MCP_SERVER_NAME} ${SITE_ORIGIN}/api/mcp`);
 }
 
-/** Every template file, as a path relative to the templates folder (forward slashes). */
-function templateFiles(dir = TEMPLATES_DIR) {
+/** Every template file under `base`, as a path relative to it (forward slashes). */
+function templateFiles(base = TEMPLATES_DIR, dir = base) {
   const out = [];
   for (const entry of readdirSync(dir, { withFileTypes: true })) {
     const full = join(dir, entry.name);
-    if (entry.isDirectory()) out.push(...templateFiles(full));
-    else out.push(relative(TEMPLATES_DIR, full).split('\\').join('/'));
+    if (entry.isDirectory()) out.push(...templateFiles(base, full));
+    else out.push(relative(base, full).split('\\').join('/'));
   }
   return out.sort();
 }
 
-/**
- * Where a template lands. `app/**` goes into the app router folder,
- * `components/**` beside it (src/components when the app is src/app), and
- * the env example at the project root.
- */
-function destinationFor(file, appDir) {
-  if (file.startsWith('app/')) return join(appDir, ...file.slice('app/'.length).split('/'));
-  if (file.startsWith('components/')) return join(dirname(appDir), ...file.split('/'));
-  return join(process.cwd(), ...file.split('/'));
-}
-
-function initChat({ app, dryRun }) {
-  if (!existsSync(TEMPLATES_DIR)) {
-    fail('this copy carries no chat templates: run the published bin (npx ' + PACKAGE_NAME + ' init chat).');
-  }
+/** The app router folder: the one passed, else app/ or src/app/, whichever exists. */
+function findAppDir(app) {
   const appDir = app ?? ['app', join('src', 'app')].map((d) => resolve(d)).find((d) => existsSync(d));
   if (!appDir) {
     fail('no app/ or src/app/ folder found. Run this inside a Next.js app router project, or pass --app <dir>.');
   }
+  return appDir;
+}
 
-  const files = templateFiles();
+/**
+ * Writes every template under `base` (or only `files`, paths relative to
+ * it) that does not exist yet; returns what was written and skipped.
+ */
+function scaffold(base, appDir, dryRun, files = templateFiles(base)) {
   const written = [];
   const skipped = [];
   for (const file of files) {
@@ -204,7 +240,7 @@ function initChat({ app, dryRun }) {
     }
     if (!dryRun) {
       mkdirSync(dirname(dest), { recursive: true });
-      writeFileSync(dest, readFileSync(join(TEMPLATES_DIR, ...file.split('/'))));
+      writeFileSync(dest, readFileSync(join(base, ...file.split('/'))));
     }
     written.push(dest);
     console.log(`${dryRun ? '○' : '▸'} ${relative(process.cwd(), dest)}`);
@@ -212,6 +248,87 @@ function initChat({ app, dryRun }) {
   for (const dest of skipped) {
     console.log(`· ${relative(process.cwd(), dest)} exists, left as it is`);
   }
+  return { written, skipped };
+}
+
+function initApp({ app, dryRun }) {
+  if (!existsSync(APP_TEMPLATES_DIR)) {
+    fail('this copy carries no app templates: run the published bin (npx ' + PACKAGE_NAME + ' init app).');
+  }
+  const appDir = findAppDir(app);
+  const { written, skipped } = scaffold(APP_TEMPLATES_DIR, appDir, dryRun);
+  console.log(
+    dryRun
+      ? `\n✓ Dry run: ${written.length} files would be written, ${skipped.length} left alone.`
+      : `\n✓ App set up: ${written.length} files written, ${skipped.length} left alone.`
+  );
+  const rift = relative(appDir, join(dirname(appDir), 'components', 'rift')).split('\\').join('/');
+  const layoutFile = relative(process.cwd(), join(appDir, 'layout.tsx'));
+  console.log(`\nNext, make your root layout (${layoutFile}) this, keeping any metadata you have:\n`);
+  for (const line of [
+    `import '${PACKAGE_NAME}/tokens/tokens.css';`,
+    `import '${PACKAGE_NAME}/tokens/base.css';`,
+    `import '${rift}/font.css';`,
+    `import { riftFont } from '${rift}/font';`,
+    `import { ColorModeScript } from '${rift}/ColorModeScript';`,
+    `import { RiftRoot } from '${rift}/RiftRoot';`,
+    ``,
+    `export default function RootLayout({ children }: { children: React.ReactNode }) {`,
+    `  return (`,
+    `    <html lang="en" className={riftFont.variable} suppressHydrationWarning>`,
+    `      <head>`,
+    `        <ColorModeScript />`,
+    `      </head>`,
+    `      <body>`,
+    `        <RiftRoot>{children}</RiftRoot>`,
+    `      </body>`,
+    `    </html>`,
+    `  );`,
+    `}`,
+  ]) {
+    console.log(`  ${line}`);
+  }
+  console.log(`\nIf the layout imports a globals.css from create-next-app, drop that import (or empty the file):`);
+  console.log(`its body colours and font would cover the library's.`);
+  console.log(`\nThen add a first page: npx ${PACKAGE_NAME} init block dashboard (no name lists them).`);
+  console.log(`Setup and theming: ${SITE_ORIGIN}/docs/get-started`);
+}
+
+/**
+ * Where a template lands. `app/**` goes into the app router folder,
+ * `components/**` beside it (src/components when the app is src/app), and
+ * the env example at the project root.
+ */
+function destinationFor(file, appDir) {
+  if (file.startsWith('app/')) return join(appDir, ...file.slice('app/'.length).split('/'));
+  if (file.startsWith('components/')) return join(dirname(appDir), ...file.split('/'));
+  return join(process.cwd(), ...file.split('/'));
+}
+
+/**
+ * Whether the project's .gitignore would hide the scaffolded env example:
+ * a `.env*`-style rule with no `!.env.chat.example` exception after it.
+ * create-next-app writes `.env*`, so a fresh app's example never reaches
+ * a commit unless the scaffold says so.
+ */
+function ignoresEnvExample() {
+  const gitignore = resolve('.gitignore');
+  if (!existsSync(gitignore)) return false;
+  let ignored = false;
+  for (const raw of readFileSync(gitignore, 'utf8').split('\n')) {
+    const line = raw.trim();
+    if (line === '.env*' || line === '.env.*' || line === '.env.chat.example') ignored = true;
+    if (line === '!.env.chat.example' || line === '!.env*.example' || line === '!.env.*.example') ignored = false;
+  }
+  return ignored;
+}
+
+function initChat({ app, dryRun }) {
+  if (!existsSync(TEMPLATES_DIR)) {
+    fail('this copy carries no chat templates: run the published bin (npx ' + PACKAGE_NAME + ' init chat).');
+  }
+  const appDir = findAppDir(app);
+  const { written, skipped } = scaffold(TEMPLATES_DIR, appDir, dryRun);
 
   console.log(
     dryRun
@@ -228,6 +345,12 @@ function initChat({ app, dryRun }) {
     `  3. Copy .env.chat.example into .env.local. With NEXT_PUBLIC_CHAT_DEMO=true the widget plays a scripted\n` +
       `     conversation and needs no key; set ANTHROPIC_API_KEY and CHAT_ENABLED=true to go live.`
   );
+  if (ignoresEnvExample()) {
+    console.log(
+      `     Your .gitignore ignores .env* (create-next-app's default), so git will not see the example.\n` +
+        `     Commit it on purpose with: git add -f .env.chat.example`
+    );
+  }
   console.log(
     `  4. Your layout's viewport should set interactiveWidget: "resizes-content", so the phone takeover ends above the keyboard.`
   );
@@ -235,6 +358,36 @@ function initChat({ app, dryRun }) {
   console.log(`Every prop: ${SITE_ORIGIN}/components/${CHAT_SLUG}`);
 }
 
+function initBlock({ name, app, dryRun }) {
+  const registryFile = join(BLOCKS_DIR, 'registry.json');
+  if (!existsSync(registryFile)) {
+    fail('this copy carries no blocks: run the published bin (npx ' + PACKAGE_NAME + ' init block).');
+  }
+  const { blocks } = JSON.parse(readFileSync(registryFile, 'utf8'));
+  if (!name) {
+    console.log('Blocks:\n');
+    for (const block of blocks) console.log(`  ${block.name.padEnd(12)} ${block.description}`);
+    console.log(`\nAdd one with: npx ${PACKAGE_NAME} init block <name>`);
+    console.log(`See them: ${SITE_ORIGIN}/docs/blocks`);
+    return;
+  }
+  const block = blocks.find((b) => b.name === name);
+  if (!block) {
+    fail(`no block named "${name}". The blocks: ${blocks.map((b) => b.name).join(', ')}.`);
+  }
+  const appDir = findAppDir(app);
+  const { written, skipped } = scaffold(BLOCKS_DIR, appDir, dryRun, block.files);
+  console.log(
+    dryRun
+      ? `\n✓ Dry run: ${written.length} files would be written, ${skipped.length} left alone.`
+      : `\n✓ ${block.label} block added: ${written.length} files written, ${skipped.length} left alone.`
+  );
+  console.log(`\nNext:`);
+  console.log(`  1. If you have not, run npx ${PACKAGE_NAME} init app and make your root layout the one it prints,`);
+  console.log(`     so the tokens, the base sheet, the font and the colour mode are in place.`);
+  console.log(`  2. Open ${block.route} in your dev server. The files are yours: rename, restyle and grow them.`);
+}
+
 const args = process.argv.slice(2);
 if (args.includes('--help') || args.includes('-h') || args.length === 0) {
   console.log(USAGE);
@@ -255,9 +408,12 @@ function option(flag, what) {
   return value;
 }
 
-if (args[1] === 'chat') {
+if (args[1] === 'chat' || args[1] === 'app' || args[1] === 'block') {
   const appFlag = option('--app', 'a directory');
-  initChat({ app: appFlag ? resolve(appFlag) : undefined, dryRun: args.includes('--dry-run') });
+  const scaffoldArgs = { app: appFlag ? resolve(appFlag) : undefined, dryRun: args.includes('--dry-run') };
+  if (args[1] === 'chat') initChat(scaffoldArgs);
+  else if (args[1] === 'app') initApp(scaffoldArgs);
+  else initBlock({ ...scaffoldArgs, name: args[2] && !args[2].startsWith('--') ? args[2] : undefined });
 } else {
   if (args[1] && !args[1].startsWith('--')) fail(`unknown init target "${args[1]}"\n\n${USAGE}`);
   const only = option('--skill', 'a skill name');

package/bin/templates/app/components/rift/ColorModeScript.tsx

@@ -0,0 +1,10 @@
+import { colorModeScript } from 'rift-ds/components/ThemeToggle/colorMode';
+
+/**
+ * Applies the visitor's stored colour mode before first paint, so a
+ * returning visitor never sees the wrong mode flash. Render it in your root
+ * layout's <head>. ThemeToggle reads and changes the same setting.
+ */
+export function ColorModeScript() {
+  return <script dangerouslySetInnerHTML={{ __html: colorModeScript() }} />;
+}

package/bin/templates/app/components/rift/RiftRoot.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import Link from 'next/link';
+import { LinkProvider } from 'rift-ds/behaviors/LinkProvider';
+
+/**
+ * The app's root for rift-ds: hands Next's Link to every rift-ds component
+ * that renders a link, so they navigate through the router instead of
+ * reloading the page. Wrap your root layout's body content in it.
+ */
+export function RiftRoot({ children }: { children: React.ReactNode }) {
+  return <LinkProvider linkComponent={Link}>{children}</LinkProvider>;
+}

package/bin/templates/app/components/rift/font.css

@@ -0,0 +1,7 @@
+/* Points the library's primary face at the one font.ts loads. The class
+   that defines --font-rift-primary sits on <html>, which is :root, so the
+   variable resolves here. A shipped theme (data-brand on <html>) sets its
+   own face and wins over this rule. */
+:root {
+  --font-family-primary: var(--font-rift-primary), 'Nunito Sans', sans-serif;
+}

package/bin/templates/app/components/rift/font.ts

@@ -0,0 +1,14 @@
+import { Nunito_Sans } from 'next/font/google';
+
+/**
+ * The base theme's typeface, Nunito Sans, self-hosted by Next at build time.
+ * Put `riftFont.variable` on <html> in your root layout and import
+ * ./font.css after the tokens: together they point the library's
+ * --font-family-primary at this face. To use your own face, swap the import
+ * here and keep the variable name.
+ */
+export const riftFont = Nunito_Sans({
+  subsets: ['latin'],
+  weight: ['300', '400', '600', '700'],
+  variable: '--font-rift-primary',
+});

package/bin/templates/blocks/app/dashboard/page.module.css

@@ -0,0 +1,90 @@
+/* The dashboard's grid. Four stats across on a desktop, two from the
+   laptop width down to a phone; the two panels sit side by side until the
+   tablet width, then stack. */
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--gap-500);
+}
+
+.panels {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--gap-500);
+}
+
+/* The projects table: its title, then the table on the page itself. */
+.tableSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-300);
+  min-width: 0;
+}
+
+.panelTitle {
+  margin: 0;
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  letter-spacing: var(--font-title-body-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-400);
+}
+
+.progressRow {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200);
+}
+
+.progressMeta,
+.activityRow {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--gap-400);
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-primary);
+}
+
+.muted {
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+}
+
+.strong {
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+}
+
+@media (max-width: 1279px) {
+  .stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 959px) {
+  .panels {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .stats {
+    gap: var(--gap-400);
+  }
+
+  .panels {
+    gap: var(--gap-400);
+  }
+}

package/bin/templates/blocks/app/dashboard/page.tsx

@@ -0,0 +1,141 @@
+/**
+ * The dashboard block: the app shell with a row of stats, two panels and a
+ * table. The numbers are placeholders; swap each array for your data.
+ *
+ * The table is a DataTable with typed columns, so it needs no render
+ * functions: the status is a Badge in its option's role, the owner a
+ * person, the due date a date, each sorting and filtering by its type.
+ * Plain column objects can pass from this server page to the client
+ * table, which a render function could not. TableToolbar is its control
+ * bar: search, filters, sort and the column panel.
+ */
+
+import { Button } from 'rift-ds/components/Button/Button';
+import { Panel } from 'rift-ds/components/Panel/Panel';
+import { ProgressBar } from 'rift-ds/components/ProgressBar/ProgressBar';
+import { Stat } from 'rift-ds/components/Stat/Stat';
+import { DataTable, type DataTableColumn, type DataTableRow } from 'rift-ds/components/DataTable/DataTable';
+import { TableToolbar } from 'rift-ds/components/TableToolbar/TableToolbar';
+import { AppShell } from '../../components/blocks/AppShell';
+import styles from './page.module.css';
+
+const STATS = [
+  { label: 'Open tasks', value: '128', delta: '+12', trend: 'up' },
+  { label: 'Due this week', value: '24', delta: '-3', trend: 'down' },
+  { label: 'Completed', value: '342', delta: '+18%', trend: 'up' },
+  { label: 'Avg. cycle time', value: '3.2d', delta: '-0.4d', trend: 'up' },
+] as const;
+
+const PROGRESS = [
+  { name: 'Website refresh', done: 72 },
+  { name: 'Mobile app', done: 45 },
+  { name: 'Billing migration', done: 88 },
+  { name: 'Onboarding emails', done: 20 },
+];
+
+const ACTIVITY = [
+  { who: 'Priya', what: 'closed', item: 'Fix login redirect', when: '10 min ago' },
+  { who: 'Sam', what: 'commented on', item: 'Pricing page copy', when: '1 hr ago' },
+  { who: 'Jordan', what: 'created', item: 'Q4 roadmap review', when: '3 hr ago' },
+  { who: 'Lee', what: 'moved', item: 'Invoice export to Review', when: 'Yesterday' },
+];
+
+const STATUSES = [
+  { value: 'Planned', label: 'Planned', status: 'neutral' },
+  { value: 'On track', label: 'On track', status: 'positive' },
+  { value: 'At risk', label: 'At risk', status: 'warning' },
+  { value: 'Off track', label: 'Off track', status: 'error' },
+] as const;
+
+const COLUMNS: DataTableColumn[] = [
+  { key: 'project', header: 'Project', rowHeader: true, sortable: true },
+  { key: 'owner', header: 'Owner', type: 'person', sortable: true },
+  { key: 'status', header: 'Status', type: 'status', sortable: true, options: [...STATUSES] },
+  { key: 'due', header: 'Due', type: 'date', sortable: true },
+];
+
+const PROJECTS = [
+  { project: 'Website refresh', owner: 'Priya Shah', status: 'On track', due: '2026-11-14' },
+  { project: 'Mobile app', owner: 'Sam Rivera', status: 'At risk', due: '2026-12-02' },
+  { project: 'Billing migration', owner: 'Jordan Lee', status: 'On track', due: '2026-11-08' },
+  { project: 'Onboarding emails', owner: 'Lee Chen', status: 'Off track', due: '2026-10-30' },
+  { project: 'Partner portal', owner: 'Alex Morgan', status: 'Planned', due: '2027-01-15' },
+];
+
+const ROWS: DataTableRow[] = PROJECTS.map((p) => ({ id: p.project, values: p }));
+
+export default function DashboardPage() {
+  return (
+    <AppShell
+      activeKey="dashboard"
+      breadcrumb={[{ label: 'Workspace', href: '#' }, { label: 'Dashboard' }]}
+      title="Dashboard"
+      actions={
+        <>
+          <Button variant="secondary" size="compact" label="Export" iconLeft="download" />
+          <Button variant="primary" size="compact" label="New task" iconLeft="add" />
+        </>
+      }
+    >
+      <div className={styles.stats}>
+        {STATS.map((stat) => (
+          <Panel key={stat.label}>
+            <Stat
+              label={stat.label}
+              value={stat.value}
+              delta={stat.delta}
+              trend={stat.trend}
+              deltaPlacement="inline"
+            />
+          </Panel>
+        ))}
+      </div>
+
+      <div className={styles.panels}>
+        <Panel>
+          <h2 className={styles.panelTitle}>Progress by project</h2>
+          <ul className={styles.list}>
+            {PROGRESS.map((row) => (
+              <li key={row.name} className={styles.progressRow}>
+                <div className={styles.progressMeta}>
+                  <span>{row.name}</span>
+                  <span className={styles.muted}>{row.done}%</span>
+                </div>
+                <ProgressBar value={row.done} size="compact" ariaLabel={`${row.name} progress`} />
+              </li>
+            ))}
+          </ul>
+        </Panel>
+
+        <Panel>
+          <h2 className={styles.panelTitle}>Recent activity</h2>
+          <ul className={styles.list}>
+            {ACTIVITY.map((row) => (
+              <li key={row.item} className={styles.activityRow}>
+                <span>
+                  <strong className={styles.strong}>{row.who}</strong> {row.what} {row.item}
+                </span>
+                <span className={styles.muted}>{row.when}</span>
+              </li>
+            ))}
+          </ul>
+        </Panel>
+      </div>
+
+      {/* The table sits on the page, not in a Panel: it brings its own bordered frame. */}
+      <section className={styles.tableSection} aria-labelledby="projects-title">
+        <h2 id="projects-title" className={styles.panelTitle}>
+          Projects
+        </h2>
+        <DataTable
+          columns={COLUMNS}
+          rows={ROWS}
+          caption="Projects"
+          defaultSort={{ key: 'due', direction: 'asc' }}
+          phoneLayout="stack"
+          toolbar={<TableToolbar />}
+        />
+      </section>
+    </AppShell>
+  );
+}

package/bin/templates/blocks/app/sign-in/page.module.css

@@ -0,0 +1,91 @@
+/* A card centred on the page at every width: 400px wide on a desktop, the
+   full width less the gutter on a phone, where it drops its fill and sits
+   straight on the page. */
+
+.page {
+  min-height: 100dvh;
+  display: grid;
+  place-items: center;
+  padding: var(--padding-1000) var(--padding-500);
+  background-color: var(--color-bg-page-primary);
+}
+
+.card {
+  width: 100%;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-500);
+  padding: var(--padding-1000);
+  border-radius: var(--radius-600);
+  background-color: var(--color-bg-container-primary);
+}
+
+.intro {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200);
+}
+
+.product {
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  color: var(--color-text-primary);
+}
+
+.title {
+  margin: 0;
+  font-family: var(--font-heading-2-family);
+  font-size: var(--font-heading-2-size);
+  font-weight: var(--font-heading-2-weight);
+  line-height: var(--font-heading-2-line-height);
+  letter-spacing: var(--font-heading-2-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.subhead,
+.footer {
+  margin: 0;
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-secondary);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-400);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--gap-200);
+}
+
+.full {
+  width: 100%;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-100);
+}
+
+@media (max-width: 600px) {
+  .page {
+    place-items: start center;
+    padding: var(--padding-1000) var(--padding-400);
+  }
+
+  .card {
+    padding: 0;
+    background-color: transparent;
+  }
+}