feat: Transform Plus button to Minus in case of Alt button is pressed (#4490)

## Description

ref #3994

<img width="260" alt="image"
src="https://github.com/user-attachments/assets/88652fef-7229-42cb-bf64-33ec07249426">

<img width="260" alt="image"
src="https://github.com/user-attachments/assets/e8199a7d-ebbc-4971-8641-d83424643ac8">

<img width="245" alt="image"
src="https://github.com/user-attachments/assets/804b8ef5-4f71-42b3-b9d1-5cf034706a02">


## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

apps/builder/app/builder/builder.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState, type ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { useStore } from "@nanostores/react";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { usePublish, $publisher } from "~/shared/pubsub";
@@ -32,10 +32,10 @@ import {
   $authTokenPermissions,
   $publisherHost,
   $imageLoader,
-  $textEditingInstanceSelector,
   $isDesignMode,
   $isContentMode,
   $userPlanFeatures,
+  subscribeModifierKeys,
 } from "~/shared/nano-states";
 import { $settings, type Settings } from "./shared/client-settings";
 import { builderUrl, getCanvasUrl } from "~/shared/router-utils";
@@ -56,7 +56,6 @@ import {
 import { CloneProjectDialog } from "~/shared/clone-project";
 import type { TokenPermissions } from "@webstudio-is/authorization-token";
 import { useToastErrors } from "~/shared/error/toast-error";
-import { canvasApi } from "~/shared/canvas-api";
 import { loadBuilderData, setBuilderData } from "~/shared/builder-data";
 import { initBuilderApi } from "~/shared/builder-api";
 import { updateWebstudioData } from "~/shared/instance-utils";
@@ -68,6 +67,7 @@ import {
   initCopyPaste,
   initCopyPasteForContentEditMode,
 } from "~/shared/copy-paste/init-copy-paste";
+import { useInertHandlers } from "./shared/inert-handlers";
 
 registerContainers();
 
@@ -320,10 +320,12 @@ export const Builder = ({
       // @todo we need to forward the events from canvas to builder and avoid importing this
       // in both places
       initCopyPaste(abortController);
+      subscribeModifierKeys({ signal: abortController.signal });
     }
 
     if (isContentMode) {
       initCopyPasteForContentEditMode(abortController);
+      subscribeModifierKeys({ signal: abortController.signal });
     }
 
     return () => {
@@ -344,57 +346,15 @@ export const Builder = ({
 
   const canvasUrl = getCanvasUrl();
 
-  /**
-   * Prevents Lexical text editor from stealing focus during rendering.
-   * Sets the inert attribute on the canvas body element and disables the text editor.
-   *
-   * This must be done synchronously to avoid the following issue:
-   *
-   * 1. Text editor is in edit state.
-   * 2. User focuses on the builder (e.g., clicks any input).
-   * 3. The text editor blur event triggers, causing a rerender on data change (data saved in onBlur).
-   * 4. Text editor rerenders, stealing focus from the builder.
-   * 5. Inert attribute is set asynchronously, but focus is already lost.
-   *
-   * Synchronous focusing and setInert prevent the text editor from focusing on render.
-   * This cannot be handled inside the canvas because the text editor toolbar is in the builder and focus events in the canvas should be ignored.
-   *
-   * Use onPointerDown instead of onFocus because Radix focus lock triggers on text edit blur
-   * before the focusin event when editing text inside a Radix dialog.
-   */
-  const handlePointerDown = useCallback((event: React.PointerEvent) => {
-    // Ignore toolbar focus events. See the onFocus handler in text-toolbar.tsx
-    if (false === event.defaultPrevented) {
-      canvasApi.setInert();
-      $textEditingInstanceSelector.set(undefined);
-    }
-  }, []);
-
-  /**
-   * Prevent Radix from stealing focus during editing in the style sources
-   * For example, when the user select or create new style source item inside a dialog.
-   */
-  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
-    if (event.target instanceof HTMLInputElement) {
-      canvasApi.setInert();
-    }
-  }, []);
-
-  /**
-   * Prevent Radix from stealing focus during editing in the settings panel.
-   * For example, when the user modifies the text content of an H1 element inside a dialog.
-   */
-  const handleInput = useCallback(() => {
-    canvasApi.setInert();
-  }, []);
+  const inertHandlers = useInertHandlers();
 
   return (
     <TooltipProvider>
       <div
         style={{ display: "contents" }}
-        onPointerDown={handlePointerDown}
-        onInput={handleInput}
-        onKeyDown={handleKeyDown}
+        onPointerDown={inertHandlers.onPointerDown}
+        onInput={inertHandlers.onInput}
+        onKeyDown={inertHandlers.onKeyDown}
       >
         <ChromeWrapper
           isPreviewMode={isPreviewMode}

apps/builder/app/builder/features/workspace/canvas-tools/canvas-tools.tsx

@@ -19,7 +19,7 @@ import { ResizeHandles } from "./resize-handles";
 import { MediaBadge } from "./media-badge";
 import { applyScale } from "./outline";
 import { $scale } from "~/builder/shared/nano-states";
-import { BlockChildHoveredInstanceOutline } from "./outline/editable-block-instance-outline";
+import { BlockChildHoveredInstanceOutline } from "./outline/block-instance-outline";
 
 const containerStyle = css({
   position: "absolute",