79 |

83 |

84 | 85 | 86 |

87 | 88 | {generationMode === 'video' && ( 89 |

90 | 93 | 96 |

97 | )} 98 | 105 |

setPrompt(e.target.value)}
110 |                     onKeyDown={handleKeyDown}
111 |                     placeholder={getPlaceholderText()}
112 |                     className="flex-grow bg-transparent text-white placeholder-neutral-400 focus:outline-none px-2 resize-none overflow-hidden max-h-32"
113 |                     disabled={isLoading}
114 |                 />
115 |                 {prompt.trim() && !isLoading && (
116 |                     <button
117 |                         onClick={handleSaveEffect}
118 |                         title={t('myEffects.saveEffectTooltip')}
119 |                         className="flex-shrink-0 w-11 h-11 flex items-center justify-center text-white rounded-full hover:bg-neutral-600 transition-colors duration-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
120 |                     >
121 |                         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
122 |                     </button>
123 |                 )}
124 |                 <button
125 |                     onClick={onGenerate}
126 |                     disabled={isLoading || !prompt.trim()}
127 |                     aria-label={t('promptBar.generate')}
128 |                     title={t('promptBar.generate')}
129 |                     className="flex-shrink-0 w-11 h-11 flex items-center justify-center text-white rounded-full disabled:opacity-50 disabled:cursor-not-allowed hover:brightness-110 transition-all duration-200"
130 |                     style={{ backgroundColor: 'var(--button-bg-color)' }}
131 |                 >
132 |                     {isLoading ? (
133 |                         <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
134 |                             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
135 |                             <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
136 |                         </svg>
137 |                     ) : (
138 |                        generationMode === 'image' 
139 |                         ? <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
140 |                         : <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m22 8-6 4 6 4V8Z"/><rect x="2" y="6" width="14" height="12" rx="2" ry="2"/></svg>
141 |                     )}
142 |                 </button>
143 |             </div>
144 |         </div>
145 |     );
146 | };
147 |

--------------------------------------------------------------------------------
/components/QuickPrompts.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useRef, useEffect } from 'react';
 2 | import type { UserEffect } from '../types';
 3 | 
 4 | interface QuickPromptsProps {
 5 |     t: (key: string, ...args: any[]) => any;
 6 |     setPrompt: (prompt: string) => void;
 7 |     disabled: boolean;
 8 |     userEffects: UserEffect[];
 9 |     onDeleteUserEffect: (id: string) => void;
10 | }
11 | 
12 | export const QuickPrompts: React.FC<QuickPromptsProps> = ({ t, setPrompt, disabled, userEffects, onDeleteUserEffect }) => {
13 |     const [isMenuOpen, setIsMenuOpen] = useState(false);
14 |     const wrapperRef = useRef<HTMLDivElement>(null);
15 | 
16 |     const handleSelect = (value: string) => {
17 |         if (value) {
18 |             setPrompt(value);
19 |         }
20 |         setIsMenuOpen(false);
21 |     };
22 |     
23 |     useEffect(() => {
24 |         const handleClickOutside = (event: MouseEvent) => {
25 |             if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
26 |                 setIsMenuOpen(false);
27 |             }
28 |         };
29 |         document.addEventListener('mousedown', handleClickOutside);
30 |         return () => document.removeEventListener('mousedown', handleClickOutside);
31 |     }, [wrapperRef]);
32 |     
33 |     const builtInPrompts = t('quickPrompts');
34 | 
35 |     return (
36 |         <div className="relative" ref={wrapperRef}>
37 |             <button
38 |                 onClick={() => setIsMenuOpen(prev => !prev)}
39 |                 disabled={disabled}
40 |                 aria-label={t('quickPromptsAriaLabel')}
41 |                 title={t('quickPromptsAriaLabel')}
42 |                 className="flex-shrink-0 w-11 h-11 flex items-center justify-center text-white rounded-full disabled:opacity-50 disabled:cursor-not-allowed hover:brightness-110 transition-all duration-200"
43 |                 style={{ backgroundColor: 'var(--button-bg-color)' }}
44 |             >
45 |                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2.69l.13.04a7.9 7.9 0 0 1 5.92 6.61 8.27 8.27 0 0 1-1.77 6.13A8.52 8.52 0 0 1 12 21.31a8.52 8.52 0 0 1-4.28-5.83 8.27 8.27 0 0 1-1.77-6.13A7.9 7.9 0 0 1 11.87 2.73L12 2.69zM12 22v-1.16"/><path d="M9 19h6"/></svg>
46 |             </button>
47 |             {isMenuOpen && (
48 |                 <div className="absolute bottom-full left-0 mb-3 w-80 max-h-96 overflow-y-auto bg-neutral-800/90 backdrop-blur-xl border border-white/10 rounded-xl shadow-2xl p-2 flex flex-col gap-1">
49 |                     <h4 className="px-2 pt-1 pb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">{t('myEffects.title')}</h4>
50 |                     {userEffects.length > 0 ? (
51 |                         userEffects.map((effect) => (
52 |                             <div key={effect.id} className="group flex items-center justify-between p-2 rounded-md hover:bg-white/10 text-white/90 text-sm transition-colors">
53 |                                 <button onClick={() => handleSelect(effect.value)} className="flex-grow text-left truncate">
54 |                                     {effect.name}
55 |                                 </button>
56 |                                 <button
57 |                                     onClick={() => onDeleteUserEffect(effect.id)}
58 |                                     title={t('myEffects.deleteEffectTooltip')}
59 |                                     className="ml-2 p-1 rounded-full opacity-0 group-hover:opacity-100 hover:bg-red-500/50 transition-opacity flex-shrink-0"
60 |                                 >
61 |                                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
62 |                                 </button>
63 |                             </div>
64 |                         ))
65 |                     ) : (
66 |                         <p className="px-2 pb-2 text-xs text-gray-500">{t('myEffects.noEffects')}</p>
67 |                     )}
68 |                     
69 |                     <div className="border-t border-white/20 my-2 -mx-2"></div>
70 |                     
71 |                     {builtInPrompts.map((item: {name: string, value: string}, index: number) => (
72 |                         <button 
73 |                             key={index} 
74 |                             onClick={() => handleSelect(item.value)}
75 |                             className="block w-full text-left p-2 rounded-md hover:bg-white/10 text-white/90 text-sm transition-colors"
76 |                         >
77 |                             {item.name}
78 |                         </button>
79 |                     ))}
80 |                 </div>
81 |             )}
82 |         </div>
83 |     );
84 | };

--------------------------------------------------------------------------------
/components/Toolbar.tsx:
--------------------------------------------------------------------------------
  1 | 
  2 | import React, { useState, useRef, useEffect } from 'react';
  3 | import type { Tool } from '../types';
  4 | 
  5 | interface ToolbarProps {
  6 |     t: (key: string) => string;
  7 |     activeTool: Tool;
  8 |     setActiveTool: (tool: Tool) => void;
  9 |     drawingOptions: { strokeColor: string; strokeWidth: number };
 10 |     setDrawingOptions: (options: { strokeColor: string; strokeWidth: number }) => void;
 11 |     onUpload: (file: File) => void;
 12 |     isCropping: boolean;
 13 |     onConfirmCrop: () => void;
 14 |     onCancelCrop: () => void;
 15 |     onSettingsClick: () => void;
 16 |     onLayersClick: () => void;
 17 |     onBoardsClick: () => void;
 18 |     onUndo: () => void;
 19 |     onRedo: () => void;
 20 |     canUndo: boolean;
 21 |     canRedo: boolean;
 22 | }
 23 | 
 24 | const ToolButton: React.FC<{
 25 |     label: string;
 26 |     icon: JSX.Element;
 27 |     isActive?: boolean;
 28 |     onClick: () => void;
 29 |     disabled?: boolean;
 30 |     className?: string;
 31 | }> = ({ label, icon, isActive = false, onClick, disabled = false, className = '' }) => (
 32 |     <button
 33 |         onClick={onClick}
 34 |         aria-label={label}
 35 |         title={label}
 36 |         disabled={disabled}
 37 |         className={`p-2 rounded-md transition-colors duration-200 text-white ${
 38 |             isActive ? 'bg-blue-500' : 'hover:bg-white/20'
 39 |         } disabled:text-white/40 disabled:hover:bg-transparent disabled:cursor-not-allowed ${className}`}
 40 |     >
 41 |         {icon}
 42 |     </button>
 43 | );
 44 | 
 45 | 
 46 | const ToolGroupButton: React.FC<{
 47 |     activeTool: Tool;
 48 |     setActiveTool: (tool: Tool) => void;
 49 |     tools: { id: Tool; label: string; icon: JSX.Element }[];
 50 |     groupIcon: JSX.Element;
 51 |     groupLabel: string;
 52 | }> = ({ activeTool, setActiveTool, tools, groupIcon, groupLabel }) => {
 53 |     const [isOpen, setIsOpen] = useState(false);
 54 |     const wrapperRef = useRef<HTMLDivElement>(null);
 55 | 
 56 |     const activeToolInGroup = tools.find(t => t.id === activeTool);
 57 | 
 58 |     useEffect(() => {
 59 |         const handleClickOutside = (event: MouseEvent) => {
 60 |             if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
 61 |                 setIsOpen(false);
 62 |             }
 63 |         };
 64 |         document.addEventListener('mousedown', handleClickOutside);
 65 |         return () => document.removeEventListener('mousedown', handleClickOutside);
 66 |     }, []);
 67 | 
 68 |     const handleToolSelect = (toolId: Tool) => {
 69 |         setActiveTool(toolId);
 70 |         setIsOpen(false);
 71 |     };
 72 | 
 73 |     return (
 74 |         <div className="relative flex-shrink-0" ref={wrapperRef}>
 75 |             <ToolButton
 76 |                 label={activeToolInGroup ? activeToolInGroup.label : groupLabel}
 77 |                 icon={activeToolInGroup ? activeToolInGroup.icon : groupIcon}
 78 |                 isActive={!!activeToolInGroup}
 79 |                 onClick={() => setIsOpen(prev => !prev)}
 80 |             />
 81 |             {isOpen && (
 82 |                 <div className="absolute left-full top-0 ml-2 p-1 bg-neutral-800/90 backdrop-blur-xl border border-white/10 rounded-lg shadow-2xl flex flex-col gap-1">
 83 |                     {tools.map(tool => (
 84 |                         <ToolButton
 85 |                             key={tool.id}
 86 |                             label={tool.label}
 87 |                             icon={tool.icon}
 88 |                             isActive={activeTool === tool.id}
 89 |                             onClick={() => handleToolSelect(tool.id)}
 90 |                             className="bg-white/10"
 91 |                         />
 92 |                     ))}
 93 |                 </div>
 94 |             )}
 95 |         </div>
 96 |     );
 97 | };
 98 | 
 99 | 
100 | export const Toolbar: React.FC<ToolbarProps> = ({
101 |     t,
102 |     activeTool,
103 |     setActiveTool,
104 |     drawingOptions,
105 |     setDrawingOptions,
106 |     onUpload,
107 |     isCropping,
108 |     onConfirmCrop,
109 |     onCancelCrop,
110 |     onSettingsClick,
111 |     onLayersClick,
112 |     onBoardsClick,
113 |     onUndo,
114 |     onRedo,
115 |     canUndo,
116 |     canRedo,
117 | }) => {
118 |     const fileInputRef = React.useRef<HTMLInputElement>(null);
119 |     const handleUploadClick = () => fileInputRef.current?.click();
120 |     const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
121 |         if (e.target.files && e.target.files[0]) {
122 |             onUpload(e.target.files[0]);
123 |             e.target.value = '';
124 |         }
125 |     };
126 | 
127 |     const containerStyle: React.CSSProperties = {
128 |         backgroundColor: `var(--ui-bg-color)`,
129 |     };
130 | 
131 |     if (isCropping) {
132 |         return (
133 |             <div 
134 |                 style={containerStyle}
135 |                 className="absolute top-1/2 left-4 -translate-y-1/2 z-10 px-2 py-4 backdrop-blur-xl border border-white/10 rounded-full shadow-2xl flex flex-col items-center space-y-2 w-[88px]"
136 |             >
137 |                 <span className="text-sm font-medium text-white">{t('toolbar.crop.title')}</span>
138 |                 <div className="w-full h-px bg-white/30 my-2"></div>
139 |                 <button onClick={onCancelCrop} className="px-4 py-1.5 text-sm rounded-md bg-white/20 text-white hover:bg-white/30 border border-white/30 w-full">{t('toolbar.crop.cancel')}</button>
140 |                 <button onClick={onConfirmCrop} className="px-4 py-1.5 text-sm rounded-md bg-blue-500 text-white hover:bg-blue-600 w-full">{t('toolbar.crop.confirm')}</button>
141 |             </div>
142 |         )
143 |     }
144 | 
145 |     const mainTools: { id: Tool; label: string; icon: JSX.Element }[] = [
146 |         { id: 'select', label: t('toolbar.select'), icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="M13 13l6 6"/></svg> },
147 |         { id: 'pan', label: t('toolbar.pan'), icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="5 9 2 12 5 15"></polyline><polyline points="9 5 12 2 15 5"></polyline><polyline points="15 19 12 22 9 19"></polyline><polyline points="19 9 22 12 19 15"></polyline><line x1="2" y1="12" x2="22" y2="12"></line><line x1="12" y1="2" x2="12" y2="22"></line></svg> },
148 |     ];
149 |     
150 |      const shapeTools: { id: Tool; label: string; icon: JSX.Element }[] = [
151 |         { id: 'rectangle', label: t('toolbar.rectangle'), icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2" /></svg> },
152 |         { id: 'circle', label: t('toolbar.circle'), icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /></svg> },
153 |         { id: 'triangle', label: t('toolbar.triangle'), icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></svg> },
154 |         { id: 'line', label: t('toolbar.line'), icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="19" x2="19" y2="5"></line></svg> },
155 |         { id: 'arrow', label: t('toolbar.arrow'), icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg> },
156 |     ];
157 | 
158 |      const drawingTools: { id: Tool; label: string; icon: JSX.Element }[] = [
159 |         { id: 'draw', label: t('toolbar.draw'), icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg> },
160 |         { id: 'highlighter', label: t('toolbar.highlighter'), icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m18.37 2.63 1.4 1.4a2 2 0 0 1 0 2.82L5.23 21.37a2.82 2.82 0 0 1-4-4L15.55 2.63a2 2 0 0 1 2.82 0Z"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8v2"/></svg>},
161 |         { id: 'lasso', label: t('toolbar.lasso'), icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><ellipse cx="12" cy="12" rx="8" ry="5" strokeDasharray="3 3" transform="rotate(-30 12 12)"/></svg>},
162 |         { id: 'erase', label: t('toolbar.erase'), icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21H7Z"/><path d="M22 21H7"/><path d="m5 12 5 5"/></svg> },
163 |     ];
164 | 
165 |     const miscTools: { id: Tool; label: string; icon: JSX.Element }[] = [
166 |         { id: 'text', label: t('toolbar.text'), icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg> },
167 |     ];
168 | 
169 |     return (
170 |         <div 
171 |             style={containerStyle}
172 |             className="absolute top-1/2 left-4 -translate-y-1/2 z-10 px-2 py-4 backdrop-blur-xl border border-white/10 rounded-full shadow-2xl flex flex-col items-center gap-2"
173 |         >
174 |             <ToolButton label="Boards" onClick={onBoardsClick} icon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>} />
175 |             <ToolButton label={t('toolbar.layers')} onClick={onLayersClick} icon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>} />
176 |             <ToolButton label={t('toolbar.settings')} onClick={onSettingsClick} icon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>} />
177 | 
178 |             <div className="w-10 h-px bg-white/30"></div>
179 |             
180 |             <div className="flex flex-col items-center gap-2 flex-grow">
181 |                  {mainTools.map(tool => (
182 |                     <ToolButton key={tool.id} label={tool.label} icon={tool.icon} isActive={activeTool === tool.id} onClick={() => setActiveTool(tool.id)} />
183 |                 ))}
184 | 
185 |                 <ToolGroupButton 
186 |                     activeTool={activeTool} 
187 |                     setActiveTool={setActiveTool} 
188 |                     tools={shapeTools} 
189 |                     groupLabel={t('toolbar.shapes')}
190 |                     groupIcon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>}
191 |                 />
192 | 
193 |                 <ToolGroupButton 
194 |                     activeTool={activeTool} 
195 |                     setActiveTool={setActiveTool} 
196 |                     tools={drawingTools} 
197 |                     groupLabel={t('toolbar.drawingTools')}
198 |                     groupIcon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>}
199 |                 />
200 | 
201 |                 {miscTools.map(tool => (
202 |                     <ToolButton key={tool.id} label={tool.label} icon={tool.icon} isActive={activeTool === tool.id} onClick={() => setActiveTool(tool.id)} />
203 |                 ))}
204 | 
205 |                 <div className="w-10 h-px bg-white/30"></div>
206 |                 <input type="color" aria-label={t('toolbar.strokeColor')} title={t('toolbar.strokeColor')} value={drawingOptions.strokeColor} onChange={(e) => setDrawingOptions({ ...drawingOptions, strokeColor: e.target.value })} className="w-8 h-8 p-0 border border-white/30 rounded-md cursor-pointer bg-transparent" />
207 |                 <input type="range" min="1" max="50" value={drawingOptions.strokeWidth} aria-label={t('toolbar.strokeWidth')} title={t('toolbar.strokeWidth')} onChange={(e) => setDrawingOptions({ ...drawingOptions, strokeWidth: parseInt(e.target.value, 10) })} className="w-10 cursor-pointer" />
208 |                 <span className="text-sm text-white w-6 text-center">{drawingOptions.strokeWidth}</span>
209 |                 <div className="w-10 h-px bg-white/30"></div>
210 |                 <input type="file" ref={fileInputRef} onChange={handleFileChange} accept="image/*" className="hidden" />
211 |                 <ToolButton label={t('toolbar.upload')} onClick={handleUploadClick} icon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>} />
212 |             </div>
213 | 
214 |             <div className="w-10 h-px bg-white/30"></div>
215 |             <ToolButton label={t('toolbar.undo')} onClick={onUndo} disabled={!canUndo} icon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11"/></svg>} />
216 |             <ToolButton label={t('toolbar.redo')} onClick={onRedo} disabled={!canRedo} icon={<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 14 5-5-5-5"/><path d="M20 9H9.5A5.5 5.5 0 0 0 4 14.5v0A5.5 5.5 0 0 0 9.5 20H13"/></svg>} />
217 |         </div>
218 |     );
219 | };
220 |

