@vibes.diy/prompts 14.3.79 → 14.3.81

package/llms/calendar.md

@@ -1,4 +1,122 @@
-# Calendar subscriptions — a live .ics feed of each user's items
+# Dates and calendars — the app knows today; subscriptions as a live .ics feed
+
+## Dates — the app knows today
+
+An app that keeps a date — a due date, a deadline, a run of daily check-ins, a
+service schedule, a reminder, a timeline — is working against a clock that is
+always on. `new Date()` is today, in the person's own time zone, at the moment
+they type. The build context states today's date too (the `<today>` line), so a
+record you write and a sample you author both start from a known day.
+
+**Relative words resolve against now, save at once, and show the resolved date.**
+"Tomorrow", "Friday", "next week", "the 15th" each name exactly one day from
+where the person stands; resolve it with `new Date()` when the record is saved,
+save the ISO day, and show that day beside the record so one tap adjusts it.
+The saved card is the confirmation and the date on it is the question answered.
+A sentence-intake schema call reads dates the same way: the person's local day
+goes into its prompt (`Today: ${keyOf(new Date())}`, with `keyOf` below), as the
+intake samples in the fireproof and callai docs do with their own `Today:`. Days
+are kept as local `YYYY-MM-DD` strings (`keyOf`), so a date stays the day the
+person meant across time zones.
+
+### `App.jsx`
+```jsx app=practice-log
+import React, { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { Button, Field, Input, Row, Stack, Text } from "@vibes.diy/pouf";
+
+const pad = (n) => String(n).padStart(2, "0");
+const keyOf = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+const DAYS = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
+
+const daysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
+// "the 15th" → the next month, this one included, that has a 15th and has not passed it.
+function nextDayOfMonth(n, now) {
+  if (n < 1 || n > 31) return null;
+  for (let i = 0; i < 12; i += 1) {
+    const d = new Date(now.getFullYear(), now.getMonth() + i, 1);
+    if (n > daysInMonth(d.getFullYear(), d.getMonth())) continue;
+    d.setDate(n);
+    if (d >= now || keyOf(d) === keyOf(now)) return d;
+  }
+  return null;
+}
+
+// "tomorrow", "friday", "next week", "the 15th" → the one day they mean from today.
+function resolveDay(words, now = new Date()) {
+  const text = words.toLowerCase();
+  const day = new Date(now);
+  const weekday = DAYS.findIndex((name) => text.includes(name));
+  if (text.includes("tomorrow")) day.setDate(day.getDate() + 1);
+  else if (text.includes("next week")) day.setDate(day.getDate() + 7);
+  else if (weekday >= 0) day.setDate(day.getDate() + ((weekday - day.getDay() + 7) % 7 || 7));
+  else {
+    const nth = text.match(/\bthe (\d{1,2})(?:st|nd|rd|th)?\b/);
+    if (nth) return nextDayOfMonth(Number(nth[1]), now) && keyOf(nextDayOfMonth(Number(nth[1]), now));
+  }
+  return keyOf(day);
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("practice-log");
+  const { docs: sessions } = useLiveQuery("type", { key: "session" });
+  const [words, setWords] = useState("");
+  const [day, setDay] = useState(keyOf(new Date()));
+  const today = keyOf(new Date());
+  const plan = (text) => {
+    setWords(text);
+    // A day the words name lands in the date field; "the 31st" in a short month leaves it for the person to pick.
+    setDay(resolveDay(text) ?? "");
+  };
+  const save = async () => {
+    if (!words.trim() || !day) return;
+    await database.put({ type: "session", piece: words.trim(), day, createdAt: Date.now() });
+    setWords("");
+    setDay(today);
+  };
+  return (
+    <Stack gap={3}>
+      <Field label="Plan a practice">{(id, d) => <Input id={id} describedBy={d} value={words} onChange={plan} placeholder="Scales on friday" />}</Field>
+      <Row gap={2}>
+        <Field label="On">{(id, d) => <Input id={id} describedBy={d} type="date" value={day} onChange={setDay} />}</Field>
+        <Button onClick={save}>Save</Button>
+      </Row>
+      {sessions.map((s) => (
+        <Row key={s._id} gap={2}>
+          <Text>{s.piece}</Text>
+          <Text size="sm" muted>{s.day === today ? "today" : s.day}</Text>
+        </Row>
+      ))}
+    </Stack>
+  );
+}
+```
+
+**Sample records are dated around the day they are written.** A demo opens
+alive when its examples sit where the app's own views look: recent activity in
+the last few days, an unbroken run of daily entries reaching today, upcoming
+items this week and next, a month grid with this month's entries on it. Write
+each seed date from the `<today>` line as an offset — yesterday, three days ago,
+this coming Saturday — so a reader of the seed can see the run reaching the day
+it was written. The example below was written on a `<today>` of `2026-10-06`:
+`day` runs three days ago, two days ago, yesterday, today, and the plan lands
+on the coming Saturday (`2026-10-10`); on another day, the same offsets give
+other dates.
+
+### `seed.json`
+```json
+{
+  "practice-log": [
+    { "key": "scales-1", "type": "session", "piece": "G major scales", "day": "2026-10-03" },
+    { "key": "etude-1", "type": "session", "piece": "Kreutzer etude 2", "day": "2026-10-04" },
+    { "key": "scales-2", "type": "session", "piece": "G major scales, faster", "day": "2026-10-05" },
+    { "key": "sonata", "type": "session", "piece": "Sonata first movement", "day": "2026-10-06" },
+    { "key": "recital", "type": "session", "piece": "Run the recital program", "day": "2026-10-10" }
+  ]
+}
+```
+
+## Calendar subscriptions — a live .ics feed of each user's items
 
 When an app has per-user dated items — favorited events, RSVPs, picks,
 bookings, shifts — offer a **calendar subscription**: a `webcal://` link that

