Initialize xpaintai project with core files and basic structure

.gitignore

@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.tsx

@@ -0,0 +1,237 @@
+import React, { useState, useCallback } from 'react';
+import Toolbar from './components/Toolbar';
+import CanvasComponent from './components/CanvasComponent';
+import AiEditModal from './components/AiEditModal';
+import ZoomSlider from './components/ZoomSlider';
+import SettingsPanel from './components/SettingsPanel';
+import ConfirmModal from './components/ConfirmModal';
+import { DEFAULT_AI_API_ENDPOINT } from './constants';
+
+// Custom Hooks
+import { useToasts } from './hooks/useToasts';
+import { useCanvasHistory } from './hooks/useCanvasHistory';
+import { useAiFeatures, AiImageQuality } from './hooks/useAiFeatures';
+import { useDrawingTools } from './hooks/useDrawingTools';
+import { useFullscreen } from './hooks/useFullscreen';
+import { useConfirmModal } from './hooks/useConfirmModal';
+import { useCanvasFileUtils } from './hooks/useCanvasFileUtils';
+
+const App: React.FC = () => {
+  // Core UI States
+  const [zoomLevel, setZoomLevel] = useState<number>(0.5);
+  const [showSettingsPanel, setShowSettingsPanel] = useState<boolean>(false);
+  
+  // Settings specific states
+  const [showZoomSlider, setShowZoomSlider] = useState<boolean>(true);
+  const [aiImageQuality, setAiImageQuality] = useState<AiImageQuality>('low');
+  const [aiApiEndpoint, setAiApiEndpoint] = useState<string>(DEFAULT_AI_API_ENDPOINT);
+
+  // Custom Hooks Instantiation
+  const { toasts, showToast } = useToasts();
+  const {
+    historyStack,
+    currentHistoryIndex,
+    canvasWidth,
+    canvasHeight,
+    isLoading: isCanvasLoading,
+    currentDataURL,
+    handleDrawEnd,
+    handleUndo,
+    handleRedo,
+    updateCanvasState,
+  } = useCanvasHistory();
+
+  const {
+    penColor,
+    setPenColor,
+    penSize,
+    setPenSize,
+    isEraserMode,
+    toggleEraserMode,
+    effectivePenColor,
+  } = useDrawingTools();
+
+  const { isFullscreenActive, toggleFullscreen } = useFullscreen(showToast);
+  const { confirmModalInfo, requestConfirmation, closeConfirmModal } = useConfirmModal();
+
+  const {
+    handleLoadImageFile,
+    handleExportImage,
+    handleClearCanvas,
+    handleCanvasSizeChange,
+  } = useCanvasFileUtils({
+    canvasState: { currentDataURL, canvasWidth, canvasHeight },
+    historyActions: { updateCanvasState },
+    uiActions: { showToast, setZoomLevel },
+    confirmModalActions: { requestConfirmation },
+  });
+
+  const {
+    isMagicUploading,
+    showAiEditModal,
+    aiPrompt,
+    isGeneratingAiImage,
+    sharedImageUrlForAi,
+    aiEditError,
+    handleMagicUpload,
+    handleGenerateAiImage,
+    handleCancelAiEdit,
+    setAiPrompt,
+  } = useAiFeatures({
+    currentDataURL,
+    showToast,
+    updateCanvasState,
+    setZoomLevel,
+    aiImageQuality,
+    aiApiEndpoint,
+    currentCanvasWidth: canvasWidth, // Pass current canvas dimensions
+    currentCanvasHeight: canvasHeight, // Pass current canvas dimensions
+  });
+
+  // Simple UI Toggles
+  const handleToggleSettingsPanel = () => setShowSettingsPanel(prev => !prev);
+  const canShare = !!currentDataURL;
+
+  // Loading State
+  if (isCanvasLoading) {
+    return (
+      <div className="flex justify-center items-center h-screen bg-gradient-to-br from-slate-200 to-sky-100">
+        <div className="text-center p-8 bg-white/50 backdrop-blur-md rounded-xl shadow-2xl">
+            <svg className="animate-spin h-12 w-12 text-blue-600 mx-auto mb-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                <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>
+            </svg>
+            <p className="text-2xl font-semibold text-slate-700">Loading Your Canvas...</p>
+            <p className="text-sm text-slate-500 mt-1">Getting things ready!</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Main App Render
+  return (
+    <div className="min-h-screen flex flex-col items-center bg-gradient-to-br from-slate-100 to-sky-200 font-sans">
+      <Toolbar
+        penColor={penColor}
+        onColorChange={setPenColor}
+        penSize={penSize}
+        onSizeChange={setPenSize}
+        onUndo={handleUndo}
+        canUndo={currentHistoryIndex > 0}
+        onRedo={handleRedo}
+        canRedo={currentHistoryIndex < historyStack.length - 1 && historyStack.length > 0}
+        onLoadImage={handleLoadImageFile}
+        onExportImage={handleExportImage}
+        onClearCanvas={handleClearCanvas}
+        isEraserMode={isEraserMode}
+        onToggleEraser={toggleEraserMode}
+        onMagicUpload={handleMagicUpload}
+        isMagicUploading={isMagicUploading}
+        canShare={canShare}
+        onToggleSettings={handleToggleSettingsPanel}
+      />
+      <main className="flex-grow grid place-items-center p-4 md:p-6 w-full mt-4 mb-4 overflow-auto">
+        <div 
+            style={{ 
+                transform: `scale(${zoomLevel})`, 
+                transformOrigin: 'top left',
+                transition: 'transform 0.1s ease-out'
+            }}
+            aria-label={`Canvas zoomed to ${Math.round(zoomLevel * 100)}%`}
+        >
+            {currentDataURL ? (
+            <CanvasComponent
+                key={`canvas-comp-${canvasWidth}-${canvasHeight}-${currentHistoryIndex}`}
+                penColor={effectivePenColor}
+                penSize={penSize}
+                isEraserMode={isEraserMode}
+                dataURLToLoad={currentDataURL}
+                onDrawEnd={handleDrawEnd} 
+                canvasPhysicalWidth={canvasWidth}
+                canvasPhysicalHeight={canvasHeight}
+                zoomLevel={zoomLevel}
+            />
+            ) : ( 
+            <div 
+                style={{ width: `${canvasWidth}px`, height: `${canvasHeight}px` }} 
+                className="border-2 border-slate-300 rounded-lg shadow-xl bg-white flex justify-center items-center"
+            >
+                <p className="text-slate-500">Initializing Canvas...</p>
+            </div>
+            )}
+        </div>
+      </main>
+
+      {showAiEditModal && sharedImageUrlForAi && (
+        <AiEditModal
+          isOpen={showAiEditModal}
+          onClose={handleCancelAiEdit}
+          onGenerate={handleGenerateAiImage}
+          imageUrl={sharedImageUrlForAi}
+          prompt={aiPrompt}
+          onPromptChange={setAiPrompt}
+          isLoading={isGeneratingAiImage}
+          error={aiEditError}
+        />
+      )}
+      
+      {showZoomSlider && (
+        <ZoomSlider 
+          zoomLevel={zoomLevel} 
+          onZoomChange={setZoomLevel} 
+        />
+      )}
+
+      <SettingsPanel
+        isOpen={showSettingsPanel}
+        onClose={handleToggleSettingsPanel}
+        showZoomSlider={showZoomSlider}
+        onShowZoomSliderChange={setShowZoomSlider}
+        aiImageQuality={aiImageQuality}
+        onAiImageQualityChange={setAiImageQuality}
+        aiApiEndpoint={aiApiEndpoint}
+        onAiApiEndpointChange={setAiApiEndpoint}
+        isFullscreenActive={isFullscreenActive}
+        onToggleFullscreen={toggleFullscreen}
+        currentCanvasWidth={canvasWidth}
+        currentCanvasHeight={canvasHeight}
+        onCanvasSizeChange={handleCanvasSizeChange}
+      />
+
+      <ConfirmModal
+        isOpen={confirmModalInfo.isOpen}
+        title={confirmModalInfo.title}
+        message={confirmModalInfo.message}
+        onConfirm={confirmModalInfo.onConfirmAction}
+        onCancel={closeConfirmModal}
+        isConfirmDestructive={confirmModalInfo.isDestructive}
+        confirmText={confirmModalInfo.confirmText}
+        cancelText={confirmModalInfo.cancelText}
+      />
+
+      <div className="fixed bottom-20 left-1/2 -translate-x-1/2 z-[100] flex flex-col items-center space-y-2 w-full px-4 pointer-events-none">
+        {toasts.map(toast => (
+          <div
+            key={toast.id}
+            className={`px-3 py-2 rounded-md shadow-lg text-white text-xs transition-all duration-300 ease-in-out transform
+              w-11/12 max-w-md break-words pointer-events-auto
+              ${toast.type === 'success' ? 'bg-green-600' : ''}
+              ${toast.type === 'error' ? 'bg-red-600' : ''}
+              ${toast.type === 'info' ? 'bg-blue-600' : ''}
+              opacity-100 translate-y-0`}
+            role="alert"
+            aria-live="assertive"
+          >
+            {toast.message}
+          </div>
+        ))}
+      </div>
+
+      <footer className="w-full text-center py-3 text-xs text-slate-500 bg-slate-200 border-t border-slate-300 mt-auto">
+        React Paint App &copy; {new Date().getFullYear()}. Artwork autosaved to your browser's IndexedDB.
+      </footer>
+    </div>
+  );
+};
+
+export default App;

README.md

@@ -1,83 +1,14 @@
----
-title: Xpaintdev
-emoji: 🐠
-colorFrom: indigo
-colorTo: red
-sdk: static
-pinned: false
-app_build_command: npm run build
-app_file: dist/index.html
-license: mit
-short_description: cool paint app
----
+# Run and deploy your AI Studio app
 
-# Getting Started with Create React App
+This contains everything you need to run your app locally.
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## Run Locally
 
-## Available Scripts
+**Prerequisites:**  Node.js
 
-In the project directory, you can run:
 
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

apidoc/fileworker.js

@@ -0,0 +1,229 @@
+// Global rate limiting map and constants
+const requestCounter = new Map();
+const RATE_LIMIT = 20; // requests per minute
+const WINDOW_SIZE = 60 * 1000; // 1 minute in milliseconds
+const MAX_FILE_SIZE = 50 * 1024 * 1024; // 20MB in bytes
+const MAX_STORAGE = 100 * 1024 * 1024 * 1024; // 100GB in bytes
+
+async function getStorageUsage(bucket) {
+  let totalSize = 0;
+  let cursor;
+  
+  do {
+    const listing = await bucket.list({
+      cursor,
+      include: ['customMetadata', 'httpMetadata'],
+    });
+    
+    // Sum up sizes of all objects in current page
+    for (const object of listing.objects) {
+      totalSize += object.size;
+    }
+    
+    cursor = listing.cursor;
+  } while (cursor); // Continue until no more pages
+  
+  return totalSize;
+}
+
+function objectNotFound(objectName) {
+  return new Response(`<html><body>R2 object "<b>${objectName}</b>" not found</body></html>`, {
+    status: 404,
+    headers: {
+      'content-type': 'text/html; charset=UTF-8',
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, HEAD, PUT, POST, OPTIONS',
+      'Access-Control-Allow-Headers': '*'
+    }
+  });
+}
+
+function corsHeaders(headers = new Headers()) {
+  headers.set('Access-Control-Allow-Origin', '*');
+  headers.set('Access-Control-Allow-Methods', 'GET, HEAD, PUT, POST, OPTIONS');
+  headers.set('Access-Control-Allow-Headers', '*');
+  return headers;
+}
+
+function checkRateLimit(ip) {
+  const now = Date.now();
+  const userRequests = requestCounter.get(ip) || [];
+  
+  // Remove requests older than the window size
+  const validRequests = userRequests.filter(timestamp => now - timestamp < WINDOW_SIZE);
+  
+  if (validRequests.length >= RATE_LIMIT) {
+    return false;
+  }
+  
+  // Add current request timestamp
+  validRequests.push(now);
+  requestCounter.set(ip, validRequests);
+  
+  // Cleanup old entries periodically
+  if (Math.random() < 0.1) {
+    for (const [key, timestamps] of requestCounter.entries()) {
+      const validTimestamps = timestamps.filter(ts => now - ts < WINDOW_SIZE);
+      if (validTimestamps.length === 0) {
+        requestCounter.delete(key);
+      } else {
+        requestCounter.set(key, validTimestamps);
+      }
+    }
+  }
+  
+  return true;
+}
+
+export default {
+  async fetch(request, env) {
+    // Get client IP
+    const clientIP = request.headers.get('cf-connecting-ip') || 'unknown';
+    
+    // Check rate limit
+    if (!checkRateLimit(clientIP)) {
+      return new Response('Rate limit exceeded. Please try again later.', {
+        status: 429,
+        headers: corsHeaders(new Headers({
+          'Retry-After': '60'
+        }))
+      });
+    }
+
+    const url = new URL(request.url);
+    const objectName = url.pathname.slice(1);
+    console.log(`${request.method} object ${objectName}: ${request.url}`);
+
+    // Get current storage usage
+    const currentUsage = await getStorageUsage(env.MY_BUCKET);
+    console.log(`Current R2 storage usage: ${(currentUsage / (1024 * 1024 * 1024)).toFixed(2)} GB`);
+
+    // Handle CORS preflight
+    if (request.method === 'OPTIONS') {
+      return new Response(null, {
+        headers: corsHeaders()
+      });
+    }
+
+    if (request.method === 'GET' || request.method === 'HEAD') {
+      if (objectName === '') {
+        if (request.method === 'HEAD') {
+          return new Response(undefined, { 
+            status: 400,
+            headers: corsHeaders()
+          });
+        }
+        const options = {
+          prefix: url.searchParams.get('prefix') ?? undefined,
+          delimiter: url.searchParams.get('delimiter') ?? undefined,
+          cursor: url.searchParams.get('cursor') ?? undefined,
+          include: ['customMetadata', 'httpMetadata'],
+        };
+        console.log(JSON.stringify(options));
+        const listing = await env.MY_BUCKET.list(options);
+        return new Response('specify your path,current total storage used:' +currentUsage/1000/1000/1000+' GB', {
+          headers: corsHeaders(new Headers({
+            'content-type': 'application/json; charset=UTF-8'
+          }))
+        });
+      }
+
+      if (request.method === 'GET') {
+        const object = await env.MY_BUCKET.get(objectName, {
+          range: request.headers,
+          onlyIf: request.headers,
+        });
+        if (object === null) {
+          return objectNotFound(objectName);
+        }
+        const headers = new Headers();
+        object.writeHttpMetadata(headers);
+        headers.set('etag', object.httpEtag);
+        if (object.range) {
+          headers.set("content-range", `bytes ${object.range.offset}-${object.range.end ?? object.size - 1}/${object.size}`);
+        }
+        const status = object.body ? (request.headers.get("range") !== null ? 206 : 200) : 304;
+        return new Response(object.body, {
+          headers: corsHeaders(headers),
+          status
+        });
+      }
+
+      const object = await env.MY_BUCKET.head(objectName);
+      if (object === null) {
+        return objectNotFound(objectName);
+      }
+      const headers = new Headers();
+      object.writeHttpMetadata(headers);
+      headers.set('etag', object.httpEtag);
+      return new Response(null, {
+        headers: corsHeaders(headers)
+      });
+    }
+
+    if (request.method === 'PUT' || request.method === 'POST') {
+      // Check if storage usage exceeds limit
+      if (currentUsage >= MAX_STORAGE) {
+        return new Response('Storage limit exceeded (100GB). Delete some files before uploading.', {
+          status: 507, // Insufficient Storage
+          headers: corsHeaders()
+        });
+      }
+
+      // Check content length
+      const contentLength = parseInt(request.headers.get('content-length') || '0');
+      if (contentLength > MAX_FILE_SIZE) {
+        return new Response('File too large. Maximum size is 20MB.', {
+          status: 413,
+          headers: corsHeaders()
+        });
+      }
+
+      // Handle chunked uploads
+      if (!contentLength) {
+        const chunks = [];
+        let totalSize = 0;
+        for await (const chunk of request.body) {
+          totalSize += chunk.length;
+          if (totalSize > MAX_FILE_SIZE) {
+            return new Response('File too large. Maximum size is 20MB.', {
+              status: 413,
+              headers: corsHeaders()
+            });
+          }
+          chunks.push(chunk);
+        }
+        request.body = new Blob(chunks);
+      }
+
+      // Check if this upload would exceed storage limit
+      if (currentUsage + contentLength >= MAX_STORAGE) {
+        return new Response('This upload would exceed the 100GB storage limit.', {
+          status: 507,
+          headers: corsHeaders()
+        });
+      }
+
+      const object = await env.MY_BUCKET.put(objectName, request.body, {
+        httpMetadata: request.headers,
+      });
+      return new Response(objectName, {
+        headers: corsHeaders(new Headers({
+          'etag': object.httpEtag,
+          'X-Storage-Usage': `${(currentUsage / (1024 * 1024 * 1024)).toFixed(2)}GB`
+        }))
+      });
+    }
+
+    if (request.method === 'DELETE') {
+      return new Response('delete unsupported', {
+        headers: corsHeaders()
+      });
+    }
+
+    return new Response(`Unsupported method`, {
+      status: 400,
+      headers: corsHeaders()
+    });
+  }
+}

components/AiEditModal.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { MagicSparkleIcon, CloseIcon } from './icons';
+
+interface AiEditModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onGenerate: () => void;
+  imageUrl: string;
+  prompt: string;
+  onPromptChange: (newPrompt: string) => void;
+  isLoading: boolean;
+  error: string | null;
+}
+
+const AiEditModal: React.FC<AiEditModalProps> = ({
+  isOpen,
+  onClose,
+  onGenerate,
+  imageUrl,
+  prompt,
+  onPromptChange,
+  isLoading,
+  error,
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div 
+        className="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex justify-center items-center z-[1000] p-4"
+        aria-modal="true"
+        role="dialog"
+        aria-labelledby="ai-edit-modal-title"
+    >
+      <div className="bg-white rounded-lg shadow-2xl p-6 w-full max-w-lg transform transition-all">
+        <div className="flex justify-between items-center mb-4">
+          <h2 id="ai-edit-modal-title" className="text-xl font-semibold text-slate-700">Edit Image with AI</h2>
+          <button
+            onClick={onClose}
+            className="text-slate-400 hover:text-slate-600 transition-colors"
+            aria-label="Close AI edit modal"
+            disabled={isLoading}
+          >
+            <CloseIcon className="w-6 h-6" />
+          </button>
+        </div>
+
+        <div className="mb-4">
+          <p className="text-sm text-slate-600 mb-1">Your uploaded image:</p>
+          <img 
+            src={imageUrl} 
+            alt="Uploaded image preview" 
+            className="max-w-full h-auto max-h-48 rounded border border-slate-300 object-contain mx-auto" 
+          />
+        </div>
+
+        <div className="mb-4">
+          <label htmlFor="aiPrompt" className="block text-sm font-medium text-slate-700 mb-1">
+            Describe what you want to change:
+          </label>
+          <textarea
+            id="aiPrompt"
+            value={prompt}
+            onChange={(e) => onPromptChange(e.target.value)}
+            placeholder="e.g., 'make the cat wear a party hat', 'change background to a beach'"
+            rows={3}
+            className="w-full p-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-shadow text-sm"
+            disabled={isLoading}
+            aria-describedby={error ? "ai-edit-error" : undefined}
+          />
+        </div>
+
+        {error && (
+          <div id="ai-edit-error" className="mb-4 p-3 bg-red-100 border border-red-300 text-red-700 rounded-md text-sm" role="alert">
+            <p className="font-semibold">Error:</p>
+            <p>{error}</p>
+          </div>
+        )}
+
+        <div className="flex flex-col sm:flex-row justify-end gap-3">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="px-4 py-2 bg-slate-200 text-slate-700 rounded-md hover:bg-slate-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onGenerate}
+            disabled={isLoading || !prompt.trim()}
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium flex items-center justify-center gap-2"
+          >
+            {isLoading ? (
+              <>
+                <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <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>
+                </svg>
+                Generating...
+              </>
+            ) : (
+              <>
+                <MagicSparkleIcon className="w-4 h-4 mr-1" />
+                Generate Image
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AiEditModal;

components/CanvasComponent.tsx

@@ -0,0 +1,202 @@
+import React, { useRef, useEffect, useState, useCallback } from 'react';
+
+interface CanvasComponentProps {
+  penColor: string;
+  penSize: number;
+  isEraserMode: boolean;
+  dataURLToLoad?: string | null;
+  onDrawEnd: (dataURL: string) => void;
+  canvasPhysicalWidth: number;
+  canvasPhysicalHeight: number;
+  zoomLevel: number; // New prop
+}
+
+const CanvasComponent: React.FC<CanvasComponentProps> = ({
+  penColor,
+  penSize,
+  isEraserMode,
+  dataURLToLoad,
+  onDrawEnd,
+  canvasPhysicalWidth,
+  canvasPhysicalHeight,
+  zoomLevel, // Use zoomLevel
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const lastPositionRef = useRef<{ x: number; y: number } | null>(null);
+
+  const getCanvasContext = useCallback((): CanvasRenderingContext2D | null => {
+    const canvas = canvasRef.current;
+    return canvas ? canvas.getContext('2d') : null;
+  }, []);
+  
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const context = getCanvasContext();
+    if (canvas && context) {
+      if (dataURLToLoad) {
+        const img = new Image();
+        img.onload = () => {
+          context.fillStyle = '#FFFFFF';
+          context.fillRect(0, 0, canvas.width, canvas.height);
+          context.drawImage(img, 0, 0); 
+        };
+        img.onerror = () => { 
+            console.error("Failed to load image from dataURL for canvas. Displaying a blank canvas.");
+            context.fillStyle = '#FFFFFF';
+            context.fillRect(0, 0, canvas.width, canvas.height);
+        }
+        img.src = dataURLToLoad;
+      } else {
+        context.fillStyle = '#FFFFFF';
+        context.fillRect(0, 0, canvas.width, canvas.height);
+      }
+    }
+  }, [dataURLToLoad, getCanvasContext, canvasPhysicalWidth, canvasPhysicalHeight]);
+
+  const getRelativePosition = useCallback((event: MouseEvent | TouchEvent): { x: number; y: number } | null => {
+    const canvas = canvasRef.current;
+    if (!canvas) return null;
+
+    const rect = canvas.getBoundingClientRect(); // This rect is of the visually scaled canvas
+    let clientX, clientY;
+
+    if (event instanceof TouchEvent) { 
+        if (event.touches.length === 0) return null; 
+        clientX = event.touches[0].clientX;
+        clientY = event.touches[0].clientY;
+    } else { 
+        clientX = event.clientX;
+        clientY = event.clientY;
+    }
+    
+    // Adjust coordinates based on zoom level
+    // (clientX - rect.left) gives position relative to the scaled canvas's top-left on screen
+    // Divide by zoomLevel to get position relative to the unscaled canvas's internal coordinates
+    return {
+      x: (clientX - rect.left) / zoomLevel,
+      y: (clientY - rect.top) / zoomLevel,
+    };
+  }, [zoomLevel]); // Add zoomLevel to dependencies
+
+  const startDrawing = useCallback((event: MouseEvent | TouchEvent) => {
+    event.preventDefault(); 
+    const pos = getRelativePosition(event);
+    if (!pos) return;
+    
+    const context = getCanvasContext();
+    if(!context) return;
+
+    setIsDrawing(true);
+    lastPositionRef.current = pos;
+
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+    
+    if (isEraserMode) {
+        context.globalCompositeOperation = 'destination-out';
+        context.strokeStyle = "rgba(0,0,0,1)"; 
+        context.fillStyle = "rgba(0,0,0,1)"; 
+    } else {
+        context.globalCompositeOperation = 'source-over';
+        context.strokeStyle = penColor;
+        context.fillStyle = penColor; 
+    }
+    
+    context.beginPath();
+    // For single click dots, use arc. For lines, it's just the start point.
+    // The actual drawing of the dot happens here.
+    context.arc(pos.x, pos.y, penSize / (2 * zoomLevel), 0, Math.PI * 2); // Scale dot size with zoom for visual consistency
+    context.lineWidth = penSize / zoomLevel; // Scale line width for visual consistency
+    context.fill();
+
+
+  }, [getCanvasContext, penColor, penSize, isEraserMode, getRelativePosition, zoomLevel]);
+
+  const draw = useCallback((event: MouseEvent | TouchEvent) => {
+    if (!isDrawing) return;
+    event.preventDefault();
+    const pos = getRelativePosition(event);
+    if (!pos || !lastPositionRef.current) return;
+
+    const context = getCanvasContext();
+    if (context) {
+      context.lineWidth = penSize / zoomLevel; // Scale line width
+      context.lineCap = 'round';
+      context.lineJoin = 'round';
+
+      if (isEraserMode) {
+        context.globalCompositeOperation = 'destination-out';
+        context.strokeStyle = "rgba(0,0,0,1)"; 
+      } else {
+        context.globalCompositeOperation = 'source-over';
+        context.strokeStyle = penColor;
+      }
+      
+      context.beginPath();
+      context.moveTo(lastPositionRef.current.x, lastPositionRef.current.y);
+      context.lineTo(pos.x, pos.y);
+      context.stroke();
+      lastPositionRef.current = pos;
+    }
+  }, [isDrawing, getCanvasContext, penColor, penSize, isEraserMode, getRelativePosition, zoomLevel]);
+
+  const endDrawing = useCallback(() => {
+    if (!isDrawing) return; 
+    setIsDrawing(false);
+    
+    const canvas = canvasRef.current;
+    if (canvas) {
+      const context = getCanvasContext();
+      if (context) { 
+          context.globalCompositeOperation = 'source-over'; // Reset composite operation
+      }
+      onDrawEnd(canvas.toDataURL('image/png'));
+    }
+    lastPositionRef.current = null;
+  }, [isDrawing, onDrawEnd, getCanvasContext]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    // Passive false is important for preventDefault() to work on touch events and prevent scrolling page.
+    const eventOptions = { passive: false };
+
+    canvas.addEventListener('mousedown', startDrawing, eventOptions);
+    canvas.addEventListener('mousemove', draw, eventOptions);
+    canvas.addEventListener('mouseup', endDrawing, eventOptions);
+    canvas.addEventListener('mouseleave', endDrawing, eventOptions); 
+
+    canvas.addEventListener('touchstart', startDrawing, eventOptions);
+    canvas.addEventListener('touchmove', draw, eventOptions);
+    canvas.addEventListener('touchend', endDrawing, eventOptions);
+    canvas.addEventListener('touchcancel', endDrawing, eventOptions);
+
+    return () => {
+      canvas.removeEventListener('mousedown', startDrawing);
+      canvas.removeEventListener('mousemove', draw);
+      canvas.removeEventListener('mouseup', endDrawing);
+      canvas.removeEventListener('mouseleave', endDrawing);
+      canvas.removeEventListener('touchstart', startDrawing);
+      canvas.removeEventListener('touchmove', draw);
+      canvas.removeEventListener('touchend', endDrawing);
+      canvas.removeEventListener('touchcancel', endDrawing);
+    };
+  }, [startDrawing, draw, endDrawing]); // Re-bind if these handlers change (e.g. due to zoomLevel)
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={canvasPhysicalWidth}
+      height={canvasPhysicalHeight}
+      className="border-2 border-slate-400 rounded-lg shadow-2xl touch-none bg-white cursor-crosshair"
+      // Style for imageRendering is good for pixel art, ensure it doesn't conflict with scaling needs.
+      // Visual scaling is handled by the parent div's transform.
+      style={{ imageRendering: 'pixelated' }} 
+      aria-label="Drawing canvas"
+    />
+  );
+};
+
+export default CanvasComponent;

components/ConfirmModal.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { CloseIcon } from './icons'; // Assuming CloseIcon can be used for a general "cancel" or is styled appropriately
+
+interface ConfirmModalProps {
+  isOpen: boolean;
+  title: string;
+  message: string | React.ReactNode;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  isConfirmDestructive?: boolean; // Optional: to style confirm button differently for destructive actions
+}
+
+const ConfirmModal: React.FC<ConfirmModalProps> = ({
+  isOpen,
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  onConfirm,
+  onCancel,
+  isConfirmDestructive = false,
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-70 backdrop-blur-sm flex justify-center items-center z-[1100] p-4"
+      aria-modal="true"
+      role="dialog"
+      aria-labelledby="confirm-modal-title"
+    >
+      <div className="bg-white rounded-lg shadow-2xl p-6 w-full max-w-md transform transition-all">
+        <div className="flex justify-between items-center mb-4">
+          <h2 id="confirm-modal-title" className="text-lg font-semibold text-slate-800">
+            {title}
+          </h2>
+          <button
+            onClick={onCancel}
+            className="text-slate-400 hover:text-slate-600 transition-colors"
+            aria-label="Close confirmation dialog"
+          >
+            <CloseIcon className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="mb-6 text-sm text-slate-600">
+          {typeof message === 'string' ? <p>{message}</p> : message}
+        </div>
+
+        <div className="flex flex-col sm:flex-row justify-end gap-3">
+          <button
+            onClick={onCancel}
+            className="px-4 py-2 bg-slate-200 text-slate-700 rounded-md hover:bg-slate-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium w-full sm:w-auto"
+          >
+            {cancelText}
+          </button>
+          <button
+            onClick={onConfirm}
+            className={`px-4 py-2 text-white rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium w-full sm:w-auto
+              ${isConfirmDestructive ? 'bg-red-600 hover:bg-red-700 focus:ring-red-500' 
+                                     : 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500'}
+              focus:ring-2 focus:ring-offset-2`}
+          >
+            {confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmModal;

components/SettingsPanel.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import { CloseIcon, FullscreenEnterIcon, FullscreenExitIcon } from './icons'; // Import fullscreen icons
+import { AiImageQuality } from '../hooks/useAiFeatures';
+
+interface SettingsPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  showZoomSlider: boolean;
+  onShowZoomSliderChange: (show: boolean) => void;
+  aiImageQuality: AiImageQuality;
+  onAiImageQualityChange: (quality: AiImageQuality) => void;
+  aiApiEndpoint: string;
+  onAiApiEndpointChange: (endpoint: string) => void;
+  isFullscreenActive: boolean;
+  onToggleFullscreen: () => void;
+  currentCanvasWidth: number;
+  currentCanvasHeight: number;
+  onCanvasSizeChange: (width: number, height: number) => void;
+}
+
+const CANVAS_SIZE_OPTIONS = [
+  { label: '1000 x 1000 px', width: 1000, height: 1000 },
+  { label: '1200 x 1200 px', width: 1200, height: 1200 },
+  { label: '1600 x 1600 px', width: 1600, height: 1600 },
+  { label: '2000 x 2000 px', width: 2000, height: 2000 },
+  { label: '4000 x 4000 px', width: 4000, height: 4000 },
+];
+
+const SettingsPanel: React.FC<SettingsPanelProps> = ({
+  isOpen,
+  onClose,
+  showZoomSlider,
+  onShowZoomSliderChange,
+  aiImageQuality,
+  onAiImageQualityChange,
+  aiApiEndpoint,
+  onAiApiEndpointChange,
+  isFullscreenActive,
+  onToggleFullscreen,
+  currentCanvasWidth,
+  currentCanvasHeight,
+  onCanvasSizeChange,
+}) => {
+  if (!isOpen) return null;
+
+  const qualityOptions: { label: string; value: AiImageQuality }[] = [
+    { label: 'Low', value: 'low' },
+    { label: 'Medium', value: 'medium' },
+    { label: 'High (HD)', value: 'hd' },
+  ];
+
+  const handleSizeSelection = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = event.target.value;
+    const [newWidth, newHeight] = selectedValue.split('x').map(Number);
+    if (!isNaN(newWidth) && !isNaN(newHeight)) {
+      onCanvasSizeChange(newWidth, newHeight);
+    }
+  };
+
+  const currentSizeValue = `${currentCanvasWidth}x${currentCanvasHeight}`;
+
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm flex justify-center items-center z-[1000] p-4"
+      aria-modal="true"
+      role="dialog"
+      aria-labelledby="settings-panel-title"
+    >
+      <div className="bg-white rounded-lg shadow-2xl p-6 w-full max-w-md transform transition-all overflow-y-auto max-h-[90vh]">
+        <div className="flex justify-between items-center mb-6">
+          <h2 id="settings-panel-title" className="text-xl font-semibold text-slate-800">
+            Application Settings
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-slate-400 hover:text-slate-600 transition-colors"
+            aria-label="Close settings panel"
+          >
+            <CloseIcon className="w-6 h-6" />
+          </button>
+        </div>
+
+        {/* Interface Settings */}
+        <div className="mb-6">
+          <h3 className="text-md font-medium text-slate-700 mb-2">Interface</h3>
+          <div className="space-y-3">
+            {/* Zoom Slider Toggle */}
+            <div className="flex items-center justify-between bg-slate-50 p-3 rounded-md border border-slate-200">
+              <label htmlFor="showZoomSliderToggle" className="text-sm text-slate-600">
+                Show Zoom Slider
+              </label>
+              <button
+                  id="showZoomSliderToggle"
+                  role="switch"
+                  aria-checked={showZoomSlider}
+                  onClick={() => onShowZoomSliderChange(!showZoomSlider)}
+                  className={`relative inline-flex items-center h-6 rounded-full w-11 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${
+                  showZoomSlider ? 'bg-blue-600' : 'bg-slate-300'
+                  }`}
+              >
+                  <span className="sr-only">Toggle Zoom Slider Visibility</span>
+                  <span
+                  className={`inline-block w-4 h-4 transform bg-white rounded-full transition-transform duration-200 ease-in-out ${
+                      showZoomSlider ? 'translate-x-6' : 'translate-x-1'
+                  }`}
+                  />
+              </button>
+            </div>
+
+            {/* Fullscreen Toggle */}
+            <div className="bg-slate-50 p-3 rounded-md border border-slate-200">
+                <button
+                    onClick={onToggleFullscreen}
+                    className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-blue-700 bg-blue-100 hover:bg-blue-200 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+                    aria-label={isFullscreenActive ? 'Exit Fullscreen' : 'Enter Fullscreen'}
+                >
+                    {isFullscreenActive ? (
+                        <FullscreenExitIcon className="w-5 h-5 mr-2" />
+                    ) : (
+                        <FullscreenEnterIcon className="w-5 h-5 mr-2" />
+                    )}
+                    {isFullscreenActive ? 'Exit Fullscreen' : 'Enter Fullscreen'}
+                </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Canvas Dimensions Settings */}
+        <div className="mb-6">
+          <h3 className="text-md font-medium text-slate-700 mb-2">Canvas Dimensions</h3>
+          <div className="bg-slate-50 p-3 rounded-md border border-slate-200">
+            <label htmlFor="canvasSizeSelect" className="block text-sm text-slate-600 mb-1">
+              Canvas Size
+            </label>
+            <select
+              id="canvasSizeSelect"
+              value={currentSizeValue}
+              onChange={handleSizeSelection}
+              className="w-full p-2 border border-slate-300 rounded-md focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-shadow text-sm"
+              aria-describedby="canvas-size-description"
+            >
+              {CANVAS_SIZE_OPTIONS.map((option) => (
+                <option key={`${option.width}x${option.height}`} value={`${option.width}x${option.height}`}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+            <p id="canvas-size-description" className="text-xs text-slate-500 mt-1">
+              Changing size will clear the current canvas and history.
+            </p>
+          </div>
+        </div>
+
+
+        {/* AI Image Generation Settings */}
+        <div className="mb-6">
+          <h3 className="text-md font-medium text-slate-700 mb-2">AI Image Generation</h3>
+          
+          <div className="bg-slate-50 p-3 rounded-md border border-slate-200 mb-4">
+            <label htmlFor="aiApiEndpointInput" className="block text-sm text-slate-600 mb-1">
+              API Endpoint URL
+            </label>
+            <input
+              type="text"
+              id="aiApiEndpointInput"
+              value={aiApiEndpoint}
+              onChange={(e) => onAiApiEndpointChange(e.target.value)}
+              className="w-full p-2 border border-slate-300 rounded-md focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-shadow text-sm"
+              placeholder="Enter AI API URL"
+              aria-describedby="ai-api-description"
+            />
+            <p id="ai-api-description" className="text-xs text-slate-500 mt-1">
+              Use <code className="bg-slate-200 px-1 rounded">{'{prompt}'}</code> for text prompt and <code className="bg-slate-200 px-1 rounded">{'{imgurl.url}'}</code> for image URL.
+            </p>
+          </div>
+
+          <div className="bg-slate-50 p-3 rounded-md border border-slate-200">
+            <label htmlFor="aiImageQualitySelect" className="block text-sm text-slate-600 mb-1">
+              Image Quality (Pollinations API)
+            </label>
+            <select
+              id="aiImageQualitySelect"
+              value={aiImageQuality}
+              onChange={(e) => onAiImageQualityChange(e.target.value as AiImageQuality)}
+              className="w-full p-2 border border-slate-300 rounded-md focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-shadow text-sm"
+              aria-describedby="ai-quality-description"
+            >
+              {qualityOptions.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+            <p id="ai-quality-description" className="text-xs text-slate-500 mt-1">
+              This quality setting primarily applies to Pollinations-like APIs. Custom endpoints must manage their own quality parameters if needed.
+            </p>
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-3 mt-8">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors text-sm font-medium"
+          >
+            Done
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsPanel;

components/Toolbar.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import { UndoIcon, RedoIcon, UploadIcon, DownloadIcon, ClearIcon, BrushIcon, EraserIcon, MagicSparkleIcon, SettingsIcon } from './icons';
+
+interface ToolbarProps {
+  penColor: string;
+  onColorChange: (color: string) => void;
+  penSize: number;
+  onSizeChange: (size: number) => void;
+  onUndo: () => void;
+  canUndo: boolean;
+  onRedo: () => void;
+  canRedo: boolean;
+  onLoadImage: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onExportImage: () => void;
+  onClearCanvas: () => void;
+  isEraserMode: boolean;
+  onToggleEraser: () => void;
+  onMagicUpload: () => void;
+  isMagicUploading: boolean;
+  canShare: boolean;
+  onToggleSettings: () => void; // New prop for settings
+}
+
+const Toolbar: React.FC<ToolbarProps> = ({
+  penColor,
+  onColorChange,
+  penSize,
+  onSizeChange,
+  onUndo,
+  canUndo,
+  onRedo,
+  canRedo,
+  onLoadImage,
+  onExportImage,
+  onClearCanvas,
+  isEraserMode,
+  onToggleEraser,
+  onMagicUpload,
+  isMagicUploading,
+  canShare,
+  onToggleSettings, // New prop
+}) => {
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleUploadClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <div className="bg-slate-200 p-3 shadow-lg flex flex-col items-start justify-center gap-y-2 sticky top-0 z-50 border-b border-slate-300 w-full">
+      {/* First Row: Action Buttons */}
+      <div className="flex flex-wrap items-center justify-start gap-x-3 gap-y-2">
+        <button
+          onClick={onUndo}
+          disabled={!canUndo}
+          title="Undo"
+          className="p-2   rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors   border-gray-300"
+          aria-label="Undo last action"
+        >
+          <UndoIcon className="w-5 h-5 text-gray-700" />
+        </button>
+
+        <button
+          onClick={onRedo}
+          disabled={!canRedo}
+          title="Redo"
+          className="p-2   rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors   border-gray-300"
+          aria-label="Redo last undone action"
+        >
+          <RedoIcon className="w-5 h-5 text-gray-700" />
+        </button>
+
+        <input
+          type="file"
+          ref={fileInputRef}
+          onChange={onLoadImage}
+          accept="image/png, image/jpeg"
+          className="hidden"
+          aria-label="Load image from file"
+        />
+        <button
+          onClick={handleUploadClick}
+          title="Load Image"
+          className="p-2   rounded-md hover:bg-gray-100 transition-colors  border-gray-300"
+          aria-label="Load image"
+        >
+          <UploadIcon className="w-5 h-5 text-gray-700" />
+        </button>
+
+        <button
+          onClick={onExportImage}
+          title="Export Image"
+          className="p-2   rounded-md hover:bg-gray-100 transition-colors   border-gray-300"
+          aria-label="Export canvas as image"
+        >
+          <DownloadIcon className="w-5 h-5 text-gray-700" />
+        </button>
+        
+        <button
+          onClick={onMagicUpload}
+          title="Share Canvas & Edit with AI"
+          disabled={isMagicUploading || !canShare}
+          className="p-2   rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors   border-gray-300"
+          aria-label="Share canvas by uploading and open AI edit options"
+        >
+          <MagicSparkleIcon className="w-5 h-5 text-purple-600" />
+        </button>
+
+        <button
+          onClick={onClearCanvas}
+          title="Clear Canvas"
+          className="p-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors tool-button"
+          aria-label="Clear canvas"
+        >
+          <ClearIcon className="w-5 h-5" />
+        </button>
+      </div>
+
+      {/* Second Row: Drawing Tools & Settings */}
+      <div className="flex flex-wrap items-center justify-start gap-x-3 gap-y-2 mt-2">
+        <button
+          onClick={onToggleEraser}
+          title={isEraserMode ? "Switch to Brush" : "Switch to Eraser"}
+          className={`p-2 rounded-md transition-colors ${isEraserMode ? 'bg-blue-500 text-white hover:bg-blue-600' : '  hover:bg-gray-100 text-gray-700   border-gray-300'}`}
+          aria-label={isEraserMode ? "Switch to Brush mode" : "Switch to Eraser mode"}
+          aria-pressed={isEraserMode}
+        >
+          {isEraserMode ? <BrushIcon className="w-5 h-5" /> : <EraserIcon className="w-5 h-5" />}
+        </button>
+        
+        <div className="flex items-center gap-2 p-1 rounded-md hover:bg-slate-300 transition-colors">
+          <label htmlFor="penColor" className="text-sm font-medium text-gray-700 sr-only">Color:</label>
+          <input
+            type="color"
+            id="penColor"
+            title="Pen Color"
+            value={penColor}
+            onChange={(e) => onColorChange(e.target.value)}
+            className={`w-8 h-8 rounded-full cursor-pointer border-2 ${isEraserMode ? 'border-gray-400 opacity-50' : 'border-white shadow-sm'}`}
+            disabled={isEraserMode}
+            aria-label="Select pen color"
+          />
+        </div>
+
+        <div className="flex items-center gap-2 p-1 rounded-md hover:bg-slate-300 transition-colors">
+          <label htmlFor="penSize" className="text-sm font-medium text-gray-700 sr-only">Size:</label>
+          <input
+            type="range"
+            id="penSize"
+            title={`Pen Size: ${penSize}`}
+            min="1"
+            max="50"
+            value={penSize}
+            onChange={(e) => onSizeChange(parseInt(e.target.value, 10))}
+            className="w-24 md:w-32 cursor-pointer accent-blue-600"
+            aria-label={`Pen size ${penSize} pixels`}
+            aria-valuemin={1}
+            aria-valuemax={50}
+            aria-valuenow={penSize}
+          />
+          <span className="text-xs text-gray-600 w-6 text-right" aria-hidden="true">{penSize}</span>
+        </div>
+        
+        <button
+          onClick={onToggleSettings}
+          title="Open Settings"
+          className="p-2   rounded-md hover:bg-gray-100 transition-colors   border-gray-300"
+          aria-label="Open application settings"
+        >
+          <SettingsIcon className="w-5 h-5 text-gray-700" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Toolbar;

components/ZoomSlider.tsx

@@ -0,0 +1,43 @@
+
+import React from 'react';
+
+interface ZoomSliderProps {
+  zoomLevel: number;
+  onZoomChange: (newZoomLevel: number) => void;
+}
+
+const ZoomSlider: React.FC<ZoomSliderProps> = ({ zoomLevel, onZoomChange }) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onZoomChange(parseFloat(event.target.value));
+  };
+
+  const zoomPercentage = Math.round(zoomLevel * 100);
+
+  return (
+    <div 
+      className="fixed bottom-4 left-1/2 -translate-x-1/2 z-30 bg-slate-700 bg-opacity-80 backdrop-blur-sm text-white p-3 rounded-lg shadow-xl flex items-center space-x-3"
+      role="toolbar"
+      aria-label="Zoom controls"
+    >
+      <label htmlFor="zoom-slider" className="text-xs font-medium whitespace-nowrap">
+        Zoom: <span className="font-bold">{zoomPercentage}%</span>
+      </label>
+      <input
+        type="range"
+        id="zoom-slider"
+        min="0.2" // 20%
+        max="3.0" // 300%
+        step="0.01"
+        value={zoomLevel}
+        onChange={handleChange}
+        className="w-32 md:w-40 h-2 bg-slate-500 rounded-lg appearance-none cursor-pointer accent-sky-500"
+        aria-valuemin={20}
+        aria-valuemax={300}
+        aria-valuenow={zoomPercentage}
+        aria-label={`Current zoom level ${zoomPercentage} percent`}
+      />
+    </div>
+  );
+};
+
+export default ZoomSlider;

components/icons.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+export const UndoIcon: React.FC<{className?: string}> = ({className}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className || "w-6 h-6"}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+  </svg>
+);
+
+export const RedoIcon: React.FC<{className?: string}> = ({className}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className || "w-6 h-6"}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="m15 15 6-6m0 0-6-6m6 6H9a6 6 0 0 0 0 12h3" />
+  </svg>
+);
+
+export const UploadIcon: React.FC<{className?: string}> = ({className}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className || "w-6 h-6"}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
+  </svg>
+);
+
+export const DownloadIcon: React.FC<{className?: string}> = ({className}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className || "w-6 h-6"}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+  </svg>
+);
+
+export const ClearIcon: React.FC<{className?: string}> = ({className}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className || "w-6 h-6"}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12.56 0c.342.052.682.107 1.022.166m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+  </svg>
+);
+
+export const BrushIcon: React.FC<{className?: string}> = ({className}) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className || "w-6 h-6"}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
+    </svg>
+);
+
+export const EraserIcon: React.FC<{className?: string}> = ({className}) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={className || "w-6 h-6"}>
+      <path d="M16.24,3.56L20.44,7.76L7.76,20.44L3.56,16.24L16.24,3.56M22.24,6.34L20.07,4.17C19.68,3.78 19.05,3.78 18.66,4.17L17.13,5.69L21.34,9.89L22.83,8.41C23.22,8 23.22,7.37 22.83,6.98L22.24,6.34Z" />
+    </svg>
+);
+
+export const MagicSparkleIcon: React.FC<{className?: string}> = ({className}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className || "w-6 h-6"}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L1.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.25 7.5l.813 2.846a4.5 4.5 0 0 1 2.187 2.187L24 13.5l-2.846.813a4.5 4.5 0 0 1-2.187 2.187L18.25 19.5l-.813-2.846a4.5 4.5 0 0 1-2.187-2.187L12.5 13.5l2.846-.813a4.5 4.5 0 0 1 2.187-2.187L18.25 7.5Z" />
+  </svg>
+);
+
+export const CloseIcon: React.FC<{className?: string}> = ({className}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className || "w-6 h-6"}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+  </svg>
+);
+
+export const SettingsIcon: React.FC<{className?: string}> = ({className}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className || "w-6 h-6"}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 0 1 1.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 0 1-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.78.93l-.15.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527a1.125 1.125 0 0 1-1.45-.12l-.773-.774a1.125 1.125 0 0 1-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.108-1.204l-.526-.738a1.125 1.125 0 0 1 .12-1.45l.773-.773a1.125 1.125 0 0 1 1.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.93l.15-.893Z" />
+    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+  </svg>
+);
+
+export const FullscreenEnterIcon: React.FC<{className?: string}> = ({className}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className || "w-6 h-6"}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m4.5 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+  </svg>
+);
+
+export const FullscreenExitIcon: React.FC<{className?: string}> = ({className}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className || "w-6 h-6"}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5M15 15l5.25 5.25" />
+  </svg>
+);

