use-vibes 0.4.0 → 0.4.3

package/dist/components/ImgGen.js

@@ -0,0 +1,206 @@
+import * as React from 'react';
+import { v4 as uuid } from 'uuid';
+import { useImageGen } from '../hooks/image-gen/use-image-gen';
+import { useFireproof } from 'use-fireproof';
+import { ImgGenPromptWaiting, ImgGenDisplayPlaceholder, ImgGenDisplay, ImgGenError, } from './ImgGenUtils';
+import { defaultClasses, combineClasses } from '../utils/style-utils';
+import './ImgGen.css';
+/**
+ * Core implementation of ImgGen component
+ * This is the component that gets remounted when the document ID or prompt changes
+ */
+function ImgGenCore(props) {
+    // Destructure the props for cleaner code
+    const { prompt, _id, className, alt, options, database, onLoad, onError, onDelete, onPromptEdit, classes = defaultClasses, } = props;
+    // Get access to the Fireproof database directly
+    const { database: db } = useFireproof(database || 'ImgGen');
+    // Use a unique generationId to trigger regeneration
+    // This provides a clearer signal when regeneration is needed
+    const [generationId, setGenerationId] = React.useState(undefined);
+    // Calculate isPlaceholder as a pure expression instead of using useMemo
+    // This is simple enough that React doesn't need to track dependencies or cache the result
+    const isPlaceholder = !prompt && !_id;
+    // Track the edited prompt to pass to the image generator and show in UI
+    const [currentEditedPrompt, setCurrentEditedPrompt] = React.useState(undefined);
+    // Use the custom hook for all the image generation logic
+    const { imageData, loading, error, progress, document } = useImageGen({
+        // Always provide prompt when available, even with _id (helps with fallback generation)
+        prompt: prompt || '',
+        _id: _id,
+        options,
+        database,
+        // Use the generationId to signal when we want a new image
+        generationId,
+        // Pass the edited prompt if it exists, allowing it to override the document prompt
+        editedPrompt: currentEditedPrompt,
+        // Skip processing if neither prompt nor _id is provided
+        skip: isPlaceholder,
+    });
+    // When document is generated, use its ID for subsequent operations
+    // This is done through the parent component's remounting logic with uuid()
+    // Handle regeneration when the button is clicked
+    const handleRegen = React.useCallback(() => {
+        if (document?._id || _id || prompt) {
+            // Create a new unique ID to trigger regeneration
+            const newGenId = crypto.randomUUID();
+            setGenerationId(newGenId);
+        }
+    }, [document, _id, prompt]);
+    // Handle prompt editing
+    const handlePromptEdit = React.useCallback(async (id, newPrompt) => {
+        // Update the tracked edited prompt
+        setCurrentEditedPrompt(newPrompt);
+        try {
+            // First, update the document in the database with the new prompt
+            const docToUpdate = (await db.get(id));
+            if (docToUpdate) {
+                // Create a type-safe update object
+                const baseUpdate = {
+                    ...docToUpdate,
+                    prompt: newPrompt, // Update the legacy prompt field
+                };
+                // Check if the document has the prompts structure and update it if it exists
+                if ('prompts' in docToUpdate &&
+                    'currentPromptKey' in docToUpdate &&
+                    docToUpdate.prompts &&
+                    docToUpdate.currentPromptKey) {
+                    // Instead of updating the existing prompt, create a new prompt entry
+                    const updatedPrompts = { ...docToUpdate.prompts };
+                    // Create a new prompt key
+                    const promptCount = Object.keys(updatedPrompts).length + 1;
+                    const newPromptKey = `p${promptCount}`;
+                    // Add new prompt entry
+                    updatedPrompts[newPromptKey] = {
+                        text: newPrompt,
+                        created: Date.now(),
+                    };
+                    // Update currentPromptKey to point to the new prompt
+                    Object.assign(baseUpdate, { currentPromptKey: newPromptKey });
+                    // Don't modify the existing version's promptKey
+                    // This ensures that each version keeps its original prompt association
+                    // The new prompt will be used for the next version that gets generated
+                    // No need to update versions array here
+                    // Add the updated prompts to our update object
+                    Object.assign(baseUpdate, { prompts: updatedPrompts });
+                }
+                // Save the updated document back to the database
+                await db.put(baseUpdate);
+            }
+            // Call the user-provided onPromptEdit callback if it exists
+            if (onPromptEdit) {
+                onPromptEdit(id, newPrompt);
+            }
+            // Now trigger regeneration with the updated prompt
+            handleRegen();
+        }
+        catch (error) {
+            console.error('Error updating prompt:', error);
+        }
+    }, [db, onPromptEdit, handleRegen]);
+    // Handle delete request
+    const handleDelete = React.useCallback((id) => {
+        if (onDelete) {
+            // If custom delete handler provided, use it
+            onDelete(id);
+        }
+        else if (db) {
+            // Otherwise use the database directly
+            db.del(id)
+                .then(() => { })
+                .catch((err) => {
+                console.error(`Failed to delete document: ${id}`, err);
+            });
+        }
+        else {
+            // No database available for deletion
+        }
+    }, [onDelete, db]);
+    // Load/error effect - always declare in the same order
+    React.useEffect(() => {
+        if (!loading) {
+            if (error) {
+                // Image generation failed
+                onError?.(error); // Pass error to callback
+            }
+            else if (document && document._files) {
+                // Image generation succeeded - now supports both legacy and versioned files
+                onLoad?.();
+            }
+        }
+    }, [loading, error, document, onLoad, onError]);
+    // No longer need to detect regeneration completion
+    // The generationId approach doesn't require resetting since each regeneration
+    // uses a new unique ID, eliminating the need for this effect
+    // Render function that determines what to show
+    const renderContent = () => {
+        // If we don't have a prompt or ID, show the waiting component
+        if (isPlaceholder) {
+            return React.createElement(ImgGenPromptWaiting, { className: className, classes: classes });
+        }
+        // Check if we have a document, even if we're still loading (for regeneration case)
+        if (document && document._files) {
+            // Get the alt text from either:
+            // 1. Explicitly provided alt prop
+            // 2. Current prompt from the document's prompt structure
+            // 3. Legacy prompt field
+            // 4. Empty string as fallback
+            const altText = alt ||
+                (document.prompts && document.currentPromptKey
+                    ? document.prompts[document.currentPromptKey]?.text
+                    : document.prompt || '');
+            // Show the document display with regeneration state if applicable
+            // Ensure document has a defined _id for display
+            if (!document._id) {
+                console.error('Document is missing _id', document);
+                return React.createElement("div", null, "Error: Invalid document");
+            }
+            return (React.createElement("div", { className: "imggen-container" },
+                React.createElement(ImgGenDisplay, { document: document, className: className, alt: altText, onDelete: handleDelete, onRegen: handleRegen, onPromptEdit: handlePromptEdit, classes: classes, loading: loading, error: error }),
+                loading && generationId && (React.createElement("div", { className: "imggen-progress-container" },
+                    React.createElement("div", { className: combineClasses('imggen-progress', classes.progress), style: { width: `${progress}%` }, "aria-hidden": "true" })))));
+        }
+        // Otherwise, for initial load or error states, show the placeholder
+        if (loading || !imageData || error) {
+            // Use the edited prompt during regeneration if available
+            const displayPrompt = currentEditedPrompt || prompt;
+            return (React.createElement(ImgGenDisplayPlaceholder, { className: className, alt: alt, prompt: displayPrompt, progress: progress, error: null, classes: classes }));
+        }
+        // Fallback for any other unexpected state
+        return React.createElement(ImgGenError, { classes: classes });
+    };
+    // Always render through the render function - no conditional returns in the main component body
+    return renderContent();
+}
+/**
+ * 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 function ImgGen(props) {
+    // Destructure key props for identity-change tracking
+    // classes prop is used via the props spread to ImgGenCore
+    const { _id, prompt } = props;
+    // Generate a unique mountKey for this instance
+    const [mountKey, setMountKey] = React.useState(() => uuid());
+    // Track previous props to detect identity changes
+    const prevIdRef = React.useRef(_id);
+    const prevPromptRef = React.useRef(prompt);
+    // Update mountKey when document identity changes
+    React.useEffect(() => {
+        const idChanged = _id !== prevIdRef.current;
+        const promptChanged = prompt && prompt !== prevPromptRef.current;
+        // Reset mountKey if we switched documents, or if we're showing a new prompt
+        // with no document ID (which means a brand new generation)
+        if (idChanged || (!_id && promptChanged)) {
+            setMountKey(uuid()); // Force a remount of ImgGenCore
+        }
+        // Update refs for next comparison
+        prevIdRef.current = _id;
+        prevPromptRef.current = prompt;
+    }, [_id, prompt]);
+    // Render the core component with a key to force remount when identity changes
+    return React.createElement(ImgGenCore, { ...props, key: mountKey });
+}
+// Simple export - no memoization or complex structure
+export default ImgGen;
+//# sourceMappingURL=ImgGen.js.map

package/dist/components/ImgGen.js.map

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

package/dist/components/ImgGenUtils/ImgGenDisplay.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ImgGenDisplayProps } from './types';
+export declare function ImgGenDisplay({ document, className, alt, onDelete, onRegen, onPromptEdit, classes, loading, error, }: ImgGenDisplayProps): React.JSX.Element;

package/dist/components/ImgGenUtils/ImgGenDisplay.js

@@ -0,0 +1,251 @@
+import * as React from 'react';
+import { ImgFile } from 'use-fireproof';
+import { ImgGenError } from './ImgGenError';
+import { combineClasses, defaultClasses } from '../../utils/style-utils';
+import { getCurrentFileKey, getPromptInfo, getVersionInfo } from './ImgGenDisplayUtils';
+import { ImgGenModal } from './ImgGenModal';
+// Component for displaying the generated image
+export function ImgGenDisplay({ document, className, alt, onDelete, onRegen, onPromptEdit, classes = defaultClasses, loading, error, }) {
+    // Delete confirmation is now handled within ControlsBar
+    // Use null to indicate not editing, or string for edit mode
+    const [editedPrompt, setEditedPrompt] = React.useState(null);
+    // Track the prompt that's currently being generated
+    const [generatingPrompt, setGeneratingPrompt] = React.useState(null);
+    // --- Fullscreen backdrop state ---
+    const [isFullscreen, setIsFullscreen] = React.useState(false);
+    const openFullscreen = () => setIsFullscreen(true);
+    const closeFullscreen = () => setIsFullscreen(false);
+    // Get version information directly at render time
+    const { versions, currentVersion } = getVersionInfo(document);
+    // Calculate the initial version index based on document state
+    const initialVersionIndex = React.useMemo(() => {
+        return typeof currentVersion === 'number'
+            ? currentVersion
+            : versions?.length
+                ? versions.length - 1
+                : 0;
+    }, [currentVersion, versions]);
+    // Track previous version count to detect when new versions are added
+    const prevVersionsCountRef = React.useRef(versions.length);
+    // Set flash effect when new version is added
+    React.useEffect(() => {
+        // If we have more versions than before, it means a new version was added
+        if (versions.length > prevVersionsCountRef.current) {
+            // Trigger the flash effect
+            setVersionFlash(true);
+            // Auto-reset flash after animation completes
+            const timer = setTimeout(() => {
+                setVersionFlash(false);
+            }, 2000); // Match the animation duration in CSS
+            return () => clearTimeout(timer);
+        }
+        // Update ref for next comparison
+        prevVersionsCountRef.current = versions.length;
+    }, [versions.length]);
+    // Only track user-selected version index as state
+    const [userSelectedIndex, setUserSelectedIndex] = React.useState(null);
+    // Track when a new version has been added to enable flash effect
+    const [versionFlash, setVersionFlash] = React.useState(false);
+    // Explicitly track regeneration state while waiting for progress to update
+    const [pendingRegeneration, setPendingRegeneration] = React.useState(false);
+    // Keep track of pending regeneration requests
+    const pendingRegenerationRef = React.useRef(false);
+    // Track simulated progress for regeneration
+    const [simulatedProgress, setSimulatedProgress] = React.useState(null);
+    const progressTimerRef = React.useRef(null);
+    // Derive the final version index - use user selection if available, otherwise use the document's current version
+    const versionIndex = userSelectedIndex !== null ? userSelectedIndex : initialVersionIndex;
+    // Custom setter function that manages user selections
+    const setVersionIndex = React.useCallback((index) => {
+        setUserSelectedIndex(index);
+    }, []);
+    const fileKey = getCurrentFileKey(document, versionIndex, versions);
+    const totalVersions = versions ? versions.length : 0;
+    // We now use getPromptInfo directly at render time as a pure function
+    // Navigation handlers
+    function handlePrevVersion() {
+        if (versionIndex > 0) {
+            setVersionIndex(versionIndex - 1);
+            // Exit edit mode when changing versions
+            setEditedPrompt(null);
+        }
+    }
+    function handleNextVersion() {
+        if (versionIndex < totalVersions - 1) {
+            setVersionIndex(versionIndex + 1);
+            // Exit edit mode when changing versions
+            setEditedPrompt(null);
+        }
+    }
+    // ESC handling moved to ImgGenModal component
+    // Determine which file to use - either the versioned file or the legacy 'image' file
+    const currentFile = fileKey && document._files
+        ? document._files[fileKey]
+        : document._files?.image;
+    // Get prompt text early (moved before portal)
+    const promptInfo = getPromptInfo(document, versionIndex);
+    const promptText = promptInfo.currentPrompt || alt || 'Generated image';
+    // State for delete confirmation is managed directly
+    // Handle delete confirmation
+    function handleDeleteConfirm() {
+        if (onDelete) {
+            onDelete(document._id);
+        }
+    }
+    // Handle generating a new version
+    function handleRegen() {
+        // Set pending regeneration flag
+        setPendingRegeneration(true);
+        pendingRegenerationRef.current = true;
+        // Reset and start simulated progress
+        setSimulatedProgress(0);
+        // Clear any existing timer
+        if (progressTimerRef.current) {
+            clearInterval(progressTimerRef.current);
+            progressTimerRef.current = null;
+        }
+        // Create a new progress timer that simulates progress from 0 to 99
+        const timer = setInterval(() => {
+            setSimulatedProgress((prev) => {
+                const current = prev ?? 0;
+                // Asymptotically approach 99%
+                const next = current + (99 - current) * 0.05;
+                return next > 99 ? 99 : next;
+            });
+        }, 500); // Update twice per second for smoother animation
+        progressTimerRef.current = timer;
+        // const { currentPrompt } = getPromptInfo(document, versionIndex);
+        if (editedPrompt !== null) {
+            // User has edited the prompt - always use the edited version
+            // even if it happens to be the same as the current prompt
+            const newPrompt = editedPrompt.trim();
+            if (newPrompt) {
+                // Always submit the edited prompt as a new prompt
+                onPromptEdit?.(document._id, newPrompt);
+            }
+            else {
+                // Empty prompt, just regenerate with existing prompt
+                onRegen?.(document._id);
+            }
+        }
+        else {
+            // Not in edit mode → regenerate current prompt
+            onRegen?.(document._id);
+        }
+        // Reset user selection when generating a new version
+        // This will make the display automatically switch to the latest version when it returns
+        setUserSelectedIndex(null);
+        // Save the prompt we're generating with
+        let promptToGenerate = '';
+        if (editedPrompt !== null) {
+            promptToGenerate = editedPrompt.trim();
+        }
+        else {
+            const { currentPrompt } = getPromptInfo(document, versionIndex);
+            promptToGenerate = currentPrompt;
+        }
+        setGeneratingPrompt(promptToGenerate);
+        // Reset edited prompt since we're no longer in edit mode
+        setEditedPrompt(null);
+    }
+    // Handle prompt editing
+    function handlePromptEdit(newPrompt) {
+        // Get the current prompt for comparison at the exact time of editing
+        const { currentPrompt } = getPromptInfo(document, versionIndex);
+        const trimmedPrompt = newPrompt.trim();
+        if (trimmedPrompt && trimmedPrompt !== currentPrompt) {
+            // Set the edited prompt to the new trimmed value
+            setEditedPrompt(trimmedPrompt);
+            // Now use handleRegen to handle the regeneration process
+            // This ensures the regeneration logic is consistent
+            handleRegen();
+        }
+        else {
+            // If the prompt hasn't changed, just exit edit mode
+            setEditedPrompt(null);
+        }
+    }
+    // We're not using document.progress as it's always 100
+    // Just track the document loading state
+    const documentLoading = document.loading ?? false;
+    // Reset regeneration state when loading state changes
+    React.useEffect(() => {
+        if (!documentLoading && pendingRegenerationRef.current) {
+            pendingRegenerationRef.current = false;
+            setPendingRegeneration(false);
+            // Clear the simulated progress timer
+            if (progressTimerRef.current) {
+                clearInterval(progressTimerRef.current);
+                progressTimerRef.current = null;
+            }
+            // Set simulated progress to 100% to complete the progress bar
+            setSimulatedProgress(100);
+            // Then clear it after a short delay to hide the progress bar
+            setTimeout(() => {
+                setSimulatedProgress(null);
+                // Also clear the generating prompt
+                setGeneratingPrompt(null);
+            }, 500);
+        }
+    }, [documentLoading]);
+    // Additional check for document updates to detect version changes
+    const documentIdRef = React.useRef(document?._id);
+    const versionsLengthRef = React.useRef(versions?.length || 0);
+    React.useEffect(() => {
+        // Check if a new version was added (version count increased)
+        if (versions?.length > versionsLengthRef.current) {
+            pendingRegenerationRef.current = false;
+            setPendingRegeneration(false);
+            // Clear the simulated progress timer
+            if (progressTimerRef.current) {
+                clearInterval(progressTimerRef.current);
+                progressTimerRef.current = null;
+            }
+            // Set simulated progress to 100% to complete the progress bar
+            setSimulatedProgress(100);
+            // Then clear it after a short delay to hide the progress bar
+            setTimeout(() => {
+                setSimulatedProgress(null);
+            }, 500);
+        }
+        // Update refs
+        versionsLengthRef.current = versions?.length || 0;
+        documentIdRef.current = document?._id;
+    }, [document?._id, versions?.length]);
+    // Clean up timer on unmount
+    React.useEffect(() => {
+        return () => {
+            if (progressTimerRef.current) {
+                clearInterval(progressTimerRef.current);
+                progressTimerRef.current = null;
+            }
+        };
+    }, []);
+    // Calculate the effective progress - use simulated progress during regeneration if available
+    const effectiveProgress = simulatedProgress ?? 100;
+    // Is regeneration in progress - either from loading state or pending state
+    const isRegenerating = pendingRegeneration || documentLoading === true || loading === true;
+    if (!document._files || (!fileKey && !document._files.image)) {
+        return React.createElement(ImgGenError, { message: "Missing image file" });
+    }
+    // Determine which prompt to display:
+    // 1. If in edit mode, show the edited prompt
+    // 2. If generating, show the generating prompt
+    // 3. Otherwise, show the document's prompt
+    const displayPrompt = editedPrompt !== null
+        ? editedPrompt
+        : pendingRegeneration && generatingPrompt !== null
+            ? generatingPrompt
+            : promptText;
+    return (React.createElement("div", { className: combineClasses('imggen-root', className, classes.root), title: displayPrompt },
+        React.createElement("div", { className: "imggen-image-container", style: { position: 'relative', width: '100%' } },
+            React.createElement("button", { className: "imggen-expand-button", onClick: openFullscreen, title: "Expand image", "aria-label": "Expand image" },
+                React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" },
+                    React.createElement("polyline", { points: "15,5 20,5 20,10" }),
+                    React.createElement("polyline", { points: "9,19 4,19 4,14" }),
+                    React.createElement("line", { x1: "20", y1: "5", x2: "14", y2: "11" }),
+                    React.createElement("line", { x1: "4", y1: "19", x2: "10", y2: "13" }))),
+            React.createElement(ImgFile, { file: currentFile, className: combineClasses('imggen-image', classes.image), alt: alt || 'Generated image', style: { width: '100%' } })),
+        React.createElement(ImgGenModal, { isOpen: isFullscreen, onClose: closeFullscreen, currentFile: currentFile, alt: alt, promptText: displayPrompt, editedPrompt: editedPrompt, setEditedPrompt: setEditedPrompt, handlePromptEdit: handlePromptEdit, handleDeleteConfirm: handleDeleteConfirm, handlePrevVersion: handlePrevVersion, handleNextVersion: handleNextVersion, handleRegen: handleRegen, versionIndex: versionIndex, totalVersions: totalVersions, progress: effectiveProgress, classes: classes, versionFlash: versionFlash, isRegenerating: isRegenerating, error: error })));
+}
+//# sourceMappingURL=ImgGenDisplay.js.map

package/dist/components/ImgGenUtils/ImgGenDisplay.js.map

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

package/dist/components/ImgGenUtils/ImgGenDisplayPlaceholder.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ImgGenPlaceholderProps } from './types';
+export declare function ImgGenDisplayPlaceholder({ className, alt, prompt, progress, error, classes, }: ImgGenPlaceholderProps): React.JSX.Element;

package/dist/components/ImgGenUtils/ImgGenDisplayPlaceholder.js

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { combineClasses, defaultClasses } from '../../utils/style-utils';
+import { ImageOverlay } from './overlays/ImageOverlay';
+// Component for loading/placeholder state
+export function ImgGenDisplayPlaceholder({ className, alt, prompt, progress, error, classes = defaultClasses, }) {
+    // State to track the visible progress width for animation
+    const [visibleProgress, setVisibleProgress] = React.useState(0);
+    // Animate progress bar when component mounts or progress changes
+    React.useEffect(() => {
+        // Only start at zero on initial mount, not on every progress update
+        if (progress === 0) {
+            setVisibleProgress(0);
+        }
+        // Smoothly animate to the actual progress (or minimum 5%)
+        const timer = setTimeout(() => {
+            setVisibleProgress(Math.max(5, progress));
+        }, 20); // Smaller delay for smoother transitions
+        return () => clearTimeout(timer);
+    }, [progress]);
+    // Extract error information from the error object
+    const parseErrorInfo = (error) => {
+        const errorMsg = error.message;
+        let title = 'Image Generation Failed';
+        let body = errorMsg;
+        let code = '';
+        // Try to parse JSON error details if present
+        if (errorMsg.includes('{')) {
+            try {
+                const jsonStart = errorMsg.indexOf('{');
+                const jsonStr = errorMsg.substring(jsonStart);
+                const jsonObj = JSON.parse(jsonStr);
+                // Get error code if it exists
+                if (errorMsg.match(/\d{3}/)) {
+                    code = errorMsg.match(/\d{3}/)?.[0] || '';
+                }
+                // Special handling for moderation blocked errors
+                if (jsonObj.details?.error?.code === 'moderation_blocked' ||
+                    jsonObj.code === 'moderation_blocked') {
+                    // Include error code in title but avoid duplication
+                    title = code ? `${code} - Failed to generate image` : 'Failed to generate image';
+                    body =
+                        'Your request was rejected as a result of our safety system. Your request may contain content that is not allowed by our safety system.';
+                    return { title, body, code };
+                }
+                // Set the title from the main error message
+                if (jsonObj.error) {
+                    title = jsonObj.error;
+                }
+                // Set the body from the detailed error message
+                if (jsonObj.details?.error?.message) {
+                    body = jsonObj.details.error.message;
+                }
+                else if (jsonObj.error?.details?.error?.message) {
+                    body = jsonObj.error.details.error.message;
+                }
+            }
+            catch { }
+        }
+        return { title, body, code };
+    };
+    // Check if we're displaying an error
+    if (error) {
+        return (React.createElement("div", { className: combineClasses('imggen-placeholder', 'imggen-error-container', className, classes.placeholder), style: {
+                backgroundColor: '#222', // Dark gray background
+                width: '100%',
+                height: '100%',
+                minHeight: '512px', // Standard image height
+                aspectRatio: '1 / 1', // Square aspect ratio like images
+            }, "aria-label": alt || 'Error display', role: "img" },
+            React.createElement("div", { className: combineClasses('imggen-error', classes.error) }, (() => {
+                const { title, body } = parseErrorInfo(error);
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("h3", { className: "imggen-error-title", style: { color: '#ff4d4d', margin: '0 0 0.75rem 0' } }, title),
+                    React.createElement("p", { className: "imggen-error-message", style: { color: '#e0e0e0', margin: '0' } }, body)));
+            })())));
+    }
+    // Regular placeholder when no error
+    return (React.createElement("div", { className: combineClasses('imggen-placeholder', className, classes.placeholder), "aria-label": alt || prompt || 'Image placeholder', role: "img", style: {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            textAlign: 'center',
+            minHeight: '200px',
+            position: 'relative',
+            backgroundColor: '#222', // Ensure dark background
+            color: '#eee', // Light text color
+        } },
+        prompt && (React.createElement("div", { className: combineClasses('imggen-progress', classes.progress), style: {
+                width: `${visibleProgress}%`,
+                position: 'absolute',
+                top: 0,
+                left: 0,
+            }, "aria-hidden": "true" })),
+        !prompt && (React.createElement("div", { style: {
+                color: '#eee',
+                fontSize: 'var(--imggen-font-size)',
+                padding: '20px',
+            } }, "Waiting for prompt")),
+        prompt && !error && (
+        /* In production environment, show the styled prompt text */
+        React.createElement(React.Fragment, null,
+            React.createElement("div", { style: {
+                    color: '#eee',
+                    fontSize: 'var(--imggen-font-size)',
+                    padding: '20px',
+                    maxWidth: '90%',
+                    wordBreak: 'break-word',
+                    fontWeight: 'bold',
+                    textAlign: 'center',
+                } }, prompt),
+            React.createElement("div", { style: { display: 'none' } },
+                React.createElement(ImageOverlay, { promptText: prompt || '', editedPrompt: null, setEditedPrompt: () => { }, handlePromptEdit: () => { }, handleDeleteConfirm: () => { }, handlePrevVersion: () => { }, handleNextVersion: () => { }, handleRegen: () => { }, versionIndex: 0, totalVersions: 1, classes: classes, showControls: false, showDelete: false }))))));
+}
+//# sourceMappingURL=ImgGenDisplayPlaceholder.js.map

package/dist/components/ImgGenUtils/ImgGenDisplayPlaceholder.js.map

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