@vibes.diy/prompts 14.3.59 → 14.3.65

package/llms/pouf-booking.md

@@ -0,0 +1,397 @@
+# Pouf Booking
+
+An appointment booker: pick a service, a day and a free time, add a name, review, confirm. It fits a massage practice's sessions, a tutor's lessons, a studio's portrait slots or a repair café's drop-in times. Reach for it whenever the app's core is people claiming time slots that only one person can hold. Every booking persists as its own document and availability is worked out from them, so a taken time disappears for everyone and the booker finds their sessions on every visit.
+
+Built from @vibes.diy/pouf components; persisted state lives in Fireproof. Every write surface is gated on `useVibe(dbName).can`.
+
+## The block
+
+Two cards beside each other in a `Grid cols="sidebar"`. The main side opens with an `Eyebrow`, the `Heading` and a muted promise, then the person's own bookings on a `Card`. Each booking shows a `Badge`: `up` when confirmed, `warn` when someone else got the time first. Each one has a quiet `Cancel` behind a `Confirm` wearing `tone="down"`, offered only where `can.delete(booking).ok`. The side holds the wizard, one step at a time under an `Eyebrow` and a `Progress` bar (`tone="info"`): each service is a clickable `RowCard` with a decorative `orange` `Blob`; the day is a `Segmented` (`tone="info"`) and the time a `RadioGroup` of only the free times, with a muted line when a day is full; the details are a name `Input` in a `Field` with its own error (nothing private, because every booking is readable so free times can be worked out); and the review ends in `Confirm booking`, that step's one lead, which shows `loading` while the write lands. Each booking is its own document, never a flag on a shared calendar document. Two people can confirm the same time at once, and sync keeps both documents, so availability is derived: a slot belongs to its earliest booking (by `createdAt`, then `_id`). A later one is shown to its booker as a clash, with a `Pick another time` button that removes it and keeps their details. Confirming waits on its `can` verdict from `useVibe("bookings")`: a `Skeleton` inside an `aria-busy` wrapper while it resolves, and a sentence in the app's own words when booking is closed. For a visitor who has not signed in, the lead is `Sign in to confirm`, wired to `useViewer().requestLogin()`, and their choices stay in place. Sign-in is required here, unlike a local-first note, because a signed-out write stays on the device until sign-in: a booking made that way would never reach the practice or hold the slot against anyone else. Between the write and the live query catching up, the wizard shows a confirming `Skeleton` rather than the review again, so the lead can't book twice; cancelling the booking just made resets the wizard.
+
+### `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,
+  Eyebrow,
+  Field,
+  Grid,
+  Heading,
+  Input,
+  Row,
+  RowCard,
+  Segmented,
+  Skeleton,
+  Spacer,
+  Stack,
+  Text,
+} from "@vibes.diy/pouf";
+import { Confirm, Progress, RadioGroup, Toaster, toast } from "@vibes.diy/pouf/interactive";
+
+const SERVICES = [
+  { id: "relax", name: "Relaxation massage", blurb: "A slow, full-body session to unwind.", minutes: 60, price: 80, icon: "sparkle" },
+  { id: "deep", name: "Deep tissue", blurb: "Focused work on tight shoulders and back.", minutes: 45, price: 70, icon: "target" },
+  { id: "short", name: "Neck and shoulders", blurb: "A quick reset between meetings.", minutes: 30, price: 45, icon: "smile" },
+];
+const TIMES = ["09:30", "11:00", "14:00", "16:30"];
+const STEPS = ["Service", "Time", "Your details", "Review"];
+const MONEY = new Intl.NumberFormat(undefined, { style: "currency", currency: "USD", maximumFractionDigits: 0 });
+const DAY_LABEL = new Intl.DateTimeFormat(undefined, { weekday: "short", month: "short", day: "numeric" });
+
+const isoDate = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+const dayLabel = (iso) => DAY_LABEL.format(new Date(`${iso}T12:00:00`));
+
+/** The next `n` weekdays, starting tomorrow, as local YYYY-MM-DD strings. */
+function upcomingDays(n) {
+  const out = [];
+  const d = new Date();
+  while (out.length < n) {
+    d.setDate(d.getDate() + 1);
+    if (d.getDay() !== 0 && d.getDay() !== 6) out.push(isoDate(d));
+  }
+  return out;
+}
+
+/** Who holds each slot: its earliest booking. A later booking of the same slot is a clash. */
+function holders(bookings) {
+  const first = {};
+  for (const b of bookings) {
+    const held = first[b.slot];
+    if (!held || b.createdAt < held.createdAt || (b.createdAt === held.createdAt && b._id < held._id)) first[b.slot] = b;
+  }
+  return first;
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("bookings");
+  const { docs: bookings } = useLiveQuery("type", { key: "booking" });
+  const { can, me } = useVibe("bookings");
+  const { requestLogin } = useViewer();
+  const days = upcomingDays(5);
+
+  const [step, setStep] = useState(0);
+  const [serviceId, setServiceId] = useState(SERVICES[0].id);
+  const [day, setDay] = useState(days[0]);
+  const [time, setTime] = useState("");
+  const [name, setName] = useState("");
+  const [nameError, setNameError] = useState(undefined);
+  const [saving, setSaving] = useState(false);
+  const [resultId, setResultId] = useState(undefined);
+
+  const held = holders(bookings);
+  const service = SERVICES.find((s) => s.id === serviceId);
+  const slot = `${day} ${time}`;
+  const freeTimes = TIMES.filter((t) => !held[`${day} ${t}`]);
+  const mine = me ? bookings.filter((b) => b.authorHandle === me.userHandle).sort((a, b) => a.slot.localeCompare(b.slot)) : [];
+  const result = resultId ? bookings.find((b) => b._id === resultId) : undefined;
+
+  // The verdict for the booking book() writes, carrying the same fields it stamps.
+  const draft = { type: "booking", authorHandle: me?.userHandle };
+  const canBook = can.create(draft);
+
+  function pickDay(value) {
+    setDay(value);
+    setTime("");
+  }
+
+  function saveDetails(e) {
+    e.preventDefault();
+    if (name.trim() === "") {
+      setNameError("Add the name we should call you.");
+      return;
+    }
+    setStep(3);
+  }
+
+  async function book() {
+    if (held[slot]) {
+      // Taken while they were reviewing: back to the times, details kept.
+      toast.error("That time was just booked. Pick another.");
+      setTime("");
+      setStep(1);
+      return;
+    }
+    setSaving(true);
+    try {
+      const { id } = await database.put({
+        ...draft,
+        serviceId,
+        serviceName: service.name,
+        day,
+        time,
+        slot,
+        name: name.trim(),
+        createdAt: Date.now(),
+      });
+      setResultId(id);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function pickAgain() {
+    if (result && can.delete(result).ok) await database.del(result._id);
+    setResultId(undefined);
+    setTime("");
+    setStep(1);
+  }
+
+  function bookAnother() {
+    setResultId(undefined);
+    setTime("");
+    setStep(0);
+  }
+
+  async function cancel(booking) {
+    await database.del(booking._id);
+    // Cancelling the booking the wizard just made starts the wizard over.
+    if (booking._id === resultId) bookAnother();
+    toast.success("Booking cancelled");
+  }
+
+  let confirmButton;
+  if (canBook.pending)
+    confirmButton = (
+      <div aria-busy="true">
+        <Skeleton variant="row" />
+      </div>
+    );
+  else if (!me)
+    // A booking is held for a person; their choices stay put while they sign in.
+    confirmButton = <Button onClick={requestLogin}>Sign in to confirm</Button>;
+  else if (!canBook.ok) confirmButton = <Text muted>Online booking is paused. Call us to book.</Text>;
+  else
+    confirmButton = (
+      <Button loading={saving} onClick={book}>
+        Confirm booking
+      </Button>
+    );
+
+  let wizard;
+  if (result && held[result.slot]?._id === result._id)
+    wizard = (
+      <Stack gap={4}>
+        <Empty icon="ok" title="You're booked">
+          {result.serviceName}, {dayLabel(result.day)} at {result.time}.
+        </Empty>
+        <Button block variant="quiet" onClick={bookAnother}>
+          Book another session
+        </Button>
+      </Stack>
+    );
+  else if (resultId && !result)
+    // Written, but the live query hasn't caught up: hold here so Confirm can't fire twice.
+    wizard = (
+      <div aria-busy="true">
+        <Stack gap={3}>
+          <Text muted>Confirming your booking…</Text>
+          <Skeleton variant="card" />
+        </Stack>
+      </div>
+    );
+  else if (result)
+    wizard = (
+      <Stack gap={4}>
+        <Badge tone="warn">Time taken</Badge>
+        <Text>Someone booked {result.time} a moment before you. Your details are kept; pick another time.</Text>
+        <Button block onClick={pickAgain}>
+          Pick another time
+        </Button>
+      </Stack>
+    );
+  else
+    wizard = (
+      <Stack gap={5}>
+        <Stack gap={2}>
+          <Eyebrow>
+            Step {step + 1} of {STEPS.length} · {STEPS[step]}
+          </Eyebrow>
+          <Progress value={step + 1} max={STEPS.length} tone="info" label="Booking progress" />
+        </Stack>
+
+        {step === 0 && (
+          <Stack gap={3}>
+            <Heading level={2}>Choose a service</Heading>
+            {SERVICES.map((s) => (
+              <RowCard
+                key={s.id}
+                onClick={() => {
+                  setServiceId(s.id);
+                  setStep(1);
+                }}
+              >
+                <Row gap={3} wrap={false} align="top">
+                  <Blob icon={s.icon} tone="orange" size="sm" />
+                  <Stack gap={1}>
+                    <Text>{s.name}</Text>
+                    <Text size="sm" muted>
+                      {s.blurb}
+                    </Text>
+                  </Stack>
+                  <Spacer />
+                  <Stack gap={1}>
+                    <Text num>{MONEY.format(s.price)}</Text>
+                    <Text size="sm" muted>
+                      {s.minutes} min
+                    </Text>
+                  </Stack>
+                </Row>
+              </RowCard>
+            ))}
+          </Stack>
+        )}
+
+        {step === 1 && (
+          <Stack gap={4}>
+            <Heading level={2}>Choose a time</Heading>
+            <Segmented label="Day" tone="info" value={day} onChange={pickDay} options={days.map((d) => ({ value: d, label: dayLabel(d) }))} />
+            {freeTimes.length === 0 ? (
+              <Text muted>{dayLabel(day)} is fully booked. Try another day.</Text>
+            ) : (
+              <RadioGroup label="Time" value={time} onChange={setTime} options={freeTimes.map((t) => ({ value: t, label: t }))} />
+            )}
+            <Row justify="between">
+              <Button variant="quiet" onClick={() => setStep(0)}>
+                Back
+              </Button>
+              <Button disabled={time === "" || !!held[slot]} onClick={() => setStep(2)}>
+                Add your details
+              </Button>
+            </Row>
+          </Stack>
+        )}
+
+        {step === 2 && (
+          <form onSubmit={saveDetails} noValidate>
+            <Stack gap={4}>
+              <Heading level={2}>Your details</Heading>
+              <Field label="Name" error={nameError}>
+                {(id, describedBy) => (
+                  <Input
+                    id={id}
+                    describedBy={describedBy}
+                    value={name}
+                    onChange={(value) => {
+                      setName(value);
+                      if (nameError) setNameError(undefined);
+                    }}
+                    autoComplete="name"
+                    invalid={nameError !== undefined}
+                  />
+                )}
+              </Field>
+              <Row justify="between">
+                <Button variant="quiet" onClick={() => setStep(1)}>
+                  Back
+                </Button>
+                <Button type="submit">Review booking</Button>
+              </Row>
+            </Stack>
+          </form>
+        )}
+
+        {step === 3 && (
+          <Stack gap={4}>
+            <Heading level={2}>Review your booking</Heading>
+            <Card variant="tight">
+              <Stack gap={2}>
+                <Row justify="between">
+                  <Text muted>Service</Text>
+                  <Text>{service.name}</Text>
+                </Row>
+                <Row justify="between">
+                  <Text muted>When</Text>
+                  <Text>
+                    {dayLabel(day)} at {time}
+                  </Text>
+                </Row>
+                <Row justify="between">
+                  <Text muted>Price</Text>
+                  <Text num>{MONEY.format(service.price)}</Text>
+                </Row>
+              </Stack>
+            </Card>
+            <Row justify="between">
+              <Button variant="quiet" onClick={() => setStep(2)}>
+                Edit details
+              </Button>
+              {confirmButton}
+            </Row>
+          </Stack>
+        )}
+      </Stack>
+    );
+
+  return (
+    <main className="mx-auto max-w-6xl px-4 py-8">
+      <Grid cols="sidebar" gap={6}>
+        <Stack gap={5}>
+          <Stack gap={2}>
+            <Eyebrow>Book a session</Eyebrow>
+            <Heading level={1}>Make time to feel better.</Heading>
+            <Text muted>Pick a service and a free time. Nothing is charged until you arrive.</Text>
+          </Stack>
+          <Card>
+            <Stack gap={3}>
+              <Heading level={2}>Your bookings</Heading>
+              {mine.length === 0 ? (
+                <Text muted>{me ? "Nothing booked yet." : "Sign in when you confirm and your bookings show here."}</Text>
+              ) : (
+                mine.map((b) => {
+                  const ok = held[b.slot]?._id === b._id;
+                  return (
+                    <Row key={b._id} gap={2} wrap={false}>
+                      <Stack gap={1}>
+                        <Text>{b.serviceName}</Text>
+                        <Text size="sm" muted>
+                          {dayLabel(b.day)} at {b.time}
+                        </Text>
+                      </Stack>
+                      <Spacer />
+                      <Badge tone={ok ? "up" : "warn"}>{ok ? "Confirmed" : "Time taken"}</Badge>
+                      {can.delete(b).ok && (
+                        <Confirm
+                          title="Cancel this booking?"
+                          body={`${b.serviceName} on ${dayLabel(b.day)} at ${b.time} is released for someone else.`}
+                          confirmLabel="Cancel booking"
+                          cancelLabel="Keep it"
+                          tone="down"
+                          onConfirm={() => cancel(b)}
+                        >
+                          <Button size="sm" variant="quiet">
+                            Cancel
+                          </Button>
+                        </Confirm>
+                      )}
+                    </Row>
+                  );
+                })
+              )}
+            </Stack>
+          </Card>
+        </Stack>
+        <Card>{wizard}</Card>
+      </Grid>
+      <div className="pouf-toasts">
+        <Toaster />
+      </div>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Swap `SERVICES` and `TIMES` for the practice's own; several practitioners make the slot `${person} ${day} ${time}`, so each one's calendar fills on its own.
+- Keep one document per booking and derive who holds a slot from them; a shared "calendar" document with a taken flag per slot loses one of two bookings made at the same moment. Moving a booking is cancelling and booking again; never edit the `slot` in place, or the clash rule loses track of who was first.
+- Bookings are readable so everyone can see which times are free, so keep private details (a phone number, health notes) out of the booking document, which is why the example asks only for a name; `access.js` can hold those in a separate document only the practice and the booker read.
+- Whoever reads the bookings (the practice's own day view included) applies the same earliest-`createdAt` rule, so everyone agrees who holds a slot; `access.js` can reject a booking whose `createdAt` is far from now, so a wrong clock can't jump the queue.
+- 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/booking.json

package/llms/pouf-calendar.d.ts

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

package/llms/pouf-calendar.js

@@ -0,0 +1,6 @@
+export const poufCalendarConfig = {
+    name: "pouf-calendar",
+    label: "Pouf calendar block",
+    description: "Calendar agenda/month view UI: month grid, day timeline, saved events",
+};
+//# sourceMappingURL=pouf-calendar.js.map

package/llms/pouf-calendar.js.map

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