constants.ts

@@ -0,0 +1,9 @@
+export const DB_NAME = 'ReactPaintDB';
+export const CANVAS_STORE_NAME = 'canvasState';
+export const CANVAS_AUTOSAVE_KEY = 'autosavedCanvas';
+export const MAX_HISTORY_STEPS = 100;
+export const DEFAULT_PEN_COLOR = '#000000';
+export const DEFAULT_PEN_SIZE = 5;
+export const DEFAULT_CANVAS_WIDTH = 1600;
+export const DEFAULT_CANVAS_HEIGHT = 1600;
+export const DEFAULT_AI_API_ENDPOINT = 'https://geminisimpleget.deno.dev/prompt/{prompt}?image={imgurl.url}';

hooks/useAiFeatures.ts

@@ -0,0 +1,269 @@
+import { useState, useCallback } from 'react';
+import { ToastMessage } from './useToasts';
+import { dataURLtoBlob, calculateSHA256, copyToClipboard } from '../utils/canvasUtils';
+import { CanvasHistoryHook } from './useCanvasHistory';
+
+const SHARE_API_URL = 'https://sharefile.suisuy.eu.org';
+const MAX_UPLOAD_SIZE_BYTES = 50 * 1024 * 1024; // 50MB
+
+export type AiImageQuality = 'low' | 'medium' | 'hd';
+
+interface AiFeaturesHook {
+  isMagicUploading: boolean;
+  showAiEditModal: boolean;
+  aiPrompt: string;
+  isGeneratingAiImage: boolean;
+  sharedImageUrlForAi: string | null;
+  aiEditError: string | null;
+  handleMagicUpload: () => Promise<void>;
+  handleGenerateAiImage: () => Promise<void>;
+  handleCancelAiEdit: () => void;
+  setAiPrompt: React.Dispatch<React.SetStateAction<string>>;
+}
+
+interface UseAiFeaturesProps {
+  currentDataURL: string | null;
+  showToast: (message: string, type: ToastMessage['type']) => void;
+  updateCanvasState: CanvasHistoryHook['updateCanvasState'];
+  setZoomLevel: (zoom: number) => void;
+  aiImageQuality: AiImageQuality;
+  aiApiEndpoint: string;
+  currentCanvasWidth: number; // Added
+  currentCanvasHeight: number; // Added
+}
+
+export const useAiFeatures = ({
+  currentDataURL,
+  showToast,
+  updateCanvasState,
+  setZoomLevel,
+  aiImageQuality,
+  aiApiEndpoint,
+  currentCanvasWidth, // Destructure
+  currentCanvasHeight, // Destructure
+}: UseAiFeaturesProps): AiFeaturesHook => {
+  const [isMagicUploading, setIsMagicUploading] = useState<boolean>(false);
+  const [showAiEditModal, setShowAiEditModal] = useState<boolean>(false);
+  const [aiPrompt, setAiPrompt] = useState<string>('');
+  const [isGeneratingAiImage, setIsGeneratingAiImage] = useState<boolean>(false);
+  const [sharedImageUrlForAi, setSharedImageUrlForAi] = useState<string | null>(null);
+  const [aiEditError, setAiEditError] = useState<string | null>(null);
+
+  const loadAiImageOntoCanvas = useCallback((aiImageDataUrl: string) => {
+    const img = new Image();
+    img.onload = () => {
+        const targetCanvasWidth = currentCanvasWidth;
+        const targetCanvasHeight = currentCanvasHeight;
+
+        // Calculate dimensions to draw the AI image, maintaining aspect ratio
+        let drawWidth = img.naturalWidth;
+        let drawHeight = img.naturalHeight;
+
+        const canvasAspectRatio = targetCanvasWidth / targetCanvasHeight;
+        const imageAspectRatio = img.naturalWidth / img.naturalHeight;
+
+        if (imageAspectRatio > canvasAspectRatio) {
+            // Image is wider relative to canvas: fit by width
+            drawWidth = targetCanvasWidth;
+            drawHeight = targetCanvasWidth / imageAspectRatio;
+        } else {
+            // Image is taller or same aspect ratio: fit by height
+            drawHeight = targetCanvasHeight;
+            drawWidth = targetCanvasHeight * imageAspectRatio;
+        }
+
+        // Ensure dimensions are at least 1px and integers
+        drawWidth = Math.max(1, Math.floor(drawWidth));
+        drawHeight = Math.max(1, Math.floor(drawHeight));
+
+        const drawX = (targetCanvasWidth - drawWidth) / 2;
+        const drawY = (targetCanvasHeight - drawHeight) / 2;
+
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = targetCanvasWidth;
+        tempCanvas.height = targetCanvasHeight;
+        const tempCtx = tempCanvas.getContext('2d');
+
+        if (tempCtx) {
+            tempCtx.fillStyle = '#FFFFFF'; // White background for the canvas
+            tempCtx.fillRect(0, 0, targetCanvasWidth, targetCanvasHeight);
+            tempCtx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
+            const newCanvasState = tempCanvas.toDataURL('image/png');
+
+            // Use current canvas dimensions, not AI image's natural dimensions
+            updateCanvasState(newCanvasState, targetCanvasWidth, targetCanvasHeight);
+
+            setShowAiEditModal(false);
+            showToast('AI image applied!', 'success');
+            setZoomLevel(1); 
+            setAiPrompt(''); 
+            setSharedImageUrlForAi(null);
+        } else {
+            setAiEditError('Failed to create drawing context for AI image.');
+        }
+        setIsGeneratingAiImage(false);
+    };
+    img.onerror = () => {
+        setAiEditError('Failed to load the generated AI image. It might be an invalid image format.');
+        setIsGeneratingAiImage(false);
+    };
+    img.crossOrigin = "anonymous"; 
+    img.src = aiImageDataUrl;
+  }, [showToast, updateCanvasState, setZoomLevel, currentCanvasWidth, currentCanvasHeight]); // Added currentCanvasWidth, currentCanvasHeight
+
+  const handleMagicUpload = useCallback(async () => {
+    if (isMagicUploading || !currentDataURL) {
+        showToast('No canvas content to share.', 'info');
+        return;
+    }
+
+    setIsMagicUploading(true);
+    setAiEditError(null);
+    showToast('Uploading image...', 'info');
+
+    try {
+        const blob = await dataURLtoBlob(currentDataURL);
+
+        if (blob.size > MAX_UPLOAD_SIZE_BYTES) {
+            showToast(`Image too large (${(blob.size / 1024 / 1024).toFixed(2)}MB). Max 50MB.`, 'error');
+            setIsMagicUploading(false);
+            return;
+        }
+
+        const hash = await calculateSHA256(blob);
+        const filename = `tempaint_${hash}.png`;
+        const uploadUrl = `${SHARE_API_URL}/${filename}`;
+
+        const response = await fetch(uploadUrl, {
+            method: 'POST',
+            headers: { 'Content-Type': blob.type || 'image/png' },
+            body: blob,
+        });
+
+        if (!response.ok) {
+            let errorMsg = `Upload failed: ${response.statusText}`;
+            try { const errorBody = await response.text(); errorMsg = `Upload failed: ${errorBody || response.statusText}`; } catch (e) { /* ignore */ }
+            throw new Error(errorMsg);
+        }
+
+        const returnedObjectName = await response.text();
+        const finalShareUrl = `https://pub-cb2c87ea7373408abb1050dd43e3cd8e.r2.dev/${returnedObjectName}`;
+        
+        setSharedImageUrlForAi(finalShareUrl);
+        setShowAiEditModal(true); 
+        setAiPrompt(''); 
+        setAiEditError(null); 
+
+    } catch (error: any) {
+        console.error('Magic upload error:', error);
+        showToast(error.message || 'Magic upload failed. Check console.', 'error');
+    } finally {
+        setIsMagicUploading(false); 
+    }
+  }, [isMagicUploading, currentDataURL, showToast]);
+
+  const handleGenerateAiImage = useCallback(async () => {
+    if (!aiPrompt.trim() || !sharedImageUrlForAi) {
+      setAiEditError('Please enter a prompt and ensure an image was uploaded.');
+      return;
+    }
+    setIsGeneratingAiImage(true);
+    setAiEditError(null);
+    showToast('Generating AI image...', 'info');
+
+    const encodedPrompt = encodeURIComponent(aiPrompt);
+    const encodedImageUrl = encodeURIComponent(sharedImageUrlForAi);
+    
+    let finalApiUrl = aiApiEndpoint
+        .replace('{prompt}', encodedPrompt)
+        .replace('{imgurl.url}', encodedImageUrl);
+
+    if (aiApiEndpoint.includes('pollinations.ai')) {
+        const pollinationsParams = new URLSearchParams({
+            model: 'gptimage', 
+            private: 'true',
+            quality: aiImageQuality,
+            safe: 'false',
+            transparent: 'false',
+            width: '1024', 
+            height: '1024', 
+            seed: Date.now().toString(),
+        });
+        
+        if (finalApiUrl.endsWith('/')) { 
+            finalApiUrl = `${finalApiUrl}${encodedPrompt}?image=${encodedImageUrl}&${pollinationsParams.toString()}`;
+        } else if (finalApiUrl.includes('?')) { 
+            finalApiUrl = `${finalApiUrl}&image=${encodedImageUrl}&${pollinationsParams.toString()}`;
+        } else { 
+             finalApiUrl = `${finalApiUrl}?image=${encodedImageUrl}&${pollinationsParams.toString()}`;
+        }
+    }
+    
+    try {
+      const response = await fetch(finalApiUrl);
+      if (!response.ok) {
+        let errorMsg = `AI image generation failed: ${response.status} ${response.statusText}`;
+        try {
+            const errorBody = await response.text(); 
+            if (errorBody && !errorBody.toLowerCase().includes('<html')) {
+                 errorMsg += ` - ${errorBody.substring(0,100)}`;
+            }
+        } catch(e) { /* ignore if can't read body */ }
+        throw new Error(errorMsg);
+      }
+      
+      const imageBlob = await response.blob();
+      if (!imageBlob.type.startsWith('image/')) {
+        throw new Error('AI service did not return a valid image. Please try a different prompt or check the API endpoint.');
+      }
+
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        if (typeof reader.result === 'string') {
+          loadAiImageOntoCanvas(reader.result);
+        } else {
+          setAiEditError('Failed to read AI image data as string.');
+          setIsGeneratingAiImage(false);
+        }
+      };
+      reader.onerror = () => {
+        setAiEditError('Failed to read AI image data.');
+        setIsGeneratingAiImage(false);
+      }
+      reader.readAsDataURL(imageBlob);
+
+    } catch (error: any) {
+      console.error('AI image generation error:', error);
+      setAiEditError(error.message || 'An unknown error occurred during AI image generation.');
+      setIsGeneratingAiImage(false);
+    }
+  }, [aiPrompt, sharedImageUrlForAi, showToast, loadAiImageOntoCanvas, aiImageQuality, aiApiEndpoint]);
+  
+
+  const handleCancelAiEdit = () => {
+    setShowAiEditModal(false);
+    if (sharedImageUrlForAi) {
+        copyToClipboard(sharedImageUrlForAi, (msg, type) => showToast(msg,type as 'info' | 'error')).then(copied => {
+            if(copied) {
+                 showToast(`Image uploaded! URL: ${sharedImageUrlForAi} (Copied!)`, 'success');
+            }
+        });
+    }
+    setAiPrompt('');
+    setAiEditError(null);
+    setSharedImageUrlForAi(null); 
+  };
+
+  return {
+    isMagicUploading,
+    showAiEditModal,
+    aiPrompt,
+    isGeneratingAiImage,
+    sharedImageUrlForAi,
+    aiEditError,
+    handleMagicUpload,
+    handleGenerateAiImage,
+    handleCancelAiEdit,
+    setAiPrompt,
+  };
+};

