create-patties 0.0.11 → 0.0.12

package/templates/_shared/patties-patterns.md

@@ -0,0 +1,105 @@
+<!--
+  Canonical source for the /patties pattern catalog (cli spec 19).
+  Both the Claude skill (.claude/skills/patties/SKILL.md) and the Codex rule
+  (.codex/rules/patties-patterns.md) are generated from this body by
+  scripts/gen-patties-skill.ts. Edit THIS file, then run
+  `bun run generate:patties-skill`. Do not edit the generated files by hand.
+-->
+
+## When to use
+
+Use this when the user wants to **add a Patties UI component** or **scaffold a
+feature pattern** (auth + RBAC, a CRM, a task board, a pivot table, a
+dashboard). It covers scaffolding only — for running, building, deploying, or
+managing secrets, use the `patties-cli` skill instead.
+
+Two capabilities:
+
+1. **Add a UI component** — a thin wrapper over the deterministic catalog.
+2. **Scaffold a feature pattern** — instruction-driven: you generate the files,
+   adapting names/fields/copy to the user's domain.
+
+## Add a component
+
+The component catalog is deterministic — never hand-author component source; the
+registry is the source of truth.
+
+1. If `app/components/ui/_internal/` does not exist, the catalog isn't
+   initialized — run `patties ui init` first (pass `--theme <neutral|slate|stone|zinc>`
+   to match the project).
+2. Run `patties add <name>` (preview first with `patties view <name>` or
+   `patties add --view <name>` if the user wants to see the source).
+3. Import the stamped component from `app/components/ui/<name>.tsx` and use it.
+
+`patties add` edits `package.json` (it never runs an install) and stamps source
+into `app/components/ui/`. After adding, remind the user to run `bun install` if
+new peer deps were added.
+
+## Scaffold a pattern
+
+Pick the pattern from the catalog, `patties add` its components first, then
+generate the listed files — adapting entity names, fields, columns, and copy to
+the user's stated domain (e.g. "a CRM for veterinary clinics").
+
+| Pattern | Goal | `patties add` components | Generated files (under `app/`) |
+|---|---|---|---|
+| **auth-rbac** | Login / logout + role-gated route | `form`, `input`, `label`, `button`, `card` | `routes/login.tsx`, `routes/logout.ts`, `routes/admin.tsx` (role-gated), `lib/auth.ts` (cookie session over mock users), `lib/rbac.ts` (role guard), `lib/mock-users.ts` |
+| **crm** | Contacts list + detail / edit | `data-table`, `dialog`, `form`, `input`, `button`, `badge` | `routes/contacts/index.tsx` (table), `routes/contacts/[id].tsx` (detail), `islands/ContactForm.tsx`, `lib/mock-contacts.ts` |
+| **task** | Task board / list | `card`, `checkbox`, `badge`, `dialog`, `button` | `routes/tasks.tsx`, `islands/TaskBoard.tsx` (columns + toggle), `lib/mock-tasks.ts` |
+| **pivot** | Group-by / pivot over rows | `table`, `select`, `card` | `routes/pivot.tsx`, `islands/PivotTable.tsx` (pick row/col/measure), `lib/mock-rows.ts` |
+| **dashboard** | Metrics overview | `card`, `chart`, `separator`, `sidebar` | `routes/dashboard.tsx` (cards + chart + sidebar shell), `lib/mock-metrics.ts` |
+
+Per-pattern recipes:
+
+- **auth-rbac** — sessions are a signed cookie over the mock user list; the RBAC
+  guard is a small helper the protected route calls in its handler. Make the
+  mock-only nature loud: a banner on the login page and a TODO at the top of the
+  auth module. Real auth needs persistence (a future DB spec).
+- **crm** — the list uses `data-table` over `mock-contacts`; create / edit
+  happens in a `dialog` driven by a `form` island. The detail route reads the
+  same mock store by id.
+- **task** — the board is an island holding `useState` columns; toggling a
+  `checkbox` moves a task between done / not-done. No persistence — state resets
+  on reload (call this out).
+- **pivot** — an island lets the user pick a row dimension, a column dimension,
+  and a numeric measure from `select`s, then renders the aggregated `table`.
+  Aggregation runs client-side over the mock rows.
+- **dashboard** — a static SSR shell (`sidebar` is `subtree`, `chart` hydrates)
+  with metric `card`s fed by `mock-metrics`; the chart is the one interactive
+  island.
+
+Always `patties add` the listed components (initializing the catalog first if
+needed) before generating files that import them. Only reference components that
+exist in the shipped registry with `status: "completed"`.
+
+## Depth contract: UI + mock data
+
+Every pattern is scaffolded at **"UI + mock data"** depth:
+
+- **In scope:** SSR routes / pages, islands where interactivity is needed,
+  stamped Patties UI components, and a typed in-memory seed in
+  `app/lib/mock-<entity>.ts` that the pages read from.
+- **Out of scope:** `bun:sqlite`, migrations, a real persistence or auth
+  backend, network calls. The pattern *shows the shape*; the developer swaps the
+  mock data for a real source later.
+- Every generated `mock-*` module starts with `// TODO: replace mock data with a
+  real source`, and the route / page carries a short note marking the mock
+  boundary.
+
+Do not generate a database layer, migrations, or a real auth/network backend
+from this skill — that is deferred to a future spec.
+
+## Conventions
+
+- Pages live under `app/routes/*.tsx` (default-export a React component); API
+  handlers under `app/routes/api/*.ts` (named `GET`/`POST`/… returning a
+  `Response`, e.g. via `ctx.json()`). Dynamic segments use `[id]`.
+- Islands (interactive client components) live under `app/islands/` and are
+  wrapped at the use site in `<Island name="…">…</Island>` from `patties/render`.
+- Mock data lives in `app/lib/mock-<entity>.ts`, typed, with the TODO marker.
+- Never re-author component source — stamp from the catalog and import.
+
+## See also
+
+- The `patties-cli` skill — running, building, deploying the app.
+- cli specs 11–15 (Patties UI: `ui init`, `add`, `view`, `update`, registries).

