@excalidraw/excalidraw 0.17.1-7441-0269e5a → 0.17.1-7441-4c9a6f4

package/dist/packages/excalidraw/components/IconPicker.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Popover } from "./Popover";
+import "./IconPicker.scss";
+import { isArrowKey, KEYS } from "../keys";
+import { getLanguage } from "../i18n";
+import clsx from "clsx";
+function Picker({ options, value, label, onChange, onClose, }) {
+    const rFirstItem = React.useRef();
+    const rActiveItem = React.useRef();
+    const rGallery = React.useRef(null);
+    React.useEffect(() => {
+        // After the component is first mounted focus on first input
+        if (rActiveItem.current) {
+            rActiveItem.current.focus();
+        }
+        else if (rGallery.current) {
+            rGallery.current.focus();
+        }
+    }, []);
+    const handleKeyDown = (event) => {
+        const pressedOption = options.find((option) => option.keyBinding === event.key.toLowerCase());
+        if (!(event.metaKey || event.altKey || event.ctrlKey) && pressedOption) {
+            // Keybinding navigation
+            const index = options.indexOf(pressedOption);
+            rGallery.current.children[index].focus();
+            event.preventDefault();
+        }
+        else if (event.key === KEYS.TAB) {
+            // Tab navigation cycle through options. If the user tabs
+            // away from the picker, close the picker. We need to use
+            // a timeout here to let the stack clear before checking.
+            setTimeout(() => {
+                const active = rActiveItem.current;
+                const docActive = document.activeElement;
+                if (active !== docActive) {
+                    onClose();
+                }
+            }, 0);
+        }
+        else if (isArrowKey(event.key)) {
+            // Arrow navigation
+            const { activeElement } = document;
+            const isRTL = getLanguage().rtl;
+            const index = Array.prototype.indexOf.call(rGallery.current.children, activeElement);
+            if (index !== -1) {
+                const length = options.length;
+                let nextIndex = index;
+                switch (event.key) {
+                    // Select the next option
+                    case isRTL ? KEYS.ARROW_LEFT : KEYS.ARROW_RIGHT:
+                    case KEYS.ARROW_DOWN: {
+                        nextIndex = (index + 1) % length;
+                        break;
+                    }
+                    // Select the previous option
+                    case isRTL ? KEYS.ARROW_RIGHT : KEYS.ARROW_LEFT:
+                    case KEYS.ARROW_UP: {
+                        nextIndex = (length + index - 1) % length;
+                        break;
+                    }
+                }
+                rGallery.current.children[nextIndex].focus();
+            }
+            event.preventDefault();
+        }
+        else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
+            // Close on escape or enter
+            event.preventDefault();
+            onClose();
+        }
+        event.nativeEvent.stopImmediatePropagation();
+        event.stopPropagation();
+    };
+    return (_jsx("div", { className: `picker`, role: "dialog", "aria-modal": "true", "aria-label": label, onKeyDown: handleKeyDown, children: _jsx("div", { className: "picker-content", ref: rGallery, children: options.map((option, i) => (_jsxs("button", { className: clsx("picker-option", {
+                    active: value === option.value,
+                }), onClick: (event) => {
+                    event.currentTarget.focus();
+                    onChange(option.value);
+                }, title: `${option.text} ${option.keyBinding && `— ${option.keyBinding.toUpperCase()}`}`, "aria-label": option.text || "none", "aria-keyshortcuts": option.keyBinding || undefined, ref: (el) => {
+                    if (el && i === 0) {
+                        rFirstItem.current = el;
+                    }
+                    if (el && option.value === value) {
+                        rActiveItem.current = el;
+                    }
+                }, onFocus: () => {
+                    onChange(option.value);
+                }, children: [option.icon, option.keyBinding && (_jsx("span", { className: "picker-keybinding", children: option.keyBinding }))] }, option.text))) }) }));
+}
+export function IconPicker({ value, label, options, onChange, group = "", }) {
+    const [isActive, setActive] = React.useState(false);
+    const rPickerButton = React.useRef(null);
+    const isRTL = getLanguage().rtl;
+    return (_jsxs("div", { children: [_jsx("button", { name: group, className: isActive ? "active" : "", "aria-label": label, onClick: () => setActive(!isActive), ref: rPickerButton, children: options.find((option) => option.value === value)?.icon }), _jsx(React.Suspense, { fallback: "", children: isActive ? (_jsxs(_Fragment, { children: [_jsx(Popover, { onCloseRequest: (event) => event.target !== rPickerButton.current && setActive(false), ...(isRTL ? { right: 5.5 } : { left: -5.5 }), children: _jsx(Picker, { options: options.filter((opt) => opt.showInPicker !== false), value: value, label: label, onChange: onChange, onClose: () => {
+                                    setActive(false);
+                                    rPickerButton.current?.focus();
+                                } }) }), _jsx("div", { className: "picker-triangle" })] })) : null })] }));
+}

