@haoxin-web/excalidraw 1.0.21 → 1.0.23

package/dist/dev/index.js

@@ -69,10 +69,10 @@ import {
   serializeLibraryAsJSON,
   strokeEllipseWithRotation,
   strokeRectWithRotation
-} from "./chunk-5LGCONU6.js";
+} from "./chunk-ITD5AOM3.js";
 import {
   define_import_meta_env_default
-} from "./chunk-J55ZSMLS.js";
+} from "./chunk-NHZFLEMT.js";
 import {
   en_default
 } from "./chunk-ZSSURRA2.js";
@@ -86,7 +86,7 @@ import {
 } from "./chunk-XDFCUUT6.js";
 
 // index.tsx
-import React48, { useEffect as useEffect49 } from "react";
+import React49, { useEffect as useEffect49 } from "react";
 import { DEFAULT_UI_OPTIONS, isShallowEqual as isShallowEqual9 } from "@haoxin-web/excalidraw-common";
 
 // components/App.tsx
@@ -889,19 +889,42 @@ var CalloutIcon = createIcon(
   tablerIconProps
 );
 var HollowArrowIcon = createIcon(
-  /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx("path", { d: "M12 4l8 8-8 8", fill: "none" }),
-    /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" })
+  /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M6 8 L6 16 L18 16 L18 18 L22 12 L18 6 L18 8 L6 8 Z",
+        strokeWidth: "1.5",
+        fill: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M7 8.5 L7 15.5 L17 15.5 L17 17 L21 12 L17 7 L17 8.5 L7 8.5 Z",
+        strokeWidth: "0.5",
+        opacity: "0.3",
+        fill: "none"
+      }
+    )
   ] }),
-  modifiedTablerIconProps
+  tablerIconProps
 );
 var HollowDoubleArrowIcon = createIcon(
-  /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: 24, height: 24, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx("path", { d: "M12 4L4 12l8 8", fill: "none" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 4l8 8-8 8", fill: "none" }),
-    /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" })
+  /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", children: [
+    /* @__PURE__ */ jsx("path", { d: "M8 8 L8 16 L4 12 L8 8 Z", fill: "none", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M8 10 L16 10 M8 14 L16 14",
+        fill: "none",
+        strokeLinecap: "round",
+        strokeWidth: "1.5"
+      }
+    ),
+    /* @__PURE__ */ jsx("path", { d: "M16 8 L16 16 L20 12 L16 8 Z", strokeWidth: "1.5", fill: "none" })
   ] }),
