@vibes.diy/prompts 14.3.64 → 14.3.65

package/llms/pouf-editorial.md

@@ -0,0 +1,247 @@
+# Pouf Editorial
+
+A story pipeline that walks each piece from idea to launch: a school newspaper's desk, a newsletter's post queue, a team blog's calendar, a zine's issue plan. Reach for it whenever the app's core is pieces of writing that each sit in one stage (draft, scheduled, published) and move forward one step at a time. Stories and their stage persist, so the desk is where the team left it 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 desk opens with the `Heading` and a muted count of stories, a `Pitch a story` button (the desk's one lead) that opens a `Dialog` with the pitch form, and a `Segmented` stage filter (`tone="info"`) beside a `Dot` and a muted count for that stage. Each story is a clickable `RowCard` with its section in muted `Text`, its title, the due date and its stage as a `Badge` toned by meaning (`idle` draft, `info` scheduled, `up` published); an `Empty` stands in for a stage with nothing in it. Opening a story swaps in the story view: a quiet `IconButton` to go back, the title as the `Heading`, a `Card` with the writer as a `ViewerTag` and `Metric`s, and the one step forward as that view's lead (`Schedule story` from draft, `Publish story` from scheduled), with a quiet `Back to drafts` beside it. Every write waits on its `can` verdict from `useVibe("editorial")`: the pitch form shows a `Skeleton` inside an `aria-busy` wrapper while the verdict resolves and a sentence in the app's own words when pitching is closed to this visitor, and the stage buttons follow the same three states on `can.edit(story)`.
+
+### `App.jsx`
+```jsx
+import React, { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import {
+  Badge,
+  Button,
+  Card,
+  Dot,
+  Empty,
+  Field,
+  Heading,
+  Icon,
+  IconButton,
+  Input,
+  Metric,
+  Row,
+  RowCard,
+  Segmented,
+  Skeleton,
+  Spacer,
+  Stack,
+  Text,
+} from "@vibes.diy/pouf";
+import { Dialog, Toaster, toast } from "@vibes.diy/pouf/interactive";
+
+const STAGES = {
+  draft: { label: "Draft", plural: "Drafts", empty: "No drafts", tone: "idle" },
+  scheduled: { label: "Scheduled", plural: "Scheduled", empty: "Nothing scheduled", tone: "info" },
+  published: { label: "Published", plural: "Published", empty: "Nothing published yet", tone: "up" },
+};
+const FILTERS = Object.entries(STAGES).map(([value, s]) => ({ value, label: s.plural }));
+const NEXT = { draft: { to: "scheduled", label: "Schedule story" }, scheduled: { to: "published", label: "Publish story" } };
+
+// A due date is stored as the "YYYY-MM-DD" string a date input gives; read it at local midnight.
+const due = (date) => (date ? new Date(`${date}T00:00`).toLocaleDateString([], { month: "short", day: "numeric" }) : "No date");
+
+function Writer({ handle }) {
+  const { ViewerTag } = useViewer();
+  return handle ? <ViewerTag userHandle={handle} /> : <Text>A guest</Text>;
+}
+
+/** 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="card" />
+      </div>
+    );
+  if (!verdict.ok) return <Text muted>{closed}</Text>;
+  return children;
+}
+
+function StageBadge({ stage }) {
+  return <Badge tone={STAGES[stage].tone}>{STAGES[stage].label}</Badge>;
+}
+
+function StoryView({ story, database, can, onBack, onMoved }) {
+  const next = NEXT[story.status];
+
+  async function moveTo(status) {
+    await database.put({ ...story, status });
+    onMoved(status);
+    toast.success(status === "draft" ? "Back in drafts" : `${STAGES[status].label}: ${story.title}`);
+  }
+
+  return (
+    <Stack gap={5}>
+      <Stack gap={2}>
+        <Row gap={2} wrap={false}>
+          <IconButton size="sm" onClick={onBack} label="Back to the desk" icon={<Icon name="prev" size="sm" />} />
+          <Heading level={1}>{story.title}</Heading>
+        </Row>
+        <Row gap={2}>
+          <Text muted>{story.section || "No section"}</Text>
+          <StageBadge stage={story.status} />
+        </Row>
+      </Stack>
+
+      <Card variant="tight">
+        <Stack gap={3}>
+          <Row gap={2} wrap={false}>
+            <Text size="sm" muted>
+              Written by
+            </Text>
+            <Writer handle={story.authorHandle} />
+          </Row>
+          <Row gap={4}>
+            <Metric label="Due" value={due(story.due)} num={false} />
+            <Metric label="Pitched" value={new Date(story.createdAt).toLocaleDateString([], { month: "short", day: "numeric" })} num={false} />
+          </Row>
+        </Stack>
+      </Card>
+
+      <Gate verdict={can.edit(story)} closed="Only the desk's editors move a story along.">
+        <Row gap={2} justify="end">
+          {story.status !== "draft" && (
+            <Button variant="quiet" onClick={() => moveTo("draft")}>
+              Back to drafts
+            </Button>
+          )}
+          {next && <Button onClick={() => moveTo(next.to)}>{next.label}</Button>}
+        </Row>
+      </Gate>
+    </Stack>
+  );
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("editorial");
+  const { can, me } = useVibe("editorial");
+  const { docs } = useLiveQuery("type", { key: "story" });
+  const stories = [...docs].sort((a, b) => (a.due || "9999").localeCompare(b.due || "9999"));
+
+  const [stage, setStage] = useState("draft");
+  const [openId, setOpenId] = useState(undefined);
+  const [pitching, setPitching] = useState(false);
+  const [form, setForm] = useState({ title: "", section: "", due: "" });
+  const [errors, setErrors] = useState({});
+  // The verdict for the doc pitch writes, carrying the same fields it stamps.
+  const canPitch = can.create({ type: "story", status: "draft", authorHandle: me?.userHandle });
+
+  const set = (key) => (value) => setForm((f) => ({ ...f, [key]: value }));
+  const visible = stories.filter((s) => s.status === stage);
+  const current = stories.find((s) => s._id === openId);
+
+  async function pitch(e) {
+    e.preventDefault();
+    const found = { title: form.title.trim() === "" ? "Give the story a working title." : undefined };
+    setErrors(found);
+    if (found.title) return;
+    await database.put({
+      type: "story",
+      title: form.title.trim(),
+      section: form.section.trim(),
+      due: form.due,
+      status: "draft",
+      authorHandle: me?.userHandle,
+      createdAt: Date.now(),
+    });
+    setForm({ title: "", section: "", due: "" });
+    setPitching(false);
+    setStage("draft");
+    toast.success("Story pitched");
+  }
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-8">
+      {current ? (
+        <StoryView story={current} database={database} can={can} onBack={() => setOpenId(undefined)} onMoved={setStage} />
+      ) : (
+        <Stack gap={5}>
+          <Row justify="between" align="top">
+            <Stack gap={1}>
+              <Heading level={1}>Editorial desk</Heading>
+              <Text muted>{stories.length === 1 ? "1 story" : `${stories.length} stories`}</Text>
+            </Stack>
+            <Dialog title="Pitch a story" open={pitching} onOpenChange={setPitching} trigger={<Button>Pitch a story</Button>}>
+              <Gate verdict={canPitch} closed="Pitching opens up once you're on the writing team.">
+                <form onSubmit={pitch} noValidate>
+                  <Stack gap={3}>
+                    <Field label="Working title" error={errors.title}>
+                      {(id, describedBy) => (
+                        <Input id={id} describedBy={describedBy} value={form.title} onChange={set("title")} invalid={errors.title !== undefined} />
+                      )}
+                    </Field>
+                    <Field label="Section" hint="Where it runs, like News or Sport.">
+                      {(id, describedBy) => <Input id={id} describedBy={describedBy} value={form.section} onChange={set("section")} />}
+                    </Field>
+                    <Field label="Due">
+                      {(id, describedBy) => <Input id={id} describedBy={describedBy} value={form.due} onChange={set("due")} type="date" />}
+                    </Field>
+                    <Row justify="end">
+                      <Button type="submit">Add to drafts</Button>
+                    </Row>
+                  </Stack>
+                </form>
+              </Gate>
+            </Dialog>
+          </Row>
+
+          <Row justify="between">
+            <Segmented label="Stage" tone="info" value={stage} onChange={setStage} options={FILTERS} />
+            <Row gap={2} wrap={false}>
+              <Dot tone={STAGES[stage].tone} />
+              <Text size="sm" muted>
+                {visible.length === 1 ? "1 story here" : `${visible.length} stories here`}
+              </Text>
+            </Row>
+          </Row>
+
+          {visible.length === 0 ? (
+            <Empty icon="draft" title={STAGES[stage].empty}>
+              {stage === "draft" ? "Pitch one to get the desk moving." : "Stories land here as they move along."}
+            </Empty>
+          ) : (
+            <Stack gap={2}>
+              {visible.map((s) => (
+                <RowCard key={s._id} onClick={() => setOpenId(s._id)}>
+                  <Stack gap={2}>
+                    <Text size="sm" muted>
+                      {s.section || "No section"}
+                    </Text>
+                    <Text>{s.title}</Text>
+                    <Row gap={2} wrap={false}>
+                      <Text size="sm" muted>
+                        Due {due(s.due)}
+                      </Text>
+                      <Spacer />
+                      <StageBadge stage={s.status} />
+                    </Row>
+                  </Stack>
+                </RowCard>
+              ))}
+            </Stack>
+          )}
+        </Stack>
+      )}
+      <div className="pouf-toasts">
+        <Toaster />
+      </div>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Rename stories to the app's own noun (`post`, `article`, `episode`) in the `type` key, the headings and the copy; keep one document per story with its stage on it.
+- A new stage (`in review`, `edited`) is one more entry in `STAGES` and `NEXT`; tone it by meaning, `warn` for one that needs an editor's attention soon.
+- Assigning an editor is a `HandleInput` from `useViewer()` writing an `editorHandle`, shown on the story view as a `ViewerTag`.
+- The draft itself can live on the story: a `Textarea` in a `Field` on the story view, saved with `can.edit(story)` and counted as words in a `Metric`.
+- 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/editorial.json

package/llms/pouf-event.d.ts

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

package/llms/pouf-event.js

@@ -0,0 +1,6 @@
+export const poufEventConfig = {
+    name: "pouf-event",
+    label: "Pouf event block",
+    description: "Guest check-in desk with arrivals count, search and attendance filter",
+};
+//# sourceMappingURL=pouf-event.js.map

package/llms/pouf-event.js.map

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

package/llms/pouf-event.md

@@ -0,0 +1,237 @@
+# Pouf Event
+
+A check-in desk for the door of an event: a fundraiser's guest list, a wedding reception, a meetup's RSVPs, a workshop's sign-in sheet. Reach for it whenever the app's core is a list of people expected somewhere who get marked as arrived, with a running count of who is in and who is still on the way. Guests and their check-ins persist, so every volunteer at the door sees the same list on their own phone and it survives a reload.
+
+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 people through the door. The `Heading` and a muted line open the page beside an `Add guest` button (the view's one lead) that opens a `Dialog` with the guest form. Three `Stat`s count the room, each toned by meaning (`info` expected, `up` checked in, `idle` still to come). A search `Input` in a `Field` and a `Segmented` attendance filter (`tone="info"`) sit above the list, and each guest is a `RowCard` with their name, a muted line for their group and ticket, an arrival `Badge` (`up` checked in, `idle` not yet) and the row's action: an `up`-toned `Check in`, or a quiet `IconButton` to undo a check-in made by mistake. The check-in buttons wear the meaning tone `up`, not the lead; an `Empty` stands in when nothing matches. Every write waits on its `can` verdict from `useVibe("event")`: the guest form shows a `Skeleton` inside an `aria-busy` wrapper while the verdict resolves and a sentence in the app's own words when adding is closed to this visitor, and each row's check-in button is disabled unless `can.edit(guest).ok`, with one muted line above the list saying so in the app's words once that verdict resolves to a denial.
+
+### `App.jsx`
+```jsx
+import React, { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useVibe } from "use-vibes";
+import {
+  Badge,
+  Button,
+  Empty,
+  Field,
+  Grid,
+  Heading,
+  Icon,
+  IconButton,
+  Input,
+  Row,
+  RowCard,
+  Segmented,
+  Skeleton,
+  Spacer,
+  Stack,
+  Stat,
+  Text,
+} from "@vibes.diy/pouf";
+import { Dialog, Select, Toaster, toast } from "@vibes.diy/pouf/interactive";
+
+const NUMBER = new Intl.NumberFormat();
+
+const FILTERS = [
+  { value: "all", label: "Everyone" },
+  { value: "waiting", label: "Not here yet" },
+  { value: "in", label: "Checked in" },
+];
+
+const TICKETS = [
+  { value: "General", label: "General" },
+  { value: "Speaker", label: "Speaker" },
+  { value: "VIP", label: "VIP" },
+];
+
+const time = (ms) => new Date(ms).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+
+/** 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;
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("event");
+  const { can, me } = useVibe("event");
+  const { docs } = useLiveQuery("type", { key: "guest" });
+  const guests = [...docs].sort((a, b) => a.name.localeCompare(b.name));
+
+  const [query, setQuery] = useState("");
+  const [filter, setFilter] = useState("all");
+  const [adding, setAdding] = useState(false);
+  const [form, setForm] = useState({ name: "", group: "", ticket: "General" });
+  const [nameError, setNameError] = useState(undefined);
+  // The verdict for the doc addGuest writes, carrying the same fields it stamps.
+  const canAdd = can.create({ type: "guest", checkedIn: false, authorHandle: me?.userHandle });
+
+  const set = (key) => (value) => setForm((f) => ({ ...f, [key]: value }));
+  const needle = query.trim().toLowerCase();
+  const visible = guests.filter(
+    (g) =>
+      (filter === "all" || (filter === "in" ? g.checkedIn : !g.checkedIn)) &&
+      (needle === "" || `${g.name} ${g.group} ${g.ticket}`.toLowerCase().includes(needle))
+  );
+  const inCount = guests.filter((g) => g.checkedIn).length;
+  // A resolved denial on any guest: say so once, above the list, rather than leaving buttons silently dead.
+  const checkInClosed = guests.some((g) => {
+    const v = can.edit(g);
+    return !v.pending && !v.ok;
+  });
+
+  async function addGuest(e) {
+    e.preventDefault();
+    if (form.name.trim() === "") {
+      setNameError("Add the guest's name.");
+      return;
+    }
+    setNameError(undefined);
+    await database.put({
+      type: "guest",
+      name: form.name.trim(),
+      group: form.group.trim(),
+      ticket: form.ticket,
+      checkedIn: false,
+      authorHandle: me?.userHandle,
+      createdAt: Date.now(),
+    });
+    setForm({ name: "", group: "", ticket: "General" });
+    setAdding(false);
+    toast.success("Guest added");
+  }
+
+  async function setArrived(guest, arrived) {
+    await database.put({ ...guest, checkedIn: arrived, checkedInAt: arrived ? Date.now() : null, checkedInBy: arrived ? me?.userHandle : null });
+    toast.success(arrived ? `${guest.name} is in` : `${guest.name} is back on the list`);
+  }
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-8">
+      <Stack gap={5}>
+        <Row justify="between" align="top">
+          <Stack gap={1}>
+            <Heading level={1}>Guest check-in</Heading>
+            <Text muted>Find a name, tap check in, keep the line moving.</Text>
+          </Stack>
+          <Dialog
+            title="Add a guest"
+            open={adding}
+            onOpenChange={setAdding}
+            trigger={<Button size="sm">Add guest</Button>}
+          >
+            <Gate verdict={canAdd} closed="Adding guests opens up once you're helping run the door.">
+              <form onSubmit={addGuest} noValidate>
+                <Stack gap={3}>
+                  <Field label="Name" error={nameError}>
+                    {(id, describedBy) => (
+                      <Input
+                        id={id}
+                        describedBy={describedBy}
+                        value={form.name}
+                        onChange={(value) => {
+                          set("name")(value);
+                          if (nameError) setNameError(undefined);
+                        }}
+                        invalid={nameError !== undefined}
+                      />
+                    )}
+                  </Field>
+                  <Field label="Group" hint="A company, family or table, if any.">
+                    {(id, describedBy) => <Input id={id} describedBy={describedBy} value={form.group} onChange={set("group")} />}
+                  </Field>
+                  <Field label="Ticket">
+                    {(id, describedBy) => <Select id={id} describedBy={describedBy} value={form.ticket} onChange={set("ticket")} options={TICKETS} />}
+                  </Field>
+                  <Row justify="end">
+                    <Button type="submit">Add to the list</Button>
+                  </Row>
+                </Stack>
+              </form>
+            </Gate>
+          </Dialog>
+        </Row>
+
+        <Grid cols={3} gap={3}>
+          <Stat label="Expected" value={NUMBER.format(guests.length)} icon="users" tone="info" />
+          <Stat label="Checked in" value={NUMBER.format(inCount)} icon="ok" tone="up" />
+          <Stat label="Still to come" value={NUMBER.format(guests.length - inCount)} icon="clock" tone="idle" />
+        </Grid>
+
+        <Stack gap={3}>
+          <Field label="Find a guest">
+            {(id, describedBy) => (
+              <Input id={id} describedBy={describedBy} value={query} onChange={setQuery} placeholder="Name, group or ticket" inputMode="search" />
+            )}
+          </Field>
+          <Segmented label="Attendance" tone="info" value={filter} onChange={setFilter} options={FILTERS} />
+        </Stack>
+
+        {checkInClosed && <Text muted>Checking guests in is for the people running the door. You can still look anyone up.</Text>}
+
+        {visible.length === 0 ? (
+          <Empty icon="search" title={guests.length === 0 ? "No guests yet" : "No guests found"}>
+            {guests.length === 0 ? "Add the guest list to start checking people in." : "Check the spelling or show everyone."}
+          </Empty>
+        ) : (
+          <Stack gap={2}>
+            {visible.map((g) => {
+              const editable = can.edit(g).ok;
+              return (
+                <RowCard key={g._id}>
+                  <Row gap={3} wrap={false}>
+                    <Stack gap={1}>
+                      <Text truncate>{g.name}</Text>
+                      <Text size="sm" muted truncate>
+                        {[g.group, g.ticket].filter(Boolean).join(" · ")}
+                      </Text>
+                    </Stack>
+                    <Spacer />
+                    <Badge tone={g.checkedIn ? "up" : "idle"}>{g.checkedIn ? `In at ${time(g.checkedInAt)}` : "Not here yet"}</Badge>
+                    {g.checkedIn ? (
+                      <IconButton
+                        size="sm"
+                        label={`Undo check-in for ${g.name}`}
+                        icon={<Icon name="rewind" size="sm" />}
+                        disabled={!editable}
+                        onClick={() => setArrived(g, false)}
+                      />
+                    ) : (
+                      <Button size="sm" tone="up" disabled={!editable} onClick={() => setArrived(g, true)}>
+                        Check in
+                      </Button>
+                    )}
+                  </Row>
+                </RowCard>
+              );
+            })}
+          </Stack>
+        )}
+      </Stack>
+      <div className="pouf-toasts">
+        <Toaster />
+      </div>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Rename guests to the app's own noun (`attendee`, `member`, `student`) in the `type` key, the headings and the copy; keep one document per guest with the check-in on it.
+- Tone arrival by meaning: `up` for checked in, `idle` for not yet, `warn` for a guest flagged at the door (an unpaid ticket, a dietary note to pass on).
+- Who checked a guest in is already stored as `checkedInBy`; show it with `useViewer()`'s `ViewerTag` beside the arrival `Badge`.
+- Several sessions or days become a `Segmented` over a `session` property on each check-in, not a second database.
+- 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/event.json

package/llms/pouf-feed.d.ts

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

package/llms/pouf-feed.js

@@ -0,0 +1,6 @@
+export const poufFeedConfig = {
+    name: "pouf-feed",
+    label: "Pouf feed block",
+    description: "Social feed to post updates, like them and reply in comments",
+};
+//# sourceMappingURL=pouf-feed.js.map

package/llms/pouf-feed.js.map

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