@vibes.diy/use-vibes-base 0.12.0-dev-preview

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/components/ControlsBar.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ImgGenClasses } from '../utils/style-utils.js';
+interface ControlsBarProps {
+    readonly handleDeleteConfirm: () => void;
+    readonly handlePrevVersion: () => void;
+    readonly handleNextVersion: () => void;
+    readonly handleRegen: () => void;
+    readonly versionIndex: number;
+    readonly totalVersions: number;
+    readonly classes?: Partial<ImgGenClasses>;
+    readonly showControls?: boolean;
+    readonly editedPrompt: string | null;
+    readonly promptText: string;
+    readonly progress?: number;
+    readonly showDelete?: boolean;
+    readonly versionFlash?: boolean;
+    readonly isRegenerating?: boolean;
+}
+export declare function ControlsBar({ handleDeleteConfirm, handlePrevVersion, handleNextVersion, handleRegen, versionIndex, totalVersions, classes, showControls, editedPrompt, promptText, progress, showDelete, versionFlash, isRegenerating }: ControlsBarProps): React.JSX.Element;
+export {};

package/components/ControlsBar.js

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { combineClasses, defaultClasses } from '../utils/style-utils.js';
+import { imgGenStyles, imgGenTheme } from '../utils/styles.js';
+import { logDebug } from '../utils/debug.js';
+export function ControlsBar({ handleDeleteConfirm, handlePrevVersion, handleNextVersion, handleRegen, versionIndex, totalVersions, classes = defaultClasses, showControls = true, editedPrompt, promptText, progress = 100, showDelete = true, versionFlash = false, isRegenerating = false, }) {
+    const [showConfirmation, setShowConfirmation] = React.useState(false);
+    const cancelTimerRef = React.useRef(null);
+    const isConfirming = showConfirmation;
+    const onDeleteClick = () => {
+        if (isConfirming) {
+            logDebug('ControlsBar: Delete confirmed, calling handleDeleteConfirm');
+            handleDeleteConfirm();
+            setShowConfirmation(false);
+            if (cancelTimerRef.current) {
+                window.clearTimeout(cancelTimerRef.current);
+                cancelTimerRef.current = null;
+            }
+        }
+        else {
+            logDebug('ControlsBar: Showing delete confirmation');
+            setShowConfirmation(true);
+            cancelTimerRef.current = window.setTimeout(() => {
+                setShowConfirmation(false);
+            }, 6500);
+        }
+    };
+    React.useEffect(() => {
+        return () => {
+            if (cancelTimerRef.current) {
+                window.clearTimeout(cancelTimerRef.current);
+            }
+        };
+    }, []);
+    return (React.createElement(React.Fragment, null, progress < 100 && (React.createElement("div", { className: "imggen-progress", style: {
+            ...imgGenStyles.progress,
+            width: `${progress}%`,
+        } })), React.createElement("div", { className: combineClasses(classes.controls), style: imgGenStyles.controls }, showControls ? (React.createElement(React.Fragment, null, React.createElement("div", { style: { display: 'flex', gap: '6px', alignItems: 'center', flex: 1 } }, showDelete && (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } }, React.createElement("button", { "aria-label": "Delete image", onClick: onDeleteClick, className: combineClasses('imggen-button imggen-delete-button', classes.button), style: {
+            ...imgGenStyles.button,
+            backgroundColor: isConfirming
+                ? imgGenTheme.colors.errorBorder
+                : imgGenStyles.button.background,
+            color: isConfirming ? 'white' : imgGenStyles.button.color,
+            opacity: isConfirming ? 1 : imgGenStyles.button.opacity,
+        } }), isConfirming && (React.createElement("div", { className: "fade-transition", style: { animationDelay: '6s' } }, React.createElement("button", { onClick: () => {
+            handleDeleteConfirm();
+            setShowConfirmation(false);
+        }, "aria-label": "Confirm delete", style: {
+            fontSize: imgGenTheme.typography.fontSize,
+            fontWeight: 'bold',
+            whiteSpace: 'nowrap',
+            border: `1px solid ${imgGenTheme.colors.errorBorder}`,
+            background: imgGenTheme.colors.errorBorder,
+            color: 'white',
+            borderRadius: imgGenTheme.dimensions.borderRadius,
+            cursor: 'pointer',
+            padding: '2px 8px',
+        } }, "Delete image"), React.createElement("button", { onClick: () => {
+            logDebug('ControlsBar: Delete canceled');
+            setShowConfirmation(false);
+            if (cancelTimerRef.current) {
+                window.clearTimeout(cancelTimerRef.current);
+            }
+        }, "aria-label": "Cancel delete", style: {
+            fontSize: imgGenTheme.typography.fontSize,
+            whiteSpace: 'nowrap',
+            border: 'none',
+            background: 'none',
+            color: imgGenTheme.colors.text,
+            cursor: 'pointer',
+            padding: '0 4px',
+        } }, "Cance")))))), React.createElement("div", { className: "imggen-control-group", style: imgGenStyles.controlGroup }, totalVersions > 1 && (React.createElement("button", { "aria-label": "Previous version", disabled: versionIndex === 0, onClick: handlePrevVersion, className: combineClasses('imggen-button', classes.button), style: imgGenStyles.button }, "\u25C0")), totalVersions > 1 && (React.createElement("span", { className: `imggen-version-indicator version-indicator ${versionFlash ? 'imggen-version-flash' : ''}`, "aria-live": "polite" }, versionIndex + 1, " / ", totalVersions)), totalVersions > 1 && (React.createElement("button", { "aria-label": "Next version", disabled: versionIndex >= totalVersions - 1, onClick: handleNextVersion, className: combineClasses('imggen-button', classes.button), style: imgGenStyles.button }, "\u25B6")), React.createElement("button", { "aria-label": "Regenerate image", onClick: () => {
+            handleRegen();
+        }, disabled: isRegenerating, className: combineClasses('imggen-button', classes.button, editedPrompt !== null && editedPrompt.trim() !== promptText
+            ? 'imggen-button-highlight'
+            : '', isRegenerating ? 'imggen-button-disabled' : ''), style: {
+            ...imgGenStyles.button,
+            backgroundColor: editedPrompt !== null && editedPrompt.trim() !== promptText
+                ? imgGenTheme.colors.accent
+                : imgGenStyles.button.background,
+            opacity: isRegenerating ? 0.3 : imgGenStyles.button.opacity,
+            cursor: isRegenerating ? 'not-allowed' : imgGenStyles.button.cursor,
+        } }, React.createElement("span", { className: isRegenerating ? 'imggen-regen-spinning' : '' }, "\u27F3"))))) : progress < 100 ? (React.createElement("div", { className: "imggen-status-text", style: imgGenStyles.statusText }, "Generating..")) : null)));
+}
+//# sourceMappingURL=ControlsBar.js.map

package/components/ControlsBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlsBar.js","sourceRoot":"","sources":["../../jsr/components/ControlsBar.tsx"],"names":[],"mappings":"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"}