@vibes.diy/prompts 14.3.64 → 14.3.65

package/llms/pouf-kanban.js

@@ -0,0 +1,6 @@
+export const poufKanbanConfig = {
+    name: "pouf-kanban",
+    label: "Pouf kanban block",
+    description: "Kanban board with columns and cards you drag between them",
+};
+//# sourceMappingURL=pouf-kanban.js.map

package/llms/pouf-kanban.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pouf-kanban.js","sourceRoot":"","sources":["../../jsr/llms/pouf-kanban.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,gBAAgB,GAAc;IACzC,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,2DAA2D;CACzE,CAAC"}

package/llms/pouf-kanban.md

@@ -0,0 +1,235 @@
+# Pouf Kanban
+
+A board of cards in columns that move left to right as work gets done: a renovation's to do, doing and done, a sprint board, a hiring pipeline, a content calendar from idea to published. Reach for it whenever the app's core is items that pass through a fixed set of stages and the person wants to see every stage at once. Cards and the column each sits in persist, so the board looks the same on the next visit and for everyone who opens it.
+
+Built from @vibes.diy/pouf components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
+
+## The block
+
+One view with one job: the board. The `Heading` and a muted count open the page, and a small form on a `Card` adds a card to the first column with `Add card` as the view's one lead. The columns sit in a `Grid cols={3}` (stacked on a phone), each with a `Heading level={2}` and a count `Badge` toned by meaning: `idle` for not started, `info` for under way, `up` for done. Each card is a `RowCard` with its title, its author as a `ViewerTag`, a quiet `Move` `IconButton` that opens a `DropdownMenu` of the other columns, and a quiet remove `IconButton` inside a `Confirm` wearing `tone="down"`. A card moves by dragging its title with pointer events, which cover mouse, pen and touch alike: `onPointerDown` captures the pointer, `onPointerMove` asks `document.elementFromPoint` which column is underneath, and `onPointerUp` writes that column to the card's document; only the primary button starts a drag, and `onPointerCancel`, `onLostPointerCapture` and the Escape key end one without moving the card; the `Move` menu does the same move from the keyboard or a screen reader. Every write waits on its `can` verdict from `useVibe("board")`: the add form shows a `Skeleton` inside an `aria-busy` wrapper while the verdict resolves and a sentence in the app's own words when adding is closed to this visitor; a card only drags and its `Move` menu is only enabled when `can.edit(card).ok`; and the remove button renders only where `can.delete(card).ok`.
+
+### `App.jsx`
+```jsx
+import React, { useEffect, useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import { Badge, Button, Card, Empty, Field, Grid, Heading, Icon, IconButton, Input, Row, RowCard, Skeleton, Stack, Text } from "@vibes.diy/pouf";
+import { Confirm, DropdownMenu, Toaster, toast } from "@vibes.diy/pouf/interactive";
+
+const COLUMNS = [
+  { key: "todo", title: "To do", tone: "idle" },
+  { key: "doing", title: "In progress", tone: "info" },
+  { key: "done", title: "Done", tone: "up" },
+];
+
+/** The column under a screen point, read from the `data-column` wrapper around each column. */
+function columnAt(x, y) {
+  return document.elementFromPoint(x, y)?.closest("[data-column]")?.getAttribute("data-column") ?? undefined;
+}
+
+function Author({ handle }) {
+  const { ViewerTag } = useViewer();
+  return handle ? <ViewerTag userHandle={handle} /> : <Text size="sm">A guest</Text>;
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("board");
+  const { docs } = useLiveQuery("type", { key: "card" });
+  const { can, me } = useVibe("board");
+  const cards = [...docs].sort((a, b) => (a.movedAt ?? a.createdAt) - (b.movedAt ?? b.createdAt));
+
+  const [draft, setDraft] = useState("");
+  const [error, setError] = useState(undefined);
+  // The card being dragged and the column under the pointer, while a drag is live.
+  const [drag, setDrag] = useState(undefined);
+  const dragging = drag !== undefined;
+
+  // Escape drops an in-progress drag where it started.
+  useEffect(() => {
+    if (!dragging) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setDrag(undefined);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [dragging]);
+  // The verdict for the doc addCard writes, carrying the same fields it stamps.
+  const canAdd = can.create({ type: "card", column: "todo", authorHandle: me?.userHandle });
+
+  async function addCard(e) {
+    e.preventDefault();
+    const title = draft.trim();
+    if (title === "") {
+      setError("Give the card a title first.");
+      return;
+    }
+    setError(undefined);
+    await database.put({ type: "card", title, column: "todo", authorHandle: me?.userHandle, createdAt: Date.now() });
+    // Cleared only once the write lands, so a local failure keeps the typed words.
+    setDraft("");
+  }
+
+  function moveCard(card, column) {
+    if (column === card.column) return;
+    database.put({ ...card, column, movedAt: Date.now() });
+  }
+
+  async function removeCard(card) {
+    await database.del(card._id);
+    toast.success(`Removed "${card.title}"`);
+  }
+
+  // Pointer events cover mouse, pen and touch; the handle's touch-none keeps a finger drag from scrolling the page.
+  function dragHandlers(card) {
+    if (!can.edit(card).ok) return {};
+    return {
+      onPointerDown: (e) => {
+        // Only the primary button (or a touch / pen contact) starts a drag.
+        if (e.button !== 0) return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        setDrag({ id: card._id, over: card.column });
+      },
+      onPointerMove: (e) => {
+        if (drag?.id !== card._id) return;
+        const over = columnAt(e.clientX, e.clientY);
+        if (over !== drag.over) setDrag({ id: card._id, over });
+      },
+      onPointerUp: (e) => {
+        if (drag?.id !== card._id) return;
+        const over = columnAt(e.clientX, e.clientY);
+        setDrag(undefined);
+        if (over) moveCard(card, over);
+      },
+      onPointerCancel: () => setDrag(undefined),
+      // Capture can be lost without a pointerup (an alert, a tab switch); the drag ends with it.
+      onLostPointerCapture: () => setDrag(undefined),
+    };
+  }
+
+  return (
+    <main className="mx-auto max-w-5xl px-4 py-8">
+      <Stack gap={5}>
+        <Stack gap={1}>
+          <Heading level={1}>Kitchen renovation</Heading>
+          <Text muted>{cards.length === 1 ? "1 card" : `${cards.length} cards`}</Text>
+        </Stack>
+
+        {canAdd.pending ? (
+          <div aria-busy="true">
+            <Skeleton variant="card" />
+          </div>
+        ) : !canAdd.ok ? (
+          <Text muted>You're viewing the board. Adding cards opens up once you're on the project.</Text>
+        ) : (
+          <Card>
+            <form onSubmit={addCard} noValidate>
+              <Row gap={3} align="top">
+                <div className="min-w-0 flex-1">
+                  <Field label="New card" error={error}>
+                    {(id, describedBy) => (
+                      <Input
+                        id={id}
+                        describedBy={describedBy}
+                        value={draft}
+                        onChange={(value) => {
+                          setDraft(value);
+                          if (error) setError(undefined);
+                        }}
+                        placeholder="Order the tiles"
+                        autoComplete="off"
+                        invalid={error !== undefined}
+                      />
+                    )}
+                  </Field>
+                </div>
+                <Button type="submit">Add card</Button>
+              </Row>
+            </form>
+          </Card>
+        )}
+
+        <Grid cols={3}>
+          {COLUMNS.map((col) => {
+            const inColumn = cards.filter((c) => c.column === col.key);
+            const isTarget = drag !== undefined && drag.over === col.key;
+            return (
+              <div key={col.key} data-column={col.key} className="min-h-40">
+                <Stack gap={3}>
+                  <Row justify="between">
+                    <Heading level={2}>{col.title}</Heading>
+                    <Row gap={2}>
+                      {isTarget && <Badge tone="info">Drop here</Badge>}
+                      <Badge tone={col.tone}>{inColumn.length}</Badge>
+                    </Row>
+                  </Row>
+                  {inColumn.length === 0 ? (
+                    <Empty icon="draft" title="Nothing here">
+                      Drag a card in, or use its Move menu.
+                    </Empty>
+                  ) : (
+                    inColumn.map((card) => (
+                      <div key={card._id} className={drag?.id === card._id ? "opacity-50" : undefined}>
+                        <RowCard>
+                          <Stack gap={2}>
+                            <div className="cursor-grab touch-none select-none" {...dragHandlers(card)}>
+                              <Text>{card.title}</Text>
+                            </div>
+                            <Row justify="between" wrap={false}>
+                              <Author handle={card.authorHandle} />
+                              <Row gap={1} wrap={false}>
+                                <DropdownMenu
+                                  label={`Move "${card.title}"`}
+                                  items={COLUMNS.filter((c) => c.key !== card.column).map((c) => ({
+                                    label: `Move to ${c.title}`,
+                                    onClick: () => moveCard(card, c.key),
+                                  }))}
+                                >
+                                  <IconButton
+                                    size="sm"
+                                    disabled={!can.edit(card).ok}
+                                    label={`Move "${card.title}"`}
+                                    icon={<Icon name="next" size="sm" />}
+                                  />
+                                </DropdownMenu>
+                                {can.delete(card).ok && (
+                                  <Confirm
+                                    title="Remove this card?"
+                                    body={`"${card.title}" is taken off the board for everyone. This can't be undone.`}
+                                    confirmLabel="Remove card"
+                                    cancelLabel="Keep it"
+                                    tone="down"
+                                    onConfirm={() => removeCard(card)}
+                                  >
+                                    <IconButton size="sm" label={`Remove "${card.title}"`} icon={<Icon name="remove" size="sm" />} />
+                                  </Confirm>
+                                )}
+                              </Row>
+                            </Row>
+                          </Stack>
+                        </RowCard>
+                      </div>
+                    ))
+                  )}
+                </Stack>
+              </div>
+            );
+          })}
+        </Grid>
+      </Stack>
+      <div className="pouf-toasts">
+        <Toaster />
+      </div>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Rename the columns to the app's own stages (`Idea`, `Drafting`, `Published`) in `COLUMNS`, and tone each count by what the stage means: `idle` for not started, `info` or `warn` for under way, `up` for finished.
+- Keep the column on the card's own document; moving a card is one `put` of that document, never a second list of ids per column.
+- Keep the drag on pointer events with `elementFromPoint` and the `Move` menu beside it: the drag serves mouse and touch, the menu serves keyboards and screen readers.
+- A priority or due date is one more field on the card and one more `Badge` with an explicit meaning tone (`warn` for due this week).
+- A new write surface gets its own verdict: `can.create(draft)` with the fields the write stamps, `can.edit(doc)` or `can.delete(doc)` on the document it changes, always on `useVibe` of the database it writes.
+
+Adapted from 1st-Pouf (MIT) https://1st-pouf.worksonmy.dev/r/kanban.json

