bedrock-flows 0.7.1

package/template/apps/worker/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": false,
+    "declaration": false,
+    "noEmit": true,
+    "lib": ["ES2023"],
+    "types": ["@cloudflare/workers-types"]
+  },
+  "include": ["src", "../../bedrock.config.ts"]
+}

package/template/apps/worker/wrangler.jsonc

@@ -0,0 +1,29 @@
+{
+  "name": "bedrock-flows-demo",
+  "main": "src/index.ts",
+  "compatibility_date": "2025-09-17",
+  "compatibility_flags": ["nodejs_compat"],
+  // Static build output served via the ASSETS binding (Workers, not Pages).
+  // run_worker_first: asset matches must NOT bypass the worker — the fetch
+  // handler enforces the auth gate on design content (/p, /ds, /t, manifests)
+  // before falling through to env.ASSETS.fetch at the end.
+  "assets": { "directory": "../../dist", "binding": "ASSETS", "run_worker_first": true },
+  "kv_namespaces": [
+    { "binding": "WF_COMMENTS", "id": "a5134289e05f41b995527e0fb95f812c" },
+    { "binding": "SPEC_KV", "id": "57405365bd2948709e6cc7da74e8512a" }
+  ],
+  // Better Auth user store (also backs @mention → email resolution).
+  // ⚠️ REQUIRED per project: create a FRESH D1 and set BOTH fields below. NEVER
+  // point two deployments at the same database — users/sessions would leak across
+  // clients (e.g. two dashboards showing identical user lists). `bedrock-flows setup` creates + wires these automatically; for a manual deploy:
+  //   wrangler d1 create <name>-auth
+  //   wrangler d1 export <some-migrated-db> --remote --no-data --output schema.sql
+  //   wrangler d1 execute <name>-auth --remote --file schema.sql
+  "d1_databases": [
+    {
+      "binding": "AUTH_DB",
+      "database_name": "bedrock-flows-demo-auth",
+      "database_id": "d0fed515-f1e3-40be-b145-a87a2400582b"
+    }
+  ]
+}

package/template/bedrock.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from '@obra-studio/bedrock-flows/config'
+
+export default defineConfig({
+  // The product is "Bedrock Flows" ("Bedrock 3" is the internal platform codename).
+  projectName: 'Bedrock Flows',
+  defaultDsVersion: 'starter-v1',
+  // mobileDsVersion: 'starter-mobile-v1',
+  modules: {
+    designSystem: { enabled: true },
+    flows: { enabled: true, specSource: 'google-docs' },
+    deliveries: { enabled: true },
+    // This deployment's own worker — every project sets its own prodOrigin
+    // (a child must never point at another project's worker/KV).
+    commenting: { enabled: true, prodOrigin: 'https://bedrock-flows-demo.johan-457.workers.dev' },
+  },
+})

package/template/design-system/README.md

