use-vibes 0.4.0 → 0.4.3

package/README.md

@@ -91,6 +91,7 @@ Double-click the prompt text in the overlay to edit it. Press Enter to submit ch
 ##### Image Regeneration
 
 When regenerating images, the component will:
+
 - Use the edited prompt if one has been provided (via `editedPrompt` prop, `onPromptEdit` callback, or direct editing in the UI)
 - Fall back to the original prompt from the document if no edits were made
 - Preserve versions under the same document ID to maintain history

package/dist/components/ControlsBar.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ImgGenClasses } from '../utils/style-utils';
+interface ControlsBarProps {
+    /** Handle delete confirmation */
+    handleDeleteConfirm: () => void;
+    handlePrevVersion: () => void;
+    handleNextVersion: () => void;
+    handleRegen: () => void;
+    versionIndex: number;
+    totalVersions: number;
+    /** Custom CSS classes for styling component parts */
+    classes?: ImgGenClasses;
+    /** Show control buttons (defaults to true) */
+    showControls?: boolean;
+    /** Edited prompt for highlighting regenerate button */
+    editedPrompt: string | null;
+    /** Original prompt text for comparison */
+    promptText: string;
+    /** Progress value for generation (0-100), shows progress bar when < 100 */
+    progress?: number;
+    /** Show delete button (defaults to true) */
+    showDelete?: boolean;
+    /** Whether to flash the version indicator when a new version is added */
+    versionFlash?: boolean;
+    /** Whether the regeneration is currently in progress */
+    isRegenerating?: boolean;
+}
+/**
+ * ControlsBar component - Displays controls for deleting, navigating between versions, and regenerating
+ */
+export declare function ControlsBar({ handleDeleteConfirm, handlePrevVersion, handleNextVersion, handleRegen, versionIndex, totalVersions, classes, showControls, editedPrompt, promptText, progress, showDelete, versionFlash, isRegenerating, }: ControlsBarProps): React.JSX.Element;
+export {};

package/dist/components/ControlsBar.js

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { combineClasses, defaultClasses } from '../utils/style-utils';
+/**
+ * ControlsBar component - Displays controls for deleting, navigating between versions, and regenerating
+ */
+export function ControlsBar({ handleDeleteConfirm, handlePrevVersion, handleNextVersion, handleRegen, versionIndex, totalVersions, classes = defaultClasses, showControls = true, editedPrompt, promptText, progress = 100, showDelete = true, versionFlash = false, isRegenerating = false, }) {
+    // State for managing delete confirmation
+    const [showConfirmation, setShowConfirmation] = React.useState(false);
+    // Timer ref for automatic cancellation
+    const cancelTimerRef = React.useRef(null);
+    // Use external state if provided
+    const isConfirming = showConfirmation;
+    // Handle delete click
+    const onDeleteClick = () => {
+        if (isConfirming) {
+            // User clicked delete while confirmation is showing - confirm the delete
+            handleDeleteConfirm();
+            setShowConfirmation(false);
+            if (cancelTimerRef.current) {
+                window.clearTimeout(cancelTimerRef.current);
+                cancelTimerRef.current = null;
+            }
+        }
+        else {
+            // Show confirmation
+            setShowConfirmation(true);
+            // Set timer to auto-hide confirmation after 3 seconds
+            cancelTimerRef.current = window.setTimeout(() => {
+                setShowConfirmation(false);
+            }, 3000);
+        }
+    };
+    // Clean up timer on unmount
+    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: {
+                width: `${progress}%`,
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                height: 'var(--imggen-progress-height)',
+                zIndex: 20,
+            } })),
+        React.createElement("div", { className: combineClasses('imggen-controls', classes.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: {
+                        position: 'static',
+                        width: 'var(--imggen-button-size)',
+                        height: 'var(--imggen-button-size)',
+                        backgroundColor: isConfirming ? 'var(--imggen-error-border)' : undefined,
+                        color: isConfirming ? 'white' : undefined,
+                        opacity: isConfirming ? 1 : undefined,
+                    } }, "\u2715"),
+                isConfirming && (React.createElement("span", { style: {
+                        fontSize: 'var(--imggen-font-size)',
+                        fontWeight: 'bold',
+                        fontStyle: 'italic',
+                        whiteSpace: 'nowrap',
+                    } }, "Confirm delete, are you sure?"))))),
+            React.createElement("div", { className: "imggen-control-group" },
+                totalVersions > 1 && (React.createElement("button", { "aria-label": "Previous version", disabled: versionIndex === 0, onClick: handlePrevVersion, className: combineClasses('imggen-button', classes.button) }, "\u25C0\uFE0E")),
+                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) }, "\u25B6\uFE0E")),
+                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' : '') },
+                    React.createElement("span", { className: isRegenerating ? 'imggen-regen-spinning' : '' }, "\u27F3"))))) : progress < 100 ? (React.createElement("div", { className: "imggen-status-text" }, "Generating...")) : null)));
+}
+//# sourceMappingURL=ControlsBar.js.map

