@zuilib/text-editor 0.3.0 → 0.3.1

package/dist/index.js

@@ -357,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 {
@@ -373,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;
@@ -615,10 +639,12 @@ function resolveBindings(shapes) {
 }
 
 // src/components/DrawingCanvas.tsx
-import { jsx, jsxs } 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;
@@ -649,7 +675,7 @@ function BoxTexts({
     opacity: 0.35,
     style: { userSelect: "none", pointerEvents: "none" }
   };
-  return /* @__PURE__ */ jsxs("g", { children: [
+  return /* @__PURE__ */ jsxs2("g", { children: [
     hideField !== "label" && (shape.label ? labelLines.map((line, i) => /* @__PURE__ */ createElement(
       "text",
       {
@@ -662,7 +688,7 @@ function BoxTexts({
         opacity: 0.85
       },
       line
-    )) : showHints && /* @__PURE__ */ jsx("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",
       {
@@ -673,7 +699,7 @@ function BoxTexts({
         fontSize: FONT_SIZE
       },
       line
-    )) : showHints && /* @__PURE__ */ jsx("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",
       {
@@ -685,7 +711,7 @@ function BoxTexts({
         opacity: 0.65
       },
       line
-    )) : showHints && /* @__PURE__ */ jsx("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({
@@ -702,8 +728,8 @@ function ShapeView({
   switch (shape.type) {
     case "rect": {
       const b = bbox(shape);
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs2("g", { children: [
+        /* @__PURE__ */ jsx2(
           "rect",
           {
             ...common,
@@ -715,13 +741,13 @@ function ShapeView({
             fill: shape.fill
           }
         ),
-        /* @__PURE__ */ jsx(BoxTexts, { shape, hideField, showHints })
+        /* @__PURE__ */ jsx2(BoxTexts, { shape, hideField, showHints })
       ] });
     }
     case "ellipse": {
       const b = bbox(shape);
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs2("g", { children: [
+        /* @__PURE__ */ jsx2(
           "ellipse",
           {
             ...common,
@@ -732,13 +758,13 @@ function ShapeView({
             fill: shape.fill
           }
         ),
-        /* @__PURE__ */ jsx(BoxTexts, { shape, hideField, showHints })
+        /* @__PURE__ */ jsx2(BoxTexts, { shape, hideField, showHints })
       ] });
     }
     case "triangle":
     case "pentagon":
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs2("g", { children: [
+        /* @__PURE__ */ jsx2(
           "polygon",
           {
             ...common,
@@ -746,12 +772,12 @@ function ShapeView({
             fill: shape.fill
           }
         ),
-        /* @__PURE__ */ jsx(BoxTexts, { shape, hideField, showHints })
+        /* @__PURE__ */ jsx2(BoxTexts, { shape, hideField, showHints })
       ] });
     case "line":
     case "arrow":
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs2("g", { children: [
+        /* @__PURE__ */ jsx2(
           "path",
           {
             ...common,
@@ -759,10 +785,10 @@ function ShapeView({
             fill: "none"
           }
         ),
-        shape.text && hideField !== "text" && /* @__PURE__ */ jsx(ConnectorLabel, { shape })
+        shape.text && hideField !== "text" && /* @__PURE__ */ jsx2(ConnectorLabel, { shape })
       ] });
     case "text":
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx2(
         "text",
         {
           x: shape.x,
@@ -771,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__ */ jsx("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))
         }
       );
   }
@@ -783,8 +809,8 @@ function ConnectorLabel({ shape }) {
   const { x: midX, y: midY } = connectorMidpoint(shape);
   const lineH = CONNECTOR_FONT_SIZE * LINE_HEIGHT;
   const startY = midY - (lines.length - 1) * lineH / 2 + CONNECTOR_FONT_SIZE * 0.35;
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsx2(
       "rect",
       {
         x: midX - size.w / 2 - 5,
@@ -796,7 +822,7 @@ function ConnectorLabel({ shape }) {
         opacity: 0.92
       }
     ),
-    lines.map((line, i) => /* @__PURE__ */ jsx(
+    lines.map((line, i) => /* @__PURE__ */ jsx2(
       "text",
       {
         x: midX,
@@ -813,20 +839,20 @@ function ConnectorLabel({ shape }) {
   ] });
 }
 var TOOL_ICONS = {
-  select: /* @__PURE__ */ jsx("path", { d: "M4 2l12 6.5-5.2 1.6L8 16z", fill: "currentColor", stroke: "none" }),
-  rect: /* @__PURE__ */ jsx("rect", { x: "3", y: "4.5", width: "14", height: "11", rx: "2" }),
-  ellipse: /* @__PURE__ */ jsx("ellipse", { cx: "10", cy: "10", rx: "7", ry: "5.5" }),
-  triangle: /* @__PURE__ */ jsx("path", { d: "M10 3.5L17 16.5H3z", strokeLinejoin: "round" }),
-  pentagon: /* @__PURE__ */ jsx("path", { d: "M10 3L16.8 8.1L14.2 16.2H5.8L3.2 8.1z", strokeLinejoin: "round" }),
-  arrow: /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("path", { d: "M4 16L16 4" }),
-    /* @__PURE__ */ jsx("path", { d: "M9 4h7v7" })
+  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__ */ jsx2("path", { d: "M4 16L16 4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M9 4h7v7" })
   ] }),
-  line: /* @__PURE__ */ jsx("path", { d: "M4 16L16 4" }),
-  text: /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("path", { d: "M4 5V3.5h12V5" }),
-    /* @__PURE__ */ jsx("path", { d: "M10 3.5V16.5" }),
-    /* @__PURE__ */ jsx("path", { d: "M7 16.5h6" })
+  line: /* @__PURE__ */ jsx2("path", { d: "M4 16L16 4" }),
+  text: /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__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) {
@@ -849,11 +875,24 @@ 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] = useLexicalComposerContext5();
   const isEditable = useLexicalEditable();
   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);
@@ -866,21 +905,25 @@ function DrawingCanvas({ nodeKey, data }) {
   shapesRef.current = shapes;
   const heightRef = useRef2(height);
   heightRef.current = height;
+  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 = useCallback(
-    (nextShapes, nextHeight) => {
+    (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);
@@ -895,6 +938,13 @@ function DrawingCanvas({ nodeKey, data }) {
     },
     [editor, nodeKey]
   );
+  const applyWidth = useCallback(
+    (next) => {
+      setWidth(next);
+      commit(shapesRef.current, void 0, next);
+    },
+    [commit]
+  );
   const updateShapes = useCallback(
     (updater, options) => {
       setShapes((prev) => {
@@ -1299,15 +1349,15 @@ function DrawingCanvas({ nodeKey, data }) {
   const editingShape = shapes.find((s) => s.id === editingText?.id) ?? null;
   const showFill = selectedShape != null ? isBoxType(selectedShape.type) : tool !== "select" && isBoxType(tool);
   const canvasCursor = tool === "select" ? "default" : tool === "text" ? "text" : "crosshair";
-  return /* @__PURE__ */ jsxs(
+  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__ */ jsxs("div", { className: "zui-drawing-toolbar", onPointerDown: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsx("div", { className: "zui-drawing-toolbar-group", children: TOOLS.map(({ tool: t, label }) => /* @__PURE__ */ jsx(
+        isEditable && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar", onPointerDown: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx2("div", { className: "zui-drawing-toolbar-group", children: TOOLS.map(({ tool: t, label }) => /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -1318,7 +1368,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 setTool(t);
                 if (t !== "select") setSelectedId(null);
               },
-              children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsx2(
                 "svg",
                 {
                   viewBox: "0 0 20 20",
@@ -1335,9 +1385,9 @@ function DrawingCanvas({ nodeKey, data }) {
             },
             t
           )) }),
-          /* @__PURE__ */ jsxs("div", { className: "zui-drawing-toolbar-group", children: [
-            /* @__PURE__ */ jsx("span", { className: "zui-drawing-swatch-label", children: "Stroke" }),
-            STROKE_COLORS.map((color) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar-group", children: [
+            /* @__PURE__ */ jsx2("span", { className: "zui-drawing-swatch-label", children: "Stroke" }),
+            STROKE_COLORS.map((color) => /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -1350,9 +1400,9 @@ function DrawingCanvas({ nodeKey, data }) {
               color
             ))
           ] }),
-          showFill && /* @__PURE__ */ jsxs("div", { className: "zui-drawing-toolbar-group", children: [
-            /* @__PURE__ */ jsx("span", { className: "zui-drawing-swatch-label", children: "Fill" }),
-            FILL_COLORS.map((color) => /* @__PURE__ */ jsx(
+          showFill && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar-group", children: [
+            /* @__PURE__ */ jsx2("span", { className: "zui-drawing-swatch-label", children: "Fill" }),
+            FILL_COLORS.map((color) => /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -1365,8 +1415,8 @@ function DrawingCanvas({ nodeKey, data }) {
               color
             ))
           ] }),
-          selectedShape && isConnectorType(selectedShape.type) && /* @__PURE__ */ jsxs("div", { className: "zui-drawing-toolbar-group", children: [
-            /* @__PURE__ */ jsx(
+          selectedShape && isConnectorType(selectedShape.type) && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar-group", children: [
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -1374,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__ */ jsx(
+                children: /* @__PURE__ */ jsx2(
                   "svg",
                   {
                     viewBox: "0 0 20 20",
@@ -1384,12 +1434,12 @@ function DrawingCanvas({ nodeKey, data }) {
                     stroke: "currentColor",
                     strokeWidth: "1.6",
                     strokeLinecap: "round",
-                    children: /* @__PURE__ */ jsx("path", { d: "M4 16L16 4" })
+                    children: /* @__PURE__ */ jsx2("path", { d: "M4 16L16 4" })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -1397,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__ */ jsx(
+                children: /* @__PURE__ */ jsx2(
                   "svg",
                   {
                     viewBox: "0 0 20 20",
@@ -1408,14 +1458,14 @@ function DrawingCanvas({ nodeKey, data }) {
                     strokeWidth: "1.6",
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
-                    children: /* @__PURE__ */ jsx("path", { d: "M4 16v-6h12V4" })
+                    children: /* @__PURE__ */ jsx2("path", { d: "M4 16v-6h12V4" })
                   }
                 )
               }
             )
           ] }),
-          selectedShape?.type === "arrow" && /* @__PURE__ */ jsxs("div", { className: "zui-drawing-toolbar-group", children: [
-            /* @__PURE__ */ jsx(
+          selectedShape?.type === "arrow" && /* @__PURE__ */ jsxs2("div", { className: "zui-drawing-toolbar-group", children: [
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -1423,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__ */ jsx(
+                children: /* @__PURE__ */ jsx2(
                   "svg",
                   {
                     viewBox: "0 0 20 20",
@@ -1434,12 +1484,12 @@ function DrawingCanvas({ nodeKey, data }) {
                     strokeWidth: "1.6",
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
-                    children: /* @__PURE__ */ jsx("path", { d: "M3 10h13M12 5.5L16.5 10L12 14.5" })
+                    children: /* @__PURE__ */ jsx2("path", { d: "M3 10h13M12 5.5L16.5 10L12 14.5" })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -1447,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__ */ jsx(
+                children: /* @__PURE__ */ jsx2(
                   "svg",
                   {
                     viewBox: "0 0 20 20",
@@ -1458,13 +1508,13 @@ function DrawingCanvas({ nodeKey, data }) {
                     strokeWidth: "1.6",
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
-                    children: /* @__PURE__ */ jsx("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__ */ jsx("div", { className: "zui-drawing-toolbar-group", children: /* @__PURE__ */ jsx(
+          selectedShape && /* @__PURE__ */ jsx2("div", { className: "zui-drawing-toolbar-group", children: /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -1472,7 +1522,7 @@ function DrawingCanvas({ nodeKey, data }) {
               "aria-label": "Delete shape",
               className: "zui-drawing-tool zui-drawing-tool-danger",
               onClick: deleteSelected,
-              children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsx2(
                 "svg",
                 {
                   viewBox: "0 0 20 20",
@@ -1482,18 +1532,48 @@ function DrawingCanvas({ nodeKey, data }) {
                   stroke: "currentColor",
                   strokeWidth: "1.6",
                   strokeLinecap: "round",
-                  children: /* @__PURE__ */ jsx("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__ */ jsxs(
+        /* @__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,
@@ -1515,7 +1595,7 @@ function DrawingCanvas({ nodeKey, data }) {
               }
             },
             children: [
-              shapes.map((shape) => /* @__PURE__ */ jsxs(
+              shapes.map((shape) => /* @__PURE__ */ jsxs2(
                 "g",
                 {
                   "data-shape-id": shape.id,
@@ -1524,7 +1604,7 @@ function DrawingCanvas({ nodeKey, data }) {
                   },
                   onPointerDown: (e) => handleShapePointerDown(e, shape),
                   children: [
-                    isConnectorType(shape.type) && /* @__PURE__ */ jsx(
+                    isConnectorType(shape.type) && /* @__PURE__ */ jsx2(
                       "path",
                       {
                         d: connectorPath(shape),
@@ -1533,8 +1613,8 @@ function DrawingCanvas({ nodeKey, data }) {
                         strokeWidth: 14
                       }
                     ),
-                    (isBoxType(shape.type) || shape.type === "text") && /* @__PURE__ */ jsx(HitArea, { shape }),
-                    shape.id === editingText?.id && shape.type === "text" ? null : /* @__PURE__ */ jsx(
+                    (isBoxType(shape.type) || shape.type === "text") && /* @__PURE__ */ jsx2(HitArea, { shape }),
+                    shape.id === editingText?.id && shape.type === "text" ? null : /* @__PURE__ */ jsx2(
                       ShapeView,
                       {
                         shape,
@@ -1546,7 +1626,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 },
                 shape.id
               )),
-              selectedShape && isEditable && !editingText && /* @__PURE__ */ jsx(
+              selectedShape && isEditable && !editingText && /* @__PURE__ */ jsx2(
                 SelectionOverlay,
                 {
                   shape: selectedShape,
@@ -1558,7 +1638,7 @@ function DrawingCanvas({ nodeKey, data }) {
             ]
           }
         ),
-        editingShape && editingText && /* @__PURE__ */ jsx(
+        editingShape && editingText && /* @__PURE__ */ jsx2(
           TextEditOverlay,
           {
             shape: editingShape,
@@ -1567,7 +1647,7 @@ function DrawingCanvas({ nodeKey, data }) {
           },
           `${editingShape.id}:${editingText.field}`
         ),
-        isEditable && /* @__PURE__ */ jsx(
+        isEditable && /* @__PURE__ */ jsx2(
           "div",
           {
             className: "zui-drawing-resize",
@@ -1606,7 +1686,7 @@ function DrawingCanvas({ nodeKey, data }) {
 }
 function HitArea({ shape }) {
   const b = bbox(shape);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "rect",
     {
       x: b.x,
@@ -1640,8 +1720,8 @@ function SelectionOverlay({
       if (hasElbowHandle && i === 1) return [];
       return [{ index: i, x: (p.x + q.x) / 2, y: (p.y + q.y) / 2 }];
     });
-    return /* @__PURE__ */ jsxs("g", { children: [
-      ghosts.map(({ index, x, y }) => /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs2("g", { children: [
+      ghosts.map(({ index, x, y }) => /* @__PURE__ */ jsx2(
         "circle",
         {
           cx: x,
@@ -1654,11 +1734,11 @@ function SelectionOverlay({
           opacity: 0.6,
           style: { cursor: "copy" },
           onPointerDown: (e) => onWaypointAdd(e, shape.id, index, { x, y }),
-          children: /* @__PURE__ */ jsx("title", { children: "Drag to add a point" })
+          children: /* @__PURE__ */ jsx2("title", { children: "Drag to add a point" })
         },
         `ghost-${index}`
       )),
-      waypoints.map((p, i) => /* @__PURE__ */ jsx(
+      waypoints.map((p, i) => /* @__PURE__ */ jsx2(
         "rect",
         {
           x: p.x - 4,
@@ -1679,11 +1759,11 @@ function SelectionOverlay({
             e.stopPropagation();
             onWaypointRemove(shape.id, i);
           },
-          children: /* @__PURE__ */ jsx("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__ */ jsx(
+      ends.map(({ end, x, y }) => /* @__PURE__ */ jsx2(
         "circle",
         {
           cx: x,
@@ -1702,7 +1782,7 @@ function SelectionOverlay({
         },
         end
       )),
-      elbowMid && /* @__PURE__ */ jsx(
+      elbowMid && /* @__PURE__ */ jsx2(
         "rect",
         {
           x: elbowMid.x - 4,
@@ -1732,8 +1812,8 @@ function SelectionOverlay({
     { corner: "se", x: b.x + b.w + pad, y: b.y + b.h + pad }
   ];
   const resizable = shape.type !== "text";
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsx2(
       "rect",
       {
         x: b.x - pad,
@@ -1747,7 +1827,7 @@ function SelectionOverlay({
         pointerEvents: "none"
       }
     ),
-    resizable && corners.map(({ corner, x, y }) => /* @__PURE__ */ jsx(
+    resizable && corners.map(({ corner, x, y }) => /* @__PURE__ */ jsx2(
       "rect",
       {
         x: x - 4,
@@ -1823,7 +1903,7 @@ function TextEditOverlay({
     });
   }
   const placeholder = field === "label" ? "Label" : field === "footer" ? "Footer" : "Text";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "textarea",
     {
       ref,
@@ -1849,7 +1929,7 @@ function TextEditOverlay({
 }
 
 // src/nodes/DrawingNode.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var DrawingNode = class _DrawingNode extends DecoratorNode {
   static getType() {
     return "drawing";
@@ -1913,7 +1993,7 @@ var DrawingNode = class _DrawingNode extends DecoratorNode {
     return false;
   }
   decorate(_editor, _config) {
-    return /* @__PURE__ */ jsx2(DrawingCanvas, { nodeKey: this.getKey(), data: this.getData() });
+    return /* @__PURE__ */ jsx3(DrawingCanvas, { nodeKey: this.getKey(), data: this.getData() });
   }
 };
 function $createDrawingNode(data = serializeDrawingData(EMPTY_DRAWING)) {
@@ -1958,15 +2038,54 @@ import {
   $createTableNode,
   $createTableRowNode,
   $isTableCellNode,
-  $isTableNode,
+  $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;
+  }
+  if (!$isRangeSelection2(selection)) return null;
+  const table = $findMatchingParent(
+    selection.anchor.getNode(),
+    (node) => $isTableNode(node)
+  );
+  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;
@@ -1985,8 +2104,9 @@ function mapToTableCells(textContent) {
 var TABLE = {
   dependencies: [TableNode, TableRowNode, TableCellNode],
   export: (node) => {
-    if (!$isTableNode(node)) return null;
+    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 = [];
@@ -2011,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) => {
@@ -2048,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();
@@ -2139,7 +2263,7 @@ var editorTheme = {
 };
 
 // src/EditorRoot.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+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);
@@ -2229,10 +2353,10 @@ function EditorRoot({
     [mode, readOnly, autoFocus, value, handleChange]
   );
   const isRaw = mode === "edit-raw";
-  return /* @__PURE__ */ jsx3(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx3(EditorContext.Provider, { value: context, children: /* @__PURE__ */ jsxs2("div", { className: `zui-text-editor ${className ?? ""}`, children: [
+  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__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx3(
+    !isRaw && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx4(
         MarkdownSyncPlugin,
         {
           initialMarkdown: mode === "view" ? value ?? "" : capturedMarkdown,
@@ -2240,17 +2364,17 @@ function EditorRoot({
           transformers: SYNC_TRANSFORMERS
         }
       ),
-      /* @__PURE__ */ jsx3(HistoryPlugin, {}),
-      /* @__PURE__ */ jsx3(ListPlugin, {}),
-      /* @__PURE__ */ jsx3(CheckListPlugin, {}),
-      /* @__PURE__ */ jsx3(ChecklistShortcutPlugin, {}),
-      /* @__PURE__ */ jsx3(CodeBlockShortcutPlugin, {}),
-      /* @__PURE__ */ jsx3(CodeHighlightPlugin, {}),
-      /* @__PURE__ */ jsx3(TablePlugin, {}),
-      /* @__PURE__ */ jsx3(LinkPlugin, {}),
-      /* @__PURE__ */ jsx3(MarkdownShortcutPlugin, { transformers: SHORTCUT_TRANSFORMERS }),
-      /* @__PURE__ */ jsx3(ReadOnlyPlugin, { readOnly: readOnly || mode === "view" }),
-      autoFocus && /* @__PURE__ */ jsx3(AutoFocusPlugin, {})
+      /* @__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);
 }
@@ -2267,10 +2391,10 @@ import {
   useRef as useRef4,
   useState as useState3
 } from "react";
-import { $getRoot, $getSelection as $getSelection2, $isRangeSelection as $isRangeSelection2 } from "lexical";
+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 jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var HEADING_LEVELS = {
   h1: 1,
   h2: 2,
@@ -2306,8 +2430,8 @@ function FoldingPlugin() {
           hidden.add(sibling.getKey());
         }
       }
-      const selection = $getSelection2();
-      if ($isRangeSelection2(selection)) {
+      const selection = $getSelection3();
+      if ($isRangeSelection3(selection)) {
         const topLevel = selection.anchor.getNode().getTopLevelElement();
         if (topLevel && hidden.has(topLevel.getKey())) {
           let node = topLevel.getPreviousSibling();
@@ -2368,7 +2492,7 @@ function FoldingPlugin() {
       return next;
     });
   }, []);
-  return /* @__PURE__ */ jsx4("div", { className: "zui-text-editor-fold-gutter", children: buttons.map(({ key, folded, top, height }) => /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5("div", { className: "zui-text-editor-fold-gutter", children: buttons.map(({ key, folded, top, height }) => /* @__PURE__ */ jsx5(
     "button",
     {
       type: "button",
@@ -2378,7 +2502,7 @@ function FoldingPlugin() {
       "aria-label": folded ? "Expand section" : "Collapse section",
       "aria-expanded": !folded,
       onClick: () => toggle(key),
-      children: /* @__PURE__ */ jsx4(
+      children: /* @__PURE__ */ jsx5(
         "svg",
         {
           viewBox: "0 0 20 20",
@@ -2389,7 +2513,7 @@ function FoldingPlugin() {
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          children: /* @__PURE__ */ jsx4("path", { d: "M6 8l4 4 4-4" })
+          children: /* @__PURE__ */ jsx5("path", { d: "M6 8l4 4 4-4" })
         }
       )
     },
@@ -2397,168 +2521,16 @@ function FoldingPlugin() {
   )) });
 }
 
-// src/EditorContent.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function EditorContent({
-  placeholder = "Start writing...",
-  foldable = true,
-  children
-}) {
-  const { mode, readOnly, autoFocus, rawValue, onRawChange } = useEditorContext();
-  if (mode === "edit-raw") {
-    return /* @__PURE__ */ jsx5(
-      "textarea",
-      {
-        className: "zui-text-editor-textarea",
-        value: rawValue,
-        onChange: (e) => onRawChange(e.target.value),
-        placeholder,
-        readOnly,
-        autoFocus,
-        spellCheck: false
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs3("div", { className: "zui-text-editor-body", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "zui-text-editor-main", children: [
-      /* @__PURE__ */ jsx5(
-        RichTextPlugin,
-        {
-          contentEditable: /* @__PURE__ */ jsx5(
-            ContentEditable,
-            {
-              className: "zui-text-editor-content",
-              "aria-placeholder": placeholder,
-              placeholder: /* @__PURE__ */ jsx5("div", { className: "zui-text-editor-placeholder", children: placeholder })
-            }
-          ),
-          ErrorBoundary: LexicalErrorBoundary
-        }
-      ),
-      foldable && /* @__PURE__ */ jsx5(FoldingPlugin, {})
-    ] }),
-    children
-  ] });
-}
-
-// src/plugins/OutlinePlugin.tsx
-import { useCallback as useCallback4, useEffect as useEffect8, useState as useState4 } from "react";
-import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
-import {
-  TableOfContentsPlugin
-} from "@lexical/react/LexicalTableOfContentsPlugin";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var INDENT_PER_LEVEL = {
-  h1: 0,
-  h2: 1,
-  h3: 2,
-  h4: 3,
-  h5: 4,
-  h6: 5
-};
-function OutlinePlugin() {
-  const [editor] = useLexicalComposerContext8();
-  const [collapsed, setCollapsed] = useState4(false);
-  const [activeKey, setActiveKey] = useState4(null);
-  useEffect8(() => {
-    const rootElement = editor.getRootElement();
-    const scroller = rootElement?.closest(".zui-text-editor");
-    if (!rootElement || !(scroller instanceof HTMLElement)) return;
-    let frame = 0;
-    const updateActive = () => {
-      cancelAnimationFrame(frame);
-      frame = requestAnimationFrame(() => {
-        const headings = rootElement.querySelectorAll(
-          "h1, h2, h3, h4, h5, h6"
-        );
-        const threshold = scroller.scrollTop + 80;
-        let current = null;
-        for (const el of headings) {
-          if (el.offsetTop <= threshold) {
-            current = el.getAttribute("data-outline-key");
-          }
-        }
-        setActiveKey(current);
-      });
-    };
-    updateActive();
-    scroller.addEventListener("scroll", updateActive, { passive: true });
-    const unregister = editor.registerUpdateListener(updateActive);
-    return () => {
-      cancelAnimationFrame(frame);
-      scroller.removeEventListener("scroll", updateActive);
-      unregister();
-    };
-  }, [editor]);
-  const scrollTo = useCallback4(
-    (key) => {
-      editor.getEditorState().read(() => {
-        const element = editor.getElementByKey(key);
-        element?.scrollIntoView({ behavior: "smooth", block: "start" });
-      });
-    },
-    [editor]
-  );
-  return /* @__PURE__ */ jsx6(TableOfContentsPlugin, { children: (entries) => {
-    for (const [key] of entries) {
-      editor.getElementByKey(key)?.setAttribute("data-outline-key", key);
-    }
-    return /* @__PURE__ */ jsxs4(
-      "div",
-      {
-        className: `zui-text-editor-outline ${collapsed ? "is-collapsed" : ""}`,
-        children: [
-          /* @__PURE__ */ jsx6(
-            "button",
-            {
-              type: "button",
-              className: "zui-text-editor-outline-toggle",
-              title: collapsed ? "Show outline" : "Hide outline",
-              "aria-label": collapsed ? "Show outline" : "Hide outline",
-              "aria-expanded": !collapsed,
-              onClick: () => setCollapsed((c) => !c),
-              children: /* @__PURE__ */ jsx6(
-                "svg",
-                {
-                  viewBox: "0 0 20 20",
-                  width: "14",
-                  height: "14",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "1.8",
-                  strokeLinecap: "round",
-                  children: /* @__PURE__ */ jsx6("path", { d: "M4 5h12M4 10h8M4 15h10" })
-                }
-              )
-            }
-          ),
-          !collapsed && /* @__PURE__ */ jsxs4("nav", { className: "zui-text-editor-outline-list", "aria-label": "Table of contents", children: [
-            entries.length === 0 && /* @__PURE__ */ jsx6("div", { className: "zui-text-editor-outline-empty", children: "No headings" }),
-            entries.map(([key, text, tag]) => /* @__PURE__ */ jsx6(
-              "button",
-              {
-                type: "button",
-                className: `zui-text-editor-outline-item ${key === activeKey ? "is-active" : ""}`,
-                style: {
-                  paddingLeft: `${0.5 + INDENT_PER_LEVEL[tag] * 0.75}rem`
-                },
-                onClick: () => scrollTo(key),
-                children: text || "Untitled"
-              },
-              key
-            ))
-          ] })
-        ]
-      }
-    );
-  } });
-}
+// src/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 useCallback5, useEffect as useEffect9, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect8, useState as useState4 } from "react";
 import {
-  $getSelection as $getSelection3,
-  $isRangeSelection as $isRangeSelection3,
+  $getSelection as $getSelection4,
+  $isRangeSelection as $isRangeSelection4,
   CAN_REDO_COMMAND,
   CAN_UNDO_COMMAND,
   COMMAND_PRIORITY_LOW as COMMAND_PRIORITY_LOW2,
@@ -2566,7 +2538,7 @@ import {
   REDO_COMMAND,
   UNDO_COMMAND
 } from "lexical";
-import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
+import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
 import { INSERT_TABLE_COMMAND } from "@lexical/table";
 import { $insertNodeToNearestRoot, mergeRegister } from "@lexical/utils";
 var TRACKED_FORMATS = [
@@ -2577,18 +2549,21 @@ var TRACKED_FORMATS = [
   "code"
 ];
 function useMarkdownEditor() {
-  const [editor] = useLexicalComposerContext9();
-  const [activeFormats, setActiveFormats] = useState5(
+  const [editor] = useLexicalComposerContext8();
+  const [activeFormats, setActiveFormats] = useState4(
     /* @__PURE__ */ new Set()
   );
-  const [canUndo, setCanUndo] = useState5(false);
-  const [canRedo, setCanRedo] = useState5(false);
-  useEffect9(
+  const [canUndo, setCanUndo] = useState4(false);
+  const [canRedo, setCanRedo] = useState4(false);
+  const [tableWidth, setTableWidthState] = useState4(null);
+  useEffect8(
     () => mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
-          const selection = $getSelection3();
-          if (!$isRangeSelection3(selection)) {
+          const table = $getSelectedTable();
+          setTableWidthState(table ? $getTableWidth(table) : null);
+          const selection = $getSelection4();
+          if (!$isRangeSelection4(selection)) {
             setActiveFormats(/* @__PURE__ */ new Set());
             return;
           }
@@ -2618,13 +2593,13 @@ function useMarkdownEditor() {
     ),
     [editor]
   );
-  const toggleFormat = useCallback5(
+  const toggleFormat = useCallback4(
     (format) => {
       editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
     },
     [editor]
   );
-  const insertTable = useCallback5(
+  const insertTable = useCallback4(
     ({ rows = 3, columns = 3 } = {}) => {
       editor.dispatchCommand(INSERT_TABLE_COMMAND, {
         columns: String(columns),
@@ -2634,15 +2609,24 @@ function useMarkdownEditor() {
     },
     [editor]
   );
-  const insertDrawing = useCallback5(() => {
+  const insertDrawing = useCallback4(() => {
     editor.update(() => {
       $insertNodeToNearestRoot($createDrawingNode());
     });
   }, [editor]);
-  const undo = useCallback5(() => {
+  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 = useCallback5(() => {
+  const redo = useCallback4(() => {
     editor.dispatchCommand(REDO_COMMAND, void 0);
   }, [editor]);
   return {
@@ -2651,6 +2635,8 @@ function useMarkdownEditor() {
     toggleFormat,
     insertTable,
     insertDrawing,
+    tableWidth,
+    setTableWidth,
     canUndo,
     canRedo,
     undo,
@@ -2659,23 +2645,23 @@ function useMarkdownEditor() {
 }
 
 // src/components/Toolbar.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function Toolbar({ children, className }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: `zui-text-editor-toolbar ${className ?? ""}`,
       role: "toolbar",
-      children: children ?? /* @__PURE__ */ jsxs5(Fragment2, { children: [
-        /* @__PURE__ */ jsx7(FormatButtons, {}),
-        /* @__PURE__ */ jsx7(ToolbarDivider, {}),
-        /* @__PURE__ */ jsx7(InsertButtons, {})
+      children: children ?? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+        /* @__PURE__ */ jsx6(FormatButtons, {}),
+        /* @__PURE__ */ jsx6(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx6(InsertButtons, {})
       ] })
     }
   );
 }
 function ToolbarDivider() {
-  return /* @__PURE__ */ jsx7("div", { className: "zui-text-editor-toolbar-divider" });
+  return /* @__PURE__ */ jsx6("div", { className: "zui-text-editor-toolbar-divider" });
 }
 function ToolbarButton({
   label,
@@ -2685,7 +2671,7 @@ function ToolbarButton({
   disabled = false,
   className
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "button",
     {
       type: "button",
@@ -2701,7 +2687,7 @@ function ToolbarButton({
   );
 }
 function Icon({ children, strokeWidth = 1.5 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "svg",
     {
       viewBox: "0 0 20 20",
@@ -2720,27 +2706,27 @@ var FORMAT_BUTTONS = [
   {
     format: "bold",
     label: "Bold",
-    icon: /* @__PURE__ */ jsx7(Icon, { strokeWidth: 1.8, children: /* @__PURE__ */ jsx7("path", { d: "M6 3.5h5a3 3 0 0 1 0 6H6zm0 6h6a3 3 0 0 1 0 6H6z" }) })
+    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__ */ jsx7(Icon, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx7("path", { d: "M8.5 3.5h6M5.5 16.5h6M11.5 3.5l-3 13" }) })
+    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__ */ jsx7(Icon, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx7("path", { d: "M4 10h12M13.5 5.5c-.6-1.2-2-2-3.5-2-2 0-3.5 1.2-3.5 2.8 0 .5.1.9.4 1.3m-.4 5c.5 1.6 2 2.9 3.9 2.9 2 0 3.6-1.2 3.6-2.9 0-.4-.1-.8-.2-1.1" }) })
+    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__ */ jsx7(Icon, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx7("path", { d: "M7.5 6L4 10l3.5 4M12.5 6L16 10l-3.5 4" }) })
+    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__ */ jsx7(Fragment2, { children: FORMAT_BUTTONS.map(({ format, label, icon }) => /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(Fragment3, { children: FORMAT_BUTTONS.map(({ format, label, icon }) => /* @__PURE__ */ jsx6(
     ToolbarButton,
     {
       label,
@@ -2753,38 +2739,264 @@ function FormatButtons() {
 }
 function InsertButtons() {
   const { insertTable, insertDrawing } = useMarkdownEditor();
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx7(ToolbarButton, { label: "Insert table", onClick: () => insertTable(), children: /* @__PURE__ */ jsxs5(Icon, { children: [
-      /* @__PURE__ */ jsx7("rect", { x: "3", y: "3.5", width: "14", height: "13", rx: "1.5" }),
-      /* @__PURE__ */ jsx7("path", { d: "M3 8h14M8 8v8.5M13 8v8.5" })
+  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__ */ jsx7(ToolbarButton, { label: "Insert drawing", onClick: insertDrawing, children: /* @__PURE__ */ jsxs5(Icon, { children: [
-      /* @__PURE__ */ jsx7("rect", { x: "3", y: "5", width: "8", height: "6", rx: "1.5" }),
-      /* @__PURE__ */ jsx7("path", { d: "M13.5 8h3M14.5 6.5L17.5 8l-3 1.5" }),
-      /* @__PURE__ */ jsx7("ellipse", { cx: "13", cy: "14.5", rx: "4", ry: "2.8" })
+    /* @__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__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx7(ToolbarButton, { label: "Undo", onClick: undo, disabled: !canUndo, children: /* @__PURE__ */ jsxs5(Icon, { children: [
-      /* @__PURE__ */ jsx7("path", { d: "M7 6L3.5 9.5 7 13" }),
-      /* @__PURE__ */ jsx7("path", { d: "M3.5 9.5H12a4 4 0 0 1 0 8h-1" })
+  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__ */ jsx7(ToolbarButton, { label: "Redo", onClick: redo, disabled: !canRedo, children: /* @__PURE__ */ jsxs5(Icon, { children: [
-      /* @__PURE__ */ jsx7("path", { d: "M13 6l3.5 3.5L13 13" }),
-      /* @__PURE__ */ jsx7("path", { d: "M16.5 9.5H8a4 4 0 0 0 0 8h1" })
+    /* @__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 jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var DEFAULT_ITEMS = {
-  format: /* @__PURE__ */ jsx8(FormatButtons, {}),
-  insert: /* @__PURE__ */ jsx8(InsertButtons, {}),
-  history: /* @__PURE__ */ jsx8(HistoryButtons, {})
+  format: /* @__PURE__ */ jsx10(FormatButtons, {}),
+  insert: /* @__PURE__ */ jsx10(InsertButtons, {}),
+  history: /* @__PURE__ */ jsx10(HistoryButtons, {})
 };
 function EditorToolbar({
   children,
@@ -2792,7 +3004,7 @@ function EditorToolbar({
 }) {
   const { mode, readOnly } = useEditorContext();
   if (mode !== "edit-md" || readOnly) return null;
-  return /* @__PURE__ */ jsx8(Toolbar, { className, children });
+  return /* @__PURE__ */ jsx10(Toolbar, { className, children });
 }
 function MarkdownEditor({
   placeholder,
@@ -2801,10 +3013,10 @@ function MarkdownEditor({
   foldable = true,
   ...rootProps
 }) {
-  return /* @__PURE__ */ jsxs6(EditorRoot, { ...rootProps, children: [
-    toolbar === true && /* @__PURE__ */ jsx8(EditorToolbar, {}),
+  return /* @__PURE__ */ jsxs7(EditorRoot, { ...rootProps, children: [
+    toolbar === true && /* @__PURE__ */ jsx10(EditorToolbar, {}),
     typeof toolbar === "function" && toolbar(DEFAULT_ITEMS),
-    /* @__PURE__ */ jsx8(EditorContent, { placeholder, foldable, children: outline && /* @__PURE__ */ jsx8(OutlinePlugin, {}) })
+    /* @__PURE__ */ jsx10(EditorContent, { placeholder, foldable, children: outline && /* @__PURE__ */ jsx10(OutlinePlugin, {}) })
   ] });
 }
 MarkdownEditor.Root = EditorRoot;
@@ -2832,7 +3044,11 @@ var DRAWING_DATA_JSON_SCHEMA = {
     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",
@@ -2930,8 +3146,11 @@ var DRAWING_DATA_JSON_SCHEMA = {
 export {
   $createDrawingNode,
   $createFrontmatterNode,
+  $getSelectedTable,
+  $getTableWidth,
   $isDrawingNode,
   $isFrontmatterNode,
+  $setTableWidth,
   DRAWING,
   DRAWING_DATA_JSON_SCHEMA,
   DrawingNode,
@@ -2942,6 +3161,7 @@ export {
   InsertButtons,
   MarkdownEditor_default as MarkdownEditor,
   TABLE,
+  TABLE_WIDTH_MARKER,
   Toolbar,
   ToolbarButton,
   ToolbarDivider,