@elixpo/lixsketch 5.5.23 → 5.6.2

package/dist/react/index.js

@@ -1,4 +1,7 @@
 "use client";
+import {
+  normalizeWebEmbedUrl
+} from "./chunk-QZI4UIE5.js";
 import {
   ALLOWED_IMAGE_EXTENSIONS,
   ALLOWED_IMAGE_MIME_TYPES,
@@ -9,7 +12,7 @@ import {
 } from "./chunk-DNAG7ML6.js";
 
 // src/react/LixSketchCanvas.jsx
-import { useCallback as useCallback16, useEffect as useEffect17, useRef as useRef12, useState as useState20 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect20, useRef as useRef14, useState as useState23 } from "react";
 
 // src/react/store/useSketchStore.js
 import { create } from "zustand";
@@ -29,7 +32,11 @@ var TOOLS = {
   LASER: "laser",
   IMAGE: "image",
   FRAME: "frame",
-  ICON: "icon"
+  ICON: "icon",
+  DRAW_SHAPE: "draw-shape",
+  PAINT_BUCKET: "paint-bucket",
+  LASSO: "lasso",
+  WEB_EMBED: "web-embed"
 };
 var TOOL_CURSORS = {
   [TOOLS.SELECT]: "default",
@@ -44,7 +51,11 @@ var TOOL_CURSORS = {
   [TOOLS.LASER]: "crosshair",
   [TOOLS.IMAGE]: "crosshair",
   [TOOLS.FRAME]: "crosshair",
-  [TOOLS.ICON]: "crosshair"
+  [TOOLS.ICON]: "crosshair",
+  [TOOLS.DRAW_SHAPE]: "crosshair",
+  [TOOLS.PAINT_BUCKET]: "cell",
+  [TOOLS.LASSO]: "crosshair",
+  [TOOLS.WEB_EMBED]: "crosshair"
 };
 var TOOL_SIDEBARS = {
   [TOOLS.FREEHAND]: "paintbrush",
@@ -54,7 +65,8 @@ var TOOL_SIDEBARS = {
   [TOOLS.ARROW]: "arrow",
   [TOOLS.TEXT]: "text",
   [TOOLS.CODE]: "text",
-  [TOOLS.FRAME]: "frame"
+  [TOOLS.FRAME]: "frame",
+  [TOOLS.DRAW_SHAPE]: "paintbrush"
 };
 var SHORTCUT_MAP = {
   h: TOOLS.PAN,
@@ -77,7 +89,11 @@ var SHORTCUT_MAP = {
   0: TOOLS.ERASER,
   i: TOOLS.ICON,
   f: TOOLS.FRAME,
-  k: TOOLS.LASER
+  k: TOOLS.LASER,
+  d: TOOLS.DRAW_SHAPE,
+  b: TOOLS.PAINT_BUCKET,
+  s: TOOLS.LASSO,
+  w: TOOLS.WEB_EMBED
 };
 var useSketchStore = create((set, get) => ({
   // --- Active tool (replaces 15 boolean flags) ---
@@ -528,7 +544,7 @@ function useSketchEngine(svgRef, ready = true) {
           setZoom: (zoom) => useSketchStore_default.setState({ zoom }),
           getState: () => useSketchStore_default.getState()
         };
-        const { SketchEngine } = await import("./SketchEngine-OB6ZW3B6.js");
+        const { SketchEngine } = await import("./SketchEngine-UD2XV2KT.js");
         if (cancelled) return;
         const engine = new SketchEngine(svgRef.current);
         await engine.init();
@@ -826,12 +842,23 @@ function SVGCanvas() {
 }
 
 // src/react/components/Toolbar.jsx
+import { useEffect as useEffect4, useRef as useRef3, useState as useState3 } from "react";
 import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function getViewModeItems() {
   return [
     { tool: TOOLS.PAN, icon: "bxs-hand", title: "Pan (H)", key: "H" }
   ];
 }
+function getMoreToolItems() {
+  return [
+    { tool: TOOLS.DRAW_SHAPE, icon: "draw-shape", title: "Draw to shape", key: "D" },
+    { tool: TOOLS.PAINT_BUCKET, icon: "bxs-color-fill", title: "Paint bucket", key: "B" },
+    { tool: TOOLS.FRAME, icon: "bx-crop", title: "Frame", key: "F" },
+    { tool: TOOLS.LASER, icon: "bxs-magic-wand", title: "Laser", key: "K" },
+    { tool: TOOLS.LASSO, icon: "bx-shape-polygon", title: "Lasso selection", key: "S" },
+    { tool: TOOLS.WEB_EMBED, icon: "bx-globe", title: "Web embed", key: "W" }
+  ];
+}
 function getToolItems() {
   return [
     { tool: TOOLS.PAN, icon: "bxs-hand", title: "Pan (H)", key: "H" },
@@ -846,14 +873,23 @@ function getToolItems() {
     { tool: TOOLS.IMAGE, icon: "bx-image-alt", title: "Image (9)", key: "9" },
     { tool: TOOLS.ICON, icon: "bx-wink-smile", title: "Icon (I)", key: "I" },
     "spacer",
-    { tool: TOOLS.FRAME, icon: "bx-crop", title: "Frame (F)", key: "F" },
-    { tool: TOOLS.LASER, icon: "bxs-magic-wand", title: "Laser (K)", key: "K" },
-    { tool: TOOLS.ERASER, icon: "bxs-eraser", title: "Eraser (E)", key: "E" }
+    { tool: TOOLS.ERASER, icon: "bxs-eraser", title: "Eraser (E)", key: "E" },
+    "more"
     // AI tool entry removed while the assistant is coming-soon.
     // Restore `{ tool: 'ai', icon: null, title: 'AI', isAI: true }` here
     // when the modal becomes a real feature again.
   ];
 }
+function ToolIcon({ item, className = "h-5 w-5" }) {
+  if (item.icon === "draw-shape") {
+    return /* @__PURE__ */ jsxs3("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx3("path", { d: "M2.5 16.5c2.2-5.8 4.5 3.5 7-2.5 1.1-2.7 2.2-3.8 3.4-3.9" }),
+      /* @__PURE__ */ jsx3("path", { d: "M15 4.5h6v6h-6z" }),
+      /* @__PURE__ */ jsx3("path", { d: "m12.5 8 2.5-.5" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx3("i", { className: `bx ${item.icon} text-xl` });
+}
 function Toolbar() {
   const activeTool = useSketchStore_default((s) => s.activeTool);
   const setActiveTool = useSketchStore_default((s) => s.setActiveTool);
@@ -861,9 +897,31 @@ function Toolbar() {
   const toolLock = useSketchStore_default((s) => s.toolLock);
   const toggleToolLock = useSketchStore_default((s) => s.toggleToolLock);
   const toggleAIModal = useUIStore_default((s) => s.toggleAIModal);
+  const [moreOpen, setMoreOpen] = useState3(false);
+  const [lastMoreItem, setLastMoreItem] = useState3(null);
+  const moreRef = useRef3(null);
   const items = viewMode ? getViewModeItems() : getToolItems();
+  const moreItems = getMoreToolItems();
+  const activeMoreItem = moreItems.find((item) => item.tool === activeTool);
+  const moreActive = Boolean(activeMoreItem);
+  const shownMoreItem = activeMoreItem || lastMoreItem;
+  useEffect4(() => {
+    if (!moreOpen) return void 0;
+    const close = (event) => {
+      if (event.key === "Escape" || event.type === "pointerdown" && !moreRef.current?.contains(event.target)) setMoreOpen(false);
+    };
+    document.addEventListener("pointerdown", close);
+    document.addEventListener("keydown", close);
+    return () => {
+      document.removeEventListener("pointerdown", close);
+      document.removeEventListener("keydown", close);
+    };
+  }, [moreOpen]);
+  useEffect4(() => {
+    setMoreOpen(false);
+  }, [activeTool, viewMode]);
   return /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsxs3("div", { "data-canvas-toolbar": true, className: `absolute left-2.5 top-1/2 -translate-y-1/2 w-[46px] rounded-xl bg-surface z-[1000] flex flex-col items-center py-1.5 gap-0.5 font-[lixFont] max-h-[calc(100vh-120px)] overflow-y-auto no-scrollbar`, children: [
+    /* @__PURE__ */ jsxs3("div", { "data-canvas-toolbar": true, className: `absolute left-2.5 top-1/2 -translate-y-1/2 w-[46px] rounded-xl bg-surface z-[1000] flex flex-col items-center py-1.5 gap-0.5 font-[lixFont] max-h-[calc(100vh-120px)] overflow-visible`, children: [
       !viewMode && /* @__PURE__ */ jsxs3(Fragment3, { children: [
         /* @__PURE__ */ jsxs3(
           "button",
@@ -889,6 +947,37 @@ function Toolbar() {
             `spacer-${idx}`
           );
         }
+        if (item === "more") {
+          return /* @__PURE__ */ jsxs3("div", { ref: moreRef, className: "relative", children: [
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                title: shownMoreItem ? `${shownMoreItem.title} \u2014 More tools` : "More tools",
+                "aria-label": "More tools",
+                "aria-expanded": moreOpen,
+                onClick: () => setMoreOpen((open) => !open),
+                className: `relative flex h-[31px] w-[33px] cursor-pointer items-center justify-center rounded-lg transition-all duration-200 ${moreOpen || moreActive ? "bg-accent/20 text-accent" : "text-text-muted hover:bg-surface-hover hover:text-text-primary"}`,
+                children: shownMoreItem ? /* @__PURE__ */ jsx3(ToolIcon, { item: shownMoreItem, className: "h-[18px] w-[18px]" }) : /* @__PURE__ */ jsx3("i", { className: "bx bx-dots-horizontal-rounded text-xl" })
+              }
+            ),
+            moreOpen && /* @__PURE__ */ jsxs3("div", { className: "absolute left-[calc(100%+10px)] top-1/2 z-[1100] w-[190px] -translate-y-1/2 rounded-xl border border-border-light bg-surface-card/95 p-1.5 shadow-xl shadow-black/25 backdrop-blur-lg", children: [
+              /* @__PURE__ */ jsx3("p", { className: "px-2 py-1 text-[10px] uppercase tracking-[0.14em] text-text-dim", children: "More tools" }),
+              moreItems.map((moreItem) => {
+                const selected = activeTool === moreItem.tool;
+                return /* @__PURE__ */ jsxs3("button", { type: "button", title: `${moreItem.title} (${moreItem.key})`, onClick: () => {
+                  setLastMoreItem(moreItem);
+                  setActiveTool(moreItem.tool);
+                  setMoreOpen(false);
+                }, className: `flex w-full cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2 text-left text-xs transition ${selected ? "bg-accent/20 text-accent" : "text-text-muted hover:bg-surface-hover hover:text-text-primary"}`, children: [
+                  /* @__PURE__ */ jsx3("span", { className: "flex h-5 w-5 items-center justify-center", children: /* @__PURE__ */ jsx3(ToolIcon, { item: moreItem, className: "h-[18px] w-[18px]" }) }),
+                  /* @__PURE__ */ jsx3("span", { className: "flex-1", children: moreItem.title }),
+                  /* @__PURE__ */ jsx3("span", { className: "text-[10px] text-text-dim", children: moreItem.key })
+                ] }, moreItem.tool);
+              })
+            ] })
+          ] }, "more");
+        }
         const isActive = activeTool === item.tool;
         if (item.isAI) {
           return /* @__PURE__ */ jsx3(
@@ -925,13 +1014,7 @@ function Toolbar() {
             onClick: () => setActiveTool(item.tool),
             className: `relative w-[33px] h-[31px] flex items-center justify-center rounded-lg transition-all duration-200 ${isActive ? "bg-accent-blue/20 text-accent-blue" : "text-text-muted hover:text-text-primary hover:bg-surface-hover"}`,
             children: [
-              /* @__PURE__ */ jsx3(
-                "i",
-                {
-                  className: `bx ${item.icon} text-xl`,
-                  style: item.rotate ? { transform: "rotate(-45deg)" } : void 0
-                }
-              ),
+              /* @__PURE__ */ jsx3("span", { style: item.rotate ? { transform: "rotate(-45deg)" } : void 0, children: /* @__PURE__ */ jsx3(ToolIcon, { item }) }),
               item.key && /* @__PURE__ */ jsx3("span", { className: `absolute bottom-0.5 right-[-1px] text-[10px] leading-none ${isActive ? "opacity-60" : "opacity-35"}`, children: item.key })
             ]
           },
@@ -1048,7 +1131,7 @@ function Footer() {
 }
 
 // src/react/components/AppMenu.jsx
-import { useEffect as useEffect4, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 
 // src/react/hooks/useTranslation.js
@@ -1142,7 +1225,7 @@ var CANVAS_BACKGROUNDS_DARK = [
   { color: "#1B1615", label: "menu.canvasBg.darkBrown" }
 ];
 function DangerWarningDialog({ action, workspaceName, onCancel, onConfirm }) {
-  useEffect4(() => {
+  useEffect5(() => {
     if (!action) return void 0;
     const closeOnEscape = (event) => {
       if (event.key === "Escape") onCancel();
@@ -1254,12 +1337,12 @@ function AppMenu() {
   const authUser = useAuthStore((s) => s.user);
   const login = useAuthStore((s) => s.login);
   const logout = useAuthStore((s) => s.logout);
-  const [prefsOpen, setPrefsOpen] = useState3(false);
-  const [actionsOpen, setActionsOpen] = useState3(false);
-  const [actionsFlyoutPosition, setActionsFlyoutPosition] = useState3({ top: 0, left: 0 });
-  const actionsButtonRef = useRef3(null);
-  const [dangerAction, setDangerAction] = useState3(null);
-  useEffect4(() => {
+  const [prefsOpen, setPrefsOpen] = useState4(false);
+  const [actionsOpen, setActionsOpen] = useState4(false);
+  const [actionsFlyoutPosition, setActionsFlyoutPosition] = useState4({ top: 0, left: 0 });
+  const actionsButtonRef = useRef4(null);
+  const [dangerAction, setDangerAction] = useState4(null);
+  useEffect5(() => {
     if (menuOpen) return;
     setActionsOpen(false);
     setPrefsOpen(false);
@@ -1605,12 +1688,12 @@ function AppMenu() {
 }
 
 // src/react/components/sidebars/ShapeSidebar.jsx
-import { useState as useState4, useRef as useRef4, useEffect as useEffect5 } from "react";
+import { useState as useState5, useRef as useRef5, useEffect as useEffect6 } from "react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ToolbarButton({ icon, preview, children, tooltip }) {
-  const [open, setOpen] = useState4(false);
-  const ref = useRef4(null);
-  useEffect5(() => {
+  const [open, setOpen] = useState5(false);
+  const ref = useRef5(null);
+  useEffect6(() => {
     if (!open) return;
     const handler = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -1699,7 +1782,7 @@ function LayerControls() {
 }
 
 // src/react/components/sidebars/RectangleSidebar.jsx
-import { useState as useState5, useCallback as useCallback2 } from "react";
+import { useState as useState6, useCallback as useCallback2 } from "react";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var STROKE_COLORS = ["#1a1a20", "#ffffff", "#FF8383", "#3A994C", "#56A2E8", "#FFD700", "#FF69B4", "#A855F7"];
 var BG_COLORS = ["transparent", "#f0f0f0", "#ffcccb", "#90ee90", "#add8e6", "#FFE4B5", "#DDA0DD", "#2d2d2d"];
@@ -1729,11 +1812,11 @@ function RectangleSidebar() {
   const { t } = useTranslation();
   const activeTool = useSketchStore_default((s) => s.activeTool);
   const selectedShapeSidebar = useSketchStore_default((s) => s.selectedShapeSidebar);
-  const [strokeColor, setStrokeColor] = useState5("#fff");
-  const [bgColor, setBgColor] = useState5("transparent");
-  const [thickness, setThickness] = useState5(2);
-  const [lineStyle, setLineStyle] = useState5("solid");
-  const [fillStyle, setFillStyle] = useState5("hachure");
+  const [strokeColor, setStrokeColor] = useState6("#fff");
+  const [bgColor, setBgColor] = useState6("transparent");
+  const [thickness, setThickness] = useState6(2);
+  const [lineStyle, setLineStyle] = useState6("solid");
+  const [fillStyle, setFillStyle] = useState6("hachure");
   const update = useCallback2((changes, localSetters) => {
     Object.entries(localSetters).forEach(([, fn]) => fn());
     if (window.updateSelectedRectStyle) window.updateSelectedRectStyle(changes);
@@ -1834,7 +1917,7 @@ function RectangleSidebar() {
 }
 
 // src/react/components/sidebars/CircleSidebar.jsx
-import { useState as useState6, useCallback as useCallback3 } from "react";
+import { useState as useState7, useCallback as useCallback3 } from "react";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var STROKE_COLORS2 = ["#1a1a20", "#ffffff", "#FF8383", "#3A994C", "#56A2E8", "#FFD700", "#FF69B4", "#A855F7"];
 var BG_COLORS2 = ["transparent", "#f0f0f0", "#ffcccb", "#90ee90", "#add8e6", "#FFE4B5", "#DDA0DD", "#2d2d2d"];
@@ -1864,11 +1947,11 @@ function CircleSidebar() {
   const { t } = useTranslation();
   const activeTool = useSketchStore_default((s) => s.activeTool);
   const selectedShapeSidebar = useSketchStore_default((s) => s.selectedShapeSidebar);
-  const [strokeColor, setStrokeColor] = useState6("#fff");
-  const [bgColor, setBgColor] = useState6("transparent");
-  const [thickness, setThickness] = useState6(2);
-  const [lineStyle, setLineStyle] = useState6("solid");
-  const [fillStyle, setFillStyle] = useState6("hachure");
+  const [strokeColor, setStrokeColor] = useState7("#fff");
+  const [bgColor, setBgColor] = useState7("transparent");
+  const [thickness, setThickness] = useState7(2);
+  const [lineStyle, setLineStyle] = useState7("solid");
+  const [fillStyle, setFillStyle] = useState7("hachure");
   const updateStroke = useCallback3((v) => {
     setStrokeColor(v);
     if (window.updateSelectedCircleStyle) window.updateSelectedCircleStyle({ stroke: v });
@@ -1960,12 +2043,54 @@ function CircleSidebar() {
   ] });
 }
 
-// src/react/components/sidebars/LineSidebar.jsx
-import { useState as useState7, useCallback as useCallback4 } from "react";
+// src/react/components/sidebars/PaintBucketSidebar.jsx
+import { useCallback as useCallback4, useEffect as useEffect7, useState as useState8 } from "react";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var COLORS = ["#f0f0f0", "#ffcccb", "#90ee90", "#add8e6", "#FFE4B5", "#DDA0DD", "#A98DEB", "#2d2d2d"];
+var FILLS3 = [
+  { value: "solid", label: "Solid" },
+  { value: "hachure", label: "Hachure" },
+  { value: "cross-hatch", label: "Cross-hatch" },
+  { value: "dots", label: "Dots" },
+  { value: "none", label: "Clear fill" }
+];
+function PaintBucketSidebar() {
+  const activeTool = useSketchStore_default((state) => state.activeTool);
+  const [fillColor, setFillColor] = useState8("#A98DEB");
+  const [fillStyle, setFillStyle] = useState8("solid");
+  const sync = useCallback4((color, style) => {
+    window.paintBucketSettings = window.paintBucketSettings || {};
+    window.paintBucketSettings.fillColor = color;
+    window.paintBucketSettings.fillStyle = style;
+  }, []);
+  useEffect7(() => sync(fillColor, fillStyle), [fillColor, fillStyle, sync]);
+  return /* @__PURE__ */ jsxs9(ShapeSidebar, { visible: activeTool === TOOLS.PAINT_BUCKET, children: [
+    /* @__PURE__ */ jsxs9(ToolbarButton, { tooltip: "Fill color", preview: /* @__PURE__ */ jsx9("span", { className: "h-4 w-4 rounded-md border border-border-light", style: { backgroundColor: fillColor } }), children: [
+      /* @__PURE__ */ jsx9("p", { className: "mb-2 text-xs uppercase tracking-wider text-text-muted", children: "Fill color" }),
+      /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-4 gap-1.5", children: COLORS.map((color) => /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": `Use ${color}`, onClick: () => setFillColor(color), className: `h-7 w-7 cursor-pointer rounded-md border-[1.5px] transition ${fillColor === color ? "scale-110 border-accent" : "border-border-light hover:border-text-dim"}`, style: { backgroundColor: color } }, color)) }),
+      /* @__PURE__ */ jsxs9("label", { className: "mt-2 flex cursor-pointer items-center gap-2 text-xs text-text-muted", children: [
+        /* @__PURE__ */ jsx9("input", { type: "color", value: fillColor, onChange: (event) => setFillColor(event.target.value), className: "h-7 w-9 cursor-pointer rounded border-0 bg-transparent" }),
+        "Custom color"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9(Divider, {}),
+    /* @__PURE__ */ jsxs9(ToolbarButton, { icon: "bxs-brush", tooltip: "Fill style", children: [
+      /* @__PURE__ */ jsx9("p", { className: "mb-2 text-xs uppercase tracking-wider text-text-muted", children: "Fill style" }),
+      /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-0.5", children: FILLS3.map((fill) => /* @__PURE__ */ jsxs9("button", { type: "button", onClick: () => setFillStyle(fill.value), className: `flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs transition ${fillStyle === fill.value ? "bg-accent text-white" : "text-text-secondary hover:bg-surface-hover"}`, children: [
+        /* @__PURE__ */ jsx9("span", { className: "h-1.5 w-1.5 rounded-full bg-current" }),
+        fill.label
+      ] }, fill.value)) })
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "max-w-[185px] px-2 text-[10px] leading-4 text-text-dim", children: "Click a rectangle or circle to apply the selected fill." })
+  ] });
+}
+
+// src/react/components/sidebars/LineSidebar.jsx
+import { useState as useState9, useCallback as useCallback5 } from "react";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var STROKE_COLORS3 = ["#1a1a20", "#ffffff", "#FF8383", "#3A994C", "#56A2E8", "#FFD700", "#FF69B4", "#A855F7"];
 function ColorGrid3({ colors, selected, onSelect }) {
-  return /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-4 gap-1.5", children: colors.map((c) => /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10("div", { className: "grid grid-cols-4 gap-1.5", children: colors.map((c) => /* @__PURE__ */ jsx10(
     "button",
     {
       onClick: () => onSelect(c),
@@ -1979,73 +2104,73 @@ function LineSidebar() {
   const { t } = useTranslation();
   const activeTool = useSketchStore_default((s) => s.activeTool);
   const selectedShapeSidebar = useSketchStore_default((s) => s.selectedShapeSidebar);
-  const [strokeColor, setStrokeColor] = useState7("#fff");
-  const [thickness, setThickness] = useState7(2);
-  const [lineStyle, setLineStyle] = useState7("solid");
-  const [sloppiness, setSloppiness] = useState7(0);
-  const [edge, setEdge] = useState7("smooth");
-  const updateStroke = useCallback4((v) => {
+  const [strokeColor, setStrokeColor] = useState9("#fff");
+  const [thickness, setThickness] = useState9(2);
+  const [lineStyle, setLineStyle] = useState9("solid");
+  const [sloppiness, setSloppiness] = useState9(0);
+  const [edge, setEdge] = useState9("smooth");
+  const updateStroke = useCallback5((v) => {
     setStrokeColor(v);
     if (window.updateSelectedLineStyle) window.updateSelectedLineStyle({ stroke: v });
   }, []);
-  const updateThickness = useCallback4((v) => {
+  const updateThickness = useCallback5((v) => {
     setThickness(v);
     if (window.updateSelectedLineStyle) window.updateSelectedLineStyle({ strokeWidth: v });
   }, []);
-  const updateStyle = useCallback4((v) => {
+  const updateStyle = useCallback5((v) => {
     setLineStyle(v);
     if (window.updateSelectedLineStyle) window.updateSelectedLineStyle({ strokeStyle: v });
   }, []);
-  const updateSloppiness = useCallback4((v) => {
+  const updateSloppiness = useCallback5((v) => {
     setSloppiness(v);
     if (window.updateSelectedLineStyle) window.updateSelectedLineStyle({ sloppiness: v });
   }, []);
-  const updateEdge = useCallback4((v) => {
+  const updateEdge = useCallback5((v) => {
     setEdge(v);
     if (window.updateSelectedLineStyle) window.updateSelectedLineStyle({ edge: v === "smooth" ? 1 : 5 });
   }, []);
-  return /* @__PURE__ */ jsxs9(ShapeSidebar, { visible: activeTool === TOOLS.LINE || selectedShapeSidebar === "line", children: [
-    /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(ShapeSidebar, { visible: activeTool === TOOLS.LINE || selectedShapeSidebar === "line", children: [
+    /* @__PURE__ */ jsxs10(
       ToolbarButton,
       {
         tooltip: t("sidebar.strokeColor"),
-        preview: /* @__PURE__ */ jsx9("span", { className: "w-4 h-4 rounded-md border border-white/20", style: { backgroundColor: strokeColor } }),
+        preview: /* @__PURE__ */ jsx10("span", { className: "w-4 h-4 rounded-md border border-white/20", style: { backgroundColor: strokeColor } }),
         children: [
-          /* @__PURE__ */ jsx9("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.stroke") }),
-          /* @__PURE__ */ jsx9(ColorGrid3, { colors: STROKE_COLORS3, selected: strokeColor, onSelect: updateStroke })
+          /* @__PURE__ */ jsx10("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.stroke") }),
+          /* @__PURE__ */ jsx10(ColorGrid3, { colors: STROKE_COLORS3, selected: strokeColor, onSelect: updateStroke })
         ]
       }
     ),
-    /* @__PURE__ */ jsx9(Divider, {}),
-    /* @__PURE__ */ jsxs9(ToolbarButton, { icon: "bxs-edit-alt", tooltip: t("sidebar.strokeWidth"), children: [
-      /* @__PURE__ */ jsx9("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.width") }),
-      /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-1", children: [1, 2, 4, 7].map((w) => /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(Divider, {}),
+    /* @__PURE__ */ jsxs10(ToolbarButton, { icon: "bxs-edit-alt", tooltip: t("sidebar.strokeWidth"), children: [
+      /* @__PURE__ */ jsx10("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.width") }),
+      /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-1", children: [1, 2, 4, 7].map((w) => /* @__PURE__ */ jsx10(
         "button",
         {
           onClick: () => updateThickness(w),
           className: `w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? "bg-[#7667a8]/20 text-[#7667a8]" : "text-text-muted hover:bg-white/[0.06]"}`,
-          children: /* @__PURE__ */ jsx9("div", { className: "w-5 rounded-full bg-current", style: { height: Math.max(1, w) } })
+          children: /* @__PURE__ */ jsx10("div", { className: "w-5 rounded-full bg-current", style: { height: Math.max(1, w) } })
         },
         w
       )) })
     ] }),
-    /* @__PURE__ */ jsx9(Divider, {}),
-    /* @__PURE__ */ jsxs9(ToolbarButton, { icon: "bxs-minus-circle", tooltip: "Stroke style", children: [
-      /* @__PURE__ */ jsx9("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.style") }),
-      /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-1", children: [{ v: "solid", d: "" }, { v: "dashed", d: "6 4" }, { v: "dotted", d: "2 3" }].map((s) => /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(Divider, {}),
+    /* @__PURE__ */ jsxs10(ToolbarButton, { icon: "bxs-minus-circle", tooltip: "Stroke style", children: [
+      /* @__PURE__ */ jsx10("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.style") }),
+      /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-1", children: [{ v: "solid", d: "" }, { v: "dashed", d: "6 4" }, { v: "dotted", d: "2 3" }].map((s) => /* @__PURE__ */ jsx10(
         "button",
         {
           onClick: () => updateStyle(s.v),
           className: `w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${lineStyle === s.v ? "bg-[#7667a8]/20" : "hover:bg-white/[0.06]"}`,
-          children: /* @__PURE__ */ jsx9("svg", { width: "28", height: "4", viewBox: "0 0 28 4", children: /* @__PURE__ */ jsx9("line", { x1: "0", y1: "2", x2: "28", y2: "2", stroke: "#fff", strokeWidth: "2", strokeDasharray: s.d, strokeLinecap: "round" }) })
+          children: /* @__PURE__ */ jsx10("svg", { width: "28", height: "4", viewBox: "0 0 28 4", children: /* @__PURE__ */ jsx10("line", { x1: "0", y1: "2", x2: "28", y2: "2", stroke: "#fff", strokeWidth: "2", strokeDasharray: s.d, strokeLinecap: "round" }) })
         },
         s.v
       )) })
     ] }),
-    /* @__PURE__ */ jsx9(Divider, {}),
-    /* @__PURE__ */ jsxs9(ToolbarButton, { icon: "bxs-shape-polygon", tooltip: "Sloppiness", children: [
-      /* @__PURE__ */ jsx9("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.sloppiness") }),
-      /* @__PURE__ */ jsx9("div", { className: "flex items-center gap-1", children: [{ v: 0, l: "0" }, { v: 2, l: "2" }, { v: 4, l: "4" }].map((s) => /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(Divider, {}),
+    /* @__PURE__ */ jsxs10(ToolbarButton, { icon: "bxs-shape-polygon", tooltip: "Sloppiness", children: [
+      /* @__PURE__ */ jsx10("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.sloppiness") }),
+      /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-1", children: [{ v: 0, l: "0" }, { v: 2, l: "2" }, { v: 4, l: "4" }].map((s) => /* @__PURE__ */ jsx10(
         "button",
         {
           onClick: () => updateSloppiness(s.v),
@@ -2055,16 +2180,16 @@ function LineSidebar() {
         s.v
       )) })
     ] }),
-    /* @__PURE__ */ jsx9(Divider, {}),
-    /* @__PURE__ */ jsxs9(ToolbarButton, { icon: "bxs-landscape", tooltip: "Edge", children: [
-      /* @__PURE__ */ jsx9("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.edge") }),
-      /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-0.5", children: [{ v: "smooth", i: "bxs-droplet", l: "Smooth" }, { v: "rough", i: "bxs-bolt", l: "Rough" }].map((e) => /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsx10(Divider, {}),
+    /* @__PURE__ */ jsxs10(ToolbarButton, { icon: "bxs-landscape", tooltip: "Edge", children: [
+      /* @__PURE__ */ jsx10("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.edge") }),
+      /* @__PURE__ */ jsx10("div", { className: "flex flex-col gap-0.5", children: [{ v: "smooth", i: "bxs-droplet", l: "Smooth" }, { v: "rough", i: "bxs-bolt", l: "Rough" }].map((e) => /* @__PURE__ */ jsxs10(
         "button",
         {
           onClick: () => updateEdge(e.v),
           className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${edge === e.v ? "bg-accent-blue text-white" : "text-text-secondary hover:bg-white/6"}`,
           children: [
-            /* @__PURE__ */ jsx9("i", { className: `bx ${e.i} text-sm` }),
+            /* @__PURE__ */ jsx10("i", { className: `bx ${e.i} text-sm` }),
             " ",
             e.l
           ]
@@ -2072,14 +2197,14 @@ function LineSidebar() {
         e.v
       )) })
     ] }),
-    /* @__PURE__ */ jsx9(Divider, {}),
-    /* @__PURE__ */ jsx9(LayerControls, {})
+    /* @__PURE__ */ jsx10(Divider, {}),
+    /* @__PURE__ */ jsx10(LayerControls, {})
   ] });
 }
 
 // src/react/components/sidebars/ArrowSidebar.jsx
-import { useState as useState8, useCallback as useCallback5 } from "react";
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useState as useState10, useCallback as useCallback6 } from "react";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var STROKE_COLORS4 = ["#1a1a20", "#ffffff", "#FF8383", "#3A994C", "#56A2E8", "#FFD700", "#FF69B4", "#A855F7"];
 var HEAD_STYLES = [
   { value: "default", svg: '<svg width="22" height="12" viewBox="0 0 24 14"><line x1="2" y1="7" x2="16" y2="7" stroke="#fff" stroke-width="2"/><polyline points="13,2 19,7 13,12" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/></svg>' },
@@ -2088,10 +2213,10 @@ var HEAD_STYLES = [
   { value: "solid", svg: '<svg width="22" height="12" viewBox="0 0 24 14"><line x1="2" y1="7" x2="13" y2="7" stroke="#fff" stroke-width="2"/><polygon points="13,2 21,7 13,12" fill="#fff"/></svg>' }
 ];
 function SvgIcon({ svg }) {
-  return /* @__PURE__ */ jsx10("span", { dangerouslySetInnerHTML: { __html: svg } });
+  return /* @__PURE__ */ jsx11("span", { dangerouslySetInnerHTML: { __html: svg } });
 }
 function ColorGrid4({ colors, selected, onSelect }) {
-  return /* @__PURE__ */ jsx10("div", { className: "grid grid-cols-4 gap-1.5", children: colors.map((c) => /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11("div", { className: "grid grid-cols-4 gap-1.5", children: colors.map((c) => /* @__PURE__ */ jsx11(
     "button",
     {
       onClick: () => onSelect(c),
@@ -2105,118 +2230,118 @@ function ArrowSidebar() {
   const { t } = useTranslation();
   const activeTool = useSketchStore_default((s) => s.activeTool);
   const selectedShapeSidebar = useSketchStore_default((s) => s.selectedShapeSidebar);
-  const [headStyle, setHeadStyle] = useState8("default");
-  const [strokeColor, setStrokeColor] = useState8("#fff");
-  const [thickness, setThickness] = useState8(2);
-  const [outlineStyle, setOutlineStyle] = useState8("solid");
-  const [arrowType, setArrowType] = useState8("straight");
-  const [curvature, setCurvature] = useState8(20);
-  const updateHead = useCallback5((v) => {
+  const [headStyle, setHeadStyle] = useState10("default");
+  const [strokeColor, setStrokeColor] = useState10("#fff");
+  const [thickness, setThickness] = useState10(2);
+  const [outlineStyle, setOutlineStyle] = useState10("solid");
+  const [arrowType, setArrowType] = useState10("straight");
+  const [curvature, setCurvature] = useState10(20);
+  const updateHead = useCallback6((v) => {
     setHeadStyle(v);
     if (window.arrowToolSettings) window.arrowToolSettings.headStyle = v;
     if (window.updateSelectedArrowStyle) window.updateSelectedArrowStyle({ arrowHeadStyle: v });
   }, []);
-  const updateStroke = useCallback5((v) => {
+  const updateStroke = useCallback6((v) => {
     setStrokeColor(v);
     if (window.arrowToolSettings) window.arrowToolSettings.strokeColor = v;
     if (window.updateSelectedArrowStyle) window.updateSelectedArrowStyle({ stroke: v });
   }, []);
-  const updateThickness = useCallback5((v) => {
+  const updateThickness = useCallback6((v) => {
     setThickness(v);
     if (window.arrowToolSettings) window.arrowToolSettings.strokeWidth = v;
     if (window.updateSelectedArrowStyle) window.updateSelectedArrowStyle({ strokeWidth: v });
   }, []);
-  const updateOutline = useCallback5((v) => {
+  const updateOutline = useCallback6((v) => {
     setOutlineStyle(v);
     if (window.arrowToolSettings) window.arrowToolSettings.outlineStyle = v;
     if (window.updateSelectedArrowStyle) window.updateSelectedArrowStyle({ arrowOutlineStyle: v });
   }, []);
-  const updateType = useCallback5((v) => {
+  const updateType = useCallback6((v) => {
     setArrowType(v);
     if (window.arrowToolSettings) window.arrowToolSettings.arrowCurved = v;
     if (window.updateSelectedArrowStyle) window.updateSelectedArrowStyle({ arrowCurved: v });
   }, []);
-  const updateCurvature = useCallback5((v) => {
+  const updateCurvature = useCallback6((v) => {
     setCurvature(v);
     if (window.arrowToolSettings) window.arrowToolSettings.curveAmount = v;
     if (window.updateSelectedArrowStyle) window.updateSelectedArrowStyle({ arrowCurveAmount: v });
   }, []);
-  return /* @__PURE__ */ jsxs10(ShapeSidebar, { visible: activeTool === TOOLS.ARROW || selectedShapeSidebar === "arrow", children: [
-    /* @__PURE__ */ jsxs10(ToolbarButton, { icon: "bxs-right-arrow", tooltip: "Arrow head", children: [
-      /* @__PURE__ */ jsx10("p", { className: "text-xs text-text-secondary uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.head") }),
-      /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-1", children: HEAD_STYLES.map((h) => /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs11(ShapeSidebar, { visible: activeTool === TOOLS.ARROW || selectedShapeSidebar === "arrow", children: [
+    /* @__PURE__ */ jsxs11(ToolbarButton, { icon: "bxs-right-arrow", tooltip: "Arrow head", children: [
+      /* @__PURE__ */ jsx11("p", { className: "text-xs text-text-secondary uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.head") }),
+      /* @__PURE__ */ jsx11("div", { className: "flex items-center gap-1", children: HEAD_STYLES.map((h) => /* @__PURE__ */ jsx11(
         "button",
         {
           onClick: () => updateHead(h.value),
           className: `w-10 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${headStyle === h.value ? "bg-[#7667a8]/20 text-[#7667a8]" : "text-text-secondary hover:bg-white/[0.06]"}`,
-          children: /* @__PURE__ */ jsx10(SvgIcon, { svg: h.svg })
+          children: /* @__PURE__ */ jsx11(SvgIcon, { svg: h.svg })
         },
         h.value
       )) })
     ] }),
-    /* @__PURE__ */ jsx10(Divider, {}),
-    /* @__PURE__ */ jsxs10(
+    /* @__PURE__ */ jsx11(Divider, {}),
+    /* @__PURE__ */ jsxs11(
       ToolbarButton,
       {
         tooltip: t("sidebar.strokeColor"),
-        preview: /* @__PURE__ */ jsx10("span", { className: "w-4 h-4 rounded-md border border-white/20", style: { backgroundColor: strokeColor } }),
+        preview: /* @__PURE__ */ jsx11("span", { className: "w-4 h-4 rounded-md border border-white/20", style: { backgroundColor: strokeColor } }),
         children: [
-          /* @__PURE__ */ jsx10("p", { className: "text-xs text-text-secondary uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.stroke") }),
-          /* @__PURE__ */ jsx10(ColorGrid4, { colors: STROKE_COLORS4, selected: strokeColor, onSelect: updateStroke })
+          /* @__PURE__ */ jsx11("p", { className: "text-xs text-text-secondary uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.stroke") }),
+          /* @__PURE__ */ jsx11(ColorGrid4, { colors: STROKE_COLORS4, selected: strokeColor, onSelect: updateStroke })
         ]
       }
     ),
-    /* @__PURE__ */ jsx10(Divider, {}),
-    /* @__PURE__ */ jsxs10(ToolbarButton, { icon: "bxs-edit-alt", tooltip: t("sidebar.strokeWidth"), children: [
-      /* @__PURE__ */ jsx10("p", { className: "text-xs text-text-secondary uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.width") }),
-      /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-1", children: [1, 2, 4, 7].map((w) => /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(Divider, {}),
+    /* @__PURE__ */ jsxs11(ToolbarButton, { icon: "bxs-edit-alt", tooltip: t("sidebar.strokeWidth"), children: [
+      /* @__PURE__ */ jsx11("p", { className: "text-xs text-text-secondary uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.width") }),
+      /* @__PURE__ */ jsx11("div", { className: "flex items-center gap-1", children: [1, 2, 4, 7].map((w) => /* @__PURE__ */ jsx11(
         "button",
         {
           onClick: () => updateThickness(w),
           className: `w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? "bg-[#7667a8]/20 text-[#7667a8]" : "text-text-secondary hover:bg-white/[0.06]"}`,
-          children: /* @__PURE__ */ jsx10("div", { className: "w-5 rounded-full bg-current", style: { height: Math.max(1, w) } })
+          children: /* @__PURE__ */ jsx11("div", { className: "w-5 rounded-full bg-current", style: { height: Math.max(1, w) } })
         },
         w
       )) })
     ] }),
-    /* @__PURE__ */ jsx10(Divider, {}),
-    /* @__PURE__ */ jsxs10(ToolbarButton, { icon: "bxs-minus-circle", tooltip: "Stroke style", children: [
-      /* @__PURE__ */ jsx10("p", { className: "text-xs text-text-secondary uppercase tracking-wider mb-2", children: t("sidebar.style") }),
-      /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-1", children: [{ v: "solid", d: "" }, { v: "dashed", d: "6 4" }, { v: "dotted", d: "2 3" }].map((s) => /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(Divider, {}),
+    /* @__PURE__ */ jsxs11(ToolbarButton, { icon: "bxs-minus-circle", tooltip: "Stroke style", children: [
+      /* @__PURE__ */ jsx11("p", { className: "text-xs text-text-secondary uppercase tracking-wider mb-2", children: t("sidebar.style") }),
+      /* @__PURE__ */ jsx11("div", { className: "flex items-center gap-1", children: [{ v: "solid", d: "" }, { v: "dashed", d: "6 4" }, { v: "dotted", d: "2 3" }].map((s) => /* @__PURE__ */ jsx11(
         "button",
         {
           onClick: () => updateOutline(s.v),
           className: `w-11 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${outlineStyle === s.v ? "bg-[#7667a8]/20" : "hover:bg-white/[0.06]"}`,
-          children: /* @__PURE__ */ jsx10("svg", { width: "28", height: "4", viewBox: "0 0 28 4", children: /* @__PURE__ */ jsx10("line", { x1: "0", y1: "2", x2: "28", y2: "2", stroke: "#fff", strokeWidth: "2", strokeDasharray: s.d, strokeLinecap: "round" }) })
+          children: /* @__PURE__ */ jsx11("svg", { width: "28", height: "4", viewBox: "0 0 28 4", children: /* @__PURE__ */ jsx11("line", { x1: "0", y1: "2", x2: "28", y2: "2", stroke: "#fff", strokeWidth: "2", strokeDasharray: s.d, strokeLinecap: "round" }) })
         },
         s.v
       )) })
     ] }),
-    /* @__PURE__ */ jsx10(Divider, {}),
-    /* @__PURE__ */ jsxs10(ToolbarButton, { icon: "bxs-share-alt", tooltip: "Arrow type", children: [
-      /* @__PURE__ */ jsx10("p", { className: "text-xs text-text-secondary uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.type") }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx11(Divider, {}),
+    /* @__PURE__ */ jsxs11(ToolbarButton, { icon: "bxs-share-alt", tooltip: "Arrow type", children: [
+      /* @__PURE__ */ jsx11("p", { className: "text-xs text-text-secondary uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.type") }),
+      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-0.5", children: [
         [
           { v: "straight", i: "bxs-right-arrow-alt", l: "Straight" },
           { v: "curved", i: "bxs-analyse", l: "Curved" },
           { v: "elbow", i: "bxs-network-chart", l: "Elbow" }
-        ].map((a) => /* @__PURE__ */ jsxs10(
+        ].map((a) => /* @__PURE__ */ jsxs11(
           "button",
           {
             onClick: () => updateType(a.v),
             className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${arrowType === a.v ? "bg-[#7667a8] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
             children: [
-              /* @__PURE__ */ jsx10("i", { className: `bx ${a.i} text-sm` }),
+              /* @__PURE__ */ jsx11("i", { className: `bx ${a.i} text-sm` }),
               " ",
               a.l
             ]
           },
           a.v
         )),
-        arrowType === "curved" && /* @__PURE__ */ jsxs10(Fragment5, { children: [
-          /* @__PURE__ */ jsx10("div", { className: "w-full h-px bg-white/[0.08] my-1" }),
-          /* @__PURE__ */ jsx10("p", { className: "text-[9px] text-text-dim uppercase tracking-wider mb-1", children: "Curvature" }),
-          /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-1", children: [{ v: 8, l: "Lo" }, { v: 20, l: "Md" }, { v: 40, l: "Hi" }].map((c) => /* @__PURE__ */ jsx10(
+        arrowType === "curved" && /* @__PURE__ */ jsxs11(Fragment5, { children: [
+          /* @__PURE__ */ jsx11("div", { className: "w-full h-px bg-white/[0.08] my-1" }),
+          /* @__PURE__ */ jsx11("p", { className: "text-[9px] text-text-dim uppercase tracking-wider mb-1", children: "Curvature" }),
+          /* @__PURE__ */ jsx11("div", { className: "flex items-center gap-1", children: [{ v: 8, l: "Lo" }, { v: 20, l: "Md" }, { v: 40, l: "Hi" }].map((c) => /* @__PURE__ */ jsx11(
             "button",
             {
               onClick: () => updateCurvature(c.v),
@@ -2228,18 +2353,18 @@ function ArrowSidebar() {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx10(Divider, {}),
-    /* @__PURE__ */ jsx10(LayerControls, {})
+    /* @__PURE__ */ jsx11(Divider, {}),
+    /* @__PURE__ */ jsx11(LayerControls, {})
   ] });
 }
 
 // src/react/components/sidebars/PaintbrushSidebar.jsx
-import { useState as useState9, useCallback as useCallback6 } from "react";
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useState as useState11, useCallback as useCallback7 } from "react";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var STROKE_COLORS5 = ["#1a1a20", "#ffffff", "#FF8383", "#3A994C", "#56A2E8", "#FFD700", "#FF69B4", "#A855F7"];
 var TAPER_MAP = { uniform: 0, pen: 0.5, brush: 0.8 };
 function ColorGrid5({ colors, selected, onSelect }) {
-  return /* @__PURE__ */ jsx11("div", { className: "grid grid-cols-4 gap-1.5", children: colors.map((c) => /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-4 gap-1.5", children: colors.map((c) => /* @__PURE__ */ jsx12(
     "button",
     {
       onClick: () => onSelect(c),
@@ -2253,71 +2378,71 @@ function PaintbrushSidebar() {
   const { t } = useTranslation();
   const activeTool = useSketchStore_default((s) => s.activeTool);
   const selectedShapeSidebar = useSketchStore_default((s) => s.selectedShapeSidebar);
-  const [strokeColor, setStrokeColor] = useState9("#fff");
-  const [thickness, setThickness] = useState9(2);
-  const [lineStyle, setLineStyle] = useState9("solid");
-  const [taper, setTaper] = useState9("uniform");
-  const [roughness, setRoughness] = useState9("smooth");
-  const [opacity, setOpacity] = useState9(1);
-  const updateStroke = useCallback6((v) => {
+  const [strokeColor, setStrokeColor] = useState11("#fff");
+  const [thickness, setThickness] = useState11(2);
+  const [lineStyle, setLineStyle] = useState11("solid");
+  const [taper, setTaper] = useState11("uniform");
+  const [roughness, setRoughness] = useState11("smooth");
+  const [opacity, setOpacity] = useState11(1);
+  const updateStroke = useCallback7((v) => {
     setStrokeColor(v);
     if (window.updateSelectedFreehandStyle) window.updateSelectedFreehandStyle({ stroke: v });
   }, []);
-  const updateThickness = useCallback6((v) => {
+  const updateThickness = useCallback7((v) => {
     setThickness(v);
     if (window.updateSelectedFreehandStyle) window.updateSelectedFreehandStyle({ strokeWidth: v });
   }, []);
-  const updateTaper = useCallback6((v) => {
+  const updateTaper = useCallback7((v) => {
     setTaper(v);
     if (window.updateSelectedFreehandStyle) window.updateSelectedFreehandStyle({ thinning: TAPER_MAP[v] });
   }, []);
-  const updateRoughness = useCallback6((v) => {
+  const updateRoughness = useCallback7((v) => {
     setRoughness(v);
     if (window.updateSelectedFreehandStyle) window.updateSelectedFreehandStyle({ roughness: v });
   }, []);
-  const updateOpacity = useCallback6((v) => {
+  const updateOpacity = useCallback7((v) => {
     setOpacity(v);
     if (window.updateSelectedFreehandStyle) window.updateSelectedFreehandStyle({ opacity: v });
   }, []);
-  return /* @__PURE__ */ jsxs11(ShapeSidebar, { visible: activeTool === TOOLS.FREEHAND || selectedShapeSidebar === "paintbrush", children: [
-    /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(ShapeSidebar, { visible: activeTool === TOOLS.FREEHAND || activeTool === TOOLS.DRAW_SHAPE || selectedShapeSidebar === "paintbrush", children: [
+    /* @__PURE__ */ jsxs12(
       ToolbarButton,
       {
         tooltip: t("sidebar.strokeColor"),
-        preview: /* @__PURE__ */ jsx11("span", { className: "w-4 h-4 rounded-md border border-white/20", style: { backgroundColor: strokeColor } }),
+        preview: /* @__PURE__ */ jsx12("span", { className: "w-4 h-4 rounded-md border border-white/20", style: { backgroundColor: strokeColor } }),
         children: [
-          /* @__PURE__ */ jsx11("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.stroke") }),
-          /* @__PURE__ */ jsx11(ColorGrid5, { colors: STROKE_COLORS5, selected: strokeColor, onSelect: updateStroke })
+          /* @__PURE__ */ jsx12("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.stroke") }),
+          /* @__PURE__ */ jsx12(ColorGrid5, { colors: STROKE_COLORS5, selected: strokeColor, onSelect: updateStroke })
         ]
       }
     ),
-    /* @__PURE__ */ jsx11(Divider, {}),
-    /* @__PURE__ */ jsxs11(ToolbarButton, { icon: "bxs-edit-alt", tooltip: t("sidebar.strokeWidth"), children: [
-      /* @__PURE__ */ jsx11("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.width") }),
-      /* @__PURE__ */ jsx11("div", { className: "flex items-center gap-1", children: [1, 2, 4, 7].map((w) => /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(Divider, {}),
+    /* @__PURE__ */ jsxs12(ToolbarButton, { icon: "bxs-edit-alt", tooltip: t("sidebar.strokeWidth"), children: [
+      /* @__PURE__ */ jsx12("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.width") }),
+      /* @__PURE__ */ jsx12("div", { className: "flex items-center gap-1", children: [1, 2, 4, 7].map((w) => /* @__PURE__ */ jsx12(
         "button",
         {
           onClick: () => updateThickness(w),
           className: `w-9 h-8 flex items-center justify-center rounded-lg transition-all duration-100 ${thickness === w ? "bg-[#7667a8]/20 text-[#7667a8]" : "text-text-muted hover:bg-white/[0.06]"}`,
-          children: /* @__PURE__ */ jsx11("div", { className: "w-5 rounded-full bg-current", style: { height: Math.max(1, w) } })
+          children: /* @__PURE__ */ jsx12("div", { className: "w-5 rounded-full bg-current", style: { height: Math.max(1, w) } })
         },
         w
       )) })
     ] }),
-    /* @__PURE__ */ jsx11(Divider, {}),
-    /* @__PURE__ */ jsxs11(ToolbarButton, { icon: "bxs-pen", tooltip: "Taper", children: [
-      /* @__PURE__ */ jsx11("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.taper") }),
-      /* @__PURE__ */ jsx11("div", { className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx12(Divider, {}),
+    /* @__PURE__ */ jsxs12(ToolbarButton, { icon: "bxs-pen", tooltip: "Taper", children: [
+      /* @__PURE__ */ jsx12("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.taper") }),
+      /* @__PURE__ */ jsx12("div", { className: "flex flex-col gap-0.5", children: [
         { v: "uniform", i: "bxs-minus-circle", l: "Uniform" },
         { v: "pen", i: "bxs-pen", l: "Pen" },
         { v: "brush", i: "bxs-brush", l: "Brush" }
-      ].map((t2) => /* @__PURE__ */ jsxs11(
+      ].map((t2) => /* @__PURE__ */ jsxs12(
         "button",
         {
           onClick: () => updateTaper(t2.v),
           className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${taper === t2.v ? "bg-[#7667a8] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
           children: [
-            /* @__PURE__ */ jsx11("i", { className: `bx ${t2.i} text-sm` }),
+            /* @__PURE__ */ jsx12("i", { className: `bx ${t2.i} text-sm` }),
             " ",
             t2.l
           ]
@@ -2325,20 +2450,20 @@ function PaintbrushSidebar() {
         t2.v
       )) })
     ] }),
-    /* @__PURE__ */ jsx11(Divider, {}),
-    /* @__PURE__ */ jsxs11(ToolbarButton, { icon: "bxs-shape-polygon", tooltip: "Roughness", children: [
-      /* @__PURE__ */ jsx11("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.roughness") }),
-      /* @__PURE__ */ jsx11("div", { className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx12(Divider, {}),
+    /* @__PURE__ */ jsxs12(ToolbarButton, { icon: "bxs-shape-polygon", tooltip: "Roughness", children: [
+      /* @__PURE__ */ jsx12("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.roughness") }),
+      /* @__PURE__ */ jsx12("div", { className: "flex flex-col gap-0.5", children: [
         { v: "smooth", i: "bxs-droplet", l: "Smooth" },
         { v: "medium", i: "bxs-leaf", l: "Medium" },
         { v: "rough", i: "bxs-bolt", l: "Rough" }
-      ].map((r) => /* @__PURE__ */ jsxs11(
+      ].map((r) => /* @__PURE__ */ jsxs12(
         "button",
         {
           onClick: () => updateRoughness(r.v),
           className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${roughness === r.v ? "bg-[#7667a8] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
           children: [
-            /* @__PURE__ */ jsx11("i", { className: `bx ${r.i} text-sm` }),
+            /* @__PURE__ */ jsx12("i", { className: `bx ${r.i} text-sm` }),
             " ",
             r.l
           ]
@@ -2346,14 +2471,14 @@ function PaintbrushSidebar() {
         r.v
       )) })
     ] }),
-    /* @__PURE__ */ jsx11(Divider, {}),
-    /* @__PURE__ */ jsxs11(ToolbarButton, { icon: "bxs-sun", tooltip: t("sidebar.opacity"), children: [
-      /* @__PURE__ */ jsxs11("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: [
+    /* @__PURE__ */ jsx12(Divider, {}),
+    /* @__PURE__ */ jsxs12(ToolbarButton, { icon: "bxs-sun", tooltip: t("sidebar.opacity"), children: [
+      /* @__PURE__ */ jsxs12("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: [
         "Opacity ",
         Math.round(opacity * 100),
         "%"
       ] }),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(
         "input",
         {
           type: "range",
@@ -2366,14 +2491,14 @@ function PaintbrushSidebar() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx11(Divider, {}),
-    /* @__PURE__ */ jsx11(LayerControls, {})
+    /* @__PURE__ */ jsx12(Divider, {}),
+    /* @__PURE__ */ jsx12(LayerControls, {})
   ] });
 }
 
 // src/react/components/sidebars/TextSidebar.jsx
-import { useState as useState10, useCallback as useCallback7, useEffect as useEffect6 } from "react";
-import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useState as useState12, useCallback as useCallback8, useEffect as useEffect8 } from "react";
+import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 var TEXT_COLORS = ["#1a1a20", "#ffffff", "#FF8383", "#3A994C", "#56A2E8", "#FFD700", "#FF69B4", "#A855F7"];
 var FONTS = [
   { value: "lixFont", label: "Lix" },
@@ -2408,12 +2533,12 @@ function TextSidebar() {
   const { t } = useTranslation();
   const activeTool = useSketchStore_default((s) => s.activeTool);
   const selectedShapeSidebar = useSketchStore_default((s) => s.selectedShapeSidebar);
-  const [textColor, setTextColor] = useState10("#fff");
-  const [fontSize, setFontSize] = useState10("S");
-  const [font, setFont] = useState10("lixFont");
-  const [codeMode, setCodeMode] = useState10(false);
-  const [language, setLanguage] = useState10("javascript");
-  useEffect6(() => {
+  const [textColor, setTextColor] = useState12("#fff");
+  const [fontSize, setFontSize] = useState12("S");
+  const [font, setFont] = useState12("lixFont");
+  const [codeMode, setCodeMode] = useState12(false);
+  const [language, setLanguage] = useState12("javascript");
+  useEffect8(() => {
     window.__onCodeModeChanged = (isCode) => {
       setCodeMode(isCode);
       window.isTextInCodeMode = isCode;
@@ -2422,19 +2547,19 @@ function TextSidebar() {
       window.__onCodeModeChanged = null;
     };
   }, []);
-  const updateColor = useCallback7((c) => {
+  const updateColor = useCallback8((c) => {
     setTextColor(c);
     if (window.updateSelectedTextStyle) window.updateSelectedTextStyle({ color: c });
   }, []);
-  const updateFont = useCallback7((f) => {
+  const updateFont = useCallback8((f) => {
     setFont(f);
     if (window.updateSelectedTextStyle) window.updateSelectedTextStyle({ font: f });
   }, []);
-  const updateSize = useCallback7((s) => {
+  const updateSize = useCallback8((s) => {
     setFontSize(s);
     if (window.updateSelectedTextStyle) window.updateSelectedTextStyle({ fontSize: SIZE_MAP[s] });
   }, []);
-  const toggleCodeMode = useCallback7(() => {
+  const toggleCodeMode = useCallback8(() => {
     const next = !codeMode;
     setCodeMode(next);
     window.isTextInCodeMode = next;
@@ -2444,21 +2569,21 @@ function TextSidebar() {
       if (window.__convertCodeToText) window.__convertCodeToText();
     }
   }, [codeMode]);
-  const updateLanguage = useCallback7((lang) => {
+  const updateLanguage = useCallback8((lang) => {
     setLanguage(lang);
     if (window.__setCodeLanguage) window.__setCodeLanguage(lang);
   }, []);
   const visible = activeTool === TOOLS.TEXT || activeTool === TOOLS.CODE || selectedShapeSidebar === "text";
-  return /* @__PURE__ */ jsxs12(Fragment6, { children: [
-    /* @__PURE__ */ jsxs12(ShapeSidebar, { visible, children: [
-      /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    /* @__PURE__ */ jsxs13(ShapeSidebar, { visible, children: [
+      /* @__PURE__ */ jsxs13(
         ToolbarButton,
         {
           tooltip: t("sidebar.textColor"),
-          preview: /* @__PURE__ */ jsx12("span", { className: "w-4 h-4 rounded-md border border-white/20", style: { backgroundColor: textColor } }),
+          preview: /* @__PURE__ */ jsx13("span", { className: "w-4 h-4 rounded-md border border-white/20", style: { backgroundColor: textColor } }),
           children: [
-            /* @__PURE__ */ jsx12("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.color") }),
-            /* @__PURE__ */ jsx12("div", { className: "grid grid-cols-4 gap-1.5", children: TEXT_COLORS.map((c) => /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.color") }),
+            /* @__PURE__ */ jsx13("div", { className: "grid grid-cols-4 gap-1.5", children: TEXT_COLORS.map((c) => /* @__PURE__ */ jsx13(
               "button",
               {
                 onClick: () => updateColor(c),
@@ -2470,11 +2595,11 @@ function TextSidebar() {
           ]
         }
       ),
-      !codeMode && /* @__PURE__ */ jsxs12(Fragment6, { children: [
-        /* @__PURE__ */ jsx12(Divider, {}),
-        /* @__PURE__ */ jsxs12(ToolbarButton, { icon: "bxs-font-family", tooltip: t("sidebar.font"), children: [
-          /* @__PURE__ */ jsx12("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.font") }),
-          /* @__PURE__ */ jsx12("div", { className: "flex flex-col gap-0.5", children: FONTS.map((f) => /* @__PURE__ */ jsx12(
+      !codeMode && /* @__PURE__ */ jsxs13(Fragment6, { children: [
+        /* @__PURE__ */ jsx13(Divider, {}),
+        /* @__PURE__ */ jsxs13(ToolbarButton, { icon: "bxs-font-family", tooltip: t("sidebar.font"), children: [
+          /* @__PURE__ */ jsx13("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.font") }),
+          /* @__PURE__ */ jsx13("div", { className: "flex flex-col gap-0.5", children: FONTS.map((f) => /* @__PURE__ */ jsx13(
             "button",
             {
               onClick: () => updateFont(f.value),
@@ -2486,10 +2611,10 @@ function TextSidebar() {
           )) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx12(Divider, {}),
-      /* @__PURE__ */ jsxs12(ToolbarButton, { icon: "bxs-chevrons-up", tooltip: t("sidebar.size"), children: [
-        /* @__PURE__ */ jsx12("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.size") }),
-        /* @__PURE__ */ jsx12("div", { className: "flex items-center gap-1", children: ["S", "M", "L", "XL"].map((s) => /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13(Divider, {}),
+      /* @__PURE__ */ jsxs13(ToolbarButton, { icon: "bxs-chevrons-up", tooltip: t("sidebar.size"), children: [
+        /* @__PURE__ */ jsx13("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.size") }),
+        /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-1", children: ["S", "M", "L", "XL"].map((s) => /* @__PURE__ */ jsx13(
           "button",
           {
             onClick: () => updateSize(s),
@@ -2499,22 +2624,22 @@ function TextSidebar() {
           s
         )) })
       ] }),
-      /* @__PURE__ */ jsx12(Divider, {}),
-      /* @__PURE__ */ jsxs12(ToolbarButton, { icon: "bxs-terminal", tooltip: t("sidebar.codeMode"), children: [
-        /* @__PURE__ */ jsx12("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.code") }),
-        /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsxs12(
+      /* @__PURE__ */ jsx13(Divider, {}),
+      /* @__PURE__ */ jsxs13(ToolbarButton, { icon: "bxs-terminal", tooltip: t("sidebar.codeMode"), children: [
+        /* @__PURE__ */ jsx13("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.code") }),
+        /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs13(
             "button",
             {
               onClick: toggleCodeMode,
               className: `flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${codeMode ? "bg-[#7667a8] text-white" : "text-text-secondary hover:bg-white/[0.06]"}`,
               children: [
-                /* @__PURE__ */ jsx12("div", { className: `w-6 h-3 rounded-full transition-all duration-150 relative ${codeMode ? "bg-white/30" : "bg-white/10"}`, children: /* @__PURE__ */ jsx12("div", { className: `absolute top-0.5 w-2 h-2 rounded-full bg-white transition-all duration-150 ${codeMode ? "left-3.5" : "left-0.5"}` }) }),
+                /* @__PURE__ */ jsx13("div", { className: `w-6 h-3 rounded-full transition-all duration-150 relative ${codeMode ? "bg-white/30" : "bg-white/10"}`, children: /* @__PURE__ */ jsx13("div", { className: `absolute top-0.5 w-2 h-2 rounded-full bg-white transition-all duration-150 ${codeMode ? "left-3.5" : "left-0.5"}` }) }),
                 codeMode ? t("sidebar.on") : t("sidebar.off")
               ]
             }
           ),
-          codeMode && /* @__PURE__ */ jsx12("div", { className: "flex flex-wrap gap-1 max-w-[180px]", children: LANGUAGES.map((lang) => /* @__PURE__ */ jsx12(
+          codeMode && /* @__PURE__ */ jsx13("div", { className: "flex flex-wrap gap-1 max-w-[180px]", children: LANGUAGES.map((lang) => /* @__PURE__ */ jsx13(
             "button",
             {
               onClick: () => updateLanguage(lang),
@@ -2525,21 +2650,21 @@ function TextSidebar() {
           )) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx12(Divider, {}),
-      /* @__PURE__ */ jsx12(LayerControls, {})
+      /* @__PURE__ */ jsx13(Divider, {}),
+      /* @__PURE__ */ jsx13(LayerControls, {})
     ] }),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       "div",
       {
         className: `absolute bottom-7 left-1/2 -translate-x-1/2 z-[998] font-[lixFont] transition-all duration-200 ${visible ? "opacity-100 translate-y-0" : "opacity-0 pointer-events-none translate-y-2"}`,
-        children: /* @__PURE__ */ jsxs12("p", { className: "text-[10px] text-white/30 leading-relaxed text-center whitespace-nowrap", children: [
-          /* @__PURE__ */ jsx12("span", { className: "text-white/50", children: "Ctrl+Enter" }),
+        children: /* @__PURE__ */ jsxs13("p", { className: "text-[10px] text-white/30 leading-relaxed text-center whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx13("span", { className: "text-white/50", children: "Ctrl+Enter" }),
           " / ",
-          /* @__PURE__ */ jsx12("span", { className: "text-white/50", children: "Enter" }),
+          /* @__PURE__ */ jsx13("span", { className: "text-white/50", children: "Enter" }),
           " \u2014 ",
           t("sidebar.renderText"),
           " \xA0\xA0",
-          /* @__PURE__ */ jsx12("span", { className: "text-white/50", children: "Shift+Enter" }),
+          /* @__PURE__ */ jsx13("span", { className: "text-white/50", children: "Shift+Enter" }),
           " \u2014 ",
           t("sidebar.newLine")
         ] })
@@ -2549,8 +2674,8 @@ function TextSidebar() {
 }
 
 // src/react/components/sidebars/FrameSidebar.jsx
-import { useState as useState11, useCallback as useCallback8, useEffect as useEffect7 } from "react";
-import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useState as useState13, useCallback as useCallback9, useEffect as useEffect9 } from "react";
+import { Fragment as Fragment7, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 var FILL_STYLES = [
   { id: "transparent", label: "None", icon: "bx-x" },
   { id: "solid", label: "Solid", icon: "bxs-square" },
@@ -2569,11 +2694,11 @@ function FrameSidebar() {
   const activeTool = useSketchStore_default((s) => s.activeTool);
   const selectedShapeSidebar = useSketchStore_default((s) => s.selectedShapeSidebar);
   const toggleAIModal = useUIStore_default((s) => s.toggleAIModal);
-  const [frameName, setFrameName] = useState11("Frame 1");
-  const [isGraph, setIsGraph] = useState11(false);
-  const [fillStyle, setFillStyle] = useState11("transparent");
-  const [fillColor, setFillColor] = useState11("#1e1e28");
-  useEffect7(() => {
+  const [frameName, setFrameName] = useState13("Frame 1");
+  const [isGraph, setIsGraph] = useState13(false);
+  const [fillStyle, setFillStyle] = useState13("transparent");
+  const [fillColor, setFillColor] = useState13("#1e1e28");
+  useEffect9(() => {
     if (selectedShapeSidebar === "frame" || activeTool === TOOLS.FRAME) {
       const shape = typeof window !== "undefined" ? window.currentShape : null;
       if (shape && shape.shapeName === "frame") {
@@ -2588,7 +2713,7 @@ function FrameSidebar() {
       }
     }
   }, [selectedShapeSidebar, activeTool]);
-  const updateName = useCallback8((e) => {
+  const updateName = useCallback9((e) => {
     const name = e.target.value;
     setFrameName(name);
     const shape = window.currentShape;
@@ -2597,7 +2722,7 @@ function FrameSidebar() {
       shape.draw();
     }
   }, []);
-  const updateFillStyle = useCallback8((style) => {
+  const updateFillStyle = useCallback9((style) => {
     setFillStyle(style);
     const shape = window.currentShape;
     if (shape && shape.shapeName === "frame") {
@@ -2605,7 +2730,7 @@ function FrameSidebar() {
       shape.draw();
     }
   }, []);
-  const updateFillColor = useCallback8((color) => {
+  const updateFillColor = useCallback9((color) => {
     setFillColor(color);
     const shape = window.currentShape;
     if (shape && shape.shapeName === "frame") {
@@ -2613,23 +2738,23 @@ function FrameSidebar() {
       shape.draw();
     }
   }, []);
-  const resizeToFit = useCallback8(() => {
+  const resizeToFit = useCallback9(() => {
     const shape = window.currentShape;
     if (shape && shape.shapeName === "frame" && typeof shape.resizeToFitContents === "function") {
       shape.resizeToFitContents();
     }
   }, []);
-  const handleAIEdit = useCallback8(() => {
+  const handleAIEdit = useCallback9(() => {
     const shape = window.currentShape;
     if (shape && shape.shapeName === "frame") {
       window.__aiEditTargetFrame = shape;
       toggleAIModal();
     }
   }, [toggleAIModal]);
-  return /* @__PURE__ */ jsxs13(ShapeSidebar, { visible: activeTool === TOOLS.FRAME || selectedShapeSidebar === "frame", children: [
-    /* @__PURE__ */ jsxs13(ToolbarButton, { icon: "bxs-rename", tooltip: "Frame name", children: [
-      /* @__PURE__ */ jsx13("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.name") }),
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs14(ShapeSidebar, { visible: activeTool === TOOLS.FRAME || selectedShapeSidebar === "frame", children: [
+    /* @__PURE__ */ jsxs14(ToolbarButton, { icon: "bxs-rename", tooltip: "Frame name", children: [
+      /* @__PURE__ */ jsx14("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.name") }),
+      /* @__PURE__ */ jsx14(
         "input",
         {
           type: "text",
@@ -2640,26 +2765,26 @@ function FrameSidebar() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx13(Divider, {}),
-    /* @__PURE__ */ jsxs13(ToolbarButton, { icon: "bxs-palette", tooltip: "Fill style", children: [
-      /* @__PURE__ */ jsx13("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.background") }),
-      /* @__PURE__ */ jsx13("div", { className: "flex gap-1 mb-2.5", children: FILL_STYLES.map((s) => /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsx14(Divider, {}),
+    /* @__PURE__ */ jsxs14(ToolbarButton, { icon: "bxs-palette", tooltip: "Fill style", children: [
+      /* @__PURE__ */ jsx14("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.background") }),
+      /* @__PURE__ */ jsx14("div", { className: "flex gap-1 mb-2.5", children: FILL_STYLES.map((s) => /* @__PURE__ */ jsxs14(
         "button",
         {
           onClick: () => updateFillStyle(s.id),
           title: s.label,
           className: `flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs transition-all duration-100 ${fillStyle === s.id ? "bg-white/[0.12] text-white" : "text-text-muted hover:text-white hover:bg-white/[0.06]"}`,
           children: [
-            /* @__PURE__ */ jsx13("i", { className: `bx ${s.icon} text-sm` }),
+            /* @__PURE__ */ jsx14("i", { className: `bx ${s.icon} text-sm` }),
             s.label
           ]
         },
         s.id
       )) }),
-      fillStyle !== "transparent" && /* @__PURE__ */ jsxs13(Fragment7, { children: [
-        /* @__PURE__ */ jsx13("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-1.5", children: t("sidebar.sectionHeader.color") }),
-        /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1.5", children: [
-          FILL_COLORS.map((c) => /* @__PURE__ */ jsx13(
+      fillStyle !== "transparent" && /* @__PURE__ */ jsxs14(Fragment7, { children: [
+        /* @__PURE__ */ jsx14("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-1.5", children: t("sidebar.sectionHeader.color") }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1.5", children: [
+          FILL_COLORS.map((c) => /* @__PURE__ */ jsx14(
             "button",
             {
               onClick: () => updateFillColor(c),
@@ -2669,8 +2794,8 @@ function FrameSidebar() {
             },
             c
           )),
-          /* @__PURE__ */ jsxs13("label", { className: "w-6 h-6 rounded-md border-2 border-white/10 hover:border-white/30 cursor-pointer overflow-hidden relative transition-all duration-100", title: "Custom color", children: [
-            /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsxs14("label", { className: "w-6 h-6 rounded-md border-2 border-white/10 hover:border-white/30 cursor-pointer overflow-hidden relative transition-all duration-100", title: "Custom color", children: [
+            /* @__PURE__ */ jsx14(
               "input",
               {
                 type: "color",
@@ -2679,16 +2804,16 @@ function FrameSidebar() {
                 className: "absolute inset-0 opacity-0 cursor-pointer"
               }
             ),
-            /* @__PURE__ */ jsx13("i", { className: "bx bx-palette text-xs text-text-muted absolute inset-0 flex items-center justify-center" })
+            /* @__PURE__ */ jsx14("i", { className: "bx bx-palette text-xs text-text-muted absolute inset-0 flex items-center justify-center" })
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx13(Divider, {}),
-    /* @__PURE__ */ jsxs13(ToolbarButton, { icon: "bx-image-alt", tooltip: "Background image", children: [
-      /* @__PURE__ */ jsx13("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.backgroundImage") }),
-      /* @__PURE__ */ jsxs13("div", { className: "flex gap-1.5 mb-2", children: [
-        /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsx14(Divider, {}),
+    /* @__PURE__ */ jsxs14(ToolbarButton, { icon: "bx-image-alt", tooltip: "Background image", children: [
+      /* @__PURE__ */ jsx14("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-2", children: t("sidebar.sectionHeader.backgroundImage") }),
+      /* @__PURE__ */ jsxs14("div", { className: "flex gap-1.5 mb-2", children: [
+        /* @__PURE__ */ jsxs14(
           "button",
           {
             onClick: () => {
@@ -2719,12 +2844,12 @@ function FrameSidebar() {
             },
             className: "flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-text-secondary text-xs hover:bg-white/[0.06] hover:text-white transition-all duration-100",
             children: [
-              /* @__PURE__ */ jsx13("i", { className: "bx bx-upload text-sm" }),
+              /* @__PURE__ */ jsx14("i", { className: "bx bx-upload text-sm" }),
               "Set Image"
             ]
           }
         ),
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs14(
           "button",
           {
             onClick: () => {
@@ -2736,7 +2861,7 @@ function FrameSidebar() {
             },
             className: "flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-text-secondary text-xs hover:bg-white/[0.06] hover:text-red-400 transition-all duration-100",
             children: [
-              /* @__PURE__ */ jsx13("i", { className: "bx bx-x text-sm" }),
+              /* @__PURE__ */ jsx14("i", { className: "bx bx-x text-sm" }),
               "Remove"
             ]
           }
@@ -2745,13 +2870,13 @@ function FrameSidebar() {
       (() => {
         const shape = typeof window !== "undefined" ? window.currentShape : null;
         if (!shape?.shapeName === "frame" || !shape?._frameImageURL) return null;
-        return /* @__PURE__ */ jsxs13(Fragment7, { children: [
-          /* @__PURE__ */ jsx13("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-1.5", children: t("sidebar.sectionHeader.fit") }),
-          /* @__PURE__ */ jsx13("div", { className: "flex gap-1", children: [
+        return /* @__PURE__ */ jsxs14(Fragment7, { children: [
+          /* @__PURE__ */ jsx14("p", { className: "text-xs text-text-muted uppercase tracking-wider mb-1.5", children: t("sidebar.sectionHeader.fit") }),
+          /* @__PURE__ */ jsx14("div", { className: "flex gap-1", children: [
             { id: "cover", label: "Cover" },
             { id: "contain", label: "Contain" },
             { id: "fill", label: "Stretch" }
-          ].map((f) => /* @__PURE__ */ jsx13(
+          ].map((f) => /* @__PURE__ */ jsx14(
             "button",
             {
               onClick: () => {
@@ -2768,19 +2893,19 @@ function FrameSidebar() {
         ] });
       })()
     ] }),
-    /* @__PURE__ */ jsx13(Divider, {}),
-    /* @__PURE__ */ jsx13(ToolbarButton, { icon: "bxs-expand", tooltip: "Actions", children: /* @__PURE__ */ jsxs13("button", { onClick: resizeToFit, className: "flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-text-secondary text-xs hover:bg-white/[0.06] hover:text-white transition-all duration-100", children: [
-      /* @__PURE__ */ jsx13("i", { className: "bx bxs-expand text-sm" }),
+    /* @__PURE__ */ jsx14(Divider, {}),
+    /* @__PURE__ */ jsx14(ToolbarButton, { icon: "bxs-expand", tooltip: "Actions", children: /* @__PURE__ */ jsxs14("button", { onClick: resizeToFit, className: "flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-text-secondary text-xs hover:bg-white/[0.06] hover:text-white transition-all duration-100", children: [
+      /* @__PURE__ */ jsx14("i", { className: "bx bxs-expand text-sm" }),
       "Resize to Fit"
     ] }) }),
-    /* @__PURE__ */ jsx13(Divider, {}),
-    /* @__PURE__ */ jsx13(LayerControls, {})
+    /* @__PURE__ */ jsx14(Divider, {}),
+    /* @__PURE__ */ jsx14(LayerControls, {})
   ] });
 }
 
 // src/react/components/sidebars/IconSidebar.jsx
-import { useState as useState12, useEffect as useEffect8, useCallback as useCallback9, useRef as useRef5 } from "react";
-import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState14, useEffect as useEffect10, useCallback as useCallback10, useRef as useRef6 } from "react";
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 var DEFAULT_ICONS_ORIGIN = "https://sketch.elixpo.com";
 function getIconsBaseUrl() {
   if (typeof window === "undefined") return "";
@@ -2817,20 +2942,20 @@ function normalizeSvg(raw) {
 function IconCell({ icon, onClick }) {
   const name = icon.filename?.replace(".svg", "").replace(/_/g, " ") || "";
   const normalizedSvg = typeof document !== "undefined" && icon.svg ? normalizeSvg(icon.svg) : icon.svg;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "button",
     {
       onClick,
       title: name,
       style: { width: "44px", height: "44px", overflow: "hidden", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "8px", cursor: "pointer", background: "transparent", border: "none", padding: 0 },
       className: "hover:bg-surface-hover transition-colors duration-100",
-      children: normalizedSvg ? /* @__PURE__ */ jsx14(
+      children: normalizedSvg ? /* @__PURE__ */ jsx15(
         "div",
         {
           style: { width: "24px", height: "24px", overflow: "visible", flexShrink: 0, pointerEvents: "none", filter: "var(--lix-icon-filter, brightness(0) invert(1))" },
           dangerouslySetInnerHTML: { __html: normalizedSvg }
         }
-      ) : /* @__PURE__ */ jsx14(
+      ) : /* @__PURE__ */ jsx15(
         "img",
         {
           src: `/icons/${encodeURIComponent(icon.filename)}`,
@@ -2847,19 +2972,19 @@ function IconSidebar() {
   const activeTool = useSketchStore_default((s) => s.activeTool);
   const setActiveTool = useSketchStore_default((s) => s.setActiveTool);
   const visible = activeTool === TOOLS.ICON;
-  const [query, setQuery] = useState12("");
-  const [category, setCategory] = useState12(null);
-  const [icons, setIcons] = useState12([]);
-  const [loading, setLoading] = useState12(false);
-  const debounceRef = useRef5(null);
-  const searchInputRef = useRef5(null);
-  const requestSequenceRef = useRef5(0);
-  useEffect8(() => {
+  const [query, setQuery] = useState14("");
+  const [category, setCategory] = useState14(null);
+  const [icons, setIcons] = useState14([]);
+  const [loading, setLoading] = useState14(false);
+  const debounceRef = useRef6(null);
+  const searchInputRef = useRef6(null);
+  const requestSequenceRef = useRef6(0);
+  useEffect10(() => {
     if (!visible) return;
     const frame = requestAnimationFrame(() => searchInputRef.current?.focus());
     return () => cancelAnimationFrame(frame);
   }, [visible]);
-  useEffect8(() => {
+  useEffect10(() => {
     if (!visible) return;
     const handler = (e) => {
       if (e.key === "Escape") {
@@ -2870,7 +2995,7 @@ function IconSidebar() {
     document.addEventListener("keydown", handler, true);
     return () => document.removeEventListener("keydown", handler, true);
   }, [visible, setActiveTool]);
-  useEffect8(() => {
+  useEffect10(() => {
     if (!visible) return;
     const svgEl = document.getElementById("freehand-canvas");
     if (!svgEl) return;
@@ -2878,7 +3003,7 @@ function IconSidebar() {
     svgEl.addEventListener("mousedown", handleCanvasClick);
     return () => svgEl.removeEventListener("mousedown", handleCanvasClick);
   }, [visible, setActiveTool]);
-  const fetchIcons = useCallback9(async (searchQuery, cat) => {
+  const fetchIcons = useCallback10(async (searchQuery, cat) => {
     const requestSequence = ++requestSequenceRef.current;
     const params = new URLSearchParams();
     if (searchQuery) params.set("q", searchQuery);
@@ -2904,7 +3029,7 @@ function IconSidebar() {
     }
     if (requestSequence === requestSequenceRef.current) setLoading(false);
   }, []);
-  useEffect8(() => {
+  useEffect10(() => {
     if (!visible) return;
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => {
@@ -2912,7 +3037,7 @@ function IconSidebar() {
     }, query ? 80 : 0);
     return () => clearTimeout(debounceRef.current);
   }, [query, visible, category, fetchIcons]);
-  const handleIconClick = useCallback9((icon) => {
+  const handleIconClick = useCallback10((icon) => {
     if (typeof window === "undefined") return;
     const place = (svgContent) => {
       if (window.prepareIconPlacement) {
@@ -2928,27 +3053,27 @@ function IconSidebar() {
       });
     }
   }, []);
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: `absolute top-[60px] right-2 bottom-[112px] w-[300px] bg-surface border border-border-light rounded-2xl z-[999] font-[lixFont] flex flex-col transition-transform duration-200 ${visible ? "translate-x-0" : "translate-x-full"}`,
       children: [
-        /* @__PURE__ */ jsxs14("div", { className: "px-3.5 pt-3.5 pb-2 shrink-0", children: [
-          /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between mb-2.5", children: [
-            /* @__PURE__ */ jsx14("h3", { className: "text-text-primary text-sm font-medium", children: "Icons" }),
-            /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsxs15("div", { className: "px-3.5 pt-3.5 pb-2 shrink-0", children: [
+          /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between mb-2.5", children: [
+            /* @__PURE__ */ jsx15("h3", { className: "text-text-primary text-sm font-medium", children: "Icons" }),
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 onClick: () => setActiveTool(TOOLS.SELECT),
                 className: "w-6 h-6 flex items-center justify-center rounded-md text-text-muted hover:text-text-primary hover:bg-surface-hover transition-colors duration-100 cursor-pointer",
                 title: "Close (Esc)",
-                children: /* @__PURE__ */ jsx14("i", { className: "bx bx-x text-lg" })
+                children: /* @__PURE__ */ jsx15("i", { className: "bx bx-x text-lg" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2 bg-surface-hover border border-border-light rounded-lg px-2.5 py-2", children: [
-            /* @__PURE__ */ jsx14("i", { className: "bx bxs-search text-text-muted text-sm" }),
-            /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 bg-surface-hover border border-border-light rounded-lg px-2.5 py-2", children: [
+            /* @__PURE__ */ jsx15("i", { className: "bx bxs-search text-text-muted text-sm" }),
+            /* @__PURE__ */ jsx15(
               "input",
               {
                 ref: searchInputRef,
@@ -2961,25 +3086,25 @@ function IconSidebar() {
                 spellCheck: false
               }
             ),
-            query && /* @__PURE__ */ jsx14(
+            query && /* @__PURE__ */ jsx15(
               "button",
               {
                 onClick: () => setQuery(""),
                 className: "text-text-dim hover:text-text-secondary cursor-pointer",
                 title: "Clear search",
                 "aria-label": "Clear icon search",
-                children: /* @__PURE__ */ jsx14("i", { className: "bx bxs-x-circle text-sm" })
+                children: /* @__PURE__ */ jsx15("i", { className: "bx bxs-x-circle text-sm" })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "div",
           {
             className: "grid grid-cols-4 gap-1.5 px-3.5 pb-3 shrink-0",
             role: "group",
             "aria-label": "Filter icons by category",
-            children: CATEGORIES.map((cat) => /* @__PURE__ */ jsxs14(
+            children: CATEGORIES.map((cat) => /* @__PURE__ */ jsxs15(
               "button",
               {
                 onClick: () => setCategory(cat.value),
@@ -2987,19 +3112,19 @@ function IconSidebar() {
                 title: `Show ${cat.label.toLowerCase()} icons`,
                 className: `h-8 min-w-0 flex items-center justify-center gap-1 rounded-lg border px-1.5 text-[10.5px] whitespace-nowrap transition-all duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-blue/50 ${category === cat.value ? "border-accent-blue/50 bg-accent-blue/20 text-accent-blue shadow-sm" : "border-border-light bg-surface/40 text-text-muted hover:border-accent-blue/30 hover:bg-surface-hover hover:text-text-primary"}`,
                 children: [
-                  /* @__PURE__ */ jsx14("i", { className: `bx ${cat.icon} shrink-0 text-xs` }),
-                  /* @__PURE__ */ jsx14("span", { className: "min-w-0 truncate", children: cat.label })
+                  /* @__PURE__ */ jsx15("i", { className: `bx ${cat.icon} shrink-0 text-xs` }),
+                  /* @__PURE__ */ jsx15("span", { className: "min-w-0 truncate", children: cat.label })
                 ]
               },
               cat.value || "all"
             ))
           }
         ),
-        /* @__PURE__ */ jsx14("div", { className: "h-px bg-surface-hover mx-3.5 shrink-0" }),
-        /* @__PURE__ */ jsx14("div", { className: "flex-1 overflow-y-auto no-scrollbar px-3 py-2.5", id: "iconsContainer", children: loading ? /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-center py-12 text-text-muted text-sm", children: [
-          /* @__PURE__ */ jsx14("i", { className: "bx bxs-hourglass bx-spin text-lg mr-2" }),
+        /* @__PURE__ */ jsx15("div", { className: "h-px bg-surface-hover mx-3.5 shrink-0" }),
+        /* @__PURE__ */ jsx15("div", { className: "flex-1 overflow-y-auto no-scrollbar px-3 py-2.5", id: "iconsContainer", children: loading ? /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-center py-12 text-text-muted text-sm", children: [
+          /* @__PURE__ */ jsx15("i", { className: "bx bxs-hourglass bx-spin text-lg mr-2" }),
           "Loading..."
-        ] }) : icons.length === 0 ? /* @__PURE__ */ jsx14("div", { className: "flex items-center justify-center py-12 text-text-muted text-sm", children: "No icons found" }) : /* @__PURE__ */ jsx14("div", { style: { display: "grid", gridTemplateColumns: "repeat(6, minmax(0, 1fr))", gap: "2px" }, children: icons.map((icon, i) => /* @__PURE__ */ jsx14(
+        ] }) : icons.length === 0 ? /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center py-12 text-text-muted text-sm", children: "No icons found" }) : /* @__PURE__ */ jsx15("div", { style: { display: "grid", gridTemplateColumns: "repeat(6, minmax(0, 1fr))", gap: "2px" }, children: icons.map((icon, i) => /* @__PURE__ */ jsx15(
           IconCell,
           {
             icon,
@@ -3013,21 +3138,21 @@ function IconSidebar() {
 }
 
 // src/react/components/sidebars/ImageSidebar.jsx
-import { useCallback as useCallback10 } from "react";
-import { Fragment as Fragment8, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useCallback as useCallback11 } from "react";
+import { Fragment as Fragment8, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 function ImageSidebar() {
   const { t } = useTranslation();
   const selectedShapeSidebar = useSketchStore_default((s) => s.selectedShapeSidebar);
   const toggleImageGenerateModal = useUIStore_default((s) => s.toggleImageGenerateModal);
   const toggleAIModal = useUIStore_default((s) => s.toggleAIModal);
   const isGraph = typeof window !== "undefined" && window.currentShape?._frameType === "graph";
-  const handleEditGraph = useCallback10(() => {
+  const handleEditGraph = useCallback11(() => {
     const shape = window.currentShape;
     if (!shape || shape._frameType !== "graph") return;
     window.__aiEditTargetFrame = shape;
     toggleAIModal();
   }, [toggleAIModal]);
-  const handleEditWithAI = useCallback10(() => {
+  const handleEditWithAI = useCallback11(() => {
     const shape = window.currentShape;
     if (!shape || shape.shapeName !== "image") return;
     const el = shape.element;
@@ -3037,62 +3162,62 @@ function ImageSidebar() {
     window.__editImageRef = { imageUrl: href, width: w, height: h, shape };
     toggleImageGenerateModal();
   }, [toggleImageGenerateModal]);
-  const handleReplace = useCallback10(() => {
+  const handleReplace = useCallback11(() => {
     if (window.openImageFilePicker) {
       window.__replaceImageShape = window.currentShape;
       window.openImageFilePicker();
     }
   }, []);
-  return /* @__PURE__ */ jsxs15(ShapeSidebar, { visible: selectedShapeSidebar === "image", children: [
-    isGraph && /* @__PURE__ */ jsxs15(Fragment8, { children: [
-      /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(ShapeSidebar, { visible: selectedShapeSidebar === "image", children: [
+    isGraph && /* @__PURE__ */ jsxs16(Fragment8, { children: [
+      /* @__PURE__ */ jsxs16(
         "button",
         {
           onClick: handleEditGraph,
           title: "Edit graph",
           className: "h-9 flex cursor-pointer items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-accent hover:bg-accent/10 transition-all duration-100",
           children: [
-            /* @__PURE__ */ jsx15("i", { className: "bx bx-line-chart text-base" }),
-            /* @__PURE__ */ jsx15("span", { className: "text-xs", children: "Edit graph" })
+            /* @__PURE__ */ jsx16("i", { className: "bx bx-line-chart text-base" }),
+            /* @__PURE__ */ jsx16("span", { className: "text-xs", children: "Edit graph" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx15(Divider, {})
+      /* @__PURE__ */ jsx16(Divider, {})
     ] }),
-    !isGraph && /* @__PURE__ */ jsxs15(Fragment8, { children: [
-      /* @__PURE__ */ jsxs15(
+    !isGraph && /* @__PURE__ */ jsxs16(Fragment8, { children: [
+      /* @__PURE__ */ jsxs16(
         "button",
         {
           onClick: handleEditWithAI,
           title: "Edit with AI",
           className: "h-9 flex items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-purple-400 hover:bg-purple-500/10 transition-all duration-100",
           children: [
-            /* @__PURE__ */ jsx15("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", children: /* @__PURE__ */ jsx15("path", { d: "M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z" }) }),
-            /* @__PURE__ */ jsx15("span", { className: "text-xs", children: "AI Edit" })
+            /* @__PURE__ */ jsx16("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", children: /* @__PURE__ */ jsx16("path", { d: "M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8L12 2z" }) }),
+            /* @__PURE__ */ jsx16("span", { className: "text-xs", children: "AI Edit" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx15(Divider, {}),
-      /* @__PURE__ */ jsxs15(
+      /* @__PURE__ */ jsx16(Divider, {}),
+      /* @__PURE__ */ jsxs16(
         "button",
         {
           onClick: handleReplace,
           title: "Replace image",
           className: "h-9 flex items-center gap-1.5 px-3 rounded-lg text-text-muted hover:text-white hover:bg-white/[0.06] transition-all duration-100",
           children: [
-            /* @__PURE__ */ jsx15("i", { className: "bx bx-upload text-base" }),
-            /* @__PURE__ */ jsx15("span", { className: "text-xs", children: "Replace" })
+            /* @__PURE__ */ jsx16("i", { className: "bx bx-upload text-base" }),
+            /* @__PURE__ */ jsx16("span", { className: "text-xs", children: "Replace" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx15(Divider, {})
+      /* @__PURE__ */ jsx16(Divider, {})
     ] }),
-    /* @__PURE__ */ jsx15(LayerControls, {})
+    /* @__PURE__ */ jsx16(LayerControls, {})
   ] });
 }
 
 // src/react/components/canvas/MultiSelectActions.jsx
-import { useState as useState13, useEffect as useEffect9 } from "react";
+import { useState as useState15, useEffect as useEffect11 } from "react";
 
 // src/react/utils/toast.js
 function showToast(message, options = {}) {
@@ -3118,12 +3243,12 @@ function showToast(message, options = {}) {
 }
 
 // src/react/components/canvas/MultiSelectActions.jsx
-import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
 function MultiSelectActions() {
-  const [count, setCount] = useState13(0);
-  const [groupState, setGroupState] = useState13("none");
-  const [frameEligible, setFrameEligible] = useState13(false);
-  useEffect9(() => {
+  const [count, setCount] = useState15(0);
+  const [groupState, setGroupState] = useState15("none");
+  const [frameEligible, setFrameEligible] = useState15(false);
+  useEffect11(() => {
     const interval = setInterval(() => {
       const ms = window.multiSelection;
       const sel = ms?.selectedShapes;
@@ -3187,44 +3312,44 @@ function MultiSelectActions() {
     showToast(`Ungrouped ${cleared} shapes`, { tone: "success" });
   };
   const grouped = groupState === "all";
-  return /* @__PURE__ */ jsx16("div", { className: "absolute top-14 left-1/2 -translate-x-1/2 z-[1000] font-[lixFont]", children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2 bg-surface/90 backdrop-blur-lg border border-border-light rounded-xl px-3 py-1.5 shadow-lg", children: [
-    /* @__PURE__ */ jsxs16("span", { className: "text-text-muted text-xs", children: [
+  return /* @__PURE__ */ jsx17("div", { className: "absolute top-14 left-1/2 -translate-x-1/2 z-[1000] font-[lixFont]", children: /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2 bg-surface/90 backdrop-blur-lg border border-border-light rounded-xl px-3 py-1.5 shadow-lg", children: [
+    /* @__PURE__ */ jsxs17("span", { className: "text-text-muted text-xs", children: [
       count,
       " selected",
-      grouped && /* @__PURE__ */ jsx16("span", { className: "ml-1 text-accent-blue", children: "\xB7 grouped" })
+      grouped && /* @__PURE__ */ jsx17("span", { className: "ml-1 text-accent-blue", children: "\xB7 grouped" })
     ] }),
-    /* @__PURE__ */ jsx16("div", { className: "w-px h-4 bg-border-light" }),
-    !grouped && frameEligible && /* @__PURE__ */ jsxs16(
+    /* @__PURE__ */ jsx17("div", { className: "w-px h-4 bg-border-light" }),
+    !grouped && frameEligible && /* @__PURE__ */ jsxs17(
       "button",
       {
         onClick: handleFrame,
         className: "flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs text-accent-blue hover:bg-accent-blue/10 transition-all duration-150",
         title: "Wrap selection in a frame",
         children: [
-          /* @__PURE__ */ jsx16("i", { className: "bx bx-crop text-sm" }),
+          /* @__PURE__ */ jsx17("i", { className: "bx bx-crop text-sm" }),
           "Frame it"
         ]
       }
     ),
-    grouped ? /* @__PURE__ */ jsxs16(
+    grouped ? /* @__PURE__ */ jsxs17(
       "button",
       {
         onClick: handleUngroup,
         className: "flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs text-yellow-400 hover:bg-yellow-500/10 transition-all duration-150",
         title: "Ungroup (Ctrl+Shift+G)",
         children: [
-          /* @__PURE__ */ jsx16("i", { className: "bx bx-unlink text-sm" }),
+          /* @__PURE__ */ jsx17("i", { className: "bx bx-unlink text-sm" }),
           "Ungroup"
         ]
       }
-    ) : /* @__PURE__ */ jsxs16(
+    ) : /* @__PURE__ */ jsxs17(
       "button",
       {
         onClick: handleGroup,
         className: "flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs text-text-secondary hover:bg-surface-hover transition-all duration-150",
         title: "Group (Ctrl+G)",
         children: [
-          /* @__PURE__ */ jsx16("i", { className: "bx bx-link text-sm" }),
+          /* @__PURE__ */ jsx17("i", { className: "bx bx-link text-sm" }),
           "Group"
         ]
       }
@@ -3233,8 +3358,8 @@ function MultiSelectActions() {
 }
 
 // src/react/components/canvas/ContextMenu.jsx
-import { useState as useState14, useEffect as useEffect10, useCallback as useCallback11, useRef as useRef6 } from "react";
-import { Fragment as Fragment9, jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useState as useState16, useEffect as useEffect12, useCallback as useCallback12, useRef as useRef7 } from "react";
+import { Fragment as Fragment9, jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
 function getCleanSVG() {
   const svgEl = window.svg;
   if (!svgEl) return null;
@@ -3287,53 +3412,53 @@ function getShapeAtPoint(x, y) {
   return null;
 }
 function MenuItem({ label, shortcut, onClick, disabled, danger }) {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "button",
     {
       onClick,
       disabled,
       className: `w-full flex items-center justify-between px-3 py-1.5 text-xs transition-colors duration-100 ${disabled ? "text-text-dim cursor-default" : danger ? "text-red-400 hover:bg-red-500/15 cursor-pointer" : "text-text-secondary hover:bg-surface-hover cursor-pointer"}`,
       children: [
-        /* @__PURE__ */ jsx17("span", { children: label }),
-        shortcut && /* @__PURE__ */ jsx17("span", { className: "text-text-dim text-[10px] ml-6", children: shortcut })
+        /* @__PURE__ */ jsx18("span", { children: label }),
+        shortcut && /* @__PURE__ */ jsx18("span", { className: "text-text-dim text-[10px] ml-6", children: shortcut })
       ]
     }
   );
 }
 function CheckMenuItem({ label, shortcut, checked, onClick }) {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "button",
     {
       onClick,
       className: "w-full flex items-center justify-between px-3 py-1.5 text-xs text-text-secondary hover:bg-surface-hover cursor-pointer transition-colors duration-100",
       children: [
-        /* @__PURE__ */ jsxs17("span", { className: "flex items-center gap-2", children: [
-          checked && /* @__PURE__ */ jsx17("i", { className: "bx bx-check text-sm text-accent-blue -ml-0.5" }),
-          !checked && /* @__PURE__ */ jsx17("span", { className: "w-[14px]" }),
+        /* @__PURE__ */ jsxs18("span", { className: "flex items-center gap-2", children: [
+          checked && /* @__PURE__ */ jsx18("i", { className: "bx bx-check text-sm text-accent-blue -ml-0.5" }),
+          !checked && /* @__PURE__ */ jsx18("span", { className: "w-[14px]" }),
           label
         ] }),
-        shortcut && /* @__PURE__ */ jsx17("span", { className: "text-text-dim text-[10px] ml-6", children: shortcut })
+        shortcut && /* @__PURE__ */ jsx18("span", { className: "text-text-dim text-[10px] ml-6", children: shortcut })
       ]
     }
   );
 }
 function Separator() {
-  return /* @__PURE__ */ jsx17("hr", { className: "border-border-light my-1" });
+  return /* @__PURE__ */ jsx18("hr", { className: "border-border-light my-1" });
 }
 function ContextMenu() {
-  const [visible, setVisible] = useState14(false);
-  const [position, setPosition] = useState14({ x: 0, y: 0 });
-  const [targetShape, setTargetShape] = useState14(null);
-  const menuRef = useRef6(null);
+  const [visible, setVisible] = useState16(false);
+  const [position, setPosition] = useState16({ x: 0, y: 0 });
+  const [targetShape, setTargetShape] = useState16(null);
+  const menuRef = useRef7(null);
   const gridEnabled = useSketchStore_default((s) => s.gridEnabled);
   const snapToObjects = useSketchStore_default((s) => s.snapToObjects);
   const zenMode = useSketchStore_default((s) => s.zenMode);
   const viewMode = useSketchStore_default((s) => s.viewMode);
-  const close = useCallback11(() => {
+  const close = useCallback12(() => {
     setVisible(false);
     setTargetShape(null);
   }, []);
-  useEffect10(() => {
+  useEffect12(() => {
     const handleContextMenu = (e) => {
       const svg = document.getElementById("freehand-canvas");
       if (!svg) return;
@@ -3358,7 +3483,7 @@ function ContextMenu() {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [close]);
-  useEffect10(() => {
+  useEffect12(() => {
     if (!visible || !menuRef.current) return;
     const rect = menuRef.current.getBoundingClientRect();
     const vw = window.innerWidth;
@@ -3570,7 +3695,7 @@ function ContextMenu() {
     close();
   };
   const isShape = !!targetShape;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       ref: menuRef,
@@ -3579,49 +3704,49 @@ function ContextMenu() {
       onClick: (e) => e.stopPropagation(),
       children: isShape ? (
         /* ── Shape context menu ── */
-        /* @__PURE__ */ jsxs17(Fragment9, { children: [
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Cut", shortcut: "Ctrl+X", onClick: handleCut }),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Copy", shortcut: "Ctrl+C", onClick: handleCopy }),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Paste", shortcut: "Ctrl+V", onClick: handlePaste }),
-          /* @__PURE__ */ jsx17(Separator, {}),
-          !fullyGrouped && /* @__PURE__ */ jsx17(MenuItem, { label: "Wrap selection in frame", onClick: handleWrapInFrame }),
-          canGroup && !fullyGrouped && /* @__PURE__ */ jsx17(MenuItem, { label: "Group", shortcut: "Ctrl+G", onClick: handleGroup }),
-          canUngroup && /* @__PURE__ */ jsx17(MenuItem, { label: "Ungroup", shortcut: "Ctrl+Shift+G", onClick: handleUngroup }),
-          /* @__PURE__ */ jsx17(Separator, {}),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Copy to clipboard as PNG", shortcut: "Shift+Alt+C", onClick: handleCopyPNG }),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Copy to clipboard as SVG", onClick: handleCopySVG }),
-          /* @__PURE__ */ jsx17(Separator, {}),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Send backward", shortcut: "Ctrl+[", onClick: () => handleLayerAction("sendBackward") }),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Bring forward", shortcut: "Ctrl+]", onClick: () => handleLayerAction("bringForward") }),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Send to back", shortcut: "Ctrl+Shift+[", onClick: () => handleLayerAction("sendToBack") }),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Bring to front", shortcut: "Ctrl+Shift+]", onClick: () => handleLayerAction("bringToFront") }),
-          /* @__PURE__ */ jsx17(Separator, {}),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Flip horizontal", shortcut: "Shift+H", onClick: () => handleFlip("h") }),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Flip vertical", shortcut: "Shift+V", onClick: () => handleFlip("v") }),
-          /* @__PURE__ */ jsx17(Separator, {}),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Duplicate", shortcut: "Ctrl+D", onClick: handleDuplicate }),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Delete", danger: true, onClick: handleDeleteShape })
+        /* @__PURE__ */ jsxs18(Fragment9, { children: [
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Cut", shortcut: "Ctrl+X", onClick: handleCut }),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Copy", shortcut: "Ctrl+C", onClick: handleCopy }),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Paste", shortcut: "Ctrl+V", onClick: handlePaste }),
+          /* @__PURE__ */ jsx18(Separator, {}),
+          !fullyGrouped && /* @__PURE__ */ jsx18(MenuItem, { label: "Wrap selection in frame", onClick: handleWrapInFrame }),
+          canGroup && !fullyGrouped && /* @__PURE__ */ jsx18(MenuItem, { label: "Group", shortcut: "Ctrl+G", onClick: handleGroup }),
+          canUngroup && /* @__PURE__ */ jsx18(MenuItem, { label: "Ungroup", shortcut: "Ctrl+Shift+G", onClick: handleUngroup }),
+          /* @__PURE__ */ jsx18(Separator, {}),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Copy to clipboard as PNG", shortcut: "Shift+Alt+C", onClick: handleCopyPNG }),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Copy to clipboard as SVG", onClick: handleCopySVG }),
+          /* @__PURE__ */ jsx18(Separator, {}),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Send backward", shortcut: "Ctrl+[", onClick: () => handleLayerAction("sendBackward") }),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Bring forward", shortcut: "Ctrl+]", onClick: () => handleLayerAction("bringForward") }),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Send to back", shortcut: "Ctrl+Shift+[", onClick: () => handleLayerAction("sendToBack") }),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Bring to front", shortcut: "Ctrl+Shift+]", onClick: () => handleLayerAction("bringToFront") }),
+          /* @__PURE__ */ jsx18(Separator, {}),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Flip horizontal", shortcut: "Shift+H", onClick: () => handleFlip("h") }),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Flip vertical", shortcut: "Shift+V", onClick: () => handleFlip("v") }),
+          /* @__PURE__ */ jsx18(Separator, {}),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Duplicate", shortcut: "Ctrl+D", onClick: handleDuplicate }),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Delete", danger: true, onClick: handleDeleteShape })
         ] })
       ) : (
         /* ── Canvas context menu ── */
-        /* @__PURE__ */ jsxs17(Fragment9, { children: [
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Paste", shortcut: "Ctrl+V", onClick: handlePaste }),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Copy to clipboard as PNG", shortcut: "Shift+Alt+C", onClick: handleCopyPNG }),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Copy to clipboard as SVG", onClick: handleCopySVG }),
-          /* @__PURE__ */ jsx17(Separator, {}),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Select all", shortcut: "Ctrl+A", onClick: handleSelectAll }),
-          /* @__PURE__ */ jsx17(Separator, {}),
-          /* @__PURE__ */ jsx17(CheckMenuItem, { label: "Toggle grid", shortcut: "Ctrl+'", checked: gridEnabled, onClick: handleToggleGrid }),
-          /* @__PURE__ */ jsx17(CheckMenuItem, { label: "Snap to objects", shortcut: "Alt+S", checked: snapToObjects, onClick: handleToggleSnap }),
-          /* @__PURE__ */ jsx17(Separator, {}),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Find on canvas", shortcut: "Ctrl+F", onClick: () => {
+        /* @__PURE__ */ jsxs18(Fragment9, { children: [
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Paste", shortcut: "Ctrl+V", onClick: handlePaste }),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Copy to clipboard as PNG", shortcut: "Shift+Alt+C", onClick: handleCopyPNG }),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Copy to clipboard as SVG", onClick: handleCopySVG }),
+          /* @__PURE__ */ jsx18(Separator, {}),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Select all", shortcut: "Ctrl+A", onClick: handleSelectAll }),
+          /* @__PURE__ */ jsx18(Separator, {}),
+          /* @__PURE__ */ jsx18(CheckMenuItem, { label: "Toggle grid", shortcut: "Ctrl+'", checked: gridEnabled, onClick: handleToggleGrid }),
+          /* @__PURE__ */ jsx18(CheckMenuItem, { label: "Snap to objects", shortcut: "Alt+S", checked: snapToObjects, onClick: handleToggleSnap }),
+          /* @__PURE__ */ jsx18(Separator, {}),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Find on canvas", shortcut: "Ctrl+F", onClick: () => {
             useUIStore_default.getState().toggleFindBar();
             close();
           } }),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Zen mode", shortcut: "Alt+Z", onClick: handleZenMode }),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "View mode", shortcut: "Alt+R", onClick: handleViewMode }),
-          /* @__PURE__ */ jsx17(Separator, {}),
-          /* @__PURE__ */ jsx17(MenuItem, { label: "Reset canvas", danger: true, onClick: () => {
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Zen mode", shortcut: "Alt+Z", onClick: handleZenMode }),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "View mode", shortcut: "Alt+R", onClick: handleViewMode }),
+          /* @__PURE__ */ jsx18(Separator, {}),
+          /* @__PURE__ */ jsx18(MenuItem, { label: "Reset canvas", danger: true, onClick: () => {
             const serializer = window.__sceneSerializer;
             if (serializer?.resetCanvas) serializer.resetCanvas();
             close();
@@ -3633,17 +3758,17 @@ function ContextMenu() {
 }
 
 // src/react/components/canvas/FindBar.jsx
-import { useState as useState15, useEffect as useEffect11, useRef as useRef7, useCallback as useCallback12 } from "react";
-import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useState as useState17, useEffect as useEffect13, useRef as useRef8, useCallback as useCallback13 } from "react";
+import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
 function FindBar() {
   const open = useUIStore_default((s) => s.findBarOpen);
   const closeFindBar = useUIStore_default((s) => s.closeFindBar);
-  const [query, setQuery] = useState15("");
-  const [results, setResults] = useState15([]);
-  const [activeIndex, setActiveIndex] = useState15(-1);
-  const inputRef = useRef7(null);
-  const highlightRef = useRef7(null);
-  useEffect11(() => {
+  const [query, setQuery] = useState17("");
+  const [results, setResults] = useState17([]);
+  const [activeIndex, setActiveIndex] = useState17(-1);
+  const inputRef = useRef8(null);
+  const highlightRef = useRef8(null);
+  useEffect13(() => {
     if (open) {
       setQuery("");
       setResults([]);
@@ -3653,13 +3778,13 @@ function FindBar() {
       removeHighlight();
     }
   }, [open]);
-  const removeHighlight = useCallback12(() => {
+  const removeHighlight = useCallback13(() => {
     if (highlightRef.current && highlightRef.current.parentNode) {
       highlightRef.current.parentNode.removeChild(highlightRef.current);
       highlightRef.current = null;
     }
   }, []);
-  const highlightShape = useCallback12((result) => {
+  const highlightShape = useCallback13((result) => {
     removeHighlight();
     if (!result || !window.svg) return;
     const shape = result.shape;
@@ -3694,7 +3819,7 @@ function FindBar() {
       window.currentViewBox.y = newY;
     }
   }, [removeHighlight]);
-  const doSearch = useCallback12((q) => {
+  const doSearch = useCallback13((q) => {
     const finder = window.__sceneSerializer?.findText;
     if (!finder || !q.trim()) {
       setResults([]);
@@ -3712,7 +3837,7 @@ function FindBar() {
       removeHighlight();
     }
   }, [highlightShape, removeHighlight]);
-  const goToResult = useCallback12((idx) => {
+  const goToResult = useCallback13((idx) => {
     if (idx < 0 || idx >= results.length) return;
     setActiveIndex(idx);
     highlightShape(results[idx]);
@@ -3739,9 +3864,9 @@ function FindBar() {
     doSearch(q);
   };
   if (!open) return null;
-  return /* @__PURE__ */ jsx18("div", { className: "fixed top-14 right-4 z-[1000] font-[lixFont]", children: /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 bg-surface-card/95 backdrop-blur-lg border border-border-light rounded-xl px-3 py-2 shadow-xl min-w-[300px]", children: [
-    /* @__PURE__ */ jsx18("i", { className: "bx bx-search text-text-muted text-sm" }),
-    /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19("div", { className: "fixed top-14 right-4 z-[1000] font-[lixFont]", children: /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2 bg-surface-card/95 backdrop-blur-lg border border-border-light rounded-xl px-3 py-2 shadow-xl min-w-[300px]", children: [
+    /* @__PURE__ */ jsx19("i", { className: "bx bx-search text-text-muted text-sm" }),
+    /* @__PURE__ */ jsx19(
       "input",
       {
         ref: inputRef,
@@ -3753,68 +3878,68 @@ function FindBar() {
         className: "flex-1 bg-transparent text-text-primary text-xs outline-none placeholder:text-text-dim font-[lixFont]"
       }
     ),
-    results.length > 0 && /* @__PURE__ */ jsxs18("span", { className: "text-text-dim text-xs whitespace-nowrap", children: [
+    results.length > 0 && /* @__PURE__ */ jsxs19("span", { className: "text-text-dim text-xs whitespace-nowrap", children: [
       activeIndex + 1,
       "/",
       results.length
     ] }),
-    query && results.length === 0 && /* @__PURE__ */ jsx18("span", { className: "text-red-400/70 text-xs whitespace-nowrap", children: "No results" }),
-    results.length > 1 && /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-0.5", children: [
-      /* @__PURE__ */ jsx18(
+    query && results.length === 0 && /* @__PURE__ */ jsx19("span", { className: "text-red-400/70 text-xs whitespace-nowrap", children: "No results" }),
+    results.length > 1 && /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx19(
         "button",
         {
           onClick: () => goToResult((activeIndex - 1 + results.length) % results.length),
           className: "w-5 h-5 flex items-center justify-center rounded text-text-muted hover:text-white hover:bg-white/10 transition-colors",
-          children: /* @__PURE__ */ jsx18("i", { className: "bx bx-chevron-up text-sm" })
+          children: /* @__PURE__ */ jsx19("i", { className: "bx bx-chevron-up text-sm" })
         }
       ),
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx19(
         "button",
         {
           onClick: () => goToResult((activeIndex + 1) % results.length),
           className: "w-5 h-5 flex items-center justify-center rounded text-text-muted hover:text-white hover:bg-white/10 transition-colors",
-          children: /* @__PURE__ */ jsx18("i", { className: "bx bx-chevron-down text-sm" })
+          children: /* @__PURE__ */ jsx19("i", { className: "bx bx-chevron-down text-sm" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       "button",
       {
         onClick: closeFindBar,
         className: "w-5 h-5 flex items-center justify-center rounded text-text-muted hover:text-white hover:bg-white/10 transition-colors",
-        children: /* @__PURE__ */ jsx18("i", { className: "bx bx-x text-sm" })
+        children: /* @__PURE__ */ jsx19("i", { className: "bx bx-x text-sm" })
       }
     )
   ] }) });
 }
 
 // src/react/components/canvas/ImageSourcePicker.jsx
-import { useState as useState16, useEffect as useEffect12, useCallback as useCallback13, useRef as useRef8 } from "react";
-import { jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useState as useState18, useEffect as useEffect14, useCallback as useCallback14, useRef as useRef9 } from "react";
+import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
 function ImageSourcePicker() {
-  const ref = useRef8(null);
+  const ref = useRef9(null);
   const toggleImageGenerateModal = useUIStore_default((s) => s.toggleImageGenerateModal);
   const activeTool = useSketchStore_default((s) => s.activeTool);
   const setActiveTool = useSketchStore_default((s) => s.setActiveTool);
   const visible = activeTool === "image";
-  const handleGenerateAI = useCallback13(() => {
+  const handleGenerateAI = useCallback14(() => {
     setActiveTool("select");
     toggleImageGenerateModal();
   }, [setActiveTool, toggleImageGenerateModal]);
-  const handleUpload = useCallback13(() => {
+  const handleUpload = useCallback14(() => {
     setActiveTool("select");
     if (window.openImageFilePicker) {
       window.openImageFilePicker();
     }
   }, [setActiveTool]);
-  useEffect12(() => {
+  useEffect14(() => {
     window.__showImageSourcePicker = () => {
     };
     return () => {
       delete window.__showImageSourcePicker;
     };
   }, []);
-  useEffect12(() => {
+  useEffect14(() => {
     if (!visible) return;
     const handleClick = (e) => {
       if (ref.current && !ref.current.contains(e.target)) {
@@ -3857,44 +3982,44 @@ function ImageSourcePicker() {
       posY = rect.top - 10;
     }
   }
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       ref,
       className: "fixed z-[1100] font-[lixFont]",
       style: { left: posX, top: posY },
-      children: /* @__PURE__ */ jsxs19("div", { className: "bg-surface-card border border-border-light rounded-xl p-1.5 shadow-2xl shadow-black/40 flex flex-col gap-1 min-w-[200px]", children: [
-        /* @__PURE__ */ jsxs19(
+      children: /* @__PURE__ */ jsxs20("div", { className: "bg-surface-card border border-border-light rounded-xl p-1.5 shadow-2xl shadow-black/40 flex flex-col gap-1 min-w-[200px]", children: [
+        /* @__PURE__ */ jsxs20(
           "button",
           {
             onClick: handleGenerateAI,
             className: "flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted hover:text-accent-blue hover:bg-surface-hover transition-all group",
             children: [
-              /* @__PURE__ */ jsx19("div", { className: "w-8 h-8 rounded-lg bg-accent-blue/10 flex items-center justify-center group-hover:bg-accent-blue/20 transition-all", children: /* @__PURE__ */ jsxs19("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-accent-blue", children: [
-                /* @__PURE__ */ jsx19("path", { d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z" }),
-                /* @__PURE__ */ jsx19("path", { d: "M18 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3z" })
+              /* @__PURE__ */ jsx20("div", { className: "w-8 h-8 rounded-lg bg-accent-blue/10 flex items-center justify-center group-hover:bg-accent-blue/20 transition-all", children: /* @__PURE__ */ jsxs20("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-accent-blue", children: [
+                /* @__PURE__ */ jsx20("path", { d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z" }),
+                /* @__PURE__ */ jsx20("path", { d: "M18 14l1 3 3 1-3 1-1 3-1-3-3-1 3-1 1-3z" })
               ] }) }),
-              /* @__PURE__ */ jsxs19("div", { className: "flex-1 text-left", children: [
-                /* @__PURE__ */ jsx19("div", { className: "text-sm font-medium", children: "Generate with AI" }),
-                /* @__PURE__ */ jsx19("div", { className: "text-[10px] text-text-dim", children: "10 generations \xB7 5 edits free" })
+              /* @__PURE__ */ jsxs20("div", { className: "flex-1 text-left", children: [
+                /* @__PURE__ */ jsx20("div", { className: "text-sm font-medium", children: "Generate with AI" }),
+                /* @__PURE__ */ jsx20("div", { className: "text-[10px] text-text-dim", children: "10 generations \xB7 5 edits free" })
               ] }),
-              /* @__PURE__ */ jsx19("kbd", { className: "text-[10px] text-text-dim bg-surface-dark px-1.5 py-0.5 rounded", children: "G" })
+              /* @__PURE__ */ jsx20("kbd", { className: "text-[10px] text-text-dim bg-surface-dark px-1.5 py-0.5 rounded", children: "G" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx19("div", { className: "h-px bg-white/[0.06] mx-2" }),
-        /* @__PURE__ */ jsxs19(
+        /* @__PURE__ */ jsx20("div", { className: "h-px bg-white/[0.06] mx-2" }),
+        /* @__PURE__ */ jsxs20(
           "button",
           {
             onClick: handleUpload,
             className: "flex items-center gap-3 px-3 py-2.5 rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover transition-all group",
             children: [
-              /* @__PURE__ */ jsx19("div", { className: "w-8 h-8 rounded-lg bg-surface-hover flex items-center justify-center group-hover:bg-surface-active transition-all", children: /* @__PURE__ */ jsx19("i", { className: "bx bx-upload text-lg" }) }),
-              /* @__PURE__ */ jsxs19("div", { className: "flex-1 text-left", children: [
-                /* @__PURE__ */ jsx19("div", { className: "text-sm font-medium", children: "Upload from device" }),
-                /* @__PURE__ */ jsx19("div", { className: "text-[10px] text-text-dim", children: "PNG, JPG, SVG, WebP" })
+              /* @__PURE__ */ jsx20("div", { className: "w-8 h-8 rounded-lg bg-surface-hover flex items-center justify-center group-hover:bg-surface-active transition-all", children: /* @__PURE__ */ jsx20("i", { className: "bx bx-upload text-lg" }) }),
+              /* @__PURE__ */ jsxs20("div", { className: "flex-1 text-left", children: [
+                /* @__PURE__ */ jsx20("div", { className: "text-sm font-medium", children: "Upload from device" }),
+                /* @__PURE__ */ jsx20("div", { className: "text-[10px] text-text-dim", children: "PNG, JPG, SVG, WebP" })
               ] }),
-              /* @__PURE__ */ jsx19("kbd", { className: "text-[10px] text-text-dim bg-surface-dark px-1.5 py-0.5 rounded", children: "U" })
+              /* @__PURE__ */ jsx20("kbd", { className: "text-[10px] text-text-dim bg-surface-dark px-1.5 py-0.5 rounded", children: "U" })
             ]
           }
         )
@@ -3904,13 +4029,13 @@ function ImageSourcePicker() {
 }
 
 // src/react/components/canvas/CanvasLoadingOverlay.jsx
-import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
 function CanvasLoadingOverlay() {
   const loading = useUIStore_default((s) => s.canvasLoading);
   const message = useUIStore_default((s) => s.canvasLoadingMessage);
   if (!loading) return null;
-  return /* @__PURE__ */ jsx20("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-sm font-[lixFont] pointer-events-all", children: /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-5", children: [
-    /* @__PURE__ */ jsx20("style", { children: `
+  return /* @__PURE__ */ jsx21("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-sm font-[lixFont] pointer-events-all", children: /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-5", children: [
+    /* @__PURE__ */ jsx21("style", { children: `
           @keyframes cl-glob {
             0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
             25% { transform: translate(10px, -6px) scale(1.12); opacity: 0.9; }
@@ -3928,8 +4053,8 @@ function CanvasLoadingOverlay() {
             50% { transform: translateY(-3px); }
           }
         ` }),
-    /* @__PURE__ */ jsxs20("div", { className: "relative w-20 h-20", children: [
-      /* @__PURE__ */ jsx20("div", { className: "absolute rounded-full", style: {
+    /* @__PURE__ */ jsxs21("div", { className: "relative w-20 h-20", children: [
+      /* @__PURE__ */ jsx21("div", { className: "absolute rounded-full", style: {
         width: 38,
         height: 38,
         top: 2,
@@ -3939,7 +4064,7 @@ function CanvasLoadingOverlay() {
         animation: "cl-glob 3.5s ease-in-out infinite",
         willChange: "transform, opacity"
       } }),
-      /* @__PURE__ */ jsx20("div", { className: "absolute rounded-full", style: {
+      /* @__PURE__ */ jsx21("div", { className: "absolute rounded-full", style: {
         width: 34,
         height: 34,
         top: 14,
@@ -3949,7 +4074,7 @@ function CanvasLoadingOverlay() {
         animation: "cl-glob-2 4s ease-in-out infinite",
         willChange: "transform, opacity"
       } }),
-      /* @__PURE__ */ jsx20("div", { className: "absolute rounded-full", style: {
+      /* @__PURE__ */ jsx21("div", { className: "absolute rounded-full", style: {
         width: 30,
         height: 30,
         bottom: 2,
@@ -3959,25 +4084,25 @@ function CanvasLoadingOverlay() {
         animation: "cl-glob 4.2s ease-in-out infinite reverse",
         willChange: "transform, opacity"
       } }),
-      /* @__PURE__ */ jsx20("div", { className: "absolute inset-0 flex items-center justify-center", style: { animation: "cl-float 2.5s ease-in-out infinite" }, children: /* @__PURE__ */ jsx20("div", { className: "w-9 h-9 rounded-lg bg-white/[0.06] backdrop-blur-sm border border-white/[0.08] flex items-center justify-center", children: /* @__PURE__ */ jsxs20("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "opacity-70", children: [
-        /* @__PURE__ */ jsx20("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
-        /* @__PURE__ */ jsx20("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }),
-        /* @__PURE__ */ jsx20("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
-        /* @__PURE__ */ jsx20("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1" })
+      /* @__PURE__ */ jsx21("div", { className: "absolute inset-0 flex items-center justify-center", style: { animation: "cl-float 2.5s ease-in-out infinite" }, children: /* @__PURE__ */ jsx21("div", { className: "w-9 h-9 rounded-lg bg-white/[0.06] backdrop-blur-sm border border-white/[0.08] flex items-center justify-center", children: /* @__PURE__ */ jsxs21("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "opacity-70", children: [
+        /* @__PURE__ */ jsx21("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
+        /* @__PURE__ */ jsx21("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }),
+        /* @__PURE__ */ jsx21("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
+        /* @__PURE__ */ jsx21("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1" })
       ] }) }) })
     ] }),
-    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx20("span", { className: "w-1.5 h-1.5 rounded-full bg-blue-400 animate-bounce", style: { animationDelay: "0ms" } }),
-      /* @__PURE__ */ jsx20("span", { className: "w-1.5 h-1.5 rounded-full bg-purple-400 animate-bounce", style: { animationDelay: "150ms" } }),
-      /* @__PURE__ */ jsx20("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-400 animate-bounce", style: { animationDelay: "300ms" } })
+    /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx21("span", { className: "w-1.5 h-1.5 rounded-full bg-blue-400 animate-bounce", style: { animationDelay: "0ms" } }),
+      /* @__PURE__ */ jsx21("span", { className: "w-1.5 h-1.5 rounded-full bg-purple-400 animate-bounce", style: { animationDelay: "150ms" } }),
+      /* @__PURE__ */ jsx21("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-400 animate-bounce", style: { animationDelay: "300ms" } })
     ] }),
-    /* @__PURE__ */ jsx20("p", { className: "text-text-dim text-sm", children: message })
+    /* @__PURE__ */ jsx21("p", { className: "text-text-dim text-sm", children: message })
   ] }) });
 }
 
 // src/react/components/modals/CommandPalette.jsx
-import { useState as useState17, useEffect as useEffect13, useRef as useRef9 } from "react";
-import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useState as useState19, useEffect as useEffect15, useRef as useRef10 } from "react";
+import { jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
 var CANVAS_COMMANDS = [
   // --- App ---
   { label: "Library", icon: "bx-library", section: "App" },
@@ -4012,11 +4137,15 @@ var CANVAS_COMMANDS = [
   { label: "Arrow", icon: "bx-right-arrow-alt", section: "Tools", shortcut: "A / 5", action: "tool:arrow" },
   { label: "Line", icon: "bx-minus", section: "Tools", shortcut: "L / 6", action: "tool:line" },
   { label: "Freehand", icon: "bx-pencil", section: "Tools", shortcut: "P / 7", action: "tool:freehand" },
+  { label: "Draw to shape", icon: "bx-vector", section: "Tools", shortcut: "D", action: "tool:drawShape" },
+  { label: "Paint bucket", icon: "bxs-color-fill", section: "Tools", shortcut: "B", action: "tool:paintBucket" },
   { label: "Text", icon: "bx-text", section: "Tools", shortcut: "T / 8", action: "tool:text" },
   { label: "Insert image", icon: "bx-image-add", section: "Tools", shortcut: "9", action: "tool:image" },
   { label: "Eraser", icon: "bx-eraser", section: "Tools", shortcut: "E / 0", action: "tool:eraser" },
   { label: "Laser pointer", icon: "bxs-magic-wand", section: "Tools", shortcut: "K", action: "tool:laser" },
   { label: "Frame tool", icon: "bx-border-all", section: "Tools", shortcut: "F", action: "tool:frame" },
+  { label: "Lasso selection", icon: "bx-shape-polygon", section: "Tools", shortcut: "S", action: "tool:lasso" },
+  { label: "Web embed", icon: "bx-globe", section: "Tools", shortcut: "W", action: "tool:webEmbed" },
   // AI entries removed — feature is hidden behind a coming-soon screen.
   // Restore "Text to diagram..." / "Mermaid to diagram..." here when the
   // assistant ships.
@@ -4070,6 +4199,10 @@ var TOOL_ACTION_MAP = {
   "tool:arrow": TOOLS.ARROW,
   "tool:line": TOOLS.LINE,
   "tool:freehand": TOOLS.FREEHAND,
+  "tool:drawShape": TOOLS.DRAW_SHAPE,
+  "tool:paintBucket": TOOLS.PAINT_BUCKET,
+  "tool:lasso": TOOLS.LASSO,
+  "tool:webEmbed": TOOLS.WEB_EMBED,
   "tool:text": TOOLS.TEXT,
   "tool:image": TOOLS.IMAGE,
   "tool:eraser": TOOLS.ERASER,
@@ -4079,12 +4212,12 @@ var TOOL_ACTION_MAP = {
 function CommandPalette() {
   const open = useUIStore_default((s) => s.commandPaletteOpen);
   const toggleCommandPalette = useUIStore_default((s) => s.toggleCommandPalette);
-  const [query, setQuery] = useState17("");
-  const [activeTab, setActiveTab] = useState17("canvas");
-  const [selectedIndex, setSelectedIndex] = useState17(0);
-  const inputRef = useRef9(null);
-  const listRef = useRef9(null);
-  useEffect13(() => {
+  const [query, setQuery] = useState19("");
+  const [activeTab, setActiveTab] = useState19("canvas");
+  const [selectedIndex, setSelectedIndex] = useState19(0);
+  const inputRef = useRef10(null);
+  const listRef = useRef10(null);
+  useEffect15(() => {
     if (open) {
       setQuery("");
       setActiveTab("canvas");
@@ -4092,12 +4225,12 @@ function CommandPalette() {
       setTimeout(() => inputRef.current?.focus(), 50);
     }
   }, [open]);
-  useEffect13(() => {
+  useEffect15(() => {
     if (!open) return;
     const el = listRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
     if (el) el.scrollIntoView({ block: "nearest" });
   }, [selectedIndex, open]);
-  useEffect13(() => {
+  useEffect15(() => {
     setSelectedIndex(0);
   }, [query, activeTab]);
   if (!open) return null;
@@ -4211,22 +4344,22 @@ function CommandPalette() {
     }
   };
   let flatIndex = -1;
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: "fixed inset-0 z-[9999] flex items-center justify-center font-[lixFont]",
       onClick: toggleCommandPalette,
       children: [
-        /* @__PURE__ */ jsx21("div", { className: "absolute inset-0 bg-black/60 backdrop-blur-sm" }),
-        /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsx22("div", { className: "absolute inset-0 bg-black/60 backdrop-blur-sm" }),
+        /* @__PURE__ */ jsxs22(
           "div",
           {
             className: "relative bg-surface-card border border-border-light rounded-2xl w-[92vw] max-w-[1200px] h-[88vh] max-h-[88vh] mx-4 overflow-hidden flex flex-col",
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-border-light", children: [
-                /* @__PURE__ */ jsx21("i", { className: "bx bx-search text-text-muted text-lg" }),
-                /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-border-light", children: [
+                /* @__PURE__ */ jsx22("i", { className: "bx bx-search text-text-muted text-lg" }),
+                /* @__PURE__ */ jsx22(
                   "input",
                   {
                     ref: inputRef,
@@ -4239,38 +4372,38 @@ function CommandPalette() {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx21("div", { className: "grid grid-cols-2 gap-1.5 p-2 border-b border-border-light bg-surface-dark/40", children: TABS.map((tab) => /* @__PURE__ */ jsxs21(
+              /* @__PURE__ */ jsx22("div", { className: "grid grid-cols-2 gap-1.5 p-2 border-b border-border-light bg-surface-dark/40", children: TABS.map((tab) => /* @__PURE__ */ jsxs22(
                 "button",
                 {
                   type: "button",
                   onClick: () => setActiveTab(tab.id),
                   className: `flex items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors ${activeTab === tab.id ? "bg-accent-blue/20 text-accent-blue border border-accent-blue/35" : "text-text-muted border border-transparent hover:bg-surface-hover hover:text-text-primary"}`,
                   children: [
-                    /* @__PURE__ */ jsx21("i", { className: `bx ${tab.icon} text-base` }),
+                    /* @__PURE__ */ jsx22("i", { className: `bx ${tab.icon} text-base` }),
                     tab.label
                   ]
                 },
                 tab.id
               )) }),
-              /* @__PURE__ */ jsxs21("div", { ref: listRef, className: "flex-1 min-h-0 overflow-y-auto no-scrollbar py-2", children: [
-                filtered.length === 0 && /* @__PURE__ */ jsx21("div", { className: "px-4 py-6 text-center text-text-dim text-xs", children: "No commands found" }),
-                sectionOrder.map((section) => /* @__PURE__ */ jsxs21("div", { children: [
-                  /* @__PURE__ */ jsx21("div", { className: "px-4 pt-3 pb-1", children: /* @__PURE__ */ jsx21("span", { className: "text-text-dim text-xs uppercase tracking-wider", children: section }) }),
+              /* @__PURE__ */ jsxs22("div", { ref: listRef, className: "flex-1 min-h-0 overflow-y-auto no-scrollbar py-2", children: [
+                filtered.length === 0 && /* @__PURE__ */ jsx22("div", { className: "px-4 py-6 text-center text-text-dim text-xs", children: "No commands found" }),
+                sectionOrder.map((section) => /* @__PURE__ */ jsxs22("div", { children: [
+                  /* @__PURE__ */ jsx22("div", { className: "px-4 pt-3 pb-1", children: /* @__PURE__ */ jsx22("span", { className: "text-text-dim text-xs uppercase tracking-wider", children: section }) }),
                   sections[section].map((cmd) => {
                     flatIndex++;
                     const idx = flatIndex;
-                    return /* @__PURE__ */ jsxs21(
+                    return /* @__PURE__ */ jsxs22(
                       "button",
                       {
                         "data-index": idx,
                         onClick: () => handleCommand(cmd),
                         className: `w-full flex items-center justify-between px-4 py-2 text-text-secondary text-xs transition-all duration-100 ${idx === selectedIndex ? "bg-surface-hover text-text-primary" : "hover:bg-surface-hover/60"}`,
                         children: [
-                          /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-3", children: [
-                            /* @__PURE__ */ jsx21("i", { className: `bx ${cmd.icon} text-base text-text-muted` }),
+                          /* @__PURE__ */ jsxs22("span", { className: "flex items-center gap-3", children: [
+                            /* @__PURE__ */ jsx22("i", { className: `bx ${cmd.icon} text-base text-text-muted` }),
                             cmd.label
                           ] }),
-                          cmd.shortcut && /* @__PURE__ */ jsx21("div", { className: "flex items-center gap-0.5", children: /* @__PURE__ */ jsx21("kbd", { className: "px-2 py-0.5 bg-surface-dark rounded text-text-dim text-xs border border-border", children: cmd.shortcut }) })
+                          cmd.shortcut && /* @__PURE__ */ jsx22("div", { className: "flex items-center gap-0.5", children: /* @__PURE__ */ jsx22("kbd", { className: "px-2 py-0.5 bg-surface-dark rounded text-text-dim text-xs border border-border", children: cmd.shortcut }) })
                         ]
                       },
                       cmd.label
@@ -4287,8 +4420,8 @@ function CommandPalette() {
 }
 
 // src/react/components/modals/ExportImageModal.jsx
-import { useState as useState18, useEffect as useEffect14, useRef as useRef10, useCallback as useCallback14 } from "react";
-import { jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
+import { useState as useState20, useEffect as useEffect16, useRef as useRef11, useCallback as useCallback15 } from "react";
+import { jsx as jsx23, jsxs as jsxs23 } from "react/jsx-runtime";
 var SCALES = [1, 2, 3];
 function getCleanSVG2() {
   const svgEl = window.svg;
@@ -4330,16 +4463,16 @@ function renderToCanvas2(clone, scale, bgColor) {
 function ExportImageModal() {
   const open = useUIStore_default((s) => s.exportImageModalOpen);
   const toggleModal = useUIStore_default((s) => s.toggleExportImageModal);
-  const [scale, setScale] = useState18(2);
-  const [bgMode, setBgMode] = useState18("dark");
-  const [previewUrl, setPreviewUrl] = useState18(null);
-  const previewRef = useRef10(null);
-  const getBgColor = useCallback14(() => {
+  const [scale, setScale] = useState20(2);
+  const [bgMode, setBgMode] = useState20("dark");
+  const [previewUrl, setPreviewUrl] = useState20(null);
+  const previewRef = useRef11(null);
+  const getBgColor = useCallback15(() => {
     if (bgMode === "dark") return "#121212";
     if (bgMode === "light") return "#ffffff";
     return null;
   }, [bgMode]);
-  useEffect14(() => {
+  useEffect16(() => {
     if (!open) return;
     let cancelled = false;
     const generate = async () => {
@@ -4413,71 +4546,71 @@ function ExportImageModal() {
     );
     toggleModal();
   };
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: "fixed inset-0 z-[9999] flex items-center justify-center font-[lixFont]",
       onClick: toggleModal,
       children: [
-        /* @__PURE__ */ jsx22("div", { className: "absolute inset-0 bg-black/60 backdrop-blur-sm" }),
-        /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsx23("div", { className: "absolute inset-0 bg-black/60 backdrop-blur-sm" }),
+        /* @__PURE__ */ jsxs23(
           "div",
           {
             className: "relative bg-surface-card border border-border-light rounded-2xl w-full max-w-[720px] mx-4 overflow-hidden",
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-6 pt-5 pb-3", children: [
-                /* @__PURE__ */ jsx22("h2", { className: "text-text-primary text-base font-medium", children: "Export Image" }),
-                /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between px-6 pt-5 pb-3", children: [
+                /* @__PURE__ */ jsx23("h2", { className: "text-text-primary text-base font-medium", children: "Export Image" }),
+                /* @__PURE__ */ jsx23(
                   "button",
                   {
                     onClick: toggleModal,
                     className: "w-7 h-7 flex items-center justify-center rounded-lg text-text-muted hover:text-text-primary hover:bg-surface-hover transition-all duration-200",
-                    children: /* @__PURE__ */ jsx22("i", { className: "bx bx-x text-xl" })
+                    children: /* @__PURE__ */ jsx23("i", { className: "bx bx-x text-xl" })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx22("hr", { className: "border-border-light mx-6" }),
-              /* @__PURE__ */ jsxs22("div", { className: "flex gap-0", children: [
-                /* @__PURE__ */ jsx22("div", { className: "flex-1 p-6 flex items-center justify-center min-h-[300px]", children: /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsx23("hr", { className: "border-border-light mx-6" }),
+              /* @__PURE__ */ jsxs23("div", { className: "flex gap-0", children: [
+                /* @__PURE__ */ jsx23("div", { className: "flex-1 p-6 flex items-center justify-center min-h-[300px]", children: /* @__PURE__ */ jsx23(
                   "div",
                   {
                     ref: previewRef,
                     className: "w-full max-h-[320px] rounded-xl overflow-hidden border border-border-light flex items-center justify-center",
                     style: { background: bgMode === "none" ? "repeating-conic-gradient(#2a2a35 0% 25%, #1e1e28 0% 50%) 0 0 / 16px 16px" : getBgColor() },
-                    children: previewUrl ? /* @__PURE__ */ jsx22(
+                    children: previewUrl ? /* @__PURE__ */ jsx23(
                       "img",
                       {
                         src: previewUrl,
                         alt: "Export preview",
                         className: "w-full h-full object-contain max-h-[320px]"
                       }
-                    ) : /* @__PURE__ */ jsx22("span", { className: "text-text-dim text-xs", children: "Generating preview..." })
+                    ) : /* @__PURE__ */ jsx23("span", { className: "text-text-dim text-xs", children: "Generating preview..." })
                   }
                 ) }),
-                /* @__PURE__ */ jsxs22("div", { className: "w-[240px] border-l border-border-light p-5 flex flex-col gap-5", children: [
-                  /* @__PURE__ */ jsxs22("div", { children: [
-                    /* @__PURE__ */ jsx22("p", { className: "text-text-dim text-xs uppercase tracking-wider mb-2", children: "Background" }),
-                    /* @__PURE__ */ jsx22("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxs23("div", { className: "w-[240px] border-l border-border-light p-5 flex flex-col gap-5", children: [
+                  /* @__PURE__ */ jsxs23("div", { children: [
+                    /* @__PURE__ */ jsx23("p", { className: "text-text-dim text-xs uppercase tracking-wider mb-2", children: "Background" }),
+                    /* @__PURE__ */ jsx23("div", { className: "flex items-center gap-1", children: [
                       { value: "dark", label: "Dark", icon: "bxs-moon" },
                       { value: "light", label: "Light", icon: "bxs-sun" },
                       { value: "none", label: "None", icon: "bx-hide" }
-                    ].map((opt) => /* @__PURE__ */ jsxs22(
+                    ].map((opt) => /* @__PURE__ */ jsxs23(
                       "button",
                       {
                         onClick: () => setBgMode(opt.value),
                         className: `flex-1 flex items-center justify-center gap-1 py-1.5 rounded-lg text-xs transition-all duration-200 ${bgMode === opt.value ? "bg-accent text-text-primary" : "text-text-muted hover:bg-surface-hover"}`,
                         children: [
-                          /* @__PURE__ */ jsx22("i", { className: `bx ${opt.icon} text-xs` }),
+                          /* @__PURE__ */ jsx23("i", { className: `bx ${opt.icon} text-xs` }),
                           opt.label
                         ]
                       },
                       opt.value
                     )) })
                   ] }),
-                  /* @__PURE__ */ jsxs22("div", { children: [
-                    /* @__PURE__ */ jsx22("p", { className: "text-text-dim text-xs uppercase tracking-wider mb-2", children: "Scale" }),
-                    /* @__PURE__ */ jsx22("div", { className: "flex items-center gap-1", children: SCALES.map((s) => /* @__PURE__ */ jsxs22(
+                  /* @__PURE__ */ jsxs23("div", { children: [
+                    /* @__PURE__ */ jsx23("p", { className: "text-text-dim text-xs uppercase tracking-wider mb-2", children: "Scale" }),
+                    /* @__PURE__ */ jsx23("div", { className: "flex items-center gap-1", children: SCALES.map((s) => /* @__PURE__ */ jsxs23(
                       "button",
                       {
                         onClick: () => setScale(s),
@@ -4490,51 +4623,51 @@ function ExportImageModal() {
                       s
                     )) })
                   ] }),
-                  /* @__PURE__ */ jsx22("hr", { className: "border-border-light" }),
-                  /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-2", children: [
-                    /* @__PURE__ */ jsxs22(
+                  /* @__PURE__ */ jsx23("hr", { className: "border-border-light" }),
+                  /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-2", children: [
+                    /* @__PURE__ */ jsxs23(
                       "button",
                       {
                         onClick: handleExportPNG,
                         className: "w-full flex items-center gap-2 px-3 py-2.5 rounded-lg bg-accent-blue hover:bg-accent-blue-hover text-text-primary text-xs transition-all duration-200",
                         children: [
-                          /* @__PURE__ */ jsx22("i", { className: "bx bx-image text-sm" }),
+                          /* @__PURE__ */ jsx23("i", { className: "bx bx-image text-sm" }),
                           "Export as PNG"
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs22(
+                    /* @__PURE__ */ jsxs23(
                       "button",
                       {
                         onClick: handleExportSVG,
                         className: "w-full flex items-center gap-2 px-3 py-2.5 rounded-lg bg-surface hover:bg-surface-hover border border-border text-text-secondary text-xs transition-all duration-200",
                         children: [
-                          /* @__PURE__ */ jsx22("i", { className: "bx bx-code-alt text-sm" }),
+                          /* @__PURE__ */ jsx23("i", { className: "bx bx-code-alt text-sm" }),
                           "Export as SVG"
                         ]
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx22("hr", { className: "border-border-light" }),
-                  /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-2", children: [
-                    /* @__PURE__ */ jsxs22(
+                  /* @__PURE__ */ jsx23("hr", { className: "border-border-light" }),
+                  /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-2", children: [
+                    /* @__PURE__ */ jsxs23(
                       "button",
                       {
                         onClick: handleCopyPNG,
                         className: "w-full flex items-center gap-2 px-3 py-2 rounded-lg text-text-secondary text-xs hover:bg-surface-hover border border-border transition-all duration-200",
                         children: [
-                          /* @__PURE__ */ jsx22("i", { className: "bx bx-clipboard text-sm" }),
+                          /* @__PURE__ */ jsx23("i", { className: "bx bx-clipboard text-sm" }),
                           "Copy as PNG"
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsxs22(
+                    /* @__PURE__ */ jsxs23(
                       "button",
                       {
                         onClick: handleCopySVG,
                         className: "w-full flex items-center gap-2 px-3 py-2 rounded-lg text-text-secondary text-xs hover:bg-surface-hover border border-border transition-all duration-200",
                         children: [
-                          /* @__PURE__ */ jsx22("i", { className: "bx bx-copy text-sm" }),
+                          /* @__PURE__ */ jsx23("i", { className: "bx bx-copy text-sm" }),
                           "Copy as SVG"
                         ]
                       }
@@ -4551,12 +4684,12 @@ function ExportImageModal() {
 }
 
 // src/react/components/modals/LixScriptModal.jsx
-import { useEffect as useEffect15 } from "react";
-import { jsx as jsx23, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useEffect as useEffect17 } from "react";
+import { jsx as jsx24, jsxs as jsxs24 } from "react/jsx-runtime";
 function LixScriptModal() {
   const open = useUIStore_default((state) => state.aiModalOpen);
   const toggle = useUIStore_default((state) => state.toggleAIModal);
-  useEffect15(() => {
+  useEffect17(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") toggle();
@@ -4565,7 +4698,7 @@ function LixScriptModal() {
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, toggle]);
   if (!open) return null;
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       className: "fixed inset-0 z-[1100] flex items-center justify-center bg-black/40 backdrop-blur-sm font-[lixFont]",
@@ -4573,25 +4706,25 @@ function LixScriptModal() {
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "lixscript-coming-soon-title",
-      children: /* @__PURE__ */ jsxs23(
+      children: /* @__PURE__ */ jsxs24(
         "div",
         {
           onClick: (event) => event.stopPropagation(),
           className: "relative w-[520px] max-w-[94vw] bg-surface border border-border-light rounded-2xl px-8 py-10 shadow-2xl text-center",
           children: [
-            /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24(
               "button",
               {
                 onClick: toggle,
                 className: "absolute top-3 right-3 w-7 h-7 flex items-center justify-center rounded-md text-text-muted hover:text-text-primary hover:bg-surface-hover transition-colors",
                 title: "Close (Esc)",
-                children: /* @__PURE__ */ jsx23("i", { className: "bx bx-x text-lg" })
+                children: /* @__PURE__ */ jsx24("i", { className: "bx bx-x text-lg" })
               }
             ),
-            /* @__PURE__ */ jsx23("div", { className: "mx-auto mb-5 w-12 h-12 rounded-xl bg-accent-blue/10 border border-accent-blue/25 flex items-center justify-center", children: /* @__PURE__ */ jsx23("i", { className: "bx bx-plug text-2xl text-accent-blue" }) }),
-            /* @__PURE__ */ jsx23("span", { className: "inline-flex px-2.5 py-1 rounded-full bg-accent-blue/10 text-accent-blue text-[10px] font-semibold uppercase tracking-wider", children: "Coming soon" }),
-            /* @__PURE__ */ jsx23("h2", { id: "lixscript-coming-soon-title", className: "mt-4 text-text-primary text-xl font-medium", children: "LixScript MCP" }),
-            /* @__PURE__ */ jsx23("p", { className: "mt-2 text-text-muted text-sm leading-relaxed", children: "LixScript is being prepared as the programmable MCP interface for LixSketch. This workspace panel will become available with the supported platform integration." })
+            /* @__PURE__ */ jsx24("div", { className: "mx-auto mb-5 w-12 h-12 rounded-xl bg-accent-blue/10 border border-accent-blue/25 flex items-center justify-center", children: /* @__PURE__ */ jsx24("i", { className: "bx bx-plug text-2xl text-accent-blue" }) }),
+            /* @__PURE__ */ jsx24("span", { className: "inline-flex px-2.5 py-1 rounded-full bg-accent-blue/10 text-accent-blue text-[10px] font-semibold uppercase tracking-wider", children: "Coming soon" }),
+            /* @__PURE__ */ jsx24("h2", { id: "lixscript-coming-soon-title", className: "mt-4 text-text-primary text-xl font-medium", children: "LixScript MCP" }),
+            /* @__PURE__ */ jsx24("p", { className: "mt-2 text-text-muted text-sm leading-relaxed", children: "LixScript is being prepared as the programmable MCP interface for LixSketch. This workspace panel will become available with the supported platform integration." })
           ]
         }
       )
@@ -4600,8 +4733,8 @@ function LixScriptModal() {
 }
 
 // src/react/components/modals/GraphModal.jsx
-import { useCallback as useCallback15, useEffect as useEffect16, useRef as useRef11, useState as useState19 } from "react";
-import { jsx as jsx24, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useCallback as useCallback16, useEffect as useEffect18, useRef as useRef12, useState as useState21 } from "react";
+import { jsx as jsx25, jsxs as jsxs25 } from "react/jsx-runtime";
 var SAMPLE = `# One equation per line. Comments start with #.
 # Hit Cmd/Ctrl+Enter to render onto the canvas.
 
@@ -4616,12 +4749,12 @@ function parseEquations(text) {
 function GraphModal() {
   const open = useUIStore_default((s) => s.graphModalOpen);
   const toggle = useUIStore_default((s) => s.toggleGraphModal);
-  const [source, setSource] = useState19(SAMPLE);
-  const [settings, setSettings] = useState19(DEFAULT_SETTINGS);
-  const [busy, setBusy] = useState19(false);
-  const [status, setStatus] = useState19(null);
-  const taRef = useRef11(null);
-  useEffect16(() => {
+  const [source, setSource] = useState21(SAMPLE);
+  const [settings, setSettings] = useState21(DEFAULT_SETTINGS);
+  const [busy, setBusy] = useState21(false);
+  const [status, setStatus] = useState21(null);
+  const taRef = useRef12(null);
+  useEffect18(() => {
     if (!open) return;
     requestAnimationFrame(() => taRef.current?.focus());
     const onKey = (e) => {
@@ -4630,7 +4763,7 @@ function GraphModal() {
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [open, toggle]);
-  const render = useCallback15(async () => {
+  const render = useCallback16(async () => {
     if (busy) return;
     setBusy(true);
     setStatus(null);
@@ -4662,7 +4795,7 @@ function GraphModal() {
       setBusy(false);
     }
   }, [source, settings, busy, toggle]);
-  const handleKeyDown = useCallback15((e) => {
+  const handleKeyDown = useCallback16((e) => {
     if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
       e.preventDefault();
       render();
@@ -4673,36 +4806,36 @@ function GraphModal() {
     if (Number.isFinite(v)) setSettings((s) => ({ ...s, [key]: v }));
   };
   if (!open) return null;
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       className: "fixed inset-0 z-[1100] flex items-center justify-center bg-black/60 backdrop-blur-sm font-[lixFont]",
       onClick: toggle,
       role: "dialog",
       "aria-modal": "true",
-      children: /* @__PURE__ */ jsxs24(
+      children: /* @__PURE__ */ jsxs25(
         "div",
         {
           onClick: (e) => e.stopPropagation(),
           className: "relative w-[560px] max-w-[94vw] bg-surface border border-border-light rounded-2xl p-5 shadow-2xl flex flex-col gap-3",
           children: [
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx25(
               "button",
               {
                 onClick: toggle,
                 className: "absolute top-3 right-3 w-7 h-7 flex items-center justify-center rounded-md text-text-muted hover:text-text-primary hover:bg-surface-hover transition-colors",
                 title: "Close (Esc)",
-                children: /* @__PURE__ */ jsx24("i", { className: "bx bx-x text-lg" })
+                children: /* @__PURE__ */ jsx25("i", { className: "bx bx-x text-lg" })
               }
             ),
-            /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx24("div", { className: "w-8 h-8 rounded-lg bg-accent-blue/10 border border-accent-blue/30 flex items-center justify-center", children: /* @__PURE__ */ jsx24("i", { className: "bx bx-line-chart text-accent-blue" }) }),
-              /* @__PURE__ */ jsxs24("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsx24("h2", { className: "text-text-primary text-sm font-medium", children: "Graph" }),
-                /* @__PURE__ */ jsx24("p", { className: "text-text-dim text-[11px]", children: "One equation per line \u2014 plotted on the canvas. No AI involved." })
+            /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx25("div", { className: "w-8 h-8 rounded-lg bg-accent-blue/10 border border-accent-blue/30 flex items-center justify-center", children: /* @__PURE__ */ jsx25("i", { className: "bx bx-line-chart text-accent-blue" }) }),
+              /* @__PURE__ */ jsxs25("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx25("h2", { className: "text-text-primary text-sm font-medium", children: "Graph" }),
+                /* @__PURE__ */ jsx25("p", { className: "text-text-dim text-[11px]", children: "One equation per line \u2014 plotted on the canvas. No AI involved." })
               ] })
             ] }),
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx25(
               "textarea",
               {
                 ref: taRef,
@@ -4713,10 +4846,10 @@ function GraphModal() {
                 className: "w-full h-[200px] resize-none bg-surface-card border border-border-light rounded-lg px-3 py-2 text-[12px] text-text-primary font-[lixCode] outline-none focus:border-accent-blue/50"
               }
             ),
-            /* @__PURE__ */ jsxs24("div", { className: "grid grid-cols-4 gap-2 text-[11px]", children: [
-              /* @__PURE__ */ jsxs24("label", { className: "flex flex-col gap-0.5", children: [
-                /* @__PURE__ */ jsx24("span", { className: "text-text-dim", children: "xMin" }),
-                /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsxs25("div", { className: "grid grid-cols-4 gap-2 text-[11px]", children: [
+              /* @__PURE__ */ jsxs25("label", { className: "flex flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsx25("span", { className: "text-text-dim", children: "xMin" }),
+                /* @__PURE__ */ jsx25(
                   "input",
                   {
                     type: "number",
@@ -4726,9 +4859,9 @@ function GraphModal() {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs24("label", { className: "flex flex-col gap-0.5", children: [
-                /* @__PURE__ */ jsx24("span", { className: "text-text-dim", children: "xMax" }),
-                /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsxs25("label", { className: "flex flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsx25("span", { className: "text-text-dim", children: "xMax" }),
+                /* @__PURE__ */ jsx25(
                   "input",
                   {
                     type: "number",
@@ -4738,9 +4871,9 @@ function GraphModal() {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs24("label", { className: "flex flex-col gap-0.5", children: [
-                /* @__PURE__ */ jsx24("span", { className: "text-text-dim", children: "yMin" }),
-                /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsxs25("label", { className: "flex flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsx25("span", { className: "text-text-dim", children: "yMin" }),
+                /* @__PURE__ */ jsx25(
                   "input",
                   {
                     type: "number",
@@ -4750,9 +4883,9 @@ function GraphModal() {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs24("label", { className: "flex flex-col gap-0.5", children: [
-                /* @__PURE__ */ jsx24("span", { className: "text-text-dim", children: "yMax" }),
-                /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsxs25("label", { className: "flex flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsx25("span", { className: "text-text-dim", children: "yMax" }),
+                /* @__PURE__ */ jsx25(
                   "input",
                   {
                     type: "number",
@@ -4763,9 +4896,9 @@ function GraphModal() {
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between", children: [
-              status ? /* @__PURE__ */ jsx24("span", { className: `text-[11px] ${status.tone === "error" ? "text-red-400" : "text-green-400"}`, children: status.message }) : /* @__PURE__ */ jsx24("span", { className: "text-text-dim text-[11px]", children: "Cmd/Ctrl+Enter to render \xB7 Esc to close" }),
-              /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between", children: [
+              status ? /* @__PURE__ */ jsx25("span", { className: `text-[11px] ${status.tone === "error" ? "text-red-400" : "text-green-400"}`, children: status.message }) : /* @__PURE__ */ jsx25("span", { className: "text-text-dim text-[11px]", children: "Cmd/Ctrl+Enter to render \xB7 Esc to close" }),
+              /* @__PURE__ */ jsx25(
                 "button",
                 {
                   onClick: render,
@@ -4782,13 +4915,87 @@ function GraphModal() {
   );
 }
 
+// src/react/components/modals/WebEmbedModal.jsx
+import { useEffect as useEffect19, useRef as useRef13, useState as useState22 } from "react";
+import { jsx as jsx26, jsxs as jsxs26 } from "react/jsx-runtime";
+function WebEmbedModal() {
+  const [open, setOpen] = useState22(false), [url, setUrl] = useState22(""), [error, setError] = useState22("");
+  const inputRef = useRef13(null);
+  useEffect19(() => {
+    const show = () => {
+      setOpen(true);
+      setError("");
+      requestAnimationFrame(() => inputRef.current?.focus());
+    };
+    window.__showWebEmbedModal = show;
+    window.addEventListener("lixsketch:open-web-embed", show);
+    return () => {
+      delete window.__showWebEmbedModal;
+      window.removeEventListener("lixsketch:open-web-embed", show);
+    };
+  }, []);
+  useEffect19(() => {
+    if (!open) return void 0;
+    const escape = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+        useSketchStore_default.getState().setActiveTool(TOOLS.SELECT);
+      }
+    };
+    window.addEventListener("keydown", escape);
+    return () => window.removeEventListener("keydown", escape);
+  }, [open]);
+  if (!open) return null;
+  let requestedHostname = "";
+  try {
+    requestedHostname = new URL(url).hostname;
+  } catch {
+  }
+  const whitelistRequestUrl = `https://github.com/elixpo/sketch.elixpo/issues/new?template=web-embed-whitelist.yml&title=${encodeURIComponent(`[Web embed whitelist] ${requestedHostname || "New hostname"}`)}`;
+  const submit = (e) => {
+    e.preventDefault();
+    const normalized = normalizeWebEmbedUrl(url);
+    if (!normalized) {
+      setError("This site is not currently supported for web embeds.");
+      return;
+    }
+    window.__placeWebEmbed?.(normalized);
+    setOpen(false);
+    setUrl("");
+  };
+  return /* @__PURE__ */ jsx26("div", { className: "fixed inset-0 z-[12000] flex items-center justify-center bg-black/55 p-4 backdrop-blur-sm", children: /* @__PURE__ */ jsxs26("form", { onSubmit: submit, className: "w-full max-w-xl rounded-2xl border border-border-light bg-surface-card p-6 font-[lixFont] shadow-2xl", children: [
+    /* @__PURE__ */ jsxs26("div", { className: "mb-5 flex justify-between", children: [
+      /* @__PURE__ */ jsxs26("div", { children: [
+        /* @__PURE__ */ jsx26("h2", { className: "text-lg text-text-primary", children: "Embed a website" }),
+        /* @__PURE__ */ jsx26("p", { className: "mt-1 text-xs text-text-muted", children: "One secure embed in a movable, resizable frame." })
+      ] }),
+      /* @__PURE__ */ jsx26("button", { type: "button", onClick: () => {
+        setOpen(false);
+        useSketchStore_default.getState().setActiveTool(TOOLS.SELECT);
+      }, children: /* @__PURE__ */ jsx26("i", { className: "bx bx-x text-2xl" }) })
+    ] }),
+    /* @__PURE__ */ jsx26("input", { ref: inputRef, value: url, onChange: (e) => {
+      setUrl(e.target.value);
+      setError("");
+    }, placeholder: "https://www.youtube.com/watch?v=...", className: "w-full rounded-xl border border-border-light bg-surface px-4 py-3 text-sm text-text-primary outline-none focus:border-accent" }),
+    error && /* @__PURE__ */ jsxs26("div", { className: "mt-3 flex items-center justify-between gap-3 rounded-xl border border-border-light bg-surface/60 px-3 py-2.5", children: [
+      /* @__PURE__ */ jsxs26("p", { className: "text-xs text-text-muted", children: [
+        /* @__PURE__ */ jsx26("i", { className: "bx bx-info-circle mr-1" }),
+        error
+      ] }),
+      /* @__PURE__ */ jsx26("a", { href: whitelistRequestUrl, target: "_blank", rel: "noreferrer", className: "shrink-0 rounded-lg border border-accent/50 px-3 py-1.5 text-xs text-accent", children: "Request whitelist" })
+    ] }),
+    /* @__PURE__ */ jsx26("button", { type: "submit", className: "mt-5 w-full rounded-xl bg-accent px-4 py-3 text-sm text-white", children: "Place on canvas" })
+  ] }) });
+}
+
 // src/react/LixSketchCanvas.jsx
-import { jsx as jsx25, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs27 } from "react/jsx-runtime";
 var _saveScene = null;
 var _loadScene = null;
 async function ensureSceneSerializer() {
   if (_saveScene && _loadScene) return;
-  const m = await import("./SceneSerializer-RDISX4X7.js");
+  const m = await import("./SceneSerializer-SG6SJN5X.js");
   _saveScene = m.saveScene;
   _loadScene = m.loadScene;
 }
@@ -4801,14 +5008,14 @@ function LixSketchCanvas({
   className = "",
   style = null
 }) {
-  const wrapperRef = useRef12(null);
-  const lastSceneJsonRef = useRef12("");
-  const debounceRef = useRef12(null);
-  const [bootstrapped, setBootstrapped] = useState20(false);
-  useEffect17(() => {
+  const wrapperRef = useRef14(null);
+  const lastSceneJsonRef = useRef14("");
+  const debounceRef = useRef14(null);
+  const [bootstrapped, setBootstrapped] = useState23(false);
+  useEffect20(() => {
     installImageUploadBridge(onUploadImage);
   }, [onUploadImage]);
-  useEffect17(() => {
+  useEffect20(() => {
     if (typeof document === "undefined" || !document.fonts?.load) return;
     Promise.allSettled([
       document.fonts.load("1em lixFont"),
@@ -4816,7 +5023,7 @@ function LixSketchCanvas({
     ]).catch(() => {
     });
   }, []);
-  useEffect17(() => {
+  useEffect20(() => {
     if (!initialScene || bootstrapped) return;
     let cancelled = false;
     async function tryLoad() {
@@ -4844,7 +5051,7 @@ function LixSketchCanvas({
       cancelled = true;
     };
   }, [initialScene, bootstrapped]);
-  useEffect17(() => {
+  useEffect20(() => {
     function handleKey(e) {
       if (e.key === "Escape") {
         useUIStore_default.getState().closeAllModals?.();
@@ -4893,7 +5100,7 @@ function LixSketchCanvas({
     window.addEventListener("keydown", handleKey);
     return () => window.removeEventListener("keydown", handleKey);
   }, [onSceneChange]);
-  useEffect17(() => {
+  useEffect20(() => {
     if (!onSceneChange) return;
     let svg = null;
     let observer = null;
@@ -4939,84 +5146,86 @@ function LixSketchCanvas({
       clearTimeout(debounceRef.current);
     };
   }, [onSceneChange]);
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       ref: wrapperRef,
       className: `lixsketch-canvas-root canvas-mode ${className}`,
       style,
       children: [
-        /* @__PURE__ */ jsx25(SVGCanvas, {}),
-        /* @__PURE__ */ jsx25(Toolbar, {}),
-        /* @__PURE__ */ jsx25(Footer, {}),
-        /* @__PURE__ */ jsx25(AppMenu, {}),
-        /* @__PURE__ */ jsx25(RectangleSidebar, {}),
-        /* @__PURE__ */ jsx25(CircleSidebar, {}),
-        /* @__PURE__ */ jsx25(LineSidebar, {}),
-        /* @__PURE__ */ jsx25(ArrowSidebar, {}),
-        /* @__PURE__ */ jsx25(PaintbrushSidebar, {}),
-        /* @__PURE__ */ jsx25(TextSidebar, {}),
-        /* @__PURE__ */ jsx25(FrameSidebar, {}),
-        /* @__PURE__ */ jsx25(IconSidebar, {}),
-        /* @__PURE__ */ jsx25(ImageSidebar, {}),
-        /* @__PURE__ */ jsx25(MultiSelectActions, {}),
-        /* @__PURE__ */ jsx25(CommandPalette, {}),
-        /* @__PURE__ */ jsx25(ExportImageModal, {}),
-        /* @__PURE__ */ jsx25(LixScriptModal, {}),
-        /* @__PURE__ */ jsx25(GraphModal, {}),
-        /* @__PURE__ */ jsx25(ContextMenu, {}),
-        /* @__PURE__ */ jsx25(FindBar, {}),
-        /* @__PURE__ */ jsx25(ImageSourcePicker, {}),
-        /* @__PURE__ */ jsx25(CanvasLoadingOverlay, {}),
-        /* @__PURE__ */ jsxs25("div", { className: "lixsketch-floating-header absolute top-2 right-2 z-[1000] flex items-center gap-1.5 font-[lixFont]", children: [
-          /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx27(SVGCanvas, {}),
+        /* @__PURE__ */ jsx27(Toolbar, {}),
+        /* @__PURE__ */ jsx27(Footer, {}),
+        /* @__PURE__ */ jsx27(AppMenu, {}),
+        /* @__PURE__ */ jsx27(RectangleSidebar, {}),
+        /* @__PURE__ */ jsx27(CircleSidebar, {}),
+        /* @__PURE__ */ jsx27(PaintBucketSidebar, {}),
+        /* @__PURE__ */ jsx27(LineSidebar, {}),
+        /* @__PURE__ */ jsx27(ArrowSidebar, {}),
+        /* @__PURE__ */ jsx27(PaintbrushSidebar, {}),
+        /* @__PURE__ */ jsx27(TextSidebar, {}),
+        /* @__PURE__ */ jsx27(FrameSidebar, {}),
+        /* @__PURE__ */ jsx27(IconSidebar, {}),
+        /* @__PURE__ */ jsx27(ImageSidebar, {}),
+        /* @__PURE__ */ jsx27(MultiSelectActions, {}),
+        /* @__PURE__ */ jsx27(CommandPalette, {}),
+        /* @__PURE__ */ jsx27(ExportImageModal, {}),
+        /* @__PURE__ */ jsx27(LixScriptModal, {}),
+        /* @__PURE__ */ jsx27(GraphModal, {}),
+        /* @__PURE__ */ jsx27(WebEmbedModal, {}),
+        /* @__PURE__ */ jsx27(ContextMenu, {}),
+        /* @__PURE__ */ jsx27(FindBar, {}),
+        /* @__PURE__ */ jsx27(ImageSourcePicker, {}),
+        /* @__PURE__ */ jsx27(CanvasLoadingOverlay, {}),
+        /* @__PURE__ */ jsxs27("div", { className: "lixsketch-floating-header absolute top-2 right-2 z-[1000] flex items-center gap-1.5 font-[lixFont]", children: [
+          /* @__PURE__ */ jsx27(
             "button",
             {
               type: "button",
               title: "LixScript MCP \u2014 coming soon",
               onClick: () => useUIStore_default.getState().toggleAIModal?.(),
               className: "w-9 h-9 flex items-center justify-center rounded-lg bg-surface border border-border-light text-text-muted hover:text-text-primary hover:bg-surface-hover transition-colors cursor-pointer",
-              children: /* @__PURE__ */ jsx25("i", { className: "bx bx-code-alt text-base" })
+              children: /* @__PURE__ */ jsx27("i", { className: "bx bx-code-alt text-base" })
             }
           ),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx27(
             "button",
             {
               type: "button",
               title: "Graph \u2014 plot equations",
               onClick: () => useUIStore_default.getState().toggleGraphModal?.(),
               className: "w-9 h-9 flex items-center justify-center rounded-lg bg-surface border border-border-light text-text-muted hover:text-text-primary hover:bg-surface-hover transition-colors cursor-pointer",
-              children: /* @__PURE__ */ jsx25("i", { className: "bx bx-line-chart text-base" })
+              children: /* @__PURE__ */ jsx27("i", { className: "bx bx-line-chart text-base" })
             }
           ),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx27(
             "button",
             {
               type: "button",
               title: "Commands and shortcuts (Ctrl+/)",
               onClick: () => useUIStore_default.getState().toggleCommandPalette?.(),
               className: "w-9 h-9 flex items-center justify-center rounded-lg bg-surface border border-border-light text-text-muted hover:text-text-primary hover:bg-surface-hover transition-colors cursor-pointer",
-              children: /* @__PURE__ */ jsx25("i", { className: "bx bx-command text-base" })
+              children: /* @__PURE__ */ jsx27("i", { className: "bx bx-command text-base" })
             }
           ),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx27(
             "button",
             {
               type: "button",
               title: "Menu",
               onClick: () => useUIStore_default.getState().toggleMenu?.(),
               className: "w-9 h-9 flex items-center justify-center rounded-lg bg-surface border border-border-light text-text-muted hover:text-text-primary hover:bg-surface-hover transition-colors cursor-pointer",
-              children: /* @__PURE__ */ jsx25("i", { className: "bx bx-menu text-base" })
+              children: /* @__PURE__ */ jsx27("i", { className: "bx bx-menu text-base" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs25(
+        /* @__PURE__ */ jsxs27(
           "div",
           {
             id: "lixsketch-save-toast",
             className: "hidden fixed bottom-20 left-1/2 -translate-x-1/2 z-[9999] px-4 py-2 rounded-xl bg-surface/85 backdrop-blur-md border border-border-light text-text-secondary text-xs font-[lixFont] pointer-events-none",
             children: [
-              /* @__PURE__ */ jsx25("i", { className: "bx bx-check text-green-400 mr-1.5" }),
+              /* @__PURE__ */ jsx27("i", { className: "bx bx-check text-green-400 mr-1.5" }),
               "Saved"
             ]
           }
@@ -5090,7 +5299,11 @@ var TOOLS2 = {
   LASER: "laser",
   IMAGE: "image",
   FRAME: "frame",
-  ICON: "icon"
+  ICON: "icon",
+  DRAW_SHAPE: "draw-shape",
+  PAINT_BUCKET: "paint-bucket",
+  LASSO: "lasso",
+  WEB_EMBED: "web-embed"
 };
 
 // src/EngineShortcuts.js
@@ -5115,7 +5328,11 @@ var SHORTCUT_MAP2 = {
   0: "eraser",
   i: "icon",
   f: "frame",
-  k: "laser"
+  k: "laser",
+  d: "draw-shape",
+  b: "paint-bucket",
+  s: "lasso",
+  w: "web-embed"
 };
 var TOOLS3 = {
   SELECT: "select",
@@ -5131,7 +5348,11 @@ var TOOLS3 = {
   LASER: "laser",
   IMAGE: "image",
   FRAME: "frame",
-  ICON: "icon"
+  ICON: "icon",
+  DRAW_SHAPE: "draw-shape",
+  PAINT_BUCKET: "paint-bucket",
+  LASSO: "lasso",
+  WEB_EMBED: "web-embed"
 };
 function isTypingTarget(target) {
   if (!target) return false;
@@ -5328,6 +5549,7 @@ function installEngineShortcuts(engine, options = {}) {
     if (skipWhen && skipWhen(e)) return;
     e.preventDefault();
     spaceHeld = true;
+    window.__spacePanActive = true;
     const active = getActiveTool();
     if (active && active !== TOOLS3.PAN) {
       toolBeforeSpace = active;
@@ -5337,12 +5559,21 @@ function installEngineShortcuts(engine, options = {}) {
   function handleKeyUp(e) {
     if (e.code === "Space" && spaceHeld) {
       spaceHeld = false;
+      window.__spacePanActive = false;
       if (toolBeforeSpace) {
         setTool(toolBeforeSpace);
         toolBeforeSpace = null;
       }
     }
   }
+  function handleWindowBlur() {
+    spaceHeld = false;
+    window.__spacePanActive = false;
+    if (toolBeforeSpace) {
+      setTool(toolBeforeSpace);
+      toolBeforeSpace = null;
+    }
+  }
   function handleWheel(e) {
     if (e.ctrlKey || e.metaKey) e.preventDefault();
   }
@@ -5350,11 +5581,14 @@ function installEngineShortcuts(engine, options = {}) {
   document.addEventListener("keydown", handleSpaceDown);
   document.addEventListener("keyup", handleKeyUp);
   document.addEventListener("wheel", handleWheel, { passive: false });
+  window.addEventListener("blur", handleWindowBlur);
   return function uninstall() {
     document.removeEventListener("keydown", handleKeyDown);
     document.removeEventListener("keydown", handleSpaceDown);
     document.removeEventListener("keyup", handleKeyUp);
     document.removeEventListener("wheel", handleWheel);
+    window.removeEventListener("blur", handleWindowBlur);
+    window.__spacePanActive = false;
   };
 }
 export {