feat(web): add logo watermark to shared diagrams

apps/web/src/components/ShareModal.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Modal } from "./Modal";
 import { Copy, Check, Share2, Download } from "lucide-react";
 import { useState, useEffect } from "react";
+import IconBlack from "../assets/logo/Icon Black Transparent.svg";
 
 interface ShareModalProps {
   isOpen: boolean;
@@ -45,6 +46,9 @@ export function ShareModal({
       });
       const svgUrl = URL.createObjectURL(svgBlob);
 
+      const logoImg = new Image();
+      logoImg.src = IconBlack.src || IconBlack;
+
       img.onload = () => {
         const scale = 3; // 3x scaling for sharpness
         canvas.width = img.width * scale;
@@ -56,8 +60,27 @@ export function ShareModal({
         // Draw image with scaling
         ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 
-        setImagePreview(canvas.toDataURL("image/png"));
+        // Add Watermark
-        URL.revokeObjectURL(svgUrl);
+        const drawWatermark = () => {
+          const logoSize = Math.min(canvas.width, canvas.height) * 0.1; // 10% of smallest dimension
+          const padding = logoSize * 0.4;
+          const x = canvas.width - logoSize - padding;
+          const y = canvas.height - logoSize - padding;
+
+          ctx.save();
+          ctx.globalAlpha = 0.1; // Subtle watermark
+          ctx.drawImage(logoImg, x, y, logoSize, logoSize);
+          ctx.restore();
+
+          setImagePreview(canvas.toDataURL("image/png"));
+          URL.revokeObjectURL(svgUrl);
+        };
+
+        if (logoImg.complete) {
+          drawWatermark();
+        } else {
+          logoImg.onload = drawWatermark;
+        }
       };
 
       img.src = svgUrl;