@vibes.diy/prompts 14.1.20 → 14.1.22

package/llms/fireproof.js

@@ -2,6 +2,7 @@ export const fireproofConfig = {
     name: "fireproof",
     label: "useFireproof",
     description: "cloud-backed document database with live sync",
+    initialVariant: true,
     importModule: "use-fireproof",
     importName: "useFireproof",
 };

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,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,WAAW,EAAE,+CAA+C;IAC5D,cAAc,EAAE,IAAI;IACpB,YAAY,EAAE,eAAe;IAC7B,UAAU,EAAE,cAAc;CAC3B,CAAC"}

package/llms/image-gen.initial.md

@@ -0,0 +1,155 @@
+# ImgGen Component
+
+Generate and edit images from a text prompt. Each generated image lands as a file ref on the doc — display reads the platform-minted URL via `_files`.
+
+**When to use it:** reach for `<ImgGen>` when a picture adds real value — items whose identity includes an image (cards, creatures, products, covers), user-personalized art (avatars, portraits from a photo), or apps whose whole point is imagery. Most text/data apps (lists, trackers, notes, forms) need **no** images — leave the import unused rather than decorating with gratuitous pictures.
+
+## Basic Usage
+
+Start with a minimal image generation component:
+
+App.jsx
+
+```jsx
+import React from "react";
+import { useFireproof } from "use-fireproof";
+import { ImgGen } from "use-vibes";
+
+export default function App() {
+  return (
+    <div>
+      <h2>Image Generator</h2>
+      <ImgGen prompt="A sunset over mountains" />
+    </div>
+  );
+}
+```
+
+`<ImgGen>` stores generated versions in its component-owned media database, associated
+with the host database name and `_id`. Read a saved image through
+`useImgGen({ _id, database })` from `use-vibes`: its `document` composes current media
+versions and legacy host versions. From that composed document, select
+`document.versions?.[document.currentVersion ?? 0]`, then
+`document._files?.[version.id]`. The returned file ref supplies both `.url` for display
+and `.file()` for a transformation input, so a ref you have in hand is ready to pass
+straight to `images`. Ordinary host records hold the app's own data; the image hook
+supplies the associated generated output.
+
+For example, refining a saved pottery illustration keeps its original ID and uses its
+actual output as the input to a separate result ID:
+
+```jsx
+import { ImgGen, useImgGen } from "use-vibes";
+
+function GlazingPreview({ database }) {
+  const { document: original, pending, error } = useImgGen({ _id: "vessel-original", database });
+  const version = original?.versions?.[original.currentVersion ?? 0];
+  const source = version?.id ? original?._files?.[version.id] : undefined;
+  const sourceReady = source !== undefined;
+  return <section>
+    <ImgGen _id="vessel-original" database={database} showControls={false} />
+    {sourceReady ? <ImgGen _id="vessel-glazed" database={database}
+      prompt="Add a blue glaze while preserving this vessel's shape and composition"
+      images={[source]} /> : <p>{error ? error.message : pending ? "Loading saved source…" : "Source image unavailable"}</p>}
+  </section>;
+}
+```
+
+This is the same `_files`-shape contract documented in `fireproof.md`'s "Working with Files" section — read it first if you have not seen the platform's file/URL story.
+
+## Editing an Uploaded Image
+
+Pass a `File` object via `images` to run img2img. Adding a file picker that feeds into ImgGen:
+
+App.jsx
+
+```jsx
+<<<<<<< SEARCH
+export default function App() {
+  return (
+    <div>
+      <h2>Image Generator</h2>
+=======
+export default function App() {
+  const [file, setFile] = React.useState(null);
+
+  return (
+    <div>
+      <h2>Image Generator</h2>
+      <input type="file" accept="image/*" onChange={(e) => setFile(e.target.files[0])} />
+      {file && <ImgGen prompt="Make it look like a watercolor painting" images={[file]} />}
+>>>>>>> REPLACE
+```
+
+The input image is automatically resized (max 1024px) and compressed as JPEG before sending.
+
+`images` accepts **either** a raw `File` (fresh from an `<input type="file">`) **or** a stored Fireproof file ref — anything shaped like `{ file: () => Promise<File> }` passes straight through. So if the app has already saved the upload onto a doc, feed it back directly:
+
+```jsx
+// doc was saved earlier with: database.put({ ..., _files: { photo: file } })
+<ImgGen prompt="Turn this pet into a cute cartoon character" images={[doc._files.photo]} _id={doc._id} database={database} />
+```
+
+Do **not** invent wrappers like `images={x?.file ? something : undefined}` — pass the `_files` entry itself. If the stored ref might be absent, gate the whole `<ImgGen>` mount on it instead: `{doc._files?.photo && <ImgGen images={[doc._files.photo]} ... />}`.
+
+**Displaying an img2img result later** (gallery, detail view, reload): render by `_id` and do NOT re-pass `images` — `<ImgGen _id={doc._id} database={database} showControls={false} />` shows the stored version. ImgGen records which input produced each version, so re-passing that SAME input (the doc's own stored source, e.g. `images={[doc._files.photo]}` on every render) — or `_id` alone — just displays the saved result and will not force a fresh, billed generation. Passing a genuinely DIFFERENT input to the same `_id` DOES generate a new version — that's a requested img2img edit, not a reload: a new upload, a different stored ref, or a PRIOR OUTPUT fed back in to refine it. To force a new version from the CURRENT input, use the regenerate control (or set `generationId`). Generate once with `images`, display forever with `_id` alone.
+
+Do **not** set `model` for img2img: when an input image is present the platform automatically selects its image-**edit** default, which is tuned to produce edits faithful to the source. An explicit `model` override bypasses that routing — only use one when the app has a specific, stated reason.
+
+## Loading a Specific Doc
+
+Load a previously generated image by `_id` — if the doc has a `prompt` but no `_files` yet, the component generates one: `<ImgGen _id="my-image-id" database={database} />`
+
+## Illustrations That Are Part of an Item's Identity
+
+When an item's picture is intrinsic to what it is — a card in a deck, a creature in a bestiary, a product in a catalog, a character in a cast — render `<ImgGen>` **by default** for every such item that lacks an image, so the illustration appears as soon as the item does. Because ImgGen auto-generates when the target doc has a `prompt` but no `_files` yet, mounting it directly on the item is all it takes:
+
+```jsx
+<ImgGen
+  _id={card._id}
+  database={database}
+  prompt={`Illustration of ${card.title}. ${card.description ?? ""}`}
+/>
+```
+
+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.)
+
+## Gallery Pattern
+
+Keep gallery entries as app-owned records with the saved image's host `_id`. Query those
+records with `useLiveQuery`, then let each `<ImgGen>` read its associated media. This also
+keeps the app's title, caption and other editable fields separate from image versions:
+
+```jsx
+function Gallery() {
+  const { database, useLiveQuery } = useFireproof("artwork");
+  const { docs } = useLiveQuery("type", { key: "artwork" });
+  return <div>{docs.map(doc => <figure key={doc._id}>
+    <ImgGen _id={doc._id} database={database} showControls={false} />
+    <figcaption>{doc.caption}</figcaption>
+  </figure>)}</div>;
+}
+```
+
+## Caching and Versions
+
+- Same prompt produces a deterministic `_id` (hash-based), so results are cached across reloads.
+- Each image has a regenerate button that appends a new version (writes a new `_files.v<N>` entry).
+- Prev / next controls navigate between stored versions.
+- Set `showControls={false}` to hide regenerate and version navigation.
+
+## Choosing a Model
+
+Override the model per component: `<ImgGen prompt="An astronaut riding a horse" model="openai/gpt-5-image-mini" />`
+
+Model ids follow the `provider/model-name` form from the platform's model catalog. Unknown ids surface as an error in the component's error UI.
+
+#### Props
+
+- `prompt`: text prompt (required unless `_id` is provided)
+- `images`: array of `File` objects **or stored `_files` refs** for img2img (uses first image; only pass while generating — display stored results via `_id`)
+- `_id`: load a specific doc instead of generating
+- `database`: Fireproof db name or instance (default `"ImgGen"`)
+- `className`, `alt`, `style`: standard image styling
+- `showControls`: toggle regenerate + version nav (default `true`)
+- `model`: override the image-gen model for this component

