@zuilib/text-editor 0.2.1 → 0.3.1

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
+  $createLineBreakNode,
+  $createTextNode,
+  ElementNode
 } from "lexical";
-
-// src/components/DrawingCanvas.tsx
-import {
-  useCallback as useCallback3,
-  useEffect as useEffect7,
-  useRef as useRef3,
-  useState as useState3
+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,
+  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
@@ -533,6 +357,9 @@ function parseDrawingData(json) {
     return {
       version: 1,
       height: typeof raw.height === "number" && raw.height >= 80 ? raw.height : DEFAULT_DRAWING_HEIGHT,
+      // `full` is the default and stays implicit so existing payloads are
+      // serialized byte-for-byte unchanged
+      width: raw.width === "content" ? "content" : void 0,
       shapes
     };
   } catch {
@@ -549,6 +376,27 @@ function isValidShape(value) {
   ));
 }
 
+// src/components/blockWidthOptions.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var BLOCK_WIDTH_OPTIONS = [
+  {
+    width: "full",
+    label: "Full width",
+    icon: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M3 4v12M17 4v12" }),
+      /* @__PURE__ */ jsx("path", { d: "M6 10h8M8.5 7.5L6 10l2.5 2.5M11.5 7.5L14 10l-2.5 2.5" })
+    ] })
+  },
+  {
+    width: "content",
+    label: "Content width",
+    icon: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M3 4v12M17 4v12" }),
+      /* @__PURE__ */ jsx("path", { d: "M5.5 10h3M11.5 10h3M6.5 7.5L9 10l-2.5 2.5M13.5 7.5L11 10l2.5 2.5" })
+    ] })
+  }
+];
+
 // src/components/drawingGeometry.ts
 var BINDING_GAP = 6;
 var BINDING_TOLERANCE = 8;
@@ -791,10 +639,12 @@ function resolveBindings(shapes) {
 }
 
 // src/components/DrawingCanvas.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 import { createElement } from "react";
 var MIN_HEIGHT = 120;
 var MAX_HEIGHT = 900;
+var MIN_CONTENT_WIDTH = 240;
+var CONTENT_WIDTH_PADDING = 40;
 var SELECTION_COLOR = "#6965db";
 var CONNECTOR_FONT_SIZE = 12;
 var CONNECTOR_LABEL_MAX_WIDTH = 160;
@@ -838,7 +688,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__ */ jsx2("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 +699,7 @@ function BoxTexts({
         fontSize: FONT_SIZE
       },
       line