package/templates/default/README-template.md

@@ -3,80 +3,86 @@
 Built with [Patties](https://github.com/bihaviour-ai/bun-patties-framework) — a
 Bun-native full-stack meta-framework.
 
-<!-- if:scaffold=demo -->
+<!-- if:type=fullstack -->
 ## What you got
 
-An interactive todo demo:
+A full-stack Patties app:
 
-- `app/routes/index.tsx` — server-rendered page that mounts the island.
-- `app/islands/TodoApp.tsx` — `useState`-based todo list, hydrated in the
-  browser.
+- `app/routes/index.tsx` — server-rendered page that mounts an island.
+- `app/islands/TodoApp.tsx` — `useState`-based todo list, hydrated in the browser.
+- `app/routes/api/health.ts` — a JSON API route (`GET /api/health` → `{ ok: true }`).
 - `app/server.ts` — dev entry that wires the router into `Bun.serve`.
+<!-- /if -->
+<!-- if:type=frontend -->
+## What you got
 
-## Run it
-
-```sh
-bun install      # if you used --no-install
-bunx patties dev # → http://localhost:3000
-```
-
-Dev mode SSRs the page and hydrates the island, so the todo buttons work
-immediately. HMR reloads the browser when you edit a route or island.
+A frontend Patties app:
 
-## Try editing
+- `app/routes/index.tsx` — server-rendered page that mounts an island.
+- `app/islands/TodoApp.tsx` — `useState`-based todo list, hydrated in the browser.
+- `app/server.ts` — dev entry that wires the router into `Bun.serve`.
+<!-- /if -->
+<!-- if:type=backend -->
+## What you got
 
-1. Open `app/routes/index.tsx`, change the heading text, save. The browser
-   reloads (HMR).
-2. Open `app/islands/TodoApp.tsx`, change the initial todo list or input
-   placeholder, save, and try it — the bundle rebuilds on the next request.
+A backend Patties app — API routes, no React UI:
 
-## Remove the demo when you're ready
+- `app/routes/api/health.ts` — `GET /api/health` → `{ ok: true }`.
+- `app/routes/api/todos.ts` — a sample in-memory `GET` / `POST` resource.
+- `app/server.ts` — dev entry that wires the router into `Bun.serve`.
+<!-- /if -->
 
-The todo demo exists to show you state hydration. When you start your real
-app, delete it:
+## Run it
 
 ```sh
-rm app/islands/TodoApp.tsx
+bun install      # if you used --no-install
+<!-- if:monorepo=yes -->bun --filter {{app_name}} dev # → http://localhost:3000<!-- /if -->
+<!-- if:monorepo=no -->bunx patties dev # → http://localhost:3000<!-- /if -->
 ```
 
-Then replace `app/routes/index.tsx` with whatever your landing page should
-be — a minimal version:
+<!-- if:ui=yes -->
+## Patties UI
 
-```tsx
-export default function Index(): JSX.Element {
-	return <main><h1>Hello from {{name}}</h1></main>;
-}
-```
+Styled components are stamped into `app/components/ui/` (`button`, `card`,
+`input`, `label`) with shared helpers in `app/components/ui/_internal/` and
+design tokens in `app/styles/tokens.css`.
 
-If you don't need any islands at all, you can also delete the empty
-`app/islands/` directory. You can re-scaffold without the demo at any time
-using `bunx create-patties@latest <new-name> --blank`.
-<!-- /if -->
-<!-- if:scaffold=blank -->
-## What you got
+Add more components with `patties add <component>` (e.g. `patties add dialog`),
+preview first with `patties view <component>`, or ask your coding agent — see
+the agent section below.
 
-A minimal hello-world Patties app:
+### Styling
 
-- `app/routes/index.tsx` — server-rendered landing page.
-- `app/server.ts` — dev entry that wires the router into `Bun.serve`.
-
-## Run it
+Patties does not bundle Tailwind for you. `app/styles/app.css` is pre-wired
+(`@import "tailwindcss"` + the token mapping). Compile it with the Tailwind v4
+CLI and include the output from your page `<head>`:
 
 ```sh
-bun install      # if you used --no-install
-bunx patties dev # → http://localhost:3000
+bunx @tailwindcss/cli -i app/styles/app.css -o app/styles/out.css --watch
 ```
-
-## Add your first interactive feature
-
-Create `app/islands/` and drop in a component that uses `useState` or
-`useEffect`. Import it from a route file under `app/routes/` and wrap the
-use site in `<Island name="MyIsland">…</Island>` (from `patties/render`)
-so the SSR markers are emitted and the client runtime hydrates it.
 <!-- /if -->
 
 ## Project layout
 
+<!-- if:monorepo=yes -->
+```
+apps/
+  {{app_name}}/
+    app/
+      routes/        # filesystem-routed pages and API handlers
+      islands/       # interactive client components
+      server.ts      # dev entry — wires the router into Bun.serve
+    patties.config.ts
+    package.json
+packages/            # shared workspace packages
+package.json         # Bun workspace root
+```
+
+This is a Bun workspace. Run app scripts with `bun --filter <app> <script>`
+(e.g. `bun --filter {{app_name}} build`) or from inside `apps/{{app_name}}/`.
+Add more apps under `apps/` and shared code under `packages/`.
+<!-- /if -->
+<!-- if:monorepo=no -->
 ```
 app/
   routes/        # filesystem-routed pages and API handlers
@@ -86,19 +92,28 @@ patties.config.ts
 package.json
 tsconfig.json
 ```
+<!-- /if -->
 
 ## Build for production
 
 ```sh
-bun run build
+<!-- if:monorepo=yes -->bun --filter {{app_name}} run build<!-- /if -->
+<!-- if:monorepo=no -->bun run build<!-- /if -->
 ```
 
-Build artifacts land in `.patties/`. Run the server bundle with:
+Build artifacts land in `.patties/`. Run the server bundle with
+`bun .patties/server/server-entry.js`.
+
+<!-- if:target=container -->
+## Deploy — container
+
+A `Dockerfile` (+ `.dockerignore`) is included for the `bun` runtime:
 
 ```sh
-bun .patties/server/server-entry.js
+docker build -t {{name}} .
+docker run -p 3000:3000 {{name}}
 ```
-
+<!-- /if -->
 <!-- if:deploy=cloudflare -->
 ## Deploy
 
@@ -123,33 +138,32 @@ This project is configured for **Deno Deploy**. See the
 This project is configured for **Netlify Edge**. See the
 `@patties/deploy-netlify` plugin docs for the next steps.
 <!-- /if -->
-<!-- if:deploy=bun -->
-## Deploy
-
-This project ships as a standalone Bun bundle. Run `bun run build` then
-deploy the contents of `.patties/` to any host that runs Bun.
-<!-- /if -->
 
 <!-- if:agent=claude -->
 ## Claude Code is set up
 
-`CLAUDE.md` at the project root describes the framework conventions for Claude
-Code. `.claude/settings.json` allow-lists the commands you'll typically need
-(`bun`, `bunx`, `patties`). `.claude/hooks/biome-check.sh` runs Biome after
-every edit if you install it (`bun add -d @biomejs/biome`).
+`CLAUDE.md` describes the framework conventions. The `/patties` skill
+(`.claude/skills/patties/`) adds components and scaffolds feature patterns
+(auth, CRM, task board, dashboard, …). For a guided first scaffold, open a new
+terminal and run:
 
-Launch a session with `claude` in this directory.
+```sh
+claude --permission-mode plan "/patties-init"
+```
 <!-- /if -->
 <!-- if:agent=codex -->
 ## Codex is set up
 
-`AGENTS.md` at the project root describes the framework conventions for
-Codex CLI and other AGENTS.md-aware tools. Patties regenerates the
-inventory section between `<!-- patties:manifest-start -->` and
-`<!-- patties:manifest-end -->` on every `patties dev/build` — everything
-outside those markers is yours to edit.
+`AGENTS.md` describes the framework conventions and links
+`.codex/rules/patties-patterns.md`, which tells Codex how to add components and
+scaffold feature patterns. Open Codex and ask it to scaffold a pattern.
+<!-- /if -->
+<!-- if:agent=none -->
+## No agent
 
-Launch a session with `codex` in this directory.
+Add UI components with `patties add <component>`. Feature patterns
+(auth, CRM, dashboard, …) are agent-driven — scaffold a project with
+`--agent claude` or `--agent codex` to get the `/patties` skill.
 <!-- /if -->
 
 ## Learn more

package/templates/default/app/routes/api/health.ts

@@ -0,0 +1,8 @@
+import type { PattiesContext } from "patties/middleware";
+
+// API routes live under app/routes/api/ and export named HTTP methods
+// (GET/POST/…) that return a standard Response. `ctx.json()` is the thin
+// PattiesContext helper for JSON replies.
+export function GET(_req: Request, ctx: PattiesContext): Response {
+	return ctx.json({ ok: true });
+}

package/templates/ui-starter/_internal/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]): string {
+	return twMerge(clsx(inputs));
+}

