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

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

@@ -0,0 +1,191 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .ExcButton {
+    --text-color: transparent;
+    --border-color: transparent;
+    --back-color: transparent;
+
+    color: var(--text-color);
+    background-color: var(--back-color);
+    border-color: var(--border-color);
+
+    &--color-primary {
+      &.ExcButton--variant-filled {
+        --text-color: var(--color-surface-lowest);
+        --back-color: var(--color-primary);
+
+        &:hover {
+          --back-color: var(--color-brand-hover);
+        }
+
+        &:active {
+          --back-color: var(--color-brand-active);
+        }
+      }
+
+      &.ExcButton--variant-outlined,
+      &.ExcButton--variant-icon {
+        --text-color: var(--color-primary);
+        --border-color: var(--color-border-outline);
+        --back-color: transparent;
+
+        &:hover {
+          --text-color: var(--color-brand-hover);
+          --border-color: var(--color-brand-hover);
+        }
+
+        &:active {
+          --text-color: var(--color-brand-active);
+          --border-color: var(--color-brand-active);
+        }
+      }
+    }
+
+    &--color-danger {
+      &.ExcButton--variant-filled {
+        --text-color: var(--color-danger-text);
+        --back-color: var(--color-danger-dark);
+
+        &:hover {
+          --back-color: var(--color-danger-darker);
+        }
+
+        &:active {
+          --back-color: var(--color-danger-darkest);
+        }
+      }
+
+      &.ExcButton--variant-outlined,
+      &.ExcButton--variant-icon {
+        --text-color: var(--color-danger);
+        --border-color: var(--color-danger);
+        --back-color: transparent;
+
+        &:hover {
+          --text-color: var(--color-danger-darkest);
+          --border-color: var(--color-danger-darkest);
+        }
+
+        &:active {
+          --text-color: var(--color-danger-darker);
+          --border-color: var(--color-danger-darker);
+        }
+      }
+    }
+
+    &--color-muted {
+      &.ExcButton--variant-filled {
+        --text-color: var(--island-bg-color);
+        --back-color: var(--color-gray-50);
+
+        &:hover {
+          --back-color: var(--color-gray-60);
+        }
+
+        &:active {
+          --back-color: var(--color-gray-80);
+        }
+      }
+
+      &.ExcButton--variant-outlined,
+      &.ExcButton--variant-icon {
+        --text-color: var(--color-muted-background);
+        --border-color: var(--color-muted);
+        --back-color: var(--island-bg-color);
+
+        &:hover {
+          --text-color: var(--color-muted-background-darker);
+          --border-color: var(--color-muted-darker);
+        }
+
+        &:active {
+          --text-color: var(--color-muted-background-darker);
+          --border-color: var(--color-muted-darkest);
+        }
+      }
+    }
+
+    &--color-warning {
+      &.ExcButton--variant-filled {
+        --text-color: black;
+        --back-color: var(--color-warning-dark);
+
+        &:hover {
+          --back-color: var(--color-warning-darker);
+        }
+
+        &:active {
+          --back-color: var(--color-warning-darkest);
+        }
+      }
+
+      &.ExcButton--variant-outlined,
+      &.ExcButton--variant-icon {
+        --text-color: var(--color-warning-dark);
+        --border-color: var(--color-warning-dark);
+        --back-color: var(--input-bg-color);
+
+        &:hover {
+          --text-color: var(--color-warning-darker);
+          --border-color: var(--color-warning-darker);
+        }
+
+        &:active {
+          --text-color: var(--color-warning-darkest);
+          --border-color: var(--color-warning-darkest);
+        }
+      }
+    }
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+
+    border-radius: 0.5rem;
+    border-width: 1px;
+    border-style: solid;
+
+    font-family: "Assistant";
+
+    user-select: none;
+
+    transition: all 150ms ease-out;
+
+    &--size-large {
+      font-weight: 600;
+      font-size: 0.875rem;
+      min-height: 3rem;
+      padding: 0.5rem 1.5rem;
+      gap: 0.75rem;
+
+      letter-spacing: 0.4px;
+    }
+
+    &--size-medium {
+      font-weight: 600;
+      font-size: 0.75rem;
+      min-height: 2.5rem;
+      padding: 0.5rem 1rem;
+      gap: 0.5rem;
+
+      letter-spacing: normal;
+    }
+
+    &--variant-icon {
+      padding: 0.5rem 0.75rem;
+      width: 3rem;
+    }
+
+    &--fullWidth {
+      width: 100%;
+    }
+
+    &__icon {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./FixedSideContainer.scss";
+import clsx from "clsx";
+export const FixedSideContainer = ({ children, side, className, }) => (_jsx("div", { className: clsx("FixedSideContainer", `FixedSideContainer_side_${side}`, className), children: children }));

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

@@ -0,0 +1,40 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .FixedSideContainer {
+    position: absolute;
+    pointer-events: none;
+  }
+
+  .FixedSideContainer > * {
+    pointer-events: var(--ui-pointerEvents);
+  }
+
+  .FixedSideContainer_side_top {
+    left: var(--editor-container-padding);
+    top: var(--editor-container-padding);
+    right: var(--editor-container-padding);
+    bottom: var(--editor-container-padding);
+    z-index: 2;
+  }
+
+  .FixedSideContainer_side_top.zen-mode {
+    right: 42px;
+  }
+}
+
+/* TODO: if these are used, make sure to implement RTL support
+.FixedSideContainer_side_left {
+  left: var(--space-factor);
+  top: var(--space-factor);
+  bottom: var(--space-factor);
+  z-index: 1;
+}
+
+.FixedSideContainer_side_right {
+  right: var(--space-factor);
+  top: var(--space-factor);
+  bottom: var(--space-factor);
+  z-index: 3;
+}
+*/

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseIcon } from "../icons";
+import "./FollowMode.scss";
+const FollowMode = ({ height, width, userToFollow, onDisconnect, }) => {
+    return (_jsx("div", { style: { position: "relative" }, children: _jsx("div", { className: "follow-mode", style: { width, height }, children: _jsxs("div", { className: "follow-mode__badge", children: [_jsxs("div", { className: "follow-mode__badge__label", children: ["Following", " ", _jsx("span", { className: "follow-mode__badge__username", title: userToFollow.username, children: userToFollow.username })] }), _jsx("button", { onClick: onDisconnect, className: "follow-mode__disconnect-btn", children: CloseIcon })] }) }) }));
+};
+export default FollowMode;

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

