@jhits/plugin-images 0.0.7 → 0.0.9

package/src/components/GlobalImageEditor/types.d.ts

@@ -1,36 +0,0 @@
-/**
- * Types for GlobalImageEditor component
- */
-export interface SelectedImage {
-    element: HTMLElement;
-    originalSrc: string;
-    brightness: number;
-    blur: number;
-    scale: number;
-    positionX: number;
-    positionY: number;
-    isBackground: boolean;
-    aspectRatio?: string;
-    borderRadius?: string;
-    objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-    objectPosition?: string;
-}
-export interface PluginConfig {
-    enabled: boolean;
-    className?: string;
-    overlayClassName?: string;
-}
-export interface DetectedStyling {
-    aspectRatio: string;
-    borderRadius: string;
-    objectFit: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-    objectPosition: string;
-}
-export interface PendingTransform {
-    scale: number;
-    positionX: number;
-    positionY: number;
-    semanticId: string;
-    filename: string;
-}
-//# sourceMappingURL=types.d.ts.map

package/src/components/GlobalImageEditor/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,aAAa;IAC1B,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;IACjE,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,eAAe;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;IAChE,cAAc,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CACpB"}

package/src/components/GlobalImageEditor/types.js

@@ -1,4 +0,0 @@
-/**
- * Types for GlobalImageEditor component
- */
-export {};

package/src/components/GlobalImageEditor/types.ts

@@ -1,39 +0,0 @@
-/**
- * Types for GlobalImageEditor component
- */
-
-export interface SelectedImage {
-    element: HTMLElement;
-    originalSrc: string;
-    brightness: number;
-    blur: number;
-    scale: number;
-    positionX: number;
-    positionY: number;
-    isBackground: boolean;
-    aspectRatio?: string;
-    borderRadius?: string;
-    objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-    objectPosition?: string;
-}
-
-export interface PluginConfig {
-    enabled: boolean;
-    className?: string;
-    overlayClassName?: string;
-}
-
-export interface DetectedStyling {
-    aspectRatio: string;
-    borderRadius: string;
-    objectFit: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
-    objectPosition: string;
-}
-
-export interface PendingTransform {
-    scale: number;
-    positionX: number;
-    positionY: number;
-    semanticId: string;
-    filename: string;
-}

package/src/components/GlobalImageEditor.d.ts

@@ -1,8 +0,0 @@
-/**
- * Global Image Editor Component
- * Allows clicking on any image in the client app to edit it (admin/dev only)
- *
- * Reads configuration from window.__JHITS_PLUGIN_PROPS__['plugin-images']
- */
-export declare function GlobalImageEditor(): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=GlobalImageEditor.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"GlobalImageEditor.d.ts","sourceRoot":"","sources":["GlobalImageEditor.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAeH,wBAAgB,iBAAiB,mDAkThC"}

package/src/components/GlobalImageEditor.js

