@vibes.diy/use-vibes-base 0.0.0-dev-fresh-data

package/components/ImgGenUtils/ImgGenDisplayPlaceholder.js

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { combineClasses, defaultClasses } from '../../utils/style-utils.js';
+import { imgGenStyles, imgGenTheme } from '../../utils/styles.js';
+import { ImageOverlay } from './overlays/ImageOverlay.js';
+export function ImgGenDisplayPlaceholder({ className, alt, prompt, progress, error, classes = defaultClasses, }) {
+    const [visibleProgress, setVisibleProgress] = React.useState(0);
+    React.useEffect(() => {
+        if (progress === 0) {
+            setVisibleProgress(0);
+        }
+        const timer = setTimeout(() => {
+            setVisibleProgress(Math.max(5, progress));
+        }, 20);
+        return () => clearTimeout(timer);
+    }, [progress]);
+    const parseErrorInfo = (error) => {
+        const errorMsg = error.message;
+        let title = 'Image Generation Failed';
+        let body = errorMsg;
+        let code = '';
+        if (errorMsg.includes('{')) {
+            try {
+                const jsonStart = errorMsg.indexOf('{');
+                const jsonStr = errorMsg.substring(jsonStart);
+                const jsonObj = JSON.parse(jsonStr);
+                if (errorMsg.match(/\d{3}/)) {
+                    code = errorMsg.match(/\d{3}/)?.[0] || '';
+                }
+                if (jsonObj.details?.error?.code === 'moderation_blocked' ||
+                    jsonObj.code === 'moderation_blocked') {
+                    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 };
+                }
+                if (jsonObj.error) {
+                    title = jsonObj.error;
+                }
+                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 };
+    };
+    if (error) {
+        return (React.createElement("div", { className: combineClasses('imggen-error-container', className, classes.placeholder), style: {
+                ...imgGenStyles.errorContainer,
+                minHeight: '512px',
+            }, "aria-label": alt || 'Error display', role: "img" },
+            React.createElement("div", { className: combineClasses(classes.error), style: imgGenStyles.error }, (() => {
+                const { title, body } = parseErrorInfo(error);
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("h3", { style: imgGenStyles.errorTitle }, title),
+                    React.createElement("p", { style: imgGenStyles.errorMessage }, body)));
+            })())));
+    }
+    return (React.createElement("div", { className: combineClasses(className, classes.placeholder), "aria-label": alt || prompt || 'Image placeholder', role: "img", style: {
+            ...imgGenStyles.placeholder,
+            flexDirection: 'column',
+            textAlign: 'center',
+            color: '#eee',
+        } },
+        prompt && (React.createElement("div", { style: imgGenStyles.progressContainer },
+            React.createElement("div", { className: combineClasses(classes.progress), style: {
+                    ...imgGenStyles.progress,
+                    width: `${visibleProgress}%`,
+                }, "aria-hidden": "true" }))),
+        !prompt && (React.createElement("div", { style: {
+                ...imgGenStyles.statusText,
+                color: '#eee',
+                padding: '20px',
+            } }, "Waiting for prompt")),
+        prompt && !error && (React.createElement(React.Fragment, null,
+            React.createElement("div", { style: {
+                    color: '#eee',
+                    fontSize: imgGenTheme.typography.fontSize,
+                    padding: '20px',
+                    maxWidth: '90%',
+                    wordBreak: 'break-word',
+                    fontWeight: imgGenTheme.typography.fontWeight,
+                    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/components/ImgGenUtils/ImgGenDisplayPlaceholder.js.map

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

package/components/ImgGenUtils/ImgGenDisplayUtils.d.ts

@@ -0,0 +1,27 @@
+import type { PartialImageDocument } from '@vibes.diy/use-vibes-types';
+export interface EnhancedVersionInfo {
+    id: string;
+    created?: number;
+    promptKey?: string;
+    prompt?: string;
+}
+interface VersionInfoResult {
+    versions: EnhancedVersionInfo[];
+    currentVersion: number;
+}
+export declare function getVersionInfo(document?: PartialImageDocument): VersionInfoResult;
+export declare function getPromptInfo(document?: PartialImageDocument, versionIndex?: number): {
+    currentPrompt: string;
+    prompts: Record<string, import("@vibes.diy/use-vibes-types").PromptEntry>;
+    currentPromptKey: string;
+} | {
+    currentPrompt: string;
+    prompts: {
+        legacy: {
+            text: string;
+        };
+    };
+    currentPromptKey: string;
+};
+export declare function getCurrentFileKey(document: PartialImageDocument | null | undefined, versionIndex: number, versions: EnhancedVersionInfo[]): string | null;
+export {};

package/components/ImgGenUtils/ImgGenDisplayUtils.js

@@ -0,0 +1,95 @@
+export function getVersionInfo(document) {
+    if (document?.versions && document.versions.length > 0) {
+        const enhancedVersions = document.versions.map((v) => {
+            const versionWithPrompt = v;
+            const prompt = versionWithPrompt.prompt || undefined;
+            return {
+                ...v,
+                prompt,
+            };
+        });
+        return {
+            versions: enhancedVersions,
+            currentVersion: typeof document.currentVersion === 'number'
+                ? document.currentVersion
+                : document.versions.length - 1,
+        };
+    }
+    if (document?._files && document._files.image) {
+        return {
+            versions: [{ id: 'image', created: document.created || Date.now() }],
+            currentVersion: 0,
+        };
+    }
+    return { versions: [], currentVersion: 0 };
+}
+export function getPromptInfo(document, versionIndex) {
+    try {
+        if (typeof versionIndex === 'number') {
+            const { versions } = getVersionInfo(document);
+            if (versions &&
+                Array.isArray(versions) &&
+                versionIndex >= 0 &&
+                versionIndex < versions.length) {
+                const version = versions[versionIndex];
+                const promptKey = version.promptKey || 'p1';
+                if (document?.prompts && promptKey && document.prompts[promptKey]) {
+                    return {
+                        currentPrompt: document.prompts[promptKey].text || '',
+                        prompts: document.prompts,
+                        currentPromptKey: promptKey,
+                    };
+                }
+                if (version.prompt) {
+                    return {
+                        currentPrompt: version.prompt,
+                        prompts: { ...(document?.prompts || {}), legacy: { text: version.prompt } },
+                        currentPromptKey: 'legacy',
+                    };
+                }
+                const docWithPromptMap = document;
+                if (docWithPromptMap.promptMap && version.id && docWithPromptMap.promptMap[version.id]) {
+                    const legacyPrompt = docWithPromptMap.promptMap[version.id];
+                    return {
+                        currentPrompt: legacyPrompt,
+                        prompts: { legacy: { text: legacyPrompt } },
+                        currentPromptKey: 'legacy',
+                    };
+                }
+            }
+        }
+    }
+    catch (e) {
+        console.error('Error getting version-specific prompt:', e);
+    }
+    if (document?.prompts && document.currentPromptKey) {
+        return {
+            currentPrompt: document.prompts[document.currentPromptKey]?.text || '',
+            prompts: document.prompts,
+            currentPromptKey: document.currentPromptKey,
+        };
+    }
+    if (document?.prompt) {
+        return {
+            currentPrompt: document.prompt,
+            prompts: { p1: { text: document.prompt, created: document.created || Date.now() } },
+            currentPromptKey: 'p1',
+        };
+    }
+    return { currentPrompt: '', prompts: {}, currentPromptKey: '' };
+}
+export function getCurrentFileKey(document, versionIndex, versions) {
+    if (!versions || versions.length === 0)
+        return null;
+    if (versions.length > versionIndex) {
+        const versionId = versions[versionIndex].id;
+        if (document?._files && document._files[versionId]) {
+            return versionId;
+        }
+    }
+    if (document?._files && document._files.image) {
+        return 'image';
+    }
+    return null;
+}
+//# sourceMappingURL=ImgGenDisplayUtils.js.map

package/components/ImgGenUtils/ImgGenDisplayUtils.js.map

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

package/components/ImgGenUtils/ImgGenError.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ImgGenErrorProps } from './types.js';
+export declare function ImgGenError({ message, className, classes }: Partial<ImgGenErrorProps>): React.JSX.Element;

package/components/ImgGenUtils/ImgGenError.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { combineClasses, defaultClasses } from '../../utils/style-utils.js';
+import { imgGenStyles } from '../../utils/styles.js';
+export function ImgGenError({ message, className, classes = defaultClasses, }) {
+    return (React.createElement("div", { className: combineClasses('imggen-error-container', className, classes.error), style: imgGenStyles.error },
+        React.createElement("h3", { style: imgGenStyles.errorTitle }, "Error"),
+        React.createElement("p", { style: imgGenStyles.errorMessage }, message || 'Failed to render image')));
+}
+//# sourceMappingURL=ImgGenError.js.map

package/components/ImgGenUtils/ImgGenError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImgGenError.js","sourceRoot":"","sources":["../../../jsr/components/ImgGenUtils/ImgGenError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGrD,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,EACP,SAAS,EACT,OAAO,GAAG,cAAc,GACE,EAAE;IAC5B,OAAO,CACL,6BACE,SAAS,EAAE,cAAc,CAAC,wBAAwB,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,EAC7E,KAAK,EAAE,YAAY,CAAC,KAAK;QAEzB,4BAAI,KAAK,EAAE,YAAY,CAAC,UAAU,YAAY;QAC9C,2BAAG,KAAK,EAAE,YAAY,CAAC,YAAY,IAAG,OAAO,IAAI,wBAAwB,CAAK,CAC1E,CACP,CAAC;AAAA,CACH"}

package/components/ImgGenUtils/ImgGenFileDrop.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface ImgGenFileDropProps {
+    readonly onFilesDropped: (files: File[]) => void;
+    readonly className?: string;
+    readonly isActive?: boolean;
+    readonly maxFiles?: number;
+    readonly debug?: boolean;
+    readonly addFilesMessage?: string;
+}
+export declare function ImgGenFileDrop({ onFilesDropped, className, isActive, maxFiles, debug, addFilesMessage }: ImgGenFileDropProps): React.ReactElement;
+export {};

package/components/ImgGenUtils/ImgGenFileDrop.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { combineClasses } from '../../utils/style-utils.js';
+import { imgGenStyles } from '../../utils/styles.js';
+export function ImgGenFileDrop({ onFilesDropped, className, isActive = true, maxFiles = 10, debug, addFilesMessage = 'Drop images here or click to browse', }) {
+    const fileInputRef = React.useRef(null);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const handleDragOver = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+    }, []);
+    const handleDragLeave = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+    }, []);
+    const handleClick = React.useCallback(() => {
+        if (isActive && fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    }, [isActive]);
+    const processFiles = React.useCallback((fileList) => {
+        if (!isActive)
+            return;
+        const files = Array.from(fileList);
+        if (files.length === 0)
+            return;
+        const filesToProcess = files.slice(0, maxFiles);
+        if (debug) {
+            console.log(`[ImgGenFileDrop] Processing ${filesToProcess.length} files of ${files.length} selected`);
+        }
+        const imageFiles = filesToProcess.filter((file) => file.type.startsWith('image/'));
+        if (imageFiles.length > 0) {
+            onFilesDropped(imageFiles);
+        }
+    }, [isActive, maxFiles, onFilesDropped, debug]);
+    const handleDrop = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        processFiles(e.dataTransfer.files);
+    }, [processFiles]);
+    const handleFileInput = React.useCallback((e) => {
+        if (e.target.files?.length) {
+            processFiles(e.target.files);
+        }
+    }, [processFiles]);
+    return (React.createElement("div", { className: combineClasses('imggen-file-drop', isDragging ? 'imggen-file-drop-active' : '', !isActive ? 'imggen-file-drop-disabled' : '', className), style: {
+            ...imgGenStyles.fileDrop,
+            ...(isDragging ? imgGenStyles.fileDropActive : {}),
+            ...(!isActive ? imgGenStyles.fileDropDisabled : {}),
+        }, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick },
+        React.createElement("input", { type: "file", ref: fileInputRef, accept: "image/*", onChange: handleFileInput, multiple: true, style: { display: 'none' } }),
+        React.createElement("div", { className: "imggen-file-drop-message", style: imgGenStyles.fileDropMessage }, addFilesMessage)));
+}
+//# sourceMappingURL=ImgGenFileDrop.js.map

package/components/ImgGenUtils/ImgGenFileDrop.js.map

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

package/components/ImgGenUtils/ImgGenModal.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { DocFileMeta } from 'use-fireproof';
+import { ImgGenClasses } from '../../utils/style-utils.js';
+export interface ImgGenModalProps {
+    readonly isOpen: boolean;
+    readonly onClose: () => void;
+    readonly currentFile: DocFileMeta | undefined;
+    readonly alt?: string;
+    readonly promptText: string;
+    readonly editedPrompt: string | null;
+    readonly setEditedPrompt: (_editedPrompt: string | null) => void;
+    readonly handlePromptEdit: (_newPrompt: string) => void;
+    readonly handleDeleteConfirm: () => void;
+    readonly handlePrevVersion: () => void;
+    readonly handleNextVersion: () => void;
+    readonly handleRegen: () => void;
+    readonly versionIndex: number;
+    readonly totalVersions: number;
+    readonly progress: number;
+    readonly versionFlash?: boolean;
+    readonly isRegenerating?: boolean;
+    readonly error?: Error | null;
+    readonly classes?: Partial<ImgGenClasses>;
+}
+export declare function ImgGenModal({ isOpen, onClose, currentFile, alt, promptText, editedPrompt, setEditedPrompt, handlePromptEdit, handleDeleteConfirm, handlePrevVersion, handleNextVersion, handleRegen, versionIndex, totalVersions, progress, versionFlash, isRegenerating, error, classes }: ImgGenModalProps): React.ReactPortal | null;

package/components/ImgGenUtils/ImgGenModal.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { AsyncImg } from './AsyncImg.js';
+import { createPortal } from 'react-dom';
+import { ImageOverlay } from './overlays/ImageOverlay.js';
+import { ImgGenError } from './ImgGenError.js';
+import { defaultClasses } from '../../utils/style-utils.js';
+export function ImgGenModal({ isOpen, onClose, currentFile, alt, promptText, editedPrompt, setEditedPrompt, handlePromptEdit, handleDeleteConfirm, handlePrevVersion, handleNextVersion, handleRegen, versionIndex, totalVersions, progress, versionFlash = false, isRegenerating = false, error = null, classes = defaultClasses, }) {
+    React.useEffect(() => {
+        const handleEsc = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            window.addEventListener('keydown', handleEsc);
+            return () => window.removeEventListener('keydown', handleEsc);
+        }
+    }, [isOpen, onClose]);
+    if (!isOpen || !currentFile) {
+        return null;
+    }
+    const effectivePromptText = promptText;
+    return createPortal(React.createElement("div", { className: "imggen-backdrop", style: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 9999,
+            padding: '20px',
+            boxSizing: 'border-box',
+        }, onClick: (e) => {
+            e.stopPropagation();
+            onClose();
+        }, role: "presentation" },
+        React.createElement("figure", { className: "imggen-full-wrapper", role: "figure", style: {
+                position: 'relative',
+                margin: 0,
+                maxWidth: '90vw',
+                maxHeight: '90vh',
+                display: 'flex',
+                flexDirection: 'column',
+                backgroundColor: 'white',
+                borderRadius: '8px',
+                overflow: 'hidden',
+                boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
+            }, onClick: (e) => e.stopPropagation() },
+            error ? (React.createElement("div", { className: "imggen-backdrop-error", style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    minHeight: '400px',
+                    padding: '2rem',
+                } },
+                React.createElement(ImgGenError, { message: error.message }))) : (React.createElement(AsyncImg, { file: currentFile, className: "imggen-backdrop-image", style: {
+                    maxWidth: '100%',
+                    maxHeight: '70vh',
+                    objectFit: 'contain',
+                    display: 'block',
+                }, alt: alt || 'Generated image' })),
+            React.createElement(ImageOverlay, { promptText: effectivePromptText, editedPrompt: editedPrompt, setEditedPrompt: setEditedPrompt, handlePromptEdit: handlePromptEdit, handleDeleteConfirm: handleDeleteConfirm, handlePrevVersion: handlePrevVersion, handleNextVersion: handleNextVersion, handleRegen: handleRegen, versionIndex: versionIndex, totalVersions: totalVersions, progress: progress, versionFlash: versionFlash, isRegenerating: isRegenerating, classes: classes, showDelete: true }))), globalThis.document.body);
+}
+//# sourceMappingURL=ImgGenModal.js.map

