feat(editor): zen mode polish, hide toolbar hints preference & delayed canvas tooltips (#12165)

* feat(editor): preference to hide toolbar hints Add a "Show hints" checkbox to the Preferences menu, backed by a new browser-persisted `appState.showHints` (default true). When off, HintViewer renders nothing. Also exposed as `Preferences.ToggleShowHints` for hosts composing their own preferences list. Opus 5.5 (1M context), low * fix(editor): keep main menu open when toggling view mode Entering view mode ran terminateActiveInteraction, which reset `openMenu` and closed the main menu the user had just toggled view mode from (Preferences submenu). The main menu stays available in view mode, so only close it when interaction gets disabled. Opus 5.5 (1M context), low * feat(editor): chrome-less canvas controls & in-place fades in zen mode - UI hidden in zen mode fades out in place (opacity + visibility) instead of sliding off the viewport, and is non-interactive from the start of the fade - visible canvas controls (toolbar, main menu trigger, zoom, scroll back to content, exit zen mode) drop their background/border/shadow; hover/active states still apply, popups & dialogs are unaffected - only the zoom level stays visible out of the zoom controls - chrome fades are applied only while toggling (data-zen-mode-transition on the container, set before the DOM update) so hover transitions stay instant - single ZEN_MODE_TRANSITION_DURATION, exposed to CSS as --zen-mode-transition-duration - zoom & undo/redo button groups paint a single background (on the group) instead of one per button Opus 5.5 (1M context), low * feat(editor): shift zoom level into the zoom-out slot in zen mode With the zoom +/- buttons hidden in zen mode, slide the zoom level over to the left edge of the group. The shift is applied to the Tooltip wrapper (new `className` prop) rather than the button, so the tooltip (positioned off the wrapper) moves along. Also give the reset-zoom button its own hover background: unlike the +/- buttons it has no .ToolIcon__icon, and lost its (incidental) hover once the per-button backgrounds were removed. Opus 5.5 (1M context), low * feat(editor): delayed tooltips on canvas buttons - Tooltip gets a `delay` prop: shows after 500ms, or right away if a tooltip was visible within the last 300ms (moving across adjacent buttons); passing over a button quickly doesn't flash one - enable it for the zoom, undo/redo & help buttons - zoom +/- use our Tooltip instead of the native `title`, and the reset zoom button drops its native `title` (it was showing both) - zen mode now hides the zoom +/- tooltip wrappers rather than the buttons, so the invisible wrappers don't show tooltips Opus 5.5 (1M context), low Co-authored-by: GitUserVivek <jagtapvs9832@gmail.com>
2026-10-19 16:15:56 +00:00 · 2026-09-25 00:42:59 +02:00
parent e40d1cba95
commit 5db42c3ddb
18 changed files with 380 additions and 62 deletions
@@ -355,6 +355,7 @@ export const TOUCH_CTX_MENU_TIMEOUT = 500;
 export const TITLE_TIMEOUT = 10000;
 export const VERSION_TIMEOUT = 30000;
 export const SCROLL_TIMEOUT = 100;
+export const ZEN_MODE_TRANSITION_DURATION = 250;
 export const ZOOM_STEP = 0.1;
 export const MIN_ZOOM = 0.1;
 export const MAX_ZOOM = 30;
@@ -155,17 +155,22 @@ export const actionZoomIn = register({
  PanelComponent: ({ updateData }) => {
    const zoomValue = useAppStateValue((appState) => appState.zoom.value);
    return (
-      <IconButton
-        type="button"
-        className="zoom-in-button zoom-button"
-        icon={ZoomInIcon}
-        title={`${t("buttons.zoomIn")} — ${getShortcutKey("CtrlOrCmd++")}`}
-        aria-label={t("buttons.zoomIn")}
-        disabled={zoomValue >= MAX_ZOOM}
-        onClick={() => {
-          updateData(null);
-        }}
-      />
+      <Tooltip
+        label={`${t("buttons.zoomIn")} — ${getShortcutKey("CtrlOrCmd++")}`}
+        className="zoom-in-button-wrapper"
+        delay
+      >
+        <IconButton
+          type="button"
+          className="zoom-in-button zoom-button"
+          icon={ZoomInIcon}
+          aria-label={t("buttons.zoomIn")}
+          disabled={zoomValue >= MAX_ZOOM}
+          onClick={() => {
+            updateData(null);
+          }}
+        />
+      </Tooltip>
    );
  },
  keyTest: (event) =>
@@ -202,17 +207,22 @@ export const actionZoomOut = register({
  PanelComponent: ({ updateData }) => {
    const zoomValue = useAppStateValue((appState) => appState.zoom.value);
    return (
-      <IconButton
-        type="button"
-        className="zoom-out-button zoom-button"
-        icon={ZoomOutIcon}
-        title={`${t("buttons.zoomOut")} — ${getShortcutKey("CtrlOrCmd+-")}`}
-        aria-label={t("buttons.zoomOut")}
-        disabled={zoomValue <= MIN_ZOOM}
-        onClick={() => {
-          updateData(null);
-        }}
-      />
+      <Tooltip
+        label={`${t("buttons.zoomOut")} — ${getShortcutKey("CtrlOrCmd+-")}`}
+        className="zoom-out-button-wrapper"
+        delay
+      >
+        <IconButton
+          type="button"
+          className="zoom-out-button zoom-button"
+          icon={ZoomOutIcon}
+          aria-label={t("buttons.zoomOut")}
+          disabled={zoomValue <= MIN_ZOOM}
+          onClick={() => {
+            updateData(null);
+          }}
+        />
+      </Tooltip>
    );
  },
  keyTest: (event) =>
@@ -254,11 +264,15 @@ export const actionResetZoom = register({
  PanelComponent: ({ updateData }) => {
    const zoomValue = useAppStateValue((appState) => appState.zoom.value);
    return (
-      <Tooltip label={t("buttons.resetZoom")} style={{ height: "100%" }}>
+      <Tooltip
+        label={t("buttons.resetZoom")}
+        style={{ height: "100%" }}
+        className="reset-zoom-button-wrapper"
+        delay
+      >
        <IconButton
          type="button"
          className="reset-zoom-button zoom-button"
-          title={t("buttons.resetZoom")}
          aria-label={t("buttons.resetZoom")}
          onClick={() => {
            updateData(null);
@@ -77,6 +77,7 @@ export const getDefaultAppState = (): Omit<
    isBindingEnabled: true,
    bindingPreference: "enabled",
    isMidpointSnappingEnabled: true,
+    showHints: true,
    inputDevice: "auto",
    defaultSidebarDockedPreference: false,
    isLoading: false,
@@ -225,6 +226,7 @@ const APP_STATE_STORAGE_CONF = (<
  boxSelectionMode: { browser: true, export: false, server: false },
  bindingPreference: { browser: true, export: false, server: false },
  isMidpointSnappingEnabled: { browser: true, export: false, server: false },
+  showHints: { browser: true, export: false, server: false },
  inputDevice: { browser: true, export: false, server: false },
  defaultSidebarDockedPreference: {
    browser: true,
@@ -1,6 +1,6 @@
 .zoom-actions,
 .undo-redo-buttons {
-  background-color: var(--island-bg-color);
+  background-color: var(--color-surface-low);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 0 0 1px var(--color-surface-lowest);
 }
@@ -8,7 +8,6 @@
 .zoom-button,
 .undo-redo-buttons button {
  border-radius: 0 !important;
-  background-color: var(--color-surface-low) !important;
  font-size: 0.875rem !important;
  width: var(--lg-button-size);
  height: var(--lg-button-size);
@@ -31,6 +30,24 @@
  width: 3.75rem !important;
  justify-content: center;
  color: var(--text-primary-color);
+
+  // unlike the other zoom buttons, has no .ToolIcon__icon to show the hover
+  .zoom-actions &:hover:not(:active) {
+    background-color: var(--button-hover-bg);
+  }
+}
+
+// shifted left in zen mode (the wrapper rather than the button, so that the
+// tooltip, positioned off the wrapper, moves along)
+.reset-zoom-button-wrapper {
+  transition: transform var(--zen-mode-transition-duration) ease-in-out;
+}
+
+// faded out in zen mode
+.zoom-out-button-wrapper,
+.zoom-in-button-wrapper {
+  transition: opacity var(--zen-mode-transition-duration) ease-in-out,
+    visibility var(--zen-mode-transition-duration);
 }

 .zoom-out-button {
@@ -897,10 +897,14 @@ export const UndoRedoActions = ({
 }) => (
  <div className={`undo-redo-buttons ${className}`}>
    <div className="undo-button-container">
-      <Tooltip label={t("buttons.undo")}>{renderAction("undo")}</Tooltip>
+      <Tooltip label={t("buttons.undo")} delay>
+        {renderAction("undo")}
+      </Tooltip>
    </div>
    <div className="redo-button-container">
-      <Tooltip label={t("buttons.redo")}> {renderAction("redo")}</Tooltip>
+      <Tooltip label={t("buttons.redo")} delay>
+        {renderAction("redo")}
+      </Tooltip>
    </div>
  </div>
 );
@@ -57,6 +57,7 @@ import {
  ARROW_TYPE,
  DEFAULT_REDUCED_GLOBAL_ALPHA,
  DEFAULT_STICKY_NOTE_SIZE,
+  ZEN_MODE_TRANSITION_DURATION,
  isLocalLink,
  normalizeLink,
  toValidURL,
@@ -647,6 +648,7 @@ class App extends React.Component<AppProps, AppState> {
  );

  private excalidrawContainerRef = React.createRef<HTMLDivElement>();
+  private zenModeTransitionTimer = 0;

  public get ownerDocument(): Document {
    return (
@@ -2447,6 +2449,7 @@ class App extends React.Component<AppProps, AppState> {
            ? POINTER_EVENTS.disabled
            : POINTER_EVENTS.enabled,
          ["--right-sidebar-width" as any]: `${RIGHT_SIDEBAR_WIDTH}px`,
+          ["--zen-mode-transition-duration" as any]: `${ZEN_MODE_TRANSITION_DURATION}ms`,
        }}
        ref={this.excalidrawContainerRef}
        onDrop={this.isInteractionEnabled() ? this.handleAppOnDrop : undefined}
@@ -3364,7 +3367,9 @@ class App extends React.Component<AppProps, AppState> {

    this.setState({
      contextMenu: null,
-      openMenu: null,
+      // keep the main menu open when entering view mode, since that's where
+      // the user usually toggles it from (Preferences submenu)
+      openMenu: this.isInteractionEnabled() ? this.state.openMenu : null,
      openPopup: null,
      cursorButton: "up",
      bindMode: "orbit",
@@ -3923,6 +3928,7 @@ class App extends React.Component<AppProps, AppState> {
      }
    }

+    clearTimeout(this.zenModeTransitionTimer);
    this.editorLifecycleEvents.emit("editor:unmount");
    this.props.onUnmount?.();
    this.props.onExcalidrawAPI?.(null);
@@ -4249,6 +4255,34 @@ class App extends React.Component<AppProps, AppState> {
    }
  }

+  getSnapshotBeforeUpdate(prevProps: AppProps, prevState: AppState) {
+    // before the DOM update, so the transition styles are in place by the time
+    // the zen-mode class changes (layout reads during commit would otherwise
+    // resolve the new styles without them)
+    if (prevState.zenModeEnabled !== this.state.zenModeEnabled) {
+      this.markZenModeTransition();
+    }
+    return null;
+  }
+
+  /**
+   * Flags the container while toggling zen mode so that UI chrome
+   * (backgrounds etc.) animates only then, and hover transitions stay
+   * instant. A data attribute so that React doesn't reset it on re-render.
+   */
+  private markZenModeTransition() {
+    const container = this.excalidrawContainerRef.current;
+    if (!container) {
+      return;
+    }
+    container.setAttribute("data-zen-mode-transition", "");
+    clearTimeout(this.zenModeTransitionTimer);
+    this.zenModeTransitionTimer = window.setTimeout(() => {
+      container.removeAttribute("data-zen-mode-transition");
+      // slightly past the CSS transition so it isn't cut short
+    }, ZEN_MODE_TRANSITION_DURATION + 100);
+  }
+
  componentDidUpdate(prevProps: AppProps, prevState: AppState) {
    const renderOverridesUpdatePending = this.renderOverridesUpdatePending;
    this.renderOverridesUpdatePending = false;
@@ -10,7 +10,7 @@ type HelpButtonProps = {
 };

 export const HelpButton = (props: HelpButtonProps) => (
-  <Tooltip label={`${t("helpDialog.title")} — ?`}>
+  <Tooltip label={`${t("helpDialog.title")} — ?`} delay>
    <button
      className="help-icon"
      onClick={props.onClick}
@@ -273,6 +273,10 @@ export const HintViewer = ({
  editorInterface,
  app,
 }: HintViewerProps) => {
+  if (!appState.showHints) {
+    return null;
+  }
+
  const hints = getHints({
    appState,
    isMobile,
@@ -41,27 +41,24 @@
      }
    }

+    // UI hidden in zen mode fades out in place. `visibility` flips at the end
+    // of the fade-out (and immediately on fade-in), and makes the hidden UI
+    // non-interactive & unfocusable.
    .zen-mode-transition {
-      transition: transform 0.5s ease-in-out;
-
-      :root[dir="ltr"] &.transition-left {
-        transform: translate(-999px, 0);
-      }
-
-      :root[dir="ltr"] &.transition-right {
-        transform: translate(999px, 0);
-      }
-
-      :root[dir="rtl"] &.transition-left {
-        transform: translate(999px, 0);
-      }
-
-      :root[dir="rtl"] &.transition-right {
-        transform: translate(-999px, 0);
-      }
+      transition: opacity var(--zen-mode-transition-duration) ease-in-out,
+        visibility var(--zen-mode-transition-duration);

+      &.transition-left,
+      &.transition-right,
      &.layer-ui__wrapper__footer-left--transition-bottom {
-        transform: translate(0, 92px);
+        opacity: 0;
+        visibility: hidden;
+
+        // disable interaction immediately, not only once faded out
+        &,
+        * {
+          pointer-events: none !important;
+        }
      }
    }

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import React, { useEffect } from "react";

 import "./Tooltip.scss";
@@ -59,6 +60,26 @@ export const updateTooltipPosition = (
  });
 };

+/** ms before a `delay`ed tooltip shows */
+const TOOLTIP_DELAY = 500;
+/**
+ * ms after a tooltip hides during which a `delay`ed tooltip shows right away
+ * (e.g. when moving across adjacent buttons)
+ */
+const TOOLTIP_WARM_WINDOW = 300;
+
+let showTooltipTimer = 0;
+let tooltipHiddenAt = 0;
+
+const hideTooltip = () => {
+  clearTimeout(showTooltipTimer);
+  const tooltip = getTooltipDiv();
+  if (tooltip.classList.contains("excalidraw-tooltip--visible")) {
+    tooltip.classList.remove("excalidraw-tooltip--visible");
+    tooltipHiddenAt = Date.now();
+  }
+};
+
 const updateTooltip = (
  item: HTMLDivElement,
  tooltip: HTMLDivElement,
@@ -80,7 +101,10 @@ type TooltipProps = {
  label: string;
  long?: boolean;
  style?: React.CSSProperties;
+  className?: string;
  disabled?: boolean;
+  /** show after a short delay (unless a tooltip was visible just now) */
+  delay?: boolean;
 };

 export const Tooltip = ({
@@ -88,29 +112,30 @@ export const Tooltip = ({
  label,
  long = false,
  style,
+  className,
  disabled,
+  delay = false,
 }: TooltipProps) => {
  useEffect(() => {
-    return () =>
-      getTooltipDiv().classList.remove("excalidraw-tooltip--visible");
+    return () => hideTooltip();
  }, []);
  if (disabled) {
    return null;
  }
  return (
    <div
-      className="excalidraw-tooltip-wrapper"
-      onPointerEnter={(event) =>
-        updateTooltip(
-          event.currentTarget as HTMLDivElement,
-          getTooltipDiv(),
-          label,
-          long,
-        )
-      }
-      onPointerLeave={() =>
-        getTooltipDiv().classList.remove("excalidraw-tooltip--visible")
-      }
+      className={clsx("excalidraw-tooltip-wrapper", className)}
+      onPointerEnter={(event) => {
+        const item = event.currentTarget as HTMLDivElement;
+        const show = () => updateTooltip(item, getTooltipDiv(), label, long);
+        clearTimeout(showTooltipTimer);
+        if (delay && Date.now() - tooltipHiddenAt > TOOLTIP_WARM_WINDOW) {
+          showTooltipTimer = window.setTimeout(show, TOOLTIP_DELAY);
+        } else {
+          show();
+        }
+      }}
+      onPointerLeave={hideTooltip}
      style={style}
    >
      {children}
@@ -563,6 +563,23 @@ const PreferencesToggleMidpointSnappingItem = () => {
  );
 };

+const PreferencesToggleShowHintsItem = () => {
+  const { t } = useI18n();
+  const appState = useUIAppState();
+  const setAppState = useExcalidrawSetAppState();
+  return (
+    <DropdownMenuItemCheckbox
+      checked={appState.showHints}
+      onSelect={(event) => {
+        setAppState({ showHints: !appState.showHints });
+        event.preventDefault();
+      }}
+    >
+      {t("labels.showHints")}
+    </DropdownMenuItemCheckbox>
+  );
+};
+
 export const PreferencesToggleGridModeItem = () => {
  const { t } = useI18n();
  const actionManager = useExcalidrawActionManager();
@@ -665,6 +682,7 @@ export const Preferences = ({
            <PreferencesToggleElementPropertiesItem />
            <PreferencesToggleArrowBindingItem />
            <PreferencesToggleMidpointSnappingItem />
+            <PreferencesToggleShowHintsItem />
          </>
        )}
        {additionalItems}
@@ -679,6 +697,7 @@ Preferences.InputDevice = PreferencesInputDeviceItem;
 Preferences.ToggleSnapMode = PreferencesToggleSnapModeItem;
 Preferences.ToggleArrowBinding = PreferencesToggleArrowBindingItem;
 Preferences.ToggleMidpointSnapping = PreferencesToggleMidpointSnappingItem;
+Preferences.ToggleShowHints = PreferencesToggleShowHintsItem;
 Preferences.ToggleGridMode = PreferencesToggleGridModeItem;
 Preferences.ToggleZenMode = PreferencesToggleZenModeItem;
 Preferences.ToggleViewMode = PreferencesToggleViewModeItem;
@@ -680,6 +680,71 @@ body.excalidraw-cursor-resize * {
    }
  }

+  // in zen mode, canvas controls render without background/border/shadow
+  // (hover/active states still apply). Popups & dialogs are unaffected.
+  &.excalidraw--zen-mode {
+    .App-toolbar,
+    .zoom-actions {
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    .main-menu-trigger,
+    .scroll-back-to-content,
+    .disable-zen-mode {
+      &:not(:active) {
+        border-color: transparent;
+        box-shadow: none;
+      }
+    }
+
+    .main-menu-trigger,
+    .scroll-back-to-content,
+    .disable-zen-mode {
+      &:not(:hover, :active) {
+        background-color: transparent !important;
+      }
+    }
+
+    // only show the zoom level (fade out in place, same as other zen-hidden
+    // UI). Hides the tooltip wrappers so they don't show tooltips either.
+    .zoom-out-button-wrapper,
+    .zoom-in-button-wrapper {
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+    }
+
+    .reset-zoom-button {
+      border-radius: var(--border-radius-lg) !important;
+    }
+
+    // shift into the hidden zoom-out button's place
+    .reset-zoom-button-wrapper {
+      transform: translateX(calc(-1 * var(--lg-button-size)));
+
+      :root[dir="rtl"] & {
+        transform: translateX(var(--lg-button-size));
+      }
+    }
+  }
+
+  // fade the chrome in/out only while toggling zen mode (see
+  // App.markZenModeTransition) so hover transitions stay instant
+  &[data-zen-mode-transition] {
+    .App-toolbar,
+    .zoom-actions,
+    .main-menu-trigger,
+    .scroll-back-to-content {
+      transition: background-color var(--zen-mode-transition-duration)
+          ease-in-out,
+        border-color var(--zen-mode-transition-duration) ease-in-out,
+        box-shadow var(--zen-mode-transition-duration) ease-in-out,
+        opacity var(--zen-mode-transition-duration) ease-in-out,
+        visibility var(--zen-mode-transition-duration);
+    }
+  }
+
  .disable-pointerEvents {
    pointer-events: none !important;
  }
@@ -197,6 +197,7 @@
    "boxSelectionOverlap": "Overlap",
    "arrowBinding": "Arrow binding",
    "midpointSnapping": "Snap to midpoints",
+    "showHints": "Show hints",
    "inputDevice": "Input",
    "inputDeviceTrackpad": "Trackpad",
    "inputDeviceMouse": "Mouse"
@@ -989,6 +989,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -1196,6 +1197,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -1424,6 +1426,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -1771,6 +1774,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -2118,6 +2122,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -2344,6 +2349,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -2601,6 +2607,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -2920,6 +2927,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -3303,6 +3311,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -3839,6 +3848,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -4178,6 +4188,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -4520,6 +4531,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -5821,6 +5833,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -7056,6 +7069,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -8025,6 +8039,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -9036,6 +9051,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -10042,6 +10058,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -108,6 +108,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -760,6 +761,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -1338,6 +1340,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -1715,6 +1718,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -2093,6 +2097,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -2371,6 +2376,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -2843,6 +2849,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -3166,6 +3173,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -3507,6 +3515,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -3820,6 +3829,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -4123,6 +4133,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -4374,6 +4385,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -4648,6 +4660,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -4938,6 +4951,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -5183,6 +5197,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -5428,6 +5443,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -5692,6 +5708,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -5967,6 +5984,7 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -6239,6 +6257,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -6584,6 +6603,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -7032,6 +7052,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -7430,6 +7451,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  },
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -7747,6 +7769,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -8053,6 +8076,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -8297,6 +8321,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -8667,6 +8692,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -9043,6 +9069,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -9460,6 +9487,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -9764,6 +9792,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -10043,6 +10072,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -10323,6 +10353,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -10570,6 +10601,7 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -10882,6 +10914,7 @@ exports[`history > multiplayer undo/redo > should override remotely added points
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -11211,6 +11244,7 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -11464,6 +11498,7 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -12406,6 +12441,7 @@ exports[`history > multiplayer undo/redo > should update history entries after r
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -12678,6 +12714,7 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": false,
  "snapLines": [],
@@ -12930,6 +12967,7 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -13180,6 +13218,7 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -13605,6 +13644,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -13826,6 +13866,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -14051,6 +14092,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -14365,6 +14407,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -14679,6 +14722,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": false,
  "snapLines": [],
@@ -14938,6 +14982,7 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": false,
  "snapLines": [],
@@ -15190,6 +15235,7 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": false,
  "snapLines": [],
@@ -15442,6 +15488,7 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -15703,6 +15750,7 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -16051,6 +16099,7 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -16236,6 +16285,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
  },
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -16534,6 +16584,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -16813,6 +16864,7 @@ exports[`history > singleplayer undo/redo > should not modify anything on unrela
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": false,
  "snapLines": [],
@@ -16980,6 +17032,7 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -17275,6 +17328,7 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -17450,6 +17504,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -18222,6 +18277,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -18892,6 +18948,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -19560,6 +19617,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -20336,6 +20394,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -21128,6 +21187,7 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -21628,6 +21688,7 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
  },
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -22156,6 +22217,7 @@ exports[`history > singleplayer undo/redo > should support element creation, del
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -22635,6 +22697,7 @@ exports[`history > singleplayer undo/redo > should support linear element creati
  "selectedGroupIds": {},
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -116,6 +116,7 @@ exports[`given element A and group of elements B and given both are selected whe
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -559,6 +560,7 @@ exports[`given element A and group of elements B and given both are selected whe
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -981,6 +983,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -1562,6 +1565,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -1787,6 +1791,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -2183,6 +2188,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -2440,6 +2446,7 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -2635,6 +2642,7 @@ exports[`regression tests > can drag element that covers another element, while
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -2973,6 +2981,7 @@ exports[`regression tests > change the properties of a shape > [end of test] app
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -3243,6 +3252,7 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -3498,6 +3508,7 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -3747,6 +3758,7 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -4020,6 +4032,7 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -4348,6 +4361,7 @@ exports[`regression tests > deleting last but one element in editing group shoul
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -4826,6 +4840,7 @@ exports[`regression tests > deselects group of selected elements on pointer down
    "y": 500,
  },
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -5095,6 +5110,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -5413,6 +5429,7 @@ exports[`regression tests > deselects selected element on pointer down when poin
    "y": 110,
  },
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -5606,6 +5623,7 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -5819,6 +5837,7 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -6231,6 +6250,7 @@ exports[`regression tests > drags selected elements from point inside common bou
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -6536,6 +6556,7 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -7353,6 +7374,7 @@ exports[`regression tests > given a group of selected elements with an element t
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -7702,6 +7724,7 @@ exports[`regression tests > given a selected element A and a not selected elemen
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -7994,6 +8017,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -8243,6 +8267,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -8495,6 +8520,7 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -8688,6 +8714,7 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -8881,6 +8908,7 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -9105,6 +9133,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
  },
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -9351,6 +9380,7 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
  },
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -9562,6 +9592,7 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -9804,6 +9835,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
  },
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -10019,6 +10051,7 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -10243,6 +10276,7 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
  },
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -10456,6 +10490,7 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -10647,6 +10682,7 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -10858,6 +10894,7 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -11059,6 +11096,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -11602,6 +11640,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -11892,6 +11931,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": true,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -12029,6 +12069,7 @@ exports[`regression tests > shift click on selected element should deselect it o
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -12246,6 +12287,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -12581,6 +12623,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -13029,6 +13072,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -13676,6 +13720,7 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -13815,6 +13860,7 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -14491,6 +14537,7 @@ exports[`regression tests > switches from group of selected elements to another
    "y": 0,
  },
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -14845,6 +14892,7 @@ exports[`regression tests > switches selected element on pointer down > [end of
    "y": 0,
  },
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -15091,6 +15139,7 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": true,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -15228,6 +15277,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -15605,6 +15655,7 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -15743,6 +15794,7 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
@@ -367,6 +367,8 @@ export interface AppState {
  bindingPreference: "enabled" | "disabled";
  /** user preference whether arrow snap to midpoints while binding */
  isMidpointSnappingEnabled: boolean;
+  /** user preference whether to show contextual hints above the toolbar */
+  showHints: boolean;
  /**
   * user preference for what the wheel does: with a `trackpad` a plain wheel
   * pans; with a `mouse` a plain wheel zooms. Ctrl/cmd+wheel (how a pinch is
@@ -108,6 +108,7 @@ exports[`exportToSvg > with default arguments 1`] = `
  "selectedLinearElement": null,
  "selectionElement": null,
  "shouldCacheIgnoreZoom": false,
+  "showHints": true,
  "showHyperlinkPopup": false,
  "showWelcomeScreen": false,
  "snapLines": [],