hooks/useCanvasFileUtils.ts

@@ -0,0 +1,143 @@
+import React, { useCallback } from 'react';
+import { getBlankCanvasDataURL } from '../utils/canvasUtils';
+import { CanvasHistoryHook } from './useCanvasHistory';
+import { ConfirmModalHook } from './useConfirmModal';
+import { ToastMessage } from './useToasts';
+
+
+interface UseCanvasFileUtilsProps {
+  canvasState: {
+    currentDataURL: string | null;
+    canvasWidth: number;
+    canvasHeight: number;
+  };
+  historyActions: {
+    updateCanvasState: CanvasHistoryHook['updateCanvasState'];
+  };
+  uiActions: {
+    showToast: (message: string, type: ToastMessage['type']) => void;
+    setZoomLevel: (zoom: number) => void;
+  };
+  confirmModalActions: {
+    requestConfirmation: ConfirmModalHook['requestConfirmation'];
+  };
+}
+
+export interface CanvasFileUtilsHook {
+  handleLoadImageFile: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleExportImage: () => void;
+  handleClearCanvas: () => void;
+  handleCanvasSizeChange: (newWidth: number, newHeight: number) => void;
+}
+
+export const useCanvasFileUtils = ({
+  canvasState,
+  historyActions,
+  uiActions,
+  confirmModalActions,
+}: UseCanvasFileUtilsProps): CanvasFileUtilsHook => {
+  const { currentDataURL, canvasWidth, canvasHeight } = canvasState;
+  const { updateCanvasState } = historyActions;
+  const { showToast, setZoomLevel } = uiActions;
+  const { requestConfirmation } = confirmModalActions;
+
+  const handleLoadImageFile = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const imageDataUrl = e.target?.result as string;
+        if (imageDataUrl) {
+          const img = new Image();
+          img.onload = () => {
+            let imageToDrawWidth = img.naturalWidth;
+            let imageToDrawHeight = img.naturalHeight;
+
+            if (img.naturalWidth > canvasWidth || img.naturalHeight > canvasHeight) {
+                const widthRatio = canvasWidth / img.naturalWidth;
+                const heightRatio = canvasHeight / img.naturalHeight;
+                const scaleFactor = Math.min(widthRatio, heightRatio); 
+                imageToDrawWidth = Math.max(1, Math.floor(img.naturalWidth * scaleFactor));
+                imageToDrawHeight = Math.max(1, Math.floor(img.naturalHeight * scaleFactor));
+            }
+            
+            const finalCanvasWidth = canvasWidth;
+            const finalCanvasHeight = canvasHeight;
+
+            const tempCanvas = document.createElement('canvas');
+            tempCanvas.width = finalCanvasWidth;
+            tempCanvas.height = finalCanvasHeight;
+            const tempCtx = tempCanvas.getContext('2d');
+
+            if (tempCtx) {
+              tempCtx.fillStyle = '#FFFFFF';
+              tempCtx.fillRect(0, 0, finalCanvasWidth, finalCanvasHeight);
+              
+              const drawX = (finalCanvasWidth - imageToDrawWidth) / 2;
+              const drawY = (finalCanvasHeight - imageToDrawHeight) / 2;
+              
+              tempCtx.drawImage(img, drawX, drawY, imageToDrawWidth, imageToDrawHeight); 
+              const compositeDataURL = tempCanvas.toDataURL('image/png');
+              
+              updateCanvasState(compositeDataURL, finalCanvasWidth, finalCanvasHeight);
+              setZoomLevel(0.5);
+              showToast('Image loaded successfully.', 'success');
+            }
+          };
+          img.onerror = () => showToast("Error loading image file for processing.", 'error');
+          img.src = imageDataUrl;
+        }
+      };
+      reader.onerror = () => showToast("Error reading image file.", 'error');
+      reader.readAsDataURL(file);
+      if(event.target) event.target.value = ''; 
+    }
+  }, [canvasWidth, canvasHeight, updateCanvasState, showToast, setZoomLevel]);
+  
+  const handleExportImage = useCallback(() => {
+    if (currentDataURL) {
+      const link = document.createElement('a');
+      link.href = currentDataURL;
+      link.download = `paint-masterpiece-${Date.now()}.png`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      showToast('Image exported!', 'success');
+    } else {
+      showToast('No image to export.', 'info');
+    }
+  }, [currentDataURL, showToast]);
+
+  const handleClearCanvas = useCallback(() => {
+    requestConfirmation(
+      "Clear Canvas",
+      "Are you sure you want to clear the entire canvas? This action cannot be undone from history.",
+      () => {
+        const blankCanvas = getBlankCanvasDataURL(canvasWidth, canvasHeight);
+        updateCanvasState(blankCanvas, canvasWidth, canvasHeight);
+        setZoomLevel(0.5);
+        showToast("Canvas cleared.", "info");
+      },
+      { isDestructive: true }
+    );
+  }, [requestConfirmation, canvasWidth, canvasHeight, updateCanvasState, setZoomLevel, showToast]);
+
+  const handleCanvasSizeChange = useCallback((newWidth: number, newHeight: number) => {
+    if (newWidth === canvasWidth && newHeight === canvasHeight) {
+      return;
+    }
+    requestConfirmation(
+      "Confirm Canvas Size Change",
+      "Changing canvas size will clear the current drawing and history. Are you sure you want to continue?",
+      () => {
+        const blankCanvas = getBlankCanvasDataURL(newWidth, newHeight);
+        updateCanvasState(blankCanvas, newWidth, newHeight);
+        setZoomLevel(0.5);
+        showToast(`Canvas resized to ${newWidth}x${newHeight}px. Drawing cleared.`, 'info');
+      },
+      { isDestructive: true }
+    );
+  }, [canvasWidth, canvasHeight, requestConfirmation, updateCanvasState, setZoomLevel, showToast]);
+
+  return { handleLoadImageFile, handleExportImage, handleClearCanvas, handleCanvasSizeChange };
+};