-  modifiedTablerIconProps
+  tablerIconProps
 );
 var ArrowIcon = createIcon(
   /* @__PURE__ */ jsxs("g", { strokeWidth: "1.5", children: [
@@ -2415,18 +2438,38 @@ var ArrowRightIcon = createIcon(
   modifiedTablerIconProps
 );
 var OutlineArrowIcon = createIcon(
-  /* @__PURE__ */ jsxs("g", { strokeWidth: 1.5, fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx("path", { d: "M5 12h10" }),
-    /* @__PURE__ */ jsx("path", { d: "M11 8l4 4l-4 4" })
-  ] }),
+  /* @__PURE__ */ jsxs(
+    "g",
+    {
+      strokeWidth: 1.5,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M5 12h10" }),
+        /* @__PURE__ */ jsx("path", { d: "M11 8l4 4l-4 4" })
+      ]
+    }
+  ),
   tablerIconProps
 );
 var OutlineDoubleArrowIcon = createIcon(
-  /* @__PURE__ */ jsxs("g", { strokeWidth: 1.5, fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
-    /* @__PURE__ */ jsx("path", { d: "M9 8l-4 4l4 4" }),
-    /* @__PURE__ */ jsx("path", { d: "M15 8l4 4l-4 4" })
-  ] }),
+  /* @__PURE__ */ jsxs(
+    "g",
+    {
+      strokeWidth: 1.5,
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ jsx("path", { d: "M9 8l-4 4l4 4" }),
+        /* @__PURE__ */ jsx("path", { d: "M15 8l4 4l-4 4" })
+      ]
+    }
+  ),
   tablerIconProps
 );
 var laserPointerToolIcon = createIcon(
@@ -9180,7 +9223,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-4T2DPV7H.js").then(
+        (blob2) => import("./data/image-EFEZBK6B.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -25763,8 +25806,16 @@ var MainMenu_default = MainMenu;
 import { useEffect as useEffect33, useRef as useRef28, useState as useState27 } from "react";
 import clsx46 from "clsx";
 import { isTextElement as isTextElement14 } from "@haoxin-web/excalidraw-element";
-import { getBoundTextElement as getBoundTextElement9, getContainerElement as getContainerElement5, redrawTextBoundingBox as redrawTextBoundingBox7, newElementWith as newElementWith11 } from "@haoxin-web/excalidraw-element";
-import { DEFAULT_ELEMENT_STROKE_COLOR_PALETTE as DEFAULT_ELEMENT_STROKE_COLOR_PALETTE2, STROKE_WIDTH as STROKE_WIDTH2 } from "@haoxin-web/excalidraw-common";
+import {
+  getBoundTextElement as getBoundTextElement9,
+  getContainerElement as getContainerElement5,
+  redrawTextBoundingBox as redrawTextBoundingBox7,
+  newElementWith as newElementWith11
+} from "@haoxin-web/excalidraw-element";
+import {
+  DEFAULT_ELEMENT_STROKE_COLOR_PALETTE as DEFAULT_ELEMENT_STROKE_COLOR_PALETTE2,
+  STROKE_WIDTH as STROKE_WIDTH2
+} from "@haoxin-web/excalidraw-common";
 import { jsx as jsx108, jsxs as jsxs60 } from "react/jsx-runtime";
 var LeftToolFlyouts = ({
   appState,
@@ -25898,7 +25949,25 @@ var LeftToolFlyouts = ({
   const selected = elements.find((el) => selectedIds[el.id]);
   const selectedType = selected?.type;
   const openForLineGroup = openGroup === "line" && (activeTool === "line" || activeTool === "arrow" || selectedType === "line" || selectedType === "arrow");
-  const openForShapesGroup = openGroup === "shapes" && ["rectangle", "diamond", "ellipse", "triangle", "pentagon", "callout", "hollow_arrow", "hollow_double_arrow"].includes(activeTool) || openGroup === "shapes" && ["rectangle", "diamond", "ellipse", "triangle", "pentagon", "callout", "hollow_arrow", "hollow_double_arrow"].includes(selectedType);
+  const openForShapesGroup = openGroup === "shapes" && [
+    "rectangle",
+    "diamond",
+    "ellipse",
+    "triangle",
+    "pentagon",
+    "callout",
+    "hollow_arrow",
+    "hollow_double_arrow"
+  ].includes(activeTool) || openGroup === "shapes" && [
+    "rectangle",
+    "diamond",
+    "ellipse",
+    "triangle",
+    "pentagon",
+    "callout",
+    "hollow_arrow",
+    "hollow_double_arrow"
+  ].includes(selectedType);
   const openForText = openGroup === "text" && (activeTool === "text" || selectedType === "text");
   const openForFreedraw = openGroup === "freedraw" && (activeTool === "freedraw" || selectedType === "freedraw");
   const isHighlighter = (appState.currentItemOpacity ?? 100) < 100;
@@ -25939,14 +26008,20 @@ var LeftToolFlyouts = ({
         }
       });
       nextMap.set(updated.id, updated);
-      const container = getContainerElement5(updated, app.scene.getNonDeletedElementsMap());
+      const container = getContainerElement5(
+        updated,
+        app.scene.getNonDeletedElementsMap()
+      );
       redrawTextBoundingBox7(updated, container, app.scene);
     };
     for (const el of selected2) {
       if (isTextElement14(el)) {
         applyTo(el);
       } else {
-        const bound = getBoundTextElement9(el, app.scene.getNonDeletedElementsMap());
+        const bound = getBoundTextElement9(
+          el,
+          app.scene.getNonDeletedElementsMap()
+        );
         if (bound) {
           applyTo(bound);
         }
@@ -25973,19 +26048,31 @@ var LeftToolFlyouts = ({
       app.setActiveTool({ type: "line", locked: true });
     } else if (type === "arrow") {
       app.setActiveTool({ type: "arrow", locked: true });
-      app.setState({ currentItemStartArrowhead: null, currentItemEndArrowhead: "arrow" });
+      app.setState({
+        currentItemStartArrowhead: null,
+        currentItemEndArrowhead: "arrow"
+      });
     } else {
       app.setActiveTool({ type: "arrow", locked: true });
-      app.setState({ currentItemStartArrowhead: "arrow", currentItemEndArrowhead: "arrow" });
+      app.setState({
+        currentItemStartArrowhead: "arrow",
+        currentItemEndArrowhead: "arrow"
+      });
     }
   };
   const setArrowTypeOutline = (type) => {
     if (type === "arrow") {
       app.setActiveTool({ type: "arrow", locked: true });
-      app.setState({ currentItemStartArrowhead: null, currentItemEndArrowhead: "triangle_outline" });
+      app.setState({
+        currentItemStartArrowhead: null,
+        currentItemEndArrowhead: "triangle_outline"
+      });
     } else {
       app.setActiveTool({ type: "arrow", locked: true });
-      app.setState({ currentItemStartArrowhead: "triangle_outline", currentItemEndArrowhead: "triangle_outline" });
+      app.setState({
+        currentItemStartArrowhead: "triangle_outline",
+        currentItemEndArrowhead: "triangle_outline"
+      });
     }
   };
   const renderStrokeColor = () => {
@@ -26008,7 +26095,11 @@ var LeftToolFlyouts = ({
         elements,
         appState,
         palette: DEFAULT_ELEMENT_STROKE_COLOR_PALETTE2,
-        updateData: (formData) => actionManager.executeAction(actionChangeStrokeColor, "ui", formData)
+        updateData: (formData) => actionManager.executeAction(
+          actionChangeStrokeColor,
+          "ui",
+          formData
+        )
       }
     );
   };
@@ -26019,7 +26110,7 @@ var LeftToolFlyouts = ({
     app.setState({ currentItemOpacity: enable ? 50 : 100 });
   };
   return /* @__PURE__ */ jsxs60("div", { className: "LeftToolFlyouts", children: [
-    openForLineGroup && /* @__PURE__ */ jsx108(Island, { className: "left-flyout left-flyout--line", children: /* @__PURE__ */ jsxs60(Stack_default.Col, { gap: 2, align: "center", children: [
+    openForLineGroup && /* @__PURE__ */ jsx108(Island, { className: "left-flyout left-flyout--line", children: /* @__PURE__ */ jsxs60(Stack_default.Col, { gap: 2, align: "start", children: [
       /* @__PURE__ */ jsxs60("div", { className: "arrow-row", children: [
         /* @__PURE__ */ jsx108(
           ToolButton,
@@ -26060,44 +26151,63 @@ var LeftToolFlyouts = ({
       ] }),
       /* @__PURE__ */ jsx108("div", { className: "left-flyout__separator" }),
       /* @__PURE__ */ jsx108("div", { className: "left-flyout__title", children: t("labels.strokeWidth") }),
-      /* @__PURE__ */ jsxs60("div", { className: "buttonList", style: { display: "flex", gap: 6, justifyContent: "center" }, children: [
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "icon",
-            "aria-label": t("labels.thin"),
-            icon: StrokeWidthBaseIcon,
-            selected: selectedStrokeWidth === STROKE_WIDTH2.thin,
-            name: "left-flyout-line-strokeWidth",
-            title: t("labels.thin"),
-            onClick: () => actionManager.executeAction(actionChangeStrokeWidth, "ui", STROKE_WIDTH2.thin)
-          }
-        ),
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "icon",
-            "aria-label": t("labels.bold"),
-            icon: StrokeWidthBoldIcon,
-            selected: selectedStrokeWidth === STROKE_WIDTH2.bold,
-            name: "left-flyout-line-strokeWidth",
-            title: t("labels.bold"),
-            onClick: () => actionManager.executeAction(actionChangeStrokeWidth, "ui", STROKE_WIDTH2.bold)
-          }
-        ),
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "icon",
-            "aria-label": t("labels.extraBold"),
-            icon: StrokeWidthExtraBoldIcon,
-            selected: selectedStrokeWidth === STROKE_WIDTH2.extraBold,
-            name: "left-flyout-line-strokeWidth",
-            title: t("labels.extraBold"),
-            onClick: () => actionManager.executeAction(actionChangeStrokeWidth, "ui", STROKE_WIDTH2.extraBold)
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsxs60(
+        "div",
+        {
+          className: "buttonList",
+          style: { display: "flex", gap: 6, justifyContent: "flex-start" },
+          children: [
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "icon",
+                "aria-label": t("labels.thin"),
+                icon: StrokeWidthBaseIcon,
+                selected: selectedStrokeWidth === STROKE_WIDTH2.thin,
+                name: "left-flyout-line-strokeWidth",
+                title: t("labels.thin"),
+                onClick: () => actionManager.executeAction(
+                  actionChangeStrokeWidth,
+                  "ui",
+                  STROKE_WIDTH2.thin
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "icon",
+                "aria-label": t("labels.bold"),
+                icon: StrokeWidthBoldIcon,
+                selected: selectedStrokeWidth === STROKE_WIDTH2.bold,
+                name: "left-flyout-line-strokeWidth",
+                title: t("labels.bold"),
+                onClick: () => actionManager.executeAction(
+                  actionChangeStrokeWidth,
+                  "ui",
+                  STROKE_WIDTH2.bold
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "icon",
+                "aria-label": t("labels.extraBold"),
+                icon: StrokeWidthExtraBoldIcon,
+                selected: selectedStrokeWidth === STROKE_WIDTH2.extraBold,
+                name: "left-flyout-line-strokeWidth",
+                title: t("labels.extraBold"),
+                onClick: () => actionManager.executeAction(
+                  actionChangeStrokeWidth,
+                  "ui",
+                  STROKE_WIDTH2.extraBold
+                )
+              }
+            )
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx108("div", { className: "left-flyout__title", children: "\u989C\u8272" }),
       renderStrokeColor()
     ] }) }),
@@ -26131,68 +26241,111 @@ var LeftToolFlyouts = ({
         };
         return null;
       })(),
-      /* @__PURE__ */ jsxs60("div", { className: "shapes-grid", style: { gridTemplateColumns: "repeat(5, 1fr)" }, children: [
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "radio",
-            "aria-label": t("toolBar.rectangle"),
-            icon: RectangleIcon,
-            checked: activeTool === "rectangle",
-            name: "left-flyout-shapes",
-            title: t("toolBar.rectangle"),
-            onChange: () => app.setActiveTool({ type: "rectangle", locked: true })
-          }
-        ),
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "radio",
-            "aria-label": t("toolBar.ellipse"),
-            icon: EllipseIcon,
-            checked: activeTool === "ellipse",
-            name: "left-flyout-shapes",
-            title: t("toolBar.ellipse"),
-            onChange: () => app.setActiveTool({ type: "ellipse", locked: true })
-          }
-        ),
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "radio",
-            "aria-label": t("toolBar.diamond"),
-            icon: DiamondIcon,
-            checked: activeTool === "diamond",
-            name: "left-flyout-shapes",
-            title: t("toolBar.diamond"),
-            onChange: () => app.setActiveTool({ type: "diamond", locked: true })
-          }
-        ),
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "radio",
-            "aria-label": t("toolBar.triangle"),
-            icon: TriangleIcon,
-            checked: activeTool === "triangle",
-            name: "left-flyout-shapes",
-            title: t("toolBar.triangle"),
-            onChange: () => app.setActiveTool({ type: "triangle", locked: true })
-          }
-        ),
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "radio",
-            "aria-label": t("toolBar.pentagon"),
-            icon: PentagonIcon,
-            checked: activeTool === "pentagon",
-            name: "left-flyout-shapes",
-            title: t("toolBar.pentagon"),
-            onChange: () => app.setActiveTool({ type: "pentagon", locked: true })
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsxs60(
+        "div",
+        {
+          className: "shapes-grid",
+          style: { gridTemplateColumns: "repeat(5, 1fr)" },
+          children: [
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "radio",
+                "aria-label": t("toolBar.rectangle"),
+                icon: RectangleIcon,
+                checked: activeTool === "rectangle",
+                name: "left-flyout-shapes",
+                title: t("toolBar.rectangle"),
+                onChange: () => app.setActiveTool({ type: "rectangle", locked: true })
+              }
+            ),
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "radio",
+                "aria-label": t("toolBar.ellipse"),
+                icon: EllipseIcon,
+                checked: activeTool === "ellipse",
+                name: "left-flyout-shapes",
+                title: t("toolBar.ellipse"),
+                onChange: () => app.setActiveTool({ type: "ellipse", locked: true })
+              }
+            ),
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "radio",
+                "aria-label": t("toolBar.diamond"),
+                icon: DiamondIcon,
+                checked: activeTool === "diamond",
+                name: "left-flyout-shapes",
+                title: t("toolBar.diamond"),
+                onChange: () => app.setActiveTool({ type: "diamond", locked: true })
+              }
+            ),
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "radio",
+                "aria-label": t("toolBar.triangle"),
+                icon: TriangleIcon,
+                checked: activeTool === "triangle",
+                name: "left-flyout-shapes",
+                title: t("toolBar.triangle"),
+                onChange: () => app.setActiveTool({ type: "triangle", locked: true })
+              }
+            ),
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "radio",
+                "aria-label": t("toolBar.pentagon"),
+                icon: PentagonIcon,
+                checked: activeTool === "pentagon",
+                name: "left-flyout-shapes",
+                title: t("toolBar.pentagon"),
+                onChange: () => app.setActiveTool({ type: "pentagon", locked: true })
+              }
+            ),
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "radio",
+                "aria-label": t("toolBar.callout"),
+                icon: CalloutIcon,
+                checked: activeTool === "callout",
+                name: "left-flyout-shapes",
+                title: t("toolBar.callout"),
+                onChange: () => app.setActiveTool({ type: "callout" })
+              }
+            ),
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "radio",
+                "aria-label": t("toolBar.hollowArrow"),
+                icon: HollowArrowIcon,
+                checked: activeTool === "hollow_arrow",
+                name: "left-flyout-shapes",
+                title: t("toolBar.hollowArrow"),
+                onChange: () => app.setActiveTool({ type: "hollow_arrow" })
+              }
+            ),
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "radio",
+                "aria-label": t("toolBar.hollowDoubleArrow"),
+                icon: HollowDoubleArrowIcon,
+                checked: activeTool === "hollow_double_arrow",
+                name: "left-flyout-shapes",
+                title: t("toolBar.hollowDoubleArrow"),
+                onChange: () => app.setActiveTool({ type: "hollow_double_arrow" })
+              }
+            )
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx108("div", { className: "left-flyout__separator" }),
       /* @__PURE__ */ jsx108("div", { className: "left-flyout__title", style: { marginTop: 8 }, children: t("labels.stroke") }),
       renderStrokeColor(),
@@ -26209,12 +26362,20 @@ var LeftToolFlyouts = ({
             true,
             (hasSelection) => !hasSelection ? appState.currentItemBackgroundColor : null
           ),
-          onChange: (color) => actionManager.executeAction(actionChangeBackgroundColor, "ui", {
-            currentItemBackgroundColor: color
-          }),
+          onChange: (color) => actionManager.executeAction(
+            actionChangeBackgroundColor,
+            "ui",
+            {
+              currentItemBackgroundColor: color
+            }
+          ),
           elements,
           appState,
-          updateData: (formData) => actionManager.executeAction(actionChangeBackgroundColor, "ui", formData)
+          updateData: (formData) => actionManager.executeAction(
+            actionChangeBackgroundColor,
+            "ui",
+            formData
+          )
         }
       ),
       /* @__PURE__ */ jsx108("div", { className: "left-flyout__title", style: { marginTop: 6 }, children: t("labels.fill") }),