@@ -1,227 +0,0 @@
-/**
- * Global Image Editor Component
- * Allows clicking on any image in the client app to edit it (admin/dev only)
- *
- * Reads configuration from window.__JHITS_PLUGIN_PROPS__['plugin-images']
- */
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { X } from 'lucide-react';
-import { ImagePicker } from './ImagePicker';
-import { getPluginConfig } from './GlobalImageEditor/config';
-import { parseImageData } from './GlobalImageEditor/imageDetection';
-import { setupImageHandlers } from './GlobalImageEditor/imageSetup';
-import { saveTransformToAPI, flushPendingSave, getFilename, normalizePosition } from './GlobalImageEditor/saveLogic';
-import { handleImageChange, handleBrightnessChange, handleBlurChange } from './GlobalImageEditor/eventHandlers';
-export function GlobalImageEditor() {
-    // Configuration
-    const config = useMemo(() => getPluginConfig(), []);
-    // State
-    const [selectedImage, setSelectedImage] = useState(null);
-    const [isOpen, setIsOpen] = useState(false);
-    const [userRole, setUserRole] = useState(null);
-    const [isLoading, setIsLoading] = useState(true);
-    // Refs for save debouncing
-    const saveTransformTimeoutRef = useRef(null);
-    const pendingTransformRef = useRef(null);
-    // Check if user is admin/dev
-    useEffect(() => {
-        const checkUser = async () => {
-            var _a, _b;
-            try {
-                const res = await fetch('/api/me');
-                const data = await res.json();
-                if (data.loggedIn && (((_a = data.user) === null || _a === void 0 ? void 0 : _a.role) === 'admin' || ((_b = data.user) === null || _b === void 0 ? void 0 : _b.role) === 'dev')) {
-                    setUserRole(data.user.role);
-                }
-            }
-            catch (error) {
-                console.error('Failed to check user role:', error);
-            }
-            finally {
-                setIsLoading(false);
-            }
-        };
-        checkUser();
-    }, []);
-    // Listen for open-image-editor custom event from Image/BackgroundImage components
-    useEffect(() => {
-        if (!userRole)
-            return;
-        const handleOpenEditor = async (e) => {
-            const { id, currentBrightness, currentBlur } = e.detail || {};
-            if (!id)
-                return;
-            // Find the element by data-image-id or data-background-image-id
-            let element = document.querySelector(`[data-image-id="${id}"], [data-background-image-id="${id}"]`);
-            if (!element) {
-                element = document.querySelector(`[data-background-image-component="true"][data-background-image-id="${id}"]`);
-            }
-            if (!element) {
-                console.error('[GlobalImageEditor] Element not found for id:', id);
-                return;
-            }
-            // Extract semantic ID
-            const semanticId = element.getAttribute('data-image-id') ||
-                element.getAttribute('data-background-image-id') ||
-                id;
-            // Parse image data
-            const imageData = parseImageData(element, semanticId, currentBrightness, currentBlur);
-            if (!imageData) {
-                console.error('[GlobalImageEditor] Failed to parse image data');
-                return;
-            }
-            // Store semantic ID on element if not already set
-            if (imageData.isBackground && !element.hasAttribute('data-background-image-id')) {
-                element.setAttribute('data-background-image-id', semanticId);
-            }
-            else if (!imageData.isBackground && !element.hasAttribute('data-image-id')) {
-                element.setAttribute('data-image-id', semanticId);
-            }
-            setSelectedImage(imageData);
-            setIsOpen(true);
-        };
-        window.addEventListener('open-image-editor', handleOpenEditor);
-        return () => {
-            window.removeEventListener('open-image-editor', handleOpenEditor);
-        };
-    }, [userRole]);
-    // Add click handlers to all images
-    useEffect(() => {
-        if (isLoading || !userRole) {
-            return;
-        }
-        const cleanup = setupImageHandlers((imageData) => {
-            setSelectedImage(imageData);
-            setIsOpen(true);
-        });
-        // Setup immediately and also after a short delay to catch dynamically loaded images
-        const timeoutId = setTimeout(() => {
-            const cleanup2 = setupImageHandlers((imageData) => {
-                setSelectedImage(imageData);
-                setIsOpen(true);
-            });
-            // Note: This creates a new cleanup, but the first one will handle the initial setup
-        }, 500);
-        return () => {
-            clearTimeout(timeoutId);
-            cleanup();
-        };
-    }, [isLoading, userRole]);
-    // Save image transform (scale/position) to API with debouncing
-    const saveImageTransformHandler = useCallback(async (scale, positionX, positionY, immediate = false, brightnessOverride, blurOverride) => {
-        var _a, _b;
-        if (!selectedImage)
-            return;
-        const { element } = selectedImage;
-        const semanticId = element.getAttribute('data-image-id') ||
-            element.getAttribute('data-background-image-id');
-        if (!semanticId)
-            return;
-        const filename = await getFilename(semanticId, selectedImage);
-        if (!filename)
-            return;
-        // Store pending transform
-        pendingTransformRef.current = {
-            scale,
-            positionX,
-            positionY,
-            semanticId,
-            filename
-        };
-        // Clear existing timeout
-        if (saveTransformTimeoutRef.current) {
-            clearTimeout(saveTransformTimeoutRef.current);
-            saveTransformTimeoutRef.current = null;
-        }
-        // If immediate save is requested (e.g., when "Done" is clicked), save right away
-        if (immediate) {
-            const normalizedPositionX = normalizePosition(positionX);
-            const normalizedPositionY = normalizePosition(positionY);
-            // Use override values if provided, otherwise use selectedImage values
-            // IMPORTANT: Overrides contain the latest values from the editor
-            const finalBrightness = brightnessOverride !== undefined ? brightnessOverride : ((_a = selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.brightness) !== null && _a !== void 0 ? _a : 100);
-            const finalBlur = blurOverride !== undefined ? blurOverride : ((_b = selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.blur) !== null && _b !== void 0 ? _b : 0);
-            await saveTransformToAPI(semanticId, filename, scale, normalizedPositionX, normalizedPositionY, finalBrightness, finalBlur);
-            pendingTransformRef.current = null;
-            return;
-        }
-        // Debounce: save after 300ms of no changes
-        saveTransformTimeoutRef.current = setTimeout(async () => {
-            const pending = pendingTransformRef.current;
-            if (pending && selectedImage) {
-                await flushPendingSave(pending, selectedImage);
-            }
-        }, 300);
-    }, [selectedImage]);
-    // Cleanup timeout on unmount
-    useEffect(() => {
-        return () => {
-            if (saveTransformTimeoutRef.current) {
-                clearTimeout(saveTransformTimeoutRef.current);
-            }
-        };
-    }, []);
-    // Event handlers
-    const handleImageChangeWrapper = useCallback(async (image) => {
-        if (!selectedImage)
-            return;
-        await handleImageChange(image, selectedImage, handleClose);
-    }, [selectedImage]);
-    const handleBrightnessChangeWrapper = useCallback(async (brightness) => {
-        if (!selectedImage)
-            return;
-        // Don't save immediately when in editor - will be saved when "Done" is pressed
-        await handleBrightnessChange(brightness, selectedImage, setSelectedImage, false);
-    }, [selectedImage]);
-    const handleBlurChangeWrapper = useCallback(async (blur) => {
-        if (!selectedImage)
-            return;
-        // Don't save immediately when in editor - will be saved when "Done" is pressed
-        await handleBlurChange(blur, selectedImage, setSelectedImage, false);
-    }, [selectedImage]);
-    const handleClose = useCallback(() => {
-        setIsOpen(false);
-        setSelectedImage(null);
-    }, []);
-    // Don't render if disabled or user is not admin/dev
-    if (!config.enabled || isLoading || !userRole) {
-        return null;
-    }
-    if (!isOpen || !selectedImage) {
-        return null;
-    }
-    return (_jsx("div", { className: `fixed inset-0 z-50 flex items-center justify-center ${config.overlayClassName || 'bg-black/50 backdrop-blur-sm'}`, "data-image-editor": "true", onClick: (e) => {
-            if (e.target === e.currentTarget) {
-                handleClose();
-            }
-        }, children: _jsxs("div", { className: `relative bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-4xl w-full mx-4 max-h-[90vh] flex flex-col ${config.className || ''}`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex items-center justify-between p-6 border-b dark:border-neutral-800", children: [_jsx("h2", { className: "text-2xl font-bold dark:text-white", children: "Edit Image" }), _jsx("button", { onClick: handleClose, className: "p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors", "aria-label": "Close editor", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsx("div", { className: "p-6", children: _jsx(ImagePicker, { value: selectedImage.element.getAttribute('data-image-id') || selectedImage.element.getAttribute('data-background-image-id') || selectedImage.originalSrc, onChange: handleImageChangeWrapper, brightness: selectedImage.brightness, blur: selectedImage.blur, scale: selectedImage.scale, positionX: selectedImage.positionX, positionY: selectedImage.positionY, onBrightnessChange: handleBrightnessChangeWrapper, onBlurChange: handleBlurChangeWrapper, onScaleChange: async (newScale) => {
-                            if (selectedImage) {
-                                const updated = Object.assign(Object.assign({}, selectedImage), { scale: newScale });
-                                setSelectedImage(updated);
-                                await saveImageTransformHandler(newScale, updated.positionX, updated.positionY);
-                            }
-                        }, onPositionXChange: async (newPositionX) => {
-                            if (selectedImage) {
-                                const updated = Object.assign(Object.assign({}, selectedImage), { positionX: newPositionX });
-                                setSelectedImage(updated);
-                                await saveImageTransformHandler(updated.scale, newPositionX, updated.positionY);
-                            }
-                        }, onPositionYChange: async (newPositionY) => {
-                            if (selectedImage) {
-                                const updated = Object.assign(Object.assign({}, selectedImage), { positionY: newPositionY });
-                                setSelectedImage(updated);
-                                await saveImageTransformHandler(updated.scale, updated.positionX, newPositionY);
-                            }
-                        }, onEditorSave: async (finalScale, finalPositionX, finalPositionY, finalBrightness, finalBlur) => {
-                            if (selectedImage) {
-                                // Update selectedImage with final values
-                                // Use provided brightness/blur if available, otherwise use current values
-                                const updated = Object.assign(Object.assign({}, selectedImage), { scale: finalScale, positionX: finalPositionX, positionY: finalPositionY, brightness: finalBrightness !== undefined ? finalBrightness : selectedImage.brightness, blur: finalBlur !== undefined ? finalBlur : selectedImage.blur });
-                                setSelectedImage(updated);
-                                // Save with the final brightness and blur values
-                                await saveImageTransformHandler(finalScale, finalPositionX, finalPositionY, true, updated.brightness, updated.blur);
-                            }
-                        }, showEffects: true, darkMode: false, aspectRatio: selectedImage.aspectRatio, borderRadius: selectedImage.borderRadius, objectFit: selectedImage.objectFit, objectPosition: selectedImage.objectPosition }) })] }) }));
-}