hooks/useCanvasHistory.ts

@@ -0,0 +1,114 @@
+
+import { useState, useEffect, useCallback } from 'react';
+import { saveCanvasState as dbSaveCanvasState, loadCanvasState as dbLoadCanvasState, LoadedCanvasState } from '../services/dbService';
+import { MAX_HISTORY_STEPS, DEFAULT_CANVAS_WIDTH, DEFAULT_CANVAS_HEIGHT } from '../constants';
+import { getBlankCanvasDataURL } from '../utils/canvasUtils';
+
+export interface CanvasHistoryHook {
+  historyStack: string[];
+  currentHistoryIndex: number;
+  canvasWidth: number;
+  canvasHeight: number;
+  isLoading: boolean;
+  currentDataURL: string | null;
+  handleDrawEnd: (dataURL: string, newWidth?: number, newHeight?: number) => void;
+  handleUndo: () => void;
+  handleRedo: () => void;
+  updateCanvasState: (dataURL: string, width: number, height: number) => void;
+}
+
+
+export const useCanvasHistory = (): CanvasHistoryHook => {
+  const [historyStack, setHistoryStack] = useState<string[]>([]);
+  const [currentHistoryIndex, setCurrentHistoryIndex] = useState<number>(-1);
+  const [canvasWidth, setCanvasWidth] = useState<number>(DEFAULT_CANVAS_WIDTH);
+  const [canvasHeight, setCanvasHeight] = useState<number>(DEFAULT_CANVAS_HEIGHT);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  const currentDataURL = historyStack.length > 0 && currentHistoryIndex >= 0 ? historyStack[currentHistoryIndex] : null;
+
+  const loadInitialCanvas = useCallback(async () => {
+    setIsLoading(true);
+    const savedState: LoadedCanvasState | null = await dbLoadCanvasState();
+    if (savedState && savedState.dataURL) { // Ensure dataURL exists
+      setCanvasWidth(savedState.width);
+      setCanvasHeight(savedState.height);
+      setHistoryStack([savedState.dataURL]);
+      setCurrentHistoryIndex(0);
+    } else {
+      const initialWidth = DEFAULT_CANVAS_WIDTH;
+      const initialHeight = DEFAULT_CANVAS_HEIGHT;
+      setCanvasWidth(initialWidth);
+      setCanvasHeight(initialHeight);
+      const blankCanvas = getBlankCanvasDataURL(initialWidth, initialHeight);
+      setHistoryStack([blankCanvas]);
+      setCurrentHistoryIndex(0);
+      await dbSaveCanvasState(blankCanvas, initialWidth, initialHeight);
+    }
+    setIsLoading(false);
+  }, []);
+
+  useEffect(() => {
+    loadInitialCanvas();
+  }, [loadInitialCanvas]);
+
+  const handleDrawEnd = useCallback((dataURL: string, newWidth?: number, newHeight?: number) => {
+    const effectiveWidth = newWidth ?? canvasWidth;
+    const effectiveHeight = newHeight ?? canvasHeight;
+
+    if (newWidth && newWidth !== canvasWidth) setCanvasWidth(newWidth);
+    if (newHeight && newHeight !== canvasHeight) setCanvasHeight(newHeight);
+    
+    setHistoryStack(prevStack => {
+      // If currentHistoryIndex is not at the end, it means we've undone some steps.
+      // New drawing should overwrite the "redo" history.
+      const newStackBase = prevStack.slice(0, currentHistoryIndex + 1);
+      let newStack = [...newStackBase, dataURL];
+      
+      if (newStack.length > MAX_HISTORY_STEPS) {
+        newStack = newStack.slice(newStack.length - MAX_HISTORY_STEPS);
+      }
+      // Update currentHistoryIndex to point to the new state (end of the new stack)
+      setCurrentHistoryIndex(newStack.length - 1);
+      return newStack;
+    });
+    dbSaveCanvasState(dataURL, effectiveWidth, effectiveHeight);
+  }, [currentHistoryIndex, canvasWidth, canvasHeight]); // Added canvasWidth, canvasHeight as they are used for effective dimensions.
+
+  const updateCanvasState = useCallback((dataURL: string, width: number, height: number) => {
+      // This function is for direct updates, like loading an image or AI result
+      handleDrawEnd(dataURL, width, height);
+  }, [handleDrawEnd]);
+
+
+  const handleUndo = () => {
+    if (currentHistoryIndex > 0) {
+      setCurrentHistoryIndex(prevIndex => prevIndex - 1);
+      // Autosave current state when undoing to ensure persistence of the "undone to" state.
+      // This is implicit as currentDataURL will update, and if the app were to reload,
+      // it should load the state at currentHistoryIndex.
+      // The currentDataURL used by CanvasComponent will be historyStack[newIndex].
+      // dbSaveCanvasState(historyStack[currentHistoryIndex - 1], canvasWidth, canvasHeight); // This might be too aggressive, rely on drawEnd
+    }
+  };
+
+  const handleRedo = () => {
+    if (currentHistoryIndex < historyStack.length - 1) {
+      setCurrentHistoryIndex(prevIndex => prevIndex + 1);
+      // dbSaveCanvasState(historyStack[currentHistoryIndex + 1], canvasWidth, canvasHeight); // Same as undo, might be too aggressive
+    }
+  };
+
+  return {
+    historyStack,
+    currentHistoryIndex,
+    canvasWidth,
+    canvasHeight,
+    isLoading,
+    currentDataURL,
+    handleDrawEnd,
+    handleUndo,
+    handleRedo,
+    updateCanvasState,
+  };
+};

