@vibes.diy/use-vibes-types 0.15.16-dev-types-fix

package/LICENSE.md

@@ -0,0 +1,232 @@
+The contents of this repository are Copyright (c) corresponding authors and
+contributors, licensed under the `Permissive License Stack` meaning either of:
+
+- Apache-2.0 Software License: https://www.apache.org/licenses/LICENSE-2.0
+  ([...4tr2kfsq](https://dweb.link/ipfs/bafkreiankqxazcae4onkp436wag2lj3ccso4nawxqkkfckd6cg4tr2kfsq))
+
+- MIT Software License: https://opensource.org/licenses/MIT
+  ([...vljevcba](https://dweb.link/ipfs/bafkreiepofszg4gfe2gzuhojmksgemsub2h4uy2gewdnr35kswvljevcba))
+
+You may not use the contents of this repository except in compliance
+with one of the listed Licenses. For an extended clarification of the
+intent behind the choice of Licensing please refer to
+https://protocol.ai/blog/announcing-the-permissive-license-stack/
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the terms listed in this notice is distributed on
+an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied. See each License for the specific language
+governing permissions and limitations under that License.
+
+<!--- SPDX-License-Identifier: Apache-2.0 OR MIT -->
+
+`SPDX-License-Identifier: Apache-2.0 OR MIT`
+
+Verbatim copies of both licenses are included below:
+
+<details><summary>Apache-2.0 Software License</summary>
+
+```
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+```
+
+</details>
+
+<details><summary>MIT Software License</summary>
+
+```
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+```
+
+</details>

package/README.md

@@ -0,0 +1,549 @@
+# use-vibes
+
+A lightweight library that transforms any DOM element into an AI-powered micro-app.
+
+## Installation
+
+```bash
+pnpm add use-vibes
+```
+
+## Basic Usage
+
+```jsx
+import { ImgGen } from 'use-vibes';
+
+function MyComponent() {
+  // You can use ImgGen without any props - it includes its own form UI
+  return <ImgGen />;
+
+  // Or provide a prompt directly (bypasses the form UI completely)
+  // return <ImgGen prompt="A futuristic cityscape with flying cars" />;
+}
+```
+
+For image manipulation using base64 data:
+
+```jsx
+import { base64ToFile } from 'use-vibes';
+
+// Convert API response to a File object
+const imageFile = base64ToFile(imageResponse.data[0].b64_json, 'my-image.png');
+```
+
+## Core Features
+
+### Interactive Image Generation
+
+- **Zero-config Implementation**: Add AI image generation to any React app without any configuration
+
+  ```jsx
+  {
+    /* Includes a built-in form UI for prompt entry and image upload */
+  }
+  <ImgGen />;
+  ```
+
+- **One-line Implementation**: Directly specify a prompt for immediate generation (bypasses the form UI)
+
+  ```jsx
+  {
+    /* Starts generating immediately, no form shown to the user */
+  }
+  <ImgGen prompt="A sunset over mountains" />;
+  ```
+
+- **Automatic Database Integration**: All images are automatically stored in Fireproof database with version history
+
+  ```jsx
+  // Custom database name
+  <ImgGen prompt="Forest landscape" database="MyCustomDB" />
+
+  // Or pass a database instance
+  <ImgGen prompt="Forest landscape" database={myDbInstance} />
+  ```
+
+### Prompt Management
+
+- **Prompt Versioning**: Tracks the history of different prompts used to generate an image
+  - Uses a structured `prompts` object with timestamp-based keys
+  - Maintains `currentPromptKey` to reference the active prompt
+
+- **Prompt Editing**: Users can edit prompts directly in the overlay UI
+  - Double-click the prompt text to edit
+  - Press Enter to submit and regenerate with new prompt
+  - App receives updates via `onPromptEdit` callback
+  ```jsx
+  <ImgGen
+    prompt="Initial prompt"
+    onPromptEdit={(id, newPrompt) => {
+      console.log(`Document ${id} updated with new prompt: ${newPrompt}`);
+    }}
+  />
+  ```
+
+### Image Control & Manipulation
+
+- **Image Regeneration**: One-click regeneration with the same or edited prompt
+  - Preserves document history and adds new versions
+  - Uses a unique `generationId` to trigger regeneration while maintaining context
+
+- **Image Quality Control**: Set quality levels for output images
+
+  ```jsx
+  <ImgGen prompt="Detailed artwork" options={{ quality: 'high' }} />
+  ```
+
+- **Image Editing with Uploads**: Process existing images with AI
+
+  ```jsx
+  <ImgGen prompt="Turn this photo into a watercolor painting" images={[myImageFile]} />
+  ```
+
+- **Multiple Image Inputs**: Combine multiple images in one generation
+  ```jsx
+  <ImgGen prompt="Create a collage of these photos" images={[photo1, photo2, photo3]} />
+  ```
+
+### User Interface Components
+
+- **Interactive Overlay**: Toggle-able information and controls overlay
+  - Shows prompt text (editable)
+  - Version navigation controls
+  - Regenerate/refresh button
+  - Delete button
+
+  ```jsx
+  // Disable overlay for a minimal UI
+  <ImgGen prompt="Clean interface" overlay={false} />
+  ```
+
+- **Progress Visualization**: Shows generation progress with visual indicators
+  - Progress bar updates in real-time
+  - Automatic placeholder display during generation
+
+- **Error Handling UI**: Clean error states with informative messages
+  ```jsx
+  <ImgGen
+    prompt="Test error handling"
+    onError={(error) => {
+      console.error('Generation failed:', error.message);
+    }}
+  />
+  ```
+
+### File Management
+
+- **File Upload Interface**: Built-in support for image uploads
+  - Drag-and-drop capabilities
+  - File selection dialog
+  - Preview of uploaded content
+
+- **Base64 Conversion**: Convert between base64 and File objects
+
+  ```jsx
+  import { base64ToFile } from 'use-vibes';
+
+  // Convert API response to a File object
+  const imageFile = base64ToFile(imageResponse.data[0].b64_json, 'my-image.png');
+  ```
+
+## Integration Features
+
+### Event Callbacks
+
+- **Generation Lifecycle Events**: Track the complete generation process
+  ```jsx
+  <ImgGen
+    prompt="Track this generation"
+    onComplete={() => console.log('Generation complete!')}
+    onError={(error) => console.error('Generation failed:', error)}
+    onDelete={(id) => console.log(`Document ${id} deleted`)}
+    onDocumentCreated={(id) => console.log(`New document created: ${id}`)}
+  />
+  ```
+
+### State Management
+
+- **Loading States**: Component handles all loading states internally
+  - Initial waiting state
+  - Generation in progress state
+  - Upload waiting state
+  - Display state for completed images
+  - Error state
+
+- **Document Identity Tracking**: Smart re-mounting based on document changes
+  - Uses internal `mountKey` system to ensure clean state transitions
+  - Detects identity changes through document ID, prompt, or uploaded file documents
+
+### UI Customization
+
+- **Extensive Styling Options**: Multiple ways to customize appearance
+  - CSS Variables for global styling
+
+  ```css
+  :root {
+    --imggen-text-color: #222;
+    --imggen-overlay-bg: rgba(245, 245, 245, 0.85);
+    --imggen-accent: #0088ff;
+    --imggen-border-radius: 4px;
+  }
+  ```
+
+  - Custom classes for component-level styling
+
+  ```jsx
+  <ImgGen
+    prompt="Styled component"
+    classes={{
+      root: 'my-custom-container',
+      image: 'rounded-xl shadow-lg',
+      overlay: 'bg-slate-800/70 text-white',
+      progress: 'h-2 bg-green-500',
+    }}
+  />
+  ```
+
+### Gallery Integration
+
+- **Thumbnail Support**: Easily create image galleries
+
+  ```jsx
+  <div className="image-grid">
+    {imageDocuments.map((doc) => (
+      <ImgGen key={doc._id} _id={doc._id} className="thumbnail" />
+    ))}
+  </div>
+  ```
+
+- **Document Reuse**: Load existing documents by ID
+  ```jsx
+  <ImgGen _id="existing-document-id" />
+  ```
+
+## Implementation Modes
+
+The ImgGen component has several operational modes that it switches between automatically:
+
+1. **Placeholder Mode**: Initial state when no prompt or document ID is provided
+2. **Upload Waiting Mode**: When files are uploaded but waiting for a prompt
+3. **Generating Mode**: During the image generation process
+4. **Display Mode**: When showing a generated image with controls
+5. **Error Mode**: When an error occurs during generation
+
+The component automatically determines which mode to use based on the current state, providing a seamless experience for both developers and end-users.
+
+## Advanced Usage
+
+### Debug Mode
+
+Enable debug mode to see detailed console logs about component state:
+
+```jsx
+<ImgGen prompt="Debug this" options={{ debug: true }} />
+```
+
+### Custom Image Sizing
+
+Control output image dimensions with the size option:
+
+```jsx
+<ImgGen
+  prompt="Landscape format"
+  options={{ size: '1536x1024' }} // Landscape
+/>
+
+<ImgGen
+  prompt="Portrait format"
+  options={{ size: '1024x1536' }} // Portrait
+/>
+```
+
+# Advanced Usage
+
+This guide covers the implementation, configuration, and best practices for using the ImgGen component from the use-vibes library.
+
+## Installation
+
+```bash
+pnpm add use-vibes
+```
+
+### Styling
+
+The ImgGen component uses inline styles with centralized theme constants, so **no separate CSS setup is required**. All styling is self-contained within the component.
+
+## Basic Usage
+
+### Simple Image Generation
+
+Add AI image generation to any React app with minimal code:
+
+```jsx
+import { ImgGen } from 'use-vibes';
+
+function MyComponent() {
+  return (
+    <div>
+      <ImgGen prompt="A sunset over mountains" />
+    </div>
+  );
+}
+```
+
+### Configuration Options
+
+Configure image generation with the `options` prop:
+
+```jsx
+<ImgGen
+  prompt="A detailed cityscape"
+  options={{
+    model: 'gpt-image-1',
+    quality: 'high',
+    size: '1024x1024',
+    debug: false,
+  }}
+/>
+```
+
+### Available Props
+
+| Prop                | Type               | Description                                                             |
+| ------------------- | ------------------ | ----------------------------------------------------------------------- |
+| `prompt`            | string             | Text prompt for image generation (required unless `_id` is provided)    |
+| `_id`               | string             | Document ID to load a specific image instead of generating a new one    |
+| `className`         | string             | CSS class name for the image element                                    |
+| `alt`               | string             | Alt text for the image (defaults to prompt)                             |
+| `images`            | File[]             | Array of images to edit or combine with AI                              |
+| `options`           | object             | Configuration options (see table below)                                 |
+| `database`          | string \| Database | Database name or instance to use for storing images                     |
+| `onComplete`        | function           | Callback when image load completes successfully                         |
+| `onError`           | function           | Callback when image load fails, receives the error as parameter         |
+| `onDelete`          | function           | Callback when an image is deleted, receives the document ID             |
+| `onPromptEdit`      | function           | Callback when the prompt is edited, receives document ID and new prompt |
+| `onDocumentCreated` | function           | Callback when a new document is created via drop or file picker         |
+| `overlay`           | boolean            | Whether to show overlay controls and info button (default: `true`)      |
+| `classes`           | object             | Custom CSS classes for styling component parts                          |
+| `debug`             | boolean            | Enable debug logging                                                    |
+
+### Options Object Properties
+
+| Property  | Type    | Description                                                              |
+| --------- | ------- | ------------------------------------------------------------------------ |
+| `model`   | string  | Model to use for image generation, defaults to 'gpt-image-1'             |
+| `size`    | string  | Size of the generated image (1024x1024, 1536x1024, 1024x1536, or 'auto') |
+| `quality` | string  | Quality of the generated image (high, medium, low, or auto)              |
+| `debug`   | boolean | Enable debug logging, defaults to false                                  |
+
+## Advanced Features
+
+### Prompt Management
+
+The ImgGen component tracks the history of different prompts used to generate an image:
+
+```jsx
+<ImgGen
+  prompt="Initial prompt"
+  onPromptEdit={(id, newPrompt) => {
+    console.log(`Document ${id} updated with new prompt: ${newPrompt}`);
+  }}
+/>
+```
+
+Users can edit prompts directly by double-clicking the prompt text in the overlay UI, then pressing Enter to submit and regenerate with the new prompt.
+
+### Image Control & Manipulation
+
+#### Image Regeneration
+
+The component supports one-click regeneration, preserving document history while adding new versions:
+
+```jsx
+// The regeneration happens internally when the user clicks the refresh button
+// or when a new prompt is submitted
+```
+
+#### Image Quality Control
+
+Set quality levels for output images:
+
+```jsx
+<ImgGen prompt="Detailed artwork" options={{ quality: 'high' }} />
+```
+
+#### Image Editing with Uploads
+
+Process existing images with AI:
+
+```jsx
+<ImgGen prompt="Turn this photo into a watercolor painting" images={[myImageFile]} />
+```
+
+#### Multiple Image Inputs
+
+Combine multiple images in one generation:
+
+```jsx
+<ImgGen prompt="Create a collage of these photos" images={[photo1, photo2, photo3]} />
+```
+
+### Database Integration
+
+All images are automatically stored in a Fireproof database with version history:
+
+```jsx
+// Custom database name
+<ImgGen prompt="Forest landscape" database="MyCustomDB" />
+
+// Or pass a database instance
+<ImgGen prompt="Forest landscape" database={myDbInstance} />
+```
+
+### Event Callbacks
+
+Track the complete generation process with lifecycle events:
+
+```jsx
+<ImgGen
+  prompt="Track this generation"
+  onComplete={() => console.log('Generation complete!')}
+  onError={(error) => console.error('Generation failed:', error)}
+  onDelete={(id) => console.log(`Document ${id} deleted`)}
+  onDocumentCreated={(id) => console.log(`New document created: ${id}`)}
+/>
+```
+
+### UI Controls
+
+Toggle the information overlay and controls:
+
+```jsx
+// Disable overlay for a minimal UI
+<ImgGen prompt="Clean interface" overlay={false} />
+```
+
+The overlay includes:
+
+- Prompt text (editable)
+- Version navigation controls
+- Regenerate/refresh button
+- Delete button
+
+### File Management
+
+#### Base64 Conversion
+
+Convert between base64 and File objects:
+
+```jsx
+import { base64ToFile } from 'use-vibes';
+
+// Convert API response to a File object
+const imageFile = base64ToFile(imageResponse.data[0].b64_json, 'my-image.png');
+```
+
+## Styling and Customization
+
+### CSS Variables
+
+The component uses centralized theme constants from `imgGenTheme` for consistent styling. All styles are applied inline using JavaScript objects, eliminating the need for external CSS files.
+
+### Custom Classes
+
+For more granular control, provide a `classes` object with custom CSS classes for specific component parts:
+
+```jsx
+<ImgGen
+  prompt="Styled component"
+  classes={{
+    root: 'my-custom-container',
+    image: 'rounded-xl shadow-lg',
+    overlay: 'bg-slate-800/70 text-white',
+    progress: 'h-2 bg-green-500',
+    button: 'hover:bg-blue-600',
+  }}
+/>
+```
+
+### Available Class Slots
+
+| Class Property  | Description                      |
+| --------------- | -------------------------------- |
+| `root`          | Main container element           |
+| `image`         | The image element                |
+| `container`     | Container for image and controls |
+| `overlay`       | Overlay panel with controls      |
+| `progress`      | Progress indicator               |
+| `placeholder`   | Placeholder shown during loading |
+| `error`         | Error message container          |
+| `controls`      | Control buttons container        |
+| `button`        | Individual buttons               |
+| `prompt`        | Prompt text/input container      |
+| `deleteOverlay` | Delete confirmation dialog       |
+
+## Gallery Implementation
+
+### Creating an Image Gallery
+
+Easily create image galleries using document IDs:
+
+```jsx
+<div className="image-grid">
+  {imageDocuments.map((doc) => (
+    <ImgGen key={doc._id} _id={doc._id} className="thumbnail" />
+  ))}
+</div>
+```
+
+### Loading Existing Documents
+
+Load existing documents by `_id`:
+
+```jsx
+<ImgGen _id="existing-document-id" />
+```
+
+## Operation Modes
+
+The ImgGen component has several operational modes that it switches between automatically:
+
+1. **Placeholder Mode**: Initial state when no prompt or document ID is provided
+2. **Upload Waiting Mode**: When files are uploaded but waiting for a prompt
+3. **Generating Mode**: During the image generation process
+4. **Display Mode**: When showing a generated image with controls
+5. **Error Mode**: When an error occurs during generation
+
+## Advanced Usage Examples
+
+### Debug Mode
+
+Enable debug mode to see detailed console logs about component state:
+
+```jsx
+<ImgGen prompt="Debug this" options={{ debug: true }} />
+```
+
+### Custom Image Sizing
+
+Control output image dimensions with the size option:
+
+```jsx
+<ImgGen
+  prompt="Landscape format"
+  options={{ size: '1536x1024' }} // Landscape
+/>
+
+<ImgGen
+  prompt="Portrait format"
+  options={{ size: '1024x1536' }} // Portrait
+/>
+```
+
+### Browser Compatibility
+
+This library is compatible with all modern browsers that support React 18+ and ES6 features.
+
+## License
+
+MIT+Apache

package/image-gen-types.d.ts

@@ -0,0 +1,66 @@
+import type { Database, DocWithId } from 'use-fireproof';
+import { ImageGenOptions, ImageResponse } from 'call-ai';
+export interface PromptEntry {
+    readonly text: string;
+    readonly created: number;
+}
+export interface ImageDocumentPlain {
+    readonly _rev?: string;
+    readonly type: 'image';
+    readonly prompt?: string;
+    readonly prompts?: Record<string, PromptEntry>;
+    readonly created: number;
+    readonly currentVersion: number;
+    readonly versions: VersionInfo[];
+    readonly currentPromptKey: string;
+}
+export type ImageDocument = DocWithId<ImageDocumentPlain>;
+export type PartialImageDocument = DocWithId<Partial<ImageDocumentPlain>>;
+export interface VersionInfo {
+    readonly id: string;
+    readonly created: number;
+    readonly promptKey?: string;
+}
+export type GenerationPhase = 'idle' | 'generating' | 'complete' | 'error';
+export interface UseImageGenOptions {
+    readonly prompt: string;
+    readonly _id: string;
+    readonly _rev?: string;
+    readonly database: string | Database;
+    readonly options: Partial<ImageGenOptions>;
+    readonly generationId: string;
+    readonly skip: boolean;
+    readonly type?: string;
+    readonly currentVersion?: number;
+    readonly versions?: {
+        readonly id: string;
+        readonly created: number;
+        readonly promptKey: string;
+    }[];
+    readonly _files?: Record<string, File>;
+    readonly prompts?: Record<string, PromptEntry>;
+    readonly editedPrompt: string;
+}
+export interface UseImageGenResult {
+    readonly imageData?: string | null;
+    readonly loading: boolean;
+    readonly progress: number;
+    readonly error?: Error | null;
+    readonly size?: {
+        readonly width: number;
+        readonly height: number;
+    };
+    readonly document?: PartialImageDocument | null;
+}
+export interface ModuleState {
+    readonly pendingImageGenCalls: Map<string, Promise<ImageResponse>>;
+    readonly pendingPrompts: Set<string>;
+    readonly processingRequests: Set<string>;
+    readonly requestTimestamps: Map<string, number>;
+    requestCounter: number;
+    readonly createdDocuments: Map<string, string>;
+    readonly pendingDocumentCreations: Map<string, Promise<{
+        id: string;
+        doc: ImageDocument;
+    }>>;
+}

package/image-gen-types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=image-gen-types.js.map

package/image-gen-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-gen-types.js","sourceRoot":"","sources":["../jsr/image-gen-types.ts"],"names":[],"mappings":""}

package/index.d.ts

@@ -0,0 +1,28 @@
+export interface ImgGenClasses {
+    readonly root: string;
+    readonly container: string;
+    readonly image: string;
+    readonly overlay: string;
+    readonly progress: string;
+    readonly placeholder: string;
+    readonly error: string;
+    readonly controls: string;
+    readonly button: string;
+    readonly prompt: string;
+    readonly deleteOverlay: string;
+    readonly dropZone: string;
+    readonly uploadWaiting: string;
+}
+export interface RuntimeError {
+    type: string;
+    message: string;
+    source?: string;
+    lineno?: number;
+    colno?: number;
+    stack?: string;
+    reason?: string;
+    timestamp: string;
+    errorType?: 'SyntaxError' | 'ReferenceError' | 'TypeError' | 'DatabaseError' | 'Other';
+}
+export * from './vibes-gen-types.js';
+export * from './image-gen-types.js';

package/index.js

@@ -0,0 +1,3 @@
+export * from './vibes-gen-types.js';
+export * from './image-gen-types.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../jsr/index.ts"],"names":[],"mappings":"AA4CA,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC"}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@vibes.diy/use-vibes-types",
+  "version": "0.15.16-dev-types-fix",
+  "type": "module",
+  "description": "Core components and utilities for use-vibes (internal workspace package)",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    }
+  },
+  "license": "Apache-2.0",
+  "dependencies": {
+    "call-ai": "^0.15.16-dev-types-fix",
+    "use-fireproof": "^0.23.15"
+  },
+  "peerDependencies": {
+    "react": ">=19.1.0"
+  },
+  "devDependencies": {
+    "@fireproof/core-cli": "^0.23.15",
+    "@types/react": "~19.2.2",
+    "@vitest/browser-playwright": "^4.0.2",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "core-cli tsc"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": [
+    "/home/runner/work/vibes.diy/vibes.diy/tsconfig.dist.json"
+  ],
+  "compilerOptions": {
+    "outDir": "../npm/",
+    "noEmit": false
+  },
+  "include": [
+    "**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    ".git",
+    ".vscode"
+  ]
+}

package/vibes-gen-types.d.ts

@@ -0,0 +1,42 @@
+import { ComponentType } from 'react';
+export type GeneratedComponentProps = Record<string, unknown>;
+export interface UseVibesOptions {
+    database?: string;
+    model?: string;
+    skip?: boolean;
+    regenerate?: boolean;
+    dependencies?: string[];
+    _id?: string;
+}
+export interface UseVibesResult {
+    App: ComponentType<GeneratedComponentProps> | null;
+    code: string | null;
+    loading: boolean;
+    error: Error | null;
+    progress: number;
+    regenerate: () => void;
+    document?: VibeDocument | null;
+}
+export interface VibeDocument {
+    _id: string;
+    prompt: string;
+    code: string;
+    title: string;
+    dependencies: string[];
+    model: string;
+    created_at: number;
+    version: number;
+    metadata?: {
+        tokens_used?: number;
+        generation_time?: number;
+        options_hash?: string;
+    };
+}
+export interface UseVibesState {
+    App: ComponentType<GeneratedComponentProps> | null;
+    code: string | null;
+    loading: boolean;
+    error: Error | null;
+    progress: number;
+    document: VibeDocument | null;
+}

package/vibes-gen-types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=vibes-gen-types.js.map

package/vibes-gen-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vibes-gen-types.js","sourceRoot":"","sources":["../jsr/vibes-gen-types.ts"],"names":[],"mappings":""}