@vibes.diy/prompts 14.3.79 → 14.3.81

package/llms/access.md

@@ -34,7 +34,7 @@ writes.
 
 Express every refusal about **who may act** through the supplied validators — `ctx.requireAccess`, `ctx.requireRole`, `ctx.requireBackend` — so that admin mode passes them and the function still runs, applying your own channels and grants to the repaired document; a refusal about the document's own **shape**, like an unknown type or a missing field, stays a plain `throw` and is right to, while a write-once check sits in between and is worth naming in a comment, since a schema repair has to get past it.
 
-A component-owned image database (`media:<hostDbName>`) uses platform-authored rules by default: each generated image is readable by whoever can read the record it was generated for, and by the person who generated it. An explicit string-named export such as `export { posterMedia as "media:posters" }` overrides that one media database. Neither `export default` nor a function merely named `media` overrides it. Within those, platform-driven writes onto the app's own docs — like an `<ImgGen>` version append (the `ctx.isImgGenVersionAppend` shape) — flow through your function like any other write.
+A component-owned image database (`media:<hostDbName>`) uses platform-authored rules by default: each generated image is readable by whoever can read the record it was generated for, and by the person who generated it. An explicit string-named export such as `export { posterMedia as "media:posters" }` overrides that one media database. Neither `export default` nor a function merely named `media` overrides it. Your function governs your app's own records, and every picture `<ImgGen>` makes is saved in that media database as its creator's own record, so pictures need no branch of their own in yours.
 
 ### AccessDescriptor return type
 
@@ -79,18 +79,17 @@ App.jsx — the checkbox is the consent call; the picker is a doc write:
 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
-    type="checkbox"
+<Row gap={2} align="center">
+  <Checkbox
+    label="Shared with followers"
     checked={followersEnabled}
-    onChange={(e) => (e.target.checked ? requestFollowersAccess() : setVisibility("private"))}
+    onChange={(checked) => (checked === true ? requestFollowersAccess() : setVisibility("private"))}
   />