hooks/useConfirmModal.ts

@@ -0,0 +1,73 @@
+import React, { useState, useCallback } from 'react';
+
+export interface ConfirmModalInfo {
+  isOpen: boolean;
+  title: string;
+  message: string | React.ReactNode;
+  onConfirmAction: () => void;
+  isDestructive?: boolean;
+  confirmText?: string;
+  cancelText?: string;
+}
+
+const initialConfirmModalState: ConfirmModalInfo = {
+  isOpen: false,
+  title: '',
+  message: '',
+  onConfirmAction: () => {},
+  isDestructive: false,
+  confirmText: 'Confirm',
+  cancelText: 'Cancel',
+};
+
+export interface ConfirmModalHook {
+  confirmModalInfo: ConfirmModalInfo;
+  requestConfirmation: (
+    title: string,
+    message: string | React.ReactNode,
+    onConfirm: () => void,
+    options?: {
+      isDestructive?: boolean;
+      confirmText?: string;
+      cancelText?: string;
+    }
+  ) => void;
+  closeConfirmModal: () => void;
+}
+
+export const useConfirmModal = (): ConfirmModalHook => {
+  const [confirmModalInfo, setConfirmModalInfo] = useState<ConfirmModalInfo>(initialConfirmModalState);
+
+  const requestConfirmation = useCallback(
+    (
+      title: string,
+      message: string | React.ReactNode,
+      onConfirm: () => void,
+      options: {
+        isDestructive?: boolean;
+        confirmText?: string;
+        cancelText?: string;
+      } = {}
+    ) => {
+      setConfirmModalInfo({
+        isOpen: true,
+        title,
+        message,
+        onConfirmAction: () => {
+          onConfirm();
+          setConfirmModalInfo(prev => ({ ...prev, isOpen: false })); // Close modal after action
+        },
+        isDestructive: options.isDestructive ?? false,
+        confirmText: options.confirmText ?? 'Confirm',
+        cancelText: options.cancelText ?? 'Cancel',
+      });
+    },
+    []
+  );
+
+  const closeConfirmModal = useCallback(() => {
+    setConfirmModalInfo(prev => ({ ...prev, isOpen: false }));
+  }, []);
+
+  return { confirmModalInfo, requestConfirmation, closeConfirmModal };
+};