package/components/ImgGenUtils/ImgGenModal.js.map

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

package/components/ImgGenUtils/ImgGenModeUtils.d.ts

@@ -0,0 +1,9 @@
+import type { PartialImageDocument } from '@vibes.diy/use-vibes-types';
+export type ImgGenMode = 'placeholder' | 'uploadWaiting' | 'generating' | 'display' | 'error';
+export declare function getImgGenMode({ document, prompt, loading, error, debug }: {
+    document?: PartialImageDocument | null;
+    prompt?: string;
+    loading: boolean;
+    error?: Error;
+    debug?: boolean;
+}): ImgGenMode;

package/components/ImgGenUtils/ImgGenModeUtils.js

@@ -0,0 +1,59 @@
+export function getImgGenMode({ document, prompt, loading, error, debug, }) {
+    if (error) {
+        if (debug)
+            console.log('[ImgGenModeUtils] Error present - error mode');
+        return 'error';
+    }
+    let effectivePrompt = prompt;
+    if (!effectivePrompt && document) {
+        if (document.prompt && typeof document.prompt === 'string') {
+            effectivePrompt = document.prompt;
+        }
+        // Check newer structured prompts
+        else if (document.prompts && document.currentPromptKey) {
+            effectivePrompt = document.prompts[document.currentPromptKey]?.text;
+        }
+    }
+    const hasVersions = !!document?.versions?.length;
+    if (loading && (prompt || effectivePrompt) && !hasVersions) {
+        if (debug)
+            console.log('[ImgGenModeUtils] Prompt + loading + no versions → generating');
+        return 'generating';
+    }
+    if (hasVersions) {
+        if (debug)
+            console.log('[ImgGenModeUtils] Has versions - display mode');
+        return 'display';
+    }
+    const hasInputFiles = document?._files && Object.keys(document._files).some((key) => key.startsWith('in'));
+    const hasEmptyDoc = !!document && (!document._files || Object.keys(document._files).length === 0) && !hasVersions;
+    if (debug) {
+        console.log('[ImgGenModeUtils] Determining mode:', {
+            prompt: !!prompt,
+            effectivePrompt: !!effectivePrompt,
+            hasVersions,
+            hasInputFiles,
+            hasEmptyDoc,
+            loading,
+        });
+    }
+    if (!document) {
+        if (debug)
+            console.log('[ImgGenModeUtils] No document - placeholder mode');
+        return 'placeholder';
+    }
+    if (hasInputFiles && !effectivePrompt && !hasVersions) {
+        if (debug)
+            console.log('[ImgGenModeUtils] Has input files but no effective prompt - uploadWaiting mode');
+        return 'uploadWaiting';
+    }
+    if (document && effectivePrompt && !hasVersions) {
+        if (debug)
+            console.log('[ImgGenModeUtils] Has document + prompt but no versions - generating mode');
+        return 'generating';
+    }
+    if (debug)
+        console.log('[ImgGenModeUtils] Fallback - placeholder mode');
+    return 'placeholder';
+}
+//# sourceMappingURL=ImgGenModeUtils.js.map

