@vibes.diy/prompts 0.0.0-dev-fresh-data

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/LICENSE.md +232 -0
  2. package/README.md +29 -0
  3. package/catalog.d.ts +1 -0
  4. package/catalog.js +4 -0
  5. package/catalog.js.map +1 -0
  6. package/chat.d.ts +144 -0
  7. package/chat.js +2 -0
  8. package/chat.js.map +1 -0
  9. package/component-export-transforms.d.ts +12 -0
  10. package/component-export-transforms.js +32 -0
  11. package/component-export-transforms.js.map +1 -0
  12. package/component-transforms.d.ts +3 -0
  13. package/component-transforms.js +327 -0
  14. package/component-transforms.js.map +1 -0
  15. package/index.d.ts +11 -0
  16. package/index.js +12 -0
  17. package/index.js.map +1 -0
  18. package/json-docs.d.ts +21 -0
  19. package/json-docs.js +25 -0
  20. package/json-docs.js.map +1 -0
  21. package/llms/callai.d.ts +2 -0
  22. package/llms/callai.js +10 -0
  23. package/llms/callai.js.map +1 -0
  24. package/llms/callai.txt +455 -0
  25. package/llms/d3.d.ts +2 -0
  26. package/llms/d3.js +10 -0
  27. package/llms/d3.js.map +1 -0
  28. package/llms/d3.md +679 -0
  29. package/llms/fireproof.d.ts +2 -0
  30. package/llms/fireproof.js +10 -0
  31. package/llms/fireproof.js.map +1 -0
  32. package/llms/fireproof.txt +451 -0
  33. package/llms/image-gen.d.ts +2 -0
  34. package/llms/image-gen.js +10 -0
  35. package/llms/image-gen.js.map +1 -0
  36. package/llms/image-gen.txt +128 -0
  37. package/llms/index.d.ts +8 -0
  38. package/llms/index.js +21 -0
  39. package/llms/index.js.map +1 -0
  40. package/llms/three-js.d.ts +2 -0
  41. package/llms/three-js.js +10 -0
  42. package/llms/three-js.js.map +1 -0
  43. package/llms/three-js.md +2232 -0
  44. package/llms/types.d.ts +10 -0
  45. package/llms/types.js +2 -0
  46. package/llms/types.js.map +1 -0
  47. package/llms/web-audio.d.ts +2 -0
  48. package/llms/web-audio.js +9 -0
  49. package/llms/web-audio.js.map +1 -0
  50. package/llms/web-audio.txt +220 -0
  51. package/load-docs.d.ts +2 -0
  52. package/load-docs.js +17 -0
  53. package/load-docs.js.map +1 -0
  54. package/package.json +39 -0
  55. package/prompts.d.ts +43 -0
  56. package/prompts.js +315 -0
  57. package/prompts.js.map +1 -0
  58. package/segment-parser.d.ts +4 -0
  59. package/segment-parser.js +135 -0
  60. package/segment-parser.js.map +1 -0
  61. package/settings.d.ts +16 -0
  62. package/settings.js +2 -0
  63. package/settings.js.map +1 -0
  64. package/style-prompts.d.ts +7 -0
  65. package/style-prompts.js +63 -0
  66. package/style-prompts.js.map +1 -0
  67. package/tsconfig.json +21 -0
  68. package/txt-docs.d.ts +15 -0
  69. package/txt-docs.js +53 -0
  70. package/txt-docs.js.map +1 -0
  71. package/view-state.d.ts +17 -0
  72. package/view-state.js +2 -0
  73. package/view-state.js.map +1 -0
