@jhits/plugin-images 0.0.7 → 0.0.9

package/src/components/ImageEditor.d.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-export interface ImageEditorProps {
-    imageUrl: string;
-    scale: number;
-    positionX: number;
-    positionY: number;
-    brightness?: number;
-    blur?: number;
-    onScaleChange: (scale: number) => void;
-    onPositionChange: (x: number, y: number) => void;
-    onBrightnessChange?: (brightness: number) => void;
-    onBlurChange?: (blur: number) => void;
-    aspectRatio?: string;
-    borderRadius?: string;
-    imageId?: string;
-}
-export interface ImageEditorHandle {
-    flushSave: () => Promise<{
-        scale: number;
-        positionX: number;
-        positionY: number;
-        brightness: number;
-        blur: number;
-    }>;
-}
-export declare const ImageEditor: React.ForwardRefExoticComponent<ImageEditorProps & React.RefAttributes<ImageEditorHandle>>;
-//# sourceMappingURL=ImageEditor.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ImageEditor.d.ts","sourceRoot":"","sources":["ImageEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAIlH,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAC9B,SAAS,EAAE,MAAM,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACvH;AAED,eAAO,MAAM,WAAW,4FAuStB,CAAC"}

package/src/components/ImageEditor.js

@@ -1,173 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useCallback, useImperativeHandle, forwardRef, useMemo } from 'react';
-import { ZoomIn, RotateCcw, Maximize2, Sun, Droplets } from 'lucide-react';
-import { getImageTransform, getImageFilter } from '../utils/transforms';
-export const ImageEditor = forwardRef(({ imageUrl, scale, positionX, positionY, brightness = 100, blur = 0, onScaleChange, onPositionChange, onBrightnessChange, onBlurChange, aspectRatio = '16/9', borderRadius = 'rounded-xl', imageId, }, ref) => {
-    const containerRef = useRef(null);
-    const imageRef = useRef(null);
-    const [isDragging, setIsDragging] = useState(false);
-    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
-    const [dragStartPosition, setDragStartPosition] = useState({ x: 0, y: 0 });
-    const [baseScale, setBaseScale] = useState(0);
-    // Local state for brightness and blur (only applied on save)
-    const [localBrightness, setLocalBrightness] = useState(brightness);
-    const [localBlur, setLocalBlur] = useState(blur);
-    // Keep internal values in a ref to avoid stale closure issues during the final save
-    const currentValues = useRef({ scale, positionX, positionY, brightness, blur });
-    useEffect(() => {
-        currentValues.current = { scale, positionX, positionY, brightness: localBrightness, blur: localBlur };
-    }, [scale, positionX, positionY, localBrightness, localBlur]);
-    // Reset local values when props change (when editor opens with new values)
-    useEffect(() => {
-        setLocalBrightness(brightness);
-        setLocalBlur(blur);
-    }, [brightness, blur]);
-    // EXPOSE TO PARENT: Return current values so Parent can handle the DB Save
-    useImperativeHandle(ref, () => ({
-        flushSave: async () => {
-            // Read the latest values directly from props/state (they're in the dependency array, so they're current)
-            // The ref is kept in sync via useEffect, but read directly from props to avoid any timing issues
-            const latestScale = scale;
-            const latestPositionX = positionX;
-            const latestPositionY = positionY;
-            const latestBrightness = localBrightness;
-            const latestBlur = localBlur;
-            // Update the ref to ensure it's in sync (for any other code that might read it)
-            currentValues.current = {
-                scale: latestScale,
-                positionX: latestPositionX,
-                positionY: latestPositionY,
-                brightness: latestBrightness,
-                blur: latestBlur
-            };
-            // DON'T call onBrightnessChange/onBlurChange here - they trigger saves
-            // The parent (via onEditorSave) will handle saving all values together
-            // This prevents duplicate saves
-            return {
-                scale: Math.max(0.1, Math.min(5.0, latestScale)),
-                positionX: latestPositionX,
-                positionY: latestPositionY,
-                brightness: latestBrightness,
-                blur: latestBlur
-            };
-        }
-    }), [scale, positionX, positionY, localBrightness, localBlur]);
-    const getClampedPosition = useCallback((x, y, currentScale) => {
-        if (!containerRef.current || !imageRef.current || baseScale === 0)
-            return { x, y };
-        const totalScale = baseScale * currentScale;
-        const containerWidth = containerRef.current.offsetWidth;
-        const containerHeight = containerRef.current.offsetHeight;
-        // With minWidth/minHeight, the image maintains its natural aspect ratio
-        // but is scaled to cover the container. The scaled dimensions are based on natural size.
-        const scaledWidth = imageRef.current.naturalWidth * totalScale;
-        const scaledHeight = imageRef.current.naturalHeight * totalScale;
-        const overflowX = Math.max(0, (scaledWidth - containerWidth) / 2);
-        const overflowY = Math.max(0, (scaledHeight - containerHeight) / 2);
-        // Convert overflow limits to percentage of CONTAINER (not natural size)
-        // Position values are container-relative, so limits must be too
-        const limitX = containerWidth > 0 ? (overflowX / containerWidth) * 100 : 0;
-        const limitY = containerHeight > 0 ? (overflowY / containerHeight) * 100 : 0;
-        return { x: Math.max(-limitX, Math.min(limitX, x)), y: Math.max(-limitY, Math.min(limitY, y)) };
-    }, [baseScale]);
-    const handleScaleChange = (newScale) => {
-        const s = Math.max(0.1, Math.min(5.0, newScale));
-        onScaleChange(s);
-        const clamped = getClampedPosition(positionX, positionY, s);
-        onPositionChange(clamped.x, clamped.y);
-    };
-    const calculateBaseScale = useCallback(() => {
-        var _a, _b;
-        if (!imageRef.current || !containerRef.current)
-            return;
-        const img = imageRef.current;
-        const container = containerRef.current;
-        const containerWidth = container.offsetWidth;
-        const containerHeight = container.offsetHeight;
-        // Ensure container has dimensions before calculating
-        if (containerWidth === 0 || containerHeight === 0) {
-            // Try to get dimensions from computed styles or parent
-            const parentWidth = (_a = container.parentElement) === null || _a === void 0 ? void 0 : _a.clientWidth;
-            const parentHeight = (_b = container.parentElement) === null || _b === void 0 ? void 0 : _b.clientHeight;
-            if (parentWidth && parentHeight && img.naturalWidth > 0) {
-                const widthRatio = parentWidth / img.naturalWidth;
-                const heightRatio = parentHeight / img.naturalHeight;
-                const calculatedBaseScale = Math.max(widthRatio, heightRatio);
-                setBaseScale(calculatedBaseScale);
-            }
-            return;
-        }
-        if (img.naturalWidth === 0 || img.naturalHeight === 0)
-            return;
-        setBaseScale(Math.max(containerWidth / img.naturalWidth, containerHeight / img.naturalHeight));
-    }, []);
-    useEffect(() => {
-        if (!containerRef.current)
-            return;
-        const obs = new ResizeObserver(calculateBaseScale);
-        obs.observe(containerRef.current);
-        return () => obs.disconnect();
-    }, [calculateBaseScale]);
-    useEffect(() => {
-        if (!isDragging)
-            return;
-        const move = (e) => {
-            if (!containerRef.current || !imageRef.current || baseScale === 0)
-                return;
-            const rect = containerRef.current.getBoundingClientRect();
-            // Calculate movement in screen pixels
-            const mouseDeltaX = e.clientX - dragStart.x;
-            const mouseDeltaY = e.clientY - dragStart.y;
-            // Convert screen pixel movement to percentage of CONTAINER
-            // Since the image is now width: 100%; height: 100%, percentages are container-relative
-            // This makes position values consistent across different container sizes
-            const dx = containerRef.current && containerRef.current.offsetWidth > 0
-                ? (mouseDeltaX / containerRef.current.offsetWidth) * 100
-                : 0;
-            const dy = containerRef.current && containerRef.current.offsetHeight > 0
-                ? (mouseDeltaY / containerRef.current.offsetHeight) * 100
-                : 0;
-            const newPositionX = dragStartPosition.x + dx;
-            const newPositionY = dragStartPosition.y + dy;
-            const clamped = getClampedPosition(newPositionX, newPositionY, scale);
-            onPositionChange(clamped.x, clamped.y);
-        };
-        const up = () => setIsDragging(false);
-        window.addEventListener('mousemove', move);
-        window.addEventListener('mouseup', up);
-        return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); };
-    }, [isDragging, dragStart, dragStartPosition, scale, baseScale, getClampedPosition, onPositionChange]);
-    const aspectValue = useMemo(() => {
-        if (aspectRatio === 'auto')
-            return undefined;
-        const [w, h] = aspectRatio.split('/').map(Number);
-        return w / h;
-    }, [aspectRatio]);
-    return (_jsxs("div", { className: "flex flex-col lg:flex-row gap-6 h-full", children: [_jsx("div", { className: "flex-1 bg-neutral-50 dark:bg-neutral-950 rounded-2xl p-4 lg:p-6 flex items-center justify-center border border-neutral-300 dark:border-neutral-700 relative group/canvas min-w-0", children: _jsx("div", { ref: containerRef, className: `relative shadow-2xl overflow-hidden ${borderRadius} bg-neutral-100 dark:bg-neutral-900 w-full max-w-full border border-neutral-200 dark:border-neutral-800`, style: { aspectRatio: aspectValue, height: aspectValue && aspectValue < 1 ? '400px' : 'auto', width: aspectValue && aspectValue < 1 ? 'auto' : '100%', cursor: isDragging ? 'grabbing' : 'grab' }, onMouseDown: (e) => {
-                        setIsDragging(true);
-                        setDragStart({ x: e.clientX, y: e.clientY });
-                        // Convert stored position to visual percentage for dragging
-                        // stored = visual, so we can use positionX directly as visual percentage
-                        setDragStartPosition({ x: positionX, y: positionY });
-                        e.preventDefault();
-                    }, children: _jsx("img", { ref: imageRef, src: imageUrl, alt: "Editor", onLoad: calculateBaseScale, className: "absolute max-w-none select-none", style: {
-                            top: '50%',
-                            left: '50%',
-                            width: 'auto', // Allow image to maintain natural aspect ratio
-                            height: 'auto', // Allow image to maintain natural aspect ratio
-                            minWidth: '100%', // Ensure image covers container width
-                            minHeight: '100%', // Ensure image covers container height
-                            filter: getImageFilter(localBrightness, localBlur),
-                            transform: baseScale > 0 ? getImageTransform({ scale, positionX, positionY, baseScale }, true) : 'translate(-50%, -50%)',
-                            transformOrigin: 'center center'
-                        }, draggable: false }) }) }), _jsx("div", { className: "w-full lg:w-80 space-y-4", children: _jsxs("div", { className: "p-6 bg-white dark:bg-neutral-900 rounded-3xl border border-neutral-200 dark:border-neutral-800 shadow-lg dark:shadow-neutral-950/50 space-y-6", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsxs("label", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2", children: [_jsx(ZoomIn, { size: 14, className: "text-neutral-600 dark:text-neutral-300" }), " Zoom Level"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-xs font-mono font-bold text-primary dark:text-primary", children: [Math.round(scale * 100), "%"] }), _jsx("button", { onClick: () => handleScaleChange(1), className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors", title: "Reset zoom", children: _jsx(RotateCcw, { size: 12, className: "text-neutral-500 dark:text-neutral-400" }) })] })] }), _jsx("input", { type: "range", min: "0.1", max: "5", step: "0.01", value: scale, onChange: (e) => handleScaleChange(parseFloat(e.target.value)), className: "w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" })] }), onBrightnessChange && (_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsxs("label", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2", children: [_jsx(Sun, { size: 14, className: "text-neutral-600 dark:text-neutral-300" }), " Brightness"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-xs font-mono font-bold text-primary dark:text-primary", children: [Math.round(localBrightness), "%"] }), _jsx("button", { onClick: () => setLocalBrightness(100), className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors", title: "Reset brightness", children: _jsx(RotateCcw, { size: 12, className: "text-neutral-500 dark:text-neutral-400" }) })] })] }), _jsx("input", { type: "range", min: "0", max: "200", step: "1", value: localBrightness, onChange: (e) => setLocalBrightness(parseInt(e.target.value)), className: "w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" })] })), onBlurChange && (_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsxs("label", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2", children: [_jsx(Droplets, { size: 14, className: "text-neutral-600 dark:text-neutral-300" }), " Blur"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-xs font-mono font-bold text-primary dark:text-primary", children: [localBlur, "px"] }), _jsx("button", { onClick: () => setLocalBlur(0), className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors", title: "Reset blur", children: _jsx(RotateCcw, { size: 12, className: "text-neutral-500 dark:text-neutral-400" }) })] })] }), _jsx("input", { type: "range", min: "0", max: "20", step: "0.5", value: localBlur, onChange: (e) => setLocalBlur(parseFloat(e.target.value)), className: "w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" })] })), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("button", { onClick: () => onPositionChange(0, 0), className: "flex flex-col items-center gap-2 p-4 bg-neutral-50 dark:bg-neutral-800 rounded-2xl hover:bg-primary/10 dark:hover:bg-primary/20 transition-all border border-transparent hover:border-primary/20 dark:hover:border-primary/30", children: [_jsx(Maximize2, { size: 16, className: "text-neutral-700 dark:text-neutral-300" }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Center" })] }), _jsxs("button", { onClick: () => {
-                                        handleScaleChange(1);
-                                        if (onBrightnessChange)
-                                            setLocalBrightness(100);
-                                        if (onBlurChange)
-                                            setLocalBlur(0);
-                                        onPositionChange(0, 0);
-                                    }, className: "flex flex-col items-center gap-2 p-4 bg-neutral-50 dark:bg-neutral-800 rounded-2xl hover:bg-primary/10 dark:hover:bg-primary/20 transition-all border border-transparent hover:border-primary/20 dark:hover:border-primary/30", children: [_jsx(RotateCcw, { size: 16, className: "text-neutral-700 dark:text-neutral-300" }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Reset All" })] })] })] }) })] }));
-});
-ImageEditor.displayName = 'ImageEditor';

package/src/components/ImageEditor.tsx

@@ -1,323 +0,0 @@
-'use client';
-
-import React, { useState, useRef, useEffect, useCallback, useImperativeHandle, forwardRef, useMemo } from 'react';
-import { ZoomIn, RotateCcw, Move, Maximize2, Sun, Droplets } from 'lucide-react';
-import { getImageTransform, getImageFilter } from '../utils/transforms';
-
-export interface ImageEditorProps {
-    imageUrl: string;
-    scale: number;
-    positionX: number;
-    positionY: number;
-    brightness?: number;
-    blur?: number;
-    onScaleChange: (scale: number) => void;
-    onPositionChange: (x: number, y: number) => void;
-    onBrightnessChange?: (brightness: number) => void;
-    onBlurChange?: (blur: number) => void;
-    aspectRatio?: string;
-    borderRadius?: string;
-    imageId?: string;
-}
-
-export interface ImageEditorHandle {
-    flushSave: () => Promise<{ scale: number; positionX: number; positionY: number; brightness: number; blur: number }>;
-}
-
-export const ImageEditor = forwardRef<ImageEditorHandle, ImageEditorProps>(({
-    imageUrl,
-    scale,
-    positionX,
-    positionY,
-    brightness = 100,
-    blur = 0,
-    onScaleChange,
-    onPositionChange,
-    onBrightnessChange,
-    onBlurChange,
-    aspectRatio = '16/9',
-    borderRadius = 'rounded-xl',
-    imageId,
-}, ref) => {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const imageRef = useRef<HTMLImageElement>(null);
-    const [isDragging, setIsDragging] = useState(false);
-    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
-    const [dragStartPosition, setDragStartPosition] = useState({ x: 0, y: 0 });
-    const [baseScale, setBaseScale] = useState(0);
-    
-    // Local state for brightness and blur (only applied on save)
-    const [localBrightness, setLocalBrightness] = useState(brightness);
-    const [localBlur, setLocalBlur] = useState(blur);
-
-    // Keep internal values in a ref to avoid stale closure issues during the final save
-    const currentValues = useRef({ scale, positionX, positionY, brightness, blur });
-    useEffect(() => {
-        currentValues.current = { scale, positionX, positionY, brightness: localBrightness, blur: localBlur };
-    }, [scale, positionX, positionY, localBrightness, localBlur]);
-    
-    // Reset local values when props change (when editor opens with new values)
-    useEffect(() => {
-        setLocalBrightness(brightness);
-        setLocalBlur(blur);
-    }, [brightness, blur]);
-
-    // EXPOSE TO PARENT: Return current values so Parent can handle the DB Save
-    useImperativeHandle(ref, () => ({
-        flushSave: async () => {
-            // Read the latest values directly from props/state (they're in the dependency array, so they're current)
-            // The ref is kept in sync via useEffect, but read directly from props to avoid any timing issues
-            const latestScale = scale;
-            const latestPositionX = positionX;
-            const latestPositionY = positionY;
-            const latestBrightness = localBrightness;
-            const latestBlur = localBlur;
-            
-            // Update the ref to ensure it's in sync (for any other code that might read it)
-            currentValues.current = { 
-                scale: latestScale, 
-                positionX: latestPositionX, 
-                positionY: latestPositionY, 
-                brightness: latestBrightness, 
-                blur: latestBlur 
-            };
-            
-            // DON'T call onBrightnessChange/onBlurChange here - they trigger saves
-            // The parent (via onEditorSave) will handle saving all values together
-            // This prevents duplicate saves
-            
-            return {
-                scale: Math.max(0.1, Math.min(5.0, latestScale)),
-                positionX: latestPositionX,
-                positionY: latestPositionY,
-                brightness: latestBrightness,
-                blur: latestBlur
-            };
-        }
-    }), [scale, positionX, positionY, localBrightness, localBlur]);
-
-    const getClampedPosition = useCallback((x: number, y: number, currentScale: number) => {
-        if (!containerRef.current || !imageRef.current || baseScale === 0) return { x, y };
-        const totalScale = baseScale * currentScale;
-        const containerWidth = containerRef.current.offsetWidth;
-        const containerHeight = containerRef.current.offsetHeight;
-        
-        // With minWidth/minHeight, the image maintains its natural aspect ratio
-        // but is scaled to cover the container. The scaled dimensions are based on natural size.
-        const scaledWidth = imageRef.current.naturalWidth * totalScale;
-        const scaledHeight = imageRef.current.naturalHeight * totalScale;
-        const overflowX = Math.max(0, (scaledWidth - containerWidth) / 2);
-        const overflowY = Math.max(0, (scaledHeight - containerHeight) / 2);
-        
-        // Convert overflow limits to percentage of CONTAINER (not natural size)
-        // Position values are container-relative, so limits must be too
-        const limitX = containerWidth > 0 ? (overflowX / containerWidth) * 100 : 0;
-        const limitY = containerHeight > 0 ? (overflowY / containerHeight) * 100 : 0;
-        
-        return { x: Math.max(-limitX, Math.min(limitX, x)), y: Math.max(-limitY, Math.min(limitY, y)) };
-    }, [baseScale]);
-
-    const handleScaleChange = (newScale: number) => {
-        const s = Math.max(0.1, Math.min(5.0, newScale));
-        onScaleChange(s);
-        const clamped = getClampedPosition(positionX, positionY, s);
-        onPositionChange(clamped.x, clamped.y);
-    };
-
-    const calculateBaseScale = useCallback(() => {
-        if (!imageRef.current || !containerRef.current) return;
-        const img = imageRef.current;
-        const container = containerRef.current;
-        const containerWidth = container.offsetWidth;
-        const containerHeight = container.offsetHeight;
-        
-        // Ensure container has dimensions before calculating
-        if (containerWidth === 0 || containerHeight === 0) {
-            // Try to get dimensions from computed styles or parent
-            const parentWidth = container.parentElement?.clientWidth;
-            const parentHeight = container.parentElement?.clientHeight;
-            
-            if (parentWidth && parentHeight && img.naturalWidth > 0) {
-                const widthRatio = parentWidth / img.naturalWidth;
-                const heightRatio = parentHeight / img.naturalHeight;
-                const calculatedBaseScale = Math.max(widthRatio, heightRatio);
-                setBaseScale(calculatedBaseScale);
-            }
-            return;
-        }
-        
-        if (img.naturalWidth === 0 || img.naturalHeight === 0) return;
-        setBaseScale(Math.max(containerWidth / img.naturalWidth, containerHeight / img.naturalHeight));
-    }, []);
-
-    useEffect(() => {
-        if (!containerRef.current) return;
-        const obs = new ResizeObserver(calculateBaseScale);
-        obs.observe(containerRef.current);
-        return () => obs.disconnect();
-    }, [calculateBaseScale]);
-
-    useEffect(() => {
-        if (!isDragging) return;
-        const move = (e: MouseEvent) => {
-            if (!containerRef.current || !imageRef.current || baseScale === 0) return;
-            const rect = containerRef.current.getBoundingClientRect();
-            
-            // Calculate movement in screen pixels
-            const mouseDeltaX = e.clientX - dragStart.x;
-            const mouseDeltaY = e.clientY - dragStart.y;
-            
-            // Convert screen pixel movement to percentage of CONTAINER
-            // Since the image is now width: 100%; height: 100%, percentages are container-relative
-            // This makes position values consistent across different container sizes
-            const dx = containerRef.current && containerRef.current.offsetWidth > 0
-                ? (mouseDeltaX / containerRef.current.offsetWidth) * 100
-                : 0;
-            const dy = containerRef.current && containerRef.current.offsetHeight > 0
-                ? (mouseDeltaY / containerRef.current.offsetHeight) * 100
-                : 0;
-            
-            const newPositionX = dragStartPosition.x + dx;
-            const newPositionY = dragStartPosition.y + dy;
-            const clamped = getClampedPosition(newPositionX, newPositionY, scale);
-            onPositionChange(clamped.x, clamped.y);
-        };
-        const up = () => setIsDragging(false);
-        window.addEventListener('mousemove', move);
-        window.addEventListener('mouseup', up);
-        return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); };
-    }, [isDragging, dragStart, dragStartPosition, scale, baseScale, getClampedPosition, onPositionChange]);
-
-    const aspectValue = useMemo(() => {
-        if (aspectRatio === 'auto') return undefined;
-        const [w, h] = aspectRatio.split('/').map(Number);
-        return w / h;
-    }, [aspectRatio]);
-
-    return (
-        <div className="flex flex-col lg:flex-row gap-6 h-full">
-            <div className="flex-1 bg-neutral-50 dark:bg-neutral-950 rounded-2xl p-4 lg:p-6 flex items-center justify-center border border-neutral-300 dark:border-neutral-700 relative group/canvas min-w-0">
-                <div
-                    ref={containerRef}
-                    className={`relative shadow-2xl overflow-hidden ${borderRadius} bg-neutral-100 dark:bg-neutral-900 w-full max-w-full border border-neutral-200 dark:border-neutral-800`}
-                    style={{ aspectRatio: aspectValue, height: aspectValue && aspectValue < 1 ? '400px' : 'auto', width: aspectValue && aspectValue < 1 ? 'auto' : '100%', cursor: isDragging ? 'grabbing' : 'grab' }}
-                    onMouseDown={(e) => { 
-                        setIsDragging(true); 
-                        setDragStart({ x: e.clientX, y: e.clientY }); 
-                        // Convert stored position to visual percentage for dragging
-                        // stored = visual, so we can use positionX directly as visual percentage
-                        setDragStartPosition({ x: positionX, y: positionY }); 
-                        e.preventDefault(); 
-                    }}
-                >
-                    <img
-                        ref={imageRef} src={imageUrl} alt="Editor" onLoad={calculateBaseScale}
-                        className="absolute max-w-none select-none"
-                        style={{ 
-                            top: '50%', 
-                            left: '50%', 
-                            width: 'auto',  // Allow image to maintain natural aspect ratio
-                            height: 'auto', // Allow image to maintain natural aspect ratio
-                            minWidth: '100%', // Ensure image covers container width
-                            minHeight: '100%', // Ensure image covers container height
-                            filter: getImageFilter(localBrightness, localBlur), 
-                            transform: baseScale > 0 ? getImageTransform({ scale, positionX, positionY, baseScale }, true) : 'translate(-50%, -50%)', 
-                            transformOrigin: 'center center' 
-                        }}
-                        draggable={false}
-                    />
-                </div>
-            </div>
-
-            <div className="w-full lg:w-80 space-y-4">
-                <div className="p-6 bg-white dark:bg-neutral-900 rounded-3xl border border-neutral-200 dark:border-neutral-800 shadow-lg dark:shadow-neutral-950/50 space-y-6">
-                    <div>
-                        <div className="flex justify-between items-center mb-4">
-                            <label className="text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2"><ZoomIn size={14} className="text-neutral-600 dark:text-neutral-300" /> Zoom Level</label>
-                            <div className="flex items-center gap-2">
-                                <span className="text-xs font-mono font-bold text-primary dark:text-primary">{Math.round(scale * 100)}%</span>
-                                <button 
-                                    onClick={() => handleScaleChange(1)} 
-                                    className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                                    title="Reset zoom"
-                                >
-                                    <RotateCcw size={12} className="text-neutral-500 dark:text-neutral-400" />
-                                </button>
-                            </div>
-                        </div>
-                        <input type="range" min="0.1" max="5" step="0.01" value={scale} onChange={(e) => handleScaleChange(parseFloat(e.target.value))} className="w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" />
-                    </div>
-                    
-                    {onBrightnessChange && (
-                        <div>
-                            <div className="flex justify-between items-center mb-4">
-                                <label className="text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2"><Sun size={14} className="text-neutral-600 dark:text-neutral-300" /> Brightness</label>
-                                <div className="flex items-center gap-2">
-                                    <span className="text-xs font-mono font-bold text-primary dark:text-primary">{Math.round(localBrightness)}%</span>
-                                    <button 
-                                        onClick={() => setLocalBrightness(100)} 
-                                        className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                                        title="Reset brightness"
-                                    >
-                                        <RotateCcw size={12} className="text-neutral-500 dark:text-neutral-400" />
-                                    </button>
-                                </div>
-                            </div>
-                            <input 
-                                type="range" 
-                                min="0" 
-                                max="200" 
-                                step="1" 
-                                value={localBrightness} 
-                                onChange={(e) => setLocalBrightness(parseInt(e.target.value))} 
-                                className="w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" 
-                            />
-                        </div>
-                    )}
-                    
-                    {onBlurChange && (
-                        <div>
-                            <div className="flex justify-between items-center mb-4">
-                                <label className="text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2"><Droplets size={14} className="text-neutral-600 dark:text-neutral-300" /> Blur</label>
-                                <div className="flex items-center gap-2">
-                                    <span className="text-xs font-mono font-bold text-primary dark:text-primary">{localBlur}px</span>
-                                    <button 
-                                        onClick={() => setLocalBlur(0)} 
-                                        className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                                        title="Reset blur"
-                                    >
-                                        <RotateCcw size={12} className="text-neutral-500 dark:text-neutral-400" />
-                                    </button>
-                                </div>
-                            </div>
-                            <input 
-                                type="range" 
-                                min="0" 
-                                max="20" 
-                                step="0.5" 
-                                value={localBlur} 
-                                onChange={(e) => setLocalBlur(parseFloat(e.target.value))} 
-                                className="w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" 
-                            />
-                        </div>
-                    )}
-                    
-                    <div className="grid grid-cols-2 gap-3">
-                        <button onClick={() => onPositionChange(0, 0)} className="flex flex-col items-center gap-2 p-4 bg-neutral-50 dark:bg-neutral-800 rounded-2xl hover:bg-primary/10 dark:hover:bg-primary/20 transition-all border border-transparent hover:border-primary/20 dark:hover:border-primary/30">
-                            <Maximize2 size={16} className="text-neutral-700 dark:text-neutral-300" /><span className="text-[9px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">Center</span>
-                        </button>
-                        <button onClick={() => {
-                            handleScaleChange(1);
-                            if (onBrightnessChange) setLocalBrightness(100);
-                            if (onBlurChange) setLocalBlur(0);
-                            onPositionChange(0, 0);
-                        }} className="flex flex-col items-center gap-2 p-4 bg-neutral-50 dark:bg-neutral-800 rounded-2xl hover:bg-primary/10 dark:hover:bg-primary/20 transition-all border border-transparent hover:border-primary/20 dark:hover:border-primary/30">
-                            <RotateCcw size={16} className="text-neutral-700 dark:text-neutral-300" /><span className="text-[9px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">Reset All</span>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-});
-ImageEditor.displayName = 'ImageEditor';

package/src/components/ImageEffectsPanel.tsx

@@ -1,116 +0,0 @@
-'use client';
-
-import React from 'react';
-import { SlidersHorizontal, X, RotateCcw, Sun, Wind } from 'lucide-react';
-
-export interface ImageEffectsPanelProps {
-    brightness: number;
-    blur: number;
-    onBrightnessChange: (brightness: number | undefined) => void;
-    onBlurChange: (blur: number | undefined) => void;
-    onClose?: () => void;
-    darkMode?: boolean;
-}
-
-export function ImageEffectsPanel({
-    brightness,
-    blur,
-    onBrightnessChange,
-    onBlurChange,
-    onClose,
-}: ImageEffectsPanelProps) {
-
-    // Helper to reset specific effects to defaults
-    const handleReset = () => {
-        onBrightnessChange(100);
-        onBlurChange(0);
-    };
-
-    return (
-        <div className="flex flex-col gap-5 p-5 bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 shadow-sm transition-all">
-            {/* Header */}
-            <div className="flex items-center justify-between pb-2 border-b border-neutral-100 dark:border-neutral-800">
-                <div className="flex items-center gap-2">
-                    <div className="p-1.5 bg-primary/10 rounded-lg">
-                        <SlidersHorizontal size={14} className="text-primary" />
-                    </div>
-                    <h4 className="text-[11px] text-neutral-900 dark:text-neutral-100 uppercase font-black tracking-widest">
-                        Effects Studio
-                    </h4>
-                </div>
-                <div className="flex items-center gap-1">
-                    <button
-                        onClick={handleReset}
-                        title="Reset all effects"
-                        className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg text-neutral-400 hover:text-primary transition-all"
-                    >
-                        <RotateCcw size={14} />
-                    </button>
-                    {onClose && (
-                        <button
-                            onClick={onClose}
-                            className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg text-neutral-400 transition-all"
-                        >
-                            <X size={16} />
-                        </button>
-                    )}
-                </div>
-            </div>
-
-            {/* Brightness Slider */}
-            <div className="space-y-3">
-                <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2 text-neutral-600 dark:text-neutral-400">
-                        <Sun size={14} />
-                        <label className="text-xs font-bold uppercase tracking-tight">
-                            Brightness
-                        </label>
-                    </div>
-                    <span className="text-[10px] font-mono font-bold px-2 py-0.5 bg-neutral-100 dark:bg-neutral-800 rounded-full text-primary">
-                        {brightness}%
-                    </span>
-                </div>
-                <input
-                    type="range"
-                    min="0"
-                    max="200"
-                    step="1"
-                    value={brightness}
-                    onChange={(e) => onBrightnessChange(Number(e.target.value))}
-                    className="w-full h-1.5 bg-neutral-100 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary hover:accent-primary/80 transition-all"
-                />
-            </div>
-
-            {/* Blur Slider */}
-            <div className="space-y-3">
-                <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2 text-neutral-600 dark:text-neutral-400">
-                        <Wind size={14} />
-                        <label className="text-xs font-bold uppercase tracking-tight">
-                            Blur Intensity
-                        </label>
-                    </div>
-                    <span className="text-[10px] font-mono font-bold px-2 py-0.5 bg-neutral-100 dark:bg-neutral-800 rounded-full text-primary">
-                        {blur}px
-                    </span>
-                </div>
-                <input
-                    type="range"
-                    min="0"
-                    max="20"
-                    step="0.5"
-                    value={blur}
-                    onChange={(e) => onBlurChange(Number(e.target.value))}
-                    className="w-full h-1.5 bg-neutral-100 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary hover:accent-primary/80 transition-all"
-                />
-            </div>
-
-            {/* Visual Feedback Note */}
-            <div className="mt-2 p-3 bg-neutral-50 dark:bg-neutral-800/50 rounded-xl border border-dashed border-neutral-200 dark:border-neutral-700">
-                <p className="text-[9px] leading-relaxed text-neutral-400 uppercase font-medium text-center italic">
-                    Changes are applied in real-time to the preview above
-                </p>
-            </div>
-        </div>
-    );
-}