@vibes.diy/prompts 14.3.64 → 14.3.66

package/llms/pouf-contact.md

@@ -0,0 +1,231 @@
+# Pouf Contact
+
+A get-in-touch section where someone leaves their name, email, a topic and a message for the people behind the app: a photography studio's enquiry form, a community garden's question box, a band's booking request. Reach for it whenever the app's job is to collect a note and say clearly that it arrived. Every message persists as its own document, so the team can read and answer them later (the inbox block is the reading side).
+
+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: send a note. A `Grid cols="sidebar"` puts the pitch beside the form: an `info` `Badge` with the reply time, an `Eyebrow`, the `Heading` and a muted line, then two tight `Card`s that tilt, each fronted by a small `Blob` (`info` mail, `idle` clock). The form sits on its own `Card`: name and email `Input`s, a topic `Select` and a message `Textarea`, each in a `Field`. It is checked in plain state on submit, with each error on its own `Field`, its control `invalid` and focus moved to the first one. `Send message` is the view's one lead and shows `loading` while the write lands. Each message is one document stamped with the sender's handle. The form waits on its `can` verdict from `useVibe("contact")`: a `Skeleton` inside an `aria-busy` wrapper while it resolves, a `Sign in to send a message` lead wired to `requestLogin()` when sending is closed to a signed-out visitor, and a sentence in the app's own words when it is closed to someone already signed in. Where `access.js` lets a signed-out visitor write, they can still send; their note is kept on this device until they sign in. So their confirmation says that honestly, and its lead is `Sign in to send it`, wired to `useViewer().requestLogin()`. A signed-in sender sees `Message sent` in an `Empty`, with a quiet `Send another message`.
+
+### `App.jsx`
+```jsx
+import React, { useRef, useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import { Badge, Blob, Button, Card, Empty, Eyebrow, Field, Grid, Heading, Input, Row, Skeleton, Stack, Text, Textarea } from "@vibes.diy/pouf";
+import { Select } from "@vibes.diy/pouf/interactive";
+
+const TOPICS = [
+  { value: "booking", label: "Book a shoot" },
+  { value: "prints", label: "Prints and licensing" },
+  { value: "other", label: "Something else" },
+];
+const BLANK = { name: "", email: "", topic: "booking", message: "" };
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+function check(form) {
+  return {
+    name: form.name.trim() === "" ? "Add your name so the reply has somewhere to land." : undefined,
+    email: EMAIL.test(form.email.trim()) ? undefined : "Enter a complete email, like you@example.com.",
+    message: form.message.trim().length < 20 ? "Share at least 20 characters so we can help." : undefined,
+  };
+}
+
+export default function App() {
+  const { database } = useFireproof("contact");
+  const { can, me } = useVibe("contact");
+  const { requestLogin } = useViewer();
+
+  const [form, setForm] = useState(BLANK);
+  const [errors, setErrors] = useState({});
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(undefined);
+  const refs = { name: useRef(null), email: useRef(null), message: useRef(null) };
+  // The verdict for the document send() writes, carrying the same fields it stamps.
+  const draft = { type: "message", authorHandle: me?.userHandle };
+  const canSend = can.create(draft);
+
+  const set = (key) => (value) => {
+    setForm((f) => ({ ...f, [key]: value }));
+    if (errors[key]) setErrors((e) => ({ ...e, [key]: undefined }));
+  };
+
+  async function send(e) {
+    e.preventDefault();
+    const found = check(form);
+    setErrors(found);
+    const first = ["name", "email", "message"].find((k) => found[k]);
+    if (first) {
+      refs[first].current?.focus();
+      return;
+    }
+    setSending(true);
+    try {
+      await database.put({
+        ...draft,
+        name: form.name.trim(),
+        email: form.email.trim(),
+        topic: form.topic,
+        message: form.message.trim(),
+        createdAt: Date.now(),
+      });
+      setSent({ name: form.name.trim(), email: form.email.trim() });
+      // Cleared only once the write lands, so a local failure keeps every word.
+      setForm(BLANK);
+    } finally {
+      setSending(false);
+    }
+  }
+
+  let panel;
+  if (canSend.pending)
+    panel = (
+      <div aria-busy="true">
+        <Skeleton variant="card" />
+      </div>
+    );
+  else if (!canSend.ok && !me)
+    panel = (
+      <Stack gap={3}>
+        <Text muted>Sign in and your note goes straight to the studio.</Text>
+        <Button block onClick={requestLogin}>
+          Sign in to send a message
+        </Button>
+      </Stack>
+    );
+  else if (!canSend.ok) panel = <Text muted>This form is closed for now. Email us at the address beside it instead.</Text>;
+  else if (sent && !me)
+    // Signed-out writes stay on this device until sign-in, so say exactly that.
+    panel = (
+      <Stack gap={4}>
+        <Empty icon="lock" title="Saved on this device">
+          Sign in and your note goes straight to the studio, nothing to retype.
+        </Empty>
+        <Button block onClick={requestLogin}>
+          Sign in to send it
+        </Button>
+        <Button block variant="quiet" onClick={() => setSent(undefined)}>
+          Write another
+        </Button>
+      </Stack>
+    );
+  else if (sent)
+    panel = (
+      <Stack gap={4}>
+        <Empty icon="send" title="Message sent">
+          Thanks, {sent.name}. A reply will go to {sent.email}.
+        </Empty>
+        <Button block variant="quiet" onClick={() => setSent(undefined)}>
+          Send another message
+        </Button>
+      </Stack>
+    );
+  else
+    panel = (
+      <form onSubmit={send} noValidate>
+        <Stack gap={4}>
+          <Field label="Name" error={errors.name}>
+            {(id, describedBy) => (
+              <Input
+                ref={refs.name}
+                id={id}
+                describedBy={describedBy}
+                value={form.name}
+                onChange={set("name")}
+                autoComplete="name"
+                invalid={errors.name !== undefined}
+              />
+            )}
+          </Field>
+          <Field label="Email" error={errors.email}>
+            {(id, describedBy) => (
+              <Input
+                ref={refs.email}
+                id={id}
+                describedBy={describedBy}
+                type="email"
+                inputMode="email"
+                value={form.email}
+                onChange={set("email")}
+                autoComplete="email"
+                spellCheck={false}
+                invalid={errors.email !== undefined}
+              />
+            )}
+          </Field>
+          <Field label="What can we help with?">
+            {(id, describedBy) => <Select id={id} describedBy={describedBy} value={form.topic} onChange={set("topic")} options={TOPICS} />}
+          </Field>
+          <Field label="Message" hint="A few sentences is plenty." error={errors.message}>
+            {(id, describedBy) => (
+              <Textarea
+                ref={refs.message}
+                id={id}
+                describedBy={describedBy}
+                value={form.message}
+                onChange={set("message")}
+                rows={6}
+                placeholder="The date, the place and what you have in mind."
+                invalid={errors.message !== undefined}
+              />
+            )}
+          </Field>
+          <Button block type="submit" loading={sending}>
+            Send message
+          </Button>
+        </Stack>
+      </form>
+    );
+
+  return (
+    <main className="mx-auto max-w-5xl px-4 py-10">
+      <Grid cols="sidebar" gap={6}>
+        <Stack gap={5}>
+          <Stack gap={3}>
+            <Row>
+              <Badge tone="info">Usually replies in a day</Badge>
+            </Row>
+            <Eyebrow>Contact the studio</Eyebrow>
+            <Heading level={1}>Tell us what you're planning.</Heading>
+            <Text muted>A short first note is enough: the occasion, the date and anything we should know.</Text>
+          </Stack>
+          <Card variant="tight" motion="tilt-left">
+            <Row gap={3} wrap={false} align="top">
+              <Blob icon="mail" tone="info" size="sm" />
+              <Stack gap={1}>
+                <Text>Prefer email?</Text>
+                <Text size="sm" muted>
+                  hello@example.com
+                </Text>
+              </Stack>
+            </Row>
+          </Card>
+          <Card variant="tight" motion="tilt-right">
+            <Row gap={3} wrap={false} align="top">
+              <Blob icon="clock" tone="idle" size="sm" />
+              <Stack gap={1}>
+                <Text>Read by a person</Text>
+                <Text size="sm" muted>
+                  Every message gets a real reply, Monday to Friday.
+                </Text>
+              </Stack>
+            </Row>
+          </Card>
+        </Stack>
+        <Card>{panel}</Card>
+      </Grid>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Rename the topics and copy to the app's own world (`Book a session`, `Volunteer`, `Press`); a topic is one more `SelectOption`, not a second form.
+- Messages hold people's emails, so `access.js` should let a sender create their own and only the team read them all; read them with the inbox block, never on this page.
+- Add a field (a phone number, a preferred date) as one more `Field`, one more line in `check` and one more property on the message.
+- Keep the honest signed-out confirmation: a signed-out note stays on the device until sign-in, so never tell that visitor it was sent.
+- 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/contact.json

package/llms/pouf-course.d.ts

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

package/llms/pouf-course.js

@@ -0,0 +1,6 @@
+export const poufCourseConfig = {
+    name: "pouf-course",
+    label: "Pouf course block",
+    description: "Course outline with lessons to complete and a progress bar",
+};
+//# sourceMappingURL=pouf-course.js.map

package/llms/pouf-course.js.map

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

package/llms/pouf-course.md

@@ -0,0 +1,299 @@
+# Pouf Course
+
+A course outline someone works through lesson by lesson: a beginner pottery class, new staff training at a café, a study plan for an exam, a coding bootcamp's first week. Reach for it whenever the app's core is an ordered set of lessons, each with a rough length, that a person marks complete while a bar shows how far along they are. The lessons and each person's completions persist, so progress is waiting on the next visit and on every device, and every learner keeps their own.
+
+Built from @vibes.diy/pouf components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
+
+## The block
+
+Two views, one job each. The outline opens with the `Heading` and a muted count beside a quiet `Add lesson` button that opens a `Dialog` with the lesson form. A `Card` holds the person's progress: a `Progress` bar toned `up`, the percent and minutes left in `Text`, a `Blob` (`info` target while lessons remain, `up` trophy once they are all done) and a `Continue` button, the outline's one lead, that opens the next unfinished lesson. Each lesson is a clickable `RowCard` with a small `Blob`, a muted line for its kind and length, its title and a `Badge` (`up` done, `idle` to do); an `Empty` stands in before the first lesson. Opening a lesson swaps in the lesson view: a quiet `IconButton` to go back, the kind as an `info` `Badge`, the title as the `Heading`, `Metric`s for the time and the lesson's place in the course, and `Mark complete` as that view's lead (or, once done, a quiet `Mark not done` beside a `Next lesson` lead). A completion is its own document with a deterministic `_id` per lesson and person, so each learner's progress is theirs and marking twice lands on one document. Every write waits on its `can` verdict from `useVibe("course")`: the lesson form and the completion buttons show a `Skeleton` inside an `aria-busy` wrapper while the verdict resolves and a sentence in the app's own words when that write is closed to this visitor. Progress belongs to a person, so a visitor who has not signed in sees a `Sign in to track progress` button wired to `useViewer().requestLogin()` instead of the completion buttons.
+
+### `App.jsx`
+```jsx
+import React, { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import {
+  Badge,
+  Blob,
+  Button,
+  Card,
+  Empty,
+  Field,
+  Heading,
+  Icon,
+  IconButton,
+  Input,
+  Metric,
+  NumberInput,
+  Row,
+  RowCard,
+  Skeleton,
+  Spacer,
+  Stack,
+  Text,
+} from "@vibes.diy/pouf";
+import { Dialog, Progress, Select, Toaster, toast } from "@vibes.diy/pouf/interactive";
+
+const KINDS = [
+  { value: "Lesson", label: "Lesson" },
+  { value: "Exercise", label: "Exercise" },
+  { value: "Quiz", label: "Quiz" },
+];
+
+const MINUTES = new Intl.NumberFormat(undefined, { style: "unit", unit: "minute" });
+
+/** Three states for any write surface: resolving, closed to this visitor, open. */
+function Gate({ verdict, closed, children }) {
+  if (verdict.pending)
+    return (
+      <div aria-busy="true">
+        <Skeleton variant="row" />
+      </div>
+    );
+  if (!verdict.ok) return <Text muted>{closed}</Text>;
+  return children;
+}
+
+function LessonView({ lesson, position, mine, next, database, can, me, onBack, onOpen }) {
+  const { requestLogin } = useViewer();
+  // The completion this visitor would write: one id per lesson and person, written only once `me` is known.
+  const doneDraft = { _id: `done:${lesson._id}:${me?.userHandle}`, type: "completion", lessonId: lesson._id, authorHandle: me?.userHandle };
+  const verdict = mine ? can.delete(mine) : can.create(doneDraft);
+
+  async function markComplete() {
+    await database.put(doneDraft);
+    toast.success("Lesson complete");
+    if (next) onOpen(next._id);
+  }
+
+  async function markNotDone() {
+    await database.del(mine._id);
+  }
+
+  return (
+    <Stack gap={5}>
+      <Stack gap={2}>
+        <Row gap={2} wrap={false}>
+          <IconButton size="sm" onClick={onBack} label="Back to the outline" icon={<Icon name="prev" size="sm" />} />
+          <Badge tone="info">{lesson.kind}</Badge>
+          {mine && <Badge tone="up">Done</Badge>}
+        </Row>
+        <Heading level={1}>{lesson.title}</Heading>
+      </Stack>
+
+      <Card variant="tight">
+        <Row gap={4}>
+          <Metric label="Time" value={MINUTES.format(lesson.minutes)} />
+          <Metric label="Lesson" value={position} />
+        </Row>
+      </Card>
+
+      {!verdict.pending && !me ? (
+        // Progress belongs to a person, so a visitor who hasn't signed in is asked to, in the app's words.
+        <Stack gap={2}>
+          <Text muted>Sign in to keep your progress on every device.</Text>
+          <Row justify="end">
+            <Button onClick={requestLogin}>Sign in to track progress</Button>
+          </Row>
+        </Stack>
+      ) : (
+      <Gate verdict={verdict} closed="Tracking progress opens up once you've joined the course.">
+        <Row justify="end">
+          {mine ? (
+            <Button variant="quiet" onClick={markNotDone}>
+              Mark not done
+            </Button>
+          ) : (
+            <Button onClick={markComplete}>
+              <Icon name="ok" size="sm" /> Mark complete
+            </Button>
+          )}
+        </Row>
+      </Gate>
+      )}
+      {/* Moving on is not a write, so it sits outside the gate. */}
+      {mine && next && (
+        <Row justify="end">
+          <Button onClick={() => onOpen(next._id)}>Next lesson</Button>
+        </Row>
+      )}
+    </Stack>
+  );
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("course");
+  const { can, me } = useVibe("course");
+  const { docs: lessonDocs } = useLiveQuery("type", { key: "lesson" });
+  const { docs: completions } = useLiveQuery("type", { key: "completion" });
+  const lessons = [...lessonDocs].sort((a, b) => a.createdAt - b.createdAt);
+
+  const [openId, setOpenId] = useState(undefined);
+  const [adding, setAdding] = useState(false);
+  const [form, setForm] = useState({ title: "", kind: "Lesson", minutes: "10" });
+  const [errors, setErrors] = useState({});
+  // The verdict for the doc addLesson writes, carrying the same fields it stamps.
+  const canAdd = can.create({ type: "lesson", authorHandle: me?.userHandle });
+
+  const set = (key) => (value) => setForm((f) => ({ ...f, [key]: value }));
+  // Only this visitor's completions count toward their bar.
+  // Nobody signed in has no completions: progress is tracked per person.
+  const mineFor = (lesson) => (me ? completions.find((c) => c.lessonId === lesson._id && c.authorHandle === me.userHandle) : undefined);
+  const doneCount = lessons.filter(mineFor).length;
+  const percent = lessons.length === 0 ? 0 : Math.round((doneCount / lessons.length) * 100);
+  const left = lessons.filter((l) => !mineFor(l)).reduce((sum, l) => sum + l.minutes, 0);
+  const finished = lessons.length > 0 && doneCount === lessons.length;
+  const current = lessons.find((l) => l._id === openId);
+  // The next unfinished lesson after `from`, wrapping round to any earlier one still open.
+  const nextAfter = (from) => {
+    const at = lessons.findIndex((l) => l._id === from?._id);
+    return [...lessons.slice(at + 1), ...lessons.slice(0, Math.max(at, 0))].find((l) => l._id !== from?._id && !mineFor(l));
+  };
+  const upNext = nextAfter(undefined);
+
+  async function addLesson(e) {
+    e.preventDefault();
+    const minutes = Number(form.minutes);
+    const found = {
+      title: form.title.trim() === "" ? "Give the lesson a title." : undefined,
+      minutes: Number.isInteger(minutes) && minutes > 0 ? undefined : "Enter a whole number of minutes.",
+    };
+    setErrors(found);
+    if (found.title || found.minutes) return;
+    await database.put({ type: "lesson", title: form.title.trim(), kind: form.kind, minutes, authorHandle: me?.userHandle, createdAt: Date.now() });
+    setForm({ title: "", kind: "Lesson", minutes: "10" });
+    setAdding(false);
+    toast.success("Lesson added");
+  }
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-8">
+      {current ? (
+        <LessonView
+          lesson={current}
+          position={`${lessons.indexOf(current) + 1} of ${lessons.length}`}
+          mine={mineFor(current)}
+          next={nextAfter(current)}
+          database={database}
+          can={can}
+          me={me}
+          onBack={() => setOpenId(undefined)}
+          onOpen={setOpenId}
+        />
+      ) : (
+        <Stack gap={5}>
+          <Row justify="between" align="top">
+            <Stack gap={1}>
+              <Heading level={1}>Your course</Heading>
+              <Text muted>{lessons.length === 1 ? "1 lesson" : `${lessons.length} lessons`}</Text>
+            </Stack>
+            <Dialog
+              title="Add a lesson"
+              open={adding}
+              onOpenChange={setAdding}
+              trigger={
+                <Button variant="quiet" size="sm">
+                  Add lesson
+                </Button>
+              }
+            >
+              <Gate verdict={canAdd} closed="Adding lessons is for the people who run this course.">
+                <form onSubmit={addLesson} noValidate>
+                  <Stack gap={3}>
+                    <Field label="Title" error={errors.title}>
+                      {(id, describedBy) => (
+                        <Input id={id} describedBy={describedBy} value={form.title} onChange={set("title")} invalid={errors.title !== undefined} />
+                      )}
+                    </Field>
+                    <Field label="Kind">
+                      {(id, describedBy) => <Select id={id} describedBy={describedBy} value={form.kind} onChange={set("kind")} options={KINDS} />}
+                    </Field>
+                    <Field label="Minutes" error={errors.minutes}>
+                      {(id, describedBy) => (
+                        <NumberInput
+                          id={id}
+                          describedBy={describedBy}
+                          value={form.minutes}
+                          onChange={set("minutes")}
+                          min={1}
+                          invalid={errors.minutes !== undefined}
+                        />
+                      )}
+                    </Field>
+                    <Row justify="end">
+                      <Button type="submit">Save lesson</Button>
+                    </Row>
+                  </Stack>
+                </form>
+              </Gate>
+            </Dialog>
+          </Row>
+
+          {lessons.length > 0 && (
+            <Card>
+              <Row gap={4} wrap={false}>
+                <Stack gap={3}>
+                  <Progress value={percent} tone="up" label="Course completion" />
+                  <Row justify="between">
+                    <Text size="sm">{percent}% complete</Text>
+                    <Text size="sm" muted>
+                      {finished ? "All done" : `${MINUTES.format(left)} left`}
+                    </Text>
+                  </Row>
+                  {upNext && (
+                    <Row>
+                      <Button onClick={() => setOpenId(upNext._id)}>Continue</Button>
+                    </Row>
+                  )}
+                </Stack>
+                <Blob icon={finished ? "trophy" : "target"} tone={finished ? "up" : "info"} size="md" />
+              </Row>
+            </Card>
+          )}
+
+          {lessons.length === 0 ? (
+            <Empty icon="play" title="No lessons yet">
+              Add the first lesson to build the outline.
+            </Empty>
+          ) : (
+            <Stack gap={2}>
+              {lessons.map((lesson) => {
+                const done = Boolean(mineFor(lesson));
+                return (
+                  <RowCard key={lesson._id} onClick={() => setOpenId(lesson._id)}>
+                    <Row gap={3} wrap={false}>
+                      <Blob icon={done ? "ok" : lesson.kind === "Quiz" ? "wand" : "play"} tone={done ? "up" : "idle"} size="sm" />
+                      <Stack gap={1}>
+                        <Text size="sm" muted>
+                          {lesson.kind} · {MINUTES.format(lesson.minutes)}
+                        </Text>
+                        <Text truncate>{lesson.title}</Text>
+                      </Stack>
+                      <Spacer />
+                      <Badge tone={done ? "up" : "idle"}>{done ? "Done" : "To do"}</Badge>
+                    </Row>
+                  </RowCard>
+                );
+              })}
+            </Stack>
+          )}
+        </Stack>
+      )}
+      <div className="pouf-toasts">
+        <Toaster />
+      </div>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Rename lessons to the app's own noun (`module`, `step`, `drill`) in the `type` key, the headings and the copy; keep one document per lesson and one per completion, keyed `done:<lesson>:<person>`.
+- A lesson's content is one more `Field` (a `Textarea`) on the lesson form and a `Text` on the lesson view; a video or picture is a `Figure`.
+- Several courses become a `Segmented` over a `course` property on each lesson, not a second database; the bar then counts only that course's lessons.
+- Keep the bar per person: count only completions whose `authorHandle` is `me.userHandle`, and tone it `up`, which says progress is good news.
+- 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/course.json

package/llms/pouf-crm.d.ts

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

package/llms/pouf-crm.js

@@ -0,0 +1,6 @@
+export const poufCrmConfig = {
+    name: "pouf-crm",
+    label: "Pouf crm block",
+    description: "Customer list with stages, account details and notes per contact",
+};
+//# sourceMappingURL=pouf-crm.js.map

package/llms/pouf-crm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pouf-crm.js","sourceRoot":"","sources":["../../jsr/llms/pouf-crm.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,gBAAgB;IACvB,WAAW,EAAE,kEAAkE;CAChF,CAAC"}