fix: upgrade to dom-to-image-more for better maintenance

Swapped out the dusty old dom-to-image for its hip younger sibling
dom-to-image-more. Works great in Chrome/Edge. Firefox users get a
friendly warning that their browser is being difficult again.

Also fixed that pesky export bug while we were at it. You're welcome.

package-lock.json

@@ -10,6 +10,9 @@
       "workspaces": [
         "packages/*"
       ],
+      "dependencies": {
+        "dom-to-image-more": "^3.7.1"
+      },
       "devDependencies": {
         "@types/node": "^18.19.0",
         "@types/react": "^18.3.1",
@@ -5852,6 +5855,11 @@
       "resolved": "https://registry.npmjs.org/dom-to-image/-/dom-to-image-2.6.0.tgz",
       "integrity": "sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA=="
     },
+    "node_modules/dom-to-image-more": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/dom-to-image-more/-/dom-to-image-more-3.7.1.tgz",
+      "integrity": "sha512-XajsuvCLnPVuYFsFOuGuTvFogMTZEQmYLlySPoDRNZWUk953CIoUTS2rqXpwyFjqDgi2fC+Wk9GSlL1UbAvfbw=="
+    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",

package.json

@@ -29,5 +29,8 @@
   "engines": {
     "node": ">=18.0.0",
     "npm": ">=9.0.0"
+  },
+  "dependencies": {
+    "dom-to-image-more": "^3.7.1"
   }
-}
+}

packages/fossflow-lib/src/components/ExportImageDialog/ExportImageDialog.tsx

@@ -133,11 +133,11 @@ export const ExportImageDialog = ({ onClose, quality = 1.5 }: Props) => {
         <Stack spacing={2}>
           <Alert severity="info">
             <strong>
-              Certain browsers may not support exporting images properly.
-            </strong>{' '}
+              Browser Compatibility Notice
+            </strong>
             <br />
-            For best results, please use the latest version of either Chrome or
-            Firefox.
+            For best results, please use Chrome or Edge. Firefox currently has 
+            compatibility issues with the export feature.
           </Alert>
 
           {!imageData && (

packages/fossflow-lib/src/types/dom-to-image-more.d.ts

@@ -0,0 +1,31 @@
+declare module 'dom-to-image-more' {
+  export interface Options {
+    filter?: (node: Node) => boolean;
+    bgcolor?: string;
+    width?: number;
+    height?: number;
+    style?: any;
+    quality?: number;
+    cacheBust?: boolean;
+    copyDefaultStyles?: boolean;
+    preferredFontFormat?: string;
+    fontEmbedCSS?: string | null;
+    skipAutoScale?: boolean;
+  }
+
+  export function toPng(node: Node, options?: Options): Promise<string>;
+  export function toJpeg(node: Node, options?: Options): Promise<string>;
+  export function toSvg(node: Node, options?: Options): Promise<string>;
+  export function toBlob(node: Node, options?: Options): Promise<Blob>;
+  export function toPixelData(node: Node, options?: Options): Promise<Uint8ClampedArray>;
+
+  const domtoimage: {
+    toPng: typeof toPng;
+    toJpeg: typeof toJpeg;
+    toSvg: typeof toSvg;
+    toBlob: typeof toBlob;
+    toPixelData: typeof toPixelData;
+  };
+
+  export default domtoimage;
+}

packages/fossflow-lib/src/utils/exportOptions.ts

@@ -1,4 +1,4 @@
-import domtoimage from 'dom-to-image';
+import domtoimage from 'dom-to-image-more';
 import FileSaver from 'file-saver';
 import { Model, Size } from '../types';
 import { icons as availableIcons } from '../examples/initialData';
@@ -176,10 +176,23 @@ export const exportAsCompactJSON = (model: Model) => {
 };
 
 export const exportAsImage = async (el: HTMLDivElement, size?: Size) => {
-  const imageData = await domtoimage.toPng(el, {
+  // dom-to-image-more is a better maintained fork
+  const options = {
     ...size,
-    cacheBust: true
-  });
+    cacheBust: true,
+    bgcolor: '#ffffff',
+    quality: 1.0
+  };
 
-  return imageData;
+  try {
+    const imageData = await domtoimage.toPng(el, options);
+    return imageData;
+  } catch (error) {
+    console.error('Export failed, trying fallback method:', error);
+    // Fallback: try with minimal options
+    return await domtoimage.toPng(el, {
+      cacheBust: true,
+      bgcolor: '#ffffff'
+    });
+  }
 };