build(deps): bump firebase from 8.3.3 to 10.9.0

Bumps [firebase](https://github.com/firebase/firebase-js-sdk) from 8.3.3 to 10.9.0.
- [Release notes](https://github.com/firebase/firebase-js-sdk/releases)
- [Changelog](https://github.com/firebase/firebase-js-sdk/blob/main/CHANGELOG.md)
- [Commits](https://github.com/firebase/firebase-js-sdk/compare/firebase@8.3.3...firebase@10.9.0)

---
updated-dependencies:
- dependency-name: firebase
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>

examples/excalidraw/components/ExampleApp.tsx

@@ -369,12 +369,10 @@ export default function ExampleApp({
       return false;
     }
     await exportToClipboard({
-      data: {
-        elements: excalidrawAPI.getSceneElements(),
-        appState: excalidrawAPI.getAppState(),
-        files: excalidrawAPI.getFiles(),
-      },
-      type: "json",
+      elements: excalidrawAPI.getSceneElements(),
+      appState: excalidrawAPI.getAppState(),
+      files: excalidrawAPI.getFiles(),
+      type,
     });
     window.alert(`Copied to clipboard as ${type} successfully`);
   };
@@ -819,17 +817,15 @@ export default function ExampleApp({
                 return;
               }
               const svg = await exportToSvg({
-                data: {
-                  elements: excalidrawAPI?.getSceneElements(),
-                  appState: {
-                    ...initialData.appState,
-                    exportWithDarkMode,
-                    exportEmbedScene,
-                    width: 300,
-                    height: 100,
-                  },
-                  files: excalidrawAPI?.getFiles(),
+                elements: excalidrawAPI?.getSceneElements(),
+                appState: {
+                  ...initialData.appState,
+                  exportWithDarkMode,
+                  exportEmbedScene,
+                  width: 300,
+                  height: 100,
                 },
+                files: excalidrawAPI?.getFiles(),
               });
               appRef.current.querySelector(".export-svg").innerHTML =
                 svg.outerHTML;
@@ -845,18 +841,14 @@ export default function ExampleApp({
                 return;
               }
               const blob = await exportToBlob({
-                data: {
-                  elements: excalidrawAPI?.getSceneElements(),
-                  appState: {
-                    ...initialData.appState,
-                    exportEmbedScene,
-                    exportWithDarkMode,
-                  },
-                  files: excalidrawAPI?.getFiles(),
-                },
-                config: {
-                  mimeType: "image/png",
+                elements: excalidrawAPI?.getSceneElements(),
+                mimeType: "image/png",
+                appState: {
+                  ...initialData.appState,
+                  exportEmbedScene,
+                  exportWithDarkMode,
                 },
+                files: excalidrawAPI?.getFiles(),
               });
               setBlobUrl(window.URL.createObjectURL(blob));
             }}
@@ -872,14 +864,12 @@ export default function ExampleApp({
                 return;
               }
               const canvas = await exportToCanvas({
-                data: {
-                  elements: excalidrawAPI.getSceneElements(),
-                  appState: {
-                    ...initialData.appState,
-                    exportWithDarkMode,
-                  },
-                  files: excalidrawAPI.getFiles(),
+                elements: excalidrawAPI.getSceneElements(),
+                appState: {
+                  ...initialData.appState,
+                  exportWithDarkMode,
                 },
+                files: excalidrawAPI.getFiles(),
               });
               const ctx = canvas.getContext("2d")!;
               ctx.font = "30px Excalifont";
@@ -895,14 +885,12 @@ export default function ExampleApp({
                 return;
               }
               const canvas = await exportToCanvas({
-                data: {
-                  elements: excalidrawAPI.getSceneElements(),
-                  appState: {
-                    ...initialData.appState,
-                    exportWithDarkMode,
-                  },
-                  files: excalidrawAPI.getFiles(),
+                elements: excalidrawAPI.getSceneElements(),
+                appState: {
+                  ...initialData.appState,
+                  exportWithDarkMode,
                 },
+                files: excalidrawAPI.getFiles(),
               });
               const ctx = canvas.getContext("2d")!;
               ctx.font = "30px Excalifont";

excalidraw-app/App.tsx

@@ -25,13 +25,7 @@ import {
   TTDDialogTrigger,
   StoreAction,
   reconcileElements,
-  exportToCanvas,
-  exportToSvg,
 } from "../packages/excalidraw";
-import {
-  exportToBlob,
-  getNonDeletedElements,
-} from "../packages/excalidraw/index";
 import type {
   AppState,
   ExcalidrawImperativeAPI,
@@ -133,9 +127,6 @@ import DebugCanvas, {
 } from "./components/DebugCanvas";
 import { AIComponents } from "./components/AI";
 import { ExcalidrawPlusIframeExport } from "./ExcalidrawPlusIframeExport";
-import { fileSave } from "../packages/excalidraw/data/filesystem";
-import { type ExportSceneConfig } from "../packages/excalidraw/scene/export";
-import { round } from "../packages/math";
 
 polyfill();
 
@@ -616,19 +607,6 @@ const ExcalidrawWrapper = () => {
     };
   }, [excalidrawAPI]);
 
-  const canvasPreviewContainerRef = useRef<HTMLDivElement>(null);
-  const svgPreviewContainerRef = useRef<HTMLDivElement>(null);
-
-  const [config, setConfig] = useState<ExportSceneConfig>({
-    scale: 1,
-    position: "center",
-    fit: "contain",
-  });
-
-  useEffect(() => {
-    localStorage.setItem("_exportConfig", JSON.stringify(config));
-  }, [config]);
-
   const onChange = (
     elements: readonly OrderedExcalidrawElement[],
     appState: AppState,
@@ -638,84 +616,6 @@ const ExcalidrawWrapper = () => {
       collabAPI.syncElements(elements);
     }
 
-    const nonDeletedElements = getNonDeletedElements(elements);
-
-    const frame = nonDeletedElements.find(
-      (el) => el.strokeStyle === "dashed" && el.type === "rectangle",
-    );
-
-    exportToCanvas({
-      data: {
-        elements: nonDeletedElements.filter((x) => x.id !== frame?.id),
-        // .concat(
-        //   restoreElements(
-        //     [
-        //       // @ts-ignore
-        //       {
-        //         type: "rectangle",
-        //         width: appState.width / zoom,
-        //         height: appState.height / zoom,
-        //         x: -appState.scrollX,
-        //         y: -appState.scrollY,
-        //         fillStyle: "solid",
-        //         strokeColor: "transparent",
-        //         backgroundColor: "rgba(0,0,0,0.05)",
-        //         roundness: { type: ROUNDNESS.ADAPTIVE_RADIUS, value: 40 },
-        //       },
-        //     ],
-        //     null,
-        //   ),
-        // ),
-        appState,
-        files,
-      },
-      config: {
-        ...(frame
-          ? {
-              ...config,
-              width: frame.width,
-              height: frame.height,
-              x: frame.x,
-              y: frame.y,
-            }
-          : config),
-      },
-    }).then((canvas) => {
-      if (canvasPreviewContainerRef.current) {
-        canvasPreviewContainerRef.current.replaceChildren(canvas);
-        document.querySelector(
-          ".canvas_dims",
-        )!.innerHTML = `${canvas.width}x${canvas.height} (canvas)`;
-      }
-    });
-
-    exportToSvg({
-      data: {
-        elements: nonDeletedElements.filter((x) => x.id !== frame?.id),
-        appState,
-        files,
-      },
-      config: {
-        ...(frame
-          ? {
-              ...config,
-              width: frame.width,
-              height: frame.height,
-              x: frame.x,
-              y: frame.y,
-            }
-          : config),
-      },
-    }).then((svg) => {
-      if (svgPreviewContainerRef.current) {
-        svgPreviewContainerRef.current.replaceChildren(svg);
-        document.querySelector(".svg_dims")!.innerHTML = `${round(
-          parseFloat(svg.getAttribute("width") ?? ""),
-          0,
-        )}x${round(parseFloat(svg.getAttribute("height") ?? ""), 0)} (svg)`;
-      }
-    });
-
     // this check is redundant, but since this is a hot path, it's best
     // not to evaludate the nested expression every time
     if (!LocalData.isSavePaused()) {
@@ -1221,258 +1121,6 @@ const ExcalidrawWrapper = () => {
           />
         )}
       </Excalidraw>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          position: "fixed",
-          bottom: 60,
-          right: 60,
-          zIndex: 9999999999,
-          color: "black",
-        }}
-      >
-        <div style={{ display: "flex", gap: "1rem", flexDirection: "column" }}>
-          <div style={{ display: "flex", gap: "1rem" }}>
-            <label>
-              center{" "}
-              <input
-                type="checkbox"
-                checked={config.position === "center"}
-                onChange={() =>
-                  setConfig((s) => ({
-                    ...s,
-                    position: s.position === "center" ? "topLeft" : "center",
-                  }))
-                }
-              />
-            </label>
-            <label>
-              fit{" "}
-              <select
-                value={config.fit}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    fit: event.target.value as any,
-                  }))
-                }
-              >
-                <option value="none">none</option>
-                <option value="contain">contain</option>
-              </select>
-            </label>
-            <label>
-              padding{" "}
-              <input
-                type="number"
-                max={600}
-                style={{ width: "3rem" }}
-                value={config.padding}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    padding: !event.target.value.trim()
-                      ? undefined
-                      : Math.min(parseInt(event.target.value as any), 600),
-                  }))
-                }
-              />
-            </label>
-            <label>
-              scale{" "}
-              <input
-                type="number"
-                max={4}
-                style={{ width: "3rem" }}
-                value={config.scale}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    scale: !event.target.value.trim()
-                      ? undefined
-                      : Math.min(parseFloat(event.target.value as any), 4),
-                  }))
-                }
-              />
-            </label>
-          </div>
-          <div style={{ display: "flex", gap: "1rem" }}>
-            <label
-              style={{
-                opacity:
-                  config.maxWidthOrHeight != null ||
-                  config.widthOrHeight != null
-                    ? 0.5
-                    : undefined,
-              }}
-            >
-              width{" "}
-              <input
-                type="number"
-                max={600}
-                style={{ width: "3rem" }}
-                value={config.width}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    width: !event.target.value.trim()
-                      ? undefined
-                      : Math.min(parseInt(event.target.value as any), 600),
-                  }))
-                }
-              />
-            </label>
-            <label
-              style={{
-                opacity:
-                  config.maxWidthOrHeight != null ||
-                  config.widthOrHeight != null
-                    ? 0.5
-                    : undefined,
-              }}
-            >
-              height{" "}
-              <input
-                type="number"
-                max={600}
-                style={{ width: "3rem" }}
-                value={config.height}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    height: !event.target.value.trim()
-                      ? undefined
-                      : Math.min(parseInt(event.target.value as any), 600),
-                  }))
-                }
-              />
-            </label>
-            <label>
-              x{" "}
-              <input
-                type="number"
-                style={{ width: "3rem" }}
-                value={config.x}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    x: !event.target.value.trim()
-                      ? undefined
-                      : parseFloat(event.target.value as any) ?? undefined,
-                  }))
-                }
-              />
-            </label>
-            <label>
-              y{" "}
-              <input
-                type="number"
-                style={{ width: "3rem" }}
-                value={config.y}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    y: !event.target.value.trim()
-                      ? undefined
-                      : parseFloat(event.target.value as any) ?? undefined,
-                  }))
-                }
-              />
-            </label>
-            <label
-              style={{
-                opacity: config.widthOrHeight != null ? 0.5 : undefined,
-              }}
-            >
-              maxWH{" "}
-              <input
-                type="number"
-                // max={600}
-                style={{ width: "3rem" }}
-                value={config.maxWidthOrHeight}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    maxWidthOrHeight: !event.target.value.trim()
-                      ? undefined
-                      : parseInt(event.target.value as any),
-                  }))
-                }
-              />
-            </label>
-            <label>
-              widthOrHeight{" "}
-              <input
-                type="number"
-                max={600}
-                style={{ width: "3rem" }}
-                value={config.widthOrHeight}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    widthOrHeight: !event.target.value.trim()
-                      ? undefined
-                      : Math.min(parseInt(event.target.value as any), 600),
-                  }))
-                }
-              />
-            </label>
-          </div>
-        </div>
-        <div className="canvas_dims">0x0</div>
-        <div
-          ref={canvasPreviewContainerRef}
-          onClick={() => {
-            exportToBlob({
-              data: {
-                elements: excalidrawAPI!.getSceneElements(),
-                files: excalidrawAPI?.getFiles() || null,
-              },
-              config,
-            }).then((blob) => {
-              fileSave(blob, {
-                name: "xx",
-                extension: "png",
-                description: "xxx",
-              });
-            });
-          }}
-          style={{
-            borderRadius: 12,
-            border: "1px solid #777",
-            overflow: "hidden",
-            padding: 10,
-            backgroundColor: "pink",
-          }}
-        />
-        <div className="svg_dims">0x0</div>
-        <div
-          ref={svgPreviewContainerRef}
-          onClick={() => {
-            exportToBlob({
-              data: {
-                elements: excalidrawAPI!.getSceneElements(),
-                files: excalidrawAPI?.getFiles() || null,
-              },
-              config,
-            }).then((blob) => {
-              fileSave(blob, {
-                name: "xx",
-                extension: "png",
-                description: "xxx",
-              });
-            });
-          }}
-          style={{
-            borderRadius: 12,
-            border: "1px solid #777",
-            overflow: "hidden",
-            padding: 10,
-            backgroundColor: "pink",
-          }}
-        />
-      </div>
     </div>
   );
 };

excalidraw-app/components/AI.tsx