package/dist/packages/excalidraw/components/IconPicker.scss

@@ -0,0 +1,143 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .picker-container {
+    display: inline-block;
+    box-sizing: border-box;
+    margin-right: 0.25rem;
+  }
+
+  .picker {
+    background: var(--popup-bg-color);
+    border: 0 solid transparentize($oc-white, 0.75);
+    // ˇˇ yeah, i dunno, open to suggestions here :D
+    box-shadow: rgb(0 0 0 / 25%) 2px 2px 4px 2px;
+    border-radius: 4px;
+    position: absolute;
+  }
+
+  .picker-container button,
+  .picker button {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:focus-visible {
+      outline: transparent;
+      background-color: var(--button-gray-2);
+      & svg {
+        opacity: 1;
+      }
+    }
+
+    &:hover {
+      background-color: var(--button-gray-2);
+    }
+
+    &:active {
+      background-color: var(--button-gray-3);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    svg {
+      margin: 0;
+      width: 36px;
+      height: 18px;
+      pointer-events: none;
+    }
+  }
+
+  .picker button {
+    padding: 0.25rem 0.28rem 0.35rem 0.25rem;
+  }
+
+  .picker-triangle {
+    width: 0;
+    height: 0;
+    position: relative;
+    top: -10px;
+    :root[dir="ltr"] & {
+      left: 12px;
+    }
+
+    :root[dir="rtl"] & {
+      right: 12px;
+    }
+    z-index: 10;
+
+    &:before {
+      content: "";
+      position: absolute;
+      border-style: solid;
+      border-width: 0 9px 10px;
+      border-color: transparent transparent transparentize($oc-black, 0.9);
+      top: -1px;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      border-style: solid;
+      border-width: 0 9px 10px;
+      border-color: transparent transparent var(--popup-bg-color);
+    }
+  }
+
+  .picker-content {
+    padding: 0.5rem;
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    grid-gap: 0.5rem;
+    border-radius: 4px;
+    :root[dir="rtl"] & {
+      padding: 0.4rem;
+    }
+  }
+
+  .picker-keybinding {
+    position: absolute;
+    bottom: 2px;
+    font-size: 0.7em;
+    color: var(--keybinding-color);
+
+    :root[dir="ltr"] & {
+      right: 2px;
+    }
+
+    :root[dir="rtl"] & {
+      left: 2px;
+    }
+    @include isMobile {
+      display: none;
+    }
+  }
+
+  .picker-type-canvasBackground .picker-keybinding {
+    color: #aaa;
+  }
+
+  .picker-type-elementBackground .picker-keybinding {
+    color: $oc-white;
+  }
+
+  .picker-swatch[aria-label="transparent"] .picker-keybinding {
+    color: #aaa;
+  }
+
+  .picker-type-elementStroke .picker-keybinding {
+    color: #d4d4d4;
+  }
+
+  &.theme--dark {
+    .picker-type-elementBackground .picker-keybinding {
+      color: $oc-black;
+    }
+    .picker-swatch[aria-label="transparent"] .picker-keybinding {
+      color: $oc-black;
+    }
+  }
+}

