@vibes.diy/prompts 14.1.20 → 14.1.21

package/llms/access.md

@@ -368,7 +368,7 @@ export function habits(doc, oldDoc, user, ctx) {
 
 The leaderboard is just the access model: read the public `track:` channels and sum them; each viewer additionally sees their own streaks and any buddy who granted them in. A **plain daily habit tracker** — one framed as the user's own, with no catalog, leaderboard, or buddy asked for — is instead the per-visitor shape shown above: every visitor's habits and check-ins on their single `user:${user.userHandle}` channel, self-granted and private to them.
 
-**"Invite", "join", "people can join", "collaborate", "share with", "together", "with my partner/team", or a board/canvas/room/whiteboard a group co-edits → per-object collaboration** (the second worked example above) — each shared thing is ONE object its members reach directly; it needs no owner. Use the per-object recipe: a channel per object (`board:<id>`/`list:<id>`); the creator self-grants at creation (`grant: { users: { [user.userHandle]: [ch] } }`); child docs gate on `ctx.requireAccess(ch)` so any member edits any child in it (not just their own); a member-authored `share` doc grants a peer the same channel; a `request` doc — which takes **no** `requireAccess` — lets a not-yet-member ask to join. Keep the _object's own_ creator field write-once (`if (oldDoc && doc.author !== oldDoc.author) throw`) and a child's object-id immutable. **Two traps to avoid:** don't build it as an open public feed where each person only owns their own items (that abandons the shared membership), and don't gate it behind a single writer (members self-serve via share/request).
+**"Invite", "join", "people can join", "collaborate", "share with", "together", "with my partner/team", or a board/canvas/room/whiteboard a group co-edits → per-object collaboration** (the second worked example above) — each shared thing is ONE object its members reach directly; it needs no owner. Use the per-object recipe: a channel per object (`board:<id>`/`list:<id>`); the creator self-grants at creation (`grant: { users: { [user.userHandle]: [ch] } }`); child docs gate on `ctx.requireAccess(ch)` so any member edits any child in it (not just their own); a member-authored `share` doc grants a peer the same channel; a `request` doc — which takes **no** `requireAccess` — lets a not-yet-member ask to join. Keep the _object's own_ creator field write-once (`if (oldDoc && doc.author !== oldDoc.author) throw`) and a child's object-id immutable. **Two traps to avoid:** don't build it as an open public feed where each person only owns their own items (that abandons the shared membership), and don't gate it behind a single writer (members self-serve via share/request). The app owner is not special in the data model: any signed-in person creates their own object and invites a friend into it, and the rule keys on `user.userHandle` or the object's creator, never on `user.isOwner`.
 
 **Ownership is just the object graph** — whoever authored or created a doc owns it (`doc.authorHandle === user.userHandle`, checked against `oldDoc` on updates). There's no broadcaster shape to reach for by default, and **owner-only publishing is a dead end** — never gate the content itself on `requireRole("owner")`. **A blog, magazine, or publication is public read + author-owned posts, with the owner controlling the _author roster_:** the owner approves authors with a grant doc (`if (doc.type === "author") { ctx.requireRole("owner"); return { channels: ["blog:authors"], grant: { users: { [doc.authorHandle]: ["blog:authors"] }, roles: { owner: ["blog:authors"] } } }; }` — the **one** place `requireRole("owner")` belongs, gating who may author, never the posts); a post then gates on `ctx.requireAccess("blog:authors")` (membership) and is author-owned (`doc.authorHandle === user.userHandle` + the `oldDoc` check), so once approved each author's post is _their own_ object — only they edit it, and they moderate the comments on it (a comment is allowed if it's your comment **or** you own the post: `doc.authorHandle === user.userHandle || doc.postAuthorHandle === user.userHandle`). A personal blog is just this with a roster of one. Always gate write UI on `useVibe(dbName).can`.
 
@@ -674,7 +674,7 @@ Channel `_id` is the channel identifier everywhere. The access function uses `do
 
 ### Example: Per-object sharing (collaborate on your own objects, no admin)
 
-Reach for this whenever the prompt says **invite, join, collaborate, share with, together, with my partner/team** — a shared shopping list you invite a partner to, a whiteboard people can join, a trip a group plans together. A list app where every signed-in user makes their own lists, sees only their own, and can invite anyone to collaborate on a specific list — peer to peer, with no app admin in the loop. The pattern: **a channel per object** (`list:<id>`); the creator grants themselves that channel at creation; child docs (items) gate on `ctx.requireAccess` of the list's channel, so **any member edits any item**; any current member shares the list by granting another user the same channel. Membership is direct `grant.users`, so each viewer's access scales with their own memberships.
+Reach for this whenever the prompt says **invite, join, collaborate, share with, together, with my partner/team** — a shared shopping list you invite a partner to, a whiteboard people can join, a trip a group plans together. A list app where every signed-in user makes their own lists, sees only their own, and can invite anyone to collaborate on a specific list — peer to peer, with no app admin in the loop. The pattern: **a channel per object** (`list:<id>`); the creator grants themselves that channel at creation; child docs (items) gate on `ctx.requireAccess` of the list's channel, so **any member edits any item**; any current member shares the list by granting another user the same channel. Membership is direct `grant.users`, so each viewer's access scales with their own memberships. Nothing a person writes reaches anyone else until they chose it: a per-object channel starts with its creator as the only reader, and every other reader arrives through a grant that creator wrote.
 
 access.js
 
@@ -755,6 +755,83 @@ App.jsx — `access.hasChannel()` shows only the lists the viewer belongs to; `u
 >>>>>>> REPLACE
 ```
 
+#### The same shape with a default object per person, and a member doc that names the friend
+
+Reach for this variant whenever the app is one shared *thing* people keep coming back to — a board, a trip, a game night's scoreboard, a hiking group's trail list. Everything above still holds; three additions make it feel finished from the first load:
+
+- **Every signed-in person already has one object, with no doc to create.** Their default channel is derived from their own handle — `` `board:default-${user.userHandle}` `` — so a brand-new visitor opens the app, types, and their first item lands. Each write to it re-grants that person their own channel, because there is no object doc carrying the grant. **The child doc stores that board id rather than having each writer derive one**: the create writes `` boardId: pickedBoardId || `default-${me.userHandle}` `` and the rule holds it fixed from then on, so a card stays on the board its creator put it on however many people edit it later.
+- **Membership is a `member` doc, and picking the friend is `HandleInput`** (`useViewer()`, see use-viewer.md — the platform's people-picker, so the handle on the doc is one the platform resolved). The doc grants the named person the object's channel: `` grant: { users: { [doc.userHandle]: [chan] } } ``.
+- **The object's creator is its admin**, held on a second channel (`` `${chan}/admin` ``) that the creator self-grants at creation. Adding a member is gated on that admin channel, so members collaborate and the creator decides who joins. The app owner holds no place in any of this: every rule reads `user.userHandle` or the object's own `creatorHandle`.
+
+access.js
+
+```js
+export function boards(doc, oldDoc, user, ctx) {
+  if (!user?.userHandle) throw { forbidden: "sign in" };
+  const safeId = (id) => {
+    if (typeof id !== "string" || !/^[A-Za-z0-9_-]+$/.test(id)) throw { forbidden: "bad id" };
+    return id;
+  };
+  const myDefault = "default-" + user.userHandle;
+  const ch = (id) => "board:" + safeId(id);
+
+  if (doc.type === "board") {
+    // Anyone signed in makes their own board; the creator holds it and its admin channel.
+    if (oldDoc) {
+      if (doc.creatorHandle !== oldDoc.creatorHandle) throw { forbidden: "creator is fixed" };
+      ctx.requireAccess(ch(doc._id) + "/admin"); // renaming is an admin act — updates only
+    } else if (doc.creatorHandle !== user.userHandle) {
+      throw { forbidden: "you must be the creator" };
+    }
+    return { channels: [ch(doc._id)], grant: { users: { [doc.creatorHandle]: [ch(doc._id), ch(doc._id) + "/admin"] } } };
+  }
+
+  if (doc.type === "card") {
+    // The card STORES its board id from the moment it is created (the client writes the
+    // creator's own default when the person picked no board) and holds it fixed after —
+    // including the absent-to-present move, so a later editor's handle always finds the
+    // id already on the doc rather than supplying one.
+    if (!oldDoc && (typeof doc.boardId !== "string" || doc.boardId.length === 0)) {
+      throw { forbidden: "a card names its board" };
+    }
+    if (oldDoc && doc.boardId !== oldDoc.boardId) throw { forbidden: "card stays on its board" };
+    const chan = ch(doc.boardId);
+    if (doc.boardId !== myDefault) ctx.requireAccess(chan); // any member edits any card on it
+    // The implicit default board has no board doc, so each write re-grants its own person.
+    if (doc.boardId === myDefault) {
+      return { channels: [chan], grant: { users: { [user.userHandle]: [chan, chan + "/admin"] } } };
+    }
+    return { channels: [chan] };
+  }
+
+  if (doc.type === "member") {
+    // The board's admin invites a person the picker resolved; the doc IS the grant.
+    if (oldDoc) throw { forbidden: "membership grants are fixed" };
+    if (doc.addedBy !== user.userHandle) throw { forbidden: "addedBy must be you" };
+    if (doc.boardId !== myDefault) ctx.requireAccess(ch(doc.boardId) + "/admin");
+    return { channels: [ch(doc.boardId)], grant: { users: { [doc.userHandle]: [ch(doc.boardId)] } } };
+  }
+
+  throw { forbidden: "unknown document type" };
+}
+```
+
+App.jsx — the invite surface is `HandleInput` plus one `member` write, shown to whoever the access fn would accept:
+
+```jsx
+const { HandleInput } = useViewer();
+const { me, can } = useVibe("boards");
+const canInvite = (boardId) => can.create({ type: "member", boardId, userHandle: "x", addedBy: me?.userHandle }).ok;
+const addMember = (boardId, handle) =>
+  handle && database.put({ type: "member", boardId, userHandle: handle, addedBy: me.userHandle });
+// Every card names its board at creation — the person's own default board when they picked none.
+const addCard = (text) => database.put({ type: "card", boardId: pickedBoardId || `default-${me.userHandle}`, text });
+// …
+{canInvite(board._id) && <HandleInput onChange={(h) => addMember(board._id, h)} placeholder="Add a friend…" />}
+```
+
+Where the app's own maintainer needs to move records through the gate — a CLI migration re-homing cards — `!user.isOwner` reads as a bypass written beside a check (`if (!user.isOwner) ctx.requireAccess(chan)`), never as the arm that decides who may act.
+
 ## More worked round-trip examples
 
 ### Example: Workspace chat with channels

package/llms/index.d.ts

@@ -6,6 +6,7 @@ export { imageGenConfig } from "./image-gen.js";
 export { webAudioConfig } from "./web-audio.js";
 export { d3Config } from "./d3.js";
 export { threeJsConfig } from "./three-js.js";
+export { p5Config } from "./p5.js";
 export { voxelConfig } from "./voxel.js";
 export { webxrConfig } from "./webxr.js";
 export { useViewerConfig } from "./use-viewer.js";
@@ -15,4 +16,4 @@ export { accessConfig } from "./access.js";
 export { connectionsConfig } from "./connections.js";
 export { youtubeConfig } from "./youtube.js";
 export type { LlmConfig } from "./types.js";
-export declare const allConfigs: readonly [import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig];
+export declare const allConfigs: readonly [import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig];

package/llms/index.js

@@ -6,6 +6,7 @@ import { imageGenConfig } from "./image-gen.js";
 import { webAudioConfig } from "./web-audio.js";
 import { d3Config } from "./d3.js";
 import { threeJsConfig } from "./three-js.js";
+import { p5Config } from "./p5.js";
 import { voxelConfig } from "./voxel.js";
 import { webxrConfig } from "./webxr.js";
 import { useViewerConfig } from "./use-viewer.js";
@@ -22,6 +23,7 @@ export { imageGenConfig } from "./image-gen.js";
 export { webAudioConfig } from "./web-audio.js";
 export { d3Config } from "./d3.js";
 export { threeJsConfig } from "./three-js.js";
+export { p5Config } from "./p5.js";
 export { voxelConfig } from "./voxel.js";
 export { webxrConfig } from "./webxr.js";
 export { useViewerConfig } from "./use-viewer.js";
@@ -36,6 +38,7 @@ export const allConfigs = [
     webAudioConfig,
     d3Config,
     threeJsConfig,
+    p5Config,
     voxelConfig,
     fireproofConfig,
     webxrConfig,

package/llms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../jsr/llms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,YAAY;IACZ,cAAc;IACd,cAAc;IACd,QAAQ;IACR,aAAa;IACb,WAAW;IACX,eAAe;IACf,WAAW;IACX,eAAe;IACf,aAAa;IACb,gBAAgB;IAChB,aAAa;IACb,cAAc;IACd,YAAY;IACZ,iBAAiB;IACjB,aAAa;CACL,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../jsr/llms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,YAAY;IACZ,cAAc;IACd,cAAc;IACd,QAAQ;IACR,aAAa;IACb,QAAQ;IACR,WAAW;IACX,eAAe;IACf,WAAW;IACX,eAAe;IACf,aAAa;IACb,gBAAgB;IAChB,aAAa;IACb,cAAc;IACd,YAAY;IACZ,iBAAiB;IACjB,aAAa;CACL,CAAC"}

package/llms/p5.d.ts

@@ -0,0 +1,2 @@
+import type { LlmConfig } from "./types.js";
+export declare const p5Config: LlmConfig;

package/llms/p5.js

@@ -0,0 +1,28 @@
+export const p5Config = {
+    name: "p5",
+    label: "p5.js",
+    description: "p5.js creative-coding library for 2D canvas and WEBGL sketches: generative art, flow " +
+        "fields, particle systems, Perlin noise, seeded deterministic sketches, kaleidoscopes, " +
+        "screensavers, visualisers, drawing and painting toys, plotter-style patterns, still " +
+        "gallery renders with noLoop, and fragment shaders. Covers instance mode in React (one " +
+        "useEffect, instance.remove() on cleanup), the version-pinned esm.sh import, sizing from " +
+        "the host element, pixelDensity, randomSeed/noiseSeed determinism, trails, and touch. " +
+        "p5, p5.js, processing, sketch, creative coding, generative art, canvas art, noise field",
+    cues: [
+        "p5",
+        "p5.js",
+        "processing",
+        "sketch",
+        "generative art",
+        "creative coding",
+        "flow field",
+        "perlin noise",
+        "particle field",
+        "kaleidoscope",
+        "screensaver",
+    ],
+    importModule: "https://esm.sh/p5@1.11.13",
+    importName: "p5",
+    importType: "default",
+};
+//# sourceMappingURL=p5.js.map

package/llms/p5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"p5.js","sourceRoot":"","sources":["../../jsr/llms/p5.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAc;IACjC,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,OAAO;IACd,WAAW,EACT,uFAAuF;QACvF,wFAAwF;QACxF,sFAAsF;QACtF,wFAAwF;QACxF,0FAA0F;QAC1F,uFAAuF;QACvF,yFAAyF;IAC3F,IAAI,EAAE;QACJ,IAAI;QACJ,OAAO;QACP,YAAY;QACZ,QAAQ;QACR,gBAAgB;QAChB,iBAAiB;QACjB,YAAY;QACZ,cAAc;QACd,gBAAgB;QAChB,cAAc;QACd,aAAa;KACd;IAID,YAAY,EAAE,2BAA2B;IACzC,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,SAAS;CACtB,CAAC"}

package/llms/p5.md

@@ -0,0 +1,714 @@
+# p5.js API
+
+_Instance mode, the pinned import, determinism, and the drawing surface for generative sketches_
+
+Any request for generative art, a flow field, a particle field, a screensaver, a
+visualiser, a doodle pad, a drawing toy, a kaleidoscope, a plotter-style pattern
+or "a sketch" is a p5.js app: one canvas created by a p5 **instance**, driven by
+a `setup`/`draw` pair, mounted from a single `React.useEffect(() => {…}, [])`
+and torn down with `instance.remove()` on unmount. p5 gives you a canvas, a
+frame loop, Perlin noise and a seeded random generator for free.
+
+The whole model of p5 is two functions: `setup` runs once, `draw` runs about
+sixty times a second, forever. A still picture is a loop that draws the same
+thing every frame; an animation is a loop where something changed.
+
+## Complete starter — the shell every p5 vibe begins from
+
+This is a full, runnable `App.jsx`. Start here and grow it: the sketch is a
+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
+import React from "react";
+import p5 from "https://esm.sh/p5@1.11.13";
+
+const TAU = Math.PI * 2;
+
+// Canvas pixels cannot follow a CSS variable, so resolve the injected theme
+// tokens to concrete colors once per mount. Setting `color` on a throwaway
+// element and reading it back returns a resolved `rgb(...)` string even when the
+// token's value is a `color-mix()` or another `var()`, and the second argument
+// is the fallback for an app with no theme injected.
+function cssColor(host, token, fallback) {
+  const probe = document.createElement("span");
+  probe.style.display = "none";
+  probe.style.color = `var(${token}, ${fallback})`;
+  host.appendChild(probe);
+  const resolved = window.getComputedStyle(probe).color;
+  probe.remove();
+  return resolved || fallback;
+}
+
+// The sketch is a pure function of its parameters and its host element. Pass the
+// host in explicitly — never read p5's private `_userNode` to find it.
+function makeSketch({ params, host, stepsRef }) {
+  return (p) => {
+    let particles = [];
+    let palette = null;
+    let steps = 0;
+    let w = 0;
+    let h = 0;
+    let t = 0;
+
+    // Read the theme tokens into p5 colors. Called at setup AND whenever the
+    // page's CSS variables change under a live restyle.
+    const readPalette = () => {
+      const bg = p.color(cssColor(host, "--background", "#040a18"));
+      const ink = p.color(cssColor(host, "--accent", "#00e5ff"));
+      const fade = p.color(cssColor(host, "--background", "#040a18"));
+      fade.setAlpha(10);
+      ink.setAlpha(85);
+      palette = { bg, ink, fade };
+    };
+
+    // The step count lives inside this closure, and the Keep button lives in
+    // React — so publish it outward on every step. `p` exists ONLY here.
+    const publishSteps = () => {
+      if (stepsRef) stepsRef.current = steps;
+    };
+
+    const spawn = () => {
+      particles = [];
+      for (let i = 0; i < params.count; i++) {
+        const x = p.random(w);
+        const y = p.random(h);
+        particles.push({ x, y, px: x, py: y });
+      }
+    };
+
+    const advance = () => {
+      steps += 1;
+      t += params.speed * 0.0016;
+      for (const q of particles) {
+        const a = p.noise(q.x * params.grain, q.y * params.grain, t) * TAU * 2;
+        q.px = q.x;
+        q.py = q.y;
+        q.x += Math.cos(a) * params.speed;
+        q.y += Math.sin(a) * params.speed;
+        p.line(q.px, q.py, q.x, q.y);
+        if (q.x < -20 || q.x > w + 20 || q.y < -20 || q.y > h + 20) {
+          q.x = p.random(w);
+          q.y = p.random(h);
+          q.px = q.x;
+          q.py = q.y;
+        }
+      }
+    };
+
+    p.setup = () => {
+      w = Math.max(120, host.clientWidth || 320);
+      h = Math.max(120, host.clientHeight || 240);
+      const c = p.createCanvas(w, h);
+      if (c && c.elt) c.elt.style.display = "block";
+      p.pixelDensity(Math.min(window.devicePixelRatio || 1, 2));
+      p.randomSeed(params.seed);
+      p.noiseSeed(params.seed);
+
+      readPalette();
+      p.stroke(palette.ink);
+      p.strokeWeight(1);
+      p.background(palette.bg);
+      spawn();
+      publishSteps();
+    };
+
+    // ONE frame of the piece: the fade is part of the frame, not decoration
+    // around it, so the still render below replays this and not just advance().
+    const step = () => {
+      // Trails: dim what is already there instead of erasing it.
+      p.noStroke();
+      p.fill(palette.fade);
+      p.rect(0, 0, w, h);
+      p.stroke(palette.ink);
+      advance();
+    };
+
+    p.draw = () => {
+      step();
+      publishSteps();
+    };
+
+    // A live restyle swaps the page's CSS variables in place; the canvas is
+    // painted, so it has to be told. Called by the observer in App below.
+    p.retheme = () => {
+      if (palette === null) return;
+      readPalette();
+      p.stroke(palette.ink);
+      p.background(palette.bg);
+    };
+
+    p.mouseDragged = () => {
+      particles.push({ x: p.mouseX, y: p.mouseY, px: p.mouseX, py: p.mouseY });
+    };
+
+    p.touchMoved = () => {
+      particles.push({ x: p.mouseX, y: p.mouseY, px: p.mouseX, py: p.mouseY });
+      return false; // stop the browser scrolling the page under the finger
+    };
+
+    p.windowResized = () => {
+      w = Math.max(120, host.clientWidth);
+      h = Math.max(120, host.clientHeight);
+      p.resizeCanvas(w, h);
+      p.background(palette.bg);
+      spawn();
+    };
+  };
+}
+
+export default function App() {
+  const hostRef = React.useRef(null);
+  const stepsRef = React.useRef(0);
+  const [params, setParams] = React.useState({
+    count: 1200,
+    grain: 0.0022,
+    speed: 1.6,
+    seed: 1234,
+  });
+  const key = JSON.stringify(params);
+
+  React.useEffect(() => {
+    const node = hostRef.current;
+    if (!node) return undefined;
+    const instance = new p5(makeSketch({ params, host: node, stepsRef }), node);
+
+    // The Style tab recolors a running app by swapping the CSS variables with
+    // no remount, which every styled element follows and the canvas cannot.
+    // Watching the document's stylesheets is what makes the sketch follow too.
+    const observer = new MutationObserver(() => instance.retheme());
+    observer.observe(document.head, { childList: true, subtree: true, characterData: true });
+
+    return () => {
+      observer.disconnect();
+      instance.remove();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+
+  return (
+    <div className="min-h-screen bg-[var(--background)] text-[var(--text-primary)] p-4">
+      <div
+        ref={hostRef}
+        className="w-full h-[70vh] overflow-hidden rounded-[var(--radius)] border border-[var(--border)]"
+        style={{ touchAction: "none" }}
+      />
+      <button
+        className="mt-3 rounded-full border border-[var(--border)] px-4 py-2 text-sm"
+        onClick={() => setParams((prev) => ({ ...prev, seed: Math.floor(Math.random() * 100000) }))}
+      >
+        Reseed
+      </button>
+    </div>
+  );
+}
+```
+
+Everything below grows that shell. The lifecycle above — one instance, one
+`useEffect`, `remove()` on cleanup — stays the spine of every p5 vibe.
+
+## Instance mode is how p5 runs in a vibe
+
+Every p5 tutorial on the internet opens with a global `function setup()`. That
+works when the sketch owns the whole page. In a vibe React owns the page, and
+the sketch is a component that mounts, unmounts, and mounts again every time an
+input changes — so the sketch must be an **instance**.
+
+**Create the instance inside one `React.useEffect` and return `() => instance.remove()` from it.**
+Without the cleanup, every change to the sketch's inputs mounts a fresh instance
+beside the old one and the old one keeps running: two draw loops, then four, a
+leaked canvas per change, and a sketch that gets mysteriously slower and
+blurrier every time a slider moves.
+
+**Assign every lifecycle hook on the instance** — `p.setup`, `p.draw`,
+`p.windowResized`, `p.mouseDragged` — rather than declaring them as globals.
+The instance is the only handle the sketch has, so everything it draws with goes
+through `p`: `p.noise`, `p.random`, `p.line`, `p.fill`.
+
+**Pass the host element into the sketch factory explicitly.** `new p5(sketch, host)`
+draws into that element instead of appending a canvas to the body, which is what
+keeps the layout React's and the pixels p5's. p5 also stashes the node on the
+instance, but that property is private — hand the node to your factory as an
+argument instead of reading `_userNode` back off `p`.
+
+```jsx
+const hostRef = React.useRef(null);
+
+React.useEffect(() => {
+  const node = hostRef.current;
+  if (!node) return undefined;
+  const instance = new p5(makeSketch({ params, host: node }), node);
+  return () => instance.remove();
+}, [key]);
+
+return <div ref={hostRef} className="w-full h-full" style={{ touchAction: "none" }} />;
+```
+
+Because the effect re-runs on a changed `key`, a parameter change is a clean
+swap: the old instance is removed, a new one is built, and the sketch stays a
+pure function of its parameters.
+
+## Importing p5
+
+**Import p5 from a version-pinned esm.sh URL: `import p5 from "https://esm.sh/p5@1.11.13"`.**
+A bare `"p5"` resolves to the 2.x line, which pulls a much heavier module graph
+(acorn, escodegen) into the sandbox for an API this doc never uses.
+
+Pinning is a correctness property here, not caution. For generative art a
+library bump can change what a piece *looks like* — a tweak to `noise()`, a
+different default `pixelDensity` — and a saved piece is a handful of numbers
+that assume the renderer they were saved on. Pin the version the way you would
+date a print.
+
+## Sizing the canvas
+
+Size from the host element, never from `window.innerWidth`: the sketch lives in
+a box React laid out, and the box is rarely the whole window.
+
+```js
+p.setup = () => {
+  w = Math.max(120, host.clientWidth || 320);
+  h = Math.max(120, host.clientHeight || 240);
+  p.createCanvas(w, h);
+};
+
+p.windowResized = () => {
+  w = Math.max(120, host.clientWidth);
+  h = Math.max(120, host.clientHeight);
+  p.resizeCanvas(w, h);
+};
+```
+
+`p.resizeCanvas` clears the canvas, so a trails sketch repaints its background
+and respawns its particles after a resize rather than resuming into an empty
+frame.
+
+**Cap pixel density at 2 for a live canvas and set `p.pixelDensity(1)` for thumbnails.**
+On a retina screen the cost of a frame is fill rate, not JavaScript, and a
+gallery of small cards at device density is the fastest way to make a page
+stutter.
+
+## Colour comes from the injected theme tokens
+
+The platform injects this app's colours as CSS variables — `--background`,
+`--surface`, `--primary`, `--secondary`, `--accent`, `--text-primary`,
+`--text-secondary`, `--border` — and the owner restyles the whole app by swapping
+those values. Everything outside the canvas reads them through Tailwind bracket
+notation (`bg-[var(--background)]`), but **canvas pixels cannot follow a CSS
+variable**, so a sketch that inlines `"#00e5ff"` is the one part of a themed vibe
+its owner can never restyle.
+
+**Resolve the theme tokens to concrete colours at setup, and use a literal only
+as the fallback when no theme is injected.** Reading the custom property
+straight off the host with `getComputedStyle(host).getPropertyValue("--accent")`
+is enough when the token holds a plain colour, but a token whose value is a
+`color-mix()` or another `var()` comes back unresolved and p5 cannot parse it.
+Letting the browser resolve it works for every value:
+
+```js
+function cssColor(host, token, fallback) {
+  const probe = document.createElement("span");
+  probe.style.display = "none";
+  probe.style.color = `var(${token}, ${fallback})`;
+  host.appendChild(probe);
+  const resolved = window.getComputedStyle(probe).color;
+  probe.remove();
+  return resolved || fallback;
+}
+
+p.setup = () => {
+  p.createCanvas(w, h);
+  const ink = p.color(cssColor(host, "--accent", "#00e5ff"));
+  ink.setAlpha(85); // p5 owns the alpha; the token owns the hue
+  p.stroke(ink);
+  p.background(p.color(cssColor(host, "--background", "#040a18")));
+};
+```
+
+Read the tokens **inside `setup`**, not at module scope, so a rebuilt instance
+picks up the current theme. Keep alpha in p5's hands with `setAlpha`: appending
+`"55"` to a token works only if the token happened to be a six-digit hex, and a
+resolved `rgb(...)` string it silently corrupts.
+
+**Reading at setup is not enough on its own, because a restyle does not rebuild
+the sketch.** The Style tab recolors a running app by swapping the page's CSS
+variables in place — it replaces the contents of a `<style>` element in the
+document head, with no remount — so every styled element re-renders through the
+cascade and the canvas, which is painted rather than styled, keeps the colours it
+resolved at setup until something unrelated happens to rebuild it. Watch the
+document's stylesheets and repaint:
+
+```jsx
+// in the sketch: re-read and repaint on demand
+p.retheme = () => {
+  if (palette === null) return; // setup has not run yet
+  readPalette();
+  p.stroke(palette.ink);
+  p.background(palette.bg);
+};
+
+// in the component: same effect that built the instance, same cleanup
+const instance = new p5(makeSketch({ params, host: node }), node);
+const observer = new MutationObserver(() => instance.retheme());
+observer.observe(document.head, { childList: true, subtree: true, characterData: true });
+return () => {
+  observer.disconnect();
+  instance.remove();
+};
+```
+
+`characterData` and `subtree` are both needed: a first push APPENDS the style
+element, and every push after it rewrites the text of the one already there. The
+observer belongs to the effect that built the instance, so it is disconnected in
+the same cleanup that removes it — an observer outliving its sketch is the same
+leak as a draw loop outliving its canvas.
+
+## Determinism — a picture is a handful of numbers
+
+**Call `p.randomSeed(seed)` and `p.noiseSeed(seed)` in `setup` so the sketch replays from its numbers instead of from its pixels.**
+Seed both generators and the simulation becomes reproducible: the same seed
+gives the same starting positions, the same wind, the same drift.
+
+This is the single most useful p5 idea for a vibe with a database. A saved piece
+is not a PNG — it is its parameters, its seed and **how far the simulation had
+run**, a few dozen bytes, and a fresh instance cooks that recipe again as many
+times as you like. So persist the numbers, not the pixels:
+
+`steps` is as load-bearing as `seed` — an animated sketch looks different at step
+100 and step 10,000 — and it is the number that is hardest to get at, because
+**`p` exists only inside the sketch factory and the Keep button lives in React**.
+Reaching for `p.frameCount` from a click handler is a `ReferenceError`. The
+sketch has to publish the count outward; a ref is the smallest way:
+
+```jsx
+// in the component
+const stepsRef = React.useRef(0);
+const { database, useLiveQuery } = useFireproof("pieces");
+
+React.useEffect(() => {
+  const instance = new p5(makeSketch({ params, host: node, stepsRef }), node);
+  return () => instance.remove();
+}, [key]);
+
+// in the sketch factory — `stepsRef` is an argument, so the closure can write it.
+// ONE counter with ONE owner: `advance()` is the only thing that increments it,
+// because it is the only thing that moves the simulation. Everything else reads.
+let steps = 0;
+const advance = () => {
+  steps += 1;
+  // …move every particle, draw its segment…
+};
+
+p.draw = () => {
+  step(); // calls advance() exactly once
+  if (stepsRef) stepsRef.current = steps;
+};
+
+// in the Keep handler — no `p` in sight
+async function keep() {
+  await database.put({ ...params, type: "piece", steps: stepsRef.current, created: Date.now() });
+}
+
+const { docs } = useLiveQuery("created", { descending: true, limit: 12 });
+```
+
+Keep the counter to one owner. It counts calls to `advance()`, so incrementing it
+anywhere else — in `draw`, in `step`, beside the publish — counts the same frame
+twice, and a card then replays twice the frames that were on screen when Keep was
+pressed, which is the exact error persisting `steps` exists to prevent.
+
+A card then renders exactly `doc.steps` steps (see the still-render pattern
+below), so the wall shows the piece at the moment it was kept rather than at
+whatever frame the card happened to reach. Loading somebody else's piece hands
+the reader a live sketch with their parameters in it, so nudging one number is a
+variation rather than a copy.
+
+Two honest limits, and say them in the app's own copy rather than promising more
+than it does:
+
+- **Hand-drawn input is not in the numbers.** If a person can drag on the canvas
+  to push ink into it, what they drew is unbounded input that no seed replays. A
+  kept piece is a canonical render of the recipe, not a snapshot of the canvas at
+  the moment of keeping — the recipe is exact, the print is fresh. An app that
+  needs the literal pixels is asking for an image, so capture one
+  (`p.saveCanvas`, or the canvas's own `toBlob`) and store that instead.
+- **The numbers fix the simulation, not the screen.** A canvas of a different
+  size or pixel density starts the particles in proportionally different places,
+  the way the same negative prints differently at different sizes.
+
+`Math.random()` is NOT covered by `randomSeed` — use `p.random()` everywhere
+inside a sketch that means to be reproducible, and `p.noise()` rather than any
+hand-rolled noise.
+
+## Still renders — a thumbnail is a loop you ran to completion
+
+To draw a gallery card, run the simulation inside `setup` for the stored number
+of steps and then stop the loop. Same sketch factory, one flag — and `steps`
+comes off the saved piece (`doc.steps`), which is what makes the card the piece
+its author kept:
+
+```js
+// ONE frame of the piece, called by both paths. The fade is part of a frame:
+// a still loop that calls only `advance()` accumulates different stroke opacity
+// than the live canvas did, so the card would not be the piece at identical
+// seed, parameters, size and step count.
+const step = () => {
+  p.noStroke();
+  p.fill(palette.fade);
+  p.rect(0, 0, w, h);
+  p.stroke(palette.ink);
+  advance();
+};
+
+p.setup = () => {
+  p.createCanvas(w, h);
+  p.pixelDensity(still ? 1 : Math.min(window.devicePixelRatio || 1, 2));
+  p.randomSeed(params.seed);
+  p.noiseSeed(params.seed);
+  readPalette();
+  p.background(palette.bg);
+  spawn();
+  if (still) {
+    for (let i = 0; i < steps; i++) step(); // the SAME step, not advance()
+    p.noLoop();
+  }
+};
+
+p.draw = () => {
+  if (still) return;
+  step();
+};
+```
+
+Whatever a live frame does — the fade, the stroke colour, a per-frame drift — the
+still path has to do too, or the card is a different picture from the one its
+author kept. `p.noLoop()` stops `draw` from being scheduled; `p.loop()` starts it again, and
+`p.redraw()` runs one frame on demand. A wall of stills is cheap because none
+of them are animating.
+
+## Performance
+
+A flow field draws thousands of segments a frame, so the per-item work is what
+decides whether it holds sixty frames a second.
+
+**Group by colour so `stroke()` changes a handful of times per frame instead of
+once per particle.** Bucket particles by palette band, sort by colour, or just
+guard the call:
+
+```js
+let cur = null;
+for (const q of particles) {
+  if (q.c !== cur) {
+    cur = q.c;
+    p.stroke(cur);
+  }
+  p.line(q.px, q.py, q.x, q.y);
+}
+```
+
+**Rotate coordinates by hand instead of `push`/`translate`/`rotate`/`pop` per
+item.** Precompute the sine and cosine of each symmetry arm once, then transform
+the two endpoints with arithmetic — the difference between one transform matrix
+and eleven thousand of them.
+
+```js
+const arms = [];
+for (let s = 0; s < symmetry; s++) {
+  const a = (TAU / symmetry) * s;
+  arms.push([Math.cos(a), Math.sin(a)]);
+}
+// per segment:
+for (const [co, si] of arms) {
+  p.line(cx + ax * co - ay * si, cy + ax * si + ay * co, cx + bx * co - by * si, cy + bx * si + by * co);
+}
+```
+
+**Use a translucent rectangle for trails instead of `background()`.** Painting a
+nearly-transparent rect over the canvas each frame dims the history a few
+percent rather than erasing it, which is most of what people mean when a sketch
+"looks generative". The alpha is the knob: lower is smokier, higher snaps back
+to dots.
+
+```js
+p.noStroke();
+p.fill(20, 20, 20, 12);
+p.rect(0, 0, width, height);
+```
+
+Other levers: keep the particle array a fixed size and recycle dead particles
+rather than allocating; keep React state out of the frame loop entirely (the
+loop mutates plain objects the sketch closed over, and React only ever sets the
+parameters); and for a field dense enough that 2D runs out of road, `WEBGL` mode
+with `p.createShader(vert, frag)` evaluates it per pixel on the GPU.
+
+## Mouse and touch
+
+p5 keeps `p.mouseX` / `p.mouseY` current and fills them from a touch too, so one
+handler usually covers both surfaces.
+
+```js
+p.mouseDragged = () => {
+  paintAt(p.mouseX, p.mouseY);
+};
+
+p.touchMoved = () => {
+  paintAt(p.mouseX, p.mouseY);
+  return false; // returning false prevents the browser's default scroll/zoom
+};
+```
+
+**Set `touchAction: "none"` on the host element** so a drag paints instead of
+scrolling the page on a phone. Returning `false` from `touchMoved` handles the
+gesture p5 sees; the CSS handles the gesture the browser would have taken first.
+
+## API surface
+
+### Canvas and lifecycle
+
+```js
+p.createCanvas(w, h); // or p.createCanvas(w, h, p.WEBGL)
+p.resizeCanvas(w, h);
+p.pixelDensity(1);
+p.noLoop();
+p.loop();
+p.redraw();
+p.frameRate(30);
+p.frameCount; // frames since setup
+p.deltaTime; // ms since the previous frame
+```
+
+### Drawing
+
+```js
+p.background("#040a18");
+p.fill(255, 120, 0, 40); // r, g, b, alpha 0-255
+p.noFill();
+p.stroke("#00e5ff55"); // 8-digit hex carries alpha
+p.noStroke();
+p.strokeWeight(1.5);
+
+p.line(x1, y1, x2, y2);
+p.circle(x, y, d);
+p.ellipse(x, y, w, h);
+p.rect(x, y, w, h, radius);
+p.triangle(x1, y1, x2, y2, x3, y3);
+p.point(x, y);
+
+p.beginShape();
+p.vertex(x, y);
+p.curveVertex(x, y);
+p.endShape(p.CLOSE);
+
+p.text("hello", x, y);
+p.textSize(16);
+p.textAlign(p.CENTER, p.CENTER);
+```
+
+### Colour
+
+```js
+p.colorMode(p.HSB, 360, 100, 100, 1);
+const c = p.color(200, 80, 90);
+p.lerpColor(a, b, 0.3);
+```
+
+### Numbers, randomness, noise
+
+```js
+p.random(max); // p.random(min, max), p.random(array)
+p.randomSeed(1234);
+p.noise(x, y, z); // 0..1 Perlin noise
+p.noiseSeed(1234);
+p.noiseDetail(octaves, falloff);
+p.map(v, inMin, inMax, outMin, outMax);
+p.constrain(v, min, max);
+p.lerp(a, b, t);
+p.dist(x1, y1, x2, y2);
+p.TWO_PI;
+p.sin(a);
+p.cos(a);
+```
+
+### Transforms
+
+```js
+p.push();
+p.translate(x, y);
+p.rotate(angle);
+p.scale(s);
+p.pop();
+```
+
+### Input
+
+```js
+p.mouseX;
+p.mouseY;
+p.pmouseX;
+p.pmouseY;
+p.mouseIsPressed;
+p.mousePressed = () => {};
+p.mouseDragged = () => {};
+p.mouseReleased = () => {};
+p.mouseWheel = (event) => {};
+p.touchStarted = () => {};
+p.touchMoved = () => false;
+p.touchEnded = () => {};
+p.keyPressed = () => {};
+p.key;
+p.keyCode;
+```
+
+### Pixels and export
+
+```js
+p.loadPixels();
+p.pixels; // flat RGBA array
+p.updatePixels();
+p.get(x, y); // one pixel
+p.createGraphics(w, h); // an offscreen buffer to draw into
+p.saveCanvas("piece", "png");
+```
+
+### WEBGL
+
+```js
+const shader = p.createShader(vertSource, fragSource);
+p.shader(shader);
+shader.setUniform("u_time", p.millis() / 1000);
+shader.setUniform("u_resolution", [w, h]);
+p.rect(-w / 2, -h / 2, w, h); // a full-canvas quad for the fragment shader
+p.box(50);
+p.sphere(40);
+p.orbitControl();
+```
+
+## Common gotchas
+
+**A global `function setup()` never runs.** In instance mode p5 only calls the
+hooks it finds on the instance, so a sketch written the tutorial way mounts a
+blank canvas and nothing reports a problem.
+
+**A missing `instance.remove()` is invisible until it is loud.** The symptom is
+a sketch that speeds up, brightens, or tears after a few parameter changes —
+that is two or four draw loops painting the same canvas.
+
+**`p.resizeCanvas` clears the drawing.** Repaint the background and reseed the
+simulation from `windowResized` rather than assuming the previous frame survived.
+
+**Do not drive the sketch from React state per frame.** A `setState` inside
+`draw` re-renders the tree sixty times a second; let the loop mutate plain
+objects and keep React for the controls.
+
+**`p.random()` is seeded; `Math.random()` is not.** Mixing them makes a sketch
+that looks reproducible until it isn't.
+
+**Colour with alpha is how trails and depth are made.** An 8-digit hex string
+(`"#00e5ff55"`) or a fourth argument to `fill`/`stroke` is usually the
+difference between a diagram and a picture.
+
+**One instance per host element.** Mounting a second p5 into the same node gives
+two canvases stacked in the same box.

package/llms/use-viewer.md

@@ -319,3 +319,23 @@ async function assign(handle) {
 }
 <HandleInput onChange={assign} placeholder="Add a teammate…" />;
 ```
+
+### Adding a member to your own object — the canonical use
+
+Whenever the app is for a group — a shared list, a board, a trip, a club's page — each signed-in person has their own object and lets a friend into it by picking them here. The write is one small membership doc, and `access.js` turns that doc into the grant that gives the named person the object's channel (see access.md's per-object sharing examples). Keys on the picked handle and on the writer's own — the app owner has no special place in it.
+
+```jsx
+const { HandleInput } = useViewer();
+const { me, can } = useVibe("boards");
+// Show the picker to whoever the access fn would accept as an inviter.
+const canInvite = can.create({ type: "member", boardId: board._id, userHandle: "x", addedBy: me?.userHandle }).ok;
+
+async function addMember(handle) {
+  if (!handle) return;
+  await database.put({ type: "member", boardId: board._id, userHandle: handle, addedBy: me.userHandle });
+}
+
+{canInvite && <HandleInput onChange={addMember} placeholder="Add a friend…" />}
+```
+
+Members render with `<ViewerTag userHandle={m.userHandle} />`, the same way any other stored handle does. An app one person keeps for themselves needs none of this — the picker belongs where the prompt asks for other people.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/prompts",
-  "version": "14.1.20",
+  "version": "14.1.21",
   "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.20",
-    "@vibes.diy/identity": "14.1.20",
-    "@vibes.diy/use-vibes-types": "14.1.20",
+    "@vibes.diy/call-ai-v2": "14.1.21",
+    "@vibes.diy/identity": "14.1.21",
+    "@vibes.diy/use-vibes-types": "14.1.21",
     "arktype": "~2.2.3",
     "json-schema-faker": "~0.6.3"
   },

package/system-prompt.md

@@ -525,6 +525,8 @@ docs in your database, and never build follow UI state machines.
 
 **A single-user tool needs no membership gate — don't invent collaboration the prompt didn't ask for.** Many apps are one person making their own things: an image generator, a "describe X → make X" tool, a solo tracker/composer/calculator. Its user must be able to create from first load with no one letting them in. The failure to avoid: wrapping the primary write in `ctx.requireAccess(channel)` (or a roster / `requireRole` gate) so the signed-in maker hits "not in channel / request to join" on the very app they just made, or a members-only wall that hides the compose input until they "join." Membership machinery — `ctx.requireAccess`, roster approval, `request`/`share` docs, a "request to join" CTA — belongs ONLY where the prompt explicitly asks people to collaborate on, join, or share a space. For a solo tool the right shape is author-owned writes: stamp `authorHandle: user.userHandle` on each doc and let the author check accept it (self-granting each object its own channel is fine — requiring _pre-existing_ membership to write is not), or `allowAnonymous: true` in `access.js` for a no-sign-in tool — gate the write surface the usual way (`ready` for pending identity/access resolution, then `can.create(candidate).ok` for the affordance itself), which works for anonymous visitors too: once `allowAnonymous` opts them in, the access fn accepts `user === null` and `can.create()` returns the real verdict rather than `authentication required`. The footgun is gating the affordance on `can.create()` _without_ setting `allowAnonymous` — then it stays `authentication required` and the control vanishes for the very guests it's for.
 
+**A group-shaped ask — more than one person acting on the same records: several people adding, voting, sharing or joining, or a named group such as roommates, a book club or a team keeping records together — gives each signed-in person their own object plus a way to invite others into it with the platform's `HandleInput` (from `useViewer()`), and keys its rules on that object's own creator (`doc.creatorHandle === user.userHandle`), which places the app owner exactly where everyone else stands.**
+
 **The owner must never be locked out of their own app.** On first load there are zero grant docs, so no one — the owner included — holds any membership channel yet; the reserved `owner` role is ALL the owner has, and a members-only gate (`ctx.requireAccess(ch)`) denies the owner exactly like a stranger. Two rules keep the owner in. In `access.js`: when a grant branch is itself owner-gated (`ctx.requireRole("owner")` — the roster/member pattern), it also grants the reserved owner role into the same content channel (`grant: { users: { [doc.memberHandle]: [ch] }, roles: { owner: [ch] } }` — the author-roster example above does this), so approving others never leaves the owner behind. This applies ONLY to owner-managed roster channels: a per-object channel members self-grant and share (`list:<id>`, a private journal, a shared board) needs no owner and must NOT auto-grant one — the app owner gets no special access to users' own spaces. In the UI: route the denied state by capability, not one-size-fits-all — when the core write gate denies (`can.create({ type: "post", ... }).ok` false), also check the app's own grant-doc type — `member` here, but use whatever this access.js names it (`author`, `share`, `approve`): `can.create({ type: "member", userHandle: me?.userHandle }).ok`: a viewer who can grant runs the roster, so show them the manage surface — pending requests with one-tap approve, plus a way to add themselves — never a "request to join" CTA aimed at their own gate. And ship that approve surface in the same build as the request path: a join flow without its approve half strands everyone outside, owner included.
 
 **Author-equality gates `create` and ownership change — NOT every update.** A shared-visible doc (public read, a gallery/catalog others browse) that `<ImgGen>` appends onto is written by whoever is _looking at it_: a version append runs as the VIEWING user, so a blanket `if (oldDoc && doc.authorHandle !== user.userHandle) throw` denies every other viewer's generation — after it was already billed — arming an unbounded billed-retry loop (#3784/#3832). Fix the author at create, forbid re-authoring, and for a non-author update accept only a legitimate ImgGen version append — the platform predicate `ctx.isImgGenVersionAppend(doc, oldDoc)` decides that (`oldDoc` is `null` on create):