@vibes.diy/prompts 14.3.20 → 14.3.21

package/llms/fireproof.initial.md

@@ -47,7 +47,8 @@ Wire these visible actions in the first working app, using its own record names.
 
 With the callai skill available, submitting words extracts and normalizes every task they name, then immediately saves one document per task. The saved task is the confirmation and remains editable, with Undo beside the intake after each save. The parent keeps the ids from the last creation or the previous version from an edit, so intake and saved-detail editors share one Undo action. `useLiveQuery` keeps saved tasks visible; `useDocument` supplies the detail editor only after a record exists. For a plain message whose text is already the whole record, save that text directly.
 
-```jsx file=App.jsx
+### `App.jsx`
+```jsx
 import React, { useState } from "react";
 import { callAI } from "call-ai";
 import { useFireproof } from "use-fireproof";
@@ -350,8 +351,7 @@ Don't stamp `Date.now()` or other changing values into seed documents — that m
 
 To update an existing document from a click handler or callback, use `database.put()` directly. Never call `useDocument` inside an event handler — that violates React's Rules of Hooks. Adding a toggle to list items:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { useDocument, useLiveQuery } = useFireproof("myLedger");
@@ -360,8 +360,7 @@ App.jsx
 >>>>>>> REPLACE
 ```
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
           <li key={doc._id}>{doc.text}</li>
@@ -381,8 +380,7 @@ Never call hooks inside handlers — `const { doc, save } = useDocument({ _id: i
 
 A continuous control (slider, drag, color picker, live-typed text bound to one doc) fires many events in quick succession. **Never call `database.put()` or `save()` on every `onChange`** — that floods the server with rapid concurrent writes to the same `_id`, which collide on the per-document sequence and get rejected (`Failed to put document …`). Instead, `merge()` locally on each event to keep the UI live, and `save()` once when the interaction commits (`onPointerUp`, `onBlur`, `onChange` for a range input's final value, or a debounced trailing call). Editing a single doc with a slider:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { useDocument, useLiveQuery, database } = useFireproof("myLedger");
@@ -394,8 +392,7 @@ App.jsx
 >>>>>>> REPLACE
 ```
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
       <h3>Recent Documents</h3>
@@ -423,8 +420,7 @@ Data is queried by sorted indexes defined by the application. Sort by strings, n
 
 Passing a string to `useLiveQuery` will index by that field. Use the key argument to filter by a specific value, or range for bounded queries. Switching from temporal to filtered query:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { docs } = useLiveQuery("_id", { descending: true, limit: 100 });
@@ -436,8 +432,7 @@ App.jsx
 
 Or query a numeric range:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { docs } = useLiveQuery("agentName", { key: "agent-1" });
@@ -451,8 +446,7 @@ App.jsx
 
 Documents can be updated by multiple clients, and synced later. To create an event counter, don't increment a number on a single doc, instead write a small document per counted event, and query them with an index:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { docs } = useLiveQuery("agentRating", { range: [3, 5] });
@@ -477,8 +471,7 @@ This pattern ensures the count is accurate even during sync — each event is it
 
 Use a custom index function to normalize and transform document data, for instance if you have both new and old document versions in your app:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   // The counter's scope: the board being viewed and who is counting (useVibe from "use-vibes", as above).
@@ -507,8 +500,7 @@ App.jsx
 
 When you want to group rows easily, you can use an array index key. This is great for grouping records by year/month/day or other paths. The prefix query is a shorthand for a key range:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { docs } = useLiveQuery(
@@ -534,8 +526,7 @@ App.jsx
 
 Sortable lists are a common pattern. Use evenly spaced positions and insert between items using midpoint calculation:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { docs } = useLiveQuery(
@@ -595,8 +586,7 @@ Data lives in a local replica (IndexedDB) that the app reads and writes instantl
 
 You can use the core API outside a React component — in a plain script or a helper module. Instead of hooks, import the core API directly:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
 import React from "react";
@@ -634,8 +624,7 @@ A save that carries `_files` uploads the bytes before the doc lands, so unlike a
 
 Building an image uploader with `_files`:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
@@ -716,8 +705,7 @@ For multi-file uploads (e.g. `<input multiple>`), build the `_files` map keyed b
 
 Adding multi-file support:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const onPickFile = (e) => {
@@ -745,8 +733,7 @@ App.jsx
 
 You can use React's `useState` to manage validation states and error messages. Validate inputs at the UI level before allowing submission. Adding validation to the uploader:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const onSubmit = async (e) => {

package/llms/fireproof.md

@@ -47,7 +47,8 @@ Wire these visible actions in the first working app, using its own record names.
 
 With the callai skill available, submitting words extracts and normalizes every task they name, then immediately saves one document per task. The saved task is the confirmation and remains editable, with Undo beside the intake after each save. The parent keeps the ids from the last creation or the previous version from an edit, so intake and saved-detail editors share one Undo action. `useLiveQuery` keeps saved tasks visible; `useDocument` supplies the detail editor only after a record exists. For a plain message whose text is already the whole record, save that text directly.
 
-```jsx file=App.jsx
+### `App.jsx`
+```jsx
 import React, { useState } from "react";
 import { callAI } from "call-ai";
 import { useFireproof } from "use-fireproof";
@@ -278,7 +279,8 @@ When an app ships with default content — starter slides, template rows, exampl
 
 The trap is the live-query empty state. `useLiveQuery` renders empty before data arrives, so `docs.length === 0` is briefly true on **every** fresh load — and a `useRef`/`useState` "already seeded" flag only guards the current session, never the next reload, a second device, or another collaborator. With **auto-generated** `_id`s, each of those re-seeds the full set and duplicate copies pile up without bound. Deterministic `_id`s collapse every re-seed back onto the same N documents.
 
-```jsx file=App.jsx
+### `App.jsx`
+```jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
 import { useVibe } from "use-vibes";
@@ -319,8 +321,7 @@ Don't stamp `Date.now()` or other changing values into seed documents — that m
 
 To update an existing document from a click handler or callback, use `database.put()` directly. Never call `useDocument` inside an event handler — that violates React's Rules of Hooks. Adding a toggle to list items:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { useDocument, useLiveQuery } = useFireproof("myLedger");
@@ -329,8 +330,7 @@ App.jsx
 >>>>>>> REPLACE
 ```
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
           <li key={doc._id}>{doc.text}</li>
@@ -350,8 +350,7 @@ Never call hooks inside handlers — `const { doc, save } = useDocument({ _id: i
 
 A continuous control (slider, drag, color picker, live-typed text bound to one doc) fires many events in quick succession. **Never call `database.put()` or `save()` on every `onChange`** — that floods the server with rapid concurrent writes to the same `_id`, which collide on the per-document sequence and get rejected (`Failed to put document …`). Instead, `merge()` locally on each event to keep the UI live, and `save()` once when the interaction commits (`onPointerUp`, `onBlur`, `onChange` for a range input's final value, or a debounced trailing call). Editing a single doc with a slider:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { useDocument, useLiveQuery, database } = useFireproof("myLedger");
@@ -363,8 +362,7 @@ App.jsx
 >>>>>>> REPLACE
 ```
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
       <h3>Recent Documents</h3>
@@ -392,8 +390,7 @@ Data is queried by sorted indexes defined by the application. Sort by strings, n
 
 Passing a string to `useLiveQuery` will index by that field. Use the key argument to filter by a specific value, or range for bounded queries. Switching from temporal to filtered query:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { docs } = useLiveQuery("_id", { descending: true, limit: 100 });
@@ -405,8 +402,7 @@ App.jsx
 
 Or query a numeric range:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { docs } = useLiveQuery("agentName", { key: "agent-1" });
@@ -420,8 +416,7 @@ App.jsx
 
 Documents can be updated by multiple clients, and synced later. To create an event counter, don't increment a number on a single doc, instead write a small document per counted event, and query them with an index:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { docs } = useLiveQuery("agentRating", { range: [3, 5] });
@@ -441,8 +436,7 @@ This pattern ensures the count is accurate even during sync — each event is it
 
 Use a custom index function to normalize and transform document data, for instance if you have both new and old document versions in your app:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { docs } = useLiveQuery("counter", { key: "my-event-name" });
@@ -466,8 +460,7 @@ App.jsx
 
 When you want to group rows easily, you can use an array index key. This is great for grouping records by year/month/day or other paths. The prefix query is a shorthand for a key range:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { docs } = useLiveQuery(
@@ -493,8 +486,7 @@ App.jsx
 
 Sortable lists are a common pattern. Use evenly spaced positions and insert between items using midpoint calculation:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { docs } = useLiveQuery(
@@ -557,8 +549,7 @@ Data lives in a local replica (IndexedDB) that the app reads and writes instantl
 
 You can use the core API in HTML or on the backend. Instead of hooks, import the core API directly:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
 import React from "react";
@@ -608,9 +599,8 @@ A save that carries `_files` uploads the bytes before the doc lands, so unlike a
 
 Building an image uploader with `_files`:
 
-App.jsx
-
-```jsx file=App.jsx
+### `App.jsx`
+```jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
 import { Button, Card, CardContent, Input, Label } from "@vibes.diy/look";
@@ -690,8 +680,7 @@ For multi-file uploads (e.g. `<input multiple>`), build the `_files` map keyed b
 
 Adding multi-file support:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const onPickFile = (e) => {
@@ -719,8 +708,7 @@ App.jsx
 
 You can use React's `useState` to manage validation states and error messages. Validate inputs at the UI level before allowing submission. Adding validation to the uploader:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const onSubmit = async (e) => {
@@ -747,7 +735,8 @@ App.jsx
 
 Code listing for todo tracker App.jsx. Note the code ordering: hooks, then handlers, then classNames right before JSX.
 
-```js file=App.jsx
+### `App.jsx`
+```js
 import React from "react";
 import { useFireproof } from "use-fireproof";
 import { Button, Card, CardContent, Input, Label } from "@vibes.diy/look";

package/llms/image-gen.initial.md

@@ -8,8 +8,7 @@ Generate and edit images from a text prompt. Each generated image lands as a fil
 
 Start with a minimal image generation component:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
@@ -61,8 +60,7 @@ This is the same `_files`-shape contract documented in `fireproof.md`'s "Working
 
 Pass a `File` object via `images` to run img2img. Adding a file picker that feeds into ImgGen:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
 export default function App() {

package/llms/image-gen.md

@@ -8,9 +8,8 @@ Generate and edit images from a text prompt. Each generated image lands as a fil
 
 Start with a minimal image generation component:
 
-App.jsx
-
-```jsx file=App.jsx
+### `App.jsx`
+```jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
 import { ImgGen } from "use-vibes";
@@ -61,8 +60,7 @@ This is the same `_files`-shape contract documented in `fireproof.md`'s "Working
 
 Pass a `File` object via `images` to run img2img. Adding a file picker that feeds into ImgGen:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
 export default function App() {

package/llms/p5.md

@@ -20,9 +20,8 @@ factory function that receives the host element, the instance is built once in
 one `useEffect([])`, the canvas is sized from the host, and the cleanup removes
 the instance so remounts do not leak a second draw loop.
 
-App.jsx
-
-```jsx file=App.jsx
+### `App.jsx`
+```jsx
 import React from "react";
 import p5 from "https://esm.sh/p5@1.11.13";
 import { Button } from "@vibes.diy/look";

package/llms/spotify.md

@@ -159,7 +159,8 @@ when the route names it.
 
 ## Complete backend.js
 
-```js file=backend.js app=spotify-browser
+### `backend.js`
+```js app=spotify-browser
 const TOKEN_URL = "https://accounts.spotify.com/api/token";
 const API = "https://api.spotify.com/v1";
 
@@ -302,7 +303,8 @@ function artistRow(a) {
 
 ## App.jsx sketch
 
-```jsx file=App.jsx app=spotify-browser
+### `App.jsx`
+```jsx app=spotify-browser
 import React, { useState } from "react";
 
 const SETUP_STEPS = [

package/llms/three-js.md

@@ -15,9 +15,8 @@ one `useEffect([])`, the animation loop is a `requestAnimationFrame`, resize
 keeps the camera aspect correct, and the cleanup disposes geometry, material,
 and renderer so remounts don't leak GPU memory.
 
-App.jsx
-
-```jsx file=App.jsx
+### `App.jsx`
+```jsx
 import React from "react";
 import * as THREE from "three";
 

package/llms/use-vibe.md

@@ -26,7 +26,8 @@ Never stamp author fields from `me` while the verdict is pending — `me` is nul
 
 Gate every write affordance on `can.*`. Hold it while `pending`, and write your own copy when denied. Never branch write permission on `viewer`, `access.hasRole()`/`access.hasChannel()`, or document fields — those drift from what `access.js` actually does. Rendering **other** users (authors, rosters) is `useViewer()`'s `<ViewerTag userHandle={...} />`, not `useVibe`. The current viewer's own pill and the "signed in as" label are system chrome in the Vibes Switch (the logo) — don't build them into the app. Asking an anonymous visitor to sign in is a different thing and it IS yours: `useViewer().requestLogin()`, at the moment their work becomes worth keeping (see use-viewer docs). A resolved denial is one such moment — write the sign-in copy in your app's own words and wire it to that callable, never to a sentence about the logo. (The one exception is inline avatar self-edit: a guarded no-prop `{viewer && <ViewerTag />}` lets any signed-in member change their own photo in place — see use-viewer docs.)
 
-```jsx file=App.jsx
+### `App.jsx`
+```jsx
 import { useVibe } from "use-vibes";
 import { Button, Input, Skeleton } from "@vibes.diy/look";
 

package/llms/use-viewer.initial.md

@@ -12,8 +12,7 @@ Use `useViewer()` to render **other** people's identity — comment authors, ros
 
 Start with a minimal component that reads the viewer identity. You don't render a current-user pill — that lives in the Vibes Switch (click the logo). Branch on `viewer` for any welcome/empty copy. Note there is **no sign-in button here**: the ask belongs at the moment the visitor has made something worth keeping, not on arrival — see **Asking a visitor to sign in** below.
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
@@ -50,8 +49,7 @@ export default function App() {
 
 Gate the comment form on `useVibe("comments").can` — not on `viewer`. The current viewer never needs a pill here (that's in the Vibes Switch); just render the gated form, and on a denial a sentence in your app's own words — `reason` is a machine token that informs that sentence and is never printed:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
 import { useViewer } from "use-vibes";
@@ -60,8 +58,7 @@ import { useViewer, useVibe } from "use-vibes";
 >>>>>>> REPLACE
 ```
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { viewer, isViewerPending } = useViewer();
@@ -71,8 +68,7 @@ App.jsx
 >>>>>>> REPLACE
 ```
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
       {viewer ? (
@@ -105,8 +101,7 @@ When one user writes content others will see (comments, posts, messages), **stam
 
 Wire up a full comment thread with Fireproof and viewer attribution:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
 import { useViewer, useVibe } from "use-vibes";

package/llms/use-viewer.md

@@ -12,9 +12,8 @@ Use `useViewer()` to render **other** people's identity — comment authors, ros
 
 Start with a minimal component that reads the viewer identity. You don't render a current-user pill — that lives in the Vibes Switch (click the logo). Branch on `viewer` for any welcome/empty copy. Note there is **no sign-in button here**: the ask belongs at the moment the visitor has made something worth keeping, not on arrival — see **Asking a visitor to sign in** below.
 
-App.jsx
-
-```jsx file=App.jsx
+### `App.jsx`
+```jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
 import { useViewer } from "use-vibes";
@@ -51,8 +50,7 @@ export default function App() {
 
 Gate the comment form on `useVibe("comments").can` — not on `viewer`. The current viewer never needs a pill here (that's in the Vibes Switch); just render the gated form, and on a denial a sentence in your app's own words — `reason` is a machine token that informs that sentence and is never printed:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
 import { useViewer } from "use-vibes";
@@ -61,8 +59,7 @@ import { useViewer, useVibe } from "use-vibes";
 >>>>>>> REPLACE
 ```
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
   const { viewer, isViewerPending } = useViewer();
@@ -72,8 +69,7 @@ App.jsx
 >>>>>>> REPLACE
 ```
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
       {viewer ? (
@@ -106,8 +102,7 @@ When one user writes content others will see (comments, posts, messages), **stam
 
 Wire up a full comment thread with Fireproof and viewer attribution:
 
-App.jsx
-
+### `App.jsx`
 ```jsx
 <<<<<<< SEARCH
 import { useViewer, useVibe } from "use-vibes";

package/llms/webxr.md

@@ -417,7 +417,8 @@ for (let i = 0; i < 200; i++) {
 
 A floating galaxy of 2000 particles with a custom-shader core sphere, navigable in VR. Session data stored in Fireproof.
 
-```javascript file=App.jsx
+### `App.jsx`
+```javascript
 import * as BABYLON from "@babylonjs/core";
 import React, { useEffect, useRef } from "react";
 import { useFireproof } from "use-fireproof";

package/llms/youtube.md

@@ -250,7 +250,8 @@ nothing they can act on, and the four cases above each have a different fix.
 
 ## Complete backend.js
 
-```js file=backend.js app=youtube-dashboard
+### `backend.js`
+```js app=youtube-dashboard
 export const config = {
   scheduled: { interval: "1h" },
   // The visitor path below reads the snapshot docs on the fetch lane, which
@@ -507,7 +508,8 @@ export async function scheduled(event, ctx) {
 
 ## App.jsx sketch
 
-```jsx file=App.jsx app=youtube-dashboard
+### `App.jsx`
+```jsx app=youtube-dashboard
 import React, { useState } from "react";
 import { useFireproof } from "use-fireproof";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/prompts",
-  "version": "14.3.20",
+  "version": "14.3.21",
   "type": "module",
   "main": "./index.js",
   "exports": {
@@ -37,9 +37,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@adviser/cement": "~0.5.34",
-    "@vibes.diy/call-ai-v2": "14.3.20",
-    "@vibes.diy/identity": "14.3.20",
-    "@vibes.diy/use-vibes-types": "14.3.20",
+    "@vibes.diy/call-ai-v2": "14.3.21",
+    "@vibes.diy/identity": "14.3.21",
+    "@vibes.diy/use-vibes-types": "14.3.21",
     "arktype": "~2.2.3",
     "json-schema-faker": "~0.6.3"
   },

package/recovery-stitch-addendum.md

@@ -9,5 +9,6 @@ good state to base the rewrite on. Trust it as ground truth for what
 already works; do not regress features that are present there.
 
 Do not split the rewrite across multiple SEARCH/REPLACE blocks. One
-block, full file, fresh contents. The filename line on its own line,
-followed by a single fenced ```jsx block with the entire file inside.
+block, full file, fresh contents. A heading naming the file,
+with its path in backticks (### `App.jsx`), then a single fenced ```jsx
+block directly below it with the entire file inside.

package/system-prompt-initial-oneshot.md

@@ -60,13 +60,22 @@ Before writing code, provide a title and brief description of the app. Then list
 
 ## Output format
 
-Every code block must be preceded by the file name on its own line — `App.jsx` for the React component, `seed.json` for launch content, or a relative path like `components/Feed.jsx` for an additional source file. The same convention applies to any file a turn emits.
+Name each file in a markdown heading directly above its code block, with the path in backticks:
+
+### `App.jsx`
+```jsx
+export default function App() {
+  return <main>Hello</main>;
+}
+```
+
+The same heading labels every block a turn emits — `App.jsx` for the React component, `seed.json` for launch content, or a relative path like `components/Feed.jsx` for an additional source file.
 
 ## Multi-file apps — keep `App.jsx` under ~500 lines
 
 The sandbox serves raw ES modules, so `App.jsx` can import local `.js`/`.jsx` files with relative imports (`import Feed from "./components/Feed.jsx"`). Use that to keep `App.jsx` under about 500 lines:
 
-- When an app would grow past ~500 lines of `App.jsx`, split it: move feature components into their own files (e.g. `components/Feed.jsx`, one feature per file, `export default`) and import them from `App.jsx`. Emit each new file as its own complete fenced code block, preceded by its file path on its own line, exactly like `App.jsx`.
+- When an app would grow past ~500 lines of `App.jsx`, split it: move feature components into their own files (e.g. `components/Feed.jsx`, one feature per file, `export default`) and import them from `App.jsx`. Emit each new file as its own complete fenced code block with its path in the heading directly above it, exactly like `App.jsx`.
 - When editing an app whose `App.jsx` is already near or over 500 lines, add new features as NEW files instead of enlarging `App.jsx`: emit the new component file in full, then a small edit to `App.jsx` that adds the import and renders the component. When you're already rewriting an existing feature, move it out to its own file the same way.
 - `App.jsx` stays the composition root: the default `App` export and the top-level layout live there and only there. No file defines a `:root` theme token block — the platform injects the CSS variables as globals — so each extracted file defines its own small `classNames` object routed through the same `var(--token)` values.
 - Values used by more than one file — constants, option lists, small pure helpers, document-shape literals (e.g. a `STAGES` array or a `CATEGORIES` list) — live in their own small leaf module (e.g. `lib/stages.js`) that both `App.jsx` and the feature components import, each with the relative path from its own location (`import { STAGES } from "./lib/stages.js"` from `App.jsx` at the root, `"../lib/stages.js"` from a file in `components/`). Imports flow one direction: `App.jsx` imports the feature components, and `App.jsx` and the components both import the shared leaf modules — so every shared value has one home that the composition root and the components reach the same way.
@@ -81,7 +90,7 @@ The sandbox serves raw ES modules, so `App.jsx` can import local `.js`/`.jsx` fi
 
 Every feature you described above should work when this one block lands. Don't leave sections empty for a later pass — on the first turn there is no later pass.
 
-**Split into companion files by default.** Whenever the app has more than a couple of distinct features — and always when the finished app would push `App.jsx` past the ~500-line threshold (see the multi-file rule above) — still lead with one complete `App.jsx` block, but as the composition root: imports, the `classNames` object, layout chrome, and the default `App` export composing the features. Then emit each extracted feature component as its own complete file block (path line first, e.g. `components/Feed.jsx`) right after the `App.jsx` block. Every feature still works when the turn's blocks land — the single-block rule means one complete pass per file, never a second pass, not everything crammed into `App.jsx`. Only a genuinely small app (one screen, one or two features) stays single-file.
+**Split into companion files by default.** Whenever the app has more than a couple of distinct features — and always when the finished app would push `App.jsx` past the ~500-line threshold (see the multi-file rule above) — still lead with one complete `App.jsx` block, but as the composition root: imports, the `classNames` object, layout chrome, and the default `App` export composing the features. Then emit each extracted feature component as its own complete file block (its path heading first, e.g. `components/Feed.jsx`) right after the `App.jsx` block. Every feature still works when the turn's blocks land — the single-block rule means one complete pass per file, never a second pass, not everything crammed into `App.jsx`. Only a genuinely small app (one screen, one or two features) stays single-file.
 - When a write surface needs gating, destructure `useVibe` for the database it writes to — `const { can, ready } = useVibe("<dbName>");`. Only destructure `useViewer` (`const { ViewerTag } = useViewer();`) when you render **other** users — `<ViewerTag userHandle={...} />` for authors/rosters. The current viewer's pill and sign-in live in the Vibes Switch (the logo), so don't add one to your header.
 - **Be creative with the layout, but respect mobile idioms.** Thumb-reachable primary actions, generous tap targets (`min-h-11`), scrollable lists, no hover-only interactions.
 - **For chat or log panels, keep autoscroll on the panel itself.** Use a bounded `max-h-64 overflow-y-auto` container with a ref and move it to the end when entries change:
@@ -133,12 +142,11 @@ When the user's prompt hands you **concrete example data** — an image of items
 
 **Required starting state belongs to the app's working initialization.** When the request requires named containers or participants to exist on first use, author an idempotent owner initialization path for those required records, separate from optional example content. Wait for identity, access readiness and the initial data read; reuse existing records, and create missing required records with stable identities through the ordinary database write path. Check each complete intended document with `can.create`, await its write, and show an actionable setup error if it fails. Establish the parent records and their membership grants before dependent records or controls need them. Keep existing user edits on later visits. For example, the requested pottery studio and its named apprentice should be represented by actual project and membership records before its work form depends on them. A name present only in `seed.json` describes an offered import, not an existing grant.
 
-Emit it with the filename-on-its-own-line convention: the filename `seed.json` on its own line, then a plain fenced ```json block (a bare `json` info-string on the fence — NOT `seed.json` on the fence line; the server keys off the preceding filename line). Emit it **last**, after `App.jsx` and any companion feature files.
+Emit it like every other file: the heading naming `seed.json`, then a fenced ```json block directly below it, as in the shape below. Emit it **last**, after `App.jsx` and any companion feature files.
 
 Shape — a JSON **object keyed by database name** (the same names you pass to `useFireproof`), each value an **array of items**:
 
-seed.json
-
+### `seed.json`
 ```json
 {
   "cardSetMaker": [