feat: implement Share button with native Web Share and clip fallback

Adds an eject button emoji (⏏️) Share button next to the Screenshot button in the control panel. Integrates the native navigator.share API in src/Renderer.js to share both the canvas screenshot image as a File and the current deep-zoom URL, alongside the text '\''Look what I found in the Mandelbrot fractal with #fractious'\''. Implements an elegant fallback for desktop and other non-supporting browsers by alerting the user, copying the location URL directly to the clipboard, and triggering a screenshot download automatically.

Author: rowan-m

index.html

@@ -304,6 +304,17 @@ <h1>Fractious</h1>
               <span aria-hidden="true">🖼️</span>
             </button>
           </fieldset>
+          <fieldset>
+            <button
+              type="button"
+              class="fullscreen"
+              title="Share"
+              aria-label="Share location and screenshot"
+              id="btn-share"
+            >
+              <span aria-hidden="true">⏏️</span>
+            </button>
+          </fieldset>
           <fieldset>
             <a href="." class="" title="Reset" aria-label="Reset"
               ><span aria-hidden="true">🔁</span></a

src/Fractious.js

@@ -172,6 +172,14 @@ export class Fractious {
     }
   }
 
+  requestShare() {
+    this.state.shareRequested = true;
+    if (!this.state.isFrameScheduled) {
+      this.state.isFrameScheduled = true;
+      requestAnimationFrame(this.frame);
+    }
+  }
+
   frame() {
     this.state.isFrameScheduled = false;
 

src/InteractionManager.js

@@ -310,6 +310,10 @@ export class InteractionManager {
       this.callbacks.onScreenshotRequest();
     });
 
+    this._bindBtn('btn-share', () => {
+      this.callbacks.onShareRequest();
+    });
+
     const btnFullscreen = document.getElementById('btn-fullscreen');
     if (btnFullscreen) {
       btnFullscreen.onclick = () => {

src/Renderer.js

@@ -400,10 +400,65 @@ export class Renderer {
     }
   }
 
+  _handleShare(state) {
+    if (state.shareRequested && state.currentPass >= state.totalPasses) {
+      state.shareRequested = false;
+
+      this.canvas.toBlob((blob) => {
+        if (!blob) return;
+        const file = new File([blob], 'mandelbrot-fractious.png', {
+          type: 'image/png',
+        });
+
+        const shareData = {
+          title: 'Fractious Mandelbrot',
+          text: 'Look what I found in the Mandelbrot fractal with #fractious',
+          url: window.location.href,
+        };
+
+        if (navigator.canShare && navigator.canShare({ files: [file] })) {
+          shareData.files = [file];
+        }
+
+        if (navigator.share) {
+          navigator.share(shareData).catch((err) => {
+            console.error('Error sharing:', err);
+          });
+        } else {
+          // Fallback if navigator.share is not supported (e.g. some desktop browsers)
+          // We can copy the link to clipboard and download the screenshot, or alert the user
+          alert(
+            'Web Share is not supported in this browser. Downloading screenshot and copying link to clipboard!',
+          );
+
+          // Copy link to clipboard
+          navigator.clipboard
+            .writeText(window.location.href)
+            .then(() => {
+              // Download screenshot
+              const url = URL.createObjectURL(blob);
+              const link = document.createElement('a');
+              link.download = 'mandelbrot-fractious.png';
+              link.href = url;
+              link.click();
+              setTimeout(() => URL.revokeObjectURL(url), 1000);
+            })
+            .catch((err) => {
+              console.error('Error copying link:', err);
+            });
+        }
+      }, 'image/png');
+    }
+  }
+
   render(config, state) {
     this._calculatePassesAndResize(config, state);
 
-    if (state.currentPass >= state.totalPasses && !state.screenshotRequested) {
+    if (
+      state.currentPass >= state.totalPasses &&
+      !state.screenshotRequested &&
+      !state.shareRequested
+    ) {
       return false; // No more passes needed
     }
 
@@ -418,8 +473,13 @@ export class Renderer {
 
     this._updateBackgroundCanvas(state);
     this._handleScreenshot(state);
+    this._handleShare(state);
 
-    return state.currentPass < state.totalPasses || state.screenshotRequested;
+    return (
+      state.currentPass < state.totalPasses ||
+      state.screenshotRequested ||
+      state.shareRequested
+    );
   }
 
   onSubmittedWorkDone() {

src/State.js

@@ -23,6 +23,7 @@ export function createDefaultState() {
 
     isFrameScheduled: false,
     screenshotRequested: false,
+    shareRequested: false,
 
     currentPass: 0,
     totalPasses: 1,

src/main.js

@@ -31,6 +31,7 @@ const interactionCallbacks = {
   onRequestRender: () => app.requestRender(),
   onResize: () => app.handleResize(),
   onScreenshotRequest: () => app.requestScreenshot(),
+  onShareRequest: () => app.requestShare(),
 };
 
 const interactionManager = new InteractionManager(