@zuilib/text-editor 0.2.1 → 0.3.0

package/dist/index.js

@@ -1,10 +1,15 @@
-// src/MarkdownEditor.tsx
-import { useCallback as useCallback5, useEffect as useEffect9, useMemo, useRef as useRef4, useState as useState5 } from "react";
+// src/EditorRoot.tsx
+import {
+  createContext,
+  useCallback as useCallback2,
+  useContext,
+  useEffect as useEffect6,
+  useMemo,
+  useRef as useRef3,
+  useState as useState2
+} from "react";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
 import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
@@ -12,7 +17,7 @@ import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPl
 import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 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 { useLexicalComposerContext as useLexicalComposerContext6 } 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";
@@ -166,146 +171,9 @@ function CodeHighlightPlugin() {
   return null;
 }
 
-// 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 { useEffect as useEffect4, useRef } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
 import {
   $convertFromMarkdownString,
   $convertToMarkdownString
@@ -315,11 +183,11 @@ function MarkdownSyncPlugin({
   onChange,
   transformers
 }) {
-  const [editor] = useLexicalComposerContext5();
-  const lastMarkdownRef = useRef2("");
-  const onChangeRef = useRef2(onChange);
+  const [editor] = useLexicalComposerContext4();
+  const lastMarkdownRef = useRef("");
+  const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
-  useEffect5(() => {
+  useEffect4(() => {
     if (initialMarkdown && initialMarkdown !== lastMarkdownRef.current) {
       lastMarkdownRef.current = initialMarkdown;
       editor.update(() => {
@@ -327,7 +195,7 @@ function MarkdownSyncPlugin({
       }, { tag: "initial-load" });
     }
   }, [editor, initialMarkdown]);
-  useEffect5(() => {
+  useEffect4(() => {
     return editor.registerUpdateListener(
       ({ editorState, dirtyElements, dirtyLeaves, tags }) => {
         if (dirtyElements.size === 0 && dirtyLeaves.size === 0) return;
@@ -342,145 +210,101 @@ function MarkdownSyncPlugin({
   return null;
 }
 
-// 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
+// src/nodes/FrontmatterNode.ts
 import {
   $applyNodeReplacement,
-  DecoratorNode
-} from "lexical";
-
+  $createLineBreakNode,
+  $createTextNode,
+  ElementNode
+} from "lexical";
+var FrontmatterNode = class _FrontmatterNode extends ElementNode {
+  static getType() {
+    return "frontmatter";
+  }
+  static clone(node) {
+    return new _FrontmatterNode(node.__key);
+  }
+  constructor(key) {
+    super(key);
+  }
+  createDOM(config) {
+    const dom = document.createElement("div");
+    const className = config.theme.frontmatter;
+    dom.className = typeof className === "string" ? className : "zui-frontmatter";
+    return dom;
+  }
+  updateDOM() {
+    return false;
+  }
+  static importJSON(_serializedNode) {
+    return $createFrontmatterNode();
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "frontmatter",
+      version: 1
+    };
+  }
+  isInline() {
+    return false;
+  }
+  canBeEmpty() {
+    return false;
+  }
+  canIndent() {
+    return false;
+  }
+};
+function $createFrontmatterNode() {
+  return $applyNodeReplacement(new FrontmatterNode());
+}
+function $isFrontmatterNode(node) {
+  return node instanceof FrontmatterNode;
+}
+var FRONTMATTER_DELIMITER = /^---\s*$/;
+var FRONTMATTER = {
+  dependencies: [FrontmatterNode],
+  export: (node) => {
+    if (!$isFrontmatterNode(node)) return null;
+    const body = node.getTextContent();
+    return body ? `---
+${body}
+---` : "---\n---";
+  },
+  regExpStart: FRONTMATTER_DELIMITER,
+  regExpEnd: FRONTMATTER_DELIMITER,
+  replace: (rootNode, children, _startMatch, _endMatch, linesInBetween, isImport) => {
+    if (!isImport || children != null || linesInBetween == null) return false;
+    if (rootNode.getChildrenSize() !== 0) return false;
+    const lines = [...linesInBetween];
+    while (lines.length > 0 && lines[0].length === 0) lines.shift();
+    while (lines.length > 0 && lines[lines.length - 1].length === 0) lines.pop();
+    const node = $createFrontmatterNode();
+    lines.forEach((line, index) => {
+      if (index > 0) node.append($createLineBreakNode());
+      node.append($createTextNode(line));
+    });
+    rootNode.append(node);
+  },
+  type: "multiline-element"
+};
+
+// src/nodes/DrawingNode.tsx
+import {
+  $applyNodeReplacement as $applyNodeReplacement2,
+  DecoratorNode
+} from "lexical";
+
 // src/components/DrawingCanvas.tsx
 import {
-  useCallback as useCallback3,
-  useEffect as useEffect7,
-  useRef as useRef3,
-  useState as useState3
+  useCallback,
+  useEffect as useEffect5,
+  useRef as useRef2,
+  useState
 } from "react";
 import { $getNodeByKey as $getNodeByKey2 } from "lexical";
-import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
+import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 
 // src/components/drawingTypes.ts
@@ -791,7 +615,7 @@ function resolveBindings(shapes) {
 }
 
 // src/components/DrawingCanvas.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
 var MIN_HEIGHT = 120;
 var MAX_HEIGHT = 900;
@@ -825,7 +649,7 @@ function BoxTexts({
     opacity: 0.35,
     style: { userSelect: "none", pointerEvents: "none" }
   };
-  return /* @__PURE__ */ jsxs2("g", { children: [
+  return /* @__PURE__ */ jsxs("g", { children: [
     hideField !== "label" && (shape.label ? labelLines.map((line, i) => /* @__PURE__ */ createElement(
       "text",
       {
@@ -838,7 +662,7 @@ function BoxTexts({
         opacity: 0.85
       },
       line
-    )) : showHints && /* @__PURE__ */ jsx3("text", { ...hint, x: cx, y: b.y + SMALL_FONT_SIZE + 7, fontSize: SMALL_FONT_SIZE, children: "Label" })),
+    )) : showHints && /* @__PURE__ */ jsx("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",
       {
@@ -849,7 +673,7 @@ function BoxTexts({
         fontSize: FONT_SIZE
       },
       line
-    )) : showHints && /* @__PURE__ */ jsx3("text", { ...hint, x: cx, y: mainStart, fontSize: FONT_SIZE, children: "Text" })),
+    )) : showHints && /* @__PURE__ */ jsx("text", { ...hint, x: cx, y: mainStart, fontSize: FONT_SIZE, children: "Text" })),
     hideField !== "footer" && (shape.footer ? footerLines.map((line, i) => /* @__PURE__ */ createElement(
       "text",
       {
@@ -861,7 +685,7 @@ function BoxTexts({
         opacity: 0.65
       },
       line
-    )) : showHints && /* @__PURE__ */ jsx3("text", { ...hint, x: cx, y: b.y + b.h - 9, fontSize: SMALL_FONT_SIZE, children: "Footer" }))
+    )) : showHints && /* @__PURE__ */ jsx("text", { ...hint, x: cx, y: b.y + b.h - 9, fontSize: SMALL_FONT_SIZE, children: "Footer" }))
   ] });
 }
 function ShapeView({
@@ -878,8 +702,8 @@ function ShapeView({
   switch (shape.type) {
     case "rect": {
       const b = bbox(shape);
-      return /* @__PURE__ */ jsxs2("g", { children: [
-        /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
           "rect",
           {
             ...common,
@@ -891,13 +715,13 @@ function ShapeView({
             fill: shape.fill
           }
         ),
-        /* @__PURE__ */ jsx3(BoxTexts, { shape, hideField, showHints })
+        /* @__PURE__ */ jsx(BoxTexts, { shape, hideField, showHints })
       ] });
     }
     case "ellipse": {
       const b = bbox(shape);
-      return /* @__PURE__ */ jsxs2("g", { children: [
-        /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
           "ellipse",
           {
             ...common,
@@ -908,13 +732,13 @@ function ShapeView({
             fill: shape.fill
           }
         ),
-        /* @__PURE__ */ jsx3(BoxTexts, { shape, hideField, showHints })
+        /* @__PURE__ */ jsx(BoxTexts, { shape, hideField, showHints })
       ] });
     }
     case "triangle":
     case "pentagon":
-      return /* @__PURE__ */ jsxs2("g", { children: [
-        /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
           "polygon",
           {
             ...common,
@@ -922,12 +746,12 @@ function ShapeView({
             fill: shape.fill
           }
         ),
-        /* @__PURE__ */ jsx3(BoxTexts, { shape, hideField, showHints })
+        /* @__PURE__ */ jsx(BoxTexts, { shape, hideField, showHints })
       ] });
     case "line":
     case "arrow":
-      return /* @__PURE__ */ jsxs2("g", { children: [
-        /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
           "path",
           {
             ...common,
@@ -935,10 +759,10 @@ function ShapeView({
             fill: "none"
           }
         ),
-        shape.text && hideField !== "text" && /* @__PURE__ */ jsx3(ConnectorLabel, { shape })
+        shape.text && hideField !== "text" && /* @__PURE__ */ jsx(ConnectorLabel, { shape })
       ] });
     case "text":
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx(
         "text",
         {
           x: shape.x,
@@ -947,7 +771,7 @@ function ShapeView({
           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))
+          children: (shape.text ?? "").split("\n").map((line, i) => /* @__PURE__ */ jsx("tspan", { x: shape.x, dy: i === 0 ? 0 : FONT_SIZE * 1.35, children: line }, i))
         }
       );
   }
@@ -959,8 +783,8 @@ function ConnectorLabel({ shape }) {
   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(
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
       "rect",
       {
         x: midX - size.w / 2 - 5,
@@ -972,7 +796,7 @@ function ConnectorLabel({ shape }) {
         opacity: 0.92
       }
     ),
-    lines.map((line, i) => /* @__PURE__ */ jsx3(
+    lines.map((line, i) => /* @__PURE__ */ jsx(
       "text",
       {
         x: midX,
@@ -989,20 +813,20 @@ function ConnectorLabel({ shape }) {
   ] });
 }
 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" })
+  select: /* @__PURE__ */ jsx("path", { d: "M4 2l12 6.5-5.2 1.6L8 16z", fill: "currentColor", stroke: "none" }),
+  rect: /* @__PURE__ */ jsx("rect", { x: "3", y: "4.5", width: "14", height: "11", rx: "2" }),
+  ellipse: /* @__PURE__ */ jsx("ellipse", { cx: "10", cy: "10", rx: "7", ry: "5.5" }),
+  triangle: /* @__PURE__ */ jsx("path", { d: "M10 3.5L17 16.5H3z", strokeLinejoin: "round" }),
+  pentagon: /* @__PURE__ */ jsx("path", { d: "M10 3L16.8 8.1L14.2 16.2H5.8L3.2 8.1z", strokeLinejoin: "round" }),
+  arrow: /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 16L16 4" }),
+    /* @__PURE__ */ jsx("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" })
+  line: /* @__PURE__ */ jsx("path", { d: "M4 16L16 4" }),
+  text: /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 5V3.5h12V5" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 3.5V16.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M7 16.5h6" })
   ] })
 };
 function bindEndpoints(shape, shapes) {
@@ -1026,23 +850,23 @@ var TOOLS = [
   { tool: "text", label: "Text" }
 ];
 function DrawingCanvas({ nodeKey, data }) {
-  const [editor] = useLexicalComposerContext7();
+  const [editor] = useLexicalComposerContext5();
   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);
+  const [shapes, setShapes] = useState(data.shapes);
+  const [height, setHeight] = useState(data.height);
+  const [tool, setTool] = useState("select");
+  const [selectedId, setSelectedId] = useState(null);
+  const [editingText, setEditingText] = useState(null);
+  const [stroke, setStroke] = useState(STROKE_COLORS[0]);
+  const [fill, setFill] = useState(FILL_COLORS[0]);
+  const svgRef = useRef2(null);
+  const dragRef = useRef2(null);
+  const lastCommittedRef = useRef2(serializeDrawingData(data));
+  const shapesRef = useRef2(shapes);
   shapesRef.current = shapes;
-  const heightRef = useRef3(height);
+  const heightRef = useRef2(height);
   heightRef.current = height;
-  useEffect7(() => {
+  useEffect5(() => {
     const incoming = serializeDrawingData(data);
     if (incoming !== lastCommittedRef.current) {
       lastCommittedRef.current = incoming;
@@ -1052,7 +876,7 @@ function DrawingCanvas({ nodeKey, data }) {
       setEditingText(null);
     }
   }, [data]);
-  const commit = useCallback3(
+  const commit = useCallback(
     (nextShapes, nextHeight) => {
       const payload = {
         version: 1,
@@ -1071,7 +895,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [editor, nodeKey]
   );
-  const updateShapes = useCallback3(
+  const updateShapes = useCallback(
     (updater, options) => {
       setShapes((prev) => {
         const next = resolveBindings(updater(prev));
@@ -1081,17 +905,17 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [commit]
   );
-  const getPoint = useCallback3((e) => {
+  const getPoint = useCallback((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) => {
+  const startTextEditing = useCallback((id, field) => {
     setEditingText({ id, field });
     setSelectedId(id);
   }, []);
-  const handleBackgroundPointerDown = useCallback3(
+  const handleBackgroundPointerDown = useCallback(
     (e) => {
       if (!isEditable || editingText) return;
       if (e.button !== 0) return;
@@ -1151,7 +975,7 @@ function DrawingCanvas({ nodeKey, data }) {
       startTextEditing
     ]
   );
-  const handleShapePointerDown = useCallback3(
+  const handleShapePointerDown = useCallback(
     (e, shape) => {
       if (!isEditable || tool !== "select" || editingText) return;
       if (e.button !== 0) return;
@@ -1170,7 +994,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [isEditable, tool, editingText, getPoint, selectedId]
   );
-  const handleHandlePointerDown = useCallback3(
+  const handleHandlePointerDown = useCallback(
     (e, drag) => {
       if (!isEditable) return;
       if (e.button !== 0) return;
@@ -1186,7 +1010,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [isEditable, updateShapes]
   );
-  const handlePointerMove = useCallback3(
+  const handlePointerMove = useCallback(
     (e) => {
       const drag = dragRef.current;
       if (!drag) return;
@@ -1277,7 +1101,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [getPoint, updateShapes]
   );
-  const handlePointerUp = useCallback3(() => {
+  const handlePointerUp = useCallback(() => {
     const drag = dragRef.current;
     dragRef.current = null;
     if (!drag) return;
@@ -1330,7 +1154,7 @@ function DrawingCanvas({ nodeKey, data }) {
     }
     updateShapes((prev) => prev.map(normalize), { commit: true });
   }, [commit, updateShapes, startTextEditing]);
-  const deleteSelected = useCallback3(() => {
+  const deleteSelected = useCallback(() => {
     if (!selectedId) return;
     setEditingText(null);
     setSelectedId(null);
@@ -1338,7 +1162,7 @@ function DrawingCanvas({ nodeKey, data }) {
       commit: true
     });
   }, [selectedId, updateShapes]);
-  const handleKeyDown = useCallback3(
+  const handleKeyDown = useCallback(
     (e) => {
       if (!isEditable || editingText) return;
       if ((e.key === "Delete" || e.key === "Backspace") && selectedId) {
@@ -1366,7 +1190,7 @@ function DrawingCanvas({ nodeKey, data }) {
       startTextEditing
     ]
   );
-  const applyStroke = useCallback3(
+  const applyStroke = useCallback(
     (color) => {
       setStroke(color);
       if (selectedId) {
@@ -1378,7 +1202,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [selectedId, updateShapes]
   );
-  const applyFill = useCallback3(
+  const applyFill = useCallback(
     (color) => {
       setFill(color);
       if (selectedId) {
@@ -1390,7 +1214,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [selectedId, updateShapes]
   );
-  const applyRouting = useCallback3(
+  const applyRouting = useCallback(
     (elbow) => {
       if (!selectedId) return;
       updateShapes(
@@ -1407,7 +1231,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [selectedId, updateShapes]
   );
-  const addWaypoint = useCallback3(
+  const addWaypoint = useCallback(
     (e, shapeId, segmentIndex, point) => {
       if (!isEditable) return;
       if (e.button !== 0) return;
@@ -1429,7 +1253,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [isEditable, updateShapes]
   );
-  const removeWaypoint = useCallback3(
+  const removeWaypoint = useCallback(
     (shapeId, index) => {
       updateShapes(
         (prev) => prev.map((s) => {
@@ -1442,7 +1266,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [updateShapes]
   );
-  const applyDirection = useCallback3(
+  const applyDirection = useCallback(
     (bidirectional) => {
       if (!selectedId) return;
       updateShapes(
@@ -1454,7 +1278,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [selectedId, updateShapes]
   );
-  const commitText = useCallback3(
+  const commitText = useCallback(
     (id, field, value) => {
       setEditingText(null);
       updateShapes(
@@ -1475,15 +1299,15 @@ function DrawingCanvas({ nodeKey, data }) {
   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(
+  return /* @__PURE__ */ jsxs(
     "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(
+        isEditable && /* @__PURE__ */ jsxs("div", { className: "zui-drawing-toolbar", onPointerDown: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx("div", { className: "zui-drawing-toolbar-group", children: TOOLS.map(({ tool: t, label }) => /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -1494,7 +1318,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 setTool(t);
                 if (t !== "select") setSelectedId(null);
               },
-              children: /* @__PURE__ */ jsx3(
+              children: /* @__PURE__ */ jsx(
                 "svg",
                 {
                   viewBox: "0 0 20 20",
@@ -1511,9 +1335,9 @@ function DrawingCanvas({ nodeKey, data }) {
             },
             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(
+          /* @__PURE__ */ jsxs("div", { className: "zui-drawing-toolbar-group", children: [
+            /* @__PURE__ */ jsx("span", { className: "zui-drawing-swatch-label", children: "Stroke" }),
+            STROKE_COLORS.map((color) => /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
@@ -1526,9 +1350,9 @@ function DrawingCanvas({ nodeKey, data }) {
               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(
+          showFill && /* @__PURE__ */ jsxs("div", { className: "zui-drawing-toolbar-group", children: [
+            /* @__PURE__ */ jsx("span", { className: "zui-drawing-swatch-label", children: "Fill" }),
+            FILL_COLORS.map((color) => /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
@@ -1541,8 +1365,8 @@ function DrawingCanvas({ nodeKey, data }) {
               color
             ))
           ] }),
-          selectedShape && isConnectorType(selectedShape.type) && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar-group", children: [
-            /* @__PURE__ */ jsx3(
+          selectedShape && isConnectorType(selectedShape.type) && /* @__PURE__ */ jsxs("div", { className: "zui-drawing-toolbar-group", children: [
+            /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
@@ -1550,7 +1374,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 "aria-label": "Straight connector",
                 className: `zui-drawing-tool ${selectedShape.routing !== "elbow" ? "is-active" : ""}`,
                 onClick: () => applyRouting(false),
-                children: /* @__PURE__ */ jsx3(
+                children: /* @__PURE__ */ jsx(
                   "svg",
                   {
                     viewBox: "0 0 20 20",
@@ -1560,12 +1384,12 @@ function DrawingCanvas({ nodeKey, data }) {
                     stroke: "currentColor",
                     strokeWidth: "1.6",
                     strokeLinecap: "round",
-                    children: /* @__PURE__ */ jsx3("path", { d: "M4 16L16 4" })
+                    children: /* @__PURE__ */ jsx("path", { d: "M4 16L16 4" })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
@@ -1573,7 +1397,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 "aria-label": "Elbow connector",
                 className: `zui-drawing-tool ${selectedShape.routing === "elbow" ? "is-active" : ""}`,
                 onClick: () => applyRouting(true),
-                children: /* @__PURE__ */ jsx3(
+                children: /* @__PURE__ */ jsx(
                   "svg",
                   {
                     viewBox: "0 0 20 20",
@@ -1584,14 +1408,14 @@ function DrawingCanvas({ nodeKey, data }) {
                     strokeWidth: "1.6",
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
-                    children: /* @__PURE__ */ jsx3("path", { d: "M4 16v-6h12V4" })
+                    children: /* @__PURE__ */ jsx("path", { d: "M4 16v-6h12V4" })
                   }
                 )
               }
             )
           ] }),
-          selectedShape?.type === "arrow" && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar-group", children: [
-            /* @__PURE__ */ jsx3(
+          selectedShape?.type === "arrow" && /* @__PURE__ */ jsxs("div", { className: "zui-drawing-toolbar-group", children: [
+            /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
@@ -1599,7 +1423,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 "aria-label": "One-way arrow",
                 className: `zui-drawing-tool ${!selectedShape.bidirectional ? "is-active" : ""}`,
                 onClick: () => applyDirection(false),
-                children: /* @__PURE__ */ jsx3(
+                children: /* @__PURE__ */ jsx(
                   "svg",
                   {
                     viewBox: "0 0 20 20",
@@ -1610,12 +1434,12 @@ function DrawingCanvas({ nodeKey, data }) {
                     strokeWidth: "1.6",
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
-                    children: /* @__PURE__ */ jsx3("path", { d: "M3 10h13M12 5.5L16.5 10L12 14.5" })
+                    children: /* @__PURE__ */ jsx("path", { d: "M3 10h13M12 5.5L16.5 10L12 14.5" })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
@@ -1623,7 +1447,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 "aria-label": "Two-way arrow",
                 className: `zui-drawing-tool ${selectedShape.bidirectional ? "is-active" : ""}`,
                 onClick: () => applyDirection(true),
-                children: /* @__PURE__ */ jsx3(
+                children: /* @__PURE__ */ jsx(
                   "svg",
                   {
                     viewBox: "0 0 20 20",
@@ -1634,13 +1458,13 @@ function DrawingCanvas({ nodeKey, data }) {
                     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" })
+                    children: /* @__PURE__ */ jsx("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(
+          selectedShape && /* @__PURE__ */ jsx("div", { className: "zui-drawing-toolbar-group", children: /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -1648,7 +1472,7 @@ function DrawingCanvas({ nodeKey, data }) {
               "aria-label": "Delete shape",
               className: "zui-drawing-tool zui-drawing-tool-danger",
               onClick: deleteSelected,
-              children: /* @__PURE__ */ jsx3(
+              children: /* @__PURE__ */ jsx(
                 "svg",
                 {
                   viewBox: "0 0 20 20",
@@ -1658,13 +1482,13 @@ function DrawingCanvas({ nodeKey, data }) {
                   stroke: "currentColor",
                   strokeWidth: "1.6",
                   strokeLinecap: "round",
-                  children: /* @__PURE__ */ jsx3("path", { d: "M4 6h12M8 6V4h4v2M6 6l1 10h6l1-10M8.5 9v4M11.5 9v4" })
+                  children: /* @__PURE__ */ jsx("path", { d: "M4 6h12M8 6V4h4v2M6 6l1 10h6l1-10M8.5 9v4M11.5 9v4" })
                 }
               )
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs(
           "svg",
           {
             ref: svgRef,
@@ -1691,7 +1515,7 @@ function DrawingCanvas({ nodeKey, data }) {
               }
             },
             children: [
-              shapes.map((shape) => /* @__PURE__ */ jsxs2(
+              shapes.map((shape) => /* @__PURE__ */ jsxs(
                 "g",
                 {
                   "data-shape-id": shape.id,
@@ -1700,7 +1524,7 @@ function DrawingCanvas({ nodeKey, data }) {
                   },
                   onPointerDown: (e) => handleShapePointerDown(e, shape),
                   children: [
-                    isConnectorType(shape.type) && /* @__PURE__ */ jsx3(
+                    isConnectorType(shape.type) && /* @__PURE__ */ jsx(
                       "path",
                       {
                         d: connectorPath(shape),
@@ -1709,8 +1533,8 @@ function DrawingCanvas({ nodeKey, data }) {
                         strokeWidth: 14
                       }
                     ),
-                    (isBoxType(shape.type) || shape.type === "text") && /* @__PURE__ */ jsx3(HitArea, { shape }),
-                    shape.id === editingText?.id && shape.type === "text" ? null : /* @__PURE__ */ jsx3(
+                    (isBoxType(shape.type) || shape.type === "text") && /* @__PURE__ */ jsx(HitArea, { shape }),
+                    shape.id === editingText?.id && shape.type === "text" ? null : /* @__PURE__ */ jsx(
                       ShapeView,
                       {
                         shape,
@@ -1722,7 +1546,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 },
                 shape.id
               )),
-              selectedShape && isEditable && !editingText && /* @__PURE__ */ jsx3(
+              selectedShape && isEditable && !editingText && /* @__PURE__ */ jsx(
                 SelectionOverlay,
                 {
                   shape: selectedShape,
@@ -1734,7 +1558,7 @@ function DrawingCanvas({ nodeKey, data }) {
             ]
           }
         ),
-        editingShape && editingText && /* @__PURE__ */ jsx3(
+        editingShape && editingText && /* @__PURE__ */ jsx(
           TextEditOverlay,
           {
             shape: editingShape,
@@ -1743,7 +1567,7 @@ function DrawingCanvas({ nodeKey, data }) {
           },
           `${editingShape.id}:${editingText.field}`
         ),
-        isEditable && /* @__PURE__ */ jsx3(
+        isEditable && /* @__PURE__ */ jsx(
           "div",
           {
             className: "zui-drawing-resize",
@@ -1782,7 +1606,7 @@ function DrawingCanvas({ nodeKey, data }) {
 }
 function HitArea({ shape }) {
   const b = bbox(shape);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx(
     "rect",
     {
       x: b.x,
@@ -1816,8 +1640,8 @@ function SelectionOverlay({
       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(
+    return /* @__PURE__ */ jsxs("g", { children: [
+      ghosts.map(({ index, x, y }) => /* @__PURE__ */ jsx(
         "circle",
         {
           cx: x,
@@ -1830,11 +1654,11 @@ function SelectionOverlay({
           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" })
+          children: /* @__PURE__ */ jsx("title", { children: "Drag to add a point" })
         },
         `ghost-${index}`
       )),
-      waypoints.map((p, i) => /* @__PURE__ */ jsx3(
+      waypoints.map((p, i) => /* @__PURE__ */ jsx(
         "rect",
         {
           x: p.x - 4,
@@ -1855,11 +1679,11 @@ function SelectionOverlay({
             e.stopPropagation();
             onWaypointRemove(shape.id, i);
           },
-          children: /* @__PURE__ */ jsx3("title", { children: "Drag to move, double-click to remove" })
+          children: /* @__PURE__ */ jsx("title", { children: "Drag to move, double-click to remove" })
         },
         `wp-${i}`
       )),
-      ends.map(({ end, x, y }) => /* @__PURE__ */ jsx3(
+      ends.map(({ end, x, y }) => /* @__PURE__ */ jsx(
         "circle",
         {
           cx: x,
@@ -1878,7 +1702,7 @@ function SelectionOverlay({
         },
         end
       )),
-      elbowMid && /* @__PURE__ */ jsx3(
+      elbowMid && /* @__PURE__ */ jsx(
         "rect",
         {
           x: elbowMid.x - 4,
@@ -1908,8 +1732,8 @@ function SelectionOverlay({
     { 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(
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
       "rect",
       {
         x: b.x - pad,
@@ -1923,7 +1747,7 @@ function SelectionOverlay({
         pointerEvents: "none"
       }
     ),
-    resizable && corners.map(({ corner, x, y }) => /* @__PURE__ */ jsx3(
+    resizable && corners.map(({ corner, x, y }) => /* @__PURE__ */ jsx(
       "rect",
       {
         x: x - 4,
@@ -1949,9 +1773,9 @@ function TextEditOverlay({
   onCommit
 }) {
   const original = shape[field] ?? "";
-  const [value, setValue] = useState3(original);
-  const ref = useRef3(null);
-  useEffect7(() => {
+  const [value, setValue] = useState(original);
+  const ref = useRef2(null);
+  useEffect5(() => {
     ref.current?.focus();
     ref.current?.select();
   }, []);
@@ -1999,7 +1823,7 @@ function TextEditOverlay({
     });
   }
   const placeholder = field === "label" ? "Label" : field === "footer" ? "Footer" : "Text";
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx(
     "textarea",
     {
       ref,
@@ -2025,7 +1849,7 @@ function TextEditOverlay({
 }
 
 // src/nodes/DrawingNode.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var DrawingNode = class _DrawingNode extends DecoratorNode {
   static getType() {
     return "drawing";
@@ -2089,11 +1913,11 @@ var DrawingNode = class _DrawingNode extends DecoratorNode {
     return false;
   }
   decorate(_editor, _config) {
-    return /* @__PURE__ */ jsx4(DrawingCanvas, { nodeKey: this.getKey(), data: this.getData() });
+    return /* @__PURE__ */ jsx2(DrawingCanvas, { nodeKey: this.getKey(), data: this.getData() });
   }
 };
 function $createDrawingNode(data = serializeDrawingData(EMPTY_DRAWING)) {
-  return $applyNodeReplacement(new DrawingNode(data));
+  return $applyNodeReplacement2(new DrawingNode(data));
 }
 function $isDrawingNode(node) {
   return node instanceof DrawingNode;
@@ -2119,243 +1943,6 @@ ${node.getLatest().__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
-} from "lexical";
-var FrontmatterNode = class _FrontmatterNode extends ElementNode {
-  static getType() {
-    return "frontmatter";
-  }
-  static clone(node) {
-    return new _FrontmatterNode(node.__key);
-  }
-  constructor(key) {
-    super(key);
-  }
-  createDOM(config) {
-    const dom = document.createElement("div");
-    const className = config.theme.frontmatter;
-    dom.className = typeof className === "string" ? className : "zui-frontmatter";
-    return dom;
-  }
-  updateDOM() {
-    return false;
-  }
-  static importJSON(_serializedNode) {
-    return $createFrontmatterNode();
-  }
-  exportJSON() {
-    return {
-      ...super.exportJSON(),
-      type: "frontmatter",
-      version: 1
-    };
-  }
-  isInline() {
-    return false;
-  }
-  canBeEmpty() {
-    return false;
-  }
-  canIndent() {
-    return false;
-  }
-};
-function $createFrontmatterNode() {
-  return $applyNodeReplacement2(new FrontmatterNode());
-}
-function $isFrontmatterNode(node) {
-  return node instanceof FrontmatterNode;
-}
-var FRONTMATTER_DELIMITER = /^---\s*$/;
-var FRONTMATTER = {
-  dependencies: [FrontmatterNode],
-  export: (node) => {
-    if (!$isFrontmatterNode(node)) return null;
-    const body = node.getTextContent();
-    return body ? `---
-${body}
----` : "---\n---";
-  },
-  regExpStart: FRONTMATTER_DELIMITER,
-  regExpEnd: FRONTMATTER_DELIMITER,
-  replace: (rootNode, children, _startMatch, _endMatch, linesInBetween, isImport) => {
-    if (!isImport || children != null || linesInBetween == null) return false;
-    if (rootNode.getChildrenSize() !== 0) return false;
-    const lines = [...linesInBetween];
-    while (lines.length > 0 && lines[0].length === 0) lines.shift();
-    while (lines.length > 0 && lines[lines.length - 1].length === 0) lines.pop();
-    const node = $createFrontmatterNode();
-    lines.forEach((line, index) => {
-      if (index > 0) node.append($createLineBreakNode());
-      node.append($createTextNode(line));
-    });
-    rootNode.append(node);
-  },
-  type: "multiline-element"
-};
-
 // src/transformers/tableTransformer.ts
 import {
   $isParagraphNode as $isParagraphNode2,
@@ -2551,10 +2138,20 @@ var editorTheme = {
   drawing: "zui-drawing"
 };
 
-// src/MarkdownEditor.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+// src/EditorRoot.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var SYNC_TRANSFORMERS = [FRONTMATTER, DRAWING, CHECK_LIST, TABLE, ...TRANSFORMERS2];
 var SHORTCUT_TRANSFORMERS = [TABLE, ...TRANSFORMERS2.filter((t) => t !== CODE)];
+var EditorContext = createContext(null);
+function useEditorContext() {
+  const ctx = useContext(EditorContext);
+  if (!ctx) {
+    throw new Error(
+      "@zuilib/text-editor: this component must be rendered inside <MarkdownEditor> or <MarkdownEditor.Root>"
+    );
+  }
+  return ctx;
+}
 function onError(error) {
   console.error(error);
 }
@@ -2574,49 +2171,38 @@ var editorNodes = [
   DrawingNode
 ];
 function ReadOnlyPlugin({ readOnly }) {
-  const [editor] = useLexicalComposerContext9();
-  useEffect9(() => {
+  const [editor] = useLexicalComposerContext6();
+  useEffect6(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   return null;
 }
-function MarkdownEditor({
+function EditorRoot({
   value,
   onChange,
-  placeholder = "Start writing...",
   readOnly = false,
   className,
   mode = "edit-md",
   autoFocus = false,
-  toolbar = true,
-  outline = false,
-  foldable = true
+  children
 }) {
-  const latestValueRef = useRef4(value ?? "");
-  const [mountKey, setMountKey] = useState5(0);
-  const [capturedMarkdown, setCapturedMarkdown] = useState5(value ?? "");
-  useEffect9(() => {
+  const latestValueRef = useRef3(value ?? "");
+  const [mountKey, setMountKey] = useState2(0);
+  const [capturedMarkdown, setCapturedMarkdown] = useState2(value ?? "");
+  useEffect6(() => {
     if (value !== void 0) {
       latestValueRef.current = value;
     }
   }, [value]);
-  const handleTextChange = useCallback5(
-    (e) => {
-      const newValue = e.target.value;
-      latestValueRef.current = newValue;
-      onChange?.(newValue);
-    },
-    [onChange]
-  );
-  const handleLexicalChange = useCallback5(
+  const handleChange = useCallback2(
     (newValue) => {
       latestValueRef.current = newValue;
       onChange?.(newValue);
     },
     [onChange]
   );
-  const prevModeRef = useRef4(mode);
-  useEffect9(() => {
+  const prevModeRef = useRef3(mode);
+  useEffect6(() => {
     if (prevModeRef.current === "edit-raw" && mode !== "edit-raw") {
       setCapturedMarkdown(latestValueRef.current);
       setMountKey((k) => k + 1);
@@ -2632,63 +2218,606 @@ function MarkdownEditor({
     }),
     []
   );
+  const context = useMemo(
+    () => ({
+      mode,
+      readOnly,
+      autoFocus,
+      rawValue: value ?? "",
+      onRawChange: handleChange
+    }),
+    [mode, readOnly, autoFocus, value, handleChange]
+  );
+  const isRaw = mode === "edit-raw";
+  return /* @__PURE__ */ jsx3(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx3(EditorContext.Provider, { value: context, children: /* @__PURE__ */ jsxs2("div", { className: `zui-text-editor ${className ?? ""}`, children: [
+    children,
+    !isRaw && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx3(
+        MarkdownSyncPlugin,
+        {
+          initialMarkdown: mode === "view" ? value ?? "" : capturedMarkdown,
+          onChange: handleChange,
+          transformers: SYNC_TRANSFORMERS
+        }
+      ),
+      /* @__PURE__ */ jsx3(HistoryPlugin, {}),
+      /* @__PURE__ */ jsx3(ListPlugin, {}),
+      /* @__PURE__ */ jsx3(CheckListPlugin, {}),
+      /* @__PURE__ */ jsx3(ChecklistShortcutPlugin, {}),
+      /* @__PURE__ */ jsx3(CodeBlockShortcutPlugin, {}),
+      /* @__PURE__ */ jsx3(CodeHighlightPlugin, {}),
+      /* @__PURE__ */ jsx3(TablePlugin, {}),
+      /* @__PURE__ */ jsx3(LinkPlugin, {}),
+      /* @__PURE__ */ jsx3(MarkdownShortcutPlugin, { transformers: SHORTCUT_TRANSFORMERS }),
+      /* @__PURE__ */ jsx3(ReadOnlyPlugin, { readOnly: readOnly || mode === "view" }),
+      autoFocus && /* @__PURE__ */ jsx3(AutoFocusPlugin, {})
+    ] })
+  ] }) }) }, mountKey);
+}
+
+// src/EditorContent.tsx
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+
+// src/plugins/FoldingPlugin.tsx
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect7,
+  useRef as useRef4,
+  useState as useState3
+} from "react";
+import { $getRoot, $getSelection as $getSelection2, $isRangeSelection as $isRangeSelection2 } from "lexical";
+import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
+import { $isHeadingNode } from "@lexical/rich-text";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var HEADING_LEVELS = {
+  h1: 1,
+  h2: 2,
+  h3: 3,
+  h4: 4,
+  h5: 5,
+  h6: 6
+};
+function FoldingPlugin() {
+  const [editor] = useLexicalComposerContext7();
+  const [foldedKeys, setFoldedKeys] = useState3(/* @__PURE__ */ new Set());
+  const [buttons, setButtons] = useState3([]);
+  const foldedRef = useRef4(foldedKeys);
+  foldedRef.current = foldedKeys;
+  const sync = useCallback3(() => {
+    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]);
+  useEffect7(() => {
+    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 = useCallback3((key) => {
+    setFoldedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  return /* @__PURE__ */ jsx4("div", { className: "zui-text-editor-fold-gutter", children: buttons.map(({ key, folded, top, height }) => /* @__PURE__ */ jsx4(
+    "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__ */ jsx4(
+        "svg",
+        {
+          viewBox: "0 0 20 20",
+          width: "12",
+          height: "12",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx4("path", { d: "M6 8l4 4 4-4" })
+        }
+      )
+    },
+    key
+  )) });
+}
+
+// src/EditorContent.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function EditorContent({
+  placeholder = "Start writing...",
+  foldable = true,
+  children
+}) {
+  const { mode, readOnly, autoFocus, rawValue, onRawChange } = useEditorContext();
   if (mode === "edit-raw") {
-    return /* @__PURE__ */ jsx6("div", { className: `zui-text-editor ${className ?? ""}`, children: /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx5(
       "textarea",
       {
         className: "zui-text-editor-textarea",
-        value: value ?? "",
-        onChange: handleTextChange,
+        value: rawValue,
+        onChange: (e) => onRawChange(e.target.value),
         placeholder,
         readOnly,
         autoFocus,
         spellCheck: false
       }
-    ) });
+    );
   }
-  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,
-          {
-            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
-          }
-        ),
-        foldable && /* @__PURE__ */ jsx6(FoldingPlugin, {})
-      ] }),
-      outline && /* @__PURE__ */ jsx6(OutlinePlugin, {})
+  return /* @__PURE__ */ jsxs3("div", { className: "zui-text-editor-body", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "zui-text-editor-main", children: [
+      /* @__PURE__ */ jsx5(
+        RichTextPlugin,
+        {
+          contentEditable: /* @__PURE__ */ jsx5(
+            ContentEditable,
+            {
+              className: "zui-text-editor-content",
+              "aria-placeholder": placeholder,
+              placeholder: /* @__PURE__ */ jsx5("div", { className: "zui-text-editor-placeholder", children: placeholder })
+            }
+          ),
+          ErrorBoundary: LexicalErrorBoundary
+        }
+      ),
+      foldable && /* @__PURE__ */ jsx5(FoldingPlugin, {})
     ] }),
-    /* @__PURE__ */ jsx6(
-      MarkdownSyncPlugin,
+    children
+  ] });
+}
+
+// src/plugins/OutlinePlugin.tsx
+import { useCallback as useCallback4, useEffect as useEffect8, useState as useState4 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
+import {
+  TableOfContentsPlugin
+} from "@lexical/react/LexicalTableOfContentsPlugin";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var INDENT_PER_LEVEL = {
+  h1: 0,
+  h2: 1,
+  h3: 2,
+  h4: 3,
+  h5: 4,
+  h6: 5
+};
+function OutlinePlugin() {
+  const [editor] = useLexicalComposerContext8();
+  const [collapsed, setCollapsed] = useState4(false);
+  const [activeKey, setActiveKey] = useState4(null);
+  useEffect8(() => {
+    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 = useCallback4(
+    (key) => {
+      editor.getEditorState().read(() => {
+        const element = editor.getElementByKey(key);
+        element?.scrollIntoView({ behavior: "smooth", block: "start" });
+      });
+    },
+    [editor]
+  );
+  return /* @__PURE__ */ jsx6(TableOfContentsPlugin, { children: (entries) => {
+    for (const [key] of entries) {
+      editor.getElementByKey(key)?.setAttribute("data-outline-key", key);
+    }
+    return /* @__PURE__ */ jsxs4(
+      "div",
       {
-        initialMarkdown: mode === "view" ? value ?? "" : capturedMarkdown,
-        onChange: handleLexicalChange,
-        transformers: SYNC_TRANSFORMERS
+        className: `zui-text-editor-outline ${collapsed ? "is-collapsed" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx6(
+            "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__ */ jsx6(
+                "svg",
+                {
+                  viewBox: "0 0 20 20",
+                  width: "14",
+                  height: "14",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.8",
+                  strokeLinecap: "round",
+                  children: /* @__PURE__ */ jsx6("path", { d: "M4 5h12M4 10h8M4 15h10" })
+                }
+              )
+            }
+          ),
+          !collapsed && /* @__PURE__ */ jsxs4("nav", { className: "zui-text-editor-outline-list", "aria-label": "Table of contents", children: [
+            entries.length === 0 && /* @__PURE__ */ jsx6("div", { className: "zui-text-editor-outline-empty", children: "No headings" }),
+            entries.map(([key, text, tag]) => /* @__PURE__ */ jsx6(
+              "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/useMarkdownEditor.ts
+import { useCallback as useCallback5, useEffect as useEffect9, useState as useState5 } from "react";
+import {
+  $getSelection as $getSelection3,
+  $isRangeSelection as $isRangeSelection3,
+  CAN_REDO_COMMAND,
+  CAN_UNDO_COMMAND,
+  COMMAND_PRIORITY_LOW as COMMAND_PRIORITY_LOW2,
+  FORMAT_TEXT_COMMAND,
+  REDO_COMMAND,
+  UNDO_COMMAND
+} from "lexical";
+import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
+import { INSERT_TABLE_COMMAND } from "@lexical/table";
+import { $insertNodeToNearestRoot, mergeRegister } from "@lexical/utils";
+var TRACKED_FORMATS = [
+  "bold",
+  "italic",
+  "underline",
+  "strikethrough",
+  "code"
+];
+function useMarkdownEditor() {
+  const [editor] = useLexicalComposerContext9();
+  const [activeFormats, setActiveFormats] = useState5(
+    /* @__PURE__ */ new Set()
+  );
+  const [canUndo, setCanUndo] = useState5(false);
+  const [canRedo, setCanRedo] = useState5(false);
+  useEffect9(
+    () => mergeRegister(
+      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 TRACKED_FORMATS) {
+            if (selection.hasFormat(format)) next.add(format);
+          }
+          setActiveFormats(next);
+        });
+      }),
+      editor.registerCommand(
+        CAN_UNDO_COMMAND,
+        (payload) => {
+          setCanUndo(payload);
+          return false;
+        },
+        COMMAND_PRIORITY_LOW2
+      ),
+      editor.registerCommand(
+        CAN_REDO_COMMAND,
+        (payload) => {
+          setCanRedo(payload);
+          return false;
+        },
+        COMMAND_PRIORITY_LOW2
+      )
     ),
-    /* @__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);
+    [editor]
+  );
+  const toggleFormat = useCallback5(
+    (format) => {
+      editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+    },
+    [editor]
+  );
+  const insertTable = useCallback5(
+    ({ rows = 3, columns = 3 } = {}) => {
+      editor.dispatchCommand(INSERT_TABLE_COMMAND, {
+        columns: String(columns),
+        rows: String(rows),
+        includeHeaders: { rows: true, columns: false }
+      });
+    },
+    [editor]
+  );
+  const insertDrawing = useCallback5(() => {
+    editor.update(() => {
+      $insertNodeToNearestRoot($createDrawingNode());
+    });
+  }, [editor]);
+  const undo = useCallback5(() => {
+    editor.dispatchCommand(UNDO_COMMAND, void 0);
+  }, [editor]);
+  const redo = useCallback5(() => {
+    editor.dispatchCommand(REDO_COMMAND, void 0);
+  }, [editor]);
+  return {
+    editor,
+    activeFormats,
+    toggleFormat,
+    insertTable,
+    insertDrawing,
+    canUndo,
+    canRedo,
+    undo,
+    redo
+  };
+}
+
+// src/components/Toolbar.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function Toolbar({ children, className }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: `zui-text-editor-toolbar ${className ?? ""}`,
+      role: "toolbar",
+      children: children ?? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__PURE__ */ jsx7(FormatButtons, {}),
+        /* @__PURE__ */ jsx7(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx7(InsertButtons, {})
+      ] })
+    }
+  );
+}
+function ToolbarDivider() {
+  return /* @__PURE__ */ jsx7("div", { className: "zui-text-editor-toolbar-divider" });
+}
+function ToolbarButton({
+  label,
+  onClick,
+  children,
+  active = false,
+  disabled = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx7(
+    "button",
+    {
+      type: "button",
+      title: label,
+      "aria-label": label,
+      "aria-pressed": active,
+      disabled,
+      className: `zui-text-editor-toolbar-button ${active ? "is-active" : ""} ${className ?? ""}`,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick,
+      children
+    }
+  );
+}
+function Icon({ children, strokeWidth = 1.5 }) {
+  return /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      width: "16",
+      height: "16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children
+    }
+  );
+}
+var FORMAT_BUTTONS = [
+  {
+    format: "bold",
+    label: "Bold",
+    icon: /* @__PURE__ */ jsx7(Icon, { strokeWidth: 1.8, children: /* @__PURE__ */ jsx7("path", { d: "M6 3.5h5a3 3 0 0 1 0 6H6zm0 6h6a3 3 0 0 1 0 6H6z" }) })
+  },
+  {
+    format: "italic",
+    label: "Italic",
+    icon: /* @__PURE__ */ jsx7(Icon, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx7("path", { d: "M8.5 3.5h6M5.5 16.5h6M11.5 3.5l-3 13" }) })
+  },
+  {
+    format: "strikethrough",
+    label: "Strikethrough",
+    icon: /* @__PURE__ */ jsx7(Icon, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx7("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" }) })
+  },
+  {
+    format: "code",
+    label: "Inline code",
+    icon: /* @__PURE__ */ jsx7(Icon, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx7("path", { d: "M7.5 6L4 10l3.5 4M12.5 6L16 10l-3.5 4" }) })
+  }
+];
+function FormatButtons() {
+  const { activeFormats, toggleFormat } = useMarkdownEditor();
+  return /* @__PURE__ */ jsx7(Fragment2, { children: FORMAT_BUTTONS.map(({ format, label, icon }) => /* @__PURE__ */ jsx7(
+    ToolbarButton,
+    {
+      label,
+      active: activeFormats.has(format),
+      onClick: () => toggleFormat(format),
+      children: icon
+    },
+    format
+  )) });
+}
+function InsertButtons() {
+  const { insertTable, insertDrawing } = useMarkdownEditor();
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx7(ToolbarButton, { label: "Insert table", onClick: () => insertTable(), children: /* @__PURE__ */ jsxs5(Icon, { children: [
+      /* @__PURE__ */ jsx7("rect", { x: "3", y: "3.5", width: "14", height: "13", rx: "1.5" }),
+      /* @__PURE__ */ jsx7("path", { d: "M3 8h14M8 8v8.5M13 8v8.5" })
+    ] }) }),
+    /* @__PURE__ */ jsx7(ToolbarButton, { label: "Insert drawing", onClick: insertDrawing, children: /* @__PURE__ */ jsxs5(Icon, { children: [
+      /* @__PURE__ */ jsx7("rect", { x: "3", y: "5", width: "8", height: "6", rx: "1.5" }),
+      /* @__PURE__ */ jsx7("path", { d: "M13.5 8h3M14.5 6.5L17.5 8l-3 1.5" }),
+      /* @__PURE__ */ jsx7("ellipse", { cx: "13", cy: "14.5", rx: "4", ry: "2.8" })
+    ] }) })
+  ] });
+}
+function HistoryButtons() {
+  const { canUndo, canRedo, undo, redo } = useMarkdownEditor();
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx7(ToolbarButton, { label: "Undo", onClick: undo, disabled: !canUndo, children: /* @__PURE__ */ jsxs5(Icon, { children: [
+      /* @__PURE__ */ jsx7("path", { d: "M7 6L3.5 9.5 7 13" }),
+      /* @__PURE__ */ jsx7("path", { d: "M3.5 9.5H12a4 4 0 0 1 0 8h-1" })
+    ] }) }),
+    /* @__PURE__ */ jsx7(ToolbarButton, { label: "Redo", onClick: redo, disabled: !canRedo, children: /* @__PURE__ */ jsxs5(Icon, { children: [
+      /* @__PURE__ */ jsx7("path", { d: "M13 6l3.5 3.5L13 13" }),
+      /* @__PURE__ */ jsx7("path", { d: "M16.5 9.5H8a4 4 0 0 0 0 8h1" })
+    ] }) })
+  ] });
+}
+
+// src/MarkdownEditor.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULT_ITEMS = {
+  format: /* @__PURE__ */ jsx8(FormatButtons, {}),
+  insert: /* @__PURE__ */ jsx8(InsertButtons, {}),
+  history: /* @__PURE__ */ jsx8(HistoryButtons, {})
+};
+function EditorToolbar({
+  children,
+  className
+}) {
+  const { mode, readOnly } = useEditorContext();
+  if (mode !== "edit-md" || readOnly) return null;
+  return /* @__PURE__ */ jsx8(Toolbar, { className, children });
+}
+function MarkdownEditor({
+  placeholder,
+  toolbar = true,
+  outline = false,
+  foldable = true,
+  ...rootProps
+}) {
+  return /* @__PURE__ */ jsxs6(EditorRoot, { ...rootProps, children: [
+    toolbar === true && /* @__PURE__ */ jsx8(EditorToolbar, {}),
+    typeof toolbar === "function" && toolbar(DEFAULT_ITEMS),
+    /* @__PURE__ */ jsx8(EditorContent, { placeholder, foldable, children: outline && /* @__PURE__ */ jsx8(OutlinePlugin, {}) })
+  ] });
 }
+MarkdownEditor.Root = EditorRoot;
+MarkdownEditor.Content = EditorContent;
+MarkdownEditor.Toolbar = EditorToolbar;
+MarkdownEditor.ToolbarButton = ToolbarButton;
+MarkdownEditor.ToolbarDivider = ToolbarDivider;
+MarkdownEditor.FormatButtons = FormatButtons;
+MarkdownEditor.InsertButtons = InsertButtons;
+MarkdownEditor.HistoryButtons = HistoryButtons;
+MarkdownEditor.Outline = OutlinePlugin;
+MarkdownEditor.useEditor = useMarkdownEditor;
+var MarkdownEditor_default = MarkdownEditor;
 
 // src/components/drawingSchema.ts
 var DRAWING_DATA_JSON_SCHEMA = {
@@ -2807,9 +2936,16 @@ export {
   DRAWING_DATA_JSON_SCHEMA,
   DrawingNode,
   FRONTMATTER,
+  FormatButtons,
   FrontmatterNode,
-  MarkdownEditor,
+  HistoryButtons,
+  InsertButtons,
+  MarkdownEditor_default as MarkdownEditor,
   TABLE,
+  Toolbar,
+  ToolbarButton,
+  ToolbarDivider,
   parseDrawingData,
-  serializeDrawingData
+  serializeDrawingData,
+  useMarkdownEditor
 };