@jhits/plugin-images 0.0.8 → 0.0.10

package/src/api/uploads/[filename]/route.ts

@@ -1,93 +0,0 @@
-/**
- * Image Uploads API Route
- * Serves uploaded images for the plugin-images system
- */
-
-import { NextRequest, NextResponse } from 'next/server';
-import { readFile, unlink } from 'fs/promises';
-import path from 'path';
-
-export async function GET(
-    request: NextRequest,
-    { params }: { params: Promise<{ filename: string }> }
-) {
-    const { filename } = await params;
-
-    // Security: Prevent directory traversal (only allow the filename)
-    const sanitizedFilename = path.basename(filename);
-    const uploadsDir = path.join(process.cwd(), 'data', 'uploads');
-    
-    // If filename doesn't have an extension, try common image extensions
-    let filePath = path.join(uploadsDir, sanitizedFilename);
-    const hasExtension = path.extname(sanitizedFilename).length > 0;
-    
-    if (!hasExtension) {
-        // Try common image extensions
-        const extensions = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg'];
-        let found = false;
-        for (const ext of extensions) {
-            const testPath = filePath + ext;
-            try {
-                await readFile(testPath);
-                filePath = testPath;
-                found = true;
-                break;
-            } catch {
-                // Continue to next extension
-            }
-        }
-        if (!found) {
-            // If no extension found, try the original filename
-            filePath = path.join(uploadsDir, sanitizedFilename);
-        }
-    }
-
-    try {
-        const fileBuffer = await readFile(filePath);
-
-        // Determine content type based on extension
-        const ext = path.extname(filePath).toLowerCase();
-        let contentType = 'application/octet-stream';
-        if (ext === '.png') contentType = 'image/png';
-        else if (ext === '.jpg' || ext === '.jpeg') contentType = 'image/jpeg';
-        else if (ext === '.gif') contentType = 'image/gif';
-        else if (ext === '.webp') contentType = 'image/webp';
-        else if (ext === '.svg') contentType = 'image/svg+xml';
-
-        return new NextResponse(fileBuffer, {
-            headers: {
-                'Content-Type': contentType,
-                'Cache-Control': 'public, max-age=31536000, immutable',
-            },
-        });
-    } catch (e) {
-        // Don't log errors for missing files - it's expected for some requests
-        return new NextResponse('File not found', { status: 404 });
-    }
-}
-
-export async function DELETE(
-    request: NextRequest,
-    { params }: { params: Promise<{ filename: string }> }
-) {
-    const { filename } = await params;
-
-    // Security: Prevent directory traversal (only allow the filename)
-    const sanitizedFilename = path.basename(filename);
-    const filePath = path.join(process.cwd(), 'data', 'uploads', sanitizedFilename);
-
-    try {
-        await unlink(filePath);
-        return NextResponse.json({ success: true, message: 'File deleted' });
-    } catch (e: any) {
-        if (e.code === 'ENOENT') {
-            return NextResponse.json({ error: 'File not found' }, { status: 404 });
-        }
-        console.error('File deletion error:', e);
-        return NextResponse.json(
-            { error: 'Failed to delete file', detail: e.message },
-            { status: 500 }
-        );
-    }
-}
-

package/src/api-server.ts

@@ -1,11 +0,0 @@
-/**
- * Plugin Images - Server-Only API Exports
- * This file is only imported in server-side code (API routes)
- * 
- * IMPORTANT: This file uses Node.js modules (fs, path, etc.) and should NEVER
- * be imported in client-side code. Only use in server-side API routes.
- */
-
-// Re-export everything from the API index
-export * from './api';
-