package/templates/ui-starter/_internal/slot.ts

@@ -0,0 +1,50 @@
+import {
+	Children,
+	cloneElement,
+	isValidElement,
+	type ReactElement,
+	type ReactNode,
+} from "react";
+
+interface SlotProps {
+	children?: ReactNode;
+	[key: string]: unknown;
+}
+
+export function Slot({
+	children,
+	...slotProps
+}: SlotProps): ReactElement | null {
+	const child = Children.only(children);
+	if (!isValidElement(child)) return null;
+	const childEl = child as ReactElement<Record<string, unknown>>;
+	return cloneElement(childEl, mergeProps(slotProps, childEl.props));
+}
+
+function mergeProps(
+	parent: Record<string, unknown>,
+	child: Record<string, unknown>,
+): Record<string, unknown> {
+	const merged: Record<string, unknown> = { ...parent };
+	for (const key of Object.keys(child)) {
+		const parentVal = parent[key];
+		const childVal = child[key];
+		if (
+			key.startsWith("on") &&
+			typeof parentVal === "function" &&
+			typeof childVal === "function"
+		) {
+			merged[key] = (...args: unknown[]) => {
+				(childVal as (...a: unknown[]) => unknown)(...args);
+				(parentVal as (...a: unknown[]) => unknown)(...args);
+			};
+		} else if (key === "className") {
+			merged[key] = [parentVal, childVal].filter(Boolean).join(" ");
+		} else if (key === "style") {
+			merged[key] = { ...(parentVal as object), ...(childVal as object) };
+		} else {
+			merged[key] = childVal;
+		}
+	}
+	return merged;
+}

