Add native share support with clipboard fallback

components/editor/comic-canvas.tsx

@@ -174,29 +174,57 @@ export function ComicCanvas({
               </Button>
             )}
 
-            <Button
+             <Button
-              variant="ghost"
+               variant="ghost"
-              className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3 flex-1"
+               className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3 flex-1"
-              onClick={async () => {
+               onClick={async () => {
-                const url = window.location.href;
+                 const url = window.location.href;
-                try {
+                 if (navigator.share) {
-                  await navigator.clipboard.writeText(url);
+                   try {
-                  toast({
+                     await navigator.share({
-                    title: "Link copied!",
+                       title: page.title || "Comic Page",
-                    description: "Story URL has been copied to your clipboard.",
+                       url: url,
-                    duration: 2000,
+                     });
-                  });
+                   } catch (err) {
-                } catch (err) {
+                     // User cancelled or error, fallback to clipboard
-                  console.error("Failed to copy URL:", err);
+                     try {
-                  toast({
+                       await navigator.clipboard.writeText(url);
-                    title: "Failed to copy",
+                       toast({
-                    description: "Could not copy the URL to clipboard.",
+                         title: "Link copied!",
-                    variant: "destructive",
+                         description: "Story URL has been copied to your clipboard.",
-                    duration: 3000,
+                         duration: 2000,
-                  });
+                       });
-                }
+                     } catch (clipboardErr) {
-              }}
+                       console.error("Failed to share or copy URL:", clipboardErr);
-            >
+                       toast({
+                         title: "Failed to share",
+                         description: "Could not share or copy the URL.",
+                         variant: "destructive",
+                         duration: 3000,
+                       });
+                     }
+                   }
+                 } else {
+                   // Fallback to clipboard for non-mobile browsers
+                   try {
+                     await navigator.clipboard.writeText(url);
+                     toast({
+                       title: "Link copied!",
+                       description: "Story URL has been copied to your clipboard.",
+                       duration: 2000,
+                     });
+                   } catch (err) {
+                     console.error("Failed to copy URL:", err);
+                     toast({
+                       title: "Failed to copy",
+                       description: "Could not copy the URL to clipboard.",
+                       variant: "destructive",
+                       duration: 3000,
+                     });
+                   }
+                 }
+               }}
+             >
               <Share className="w-4 h-4" />
               <span>Share</span>
             </Button>