feat: enhance Actions and Preview components to support SVG source copying in preview mode

src/components/Actions.svelte

@@ -4,6 +4,8 @@
 
   export let logo;
   export let onDownload;
+  export let onCopySource = undefined;
+  export let inPreview = false;
 
   // Download menu state
   let showDownloadMenu = false;
@@ -22,6 +24,11 @@
     notificationText = text;
     notificationType = type;
     showNotification = true;
+
+    // Force the notification to be visible in the preview
+    setTimeout(() => {
+      showNotification = true; // Re-trigger the notification in case it was missed
+    }, 50);
   }
 
   function hideNotification() {
@@ -190,12 +197,23 @@
     if (logo.format !== 'SVG') return;
 
     try {
+      // Check if we're in preview mode and have a custom handler
+      if (inPreview && typeof onCopySource === 'function') {
+        const success = onCopySource();
+        if (success) {
+          showCopyNotification('SVG source copied!', 'success');
+        } else {
+          showCopyNotification('Failed to copy SVG source', 'error');
+        }
+      } else {
+        // Use the standard method for grid/list view
         const success = await copySvgSource(logo.path);
         if (success) {
           showCopyNotification('SVG source copied!', 'success');
         } else {
           showCopyNotification('Failed to copy SVG source', 'error');
         }
+      }
     } catch (err) {
       showCopyNotification('Error copying SVG source', 'error');
       console.error('Error copying SVG source:', err);
@@ -255,15 +273,15 @@
   {/if}
 </span>
 
-
-
-<Notification
+<div class="notification-overlay">
+  <Notification
     text={notificationText}
     type={notificationType}
     show={showNotification}
     onClose={hideNotification}
     duration={3000}
-/>
+  />
+</div>
 
 <style>
   .action-group {
@@ -401,4 +419,11 @@
     white-space: nowrap;
   }
   /* Notification styles moved to Notification.svelte */
+  .notification-overlay {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 10000;
+    pointer-events: none;
+  }
 </style>

src/components/Preview.svelte

@@ -10,7 +10,6 @@
   export let logo = null;
   export let theme;
   export let openLogoByAnchor = () => {};
-  export let onCopy = () => {};
   export let onDownload = (path, name) => {
     const a = document.createElement('a');
     a.href = path;
@@ -24,7 +23,7 @@
   let svgSource = '';
   let isFetchingSvgSource = false;
 
-  const dispatch = createEventDispatcher();  // We no longer need the notification state and handlers since Actions component handles this
+  const dispatch = createEventDispatcher();
 
   function close() {
     show = false;
@@ -43,21 +42,26 @@
 
   function isSvgLogo(logo) {
     return logo && logo.format && logo.format.toLowerCase() === 'svg';
+  }  // Function to copy SVG source from textarea
+  function copySvgSourceFromTextarea() {
+    if (svgSource) {
+      try {
+        navigator.clipboard.writeText(svgSource);
+        return true;
+      } catch (err) {
+        console.error('Error copying from textarea:', err);
+        // Show content in prompt as fallback
+        window.prompt('Copy the SVG source code:', svgSource);
+        return false;
+      }
+    }
+    return false;
   }
 
   $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
 
   $: validColorConfig = logo && typeof logo.colorConfig === 'object' && logo.colorConfig.selector ? logo.colorConfig : undefined;
 
-  // Improved debug logging for color and theme
-  $: {
-    if (logo && logo.colors) {
-      const themeColor = getDefaultLogoColor(logo.colors, theme);
-      const fallbackColor = getThemeColor(logo.colors, theme);
-      const activeColor = logo._activeColor || themeColor;
-    }
-  }
-
   // Sync show state with URL hash
   $: {
     if (typeof window !== 'undefined') {
@@ -254,6 +258,8 @@
             <Actions
               logo={logo}
               onDownload={onDownload}
+              onCopySource={copySvgSourceFromTextarea}
+              inPreview={true}
             />
           </div>
         </div>
@@ -272,9 +278,8 @@
   {/if}
 </div>
 
-
-
 <style>
+
   .preview-actions-container {
     width: 100%;
     background: var(--color-card);