package/templates/ui-starter/_internal/variants.ts

@@ -0,0 +1 @@
+export { cva, type VariantProps } from "class-variance-authority";

package/templates/ui-starter/button.tsx

@@ -0,0 +1,60 @@
+import type { ComponentProps } from "react";
+import { cn } from "./_internal/cn.ts";
+import { Slot } from "./_internal/slot.ts";
+import { cva, type VariantProps } from "./_internal/variants.ts";
+
+export const island = "subtree" as const;
+
+export const buttonVariants = cva(
+	"inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20",
+				outline:
+					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+				secondary:
+					"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+			},
+		},
+		defaultVariants: { variant: "default", size: "default" },
+	},
+);
+
+export type ButtonVariant = NonNullable<
+	VariantProps<typeof buttonVariants>["variant"]
+>;
+export type ButtonSize = NonNullable<
+	VariantProps<typeof buttonVariants>["size"]
+>;
+
+type ButtonProps = ComponentProps<"button"> &
+	VariantProps<typeof buttonVariants> & { asChild?: boolean };
+
+export function Button({
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: ButtonProps) {
+	const Comp = asChild ? Slot : "button";
+	return (
+		<Comp
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size }), className)}
+			{...props}
+		/>
+	);
+}

package/templates/ui-starter/card.tsx

