@vibes.diy/prompts 0.20.3-dev-push → 0.20.5-dev-cli-stable-entry

package/build-schema-prompt.d.ts

@@ -0,0 +1 @@
+export declare function buildSchemaSystemMessage(schema: object): Promise<string>;

package/build-schema-prompt.js

@@ -0,0 +1,18 @@
+import { generate } from "json-schema-faker";
+async function buildExample(schema) {
+    const result = await generate(schema, { optionalsProbability: 1 });
+    if (!result) {
+        return {};
+    }
+    return result;
+}
+export async function buildSchemaSystemMessage(schema) {
+    const example = await buildExample(schema);
+    return `Return ONLY a JSON object inside a \`\`\`json code fence. Conform to this schema: ${JSON.stringify(schema)}
+
+Example of expected output:
+\`\`\`json
+${JSON.stringify(example, null, 2)}
+\`\`\``;
+}
+//# sourceMappingURL=build-schema-prompt.js.map

package/build-schema-prompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-schema-prompt.js","sourceRoot":"","sources":["../jsr/build-schema-prompt.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,QAAQ,EAAmB,MAAM,mBAAmB,CAAC;AAE9D,KAAK,UAAU,YAAY,CAAC,MAAkB;IAC5C,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,MAAM,EAAE,EAAE,oBAAoB,EAAE,CAAC,EAAE,CAAC,CAAC;IACnE,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,wBAAwB,CAAC,MAAc;IAC3D,MAAM,OAAO,GAAG,MAAM,YAAY,CAAC,MAAoB,CAAC,CAAC;IACzD,OAAO,qFAAqF,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;;;;EAIlH,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;OAC3B,CAAC;AACR,CAAC"}

package/index.d.ts

@@ -7,3 +7,4 @@ export * from "./style-prompts.js";
 export { parseContent } from "./segment-parser.js";
 export { resolveEffectiveModel } from "./prompts.js";
 export { normalizeComponentExports, transformImports, coreImportMap } from "./component-transforms.js";
+export { buildSchemaSystemMessage } from "./build-schema-prompt.js";

package/index.js

@@ -7,4 +7,5 @@ export * from "./style-prompts.js";
 export { parseContent } from "./segment-parser.js";
 export { resolveEffectiveModel } from "./prompts.js";
 export { normalizeComponentExports, transformImports, coreImportMap } from "./component-transforms.js";
+export { buildSchemaSystemMessage } from "./build-schema-prompt.js";
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../jsr/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../jsr/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAEvG,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC"}

package/llms/callai.js