package/dist/components/ControlsBar.js.map

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

package/dist/components/ImgGen.css

@@ -0,0 +1,523 @@
+/* ImgGen Component Styling System
+ * This file contains all base styles for the ImgGen component hierarchy
+ * Uses CSS custom properties to enable easy theming without affecting layout
+ */
+
+/* ---- CSS Custom Properties (Variables) ---- */
+:root {
+  /* Colors */
+  --imggen-text-color: #333;
+  --imggen-background: #333333;
+  --imggen-overlay-bg: rgba(255, 255, 255, 0.5);
+  --imggen-accent: #0066cc;
+  --imggen-flash: #fe0;
+  --imggen-error-bg: rgba(0, 0, 0, 0.7);
+  --imggen-error-border: #ff6666;
+  --imggen-error-text: #ff6666;
+  --imggen-button-bg: rgba(255, 255, 255, 0.7);
+  --imggen-error-text-body: #ffffff;
+  --imggen-delete-hover-color: #ff3333;
+  
+  /* Dimensions */
+  --imggen-border-radius: 8px;
+  --imggen-padding: 8px;
+  --imggen-button-size: 28px;
+  --imggen-progress-height: 8px;
+  
+  /* Typography */
+  --imggen-font-size: 14px;
+  --imggen-font-weight: bold;
+  --imggen-line-height: 1.5;
+  
+  /* Effects */
+  --imggen-blur-radius: 4px;
+  --imggen-transition-speed: 0.2s;
+  --imggen-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* ---- Core Components ---- */
+
+/* Root container */
+.imggen-root {
+  position: relative;
+  max-width: 100%;
+  border-radius: var(--imggen-border-radius);
+  overflow: hidden;
+}
+
+/* Image container */
+.imggen-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* Image container with expand button */
+.imggen-image-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--imggen-border-radius);
+}
+
+/* Expand button in upper left corner */
+.imggen-expand-button {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 20;
+  background-color: var(--imggen-button-bg);
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  opacity: 0; /* Initially invisible */
+  transition: opacity var(--imggen-transition-speed) ease, transform var(--imggen-transition-speed) ease;
+  padding: 0;
+  color: var(--imggen-text-color);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* Show button on container hover */
+.imggen-image-container:hover .imggen-expand-button {
+  opacity: 0.5;
+}
+
+.imggen-expand-button:hover {
+  opacity: 1 !important;
+  transform: scale(1.1);
+}
+
+.imggen-expand-button svg {
+  width: 20px;
+  height: 20px;
+}
+
+@media (hover: none) {
+  /* On touch devices, always show the expand button */
+  .imggen-expand-button {
+    opacity: 0.5 !important;
+  }
+}
+
+/* The image itself - limited styling since we can't change ImgFile */
+.imggen-image {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: var(--imggen-border-radius);
+}
+
+/* ---- Overlays ---- */
+
+/* Base overlay that appears at the bottom */
+.imggen-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--imggen-padding);
+  background-color: var(--imggen-overlay-bg);
+  backdrop-filter: blur(var(--imggen-blur-radius));
+  transition: opacity var(--imggen-transition-speed) ease;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Top line row with prompt and version indicator */
+.imggen-top-line {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+/* Prompt text container */
+.imggen-prompt {
+  width: 100%;
+  padding: 4px;
+  margin-bottom: 8px;
+}
+
+/* Prompt text styling */
+.imggen-prompt-text {
+  color: var(--imggen-text-color);
+  width: 100%;
+  text-align: center;
+  font-weight: var(--imggen-font-weight);
+  padding: 2px;
+  cursor: pointer;
+}
+
+/* Prompt input for editing */
+.imggen-prompt-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: var(--imggen-font-size);
+  font-weight: var(--imggen-font-weight);
+  color: var(--imggen-text-color);
+  background-color: white;
+}
+
+.imggen-edit-mode {
+  border: 2px solid var(--imggen-accent);
+  padding: 6px 10px;
+  border-radius: 6px;
+}
+
+/* Controls row */
+.imggen-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-top: 2px;
+}
+
+/* Control button group */
+.imggen-control-group {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+/* ---- Buttons ---- */
+
+/* Base button styling */
+.imggen-button {
+  background: var(--imggen-button-bg);
+  border-radius: 50%;
+  width: var(--imggen-button-size);
+  height: var(--imggen-button-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity var(--imggen-transition-speed) ease;
+  padding: 0;
+  font-size: var(--imggen-font-size);
+  color: var(--imggen-text-color);
+}
+
+.imggen-button-highlight {
+  background-color: var(--imggen-accent);
+  color: white;
+}
+
+.imggen-button:hover:not(:disabled) {
+  opacity: 1;
+}
+
+.imggen-button:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+/* Info button (appears at bottom left) */
+.imggen-info-button {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: #fff;
+  opacity: 0.5;
+  cursor: pointer;
+  padding: 0;
+  transition: opacity var(--imggen-transition-speed) ease;
+}
+
+.imggen-info-button:hover {
+  opacity: 1;
+}
+
+/* Delete button (top right corner) */
+.imggen-delete-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 20;
+  background-color: var(--imggen-button-bg);
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  font-size: 16px;
+  opacity: 0.5;
+  transition: opacity var(--imggen-transition-speed) ease;
+  padding: 0;
+}
+
+.imggen-delete-button:hover {
+  opacity: 1;
+  color: var(--imggen-delete-hover-color);
+}
+
+/* ---- Progress Indicators ---- */
+
+/* Progress bar container */
+.imggen-progress-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 50;
+}
+
+/* Actual progress bar */
+.imggen-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: var(--imggen-progress-height);
+  background-color: var(--imggen-accent);
+  transition: width 0.3s ease-in-out;
+  z-index: 11; /* Ensure it appears above the overlay */
+}
+
+/* Version indicator text */
+.imggen-version-indicator {
+  font-size: var(--imggen-font-size);
+  color: var(--imggen-text-color);
+  transition: all 0.3s ease-in-out;
+}
+
+/* Version flash animation */
+@keyframes version-flash {
+  0% { 
+    color: var(--imggen-text-color);
+    transform: scale(1); 
+  }
+  30% { 
+    color: var(--imggen-flash);
+    transform: scale(1.3); 
+    /* font-weight: bold; */
+  }
+  70% { 
+    color: var(--imggen-flash);
+    transform: scale(1.1);
+    font-weight: bold;
+  }
+  100% { 
+    color: var(--imggen-text-color);
+    transform: scale(1);
+  }
+}
+
+.imggen-version-flash {
+  animation: version-flash 2s ease-in-out;
+}
+
+/* Regenerate spinner animation */
+@keyframes regen-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.imggen-regen-spinning {
+  animation: regen-spin 2s linear infinite;
+  display: inline-block;
+}
+
+/* Status text (e.g. Generating...) */
+.imggen-status-text {
+  width: 100%;
+  text-align: center;
+  font-size: var(--imggen-font-size);
+  color: var(--imggen-text-color);
+  opacity: 0.7;
+  padding: 8px 0;
+}
+
+/* ---- Placeholders & Errors ---- */
+
+/* Placeholder styling */
+.imggen-placeholder {
+  width: 100%;
+  height: 100%;
+  background-color: var(--imggen-background);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+/* Error container wrapper to ensure consistent dark background */
+.imggen-error-container {
+  background-color: #222;
+  aspect-ratio: 1 / 1; /* Maintain square aspect ratio like images */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  width: 100%;
+  border-radius: var(--imggen-border-radius);
+  overflow: hidden;
+}
+
+/* Error container */
+.imggen-error {
+  background-color: #000;
+  color: var(--imggen-error-text);
+  padding: 1.5rem;
+  border-radius: var(--imggen-border-radius);
+  border: 1px solid var(--imggen-error-border);
+  box-shadow: var(--imggen-shadow);
+  max-width: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+/* Error title */
+.imggen-error-title {
+  color: var(--imggen-error-text);
+  margin-top: 0;
+  font-weight: bold;
+  font-size: 18px;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+/* Error message */
+.imggen-error-message {
+  white-space: pre-wrap;
+  color: var(--imggen-error-text-body);
+  font-size: var(--imggen-font-size);
+  line-height: var(--imggen-line-height);
+  text-align: left;
+  font-family: monospace, sans-serif;
+  margin-bottom: 0;
+}
+
+/* Error display in full-screen backdrop */
+.imggen-backdrop-error {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  box-sizing: border-box;
+  background-color: #222; /* Dark gray background */
+  /* aspect-ratio: 1 / 1; Maintain square aspect ratio like images */
+  border-radius: var(--imggen-border-radius);
+}
+
+/* Delete confirmation overlay */
+.imggen-delete-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 30;
+  padding: 20px;
+  text-align: center;
+}
+
+/* Delete confirmation message */
+.imggen-delete-message {
+  color: white;
+  font-size: 16px;
+  margin-bottom: 20px;
+}
+
+/* Delete confirmation button group */
+.imggen-delete-buttons {
+  display: flex;
+  gap: 10px;
+}
+
+/* Delete confirmation button */
+.imggen-delete-confirm {
+  background-color: var(--imggen-error-border);
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* Delete cancel button */
+.imggen-delete-cancel {
+  background-color: #555;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* Helper classes */
+.imggen-truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ---- Simple fullscreen backdrop ---- */
+.imggen-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.9);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start; /* anchor to top to avoid vertical jump */
+  padding-top: 5vh; /* give top breathing room */
+  z-index: 9999;
+  gap: 8px;
+}
+
+.imggen-backdrop-image {
+  max-width: 90vw;
+  max-height: 70vh;
+  object-fit: contain;
+  border-radius: var(--imggen-border-radius);
+}
+
+.imggen-backdrop .imggen-overlay {
+  position: static;
+  width: 100%;
+  box-sizing: border-box; /* include padding in width */
+  margin: 0;
+  left: auto;
+  right: auto;
+  bottom: auto;
+  background-color: var(--imggen-overlay-bg);
+  backdrop-filter: blur(var(--imggen-blur-radius));
+  border-radius: var(--imggen-border-radius);
+}
+
+/* Wrapper ensures overlay width matches image intrinsic width */
+.imggen-full-wrapper {
+  display: inline-block; /* shrink-wrap to content width */
+  width: min(90vw, 70vh); /* Size proportional to viewport, matching backdrop-image constraints */
+  aspect-ratio: 1 / 1; /* Maintain square aspect ratio like images */
+}

package/dist/components/ImgGen.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { ImageGenOptions } from 'call-ai';
+import { Database } from 'use-fireproof';
+import { ImgGenClasses } from '../utils/style-utils';
+import './ImgGen.css';
+export interface ImgGenProps {
+    /** Text prompt for image generation (required unless _id is provided) */
+    prompt?: string;
+    /** Document ID to load a specific image instead of generating a new one */
+    _id?: string;
+    /** Classname(s) to apply to the image */
+    className?: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Image generation options */
+    options?: ImageGenOptions;
+    /** Database name or instance to use for storing images */
+    database?: string | Database;
+    /** Callback when image load completes successfully */
+    onLoad?: () => void;
+    /** Callback when image load fails */
+    onError?: (error: Error) => void;
+    /** Callback when document is deleted */
+    onDelete?: (id: string) => void;
+    /** Callback when prompt is edited */
+    onPromptEdit?: (id: string, newPrompt: string) => void;
+    /** Custom CSS classes for styling component parts */
+    classes?: ImgGenClasses;
+}
+/**
+ * Main component for generating images with call-ai's imageGen
+ * Provides automatic caching, reactive updates, and placeholder handling
+ * Uses a mountKey to ensure clean state when switching documents
+ */
+export declare function ImgGen(props: ImgGenProps): React.ReactElement;
+export default ImgGen;