@@ -0,0 +1,92 @@
+import type { ComponentProps } from "react";
+import { cn } from "./_internal/cn.ts";
+import { Slot } from "./_internal/slot.ts";
+
+export const island = false as const;
+
+export function Card({ className, ...props }: ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card"
+			className={cn(
+				"flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export function CardHeader({ className, ...props }: ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export function CardTitle({
+	className,
+	asChild = false,
+	...props
+}: ComponentProps<"div"> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "div";
+	return (
+		<Comp
+			data-slot="card-title"
+			className={cn("font-semibold leading-none", className)}
+			{...props}
+		/>
+	);
+}
+
+export function CardDescription({
+	className,
+	...props
+}: ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export function CardAction({ className, ...props }: ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-action"
+			className={cn(
+				"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export function CardContent({ className, ...props }: ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-content"
+			className={cn("px-6", className)}
+			{...props}
+		/>
+	);
+}
+
+export function CardFooter({ className, ...props }: ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+			{...props}
+		/>
+	);
+}

package/templates/ui-starter/demo/TodoApp.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "../components/ui/button.tsx";
+import { Input } from "../components/ui/input.tsx";
+
+interface Todo {
+	id: number;
+	text: string;
+	done: boolean;
+}
+
+export default function TodoApp(): JSX.Element {
+	const [todos, setTodos] = useState<Todo[]>([
+		{ id: 1, text: "edit app/routes/index.tsx", done: false },
+		{ id: 2, text: "edit app/islands/TodoApp.tsx", done: false },
+		{ id: 3, text: "add a component with `patties add`", done: false },
+	]);
+	const [draft, setDraft] = useState("");
+
+	function add(): void {
+		const text = draft.trim();
+		if (!text) return;
+		setTodos([...todos, { id: Date.now(), text, done: false }]);
+		setDraft("");
+	}
+
+	function toggle(id: number): void {
+		setTodos(todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
+	}
+
+	function remove(id: number): void {
+		setTodos(todos.filter((t) => t.id !== id));
+	}
+
+	return (
+		<section aria-label="Todo demo" className="flex flex-col gap-3">
+			<form
+				className="flex gap-2"
+				onSubmit={(e) => {
+					e.preventDefault();
+					add();
+				}}
+			>
+				<Input
+					type="text"
+					value={draft}
+					onChange={(e) => setDraft(e.target.value)}
+					placeholder="What needs doing?"
+					aria-label="New todo"
+				/>
+				<Button type="submit">Add</Button>
+			</form>
+			<ul className="flex flex-col gap-2">
+				{todos.map((t) => (
+					<li key={t.id} className="flex items-center gap-2">
+						<label className="flex flex-1 items-center gap-2">
+							<input
+								type="checkbox"
+								checked={t.done}
+								onChange={() => toggle(t.id)}
+							/>
+							<span
+								className={t.done ? "text-muted-foreground line-through" : ""}
+							>
+								{t.text}
+							</span>
+						</label>
+						<Button
+							type="button"
+							variant="ghost"
+							size="sm"
+							onClick={() => remove(t.id)}
+							aria-label="Remove"
+						>
+							×
+						</Button>
+					</li>
+				))}
+			</ul>
+			<p className="text-muted-foreground text-sm">
+				{todos.filter((t) => !t.done).length} of {todos.length} remaining
+			</p>
+		</section>
+	);
+}

package/templates/ui-starter/demo/index.tsx

@@ -0,0 +1,41 @@
+import { Island } from "patties/render";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "../components/ui/card.tsx";
+import TodoApp from "../islands/TodoApp.tsx";
+
+export const meta = {
+	title: "Welcome to Patties",
+	description: "A Bun-native full-stack meta-framework.",
+};
+
+export default function Index(): JSX.Element {
+	return (
+		<main className="mx-auto max-w-2xl p-8">
+			<Card>
+				<CardHeader>
+					<CardTitle>Welcome to Patties</CardTitle>
+					<CardDescription>
+						This page is server-rendered with Patties UI components. The list
+						below is a client island — <code>app/islands/TodoApp.tsx</code> —
+						hydrated in the browser.
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Island name="TodoApp">
+						<TodoApp />
+					</Island>
+				</CardContent>
+			</Card>
+			<p className="mt-4 text-muted-foreground text-sm">
+				Components live in <code>app/components/ui/</code>. Add more with
+				<code>patties add</code>, or ask your coding agent via{" "}
+				<code>/patties</code>.
+			</p>
+		</main>
+	);
+}