package/src/components/GlobalImageEditor.tsx

@@ -1,327 +0,0 @@
-/**
- * Global Image Editor Component
- * Allows clicking on any image in the client app to edit it (admin/dev only)
- * 
- * Reads configuration from window.__JHITS_PLUGIN_PROPS__['plugin-images']
- */
-
-'use client';
-
-import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { X, Edit2 } from 'lucide-react';
-import { ImagePicker } from './ImagePicker';
-import type { ImageMetadata } from '../types';
-import type { SelectedImage, PendingTransform } from './GlobalImageEditor/types';
-import { getPluginConfig } from './GlobalImageEditor/config';
-import { parseImageData } from './GlobalImageEditor/imageDetection';
-import { setupImageHandlers } from './GlobalImageEditor/imageSetup';
-import { saveTransformToAPI, flushPendingSave, getFilename, normalizePosition } from './GlobalImageEditor/saveLogic';
-import { handleImageChange, handleBrightnessChange, handleBlurChange } from './GlobalImageEditor/eventHandlers';
-
-export function GlobalImageEditor() {
-    // Configuration
-    const config = useMemo(() => getPluginConfig(), []);
-    
-    // State
-    const [selectedImage, setSelectedImage] = useState<SelectedImage | null>(null);
-    const [isOpen, setIsOpen] = useState(false);
-    const [userRole, setUserRole] = useState<string | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-
-    // Refs for save debouncing
-    const saveTransformTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-    const pendingTransformRef = useRef<PendingTransform | null>(null);
-
-    // Check if user is admin/dev
-    useEffect(() => {
-        const checkUser = async () => {
-            try {
-                const res = await fetch('/api/me');
-                const data = await res.json();
-                if (data.loggedIn && (data.user?.role === 'admin' || data.user?.role === 'dev')) {
-                    setUserRole(data.user.role);
-                }
-            } catch (error) {
-                console.error('Failed to check user role:', error);
-            } finally {
-                setIsLoading(false);
-            }
-        };
-        checkUser();
-    }, []);
-
-    // Listen for open-image-editor custom event from Image/BackgroundImage components
-    useEffect(() => {
-        if (!userRole) return;
-
-        const handleOpenEditor = async (e: CustomEvent) => {
-            const { id, currentBrightness, currentBlur } = e.detail || {};
-            if (!id) return;
-
-
-            // Find the element by data-image-id or data-background-image-id
-            let element = document.querySelector(`[data-image-id="${id}"], [data-background-image-id="${id}"]`) as HTMLElement;
-            
-            if (!element) {
-                element = document.querySelector(`[data-background-image-component="true"][data-background-image-id="${id}"]`) as HTMLElement;
-            }
-
-            if (!element) {
-                console.error('[GlobalImageEditor] Element not found for id:', id);
-                return;
-            }
-
-            // Extract semantic ID
-            const semanticId = element.getAttribute('data-image-id') || 
-                             element.getAttribute('data-background-image-id') || 
-                             id;
-
-            // Parse image data
-            const imageData = parseImageData(element, semanticId, currentBrightness, currentBlur);
-            
-            if (!imageData) {
-                console.error('[GlobalImageEditor] Failed to parse image data');
-                return;
-            }
-
-            // Store semantic ID on element if not already set
-            if (imageData.isBackground && !element.hasAttribute('data-background-image-id')) {
-                element.setAttribute('data-background-image-id', semanticId);
-            } else if (!imageData.isBackground && !element.hasAttribute('data-image-id')) {
-                element.setAttribute('data-image-id', semanticId);
-            }
-
-            setSelectedImage(imageData);
-            setIsOpen(true);
-        };
-
-        window.addEventListener('open-image-editor', handleOpenEditor as unknown as EventListener);
-
-        return () => {
-            window.removeEventListener('open-image-editor', handleOpenEditor as unknown as EventListener);
-        };
-    }, [userRole]);
-
-    // Add click handlers to all images
-    useEffect(() => {
-        if (isLoading || !userRole) {
-            return;
-        }
-
-        
-        const cleanup = setupImageHandlers((imageData) => {
-            setSelectedImage(imageData);
-            setIsOpen(true);
-        });
-
-        // Setup immediately and also after a short delay to catch dynamically loaded images
-        const timeoutId = setTimeout(() => {
-            const cleanup2 = setupImageHandlers((imageData) => {
-                setSelectedImage(imageData);
-                setIsOpen(true);
-            });
-            // Note: This creates a new cleanup, but the first one will handle the initial setup
-        }, 500);
-        
-        return () => {
-            clearTimeout(timeoutId);
-            cleanup();
-        };
-    }, [isLoading, userRole]);
-
-    // Save image transform (scale/position) to API with debouncing
-    const saveImageTransformHandler = useCallback(async (
-        scale: number,
-        positionX: number,
-        positionY: number,
-        immediate: boolean = false,
-        brightnessOverride?: number,
-        blurOverride?: number
-    ) => {
-        if (!selectedImage) return;
-
-        const { element } = selectedImage;
-        const semanticId = element.getAttribute('data-image-id') || 
-                         element.getAttribute('data-background-image-id');
-        
-        if (!semanticId) return;
-
-        const filename = await getFilename(semanticId, selectedImage);
-        if (!filename) return;
-
-        // Store pending transform
-        pendingTransformRef.current = { 
-            scale, 
-            positionX, 
-            positionY,
-            semanticId,
-            filename
-        };
-
-        // Clear existing timeout
-        if (saveTransformTimeoutRef.current) {
-            clearTimeout(saveTransformTimeoutRef.current);
-            saveTransformTimeoutRef.current = null;
-        }
-
-        // If immediate save is requested (e.g., when "Done" is clicked), save right away
-        if (immediate) {
-            const normalizedPositionX = normalizePosition(positionX);
-            const normalizedPositionY = normalizePosition(positionY);
-            
-            // Use override values if provided, otherwise use selectedImage values
-            // IMPORTANT: Overrides contain the latest values from the editor
-            const finalBrightness = brightnessOverride !== undefined ? brightnessOverride : (selectedImage?.brightness ?? 100);
-            const finalBlur = blurOverride !== undefined ? blurOverride : (selectedImage?.blur ?? 0);
-
-            await saveTransformToAPI(
-                semanticId,
-                filename,
-                scale,
-                normalizedPositionX,
-                normalizedPositionY,
-                finalBrightness,
-                finalBlur
-            );
-            pendingTransformRef.current = null;
-            return;
-        }
-
-        // Debounce: save after 300ms of no changes
-        saveTransformTimeoutRef.current = setTimeout(async () => {
-            const pending = pendingTransformRef.current;
-            if (pending && selectedImage) {
-                await flushPendingSave(pending, selectedImage);
-            }
-        }, 300);
-    }, [selectedImage]);
-
-    // Cleanup timeout on unmount
-    useEffect(() => {
-        return () => {
-            if (saveTransformTimeoutRef.current) {
-                clearTimeout(saveTransformTimeoutRef.current);
-            }
-        };
-    }, []);
-
-    // Event handlers
-    const handleImageChangeWrapper = useCallback(async (image: ImageMetadata | null) => {
-        if (!selectedImage) return;
-        await handleImageChange(image, selectedImage, handleClose);
-    }, [selectedImage]);
-
-    const handleBrightnessChangeWrapper = useCallback(async (brightness: number) => {
-        if (!selectedImage) return;
-        // Don't save immediately when in editor - will be saved when "Done" is pressed
-        await handleBrightnessChange(brightness, selectedImage, setSelectedImage, false);
-    }, [selectedImage]);
-
-    const handleBlurChangeWrapper = useCallback(async (blur: number) => {
-        if (!selectedImage) return;
-        // Don't save immediately when in editor - will be saved when "Done" is pressed
-        await handleBlurChange(blur, selectedImage, setSelectedImage, false);
-    }, [selectedImage]);
-
-    const handleClose = useCallback(() => {
-        setIsOpen(false);
-        setSelectedImage(null);
-    }, []);
-
-    // Don't render if disabled or user is not admin/dev
-    if (!config.enabled || isLoading || !userRole) {
-        return null;
-    }
-
-    if (!isOpen || !selectedImage) {
-        return null;
-    }
-    
-    return (
-        <div 
-            className={`fixed inset-0 z-50 flex items-center justify-center ${config.overlayClassName || 'bg-black/50 backdrop-blur-sm'}`}
-            data-image-editor="true"
-            onClick={(e) => {
-                if (e.target === e.currentTarget) {
-                    handleClose();
-                }
-            }}
-        >
-            <div 
-                className={`relative bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-4xl w-full mx-4 max-h-[90vh] flex flex-col ${config.className || ''}`}
-                onClick={(e) => e.stopPropagation()}
-            >
-                {/* Header */}
-                <div className="flex items-center justify-between p-6 border-b dark:border-neutral-800">
-                    <h2 className="text-2xl font-bold dark:text-white">Edit Image</h2>
-                    <button
-                        onClick={handleClose}
-                        className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                        aria-label="Close editor"
-                    >
-                        <X className="w-5 h-5" />
-                    </button>
-                </div>
-
-                {/* Content */}
-                <div className="p-6">
-                    <ImagePicker
-                        value={selectedImage.element.getAttribute('data-image-id') || selectedImage.element.getAttribute('data-background-image-id') || selectedImage.originalSrc}
-                        onChange={handleImageChangeWrapper}
-                        brightness={selectedImage.brightness}
-                        blur={selectedImage.blur}
-                        scale={selectedImage.scale}
-                        positionX={selectedImage.positionX}
-                        positionY={selectedImage.positionY}
-                        onBrightnessChange={handleBrightnessChangeWrapper}
-                        onBlurChange={handleBlurChangeWrapper}
-                        onScaleChange={async (newScale: number) => {
-                            if (selectedImage) {
-                                const updated = { ...selectedImage, scale: newScale };
-                                setSelectedImage(updated);
-                                await saveImageTransformHandler(newScale, updated.positionX, updated.positionY);
-                            }
-                        }}
-                        onPositionXChange={async (newPositionX: number) => {
-                            if (selectedImage) {
-                                const updated = { ...selectedImage, positionX: newPositionX };
-                                setSelectedImage(updated);
-                                await saveImageTransformHandler(updated.scale, newPositionX, updated.positionY);
-                            }
-                        }}
-                        onPositionYChange={async (newPositionY: number) => {
-                            if (selectedImage) {
-                                const updated = { ...selectedImage, positionY: newPositionY };
-                                setSelectedImage(updated);
-                                await saveImageTransformHandler(updated.scale, updated.positionX, newPositionY);
-                            }
-                        }}
-                        onEditorSave={async (finalScale: number, finalPositionX: number, finalPositionY: number, finalBrightness?: number, finalBlur?: number) => {
-                            if (selectedImage) {
-                                // Update selectedImage with final values
-                                // Use provided brightness/blur if available, otherwise use current values
-                                const updated = { 
-                                    ...selectedImage, 
-                                    scale: finalScale, 
-                                    positionX: finalPositionX, 
-                                    positionY: finalPositionY,
-                                    brightness: finalBrightness !== undefined ? finalBrightness : selectedImage.brightness,
-                                    blur: finalBlur !== undefined ? finalBlur : selectedImage.blur
-                                };
-                                setSelectedImage(updated);
-                                // Save with the final brightness and blur values
-                                await saveImageTransformHandler(finalScale, finalPositionX, finalPositionY, true, updated.brightness, updated.blur);
-                            }
-                        }}
-                        showEffects={true}
-                        darkMode={false}
-                        aspectRatio={selectedImage.aspectRatio}
-                        borderRadius={selectedImage.borderRadius}
-                        objectFit={selectedImage.objectFit}
-                        objectPosition={selectedImage.objectPosition}
-                    />
-                </div>
-            </div>
-        </div>
-    );
-}

package/src/components/Image.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-export interface PluginImageProps {
-    id: string;
-    alt: string;
-    width?: number;
-    height?: number;
-    className?: string;
-    fill?: boolean;
-    sizes?: string;
-    priority?: boolean;
-    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
-    objectPosition?: string;
-    style?: React.CSSProperties;
-    editable?: boolean;
-    scale?: number;
-    positionX?: number;
-    positionY?: number;
-    brightness?: number;
-    blur?: number;
-}
-export declare function Image({ id, alt, width, height, className, fill, sizes, priority, objectFit, objectPosition, style, editable, ...props }: PluginImageProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Image.d.ts.map