@vibes.diy/prompts 14.3.15 → 14.3.16

package/llms/image-gen.initial.md

@@ -112,7 +112,34 @@ When an item's picture is intrinsic to what it is — a card in a deck, a creatu
 />
 ```
 
-Do **not** hide first generation behind an "Illustrate" / "Generate image" button — a button leaves every item blank until tapped, which reads as "the app has no pictures." Reserve buttons and `showControls` for *regeneration* of an image that already exists. (For incidental or user-optional images — an avatar upload, a one-off hero graphic — an explicit action is still fine; this rule is about items whose identity includes a picture.)
+Let the first picture arrive with the item itself, so every card opens already illustrated and the app reads as a picture app from the first glance. For these items, buttons and `showControls` are for *regenerating* an image that already exists. Pictures that are extras rather than identity — an avatar upload, a one-off hero graphic, and the text-first snippets below — come from an explicit action the person chooses.
+
+## Pictures on Request for Text-First Snippets
+
+When each item's substance is its words — a generated joke, a short verse, a pun, a one-liner — give every snippet its own picture button and save the picture on that snippet's record. Tapping the button shows a "Making a picture…" state until the image opens in its place. ImgGen keeps the picture under the snippet's own `_id` in `database`, so it is there after a reload, viewing it again costs nothing, and a snippet with a saved picture shows it straight away. Keep the snippet's words in a field like `text`; a `prompt` field on the record is ImgGen's cue to draw right away.
+
+```jsx
+import { ImgGen, useImgGen } from "use-vibes";
+
+function PunCard({ pun, database }) {
+  const [wanted, setWanted] = React.useState(false);
+  const { document: saved } = useImgGen({ _id: pun._id, database });
+  const hasPicture = Object.keys(saved?._files ?? {}).length > 0;
+  return (
+    <li>
+      <p>{pun.text}</p>
+      {wanted || hasPicture ? (
+        <figure>
+          <ImgGen _id={pun._id} database={database} prompt={`A cheerful cartoon of this pun: ${pun.text}`} />
+          {hasPicture ? null : <figcaption>Making a picture…</figcaption>}
+        </figure>
+      ) : (
+        <button onClick={() => setWanted(true)}>Picture this</button>
+      )}
+    </li>
+  );
+}
+```
 
 ## Gallery Pattern
 

package/llms/image-gen.md

@@ -112,7 +112,34 @@ When an item's picture is intrinsic to what it is — a card in a deck, a creatu
 />
 ```
 
-Do **not** hide first generation behind an "Illustrate" / "Generate image" button — a button leaves every item blank until tapped, which reads as "the app has no pictures." Reserve buttons and `showControls` for *regeneration* of an image that already exists. (For incidental or user-optional images — an avatar upload, a one-off hero graphic — an explicit action is still fine; this rule is about items whose identity includes a picture.)
+Let the first picture arrive with the item itself, so every card opens already illustrated and the app reads as a picture app from the first glance. For these items, buttons and `showControls` are for *regenerating* an image that already exists. Pictures that are extras rather than identity — an avatar upload, a one-off hero graphic, and the text-first snippets below — come from an explicit action the person chooses.
+
+## Pictures on Request for Text-First Snippets
+
+When each item's substance is its words — a generated joke, a short verse, a pun, a one-liner — give every snippet its own picture button and save the picture on that snippet's record. Tapping the button shows a "Making a picture…" state until the image opens in its place. ImgGen keeps the picture under the snippet's own `_id` in `database`, so it is there after a reload, viewing it again costs nothing, and a snippet with a saved picture shows it straight away. Keep the snippet's words in a field like `text`; a `prompt` field on the record is ImgGen's cue to draw right away.
+
+```jsx
+import { ImgGen, useImgGen } from "use-vibes";
+
+function PunCard({ pun, database }) {
+  const [wanted, setWanted] = React.useState(false);
+  const { document: saved } = useImgGen({ _id: pun._id, database });
+  const hasPicture = Object.keys(saved?._files ?? {}).length > 0;
+  return (
+    <li>
+      <p>{pun.text}</p>
+      {wanted || hasPicture ? (
+        <figure>
+          <ImgGen _id={pun._id} database={database} prompt={`A cheerful cartoon of this pun: ${pun.text}`} />
+          {hasPicture ? null : <figcaption>Making a picture…</figcaption>}
+        </figure>
+      ) : (
+        <button onClick={() => setWanted(true)}>Picture this</button>
+      )}
+    </li>
+  );
+}
+```
 
 ## Gallery Pattern
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/prompts",
-  "version": "14.3.15",
+  "version": "14.3.16",
   "type": "module",
   "main": "./index.js",
   "exports": {
@@ -37,9 +37,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@adviser/cement": "~0.5.34",
-    "@vibes.diy/call-ai-v2": "14.3.15",
-    "@vibes.diy/identity": "14.3.15",
-    "@vibes.diy/use-vibes-types": "14.3.15",
+    "@vibes.diy/call-ai-v2": "14.3.16",
+    "@vibes.diy/identity": "14.3.16",
+    "@vibes.diy/use-vibes-types": "14.3.16",
     "arktype": "~2.2.3",
     "json-schema-faker": "~0.6.3"
   },