@@ -0,0 +1,97 @@
+# Design System
+
+This folder holds every design-system version that prototypes in this repo can render against. A "version" here is a snapshot of tokens + components frozen under a single name; prototypes reference one by name in their `meta.json`.
+
+## Folder layout
+
+```
+design-system/
+  <name>/                          one folder per DS version
+    global.css                     tokens + base + uncomponentized rules
+    style.css                      GENERATED bundle — do not edit
+    assets/                        fonts, logos, avatars, marker shapes, etc.
+    foundations/                   non-interactive references
+      colors/  icons/  surfaces/  typography/
+    components/                    interactive UI
+      <component-name>/
+        component.css              source of truth for this component's CSS
+        macro.njk                  Nunjucks macro — emits canonical markup
+        variants.json              prop sets the variant generator renders
+        <variant>.html             GENERATED standalone variant — do not edit
+        ...
+    utilities/                     layout primitives (app-shell, stack)
+      <utility-name>/
+        component.css
+        macro.njk                  optional
+        variants.json              optional
+        <variant>.html             generated
+```
+
+## Naming the version folder
+
+The folder name is an arbitrary string. Convention is `<theme>-<version>`:
+
+- `ziptility-v1` — canonical Ziptility DS (orange brand, Archivo)
+- `jungle-v1` — experimental theme (blue brand, Inter) used to verify version switching
+- `ziptility-native-mobile-v1` — (future) native-feel patterns for RN flows
+- `ziptility-v2` — (future) successor to ziptility-v1 once it's frozen
+
+A prototype declares which one it consumes via `meta.json`:
+
+```json
+{ "id": "F-001", "name": "...", "dsVersion": "ziptility-v1" }
+```
+
+URLs follow the folder name: `/ds/ziptility-v1/storybook/`, `/ds/jungle-v1/style.css`, etc.
+
+## Per-component contract
+
+Every entry in `components/` and `utilities/` follows the same shape:
+
+| File | Hand-authored? | Purpose |
+|---|---|---|
+| `component.css` | yes | The component's source-of-truth styles. Concatenated into `style.css` by the generator. |
+| `macro.njk` | yes | Nunjucks macro(s) that emit canonical markup. Pages and variant HTML both import from here. |
+| `variants.json` | yes | Declares named prop sets — `{ "macro": "<name>", "variants": [{ filename, name, props }, ...] }`. |
+| `<variant>.html` | **GENERATED** | Standalone HTML doc per variant. Regenerated from the macro by `scripts/generate-variants.mjs`. |
+
+Foundations (colors, typography, surfaces, icons) are showcase-only — they may have handwritten `*.html` files without `macro.njk` / `variants.json`. The generator skips folders without both.
+
+## Build pipeline
+
+`npm run build` runs:
+
+1. **`generate-variants.mjs`** — renders each component's macro with each variant's prop set, writes `<variant>.html`.
+2. **`generate-stories.mjs`** — concatenates `global.css` + every `component.css` into `style.css`; writes one Storybook CSF file per component (one story per variant) into `.stories-generated/<name>/`.
+3. **`build-storybooks.mjs`** — invokes `storybook build` once per version, output to `dist/ds/<name>/storybook/`.
+
+Editing any `component.css` / `macro.njk` / `variants.json` triggers a regeneration on the next build. The dev server's middleware also recompiles `/ds/<name>/style.css` on every request, so component-CSS edits flow live.
+
+## Adding a new DS version
+
+```bash
+cp -r design-system/ziptility-v1 design-system/<new-name>
+# edit <new-name>/global.css to swap tokens (brand color, fonts, etc.)
+# component.css / macro.njk / variants.json carry over unchanged
+npm run build
+```
+
+The dashboard, storybook builder, and bundle compiler auto-detect the new folder.
+
+## Adding a new component
+
+```
+design-system/<version>/components/<new-component>/
+  component.css              the rules
+  macro.njk                  define a macro that emits canonical markup
+  variants.json              { "macro": "...", "variants": [...] }
+```
+
+The generator picks it up next build. Don't author `<variant>.html` by hand — it'll be wiped and regenerated. Filenames in `variants.json` should match what consumers expect (kebab-case, stable URLs).
+
+## Don't
+
+- **Edit a generated `<variant>.html` file.** It's overwritten on every build. Edit `macro.njk` or `variants.json` instead.
+- **Edit `style.css` directly.** It's generated.
+- **Add story-scaffolding CSS** (`.story-grid`, `.frame-demo`) to `component.css`. That's storybook layout, not the component.
+- **Reach across versions.** Components in `ziptility-v1/` should never reference paths inside `jungle-v1/` (or vice versa). Each version is a self-contained snapshot.

package/template/design-system/starter-v1/components/button/component.css