-    )) : showHints && /* @__PURE__ */ jsx3("text", { ...hint, x: cx, y: mainStart, fontSize: FONT_SIZE, children: "Text" })),
+    )) : showHints && /* @__PURE__ */ jsx2("text", { ...hint, x: cx, y: mainStart, fontSize: FONT_SIZE, children: "Text" })),
     hideField !== "footer" && (shape.footer ? footerLines.map((line, i) => /* @__PURE__ */ createElement(
       "text",
       {
@@ -861,7 +711,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__ */ jsx2("text", { ...hint, x: cx, y: b.y + b.h - 9, fontSize: SMALL_FONT_SIZE, children: "Footer" }))
   ] });
 }
 function ShapeView({
@@ -879,7 +729,7 @@ function ShapeView({
     case "rect": {
       const b = bbox(shape);
       return /* @__PURE__ */ jsxs2("g", { children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx2(
           "rect",
           {
             ...common,
@@ -891,13 +741,13 @@ function ShapeView({
             fill: shape.fill
           }
         ),
-        /* @__PURE__ */ jsx3(BoxTexts, { shape, hideField, showHints })
+        /* @__PURE__ */ jsx2(BoxTexts, { shape, hideField, showHints })
       ] });
     }
     case "ellipse": {
       const b = bbox(shape);
       return /* @__PURE__ */ jsxs2("g", { children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx2(
           "ellipse",
           {
             ...common,
@@ -908,13 +758,13 @@ function ShapeView({
             fill: shape.fill
           }
         ),
-        /* @__PURE__ */ jsx3(BoxTexts, { shape, hideField, showHints })
+        /* @__PURE__ */ jsx2(BoxTexts, { shape, hideField, showHints })
       ] });
     }
     case "triangle":
     case "pentagon":
       return /* @__PURE__ */ jsxs2("g", { children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx2(
           "polygon",
           {
             ...common,
@@ -922,12 +772,12 @@ function ShapeView({
             fill: shape.fill
           }
         ),
-        /* @__PURE__ */ jsx3(BoxTexts, { shape, hideField, showHints })
+        /* @__PURE__ */ jsx2(BoxTexts, { shape, hideField, showHints })
       ] });
     case "line":
     case "arrow":
       return /* @__PURE__ */ jsxs2("g", { children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx2(
           "path",
           {
             ...common,
@@ -935,10 +785,10 @@ function ShapeView({
             fill: "none"
           }
         ),
-        shape.text && hideField !== "text" && /* @__PURE__ */ jsx3(ConnectorLabel, { shape })
+        shape.text && hideField !== "text" && /* @__PURE__ */ jsx2(ConnectorLabel, { shape })
       ] });
     case "text":
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx2(
         "text",
         {
           x: shape.x,
@@ -947,7 +797,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__ */ jsx2("tspan", { x: shape.x, dy: i === 0 ? 0 : FONT_SIZE * 1.35, children: line }, i))
         }
       );
   }
@@ -960,7 +810,7 @@ function ConnectorLabel({ 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(
+    /* @__PURE__ */ jsx2(
       "rect",
       {
         x: midX - size.w / 2 - 5,
@@ -972,7 +822,7 @@ function ConnectorLabel({ shape }) {
         opacity: 0.92
       }
     ),
-    lines.map((line, i) => /* @__PURE__ */ jsx3(
+    lines.map((line, i) => /* @__PURE__ */ jsx2(
       "text",
       {
         x: midX,
@@ -989,20 +839,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" }),
+  select: /* @__PURE__ */ jsx2("path", { d: "M4 2l12 6.5-5.2 1.6L8 16z", fill: "currentColor", stroke: "none" }),
+  rect: /* @__PURE__ */ jsx2("rect", { x: "3", y: "4.5", width: "14", height: "11", rx: "2" }),
+  ellipse: /* @__PURE__ */ jsx2("ellipse", { cx: "10", cy: "10", rx: "7", ry: "5.5" }),
+  triangle: /* @__PURE__ */ jsx2("path", { d: "M10 3.5L17 16.5H3z", strokeLinejoin: "round" }),
+  pentagon: /* @__PURE__ */ jsx2("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" })
+    /* @__PURE__ */ jsx2("path", { d: "M4 16L16 4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M9 4h7v7" })
   ] }),
-  line: /* @__PURE__ */ jsx3("path", { d: "M4 16L16 4" }),
+  line: /* @__PURE__ */ jsx2("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" })
+    /* @__PURE__ */ jsx2("path", { d: "M4 5V3.5h12V5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M10 3.5V16.5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M7 16.5h6" })
   ] })
 };
 function bindEndpoints(shape, shapes) {
@@ -1025,38 +875,55 @@ var TOOLS = [
   { tool: "line", label: "Line" },
   { tool: "text", label: "Text" }
 ];
+function contentWidth(shapes) {
+  let right = 0;
+  for (const shape of shapes) {
+    if (isConnectorType(shape.type)) {
+      for (const p of connectorPoints(shape)) right = Math.max(right, p.x);
+    } else {
+      const b = bbox(shape);
+      right = Math.max(right, b.x + b.w);
+    }
+  }
+  return Math.max(MIN_CONTENT_WIDTH, Math.ceil(right + CONTENT_WIDTH_PADDING));
+}
 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 [width, setWidth] = useState(data.width ?? "full");
+  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(() => {
+  const widthRef = useRef2(width);
+  widthRef.current = width;
+  useEffect5(() => {
     const incoming = serializeDrawingData(data);
     if (incoming !== lastCommittedRef.current) {
       lastCommittedRef.current = incoming;
       setShapes(data.shapes);
       setHeight(data.height);
+      setWidth(data.width ?? "full");
       setSelectedId(null);
       setEditingText(null);
     }
   }, [data]);
-  const commit = useCallback3(
-    (nextShapes, nextHeight) => {
+  const commit = useCallback(
+    (nextShapes, nextHeight, nextWidth) => {
       const payload = {
         version: 1,
         height: nextHeight ?? heightRef.current,
+        width: (nextWidth ?? widthRef.current) === "content" ? "content" : void 0,
         shapes: nextShapes
       };
       const json = serializeDrawingData(payload);
@@ -1071,7 +938,14 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [editor, nodeKey]
   );
-  const updateShapes = useCallback3(
+  const applyWidth = useCallback(
+    (next) => {
+      setWidth(next);
+      commit(shapesRef.current, void 0, next);
+    },
+    [commit]
+  );
+  const updateShapes = useCallback(
     (updater, options) => {
       setShapes((prev) => {
         const next = resolveBindings(updater(prev));
@@ -1081,17 +955,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 +1025,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 +1044,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 +1060,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [isEditable, updateShapes]
   );
-  const handlePointerMove = useCallback3(
+  const handlePointerMove = useCallback(
     (e) => {
       const drag = dragRef.current;
       if (!drag) return;
@@ -1277,7 +1151,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 +1204,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 +1212,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 +1240,7 @@ function DrawingCanvas({ nodeKey, data }) {
       startTextEditing
     ]
   );
-  const applyStroke = useCallback3(
+  const applyStroke = useCallback(
     (color) => {
       setStroke(color);
       if (selectedId) {
@@ -1378,7 +1252,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [selectedId, updateShapes]
   );
-  const applyFill = useCallback3(
+  const applyFill = useCallback(
     (color) => {
       setFill(color);
       if (selectedId) {
@@ -1390,7 +1264,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [selectedId, updateShapes]
   );
-  const applyRouting = useCallback3(
+  const applyRouting = useCallback(
     (elbow) => {
       if (!selectedId) return;
       updateShapes(
@@ -1407,7 +1281,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 +1303,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [isEditable, updateShapes]
   );
-  const removeWaypoint = useCallback3(
+  const removeWaypoint = useCallback(
     (shapeId, index) => {
       updateShapes(
         (prev) => prev.map((s) => {
@@ -1442,7 +1316,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [updateShapes]
   );
-  const applyDirection = useCallback3(
+  const applyDirection = useCallback(
     (bidirectional) => {
       if (!selectedId) return;
       updateShapes(
@@ -1454,7 +1328,7 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [selectedId, updateShapes]
   );
-  const commitText = useCallback3(
+  const commitText = useCallback(
     (id, field, value) => {
       setEditingText(null);
       updateShapes(
@@ -1478,12 +1352,12 @@ function DrawingCanvas({ nodeKey, data }) {
   return /* @__PURE__ */ jsxs2(
     "div",
     {
-      className: "zui-drawing-canvas",
+      className: `zui-drawing-canvas ${width === "content" ? "is-content-width" : ""}`,
       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(
+          /* @__PURE__ */ jsx2("div", { className: "zui-drawing-toolbar-group", children: TOOLS.map(({ tool: t, label }) => /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -1494,7 +1368,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 setTool(t);
                 if (t !== "select") setSelectedId(null);
               },
-              children: /* @__PURE__ */ jsx3(
+              children: /* @__PURE__ */ jsx2(
                 "svg",
                 {
                   viewBox: "0 0 20 20",
@@ -1512,8 +1386,8 @@ 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__ */ jsx2("span", { className: "zui-drawing-swatch-label", children: "Stroke" }),
+            STROKE_COLORS.map((color) => /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -1527,8 +1401,8 @@ function DrawingCanvas({ nodeKey, data }) {
             ))
           ] }),
           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(
+            /* @__PURE__ */ jsx2("span", { className: "zui-drawing-swatch-label", children: "Fill" }),
+            FILL_COLORS.map((color) => /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -1542,7 +1416,7 @@ function DrawingCanvas({ nodeKey, data }) {
             ))
           ] }),
           selectedShape && isConnectorType(selectedShape.type) && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar-group", children: [
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -1550,7 +1424,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__ */ jsx2(
                   "svg",
                   {
                     viewBox: "0 0 20 20",
@@ -1560,12 +1434,12 @@ function DrawingCanvas({ nodeKey, data }) {
                     stroke: "currentColor",
                     strokeWidth: "1.6",
                     strokeLinecap: "round",
-                    children: /* @__PURE__ */ jsx3("path", { d: "M4 16L16 4" })
+                    children: /* @__PURE__ */ jsx2("path", { d: "M4 16L16 4" })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -1573,7 +1447,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__ */ jsx2(
                   "svg",
                   {
                     viewBox: "0 0 20 20",
@@ -1584,14 +1458,14 @@ function DrawingCanvas({ nodeKey, data }) {
                     strokeWidth: "1.6",
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
-                    children: /* @__PURE__ */ jsx3("path", { d: "M4 16v-6h12V4" })
+                    children: /* @__PURE__ */ jsx2("path", { d: "M4 16v-6h12V4" })
                   }
                 )
               }
             )
           ] }),
           selectedShape?.type === "arrow" && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar-group", children: [
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -1599,7 +1473,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__ */ jsx2(
                   "svg",
                   {
                     viewBox: "0 0 20 20",
@@ -1610,12 +1484,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__ */ jsx2("path", { d: "M3 10h13M12 5.5L16.5 10L12 14.5" })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -1623,7 +1497,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__ */ jsx2(
                   "svg",
                   {
                     viewBox: "0 0 20 20",
@@ -1634,13 +1508,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__ */ jsx2("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__ */ jsx2("div", { className: "zui-drawing-toolbar-group", children: /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -1648,7 +1522,7 @@ function DrawingCanvas({ nodeKey, data }) {
               "aria-label": "Delete shape",
               className: "zui-drawing-tool zui-drawing-tool-danger",
               onClick: deleteSelected,
-              children: /* @__PURE__ */ jsx3(
+              children: /* @__PURE__ */ jsx2(
                 "svg",
                 {
                   viewBox: "0 0 20 20",
@@ -1658,18 +1532,48 @@ 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__ */ jsx2("path", { d: "M4 6h12M8 6V4h4v2M6 6l1 10h6l1-10M8.5 9v4M11.5 9v4" })
                 }
               )
             }
-          ) })
+          ) }),
+          /* @__PURE__ */ jsx2("div", { className: "zui-drawing-toolbar-group zui-drawing-toolbar-group-end", children: BLOCK_WIDTH_OPTIONS.map(({ width: option, label, icon }) => /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              title: label,
+              "aria-label": label,
+              "aria-pressed": width === option,
+              className: `zui-drawing-tool ${width === option ? "is-active" : ""}`,
+              onClick: () => applyWidth(option),
+              children: /* @__PURE__ */ jsx2(
+                "svg",
+                {
+                  viewBox: "0 0 20 20",
+                  width: "16",
+                  height: "16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.6",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: icon
+                }
+              )
+            },
+            option
+          )) })
         ] }),
         /* @__PURE__ */ jsxs2(
           "svg",
           {
             ref: svgRef,
             className: "zui-drawing-surface",
-            style: { height, cursor: canvasCursor },
+            style: {
+              height,
+              width: width === "content" ? contentWidth(shapes) : void 0,
+              cursor: canvasCursor
+            },
             onPointerDown: handleBackgroundPointerDown,
             onPointerMove: handlePointerMove,
             onPointerUp: handlePointerUp,
@@ -1700,7 +1604,7 @@ function DrawingCanvas({ nodeKey, data }) {
                   },
                   onPointerDown: (e) => handleShapePointerDown(e, shape),
                   children: [
-                    isConnectorType(shape.type) && /* @__PURE__ */ jsx3(
+                    isConnectorType(shape.type) && /* @__PURE__ */ jsx2(
                       "path",
                       {
                         d: connectorPath(shape),
@@ -1709,8 +1613,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__ */ jsx2(HitArea, { shape }),
+                    shape.id === editingText?.id && shape.type === "text" ? null : /* @__PURE__ */ jsx2(
                       ShapeView,
                       {
                         shape,
@@ -1722,7 +1626,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 },
                 shape.id
               )),
-              selectedShape && isEditable && !editingText && /* @__PURE__ */ jsx3(
+              selectedShape && isEditable && !editingText && /* @__PURE__ */ jsx2(
                 SelectionOverlay,
                 {
                   shape: selectedShape,
@@ -1734,7 +1638,7 @@ function DrawingCanvas({ nodeKey, data }) {
             ]
           }
         ),
-        editingShape && editingText && /* @__PURE__ */ jsx3(
+        editingShape && editingText && /* @__PURE__ */ jsx2(
           TextEditOverlay,
           {
             shape: editingShape,
@@ -1743,7 +1647,7 @@ function DrawingCanvas({ nodeKey, data }) {
           },
           `${editingShape.id}:${editingText.field}`
         ),
-        isEditable && /* @__PURE__ */ jsx3(
+        isEditable && /* @__PURE__ */ jsx2(
           "div",
           {
             className: "zui-drawing-resize",
@@ -1782,7 +1686,7 @@ function DrawingCanvas({ nodeKey, data }) {
 }
 function HitArea({ shape }) {
   const b = bbox(shape);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "rect",
     {
       x: b.x,
@@ -1817,7 +1721,7 @@ function SelectionOverlay({
       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(
+      ghosts.map(({ index, x, y }) => /* @__PURE__ */ jsx2(
         "circle",
         {
           cx: x,
@@ -1830,11 +1734,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__ */ jsx2("title", { children: "Drag to add a point" })
         },
         `ghost-${index}`
       )),
-      waypoints.map((p, i) => /* @__PURE__ */ jsx3(
+      waypoints.map((p, i) => /* @__PURE__ */ jsx2(
         "rect",
         {
           x: p.x - 4,
@@ -1855,11 +1759,11 @@ function SelectionOverlay({
             e.stopPropagation();
             onWaypointRemove(shape.id, i);
           },
-          children: /* @__PURE__ */ jsx3("title", { children: "Drag to move, double-click to remove" })
+          children: /* @__PURE__ */ jsx2("title", { children: "Drag to move, double-click to remove" })
         },
         `wp-${i}`
       )),
-      ends.map(({ end, x, y }) => /* @__PURE__ */ jsx3(
+      ends.map(({ end, x, y }) => /* @__PURE__ */ jsx2(
         "circle",
         {
           cx: x,
@@ -1878,7 +1782,7 @@ function SelectionOverlay({
         },
         end
       )),
-      elbowMid && /* @__PURE__ */ jsx3(
+      elbowMid && /* @__PURE__ */ jsx2(
         "rect",
         {
           x: elbowMid.x - 4,
@@ -1909,7 +1813,7 @@ function SelectionOverlay({
   ];
   const resizable = shape.type !== "text";
   return /* @__PURE__ */ jsxs2("g", { children: [
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx2(
       "rect",
       {
         x: b.x - pad,
@@ -1923,7 +1827,7 @@ function SelectionOverlay({
         pointerEvents: "none"
       }
     ),
-    resizable && corners.map(({ corner, x, y }) => /* @__PURE__ */ jsx3(
+    resizable && corners.map(({ corner, x, y }) => /* @__PURE__ */ jsx2(
       "rect",
       {
         x: x - 4,
@@ -1949,9 +1853,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 +1903,7 @@ function TextEditOverlay({
     });
   }
   const placeholder = field === "label" ? "Label" : field === "footer" ? "Footer" : "Text";
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "textarea",
     {
       ref,
@@ -2025,7 +1929,7 @@ function TextEditOverlay({
 }
 
 // src/nodes/DrawingNode.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var DrawingNode = class _DrawingNode extends DecoratorNode {
   static getType() {
     return "drawing";
@@ -2089,11 +1993,11 @@ var DrawingNode = class _DrawingNode extends DecoratorNode {
     return false;
   }
   decorate(_editor, _config) {
-    return /* @__PURE__ */ jsx4(DrawingCanvas, { nodeKey: this.getKey(), data: this.getData() });
+    return /* @__PURE__ */ jsx3(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,303 +2023,106 @@ ${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" })
+// 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 as $isTableNode2,
+  $isTableRowNode,
+  TableCellHeaderStates,
+  TableCellNode,
+  TableNode,
+  TableRowNode
+} from "@lexical/table";
+
+// src/transformers/tableWidth.ts
+import {
+  $getNodeByKey as $getNodeByKey3,
+  $getSelection as $getSelection2,
+  $isRangeSelection as $isRangeSelection2
+} from "lexical";
+import { $findMatchingParent } from "@lexical/utils";
+import { $isTableNode, $isTableSelection } from "@lexical/table";
+var TABLE_WIDTH_MARKER = "<!-- width: content -->";
+var TABLE_WIDTH_MARKER_REG_EXP = /^<!--\s*width:\s*content\s*-->\s*$/;
+var CONTENT_WIDTH_STYLE = "width: auto; table-layout: auto";
+var CONTENT_WIDTH_REG_EXP = /(^|;)\s*width:\s*auto\s*(;|$)/;
+function $getTableWidth(table) {
+  return CONTENT_WIDTH_REG_EXP.test(table.getStyle()) ? "content" : "full";
+}
+function $setTableWidth(table, width) {
+  table.setStyle(width === "content" ? CONTENT_WIDTH_STYLE : "");
+}
+function $getSelectedTable() {
+  const selection = $getSelection2();
+  if ($isTableSelection(selection)) {
+    const node = $getNodeByKey3(selection.tableKey);
+    return $isTableNode(node) ? node : null;
   }
-];
-function ToolbarPlugin() {
-  const [editor] = useLexicalComposerContext8();
-  const [activeFormats, setActiveFormats] = useState4(
-    /* @__PURE__ */ new Set()
+  if (!$isRangeSelection2(selection)) return null;
+  const table = $findMatchingParent(
+    selection.anchor.getNode(),
+    (node) => $isTableNode(node)
   );
-  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);
+  return $isTableNode(table) ? table : null;
+}
+
+// src/transformers/tableTransformer.ts
+var TABLE_ROW_REG_EXP = /^\|(.+)\|\s?$/;
+var TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-*:? ?)+\|\s?$/;
+function $isTableWidthMarker(node) {
+  if (!$isParagraphNode2(node) || node.getChildrenSize() !== 1) return false;
+  const child = node.getFirstChild();
+  return $isTextNode(child) && TABLE_WIDTH_MARKER_REG_EXP.test(child.getTextContent());
+}
+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 (!$isTableNode2(node)) return null;
+    const output = [];
+    if ($getTableWidth(node) === "content") output.push(TABLE_WIDTH_MARKER);
+    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;
         }
-        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,
-  $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(" | ")} |`);
+      output.push(`| ${rowOutput.join(" | ")} |`);
+      if (isHeaderRow) {
+        output.push(`| ${rowOutput.map(() => "---").join(" | ")} |`);
       }
     }
     return output.join("\n");
@@ -2424,7 +2131,7 @@ var TABLE = {
   replace: (parentNode, _children, match) => {
     if (TABLE_ROW_DIVIDER_REG_EXP.test(match[0])) {
       const table2 = parentNode.getPreviousSibling();
-      if (!table2 || !$isTableNode(table2)) return;
+      if (!table2 || !$isTableNode2(table2)) return;
       const lastRow = table2.getLastChild();
       if (!lastRow || !$isTableRowNode(lastRow)) return;
       lastRow.getChildren().forEach((cell) => {
@@ -2461,10 +2168,14 @@ var TABLE = {
       }
     }
     const previousSibling = parentNode.getPreviousSibling();
-    if ($isTableNode(previousSibling) && getTableColumnsSize(previousSibling) === maxCells) {
+    if ($isTableNode2(previousSibling) && getTableColumnsSize(previousSibling) === maxCells) {
       previousSibling.append(...table.getChildren());
       parentNode.remove();
     } else {
+      if ($isTableWidthMarker(previousSibling)) {
+        $setTableWidth(table, "content");
+        previousSibling?.remove();
+      }
       parentNode.replace(table);
     }
     table.selectEnd();
@@ -2551,10 +2262,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 as Fragment2, jsx as jsx4, jsxs as jsxs3 } 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 +2295,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,78 +2342,713 @@ function MarkdownEditor({
     }),
     []
   );
-  if (mode === "edit-raw") {
-    return /* @__PURE__ */ jsx6("div", { className: `zui-text-editor ${className ?? ""}`, children: /* @__PURE__ */ jsx6(
-      "textarea",
-      {
-        className: "zui-text-editor-textarea",
-        value: value ?? "",
-        onChange: handleTextChange,
-        placeholder,
-        readOnly,
-        autoFocus,
-        spellCheck: false
+  const context = useMemo(
+    () => ({
+      mode,
+      readOnly,
+      autoFocus,
+      rawValue: value ?? "",
+      onRawChange: handleChange
+    }),
+    [mode, readOnly, autoFocus, value, handleChange]
+  );
+  const isRaw = mode === "edit-raw";
+  return /* @__PURE__ */ jsx4(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx4(EditorContext.Provider, { value: context, children: /* @__PURE__ */ jsxs3("div", { className: `zui-text-editor ${className ?? ""}`, children: [
+    children,
+    !isRaw && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx4(
+        MarkdownSyncPlugin,
+        {
+          initialMarkdown: mode === "view" ? value ?? "" : capturedMarkdown,
+          onChange: handleChange,
+          transformers: SYNC_TRANSFORMERS
+        }
+      ),
+      /* @__PURE__ */ jsx4(HistoryPlugin, {}),
+      /* @__PURE__ */ jsx4(ListPlugin, {}),
+      /* @__PURE__ */ jsx4(CheckListPlugin, {}),
+      /* @__PURE__ */ jsx4(ChecklistShortcutPlugin, {}),
+      /* @__PURE__ */ jsx4(CodeBlockShortcutPlugin, {}),
+      /* @__PURE__ */ jsx4(CodeHighlightPlugin, {}),
+      /* @__PURE__ */ jsx4(TablePlugin, {}),
+      /* @__PURE__ */ jsx4(LinkPlugin, {}),
+      /* @__PURE__ */ jsx4(MarkdownShortcutPlugin, { transformers: SHORTCUT_TRANSFORMERS }),
+      /* @__PURE__ */ jsx4(ReadOnlyPlugin, { readOnly: readOnly || mode === "view" }),
+      autoFocus && /* @__PURE__ */ jsx4(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 $getSelection3, $isRangeSelection as $isRangeSelection3 } from "lexical";
+import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
+import { $isHeadingNode } from "@lexical/rich-text";
+import { jsx as jsx5 } 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());
+        }
       }
-    ) });
-  }
-  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
+      const selection = $getSelection3();
+      if ($isRangeSelection3(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();
           }
-        ),
-        foldable && /* @__PURE__ */ jsx6(FoldingPlugin, {})
-      ] }),
-      outline && /* @__PURE__ */ jsx6(OutlinePlugin, {})
-    ] }),
-    /* @__PURE__ */ jsx6(
-      MarkdownSyncPlugin,
-      {
-        initialMarkdown: mode === "view" ? value ?? "" : capturedMarkdown,
-        onChange: handleLexicalChange,
-        transformers: SYNC_TRANSFORMERS
+        }
       }
-    ),
-    /* @__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);
-}
-
-// src/components/drawingSchema.ts
-var DRAWING_DATA_JSON_SCHEMA = {
-  $schema: "http://json-schema.org/draft-07/schema#",
-  title: "DrawingData",
-  description: "Vector drawing embedded in markdown as a ```drawing fenced code block",
-  type: "object",
-  required: ["version", "height", "shapes"],
-  additionalProperties: false,
-  properties: {
-    version: { const: 1 },
-    height: {
+      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__ */ jsx5("div", { className: "zui-text-editor-fold-gutter", children: buttons.map(({ key, folded, top, height }) => /* @__PURE__ */ jsx5(
+    "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__ */ jsx5(
+        "svg",
+        {
+          viewBox: "0 0 20 20",
+          width: "12",
+          height: "12",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx5("path", { d: "M6 8l4 4 4-4" })
+        }
+      )
+    },
+    key
+  )) });
+}
+
+// src/plugins/TableWidthPlugin.tsx
+import { useCallback as useCallback5, useEffect as useEffect9, useState as useState5 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
+import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
+
+// src/useMarkdownEditor.ts
+import { useCallback as useCallback4, useEffect as useEffect8, useState as useState4 } from "react";
+import {
+  $getSelection as $getSelection4,
+  $isRangeSelection as $isRangeSelection4,
+  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 useLexicalComposerContext8 } 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] = useLexicalComposerContext8();
+  const [activeFormats, setActiveFormats] = useState4(
+    /* @__PURE__ */ new Set()
+  );
+  const [canUndo, setCanUndo] = useState4(false);
+  const [canRedo, setCanRedo] = useState4(false);
+  const [tableWidth, setTableWidthState] = useState4(null);
+  useEffect8(
+    () => mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          const table = $getSelectedTable();
+          setTableWidthState(table ? $getTableWidth(table) : null);
+          const selection = $getSelection4();
+          if (!$isRangeSelection4(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
+      )
+    ),
+    [editor]
+  );
+  const toggleFormat = useCallback4(
+    (format) => {
+      editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+    },
+    [editor]
+  );
+  const insertTable = useCallback4(
+    ({ rows = 3, columns = 3 } = {}) => {
+      editor.dispatchCommand(INSERT_TABLE_COMMAND, {
+        columns: String(columns),
+        rows: String(rows),
+        includeHeaders: { rows: true, columns: false }
+      });
+    },
+    [editor]
+  );
+  const insertDrawing = useCallback4(() => {
+    editor.update(() => {
+      $insertNodeToNearestRoot($createDrawingNode());
+    });
+  }, [editor]);
+  const setTableWidth = useCallback4(
+    (width) => {
+      editor.update(() => {
+        const table = $getSelectedTable();
+        if (table) $setTableWidth(table, width);
+      });
+    },
+    [editor]
+  );
+  const undo = useCallback4(() => {
+    editor.dispatchCommand(UNDO_COMMAND, void 0);
+  }, [editor]);
+  const redo = useCallback4(() => {
+    editor.dispatchCommand(REDO_COMMAND, void 0);
+  }, [editor]);
+  return {
+    editor,
+    activeFormats,
+    toggleFormat,
+    insertTable,
+    insertDrawing,
+    tableWidth,
+    setTableWidth,
+    canUndo,
+    canRedo,
+    undo,
+    redo
+  };
+}
+
+// src/components/Toolbar.tsx
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Toolbar({ children, className }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: `zui-text-editor-toolbar ${className ?? ""}`,
+      role: "toolbar",
+      children: children ?? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+        /* @__PURE__ */ jsx6(FormatButtons, {}),
+        /* @__PURE__ */ jsx6(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx6(InsertButtons, {})
+      ] })
+    }
+  );
+}
+function ToolbarDivider() {
+  return /* @__PURE__ */ jsx6("div", { className: "zui-text-editor-toolbar-divider" });
+}
+function ToolbarButton({
+  label,
+  onClick,
+  children,
+  active = false,
+  disabled = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx6(
+    "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__ */ jsx6(
+    "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__ */ jsx6(Icon, { strokeWidth: 1.8, children: /* @__PURE__ */ jsx6("path", { d: "M6 3.5h5a3 3 0 0 1 0 6H6zm0 6h6a3 3 0 0 1 0 6H6z" }) })
+  },
+  {
+    format: "italic",
+    label: "Italic",
+    icon: /* @__PURE__ */ jsx6(Icon, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx6("path", { d: "M8.5 3.5h6M5.5 16.5h6M11.5 3.5l-3 13" }) })
+  },
+  {
+    format: "strikethrough",
+    label: "Strikethrough",
+    icon: /* @__PURE__ */ jsx6(Icon, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx6("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__ */ jsx6(Icon, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx6("path", { d: "M7.5 6L4 10l3.5 4M12.5 6L16 10l-3.5 4" }) })
+  }
+];
+function FormatButtons() {
+  const { activeFormats, toggleFormat } = useMarkdownEditor();
+  return /* @__PURE__ */ jsx6(Fragment3, { children: FORMAT_BUTTONS.map(({ format, label, icon }) => /* @__PURE__ */ jsx6(
+    ToolbarButton,
+    {
+      label,
+      active: activeFormats.has(format),
+      onClick: () => toggleFormat(format),
+      children: icon
+    },
+    format
+  )) });
+}
+function InsertButtons() {
+  const { insertTable, insertDrawing } = useMarkdownEditor();
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    /* @__PURE__ */ jsx6(ToolbarButton, { label: "Insert table", onClick: () => insertTable(), children: /* @__PURE__ */ jsxs4(Icon, { children: [
+      /* @__PURE__ */ jsx6("rect", { x: "3", y: "3.5", width: "14", height: "13", rx: "1.5" }),
+      /* @__PURE__ */ jsx6("path", { d: "M3 8h14M8 8v8.5M13 8v8.5" })
+    ] }) }),
+    /* @__PURE__ */ jsx6(ToolbarButton, { label: "Insert drawing", onClick: insertDrawing, children: /* @__PURE__ */ jsxs4(Icon, { children: [
+      /* @__PURE__ */ jsx6("rect", { x: "3", y: "5", width: "8", height: "6", rx: "1.5" }),
+      /* @__PURE__ */ jsx6("path", { d: "M13.5 8h3M14.5 6.5L17.5 8l-3 1.5" }),
+      /* @__PURE__ */ jsx6("ellipse", { cx: "13", cy: "14.5", rx: "4", ry: "2.8" })
+    ] }) })
+  ] });
+}
+function HistoryButtons() {
+  const { canUndo, canRedo, undo, redo } = useMarkdownEditor();
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    /* @__PURE__ */ jsx6(ToolbarButton, { label: "Undo", onClick: undo, disabled: !canUndo, children: /* @__PURE__ */ jsxs4(Icon, { children: [
+      /* @__PURE__ */ jsx6("path", { d: "M7 6L3.5 9.5 7 13" }),
+      /* @__PURE__ */ jsx6("path", { d: "M3.5 9.5H12a4 4 0 0 1 0 8h-1" })
+    ] }) }),
+    /* @__PURE__ */ jsx6(ToolbarButton, { label: "Redo", onClick: redo, disabled: !canRedo, children: /* @__PURE__ */ jsxs4(Icon, { children: [
+      /* @__PURE__ */ jsx6("path", { d: "M13 6l3.5 3.5L13 13" }),
+      /* @__PURE__ */ jsx6("path", { d: "M16.5 9.5H8a4 4 0 0 0 0 8h1" })
+    ] }) })
+  ] });
+}
+
+// src/plugins/TableWidthPlugin.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function TableWidthPlugin() {
+  const [editor] = useLexicalComposerContext9();
+  const isEditable = useLexicalEditable2();
+  const { tableWidth, setTableWidth } = useMarkdownEditor();
+  const [anchor, setAnchor] = useState5(null);
+  const sync = useCallback5(() => {
+    const tableKey = editor.getEditorState().read(() => $getSelectedTable()?.getKey());
+    const element = tableKey ? editor.getElementByKey(tableKey) : null;
+    const main = editor.getRootElement()?.parentElement;
+    if (!element || !main) {
+      setAnchor(null);
+      return;
+    }
+    const rect = element.getBoundingClientRect();
+    const mainRect = main.getBoundingClientRect();
+    setAnchor({
+      top: rect.top - mainRect.top,
+      right: mainRect.right - rect.right + 8
+    });
+  }, [editor]);
+  useEffect9(() => {
+    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]);
+  if (!isEditable || !anchor || !tableWidth) return null;
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: "zui-table-width",
+      role: "group",
+      "aria-label": "Table width",
+      style: { top: anchor.top, right: anchor.right },
+      children: BLOCK_WIDTH_OPTIONS.map(({ width, label, icon }) => /* @__PURE__ */ jsx7(
+        ToolbarButton,
+        {
+          label,
+          active: tableWidth === width,
+          onClick: () => setTableWidth(width),
+          children: /* @__PURE__ */ jsx7(
+            "svg",
+            {
+              viewBox: "0 0 20 20",
+              width: "16",
+              height: "16",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.6",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: icon
+            }
+          )
+        },
+        width
+      ))
+    }
+  );
+}
+
+// src/EditorContent.tsx
+import { jsx as jsx8, jsxs as jsxs5 } 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__ */ jsx8(
+      "textarea",
+      {
+        className: "zui-text-editor-textarea",
+        value: rawValue,
+        onChange: (e) => onRawChange(e.target.value),
+        placeholder,
+        readOnly,
+        autoFocus,
+        spellCheck: false
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: "zui-text-editor-body", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "zui-text-editor-main", children: [
+      /* @__PURE__ */ jsx8(
+        RichTextPlugin,
+        {
+          contentEditable: /* @__PURE__ */ jsx8(
+            ContentEditable,
+            {
+              className: "zui-text-editor-content",
+              "aria-placeholder": placeholder,
+              placeholder: /* @__PURE__ */ jsx8("div", { className: "zui-text-editor-placeholder", children: placeholder })
+            }
+          ),
+          ErrorBoundary: LexicalErrorBoundary
+        }
+      ),
+      foldable && /* @__PURE__ */ jsx8(FoldingPlugin, {}),
+      /* @__PURE__ */ jsx8(TableWidthPlugin, {})
+    ] }),
+    children
+  ] });
+}
+
+// src/plugins/OutlinePlugin.tsx
+import { useCallback as useCallback6, useEffect as useEffect10, useState as useState6 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
+import {
+  TableOfContentsPlugin
+} from "@lexical/react/LexicalTableOfContentsPlugin";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var INDENT_PER_LEVEL = {
+  h1: 0,
+  h2: 1,
+  h3: 2,
+  h4: 3,
+  h5: 4,
+  h6: 5
+};
+function OutlinePlugin() {
+  const [editor] = useLexicalComposerContext10();
+  const [collapsed, setCollapsed] = useState6(false);
+  const [activeKey, setActiveKey] = useState6(null);
+  useEffect10(() => {
+    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 = useCallback6(
+    (key) => {
+      editor.getEditorState().read(() => {
+        const element = editor.getElementByKey(key);
+        element?.scrollIntoView({ behavior: "smooth", block: "start" });
+      });
+    },
+    [editor]
+  );
+  return /* @__PURE__ */ jsx9(TableOfContentsPlugin, { children: (entries) => {
+    for (const [key] of entries) {
+      editor.getElementByKey(key)?.setAttribute("data-outline-key", key);
+    }
+    return /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: `zui-text-editor-outline ${collapsed ? "is-collapsed" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx9(
+            "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__ */ jsx9(
+                "svg",
+                {
+                  viewBox: "0 0 20 20",
+                  width: "14",
+                  height: "14",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.8",
+                  strokeLinecap: "round",
+                  children: /* @__PURE__ */ jsx9("path", { d: "M4 5h12M4 10h8M4 15h10" })
+                }
+              )
+            }
+          ),
+          !collapsed && /* @__PURE__ */ jsxs6("nav", { className: "zui-text-editor-outline-list", "aria-label": "Table of contents", children: [
+            entries.length === 0 && /* @__PURE__ */ jsx9("div", { className: "zui-text-editor-outline-empty", children: "No headings" }),
+            entries.map(([key, text, tag]) => /* @__PURE__ */ jsx9(
+              "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/MarkdownEditor.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var DEFAULT_ITEMS = {
+  format: /* @__PURE__ */ jsx10(FormatButtons, {}),
+  insert: /* @__PURE__ */ jsx10(InsertButtons, {}),
+  history: /* @__PURE__ */ jsx10(HistoryButtons, {})
+};
+function EditorToolbar({
+  children,
+  className
+}) {
+  const { mode, readOnly } = useEditorContext();
+  if (mode !== "edit-md" || readOnly) return null;
+  return /* @__PURE__ */ jsx10(Toolbar, { className, children });
+}
+function MarkdownEditor({
+  placeholder,
+  toolbar = true,
+  outline = false,
+  foldable = true,
+  ...rootProps
+}) {
+  return /* @__PURE__ */ jsxs7(EditorRoot, { ...rootProps, children: [
+    toolbar === true && /* @__PURE__ */ jsx10(EditorToolbar, {}),
+    typeof toolbar === "function" && toolbar(DEFAULT_ITEMS),
+    /* @__PURE__ */ jsx10(EditorContent, { placeholder, foldable, children: outline && /* @__PURE__ */ jsx10(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 = {
+  $schema: "http://json-schema.org/draft-07/schema#",
+  title: "DrawingData",
+  description: "Vector drawing embedded in markdown as a ```drawing fenced code block",
+  type: "object",
+  required: ["version", "height", "shapes"],
+  additionalProperties: false,
+  properties: {
+    version: { const: 1 },
+    height: {
       type: "number",
       minimum: 80,
-      description: "Canvas height in pixels (width is fluid)"
+      description: "Canvas height in pixels"
+    },
+    width: {
+      enum: ["full", "content"],
+      description: `Canvas width: "full" (default) spans the editor; "content" fits the shapes' horizontal extent and left-aligns with the text`
     },
     shapes: {
       type: "array",
@@ -2801,15 +3146,26 @@ var DRAWING_DATA_JSON_SCHEMA = {
 export {
   $createDrawingNode,
   $createFrontmatterNode,
+  $getSelectedTable,
+  $getTableWidth,
   $isDrawingNode,
   $isFrontmatterNode,
+  $setTableWidth,
   DRAWING,
   DRAWING_DATA_JSON_SCHEMA,
   DrawingNode,
   FRONTMATTER,
+  FormatButtons,
   FrontmatterNode,
-  MarkdownEditor,
+  HistoryButtons,
+  InsertButtons,
+  MarkdownEditor_default as MarkdownEditor,
   TABLE,
+  TABLE_WIDTH_MARKER,
+  Toolbar,
+  ToolbarButton,
+  ToolbarDivider,
   parseDrawingData,
-  serializeDrawingData
+  serializeDrawingData,
+  useMarkdownEditor
 };