@zuilib/text-editor 0.5.0 → 0.7.0

package/dist/index.js

@@ -1,8 +1,6 @@
 // src/EditorRoot.tsx
 import {
-  createContext,
   useCallback as useCallback2,
-  useContext,
   useEffect as useEffect8,
   useMemo as useMemo2,
   useRef as useRef5,
@@ -308,6 +306,18 @@ import { $getNodeByKey as $getNodeByKey2 } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 
+// src/drawing/focusCommand.ts
+import { createCommand } from "lexical";
+var DRAWING_FOCUS_COMMAND = createCommand(
+  "DRAWING_FOCUS_COMMAND"
+);
+
+// src/blockWidth.ts
+var BLOCK_WIDTHS = ["full", "text", "content"];
+function isBlockWidth(value) {
+  return typeof value === "string" && BLOCK_WIDTHS.includes(value);
+}
+
 // src/drawing/types.ts
 var BOX_TYPES = [
   "rect",
@@ -393,8 +403,9 @@ function normalizeDrawingData(parsed) {
     version: 2,
     canvasHeight: Number.isFinite(height) && height >= MIN_CANVAS_HEIGHT ? height : DEFAULT_CANVAS_HEIGHT,
     ...Number.isFinite(canvasWidth) && canvasWidth >= 120 ? { canvasWidth } : {},
-    // `full` is the default and stays implicit so payloads stay compact
-    ...parsed.width === "content" ? { width: "content" } : {},
+    // `full` stays implicit unless the payload spells it out; unknown
+    // values (newer versions) are dropped rather than rejected
+    ...isBlockWidth(parsed.width) ? { width: parsed.width } : {},
     // Bindings to ids that don't exist (or aren't boxes) are dropped
     shapes: shapes.map((shape) => {
       if (!isConnectorType(shape.type)) return shape;
@@ -1641,7 +1652,6 @@ function PropertyBar({
 
 // src/drawing/canvas/SelectionOverlay.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var SELECTION_COLOR = "#6965db";
 var HANDLE = 7;
 function Handle({
   x,
@@ -1653,8 +1663,6 @@ function Handle({
 }) {
   const props = {
     className: "zui-drawing-handle",
-    fill: "#fff",
-    stroke: SELECTION_COLOR,
     strokeWidth: 1.5,
     style: { cursor },
     onPointerDown
@@ -1683,12 +1691,10 @@ function SelectionOverlay({
       ghosts.map(({ index, x, y }) => /* @__PURE__ */ jsx3(
         "circle",
         {
-          className: "zui-drawing-ghost",
+          className: "zui-drawing-handle zui-drawing-ghost",
           cx: x,
           cy: y,
           r: 4.5,
-          fill: "#fff",
-          stroke: SELECTION_COLOR,
           strokeWidth: 1.5,
           strokeDasharray: "2 2",
           style: { cursor: "copy" },
@@ -1784,7 +1790,7 @@ function SelectionFrame({ rect, pad }) {
       height: rect.h + pad * 2,
       rx: 6,
       fill: "none",
-      stroke: SELECTION_COLOR,
+      stroke: "currentColor",
       strokeWidth: 1,
       strokeDasharray: "5 4",
       pointerEvents: "none"
@@ -1815,7 +1821,7 @@ function GroupSelectionOverlay({
         height: r.h + 6,
         rx: 4,
         fill: "none",
-        stroke: SELECTION_COLOR,
+        stroke: "currentColor",
         strokeWidth: 1,
         opacity: 0.45
       },
@@ -1828,14 +1834,15 @@ function MarqueeOverlay({ rect }) {
   return /* @__PURE__ */ jsx3(
     "rect",
     {
+      className: "zui-drawing-selection",
       x: rect.x,
       y: rect.y,
       width: rect.w,
       height: rect.h,
       rx: 3,
-      fill: SELECTION_COLOR,
+      fill: "currentColor",
       fillOpacity: 0.08,
-      stroke: SELECTION_COLOR,
+      stroke: "currentColor",
       strokeWidth: 1,
       pointerEvents: "none"
     }
@@ -1989,7 +1996,6 @@ function BoxGeometry({
 // src/drawing/canvas/ShapeView.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 import { createElement } from "react";
-var FONT_FAMILY = "ui-sans-serif, system-ui, sans-serif";
 var CONNECTOR_FONT_SIZE = 12;
 var CONNECTOR_LABEL_MAX_WIDTH = 160;
 function slotLayout(shape) {
@@ -2025,7 +2031,6 @@ function BoxTexts({
   const mainStart = area.y + area.h / 2 - (mainLines.length - 1) * mainLineH / 2 + FONT_SIZE * 0.35;
   const common = {
     fill: shape.stroke,
-    fontFamily: FONT_FAMILY,
     textAnchor: "middle"
   };
   return /* @__PURE__ */ jsxs5("g", { children: [
@@ -2123,7 +2128,7 @@ function ConnectorLabel({
         width: size.w + 10,
         height: size.h + 6,
         rx: 5,
-        fill: "#ffffff",
+        className: "zui-drawing-label-plate",
         opacity: 0.94
       }
     ),
@@ -2134,7 +2139,6 @@ function ConnectorLabel({
         y: startY + i * lineH,
         fill: shape.stroke,
         fontSize: CONNECTOR_FONT_SIZE,
-        fontFamily: FONT_FAMILY,
         textAnchor: "middle",
         style: textStyle,
         children: line
@@ -2179,7 +2183,6 @@ function ShapeView({
       y: shape.y + FONT_SIZE,
       fill: shape.stroke,
       fontSize: FONT_SIZE,
-      fontFamily: FONT_FAMILY,
       style: { userSelect: "none", whiteSpace: "pre" },
       children: (shape.text ?? "").split("\n").map((line, i) => /* @__PURE__ */ jsx5("tspan", { x: shape.x, dy: i === 0 ? 0 : FONT_SIZE * LINE_HEIGHT, children: line }, i))
     }
@@ -2251,7 +2254,7 @@ function TextEditOverlay({
   }, []);
   const style = {
     color: shape.stroke,
-    fontFamily: FONT_FAMILY,
+    fontFamily: "var(--zui-drawing-font)",
     lineHeight: LINE_HEIGHT
   };
   if (shape.type === "text") {
@@ -2335,6 +2338,14 @@ var BLOCK_WIDTH_OPTIONS = [
       /* @__PURE__ */ jsx7("path", { d: "M6 10h8M8.5 7.5L6 10l2.5 2.5M11.5 7.5L14 10l-2.5 2.5" })
     ] })
   },
+  {
+    width: "text",
+    label: "Text width",
+    icon: /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx7("path", { d: "M3 4v12M17 4v12" }),
+      /* @__PURE__ */ jsx7("path", { d: "M6.5 7h7M6.5 10h7M6.5 13h4.5" })
+    ] })
+  },
   {
     width: "content",
     label: "Content width",
@@ -2482,6 +2493,11 @@ function DrawingToolbar({
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var MIN_HEIGHT = 120;
 var MAX_HEIGHT = 1200;
+var WIDTH_CLASS = {
+  full: "",
+  text: "is-text-width",
+  content: "is-content-width"
+};
 var MIN_CONTENT_WIDTH = 240;
 var CONTENT_WIDTH_PADDING = 40;
 var EMPTY_SET = /* @__PURE__ */ new Set();
@@ -2564,11 +2580,12 @@ function DrawingCanvas({ nodeKey, data }) {
   const commit = useCallback(
     (nextShapes, options) => {
       const nextWidth = options?.width ?? widthRef.current;
+      const explicitFull = options?.width === void 0 && data.width !== void 0;
       const payload = {
         version: 2,
         ...canvasWidth ? { canvasWidth } : {},
         canvasHeight: options?.height ?? heightRef.current,
-        ...nextWidth === "content" ? { width: "content" } : {},
+        ...nextWidth !== "full" || explicitFull ? { width: nextWidth } : {},
         shapes: nextShapes
       };
       const json = serializeDrawingData(payload);
@@ -2579,7 +2596,7 @@ function DrawingCanvas({ nodeKey, data }) {
         if ($isDrawingNode(node)) node.setData(payload);
       });
     },
-    [editor, nodeKey, canvasWidth]
+    [editor, nodeKey, canvasWidth, data.width]
   );
   const updateShapes = useCallback(
     (updater, options) => {
@@ -2965,8 +2982,13 @@ function DrawingCanvas({ nodeKey, data }) {
     "div",
     {
       ref: rootRef,
-      className: `zui-drawing-canvas ${width === "content" ? "is-content-width" : ""} ${isEditable ? "is-editable" : ""}`,
+      className: `zui-drawing-canvas ${WIDTH_CLASS[width]} ${isEditable ? "is-editable" : ""}`,
       tabIndex: isEditable ? 0 : void 0,
+      onFocus: () => editor.dispatchCommand(DRAWING_FOCUS_COMMAND, nodeKey),
+      onBlur: (e) => {
+        if (rootRef.current?.contains(e.relatedTarget)) return;
+        editor.dispatchCommand(DRAWING_FOCUS_COMMAND, null);
+      },
       children: [
         isEditable && /* @__PURE__ */ jsxs8("div", { className: "zui-drawing-toolbar", onPointerDown: (e) => e.stopPropagation(), children: [
           /* @__PURE__ */ jsx9(
@@ -2997,118 +3019,120 @@ function DrawingCanvas({ nodeKey, data }) {
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs8(
-          "svg",
-          {
-            ref: svgRef,
-            className: "zui-drawing-surface",
-            style: {
-              height: logicalWidth ? void 0 : canvasHeight,
-              width: logicalWidth ?? void 0,
-              maxWidth: "100%",
-              aspectRatio: logicalWidth ? `${logicalWidth} / ${canvasHeight}` : void 0,
-              cursor: canvasCursor
-            },
-            viewBox: logicalWidth ? `0 0 ${logicalWidth} ${canvasHeight}` : void 0,
-            preserveAspectRatio: "xMinYMin meet",
-            onPointerDown: handleBackgroundPointerDown,
-            onPointerMove: handlePointerMove,
-            onPointerUp: handlePointerUp,
-            onPointerCancel: handlePointerUp,
-            onDoubleClick: (e) => {
-              if (!isEditable) return;
-              const target = e.target.closest("[data-shape-id]");
-              const id = target?.getAttribute("data-shape-id");
-              const shape = id ? shapes.find((s) => s.id === id) : null;
-              if (!shape) return;
-              if (shape.type === "text" || isConnectorType(shape.type)) {
-                startTextEditing(shape.id, "text");
-              } else {
-                startTextEditing(shape.id, slotAt(shape, getPoint(e).y));
-              }
-            },
-            children: [
-              shapes.map((shape) => /* @__PURE__ */ jsxs8(
-                "g",
-                {
-                  "data-shape-id": shape.id,
-                  className: `zui-drawing-shape ${selectedIds.has(shape.id) ? "is-selected" : ""}`,
-                  style: { cursor: isEditable && tool === "select" ? "move" : void 0 },
-                  onPointerDown: (e) => handleShapePointerDown(e, shape),
-                  children: [
-                    /* @__PURE__ */ jsx9(HitArea, { shape, points: paths.get(shape.id) }),
-                    shape.id === editingText?.id && shape.type === "text" ? null : /* @__PURE__ */ jsx9(
-                      ShapeView,
-                      {
-                        shape,
-                        points: paths.get(shape.id),
-                        hideField: shape.id === editingText?.id ? editingText.field : null,
-                        showHints: isEditable && tool === "select" && single?.id === shape.id && shape.id !== editingText?.id
-                      }
-                    )
-                  ]
-                },
-                shape.id
-              )),
-              hoverBox && /* @__PURE__ */ jsx9(
-                "polygon",
-                {
-                  className: "zui-drawing-bind-target",
-                  points: boxOutline(hoverBox).map((p) => `${p.x},${p.y}`).join(" "),
-                  fill: SELECTION_COLOR,
-                  fillOpacity: 0.06,
-                  stroke: SELECTION_COLOR,
-                  strokeWidth: 2,
-                  strokeLinejoin: "round",
-                  pointerEvents: "none"
-                }
-              ),
-              single && isEditable && !editingText && /* @__PURE__ */ jsx9(
-                SelectionOverlay,
-                {
-                  shape: single,
-                  points: paths.get(single.id) ?? [],
-                  onHandlePointerDown: handleHandlePointerDown,
-                  onWaypointAdd: addWaypoint,
-                  onWaypointRemove: removeWaypoint
+        /* @__PURE__ */ jsxs8("div", { className: "zui-drawing-stage", children: [
+          /* @__PURE__ */ jsxs8(
+            "svg",
+            {
+              ref: svgRef,
+              className: "zui-drawing-surface",
+              style: {
+                height: logicalWidth ? void 0 : canvasHeight,
+                width: logicalWidth ?? void 0,
+                maxWidth: "100%",
+                aspectRatio: logicalWidth ? `${logicalWidth} / ${canvasHeight}` : void 0,
+                cursor: canvasCursor
+              },
+              viewBox: logicalWidth ? `0 0 ${logicalWidth} ${canvasHeight}` : void 0,
+              preserveAspectRatio: "xMinYMin meet",
+              onPointerDown: handleBackgroundPointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              onPointerCancel: handlePointerUp,
+              onDoubleClick: (e) => {
+                if (!isEditable) return;
+                const target = e.target.closest("[data-shape-id]");
+                const id = target?.getAttribute("data-shape-id");
+                const shape = id ? shapes.find((s) => s.id === id) : null;
+                if (!shape) return;
+                if (shape.type === "text" || isConnectorType(shape.type)) {
+                  startTextEditing(shape.id, "text");
+                } else {
+                  startTextEditing(shape.id, slotAt(shape, getPoint(e).y));
                 }
-              ),
-              selection.length > 1 && isEditable && /* @__PURE__ */ jsx9(GroupSelectionOverlay, { shapes: selection, paths }),
-              marquee && /* @__PURE__ */ jsx9(MarqueeOverlay, { rect: marqueeRect(marquee.origin, marquee.current) })
-            ]
-          }
-        ),
-        isEditable && shapes.length === 0 && /* @__PURE__ */ jsx9("div", { className: "zui-drawing-empty", "aria-hidden": "true", children: "Pick a shape above, then click or drag on the canvas" }),
-        editingShape && editingText && /* @__PURE__ */ jsx9(
-          "div",
-          {
-            className: "zui-drawing-overlay",
-            style: {
-              transform: `scale(${scale})`,
-              width: logicalWidth ?? void 0,
-              height: logicalWidth ? canvasHeight : void 0
-            },
-            children: /* @__PURE__ */ jsx9(
-              TextEditOverlay,
-              {
-                shape: editingShape,
-                field: editingText.field,
-                points: paths.get(editingShape.id),
-                onCommit: commitText
               },
-              `${editingShape.id}:${editingText.field}`
-            )
-          }
-        ),
-        isEditable && /* @__PURE__ */ jsx9(
-          HeightHandle,
-          {
-            height: canvasHeight,
-            scale,
-            onChange: setCanvasHeight,
-            onCommit: (h) => commit(shapesRef.current, { height: h })
-          }
-        )
+              children: [
+                shapes.map((shape) => /* @__PURE__ */ jsxs8(
+                  "g",
+                  {
+                    "data-shape-id": shape.id,
+                    className: `zui-drawing-shape ${selectedIds.has(shape.id) ? "is-selected" : ""}`,
+                    style: { cursor: isEditable && tool === "select" ? "move" : void 0 },
+                    onPointerDown: (e) => handleShapePointerDown(e, shape),
+                    children: [
+                      /* @__PURE__ */ jsx9(HitArea, { shape, points: paths.get(shape.id) }),
+                      shape.id === editingText?.id && shape.type === "text" ? null : /* @__PURE__ */ jsx9(
+                        ShapeView,
+                        {
+                          shape,
+                          points: paths.get(shape.id),
+                          hideField: shape.id === editingText?.id ? editingText.field : null,
+                          showHints: isEditable && tool === "select" && single?.id === shape.id && shape.id !== editingText?.id
+                        }
+                      )
+                    ]
+                  },
+                  shape.id
+                )),
+                hoverBox && /* @__PURE__ */ jsx9(
+                  "polygon",
+                  {
+                    className: "zui-drawing-selection zui-drawing-bind-target",
+                    points: boxOutline(hoverBox).map((p) => `${p.x},${p.y}`).join(" "),
+                    fill: "currentColor",
+                    fillOpacity: 0.06,
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    strokeLinejoin: "round",
+                    pointerEvents: "none"
+                  }
+                ),
+                single && isEditable && !editingText && /* @__PURE__ */ jsx9(
+                  SelectionOverlay,
+                  {
+                    shape: single,
+                    points: paths.get(single.id) ?? [],
+                    onHandlePointerDown: handleHandlePointerDown,
+                    onWaypointAdd: addWaypoint,
+                    onWaypointRemove: removeWaypoint
+                  }
+                ),
+                selection.length > 1 && isEditable && /* @__PURE__ */ jsx9(GroupSelectionOverlay, { shapes: selection, paths }),
+                marquee && /* @__PURE__ */ jsx9(MarqueeOverlay, { rect: marqueeRect(marquee.origin, marquee.current) })
+              ]
+            }
+          ),
+          isEditable && shapes.length === 0 && /* @__PURE__ */ jsx9("div", { className: "zui-drawing-empty", "aria-hidden": "true", children: "Pick a shape above, then click or drag on the canvas" }),
+          editingShape && editingText && /* @__PURE__ */ jsx9(
+            "div",
+            {
+              className: "zui-drawing-overlay",
+              style: {
+                transform: `scale(${scale})`,
+                width: logicalWidth ?? void 0,
+                height: logicalWidth ? canvasHeight : void 0
+              },
+              children: /* @__PURE__ */ jsx9(
+                TextEditOverlay,
+                {
+                  shape: editingShape,
+                  field: editingText.field,
+                  points: paths.get(editingShape.id),
+                  onCommit: commitText
+                },
+                `${editingShape.id}:${editingText.field}`
+              )
+            }
+          ),
+          isEditable && /* @__PURE__ */ jsx9(
+            HeightHandle,
+            {
+              height: canvasHeight,
+              scale,
+              onChange: setCanvasHeight,
+              onCommit: (h) => commit(shapesRef.current, { height: h })
+            }
+          )
+        ] })
       ]
     }
   );
@@ -3214,7 +3238,7 @@ function expandSkeleton(skeleton) {
     version: 2,
     ...skeleton.canvasWidth !== void 0 ? { canvasWidth: skeleton.canvasWidth } : {},
     canvasHeight: skeleton.canvasHeight ?? Math.max(MIN_AUTO_CANVAS_HEIGHT, Math.ceil(bottom + CANVAS_MARGIN)),
-    ...skeleton.width === "content" ? { width: "content" } : {},
+    ...skeleton.width !== void 0 ? { width: skeleton.width } : {},
     shapes
   });
 }
@@ -3418,7 +3442,7 @@ function normalizeSkeleton(raw) {
     direction: value.direction === "down" ? "down" : "right",
     ...canvasWidth !== void 0 ? { canvasWidth } : {},
     ...canvasHeight !== void 0 ? { canvasHeight } : {},
-    ...value.width === "content" ? { width: "content" } : {},
+    ...isBlockWidth(value.width) ? { width: value.width } : {},
     boxes,
     connectors,
     texts
@@ -3551,8 +3575,8 @@ var DRAWING_SKELETON_JSON_SCHEMA = {
       description: "Canvas height in px. Omit to fit the content"
     },
     width: {
-      enum: ["content"],
-      description: 'Block width: "content" fits the drawing to its shapes and left-aligns it with the text; omit to span the editor'
+      enum: ["full", "text", "content"],
+      description: 'Block width: "text" aligns the drawing with the text column (same as "full" unless the app sets a text measure); "content" fits the drawing to its shapes and left-aligns it with the text; omit to span the editor'
     },
     boxes: {
       type: "array",
@@ -3788,10 +3812,12 @@ var DEFAULT_TABLE_SETTINGS = {
   width: "full",
   density: "comfortable"
 };
+var BLOCK_BLEED_PROPERTY = "--zui-text-editor-block-bleed";
 var OPTION_DECLARATIONS = {
   width: {
     full: {},
-    content: { width: "auto", "table-layout": "auto" }
+    content: { width: "auto", "table-layout": "auto", [BLOCK_BLEED_PROPERTY]: "0px" },
+    text: { [BLOCK_BLEED_PROPERTY]: "0px" }
   },
   density: {
     comfortable: {},
@@ -3806,6 +3832,7 @@ var OPTION_DECLARATIONS = {
   }
 };
 var SETTING_KEYS = Object.keys(OPTION_DECLARATIONS);
+var EXPLICIT_WIDTH_PROPERTY = "--zui-table-width";
 function parseStyle(style) {
   const declarations = /* @__PURE__ */ new Map();
   for (const part of style.split(";")) {
@@ -3848,14 +3875,22 @@ function $getTableSettings(table) {
     density: readSetting(declarations, "density")
   };
 }
-function $setTableSettings(table, settings) {
+function $setTableSettings(table, settings, options = {}) {
   const declarations = parseStyle(table.getStyle());
   for (const key of SETTING_KEYS) {
     const option = settings[key];
     if (option !== void 0) writeSetting(declarations, key, option);
   }
+  if (settings.width !== void 0) {
+    if (options.explicitWidth) declarations.set(EXPLICIT_WIDTH_PROPERTY, settings.width);
+    else declarations.delete(EXPLICIT_WIDTH_PROPERTY);
+  }
   table.setStyle(serializeStyle(declarations));
 }
+function $isTableWidthExplicit(table) {
+  const declarations = parseStyle(table.getStyle());
+  return declarations.get(EXPLICIT_WIDTH_PROPERTY) === readSetting(declarations, "width");
+}
 function $getTableWidth(table) {
   return $getTableSettings(table).width;
 }
@@ -3890,16 +3925,19 @@ function parseTableSettingsMarker(text) {
   const match = MARKER_REG_EXP.exec(text);
   if (!match) return null;
   const settings = {};
+  let recognised = false;
   for (const pair of match[1].split(";")) {
     const [key, value] = pair.split(":").map((s) => s.trim());
+    if (key !== "width" && key !== "density") continue;
+    recognised = true;
     if (key === "width" && isOption("width", value)) settings.width = value;
     if (key === "density" && isOption("density", value)) settings.density = value;
   }
-  return Object.keys(settings).length > 0 ? settings : null;
+  return recognised ? settings : null;
 }
-function formatTableSettingsMarker(settings) {
+function formatTableSettingsMarker(settings, options = {}) {
   const pairs = SETTING_KEYS.filter(
-    (key) => settings[key] !== DEFAULT_TABLE_SETTINGS[key]
+    (key) => settings[key] !== DEFAULT_TABLE_SETTINGS[key] || key === "width" && options.explicitWidth
   ).map((key) => `${key}: ${settings[key]}`);
   return pairs.length > 0 ? `<!-- ${pairs.join("; ")} -->` : null;
 }
@@ -3932,7 +3970,9 @@ var TABLE = {
   export: (node) => {
     if (!$isTableNode2(node)) return null;
     const output = [];
-    const marker = formatTableSettingsMarker($getTableSettings(node));
+    const marker = formatTableSettingsMarker($getTableSettings(node), {
+      explicitWidth: $isTableWidthExplicit(node)
+    });
     if (marker) output.push(marker);
     for (const row of node.getChildren()) {
       if (!$isTableRowNode(row)) continue;
@@ -4001,7 +4041,7 @@ var TABLE = {
     } else {
       const markerSettings = $getMarkerSettings(previousSibling);
       if (markerSettings) {
-        $setTableSettings(table, markerSettings);
+        $setTableSettings(table, markerSettings, { explicitWidth: true });
         previousSibling?.remove();
       }
       parentNode.replace(table);
@@ -4016,14 +4056,14 @@ var editorTheme = {
   ltr: "text-left",
   rtl: "text-right",
   placeholder: "text-muted-foreground opacity-50",
-  paragraph: "mb-2",
+  paragraph: "zui-paragraph mb-2",
   heading: {
-    h1: "text-4xl font-bold mb-4",
-    h2: "text-3xl font-bold mb-3",
-    h3: "text-2xl font-bold mb-2",
-    h4: "text-xl font-bold mb-2",
-    h5: "text-lg font-bold mb-1",
-    h6: "text-base font-bold mb-1"
+    h1: "zui-heading zui-heading-1 text-4xl font-bold mb-4",
+    h2: "zui-heading zui-heading-2 text-3xl font-bold mb-3",
+    h3: "zui-heading zui-heading-3 text-2xl font-bold mb-2",
+    h4: "zui-heading zui-heading-4 text-xl font-bold mb-2",
+    h5: "zui-heading zui-heading-5 text-lg font-bold mb-1",
+    h6: "zui-heading zui-heading-6 text-base font-bold mb-1"
   },
   list: {
     listitem: "ml-8",
@@ -4033,8 +4073,8 @@ var editorTheme = {
       listitem: "ml-8"
     },
     checklist: "zui-checklist",
-    ol: "list-decimal ml-4",
-    ul: "list-disc ml-4"
+    ol: "zui-list zui-list-ordered list-decimal ml-4",
+    ul: "zui-list zui-list-unordered list-disc ml-4"
   },
   link: "text-primary underline hover:opacity-80 cursor-pointer",
   text: {
@@ -4047,7 +4087,7 @@ var editorTheme = {
     underline: "underline",
     underlineStrikethrough: "underline line-through"
   },
-  code: "bg-muted rounded-md p-4 font-mono text-sm block my-2 overflow-x-auto",
+  code: "zui-code bg-muted rounded-md p-4 font-mono text-sm block my-2 overflow-x-auto",
   codeHighlight: {
     atrule: "text-blue-500",
     attr: "text-yellow-500",
@@ -4080,7 +4120,7 @@ var editorTheme = {
     url: "text-blue-500",
     variable: "text-blue-500"
   },
-  quote: "border-l-4 border-border pl-4 italic",
+  quote: "zui-quote border-l-4 border-border pl-4 italic",
   frontmatter: "zui-frontmatter",
   table: "zui-table",
   tableCell: "zui-table-cell",
@@ -4090,10 +4130,8 @@ var editorTheme = {
   drawing: "zui-drawing"
 };
 
-// src/EditorRoot.tsx
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-var SYNC_TRANSFORMERS = [FRONTMATTER, DRAWING, DIAGRAM, CHECK_LIST, TABLE, ...TRANSFORMERS2];
-var SHORTCUT_TRANSFORMERS = [TABLE, ...TRANSFORMERS2.filter((t) => t !== CODE)];
+// src/editorContext.ts
+import { createContext, useContext } from "react";
 var EditorContext = createContext(null);
 function useEditorContext() {
   const ctx = useContext(EditorContext);
@@ -4104,6 +4142,12 @@ function useEditorContext() {
   }
   return ctx;
 }
+
+// src/EditorRoot.tsx
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var SYNC_TRANSFORMERS = [FRONTMATTER, DRAWING, DIAGRAM, CHECK_LIST, TABLE, ...TRANSFORMERS2];
+var SHORTCUT_TRANSFORMERS = [TABLE, ...TRANSFORMERS2.filter((t) => t !== CODE)];
+var NO_DEFAULT_BLOCK_WIDTH = {};
 function onError(error) {
   console.error(error);
 }
@@ -4136,6 +4180,8 @@ function EditorRoot({
   className,
   mode = "edit-md",
   autoFocus = false,
+  measure,
+  defaultBlockWidth = NO_DEFAULT_BLOCK_WIDTH,
   children
 }) {
   const latestValueRef = useRef5(value ?? "");
@@ -4176,12 +4222,17 @@ function EditorRoot({
       readOnly,
       autoFocus,
       rawValue: value ?? "",
-      onRawChange: handleChange
+      onRawChange: handleChange,
+      defaultBlockWidth
     }),
-    [mode, readOnly, autoFocus, value, handleChange]
+    [mode, readOnly, autoFocus, value, handleChange, defaultBlockWidth]
   );
   const isRaw = mode === "edit-raw";
-  return /* @__PURE__ */ jsx11(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx11(EditorContext.Provider, { value: context, children: /* @__PURE__ */ jsxs9("div", { className: `zui-text-editor ${className ?? ""}`, children: [
+  const rootStyle = useMemo2(
+    () => measure !== void 0 ? { "--zui-text-editor-measure": measure } : void 0,
+    [measure]
+  );
+  return /* @__PURE__ */ jsx11(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx11(EditorContext.Provider, { value: context, children: /* @__PURE__ */ jsxs9("div", { className: `zui-text-editor ${className ?? ""}`, style: rootStyle, children: [
     children,
     !isRaw && /* @__PURE__ */ jsxs9(Fragment3, { children: [
       /* @__PURE__ */ jsx11(
@@ -4355,8 +4406,9 @@ import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexica
 import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
 
 // src/useMarkdownEditor.ts
-import { useCallback as useCallback4, useEffect as useEffect10, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect10, useRef as useRef7, useState as useState6 } from "react";
 import {
+  $getNodeByKey as $getNodeByKey4,
   $getSelection as $getSelection4,
   $isRangeSelection as $isRangeSelection4,
   CAN_REDO_COMMAND,
@@ -4376,20 +4428,29 @@ var TRACKED_FORMATS = [
   "strikethrough",
   "code"
 ];
+function $readDrawingWidth(key) {
+  if (key === null) return null;
+  const node = $getNodeByKey4(key);
+  return $isDrawingNode(node) ? node.getData().width ?? "full" : null;
+}
 function useMarkdownEditor() {
   const [editor] = useLexicalComposerContext8();
+  const { defaultBlockWidth } = useEditorContext();
   const [activeFormats, setActiveFormats] = useState6(
     /* @__PURE__ */ new Set()
   );
   const [canUndo, setCanUndo] = useState6(false);
   const [canRedo, setCanRedo] = useState6(false);
   const [tableSettings, setTableSettingsState] = useState6(null);
+  const activeDrawingRef = useRef7(null);
+  const [drawingWidth, setDrawingWidth] = useState6(null);
   useEffect10(
     () => mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
           const table = $getSelectedTable();
           setTableSettingsState(table ? $getTableSettings(table) : null);
+          setDrawingWidth($readDrawingWidth(activeDrawingRef.current));
           const selection = $getSelection4();
           if (!$isRangeSelection4(selection)) {
             setActiveFormats(/* @__PURE__ */ new Set());
@@ -4402,6 +4463,15 @@ function useMarkdownEditor() {
           setActiveFormats(next);
         });
       }),
+      editor.registerCommand(
+        DRAWING_FOCUS_COMMAND,
+        (key) => {
+          activeDrawingRef.current = key;
+          setDrawingWidth(editor.getEditorState().read(() => $readDrawingWidth(key)));
+          return false;
+        },
+        COMMAND_PRIORITY_LOW2
+      ),
       editor.registerCommand(
         CAN_UNDO_COMMAND,
         (payload) => {
@@ -4428,20 +4498,36 @@ function useMarkdownEditor() {
     [editor]
   );
   const insertTable = useCallback4(
-    ({ rows = 3, columns = 3 } = {}) => {
+    ({
+      rows = 3,
+      columns = 3,
+      width = defaultBlockWidth.table
+    } = {}) => {
+      const before = editor.getEditorState().read(() => $getSelectedTable()?.getKey());
       editor.dispatchCommand(INSERT_TABLE_COMMAND, {
         columns: String(columns),
         rows: String(rows),
         includeHeaders: { rows: true, columns: false }
       });
+      if (width === void 0) return;
+      editor.update(() => {
+        const table = $getSelectedTable();
+        if (table && table.getKey() !== before) {
+          $setTableSettings(table, { width }, { explicitWidth: true });
+        }
+      });
     },
-    [editor]
+    [editor, defaultBlockWidth.table]
+  );
+  const insertDrawing = useCallback4(
+    ({ width = defaultBlockWidth.drawing } = {}) => {
+      editor.update(() => {
+        const data = width === void 0 ? EMPTY_DRAWING : { version: 2, canvasHeight: EMPTY_DRAWING.canvasHeight, width, shapes: [] };
+        $insertNodeToNearestRoot($createDrawingNode(serializeDrawingData(data)));
+      });
+    },
+    [editor, defaultBlockWidth.drawing]
   );
-  const insertDrawing = useCallback4(() => {
-    editor.update(() => {
-      $insertNodeToNearestRoot($createDrawingNode());
-    });
-  }, [editor]);
   const updateTableSettings = useCallback4(
     (settings) => {
       editor.update(() => {
@@ -4459,6 +4545,22 @@ function useMarkdownEditor() {
     (density) => updateTableSettings({ density }),
     [updateTableSettings]
   );
+  const setBlockWidth = useCallback4(
+    (width) => {
+      const key = activeDrawingRef.current;
+      if (key === null) {
+        updateTableSettings({ width });
+        return;
+      }
+      editor.update(() => {
+        const node = $getNodeByKey4(key);
+        if (!$isDrawingNode(node)) return;
+        const { width: _previous, ...data } = node.getData();
+        node.setData(width === "full" ? data : { ...data, width });
+      });
+    },
+    [editor, updateTableSettings]
+  );
   const undo = useCallback4(() => {
     editor.dispatchCommand(UNDO_COMMAND, void 0);
   }, [editor]);
@@ -4471,6 +4573,8 @@ function useMarkdownEditor() {
     toggleFormat,
     insertTable,
     insertDrawing,
+    blockWidth: drawingWidth ?? tableSettings?.width ?? null,
+    setBlockWidth,
     tableWidth: tableSettings?.width ?? null,
     setTableWidth,
     tableDensity: tableSettings?.density ?? null,
@@ -4641,14 +4745,18 @@ function Icon3({ children }) {
 function TableSettingsPlugin() {
   const [editor] = useLexicalComposerContext9();
   const isEditable = useLexicalEditable2();
-  const { tableWidth, setTableWidth, tableDensity, setTableDensity } = useMarkdownEditor();
   const [anchor, setAnchor] = useState7(null);
+  const [settings, setSettings] = useState7(null);
   const sync = useCallback5(() => {
-    const tableKey = editor.getEditorState().read(() => $getSelectedTable()?.getKey());
-    const element = tableKey ? editor.getElementByKey(tableKey) : null;
+    const table = editor.getEditorState().read(() => {
+      const node = $getSelectedTable();
+      return node ? { key: node.getKey(), settings: $getTableSettings(node) } : null;
+    });
+    const element = table ? editor.getElementByKey(table.key) : null;
     const main = editor.getRootElement()?.parentElement;
-    if (!element || !main) {
+    if (!table || !element || !main) {
       setAnchor(null);
+      setSettings(null);
       return;
     }
     const rect = element.getBoundingClientRect();
@@ -4657,6 +4765,7 @@ function TableSettingsPlugin() {
       top: rect.top - mainRect.top,
       right: mainRect.right - rect.right + 8
     });
+    setSettings(table.settings);
   }, [editor]);
   useEffect11(() => {
     sync();
@@ -4669,7 +4778,16 @@ function TableSettingsPlugin() {
       observer?.disconnect();
     };
   }, [editor, sync]);
-  if (!isEditable || !anchor || !tableWidth || !tableDensity) return null;
+  const update = useCallback5(
+    (next) => {
+      editor.update(() => {
+        const table = $getSelectedTable();
+        if (table) $setTableSettings(table, next);
+      });
+    },
+    [editor]
+  );
+  if (!isEditable || !anchor || !settings) return null;
   return /* @__PURE__ */ jsxs11(
     "div",
     {
@@ -4682,8 +4800,8 @@ function TableSettingsPlugin() {
           ToolbarButton,
           {
             label,
-            active: tableWidth === width,
-            onClick: () => setTableWidth(width),
+            active: settings.width === width,
+            onClick: () => update({ width }),
             children: /* @__PURE__ */ jsx14(Icon3, { children: icon })
           },
           width
@@ -4693,8 +4811,8 @@ function TableSettingsPlugin() {
           ToolbarButton,
           {
             label,
-            active: tableDensity === density,
-            onClick: () => setTableDensity(density),
+            active: settings.density === density,
+            onClick: () => update({ density }),
             children: /* @__PURE__ */ jsx14(Icon3, { children: icon })
           },
           density
@@ -4923,8 +5041,8 @@ var DRAWING_DATA_JSON_SCHEMA = {
       description: "Optional logical canvas width in pixels. When set, the drawing is scaled down to fit narrower layouts (SVG viewBox) so coordinates can assume this width. When omitted the canvas is fluid and coordinates are CSS pixels."
     },
     width: {
-      enum: ["full", "content"],
-      description: `Block width: "full" (default, omit it) spans the editor; "content" fits the shapes' horizontal extent and left-aligns with the text`
+      enum: ["full", "text", "content"],
+      description: `Block width: "full" (default, omit it) spans the editor; "text" aligns the block with the text column (same as "full" unless the app sets a text measure); "content" fits the shapes' horizontal extent and left-aligns with the text`
     },
     shapes: {
       type: "array",
@@ -5067,9 +5185,11 @@ export {
   $getTableWidth,
   $isDrawingNode,
   $isFrontmatterNode,
+  $isTableWidthExplicit,
   $setTableDensity,
   $setTableSettings,
   $setTableWidth,
+  BLOCK_WIDTHS,
   BOX_DEFINITIONS,
   BOX_TYPES,
   COLOR_PRESETS,
@@ -5105,6 +5225,7 @@ export {
   findBoxAt,
   fixedPointFor,
   formatTableSettingsMarker,
+  isBlockWidth,
   isDrawingSkeleton,
   makeBinding,
   normalizeDrawingData,