@vibes.diy/prompts 14.3.20 → 14.3.22

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(
@@ -565,6 +556,23 @@ App.jsx
 >>>>>>> REPLACE
 ```
 
+#### Emit a Row Value
+
+An index function can call `emit(key, value)` with a second argument to store a value beside the key. `rows[].value` is the value you emitted when you pass one, and the whole document when you call `emit(key)` alone. Emit a small summary when a long list renders only a field or two, and read `docs` when you want the documents themselves — `docs` holds the indexed documents whatever the rows carry.
+
+### `App.jsx`
+```jsx
+<<<<<<< SEARCH
+  const { docs } = useLiveQuery((doc) => [doc.listId, doc.position], { prefix: ["xyz"] });
+=======
+  // Rows carry just what this list renders; docs still holds the whole documents
+  const { rows } = useLiveQuery((doc, emit) => emit([doc.listId, doc.position], { label: doc.label }), {
+    prefix: ["xyz"],
+  });
+  const labels = rows.map((row) => row.value.label);
+>>>>>>> REPLACE
+```
+
 ## Offline writes are on by default (`offlineQueue`)
 
 For signed-in users, writes are **local-first by default**: a `put`/`del` that fails on the network is durably queued on the device (it resolves, stays visible, and syncs to the cloud when you're back online) instead of rolling back. You don't opt in — every signed-in vibe gets this. A refusal or validation rejection is **not** queued: it converges **server-wins** (the local optimistic revision is overwritten by the server's version); the platform surfaces the reason only when it has one, and a reason-less rejection converges silently — so keep the UI reactive to the store rather than depending on a toast. Only transport failures queue and retry.
@@ -595,8 +603,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 +641,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 +722,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 +750,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.js

@@ -3,6 +3,7 @@ export const fireproofConfig = {
     label: "useFireproof",
     description: "cloud-backed document database with live sync",
     initialVariant: true,
+    draftVariant: true,
     importModule: "use-fireproof",
     importName: "useFireproof",
 };

package/llms/fireproof.js.map

@@ -1 +1 @@
-{"version":3,"file":"fireproof.js","sourceRoot":"","sources":["../../jsr/llms/fireproof.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAc;IACxC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,+CAA+C;IAC5D,cAAc,EAAE,IAAI;IACpB,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,cAAc;CAC3B,CAAC"}
+{"version":3,"file":"fireproof.js","sourceRoot":"","sources":["../../jsr/llms/fireproof.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAc;IACxC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,+CAA+C;IAC5D,cAAc,EAAE,IAAI;IACpB,YAAY,EAAE,IAAI;IAClB,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,cAAc;CAC3B,CAAC"}

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(
@@ -523,6 +515,23 @@ App.jsx
 >>>>>>> REPLACE
 ```
 
+#### Emit a Row Value
+
+An index function can call `emit(key, value)` with a second argument to store a value beside the key. `rows[].value` is the value you emitted when you pass one, and the whole document when you call `emit(key)` alone. Emit a small summary when a long list renders only a field or two, and read `docs` when you want the documents themselves — `docs` holds the indexed documents whatever the rows carry.
+
+### `App.jsx`
+```jsx
+<<<<<<< SEARCH
+  const { docs } = useLiveQuery((doc) => [doc.list, doc.position], { prefix: ["xyz"] });
+=======
+  // Rows carry just what this list renders; docs still holds the whole documents
+  const { rows } = useLiveQuery((doc, emit) => emit([doc.list, doc.position], { label: doc.label }), {
+    prefix: ["xyz"],
+  });
+  const labels = rows.map((row) => row.value.label);
+>>>>>>> REPLACE
+```
+
 ## Offline writes are on by default (`offlineQueue`)
 
 For signed-in users, writes are **local-first by default**: a `put`/`del` that fails on the network is durably queued on the device (it resolves, stays visible, and syncs to the cloud when you're back online) instead of rolling back. You don't opt in — every signed-in vibe gets this. An access-denied/validation rejection is **not** queued: it converges **server-wins** (the local optimistic revision is overwritten by the server's version); the platform surfaces the reason whenever there is one, and a reason-less rejection converges silently — so keep the UI reactive to the store rather than depending on a toast. Only transport failures queue and retry.
@@ -557,8 +566,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 +616,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 +697,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 +725,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 +752,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/types.d.ts

@@ -4,6 +4,7 @@ export interface LlmConfig {
     description: string;
     cues?: string[];
     initialVariant?: boolean;
+    draftVariant?: boolean;
     importModule?: string;
     importName?: string;
     importType?: "named" | "namespace" | "default";

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.22",
   "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.22",
+    "@vibes.diy/identity": "14.3.22",
+    "@vibes.diy/use-vibes-types": "14.3.22",
     "arktype": "~2.2.3",
     "json-schema-faker": "~0.6.3"
   },

package/prompts.d.ts

@@ -20,7 +20,7 @@ export declare function generateImportStatements(llms: LlmCatalogEntry[]): strin
 export interface MakeBaseSystemPromptOptions {
     fetch?: typeof fetch;
     pkgBaseUrl?: string;
-    variant?: "initial" | "initial-oneshot" | "continuation";
+    variant?: "initial" | "initial-oneshot" | "initial-draft" | "continuation";
     suppressDefaultStylePrompt?: boolean;
     look?: boolean;
 }