--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |   <title>Infinite Canvas AI Editor</title>
 8 |   <script src="https://cdn.tailwindcss.com"></script>
 9 | <script type="importmap">
10 | {
11 |   "imports": {
12 |     "react-dom/": "https://aistudiocdn.com/react-dom@^19.1.1/",
13 |     "react/": "https://aistudiocdn.com/react@^19.1.1/",
14 |     "react": "https://aistudiocdn.com/react@^19.1.1",
15 |     "@google/genai": "https://aistudiocdn.com/@google/genai@^1.17.0"
16 |   }
17 | }
18 | </script>
19 | </head>
20 | <body class="overflow-hidden">
21 |   <div id="root"></div>
22 |   <script type="module" src="/index.tsx"></script>
23 | </body>
24 | </html>
25 |

--------------------------------------------------------------------------------
/index.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react';
 3 | import ReactDOM from 'react-dom/client';
 4 | import App from './App';
 5 | 
 6 | const rootElement = document.getElementById('root');
 7 | if (!rootElement) {
 8 |   throw new Error("Could not find root element to mount to");
 9 | }
10 | 
11 | const root = ReactDOM.createRoot(rootElement);
12 | root.render(
13 |   <React.StrictMode>
14 |     <App />
15 |   </React.StrictMode>
16 | );
17 |

--------------------------------------------------------------------------------
/metadata.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "🍌 BananaPod｜ZHO",
3 |   "description": "An infinite canvas powered by Gemini (Nano Banana model) for generating and editing images with text prompts. Features basic drawing tools and allows users to upload, drag, and paste images onto a Miro-like whiteboard.",
4 |   "requestFramePermissions": []
5 | }

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "🍌-bananapod｜zho",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "react-dom": "^19.1.1",
13 |     "react": "^19.1.1",
14 |     "@google/genai": "^1.17.0"
15 |   },
16 |   "devDependencies": {
17 |     "@types/node": "^22.14.0",
18 |     "@vitejs/plugin-react": "^5.0.0",
19 |     "typescript": "~5.8.2",
20 |     "vite": "^6.2.0"
21 |   }
22 | }
23 |

--------------------------------------------------------------------------------
/services/geminiService.ts:
--------------------------------------------------------------------------------
  1 | import { GoogleGenAI, Modality, GenerateContentResponse, GenerateVideosOperation } from "@google/genai";
  2 | 
  3 | const API_KEY = process.env.API_KEY;
  4 | if (!API_KEY) {
  5 |   throw new Error("API_KEY environment variable is not set");
  6 | }
  7 | 
  8 | const ai = new GoogleGenAI({ apiKey: API_KEY });
  9 | 
 10 | type ImageInput = {
 11 |     href: string;
 12 |     mimeType: string;
 13 | };
 14 | 
 15 | export async function editImage(
 16 |   images: ImageInput[], 
 17 |   prompt: string,
 18 |   mask?: ImageInput
 19 | ): Promise<{ newImageBase64: string | null; newImageMimeType: string | null; textResponse: string | null; }> {
 20 |   
 21 |   const imageParts = images.map(image => {
 22 |     const dataUrlParts = image.href.split(',');
 23 |     const base64Data = dataUrlParts.length > 1 ? dataUrlParts[1] : dataUrlParts[0];
 24 |     return {
 25 |       inlineData: {
 26 |         data: base64Data,
 27 |         mimeType: image.mimeType,
 28 |       },
 29 |     };
 30 |   });
 31 | 
 32 |   const maskPart = mask ? {
 33 |     inlineData: {
 34 |       data: mask.href.split(',')[1],
 35 |       mimeType: mask.mimeType,
 36 |     },
 37 |   } : null;
 38 | 
 39 |   const textPart = { text: prompt };
 40 | 
 41 |   // For inpainting with a mask, the API expects a specific order: prompt, then image, then mask.
 42 |   // For other edits, the order is less strict. This ensures the mask is applied correctly.
 43 |   const parts = maskPart
 44 |     ? [textPart, ...imageParts, maskPart]
 45 |     : [...imageParts, textPart];
 46 | 
 47 |   try {
 48 |     const response: GenerateContentResponse = await ai.models.generateContent({
 49 |       model: 'gemini-2.5-flash-image-preview',
 50 |       contents: {
 51 |         parts: parts,
 52 |       },
 53 |       config: {
 54 |         responseModalities: [Modality.IMAGE, Modality.TEXT],
 55 |       },
 56 |     });
 57 | 
 58 |     let newImageBase64: string | null = null;
 59 |     let newImageMimeType: string | null = null;
 60 |     let textResponse: string | null = null;
 61 | 
 62 |     if (response.candidates && response.candidates.length > 0 && response.candidates[0].content) {
 63 |       const parts = response.candidates[0].content.parts;
 64 |       for (const part of parts) {
 65 |         if (part.inlineData) {
 66 |           newImageBase64 = part.inlineData.data;
 67 |           newImageMimeType = part.inlineData.mimeType;
 68 |         } else if (part.text) {
 69 |           textResponse = part.text;
 70 |         }
 71 |       }
 72 |     } else {
 73 |         textResponse = "The AI response was blocked or did not contain content.";
 74 |         if (response.candidates && response.candidates.length > 0 && response.candidates[0].finishReason) {
 75 |             textResponse += ` (Reason: ${response.candidates[0].finishReason})`;
 76 |         }
 77 |     }
 78 |     
 79 |     if (!newImageBase64) {
 80 |         // Fallback or error if no image is generated
 81 |         console.warn("API response did not contain an image part.", response);
 82 |         textResponse = textResponse || "The AI did not generate a new image. Please try a different prompt.";
 83 |     }
 84 | 
 85 |     return { newImageBase64, newImageMimeType, textResponse };
 86 |   } catch (error) {
 87 |     console.error("Error calling Gemini API:", error);
 88 |     if (error instanceof Error) {
 89 |         throw new Error(`Gemini API Error: ${error.message}`);
 90 |     }
 91 |     throw new Error("An unknown error occurred while contacting the Gemini API.");
 92 |   }
 93 | }
 94 | 
 95 | export async function generateImageFromText(prompt: string): Promise<{ newImageBase64: string | null; newImageMimeType: string | null; textResponse: string | null; }> {
 96 |   try {
 97 |     const response = await ai.models.generateImages({
 98 |         model: 'imagen-4.0-generate-001',
 99 |         prompt: prompt,
100 |         config: {
101 |           numberOfImages: 1,
102 |           outputMimeType: 'image/png',
103 |         },
104 |     });
105 | 
106 |     if (response.generatedImages && response.generatedImages.length > 0) {
107 |       const image = response.generatedImages[0];
108 |       return {
109 |         newImageBase64: image.image.imageBytes,
110 |         newImageMimeType: 'image/png',
111 |         textResponse: null
112 |       };
113 |     } else {
114 |       return {
115 |         newImageBase64: null,
116 |         newImageMimeType: null,
117 |         textResponse: "The AI did not generate an image. Please try a different prompt."
118 |       };
119 |     }
120 |   } catch (error) {
121 |     console.error("Error calling Gemini API for text-to-image:", error);
122 |     if (error instanceof Error) {
123 |         throw new Error(`Gemini API Error: ${error.message}`);
124 |     }
125 |     throw new Error("An unknown error occurred while contacting the Gemini API.");
126 |   }
127 | }
128 | 
129 | export async function generateVideo(
130 |   prompt: string,
131 |   aspectRatio: '16:9' | '9:16',
132 |   onProgress: (message: string) => void,
133 |   image?: ImageInput
134 | ): Promise<{ videoBlob: Blob; mimeType: string }> {
135 |   onProgress('Initializing video generation...');
136 |   
137 |   const imagePart = image ? {
138 |     imageBytes: image.href.split(',')[1],
139 |     mimeType: image.mimeType,
140 |   } : undefined;
141 | 
142 |   let operation: GenerateVideosOperation = await ai.models.generateVideos({
143 |     model: 'veo-2.0-generate-001',
144 |     prompt: prompt,
145 |     image: imagePart,
146 |     config: {
147 |       numberOfVideos: 1,
148 |       aspectRatio: aspectRatio,
149 |     }
150 |   });
151 |   
152 |   const progressMessages = [
153 |       'Rendering frames...',
154 |       'Compositing video...',
155 |       'Applying final touches...',
156 |       'Almost there...',
157 |   ];
158 |   let messageIndex = 0;
159 | 
160 |   onProgress('Generation started, this may take a few minutes.');
161 | 
162 |   while (!operation.done) {
163 |     onProgress(progressMessages[messageIndex % progressMessages.length]);
164 |     messageIndex++;
165 |     await new Promise(resolve => setTimeout(resolve, 10000));
166 |     operation = await ai.operations.getVideosOperation({operation: operation});
167 |   }
168 | 
169 |   if (operation.error) {
170 |     throw new Error(`Video generation failed: ${operation.error.message}`);
171 |   }
172 | 
173 |   const downloadLink = operation.response?.generatedVideos?.[0]?.video?.uri;
174 |   if (!downloadLink) {
175 |     throw new Error("Video generation completed, but no download link was found.");
176 |   }
177 | 
178 |   onProgress('Downloading generated video...');
179 |   const response = await fetch(`${downloadLink}&key=${API_KEY}`);
180 |   if (!response.ok) {
181 |     throw new Error(`Failed to download video: ${response.statusText}`);
182 |   }
183 | 
184 |   const videoBlob = await response.blob();
185 |   const mimeType = response.headers.get('Content-Type') || 'video/mp4';
186 | 
187 |   return { videoBlob, mimeType };
188 | }
189 |

