@vibes.diy/prompts 14.3.64 → 14.3.65

package/llms/pouf-music.js

@@ -0,0 +1,6 @@
+export const poufMusicConfig = {
+    name: "pouf-music",
+    label: "Pouf music block",
+    description: "Music player UI with a queue, transport and saved likes",
+};
+//# sourceMappingURL=pouf-music.js.map

package/llms/pouf-music.js.map

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

package/llms/pouf-music.md

@@ -0,0 +1,190 @@
+# Pouf Music
+
+A player screen for a short list of tracks: a band's demos, a choir's rehearsal parts, a podcast's episodes, a class's listening list. Reach for it whenever the app's core is picking something from a queue and moving through it with play, skip and a scrubber. The track list stays inline in the code and playback lives in the page; each like is its own document per person and track, so a visitor's favourites are still marked on the next visit and on every device, and the like count is real.
+
+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: choose a track and move through it. A `Card` holds the player: a decorative `orange` `Blob` as the cover, a `Badge` for the transport's state (`up` playing, `idle` paused), the title as the `Heading` with the artist and like count in muted `Text`, a quiet heart `IconButton` to like the track, a `Slider` scrubber with numeric elapsed and total times, and the transport row of quiet `IconButton`s (previous, play/pause, next). The scrubber's filled range is the view's one lead mark: `Slider` always paints its range in the lead colour and takes no `tone`, so every button beside it stays quiet. Nothing plays until the person presses play, and the example carries no audio of its own: the track list is placeholder metadata and the scrubber is driven by a timer, ready to be wired to the app's own files. Under the player an `Eyebrow` heads the queue, one clickable `RowCard` per track with its title and artist in `Text`, a heart `Icon` on the visitor's liked tracks and the length in numeric muted `Text`. Liking waits on its `can` verdict from `useVibe("music")`, the database the likes live in: a `Skeleton` inside an `aria-busy` wrapper while it resolves, the heart wired to `useViewer().requestLogin()` with the label `Sign in to like` for a visitor who has not signed in, and a sentence in the app's own words when likes are closed; unliking waits on `can.delete` of the visitor's own like.
+
+### `App.jsx`
+```jsx
+import React, { useEffect, useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import { Badge, Blob, Card, Eyebrow, Heading, Icon, IconButton, Row, RowCard, Skeleton, Spacer, Stack, Text } from "@vibes.diy/pouf";
+import { Slider } from "@vibes.diy/pouf/interactive";
+
+// Placeholder metadata: swap in the app's own tracks. No audio ships with this example.
+const QUEUE = [
+  { id: "t1", title: "Warm-up in C", artist: "Altos", duration: 204 },
+  { id: "t2", title: "Harbour Song", artist: "Full choir", duration: 241 },
+  { id: "t3", title: "Round for Four", artist: "Tenors", duration: 167 },
+  { id: "t4", title: "Evening Hymn", artist: "Sopranos", duration: 238 },
+];
+
+function clock(seconds) {
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("music");
+  const { docs: likes } = useLiveQuery("type", { key: "like" });
+  const { can, me } = useVibe("music");
+  const { requestLogin } = useViewer();
+
+  const [index, setIndex] = useState(0);
+  const [elapsed, setElapsed] = useState(0);
+  // Paused on arrival: nothing plays until the person presses play.
+  const [playing, setPlaying] = useState(false);
+  const [liking, setLiking] = useState(false);
+
+  const track = QUEUE[index];
+  const trackLikes = likes.filter((l) => l.trackId === track.id);
+  const myLikes = new Set(me ? likes.filter((l) => l.authorHandle === me.userHandle).map((l) => l.trackId) : []);
+  const mine = me ? trackLikes.find((l) => l.authorHandle === me.userHandle) : undefined;
+  // The like this visitor would write: a deterministic id, so liking twice lands on one document.
+  const likeDraft = { _id: `like:${track.id}:${me?.userHandle}`, type: "like", trackId: track.id, authorHandle: me?.userHandle };
+  const verdict = mine ? can.delete(mine) : can.create(likeDraft);
+
+  function goTo(next) {
+    setIndex(((next % QUEUE.length) + QUEUE.length) % QUEUE.length);
+    setElapsed(0);
+  }
+
+  // Moves the scrubber once a second while playing.
+  useEffect(() => {
+    if (!playing) return undefined;
+    const id = setInterval(() => setElapsed((s) => Math.min(track.duration, s + 1)), 1000);
+    return () => clearInterval(id);
+  }, [playing, track.duration]);
+
+  // Reaching the end moves on to the next track; kept apart so the timer only ever adds a second.
+  useEffect(() => {
+    if (elapsed < track.duration) return;
+    setIndex((i) => (i + 1) % QUEUE.length);
+    setElapsed(0);
+  }, [elapsed, track.duration]);
+
+  async function toggleLike() {
+    setLiking(true);
+    try {
+      if (mine) await database.del(mine._id);
+      else await database.put({ ...likeDraft, createdAt: Date.now() });
+    } finally {
+      setLiking(false);
+    }
+  }
+
+  let like;
+  if (verdict.pending)
+    like = (
+      <div aria-busy="true">
+        <Skeleton variant="text" />
+      </div>
+    );
+  else if (!me) like = <IconButton icon={<Icon name="heart" size="sm" />} label="Sign in to like" onClick={requestLogin} />;
+  else if (!verdict.ok)
+    like = (
+      <Text size="sm" muted>
+        Likes are resting for now.
+      </Text>
+    );
+  else
+    like = (
+      <IconButton
+        icon={<Icon name={mine ? "heart-filled" : "heart"} size="sm" />}
+        label={mine ? `Unlike ${track.title}` : `Like ${track.title}`}
+        aria-pressed={Boolean(mine)}
+        loading={liking}
+        onClick={toggleLike}
+      />
+    );
+
+  return (
+    <main className="mx-auto max-w-md px-4 py-8">
+      <Stack gap={4}>
+        <Card>
+          <Stack gap={5}>
+            <Row justify="between" align="top">
+              <Blob icon="music" tone="orange" size="lg" />
+              <Badge tone={playing ? "up" : "idle"}>{playing ? "Playing" : "Paused"}</Badge>
+            </Row>
+            <Row justify="between" align="top" wrap={false}>
+              <Stack gap={1}>
+                <Heading level={1}>{track.title}</Heading>
+                <Text muted>
+                  {track.artist} · {trackLikes.length === 1 ? "1 like" : `${trackLikes.length} likes`}
+                </Text>
+              </Stack>
+              {like}
+            </Row>
+            <Stack gap={2}>
+              <Slider value={[elapsed]} onChange={([s]) => setElapsed(s)} max={track.duration} label="Seek" />
+              <Row justify="between">
+                <Text size="sm" muted num>
+                  {clock(elapsed)}
+                </Text>
+                <Text size="sm" muted num>
+                  {clock(track.duration)}
+                </Text>
+              </Row>
+            </Stack>
+            <Row justify="center" gap={3}>
+              <IconButton size="lg" icon={<Icon name="rewind" size="md" />} label="Previous track" onClick={() => goTo(index - 1)} />
+              <IconButton
+                size="lg"
+                icon={<Icon name={playing ? "pause" : "play"} size="md" />}
+                label={playing ? "Pause" : "Play"}
+                onClick={() => setPlaying((p) => !p)}
+              />
+              <IconButton size="lg" icon={<Icon name="forward" size="md" />} label="Next track" onClick={() => goTo(index + 1)} />
+            </Row>
+          </Stack>
+        </Card>
+
+        <Stack gap={2}>
+          <Eyebrow>Up next</Eyebrow>
+          {QUEUE.map((t, i) => (
+            <RowCard
+              key={t.id}
+              onClick={() => {
+                goTo(i);
+                setPlaying(true);
+              }}
+            >
+              <Row gap={3} wrap={false}>
+                <Icon name={i === index ? "music" : "play"} size="sm" />
+                <Stack gap={1}>
+                  <Text>{t.title}</Text>
+                  <Text size="sm" muted>
+                    {i === index ? `Now · ${t.artist}` : t.artist}
+                  </Text>
+                </Stack>
+                <Spacer />
+                {myLikes.has(t.id) && <Icon name="heart-filled" size="sm" />}
+                <Text size="sm" muted num>
+                  {clock(t.duration)}
+                </Text>
+              </Row>
+            </RowCard>
+          ))}
+        </Stack>
+      </Stack>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Swap `QUEUE` for the app's own tracks. Real playback is an `<audio>` element whose `src` is the app's own file (a `_files` attachment on a `track` document, read with `useLiveQuery`): call `play()` and `pause()` from the play button, drive `elapsed` from its `timeupdate` event and seek by setting `currentTime` from the `Slider`. Start paused, and never point at media the app has no right to play.
+- Keep one like document per person and track with a deterministic `_id`; a like counter on the track loses likes when two people tap at once, and the count is always the number of like documents.
+- A "Liked" view is a `Segmented` (`tone="info"`) over the queue filtered by the visitor's own likes, not a second database.
+- `Slider` has no `tone` prop and always fills its range with the lead colour, so a view with a scrubber already has its lead: keep play/pause, skip and the heart quiet `IconButton`s, each with a `label` that names its action, and add no second slider (a volume control belongs with real audio, in its own `Card` or `Sheet`).
+- 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/music.json

package/llms/pouf-onboarding.d.ts

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

package/llms/pouf-onboarding.js

@@ -0,0 +1,6 @@
+export const poufOnboardingConfig = {
+    name: "pouf-onboarding",
+    label: "Pouf onboarding block",
+    description: "Step-by-step setup wizard with progress; answers saved on finish",
+};
+//# sourceMappingURL=pouf-onboarding.js.map

package/llms/pouf-onboarding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pouf-onboarding.js","sourceRoot":"","sources":["../../jsr/llms/pouf-onboarding.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,oBAAoB,GAAc;IAC7C,IAAI,EAAE,iBAAiB;IACvB,KAAK,EAAE,uBAAuB;IAC9B,WAAW,EAAE,kEAAkE;CAChF,CAAC"}

package/llms/pouf-onboarding.md

@@ -0,0 +1,227 @@
+# Pouf Onboarding
+
+A short setup wizard that walks a newcomer through a few questions, one at a time: a study group's "who are you and which team", a freelance tool's business name and plan, a club's first-visit questions. Reach for it whenever the app needs a handful of answers before it is useful and they read better as steps than as one long form. The answers persist as the person's own document, so a finished setup stays finished and can be revisited and changed later.
+
+Built from @vibes.diy/pouf components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
+
+## The block
+
+One `Card` with one job per step. An `Eyebrow` names the step ("Step 2 of 3 · Workspace") above a `Progress` bar toned `up`; each step is a `Heading` and one control in a `Field` (an `Input`, or a `RadioGroup` for the plan), checked in plain state when the person moves on, with the error on that step's own `Field` and its control `invalid`. A quiet `Back` and a `Continue` lead sit at the foot of every step; on the last step the lead becomes `Finish` and shows `loading` while the answers are saved. Answers live in one state object that outlives each step, so paging back and forth never loses what was typed. Finishing writes the person's setup as one document with a deterministic `_id` (`setup:<handle>`), and a finished setup opens on a recap with a quiet `Change answers` button; the whole card waits behind a `Skeleton` until identity resolves, so a returning member never sees step one flash first. The finish waits on its `can` verdict from `useVibe("setup")`: a `Skeleton` inside an `aria-busy` wrapper while it resolves, a sentence in the app's own words when saving is closed, and for a visitor who has not signed in a `Sign in to finish` lead wired to `useViewer().requestLogin()`, with every answer they typed kept in place.
+
+### `App.jsx`
+```jsx
+import React, { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import { Button, Card, Eyebrow, Field, Heading, Input, Row, Skeleton, Spacer, Stack, Text } from "@vibes.diy/pouf";
+import { Progress, RadioGroup, Toaster, toast } from "@vibes.diy/pouf/interactive";
+
+const STEPS = ["About you", "Workspace", "How you'll use it"];
+const PLANS = [
+  { value: "solo", label: "Just me" },
+  { value: "team", label: "With a team" },
+  { value: "org", label: "Across a whole organisation" },
+];
+const BLANK = { name: "", workspace: "", plan: "solo" };
+
+/** The one check each step makes before moving on. */
+function stepError(step, answers) {
+  if (step === 0 && answers.name.trim() === "") return { name: "Tell us what to call you." };
+  if (step === 1 && answers.workspace.trim() === "") return { workspace: "Pick a name for your workspace." };
+  return {};
+}
+
+function Recap({ setup, onChange }) {
+  return (
+    <Stack gap={4}>
+      <Eyebrow>All set</Eyebrow>
+      <Heading level={1}>You're all set, {setup.name}</Heading>
+      <Text muted>Here's what you told us.</Text>
+      <Stack gap={2}>
+        <Row justify="between" wrap={false}>
+          <Text size="sm" muted>
+            Workspace
+          </Text>
+          <Text size="sm">{setup.workspace}</Text>
+        </Row>
+        <Row justify="between" wrap={false}>
+          <Text size="sm" muted>
+            Using it
+          </Text>
+          <Text size="sm">{PLANS.find((p) => p.value === setup.plan)?.label}</Text>
+        </Row>
+      </Stack>
+      <Row justify="end">
+        <Button variant="quiet" onClick={onChange}>
+          Change answers
+        </Button>
+      </Row>
+    </Stack>
+  );
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("setup");
+  const { docs } = useLiveQuery("type", { key: "setup" });
+  const { can, me, ready } = useVibe("setup");
+  const { requestLogin } = useViewer();
+  const saved = me ? docs.find((d) => d._id === `setup:${me.userHandle}`) : undefined;
+
+  const [step, setStep] = useState(0);
+  const [editing, setEditing] = useState(false);
+  const [answers, setAnswers] = useState(BLANK);
+  const [errors, setErrors] = useState({});
+  const [saving, setSaving] = useState(false);
+
+  // The document Finish writes: one per person, so changing answers lands on the same one.
+  const draft = { _id: `setup:${me?.userHandle}`, type: "setup", authorHandle: me?.userHandle };
+  const verdict = saved ? can.edit(saved) : can.create(draft);
+  const last = step === STEPS.length - 1;
+
+  const set = (key) => (value) => {
+    setAnswers((a) => ({ ...a, [key]: value }));
+    if (errors[key]) setErrors((e) => ({ ...e, [key]: undefined }));
+  };
+
+  function changeAnswers() {
+    setAnswers({ name: saved.name, workspace: saved.workspace, plan: saved.plan });
+    setStep(0);
+    setEditing(true);
+  }
+
+  async function next(e) {
+    e.preventDefault();
+    const found = stepError(step, answers);
+    setErrors(found);
+    if (Object.keys(found).length > 0) return;
+    if (!last) {
+      setStep((s) => s + 1);
+      return;
+    }
+    setSaving(true);
+    try {
+      await database.put({ ...saved, ...draft, name: answers.name.trim(), workspace: answers.workspace.trim(), plan: answers.plan, finishedAt: Date.now() });
+      setEditing(false);
+      toast.success("Setup saved");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  // The finish button: still checking, closed, signed out, or open.
+  let finish;
+  if (!ready || verdict.pending)
+    finish = (
+      <div aria-busy="true">
+        <Skeleton variant="row" />
+      </div>
+    );
+  else if (!me)
+    // Signing in keeps every answer: they live in this component's state.
+    finish = <Button onClick={requestLogin}>Sign in to finish</Button>;
+  else if (!verdict.ok) finish = <Text muted>Setup is saved for invited members only.</Text>;
+  else
+    finish = (
+      <Button type="submit" loading={saving}>
+        Finish
+      </Button>
+    );
+
+  return (
+    <main className="mx-auto max-w-lg px-4 py-10">
+      <Card>
+        {!ready ? (
+          // Held until identity resolves, so a returning member sees the recap, not step one.
+          <div aria-busy="true">
+            <Skeleton variant="card" />
+          </div>
+        ) : saved && !editing ? (
+          <Recap setup={saved} onChange={changeAnswers} />
+        ) : (
+          <form onSubmit={next} noValidate>
+            <Stack gap={5}>
+              <Stack gap={2}>
+                <Eyebrow>
+                  Step {step + 1} of {STEPS.length} · {STEPS[step]}
+                </Eyebrow>
+                <Progress value={step + 1} max={STEPS.length} tone="up" label="Setup progress" />
+              </Stack>
+
+              {step === 0 && (
+                <Stack gap={4}>
+                  <Heading level={1}>Welcome aboard</Heading>
+                  <Field label="Your name" error={errors.name}>
+                    {(id, describedBy) => (
+                      <Input
+                        id={id}
+                        describedBy={describedBy}
+                        value={answers.name}
+                        onChange={set("name")}
+                        autoComplete="name"
+                        placeholder="Ada"
+                        invalid={errors.name !== undefined}
+                      />
+                    )}
+                  </Field>
+                </Stack>
+              )}
+              {step === 1 && (
+                <Stack gap={4}>
+                  <Heading level={1}>Name your workspace</Heading>
+                  <Field label="Workspace" hint="You can change this later." error={errors.workspace}>
+                    {(id, describedBy) => (
+                      <Input
+                        id={id}
+                        describedBy={describedBy}
+                        value={answers.workspace}
+                        onChange={set("workspace")}
+                        autoComplete="organization"
+                        placeholder="Tuesday study group"
+                        invalid={errors.workspace !== undefined}
+                      />
+                    )}
+                  </Field>
+                </Stack>
+              )}
+              {step === 2 && (
+                <Stack gap={4}>
+                  <Heading level={1}>How will you use it?</Heading>
+                  <RadioGroup label="How you'll use it" value={answers.plan} onChange={set("plan")} options={PLANS} />
+                </Stack>
+              )}
+
+              <Row wrap={false}>
+                <Button
+                  variant="quiet"
+                  disabled={step === 0}
+                  onClick={() => {
+                    setErrors({});
+                    setStep((s) => Math.max(0, s - 1));
+                  }}
+                >
+                  Back
+                </Button>
+                <Spacer />
+                {last ? finish : <Button type="submit">Continue</Button>}
+              </Row>
+            </Stack>
+          </form>
+        )}
+      </Card>
+      <div className="pouf-toasts">
+        <Toaster />
+      </div>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- A step is one entry in `STEPS`, one block of controls and one line in `stepError`; keep each step to a single question so `Continue` stays the obvious move.
+- Keep every answer in the one `answers` object, never in the step's own state, so Back, Continue and signing in never lose a word.
+- Answers the whole group should see (a team's name chosen by its founder) belong on a shared document gated on its own `can`, not on each person's setup.
+- Use the answers elsewhere in the app by reading the person's `setup:<handle>` document; it is the single source of what they chose.
+- 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/onboarding.json

package/llms/pouf-pricing.d.ts

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

package/llms/pouf-pricing.js

@@ -0,0 +1,6 @@
+export const poufPricingConfig = {
+    name: "pouf-pricing",
+    label: "Pouf pricing block",
+    description: "Pricing plans with a billing-cycle toggle; records plan requests, no payment",
+};
+//# sourceMappingURL=pouf-pricing.js.map

package/llms/pouf-pricing.js.map

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

package/llms/pouf-pricing.md

@@ -0,0 +1,193 @@
+# Pouf Pricing
+
+A plans page that compares a few tiers and lets someone ask for one: a yoga studio's memberships, a tutor's packages, a club's season passes, a freelancer's retainers. Reach for it whenever the app's core is "here is what each option costs, pick one". The plans themselves stay inline in the code. Picking a paid plan saves a request document, so the person sees what they asked for on the next visit and the app keeps a record of who asked for what; the owner's view of those requests is a short addition sketched under Adapting. It takes no payment and pretends to take none: settling up is arranged after the request, or by a separate payment integration.
+
+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: compare and choose. An `Eyebrow` and a `Heading` with one `orange` `Highlight` open the page over a muted promise and a `Segmented` billing toggle (`tone="info"`) that recomputes every price shown, with an `up` `Badge` for the yearly saving. Three plan `Card`s sit in a `Grid`, the featured one on the default `Card` with an `info` `Popular` `Badge` and the others `variant="tight"`; each shows its price in a `Heading`, the period and any yearly saving in muted `Text`, and a checklist of features, each line an `ok` `Icon` beside `Text`. The featured plan's button is the view's one lead and the other paid plan's button is quiet, while the free plan shows a muted line instead of a button because there is nothing to request; each shows `loading` while its request lands. The person's latest request sits under the plans with a `Badge` read from its stored status (`info` received, `up` confirmed). Requesting waits on its `can` verdict from `useVibe("plans")`: a `Skeleton` inside an `aria-busy` wrapper in place of the buttons while it resolves, a `Sign in to choose` button wired to `useViewer().requestLogin()` for a visitor who has not signed in, and a sentence in the app's own words when requests are closed.
+
+### `App.jsx`
+```jsx
+import React, { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import { Badge, Button, Card, Eyebrow, Grid, Heading, Highlight, Icon, Row, Segmented, Skeleton, Stack, Text } from "@vibes.diy/pouf";
+import { Toaster, toast } from "@vibes.diy/pouf/interactive";
+
+const PLANS = [
+  { id: "taster", name: "Taster", monthly: 0, blurb: "Try a class before you choose.", features: ["Your first class free", "Mat hire included"] },
+  {
+    id: "regular",
+    name: "Regular",
+    monthly: 60,
+    blurb: "For two or three classes a week.",
+    featured: true,
+    features: ["Unlimited classes", "Free mat hire", "Book a week ahead", "One guest pass a month"],
+  },
+  { id: "family", name: "Family", monthly: 150, blurb: "Up to four people on one plan.", features: ["Everything in Regular", "Four members", "Kids' Saturday class"] },
+];
+const CYCLES = [
+  { value: "monthly", label: "Monthly" },
+  { value: "yearly", label: "Yearly" },
+];
+const YEARLY_DISCOUNT = 0.2;
+const REQUEST_STATUS = { received: { label: "Received", tone: "info" }, confirmed: { label: "Confirmed", tone: "up" } };
+const MONEY = new Intl.NumberFormat(undefined, { style: "currency", currency: "USD", maximumFractionDigits: 0 });
+
+function priceOf(plan, cycle) {
+  return cycle === "yearly" ? Math.round(plan.monthly * 12 * (1 - YEARLY_DISCOUNT)) : plan.monthly;
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("plans");
+  const { docs: requests } = useLiveQuery("type", { key: "request" });
+  const { can, me } = useVibe("plans");
+  const { requestLogin } = useViewer();
+
+  const [cycle, setCycle] = useState("monthly");
+  const [sending, setSending] = useState(undefined);
+  // The plan and cycle just requested, held until the live query brings the request back.
+  const [sent, setSent] = useState(undefined);
+
+  const latest = me ? [...requests].filter((r) => r.authorHandle === me.userHandle).sort((a, b) => b.createdAt - a.createdAt)[0] : undefined;
+
+  // The verdict for the doc choose() writes for a plan, carrying the same fields it stamps.
+  const draftFor = (plan) => ({ type: "request", plan: plan.id, status: "received", authorHandle: me?.userHandle });
+
+  async function choose(plan) {
+    setSending(plan.id);
+    try {
+      // The request records the price as shown, so a later price change never rewrites what was asked for.
+      await database.put({ ...draftFor(plan), cycle, price: priceOf(plan, cycle), createdAt: Date.now() });
+      setSent(`${plan.id}:${cycle}`);
+      toast.success(`Thanks. We'll be in touch about ${plan.name}.`);
+    } finally {
+      setSending(undefined);
+    }
+  }
+
+  function action(plan) {
+    // A free plan needs no request: there is nothing to arrange.
+    if (plan.monthly === 0)
+      return (
+        <Text size="sm" muted>
+          No request needed. Come along to any open class.
+        </Text>
+      );
+    const verdict = can.create(draftFor(plan));
+    const quiet = plan.featured ? undefined : "quiet";
+    if (verdict.pending)
+      return (
+        <div aria-busy="true">
+          <Skeleton variant="row" />
+        </div>
+      );
+    if (!me)
+      return (
+        <Button block variant={quiet} onClick={requestLogin}>
+          Sign in to choose {plan.name}
+        </Button>
+      );
+    if (!verdict.ok) return <Text muted>New requests are paused for now. Ask us at the front desk.</Text>;
+    const asked = (latest?.plan === plan.id && latest?.cycle === cycle) || sent === `${plan.id}:${cycle}`;
+    return (
+      <Button block variant={quiet} disabled={asked || sending !== undefined} loading={sending === plan.id} onClick={() => choose(plan)}>
+        {asked ? "Requested" : `Choose ${plan.name}`}
+      </Button>
+    );
+  }
+
+  return (
+    <main className="mx-auto max-w-5xl px-4 py-8">
+      <Stack gap={6}>
+        <Stack gap={3}>
+          <Eyebrow>Memberships</Eyebrow>
+          <Heading level={1}>
+            Find your <Highlight tone="orange">rhythm</Highlight>
+          </Heading>
+          <Text muted>Simple plans. Change or stop any time.</Text>
+          <Row gap={3}>
+            <Segmented label="Billing" tone="info" value={cycle} onChange={setCycle} options={CYCLES} />
+            {cycle === "yearly" && <Badge tone="up">Save {YEARLY_DISCOUNT * 100}%</Badge>}
+          </Row>
+        </Stack>
+
+        <Grid cols={3}>
+          {PLANS.map((plan) => {
+            const price = priceOf(plan, cycle);
+            const saving = plan.monthly * 12 - price;
+            return (
+              <Card key={plan.id} variant={plan.featured ? "default" : "tight"}>
+                <Stack gap={4}>
+                  <Row justify="between">
+                    <Heading level={3}>{plan.name}</Heading>
+                    {plan.featured && <Badge tone="info">Popular</Badge>}
+                  </Row>
+                  <Stack gap={1}>
+                    <Row gap={2}>
+                      <Heading level={2}>{price === 0 ? "Free" : MONEY.format(price)}</Heading>
+                      {price > 0 && <Text muted>{cycle === "yearly" ? "a year" : "a month"}</Text>}
+                    </Row>
+                    {cycle === "yearly" && saving > 0 && (
+                      <Text size="sm" muted>
+                        {MONEY.format(saving)} less than paying monthly
+                      </Text>
+                    )}
+                  </Stack>
+                  <Text size="sm" muted>
+                    {plan.blurb}
+                  </Text>
+                  <Stack gap={2}>
+                    {plan.features.map((f) => (
+                      <Row key={f} gap={2} wrap={false}>
+                        <Icon name="ok" size="sm" />
+                        <Text size="sm">{f}</Text>
+                      </Row>
+                    ))}
+                  </Stack>
+                  {action(plan)}
+                </Stack>
+              </Card>
+            );
+          })}
+        </Grid>
+
+        {latest && (
+          <Card variant="tight">
+            <Row justify="between">
+              <Stack gap={1}>
+                <Text>
+                  Your request: {PLANS.find((p) => p.id === latest.plan)?.name ?? latest.plan}, {latest.cycle}
+                </Text>
+                <Text size="sm" muted>
+                  Asked on {new Date(latest.createdAt).toLocaleDateString()}
+                </Text>
+              </Stack>
+              <Badge tone={REQUEST_STATUS[latest.status]?.tone ?? "info"}>{REQUEST_STATUS[latest.status]?.label ?? "Received"}</Badge>
+            </Row>
+          </Card>
+        )}
+
+        <Text size="sm" muted>
+          No card needed here. Choosing a plan sends us a request, and we arrange payment with you before it starts.
+        </Text>
+      </Stack>
+      <div className="pouf-toasts">
+        <Toaster />
+      </div>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Swap `PLANS` for the app's own tiers; keep prices as numbers and compute every shown price (and saving) from them, so the toggle can never show a stale figure.
+- Exactly one plan is `featured`, and its button is the one lead; every other plan's button stays `variant="quiet"`.
+- Keep the request a snapshot of the plan, cycle and price as shown: it is a record of what was offered, so a later price change must not touch it. The owner's view is a `Table` of `request` documents with the requester as a `ViewerTag`, each moved from `received` to `confirmed` behind `can.edit(request)`.
+- Real payment is a separate integration with its own provider; until there is one, keep the "no card needed here" line truthful, and keep anything private (a phone number, an address) off the request unless `access.js` keeps each request between its sender and the owner.
+- 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/pricing.json

package/llms/pouf-profile.d.ts

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

package/llms/pouf-profile.js

@@ -0,0 +1,6 @@
+export const poufProfileConfig = {
+    name: "pouf-profile",
+    label: "Pouf profile block",
+    description: "Public profile page with stats, tabs and a saved follow button",
+};
+//# sourceMappingURL=pouf-profile.js.map