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,11 +197,22 @@
     if (logo.format !== 'SVG') return;
 
     try {
-      const success = await copySvgSource(logo.path);
+      // Check if we're in preview mode and have a custom handler
-      if (success) {
+      if (inPreview && typeof onCopySource === 'function') {
-        showCopyNotification('SVG source copied!', 'success');
+        const success = onCopySource();
+        if (success) {
+          showCopyNotification('SVG source copied!', 'success');
+        } else {
+          showCopyNotification('Failed to copy SVG source', 'error');
+        }
       } else {
-        showCopyNotification('Failed to copy SVG source', 'error');
+        // 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');
@@ -255,15 +273,15 @@
   {/if}
 </span>
 
-
+<div class="notification-overlay">
-
+  <Notification
-<Notification
+    text={notificationText}
-  text={notificationText}
+    type={notificationType}
-  type={notificationType}
+    show={showNotification}
-  show={showNotification}
+    onClose={hideNotification}
-  onClose={hideNotification}
+    duration={3000}
-  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);