hooks/useDrawingTools.ts

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { DEFAULT_PEN_COLOR, DEFAULT_PEN_SIZE } from '../constants';
+
+export interface DrawingToolsHook {
+  penColor: string;
+  setPenColor: React.Dispatch<React.SetStateAction<string>>;
+  penSize: number;
+  setPenSize: React.Dispatch<React.SetStateAction<number>>;
+  isEraserMode: boolean;
+  setIsEraserMode: React.Dispatch<React.SetStateAction<boolean>>;
+  toggleEraserMode: () => void;
+  effectivePenColor: string;
+}
+
+export const useDrawingTools = (): DrawingToolsHook => {
+  const [penColor, setPenColor] = useState<string>(DEFAULT_PEN_COLOR);
+  const [penSize, setPenSize] = useState<number>(DEFAULT_PEN_SIZE);
+  const [isEraserMode, setIsEraserMode] = useState<boolean>(false);
+
+  const toggleEraserMode = () => setIsEraserMode(prev => !prev);
+
+  const effectivePenColor = isEraserMode ? '#FFFFFF' : penColor; // Eraser uses white to clear
+
+  return {
+    penColor,
+    setPenColor,
+    penSize,
+    setPenSize,
+    isEraserMode,
+    setIsEraserMode,
+    toggleEraserMode,
+    effectivePenColor,
+  };
+};