@@ -26232,85 +26393,123 @@ var LeftToolFlyouts = ({
         };
         return null;
       })(),
-      /* @__PURE__ */ jsxs60("div", { className: "buttonList", style: { display: "flex", gap: 6, justifyContent: "center" }, children: [
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "icon",
-            "aria-label": t("labels.hachure"),
-            icon: FillHachureIcon,
-            selected: globalThis.__leftShapesFormCache?.fillStyleValue === "hachure",
-            name: "left-flyout-fillStyle",
-            title: t("labels.hachure"),
-            onClick: () => actionManager.executeAction(actionChangeFillStyle, "ui", "hachure")
-          }
-        ),
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "icon",
-            "aria-label": t("labels.crossHatch"),
-            icon: FillCrossHatchIcon,
-            selected: globalThis.__leftShapesFormCache?.fillStyleValue === "cross-hatch",
-            name: "left-flyout-fillStyle",
-            title: t("labels.crossHatch"),
-            onClick: () => actionManager.executeAction(actionChangeFillStyle, "ui", "cross-hatch")
-          }
-        ),
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "icon",
-            "aria-label": t("labels.solid"),
-            icon: FillSolidIcon,
-            selected: globalThis.__leftShapesFormCache?.fillStyleValue === "solid",
-            name: "left-flyout-fillStyle",
-            title: t("labels.solid"),
-            onClick: () => actionManager.executeAction(actionChangeFillStyle, "ui", "solid")
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsxs60(
+        "div",
+        {
+          className: "buttonList",
+          style: { display: "flex", gap: 6, justifyContent: "flex-start" },
+          children: [
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "icon",
+                "aria-label": t("labels.hachure"),
+                icon: FillHachureIcon,
+                selected: globalThis.__leftShapesFormCache?.fillStyleValue === "hachure",
+                name: "left-flyout-fillStyle",
+                title: t("labels.hachure"),
+                onClick: () => actionManager.executeAction(
+                  actionChangeFillStyle,
+                  "ui",
+                  "hachure"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "icon",
+                "aria-label": t("labels.crossHatch"),
+                icon: FillCrossHatchIcon,
+                selected: globalThis.__leftShapesFormCache?.fillStyleValue === "cross-hatch",
+                name: "left-flyout-fillStyle",
+                title: t("labels.crossHatch"),
+                onClick: () => actionManager.executeAction(
+                  actionChangeFillStyle,
+                  "ui",
+                  "cross-hatch"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "icon",
+                "aria-label": t("labels.solid"),
+                icon: FillSolidIcon,
+                selected: globalThis.__leftShapesFormCache?.fillStyleValue === "solid",
+                name: "left-flyout-fillStyle",
+                title: t("labels.solid"),
+                onClick: () => actionManager.executeAction(
+                  actionChangeFillStyle,
+                  "ui",
+                  "solid"
+                )
+              }
+            )
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx108("div", { className: "left-flyout__title", children: t("labels.strokeWidth") }),
-      /* @__PURE__ */ jsxs60("div", { className: "buttonList", style: { display: "flex", gap: 6, justifyContent: "center" }, children: [
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "icon",
-            "aria-label": t("labels.thin"),
-            icon: StrokeWidthBaseIcon,
-            selected: selectedStrokeWidth === STROKE_WIDTH2.thin,
-            name: "left-flyout-strokeWidth",
-            title: t("labels.thin"),
-            onClick: () => actionManager.executeAction(actionChangeStrokeWidth, "ui", STROKE_WIDTH2.thin)
-          }
-        ),
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "icon",
-            "aria-label": t("labels.bold"),
-            icon: StrokeWidthBoldIcon,
-            selected: selectedStrokeWidth === STROKE_WIDTH2.bold,
-            name: "left-flyout-strokeWidth",
-            title: t("labels.bold"),
-            onClick: () => actionManager.executeAction(actionChangeStrokeWidth, "ui", STROKE_WIDTH2.bold)
-          }
-        ),
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "icon",
-            "aria-label": t("labels.extraBold"),
-            icon: StrokeWidthExtraBoldIcon,
-            selected: selectedStrokeWidth === STROKE_WIDTH2.extraBold,
-            name: "left-flyout-strokeWidth",
-            title: t("labels.extraBold"),
-            onClick: () => actionManager.executeAction(actionChangeStrokeWidth, "ui", STROKE_WIDTH2.extraBold)
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsxs60(
+        "div",
+        {
+          className: "buttonList",
+          style: { display: "flex", gap: 6, justifyContent: "flex-start" },
+          children: [
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "icon",
+                "aria-label": t("labels.thin"),
+                icon: StrokeWidthBaseIcon,
+                selected: selectedStrokeWidth === STROKE_WIDTH2.thin,
+                name: "left-flyout-strokeWidth",
+                title: t("labels.thin"),
+                onClick: () => actionManager.executeAction(
+                  actionChangeStrokeWidth,
+                  "ui",
+                  STROKE_WIDTH2.thin
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "icon",
+                "aria-label": t("labels.bold"),
+                icon: StrokeWidthBoldIcon,
+                selected: selectedStrokeWidth === STROKE_WIDTH2.bold,
+                name: "left-flyout-strokeWidth",
+                title: t("labels.bold"),
+                onClick: () => actionManager.executeAction(
+                  actionChangeStrokeWidth,
+                  "ui",
+                  STROKE_WIDTH2.bold
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "icon",
+                "aria-label": t("labels.extraBold"),
+                icon: StrokeWidthExtraBoldIcon,
+                selected: selectedStrokeWidth === STROKE_WIDTH2.extraBold,
+                name: "left-flyout-strokeWidth",
+                title: t("labels.extraBold"),
+                onClick: () => actionManager.executeAction(
+                  actionChangeStrokeWidth,
+                  "ui",
+                  STROKE_WIDTH2.extraBold
+                )
+              }
+            )
+          ]
+        }
+      )
     ] }),