-  Shared with{" "}
-  <button type="button" onClick={() => setShowFollowers(true)}>
-    followers
-  </button>
-</label>
-{showFollowers && <ul>{followers.map((f) => <li key={f.handle}>{f.handle}</li>)}</ul>}
+  <Button type="button" size="sm" variant="quiet" onClick={() => setShowFollowers(true)}>
+    See followers
+  </Button>
+</Row>
+{showFollowers && <Stack gap={1}>{followers.map((f) => <Text key={f.handle}>{f.handle}</Text>)}</Stack>}
 
 {/* the app's own list — one share doc per person picked */}
 {can.create({ type: "share", authorHandle: me?.userHandle, buddyHandle: "x" }).ok && (
@@ -176,9 +175,9 @@ would copy draft prompts and prior versions. Unpublishing removes that record's
 public grant. Explicit media bindings fail closed on older access outputs until
 the publish-time backfill evaluates them under the new rule.
 
-### The ImgGen version-append nuance
+### Pictures on shared records
 
-The platform predicate `ctx.isImgGenVersionAppend(doc, oldDoc)` accepts exactly one legitimate ImgGen version append by a non-author — prior versions/files and all other fields must be unchanged, so a field you didn't anticipate stays author-protected by default; deletes stay author-only. Because `versions`/`currentVersion` are among the version fields it allows, a non-author can also advance the DISPLAYED version (the shared-generation feature); guard `currentVersion` specifically for author-only display control. Write-once docs can simply `if (oldDoc === null) {} else throw`.
+Anyone who can read a record can make and keep pictures for it: each generation is saved in the media database as that person's own record, so a shared record stays author-edited while everyone's pictures land. Write-once docs can simply `if (oldDoc === null) {} else throw`.
 
 ### `_id` strategy matters
 
@@ -317,14 +316,12 @@ export function chat(doc, oldDoc, user, ctx) {
   if (!user) throw { forbidden: "authentication required" };
 
   if (doc.type === "message") {
-    // Author fixed at create; ownership immutable. On update a non-author may
-    // only append one legitimate ImgGen version — the platform predicate
-    // ctx.isImgGenVersionAppend decides that (oldDoc is null on create).
+    // Author fixed at create and kept for good; the author edits their own.
     if (oldDoc === null) {
       if (doc.userHandle !== user.userHandle) throw { forbidden: "not author" };
     } else if (doc.userHandle !== oldDoc.userHandle) {
       throw { forbidden: "cannot change author" };
-    } else if (ctx.isImgGenVersionAppend(doc, oldDoc) === false && oldDoc.userHandle !== user.userHandle) {
+    } else if (oldDoc.userHandle !== user.userHandle) {
       throw { forbidden: "not author" };
     }
     ctx.requireAccess(doc.channelId);
@@ -335,7 +332,7 @@ export function chat(doc, oldDoc, user, ctx) {
 }
 ```
 
-`ctx.requireAccess(channel)` gates on channel **membership** (a `grant.users`/`grant.roles` grant), NOT on `grant.public`, which is read-only — so a channel anyone signed-in should post to must **not** gate writes on `requireAccess` (it would block every non-owner); just check the author and route the doc. Reserve `requireAccess` for members-only channels whose writers you granted membership. For writes that need no sign-in at all ("anyone can sign/submit"), return `allowAnonymous: true` instead of throwing on `!user`. A grant/member/role doc must also return `channels` (route it to an owner-readable admin channel like `["admin:grants"]`) — a channel-less result is rejected as "unreadable write". On updates of shared-visible docs, keep ownership immutable (`if (oldDoc && doc.<authorField> !== oldDoc.<authorField>) throw`, where `<authorField>` is your doc's author field — `authorHandle`/`userHandle`/`senderHandle`) rather than requiring the updater to BE the author — image version appends run as the VIEWING user, and an author-only update gate turns every other viewer's generation into a billed deny-retry. Reserve author-only updates for genuinely private per-user docs; on shared docs, let a non-author through only when `ctx.isImgGenVersionAppend(doc, oldDoc)` accepts the write (as `chat.message` above shows) — it permits exactly one legitimate ImgGen version append and requires every other field unchanged.
+`ctx.requireAccess(channel)` gates on channel **membership** (a `grant.users`/`grant.roles` grant), NOT on `grant.public`, which is read-only — so a channel anyone signed-in should post to must **not** gate writes on `requireAccess` (it would block every non-owner); just check the author and route the doc. Reserve `requireAccess` for members-only channels whose writers you granted membership. For writes that need no sign-in at all ("anyone can sign/submit"), return `allowAnonymous: true` instead of throwing on `!user`. A grant/member/role doc must also return `channels` (route it to an owner-readable admin channel like `["admin:grants"]`) — a channel-less result is rejected as "unreadable write". On updates, keep ownership immutable (`if (oldDoc && doc.<authorField> !== oldDoc.<authorField>) throw`, where `<authorField>` is your doc's author field — `authorHandle`/`userHandle`/`senderHandle`) and let the author edit their own (as `chat.message` above shows). Pictures other viewers make for a shared doc are their own records in the media database, so an author-only update keeps every picture flowing.
 
 **A follow-up edit that adds a NEW doc type updates `access.js` FIRST.** The app runs live while your edits stream in, and writes are enforced against the access.js that was in force before this turn until the whole turn completes — so a `db.put` of a doc type the old function rejects fails immediately (`unknown document type`), even though your access.js update lands later in the same reply. Emit the access.js edit adding the new type's branch before the App.jsx edits that write it. And never fire-and-forget background writes of a newly added type: gate seed/auto-write effects on `useVibe(dbName)` — `if (!ready || !can.create(sampleDoc).ok) return;` with `ready`/`can` in the effect deps, checking a representative sample of **each** doc type the effect writes — so a not-yet-allowed write is skipped quietly instead of surfacing rejection errors the user didn't cause.
 
@@ -378,14 +375,12 @@ export function wall(doc, oldDoc, user, ctx) {
   }
 
   if (doc.type === "post") {
-    // Author fixed at create; ownership immutable. On update a non-author may
-    // only append one legitimate ImgGen version — the platform predicate
-    // ctx.isImgGenVersionAppend decides that (oldDoc is null on create).
+    // Author fixed at create and kept for good; the author edits their own.
     if (oldDoc === null) {
       if (doc.authorHandle !== user.userHandle) throw { forbidden: "not author" };
     } else if (doc.authorHandle !== oldDoc.authorHandle) {
       throw { forbidden: "cannot change author" };
-    } else if (ctx.isImgGenVersionAppend(doc, oldDoc) === false && oldDoc.authorHandle !== user.userHandle) {
+    } else if (oldDoc.authorHandle !== user.userHandle) {
       throw { forbidden: "not author" };
     }
     return { channels: [doc.channelId] };
@@ -421,7 +416,7 @@ export function board(doc, oldDoc, user, ctx) {
 }
 ```
 
-`ctx.requireAccess(channel)` gates on **membership** (a `grant.users`/`grant.roles` grant), not `grant.public` (read-only) — so an open feed anyone signed-in may post to must not gate writes on it; check the author and route the doc. For writes needing no sign-in ("anyone can sign/submit"), return `allowAnonymous: true` instead of throwing on `!user`. A grant/share/request doc must also return `channels` — a channel-less result is rejected. On updates of shared-visible docs, keep ownership immutable (`doc.authorHandle !== oldDoc.authorHandle` → throw) rather than requiring the updater to BE the author — image version appends run as the viewing user, and an author-only update gate turns every other viewer's generation into a billed deny-retry. Reserve author-only updates for genuinely private per-user docs; on shared docs, let a non-author through only when `ctx.isImgGenVersionAppend(doc, oldDoc)` accepts the write (as `wall.post` above shows) — it permits exactly one legitimate ImgGen version append and requires every other field unchanged.
+`ctx.requireAccess(channel)` gates on **membership** (a `grant.users`/`grant.roles` grant), not `grant.public` (read-only) — so an open feed anyone signed-in may post to must not gate writes on it; check the author and route the doc. For writes needing no sign-in ("anyone can sign/submit"), return `allowAnonymous: true` instead of throwing on `!user`. A grant/share/request doc must also return `channels` — a channel-less result is rejected. On updates, keep ownership immutable (`doc.authorHandle !== oldDoc.authorHandle` → throw) and let the author edit their own (as `wall.post` above shows). Pictures other viewers make for a shared doc are their own records in the media database, so an author-only update keeps every picture flowing.
 
 **Build the permission model around what a newcomer should be able to do.** When a stranger opens the app, they should immediately be able to do the thing it's _for_ — add their own entries, post a note, drop a pin, join a shared canvas. So the default is: every signed-in visitor is a first-class participant who creates their own objects and edits what they created (`doc.authorHandle === user.userHandle`, checking `oldDoc` on updates), from first load, with no one needing to let them in.
 
@@ -550,9 +545,15 @@ import { useVibe } from "use-vibes";
         {docs.map((doc) => (
           <li key={doc._id}>
             {doc.text}
-            <button onClick={() => database.put({ ...doc, favorite: !doc.favorite })}>
-              {doc.favorite ? "★" : "☆"}
-            </button>
+            <IconButton
+              size="sm"
+              variant={doc.favorite ? "solid" : "quiet"}
+              tone="warn"
+              aria-pressed={Boolean(doc.favorite)}
+              label={doc.favorite ? "Unfavorite" : "Favorite"}
+              icon={<Icon name="star" size="sm" />}
+              onClick={() => database.put({ ...doc, favorite: !doc.favorite })}
+            />
           </li>
         ))}
       </ul>
@@ -564,7 +565,7 @@ import { useVibe } from "use-vibes";
 >>>>>>> REPLACE
 ```
 
-The AI agent writes the access function (so it knows the role names) and writes the UI (so it knows which roles gate which components). The `access` object is the bridge — it lets the UI reflect server-enforced permissions without duplicating the logic.
+The AI agent writes the access function (so it knows the role names) and writes the UI (so it knows which roles gate which components). The `access` object is the link between them — it lets the UI reflect server-enforced permissions without duplicating the logic.
 
 The access function is the single source of truth for permissions. Gate write surfaces with `useVibe(dbName).can`, which runs this same access function. The `access` object (`access.hasRole(name)`, `access.hasChannel(name)`) reflects the viewer's resolved roles/channels for DISPLAY — role badges, showing/hiding read-only sections — not as the write gate.
 
@@ -611,14 +612,12 @@ export function announcements(doc, oldDoc, user, ctx) {
   }
 
   if (doc.type === "post") {
-    // Author fixed at create; ownership immutable. On update a non-author may
-    // only append one legitimate ImgGen version — the platform predicate
-    // ctx.isImgGenVersionAppend decides that (oldDoc is null on create).
+    // Author fixed at create and kept for good; the author edits their own.
     if (oldDoc === null) {
       if (doc.authorHandle !== user.userHandle) throw { forbidden: "not author" };
     } else if (doc.authorHandle !== oldDoc.authorHandle) {
       throw { forbidden: "cannot change author" };
-    } else if (ctx.isImgGenVersionAppend(doc, oldDoc) === false && oldDoc.authorHandle !== user.userHandle) {
+    } else if (oldDoc.authorHandle !== user.userHandle) {
       throw { forbidden: "not author" };
     }
     ctx.requireAccess(doc.channel);
@@ -636,12 +635,12 @@ App.jsx — `useVibe().can` gates every write surface (posts AND owner-only mana
 import React from "react";
 import { useFireproof } from "use-fireproof";
 import { useViewer, useVibe } from "use-vibes";
-import { Button, Textarea } from "@vibes.diy/look";
+import { Button, Field, RowCard, Skeleton, Stack, Text, Textarea } from "@vibes.diy/pouf";
 
 export default function App() {
   const { viewer, isViewerPending, ViewerTag } = useViewer();
   const { database, useLiveQuery, access } = useFireproof("announcements");
-  const { can } = useVibe("announcements");
+  const { can, ready } = useVibe("announcements");
 
   const { docs: posts } = useLiveQuery("type", { key: "post" });
   const [draft, setDraft] = React.useState("");
@@ -654,7 +653,9 @@ export default function App() {
   // ctx.requireRole("owner"), so this verdict is false for everyone but the owner.
   const canGrant = can.create({ type: "roleGrant", role: "poster", userHandle: "newUser" });
 
-  if (isViewerPending) return null;
+  // Hold the page while identity and the access function resolve: every verdict
+  // reads pending until then, so the write surface waits on a quiet checking state.
+  if (isViewerPending || !ready) return <Skeleton />;
 
   async function submitPost() {
     if (!draft.trim() || !viewer) return;
@@ -669,7 +670,7 @@ export default function App() {
   }
 
   return (
-    <div>
+    <Stack gap={4}>
       {/* No current-user pill / sign-in button here — that's system chrome in the
           Vibes Switch (the panel the logo opens). ViewerTag below renders post authors. */}
 
@@ -681,32 +682,34 @@ export default function App() {
             submitPost();
           }}
         >
-          <Textarea value={draft} onChange={(e) => setDraft(e.target.value)} className="w-full" />
-          <Button type="submit">Post</Button>
+          <Stack gap={3}>
+            <Field label="Announcement">{(id, describedBy) => <Textarea id={id} describedBy={describedBy} value={draft} onChange={setDraft} />}</Field>
+            <Button type="submit">Post</Button>
+          </Stack>
         </form>
       ) : (
-        viewer && <p className="text-muted-foreground">{canPost.reason}</p>
+        viewer && <Text muted>Posting opens up once the owner adds you as a poster.</Text>
       )}
 
       {/* owner-only management — gated on can.* */}
       {canGrant.ok && (
-        <Button variant="secondary" onClick={() => database.put({ type: "roleGrant", role: "poster", userHandle: "newUser" })}>
+        <Button type="button" variant="quiet" onClick={() => database.put({ type: "roleGrant", role: "poster", userHandle: "newUser" })}>
           Grant poster role
         </Button>
       )}
 
       {posts.map((p) => (
-        <div key={p._id}>
+        <RowCard key={p._id}>
           <ViewerTag userHandle={p.authorHandle} />
-          <p>{p.body}</p>
+          <Text>{p.body}</Text>
           {can.delete(p).ok && (
-            <Button variant="destructive" size="sm" onClick={() => database.del(p._id)}>
+            <Button type="button" variant="quiet" tone="down" size="sm" onClick={() => database.del(p._id)}>
               Delete
             </Button>
           )}
-        </div>
+        </RowCard>
       ))}
-    </div>
+    </Stack>
   );
 }
 ```
@@ -722,12 +725,12 @@ const canRevoke = can.delete(grantDoc);
 {(canAppoint.ok || canRevoke.ok) && (
   <ModeratorPanel>
     {canAppoint.ok && (
-      <Button onClick={() => database.put({ type: "modGrant", role: "moderator", userHandle })}>Appoint</Button>
+      <Button type="button" onClick={() => database.put({ type: "modGrant", role: "moderator", userHandle })}>Appoint</Button>
     )}
     {canRevoke.ok ? (
-      <Button variant="destructive" onClick={() => database.del(grantDoc._id)}>Revoke</Button>
+      <Button type="button" variant="quiet" tone="down" onClick={() => database.del(grantDoc._id)}>Revoke</Button>
     ) : (
-      <p>{canRevoke.reason}</p>
+      <Text muted>{canRevoke.reason}</Text>
     )}
   </ModeratorPanel>
 )}
@@ -750,14 +753,12 @@ export function chat(doc, oldDoc, user, ctx) {
   }
 
   if (doc.type === "post") {
-    // Author fixed at create; ownership immutable. On update a non-author may
-    // only append one legitimate ImgGen version — the platform predicate
-    // ctx.isImgGenVersionAppend decides that (oldDoc is null on create).
+    // Author fixed at create and kept for good; the author edits their own.
     if (oldDoc === null) {
       if (doc.authorHandle !== user.userHandle) throw { forbidden: "not author" };
     } else if (doc.authorHandle !== oldDoc.authorHandle) {
       throw { forbidden: "cannot change author" };
-    } else if (ctx.isImgGenVersionAppend(doc, oldDoc) === false && oldDoc.authorHandle !== user.userHandle) {
+    } else if (oldDoc.authorHandle !== user.userHandle) {
       throw { forbidden: "not author" };
     }
     // Any signed-in author may post to this open channel. Do NOT call
@@ -792,7 +793,7 @@ App.jsx — `access.hasChannel()` filters which channels are visible (display);
 =======
       {/* filter to channels the viewer can see — use _id as channel identifier (display only) */}
       {channels.filter((ch) => access.hasChannel(ch._id)).map((ch) => (
-        <button key={ch._id} onClick={() => setChannel(ch._id)}>{ch.name}</button>
+        <Button key={ch._id} type="button" size="sm" variant={ch._id === channel ? "solid" : "quiet"} tone="info" onClick={() => setChannel(ch._id)}>{ch.name}</Button>
       ))}
 
       {/* gate the write surface on useVibe().can */}
@@ -863,18 +864,18 @@ App.jsx — `access.hasChannel()` shows only the lists the viewer belongs to; `u
 
 ```jsx
 <<<<<<< SEARCH
-      {viewer && <button onClick={addNote}>+ note</button>}
+      {viewer && <Button type="button" onClick={addNote}>Add a note</Button>}
 =======
       {/* create list — any signed-in visitor can start their own */}
       {can.create({ type: "list", author: me?.userHandle }).ok && (
-        <button onClick={() => database.put({ type: "list", author: me.userHandle, name: "new list" })}>
-          + new list
-        </button>
+        <Button type="button" onClick={() => database.put({ type: "list", author: me.userHandle, name: "new list" })}>
+          New list
+        </Button>
       )}
 
       {visible.map((list) => (
         <section key={list._id}>
-          <h3>{list.name}</h3>
+          <Heading level={2}>{list.name}</Heading>
           {/* add-item form is shown only when the access fn would accept the write */}
           {canAddItem(list) && <AddItemForm listId={list._id} />}
           {/* invite peer — only shown to members of this list */}
@@ -987,7 +988,7 @@ App.jsx — the same board list serves the creator and the invited recipient. `B
 ```jsx partial
 function BoardWorkspace({ ensureDefaultBoard }) {
   const { useLiveQuery } = useFireproof("boards");
-  const { me, can } = useVibe("boards");
+  const { me, can, ready } = useVibe("boards");
   const [pickedBoardId, setPickedBoardId] = React.useState();
   const { docs: boards } = useLiveQuery("type", { key: "board" });
   const ownBoardId = me?.userHandle ? `default-${me.userHandle}` : undefined;
@@ -1002,15 +1003,21 @@ function BoardWorkspace({ ensureDefaultBoard }) {
     boards[0];
   return (
     <section>
-      {ownBoardId && !boards.some((board) => board._id === ownBoardId) && can.create(ownBoard).ok && (
-        <button onClick={createOwnBoard}>Create my board</button>
+      {ownBoardId && !boards.some((board) => board._id === ownBoardId) && (!ready || can.create(ownBoard).ok) && (
+        <Button type="button" onClick={createOwnBoard} disabled={!ready}>Create my board</Button>
       )}
-      <label>
-        Board
-        <select value={board?._id ?? ""} onChange={(event) => setPickedBoardId(event.target.value)} disabled={boards.length === 0}>
-          {boards.map((board) => <option key={board._id} value={board._id}>{board.name ?? board._id}</option>)}
-        </select>
-      </label>
+      <Field label="Board">
+        {(id, describedBy) => (
+          <Select
+            id={id}
+            describedBy={describedBy}
+            value={board?._id ?? ""}
+            onChange={setPickedBoardId}
+            disabled={boards.length === 0}
+            options={boards.map((board) => ({ value: board._id, label: board.name ?? board._id }))}
+          />
+        )}
+      </Field>
       {board && <BoardContents board={board} />}
     </section>
   );
@@ -1028,11 +1035,11 @@ const sharedWithMe = boards.filter((board) => board.creatorHandle !== me?.userHa
 // …
 {sharedWithMe.length > 0 && (
   <section>
-    <h2>Shared with you</h2>
+    <Heading level={2}>Shared with you</Heading>
     {sharedWithMe.map((board) => (
-      <button key={board._id} type="button" onClick={() => setPickedBoardId(board._id)}>
-        {board.name ?? board._id} <ViewerTag userHandle={board.creatorHandle} />
-      </button>
+      <RowCard key={board._id} onClick={() => setPickedBoardId(board._id)}>
+        <Text>{board.name ?? board._id}</Text> <ViewerTag userHandle={board.creatorHandle} />
+      </RowCard>
     ))}
   </section>
 )}
@@ -1085,14 +1092,12 @@ export function chat(doc, oldDoc, user, ctx) {
   }
 
   if (doc.type === "message") {
-    // Author fixed at create; ownership immutable. On update a non-author may
-    // only append one legitimate ImgGen version — the platform predicate
-    // ctx.isImgGenVersionAppend decides that (oldDoc is null on create).
+    // Author fixed at create and kept for good; the author edits their own.
     if (oldDoc === null) {
       if (doc.userHandle !== user.userHandle) throw { forbidden: "not author" };
     } else if (doc.userHandle !== oldDoc.userHandle) {
       throw { forbidden: "cannot change author" };
-    } else if (ctx.isImgGenVersionAppend(doc, oldDoc) === false && oldDoc.userHandle !== user.userHandle) {
+    } else if (oldDoc.userHandle !== user.userHandle) {
       throw { forbidden: "not author" };
     }
     ctx.requireAccess(doc.channelId);
@@ -1137,13 +1142,13 @@ App.jsx — show only channels the viewer is in (`access.hasChannel`), gate the
       {viewer && <Compose onSend={send} />}
 =======
       {/* sidebar lists only the channels the viewer is in */}
-      <nav>{myChannels.map((ch) => <button key={ch._id} onClick={() => setChannelId(ch._id)}>{ch.name}</button>)}</nav>
+      <nav>{myChannels.map((ch) => <Button key={ch._id} type="button" size="sm" variant={ch._id === channelId ? "solid" : "quiet"} tone="info" onClick={() => setChannelId(ch._id)}>{ch.name}</Button>)}</nav>
 
       {/* compose is shown only when the viewer is a member of the selected channel */}
       {channelId && canPost.ok ? (
         <Compose onSend={(text) => database.put({ type: "message", channelId, userHandle: me.userHandle, text })} />
       ) : (
-        <p>{canPost.reason || "Pick a channel"}</p>
+        <Text muted>{canPost.reason || "Pick a channel"}</Text>
       )}
 
       {/* any member of this channel may invite a peer */}
@@ -1203,7 +1208,7 @@ App.jsx — anonymous-friendly submit form, owner-only config panel, role-gated
 
 ```jsx
 <<<<<<< SEARCH
-      <input value={answer} onChange={(e) => setAnswer(e.target.value)} />
+      <Field label="Your answer">{(id, describedBy) => <Input id={id} describedBy={describedBy} value={answer} onChange={setAnswer} />}</Field>
 =======
       {/* anyone (signed in OR anonymous) can submit — only stamp authorHandle when present */}
       {canSubmit.ok ? (
@@ -1211,10 +1216,10 @@ App.jsx — anonymous-friendly submit form, owner-only config panel, role-gated
           e.preventDefault();
           database.put({ type: "survey-response", question: "q1", answer, ...(me && { authorHandle: me.userHandle }) });
         }}>
-          <input value={answer} onChange={(e) => setAnswer(e.target.value)} />
-          <button type="submit">Submit</button>
+          <Field label="Your answer">{(id, describedBy) => <Input id={id} describedBy={describedBy} value={answer} onChange={setAnswer} />}</Field>
+          <Button type="submit">Submit</Button>
         </form>
-      ) : <p>{canSubmit.reason}</p>}
+      ) : <Text muted>{canSubmit.reason}</Text>}
 
       {/* owner-only admin to wire up the feedback-team role */}
       {canConfigure.ok && <ConfigPanel />}
@@ -1242,8 +1247,38 @@ export function guestbook(doc, oldDoc, user, ctx) {
 
 In `App.jsx`, gate the form on `useVibe("guestbook").can.create({ type: "entry" }).ok` (true for anon here) and stamp `authorHandle: me?.userHandle` only when signed in. Without `allowAnonymous: true` the runtime rejects the null-user write even though the function didn't throw — so the guestbook would silently require login, the exact miss to avoid.
 
+The app before the edit, a note form wrapped in a sign-in wall:
+
+```jsx
+import { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { Field, Input, Stack } from "@vibes.diy/pouf";
+import { SignInGate } from "./SignInGate.jsx";
+
+export default function App() {
+  const { database } = useFireproof("notes");
+  const [message, setMessage] = useState("");
+  return (
+    <Stack>
+      <SignInGate>
+        <Field label="Your note">{(id, describedBy) => <Input id={id} describedBy={describedBy} value={message} onChange={setMessage} />}</Field>
+      </SignInGate>
+    </Stack>
+  );
+}
+```
+
 App.jsx — gate the form on `can.create({ type: "entry" }).ok`, which is true even when nobody is signed in:
 
+```jsx
+<<<<<<< SEARCH
+import { Field, Input, Stack } from "@vibes.diy/pouf";
+=======
+import { Button, Field, Input, RowCard, Stack, Text } from "@vibes.diy/pouf";
+import { useVibe } from "use-vibes";
+>>>>>>> REPLACE
+```
+
 ```jsx
 <<<<<<< SEARCH
   const { database } = useFireproof("notes");
@@ -1260,7 +1295,7 @@ App.jsx — gate the form on `can.create({ type: "entry" }).ok`, which is true e
 ```jsx
 <<<<<<< SEARCH
       <SignInGate>
-        <input value={message} onChange={(e) => setMessage(e.target.value)} />
+        <Field label="Your note">{(id, describedBy) => <Input id={id} describedBy={describedBy} value={message} onChange={setMessage} />}</Field>
       </SignInGate>
 =======
       {canSign.ok ? (
@@ -1270,11 +1305,11 @@ App.jsx — gate the form on `can.create({ type: "entry" }).ok`, which is true e
           database.put({ type: "entry", message, createdAt: Date.now(), ...(me && { authorHandle: me.userHandle }) });
           setMessage("");
         }}>
-          <input value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Leave a note" />
-          <button type="submit">Sign</button>
+          <Field label="Your note">{(id, describedBy) => <Input id={id} describedBy={describedBy} value={message} onChange={setMessage} placeholder="Leave a note" />}</Field>
+          <Button type="submit">Sign</Button>
         </form>
-      ) : <p>{canSign.reason}</p>}
+      ) : <Text muted>{canSign.reason}</Text>}
 
-      {entries.map((e) => <li key={e._id}>{e.message} — {e.authorHandle || "anonymous"}</li>)}
+      {entries.map((e) => <RowCard key={e._id}><Text>{e.message} — {e.authorHandle || "anonymous"}</Text></RowCard>)}
 >>>>>>> REPLACE
 ```

package/llms/backend.js

@@ -1,7 +1,7 @@
 export const backendConfig = {
     name: "backend",
     label: "backend-js",
-    description: "server-side backend.js file: answer HTTP/webhook requests at the app's /_api URL, react to committed data changes, and run scheduled jobs — its writes go through the app's own access rules; reads a web page, feed or API the person names and hands it to the page through /_api; sends a record on to another service through a Zapier Catch Hook when the person asks for Zapier",
-    cues: ["zapier", "catch hook"],
+    description: "server-side backend.js file: answer HTTP/webhook requests at the app's /_api URL, react to committed data changes, and run scheduled jobs — its writes go through the app's own access rules; reads a web page, feed or API the person names and hands it to the page through /_api; emails, notifies and reminds people through ctx.notify by handle — a weekly digest, a summary for the owner, a Monday email to the manager — and invites a recipient who is not in the app yet; and sends a record to a tool the person names (Slack, Google Sheets, a CRM, Zapier) through a Zapier Catch Hook the owner connects",
+    cues: ["email", "notify", "remind", "digest", "zapier", "catch hook", "webhook", "slack", "sheets", "crm"],
 };
 //# sourceMappingURL=backend.js.map

package/llms/backend.js.map

@@ -1 +1 @@
-{"version":3,"file":"backend.js","sourceRoot":"","sources":["../../jsr/llms/backend.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,YAAY;IACnB,WAAW,EACT,uXAAuX;IAOzX,IAAI,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC;CAC/B,CAAC"}
+{"version":3,"file":"backend.js","sourceRoot":"","sources":["../../jsr/llms/backend.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,YAAY;IACnB,WAAW,EACT,ylBAAylB;IAO3lB,IAAI,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC;CAC3G,CAAC"}

package/llms/backend.md

@@ -24,7 +24,9 @@ create or mention `backend.js`.
   "form POST", "Stripe/GitHub/Sonos sends us…". Something **external → us**.
 - **`onChange`** — "when X is created", "after a write", "notify", "send an
   email", "aggregate", "moderate", "sync to…". An **internal write → a side
-  effect**.
+  effect**: `ctx.notify` for every person the app emails, notifies or reminds,
+  and a Zapier Catch Hook for a tool the person names (Slack, Google Sheets, a
+  CRM).
 - **`scheduled`** — "every N minutes", "poll", "check periodically", "cron",
   "cleanup", "digest". **Timer-driven**, no user in the loop.
 
@@ -308,32 +310,38 @@ const gh = await ctx.github.fetch("/repos/acme/site/issues", { method: "POST", b
     CORS headers (`api.github.com` is seeded; additions are a PR to the platform
     repo).
 
-    **Sending a record to another service goes through Zapier.**
-    `hooks.zapier.com` is on that list for a `POST` to a Catch Hook, so an app can
-    hand a new record to any tool Zapier reaches — Clio, Slack, Google Sheets,
-    email — without holding that tool's credentials. The owner makes a Zap whose
-    trigger is "Webhooks by Zapier → Catch Hook", saves the hook URL as a secret
-    (`vibes-diy secrets set ZAPIER_HOOK_URL ...`), and the backend posts JSON to
-    `ctx.secrets.ZAPIER_HOOK_URL`. The URL **is** the credential: never write it
-    into a document or a response body. Treat any 2xx as accepted and mark the
-    record sent; on anything else **throw** — a handler that returns normally has
-    acknowledged the event, so the platform will not call it again for that write,
-    while a thrown `onChange` is re-delivered with backoff (a handful of tries over
-    a few minutes) and a run that never succeeds lands in the app's logs.
-
-    **Zapier is the last door, never the first.**
-    Reach for it only when the person names Zapier — a Zap, a Catch Hook, a hook URL
-    they already made — or when the destination has no other admitted door. A public
-    read, a CORS-open endpoint, the connected GitHub repo, or simply keeping the
-    record in this app and showing it on the owner's screen all come first, and a
-    record the app already holds needs no hook at all. On a build that was just made,
-    say what the app does on its own and leave the Zap as a next step the owner can
-    ask for.
+    **Emailing, notifying or reminding a person is `ctx.notify`.**
+    `ctx.notify` reaches a person in the app by handle — the owner, a member, a
+    manager — on their bell, their push and their email, so "email the manager
+    every Monday", "email me a weekly digest" and "send the owner a summary" are
+    each a `scheduled` handler that calls `ctx.notify`. A recipient who is not in
+    the app yet joins it through the app's invite: the person picker takes their
+    handle, or takes their email address and mails them an invite, and once they
+    arrive every notification reaches them. Keep the record in the app too, so the app's
+    own screen shows what went out.
+
+    **A Catch Hook carries a record to a tool the person names.** When the ask
+    names Slack, Google Sheets, a CRM, Airtable, Notion, Clio, HubSpot or Zapier
+    itself, `hooks.zapier.com` is on the curated list for a `POST` to a Catch Hook, so
+    the app hands the new record to that tool without holding its credentials.
+    The owner makes a Zap whose trigger is "Webhooks by Zapier → Catch Hook",
+    saves the hook URL as a secret (`vibes-diy secrets set ZAPIER_HOOK_URL ...`),
+    and the backend posts JSON to `ctx.secrets.ZAPIER_HOOK_URL`. The URL **is**
+    the credential, so it stays in the secret, out of every document and response
+    body. Write that path gated on the secret
+    (`if (!ctx.secrets.ZAPIER_HOOK_URL) return;`), so the app works fully before
+    any Zap exists, and say in your reply that connecting a Zap to the hook turns
+    that delivery on. Treat any 2xx as accepted and mark the record sent; on
+    anything else **throw** — a handler that returns normally has acknowledged
+    the event, so the platform will not call it again for that write, while a
+    thrown `onChange` is re-delivered with backoff (a handful of tries over a few
+    minutes) and a run that never succeeds lands in the app's logs.
 
     ```js
     export async function onChange(event, ctx) {
       const doc = event.doc;
       if (event.deleted || doc.type !== "intake" || doc.sentToZapier) return;
+      if (!ctx.secrets.ZAPIER_HOOK_URL) return; // no Zap connected yet: the record stays in the app
       const res = await ctx.fetch(ctx.secrets.ZAPIER_HOOK_URL, {
         method: "POST",
         headers: { "content-type": "application/json" },
@@ -589,7 +597,7 @@ export async function scheduled(event, ctx) {
 ```jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
-import { Badge, Card, CardContent } from "@vibes.diy/look";
+import { Badge, Heading, RowCard, Stack, Text } from "@vibes.diy/pouf";
 
 export default function App() {
   const { useLiveQuery } = useFireproof("nodeReleases");
@@ -600,26 +608,26 @@ export default function App() {
 
   return (
     <main className="min-h-screen bg-background text-foreground font-sans mx-auto max-w-2xl p-6">
-      <h1 className="text-3xl font-bold">Node.js releases</h1>
-      {status?.state === "egress-denied" && (
-        <Badge variant="secondary" role="status" className="my-4">
-          showing saved data — live refresh unavailable
-        </Badge>
-      )}
-      <ul className="mt-6 space-y-3">
-        {releases.map((release) => (
-          <li key={release._id}>
-            <Card>
-              <CardContent>
-                <a className="font-bold underline" href={release.url} target="_blank" rel="noreferrer">
-                  {release.title}
-                </a>
-                <time className="ml-3 text-muted-foreground">{release.publishedAt.slice(0, 10)}</time>
-              </CardContent>
-            </Card>
-          </li>
-        ))}
-      </ul>
+      <Stack gap={5}>
+        <Heading level={1}>Node.js releases</Heading>
+        {status?.state === "egress-denied" && (
+          <div role="status">
+            <Badge tone="info">showing saved data — live refresh unavailable</Badge>
+          </div>
+        )}
+        <Stack gap={3}>
+          {releases.map((release) => (
+            <RowCard key={release._id}>
+              <a className="font-bold underline" href={release.url} target="_blank" rel="noreferrer">
+                {release.title}
+              </a>
+              <Text size="sm" muted>
+                {release.publishedAt.slice(0, 10)}
+              </Text>
+            </RowCard>
+          ))}
+        </Stack>
+      </Stack>
     </main>
   );
 }