package/llms/callai.md

@@ -28,6 +28,7 @@ import React, { useState } from "react";
 import { callAI } from "call-ai";
 import { useFireproof } from "use-fireproof";
 import { useVibe } from "use-vibes";
+import { Button, Field, Heading, Input, Row, RowCard, Stack, Text, Textarea } from "@vibes.diy/pouf";
 
 const taskSchema = {
   type: "object",
@@ -75,19 +76,23 @@ function TaskCard({ task, database, can, onCorrect, onSaved, disabled }) {
   const { useDocument } = useFireproof(database);
   const { doc, merge, save } = useDocument(task);
   const [editing, setEditing] = useState(false);
-  return <article>
-    <h2>{task.title}</h2><p>{task.details}</p><p>{task.dueDate}</p>
+  return <RowCard><Stack gap={2}>
+    <Text>{task.title}</Text><Text muted>{task.details}</Text><Text muted>{task.dueDate}</Text>
     {can.edit(task).ok && <>
-      <button type="button" disabled={disabled} onClick={() => onCorrect(task)}>Change by sentence</button>
-      <button type="button" disabled={disabled} onClick={() => setEditing(true)}>Edit details</button>
+      <Row gap={2} wrap>
+        <Button type="button" size="sm" variant="quiet" disabled={disabled} onClick={() => onCorrect(task)}>Change by sentence</Button>
+        <Button type="button" size="sm" variant="quiet" disabled={disabled} onClick={() => setEditing(true)}>Edit details</Button>
+      </Row>
       {editing && <form onSubmit={async (event) => { event.preventDefault(); if (disabled) return; await save(); onSaved(task); setEditing(false); }}>
-        <input disabled={disabled} aria-label="Task" value={doc.title} onChange={(event) => merge({ title: event.target.value })} />
-        <textarea disabled={disabled} aria-label="Details" value={doc.details} onChange={(event) => merge({ details: event.target.value })} />
-        <input disabled={disabled} aria-label="Due date" type="date" value={doc.dueDate} onChange={(event) => merge({ dueDate: event.target.value })} />
-        <button type="submit" disabled={disabled}>Save details</button>
+        <Stack gap={3}>
+          <Field label="Task">{(id, describedBy) => <Input id={id} describedBy={describedBy} disabled={disabled} value={doc.title} onChange={(title) => merge({ title })} />}</Field>
+          <Field label="Details">{(id, describedBy) => <Textarea id={id} describedBy={describedBy} disabled={disabled} value={doc.details} onChange={(details) => merge({ details })} />}</Field>
+          <Field label="Due date">{(id, describedBy) => <Input id={id} describedBy={describedBy} disabled={disabled} type="date" value={doc.dueDate} onChange={(dueDate) => merge({ dueDate })} />}</Field>
+          <Row><Button type="submit" size="sm" variant="quiet" disabled={disabled}>Save details</Button></Row>
+        </Stack>
       </form>}
     </>}
-  </article>;
+  </Stack></RowCard>;
 }
 
 export default function App() {
@@ -163,21 +168,27 @@ export default function App() {
       setMessage(error.message);
     } finally { setBusy(false); }
   }
-  return <main>
-    <h1>Tasks in your own words</h1>
+  return <main className="min-h-screen bg-background text-foreground font-sans p-6"><Stack gap={5}>
+    <Heading level={1}>Tasks in your own words</Heading>
     <form onSubmit={submitSentence}>
-      <textarea aria-label="Describe tasks, a correction, or ask a question" value={sentence} disabled={busy || pending !== undefined} onChange={(event) => setSentence(event.target.value)} />
-      {current !== undefined && <p>Changing: {current.title} <button type="button" disabled={busy || pending !== undefined} onClick={() => { setCurrent(undefined); setSentence(""); }}>Add a new task</button></p>}
-      <button type="submit" disabled={!ready || busy || sentence.trim().length === 0}>{busy ? "Adding your changes…" : pending !== undefined ? "Retry remaining tasks" : current === undefined ? "Add tasks" : "Apply correction"}</button>
-      <button type="button" disabled={!ready || busy || pending !== undefined || sentence.trim().length === 0} onClick={askRecords}>Ask about tasks</button>
+      <Stack gap={3}>
+        <Field label="Describe tasks, a correction, or ask a question">{(id, describedBy) => <Textarea id={id} describedBy={describedBy} value={sentence} disabled={busy || pending !== undefined} onChange={setSentence} />}</Field>
+        {current !== undefined && <Row gap={2} align="center" wrap><Text muted>Changing: {current.title}</Text><Button type="button" size="sm" variant="quiet" disabled={busy || pending !== undefined} onClick={() => { setCurrent(undefined); setSentence(""); }}>Add a new task</Button></Row>}
+        <Row gap={2} wrap>
+          <Button type="submit" disabled={!ready || busy || sentence.trim().length === 0}>{busy ? "Adding your changes…" : pending !== undefined ? "Retry remaining tasks" : current === undefined ? "Add tasks" : "Apply correction"}</Button>
+          <Button type="button" variant="quiet" disabled={!ready || busy || pending !== undefined || sentence.trim().length === 0} onClick={askRecords}>Ask about tasks</Button>
+        </Row>
+      </Stack>
     </form>
-    <p>{answer}</p>
+    <Text>{answer}</Text>
     <p role="status">{message}</p>
-    {writeRejection && <p role="status">{writeRejection.message} <button type="button" onClick={clearWriteRejection}>Dismiss</button></p>}
-    {lastWrite !== undefined && <button type="button" disabled={busy} onClick={undoLast}>Undo</button>}
-    {pending !== undefined && !busy && <button type="button" onClick={() => { setPending(undefined); setSentence(""); setCurrent(undefined); }}>Discard unsaved tasks</button>}
+    {writeRejection && <Row gap={2} align="center" wrap><p role="status">{writeRejection.message}</p><Button type="button" size="sm" variant="quiet" onClick={clearWriteRejection}>Dismiss</Button></Row>}
+    <Row gap={2} wrap>
+      {lastWrite !== undefined && <Button type="button" size="sm" variant="quiet" disabled={busy} onClick={undoLast}>Undo</Button>}
+      {pending !== undefined && !busy && <Button type="button" size="sm" variant="quiet" tone="down" onClick={() => { setPending(undefined); setSentence(""); setCurrent(undefined); }}>Discard unsaved tasks</Button>}
+    </Row>
     {docs.map((task) => <TaskCard key={task._id} task={task} database={database} can={can} disabled={busy || pending !== undefined} onSaved={(previous) => setLastWrite({ created: [], replaced: previous })} onCorrect={(doc) => { if (busy || pending !== undefined) return; setCurrent(doc); setSentence(""); }} />)}
-  </main>;
+  </Stack></main>;
 }
 ```
 
@@ -246,6 +257,66 @@ An image that stays too large even after shrinking is answered at once with an e
 
 Inside `backend.js`, `ctx.callAI` takes a string prompt.
 
+## Choosing a model
+
+`listModels({ kind: "image" })` returns the image models this app can use, the app's own choice first; `listModels({ kind: "text" })` returns the text models `callAI` can answer with, in the same order. Import it beside `callAI`: `import { callAI, listModels } from "call-ai"`. Each entry is `{ id, name, description, kind, source, isDefault }`:
+
+- `id` — what you hand back: `callAI(prompt, { schema, model: id })`, or `<ImgGen model={id} />` for a picture.
+- `name` and `description` — the words to show a person who is choosing.
+- `isDefault` — `true` on the one model the app uses when it names none. Start a picker there.
+- `source` — where the entry comes from: `"account-setting"` (the signed-in person's own pick for their account), `"app-setting"` (the pick this app's maker made), `"owner-account-setting"` (the maker's pick for all their apps, when this app has none of its own), `"platform-default"` (the platform's pick for this app), or `"catalog"` (the platform's curated models).
+
+`callAI(prompt, { schema, model })` answers with the model you name from that list, and leaving `model` out keeps the app's default. Pass an `id` the list returned: any other name comes back as an error message you can show beside the picker. When the app's maker saved their own provider key in settings, that key covers the model they chose there; other models run on the person's credits. Let a person choose with a `Select` built from the list:
+
+### `App.jsx`
+```jsx
+import React, { useEffect, useState } from "react";
+import { callAI, listModels } from "call-ai";
+import { Button, Stack, Text } from "@vibes.diy/pouf";
+import { Select } from "@vibes.diy/pouf/interactive";
+
+export default function App() {
+  const [models, setModels] = useState([]);
+  const [model, setModel] = useState("");
+  const [haiku, setHaiku] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState("");
+  useEffect(() => {
+    listModels({ kind: "text" })
+      .then((list) => {
+        setModels(list);
+        setModel(list.find((m) => m.isDefault)?.id ?? list[0]?.id ?? "");
+      })
+      .catch((error) => setMessage(error.message));
+  }, []);
+  async function writeHaiku() {
+    setBusy(true);
+    setMessage("");
+    try {
+      const response = await callAI("Write a haiku about the first snow of the year.", {
+        model,
+        schema: { properties: { haiku: { type: "string" } }, required: ["haiku"] },
+      });
+      setHaiku(JSON.parse(response).haiku);
+    } catch (error) {
+      setMessage(error.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <Stack>
+      <Select label="Model" value={model} onChange={setModel} options={models.map((m) => ({ value: m.id, label: m.name }))} />
+      <Button onClick={writeHaiku} loading={busy} disabled={model === ""}>Write a haiku</Button>
+      <Text>{haiku}</Text>
+      <Text>{message}</Text>
+    </Stack>
+  );
+}
+```
+
+For pictures, the image-gen skill's "Choosing a Model" section shows one `<ImgGen>` per image model, side by side.
+
 ## Error Handling
 
 ```javascript

package/llms/connections.md

@@ -75,18 +75,19 @@ for the rest.
 ### `App.jsx`
 ```jsx app=instagram-connection
 import { useConnection } from "use-vibes";
+import { Button, Text } from "@vibes.diy/pouf";
 
 function ConnectInstagram() {
   const { state, consented, available, accountLabel, link, refresh } = useConnection("instagram");
   if (state === "pending") return null; // still resolving — never flash a Connect button
   // A connection that already works keeps working, whatever `available` says.
   if (consented && (state === "live" || state === "expiring"))
-    return <p>Connected as {accountLabel}</p>;
+    return <Text>Connected as {accountLabel}</Text>;
   // Everything below asks the visitor to start or redo a connection, which is
   // the only thing `available` can stop.
-  if (!available) return <p>Connecting Instagram is not available right now.</p>;
-  if (state === "dead") return <p>Your Instagram connection expired. Reconnect it in Settings.</p>;
-  return <button onClick={link}>Connect Instagram</button>;
+  if (!available) return <Text muted>Connecting Instagram is not available right now.</Text>;
+  if (state === "dead") return <Text muted>Your Instagram connection expired. Reconnect it in Settings.</Text>;
+  return <Button type="button" onClick={link}>Connect Instagram</Button>;
 }
 ```
 

package/llms/create-vibe.md

@@ -28,7 +28,7 @@ when they're ready.
 ```jsx
 import React from "react";
 import { createVibe } from "use-vibes";
-import { Button } from "@vibes.diy/look";
+import { Button } from "@vibes.diy/pouf";
 
 export default function App() {
   // `ready` + `spec` come from the interview (see the full example below).
@@ -69,7 +69,7 @@ Let the user edit each slide inline and present full-screen.`;
 import React from "react";
 import { callAI } from "call-ai";
 import { createVibe } from "use-vibes";
-import { Button } from "@vibes.diy/look";
+import { Button } from "@vibes.diy/pouf";
 
 export default function App() {
   const [answers, setAnswers] = React.useState({});
@@ -95,7 +95,7 @@ export default function App() {
     <main id="app">
       {/* ...interview... */}
       {!spec ? (
-        <Button size="lg" disabled={building} onClick={finish}>
+        <Button size="lg" loading={building} onClick={finish}>
           {building ? "Preparing…" : "I'm ready"}
         </Button>
       ) : (
@@ -131,6 +131,7 @@ blocked), offer a fallback link so the hand-off still works:
 
 ```jsx
 import { createVibe, buildCreateVibeUrl } from "use-vibes";
+import { Button } from "@vibes.diy/pouf";
 
 function HandoffButton({ spec }) {
   const [blocked, setBlocked] = React.useState(false);
@@ -139,7 +140,7 @@ function HandoffButton({ spec }) {
       Open the builder
     </a>
   ) : (
-    <button onClick={() => setBlocked(!createVibe(spec))}>Create my pitch deck</button>
+    <Button type="button" onClick={() => setBlocked(!createVibe(spec))}>Create my pitch deck</Button>
   );
 }
 ```