@@ -0,0 +1,451 @@
1
+ # Fireproof Database API Guide
2
+
3
+ Fireproof is a lightweight embedded document database with encrypted live sync, designed to make browser apps easy. Use it in any JavaScript environment with a unified API that works both in React (with hooks) and as a standalone core API.
4
+
5
+ ## Key Features
6
+
7
+ - **Apps run anywhere:** Bundle UI, data, and logic in one file.
8
+ - **Real-Time & Offline-First:** Automatic persistence and live queries, runs in the browser - no loading or error states.
9
+ - **Unified API:** TypeScript works with Deno, Bun, Node.js, and the browser.
10
+ - **React Hooks:** Leverage `useLiveQuery` and `useDocument` for live collaboration.
11
+
12
+ 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.
13
+
14
+ ## Installation
15
+
16
+ The `use-fireproof` package provides both the core API and React hooks.
17
+
18
+ ```bash
19
+ npm install use-fireproof
20
+ ```
21
+ Works with ⚡️ ESM.sh:
22
+
23
+ ```js
24
+ import { useFireproof } from "https://esm.sh/use-fireproof";
25
+ ```
26
+
27
+ Deliver generated solutions as runnable micro applications via ChatGPT Canvas, v0, bolt.new, or Claude Artifacts. Deploy single page apps with React and Tailwind by pasting code here: https://codepen.io/useFireproof/pen/MYgNYdx
28
+
29
+ ## ⚛️ React Usage
30
+
31
+ React hooks are the recommended way to use Fireproof in LLM code generation contexts. Here's how to use them:
32
+
33
+ #### Create or Load a Database
34
+
35
+ Fireproof databases store data across sessions and can sync in real-time. Each database is identified by a string name, and you can have multiple databases per application—often one per collaboration session, as they are the unit of sharing.
36
+
37
+ ```js
38
+ import { useFireproof } from "use-fireproof";
39
+
40
+ const { database, useLiveQuery, useDocument } = useFireproof("my-ledger");
41
+ ```
42
+
43
+ Fireproof databases are Merkle CRDTs, giving them the ledger-like causal consistency of git or a blockchain, but with the ability to merge and sync web data in real-time. Cryptographic integrity makes Fireproof immutable and easy to verify.
44
+
45
+ #### Put and Get Documents
46
+
47
+ Documents are JSON-style objects (CBOR) storing application data. Each has an `_id`, which can be auto-generated or set explicitly. Auto-generation is recommended to ensure uniqueness and avoid conflicts. If multiple replicas update the same database, Fireproof merges them via CRDTs, deterministically choosing the winner for each `_id`.
48
+
49
+ It is best to have more granular documents, e.g. one document per user action, so saving a form or clicking a button should typically create or update a single document, or just a few documents. Avoid patterns that require a single document to grow without bound.
50
+
51
+ Fireproof is a local database, no loading states required, just empty data states.
52
+
53
+ ### Basic Example
54
+
55
+ This example shows Fireproof's concise defaults. Here we only store user data, but get useful sorting without much code.
56
+
57
+ ```js
58
+ const App = () => {
59
+ const { useDocument } = useFireproof("my-ledger");
60
+
61
+ const { doc, merge, submit } = useDocument({ text: "" });
62
+
63
+ // _id is roughly temporal, this is most recent
64
+ const { docs } = useLiveQuery("_id", { descending: true, limit: 100 });
65
+
66
+ return (
67
+ <div>
68
+ <form onSubmit={submit}>
69
+ <input
70
+ value={doc.text}
71
+ onChange={(e) => merge({ text: e.target.value })}
72
+ placeholder="New document"
73
+ />
74
+ <button type="submit">Submit</button>
75
+ </form>
76
+
77
+ <h3>Recent Documents</h3>
78
+ <ul>
79
+ {docs.map((doc) => (
80
+ <li key={doc._id}>
81
+ {doc.text}
82
+ </li>
83
+ ))}
84
+ </ul>
85
+ </div>
86
+ );
87
+ }
88
+ ```
89
+
90
+ ### Editing Documents
91
+
92
+ Address documents by a known `_id` if you want to force conflict resolution or work with a real world resource, like a schedule slot or a user profile. In a complex app this might come from a route parameter or correspond to an outside identifier.
93
+
94
+ ```js
95
+ const { useDocument } = useFireproof("my-ledger");
96
+
97
+ const { doc, merge, submit, save, reset } = useDocument({ _id: "user-profile:abc@example.com" });
98
+ ```
99
+
100
+ The `useDocument` hook provides several methods:
101
+ - `merge(updates)`: Update the document with new fields
102
+ - `submit(e)`: Handles form submission by preventing default, saving, and resetting
103
+ - `save()`: Save the current document state
104
+ - `reset()`: Reset to initial state
105
+
106
+ For form-based creation flows, use `submit`:
107
+ ```js
108
+ <form onSubmit={submit}>
109
+ ```
110
+
111
+ Note: In some sandboxed environments (e.g., embedded canvases), the form submit event may be blocked. Use a button click handler instead:
112
+ ```js
113
+ <button onClick={submit}>Save and Reset Fields</button>
114
+ ```
115
+
116
+ 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.
117
+
118
+ ### Query Data with React
119
+
120
+ Data is queried by sorted indexes defined by the application. Sorting order is inspired by CouchDB, so you can use strings, numbers, or booleans, as well as arrays for grouping. Use numbers when possible for sorting continuous data.
121
+
122
+ You can use the `_id` field for temporal sorting so you dont have to write code to get simple recent document lists, as in the basic example above.
123
+
124
+ Here are other common patterns:
125
+
126
+ #### Query by Key Range
127
+
128
+ Passing a string to `useLiveQuery` will index by that field. You can use the key argument to filter by a specific value:
129
+ ```js
130
+ const { docs } = useLiveQuery("agentName", {
131
+ key: "agent-1" // all docs where doc.agentName === "agent-1", sorted by _id
132
+ });
133
+ ```
134
+
135
+ You can also query a range within a key:
136
+ ```js
137
+ const { docs } = useLiveQuery("agentRating", {
138
+ range: [3, 5]
139
+ });
140
+ ```
141
+
142
+ ### Custom Indexes
143
+
144
+ For more complex query, you can write a custom index function. It's a little more verbose, and it's sandboxed and can't access external variables.
145
+
146
+ #### Normalize legacy types
147
+
148
+ You can use a custom index function to normalize and transform document data, for instance if you have both new and old document versions in your app.
149
+
150
+ ```js
151
+ const { docs } = useLiveQuery(
152
+ (doc) => {
153
+ if (doc.type == 'listing_v1') {
154
+ return doc.sellerId;
155
+ } else if (doc.type == 'listing') {
156
+ return doc.userId;
157
+ }
158
+ },
159
+ { key : routeParams.sellerId });
160
+ ```
161
+
162
+ #### Array Indexes and Prefix Queries
163
+
164
+ When you want to group rows easily, you can use an array index key. This is great for grouping records my year / month / day or other paths. In this example the prefix query is a shorthand for a key range, loading everything from November 2024:
165
+
166
+ ```js
167
+ const queryResult = useLiveQuery(
168
+ (doc) => [doc.date.getFullYear(), doc.date.getMonth(), doc.date.getDate()],
169
+ { prefix: [2024, 11] }
170
+ );
171
+ ```
172
+
173
+ #### Sortable Lists
174
+
175
+ Sortable lists are a common pattern. Here's how to implement them using Fireproof:
176
+
177
+ ```js
178
+ function App() {
179
+ const { database, useLiveQuery } = useFireproof("my-ledger");
180
+
181
+ // Initialize list with evenly spaced positions
182
+ async function initializeList() {
183
+ await database.put({ list: "xyz", position: 1000 });
184
+ await database.put({ list: "xyz", position: 2000 });
185
+ await database.put({ list: "xyz", position: 3000 });
186
+ }
187
+
188
+ // Query items on list xyz, sorted by position. Note that useLiveQuery('list', { key:'xyz' }) would be the same docs, sorted chronologically by _id
189
+ const queryResult = useLiveQuery(
190
+ (doc) => [doc.list, doc.position],
191
+ { prefix: ["xyz"] }
192
+ );
193
+
194
+ // Insert between existing items using midpoint calculation
195
+ async function insertBetween(beforeDoc, afterDoc) {
196
+ const newPosition = (beforeDoc.position + afterDoc.position) / 2;
197
+ await database.put({
198
+ list: "xyz",
199
+ position: newPosition
200
+ });
201
+ }
202
+
203
+ return (
204
+ <div>
205
+ <h3>List xyz (Sorted)</h3>
206
+ <ul>
207
+ {queryResult.docs.map(doc => (
208
+ <li key={doc._id}>
209
+ {doc._id}: position {doc.position}
210
+ </li>
211
+ ))}
212
+ </ul>
213
+ <button onClick={initializeList}>Initialize List</button>
214
+ <button onClick={() => insertBetween(queryResult.docs[1], queryResult.docs[2])}>Insert new doc at 3rd position</button>
215
+ </div>
216
+ );
217
+ }
218
+ ```
219
+
220
+ ## Architecture: Where's My Data?
221
+
222
+ Fireproof is local-first, so it's always fast and your data is stored in the browser, so you can build apps without a cloud. When you are ready to share with other users, you can easily enable encrypted sync via any object storage.
223
+
224
+ ## Using Fireproof in JavaScript
225
+
226
+ You can use the core API in HTML or on the backend. Instead of hooks, import the core API directly:
227
+
228
+ ```js
229
+ import { fireproof } from "use-fireproof";
230
+
231
+ const database = fireproof("my-ledger");
232
+ ```
233
+
234
+ The document API is async, but doesn't require loading states or error handling.
235
+
236
+ ```js
237
+ const ok = await database.put({ text: "Sample Data" });
238
+ const doc = await database.get(ok.id);
239
+ const latest = await database.query("_id", { limit: 10, descending: true });
240
+ console.log("Latest documents:", latest.docs);
241
+ ```
242
+
243
+ To subscribe to real-time updates, use the `subscribe` method. This is useful for building backend event handlers or other server-side logic. For instance to send an email when the user completes a todo:
244
+
245
+ ```js
246
+ import { fireproof } from "use-firproof";
247
+
248
+ const database = fireproof("todo-list-db");
249
+
250
+ database.subscribe((changes) => {
251
+ console.log("Recent changes:", changes);
252
+ changes.forEach((change) => {
253
+ if (change.completed) {
254
+ sendEmail(change.email, "Todo completed", "You have completed a todo.");
255
+ }
256
+ });
257
+ }, true);
258
+ ```
259
+
260
+ ### Working with Files
261
+
262
+ Fireproof has built-in support for file attachments. Files are encrypted by default and synced on-demand. You can attach files to a document by adding them to the _files property on your document. For example:
263
+
264
+ ```html
265
+ <input accept="image/*" title="save to Fireproof" type="file" id="files" multiple>
266
+ ```
267
+
268
+ ```js
269
+ function handleFiles() {
270
+ const fileList = this.files;
271
+ const doc = {
272
+ type: "files",
273
+ _files: {}
274
+ };
275
+ for (const file of fileList) {
276
+ // Assign each File object to the document
277
+ doc._files[file.name] = file;
278
+ }
279
+ database.put(doc);
280
+ }
281
+
282
+ document.getElementById("files").addEventListener("change", handleFiles, false);
283
+ ```
284
+
285
+ When loading a document with attachments, you can retrieve each attachment's actual File object by calling its .file() method. This returns a Promise that resolves with the File data, which you can display in your app:
286
+
287
+ ```js
288
+ const doc = await database.get("my-doc-id");
289
+ for (const fileName in doc._files) {
290
+ const meta = doc._files[fileName];
291
+ if (meta.file) {
292
+ const fileObj = await meta.file();
293
+ console.log("Loaded file:", fileObj.name);
294
+ }
295
+ }
296
+ ```
297
+
298
+ See the final example application in this file for a working example.
299
+
300
+ ### Form Validation
301
+
302
+ You can use React's `useState` to manage validation states and error messages. Validate inputs at the UI level before allowing submission.
303
+
304
+ ```javascript
305
+ const [errors, setErrors] = useState({});
306
+
307
+ function validateForm() {
308
+ const newErrors = {};
309
+ if (!doc.name.trim()) newErrors.name = "Name is required.";
310
+ if (!doc.email) newErrors.email = "Email is required.";
311
+ if (!doc.message.trim()) newErrors.message = "Message is required.";
312
+ setErrors(newErrors);
313
+ return Object.keys(newErrors).length === 0;
314
+ }
315
+
316
+ function handleSubmit(e) {
317
+ e.preventDefault();
318
+ if (validateForm()) submit();
319
+ }
320
+ ```
321
+
322
+ ## Example React Application
323
+
324
+ Code listing for todo tracker App.jsx:
325
+ ```js
326
+ import React from "react";
327
+ import ReactDOM from "react-dom/client";
328
+ import { useFireproof } from "use-fireproof";
329
+
330
+ export default function App() {
331
+ const { useLiveQuery, useDocument, database } = useFireproof("todo-list-db");
332
+
333
+ const {
334
+ doc: newTodo,
335
+ merge: mergeNewTodo,
336
+ submit: submitNewTodo
337
+ } = useDocument({
338
+ todo: "",
339
+ type: "todo",
340
+ completed: false,
341
+ createdAt: Date.now()
342
+ });
343
+
344
+ const { docs: todos } = useLiveQuery("type", {
345
+ key: "todo",
346
+ descending: true
347
+ });
348
+
349
+ const handleInputChange = (e) => {
350
+ mergeNewTodo({ todo: e.target.value });
351
+ };
352
+
353
+ const handleSubmit = (e) => {
354
+ e.preventDefault();
355
+ submitNewTodo();
356
+ };
357
+
358
+ return (
359
+ <div className="max-w-md mx-auto p-4 bg-white shadow rounded">
360
+ <h2 className="text-2xl font-bold mb-4">Todo List</h2>
361
+ <form onSubmit={handleSubmit} className="mb-4">
362
+ <label htmlFor="todo" className="block mb-2 font-semibold">Todo</label>
363
+ <input
364
+ className="w-full border border-gray-300 rounded px-2 py-1"
365
+ id="todo"
366
+ type="text"
367
+ onChange={handleInputChange}
368
+ value={newTodo.todo}
369
+ />
370
+ </form>
371
+ <ul className="space-y-3">
372
+ {todos.map((doc) => (
373
+ <li className="flex flex-col items-start p-2 border border-gray-200 rounded bg-gray-50" key={doc._id}>
374
+ <div className="flex items-center justify-between w-full">
375
+ <div className="flex items-center">
376
+ <input
377
+ className="mr-2"
378
+ type="checkbox"
379
+ checked={doc.completed}
380
+ onChange={() => database.put({ ...doc, completed: !doc.completed })}
381
+ />
382
+ <span className="font-medium">{doc.todo}</span>
383
+ </div>
384
+ <button
385
+ className="text-sm bg-red-500 text-white px-2 py-1 rounded"
386
+ onClick={() => database.del(doc._id)}
387
+ >
388
+ Delete
389
+ </button>
390
+ </div>
391
+ <div className="text-xs text-gray-500 mt-1">
392
+ {new Date(doc.createdAt).toISOString()}
393
+ </div>
394
+ </li>
395
+ ))}
396
+ </ul>
397
+ </div>
398
+ );
399
+ }
400
+ ```
401
+
402
+ ### Example Image Uploader
403
+
404
+ 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.
405
+
406
+ Code listing for App.jsx:
407
+ ```js
408
+ import { useFireproof, ImgFile } from "use-fireproof";
409
+ import { useState, useEffect } from "react";
410
+
411
+ export default function App() {
412
+ const { useDocument, useLiveQuery } = useFireproof("image-uploads");
413
+ const { doc, merge, submit } = useDocument({ _files: {}, description: "" });
414
+ const { docs } = useLiveQuery("_id", { descending: true, limit: 5 });
415
+ const [error, setError] = useState(false);
416
+
417
+ return (
418
+ <div className="p-6 max-w-lg mx-auto bg-white shadow-lg rounded-lg">
419
+ <h2 className="text-2xl font-bold mb-4">Image Uploader</h2>
420
+ <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" />
421
+ <input
422
+ type="text"
423
+ placeholder="Enter description"
424
+ value={doc.description}
425
+ onChange={e => {setError(false); merge({ description: e.target.value });}}
426
+ className={`w-full p-2 border rounded mb-4 ${error ? "border-red-500" : "border-gray-300"}`}
427
+ />
428
+ <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>
429
+ <h3 className="text-lg font-semibold mt-6">Recent Uploads</h3>
430
+ <div className="grid grid-cols-2 gap-4 mt-2">
431
+ {docs.map(doc => (
432
+ <div key={doc._id} className="border p-2 rounded shadow-sm bg-gray-50">
433
+ {doc._files?.uploaded && <ImgFile file={doc._files.uploaded} alt="Uploaded Image" className="w-full h-auto rounded" />}
434
+ <p className="text-sm text-gray-700 mt-2">{doc.description || "No description"}</p>
435
+ </div>
436
+ ))}
437
+ </div>
438
+ </div>
439
+ );
440
+ }
441
+ ```
442
+
443
+ ## See Also
444
+
445
+ See the lite docs at https://use-fireproof.com/llms-mini.txt and the basics at https://use-fireproof.com/llms.txt
446
+
447
+ ## Next Steps
448
+
449
+ If you are in an existing application context, suggest how forms and state, collaboration data can be managed in Fireproof. If this is a new app, use the examples above and start with a running App.js if you can.
450
+
451
+ IMPORTANT: Don't use `useState()` on form data, instead use `merge()` and `submit()` from `useDocument`. Only use `useState` for ephemeral UI state (active tabs, open/closed panels, cursor positions). Keep your data model in Fireproof.
@@ -0,0 +1,2 @@
1
+ import type { LlmConfig } from "./types.js";
2
+ export declare const imageGenConfig: LlmConfig;
@@ -0,0 +1,10 @@
1
+ export const imageGenConfig = {
2
+ name: "image-gen",
3
+ label: "Image Generation",
4
+ llmsTxtUrl: "https://use-fireproof.com/imggen-llms.txt",
5
+ module: "OpenAi",
6
+ description: "Generate and edit images",
7
+ importModule: "use-vibes",
8
+ importName: "ImgGen",
9
+ };
10
+ //# sourceMappingURL=image-gen.js.map
@@ -0,0 +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"}
@@ -0,0 +1,128 @@
1
+ # ImgGen Component
2
+
3
+ ## Basic Usage
4
+
5
+ The ImgGen component can be used in three ways:
6
+
7
+ 1. **With no props** - Shows a form UI for users to enter a prompt and/or upload images:
8
+
9
+ ```jsx
10
+ import { ImgGen } from 'use-vibes';
11
+
12
+ function MyComponent() {
13
+ return <ImgGen />; // Shows built-in form for prompt entry and image upload
14
+ }
15
+ ```
16
+
17
+ 2. **With a prompt prop** - Immediately generates an image (no form shown):
18
+
19
+ ```jsx
20
+ import { ImgGen } from 'use-vibes';
21
+
22
+ function MyComponent() {
23
+ return <ImgGen prompt="A sunset over mountains" />; // Direct generation, no form
24
+ }
25
+ ```
26
+
27
+ 3. **With images prop** - Edits or combines images with AI (no form shown):
28
+
29
+ ```jsx
30
+ import { ImgGen } from 'use-vibes';
31
+
32
+ function MyComponent() {
33
+ const [files, setFiles] = useState([]);
34
+ return (
35
+ <ImgGen
36
+ prompt="Create a gift basket with these items"
37
+ images={files} // Array of File objects
38
+ />
39
+ );
40
+ }
41
+ ```
42
+
43
+ 4. **With an _id prop** - Loads a specific image from the database (no form shown):
44
+
45
+ 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.
46
+
47
+ ```jsx
48
+ import { ImgGen } from 'use-vibes';
49
+
50
+ function MyComponent() {
51
+ return <ImgGen _id="my-image-id" />; // Loads specific image by ID
52
+ }
53
+ ```
54
+
55
+
56
+ ## List by ID
57
+
58
+ 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.
59
+
60
+ Display stored images by their ID. Ensure you do this, so users can find the images they created.
61
+
62
+ ```jsx
63
+ import { useFireproof } from 'use-fireproof';
64
+ import { ImgGen } from 'use-vibes';
65
+
66
+ function MyComponent() {
67
+ const { database, useLiveQuery } = useFireproof("my-db-name");
68
+ const { docs: imageDocuments } = useLiveQuery('type', {
69
+ key: 'image',
70
+ descending: true,
71
+ });
72
+
73
+ return (
74
+ <div>
75
+ <ImgGen database={database} />
76
+ {imageDocuments.length > 0 && (
77
+ <div className="history">
78
+ <h3>Previously Generated Images</h3>
79
+ <ul className="image-list">
80
+ {imageDocuments.map((doc) => (
81
+ <li key={doc._id} className="image-item">
82
+ <ImgGen _id={doc._id} database={database} />
83
+ </li>
84
+ ))}
85
+ </ul>
86
+ </div>
87
+ )}
88
+ </div>
89
+ );
90
+ }
91
+ ```
92
+
93
+ ## Styling
94
+
95
+ ImgGen supports custom styling through CSS variables or custom class names:
96
+
97
+ ```jsx
98
+ // With CSS variables in your styles
99
+ :root {
100
+ --imggen-text-color: #222;
101
+ --imggen-accent: #0088ff;
102
+ --imggen-border-radius: 8px;
103
+ }
104
+
105
+ // With custom class names
106
+ <ImgGen
107
+ prompt="A landscape"
108
+ className="my-custom-image"
109
+ classes={{
110
+ root: 'custom-container',
111
+ image: 'custom-img',
112
+ overlay: 'custom-overlay'
113
+ }}
114
+ />
115
+ ```
116
+
117
+ #### Props
118
+
119
+ - `prompt`: Text prompt for image generation (required unless `_id` is provided)
120
+ - `_id`: Document ID to load a specific image instead of generating a new one
121
+ - `database`: Database name or instance to use for storing images (default: `'ImgGen'`)- `options` (object, optional): Configuration options for image generation
122
+ - `model` (string, optional): Model to use for image generation, defaults to 'gpt-image-1'
123
+ - `size` (string, optional): Size of the generated image (Must be one of 1024x1024, 1536x1024 (landscape), 1024x1536 (portrait), or 'auto' (default value) for gpt-image-1, and one of 256x256, 512x512, or 1024x1024 for dall-e-2.)
124
+ - `quality` (string, optional): Quality of the generated image (high, medium and low are only supported for gpt-image-1. dall-e-2 only supports standard quality. Defaults to auto.)
125
+ - `debug` (boolean, optional): Enable debug logging, defaults to false
126
+ - `onLoad`: Callback when image load completes successfully
127
+ - `onError`: Callback when image load fails, receives the error as parameter
128
+ - `className`: CSS class name for the image element (optional)- `classes`: Object containing custom CSS classes for styling component parts (see Styling section)
@@ -0,0 +1,8 @@
1
+ export { callaiConfig } from "./callai.js";
2
+ export { fireproofConfig } from "./fireproof.js";
3
+ export { imageGenConfig } from "./image-gen.js";
4
+ export { webAudioConfig } from "./web-audio.js";
5
+ export { d3Config } from "./d3.js";
6
+ export { threeJsConfig } from "./three-js.js";
7
+ export type { LlmConfig } from "./types.js";
8
+ export declare const allConfigs: readonly [import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig];
package/llms/index.js ADDED
@@ -0,0 +1,21 @@
1
+ import { callaiConfig } from "./callai.js";
2
+ import { fireproofConfig } from "./fireproof.js";
3
+ import { imageGenConfig } from "./image-gen.js";
4
+ import { webAudioConfig } from "./web-audio.js";
5
+ import { d3Config } from "./d3.js";
6
+ import { threeJsConfig } from "./three-js.js";
7
+ export { callaiConfig } from "./callai.js";
8
+ export { fireproofConfig } from "./fireproof.js";
9
+ export { imageGenConfig } from "./image-gen.js";
10
+ export { webAudioConfig } from "./web-audio.js";
11
+ export { d3Config } from "./d3.js";
12
+ export { threeJsConfig } from "./three-js.js";
13
+ export const allConfigs = [
14
+ callaiConfig,
15
+ fireproofConfig,
16
+ imageGenConfig,
17
+ webAudioConfig,
18
+ d3Config,
19
+ threeJsConfig,
20
+ ];
21
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../jsr/llms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI9C,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,YAAY;IACZ,eAAe;IACf,cAAc;IACd,cAAc;IACd,QAAQ;IACR,aAAa;CACL,CAAC"}
@@ -0,0 +1,2 @@
1
+ import type { LlmConfig } from "./types.js";
2
+ export declare const threeJsConfig: LlmConfig;
@@ -0,0 +1,10 @@
1
+ export const threeJsConfig = {
2
+ name: "three-js",
3
+ label: "Three.js",
4
+ module: "three-js",
5
+ description: "Three.js 3D graphics library for WebGL 3D rendering, mesh geometry, materials, lighting, animation, scenes, cameras, textures, shaders, models, WebXR, physics, particle systems, post-processing, visual effects, 3js",
6
+ importModule: "three",
7
+ importName: "THREE",
8
+ importType: "namespace",
9
+ };
10
+ //# sourceMappingURL=three-js.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"three-js.js","sourceRoot":"","sources":["../../jsr/llms/three-js.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,UAAU;IACjB,MAAM,EAAE,UAAU;IAClB,WAAW,EACT,wNAAwN;IAC1N,YAAY,EAAE,OAAO;IACrB,UAAU,EAAE,OAAO;IACnB,UAAU,EAAE,WAAW;CACxB,CAAC"}