@@ -0,0 +1,59 @@
+.excalidraw {
+  .follow-mode {
+    position: absolute;
+    box-sizing: border-box;
+    pointer-events: none;
+    border: 2px solid var(--color-primary-hover);
+    z-index: 9999;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+
+    &__badge {
+      background-color: var(--color-primary-hover);
+      color: var(--color-primary-light);
+      padding: 0.25rem 0.5rem;
+      margin-bottom: 0.5rem;
+      border-radius: 0.5rem;
+      pointer-events: all;
+      font-size: 0.75rem;
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+
+      &__label {
+        display: flex;
+        white-space: pre-wrap;
+        line-height: 1;
+      }
+
+      &__username {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100px;
+      }
+    }
+
+    &__disconnect-btn {
+      all: unset;
+      cursor: pointer;
+      border-radius: 0.25rem;
+
+      &:hover {
+        background-color: var(--color-primary-darker);
+      }
+
+      &:active {
+        background-color: var(--color-primary-darkest);
+      }
+
+      svg {
+        display: block;
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./ToolIcon.scss";
+import clsx from "clsx";
+import { ToolButton } from "./ToolButton";
+import { handIcon } from "./icons";
+import { KEYS } from "../keys";
+export const HandButton = (props) => {
+    return (_jsx(ToolButton, { className: clsx("Shape", { fillable: false }), type: "radio", icon: handIcon, name: "editor-current-shape", checked: props.checked, title: `${props.title} — H`, keyBindingLabel: !props.isMobile ? KEYS.H.toLocaleUpperCase() : undefined, "aria-label": `${props.title} — H`, "aria-keyshortcuts": KEYS.H, "data-testid": `toolbar-hand`, onChange: () => props.onChange?.() }));
+};

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { t } from "../i18n";
+import { HelpIcon } from "./icons";
+export const HelpButton = (props) => (_jsx("button", { className: "help-icon", onClick: props.onClick, type: "button", title: `${t("helpDialog.title")} — ?`, "aria-label": t("helpDialog.title"), children: HelpIcon }));

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { t } from "../i18n";
+import { KEYS } from "../keys";
+import { Dialog } from "./Dialog";
+import { getShortcutKey } from "../utils";
+import "./HelpDialog.scss";
+import { ExternalLinkIcon } from "./icons";
+import { probablySupportsClipboardBlob } from "../clipboard";
+import { isDarwin, isFirefox, isWindows } from "../constants";
+const Header = () => (_jsxs("div", { className: "HelpDialog__header", children: [_jsxs("a", { className: "HelpDialog__btn", href: "https://docs.excalidraw.com", target: "_blank", rel: "noopener noreferrer", children: [t("helpDialog.documentation"), _jsx("div", { className: "HelpDialog__link-icon", children: ExternalLinkIcon })] }), _jsxs("a", { className: "HelpDialog__btn", href: "https://blog.excalidraw.com", target: "_blank", rel: "noopener noreferrer", children: [t("helpDialog.blog"), _jsx("div", { className: "HelpDialog__link-icon", children: ExternalLinkIcon })] }), _jsxs("a", { className: "HelpDialog__btn", href: "https://github.com/excalidraw/excalidraw/issues", target: "_blank", rel: "noopener noreferrer", children: [t("helpDialog.github"), _jsx("div", { className: "HelpDialog__link-icon", children: ExternalLinkIcon })] })] }));
+const Section = (props) => (_jsxs(_Fragment, { children: [_jsx("h3", { children: props.title }), _jsx("div", { className: "HelpDialog__islands-container", children: props.children })] }));
+const ShortcutIsland = (props) => (_jsxs("div", { className: `HelpDialog__island ${props.className}`, children: [_jsx("h4", { className: "HelpDialog__island-title", children: props.caption }), _jsx("div", { className: "HelpDialog__island-content", children: props.children })] }));
+function* intersperse(as, delim) {
+    let first = true;
+    for (const x of as) {
+        if (!first) {
+            yield delim;
+        }
+        first = false;
+        yield x;
+    }
+}
+const upperCaseSingleChars = (str) => {
+    return str.replace(/\b[a-z]\b/, (c) => c.toUpperCase());
+};
+const Shortcut = ({ label, shortcuts, isOr = true, }) => {
+    const splitShortcutKeys = shortcuts.map((shortcut) => {
+        const keys = shortcut.endsWith("++")
+            ? [...shortcut.slice(0, -2).split("+"), "+"]
+            : shortcut.split("+");
+        return keys.map((key) => (_jsx(ShortcutKey, { children: upperCaseSingleChars(key) }, key)));
+    });
+    return (_jsxs("div", { className: "HelpDialog__shortcut", children: [_jsx("div", { children: label }), _jsx("div", { className: "HelpDialog__key-container", children: [...intersperse(splitShortcutKeys, isOr ? t("helpDialog.or") : null)] })] }));
+};
+const ShortcutKey = (props) => (_jsx("kbd", { className: "HelpDialog__key", ...props }));
+export const HelpDialog = ({ onClose }) => {
+    const handleClose = React.useCallback(() => {
+        if (onClose) {
+            onClose();
+        }
+    }, [onClose]);
+    return (_jsx(_Fragment, { children: _jsxs(Dialog, { onCloseRequest: handleClose, title: t("helpDialog.title"), className: "HelpDialog", children: [_jsx(Header, {}), _jsxs(Section, { title: t("helpDialog.shortcuts"), children: [_jsxs(ShortcutIsland, { className: "HelpDialog__island--tools", caption: t("helpDialog.tools"), children: [_jsx(Shortcut, { label: t("toolBar.hand"), shortcuts: [KEYS.H] }), _jsx(Shortcut, { label: t("toolBar.selection"), shortcuts: [KEYS.V, KEYS["1"]] }), _jsx(Shortcut, { label: t("toolBar.rectangle"), shortcuts: [KEYS.R, KEYS["2"]] }), _jsx(Shortcut, { label: t("toolBar.diamond"), shortcuts: [KEYS.D, KEYS["3"]] }), _jsx(Shortcut, { label: t("toolBar.ellipse"), shortcuts: [KEYS.O, KEYS["4"]] }), _jsx(Shortcut, { label: t("toolBar.arrow"), shortcuts: [KEYS.A, KEYS["5"]] }), _jsx(Shortcut, { label: t("toolBar.line"), shortcuts: [KEYS.L, KEYS["6"]] }), _jsx(Shortcut, { label: t("toolBar.freedraw"), shortcuts: [KEYS.P, KEYS["7"]] }), _jsx(Shortcut, { label: t("toolBar.text"), shortcuts: [KEYS.T, KEYS["8"]] }), _jsx(Shortcut, { label: t("toolBar.image"), shortcuts: [KEYS["9"]] }), _jsx(Shortcut, { label: t("toolBar.eraser"), shortcuts: [KEYS.E, KEYS["0"]] }), _jsx(Shortcut, { label: t("toolBar.frame"), shortcuts: [KEYS.F] }), _jsx(Shortcut, { label: t("toolBar.laser"), shortcuts: [KEYS.K] }), _jsx(Shortcut, { label: t("labels.eyeDropper"), shortcuts: [KEYS.I, "Shift+S", "Shift+G"] }), _jsx(Shortcut, { label: t("helpDialog.editLineArrowPoints"), shortcuts: [getShortcutKey("CtrlOrCmd+Enter")] }), _jsx(Shortcut, { label: t("helpDialog.editText"), shortcuts: [getShortcutKey("Enter")] }), _jsx(Shortcut, { label: t("helpDialog.textNewLine"), shortcuts: [
+                                        getShortcutKey("Enter"),
+                                        getShortcutKey("Shift+Enter"),
+                                    ] }), _jsx(Shortcut, { label: t("helpDialog.textFinish"), shortcuts: [
+                                        getShortcutKey("Esc"),
+                                        getShortcutKey("CtrlOrCmd+Enter"),
+                                    ] }), _jsx(Shortcut, { label: t("helpDialog.curvedArrow"), shortcuts: [
+                                        "A",
+                                        t("helpDialog.click"),
+                                        t("helpDialog.click"),
+                                        t("helpDialog.click"),
+                                    ], isOr: false }), _jsx(Shortcut, { label: t("helpDialog.curvedLine"), shortcuts: [
+                                        "L",
+                                        t("helpDialog.click"),
+                                        t("helpDialog.click"),
+                                        t("helpDialog.click"),
+                                    ], isOr: false }), _jsx(Shortcut, { label: t("toolBar.lock"), shortcuts: [KEYS.Q] }), _jsx(Shortcut, { label: t("helpDialog.preventBinding"), shortcuts: [getShortcutKey("CtrlOrCmd")] }), _jsx(Shortcut, { label: t("toolBar.link"), shortcuts: [getShortcutKey("CtrlOrCmd+K")] })] }), _jsxs(ShortcutIsland, { className: "HelpDialog__island--view", caption: t("helpDialog.view"), children: [_jsx(Shortcut, { label: t("buttons.zoomIn"), shortcuts: [getShortcutKey("CtrlOrCmd++")] }), _jsx(Shortcut, { label: t("buttons.zoomOut"), shortcuts: [getShortcutKey("CtrlOrCmd+-")] }), _jsx(Shortcut, { label: t("buttons.resetZoom"), shortcuts: [getShortcutKey("CtrlOrCmd+0")] }), _jsx(Shortcut, { label: t("helpDialog.zoomToFit"), shortcuts: ["Shift+1"] }), _jsx(Shortcut, { label: t("helpDialog.zoomToSelection"), shortcuts: ["Shift+2"] }), _jsx(Shortcut, { label: t("helpDialog.movePageUpDown"), shortcuts: ["PgUp/PgDn"] }), _jsx(Shortcut, { label: t("helpDialog.movePageLeftRight"), shortcuts: ["Shift+PgUp/PgDn"] }), _jsx(Shortcut, { label: t("buttons.zenMode"), shortcuts: [getShortcutKey("Alt+Z")] }), _jsx(Shortcut, { label: t("buttons.objectsSnapMode"), shortcuts: [getShortcutKey("Alt+S")] }), _jsx(Shortcut, { label: t("labels.showGrid"), shortcuts: [getShortcutKey("CtrlOrCmd+'")] }), _jsx(Shortcut, { label: t("labels.viewMode"), shortcuts: [getShortcutKey("Alt+R")] }), _jsx(Shortcut, { label: t("labels.toggleTheme"), shortcuts: [getShortcutKey("Alt+Shift+D")] }), _jsx(Shortcut, { label: t("stats.title"), shortcuts: [getShortcutKey("Alt+/")] })] }), _jsxs(ShortcutIsland, { className: "HelpDialog__island--editor", caption: t("helpDialog.editor"), children: [_jsx(Shortcut, { label: t("labels.moveCanvas"), shortcuts: [
+                                        getShortcutKey(`Space+${t("helpDialog.drag")}`),
+                                        getShortcutKey(`Wheel+${t("helpDialog.drag")}`),
+                                    ], isOr: true }), _jsx(Shortcut, { label: t("buttons.clearReset"), shortcuts: [getShortcutKey("CtrlOrCmd+Delete")] }), _jsx(Shortcut, { label: t("labels.delete"), shortcuts: [getShortcutKey("Delete")] }), _jsx(Shortcut, { label: t("labels.cut"), shortcuts: [getShortcutKey("CtrlOrCmd+X")] }), _jsx(Shortcut, { label: t("labels.copy"), shortcuts: [getShortcutKey("CtrlOrCmd+C")] }), _jsx(Shortcut, { label: t("labels.paste"), shortcuts: [getShortcutKey("CtrlOrCmd+V")] }), _jsx(Shortcut, { label: t("labels.pasteAsPlaintext"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+V")] }), _jsx(Shortcut, { label: t("labels.selectAll"), shortcuts: [getShortcutKey("CtrlOrCmd+A")] }), _jsx(Shortcut, { label: t("labels.multiSelect"), shortcuts: [getShortcutKey(`Shift+${t("helpDialog.click")}`)] }), _jsx(Shortcut, { label: t("helpDialog.deepSelect"), shortcuts: [getShortcutKey(`CtrlOrCmd+${t("helpDialog.click")}`)] }), _jsx(Shortcut, { label: t("helpDialog.deepBoxSelect"), shortcuts: [getShortcutKey(`CtrlOrCmd+${t("helpDialog.drag")}`)] }), (probablySupportsClipboardBlob || isFirefox) && (_jsx(Shortcut, { label: t("labels.copyAsPng"), shortcuts: [getShortcutKey("Shift+Alt+C")] })), _jsx(Shortcut, { label: t("labels.copyStyles"), shortcuts: [getShortcutKey("CtrlOrCmd+Alt+C")] }), _jsx(Shortcut, { label: t("labels.pasteStyles"), shortcuts: [getShortcutKey("CtrlOrCmd+Alt+V")] }), _jsx(Shortcut, { label: t("labels.sendToBack"), shortcuts: [
+                                        isDarwin
+                                            ? getShortcutKey("CtrlOrCmd+Alt+[")
+                                            : getShortcutKey("CtrlOrCmd+Shift+["),
+                                    ] }), _jsx(Shortcut, { label: t("labels.bringToFront"), shortcuts: [
+                                        isDarwin
+                                            ? getShortcutKey("CtrlOrCmd+Alt+]")
+                                            : getShortcutKey("CtrlOrCmd+Shift+]"),
+                                    ] }), _jsx(Shortcut, { label: t("labels.sendBackward"), shortcuts: [getShortcutKey("CtrlOrCmd+[")] }), _jsx(Shortcut, { label: t("labels.bringForward"), shortcuts: [getShortcutKey("CtrlOrCmd+]")] }), _jsx(Shortcut, { label: t("labels.alignTop"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+Up")] }), _jsx(Shortcut, { label: t("labels.alignBottom"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+Down")] }), _jsx(Shortcut, { label: t("labels.alignLeft"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+Left")] }), _jsx(Shortcut, { label: t("labels.alignRight"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+Right")] }), _jsx(Shortcut, { label: t("labels.duplicateSelection"), shortcuts: [
+                                        getShortcutKey("CtrlOrCmd+D"),
+                                        getShortcutKey(`Alt+${t("helpDialog.drag")}`),
+                                    ] }), _jsx(Shortcut, { label: t("helpDialog.toggleElementLock"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+L")] }), _jsx(Shortcut, { label: t("buttons.undo"), shortcuts: [getShortcutKey("CtrlOrCmd+Z")] }), _jsx(Shortcut, { label: t("buttons.redo"), shortcuts: isWindows
+                                        ? [
+                                            getShortcutKey("CtrlOrCmd+Y"),
+                                            getShortcutKey("CtrlOrCmd+Shift+Z"),
+                                        ]
+                                        : [getShortcutKey("CtrlOrCmd+Shift+Z")] }), _jsx(Shortcut, { label: t("labels.group"), shortcuts: [getShortcutKey("CtrlOrCmd+G")] }), _jsx(Shortcut, { label: t("labels.ungroup"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+G")] }), _jsx(Shortcut, { label: t("labels.flipHorizontal"), shortcuts: [getShortcutKey("Shift+H")] }), _jsx(Shortcut, { label: t("labels.flipVertical"), shortcuts: [getShortcutKey("Shift+V")] }), _jsx(Shortcut, { label: t("labels.showStroke"), shortcuts: [getShortcutKey("S")] }), _jsx(Shortcut, { label: t("labels.showBackground"), shortcuts: [getShortcutKey("G")] }), _jsx(Shortcut, { label: t("labels.decreaseFontSize"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+<")] }), _jsx(Shortcut, { label: t("labels.increaseFontSize"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+>")] })] })] })] }) }));
+};

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

@@ -0,0 +1,130 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .HelpDialog {
+    .Modal__content {
+      max-width: 960px;
+    }
+
+    h3 {
+      margin: 1.5rem 0;
+      font-weight: bold;
+      font-size: 1.125rem;
+    }
+
+    &__header {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+    }
+
+    &__btn {
+      --background: var(--color-surface-mid);
+
+      display: flex;
+      column-gap: 0.5rem;
+      align-items: center;
+      background-color: var(--background);
+      padding: 0.625rem 1rem;
+      border: 1px solid var(--background);
+      border-radius: var(--border-radius-lg);
+      color: var(--text-primary-color);
+      font-weight: 600;
+      font-size: 0.75rem;
+      letter-spacing: 0.4px;
+
+      @at-root .excalidraw.theme--dark#{&} {
+        --background: var(--color-surface-high);
+        &:hover {
+          --background: #363541;
+        }
+      }
+
+      &:hover {
+        --background: var(--color-surface-high);
+        text-decoration: none;
+      }
+
+      &:active {
+        border-color: var(--color-primary);
+      }
+    }
+
+    &__link-icon {
+      line-height: 0;
+      svg {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+
+    &__islands-container {
+      display: grid;
+      @media screen and (min-width: 1024px) {
+        grid-template-columns: 1fr 1fr;
+      }
+      grid-column-gap: 1.5rem;
+      grid-row-gap: 2rem;
+    }
+
+    @media screen and (min-width: 1024px) {
+      &__island--tools {
+        grid-area: 1 / 1 / 2 / 2;
+      }
+      &__island--view {
+        grid-area: 2 / 1 / 3 / 2;
+      }
+      &__island--editor {
+        grid-area: 1 / 2 / 3 / 3;
+      }
+    }
+
+    &__island {
+      h4 {
+        font-size: 1rem;
+        font-weight: bold;
+        margin: 0;
+        margin-bottom: 0.625rem;
+      }
+
+      &-content {
+        border: 1px solid var(--dialog-border-color);
+        border-radius: var(--border-radius-lg);
+      }
+    }
+
+    &__shortcut {
+      border-bottom: 1px solid var(--dialog-border-color);
+      padding: 0.375rem 0.75rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 0.875rem;
+      column-gap: 0.5rem;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    &__key-container {
+      display: flex;
+      align-items: center;
+      column-gap: 0.25rem;
+      flex-shrink: 0;
+    }
+
+    &__key {
+      display: flex;
+      box-sizing: border-box;
+      font-size: 0.625rem;
+      background-color: var(--color-primary-light);
+      border-radius: var(--border-radius-md);
+      padding: 0.5rem;
+      word-break: keep-all;
+      align-items: center;
+      font-family: inherit;
+      line-height: 1;
+    }
+  }
+}

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

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { t } from "../i18n";
+import { isImageElement, isLinearElement, isTextBindableContainer, isTextElement, } from "../element/typeChecks";
+import { getShortcutKey } from "../utils";
+import { isEraserActive } from "../appState";
+import "./HintViewer.scss";
+const getHints = ({ appState, isMobile, device, app }) => {
+    const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
+    const multiMode = appState.multiElement !== null;
+    if (appState.openSidebar && !device.editor.canFitSidebar) {
+        return null;
+    }
+    if (isEraserActive(appState)) {
+        return t("hints.eraserRevert");
+    }
+    if (activeTool.type === "arrow" || activeTool.type === "line") {
+        if (!multiMode) {
+            return t("hints.linearElement");
+        }
+        return t("hints.linearElementMulti");
+    }
+    if (activeTool.type === "freedraw") {
+        return t("hints.freeDraw");
+    }
+    if (activeTool.type === "text") {
+        return t("hints.text");
+    }
+    if (activeTool.type === "embeddable") {
+        return t("hints.embeddable");
+    }
+    if (appState.activeTool.type === "image" && appState.pendingImageElementId) {
+        return t("hints.placeImage");
+    }
+    const selectedElements = app.scene.getSelectedElements(appState);
+    if (isResizing &&
+        lastPointerDownWith === "mouse" &&
+        selectedElements.length === 1) {
+        const targetElement = selectedElements[0];
+        if (isLinearElement(targetElement) && targetElement.points.length === 2) {
+            return t("hints.lockAngle");
+        }
+        return isImageElement(targetElement)
+            ? t("hints.resizeImage")
+            : t("hints.resize");
+    }
+    if (isRotating && lastPointerDownWith === "mouse") {
+        return t("hints.rotate");
+    }
+    if (selectedElements.length === 1 && isTextElement(selectedElements[0])) {
+        return t("hints.text_selected");
+    }
+    if (appState.editingElement && isTextElement(appState.editingElement)) {
+        return t("hints.text_editing");
+    }
+    if (activeTool.type === "selection") {
+        if (appState.draggingElement?.type === "selection" &&
+            !selectedElements.length &&
+            !appState.editingElement &&
+            !appState.editingLinearElement) {
+            return t("hints.deepBoxSelect");
+        }
+        if (appState.gridSize && appState.draggingElement) {
+            return t("hints.disableSnapping");
+        }
+        if (!selectedElements.length && !isMobile) {
+            return t("hints.canvasPanning");
+        }
+        if (selectedElements.length === 1) {
+            if (isLinearElement(selectedElements[0])) {
+                if (appState.editingLinearElement) {
+                    return appState.editingLinearElement.selectedPointsIndices
+                        ? t("hints.lineEditor_pointSelected")
+                        : t("hints.lineEditor_nothingSelected");
+                }
+                return t("hints.lineEditor_info");
+            }
+            if (!appState.draggingElement &&
+                isTextBindableContainer(selectedElements[0])) {
+                return t("hints.bindTextToElement");
+            }
+        }
+    }
+    return null;
+};
+export const HintViewer = ({ appState, isMobile, device, app, }) => {
+    let hint = getHints({
+        appState,
+        isMobile,
+        device,
+        app,
+    });
+    if (!hint) {
+        return null;
+    }
+    hint = getShortcutKey(hint);
+    return (_jsx("div", { className: "HintViewer", children: _jsx("span", { children: hint }) }));
+};

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

@@ -0,0 +1,37 @@
+@import "../css/variables.module.scss";
+
+// this is loosely based on the longest hint text
+$wide-viewport-width: 1000px;
+
+.excalidraw {
+  .HintViewer {
+    pointer-events: none;
+    box-sizing: border-box;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    left: 0;
+    top: 100%;
+    max-width: 100%;
+    width: 100%;
+    margin-top: 0.5rem;
+    text-align: center;
+    color: var(--color-gray-40);
+    font-size: 0.75rem;
+
+    @include isMobile {
+      position: static;
+      padding-right: 2rem;
+    }
+
+    > span {
+      padding: 0.25rem;
+    }
+  }
+
+  &.theme--dark {
+    .HintViewer {
+      color: var(--color-gray-60);
+    }
+  }
+}