@zuilib/text-editor 0.0.2 → 0.2.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/MarkdownEditor.tsx
-import { useCallback, useEffect as useEffect5, useMemo, useRef as useRef2, useState } from "react";
+import { useCallback as useCallback5, useEffect as useEffect9, useMemo, useRef as useRef4, useState as useState5 } from "react";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
@@ -10,12 +10,14 @@ import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
 import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
 import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
 import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
-import { CHECK_LIST, CODE, TRANSFORMERS } from "@lexical/markdown";
-import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
+import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
+import { CHECK_LIST, CODE, TRANSFORMERS as TRANSFORMERS2 } from "@lexical/markdown";
+import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
 import { CodeHighlightNode, CodeNode } from "@lexical/code";
 import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { TableCellNode as TableCellNode2, TableNode as TableNode2, TableRowNode as TableRowNode2 } from "@lexical/table";
 
 // src/plugins/ChecklistShortcutPlugin.tsx
 import { useEffect } from "react";
@@ -79,6 +81,7 @@ import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexica
 import {
   $createParagraphNode,
   $getSelection,
+  $isLineBreakNode,
   $isParagraphNode,
   $isRangeSelection,
   $isRootOrShadowRoot,
@@ -122,10 +125,20 @@ function CodeBlockShortcutPlugin() {
         if (!$isCodeNode(topNode)) return false;
         const root = topNode.getParent();
         if (!root || root.getLastChild()?.getKey() !== topNode.getKey()) return false;
-        const codeText = topNode.getTextContent();
-        const lastNewline = codeText.lastIndexOf("\n");
-        const isOnLastLine = anchor.offset >= lastNewline + 1;
-        if (!isOnLastLine) return false;
+        const hasNewline = (node) => $isLineBreakNode(node) || node.getTextContent().includes("\n");
+        let hasContentBelow;
+        if (anchorNode.getKey() === topNode.getKey()) {
+          hasContentBelow = topNode.getChildren().slice(anchor.offset).some(hasNewline);
+        } else if (anchorNode.getTextContent().slice(anchor.offset).includes("\n")) {
+          hasContentBelow = true;
+        } else {
+          let child = anchorNode;
+          while (child.getParent() && child.getParent().getKey() !== topNode.getKey()) {
+            child = child.getParent();
+          }
+          hasContentBelow = child.getNextSiblings().some(hasNewline);
+        }
+        if (hasContentBelow) return false;
         const paragraph = $createParagraphNode();
         topNode.insertAfter(paragraph);
         paragraph.selectStart();
@@ -153,9 +166,146 @@ function CodeHighlightPlugin() {
   return null;
 }
 
-// src/plugins/MarkdownSyncPlugin.tsx
-import { useEffect as useEffect4, useRef } from "react";
+// src/plugins/FoldingPlugin.tsx
+import {
+  useCallback,
+  useEffect as useEffect4,
+  useRef,
+  useState
+} from "react";
+import { $getRoot, $getSelection as $getSelection2, $isRangeSelection as $isRangeSelection2 } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
+import { $isHeadingNode } from "@lexical/rich-text";
+import { jsx } from "react/jsx-runtime";
+var HEADING_LEVELS = {
+  h1: 1,
+  h2: 2,
+  h3: 3,
+  h4: 4,
+  h5: 5,
+  h6: 6
+};
+function FoldingPlugin() {
+  const [editor] = useLexicalComposerContext4();
+  const [foldedKeys, setFoldedKeys] = useState(/* @__PURE__ */ new Set());
+  const [buttons, setButtons] = useState([]);
+  const foldedRef = useRef(foldedKeys);
+  foldedRef.current = foldedKeys;
+  const sync = useCallback(() => {
+    editor.getEditorState().read(() => {
+      const children = $getRoot().getChildren();
+      const folded = foldedRef.current;
+      const hidden = /* @__PURE__ */ new Set();
+      const headings = [];
+      for (let i = 0; i < children.length; i++) {
+        const node = children[i];
+        if (!$isHeadingNode(node)) continue;
+        const level = HEADING_LEVELS[node.getTag()] ?? 6;
+        const isFolded = folded.has(node.getKey());
+        headings.push({ key: node.getKey(), folded: isFolded });
+        if (!isFolded) continue;
+        for (let j = i + 1; j < children.length; j++) {
+          const sibling = children[j];
+          if ($isHeadingNode(sibling) && (HEADING_LEVELS[sibling.getTag()] ?? 6) <= level) {
+            break;
+          }
+          hidden.add(sibling.getKey());
+        }
+      }
+      const selection = $getSelection2();
+      if ($isRangeSelection2(selection)) {
+        const topLevel = selection.anchor.getNode().getTopLevelElement();
+        if (topLevel && hidden.has(topLevel.getKey())) {
+          let node = topLevel.getPreviousSibling();
+          while (node) {
+            if ($isHeadingNode(node) && folded.has(node.getKey())) {
+              const unfoldKey = node.getKey();
+              setFoldedKeys((prev) => {
+                const next = new Set(prev);
+                next.delete(unfoldKey);
+                return next;
+              });
+              return;
+            }
+            node = node.getPreviousSibling();
+          }
+        }
+      }
+      for (const child of children) {
+        const element = editor.getElementByKey(child.getKey());
+        if (!element) continue;
+        const shouldHide = hidden.has(child.getKey());
+        if (shouldHide) {
+          element.style.display = "none";
+        } else if (element.style.display === "none") {
+          element.style.display = "";
+        }
+      }
+      setButtons(
+        headings.map(({ key, folded: isFolded }) => {
+          const element = editor.getElementByKey(key);
+          element?.classList.toggle("zui-heading-folded", isFolded);
+          return {
+            key,
+            folded: isFolded,
+            top: element?.offsetTop ?? 0,
+            height: element?.offsetHeight ?? 0
+          };
+        })
+      );
+    });
+  }, [editor]);
+  useEffect4(() => {
+    sync();
+    const unregister = editor.registerUpdateListener(sync);
+    const rootElement = editor.getRootElement();
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(sync) : null;
+    if (rootElement && observer) observer.observe(rootElement);
+    return () => {
+      unregister();
+      observer?.disconnect();
+    };
+  }, [editor, sync, foldedKeys]);
+  const toggle = useCallback((key) => {
+    setFoldedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "zui-text-editor-fold-gutter", children: buttons.map(({ key, folded, top, height }) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: `zui-text-editor-fold ${folded ? "is-folded" : ""}`,
+      style: { top: top + Math.max(0, (Math.min(height, 44) - 18) / 2) },
+      title: folded ? "Expand section" : "Collapse section",
+      "aria-label": folded ? "Expand section" : "Collapse section",
+      "aria-expanded": !folded,
+      onClick: () => toggle(key),
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          viewBox: "0 0 20 20",
+          width: "12",
+          height: "12",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", { d: "M6 8l4 4 4-4" })
+        }
+      )
+    },
+    key
+  )) });
+}
+
+// src/plugins/MarkdownSyncPlugin.tsx
+import { useEffect as useEffect5, useRef as useRef2 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
 import {
   $convertFromMarkdownString,
   $convertToMarkdownString
@@ -165,11 +315,11 @@ function MarkdownSyncPlugin({
   onChange,
   transformers
 }) {
-  const [editor] = useLexicalComposerContext4();
-  const lastMarkdownRef = useRef("");
-  const onChangeRef = useRef(onChange);
+  const [editor] = useLexicalComposerContext5();
+  const lastMarkdownRef = useRef2("");
+  const onChangeRef = useRef2(onChange);
   onChangeRef.current = onChange;
-  useEffect4(() => {
+  useEffect5(() => {
     if (initialMarkdown && initialMarkdown !== lastMarkdownRef.current) {
       lastMarkdownRef.current = initialMarkdown;
       editor.update(() => {
@@ -177,7 +327,7 @@ function MarkdownSyncPlugin({
       }, { tag: "initial-load" });
     }
   }, [editor, initialMarkdown]);
-  useEffect4(() => {
+  useEffect5(() => {
     return editor.registerUpdateListener(
       ({ editorState, dirtyElements, dirtyLeaves, tags }) => {
         if (dirtyElements.size === 0 && dirtyLeaves.size === 0) return;
@@ -192,9 +342,1943 @@ function MarkdownSyncPlugin({
   return null;
 }
 
-// src/nodes/FrontmatterNode.ts
+// src/plugins/OutlinePlugin.tsx
+import { useCallback as useCallback2, useEffect as useEffect6, useState as useState2 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
+import {
+  TableOfContentsPlugin
+} from "@lexical/react/LexicalTableOfContentsPlugin";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var INDENT_PER_LEVEL = {
+  h1: 0,
+  h2: 1,
+  h3: 2,
+  h4: 3,
+  h5: 4,
+  h6: 5
+};
+function OutlinePlugin() {
+  const [editor] = useLexicalComposerContext6();
+  const [collapsed, setCollapsed] = useState2(false);
+  const [activeKey, setActiveKey] = useState2(null);
+  useEffect6(() => {
+    const rootElement = editor.getRootElement();
+    const scroller = rootElement?.closest(".zui-text-editor");
+    if (!rootElement || !(scroller instanceof HTMLElement)) return;
+    let frame = 0;
+    const updateActive = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        const headings = rootElement.querySelectorAll(
+          "h1, h2, h3, h4, h5, h6"
+        );
+        const threshold = scroller.scrollTop + 80;
+        let current = null;
+        for (const el of headings) {
+          if (el.offsetTop <= threshold) {
+            current = el.getAttribute("data-outline-key");
+          }
+        }
+        setActiveKey(current);
+      });
+    };
+    updateActive();
+    scroller.addEventListener("scroll", updateActive, { passive: true });
+    const unregister = editor.registerUpdateListener(updateActive);
+    return () => {
+      cancelAnimationFrame(frame);
+      scroller.removeEventListener("scroll", updateActive);
+      unregister();
+    };
+  }, [editor]);
+  const scrollTo = useCallback2(
+    (key) => {
+      editor.getEditorState().read(() => {
+        const element = editor.getElementByKey(key);
+        element?.scrollIntoView({ behavior: "smooth", block: "start" });
+      });
+    },
+    [editor]
+  );
+  return /* @__PURE__ */ jsx2(TableOfContentsPlugin, { children: (entries) => {
+    for (const [key] of entries) {
+      editor.getElementByKey(key)?.setAttribute("data-outline-key", key);
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `zui-text-editor-outline ${collapsed ? "is-collapsed" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: "zui-text-editor-outline-toggle",
+              title: collapsed ? "Show outline" : "Hide outline",
+              "aria-label": collapsed ? "Show outline" : "Hide outline",
+              "aria-expanded": !collapsed,
+              onClick: () => setCollapsed((c) => !c),
+              children: /* @__PURE__ */ jsx2(
+                "svg",
+                {
+                  viewBox: "0 0 20 20",
+                  width: "14",
+                  height: "14",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.8",
+                  strokeLinecap: "round",
+                  children: /* @__PURE__ */ jsx2("path", { d: "M4 5h12M4 10h8M4 15h10" })
+                }
+              )
+            }
+          ),
+          !collapsed && /* @__PURE__ */ jsxs("nav", { className: "zui-text-editor-outline-list", "aria-label": "Table of contents", children: [
+            entries.length === 0 && /* @__PURE__ */ jsx2("div", { className: "zui-text-editor-outline-empty", children: "No headings" }),
+            entries.map(([key, text, tag]) => /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                className: `zui-text-editor-outline-item ${key === activeKey ? "is-active" : ""}`,
+                style: {
+                  paddingLeft: `${0.5 + INDENT_PER_LEVEL[tag] * 0.75}rem`
+                },
+                onClick: () => scrollTo(key),
+                children: text || "Untitled"
+              },
+              key
+            ))
+          ] })
+        ]
+      }
+    );
+  } });
+}
+
+// src/plugins/ToolbarPlugin.tsx
+import { useCallback as useCallback4, useEffect as useEffect8, useState as useState4 } from "react";
+import {
+  $getSelection as $getSelection3,
+  $isRangeSelection as $isRangeSelection3,
+  FORMAT_TEXT_COMMAND
+} from "lexical";
+import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
+import { INSERT_TABLE_COMMAND } from "@lexical/table";
+import { $insertNodeToNearestRoot } from "@lexical/utils";
+
+// src/nodes/DrawingNode.tsx
 import {
   $applyNodeReplacement,
+  DecoratorNode
+} from "lexical";
+
+// src/components/DrawingCanvas.tsx
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect7,
+  useRef as useRef3,
+  useState as useState3
+} from "react";
+import { $getNodeByKey as $getNodeByKey2 } from "lexical";
+import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
+import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
+
+// src/components/drawingTypes.ts
+var BOX_TYPES = ["rect", "ellipse", "triangle", "pentagon"];
+function isBoxType(type) {
+  return BOX_TYPES.includes(type);
+}
+function isConnectorType(type) {
+  return type === "arrow" || type === "line";
+}
+var DEFAULT_DRAWING_HEIGHT = 320;
+var FONT_SIZE = 15;
+var SMALL_FONT_SIZE = 11;
+var LINE_HEIGHT = 1.35;
+var EMPTY_DRAWING = {
+  version: 1,
+  height: DEFAULT_DRAWING_HEIGHT,
+  shapes: []
+};
+var STROKE_COLORS = [
+  "#1e1e1e",
+  "#e03131",
+  "#2f9e44",
+  "#1971c2",
+  "#f08c00"
+];
+var FILL_COLORS = [
+  "transparent",
+  "#ffc9c9",
+  "#b2f2bb",
+  "#a5d8ff",
+  "#ffec99"
+];
+var shapeIdCounter = 0;
+function createShapeId() {
+  shapeIdCounter += 1;
+  return `s${Date.now().toString(36)}${shapeIdCounter.toString(36)}`;
+}
+function serializeDrawingData(data) {
+  return JSON.stringify(data);
+}
+function parseDrawingData(json) {
+  try {
+    const parsed = JSON.parse(json);
+    if (typeof parsed !== "object" || parsed === null || !Array.isArray(parsed.shapes)) {
+      return EMPTY_DRAWING;
+    }
+    const raw = parsed;
+    const shapes = raw.shapes.filter(isValidShape);
+    return {
+      version: 1,
+      height: typeof raw.height === "number" && raw.height >= 80 ? raw.height : DEFAULT_DRAWING_HEIGHT,
+      shapes
+    };
+  } catch {
+    return EMPTY_DRAWING;
+  }
+}
+function isValidShape(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const shape = value;
+  return typeof shape.id === "string" && ["rect", "ellipse", "triangle", "pentagon", "arrow", "line", "text"].includes(
+    shape.type
+  ) && typeof shape.x === "number" && typeof shape.y === "number" && typeof shape.w === "number" && typeof shape.h === "number" && typeof shape.stroke === "string" && typeof shape.fill === "string" && typeof shape.strokeWidth === "number" && (shape.text === void 0 || typeof shape.text === "string") && (shape.label === void 0 || typeof shape.label === "string") && (shape.footer === void 0 || typeof shape.footer === "string") && (shape.startBinding === void 0 || typeof shape.startBinding === "string") && (shape.endBinding === void 0 || typeof shape.endBinding === "string") && (shape.bidirectional === void 0 || typeof shape.bidirectional === "boolean") && (shape.routing === void 0 || shape.routing === "elbow") && (shape.elbow === void 0 || typeof shape.elbow === "number") && (shape.waypoints === void 0 || Array.isArray(shape.waypoints) && shape.waypoints.every(
+    (p) => typeof p === "object" && p !== null && typeof p.x === "number" && typeof p.y === "number"
+  ));
+}
+
+// src/components/drawingGeometry.ts
+var BINDING_GAP = 6;
+var BINDING_TOLERANCE = 8;
+function bbox(shape) {
+  return {
+    x: Math.min(shape.x, shape.x + shape.w),
+    y: Math.min(shape.y, shape.y + shape.h),
+    w: Math.abs(shape.w),
+    h: Math.abs(shape.h)
+  };
+}
+function normalize(shape) {
+  if (isConnectorType(shape.type)) return shape;
+  const b = bbox(shape);
+  return { ...shape, x: b.x, y: b.y, w: b.w, h: b.h };
+}
+function polygonPoints(shape) {
+  const b = bbox(shape);
+  if (shape.type === "triangle") {
+    return [
+      { x: b.x + b.w / 2, y: b.y },
+      { x: b.x + b.w, y: b.y + b.h },
+      { x: b.x, y: b.y + b.h }
+    ];
+  }
+  const cx = b.x + b.w / 2;
+  const cy = b.y + b.h / 2;
+  return Array.from({ length: 5 }, (_, i) => {
+    const angle = -Math.PI / 2 + i * 2 * Math.PI / 5;
+    return {
+      x: cx + b.w / 2 * Math.cos(angle),
+      y: cy + b.h / 2 * Math.sin(angle)
+    };
+  });
+}
+function center(shape) {
+  const b = bbox(shape);
+  return { x: b.x + b.w / 2, y: b.y + b.h / 2 };
+}
+function wrapText(text, maxWidth, fontSize) {
+  const charW = fontSize * 0.6;
+  const maxChars = Math.max(1, Math.floor(maxWidth / charW));
+  const lines = [];
+  for (const para of text.split("\n")) {
+    if (para.length <= maxChars) {
+      lines.push(para);
+      continue;
+    }
+    let current = "";
+    for (let word of para.split(" ")) {
+      while (word.length > maxChars) {
+        if (current) {
+          lines.push(current);
+          current = "";
+        }
+        lines.push(word.slice(0, maxChars));
+        word = word.slice(maxChars);
+      }
+      if (!current) {
+        current = word;
+      } else if (current.length + 1 + word.length <= maxChars) {
+        current += ` ${word}`;
+      } else {
+        lines.push(current);
+        current = word;
+      }
+    }
+    lines.push(current);
+  }
+  return lines;
+}
+function textBoxSize(text, fontSize = FONT_SIZE) {
+  const lines = text.split("\n");
+  const longest = lines.reduce((max, line) => Math.max(max, line.length), 0);
+  return {
+    w: Math.max(20, longest * fontSize * 0.6),
+    h: lines.length * fontSize * LINE_HEIGHT
+  };
+}
+function arrowHead(x, y, angle, length) {
+  const spread = Math.PI / 7;
+  const hx1 = x - length * Math.cos(angle - spread);
+  const hy1 = y - length * Math.sin(angle - spread);
+  const hx2 = x - length * Math.cos(angle + spread);
+  const hy2 = y - length * Math.sin(angle + spread);
+  return `M ${hx1} ${hy1} L ${x} ${y} L ${hx2} ${hy2}`;
+}
+function connectorPoints(shape) {
+  const p1 = { x: shape.x, y: shape.y };
+  const p2 = { x: shape.x + shape.w, y: shape.y + shape.h };
+  if (shape.waypoints?.length) return [p1, ...shape.waypoints, p2];
+  if (shape.routing !== "elbow") return [p1, p2];
+  const t = Math.min(1, Math.max(0, shape.elbow ?? 0.5));
+  if (Math.abs(shape.w) >= Math.abs(shape.h)) {
+    const midX = shape.x + shape.w * t;
+    return [p1, { x: midX, y: p1.y }, { x: midX, y: p2.y }, p2];
+  }
+  const midY = shape.y + shape.h * t;
+  return [p1, { x: p1.x, y: midY }, { x: p2.x, y: midY }, p2];
+}
+function connectorPath(shape) {
+  const points = connectorPoints(shape);
+  return points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
+}
+function connectorMidpoint(shape) {
+  const points = connectorPoints(shape);
+  const a = points[Math.floor((points.length - 1) / 2)];
+  const b = points[Math.ceil((points.length + 1) / 2) - 1];
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+}
+function segmentAngleAt(points, index, backward) {
+  const step = backward ? 1 : -1;
+  for (let i = index + step; i >= 0 && i < points.length; i += step) {
+    const dx = points[index].x - points[i].x;
+    const dy = points[index].y - points[i].y;
+    if (Math.abs(dx) > 0.01 || Math.abs(dy) > 0.01) {
+      return Math.atan2(dy, dx);
+    }
+  }
+  return 0;
+}
+function arrowPath(shape) {
+  const points = connectorPoints(shape);
+  const line = connectorPath(shape);
+  const length = Math.hypot(shape.w, shape.h);
+  if (length < 1) return line;
+  const headLength = Math.min(14, 4 + length / 4);
+  const last = points.length - 1;
+  const parts = [
+    line,
+    arrowHead(
+      points[last].x,
+      points[last].y,
+      segmentAngleAt(points, last, false),
+      headLength
+    )
+  ];
+  if (shape.bidirectional) {
+    parts.push(
+      arrowHead(
+        points[0].x,
+        points[0].y,
+        segmentAngleAt(points, 0, true),
+        headLength
+      )
+    );
+  }
+  return parts.join(" ");
+}
+function boxContainsPoint(box, point) {
+  const b = bbox(box);
+  const pad = BINDING_TOLERANCE;
+  if (box.type === "ellipse") {
+    const rx = b.w / 2 + pad;
+    const ry = b.h / 2 + pad;
+    if (rx <= 0 || ry <= 0) return false;
+    const dx = (point.x - (b.x + b.w / 2)) / rx;
+    const dy = (point.y - (b.y + b.h / 2)) / ry;
+    return dx * dx + dy * dy <= 1;
+  }
+  return point.x >= b.x - pad && point.x <= b.x + b.w + pad && point.y >= b.y - pad && point.y <= b.y + b.h + pad;
+}
+function findBoxAt(shapes, point, excludeId) {
+  for (let i = shapes.length - 1; i >= 0; i--) {
+    const shape = shapes[i];
+    if (shape.id === excludeId || !isBoxType(shape.type)) continue;
+    if (boxContainsPoint(shape, point)) return shape;
+  }
+  return null;
+}
+function borderPoint(box, toward) {
+  const c = center(box);
+  const dx = toward.x - c.x;
+  const dy = toward.y - c.y;
+  const dist = Math.hypot(dx, dy);
+  if (dist < 1) return c;
+  let t;
+  const b = bbox(box);
+  if (box.type === "ellipse") {
+    const rx = b.w / 2;
+    const ry = b.h / 2;
+    if (rx <= 0 || ry <= 0) return c;
+    t = 1 / Math.hypot(dx / rx, dy / ry);
+  } else if (box.type === "triangle" || box.type === "pentagon") {
+    t = rayPolygonT(c, { x: dx, y: dy }, polygonPoints(box)) ?? 0.5;
+  } else {
+    const sx = dx !== 0 ? b.w / 2 / Math.abs(dx) : Infinity;
+    const sy = dy !== 0 ? b.h / 2 / Math.abs(dy) : Infinity;
+    t = Math.min(sx, sy);
+  }
+  const gapT = BINDING_GAP / dist;
+  return { x: c.x + dx * (t + gapT), y: c.y + dy * (t + gapT) };
+}
+function rayPolygonT(origin, dir, points) {
+  let best = null;
+  for (let i = 0; i < points.length; i++) {
+    const p1 = points[i];
+    const p2 = points[(i + 1) % points.length];
+    const ex = p2.x - p1.x;
+    const ey = p2.y - p1.y;
+    const denom = dir.x * ey - dir.y * ex;
+    if (Math.abs(denom) < 1e-9) continue;
+    const qx = p1.x - origin.x;
+    const qy = p1.y - origin.y;
+    const t = (qx * ey - qy * ex) / denom;
+    const s = (qx * dir.y - qy * dir.x) / denom;
+    if (t > 0 && s >= 0 && s <= 1 && (best === null || t < best)) {
+      best = t;
+    }
+  }
+  return best;
+}
+function resolveBindings(shapes) {
+  const byId = new Map(shapes.map((s) => [s.id, s]));
+  return shapes.map((shape) => {
+    if (shape.type !== "arrow" && shape.type !== "line") return shape;
+    if (!shape.startBinding && !shape.endBinding) return shape;
+    const startBox = shape.startBinding ? byId.get(shape.startBinding) : void 0;
+    const endBox = shape.endBinding ? byId.get(shape.endBinding) : void 0;
+    if (!startBox && !endBox) {
+      return { ...shape, startBinding: void 0, endBinding: void 0 };
+    }
+    const freeStart = { x: shape.x, y: shape.y };
+    const freeEnd = { x: shape.x + shape.w, y: shape.y + shape.h };
+    const waypoints = shape.waypoints;
+    const startTarget = waypoints?.length ? waypoints[0] : endBox ? center(endBox) : freeEnd;
+    const endTarget = waypoints?.length ? waypoints[waypoints.length - 1] : startBox ? center(startBox) : freeStart;
+    const p1 = startBox ? borderPoint(startBox, startTarget) : freeStart;
+    const p2 = endBox ? borderPoint(endBox, endTarget) : freeEnd;
+    return {
+      ...shape,
+      x: p1.x,
+      y: p1.y,
+      w: p2.x - p1.x,
+      h: p2.y - p1.y,
+      startBinding: startBox ? shape.startBinding : void 0,
+      endBinding: endBox ? shape.endBinding : void 0
+    };
+  });
+}
+
+// src/components/DrawingCanvas.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { createElement } from "react";
+var MIN_HEIGHT = 120;
+var MAX_HEIGHT = 900;
+var SELECTION_COLOR = "#6965db";
+var CONNECTOR_FONT_SIZE = 12;
+var CONNECTOR_LABEL_MAX_WIDTH = 160;
+var BOX_TEXT_PADDING = 8;
+var WAYPOINT_SNAP = 8;
+function BoxTexts({
+  shape,
+  hideField,
+  showHints
+}) {
+  const b = bbox(shape);
+  const cx = b.x + b.w / 2;
+  const wrapW = Math.max(b.w - BOX_TEXT_PADDING * 2, 20);
+  const mainLines = wrapText(shape.text ?? "", wrapW, FONT_SIZE);
+  const labelLines = wrapText(shape.label ?? "", wrapW, SMALL_FONT_SIZE);
+  const footerLines = wrapText(shape.footer ?? "", wrapW, SMALL_FONT_SIZE);
+  const mainLineH = FONT_SIZE * LINE_HEIGHT;
+  const smallLineH = SMALL_FONT_SIZE * LINE_HEIGHT;
+  const mainStart = b.y + b.h / 2 - (mainLines.length - 1) * mainLineH / 2 + FONT_SIZE * 0.35;
+  const common = {
+    fill: shape.stroke,
+    fontFamily: "ui-sans-serif, system-ui, sans-serif",
+    textAnchor: "middle",
+    style: { userSelect: "none" }
+  };
+  const hint = {
+    ...common,
+    opacity: 0.35,
+    style: { userSelect: "none", pointerEvents: "none" }
+  };
+  return /* @__PURE__ */ jsxs2("g", { children: [
+    hideField !== "label" && (shape.label ? labelLines.map((line, i) => /* @__PURE__ */ createElement(
+      "text",
+      {
+        ...common,
+        key: i,
+        x: cx,
+        y: b.y + SMALL_FONT_SIZE + 7 + i * smallLineH,
+        fontSize: SMALL_FONT_SIZE,
+        fontWeight: 600,
+        opacity: 0.85
+      },
+      line
+    )) : showHints && /* @__PURE__ */ jsx3("text", { ...hint, x: cx, y: b.y + SMALL_FONT_SIZE + 7, fontSize: SMALL_FONT_SIZE, children: "Label" })),
+    hideField !== "text" && (shape.text ? mainLines.map((line, i) => /* @__PURE__ */ createElement(
+      "text",
+      {
+        ...common,
+        key: i,
+        x: cx,
+        y: mainStart + i * mainLineH,
+        fontSize: FONT_SIZE
+      },
+      line
+    )) : showHints && /* @__PURE__ */ jsx3("text", { ...hint, x: cx, y: mainStart, fontSize: FONT_SIZE, children: "Text" })),
+    hideField !== "footer" && (shape.footer ? footerLines.map((line, i) => /* @__PURE__ */ createElement(
+      "text",
+      {
+        ...common,
+        key: i,
+        x: cx,
+        y: b.y + b.h - 9 - (footerLines.length - 1 - i) * smallLineH,
+        fontSize: SMALL_FONT_SIZE,
+        opacity: 0.65
+      },
+      line
+    )) : showHints && /* @__PURE__ */ jsx3("text", { ...hint, x: cx, y: b.y + b.h - 9, fontSize: SMALL_FONT_SIZE, children: "Footer" }))
+  ] });
+}
+function ShapeView({
+  shape,
+  hideField,
+  showHints
+}) {
+  const common = {
+    stroke: shape.stroke,
+    strokeWidth: shape.strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  };
+  switch (shape.type) {
+    case "rect": {
+      const b = bbox(shape);
+      return /* @__PURE__ */ jsxs2("g", { children: [
+        /* @__PURE__ */ jsx3(
+          "rect",
+          {
+            ...common,
+            x: b.x,
+            y: b.y,
+            width: b.w,
+            height: b.h,
+            rx: Math.min(8, b.w / 4, b.h / 4),
+            fill: shape.fill
+          }
+        ),
+        /* @__PURE__ */ jsx3(BoxTexts, { shape, hideField, showHints })
+      ] });
+    }
+    case "ellipse": {
+      const b = bbox(shape);
+      return /* @__PURE__ */ jsxs2("g", { children: [
+        /* @__PURE__ */ jsx3(
+          "ellipse",
+          {
+            ...common,
+            cx: b.x + b.w / 2,
+            cy: b.y + b.h / 2,
+            rx: b.w / 2,
+            ry: b.h / 2,
+            fill: shape.fill
+          }
+        ),
+        /* @__PURE__ */ jsx3(BoxTexts, { shape, hideField, showHints })
+      ] });
+    }
+    case "triangle":
+    case "pentagon":
+      return /* @__PURE__ */ jsxs2("g", { children: [
+        /* @__PURE__ */ jsx3(
+          "polygon",
+          {
+            ...common,
+            points: polygonPoints(shape).map((p) => `${p.x},${p.y}`).join(" "),
+            fill: shape.fill
+          }
+        ),
+        /* @__PURE__ */ jsx3(BoxTexts, { shape, hideField, showHints })
+      ] });
+    case "line":
+    case "arrow":
+      return /* @__PURE__ */ jsxs2("g", { children: [
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            ...common,
+            d: shape.type === "line" ? connectorPath(shape) : arrowPath(shape),
+            fill: "none"
+          }
+        ),
+        shape.text && hideField !== "text" && /* @__PURE__ */ jsx3(ConnectorLabel, { shape })
+      ] });
+    case "text":
+      return /* @__PURE__ */ jsx3(
+        "text",
+        {
+          x: shape.x,
+          y: shape.y + FONT_SIZE,
+          fill: shape.stroke,
+          fontSize: FONT_SIZE,
+          fontFamily: "ui-sans-serif, system-ui, sans-serif",
+          style: { userSelect: "none", whiteSpace: "pre" },
+          children: (shape.text ?? "").split("\n").map((line, i) => /* @__PURE__ */ jsx3("tspan", { x: shape.x, dy: i === 0 ? 0 : FONT_SIZE * 1.35, children: line }, i))
+        }
+      );
+  }
+}
+function ConnectorLabel({ shape }) {
+  const text = shape.text ?? "";
+  const lines = wrapText(text, CONNECTOR_LABEL_MAX_WIDTH, CONNECTOR_FONT_SIZE);
+  const size = textBoxSize(lines.join("\n"), CONNECTOR_FONT_SIZE);
+  const { x: midX, y: midY } = connectorMidpoint(shape);
+  const lineH = CONNECTOR_FONT_SIZE * LINE_HEIGHT;
+  const startY = midY - (lines.length - 1) * lineH / 2 + CONNECTOR_FONT_SIZE * 0.35;
+  return /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsx3(
+      "rect",
+      {
+        x: midX - size.w / 2 - 5,
+        y: midY - size.h / 2 - 3,
+        width: size.w + 10,
+        height: size.h + 6,
+        rx: 4,
+        fill: "#ffffff",
+        opacity: 0.92
+      }
+    ),
+    lines.map((line, i) => /* @__PURE__ */ jsx3(
+      "text",
+      {
+        x: midX,
+        y: startY + i * lineH,
+        fill: shape.stroke,
+        fontSize: CONNECTOR_FONT_SIZE,
+        fontFamily: "ui-sans-serif, system-ui, sans-serif",
+        textAnchor: "middle",
+        style: { userSelect: "none" },
+        children: line
+      },
+      i
+    ))
+  ] });
+}
+var TOOL_ICONS = {
+  select: /* @__PURE__ */ jsx3("path", { d: "M4 2l12 6.5-5.2 1.6L8 16z", fill: "currentColor", stroke: "none" }),
+  rect: /* @__PURE__ */ jsx3("rect", { x: "3", y: "4.5", width: "14", height: "11", rx: "2" }),
+  ellipse: /* @__PURE__ */ jsx3("ellipse", { cx: "10", cy: "10", rx: "7", ry: "5.5" }),
+  triangle: /* @__PURE__ */ jsx3("path", { d: "M10 3.5L17 16.5H3z", strokeLinejoin: "round" }),
+  pentagon: /* @__PURE__ */ jsx3("path", { d: "M10 3L16.8 8.1L14.2 16.2H5.8L3.2 8.1z", strokeLinejoin: "round" }),
+  arrow: /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsx3("path", { d: "M4 16L16 4" }),
+    /* @__PURE__ */ jsx3("path", { d: "M9 4h7v7" })
+  ] }),
+  line: /* @__PURE__ */ jsx3("path", { d: "M4 16L16 4" }),
+  text: /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsx3("path", { d: "M4 5V3.5h12V5" }),
+    /* @__PURE__ */ jsx3("path", { d: "M10 3.5V16.5" }),
+    /* @__PURE__ */ jsx3("path", { d: "M7 16.5h6" })
+  ] })
+};
+function bindEndpoints(shape, shapes) {
+  const startBox = findBoxAt(shapes, { x: shape.x, y: shape.y }, shape.id);
+  const endBox = findBoxAt(
+    shapes,
+    { x: shape.x + shape.w, y: shape.y + shape.h },
+    shape.id
+  );
+  if (startBox && endBox && startBox.id === endBox.id) return shape;
+  return { ...shape, startBinding: startBox?.id, endBinding: endBox?.id };
+}
+var TOOLS = [
+  { tool: "select", label: "Select" },
+  { tool: "rect", label: "Rectangle" },
+  { tool: "ellipse", label: "Ellipse" },
+  { tool: "triangle", label: "Triangle" },
+  { tool: "pentagon", label: "Pentagon" },
+  { tool: "arrow", label: "Arrow" },
+  { tool: "line", label: "Line" },
+  { tool: "text", label: "Text" }
+];
+function DrawingCanvas({ nodeKey, data }) {
+  const [editor] = useLexicalComposerContext7();
+  const isEditable = useLexicalEditable();
+  const [shapes, setShapes] = useState3(data.shapes);
+  const [height, setHeight] = useState3(data.height);
+  const [tool, setTool] = useState3("select");
+  const [selectedId, setSelectedId] = useState3(null);
+  const [editingText, setEditingText] = useState3(null);
+  const [stroke, setStroke] = useState3(STROKE_COLORS[0]);
+  const [fill, setFill] = useState3(FILL_COLORS[0]);
+  const svgRef = useRef3(null);
+  const dragRef = useRef3(null);
+  const lastCommittedRef = useRef3(serializeDrawingData(data));
+  const shapesRef = useRef3(shapes);
+  shapesRef.current = shapes;
+  const heightRef = useRef3(height);
+  heightRef.current = height;
+  useEffect7(() => {
+    const incoming = serializeDrawingData(data);
+    if (incoming !== lastCommittedRef.current) {
+      lastCommittedRef.current = incoming;
+      setShapes(data.shapes);
+      setHeight(data.height);
+      setSelectedId(null);
+      setEditingText(null);
+    }
+  }, [data]);
+  const commit = useCallback3(
+    (nextShapes, nextHeight) => {
+      const payload = {
+        version: 1,
+        height: nextHeight ?? heightRef.current,
+        shapes: nextShapes
+      };
+      const json = serializeDrawingData(payload);
+      if (json === lastCommittedRef.current) return;
+      lastCommittedRef.current = json;
+      editor.update(() => {
+        const node = $getNodeByKey2(nodeKey);
+        if ($isDrawingNode(node)) {
+          node.setData(payload);
+        }
+      });
+    },
+    [editor, nodeKey]
+  );
+  const updateShapes = useCallback3(
+    (updater, options) => {
+      setShapes((prev) => {
+        const next = resolveBindings(updater(prev));
+        if (options?.commit) commit(next);
+        return next;
+      });
+    },
+    [commit]
+  );
+  const getPoint = useCallback3((e) => {
+    const rect = svgRef.current?.getBoundingClientRect();
+    if (!rect) return { x: 0, y: 0 };
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  }, []);
+  const selectedShape = shapes.find((s) => s.id === selectedId) ?? null;
+  const startTextEditing = useCallback3((id, field) => {
+    setEditingText({ id, field });
+    setSelectedId(id);
+  }, []);
+  const handleBackgroundPointerDown = useCallback3(
+    (e) => {
+      if (!isEditable || editingText) return;
+      if (e.button !== 0) return;
+      const point = getPoint(e);
+      svgRef.current?.setPointerCapture(e.pointerId);
+      if (tool === "select") {
+        setSelectedId(null);
+        return;
+      }
+      if (tool === "text") {
+        const id2 = createShapeId();
+        const size = textBoxSize("");
+        updateShapes((prev) => [
+          ...prev,
+          {
+            id: id2,
+            type: "text",
+            x: point.x,
+            y: point.y - FONT_SIZE / 2,
+            w: size.w,
+            h: size.h,
+            stroke,
+            fill: "transparent",
+            strokeWidth: 2,
+            text: ""
+          }
+        ]);
+        setTool("select");
+        startTextEditing(id2, "text");
+        return;
+      }
+      const id = createShapeId();
+      dragRef.current = { mode: "draw", id };
+      updateShapes((prev) => [
+        ...prev,
+        {
+          id,
+          type: tool,
+          x: point.x,
+          y: point.y,
+          w: 0,
+          h: 0,
+          stroke,
+          fill: isBoxType(tool) ? fill : "transparent",
+          strokeWidth: 2
+        }
+      ]);
+    },
+    [
+      isEditable,
+      editingText,
+      getPoint,
+      tool,
+      stroke,
+      fill,
+      updateShapes,
+      startTextEditing
+    ]
+  );
+  const handleShapePointerDown = useCallback3(
+    (e, shape) => {
+      if (!isEditable || tool !== "select" || editingText) return;
+      if (e.button !== 0) return;
+      e.stopPropagation();
+      const point = getPoint(e);
+      svgRef.current?.setPointerCapture(e.pointerId);
+      dragRef.current = {
+        mode: "move",
+        id: shape.id,
+        startX: point.x,
+        startY: point.y,
+        orig: shape,
+        wasSelected: selectedId === shape.id
+      };
+      setSelectedId(shape.id);
+    },
+    [isEditable, tool, editingText, getPoint, selectedId]
+  );
+  const handleHandlePointerDown = useCallback3(
+    (e, drag) => {
+      if (!isEditable) return;
+      if (e.button !== 0) return;
+      e.stopPropagation();
+      svgRef.current?.setPointerCapture(e.pointerId);
+      dragRef.current = drag;
+      if (drag.mode === "endpoint") {
+        const key = drag.end === "start" ? "startBinding" : "endBinding";
+        updateShapes(
+          (prev) => prev.map((s) => s.id === drag.id ? { ...s, [key]: void 0 } : s)
+        );
+      }
+    },
+    [isEditable, updateShapes]
+  );
+  const handlePointerMove = useCallback3(
+    (e) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      const point = getPoint(e);
+      if (drag.mode === "height") {
+        const next = Math.round(
+          Math.min(
+            MAX_HEIGHT,
+            Math.max(MIN_HEIGHT, drag.origHeight + (e.clientY - drag.startY))
+          )
+        );
+        setHeight(next);
+        return;
+      }
+      updateShapes(
+        (prev) => prev.map((shape) => {
+          if (shape.id !== ("id" in drag ? drag.id : "")) return shape;
+          switch (drag.mode) {
+            case "draw":
+              return { ...shape, w: point.x - shape.x, h: point.y - shape.y };
+            case "move": {
+              const dx = point.x - drag.startX;
+              const dy = point.y - drag.startY;
+              return {
+                ...shape,
+                x: drag.orig.x + dx,
+                y: drag.orig.y + dy,
+                waypoints: drag.orig.waypoints?.map((p) => ({
+                  x: p.x + dx,
+                  y: p.y + dy
+                }))
+              };
+            }
+            case "resize": {
+              const o = drag.orig;
+              const right = o.x + o.w;
+              const bottom = o.y + o.h;
+              const nx = drag.corner === "nw" || drag.corner === "sw" ? point.x : o.x;
+              const ny = drag.corner === "nw" || drag.corner === "ne" ? point.y : o.y;
+              const nr = drag.corner === "ne" || drag.corner === "se" ? point.x : right;
+              const nb = drag.corner === "sw" || drag.corner === "se" ? point.y : bottom;
+              return { ...shape, x: nx, y: ny, w: nr - nx, h: nb - ny };
+            }
+            case "endpoint": {
+              const o = drag.orig;
+              if (drag.end === "start") {
+                return {
+                  ...shape,
+                  x: point.x,
+                  y: point.y,
+                  w: o.x + o.w - point.x,
+                  h: o.y + o.h - point.y
+                };
+              }
+              return { ...shape, w: point.x - o.x, h: point.y - o.y };
+            }
+            case "elbow": {
+              const o = drag.orig;
+              const horizontal = Math.abs(o.w) >= Math.abs(o.h);
+              const span = horizontal ? o.w : o.h;
+              if (Math.abs(span) < 1) return shape;
+              const raw = horizontal ? (point.x - o.x) / span : (point.y - o.y) / span;
+              return {
+                ...shape,
+                elbow: Math.min(0.95, Math.max(0.05, raw))
+              };
+            }
+            case "waypoint": {
+              const waypoints = shape.waypoints;
+              if (!waypoints || drag.index < 0 || drag.index >= waypoints.length) {
+                return shape;
+              }
+              const prevPt = drag.index === 0 ? { x: shape.x, y: shape.y } : waypoints[drag.index - 1];
+              const nextPt = drag.index === waypoints.length - 1 ? { x: shape.x + shape.w, y: shape.y + shape.h } : waypoints[drag.index + 1];
+              let px = point.x;
+              let py = point.y;
+              if (Math.abs(px - prevPt.x) < WAYPOINT_SNAP) px = prevPt.x;
+              else if (Math.abs(px - nextPt.x) < WAYPOINT_SNAP) px = nextPt.x;
+              if (Math.abs(py - prevPt.y) < WAYPOINT_SNAP) py = prevPt.y;
+              else if (Math.abs(py - nextPt.y) < WAYPOINT_SNAP) py = nextPt.y;
+              const next = [...waypoints];
+              next[drag.index] = { x: px, y: py };
+              return { ...shape, waypoints: next };
+            }
+          }
+        })
+      );
+    },
+    [getPoint, updateShapes]
+  );
+  const handlePointerUp = useCallback3(() => {
+    const drag = dragRef.current;
+    dragRef.current = null;
+    if (!drag) return;
+    if (drag.mode === "height") {
+      commit(shapesRef.current, heightRef.current);
+      return;
+    }
+    if (drag.mode === "move" && drag.wasSelected) {
+      const current = shapesRef.current.find((s) => s.id === drag.id);
+      if (current && current.x === drag.orig.x && current.y === drag.orig.y) {
+        if (current.type === "text" || isConnectorType(current.type)) {
+          startTextEditing(current.id, "text");
+          return;
+        }
+        if (isBoxType(current.type)) {
+          const b = bbox(current);
+          const rel = (drag.startY - b.y) / Math.max(b.h, 1);
+          startTextEditing(
+            current.id,
+            rel < 0.3 ? "label" : rel > 0.7 ? "footer" : "text"
+          );
+          return;
+        }
+      }
+    }
+    if (drag.mode === "draw") {
+      const drawn = shapesRef.current.find((s) => s.id === drag.id);
+      if (drawn && Math.abs(drawn.w) < 4 && Math.abs(drawn.h) < 4) {
+        updateShapes((prev) => prev.filter((s) => s.id !== drag.id));
+        return;
+      }
+      if (drawn && (drawn.type === "arrow" || drawn.type === "line")) {
+        updateShapes((prev) => prev.map((s) => s.id === drag.id ? bindEndpoints(s, prev) : s));
+      }
+      setTool("select");
+      setSelectedId(drag.id);
+    }
+    if (drag.mode === "endpoint") {
+      updateShapes(
+        (prev) => prev.map((s) => {
+          if (s.id !== drag.id) return s;
+          const point = drag.end === "start" ? { x: s.x, y: s.y } : { x: s.x + s.w, y: s.y + s.h };
+          const box = findBoxAt(prev, point, s.id);
+          const otherBinding = drag.end === "start" ? s.endBinding : s.startBinding;
+          if (box && box.id === otherBinding) return s;
+          const key = drag.end === "start" ? "startBinding" : "endBinding";
+          return { ...s, [key]: box?.id };
+        })
+      );
+    }
+    updateShapes((prev) => prev.map(normalize), { commit: true });
+  }, [commit, updateShapes, startTextEditing]);
+  const deleteSelected = useCallback3(() => {
+    if (!selectedId) return;
+    setEditingText(null);
+    setSelectedId(null);
+    updateShapes((prev) => prev.filter((s) => s.id !== selectedId), {
+      commit: true
+    });
+  }, [selectedId, updateShapes]);
+  const handleKeyDown = useCallback3(
+    (e) => {
+      if (!isEditable || editingText) return;
+      if ((e.key === "Delete" || e.key === "Backspace") && selectedId) {
+        e.preventDefault();
+        e.stopPropagation();
+        deleteSelected();
+      } else if (e.key === "Enter" && selectedId) {
+        const shape = shapes.find((s) => s.id === selectedId);
+        if (shape) {
+          e.preventDefault();
+          e.stopPropagation();
+          startTextEditing(shape.id, "text");
+        }
+      } else if (e.key === "Escape") {
+        setSelectedId(null);
+        setTool("select");
+      }
+    },
+    [
+      isEditable,
+      editingText,
+      selectedId,
+      deleteSelected,
+      shapes,
+      startTextEditing
+    ]
+  );
+  const applyStroke = useCallback3(
+    (color) => {
+      setStroke(color);
+      if (selectedId) {
+        updateShapes(
+          (prev) => prev.map((s) => s.id === selectedId ? { ...s, stroke: color } : s),
+          { commit: true }
+        );
+      }
+    },
+    [selectedId, updateShapes]
+  );
+  const applyFill = useCallback3(
+    (color) => {
+      setFill(color);
+      if (selectedId) {
+        updateShapes(
+          (prev) => prev.map((s) => s.id === selectedId ? { ...s, fill: color } : s),
+          { commit: true }
+        );
+      }
+    },
+    [selectedId, updateShapes]
+  );
+  const applyRouting = useCallback3(
+    (elbow) => {
+      if (!selectedId) return;
+      updateShapes(
+        (prev) => prev.map(
+          (s) => s.id === selectedId && isConnectorType(s.type) ? {
+            ...s,
+            routing: elbow ? "elbow" : void 0,
+            elbow: elbow ? s.elbow : void 0,
+            waypoints: void 0
+          } : s
+        ),
+        { commit: true }
+      );
+    },
+    [selectedId, updateShapes]
+  );
+  const addWaypoint = useCallback3(
+    (e, shapeId, segmentIndex, point) => {
+      if (!isEditable) return;
+      if (e.button !== 0) return;
+      e.stopPropagation();
+      svgRef.current?.setPointerCapture(e.pointerId);
+      updateShapes(
+        (prev) => prev.map((s) => {
+          if (s.id !== shapeId || !isConnectorType(s.type)) return s;
+          const interior = connectorPoints(s).slice(1, -1);
+          const waypoints = [
+            ...interior.slice(0, segmentIndex),
+            point,
+            ...interior.slice(segmentIndex)
+          ];
+          return { ...s, waypoints, routing: void 0, elbow: void 0 };
+        })
+      );
+      dragRef.current = { mode: "waypoint", id: shapeId, index: segmentIndex };
+    },
+    [isEditable, updateShapes]
+  );
+  const removeWaypoint = useCallback3(
+    (shapeId, index) => {
+      updateShapes(
+        (prev) => prev.map((s) => {
+          if (s.id !== shapeId || !s.waypoints) return s;
+          const waypoints = s.waypoints.filter((_, i) => i !== index);
+          return { ...s, waypoints: waypoints.length ? waypoints : void 0 };
+        }),
+        { commit: true }
+      );
+    },
+    [updateShapes]
+  );
+  const applyDirection = useCallback3(
+    (bidirectional) => {
+      if (!selectedId) return;
+      updateShapes(
+        (prev) => prev.map(
+          (s) => s.id === selectedId && s.type === "arrow" ? { ...s, bidirectional: bidirectional || void 0 } : s
+        ),
+        { commit: true }
+      );
+    },
+    [selectedId, updateShapes]
+  );
+  const commitText = useCallback3(
+    (id, field, value) => {
+      setEditingText(null);
+      updateShapes(
+        (prev) => prev.flatMap((s) => {
+          if (s.id !== id) return [s];
+          if (s.type === "text") {
+            return value.trim() === "" ? [] : [{ ...s, text: value, ...textBoxSize(value) }];
+          }
+          return [
+            { ...s, [field]: value.trim() === "" ? void 0 : value }
+          ];
+        }),
+        { commit: true }
+      );
+    },
+    [updateShapes]
+  );
+  const editingShape = shapes.find((s) => s.id === editingText?.id) ?? null;
+  const showFill = selectedShape != null ? isBoxType(selectedShape.type) : tool !== "select" && isBoxType(tool);
+  const canvasCursor = tool === "select" ? "default" : tool === "text" ? "text" : "crosshair";
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "zui-drawing-canvas",
+      tabIndex: isEditable ? 0 : void 0,
+      onKeyDown: handleKeyDown,
+      children: [
+        isEditable && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar", onPointerDown: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx3("div", { className: "zui-drawing-toolbar-group", children: TOOLS.map(({ tool: t, label }) => /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              title: label,
+              "aria-label": label,
+              className: `zui-drawing-tool ${tool === t ? "is-active" : ""}`,
+              onClick: () => {
+                setTool(t);
+                if (t !== "select") setSelectedId(null);
+              },
+              children: /* @__PURE__ */ jsx3(
+                "svg",
+                {
+                  viewBox: "0 0 20 20",
+                  width: "16",
+                  height: "16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.6",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: TOOL_ICONS[t]
+                }
+              )
+            },
+            t
+          )) }),
+          /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar-group", children: [
+            /* @__PURE__ */ jsx3("span", { className: "zui-drawing-swatch-label", children: "Stroke" }),
+            STROKE_COLORS.map((color) => /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                title: `Stroke ${color}`,
+                "aria-label": `Stroke color ${color}`,
+                className: `zui-drawing-swatch ${(selectedShape?.stroke ?? stroke) === color ? "is-active" : ""}`,
+                style: { backgroundColor: color },
+                onClick: () => applyStroke(color)
+              },
+              color
+            ))
+          ] }),
+          showFill && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar-group", children: [
+            /* @__PURE__ */ jsx3("span", { className: "zui-drawing-swatch-label", children: "Fill" }),
+            FILL_COLORS.map((color) => /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                title: `Fill ${color === "transparent" ? "none" : color}`,
+                "aria-label": `Fill color ${color === "transparent" ? "none" : color}`,
+                className: `zui-drawing-swatch ${color === "transparent" ? "is-transparent" : ""} ${(selectedShape?.fill ?? fill) === color ? "is-active" : ""}`,
+                style: { backgroundColor: color },
+                onClick: () => applyFill(color)
+              },
+              color
+            ))
+          ] }),
+          selectedShape && isConnectorType(selectedShape.type) && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar-group", children: [
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                title: "Straight connector",
+                "aria-label": "Straight connector",
+                className: `zui-drawing-tool ${selectedShape.routing !== "elbow" ? "is-active" : ""}`,
+                onClick: () => applyRouting(false),
+                children: /* @__PURE__ */ jsx3(
+                  "svg",
+                  {
+                    viewBox: "0 0 20 20",
+                    width: "16",
+                    height: "16",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.6",
+                    strokeLinecap: "round",
+                    children: /* @__PURE__ */ jsx3("path", { d: "M4 16L16 4" })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                title: "Elbow connector (right angles)",
+                "aria-label": "Elbow connector",
+                className: `zui-drawing-tool ${selectedShape.routing === "elbow" ? "is-active" : ""}`,
+                onClick: () => applyRouting(true),
+                children: /* @__PURE__ */ jsx3(
+                  "svg",
+                  {
+                    viewBox: "0 0 20 20",
+                    width: "16",
+                    height: "16",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.6",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx3("path", { d: "M4 16v-6h12V4" })
+                  }
+                )
+              }
+            )
+          ] }),
+          selectedShape?.type === "arrow" && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar-group", children: [
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                title: "One-way arrow",
+                "aria-label": "One-way arrow",
+                className: `zui-drawing-tool ${!selectedShape.bidirectional ? "is-active" : ""}`,
+                onClick: () => applyDirection(false),
+                children: /* @__PURE__ */ jsx3(
+                  "svg",
+                  {
+                    viewBox: "0 0 20 20",
+                    width: "16",
+                    height: "16",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.6",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx3("path", { d: "M3 10h13M12 5.5L16.5 10L12 14.5" })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                title: "Two-way arrow",
+                "aria-label": "Two-way arrow",
+                className: `zui-drawing-tool ${selectedShape.bidirectional ? "is-active" : ""}`,
+                onClick: () => applyDirection(true),
+                children: /* @__PURE__ */ jsx3(
+                  "svg",
+                  {
+                    viewBox: "0 0 20 20",
+                    width: "16",
+                    height: "16",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.6",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx3("path", { d: "M3.5 10h13M8 5.5L3.5 10L8 14.5M12 5.5L16.5 10L12 14.5" })
+                  }
+                )
+              }
+            )
+          ] }),
+          selectedShape && /* @__PURE__ */ jsx3("div", { className: "zui-drawing-toolbar-group", children: /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              title: "Delete shape",
+              "aria-label": "Delete shape",
+              className: "zui-drawing-tool zui-drawing-tool-danger",
+              onClick: deleteSelected,
+              children: /* @__PURE__ */ jsx3(
+                "svg",
+                {
+                  viewBox: "0 0 20 20",
+                  width: "16",
+                  height: "16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.6",
+                  strokeLinecap: "round",
+                  children: /* @__PURE__ */ jsx3("path", { d: "M4 6h12M8 6V4h4v2M6 6l1 10h6l1-10M8.5 9v4M11.5 9v4" })
+                }
+              )
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs2(
+          "svg",
+          {
+            ref: svgRef,
+            className: "zui-drawing-surface",
+            style: { height, cursor: canvasCursor },
+            onPointerDown: handleBackgroundPointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            onDoubleClick: (e) => {
+              if (!isEditable) return;
+              const target = e.target.closest("[data-shape-id]");
+              const id = target?.getAttribute("data-shape-id");
+              const shape = id ? shapes.find((s) => s.id === id) : null;
+              if (!shape) return;
+              if (shape.type === "text" || isConnectorType(shape.type)) {
+                startTextEditing(shape.id, "text");
+              } else if (isBoxType(shape.type)) {
+                const b = bbox(shape);
+                const rel = (getPoint(e).y - b.y) / Math.max(b.h, 1);
+                startTextEditing(
+                  shape.id,
+                  rel < 0.3 ? "label" : rel > 0.7 ? "footer" : "text"
+                );
+              }
+            },
+            children: [
+              shapes.map((shape) => /* @__PURE__ */ jsxs2(
+                "g",
+                {
+                  "data-shape-id": shape.id,
+                  style: {
+                    cursor: isEditable && tool === "select" ? "move" : void 0
+                  },
+                  onPointerDown: (e) => handleShapePointerDown(e, shape),
+                  children: [
+                    isConnectorType(shape.type) && /* @__PURE__ */ jsx3(
+                      "path",
+                      {
+                        d: connectorPath(shape),
+                        fill: "none",
+                        stroke: "transparent",
+                        strokeWidth: 14
+                      }
+                    ),
+                    (isBoxType(shape.type) || shape.type === "text") && /* @__PURE__ */ jsx3(HitArea, { shape }),
+                    shape.id === editingText?.id && shape.type === "text" ? null : /* @__PURE__ */ jsx3(
+                      ShapeView,
+                      {
+                        shape,
+                        hideField: shape.id === editingText?.id ? editingText.field : null,
+                        showHints: isEditable && tool === "select" && shape.id === selectedId && shape.id !== editingText?.id
+                      }
+                    )
+                  ]
+                },
+                shape.id
+              )),
+              selectedShape && isEditable && !editingText && /* @__PURE__ */ jsx3(
+                SelectionOverlay,
+                {
+                  shape: selectedShape,
+                  onHandlePointerDown: handleHandlePointerDown,
+                  onWaypointAdd: addWaypoint,
+                  onWaypointRemove: removeWaypoint
+                }
+              )
+            ]
+          }
+        ),
+        editingShape && editingText && /* @__PURE__ */ jsx3(
+          TextEditOverlay,
+          {
+            shape: editingShape,
+            field: editingText.field,
+            onCommit: commitText
+          },
+          `${editingShape.id}:${editingText.field}`
+        ),
+        isEditable && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "zui-drawing-resize",
+            title: "Drag to resize canvas",
+            onPointerDown: (e) => {
+              e.preventDefault();
+              e.currentTarget.setPointerCapture(e.pointerId);
+              dragRef.current = {
+                mode: "height",
+                startY: e.clientY,
+                origHeight: heightRef.current
+              };
+            },
+            onPointerMove: (e) => {
+              const drag = dragRef.current;
+              if (drag?.mode !== "height") return;
+              setHeight(
+                Math.round(
+                  Math.min(
+                    MAX_HEIGHT,
+                    Math.max(MIN_HEIGHT, drag.origHeight + (e.clientY - drag.startY))
+                  )
+                )
+              );
+            },
+            onPointerUp: () => {
+              if (dragRef.current?.mode !== "height") return;
+              dragRef.current = null;
+              commit(shapesRef.current, heightRef.current);
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function HitArea({ shape }) {
+  const b = bbox(shape);
+  return /* @__PURE__ */ jsx3(
+    "rect",
+    {
+      x: b.x,
+      y: b.y,
+      width: Math.max(b.w, 8),
+      height: Math.max(b.h, 8),
+      fill: "transparent",
+      stroke: "none"
+    }
+  );
+}
+function SelectionOverlay({
+  shape,
+  onHandlePointerDown,
+  onWaypointAdd,
+  onWaypointRemove
+}) {
+  if (shape.type === "line" || shape.type === "arrow") {
+    const ends = [
+      { end: "start", x: shape.x, y: shape.y },
+      { end: "end", x: shape.x + shape.w, y: shape.y + shape.h }
+    ];
+    const points = connectorPoints(shape);
+    const waypoints = shape.waypoints ?? [];
+    const hasElbowHandle = shape.routing === "elbow" && !waypoints.length;
+    const elbowMid = hasElbowHandle ? connectorMidpoint(shape) : null;
+    const elbowCursor = Math.abs(shape.w) >= Math.abs(shape.h) ? "ew-resize" : "ns-resize";
+    const ghosts = points.slice(0, -1).flatMap((p, i) => {
+      const q = points[i + 1];
+      if (Math.hypot(q.x - p.x, q.y - p.y) < 28) return [];
+      if (hasElbowHandle && i === 1) return [];
+      return [{ index: i, x: (p.x + q.x) / 2, y: (p.y + q.y) / 2 }];
+    });
+    return /* @__PURE__ */ jsxs2("g", { children: [
+      ghosts.map(({ index, x, y }) => /* @__PURE__ */ jsx3(
+        "circle",
+        {
+          cx: x,
+          cy: y,
+          r: 4.5,
+          fill: "#fff",
+          stroke: SELECTION_COLOR,
+          strokeWidth: 1.5,
+          strokeDasharray: "2 2",
+          opacity: 0.6,
+          style: { cursor: "copy" },
+          onPointerDown: (e) => onWaypointAdd(e, shape.id, index, { x, y }),
+          children: /* @__PURE__ */ jsx3("title", { children: "Drag to add a point" })
+        },
+        `ghost-${index}`
+      )),
+      waypoints.map((p, i) => /* @__PURE__ */ jsx3(
+        "rect",
+        {
+          x: p.x - 4,
+          y: p.y - 4,
+          width: 8,
+          height: 8,
+          rx: 2,
+          fill: "#fff",
+          stroke: SELECTION_COLOR,
+          strokeWidth: 1.5,
+          style: { cursor: "move" },
+          onPointerDown: (e) => onHandlePointerDown(e, {
+            mode: "waypoint",
+            id: shape.id,
+            index: i
+          }),
+          onDoubleClick: (e) => {
+            e.stopPropagation();
+            onWaypointRemove(shape.id, i);
+          },
+          children: /* @__PURE__ */ jsx3("title", { children: "Drag to move, double-click to remove" })
+        },
+        `wp-${i}`
+      )),
+      ends.map(({ end, x, y }) => /* @__PURE__ */ jsx3(
+        "circle",
+        {
+          cx: x,
+          cy: y,
+          r: 5,
+          fill: "#fff",
+          stroke: SELECTION_COLOR,
+          strokeWidth: 1.5,
+          style: { cursor: "crosshair" },
+          onPointerDown: (e) => onHandlePointerDown(e, {
+            mode: "endpoint",
+            id: shape.id,
+            end,
+            orig: shape
+          })
+        },
+        end
+      )),
+      elbowMid && /* @__PURE__ */ jsx3(
+        "rect",
+        {
+          x: elbowMid.x - 4,
+          y: elbowMid.y - 4,
+          width: 8,
+          height: 8,
+          rx: 2,
+          fill: "#fff",
+          stroke: SELECTION_COLOR,
+          strokeWidth: 1.5,
+          style: { cursor: elbowCursor },
+          onPointerDown: (e) => onHandlePointerDown(e, {
+            mode: "elbow",
+            id: shape.id,
+            orig: shape
+          })
+        }
+      )
+    ] });
+  }
+  const b = bbox(shape);
+  const pad = 5;
+  const corners = [
+    { corner: "nw", x: b.x - pad, y: b.y - pad },
+    { corner: "ne", x: b.x + b.w + pad, y: b.y - pad },
+    { corner: "sw", x: b.x - pad, y: b.y + b.h + pad },
+    { corner: "se", x: b.x + b.w + pad, y: b.y + b.h + pad }
+  ];
+  const resizable = shape.type !== "text";
+  return /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsx3(
+      "rect",
+      {
+        x: b.x - pad,
+        y: b.y - pad,
+        width: b.w + pad * 2,
+        height: b.h + pad * 2,
+        fill: "none",
+        stroke: SELECTION_COLOR,
+        strokeWidth: 1,
+        strokeDasharray: "4 3",
+        pointerEvents: "none"
+      }
+    ),
+    resizable && corners.map(({ corner, x, y }) => /* @__PURE__ */ jsx3(
+      "rect",
+      {
+        x: x - 4,
+        y: y - 4,
+        width: 8,
+        height: 8,
+        rx: 2,
+        fill: "#fff",
+        stroke: SELECTION_COLOR,
+        strokeWidth: 1.5,
+        style: {
+          cursor: corner === "nw" || corner === "se" ? "nwse-resize" : "nesw-resize"
+        },
+        onPointerDown: (e) => onHandlePointerDown(e, { mode: "resize", id: shape.id, corner, orig: shape })
+      },
+      corner
+    ))
+  ] });
+}
+function TextEditOverlay({
+  shape,
+  field,
+  onCommit
+}) {
+  const original = shape[field] ?? "";
+  const [value, setValue] = useState3(original);
+  const ref = useRef3(null);
+  useEffect7(() => {
+    ref.current?.focus();
+    ref.current?.select();
+  }, []);
+  const style = { color: shape.stroke };
+  if (shape.type === "text") {
+    Object.assign(style, {
+      left: shape.x,
+      top: shape.y,
+      fontSize: FONT_SIZE,
+      minWidth: Math.max(80, textBoxSize(value).w + 20),
+      height: textBoxSize(value).h + 8
+    });
+  } else if (isConnectorType(shape.type)) {
+    const lines = wrapText(value, CONNECTOR_LABEL_MAX_WIDTH, CONNECTOR_FONT_SIZE);
+    const size = textBoxSize(lines.join("\n"), CONNECTOR_FONT_SIZE);
+    const width = Math.max(70, size.w + 16);
+    const height = size.h + 8;
+    const mid = connectorMidpoint(shape);
+    Object.assign(style, {
+      left: mid.x - width / 2,
+      top: mid.y - height / 2,
+      width,
+      height,
+      fontSize: CONNECTOR_FONT_SIZE,
+      textAlign: "center",
+      whiteSpace: "pre-wrap"
+    });
+  } else {
+    const b = bbox(shape);
+    const fontSize = field === "text" ? FONT_SIZE : SMALL_FONT_SIZE;
+    const width = Math.max(b.w - 8, 40);
+    const lines = wrapText(value, Math.max(width - 8, 20), fontSize).length;
+    const boxH = lines * fontSize * LINE_HEIGHT + 8;
+    const top = field === "label" ? b.y + 3 : field === "footer" ? b.y + b.h - boxH - 3 : b.y + b.h / 2 - boxH / 2;
+    Object.assign(style, {
+      left: b.x + 4,
+      top,
+      width,
+      height: boxH,
+      fontSize,
+      fontWeight: field === "label" ? 600 : void 0,
+      textAlign: "center",
+      background: "transparent",
+      whiteSpace: "pre-wrap"
+    });
+  }
+  const placeholder = field === "label" ? "Label" : field === "footer" ? "Footer" : "Text";
+  return /* @__PURE__ */ jsx3(
+    "textarea",
+    {
+      ref,
+      className: "zui-drawing-text-input",
+      style,
+      value,
+      placeholder,
+      onChange: (e) => setValue(e.target.value),
+      onBlur: () => onCommit(shape.id, field, value),
+      onKeyDown: (e) => {
+        e.stopPropagation();
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault();
+          onCommit(shape.id, field, value);
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          onCommit(shape.id, field, original);
+        }
+      },
+      onPointerDown: (e) => e.stopPropagation()
+    }
+  );
+}
+
+// src/nodes/DrawingNode.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DrawingNode = class _DrawingNode extends DecoratorNode {
+  static getType() {
+    return "drawing";
+  }
+  static clone(node) {
+    return new _DrawingNode(node.__data, node.__key);
+  }
+  constructor(data, key) {
+    super(key);
+    this.__data = data;
+  }
+  static importJSON(serializedNode) {
+    return $createDrawingNode(serializedNode.data);
+  }
+  exportJSON() {
+    return {
+      data: this.__data,
+      type: "drawing",
+      version: 1
+    };
+  }
+  createDOM(config) {
+    const div = document.createElement("div");
+    const className = config.theme.drawing;
+    div.className = typeof className === "string" ? className : "zui-drawing";
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  exportDOM() {
+    const element = document.createElement("pre");
+    element.setAttribute("data-drawing", this.__data);
+    return { element };
+  }
+  static importDOM() {
+    return {
+      pre: (domNode) => {
+        if (!domNode.hasAttribute("data-drawing")) return null;
+        return {
+          conversion: (element) => ({
+            node: $createDrawingNode(
+              serializeDrawingData(
+                parseDrawingData(element.getAttribute("data-drawing") ?? "")
+              )
+            )
+          }),
+          priority: 2
+        };
+      }
+    };
+  }
+  getData() {
+    return parseDrawingData(this.getLatest().__data);
+  }
+  setData(data) {
+    const writable = this.getWritable();
+    writable.__data = serializeDrawingData(data);
+  }
+  isInline() {
+    return false;
+  }
+  decorate(_editor, _config) {
+    return /* @__PURE__ */ jsx4(DrawingCanvas, { nodeKey: this.getKey(), data: this.getData() });
+  }
+};
+function $createDrawingNode(data = serializeDrawingData(EMPTY_DRAWING)) {
+  return $applyNodeReplacement(new DrawingNode(data));
+}
+function $isDrawingNode(node) {
+  return node instanceof DrawingNode;
+}
+var DRAWING_START = /^```drawing\s*$/;
+var DRAWING_END = /^```\s*$/;
+var DRAWING = {
+  dependencies: [DrawingNode],
+  export: (node) => {
+    if (!$isDrawingNode(node)) return null;
+    return `\`\`\`drawing
+${node.getLatest().__data}
+\`\`\``;
+  },
+  regExpStart: DRAWING_START,
+  regExpEnd: DRAWING_END,
+  replace: (rootNode, children, _startMatch, _endMatch, linesInBetween, isImport) => {
+    if (!isImport || children != null || linesInBetween == null) return false;
+    const json = linesInBetween.join("\n").trim();
+    const data = parseDrawingData(json);
+    rootNode.append($createDrawingNode(serializeDrawingData(data)));
+  },
+  type: "multiline-element"
+};
+
+// src/plugins/ToolbarPlugin.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var FORMAT_BUTTONS = [
+  {
+    format: "bold",
+    label: "Bold",
+    icon: /* @__PURE__ */ jsx5(
+      "path",
+      {
+        d: "M6 3.5h5a3 3 0 0 1 0 6H6zm0 6h6a3 3 0 0 1 0 6H6z",
+        strokeWidth: "1.8"
+      }
+    )
+  },
+  {
+    format: "italic",
+    label: "Italic",
+    icon: /* @__PURE__ */ jsx5("path", { d: "M8.5 3.5h6M5.5 16.5h6M11.5 3.5l-3 13", strokeWidth: "1.6" })
+  },
+  {
+    format: "strikethrough",
+    label: "Strikethrough",
+    icon: /* @__PURE__ */ jsx5(
+      "path",
+      {
+        d: "M4 10h12M13.5 5.5c-.6-1.2-2-2-3.5-2-2 0-3.5 1.2-3.5 2.8 0 .5.1.9.4 1.3m-.4 5c.5 1.6 2 2.9 3.9 2.9 2 0 3.6-1.2 3.6-2.9 0-.4-.1-.8-.2-1.1",
+        strokeWidth: "1.6"
+      }
+    )
+  },
+  {
+    format: "code",
+    label: "Inline code",
+    icon: /* @__PURE__ */ jsx5("path", { d: "M7.5 6L4 10l3.5 4M12.5 6L16 10l-3.5 4", strokeWidth: "1.6" })
+  }
+];
+function ToolbarPlugin() {
+  const [editor] = useLexicalComposerContext8();
+  const [activeFormats, setActiveFormats] = useState4(
+    /* @__PURE__ */ new Set()
+  );
+  useEffect8(() => {
+    return editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const selection = $getSelection3();
+        if (!$isRangeSelection3(selection)) {
+          setActiveFormats(/* @__PURE__ */ new Set());
+          return;
+        }
+        const next = /* @__PURE__ */ new Set();
+        for (const { format } of FORMAT_BUTTONS) {
+          if (selection.hasFormat(format)) next.add(format);
+        }
+        setActiveFormats(next);
+      });
+    });
+  }, [editor]);
+  const insertTable = useCallback4(() => {
+    editor.dispatchCommand(INSERT_TABLE_COMMAND, {
+      columns: "3",
+      rows: "3",
+      includeHeaders: { rows: true, columns: false }
+    });
+  }, [editor]);
+  const insertDrawing = useCallback4(() => {
+    editor.update(() => {
+      const drawing = $createDrawingNode();
+      $insertNodeToNearestRoot(drawing);
+    });
+  }, [editor]);
+  return /* @__PURE__ */ jsxs3("div", { className: "zui-text-editor-toolbar", children: [
+    FORMAT_BUTTONS.map(({ format, label, icon }) => /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        title: label,
+        "aria-label": label,
+        "aria-pressed": activeFormats.has(format),
+        className: `zui-text-editor-toolbar-button ${activeFormats.has(format) ? "is-active" : ""}`,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, format),
+        children: /* @__PURE__ */ jsx5(
+          "svg",
+          {
+            viewBox: "0 0 20 20",
+            width: "16",
+            height: "16",
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: icon
+          }
+        )
+      },
+      format
+    )),
+    /* @__PURE__ */ jsx5("div", { className: "zui-text-editor-toolbar-divider" }),
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        title: "Insert table",
+        "aria-label": "Insert table",
+        className: "zui-text-editor-toolbar-button",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: insertTable,
+        children: /* @__PURE__ */ jsxs3(
+          "svg",
+          {
+            viewBox: "0 0 20 20",
+            width: "16",
+            height: "16",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            children: [
+              /* @__PURE__ */ jsx5("rect", { x: "3", y: "3.5", width: "14", height: "13", rx: "1.5" }),
+              /* @__PURE__ */ jsx5("path", { d: "M3 8h14M8 8v8.5M13 8v8.5" })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        title: "Insert drawing",
+        "aria-label": "Insert drawing",
+        className: "zui-text-editor-toolbar-button",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: insertDrawing,
+        children: /* @__PURE__ */ jsxs3(
+          "svg",
+          {
+            viewBox: "0 0 20 20",
+            width: "16",
+            height: "16",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx5("rect", { x: "3", y: "5", width: "8", height: "6", rx: "1.5" }),
+              /* @__PURE__ */ jsx5("path", { d: "M13.5 8h3M14.5 6.5L17.5 8l-3 1.5" }),
+              /* @__PURE__ */ jsx5("ellipse", { cx: "13", cy: "14.5", rx: "4", ry: "2.8" })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/nodes/FrontmatterNode.ts
+import {
+  $applyNodeReplacement as $applyNodeReplacement2,
   $createLineBreakNode,
   $createTextNode,
   ElementNode
@@ -239,7 +2323,7 @@ var FrontmatterNode = class _FrontmatterNode extends ElementNode {
   }
 };
 function $createFrontmatterNode() {
-  return $applyNodeReplacement(new FrontmatterNode());
+  return $applyNodeReplacement2(new FrontmatterNode());
 }
 function $isFrontmatterNode(node) {
   return node instanceof FrontmatterNode;
@@ -272,6 +2356,122 @@ ${body}
   type: "multiline-element"
 };
 
+// src/transformers/tableTransformer.ts
+import {
+  $isParagraphNode as $isParagraphNode2,
+  $isTextNode
+} from "lexical";
+import {
+  $convertFromMarkdownString as $convertFromMarkdownString2,
+  $convertToMarkdownString as $convertToMarkdownString2,
+  TRANSFORMERS
+} from "@lexical/markdown";
+import {
+  $createTableCellNode,
+  $createTableNode,
+  $createTableRowNode,
+  $isTableCellNode,
+  $isTableNode,
+  $isTableRowNode,
+  TableCellHeaderStates,
+  TableCellNode,
+  TableNode,
+  TableRowNode
+} from "@lexical/table";
+var TABLE_ROW_REG_EXP = /^\|(.+)\|\s?$/;
+var TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-*:? ?)+\|\s?$/;
+function getTableColumnsSize(table) {
+  const row = table.getFirstChild();
+  return $isTableRowNode(row) ? row.getChildrenSize() : 0;
+}
+function createTableCell(textContent) {
+  const unescaped = textContent.replace(/\\n/g, "\n");
+  const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS);
+  $convertFromMarkdownString2(unescaped, TRANSFORMERS, cell);
+  return cell;
+}
+function mapToTableCells(textContent) {
+  const match = textContent.match(TABLE_ROW_REG_EXP);
+  if (!match || !match[1]) return null;
+  return match[1].split("|").map((text) => createTableCell(text.trim()));
+}
+var TABLE = {
+  dependencies: [TableNode, TableRowNode, TableCellNode],
+  export: (node) => {
+    if (!$isTableNode(node)) return null;
+    const output = [];
+    for (const row of node.getChildren()) {
+      if (!$isTableRowNode(row)) continue;
+      const rowOutput = [];
+      let isHeaderRow = false;
+      for (const cell of row.getChildren()) {
+        if (!$isTableCellNode(cell)) continue;
+        rowOutput.push(
+          $convertToMarkdownString2(TRANSFORMERS, cell).replace(/\n/g, "\\n")
+        );
+        if (cell.__headerState === TableCellHeaderStates.ROW) {
+          isHeaderRow = true;
+        }
+      }
+      output.push(`| ${rowOutput.join(" | ")} |`);
+      if (isHeaderRow) {
+        output.push(`| ${rowOutput.map(() => "---").join(" | ")} |`);
+      }
+    }
+    return output.join("\n");
+  },
+  regExp: TABLE_ROW_REG_EXP,
+  replace: (parentNode, _children, match) => {
+    if (TABLE_ROW_DIVIDER_REG_EXP.test(match[0])) {
+      const table2 = parentNode.getPreviousSibling();
+      if (!table2 || !$isTableNode(table2)) return;
+      const lastRow = table2.getLastChild();
+      if (!lastRow || !$isTableRowNode(lastRow)) return;
+      lastRow.getChildren().forEach((cell) => {
+        if ($isTableCellNode(cell)) {
+          cell.setHeaderStyles(TableCellHeaderStates.ROW, TableCellHeaderStates.ROW);
+        }
+      });
+      parentNode.remove();
+      return;
+    }
+    const matchCells = mapToTableCells(match[0]);
+    if (matchCells == null) return;
+    const rows = [matchCells];
+    let sibling = parentNode.getPreviousSibling();
+    let maxCells = matchCells.length;
+    while (sibling) {
+      if (!$isParagraphNode2(sibling) || sibling.getChildrenSize() !== 1) break;
+      const firstChild = sibling.getFirstChild();
+      if (!$isTextNode(firstChild)) break;
+      const cells = mapToTableCells(firstChild.getTextContent());
+      if (cells == null) break;
+      maxCells = Math.max(maxCells, cells.length);
+      rows.unshift(cells);
+      const previousSibling2 = sibling.getPreviousSibling();
+      sibling.remove();
+      sibling = previousSibling2;
+    }
+    const table = $createTableNode();
+    for (const cells of rows) {
+      const tableRow = $createTableRowNode();
+      table.append(tableRow);
+      for (let i = 0; i < maxCells; i++) {
+        tableRow.append(i < cells.length ? cells[i] : createTableCell(""));
+      }
+    }
+    const previousSibling = parentNode.getPreviousSibling();
+    if ($isTableNode(previousSibling) && getTableColumnsSize(previousSibling) === maxCells) {
+      previousSibling.append(...table.getChildren());
+      parentNode.remove();
+    } else {
+      parentNode.replace(table);
+    }
+    table.selectEnd();
+  },
+  type: "element"
+};
+
 // src/theme.ts
 var editorTheme = {
   ltr: "text-left",
@@ -342,13 +2542,19 @@ var editorTheme = {
     variable: "text-blue-500"
   },
   quote: "border-l-4 border-border pl-4 italic",
-  frontmatter: "zui-frontmatter"
+  frontmatter: "zui-frontmatter",
+  table: "zui-table",
+  tableCell: "zui-table-cell",
+  tableCellHeader: "zui-table-cell-header",
+  tableSelected: "zui-table-selected",
+  tableSelection: "zui-table-selection",
+  drawing: "zui-drawing"
 };
 
 // src/MarkdownEditor.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var SYNC_TRANSFORMERS = [FRONTMATTER, CHECK_LIST, ...TRANSFORMERS];
-var SHORTCUT_TRANSFORMERS = TRANSFORMERS.filter((t) => t !== CODE);
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var SYNC_TRANSFORMERS = [FRONTMATTER, DRAWING, CHECK_LIST, TABLE, ...TRANSFORMERS2];
+var SHORTCUT_TRANSFORMERS = [TABLE, ...TRANSFORMERS2.filter((t) => t !== CODE)];
 function onError(error) {
   console.error(error);
 }
@@ -361,11 +2567,15 @@ var editorNodes = [
   CodeHighlightNode,
   AutoLinkNode,
   LinkNode,
-  FrontmatterNode
+  FrontmatterNode,
+  TableNode2,
+  TableRowNode2,
+  TableCellNode2,
+  DrawingNode
 ];
 function ReadOnlyPlugin({ readOnly }) {
-  const [editor] = useLexicalComposerContext5();
-  useEffect5(() => {
+  const [editor] = useLexicalComposerContext9();
+  useEffect9(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   return null;
@@ -377,17 +2587,20 @@ function MarkdownEditor({
   readOnly = false,
   className,
   mode = "edit-md",
-  autoFocus = false
+  autoFocus = false,
+  toolbar = true,
+  outline = false,
+  foldable = true
 }) {
-  const latestValueRef = useRef2(value ?? "");
-  const [mountKey, setMountKey] = useState(0);
-  const [capturedMarkdown, setCapturedMarkdown] = useState(value ?? "");
-  useEffect5(() => {
+  const latestValueRef = useRef4(value ?? "");
+  const [mountKey, setMountKey] = useState5(0);
+  const [capturedMarkdown, setCapturedMarkdown] = useState5(value ?? "");
+  useEffect9(() => {
     if (value !== void 0) {
       latestValueRef.current = value;
     }
   }, [value]);
-  const handleTextChange = useCallback(
+  const handleTextChange = useCallback5(
     (e) => {
       const newValue = e.target.value;
       latestValueRef.current = newValue;
@@ -395,15 +2608,15 @@ function MarkdownEditor({
     },
     [onChange]
   );
-  const handleLexicalChange = useCallback(
+  const handleLexicalChange = useCallback5(
     (newValue) => {
       latestValueRef.current = newValue;
       onChange?.(newValue);
     },
     [onChange]
   );
-  const prevModeRef = useRef2(mode);
-  useEffect5(() => {
+  const prevModeRef = useRef4(mode);
+  useEffect9(() => {
     if (prevModeRef.current === "edit-raw" && mode !== "edit-raw") {
       setCapturedMarkdown(latestValueRef.current);
       setMountKey((k) => k + 1);
@@ -420,7 +2633,7 @@ function MarkdownEditor({
     []
   );
   if (mode === "edit-raw") {
-    return /* @__PURE__ */ jsx("div", { className: `zui-text-editor ${className ?? ""}`, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx6("div", { className: `zui-text-editor ${className ?? ""}`, children: /* @__PURE__ */ jsx6(
       "textarea",
       {
         className: "zui-text-editor-textarea",
@@ -433,22 +2646,29 @@ function MarkdownEditor({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsxs("div", { className: `zui-text-editor ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsx(
-      RichTextPlugin,
-      {
-        contentEditable: /* @__PURE__ */ jsx(
-          ContentEditable,
+  return /* @__PURE__ */ jsx6(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsxs4("div", { className: `zui-text-editor ${className ?? ""}`, children: [
+    toolbar && mode === "edit-md" && !readOnly && /* @__PURE__ */ jsx6(ToolbarPlugin, {}),
+    /* @__PURE__ */ jsxs4("div", { className: "zui-text-editor-body", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "zui-text-editor-main", children: [
+        /* @__PURE__ */ jsx6(
+          RichTextPlugin,
           {
-            className: "zui-text-editor-content",
-            "aria-placeholder": placeholder,
-            placeholder: /* @__PURE__ */ jsx("div", { className: "zui-text-editor-placeholder", children: placeholder })
+            contentEditable: /* @__PURE__ */ jsx6(
+              ContentEditable,
+              {
+                className: "zui-text-editor-content",
+                "aria-placeholder": placeholder,
+                placeholder: /* @__PURE__ */ jsx6("div", { className: "zui-text-editor-placeholder", children: placeholder })
+              }
+            ),
+            ErrorBoundary: LexicalErrorBoundary
           }
         ),
-        ErrorBoundary: LexicalErrorBoundary
-      }
-    ),
-    /* @__PURE__ */ jsx(
+        foldable && /* @__PURE__ */ jsx6(FoldingPlugin, {})
+      ] }),
+      outline && /* @__PURE__ */ jsx6(OutlinePlugin, {})
+    ] }),
+    /* @__PURE__ */ jsx6(
       MarkdownSyncPlugin,
       {
         initialMarkdown: mode === "view" ? value ?? "" : capturedMarkdown,
@@ -456,22 +2676,28 @@ function MarkdownEditor({
         transformers: SYNC_TRANSFORMERS
       }
     ),
-    /* @__PURE__ */ jsx(HistoryPlugin, {}),
-    /* @__PURE__ */ jsx(ListPlugin, {}),
-    /* @__PURE__ */ jsx(CheckListPlugin, {}),
-    /* @__PURE__ */ jsx(ChecklistShortcutPlugin, {}),
-    /* @__PURE__ */ jsx(CodeBlockShortcutPlugin, {}),
-    /* @__PURE__ */ jsx(CodeHighlightPlugin, {}),
-    /* @__PURE__ */ jsx(LinkPlugin, {}),
-    /* @__PURE__ */ jsx(MarkdownShortcutPlugin, { transformers: SHORTCUT_TRANSFORMERS }),
-    /* @__PURE__ */ jsx(ReadOnlyPlugin, { readOnly: readOnly || mode === "view" }),
-    autoFocus && /* @__PURE__ */ jsx(AutoFocusPlugin, {})
+    /* @__PURE__ */ jsx6(HistoryPlugin, {}),
+    /* @__PURE__ */ jsx6(ListPlugin, {}),
+    /* @__PURE__ */ jsx6(CheckListPlugin, {}),
+    /* @__PURE__ */ jsx6(ChecklistShortcutPlugin, {}),
+    /* @__PURE__ */ jsx6(CodeBlockShortcutPlugin, {}),
+    /* @__PURE__ */ jsx6(CodeHighlightPlugin, {}),
+    /* @__PURE__ */ jsx6(TablePlugin, {}),
+    /* @__PURE__ */ jsx6(LinkPlugin, {}),
+    /* @__PURE__ */ jsx6(MarkdownShortcutPlugin, { transformers: SHORTCUT_TRANSFORMERS }),
+    /* @__PURE__ */ jsx6(ReadOnlyPlugin, { readOnly: readOnly || mode === "view" }),
+    autoFocus && /* @__PURE__ */ jsx6(AutoFocusPlugin, {})
   ] }) }, mountKey);
 }
 export {
+  $createDrawingNode,
   $createFrontmatterNode,
+  $isDrawingNode,
   $isFrontmatterNode,
+  DRAWING,
+  DrawingNode,
   FRONTMATTER,
   FrontmatterNode,
-  MarkdownEditor
+  MarkdownEditor,
+  TABLE
 };