hooks/useFullscreen.ts

@@ -0,0 +1,85 @@
+import { useState, useEffect, useCallback } from 'react';
+
+export interface FullscreenHook {
+  isFullscreenActive: boolean;
+  toggleFullscreen: () => Promise<void>;
+  requestFullscreenSupportError?: string;
+}
+
+export const useFullscreen = (
+  showToast?: (message: string, type: 'info' | 'error') => void
+): FullscreenHook => {
+  const [isFullscreenActive, setIsFullscreenActive] = useState<boolean>(false);
+  const [requestFullscreenSupportError, setRequestFullscreenSupportError] = useState<string | undefined>();
+
+  const handleFullscreenChange = useCallback(() => {
+    setIsFullscreenActive(!!(
+      document.fullscreenElement ||
+      (document as any).webkitFullscreenElement ||
+      (document as any).mozFullScreenElement ||
+      (document as any).msFullscreenElement
+    ));
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
+    document.addEventListener('MSFullscreenChange', handleFullscreenChange);
+    
+    handleFullscreenChange(); // Initial check
+
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+      document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
+      document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
+      document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
+    };
+  }, [handleFullscreenChange]);
+
+  const toggleFullscreen = async () => {
+    const element = document.documentElement as any;
+    try {
+      if (!isFullscreenActive) {
+        if (element.requestFullscreen) {
+          await element.requestFullscreen();
+        } else if (element.mozRequestFullScreen) { // Firefox
+          await element.mozRequestFullScreen();
+        } else if (element.webkitRequestFullscreen) { // Chrome, Safari, Opera
+          await element.webkitRequestFullscreen();
+        } else if (element.msRequestFullscreen) { // IE/Edge
+          await element.msRequestFullscreen();
+        } else {
+            const errorMsg = "Fullscreen API is not supported by this browser.";
+            setRequestFullscreenSupportError(errorMsg);
+            if (showToast) showToast(errorMsg, "error");
+            return;
+        }
+      } else {
+        if (document.exitFullscreen) {
+          await document.exitFullscreen();
+        } else if ((document as any).mozCancelFullScreen) {
+          await (document as any).mozCancelFullScreen();
+        } else if ((document as any).webkitExitFullscreen) {
+          await (document as any).webkitExitFullscreen();
+        } else if ((document as any).msExitFullscreen) {
+          await (document as any).msExitFullscreen();
+        } else {
+            const errorMsg = "Could not exit fullscreen. API not found.";
+             setRequestFullscreenSupportError(errorMsg);
+            if (showToast) showToast(errorMsg, "error");
+            return;
+        }
+      }
+      setRequestFullscreenSupportError(undefined);
+    } catch (err: any) {
+      console.error("Fullscreen API error:", err);
+      const errorMsg = `Fullscreen mode change failed: ${err.message || 'Unknown error'}`;
+      setRequestFullscreenSupportError(errorMsg);
+      if (showToast) showToast(errorMsg, "error");
+      handleFullscreenChange(); // Ensure state reflects reality
+    }
+  };
+
+  return { isFullscreenActive, toggleFullscreen, requestFullscreenSupportError };
+};

