@vibes.diy/prompts 14.3.64 → 14.3.65

package/llms/pouf-profile.js.map

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

package/llms/pouf-profile.md

@@ -0,0 +1,177 @@
+# Pouf Profile
+
+A public page about one maker, coach or group that visitors can follow: an illustrator's page, a running coach's profile, a band's home, a club captain's corner. Reach for it whenever the app's core is "who is this, what have they made, and how do I keep up". The profile's own words and posts stay inline in the code; each follow is its own document, so the follower count is real, it survives the next visit, and two people following at once both count.
+
+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: get to know the person, then follow. A `Card` holds the header: an `Avatar` on the decorative `orange` tone, the name as the `Heading`, the handle as an `Eyebrow` and a muted line on where they are, with `Follow` as the view's one lead (it turns into a quiet `Following` once followed and shows `loading` while the write lands). Under it a `Row` of `Metric`s counts posts and followers, the follower figure computed from the follow documents. `Tabs` (`tone="info"`) switch between the posts (each a `tight` `Card` with its words and a muted date), an about panel (a paragraph and `info` `Badge`s for what they do) and the followers, one `RowCard` each with the follower as a `ViewerTag` and a muted date, with an `Empty` before the first. Following waits on its `can` verdict from `useVibe("profile")`, the database the follows live in: a `Skeleton` inside an `aria-busy` wrapper while it resolves, a `Sign in to follow` lead wired to `useViewer().requestLogin()` for a visitor who has not signed in, and a sentence in the app's own words when following is closed; unfollowing waits on `can.delete` of the visitor's own follow.
+
+### `App.jsx`
+```jsx
+import React, { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import { Badge, Button, Card, Empty, Eyebrow, Heading, Metric, Row, RowCard, Skeleton, Stack, Text } from "@vibes.diy/pouf";
+import { Avatar, Tabs } from "@vibes.diy/pouf/interactive";
+
+const PROFILE = {
+  name: "Mira Okafor",
+  initials: "MO",
+  handle: "@mira.draws",
+  where: "Illustrator in Lisbon",
+  about: "I draw small, warm pictures of everyday things: kitchens, corner shops, the cat on the stairs. Commissions open twice a year.",
+  skills: ["Picture books", "Editorial", "Riso prints"],
+};
+const POSTS = [
+  { id: "p3", text: "New riso print of the fish market is up, two colours, fifty copies.", date: "2026-09-28" },
+  { id: "p2", text: "Sketchbook tour: a month of drawing the same café table every morning.", date: "2026-09-14" },
+  { id: "p1", text: "Picture book cover finished. Six months of drawing one very stubborn goat.", date: "2026-08-30" },
+];
+const plural = (n, one, many) => (n === 1 ? `1 ${one}` : `${n} ${many}`);
+
+function Follower({ handle }) {
+  const { ViewerTag } = useViewer();
+  return <ViewerTag userHandle={handle} />;
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("profile");
+  const { docs: follows } = useLiveQuery("type", { key: "follow" });
+  const { can, me } = useVibe("profile");
+  const { requestLogin } = useViewer();
+
+  const [tab, setTab] = useState("posts");
+  const [busy, setBusy] = useState(false);
+
+  const mine = me ? follows.find((f) => f.authorHandle === me.userHandle) : undefined;
+  // The follow this visitor would write: a deterministic id, so following twice lands on one document.
+  const followDraft = { _id: `follow:${me?.userHandle}`, type: "follow", authorHandle: me?.userHandle };
+  const verdict = mine ? can.delete(mine) : can.create(followDraft);
+
+  async function toggleFollow() {
+    setBusy(true);
+    try {
+      if (mine) await database.del(mine._id);
+      else await database.put({ ...followDraft, createdAt: Date.now() });
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  let follow;
+  if (verdict.pending)
+    follow = (
+      <div aria-busy="true">
+        <Skeleton variant="text" />
+      </div>
+    );
+  else if (!me) follow = <Button onClick={requestLogin}>Sign in to follow</Button>;
+  else if (!verdict.ok) follow = <Text muted>Following opens up soon.</Text>;
+  else
+    follow = (
+      <Button variant={mine ? "quiet" : undefined} loading={busy} onClick={toggleFollow} aria-pressed={Boolean(mine)}>
+        {mine ? "Following" : "Follow"}
+      </Button>
+    );
+
+  const posts = (
+    <Stack gap={3}>
+      {POSTS.map((p) => (
+        <Card key={p.id} variant="tight">
+          <Stack gap={2}>
+            <Text>{p.text}</Text>
+            <Text size="sm" muted>
+              {new Date(`${p.date}T12:00:00`).toLocaleDateString(undefined, { month: "short", day: "numeric" })}
+            </Text>
+          </Stack>
+        </Card>
+      ))}
+    </Stack>
+  );
+
+  const about = (
+    <Stack gap={3}>
+      <Text>{PROFILE.about}</Text>
+      <Row gap={2}>
+        {PROFILE.skills.map((s) => (
+          <Badge key={s} tone="info">
+            {s}
+          </Badge>
+        ))}
+      </Row>
+    </Stack>
+  );
+
+  const followers =
+    follows.length === 0 ? (
+      <Empty icon="users" title="No followers yet">
+        Be the first to follow along.
+      </Empty>
+    ) : (
+      <Stack gap={2}>
+        {[...follows]
+          .sort((a, b) => b.createdAt - a.createdAt)
+          .map((f) => (
+            <RowCard key={f._id}>
+              <Row justify="between" wrap={false}>
+                <Follower handle={f.authorHandle} />
+                <Text size="sm" muted>
+                  Since {new Date(f.createdAt).toLocaleDateString(undefined, { month: "short", day: "numeric" })}
+                </Text>
+              </Row>
+            </RowCard>
+          ))}
+      </Stack>
+    );
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-8">
+      <Card>
+        <Stack gap={5}>
+          <Row justify="between" align="top">
+            <Row gap={3} wrap={false} align="top">
+              <Avatar fallback={PROFILE.initials} size="lg" tone="orange" />
+              <Stack gap={1}>
+                <Heading level={1}>{PROFILE.name}</Heading>
+                <Eyebrow>{PROFILE.handle}</Eyebrow>
+                <Text size="sm" muted>
+                  {PROFILE.where}
+                </Text>
+              </Stack>
+            </Row>
+            {follow}
+          </Row>
+
+          <Row gap={4}>
+            <Metric label="Posts" value={String(POSTS.length)} />
+            <Metric label="Followers" value={String(follows.length)} />
+          </Row>
+
+          <Tabs
+            tone="info"
+            value={tab}
+            onChange={setTab}
+            tabs={[
+              { value: "posts", label: "Posts", content: posts },
+              { value: "about", label: "About", content: about },
+              { value: "followers", label: "Followers", content: followers },
+            ]}
+          />
+        </Stack>
+      </Card>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Swap `PROFILE` and `POSTS` for the person's own words; posts the owner writes in the app become `post` documents behind an owner-only `can.create`, read with `useLiveQuery("type", { key: "post" })`.
+- Keep one follow document per follower with a deterministic `_id`; a follower counter on the profile loses follows when two people tap at once, and the count is always `follows.length`.
+- When the profile belongs to a member of the app rather than the app's owner, key the follows by both handles (`follow:<theirs>:<yours>`), show the member with `<ViewerTag userHandle={...} />` instead of the `Avatar` and typed name, and list profiles from the members' own documents.
+- `Avatar` takes the decorative tone here because the page is about one person, not a list of people; every follower stays a `ViewerTag`.
+- 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/profile.json

package/llms/pouf-quiz.d.ts

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

package/llms/pouf-quiz.js

@@ -0,0 +1,6 @@
+export const poufQuizConfig = {
+    name: "pouf-quiz",
+    label: "Pouf quiz block",
+    description: "Multiple-choice quiz with instant feedback, a scored result and saved attempts",
+};
+//# sourceMappingURL=pouf-quiz.js.map

package/llms/pouf-quiz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pouf-quiz.js","sourceRoot":"","sources":["../../jsr/llms/pouf-quiz.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,cAAc,GAAc;IACvC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,iBAAiB;IACxB,WAAW,EAAE,gFAAgF;CAC9F,CAAC"}

package/llms/pouf-quiz.md

@@ -0,0 +1,267 @@
+# Pouf Quiz
+
+A short multiple-choice quiz that keeps score: a book club's chapter check, a practice round before a test, a pub quiz warm-up, a training check for new staff. Reach for it when the app asks a handful of questions one at a time, says right or wrong after each answer, ends on a score and lets people come back to beat it. Each finished attempt someone saves is its own document, so their past scores are there on the next visit and on any device.
+
+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: answer the questions, then keep the score. A `Heading` and a muted line open the page. The quiz sits on a `Card`: an `Eyebrow` with the question number beside an `info` `Badge` counting correct answers so far (it steps aside on the result, which states the score once), and a `Progress` (`info`) across the top. Each question is a `Heading level={2}` over a `RadioGroup`; `Check answer` is the view's one lead, then the answer shows as a `Badge` (`up` right, `down` wrong) with the right option in muted `Text`, and the lead becomes `Next question`. The result swaps in a `Blob` (`up` for a pass, `warn` otherwise), the score and a recap of every question with its own `up` or `down` `Badge`. `Save score` is then the lead, with `loading` while the write lands, beside a quiet `Play again`. A signed-in person's earlier attempts sit below as `RowCard`s, newest first, each with a `Badge` toned by how it went. Saving waits on its `can` verdict from `useVibe("quiz")`, the database the attempts live in: a `Skeleton` inside an `aria-busy` wrapper while it resolves, a `Sign in to save your score` lead wired to `useViewer().requestLogin()` for a visitor who has not signed in, and a sentence in the app's own words when saving is closed. Anyone can take the quiz without signing in; the attempt lives only in the page until it is saved, and the copy says so.
+
+### `App.jsx`
+```jsx
+import React, { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import { Badge, Blob, Button, Card, Eyebrow, Heading, Row, RowCard, Skeleton, Stack, Text } from "@vibes.diy/pouf";
+import { Progress, RadioGroup } from "@vibes.diy/pouf/interactive";
+
+const QUIZ_ID = "houseplants";
+const QUESTIONS = [
+  {
+    q: "What usually kills a houseplant first?",
+    options: [
+      { value: "a", label: "Too little water" },
+      { value: "b", label: "Too much water" },
+      { value: "c", label: "Too much light" },
+    ],
+    answer: "b",
+  },
+  {
+    q: "How can you tell a pot plant needs water?",
+    options: [
+      { value: "a", label: "The top few centimetres of soil are dry" },
+      { value: "b", label: "It is Monday" },
+      { value: "c", label: "The leaves are shiny" },
+    ],
+    answer: "a",
+  },
+  {
+    q: "Which plant copes best with a dim corner?",
+    options: [
+      { value: "a", label: "A cactus" },
+      { value: "b", label: "A snake plant" },
+      { value: "c", label: "A basil plant" },
+    ],
+    answer: "b",
+  },
+  {
+    q: "Why does a pot need a drainage hole?",
+    options: [
+      { value: "a", label: "So roots can grow out of it" },
+      { value: "b", label: "So extra water can run out instead of rotting the roots" },
+      { value: "c", label: "It makes the pot lighter" },
+    ],
+    answer: "b",
+  },
+  {
+    q: "When is the best time to repot most houseplants?",
+    options: [
+      { value: "a", label: "Spring, as they start growing" },
+      { value: "b", label: "Midwinter" },
+      { value: "c", label: "Whenever a leaf turns yellow" },
+    ],
+    answer: "a",
+  },
+];
+const TOTAL = QUESTIONS.length;
+const PASS = 3;
+const answerLabel = (question) => question.options.find((o) => o.value === question.answer)?.label;
+const when = (ms) => new Date(ms).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("quiz");
+  const { docs } = useLiveQuery("type", { key: "attempt" });
+  const { can, me } = useVibe("quiz");
+  const { requestLogin } = useViewer();
+
+  // The attempt is a draft: it lives in the page until it ends and someone saves it.
+  const [step, setStep] = useState(0);
+  const [choice, setChoice] = useState("");
+  const [revealed, setRevealed] = useState(false);
+  const [results, setResults] = useState([]);
+  const [saving, setSaving] = useState(false);
+  const [savedResults, setSavedResults] = useState(undefined);
+
+  const question = QUESTIONS[step];
+  const score = results.filter(Boolean).length;
+  const done = results.length === TOTAL;
+  const lastRight = results[results.length - 1];
+
+  // One document per saved attempt; this person's, newest first.
+  const mine = me
+    ? docs
+        .filter((d) => d.quiz === QUIZ_ID && d.authorHandle === me.userHandle)
+        .sort((a, b) => b.createdAt - a.createdAt)
+        .slice(0, 5)
+    : [];
+
+  // The verdict for the doc saveScore writes, carrying the same fields it stamps.
+  const canSave = can.create({ type: "attempt", quiz: QUIZ_ID, authorHandle: me?.userHandle });
+
+  function check() {
+    setRevealed(true);
+    setResults((r) => [...r, choice === question.answer]);
+  }
+
+  function next() {
+    setStep((s) => s + 1);
+    setChoice("");
+    setRevealed(false);
+  }
+
+  function playAgain() {
+    setStep(0);
+    setChoice("");
+    setRevealed(false);
+    setResults([]);
+    setSavedResults(undefined);
+  }
+
+  async function saveScore() {
+    setSaving(true);
+    try {
+      await database.put({ type: "attempt", quiz: QUIZ_ID, correct: score, total: TOTAL, authorHandle: me?.userHandle, createdAt: Date.now() });
+      // Marks this exact attempt as saved, so the button can't post it twice.
+      setSavedResults(results);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  let ending;
+  if (savedResults === results) ending = <Text muted>Saved. It is in your attempts below.</Text>;
+  else if (canSave.pending)
+    ending = (
+      <div aria-busy="true">
+        <Skeleton variant="row" />
+      </div>
+    );
+  else if (!me)
+    ending = (
+      <Stack gap={2}>
+        <Text size="sm" muted>
+          Sign in to keep this score. Signing in may start the quiz over.
+        </Text>
+        <Button onClick={requestLogin}>Sign in to save your score</Button>
+      </Stack>
+    );
+  else if (!canSave.ok) ending = <Text muted>Scores aren't being kept right now. Play on for practice.</Text>;
+  else
+    ending = (
+      <Button loading={saving} onClick={saveScore}>
+        Save score
+      </Button>
+    );
+
+  const passed = score >= PASS;
+
+  return (
+    <main className="mx-auto max-w-xl px-4 py-8">
+      <Stack gap={5}>
+        <Stack gap={1}>
+          <Heading level={1}>Houseplant basics</Heading>
+          <Text muted>{TOTAL} questions. Pick an answer, check it, move on.</Text>
+        </Stack>
+
+        <Card>
+          <Stack gap={5}>
+            <Stack gap={2}>
+              <Row justify="between">
+                <Eyebrow>{done ? "Finished" : `Question ${step + 1} of ${TOTAL}`}</Eyebrow>
+                {!done && <Badge tone="info">{score} correct</Badge>}
+              </Row>
+              <Progress value={results.length} max={TOTAL} tone="info" label="Quiz progress" />
+            </Stack>
+
+            {done ? (
+              <Stack gap={4}>
+                <Row gap={3} wrap={false}>
+                  <Blob icon={passed ? "trophy" : "flame"} tone={passed ? "up" : "warn"} />
+                  <Stack gap={1}>
+                    <Heading level={2}>{score === TOTAL ? "Perfect score!" : passed ? "Nice work" : "Keep practising"}</Heading>
+                    <Text muted>
+                      You got {score} of {TOTAL} right.
+                    </Text>
+                  </Stack>
+                </Row>
+                <Stack gap={2}>
+                  {QUESTIONS.map((item, i) => (
+                    <Row key={item.q} gap={2} wrap={false}>
+                      <Badge tone={results[i] ? "up" : "down"}>{results[i] ? "Right" : "Missed"}</Badge>
+                      <Text size="sm" muted truncate>
+                        {item.q}
+                      </Text>
+                    </Row>
+                  ))}
+                </Stack>
+                <Row gap={2}>
+                  {ending}
+                  <Button variant="quiet" onClick={playAgain}>
+                    Play again
+                  </Button>
+                </Row>
+              </Stack>
+            ) : (
+              <Stack gap={4}>
+                <Heading level={2}>{question.q}</Heading>
+                <RadioGroup label="Your answer" value={choice} onChange={setChoice} options={question.options} disabled={revealed} />
+                {revealed && (
+                  <Row gap={2} wrap={false}>
+                    <Badge tone={lastRight ? "up" : "down"}>{lastRight ? "Correct" : "Not quite"}</Badge>
+                    {!lastRight && <Text muted>The answer is “{answerLabel(question)}”.</Text>}
+                  </Row>
+                )}
+                <Row justify="end">
+                  {revealed ? (
+                    <Button onClick={next}>Next question</Button>
+                  ) : (
+                    <Button disabled={!choice} onClick={check}>
+                      Check answer
+                    </Button>
+                  )}
+                </Row>
+              </Stack>
+            )}
+          </Stack>
+        </Card>
+
+        {me && mine.length > 0 && (
+          <Stack gap={3}>
+            <Heading level={2}>Your attempts</Heading>
+            <Stack gap={2}>
+              {mine.map((a) => (
+                <RowCard key={a._id}>
+                  <Row justify="between" wrap={false}>
+                    <Text>
+                      {a.correct} of {a.total} right
+                    </Text>
+                    <Row gap={2} wrap={false}>
+                      <Text size="sm" muted>
+                        {when(a.createdAt)}
+                      </Text>
+                      <Badge tone={a.correct === a.total ? "up" : a.correct >= PASS ? "info" : "warn"}>
+                        {a.correct === a.total ? "Perfect" : a.correct >= PASS ? "Passed" : "Practise"}
+                      </Badge>
+                    </Row>
+                  </Row>
+                </RowCard>
+              ))}
+            </Stack>
+          </Stack>
+        )}
+      </Stack>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Change the questions, not the flow: each one is `{ q, options: [{ value, label }], answer }`, the attempt is a list of right-or-wrong results in page state, and the database is touched only when a finished attempt is saved.
+- Keep one attempt document per saved run and compute everything else (best score, average, a class board) from them at read time; a single "best score" document that each attempt rewrites loses scores when two people finish at once.
+- Store what a later view might group or sort by on the attempt (`quiz` for which quiz, `correct`, `total`, a `level`), and give each quiz its own `QUIZ_ID` so several quizzes can share one database.
+- A board of everyone's scores names each player with `useViewer()`'s `ViewerTag` from the stored `authorHandle`. Scores people would rather keep to themselves (a staff assessment, a medical exam drill) need an access function that limits who can read them before they are shown to anyone else.
+- 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/quiz.json

package/llms/pouf-settings.d.ts

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

package/llms/pouf-settings.js

@@ -0,0 +1,6 @@
+export const poufSettingsConfig = {
+    name: "pouf-settings",
+    label: "Pouf settings block",
+    description: "Per-person settings with tabs, switches and a save bar",
+};
+//# sourceMappingURL=pouf-settings.js.map

package/llms/pouf-settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pouf-settings.js","sourceRoot":"","sources":["../../jsr/llms/pouf-settings.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,kBAAkB,GAAc;IAC3C,IAAI,EAAE,eAAe;IACrB,KAAK,EAAE,qBAAqB;IAC5B,WAAW,EAAE,wDAAwD;CACtE,CAAC"}