@@ -1,7 +1,6 @@
 export const callaiConfig = {
     name: "callai",
     label: "callAI",
-    llmsTxtUrl: "https://use-fireproof.com/callai-llms.txt",
     module: "openrouter",
     description: "easy API for LLM requests with streaming support",
     importModule: "call-ai",

package/llms/callai.js.map

@@ -1 +1 @@
-{"version":3,"file":"callai.js","sourceRoot":"","sources":["../../jsr/llms/callai.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAc;IACrC,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,QAAQ;IACf,UAAU,EAAE,2CAA2C;IACvD,MAAM,EAAE,YAAY;IACpB,WAAW,EAAE,kDAAkD;IAC/D,YAAY,EAAE,SAAS;IACvB,UAAU,EAAE,QAAQ;CACrB,CAAC"}
+{"version":3,"file":"callai.js","sourceRoot":"","sources":["../../jsr/llms/callai.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAc;IACrC,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,YAAY;IACpB,WAAW,EAAE,kDAAkD;IAC/D,YAAY,EAAE,SAAS;IACvB,UAAU,EAAE,QAAQ;CACrB,CAAC"}

package/llms/callai.md

@@ -0,0 +1,76 @@
+# CallAI Helper Function
+
+The `callAI` function returns structured JSON from an AI model. It always requires a schema and returns a string that you `JSON.parse()`.
+
+## Basic Usage
+
+```javascript
+import { callAI } from "call-ai";
+
+const response = await callAI("Give me a todo list for learning React", {
+  schema: {
+    properties: {
+      todos: {
+        type: "array",
+        description: "List of actionable todo items",
+        items: { type: "string" },
+      },
+    },
+  },
+});
+const todoData = JSON.parse(response);
+console.log(todoData.todos);
+```
+
+## Items with properties
+
+```javascript
+const response = await callAI(
+  "Generate 4 items with label, status, priority (low, medium, high, critical), and notes. Return as structured JSON with these fields.",
+  {
+    schema: {
+      properties: {
+        items: {
+          type: "array",
+          items: {
+            type: "object",
+            properties: {
+              label: { type: "string", description: "Short name for the item" },
+              status: { type: "string", description: "Current status (active, done, blocked)" },
+              priority: { type: "string", description: "Priority level (low, medium, high, critical)" },
+              notes: { type: "string", description: "Additional context or details" },
+            },
+          },
+        },
+      },
+    },
+  }
+);
+const demoData = JSON.parse(response);
+console.log(demoData.items); // Array of item objects
+```
+
+### Schema Tips
+
+- Flat schemas perform better across all models. Avoid nesting deeper than 2 levels.
+- Use simple property names like `name`, `type`, `items`, `price`.
+- Keep array items simple (strings or flat objects).
+
+## Error Handling
+
+```javascript
+import { callAI } from "call-ai";
+
+try {
+  const response = await callAI("Generate some content", {
+    schema: {
+      properties: {
+        result: { type: "string" },
+      },
+    },
+  });
+  console.log(JSON.parse(response));
+} catch (error) {
+  console.error("API error:", error.message);
+}
+```

package/llms/d3.md

@@ -126,11 +126,22 @@ bars
 
 ## Complete Examples for Coding Agents
 
+### Code Structure for D3 + React Apps
+
+Structure your component in this order:
+
+1. **D3 helper functions** — visualization logic separate from React
+2. **Hooks and state** — useFireproof, useRef, useState
+3. **Effects** — useEffect to call D3 helpers when data changes
+4. **ClassNames object** — colors, dimensions right before JSX so they stay consistent
+5. **JSX return** — layout with refs for D3 to target
+
 ### 1. Simple Bar Chart
 
 ```js
 import * as d3 from "d3";
 
+// 1. Design tokens and dimensions
 const data = [4, 8, 15, 16, 23, 42];
 const width = 500;
 const height = 300;

package/llms/fireproof.js

@@ -1,7 +1,6 @@
 export const fireproofConfig = {
     name: "fireproof",
     label: "useFireproof",
-    llmsTxtUrl: "https://use-fireproof.com/llms-full.txt",
     module: "use-fireproof",
     description: "local-first database with encrypted live sync",
     importModule: "use-fireproof",

package/llms/fireproof.js.map

@@ -1 +1 @@
-{"version":3,"file":"fireproof.js","sourceRoot":"","sources":["../../jsr/llms/fireproof.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAc;IACxC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,cAAc;IACrB,UAAU,EAAE,yCAAyC;IACrD,MAAM,EAAE,eAAe;IACvB,WAAW,EAAE,+CAA+C;IAC5D,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,cAAc;CAC3B,CAAC"}
+{"version":3,"file":"fireproof.js","sourceRoot":"","sources":["../../jsr/llms/fireproof.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAc;IACxC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,cAAc;IACrB,MAAM,EAAE,eAAe;IACvB,WAAW,EAAE,+CAA+C;IAC5D,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,cAAc;CAC3B,CAAC"}

package/llms/{fireproof.txt → fireproof.md}

@@ -7,7 +7,7 @@ Fireproof is a lightweight embedded document database with encrypted live sync,
 - **Apps run anywhere:** Bundle UI, data, and logic in one file.
 - **Real-Time & Offline-First:** Automatic persistence and live queries, runs in the browser - no loading or error states.
 - **Unified API:** TypeScript works with Deno, Bun, Node.js, and the browser.
-- **React Hooks:** Leverage `useLiveQuery` and `useDocument` for live collaboration.
+- **React Hooks:** Leverage `useLiveQuery` and `useDocument` for live collaboration. Note: these are NOT top-level exports — they are returned by the `useFireproof()` hook. Always destructure from `const { useLiveQuery, useDocument, database } = useFireproof("db-name")`.
 
 Fireproof enforces cryptographic causal consistency and ledger integrity using hash history, providing git-like versioning with lightweight blockchain-style verification. Data is stored and replicated as content-addressed encrypted blobs, making it safe and easy to sync via commodity object storage providers.
 
@@ -55,25 +55,19 @@ const App = () => {
   return (
     <div>
       <form onSubmit={submit}>
-        <input
-          value={doc.text}
-          onChange={(e) => merge({ text: e.target.value })}
-          placeholder="New document"
-        />
+        <input value={doc.text} onChange={(e) => merge({ text: e.target.value })} placeholder="New document" />
         <button type="submit">Submit</button>
       </form>
 
       <h3>Recent Documents</h3>
       <ul>
         {docs.map((doc) => (
-          <li key={doc._id}>
-            {doc.text}
-          </li>
-        ))} 
+          <li key={doc._id}>{doc.text}</li>
+        ))}
       </ul>
     </div>
   );
-}
+};
 ```
 
 ### Editing Documents
@@ -87,18 +81,34 @@ const { doc, merge, submit, save, reset } = useDocument({ _id: "user-profile:abc
 ```
 
 The `useDocument` hook provides several methods:
+
 - `merge(updates)`: Update the document with new fields, without saving. Use this instead of keeping a `useState` for document data.
 - `submit(e)`: Handles form submission by preventing default, saving, and resetting
 - `save()`: Save the current document state
 - `reset()`: Reset to initial state
 
 For form-based creation flows, use `submit`:
+
 ```js
 <form onSubmit={submit}>
 ```
 
 When you call submit, the document is reset, so if you didn't provide an `_id` then you can use the form to create a stream of new documents as in the basic example above.
 
+### Updating Documents in Event Handlers
+
+To update an existing document from a click handler or callback, use `database.put()` directly. Never call `useDocument` inside an event handler — that violates React's Rules of Hooks.
+
+```js
+// ✅ Correct — use database.put() in handlers
+onClick={() => database.put({ ...doc, favorite: !doc.favorite })}
+
+// ❌ Wrong — never call hooks inside handlers
+function toggleFavorite(id) {
+  const { doc, save } = useDocument({ _id: id }) // BREAKS Rules of Hooks
+}
+```
+
 ### Query Data
 
 Data is queried by sorted indexes defined by the application. Sort by strings, numbers, or booleans, as well as arrays for grouping. Use numbers when possible for sorting continuous data.
@@ -110,16 +120,18 @@ Here are other common patterns:
 #### Query by Key Range
 
 Passing a string to `useLiveQuery` will index by that field. You can use the key argument to filter by a specific value:
+
 ```js
-const { docs } = useLiveQuery("agentName", { 
-  key: "agent-1"  // all docs where doc.agentName === "agent-1", sorted by _id
+const { docs } = useLiveQuery("agentName", {
+  key: "agent-1", // all docs where doc.agentName === "agent-1", sorted by _id
 });
 ```
 
 You can also query a range within a key:
+
 ```js
-const { docs } = useLiveQuery("agentRating", { 
-  range: [3, 5]
+const { docs } = useLiveQuery("agentRating", {
+  range: [3, 5],
 });
 ```
 
@@ -127,23 +139,21 @@ const { docs } = useLiveQuery("agentRating", {
 
 Documents can be updated by multiple clients, and synced later. To create an event counter, don't increment a number on a single doc, instead write a small document per counted event, and query them with an index. Example:
 
-
 ```js
 const App = () => {
   const { useLiveQuery, database } = useFireproof("my-ledger");
 
-  const { docs } = useLiveQuery('counter', { key : 'my-event-name'});
-  const counterValue = docs.length
+  const { docs } = useLiveQuery("counter", { key: "my-event-name" });
+  const counterValue = docs.length;
 
   function countEvent() {
     database.put({
-      counter : 'my-event-name'
-    })
+      counter: "my-event-name",
+    });
   }
 
   // Call countEvent() to count each event, and render counterValue in the UI.
-
-}
+};
 ```
 
 This pattern ensures the count is accurate even during sync.
@@ -155,13 +165,14 @@ Use a custom index function to normalize and transform document data, for instan
 ```js
 const { docs } = useLiveQuery(
   (doc) => {
-    if (doc.type == 'listing_v1') {
+    if (doc.type == "listing_v1") {
       return doc.sellerId;
-    } else if (doc.type == 'listing') {
+    } else if (doc.type == "listing") {
       return doc.userId;
     }
-  }, 
-  { key : routeParams.sellerId });
+  },
+  { key: routeParams.sellerId }
+);
 ```
 
 #### Array Indexes and Prefix Queries
@@ -186,26 +197,23 @@ Sortable lists are a common pattern. Here's how to implement them using Fireproo
 ```js
 function App() {
   const { database, useLiveQuery } = useFireproof("my-ledger");
-  
+
   // Initialize list with evenly spaced positions
   async function initializeList() {
     await database.put({ list: "xyz", position: 1000 });
     await database.put({ list: "xyz", position: 2000 });
     await database.put({ list: "xyz", position: 3000 });
   }
-  
+
   // Query items on list xyz, sorted by position. Note that useLiveQuery('list', { key:'xyz' }) would be the same docs, sorted chronologically by _id
-  const queryResult = useLiveQuery(
-    (doc) => [doc.list, doc.position], 
-    { prefix: ["xyz"] }
-  );
+  const queryResult = useLiveQuery((doc) => [doc.list, doc.position], { prefix: ["xyz"] });
 
   // Insert between existing items using midpoint calculation
   async function insertBetween(beforeDoc, afterDoc) {
     const newPosition = (beforeDoc.position + afterDoc.position) / 2;
-    await database.put({ 
-      list: "xyz", 
-      position: newPosition 
+    await database.put({
+      list: "xyz",
+      position: newPosition,
     });
   }
 
@@ -213,7 +221,7 @@ function App() {
     <div>
       <h3>List xyz (Sorted)</h3>
       <ul>
-        {queryResult.docs.map(doc => (
+        {queryResult.docs.map((doc) => (
           <li key={doc._id}>
             {doc._id}: position {doc.position}
           </li>
@@ -268,10 +276,10 @@ database.subscribe((changes) => {
 
 ### Working with Files
 
-Attach files to a document by adding them to the _files property. For example:
+Attach files to a document by adding them to the \_files property. For example:
 
 ```html
-<input accept="image/*" title="save to Fireproof" type="file" id="files" multiple>
+<input accept="image/*" title="save to Fireproof" type="file" id="files" multiple />
 ```
 
 ```js
@@ -279,11 +287,11 @@ function handleFiles() {
   const fileList = this.files;
   const doc = {
     type: "files",
-    _files: {}
+    _files: {},
   };
   for (const file of fileList) {
     // Assign each File object to the document
-    doc._files[file.name] = file; 
+    doc._files[file.name] = file;
   }
   database.put(doc);
 }
@@ -330,30 +338,33 @@ function handleSubmit(e) {
 
 ## Example React Application
 
-Code listing for todo tracker App.jsx:
+Code listing for todo tracker App.jsx. Note the code ordering: hooks, then handlers, then classNames right before JSX.
+
 ```js
 import React from "react";
 import { useFireproof } from "use-fireproof";
 
 export default function App() {
+  // 1. Hooks and document shapes
   const { useLiveQuery, useDocument, database } = useFireproof("todo-list-db");
 
   const {
     doc: newTodo,
     merge: mergeNewTodo,
-    submit: submitNewTodo
+    submit: submitNewTodo,
   } = useDocument({
     todo: "",
     type: "todo",
     completed: false,
-    createdAt: Date.now()
+    createdAt: Date.now(),
   });
 
-  const { docs: todos } = useLiveQuery("type", { 
+  const { docs: todos } = useLiveQuery("type", {
     key: "todo",
-    descending: true 
+    descending: true,
   });
 
+  // 2. Event handlers
   const handleInputChange = (e) => {
     mergeNewTodo({ todo: e.target.value });
   };
@@ -363,13 +374,25 @@ export default function App() {
     submitNewTodo();
   };
 
+  // 3. ClassNames — right before JSX so colors stay consistent
+  const c = {
+    bg: "bg-white",
+    card: "bg-gray-50",
+    border: "border-gray-200",
+    accent: "bg-[#e63946]",
+    text: "text-gray-500",
+  };
+
+  // 4. JSX return
   return (
-    <div className="max-w-md mx-auto p-4 bg-white shadow rounded">
+    <div className={`max-w-md mx-auto p-4 ${c.bg} shadow rounded`}>
       <h2 className="text-2xl font-bold mb-4">Todo List</h2>
       <form onSubmit={handleSubmit} className="mb-4">
-        <label htmlFor="todo" className="block mb-2 font-semibold">Todo</label>
+        <label htmlFor="todo" className="block mb-2 font-semibold">
+          Todo
+        </label>
         <input
-          className="w-full border border-gray-300 rounded px-2 py-1"
+          className={`w-full ${c.border} border rounded px-2 py-1`}
           id="todo"
           type="text"
           onChange={handleInputChange}
@@ -378,7 +401,7 @@ export default function App() {
       </form>
       <ul className="space-y-3">
         {todos.map((doc) => (
-          <li className="flex flex-col items-start p-2 border border-gray-200 rounded bg-gray-50" key={doc._id}>
+          <li className={`flex flex-col items-start p-2 ${c.border} border rounded ${c.card}`} key={doc._id}>
             <div className="flex items-center justify-between w-full">
               <div className="flex items-center">
                 <input
@@ -389,16 +412,11 @@ export default function App() {
                 />
                 <span className="font-medium">{doc.todo}</span>
               </div>
-              <button
-                className="text-sm bg-red-500 text-white px-2 py-1 rounded"
-                onClick={() => database.del(doc._id)}
-              >
+              <button className={`text-sm ${c.accent} text-white px-2 py-1 rounded`} onClick={() => database.del(doc._id)}>
                 Delete
               </button>
             </div>
-            <div className="text-xs text-gray-500 mt-1">
-              {new Date(doc.createdAt).toISOString()}
-            </div>
+            <div className={`text-xs ${c.text} mt-1`}>{new Date(doc.createdAt).toISOString()}</div>
           </li>
         ))}
       </ul>
@@ -409,37 +427,66 @@ export default function App() {
 
 ### Example Image Uploader
 
-This React example shows a simple image uploader application that uses Fireproof to store and sort images by creation date. These APIs easily work with plain JavaScript also. 
+This React example shows a simple image uploader application that uses Fireproof to store and sort images by creation date. These APIs easily work with plain JavaScript also.
 
 Code listing for App.jsx:
+
 ```js
 import { useFireproof, ImgFile } from "use-fireproof";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 
 export default function App() {
+  // 1. Hooks and document shapes
   const { useDocument, useLiveQuery } = useFireproof("image-uploads");
   const { doc, merge, submit } = useDocument({ _files: {}, description: "" });
   const { docs } = useLiveQuery("_id", { descending: true, limit: 5 });
   const [error, setError] = useState(false);
 
+  // 2. Event handlers
+  const handleFileChange = (e) => {
+    if (e.target.files[0]) merge({ _files: { uploaded: e.target.files[0] } });
+  };
+
+  const handleUpload = () => {
+    if (doc.description.trim()) {
+      submit();
+    } else {
+      setError(true);
+    }
+  };
+
+  // 3. ClassNames
+  const c = {
+    bg: "bg-white",
+    card: "bg-gray-50",
+    accent: "bg-blue-500 hover:bg-blue-600",
+    text: "text-gray-700",
+  };
+
+  // 4. JSX return
   return (
-    <div className="p-6 max-w-lg mx-auto bg-white shadow-lg rounded-lg">
+    <div className={`p-6 max-w-lg mx-auto ${c.bg} shadow-lg rounded-lg`}>
       <h2 className="text-2xl font-bold mb-4">Image Uploader</h2>
-      <input type="file" accept="image/*" onChange={e => e.target.files[0] && merge({ _files: { uploaded: e.target.files[0] } })} className="mb-2 border p-2 w-full rounded" />
-      <input 
-        type="text" 
-        placeholder="Enter description" 
-        value={doc.description} 
-        onChange={e => {setError(false); merge({ description: e.target.value });}}
+      <input type="file" accept="image/*" onChange={handleFileChange} className="mb-2 border p-2 w-full rounded" />
+      <input
+        type="text"
+        placeholder="Enter description"
+        value={doc.description}
+        onChange={(e) => {
+          setError(false);
+          merge({ description: e.target.value });
+        }}
         className={`w-full p-2 border rounded mb-4 ${error ? "border-red-500" : "border-gray-300"}`}
       />
-      <button onClick={() => doc.description.trim() ? submit() : setError(true)} className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Upload</button>
+      <button onClick={handleUpload} className={`px-4 py-2 ${c.accent} text-white rounded`}>
+        Upload
+      </button>
       <h3 className="text-lg font-semibold mt-6">Recent Uploads</h3>
       <div className="grid grid-cols-2 gap-4 mt-2">
-        {docs.map(doc => (
-          <div key={doc._id} className="border p-2 rounded shadow-sm bg-gray-50">
+        {docs.map((doc) => (
+          <div key={doc._id} className={`border p-2 rounded shadow-sm ${c.card}`}>
             {doc._files?.uploaded && <ImgFile file={doc._files.uploaded} alt="Uploaded Image" className="w-full h-auto rounded" />}
-            <p className="text-sm text-gray-700 mt-2">{doc.description || "No description"}</p>
+            <p className={`text-sm ${c.text} mt-2`}>{doc.description || "No description"}</p>
           </div>
         ))}
       </div>

package/llms/image-gen.js

@@ -1,7 +1,6 @@
 export const imageGenConfig = {
     name: "image-gen",
     label: "Image Generation",
-    llmsTxtUrl: "https://use-fireproof.com/imggen-llms.txt",
     module: "OpenAi",
     description: "Generate and edit images",
     importModule: "use-vibes",

package/llms/image-gen.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-gen.js","sourceRoot":"","sources":["../../jsr/llms/image-gen.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAc;IACvC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,kBAAkB;IACzB,UAAU,EAAE,2CAA2C;IACvD,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,0BAA0B;IACvC,YAAY,EAAE,WAAW;IACzB,UAAU,EAAE,QAAQ;CACrB,CAAC"}
+{"version":3,"file":"image-gen.js","sourceRoot":"","sources":["../../jsr/llms/image-gen.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAc;IACvC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,kBAAkB;IACzB,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,0BAA0B;IACvC,YAAY,EAAE,WAAW;IACzB,UAAU,EAAE,QAAQ;CACrB,CAAC"}

package/llms/{image-gen.txt → image-gen.md}

@@ -7,7 +7,7 @@ The ImgGen component can be used in three ways:
 1. **With no props** - Shows a form UI for users to enter a prompt and/or upload images:
 
 ```jsx
-import { ImgGen } from 'use-vibes';
+import { ImgGen } from "use-vibes";
 
 function MyComponent() {
   return <ImgGen />; // Shows built-in form for prompt entry and image upload
@@ -17,7 +17,7 @@ function MyComponent() {
 2. **With a prompt prop** - Immediately generates an image (no form shown):
 
 ```jsx
-import { ImgGen } from 'use-vibes';
+import { ImgGen } from "use-vibes";
 
 function MyComponent() {
   return <ImgGen prompt="A sunset over mountains" />; // Direct generation, no form
@@ -27,32 +27,31 @@ function MyComponent() {
 3. **With images prop** - Edits or combines images with AI (no form shown):
 
 ```jsx
-import { ImgGen } from 'use-vibes';
+import { ImgGen } from "use-vibes";
 
 function MyComponent() {
   const [files, setFiles] = useState([]);
   return (
-    <ImgGen 
-      prompt="Create a gift basket with these items" 
+    <ImgGen
+      prompt="Create a gift basket with these items"
       images={files} // Array of File objects
     />
   );
 }
 ```
 
-4. **With an _id prop** - Loads a specific image from the database (no form shown):
+4. **With an \_id prop** - Loads a specific image from the database (no form shown):
 
-If there is no image generated for the document yet, but it has a `prompt` field, it will generate a new image with the prompt. If there an images is stored, at doc._files.original, it will use that as the base image.
+If there is no image generated for the document yet, but it has a `prompt` field, it will generate a new image with the prompt. If there an images is stored, at doc.\_files.original, it will use that as the base image.
 
 ```jsx
-import { ImgGen } from 'use-vibes';
+import { ImgGen } from "use-vibes";
 
 function MyComponent() {
   return <ImgGen _id="my-image-id" />; // Loads specific image by ID
 }
 ```
 
-
 ## List by ID
 
 Images and prompts are tracked in a Fireproof database with a `type` of `image`. If a database is not provided, it uses `"ImgGen"` as the database name.
@@ -60,13 +59,13 @@ Images and prompts are tracked in a Fireproof database with a `type` of `image`.
 Display stored images by their ID. Ensure you do this, so users can find the images they created.
 
 ```jsx
-import { useFireproof } from 'use-fireproof';
-import { ImgGen } from 'use-vibes';
+import { useFireproof } from "use-fireproof";
+import { ImgGen } from "use-vibes";
 
 function MyComponent() {
   const { database, useLiveQuery } = useFireproof("my-db-name");
-   const { docs: imageDocuments } = useLiveQuery('type', {
-    key: 'image',
+  const { docs: imageDocuments } = useLiveQuery("type", {
+    key: "image",
     descending: true,
   });
 
@@ -103,8 +102,8 @@ ImgGen supports custom styling through CSS variables or custom class names:
 }
 
 // With custom class names
-<ImgGen 
-  prompt="A landscape" 
+<ImgGen
+  prompt="A landscape"
   className="my-custom-image"
   classes={{
     root: 'custom-container',