@vibes.diy/prompts 14.3.64 → 14.3.66

package/llms/pouf-support.md

@@ -0,0 +1,322 @@
+# Pouf Support
+
+A help desk where questions come in as tickets and get answered, chased and closed: a small shop's customer questions, an IT volunteer queue, a landlord's repair requests, a club's member help. Reach for it whenever the app's core is requests that each carry a status (open, waiting on the asker, solved) and get worked through by replying. Tickets, their status and every reply persist, so the queue is where it was left on the next visit and for everyone working it.
+
+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 queue opens with the `Heading` and a muted count of open tickets, a `Log a ticket` button (the queue's one lead) that opens a `Dialog` with the intake form, and a search `Input` and status `Select`, each in a `Field`. Each ticket is a clickable `RowCard` with its subject, a muted time and its status as a `Badge` toned by meaning (`info` open, `idle` waiting on the asker, `up` solved), plus a `warn` badge when urgent; an `Empty` stands in when nothing matches. Opening a ticket swaps in the ticket view: a quiet `IconButton` to go back, the subject as the `Heading`, the asker as a `ViewerTag`, the request and each reply on a `Card`, and a reply form validated in plain state (`Field error`, at least four characters) whose `Send reply` is that view's lead: a reply from the desk moves the ticket to waiting on the asker, and a reply from the asker (`me.userHandle` matching the ticket's `authorHandle`) moves it back to open. A quiet `Set waiting` and an `up`-toned `Mark solved` change the status directly, each confirmed with a `toast`. Every write waits on its `can` verdict from `useVibe("support")`: the intake and reply forms 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, and the status buttons render only where `can.edit(ticket).ok`.
+
+### `App.jsx`
+```jsx
+import React, { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import { Badge, Button, Card, Empty, Field, Heading, Icon, IconButton, Input, Row, RowCard, Skeleton, Spacer, Stack, Text, Textarea } from "@vibes.diy/pouf";
+import { Checkbox, Dialog, Select, Toaster, toast } from "@vibes.diy/pouf/interactive";
+
+const STATUS = {
+  open: { label: "Open", tone: "info" },
+  waiting: { label: "Waiting on them", tone: "idle" },
+  solved: { label: "Solved", tone: "up" },
+};
+
+const FILTERS = [
+  { value: "all", label: "All tickets" },
+  { value: "open", label: "Open" },
+  { value: "waiting", label: "Waiting on them" },
+  { value: "solved", label: "Solved" },
+];
+
+const when = (ms) => new Date(ms).toLocaleString([], { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
+
+function Author({ handle }) {
+  const { ViewerTag } = useViewer();
+  return handle ? <ViewerTag userHandle={handle} /> : <Text>A guest</Text>;
+}
+
+/** Three states for any create form: resolving, closed to this visitor, open. */
+function Gate({ verdict, closed, children }) {
+  if (verdict.pending)
+    return (
+      <div aria-busy="true">
+        <Skeleton variant="card" />
+      </div>
+    );
+  if (!verdict.ok) return <Text muted>{closed}</Text>;
+  return children;
+}
+
+function Badges({ ticket }) {
+  return (
+    <Row gap={2}>
+      <Badge tone={STATUS[ticket.status].tone}>{STATUS[ticket.status].label}</Badge>
+      {ticket.urgent && <Badge tone="warn">Urgent</Badge>}
+    </Row>
+  );
+}
+
+function TicketView({ ticket, replies, database, can, me, onBack }) {
+  const [draft, setDraft] = useState("");
+  const [error, setError] = useState(undefined);
+  const canReply = can.create({ type: "reply", ticketId: ticket._id, authorHandle: me?.userHandle });
+  const canSetStatus = can.edit(ticket).ok;
+
+  async function changeStatus(status) {
+    await database.put({ ...ticket, status });
+    toast.success(status === "solved" ? "Marked solved" : "Waiting on them");
+  }
+
+  async function sendReply(e) {
+    e.preventDefault();
+    const text = draft.trim();
+    if (text.length < 4) {
+      setError("Write at least four characters.");
+      return;
+    }
+    setError(undefined);
+    await database.put({ type: "reply", ticketId: ticket._id, text, authorHandle: me?.userHandle, createdAt: Date.now() });
+    // The asker replying puts the ball back with the desk; anyone else replying waits on the asker.
+    const next = me?.userHandle && me.userHandle === ticket.authorHandle ? "open" : "waiting";
+    if (canSetStatus && ticket.status !== next) await database.put({ ...ticket, status: next });
+    // Cleared only once the write lands, so a local failure keeps the typed words.
+    setDraft("");
+    toast.success("Reply sent");
+  }
+
+  return (
+    <Stack gap={5}>
+      <Stack gap={2}>
+        <Row gap={2} wrap={false}>
+          <IconButton size="sm" onClick={onBack} label="Back to the queue" icon={<Icon name="prev" size="sm" />} />
+          <Heading level={1}>{ticket.subject}</Heading>
+        </Row>
+        <Badges ticket={ticket} />
+      </Stack>
+
+      <Card variant="tight">
+        <Stack gap={3}>
+          <Row gap={2} wrap={false}>
+            <Author handle={ticket.authorHandle} />
+            <Spacer />
+            <Text size="sm" muted>
+              {when(ticket.createdAt)}
+            </Text>
+          </Row>
+          <Text>{ticket.body}</Text>
+        </Stack>
+      </Card>
+
+      {replies.map((r) => (
+        <Card key={r._id} variant="tight">
+          <Stack gap={2}>
+            <Row gap={2} wrap={false}>
+              <Author handle={r.authorHandle} />
+              <Spacer />
+              <Text size="sm" muted>
+                {when(r.createdAt)}
+              </Text>
+            </Row>
+            <Text>{r.text}</Text>
+          </Stack>
+        </Card>
+      ))}
+
+      <Gate verdict={canReply} closed="Replies open up once you're on the help desk team.">
+        <form onSubmit={sendReply} noValidate>
+          <Stack gap={3}>
+            <Field label="Reply" hint="They see this on their ticket." error={error}>
+              {(id, describedBy) => (
+                <Textarea
+                  id={id}
+                  describedBy={describedBy}
+                  value={draft}
+                  onChange={(value) => {
+                    setDraft(value);
+                    if (error) setError(undefined);
+                  }}
+                  rows={4}
+                  invalid={error !== undefined}
+                />
+              )}
+            </Field>
+            <Row gap={2} justify="end">
+              <Button type="button" variant="quiet" disabled={draft === ""} onClick={() => setDraft("")}>
+                Clear draft
+              </Button>
+              <Button type="submit">Send reply</Button>
+            </Row>
+          </Stack>
+        </form>
+      </Gate>
+
+      {canSetStatus && (
+        <Card variant="tight">
+          <Row justify="between">
+            <Text muted>{ticket.status === "solved" ? "This one is closed." : "Still needs attention."}</Text>
+            <Row gap={2}>
+              <Button size="sm" variant="quiet" disabled={ticket.status === "waiting"} onClick={() => changeStatus("waiting")}>
+                Set waiting
+              </Button>
+              <Button size="sm" tone="up" disabled={ticket.status === "solved"} onClick={() => changeStatus("solved")}>
+                <Icon name="ok" size="sm" /> Mark solved
+              </Button>
+            </Row>
+          </Row>
+        </Card>
+      )}
+    </Stack>
+  );
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("support");
+  const { can, me } = useVibe("support");
+  const { docs: ticketDocs } = useLiveQuery("type", { key: "ticket" });
+  const { docs: replies } = useLiveQuery("type", { key: "reply" });
+  const tickets = [...ticketDocs].sort((a, b) => b.createdAt - a.createdAt);
+
+  const [query, setQuery] = useState("");
+  const [status, setStatus] = useState("all");
+  const [openId, setOpenId] = useState(undefined);
+  const [logging, setLogging] = useState(false);
+  const [subject, setSubject] = useState("");
+  const [body, setBody] = useState("");
+  const [urgent, setUrgent] = useState(false);
+  const [errors, setErrors] = useState({});
+  // The verdict for the doc logTicket writes, carrying the same fields it stamps.
+  const canLog = can.create({ type: "ticket", status: "open", authorHandle: me?.userHandle });
+
+  const needle = query.trim().toLowerCase();
+  const shown = tickets.filter(
+    (t) => (status === "all" || t.status === status) && (needle === "" || `${t.subject} ${t.body}`.toLowerCase().includes(needle))
+  );
+  const openCount = tickets.filter((t) => t.status === "open").length;
+  const current = tickets.find((t) => t._id === openId);
+
+  async function logTicket(e) {
+    e.preventDefault();
+    const found = {
+      subject: subject.trim() === "" ? "Add a subject." : undefined,
+      body: body.trim() === "" ? "Say what's going on." : undefined,
+    };
+    setErrors(found);
+    if (found.subject || found.body) return;
+    await database.put({
+      type: "ticket",
+      subject: subject.trim(),
+      body: body.trim(),
+      urgent,
+      status: "open",
+      authorHandle: me?.userHandle,
+      createdAt: Date.now(),
+    });
+    setSubject("");
+    setBody("");
+    setUrgent(false);
+    setLogging(false);
+    toast.success("Ticket logged");
+  }
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-8">
+      {current ? (
+        <TicketView
+          ticket={current}
+          replies={replies.filter((r) => r.ticketId === current._id).sort((a, b) => a.createdAt - b.createdAt)}
+          database={database}
+          can={can}
+          me={me}
+          onBack={() => setOpenId(undefined)}
+        />
+      ) : (
+        <Stack gap={5}>
+          <Row justify="between" align="top">
+            <Stack gap={1}>
+              <Heading level={1}>Help desk</Heading>
+              <Text muted>{openCount === 1 ? "1 open ticket" : `${openCount} open tickets`}</Text>
+            </Stack>
+            <Dialog title="Log a ticket" open={logging} onOpenChange={setLogging} trigger={<Button>Log a ticket</Button>}>
+              <Gate verdict={canLog} closed="Logging a ticket opens up once you've signed in.">
+                <form onSubmit={logTicket} noValidate>
+                  <Stack gap={3}>
+                    <Field label="Subject" error={errors.subject}>
+                      {(id, describedBy) => (
+                        <Input
+                          id={id}
+                          describedBy={describedBy}
+                          value={subject}
+                          onChange={setSubject}
+                          placeholder="Order arrived damaged"
+                          invalid={errors.subject !== undefined}
+                        />
+                      )}
+                    </Field>
+                    <Field label="What's going on?" error={errors.body}>
+                      {(id, describedBy) => (
+                        <Textarea id={id} describedBy={describedBy} value={body} onChange={setBody} rows={4} invalid={errors.body !== undefined} />
+                      )}
+                    </Field>
+                    <Checkbox checked={urgent} onChange={(checked) => setUrgent(checked === true)} label="This is urgent" />
+                    <Row justify="end">
+                      <Button type="submit">Log ticket</Button>
+                    </Row>
+                  </Stack>
+                </form>
+              </Gate>
+            </Dialog>
+          </Row>
+
+          <Stack gap={3}>
+            <Field label="Search tickets">
+              {(id, describedBy) => (
+                <Input id={id} describedBy={describedBy} value={query} onChange={setQuery} placeholder="Subject or words" inputMode="search" />
+              )}
+            </Field>
+            <Field label="Status">
+              {(id, describedBy) => <Select id={id} describedBy={describedBy} value={status} onChange={setStatus} options={FILTERS} />}
+            </Field>
+          </Stack>
+
+          {shown.length === 0 ? (
+            <Empty icon="search" title={tickets.length === 0 ? "No tickets yet" : "No tickets found"}>
+              {tickets.length === 0 ? "New questions land here as they come in." : "Clear a filter or try a broader search."}
+            </Empty>
+          ) : (
+            <Stack gap={2}>
+              {shown.map((t) => (
+                <RowCard key={t._id} onClick={() => setOpenId(t._id)}>
+                  <Stack gap={2}>
+                    <Row gap={2} wrap={false}>
+                      <Text truncate>{t.subject}</Text>
+                      <Spacer />
+                      <Text size="sm" muted>
+                        {when(t.createdAt)}
+                      </Text>
+                    </Row>
+                    <Badges ticket={t} />
+                  </Stack>
+                </RowCard>
+              ))}
+            </Stack>
+          )}
+        </Stack>
+      )}
+      <div className="pouf-toasts">
+        <Toaster />
+      </div>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Rename tickets to the app's own noun (`request`, `repair`, `question`) in the `type` key, the headings and the copy; keep one document per ticket and one per reply, linked by `ticketId`.
+- Keep status on the ticket document and tone its `Badge` by meaning: `info` for open, `idle` for waiting, `up` for solved, `warn` for urgent; a new status is one more entry in `STATUS` and `FILTERS`.
+- Validate in plain state: check the trimmed value on submit, set the `Field`'s `error`, and clear it as the person types.
+- Assigning a ticket is a `HandleInput` from `useViewer()` writing an `assigneeHandle`, shown as 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/support.json

package/llms/pouf-testimonials.d.ts

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

package/llms/pouf-testimonials.js

@@ -0,0 +1,6 @@
+export const poufTestimonialsConfig = {
+    name: "pouf-testimonials",
+    label: "Pouf testimonials block",
+    description: "Testimonials section with category filter, story carousel and reported outcomes",
+};
+//# sourceMappingURL=pouf-testimonials.js.map

package/llms/pouf-testimonials.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pouf-testimonials.js","sourceRoot":"","sources":["../../jsr/llms/pouf-testimonials.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,sBAAsB,GAAc;IAC/C,IAAI,EAAE,mBAAmB;IACzB,KAAK,EAAE,yBAAyB;IAChC,WAAW,EAAE,iFAAiF;CAC/F,CAAC"}

package/llms/pouf-testimonials.md

@@ -0,0 +1,156 @@
+# Pouf Testimonials
+
+A section of client stories: the reviews on a cleaning business's site, quotes from a design studio's clients, what students said about a course, thank-you notes for a wedding band. Reach for it when the app shows a handful of quotes the owner has gathered, one at a time with the outcome each person reported, and lets the reader filter them by kind of work and step through them. The stories are written into the page by the owner, so the block keeps nothing; `## Adapting` covers collecting new ones from visitors.
+
+Built from @vibes.diy/pouf components; persisted state lives in Fireproof.
+
+## The block
+
+One view with one job: read what clients say. An `Eyebrow`, the `Heading` and a muted story count open it, then a `Segmented` filter (`tone="info"`) narrows the stories by service and returns to the first. `Grid cols="sidebar"` sets the quote beside its outcome. The story sits on a tilted `Card`, its quote and attribution inside a polite live region so a screen reader hears each new story (the step buttons stay outside it): a decorative `orange` `Blob` and an `info` `Badge` for the service, the quote as a `Heading level={2}`, the client as an `Avatar` (decorative `orange`, initials) with their name and role in `Text`, and two `IconButton`s to step back and forward. `Next story` is the view's one lead (`variant="solid"`); `Previous story` stays quiet. Beside it, the reported outcome is a `Stat` toned `up`, and a row of `Dot`s marks the reader's place (`info` for the current story, `idle` for the rest) above a muted "2 of 4". Nothing is written: the filter and position are page state.
+
+### `App.jsx`
+```jsx
+import React, { useState } from "react";
+import { Badge, Blob, Card, Dot, Eyebrow, Grid, Heading, Icon, IconButton, Row, Segmented, Stack, Stat, Text } from "@vibes.diy/pouf";
+import { Avatar } from "@vibes.diy/pouf/interactive";
+
+// The owner's own collection of quotes, written into the page.
+const STORIES = [
+  {
+    id: "harlow",
+    service: "planting",
+    quote: "They turned a bare clay slope into a bed that flowers from March to October, and told us exactly what to cut back when.",
+    name: "Harlow Reyes",
+    role: "Homeowner, Riverside",
+    result: "Flowering 8 months a year",
+  },
+  {
+    id: "ines",
+    service: "patios",
+    quote: "The new terrace drains properly for the first time in twenty years. We eat outside most evenings now.",
+    name: "Inès Moreau",
+    role: "Café owner, Old Town",
+    result: "12 extra outdoor tables",
+  },
+  {
+    id: "tomasz",
+    service: "upkeep",
+    quote: "One visit a month and the garden looks like we spend every weekend in it. We don't.",
+    name: "Tomasz Wilk",
+    role: "Two-garden household",
+    result: "Weekends back",
+  },
+  {
+    id: "amara",
+    service: "planting",
+    quote: "They planted for the shade we actually have instead of the sun we wished for. Nothing has died since.",
+    name: "Amara Osei",
+    role: "Allotment group lead",
+    result: "Zero losses in two winters",
+  },
+];
+const SERVICES = [
+  { value: "all", label: "All" },
+  { value: "planting", label: "Planting" },
+  { value: "patios", label: "Patios" },
+  { value: "upkeep", label: "Upkeep" },
+];
+const serviceLabel = (value) => SERVICES.find((s) => s.value === value)?.label ?? value;
+const initials = (name) =>
+  name
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2);
+
+export default function App() {
+  const [service, setService] = useState("all");
+  const [index, setIndex] = useState(0);
+
+  const shown = service === "all" ? STORIES : STORIES.filter((s) => s.service === service);
+  const pos = index % shown.length;
+  const story = shown[pos];
+
+  function pick(next) {
+    setService(next);
+    // A new filter starts on its first story, not on a position the old list had.
+    setIndex(0);
+  }
+
+  function move(by) {
+    setIndex((i) => (i + by + shown.length) % shown.length);
+  }
+
+  return (
+    <main className="mx-auto max-w-5xl px-4 py-8">
+      <Stack gap={6}>
+        <Stack gap={2}>
+          <Eyebrow>Client stories</Eyebrow>
+          <Heading level={1}>Gardens people actually use</Heading>
+          <Text muted>{STORIES.length} stories from the last two seasons.</Text>
+        </Stack>
+
+        <Segmented label="Filter stories by service" tone="info" value={service} onChange={pick} options={SERVICES} />
+
+        <Grid cols="sidebar" gap={5}>
+          <Card motion="tilt-left">
+            <Stack gap={5}>
+              {/* Only the story is announced; the step buttons stay outside the live region. */}
+              <div aria-live="polite" aria-atomic="true">
+                <Stack gap={5}>
+                  <Row justify="between" wrap={false}>
+                    <Blob icon="comment" tone="orange" />
+                    <Badge tone="info">{serviceLabel(story.service)}</Badge>
+                  </Row>
+                  <blockquote className="m-0">
+                    <Heading level={2}>“{story.quote}”</Heading>
+                  </blockquote>
+                  <Row gap={3} wrap={false}>
+                    <Avatar fallback={initials(story.name)} tone="orange" />
+                    <Stack gap={1}>
+                      <Text>{story.name}</Text>
+                      <Text size="sm" muted>
+                        {story.role}
+                      </Text>
+                    </Stack>
+                  </Row>
+                </Stack>
+              </div>
+              <Row gap={2} justify="end" wrap={false}>
+                <IconButton label="Previous story" icon={<Icon name="prev" size="sm" />} disabled={shown.length < 2} onClick={() => move(-1)} />
+                <IconButton label="Next story" variant="solid" icon={<Icon name="next" size="sm" />} disabled={shown.length < 2} onClick={() => move(1)} />
+              </Row>
+            </Stack>
+          </Card>
+
+          <Stack gap={3}>
+            <Stat label="Reported outcome" value={story.result} icon="up" tone="up" />
+            <Card variant="tight">
+              <Stack gap={2}>
+                <Row gap={2} wrap={false}>
+                  {shown.map((s, i) => (
+                    <Dot key={s.id} tone={i === pos ? "info" : "idle"} />
+                  ))}
+                </Row>
+                <Text size="sm" muted>
+                  {pos + 1} of {shown.length}
+                </Text>
+              </Stack>
+            </Card>
+          </Stack>
+        </Grid>
+      </Stack>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Change the stories, not the shape: each is `{ id, service, quote, name, role, result }`, the filter options come from the services you name, and a filter change always returns to the first story.
+- Keep exactly one lead: `Next story` is solid, everything else is quiet or a meaning tone. A page that also asks the reader to act (book a call, get a quote) moves the lead to that button and makes `Next story` quiet again.
+- Quote people with their permission and only what they agreed to share; a role and a neighbourhood are enough, never a street address or a phone number.
+- To collect stories from visitors, save one `story` document per submission in Fireproof with the author's `authorHandle`, show the author with `useViewer()`'s `ViewerTag` rather than a typed name, keep new submissions out of the carousel until the owner approves them (a `status` field), and gate the form on `useVibe(dbName).can.create(draft)` with a `requestLogin()` ask for visitors who have not signed in.
+- Each story's photo, when there is one, goes in `Avatar`'s `src` with the initials as its fallback.
+
+Adapted from 1st-Pouf (MIT) https://1st-pouf.worksonmy.dev/r/testimonials.json

package/llms/pouf-todo.d.ts

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

package/llms/pouf-todo.js

@@ -0,0 +1,6 @@
+export const poufTodoConfig = {
+    name: "pouf-todo",
+    label: "Pouf todo block",
+    description: "Checklist UI to add, filter, tick off and clear tasks",
+};
+//# sourceMappingURL=pouf-todo.js.map

package/llms/pouf-todo.js.map

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