package/src/components/BackgroundImage.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export interface BackgroundImageProps {
-    id: string;
-    className?: string;
-    style?: React.CSSProperties;
-    children?: React.ReactNode;
-    backgroundSize?: 'cover' | 'contain' | 'auto' | string;
-    backgroundPosition?: string;
-}
-export declare function BackgroundImage({ id, className, style, children, backgroundSize, backgroundPosition, }: BackgroundImageProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=BackgroundImage.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"BackgroundImage.d.ts","sourceRoot":"","sources":["BackgroundImage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,oBAAoB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,wBAAgB,eAAe,CAAC,EAC5B,EAAE,EACF,SAAc,EACd,KAAU,EACV,QAAQ,EACR,cAAwB,EACxB,kBAA6B,GAChC,EAAE,oBAAoB,2CAqEtB"}

package/src/components/BackgroundImage.js

@@ -1,35 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { Image } from './Image';
-import { Edit2 } from 'lucide-react';
-export function BackgroundImage({ id, className = '', style = {}, children, backgroundSize = 'cover', backgroundPosition = 'center', }) {
-    var _a;
-    const [isAdmin, setIsAdmin] = useState(false);
-    const [isLoading, setIsLoading] = useState(true);
-    useEffect(() => {
-        const checkUser = async () => {
-            var _a;
-            try {
-                const res = await fetch('/api/me');
-                const data = await res.json();
-                if (data.loggedIn && ['admin', 'dev'].includes((_a = data.user) === null || _a === void 0 ? void 0 : _a.role)) {
-                    setIsAdmin(true);
-                }
-            }
-            catch (error) {
-                console.error('Auth error:', error);
-            }
-            finally {
-                setIsLoading(false);
-            }
-        };
-        checkUser();
-    }, []);
-    const handleEditClick = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        window.dispatchEvent(new CustomEvent('open-image-editor', { detail: { id } }));
-    };
-    return (_jsxs("div", { className: `group relative overflow-hidden ${className}`, style: Object.assign(Object.assign({}, style), { minHeight: (_a = style.minHeight) !== null && _a !== void 0 ? _a : '300px' }), "data-background-id": id, children: [_jsx("div", { className: "absolute inset-0 z-0", children: _jsx(Image, { id: id, alt: "", fill: true, priority: true, className: "w-full h-full", objectFit: backgroundSize, objectPosition: backgroundPosition, editable: false }) }), _jsx("div", { className: "relative z-10 w-full h-full", children: children }), !isLoading && isAdmin && (_jsxs("button", { onClick: handleEditClick, className: "absolute bottom-8 left-8 z-50 flex items-center gap-3 px-6 py-3 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-full shadow-2xl border border-neutral-200 dark:border-neutral-700 opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500 ease-out", children: [_jsx(Edit2, { size: 16, className: "text-primary" }), _jsx("span", { className: "text-[11px] font-black uppercase tracking-widest", children: "Edit Background" })] }))] }));
-}

package/src/components/BackgroundImage.tsx

@@ -1,92 +0,0 @@
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import { Image } from './Image';
-import { Edit2 } from 'lucide-react';
-
-export interface BackgroundImageProps {
-    id: string;
-    className?: string;
-    style?: React.CSSProperties;
-    children?: React.ReactNode;
-    backgroundSize?: 'cover' | 'contain' | 'auto' | string;
-    backgroundPosition?: string;
-}
-
-export function BackgroundImage({
-    id,
-    className = '',
-    style = {},
-    children,
-    backgroundSize = 'cover',
-    backgroundPosition = 'center',
-}: BackgroundImageProps) {
-    const [isAdmin, setIsAdmin] = useState(false);
-    const [isLoading, setIsLoading] = useState(true);
-
-    useEffect(() => {
-        const checkUser = async () => {
-            try {
-                const res = await fetch('/api/me');
-                const data = await res.json();
-                if (data.loggedIn && ['admin', 'dev'].includes(data.user?.role)) {
-                    setIsAdmin(true);
-                }
-            } catch (error) {
-                console.error('Auth error:', error);
-            } finally {
-                setIsLoading(false);
-            }
-        };
-        checkUser();
-    }, []);
-
-    const handleEditClick = (e: React.MouseEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        window.dispatchEvent(new CustomEvent('open-image-editor', { detail: { id } }));
-    };
-
-    return (
-        <div
-            className={`group relative overflow-hidden ${className}`}
-            style={{ ...style, minHeight: style.minHeight ?? '300px' }} // Ensure visibility
-            data-background-id={id}
-        >
-            {/* 1. THE BACKGROUND LAYER 
-               We force 'fill' and 'w-full h-full' to ensure the internal 
-               Image component triggers its 'shouldFill' logic correctly.
-            */}
-            <div className="absolute inset-0 z-0">
-                <Image
-                    id={id}
-                    alt=""
-                    fill
-                    priority
-                    className="w-full h-full"
-                    objectFit={backgroundSize as any}
-                    objectPosition={backgroundPosition}
-                    editable={false}
-                />
-            </div>
-
-            {/* 2. CONTENT LAYER */}
-            <div className="relative z-10 w-full h-full">
-                {children}
-            </div>
-
-            {/* 3. ADMIN UI */}
-            {!isLoading && isAdmin && (
-                <button
-                    onClick={handleEditClick}
-                    className="absolute bottom-8 left-8 z-50 flex items-center gap-3 px-6 py-3 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-full shadow-2xl border border-neutral-200 dark:border-neutral-700 opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500 ease-out"
-                >
-                    <Edit2 size={16} className="text-primary" />
-                    <span className="text-[11px] font-black uppercase tracking-widest">
-                        Edit Background
-                    </span>
-                </button>
-            )}
-        </div>
-    );
-}

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

