@nous-excalidraw/excalidraw 0.18.9-beta.2 → 0.18.9-beta.21

package/dist/dev/index.js

@@ -65,13 +65,13 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-DSYRTCAK.js";
+} from "./chunk-6PNL5SR6.js";
 import {
   define_import_meta_env_default
-} from "./chunk-CYLA22NC.js";
+} from "./chunk-FGNDYJ2B.js";
 import {
   en_default
-} from "./chunk-4JOINNOK.js";
+} from "./chunk-IXBA2ET3.js";
 import {
   percentages_default
 } from "./chunk-URPEKBQ3.js";
@@ -85,7 +85,7 @@ import {
 import React48, {
   useCallback as useCallback21,
   useContext as useContext4,
-  useEffect as useEffect51,
+  useEffect as useEffect50,
   useRef as useRef46,
   useState as useState44
 } from "react";
@@ -119,6 +119,7 @@ import {
   KEYS as KEYS55,
   APP_NAME as APP_NAME2,
   CURSOR_TYPE as CURSOR_TYPE4,
+  DEFAULT_TRANSFORM_HANDLE_SPACING as DEFAULT_TRANSFORM_HANDLE_SPACING3,
   DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
   DEFAULT_VERTICAL_ALIGN,
   DRAGGING_THRESHOLD as DRAGGING_THRESHOLD3,
@@ -143,6 +144,12 @@ import {
   YOUTUBE_STATES,
   getInteractiveZoomStep as getInteractiveZoomStep2,
   INITIAL_CANVAS_ZOOM,
+  scaleFontSizeForZoomChange,
+  normalizeSceneFontSizeForZoom,
+  scaleStrokeWidthForZoomChange as scaleStrokeWidthForZoomChange3,
+  getDisplaySceneStrokeWidth as getDisplaySceneStrokeWidth3,
+  STROKE_WIDTH_CUSTOM_DATA_KEY as STROKE_WIDTH_CUSTOM_DATA_KEY4,
+  getDefaultSceneFontSizeForZoom as getDefaultSceneFontSizeForZoom3,
   POINTER_EVENTS,
   TOOL_TYPE as TOOL_TYPE3,
   supportsResizeObserver as supportsResizeObserver2,
@@ -168,7 +175,7 @@ import {
   wrapEvent as wrapEvent2,
   updateObject as updateObject2,
   updateActiveTool as updateActiveTool8,
-  isTransparent as isTransparent6,
+  isTransparent as isTransparent7,
   easeToValuesRAF,
   muteFSAbortError as muteFSAbortError2,
   isTestEnv as isTestEnv5,
@@ -204,7 +211,6 @@ import {
 import {
   getObservedAppState,
   getCommonBounds as getCommonBounds11,
-  getCommonSelectionBounds as getCommonSelectionBounds2,
   getElementAbsoluteCoords as getElementAbsoluteCoords9,
   bindOrUnbindBindingElements as bindOrUnbindBindingElements2,
   fixBindingsAfterDeletion as fixBindingsAfterDeletion2,
@@ -235,6 +241,7 @@ import {
   isHoverNativeOutlineShapeElement as isHoverNativeOutlineShapeElement2,
   isImageElement as isImageElement9,
   isEmbeddableElement as isEmbeddableElement5,
+  shouldForceMaintainAspectRatio as shouldForceMaintainAspectRatio2,
   isInitializedImageElement as isInitializedImageElement3,
   isLinearElement as isLinearElement12,
   isLinearElementType as isLinearElementType2,
@@ -345,7 +352,8 @@ import {
   handleFocusPointPointerUp,
   maybeHandleArrowPointlikeDrag,
   getUncroppedWidthAndHeight as getUncroppedWidthAndHeight4,
-  getActiveTextElement as getActiveTextElement2
+  getActiveTextElement as getActiveTextElement2,
+  syncElementsStrokeWidthForZoom as syncElementsStrokeWidthForZoom2
 } from "@nous-excalidraw/element";
 
 // actions/actionDeleteSelected.tsx
@@ -398,7 +406,7 @@ var globImport_locales_json = __glob({
   "./locales/de-CH.json": () => import("./locales/de-CH-GCXOD4LK.js"),
   "./locales/de-DE.json": () => import("./locales/de-DE-CGDBECYD.js"),
   "./locales/el-GR.json": () => import("./locales/el-GR-G5QZC24A.js"),
-  "./locales/en.json": () => import("./locales/en-WD25OMHJ.js"),
+  "./locales/en.json": () => import("./locales/en-FKZ7NP7W.js"),
   "./locales/es-ES.json": () => import("./locales/es-ES-UMEOH76W.js"),
   "./locales/eu-ES.json": () => import("./locales/eu-ES-IWRZXJC5.js"),
   "./locales/fa-IR.json": () => import("./locales/fa-IR-QOYVIIJA.js"),
@@ -442,7 +450,7 @@ var globImport_locales_json = __glob({
   "./locales/uk-UA.json": () => import("./locales/uk-UA-XYAFHHJW.js"),
   "./locales/uz-UZ.json": () => import("./locales/uz-UZ-LF3CBRYE.js"),
   "./locales/vi-VN.json": () => import("./locales/vi-VN-WDPZEUOJ.js"),
-  "./locales/zh-CN.json": () => import("./locales/zh-CN-SZ37453H.js"),
+  "./locales/zh-CN.json": () => import("./locales/zh-CN-MQID2QWX.js"),
   "./locales/zh-HK.json": () => import("./locales/zh-HK-QDQ5QNBC.js"),
   "./locales/zh-TW.json": () => import("./locales/zh-TW-CYU6GFBV.js")
 });
@@ -901,6 +909,13 @@ var DiamondIcon = createIcon(
   ] }),
   tablerIconProps
 );
+var TriangleIcon = createIcon(
+  /* @__PURE__ */ jsxs("g", { strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 4l8 16h-16z" })
+  ] }),
+  tablerIconProps
+);
 var EllipseIcon = createIcon(
   /* @__PURE__ */ jsxs("g", { strokeWidth: "1.5", children: [
     /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
@@ -3671,10 +3686,11 @@ import {
   DEFAULT_ELEMENT_STROKE_PICKS as DEFAULT_ELEMENT_STROKE_PICKS2,
   ARROW_TYPE,
   DEFAULT_FONT_FAMILY,
-  DEFAULT_FONT_SIZE,
   FONT_FAMILY as FONT_FAMILY3,
   ROUNDNESS,
-  STROKE_WIDTH,
+  STROKE_WIDTH_CUSTOM_DATA_KEY,
+  getStrokeWidthPresetsForZoom,
+  getFontSizePresetsForZoom,
   VERTICAL_ALIGN,
   KEYS as KEYS11,
   randomInteger,
@@ -3683,8 +3699,7 @@ import {
   getLineHeight,
   isTransparent,
   reduceToCommonValue,
-  invariant,
-  FONT_SIZES
+  invariant
 } from "@nous-excalidraw/common";
 import { canBecomePolygon, getNonDeletedElements as getNonDeletedElements4 } from "@nous-excalidraw/element";
 import {
@@ -6612,50 +6627,63 @@ var actionChangeStrokeWidth = register({
         elements,
         appState,
         (el) => newElementWith2(el, {
-          strokeWidth: value
+          strokeWidth: value,
+          customData: {
+            ...el.customData,
+            [STROKE_WIDTH_CUSTOM_DATA_KEY]: true
+          }
         })
       ),
-      appState: { ...appState, currentItemStrokeWidth: value },
+      appState: {
+        ...appState,
+        currentItemStrokeWidth: value,
+        currentItemStrokeWidthCustom: true
+      },
       captureUpdate: CaptureUpdateAction5.IMMEDIATELY
     };
   },
-  PanelComponent: ({ elements, appState, updateData, app, data }) => /* @__PURE__ */ jsxs20("fieldset", { children: [
-    /* @__PURE__ */ jsx34("legend", { children: t("labels.strokeWidth") }),
-    /* @__PURE__ */ jsx34("div", { className: "buttonList", children: /* @__PURE__ */ jsx34(
-      RadioSelection,
-      {
-        group: "stroke-width",
-        options: [
-          {
-            value: STROKE_WIDTH.thin,
-            text: t("labels.thin"),
-            icon: StrokeWidthBaseIcon,
-            testId: "strokeWidth-thin"
-          },
-          {
-            value: STROKE_WIDTH.bold,
-            text: t("labels.bold"),
-            icon: StrokeWidthBoldIcon,
-            testId: "strokeWidth-bold"
-          },
-          {
-            value: STROKE_WIDTH.extraBold,
-            text: t("labels.extraBold"),
-            icon: StrokeWidthExtraBoldIcon,
-            testId: "strokeWidth-extraBold"
-          }
-        ],
-        value: getFormValue(
-          elements,
-          app,
-          (element) => element.strokeWidth,
-          (element) => element.hasOwnProperty("strokeWidth"),
-          (hasSelection) => hasSelection ? null : appState.currentItemStrokeWidth
-        ),
-        onChange: (value) => updateData(value)
-      }
-    ) })
-  ] })
+  PanelComponent: ({ elements, appState, updateData, app, data }) => {
+    const strokeWidthPresets = getStrokeWidthPresetsForZoom(
+      appState.zoom.value
+    );
+    return /* @__PURE__ */ jsxs20("fieldset", { children: [
+      /* @__PURE__ */ jsx34("legend", { children: t("labels.strokeWidth") }),
+      /* @__PURE__ */ jsx34("div", { className: "buttonList", children: /* @__PURE__ */ jsx34(
+        RadioSelection,
+        {
+          group: "stroke-width",
+          options: [
+            {
+              value: strokeWidthPresets.thin,
+              text: t("labels.thin"),
+              icon: StrokeWidthBaseIcon,
+              testId: "strokeWidth-thin"
+            },
+            {
+              value: strokeWidthPresets.bold,
+              text: t("labels.bold"),
+              icon: StrokeWidthBoldIcon,
+              testId: "strokeWidth-bold"
+            },
+            {
+              value: strokeWidthPresets.extraBold,
+              text: t("labels.extraBold"),
+              icon: StrokeWidthExtraBoldIcon,
+              testId: "strokeWidth-extraBold"
+            }
+          ],
+          value: getFormValue(
+            elements,
+            app,
+            (element) => element.strokeWidth,
+            (element) => element.hasOwnProperty("strokeWidth"),
+            (hasSelection) => hasSelection ? null : appState.currentItemStrokeWidth
+          ),
+          onChange: (value) => updateData(value)
+        }
+      ) })
+    ] });
+  }
 });
 var actionChangeSloppiness = register({
   name: "changeSloppiness",
@@ -6822,6 +6850,7 @@ var actionChangeFontSize = register(
     },
     PanelComponent: ({ elements, appState, updateData, app, data }) => {
       const { isCompact } = getStylesPanelInfo(app);
+      const fontSizePresets = getFontSizePresetsForZoom(appState.zoom.value);
       return /* @__PURE__ */ jsxs20("fieldset", { children: [
         /* @__PURE__ */ jsx34("legend", { children: t("labels.fontSize") }),
         /* @__PURE__ */ jsx34("div", { className: "buttonList", children: /* @__PURE__ */ jsx34(
@@ -6830,25 +6859,25 @@ var actionChangeFontSize = register(
             group: "font-size",
             options: [
               {
-                value: FONT_SIZES.sm,
+                value: fontSizePresets.sm,
                 text: t("labels.small"),
                 icon: FontSizeSmallIcon,
                 testId: "fontSize-small"
               },
               {
-                value: FONT_SIZES.md,
+                value: fontSizePresets.md,
                 text: t("labels.medium"),
                 icon: FontSizeMediumIcon,
                 testId: "fontSize-medium"
               },
               {
-                value: FONT_SIZES.lg,
+                value: fontSizePresets.lg,
                 text: t("labels.large"),
                 icon: FontSizeLargeIcon,
                 testId: "fontSize-large"
               },
               {
-                value: FONT_SIZES.xl,
+                value: fontSizePresets.xl,
                 text: t("labels.veryLarge"),
                 icon: FontSizeExtraLargeIcon,
                 testId: "fontSize-veryLarge"
@@ -6874,7 +6903,7 @@ var actionChangeFontSize = register(
                 element,
                 app.scene.getNonDeletedElementsMap()
               ) !== null,
-              (hasSelection) => hasSelection ? null : appState.currentItemFontSize || DEFAULT_FONT_SIZE
+              (hasSelection) => hasSelection ? null : appState.currentItemFontSize || fontSizePresets.md
             ),
             onChange: (value) => {
               withCaretPositionPreservation(
@@ -7882,11 +7911,13 @@ import {
   ZOOM_STEP,
   getInteractiveZoomStep,
   getDisplayedZoomValue,
+  getDefaultSceneFontSizeForZoom as getDefaultSceneFontSizeForZoom2,
+  scaleStrokeWidthForZoomChange as scaleStrokeWidthForZoomChange2,
   updateActiveTool as updateActiveTool2,
   CODES as CODES2,
   KEYS as KEYS12
 } from "@nous-excalidraw/common";
-import { getNonDeletedElements as getNonDeletedElements5 } from "@nous-excalidraw/element";
+import { getNonDeletedElements as getNonDeletedElements5, syncElementsStrokeWidthForZoom } from "@nous-excalidraw/element";
 import { newElementWith as newElementWith3 } from "@nous-excalidraw/element";
 import { getCommonBounds } from "@nous-excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction6 } from "@nous-excalidraw/element";
@@ -8048,6 +8079,10 @@ var setCursorForShape = (interactiveCanvas, appState) => {
 };
 
 // scene/zoom.ts
+import {
+  getDefaultSceneFontSizeForZoom,
+  scaleStrokeWidthForZoomChange
+} from "@nous-excalidraw/common";
 var getStateForZoom = ({
   viewportX,
   viewportY,
@@ -8065,7 +8100,14 @@ var getStateForZoom = ({
     scrollY: baseScrollY + zoomOffsetScrollY,
     zoom: {
       value: nextZoom
-    }
+    },
+    currentItemStrokeWidth: scaleStrokeWidthForZoomChange(
+      appState.currentItemStrokeWidth,
+      currentZoom,
+      nextZoom,
+      appState.currentItemStrokeWidthCustom
+    ),
+    currentItemFontSize: getDefaultSceneFontSizeForZoom(nextZoom)
   };
 };
 
@@ -8143,21 +8185,27 @@ var actionZoomIn = register({
   viewMode: true,
   icon: ZoomInIcon,
   trackEvent: { category: "canvas" },
-  perform: (_elements, appState, _, app) => {
+  perform: (elements, appState, _, app) => {
     const displayedZoomValue = getDisplayedZoomValue(appState.zoom.value);
+    const zoomState = getStateForZoom(
+      {
+        viewportX: appState.width / 2 + appState.offsetLeft,
+        viewportY: appState.height / 2 + appState.offsetTop,
+        nextZoom: getNormalizedZoom(
+          displayedZoomValue + getInteractiveZoomStep(appState.zoom.value, "in")
+        )
+      },
+      appState
+    );
     return {
+      elements: syncElementsStrokeWidthForZoom(
+        elements,
+        appState.zoom.value,
+        zoomState.zoom.value
+      ),
       appState: {
         ...appState,
-        ...getStateForZoom(
-          {
-            viewportX: appState.width / 2 + appState.offsetLeft,
-            viewportY: appState.height / 2 + appState.offsetTop,
-            nextZoom: getNormalizedZoom(
-              displayedZoomValue + getInteractiveZoomStep(appState.zoom.value, "in")
-            )
-          },
-          appState
-        ),
+        ...zoomState,
         userToFollow: null
       },
       captureUpdate: CaptureUpdateAction6.EVENTUALLY
@@ -8185,21 +8233,27 @@ var actionZoomOut = register({
   icon: ZoomOutIcon,
   viewMode: true,
   trackEvent: { category: "canvas" },
-  perform: (_elements, appState, _, app) => {
+  perform: (elements, appState, _, app) => {
     const displayedZoomValue = getDisplayedZoomValue(appState.zoom.value);
+    const zoomState = getStateForZoom(
+      {
+        viewportX: appState.width / 2 + appState.offsetLeft,
+        viewportY: appState.height / 2 + appState.offsetTop,
+        nextZoom: getNormalizedZoom(
+          displayedZoomValue - getInteractiveZoomStep(appState.zoom.value, "out")
+        )
+      },
+      appState
+    );
     return {
+      elements: syncElementsStrokeWidthForZoom(
+        elements,
+        appState.zoom.value,
+        zoomState.zoom.value
+      ),
       appState: {
         ...appState,
-        ...getStateForZoom(
-          {
-            viewportX: appState.width / 2 + appState.offsetLeft,
-            viewportY: appState.height / 2 + appState.offsetTop,
-            nextZoom: getNormalizedZoom(
-              displayedZoomValue - getInteractiveZoomStep(appState.zoom.value, "out")
-            )
-          },
-          appState
-        ),
+        ...zoomState,
         userToFollow: null
       },
       captureUpdate: CaptureUpdateAction6.EVENTUALLY
@@ -8227,18 +8281,24 @@ var actionResetZoom = register({
   icon: ZoomResetIcon,
   viewMode: true,
   trackEvent: { category: "canvas" },
-  perform: (_elements, appState, _, app) => {
+  perform: (elements, appState, _, app) => {
+    const zoomState = getStateForZoom(
+      {
+        viewportX: appState.width / 2 + appState.offsetLeft,
+        viewportY: appState.height / 2 + appState.offsetTop,
+        nextZoom: getNormalizedZoom(1)
+      },
+      appState
+    );
     return {
+      elements: syncElementsStrokeWidthForZoom(
+        elements,
+        appState.zoom.value,
+        zoomState.zoom.value
+      ),
       appState: {
         ...appState,
-        ...getStateForZoom(
-          {
-            viewportX: appState.width / 2 + appState.offsetLeft,
-            viewportY: appState.height / 2 + appState.offsetTop,
-            nextZoom: getNormalizedZoom(1)
-          },
-          appState
-        ),
+        ...zoomState,
         userToFollow: null
       },
       captureUpdate: CaptureUpdateAction6.EVENTUALLY
@@ -8276,19 +8336,24 @@ var zoomToFitBounds = ({
   bounds,
   appState,
   canvasOffsets,
+  fitCanvasOffsets,
+  scrollCanvasOffsets,
   fitToViewport = false,
   viewportZoomFactor = 1,
   minZoom = -Infinity,
-  maxZoom = Infinity
+  maxZoom = Infinity,
+  elements
 }) => {
   viewportZoomFactor = clamp(viewportZoomFactor, MIN_ZOOM, MAX_ZOOM);
   const [x1, y1, x2, y2] = bounds;
   const centerX = (x1 + x2) / 2;
   const centerY = (y1 + y2) / 2;
-  const canvasOffsetLeft = canvasOffsets?.left ?? 0;
-  const canvasOffsetTop = canvasOffsets?.top ?? 0;
-  const canvasOffsetRight = canvasOffsets?.right ?? 0;
-  const canvasOffsetBottom = canvasOffsets?.bottom ?? 0;
+  const fitOffsets = fitCanvasOffsets ?? canvasOffsets;
+  const scrollOffsets = scrollCanvasOffsets ?? fitOffsets ?? canvasOffsets;
+  const canvasOffsetLeft = fitOffsets?.left ?? 0;
+  const canvasOffsetTop = fitOffsets?.top ?? 0;
+  const canvasOffsetRight = fitOffsets?.right ?? 0;
+  const canvasOffsetBottom = fitOffsets?.bottom ?? 0;
   const effectiveCanvasWidth = appState.width - canvasOffsetLeft - canvasOffsetRight;
   const effectiveCanvasHeight = appState.height - canvasOffsetTop - canvasOffsetBottom;
   let adjustedZoomValue;
@@ -8318,37 +8383,54 @@ var zoomToFitBounds = ({
       width: appState.width,
       height: appState.height
     },
-    offsets: canvasOffsets,
+    offsets: scrollOffsets,
     zoom: { value: newZoomValue }
   });
+  const fromZoom = appState.zoom.value;
   return {
     appState: {
       ...appState,
       scrollX: centerScroll.scrollX,
       scrollY: centerScroll.scrollY,
-      zoom: { value: newZoomValue }
+      zoom: { value: newZoomValue },
+      currentItemStrokeWidth: scaleStrokeWidthForZoomChange2(
+        appState.currentItemStrokeWidth,
+        fromZoom,
+        newZoomValue,
+        appState.currentItemStrokeWidthCustom
+      ),
+      currentItemFontSize: getDefaultSceneFontSizeForZoom2(newZoomValue)
+    },
+    ...elements && {
+      elements: syncElementsStrokeWidthForZoom(elements, fromZoom, newZoomValue)
     },
     captureUpdate: CaptureUpdateAction6.EVENTUALLY
   };
 };
 var zoomToFit = ({
   canvasOffsets,
+  fitCanvasOffsets,
+  scrollCanvasOffsets,
   targetElements,
   appState,
   fitToViewport,
   viewportZoomFactor,
   minZoom,
-  maxZoom
+  maxZoom,
+  elements
 }) => {
   const commonBounds = getCommonBounds(getNonDeletedElements5(targetElements));
   return zoomToFitBounds({
     canvasOffsets,
+    fitCanvasOffsets,
+    scrollCanvasOffsets,
     bounds: commonBounds,
     appState,
     fitToViewport,
     viewportZoomFactor,
     minZoom,
-    maxZoom
+    maxZoom,
+    elements
   });
 };
 var actionZoomToFitSelectionInViewport = register({
@@ -8360,6 +8442,7 @@ var actionZoomToFitSelectionInViewport = register({
     const selectedElements = app.scene.getSelectedElements(appState);
     return zoomToFit({
       targetElements: selectedElements.length ? selectedElements : elements,
+      elements,
       appState: {
         ...appState,
         userToFollow: null
@@ -8381,6 +8464,7 @@ var actionZoomToFitSelection = register({
     const selectedElements = app.scene.getSelectedElements(appState);
     return zoomToFit({
       targetElements: selectedElements.length ? selectedElements : elements,
+      elements,
       appState: {
         ...appState,
         userToFollow: null
@@ -8400,6 +8484,7 @@ var actionZoomToFit = register({
   trackEvent: { category: "canvas" },
   perform: (elements, appState, _, app) => zoomToFit({
     targetElements: elements,
+    elements,
     appState: {
       ...appState,
       userToFollow: null
@@ -9640,7 +9725,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-OB55CB4R.js").then(
+        (blob2) => import("./data/image-5IO6LC6F.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -10086,11 +10171,12 @@ var actionExportWithDarkMode = register({
 
 // actions/actionStyles.ts
 import {
-  DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE2,
+  DEFAULT_FONT_SIZE,
   DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY2,
   DEFAULT_TEXT_ALIGN,
   CODES as CODES3,
   KEYS as KEYS17,
+  STROKE_WIDTH_CUSTOM_DATA_KEY as STROKE_WIDTH_CUSTOM_DATA_KEY2,
   getLineHeight as getLineHeight2
 } from "@nous-excalidraw/common";
 import { newElementWith as newElementWith5 } from "@nous-excalidraw/element";
@@ -10164,6 +10250,12 @@ var actionPasteStyles = register({
           if (!elementStylesToCopyFrom) {
             return element;
           }
+          const customData = { ...element.customData };
+          if (elementStylesToCopyFrom?.customData?.[STROKE_WIDTH_CUSTOM_DATA_KEY2]) {
+            customData[STROKE_WIDTH_CUSTOM_DATA_KEY2] = true;
+          } else {
+            delete customData[STROKE_WIDTH_CUSTOM_DATA_KEY2];
+          }
           let newElement7 = newElementWith5(element, {
             backgroundColor: elementStylesToCopyFrom?.backgroundColor,
             strokeWidth: elementStylesToCopyFrom?.strokeWidth,
@@ -10172,13 +10264,14 @@ var actionPasteStyles = register({
             fillStyle: elementStylesToCopyFrom?.fillStyle,
             opacity: elementStylesToCopyFrom?.opacity,
             roughness: elementStylesToCopyFrom?.roughness,
+            customData,
             roundness: elementStylesToCopyFrom.roundness ? canApplyRoundnessTypeToElement(
               elementStylesToCopyFrom.roundness.type,
               element
             ) ? elementStylesToCopyFrom.roundness : getDefaultRoundnessTypeForElement(element) : null
           });
           if (isTextElement3(newElement7)) {
-            const fontSize = elementStylesToCopyFrom.fontSize || DEFAULT_FONT_SIZE2;
+            const fontSize = elementStylesToCopyFrom.fontSize || DEFAULT_FONT_SIZE;
             const fontFamily = elementStylesToCopyFrom.fontFamily || DEFAULT_FONT_FAMILY2;
             newElement7 = newElementWith5(newElement7, {
               fontSize,
@@ -12650,7 +12743,7 @@ import { updateBindings } from "@nous-excalidraw/element";
 import { jsx as jsx50 } from "react/jsx-runtime";
 var GAP_HORIZONTAL = 8;
 var GAP_VERTICAL = 10;
-var GENERIC_TYPES = ["rectangle", "diamond", "ellipse"];
+var GENERIC_TYPES = ["rectangle", "diamond", "triangle", "ellipse"];
 var LINEAR_TYPES = [
   "line",
   "sharpArrow",
@@ -12776,6 +12869,7 @@ var Panel = ({
   ] : conversionType === "generic" ? [
     ["rectangle", RectangleIcon],
     ["diamond", DiamondIcon],
+    ["triangle", TriangleIcon],
     ["ellipse", EllipseIcon]
   ] : [];
   return /* @__PURE__ */ jsx50(
@@ -13130,7 +13224,7 @@ var convertElementType = (element, targetType, app) => {
       newElement2({
         ...element,
         type: targetType,
-        roundness: targetType === "diamond" && element.roundness ? {
+        roundness: (targetType === "diamond" || targetType === "triangle") && element.roundness ? {
           type: isUsingAdaptiveRadius3(targetType) ? ROUNDNESS3.ADAPTIVE_RADIUS : ROUNDNESS3.PROPORTIONAL_RADIUS
         } : element.roundness
       })
@@ -16802,6 +16896,14 @@ var SHAPES = [
     fillable: true,
     toolbar: true
   },
+  {
+    icon: TriangleIcon,
+    value: "triangle",
+    key: KEYS35.G,
+    numericKey: null,
+    fillable: true,
+    toolbar: true
+  },
   {
     icon: EllipseIcon,
     value: "ellipse",
@@ -18826,9 +18928,49 @@ import {
   getUpdatedTimestamp
 } from "@nous-excalidraw/common";
 
-// ../element/src/shape.ts
-import { simplify } from "points-on-curve";
-import { getStroke } from "perfect-freehand";
+// ../element/src/renderElement.ts
+import rough2 from "roughjs/bin/rough";
+import {
+  isRightAngleRads,
+  lineSegment as lineSegment7,
+  pointFrom as pointFrom18,
+  pointRotateRads as pointRotateRads14
+} from "@nous-excalidraw/math";
+import {
+  BOUND_TEXT_PADDING as BOUND_TEXT_PADDING4,
+  DEFAULT_REDUCED_GLOBAL_ALPHA,
+  ELEMENT_READY_TO_ERASE_OPACITY,
+  FRAME_STYLE,
+  DARK_THEME_FILTER,
+  MIME_TYPES as MIME_TYPES7,
+  THEME as THEME10,
+  distance,
+  getFontString as getFontString5,
+  isRTL,
+  getVerticalOffset,
+  invariant as invariant13,
+  applyDarkModeFilter as applyDarkModeFilter2,
+  isSafari,
+  isTransparent as isTransparent6
+} from "@nous-excalidraw/common";
+
+// ../element/src/bounds.ts
+import rough from "roughjs/bin/rough";
+import {
+  arrayToMap as arrayToMap17,
+  invariant as invariant12,
+  rescalePoints,
+  sizeOf,
+  STROKE_WIDTH
+} from "@nous-excalidraw/common";
+import {
+  degreesToRadians,
+  lineSegment as lineSegment5,
+  pointDistance as pointDistance7,
+  pointFrom as pointFrom14,
+  pointFromArray as pointFromArray3,
+  pointRotateRads as pointRotateRads11
+} from "@nous-excalidraw/math";
 
 // ../utils/src/shape.ts
 import { pointsOnBezierCurves } from "points-on-curve";
@@ -18863,162 +19005,30 @@ var getCurvePathOps = (shape) => {
   return shape.sets[0].ops;
 };
 
+// ../element/src/bounds.ts
+import { pointsOnBezierCurves as pointsOnBezierCurves2 } from "points-on-curve";
+import { getDisplaySceneStrokeWidth as getDisplaySceneStrokeWidth2 } from "@nous-excalidraw/common";
+
 // ../element/src/shape.ts
+import { simplify } from "points-on-curve";
+import { getStroke } from "perfect-freehand";
 import {
-  pointFrom as pointFrom18,
-  pointDistance as pointDistance7,
-  pointRotateRads as pointRotateRads14
+  pointFrom as pointFrom13,
+  pointDistance as pointDistance6,
+  pointRotateRads as pointRotateRads10
 } from "@nous-excalidraw/math";
 import {
   ROUGHNESS,
-  THEME as THEME10,
+  THEME as THEME9,
   isTransparent as isTransparent5,
   assertNever as assertNever3,
   COLOR_PALETTE as COLOR_PALETTE4,
   LINE_POLYGON_POINT_MERGE_DISTANCE,
-  applyDarkModeFilter as applyDarkModeFilter2
-} from "@nous-excalidraw/common";
-import { RoughGenerator } from "roughjs/bin/generator";
-
-// ../element/src/renderElement.ts
-import rough2 from "roughjs/bin/rough";
-import {
-  isRightAngleRads,
-  lineSegment as lineSegment7,
-  pointFrom as pointFrom17,
-  pointRotateRads as pointRotateRads13
-} from "@nous-excalidraw/math";
-import {
-  BOUND_TEXT_PADDING as BOUND_TEXT_PADDING4,
-  DEFAULT_REDUCED_GLOBAL_ALPHA,
-  ELEMENT_READY_TO_ERASE_OPACITY,
-  FRAME_STYLE,
-  DARK_THEME_FILTER,
-  MIME_TYPES as MIME_TYPES7,
-  THEME as THEME9,
-  distance,
-  getFontString as getFontString5,
-  isRTL,
-  getVerticalOffset,
-  invariant as invariant13,
   applyDarkModeFilter,
-  isSafari
-} from "@nous-excalidraw/common";
-
-// ../element/src/bounds.ts
-import rough from "roughjs/bin/rough";
-import {
-  arrayToMap as arrayToMap17,
-  invariant as invariant12,
-  rescalePoints,
-  sizeOf
-} from "@nous-excalidraw/common";
-import {
-  degreesToRadians,
-  lineSegment as lineSegment5,
-  pointDistance as pointDistance6,
-  pointFrom as pointFrom13,
-  pointFromArray as pointFromArray3,
-  pointRotateRads as pointRotateRads10
-} from "@nous-excalidraw/math";
-import { pointsOnBezierCurves as pointsOnBezierCurves2 } from "points-on-curve";
-
-// ../element/src/linearElementEditor.ts
-import {
-  pointCenter,
-  pointFrom as pointFrom12,
-  pointRotateRads as pointRotateRads9,
-  pointsEqual as pointsEqual7,
-  pointDistance as pointDistance5,
-  vectorFromPoint as vectorFromPoint7,
-  curveLength,
-  curvePointAtLength
-} from "@nous-excalidraw/math";
-import {
-  DRAGGING_THRESHOLD,
-  KEYS as KEYS39,
-  shouldRotateWithDiscreteAngle as shouldRotateWithDiscreteAngle2,
-  getGridPoint,
-  invariant as invariant11,
-  isShallowEqual as isShallowEqual2,
-  getFeatureFlag as getFeatureFlag2
+  isCrispScreenStroke,
+  getTierScreenStrokeWidth as getTierScreenStrokeWidth2
 } from "@nous-excalidraw/common";
-import {
-  deconstructLinearOrFreeDrawElement as deconstructLinearOrFreeDrawElement2,
-  getSnapOutlineMidPoint,
-  isPathALoop as isPathALoop3,
-  moveArrowAboveBindable,
-  projectFixedPointOntoDiagonal as projectFixedPointOntoDiagonal2
-} from "@nous-excalidraw/element";
-
-// ../element/src/binding.ts
-import {
-  arrayToMap as arrayToMap16,
-  getFeatureFlag,
-  invariant as invariant10,
-  isTransparent as isTransparent4
-} from "@nous-excalidraw/common";
-import {
-  PRECISION as PRECISION2,
-  clamp as clamp3,
-  lineSegment as lineSegment4,
-  pointDistance as pointDistance4,
-  pointDistanceSq,
-  pointFrom as pointFrom11,
-  pointFromVector as pointFromVector5,
-  pointRotateRads as pointRotateRads8,
-  pointsEqual as pointsEqual5,
-  vectorFromPoint as vectorFromPoint6,
-  vectorNormalize as vectorNormalize3,
-  vectorScale as vectorScale6
-} from "@nous-excalidraw/math";
-
-// ../element/src/collision.ts
-import { invariant as invariant7, isTransparent as isTransparent3 } from "@nous-excalidraw/common";
-import {
-  curveIntersectLineSegment,
-  isPointWithinBounds,
-  lineSegment as lineSegment3,
-  lineSegmentIntersectionPoints as lineSegmentIntersectionPoints2,
-  pointFrom as pointFrom8,
-  pointFromVector as pointFromVector3,
-  pointRotateRads as pointRotateRads6,
-  pointsEqual as pointsEqual2,
-  vectorFromPoint as vectorFromPoint3,
-  vectorNormalize as vectorNormalize2,
-  vectorScale as vectorScale3
-} from "@nous-excalidraw/math";
-import {
-  ellipse as ellipse2,
-  ellipseSegmentInterceptPoints
-} from "@nous-excalidraw/math/ellipse";
-
-// ../element/src/utils.ts
-import {
-  DEFAULT_ADAPTIVE_RADIUS,
-  DEFAULT_PROPORTIONAL_RADIUS,
-  invariant as invariant5,
-  LINE_CONFIRM_THRESHOLD,
-  ROUNDNESS as ROUNDNESS5
-} from "@nous-excalidraw/common";
-import {
-  bezierEquation,
-  curve as curve2,
-  curveCatmullRomCubicApproxPoints,
-  curveOffsetPoints,
-  lineSegment as lineSegment2,
-  lineSegmentIntersectionPoints,
-  pointDistance as pointDistance2,
-  pointFrom as pointFrom6,
-  pointFromArray as pointFromArray2,
-  pointFromVector as pointFromVector2,
-  pointRotateRads as pointRotateRads3,
-  pointTranslate,
-  rectangle,
-  vectorFromPoint as vectorFromPoint2,
-  vectorNormalize,
-  vectorScale as vectorScale2
-} from "@nous-excalidraw/math";
+import { RoughGenerator } from "roughjs/bin/generator";
 
 // ../element/src/typeChecks.ts
 import { ROUNDNESS as ROUNDNESS4, assertNever as assertNever2 } from "@nous-excalidraw/common";
@@ -19055,81 +19065,156 @@ var isBoundToContainer5 = (element) => {
 };
 
 // ../element/src/utils.ts
-var isPathALoop2 = (points, zoomValue = 1) => {
-  if (points.length >= 3) {
-    const [first, last] = [points[0], points[points.length - 1]];
-    const distance3 = pointDistance2(first, last);
-    return distance3 <= LINE_CONFIRM_THRESHOLD / zoomValue;
-  }
-  return false;
-};
-var getCornerRadius = (x, element) => {
-  if (element.roundness?.type === ROUNDNESS5.PROPORTIONAL_RADIUS || element.roundness?.type === ROUNDNESS5.LEGACY) {
-    return x * DEFAULT_PROPORTIONAL_RADIUS;
-  }
-  if (element.roundness?.type === ROUNDNESS5.ADAPTIVE_RADIUS) {
-    const fixedRadiusSize = element.roundness?.value ?? DEFAULT_ADAPTIVE_RADIUS;
-    const CUTOFF_SIZE = fixedRadiusSize / DEFAULT_PROPORTIONAL_RADIUS;
-    if (x <= CUTOFF_SIZE) {
-      return x * DEFAULT_PROPORTIONAL_RADIUS;
-    }
-    return fixedRadiusSize;
-  }
-  return 0;
-};
+import {
+  DEFAULT_ADAPTIVE_RADIUS,
+  DEFAULT_PROPORTIONAL_RADIUS,
+  invariant as invariant11,
+  LINE_CONFIRM_THRESHOLD,
+  ROUNDNESS as ROUNDNESS5
+} from "@nous-excalidraw/common";
+import {
+  bezierEquation,
+  curve as curve2,
+  curveCatmullRomCubicApproxPoints,
+  curveOffsetPoints,
+  lineSegment as lineSegment4,
+  lineSegmentIntersectionPoints as lineSegmentIntersectionPoints2,
+  pointDistance as pointDistance5,
+  pointFrom as pointFrom12,
+  pointFromArray as pointFromArray2,
+  pointFromVector as pointFromVector5,
+  pointRotateRads as pointRotateRads9,
+  pointTranslate as pointTranslate2,
+  rectangle,
+  vectorFromPoint as vectorFromPoint7,
+  vectorNormalize as vectorNormalize3,
+  vectorScale as vectorScale6
+} from "@nous-excalidraw/math";
+
+// ../element/src/strokeWidth.ts
+import {
+  STROKE_WIDTH_CUSTOM_DATA_KEY as STROKE_WIDTH_CUSTOM_DATA_KEY3,
+  STROKE_WIDTH_SCREEN,
+  getDisplaySceneStrokeWidth,
+  getEffectiveStrokeWidth as getEffectiveSceneStrokeWidth,
+  getTierScreenStrokeWidth
+} from "@nous-excalidraw/common";
+var isElementStrokeWidthCustom = (element) => element.customData?.[STROKE_WIDTH_CUSTOM_DATA_KEY3] === true;
+var getEffectiveStrokeWidth = (element, zoom, renderScale = zoom) => getEffectiveSceneStrokeWidth(
+  element.strokeWidth,
+  zoom,
+  renderScale,
+  isElementStrokeWidthCustom(element)
+);
+
+// ../element/src/collision.ts
+import { invariant as invariant10, isTransparent as isTransparent4 } from "@nous-excalidraw/common";
+import {
+  curveIntersectLineSegment,
+  isPointWithinBounds,
+  lineSegment as lineSegment3,
+  lineSegmentIntersectionPoints,
+  pointFrom as pointFrom11,
+  pointFromVector as pointFromVector4,
+  pointRotateRads as pointRotateRads8,
+  pointsEqual as pointsEqual7,
+  vectorFromPoint as vectorFromPoint6,
+  vectorNormalize as vectorNormalize2,
+  vectorScale as vectorScale5
+} from "@nous-excalidraw/math";
+import {
+  ellipse as ellipse2,
+  ellipseSegmentInterceptPoints
+} from "@nous-excalidraw/math/ellipse";
 
 // ../element/src/textElement.ts
 import {
   ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO,
   ARROW_LABEL_WIDTH_FRACTION,
   BOUND_TEXT_PADDING as BOUND_TEXT_PADDING3,
-  DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE4,
+  DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE3,
   TEXT_ALIGN as TEXT_ALIGN2,
   VERTICAL_ALIGN as VERTICAL_ALIGN3,
   getFontString as getFontString4,
   isProdEnv as isProdEnv2,
-  invariant as invariant6
+  invariant as invariant9
 } from "@nous-excalidraw/common";
-import { pointFrom as pointFrom7, pointRotateRads as pointRotateRads4 } from "@nous-excalidraw/math";
+import { pointFrom as pointFrom10, pointRotateRads as pointRotateRads7 } from "@nous-excalidraw/math";
 
-// ../element/src/textMeasurements.ts
+// ../element/src/linearElementEditor.ts
 import {
-  BOUND_TEXT_PADDING as BOUND_TEXT_PADDING2,
-  DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE3,
-  DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY3,
-  getFontString as getFontString3,
-  isTestEnv,
-  normalizeEOL
+  pointCenter,
+  pointFrom as pointFrom9,
+  pointRotateRads as pointRotateRads6,
+  pointsEqual as pointsEqual6,
+  pointDistance as pointDistance4,
+  vectorFromPoint as vectorFromPoint5,
+  curveLength,
+  curvePointAtLength
+} from "@nous-excalidraw/math";
+import {
+  DRAGGING_THRESHOLD,
+  KEYS as KEYS39,
+  shouldRotateWithDiscreteAngle as shouldRotateWithDiscreteAngle2,
+  getGridPoint,
+  invariant as invariant8,
+  isShallowEqual as isShallowEqual2,
+  getFeatureFlag as getFeatureFlag2
 } from "@nous-excalidraw/common";
-var DUMMY_TEXT = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toLocaleUpperCase();
+import {
+  deconstructLinearOrFreeDrawElement as deconstructLinearOrFreeDrawElement2,
+  getSnapOutlineMidPoint,
+  isPathALoop as isPathALoop2,
+  moveArrowAboveBindable,
+  projectFixedPointOntoDiagonal as projectFixedPointOntoDiagonal2
+} from "@nous-excalidraw/element";
 
-// ../element/src/textWrapping.ts
-import { isDevEnv as isDevEnv3, isTestEnv as isTestEnv2 } from "@nous-excalidraw/common";
+// ../element/src/binding.ts
+import {
+  arrayToMap as arrayToMap16,
+  getFeatureFlag,
+  invariant as invariant7,
+  isTransparent as isTransparent3
+} from "@nous-excalidraw/common";
+import {
+  PRECISION as PRECISION2,
+  clamp as clamp3,
+  lineSegment as lineSegment2,
+  pointDistance as pointDistance3,
+  pointDistanceSq,
+  pointFrom as pointFrom8,
+  pointFromVector as pointFromVector3,
+  pointRotateRads as pointRotateRads5,
+  pointsEqual as pointsEqual4,
+  vectorFromPoint as vectorFromPoint4,
+  vectorNormalize,
+  vectorScale as vectorScale4
+} from "@nous-excalidraw/math";
 
 // ../element/src/distance.ts
 import {
   curvePointDistance,
   distanceToLineSegment,
-  pointRotateRads as pointRotateRads5
+  pointRotateRads as pointRotateRads3
 } from "@nous-excalidraw/math";
 import { ellipse, ellipseDistanceFromPoint } from "@nous-excalidraw/math/ellipse";
 
 // ../element/src/heading.ts
 import {
-  invariant as invariant8,
-  isDevEnv as isDevEnv4,
-  isTestEnv as isTestEnv3
+  invariant as invariant5,
+  isDevEnv as isDevEnv3,
+  isTestEnv
 } from "@nous-excalidraw/common";
 import {
-  pointFrom as pointFrom9,
-  pointFromVector as pointFromVector4,
-  pointRotateRads as pointRotateRads7,
+  pointFrom as pointFrom6,
+  pointFromVector as pointFromVector2,
+  pointRotateRads as pointRotateRads4,
   pointScaleFromOrigin,
-  pointsEqual as pointsEqual3,
+  pointsEqual as pointsEqual2,
   triangleIncludesPoint,
   vectorCross,
-  vectorFromPoint as vectorFromPoint4,
-  vectorScale as vectorScale4
+  vectorFromPoint as vectorFromPoint2,
+  vectorScale as vectorScale2
 } from "@nous-excalidraw/math";
 var HEADING_RIGHT = [1, 0];
 var HEADING_DOWN = [0, 1];
@@ -19148,7 +19233,7 @@ var vectorToHeading = (vec) => {
   }
   return HEADING_UP;
 };
-var headingForPoint = (p, o) => vectorToHeading(vectorFromPoint4(p, o));
+var headingForPoint = (p, o) => vectorToHeading(vectorFromPoint2(p, o));
 var headingForPointIsHorizontal = (p, o) => headingIsHorizontal(headingForPoint(p, o));
 var compareHeading = (a, b) => a[0] === b[0] && a[1] === b[1];
 var headingIsHorizontal = (a) => compareHeading(a, HEADING_RIGHT) || compareHeading(a, HEADING_LEFT);
@@ -19156,22 +19241,22 @@ var headingIsHorizontal = (a) => compareHeading(a, HEADING_RIGHT) || compareHead
 // ../element/src/elbowArrow.ts
 import {
   clamp as clamp2,
-  pointDistance as pointDistance3,
-  pointFrom as pointFrom10,
+  pointDistance as pointDistance2,
+  pointFrom as pointFrom7,
   pointScaleFromOrigin as pointScaleFromOrigin2,
-  pointsEqual as pointsEqual4,
-  pointTranslate as pointTranslate2,
+  pointsEqual as pointsEqual3,
+  pointTranslate,
   vector as vector2,
   vectorCross as vectorCross2,
-  vectorFromPoint as vectorFromPoint5,
-  vectorScale as vectorScale5
+  vectorFromPoint as vectorFromPoint3,
+  vectorScale as vectorScale3
 } from "@nous-excalidraw/math";
 import {
   BinaryHeap,
-  invariant as invariant9,
+  invariant as invariant6,
   isAnyTrue,
   getSizeFromPoints,
-  isDevEnv as isDevEnv5,
+  isDevEnv as isDevEnv4,
   arrayToMap as arrayToMap15
 } from "@nous-excalidraw/common";
 
@@ -19188,353 +19273,48 @@ import {
   radiansBetweenAngles,
   radiansDifference
 } from "@nous-excalidraw/math";
-import { pointsEqual as pointsEqual6 } from "@nous-excalidraw/math";
-
-// ../element/src/bounds.ts
-var getDiamondPoints = (element) => {
-  const topX = Math.floor(element.width / 2) + 1;
-  const topY = 0;
-  const rightX = element.width;
-  const rightY = Math.floor(element.height / 2) + 1;
-  const bottomX = topX;
-  const bottomY = element.height;
-  const leftX = 0;
-  const leftY = rightY;
-  return [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY];
-};
-var CARDINALITY_MARKER_SIZE = 20;
-var CROWFOOT_ARROWHEAD_SIZE = 15;
-var getArrowheadSize = (arrowhead) => {
-  switch (arrowhead) {
-    case "arrow":
-      return 25;
-    case "diamond":
-    case "diamond_outline":
-      return 12;
-    case "cardinality_many":
-    case "cardinality_one_or_many":
-    case "cardinality_zero_or_many":
-      return CROWFOOT_ARROWHEAD_SIZE;
-    case "cardinality_one":
-    case "cardinality_exactly_one":
-    case "cardinality_zero_or_one":
-      return CARDINALITY_MARKER_SIZE;
-    default:
-      return 15;
-  }
-};
-var getArrowheadAngle = (arrowhead) => {
-  switch (arrowhead) {
-    case "bar":
-      return 90;
-    case "arrow":
-      return 20;
-    default:
-      return 25;
-  }
-};
-var getArrowheadPoints = (element, shape, position, arrowhead, offsetMultiplier = 0) => {
-  if (arrowhead === null) {
-    return null;
-  }
-  if (shape.length < 1) {
-    return null;
-  }
-  const ops = getCurvePathOps(shape[0]);
-  if (ops.length < 1) {
-    return null;
-  }
-  const index = position === "start" ? 1 : ops.length - 1;
-  const data = ops[index].data;
-  invariant12(data.length === 6, "Op data length is not 6");
-  const p3 = pointFrom13(data[4], data[5]);
-  const p2 = pointFrom13(data[2], data[3]);
-  const p1 = pointFrom13(data[0], data[1]);
-  const prevOp = ops[index - 1];
-  let p0 = pointFrom13(0, 0);
-  if (prevOp.op === "move") {
-    const p = pointFromArray3(prevOp.data);
-    invariant12(p != null, "Op data is not a point");
-    p0 = p;
-  } else if (prevOp.op === "bcurveTo") {
-    p0 = pointFrom13(prevOp.data[4], prevOp.data[5]);
-  }
-  const equation = (t2, idx) => Math.pow(1 - t2, 3) * p3[idx] + 3 * t2 * Math.pow(1 - t2, 2) * p2[idx] + 3 * Math.pow(t2, 2) * (1 - t2) * p1[idx] + p0[idx] * Math.pow(t2, 3);
-  const [x2, y2] = position === "start" ? p0 : p3;
-  const [x1, y1] = [equation(0.3, 0), equation(0.3, 1)];
-  const distance3 = Math.hypot(x2 - x1, y2 - y1);
-  const nx = (x2 - x1) / distance3;
-  const ny = (y2 - y1) / distance3;
-  const size = getArrowheadSize(arrowhead);
-  let length = 0;
-  {
-    const [cx, cy] = position === "end" ? element.points[element.points.length - 1] : element.points[0];
-    const [px, py] = element.points.length > 1 ? position === "end" ? element.points[element.points.length - 2] : element.points[1] : [0, 0];
-    length = Math.hypot(cx - px, cy - py);
-  }
-  const lengthMultiplier = arrowhead === "diamond" || arrowhead === "diamond_outline" ? 0.25 : 0.5;
-  const minSize = Math.min(size, length * lengthMultiplier);
-  const tx = x2 - nx * minSize * offsetMultiplier;
-  const ty = y2 - ny * minSize * offsetMultiplier;
-  const xs = tx - nx * minSize;
-  const ys = ty - ny * minSize;
-  if (arrowhead === "circle" || arrowhead === "circle_outline") {
-    const diameter = Math.hypot(ys - ty, xs - tx) + element.strokeWidth - 2;
-    return [tx, ty, diameter];
-  }
-  const angle = getArrowheadAngle(arrowhead);
-  if (arrowhead === "cardinality_many" || arrowhead === "cardinality_one_or_many") {
-    const [x32, y32] = pointRotateRads10(
-      pointFrom13(tx, ty),
-      pointFrom13(xs, ys),
-      degreesToRadians(-angle)
-    );
-    const [x42, y42] = pointRotateRads10(
-      pointFrom13(tx, ty),
-      pointFrom13(xs, ys),
-      degreesToRadians(angle)
-    );
-    return [xs, ys, x32, y32, x42, y42];
-  }
-  const [x3, y3] = pointRotateRads10(
-    pointFrom13(xs, ys),
-    pointFrom13(tx, ty),
-    -angle * Math.PI / 180
-  );
-  const [x4, y4] = pointRotateRads10(
-    pointFrom13(xs, ys),
-    pointFrom13(tx, ty),
-    degreesToRadians(angle)
-  );
-  if (arrowhead === "diamond" || arrowhead === "diamond_outline") {
-    let ox;
-    let oy;
-    if (position === "start") {
-      const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];
-      [ox, oy] = pointRotateRads10(
-        pointFrom13(tx + minSize * 2, ty),
-        pointFrom13(tx, ty),
-        Math.atan2(py - ty, px - tx)
-      );
-    } else {
-      const [px, py] = element.points.length > 1 ? element.points[element.points.length - 2] : [0, 0];
-      [ox, oy] = pointRotateRads10(
-        pointFrom13(tx - minSize * 2, ty),
-        pointFrom13(tx, ty),
-        Math.atan2(ty - py, tx - px)
-      );
-    }
-    return [tx, ty, x3, y3, ox, oy, x4, y4];
-  }
-  return [tx, ty, x3, y3, x4, y4];
-};
-
-// ../element/src/cropElement.ts
-import {
-  pointFrom as pointFrom14,
-  pointCenter as pointCenter2,
-  pointRotateRads as pointRotateRads11,
-  vectorFromPoint as vectorFromPoint8,
-  vectorNormalize as vectorNormalize4,
-  vectorSubtract,
-  vectorAdd as vectorAdd2,
-  vectorScale as vectorScale7,
-  pointFromVector as pointFromVector6,
-  clamp as clamp4,
-  isCloseTo
-} from "@nous-excalidraw/math";
-
-// ../element/src/frame.ts
-import { arrayToMap as arrayToMap19, sizeOf as sizeOf2 } from "@nous-excalidraw/common";
-import { isPointWithinBounds as isPointWithinBounds2, pointFrom as pointFrom16 } from "@nous-excalidraw/math";
-
-// ../utils/src/bbox.ts
-import {
-  vectorCross as vectorCross3,
-  vectorFromPoint as vectorFromPoint9
-} from "@nous-excalidraw/math";
+import { pointsEqual as pointsEqual5 } from "@nous-excalidraw/math";
 
-// ../element/src/selection.ts
-import { arrayToMap as arrayToMap18, isShallowEqual as isShallowEqual3 } from "@nous-excalidraw/common";
+// ../element/src/textMeasurements.ts
 import {
-  lineSegment as lineSegment6,
-  pointFrom as pointFrom15,
-  pointRotateRads as pointRotateRads12
-} from "@nous-excalidraw/math";
+  BOUND_TEXT_PADDING as BOUND_TEXT_PADDING2,
+  DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE2,
+  DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY3,
+  getFontString as getFontString3,
+  isTestEnv as isTestEnv2,
+  normalizeEOL
+} from "@nous-excalidraw/common";
+var DUMMY_TEXT = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toLocaleUpperCase();
 
-// ../element/src/groups.ts
-var selectGroupsForSelectedElements5 = function() {
-  let lastSelectedElements = null;
-  let lastElements = null;
-  let lastReturnValue = null;
-  const _selectGroups = (selectedElements, elements, appState, prevAppState) => {
-    if (lastReturnValue !== void 0 && elements === lastElements && selectedElements === lastSelectedElements && appState.editingGroupId === lastReturnValue?.editingGroupId) {
-      return lastReturnValue;
-    }
-    const selectedGroupIds = {};
-    for (const selectedElement of selectedElements) {
-      let groupIds = selectedElement.groupIds;
-      if (appState.editingGroupId) {
-        const indexOfEditingGroup = groupIds.indexOf(appState.editingGroupId);
-        if (indexOfEditingGroup > -1) {
-          groupIds = groupIds.slice(0, indexOfEditingGroup);
-        }
-      }
-      if (groupIds.length > 0) {
-        const lastSelectedGroup = groupIds[groupIds.length - 1];
-        selectedGroupIds[lastSelectedGroup] = true;
-      }
-    }
-    const groupElementsIndex = {};
-    const selectedElementIdsInGroups = elements.reduce(
-      (acc, element) => {
-        if (element.isDeleted) {
-          return acc;
-        }
-        const groupId = element.groupIds.find((id) => selectedGroupIds[id]);
-        if (groupId) {
-          acc[element.id] = true;
-          if (!Array.isArray(groupElementsIndex[groupId])) {
-            groupElementsIndex[groupId] = [element.id];
-          } else {
-            groupElementsIndex[groupId].push(element.id);
-          }
-        }
-        return acc;
-      },
-      {}
-    );
-    for (const groupId of Object.keys(groupElementsIndex)) {
-      if (groupElementsIndex[groupId].length < 2) {
-        if (selectedGroupIds[groupId]) {
-          selectedGroupIds[groupId] = false;
-        }
-      }
-    }
-    lastElements = elements;
-    lastSelectedElements = selectedElements;
-    lastReturnValue = {
-      editingGroupId: appState.editingGroupId,
-      selectedGroupIds,
-      selectedElementIds: makeNextSelectedElementIds2(
-        {
-          ...appState.selectedElementIds,
-          ...selectedElementIdsInGroups
-        },
-        prevAppState
-      )
-    };
-    return lastReturnValue;
-  };
-  const selectGroupsForSelectedElements8 = (appState, elements, prevAppState, app) => {
-    const selectedElements = app ? app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-      // supplying elements explicitly in case we're passed non-state elements
-      elements
-    }) : getSelectedElements3(elements, appState);
-    if (!selectedElements.length) {
-      return {
-        selectedGroupIds: {},
-        editingGroupId: null,
-        selectedElementIds: makeNextSelectedElementIds2(
-          appState.selectedElementIds,
-          prevAppState
-        )
-      };
-    }
-    return _selectGroups(selectedElements, elements, appState, prevAppState);
-  };
-  selectGroupsForSelectedElements8.clearCache = () => {
-    lastElements = null;
-    lastSelectedElements = null;
-    lastReturnValue = null;
-  };
-  return selectGroupsForSelectedElements8;
-}();
+// ../element/src/textWrapping.ts
+import { isDevEnv as isDevEnv5, isTestEnv as isTestEnv3 } from "@nous-excalidraw/common";
 
-// ../element/src/selection.ts
-var isSomeElementSelected3 = function() {
-  let lastElements = null;
-  let lastSelectedElementIds = null;
-  let isSelected = null;
-  const ret = (elements, appState) => {
-    if (isSelected != null && elements === lastElements && appState.selectedElementIds === lastSelectedElementIds) {
-      return isSelected;
-    }
-    isSelected = elements.some(
-      (element) => appState.selectedElementIds[element.id]
-    );
-    lastElements = elements;
-    lastSelectedElementIds = appState.selectedElementIds;
-    return isSelected;
-  };
-  ret.clearCache = () => {
-    lastElements = null;
-    lastSelectedElementIds = null;
-    isSelected = null;
-  };
-  return ret;
-}();
-var getSelectedElements3 = (elements, appState, opts) => {
-  const addedElements = /* @__PURE__ */ new Set();
-  const selectedElements = [];
-  for (const element of elements.values()) {
-    if (appState.selectedElementIds[element.id]) {
-      selectedElements.push(element);
-      addedElements.add(element.id);
-      continue;
-    }
-    if (opts?.includeBoundTextElement && isBoundToContainer5(element) && appState.selectedElementIds[element?.containerId]) {
-      selectedElements.push(element);
-      addedElements.add(element.id);
-      continue;
-    }
-  }
-  if (opts?.includeElementsInFrames) {
-    const elementsToInclude = [];
-    selectedElements.forEach((element) => {
-      if (isFrameLikeElement7(element)) {
-        getFrameChildren2(elements, element.id).forEach(
-          (e) => !addedElements.has(e.id) && elementsToInclude.push(e)
-        );
-      }
-      elementsToInclude.push(element);
-    });
-    return elementsToInclude;
+// ../element/src/utils.ts
+var isPathALoop3 = (points, zoomValue = 1) => {
+  if (points.length >= 3) {
+    const [first, last] = [points[0], points[points.length - 1]];
+    const distance3 = pointDistance5(first, last);
+    return distance3 <= LINE_CONFIRM_THRESHOLD / zoomValue;
   }
-  return selectedElements;
+  return false;
 };
-var makeNextSelectedElementIds2 = (nextSelectedElementIds, prevState) => {
-  if (isShallowEqual3(prevState.selectedElementIds, nextSelectedElementIds)) {
-    return prevState.selectedElementIds;
+var getCornerRadius = (x, element) => {
+  if (element.roundness?.type === ROUNDNESS5.PROPORTIONAL_RADIUS || element.roundness?.type === ROUNDNESS5.LEGACY) {
+    return x * DEFAULT_PROPORTIONAL_RADIUS;
   }
-  return nextSelectedElementIds;
-};
-
-// ../element/src/frame.ts
-var getFrameChildren2 = (allElements, frameId) => {
-  const frameChildren = [];
-  for (const element of allElements.values()) {
-    if (element.frameId === frameId) {
-      frameChildren.push(element);
+  if (element.roundness?.type === ROUNDNESS5.ADAPTIVE_RADIUS) {
+    const fixedRadiusSize = element.roundness?.value ?? DEFAULT_ADAPTIVE_RADIUS;
+    const CUTOFF_SIZE = fixedRadiusSize / DEFAULT_PROPORTIONAL_RADIUS;
+    if (x <= CUTOFF_SIZE) {
+      return x * DEFAULT_PROPORTIONAL_RADIUS;
     }
+    return fixedRadiusSize;
   }
-  return frameChildren;
+  return 0;
 };
 
-// ../element/src/renderElement.ts
-var IMAGE_PLACEHOLDER_IMG = typeof document !== "undefined" ? document.createElement("img") : { src: "" };
-IMAGE_PLACEHOLDER_IMG.src = `data:${MIME_TYPES7.svg},${encodeURIComponent(
-  `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#888" d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg>`
-)}`;
-var IMAGE_ERROR_PLACEHOLDER_IMG = typeof document !== "undefined" ? document.createElement("img") : { src: "" };
-IMAGE_ERROR_PLACEHOLDER_IMG.src = `data:${MIME_TYPES7.svg},${encodeURIComponent(
-  `<svg viewBox="0 0 668 668" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48ZM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56ZM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.81709 0 0 .81709 124.825 145.825)"/><path d="M256 8C119.034 8 8 119.033 8 256c0 136.967 111.034 248 248 248s248-111.034 248-248S392.967 8 256 8Zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676ZM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.30366 0 0 .30366 506.822 60.065)"/></svg>`
-)}`;
-var elementWithCanvasCache = /* @__PURE__ */ new WeakMap();
-
 // ../element/src/comparisons.ts
-var canChangeRoundness2 = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "line" || type === "diamond" || type === "image";
+var canChangeRoundness2 = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "line" || type === "diamond" || type === "triangle" || type === "image";
 
 // ../element/src/shape.ts
 var _ShapeCache = class _ShapeCache {
@@ -19545,9 +19325,11 @@ __publicField(_ShapeCache, "cache", /* @__PURE__ */ new WeakMap());
  * Retrieves shape from cache if available. Use this only if shape
  * is optional and you have a fallback in case it's not cached.
  */
-__publicField(_ShapeCache, "get", (element, theme) => {
+__publicField(_ShapeCache, "get", (element, theme, zoom, renderScale) => {
   const cached = _ShapeCache.cache.get(element);
-  if (cached && (theme === null || cached.theme === theme)) {
+  const resolvedRenderScale = renderScale ?? zoom;
+  const tierScreenStrokeWidth = zoom === void 0 ? void 0 : getTierScreenStrokeWidth2(zoom);
+  if (cached && (theme === null || cached.theme === theme) && (zoom === void 0 || cached.zoom === zoom) && cached.strokeWidth === element.strokeWidth && cached.strokeWidthCustom === isElementStrokeWidthCustom(element) && (tierScreenStrokeWidth === void 0 || cached.tierScreenStrokeWidth === tierScreenStrokeWidth) && cached.strokeStyle === element.strokeStyle && cached.roughness === element.roughness && (resolvedRenderScale === void 0 || cached.renderScale === resolvedRenderScale)) {
     return cached.shape;
   }
   return void 0;
@@ -19564,7 +19346,14 @@ __publicField(_ShapeCache, "destroy", () => {
  * returns cached shape.
  */
 __publicField(_ShapeCache, "generateElementShape", (element, renderConfig) => {
-  const cachedShape = renderConfig?.isExporting ? void 0 : _ShapeCache.get(element, renderConfig ? renderConfig.theme : null);
+  const zoom = renderConfig?.zoom ?? 1;
+  const renderScale = renderConfig?.renderScale ?? zoom;
+  const cachedShape = renderConfig?.isExporting ? void 0 : _ShapeCache.get(
+    element,
+    renderConfig ? renderConfig.theme : null,
+    zoom,
+    renderScale
+  );
   if (cachedShape !== void 0) {
     return cachedShape;
   }
@@ -19572,17 +19361,26 @@ __publicField(_ShapeCache, "generateElementShape", (element, renderConfig) => {
   const shape = _generateElementShape(
     element,
     _ShapeCache.rg,
-    renderConfig || {
-      isExporting: false,
-      canvasBackgroundColor: COLOR_PALETTE4.white,
-      embedsValidationStatus: null,
-      theme: THEME10.LIGHT
+    {
+      isExporting: renderConfig?.isExporting ?? false,
+      canvasBackgroundColor: renderConfig?.canvasBackgroundColor ?? COLOR_PALETTE4.white,
+      embedsValidationStatus: renderConfig?.embedsValidationStatus ?? null,
+      theme: renderConfig?.theme ?? THEME9.LIGHT,
+      zoom,
+      renderScale
     }
   );
   if (!renderConfig?.isExporting) {
     _ShapeCache.cache.set(element, {
       shape,
-      theme: renderConfig?.theme || THEME10.LIGHT
+      theme: renderConfig?.theme || THEME9.LIGHT,
+      zoom,
+      strokeWidth: element.strokeWidth,
+      strokeWidthCustom: isElementStrokeWidthCustom(element),
+      tierScreenStrokeWidth: getTierScreenStrokeWidth2(zoom),
+      strokeStyle: element.strokeStyle,
+      roughness: element.roughness,
+      renderScale
     });
   }
   return shape;
@@ -19604,33 +19402,36 @@ function adjustRoughness(element) {
   }
   return Math.min(roughness / (maxSize < 10 ? 3 : 2), 2.5);
 }
-var generateRoughOptions = (element, continuousPath = false, isDarkMode = false) => {
+var generateRoughOptions = (element, continuousPath = false, isDarkMode = false, zoom = 1, renderScale = zoom) => {
+  const strokeWidth = getEffectiveStrokeWidth(element, zoom, renderScale);
+  const useCrispStroke = isCrispScreenStroke(zoom);
   const options = {
     seed: element.seed,
-    strokeLineDash: element.strokeStyle === "dashed" ? getDashArrayDashed(element.strokeWidth) : element.strokeStyle === "dotted" ? getDashArrayDotted(element.strokeWidth) : void 0,
+    strokeLineDash: element.strokeStyle === "dashed" ? getDashArrayDashed(strokeWidth) : element.strokeStyle === "dotted" ? getDashArrayDotted(strokeWidth) : void 0,
     // for non-solid strokes, disable multiStroke because it tends to make
     // dashes/dots overlay each other
-    disableMultiStroke: element.strokeStyle !== "solid",
+    disableMultiStroke: useCrispStroke || element.strokeStyle !== "solid",
     // for non-solid strokes, increase the width a bit to make it visually
     // similar to solid strokes, because we're also disabling multiStroke
-    strokeWidth: element.strokeStyle !== "solid" ? element.strokeWidth + 0.5 : element.strokeWidth,
+    strokeWidth: element.strokeStyle !== "solid" ? strokeWidth + 0.5 : strokeWidth,
     // when increasing strokeWidth, we must explicitly set fillWeight and
     // hachureGap because if not specified, roughjs uses strokeWidth to
     // calculate them (and we don't want the fills to be modified)
-    fillWeight: element.strokeWidth / 2,
-    hachureGap: element.strokeWidth * 4,
-    roughness: adjustRoughness(element),
-    stroke: isDarkMode ? applyDarkModeFilter2(element.strokeColor) : element.strokeColor,
-    preserveVertices: continuousPath || element.roughness < ROUGHNESS.cartoonist
+    fillWeight: strokeWidth / 2,
+    hachureGap: strokeWidth * 4,
+    roughness: useCrispStroke ? ROUGHNESS.architect : adjustRoughness(element),
+    stroke: isDarkMode ? applyDarkModeFilter(element.strokeColor) : element.strokeColor,
+    preserveVertices: useCrispStroke || continuousPath || element.roughness < ROUGHNESS.cartoonist
   };
   switch (element.type) {
     case "rectangle":
     case "iframe":
     case "embeddable":
     case "diamond":
+    case "triangle":
     case "ellipse": {
       options.fillStyle = element.fillStyle;
-      options.fill = isTransparent5(element.backgroundColor) ? void 0 : isDarkMode ? applyDarkModeFilter2(element.backgroundColor) : element.backgroundColor;
+      options.fill = isTransparent5(element.backgroundColor) ? void 0 : isDarkMode ? applyDarkModeFilter(element.backgroundColor) : element.backgroundColor;
       if (element.type === "ellipse") {
         options.curveFitting = 1;
       }
@@ -19638,9 +19439,9 @@ var generateRoughOptions = (element, continuousPath = false, isDarkMode = false)
     }
     case "line":
     case "freedraw": {
-      if (isPathALoop2(element.points)) {
+      if (isPathALoop3(element.points)) {
         options.fillStyle = element.fillStyle;
-        options.fill = element.backgroundColor === "transparent" ? void 0 : isDarkMode ? applyDarkModeFilter2(element.backgroundColor) : element.backgroundColor;
+        options.fill = element.backgroundColor === "transparent" ? void 0 : isDarkMode ? applyDarkModeFilter(element.backgroundColor) : element.backgroundColor;
       }
       return options;
     }
@@ -19687,8 +19488,9 @@ var generateArrowheadLinesToTip = (generator, arrowheadPoints, lineOptions) => {
 };
 var getArrowheadLineOptions = (element, options) => {
   const lineOptions = { ...options };
+  const strokeWidth = options.strokeWidth ?? element.strokeWidth;
   if (element.strokeStyle === "dotted") {
-    const dash = getDashArrayDotted(element.strokeWidth - 1);
+    const dash = getDashArrayDotted(strokeWidth - 1);
     lineOptions.strokeLineDash = [dash[0], dash[1] - 1];
   } else {
     delete lineOptions.strokeLineDash;
@@ -19715,8 +19517,17 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
   if (arrowhead === null) {
     return [];
   }
-  const strokeColor = isDarkMode ? applyDarkModeFilter2(element.strokeColor) : element.strokeColor;
-  const backgroundFillColor = isDarkMode ? applyDarkModeFilter2(canvasBackgroundColor) : canvasBackgroundColor;
+  const strokeWidth = options.strokeWidth ?? element.strokeWidth;
+  const getPoints = (arrowhead2, offsetMultiplier = 0) => getArrowheadPoints(
+    element,
+    shape,
+    position,
+    arrowhead2,
+    offsetMultiplier,
+    strokeWidth
+  );
+  const strokeColor = isDarkMode ? applyDarkModeFilter(element.strokeColor) : element.strokeColor;
+  const backgroundFillColor = isDarkMode ? applyDarkModeFilter(canvasBackgroundColor) : canvasBackgroundColor;
   const cardinalityOneOrManyOffset = -0.25;
   const cardinalityZeroCircleScale = 0.8;
   switch (arrowhead) {
@@ -19726,18 +19537,13 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
         generator,
         options,
         strokeColor,
-        getArrowheadPoints(element, shape, position, arrowhead),
+        getPoints(arrowhead),
         arrowhead === "circle_outline" ? backgroundFillColor : strokeColor
       );
     }
     case "triangle":
     case "triangle_outline": {
-      const arrowheadPoints = getArrowheadPoints(
-        element,
-        shape,
-        position,
-        arrowhead
-      );
+      const arrowheadPoints = getPoints(arrowhead);
       if (arrowheadPoints === null) {
         return [];
       }
@@ -19763,12 +19569,7 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
     }
     case "diamond":
     case "diamond_outline": {
-      const arrowheadPoints = getArrowheadPoints(
-        element,
-        shape,
-        position,
-        arrowhead
-      );
+      const arrowheadPoints = getPoints(arrowhead);
       if (arrowheadPoints === null) {
         return [];
       }
@@ -19796,13 +19597,13 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
     case "cardinality_one":
       return generateArrowheadCardinalityOne(
         generator,
-        getArrowheadPoints(element, shape, position, arrowhead),
+        getPoints(arrowhead),
         getArrowheadLineOptions(element, options)
       );
     case "cardinality_many":
       return generateArrowheadLinesToTip(
         generator,
-        getArrowheadPoints(element, shape, position, arrowhead),
+        getPoints(arrowhead),
         getArrowheadLineOptions(element, options)
       );
     case "cardinality_one_or_many": {
@@ -19810,18 +19611,12 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
       return [
         ...generateArrowheadLinesToTip(
           generator,
-          getArrowheadPoints(element, shape, position, "cardinality_many"),
+          getPoints("cardinality_many"),
           lineOptions
         ),
         ...generateArrowheadCardinalityOne(
           generator,
-          getArrowheadPoints(
-            element,
-            shape,
-            position,
-            "cardinality_one",
-            cardinalityOneOrManyOffset
-          ),
+          getPoints("cardinality_one", cardinalityOneOrManyOffset),
           lineOptions
         )
       ];
@@ -19831,12 +19626,12 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
       return [
         ...generateArrowheadCardinalityOne(
           generator,
-          getArrowheadPoints(element, shape, position, "cardinality_one", -0.5),
+          getPoints("cardinality_one", -0.5),
           lineOptions
         ),
         ...generateArrowheadCardinalityOne(
           generator,
-          getArrowheadPoints(element, shape, position, "cardinality_one"),
+          getPoints("cardinality_one"),
           lineOptions
         )
       ];
@@ -19848,13 +19643,13 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
           generator,
           options,
           strokeColor,
-          getArrowheadPoints(element, shape, position, "circle_outline", 1.5),
+          getPoints("circle_outline", 1.5),
           backgroundFillColor,
           cardinalityZeroCircleScale
         ),
         ...generateArrowheadCardinalityOne(
           generator,
-          getArrowheadPoints(element, shape, position, "cardinality_one", -0.5),
+          getPoints("cardinality_one", -0.5),
           lineOptions
         )
       ];
@@ -19864,14 +19659,14 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
       return [
         ...generateArrowheadLinesToTip(
           generator,
-          getArrowheadPoints(element, shape, position, "cardinality_many"),
+          getPoints("cardinality_many"),
           lineOptions
         ),
         ...generateArrowheadOutlineCircle(
           generator,
           options,
           strokeColor,
-          getArrowheadPoints(element, shape, position, "circle_outline", 1.5),
+          getPoints("circle_outline", 1.5),
           backgroundFillColor,
           cardinalityZeroCircleScale
         )
@@ -19882,7 +19677,7 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
     default: {
       return generateArrowheadLinesToTip(
         generator,
-        getArrowheadPoints(element, shape, position, arrowhead),
+        getPoints(arrowhead),
         getArrowheadLineOptions(element, options)
       );
     }
@@ -19892,9 +19687,13 @@ var _generateElementShape = (element, generator, {
   isExporting,
   canvasBackgroundColor,
   embedsValidationStatus,
-  theme
+  theme,
+  zoom,
+  renderScale
 }) => {
-  const isDarkMode = theme === THEME10.DARK;
+  const renderZoom = zoom ?? 1;
+  const resolvedRenderScale = renderScale ?? renderZoom;
+  const isDarkMode = theme === THEME9.DARK;
   switch (element.type) {
     case "rectangle":
     case "iframe":
@@ -19913,7 +19712,9 @@ var _generateElementShape = (element, generator, {
               embedsValidationStatus
             ),
             true,
-            isDarkMode
+            isDarkMode,
+            renderZoom,
+            resolvedRenderScale
           )
         );
       } else {
@@ -19929,7 +19730,9 @@ var _generateElementShape = (element, generator, {
               embedsValidationStatus
             ),
             false,
-            isDarkMode
+            isDarkMode,
+            renderZoom,
+            resolvedRenderScale
           )
         );
       }
@@ -19953,7 +19756,13 @@ var _generateElementShape = (element, generator, {
             C ${leftX} ${leftY}, ${leftX} ${leftY}, ${leftX + verticalRadius} ${leftY - horizontalRadius}
             L ${topX - verticalRadius} ${topY + horizontalRadius}
             C ${topX} ${topY}, ${topX} ${topY}, ${topX + verticalRadius} ${topY + horizontalRadius}`,
-          generateRoughOptions(element, true, isDarkMode)
+          generateRoughOptions(
+            element,
+            true,
+            isDarkMode,
+            renderZoom,
+            resolvedRenderScale
+          )
         );
       } else {
         shape = generator.polygon(
@@ -19963,7 +19772,112 @@ var _generateElementShape = (element, generator, {
             [bottomX, bottomY],
             [leftX, leftY]
           ],
-          generateRoughOptions(element, false, isDarkMode)
+          generateRoughOptions(
+            element,
+            false,
+            isDarkMode,
+            renderZoom,
+            resolvedRenderScale
+          )
+        );
+      }
+      return shape;
+    }
+    case "triangle": {
+      let shape;
+      const [topX, topY, leftX, leftY, rightX, rightY] = getTrianglePoints(element);
+      if (element.roundness) {
+        const leftEdgeLen = Math.hypot(topX - leftX, topY - leftY);
+        const rightEdgeLen = Math.hypot(topX - rightX, topY - rightY);
+        const bottomEdgeLen = Math.abs(rightX - leftX);
+        const topLeftRadius = getCornerRadius(topX, element);
+        const topRightRadius = getCornerRadius(element.width - topX, element);
+        const bottomLeftRadius = getCornerRadius(topX, element);
+        const bottomRightRadius = getCornerRadius(
+          element.width - topX,
+          element
+        );
+        const offsetAlongEdge = (vx, vy, nx, ny, r, edgeLen) => {
+          const t2 = Math.min(r / edgeLen, 0.49);
+          return [vx + t2 * (nx - vx), vy + t2 * (ny - vy)];
+        };
+        const [pTLx, pTLy] = offsetAlongEdge(
+          topX,
+          topY,
+          leftX,
+          leftY,
+          topLeftRadius,
+          leftEdgeLen
+        );
+        const [pTRx, pTRy] = offsetAlongEdge(
+          topX,
+          topY,
+          rightX,
+          rightY,
+          topRightRadius,
+          rightEdgeLen
+        );
+        const [pLTx, pLTy] = offsetAlongEdge(
+          leftX,
+          leftY,
+          topX,
+          topY,
+          topLeftRadius,
+          leftEdgeLen
+        );
+        const [pLBx, pLBy] = offsetAlongEdge(
+          leftX,
+          leftY,
+          rightX,
+          rightY,
+          bottomLeftRadius,
+          bottomEdgeLen
+        );
+        const [pRBx, pRBy] = offsetAlongEdge(
+          rightX,
+          rightY,
+          leftX,
+          leftY,
+          bottomRightRadius,
+          bottomEdgeLen
+        );
+        const [pRTx, pRTy] = offsetAlongEdge(
+          rightX,
+          rightY,
+          topX,
+          topY,
+          topRightRadius,
+          rightEdgeLen
+        );
+        shape = generator.path(
+          `M ${pTLx} ${pTLy} L ${pLTx} ${pLTy}
+            C ${leftX} ${leftY}, ${leftX} ${leftY}, ${pLBx} ${pLBy}
+            L ${pRBx} ${pRBy}
+            C ${rightX} ${rightY}, ${rightX} ${rightY}, ${pRTx} ${pRTy}
+            L ${pTRx} ${pTRy}
+            C ${topX} ${topY}, ${topX} ${topY}, ${pTLx} ${pTLy}`,
+          generateRoughOptions(
+            element,
+            true,
+            isDarkMode,
+            renderZoom,
+            resolvedRenderScale
+          )
+        );
+      } else {
+        shape = generator.polygon(
+          [
+            [topX, topY],
+            [leftX, leftY],
+            [rightX, rightY]
+          ],
+          generateRoughOptions(
+            element,
+            false,
+            isDarkMode,
+            renderZoom,
+            resolvedRenderScale
+          )
         );
       }
       return shape;
@@ -19974,199 +19888,585 @@ var _generateElementShape = (element, generator, {
         element.height / 2,
         element.width,
         element.height,
-        generateRoughOptions(element, false, isDarkMode)
+        generateRoughOptions(
+          element,
+          false,
+          isDarkMode,
+          renderZoom,
+          resolvedRenderScale
+        )
       );
       return shape;
     }
-    case "line":
-    case "arrow": {
-      let shape;
-      const options = generateRoughOptions(element, false, isDarkMode);
-      const points = element.points.length ? element.points : [pointFrom18(0, 0)];
-      if (isElbowArrow6(element)) {
-        if (!points.every(
-          (point) => Math.abs(point[0]) <= 1e6 && Math.abs(point[1]) <= 1e6
-        )) {
-          console.error(
-            `Elbow arrow with extreme point positions detected. Arrow not rendered.`,
-            element.id,
-            JSON.stringify(points)
-          );
-          shape = [];
-        } else {
-          shape = [
-            generator.path(
-              generateElbowArrowShape(points, 16),
-              generateRoughOptions(element, true, isDarkMode)
-            )
-          ];
-        }
-      } else if (!element.roundness) {
-        if (options.fill) {
-          shape = [
-            generator.polygon(points, options)
-          ];
-        } else {
-          shape = [
-            generator.linearPath(points, options)
-          ];
+    case "line":
+    case "arrow": {
+      let shape;
+      const options = generateRoughOptions(
+        element,
+        false,
+        isDarkMode,
+        renderZoom,
+        resolvedRenderScale
+      );
+      const points = element.points.length ? element.points : [pointFrom13(0, 0)];
+      if (isElbowArrow6(element)) {
+        if (!points.every(
+          (point) => Math.abs(point[0]) <= 1e6 && Math.abs(point[1]) <= 1e6
+        )) {
+          console.error(
+            `Elbow arrow with extreme point positions detected. Arrow not rendered.`,
+            element.id,
+            JSON.stringify(points)
+          );
+          shape = [];
+        } else {
+          shape = [
+            generator.path(
+              generateElbowArrowShape(points, 16),
+              generateRoughOptions(
+                element,
+                true,
+                isDarkMode,
+                renderZoom,
+                resolvedRenderScale
+              )
+            )
+          ];
+        }
+      } else if (!element.roundness) {
+        if (options.fill) {
+          shape = [
+            generator.polygon(points, options)
+          ];
+        } else {
+          shape = [
+            generator.linearPath(points, options)
+          ];
+        }
+      } else {
+        shape = [generator.curve(points, options)];
+      }
+      if (element.type === "arrow") {
+        const { startArrowhead = null, endArrowhead = "arrow" } = element;
+        if (startArrowhead !== null) {
+          const shapes = getArrowheadShapes(
+            element,
+            shape,
+            "start",
+            startArrowhead,
+            generator,
+            options,
+            canvasBackgroundColor,
+            isDarkMode
+          );
+          shape.push(...shapes);
+        }
+        if (endArrowhead !== null) {
+          if (endArrowhead === void 0) {
+          }
+          const shapes = getArrowheadShapes(
+            element,
+            shape,
+            "end",
+            endArrowhead,
+            generator,
+            options,
+            canvasBackgroundColor,
+            isDarkMode
+          );
+          shape.push(...shapes);
+        }
+      }
+      return shape;
+    }
+    case "freedraw": {
+      const shapes = [];
+      if (isPathALoop3(element.points)) {
+        const simplifiedPoints = simplify(
+          element.points,
+          0.75
+        );
+        shapes.push(
+          generator.curve(simplifiedPoints, {
+            ...generateRoughOptions(
+              element,
+              false,
+              isDarkMode,
+              renderZoom,
+              resolvedRenderScale
+            ),
+            stroke: "none"
+          })
+        );
+      }
+      shapes.push(
+        getFreeDrawSvgPath(element, renderZoom, resolvedRenderScale)
+      );
+      return shapes;
+    }
+    case "frame":
+    case "magicframe":
+    case "text":
+    case "image": {
+      const shape = null;
+      return shape;
+    }
+    default: {
+      assertNever3(
+        element,
+        `generateElementShape(): Unimplemented type ${element?.type}`
+      );
+      return null;
+    }
+  }
+};
+var generateElbowArrowShape = (points, radius) => {
+  const subpoints = [];
+  for (let i = 1; i < points.length - 1; i += 1) {
+    const prev = points[i - 1];
+    const next = points[i + 1];
+    const point = points[i];
+    const prevIsHorizontal = headingForPointIsHorizontal(point, prev);
+    const nextIsHorizontal = headingForPointIsHorizontal(next, point);
+    const corner = Math.min(
+      radius,
+      pointDistance6(points[i], next) / 2,
+      pointDistance6(points[i], prev) / 2
+    );
+    if (prevIsHorizontal) {
+      if (prev[0] < point[0]) {
+        subpoints.push([points[i][0] - corner, points[i][1]]);
+      } else {
+        subpoints.push([points[i][0] + corner, points[i][1]]);
+      }
+    } else if (prev[1] < point[1]) {
+      subpoints.push([points[i][0], points[i][1] - corner]);
+    } else {
+      subpoints.push([points[i][0], points[i][1] + corner]);
+    }
+    subpoints.push(points[i]);
+    if (nextIsHorizontal) {
+      if (next[0] < point[0]) {
+        subpoints.push([points[i][0] - corner, points[i][1]]);
+      } else {
+        subpoints.push([points[i][0] + corner, points[i][1]]);
+      }
+    } else if (next[1] < point[1]) {
+      subpoints.push([points[i][0], points[i][1] - corner]);
+    } else {
+      subpoints.push([points[i][0], points[i][1] + corner]);
+    }
+  }
+  const d = [`M ${points[0][0]} ${points[0][1]}`];
+  for (let i = 0; i < subpoints.length; i += 3) {
+    d.push(`L ${subpoints[i][0]} ${subpoints[i][1]}`);
+    d.push(
+      `Q ${subpoints[i + 1][0]} ${subpoints[i + 1][1]}, ${subpoints[i + 2][0]} ${subpoints[i + 2][1]}`
+    );
+  }
+  d.push(`L ${points[points.length - 1][0]} ${points[points.length - 1][1]}`);
+  return d.join(" ");
+};
+var getFreeDrawSvgPath = (element, zoom, renderScale = zoom) => {
+  return getSvgPathFromStroke(
+    getFreedrawOutlinePoints(element, zoom, renderScale)
+  );
+};
+var getFreedrawOutlinePoints = (element, zoom = 1, renderScale = zoom) => {
+  const inputPoints = element.simulatePressure ? element.points : element.points.length ? element.points.map(([x, y], i) => [x, y, element.pressures[i]]) : [[0, 0, 0.5]];
+  return getStroke(inputPoints, {
+    simulatePressure: element.simulatePressure,
+    size: getEffectiveStrokeWidth(element, zoom, renderScale) * 4.25,
+    thinning: 0.6,
+    smoothing: 0.5,
+    streamline: 0.5,
+    easing: (t2) => Math.sin(t2 * Math.PI / 2),
+    // https://easings.net/#easeOutSine
+    last: true
+  });
+};
+var med = (A, B) => {
+  return [(A[0] + B[0]) / 2, (A[1] + B[1]) / 2];
+};
+var TO_FIXED_PRECISION = /(\s?[A-Z]?,?-?[0-9]*\.[0-9]{0,2})(([0-9]|e|-)*)/g;
+var getSvgPathFromStroke = (points) => {
+  if (!points.length) {
+    return "";
+  }
+  const max = points.length - 1;
+  return points.reduce(
+    (acc, point, i, arr) => {
+      if (i === max) {
+        acc.push(point, med(point, arr[0]), "L", arr[0], "Z");
+      } else {
+        acc.push(point, med(point, arr[i + 1]));
+      }
+      return acc;
+    },
+    ["M", points[0], "Q"]
+  ).join(" ").replace(TO_FIXED_PRECISION, "$1");
+};
+
+// ../element/src/bounds.ts
+var getDiamondPoints = (element) => {
+  const topX = Math.floor(element.width / 2) + 1;
+  const topY = 0;
+  const rightX = element.width;
+  const rightY = Math.floor(element.height / 2) + 1;
+  const bottomX = topX;
+  const bottomY = element.height;
+  const leftX = 0;
+  const leftY = rightY;
+  return [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY];
+};
+var getTrianglePoints = (element) => {
+  const topX = Math.floor(element.width / 2) + 1;
+  const topY = 0;
+  const leftX = 0;
+  const leftY = element.height;
+  const rightX = element.width;
+  const rightY = element.height;
+  return [topX, topY, leftX, leftY, rightX, rightY];
+};
+var CARDINALITY_MARKER_SIZE = 20;
+var CROWFOOT_ARROWHEAD_SIZE = 15;
+var getArrowheadSize = (arrowhead) => {
+  switch (arrowhead) {
+    case "arrow":
+      return 25;
+    case "diamond":
+    case "diamond_outline":
+      return 12;
+    case "cardinality_many":
+    case "cardinality_one_or_many":
+    case "cardinality_zero_or_many":
+      return CROWFOOT_ARROWHEAD_SIZE;
+    case "cardinality_one":
+    case "cardinality_exactly_one":
+    case "cardinality_zero_or_one":
+      return CARDINALITY_MARKER_SIZE;
+    default:
+      return 15;
+  }
+};
+var getArrowheadAngle = (arrowhead) => {
+  switch (arrowhead) {
+    case "bar":
+      return 90;
+    case "arrow":
+      return 20;
+    default:
+      return 25;
+  }
+};
+var getScaledArrowheadSize = (arrowhead, strokeWidth) => getArrowheadSize(arrowhead) * (strokeWidth / STROKE_WIDTH.bold);
+var getArrowheadPoints = (element, shape, position, arrowhead, offsetMultiplier = 0, renderStrokeWidth = element.strokeWidth) => {
+  if (arrowhead === null) {
+    return null;
+  }
+  if (shape.length < 1) {
+    return null;
+  }
+  const ops = getCurvePathOps(shape[0]);
+  if (ops.length < 1) {
+    return null;
+  }
+  const index = position === "start" ? 1 : ops.length - 1;
+  const data = ops[index].data;
+  invariant12(data.length === 6, "Op data length is not 6");
+  const p3 = pointFrom14(data[4], data[5]);
+  const p2 = pointFrom14(data[2], data[3]);
+  const p1 = pointFrom14(data[0], data[1]);
+  const prevOp = ops[index - 1];
+  let p0 = pointFrom14(0, 0);
+  if (prevOp.op === "move") {
+    const p = pointFromArray3(prevOp.data);
+    invariant12(p != null, "Op data is not a point");
+    p0 = p;
+  } else if (prevOp.op === "bcurveTo") {
+    p0 = pointFrom14(prevOp.data[4], prevOp.data[5]);
+  }
+  const equation = (t2, idx) => Math.pow(1 - t2, 3) * p3[idx] + 3 * t2 * Math.pow(1 - t2, 2) * p2[idx] + 3 * Math.pow(t2, 2) * (1 - t2) * p1[idx] + p0[idx] * Math.pow(t2, 3);
+  const [x2, y2] = position === "start" ? p0 : p3;
+  const [x1, y1] = [equation(0.3, 0), equation(0.3, 1)];
+  const distance3 = Math.hypot(x2 - x1, y2 - y1);
+  const nx = (x2 - x1) / distance3;
+  const ny = (y2 - y1) / distance3;
+  const size = getScaledArrowheadSize(arrowhead, renderStrokeWidth);
+  let length = 0;
+  {
+    const [cx, cy] = position === "end" ? element.points[element.points.length - 1] : element.points[0];
+    const [px, py] = element.points.length > 1 ? position === "end" ? element.points[element.points.length - 2] : element.points[1] : [0, 0];
+    length = Math.hypot(cx - px, cy - py);
+  }
+  const lengthMultiplier = arrowhead === "diamond" || arrowhead === "diamond_outline" ? 0.25 : 0.5;
+  const minSize = Math.min(size, length * lengthMultiplier);
+  const tx = x2 - nx * minSize * offsetMultiplier;
+  const ty = y2 - ny * minSize * offsetMultiplier;
+  const xs = tx - nx * minSize;
+  const ys = ty - ny * minSize;
+  if (arrowhead === "circle" || arrowhead === "circle_outline") {
+    const diameter = Math.hypot(ys - ty, xs - tx) + renderStrokeWidth - getDisplaySceneStrokeWidth2(1);
+    return [tx, ty, diameter];
+  }
+  const angle = getArrowheadAngle(arrowhead);
+  if (arrowhead === "cardinality_many" || arrowhead === "cardinality_one_or_many") {
+    const [x32, y32] = pointRotateRads11(
+      pointFrom14(tx, ty),
+      pointFrom14(xs, ys),
+      degreesToRadians(-angle)
+    );
+    const [x42, y42] = pointRotateRads11(
+      pointFrom14(tx, ty),
+      pointFrom14(xs, ys),
+      degreesToRadians(angle)
+    );
+    return [xs, ys, x32, y32, x42, y42];
+  }
+  const [x3, y3] = pointRotateRads11(
+    pointFrom14(xs, ys),
+    pointFrom14(tx, ty),
+    -angle * Math.PI / 180
+  );
+  const [x4, y4] = pointRotateRads11(
+    pointFrom14(xs, ys),
+    pointFrom14(tx, ty),
+    degreesToRadians(angle)
+  );
+  if (arrowhead === "diamond" || arrowhead === "diamond_outline") {
+    let ox;
+    let oy;
+    if (position === "start") {
+      const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];
+      [ox, oy] = pointRotateRads11(
+        pointFrom14(tx + minSize * 2, ty),
+        pointFrom14(tx, ty),
+        Math.atan2(py - ty, px - tx)
+      );
+    } else {
+      const [px, py] = element.points.length > 1 ? element.points[element.points.length - 2] : [0, 0];
+      [ox, oy] = pointRotateRads11(
+        pointFrom14(tx - minSize * 2, ty),
+        pointFrom14(tx, ty),
+        Math.atan2(ty - py, tx - px)
+      );
+    }
+    return [tx, ty, x3, y3, ox, oy, x4, y4];
+  }
+  return [tx, ty, x3, y3, x4, y4];
+};
+
+// ../element/src/renderElement.ts
+import {
+  getSceneStrokeBorderForScreen,
+  getSceneStrokeBorderForZoom,
+  isCrispScreenStroke as isCrispScreenStroke2
+} from "@nous-excalidraw/common";
+
+// ../element/src/cropElement.ts
+import {
+  pointFrom as pointFrom15,
+  pointCenter as pointCenter2,
+  pointRotateRads as pointRotateRads12,
+  vectorFromPoint as vectorFromPoint8,
+  vectorNormalize as vectorNormalize4,
+  vectorSubtract,
+  vectorAdd as vectorAdd2,
+  vectorScale as vectorScale7,
+  pointFromVector as pointFromVector6,
+  clamp as clamp4,
+  isCloseTo
+} from "@nous-excalidraw/math";
+
+// ../element/src/frame.ts
+import { arrayToMap as arrayToMap19 } from "@nous-excalidraw/common";
+import { isPointWithinBounds as isPointWithinBounds2, pointFrom as pointFrom17 } from "@nous-excalidraw/math";
+
+// ../utils/src/bbox.ts
+import {
+  vectorCross as vectorCross3,
+  vectorFromPoint as vectorFromPoint9
+} from "@nous-excalidraw/math";
+
+// ../element/src/selection.ts
+import { arrayToMap as arrayToMap18, isShallowEqual as isShallowEqual3 } from "@nous-excalidraw/common";
+import {
+  lineSegment as lineSegment6,
+  pointFrom as pointFrom16,
+  pointRotateRads as pointRotateRads13
+} from "@nous-excalidraw/math";
+
+// ../element/src/groups.ts
+var selectGroupsForSelectedElements5 = function() {
+  let lastSelectedElements = null;
+  let lastElements = null;
+  let lastReturnValue = null;
+  const _selectGroups = (selectedElements, elements, appState, prevAppState) => {
+    if (lastReturnValue !== void 0 && elements === lastElements && selectedElements === lastSelectedElements && appState.editingGroupId === lastReturnValue?.editingGroupId) {
+      return lastReturnValue;
+    }
+    const selectedGroupIds = {};
+    for (const selectedElement of selectedElements) {
+      let groupIds = selectedElement.groupIds;
+      if (appState.editingGroupId) {
+        const indexOfEditingGroup = groupIds.indexOf(appState.editingGroupId);
+        if (indexOfEditingGroup > -1) {
+          groupIds = groupIds.slice(0, indexOfEditingGroup);
         }
-      } else {
-        shape = [generator.curve(points, options)];
       }
-      if (element.type === "arrow") {
-        const { startArrowhead = null, endArrowhead = "arrow" } = element;
-        if (startArrowhead !== null) {
-          const shapes = getArrowheadShapes(
-            element,
-            shape,
-            "start",
-            startArrowhead,
-            generator,
-            options,
-            canvasBackgroundColor,
-            isDarkMode
-          );
-          shape.push(...shapes);
+      if (groupIds.length > 0) {
+        const lastSelectedGroup = groupIds[groupIds.length - 1];
+        selectedGroupIds[lastSelectedGroup] = true;
+      }
+    }
+    const groupElementsIndex = {};
+    const selectedElementIdsInGroups = elements.reduce(
+      (acc, element) => {
+        if (element.isDeleted) {
+          return acc;
         }
-        if (endArrowhead !== null) {
-          if (endArrowhead === void 0) {
+        const groupId = element.groupIds.find((id) => selectedGroupIds[id]);
+        if (groupId) {
+          acc[element.id] = true;
+          if (!Array.isArray(groupElementsIndex[groupId])) {
+            groupElementsIndex[groupId] = [element.id];
+          } else {
+            groupElementsIndex[groupId].push(element.id);
           }
-          const shapes = getArrowheadShapes(
-            element,
-            shape,
-            "end",
-            endArrowhead,
-            generator,
-            options,
-            canvasBackgroundColor,
-            isDarkMode
-          );
-          shape.push(...shapes);
+        }
+        return acc;
+      },
+      {}
+    );
+    for (const groupId of Object.keys(groupElementsIndex)) {
+      if (groupElementsIndex[groupId].length < 2) {
+        if (selectedGroupIds[groupId]) {
+          selectedGroupIds[groupId] = false;
         }
       }
-      return shape;
-    }
-    case "freedraw": {
-      const shapes = [];
-      if (isPathALoop2(element.points)) {
-        const simplifiedPoints = simplify(
-          element.points,
-          0.75
-        );
-        shapes.push(
-          generator.curve(simplifiedPoints, {
-            ...generateRoughOptions(element, false, isDarkMode),
-            stroke: "none"
-          })
-        );
-      }
-      shapes.push(getFreeDrawSvgPath(element));
-      return shapes;
     }
-    case "frame":
-    case "magicframe":
-    case "text":
-    case "image": {
-      const shape = null;
-      return shape;
+    lastElements = elements;
+    lastSelectedElements = selectedElements;
+    lastReturnValue = {
+      editingGroupId: appState.editingGroupId,
+      selectedGroupIds,
+      selectedElementIds: makeNextSelectedElementIds2(
+        {
+          ...appState.selectedElementIds,
+          ...selectedElementIdsInGroups
+        },
+        prevAppState
+      )
+    };
+    return lastReturnValue;
+  };
+  const selectGroupsForSelectedElements8 = (appState, elements, prevAppState, app) => {
+    const selectedElements = app ? app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      // supplying elements explicitly in case we're passed non-state elements
+      elements
+    }) : getSelectedElements3(elements, appState);
+    if (!selectedElements.length) {
+      return {
+        selectedGroupIds: {},
+        editingGroupId: null,
+        selectedElementIds: makeNextSelectedElementIds2(
+          appState.selectedElementIds,
+          prevAppState
+        )
+      };
     }
-    default: {
-      assertNever3(
-        element,
-        `generateElementShape(): Unimplemented type ${element?.type}`
-      );
-      return null;
+    return _selectGroups(selectedElements, elements, appState, prevAppState);
+  };
+  selectGroupsForSelectedElements8.clearCache = () => {
+    lastElements = null;
+    lastSelectedElements = null;
+    lastReturnValue = null;
+  };
+  return selectGroupsForSelectedElements8;
+}();
+
+// ../element/src/selection.ts
+var isSomeElementSelected3 = function() {
+  let lastElements = null;
+  let lastSelectedElementIds = null;
+  let isSelected = null;
+  const ret = (elements, appState) => {
+    if (isSelected != null && elements === lastElements && appState.selectedElementIds === lastSelectedElementIds) {
+      return isSelected;
     }
-  }
-};
-var generateElbowArrowShape = (points, radius) => {
-  const subpoints = [];
-  for (let i = 1; i < points.length - 1; i += 1) {
-    const prev = points[i - 1];
-    const next = points[i + 1];
-    const point = points[i];
-    const prevIsHorizontal = headingForPointIsHorizontal(point, prev);
-    const nextIsHorizontal = headingForPointIsHorizontal(next, point);
-    const corner = Math.min(
-      radius,
-      pointDistance7(points[i], next) / 2,
-      pointDistance7(points[i], prev) / 2
+    isSelected = elements.some(
+      (element) => appState.selectedElementIds[element.id]
     );
-    if (prevIsHorizontal) {
-      if (prev[0] < point[0]) {
-        subpoints.push([points[i][0] - corner, points[i][1]]);
-      } else {
-        subpoints.push([points[i][0] + corner, points[i][1]]);
-      }
-    } else if (prev[1] < point[1]) {
-      subpoints.push([points[i][0], points[i][1] - corner]);
-    } else {
-      subpoints.push([points[i][0], points[i][1] + corner]);
+    lastElements = elements;
+    lastSelectedElementIds = appState.selectedElementIds;
+    return isSelected;
+  };
+  ret.clearCache = () => {
+    lastElements = null;
+    lastSelectedElementIds = null;
+    isSelected = null;
+  };
+  return ret;
+}();
+var getSelectedElements3 = (elements, appState, opts) => {
+  const addedElements = /* @__PURE__ */ new Set();
+  const selectedElements = [];
+  for (const element of elements.values()) {
+    if (appState.selectedElementIds[element.id]) {
+      selectedElements.push(element);
+      addedElements.add(element.id);
+      continue;
     }
-    subpoints.push(points[i]);
-    if (nextIsHorizontal) {
-      if (next[0] < point[0]) {
-        subpoints.push([points[i][0] - corner, points[i][1]]);
-      } else {
-        subpoints.push([points[i][0] + corner, points[i][1]]);
-      }
-    } else if (next[1] < point[1]) {
-      subpoints.push([points[i][0], points[i][1] - corner]);
-    } else {
-      subpoints.push([points[i][0], points[i][1] + corner]);
+    if (opts?.includeBoundTextElement && isBoundToContainer5(element) && appState.selectedElementIds[element?.containerId]) {
+      selectedElements.push(element);
+      addedElements.add(element.id);
+      continue;
     }
   }
-  const d = [`M ${points[0][0]} ${points[0][1]}`];
-  for (let i = 0; i < subpoints.length; i += 3) {
-    d.push(`L ${subpoints[i][0]} ${subpoints[i][1]}`);
-    d.push(
-      `Q ${subpoints[i + 1][0]} ${subpoints[i + 1][1]}, ${subpoints[i + 2][0]} ${subpoints[i + 2][1]}`
-    );
+  if (opts?.includeElementsInFrames) {
+    const elementsToInclude = [];
+    selectedElements.forEach((element) => {
+      if (isFrameLikeElement7(element)) {
+        getFrameChildren2(elements, element.id).forEach(
+          (e) => !addedElements.has(e.id) && elementsToInclude.push(e)
+        );
+      }
+      elementsToInclude.push(element);
+    });
+    return elementsToInclude;
   }
-  d.push(`L ${points[points.length - 1][0]} ${points[points.length - 1][1]}`);
-  return d.join(" ");
-};
-var getFreeDrawSvgPath = (element) => {
-  return getSvgPathFromStroke(
-    getFreedrawOutlinePoints(element)
-  );
-};
-var getFreedrawOutlinePoints = (element) => {
-  const inputPoints = element.simulatePressure ? element.points : element.points.length ? element.points.map(([x, y], i) => [x, y, element.pressures[i]]) : [[0, 0, 0.5]];
-  return getStroke(inputPoints, {
-    simulatePressure: element.simulatePressure,
-    size: element.strokeWidth * 4.25,
-    thinning: 0.6,
-    smoothing: 0.5,
-    streamline: 0.5,
-    easing: (t2) => Math.sin(t2 * Math.PI / 2),
-    // https://easings.net/#easeOutSine
-    last: true
-  });
+  return selectedElements;
 };
-var med = (A, B) => {
-  return [(A[0] + B[0]) / 2, (A[1] + B[1]) / 2];
+var makeNextSelectedElementIds2 = (nextSelectedElementIds, prevState) => {
+  if (isShallowEqual3(prevState.selectedElementIds, nextSelectedElementIds)) {
+    return prevState.selectedElementIds;
+  }
+  return nextSelectedElementIds;
 };
-var TO_FIXED_PRECISION = /(\s?[A-Z]?,?-?[0-9]*\.[0-9]{0,2})(([0-9]|e|-)*)/g;
-var getSvgPathFromStroke = (points) => {
-  if (!points.length) {
-    return "";
+
+// ../element/src/frame.ts
+var getFrameChildren2 = (allElements, frameId) => {
+  const frameChildren = [];
+  for (const element of allElements.values()) {
+    if (element.frameId === frameId) {
+      frameChildren.push(element);
+    }
   }
-  const max = points.length - 1;
-  return points.reduce(
-    (acc, point, i, arr) => {
-      if (i === max) {
-        acc.push(point, med(point, arr[0]), "L", arr[0], "Z");
-      } else {
-        acc.push(point, med(point, arr[i + 1]));
-      }
-      return acc;
-    },
-    ["M", points[0], "Q"]
-  ).join(" ").replace(TO_FIXED_PRECISION, "$1");
+  return frameChildren;
 };
 
+// ../element/src/renderElement.ts
+var IMAGE_PLACEHOLDER_IMG = typeof document !== "undefined" ? document.createElement("img") : { src: "" };
+IMAGE_PLACEHOLDER_IMG.src = `data:${MIME_TYPES7.svg},${encodeURIComponent(
+  `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#888" d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg>`
+)}`;
+var IMAGE_ERROR_PLACEHOLDER_IMG = typeof document !== "undefined" ? document.createElement("img") : { src: "" };
+IMAGE_ERROR_PLACEHOLDER_IMG.src = `data:${MIME_TYPES7.svg},${encodeURIComponent(
+  `<svg viewBox="0 0 668 668" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48ZM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56ZM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.81709 0 0 .81709 124.825 145.825)"/><path d="M256 8C119.034 8 8 119.033 8 256c0 136.967 111.034 248 248 248s248-111.034 248-248S392.967 8 256 8Zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676ZM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.30366 0 0 .30366 506.822 60.065)"/></svg>`
+)}`;
+var elementWithCanvasCache = /* @__PURE__ */ new WeakMap();
+
 // ../element/src/mutateElement.ts
 var newElementWith9 = (element, updates, force = false) => {
   let didChange = false;
@@ -21229,7 +21529,7 @@ var getElementsCorners = (elements, elementsMap, {
     }
     const halfWidth = (x2 - x1) / 2;
     const halfHeight = (y2 - y1) / 2;
-    if ((element.type === "diamond" || element.type === "ellipse") && !boundingBoxCorners) {
+    if ((element.type === "diamond" || element.type === "triangle" || element.type === "ellipse") && !boundingBoxCorners) {
       const leftMid = pointRotateRads15(
         pointFrom19(x1, y1 + halfHeight),
         pointFrom19(cx, cy),
@@ -22113,7 +22413,7 @@ var getSnapLinesAtPointer = (elements, app, pointer, event, elementsMap) => {
   };
 };
 var isActiveToolNonLinearSnappable = (activeToolType) => {
-  return activeToolType === TOOL_TYPE.rectangle || activeToolType === TOOL_TYPE.ellipse || activeToolType === TOOL_TYPE.diamond || activeToolType === TOOL_TYPE.frame || activeToolType === TOOL_TYPE.magicframe || activeToolType === TOOL_TYPE.image || activeToolType === TOOL_TYPE.text;
+  return activeToolType === TOOL_TYPE.rectangle || activeToolType === TOOL_TYPE.ellipse || activeToolType === TOOL_TYPE.diamond || activeToolType === TOOL_TYPE.triangle || activeToolType === TOOL_TYPE.frame || activeToolType === TOOL_TYPE.magicframe || activeToolType === TOOL_TYPE.image || activeToolType === TOOL_TYPE.text;
 };
 
 // scene/Renderer.ts
@@ -22590,7 +22890,8 @@ import {
   isTestEnv as isTestEnv4,
   MIME_TYPES as MIME_TYPES8,
   applyDarkModeFilter as applyDarkModeFilter3,
-  isRTL as isRTL2
+  isRTL as isRTL2,
+  sceneFontSizeToScreen
 } from "@nous-excalidraw/common";
 import { pointFrom as pointFrom21, pointRotateRads as pointRotateRads17 } from "@nous-excalidraw/math";
 import {
@@ -22623,18 +22924,12 @@ import {
   isBoundToContainer as isBoundToContainer7,
   isTextElement as isTextElement9
 } from "@nous-excalidraw/element";
-var getTransform = (width, height, angle, appState, maxWidth, maxHeight) => {
-  const { zoom } = appState;
-  const degree = 180 * angle / Math.PI;
-  let translateX = width * (zoom.value - 1) / 2;
-  let translateY = height * (zoom.value - 1) / 2;
-  if (width > maxWidth && zoom.value !== 1) {
-    translateX = maxWidth * (zoom.value - 1) / 2;
-  }
-  if (height > maxHeight && zoom.value !== 1) {
-    translateY = maxHeight * (zoom.value - 1) / 2;
+var getTransform = (angle) => {
+  if (!angle) {
+    return "none";
   }
-  return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
+  const degree = 180 * angle / Math.PI;
+  return `rotate(${degree}deg)`;
 };
 var getLineDirection = (text, offset) => {
   const hardLineStart = text.lastIndexOf("\n", Math.max(0, offset - 1)) + 1;
@@ -22733,7 +23028,11 @@ var textWysiwyg = ({
     if (getFontFamilyString3({ fontFamily: updatedTextElement.fontFamily }) !== currentFont) {
       return true;
     }
-    if (`${updatedTextElement.fontSize}px` !== editable2.style.fontSize) {
+    const screenFontSize = sceneFontSizeToScreen(
+      updatedTextElement.fontSize,
+      app.state.zoom.value
+    );
+    if (`${screenFontSize}px` !== editable2.style.fontSize) {
       return true;
     }
     return false;
@@ -22830,25 +23129,29 @@ var textWysiwyg = ({
         width += 0.5;
       }
       height *= 1.05;
-      const font = getFontString7(updatedTextElement);
+      const zoom = appState.zoom.value;
+      const screenFontSize = sceneFontSizeToScreen(
+        updatedTextElement.fontSize,
+        zoom
+      );
+      const font = getFontString7({
+        fontSize: screenFontSize,
+        fontFamily: updatedTextElement.fontFamily
+      });
       const angle = getTextElementAngle(updatedTextElement, container);
-      const editorMaxHeight = (appState.height - viewportY) / appState.zoom.value;
+      const screenWidth = width * zoom;
+      const screenHeight = height * zoom;
+      const editorMaxHeight = appState.height - viewportY;
       Object.assign(editable.style, {
         font,
         // must be defined *after* font ¯\_(ツ)_/¯
         lineHeight: updatedTextElement.lineHeight,
-        width: `${width}px`,
-        height: `${height}px`,
+        width: `${screenWidth}px`,
+        height: `${screenHeight}px`,
         left: `${viewportX}px`,
         top: `${viewportY}px`,
-        transform: getTransform(
-          width,
-          height,
-          angle,
-          appState,
-          maxWidth,
-          editorMaxHeight
-        ),
+        transform: getTransform(angle),
+        transformOrigin: "left top",
         textAlign,
         verticalAlign,
         color: appState.theme === THEME11.DARK ? applyDarkModeFilter3(updatedTextElement.strokeColor) : updatedTextElement.strokeColor,
@@ -23656,6 +23959,7 @@ import {
   getElementBounds as getElementBounds3,
   getElementLineSegments as getElementLineSegments3,
   getFreedrawOutlineAsSegments,
+  getEffectiveStrokeWidth as getEffectiveStrokeWidth2,
   getFreedrawOutlinePoints as getFreedrawOutlinePoints2,
   intersectElementWithLineSegment as intersectElementWithLineSegment3,
   isArrowElement as isArrowElement9,
@@ -23792,7 +24096,8 @@ var EraserTrail = class extends AnimatedTrail {
 };
 var eraserTest = (pathSegment, element, elementsMap, zoom) => {
   const lastPoint = pathSegment[1];
-  const threshold = isFreeDrawElement3(element) ? 15 : element.strokeWidth / 2;
+  const effectiveStrokeWidth = getEffectiveStrokeWidth2(element, zoom);
+  const threshold = isFreeDrawElement3(element) ? 15 : effectiveStrokeWidth / 2;
   const segmentBounds = [
     Math.min(pathSegment[0][0], pathSegment[1][0]) - threshold,
     Math.min(pathSegment[0][1], pathSegment[1][1]) - threshold,
@@ -23813,7 +24118,7 @@ var eraserTest = (pathSegment, element, elementsMap, zoom) => {
     return true;
   }
   if (isFreeDrawElement3(element)) {
-    const outlinePoints = getFreedrawOutlinePoints2(element);
+    const outlinePoints = getFreedrawOutlinePoints2(element, zoom);
     const strokeSegments = getFreedrawOutlineAsSegments(
       element,
       outlinePoints,
@@ -23838,8 +24143,8 @@ var eraserTest = (pathSegment, element, elementsMap, zoom) => {
   const boundTextElement = getBoundTextElement8(element, elementsMap);
   if (isArrowElement9(element) || isLineElement5(element) && !element.polygon) {
     const tolerance = Math.max(
-      element.strokeWidth,
-      element.strokeWidth * 2 / zoom
+      effectiveStrokeWidth,
+      effectiveStrokeWidth * 2 / zoom
     );
     const segments = getElementLineSegments3(element, elementsMap);
     for (const seg of segments) {
@@ -23869,7 +24174,7 @@ import { newElement as newElement4 } from "@nous-excalidraw/element";
 import {
   COLOR_PALETTE as COLOR_PALETTE5,
   DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY4,
-  DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE5,
+  DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE4,
   VERTICAL_ALIGN as VERTICAL_ALIGN4
 } from "@nous-excalidraw/common";
 var CARTESIAN_BASE_SLOT_WIDTH = 44;
@@ -23902,7 +24207,7 @@ var RADAR_LEGEND_TEXT_GAP = BAR_GAP;
 var commonProps = {
   fillStyle: "hachure",
   fontFamily: DEFAULT_FONT_FAMILY4,
-  fontSize: DEFAULT_FONT_SIZE5,
+  fontSize: DEFAULT_FONT_SIZE4,
   opacity: 100,
   roughness: 1,
   strokeColor: COLOR_PALETTE5.black,
@@ -23919,9 +24224,9 @@ import {
   COLOR_PALETTE as COLOR_PALETTE6,
   DEFAULT_CHART_COLOR_INDEX,
   FONT_FAMILY as FONT_FAMILY4,
-  FONT_SIZES as FONT_SIZES2,
+  FONT_SIZES,
   ROUNDNESS as ROUNDNESS6,
-  DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE6,
+  DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE5,
   getAllColorsSpecificShade,
   getFontString as getFontString8,
   getLineHeight as getLineHeight3,
@@ -24069,7 +24374,7 @@ var getRadarDisplayText = (text, fontString, maxWidth) => {
 };
 var createRadarAxisLabels = (labels, angles, centerX, centerY, radius, backgroundColor) => {
   const fontFamily = FONT_FAMILY4.Excalifont;
-  const fontSize = FONT_SIZES2.sm;
+  const fontSize = FONT_SIZES.sm;
   const lineHeight = getLineHeight3(fontFamily);
   const fontString = getFontString8({ fontFamily, fontSize });
   const baseLabelWidth = Math.min(
@@ -24124,7 +24429,7 @@ var createSeriesLegend = (series, seriesColors, centerX, minLegendTopY, fallback
     return [];
   }
   const fontFamily = FONT_FAMILY4["Lilita One"];
-  const fontSize = FONT_SIZES2.lg;
+  const fontSize = FONT_SIZES.lg;
   const lineHeight = getLineHeight3(fontFamily);
   const fontString = getFontString8({ fontFamily, fontSize });
   const legendItems = series.map((seriesItem, index) => {
@@ -24342,7 +24647,7 @@ var getRotatedTextElementBottom = (element) => {
 };
 var chartXLabels = (spreadsheet, x, y, backgroundColor, layout) => {
   const fontFamily = commonProps.fontFamily;
-  const fontSize = FONT_SIZES2.sm;
+  const fontSize = FONT_SIZES.sm;
   const lineHeight = getLineHeight3(fontFamily);
   const fontString = getFontString8({ fontFamily, fontSize });
   const maxRotatedWidth = Math.max(
@@ -24435,10 +24740,10 @@ var chartBaseElements = (spreadsheet, x, y, backgroundColor, layout, maxValue =
     ...commonProps,
     text: spreadsheet.title,
     x: x + chartWidth / 2,
-    y: y - layout.chartHeight - layout.gap * 2 - DEFAULT_FONT_SIZE6,
+    y: y - layout.chartHeight - layout.gap * 2 - DEFAULT_FONT_SIZE5,
     roundness: null,
     textAlign: "center",
-    fontSize: FONT_SIZES2.xl,
+    fontSize: FONT_SIZES.xl,
     fontFamily: FONT_FAMILY4["Lilita One"]
   }) : null;
   const debugRect = debug ? newElement3({
@@ -24749,7 +25054,7 @@ var tryParseSpreadsheet = (text) => {
 import { pointFrom as pointFrom26 } from "@nous-excalidraw/math";
 import {
   FONT_FAMILY as FONT_FAMILY5,
-  FONT_SIZES as FONT_SIZES3,
+  FONT_SIZES as FONT_SIZES2,
   getFontString as getFontString9,
   getLineHeight as getLineHeight4,
   ROUGHNESS as ROUGHNESS3
@@ -24785,7 +25090,7 @@ var renderRadarChart = (spreadsheet, x, y, colorSeed) => {
     backgroundColor
   );
   const titleFontFamily = FONT_FAMILY5["Lilita One"];
-  const titleFontSize = FONT_SIZES3.xl;
+  const titleFontSize = FONT_SIZES2.xl;
   const titleLineHeight = getLineHeight4(titleFontFamily);
   const titleFontString = getFontString9({
     fontFamily: titleFontFamily,
@@ -25279,6 +25584,11 @@ var SHAPE_TOOLS = [
     icon: DiamondIcon,
     title: capitalizeString4(t("toolBar.diamond"))
   },
+  {
+    type: "triangle",
+    icon: TriangleIcon,
+    title: capitalizeString4(t("toolBar.triangle"))
+  },
   {
     type: "ellipse",
     icon: EllipseIcon,
@@ -25315,7 +25625,7 @@ var MobileToolBar = ({
   const [lastActiveGenericShape, setLastActiveGenericShape] = useState27("rectangle");
   const [lastActiveLinearElement, setLastActiveLinearElement] = useState27("arrow");
   useEffect31(() => {
-    if (activeTool.type === "rectangle" || activeTool.type === "diamond" || activeTool.type === "ellipse") {
+    if (activeTool.type === "rectangle" || activeTool.type === "diamond" || activeTool.type === "triangle" || activeTool.type === "ellipse") {
       setLastActiveGenericShape(activeTool.type);
     }
   }, [activeTool.type]);
@@ -25454,12 +25764,12 @@ var MobileToolBar = ({
             namePrefix: "shapeType",
             title: capitalizeString4(
               t(
-                lastActiveGenericShape === "rectangle" ? "toolBar.rectangle" : lastActiveGenericShape === "diamond" ? "toolBar.diamond" : lastActiveGenericShape === "ellipse" ? "toolBar.ellipse" : "toolBar.rectangle"
+                lastActiveGenericShape === "rectangle" ? "toolBar.rectangle" : lastActiveGenericShape === "diamond" ? "toolBar.diamond" : lastActiveGenericShape === "triangle" ? "toolBar.triangle" : lastActiveGenericShape === "ellipse" ? "toolBar.ellipse" : "toolBar.rectangle"
               )
             ),
             "data-testid": "toolbar-rectangle",
             onToolChange: (type) => {
-              if (type === "rectangle" || type === "diamond" || type === "ellipse") {
+              if (type === "rectangle" || type === "diamond" || type === "triangle" || type === "ellipse") {
                 setLastActiveGenericShape(type);
                 app.setActiveTool({ type });
               }
@@ -25855,6 +26165,13 @@ var getNonLinearElementRelativePoints = (element) => {
       pointFrom27(0, element.height / 2)
     ];
   }
+  if (element.type === "triangle") {
+    return [
+      pointFrom27(element.width / 2, 0),
+      pointFrom27(0, element.height),
+      pointFrom27(element.width, element.height)
+    ];
+  }
   return [
     pointFrom27(0, 0),
     pointFrom27(0 + element.width, 0),
@@ -28464,7 +28781,7 @@ var TTDDialogInput = ({
         setShowSpinner(true);
       }
     }, SPINNER_DELAY_MS);
-    import("./components/TTDDialog/CodeMirrorEditor-T4CL43BJ.js").then((mod) => {
+    import("./components/TTDDialog/CodeMirrorEditor-LUWBT76B.js").then((mod) => {
       if (!cancelled) {
         setEditorState({ type: "ready", component: mod.default });
       }
@@ -31381,15 +31698,15 @@ import {
   getUncroppedWidthAndHeight
 } from "@nous-excalidraw/element";
 import { resizeSingleElement } from "@nous-excalidraw/element";
-import { isImageElement as isImageElement4 } from "@nous-excalidraw/element";
+import {
+  isImageElement as isImageElement4,
+  shouldForceMaintainAspectRatio
+} from "@nous-excalidraw/element";
 import { isFrameLikeElement as isFrameLikeElement12 } from "@nous-excalidraw/element";
 import { getElementsInResizingFrame as getElementsInResizingFrame2 } from "@nous-excalidraw/element";
 import { replaceAllElementsInFrame as replaceAllElementsInFrame2 } from "@nous-excalidraw/element";
 import { jsx as jsx137 } from "react/jsx-runtime";
 var STEP_SIZE4 = 10;
-var _shouldKeepAspectRatio = (element) => {
-  return element.type === "image";
-};
 var handleDimensionChange = ({
   accumulatedChange,
   originalElements,
@@ -31408,7 +31725,7 @@ var handleDimensionChange = ({
   const origElement = originalElements[0];
   const latestElement = elementsMap.get(origElement.id);
   if (origElement && latestElement) {
-    const keepAspectRatio = shouldKeepAspectRatio || _shouldKeepAspectRatio(origElement);
+    const keepAspectRatio = shouldKeepAspectRatio || shouldForceMaintainAspectRatio(origElement);
     const aspectRatio = origElement.width / origElement.height;
     if (originalAppState.croppingElementId === origElement.id) {
       const element = elementsMap.get(origElement.id);
@@ -33242,6 +33559,13 @@ var HelpDialog = ({ onClose }) => {
                     shortcuts: [KEYS54.D, KEYS54["3"]]
                   }
                 ),
+                /* @__PURE__ */ jsx147(
+                  Shortcut,
+                  {
+                    label: t("toolBar.triangle"),
+                    shortcuts: [KEYS54.G]
+                  }
+                ),
                 /* @__PURE__ */ jsx147(
                   Shortcut,
                   {
@@ -35156,6 +35480,7 @@ import {
 import {
   arrayToMap as arrayToMap26,
   BIND_MODE_TIMEOUT,
+  DEFAULT_TRANSFORM_HANDLE_SPACING as DEFAULT_TRANSFORM_HANDLE_SPACING2,
   FRAME_STYLE as FRAME_STYLE3,
   getFontString as getFontString11,
   getFeatureFlag as getFeatureFlag3,
@@ -35165,15 +35490,18 @@ import {
 } from "@nous-excalidraw/common";
 import {
   deconstructDiamondElement as deconstructDiamondElement2,
+  deconstructTriangleElement as deconstructTriangleElement2,
   deconstructRectanguloidElement as deconstructRectanguloidElement2,
   elementCenterPoint as elementCenterPoint2,
   getDiamondBaseCorners,
+  getTriangleBaseCorners,
   FOCUS_POINT_SIZE as FOCUS_POINT_SIZE2,
   getOmitSidesForEditorInterface,
   getTransformHandles,
   getTransformHandlesFromCoords,
   getCornerRadius as getCornerRadius2,
   getDiamondPoints as getDiamondPoints2,
+  getTrianglePoints as getTrianglePoints2,
   getFreedrawOutlinePoints as getFreedrawOutlinePoints3,
   getLineHeightInPx as getLineHeightInPx3,
   hasBoundingBox,
@@ -35199,12 +35527,7 @@ import {
   isSelectedViaGroup,
   selectGroupsFromGivenElements as selectGroupsFromGivenElements3
 } from "@nous-excalidraw/element";
-import {
-  getCommonBounds as getCommonBounds9,
-  getCommonSelectionBounds,
-  getElementAbsoluteCoords as getElementAbsoluteCoords7,
-  getElementSelectionCoords
-} from "@nous-excalidraw/element";
+import { getCommonBounds as getCommonBounds9, getElementAbsoluteCoords as getElementAbsoluteCoords7 } from "@nous-excalidraw/element";
 import {
   getGlobalFixedPointForBindableElement as getGlobalFixedPointForBindableElement2,
   isFocusPointVisible
@@ -35482,10 +35805,9 @@ var renderBindingHighlightForBindableElement_simple = (context, suggestedBinding
           context.stroke();
           break;
         case "diamond":
+        case "triangle":
           {
-            const [segments, curves] = deconstructDiamondElement2(
-              suggestedBinding.element
-            );
+            const [segments, curves] = suggestedBinding.element.type === "diamond" ? deconstructDiamondElement2(suggestedBinding.element) : deconstructTriangleElement2(suggestedBinding.element);
             segments.forEach((segment) => {
               context.beginPath();
               context.moveTo(
@@ -35588,6 +35910,22 @@ var renderBindingHighlightForBindableElement_simple = (context, suggestedBinding
             return pointFrom33(rotatedPoint[0], rotatedPoint[1]);
           }
         );
+      } else if (suggestedBinding.element.type === "triangle") {
+        const center2 = elementCenterPoint2(
+          suggestedBinding.element,
+          elementsMap
+        );
+        midpoints = getTriangleBaseCorners(suggestedBinding.element).map(
+          (curve3) => {
+            const point = bezierEquation2(curve3, 0.5);
+            const rotatedPoint = pointRotateRads22(
+              point,
+              center2,
+              suggestedBinding.element.angle
+            );
+            return pointFrom33(rotatedPoint[0], rotatedPoint[1]);
+          }
+        );
       } else {
         const basePoints = [
           {
@@ -35728,11 +36066,9 @@ var renderBindingHighlightForBindableElement_complex = (app, context, element, a
           context.stroke();
           break;
         case "diamond":
+        case "triangle":
           {
-            const [segments, curves] = deconstructDiamondElement2(
-              element,
-              offset
-            );
+            const [segments, curves] = element.type === "diamond" ? deconstructDiamondElement2(element, offset) : deconstructTriangleElement2(element, offset);
             segments.forEach((segment) => {
               context.beginPath();
               context.moveTo(
@@ -35865,6 +36201,17 @@ var renderBindingHighlightForBindableElement_complex = (app, context, element, a
             y: rotatedPoint[1] - element.y
           };
         });
+      } else if (element.type === "triangle") {
+        const [, curves] = deconstructTriangleElement2(element);
+        const center = elementCenterPoint2(element, allElementsMap);
+        midpoints = curves.map((curve3) => {
+          const point = bezierEquation2(curve3, 0.5);
+          const rotatedPoint = pointRotateRads22(point, center, element.angle);
+          return {
+            x: rotatedPoint[0] - element.x,
+            y: rotatedPoint[1] - element.y
+          };
+        });
       } else {
         const center = elementCenterPoint2(element, allElementsMap);
         const basePoints = [
@@ -35954,18 +36301,17 @@ var renderSelectionBorder = (context, appState, elementProperties) => {
     selectionColors,
     cx,
     cy,
-    dashed,
-    activeEmbeddable
+    dashed
   } = elementProperties;
   const elementWidth = x2 - x1;
   const elementHeight = y2 - y1;
-  const padding = elementProperties.padding ?? 0;
+  const padding = elementProperties.padding ?? DEFAULT_TRANSFORM_HANDLE_SPACING2 * 2;
   const linePadding = padding / appState.zoom.value;
   const lineWidth = 8 / appState.zoom.value;
   const spaceWidth = 4 / appState.zoom.value;
   context.save();
   context.translate(appState.scrollX, appState.scrollY);
-  context.lineWidth = (activeEmbeddable ? 4 : 1) / appState.zoom.value;
+  context.lineWidth = SELECTION_BORDER_STROKE_PX / appState.zoom.value;
   const count = selectionColors.length;
   for (let index = 0; index < count; ++index) {
     context.strokeStyle = selectionColors[index];
@@ -35992,6 +36338,7 @@ var renderSelectionBorder = (context, appState, elementProperties) => {
 var HOVER_OUTLINE_STROKE_PX_FRAME = 3;
 var HOVER_OUTLINE_STROKE_PX_OTHER = 2;
 var HOVER_OUTLINE_COLOR = "#8F6AEF";
+var SELECTION_BORDER_STROKE_PX = 2;
 var DEFAULT_SELECTION_COLOR = "#8F6AEF";
 var elementEligibleForHoverOutline = (el) => isFrameLikeElement14(el) || isImageElement8(el) || isEmbeddableElement4(el) || isHoverNativeOutlineShapeElement(el) || isTextElement18(el);
 var TEXT_HOVER_UNDERLINE_GAP_BELOW_DESCENT_PX = 1;
@@ -36034,9 +36381,10 @@ var getTextHoverUnderlineLocalY = (element, zoom) => {
 var renderHoverOutlineElement = (context, appState, element, elementsMap) => {
   const hoverStrokePx = isFrameLikeElement14(element) ? HOVER_OUTLINE_STROKE_PX_FRAME : HOVER_OUTLINE_STROKE_PX_OTHER;
   const lineWidthScene = hoverStrokePx / appState.zoom.value;
-  const [x1, y1, x2, y2, cx, cy] = getElementSelectionCoords(
+  const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords7(
     element,
-    elementsMap
+    elementsMap,
+    true
   );
   const width = x2 - x1;
   const height = y2 - y1;
@@ -36089,6 +36437,36 @@ var renderHoverOutlineElement = (context, appState, element, elementsMap) => {
     context.restore();
     return;
   }
+  if (element.type === "triangle") {
+    const [topX, topY, leftX, leftY, rightX, rightY] = getTrianglePoints2(element);
+    const center = pointFrom33(cx, cy);
+    const corners = [
+      pointRotateRads22(
+        pointFrom33(element.x + topX, element.y + topY),
+        center,
+        element.angle
+      ),
+      pointRotateRads22(
+        pointFrom33(element.x + leftX, element.y + leftY),
+        center,
+        element.angle
+      ),
+      pointRotateRads22(
+        pointFrom33(element.x + rightX, element.y + rightY),
+        center,
+        element.angle
+      )
+    ];
+    context.beginPath();
+    context.moveTo(corners[0][0], corners[0][1]);
+    for (let i = 1; i < corners.length; i++) {
+      context.lineTo(corners[i][0], corners[i][1]);
+    }
+    context.closePath();
+    context.stroke();
+    context.restore();
+    return;
+  }
   if (isLinearElement11(element)) {
     const pts = LinearElementEditor10.getPointsGlobalCoordinates(
       element,
@@ -36107,7 +36485,7 @@ var renderHoverOutlineElement = (context, appState, element, elementsMap) => {
   }
   if (element.type === "freedraw") {
     const fd = element;
-    const outline = getFreedrawOutlinePoints3(fd);
+    const outline = getFreedrawOutlinePoints3(fd, appState.zoom.value);
     if (outline.length >= 2) {
       const center = pointFrom33(cx, cy);
       context.beginPath();
@@ -36208,9 +36586,10 @@ var buildElementSelectionBorders = ({
       }
     }
     if (selectionColors.length) {
-      const [x1, y1, x2, y2, cx, cy] = getElementSelectionCoords(
+      const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords7(
         element,
-        elementsMap
+        elementsMap,
+        true
       );
       selections.push({
         angle: element.angle,
@@ -36223,16 +36602,13 @@ var buildElementSelectionBorders = ({
         cx,
         cy,
         activeEmbeddable: !isEmbeddableElement4(element) && appState.activeEmbeddable?.element === element && appState.activeEmbeddable.state === "active",
-        padding: 0
+        padding: element.id === appState.croppingElementId || isImageElement8(element) || isEmbeddableElement4(element) || isFrameLikeElement14(element) ? 0 : void 0
       });
     }
   }
   const addSelectionForGroupId = (groupId) => {
     const groupElements = getElementsInGroup8(elementsMap, groupId);
-    const [x1, y1, x2, y2] = getCommonSelectionBounds(
-      groupElements,
-      elementsMap
-    );
+    const [x1, y1, x2, y2] = getCommonBounds9(groupElements);
     selections.push({
       angle: 0,
       x1,
@@ -36243,8 +36619,7 @@ var buildElementSelectionBorders = ({
       dashed: true,
       cx: x1 + (x2 - x1) / 2,
       cy: y1 + (y2 - y1) / 2,
-      activeEmbeddable: false,
-      padding: 0
+      activeEmbeddable: false
     });
   };
   for (const groupId of getSelectedGroupIds3(appState)) {
@@ -36255,7 +36630,7 @@ var buildElementSelectionBorders = ({
   }
   return selections;
 };
-var shouldOmitSelectionChromeWhileDraggingSingleFrame = (appState, selectedElements) => !!(appState.selectedElementsAreBeingDragged && selectedElements.length === 1 && isFrameLikeElement14(selectedElements[0]));
+var shouldOmitSelectionChromeWhileDragging = (appState) => appState.selectedElementsAreBeingDragged;
 var shouldDrawHoverOutlineForElement = (appState, element) => !appState.selectedElementIds[element.id] && !isSelectedViaGroup(appState, element);
 var paintHoverAndSelectionOutlines = ({
   context,
@@ -36283,7 +36658,7 @@ var paintHoverAndSelectionOutlines = ({
       appState,
       editorInterface
     );
-    if (showBoundingBox && !shouldOmitSelectionChromeWhileDraggingSingleFrame(appState, selectedElements)) {
+    if (showBoundingBox && !shouldOmitSelectionChromeWhileDragging(appState)) {
       const selections = buildElementSelectionBorders({
         elementsMap,
         selectedElements,
@@ -36570,7 +36945,8 @@ var renderTransformHandles = (context, renderConfig, appState, transformHandles,
         fillCircle(context, x + width / 2, y + height / 2, width / 2, true);
       } else if (CORNER_TRANSFORM_HANDLE_TYPES.has(handleType)) {
         const cornerStroke = renderConfig.selectionColor || DEFAULT_SELECTION_COLOR;
-        context.fillStyle = "#ffffff";
+        const isHovered = renderConfig.hoveredCornerTransformHandleType === handleType;
+        context.fillStyle = isHovered ? cornerStroke : "#ffffff";
         context.save();
         context.translate(x + width / 2, y + height / 2);
         context.rotate(angle);
@@ -36748,7 +37124,7 @@ var _renderInteractiveScene = ({
   if (canvas === null) {
     return { atLeastOneVisibleElement: false, elementsMap };
   }
-  const omitSelectionChromeDraggingSingleFrame = shouldOmitSelectionChromeWhileDraggingSingleFrame(appState, selectedElements);
+  const omitSelectionChromeWhileDragging = shouldOmitSelectionChromeWhileDragging(appState);
   const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(
     canvas,
     scale
@@ -36916,7 +37292,7 @@ var _renderInteractiveScene = ({
       );
     }
     const selectionColor = renderConfig.selectionColor || DEFAULT_SELECTION_COLOR;
-    if (showBoundingBox && !omitSelectionChromeDraggingSingleFrame) {
+    if (showBoundingBox && !omitSelectionChromeWhileDragging) {
       const selections = buildElementSelectionBorders({
         elementsMap,
         selectedElements,
@@ -36933,7 +37309,7 @@ var _renderInteractiveScene = ({
     context.save();
     context.translate(appState.scrollX, appState.scrollY);
     if (selectedElements.length === 1) {
-      if (!outlineOverlayCanvas && !omitSelectionChromeDraggingSingleFrame) {
+      if (!outlineOverlayCanvas && !omitSelectionChromeWhileDragging) {
         paintSingleSelectionTransformHandles(
           context,
           appState,
@@ -36956,23 +37332,21 @@ var _renderInteractiveScene = ({
           );
         }
       }
-    } else if (selectedElements.length > 1 && !appState.isRotating && !selectedElements.some((el) => el.locked)) {
+    } else if (selectedElements.length > 1 && !appState.isRotating && !omitSelectionChromeWhileDragging && !selectedElements.some((el) => el.locked)) {
+      const dashedLinePadding = DEFAULT_TRANSFORM_HANDLE_SPACING2 * 2 / appState.zoom.value;
       context.fillStyle = "#fff";
-      const [x1, y1, x2, y2] = getCommonSelectionBounds(
-        selectedElements,
-        elementsMap
-      );
+      const [x1, y1, x2, y2] = getCommonBounds9(selectedElements, elementsMap);
       const initialLineDash = context.getLineDash();
       context.setLineDash([2 / appState.zoom.value]);
       const lineWidth = context.lineWidth;
-      context.lineWidth = 1 / appState.zoom.value;
+      context.lineWidth = SELECTION_BORDER_STROKE_PX / appState.zoom.value;
       context.strokeStyle = selectionColor;
       strokeRectWithRotation_simple(
         context,
-        x1,
-        y1,
-        x2 - x1,
-        y2 - y1,
+        x1 - dashedLinePadding,
+        y1 - dashedLinePadding,
+        x2 - x1 + dashedLinePadding * 2,
+        y2 - y1 + dashedLinePadding * 2,
         (x1 + x2) / 2,
         (y1 + y2) / 2,
         0
@@ -37092,7 +37466,7 @@ var _renderInteractiveScene = ({
       renderConfig,
       editorInterface
     });
-    if (!appState.multiElement && !appState.newElement && !appState.selectedLinearElement?.isEditing && !omitSelectionChromeDraggingSingleFrame) {
+    if (!appState.multiElement && !appState.newElement && !appState.selectedLinearElement?.isEditing && !omitSelectionChromeWhileDragging) {
       const showBoundingBox = hasBoundingBox(
         selectedElements,
         appState,
@@ -37250,6 +37624,7 @@ var InteractiveCanvas = (props) => {
         remotePointerUsernames,
         remotePointerUserStates,
         selectionColor,
+        hoveredCornerTransformHandleType: props.app.hoveredCornerTransformHandleType,
         renderScrollbars: props.renderScrollbars,
         // NOTE not memoized on so we don't rerender on cursor move
         lastViewportPosition: props.app.lastViewportPosition
@@ -37331,6 +37706,7 @@ var getRelevantAppStateProps = (appState) => ({
   isMidpointSnappingEnabled: appState.isMidpointSnappingEnabled,
   suggestedBinding: appState.suggestedBinding,
   isRotating: appState.isRotating,
+  isResizing: appState.isResizing,
   elementsToHighlight: appState.elementsToHighlight,
   collaborators: appState.collaborators,
   // Necessary for collab. sessions
@@ -37451,7 +37827,7 @@ var areEqual4 = (prevProps, nextProps) => {
 var StaticCanvas_default = React45.memo(StaticCanvas, areEqual4);
 
 // components/canvases/NewElementCanvas.tsx
-import { useEffect as useEffect48, useRef as useRef44 } from "react";
+import { useLayoutEffect as useLayoutEffect10, useRef as useRef44 } from "react";
 
 // renderer/renderNewElementScene.ts
 import { throttleRAF as throttleRAF2 } from "@nous-excalidraw/common";
@@ -37486,6 +37862,7 @@ var _renderNewElementScene = ({
     context.scale(appState.zoom.value, appState.zoom.value);
     if (newElement7 && newElement7.type !== "selection") {
       if (isInvisiblySmallElement2(newElement7)) {
+        context.restore();
         return;
       }
       const frameId = newElement7.frameId || appState.frameToHighlight?.id;
@@ -37527,7 +37904,7 @@ var renderNewElementScene = (renderConfig, throttle5) => {
 import { jsx as jsx159 } from "react/jsx-runtime";
 var NewElementCanvas = (props) => {
   const canvasRef = useRef44(null);
-  useEffect48(() => {
+  useLayoutEffect10(() => {
     if (!canvasRef.current) {
       return;
     }
@@ -37542,7 +37919,7 @@ var NewElementCanvas = (props) => {
         renderConfig: props.renderConfig,
         appState: props.appState
       },
-      isRenderThrottlingEnabled()
+      false
     );
   });
   return /* @__PURE__ */ jsx159(
@@ -37846,7 +38223,7 @@ var gesture = {
   initialDistance: null,
   initialScale: null
 };
-var App = class _App extends React46.Component {
+var _App = class _App extends React46.Component {
   constructor(props) {
     super(props);
     __publicField(this, "canvas");
@@ -37907,6 +38284,7 @@ var App = class _App extends React46.Component {
     __publicField(this, "lastPointerMoveEvent", null);
     /** current frame pointer cords */
     __publicField(this, "lastPointerMoveCoords", null);
+    __publicField(this, "hoveredCornerTransformHandleType", null);
     __publicField(this, "lastCompletedCanvasClicks", []);
     /** previous frame pointer coords */
     __publicField(this, "previousPointerMoveCoords", null);
@@ -38094,8 +38472,9 @@ var App = class _App extends React46.Component {
         const frameTitleMutedColor = isDarkTheme ? FRAME_STYLE4.nameColorDarkTheme : FRAME_STYLE4.nameColorLightTheme;
         const isFrameTitleHovered = this.state.hoveredFrameId === f.id && !this.state.selectedElementIds[f.id];
         const isFrameTitleSelected = !!this.state.selectedElementIds[f.id];
-        const frameTitleAccentColor = "#8F6AEF";
-        const frameTitleColor = isFrameTitleSelected || isFrameTitleHovered ? frameTitleAccentColor : frameTitleMutedColor;
+        const frameTitleSelectedColor = "#8F6AEF";
+        const frameTitleHoverColor = "#C6A6FF";
+        const frameTitleColor = isFrameTitleSelected ? frameTitleSelectedColor : isFrameTitleHovered ? frameTitleHoverColor : frameTitleMutedColor;
         if (f.id === this.state.editingFrame) {
           const frameNameInEdit = frameName;
           frameNameJSX = /* @__PURE__ */ jsx161(
@@ -38524,6 +38903,8 @@ var App = class _App extends React46.Component {
       const nonDeletedRestoredElements = restoredElements.filter(
         (element) => !element.isDeleted
       );
+      const sourceZoom = restoredAppState.zoom.value;
+      let targetZoom = initialZoomValue;
       if (nonDeletedRestoredElements.length) {
         const { appState: fittedAppState } = zoomToFit({
           targetElements: nonDeletedRestoredElements,
@@ -38539,26 +38920,65 @@ var App = class _App extends React46.Component {
           maxZoom: initialZoomValue,
           canvasOffsets: this.getEditorUIOffsets()
         });
+        targetZoom = fittedAppState.zoom.value;
         restoredAppState = {
           ...restoredAppState,
           scrollX: fittedAppState.scrollX,
           scrollY: fittedAppState.scrollY,
-          zoom: fittedAppState.zoom
+          zoom: fittedAppState.zoom,
+          currentItemFontSize: normalizeSceneFontSizeForZoom(
+            restoredAppState.currentItemFontSize,
+            sourceZoom,
+            targetZoom
+          )
         };
       } else {
         restoredAppState = {
           ...restoredAppState,
-          zoom: { value: initialZoomValue }
+          zoom: { value: initialZoomValue },
+          currentItemFontSize: normalizeSceneFontSizeForZoom(
+            restoredAppState.currentItemFontSize,
+            sourceZoom,
+            initialZoomValue
+          )
         };
       }
+      restoredAppState = {
+        ...restoredAppState,
+        currentItemStrokeWidthCustom: false,
+        currentItemStrokeWidth: getDisplaySceneStrokeWidth3(targetZoom)
+      };
+      const migratedElements = restoredElements.map((element) => {
+        if (!isTextElement19(element)) {
+          return element;
+        }
+        const fontSize = normalizeSceneFontSizeForZoom(
+          element.fontSize,
+          sourceZoom,
+          targetZoom
+        );
+        if (fontSize === element.fontSize) {
+          return element;
+        }
+        return newElementWith11(element, { fontSize });
+      });
       this.resetStore();
       this.resetHistory();
       this.syncActionResult({
-        elements: restoredElements,
+        elements: migratedElements,
         appState: restoredAppState,
         files: initialData?.files,
         captureUpdate: CaptureUpdateAction40.NEVER
       });
+      for (const element of this.scene.getNonDeletedElements()) {
+        if (isTextElement19(element)) {
+          redrawTextBoundingBox8(
+            element,
+            this.scene.getContainerElement(element),
+            this.scene
+          );
+        }
+      }
       this.clearImageShapeCache();
       this.fonts.loadSceneFonts().then((fontFaces) => {
         this.fonts.onLoaded(fontFaces);
@@ -38944,16 +39364,28 @@ var App = class _App extends React46.Component {
      * Zooms on canvas viewport center
      */
     __publicField(this, "zoomCanvas", (value) => {
-      this.setState({
-        ...getStateForZoom(
-          {
-            viewportX: this.state.width / 2 + this.state.offsetLeft,
-            viewportY: this.state.height / 2 + this.state.offsetTop,
-            nextZoom: getNormalizedZoom(value)
-          },
-          this.state
+      const zoomState = getStateForZoom(
+        {
+          viewportX: this.state.width / 2 + this.state.offsetLeft,
+          viewportY: this.state.height / 2 + this.state.offsetTop,
+          nextZoom: getNormalizedZoom(value)
+        },
+        this.state
+      );
+      this.syncSceneStrokeWidthsForZoom(zoomState.zoom.value);
+      this.setState(zoomState);
+    });
+    __publicField(this, "syncSceneStrokeWidthsForZoom", (toZoom, fromZoom = this.state.zoom.value) => {
+      if (toZoom === fromZoom) {
+        return;
+      }
+      this.scene.replaceAllElements(
+        syncElementsStrokeWidthForZoom2(
+          this.scene.getElementsIncludingDeleted(),
+          fromZoom,
+          toZoom
         )
-      });
+      );
     });
     __publicField(this, "cancelInProgressAnimation", null);
     __publicField(this, "scrollToContent", (target = this.scene.getNonDeletedElements(), opts) => {
@@ -38991,6 +39423,8 @@ var App = class _App extends React46.Component {
       if (opts?.fitToContent || opts?.fitToViewport) {
         const { appState } = zoomToFit({
           canvasOffsets: opts.canvasOffsets,
+          fitCanvasOffsets: opts.fitCanvasOffsets,
+          scrollCanvasOffsets: opts.scrollCanvasOffsets,
           targetElements,
           appState: this.state,
           fitToViewport: !!opts?.fitToViewport,
@@ -39001,6 +39435,15 @@ var App = class _App extends React46.Component {
         zoom = appState.zoom;
         scrollX = appState.scrollX;
         scrollY = appState.scrollY;
+        if (opts?.clampHostStylebarAboveElement) {
+          const fitOffsets = opts.fitCanvasOffsets ?? opts.canvasOffsets;
+          const fitTop = fitOffsets?.top ?? 0;
+          const [, y1] = getCommonBounds11(targetElements);
+          const minScrollY = (fitTop + _App.HOST_STYLEBAR_GAP_ABOVE_ELEMENT) / zoom.value - y1;
+          if (scrollY < minScrollY) {
+            scrollY = minScrollY;
+          }
+        }
       } else {
         const scroll = calculateScrollCenter(targetElements, this.state);
         scrollX = scroll.scrollX;
@@ -39010,6 +39453,9 @@ var App = class _App extends React46.Component {
         const origScrollX = this.state.scrollX;
         const origScrollY = this.state.scrollY;
         const origZoom = this.state.zoom.value;
+        const origStrokeWidth = this.state.currentItemStrokeWidth;
+        const origStrokeWidthCustom = this.state.currentItemStrokeWidthCustom;
+        const origFontSize = this.state.currentItemFontSize;
         const cancel = easeToValuesRAF({
           fromValues: {
             scrollX: origScrollX,
@@ -39023,11 +39469,23 @@ var App = class _App extends React46.Component {
             }
             return void 0;
           },
-          onStep: ({ scrollX: scrollX2, scrollY: scrollY2, zoom: zoom2 }) => {
+          onStep: ({ scrollX: scrollX2, scrollY: scrollY2, zoom: stepZoom }) => {
+            this.syncSceneStrokeWidthsForZoom(stepZoom);
             this.setState({
               scrollX: scrollX2,
               scrollY: scrollY2,
-              zoom: { value: zoom2 }
+              zoom: { value: stepZoom },
+              currentItemStrokeWidth: scaleStrokeWidthForZoomChange3(
+                origStrokeWidth,
+                origZoom,
+                stepZoom,
+                origStrokeWidthCustom
+              ),
+              currentItemFontSize: scaleFontSizeForZoomChange(
+                origFontSize,
+                origZoom,
+                stepZoom
+              )
             });
           },
           onStart: () => {
@@ -39046,7 +39504,23 @@ var App = class _App extends React46.Component {
           this.cancelInProgressAnimation = null;
         };
       } else {
-        this.setState({ scrollX, scrollY, zoom });
+        this.syncSceneStrokeWidthsForZoom(zoom.value);
+        this.setState({
+          scrollX,
+          scrollY,
+          zoom,
+          currentItemStrokeWidth: scaleStrokeWidthForZoomChange3(
+            this.state.currentItemStrokeWidth,
+            this.state.zoom.value,
+            zoom.value,
+            this.state.currentItemStrokeWidthCustom
+          ),
+          currentItemFontSize: scaleFontSizeForZoomChange(
+            this.state.currentItemFontSize,
+            this.state.zoom.value,
+            zoom.value
+          )
+        });
       }
     });
     __publicField(this, "maybeUnfollowRemoteUser", () => {
@@ -39058,7 +39532,22 @@ var App = class _App extends React46.Component {
     __publicField(this, "translateCanvas", (state) => {
       this.cancelInProgressAnimation?.();
       this.maybeUnfollowRemoteUser();
-      this.setState(state);
+      const maybeSyncZoom = (partial, prevZoom) => {
+        const nextZoom = partial?.zoom?.value;
+        if (nextZoom != null && nextZoom !== prevZoom) {
+          this.syncSceneStrokeWidthsForZoom(nextZoom);
+        }
+      };
+      if (typeof state === "function") {
+        this.setState((prevState, props) => {
+          const nextState = state(prevState, props);
+          maybeSyncZoom(nextState, prevState.zoom.value);
+          return nextState;
+        });
+      } else {
+        maybeSyncZoom(state, this.state.zoom.value);
+        this.setState(state);
+      }
     });
     __publicField(this, "setToast", (toast) => {
       this.setState({ toast });
@@ -39197,13 +39686,31 @@ var App = class _App extends React46.Component {
         this.lastViewportPosition.y = event.clientY;
       }
     ));
+    __publicField(this, "getHostUiBottomRelativeToContainer", (selector, containerTop) => {
+      const rect = document.querySelector(selector)?.getBoundingClientRect();
+      if (!rect || rect.width <= 0 || rect.height <= 0) {
+        return 0;
+      }
+      return Math.max(rect.bottom - containerTop, 0);
+    });
     __publicField(this, "getEditorUIOffsets", () => {
-      const toolbarBottom = this.excalidrawContainerRef?.current?.querySelector(".App-toolbar")?.getBoundingClientRect()?.bottom ?? 0;
-      const sidebarRect = this.excalidrawContainerRef?.current?.querySelector(".sidebar")?.getBoundingClientRect();
-      const propertiesPanelRect = this.excalidrawContainerRef?.current?.querySelector(".App-menu__left")?.getBoundingClientRect();
+      const container = this.excalidrawContainerRef?.current;
+      const containerTop = container?.getBoundingClientRect()?.top ?? 0;
+      const nativeToolbarBottom = container?.querySelector(".App-toolbar")?.getBoundingClientRect()?.bottom ?? 0;
+      const customToolbarBottom = this.getHostUiBottomRelativeToContainer(
+        _App.HOST_TOOLBAR_SELECTOR,
+        containerTop
+      );
+      const topUiOffset = Math.max(
+        nativeToolbarBottom - containerTop,
+        customToolbarBottom,
+        0
+      );
+      const sidebarRect = container?.querySelector(".sidebar")?.getBoundingClientRect();
+      const propertiesPanelRect = container?.querySelector(".App-menu__left")?.getBoundingClientRect();
       const PADDING = 16;
       return getLanguage().rtl ? {
-        top: toolbarBottom + PADDING,
+        top: topUiOffset + PADDING,
         right: Math.max(
           this.state.width - (propertiesPanelRect?.left ?? this.state.width),
           0
@@ -39211,7 +39718,7 @@ var App = class _App extends React46.Component {
         bottom: PADDING,
         left: Math.max(sidebarRect?.right ?? 0, 0) + PADDING
       } : {
-        top: toolbarBottom + PADDING,
+        top: topUiOffset + PADDING,
         right: Math.max(
           this.state.width - (sidebarRect?.left ?? this.state.width) + PADDING,
           0
@@ -39875,16 +40382,20 @@ var App = class _App extends React46.Component {
       }
       const initialScale = gesture.initialScale;
       if (initialScale) {
-        this.setState((state) => ({
-          ...getStateForZoom(
+        this.setState((state) => {
+          const zoomState = getStateForZoom(
             {
               viewportX: this.lastViewportPosition.x,
               viewportY: this.lastViewportPosition.y,
               nextZoom: getNormalizedZoom(initialScale * event.scale)
             },
             state
-          )
-        }));
+          );
+          if (zoomState.zoom.value !== state.zoom.value) {
+            this.syncSceneStrokeWidthsForZoom(zoomState.zoom.value);
+          }
+          return zoomState;
+        });
       }
     }));
     // fires only on Safari
@@ -39961,7 +40472,7 @@ var App = class _App extends React46.Component {
       const existingTextElement = this.getSelectedTextElement(container) || this.getTextElementAtPosition(sceneX, sceneY);
       const fontFamily = existingTextElement?.fontFamily || this.state.currentItemFontFamily;
       const lineHeight = existingTextElement?.lineHeight || getLineHeight6(fontFamily);
-      const fontSize = this.state.currentItemFontSize;
+      const fontSize = existingTextElement?.fontSize ?? getDefaultSceneFontSizeForZoom3(this.state.zoom.value);
       if (!existingTextElement && shouldBindToContainer && container && !isArrowElement14(container)) {
         const fontString = {
           fontSize,
@@ -40013,7 +40524,7 @@ var App = class _App extends React46.Component {
         strokeColor: this.state.currentItemStrokeColor,
         backgroundColor: this.state.currentItemBackgroundColor,
         fillStyle: this.state.currentItemFillStyle,
-        strokeWidth: this.state.currentItemStrokeWidth,
+        ...this.getNewElementStrokeProps(),
         strokeStyle: this.state.currentItemStrokeStyle,
         roughness: this.state.currentItemRoughness,
         opacity: this.state.currentItemOpacity,
@@ -40108,11 +40619,10 @@ var App = class _App extends React46.Component {
           animate: true,
           duration: 500,
           fitToViewport: true,
-          viewportZoomFactor: 0.7,
-          // minZoom:
-          //   this.state.zoom.value +
-          //   getInteractiveZoomStep(this.state.zoom.value, "in"),
-          canvasOffsets: this.getEditorUIOffsets()
+          viewportZoomFactor: 0.9,
+          fitCanvasOffsets: this.getEditorUIOffsets(),
+          scrollCanvasOffsets: this.getEditorUIOffsets(),
+          clampHostStylebarAboveElement: true
         });
         return;
       }
@@ -40216,7 +40726,7 @@ var App = class _App extends React46.Component {
             sceneY
           );
           if (container) {
-            if (hasBoundTextElement9(container) || !isTransparent6(container.backgroundColor) || hitElementItself3({
+            if (hasBoundTextElement9(container) || !isTransparent7(container.backgroundColor) || hitElementItself3({
               point: pointFrom34(sceneX, sceneY),
               element: container,
               elementsMap: this.scene.getNonDeletedElementsMap(),
@@ -40346,6 +40856,25 @@ var App = class _App extends React46.Component {
       );
       return frames.length ? frames[frames.length - 1] : null;
     });
+    __publicField(this, "getHoveredCornerTransformHandleType", (handleType) => {
+      if (handleType === "nw" || handleType === "ne" || handleType === "sw" || handleType === "se") {
+        return handleType;
+      }
+      return null;
+    });
+    __publicField(this, "syncHoveredCornerTransformHandleType", (handleType) => {
+      const cornerHandleType = this.getHoveredCornerTransformHandleType(handleType);
+      if (cornerHandleType !== this.hoveredCornerTransformHandleType) {
+        this.hoveredCornerTransformHandleType = cornerHandleType;
+        this.triggerRender(true);
+      }
+    });
+    __publicField(this, "clearHoveredCornerTransformHandleType", () => {
+      if (this.hoveredCornerTransformHandleType !== null) {
+        this.hoveredCornerTransformHandleType = null;
+        this.triggerRender(true);
+      }
+    });
     __publicField(this, "clearHoverOutlineIfNeeded", () => {
       if (this.state.hoverOutlineElementId != null || this.state.hoveredFrameId != null) {
         this.setState({
@@ -40490,6 +41019,7 @@ var App = class _App extends React46.Component {
       }
       if (isHoldingSpace || isPanning || isDraggingScrollBar || isHandToolActive(this.state)) {
         this.clearHoverOutlineIfNeeded();
+        this.clearHoveredCornerTransformHandleType();
         return;
       }
       const isPointerOverScrollBars = isOverScrollBars(
@@ -40724,6 +41254,7 @@ var App = class _App extends React46.Component {
           }
         }
         this.clearHoverOutlineIfNeeded();
+        this.clearHoveredCornerTransformHandleType();
         return;
       }
       if (this.state.activeTool.type === "arrow") {
@@ -40755,6 +41286,7 @@ var App = class _App extends React46.Component {
       // over a link/embeddable, we change the cursor
       !isLaserTool && this.state.activeTool.type !== "selection" && this.state.activeTool.type !== "lasso" && this.state.activeTool.type !== "text" && this.state.activeTool.type !== "eraser") {
         this.clearHoverOutlineIfNeeded();
+        this.clearHoveredCornerTransformHandleType();
         return;
       }
       const elements = this.scene.getNonDeletedElements();
@@ -40762,6 +41294,7 @@ var App = class _App extends React46.Component {
       if (this.isHittingTextAutoResizeHandle(selectedElements, scenePointer)) {
         setCursor(this.interactiveCanvas, CURSOR_TYPE4.POINTER);
         this.clearHoverOutlineIfNeeded();
+        this.clearHoveredCornerTransformHandleType();
         return;
       }
       if (selectedElements.length === 1 && !isOverScrollBar && !this.state.selectedLinearElement?.isEditing) {
@@ -40791,6 +41324,9 @@ var App = class _App extends React46.Component {
               getCursorForResizingElement(elementWithTransformHandleType)
             );
             this.clearHoverOutlineIfNeeded();
+            this.syncHoveredCornerTransformHandleType(
+              elementWithTransformHandleType.transformHandleType
+            );
             return;
           }
         }
@@ -40811,9 +41347,11 @@ var App = class _App extends React46.Component {
             })
           );
           this.clearHoverOutlineIfNeeded();
+          this.syncHoveredCornerTransformHandleType(transformHandleType);
           return;
         }
       }
+      this.clearHoveredCornerTransformHandleType();
       if (isEraserActive(this.state)) {
         this.clearHoverOutlineIfNeeded();
         return;
@@ -41737,7 +42275,7 @@ var App = class _App extends React46.Component {
         strokeColor: this.state.currentItemStrokeColor,
         backgroundColor: this.state.currentItemBackgroundColor,
         fillStyle: this.state.currentItemFillStyle,
-        strokeWidth: this.state.currentItemStrokeWidth,
+        ...this.getNewElementStrokeProps(),
         strokeStyle: this.state.currentItemStrokeStyle,
         roughness: this.state.currentItemRoughness,
         opacity: this.state.currentItemOpacity,
@@ -41793,7 +42331,7 @@ var App = class _App extends React46.Component {
         strokeColor: "transparent",
         backgroundColor: "transparent",
         fillStyle: this.state.currentItemFillStyle,
-        strokeWidth: this.state.currentItemStrokeWidth,
+        ...this.getNewElementStrokeProps(),
         strokeStyle: this.state.currentItemStrokeStyle,
         roughness: this.state.currentItemRoughness,
         roundness: this.getCurrentItemRoundness("iframe"),
@@ -41833,7 +42371,7 @@ var App = class _App extends React46.Component {
         strokeColor: "transparent",
         backgroundColor: "transparent",
         fillStyle: this.state.currentItemFillStyle,
-        strokeWidth: this.state.currentItemStrokeWidth,
+        ...this.getNewElementStrokeProps(),
         strokeStyle: this.state.currentItemStrokeStyle,
         roughness: this.state.currentItemRoughness,
         roundness: this.getCurrentItemRoundness("embeddable"),
@@ -41866,7 +42404,7 @@ var App = class _App extends React46.Component {
         strokeColor: this.state.currentItemStrokeColor,
         backgroundColor: this.state.currentItemBackgroundColor,
         fillStyle: this.state.currentItemFillStyle,
-        strokeWidth: this.state.currentItemStrokeWidth,
+        ...this.getNewElementStrokeProps(),
         strokeStyle: this.state.currentItemStrokeStyle,
         roughness: this.state.currentItemRoughness,
         roundness: null,
@@ -41975,7 +42513,7 @@ var App = class _App extends React46.Component {
           strokeColor: this.state.currentItemStrokeColor,
           backgroundColor: this.state.currentItemBackgroundColor,
           fillStyle: this.state.currentItemFillStyle,
-          strokeWidth: this.state.currentItemStrokeWidth,
+          ...this.getNewElementStrokeProps(),
           strokeStyle: this.state.currentItemStrokeStyle,
           roughness: this.state.currentItemRoughness,
           opacity: this.state.currentItemOpacity,
@@ -41997,7 +42535,7 @@ var App = class _App extends React46.Component {
           strokeColor: this.state.currentItemStrokeColor,
           backgroundColor: this.state.currentItemBackgroundColor,
           fillStyle: this.state.currentItemFillStyle,
-          strokeWidth: this.state.currentItemStrokeWidth,
+          ...this.getNewElementStrokeProps(),
           strokeStyle: this.state.currentItemStrokeStyle,
           roughness: this.state.currentItemRoughness,
           opacity: this.state.currentItemOpacity,
@@ -42092,6 +42630,17 @@ var App = class _App extends React46.Component {
         }
       }
     });
+    __publicField(this, "getNewElementStrokeProps", () => {
+      if (this.state.currentItemStrokeWidthCustom) {
+        return {
+          strokeWidth: this.state.currentItemStrokeWidth,
+          customData: { [STROKE_WIDTH_CUSTOM_DATA_KEY4]: true }
+        };
+      }
+      return {
+        strokeWidth: getDisplaySceneStrokeWidth3(this.state.zoom.value)
+      };
+    });
     __publicField(this, "createGenericElementOnPointerDown", (elementType, pointerDownState) => {
       const [gridX, gridY] = getGridPoint2(
         pointerDownState.origin.x,
@@ -42108,7 +42657,7 @@ var App = class _App extends React46.Component {
         strokeColor: this.state.currentItemStrokeColor,
         backgroundColor: this.state.currentItemBackgroundColor,
         fillStyle: this.state.currentItemFillStyle,
-        strokeWidth: this.state.currentItemStrokeWidth,
+        ...this.getNewElementStrokeProps(),
         strokeStyle: this.state.currentItemStrokeStyle,
         roughness: this.state.currentItemRoughness,
         opacity: this.state.currentItemOpacity,
@@ -42764,7 +43313,7 @@ var App = class _App extends React46.Component {
           y: gridY,
           width: distance2(pointerDownState.originInGrid.x, gridX),
           height: distance2(pointerDownState.originInGrid.y, gridY),
-          shouldMaintainAspectRatio: isImageElement9(newElement7) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
+          shouldMaintainAspectRatio: shouldForceMaintainAspectRatio2(newElement7) ? true : shouldMaintainAspectRatio(event),
           shouldResizeFromCenter: shouldResizeFromCenter(event),
           zoom: this.state.zoom.value,
           scene: this.scene,
@@ -42920,7 +43469,7 @@ var App = class _App extends React46.Component {
         this.scene,
         shouldRotateWithDiscreteAngle3(event),
         shouldResizeFromCenter(event),
-        selectedElements.some((element) => isImageElement9(element)) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
+        selectedElements.some(shouldForceMaintainAspectRatio2) ? true : shouldMaintainAspectRatio(event),
         resizeX,
         resizeY,
         pointerDownState.resize.center.x,
@@ -42935,7 +43484,6 @@ var App = class _App extends React46.Component {
     });
     __publicField(this, "getContextMenuItems", (type) => {
       const options = [];
-      options.push(actionCopyAsPng, actionCopyAsSvg);
       if (type === "canvas") {
         if (this.state.viewModeEnabled) {
           return [
@@ -42949,8 +43497,8 @@ var App = class _App extends React46.Component {
         return [
           actionPaste,
           CONTEXT_MENU_SEPARATOR,
-          actionCopyAsPng,
-          actionCopyAsSvg,
+          // actionCopyAsPng,
+          // actionCopyAsSvg,
           copyText,
           CONTEXT_MENU_SEPARATOR,
           actionSelectAll,
@@ -42969,7 +43517,7 @@ var App = class _App extends React46.Component {
       if (this.state.viewModeEnabled) {
         return [actionCopy, ...options];
       }
-      const zIndexActions = this.editorInterface.formFactor === "desktop" ? [
+      const zIndexActions = this.editorInterface.formFactor !== "phone" ? [
         CONTEXT_MENU_SEPARATOR,
         actionSendBackward,
         actionBringForward,
@@ -43864,7 +44412,8 @@ var App = class _App extends React46.Component {
       this.state.cursorButton === "down"
     );
     const firstSelectedElement = selectedElements[0];
-    const frameDimensionLabelElement = this.state.newElement && isFrameLikeElement15(this.state.newElement) ? this.state.newElement : this.state.isResizing && !this.state.isRotating && selectedElements.length === 1 && isFrameLikeElement15(firstSelectedElement) ? firstSelectedElement : null;
+    const isDraggingSelectedElements = this.state.selectedElementsAreBeingDragged;
+    const frameDimensionLabelElement = this.state.newElement && isFrameLikeElement15(this.state.newElement) ? this.state.newElement : selectedElements.length === 1 && !this.state.isRotating && !isDraggingSelectedElements && isFrameLikeElement15(firstSelectedElement) ? firstSelectedElement : null;
     const showShapeSwitchPanel = editorJotaiStore.get(convertElementTypePopupAtom)?.type === "panel";
     return /* @__PURE__ */ jsx161(
       "div",
@@ -44067,7 +44616,8 @@ var App = class _App extends React46.Component {
                                   embedsValidationStatus: this.embedsValidationStatus,
                                   elementsPendingErasure: this.elementsPendingErasure,
                                   pendingFlowchartNodes: this.flowChartCreator.pendingNodes,
-                                  theme: this.state.theme
+                                  theme: this.state.theme,
+                                  zoom: this.state.zoom.value
                                 }
                               }
                             ),
@@ -44087,7 +44637,8 @@ var App = class _App extends React46.Component {
                                   embedsValidationStatus: this.embedsValidationStatus,
                                   elementsPendingErasure: this.elementsPendingErasure,
                                   pendingFlowchartNodes: null,
-                                  theme: this.state.theme
+                                  theme: this.state.theme,
+                                  zoom: this.state.zoom.value
                                 }
                               }
                             ),
@@ -44769,7 +45320,7 @@ var App = class _App extends React46.Component {
       strokeColor: this.state.currentItemStrokeColor,
       backgroundColor: this.state.currentItemBackgroundColor,
       fillStyle: this.state.currentItemFillStyle,
-      strokeWidth: this.state.currentItemStrokeWidth,
+      ...this.getNewElementStrokeProps(),
       strokeStyle: this.state.currentItemStrokeStyle,
       roundness: null,
       roughness: this.state.currentItemRoughness,
@@ -45390,11 +45941,9 @@ var App = class _App extends React46.Component {
       DEFAULT_COLLISION_THRESHOLD / this.state.zoom.value,
       1
     );
-    const [x1, y1, x2, y2] = getCommonSelectionBounds2(
-      selectedElements,
-      this.scene.getNonDeletedElementsMap()
-    );
-    return point.x > x1 - threshold && point.x < x2 + threshold && point.y > y1 - threshold && point.y < y2 + threshold;
+    const boundsPadding = DEFAULT_TRANSFORM_HANDLE_SPACING3 * 2 / this.state.zoom.value;
+    const [x1, y1, x2, y2] = getCommonBounds11(selectedElements);
+    return point.x > x1 - boundsPadding - threshold && point.x < x2 + boundsPadding + threshold && point.y > y1 - boundsPadding - threshold && point.y < y2 + boundsPadding + threshold;
   }
   getCurrentItemRoundness(elementType) {
     return this.state.currentItemRoundness === "round" ? {
@@ -46032,7 +46581,8 @@ var App = class _App extends React46.Component {
             this.state.selectionElement,
             this.scene.getNonDeletedElementsMap(),
             false,
-            this.state.boxSelectionMode
+            "overlap",
+            this.state.zoom.value
           ) : [];
           this.setState((prevState) => {
             const nextSelectedElementIds = {
@@ -46866,6 +47416,15 @@ var App = class _App extends React46.Component {
     this.setAppState({});
   }
 };
+/**
+ * 宿主业务顶部 UI 占位（与 web-art-flow 布局对齐）：
+ * - tool-bar-wrapper: 顶部工具栏
+ * - stylebar-wrapper: 选中元素上方的样式栏（moveStyleMenuBar 定位在元素上方）
+ */
+__publicField(_App, "HOST_TOOLBAR_SELECTOR", ".tool-bar-wrapper");
+/** utils/index.ts: MEUE_LEFT_BAR_HEIGHT(47) + STYLE_BAR_TO_ELEMENT_TOP_GAP_PX(26) */
+__publicField(_App, "HOST_STYLEBAR_GAP_ABOVE_ELEMENT", 73);
+var App = _App;
 var createTestHook = () => {
   if (isTestEnv5() || isDevEnv10()) {
     window.h = window.h || {};
@@ -46894,9 +47453,9 @@ createTestHook();
 var App_default = App;
 
 // components/InitializeApp.tsx
-import { useEffect as useEffect49 } from "react";
+import { useEffect as useEffect48 } from "react";
 var InitializeApp = (props) => {
-  useEffect49(() => {
+  useEffect48(() => {
     const currentLang2 = languages.find((lang) => lang.code === props.langCode) || defaultLang;
     void setLanguage(currentLang2);
   }, [props.langCode]);
@@ -47191,7 +47750,7 @@ WelcomeScreen.Hints = { MenuHint, ToolbarHint, HelpHint };
 var WelcomeScreen_default = WelcomeScreen;
 
 // hooks/useAppStateValue.ts
-import { useEffect as useEffect50, useRef as useRef45, useState as useState43 } from "react";
+import { useEffect as useEffect49, useRef as useRef45, useState as useState43 } from "react";
 var getSelectedValue = (appState, selector) => {
   if (typeof selector === "function") {
     return selector(appState);
@@ -47236,7 +47795,7 @@ function useAppStateValue(selector, _internal = true) {
     stateRef.current.isInitialized = true;
     stateRef.current.latestValue = getLatestValue(api, selector, _internal);
   }
-  useEffect50(() => {
+  useEffect49(() => {
     const currentStateRef = stateRef.current;
     if (!api || api.isDestroyed || !currentStateRef) {
       return;
@@ -47256,7 +47815,7 @@ function useOnAppStateChange(selector, callback) {
   });
   stateRef.current.selector = selector;
   stateRef.current.callback = callback;
-  useEffect50(() => {
+  useEffect49(() => {
     if (!api || api.isDestroyed) {
       return;
     }
@@ -47599,10 +48158,10 @@ import {
 } from "@nous-excalidraw/element";
 
 // components/DiagramToCodePlugin/DiagramToCodePlugin.tsx
-import { useLayoutEffect as useLayoutEffect10 } from "react";
+import { useLayoutEffect as useLayoutEffect11 } from "react";
 var DiagramToCodePlugin = (props) => {
   const app = useApp();
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     app.setPlugins({
       diagramToCode: { generate: props.generate }
     });
@@ -47689,7 +48248,7 @@ var ExcalidrawBase = (props) => {
     },
     [setExcalidrawAPI]
   );
-  useEffect51(() => {
+  useEffect50(() => {
     const importPolyfill = async () => {
       await import("canvas-roundrect-polyfill");
     };