@jhits/plugin-images 0.0.11 → 0.0.12

package/src/components/ImageEditor.d.ts

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1 @@
+{"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.tsx

@@ -0,0 +1,323 @@
+'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

@@ -0,0 +1,116 @@
+'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>
+    );
+}

package/src/components/ImagePicker.d.ts

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

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

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