@@ -1,9 +0,0 @@
-/**
- * Configuration utilities for GlobalImageEditor
- */
-import type { PluginConfig } from './types';
-/**
- * Read plugin configuration from window global
- */
-export declare function getPluginConfig(): PluginConfig;
-//# sourceMappingURL=config.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["config.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;GAEG;AACH,wBAAgB,eAAe,IAAI,YAAY,CAW9C"}

package/src/components/GlobalImageEditor/config.js

@@ -1,18 +0,0 @@
-/**
- * Configuration utilities for GlobalImageEditor
- */
-/**
- * Read plugin configuration from window global
- */
-export function getPluginConfig() {
-    var _a;
-    if (typeof window === 'undefined') {
-        return { enabled: false };
-    }
-    const pluginProps = (_a = window.__JHITS_PLUGIN_PROPS__) === null || _a === void 0 ? void 0 : _a['plugin-images'];
-    return {
-        enabled: (pluginProps === null || pluginProps === void 0 ? void 0 : pluginProps.enabled) !== undefined ? pluginProps.enabled : true,
-        className: pluginProps === null || pluginProps === void 0 ? void 0 : pluginProps.className,
-        overlayClassName: pluginProps === null || pluginProps === void 0 ? void 0 : pluginProps.overlayClassName,
-    };
-}

package/src/components/GlobalImageEditor/config.ts

@@ -1,21 +0,0 @@
-/**
- * Configuration utilities for GlobalImageEditor
- */
-
-import type { PluginConfig } from './types';
-
-/**
- * Read plugin configuration from window global
- */
-export function getPluginConfig(): PluginConfig {
-    if (typeof window === 'undefined') {
-        return { enabled: false };
-    }
-    
-    const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__?.['plugin-images'];
-    return {
-        enabled: pluginProps?.enabled !== undefined ? pluginProps.enabled : true,
-        className: pluginProps?.className,
-        overlayClassName: pluginProps?.overlayClassName,
-    };
-}

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

@@ -1,20 +0,0 @@
-/**
- * Event handlers for image changes and effects
- */
-import type { SelectedImage } from './types';
-import type { ImageMetadata } from '../../types';
-/**
- * Apply image changes to DOM and save to API
- */
-export declare function handleImageChange(image: ImageMetadata | null, selectedImage: SelectedImage, onClose: () => void): Promise<void>;
-/**
- * Handle brightness change
- * @param saveImmediately - If true, save to API immediately. If false, only update state/DOM (for editor preview)
- */
-export declare function handleBrightnessChange(brightness: number, selectedImage: SelectedImage, setSelectedImage: (image: SelectedImage) => void, saveImmediately?: boolean): Promise<void>;
-/**
- * Handle blur change
- * @param saveImmediately - If true, save to API immediately. If false, only update state/DOM (for editor preview)
- */
-export declare function handleBlurChange(blur: number, selectedImage: SelectedImage, setSelectedImage: (image: SelectedImage) => void, saveImmediately?: boolean): Promise<void>;
-//# sourceMappingURL=eventHandlers.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"eventHandlers.d.ts","sourceRoot":"","sources":["eventHandlers.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD;;GAEG;AACH,wBAAsB,iBAAiB,CACnC,KAAK,EAAE,aAAa,GAAG,IAAI,EAC3B,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,MAAM,IAAI,GACpB,OAAO,CAAC,IAAI,CAAC,CAiDf;AAoID;;;GAGG;AACH,wBAAsB,sBAAsB,CACxC,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,EAChD,eAAe,GAAE,OAAc,GAChC,OAAO,CAAC,IAAI,CAAC,CAyBf;AAED;;;GAGG;AACH,wBAAsB,gBAAgB,CAClC,IAAI,EAAE,MAAM,EACZ,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,EAChD,eAAe,GAAE,OAAc,GAChC,OAAO,CAAC,IAAI,CAAC,CAyBf"}

package/src/components/GlobalImageEditor/eventHandlers.js