package/llms/pouf-landing.d.ts

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

package/llms/pouf-landing.js

@@ -0,0 +1,6 @@
+export const poufLandingConfig = {
+    name: "pouf-landing",
+    label: "Pouf landing block",
+    description: "Marketing landing page with hero, features, story and a waitlist sign-up",
+};
+//# sourceMappingURL=pouf-landing.js.map

package/llms/pouf-landing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pouf-landing.js","sourceRoot":"","sources":["../../jsr/llms/pouf-landing.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,iBAAiB,GAAc;IAC1C,IAAI,EAAE,cAAc;IACpB,KAAK,EAAE,oBAAoB;IAC3B,WAAW,EAAE,0EAA0E;CACxF,CAAC"}

package/llms/pouf-landing.md

@@ -0,0 +1,222 @@
+# Pouf Landing
+
+A one-page marketing site with a waitlist: the launch page for a pottery class, a neighbourhood tool library, a new podcast, a supper club, a side-project app before it opens. Reach for it when the app's job is to explain one thing well (a hero, what it does, a story from someone who tried it) and to let interested people put their name down. Each person on the waitlist is one small document, so the count on the page is real and nobody signs up twice.
+
+Built from @vibes.diy/pouf components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
+
+## The block
+
+One page with one job: get the reader onto the waitlist. A `Navbar` carries the brand (a decorative `orange` `Blob` and the name), in-page links and a quiet `Join` that scrolls to the sign-up. The hero is a `Grid cols="sidebar"`: an `info` `Badge`, the `Heading level={1}` with one word in an `orange` `Highlight`, a muted pitch, the waitlist action and a muted count of who has joined; beside it a `Card` of `Metric`s says what the reader gets. The waitlist action is the page's one lead: `Join the waitlist`, with `loading` from the click until the live query shows the new sign-up, so the button can't reappear and fire twice in between. Once joined it turns into an `up` `Badge` and a quiet `Leave the list`. Three feature `Card`s (each fronted by a decorative `orange` `Blob`, tilted with `motion`) explain how it works, a `Card` holds one story from an early user, and a closing `CTA` on the quiet `surface` tone sends the reader back up to the sign-up with a quiet button, so the page never shows two leads. A `Footer` repeats the in-page links. Joining waits on its `can` verdict from `useVibe("waitlist")`, the database the sign-ups live in: a `Skeleton` inside an `aria-busy` wrapper while it resolves, a `Sign in to join the waitlist` lead wired to `useViewer().requestLogin()` for a visitor who has not signed in, and a neutral sentence in the app's own words when sign-ups are closed. `Leave the list` renders only where `can.delete` allows it. The list keeps who joined and when, never an email address.
+
+### `App.jsx`
+```jsx
+import React, { useEffect, useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import { Badge, Blob, Button, Card, CTA, Eyebrow, Footer, Grid, Heading, Highlight, Metric, Navbar, Row, Skeleton, Stack, Text } from "@vibes.diy/pouf";
+
+const NAME = "The Tool Shed";
+const STEPS = [
+  { icon: "search", title: "Find the tool", body: "Browse the drills, ladders, saws and sanders your neighbours have put in the shed." },
+  { icon: "calendar", title: "Borrow it for a week", body: "Pick it up on Saturday morning, bring it back the next. No fee, no deposit." },
+  { icon: "users", title: "Lend one back", body: "Got a tool that sits in a drawer? Add it, and someone down the road gets the job done." },
+];
+const LINKS = [
+  { label: "How it works", href: "#how" },
+  { label: "Stories", href: "#stories" },
+];
+
+const brand = (
+  <Row gap={2} wrap={false}>
+    <Blob icon="home" tone="orange" size="sm" />
+    <Text>{NAME}</Text>
+  </Row>
+);
+const people = (n) => (n === 1 ? "1 neighbour has" : `${n} neighbours have`);
+
+function scrollToJoin() {
+  const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  document.getElementById("join")?.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "nearest" });
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("waitlist");
+  const { docs: signups } = useLiveQuery("type", { key: "signup" });
+  const { can, me } = useVibe("waitlist");
+  const { requestLogin } = useViewer();
+  // What an in-flight write is heading for: true while joining, false while leaving.
+  const [awaiting, setAwaiting] = useState(undefined);
+
+  const mine = me ? signups.find((s) => s.authorHandle === me.userHandle) : undefined;
+  const joined = Boolean(mine);
+  // The write resolves before the live query shows it, so the button stays busy until it does.
+  const inFlight = awaiting !== undefined && awaiting !== joined;
+  useEffect(() => {
+    if (awaiting === joined) setAwaiting(undefined);
+  }, [awaiting, joined]);
+  // The sign-up this visitor would write: a deterministic id, so joining twice lands on one document.
+  const draft = { _id: `signup:${me?.userHandle}`, type: "signup", authorHandle: me?.userHandle };
+  const verdict = mine ? can.delete(mine) : can.create(draft);
+
+  async function join() {
+    setAwaiting(true);
+    try {
+      await database.put({ ...draft, createdAt: Date.now() });
+    } catch (err) {
+      // A failed write never reaches the live query, so release the button here.
+      setAwaiting(undefined);
+      throw err;
+    }
+  }
+
+  async function leave() {
+    setAwaiting(false);
+    try {
+      await database.del(mine._id);
+    } catch (err) {
+      setAwaiting(undefined);
+      throw err;
+    }
+  }
+
+  let action;
+  if (verdict.pending)
+    action = (
+      <div aria-busy="true">
+        <Skeleton variant="row" />
+      </div>
+    );
+  else if (!me)
+    action = (
+      <Button size="lg" onClick={requestLogin}>
+        Sign in to join the waitlist
+      </Button>
+    );
+  else if (mine)
+    action = (
+      <Row gap={3}>
+        <Badge tone="up">You're on the list</Badge>
+        {verdict.ok && (
+          <Button variant="quiet" loading={inFlight} onClick={leave}>
+            Leave the list
+          </Button>
+        )}
+      </Row>
+    );
+  else if (!verdict.ok) action = <Text muted>Sign-ups aren't open right now.</Text>;
+  else
+    action = (
+      <Button size="lg" loading={inFlight} onClick={join}>
+        Join the waitlist
+      </Button>
+    );
+
+  return (
+    <main className="mx-auto max-w-5xl px-4 py-6">
+      <Stack gap={6}>
+        <Navbar
+          brand={brand}
+          links={LINKS}
+          actions={
+            <Button size="sm" variant="quiet" onClick={scrollToJoin}>
+              Join
+            </Button>
+          }
+        />
+
+        <Grid cols="sidebar" gap={5}>
+          <Stack gap={4}>
+            <Row>
+              <Badge tone="info">Opening this spring</Badge>
+            </Row>
+            <Heading level={1}>
+              Borrow the <Highlight tone="orange">drill</Highlight>, skip the shop.
+            </Heading>
+            <Text muted>A lending library for tools, run by the street. Take what you need for a week, bring it back, and lend what you can.</Text>
+            <div id="join">{action}</div>
+            <Text size="sm" muted>
+              {signups.length === 0 ? "Be the first on the list." : `${people(signups.length)} joined so far.`}
+            </Text>
+          </Stack>
+
+          <Card>
+            <Stack gap={4}>
+              <Stack gap={1}>
+                <Eyebrow>At opening</Eyebrow>
+                <Heading level={3}>What's in the shed</Heading>
+              </Stack>
+              <Grid cols={2}>
+                <Metric label="Tools" value="140" />
+                <Metric label="Lenders" value="32" />
+                <Metric label="Loan" value="One week" num={false} />
+                <Metric label="Cost" value="Free" num={false} />
+              </Grid>
+            </Stack>
+          </Card>
+        </Grid>
+
+        <section id="how">
+          <Stack gap={4}>
+            <Stack gap={1}>
+              <Eyebrow>How it works</Eyebrow>
+              <Heading level={2}>Three steps, one shed</Heading>
+            </Stack>
+            <Grid cols={3}>
+              {STEPS.map((s, i) => (
+                <Card key={s.title} motion={i % 2 === 0 ? "tilt-left" : "tilt-right"}>
+                  <Stack gap={3}>
+                    <Blob icon={s.icon} tone="orange" />
+                    <Heading level={3}>{s.title}</Heading>
+                    <Text size="sm" muted>
+                      {s.body}
+                    </Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Grid>
+          </Stack>
+        </section>
+
+        <section id="stories">
+          <Card>
+            <Stack gap={3}>
+              <Eyebrow>From the trial run</Eyebrow>
+              <Heading level={2}>“I hung every shelf in the flat with a borrowed drill.”</Heading>
+              <Text muted>We ran the shed for a month on one street last autumn. Forty loans, no lost tools, and a lot of finished jobs.</Text>
+              <Text size="sm">Priya, who lent her mitre saw</Text>
+            </Stack>
+          </Card>
+        </section>
+
+        <CTA
+          tone="surface"
+          title="Be first through the door"
+          description="Join the waitlist and we'll open the shed to the list first."
+          action={
+            <Button size="lg" variant="quiet" onClick={scrollToJoin}>
+              Join the waitlist
+            </Button>
+          }
+        />
+
+        <Footer
+          brand={brand}
+          tagline="A lending library for tools, run by the street."
+          columns={[{ title: "On this page", links: LINKS }]}
+          note="Run by volunteers. Tools are lent as they are; check them before you start."
+        />
+      </Stack>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Change the pitch, not the shape: one hero with the one lead, a few feature `Card`s, one story and a closing `CTA` on `tone="surface"` whose button is quiet and scrolls back to the sign-up. A second solid button anywhere on the page is a second lead.
+- The waitlist keeps one document per person with a deterministic `_id` (`signup:<handle>`), so the count is `signups.length` and joining twice is harmless. To show who joined, list them with `useViewer()`'s `ViewerTag` from the stored `authorHandle`.
+- Never store an email address or phone number on the sign-up: everything in this database is readable by anyone who opens the app. If the organiser needs a way to reach people, keep contact details on a separate document that an access function lets only its owner and the organiser read.
+- Paid plans with a billing-cycle toggle belong to the pricing block; a page that sells a time slot belongs to the booking block. Link to either from the `Navbar` rather than growing this page.
+- A new write surface gets its own verdict: `can.create(draft)` with the fields the write stamps, `can.edit(doc)` or `can.delete(doc)` on the document it changes, always on `useVibe` of the database it writes.
+
+Adapted from 1st-Pouf (MIT) https://1st-pouf.worksonmy.dev/r/landing.json

package/llms/pouf-login.d.ts

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

package/llms/pouf-login.js

@@ -0,0 +1,6 @@
+export const poufLoginConfig = {
+    name: "pouf-login",
+    label: "Pouf login block",
+    description: "App-local join form for display name and bio; not sign-in auth",
+};
+//# sourceMappingURL=pouf-login.js.map

package/llms/pouf-login.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pouf-login.js","sourceRoot":"","sources":["../../jsr/llms/pouf-login.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,eAAe,GAAc;IACxC,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE,kBAAkB;IACzB,WAAW,EAAE,gEAAgE;CAC9E,CAAC"}

package/llms/pouf-login.md

@@ -0,0 +1,162 @@
+# Pouf Login
+
+The join step a member sees once they are signed in: a running club's "tell us who you are", a writing group's member card, a team space's first-visit profile. Reach for it whenever the app wants its own profile for each person (the name they go by here, a short bio) before they take part. It is **not** a sign-in form: the platform owns sign-in, so this block never asks for an email, a password or a magic link. The visitor signs in through `useViewer().requestLogin()`, and only then fills in the profile the app keeps. Each profile persists, so a member joins once and finds their card on every visit and device.
+
+Built from @vibes.diy/pouf components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
+
+## The block
+
+One centred `Card` with one job: get this person a profile. A `Blob` (`info`, user), the `Heading` and a muted line open it, and a muted count says how many members have joined. A visitor who has not signed in gets a `Sign in to join` button, the card's one lead, wired to `requestLogin()`; there is no email or password field anywhere, because sign-in is the platform's. A signed-in visitor gets the profile form: a display name `Input` and a short-bio `Textarea`, each in its own `Field` with its own error and `invalid` control, validated in plain state on submit; `Join the club` (or `Save profile` once they have one) is the lead and shows `loading` while the write lands. Each profile is one document with a deterministic `_id` per person (`profile:<handle>`), so saving twice updates the same card instead of adding a second. The write waits on its `can` verdict from `useVibe("members")`: `can.create` of the draft for a new profile, `can.edit` of the saved one after that; while the verdict resolves a `Skeleton` sits inside an `aria-busy` wrapper, and a sentence in the app's own words replaces the form when joining is closed to this visitor. A saved profile shows as a `Badge` toned `up` and a `toast`.
+
+### `App.jsx`
+```jsx
+import React, { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import { Badge, Blob, Button, Card, Field, Heading, Input, Row, Skeleton, Stack, Text, Textarea } from "@vibes.diy/pouf";
+import { Toaster, toast } from "@vibes.diy/pouf/interactive";
+
+const BIO_MAX = 160;
+
+function check(form) {
+  const name = form.name.trim();
+  return {
+    name: name.length < 2 ? "Give a name of at least two characters." : name.length > 40 ? "Keep the name under 40 characters." : undefined,
+    bio: form.bio.trim().length > BIO_MAX ? `Keep the bio to ${BIO_MAX} characters.` : undefined,
+  };
+}
+
+function ProfileForm({ saved, database, can, me }) {
+  // Prefilled from the saved profile, so editing starts from what is there.
+  const [form, setForm] = useState({ name: saved?.name ?? "", bio: saved?.bio ?? "" });
+  const [errors, setErrors] = useState({});
+  const [saving, setSaving] = useState(false);
+  // The profile this form writes: one per person, so a second save lands on the same document.
+  const draft = { _id: `profile:${me.userHandle}`, type: "profile", authorHandle: me.userHandle };
+  const verdict = saved ? can.edit(saved) : can.create(draft);
+
+  const set = (key) => (value) => {
+    setForm((f) => ({ ...f, [key]: value }));
+    if (errors[key]) setErrors((e) => ({ ...e, [key]: undefined }));
+  };
+
+  async function save(e) {
+    e.preventDefault();
+    const found = check(form);
+    setErrors(found);
+    if (found.name || found.bio) return;
+    setSaving(true);
+    try {
+      await database.put({ ...saved, ...draft, name: form.name.trim(), bio: form.bio.trim(), joinedAt: saved?.joinedAt ?? Date.now() });
+      toast.success(saved ? "Profile saved" : `Welcome, ${form.name.trim()}`);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (verdict.pending)
+    return (
+      <div aria-busy="true">
+        <Skeleton variant="card" />
+      </div>
+    );
+  if (!verdict.ok) return <Text muted>Joining is open to invited members. Ask the organiser to add you.</Text>;
+
+  return (
+    <form onSubmit={save} noValidate>
+      <Stack gap={4}>
+        {saved && (
+          <Row>
+            <Badge tone="up">You're a member</Badge>
+          </Row>
+        )}
+        <Field label="Display name" hint="How other members see you here." error={errors.name}>
+          {(id, describedBy) => (
+            <Input
+              id={id}
+              describedBy={describedBy}
+              value={form.name}
+              onChange={set("name")}
+              autoComplete="nickname"
+              placeholder="Sam from Tuesday runs"
+              invalid={errors.name !== undefined}
+            />
+          )}
+        </Field>
+        <Field label="A line about you" hint={`Optional, up to ${BIO_MAX} characters.`} error={errors.bio}>
+          {(id, describedBy) => (
+            <Textarea
+              id={id}
+              describedBy={describedBy}
+              value={form.bio}
+              onChange={set("bio")}
+              rows={3}
+              placeholder="Training for my first half marathon."
+              invalid={errors.bio !== undefined}
+            />
+          )}
+        </Field>
+        <Button type="submit" block loading={saving}>
+          {saved ? "Save profile" : "Join the club"}
+        </Button>
+      </Stack>
+    </form>
+  );
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("members");
+  const { docs: profiles } = useLiveQuery("type", { key: "profile" });
+  const { can, me, ready } = useVibe("members");
+  const { requestLogin } = useViewer();
+  const saved = me ? profiles.find((p) => p._id === `profile:${me.userHandle}`) : undefined;
+
+  return (
+    <main className="mx-auto max-w-md px-4 py-12">
+      <Card>
+        <Stack gap={5}>
+          <Stack gap={3}>
+            <Blob icon="user" tone="info" />
+            <Stack gap={1}>
+              <Heading level={1}>{saved ? `Hi, ${saved.name}` : "Join the club"}</Heading>
+              <Text muted>{saved ? "Update how other members see you." : "Pick the name you go by here and say hello."}</Text>
+              <Text size="sm" muted>
+                {profiles.length === 1 ? "1 member so far" : `${profiles.length} members so far`}
+              </Text>
+            </Stack>
+          </Stack>
+
+          {!ready ? (
+            <div aria-busy="true">
+              <Skeleton variant="card" />
+            </div>
+          ) : !me ? (
+            // Sign-in is the platform's: no email or password here, just the ask.
+            <Stack gap={3}>
+              <Text muted>Sign in first, then choose your display name.</Text>
+              <Button block onClick={requestLogin}>
+                Sign in to join
+              </Button>
+            </Stack>
+          ) : (
+            <ProfileForm key={saved ? "edit" : "new"} saved={saved} database={database} can={can} me={me} />
+          )}
+        </Stack>
+      </Card>
+      <div className="pouf-toasts">
+        <Toaster />
+      </div>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Never turn this into a credential form: no email, password, magic link or "forgot password". Sign-in is `useViewer().requestLogin()`, and the identity arrives on its own through `me`.
+- Add a profile field (a pace group, a pronoun, a favourite genre) as one more `Field` and one more property on the profile; a fixed set of choices is a `RadioGroup` or `Select`, not free text.
+- Show members to each other with `useViewer()`'s `<ViewerTag userHandle={profile.authorHandle} />` beside the display name, not a hand-made avatar.
+- Keep one profile per person through the deterministic `_id`; a second document per person would split their card in two.
+- A new write surface gets its own verdict: `can.create(draft)` with the fields the write stamps, `can.edit(doc)` or `can.delete(doc)` on the document it changes, always on `useVibe` of the database it writes.
+
+Adapted from 1st-Pouf (MIT) https://1st-pouf.worksonmy.dev/r/login.json

package/llms/pouf-music.d.ts

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