@vibes.diy/prompts 14.3.124 → 14.3.126

package/llms/access.md

@@ -802,14 +802,15 @@ export default function App() {
 
   async function submitPost() {
     if (!draft.trim() || !viewer) return;
-    await database.put({
+    setDraft("");
+    const { ok } = await database.put({
       type: "post",
       channel,
       body: draft.trim(),
       authorHandle: viewer.userHandle,
       createdAt: Date.now(),
     });
-    setDraft("");
+    if (!ok) setDraft((now) => now || draft);
   }
 
   return (
@@ -1139,10 +1140,11 @@ function BoardWorkspace() {
   const startBoard = async (event) => {
     event.preventDefault();
     if (!ready || !newBoard.name || !can.create(newBoard).ok) return;
-    await database.put(newBoard);
-    setName("");
-    setPickedBoardId(newBoard._id);
-    setDraftId("board-" + crypto.randomUUID());
+    setName(""); // ready for the next name at once
+    setDraftId("board-" + crypto.randomUUID()); // and the next board gets an id of its own
+    const { ok } = await database.put(newBoard);
+    if (ok) setPickedBoardId(newBoard._id);
+    else setName((now) => now || newBoard.name);
   };
   const board =
     boards.find((board) => board._id === pickedBoardId) ??
@@ -1334,8 +1336,9 @@ function Shop() {
   const addFlavor = async (event) => {
     event.preventDefault();
     if (!ready || !flavor.name || !can.create(flavor).ok) return;
-    await database.put(flavor); // the exact value the control checked
-    setName("");
+    setName(""); // ready for the next flavor at once
+    const { ok } = await database.put(flavor); // the exact value the control checked
+    if (!ok) setName((now) => now || flavor.name);
   };
   const order = async (f) => {
     const next = orderFor(f);

package/llms/calendar.md

@@ -70,9 +70,10 @@ export default function App() {
   };
   const save = async () => {
     if (!words.trim() || !day) return;
-    await database.put({ type: "session", piece: words.trim(), day, createdAt: Date.now() });
-    setWords("");
+    setWords(""); // ready for the next session at once
     setDay(today);
+    const { ok } = await database.put({ type: "session", piece: words.trim(), day, createdAt: Date.now() });
+    if (!ok) setWords((now) => now || words);
   };
   return (
     <Stack gap={3}>

package/llms/fireproof.md

@@ -62,9 +62,11 @@ function AddItem() {
   const [text, setText] = useState("");
   const [note, setNote] = useState("");
   async function add() {
-    const { ok, synced } = await database.put({ type: "item", text });
+    const typed = text;
+    setText(""); // the field is ready for the next item the moment they press Add
+    const { ok, synced } = await database.put({ type: "item", text: typed });
     setNote(synced.code === "draft-read-only" ? synced.message : "");
-    if (ok) setText(""); // clear the field once the record is saved
+    if (!ok) setText((now) => now || typed); // hand their words back while the field is still empty
   }
   return (
     <Stack gap={2}>
@@ -78,6 +80,8 @@ function AddItem() {
 }
 ```
 
+Clear the field as the person submits, before the put: capture what they typed, empty the field, then write the captured value. The field is ready for their next entry the moment they press Add, and anything they type while the write settles stays theirs for the next save. When the result comes back `ok: false`, hand the words back with an updater that keeps newer typing, `setText((now) => now || typed)`. `useDocument`'s `submit()` follows the same shape on its own: it hands back a fresh draft as the person submits, saves the submitted one, and restores it when that save does not land while the form is still untouched.
+
 ### Basic Example
 
 When the composer is on screen, wire these visible actions in the same build, using the app's own record names. One composer has Add and Ask actions. Add extracts and normalizes facts, saves each record immediately, and shows saved records with edit actions; one item and a pasted batch share this action. Each saved row has Change by sentence: selecting it changes Add to Apply correction, which saves onto that same record id. Ask sends the typed question with the relevant saved records and displays a read-only answer beside the composer. Edit opens the selected row’s populated fields. One parent-owned Undo restores the latest successful creation batch or the previous document from either a sentence correction or a field edit.
@@ -255,7 +259,7 @@ export default function App() {
 
 ### Editing Documents
 
-Address an existing record by its `_id`. `useDocument(task)` above holds the selected record's editable fields: `merge(updates)` changes the draft, `save()` writes it, and `reset()` restores its initial state. `submit(event)` combines prevent-default, save and reset. Choose the operation that matches the editor's lifecycle. For correction by sentence, pass the current editable fields and the person's correction to the same extraction schema, normalize the result and immediately update the existing document in that submit action with its trusted `_id` and identity fields intact. The callai skill's Text to records example includes that path and pasted lists.
+Address an existing record by its `_id`. `useDocument(task)` above holds the selected record's editable fields: `merge(updates)` changes the draft, `save()` writes it, and `reset()` restores its initial state. `submit(event)` combines prevent-default, reset and save: the form resets as the person submits, the submitted draft is saved, and edits made while the save settles stay in the form. Choose the operation that matches the editor's lifecycle. For correction by sentence, pass the current editable fields and the person's correction to the same extraction schema, normalize the result and immediately update the existing document in that submit action with its trusted `_id` and identity fields intact. The callai skill's Text to records example includes that path and pasted lists.
 
 ## Required starting records
 
@@ -793,7 +797,7 @@ import { Button, Card, ErrorNote, Field, Figure, Grid, Heading, Input, Stack, Te
 export default function App() {
   const { useDocument, useLiveQuery } = useFireproof("imageUploads");
 
-  const { doc, merge, save, reset } = useDocument({
+  const { doc, merge, submit } = useDocument({
     _files: {},
     caption: "",
     type: "upload",
@@ -814,8 +818,9 @@ export default function App() {
     setSaveError("");
     try {
       // The save uploads the photo first, so it can reject; show why.
-      await save();
-      reset();
+      // submit() hands back a fresh form at once and saves the submitted one; a failed upload
+      // puts the photo back in the form while it is still untouched.
+      await submit();
     } catch (err) {
       setSaveError(err.message);
     }

package/llms/motion.md

@@ -481,9 +481,9 @@ export default function App() {
 
   async function send() {
     if (!canPost) return;
-    await database.put({ ...draft, _id: crypto.randomUUID(), createdAt: Date.now() });
-    setTo("");
+    setTo(""); // ready for the next kudo at once
     setText("");
+    await database.put({ ...draft, _id: crypto.randomUUID(), createdAt: Date.now() });
   }
 
   return (

package/llms/physics.md

@@ -333,9 +333,10 @@ export default function App() {
   async function keep() {
     if (!canMake) return;
     const doc = { _id: crypto.randomUUID(), type: "level", name: name || "My run", pieces, seed: 7, creatorHandle: me.userHandle, updatedAt: Date.now() };
-    await database.put(doc);
-    setName("");
-    setActiveId(doc._id);
+    setName(""); // ready for the next name at once
+    const { ok } = await database.put(doc);
+    if (ok) setActiveId(doc._id);
+    else setName((now) => now || name);
   }
 
   return (

package/llms/pouf-blog.md

@@ -107,11 +107,11 @@ export default function App() {
     if (Object.keys(next).length > 0) return;
     setPublishing(true);
     try {
-      await database.put({ type: "post", title: draft.title.trim(), category: draft.category, body: draft.body.trim(), authorHandle: me?.userHandle, createdAt: Date.now() });
-      // Cleared only once the write lands; the filter resets so the new post is in view.
+      // The form is ready at once; the filter resets so the new post is in view.
       setDraft(EMPTY_DRAFT);
       setWriting(false);
       pick("all");
+      await database.put({ type: "post", title: draft.title.trim(), category: draft.category, body: draft.body.trim(), authorHandle: me?.userHandle, createdAt: Date.now() });
       toast.success("Post published");
     } finally {
       setPublishing(false);

package/llms/pouf-calendar.md

@@ -144,6 +144,8 @@ export default function App() {
     if (Object.keys(next).length > 0) return;
     setSaving(true);
     try {
+      setDraft(EMPTY_DRAFT);
+      setAdding(false);
       await database.put({
         type: "event",
         date: selected,
@@ -153,9 +155,6 @@ export default function App() {
         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);

package/llms/pouf-chat.md

@@ -41,9 +41,10 @@ function Thread({ room, onBack }) {
     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.
+    // The field is ready for the next one at once; a save that does not land hands the words back.
     setDraft("");
+    const { ok } = await database.put({ type: "message", roomId: room._id, text, authorHandle: me?.userHandle, createdAt: Date.now() });
+    if (!ok) setDraft((now) => now || text);
   }
 
   return (
@@ -128,9 +129,10 @@ export default function App() {
       return;
     }
     setError(undefined);
-    const { id } = await database.put({ type: "room", name: text, authorHandle: me?.userHandle, createdAt: Date.now() });
-    setName("");
-    setActiveId(id);
+    setName(""); // ready for the next room name at once
+    const { id, ok } = await database.put({ type: "room", name: text, authorHandle: me?.userHandle, createdAt: Date.now() });
+    if (ok) setActiveId(id);
+    else setName((now) => now || text);
   }
 
   function latest(roomId) {

package/llms/pouf-contact.md

@@ -63,7 +63,9 @@ export default function App() {
     }
     setSending(true);
     try {
-      await database.put({
+      // The form is fresh for whoever writes next; the thank-you waits for the receipt.
+      setForm(BLANK);
+      const { ok } = await database.put({
         ...draft,
         name: form.name.trim(),
         email: form.email.trim(),
@@ -71,9 +73,8 @@ export default function App() {
         message: form.message.trim(),
         createdAt: Date.now(),
       });
-      setSent({ name: form.name.trim(), email: form.email.trim() });
-      // Cleared only once the write lands, so a local failure keeps every word.
-      setForm(BLANK);
+      if (ok) setSent({ name: form.name.trim(), email: form.email.trim() });
+      else setForm((now) => (now === BLANK ? form : now));
     } finally {
       setSending(false);
     }

package/llms/pouf-course.md

@@ -161,9 +161,9 @@ export default function App() {
     };
     setErrors(found);
     if (found.title || found.minutes) return;
-    await database.put({ type: "lesson", title: form.title.trim(), kind: form.kind, minutes, authorHandle: me?.userHandle, createdAt: Date.now() });
     setForm({ title: "", kind: "Lesson", minutes: "10" });
     setAdding(false);
+    await database.put({ type: "lesson", title: form.title.trim(), kind: form.kind, minutes, authorHandle: me?.userHandle, createdAt: Date.now() });
     toast.success("Lesson added");
   }
 

package/llms/pouf-crm.md

@@ -88,9 +88,10 @@ function CustomerView({ customer, notes, database, can, me, onBack }) {
       return;
     }
     setError(undefined);
-    await database.put({ type: "note", customerId: customer._id, text, authorHandle: me?.userHandle, createdAt: Date.now() });
-    // Cleared only once the write lands, so a local failure keeps the typed words.
+    // The field is ready for the next one at once; a save that does not land hands the words back.
     setDraft("");
+    const { ok } = await database.put({ type: "note", customerId: customer._id, text, authorHandle: me?.userHandle, createdAt: Date.now() });
+    if (!ok) setDraft((now) => now || text);
   }
 
   return (
@@ -201,6 +202,8 @@ export default function App() {
     };
     setErrors(found);
     if (found.name || found.value) return;
+    setForm({ name: "", company: "", email: "", value: "", stage: "lead" });
+    setAdding(false);
     await database.put({
       type: "customer",
       name: form.name.trim(),
@@ -211,8 +214,6 @@ export default function App() {
       authorHandle: me?.userHandle,
       createdAt: Date.now(),
     });
-    setForm({ name: "", company: "", email: "", value: "", stage: "lead" });
-    setAdding(false);
     toast.success("Customer added");
   }
 

package/llms/pouf-dashboard.md

@@ -113,13 +113,18 @@ export default function App() {
     setErrors(next);
     if (Object.keys(next).length > 0) return;
     setSaving(true);
+    // The fields are ready for the next sale at once; a save that does not land hands them back.
+    setItem("");
+    setAmount("");
+    setState("paid");
     try {
-      await database.put({ type: "sale", item: item.trim(), amount: value, state, authorHandle: me?.userHandle, createdAt: Date.now() });
-      // Cleared only once the write lands, so a local failure keeps what was typed.
-      setItem("");
-      setAmount("");
-      setState("paid");
-      toast.success("Sale recorded");
+      const { ok } = await database.put({ type: "sale", item: item.trim(), amount: value, state, authorHandle: me?.userHandle, createdAt: Date.now() });
+      if (ok) toast.success("Sale recorded");
+      else {
+        setItem((now) => now || item);
+        setAmount((now) => now || amount);
+        setState((now) => (now === "paid" ? state : now));
+      }
     } finally {
       setSaving(false);
     }

package/llms/pouf-editorial.md

@@ -141,6 +141,9 @@ export default function App() {
     const found = { title: form.title.trim() === "" ? "Give the story a working title." : undefined };
     setErrors(found);
     if (found.title) return;
+    setForm({ title: "", section: "", due: "" });
+    setPitching(false);
+    setStage("draft");
     await database.put({
       type: "story",
       title: form.title.trim(),
@@ -150,9 +153,6 @@ export default function App() {
       authorHandle: me?.userHandle,
       createdAt: Date.now(),
     });
-    setForm({ title: "", section: "", due: "" });
-    setPitching(false);
-    setStage("draft");
     toast.success("Story pitched");
   }
 

package/llms/pouf-event.md

@@ -97,6 +97,8 @@ export default function App() {
       return;
     }
     setNameError(undefined);
+    setForm({ name: "", group: "", ticket: "General" });
+    setAdding(false);
     await database.put({
       type: "guest",
       name: form.name.trim(),
@@ -106,8 +108,6 @@ export default function App() {
       authorHandle: me?.userHandle,
       createdAt: Date.now(),
     });
-    setForm({ name: "", group: "", ticket: "General" });
-    setAdding(false);
     toast.success("Guest added");
   }
 

package/llms/pouf-feed.md

@@ -42,8 +42,9 @@ function Post({ post, likes, comments, database, can, me }) {
     e.preventDefault();
     const text = reply.trim();
     if (text === "") return;
-    await database.put({ type: "comment", postId: post._id, text, authorHandle: me?.userHandle, createdAt: Date.now() });
-    setReply("");
+    setReply(""); // ready for the next reply at once
+    const { ok } = await database.put({ type: "comment", postId: post._id, text, authorHandle: me?.userHandle, createdAt: Date.now() });
+    if (!ok) setReply((now) => now || text);
   }
 
   async function remove() {
@@ -162,9 +163,10 @@ export default function App() {
       return;
     }
     setError(undefined);
-    await database.put({ type: "post", text, authorHandle: me?.userHandle, createdAt: Date.now() });
-    // Cleared only once the write lands, so a local failure keeps the typed words.
+    // The field is ready for the next one at once; a save that does not land hands the words back.
     setDraft("");
+    const { ok } = await database.put({ type: "post", text, authorHandle: me?.userHandle, createdAt: Date.now() });
+    if (!ok) setDraft((now) => now || text);
   }
 
   return (

package/llms/pouf-inbox.md

@@ -54,9 +54,13 @@ function Reader({ note, replies, database, can, me, onBack }) {
       return;
     }
     setError(undefined);
-    await database.put({ type: "reply", noteId: note._id, text, authorHandle: me?.userHandle, createdAt: Date.now() });
-    // Cleared only once the write lands, so a local failure keeps the typed words.
+    // The field is ready for the next one at once; a save that does not land hands the words back.
     setDraft("");
+    const { ok } = await database.put({ type: "reply", noteId: note._id, text, authorHandle: me?.userHandle, createdAt: Date.now() });
+    if (!ok) {
+      setDraft((now) => now || text);
+      return;
+    }
     toast.success("Reply sent");
   }
 
@@ -194,6 +198,9 @@ export default function App() {
     };
     setErrors(found);
     if (found.subject || found.body) return;
+    setSubject("");
+    setBody("");
+    setComposing(false);
     await database.put({
       type: "note",
       subject: subject.trim(),
@@ -203,9 +210,6 @@ export default function App() {
       authorHandle: me?.userHandle,
       createdAt: Date.now(),
     });
-    setSubject("");
-    setBody("");
-    setComposing(false);
     toast.success("Note sent");
   }
 

package/llms/pouf-inventory.md

@@ -183,6 +183,11 @@ export default function App() {
     };
     setErrors(found);
     if (Object.values(found).some(Boolean)) return;
+    setForm(EMPTY_FORM);
+    setAdding(false);
+    // Clear the search and filter so the new item is on screen, then open it.
+    setQuery("");
+    setFilter("all");
     const { id } = await database.put({
       type: "item",
       name: form.name.trim(),
@@ -193,11 +198,6 @@ export default function App() {
       authorHandle: me?.userHandle,
       createdAt: Date.now(),
     });
-    setForm(EMPTY_FORM);
-    setAdding(false);
-    // Clear the search and filter so the new item is on screen, then open it.
-    setQuery("");
-    setFilter("all");
     setSelectedId(id);
     toast.success("Item added");
   }

package/llms/pouf-kanban.md

@@ -64,9 +64,10 @@ export default function App() {
       return;
     }
     setError(undefined);
-    await database.put({ type: "card", title, column: "todo", authorHandle: me?.userHandle, createdAt: Date.now() });
-    // Cleared only once the write lands, so a local failure keeps the typed words.
+    // The field is ready for the next one at once; a save that does not land hands the words back.
     setDraft("");
+    const { ok } = await database.put({ type: "card", title, column: "todo", authorHandle: me?.userHandle, createdAt: Date.now() });
+    if (!ok) setDraft((now) => now || title);
   }
 
   function moveCard(card, column) {

package/llms/pouf-settings.md

@@ -63,9 +63,9 @@ function SettingsForm({ saved, database, can, me }) {
     setSaving(true);
     try {
       const written = { ...saved, ...draft, ...form, name: form.name.trim(), updatedAt: Date.now() };
-      await database.put(written);
-      // Match the form to what was stored (trimmed), so it reads clean after saving.
+      // Match the form to what is stored (trimmed), so it reads clean the moment they save.
       setForm(pick(written));
+      await database.put(written);
       toast.success("Settings saved");
     } finally {
       setSaving(false);

package/llms/pouf-support.md

@@ -76,12 +76,16 @@ function TicketView({ ticket, replies, database, can, me, onBack }) {
       return;
     }
     setError(undefined);
-    await database.put({ type: "reply", ticketId: ticket._id, text, authorHandle: me?.userHandle, createdAt: Date.now() });
+    // The field is ready for the next one at once; a save that does not land hands the words back.
+    setDraft("");
+    const { ok } = await database.put({ type: "reply", ticketId: ticket._id, text, authorHandle: me?.userHandle, createdAt: Date.now() });
+    if (!ok) {
+      setDraft((now) => now || text);
+      return;
+    }
     // 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");
   }
 
@@ -203,6 +207,10 @@ export default function App() {
     };
     setErrors(found);
     if (found.subject || found.body) return;
+    setSubject("");
+    setBody("");
+    setUrgent(false);
+    setLogging(false);
     await database.put({
       type: "ticket",
       subject: subject.trim(),
@@ -212,10 +220,6 @@ export default function App() {
       authorHandle: me?.userHandle,
       createdAt: Date.now(),
     });
-    setSubject("");
-    setBody("");
-    setUrgent(false);
-    setLogging(false);
     toast.success("Ticket logged");
   }
 

package/llms/pouf-todo.md

@@ -61,9 +61,10 @@ export default function App() {
       return;
     }
     setError(undefined);
-    await database.put({ type: "task", text, done: false, createdAt: Date.now(), authorHandle: me?.userHandle });
-    // Cleared only once the write lands, so a local failure keeps the typed words.
+    // The field is ready for the next one at once; a save that does not land hands the words back.
     setDraft("");
+    const { ok } = await database.put({ type: "task", text, done: false, createdAt: Date.now(), authorHandle: me?.userHandle });
+    if (!ok) setDraft((now) => now || text);
   }
 
   function setDone(task, checked) {

package/llms/strudel.md

@@ -268,8 +268,9 @@ export default function App() {
   const verdict = can.create(draft);
 
   async function keep() {
-    await database.put({ ...draft, createdAt: Date.now() });
-    setName("");
+    setName(""); // ready for the next name at once
+    const { ok } = await database.put({ ...draft, createdAt: Date.now() });
+    if (!ok) setName((now) => now || name);
   }
 
   return (

package/llms/use-vibe.md

@@ -62,8 +62,9 @@ function PromptBar({ database }) {
     <form
       onSubmit={async (e) => {
         e.preventDefault();
-        await database.put({ type: "tile", authorHandle: me?.userHandle, text });
-        setText("");
+        setText(""); // ready for the next tile at once
+        const { ok } = await database.put({ type: "tile", authorHandle: me?.userHandle, text });
+        if (!ok) setText((now) => now || text);
       }}
     >
       {/* no current-user pill — identity + sign-in live in the Vibes Switch (the logo) */}

package/llms/use-viewer.md

@@ -200,12 +200,13 @@ Also add the `post` handler before `if (isViewerPending)`:
 =======
   async function post() {
     if (!body.trim()) return;
-    await database.put({
+    setBody(""); // ready for the next post at once
+    const { ok } = await database.put({
       body: body.trim(),
       createdAt: Date.now(),
       authorHandle: me?.userHandle,
     });
-    setBody("");
+    if (!ok) setBody((now) => now || body);
   }
 
   if (isViewerPending) return null;

package/llms/worlds.md

@@ -451,8 +451,9 @@ export default function App() {
   async function keep() {
     const world = worldRef.current;
     if (!world || !canKeep) return;
-    await database.put({ ...draft, _id: crypto.randomUUID(), tick: world.tick, createdAt: Date.now() });
-    setName("");
+    setName(""); // ready for the next name at once
+    const { ok } = await database.put({ ...draft, _id: crypto.randomUUID(), tick: world.tick, createdAt: Date.now() });
+    if (!ok) setName((now) => now || name);
   }
 
   const dial = (key, label, max) => (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/prompts",
-  "version": "14.3.124",
+  "version": "14.3.126",
   "type": "module",
   "main": "./index.js",
   "exports": {
@@ -39,10 +39,10 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@adviser/cement": "~0.5.34",
-    "@vibes.diy/api-types": "14.3.124",
-    "@vibes.diy/call-ai-v2": "14.3.124",
-    "@vibes.diy/identity": "14.3.124",
-    "@vibes.diy/use-vibes-types": "14.3.124",
+    "@vibes.diy/api-types": "14.3.126",
+    "@vibes.diy/call-ai-v2": "14.3.126",
+    "@vibes.diy/identity": "14.3.126",
+    "@vibes.diy/use-vibes-types": "14.3.126",
     "arktype": "~2.2.6",
     "json-schema-faker": "~0.6.3"
   },

package/system-prompt-initial-oneshot.md

@@ -37,6 +37,7 @@ You are an AI assistant tasked with creating React components. You should create
 - Always show loading states during genuinely-network async operations (callAI, fetch): use a useState boolean (e.g. `isLoading`), set it true before the call and false in .finally(). While loading: (1) pass `loading={isLoading}` to the trigger `Button`, which shows the package's own spinner and blocks a second click, (2) optionally show a short status text like 'Loading...' near the button. Never leave the user clicking a button with no visual feedback. Pattern: `setIsLoading(true); try { await callAI(...); } finally { setIsLoading(false); }`
 - Database reads are not a network operation — never show a loading state or spinner for them. `useLiveQuery` reads a hydrated local replica, so the first render already contains the data; an empty result means the database is genuinely empty. Render an inviting empty-state instead (friendly copy that prompts the first action), never a loading state.
 - Give instant feedback for Fireproof writes too, not just for callAI/fetch. A `database.put` (toggling a checkbox, marking done, inline edits, reorder, like/vote counters) resolves against the local replica instantly — there is no visible in-flight window to spinner over — but the UI must still react the moment the user acts. Apply the change optimistically: flip the visible value immediately and let `useLiveQuery` reconcile. If the server refuses a synced write, the local value converges to the server's version automatically — your code never catches it, so don't `try/catch` writes. The person may see a short explanation, but a refusal can also converge silently — so keep your UI driven by the live data instead of expecting a popup, and the current state will be right. Transport and offline failures are handled by the built-in queue, so don't hand-roll retry either. Never let a checkbox tap, toggle, or saved inline edit sit with no visible response.
+- A form that adds one record after another empties its field as the person submits, before the write: capture what they typed, clear the field, then save the captured value — `const typed = name; setName(""); const { ok } = await database.put({ type: "habit", name: typed }); if (!ok) setName((now) => now || typed);`. The field is ready for the next entry the moment they press Add, and words they type while the save settles stay theirs.
 - For file uploads use drag and drop and store using the `doc._files` API; for AI image generation use `<ImgGen prompt="..." />`
 - Access control is decided by the runtime, not your code. Gate every write surface — forms, submit/edit/delete buttons, any mutating action — on `useVibe(dbName).can`. `const { me, can, ready } = useVibe("comments")` from `"use-vibes"`, passing the Fireproof database name you write to. Show the editor when `can.create(draft).ok` (or `can.edit(doc)` / `can.delete(doc)`); the verdict has three states — while it is `pending` (or `ready` is false) hold the surface in a quiet checking state, and on a resolved denial write the sign-in or join copy in your app's own words, letting `reason` inform the sentence you write. `can.*` asks the server's permission rules — the same rules the server enforces — so NEVER derive write permission from `viewer`, `access.hasRole()`/`access.hasChannel()`, or document fields. `useViewer()` is identity/display only: `const { ViewerTag } = useViewer()` renders **other** people (`<ViewerTag userHandle={...} />` for comment authors, rosters, "added by" labels). The current viewer's own pill is system chrome in the Vibes Switch (the panel the logo opens) — don't add a header pill for the current user. But ASKING an anonymous visitor to sign in is the app's job: call `useViewer().requestLogin()` from your own button, gated on `!isViewerPending`, at the moment the visitor has made something worth keeping — never a sentence telling them to find the logo, and never a wall in front of an app that already works for them. Owner-only management UI is gated on `can.*` too (the runtime knows the owner). This applies to every app — the runtime decides sharing, not the prompt. Writes can still be rejected server-side even when `can.*` allows, so keep the optimistic-write + rollback handling. See use-vibe docs.
 - Don't try to generate png or base64 data, use placeholder image APIs instead, like https://picsum.photos/400 where 400 is the square size
@@ -158,10 +159,11 @@ function Studio() {
   const startLoom = async (event) => {
     event.preventDefault();
     if (!ready || !newLoom.name || !can.create(newLoom).ok) return;
-    await database.put(newLoom); // the exact value the control checked
-    setLoomName("");
-    setPickedPlace(newLoom._id);
-    setLoomId("loom-" + crypto.randomUUID());
+    setLoomName(""); // ready for the next name at once
+    setLoomId("loom-" + crypto.randomUUID()); // and the next loom gets an id of its own
+    const { ok } = await database.put(newLoom); // the exact value the control checked
+    if (ok) setPickedPlace(newLoom._id);
+    else setLoomName((now) => now || newLoom.name);
   };
   // Hooks stay above this hold. Identity resolves before sign-in copy or controls.
   if (!ready) return <p role="status">Checking studio access…</p>;
@@ -197,8 +199,9 @@ function PlaceContents({ place }) {
   const add = async (event) => {
     event.preventDefault();
     if (!ready || !draft.title || !can.create(draft).ok) return;
-    await database.put(draft); // the exact value the control checked
-    setTitle("");
+    setTitle(""); // ready for the next weaving at once
+    const { ok } = await database.put(draft); // the exact value the control checked
+    if (!ok) setTitle((now) => now || draft.title);
   };
   return <section>
     {place.loom ? <h1>{place.loom.name}</h1> : <StudioName studioHandle={place.key.studioHandle} />}

package/system-prompt-initial.md

@@ -37,6 +37,7 @@ You are an AI assistant tasked with creating React components. You should create
 - Always show loading states during genuinely-network async operations (callAI, fetch): use a useState boolean (e.g. `isLoading`), set it true before the call and false in .finally(). While loading: (1) pass `loading={isLoading}` to the trigger `Button`, which shows the package's own spinner and blocks a second click, (2) optionally show a short status text like 'Loading...' near the button. Never leave the user clicking a button with no visual feedback. Pattern: `setIsLoading(true); try { await callAI(...); } finally { setIsLoading(false); }`
 - Database reads are not a network operation — never show a loading state or spinner for them. `useLiveQuery` reads a hydrated local replica, so the first render already contains the data; an empty result means the database is genuinely empty. Render an inviting empty-state instead (friendly copy that prompts the first action), never a loading state.
 - Give instant feedback for Fireproof writes too, not just for callAI/fetch. A `database.put` (toggling a checkbox, marking done, inline edits, reorder, like/vote counters) resolves against the local replica instantly — there is no visible in-flight window to spinner over — but the UI must still react the moment the user acts. Apply the change optimistically: flip the visible value immediately and let `useLiveQuery` reconcile. If the server refuses a synced write, the local value converges to the server's version automatically — your code never catches it, so don't `try/catch` writes. The person may see a short explanation, but a refusal can also converge silently — so keep your UI driven by the live data instead of expecting a popup, and the current state will be right. Transport and offline failures are handled by the built-in queue, so don't hand-roll retry either. Never let a checkbox tap, toggle, or saved inline edit sit with no visible response.
+- A form that adds one record after another empties its field as the person submits, before the write: capture what they typed, clear the field, then save the captured value — `const typed = name; setName(""); const { ok } = await database.put({ type: "habit", name: typed }); if (!ok) setName((now) => now || typed);`. The field is ready for the next entry the moment they press Add, and words they type while the save settles stay theirs.
 - For file uploads use drag and drop and store using the `doc._files` API; for AI image generation use `<ImgGen prompt="..." />`
 - Access control is decided by the runtime, not your code. Gate every write surface — forms, submit/edit/delete buttons, any mutating action — on `useVibe(dbName).can`. `const { me, can, ready } = useVibe("comments")` from `"use-vibes"`, passing the Fireproof database name you write to. Show the editor when `can.create(draft).ok` (or `can.edit(doc)` / `can.delete(doc)`); the verdict has three states — while it is `pending` (or `ready` is false) hold the surface in a quiet checking state, and on a resolved denial write the sign-in or join copy in your app's own words, letting `reason` inform the sentence you write. `can.*` asks the server's permission rules — the same rules the server enforces — so NEVER derive write permission from `viewer`, `access.hasRole()`/`access.hasChannel()`, or document fields. `useViewer()` is identity/display only: `const { ViewerTag } = useViewer()` renders **other** people (`<ViewerTag userHandle={...} />` for comment authors, rosters, "added by" labels). The current viewer's own pill is system chrome in the Vibes Switch (the panel the logo opens) — don't add a header pill for the current user. But ASKING an anonymous visitor to sign in is the app's job: call `useViewer().requestLogin()` from your own button, gated on `!isViewerPending`, at the moment the visitor has made something worth keeping — never a sentence telling them to find the logo, and never a wall in front of an app that already works for them. Owner-only management UI is gated on `can.*` too (the runtime knows the owner). This applies to every app — the runtime decides sharing, not the prompt. Writes can still be rejected server-side even when `can.*` allows, so keep the optimistic-write + rollback handling. See use-vibe docs.
 - Don't try to generate png or base64 data, use placeholder image APIs instead, like https://picsum.photos/400 where 400 is the square size
@@ -162,10 +163,11 @@ function Studio() {
   const startLoom = async (event) => {
     event.preventDefault();
     if (!ready || !newLoom.name || !can.create(newLoom).ok) return;
-    await database.put(newLoom); // the exact value the control checked
-    setLoomName("");
-    setPickedPlace(newLoom._id);
-    setLoomId("loom-" + crypto.randomUUID());
+    setLoomName(""); // ready for the next name at once
+    setLoomId("loom-" + crypto.randomUUID()); // and the next loom gets an id of its own
+    const { ok } = await database.put(newLoom); // the exact value the control checked
+    if (ok) setPickedPlace(newLoom._id);
+    else setLoomName((now) => now || newLoom.name);
   };
   // Hooks stay above this hold. Identity resolves before sign-in copy or controls.
   if (!ready) return <p role="status">Checking studio access…</p>;
@@ -201,8 +203,9 @@ function PlaceContents({ place }) {
   const add = async (event) => {
     event.preventDefault();
     if (!ready || !draft.title || !can.create(draft).ok) return;
-    await database.put(draft); // the exact value the control checked
-    setTitle("");
+    setTitle(""); // ready for the next weaving at once
+    const { ok } = await database.put(draft); // the exact value the control checked
+    if (!ok) setTitle((now) => now || draft.title);
   };
   return <section>
     {place.loom ? <h1>{place.loom.name}</h1> : <StudioName studioHandle={place.key.studioHandle} />}

package/system-prompt.md

@@ -37,6 +37,7 @@ You are an AI assistant tasked with creating React components. You should create
 - Always show loading states during genuinely-network async operations (callAI, fetch): use a useState boolean (e.g. `isLoading`), set it true before the call and false in .finally(). While loading: (1) pass `loading={isLoading}` to the trigger `Button`, which shows the package's own spinner and blocks a second click, (2) optionally show a short status text like 'Loading...' near the button. Never leave the user clicking a button with no visual feedback. Pattern: `setIsLoading(true); try { await callAI(...); } finally { setIsLoading(false); }`
 - Database reads are not a network operation — never show a loading state or spinner for them. `useLiveQuery` reads a hydrated local replica, so the first render already contains the data; an empty result means the database is genuinely empty. Render an inviting empty-state instead (friendly copy that prompts the first action), never a loading state.
 - Give instant feedback for Fireproof writes too, not just for callAI/fetch. A `database.put` (toggling a checkbox, marking done, inline edits, reorder, like/vote counters) resolves against the local replica instantly, so make the UI react the moment the person acts: flip the visible value immediately and let `useLiveQuery` reconcile. The server has the final word — a refused write converges to the server's version on its own, and the platform tells the person, in `access.js`'s own `forbidden("…")` words when it gives some — so write plainly, keep the UI reactive to the store (`useLiveQuery`/`useDocument`) so the converged state shows the truth, and gate write surfaces up front with `useVibe(dbName).can`. A resolved `put` means saved on this device; for feedback beside a control, follow its receipt, and every `useLiveQuery` row carries `doc._synced.status`: `const { synced } = await database.put({ ...task, done: !task.done }); synced.on((s) => setNote(s.status === "refused" && s.message ? s.message : ""));`. The built-in queue retries transport and offline failures for you. Every checkbox tap, toggle, and saved inline edit shows a visible response.
+- A form that adds one record after another empties its field as the person submits, before the write: capture what they typed, clear the field, then save the captured value — `const typed = name; setName(""); const { ok } = await database.put({ type: "habit", name: typed }); if (!ok) setName((now) => now || typed);`. The field is ready for the next entry the moment they press Add, and words they type while the save settles stay theirs.
 - For file uploads use drag and drop and store using the `doc._files` API; for AI image generation use `<ImgGen prompt="..." />`
 - Access control is decided by the runtime, not your code. Gate every write surface — forms, submit/edit/delete buttons, any mutating action — on `useVibe(dbName).can`. `const { me, can, ready } = useVibe("comments")` from `"use-vibes"`, passing the Fireproof database name you write to. Show the editor when `can.create(draft).ok` (or `can.edit(doc)` / `can.delete(doc)`); the verdict has three states — while it is `pending` (or `ready` is false) hold the surface in a quiet checking state, and on a resolved denial write the sign-in or join copy in your app's own words, letting `reason` inform the sentence you write. `can.*` runs the app's own `access.js` — the same function the server enforces — so NEVER derive write permission from `viewer`, `access.hasRole()`/`access.hasChannel()`, or document fields. `useViewer()` is identity/display only: `const { ViewerTag } = useViewer()` renders **other** people (`<ViewerTag userHandle={...} />` for comment authors, rosters, "added by" labels). The current viewer's own pill is system chrome in the Vibes Switch (the panel the logo opens) — don't add a header pill for the current user. But ASKING an anonymous visitor to sign in is the app's job: call `useViewer().requestLogin()` from your own button, gated on `!isViewerPending`, at the moment the visitor has made something worth keeping — never a sentence telling them to find the logo, and never a wall in front of an app that already works for them. Owner-only management UI is gated on `can.*` too (the access.js encodes the owner rule). This applies to every app — the runtime decides sharing, not the prompt. `can.*` is a hint: the server checks each change against the saved record, so a write `can.*` allowed can still be refused — it converges on its own and the platform says so. See use-vibe docs.
 - Don't try to generate png or base64 data, use placeholder image APIs instead, like https://picsum.photos/400 where 400 is the square size