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

package/dist/packages/excalidraw/clipboard.js

@@ -0,0 +1,351 @@
+import { tryParseSpreadsheet, VALID_SPREADSHEET } from "./charts";
+import { ALLOWED_PASTE_MIME_TYPES, EXPORT_DATA_TYPES, MIME_TYPES, } from "./constants";
+import { isFrameLikeElement, isInitializedImageElement, } from "./element/typeChecks";
+import { deepCopyElement } from "./element/newElement";
+import { mutateElement } from "./element/mutateElement";
+import { getContainingFrame } from "./frame";
+import { isMemberOf, isPromiseLike } from "./utils";
+import { t } from "./i18n";
+export const probablySupportsClipboardReadText = "clipboard" in navigator && "readText" in navigator.clipboard;
+export const probablySupportsClipboardWriteText = "clipboard" in navigator && "writeText" in navigator.clipboard;
+export const probablySupportsClipboardBlob = "clipboard" in navigator &&
+    "write" in navigator.clipboard &&
+    "ClipboardItem" in window &&
+    "toBlob" in HTMLCanvasElement.prototype;
+const clipboardContainsElements = (contents) => {
+    if ([
+        EXPORT_DATA_TYPES.excalidraw,
+        EXPORT_DATA_TYPES.excalidrawClipboard,
+        EXPORT_DATA_TYPES.excalidrawClipboardWithAPI,
+    ].includes(contents?.type) &&
+        Array.isArray(contents.elements)) {
+        return true;
+    }
+    return false;
+};
+export const createPasteEvent = ({ types, files, }) => {
+    if (!types && !files) {
+        console.warn("createPasteEvent: no types or files provided");
+    }
+    const event = new ClipboardEvent("paste", {
+        clipboardData: new DataTransfer(),
+    });
+    if (types) {
+        for (const [type, value] of Object.entries(types)) {
+            try {
+                event.clipboardData?.setData(type, value);
+                if (event.clipboardData?.getData(type) !== value) {
+                    throw new Error(`Failed to set "${type}" as clipboardData item`);
+                }
+            }
+            catch (error) {
+                throw new Error(error.message);
+            }
+        }
+    }
+    if (files) {
+        let idx = -1;
+        for (const file of files) {
+            idx++;
+            try {
+                event.clipboardData?.items.add(file);
+                if (event.clipboardData?.files[idx] !== file) {
+                    throw new Error(`Failed to set file "${file.name}" as clipboardData item`);
+                }
+            }
+            catch (error) {
+                throw new Error(error.message);
+            }
+        }
+    }
+    return event;
+};
+export const serializeAsClipboardJSON = ({ elements, files, }) => {
+    const framesToCopy = new Set(elements.filter((element) => isFrameLikeElement(element)));
+    let foundFile = false;
+    const _files = elements.reduce((acc, element) => {
+        if (isInitializedImageElement(element)) {
+            foundFile = true;
+            if (files && files[element.fileId]) {
+                acc[element.fileId] = files[element.fileId];
+            }
+        }
+        return acc;
+    }, {});
+    if (foundFile && !files) {
+        console.warn("copyToClipboard: attempting to file element(s) without providing associated `files` object.");
+    }
+    // select bound text elements when copying
+    const contents = {
+        type: EXPORT_DATA_TYPES.excalidrawClipboard,
+        elements: elements.map((element) => {
+            if (getContainingFrame(element) &&
+                !framesToCopy.has(getContainingFrame(element))) {
+                const copiedElement = deepCopyElement(element);
+                mutateElement(copiedElement, {
+                    frameId: null,
+                });
+                return copiedElement;
+            }
+            return element;
+        }),
+        files: files ? _files : undefined,
+    };
+    return JSON.stringify(contents);
+};
+export const copyToClipboard = async (elements, files, 
+/** supply if available to make the operation more certain to succeed */
+clipboardEvent) => {
+    await copyTextToSystemClipboard(serializeAsClipboardJSON({ elements, files }), clipboardEvent);
+};
+const parsePotentialSpreadsheet = (text) => {
+    const result = tryParseSpreadsheet(text);
+    if (result.type === VALID_SPREADSHEET) {
+        return { spreadsheet: result.spreadsheet };
+    }
+    return null;
+};
+/** internal, specific to parsing paste events. Do not reuse. */
+function parseHTMLTree(el) {
+    let result = [];
+    for (const node of el.childNodes) {
+        if (node.nodeType === 3) {
+            const text = node.textContent?.trim();
+            if (text) {
+                result.push({ type: "text", value: text });
+            }
+        }
+        else if (node instanceof HTMLImageElement) {
+            const url = node.getAttribute("src");
+            if (url && url.startsWith("http")) {
+                result.push({ type: "imageUrl", value: url });
+            }
+        }
+        else {
+            result = result.concat(parseHTMLTree(node));
+        }
+    }
+    return result;
+}
+const maybeParseHTMLPaste = (event) => {
+    const html = event.clipboardData?.getData("text/html");
+    if (!html) {
+        return null;
+    }
+    try {
+        const doc = new DOMParser().parseFromString(html, "text/html");
+        const content = parseHTMLTree(doc.body);
+        if (content.length) {
+            return { type: "mixedContent", value: content };
+        }
+    }
+    catch (error) {
+        console.error(`error in parseHTMLFromPaste: ${error.message}`);
+    }
+    return null;
+};
+export const readSystemClipboard = async () => {
+    const types = {};
+    try {
+        if (navigator.clipboard?.readText) {
+            return { "text/plain": await navigator.clipboard?.readText() };
+        }
+    }
+    catch (error) {
+        // @ts-ignore
+        if (navigator.clipboard?.read) {
+            console.warn(`navigator.clipboard.readText() failed (${error.message}). Failling back to navigator.clipboard.read()`);
+        }
+        else {
+            throw error;
+        }
+    }
+    let clipboardItems;
+    try {
+        clipboardItems = await navigator.clipboard?.read();
+    }
+    catch (error) {
+        if (error.name === "DataError") {
+            console.warn(`navigator.clipboard.read() error, clipboard is probably empty: ${error.message}`);
+            return types;
+        }
+        throw error;
+    }
+    for (const item of clipboardItems) {
+        for (const type of item.types) {
+            if (!isMemberOf(ALLOWED_PASTE_MIME_TYPES, type)) {
+                continue;
+            }
+            try {
+                types[type] = await (await item.getType(type)).text();
+            }
+            catch (error) {
+                console.warn(`Cannot retrieve ${type} from clipboardItem: ${error.message}`);
+            }
+        }
+    }
+    if (Object.keys(types).length === 0) {
+        console.warn("No clipboard data found from clipboard.read().");
+        return types;
+    }
+    return types;
+};
+/**
+ * Parses "paste" ClipboardEvent.
+ */
+const parseClipboardEvent = async (event, isPlainPaste = false) => {
+    try {
+        const mixedContent = !isPlainPaste && event && maybeParseHTMLPaste(event);
+        if (mixedContent) {
+            if (mixedContent.value.every((item) => item.type === "text")) {
+                return {
+                    type: "text",
+                    value: event.clipboardData?.getData("text/plain") ||
+                        mixedContent.value
+                            .map((item) => item.value)
+                            .join("\n")
+                            .trim(),
+                };
+            }
+            return mixedContent;
+        }
+        const text = event.clipboardData?.getData("text/plain");
+        return { type: "text", value: (text || "").trim() };
+    }
+    catch {
+        return { type: "text", value: "" };
+    }
+};
+/**
+ * Attempts to parse clipboard. Prefers system clipboard.
+ */
+export const parseClipboard = async (event, isPlainPaste = false) => {
+    const parsedEventData = await parseClipboardEvent(event, isPlainPaste);
+    if (parsedEventData.type === "mixedContent") {
+        return {
+            mixedContent: parsedEventData.value,
+        };
+    }
+    try {
+        // if system clipboard contains spreadsheet, use it even though it's
+        // technically possible it's staler than in-app clipboard
+        const spreadsheetResult = !isPlainPaste && parsePotentialSpreadsheet(parsedEventData.value);
+        if (spreadsheetResult) {
+            return spreadsheetResult;
+        }
+    }
+    catch (error) {
+        console.error(error);
+    }
+    try {
+        const systemClipboardData = JSON.parse(parsedEventData.value);
+        const programmaticAPI = systemClipboardData.type === EXPORT_DATA_TYPES.excalidrawClipboardWithAPI;
+        if (clipboardContainsElements(systemClipboardData)) {
+            return {
+                elements: systemClipboardData.elements,
+                files: systemClipboardData.files,
+                text: isPlainPaste
+                    ? JSON.stringify(systemClipboardData.elements, null, 2)
+                    : undefined,
+                programmaticAPI,
+            };
+        }
+    }
+    catch { }
+    return { text: parsedEventData.value };
+};
+export const copyBlobToClipboardAsPng = async (blob) => {
+    try {
+        // in Safari so far we need to construct the ClipboardItem synchronously
+        // (i.e. in the same tick) otherwise browser will complain for lack of
+        // user intent. Using a Promise ClipboardItem constructor solves this.
+        // https://bugs.webkit.org/show_bug.cgi?id=222262
+        //
+        // Note that Firefox (and potentially others) seems to support Promise
+        // ClipboardItem constructor, but throws on an unrelated MIME type error.
+        // So we need to await this and fallback to awaiting the blob if applicable.
+        await navigator.clipboard.write([
+            new window.ClipboardItem({
+                [MIME_TYPES.png]: blob,
+            }),
+        ]);
+    }
+    catch (error) {
+        // if we're using a Promise ClipboardItem, let's try constructing
+        // with resolution value instead
+        if (isPromiseLike(blob)) {
+            await navigator.clipboard.write([
+                new window.ClipboardItem({
+                    [MIME_TYPES.png]: await blob,
+                }),
+            ]);
+        }
+        else {
+            throw error;
+        }
+    }
+};
+export const copyTextToSystemClipboard = async (text, clipboardEvent) => {
+    // (1) first try using Async Clipboard API
+    if (probablySupportsClipboardWriteText) {
+        try {
+            // NOTE: doesn't work on FF on non-HTTPS domains, or when document
+            // not focused
+            await navigator.clipboard.writeText(text || "");
+            return;
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    // (2) if fails and we have access to ClipboardEvent, use plain old setData()
+    try {
+        if (clipboardEvent) {
+            clipboardEvent.clipboardData?.setData("text/plain", text || "");
+            if (clipboardEvent.clipboardData?.getData("text/plain") !== text) {
+                throw new Error("Failed to setData on clipboardEvent");
+            }
+            return;
+        }
+    }
+    catch (error) {
+        console.error(error);
+    }
+    // (3) if that fails, use document.execCommand
+    if (!copyTextViaExecCommand(text)) {
+        throw new Error(t("errors.copyToSystemClipboardFailed"));
+    }
+};
+// adapted from https://github.com/zenorocha/clipboard.js/blob/ce79f170aa655c408b6aab33c9472e8e4fa52e19/src/clipboard-action.js#L48
+const copyTextViaExecCommand = (text) => {
+    // execCommand doesn't allow copying empty strings, so if we're
+    // clearing clipboard using this API, we must copy at least an empty char
+    if (!text) {
+        text = " ";
+    }
+    const isRTL = document.documentElement.getAttribute("dir") === "rtl";
+    const textarea = document.createElement("textarea");
+    textarea.style.border = "0";
+    textarea.style.padding = "0";
+    textarea.style.margin = "0";
+    textarea.style.position = "absolute";
+    textarea.style[isRTL ? "right" : "left"] = "-9999px";
+    const yPosition = window.pageYOffset || document.documentElement.scrollTop;
+    textarea.style.top = `${yPosition}px`;
+    // Prevent zooming on iOS
+    textarea.style.fontSize = "12pt";
+    textarea.setAttribute("readonly", "");
+    textarea.value = text;
+    document.body.appendChild(textarea);
+    let success = false;
+    try {
+        textarea.select();
+        textarea.setSelectionRange(0, textarea.value.length);
+        success = document.execCommand("copy");
+    }
+    catch (error) {
+        console.error(error);
+    }
+    textarea.remove();
+    return success;
+};

package/dist/packages/excalidraw/colors.js

@@ -0,0 +1,124 @@
+import oc from "open-color";
+// FIXME can't put to utils.ts rn because of circular dependency
+const pick = (source, keys) => {
+    return keys.reduce((acc, key) => {
+        if (key in source) {
+            acc[key] = source[key];
+        }
+        return acc;
+    }, {});
+};
+export const MAX_CUSTOM_COLORS_USED_IN_CANVAS = 5;
+export const COLORS_PER_ROW = 5;
+export const DEFAULT_CHART_COLOR_INDEX = 4;
+export const DEFAULT_ELEMENT_STROKE_COLOR_INDEX = 4;
+export const DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX = 1;
+export const ELEMENTS_PALETTE_SHADE_INDEXES = [0, 2, 4, 6, 8];
+export const CANVAS_PALETTE_SHADE_INDEXES = [0, 1, 2, 3, 4];
+export const getSpecificColorShades = (color, indexArr) => {
+    return indexArr.map((index) => oc[color][index]);
+};
+export const COLOR_PALETTE = {
+    transparent: "transparent",
+    black: "#1e1e1e",
+    white: "#ffffff",
+    // open-colors
+    gray: getSpecificColorShades("gray", ELEMENTS_PALETTE_SHADE_INDEXES),
+    red: getSpecificColorShades("red", ELEMENTS_PALETTE_SHADE_INDEXES),
+    pink: getSpecificColorShades("pink", ELEMENTS_PALETTE_SHADE_INDEXES),
+    grape: getSpecificColorShades("grape", ELEMENTS_PALETTE_SHADE_INDEXES),
+    violet: getSpecificColorShades("violet", ELEMENTS_PALETTE_SHADE_INDEXES),
+    blue: getSpecificColorShades("blue", ELEMENTS_PALETTE_SHADE_INDEXES),
+    cyan: getSpecificColorShades("cyan", ELEMENTS_PALETTE_SHADE_INDEXES),
+    teal: getSpecificColorShades("teal", ELEMENTS_PALETTE_SHADE_INDEXES),
+    green: getSpecificColorShades("green", ELEMENTS_PALETTE_SHADE_INDEXES),
+    yellow: getSpecificColorShades("yellow", ELEMENTS_PALETTE_SHADE_INDEXES),
+    orange: getSpecificColorShades("orange", ELEMENTS_PALETTE_SHADE_INDEXES),
+    // radix bronze shades 3,5,7,9,11
+    bronze: ["#f8f1ee", "#eaddd7", "#d2bab0", "#a18072", "#846358"],
+};
+const COMMON_ELEMENT_SHADES = pick(COLOR_PALETTE, [
+    "cyan",
+    "blue",
+    "violet",
+    "grape",
+    "pink",
+    "green",
+    "teal",
+    "yellow",
+    "orange",
+    "red",
+]);
+// -----------------------------------------------------------------------------
+// quick picks defaults
+// -----------------------------------------------------------------------------
+// ORDER matters for positioning in quick picker
+export const DEFAULT_ELEMENT_STROKE_PICKS = [
+    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],
+    COLOR_PALETTE.yellow[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
+];
+// ORDER matters for positioning in quick picker
+export const DEFAULT_ELEMENT_BACKGROUND_PICKS = [
+    COLOR_PALETTE.transparent,
+    COLOR_PALETTE.red[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
+    COLOR_PALETTE.green[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
+    COLOR_PALETTE.blue[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
+    COLOR_PALETTE.yellow[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
+];
+// ORDER matters for positioning in quick picker
+export const DEFAULT_CANVAS_BACKGROUND_PICKS = [
+    COLOR_PALETTE.white,
+    // radix slate2
+    "#f8f9fa",
+    // radix blue2
+    "#f5faff",
+    // radix yellow2
+    "#fffce8",
+    // radix bronze2
+    "#fdf8f6",
+];
+// -----------------------------------------------------------------------------
+// palette defaults
+// -----------------------------------------------------------------------------
+export const DEFAULT_ELEMENT_STROKE_COLOR_PALETTE = {
+    // 1st row
+    transparent: COLOR_PALETTE.transparent,
+    white: COLOR_PALETTE.white,
+    gray: COLOR_PALETTE.gray,
+    black: COLOR_PALETTE.black,
+    bronze: COLOR_PALETTE.bronze,
+    // rest
+    ...COMMON_ELEMENT_SHADES,
+};
+// ORDER matters for positioning in pallete (5x3 grid)s
+export const DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE = {
+    transparent: COLOR_PALETTE.transparent,
+    white: COLOR_PALETTE.white,
+    gray: COLOR_PALETTE.gray,
+    black: COLOR_PALETTE.black,
+    bronze: COLOR_PALETTE.bronze,
+    ...COMMON_ELEMENT_SHADES,
+};
+// -----------------------------------------------------------------------------
+// helpers
+// -----------------------------------------------------------------------------
+// !!!MUST BE WITHOUT GRAY, TRANSPARENT AND BLACK!!!
+export const getAllColorsSpecificShade = (index) => [
+    // 2nd row
+    COLOR_PALETTE.cyan[index],
+    COLOR_PALETTE.blue[index],
+    COLOR_PALETTE.violet[index],
+    COLOR_PALETTE.grape[index],
+    COLOR_PALETTE.pink[index],
+    // 3rd row
+    COLOR_PALETTE.green[index],
+    COLOR_PALETTE.teal[index],
+    COLOR_PALETTE.yellow[index],
+    COLOR_PALETTE.orange[index],
+    COLOR_PALETTE.red[index],
+];
+export const rgbToHex = (r, g, b) => `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+// -----------------------------------------------------------------------------

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

@@ -0,0 +1,127 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { getNonDeletedElements } from "../element";
+import { t } from "../i18n";
+import { useDevice } from "./App";
+import { canChangeRoundness, canHaveArrowheads, getTargetElements, hasBackground, hasStrokeStyle, hasStrokeWidth, } from "../scene";
+import { SHAPES } from "../shapes";
+import { capitalizeString, isTransparent } from "../utils";
+import Stack from "./Stack";
+import { ToolButton } from "./ToolButton";
+import { hasStrokeColor } from "../scene/comparisons";
+import { trackEvent } from "../analytics";
+import { hasBoundTextElement, isTextElement } from "../element/typeChecks";
+import clsx from "clsx";
+import { actionToggleZenMode } from "../actions";
+import { Tooltip } from "./Tooltip";
+import { shouldAllowVerticalAlign, suppportsHorizontalAlign, } from "../element/textElement";
+import "./Actions.scss";
+import DropdownMenu from "./dropdownMenu/DropdownMenu";
+import { EmbedIcon, extraToolsIcon, frameToolIcon, mermaidLogoIcon, laserPointerToolIcon, OpenAIIcon, MagicIcon, } from "./icons";
+import { KEYS } from "../keys";
+import { useTunnels } from "../context/tunnels";
+export const SelectedShapeActions = ({ appState, elements, renderAction, }) => {
+    const targetElements = getTargetElements(getNonDeletedElements(elements), appState);
+    let isSingleElementBoundContainer = false;
+    if (targetElements.length === 2 &&
+        (hasBoundTextElement(targetElements[0]) ||
+            hasBoundTextElement(targetElements[1]))) {
+        isSingleElementBoundContainer = true;
+    }
+    const isEditing = Boolean(appState.editingElement);
+    const device = useDevice();
+    const isRTL = document.documentElement.getAttribute("dir") === "rtl";
+    const showFillIcons = (hasBackground(appState.activeTool.type) &&
+        !isTransparent(appState.currentItemBackgroundColor)) ||
+        targetElements.some((element) => hasBackground(element.type) && !isTransparent(element.backgroundColor));
+    const showChangeBackgroundIcons = hasBackground(appState.activeTool.type) ||
+        targetElements.some((element) => hasBackground(element.type));
+    const showLinkIcon = targetElements.length === 1 || isSingleElementBoundContainer;
+    let commonSelectedType = targetElements[0]?.type || null;
+    for (const element of targetElements) {
+        if (element.type !== commonSelectedType) {
+            commonSelectedType = null;
+            break;
+        }
+    }
+    return (_jsxs("div", { className: "panelColumn", children: [_jsx("div", { children: ((hasStrokeColor(appState.activeTool.type) &&
+                    appState.activeTool.type !== "image" &&
+                    commonSelectedType !== "image" &&
+                    commonSelectedType !== "frame" &&
+                    commonSelectedType !== "magicframe") ||
+                    targetElements.some((element) => hasStrokeColor(element.type))) &&
+                    renderAction("changeStrokeColor") }), showChangeBackgroundIcons && (_jsx("div", { children: renderAction("changeBackgroundColor") })), showFillIcons && renderAction("changeFillStyle"), (hasStrokeWidth(appState.activeTool.type) ||
+                targetElements.some((element) => hasStrokeWidth(element.type))) &&
+                renderAction("changeStrokeWidth"), (appState.activeTool.type === "freedraw" ||
+                targetElements.some((element) => element.type === "freedraw")) &&
+                renderAction("changeStrokeShape"), (hasStrokeStyle(appState.activeTool.type) ||
+                targetElements.some((element) => hasStrokeStyle(element.type))) && (_jsxs(_Fragment, { children: [renderAction("changeStrokeStyle"), renderAction("changeSloppiness")] })), (canChangeRoundness(appState.activeTool.type) ||
+                targetElements.some((element) => canChangeRoundness(element.type))) && (_jsx(_Fragment, { children: renderAction("changeRoundness") })), (appState.activeTool.type === "text" ||
+                targetElements.some(isTextElement)) && (_jsxs(_Fragment, { children: [renderAction("changeFontSize"), renderAction("changeFontFamily"), (appState.activeTool.type === "text" ||
+                        suppportsHorizontalAlign(targetElements)) &&
+                        renderAction("changeTextAlign")] })), shouldAllowVerticalAlign(targetElements) &&
+                renderAction("changeVerticalAlign"), (canHaveArrowheads(appState.activeTool.type) ||
+                targetElements.some((element) => canHaveArrowheads(element.type))) && (_jsx(_Fragment, { children: renderAction("changeArrowhead") })), renderAction("changeOpacity"), _jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.layers") }), _jsxs("div", { className: "buttonList", children: [renderAction("sendToBack"), renderAction("sendBackward"), renderAction("bringToFront"), renderAction("bringForward")] })] }), targetElements.length > 1 && !isSingleElementBoundContainer && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.align") }), _jsxs("div", { className: "buttonList", children: [isRTL ? (_jsxs(_Fragment, { children: [renderAction("alignRight"), renderAction("alignHorizontallyCentered"), renderAction("alignLeft")] })) : (_jsxs(_Fragment, { children: [renderAction("alignLeft"), renderAction("alignHorizontallyCentered"), renderAction("alignRight")] })), targetElements.length > 2 &&
+                                renderAction("distributeHorizontally"), _jsx("div", { style: { flexBasis: "100%", height: 0 } }), _jsxs("div", { style: {
+                                    display: "flex",
+                                    flexWrap: "wrap",
+                                    gap: ".5rem",
+                                    marginTop: "-0.5rem",
+                                }, children: [renderAction("alignTop"), renderAction("alignVerticallyCentered"), renderAction("alignBottom"), targetElements.length > 2 &&
+                                        renderAction("distributeVertically")] })] })] })), !isEditing && targetElements.length > 0 && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.actions") }), _jsxs("div", { className: "buttonList", children: [!device.editor.isMobile && renderAction("duplicateSelection"), !device.editor.isMobile && renderAction("deleteSelectedElements"), renderAction("group"), renderAction("ungroup"), showLinkIcon && renderAction("hyperlink")] })] }))] }));
+};
+export const ShapesSwitcher = ({ activeTool, appState, app, UIOptions, }) => {
+    const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState(false);
+    const frameToolSelected = activeTool.type === "frame";
+    const laserToolSelected = activeTool.type === "laser";
+    const embeddableToolSelected = activeTool.type === "embeddable";
+    const { TTDDialogTriggerTunnel } = useTunnels();
+    return (_jsxs(_Fragment, { children: [SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
+                if (UIOptions.tools?.[value] === false) {
+                    return null;
+                }
+                const label = t(`toolBar.${value}`);
+                const letter = key && capitalizeString(typeof key === "string" ? key : key[0]);
+                const shortcut = letter
+                    ? `${letter} ${t("helpDialog.or")} ${numericKey}`
+                    : `${numericKey}`;
+                return (_jsx(ToolButton, { className: clsx("Shape", { fillable }), type: "radio", icon: icon, checked: activeTool.type === value, name: "editor-current-shape", title: `${capitalizeString(label)} — ${shortcut}`, keyBindingLabel: numericKey || letter, "aria-label": capitalizeString(label), "aria-keyshortcuts": shortcut, "data-testid": `toolbar-${value}`, onPointerDown: ({ pointerType }) => {
+                        if (!appState.penDetected && pointerType === "pen") {
+                            app.togglePenMode(true);
+                        }
+                    }, onChange: ({ pointerType }) => {
+                        if (appState.activeTool.type !== value) {
+                            trackEvent("toolbar", value, "ui");
+                        }
+                        if (value === "image") {
+                            app.setActiveTool({
+                                type: value,
+                                insertOnCanvasDirectly: pointerType !== "mouse",
+                            });
+                        }
+                        else {
+                            app.setActiveTool({ type: value });
+                        }
+                    } }, value));
+            }), _jsx("div", { className: "App-toolbar__divider" }), _jsxs(DropdownMenu, { open: isExtraToolsMenuOpen, children: [_jsx(DropdownMenu.Trigger, { className: clsx("App-toolbar__extra-tools-trigger", {
+                            "App-toolbar__extra-tools-trigger--selected": frameToolSelected ||
+                                embeddableToolSelected ||
+                                // in collab we're already highlighting the laser button
+                                // outside toolbar, so let's not highlight extra-tools button
+                                // on top of it
+                                (laserToolSelected && !app.props.isCollaborating),
+                        }), onToggle: () => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen), title: t("toolBar.extraTools"), children: extraToolsIcon }), _jsxs(DropdownMenu.Content, { onClickOutside: () => setIsExtraToolsMenuOpen(false), onSelect: () => setIsExtraToolsMenuOpen(false), className: "App-toolbar__extra-tools-dropdown", children: [_jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "frame" }), icon: frameToolIcon, shortcut: KEYS.F.toLocaleUpperCase(), "data-testid": "toolbar-frame", selected: frameToolSelected, children: t("toolBar.frame") }), _jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "embeddable" }), icon: EmbedIcon, "data-testid": "toolbar-embeddable", selected: embeddableToolSelected, children: t("toolBar.embeddable") }), _jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "laser" }), icon: laserPointerToolIcon, "data-testid": "toolbar-laser", selected: laserToolSelected, shortcut: KEYS.K.toLocaleUpperCase(), children: t("toolBar.laser") }), _jsx("div", { style: { margin: "6px 0", fontSize: 14, fontWeight: 600 }, children: "Generate" }), app.props.aiEnabled !== false && _jsx(TTDDialogTriggerTunnel.Out, {}), _jsx(DropdownMenu.Item, { onSelect: () => app.setOpenDialog({ name: "ttd", tab: "mermaid" }), icon: mermaidLogoIcon, "data-testid": "toolbar-embeddable", children: t("toolBar.mermaidToExcalidraw") }), app.props.aiEnabled !== false && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu.Item, { onSelect: () => app.onMagicframeToolSelect(), icon: MagicIcon, "data-testid": "toolbar-magicframe", children: [t("toolBar.magicframe"), _jsx(DropdownMenu.Item.Badge, { children: "AI" })] }), _jsx(DropdownMenu.Item, { onSelect: () => {
+                                            trackEvent("ai", "open-settings", "d2c");
+                                            app.setOpenDialog({
+                                                name: "settings",
+                                                source: "settings",
+                                                tab: "diagram-to-code",
+                                            });
+                                        }, icon: OpenAIIcon, "data-testid": "toolbar-magicSettings", children: t("toolBar.magicSettings") })] }))] })] })] }));
+};
+export const ZoomActions = ({ renderAction, zoom, }) => (_jsx(Stack.Col, { gap: 1, className: "zoom-actions", children: _jsxs(Stack.Row, { align: "center", children: [renderAction("zoomOut"), renderAction("resetZoom"), renderAction("zoomIn")] }) }));
+export const UndoRedoActions = ({ renderAction, className, }) => (_jsxs("div", { className: `undo-redo-buttons ${className}`, children: [_jsx("div", { className: "undo-button-container", children: _jsx(Tooltip, { label: t("buttons.undo"), children: renderAction("undo") }) }), _jsx("div", { className: "redo-button-container", children: _jsxs(Tooltip, { label: t("buttons.redo"), children: [" ", renderAction("redo")] }) })] }));
+export const ExitZenModeAction = ({ actionManager, showExitZenModeBtn, }) => (_jsx("button", { className: clsx("disable-zen-mode", {
+        "disable-zen-mode--visible": showExitZenModeBtn,
+    }), onClick: () => actionManager.executeAction(actionToggleZenMode), children: t("buttons.exitZenMode") }));
+export const FinalizeAction = ({ renderAction, className, }) => (_jsx("div", { className: `finalize-button ${className}`, children: renderAction("finalize", { size: "small" }) }));