hooks/useToasts.ts

@@ -0,0 +1,23 @@
+
+import { useState, useCallback } from 'react';
+
+export type ToastMessage = {
+  id: string;
+  message: string;
+  type: 'success' | 'error' | 'info';
+};
+
+export const useToasts = () => {
+  const [toasts, setToasts] = useState<ToastMessage[]>([]);
+
+  const showToast = useCallback((message: string, type: ToastMessage['type']) => {
+    const newToast: ToastMessage = { id: Date.now().toString(), message, type };
+    // Add new toast and limit to max 5 toasts shown
+    setToasts(prevToasts => [newToast, ...prevToasts.slice(0, 4)]); 
+    setTimeout(() => {
+      setToasts(prevToasts => prevToasts.filter(t => t.id !== newToast.id));
+    }, 5000); // Autohide after 5 seconds
+  }, []);
+
+  return { toasts, showToast };
+};

index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>React Paint App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+<script type="importmap">
+{
+  "imports": {
+    "react/": "https://esm.sh/react@^19.1.0/",
+    "react": "https://esm.sh/react@^19.1.0",
+    "react-dom/": "https://esm.sh/react-dom@^19.1.0/"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+<body class="bg-gray-100">
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,6 @@
+{
+  "name": "xpaintai",
+  "description": "A simple web-based paint application with features like pen customization, undo/redo, image loading/exporting, and autosave to IndexedDB.",
+  "requestFramePermissions": [],
+  "prompt": ""
+}

package.json

@@ -1,39 +1,20 @@
 {
-  "name": "react-template",
-  "version": "0.1.0",
+  "name": "xpaintai",
   "private": true,
-  "dependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.2.0"
   }
 }

services/dbService.ts

@@ -0,0 +1,122 @@
+import { DB_NAME, CANVAS_STORE_NAME, CANVAS_AUTOSAVE_KEY, DEFAULT_CANVAS_WIDTH, DEFAULT_CANVAS_HEIGHT } from '../constants';
+
+const DB_VERSION = 1; // Keep version, onupgradeneeded handles store creation
+
+interface CanvasSave {
+  id: string;
+  dataURL: string;
+  width: number;
+  height: number;
+  timestamp: number;
+}
+
+export interface LoadedCanvasState {
+  dataURL: string;
+  width: number;
+  height: number;
+}
+
+const openDB = (): Promise<IDBDatabase> => {
+  return new Promise((resolve, reject) => {
+    if (!window.indexedDB) {
+      console.warn("IndexedDB not supported by this browser.");
+      reject(new Error("IndexedDB not supported."));
+      return;
+    }
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+
+    request.onerror = () => reject(new Error('Failed to open IndexedDB: ' + request.error?.message));
+    request.onsuccess = () => resolve(request.result);
+
+    request.onupgradeneeded = (event) => {
+      const db = (event.target as IDBOpenDBRequest).result;
+      if (!db.objectStoreNames.contains(CANVAS_STORE_NAME)) {
+        db.createObjectStore(CANVAS_STORE_NAME, { keyPath: 'id' });
+      }
+      // No need to alter existing stores if only adding properties to stored objects.
+      // If keyPath or indexes changed, would need more complex migration.
+    };
+  });
+};
+
+export const saveCanvasState = async (dataURL: string, width: number, height: number): Promise<void> => {
+  try {
+    const db = await openDB();
+    const transaction = db.transaction(CANVAS_STORE_NAME, 'readwrite');
+    const store = transaction.objectStore(CANVAS_STORE_NAME);
+    const canvasData: CanvasSave = {
+      id: CANVAS_AUTOSAVE_KEY,
+      dataURL,
+      width,
+      height,
+      timestamp: Date.now(),
+    };
+    store.put(canvasData);
+
+    return new Promise((resolve, reject) => {
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => {
+        console.error('Transaction error saving canvas state:', transaction.error);
+        reject(new Error('Failed to save canvas state.'));
+      }
+    });
+  } catch (error) {
+    console.error('Error saving canvas state to IndexedDB:', error);
+    // Gracefully fail, app can still function
+  }
+};
+
+export const loadCanvasState = async (): Promise<LoadedCanvasState | null> => {
+  try {
+    const db = await openDB();
+    const transaction = db.transaction(CANVAS_STORE_NAME, 'readonly');
+    const store = transaction.objectStore(CANVAS_STORE_NAME);
+    const request = store.get(CANVAS_AUTOSAVE_KEY);
+
+    return new Promise((resolve, reject) => {
+      request.onsuccess = () => {
+        if (request.result) {
+          const savedData = request.result as CanvasSave;
+          resolve({
+            dataURL: savedData.dataURL,
+            // Provide default dimensions if old data doesn't have them
+            width: savedData.width || DEFAULT_CANVAS_WIDTH,
+            height: savedData.height || DEFAULT_CANVAS_HEIGHT,
+          });
+        } else {
+          resolve(null);
+        }
+      };
+      request.onerror = () => {
+        console.error('Request error loading canvas state:', request.error);
+        reject(new Error('Failed to load canvas state.'));
+      }
+    });
+  } catch (error) {
+    console.error('Error loading canvas state from IndexedDB:', error);
+    return null; // Gracefully fail
+  }
+};
+
+export const clearCanvasStateDB = async (): Promise<void> => {
+  try {
+    const db = await openDB();
+    const transaction = db.transaction(CANVAS_STORE_NAME, 'readwrite');
+    const store = transaction.objectStore(CANVAS_STORE_NAME);
+    const request = store.delete(CANVAS_AUTOSAVE_KEY);
+
+    return new Promise((resolve, reject) => {
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => {
+         console.error('Transaction error clearing canvas state:', transaction.error);
+        reject(new Error('Failed to clear canvas state from DB.'));
+      }
+      request.onerror = () => { // Also handle request error for delete specifically
+        console.error('Request error deleting canvas state:', request.error);
+        reject(new Error('Failed to delete canvas state from DB.'));
+      };
+    });
+  } catch (error) {
+    console.error('Error clearing canvas state from IndexedDB:', error);
+  }
+};

tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "paths": {
+      "@/*" :  ["./*"]
+    }
+  }
+}

types.ts

@@ -0,0 +1,3 @@
+// No global shared complex types needed for now.
+// Specific types/interfaces are defined within components or services where they are used.
+// Example: export interface Point { x: number; y: number; } if it were broadly used.

utils/canvasUtils.ts

@@ -0,0 +1,42 @@
+
+export const getBlankCanvasDataURL = (width: number, height: number): string => {
+  const tempCanvas = document.createElement('canvas');
+  tempCanvas.width = width;
+  tempCanvas.height = height;
+  const ctx = tempCanvas.getContext('2d');
+  if (ctx) {
+    ctx.fillStyle = '#FFFFFF'; // Ensure blank canvas is white
+    ctx.fillRect(0, 0, width, height);
+  }
+  return tempCanvas.toDataURL('image/png');
+};
+
+export const dataURLtoBlob = async (dataurl: string): Promise<Blob> => {
+  const res = await fetch(dataurl);
+  return res.blob();
+};
+
+export const calculateSHA256 = async (blob: Blob): Promise<string> => {
+  const buffer = await blob.arrayBuffer();
+  const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+};
+
+export const copyToClipboard = async (
+    text: string,
+    showInfoToast: (message: string, type: 'info' | 'error') => void // Callback for toast
+): Promise<boolean> => {
+  if (!navigator.clipboard) {
+    showInfoToast('Clipboard API not available.', 'info');
+    return false;
+  }
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch (err) {
+    console.error('Failed to copy text: ', err);
+    showInfoToast('Failed to copy URL to clipboard.', 'error');
+    return false;
+  }
+};

vite.config.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});