--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
   1 | 
   2 | 
   3 | 
   4 | 
   5 | 
   6 | 
   7 | import React, { useState, useRef, useCallback, useEffect } from 'react';
   8 | import { Toolbar } from './components/Toolbar';
   9 | import { PromptBar } from './components/PromptBar';
  10 | import { Loader } from './components/Loader';
  11 | import { CanvasSettings } from './components/CanvasSettings';
  12 | import { LayerPanel } from './components/LayerPanel';
  13 | import type { Tool, Point, Element, ImageElement, PathElement, ShapeElement, TextElement, ArrowElement, UserEffect, LineElement, WheelAction, GroupElement, VideoElement } from './types';
  14 | import { editImage, generateImageFromText } from './services/geminiService';
  15 | import { fileToDataUrl } from './utils/fileUtils';
  16 | import { translations } from './translations';
  17 | 
  18 | const generateId = () => `id_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
  19 | 
  20 | const getElementBounds = (element: Element, allElements: Element[] = []): { x: number; y: number; width: number; height: number } => {
  21 |     if (element.type === 'group') {
  22 |         const children = allElements.filter(el => el.parentId === element.id);
  23 |         if (children.length === 0) {
  24 |             return { x: element.x, y: element.y, width: element.width, height: element.height };
  25 |         }
  26 |         let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
  27 |         children.forEach(child => {
  28 |             const bounds = getElementBounds(child, allElements);
  29 |             minX = Math.min(minX, bounds.x);
  30 |             minY = Math.min(minY, bounds.y);
  31 |             maxX = Math.max(maxX, bounds.x + bounds.width);
  32 |             maxY = Math.max(maxY, bounds.y + bounds.height);
  33 |         });
  34 |         return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
  35 |     }
  36 |     if (element.type === 'image' || element.type === 'shape' || element.type === 'text' || element.type === 'video') {
  37 |         return { x: element.x, y: element.y, width: element.width, height: element.height };
  38 |     }
  39 |     if (element.type === 'arrow' || element.type === 'line') {
  40 |         const { points } = element;
  41 |         const minX = Math.min(points[0].x, points[1].x);
  42 |         const maxX = Math.max(points[0].x, points[1].x);
  43 |         const minY = Math.min(points[0].y, points[1].y);
  44 |         const maxY = Math.max(points[0].y, points[1].y);
  45 |         return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
  46 |     }
  47 |     const { points } = element;
  48 |     if (points.length === 0) return { x: 0, y: 0, width: 0, height: 0 };
  49 |     let minX = points[0].x, maxX = points[0].x;
  50 |     let minY = points[0].y, maxY = points[0].y;
  51 |     for (const p of points) {
  52 |         minX = Math.min(minX, p.x);
  53 |         maxX = Math.max(maxX, p.x);
  54 |         minY = Math.min(minY, p.y);
  55 |         maxY = Math.max(maxY, p.y);
  56 |     }
  57 |     return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
  58 | }
  59 | 
  60 | type Rect = { x: number; y: number; width: number; height: number };
  61 | type Guide = { type: 'v' | 'h'; position: number; start: number; end: number };
  62 | const SNAP_THRESHOLD = 5; // pixels in screen space
  63 | 
  64 | // Ray-casting algorithm to check if a point is inside a polygon
  65 | const isPointInPolygon = (point: Point, polygon: Point[]): boolean => {
  66 |     let isInside = false;
  67 |     for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
  68 |         const xi = polygon[i].x, yi = polygon[i].y;
  69 |         const xj = polygon[j].x, yj = polygon[j].y;
  70 |         const intersect = ((yi > point.y) !== (yj > point.y)) &&
  71 |             (point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi);
  72 |         if (intersect) isInside = !isInside;
  73 |     }
  74 |     return isInside;
  75 | };
  76 | 
  77 | // FIX: Updated function signature to exclude VideoElement and added a case for 'group' to make the switch exhaustive, preventing 'never' type errors.
  78 | const rasterizeElement = (element: Exclude<Element, ImageElement | VideoElement>): Promise<{ href: string; mimeType: 'image/png' }> => {
  79 |     return new Promise((resolve, reject) => {
  80 |         const bounds = getElementBounds(element);
  81 |         if (bounds.width <= 0 || bounds.height <= 0) {
  82 |             return reject(new Error('Cannot rasterize an element with zero or negative dimensions.'));
  83 |         }
  84 | 
  85 |         const padding = 10;
  86 |         const svgWidth = bounds.width + padding * 2;
  87 |         const svgHeight = bounds.height + padding * 2;
  88 |         
  89 |         const offsetX = -bounds.x + padding;
  90 |         const offsetY = -bounds.y + padding;
  91 | 
  92 |         let elementSvgString = '';
  93 |         
  94 |         switch (element.type) {
  95 |             case 'path': {
  96 |                 const pointsWithOffset = element.points.map(p => ({ x: p.x + offsetX, y: p.y + offsetY }));
  97 |                 const pathData = pointsWithOffset.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
  98 |                 elementSvgString = `<path d="${pathData}" stroke="${element.strokeColor}" stroke-width="${element.strokeWidth}" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="${element.strokeOpacity || 1}" />`;
  99 |                 break;
 100 |             }
 101 |             case 'shape': {
 102 |                 const shapeProps = `transform="translate(${element.x + offsetX}, ${element.y + offsetY})" fill="${element.fillColor}" stroke="${element.strokeColor}" stroke-width="${element.strokeWidth}"`;
 103 |                 if (element.shapeType === 'rectangle') elementSvgString = `<rect width="${element.width}" height="${element.height}" rx="${element.borderRadius || 0}" ry="${element.borderRadius || 0}" ${shapeProps} />`;
 104 |                 else if (element.shapeType === 'circle') elementSvgString = `<ellipse cx="${element.width/2}" cy="${element.height/2}" rx="${element.width/2}" ry="${element.height/2}" ${shapeProps} />`;
 105 |                 else if (element.shapeType === 'triangle') elementSvgString = `<polygon points="${element.width/2},0 0,${element.height} ${element.width},${element.height}" ${shapeProps} />`;
 106 |                 break;
 107 |             }
 108 |             case 'arrow': {
 109 |                  const [start, end] = element.points;
 110 |                  const angle = Math.atan2(end.y - start.y, end.x - start.x);
 111 |                  const headLength = element.strokeWidth * 4;
 112 | 
 113 |                  const arrowHeadHeight = headLength * Math.cos(Math.PI / 6);
 114 |                  const lineEnd = {
 115 |                      x: end.x - arrowHeadHeight * Math.cos(angle),
 116 |                      y: end.y - arrowHeadHeight * Math.sin(angle),
 117 |                  };
 118 | 
 119 |                  const headPoint1 = { x: end.x - headLength * Math.cos(angle - Math.PI / 6), y: end.y - headLength * Math.sin(angle - Math.PI / 6) };
 120 |                  const headPoint2 = { x: end.x - headLength * Math.cos(angle + Math.PI / 6), y: end.y - headLength * Math.sin(angle + Math.PI / 6) };
 121 |                  elementSvgString = `
 122 |                     <line x1="${start.x + offsetX}" y1="${start.y + offsetY}" x2="${lineEnd.x + offsetX}" y2="${lineEnd.y + offsetY}" stroke="${element.strokeColor}" stroke-width="${element.strokeWidth}" stroke-linecap="round" />
 123 |                     <polygon points="${end.x + offsetX},${end.y + offsetY} ${headPoint1.x + offsetX},${headPoint1.y + offsetY} ${headPoint2.x + offsetX},${headPoint2.y + offsetY}" fill="${element.strokeColor}" />
 124 |                  `;
 125 |                 break;
 126 |             }
 127 |             case 'line': {
 128 |                  const [start, end] = element.points;
 129 |                  elementSvgString = `<line x1="${start.x + offsetX}" y1="${start.y + offsetY}" x2="${end.x + offsetX}" y2="${end.y + offsetY}" stroke="${element.strokeColor}" stroke-width="${element.strokeWidth}" stroke-linecap="round" />`;
 130 |                 break;
 131 |             }
 132 |             case 'text': {
 133 |                  elementSvgString = `
 134 |                     <foreignObject x="${offsetX}" y="${offsetY}" width="${element.width}" height="${element.height}">
 135 |                         <div xmlns="http://www.w3.org/1999/xhtml" style="font-size: ${element.fontSize}px; color: ${element.fontColor}; width: 100%; height: 100%; word-break: break-word; font-family: sans-serif; padding:0; margin:0; line-height: 1.2;">
 136 |                             ${element.text.replace(/\n/g, '<br />')}
 137 |                         </div>
 138 |                     </foreignObject>
 139 |                  `;
 140 |                  // Note: Text is rasterized from its top-left corner (x,y), not the bounds' corner
 141 |                  elementSvgString = elementSvgString.replace(`x="${offsetX}"`, `x="${element.x + offsetX}"`).replace(`y="${offsetY}"`, `y="${element.y + offsetY}"`);
 142 |                 break;
 143 |             }
 144 |             // FIX: Added handling for 'group' element type. A group is a container and has no visual representation, so it produces an empty SVG string.
 145 |             case 'group': {
 146 |                 elementSvgString = '';
 147 |                 break;
 148 |             }
 149 |         }
 150 | 
 151 |         const fullSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${svgWidth}" height="${svgHeight}">${elementSvgString}</svg>`;
 152 |         
 153 |         const img = new Image();
 154 |         img.crossOrigin = "anonymous";
 155 |         // Use btoa for Base64 encoding. Handle potential special characters in SVG string to prevent errors.
 156 |         const svgDataUrl = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(fullSvg)))}`;
 157 | 
 158 |         img.onload = () => {
 159 |             const canvas = document.createElement('canvas');
 160 |             canvas.width = svgWidth;
 161 |             canvas.height = svgHeight;
 162 |             const ctx = canvas.getContext('2d');
 163 |             if (ctx) {
 164 |                 ctx.drawImage(img, 0, 0);
 165 |                 resolve({ href: canvas.toDataURL('image/png'), mimeType: 'image/png' });
 166 |             } else {
 167 |                 reject(new Error('Could not get canvas context.'));
 168 |             }
 169 |         };
 170 |         img.onerror = (err) => {
 171 |             reject(new Error(`Failed to load SVG into image: ${err}`));
 172 |         };
 173 |         img.src = svgDataUrl;
 174 |     });
 175 | };
 176 | 
 177 | // FIX: Updated function signature to exclude VideoElement and added a case for 'group' to make the switch exhaustive.
 178 | const rasterizeElements = (elementsToRasterize: Exclude<Element, ImageElement | VideoElement>[]): Promise<{ href: string; mimeType: 'image/png', width: number, height: number }> => {
 179 |     return new Promise((resolve, reject) => {
 180 |         if (elementsToRasterize.length === 0) {
 181 |             return reject(new Error("No elements to rasterize."));
 182 |         }
 183 | 
 184 |         let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
 185 |         elementsToRasterize.forEach(element => {
 186 |             const bounds = getElementBounds(element);
 187 |             minX = Math.min(minX, bounds.x);
 188 |             minY = Math.min(minY, bounds.y);
 189 |             maxX = Math.max(maxX, bounds.x + bounds.width);
 190 |             maxY = Math.max(maxY, bounds.y + bounds.height);
 191 |         });
 192 | 
 193 |         const combinedWidth = maxX - minX;
 194 |         const combinedHeight = maxY - minY;
 195 | 
 196 |         if (combinedWidth <= 0 || combinedHeight <= 0) {
 197 |             return reject(new Error('Cannot rasterize elements with zero or negative dimensions.'));
 198 |         }
 199 | 
 200 |         const padding = 10;
 201 |         const svgWidth = combinedWidth + padding * 2;
 202 |         const svgHeight = combinedHeight + padding * 2;
 203 |         
 204 |         const elementSvgStrings = elementsToRasterize.map(element => {
 205 |             const offsetX = -minX + padding;
 206 |             const offsetY = -minY + padding;
 207 | 
 208 |             let elementSvgString = '';
 209 |             switch (element.type) {
 210 |                  case 'path': {
 211 |                     const pointsWithOffset = element.points.map(p => ({ x: p.x + offsetX, y: p.y + offsetY }));
 212 |                     const pathData = pointsWithOffset.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');
 213 |                     elementSvgString = `<path d="${pathData}" stroke="${element.strokeColor}" stroke-width="${element.strokeWidth}" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="${element.strokeOpacity || 1}" />`;
 214 |                     break;
 215 |                  }
 216 |                 case 'shape': {
 217 |                     const shapeProps = `transform="translate(${element.x + offsetX}, ${element.y + offsetY})" fill="${element.fillColor}" stroke="${element.strokeColor}" stroke-width="${element.strokeWidth}"`;
 218 |                     if (element.shapeType === 'rectangle') elementSvgString = `<rect width="${element.width}" height="${element.height}" rx="${element.borderRadius || 0}" ry="${element.borderRadius || 0}" ${shapeProps} />`;
 219 |                     else if (element.shapeType === 'circle') elementSvgString = `<ellipse cx="${element.width/2}" cy="${element.height/2}" rx="${element.width/2}" ry="${element.height/2}" ${shapeProps} />`;
 220 |                     else if (element.shapeType === 'triangle') elementSvgString = `<polygon points="${element.width/2},0 0,${element.height} ${element.width},${element.height}" ${shapeProps} />`;
 221 |                     break;
 222 |                 }
 223 |                 case 'arrow': {
 224 |                      const [start, end] = element.points;
 225 |                      const angle = Math.atan2(end.y - start.y, end.x - start.x);
 226 |                      const headLength = element.strokeWidth * 4;
 227 | 
 228 |                      const arrowHeadHeight = headLength * Math.cos(Math.PI / 6);
 229 |                      const lineEnd = {
 230 |                         x: end.x - arrowHeadHeight * Math.cos(angle),
 231 |                         y: end.y - arrowHeadHeight * Math.sin(angle),
 232 |                      };
 233 | 
 234 |                      const headPoint1 = { x: end.x - headLength * Math.cos(angle - Math.PI / 6), y: end.y - headLength * Math.sin(angle - Math.PI / 6) };
 235 |                      const headPoint2 = { x: end.x - headLength * Math.cos(angle + Math.PI / 6), y: end.y - headLength * Math.sin(angle + Math.PI / 6) };
 236 |                      elementSvgString = `
 237 |                         <line x1="${start.x + offsetX}" y1="${start.y + offsetY}" x2="${lineEnd.x + offsetX}" y2="${lineEnd.y + offsetY}" stroke="${element.strokeColor}" stroke-width="${element.strokeWidth}" stroke-linecap="round" />
 238 |                         <polygon points="${end.x + offsetX},${end.y + offsetY} ${headPoint1.x + offsetX},${headPoint1.y + offsetY} ${headPoint2.x + offsetX},${headPoint2.y + offsetY}" fill="${element.strokeColor}" />
 239 |                      `;
 240 |                     break;
 241 |                 }
 242 |                  case 'line': {
 243 |                      const [start, end] = element.points;
 244 |                      elementSvgString = `<line x1="${start.x + offsetX}" y1="${start.y + offsetY}" x2="${end.x + offsetX}" y2="${end.y + offsetY}" stroke="${element.strokeColor}" stroke-width="${element.strokeWidth}" stroke-linecap="round" />`;
 245 |                     break;
 246 |                  }
 247 |                 case 'text': {
 248 |                      elementSvgString = `
 249 |                         <foreignObject x="${element.x + offsetX}" y="${element.y + offsetY}" width="${element.width}" height="${element.height}">
 250 |                             <div xmlns="http://www.w3.org/1999/xhtml" style="font-size: ${element.fontSize}px; color: ${element.fontColor}; width: 100%; height: 100%; word-break: break-word; font-family: sans-serif; padding:0; margin:0; line-height: 1.2;">
 251 |                                 ${element.text.replace(/\n/g, '<br />')}
 252 |                             </div>
 253 |                         </foreignObject>
 254 |                      `;
 255 |                     break;
 256 |                 }
 257 |                 // FIX: Added handling for 'group' element type. A group is a container and has no visual representation, so it produces an empty SVG string.
 258 |                 case 'group': {
 259 |                     elementSvgString = '';
 260 |                     break;
 261 |                 }
 262 |             }
 263 |             return elementSvgString;
 264 |         }).join('');
 265 | 
 266 |         const fullSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${svgWidth}" height="${svgHeight}">${elementSvgStrings}</svg>`;
 267 |         
 268 |         const img = new Image();
 269 |         img.crossOrigin = "anonymous";
 270 |         const svgDataUrl = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(fullSvg)))}`;
 271 | 
 272 |         img.onload = () => {
 273 |             const canvas = document.createElement('canvas');
 274 |             canvas.width = svgWidth;
 275 |             canvas.height = svgHeight;
 276 |             const ctx = canvas.getContext('2d');
 277 |             if (ctx) {
 278 |                 ctx.drawImage(img, 0, 0);
 279 |                 resolve({ 
 280 |                     href: canvas.toDataURL('image/png'), 
 281 |                     mimeType: 'image/png',
 282 |                     width: svgWidth,
 283 |                     height: svgHeight
 284 |                 });
 285 |             } else {
 286 |                 reject(new Error('Could not get canvas context.'));
 287 |             }
 288 |         };
 289 |         img.onerror = (err) => {
 290 |             reject(new Error(`Failed to load SVG into image: ${err}`));
 291 |         };
 292 |         img.src = svgDataUrl;
 293 |     });
 294 | };
 295 | 
 296 | const rasterizeMask = (
 297 |     maskPaths: PathElement[],
 298 |     baseImage: ImageElement
 299 | ): Promise<{ href: string; mimeType: 'image/png' }> => {
 300 |     return new Promise((resolve, reject) => {
 301 |         const { width, height, x: imageX, y: imageY } = baseImage;
 302 |         if (width <= 0 || height <= 0) {
 303 |             return reject(new Error('Base image has invalid dimensions.'));
 304 |         }
 305 | 
 306 |         const canvas = document.createElement('canvas');
 307 |         canvas.width = width;
 308 |         canvas.height = height;
 309 |         const ctx = canvas.getContext('2d');
 310 |         if (!ctx) {
 311 |             return reject(new Error('Could not get canvas context for mask.'));
 312 |         }
 313 | 
 314 |         // Black background for areas to be kept
 315 |         ctx.fillStyle = 'black';
 316 |         ctx.fillRect(0, 0, width, height);
 317 | 
 318 |         // White for areas to be inpainted
 319 |         ctx.strokeStyle = 'white';
 320 |         ctx.fillStyle = 'white';
 321 |         ctx.lineCap = 'round';
 322 |         ctx.lineJoin = 'round';
 323 | 
 324 |         maskPaths.forEach(path => {
 325 |             ctx.lineWidth = path.strokeWidth;
 326 |             ctx.beginPath();
 327 |             
 328 |             if (path.points.length === 1) {
 329 |                 const point = path.points[0];
 330 |                 ctx.arc(point.x - imageX, point.y - imageY, path.strokeWidth / 2, 0, 2 * Math.PI);
 331 |                 ctx.fill();
 332 |             } else if (path.points.length > 1) {
 333 |                 const startPoint = path.points[0];
 334 |                 ctx.moveTo(startPoint.x - imageX, startPoint.y - imageY);
 335 |                 for (let i = 1; i < path.points.length; i++) {
 336 |                     const point = path.points[i];
 337 |                     ctx.lineTo(point.x - imageX, point.y - imageY);
 338 |                 }
 339 |                 ctx.stroke();
 340 |             }
 341 |         });
 342 | 
 343 |         resolve({ href: canvas.toDataURL('image/png'), mimeType: 'image/png' });
 344 |     });
 345 | };
 346 | 
 347 | 
 348 | const App: React.FC = () => {
 349 |     const [history, setHistory] = useState<Element[][]>([[]]);
 350 |     const [historyIndex, setHistoryIndex] = useState(0);
 351 |     const elements = history[historyIndex];
 352 | 
 353 |     const [activeTool, setActiveTool] = useState<Tool>('select');
 354 |     const [panOffset, setPanOffset] = useState<Point>({ x: 0, y: 0 });
 355 |     const [zoom, setZoom] = useState(1);
 356 |     const [drawingOptions, setDrawingOptions] = useState({ strokeColor: '#FFFFFF', strokeWidth: 5 });
 357 |     const [selectedElementIds, setSelectedElementIds] = useState<string[]>([]);
 358 |     const [selectionBox, setSelectionBox] = useState<Rect | null>(null);
 359 |     const [prompt, setPrompt] = useState('');
 360 |     const [isLoading, setIsLoading] = useState(false);
 361 |     const [error, setError] = useState<string | null>(null);
 362 |     const [isSettingsPanelOpen, setIsSettingsPanelOpen] = useState(false);
 363 |     const [isLayerPanelOpen, setIsLayerPanelOpen] = useState(false);
 364 |     const [canvasBackgroundColor, setCanvasBackgroundColor] = useState<string>('#111827');
 365 |     const [wheelAction, setWheelAction] = useState<WheelAction>('zoom');
 366 |     const [croppingState, setCroppingState] = useState<{ elementId: string; originalElement: ImageElement; cropBox: Rect } | null>(null);
 367 |     const [alignmentGuides, setAlignmentGuides] = useState<Guide[]>([]);
 368 |     const [contextMenu, setContextMenu] = useState<{ x: number; y: number; elementId: string | null } | null>(null);
 369 |     const [editingElement, setEditingElement] = useState<{ id: string; text: string; } | null>(null);
 370 |     const [lassoPath, setLassoPath] = useState<Point[] | null>(null);
 371 | 
 372 |     const [language, setLanguage] = useState<'en' | 'zho'>('en');
 373 |     const [uiTheme, setUiTheme] = useState({ color: '#171717', opacity: 0.7 });
 374 |     
 375 |     const [userEffects, setUserEffects] = useState<UserEffect[]>(() => {
 376 |         try {
 377 |             const saved = localStorage.getItem('userEffects');
 378 |             return saved ? JSON.parse(saved) : [];
 379 |         } catch (error) {
 380 |             console.error("Failed to parse user effects from localStorage", error);
 381 |             return [];
 382 |         }
 383 |     });
 384 | 
 385 |     const interactionMode = useRef<string | null>(null);
 386 |     const startPoint = useRef<Point>({ x: 0, y: 0 });
 387 |     const currentDrawingElementId = useRef<string | null>(null);
 388 |     const resizeStartInfo = useRef<{ originalElement: ImageElement | ShapeElement | TextElement | VideoElement; startCanvasPoint: Point; handle: string; shiftKey: boolean } | null>(null);
 389 |     const cropStartInfo = useRef<{ originalCropBox: Rect, startCanvasPoint: Point } | null>(null);
 390 |     const dragStartElementPositions = useRef<Map<string, {x: number, y: number} | Point[]>>(new Map());
 391 |     const elementsRef = useRef(elements);
 392 |     const svgRef = useRef<SVGSVGElement>(null);
 393 |     const editingTextareaRef = useRef<HTMLTextAreaElement>(null);
 394 |     const previousToolRef = useRef<Tool>('select');
 395 |     const spacebarDownTime = useRef<number | null>(null);
 396 |     elementsRef.current = elements;
 397 |     
 398 |     useEffect(() => {
 399 |         try {
 400 |             localStorage.setItem('userEffects', JSON.stringify(userEffects));
 401 |         } catch (error) {
 402 |             console.error("Failed to save user effects to localStorage", error);
 403 |         }
 404 |     }, [userEffects]);
 405 | 
 406 |     const handleAddUserEffect = useCallback((effect: UserEffect) => {
 407 |         setUserEffects(prev => [...prev, effect]);
 408 |     }, []);
 409 | 
 410 |     const handleDeleteUserEffect = useCallback((id: string) => {
 411 |         setUserEffects(prev => prev.filter(effect => effect.id !== id));
 412 |     }, []);
 413 | 
 414 |     const t = useCallback((key: string, ...args: any[]): any => {
 415 |         const keys = key.split('.');
 416 |         let result: any = translations[language];
 417 |         for (const k of keys) {
 418 |             result = result?.[k];
 419 |         }
 420 |         if (typeof result === 'function') {
 421 |             return result(...args);
 422 |         }
 423 |         return result || key;
 424 |     }, [language]);
 425 | 
 426 |     useEffect(() => {
 427 |         const root = document.documentElement;
 428 |         const hex = uiTheme.color.replace('#', '');
 429 |         const r = parseInt(hex.substring(0, 2), 16);
 430 |         const g = parseInt(hex.substring(2, 4), 16);
 431 |         const b = parseInt(hex.substring(4, 6), 16);
 432 |         root.style.setProperty('--ui-bg-color', `rgba(${r}, ${g}, ${b}, ${uiTheme.opacity})`);
 433 |     }, [uiTheme]);
 434 | 
 435 |     const setElements = (updater: (prev: Element[]) => Element[], commit: boolean = true) => {
 436 |         const newElements = updater(elementsRef.current);
 437 |         if (commit) {
 438 |             const newHistory = [...history.slice(0, historyIndex + 1), newElements];
 439 |             setHistory(newHistory);
 440 |             setHistoryIndex(newHistory.length - 1);
 441 |         } else {
 442 |              const tempHistory = [...history];
 443 |              tempHistory[historyIndex] = newElements;
 444 |              setHistory(tempHistory);
 445 |         }
 446 |     };
 447 |     
 448 |     const commitAction = useCallback((updater: (prev: Element[]) => Element[]) => {
 449 |         const newElements = updater(elementsRef.current);
 450 |         const newHistory = [...history.slice(0, historyIndex + 1), newElements];
 451 |         setHistory(newHistory);
 452 |         setHistoryIndex(newHistory.length - 1);
 453 |     }, [history, historyIndex]);
 454 | 
 455 | // FIX: Added missing handleStopEditing function definition.
 456 |     const handleStopEditing = useCallback(() => {
 457 |         if (!editingElement) return;
 458 |         commitAction(prev => prev.map(el =>
 459 |             el.id === editingElement.id && el.type === 'text'
 460 |                 ? { ...el, text: editingElement.text }
 461 |                 // Persist auto-height change on blur
 462 |                 : el.id === editingElement.id && el.type === 'text' && editingTextareaRef.current ? { ...el, text: editingElement.text, height: editingTextareaRef.current.scrollHeight }
 463 |                 : el
 464 |         ));
 465 |         setEditingElement(null);
 466 |     }, [commitAction, editingElement]);
 467 | 
 468 |     const handleUndo = useCallback(() => {
 469 |         if (historyIndex > 0) {
 470 |             setHistoryIndex(historyIndex - 1);
 471 |         }
 472 |     }, [historyIndex]);
 473 | 
 474 |     const handleRedo = useCallback(() => {
 475 |         if (historyIndex < history.length - 1) {
 476 |             setHistoryIndex(historyIndex + 1);
 477 |         }
 478 |     }, [historyIndex, history.length]);
 479 | 
 480 |     const getDescendants = useCallback((elementId: string, allElements: Element[]): Element[] => {
 481 |         const descendants: Element[] = [];
 482 |         const children = allElements.filter(el => el.parentId === elementId);
 483 |         for (const child of children) {
 484 |             descendants.push(child);
 485 |             if (child.type === 'group') {
 486 |                 descendants.push(...getDescendants(child.id, allElements));
 487 |             }
 488 |         }
 489 |         return descendants;
 490 |     }, []);
 491 | 
 492 |     useEffect(() => {
 493 |         const handleKeyDown = (e: KeyboardEvent) => {
 494 |             if (editingElement) {
 495 |                 if(e.key === 'Escape') handleStopEditing();
 496 |                 return;
 497 |             }
 498 | 
 499 |             const target = e.target as HTMLElement;
 500 |             const isTyping = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
 501 | 
 502 |             if ((e.ctrlKey || e.metaKey) && e.key === 'z') { e.preventDefault(); handleUndo(); return; }
 503 |             if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.shiftKey && e.key === 'z'))) { e.preventDefault(); handleRedo(); return; }
 504 |             
 505 |             if (!isTyping && (e.key === 'Delete' || e.key === 'Backspace') && selectedElementIds.length > 0) {
 506 |                 e.preventDefault();
 507 |                 commitAction(prev => {
 508 |                     const idsToDelete = new Set(selectedElementIds);
 509 |                     selectedElementIds.forEach(id => {
 510 |                         getDescendants(id, prev).forEach(desc => idsToDelete.add(desc.id));
 511 |                     });
 512 |                     return prev.filter(el => !idsToDelete.has(el.id));
 513 |                 });
 514 |                 setSelectedElementIds([]);
 515 |                 return;
 516 |             }
 517 | 
 518 |             if (e.key === ' ' && !isTyping) {
 519 |                 e.preventDefault();
 520 |                 if (spacebarDownTime.current === null) {
 521 |                     spacebarDownTime.current = Date.now();
 522 |                     previousToolRef.current = activeTool;
 523 |                     setActiveTool('pan');
 524 |                 }
 525 |             }
 526 |         };
 527 | 
 528 |         const handleKeyUp = (e: KeyboardEvent) => {
 529 |             if (e.key === ' ' && !editingElement) {
 530 |                 const target = e.target as HTMLElement;
 531 |                 const isTyping = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
 532 |                 if (isTyping || spacebarDownTime.current === null) return;
 533 |                 
 534 |                 e.preventDefault();
 535 | 
 536 |                 const duration = Date.now() - spacebarDownTime.current;
 537 |                 spacebarDownTime.current = null;
 538 |                 
 539 |                 const toolBeforePan = previousToolRef.current;
 540 | 
 541 |                 if (duration < 200) { // Tap
 542 |                     if (toolBeforePan === 'pan') {
 543 |                         setActiveTool('select');
 544 |                     } else if (toolBeforePan === 'select') {
 545 |                         setActiveTool('pan');
 546 |                     } else {
 547 |                         setActiveTool('select');
 548 |                     }
 549 |                 } else { // Hold
 550 |                     setActiveTool(toolBeforePan);
 551 |                 }
 552 |             }
 553 |         };
 554 | 
 555 | 
 556 |         window.addEventListener('keydown', handleKeyDown);
 557 |         window.addEventListener('keyup', handleKeyUp);
 558 |         return () => {
 559 |             window.removeEventListener('keydown', handleKeyDown);
 560 |             window.removeEventListener('keyup', handleKeyUp);
 561 |         };
 562 |     }, [handleUndo, handleRedo, selectedElementIds, editingElement, activeTool, commitAction, getDescendants, handleStopEditing]);
 563 |     
 564 |     const getCanvasPoint = useCallback((screenX: number, screenY: number): Point => {
 565 |         if (!svgRef.current) return { x: 0, y: 0 };
 566 |         const svgBounds = svgRef.current.getBoundingClientRect();
 567 |         const xOnSvg = screenX - svgBounds.left;
 568 |         const yOnSvg = screenY - svgBounds.top;
 569 |         
 570 |         return {
 571 |             x: (xOnSvg - panOffset.x) / zoom,
 572 |             y: (yOnSvg - panOffset.y) / zoom,
 573 |         };
 574 |     }, [panOffset, zoom]);
 575 | 
 576 |     const handleAddImageElement = useCallback(async (file: File) => {
 577 |         if (!file.type.startsWith('image/')) {
 578 |             setError('Only image files are supported.');
 579 |             return;
 580 |         }
 581 |         setError(null);
 582 |         try {
 583 |             const { dataUrl, mimeType } = await fileToDataUrl(file);
 584 |             const img = new Image();
 585 |             img.onload = () => {
 586 |                 if (!svgRef.current) return;
 587 |                 const svgBounds = svgRef.current.getBoundingClientRect();
 588 |                 const screenCenter = { x: svgBounds.left + svgBounds.width / 2, y: svgBounds.top + svgBounds.height / 2 };
 589 |                 const canvasPoint = getCanvasPoint(screenCenter.x, screenCenter.y);
 590 | 
 591 |                 const newImage: ImageElement = {
 592 |                     id: generateId(),
 593 |                     type: 'image',
 594 |                     name: file.name,
 595 |                     x: canvasPoint.x - (img.width / 2),
 596 |                     y: canvasPoint.y - (img.height / 2),
 597 |                     width: img.width,
 598 |                     height: img.height,
 599 |                     href: dataUrl,
 600 |                     mimeType: mimeType,
 601 |                 };
 602 |                 setElements(prev => [...prev, newImage]);
 603 |                 setSelectedElementIds([newImage.id]);
 604 |                 setActiveTool('select');
 605 |             };
 606 |             img.src = dataUrl;
 607 |         } catch (err) {
 608 |             setError('Failed to load image.');
 609 |             console.error(err);
 610 |         }
 611 |     }, [getCanvasPoint]);
 612 | 
 613 |      const getSelectableElement = (elementId: string, allElements: Element[]): Element | null => {
 614 |         const element = allElements.find(el => el.id === elementId);
 615 |         if (!element) return null;
 616 |         if (element.isLocked) return null;
 617 | 
 618 |         let current = element;
 619 |         while (current.parentId) {
 620 |             const parent = allElements.find(el => el.id === current.parentId);
 621 |             if (!parent) return current; // Orphaned, treat as top-level
 622 |             if (parent.isLocked) return null; // Parent is locked, nothing inside is selectable
 623 |             current = parent;
 624 |         }
 625 |         return current;
 626 |     };
 627 |     
 628 |     const handleMouseDown = (e: React.MouseEvent<SVGSVGElement>) => {
 629 |         if (editingElement) return;
 630 |         if (contextMenu) setContextMenu(null);
 631 | 
 632 |         if (e.button === 1) { // Middle mouse button for panning
 633 |             interactionMode.current = 'pan';
 634 |             startPoint.current = { x: e.clientX, y: e.clientY };
 635 |             e.preventDefault();
 636 |             return;
 637 |         }
 638 | 
 639 |         startPoint.current = { x: e.clientX, y: e.clientY };
 640 |         const canvasStartPoint = getCanvasPoint(e.clientX, e.clientY);
 641 | 
 642 |         const target = e.target as SVGElement;
 643 |         const handleName = target.getAttribute('data-handle');
 644 | 
 645 |         if (croppingState) {
 646 |              if (handleName) {
 647 |                  interactionMode.current = `crop-${handleName}`;
 648 |                  cropStartInfo.current = { originalCropBox: { ...croppingState.cropBox }, startCanvasPoint: canvasStartPoint };
 649 |              }
 650 |              return;
 651 |         }
 652 |          if (activeTool === 'text') {
 653 |             const newText: TextElement = {
 654 |                 id: generateId(), type: 'text', name: 'Text',
 655 |                 x: canvasStartPoint.x, y: canvasStartPoint.y,
 656 |                 width: 150, height: 40,
 657 |                 text: "Text", fontSize: 24, fontColor: drawingOptions.strokeColor
 658 |             };
 659 |             setElements(prev => [...prev, newText]);
 660 |             setSelectedElementIds([newText.id]);
 661 |             setEditingElement({ id: newText.id, text: newText.text });
 662 |             setActiveTool('select');
 663 |             return;
 664 |         }
 665 | 
 666 |         if (activeTool === 'pan') {
 667 |             interactionMode.current = 'pan';
 668 |             return;
 669 |         }
 670 |         
 671 |         if (handleName && activeTool === 'select' && selectedElementIds.length === 1) {
 672 |             interactionMode.current = `resize-${handleName}`;
 673 |             const element = elements.find(el => el.id === selectedElementIds[0]) as ImageElement | ShapeElement | TextElement | VideoElement;
 674 |             resizeStartInfo.current = {
 675 |                 originalElement: { ...element },
 676 |                 startCanvasPoint: canvasStartPoint,
 677 |                 handle: handleName,
 678 |                 shiftKey: e.shiftKey,
 679 |             };
 680 |             return;
 681 |         }
 682 | 
 683 |         if (activeTool === 'draw' || activeTool === 'highlighter') {
 684 |             interactionMode.current = 'draw';
 685 |             const newPath: PathElement = {
 686 |                 id: generateId(),
 687 |                 type: 'path', name: 'Path',
 688 |                 points: [canvasStartPoint],
 689 |                 strokeColor: drawingOptions.strokeColor,
 690 |                 strokeWidth: drawingOptions.strokeWidth,
 691 |                 strokeOpacity: activeTool === 'highlighter' ? 0.5 : 1,
 692 |                 x: 0, y: 0 
 693 |             };
 694 |             currentDrawingElementId.current = newPath.id;
 695 |             setElements(prev => [...prev, newPath], false);
 696 |         } else if (activeTool === 'rectangle' || activeTool === 'circle' || activeTool === 'triangle') {
 697 |             interactionMode.current = 'drawShape';
 698 |             const newShape: ShapeElement = {
 699 |                 id: generateId(),
 700 |                 type: 'shape', name: activeTool.charAt(0).toUpperCase() + activeTool.slice(1),
 701 |                 shapeType: activeTool,
 702 |                 x: canvasStartPoint.x,
 703 |                 y: canvasStartPoint.y,
 704 |                 width: 0,
 705 |                 height: 0,
 706 |                 strokeColor: drawingOptions.strokeColor,
 707 |                 strokeWidth: drawingOptions.strokeWidth,
 708 |                 fillColor: 'transparent',
 709 |             }
 710 |             currentDrawingElementId.current = newShape.id;
 711 |             setElements(prev => [...prev, newShape], false);
 712 |         } else if (activeTool === 'arrow') {
 713 |             interactionMode.current = 'drawArrow';
 714 |             const newArrow: ArrowElement = {
 715 |                 id: generateId(), type: 'arrow', name: 'Arrow',
 716 |                 x: canvasStartPoint.x, y: canvasStartPoint.y,
 717 |                 points: [canvasStartPoint, canvasStartPoint],
 718 |                 strokeColor: drawingOptions.strokeColor, strokeWidth: drawingOptions.strokeWidth
 719 |             };
 720 |             currentDrawingElementId.current = newArrow.id;
 721 |             setElements(prev => [...prev, newArrow], false);
 722 |         } else if (activeTool === 'line') {
 723 |             interactionMode.current = 'drawLine';
 724 |             const newLine: LineElement = {
 725 |                 id: generateId(), type: 'line', name: 'Line',
 726 |                 x: canvasStartPoint.x, y: canvasStartPoint.y,
 727 |                 points: [canvasStartPoint, canvasStartPoint],
 728 |                 strokeColor: drawingOptions.strokeColor, strokeWidth: drawingOptions.strokeWidth
 729 |             };
 730 |             currentDrawingElementId.current = newLine.id;
 731 |             setElements(prev => [...prev, newLine], false);
 732 |         } else if (activeTool === 'erase') {
 733 |             interactionMode.current = 'erase';
 734 |         } else if (activeTool === 'lasso') {
 735 |             interactionMode.current = 'lasso';
 736 |             setLassoPath([canvasStartPoint]);
 737 |         } else if (activeTool === 'select') {
 738 |             const clickedElementId = target.closest('[data-id]')?.getAttribute('data-id');
 739 |             const selectableElement = clickedElementId ? getSelectableElement(clickedElementId, elementsRef.current) : null;
 740 |             const selectableElementId = selectableElement?.id;
 741 | 
 742 |             if (selectableElementId) {
 743 |                 if (e.detail === 2 && elements.find(el => el.id === selectableElementId)?.type === 'text') {
 744 |                      const textEl = elements.find(el => el.id === selectableElementId) as TextElement;
 745 |                      setEditingElement({ id: textEl.id, text: textEl.text });
 746 |                      return;
 747 |                 }
 748 |                 if (!e.shiftKey && !selectedElementIds.includes(selectableElementId)) {
 749 |                      setSelectedElementIds([selectableElementId]);
 750 |                 } else if (e.shiftKey) {
 751 |                     setSelectedElementIds(prev => 
 752 |                         prev.includes(selectableElementId) ? prev.filter(id => id !== selectableElementId) : [...prev, selectableElementId]
 753 |                     );
 754 |                 }
 755 |                 interactionMode.current = 'dragElements';
 756 |                 const idsToDrag = new Set<string>();
 757 |                  if (selectableElement.type === 'group') {
 758 |                     idsToDrag.add(selectableElement.id);
 759 |                     getDescendants(selectableElement.id, elementsRef.current).forEach(desc => idsToDrag.add(desc.id));
 760 |                 } else {
 761 |                     idsToDrag.add(selectableElement.id);
 762 |                 }
 763 | 
 764 |                  const initialPositions = new Map<string, {x: number, y: number} | Point[]>();
 765 |                 elementsRef.current.forEach(el => {
 766 |                     if (idsToDrag.has(el.id)) {
 767 |                          if (el.type !== 'path' && el.type !== 'arrow' && el.type !== 'line') {
 768 |                             initialPositions.set(el.id, { x: el.x, y: el.y });
 769 |                         } else {
 770 |                             initialPositions.set(el.id, el.points);
 771 |                         }
 772 |                     }
 773 |                 });
 774 |                 dragStartElementPositions.current = initialPositions;
 775 | 
 776 |             } else {
 777 |                 setSelectedElementIds([]);
 778 |                 interactionMode.current = 'selectBox';
 779 |                 setSelectionBox({ x: canvasStartPoint.x, y: canvasStartPoint.y, width: 0, height: 0 });
 780 |             }
 781 |         }
 782 |     };
 783 | 
 784 |     const handleMouseMove = (e: React.MouseEvent<SVGSVGElement>) => {
 785 |         if (!interactionMode.current) return;
 786 |         const point = getCanvasPoint(e.clientX, e.clientY);
 787 |         const startCanvasPoint = getCanvasPoint(startPoint.current.x, startPoint.current.y);
 788 | 
 789 |         if (interactionMode.current === 'erase') {
 790 |             const eraseRadius = drawingOptions.strokeWidth / zoom;
 791 |             const idsToDelete = new Set<string>();
 792 | 
 793 |             elements.forEach(el => {
 794 |                 if (el.type === 'path') {
 795 |                     for (let i = 0; i < el.points.length - 1; i++) {
 796 |                         const distance = Math.hypot(point.x - el.points[i].x, point.y - el.points[i].y);
 797 |                         if (distance < eraseRadius) {
 798 |                             idsToDelete.add(el.id);
 799 |                             return;
 800 |                         }
 801 |                     }
 802 |                 }
 803 |             });
 804 | 
 805 |             if (idsToDelete.size > 0) {
 806 |                 setElements(prev => prev.filter(el => !idsToDelete.has(el.id)), false);
 807 |             }
 808 |             return;
 809 |         }
 810 | 
 811 |         if (interactionMode.current.startsWith('resize-')) {
 812 |             if (!resizeStartInfo.current) return;
 813 |             const { originalElement, handle, startCanvasPoint: resizeStartPoint, shiftKey } = resizeStartInfo.current;
 814 |             let { x, y, width, height } = originalElement;
 815 |             const aspectRatio = originalElement.width / originalElement.height;
 816 |             const dx = point.x - resizeStartPoint.x;
 817 |             const dy = point.y - resizeStartPoint.y;
 818 | 
 819 |             if (handle.includes('r')) { width = originalElement.width + dx; }
 820 |             if (handle.includes('l')) { width = originalElement.width - dx; x = originalElement.x + dx; }
 821 |             if (handle.includes('b')) { height = originalElement.height + dy; }
 822 |             if (handle.includes('t')) { height = originalElement.height - dy; y = originalElement.y + dy; }
 823 | 
 824 |             if (originalElement.type !== 'text' && !shiftKey) {
 825 |                 if (handle.includes('r') || handle.includes('l')) {
 826 |                     height = width / aspectRatio;
 827 |                     if (handle.includes('t')) y = (originalElement.y + originalElement.height) - height;
 828 |                 } else {
 829 |                     width = height * aspectRatio;
 830 |                     if (handle.includes('l')) x = (originalElement.x + originalElement.width) - width;
 831 |                 }
 832 |             }
 833 | 
 834 |             if (width < 1) { width = 1; x = originalElement.x + originalElement.width - 1; }
 835 |             if (height < 1) { height = 1; y = originalElement.y + originalElement.height - 1; }
 836 | 
 837 |             setElements(prev => prev.map(el =>
 838 |                 el.id === originalElement.id ? { ...el, x, y, width, height } : el
 839 |             ), false);
 840 |             return;
 841 |         }
 842 | 
 843 |         if (interactionMode.current.startsWith('crop-')) {
 844 |             if (!croppingState || !cropStartInfo.current) return;
 845 |             const handle = interactionMode.current.split('-')[1];
 846 |             const { originalCropBox, startCanvasPoint: cropStartPoint } = cropStartInfo.current;
 847 |             let { x, y, width, height } = { ...originalCropBox };
 848 |             const { originalElement } = croppingState;
 849 |             const dx = point.x - cropStartPoint.x;
 850 |             const dy = point.y - cropStartPoint.y;
 851 | 
 852 |             if (handle.includes('r')) { width = originalCropBox.width + dx; }
 853 |             if (handle.includes('l')) { width = originalCropBox.width - dx; x = originalCropBox.x + dx; }
 854 |             if (handle.includes('b')) { height = originalCropBox.height + dy; }
 855 |             if (handle.includes('t')) { height = originalCropBox.height - dy; y = originalCropBox.y + dy; }
 856 |             
 857 |             if (x < originalElement.x) {
 858 |                 width += x - originalElement.x;
 859 |                 x = originalElement.x;
 860 |             }
 861 |             if (y < originalElement.y) {
 862 |                 height += y - originalElement.y;
 863 |                 y = originalElement.y;
 864 |             }
 865 |             if (x + width > originalElement.x + originalElement.width) {
 866 |                 width = originalElement.x + originalElement.width - x;
 867 |             }
 868 |             if (y + height > originalElement.y + originalElement.height) {
 869 |                 height = originalElement.y + originalElement.height - y;
 870 |             }
 871 | 
 872 |             if (width < 1) {
 873 |                 width = 1;
 874 |                 if (handle.includes('l')) { x = originalCropBox.x + originalCropBox.width - 1; }
 875 |             }
 876 |             if (height < 1) {
 877 |                 height = 1;
 878 |                 if (handle.includes('t')) { y = originalCropBox.y + originalCropBox.height - 1; }
 879 |             }
 880 | 
 881 |             setCroppingState(prev => prev ? { ...prev, cropBox: { x, y, width, height } } : null);
 882 |             return;
 883 |         }
 884 | 
 885 | 
 886 |         switch(interactionMode.current) {
 887 |             case 'pan': {
 888 |                 const dx = e.clientX - startPoint.current.x;
 889 |                 const dy = e.clientY - startPoint.current.y;
 890 |                 setPanOffset(prev => ({ x: prev.x + dx, y: prev.y + dy }));
 891 |                 startPoint.current = { x: e.clientX, y: e.clientY };
 892 |                 break;
 893 |             }
 894 |             case 'draw': {
 895 |                 if (currentDrawingElementId.current) {
 896 |                     setElements(prev => prev.map(el => {
 897 |                         if (el.id === currentDrawingElementId.current && el.type === 'path') {
 898 |                             return { ...el, points: [...el.points, point] };
 899 |                         }
 900 |                         return el;
 901 |                     }), false);
 902 |                 }
 903 |                 break;
 904 |             }
 905 |             case 'lasso': {
 906 |                 setLassoPath(prev => (prev ? [...prev, point] : [point]));
 907 |                 break;
 908 |             }
 909 |             case 'drawShape': {
 910 |                  if (currentDrawingElementId.current) {
 911 |                     setElements(prev => prev.map(el => {
 912 |                         if (el.id === currentDrawingElementId.current && el.type === 'shape') {
 913 |                             let newWidth = Math.abs(point.x - startCanvasPoint.x);
 914 |                             let newHeight = Math.abs(point.y - startCanvasPoint.y);
 915 |                             let newX = Math.min(point.x, startCanvasPoint.x);
 916 |                             let newY = Math.min(point.y, startCanvasPoint.y);
 917 |                             
 918 |                             if (e.shiftKey) {
 919 |                                 if (el.shapeType === 'rectangle' || el.shapeType === 'circle') {
 920 |                                     const side = Math.max(newWidth, newHeight);
 921 |                                     newWidth = side;
 922 |                                     newHeight = side;
 923 |                                 } else if (el.shapeType === 'triangle') {
 924 |                                     newHeight = newWidth * (Math.sqrt(3) / 2);
 925 |                                 }
 926 |                                 
 927 |                                 if (point.x < startCanvasPoint.x) newX = startCanvasPoint.x - newWidth;
 928 |                                 if (point.y < startCanvasPoint.y) newY = startCanvasPoint.y - newHeight;
 929 |                             }
 930 | 
 931 |                             return {...el, x: newX, y: newY, width: newWidth, height: newHeight};
 932 |                         }
 933 |                         return el;
 934 |                     }), false);
 935 |                 }
 936 |                 break;
 937 |             }
 938 |             case 'drawArrow': {
 939 |                 if (currentDrawingElementId.current) {
 940 |                     setElements(prev => prev.map(el => {
 941 |                         if (el.id === currentDrawingElementId.current && el.type === 'arrow') {
 942 |                             return { ...el, points: [el.points[0], point] };
 943 |                         }
 944 |                         return el;
 945 |                     }), false);
 946 |                 }
 947 |                 break;
 948 |             }
 949 |             case 'drawLine': {
 950 |                 if (currentDrawingElementId.current) {
 951 |                     setElements(prev => prev.map(el => {
 952 |                         if (el.id === currentDrawingElementId.current && el.type === 'line') {
 953 |                             return { ...el, points: [el.points[0], point] };
 954 |                         }
 955 |                         return el;
 956 |                     }), false);
 957 |                 }
 958 |                 break;
 959 |             }
 960 |             case 'dragElements': {
 961 |                 const dx = point.x - startCanvasPoint.x;
 962 |                 const dy = point.y - startCanvasPoint.y;
 963 |                 
 964 |                 const movingElementIds = Array.from(dragStartElementPositions.current.keys());
 965 |                 const movingElements = elements.filter(el => movingElementIds.includes(el.id));
 966 |                 const otherElements = elements.filter(el => !movingElementIds.includes(el.id));
 967 |                 const snapThresholdCanvas = SNAP_THRESHOLD / zoom;
 968 | 
 969 |                 let finalDx = dx;
 970 |                 let finalDy = dy;
 971 |                 let activeGuides: Guide[] = [];
 972 | 
 973 |                 // Alignment Snapping
 974 |                 const getSnapPoints = (bounds: Rect) => ({
 975 |                     v: [bounds.x, bounds.x + bounds.width / 2, bounds.x + bounds.width],
 976 |                     h: [bounds.y, bounds.y + bounds.height / 2, bounds.y + bounds.height],
 977 |                 });
 978 | 
 979 |                 const staticSnapPoints = { v: new Set<number>(), h: new Set<number>() };
 980 |                 otherElements.forEach(el => {
 981 |                     const bounds = getElementBounds(el);
 982 |                     getSnapPoints(bounds).v.forEach(p => staticSnapPoints.v.add(p));
 983 |                     getSnapPoints(bounds).h.forEach(p => staticSnapPoints.h.add(p));
 984 |                 });
 985 |                 
 986 |                 let bestSnapX = { dist: Infinity, val: finalDx, guide: null as Guide | null };
 987 |                 let bestSnapY = { dist: Infinity, val: finalDy, guide: null as Guide | null };
 988 |                 
 989 |                 movingElements.forEach(movingEl => {
 990 |                     const startPos = dragStartElementPositions.current.get(movingEl.id);
 991 |                     if (!startPos) return;
 992 | 
 993 |                     let movingBounds: Rect;
 994 |                      if (movingEl.type !== 'path' && movingEl.type !== 'arrow' && movingEl.type !== 'line') {
 995 |                         movingBounds = getElementBounds({...movingEl, x: (startPos as Point).x, y: (startPos as Point).y });
 996 |                     } else { // path or arrow or line
 997 |                         if (movingEl.type === 'arrow' || movingEl.type === 'line') {
 998 |                             movingBounds = getElementBounds({...movingEl, points: startPos as [Point, Point]});
 999 |                         } else {
1000 |                             movingBounds = getElementBounds({...movingEl, points: startPos as Point[]});
1001 |                         }
1002 |                     }
1003 | 
1004 |                     const movingSnapPoints = getSnapPoints(movingBounds);
1005 | 
1006 |                     movingSnapPoints.v.forEach(p => {
1007 |                         staticSnapPoints.v.forEach(staticP => {
1008 |                             const dist = Math.abs((p + finalDx) - staticP);
1009 |                             if (dist < snapThresholdCanvas && dist < bestSnapX.dist) {
1010 |                                 bestSnapX = { dist, val: staticP - p, guide: { type: 'v', position: staticP, start: movingBounds.y, end: movingBounds.y + movingBounds.height }};
1011 |                             }
1012 |                         });
1013 |                     });
1014 |                     movingSnapPoints.h.forEach(p => {
1015 |                         staticSnapPoints.h.forEach(staticP => {
1016 |                             const dist = Math.abs((p + finalDy) - staticP);
1017 |                             if (dist < snapThresholdCanvas && dist < bestSnapY.dist) {
1018 |                                 bestSnapY = { dist, val: staticP - p, guide: { type: 'h', position: staticP, start: movingBounds.x, end: movingBounds.x + movingBounds.width }};
1019 |                             }
1020 |                         });
1021 |                     });
1022 |                 });
1023 |                 
1024 |                 if (bestSnapX.guide) { finalDx = bestSnapX.val; activeGuides.push(bestSnapX.guide); }
1025 |                 if (bestSnapY.guide) { finalDy = bestSnapY.val; activeGuides.push(bestSnapY.guide); }
1026 |                 
1027 |                 setAlignmentGuides(activeGuides);
1028 | 
1029 |                 setElements(prev => prev.map(el => {
1030 |                     if (movingElementIds.includes(el.id)) {
1031 |                         const startPos = dragStartElementPositions.current.get(el.id);
1032 |                         if (!startPos) return el;
1033 |                         
1034 |                         if (el.type !== 'path' && el.type !== 'arrow' && el.type !== 'line') {
1035 |                             return { ...el, x: (startPos as Point).x + finalDx, y: (startPos as Point).y + finalDy };
1036 |                         }
1037 |                         
1038 |                         if (el.type === 'path') {
1039 |                             const startPoints = startPos as Point[];
1040 |                             const newPoints = startPoints.map(p => ({ x: p.x + finalDx, y: p.y + finalDy }));
1041 |                             const updatedEl: PathElement = { ...el, points: newPoints };
1042 |                             return updatedEl;
1043 |                         } else if (el.type === 'arrow' || el.type === 'line') {
1044 |                             const startPoints = startPos as [Point, Point];
1045 |                             const newPoints: [Point, Point] = [
1046 |                                 { x: startPoints[0].x + finalDx, y: startPoints[0].y + finalDy },
1047 |                                 { x: startPoints[1].x + finalDx, y: startPoints[1].y + finalDy },
1048 |                             ];
1049 |                             const updatedEl = { ...el, points: newPoints };
1050 |                             return updatedEl;
1051 |                         }
1052 |                     }
1053 |                     return el;
1054 |                 }), false);
1055 |                 break;
1056 |             }
1057 |              case 'selectBox': {
1058 |                 const newX = Math.min(point.x, startCanvasPoint.x);
1059 |                 const newY = Math.min(point.y, startCanvasPoint.y);
1060 |                 const newWidth = Math.abs(point.x - startCanvasPoint.x);
1061 |                 const newHeight = Math.abs(point.y - startCanvasPoint.y);
1062 |                 setSelectionBox({ x: newX, y: newY, width: newWidth, height: newHeight });
1063 |                 break;
1064 |             }
1065 |         }
1066 |     };
1067 |     
1068 |     const handleMouseUp = () => {
1069 |         if (interactionMode.current) {
1070 |             if (interactionMode.current === 'selectBox' && selectionBox) {
1071 |                 const selectedIds: string[] = [];
1072 |                 const { x: sx, y: sy, width: sw, height: sh } = selectionBox;
1073 |                 
1074 |                 elements.forEach(element => {
1075 |                     const bounds = getElementBounds(element, elements);
1076 |                     const { x: ex, y: ey, width: ew, height: eh } = bounds;
1077 |                     
1078 |                     if (sx < ex + ew && sx + sw > ex && sy < ey + eh && sy + sh > ey) {
1079 |                         const selectable = getSelectableElement(element.id, elements);
1080 |                         if(selectable) selectedIds.push(selectable.id);
1081 |                     }
1082 |                 });
1083 |                 setSelectedElementIds([...new Set(selectedIds)]);
1084 |             } else if (interactionMode.current === 'lasso' && lassoPath && lassoPath.length > 2) {
1085 |                 const selectedIds = elements.filter(el => {
1086 |                     const bounds = getElementBounds(el, elements);
1087 |                     const center: Point = { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 };
1088 |                     return isPointInPolygon(center, lassoPath);
1089 |                 }).map(el => getSelectableElement(el.id, elements)?.id).filter((id): id is string => !!id);
1090 |                 setSelectedElementIds(prev => [...new Set([...prev, ...selectedIds])]);
1091 |                 setLassoPath(null);
1092 |             } else if (['draw', 'drawShape', 'drawArrow', 'drawLine', 'dragElements', 'erase'].some(prefix => interactionMode.current?.startsWith(prefix)) || interactionMode.current.startsWith('resize-')) {
1093 |                 const newHistory = [...history.slice(0, historyIndex + 1), elementsRef.current];
1094 |                 setHistory(newHistory);
1095 |                 setHistoryIndex(newHistory.length - 1);
1096 |             }
1097 |         }
1098 |         
1099 |         interactionMode.current = null;
1100 |         currentDrawingElementId.current = null;
1101 |         setSelectionBox(null);
1102 |         setLassoPath(null);
1103 |         resizeStartInfo.current = null;
1104 |         cropStartInfo.current = null;
1105 |         setAlignmentGuides([]);
1106 |         dragStartElementPositions.current.clear();
1107 |     };
1108 | 
1109 |     const handleWheel = (e: React.WheelEvent<SVGSVGElement>) => {
1110 |         if (croppingState || editingElement) { e.preventDefault(); return; }
1111 |         e.preventDefault();
1112 |         const { clientX, clientY, deltaX, deltaY, ctrlKey } = e;
1113 | 
1114 |         if (ctrlKey || wheelAction === 'zoom') {
1115 |             const zoomFactor = 1.05;
1116 |             const oldZoom = zoom;
1117 |             const newZoom = deltaY < 0 ? oldZoom * zoomFactor : oldZoom / zoomFactor;
1118 |             const clampedZoom = Math.max(0.1, Math.min(newZoom, 10));
1119 | 
1120 |             const mousePoint = { x: clientX, y: clientY };
1121 |             const newPanX = mousePoint.x - (mousePoint.x - panOffset.x) * (clampedZoom / oldZoom);
1122 |             const newPanY = mousePoint.y - (mousePoint.y - panOffset.y) * (clampedZoom / oldZoom);
1123 | 
1124 |             setZoom(clampedZoom);
1125 |             setPanOffset({ x: newPanX, y: newPanY });
1126 | 
1127 |         } else { // Panning (wheelAction === 'pan' and no ctrlKey)
1128 |             setPanOffset(prev => ({
1129 |                 x: prev.x - deltaX,
1130 |                 y: prev.y - deltaY,
1131 |             }));
1132 |         }
1133 |     };
1134 | 
1135 |     const handleDeleteElement = (id: string) => {
1136 |         commitAction(prev => {
1137 |             const idsToDelete = new Set([id]);
1138 |             getDescendants(id, prev).forEach(desc => idsToDelete.add(desc.id));
1139 |             return prev.filter(el => !idsToDelete.has(el.id));
1140 |         });
1141 |         setSelectedElementIds(prev => prev.filter(selId => selId !== id));
1142 |     };
1143 | 
1144 |     const handleCopyElement = (elementToCopy: Element) => {
1145 |         commitAction(prev => {
1146 |             const elementsToCopy = [elementToCopy, ...getDescendants(elementToCopy.id, prev)];
1147 |             const idMap = new Map<string, string>();
1148 |             
1149 |             const newElements: Element[] = elementsToCopy.map(el => {
1150 |                 const newId = generateId();
1151 |                 idMap.set(el.id, newId);
1152 |                 const dx = 20 / zoom;
1153 |                 const dy = 20 / zoom;
1154 | 
1155 |                 let newElement: Element;
1156 |                 switch (el.type) {
1157 |                     case 'path':
1158 |                         newElement = { ...el, id: newId, points: el.points.map(p => ({ x: p.x + dx, y: p.y + dy }))};
1159 |                         break;
1160 |                     case 'arrow':
1161 |                     case 'line':
1162 |                         newElement = { ...el, id: newId, points: [{ x: el.points[0].x + dx, y: el.points[0].y + dy }, { x: el.points[1].x + dx, y: el.points[1].y + dy }] as [Point, Point] };
1163 |                         break;
1164 |                     default:
1165 |                         newElement = { ...el, id: newId, x: el.x + dx, y: el.y + dy };
1166 |                         break;
1167 |                 }
1168 |                 return newElement;
1169 |             });
1170 |             
1171 |             const finalNewElements = newElements.map(el => ({
1172 |                 ...el,
1173 |                 parentId: el.parentId ? idMap.get(el.parentId) : undefined,
1174 |             }));
1175 |             
1176 |             setSelectedElementIds([idMap.get(elementToCopy.id)!]);
1177 |             return [...prev, ...finalNewElements];
1178 |         });
1179 |     };
1180 |     
1181 |      const handleDownloadImage = (element: ImageElement) => {
1182 |         const link = document.createElement('a');
1183 |         link.href = element.href;
1184 |         link.download = `canvas-image-${element.id}.${element.mimeType.split('/')[1] || 'png'}`;
1185 |         document.body.appendChild(link);
1186 |         link.click();
1187 |         document.body.removeChild(link);
1188 |     };
1189 | 
1190 |     const handleStartCrop = (element: ImageElement) => {
1191 |         setActiveTool('select');
1192 |         setCroppingState({
1193 |             elementId: element.id,
1194 |             originalElement: { ...element },
1195 |             cropBox: { x: element.x, y: element.y, width: element.width, height: element.height },
1196 |         });
1197 |     };
1198 | 
1199 |     const handleCancelCrop = () => setCroppingState(null);
1200 | 
1201 |     const handleConfirmCrop = () => {
1202 |         if (!croppingState) return;
1203 |         const { elementId, cropBox } = croppingState;
1204 |         const elementToCrop = elementsRef.current.find(el => el.id === elementId) as ImageElement;
1205 | 
1206 |         if (!elementToCrop) { handleCancelCrop(); return; }
1207 |         
1208 |         const img = new Image();
1209 |         img.crossOrigin = 'anonymous';
1210 |         img.onload = () => {
1211 |             const canvas = document.createElement('canvas');
1212 |             canvas.width = cropBox.width;
1213 |             canvas.height = cropBox.height;
1214 |             const ctx = canvas.getContext('2d');
1215 |             if (!ctx) { setError("Failed to create canvas context for cropping."); handleCancelCrop(); return; }
1216 |             const sx = cropBox.x - elementToCrop.x;
1217 |             const sy = cropBox.y - elementToCrop.y;
1218 |             ctx.drawImage(img, sx, sy, cropBox.width, cropBox.height, 0, 0, cropBox.width, cropBox.height);
1219 |             const newHref = canvas.toDataURL(elementToCrop.mimeType);
1220 | 
1221 |             commitAction(prev => prev.map(el => {
1222 |                 if (el.id === elementId && el.type === 'image') {
1223 |                     const updatedEl: ImageElement = {
1224 |                         ...el,
1225 |                         href: newHref,
1226 |                         x: cropBox.x,
1227 |                         y: cropBox.y,
1228 |                         width: cropBox.width,
1229 |                         height: cropBox.height
1230 |                     };
1231 |                     return updatedEl;
1232 |                 }
1233 |                 return el;
1234 |             }));
1235 |             handleCancelCrop();
1236 |         };
1237 |         img.onerror = () => { setError("Failed to load image for cropping."); handleCancelCrop(); }
1238 |         img.src = elementToCrop.href;
1239 |     };
1240 |     
1241 |     useEffect(() => {
1242 |         if (editingElement && editingTextareaRef.current) {
1243 |             setTimeout(() => {
1244 |                 if (editingTextareaRef.current) {
1245 |                     editingTextareaRef.current.focus();
1246 |                     editingTextareaRef.current.select();
1247 |                 }
1248 |             }, 0);
1249 |         }
1250 |     }, [editingElement]);
1251 |     
1252 |     useEffect(() => {
1253 |         if (editingElement && editingTextareaRef.current) {
1254 |             const textarea = editingTextareaRef.current;
1255 |             textarea.style.height = 'auto';
1256 |             const newHeight = textarea.scrollHeight;
1257 |             textarea.style.height = ''; 
1258 | 
1259 |             const currentElement = elementsRef.current.find(el => el.id === editingElement.id);
1260 |             if (currentElement && currentElement.type === 'text' && currentElement.height !== newHeight) {
1261 |                 setElements(prev => prev.map(el => 
1262 |                     el.id === editingElement.id && el.type === 'text' 
1263 |                     ? { ...el, height: newHeight } 
1264 |                     : el
1265 |                 ), false);
1266 |             }
1267 |         }
1268 |     }, [editingElement?.text]);
1269 | 
1270 | 
1271 |     const handleGenerate = async () => {
1272 |         if (!prompt.trim()) {
1273 |             setError('Please enter a prompt.');
1274 |             return;
1275 |         }
1276 | 
1277 |         setIsLoading(true);
1278 |         setError(null);
1279 | 
1280 |         try {
1281 |             const isEditing = selectedElementIds.length > 0;
1282 | 
1283 |             if (isEditing) {
1284 |                 const selectedElements = elements.filter(el => selectedElementIds.includes(el.id));
1285 |                 const imageElements = selectedElements.filter(el => el.type === 'image') as ImageElement[];
1286 |                 const maskPaths = selectedElements.filter(el => el.type === 'path' && el.strokeOpacity && el.strokeOpacity < 1) as PathElement[];
1287 | 
1288 |                 // Inpainting logic: selection is ONLY one image and one or more mask paths
1289 |                 if (imageElements.length === 1 && maskPaths.length > 0 && selectedElements.length === (1 + maskPaths.length)) {
1290 |                     const baseImage = imageElements[0];
1291 |                     const maskData = await rasterizeMask(maskPaths, baseImage);
1292 |                     const result = await editImage(
1293 |                         [{ href: baseImage.href, mimeType: baseImage.mimeType }],
1294 |                         prompt,
1295 |                         { href: maskData.href, mimeType: maskData.mimeType }
1296 |                     );
1297 |                     
1298 |                     if (result.newImageBase64 && result.newImageMimeType) {
1299 |                         const { newImageBase64, newImageMimeType } = result;
1300 | 
1301 |                         const img = new Image();
1302 |                         img.onload = () => {
1303 |                             const maskPathIds = new Set(maskPaths.map(p => p.id));
1304 |                             commitAction(prev => 
1305 |                                 prev.map(el => {
1306 |                                     if (el.id === baseImage.id && el.type === 'image') {
1307 |                                         return {
1308 |                                             ...el,
1309 |                                             href: `data:${newImageMimeType};base64,${newImageBase64}`,
1310 |                                             width: img.width,
1311 |                                             height: img.height,
1312 |                                         };
1313 |                                     }
1314 |                                     return el;
1315 |                                 }).filter(el => !maskPathIds.has(el.id))
1316 |                             );
1317 |                             setSelectedElementIds([baseImage.id]);
1318 |                         };
1319 |                         img.onerror = () => setError('Failed to load the generated image.');
1320 |                         img.src = `data:${newImageMimeType};base64,${newImageBase64}`;
1321 | 
1322 |                     } else {
1323 |                         setError(result.textResponse || 'Inpainting failed to produce an image.');
1324 |                     }
1325 |                     return; // End execution for inpainting path
1326 |                 }
1327 |                 
1328 |                 // Regular edit/combine logic
1329 |                 const imagePromises = selectedElements.map(el => {
1330 |                     if (el.type === 'image') return Promise.resolve({ href: el.href, mimeType: el.mimeType });
1331 |                     if (el.type === 'video') return Promise.reject(new Error("Cannot use video elements in image generation."));
1332 |                     return rasterizeElement(el as Exclude<Element, ImageElement | VideoElement>);
1333 |                 });
1334 |                 const imagesToProcess = await Promise.all(imagePromises);
1335 |                 const result = await editImage(imagesToProcess, prompt);
1336 | 
1337 |                 if (result.newImageBase64 && result.newImageMimeType) {
1338 |                     const { newImageBase64, newImageMimeType } = result;
1339 |                     
1340 |                     const img = new Image();
1341 |                     img.onload = () => {
1342 |                         let minX = Infinity, minY = Infinity, maxX = -Infinity;
1343 |                         selectedElements.forEach(el => {
1344 |                             const bounds = getElementBounds(el);
1345 |                             minX = Math.min(minX, bounds.x);
1346 |                             minY = Math.min(minY, bounds.y);
1347 |                             maxX = Math.max(maxX, bounds.x + bounds.width);
1348 |                         });
1349 |                         const x = maxX + 20;
1350 |                         const y = minY;
1351 |                         
1352 |                         const newImage: ImageElement = {
1353 |                             id: generateId(), type: 'image', x, y, name: 'Generated Image',
1354 |                             width: img.width, height: img.height,
1355 |                             href: `data:${newImageMimeType};base64,${newImageBase64}`, mimeType: newImageMimeType,
1356 |                         };
1357 |                         commitAction(prev => [...prev, newImage]);
1358 |                         setSelectedElementIds([newImage.id]);
1359 |                     };
1360 |                     img.onerror = () => setError('Failed to load the generated image.');
1361 |                     img.src = `data:${newImageMimeType};base64,${newImageBase64}`;
1362 |                 } else {
1363 |                     setError(result.textResponse || 'Generation failed to produce an image.');
1364 |                 }
1365 | 
1366 |             } else {
1367 |                 // Generate from scratch
1368 |                 const result = await generateImageFromText(prompt);
1369 | 
1370 |                 if (result.newImageBase64 && result.newImageMimeType) {
1371 |                     const { newImageBase64, newImageMimeType } = result;
1372 |                     
1373 |                     const img = new Image();
1374 |                     img.onload = () => {
1375 |                         if (!svgRef.current) return;
1376 |                         const svgBounds = svgRef.current.getBoundingClientRect();
1377 |                         const screenCenter = { x: svgBounds.left + svgBounds.width / 2, y: svgBounds.top + svgBounds.height / 2 };
1378 |                         const canvasPoint = getCanvasPoint(screenCenter.x, screenCenter.y);
1379 |                         const x = canvasPoint.x - (img.width / 2);
1380 |                         const y = canvasPoint.y - (img.height / 2);
1381 |                         
1382 |                         const newImage: ImageElement = {
1383 |                             id: generateId(), type: 'image', x, y, name: 'Generated Image',
1384 |                             width: img.width, height: img.height,
1385 |                             href: `data:${newImageMimeType};base64,${newImageBase64}`, mimeType: newImageMimeType,
1386 |                         };
1387 |                         commitAction(prev => [...prev, newImage]);
1388 |                         setSelectedElementIds([newImage.id]);
1389 |                     };
1390 |                     img.onerror = () => setError('Failed to load the generated image.');
1391 |                     img.src = `data:${newImageMimeType};base64,${newImageBase64}`;
1392 |                 } else { 
1393 |                     setError(result.textResponse || 'Generation failed to produce an image.'); 
1394 |                 }
1395 |             }
1396 |         } catch (err) {
1397 |             const error = err as Error; 
1398 |             let friendlyMessage = `An error occurred during generation: ${error.message}`;
1399 | 
1400 |             if (error.message && (error.message.includes('429') || error.message.toUpperCase().includes('RESOURCE_EXHAUSTED'))) {
1401 |                 friendlyMessage = "API quota exceeded. Please check your Google AI Studio plan and billing details, or try again later.";
1402 |             }
1403 | 
1404 |             setError(friendlyMessage); 
1405 |             console.error("Generation failed:", error);
1406 |         } finally { 
1407 |             setIsLoading(false); 
1408 |         }
1409 |     };
1410 |     
1411 |     const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault(); }, []);
1412 |     const handleDrop = useCallback((e: React.DragEvent) => { e.preventDefault(); if (e.dataTransfer.files && e.dataTransfer.files[0]) { handleAddImageElement(e.dataTransfer.files[0]); } }, [handleAddImageElement]);
1413 | 
1414 |     const handlePropertyChange = (elementId: string, updates: Partial<Element>) => {
1415 |         commitAction(prev => prev.map(el => {
1416 |             if (el.id === elementId) {
1417 |                  return { ...el, ...updates };
1418 |             }
1419 |             return el;
1420 |         }));
1421 |     };
1422 | 
1423 |      const handleLayerAction = (elementId: string, action: 'front' | 'back' | 'forward' | 'backward') => {
1424 |         commitAction(prev => {
1425 |             const elementsCopy = [...prev];
1426 |             const index = elementsCopy.findIndex(el => el.id === elementId);
1427 |             if (index === -1) return elementsCopy;
1428 | 
1429 |             const [element] = elementsCopy.splice(index, 1);
1430 | 
1431 |             if (action === 'front') {
1432 |                 elementsCopy.push(element);
1433 |             } else if (action === 'back') {
1434 |                 elementsCopy.unshift(element);
1435 |             } else if (action === 'forward') {
1436 |                 const newIndex = Math.min(elementsCopy.length, index + 1);
1437 |                 elementsCopy.splice(newIndex, 0, element);
1438 |             } else if (action === 'backward') {
1439 |                 const newIndex = Math.max(0, index - 1);
1440 |                 elementsCopy.splice(newIndex, 0, element);
1441 |             }
1442 |             return elementsCopy;
1443 |         });
1444 |         setContextMenu(null);
1445 |     };
1446 |     
1447 |     const handleRasterizeSelection = async () => {
1448 | // FIX: Updated filter to exclude 'video' elements and adjusted type assertion accordingly.
1449 |         const elementsToRasterize = elements.filter(
1450 |             el => selectedElementIds.includes(el.id) && el.type !== 'image' && el.type !== 'video'
1451 |         ) as Exclude<Element, ImageElement | VideoElement>[];
1452 | 
1453 |         if (elementsToRasterize.length === 0) return;
1454 | 
1455 |         setContextMenu(null);
1456 |         setIsLoading(true);
1457 |         setError(null);
1458 | 
1459 |         try {
1460 |             let minX = Infinity, minY = Infinity;
1461 |             elementsToRasterize.forEach(element => {
1462 |                 const bounds = getElementBounds(element);
1463 |                 minX = Math.min(minX, bounds.x);
1464 |                 minY = Math.min(minY, bounds.y);
1465 |             });
1466 |             
1467 |             const { href, mimeType, width, height } = await rasterizeElements(elementsToRasterize);
1468 |             
1469 |             const newImage: ImageElement = {
1470 |                 id: generateId(),
1471 |                 type: 'image', name: 'Rasterized Image',
1472 |                 x: minX - 10, // Account for padding used during rasterization
1473 |                 y: minY - 10, // Account for padding
1474 |                 width,
1475 |                 height,
1476 |                 href,
1477 |                 mimeType
1478 |             };
1479 | 
1480 |             const idsToRemove = new Set(elementsToRasterize.map(el => el.id));
1481 | 
1482 | // FIX: Added 'return' to ensure the callback returns the updated elements array.
1483 |             commitAction(prev => {
1484 |                 const remainingElements = prev.filter(el => !idsToRemove.has(el.id));
1485 |                 return [...remainingElements, newImage];
1486 |             });
1487 | 
1488 |             setSelectedElementIds([newImage.id]);
1489 | 
1490 |         } catch (err) {
1491 |             const error = err as Error;
1492 |             setError(`Failed to rasterize selection: ${error.message}`);
1493 |             console.error(err);
1494 |         } finally {
1495 |             setIsLoading(false);
1496 |         }
1497 |     };
1498 | 
1499 |     const handleGroup = () => {
1500 |         const selectedElements = elements.filter(el => selectedElementIds.includes(el.id));
1501 |         if (selectedElements.length < 2) return;
1502 |         
1503 |         const bounds = getSelectionBounds(selectedElementIds);
1504 |         const newGroupId = generateId();
1505 | 
1506 |         const newGroup: GroupElement = {
1507 |             id: newGroupId,
1508 |             type: 'group',
1509 |             name: 'Group',
1510 |             x: bounds.x,
1511 |             y: bounds.y,
1512 |             width: bounds.width,
1513 |             height: bounds.height,
1514 |         };
1515 | 
1516 |         commitAction(prev => {
1517 |             const updatedElements = prev.map(el => 
1518 |                 selectedElementIds.includes(el.id) ? { ...el, parentId: newGroupId } : el
1519 |             );
1520 |             return [...updatedElements, newGroup];
1521 |         });
1522 | 
1523 |         setSelectedElementIds([newGroupId]);
1524 |         setContextMenu(null);
1525 |     };
1526 | 
1527 |     const handleUngroup = () => {
1528 |         if (selectedElementIds.length !== 1) return;
1529 |         const groupId =

--------------------------------------------------------------------------------
/src/components/LayerPanel.tsx:
--------------------------------------------------------------------------------
  1 | 
  2 | import React, { useState, useRef, useEffect, useMemo } from 'react';
  3 | import type { Element } from '../types';
  4 | 
  5 | interface LayerPanelProps {
  6 |     isOpen: boolean;
  7 |     onClose: () => void;
  8 |     elements: Element[];
  9 |     selectedElementIds: string[];
 10 |     onSelectElement: (id: string | null) => void;
 11 |     onToggleVisibility: (id: string) => void;
 12 |     onToggleLock: (id: string) => void;
 13 |     onRenameElement: (id: string, name: string) => void;
 14 |     onReorder: (draggedId: string, targetId: string, position: 'before' | 'after') => void;
 15 | }
 16 | 
 17 | const getElementIcon = (element: Element) => {
 18 |     switch (element.type) {
 19 |         case 'image': return '🖼️';
 20 |         case 'text': return '🇹';
 21 |         case 'shape':
 22 |             switch (element.shapeType) {
 23 |                 case 'rectangle': return '▭';
 24 |                 case 'circle': return '◯';
 25 |                 case 'triangle': return '▵';
 26 |             }
 27 |             break;
 28 |         case 'group': return '📁';
 29 |         case 'path': return '✎';
 30 |         case 'arrow': return '→';
 31 |         case 'line': return '—';
 32 |         default: return '●';
 33 |     }
 34 |     return '●';
 35 | };
 36 | 
 37 | const LayerItem: React.FC<{
 38 |     element: Element;
 39 |     level: number;
 40 |     isSelected: boolean;
 41 |     onSelect: () => void;
 42 |     onToggleVisibility: () => void;
 43 |     onToggleLock: () => void;
 44 |     onRename: (name: string) => void;
 45 |     // FIX: Changed drag handler prop types to match standard React event handlers.
 46 |     onDragStart: (e: React.DragEvent<HTMLDivElement>) => void;
 47 |     onDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
 48 |     onDrop: (e: React.DragEvent<HTMLDivElement>) => void;
 49 |     onDragLeave: (e: React.DragEvent<HTMLDivElement>) => void;
 50 | }> = ({ element, level, isSelected, onSelect, onToggleVisibility, onToggleLock, onRename, ...dragProps }) => {
 51 |     const [isEditing, setIsEditing] = useState(false);
 52 |     const [name, setName] = useState(element.name || element.type);
 53 |     const inputRef = useRef<HTMLInputElement>(null);
 54 | 
 55 |     useEffect(() => {
 56 |         setName(element.name || element.type);
 57 |     }, [element.name, element.type]);
 58 | 
 59 |     useEffect(() => {
 60 |         if (isEditing && inputRef.current) {
 61 |             inputRef.current.focus();
 62 |             inputRef.current.select();
 63 |         }
 64 |     }, [isEditing]);
 65 |     
 66 |     const handleBlur = () => {
 67 |         setIsEditing(false);
 68 |         if (name.trim() === '') {
 69 |             setName(element.name || element.type);
 70 |         } else {
 71 |             onRename(name);
 72 |         }
 73 |     };
 74 | 
 75 |     return (
 76 |         <div
 77 |             draggable
 78 |             {...dragProps}
 79 |             onClick={onSelect}
 80 |             onDoubleClick={() => setIsEditing(true)}
 81 |             className={`flex items-center space-x-2 p-1.5 rounded-md cursor-pointer text-sm transition-colors group ${
 82 |                 isSelected ? 'bg-blue-500/30' : 'hover:bg-white/10'
 83 |             } ${element.isVisible === false ? 'opacity-50' : ''}`}
 84 |             style={{ paddingLeft: `${10 + level * 20}px` }}
 85 |         >
 86 |             <span className="flex-shrink-0 w-4">{getElementIcon(element)}</span>
 87 |             {isEditing ? (
 88 |                 <input
 89 |                     ref={inputRef}
 90 |                     type="text"
 91 |                     value={name}
 92 |                     onChange={(e) => setName(e.target.value)}
 93 |                     onBlur={handleBlur}
 94 |                     onKeyDown={(e) => e.key === 'Enter' && handleBlur()}
 95 |                     className="flex-grow bg-transparent border-b border-blue-400 outline-none text-white"
 96 |                     onClick={e => e.stopPropagation()}
 97 |                 />
 98 |             ) : (
 99 |                 <span className="flex-grow truncate">{name}</span>
100 |             )}
101 |             <div className="flex-shrink-0 flex items-center opacity-0 group-hover:opacity-100 transition-opacity">
102 |                 <button
103 |                     onClick={(e) => { e.stopPropagation(); onToggleLock(); }}
104 |                     className={`p-1 rounded-full hover:bg-white/20 ${element.isLocked ? 'text-white' : 'text-gray-500'}`}
105 |                     title={element.isLocked ? "Unlock" : "Lock"}
106 |                 >
107 |                     {element.isLocked ? '🔒' : '🔓'}
108 |                 </button>
109 |                 <button
110 |                     onClick={(e) => { e.stopPropagation(); onToggleVisibility(); }}
111 |                     className="p-1 rounded-full hover:bg-white/20"
112 |                     title={element.isVisible === false ? "Show" : "Hide"}
113 |                 >
114 |                     {element.isVisible === false ? '🙈' : '👁️'}
115 |                 </button>
116 |             </div>
117 |         </div>
118 |     );
119 | };
120 | 
121 | export const LayerPanel: React.FC<LayerPanelProps> = ({ isOpen, onClose, elements, selectedElementIds, onSelectElement, onToggleVisibility, onToggleLock, onRenameElement, onReorder }) => {
122 |     const panelRef = useRef<HTMLDivElement>(null);
123 |     const [dragOverId, setDragOverId] = useState<string | null>(null);
124 | 
125 |     const handleDragStart = (e: React.DragEvent<HTMLDivElement>, id: string) => {
126 |         e.dataTransfer.setData('text/plain', id);
127 |         e.dataTransfer.effectAllowed = 'move';
128 |     };
129 | 
130 |     const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
131 |         e.preventDefault();
132 |         const target = e.currentTarget;
133 |         const id = target.getAttribute('data-id');
134 |         setDragOverId(id);
135 |         target.style.background = 'rgba(255,255,255,0.2)';
136 |     };
137 |     
138 |     const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
139 |         e.currentTarget.style.background = '';
140 |         setDragOverId(null);
141 |     };
142 | 
143 |     const handleDrop = (e: React.DragEvent<HTMLDivElement>, targetId: string) => {
144 |         e.preventDefault();
145 |         e.currentTarget.style.background = '';
146 |         setDragOverId(null);
147 |         const draggedId = e.dataTransfer.getData('text/plain');
148 | 
149 |         const rect = e.currentTarget.getBoundingClientRect();
150 |         const position = e.clientY - rect.top > rect.height / 2 ? 'after' : 'before';
151 | 
152 |         if (draggedId && targetId && draggedId !== targetId) {
153 |             onReorder(draggedId, targetId, position);
154 |         }
155 |     };
156 |     
157 |     const elementMap = useMemo(() => new Map(elements.map(el => [el.id, el])), [elements]);
158 |     const rootElements = useMemo(() => elements.filter(el => !el.parentId), [elements]);
159 | 
160 |     const renderLayers = (elementIds: string[], level: number) => {
161 |         return elementIds.map(id => {
162 |             const element = elementMap.get(id);
163 |             if (!element) return null;
164 | 
165 |             const childrenIds = elements.filter(el => el.parentId === id).map(el => el.id);
166 | 
167 |             return (
168 |                 <React.Fragment key={id}>
169 |                     <div data-id={id} onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={(e) => handleDrop(e, id)}>
170 |                         <LayerItem
171 |                             element={element}
172 |                             level={level}
173 |                             isSelected={selectedElementIds.includes(id)}
174 |                             onSelect={() => onSelectElement(id)}
175 |                             onToggleLock={() => onToggleLock(id)}
176 |                             onToggleVisibility={() => onToggleVisibility(id)}
177 |                             onRename={name => onRenameElement(id, name)}
178 |                             onDragStart={e => handleDragStart(e, id)}
179 |                             onDragOver={handleDragOver}
180 |                             onDragLeave={handleDragLeave}
181 |                             onDrop={(e) => handleDrop(e, id)}
182 |                         />
183 |                     </div>
184 |                     {childrenIds.length > 0 && renderLayers(childrenIds, level + 1)}
185 |                 </React.Fragment>
186 |             );
187 |         });
188 |     };
189 | 
190 |     // Render elements in their actual array order for Z-index representation
191 |     const renderOrderedLayers = (elements: Element[], level: number = 0, parentId?: string) => {
192 |         return elements
193 |             .filter(el => el.parentId === parentId)
194 |             .map(element => (
195 |                 <React.Fragment key={element.id}>
196 |                      <div data-id={element.id} onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={(e) => handleDrop(e, element.id)}>
197 |                         <LayerItem
198 |                             element={element}
199 |                             level={level}
200 |                             isSelected={selectedElementIds.includes(element.id)}
201 |                             onSelect={() => onSelectElement(element.id)}
202 |                             onToggleLock={() => onToggleLock(element.id)}
203 |                             onToggleVisibility={() => onToggleVisibility(element.id)}
204 |                             onRename={name => onRenameElement(element.id, name)}
205 |                             onDragStart={e => handleDragStart(e, element.id)}
206 |                             onDragOver={handleDragOver}
207 |                             onDragLeave={handleDragLeave}
208 |                             onDrop={(e) => handleDrop(e, element.id)}
209 |                         />
210 |                      </div>
211 |                     {renderOrderedLayers(elements, level + 1, element.id)}
212 |                 </React.Fragment>
213 |             ));
214 |     };
215 | 
216 | 
217 |     if (!isOpen) return null;
218 | 
219 |     return (
220 |         <div 
221 |             ref={panelRef}
222 |             className="absolute top-4 right-4 z-20 flex flex-col w-64 h-[calc(100vh-2rem)] backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl text-white overflow-hidden"
223 |             style={{ backgroundColor: 'var(--ui-bg-color)' }}
224 |         >
225 |             <div className="flex-shrink-0 flex justify-between items-center p-3 border-b border-white/10 cursor-move">
226 |                 <h3 className="text-base font-semibold">Layers</h3>
227 |                 <button onClick={onClose} className="text-gray-400 hover:text-white p-1 rounded-full">
228 |                     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
229 |                 </button>
230 |             </div>
231 |             <div className="flex-grow p-2 overflow-y-auto">
232 |                  {renderOrderedLayers([...elements].reverse())}
233 |             </div>
234 |         </div>
235 |     );
236 | };
237 |

--------------------------------------------------------------------------------
/translations.ts:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | const QUICK_PROMPTS_EN = [
  4 |     { name: 'Image to Figure', value: 'turn this photo into a character figure. Behind it, place a box with the character’s image printed on it, and a computer showing the Blender modeling process on its screen. In front of the box, add a round plastic base with the character figure standing on it. set the scene indoors if possible' },
  5 |     { name: 'Change Character Perspective', value: 'change the Camera anglo a high-angled selfie perspective looking down at the woman, while preserving her exact facial features, expression, and clothing, Maintain the same living room interior background with the sofa, natural lighting, and overall photographic composition and style.' },
  6 |     { name: 'Architecture to Model', value: 'convert this photo into a architecture model. Behind the model, there should be a cardboard box with an image of the architecture from the photo on it. There should also be a computer, with the content on the computer screen showing the Blender modeling process of the figurine. In front of the cardboard box, place a cardstock and put the architecture model from the photo I provided on it. I hope the PVC material can be clearly presented. It would be even better if the background is indoors.' },
  7 |     { name: 'Combine Objects', value: 'Combine them together' },
  8 |     { name: 'High-Res Restoration', value: 'Enhance this image to high resolution' },
  9 |     { name: 'Image to Line Art', value: 'Turn into a line art hand-drawn sketch' },
 10 |     { name: 'Color with Palette', value: 'Color accurately using the color palette' },
 11 |     { name: 'Generate Character Sheet', value: 'Generate a Character Design Sheet for me\n\nScale settings (comparison of different heights, head-to-body ratio, etc.)\n\nThree-view drawing (front, side, back)\n\nExpression Sheet\n\nPose Sheet → Various common poses\n\nCostume Design' },
 12 |     { name: 'Virtual/Reality Blend', value: 'Add a couple sitting at the seats, happily drinking coffee and talking, with characters in a cute, thick-lined illustration style' },
 13 |     { name: 'Anime to Photorealistic', value: 'Generate a highly detailed photo of a girl cosplaying this illustration, at Comiket. Exactly replicate the same pose, body posture, hand gestures, facial expression, and camera framing as in the original illustration. Keep the same angle, perspective, and composition, without any deviation' },
 14 |     { name: 'Pose Reference', value: 'Accurately change the person to the pose in the reference image, professional studio shot' },
 15 |     { name: 'Image to Action Figure', value: 'Transform the the person in the photo into an action figure, styled after [CHARACTER_NAME] from [SOURCE / CONTEXT]. \nNext to the figure, display the accessories including [ITEM_1], [ITEM_2], and [ITEM_3]. \nOn the top of the toy box, write "[BOX_LABEL_TOP]", and underneath it, "[BOX_LABEL_BOTTOM]". \nPlace the box in a [BACKGROUND_SETTING] environment. \nVisualize this in a highly realistic way with attention to fine details.' },
 16 |     { name: 'Image to Funko Pop', value: "Transform the person in the photo into the style of a Funko Pop figure packaging box, presented in an isometric perspective. Label the packaging with the title 'ZHOGUE'. Inside the box, showcase the figure based on the person in the photo, accompanied by their essential items (such as cosmetics, bags, or others). Next to the box, also display the actual figure itself outside of the packaging, rendered in a realistic and lifelike style." },
 17 |     { name: 'Image to LEGO', value: "Transform the person in the photo into the style of a LEGO minifigure packaging box, presented in an isometric perspective. Label the packaging with the title 'ZHOGUE'. Inside the box, showcase the LEGO minifigure based on the person in the photo, accompanied by their essential items (such as cosmetics, bags, or others) as LEGO accessories. Next to the box, also display the actual LEGO minifigure itself outside of the packaging, rendered in a realistic and lifelike style." },
 18 |     { name: 'Image to Knit Doll', value: 'A close-up, professionally composed photograph showing a handmade crocheted yarn doll being gently held in both hands. The doll has a rounded shape and an adorable chibi-style appearance, with vivid color contrasts and rich details. The hands holding the doll appear natural and tender, with clearly visible finger posture, and the skin texture and light-shadow transitions look soft and realistic, conveying a warm, tangible touch. The background is slightly blurred, depicting an indoor setting with a warm wooden tabletop and natural light streaming in through a window, creating a cozy and intimate atmosphere. The overall image conveys a sense of exquisite craftsmanship and a cherished, heartwarming emotion.' },
 19 |     { name: 'Image to Barbie Doll', value: "Transform the person in the photo into the style of a Barbie doll packaging box, presented in an isometric perspective. Label the packaging with the title 'ZHOGUE'. Inside the box, showcase the Barbie doll version of the person from the photo, accompanied by their essential items (such as cosmetics, bags, or others) designed as stylish Barbie accessories. Next to the box, also display the actual Barbie doll itself outside of the packaging, rendered in a realistic and lifelike style, resembling official Barbie promotional renders" },
 20 |     { name: 'Anything to Gundam', value: "Transform the person in the photo into the style of a Gundam model kit packaging box, presented in an isometric perspective. Label the packaging with the title 'ZHOGUE'. Inside the box, showcase a Gundam-style mecha version of the person from the photo, accompanied by their essential items (such as cosmetics, bags, or others) redesigned as futuristic mecha accessories. The packaging should resemble authentic Gunpla boxes, with technical illustrations, instruction-manual style details, and sci-fi typography. Next to the box, also display the actual Gundam-style mecha figure itself outside of the packaging, rendered in a realistic and lifelike style, similar to official Bandai promotional renders." },
 21 |     { name: 'Cyber-Baby Generator', value: 'Generate what the child of the two people in the picture would look like, professional photography' },
 22 |     { name: 'Product Design to Reality', value: 'turn this illustration of a perfume into a realistic version, Frosted glass bottle with a marble cap' },
 23 |     { name: 'Photo to Pro Shot', value: 'Transform the person in the photo into highly stylized ultra-realistic portrait, with sharp facial features and flawless fair skin, standing confidently against a bold green gradient background. Dramatic, cinematic lighting highlights her facial structure, evoking the look of a luxury fashion magazine cover. Editorial photography style, high-detail, 4K resolution, symmetrical composition, minimalistic background' },
 24 |     { name: 'Lighting Reference', value: 'Change the lighting of the original image to match the reference image, professional photography' },
 25 |     { name: 'Generate Painting Process', value: 'Generate a four-panel painting process for the character. Step 1: Line art, Step 2: Flat colors, Step 3: Add shadows, Step 4: Final details. No text.' },
 26 |     { name: 'Any Style to Realistic', value: 'turn this illustration into realistic version' },
 27 |     { name: 'Image to Keychain', value: 'Turn this photo into a cute charm hanging on the bag in the photo\nTurn this photo into a flat acrylic keychain hanging on the bag in the photo\nTurn this photo into a flat rubber keychain hanging on the bag in the photo' },
 28 |     { name: 'Superimpose Effects', value: 'Superimpose the effect from the effect image onto the main photo' },
 29 |     { name: 'Product Packaging Mockup', value: 'Place the image on a packaging box and set it in a minimalist scene, professional photography' },
 30 |     { name: 'Virtual Makeup Try-on', value: 'Apply the makeup from the image to the person, while maintaining their original pose' },
 31 |     { name: 'Expression Reference', value: 'Change the person\'s expression to match the new image' },
 32 | ];
 33 | 
 34 | const QUICK_PROMPTS_ZHO = [
 35 |     { name: '图片变手办', value: '将这张照片变成一个人物手办。在它后面，放置一个印有角色形象的盒子，以及一台屏幕上显示着Blender建模过程的电脑。在盒子前面，加一个圆形的塑料底座，上面站着角色手办。如果可能的话，将场景设置在室内' },
 36 |     { name: '改变人物视角', value: '将相机角度改为高角度自拍视角，俯视女性，同时保留她确切的面部特征、表情和服装，保持相同的客厅室内背景、沙发、自然光以及整体的摄影构图和风格。' },
 37 |     { name: '建筑变模型', value: '将这张照片转换成一个建筑模型。模型后面应该有一个纸板箱，上面印有照片中建筑的图片。还应该有一台电脑，电脑屏幕上显示着该模型的Blender建模过程。在纸板箱前面，放置一张卡纸，并把照片中的建筑模型放在上面。我希望PVC材质能清晰呈现。如果背景是室内的就更好了。' },
 38 |     { name: '组合对象', value: '把它们组合起来' },
 39 |     { name: '高清修复', value: '将此图片增强为高分辨率' },
 40 |     { name: '图片转线稿', value: '变成线稿手绘图' },
 41 |     { name: '使用调色板上色', value: '准确使用色卡上色' },
 42 |     { name: '生成角色设定', value: '为我生成人物的角色设定（Character Design）\n\n比例设定（不同身高对比、头身比等）\n\n三视图（正面、侧面、背面）\n\n表情设定（Expression Sheet） \n\n动作设定（Pose Sheet） → 各种常见姿势\n\n服装设定（Costume Design）' },
 43 |     { name: '虚拟与现实融合', value: '在图中加上一对情侣坐在座位上开心的喝咖啡和交谈，人物都是粗线稿可爱插画风格' },
 44 |     { name: '动漫转照片', value: '生成一张在Comiket上cosplay这张插画的女孩的高度详细照片。精确复制与原始插画相同的姿势、身体姿态、手势、面部表情和相机取景。保持相同的角度、透视和构图，没有任何偏差' },
 45 |     { name: '姿势参考', value: '人物准确换成姿势图的姿势，专业摄影棚拍摄' },
 46 |     { name: '图片转可动人偶', value: '将照片中的人物转换成一个可动人偶，风格模仿[来源/背景]中的[角色名称]。\n在人偶旁边，展示包括[物品1]、[物品2]和[物品3]在内的配件。\n在玩具盒顶部写上“[顶部标签]”，在其下方写上“[底部标签]”。\n将盒子放置在[背景设定]环境中。\n以高度逼真的方式并注重细节来呈现此场景。' },
 47 |     { name: '图片转Funko Pop', value: '将照片中的人物转换成Funko Pop人偶包装盒的风格，以等距视角呈现。包装上标注标题“ZHOGUE”。盒子内展示基于照片中人物的人偶，并附带他们的基本物品（如化妆品、包包或其他）。在盒子旁边，也以逼真生动的风格展示包装外的实际人偶。' },
 48 |     { name: '图片转乐高', value: '将照片中的人物转换成乐高小人仔包装盒的风格，以等距视角呈现。包装上标注标题“ZHOGUE”。盒子内展示基于照片中人物的乐高小人仔，并附带他们的基本物品（如化妆品、包包或其他）作为乐高配件。在盒子旁边，也以逼真生动的风格展示包装外的实际乐高小人仔。' },
 49 |     { name: '图片转针织娃娃', value: '一张特写、专业构图的照片，展示了一个手工钩编的毛线娃娃被温柔地捧在双手之中。娃娃造型圆润，呈可爱的赤壁风格，色彩对比鲜明，细节丰富。捧着娃娃的双手显得自然而温柔，手指姿势清晰可见，皮肤纹理和光影过渡看起来柔软逼真，传达出温暖、可触的感觉。背景略微模糊，描绘了一个室内场景，有温暖的木质桌面和透过窗户射入的自然光，营造出舒适亲密的氛围。整体画面传达出一种精致的手工艺感和被珍视、温馨的情感。' },
 50 |     { name: '图片转芭比娃娃', value: '将照片中的人物转换成芭比娃娃包装盒的风格，以等距视角呈现。包装上标注标题“ZHOGUE”。盒子内展示照片中人物的芭比娃娃版本，并附带他们的基本物品（如化妆品、包包或其他）设计成时尚的芭比配件。在盒子旁边，也以逼真生动的风格展示包装外的实际芭比娃娃，类似于官方芭比的宣传渲染图。' },
 51 |     { name: '万物皆可高达', value: '将照片中的人物转换成高达模型套件包装盒的风格，以等距视角呈现。包装上标注标题“ZHOGUE”。盒子内展示照片中人物的高达风格机甲版本，并附带他们的基本物品（如化妆品、包包或其他）重新设计成未来派的机甲配件。包装应类似于正品高达模型盒子，带有技术插图、说明书风格的细节和科幻字体。在盒子旁边，也以逼真生动的风格展示包装外的实际高达风格机甲，类似于官方万代的宣传渲染图。' },
 52 |     { name: '赛博子女生成器', value: '生成图中两人物所生孩子的样子，专业摄影' },
 53 |     { name: '产品设计转实物', value: '将这个香水插图变成逼真版本，磨砂玻璃瓶配大理石盖' },
 54 |     { name: '照片转专业摄影', value: '将照片中的人物转换成高度风格化的超逼真肖像，面部特征鲜明，皮肤白皙无瑕，自信地站在大胆的绿色渐变背景前。戏剧性的电影灯光突显了她的面部结构，唤起了奢侈时尚杂志封面的感觉。编辑摄影风格，高细节，4K分辨率，对称构图，简约背景' },
 55 |     { name: '灯光参考', value: '原图换成参考图打光，专业摄影' },
 56 |     { name: '生成绘画过程', value: '为人物生成绘画过程四宫格，第一步：线稿，第二步平铺颜色，第三步：增加阴影，第四步：细化成型。不要文字' },
 57 |     { name: '任意风格转写实', value: '将这个插图变成逼真版本' },
 58 |     { name: '图片转钥匙扣', value: '把这张照片变成一个可爱挂件 挂在 照片的包包上\n把这张照片变成一个亚克力材质的扁平钥匙扣 挂在 照片的包包上\n把这张照片变成一个橡胶材质的扁平钥匙扣 挂在照片的包包上' },
 59 |     { name: '叠加效果', value: '为图片照片叠加上效果图片的效果' },
 60 |     { name: '产品包装样机', value: '把图片贴在包装盒上，并放在极简设计的布景中，专业摄影' },
 61 |     { name: '虚拟试妆', value: '为人物化上图片的妆，还保持人物原本的姿势' },
 62 |     { name: '表情参考', value: '人物换成新图片的表情' },
 63 | ];
 64 | 
 65 | export const translations = {
 66 |   en: {
 67 |     toolbar: {
 68 |       undo: 'Undo',
 69 |       redo: 'Redo',
 70 |       select: 'Select & Move',
 71 |       pan: 'Pan Canvas',
 72 |       shapes: 'Shapes',
 73 |       drawingTools: 'Drawing Tools',
 74 |       draw: 'Pencil',
 75 |       highlighter: 'Inpaint Brush',
 76 |       lasso: 'Lasso Select',
 77 |       rectangle: 'Rectangle',
 78 |       circle: 'Circle',
 79 |       triangle: 'Triangle',
 80 |       arrow: 'Arrow',
 81 |       line: 'Line',
 82 |       text: 'Text',
 83 |       erase: 'Erase',
 84 |       strokeColor: 'Stroke Color',
 85 |       strokeWidth: 'Stroke Width',
 86 |       upload: 'Upload Image',
 87 |       settings: 'Canvas Settings',
 88 |       layers: 'Layers',
 89 |       crop: {
 90 |         title: 'Crop Image',
 91 |         cancel: 'Cancel',
 92 |         confirm: 'Confirm',
 93 |       },
 94 |     },
 95 |     promptBar: {
 96 |         placeholderDefault: 'Describe an image to generate from scratch...',
 97 |         placeholderDefaultVideo: 'Describe a video to generate from scratch...',
 98 |         placeholderSingle: 'Describe the changes or select a quick effect...',
 99 |         placeholderMultiple: (count: number) => `Using ${count} elements as context. Describe the result or select an effect...`,
100 |         generate: 'Generate',
101 |         imageMode: 'Image',
102 |         videoMode: 'Video',
103 |         aspectRatioHorizontal: 'Horizontal (16:9)',
104 |         aspectRatioVertical: 'Vertical (9:16)',
105 |     },
106 |     quickPromptsAriaLabel: 'Select a quick effect',
107 |     quickPrompts: QUICK_PROMPTS_EN,
108 |     myEffects: {
109 |         title: 'My Effects',
110 |         saveEffectTooltip: 'Save as custom effect',
111 |         saveEffectPrompt: 'Enter a name for this effect:',
112 |         deleteEffectTooltip: 'Delete effect',
113 |         noEffects: 'No custom effects yet.',
114 |         defaultName: 'My Custom Effect',
115 |     },
116 |     settings: {
117 |         title: 'Settings',
118 |         language: 'Language',
119 |         uiTheme: 'UI Theme',
120 |         color: 'Color',
121 |         opacity: 'Opacity',
122 |         actionButtonsTheme: 'Action Buttons',
123 |         canvas: 'Canvas',
124 |         backgroundColor: 'Background Color',
125 |         mouseWheel: 'Mouse Wheel',
126 |         zoom: 'Zoom',
127 |         scroll: 'Scroll',
128 |     },
129 |     contextMenu: {
130 |         copy: 'Copy',
131 |         download: 'Download',
132 |         crop: 'Crop',
133 |         delete: 'Delete',
134 |         fillColor: 'Fill Color',
135 |         fontColor: 'Font Color',
136 |         fontSize: 'Font Size',
137 |         strokeColor: 'Stroke Color',
138 |         strokeWidth: 'Stroke Width',
139 |         strokeStyle: 'Stroke Style',
140 |         solid: 'Solid',
141 |         dashed: 'Dashed',
142 |         dotted: 'Dotted',
143 |         borderRadius: 'Corner Radius',
144 |         bringForward: 'Bring Forward',
145 |         sendBackward: 'Send Backward',
146 |         bringToFront: 'Bring to Front',
147 |         sendToBack: 'Send to Back',
148 |         rasterize: 'Rasterize Selection',
149 |         group: 'Group',
150 |         ungroup: 'Ungroup',
151 |         alignment: {
152 |             alignLeft: 'Align Left',
153 |             alignCenter: 'Align Center',
154 |             alignRight: 'Align Right',
155 |             alignTop: 'Align Top',
156 |             alignMiddle: 'Align Middle',
157 |             alignBottom: 'Align Bottom',
158 |         },
159 |     }
160 |   },
161 |   zho: {
162 |     toolbar: {
163 |       undo: '撤销',
164 |       redo: '重做',
165 |       select: '选择并移动',
166 |       pan: '平移画布',
167 |       shapes: '形状',
168 |       drawingTools: '绘图工具',
169 |       draw: '铅笔',
170 |       highlighter: '局部重绘',
171 |       lasso: '套索选择',
172 |       rectangle: '矩形',
173 |       circle: '圆形',
174 |       triangle: '三角形',
175 |       arrow: '箭头',
176 |       line: '直线',
177 |       text: '文本',
178 |       erase: '橡皮擦',
179 |       strokeColor: '描边颜色',
180 |       strokeWidth: '描边宽度',
181 |       upload: '上传图片',
182 |       settings: '画布设置',
183 |       layers: '图层',
184 |       crop: {
185 |         title: '裁剪图片',
186 |         cancel: '取消',
187 |         confirm: '确认',
188 |       },
189 |     },
190 |     promptBar: {
191 |         placeholderDefault: '描述一下您想生成什么样的图片...',
192 |         placeholderDefaultVideo: '描述一下您想生成什么样的视频...',
193 |         placeholderSingle: '描述要做的修改，或选择一个快捷效果...',
194 |         placeholderMultiple: (count: number) => `已选择 ${count} 个元素作为上下文。请描述结果或选择一个效果...`,
195 |         generate: '生成',
196 |         imageMode: '图片',
197 |         videoMode: '视频',
198 |         aspectRatioHorizontal: '横向 (16:9)',
199 |         aspectRatioVertical: '纵向 (9:16)',
200 |     },
201 |     quickPromptsAriaLabel: '选择一个快捷效果',
202 |     quickPrompts: QUICK_PROMPTS_ZHO,
203 |     myEffects: {
204 |         title: '我的效果',
205 |         saveEffectTooltip: '保存为自定义效果',
206 |         saveEffectPrompt: '为此效果输入一个名称：',
207 |         deleteEffectTooltip: '删除效果',
208 |         noEffects: '暂无自定义效果。',
209 |         defaultName: '我的自定义效果',
210 |     },
211 |     settings: {
212 |         title: '设置',
213 |         language: '语言',
214 |         uiTheme: '界面主题',
215 |         color: '颜色',
216 |         opacity: '不透明度',
217 |         actionButtonsTheme: '功能按钮',
218 |         canvas: '画布',
219 |         backgroundColor: '背景颜色',
220 |         mouseWheel: '鼠标滚轮',
221 |         zoom: '缩放',
222 |         scroll: '滚动',
223 |     },
224 |     contextMenu: {
225 |         copy: '复制',
226 |         download: '下载',
227 |         crop: '裁剪',
228 |         delete: '删除',
229 |         fillColor: '填充颜色',
230 |         fontColor: '字体颜色',
231 |         fontSize: '字号',
232 |         strokeColor: '描边颜色',
233 |         strokeWidth: '描边宽度',
234 |         strokeStyle: '线条样式',
235 |         solid: '实线',
236 |         dashed: '虚线',
237 |         dotted: '点线',
238 |         borderRadius: '圆角大小',
239 |         bringForward: '上移一层',
240 |         sendBackward: '下移一层',
241 |         bringToFront: '置于顶层',
242 |         sendToBack: '置于底层',
243 |         rasterize: '栅格化选中项',
244 |         group: '创建编组',
245 |         ungroup: '取消编组',
246 |         alignment: {
247 |             alignLeft: '左对齐',
248 |             alignCenter: '水平居中',
249 |             alignRight: '右对齐',
250 |             alignTop: '顶对齐',
251 |             alignMiddle: '垂直居中',
252 |             alignBottom: '底对齐',
253 |         },
254 |     }
255 |   }
256 | };
257 |

--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2022",
 4 |     "experimentalDecorators": true,
 5 |     "useDefineForClassFields": false,
 6 |     "module": "ESNext",
 7 |     "lib": [
 8 |       "ES2022",
 9 |       "DOM",
10 |       "DOM.Iterable"
11 |     ],
12 |     "skipLibCheck": true,
13 |     "types": [
14 |       "node"
15 |     ],
16 |     "moduleResolution": "bundler",
17 |     "isolatedModules": true,
18 |     "moduleDetection": "force",
19 |     "allowJs": true,
20 |     "jsx": "react-jsx",
21 |     "paths": {
22 |       "@/*": [
23 |         "./*"
24 |       ]
25 |     },
26 |     "allowImportingTsExtensions": true,
27 |     "noEmit": true
28 |   }
29 | }

--------------------------------------------------------------------------------
/types.ts:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | export type Tool = 'select' | 'pan' | 'draw' | 'erase' | 'rectangle' | 'circle' | 'triangle' | 'text' | 'arrow' | 'highlighter' | 'lasso' | 'line';
  4 | 
  5 | export type WheelAction = 'zoom' | 'pan';
  6 | 
  7 | export type GenerationMode = 'image' | 'video';
  8 | 
  9 | export interface Point {
 10 |   x: number;
 11 |   y: number;
 12 | }
 13 | 
 14 | interface CanvasElementBase {
 15 |   id: string;
 16 |   x: number;
 17 |   y: number;
 18 |   name?: string;
 19 |   isVisible?: boolean;
 20 |   isLocked?: boolean;
 21 |   parentId?: string;
 22 | }
 23 | 
 24 | export interface ImageElement extends CanvasElementBase {
 25 |   type: 'image';
 26 |   href: string; 
 27 |   width: number;
 28 |   height: number;
 29 |   mimeType: string;
 30 |   borderRadius?: number;
 31 | }
 32 | 
 33 | export interface VideoElement extends CanvasElementBase {
 34 |   type: 'video';
 35 |   href: string; // Blob URL
 36 |   width: number;
 37 |   height: number;
 38 |   mimeType: string;
 39 | }
 40 | 
 41 | export interface PathElement extends CanvasElementBase {
 42 |   type: 'path';
 43 |   points: Point[];
 44 |   strokeColor: string;
 45 |   strokeWidth: number;
 46 |   strokeOpacity?: number;
 47 | }
 48 | 
 49 | export interface ShapeElement extends CanvasElementBase {
 50 |     type: 'shape';
 51 |     shapeType: 'rectangle' | 'circle' | 'triangle';
 52 |     width: number;
 53 |     height: number;
 54 |     strokeColor: string;
 55 |     strokeWidth: number;
 56 |     fillColor: string;
 57 |     borderRadius?: number;
 58 |     strokeDashArray?: [number, number];
 59 | }
 60 | 
 61 | export interface TextElement extends CanvasElementBase {
 62 |     type: 'text';
 63 |     text: string;
 64 |     fontSize: number;
 65 |     fontColor: string;
 66 |     width: number;
 67 |     height: number;
 68 | }
 69 | 
 70 | export interface ArrowElement extends CanvasElementBase {
 71 |     type: 'arrow';
 72 |     points: [Point, Point];
 73 |     strokeColor: string;
 74 |     strokeWidth: number;
 75 | }
 76 | 
 77 | export interface LineElement extends CanvasElementBase {
 78 |     type: 'line';
 79 |     points: [Point, Point];
 80 |     strokeColor: string;
 81 |     strokeWidth: number;
 82 | }
 83 | 
 84 | export interface GroupElement extends CanvasElementBase {
 85 |     type: 'group';
 86 |     width: number;
 87 |     height: number;
 88 | }
 89 | 
 90 | 
 91 | export type Element = ImageElement | PathElement | ShapeElement | TextElement | ArrowElement | LineElement | GroupElement | VideoElement;
 92 | 
 93 | export interface UserEffect {
 94 |   id: string;
 95 |   name: string;
 96 |   value: string;
 97 | }
 98 | 
 99 | export interface Board {
100 |   id: string;
101 |   name: string;
102 |   elements: Element[];
103 |   history: Element[][];
104 |   historyIndex: number;
105 |   panOffset: Point;
106 |   zoom: number;
107 |   canvasBackgroundColor: string;
108 | }
109 |

--------------------------------------------------------------------------------
/utils/fileUtils.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | export const fileToDataUrl = (file: File): Promise<{ dataUrl: string; mimeType: string }> => {
 3 |     return new Promise((resolve, reject) => {
 4 |         const reader = new FileReader();
 5 |         reader.onload = () => {
 6 |             if (typeof reader.result === 'string') {
 7 |                 resolve({ dataUrl: reader.result, mimeType: file.type });
 8 |             } else {
 9 |                 reject(new Error('Failed to read file as a data URL.'));
10 |             }
11 |         };
12 |         reader.onerror = (error) => reject(error);
13 |         reader.readAsDataURL(file);
14 |     });
15 | };
16 |

--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import path from 'path';
 2 | import { defineConfig, loadEnv } from 'vite';
 3 | import react from '@vitejs/plugin-react';
 4 | 
 5 | export default defineConfig(({ mode }) => {
 6 |     const env = loadEnv(mode, '.', '');
 7 |     return {
 8 |       server: {
 9 |         port: 3000,
10 |         host: '0.0.0.0',
11 |       },
12 |       plugins: [react()],
13 |       define: {
14 |         'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
15 |         'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
16 |       },
17 |       resolve: {
18 |         alias: {
19 |           '@': path.resolve(__dirname, '.'),
20 |         }
21 |       }
22 |     };
23 | });
24 |

--------------------------------------------------------------------------------

Boards

{t('settings.title')}

{t('settings.uiTheme')}

{t('settings.actionButtonsTheme')}

{t('settings.canvas')}

Layers