@jhits/plugin-images 0.0.8 → 0.0.9

package/src/components/ImagePicker.d.ts

@@ -1,3 +0,0 @@
-import type { ImagePickerProps } from '../types';
-export declare function ImagePicker({ value, onChange, brightness, blur, scale, positionX, positionY, aspectRatio, borderRadius, onBrightnessChange, onBlurChange, onScaleChange, onPositionXChange, onPositionYChange, onEditorSave, autoOpenEditor, }: ImagePickerProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ImagePicker.d.ts.map

package/src/components/ImagePicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ImagePicker.d.ts","sourceRoot":"","sources":["ImagePicker.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAQjD,wBAAgB,WAAW,CAAC,EACxB,KAAK,EAAE,QAAQ,EAAE,UAAgB,EAAE,IAAQ,EAAE,KAAW,EAAE,SAAa,EAAE,SAAa,EACtF,WAAoB,EAAE,YAA2B,EAAE,kBAAkB,EAAE,YAAY,EACnF,aAAa,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,YAAY,EAAE,cAAsB,GAC5F,EAAE,gBAAgB,2CAuPlB"}

package/src/components/ImagePicker.js

@@ -1,143 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { Search, Image as ImageIcon, Settings } from 'lucide-react';
-import { ImageEditor } from './ImageEditor';
-import { ImageBrowserModal } from './ImageBrowserModal';
-import { useImagePicker } from '../hooks/useImagePicker';
-import { getImageTransform, getImageFilter } from '../utils/transforms';
-import { getFallbackImageUrl } from '../utils/fallback';
-export function ImagePicker({ value, onChange, brightness = 100, blur = 0, scale = 1.0, positionX = 0, positionY = 0, aspectRatio = '16/9', borderRadius = 'rounded-xl', onBrightnessChange, onBlurChange, onScaleChange, onPositionXChange, onPositionYChange, onEditorSave, autoOpenEditor = false, }) {
-    const [transforms, setTransforms] = useState({ scale: scale >= 0.1 ? scale : 1.0, positionX, positionY });
-    const [isEditorOpen, setIsEditorOpen] = useState(false);
-    const [isBrowserOpen, setIsBrowserOpen] = useState(false);
-    const [previewBaseScale, setPreviewBaseScale] = useState(null);
-    const [previewImageError, setPreviewImageError] = useState(false);
-    const [mounted, setMounted] = useState(false);
-    const [portalTarget, setPortalTarget] = useState(null);
-    const previewImageRef = useRef(null);
-    const previewContainerRef = useRef(null);
-    const editorRef = useRef(null);
-    const { selectedImage, setSelectedImage } = useImagePicker({ value, images: [] });
-    // Reset preview error when selected image changes
-    useEffect(() => {
-        setPreviewImageError(false);
-    }, [selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.id, selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.url]);
-    // Handle SSR & portal target - ensure we only render portal on client
-    useEffect(() => {
-        var _a;
-        setMounted(true);
-        if (typeof document === 'undefined')
-            return;
-        // If we're inside the GlobalImageEditor overlay, portal into that instead of document.body
-        // This ensures the browser/editor modals share the same stacking context
-        const editorContainer = (_a = previewContainerRef.current) === null || _a === void 0 ? void 0 : _a.closest('[data-image-editor="true"]');
-        if (editorContainer) {
-            setPortalTarget(editorContainer);
-        }
-        else {
-            setPortalTarget(document.body);
-        }
-    }, []);
-    // Auto-open editor if requested (e.g., when opening from edit button)
-    // Only auto-open once when the prop first becomes true, not on every render
-    const hasAutoOpenedRef = useRef(false);
-    useEffect(() => {
-        if (autoOpenEditor && selectedImage && !isEditorOpen && !hasAutoOpenedRef.current) {
-            // Small delay to ensure ImagePicker is fully rendered
-            const timer = setTimeout(() => {
-                setIsEditorOpen(true);
-                hasAutoOpenedRef.current = true;
-            }, 100);
-            return () => clearTimeout(timer);
-        }
-        // Reset the flag when autoOpenEditor becomes false
-        if (!autoOpenEditor) {
-            hasAutoOpenedRef.current = false;
-        }
-    }, [autoOpenEditor, selectedImage, isEditorOpen]);
-    useEffect(() => {
-        if (!isEditorOpen)
-            setTransforms({ scale: scale >= 0.1 ? scale : 1.0, positionX, positionY });
-    }, [scale, positionX, positionY, isEditorOpen]);
-    const calculatePreviewBaseScale = useCallback(() => {
-        if (!previewImageRef.current || !previewContainerRef.current)
-            return;
-        const fit = Math.max(previewContainerRef.current.offsetWidth / previewImageRef.current.naturalWidth, previewContainerRef.current.offsetHeight / previewImageRef.current.naturalHeight);
-        setPreviewBaseScale(fit);
-    }, []);
-    // Handle editor save - delegate to parent callbacks instead of saving directly
-    // This ensures all saves go through a single location (GlobalImageEditor.saveImageTransform)
-    const handleEditorSave = async () => {
-        if (!editorRef.current || !selectedImage)
-            return;
-        try {
-            // 1. Get current values from Editor UI (this will also call onBrightnessChange and onBlurChange)
-            const final = await editorRef.current.flushSave();
-            // 2. Normalize position values - if they're -50% (centering value), treat as 0
-            const normalizedPositionX = final.positionX === -50 ? 0 : final.positionX;
-            const normalizedPositionY = final.positionY === -50 ? 0 : final.positionY;
-            // 3. If onEditorSave is provided, use it exclusively to prevent duplicate saves
-            // Otherwise, update parent state through individual callbacks
-            console.log('[ImagePicker] handleEditorSave - final values:', final, 'has onEditorSave:', !!onEditorSave);
-            if (onEditorSave) {
-                // onEditorSave handles everything - don't call individual handlers to avoid duplicates
-                console.log('[ImagePicker] Calling onEditorSave with:', { scale: final.scale, positionX: normalizedPositionX, positionY: normalizedPositionY, brightness: final.brightness, blur: final.blur });
-                onEditorSave(final.scale, normalizedPositionX, normalizedPositionY, final.brightness, final.blur);
-            }
-            else {
-                // Fallback: update parent state through individual callbacks
-                // Since onEditorSave is not provided, call all callbacks and they should handle saving
-                // The last one (onPositionYChange) will trigger the final save
-                console.log('[ImagePicker] No onEditorSave, using individual callbacks');
-                // Update scale first
-                onScaleChange === null || onScaleChange === void 0 ? void 0 : onScaleChange(final.scale);
-                // Update positions - these will trigger saves
-                onPositionXChange === null || onPositionXChange === void 0 ? void 0 : onPositionXChange(normalizedPositionX);
-                // Last callback - this should trigger the final save with all values
-                // We need to ensure this saves immediately with all final values including brightness/blur
-                onPositionYChange === null || onPositionYChange === void 0 ? void 0 : onPositionYChange(normalizedPositionY);
-            }
-            // 5. Close the editor
-            setIsEditorOpen(false);
-        }
-        catch (error) {
-            console.error('[ImagePicker] Failed to get editor values:', error);
-        }
-    };
-    const aspectValue = useMemo(() => {
-        if (aspectRatio === 'auto')
-            return undefined;
-        const [w, h] = aspectRatio.split('/').map(Number);
-        return w / h;
-    }, [aspectRatio]);
-    return (_jsxs("div", { className: "space-y-6", children: [selectedImage ? (_jsx("div", { className: "relative group max-w-md mx-auto", children: _jsxs("div", { className: `relative ${borderRadius} overflow-hidden border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 shadow-lg transition-all duration-300 hover:shadow-xl`, style: { aspectRatio: aspectValue, width: '100%' }, children: [_jsx("div", { ref: previewContainerRef, className: "relative w-full h-full overflow-hidden", children: previewImageError ? (_jsx("img", { src: getFallbackImageUrl(), alt: selectedImage.filename || 'Image not found', className: "absolute max-w-none", style: {
-                                    top: '50%', left: '50%', width: 'auto', height: 'auto',
-                                    minWidth: '100%', minHeight: '100%',
-                                    transform: 'translate(-50%, -50%)',
-                                    transformOrigin: 'center center',
-                                    objectFit: 'cover',
-                                } })) : (_jsx("img", { ref: previewImageRef, src: selectedImage.url, alt: selectedImage.filename, className: "absolute max-w-none", onLoad: calculatePreviewBaseScale, onError: () => setPreviewImageError(true), style: {
-                                    top: '50%', left: '50%', width: 'auto', height: 'auto',
-                                    minWidth: '100%', minHeight: '100%',
-                                    filter: getImageFilter(brightness, blur),
-                                    transform: previewBaseScale ? getImageTransform({ scale: transforms.scale, positionX: transforms.positionX, positionY: transforms.positionY, baseScale: previewBaseScale }, true) : 'translate(-50%, -50%)',
-                                    transformOrigin: 'center center',
-                                } })) }), _jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300 pointer-events-none" })] }) })) : (_jsxs("div", { onClick: () => setIsBrowserOpen(true), className: "aspect-video bg-gradient-to-br from-neutral-50 to-neutral-100 dark:from-neutral-900 dark:to-neutral-950 rounded-2xl border-2 border-dashed border-neutral-300 dark:border-neutral-800 flex flex-col items-center justify-center text-neutral-400 hover:border-primary hover:text-primary cursor-pointer transition-all duration-300 hover:shadow-lg group", children: [_jsx("div", { className: "p-4 bg-white/50 dark:bg-neutral-800/50 rounded-full mb-3 group-hover:scale-110 transition-transform duration-300", children: _jsx(ImageIcon, { size: 28, className: "group-hover:scale-110 transition-transform duration-300" }) }), _jsx("span", { className: "text-xs font-bold uppercase tracking-[0.15em] group-hover:tracking-[0.2em] transition-all duration-300", children: "Select Image" })] })), _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3", children: [_jsxs("button", { onClick: () => setIsBrowserOpen(true), className: "flex items-center justify-center gap-2 px-5 py-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl text-sm font-semibold text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-750 hover:border-neutral-300 dark:hover:border-neutral-600 transition-all duration-200 shadow-sm hover:shadow-md active:scale-[0.98]", children: [_jsx(Search, { size: 16 }), "Browse"] }), _jsxs("button", { onClick: () => setIsEditorOpen(true), disabled: !selectedImage, className: "flex items-center justify-center gap-2 px-5 py-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl text-sm font-semibold text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-750 hover:border-neutral-300 dark:hover:border-neutral-600 transition-all duration-200 shadow-sm hover:shadow-md active:scale-[0.98] disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:shadow-sm disabled:hover:scale-100", children: [_jsx(Settings, { size: 16 }), "Edit"] })] }), isEditorOpen && selectedImage && mounted && portalTarget && createPortal(_jsx("div", { className: "fixed inset-0 z-[200] flex items-center justify-center bg-neutral-950/80 dark:bg-neutral-950/90 backdrop-blur-md p-4 animate-in fade-in duration-200", children: _jsxs("div", { className: "w-full max-w-4xl bg-white dark:bg-neutral-900 rounded-3xl overflow-hidden shadow-2xl dark:shadow-neutral-950/50 flex flex-col max-h-[85vh] border border-neutral-200 dark:border-neutral-800 animate-in zoom-in-95 duration-300", children: [_jsx("div", { className: "flex-1 overflow-hidden p-4 lg:p-6", children: _jsx(ImageEditor, { ref: editorRef, imageUrl: selectedImage.url, scale: transforms.scale, positionX: transforms.positionX, positionY: transforms.positionY, brightness: brightness, blur: blur, onScaleChange: (s) => setTransforms(t => (Object.assign(Object.assign({}, t), { scale: s }))), onPositionChange: (x, y) => {
-                                    // Only update local state during drag - don't trigger saves
-                                    // Saves will happen when editor closes via onEditorSave
-                                    setTransforms(t => (Object.assign(Object.assign({}, t), { positionX: x, positionY: y })));
-                                }, onBrightnessChange: onBrightnessChange, onBlurChange: onBlurChange, aspectRatio: aspectRatio, borderRadius: borderRadius }) }), _jsxs("div", { className: "px-6 py-5 border-t border-neutral-200 dark:border-neutral-800 bg-neutral-50/80 dark:bg-neutral-900/80 backdrop-blur-sm flex justify-end gap-3", children: [_jsx("button", { onClick: () => setIsEditorOpen(false), className: "px-6 py-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl font-semibold text-neutral-700 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all duration-200 shadow-sm hover:shadow-md active:scale-[0.98]", children: "Cancel" }), _jsx("button", { onClick: handleEditorSave, className: "px-8 py-2.5 bg-primary text-white rounded-xl font-semibold shadow-md hover:shadow-lg hover:bg-primary/90 transition-all duration-200 active:scale-[0.98]", children: "Done" })] })] }) }), portalTarget), _jsx(ImageBrowserModal, { isOpen: isBrowserOpen, onClose: () => setIsBrowserOpen(false), onSelectImage: (image) => {
-                    setSelectedImage(image);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(image);
-                    setIsBrowserOpen(false);
-                }, selectedImageId: (() => {
-                    // Use resolved image's filename/URL if available, otherwise fall back to value
-                    // This ensures semantic IDs are resolved to actual filenames for matching
-                    if (selectedImage) {
-                        return selectedImage.filename || selectedImage.url || selectedImage.id || value;
-                    }
-                    return value;
-                })(), darkMode: false })] }));
-}

package/src/components/ImagePicker.tsx

@@ -1,265 +0,0 @@
-'use client';
-
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { Search, Image as ImageIcon, Settings } from 'lucide-react';
-import type { ImagePickerProps } from '../types';
-import type { ImageMetadata } from '../types';
-import { ImageEditor, type ImageEditorHandle } from './ImageEditor';
-import { ImageBrowserModal } from './ImageBrowserModal';
-import { useImagePicker } from '../hooks/useImagePicker';
-import { getImageTransform, getImageFilter } from '../utils/transforms';
-import { getFallbackImageUrl } from '../utils/fallback';
-
-export function ImagePicker({
-    value, onChange, brightness = 100, blur = 0, scale = 1.0, positionX = 0, positionY = 0,
-    aspectRatio = '16/9', borderRadius = 'rounded-xl', onBrightnessChange, onBlurChange,
-    onScaleChange, onPositionXChange, onPositionYChange, onEditorSave, autoOpenEditor = false,
-}: ImagePickerProps) {
-
-    const [transforms, setTransforms] = useState({ scale: scale >= 0.1 ? scale : 1.0, positionX, positionY });
-    const [isEditorOpen, setIsEditorOpen] = useState(false);
-    const [isBrowserOpen, setIsBrowserOpen] = useState(false);
-    const [previewBaseScale, setPreviewBaseScale] = useState<number | null>(null);
-    const [previewImageError, setPreviewImageError] = useState(false);
-    const [mounted, setMounted] = useState(false);
-    const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);
-    const previewImageRef = useRef<HTMLImageElement>(null);
-    const previewContainerRef = useRef<HTMLDivElement>(null);
-    const editorRef = useRef<ImageEditorHandle | null>(null);
-
-    const { selectedImage, setSelectedImage } = useImagePicker({ value, images: [] });
-
-    // Reset preview error when selected image changes
-    useEffect(() => {
-        setPreviewImageError(false);
-    }, [selectedImage?.id, selectedImage?.url]);
-
-    // Handle SSR & portal target - ensure we only render portal on client
-    useEffect(() => {
-        setMounted(true);
-
-        if (typeof document === 'undefined') return;
-
-        // If we're inside the GlobalImageEditor overlay, portal into that instead of document.body
-        // This ensures the browser/editor modals share the same stacking context
-        const editorContainer = previewContainerRef.current?.closest('[data-image-editor="true"]') as HTMLElement | null;
-        if (editorContainer) {
-            setPortalTarget(editorContainer);
-        } else {
-            setPortalTarget(document.body);
-        }
-    }, []);
-
-    // Auto-open editor if requested (e.g., when opening from edit button)
-    // Only auto-open once when the prop first becomes true, not on every render
-    const hasAutoOpenedRef = useRef(false);
-    useEffect(() => {
-        if (autoOpenEditor && selectedImage && !isEditorOpen && !hasAutoOpenedRef.current) {
-            // Small delay to ensure ImagePicker is fully rendered
-            const timer = setTimeout(() => {
-                setIsEditorOpen(true);
-                hasAutoOpenedRef.current = true;
-            }, 100);
-            return () => clearTimeout(timer);
-        }
-        // Reset the flag when autoOpenEditor becomes false
-        if (!autoOpenEditor) {
-            hasAutoOpenedRef.current = false;
-        }
-    }, [autoOpenEditor, selectedImage, isEditorOpen]);
-
-    useEffect(() => {
-        if (!isEditorOpen) setTransforms({ scale: scale >= 0.1 ? scale : 1.0, positionX, positionY });
-    }, [scale, positionX, positionY, isEditorOpen]);
-
-    const calculatePreviewBaseScale = useCallback(() => {
-        if (!previewImageRef.current || !previewContainerRef.current) return;
-        const fit = Math.max(previewContainerRef.current.offsetWidth / previewImageRef.current.naturalWidth,
-            previewContainerRef.current.offsetHeight / previewImageRef.current.naturalHeight);
-        setPreviewBaseScale(fit);
-    }, []);
-
-    // Handle editor save - delegate to parent callbacks instead of saving directly
-    // This ensures all saves go through a single location (GlobalImageEditor.saveImageTransform)
-    const handleEditorSave = async () => {
-        if (!editorRef.current || !selectedImage) return;
-
-        try {
-            // 1. Get current values from Editor UI (this will also call onBrightnessChange and onBlurChange)
-            const final = await editorRef.current.flushSave();
-
-            // 2. Normalize position values - if they're -50% (centering value), treat as 0
-            const normalizedPositionX = final.positionX === -50 ? 0 : final.positionX;
-            const normalizedPositionY = final.positionY === -50 ? 0 : final.positionY;
-
-            // 3. If onEditorSave is provided, use it exclusively to prevent duplicate saves
-            // Otherwise, update parent state through individual callbacks
-            console.log('[ImagePicker] handleEditorSave - final values:', final, 'has onEditorSave:', !!onEditorSave);
-            if (onEditorSave) {
-                // onEditorSave handles everything - don't call individual handlers to avoid duplicates
-                console.log('[ImagePicker] Calling onEditorSave with:', { scale: final.scale, positionX: normalizedPositionX, positionY: normalizedPositionY, brightness: final.brightness, blur: final.blur });
-                onEditorSave(final.scale, normalizedPositionX, normalizedPositionY, final.brightness, final.blur);
-            } else {
-                // Fallback: update parent state through individual callbacks
-                // Since onEditorSave is not provided, call all callbacks and they should handle saving
-                // The last one (onPositionYChange) will trigger the final save
-                console.log('[ImagePicker] No onEditorSave, using individual callbacks');
-                // Update scale first
-                onScaleChange?.(final.scale);
-                // Update positions - these will trigger saves
-                onPositionXChange?.(normalizedPositionX);
-                // Last callback - this should trigger the final save with all values
-                // We need to ensure this saves immediately with all final values including brightness/blur
-                onPositionYChange?.(normalizedPositionY);
-            }
-
-            // 5. Close the editor
-            setIsEditorOpen(false);
-        } catch (error) {
-            console.error('[ImagePicker] Failed to get editor values:', error);
-        }
-    };
-
-
-    const aspectValue = useMemo(() => {
-        if (aspectRatio === 'auto') return undefined;
-        const [w, h] = aspectRatio.split('/').map(Number);
-        return w / h;
-    }, [aspectRatio]);
-
-    return (
-        <div className="space-y-6">
-            {selectedImage ? (
-                <div className="relative group max-w-md mx-auto">
-                    <div className={`relative ${borderRadius} overflow-hidden border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 shadow-lg transition-all duration-300 hover:shadow-xl`} style={{ aspectRatio: aspectValue, width: '100%' }}>
-                        <div ref={previewContainerRef} className="relative w-full h-full overflow-hidden">
-                            {previewImageError ? (
-                                <img
-                                    src={getFallbackImageUrl()}
-                                    alt={selectedImage.filename || 'Image not found'}
-                                    className="absolute max-w-none"
-                                    style={{
-                                        top: '50%', left: '50%', width: 'auto', height: 'auto',
-                                        minWidth: '100%', minHeight: '100%',
-                                        transform: 'translate(-50%, -50%)',
-                                        transformOrigin: 'center center',
-                                        objectFit: 'cover',
-                                    }}
-                                />
-                            ) : (
-                                <img
-                                    ref={previewImageRef} 
-                                    src={selectedImage.url} 
-                                    alt={selectedImage.filename}
-                                    className="absolute max-w-none" 
-                                    onLoad={calculatePreviewBaseScale}
-                                    onError={() => setPreviewImageError(true)}
-                                    style={{
-                                        top: '50%', left: '50%', width: 'auto', height: 'auto',
-                                        minWidth: '100%', minHeight: '100%',
-                                        filter: getImageFilter(brightness, blur),
-                                        transform: previewBaseScale ? getImageTransform({ scale: transforms.scale, positionX: transforms.positionX, positionY: transforms.positionY, baseScale: previewBaseScale }, true) : 'translate(-50%, -50%)',
-                                        transformOrigin: 'center center',
-                                    }}
-                                />
-                            )}
-                        </div>
-                        {/* Overlay on hover */}
-                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300 pointer-events-none" />
-                    </div>
-                </div>
-            ) : (
-                <div
-                    onClick={() => setIsBrowserOpen(true)}
-                    className="aspect-video bg-gradient-to-br from-neutral-50 to-neutral-100 dark:from-neutral-900 dark:to-neutral-950 rounded-2xl border-2 border-dashed border-neutral-300 dark:border-neutral-800 flex flex-col items-center justify-center text-neutral-400 hover:border-primary hover:text-primary cursor-pointer transition-all duration-300 hover:shadow-lg group"
-                >
-                    <div className="p-4 bg-white/50 dark:bg-neutral-800/50 rounded-full mb-3 group-hover:scale-110 transition-transform duration-300">
-                        <ImageIcon size={28} className="group-hover:scale-110 transition-transform duration-300" />
-                    </div>
-                    <span className="text-xs font-bold uppercase tracking-[0.15em] group-hover:tracking-[0.2em] transition-all duration-300">Select Image</span>
-                </div>
-            )}
-
-            <div className="flex flex-wrap items-center justify-center gap-3">
-                <button
-                    onClick={() => setIsBrowserOpen(true)}
-                    className="flex items-center justify-center gap-2 px-5 py-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl text-sm font-semibold text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-750 hover:border-neutral-300 dark:hover:border-neutral-600 transition-all duration-200 shadow-sm hover:shadow-md active:scale-[0.98]"
-                >
-                    <Search size={16} />
-                    Browse
-                </button>
-                <button
-                    onClick={() => setIsEditorOpen(true)}
-                    disabled={!selectedImage}
-                    className="flex items-center justify-center gap-2 px-5 py-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl text-sm font-semibold text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-750 hover:border-neutral-300 dark:hover:border-neutral-600 transition-all duration-200 shadow-sm hover:shadow-md active:scale-[0.98] disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:shadow-sm disabled:hover:scale-100"
-                >
-                    <Settings size={16} />
-                    Edit
-                </button>
-            </div>
-
-            {isEditorOpen && selectedImage && mounted && portalTarget && createPortal(
-                <div className="fixed inset-0 z-[200] flex items-center justify-center bg-neutral-950/80 dark:bg-neutral-950/90 backdrop-blur-md p-4 animate-in fade-in duration-200">
-                    <div className="w-full max-w-4xl bg-white dark:bg-neutral-900 rounded-3xl overflow-hidden shadow-2xl dark:shadow-neutral-950/50 flex flex-col max-h-[85vh] border border-neutral-200 dark:border-neutral-800 animate-in zoom-in-95 duration-300">
-                        <div className="flex-1 overflow-hidden p-4 lg:p-6">
-                            <ImageEditor
-                                ref={editorRef}
-                                imageUrl={selectedImage.url}
-                                scale={transforms.scale}
-                                positionX={transforms.positionX}
-                                positionY={transforms.positionY}
-                                brightness={brightness}
-                                blur={blur}
-                                onScaleChange={(s) => setTransforms(t => ({ ...t, scale: s }))}
-                                onPositionChange={(x, y) => {
-                                    // Only update local state during drag - don't trigger saves
-                                    // Saves will happen when editor closes via onEditorSave
-                                    setTransforms(t => ({ ...t, positionX: x, positionY: y }));
-                                }}
-                                onBrightnessChange={onBrightnessChange}
-                                onBlurChange={onBlurChange}
-                                aspectRatio={aspectRatio}
-                                borderRadius={borderRadius}
-                            />
-                        </div>
-                        <div className="px-6 py-5 border-t border-neutral-200 dark:border-neutral-800 bg-neutral-50/80 dark:bg-neutral-900/80 backdrop-blur-sm flex justify-end gap-3">
-                            <button
-                                onClick={() => setIsEditorOpen(false)}
-                                className="px-6 py-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl font-semibold text-neutral-700 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all duration-200 shadow-sm hover:shadow-md active:scale-[0.98]"
-                            >
-                                Cancel
-                            </button>
-                            <button
-                                onClick={handleEditorSave}
-                                className="px-8 py-2.5 bg-primary text-white rounded-xl font-semibold shadow-md hover:shadow-lg hover:bg-primary/90 transition-all duration-200 active:scale-[0.98]"
-                            >
-                                Done
-                            </button>
-                        </div>
-                    </div>
-                </div>,
-                portalTarget
-            )}
-
-            <ImageBrowserModal
-                isOpen={isBrowserOpen}
-                onClose={() => setIsBrowserOpen(false)}
-                onSelectImage={(image) => {
-                    setSelectedImage(image);
-                    onChange?.(image);
-                    setIsBrowserOpen(false);
-                }}
-                selectedImageId={(() => {
-                    // Use resolved image's filename/URL if available, otherwise fall back to value
-                    // This ensures semantic IDs are resolved to actual filenames for matching
-                    if (selectedImage) {
-                        return selectedImage.filename || selectedImage.url || selectedImage.id || value;
-                    }
-                    return value;
-                })()}
-                darkMode={false}
-            />
-        </div>
-    );
-}

package/src/components/ImagesPluginInit.d.ts

@@ -1,24 +0,0 @@
-/**
- * Images Plugin Initialization Component
- *
- * This component reads from window.__JHITS_PLUGIN_PROPS__['plugin-images']
- * and renders the GlobalImageEditor if enabled.
- *
- * Render this once in your app layout after calling initImagesPlugin().
- */
-/**
- * Images Plugin Initialization Component
- *
- * Renders the global image editor if enabled in the plugin configuration.
- * This component should be rendered in your app layout.
- *
- * @example
- * ```tsx
- * import { ImagesPluginInit } from '@jhits/plugin-images';
- *
- * // After calling initImagesPlugin() in a useEffect or script
- * <ImagesPluginInit />
- * ```
- */
-export declare function ImagesPluginInit(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ImagesPluginInit.d.ts.map

package/src/components/ImagesPluginInit.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ImagesPluginInit.d.ts","sourceRoot":"","sources":["ImagesPluginInit.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,4CAE/B"}

package/src/components/ImagesPluginInit.js

@@ -1,28 +0,0 @@
-/**
- * Images Plugin Initialization Component
- *
- * This component reads from window.__JHITS_PLUGIN_PROPS__['plugin-images']
- * and renders the GlobalImageEditor if enabled.
- *
- * Render this once in your app layout after calling initImagesPlugin().
- */
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { GlobalImageEditor } from './GlobalImageEditor';
-/**
- * Images Plugin Initialization Component
- *
- * Renders the global image editor if enabled in the plugin configuration.
- * This component should be rendered in your app layout.
- *
- * @example
- * ```tsx
- * import { ImagesPluginInit } from '@jhits/plugin-images';
- *
- * // After calling initImagesPlugin() in a useEffect or script
- * <ImagesPluginInit />
- * ```
- */
-export function ImagesPluginInit() {
-    return _jsx(GlobalImageEditor, {});
-}

package/src/components/ImagesPluginInit.tsx

@@ -1,31 +0,0 @@
-/**
- * Images Plugin Initialization Component
- * 
- * This component reads from window.__JHITS_PLUGIN_PROPS__['plugin-images']
- * and renders the GlobalImageEditor if enabled.
- * 
- * Render this once in your app layout after calling initImagesPlugin().
- */
-
-'use client';
-
-import { GlobalImageEditor } from './GlobalImageEditor';
-
-/**
- * Images Plugin Initialization Component
- * 
- * Renders the global image editor if enabled in the plugin configuration.
- * This component should be rendered in your app layout.
- * 
- * @example
- * ```tsx
- * import { ImagesPluginInit } from '@jhits/plugin-images';
- * 
- * // After calling initImagesPlugin() in a useEffect or script
- * <ImagesPluginInit />
- * ```
- */
-export function ImagesPluginInit() {
-    return <GlobalImageEditor />;
-}
-

package/src/components/index.ts

@@ -1,10 +0,0 @@
-/**
- * Image Picker Component Exports
- */
-
-export { ImagePicker } from './ImagePicker';
-export { ImageEditor } from './ImageEditor';
-export { ImageEffectsPanel } from './ImageEffectsPanel';
-export { ImageBrowserModal } from './ImageBrowserModal';
-export type { ImagePickerProps } from '../types';
-