package/dist/packages/excalidraw/components/ImageExportDialog.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { actionExportWithDarkMode, actionChangeExportBackground, actionChangeExportEmbedScene, actionChangeExportScale, actionChangeProjectName, } from "../actions/actionExport";
+import { probablySupportsClipboardBlob } from "../clipboard";
+import { DEFAULT_EXPORT_PADDING, EXPORT_IMAGE_TYPES, isFirefox, EXPORT_SCALES, } from "../constants";
+import { canvasToBlob } from "../data/blob";
+import { nativeFileSystemSupported } from "../data/filesystem";
+import { t } from "../i18n";
+import { isSomeElementSelected } from "../scene";
+import { exportToCanvas } from "../../utils/export";
+import { copyIcon, downloadIcon, helpIcon } from "./icons";
+import { Dialog } from "./Dialog";
+import { RadioGroup } from "./RadioGroup";
+import { Switch } from "./Switch";
+import { Tooltip } from "./Tooltip";
+import "./ImageExportDialog.scss";
+import { useAppProps } from "./App";
+import { FilledButton } from "./FilledButton";
+import { cloneJSON } from "../utils";
+import { prepareElementsForExport } from "../data";
+const supportsContextFilters = "filter" in document.createElement("canvas").getContext("2d");
+export const ErrorCanvasPreview = () => {
+    return (_jsxs("div", { children: [_jsx("h3", { children: t("canvasError.cannotShowPreview") }), _jsx("p", { children: _jsx("span", { children: t("canvasError.canvasTooBig") }) }), _jsxs("em", { children: ["(", t("canvasError.canvasTooBigTip"), ")"] })] }));
+};
+const ImageExportModal = ({ appStateSnapshot, elementsSnapshot, files, actionManager, onExportImage, }) => {
+    const hasSelection = isSomeElementSelected(elementsSnapshot, appStateSnapshot);
+    const appProps = useAppProps();
+    const [projectName, setProjectName] = useState(appStateSnapshot.name);
+    const [exportSelectionOnly, setExportSelectionOnly] = useState(hasSelection);
+    const [exportWithBackground, setExportWithBackground] = useState(appStateSnapshot.exportBackground);
+    const [exportDarkMode, setExportDarkMode] = useState(appStateSnapshot.exportWithDarkMode);
+    const [embedScene, setEmbedScene] = useState(appStateSnapshot.exportEmbedScene);
+    const [exportScale, setExportScale] = useState(appStateSnapshot.exportScale);
+    const previewRef = useRef(null);
+    const [renderError, setRenderError] = useState(null);
+    const { exportedElements, exportingFrame } = prepareElementsForExport(elementsSnapshot, appStateSnapshot, exportSelectionOnly);
+    useEffect(() => {
+        const previewNode = previewRef.current;
+        if (!previewNode) {
+            return;
+        }
+        const maxWidth = previewNode.offsetWidth;
+        const maxHeight = previewNode.offsetHeight;
+        if (!maxWidth) {
+            return;
+        }
+        exportToCanvas({
+            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);
+            // if converting to blob fails, there's some problem that will
+            // likely prevent preview and export (e.g. canvas too big)
+            return canvasToBlob(canvas).then(() => {
+                previewNode.replaceChildren(canvas);
+            });
+        })
+            .catch((error) => {
+            console.error(error);
+            setRenderError(error);
+        });
+    }, [
+        appStateSnapshot,
+        files,
+        exportedElements,
+        exportingFrame,
+        projectName,
+        exportWithBackground,
+        exportDarkMode,
+        exportScale,
+        embedScene,
+    ]);
+    return (_jsxs("div", { className: "ImageExportModal", children: [_jsx("h3", { children: t("imageExportDialog.header") }), _jsxs("div", { className: "ImageExportModal__preview", children: [_jsx("div", { className: "ImageExportModal__preview__canvas", ref: previewRef, children: renderError && _jsx(ErrorCanvasPreview, {}) }), _jsx("div", { className: "ImageExportModal__preview__filename", children: !nativeFileSystemSupported && (_jsx("input", { type: "text", className: "TextInput", value: projectName, style: { width: "30ch" }, disabled: typeof appProps.name !== "undefined" ||
+                                appStateSnapshot.viewModeEnabled, onChange: (event) => {
+                                setProjectName(event.target.value);
+                                actionManager.executeAction(actionChangeProjectName, "ui", event.target.value);
+                            } })) })] }), _jsxs("div", { className: "ImageExportModal__settings", children: [_jsx("h3", { children: t("imageExportDialog.header") }), hasSelection && (_jsx(ExportSetting, { label: t("imageExportDialog.label.onlySelected"), name: "exportOnlySelected", children: _jsx(Switch, { name: "exportOnlySelected", checked: exportSelectionOnly, onChange: (checked) => {
+                                setExportSelectionOnly(checked);
+                            } }) })), _jsx(ExportSetting, { label: t("imageExportDialog.label.withBackground"), name: "exportBackgroundSwitch", children: _jsx(Switch, { name: "exportBackgroundSwitch", checked: exportWithBackground, onChange: (checked) => {
+                                setExportWithBackground(checked);
+                                actionManager.executeAction(actionChangeExportBackground, "ui", checked);
+                            } }) }), supportsContextFilters && (_jsx(ExportSetting, { label: t("imageExportDialog.label.darkMode"), name: "exportDarkModeSwitch", children: _jsx(Switch, { name: "exportDarkModeSwitch", checked: exportDarkMode, onChange: (checked) => {
+                                setExportDarkMode(checked);
+                                actionManager.executeAction(actionExportWithDarkMode, "ui", checked);
+                            } }) })), _jsx(ExportSetting, { label: t("imageExportDialog.label.embedScene"), tooltip: t("imageExportDialog.tooltip.embedScene"), name: "exportEmbedSwitch", children: _jsx(Switch, { name: "exportEmbedSwitch", checked: embedScene, onChange: (checked) => {
+                                setEmbedScene(checked);
+                                actionManager.executeAction(actionChangeExportEmbedScene, "ui", checked);
+                            } }) }), _jsx(ExportSetting, { label: t("imageExportDialog.label.scale"), name: "exportScale", children: _jsx(RadioGroup, { name: "exportScale", value: exportScale, onChange: (scale) => {
+                                setExportScale(scale);
+                                actionManager.executeAction(actionChangeExportScale, "ui", scale);
+                            }, choices: EXPORT_SCALES.map((scale) => ({
+                                value: scale,
+                                label: `${scale}\u00d7`,
+                            })) }) }), _jsxs("div", { className: "ImageExportModal__settings__buttons", children: [_jsx(FilledButton, { className: "ImageExportModal__settings__buttons__button", label: t("imageExportDialog.title.exportToPng"), onClick: () => onExportImage(EXPORT_IMAGE_TYPES.png, exportedElements, {
+                                    exportingFrame,
+                                }), startIcon: downloadIcon, children: t("imageExportDialog.button.exportToPng") }), _jsx(FilledButton, { className: "ImageExportModal__settings__buttons__button", label: t("imageExportDialog.title.exportToSvg"), onClick: () => onExportImage(EXPORT_IMAGE_TYPES.svg, exportedElements, {
+                                    exportingFrame,
+                                }), startIcon: downloadIcon, children: t("imageExportDialog.button.exportToSvg") }), (probablySupportsClipboardBlob || isFirefox) && (_jsx(FilledButton, { className: "ImageExportModal__settings__buttons__button", label: t("imageExportDialog.title.copyPngToClipboard"), onClick: () => onExportImage(EXPORT_IMAGE_TYPES.clipboard, exportedElements, {
+                                    exportingFrame,
+                                }), startIcon: copyIcon, children: t("imageExportDialog.button.copyPngToClipboard") }))] })] })] }));
+};
+const ExportSetting = ({ label, children, tooltip, name, }) => {
+    return (_jsxs("div", { className: "ImageExportModal__settings__setting", title: label, children: [_jsxs("label", { htmlFor: name, className: "ImageExportModal__settings__setting__label", children: [label, tooltip && (_jsx(Tooltip, { label: tooltip, long: true, children: helpIcon }))] }), _jsx("div", { className: "ImageExportModal__settings__setting__content", children: children })] }));
+};
+export const ImageExportDialog = ({ elements, appState, files, actionManager, onExportImage, onCloseRequest, }) => {
+    // we need to take a snapshot so that the exported state can't be modified
+    // while the dialog is open
+    const [{ appStateSnapshot, elementsSnapshot }] = useState(() => {
+        return {
+            appStateSnapshot: cloneJSON(appState),
+            elementsSnapshot: cloneJSON(elements),
+        };
+    });
+    return (_jsx(Dialog, { onCloseRequest: onCloseRequest, size: "wide", title: false, children: _jsx(ImageExportModal, { elementsSnapshot: elementsSnapshot, appStateSnapshot: appStateSnapshot, files: files, actionManager: actionManager, onExportImage: onExportImage }) }));
+};