package/components/ImgGenUtils/ImgGenModeUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImgGenModeUtils.js","sourceRoot":"","sources":["../../../jsr/components/ImgGenUtils/ImgGenModeUtils.ts"],"names":[],"mappings":"AAgBA,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,KAAK,GAON,EAAc;IACb,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,KAAK;YAAE,OAAO,CAAC,GAAG,CAAC,8CAA8C,CAAC,CAAC;QACvE,OAAO,OAAO,CAAC;IACjB,CAAC;IAGD,IAAI,eAAe,GAAG,MAAM,CAAC;IAC7B,IAAI,CAAC,eAAe,IAAI,QAAQ,EAAE,CAAC;QAEjC,IAAI,QAAQ,CAAC,MAAM,IAAI,OAAO,QAAQ,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;YAC3D,eAAe,GAAG,QAAQ,CAAC,MAAM,CAAC;QACpC,CAAC;QACD,iCAAiC;aAC5B,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,gBAAgB,EAAE,CAAC;YACvD,eAAe,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,IAAI,CAAC;QACtE,CAAC;IACH,CAAC;IAID,MAAM,WAAW,GAAG,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,CAAC;IAKjD,IAAI,OAAO,IAAI,CAAC,MAAM,IAAI,eAAe,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;QAC3D,IAAI,KAAK;YAAE,OAAO,CAAC,GAAG,CAAC,iEAA+D,CAAC,CAAC;QACxF,OAAO,YAAY,CAAC;IACtB,CAAC;IAID,IAAI,WAAW,EAAE,CAAC;QAChB,IAAI,KAAK;YAAE,OAAO,CAAC,GAAG,CAAC,+CAA+C,CAAC,CAAC;QACxE,OAAO,SAAS,CAAC;IACnB,CAAC;IAGD,MAAM,aAAa,GACjB,QAAQ,EAAE,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;IAIvF,MAAM,WAAW,GACf,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,QAAQ,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IAEhG,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,CAAC,GAAG,CAAC,qCAAqC,EAAE;YACjD,MAAM,EAAE,CAAC,CAAC,MAAM;YAChB,eAAe,EAAE,CAAC,CAAC,eAAe;YAClC,WAAW;YACX,aAAa;YACb,WAAW;YACX,OAAO;SACR,CAAC,CAAC;IACL,CAAC;IAGD,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,IAAI,KAAK;YAAE,OAAO,CAAC,GAAG,CAAC,kDAAkD,CAAC,CAAC;QAC3E,OAAO,aAAa,CAAC;IACvB,CAAC;IAGD,IAAI,aAAa,IAAI,CAAC,eAAe,IAAI,CAAC,WAAW,EAAE,CAAC;QACtD,IAAI,KAAK;YACP,OAAO,CAAC,GAAG,CAAC,gFAAgF,CAAC,CAAC;QAChG,OAAO,eAAe,CAAC;IACzB,CAAC;IAGD,IAAI,QAAQ,IAAI,eAAe,IAAI,CAAC,WAAW,EAAE,CAAC;QAChD,IAAI,KAAK;YACP,OAAO,CAAC,GAAG,CAAC,2EAA2E,CAAC,CAAC;QAC3F,OAAO,YAAY,CAAC;IACtB,CAAC;IAGD,IAAI,KAAK;QAAE,OAAO,CAAC,GAAG,CAAC,+CAA+C,CAAC,CAAC;IACxE,OAAO,aAAa,CAAC;AAAA,CACtB"}