-    openForText && /* @__PURE__ */ jsx108(Island, { className: "left-flyout left-flyout--text", children: /* @__PURE__ */ jsxs60(Stack_default.Col, { gap: 2, align: "center", children: [
+    openForText && /* @__PURE__ */ jsx108(Island, { className: "left-flyout left-flyout--text", children: /* @__PURE__ */ jsxs60(Stack_default.Col, { gap: 2, align: "start", children: [
       /* @__PURE__ */ jsx108("div", { className: "left-flyout__title", children: "\u6837\u5F0F" }),
       /* @__PURE__ */ jsxs60("div", { className: "text-style-row", style: { display: "flex", gap: 8 }, children: [
         /* @__PURE__ */ jsx108(
@@ -26325,7 +26524,9 @@ var LeftToolFlyouts = ({
               const value = !appState.currentTextBold;
               app.setState({ currentTextBold: value });
               syncWysiwygStyle();
-              updateSelectedTextStyle({ bold: !appState.currentTextBold });
+              updateSelectedTextStyle({
+                bold: !appState.currentTextBold
+              });
               updateCurrentTextDefaults({ bold: value });
             }
           }
@@ -26342,7 +26543,9 @@ var LeftToolFlyouts = ({
               const value = !appState.currentTextItalic;
               app.setState({ currentTextItalic: value });
               syncWysiwygStyle();
-              updateSelectedTextStyle({ italic: !appState.currentTextItalic });
+              updateSelectedTextStyle({
+                italic: !appState.currentTextItalic
+              });
               updateCurrentTextDefaults({ italic: value });
             }
           }
@@ -26387,83 +26590,118 @@ var LeftToolFlyouts = ({
         )
       ] }),
       /* @__PURE__ */ jsx108("div", { className: "left-flyout__title", children: "\u5B57\u53F7" }),
-      /* @__PURE__ */ jsx108("div", { className: "text-size-row", style: { display: "flex", gap: 6, alignItems: "center", justifyContent: "center" }, children: [10, 12, 16, 24, 36].map((size) => {
-        const selected2 = appState.currentItemFontSize === size;
-        return /* @__PURE__ */ jsx108(
-          "button",
-          {
-            className: clsx46("text-size-chip", { selected: selected2 }),
-            style: {
-              minWidth: 32,
-              height: 28,
-              padding: "0 10px",
-              borderRadius: 8,
-              background: selected2 ? "#2178ff" : "transparent",
-              color: selected2 ? "#fff" : "var(--text-primary-color)",
-              border: selected2 ? "1px solid #2178ff" : "1px solid var(--button-border-color)",
-              transition: "background 0.12s ease"
-            },
-            onMouseEnter: (e) => {
-              if (selected2)
-                e.currentTarget.style.background = "rgba(33,120,255,0.85)";
-            },
-            onMouseLeave: (e) => {
-              if (selected2)
-                e.currentTarget.style.background = "#2178ff";
-            },
-            onClick: () => {
-              actionManager.executeAction(actionChangeFontSize, "ui", size);
-            },
-            children: /* @__PURE__ */ jsx108("span", { style: { fontSize: 12 }, children: size })
+      /* @__PURE__ */ jsx108(
+        "div",
+        {
+          className: "text-size-row",
+          style: {
+            display: "flex",
+            gap: 6,
+            alignItems: "center",
+            justifyContent: "flex-start"
           },
-          size
-        );
-      }) }),
+          children: [10, 12, 16, 24, 36].map((size) => {
+            const selected2 = appState.currentItemFontSize === size;
+            return /* @__PURE__ */ jsx108(
+              "button",
+              {
+                className: clsx46("text-size-chip", { selected: selected2 }),
+                style: {
+                  minWidth: 32,
+                  height: 28,
+                  padding: "0 10px",
+                  borderRadius: 8,
+                  background: selected2 ? "#2178ff" : "transparent",
+                  color: selected2 ? "#fff" : "var(--text-primary-color)",
+                  border: selected2 ? "1px solid #2178ff" : "1px solid var(--button-border-color)",
+                  transition: "background 0.12s ease"
+                },
+                onMouseEnter: (e) => {
+                  if (selected2)
+                    e.currentTarget.style.background = "rgba(33,120,255,0.85)";
+                },
+                onMouseLeave: (e) => {
+                  if (selected2)
+                    e.currentTarget.style.background = "#2178ff";
+                },
+                onClick: () => {
+                  actionManager.executeAction(
+                    actionChangeFontSize,
+                    "ui",
+                    size
+                  );
+                },
+                children: /* @__PURE__ */ jsx108("span", { style: { fontSize: 12 }, children: size })
+              },
+              size
+            );
+          })
+        }
+      ),
       /* @__PURE__ */ jsx108("div", { className: "left-flyout__title", children: "\u5BF9\u9F50\u65B9\u5F0F" }),
-      /* @__PURE__ */ jsxs60("div", { className: "text-align-row", style: { display: "flex", gap: 6, justifyContent: "center" }, children: [
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "radio",
-            "aria-label": t("labels.left"),
-            name: "text-align",
-            title: t("labels.left"),
-            icon: TextAlignLeftIcon,
-            checked: appState.currentItemTextAlign === "left",
-            onChange: () => {
-              actionManager.executeAction(actionChangeTextAlign, "ui", "left");
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "radio",
-            "aria-label": t("labels.center"),
-            name: "text-align",
-            title: t("labels.center"),
-            icon: TextAlignCenterIcon,
-            checked: appState.currentItemTextAlign === "center",
-            onChange: () => {
-              actionManager.executeAction(actionChangeTextAlign, "ui", "center");
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx108(
-          ToolButton,
-          {
-            type: "radio",
-            "aria-label": t("labels.right"),
-            name: "text-align",
-            title: t("labels.right"),
-            icon: TextAlignRightIcon,
-            checked: appState.currentItemTextAlign === "right",
-            onChange: () => {
-              actionManager.executeAction(actionChangeTextAlign, "ui", "right");
-            }
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsxs60(
+        "div",
+        {
+          className: "text-align-row",
+          style: { display: "flex", gap: 6, justifyContent: "flex-start" },
+          children: [
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "radio",
+                "aria-label": t("labels.left"),
+                name: "text-align",
+                title: t("labels.left"),
+                icon: TextAlignLeftIcon,
+                checked: appState.currentItemTextAlign === "left",
+                onChange: () => {
+                  actionManager.executeAction(
+                    actionChangeTextAlign,
+                    "ui",
+                    "left"
+                  );
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "radio",
+                "aria-label": t("labels.center"),
+                name: "text-align",
+                title: t("labels.center"),
+                icon: TextAlignCenterIcon,
+                checked: appState.currentItemTextAlign === "center",
+                onChange: () => {
+                  actionManager.executeAction(
+                    actionChangeTextAlign,
+                    "ui",
+                    "center"
+                  );
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx108(
+              ToolButton,
+              {
+                type: "radio",
+                "aria-label": t("labels.right"),
+                name: "text-align",
+                title: t("labels.right"),
+                icon: TextAlignRightIcon,
+                checked: appState.currentItemTextAlign === "right",
+                onChange: () => {
+                  actionManager.executeAction(
+                    actionChangeTextAlign,
+                    "ui",
+                    "right"
+                  );
+                }
+              }
+            )
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx108("div", { className: "left-flyout__separator" }),
       renderStrokeColor()
     ] }) }),
@@ -26495,13 +26733,38 @@ var LeftToolFlyouts = ({
         )
       ] }),
       /* @__PURE__ */ jsx108("div", { className: "left-flyout__title", children: t("labels.strokeWidth") }),
-      /* @__PURE__ */ jsx108("div", { className: "width-choices", children: [STROKE_WIDTH2.thin, STROKE_WIDTH2.bold, STROKE_WIDTH2.extraBold, 6].map((w) => /* @__PURE__ */ jsx108(
+      /* @__PURE__ */ jsx108("div", { className: "width-choices", children: [
+        STROKE_WIDTH2.thin,
+        STROKE_WIDTH2.bold,
+        STROKE_WIDTH2.extraBold,
+        6
+      ].map((w) => /* @__PURE__ */ jsx108(
         "button",
         {
-          className: clsx46("stroke-width-preview", { selected: appState.currentItemStrokeWidth === w }),
+          className: clsx46("stroke-width-preview", {
+            selected: appState.currentItemStrokeWidth === w
+          }),
           title: `${t("labels.strokeWidth")} ${w}`,
           onClick: () => setStrokeWidth(w),
-          children: /* @__PURE__ */ jsx108("svg", { width: "24", height: "16", viewBox: "0 0 24 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx108("path", { d: "M2 12 C 6 2, 14 14, 22 6", fill: "none", stroke: "currentColor", strokeWidth: Math.max(1, Number(w)), strokeLinecap: "round" }) })
+          children: /* @__PURE__ */ jsx108(
+            "svg",
+            {
+              width: "24",
+              height: "16",
+              viewBox: "0 0 24 16",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx108(
+                "path",
+                {
+                  d: "M2 12 C 6 2, 14 14, 22 6",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: Math.max(1, Number(w)),
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          )
         },
         String(w)
       )) }),
@@ -31924,7 +32187,8 @@ var LayerUI = ({
   generateLinkForSelection,
   showZoomActions,
   showPanActions,
-  showToolBar = true
+  showToolBar = true,
+  showTopLeftToolbar = true
 }) => {
   const device = useDevice();
   const tunnels = useInitializeTunnels();
@@ -32239,7 +32503,7 @@ var LayerUI = ({
         showToolBar
       }
     ),
-    !device.editor.isMobile && !appState.viewModeEnabled && showToolBar && /* @__PURE__ */ jsx145(
+    !device.editor.isMobile && !appState.viewModeEnabled && showTopLeftToolbar && /* @__PURE__ */ jsx145(
       TopLeftToolbar,
       {
         appState,
@@ -37574,6 +37838,168 @@ var App = class _App extends React46.Component {
     this.store = new Store(this);
     this.history = new History(this.store);
     if (excalidrawAPI) {
+      const updateLeftToolbarStyle = (patch) => {
+        this.setState(patch);
+      };
+      const selectLineVariant = (variant = "line") => {
+        if (variant === "line") {
+          this.setActiveTool({ type: TOOL_TYPE4.line });
+          return;
+        }
+        this.setActiveTool({ type: TOOL_TYPE4.arrow });
+        if (variant === "arrow") {
+          updateLeftToolbarStyle({
+            currentItemStartArrowhead: null,
+            currentItemEndArrowhead: "arrow"
+          });
+          return;
+        }
+        if (variant === "doubleArrow") {
+          updateLeftToolbarStyle({
+            currentItemStartArrowhead: "arrow",
+            currentItemEndArrowhead: "arrow"
+          });
+          return;
+        }
+        if (variant === "outlineArrow") {
+          updateLeftToolbarStyle({
+            currentItemStartArrowhead: null,
+            currentItemEndArrowhead: "triangle_outline"
+          });
+          return;
+        }
+        updateLeftToolbarStyle({
+          currentItemStartArrowhead: "triangle_outline",
+          currentItemEndArrowhead: "triangle_outline"
+        });
+      };
+      const leftToolbarApi = {
+        selectSelection: () => {
+          this.setActiveTool({ type: TOOL_TYPE4.selection });
+        },
+        selectFreedraw: (opts) => {
+          this.setActiveTool({ type: TOOL_TYPE4.freedraw });
+          if (!opts) {
+            return;
+          }
+          const patch = {};
+          const variant = opts.variant ?? "pen";
+          patch.currentItemOpacity = variant === "highlighter" ? 50 : 100;
+          if (typeof opts.strokeWidth === "number") {
+            patch.currentItemStrokeWidth = opts.strokeWidth;
+          }
+          if (typeof opts.strokeColor === "string") {
+            patch.currentItemStrokeColor = opts.strokeColor;
+          }
+          updateLeftToolbarStyle(patch);
+        },
+        selectLine: (opts) => {
+          const variant = opts?.variant ?? "line";
+          selectLineVariant(variant);
+          if (!opts) {
+            return;
+          }
+          const patch = {};
+          if (typeof opts.strokeWidth === "number") {
+            patch.currentItemStrokeWidth = opts.strokeWidth;
+          }
+          if (typeof opts.strokeColor === "string") {
+            patch.currentItemStrokeColor = opts.strokeColor;
+          }
+          updateLeftToolbarStyle(patch);
+        },
+        selectShape: (shape, opts) => {
+          const nextShape = shape ?? "rectangle";
+          this.setActiveTool({ type: nextShape });
+          if (!opts) {
+            return;
+          }
+          const patch = {};
+          if (typeof opts.strokeWidth === "number") {
+            patch.currentItemStrokeWidth = opts.strokeWidth;
+          }
+          if (typeof opts.strokeColor === "string") {
+            patch.currentItemStrokeColor = opts.strokeColor;
+          }
+          if (typeof opts.backgroundColor === "string") {
+            patch.currentItemBackgroundColor = opts.backgroundColor;
+          }
+          if (opts.fillStyle) {
+            patch.currentItemFillStyle = opts.fillStyle;
+          }
+          updateLeftToolbarStyle(patch);
+        },
+        selectText: (opts) => {
+          this.setActiveTool({ type: TOOL_TYPE4.text });
+          if (!opts) {
+            return;
+          }
+          const patch = {};
+          if (typeof opts.fontSize === "number") {
+            patch.currentItemFontSize = opts.fontSize;
+          }
+          if (opts.textAlign) {
+            patch.currentItemTextAlign = opts.textAlign;
+          }
+          if (typeof opts.strokeColor === "string") {
+            patch.currentItemStrokeColor = opts.strokeColor;
+          }
+          if (typeof opts.bold === "boolean") {
+            patch.currentTextBold = opts.bold;
+          }
+          if (typeof opts.italic === "boolean") {
+            patch.currentTextItalic = opts.italic;
+          }
+          if (typeof opts.underline === "boolean") {
+            patch.currentTextUnderline = opts.underline;
+          }
+          if (typeof opts.strikethrough === "boolean") {
+            patch.currentTextStrikethrough = opts.strikethrough;
+          }
+          updateLeftToolbarStyle(patch);
+        },
+        selectEraser: () => {
+          this.setActiveTool({ type: TOOL_TYPE4.eraser });
+        },
+        updateStyle: (patch) => {
+          updateLeftToolbarStyle(patch);
+        },
+        dispatch: (command) => {
+          switch (command.type) {
+            case "selectSelection":
+              leftToolbarApi.selectSelection();
+              return;
+            case "selectFreedraw":
+              leftToolbarApi.selectFreedraw(command.payload);
+              return;
+            case "selectLine":
+              leftToolbarApi.selectLine(command.payload);
+              return;
+            case "selectShape":
+              leftToolbarApi.selectShape(
+                command.payload?.shape,
+                command.payload && {
+                  strokeWidth: command.payload.strokeWidth,
+                  strokeColor: command.payload.strokeColor,
+                  backgroundColor: command.payload.backgroundColor,
+                  fillStyle: command.payload.fillStyle
+                }
+              );
+              return;
+            case "selectText":
+              leftToolbarApi.selectText(command.payload);
+              return;
+            case "selectEraser":
+              leftToolbarApi.selectEraser();
+              return;
+            case "updateStyle":
+              leftToolbarApi.updateStyle(command.payload);
+              return;
+            default:
+              return;
+          }
+        }
+      };
       const api = {
         updateScene: this.updateScene,
         updateSceneSilently: this.updateSceneSilently,
@@ -37600,6 +38026,7 @@ var App = class _App extends React46.Component {
         setToast: this.setToast,
         id: this.id,
         setActiveTool: this.setActiveTool,
+        leftToolbar: leftToolbarApi,
         setCursor: this.setCursor,
         resetCursor: this.resetCursor,
         updateFrameRendering: this.updateFrameRendering,
@@ -38065,6 +38492,7 @@ var App = class _App extends React46.Component {
                             showZoomActions: this.props.showZoomActions,
                             showPanActions: this.props.showPanActions,
                             showToolBar: this.props.showToolBar,
+                            showTopLeftToolbar: this.props.showTopLeftToolbar,
                             children: this.props.children
                           }
                         ),
@@ -41291,15 +41719,207 @@ import {
   viewportCoordsToSceneCoords as viewportCoordsToSceneCoords5
 } from "@haoxin-web/excalidraw-common";
 
-// components/TTDDialog/TTDDialogTrigger.tsx
+// components/ExternalLeftToolbar.tsx
+import { useState as useState40 } from "react";
 import { jsx as jsx161, jsxs as jsxs88 } from "react/jsx-runtime";
+var SHAPE_OPTIONS = [
+  "rectangle",
+  "ellipse",
+  "diamond",
+  "triangle",
+  "pentagon",
+  "callout",
+  "hollow_arrow",
+  "hollow_double_arrow"
+];
+var LINE_VARIANTS = [
+  "line",
+  "arrow",
+  "doubleArrow",
+  "outlineArrow",
+  "outlineDoubleArrow"
+];
+var FREEDRAW_VARIANTS = ["pen", "highlighter"];
+var ExternalLeftToolbar = ({
+  excalidrawAPI,
+  className,
+  style
+}) => {
+  const [shape, setShape] = useState40("rectangle");
+  const [lineVariant, setLineVariant] = useState40("line");
+  const [freedrawVariant, setFreedrawVariant] = useState40("pen");
+  const [strokeWidth, setStrokeWidth] = useState40(2);
+  const [strokeColor, setStrokeColor] = useState40("#1f1f1f");
+  const disabled = !excalidrawAPI;
+  return /* @__PURE__ */ jsxs88(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        padding: 10,
+        border: "1px solid #e5e7eb",
+        borderRadius: 10,
+        width: 220,
+        background: "#fff",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs88("div", { style: { display: "flex", gap: 8 }, children: [
+          /* @__PURE__ */ jsx161(
+            "button",
+            {
+              type: "button",
+              disabled,
+              onClick: () => excalidrawAPI?.leftToolbar.selectSelection(),
+              children: "Selection"
+            }
+          ),
+          /* @__PURE__ */ jsx161(
+            "button",
+            {
+              type: "button",
+              disabled,
+              onClick: () => excalidrawAPI?.leftToolbar.selectEraser(),
+              children: "Eraser"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs88("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx161("label", { style: { minWidth: 70 }, children: "Freedraw" }),
+          /* @__PURE__ */ jsx161(
+            "select",
+            {
+              value: freedrawVariant,
+              onChange: (e) => setFreedrawVariant(e.target.value),
+              children: FREEDRAW_VARIANTS.map((item) => /* @__PURE__ */ jsx161("option", { value: item, children: item }, item))
+            }
+          ),
+          /* @__PURE__ */ jsx161(
+            "button",
+            {
+              type: "button",
+              disabled,
+              onClick: () => excalidrawAPI?.leftToolbar.selectFreedraw({
+                variant: freedrawVariant,
+                strokeWidth,
+                strokeColor
+              }),
+              children: "Apply"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs88("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx161("label", { style: { minWidth: 70 }, children: "Line" }),
+          /* @__PURE__ */ jsx161(
+            "select",
+            {
+              value: lineVariant,
+              onChange: (e) => setLineVariant(e.target.value),
+              children: LINE_VARIANTS.map((item) => /* @__PURE__ */ jsx161("option", { value: item, children: item }, item))
+            }
+          ),
+          /* @__PURE__ */ jsx161(
+            "button",
+            {
+              type: "button",
+              disabled,
+              onClick: () => excalidrawAPI?.leftToolbar.selectLine({
+                variant: lineVariant,
+                strokeWidth,
+                strokeColor
+              }),
+              children: "Apply"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs88("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx161("label", { style: { minWidth: 70 }, children: "Shape" }),
+          /* @__PURE__ */ jsx161(
+            "select",
+            {
+              value: shape,
+              onChange: (e) => setShape(e.target.value),
+              children: SHAPE_OPTIONS.map((item) => /* @__PURE__ */ jsx161("option", { value: item, children: item }, item))
+            }
+          ),
+          /* @__PURE__ */ jsx161(
+            "button",
+            {
+              type: "button",
+              disabled,
+              onClick: () => excalidrawAPI?.leftToolbar.selectShape(shape, {
+                strokeWidth,
+                strokeColor
+              }),
+              children: "Apply"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs88("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx161("label", { style: { minWidth: 70 }, children: "Text" }),
+          /* @__PURE__ */ jsx161(
+            "button",
+            {
+              type: "button",
+              disabled,
+              onClick: () => excalidrawAPI?.leftToolbar.selectText({
+                strokeColor
+              }),
+              children: "Text Tool"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs88("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx161("label", { style: { minWidth: 70 }, children: "Stroke" }),
+          /* @__PURE__ */ jsx161(
+            "input",
+            {
+              type: "number",
+              min: 1,
+              max: 20,
+              value: strokeWidth,
+              onChange: (e) => setStrokeWidth(Number(e.target.value || 1)),
+              style: { width: 60 }
+            }
+          ),
+          /* @__PURE__ */ jsx161(
+            "input",
+            {
+              type: "color",
+              value: strokeColor,
+              onChange: (e) => setStrokeColor(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx161(
+            "button",
+            {
+              type: "button",
+              disabled,
+              onClick: () => excalidrawAPI?.leftToolbar.updateStyle({
+                currentItemStrokeWidth: strokeWidth,
+                currentItemStrokeColor: strokeColor
+              }),
+              children: "Sync"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// components/TTDDialog/TTDDialogTrigger.tsx
+import { jsx as jsx162, jsxs as jsxs89 } from "react/jsx-runtime";
 var TTDDialogTrigger = ({
   children,
   icon
 }) => {
   const { TTDDialogTriggerTunnel } = useTunnels();
   const setAppState = useExcalidrawSetAppState();
-  return /* @__PURE__ */ jsx161(TTDDialogTriggerTunnel.In, { children: /* @__PURE__ */ jsxs88(
+  return /* @__PURE__ */ jsx162(TTDDialogTriggerTunnel.In, { children: /* @__PURE__ */ jsxs89(
     DropdownMenu_default.Item,
     {
       onSelect: () => {
@@ -41309,7 +41929,7 @@ var TTDDialogTrigger = ({
       icon: icon ?? brainIcon,
       children: [
         children ?? t("labels.textToDiagram"),
-        /* @__PURE__ */ jsx161(DropdownMenu_default.Item.Badge, { children: "AI" })
+        /* @__PURE__ */ jsx162(DropdownMenu_default.Item.Badge, { children: "AI" })
       ]
     }
   ) });
@@ -41334,7 +41954,7 @@ var DiagramToCodePlugin = (props) => {
 // index.tsx
 import { isElementLink as isElementLink3 } from "@haoxin-web/excalidraw-element";
 import { setCustomTextMetricsProvider } from "@haoxin-web/excalidraw-element";
-import { jsx as jsx162 } from "react/jsx-runtime";
+import { jsx as jsx163 } from "react/jsx-runtime";
 polyfill_default();
 var ExcalidrawBase = (props) => {
   console.log("\u4F7F\u7528\u4E86\u7EC4\u4EF6=====Excalidraw component initialized");
@@ -41374,7 +41994,8 @@ var ExcalidrawBase = (props) => {
     renderScrollbars,
     showZoomActions,
     showPanActions,
-    showToolBar
+    showToolBar,
+    showTopLeftToolbar
   } = props;
   const canvasActions = props.UIOptions?.canvasActions;
   const UIOptions = {
@@ -41410,7 +42031,7 @@ var ExcalidrawBase = (props) => {
       document.removeEventListener("touchmove", handleTouchMove);
     };
   }, []);
-  return /* @__PURE__ */ jsx162(EditorJotaiProvider, { store: editorJotaiStore, children: /* @__PURE__ */ jsx162(InitializeApp, { langCode, theme, children: /* @__PURE__ */ jsx162(
+  return /* @__PURE__ */ jsx163(EditorJotaiProvider, { store: editorJotaiStore, children: /* @__PURE__ */ jsx163(InitializeApp, { langCode, theme, children: /* @__PURE__ */ jsx163(
     App_default,
     {
       onChange,
@@ -41449,6 +42070,7 @@ var ExcalidrawBase = (props) => {
       showZoomActions,
       showPanActions,
       showToolBar,
+      showTopLeftToolbar,
       children
     }
   ) }) });
@@ -41488,7 +42110,7 @@ var areEqual5 = (prevProps, nextProps) => {
   });
   return isUIOptionsSame && isShallowEqual9(prev, next);
 };
-var Excalidraw = React48.memo(ExcalidrawBase, areEqual5);
+var Excalidraw = React49.memo(ExcalidrawBase, areEqual5);
 Excalidraw.displayName = "Excalidraw";
 export {
   Button,
@@ -41498,6 +42120,7 @@ export {
   DiagramToCodePlugin,
   Ellipsify,
   Excalidraw,
+  ExternalLeftToolbar,
   FONT_FAMILY5 as FONT_FAMILY,
   FooterCenter_default as Footer,
   LiveCollaborationTrigger_default as LiveCollaborationTrigger,
@@ -41510,6 +42133,7 @@ export {
   TTDDialog,
   TTDDialogTrigger,
   UserIdleState2 as UserIdleState,
+  UserList,
   WelcomeScreen_default as WelcomeScreen,
   bumpVersion,
   convertToExcalidrawElements,