package/dist/packages/excalidraw/components/ImageExportDialog.scss

@@ -0,0 +1,173 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  --ImageExportModal-preview-border: #d6d6d6;
+
+  &.theme--dark {
+    --ImageExportModal-preview-border: #5c5c5c;
+  }
+
+  .ImageExportModal {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    & h3 {
+      font-family: "Assistant";
+      font-style: normal;
+      font-weight: 700;
+      font-size: 1.313rem;
+      line-height: 130%;
+      padding: 0;
+      margin: 0;
+
+      @include isMobile {
+        display: none;
+      }
+    }
+
+    & > h3 {
+      display: none;
+
+      @include isMobile {
+        display: block;
+      }
+    }
+
+    @include isMobile {
+      flex-direction: column;
+      height: calc(100vh - 5rem);
+    }
+
+    &__preview {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      height: 360px;
+      width: 55%;
+
+      margin-right: 1.5rem;
+
+      @include isMobile {
+        max-width: unset;
+        margin-right: unset;
+
+        width: 100%;
+        height: unset;
+        flex-grow: 1;
+      }
+
+      &__filename {
+        & > input {
+          margin-top: 1rem;
+        }
+      }
+
+      &__canvas {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-grow: 1;
+        justify-content: center;
+        align-items: center;
+
+        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
+          left center;
+
+        border: 1px solid var(--ImageExportModal-preview-border);
+        border-radius: 12px;
+
+        overflow: hidden;
+        padding: 1rem;
+
+        & > canvas {
+          max-width: calc(100% - 2rem);
+          max-height: calc(100% - 2rem);
+
+          filter: none !important;
+
+          @include isMobile {
+            max-height: 100%;
+          }
+        }
+
+        @include isMobile {
+          margin-top: 24px;
+          max-width: unset;
+        }
+      }
+    }
+
+    &__settings {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      gap: 18px;
+
+      @include isMobile {
+        margin-left: unset;
+        margin-top: 1rem;
+        flex-direction: row;
+        gap: 6px 34px;
+
+        align-content: flex-start;
+      }
+
+      &__setting {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
+        @include isMobile {
+          flex-direction: column;
+          align-items: start;
+          justify-content: unset;
+          height: 52px;
+        }
+
+        &__label {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+
+          font-family: "Assistant";
+          font-weight: 600;
+          font-size: 1rem;
+          line-height: 150%;
+
+          & svg {
+            width: 20px;
+            height: 20px;
+            margin-left: 10px;
+          }
+        }
+
+        &__content {
+          display: flex;
+          height: 100%;
+          align-items: center;
+        }
+      }
+
+      &__buttons {
+        flex-grow: 1;
+        flex-wrap: wrap;
+        display: flex;
+        flex-direction: row;
+        gap: 11px;
+
+        align-items: flex-end;
+        align-content: flex-end;
+
+        @include isMobile {
+          padding-top: 32px;
+          flex-basis: 100%;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}

package/dist/packages/excalidraw/components/InitializeApp.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { LoadingMessage } from "./LoadingMessage";
+import { defaultLang, languages, setLanguage } from "../i18n";
+export const InitializeApp = (props) => {
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        const updateLang = async () => {
+            await setLanguage(currentLang);
+            setLoading(false);
+        };
+        const currentLang = languages.find((lang) => lang.code === props.langCode) || defaultLang;
+        updateLang();
+    }, [props.langCode]);
+    return loading ? _jsx(LoadingMessage, { theme: props.theme }) : props.children;
+};

package/dist/packages/excalidraw/components/InlineIcon.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const InlineIcon = ({ icon }) => {
+    return (_jsx("span", { style: {
+            width: "1em",
+            margin: "0 0.5ex 0 0.5ex",
+            display: "inline-block",
+            lineHeight: 0,
+            verticalAlign: "middle",
+        }, children: icon }));
+};

package/dist/packages/excalidraw/components/Island.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./Island.scss";
+import React from "react";
+import clsx from "clsx";
+export const Island = React.forwardRef(({ children, padding, className, style }, ref) => (_jsx("div", { className: clsx("Island", className), style: { "--padding": padding, ...style }, ref: ref, children: children })));

package/dist/packages/excalidraw/components/Island.scss

@@ -0,0 +1,16 @@
+.excalidraw {
+  .Island {
+    --padding: 0;
+    box-sizing: border-box;
+    background-color: var(--island-bg-color);
+    box-shadow: var(--shadow-island);
+    border-radius: var(--border-radius-lg);
+    padding: calc(var(--padding) * var(--space-factor));
+    position: relative;
+    transition: box-shadow 0.5s ease-in-out;
+
+    &.zen-mode {
+      box-shadow: none;
+    }
+  }
+}

package/dist/packages/excalidraw/components/JSONExportDialog.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { t } from "../i18n";
+import { Dialog } from "./Dialog";
+import { exportToFileIcon, LinkIcon } from "./icons";
+import { ToolButton } from "./ToolButton";
+import { actionSaveFileToDisk } from "../actions/actionExport";
+import { Card } from "./Card";
+import "./ExportDialog.scss";
+import { nativeFileSystemSupported } from "../data/filesystem";
+import { trackEvent } from "../analytics";
+import { getFrame } from "../utils";
+const JSONExportModal = ({ elements, appState, setAppState, files, actionManager, exportOpts, canvas, onCloseRequest, }) => {
+    const { onExportToBackend } = exportOpts;
+    return (_jsx("div", { className: "ExportDialog ExportDialog--json", children: _jsxs("div", { className: "ExportDialog-cards", children: [exportOpts.saveFileToDisk && (_jsxs(Card, { color: "lime", children: [_jsx("div", { className: "Card-icon", children: exportToFileIcon }), _jsx("h2", { children: t("exportDialog.disk_title") }), _jsxs("div", { className: "Card-details", children: [t("exportDialog.disk_details"), !nativeFileSystemSupported &&
+                                    actionManager.renderAction("changeProjectName")] }), _jsx(ToolButton, { className: "Card-button", type: "button", title: t("exportDialog.disk_button"), "aria-label": t("exportDialog.disk_button"), showAriaLabel: true, onClick: () => {
+                                actionManager.executeAction(actionSaveFileToDisk, "ui");
+                            } })] })), onExportToBackend && (_jsxs(Card, { color: "pink", children: [_jsx("div", { className: "Card-icon", children: LinkIcon }), _jsx("h2", { children: t("exportDialog.link_title") }), _jsx("div", { className: "Card-details", children: t("exportDialog.link_details") }), _jsx(ToolButton, { className: "Card-button", type: "button", title: t("exportDialog.link_button"), "aria-label": t("exportDialog.link_button"), showAriaLabel: true, onClick: async () => {
+                                try {
+                                    trackEvent("export", "link", `ui (${getFrame()})`);
+                                    await onExportToBackend(elements, appState, files, canvas);
+                                    onCloseRequest();
+                                }
+                                catch (error) {
+                                    setAppState({ errorMessage: error.message });
+                                }
+                            } })] })), exportOpts.renderCustomUI &&
+                    exportOpts.renderCustomUI(elements, appState, files, canvas)] }) }));
+};
+export const JSONExportDialog = ({ elements, appState, files, actionManager, exportOpts, canvas, setAppState, }) => {
+    const handleClose = React.useCallback(() => {
+        setAppState({ openDialog: null });
+    }, [setAppState]);
+    return (_jsx(_Fragment, { children: appState.openDialog?.name === "jsonExport" && (_jsx(Dialog, { onCloseRequest: handleClose, title: t("buttons.export"), children: _jsx(JSONExportModal, { elements: elements, appState: appState, setAppState: setAppState, files: files, actionManager: actionManager, onCloseRequest: handleClose, exportOpts: exportOpts, canvas: canvas }) })) }));
+};