package/llms/image-gen.js

@@ -2,6 +2,7 @@ export const imageGenConfig = {
     name: "image-gen",
     label: "Image Generation",
     description: "Generate and edit images",
+    initialVariant: true,
     cues: [
         "image",
         "images",

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,WAAW,EAAE,0BAA0B;IACvC,IAAI,EAAE;QACJ,OAAO;QACP,QAAQ;QACR,KAAK;QACL,OAAO;QACP,QAAQ;QACR,SAAS;QACT,UAAU;QACV,QAAQ;QACR,cAAc;QACd,MAAM;QACN,cAAc;QACd,gBAAgB;KACjB;IACD,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,WAAW,EAAE,0BAA0B;IACvC,cAAc,EAAE,IAAI;IACpB,IAAI,EAAE;QACJ,OAAO;QACP,QAAQ;QACR,KAAK;QACL,OAAO;QACP,QAAQ;QACR,SAAS;QACT,UAAU;QACV,QAAQ;QACR,cAAc;QACd,MAAM;QACN,cAAc;QACd,gBAAgB;KACjB;IACD,YAAY,EAAE,WAAW;IACzB,UAAU,EAAE,QAAQ;CACrB,CAAC"}

package/llms/index.d.ts

@@ -6,6 +6,7 @@ export { imageGenConfig } from "./image-gen.js";
 export { webAudioConfig } from "./web-audio.js";
 export { d3Config } from "./d3.js";
 export { threeJsConfig } from "./three-js.js";
+export { p5Config } from "./p5.js";
 export { voxelConfig } from "./voxel.js";
 export { webxrConfig } from "./webxr.js";
 export { useViewerConfig } from "./use-viewer.js";
@@ -15,4 +16,4 @@ export { accessConfig } from "./access.js";
 export { connectionsConfig } from "./connections.js";
 export { youtubeConfig } from "./youtube.js";
 export type { LlmConfig } from "./types.js";
-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, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig];
+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, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, 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

@@ -6,6 +6,7 @@ import { imageGenConfig } from "./image-gen.js";
 import { webAudioConfig } from "./web-audio.js";
 import { d3Config } from "./d3.js";
 import { threeJsConfig } from "./three-js.js";
+import { p5Config } from "./p5.js";
 import { voxelConfig } from "./voxel.js";
 import { webxrConfig } from "./webxr.js";
 import { useViewerConfig } from "./use-viewer.js";
@@ -22,6 +23,7 @@ export { imageGenConfig } from "./image-gen.js";
 export { webAudioConfig } from "./web-audio.js";
 export { d3Config } from "./d3.js";
 export { threeJsConfig } from "./three-js.js";
+export { p5Config } from "./p5.js";
 export { voxelConfig } from "./voxel.js";
 export { webxrConfig } from "./webxr.js";
 export { useViewerConfig } from "./use-viewer.js";
@@ -36,6 +38,7 @@ export const allConfigs = [
     webAudioConfig,
     d3Config,
     threeJsConfig,
+    p5Config,
     voxelConfig,
     fireproofConfig,
     webxrConfig,

package/llms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../jsr/llms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,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;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,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;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,YAAY;IACZ,cAAc;IACd,cAAc;IACd,QAAQ;IACR,aAAa;IACb,WAAW;IACX,eAAe;IACf,WAAW;IACX,eAAe;IACf,aAAa;IACb,gBAAgB;IAChB,aAAa;IACb,cAAc;IACd,YAAY;IACZ,iBAAiB;IACjB,aAAa;CACL,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../jsr/llms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,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;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,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;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,YAAY;IACZ,cAAc;IACd,cAAc;IACd,QAAQ;IACR,aAAa;IACb,QAAQ;IACR,WAAW;IACX,eAAe;IACf,WAAW;IACX,eAAe;IACf,aAAa;IACb,gBAAgB;IAChB,aAAa;IACb,cAAc;IACd,YAAY;IACZ,iBAAiB;IACjB,aAAa;CACL,CAAC"}

package/llms/p5.d.ts

@@ -0,0 +1,2 @@
+import type { LlmConfig } from "./types.js";
+export declare const p5Config: LlmConfig;

package/llms/p5.js

@@ -0,0 +1,28 @@
+export const p5Config = {
+    name: "p5",
+    label: "p5.js",
+    description: "p5.js creative-coding library for 2D canvas and WEBGL sketches: generative art, flow " +
+        "fields, particle systems, Perlin noise, seeded deterministic sketches, kaleidoscopes, " +
+        "screensavers, visualisers, drawing and painting toys, plotter-style patterns, still " +
+        "gallery renders with noLoop, and fragment shaders. Covers instance mode in React (one " +
+        "useEffect, instance.remove() on cleanup), the version-pinned esm.sh import, sizing from " +
+        "the host element, pixelDensity, randomSeed/noiseSeed determinism, trails, and touch. " +
+        "p5, p5.js, processing, sketch, creative coding, generative art, canvas art, noise field",
+    cues: [
+        "p5",
+        "p5.js",
+        "processing",
+        "sketch",
+        "generative art",
+        "creative coding",
+        "flow field",
+        "perlin noise",
+        "particle field",
+        "kaleidoscope",
+        "screensaver",
+    ],
+    importModule: "https://esm.sh/p5@1.11.13",
+    importName: "p5",
+    importType: "default",
+};
+//# sourceMappingURL=p5.js.map

package/llms/p5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"p5.js","sourceRoot":"","sources":["../../jsr/llms/p5.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAc;IACjC,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,OAAO;IACd,WAAW,EACT,uFAAuF;QACvF,wFAAwF;QACxF,sFAAsF;QACtF,wFAAwF;QACxF,0FAA0F;QAC1F,uFAAuF;QACvF,yFAAyF;IAC3F,IAAI,EAAE;QACJ,IAAI;QACJ,OAAO;QACP,YAAY;QACZ,QAAQ;QACR,gBAAgB;QAChB,iBAAiB;QACjB,YAAY;QACZ,cAAc;QACd,gBAAgB;QAChB,cAAc;QACd,aAAa;KACd;IAID,YAAY,EAAE,2BAA2B;IACzC,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,SAAS;CACtB,CAAC"}