@vibes.diy/prompts 14.3.64 → 14.3.66

package/llms/pouf-calendar.md

@@ -0,0 +1,352 @@
+# Pouf Calendar
+
+An on-screen calendar of timed events: a studio's class timetable, a family's appointments, a club's practice schedule, a shared room's bookings for the week. Reach for it when the app shows a month at a glance and one day's agenda in time order, with the free gaps between events and a line where "now" falls, and lets people add and remove events. This is the calendar people look at inside the app; a subscribable phone-calendar feed (webcal or `.ics`) is a different job, served from the backend. Each event is its own document, so everyone who opens the app sees the same schedule.
+
+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: see what is on and add to it. The `Heading` and a muted line open the page beside `Add event`, the view's one lead, which opens a `Dialog` with the event form (title, start and length, each in its own `Field`, the title's error on its own). The month comes first, on a tight `Card` so its seven columns fit a phone, and the day's agenda follows on a `Card` of its own: the date as a `Heading level={2}`, an `info` `Badge` on today, a muted event count, then the timeline: one `RowCard` per event (start and end in numeric muted `Text`, the title, its length) with a quiet `IconButton` toned `down` to remove it behind a `Confirm` wearing `tone="down"`; a muted row with a clock `Icon` for every free gap of an hour or more; and an `info` `Badge` with the time where now falls on today. An `Empty` stands in for a day with nothing on, its hint held back until the add verdict resolves. On the month `Card`, quiet `IconButton`s step between months, a quiet `Today` jumps back, and a seven-column grid of small square `IconButton`s, each labelled with its date and event count, picks the day: the chosen day solid `info`, a day with events solid `idle`, an empty day quiet. Every write waits on its `can` verdict from `useVibe("calendar")`, the database the events live in: `Add event` gives way to a `Skeleton` inside an `aria-busy` wrapper while the verdict resolves, to a `Sign in to add events` lead wired to `useViewer().requestLogin()` for a visitor who has not signed in, and to a sentence in the app's own words when adding is closed; the remove button renders only where `can.delete(event).ok`.
+
+### `App.jsx`
+```jsx
+import React, { useEffect, useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import { Badge, Button, Card, Empty, Field, Grid, Heading, Icon, IconButton, Input, Row, RowCard, Skeleton, Stack, Text } from "@vibes.diy/pouf";
+import { Confirm, Dialog, Select, Toaster, toast } from "@vibes.diy/pouf/interactive";
+
+const pad = (n) => String(n).padStart(2, "0");
+// Dates are kept as local YYYY-MM-DD strings, so an event never drifts a day across time zones.
+const keyOf = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+const dateOf = (key) => new Date(`${key}T12:00:00`);
+const longDate = (key) => dateOf(key).toLocaleDateString(undefined, { weekday: "long", month: "long", day: "numeric" });
+function toMinutes(t) {
+  const [h, m] = t.split(":").map(Number);
+  return h * 60 + m;
+}
+function fromMinutes(mins) {
+  return `${pad(Math.floor(mins / 60))}:${pad(mins % 60)}`;
+}
+const plural = (n, one, many) => (n === 1 ? `1 ${one}` : `${n} ${many}`);
+
+// The agenda's working hours and the shortest gap worth calling free.
+const DAY_START = 8 * 60;
+const DAY_END = 20 * 60;
+const FREE_MIN = 60;
+const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const START_OPTIONS = Array.from({ length: (DAY_END - DAY_START) / 30 }, (_, i) => {
+  const t = fromMinutes(DAY_START + i * 30);
+  return { value: t, label: t };
+});
+const LENGTH_OPTIONS = [
+  { value: "15", label: "15 min" },
+  { value: "30", label: "30 min" },
+  { value: "45", label: "45 min" },
+  { value: "60", label: "1 hour" },
+  { value: "90", label: "1 hour 30" },
+  { value: "120", label: "2 hours" },
+];
+const EMPTY_DRAFT = { title: "", start: "09:00", minutes: "60" };
+
+// A day's events become a full timeline: free gaps of an hour or more, and on today a "now" marker.
+function buildTimeline(events, nowMinutes) {
+  const items = [];
+  let cursor = DAY_START;
+  let nowPlaced = nowMinutes === undefined;
+  const placeNow = (before) => {
+    if (!nowPlaced && nowMinutes < before) {
+      items.push({ kind: "now" });
+      nowPlaced = true;
+    }
+  };
+  for (const event of events) {
+    const start = toMinutes(event.start);
+    if (start - cursor >= FREE_MIN) {
+      placeNow(cursor);
+      items.push({ kind: "free", start: cursor, end: start });
+    }
+    placeNow(start);
+    items.push({ kind: "event", event });
+    cursor = Math.max(cursor, start + event.minutes);
+  }
+  if (DAY_END - cursor >= FREE_MIN) {
+    placeNow(cursor);
+    items.push({ kind: "free", start: cursor, end: DAY_END });
+  }
+  if (!nowPlaced) items.push({ kind: "now" });
+  return items;
+}
+
+// The cells of a month grid, Monday first: blanks before the 1st, then each day's key.
+function monthCells(year, month) {
+  const lead = (new Date(year, month, 1).getDay() + 6) % 7;
+  const days = new Date(year, month + 1, 0).getDate();
+  return [...Array(lead).fill(null), ...Array.from({ length: days }, (_, i) => keyOf(new Date(year, month, i + 1)))];
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("calendar");
+  const { docs } = useLiveQuery("type", { key: "event" });
+  const { can, me } = useVibe("calendar");
+  const { requestLogin } = useViewer();
+
+  const [now, setNow] = useState(() => new Date());
+  const today = keyOf(now);
+  const [selected, setSelected] = useState(today);
+  const [shown, setShown] = useState(() => ({ year: now.getFullYear(), month: now.getMonth() }));
+  const [adding, setAdding] = useState(false);
+  const [draft, setDraft] = useState(EMPTY_DRAFT);
+  const [errors, setErrors] = useState({});
+  const [saving, setSaving] = useState(false);
+  const [removingId, setRemovingId] = useState(undefined);
+
+  // The now marker moves with the clock; one tick a minute is all it needs.
+  useEffect(() => {
+    const id = setInterval(() => setNow(new Date()), 60_000);
+    return () => clearInterval(id);
+  }, []);
+
+  const countOn = new Map();
+  for (const e of docs) countOn.set(e.date, (countOn.get(e.date) ?? 0) + 1);
+  const dayEvents = docs.filter((e) => e.date === selected).sort((a, b) => toMinutes(a.start) - toMinutes(b.start));
+  const isToday = selected === today;
+  const timeline = buildTimeline(dayEvents, isToday ? now.getHours() * 60 + now.getMinutes() : undefined);
+  const selectedDate = dateOf(selected);
+  const monthName = new Date(shown.year, shown.month, 1).toLocaleDateString(undefined, { month: "long", year: "numeric" });
+
+  // The verdict for the doc addEvent writes, carrying the same fields it stamps.
+  const canAdd = can.create({ type: "event", date: selected, authorHandle: me?.userHandle });
+
+  function step(by) {
+    setShown(({ year, month }) => {
+      const d = new Date(year, month + by, 1);
+      return { year: d.getFullYear(), month: d.getMonth() };
+    });
+  }
+
+  function goToday() {
+    setSelected(today);
+    setShown({ year: now.getFullYear(), month: now.getMonth() });
+  }
+
+  function edit(field, value) {
+    setDraft((d) => ({ ...d, [field]: value }));
+    if (errors[field]) setErrors((e) => ({ ...e, [field]: undefined }));
+  }
+
+  async function addEvent(e) {
+    e.preventDefault();
+    const next = {};
+    if (draft.title.trim() === "") next.title = "Give the event a name.";
+    if (toMinutes(draft.start) + Number(draft.minutes) > 24 * 60) next.minutes = "That runs past midnight; pick a shorter length.";
+    setErrors(next);
+    if (Object.keys(next).length > 0) return;
+    setSaving(true);
+    try {
+      await database.put({
+        type: "event",
+        date: selected,
+        start: draft.start,
+        minutes: Number(draft.minutes),
+        title: draft.title.trim(),
+        authorHandle: me?.userHandle,
+        createdAt: Date.now(),
+      });
+      // Cleared only once the write lands, so a failed save keeps what was typed.
+      setDraft(EMPTY_DRAFT);
+      setAdding(false);
+      toast.success("Event added");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function removeEvent(event) {
+    setRemovingId(event._id);
+    try {
+      await database.del(event._id);
+      toast.success("Event removed");
+    } finally {
+      setRemovingId(undefined);
+    }
+  }
+
+  let addAction;
+  if (canAdd.pending)
+    addAction = (
+      <div aria-busy="true">
+        <Skeleton variant="text" />
+      </div>
+    );
+  else if (!me) addAction = <Button onClick={requestLogin}>Sign in to add events</Button>;
+  else if (!canAdd.ok) addAction = <Text muted>The schedule is set by the organisers.</Text>;
+  else
+    addAction = (
+      <Dialog title="Add event" description={longDate(selected)} open={adding} onOpenChange={setAdding} trigger={<Button>Add event</Button>}>
+        <form onSubmit={addEvent} noValidate>
+          <Stack gap={3}>
+            <Field label="Title" error={errors.title}>
+              {(id, describedBy) => (
+                <Input id={id} describedBy={describedBy} value={draft.title} onChange={(v) => edit("title", v)} placeholder="Wheel-throwing, beginners" invalid={errors.title !== undefined} />
+              )}
+            </Field>
+            <Grid cols={2}>
+              <Field label="Starts">
+                {(id, describedBy) => <Select id={id} describedBy={describedBy} value={draft.start} onChange={(v) => edit("start", v)} options={START_OPTIONS} />}
+              </Field>
+              <Field label="Length" error={errors.minutes}>
+                {(id, describedBy) => <Select id={id} describedBy={describedBy} value={draft.minutes} onChange={(v) => edit("minutes", v)} options={LENGTH_OPTIONS} />}
+              </Field>
+            </Grid>
+            <Row justify="end">
+              <Button type="submit" loading={saving}>
+                Add to {selectedDate.toLocaleDateString(undefined, { month: "short", day: "numeric" })}
+              </Button>
+            </Row>
+          </Stack>
+        </form>
+      </Dialog>
+    );
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-8">
+      <Stack gap={5}>
+        <Row justify="between">
+          <Stack gap={1}>
+            <Heading level={1}>Studio calendar</Heading>
+            <Text muted>Classes and bookings, in time order.</Text>
+          </Stack>
+          {addAction}
+        </Row>
+
+        <Card variant="tight">
+          {/* tight: 16px padding a side leaves room for 7 × 38px days + 6 × 4px gaps = 290px on a 360px phone. */}
+          <Stack gap={3}>
+            <Row justify="between" wrap={false}>
+              <IconButton size="sm" label="Previous month" icon={<Icon name="prev" size="sm" />} onClick={() => step(-1)} />
+              <Text>{monthName}</Text>
+              <IconButton size="sm" label="Next month" icon={<Icon name="next" size="sm" />} onClick={() => step(1)} />
+            </Row>
+            <div className="grid grid-cols-7 justify-items-center gap-1">
+              {WEEKDAYS.map((w) => (
+                <Text key={w} size="sm" muted>
+                  {w}
+                </Text>
+              ))}
+              {monthCells(shown.year, shown.month).map((key, i) => {
+                if (key === null) return <span key={`blank-${i}`} />;
+                const n = countOn.get(key) ?? 0;
+                // Chosen day: solid info. A day with events: solid idle. An empty day: quiet.
+                return (
+                  <IconButton
+                    key={key}
+                    size="sm"
+                    variant={key === selected || n > 0 ? "solid" : "quiet"}
+                    tone={key === selected ? "info" : "idle"}
+                    label={`${longDate(key)}, ${plural(n, "event", "events")}`}
+                    icon={Number(key.slice(8))}
+                    onClick={() => setSelected(key)}
+                  />
+                );
+              })}
+            </div>
+            <Row justify="end">
+              <Button size="sm" variant="quiet" disabled={isToday && shown.year === now.getFullYear() && shown.month === now.getMonth()} onClick={goToday}>
+                Today
+              </Button>
+            </Row>
+          </Stack>
+        </Card>
+
+        <Card>
+          <Stack gap={4}>
+            <Row justify="between">
+              <Stack gap={1}>
+                <Row gap={2} wrap={false}>
+                  <Heading level={2}>{longDate(selected)}</Heading>
+                  {isToday && <Badge tone="info">Today</Badge>}
+                </Row>
+                <Text size="sm" muted>
+                  {plural(dayEvents.length, "event", "events")}
+                </Text>
+              </Stack>
+            </Row>
+
+            {dayEvents.length === 0 ? (
+              <Empty icon="calendar" title="Nothing on this day">
+                {canAdd.pending ? undefined : canAdd.ok ? "Add an event and it shows up here in time order." : "A free day."}
+              </Empty>
+            ) : (
+              <Stack gap={2}>
+                {timeline.map((item, i) => {
+                  if (item.kind === "now")
+                    return (
+                      <Row key="now">
+                        <Badge tone="info">Now {fromMinutes(now.getHours() * 60 + now.getMinutes())}</Badge>
+                      </Row>
+                    );
+                  if (item.kind === "free")
+                    return (
+                      <Row key={`free-${i}`} gap={2} wrap={false}>
+                        <Icon name="clock" size="sm" />
+                        <Text size="sm" muted>
+                          Free {fromMinutes(item.start)} to {fromMinutes(item.end)}
+                        </Text>
+                      </Row>
+                    );
+                  const ev = item.event;
+                  const end = fromMinutes(Math.min(24 * 60 - 1, toMinutes(ev.start) + ev.minutes));
+                  return (
+                    <RowCard key={ev._id}>
+                      <Row justify="between" wrap={false}>
+                        <Row gap={3} wrap={false}>
+                          <Text size="sm" num muted>
+                            {ev.start}–{end}
+                          </Text>
+                          <Stack gap={1}>
+                            <Text>{ev.title}</Text>
+                            <Text size="sm" muted>
+                              {ev.minutes} min
+                            </Text>
+                          </Stack>
+                        </Row>
+                        {can.delete(ev).ok && (
+                          <Confirm
+                            title="Remove this event?"
+                            body={`"${ev.title}" comes off the calendar for everyone. This can't be undone.`}
+                            confirmLabel="Remove event"
+                            cancelLabel="Keep it"
+                            tone="down"
+                            loading={removingId === ev._id}
+                            onConfirm={() => removeEvent(ev)}
+                          >
+                            <IconButton size="sm" tone="down" label={`Remove "${ev.title}"`} loading={removingId === ev._id} icon={<Icon name="remove" size="sm" />} />
+                          </Confirm>
+                        )}
+                      </Row>
+                    </RowCard>
+                  );
+                })}
+              </Stack>
+            )}
+          </Stack>
+        </Card>
+      </Stack>
+      <div className="pouf-toasts">
+        <Toaster />
+      </div>
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Keep one document per event with a local `date` (`YYYY-MM-DD`), a `start` (`HH:MM`) and a length in `minutes`; the agenda, free gaps and month dots are all computed from them at render, so nothing is stored twice.
+- Change the hours, not the shape: `DAY_START`, `DAY_END` and `FREE_MIN` set the agenda's working day and the smallest gap worth showing as free. A field such as `room` or `teacher` on the event shows as a muted line under its title, or as an `info` `Badge` when it is a category. Keep the month grid full width on a `variant="tight"` `Card`: seven 38px day buttons and their gaps need 290px, which a default `Card` (32px padding a side) or a `Grid cols="sidebar"` side column does not leave.
+- Everything in this database is readable by anyone who opens the app. A family calendar with private appointments needs an access function that limits who can read them; never put a health note or a phone number in an event title on a shared calendar.
+- To let people subscribe to the schedule on their phones, add the `calendar` skill's webcal/.ics feed from `backend.js` over these same event documents; this block stays the on-screen view.
+- 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. Editing an event in place is `can.edit(event)` behind the same `Dialog`.
+
+Adapted from 1st-Pouf (MIT) https://1st-pouf.worksonmy.dev/r/calendar.json