@@ -0,0 +1,42 @@
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-fg);
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.2;
+  cursor: pointer;
+  text-decoration: none;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+
+.btn:hover { border-color: var(--color-border); }
+
+.btn--primary {
+  background: var(--color-accent);
+  color: var(--color-accent-fg);
+}
+.btn--primary:hover { background: var(--color-accent-hover); }
+
+.btn--ghost {
+  background: transparent;
+  border-color: var(--color-border);
+}
+
+.btn--danger {
+  background: var(--color-danger);
+  color: #ffffff;
+}
+
+.btn[disabled],
+.btn[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/template/design-system/starter-v1/components/button/danger.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<!--
+  AUTO-GENERATED by @bedrock-flows/design-system generateVariants — DO NOT EDIT.
+  Source of truth: ./macro.njk + ./variants.json
+-->
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Danger</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;900&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@24,400,0..1,0&display=swap" />
+  <link rel="stylesheet" href="../../global.css" />
+  <link rel="stylesheet" href="component.css" />
+</head>
+<body>
+<button
+  class="btn" type="button">Button</button>
+</body>
+</html>

package/template/design-system/starter-v1/components/button/default.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<!--
+  AUTO-GENERATED by @bedrock-flows/design-system generateVariants — DO NOT EDIT.
+  Source of truth: ./macro.njk + ./variants.json
+-->
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Default</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;900&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@24,400,0..1,0&display=swap" />
+  <link rel="stylesheet" href="../../global.css" />
+  <link rel="stylesheet" href="component.css" />
+</head>
+<body>
+<button
+  class="btn" type="button">Button</button>
+</body>
+</html>

package/template/design-system/starter-v1/components/button/disabled.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<!--
+  AUTO-GENERATED by @bedrock-flows/design-system generateVariants — DO NOT EDIT.
+  Source of truth: ./macro.njk + ./variants.json
+-->
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Disabled</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;900&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@24,400,0..1,0&display=swap" />
+  <link rel="stylesheet" href="../../global.css" />
+  <link rel="stylesheet" href="component.css" />
+</head>
+<body>
+<button
+  class="btn" type="button">Button</button>
+</body>
+</html>

package/template/design-system/starter-v1/components/button/ghost.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<!--
+  AUTO-GENERATED by @bedrock-flows/design-system generateVariants — DO NOT EDIT.
+  Source of truth: ./macro.njk + ./variants.json
+-->
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Ghost</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;900&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@24,400,0..1,0&display=swap" />
+  <link rel="stylesheet" href="../../global.css" />
+  <link rel="stylesheet" href="component.css" />
+</head>
+<body>
+<button
+  class="btn" type="button">Button</button>
+</body>
+</html>

package/template/design-system/starter-v1/components/button/macro.njk

@@ -0,0 +1,14 @@
+{% macro button(props={}) %}
+{%- set variant = props.variant or 'default' -%}
+{%- set tag = props.href and 'a' or 'button' -%}
+{%- set classes = ['btn'] -%}
+{%- if variant != 'default' -%}
+  {%- set classes = classes.concat(['btn--' + variant]) -%}
+{%- endif -%}
+<{{ tag }}
+  class="{{ classes | join(' ') }}"
+  {%- if tag == 'a' %} href="{{ props.href }}"{% endif -%}
+  {%- if tag == 'button' %} type="{{ props.type or 'button' }}"{% endif -%}
+  {%- if props.disabled %} disabled aria-disabled="true"{% endif -%}
+>{{ props.label or 'Button' }}</{{ tag }}>
+{% endmacro %}

package/template/design-system/starter-v1/components/button/primary.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<!--
+  AUTO-GENERATED by @bedrock-flows/design-system generateVariants — DO NOT EDIT.
+  Source of truth: ./macro.njk + ./variants.json
+-->
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Primary</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;900&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@24,400,0..1,0&display=swap" />
+  <link rel="stylesheet" href="../../global.css" />
+  <link rel="stylesheet" href="component.css" />
+</head>
+<body>
+<button
+  class="btn" type="button">Button</button>
+</body>
+</html>

package/template/design-system/starter-v1/components/button/variants.json

@@ -0,0 +1,30 @@
+{
+  "macro": "button",
+  "variants": [
+    {
+      "name": "Default",
+      "filename": "default",
+      "props": { "label": "Button" }
+    },
+    {
+      "name": "Primary",
+      "filename": "primary",
+      "props": { "label": "Continue", "variant": "primary" }
+    },
+    {
+      "name": "Ghost",
+      "filename": "ghost",
+      "props": { "label": "Cancel", "variant": "ghost" }
+    },
+    {
+      "name": "Danger",
+      "filename": "danger",
+      "props": { "label": "Delete", "variant": "danger" }
+    },
+    {
+      "name": "Disabled",
+      "filename": "disabled",
+      "props": { "label": "Pending…", "variant": "primary", "disabled": true }
+    }
+  ]
+}

package/template/design-system/starter-v1/ds.json

@@ -0,0 +1,3 @@
+{
+  "intendedViewport": { "min": { "w": 375, "h": 812 }, "max": { "w": 1440, "h": 900 } }
+}

package/template/design-system/starter-v1/global.css

@@ -0,0 +1,52 @@
+/*
+ * starter-v1 — minimal token + base layer for Bedrock Flows.
+ *
+ * Replace with your own design system. This file ships as proof that the
+ * Storybook + per-component generation pipeline works against an empty
+ * canvas. Token names, palette, and typography are deliberately neutral.
+ */
+
+:root {
+  --color-bg: #ffffff;
+  --color-fg: #0f172a;
+  --color-fg-muted: #475569;
+  --color-border: #e2e8f0;
+  --color-surface: #f8fafc;
+
+  --color-accent: #2563eb;
+  --color-accent-fg: #ffffff;
+  --color-accent-hover: #1d4ed8;
+
+  --color-danger: #dc2626;
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
+  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
+}
+
+:root[data-theme='dark'] {
+  --color-bg: #0b1220;
+  --color-fg: #e2e8f0;
+  --color-fg-muted: #94a3b8;
+  --color-border: #1e293b;
+  --color-surface: #111827;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  background: var(--color-bg);
+  color: var(--color-fg);
+  font-family: var(--font-sans);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+a { color: var(--color-accent); }

package/template/design-system/starter-v1/style.css

@@ -0,0 +1,107 @@
+/*
+ * AUTO-GENERATED bundle — do not edit.
+ * global.css concatenated with every component.css across
+ * foundations/, components/, and utilities/. Source of truth
+ * for component styles lives in each component folder.
+ */
+
+/* === global.css === */
+
+/*
+ * starter-v1 — minimal token + base layer for Bedrock Flows.
+ *
+ * Replace with your own design system. This file ships as proof that the
+ * Storybook + per-component generation pipeline works against an empty
+ * canvas. Token names, palette, and typography are deliberately neutral.
+ */
+
+:root {
+  --color-bg: #ffffff;
+  --color-fg: #0f172a;
+  --color-fg-muted: #475569;
+  --color-border: #e2e8f0;
+  --color-surface: #f8fafc;
+
+  --color-accent: #2563eb;
+  --color-accent-fg: #ffffff;
+  --color-accent-hover: #1d4ed8;
+
+  --color-danger: #dc2626;
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+
+  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
+  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
+}
+
+:root[data-theme='dark'] {
+  --color-bg: #0b1220;
+  --color-fg: #e2e8f0;
+  --color-fg-muted: #94a3b8;
+  --color-border: #1e293b;
+  --color-surface: #111827;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  background: var(--color-bg);
+  color: var(--color-fg);
+  font-family: var(--font-sans);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+a { color: var(--color-accent); }
+
+
+/* === components/button/component.css === */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-fg);
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.2;
+  cursor: pointer;
+  text-decoration: none;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+
+.btn:hover { border-color: var(--color-border); }
+
+.btn--primary {
+  background: var(--color-accent);
+  color: var(--color-accent-fg);
+}
+.btn--primary:hover { background: var(--color-accent-hover); }
+
+.btn--ghost {
+  background: transparent;
+  border-color: var(--color-border);
+}
+
+.btn--danger {
+  background: var(--color-danger);
+  color: #ffffff;
+}
+
+.btn[disabled],
+.btn[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/template/gitignore

@@ -0,0 +1,8 @@
+node_modules/
+dist/
+.stories-generated/
+.wrangler/
+*.log
+.dev.vars
+.DS_Store
+*.tsbuildinfo

package/template/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "bedrock-flows-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "description": "A Bedrock Flows project — wireflow prototypes + versioned design systems on the published platform.",
+  "workspaces": [
+    "apps/*"
+  ],
+  "scripts": {
+    "build": "npm run build:stories && npm run build -w @bedrock-flows/dashboard && npm run build:storybook",
+    "build:variants": "node scripts/generate-variants.mjs",
+    "build:stories": "node scripts/generate-variants.mjs && node scripts/generate-stories.mjs",
+    "build:storybook": "node scripts/build-storybooks.mjs",
+    "dev": "node scripts/dev-setup.mjs && npm run build:stories && npm run build:storybook && concurrently -k -n worker,app -c blue,green \"npm run dev -w @bedrock-flows/worker\" \"npm run dev -w @bedrock-flows/dashboard\"",
+    "dev:dashboard": "npm run dev -w @bedrock-flows/dashboard",
+    "dev:storybook": "npm run build:stories && npm run build:storybook",
+    "dev:worker": "npm run dev -w @bedrock-flows/worker",
+    "deploy": "npm run build && npm run deploy -w @bedrock-flows/worker",
+    "typecheck": "npm run typecheck --workspaces --if-present"
+  },
+  "dependencies": {
+    "@obra-studio/bedrock-flows": "__BEDROCK_FLOWS_VERSION__"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/html-vite": "^10.3.6",
+    "@types/node": "^24.12.2",
+    "concurrently": "^9.1.2",
+    "storybook": "^10.3.6",
+    "typescript": "~6.0.2",
+    "vite": "^8.0.10"
+  },
+  "overrides": {
+    "better-auth": "1.6.18",
+    "@better-auth/kysely-adapter": "1.6.18",
+    "@better-auth/infra": "0.2.14",
+    "kysely": "0.29.2",
+    "kysely-d1": "0.4.0"
+  }
+}

package/template/prototypes/F-001-hello/1-welcome.njk

@@ -0,0 +1,30 @@
+{% extends '_shared/screen.njk' %}
+{% set stepLabel = 'Welcome' %}
+{% set stepNum = 1 %}
+{% set stepTotal = 3 %}
+{% set wfStart = true %}
+
+{% block styles %}
+.hello {
+  max-width: 480px;
+  margin: 80px auto;
+  padding: 32px;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  text-align: center;
+  font-family: var(--font-sans);
+  color: var(--color-fg);
+  box-shadow: var(--shadow-sm);
+}
+.hello h1 { margin: 0 0 12px; font-size: 22px; font-weight: 600; }
+.hello p { margin: 0 0 24px; color: var(--color-fg-muted); }
+{% endblock %}
+
+{% block content %}
+<section class="hello">
+  <h1>Hello world</h1>
+  <p>This is the welcome screen of the starter prototype. Step through to see the flow.</p>
+  <a class="btn btn--primary" href="2-form">Get started</a>
+</section>
+{% endblock %}

package/template/prototypes/F-001-hello/2-form.njk

@@ -0,0 +1,46 @@
+{% extends '_shared/screen.njk' %}
+{% set stepLabel = 'Tell us your name' %}
+{% set stepNum = 2 %}
+{% set stepTotal = 3 %}
+
+{% block styles %}
+.hello {
+  max-width: 480px;
+  margin: 80px auto;
+  padding: 32px;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  font-family: var(--font-sans);
+  color: var(--color-fg);
+  box-shadow: var(--shadow-sm);
+}
+.hello h1 { margin: 0 0 16px; font-size: 20px; font-weight: 600; }
+.hello label { display: block; font-size: 13px; color: var(--color-fg-muted); margin-bottom: 6px; }
+.hello input {
+  width: 100%;
+  padding: 8px 12px;
+  font-family: inherit;
+  font-size: 15px;
+  color: var(--color-fg);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  margin-bottom: 20px;
+}
+.hello .row { display: flex; gap: 8px; justify-content: flex-end; }
+{% endblock %}
+
+{% block content %}
+<section class="hello">
+  <h1>What's your name?</h1>
+  <form action="3-done" method="get">
+    <label for="name">Name</label>
+    <input id="name" name="name" type="text" placeholder="Ada Lovelace" />
+    <div class="row">
+      <a class="btn btn--ghost" href="1-welcome">Back</a>
+      <button class="btn btn--primary" type="submit">Continue</button>
+    </div>
+  </form>
+</section>
+{% endblock %}