package/components/ImgGenUtils/ImgGenPromptWaiting.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ImgGenClasses } from '../../utils/style-utils.js';
+interface ImgGenPromptWaitingProps {
+    readonly className?: string;
+    readonly classes?: Partial<ImgGenClasses>;
+    readonly database?: string;
+    readonly debug?: boolean;
+    readonly onFilesUploaded?: (docId: string) => void;
+}
+export declare function ImgGenPromptWaiting({ className, classes, database, debug, onFilesUploaded }: ImgGenPromptWaitingProps): React.JSX.Element;
+export {};

package/components/ImgGenUtils/ImgGenPromptWaiting.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { combineClasses, defaultClasses } from '../../utils/style-utils.js';
+import { ImgGenFileDrop } from './ImgGenFileDrop.js';
+import { useFireproof } from 'use-fireproof';
+export function ImgGenPromptWaiting({ className, classes = defaultClasses, database, debug, onFilesUploaded, }) {
+    const { database: db } = useFireproof(database || 'ImgGen');
+    const handleFilesDropped = React.useCallback(async (files) => {
+        if (!files.length)
+            return;
+        if (debug) {
+            console.log(`[ImgGenPromptWaiting] Handling ${files.length} dropped files`);
+        }
+        try {
+            const newDoc = {
+                type: 'image',
+                createdAt: new Date().toISOString(),
+                _files: {},
+            };
+            files.forEach((file, index) => {
+                newDoc._files[`in${index + 1}`] = file;
+            });
+            const result = await db.put(newDoc);
+            if (debug) {
+                console.log('[ImgGenPromptWaiting] Created document for uploads:', result.id);
+            }
+            if (onFilesUploaded && result.id) {
+                onFilesUploaded(result.id);
+            }
+        }
+        catch (error) {
+            console.error('[ImgGenPromptWaiting] Error handling file upload:', error);
+        }
+    }, [db, debug, onFilesUploaded]);
+    return (React.createElement("div", { className: combineClasses('imggen-upload-waiting', className || '', classes?.uploadWaiting || '') },
+        React.createElement("div", { className: "imggen-placeholder-content", style: { marginBottom: '1rem', textAlign: 'center' } },
+            React.createElement("h3", { style: { margin: '0 0 0.5rem 0', color: '#333' } }, "Generate an Image"),
+            React.createElement("p", { style: { margin: '0', color: '#666' } }, "Enter a prompt or upload an image to edit")),
+        React.createElement(ImgGenFileDrop, { className: classes?.dropZone || '', onFilesDropped: handleFilesDropped, isActive: true, maxFiles: 10, debug: debug, addFilesMessage: "Drop images here to upload (or click to browse)" })));
+}
+//# sourceMappingURL=ImgGenPromptWaiting.js.map

