@vibes.diy/prompts 14.1.37 → 14.1.39

package/llms/access.md

@@ -66,7 +66,9 @@ Keep the two visually distinct (a checkbox with its own explanatory line; a sepa
 
 App.jsx — the checkbox is the consent call; the picker is a doc write:
 
-```jsx
+```jsx file=App.jsx
+const { can } = useVibe("logs"); // the write gate is always the server's own verdict
+
 // checking is the consent preflight; unchecking is the off switch. Never one verb for both edges.
 <label>
   <input
@@ -82,12 +84,16 @@ App.jsx — the checkbox is the consent call; the picker is a doc write:
 {showFollowers && <ul>{followers.map((f) => <li key={f.handle}>{f.handle}</li>)}</ul>}
 
 {/* the app's own list — one share doc per person picked */}
-{can.create({ type: "share", authorHandle: me?.userHandle, buddyHandle: "x" }).ok && <AddBuddyForm />}
+{can.create({ type: "share", authorHandle: me?.userHandle, buddyHandle: "x" }).ok && (
+  <AddBuddyForm
+    onAdd={(buddyHandle) => database.put({ type: "share", authorHandle: me?.userHandle, buddyHandle })}
+  />
+)}
 ```
 
 access.js — the buddy grant and the followers audience arm are independent:
 
-```js
+```js file=access.js
 const ch = `log:${user.userHandle}`;
 
 if (doc.type === "share") {
@@ -105,6 +111,8 @@ if (doc.type === "entry") {
     audience: { followersOf: user.userHandle },
   };
 }
+
+throw { forbidden: "unknown document type" }; // every access.js ends by denying what it does not know
 ```
 
 ### The ImgGen version-append nuance
@@ -195,7 +203,7 @@ Use `oldDoc` (the previous version of the document) to enforce invariants across
 
 Some documents belong to the machinery rather than to a person: a scheduled run's state doc, a counter a `scheduled` sweep advances, a notification the backend generates. Gate those on the **origin** with `ctx.requireBackend(...)` — one line, no conditional:
 
-```js
+```js file=access.js partial
 if (doc.type === "runState") {
   ctx.requireBackend("scheduled");
   return { channels: ["show"] };
@@ -224,7 +232,7 @@ Worked example — members-only chat writes
 
 access.js
 
-```js
+```js file=access.js partial
 export function chat(doc, oldDoc, user, ctx) {
   if (!user) throw { forbidden: "authentication required" };
 
@@ -279,7 +287,7 @@ _Each example below closes its type dispatch with the default terminal `throw {
 
 access.js
 
-```js
+```js file=access.js partial
 export function wall(doc, oldDoc, user, ctx) {
   if (!user) throw { forbidden: "sign in" };
 
@@ -310,7 +318,7 @@ export function wall(doc, oldDoc, user, ctx) {
 
 access.js
 
-```js
+```js file=access.js partial
 export function board(doc, oldDoc, user, ctx) {
   if (!user) throw { forbidden: "sign in" };
   const channel = `board:${doc.boardId}`;
@@ -343,7 +351,7 @@ export function board(doc, oldDoc, user, ctx) {
 
 access.js
 
-```js
+```js file=access.js partial
 export function notes(doc, oldDoc, user, ctx) {
   if (!user) throw { forbidden: "sign in" };
   const ch = `user:${user.userHandle}`; // this visitor's own private space
@@ -372,7 +380,7 @@ Every item a visitor creates lands on their own `user:<handle>` channel, private
 
 access.js
 
-```js
+```js file=access.js partial
 export function habits(doc, oldDoc, user, ctx) {
   if (!user) throw { forbidden: "sign in" };
 
@@ -414,7 +422,7 @@ The leaderboard is just the access model: read the public `track:` channels and
 
 The personal blog's post branch is small — public read is the blog's resting state, declared inline on every post result (readers are the point of publishing):
 
-```js
+```js file=access.js partial
 if (doc.type === "post") {
   if (!oldDoc) {
     if (doc.authorHandle !== user.userHandle) throw { forbidden: "not author" };
@@ -496,7 +504,7 @@ This example shows the full round-trip — access.js declares channels and grant
 
 access.js
 
-```js
+```js file=access.js
 export function announcements(doc, oldDoc, user, ctx) {
   if (!user) throw { forbidden: "sign in" };
 
@@ -546,7 +554,7 @@ export function announcements(doc, oldDoc, user, ctx) {
 
 App.jsx — `useVibe().can` gates every write surface (posts AND owner-only management); `access.hasChannel()` reflects display-only membership:
 
-```jsx
+```jsx file=App.jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
 import { useViewer, useVibe } from "use-vibes";
@@ -648,7 +656,7 @@ Channels everyone can read, and any signed-in user can post to. The channel doc
 
 access.js
 
-```js
+```js file=access.js partial
 export function chat(doc, oldDoc, user, ctx) {
   if (!user) throw { forbidden: "sign in" };
 
@@ -718,7 +726,7 @@ Reach for this by default, and certainly whenever the prompt says **invite, join
 
 access.js
 
-```js
+```js file=access.js partial
 export default function (doc, oldDoc, user, ctx) {
   if (!user) throw { forbidden: "sign in" };
   const ch = (id) => `list:${id}`;
@@ -805,7 +813,7 @@ Reach for this variant whenever the app is built around a *thing* people come ba
 
 access.js
 
-```js
+```js file=access.js partial
 export function boards(doc, oldDoc, user, ctx) {
   if (!user?.userHandle) throw { forbidden: "sign in" };
   const safeId = (id) => {
@@ -911,7 +919,7 @@ That bounds what the build's own closing line says: the rules and the screen it
 
 access.js
 
-```js
+```js file=access.js partial
 export function chat(doc, oldDoc, user, ctx) {
   if (!user) throw { forbidden: "authentication required" };
 
@@ -997,7 +1005,7 @@ App.jsx — show only channels the viewer is in (`access.hasChannel`), gate the
 
 access.js
 
-```js
+```js file=access.js partial
 export function survey(doc, oldDoc, user, ctx) {
   if (doc.type === "survey-response") {
     if (oldDoc) throw { forbidden: "responses are write-once" };
@@ -1073,7 +1081,7 @@ When the prompt says **anyone can sign / submit without logging in** (a guestboo
 
 access.js
 
-```js
+```js file=access.js partial
 export function guestbook(doc, oldDoc, user, ctx) {
   if (doc.type === "entry") {
     if (oldDoc) throw { forbidden: "entries are write-once" };

package/llms/backend.md

@@ -444,7 +444,7 @@ in `nodeReleases`, and records refresh state in that same database.
 
 backend.js
 
-```js
+```js file=backend.js
 export const config = { scheduled: { interval: "15m" } };
 
 const SNAPSHOT = [
@@ -486,6 +486,7 @@ async function putIfChanged(ctx, next, db) {
 }
 
 export async function scheduled(event, ctx) {
+  ctx.log("debug", "refresh tick", { at: event.scheduledTime }); // proof of life, before any read
   await ensureSnapshot(ctx);
 
   // One request, no retry storm; ctx.fetch enforces 15s/10MB and egress caps.
@@ -540,7 +541,7 @@ export async function scheduled(event, ctx) {
 
 App.jsx
 
-```jsx
+```jsx file=App.jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
 
@@ -612,7 +613,7 @@ Runs for requests to the app's `/_api` route. The request path is rooted after
 `/_api`: a call to `https://slug--owner.host/_api/webhooks/pay` arrives with
 pathname `/webhooks/pay`. Return a standard `Response`.
 
-```js
+```js file=backend.js
 export async function fetch(request, ctx) {
   const url = new URL(request.url);
   if (url.pathname === "/rsvp" && request.method === "POST") {
@@ -628,7 +629,7 @@ export async function fetch(request, ctx) {
 
 From `App.jsx`, call it with a relative fetch — no host needed:
 
-```js
+```js file=App.jsx partial
 const res = await fetch("/_api/rsvp", { method: "POST", body: JSON.stringify({ name }) });
 ```
 
@@ -640,7 +641,7 @@ owner, declare `config.fetch.unfilteredReads` for the collections it reads, page
 `ctx.db.query` returns, and keep progress in a state document read by id so a second run continues
 where the first stopped.
 
-```js
+```js file=backend.js
 export const config = { fetch: { unfilteredReads: ["rsvps"] } };
 
 export async function fetch(request, ctx) {
@@ -681,7 +682,7 @@ branch on: a score or a summary is only ever computed from text the handler actu
 
 backend.js
 
-```js
+```js file=backend.js
 export async function fetch(request, ctx) {
   const url = new URL(request.url);
   if (url.pathname === "/page") {
@@ -720,7 +721,7 @@ export async function fetch(request, ctx) {
 
 From `App.jsx`, the page asks the handler for the address it was given:
 
-```js
+```js file=App.jsx partial
 const res = await fetch(`/_api/page?url=${encodeURIComponent(url)}`);
 const page = await res.json();
 if (page.ok === false) {
@@ -747,7 +748,7 @@ server owes in response.
 Runs after any document write to the app's databases commits (user writes and
 backend writes alike). The event:
 
-```js
+```js file=backend.js
 export async function onChange(event, ctx) {
   // event: { dbName, docId, doc, oldDoc, seq, deleted }
   if (event.dbName !== "votes" || event.deleted) return;
@@ -771,11 +772,12 @@ Two rules keep change-reactions sane:
 Requires a `config` export with a **static string-literal** interval between
 `"5s"` and `"1h"` (e.g. `"30s"`, `"5m"`, `"1h"` — computed values are rejected):
 
-```js
+```js file=backend.js
 export const config = { scheduled: { interval: "15m" } };
 
 export async function scheduled(event, ctx) {
   // event: { scheduledTime } — ISO timestamp of this tick
+  ctx.log("debug", "heartbeat tick", { at: event.scheduledTime }); // proof of life, every tick
   await ctx.db.put({ kind: "heartbeat", at: event.scheduledTime }, { db: "status" });
 }
 ```
@@ -798,7 +800,7 @@ saving on its own, which a stored hour-offset does not.
 
 App.jsx — when the owner saves the schedule:
 
-```jsx
+```jsx file=App.jsx partial
 await merge({
   hour: 12, // the hour they picked, in their own day
   timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone, // e.g. "America/Detroit"
@@ -807,7 +809,7 @@ await merge({
 
 backend.js — the tick compares in that zone:
 
-```js
+```js file=backend.js partial
 const hourLocal = Number(
   new Intl.DateTimeFormat("en-US", {
     timeZone: settings.timeZone ?? "UTC",
@@ -842,6 +844,87 @@ And **only say a thing you computed.** "Tonight", "this morning", "in an hour"
 are claims about the reader's clock; if the code did not derive them from that
 reader's zone, name the moment instead and let them place it.
 
+### Recurring reminders on somebody's clock
+
+**A recurring reminder fires on each person's own clock, never the server's.**
+Once a reminder repeats — "every weekday at 7" — the zone stops being one
+setting on one schedule document and becomes a property of each person the
+reminder is for. Everything below is per person, and none of it is the
+server's day or the server's hour.
+
+**Capture the zone as an effect, not as a question.** Do not ask them for a
+timezone: the browser already knows it, so write it once when they first sign
+in and leave it alone. Store it where the reminder is addressed — on the
+person's own profile document when the list is shared — and guard the write so
+it only ever happens on a real change, or the effect re-fires forever.
+
+**Derive the weekday and the hour together, in that zone, from one
+`formatToParts` call.** `getUTCDay()`/`getUTCHours()` answer a question about
+the machine the handler happens to be running on; at 07:00 in Los Angeles it is
+already a different day in UTC, so a weekday gate on the server's clock silently
+drops Monday mornings and fires on Saturday ones.
+
+**An unrecognised zone string throws.** `Intl.DateTimeFormat` raises a
+`RangeError` on a zone it does not know, so in a loop over people the formatting
+goes in a `try` and a bad profile is skipped — one stale record must not stop
+everybody else's reminder.
+
+The unit of work is that person's local date (`en-CA` formats it as
+`YYYY-MM-DD`), keyed per person, per "A tick that repeats is not a run that
+repeats" above: the interval is only how often the handler wakes up.
+
+App.jsx — write the zone once, when they arrive:
+
+```jsx file=App.jsx
+useEffect(() => {
+  if (!me?.userHandle) return;
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  if (!timeZone || myProfile?.timeZone === timeZone) return; // already stored — don't churn
+  database.put({ _id: `profile:${me.userHandle}`, type: "profile", userHandle: me.userHandle, timeZone });
+}, [me?.userHandle, myProfile?.timeZone]);
+```
+
+backend.js — evaluate each person in their own zone:
+
+```js file=backend.js
+export const config = { scheduled: { interval: "15m" } };
+const WEEKDAYS = new Set(["Mon", "Tue", "Wed", "Thu", "Fri"]);
+
+export async function scheduled(event, ctx) {
+  const at = new Date(event.scheduledTime);
+  const profiles = await ctx.db.query({ db: DB, field: "type", key: "profile", limit: 500 });
+  ctx.log("debug", "reminder tick", { profiles: profiles.length });
+
+  for (const profile of profiles) {
+    const { timeZone, userHandle } = profile;
+    if (!timeZone || !userHandle) continue;
+    let weekday, hour, dateKey;
+    try {
+      // One formatter, one zone: the weekday and the hour must agree about the day.
+      const parts = new Intl.DateTimeFormat("en-US", {
+        timeZone,
+        weekday: "short",
+        hour: "2-digit",
+        hourCycle: "h23",
+      }).formatToParts(at);
+      weekday = parts.find((p) => p.type === "weekday")?.value;
+      hour = Number(parts.find((p) => p.type === "hour")?.value);
+      dateKey = new Intl.DateTimeFormat("en-CA", { timeZone }).format(at); // "2026-09-18", their day
+    } catch {
+      continue; // unrecognised zone on one profile — skip the person, not the tick
+    }
+    if (!WEEKDAYS.has(weekday) || hour !== 7) continue;
+
+    const id = `morningReminder:${userHandle}:${dateKey}`; // the unit of work, per person
+    if (await ctx.db.get(id, { db: DB })) continue; // this morning is already done
+    await ctx.db.put(
+      { _id: id, type: "morningReminder", ownerHandle: userHandle, date: dateKey, checkedAt: at.toISOString() },
+      { db: DB }
+    );
+  }
+}
+```
+
 ### An unattended tick reports what it did
 
 **An unattended tick earns its spend.** Nobody is watching a scheduled run, so
@@ -859,7 +942,7 @@ is the only place an owner can tell. For a job that acts twice a month that mean
 weeks of silence that reads exactly like a dead alarm. So log once per tick,
 before any early return:
 
-```js
+```js file=backend.js partial
 export async function scheduled(event, ctx) {
   const due = eventsDueNow(event.scheduledTime);
   ctx.log("debug", "tick", { due: due.length }); // proof of life; no reads, no spend
@@ -941,7 +1024,7 @@ genuinely produced something is a real state change and belongs in that doc —
 unlike a per-tick `checkedAt`, which is the churn the zero-churn rule above is
 about.
 
-```js
+```js file=backend.js
 export const config = { scheduled: { interval: "15m" } };
 
 const SHOW_DB = "show"; // the one database App.jsx live-queries
@@ -951,6 +1034,7 @@ const SHOW_DB = "show"; // the one database App.jsx live-queries
 let lastFinishedDay;
 
 export async function scheduled(event, ctx) {
+  ctx.log("debug", "digest tick", { at: event.scheduledTime }); // proof of life, before any return
   const settings = await ctx.db.get("schedule", { db: SHOW_DB });
   const zone = settings?.timeZone ?? "UTC"; // captured in the owner's browser
   const at = new Date(event.scheduledTime);
@@ -1016,7 +1100,13 @@ export async function scheduled(event, ctx) {
     // The day stays claimed: the owner sees what went wrong and is not billed twice for it.
     ctx.log("error", "[digest] draft failed after the day was claimed", { message: err.message });
     await ctx.db.put(
-      { _id: "run:status", type: "runStatus", state: "failed", message: "today's draft didn't finish" },
+      {
+        _id: "run:status",
+        type: "runStatus",
+        state: "failed",
+        checkedAt: event.scheduledTime, // a second failure must still read as a new one
+        message: "today's draft didn't finish",
+      },
       { db: SHOW_DB }
     );
   }
@@ -1030,7 +1120,7 @@ including the owner's own — while still no-opping under admin mode, so a hand
 repair runs the function and keeps the routing. `access.js` is where that is
 said:
 
-```js
+```js file=access.js
 // access.js
 export default function (doc, oldDoc, user, ctx) {
   if (doc.type === "runState" || doc.type === "runStatus") {
@@ -1042,11 +1132,24 @@ export default function (doc, oldDoc, user, ctx) {
 }
 ```
 
-App.jsx reads the same database, and renders that status beside the drafts, so a
-failed run and a good one never look alike:
+App.jsx writes the `schedule` document that tick reads — the hour the owner
+picked and, beside it, the zone their own browser reported — and reads the same
+database back, rendering the status beside the drafts so a failed run and a good
+one never look alike:
+
+```jsx file=App.jsx
+const { useLiveQuery, database } = useFireproof("show");
+
+async function saveSchedule(hour) {
+  // The hour is theirs and so is the zone: capture it here, store it beside the hour.
+  await database.put({
+    _id: "schedule",
+    type: "schedule",
+    hour,
+    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  });
+}
 
-```jsx
-const { useLiveQuery } = useFireproof("show");
 const { docs: statusDocs } = useLiveQuery("type", { key: "runStatus" });
 const run = statusDocs.find((doc) => doc._id === "run:status");
 // …
@@ -1066,7 +1169,7 @@ mirrors each note into a per-author `activity` entry (acting as that author —
 same privilege, just automated), and a `scheduled` sweep maintains one `digest`
 doc that `access.js` restricts to the **owner**, so no user can forge it.
 
-```js
+```js file=backend.js
 export const config = { scheduled: { interval: "15m" } };
 
 export async function onChange(event, ctx) {
@@ -1078,6 +1181,7 @@ export async function onChange(event, ctx) {
 }
 
 export async function scheduled(event, ctx) {
+  ctx.log("debug", "digest sweep", { at: event.scheduledTime }); // proof of life, before any return
   // Acts as the app owner — access.js allows `digest` docs for the owner only,
   // making this document genuinely server-controlled.
   //

package/llms/bluesky.md

@@ -135,7 +135,7 @@ person can act on — "no data" is not.
 
 ## Complete backend.js
 
-```js
+```js file=backend.js app=bluesky-browser
 const XRPC = "https://public.api.bsky.app/xrpc";
 const DB = "bluesky";
 
@@ -253,7 +253,7 @@ export async function fetch(request, ctx) {
 A profile card, its follow graph, and the account's posts — one handle in, no
 account of the visitor's involved.
 
-```jsx
+```jsx file=App.jsx app=bluesky-browser
 import React, { useState } from "react";
 
 export default function App() {

package/llms/calendar.md

@@ -110,7 +110,7 @@ button is simply there once the user has subscribable content.
 there means the Subscribe link never renders, even though the mint effect and
 the feed itself work.
 
-```jsx
+```jsx file=App.jsx app=calendar-feed
 // access.js needs a `caltoken` branch routing the doc to the owner's PRIVATE
 // channel (like notes) — the token is the secret.
 const { docs: calTokens } = useLiveQuery(byTypeUser, { key: ["caltoken", me.userHandle] });
@@ -153,7 +153,7 @@ the button tooltip.
 "2026-07-31", time: "18:00:00", endtime: "", title, venue, url } }` — adapt
 the doc shape, db name, and timezone to the app.
 
-```js
+```js file=backend.js app=calendar-feed
 export const config = { scheduled: { interval: "1m" } };
 
 const TZ = "America/Los_Angeles"; // the app's local timezone

package/llms/callai.md

@@ -62,7 +62,7 @@ Send an image by passing the prompt as an array of content parts: an `image_url`
 
 The prompt is the content of one user message, so a plain string means exactly one text part and the array is that same message's parts. Read the picture the user picked with a `FileReader` and hand over the data URL it produces:
 
-```javascript
+```javascript file=App.jsx
 import { callAI } from "call-ai";
 
 function readAsDataUrl(file) {

package/llms/connections.md

@@ -31,7 +31,7 @@ a public profile) is an ordinary `ctx.fetch` and needs no connection.
 
 ### 1. Declare it — `backend.js`
 
-```js
+```js file=backend.js app=instagram-connection
 export const config = {
   connections: [
     {
@@ -70,7 +70,7 @@ for the rest.
 
 ### 2. Ask for it — `App.jsx`
 
-```jsx
+```jsx file=App.jsx app=instagram-connection
 import { useConnection } from "use-vibes";
 
 function ConnectInstagram() {
@@ -112,7 +112,7 @@ the platform's Settings page, not in your app.
 
 ### 3. Read it — `backend.js`
 
-```js
+```js file=backend.js app=instagram-connection
 import { instagram, connectionState } from "@vibes.diy/social";
 
 export async function fetch(request, ctx) {

package/llms/create-vibe.md

@@ -24,7 +24,7 @@ never automatically from an effect, a timer, or straight out of an async `callAI
 resolution. Gate it behind an explicit "Create my ___" button the user presses
 when they're ready.
 
-```jsx
+```jsx file=App.jsx
 import React from "react";
 import { createVibe } from "use-vibes";
 
@@ -63,7 +63,7 @@ Let the user edit each slide inline and present full-screen.`;
 
 ## Full pattern — interview, then hand off
 
-```jsx
+```jsx file=App.jsx
 import React from "react";
 import { callAI } from "call-ai";
 import { createVibe } from "use-vibes";

package/llms/d3.md

@@ -138,7 +138,7 @@ Structure your component in this order:
 
 ### 1. Simple Bar Chart
 
-```js
+```js file=App.jsx
 import * as d3 from "d3";
 
 // 1. Design tokens and dimensions

package/llms/fireproof.md

@@ -29,7 +29,7 @@ This complete app shows Fireproof's core: `useFireproof` gives you hooks, `useDo
 
 App.jsx
 
-```jsx
+```jsx file=App.jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
 
@@ -112,7 +112,7 @@ 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
+```jsx file=App.jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
 import { useVibe } from "use-vibes";
@@ -442,7 +442,7 @@ Building an image uploader with `_files`:
 
 App.jsx
 
-```jsx
+```jsx file=App.jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
 
@@ -576,7 +576,7 @@ App.jsx
 
 Code listing for todo tracker App.jsx. Note the code ordering: hooks, then handlers, then classNames right before JSX.
 
-```js
+```js file=App.jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
 

package/llms/image-gen.md

@@ -10,7 +10,7 @@ Start with a minimal image generation component:
 
 App.jsx
 
-```jsx
+```jsx file=App.jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
 import { ImgGen } from "use-vibes";

package/llms/p5.md

@@ -22,7 +22,7 @@ the instance so remounts do not leak a second draw loop.
 
 App.jsx
 
-```jsx
+```jsx file=App.jsx
 import React from "react";
 import p5 from "https://esm.sh/p5@1.11.13";
 

package/llms/spotify.md

@@ -158,7 +158,7 @@ the app looks broken rather than misconfigured.
 
 ## Complete backend.js
 
-```js
+```js file=backend.js app=spotify-browser
 const TOKEN_URL = "https://accounts.spotify.com/api/token";
 const API = "https://api.spotify.com/v1";
 
@@ -301,7 +301,7 @@ function artistRow(a) {
 
 ## App.jsx sketch
 
-```jsx
+```jsx file=App.jsx app=spotify-browser
 import React, { useState } from "react";
 
 const SETUP_STEPS = [

package/llms/three-js.md

@@ -17,7 +17,7 @@ and renderer so remounts don't leak GPU memory.
 
 App.jsx
 
-```jsx
+```jsx file=App.jsx
 import React from "react";
 import * as THREE from "three";
 

package/llms/use-vibe.md

@@ -26,7 +26,7 @@ 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
+```jsx file=App.jsx
 import { useVibe } from "use-vibes";
 
 function PromptBar({ database }) {
@@ -38,9 +38,14 @@ function PromptBar({ database }) {
   if (!v.ok) return <p className="muted">Join the board to add a tile.</p>;
   // 3. allowed
   return (
-    <form onSubmit={/* … */}>
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        database.put({ type: "tile", authorHandle: me?.userHandle, text: e.target.tile.value });
+      }}
+    >
       {/* no current-user pill — identity + sign-in live in the Vibes Switch (the logo) */}
-      <input placeholder="Add a tile…" />
+      <input name="tile" placeholder="Add a tile…" />
       <button type="submit">Post</button>
     </form>
   );

package/llms/use-viewer.md

@@ -14,7 +14,7 @@ Start with a minimal component that reads the viewer identity. You don't render
 
 App.jsx
 
-```jsx
+```jsx file=App.jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
 import { useViewer } from "use-vibes";

package/llms/webxr.md

@@ -417,7 +417,7 @@ 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
+```javascript file=App.jsx
 import * as BABYLON from "@babylonjs/core";
 import React, { useEffect, useRef } from "react";
 import { useFireproof } from "use-fireproof";

package/llms/youtube.md

@@ -250,7 +250,7 @@ nothing they can act on, and the four cases above each have a different fix.
 
 ## Complete backend.js
 
-```js
+```js file=backend.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 +507,7 @@ export async function scheduled(event, ctx) {
 
 ## App.jsx sketch
 
-```jsx
+```jsx file=App.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.1.37",
+  "version": "14.1.39",
   "type": "module",
   "main": "./index.js",
   "exports": {
@@ -34,9 +34,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@adviser/cement": "~0.5.34",
-    "@vibes.diy/call-ai-v2": "14.1.37",
-    "@vibes.diy/identity": "14.1.37",
-    "@vibes.diy/use-vibes-types": "14.1.37",
+    "@vibes.diy/call-ai-v2": "14.1.39",
+    "@vibes.diy/identity": "14.1.39",
+    "@vibes.diy/use-vibes-types": "14.1.39",
     "arktype": "~2.2.3",
     "json-schema-faker": "~0.6.3"
   },