@@ -1,206 +0,0 @@
-/**
- * Event handlers for image changes and effects
- */
-import { getFilename, saveTransformToAPI, normalizePosition } from './saveLogic';
-/**
- * Apply image changes to DOM and save to API
- */
-export async function handleImageChange(image, selectedImage, onClose) {
-    var _a;
-    if (!image)
-        return;
-    const { element } = selectedImage;
-    const semanticId = element.getAttribute('data-image-id') ||
-        element.getAttribute('data-background-image-id');
-    if (!semanticId) {
-        console.error('[GlobalImageEditor] No semantic ID found for image');
-        return;
-    }
-    // Extract filename from image URL or use image.id
-    const filename = ((_a = image.url.split('/').pop()) === null || _a === void 0 ? void 0 : _a.split('?')[0]) || image.id;
-    const normalizedPositionX = normalizePosition(selectedImage.positionX);
-    const normalizedPositionY = normalizePosition(selectedImage.positionY);
-    // Save the mapping between semantic ID and filename, including effects and transforms
-    await saveTransformToAPI(semanticId, filename, selectedImage.scale, normalizedPositionX, normalizedPositionY, selectedImage.brightness, selectedImage.blur);
-    // Update image src immediately - handle background images differently
-    if (selectedImage.isBackground) {
-        updateBackgroundImage(element, image.url, selectedImage, normalizedPositionX, normalizedPositionY);
-    }
-    else {
-        updateRegularImage(element, image.url, semanticId, selectedImage, normalizedPositionX, normalizedPositionY);
-    }
-    // Dispatch a custom event to notify Image components to re-resolve
-    window.dispatchEvent(new CustomEvent('image-mapping-updated', {
-        detail: {
-            id: semanticId,
-            filename,
-            brightness: selectedImage.brightness,
-            blur: selectedImage.blur,
-            scale: selectedImage.scale,
-            positionX: selectedImage.positionX,
-            positionY: selectedImage.positionY,
-        }
-    }));
-    onClose();
-}
-/**
- * Update background image element
- */
-function updateBackgroundImage(element, imageUrl, selectedImage, normalizedPositionX, normalizedPositionY) {
-    // For background images, update the nested Image component
-    const imgWrapper = element.querySelector('[data-image-id]');
-    if (imgWrapper) {
-        const img = imgWrapper.querySelector('img');
-        if (img) {
-            img.src = imageUrl;
-            img.setAttribute('data-edited-src', imageUrl);
-            img.style.transform = `scale(${selectedImage.scale}) translate(${normalizedPositionX}%, ${normalizedPositionY}%)`;
-            img.style.transformOrigin = 'center center';
-        }
-    }
-    else {
-        // Fallback: update background-image style if no nested Image component
-        const bgImage = window.getComputedStyle(element).backgroundImage;
-        if (bgImage && bgImage !== 'none') {
-            element.style.backgroundImage = `url(${imageUrl})`;
-        }
-    }
-    // Store attributes on the background container
-    const semanticId = element.getAttribute('data-image-id') || element.getAttribute('data-background-image-id') || '';
-    element.setAttribute('data-background-image-id', semanticId);
-    element.setAttribute('data-edited-src', imageUrl);
-    element.setAttribute('data-brightness', selectedImage.brightness.toString());
-    element.setAttribute('data-blur', selectedImage.blur.toString());
-    element.setAttribute('data-scale', selectedImage.scale.toString());
-    element.setAttribute('data-position-x', normalizedPositionX.toString());
-    element.setAttribute('data-position-y', normalizedPositionY.toString());
-    // Apply filter to the wrapper element
-    if (selectedImage.brightness !== 100 || selectedImage.blur !== 0) {
-        element.style.filter = `brightness(${selectedImage.brightness}%) blur(${selectedImage.blur}px)`;
-    }
-    else {
-        element.style.filter = '';
-    }
-}
-/**
- * Update regular image element
- */
-function updateRegularImage(element, imageUrl, semanticId, selectedImage, normalizedPositionX, normalizedPositionY) {
-    if (element.tagName === 'IMG') {
-        element.src = imageUrl;
-        element.setAttribute('data-edited-src', imageUrl);
-        element.setAttribute('data-image-id', semanticId);
-        element.setAttribute('data-brightness', selectedImage.brightness.toString());
-        element.setAttribute('data-blur', selectedImage.blur.toString());
-        // Apply filter
-        if (selectedImage.brightness !== 100 || selectedImage.blur !== 0) {
-            element.style.filter = `brightness(${selectedImage.brightness}%) blur(${selectedImage.blur}px)`;
-        }
-        else {
-            element.style.filter = '';
-        }
-    }
-    else {
-        // Next.js Image wrapper - find the actual img element
-        const img = element.querySelector('img');
-        if (img) {
-            img.src = imageUrl;
-            img.setAttribute('data-edited-src', imageUrl);
-            img.style.transform = `scale(${selectedImage.scale}) translate(${normalizedPositionX}%, ${normalizedPositionY}%)`;
-            img.style.transformOrigin = 'center center';
-        }
-        element.setAttribute('data-image-id', semanticId);
-        element.setAttribute('data-edited-src', imageUrl);
-        element.setAttribute('data-brightness', selectedImage.brightness.toString());
-        element.setAttribute('data-blur', selectedImage.blur.toString());
-        element.setAttribute('data-scale', selectedImage.scale.toString());
-        element.setAttribute('data-position-x', normalizedPositionX.toString());
-        element.setAttribute('data-position-y', normalizedPositionY.toString());
-        // Apply filter to wrapper
-        if (selectedImage.brightness !== 100 || selectedImage.blur !== 0) {
-            element.style.filter = `brightness(${selectedImage.brightness}%) blur(${selectedImage.blur}px)`;
-        }
-        else {
-            element.style.filter = '';
-        }
-    }
-}
-/**
- * Get filename from element for saving effects
- */
-async function getFilenameFromElement(semanticId, selectedImage) {
-    var _a, _b;
-    const filename = await getFilename(semanticId, selectedImage);
-    if (filename)
-        return filename;
-    const { element } = selectedImage;
-    if (selectedImage.isBackground) {
-        const bgImage = window.getComputedStyle(element).backgroundImage;
-        const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
-        if (urlMatch && urlMatch[1]) {
-            return ((_a = urlMatch[1].split('/api/uploads/')[1]) === null || _a === void 0 ? void 0 : _a.split('?')[0]) || semanticId;
-        }
-    }
-    else {
-        let imgSrc = null;
-        if (element instanceof HTMLImageElement && element.src) {
-            imgSrc = element.src;
-        }
-        else {
-            const img = element.querySelector('img');
-            if (img === null || img === void 0 ? void 0 : img.src) {
-                imgSrc = img.src;
-            }
-        }
-        if (imgSrc) {
-            return ((_b = imgSrc.split('/api/uploads/')[1]) === null || _b === void 0 ? void 0 : _b.split('?')[0]) || semanticId;
-        }
-    }
-    return semanticId;
-}
-/**
- * Handle brightness change
- * @param saveImmediately - If true, save to API immediately. If false, only update state/DOM (for editor preview)
- */
-export async function handleBrightnessChange(brightness, selectedImage, setSelectedImage, saveImmediately = true) {
-    const { element } = selectedImage;
-    const semanticId = element.getAttribute('data-image-id') ||
-        element.getAttribute('data-background-image-id');
-    if (!semanticId)
-        return;
-    const currentFilter = element.style.filter || '';
-    const blurMatch = currentFilter.match(/blur\((\d+)px\)/);
-    const blur = blurMatch ? parseInt(blurMatch[1]) : selectedImage.blur;
-    // Update the selectedImage state
-    setSelectedImage(Object.assign(Object.assign({}, selectedImage), { brightness }));
-    element.style.filter = `brightness(${brightness}%) blur(${blur}px)`;
-    element.setAttribute('data-brightness', brightness.toString());
-    // Save the effect immediately only if requested (not when in editor)
-    if (saveImmediately) {
-        const filename = await getFilenameFromElement(semanticId, selectedImage);
-        await saveTransformToAPI(semanticId, filename, selectedImage.scale, selectedImage.positionX, selectedImage.positionY, brightness, blur);
-    }
-}
-/**
- * Handle blur change
- * @param saveImmediately - If true, save to API immediately. If false, only update state/DOM (for editor preview)
- */
-export async function handleBlurChange(blur, selectedImage, setSelectedImage, saveImmediately = true) {
-    const { element } = selectedImage;
-    const semanticId = element.getAttribute('data-image-id') ||
-        element.getAttribute('data-background-image-id');
-    if (!semanticId)
-        return;
-    const currentFilter = element.style.filter || '';
-    const brightnessMatch = currentFilter.match(/brightness\((\d+)%\)/);
-    const brightness = brightnessMatch ? parseInt(brightnessMatch[1]) : selectedImage.brightness;
-    // Update the selectedImage state
-    setSelectedImage(Object.assign(Object.assign({}, selectedImage), { blur }));
-    element.style.filter = `brightness(${brightness}%) blur(${blur}px)`;
-    element.setAttribute('data-blur', blur.toString());
-    // Save the effect immediately only if requested (not when in editor)
-    if (saveImmediately) {
-        const filename = await getFilenameFromElement(semanticId, selectedImage);
-        await saveTransformToAPI(semanticId, filename, selectedImage.scale, selectedImage.positionX, selectedImage.positionY, brightness, blur);
-    }
-}