@@ -21,19 +21,15 @@ export const AIComponents = ({
           const appState = excalidrawAPI.getAppState();
 
           const blob = await exportToBlob({
-            data: {
-              elements: children,
-              appState: {
-                ...appState,
-                exportBackground: true,
-                viewBackgroundColor: appState.viewBackgroundColor,
-              },
-              files: excalidrawAPI.getFiles(),
-            },
-            config: {
-              exportingFrame: frame,
-              mimeType: MIME_TYPES.jpg,
+            elements: children,
+            appState: {
+              ...appState,
+              exportBackground: true,
+              viewBackgroundColor: appState.viewBackgroundColor,
             },
+            exportingFrame: frame,
+            files: excalidrawAPI.getFiles(),
+            mimeType: MIME_TYPES.jpg,
           });
 
           const dataURL = await getDataURL(blob);

excalidraw-app/components/DebugCanvas.tsx

@@ -84,7 +84,7 @@ const _debugRenderer = (
     scale,
     normalizedWidth,
     normalizedHeight,
-    canvasBackgroundColor: "transparent",
+    viewBackgroundColor: "transparent",
   });
 
   // Apply zoom

excalidraw-app/package.json

@@ -29,7 +29,7 @@
     "@excalidraw/random-username": "1.0.0",
     "@sentry/browser": "6.2.5",
     "@sentry/integrations": "6.2.5",
-    "firebase": "8.3.3",
+    "firebase": "10.9.0",
     "i18next-browser-languagedetector": "6.1.4",
     "idb-keyval": "6.0.3",
     "jotai": "1.13.1",

packages/excalidraw/actions/actionClipboard.tsx

@@ -9,9 +9,8 @@ import {
   readSystemClipboard,
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
-import { exportAsImage } from "../data/index";
+import { exportCanvas, prepareElementsForExport } from "../data/index";
 import { getTextFromElements, isTextElement } from "../element";
-import { prepareElementsForExport } from "../data/index";
 import { t } from "../i18n";
 import { isFirefox } from "../constants";
 import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
@@ -137,15 +136,17 @@ export const actionCopyAsSvg = register({
     );
 
     try {
-      await exportAsImage({
-        type: "clipboard-svg",
-        data: { elements: exportedElements, appState, files: app.files },
-        config: {
+      await exportCanvas(
+        "clipboard-svg",
+        exportedElements,
+        appState,
+        app.files,
+        {
           ...appState,
           exportingFrame,
           name: app.getName(),
         },
-      });
+      );
 
       const selectedElements = app.scene.getSelectedElements({
         selectedElementIds: appState.selectedElementIds,
@@ -207,16 +208,11 @@ export const actionCopyAsPng = register({
       true,
     );
     try {
-      await exportAsImage({
-        type: "clipboard",
-        data: { elements: exportedElements, appState, files: app.files },
-        config: {
-          ...appState,
-          exportingFrame,
-          name: appState.name || app.getName(),
-        },
+      await exportCanvas("clipboard", exportedElements, appState, app.files, {
+        ...appState,
+        exportingFrame,
+        name: app.getName(),
       });
-
       return {
         appState: {
           ...appState,

packages/excalidraw/actions/actionExport.tsx

@@ -10,13 +10,13 @@ import { useDevice } from "../components/App";
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { CheckboxItem } from "../components/CheckboxItem";
-import { getCanvasSize } from "../scene/export";
+import { getExportSize } from "../scene/export";
 import { DEFAULT_EXPORT_PADDING, EXPORT_SCALES, THEME } from "../constants";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { getNonDeletedElements } from "../element";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
-import type { NonDeletedExcalidrawElement, Theme } from "../element/types";
+import type { Theme } from "../element/types";
 
 import "../components/ToolIcon.scss";
 import { StoreAction } from "../store";
@@ -58,18 +58,6 @@ export const actionChangeExportScale = register({
       ? getSelectedElements(elements, appState)
       : elements;
 
-    const getExportSize = (
-      elements: readonly NonDeletedExcalidrawElement[],
-      padding: number,
-      scale: number,
-    ): [number, number] => {
-      const [, , width, height] = getCanvasSize(elements).map((dimension) =>
-        Math.trunc(dimension * scale),
-      );
-
-      return [width + padding * 2, height + padding * 2];
-    };
-
     return (
       <>
         {EXPORT_SCALES.map((s) => {

packages/excalidraw/appState.ts

@@ -1,18 +1,17 @@
+import { COLOR_PALETTE } from "./colors";
 import {
   ARROW_TYPE,
-  COLOR_WHITE,
   DEFAULT_ELEMENT_PROPS,
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   DEFAULT_TEXT_ALIGN,
   DEFAULT_GRID_SIZE,
-  DEFAULT_ZOOM_VALUE,
   EXPORT_SCALES,
   STATS_PANELS,
   THEME,
   DEFAULT_GRID_STEP,
 } from "./constants";
-import type { AppState } from "./types";
+import type { AppState, NormalizedZoomValue } from "./types";
 
 const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
   ? devicePixelRatio
@@ -100,10 +99,10 @@ export const getDefaultAppState = (): Omit<
     editingFrame: null,
     elementsToHighlight: null,
     toast: null,
-    viewBackgroundColor: COLOR_WHITE,
+    viewBackgroundColor: COLOR_PALETTE.white,
     zenModeEnabled: false,
     zoom: {
-      value: DEFAULT_ZOOM_VALUE,
+      value: 1 as NormalizedZoomValue,
     },
     viewModeEnabled: false,
     pendingImageElementId: null,

packages/excalidraw/charts.ts

@@ -1,8 +1,11 @@
 import type { Radians } from "../math";
 import { pointFrom } from "../math";
-import { DEFAULT_CHART_COLOR_INDEX, getAllColorsSpecificShade } from "./colors";
 import {
-  COLOR_CHARCOAL_BLACK,
+  COLOR_PALETTE,
+  DEFAULT_CHART_COLOR_INDEX,
+  getAllColorsSpecificShade,
+} from "./colors";
+import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   VERTICAL_ALIGN,
@@ -170,7 +173,7 @@ const commonProps = {
   fontSize: DEFAULT_FONT_SIZE,
   opacity: 100,
   roughness: 1,
-  strokeColor: COLOR_CHARCOAL_BLACK,
+  strokeColor: COLOR_PALETTE.black,
   roundness: null,
   strokeStyle: "solid",
   strokeWidth: 1,
@@ -321,7 +324,7 @@ const chartBaseElements = (
         y: y - chartHeight,
         width: chartWidth,
         height: chartHeight,
-        strokeColor: COLOR_CHARCOAL_BLACK,
+        strokeColor: COLOR_PALETTE.black,
         fillStyle: "solid",
         opacity: 6,
       })

packages/excalidraw/colors.ts

@@ -1,25 +1,27 @@
 import oc from "open-color";
-import {
-  COLOR_WHITE,
-  COLOR_CHARCOAL_BLACK,
-  COLOR_TRANSPARENT,
-} from "./constants";
-import { type Merge } from "./utility-types";
-import { pick } from "./utils";
+import type { Merge } from "./utility-types";
+
+// FIXME can't put to utils.ts rn because of circular dependency
+const pick = <R extends Record<string, any>, K extends readonly (keyof R)[]>(
+  source: R,
+  keys: K,
+) => {
+  return keys.reduce((acc, key: K[number]) => {
+    if (key in source) {
+      acc[key] = source[key];
+    }
+    return acc;
+  }, {} as Pick<R, K[number]>) as Pick<R, K[number]>;
+};
 
 export type ColorPickerColor =
-  | Exclude<keyof oc, "indigo" | "lime" | "black">
+  | Exclude<keyof oc, "indigo" | "lime">
   | "transparent"
-  | "charcoal"
   | "bronze";
 export type ColorTuple = readonly [string, string, string, string, string];
 export type ColorPalette = Merge<
   Record<ColorPickerColor, ColorTuple>,
-  {
-    charcoal: typeof COLOR_CHARCOAL_BLACK;
-    white: typeof COLOR_WHITE;
-    transparent: typeof COLOR_TRANSPARENT;
-  }
+  { black: "#1e1e1e"; white: "#ffffff"; transparent: "transparent" }
 >;
 
 // used general type instead of specific type (ColorPalette) to support custom colors
@@ -39,7 +41,7 @@ export const CANVAS_PALETTE_SHADE_INDEXES = [0, 1, 2, 3, 4] as const;
 export const getSpecificColorShades = (
   color: Exclude<
     ColorPickerColor,
-    "transparent" | "charcoal" | "black" | "white" | "bronze"
+    "transparent" | "white" | "black" | "bronze"
   >,
   indexArr: Readonly<ColorShadesIndexes>,
 ) => {
@@ -47,9 +49,9 @@ export const getSpecificColorShades = (
 };
 
 export const COLOR_PALETTE = {
-  transparent: COLOR_TRANSPARENT,
-  charcoal: COLOR_CHARCOAL_BLACK,
-  white: COLOR_WHITE,
+  transparent: "transparent",
+  black: "#1e1e1e",
+  white: "#ffffff",
   // open-colors
   gray: getSpecificColorShades("gray", ELEMENTS_PALETTE_SHADE_INDEXES),
   red: getSpecificColorShades("red", ELEMENTS_PALETTE_SHADE_INDEXES),
@@ -85,7 +87,7 @@ const COMMON_ELEMENT_SHADES = pick(COLOR_PALETTE, [
 
 // ORDER matters for positioning in quick picker
 export const DEFAULT_ELEMENT_STROKE_PICKS = [
-  COLOR_PALETTE.charcoal,
+  COLOR_PALETTE.black,
   COLOR_PALETTE.red[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
   COLOR_PALETTE.green[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
   COLOR_PALETTE.blue[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
@@ -123,7 +125,7 @@ export const DEFAULT_ELEMENT_STROKE_COLOR_PALETTE = {
   transparent: COLOR_PALETTE.transparent,
   white: COLOR_PALETTE.white,
   gray: COLOR_PALETTE.gray,
-  charcoal: COLOR_PALETTE.charcoal,
+  black: COLOR_PALETTE.black,
   bronze: COLOR_PALETTE.bronze,
   // rest
   ...COMMON_ELEMENT_SHADES,
@@ -134,7 +136,7 @@ export const DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE = {
   transparent: COLOR_PALETTE.transparent,
   white: COLOR_PALETTE.white,
   gray: COLOR_PALETTE.gray,
-  charcoal: COLOR_PALETTE.charcoal,
+  black: COLOR_PALETTE.black,
   bronze: COLOR_PALETTE.bronze,
 
   ...COMMON_ELEMENT_SHADES,

packages/excalidraw/components/App.tsx

@@ -90,7 +90,7 @@ import {
   DEFAULT_TEXT_ALIGN,
 } from "../constants";
 import type { ExportedElements } from "../data";
-import { exportAsImage, loadFromBlob } from "../data";
+import { exportCanvas, loadFromBlob } from "../data";
 import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
 import { restore, restoreElements } from "../data/restore";
 import {
@@ -1815,20 +1815,18 @@ class App extends React.Component<AppProps, AppState> {
     opts: { exportingFrame: ExcalidrawFrameLikeElement | null },
   ) => {
     trackEvent("export", type, "ui");
-    const fileHandle = await exportAsImage({
+    const fileHandle = await exportCanvas(
       type,
-      data: {
-        elements,
-        appState: this.state,
-        files: this.files,
-      },
-      config: {
+      elements,
+      this.state,
+      this.files,
+      {
         exportBackground: this.state.exportBackground,
         name: this.getName(),
         viewBackgroundColor: this.state.viewBackgroundColor,
         exportingFrame: opts.exportingFrame,
       },
-    })
+    )
       .catch(muteFSAbortError)
       .catch((error) => {
         console.error(error);
@@ -2559,27 +2557,19 @@ class App extends React.Component<AppProps, AppState> {
         { passive: false },
       ),
       addEventListener(window, EVENT.MESSAGE, this.onWindowMessage, false),
-      addEventListener(document, EVENT.POINTER_UP, this.removePointer, {
-        passive: false,
-      }), // #3553
-      addEventListener(document, EVENT.COPY, this.onCopy, { passive: false }),
+      addEventListener(document, EVENT.POINTER_UP, this.removePointer), // #3553
+      addEventListener(document, EVENT.COPY, this.onCopy),
       addEventListener(document, EVENT.KEYUP, this.onKeyUp, { passive: true }),
       addEventListener(
         document,
         EVENT.POINTER_MOVE,
         this.updateCurrentCursorPosition,
-        { passive: false },
       ),
       // rerender text elements on font load to fix #637 && #1553
-      addEventListener(
-        document.fonts,
-        "loadingdone",
-        (event) => {
-          const fontFaces = (event as FontFaceSetLoadEvent).fontfaces;
-          this.fonts.onLoaded(fontFaces);
-        },
-        { passive: false },
-      ),
+      addEventListener(document.fonts, "loadingdone", (event) => {
+        const fontFaces = (event as FontFaceSetLoadEvent).fontfaces;
+        this.fonts.onLoaded(fontFaces);
+      }),
       // Safari-only desktop pinch zoom
       addEventListener(
         document,
@@ -2599,17 +2589,12 @@ class App extends React.Component<AppProps, AppState> {
         this.onGestureEnd as any,
         false,
       ),
-      addEventListener(
-        window,
-        EVENT.FOCUS,
-        () => {
-          this.maybeCleanupAfterMissingPointerUp(null);
-          // browsers (chrome?) tend to free up memory a lot, which results
-          // in canvas context being cleared. Thus re-render on focus.
-          this.triggerRender(true);
-        },
-        { passive: false },
-      ),
+      addEventListener(window, EVENT.FOCUS, () => {
+        this.maybeCleanupAfterMissingPointerUp(null);
+        // browsers (chrome?) tend to free up memory a lot, which results
+        // in canvas context being cleared. Thus re-render on focus.
+        this.triggerRender(true);
+      }),
     );
 
     if (this.state.viewModeEnabled) {
@@ -2625,12 +2610,9 @@ class App extends React.Component<AppProps, AppState> {
         document,
         EVENT.FULLSCREENCHANGE,
         this.onFullscreenChange,
-        { passive: false },
       ),
-      addEventListener(document, EVENT.PASTE, this.pasteFromClipboard, {
-        passive: false,
-      }),
-      addEventListener(document, EVENT.CUT, this.onCut, { passive: false }),
+      addEventListener(document, EVENT.PASTE, this.pasteFromClipboard),
+      addEventListener(document, EVENT.CUT, this.onCut),
       addEventListener(window, EVENT.RESIZE, this.onResize, false),
       addEventListener(window, EVENT.UNLOAD, this.onUnload, false),
       addEventListener(window, EVENT.BLUR, this.onBlur, false),
@@ -2638,7 +2620,6 @@ class App extends React.Component<AppProps, AppState> {
         this.excalidrawContainerRef.current,
         EVENT.WHEEL,
         this.handleWheel,
-        { passive: false },
       ),
       addEventListener(
         this.excalidrawContainerRef.current,
@@ -2660,7 +2641,6 @@ class App extends React.Component<AppProps, AppState> {
           getNearestScrollableContainer(this.excalidrawContainerRef.current!),
           EVENT.SCROLL,
           this.onScroll,
-          { passive: false },
         ),
       );
     }
@@ -7942,14 +7922,10 @@ class App extends React.Component<AppProps, AppState> {
           isFrameLikeElement(e),
         );
         const topLayerFrame = this.getTopLayerFrameAtSceneCoords(pointerCoords);
-        const frameToHighlight =
-          topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null;
-        // Only update the state if there is a difference
-        if (this.state.frameToHighlight !== frameToHighlight) {
-          flushSync(() => {
-            this.setState({ frameToHighlight });
-          });
-        }
+        this.setState({
+          frameToHighlight:
+            topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null,
+        });
 
         // Marking that click was used for dragging to check
         // if elements should be deselected on pointerup
@@ -8096,9 +8072,7 @@ class App extends React.Component<AppProps, AppState> {
             this.scene.getNonDeletedElementsMap(),
           );
 
-          flushSync(() => {
-            this.setState({ snapLines });
-          });
+          this.setState({ snapLines });
 
           // when we're editing the name of a frame, we want the user to be
           // able to select and interact with the text input
@@ -9832,7 +9806,6 @@ class App extends React.Component<AppProps, AppState> {
       this.interactiveCanvas.addEventListener(
         EVENT.TOUCH_START,
         this.onTouchStart,
-        { passive: false },
       );
       this.interactiveCanvas.addEventListener(EVENT.TOUCH_END, this.onTouchEnd);
       // -----------------------------------------------------------------------
@@ -10264,7 +10237,7 @@ class App extends React.Component<AppProps, AppState> {
           croppingElement,
           this.scene.getNonDeletedElementsMap(),
           {
-            newSize: {
+            oldSize: {
               width: croppingElement.width,
               height: croppingElement.height,
             },

packages/excalidraw/components/ColorPicker/keyboardNavHandlers.ts

@@ -204,7 +204,7 @@ export const colorPickerKeyNavHandler = ({
       });
 
       if (!baseColorName) {
-        onChange(COLOR_PALETTE.charcoal);
+        onChange(COLOR_PALETTE.black);
       }
     }
 

packages/excalidraw/components/ImageExportDialog.tsx

@@ -23,6 +23,7 @@ import { nativeFileSystemSupported } from "../data/filesystem";
 import type { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { isSomeElementSelected } from "../scene";
+import { exportToCanvas } from "../../utils/export";
 
 import { copyIcon, downloadIcon, helpIcon } from "./icons";
 import { Dialog } from "./Dialog";
@@ -35,7 +36,6 @@ import { FilledButton } from "./FilledButton";
 import { cloneJSON } from "../utils";
 import { prepareElementsForExport } from "../data";
 import { useCopyStatus } from "../hooks/useCopiedIndicator";
-import { exportToCanvas } from "../scene/export";
 
 const supportsContextFilters =
   "filter" in document.createElement("canvas").getContext("2d")!;
@@ -123,25 +123,19 @@ const ImageExportModal = ({
     }
 
     exportToCanvas({
-      data: {
-        elements: exportedElements,
-        appState: {
-          ...appStateSnapshot,
-          name: projectName,
-          exportEmbedScene: embedScene,
-        },
-        files,
-      },
-      config: {
-        canvasBackgroundColor: !exportWithBackground
-          ? false
-          : appStateSnapshot.viewBackgroundColor,
-        padding: DEFAULT_EXPORT_PADDING,
-        theme: exportDarkMode ? "dark" : "light",
-        scale: exportScale,
-        maxWidthOrHeight: Math.max(maxWidth, maxHeight),
-        exportingFrame,
+      elements: exportedElements,
+      appState: {
+        ...appStateSnapshot,
+        name: projectName,
+        exportBackground: exportWithBackground,
+        exportWithDarkMode: exportDarkMode,
+        exportScale,
+        exportEmbedScene: embedScene,
       },
+      files,
+      exportPadding: DEFAULT_EXPORT_PADDING,
+      maxWidthOrHeight: Math.max(maxWidth, maxHeight),
+      exportingFrame,
     })
       .then((canvas) => {
         setRenderError(null);

packages/excalidraw/components/PasteChartDialog.tsx

@@ -1,9 +1,9 @@
+import oc from "open-color";
 import React, { useLayoutEffect, useRef, useState } from "react";
 import { trackEvent } from "../analytics";
 import type { ChartElements, Spreadsheet } from "../charts";
 import { renderSpreadsheet } from "../charts";
 import type { ChartType } from "../element/types";
-import { COLOR_WHITE } from "../constants";
 import { t } from "../i18n";
 import { exportToSvg } from "../scene/export";
 import type { UIAppState } from "../types";
@@ -41,16 +41,17 @@ const ChartPreviewBtn = (props: {
     const previewNode = previewRef.current!;
 
     (async () => {
-      svg = await exportToSvg({
-        data: {
-          elements,
-          appState: {
-            exportBackground: false,
-            viewBackgroundColor: COLOR_WHITE,
-          },
-          files: null,
+      svg = await exportToSvg(
+        elements,
+        {
+          exportBackground: false,
+          viewBackgroundColor: oc.white,
         },
-      });
+        null, // files
+        {
+          skipInliningFonts: true,
+        },
+      );
       svg.querySelector(".style-fonts")?.remove();
       previewNode.replaceChildren();
       previewNode.appendChild(svg);

packages/excalidraw/components/PublishLibrary.tsx

@@ -7,8 +7,8 @@ import { t } from "../i18n";
 import Trans from "./Trans";
 
 import type { LibraryItems, LibraryItem, UIAppState } from "../types";
+import { exportToCanvas, exportToSvg } from "../../utils/export";
 import {
-  COLOR_WHITE,
   EDITOR_LS_KEYS,
   EXPORT_DATA_TYPES,
   EXPORT_SOURCE,
@@ -24,7 +24,6 @@ import { ToolButton } from "./ToolButton";
 import { EditorLocalStorage } from "../data/EditorLocalStorage";
 
 import "./PublishLibrary.scss";
-import { exportToCanvas, exportToSvg } from "../scene/export";
 
 interface PublishLibraryDataParams {
   authorName: string;
@@ -56,20 +55,16 @@ const generatePreviewImage = async (libraryItems: LibraryItems) => {
 
   const ctx = canvas.getContext("2d")!;
 
-  ctx.fillStyle = COLOR_WHITE;
+  ctx.fillStyle = OpenColor.white;
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 
   // draw items
   // ---------------------------------------------------------------------------
   for (const [index, item] of libraryItems.entries()) {
     const itemCanvas = await exportToCanvas({
-      data: {
-        elements: item.elements,
-        files: null,
-      },
-      config: {
-        maxWidthOrHeight: BOX_SIZE,
-      },
+      elements: item.elements,
+      files: null,
+      maxWidthOrHeight: BOX_SIZE,
     });
 
     const { width, height } = itemCanvas;
@@ -131,15 +126,14 @@ const SingleLibraryItem = ({
     }
     (async () => {
       const svg = await exportToSvg({
-        data: {
-          elements: libItem.elements,
-          appState: {
-            ...appState,
-            viewBackgroundColor: COLOR_WHITE,
-            exportBackground: true,
-          },
-          files: null,
+        elements: libItem.elements,
+        appState: {
+          ...appState,
+          viewBackgroundColor: OpenColor.white,
+          exportBackground: true,
         },
+        files: null,
+        skipInliningFonts: true,
       });
       node.innerHTML = svg.outerHTML;
     })();

packages/excalidraw/components/SearchMenu.tsx

@@ -294,7 +294,6 @@ export const SearchMenu = () => {
     // as well as to handle events before App ones
     return addEventListener(window, EVENT.KEYDOWN, eventHandler, {
       capture: true,
-      passive: false,
     });
   }, [setAppState, stableState, app]);
 

packages/excalidraw/components/Stats/MultiDimension.tsx

@@ -69,6 +69,7 @@ const resizeElementInGroup = (
   originalElementsMap: ElementsMap,
 ) => {
   const updates = getResizedUpdates(anchorX, anchorY, scale, origElement);
+  const { width: oldWidth, height: oldHeight } = latestElement;
 
   mutateElement(latestElement, updates, false);
   const boundTextElement = getBoundTextElement(
@@ -78,7 +79,7 @@ const resizeElementInGroup = (
   if (boundTextElement) {
     const newFontSize = boundTextElement.fontSize * scale;
     updateBoundElements(latestElement, elementsMap, {
-      newSize: { width: updates.width, height: updates.height },
+      oldSize: { width: oldWidth, height: oldHeight },
     });
     const latestBoundTextElement = elementsMap.get(boundTextElement.id);
     if (latestBoundTextElement && isTextElement(latestBoundTextElement)) {

packages/excalidraw/components/Stats/utils.ts

@@ -151,6 +151,8 @@ export const resizeElement = (
     nextHeight = Math.max(nextHeight, minHeight);
   }
 
+  const { width: oldWidth, height: oldHeight } = latestElement;
+
   mutateElement(
     latestElement,
     {
@@ -199,7 +201,7 @@ export const resizeElement = (
   }
 
   updateBoundElements(latestElement, elementsMap, {
-    newSize: { width: nextWidth, height: nextHeight },
+    oldSize: { width: oldWidth, height: oldHeight },
   });
 
   if (boundTextElement && boundTextFont) {

packages/excalidraw/components/TTDDialog/common.ts

@@ -91,16 +91,12 @@ export const convertMermaidToExcalidraw = async ({
     };
 
     const canvas = await exportToCanvas({
-      data: {
-        elements: data.current.elements,
-        files: data.current.files,
-      },
-      config: {
-        padding: DEFAULT_EXPORT_PADDING,
-        maxWidthOrHeight:
-          Math.max(parent.offsetWidth, parent.offsetHeight) *
-          window.devicePixelRatio,
-      },
+      elements: data.current.elements,
+      files: data.current.files,
+      exportPadding: DEFAULT_EXPORT_PADDING,
+      maxWidthOrHeight:
+        Math.max(parent.offsetWidth, parent.offsetHeight) *
+        window.devicePixelRatio,
     });
     // if converting to blob fails, there's some problem that will
     // likely prevent preview and export (e.g. canvas too big)

packages/excalidraw/components/canvases/StaticCanvas.tsx

@@ -97,6 +97,7 @@ const getRelevantAppStateProps = (
   theme: appState.theme,
   pendingImageElementId: appState.pendingImageElementId,
   shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,
+  viewBackgroundColor: appState.viewBackgroundColor,
   exportScale: appState.exportScale,
   selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,
   gridSize: appState.gridSize,

packages/excalidraw/constants.ts

@@ -1,7 +1,7 @@
 import cssVariables from "./css/variables.module.scss";
 import type { AppProps, AppState } from "./types";
 import type { ExcalidrawElement, FontFamilyValues } from "./element/types";
-import type { NormalizedZoomValue } from "./types";
+import { COLOR_PALETTE } from "./colors";
 
 export const isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 export const isWindows = /^Win/.test(navigator.platform);
@@ -108,6 +108,7 @@ export const YOUTUBE_STATES = {
 
 export const ENV = {
   TEST: "test",
+  DEVELOPMENT: "development",
 };
 
 export const CLASSES = {
@@ -183,14 +184,6 @@ export const DEFAULT_TEXT_ALIGN = "left";
 export const DEFAULT_VERTICAL_ALIGN = "top";
 export const DEFAULT_VERSION = "{version}";
 export const DEFAULT_TRANSFORM_HANDLE_SPACING = 2;
-export const DEFAULT_ZOOM_VALUE = 1 as NormalizedZoomValue;
-
-// -----------------------------------------------
-// !!! these colors are tied to color picker !!!
-export const COLOR_WHITE = "#ffffff";
-export const COLOR_CHARCOAL_BLACK = "#1e1e1e";
-export const COLOR_TRANSPARENT = "transparent";
-// -----------------------------------------------
 
 export const SIDE_RESIZING_THRESHOLD = 2 * DEFAULT_TRANSFORM_HANDLE_SPACING;
 // a small epsilon to make side resizing always take precedence
@@ -199,6 +192,8 @@ const EPSILON = 0.00001;
 export const DEFAULT_COLLISION_THRESHOLD =
   2 * SIDE_RESIZING_THRESHOLD - EPSILON;
 
+export const COLOR_WHITE = "#ffffff";
+export const COLOR_CHARCOAL_BLACK = "#1e1e1e";
 // keep this in sync with CSS
 export const COLOR_VOICE_CALL = "#a2f1a6";
 
@@ -309,7 +304,6 @@ export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 
 export const EXPORT_SCALES = [1, 2, 3];
 export const DEFAULT_EXPORT_PADDING = 10; // px
-export const DEFAULT_SMALLEST_EXPORT_SIZE = 20; // px
 
 export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
 
@@ -390,8 +384,8 @@ export const DEFAULT_ELEMENT_PROPS: {
   opacity: ExcalidrawElement["opacity"];
   locked: ExcalidrawElement["locked"];
 } = {
-  strokeColor: COLOR_CHARCOAL_BLACK,
-  backgroundColor: COLOR_TRANSPARENT,
+  strokeColor: COLOR_PALETTE.black,
+  backgroundColor: COLOR_PALETTE.transparent,
   fillStyle: "solid",
   strokeWidth: 2,
   strokeStyle: "solid",

packages/excalidraw/data/index.ts

@@ -81,53 +81,46 @@ export const prepareElementsForExport = (
   };
 };
 
-export const exportAsImage = async ({
-  type,
-  data,
-  config,
-}: {
-  type: Omit<ExportType, "backend">;
-  data: {
-    elements: ExportedElements;
-    appState: AppState;
-    files: BinaryFiles;
-  };
-  config: {
+export const exportCanvas = async (
+  type: Omit<ExportType, "backend">,
+  elements: ExportedElements,
+  appState: AppState,
+  files: BinaryFiles,
+  {
+    exportBackground,
+    exportPadding = DEFAULT_EXPORT_PADDING,
+    viewBackgroundColor,
+    name = appState.name || DEFAULT_FILENAME,
+    fileHandle = null,
+    exportingFrame = null,
+  }: {
     exportBackground: boolean;
-    padding?: number;
+    exportPadding?: number;
     viewBackgroundColor: string;
     /** filename, if applicable */
     name?: string;
     fileHandle?: FileSystemHandle | null;
     exportingFrame: ExcalidrawFrameLikeElement | null;
-  };
-}) => {
-  // clone
-  const cfg = Object.assign({}, config);
-
-  cfg.padding = cfg.padding ?? DEFAULT_EXPORT_PADDING;
-  cfg.fileHandle = cfg.fileHandle ?? null;
-  cfg.exportingFrame = cfg.exportingFrame ?? null;
-  cfg.name = cfg.name || DEFAULT_FILENAME;
-
-  if (data.elements.length === 0) {
+  },
+) => {
+  if (elements.length === 0) {
     throw new Error(t("alerts.cannotExportEmptyCanvas"));
   }
   if (type === "svg" || type === "clipboard-svg") {
-    const svgPromise = exportToSvg({
-      data: {
-        elements: data.elements,
-        appState: {
-          exportBackground: cfg.exportBackground,
-          exportWithDarkMode: data.appState.exportWithDarkMode,
-          viewBackgroundColor: data.appState.viewBackgroundColor,
-          exportScale: data.appState.exportScale,
-          exportEmbedScene: data.appState.exportEmbedScene && type === "svg",
-        },
-        files: data.files,
+    const svgPromise = exportToSvg(
+      elements,
+      {
+        exportBackground,
+        exportWithDarkMode: appState.exportWithDarkMode,
+        viewBackgroundColor,
+        exportPadding,
+        exportScale: appState.exportScale,
+        exportEmbedScene: appState.exportEmbedScene && type === "svg",
       },
-      config: { exportingFrame: cfg.exportingFrame, padding: cfg.padding },
-    });
+      files,
+      { exportingFrame },
+    );
+
     if (type === "svg") {
       return fileSave(
         svgPromise.then((svg) => {
@@ -135,9 +128,9 @@ export const exportAsImage = async ({
         }),
         {
           description: "Export to SVG",
-          name: cfg.name,
-          extension: data.appState.exportEmbedScene ? "excalidraw.svg" : "svg",
-          fileHandle: cfg.fileHandle,
+          name,
+          extension: appState.exportEmbedScene ? "excalidraw.svg" : "svg",
+          fileHandle,
         },
       );
     } else if (type === "clipboard-svg") {
@@ -151,33 +144,22 @@ export const exportAsImage = async ({
     }
   }
 
-  const tempCanvas = exportToCanvas({
-    data,
-    config: {
-      canvasBackgroundColor: !cfg.exportBackground
-        ? false
-        : cfg.viewBackgroundColor,
-      padding: cfg.padding,
-      theme: data.appState.exportWithDarkMode ? "dark" : "light",
-      scale: data.appState.exportScale,
-      fit: "none",
-      exportingFrame: cfg.exportingFrame,
-    },
+  const tempCanvas = exportToCanvas(elements, appState, files, {
+    exportBackground,
+    viewBackgroundColor,
+    exportPadding,
+    exportingFrame,
   });
 
   if (type === "png") {
-    const blob = canvasToBlob(tempCanvas);
-    if (data.appState.exportEmbedScene) {
-      blob.then((blob) =>
+    let blob = canvasToBlob(tempCanvas);
+
+    if (appState.exportEmbedScene) {
+      blob = blob.then((blob) =>
         import("./image").then(({ encodePngMetadata }) =>
           encodePngMetadata({
             blob,
-            metadata: serializeAsJSON(
-              data.elements,
-              data.appState,
-              data.files,
-              "local",
-            ),
+            metadata: serializeAsJSON(elements, appState, files, "local"),
           }),
         ),
       );
@@ -185,11 +167,11 @@ export const exportAsImage = async ({
 
     return fileSave(blob, {
       description: "Export to PNG",
-      name: cfg.name,
+      name,
       // FIXME reintroduce `excalidraw.png` when most people upgrade away
       // from 111.0.5563.64 (arm64), see #6349
       extension: /* appState.exportEmbedScene ? "excalidraw.png" : */ "png",
-      fileHandle: cfg.fileHandle,
+      fileHandle,
     });
   } else if (type === "clipboard") {
     try {

packages/excalidraw/data/resave.ts

@@ -1,7 +1,6 @@
 import type { ExcalidrawElement } from "../element/types";
 import type { AppState, BinaryFiles } from "../types";
-import { prepareElementsForExport } from ".";
-import { exportAsImage } from ".";
+import { exportCanvas, prepareElementsForExport } from ".";
 import { getFileHandleType, isImageFileHandleType } from "./blob";
 
 export const resaveAsImageWithScene = async (
@@ -30,16 +29,12 @@ export const resaveAsImageWithScene = async (
     false,
   );
 
-  await exportAsImage({
-    type: fileHandleType,
-    data: { elements: exportedElements, appState, files },
-    config: {
-      exportBackground,
-      viewBackgroundColor,
-      name,
-      fileHandle,
-      exportingFrame,
-    },
+  await exportCanvas(fileHandleType, exportedElements, appState, files, {
+    exportBackground,
+    viewBackgroundColor,
+    name,
+    fileHandle,
+    exportingFrame,
   });
 
   return { fileHandle };

packages/excalidraw/element/binding.ts

@@ -576,11 +576,11 @@ export const updateBoundElements = (
   elementsMap: NonDeletedSceneElementsMap | SceneElementsMap,
   options?: {
     simultaneouslyUpdated?: readonly ExcalidrawElement[];
-    newSize?: { width: number; height: number };
+    oldSize?: { width: number; height: number };
     changedElements?: Map<string, OrderedExcalidrawElement>;
   },
 ) => {
-  const { newSize, simultaneouslyUpdated, changedElements } = options ?? {};
+  const { oldSize, simultaneouslyUpdated, changedElements } = options ?? {};
   const simultaneouslyUpdatedElementIds = getSimultaneouslyUpdatedElementIds(
     simultaneouslyUpdated,
   );
@@ -603,12 +603,12 @@ export const updateBoundElements = (
       startBinding: maybeCalculateNewGapWhenScaling(
         changedElement,
         element.startBinding,
-        newSize,
+        oldSize,
       ),
       endBinding: maybeCalculateNewGapWhenScaling(
         changedElement,
         element.endBinding,
-        newSize,
+        oldSize,
       ),
     };
 

packages/excalidraw/element/resizeElements.ts

@@ -739,9 +739,9 @@ export const resizeSingleElement = (
     mutateElement(element, resizedElement);
 
     updateBoundElements(element, elementsMap, {
-      newSize: {
-        width: resizedElement.width,
-        height: resizedElement.height,
+      oldSize: {
+        width: stateAtResizeStart.width,
+        height: stateAtResizeStart.height,
       },
     });
 
@@ -999,13 +999,14 @@ export const resizeMultipleElements = (
     element,
     update: { boundTextFontSize, ...update },
   } of elementsAndUpdates) {
-    const { angle, width: newWidth, height: newHeight } = update;
+    const { angle } = update;
+    const { width: oldWidth, height: oldHeight } = element;
 
     mutateElement(element, update, false);
 
     updateBoundElements(element, elementsMap, {
       simultaneouslyUpdated: elementsToUpdate,
-      newSize: { width: newWidth, height: newHeight },
+      oldSize: { width: oldWidth, height: oldHeight },
     });
 
     const boundTextElement = getBoundTextElement(element, elementsMap);

packages/excalidraw/hooks/useLibraryItemSvg.ts

@@ -2,8 +2,8 @@ import { atom, useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { COLOR_PALETTE } from "../colors";
 import { jotaiScope } from "../jotai";
+import { exportToSvg } from "../../utils/export";
 import type { LibraryItem } from "../types";
-import { exportToSvg } from "../scene/export";
 
 export type SvgCache = Map<LibraryItem["id"], SVGSVGElement>;
 
@@ -11,14 +11,14 @@ export const libraryItemSvgsCache = atom<SvgCache>(new Map());
 
 const exportLibraryItemToSvg = async (elements: LibraryItem["elements"]) => {
   return await exportToSvg({
-    data: {
-      elements,
-      appState: {
-        exportBackground: false,
-        viewBackgroundColor: COLOR_PALETTE.white,
-      },
-      files: null,
+    elements,
+    appState: {
+      exportBackground: false,
+      viewBackgroundColor: COLOR_PALETTE.white,
     },
+    files: null,
+    renderEmbeddables: false,
+    skipInliningFonts: true,
   });
 };
 

packages/excalidraw/index-node.ts

@@ -1,6 +1,5 @@
 import { exportToCanvas } from "./scene/export";
 import { getDefaultAppState } from "./appState";
-import { COLOR_WHITE } from "./constants";
 
 const { registerFont, createCanvas } = require("canvas");
 
@@ -58,21 +57,22 @@ const elements = [
 registerFont("./public/Virgil.woff2", { family: "Virgil" });
 registerFont("./public/Cascadia.woff2", { family: "Cascadia" });
 
-const canvas = exportToCanvas({
-  data: {
-    elements: elements as any,
-    appState: {
-      ...getDefaultAppState(),
-      width: 0,
-      height: 0,
-    },
-    files: {}, // files
+const canvas = exportToCanvas(
+  elements as any,
+  {
+    ...getDefaultAppState(),
+    offsetTop: 0,
+    offsetLeft: 0,
+    width: 0,
+    height: 0,
   },
-  config: {
-    canvasBackgroundColor: COLOR_WHITE,
-    createCanvas,
+  {}, // files
+  {
+    exportBackground: true,
+    viewBackgroundColor: "#ffffff",
   },
-});
+  createCanvas,
+);
 
 const fs = require("fs");
 const out = fs.createWriteStream("test.png");

packages/excalidraw/index.tsx

@@ -225,6 +225,13 @@ export {
 
 export { reconcileElements } from "./data/reconcile";
 
+export {
+  exportToCanvas,
+  exportToBlob,
+  exportToSvg,
+  exportToClipboard,
+} from "../utils/export";
+
 export { serializeAsJSON, serializeLibraryAsJSON } from "./data/json";
 export {
   loadFromBlob,
@@ -267,13 +274,6 @@ export { WelcomeScreen };
 export { LiveCollaborationTrigger };
 export { Stats } from "./components/Stats";
 
-export {
-  exportToCanvas,
-  exportToBlob,
-  exportToClipboard,
-  exportToSvg,
-} from "./scene/export";
-
 export { DefaultSidebar } from "./components/DefaultSidebar";
 export { TTDDialog } from "./components/TTDDialog/TTDDialog";
 export { TTDDialogTrigger } from "./components/TTDDialog/TTDDialogTrigger";

packages/excalidraw/package.json

@@ -58,10 +58,11 @@
   "dependencies": {
     "@braintree/sanitize-url": "6.0.2",
     "@excalidraw/laser-pointer": "1.3.1",
-    "@excalidraw/mermaid-to-excalidraw": "1.1.2",
+    "@excalidraw/mermaid-to-excalidraw": "1.1.0",
     "@excalidraw/random-username": "1.1.0",
     "@radix-ui/react-popover": "1.0.3",
     "@radix-ui/react-tabs": "1.0.2",
+    "@tldraw/vec": "1.7.1",
     "browser-fs-access": "0.29.1",
     "canvas-roundrect-polyfill": "0.0.1",
     "clsx": "1.1.1",

packages/excalidraw/renderer/helpers.ts

@@ -1,4 +1,4 @@
-import type { AppState } from "../types";
+import type { StaticCanvasAppState, AppState } from "../types";
 
 import type { StaticCanvasRenderConfig } from "../scene/types";
 
@@ -34,16 +34,15 @@ export const bootstrapCanvas = ({
   normalizedHeight,
   theme,
   isExporting,
-  canvasBackgroundColor,
+  viewBackgroundColor,
 }: {
   canvas: HTMLCanvasElement;
   scale: number;
   normalizedWidth: number;
   normalizedHeight: number;
   theme?: AppState["theme"];
-  // static canvas only
   isExporting?: StaticCanvasRenderConfig["isExporting"];
-  canvasBackgroundColor?: string | null;
+  viewBackgroundColor?: StaticCanvasAppState["viewBackgroundColor"];
 }): CanvasRenderingContext2D => {
   const context = canvas.getContext("2d")!;
 
@@ -55,17 +54,17 @@ export const bootstrapCanvas = ({
   }
 
   // Paint background
-  if (typeof canvasBackgroundColor === "string") {
+  if (typeof viewBackgroundColor === "string") {
     const hasTransparence =
-      canvasBackgroundColor === "transparent" ||
-      canvasBackgroundColor.length === 5 || // #RGBA
-      canvasBackgroundColor.length === 9 || // #RRGGBBA
-      /(hsla|rgba)\(/.test(canvasBackgroundColor);
+      viewBackgroundColor === "transparent" ||
+      viewBackgroundColor.length === 5 || // #RGBA
+      viewBackgroundColor.length === 9 || // #RRGGBBA
+      /(hsla|rgba)\(/.test(viewBackgroundColor);
     if (hasTransparence) {
       context.clearRect(0, 0, normalizedWidth, normalizedHeight);
     }
     context.save();
-    context.fillStyle = canvasBackgroundColor;
+    context.fillStyle = viewBackgroundColor;
     context.fillRect(0, 0, normalizedWidth, normalizedHeight);
     context.restore();
   } else {

packages/excalidraw/renderer/staticScene.ts

@@ -216,7 +216,7 @@ const _renderStaticScene = ({
     normalizedHeight,
     theme: appState.theme,
     isExporting,
-    canvasBackgroundColor: renderConfig.canvasBackgroundColor,
+    viewBackgroundColor: appState.viewBackgroundColor,
   });
 
   // Apply zoom

packages/excalidraw/scene/Shape.ts

@@ -164,10 +164,8 @@ const getArrowheadShapes = (
   arrowhead: Arrowhead,
   generator: RoughGenerator,
   options: Options,
-  canvasBackgroundColor: string | null,
+  canvasBackgroundColor: string,
 ) => {
-  canvasBackgroundColor = canvasBackgroundColor || "transparent";
-
   const arrowheadPoints = getArrowheadPoints(
     element,
     shape,
@@ -295,7 +293,7 @@ export const _generateElementShape = (
     embedsValidationStatus,
   }: {
     isExporting: boolean;
-    canvasBackgroundColor: string | null;
+    canvasBackgroundColor: string;
     embedsValidationStatus: EmbedsValidationStatus | null;
   },
 ): Drawable | Drawable[] | null => {

packages/excalidraw/scene/ShapeCache.ts

@@ -8,8 +8,7 @@ import { elementWithCanvasCache } from "../renderer/renderElement";
 import { _generateElementShape } from "./Shape";
 import type { ElementShape, ElementShapes } from "./types";
 import { COLOR_PALETTE } from "../colors";
-import type { EmbedsValidationStatus } from "../types";
-import type { StaticCanvasRenderConfig } from "./types";
+import type { AppState, EmbedsValidationStatus } from "../types";
 
 export class ShapeCache {
   private static rg = new RoughGenerator();
@@ -51,7 +50,7 @@ export class ShapeCache {
     element: T,
     renderConfig: {
       isExporting: boolean;
-      canvasBackgroundColor: StaticCanvasRenderConfig["canvasBackgroundColor"];
+      canvasBackgroundColor: AppState["viewBackgroundColor"];
       embedsValidationStatus: EmbedsValidationStatus;
     } | null,
   ) => {

packages/excalidraw/scene/export.ts

@@ -5,7 +5,6 @@ import type {
   ExcalidrawTextElement,
   NonDeletedExcalidrawElement,
   NonDeletedSceneElementsMap,
-  Theme,
 } from "../element/types";
 import type { Bounds } from "../element/bounds";
 import { getCommonBounds, getElementAbsoluteCoords } from "../element/bounds";
@@ -13,15 +12,12 @@ import { renderSceneToSvg } from "../renderer/staticSvgScene";
 import { arrayToMap, distance, getFontString, toBrandedType } from "../utils";
 import type { AppState, BinaryFiles } from "../types";
 import {
-  COLOR_WHITE,
-  DEFAULT_ZOOM_VALUE,
+  DEFAULT_EXPORT_PADDING,
   FRAME_STYLE,
   FONT_FAMILY,
   SVG_NS,
   THEME,
   THEME_FILTER,
-  MIME_TYPES,
-  DEFAULT_SMALLEST_EXPORT_SIZE,
 } from "../constants";
 import { getDefaultAppState } from "../appState";
 import { serializeAsJSON } from "../data/json";
@@ -29,7 +25,6 @@ import {
   getInitializedImageElements,
   updateImageCache,
 } from "../element/image";
-import { restoreAppState } from "../data/restore";
 import {
   getElementsOverlappingFrame,
   getFrameLikeElements,
@@ -44,12 +39,6 @@ import type { RenderableElementsMap } from "./types";
 import { syncInvalidIndices } from "../fractionalIndex";
 import { renderStaticScene } from "../renderer/staticScene";
 import { Fonts } from "../fonts";
-import { encodePngMetadata } from "../data/image";
-import {
-  copyBlobToClipboardAsPng,
-  copyTextToSystemClipboard,
-  copyToClipboard,
-} from "../clipboard";
 
 const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 
@@ -160,199 +149,36 @@ const prepareElementsForRender = ({
   return nextElements;
 };
 
-type ExportToCanvasAppState = Partial<
-  Omit<AppState, "offsetTop" | "offsetLeft">
->;
-
-export type ExportSceneData = {
-  elements: readonly NonDeletedExcalidrawElement[];
-  appState?: ExportToCanvasAppState;
-  files: BinaryFiles | null;
-};
-
-export type ExportSceneConfig = {
-  theme?: Theme;
-  /**
-   * Canvas background. Valid values are:
-   *
-   * - `undefined` - the background of "appState.viewBackgroundColor" is used.
-   * - `false` - no background is used (set to "transparent").
-   * - `string` - should be a valid CSS color.
-   *
-   * @default undefined
-   */
-  canvasBackgroundColor?: string | false;
-  /**
-   * Canvas padding in pixels. Affected by `scale`.
-   *
-   * When `fit` is set to `none`, padding is added to the content bounding box
-   * (including if you set `width` or `height` or `maxWidthOrHeight` or
-   * `widthOrHeight`).
-   *
-   * When `fit` set to `contain`, padding is subtracted from the content
-   * bounding box (ensuring the size doesn't exceed the supplied values, with
-   * the exeception of using alongside `scale` as noted above), and the padding
-   * serves as a minimum distance between the content and the canvas edges, as
-   * it may exceed the supplied padding value from one side or the other in
-   * order to maintain the aspect ratio. It is recommended to set `position`
-   * to `center` when using `fit=contain`.
-   *
-   * When `fit` is set to `none` and either `width` or `height` or
-   * `maxWidthOrHeight` is set, padding is simply adding to the bounding box
-   * and the content may overflow the canvas, thus right or bottom padding
-   * may be ignored.
-   *
-   * @default 0
-   */
-  padding?: number;
-  // -------------------------------------------------------------------------
-  /**
-   * Makes sure the canvas content fits into a frame of width/height no larger
-   * than this value, while maintaining the aspect ratio.
-   *
-   * Final dimensions can get smaller/larger if used in conjunction with
-   * `scale`.
-   */
-  maxWidthOrHeight?: number;
-  /**
-   * Scale the canvas content to be excatly this many pixels wide/tall,
-   * maintaining the aspect ratio.
-   *
-   * Cannot be used in conjunction with `maxWidthOrHeight`.
-   *
-   * Final dimensions can get smaller/larger if used in conjunction with
-   * `scale`.
-   */
-  widthOrHeight?: number;
-  // -------------------------------------------------------------------------
-  /**
-   * Width of the frame. Supply `x` or `y` if you want to ofsset the canvas
-   * content.
-   *
-   * If `width` omitted but `height` supplied, `width` is calculated from the
-   * the content's bounding box to preserve the aspect ratio.
-   *
-   * Defaults to the content bounding box width when both `width` and `height`
-   * are omitted.
-   */
-  width?: number;
-  /**
-   * Height of the frame.
-   *
-   * If `height` omitted but `width` supplied, `height` is calculated from the
-   * content's bounding box to preserve the aspect ratio.
-   *
-   * Defaults to the content bounding box height when both `width` and `height`
-   * are omitted.
-   */
-  height?: number;
-  /**
-   * Left canvas offset. By default the coordinate is relative to the canvas.
-   * You can switch to content coordinates by setting `origin` to `content`.
-   *
-   * Defaults to the `x` postion of the content bounding box.
-   */
-  x?: number;
-  /**
-   * Top canvas offset. By default the coordinate is relative to the canvas.
-   * You can switch to content coordinates by setting `origin` to `content`.
-   *
-   * Defaults to the `y` postion of the content bounding box.
-   */
-  y?: number;
-  /**
-   * Indicates the coordinate system of the `x` and `y` values.
-   *
-   * - `canvas` - `x` and `y` are relative to the canvas [0, 0] position.
-   * - `content` - `x` and `y` are relative to the content bounding box.
-   *
-   * @default "canvas"
-   */
-  origin?: "canvas" | "content";
-  /**
-   * If dimensions specified and `x` and `y` are not specified, this indicates
-   * how the canvas should be scaled.
-   *
-   * Behavior aligns with the `object-fit` CSS property.
-   *
-   * - `none`    - no scaling.
-   * - `contain` - scale to fit the frame. Includes `padding`.
-   *
-   * If `maxWidthOrHeight` or `widthOrHeight` is set, `fit` is ignored.
-   *
-   * @default "contain" unless `width`, `height`, `maxWidthOrHeight`, or
-   * `widthOrHeight` is specified in which case `none` is the default (can be
-   * changed). If `x` or `y` are specified, `none` is forced.
-   */
-  fit?: "none" | "contain";
-  /**
-   * When either `x` or `y` are not specified, indicates how the canvas should
-   * be aligned on the respective axis.
-   *
-   * - `none`   - canvas aligned to top left.
-   * - `center` - canvas is centered on the axis which is not specified
-   *              (or both).
-   *
-   * If `maxWidthOrHeight` or `widthOrHeight` is set, `position` is ignored.
-   *
-   * @default "center"
-   */
-  position?: "center" | "topLeft";
-  // -------------------------------------------------------------------------
-  /**
-   * A multiplier to increase/decrease the frame dimensions
-   * (content resolution).
-   *
-   * For example, if your canvas is 300x150 and you set scale to 2, the
-   * resulting size will be 600x300.
-   *
-   * @default 1
-   */
-  scale?: number;
-  /**
-   * If you need to suply your own canvas, e.g. in test environments or in
-   * Node.js.
-   *
-   * Do not set `canvas.width/height` or modify the canvas context as that's
-   * handled by Excalidraw.
-   *
-   * Defaults to `document.createElement("canvas")`.
-   */
-  createCanvas?: () => HTMLCanvasElement;
-  /**
-   * If you want to supply `width`/`height` dynamically (or derive from the
-   * content bounding box), you can use this function.
-   *
-   * Ignored if `maxWidthOrHeight`, `width`, or `height` is set.
-   */
-  getDimensions?: (
+export const exportToCanvas = async (
+  elements: readonly NonDeletedExcalidrawElement[],
+  appState: AppState,
+  files: BinaryFiles,
+  {
+    exportBackground,
+    exportPadding = DEFAULT_EXPORT_PADDING,
+    viewBackgroundColor,
+    exportingFrame,
+  }: {
+    exportBackground: boolean;
+    exportPadding?: number;
+    viewBackgroundColor: string;
+    exportingFrame?: ExcalidrawFrameLikeElement | null;
+  },
+  createCanvas: (
     width: number,
     height: number,
-  ) => { width: number; height: number; scale?: number };
-
-  exportingFrame?: ExcalidrawFrameLikeElement | null;
-
-  loadFonts?: () => Promise<void>;
-};
-
-const configExportDimension = async ({
-  data,
-  config,
-}: {
-  data: ExportSceneData;
-  config?: ExportSceneConfig;
-}) => {
-  // clone
-  const cfg = Object.assign({}, config);
-
-  const { exportingFrame } = cfg;
-
-  const elements = data.elements;
-
-  // initialize defaults
-  // ---------------------------------------------------------------------------
-
-  const appState = restoreAppState(data.appState, null);
+  ) => { canvas: HTMLCanvasElement; scale: number } = (width, height) => {
+    const canvas = document.createElement("canvas");
+    canvas.width = width * appState.exportScale;
+    canvas.height = height * appState.exportScale;
+    return { canvas, scale: appState.exportScale };
+  },
+  loadFonts: () => Promise<void> = async () => {
+    await Fonts.loadElementsFonts(elements);
+  },
+) => {
+  // load font faces before continuing, by default leverages browsers' [FontFace API](https://developer.mozilla.org/en-US/docs/Web/API/FontFace)
+  await loadFonts();
 
   const frameRendering = getFrameRenderingConfig(
     exportingFrame ?? null,
@@ -372,240 +198,24 @@ const configExportDimension = async ({
   });
 
   if (exportingFrame) {
-    cfg.padding = 0;
+    exportPadding = 0;
   }
 
-  cfg.fit =
-    cfg.fit ??
-    (cfg.width != null ||
-    cfg.height != null ||
-    cfg.maxWidthOrHeight != null ||
-    cfg.widthOrHeight != null
-      ? "contain"
-      : "none");
-
-  cfg.padding = cfg.padding ?? 0;
-  cfg.scale = cfg.scale ?? 1;
-
-  cfg.origin = cfg.origin ?? "canvas";
-  cfg.position = cfg.position ?? "center";
-
-  if (cfg.maxWidthOrHeight != null && cfg.widthOrHeight != null) {
-    if (!import.meta.env.PROD) {
-      console.warn("`maxWidthOrHeight` is ignored when `widthOrHeight` is set");
-    }
-    cfg.maxWidthOrHeight = undefined;
-  }
-
-  if (
-    (cfg.maxWidthOrHeight != null || cfg.width != null || cfg.height != null) &&
-    cfg.getDimensions
-  ) {
-    if (!import.meta.env.PROD) {
-      console.warn(
-        "`getDimensions` is ignored when `width`, `height`, or `maxWidthOrHeight` is set",
-      );
-    }
-    cfg.getDimensions = undefined;
-  }
-  // ---------------------------------------------------------------------------
-
-  // load font faces before continuing, by default leverages browsers' [FontFace API](https://developer.mozilla.org/en-US/docs/Web/API/FontFace)
-  if (cfg.loadFonts) {
-    await cfg.loadFonts();
-  } else {
-    await Fonts.loadElementsFonts(elements);
-  }
-
-  // value used to scale the canvas context. By default, we use this to
-  // make the canvas fit into the frame (e.g. for `cfg.fit` set to `contain`).
-  // If `cfg.scale` is set, we multiply the resulting canvasScale by it to
-  // scale the output further.
-  let exportScale = 1;
-
-  const origCanvasSize = getCanvasSize(
+  const [minX, minY, width, height] = getCanvasSize(
     exportingFrame ? [exportingFrame] : getRootElements(elementsForRender),
+    exportPadding,
   );
 
-  // cfg.x = undefined;
-  // cfg.y = undefined;
+  const { canvas, scale = 1 } = createCanvas(width, height);
 
-  // variables for original content bounding box
-  const [origX, origY, origWidth, origHeight] = origCanvasSize;
-  // variables for target bounding box
-  let [x, y, width, height] = origCanvasSize;
-
-  x = cfg.x ?? x;
-  y = cfg.y ?? y;
-  width = cfg.width ?? width;
-  height = cfg.height ?? height;
-
-  if (cfg.fit === "contain" || cfg.widthOrHeight || cfg.maxWidthOrHeight) {
-    cfg.padding =
-      cfg.padding && cfg.padding > 0
-        ? Math.min(
-            cfg.padding,
-            (width - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-            (height - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-          )
-        : 0;
-
-    if (cfg.getDimensions != null) {
-      const ret = cfg.getDimensions(width, height);
-
-      width = ret.width;
-      height = ret.height;
-
-      cfg.padding = Math.min(
-        cfg.padding,
-        (width - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-        (height - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-      );
-    } else if (cfg.widthOrHeight != null) {
-      cfg.padding = Math.min(
-        cfg.padding,
-        (cfg.widthOrHeight - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-      );
-    } else if (cfg.maxWidthOrHeight != null) {
-      cfg.padding = Math.min(
-        cfg.padding,
-        (cfg.maxWidthOrHeight - DEFAULT_SMALLEST_EXPORT_SIZE) / 2,
-      );
-    }
-  }
-
-  if (cfg.maxWidthOrHeight != null || cfg.widthOrHeight != null) {
-    if (cfg.padding) {
-      if (cfg.maxWidthOrHeight != null) {
-        cfg.maxWidthOrHeight -= cfg.padding * 2;
-      } else if (cfg.widthOrHeight != null) {
-        cfg.widthOrHeight -= cfg.padding * 2;
-      }
-    }
-
-    const max = Math.max(width, height);
-    if (cfg.widthOrHeight != null) {
-      // calculate by how much do we need to scale the canvas to fit into the
-      // target dimension (e.g. target: max 50px, actual: 70x100px => scale: 0.5)
-      exportScale = cfg.widthOrHeight / max;
-    } else if (cfg.maxWidthOrHeight != null) {
-      exportScale = cfg.maxWidthOrHeight < max ? cfg.maxWidthOrHeight / max : 1;
-    }
-
-    width *= exportScale;
-    height *= exportScale;
-  } else if (cfg.getDimensions) {
-    const ret = cfg.getDimensions(width, height);
-
-    width = ret.width;
-    height = ret.height;
-    cfg.scale = ret.scale ?? cfg.scale;
-  } else if (cfg.fit === "contain") {
-    width -= cfg.padding * 2;
-    height -= cfg.padding * 2;
-
-    const wRatio = width / origWidth;
-    const hRatio = height / origHeight;
-    // scale the orig canvas to fit in the target region
-    exportScale = Math.min(wRatio, hRatio);
-  }
-
-  x = cfg.x ?? origX;
-  y = cfg.y ?? origY;
-
-  // if we switch to "content" coords, we need to offset cfg-supplied
-  // coords by the x/y of content bounding box
-  if (cfg.origin === "content") {
-    if (cfg.x != null) {
-      x += origX;
-    }
-    if (cfg.y != null) {
-      y += origY;
-    }
-  }
-
-  // Centering the content to the frame.
-  // We divide width/height by canvasScale so that we calculate in the original
-  // aspect ratio dimensions.
-  if (cfg.position === "center") {
-    x -=
-      width / exportScale / 2 -
-      (cfg.x == null ? origWidth : width + cfg.padding * 2) / 2;
-    y -=
-      height / exportScale / 2 -
-      (cfg.y == null ? origHeight : height + cfg.padding * 2) / 2;
-  }
-
-  // rescale padding based on current canvasScale factor so that the resulting
-  // padding is kept the same as supplied by user (with the exception of
-  // `cfg.scale` being set, which also scales the padding)
-  const normalizedPadding = cfg.padding / exportScale;
-
-  // scale the whole frame by cfg.scale (on top of whatever canvasScale we
-  // calculated above)
-  exportScale *= cfg.scale;
-
-  width *= cfg.scale;
-  height *= cfg.scale;
-
-  const exportWidth = width + cfg.padding * 2 * cfg.scale;
-  const exportHeight = height + cfg.padding * 2 * cfg.scale;
-
-  return {
-    config: cfg,
-    normalizedPadding,
-    contentWidth: width,
-    contentHeight: height,
-    exportWidth,
-    exportHeight,
-    exportScale,
-    x,
-    y,
-    elementsForRender,
-    appState,
-    frameRendering,
-  };
-};
-
-/**
- * This API is usually used as a precursor to searializing to Blob or PNG,
- * but can also be used to create a canvas for other purposes.
- */
-export const exportToCanvas = async ({
-  data,
-  config,
-}: {
-  data: ExportSceneData;
-  config?: ExportSceneConfig;
-}) => {
-  const {
-    config: cfg,
-    normalizedPadding,
-    contentWidth: width,
-    contentHeight: height,
-    exportWidth,
-    exportHeight,
-    exportScale,
-    x,
-    y,
-    elementsForRender,
-    appState,
-    frameRendering,
-  } = await configExportDimension({ data, config });
-
-  const canvas = cfg.createCanvas
-    ? cfg.createCanvas()
-    : document.createElement("canvas");
-
-  canvas.width = exportWidth;
-  canvas.height = exportHeight;
+  const defaultAppState = getDefaultAppState();
 
   const { imageCache } = await updateImageCache({
     imageCache: new Map(),
     fileIds: getInitializedImageElements(elementsForRender).map(
       (element) => element.fileId,
     ),
-    files: data.files || {},
+    files,
   });
 
   renderStaticScene({
@@ -615,32 +225,22 @@ export const exportToCanvas = async ({
       arrayToMap(elementsForRender),
     ),
     allElementsMap: toBrandedType<NonDeletedSceneElementsMap>(
-      arrayToMap(syncInvalidIndices(data.elements)),
+      arrayToMap(syncInvalidIndices(elements)),
     ),
     visibleElements: elementsForRender,
+    scale,
     appState: {
       ...appState,
       frameRendering,
-      width,
-      height,
-      offsetLeft: 0,
-      offsetTop: 0,
-      scrollX: -x + normalizedPadding,
-      scrollY: -y + normalizedPadding,
-      zoom: { value: DEFAULT_ZOOM_VALUE },
-
+      viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
+      scrollX: -minX + exportPadding,
+      scrollY: -minY + exportPadding,
+      zoom: defaultAppState.zoom,
       shouldCacheIgnoreZoom: false,
-      theme: cfg.theme || THEME.LIGHT,
+      theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT,
     },
-    scale: exportScale,
     renderConfig: {
-      canvasBackgroundColor:
-        cfg.canvasBackgroundColor === false
-          ? // null indicates transparent background
-            null
-          : cfg.canvasBackgroundColor ||
-            appState.viewBackgroundColor ||
-            COLOR_WHITE,
+      canvasBackgroundColor: viewBackgroundColor,
       imageCache,
       renderGrid: false,
       isExporting: true,
@@ -654,91 +254,95 @@ export const exportToCanvas = async ({
   return canvas;
 };
 
-type ExportToSvgConfig = Pick<
-  ExportSceneConfig,
-  "canvasBackgroundColor" | "padding" | "theme" | "exportingFrame"
-> & {
-  /**
-   * if true, all embeddables passed in will be rendered when possible.
-   */
-  renderEmbeddables?: boolean;
-  skipInliningFonts?: true;
-  reuseImages?: boolean;
-};
-
-export const exportToSvg = async ({
-  data,
-  config,
-}: {
-  data: ExportSceneData;
-  config?: ExportSceneConfig;
-}) => {
-  const {
-    config: cfg,
-    normalizedPadding,
-    exportWidth,
-    exportHeight,
-    exportScale,
-    x,
-    y,
-    elementsForRender,
-    appState,
-    frameRendering,
-  } = await configExportDimension({ data, config });
-
-  const offsetX = -(x - normalizedPadding);
-  const offsetY = -(y - normalizedPadding);
-
-  const { elements } = data;
-
-  // initialize SVG root
-  const svgRoot = document.createElementNS(SVG_NS, "svg");
-  svgRoot.setAttribute("version", "1.1");
-  svgRoot.setAttribute("xmlns", SVG_NS);
-  svgRoot.setAttribute(
-    "viewBox",
-    `0 0 ${exportWidth / exportScale} ${exportHeight / exportScale}`,
+export const exportToSvg = async (
+  elements: readonly NonDeletedExcalidrawElement[],
+  appState: {
+    exportBackground: boolean;
+    exportPadding?: number;
+    exportScale?: number;
+    viewBackgroundColor: string;
+    exportWithDarkMode?: boolean;
+    exportEmbedScene?: boolean;
+    frameRendering?: AppState["frameRendering"];
+  },
+  files: BinaryFiles | null,
+  opts?: {
+    /**
+     * if true, all embeddables passed in will be rendered when possible.
+     */
+    renderEmbeddables?: boolean;
+    exportingFrame?: ExcalidrawFrameLikeElement | null;
+    skipInliningFonts?: true;
+    reuseImages?: boolean;
+  },
+): Promise<SVGSVGElement> => {
+  const frameRendering = getFrameRenderingConfig(
+    opts?.exportingFrame ?? null,
+    appState.frameRendering ?? null,
   );
-  svgRoot.setAttribute("width", `${exportWidth}`);
-  svgRoot.setAttribute("height", `${exportHeight}`);
-  if (cfg.theme === THEME.DARK) {
-    svgRoot.setAttribute("filter", THEME_FILTER);
+
+  let {
+    exportPadding = DEFAULT_EXPORT_PADDING,
+    exportWithDarkMode = false,
+    viewBackgroundColor,
+    exportScale = 1,
+    exportEmbedScene,
+  } = appState;
+
+  const { exportingFrame = null } = opts || {};
+
+  const elementsForRender = prepareElementsForRender({
+    elements,
+    exportingFrame,
+    exportWithDarkMode,
+    frameRendering,
+  });
+
+  if (exportingFrame) {
+    exportPadding = 0;
   }
 
-  const fontFaces = cfg.loadFonts
-    ? await Fonts.generateFontFaceDeclarations(elements)
-    : [];
-
-  const delimiter = "\n      "; // 6 spaces
-
   let metadata = "";
 
   // we need to serialize the "original" elements before we put them through
   // the tempScene hack which duplicates and regenerates ids
-  if (appState.exportEmbedScene) {
+  if (exportEmbedScene) {
     try {
       metadata = (await import("../data/image")).encodeSvgMetadata({
         // when embedding scene, we want to embed the origionally supplied
         // elements which don't contain the temp frame labels.
         // But it also requires that the exportToSvg is being supplied with
         // only the elements that we're exporting, and no extra.
-        text: serializeAsJSON(elements, appState, data.files || {}, "local"),
+        text: serializeAsJSON(elements, appState, files || {}, "local"),
       });
     } catch (error: any) {
       console.error(error);
     }
   }
 
-  let exportContentClipPath = "";
-  if (cfg.width != null && cfg.height != null) {
-    exportContentClipPath = `<clipPath id="content">
-      <rect x="${offsetX}" y="${offsetY}" width="${exportWidth}" height="${exportWidth}"></rect>
-    </clipPath>`;
+  const [minX, minY, width, height] = getCanvasSize(
+    exportingFrame ? [exportingFrame] : getRootElements(elementsForRender),
+    exportPadding,
+  );
+
+  // initialize SVG root
+  const svgRoot = document.createElementNS(SVG_NS, "svg");
+  svgRoot.setAttribute("version", "1.1");
+  svgRoot.setAttribute("xmlns", SVG_NS);
+  svgRoot.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  svgRoot.setAttribute("width", `${width * exportScale}`);
+  svgRoot.setAttribute("height", `${height * exportScale}`);
+  if (exportWithDarkMode) {
+    svgRoot.setAttribute("filter", THEME_FILTER);
   }
 
+  const offsetX = -minX + exportPadding;
+  const offsetY = -minY + exportPadding;
+
+  const frameElements = getFrameLikeElements(elements);
+
   let exportingFrameClipPath = "";
   const elementsMap = arrayToMap(elements);
-  const frameElements = getFrameLikeElements(elements);
   for (const frame of frameElements) {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(frame, elementsMap);
     const cx = (x2 - x1) / 2 - (frame.x - x1);
@@ -751,7 +355,7 @@ export const exportToSvg = async ({
           width="${frame.width}"
           height="${frame.height}"
           ${
-            cfg.exportingFrame
+            exportingFrame
               ? ""
               : `rx=${FRAME_STYLE.radius} ry=${FRAME_STYLE.radius}`
           }
@@ -760,56 +364,59 @@ export const exportToSvg = async ({
         </clipPath>`;
   }
 
+  const fontFaces = !opts?.skipInliningFonts
+    ? await Fonts.generateFontFaceDeclarations(elements)
+    : [];
+
+  const delimiter = "\n      "; // 6 spaces
+
   svgRoot.innerHTML = `
   ${SVG_EXPORT_TAG}
   ${metadata}
   <defs>
-    <style class="style-fonts">${delimiter}${fontFaces.join(delimiter)}</style>
-    ${exportContentClipPath}
+    <style class="style-fonts">${delimiter}${fontFaces.join(delimiter)}
+    </style>
     ${exportingFrameClipPath}
   </defs>
   `;
 
   // render background rect
-  if (appState.exportBackground && appState.viewBackgroundColor) {
+  if (appState.exportBackground && viewBackgroundColor) {
     const rect = svgRoot.ownerDocument!.createElementNS(SVG_NS, "rect");
     rect.setAttribute("x", "0");
     rect.setAttribute("y", "0");
-    rect.setAttribute("width", `${exportWidth / exportScale}`);
-    rect.setAttribute("height", `${exportHeight / exportScale}`);
-    rect.setAttribute(
-      "fill",
-      cfg.canvasBackgroundColor || appState.viewBackgroundColor,
-    );
+    rect.setAttribute("width", `${width}`);
+    rect.setAttribute("height", `${height}`);
+    rect.setAttribute("fill", viewBackgroundColor);
     svgRoot.appendChild(rect);
   }
 
   const rsvg = rough.svg(svgRoot);
 
-  // const renderEmbeddables = appState.embe ?? false;
+  const renderEmbeddables = opts?.renderEmbeddables ?? false;
 
   renderSceneToSvg(
     elementsForRender,
     toBrandedType<RenderableElementsMap>(arrayToMap(elementsForRender)),
     rsvg,
     svgRoot,
-    data.files || {},
+    files || {},
     {
       offsetX,
       offsetY,
       isExporting: true,
-      exportWithDarkMode: cfg.theme === THEME.DARK,
-      renderEmbeddables: false,
+      exportWithDarkMode,
+      renderEmbeddables,
       frameRendering,
-      canvasBackgroundColor: appState.viewBackgroundColor,
-      embedsValidationStatus: false
+      canvasBackgroundColor: viewBackgroundColor,
+      embedsValidationStatus: renderEmbeddables
         ? new Map(
             elementsForRender
               .filter((element) => isFrameLikeElement(element))
               .map((element) => [element.id, true]),
           )
         : new Map(),
-      reuseImages: true,
+      reuseImages: opts?.reuseImages ?? true,
     },
   );
 
@@ -817,112 +424,25 @@ export const exportToSvg = async ({
 };
 
 // calculate smallest area to fit the contents in
-export const getCanvasSize = (
+const getCanvasSize = (
   elements: readonly NonDeletedExcalidrawElement[],
+  exportPadding: number,
 ): Bounds => {
   const [minX, minY, maxX, maxY] = getCommonBounds(elements);
-  const width = distance(minX, maxX);
-  const height = distance(minY, maxY);
+  const width = distance(minX, maxX) + exportPadding * 2;
+  const height = distance(minY, maxY) + exportPadding * 2;
 
   return [minX, minY, width, height];
 };
 
-export { MIME_TYPES };
+export const getExportSize = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  exportPadding: number,
+  scale: number,
+): [number, number] => {
+  const [, , width, height] = getCanvasSize(elements, exportPadding).map(
+    (dimension) => Math.trunc(dimension * scale),
+  );
 
-type ExportToBlobConfig = ExportSceneConfig & {
-  mimeType?: string;
-  quality?: number;
-};
-
-export const exportToBlob = async ({
-  data,
-  config,
-}: {
-  data: ExportSceneData;
-  config?: ExportToBlobConfig;
-}): Promise<Blob> => {
-  let { mimeType = MIME_TYPES.png, quality } = config || {};
-
-  if (mimeType === MIME_TYPES.png && typeof quality === "number") {
-    console.warn(`"quality" will be ignored for "${MIME_TYPES.png}" mimeType`);
-  }
-
-  // typo in MIME type (should be "jpeg")
-  if (mimeType === "image/jpg") {
-    mimeType = MIME_TYPES.jpg;
-  }
-
-  if (mimeType === MIME_TYPES.jpg && !config?.canvasBackgroundColor === false) {
-    console.warn(
-      `Defaulting "exportBackground" to "true" for "${MIME_TYPES.jpg}" mimeType`,
-    );
-    config = {
-      ...config,
-      canvasBackgroundColor: data.appState?.viewBackgroundColor || COLOR_WHITE,
-    };
-  }
-
-  const canvas = await exportToCanvas({ data, config });
-
-  quality = quality ? quality : /image\/jpe?g/.test(mimeType) ? 0.92 : 0.8;
-
-  return new Promise((resolve, reject) => {
-    canvas.toBlob(
-      async (blob) => {
-        if (!blob) {
-          return reject(new Error("couldn't export to blob"));
-        }
-        if (
-          blob &&
-          mimeType === MIME_TYPES.png &&
-          data.appState?.exportEmbedScene
-        ) {
-          blob = await encodePngMetadata({
-            blob,
-            metadata: serializeAsJSON(
-              // NOTE as long as we're using the Scene hack, we need to ensure
-              // we pass the original, uncloned elements when serializing
-              // so that we keep ids stable
-              data.elements,
-              data.appState,
-              data.files || {},
-              "local",
-            ),
-          });
-        }
-        resolve(blob);
-      },
-      mimeType,
-      quality,
-    );
-  });
-};
-
-export const exportToClipboard = async ({
-  type,
-  data,
-  config,
-}: {
-  data: ExportSceneData;
-} & (
-  | { type: "png"; config?: ExportToBlobConfig }
-  | { type: "svg"; config?: ExportToSvgConfig }
-  | { type: "json"; config?: never }
-)) => {
-  if (type === "svg") {
-    const svg = await exportToSvg({
-      data: {
-        ...data,
-        appState: restoreAppState(data.appState, null),
-      },
-      config,
-    });
-    await copyTextToSystemClipboard(svg.outerHTML);
-  } else if (type === "png") {
-    await copyBlobToClipboardAsPng(exportToBlob({ data, config }));
-  } else if (type === "json") {
-    await copyToClipboard(data.elements, data.files);
-  } else {
-    throw new Error("Invalid export type");
-  }
+  return [width, height];
 };

packages/excalidraw/scene/types.ts

@@ -24,6 +24,7 @@ export type RenderableElementsMap = NonDeletedElementsMap &
   MakeBrand<"RenderableElementsMap">;
 
 export type StaticCanvasRenderConfig = {
+  canvasBackgroundColor: AppState["viewBackgroundColor"];
   // extra options passed to the renderer
   // ---------------------------------------------------------------------------
   imageCache: AppClassProperties["imageCache"];
@@ -31,8 +32,6 @@ export type StaticCanvasRenderConfig = {
   /** when exporting the behavior is slightly different (e.g. we can't use
    CSS filters), and we disable render optimizations for best output */
   isExporting: boolean;
-  /** null indicates transparent bg */
-  canvasBackgroundColor: string | null;
   embedsValidationStatus: EmbedsValidationStatus;
   elementsPendingErasure: ElementsPendingErasure;
   pendingFlowchartNodes: PendingExcalidrawElements | null;
@@ -82,13 +81,6 @@ export type StaticSceneRenderConfig = {
   elementsMap: RenderableElementsMap;
   allElementsMap: NonDeletedSceneElementsMap;
   visibleElements: readonly NonDeletedExcalidrawElement[];
-  /**
-   * canvas scale factor. Not related to zoom. In browsers, it's the
-   * devicePixelRatio. For export, it's the `appState.exportScale`
-   * (user setting) or whatever scale you want to use when exporting elsewhere.
-   *
-   * Bigger the scale, the more pixels (=quality).
-   */
   scale: number;
   appState: StaticCanvasAppState;
   renderConfig: StaticCanvasRenderConfig;

packages/excalidraw/tests/__snapshots__/MermaidToExcalidraw.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Test <MermaidToExcalidraw/> > should open mermaid popup when active too
  B --&gt; C{Let me think}
  C --&gt;|One| D[Laptop]
  C --&gt;|Two| E[iPhone]
- C --&gt;|Three| F[Car]</textarea><div class="ttd-dialog-panel-button-container invisible" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class=""></div></button></div></div><div class="ttd-dialog-panel"><div class="ttd-dialog-panel__header"><label>Preview</label></div><div class="ttd-dialog-output-wrapper"><div style="opacity: 1;" class="ttd-dialog-output-canvas-container"><canvas width="300" height="0" dir="ltr"></canvas></div></div><div class="ttd-dialog-panel-button-container" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class="">Insert<span><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g stroke-width="1.25"><path d="M4.16602 10H15.8327"></path><path d="M12.5 13.3333L15.8333 10"></path><path d="M12.5 6.66666L15.8333 9.99999"></path></g></svg></span></div></button><div class="ttd-dialog-submit-shortcut"><div class="ttd-dialog-submit-shortcut__key">Ctrl</div><div class="ttd-dialog-submit-shortcut__key">Enter</div></div></div></div></div></div></div></div></div></div></div>"
+ C --&gt;|Three| F[Car]</textarea><div class="ttd-dialog-panel-button-container invisible" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class=""></div></button></div></div><div class="ttd-dialog-panel"><div class="ttd-dialog-panel__header"><label>Preview</label></div><div class="ttd-dialog-output-wrapper"><div style="opacity: 1;" class="ttd-dialog-output-canvas-container"><canvas width="89" height="158" dir="ltr"></canvas></div></div><div class="ttd-dialog-panel-button-container" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class="">Insert<span><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g stroke-width="1.25"><path d="M4.16602 10H15.8327"></path><path d="M12.5 13.3333L15.8333 10"></path><path d="M12.5 6.66666L15.8333 9.99999"></path></g></svg></span></div></button><div class="ttd-dialog-submit-shortcut"><div class="ttd-dialog-submit-shortcut__key">Ctrl</div><div class="ttd-dialog-submit-shortcut__key">Enter</div></div></div></div></div></div></div></div></div></div></div>"
 `;
 
 exports[`Test <MermaidToExcalidraw/> > should show error in preview when mermaid library throws error 1`] = `

packages/excalidraw/tests/cropElement.test.tsx

@@ -156,8 +156,8 @@ describe("Crop an image", () => {
       [-initialWidth / 3, 0],
       true,
     );
-    expect(image.width).toBeCloseTo(resizedWidth, 10);
-    expect(image.height).toBeCloseTo(resizedHeight, 10);
+    expect(image.width).toBe(resizedWidth);
+    expect(image.height).toBe(resizedHeight);
 
     // re-crop to initial state
     UI.crop(image, "w", naturalWidth, naturalHeight, [-initialWidth / 3, 0]);
@@ -315,28 +315,20 @@ describe("Cropping and other features", async () => {
     const widthToHeightRatio = image.width / image.height;
 
     const canvas = await exportToCanvas({
-      data: {
-        elements: [image],
-        appState: h.state,
-        files: h.app.files,
-      },
-      config: {
-        padding: 0,
-      },
+      elements: [image],
+      appState: h.state,
+      files: h.app.files,
+      exportPadding: 0,
     });
     const exportedCanvasRatio = canvas.width / canvas.height;
 
     expect(widthToHeightRatio).toBeCloseTo(exportedCanvasRatio);
 
     const svg = await exportToSvg({
-      data: {
-        elements: [image],
-        appState: h.state,
-        files: h.app.files,
-      },
-      config: {
-        padding: 0,
-      },
+      elements: [image],
+      appState: h.state,
+      files: h.app.files,
+      exportPadding: 0,
     });
     const svgWidth = svg.getAttribute("width");
     const svgHeight = svg.getAttribute("height");

packages/excalidraw/tests/export.test.tsx

@@ -163,7 +163,7 @@ describe("export", () => {
       },
     } as const;
 
-    const svg = await exportToSvg({ data: { elements, appState, files } });
+    const svg = await exportToSvg(elements, appState, files);
 
     const svgText = svg.outerHTML;
 

packages/excalidraw/tests/history.test.tsx

@@ -15,11 +15,7 @@ import { getDefaultAppState } from "../appState";
 import { fireEvent, queryByTestId, waitFor } from "@testing-library/react";
 import { createUndoAction, createRedoAction } from "../actions/actionHistory";
 import { actionToggleViewMode } from "../actions/actionToggleViewMode";
-import {
-  COLOR_CHARCOAL_BLACK,
-  EXPORT_DATA_TYPES,
-  MIME_TYPES,
-} from "../constants";
+import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
 import type { AppState } from "../types";
 import { arrayToMap } from "../utils";
 import {
@@ -81,7 +77,7 @@ const checkpoint = (name: string) => {
 const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");
 
 const transparent = COLOR_PALETTE.transparent;
-const black = COLOR_CHARCOAL_BLACK;
+const black = COLOR_PALETTE.black;
 const red = COLOR_PALETTE.red[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];
 const blue = COLOR_PALETTE.blue[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];
 const yellow = COLOR_PALETTE.yellow[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];

packages/excalidraw/tests/linearElementEditor.test.tsx

@@ -1235,7 +1235,8 @@ describe("Test Linear Elements", () => {
       mouse.downAt(rect.x, rect.y);
       mouse.moveTo(200, 0);
       mouse.upAt(200, 0);
-      expect(arrow.width).toBe(200);
+
+      expect(arrow.width).toBe(205);
       expect(rect.x).toBe(200);
       expect(rect.y).toBe(0);
       expect(handleBindTextResizeSpy).toHaveBeenCalledWith(

packages/excalidraw/tests/resize.test.tsx

@@ -882,11 +882,11 @@ describe("multiple selection", () => {
 
     expect(leftBoundArrow.x).toBeCloseTo(-110);
     expect(leftBoundArrow.y).toBeCloseTo(50);
-    expect(leftBoundArrow.width).toBeCloseTo(140, 0);
+    expect(leftBoundArrow.width).toBeCloseTo(137.5, 0);
     expect(leftBoundArrow.height).toBeCloseTo(7, 0);
     expect(leftBoundArrow.angle).toEqual(0);
     expect(leftBoundArrow.startBinding).toBeNull();
-    expect(leftBoundArrow.endBinding?.gap).toBeCloseTo(10);
+    expect(leftBoundArrow.endBinding?.gap).toBeCloseTo(12.352);
     expect(leftBoundArrow.endBinding?.elementId).toBe(
       leftArrowBinding.elementId,
     );

packages/excalidraw/types.ts

@@ -173,6 +173,8 @@ type _CommonCanvasAppState = {
 export type StaticCanvasAppState = Readonly<
   _CommonCanvasAppState & {
     shouldCacheIgnoreZoom: AppState["shouldCacheIgnoreZoom"];
+    /** null indicates transparent bg */
+    viewBackgroundColor: AppState["viewBackgroundColor"] | null;
     exportScale: AppState["exportScale"];
     selectedElementsAreBeingDragged: AppState["selectedElementsAreBeingDragged"];
     gridSize: AppState["gridSize"];

packages/excalidraw/utils.ts

@@ -1,8 +1,8 @@
 import Pool from "es6-promise-pool";
 import { average } from "../math";
+import { COLOR_PALETTE } from "./colors";
 import type { EVENT } from "./constants";
 import {
-  COLOR_TRANSPARENT,
   DEFAULT_VERSION,
   FONT_FAMILY,
   getFontFamilyFallbacks,
@@ -536,7 +536,11 @@ export const findLastIndex = <T>(
 export const isTransparent = (color: string) => {
   const isRGBTransparent = color.length === 5 && color.substr(4, 1) === "0";
   const isRRGGBBTransparent = color.length === 9 && color.substr(7, 2) === "00";
-  return isRGBTransparent || isRRGGBBTransparent || color === COLOR_TRANSPARENT;
+  return (
+    isRGBTransparent ||
+    isRRGGBBTransparent ||
+    color === COLOR_PALETTE.transparent
+  );
 };
 
 export type ResolvablePromise<T> = Promise<T> & {
@@ -1221,18 +1225,3 @@ export class PromisePool<T> {
     });
   }
 }
-
-export const pick = <
-  R extends Record<string, any>,
-  K extends readonly (keyof R)[],
->(
-  source: R,
-  keys: K,
-) => {
-  return keys.reduce((acc, key: K[number]) => {
-    if (key in source) {
-      acc[key] = source[key];
-    }
-    return acc;
-  }, {} as Pick<R, K[number]>) as Pick<R, K[number]>;
-};

packages/utils/export.test.ts

@@ -0,0 +1,132 @@
+import * as utils from ".";
+import { diagramFactory } from "../excalidraw/tests/fixtures/diagramFixture";
+import { vi } from "vitest";
+import * as mockedSceneExportUtils from "../excalidraw/scene/export";
+
+import { MIME_TYPES } from "../excalidraw/constants";
+
+const exportToSvgSpy = vi.spyOn(mockedSceneExportUtils, "exportToSvg");
+
+describe("exportToCanvas", async () => {
+  const EXPORT_PADDING = 10;
+
+  it("with default arguments", async () => {
+    const canvas = await utils.exportToCanvas({
+      ...diagramFactory({ elementOverrides: { width: 100, height: 100 } }),
+    });
+
+    expect(canvas.width).toBe(100 + 2 * EXPORT_PADDING);
+    expect(canvas.height).toBe(100 + 2 * EXPORT_PADDING);
+  });
+
+  it("when custom width and height", async () => {
+    const canvas = await utils.exportToCanvas({
+      ...diagramFactory({ elementOverrides: { width: 100, height: 100 } }),
+      getDimensions: () => ({ width: 200, height: 200, scale: 1 }),
+    });
+
+    expect(canvas.width).toBe(200);
+    expect(canvas.height).toBe(200);
+  });
+});
+
+describe("exportToBlob", async () => {
+  describe("mime type", () => {
+    it("should change image/jpg to image/jpeg", async () => {
+      const blob = await utils.exportToBlob({
+        ...diagramFactory(),
+        getDimensions: (width, height) => ({ width, height, scale: 1 }),
+        // testing typo in MIME type (jpg → jpeg)
+        mimeType: "image/jpg",
+        appState: {
+          exportBackground: true,
+        },
+      });
+      expect(blob?.type).toBe(MIME_TYPES.jpg);
+    });
+    it("should default to image/png", async () => {
+      const blob = await utils.exportToBlob({
+        ...diagramFactory(),
+      });
+      expect(blob?.type).toBe(MIME_TYPES.png);
+    });
+
+    it("should warn when using quality with image/png", async () => {
+      const consoleSpy = vi
+        .spyOn(console, "warn")
+        .mockImplementationOnce(() => void 0);
+      await utils.exportToBlob({
+        ...diagramFactory(),
+        mimeType: MIME_TYPES.png,
+        quality: 1,
+      });
+      expect(consoleSpy).toHaveBeenCalledWith(
+        `"quality" will be ignored for "${MIME_TYPES.png}" mimeType`,
+      );
+    });
+  });
+});
+
+describe("exportToSvg", () => {
+  const passedElements = () => exportToSvgSpy.mock.calls[0][0];
+  const passedOptions = () => exportToSvgSpy.mock.calls[0][1];
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("with default arguments", async () => {
+    await utils.exportToSvg({
+      ...diagramFactory({
+        overrides: { appState: void 0 },
+      }),
+    });
+
+    const passedOptionsWhenDefault = {
+      ...passedOptions(),
+      // To avoid varying snapshots
+      name: "name",
+    };
+    expect(passedElements().length).toBe(3);
+    expect(passedOptionsWhenDefault).toMatchSnapshot();
+  });
+
+  // FIXME the utils.exportToSvg no longer filters out deleted elements.
+  // It's already supposed to be passed non-deleted elements by we're not
+  // type-checking for it correctly.
+  it.skip("with deleted elements", async () => {
+    await utils.exportToSvg({
+      ...diagramFactory({
+        overrides: { appState: void 0 },
+        elementOverrides: { isDeleted: true },
+      }),
+    });
+
+    expect(passedElements().length).toBe(0);
+  });
+
+  it("with exportPadding", async () => {
+    await utils.exportToSvg({
+      ...diagramFactory({ overrides: { appState: { name: "diagram name" } } }),
+      exportPadding: 0,
+    });
+
+    expect(passedElements().length).toBe(3);
+    expect(passedOptions()).toEqual(
+      expect.objectContaining({ exportPadding: 0 }),
+    );
+  });
+
+  it("with exportEmbedScene", async () => {
+    await utils.exportToSvg({
+      ...diagramFactory({
+        overrides: {
+          appState: { name: "diagram name", exportEmbedScene: true },
+        },
+      }),
+    });
+
+    expect(passedElements().length).toBe(3);
+    expect(passedOptions().exportEmbedScene).toBe(true);
+  });
+});

packages/utils/export.ts

@@ -0,0 +1,213 @@
+import {
+  exportToCanvas as _exportToCanvas,
+  exportToSvg as _exportToSvg,
+} from "../excalidraw/scene/export";
+import { getDefaultAppState } from "../excalidraw/appState";
+import type { AppState, BinaryFiles } from "../excalidraw/types";
+import type {
+  ExcalidrawElement,
+  ExcalidrawFrameLikeElement,
+  NonDeleted,
+} from "../excalidraw/element/types";
+import { restore } from "../excalidraw/data/restore";
+import { MIME_TYPES } from "../excalidraw/constants";
+import { encodePngMetadata } from "../excalidraw/data/image";
+import { serializeAsJSON } from "../excalidraw/data/json";
+import {
+  copyBlobToClipboardAsPng,
+  copyTextToSystemClipboard,
+  copyToClipboard,
+} from "../excalidraw/clipboard";
+
+export { MIME_TYPES };
+
+type ExportOpts = {
+  elements: readonly NonDeleted<ExcalidrawElement>[];
+  appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
+  files: BinaryFiles | null;
+  maxWidthOrHeight?: number;
+  exportingFrame?: ExcalidrawFrameLikeElement | null;
+  getDimensions?: (
+    width: number,
+    height: number,
+  ) => { width: number; height: number; scale?: number };
+};
+
+export const exportToCanvas = ({
+  elements,
+  appState,
+  files,
+  maxWidthOrHeight,
+  getDimensions,
+  exportPadding,
+  exportingFrame,
+}: ExportOpts & {
+  exportPadding?: number;
+}) => {
+  const { elements: restoredElements, appState: restoredAppState } = restore(
+    { elements, appState },
+    null,
+    null,
+  );
+  const { exportBackground, viewBackgroundColor } = restoredAppState;
+  return _exportToCanvas(
+    restoredElements,
+    { ...restoredAppState, offsetTop: 0, offsetLeft: 0, width: 0, height: 0 },
+    files || {},
+    { exportBackground, exportPadding, viewBackgroundColor, exportingFrame },
+    (width: number, height: number) => {
+      const canvas = document.createElement("canvas");
+
+      if (maxWidthOrHeight) {
+        if (typeof getDimensions === "function") {
+          console.warn(
+            "`getDimensions()` is ignored when `maxWidthOrHeight` is supplied.",
+          );
+        }
+
+        const max = Math.max(width, height);
+
+        // if content is less then maxWidthOrHeight, fallback on supplied scale
+        const scale =
+          maxWidthOrHeight < max
+            ? maxWidthOrHeight / max
+            : appState?.exportScale ?? 1;
+
+        canvas.width = width * scale;
+        canvas.height = height * scale;
+
+        return {
+          canvas,
+          scale,
+        };
+      }
+
+      const ret = getDimensions?.(width, height) || { width, height };
+
+      canvas.width = ret.width;
+      canvas.height = ret.height;
+
+      return {
+        canvas,
+        scale: ret.scale ?? 1,
+      };
+    },
+  );
+};
+
+export const exportToBlob = async (
+  opts: ExportOpts & {
+    mimeType?: string;
+    quality?: number;
+    exportPadding?: number;
+  },
+): Promise<Blob> => {
+  let { mimeType = MIME_TYPES.png, quality } = opts;
+
+  if (mimeType === MIME_TYPES.png && typeof quality === "number") {
+    console.warn(`"quality" will be ignored for "${MIME_TYPES.png}" mimeType`);
+  }
+
+  // typo in MIME type (should be "jpeg")
+  if (mimeType === "image/jpg") {
+    mimeType = MIME_TYPES.jpg;
+  }
+
+  if (mimeType === MIME_TYPES.jpg && !opts.appState?.exportBackground) {
+    console.warn(
+      `Defaulting "exportBackground" to "true" for "${MIME_TYPES.jpg}" mimeType`,
+    );
+    opts = {
+      ...opts,
+      appState: { ...opts.appState, exportBackground: true },
+    };
+  }
+
+  const canvas = await exportToCanvas(opts);
+
+  quality = quality ? quality : /image\/jpe?g/.test(mimeType) ? 0.92 : 0.8;
+
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      async (blob) => {
+        if (!blob) {
+          return reject(new Error("couldn't export to blob"));
+        }
+        if (
+          blob &&
+          mimeType === MIME_TYPES.png &&
+          opts.appState?.exportEmbedScene
+        ) {
+          blob = await encodePngMetadata({
+            blob,
+            metadata: serializeAsJSON(
+              // NOTE as long as we're using the Scene hack, we need to ensure
+              // we pass the original, uncloned elements when serializing
+              // so that we keep ids stable
+              opts.elements,
+              opts.appState,
+              opts.files || {},
+              "local",
+            ),
+          });
+        }
+        resolve(blob);
+      },
+      mimeType,
+      quality,
+    );
+  });
+};
+
+export const exportToSvg = async ({
+  elements,
+  appState = getDefaultAppState(),
+  files = {},
+  exportPadding,
+  renderEmbeddables,
+  exportingFrame,
+  skipInliningFonts,
+  reuseImages,
+}: Omit<ExportOpts, "getDimensions"> & {
+  exportPadding?: number;
+  renderEmbeddables?: boolean;
+  skipInliningFonts?: true;
+  reuseImages?: boolean;
+}): Promise<SVGSVGElement> => {
+  const { elements: restoredElements, appState: restoredAppState } = restore(
+    { elements, appState },
+    null,
+    null,
+  );
+
+  const exportAppState = {
+    ...restoredAppState,
+    exportPadding,
+  };
+
+  return _exportToSvg(restoredElements, exportAppState, files, {
+    exportingFrame,
+    renderEmbeddables,
+    skipInliningFonts,
+    reuseImages,
+  });
+};
+
+export const exportToClipboard = async (
+  opts: ExportOpts & {
+    mimeType?: string;
+    quality?: number;
+    type: "png" | "svg" | "json";
+  },
+) => {
+  if (opts.type === "svg") {
+    const svg = await exportToSvg(opts);
+    await copyTextToSystemClipboard(svg.outerHTML);
+  } else if (opts.type === "png") {
+    await copyBlobToClipboardAsPng(exportToBlob(opts));
+  } else if (opts.type === "json") {
+    await copyToClipboard(opts.elements, opts.files);
+  } else {
+    throw new Error("Invalid export type");
+  }
+};

packages/utils/index.ts

@@ -1,3 +1,4 @@
+export * from "./export";
 export * from "./withinBounds";
 export * from "./bbox";
 export { getCommonBounds } from "../excalidraw/element/bounds";

packages/utils/utils.unmocked.test.ts

@@ -1,6 +1,6 @@
 import { decodePngMetadata, decodeSvgMetadata } from "../excalidraw/data/image";
 import type { ImportedDataState } from "../excalidraw/data/types";
-import { exportToBlob, exportToSvg } from "../excalidraw/scene/export";
+import * as utils from "../utils";
 import { API } from "../excalidraw/tests/helpers/api";
 
 // NOTE this test file is using the actual API, unmocked. Hence splitting it
@@ -15,17 +15,14 @@ describe("embedding scene data", () => {
 
       const sourceElements = [rectangle, ellipse];
 
-      const svgNode = await exportToSvg({
-        data: {
-          elements: sourceElements,
-          appState: {
-            viewBackgroundColor: "#ffffff",
-            gridModeEnabled: false,
-            exportEmbedScene: true,
-            exportBackground: true,
-          },
-          files: null,
+      const svgNode = await utils.exportToSvg({
+        elements: sourceElements,
+        appState: {
+          viewBackgroundColor: "#ffffff",
+          gridModeEnabled: false,
+          exportEmbedScene: true,
         },
+        files: null,
       });
 
       const svg = svgNode.outerHTML;
@@ -48,19 +45,15 @@ describe("embedding scene data", () => {
 
       const sourceElements = [rectangle, ellipse];
 
-      const blob = await exportToBlob({
-        data: {
-          elements: sourceElements,
-          appState: {
-            viewBackgroundColor: "#ffffff",
-            gridModeEnabled: false,
-            exportEmbedScene: true,
-          },
-          files: null,
-        },
-        config: {
-          mimeType: "image/png",
+      const blob = await utils.exportToBlob({
+        mimeType: "image/png",
+        elements: sourceElements,
+        appState: {
+          viewBackgroundColor: "#ffffff",
+          gridModeEnabled: false,
+          exportEmbedScene: true,
         },
+        files: null,
       });
 
       const parsedString = await decodePngMetadata(blob);

yarn.lock

@@ -1891,13 +1891,13 @@
   resolved "https://registry.yarnpkg.com/@excalidraw/markdown-to-text/-/markdown-to-text-0.1.2.tgz#1703705e7da608cf478f17bfe96fb295f55a23eb"
   integrity sha512-1nDXBNAojfi3oSFwJswKREkFm5wrSjqay81QlyRv2pkITG/XYB5v+oChENVBQLcxQwX4IUATWvXM5BcaNhPiIg==
 
-"@excalidraw/mermaid-to-excalidraw@1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-1.1.2.tgz#74d9507971976a7d3d960a1b2e8fb49a9f1f0d22"
-  integrity sha512-hAFv/TTIsOdoy0dL5v+oBd297SQ+Z88gZ5u99fCIFuEMHfQuPgLhU/ztKhFSTs7fISwVo6fizny/5oQRR3d4tQ==
+"@excalidraw/mermaid-to-excalidraw@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-1.1.0.tgz#a24a7aa3ad2e4f671054fdb670a8508bab463814"
+  integrity sha512-YP2roqrImzek1SpUAeToSTNhH5Gfw9ogdI5KHp7c+I/mX7SEW8oNqqX7CP+oHcUgNF6RrYIkqSrnMRN9/3EGLg==
   dependencies:
     "@excalidraw/markdown-to-text" "0.1.2"
-    mermaid "10.9.3"
+    mermaid "10.9.0"
     nanoid "4.0.2"
 
 "@excalidraw/prettier-config@1.0.2":
@@ -1915,229 +1915,383 @@
   resolved "https://registry.yarnpkg.com/@excalidraw/random-username/-/random-username-1.1.0.tgz#6f388d6a9708cf655b8c9c6aa3fa569ee71ecf0f"
   integrity sha512-nULYsQxkWHnbmHvcs+efMkJ4/9TtvNyFeLyHdeGxW0zHs6P+jYVqcRff9A6Vq9w9JXeDRnRh2VKvTtS19GW2qA==
 
-"@firebase/analytics-types@0.4.0":
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@firebase/analytics-types/-/analytics-types-0.4.0.tgz#d6716f9fa36a6e340bc0ecfe68af325aa6f60508"
-  integrity sha512-Jj2xW+8+8XPfWGkv9HPv/uR+Qrmq37NPYT352wf7MvE9LrstpLVmFg3LqG6MCRr5miLAom5sen2gZ+iOhVDeRA==
+"@fastify/busboy@^2.0.0":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.1.1.tgz#b9da6a878a371829a0502c9b6c1c143ef6663f4d"
+  integrity sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==
 
-"@firebase/analytics@0.6.8":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@firebase/analytics/-/analytics-0.6.8.tgz#ec69a8673df2e0381bdebc892d28448e2d97ee8a"
-  integrity sha512-cPbQIQo3uqpImtiGIB42F9s9fw8cPseCj1ZMR3VshL6u/6kzC9ptOpgg8PMCLOgZvBwC993LbT1UOTuufTd49Q==
+"@firebase/analytics-compat@0.2.7":
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/@firebase/analytics-compat/-/analytics-compat-0.2.7.tgz#affad547d6db9c13424950df972019fb0e2ecaeb"
+  integrity sha512-17VCly4P0VFBDqaaal7m1nhyYQwsygtaTpSsnc51sFPRrr9XIYtnD8ficon9fneEGEoJQ2g7OtASvhwX9EbK8g==
   dependencies:
-    "@firebase/analytics-types" "0.4.0"
-    "@firebase/component" "0.4.0"
-    "@firebase/installations" "0.4.24"
-    "@firebase/logger" "0.2.6"
-    "@firebase/util" "0.4.1"
+    "@firebase/analytics" "0.10.1"
+    "@firebase/analytics-types" "0.8.0"
+    "@firebase/component" "0.6.5"
+    "@firebase/util" "1.9.4"
     tslib "^2.1.0"
 
-"@firebase/app-types@0.6.2":
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/@firebase/app-types/-/app-types-0.6.2.tgz#8578cb1061a83ced4570188be9e225d54e0f27fb"
-  integrity sha512-2VXvq/K+n8XMdM4L2xy5bYp2ZXMawJXluUIDzUBvMthVR+lhxK4pfFiqr1mmDbv9ydXvEAuFsD+6DpcZuJcSSw==
+"@firebase/analytics-types@0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@firebase/analytics-types/-/analytics-types-0.8.0.tgz#551e744a29adbc07f557306530a2ec86add6d410"
+  integrity sha512-iRP+QKI2+oz3UAh4nPEq14CsEjrjD6a5+fuypjScisAh9kXKFvdJOZJDwk7kikLvWVLGEs9+kIUS4LPQV7VZVw==
 
-"@firebase/app@0.6.19":
-  version "0.6.19"
-  resolved "https://registry.yarnpkg.com/@firebase/app/-/app-0.6.19.tgz#40fe266889436ab0fcf035ee5a415db7339c1936"
-  integrity sha512-qDimGNoukCuWvGYcsosGV2tOKbJ98RuRHLoK2j4t73TupY6rH+4QeR3tf5E3q1gZ5mtaFZloXc6aZWWOgtfwoQ==
+"@firebase/analytics@0.10.1":
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/@firebase/analytics/-/analytics-0.10.1.tgz#97d750020c5b3b41fd5191074c683a7a8c8900a5"
+  integrity sha512-5mnH1aQa99J5lZMJwTNzIoRc4yGXHf+fOn+EoEWhCDA3XGPweGHcylCbqq+G1wVJmfILL57fohDMa8ftMZ+44g==
   dependencies:
-    "@firebase/app-types" "0.6.2"
-    "@firebase/component" "0.4.0"
-    "@firebase/logger" "0.2.6"
-    "@firebase/util" "0.4.1"
-    dom-storage "2.1.0"
-    tslib "^2.1.0"
-    xmlhttprequest "1.8.0"
-
-"@firebase/auth-interop-types@0.1.5":
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/@firebase/auth-interop-types/-/auth-interop-types-0.1.5.tgz#9fc9bd7c879f16b8d1bb08373a0f48c3a8b74557"
-  integrity sha512-88h74TMQ6wXChPA6h9Q3E1Jg6TkTHep2+k63OWg3s0ozyGVMeY+TTOti7PFPzq5RhszQPQOoCi59es4MaRvgCw==
-
-"@firebase/auth-types@0.10.2":
-  version "0.10.2"
-  resolved "https://registry.yarnpkg.com/@firebase/auth-types/-/auth-types-0.10.2.tgz#3fad953380c447b7545122430a4c7a9bc8355001"
-  integrity sha512-0GMWVWh5TBCYIQfVerxzDsuvhoFpK0++O9LtP3FWkwYo7EAxp6w0cftAg/8ntU1E5Wg56Ry0b6ti/YGP6g0jlg==
-
-"@firebase/auth@0.16.4":
-  version "0.16.4"
-  resolved "https://registry.yarnpkg.com/@firebase/auth/-/auth-0.16.4.tgz#6249d80f1e974b0db122930ae9fac885eccead5c"
-  integrity sha512-zgHPK6/uL6+nAyG9zqammHTF1MQpAN7z/jVRLYkDZS4l81H08b2SzApLbRfW/fmy665xqb5MK7sVH0V1wsiCNw==
-  dependencies:
-    "@firebase/auth-types" "0.10.2"
-
-"@firebase/component@0.4.0":
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@firebase/component/-/component-0.4.0.tgz#90baa455d75160c8a5134b3e9d642df11f0ac818"
-  integrity sha512-L7kLKpW1v5qxPfIhx/VqHuVi+vr5IcnDS4zCJFb+/eYe23i6czSOWR1urAoJ4r42Dk0XB5kDt6Idojdd9BGMEA==
-  dependencies:
-    "@firebase/util" "0.4.1"
+    "@firebase/component" "0.6.5"
+    "@firebase/installations" "0.6.5"
+    "@firebase/logger" "0.4.0"
+    "@firebase/util" "1.9.4"
     tslib "^2.1.0"
 
-"@firebase/database-types@0.7.1":
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/@firebase/database-types/-/database-types-0.7.1.tgz#3505e3e8d57e94a3ce6038649a95afe0af040757"
-  integrity sha512-465ceJXSMqFFMnL2lxYx+YhYajcyk+VpGiXf9T6KNME0lKne5hYuqYr7XmS8/sTeyV0huhmTb8K1nxlA7hiPOg==
+"@firebase/app-check-compat@0.3.9":
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/@firebase/app-check-compat/-/app-check-compat-0.3.9.tgz#c67caa1cd5043fecab7f8ba1bc45ab047210ad83"
+  integrity sha512-7LxyupQ8XeEHRh72mO+tqm69kHT6KbWi2KtFMGedJ6tNbwzFzojcXESMKN8RpADXbYoQgY3loWMJjMx4r2Zt7w==
   dependencies:
-    "@firebase/app-types" "0.6.2"
-
-"@firebase/database@0.9.8":
-  version "0.9.8"
-  resolved "https://registry.yarnpkg.com/@firebase/database/-/database-0.9.8.tgz#244eb897033ecacfc4a1fa5f031cda9b5e4009e5"
-  integrity sha512-bqZUDR6jIQSQcY7oZVGmI/Bg7SfmUUW/toaZBCfaddWAnniBthaa8o0Hyv1ypPxjEZCu1CfPQwtpMhlSTjG0tA==
-  dependencies:
-    "@firebase/auth-interop-types" "0.1.5"
-    "@firebase/component" "0.4.0"
-    "@firebase/database-types" "0.7.1"
-    "@firebase/logger" "0.2.6"
-    "@firebase/util" "0.4.1"
-    faye-websocket "0.11.3"
+    "@firebase/app-check" "0.8.2"
+    "@firebase/app-check-types" "0.5.0"
+    "@firebase/component" "0.6.5"
+    "@firebase/logger" "0.4.0"
+    "@firebase/util" "1.9.4"
     tslib "^2.1.0"
 
-"@firebase/firestore-types@2.2.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@firebase/firestore-types/-/firestore-types-2.2.0.tgz#9a3f3f2906232c3b4a726d988a6ef077f35f9093"
-  integrity sha512-5kZZtQ32FIRJP1029dw+ZVNRCclKOErHv1+Xn0pw/5Fq3dxroA/ZyFHqDu+uV52AyWHhNLjCqX43ibm4YqOzRw==
+"@firebase/app-check-interop-types@0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@firebase/app-check-interop-types/-/app-check-interop-types-0.3.0.tgz#b27ea1397cb80427f729e4bbf3a562f2052955c4"
+  integrity sha512-xAxHPZPIgFXnI+vb4sbBjZcde7ZluzPPaSK7Lx3/nmuVk4TjZvnL8ONnkd4ERQKL8WePQySU+pRcWkh8rDf5Sg==
 
-"@firebase/firestore@2.2.3":
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/@firebase/firestore/-/firestore-2.2.3.tgz#e76d9191c48ef4c51ae73c2fcce7d547be2a8c17"
-  integrity sha512-efJxJahP9936QlIHeATvatCO4c3UEk6nz7pc812xxkgTVezkg8K66IDUe0fncV70zbDrIyxUIl8yRcxhXytiGw==
-  dependencies:
-    "@firebase/component" "0.4.0"
-    "@firebase/firestore-types" "2.2.0"
-    "@firebase/logger" "0.2.6"
-    "@firebase/util" "0.4.1"
-    "@firebase/webchannel-wrapper" "0.4.1"
-    "@grpc/grpc-js" "^1.0.0"
-    "@grpc/proto-loader" "^0.5.0"
-    node-fetch "2.6.1"
-    tslib "^2.1.0"
-
-"@firebase/functions-types@0.4.0":
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@firebase/functions-types/-/functions-types-0.4.0.tgz#0b789f4fe9a9c0b987606c4da10139345b40f6b9"
-  integrity sha512-3KElyO3887HNxtxNF1ytGFrNmqD+hheqjwmT3sI09FaDCuaxGbOnsXAXH2eQ049XRXw9YQpHMgYws/aUNgXVyQ==
-
-"@firebase/functions@0.6.6":
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/@firebase/functions/-/functions-0.6.6.tgz#06b786e68b269a615fc83598d99cda7b11ec740e"
-  integrity sha512-cvZiqcL3X7+6ObkwcRUV54iFHaVxVgio2t610p2qwjzMxyYfiHWDA+GwKPioObDWqyXmNtkU8cw2WLoGf46cnA==
-  dependencies:
-    "@firebase/component" "0.4.0"
-    "@firebase/functions-types" "0.4.0"
-    "@firebase/messaging-types" "0.5.0"
-    node-fetch "2.6.1"
-    tslib "^2.1.0"
-
-"@firebase/installations-types@0.3.4":
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/@firebase/installations-types/-/installations-types-0.3.4.tgz#589a941d713f4f64bf9f4feb7f463505bab1afa2"
-  integrity sha512-RfePJFovmdIXb6rYwtngyxuEcWnOrzdZd9m7xAW0gRxDIjBT20n3BOhjpmgRWXo/DAxRmS7bRjWAyTHY9cqN7Q==
-
-"@firebase/installations@0.4.24":
-  version "0.4.24"
-  resolved "https://registry.yarnpkg.com/@firebase/installations/-/installations-0.4.24.tgz#acaf3d48c156f3a3a5ddb53e8e8c63a89fce2f55"
-  integrity sha512-cMWI3IfnmdJ4SzPav56yaHwEhpPPl5b03AVtv7AeKnmDZ61eBqPzEnYSL8Iso73/FeKpr8BYcZelAx0EyxcJ3Q==
-  dependencies:
-    "@firebase/component" "0.4.0"
-    "@firebase/installations-types" "0.3.4"
-    "@firebase/util" "0.4.1"
-    idb "3.0.2"
-    tslib "^2.1.0"
-
-"@firebase/logger@0.2.6":
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/@firebase/logger/-/logger-0.2.6.tgz#3aa2ca4fe10327cabf7808bd3994e88db26d7989"
-  integrity sha512-KIxcUvW/cRGWlzK9Vd2KB864HlUnCfdTH0taHE0sXW5Xl7+W68suaeau1oKNEqmc3l45azkd4NzXTCWZRZdXrw==
-
-"@firebase/messaging-types@0.5.0":
+"@firebase/app-check-types@0.5.0":
   version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@firebase/messaging-types/-/messaging-types-0.5.0.tgz#c5d0ef309ced1758fda93ef3ac70a786de2e73c4"
-  integrity sha512-QaaBswrU6umJYb/ZYvjR5JDSslCGOH6D9P136PhabFAHLTR4TWjsaACvbBXuvwrfCXu10DtcjMxqfhdNIB1Xfg==
+  resolved "https://registry.yarnpkg.com/@firebase/app-check-types/-/app-check-types-0.5.0.tgz#1b02826213d7ce6a1cf773c329b46ea1c67064f4"
+  integrity sha512-uwSUj32Mlubybw7tedRzR24RP8M8JUVR3NPiMk3/Z4bCmgEKTlQBwMXrehDAZ2wF+TsBq0SN1c6ema71U/JPyQ==
 
-"@firebase/messaging@0.7.8":
-  version "0.7.8"
-  resolved "https://registry.yarnpkg.com/@firebase/messaging/-/messaging-0.7.8.tgz#90119a2f1cd5055fd61206732024e0281de80616"
-  integrity sha512-rXYvVQPZd+rCMV7+/FgpvsHad0HuEhoyH5OQgYxeBgSsgFn6mOyvAtYcoCFjPTvTV5eyGH1I4hQtNOyY8zVzzg==
+"@firebase/app-check@0.8.2":
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/@firebase/app-check/-/app-check-0.8.2.tgz#9ede3558cc7dc1ac8206a772ba692e67daf7e65e"
+  integrity sha512-A2B5+ldOguYAeqW1quFN5qNdruSNRrg4W59ag1Eq6QzxuHNIkrE+TrapfrW/z5NYFjCxAYqr/unVCgmk80Dwcg==
   dependencies:
-    "@firebase/component" "0.4.0"
-    "@firebase/installations" "0.4.24"
-    "@firebase/messaging-types" "0.5.0"
-    "@firebase/util" "0.4.1"
-    idb "3.0.2"
+    "@firebase/component" "0.6.5"
+    "@firebase/logger" "0.4.0"
+    "@firebase/util" "1.9.4"
     tslib "^2.1.0"
 
-"@firebase/performance-types@0.0.13":
-  version "0.0.13"
-  resolved "https://registry.yarnpkg.com/@firebase/performance-types/-/performance-types-0.0.13.tgz#58ce5453f57e34b18186f74ef11550dfc558ede6"
-  integrity sha512-6fZfIGjQpwo9S5OzMpPyqgYAUZcFzZxHFqOyNtorDIgNXq33nlldTL/vtaUZA8iT9TT5cJlCrF/jthKU7X21EA==
-
-"@firebase/performance@0.4.10":
-  version "0.4.10"
-  resolved "https://registry.yarnpkg.com/@firebase/performance/-/performance-0.4.10.tgz#c78ed1c15c26884eae23edf1498e930bb729b51f"
-  integrity sha512-gyAOd9Z/GVlLE5V8U5pVQDZpjr4Msdx5yJr7oQE/xkh6dNZGuYp5qJh1pAmJs2ZI8eMTs+j2bXJEMYk6w7ehRg==
+"@firebase/app-compat@0.2.29":
+  version "0.2.29"
+  resolved "https://registry.yarnpkg.com/@firebase/app-compat/-/app-compat-0.2.29.tgz#d55a5800acaebc0a1a0ea33d548bb80dc711ec93"
+  integrity sha512-NqUdegXJfwphx9i/2bOE2CTZ55TC9bbDg+iwkxVShsPBJhD3CzQJkFhoDz4ccfbJaKZGsqjY3fisgX5kbDROnA==
   dependencies:
-    "@firebase/component" "0.4.0"
-    "@firebase/installations" "0.4.24"
-    "@firebase/logger" "0.2.6"
-    "@firebase/performance-types" "0.0.13"
-    "@firebase/util" "0.4.1"
+    "@firebase/app" "0.9.29"
+    "@firebase/component" "0.6.5"
+    "@firebase/logger" "0.4.0"
+    "@firebase/util" "1.9.4"
     tslib "^2.1.0"
 
-"@firebase/polyfill@0.3.36":
-  version "0.3.36"
-  resolved "https://registry.yarnpkg.com/@firebase/polyfill/-/polyfill-0.3.36.tgz#c057cce6748170f36966b555749472b25efdb145"
-  integrity sha512-zMM9oSJgY6cT2jx3Ce9LYqb0eIpDE52meIzd/oe/y70F+v9u1LDqk5kUF5mf16zovGBWMNFmgzlsh6Wj0OsFtg==
-  dependencies:
-    core-js "3.6.5"
-    promise-polyfill "8.1.3"
-    whatwg-fetch "2.0.4"
+"@firebase/app-types@0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@firebase/app-types/-/app-types-0.9.0.tgz#35b5c568341e9e263b29b3d2ba0e9cfc9ec7f01e"
+  integrity sha512-AeweANOIo0Mb8GiYm3xhTEBVCmPwTYAu9Hcd2qSkLuga/6+j9b1Jskl5bpiSQWy9eJ/j5pavxj6eYogmnuzm+Q==
 
-"@firebase/remote-config-types@0.1.9":
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/@firebase/remote-config-types/-/remote-config-types-0.1.9.tgz#fe6bbe4d08f3b6e92fce30e4b7a9f4d6a96d6965"
-  integrity sha512-G96qnF3RYGbZsTRut7NBX0sxyczxt1uyCgXQuH/eAfUCngxjEGcZQnBdy6mvSdqdJh5mC31rWPO4v9/s7HwtzA==
-
-"@firebase/remote-config@0.1.35":
-  version "0.1.35"
-  resolved "https://registry.yarnpkg.com/@firebase/remote-config/-/remote-config-0.1.35.tgz#792b6d9e2d8e5db0a883ee53579629c2412ae1f5"
-  integrity sha512-szhu48LTyb46S33hUR3sC4kiykEoc+B5M7HWWHhjp7Ne+524G8pH/9+/r9ZA8eVj48c5cihXyQKQ/6yCQotnUA==
+"@firebase/app@0.9.29":
+  version "0.9.29"
+  resolved "https://registry.yarnpkg.com/@firebase/app/-/app-0.9.29.tgz#444280f0ddf1da4b2a974c86a6a8c6405d950fb7"
+  integrity sha512-HbKTjfmILklasIu/ij6zKnFf3SgLYXkBDVN7leJfVGmohl+zA7Ig+eXM1ZkT1pyBJ8FTYR+mlOJer/lNEnUCtw==
   dependencies:
-    "@firebase/component" "0.4.0"
-    "@firebase/installations" "0.4.24"
-    "@firebase/logger" "0.2.6"
-    "@firebase/remote-config-types" "0.1.9"
-    "@firebase/util" "0.4.1"
+    "@firebase/component" "0.6.5"
+    "@firebase/logger" "0.4.0"
+    "@firebase/util" "1.9.4"
+    idb "7.1.1"
     tslib "^2.1.0"
 
-"@firebase/storage-types@0.3.13":
-  version "0.3.13"
-  resolved "https://registry.yarnpkg.com/@firebase/storage-types/-/storage-types-0.3.13.tgz#cd43e939a2ab5742e109eb639a313673a48b5458"
-  integrity sha512-pL7b8d5kMNCCL0w9hF7pr16POyKkb3imOW7w0qYrhBnbyJTdVxMWZhb0HxCFyQWC0w3EiIFFmxoz8NTFZDEFog==
-
-"@firebase/storage@0.4.7":
-  version "0.4.7"
-  resolved "https://registry.yarnpkg.com/@firebase/storage/-/storage-0.4.7.tgz#541a2d96af6da9c345b190858345c1106650fce0"
-  integrity sha512-5DFb+VncNBomPzpzYqJzzJjfiZhOWg0FHTBkw90K9OdE2wUfKqzhhbIAjyaXcu+2YLB2hjft8BKbjQfV5BDFnw==
+"@firebase/auth-compat@0.5.4":
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/@firebase/auth-compat/-/auth-compat-0.5.4.tgz#a7ae705e5f85e786f280bae87fe06bda2d686d05"
+  integrity sha512-EtRVW9s0YsuJv3GnOGDoLUW3Pp9f3HcqWA2WK92E30Qa0FEVRwCSRLVQwn9td+SLVY3AP9gi/auC1q3osd4yCg==
   dependencies:
-    "@firebase/component" "0.4.0"
-    "@firebase/storage-types" "0.3.13"
-    "@firebase/util" "0.4.1"
+    "@firebase/auth" "1.6.2"
+    "@firebase/auth-types" "0.12.0"
+    "@firebase/component" "0.6.5"
+    "@firebase/util" "1.9.4"
+    tslib "^2.1.0"
+    undici "5.28.3"
+
+"@firebase/auth-interop-types@0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@firebase/auth-interop-types/-/auth-interop-types-0.2.1.tgz#78884f24fa539e34a06c03612c75f222fcc33742"
+  integrity sha512-VOaGzKp65MY6P5FI84TfYKBXEPi6LmOCSMMzys6o2BN2LOsqy7pCuZCup7NYnfbk5OkkQKzvIfHOzTm0UDpkyg==
+
+"@firebase/auth-types@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@firebase/auth-types/-/auth-types-0.12.0.tgz#f28e1b68ac3b208ad02a15854c585be6da3e8e79"
+  integrity sha512-pPwaZt+SPOshK8xNoiQlK5XIrS97kFYc3Rc7xmy373QsOJ9MmqXxLaYssP5Kcds4wd2qK//amx/c+A8O2fVeZA==
+
+"@firebase/auth@1.6.2":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@firebase/auth/-/auth-1.6.2.tgz#d8a9a622b8d4e8eb8c42ea544fcf647d0494651c"
+  integrity sha512-BFo/Nj1AAbKLbFiUyXCcnT/bSqMJicFOgdTAKzlXvCul7+eUE29vWmzd1g59O3iKAxvv3+fbQYjQVJpNTTHIyw==
+  dependencies:
+    "@firebase/component" "0.6.5"
+    "@firebase/logger" "0.4.0"
+    "@firebase/util" "1.9.4"
+    tslib "^2.1.0"
+    undici "5.28.3"
+
+"@firebase/component@0.6.5":
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/@firebase/component/-/component-0.6.5.tgz#8cc7334f2081d700f2769caaa8dae3ac4c1fe37e"
+  integrity sha512-2tVDk1ixi12sbDmmfITK8lxSjmcb73BMF6Qwc3U44hN/J1Fi1QY/Hnnb6klFlbB9/G16a3J3d4nXykye2EADTw==
+  dependencies:
+    "@firebase/util" "1.9.4"
     tslib "^2.1.0"
 
-"@firebase/util@0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@firebase/util/-/util-0.4.1.tgz#fe76cf0238901dc5455b341cf02e298e7bf68df4"
-  integrity sha512-XhYCOwq4AH+YeQBEnDQvigz50WiiBU4LnJh2+//VMt4J2Ybsk0eTgUHNngUzXsmp80EJrwal3ItODg55q1ajWg==
+"@firebase/database-compat@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@firebase/database-compat/-/database-compat-1.0.3.tgz#f7a255af6208d2d4d7af10ec2c9ecd9af4ff52d5"
+  integrity sha512-7tHEOcMbK5jJzHWyphPux4osogH/adWwncxdMxdBpB9g1DNIyY4dcz1oJdlkXGM/i/AjUBesZsd5CuwTRTBNTw==
+  dependencies:
+    "@firebase/component" "0.6.5"
+    "@firebase/database" "1.0.3"
+    "@firebase/database-types" "1.0.1"
+    "@firebase/logger" "0.4.0"
+    "@firebase/util" "1.9.4"
+    tslib "^2.1.0"
+
+"@firebase/database-types@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@firebase/database-types/-/database-types-1.0.1.tgz#1e7cd9fec03f6ca772c019d839cc72d9b2eda63c"
+  integrity sha512-Tmcmx5XgiI7UVF/4oGg2P3AOTfq3WKEPsm2yf+uXtN7uG/a4WTWhVMrXGYRY2ZUL1xPxv9V33wQRJ+CcrUhVXw==
+  dependencies:
+    "@firebase/app-types" "0.9.0"
+    "@firebase/util" "1.9.4"
+
+"@firebase/database@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@firebase/database/-/database-1.0.3.tgz#88caee93188d28aca355236e9ad69f373f628804"
+  integrity sha512-9fjqLt9JzL46gw9+NRqsgQEMjgRwfd8XtzcKqG+UYyhVeFCdVRQ0Wp6Dw/dvYHnbH5vNEKzNv36dcB4p+PIAAA==
+  dependencies:
+    "@firebase/app-check-interop-types" "0.3.0"
+    "@firebase/auth-interop-types" "0.2.1"
+    "@firebase/component" "0.6.5"
+    "@firebase/logger" "0.4.0"
+    "@firebase/util" "1.9.4"
+    faye-websocket "0.11.4"
+    tslib "^2.1.0"
+
+"@firebase/firestore-compat@0.3.27":
+  version "0.3.27"
+  resolved "https://registry.yarnpkg.com/@firebase/firestore-compat/-/firestore-compat-0.3.27.tgz#146024bf772f1b6aa65a7b9e17979d59c2fb5fe0"
+  integrity sha512-gY2q0fCDJvPg/IurZQbBM7MIVjxA1/LsvfgFOubUTrex5KTY9qm4/2V2R79eAs8Q+b4B8soDtlEjk6L8BW1Crw==
+  dependencies:
+    "@firebase/component" "0.6.5"
+    "@firebase/firestore" "4.5.0"
+    "@firebase/firestore-types" "3.0.0"
+    "@firebase/util" "1.9.4"
+    tslib "^2.1.0"
+
+"@firebase/firestore-types@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@firebase/firestore-types/-/firestore-types-3.0.0.tgz#f3440d5a1cc2a722d361b24cefb62ca8b3577af3"
+  integrity sha512-Meg4cIezHo9zLamw0ymFYBD4SMjLb+ZXIbuN7T7ddXN6MGoICmOTq3/ltdCGoDCS2u+H1XJs2u/cYp75jsX9Qw==
+
+"@firebase/firestore@4.5.0":
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/@firebase/firestore/-/firestore-4.5.0.tgz#f614495970d897b146c5d6cec17c213db0528497"
+  integrity sha512-rXS6v4HbsN6vZQlq2fLW1ZHb+J5SnS+8Zqb/McbKFIrGYjPUZo5CyO75mkgtlR1tCYAwCebaqoEWb6JHgZv/ww==
+  dependencies:
+    "@firebase/component" "0.6.5"
+    "@firebase/logger" "0.4.0"
+    "@firebase/util" "1.9.4"
+    "@firebase/webchannel-wrapper" "0.10.5"
+    "@grpc/grpc-js" "~1.9.0"
+    "@grpc/proto-loader" "^0.7.8"
+    tslib "^2.1.0"
+    undici "5.28.3"
+
+"@firebase/functions-compat@0.3.8":
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/@firebase/functions-compat/-/functions-compat-0.3.8.tgz#a83a7ad2788db48483ccc86a80a12f0d824133da"
+  integrity sha512-VDHSw6UOu8RxfgAY/q8e+Jn+9Fh60Fc28yck0yfMsi2e0BiWgonIMWkFspFGGLgOJebTHl+hc+9v91rhzU6xlg==
+  dependencies:
+    "@firebase/component" "0.6.5"
+    "@firebase/functions" "0.11.2"
+    "@firebase/functions-types" "0.6.0"
+    "@firebase/util" "1.9.4"
+    tslib "^2.1.0"
+
+"@firebase/functions-types@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@firebase/functions-types/-/functions-types-0.6.0.tgz#ccd7000dc6fc668f5acb4e6a6a042a877a555ef2"
+  integrity sha512-hfEw5VJtgWXIRf92ImLkgENqpL6IWpYaXVYiRkFY1jJ9+6tIhWM7IzzwbevwIIud/jaxKVdRzD7QBWfPmkwCYw==
+
+"@firebase/functions@0.11.2":
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/@firebase/functions/-/functions-0.11.2.tgz#bcd10d7e7fa3cd185a6c3efe1776731b0222c14d"
+  integrity sha512-2NULTYOZbu0rXczwfYdqQH0w1FmmYrKjTy1YPQSHLCAkMBdfewoKmVm4Lyo2vRn0H9ZndciLY7NszKDFt9MKCQ==
+  dependencies:
+    "@firebase/app-check-interop-types" "0.3.0"
+    "@firebase/auth-interop-types" "0.2.1"
+    "@firebase/component" "0.6.5"
+    "@firebase/messaging-interop-types" "0.2.0"
+    "@firebase/util" "1.9.4"
+    tslib "^2.1.0"
+    undici "5.28.3"
+
+"@firebase/installations-compat@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@firebase/installations-compat/-/installations-compat-0.2.5.tgz#e23ff86dc5a4b856f5f3d3abafeda7362daa38c5"
+  integrity sha512-usvoIaog5CHEw082HXLrKAZ1qd4hIC3N/LDe2NqBgI3pkGE/7auLVM4Gn5gvyryp0x8z/IP1+d9fkGUj2OaGLQ==
+  dependencies:
+    "@firebase/component" "0.6.5"
+    "@firebase/installations" "0.6.5"
+    "@firebase/installations-types" "0.5.0"
+    "@firebase/util" "1.9.4"
+    tslib "^2.1.0"
+
+"@firebase/installations-types@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@firebase/installations-types/-/installations-types-0.5.0.tgz#2adad64755cd33648519b573ec7ec30f21fb5354"
+  integrity sha512-9DP+RGfzoI2jH7gY4SlzqvZ+hr7gYzPODrbzVD82Y12kScZ6ZpRg/i3j6rleto8vTFC8n6Len4560FnV1w2IRg==
+
+"@firebase/installations@0.6.5":
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/@firebase/installations/-/installations-0.6.5.tgz#1d6e0a581747bfaca54f11bf722e1f3da00dcc9c"
+  integrity sha512-0xxnQWw8rSRzu0ZOCkZaO+MJ0LkDAfwwTB2Z1SxRK6FAz5xkxD1ZUwM0WbCRni49PKubCrZYOJ6yg7tSjU7AKA==
+  dependencies:
+    "@firebase/component" "0.6.5"
+    "@firebase/util" "1.9.4"
+    idb "7.1.1"
+    tslib "^2.1.0"
+
+"@firebase/logger@0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@firebase/logger/-/logger-0.4.0.tgz#15ecc03c452525f9d47318ad9491b81d1810f113"
+  integrity sha512-eRKSeykumZ5+cJPdxxJRgAC3G5NknY2GwEbKfymdnXtnT0Ucm4pspfR6GT4MUQEDuJwRVbVcSx85kgJulMoFFA==
   dependencies:
     tslib "^2.1.0"
 
-"@firebase/webchannel-wrapper@0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.4.1.tgz#600f2275ff54739ad5ac0102f1467b8963cd5f71"
-  integrity sha512-0yPjzuzGMkW1GkrC8yWsiN7vt1OzkMIi9HgxRmKREZl2wnNPOKo/yScTjXf/O57HM8dltqxPF6jlNLFVtc2qdw==
+"@firebase/messaging-compat@0.2.6":
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/@firebase/messaging-compat/-/messaging-compat-0.2.6.tgz#ea89934bff5f048576dc1c4ce87e0c4c2141829b"
+  integrity sha512-Q2xC1s4L7Vpss7P7Gy6GuIS+xmJrf/vm9+gX76IK1Bo1TjoKwleCLHt1LHkPz5Rvqg5pTgzzI8qqPhBpZosFCg==
+  dependencies:
+    "@firebase/component" "0.6.5"
+    "@firebase/messaging" "0.12.6"
+    "@firebase/util" "1.9.4"
+    tslib "^2.1.0"
+
+"@firebase/messaging-interop-types@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@firebase/messaging-interop-types/-/messaging-interop-types-0.2.0.tgz#6056f8904a696bf0f7fdcf5f2ca8f008e8f6b064"
+  integrity sha512-ujA8dcRuVeBixGR9CtegfpU4YmZf3Lt7QYkcj693FFannwNuZgfAYaTmbJ40dtjB81SAu6tbFPL9YLNT15KmOQ==
+
+"@firebase/messaging@0.12.6":
+  version "0.12.6"
+  resolved "https://registry.yarnpkg.com/@firebase/messaging/-/messaging-0.12.6.tgz#ac7c59ed39a89e00990e3b6dfd7929e13dd77563"
+  integrity sha512-IORsPp9IPWq4j4yEhTOZ6GAGi3gQwGc+4yexmTAlya+qeBRSdRnJg2iIU/aj+tcKDQYr9RQuQPgHHOdFIx//vA==
+  dependencies:
+    "@firebase/component" "0.6.5"
+    "@firebase/installations" "0.6.5"
+    "@firebase/messaging-interop-types" "0.2.0"
+    "@firebase/util" "1.9.4"
+    idb "7.1.1"
+    tslib "^2.1.0"
+
+"@firebase/performance-compat@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@firebase/performance-compat/-/performance-compat-0.2.5.tgz#9b827b1801fca19d8c379792326c076877ac5b91"
+  integrity sha512-jJwJkVyDcIMBaVGrZ6CRGs4m5FCZsWB5QCWYI3FdsHyIa9/TfteNDilxj9wGciF2naFIHDW7TgE69U5dAH9Ktg==
+  dependencies:
+    "@firebase/component" "0.6.5"
+    "@firebase/logger" "0.4.0"
+    "@firebase/performance" "0.6.5"
+    "@firebase/performance-types" "0.2.0"
+    "@firebase/util" "1.9.4"
+    tslib "^2.1.0"
+
+"@firebase/performance-types@0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@firebase/performance-types/-/performance-types-0.2.0.tgz#400685f7a3455970817136d9b48ce07a4b9562ff"
+  integrity sha512-kYrbr8e/CYr1KLrLYZZt2noNnf+pRwDq2KK9Au9jHrBMnb0/C9X9yWSXmZkFt4UIdsQknBq8uBB7fsybZdOBTA==
+
+"@firebase/performance@0.6.5":
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/@firebase/performance/-/performance-0.6.5.tgz#5255fb18329719bc1fb2db29262e5ec15cbace06"
+  integrity sha512-OzAGcWhOqEFH9GdwUuY0oC5FSlnMejcnmSAhR+EjpI7exdDvixyLyCR4txjSHYNTbumrFBG+EP8GO11CNXRaJA==
+  dependencies:
+    "@firebase/component" "0.6.5"
+    "@firebase/installations" "0.6.5"
+    "@firebase/logger" "0.4.0"
+    "@firebase/util" "1.9.4"
+    tslib "^2.1.0"
+
+"@firebase/remote-config-compat@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@firebase/remote-config-compat/-/remote-config-compat-0.2.5.tgz#b6850a45567db5372778668c796a8d49723413f3"
+  integrity sha512-ImkNnLuGrD/bylBHDJigSY6LMwRrwt37wQbsGZhWG4QQ6KLzHzSf0nnFRRFvkOZodEUE57Ib8l74d6Yn/6TDUQ==
+  dependencies:
+    "@firebase/component" "0.6.5"
+    "@firebase/logger" "0.4.0"
+    "@firebase/remote-config" "0.4.5"
+    "@firebase/remote-config-types" "0.3.0"
+    "@firebase/util" "1.9.4"
+    tslib "^2.1.0"
+
+"@firebase/remote-config-types@0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@firebase/remote-config-types/-/remote-config-types-0.3.0.tgz#689900dcdb3e5c059e8499b29db393e4e51314b4"
+  integrity sha512-RtEH4vdcbXZuZWRZbIRmQVBNsE7VDQpet2qFvq6vwKLBIQRQR5Kh58M4ok3A3US8Sr3rubYnaGqZSurCwI8uMA==
+
+"@firebase/remote-config@0.4.5":
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/@firebase/remote-config/-/remote-config-0.4.5.tgz#1aae1a4639bb0dddc14671c10dcd92c8a83c58c1"
+  integrity sha512-rGLqc/4OmxrS39RA9kgwa6JmgWytQuMo+B8pFhmGp3d++x2Hf9j+MLQfhOLyyUo64fNw20J19mLXhrXvKHsjZQ==
+  dependencies:
+    "@firebase/component" "0.6.5"
+    "@firebase/installations" "0.6.5"
+    "@firebase/logger" "0.4.0"
+    "@firebase/util" "1.9.4"
+    tslib "^2.1.0"
+
+"@firebase/storage-compat@0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@firebase/storage-compat/-/storage-compat-0.3.5.tgz#4c55531dc5aa7d8b5f6c1ed4b5eeee09190072f1"
+  integrity sha512-5dJXfY5NxCF5NAk4dLvJqC+m6cgcf0Fr29nrMHwhwI34pBheQq2PdRZqALsqZCES9dnHTuFNlqGQDpLr+Ph4rw==
+  dependencies:
+    "@firebase/component" "0.6.5"
+    "@firebase/storage" "0.12.2"
+    "@firebase/storage-types" "0.8.0"
+    "@firebase/util" "1.9.4"
+    tslib "^2.1.0"
+
+"@firebase/storage-types@0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@firebase/storage-types/-/storage-types-0.8.0.tgz#f1e40a5361d59240b6e84fac7fbbbb622bfaf707"
+  integrity sha512-isRHcGrTs9kITJC0AVehHfpraWFui39MPaU7Eo8QfWlqW7YPymBmRgjDrlOgFdURh6Cdeg07zmkLP5tzTKRSpg==
+
+"@firebase/storage@0.12.2":
+  version "0.12.2"
+  resolved "https://registry.yarnpkg.com/@firebase/storage/-/storage-0.12.2.tgz#73b1679fca74ec21a0f183beaa1b0b1a50f7e68b"
+  integrity sha512-MzanOBcxDx9oOwDaDPMuiYxd6CxcN1xZm+os5uNE3C1itbRKLhM9rzpODDKWzcbnHHFtXk3Q3lsK/d3Xa1WYYw==
+  dependencies:
+    "@firebase/component" "0.6.5"
+    "@firebase/util" "1.9.4"
+    tslib "^2.1.0"
+    undici "5.28.3"
+
+"@firebase/util@1.9.4":
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/@firebase/util/-/util-1.9.4.tgz#68eee380ab7e7828ec0d8684c46a1abed2d7e334"
+  integrity sha512-WLonYmS1FGHT97TsUmRN3qnTh5TeeoJp1Gg5fithzuAgdZOUtsYECfy7/noQ3llaguios8r5BuXSEiK82+UrxQ==
+  dependencies:
+    tslib "^2.1.0"
+
+"@firebase/webchannel-wrapper@0.10.5":
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.10.5.tgz#cd9897680d0a2f1bce8d8c23a590e5874f4617c5"
+  integrity sha512-eSkJsnhBWv5kCTSU1tSUVl9mpFu+5NXXunZc83le8GMjMlsWwQArSc7cJJ4yl+aDFY0NGLi0AjZWMn1axOrkRg==
 
 "@floating-ui/core@^0.7.3":
   version "0.7.3"
@@ -2159,23 +2313,15 @@
     "@floating-ui/dom" "^0.5.3"
     use-isomorphic-layout-effect "^1.1.1"
 
-"@grpc/grpc-js@^1.0.0":
-  version "1.10.8"
-  resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.10.8.tgz#99787785cd8335be861afd1cd485ae9f058e4484"
-  integrity sha512-vYVqYzHicDqyKB+NQhAc54I1QWCBLCrYG6unqOIcBTHx+7x8C9lcoLj3KVJXs2VB4lUbpWY+Kk9NipcbXYWmvg==
+"@grpc/grpc-js@~1.9.0":
+  version "1.9.15"
+  resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.9.15.tgz#433d7ac19b1754af690ea650ab72190bd700739b"
+  integrity sha512-nqE7Hc0AzI+euzUwDAy0aY5hCp10r734gMGRdU+qOPX0XSceI2ULrcXB5U2xSc5VkWwalCj4M7GzCAygZl2KoQ==
   dependencies:
-    "@grpc/proto-loader" "^0.7.13"
-    "@js-sdsl/ordered-map" "^4.4.2"
+    "@grpc/proto-loader" "^0.7.8"
+    "@types/node" ">=12.12.47"
 
-"@grpc/proto-loader@^0.5.0":
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/@grpc/proto-loader/-/proto-loader-0.5.6.tgz#1dea4b8a6412b05e2d58514d507137b63a52a98d"
-  integrity sha512-DT14xgw3PSzPxwS13auTEwxhMMOoz33DPUKNtmYK/QYbBSpLXJy78FGGs5yVoxVobEqPm4iW9MOIoz0A3bLTRQ==
-  dependencies:
-    lodash.camelcase "^4.3.0"
-    protobufjs "^6.8.6"
-
-"@grpc/proto-loader@^0.7.13":
+"@grpc/proto-loader@^0.7.8":
   version "0.7.13"
   resolved "https://registry.yarnpkg.com/@grpc/proto-loader/-/proto-loader-0.7.13.tgz#f6a44b2b7c9f7b609f5748c6eac2d420e37670cf"
   integrity sha512-AiXO/bfe9bmxBjxxtYxFAXGZvMaN5s8kO+jBHAJCON8rJoB5YS/D6X7ZNc6XQkuHNmyl4CYaMI1fJ/Gn27RGGw==
@@ -2287,11 +2433,6 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@js-sdsl/ordered-map@^4.4.2":
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/@js-sdsl/ordered-map/-/ordered-map-4.4.2.tgz#9299f82874bab9e4c7f9c48d865becbfe8d6907c"
-  integrity sha512-iUKgm52T8HOE/makSxjqoWhe95ZJA1/G1sYsGev2JDKUSS14KAgg1LHb+Ba+IPow0xflbnSkOsZcO08C7w1gYw==
-
 "@next/env@14.1.4":
   version "14.1.4"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-14.1.4.tgz#432e80651733fbd67230bf262aee28be65252674"
@@ -3068,6 +3209,11 @@
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+"@tldraw/vec@1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@tldraw/vec/-/vec-1.7.1.tgz#5bfac9a56e11ad890cbd1c620293d7fcb23bf1ea"
+  integrity sha512-qM6Z9RvkLFFEzr91mmsA4HI14msyDgDDOu36csIzG5BYu2bFmEz5siQ8WntHgDtUjzJHP+VSSOTbAXhklEZHLA==
+
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
@@ -3195,11 +3341,6 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.4.tgz#0303b64958ee070059e3a7184048a55159fe20b7"
   integrity sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ==
 
-"@types/long@^4.0.1":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.2.tgz#b74129719fc8d11c01868010082d483b7545591a"
-  integrity sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==
-
 "@types/mdast@^3.0.0":
   version "3.0.15"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.15.tgz#49c524a263f30ffa28b71ae282f813ed000ab9f5"
@@ -3219,6 +3360,13 @@
   dependencies:
     undici-types "~5.26.4"
 
+"@types/node@>=12.12.47":
+  version "22.9.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.9.0.tgz#b7f16e5c3384788542c72dc3d561a7ceae2c0365"
+  integrity sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==
+  dependencies:
+    undici-types "~6.19.8"
+
 "@types/pako@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@types/pako/-/pako-1.0.3.tgz#2e61c2b02020b5f44e2e5e946dfac74f4ec33c58"
@@ -4746,11 +4894,6 @@ core-js-compat@^3.31.0, core-js-compat@^3.36.1:
   dependencies:
     browserslist "^4.23.0"
 
-core-js@3.6.5:
-  version "3.6.5"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
-  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
-
 core-js@^2.4.0:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
@@ -4814,9 +4957,9 @@ cross-fetch@3.1.5:
     node-fetch "2.6.7"
 
 cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
-  version "7.0.6"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
-  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
   dependencies:
     path-key "^3.1.0"
     shebang-command "^2.0.0"
@@ -5392,11 +5535,6 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
-dom-storage@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/dom-storage/-/dom-storage-2.1.0.tgz#00fb868bc9201357ea243c7bcfd3304c1e34ea39"
-  integrity sha512-g6RpyWXzl0RR6OTElHKBl7nwnK87GUyZMYC7JWsB/IA73vpqK2K6LT39x4VepLxlSsWBFrPVLnsSR5Jyty0+2Q==
-
 domelementtype@^2.0.1, domelementtype@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
@@ -5423,10 +5561,10 @@ domhandler@^4.2.0, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
-"dompurify@^3.0.5 <3.1.7":
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.6.tgz#43c714a94c6a7b8801850f82e756685300a027e2"
-  integrity sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==
+dompurify@^3.0.5:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.4.tgz#42121304b2b3a6bae22f80131ff8a8f3f3c56be2"
+  integrity sha512-2gnshi6OshmuKil8rMZuQCGiUF3cUxHY3NGDzUAdUx/NPEe5DVnO8BDoAQouvgwnx0R/+a6jUn36Z0FSdq8vww==
 
 domutils@^2.8.0:
   version "2.8.0"
@@ -6243,10 +6381,10 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
-faye-websocket@0.11.3:
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.3.tgz#5c0e9a8968e8912c286639fde977a8b209f2508e"
-  integrity sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==
+faye-websocket@0.11.4:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.4.tgz#7f0d9275cfdd86a1c963dc8b65fcc451edcbb1da"
+  integrity sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==
   dependencies:
     websocket-driver ">=0.5.1"
 
@@ -6313,25 +6451,37 @@ find-up@^4.0.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
-firebase@8.3.3:
-  version "8.3.3"
-  resolved "https://registry.yarnpkg.com/firebase/-/firebase-8.3.3.tgz#21d8fb8eec2c43b0d8f98ab6bda5535b7454fa54"
-  integrity sha512-eRkW7bD25aevlGwtCEsP53xBo5/Fi4wkxvfvmDW6R2/oSHjy+hVLkQILP4kQFFXgFL0LBjxIPOchXoQ5MUbTCA==
+firebase@10.9.0:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/firebase/-/firebase-10.9.0.tgz#748899beb0ed8e381864566c223c4208d2306091"
+  integrity sha512-R8rDU3mg2dq0uPOoZ5Nc3BeZTbXxBPJS8HcZLtnV0f5/YrmpNsHngzmMHRVB+91T+ViJGVL/42dV23gS9w9ccw==
   dependencies:
-    "@firebase/analytics" "0.6.8"
-    "@firebase/app" "0.6.19"
-    "@firebase/app-types" "0.6.2"
-    "@firebase/auth" "0.16.4"
-    "@firebase/database" "0.9.8"
-    "@firebase/firestore" "2.2.3"
-    "@firebase/functions" "0.6.6"
-    "@firebase/installations" "0.4.24"
-    "@firebase/messaging" "0.7.8"
-    "@firebase/performance" "0.4.10"
-    "@firebase/polyfill" "0.3.36"
-    "@firebase/remote-config" "0.1.35"
-    "@firebase/storage" "0.4.7"
-    "@firebase/util" "0.4.1"
+    "@firebase/analytics" "0.10.1"
+    "@firebase/analytics-compat" "0.2.7"
+    "@firebase/app" "0.9.29"
+    "@firebase/app-check" "0.8.2"
+    "@firebase/app-check-compat" "0.3.9"
+    "@firebase/app-compat" "0.2.29"
+    "@firebase/app-types" "0.9.0"
+    "@firebase/auth" "1.6.2"
+    "@firebase/auth-compat" "0.5.4"
+    "@firebase/database" "1.0.3"
+    "@firebase/database-compat" "1.0.3"
+    "@firebase/firestore" "4.5.0"
+    "@firebase/firestore-compat" "0.3.27"
+    "@firebase/functions" "0.11.2"
+    "@firebase/functions-compat" "0.3.8"
+    "@firebase/installations" "0.6.5"
+    "@firebase/installations-compat" "0.2.5"
+    "@firebase/messaging" "0.12.6"
+    "@firebase/messaging-compat" "0.2.6"
+    "@firebase/performance" "0.6.5"
+    "@firebase/performance-compat" "0.2.5"
+    "@firebase/remote-config" "0.4.5"
+    "@firebase/remote-config-compat" "0.2.5"
+    "@firebase/storage" "0.12.2"
+    "@firebase/storage-compat" "0.3.5"
+    "@firebase/util" "1.9.4"
 
 flat-cache@^3.0.4:
   version "3.2.0"
@@ -6826,12 +6976,7 @@ idb-keyval@6.0.3:
   dependencies:
     safari-14-idb-fix "^3.0.0"
 
-idb@3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/idb/-/idb-3.0.2.tgz#c8e9122d5ddd40f13b60ae665e4862f8b13fa384"
-  integrity sha512-+FLa/0sTXqyux0o6C+i2lOR0VoS60LU/jzUo5xjfY6+7sEEgy4Gz1O7yFBXvjd7N0NyIGWIRg8DcQSLEG+VSPw==
-
-idb@^7.0.1:
+idb@7.1.1, idb@^7.0.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/idb/-/idb-7.1.1.tgz#d910ded866d32c7ced9befc5bfdf36f572ced72b"
   integrity sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==
@@ -7672,11 +7817,6 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
-long@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
-  integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==
-
 long@^5.0.0:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"
@@ -7813,10 +7953,10 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-mermaid@10.9.3:
-  version "10.9.3"
-  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.9.3.tgz#90bc6f15c33dbe5d9507fed31592cc0d88fee9f7"
-  integrity sha512-V80X1isSEvAewIL3xhmz/rVmc27CVljcsbWxkxlWJWY/1kQa4XOABqpDl2qQLGKzpKm6WbTfUEKImBlUfFYArw==
+mermaid@10.9.0:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.9.0.tgz#4d1272fbe434bd8f3c2c150554dc8a23a9bf9361"
+  integrity sha512-swZju0hFox/B/qoLKK0rOxxgh8Cf7rJSfAUc1u8fezVihYMvrJAS45GzAxTVf4Q+xn9uMgitBcmWk7nWGXOs/g==
   dependencies:
     "@braintree/sanitize-url" "^6.0.1"
     "@types/d3-scale" "^4.0.3"
@@ -7827,7 +7967,7 @@ mermaid@10.9.3:
     d3-sankey "^0.12.3"
     dagre-d3-es "7.0.10"
     dayjs "^1.11.7"
-    dompurify "^3.0.5 <3.1.7"
+    dompurify "^3.0.5"
     elkjs "^0.9.0"
     katex "^0.16.9"
     khroma "^2.0.0"
@@ -8236,11 +8376,6 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
-node-fetch@2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
-  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
-
 node-fetch@2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
@@ -8783,11 +8918,6 @@ progress@2.0.3, progress@^2.0.0:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-promise-polyfill@8.1.3:
-  version "8.1.3"
-  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.1.3.tgz#8c99b3cf53f3a91c68226ffde7bde81d7f904116"
-  integrity sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g==
-
 prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -8797,25 +8927,6 @@ prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
-protobufjs@^6.8.6:
-  version "6.11.4"
-  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-6.11.4.tgz#29a412c38bf70d89e537b6d02d904a6f448173aa"
-  integrity sha512-5kQWPaJHi1WoCpjTGszzQ32PG2F4+wRY6BmAT4Vfw56Q2FZ4YZzK20xUYQH4YkfehY1e6QSICrJquM6xXZNcrw==
-  dependencies:
-    "@protobufjs/aspromise" "^1.1.2"
-    "@protobufjs/base64" "^1.1.2"
-    "@protobufjs/codegen" "^2.0.4"
-    "@protobufjs/eventemitter" "^1.1.0"
-    "@protobufjs/fetch" "^1.1.0"
-    "@protobufjs/float" "^1.0.2"
-    "@protobufjs/inquire" "^1.1.0"
-    "@protobufjs/path" "^1.1.2"
-    "@protobufjs/pool" "^1.1.0"
-    "@protobufjs/utf8" "^1.1.0"
-    "@types/long" "^4.0.1"
-    "@types/node" ">=13.7.0"
-    long "^4.0.0"
-
 protobufjs@^7.2.5:
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.3.0.tgz#a32ec0422c039798c41a0700306a6e305b9cb32c"
@@ -9633,7 +9744,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9651,6 +9762,15 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
+string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^5.0.0, string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -9722,7 +9842,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^3.0.0, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@6.0.1, strip-ansi@^3.0.0, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10171,6 +10298,18 @@ undici-types@~5.26.4:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
+undici-types@~6.19.8:
+  version "6.19.8"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
+
+undici@5.28.3:
+  version "5.28.3"
+  resolved "https://registry.yarnpkg.com/undici/-/undici-5.28.3.tgz#a731e0eff2c3fcfd41c1169a869062be222d1e5b"
+  integrity sha512-3ItfzbrhDlINjaP0duwnNsKpDQk3acHI3gVJ1z4fmwMK31k5G9OVIAMLSIaP6w4FaGkaAkN6zaQO9LUvZ1t7VA==
+  dependencies:
+    "@fastify/busboy" "^2.0.0"
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
@@ -10675,11 +10814,6 @@ whatwg-encoding@^2.0.0:
   dependencies:
     iconv-lite "0.6.3"
 
-whatwg-fetch@2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
-  integrity sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==
-
 whatwg-mimetype@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6ca3dc72ad6b8a4208beba7"
@@ -10959,7 +11093,7 @@ workbox-window@7.1.0, workbox-window@^7.0.0:
     "@types/trusted-types" "^2.0.2"
     workbox-core "7.1.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -10977,6 +11111,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
@@ -11026,11 +11169,6 @@ xmlhttprequest-ssl@~2.0.0:
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
   integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
 
-xmlhttprequest@1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc"
-  integrity sha512-58Im/U0mlVBLM38NdZjHyhuMtCqa61469k2YP/AaPbvCoV9aQGUpbJBj1QRm2ytRiVQBD/fsw7L2bJGDVQswBA==
-
 y18n@^5.0.5:
   version "5.0.8"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"