package/components/ImgGenUtils/ImgGenPromptWaiting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImgGenPromptWaiting.js","sourceRoot":"","sources":["../../../jsr/components/ImgGenUtils/ImgGenPromptWaiting.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,cAAc,EAAiB,MAAM,4BAA4B,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAiB7C,MAAM,UAAU,mBAAmB,CAAC,EAClC,SAAS,EACT,OAAO,GAAG,cAAc,EACxB,QAAQ,EACR,KAAK,EACL,eAAe,GACU,EAAE;IAC3B,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,YAAY,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC;IAG5D,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAC1C,KAAK,EAAE,KAAa,EAAE,EAAE,CAAC;QACvB,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAO;QAE1B,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,CAAC,GAAG,CAAC,kCAAkC,KAAK,CAAC,MAAM,gBAAgB,CAAC,CAAC;QAC9E,CAAC;QAED,IAAI,CAAC;YAEH,MAAM,MAAM,GAAG;gBACb,IAAI,EAAE,OAAO;gBACb,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;gBACnC,MAAM,EAAE,EAA0B;aACnC,CAAC;YAGF,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;gBAG7B,MAAM,CAAC,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;YAAA,CACxC,CAAC,CAAC;YAGH,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAEpC,IAAI,KAAK,EAAE,CAAC;gBACV,OAAO,CAAC,GAAG,CAAC,qDAAqD,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;YAChF,CAAC;YAGD,IAAI,eAAe,IAAI,MAAM,CAAC,EAAE,EAAE,CAAC;gBACjC,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,mDAAmD,EAAE,KAAK,CAAC,CAAC;QAC5E,CAAC;IAAA,CACF,EACD,CAAC,EAAE,EAAE,KAAK,EAAE,eAAe,CAAC,CAC7B,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,cAAc,CACvB,uBAAuB,EACvB,SAAS,IAAI,EAAE,EACf,OAAO,EAAE,aAAa,IAAI,EAAE,CAC7B;QAED,6BACE,SAAS,EAAC,4BAA4B,EACtC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE;YAEpD,4BAAI,KAAK,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,wBAAwB;YAC5E,2BAAG,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,gDAA+C,CACnF;QAEN,oBAAC,cAAc,IACb,SAAS,EAAE,OAAO,EAAE,QAAQ,IAAI,EAAE,EAClC,cAAc,EAAE,kBAAkB,EAClC,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,EAAE,EACZ,KAAK,EAAE,KAAK,EACZ,eAAe,EAAC,iDAAiD,GACjE,CACE,CACP,CAAC;AAAA,CACH"}

package/components/ImgGenUtils/ImgGenUploadWaiting.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { PartialImageDocument } from '@vibes.diy/use-vibes-types';
+import { Database } from 'use-fireproof';
+import { ImgGenClasses } from '../../utils/style-utils.js';
+interface ImgGenUploadWaitingProps {
+    readonly document?: PartialImageDocument;
+    readonly className?: string;
+    readonly classes?: Partial<ImgGenClasses>;
+    readonly debug?: boolean;
+    readonly database?: string | Database;
+    readonly onFilesAdded?: () => void;
+    readonly onDocumentCreated?: (docId: string) => void;
+    readonly onPromptSubmit: (prompt: string, documentId?: string) => void;
+}
+export declare function ImgGenUploadWaiting({ document, className, classes, debug, database, onFilesAdded, onDocumentCreated, onPromptSubmit }: ImgGenUploadWaitingProps): React.ReactElement;
+export {};