package/llms/pouf-chat.d.ts

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

package/llms/pouf-chat.js

@@ -0,0 +1,6 @@
+export const poufChatConfig = {
+    name: "pouf-chat",
+    label: "Pouf chat block",
+    description: "Group chat with rooms, live message threads and a composer",
+};
+//# sourceMappingURL=pouf-chat.js.map

package/llms/pouf-chat.js.map

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

package/llms/pouf-chat.md

@@ -0,0 +1,220 @@
+# Pouf Chat
+
+A group conversation split into rooms: a crew's chat with a room per trip, a band's thread per song, a household's rooms for groceries and plans, a class's channel per project. Reach for it whenever the app's core is people sending each other short messages that read top to bottom as they arrive. Rooms and messages persist and arrive live, so everyone in the app sees a new message as soon as it is sent, on every device.
+
+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 room list opens with the `Heading` and a muted count; each room is a clickable `RowCard` with its name and a muted line from its latest message, an `Empty` stands in before the first room, and a small form on a `Card` starts a new room with `Start room` as that view's one lead. Opening a room swaps in its thread: a quiet `IconButton` to go back, the room's `Heading`, the messages in a `ScrollArea` (each one a `RowCard` with its author as a `ViewerTag` and a muted time, the visitor's own pushed to the right), and a composer whose solid `Send` `IconButton` is that view's lead. The list scrolls to the newest message as messages arrive. Every write waits on its `can` verdict from `useVibe("chat")`, the database the rooms and messages live in: both 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.
+
+### `App.jsx`
+```jsx
+import React, { useEffect, useRef, useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { useViewer, useVibe } from "use-vibes";
+import { Button, Card, Empty, Field, Heading, Icon, IconButton, Input, Row, RowCard, Skeleton, Stack, Text } from "@vibes.diy/pouf";
+import { ScrollArea } from "@vibes.diy/pouf/interactive";
+
+const when = (ms) => new Date(ms).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+
+function Author({ handle }) {
+  const { ViewerTag } = useViewer();
+  return handle ? <ViewerTag userHandle={handle} /> : <Text size="sm">A guest</Text>;
+}
+
+function Thread({ room, onBack }) {
+  const { database, useLiveQuery } = useFireproof("chat");
+  const { can, me } = useVibe("chat");
+  const { docs } = useLiveQuery("roomId", { key: room._id });
+  const messages = [...docs].sort((a, b) => a.createdAt - b.createdAt);
+  const [draft, setDraft] = useState("");
+  const endRef = useRef(null);
+  // The verdict for the doc send writes, carrying the same fields it stamps.
+  const canSend = can.create({ type: "message", roomId: room._id, authorHandle: me?.userHandle });
+
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ block: "nearest" });
+  }, [messages.length]);
+
+  async function send(e) {
+    e.preventDefault();
+    const text = draft.trim();
+    if (text === "") return;
+    await database.put({ type: "message", roomId: room._id, text, authorHandle: me?.userHandle, createdAt: Date.now() });
+    // Cleared only once the write lands, so a local failure keeps the typed words.
+    setDraft("");
+  }
+
+  return (
+    <Stack gap={4}>
+      <Row gap={2} wrap={false}>
+        <IconButton size="sm" onClick={onBack} label="Back to rooms" icon={<Icon name="prev" size="sm" />} />
+        <Heading level={1}>{room.name}</Heading>
+      </Row>
+
+      <Card>
+        <Stack gap={4}>
+          <ScrollArea maxHeight="420px">
+            {messages.length === 0 ? (
+              <Empty icon="comment" title="No messages yet">
+                Say hello to get the room going.
+              </Empty>
+            ) : (
+              <Stack gap={3}>
+                {messages.map((m) => (
+                  <Row key={m._id} justify={m.authorHandle && m.authorHandle === me?.userHandle ? "end" : "start"}>
+                    <div className="max-w-[80%]">
+                      <RowCard>
+                        <Stack gap={1}>
+                          <Row gap={2} wrap={false}>
+                            <Author handle={m.authorHandle} />
+                            <Text size="sm" muted>
+                              {when(m.createdAt)}
+                            </Text>
+                          </Row>
+                          <Text>{m.text}</Text>
+                        </Stack>
+                      </RowCard>
+                    </div>
+                  </Row>
+                ))}
+                <div ref={endRef} />
+              </Stack>
+            )}
+          </ScrollArea>
+
+          {canSend.pending ? (
+            <div aria-busy="true">
+              <Skeleton variant="row" />
+            </div>
+          ) : !canSend.ok ? (
+            <Text muted>You're reading along. Sending opens up once you're in the crew.</Text>
+          ) : (
+            <form onSubmit={send}>
+              <Row gap={2} wrap={false}>
+                <div className="min-w-0 flex-1">
+                  <Input value={draft} onChange={setDraft} placeholder={`Message ${room.name}`} label={`Message ${room.name}`} autoComplete="off" />
+                </div>
+                <IconButton type="submit" variant="solid" disabled={draft.trim() === ""} label="Send" icon={<Icon name="send" size="sm" />} />
+              </Row>
+            </form>
+          )}
+        </Stack>
+      </Card>
+    </Stack>
+  );
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("chat");
+  const { can, me } = useVibe("chat");
+  const { docs: roomDocs } = useLiveQuery("type", { key: "room" });
+  const { docs: messages } = useLiveQuery("type", { key: "message" });
+  const rooms = [...roomDocs].sort((a, b) => a.createdAt - b.createdAt);
+
+  const [activeId, setActiveId] = useState(undefined);
+  const [name, setName] = useState("");
+  const [error, setError] = useState(undefined);
+  const active = rooms.find((r) => r._id === activeId);
+  // The verdict for the doc startRoom writes, carrying the same fields it stamps.
+  const canStart = can.create({ type: "room", authorHandle: me?.userHandle });
+
+  async function startRoom(e) {
+    e.preventDefault();
+    const text = name.trim();
+    if (text === "") {
+      setError("Name the room first.");
+      return;
+    }
+    setError(undefined);
+    const { id } = await database.put({ type: "room", name: text, authorHandle: me?.userHandle, createdAt: Date.now() });
+    setName("");
+    setActiveId(id);
+  }
+
+  function latest(roomId) {
+    const inRoom = messages.filter((m) => m.roomId === roomId);
+    if (inRoom.length === 0) return "No messages yet";
+    return inRoom.reduce((a, b) => (b.createdAt > a.createdAt ? b : a)).text;
+  }
+
+  return (
+    <main className="mx-auto max-w-2xl px-4 py-8">
+      {active ? (
+        <Thread room={active} onBack={() => setActiveId(undefined)} />
+      ) : (
+        <Stack gap={5}>
+          <Stack gap={1}>
+            <Heading level={1}>Crew chat</Heading>
+            <Text muted>{rooms.length === 1 ? "1 room" : `${rooms.length} rooms`}</Text>
+          </Stack>
+
+          {rooms.length === 0 ? (
+            <Empty icon="comment" title="No rooms yet">
+              Start one below for the next trip.
+            </Empty>
+          ) : (
+            <Stack gap={2}>
+              {rooms.map((room) => (
+                <RowCard key={room._id} onClick={() => setActiveId(room._id)}>
+                  <Stack gap={1}>
+                    <Text truncate>{room.name}</Text>
+                    <Text size="sm" muted truncate>
+                      {latest(room._id)}
+                    </Text>
+                  </Stack>
+                </RowCard>
+              ))}
+            </Stack>
+          )}
+
+          {canStart.pending ? (
+            <div aria-busy="true">
+              <Skeleton variant="card" />
+            </div>
+          ) : !canStart.ok ? (
+            <Text muted>New rooms open up once you're in the crew.</Text>
+          ) : (
+            <Card>
+              <form onSubmit={startRoom} noValidate>
+                <Stack gap={3}>
+                  <Field label="New room" error={error}>
+                    {(id, describedBy) => (
+                      <Input
+                        id={id}
+                        describedBy={describedBy}
+                        value={name}
+                        onChange={(value) => {
+                          setName(value);
+                          if (error) setError(undefined);
+                        }}
+                        placeholder="Squamish, June"
+                        autoComplete="off"
+                        invalid={error !== undefined}
+                      />
+                    )}
+                  </Field>
+                  <Row justify="end">
+                    <Button type="submit">Start room</Button>
+                  </Row>
+                </Stack>
+              </form>
+            </Card>
+          )}
+        </Stack>
+      )}
+    </main>
+  );
+}
+```
+
+## Adapting
+
+- Rename rooms and messages to the app's own nouns (`trip`, `song`, `channel`) in the `type` key, the headings and the copy; keep one document per message, linked to its room by `roomId`.
+- An unread marker is per person, not per message: keep it as a `lastRead:<room>:<person>` document with a time, and show the count as a `Badge tone="info"`.
+- A side-by-side list and thread on a wide screen is a `Grid cols="sidebar"` with the thread first; keep the back button for phones.
+- Authors are always `ViewerTag` with the stored handle; the visitor's own messages are told apart by `me.userHandle`, never by a stored name.
+- 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/chat.json

package/llms/pouf-contact.d.ts

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

package/llms/pouf-contact.js

@@ -0,0 +1,6 @@
+export const poufContactConfig = {
+    name: "pouf-contact",
+    label: "Pouf contact block",
+    description: "Contact form with validation that saves each message for the team",
+};
+//# sourceMappingURL=pouf-contact.js.map

package/llms/pouf-contact.js.map

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