@zuilib/text-editor 0.8.0 → 0.10.0

package/dist/index.js

@@ -1,7 +1,7 @@
 // src/EditorRoot.tsx
 import {
   useCallback as useCallback2,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useMemo as useMemo2,
   useRef as useRef5,
   useState as useState4
@@ -15,7 +15,7 @@ import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPl
 import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
 import { CHECK_LIST, CODE as CODE2, TRANSFORMERS as TRANSFORMERS2 } from "@lexical/markdown";
-import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
+import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
 import { CodeHighlightNode, CodeNode as CodeNode2 } from "@lexical/code";
@@ -1607,6 +1607,304 @@ function MarkdownSyncPlugin({
   return null;
 }
 
+// src/plugins/TableRowShortcutsPlugin.tsx
+import { useEffect as useEffect5 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
+import { $getSelection as $getSelection4, $isRangeSelection as $isRangeSelection4, COMMAND_PRIORITY_HIGH, KEY_DOWN_COMMAND } from "lexical";
+import { $isTableRowNode as $isTableRowNode2 } from "@lexical/table";
+
+// src/transformers/tableSettings.ts
+import {
+  $getNodeByKey as $getNodeByKey2,
+  $getSelection as $getSelection2,
+  $isRangeSelection as $isRangeSelection2
+} from "lexical";
+import { $findMatchingParent } from "@lexical/utils";
+import { $isTableNode, $isTableSelection } from "@lexical/table";
+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", [BLOCK_BLEED_PROPERTY]: "0px" },
+    text: { [BLOCK_BLEED_PROPERTY]: "0px" }
+  },
+  density: {
+    comfortable: {},
+    compact: {
+      "--zui-table-cell-padding": "0.25rem 0.5rem",
+      "--zui-table-font-size": "0.8125rem"
+    },
+    spacious: {
+      "--zui-table-cell-padding": "0.875rem 1rem",
+      "--zui-table-font-size": "0.9375rem"
+    }
+  }
+};
+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(";")) {
+    const index = part.indexOf(":");
+    if (index === -1) continue;
+    const key = part.slice(0, index).trim();
+    const value = part.slice(index + 1).trim();
+    if (key && value) declarations.set(key, value);
+  }
+  return declarations;
+}
+function serializeStyle(declarations) {
+  return [...declarations].map(([key, value]) => `${key}: ${value}`).join("; ");
+}
+function optionsOf(setting) {
+  return Object.entries(OPTION_DECLARATIONS[setting]);
+}
+function readSetting(declarations, setting) {
+  for (const [option, decls] of optionsOf(setting)) {
+    const entries = Object.entries(decls);
+    if (entries.length === 0) continue;
+    if (entries.every(([key, value]) => declarations.get(key) === value)) {
+      return option;
+    }
+  }
+  return DEFAULT_TABLE_SETTINGS[setting];
+}
+function writeSetting(declarations, setting, option) {
+  for (const [, decls] of optionsOf(setting)) {
+    for (const key of Object.keys(decls)) declarations.delete(key);
+  }
+  for (const [key, value] of Object.entries(OPTION_DECLARATIONS[setting][option])) {
+    declarations.set(key, value);
+  }
+}
+function $getTableSettings(table) {
+  const declarations = parseStyle(table.getStyle());
+  return {
+    width: readSetting(declarations, "width"),
+    density: readSetting(declarations, "density")
+  };
+}
+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;
+}
+function $setTableWidth(table, width) {
+  $setTableSettings(table, { width });
+}
+function $getTableDensity(table) {
+  return $getTableSettings(table).density;
+}
+function $setTableDensity(table, density) {
+  $setTableSettings(table, { density });
+}
+function $getSelectedTable() {
+  const selection = $getSelection2();
+  if ($isTableSelection(selection)) {
+    const node = $getNodeByKey2(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;
+}
+var MARKER_REG_EXP = /^<!--\s*([a-z]+\s*:\s*[a-z]+(?:\s*;\s*[a-z]+\s*:\s*[a-z]+)*)\s*;?\s*-->\s*$/;
+function isOption(setting, value) {
+  return value in OPTION_DECLARATIONS[setting];
+}
+var TABLE_WIDTH_MARKER = "<!-- width: content -->";
+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 recognised ? settings : null;
+}
+function formatTableSettingsMarker(settings, options = {}) {
+  const pairs = SETTING_KEYS.filter(
+    (key) => settings[key] !== DEFAULT_TABLE_SETTINGS[key] || key === "width" && options.explicitWidth
+  ).map((key) => `${key}: ${settings[key]}`);
+  return pairs.length > 0 ? `<!-- ${pairs.join("; ")} -->` : null;
+}
+
+// src/transformers/tableRows.ts
+import {
+  $createParagraphNode as $createParagraphNode2,
+  $getNodeByKey as $getNodeByKey3,
+  $getSelection as $getSelection3,
+  $isRangeSelection as $isRangeSelection3
+} from "lexical";
+import { $findMatchingParent as $findMatchingParent2 } from "@lexical/utils";
+import {
+  $createTableCellNode,
+  $createTableRowNode,
+  $isTableCellNode,
+  $isTableNode as $isTableNode2,
+  $isTableRowNode,
+  $isTableSelection as $isTableSelection2,
+  TableCellHeaderStates
+} from "@lexical/table";
+function $rows(table) {
+  return table.getChildren().filter($isTableRowNode);
+}
+function $cells(row) {
+  return row.getChildren().filter($isTableCellNode);
+}
+function $isHeaderRow(row) {
+  const cells = row ? $cells(row) : [];
+  return cells.length > 0 && cells.every((cell) => cell.hasHeaderState(TableCellHeaderStates.ROW));
+}
+function $getSelectedTableCell() {
+  const selection = $getSelection3();
+  let node = null;
+  if ($isTableSelection2(selection)) node = $getNodeByKey3(selection.anchor.key);
+  else if ($isRangeSelection3(selection)) node = selection.anchor.getNode();
+  if (!node) return null;
+  const cell = $findMatchingParent2(node, (n2) => $isTableCellNode(n2));
+  return $isTableCellNode(cell) ? cell : null;
+}
+function $getTableRowPosition() {
+  const cell = $getSelectedTableCell();
+  const row = cell?.getParent();
+  const table = row?.getParent();
+  if (!cell || !$isTableRowNode(row) || !$isTableNode2(table)) return null;
+  const rows = $rows(table);
+  return {
+    index: rows.indexOf(row),
+    column: $cells(row).indexOf(cell),
+    count: rows.length,
+    hasHeader: $isHeaderRow(rows[0])
+  };
+}
+function insertableRowIndices(position) {
+  const indices = [];
+  for (let i = position.hasHeader ? 1 : 0; i <= position.count; i++) indices.push(i);
+  return indices;
+}
+function canDeleteRow(position) {
+  return position.count > 1;
+}
+function $selectCell(cell) {
+  cell?.selectStart();
+}
+function $insertTableRowAt(table, index, column = 0) {
+  const rows = $rows(table);
+  const minIndex = $isHeaderRow(rows[0]) ? 1 : 0;
+  const at = Math.max(minIndex, Math.min(index, rows.length));
+  const reference = rows[Math.max(0, at - 1)] ?? rows[0];
+  const referenceCells = reference ? $cells(reference) : [];
+  const row = $createTableRowNode();
+  for (const cell of referenceCells) {
+    const columnHeader = cell.hasHeaderState(TableCellHeaderStates.COLUMN) ? TableCellHeaderStates.COLUMN : TableCellHeaderStates.NO_STATUS;
+    row.append($createTableCellNode(columnHeader).append($createParagraphNode2()));
+  }
+  if (referenceCells.length === 0) {
+    row.append($createTableCellNode(TableCellHeaderStates.NO_STATUS).append($createParagraphNode2()));
+  }
+  if (at >= rows.length) table.append(row);
+  else rows[at].insertBefore(row);
+  const cells = $cells(row);
+  $selectCell(cells[Math.min(column, cells.length - 1)]);
+  return row;
+}
+function $deleteTableRowAt(table, index, column = 0) {
+  const rows = $rows(table);
+  const row = rows[index];
+  if (!row || rows.length < 2) return false;
+  const wasHeader = index === 0 && $isHeaderRow(row);
+  row.remove();
+  const remaining = $rows(table);
+  if (wasHeader) {
+    for (const cell of $cells(remaining[0])) {
+      cell.setHeaderStyles(TableCellHeaderStates.ROW, TableCellHeaderStates.ROW);
+    }
+  }
+  const target = remaining[Math.min(index, remaining.length - 1)];
+  const cells = $cells(target);
+  $selectCell(cells[Math.min(column, cells.length - 1)]);
+  return true;
+}
+function $insertTableRowNear(table, position) {
+  const at = $getTableRowPosition();
+  if (!at) return null;
+  return $insertTableRowAt(table, position === "below" ? at.index + 1 : at.index, at.column);
+}
+function $deleteSelectedTableRow(table) {
+  const at = $getTableRowPosition();
+  if (!at || !canDeleteRow(at)) return false;
+  return $deleteTableRowAt(table, at.index, at.column);
+}
+
+// src/plugins/TableRowShortcutsPlugin.tsx
+function shortcutFor(event) {
+  const mod = event.metaKey || event.ctrlKey;
+  if (event.altKey) return null;
+  if (event.key === "Enter" && mod) return event.shiftKey ? "insert-above" : "insert-below";
+  if (event.key === "Backspace" && mod && event.shiftKey) return "delete";
+  if (event.key === "Tab" && !mod && !event.shiftKey) return "tab";
+  return null;
+}
+function TableRowShortcutsPlugin() {
+  const [editor] = useLexicalComposerContext5();
+  useEffect5(
+    () => editor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event) => {
+        const shortcut = shortcutFor(event);
+        if (!shortcut) return false;
+        const table = $getSelectedTable();
+        const position = $getTableRowPosition();
+        if (!table || !position) return false;
+        if (shortcut === "tab") {
+          const selection = $getSelection4();
+          const firstRow = table.getFirstChild();
+          const columns = $isTableRowNode2(firstRow) ? firstRow.getChildrenSize() : 0;
+          const isLastCell = position.index === position.count - 1 && position.column === columns - 1;
+          if (!isLastCell || !$isRangeSelection4(selection) || !selection.isCollapsed()) return false;
+          event.preventDefault();
+          $insertTableRowAt(table, position.count);
+          return true;
+        }
+        event.preventDefault();
+        if (shortcut === "delete") $deleteSelectedTableRow(table);
+        else $insertTableRowNear(table, shortcut === "insert-above" ? "above" : "below");
+        return true;
+      },
+      COMMAND_PRIORITY_HIGH
+    ),
+    [editor]
+  );
+  return null;
+}
+
 // src/nodes/FrontmatterNode.ts
 import {
   $applyNodeReplacement,
@@ -1696,15 +1994,29 @@ import {
 // src/drawing/canvas/DrawingCanvas.tsx
 import {
   useCallback,
-  useEffect as useEffect7,
+  useEffect as useEffect8,
   useMemo,
   useRef as useRef4,
-  useState as useState3
+  useState as useState3,
+  useContext as useContext2
 } from "react";
-import { $getNodeByKey as $getNodeByKey2 } from "lexical";
-import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
+import { $getNodeByKey as $getNodeByKey4 } from "lexical";
+import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 
+// src/editorContext.ts
+import { createContext, useContext } from "react";
+var EditorContext = createContext(null);
+function useEditorContext() {
+  const ctx = useContext(EditorContext);
+  if (!ctx) {
+    throw new Error(
+      "@zuilib/text-editor: this component must be rendered inside <MarkdownEditor> or <MarkdownEditor.Root>"
+    );
+  }
+  return ctx;
+}
+
 // src/drawing/focusCommand.ts
 import { createCommand } from "lexical";
 var DRAWING_FOCUS_COMMAND = createCommand(
@@ -2138,23 +2450,23 @@ var BOX_DEFINITIONS = {
     defaultFill: "#ffec99",
     outline: (s) => {
       const b = bbox(s);
-      const f = NOTE_FOLD(b);
+      const f3 = NOTE_FOLD(b);
       return [
         { x: b.x, y: b.y },
         { x: b.x + b.w, y: b.y },
-        { x: b.x + b.w, y: b.y + b.h - f },
-        { x: b.x + b.w - f, y: b.y + b.h },
+        { x: b.x + b.w, y: b.y + b.h - f3 },
+        { x: b.x + b.w - f3, y: b.y + b.h },
         { x: b.x, y: b.y + b.h }
       ];
     },
     textArea: (s) => {
       const b = bbox(s);
-      const f = NOTE_FOLD(b);
+      const f3 = NOTE_FOLD(b);
       return {
         x: b.x + BOX_TEXT_PADDING,
         y: b.y + BOX_TEXT_PADDING,
         w: Math.max(b.w - BOX_TEXT_PADDING * 2, 20),
-        h: Math.max(b.h - BOX_TEXT_PADDING * 2 - f / 2, 10)
+        h: Math.max(b.h - BOX_TEXT_PADDING * 2 - f3 / 2, 10)
       };
     }
   },
@@ -2656,13 +2968,17 @@ function segmentAngleAt(points, index, backward) {
   }
   return 0;
 }
-function arrowHeadPath(tip, angle, length) {
+function arrowHeadPoints(tip, angle, length) {
   const spread = Math.PI / 7;
-  const hx1 = tip.x - length * Math.cos(angle - spread);
-  const hy1 = tip.y - length * Math.sin(angle - spread);
-  const hx2 = tip.x - length * Math.cos(angle + spread);
-  const hy2 = tip.y - length * Math.sin(angle + spread);
-  return `M ${fmt(hx1)} ${fmt(hy1)} L ${fmt(tip.x)} ${fmt(tip.y)} L ${fmt(hx2)} ${fmt(hy2)}`;
+  return [
+    { x: tip.x - length * Math.cos(angle - spread), y: tip.y - length * Math.sin(angle - spread) },
+    tip,
+    { x: tip.x - length * Math.cos(angle + spread), y: tip.y - length * Math.sin(angle + spread) }
+  ];
+}
+function arrowHeadPath(tip, angle, length) {
+  const [a, t, b] = arrowHeadPoints(tip, angle, length);
+  return `M ${fmt(a.x)} ${fmt(a.y)} L ${fmt(t.x)} ${fmt(t.y)} L ${fmt(b.x)} ${fmt(b.y)}`;
 }
 function pathLength(points) {
   let total = 0;
@@ -3774,7 +4090,7 @@ function BoxGeometry({
         }
       );
     case "note": {
-      const f = NOTE_FOLD(b);
+      const f3 = NOTE_FOLD(b);
       const r = b.x + b.w;
       const btm = b.y + b.h;
       return /* @__PURE__ */ jsxs4("g", { children: [
@@ -3782,7 +4098,7 @@ function BoxGeometry({
           "path",
           {
             ...stroke,
-            d: `M ${n(b.x)} ${n(b.y)} H ${n(r)} V ${n(btm - f)} L ${n(r - f)} ${n(btm)} H ${n(b.x)} Z`,
+            d: `M ${n(b.x)} ${n(b.y)} H ${n(r)} V ${n(btm - f3)} L ${n(r - f3)} ${n(btm)} H ${n(b.x)} Z`,
             fill
           }
         ),
@@ -3790,7 +4106,7 @@ function BoxGeometry({
           "path",
           {
             ...stroke,
-            d: `M ${n(r - f)} ${n(btm)} V ${n(btm - f)} H ${n(r)}`,
+            d: `M ${n(r - f3)} ${n(btm)} V ${n(btm - f3)} H ${n(r)}`,
             fill: "rgba(0,0,0,0.08)"
           }
         )
@@ -3873,41 +4189,418 @@ function BoxGeometry({
   }
 }
 
-// src/drawing/canvas/ShapeView.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-import { createElement } from "react";
-var CONNECTOR_FONT_SIZE = 12;
-var CONNECTOR_LABEL_MAX_WIDTH = 160;
-function slotLayout(shape) {
-  const def = boxDefinition(shape);
-  return {
-    area: def ? def.textArea(shape) : bbox(shape),
-    slots: def ? def.textSlots : ["label", "text", "footer"]
+// src/drawing/ink.ts
+var SAMPLE_STEP = 5;
+var PRESSURE = 0.3;
+function seedFrom(text) {
+  let h = 2166136261;
+  for (let i = 0; i < text.length; i++) {
+    h ^= text.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a = a + 1831565813 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
   };
 }
-function slotAt(shape, y) {
-  const { area, slots } = slotLayout(shape);
-  const rel = (y - area.y) / Math.max(area.h, 1);
-  if (rel < 0.3 && slots.includes("label")) return "label";
-  if (rel > 0.7 && slots.includes("footer")) return "footer";
-  return slots.includes("text") ? "text" : slots[0];
+function inkAmplitude(size) {
+  return Math.min(4, Math.max(1, size * 0.03));
+}
+function inkFillOffset(seed) {
+  const rand = mulberry32(seed ^ 2654435769);
+  const angle = rand() * Math.PI * 2;
+  const d = 2 + rand();
+  return { x: Math.cos(angle) * d, y: Math.sin(angle) * d };
+}
+function makeField(seed, amplitude, closed) {
+  const rand = mulberry32(seed);
+  const int = (lo, span) => lo + Math.floor(rand() * span);
+  const f1 = closed ? int(2, 2) : 1.5 + rand();
+  const f22 = closed ? int(5, 3) : 3 + rand() * 2;
+  const g = closed ? int(2, 2) : 1 + rand();
+  const p1 = rand() * Math.PI * 2;
+  const p2 = rand() * Math.PI * 2;
+  const pg = rand() * Math.PI * 2;
+  const a1 = amplitude * (0.55 + rand() * 0.15);
+  const a2 = amplitude * 0.3;
+  const TAU = Math.PI * 2;
+  return {
+    offset: (t) => a1 * Math.sin(TAU * f1 * t + p1) + a2 * Math.sin(TAU * f22 * t + p2),
+    pressure: (t) => 1 + PRESSURE * Math.sin(TAU * g * t + pg)
+  };
 }
-var textStyle = { userSelect: "none" };
-function luminance(color) {
-  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color);
-  if (!m) return 1;
-  const hex = m[1].length === 3 ? m[1].replace(/./g, (c2) => c2 + c2) : m[1];
-  const [r, g, b] = [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+function resample(points, closed) {
+  const src = closed ? [...points, points[0]] : [...points];
+  const lengths = [];
+  let total = 0;
+  for (let i = 1; i < src.length; i++) {
+    const l = Math.hypot(src[i].x - src[i - 1].x, src[i].y - src[i - 1].y);
+    lengths.push(l);
+    total += l;
+  }
+  if (total === 0) return { points: [src[0]], ts: [0] };
+  const out = [];
+  const ts = [];
+  let walked = 0;
+  for (let i = 1; i < src.length; i++) {
+    const a = src[i - 1];
+    const b = src[i];
+    const l = lengths[i - 1];
+    const n2 = Math.max(1, Math.round(l / SAMPLE_STEP));
+    for (let k = 0; k < n2; k++) {
+      const u = k / n2;
+      out.push({ x: a.x + (b.x - a.x) * u, y: a.y + (b.y - a.y) * u });
+      ts.push((walked + l * u) / total);
+    }
+    walked += l;
+  }
+  if (!closed) {
+    out.push(src[src.length - 1]);
+    ts.push(1);
+  }
+  return { points: out, ts };
+}
+function normalAt(points, i, closed) {
+  const n2 = points.length;
+  const prev = points[closed ? (i - 1 + n2) % n2 : Math.max(0, i - 1)];
+  const next = points[closed ? (i + 1) % n2 : Math.min(n2 - 1, i + 1)];
+  const tx = next.x - prev.x;
+  const ty = next.y - prev.y;
+  const len = Math.hypot(tx, ty) || 1;
+  return { x: -ty / len, y: tx / len };
+}
+var f = (v) => Number.isInteger(v) ? String(v) : v.toFixed(2);
+var pathOf = (points) => points.map((p, i) => `${i === 0 ? "M" : "L"} ${f(p.x)} ${f(p.y)}`).join(" ");
+function inkStroke(points, options) {
+  if (points.length < 2) return { ring: "", center: "" };
+  const { closed, seed, width, amplitude } = options;
+  const field = makeField(seed, amplitude, closed);
+  const { points: pts, ts } = resample(points, closed);
+  if (pts.length < 2) return { ring: "", center: "" };
+  const center2 = [];
+  const outer = [];
+  const inner = [];
+  for (let i = 0; i < pts.length; i++) {
+    const t = ts[i];
+    const nrm = normalAt(pts, i, closed);
+    const off = field.offset(t);
+    const c2 = { x: pts[i].x + nrm.x * off, y: pts[i].y + nrm.y * off };
+    const taper = closed ? 1 : 0.55 + 0.45 * Math.min(1, t / 0.1, (1 - t) / 0.1);
+    const half = width * field.pressure(t) * taper / 2;
+    center2.push(c2);
+    outer.push({ x: c2.x + nrm.x * half, y: c2.y + nrm.y * half });
+    inner.push({ x: c2.x - nrm.x * half, y: c2.y - nrm.y * half });
+  }
+  if (closed) {
+    return {
+      ring: `${pathOf(outer)} Z ${pathOf([...inner].reverse())} Z`,
+      center: `${pathOf(center2)} Z`
+    };
+  }
+  return {
+    ring: `${pathOf(outer)} ${pathOf([...inner].reverse()).replace(/^M/, "L")} Z`,
+    center: pathOf(center2)
+  };
 }
-function textColorFor(shape) {
-  if (shape.stroke === "transparent" || shape.stroke === "none") return "#1e1e1e";
-  if (luminance(shape.fill) < 0.35) return "#ffffff";
-  return shape.stroke;
+function roundedRectPolygon(r, radius, segments = 4) {
+  const rad = Math.min(radius, r.w / 2, r.h / 2);
+  if (rad <= 0) {
+    return [
+      { x: r.x, y: r.y },
+      { x: r.x + r.w, y: r.y },
+      { x: r.x + r.w, y: r.y + r.h },
+      { x: r.x, y: r.y + r.h }
+    ];
+  }
+  const corners = [
+    [r.x + r.w - rad, r.y + rad, -Math.PI / 2],
+    [r.x + r.w - rad, r.y + r.h - rad, 0],
+    [r.x + rad, r.y + r.h - rad, Math.PI / 2],
+    [r.x + rad, r.y + rad, Math.PI]
+  ];
+  const out = [];
+  for (const [cx, cy, start] of corners) {
+    for (let i = 0; i <= segments; i++) {
+      const a = start + Math.PI / 2 * (i / segments);
+      out.push({ x: cx + rad * Math.cos(a), y: cy + rad * Math.sin(a) });
+    }
+  }
+  return out;
 }
-var hintStyle = { userSelect: "none", pointerEvents: "none" };
-function BoxTexts({
-  shape,
+function roundedPolyline(points, cornerRadius = 6, segments = 4) {
+  if (points.length < 3) return [...points];
+  const out = [points[0]];
+  for (let i = 1; i < points.length - 1; i++) {
+    const prev = points[i - 1];
+    const p = points[i];
+    const next = points[i + 1];
+    const inLen = Math.hypot(p.x - prev.x, p.y - prev.y);
+    const outLen = Math.hypot(next.x - p.x, next.y - p.y);
+    const r = Math.min(cornerRadius, inLen / 2, outLen / 2);
+    if (r < 0.5) {
+      out.push(p);
+      continue;
+    }
+    const a = { x: p.x - (p.x - prev.x) / inLen * r, y: p.y - (p.y - prev.y) / inLen * r };
+    const b = { x: p.x + (next.x - p.x) / outLen * r, y: p.y + (next.y - p.y) / outLen * r };
+    for (let k = 0; k <= segments; k++) {
+      const u = k / segments;
+      const v = 1 - u;
+      out.push({
+        x: v * v * a.x + 2 * v * u * p.x + u * u * b.x,
+        y: v * v * a.y + 2 * v * u * p.y + u * u * b.y
+      });
+    }
+  }
+  out.push(points[points.length - 1]);
+  return out;
+}
+function sampleCubic(p0, p1, p2, p3, segments = 10) {
+  const out = [];
+  for (let k = 1; k <= segments; k++) {
+    const u = k / segments;
+    const v = 1 - u;
+    out.push({
+      x: v * v * v * p0.x + 3 * v * v * u * p1.x + 3 * v * u * u * p2.x + u * u * u * p3.x,
+      y: v * v * v * p0.y + 3 * v * v * u * p1.y + 3 * v * u * u * p2.y + u * u * u * p3.y
+    });
+  }
+  return out;
+}
+function arcPolygon(cx, cy, rx, ry, from, to, segments = 12) {
+  return Array.from({ length: segments + 1 }, (_, i) => {
+    const a = from + (to - from) * i / segments;
+    return { x: cx + rx * Math.cos(a), y: cy + ry * Math.sin(a) };
+  });
+}
+
+// src/drawing/shapes/inkRender.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var f2 = (v) => Number.isInteger(v) ? String(v) : v.toFixed(2);
+function extent(points) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const p of points) {
+    if (p.x < minX) minX = p.x;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.y > maxY) maxY = p.y;
+  }
+  return { w: maxX - minX, h: maxY - minY };
+}
+function InkBoxGeometry({ shape }) {
+  const b = bbox(shape);
+  const seed = seedFrom(shape.id);
+  const width = shape.strokeWidth;
+  const off = inkFillOffset(seed);
+  const fillTransform = `translate(${f2(off.x)} ${f2(off.y)})`;
+  const amplitudeOf = (points) => inkAmplitude(Math.min(extent(points).w, extent(points).h));
+  const closed = (points, part, fill = shape.fill) => {
+    const s = inkStroke(points, { closed: true, seed: seed + part, width, amplitude: amplitudeOf(points) });
+    return /* @__PURE__ */ jsxs5("g", { children: [
+      /* @__PURE__ */ jsx5("path", { d: s.center, fill, stroke: "none", transform: fillTransform }),
+      /* @__PURE__ */ jsx5("path", { d: s.ring, fill: shape.stroke, fillRule: "evenodd", stroke: "none" })
+    ] });
+  };
+  const open = (points, part, w = width) => /* @__PURE__ */ jsx5(
+    "path",
+    {
+      d: inkStroke(points, { closed: false, seed: seed + part, width: w, amplitude: amplitudeOf(points) }).ring,
+      fill: shape.stroke,
+      stroke: "none"
+    }
+  );
+  switch (shape.type) {
+    case "rect":
+      return closed(roundedRectPolygon(b, Math.min(8, b.w / 4, b.h / 4)), 0);
+    case "ellipse":
+      return closed(ellipsePolygon(b, 64), 0);
+    case "diamond":
+      return closed(
+        [
+          { x: b.x + b.w / 2, y: b.y },
+          { x: b.x + b.w, y: b.y + b.h / 2 },
+          { x: b.x + b.w / 2, y: b.y + b.h },
+          { x: b.x, y: b.y + b.h / 2 }
+        ],
+        0
+      );
+    case "note": {
+      const fold = NOTE_FOLD(b);
+      const r = b.x + b.w;
+      const btm = b.y + b.h;
+      const fillPts = [
+        { x: b.x, y: b.y },
+        { x: r, y: b.y },
+        { x: r, y: btm - fold },
+        { x: r - fold, y: btm },
+        { x: b.x, y: btm }
+      ];
+      const foldPts = [
+        { x: r - fold, y: btm },
+        { x: r - fold, y: btm - fold },
+        { x: r, y: btm - fold }
+      ];
+      return /* @__PURE__ */ jsxs5("g", { children: [
+        closed(fillPts, 0),
+        /* @__PURE__ */ jsx5(
+          "path",
+          {
+            d: `M ${foldPts.map((p) => `${f2(p.x)} ${f2(p.y)}`).join(" L ")} Z`,
+            fill: "rgba(0,0,0,0.08)",
+            stroke: "none"
+          }
+        ),
+        open(foldPts, 1)
+      ] });
+    }
+    case "cylinder": {
+      const ry = CYLINDER_RY(b);
+      const rx = b.w / 2;
+      const cx = b.x + rx;
+      const body = [
+        { x: b.x, y: b.y + ry },
+        { x: b.x, y: b.y + b.h - ry },
+        ...arcPolygon(cx, b.y + b.h - ry, rx, ry, Math.PI, 0, 16),
+        { x: b.x + b.w, y: b.y + ry }
+      ];
+      const s = inkStroke(body, { closed: false, seed: seed + 0, width, amplitude: amplitudeOf(body) });
+      return /* @__PURE__ */ jsxs5("g", { children: [
+        /* @__PURE__ */ jsx5("path", { d: `${s.center} Z`, fill: shape.fill, stroke: "none", transform: fillTransform }),
+        /* @__PURE__ */ jsx5("path", { d: s.ring, fill: shape.stroke, stroke: "none" }),
+        closed(ellipsePolygon({ x: b.x, y: b.y, w: b.w, h: ry * 2 }, 48), 1)
+      ] });
+    }
+    case "cloud": {
+      const p = (u, v) => ({ x: b.x + u * b.w, y: b.y + v * b.h });
+      const start = p(0.22, 0.86);
+      const segs = [
+        [p(0.04, 0.88), p(0, 0.58), p(0.16, 0.5)],
+        [p(0.08, 0.26), p(0.3, 0.12), p(0.42, 0.28)],
+        [p(0.5, 0.02), p(0.76, 0.04), p(0.78, 0.3)],
+        [p(0.98, 0.26), p(1.04, 0.56), p(0.88, 0.64)],
+        [p(1, 0.8), p(0.9, 0.9), p(0.76, 0.86)]
+      ];
+      const pts = [start];
+      let from = start;
+      for (const [c1, c2, to] of segs) {
+        pts.push(...sampleCubic(from, c1, c2, to, 8));
+        from = to;
+      }
+      return closed(pts, 0);
+    }
+    case "queue": {
+      const rx = QUEUE_RX(b);
+      const ry = b.h / 2;
+      const body = [
+        { x: b.x + rx, y: b.y },
+        { x: b.x + b.w - rx, y: b.y },
+        { x: b.x + b.w - rx, y: b.y + b.h },
+        { x: b.x + rx, y: b.y + b.h },
+        ...arcPolygon(b.x + rx, b.y + ry, rx, ry, Math.PI / 2, 3 * Math.PI / 2, 16).slice(1, -1)
+      ];
+      return /* @__PURE__ */ jsxs5("g", { children: [
+        closed(body, 0),
+        closed(ellipsePolygon({ x: b.x + b.w - rx * 2, y: b.y, w: rx * 2, h: b.h }, 48), 1)
+      ] });
+    }
+    case "actor": {
+      const figH = b.h * ACTOR_FIGURE_RATIO;
+      const cx = b.x + b.w / 2;
+      const r = Math.max(4, Math.min(figH * 0.16, b.w * 0.2));
+      const neck = b.y + r * 2;
+      const hip = b.y + figH * 0.62;
+      const armY = neck + figH * 0.12;
+      const reach = Math.min(b.w * 0.32, figH * 0.3);
+      return /* @__PURE__ */ jsxs5("g", { children: [
+        closed(ellipsePolygon({ x: cx - r, y: b.y, w: r * 2, h: r * 2 }, 32), 0),
+        open([{ x: cx, y: neck }, { x: cx, y: hip }], 1),
+        open([{ x: cx - reach, y: armY }, { x: cx + reach, y: armY }], 2),
+        open(
+          [
+            { x: cx - reach, y: b.y + figH },
+            { x: cx, y: hip },
+            { x: cx + reach, y: b.y + figH }
+          ],
+          3
+        )
+      ] });
+    }
+    default:
+      return null;
+  }
+}
+function InkConnector({
+  shape,
+  points
+}) {
+  if (points.length < 2) return null;
+  const seed = seedFrom(shape.id);
+  const length = pathLength(points);
+  const amplitude = Math.min(3, Math.max(0.8, length * 0.015));
+  const width = shape.strokeWidth;
+  const line = inkStroke(roundedPolyline(points), { closed: false, seed, width, amplitude });
+  const heads = [];
+  if (shape.type === "arrow" && length >= 1) {
+    const headLength = Math.min(14, 4 + length / 4);
+    const last = points.length - 1;
+    heads.push(arrowHeadPoints(points[last], segmentAngleAt(points, last, false), headLength));
+    if (shape.bidirectional) {
+      heads.push(arrowHeadPoints(points[0], segmentAngleAt(points, 0, true), headLength));
+    }
+  }
+  return /* @__PURE__ */ jsxs5("g", { fill: shape.stroke, stroke: "none", children: [
+    /* @__PURE__ */ jsx5("path", { d: line.ring }),
+    heads.map((pts, i) => /* @__PURE__ */ jsx5(
+      "path",
+      {
+        d: inkStroke(pts, { closed: false, seed: seed + 1 + i, width: width * 1.15, amplitude: 0.8 }).ring
+      },
+      i
+    ))
+  ] });
+}
+
+// src/drawing/canvas/ShapeView.tsx
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { createElement } from "react";
+var CONNECTOR_FONT_SIZE = 12;
+var CONNECTOR_LABEL_MAX_WIDTH = 160;
+function slotLayout(shape) {
+  const def = boxDefinition(shape);
+  return {
+    area: def ? def.textArea(shape) : bbox(shape),
+    slots: def ? def.textSlots : ["label", "text", "footer"]
+  };
+}
+function slotAt(shape, y) {
+  const { area, slots } = slotLayout(shape);
+  const rel = (y - area.y) / Math.max(area.h, 1);
+  if (rel < 0.3 && slots.includes("label")) return "label";
+  if (rel > 0.7 && slots.includes("footer")) return "footer";
+  return slots.includes("text") ? "text" : slots[0];
+}
+var textStyle = { userSelect: "none" };
+function luminance(color) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color);
+  if (!m) return 1;
+  const hex = m[1].length === 3 ? m[1].replace(/./g, (c2) => c2 + c2) : m[1];
+  const [r, g, b] = [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function textColorFor(shape) {
+  if (shape.stroke === "transparent" || shape.stroke === "none") return "#1e1e1e";
+  if (luminance(shape.fill) < 0.35) return "#ffffff";
+  return shape.stroke;
+}
+var hintStyle = { userSelect: "none", pointerEvents: "none" };
+function BoxTexts({
+  shape,
   hideField,
   showHints
 }) {
@@ -3925,7 +4618,7 @@ function BoxTexts({
     fill: textColorFor(shape),
     textAnchor: "middle"
   };
-  return /* @__PURE__ */ jsxs5("g", { children: [
+  return /* @__PURE__ */ jsxs6("g", { children: [
     slots.includes("label") && hideField !== "label" && (shape.label ? labelLines.map((line, i) => /* @__PURE__ */ createElement(
       "text",
       {
@@ -3940,7 +4633,7 @@ function BoxTexts({
         style: textStyle
       },
       line
-    )) : hints && /* @__PURE__ */ jsx5(
+    )) : hints && /* @__PURE__ */ jsx6(
       "text",
       {
         ...common,
@@ -3963,7 +4656,7 @@ function BoxTexts({
         style: textStyle
       },
       line
-    )) : hints && /* @__PURE__ */ jsx5(
+    )) : hints && /* @__PURE__ */ jsx6(
       "text",
       {
         ...common,
@@ -3987,7 +4680,7 @@ function BoxTexts({
         style: textStyle
       },
       line
-    )) : hints && /* @__PURE__ */ jsx5(
+    )) : hints && /* @__PURE__ */ jsx6(
       "text",
       {
         ...common,
@@ -4011,8 +4704,8 @@ function ConnectorLabel({
   const { x: midX, y: midY } = connectorMidpoint(points);
   const lineH = CONNECTOR_FONT_SIZE * LINE_HEIGHT;
   const startY = midY - (lines.length - 1) * lineH / 2 + CONNECTOR_FONT_SIZE * 0.35;
-  return /* @__PURE__ */ jsxs5("g", { children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs6("g", { children: [
+    /* @__PURE__ */ jsx6(
       "rect",
       {
         x: midX - size.w / 2 - 5,
@@ -4024,7 +4717,7 @@ function ConnectorLabel({
         opacity: 0.94
       }
     ),
-    lines.map((line, i) => /* @__PURE__ */ jsx5(
+    lines.map((line, i) => /* @__PURE__ */ jsx6(
       "text",
       {
         x: midX,
@@ -4043,7 +4736,8 @@ function ShapeView({
   shape,
   points,
   hideField,
-  showHints
+  showHints,
+  ink = false
 }) {
   const stroke = {
     stroke: shape.stroke,
@@ -4052,9 +4746,9 @@ function ShapeView({
     strokeLinejoin: "round"
   };
   if (isBoxType(shape.type)) {
-    return /* @__PURE__ */ jsxs5("g", { children: [
-      /* @__PURE__ */ jsx5(BoxGeometry, { shape, stroke }),
-      /* @__PURE__ */ jsx5(BoxTexts, { shape, hideField, showHints })
+    return /* @__PURE__ */ jsxs6("g", { children: [
+      ink ? /* @__PURE__ */ jsx6(InkBoxGeometry, { shape }) : /* @__PURE__ */ jsx6(BoxGeometry, { shape, stroke }),
+      /* @__PURE__ */ jsx6(BoxTexts, { shape, hideField, showHints })
     ] });
   }
   if (isConnectorType(shape.type)) {
@@ -4062,13 +4756,15 @@ function ShapeView({
       { x: shape.x, y: shape.y },
       { x: shape.x + shape.w, y: shape.y + shape.h }
     ];
-    return /* @__PURE__ */ jsxs5("g", { children: [
-      /* @__PURE__ */ jsx5("path", { ...stroke, d: polylinePath(pts), fill: "none" }),
-      arrowHeads(shape, pts).map((d, i) => /* @__PURE__ */ jsx5("path", { ...stroke, d, fill: "none" }, i)),
-      shape.text && hideField !== "text" && /* @__PURE__ */ jsx5(ConnectorLabel, { shape, points: pts })
+    return /* @__PURE__ */ jsxs6("g", { children: [
+      ink ? /* @__PURE__ */ jsx6(InkConnector, { shape, points: pts }) : /* @__PURE__ */ jsxs6(Fragment, { children: [
+        /* @__PURE__ */ jsx6("path", { ...stroke, d: polylinePath(pts), fill: "none" }),
+        arrowHeads(shape, pts).map((d, i) => /* @__PURE__ */ jsx6("path", { ...stroke, d, fill: "none" }, i))
+      ] }),
+      shape.text && hideField !== "text" && /* @__PURE__ */ jsx6(ConnectorLabel, { shape, points: pts })
     ] });
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "text",
     {
       x: shape.x,
@@ -4076,7 +4772,7 @@ function ShapeView({
       fill: shape.stroke,
       fontSize: FONT_SIZE,
       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))
+      children: (shape.text ?? "").split("\n").map((line, i) => /* @__PURE__ */ jsx6("tspan", { x: shape.x, dy: i === 0 ? 0 : FONT_SIZE * LINE_HEIGHT, children: line }, i))
     }
   );
 }
@@ -4085,10 +4781,10 @@ function HitArea({
   points
 }) {
   if (isConnectorType(shape.type) && points) {
-    return /* @__PURE__ */ jsx5("path", { d: polylinePath(points), fill: "none", stroke: "transparent", strokeWidth: 16 });
+    return /* @__PURE__ */ jsx6("path", { d: polylinePath(points), fill: "none", stroke: "transparent", strokeWidth: 16 });
   }
   const b = bbox(shape);
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "rect",
     {
       x: b.x - 2,
@@ -4103,11 +4799,11 @@ function HitArea({
 
 // src/drawing/canvas/TextEditOverlay.tsx
 import {
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useRef as useRef2,
   useState
 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function TextEditOverlay({
   shape,
   field,
@@ -4119,7 +4815,7 @@ function TextEditOverlay({
   const ref = useRef2(null);
   const valueRef = useRef2(value);
   valueRef.current = value;
-  useEffect5(() => {
+  useEffect6(() => {
     const el = ref.current;
     if (!el) return;
     el.focus();
@@ -4210,7 +4906,7 @@ function TextEditOverlay({
     });
   }
   const placeholder = field === "label" ? "Label" : field === "footer" ? "Footer" : "Text";
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "textarea",
     {
       ref,
@@ -4227,19 +4923,19 @@ function TextEditOverlay({
 }
 
 // src/drawing/canvas/Toolbar.tsx
-import { useEffect as useEffect6, useRef as useRef3, useState as useState2 } from "react";
+import { useEffect as useEffect7, useRef as useRef3, useState as useState2 } from "react";
 
 // src/components/blockWidthOptions.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var LAYOUT_OPTIONS = [
   {
     preset: "compact",
     label: "Compact (shrink to content, tight rows)",
     width: "content",
     density: "compact",
-    icon: /* @__PURE__ */ jsxs6(Fragment, { children: [
-      /* @__PURE__ */ jsx7("path", { d: "M3 4v12M17 4v12" }),
-      /* @__PURE__ */ jsx7("path", { d: "M5.5 10h3M11.5 10h3M6.5 7.5L9 10l-2.5 2.5M13.5 7.5L11 10l2.5 2.5" })
+    icon: /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      /* @__PURE__ */ jsx8("path", { d: "M3 4v12M17 4v12" }),
+      /* @__PURE__ */ jsx8("path", { d: "M5.5 10h3M11.5 10h3M6.5 7.5L9 10l-2.5 2.5M13.5 7.5L11 10l2.5 2.5" })
     ] })
   },
   {
@@ -4247,9 +4943,9 @@ var LAYOUT_OPTIONS = [
     label: "Comfortable (text width)",
     width: "text",
     density: "comfortable",
-    icon: /* @__PURE__ */ jsxs6(Fragment, { children: [
-      /* @__PURE__ */ jsx7("path", { d: "M3 4v12M17 4v12" }),
-      /* @__PURE__ */ jsx7("path", { d: "M6.5 7h7M6.5 10h7M6.5 13h4.5" })
+    icon: /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      /* @__PURE__ */ jsx8("path", { d: "M3 4v12M17 4v12" }),
+      /* @__PURE__ */ jsx8("path", { d: "M6.5 7h7M6.5 10h7M6.5 13h4.5" })
     ] })
   },
   {
@@ -4257,9 +4953,9 @@ var LAYOUT_OPTIONS = [
     label: "Full width",
     width: "full",
     density: "comfortable",
-    icon: /* @__PURE__ */ jsxs6(Fragment, { children: [
-      /* @__PURE__ */ jsx7("path", { d: "M3 4v12M17 4v12" }),
-      /* @__PURE__ */ jsx7("path", { d: "M6 10h8M8.5 7.5L6 10l2.5 2.5M11.5 7.5L14 10l-2.5 2.5" })
+    icon: /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      /* @__PURE__ */ jsx8("path", { d: "M3 4v12M17 4v12" }),
+      /* @__PURE__ */ jsx8("path", { d: "M6 10h8M8.5 7.5L6 10l2.5 2.5M11.5 7.5L14 10l-2.5 2.5" })
     ] })
   }
 ];
@@ -4268,7 +4964,7 @@ function layoutPreset(width) {
 }
 
 // src/drawing/canvas/Toolbar.tsx
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var PRIMARY_TOOLS = [
   { tool: "select", label: "Select" },
   { tool: "rect", label: "Rectangle" },
@@ -4287,7 +4983,7 @@ function ToolButton({
   className,
   pressed
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       type: "button",
@@ -4296,7 +4992,7 @@ function ToolButton({
       "aria-pressed": pressed ?? active,
       className: `zui-drawing-tool ${active ? "is-active" : ""} ${className ?? ""}`,
       onClick,
-      children: /* @__PURE__ */ jsx8(Icon, { children })
+      children: /* @__PURE__ */ jsx9(Icon, { children })
     }
   );
 }
@@ -4312,7 +5008,7 @@ function DrawingToolbar({
   const [lastMore, setLastMore] = useState2("note");
   const [copied, setCopied] = useState2(false);
   const moreRef = useRef3(null);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!moreOpen) return;
     const close = (e) => {
       if (!moreRef.current?.contains(e.target)) setMoreOpen(false);
@@ -4329,11 +5025,11 @@ function DrawingToolbar({
   }, [moreOpen]);
   const moreActive = MORE_SHAPES.includes(tool);
   const moreIcon = moreActive ? SHAPE_ICONS[tool] : SHAPE_ICONS[lastMore];
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsxs7("div", { className: "zui-drawing-toolbar-group", role: "toolbar", "aria-label": "Drawing tools", children: [
-      PRIMARY_TOOLS.map(({ tool: t, label }) => /* @__PURE__ */ jsx8(ToolButton, { label, active: tool === t, onClick: () => onToolChange(t), children: SHAPE_ICONS[t] }, t)),
-      /* @__PURE__ */ jsxs7("div", { className: "zui-drawing-more", ref: moreRef, children: [
-        /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsxs8("div", { className: "zui-drawing-toolbar-group", role: "toolbar", "aria-label": "Drawing tools", children: [
+      PRIMARY_TOOLS.map(({ tool: t, label }) => /* @__PURE__ */ jsx9(ToolButton, { label, active: tool === t, onClick: () => onToolChange(t), children: SHAPE_ICONS[t] }, t)),
+      /* @__PURE__ */ jsxs8("div", { className: "zui-drawing-more", ref: moreRef, children: [
+        /* @__PURE__ */ jsxs8(
           "button",
           {
             type: "button",
@@ -4344,12 +5040,12 @@ function DrawingToolbar({
             className: `zui-drawing-tool zui-drawing-tool-more ${moreActive ? "is-active" : ""}`,
             onClick: () => setMoreOpen((open) => !open),
             children: [
-              /* @__PURE__ */ jsx8(Icon, { children: moreIcon }),
-              /* @__PURE__ */ jsx8("span", { className: "zui-drawing-caret", "aria-hidden": "true" })
+              /* @__PURE__ */ jsx9(Icon, { children: moreIcon }),
+              /* @__PURE__ */ jsx9("span", { className: "zui-drawing-caret", "aria-hidden": "true" })
             ]
           }
         ),
-        moreOpen && /* @__PURE__ */ jsx8("div", { className: "zui-drawing-popover", role: "menu", children: MORE_SHAPES.map((type) => /* @__PURE__ */ jsxs7(
+        moreOpen && /* @__PURE__ */ jsx9("div", { className: "zui-drawing-popover", role: "menu", children: MORE_SHAPES.map((type) => /* @__PURE__ */ jsxs8(
           "button",
           {
             type: "button",
@@ -4362,8 +5058,8 @@ function DrawingToolbar({
               setMoreOpen(false);
             },
             children: [
-              /* @__PURE__ */ jsx8(Icon, { size: 18, children: SHAPE_ICONS[type] }),
-              /* @__PURE__ */ jsx8("span", { children: BOX_DEFINITIONS[type].label })
+              /* @__PURE__ */ jsx9(Icon, { size: 18, children: SHAPE_ICONS[type] }),
+              /* @__PURE__ */ jsx9("span", { children: BOX_DEFINITIONS[type].label })
             ]
           },
           type
@@ -4371,8 +5067,8 @@ function DrawingToolbar({
       ] })
     ] }),
     properties,
-    /* @__PURE__ */ jsxs7("div", { className: "zui-drawing-toolbar-group zui-drawing-toolbar-group-end", children: [
-      /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsxs8("div", { className: "zui-drawing-toolbar-group zui-drawing-toolbar-group-end", children: [
+      /* @__PURE__ */ jsx9(
         ToolButton,
         {
           label: copied ? "Copied Mermaid to clipboard" : "Copy as Mermaid",
@@ -4387,8 +5083,8 @@ function DrawingToolbar({
           children: copied ? UI_ICONS.check : UI_ICONS.mermaid
         }
       ),
-      /* @__PURE__ */ jsx8("span", { className: "zui-drawing-toolbar-divider" }),
-      LAYOUT_OPTIONS.map(({ preset, label, icon, width: presetWidth }) => /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9("span", { className: "zui-drawing-toolbar-divider" }),
+      LAYOUT_OPTIONS.map(({ preset, label, icon, width: presetWidth }) => /* @__PURE__ */ jsx9(
         ToolButton,
         {
           label,
@@ -4403,7 +5099,7 @@ function DrawingToolbar({
 }
 
 // src/drawing/canvas/DrawingCanvas.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var MIN_HEIGHT = 120;
 var MAX_HEIGHT = 1200;
 var WIDTH_CLASS = {
@@ -4434,11 +5130,12 @@ function computePaths(shapes) {
   return paths;
 }
 function DrawingCanvas({ nodeKey, data }) {
-  const [editor] = useLexicalComposerContext5();
+  const [editor] = useLexicalComposerContext6();
   const isEditable = useLexicalEditable();
   const [shapes, setShapes] = useState3(data.shapes);
   const [canvasHeight, setCanvasHeight] = useState3(data.canvasHeight);
   const [width, setWidth] = useState3(data.width ?? "full");
+  const ink = useContext2(EditorContext)?.drawingStyle === "ink";
   const [tool, setTool] = useState3("select");
   const [selectedIds, setSelectedIds] = useState3(EMPTY_SET);
   const [editingText, setEditingText] = useState3(null);
@@ -4465,7 +5162,7 @@ function DrawingCanvas({ nodeKey, data }) {
   const paths = useMemo(() => computePaths(shapes), [shapes]);
   const canvasWidth = data.canvasWidth;
   const logicalWidth = canvasWidth ?? (width === "content" ? contentWidth(shapes, paths) : null);
-  useEffect7(() => {
+  useEffect8(() => {
     const incoming = serializeDrawingData(data);
     if (incoming !== lastCommittedRef.current) {
       lastCommittedRef.current = incoming;
@@ -4476,7 +5173,7 @@ function DrawingCanvas({ nodeKey, data }) {
       setEditingText(null);
     }
   }, [data]);
-  useEffect7(() => {
+  useEffect8(() => {
     const svg = svgRef.current;
     if (!logicalWidth || !svg || typeof ResizeObserver === "undefined") {
       setScale(1);
@@ -4506,7 +5203,7 @@ function DrawingCanvas({ nodeKey, data }) {
       if (json2 === lastCommittedRef.current) return;
       lastCommittedRef.current = json2;
       editor.update(() => {
-        const node = $getNodeByKey2(nodeKey);
+        const node = $getNodeByKey4(nodeKey);
         if ($isDrawingNode(node)) node.setData(payload);
       });
     },
@@ -4766,7 +5463,7 @@ function DrawingCanvas({ nodeKey, data }) {
   }, [updateShapes]);
   const editingRef = useRef4(editingText);
   editingRef.current = editingText;
-  useEffect7(() => {
+  useEffect8(() => {
     const root = rootRef.current;
     if (!root || !isEditable) return;
     const onKeyDown = (e) => {
@@ -4899,11 +5596,11 @@ function DrawingCanvas({ nodeKey, data }) {
   const propStroke = single?.stroke ?? selection[0]?.stroke ?? stroke;
   const propFill = single?.fill ?? selection[0]?.fill ?? fill;
   const canvasCursor = tool === "select" ? "default" : tool === "text" ? "text" : "crosshair";
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       ref: rootRef,
-      className: `zui-drawing-canvas ${WIDTH_CLASS[width]} ${isEditable ? "is-editable" : ""}`,
+      className: `zui-drawing-canvas ${WIDTH_CLASS[width]} ${isEditable ? "is-editable" : ""} ${ink ? "is-ink" : ""}`,
       tabIndex: isEditable ? 0 : void 0,
       onFocus: () => editor.dispatchCommand(DRAWING_FOCUS_COMMAND, nodeKey),
       onBlur: (e) => {
@@ -4911,7 +5608,7 @@ function DrawingCanvas({ nodeKey, data }) {
         editor.dispatchCommand(DRAWING_FOCUS_COMMAND, null);
       },
       children: [
-        isEditable && /* @__PURE__ */ jsx9("div", { className: "zui-drawing-toolbar", onPointerDown: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx9(
+        isEditable && /* @__PURE__ */ jsx10("div", { className: "zui-drawing-toolbar", onPointerDown: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx10(
           DrawingToolbar,
           {
             tool,
@@ -4925,7 +5622,7 @@ function DrawingCanvas({ nodeKey, data }) {
             properties: (
               // Inline in the same row (so the stage never shifts); shown
               // only while the canvas has focus (see .zui-drawing-props-host)
-              /* @__PURE__ */ jsx9("div", { className: "zui-drawing-props-host", children: /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10("div", { className: "zui-drawing-props-host", children: /* @__PURE__ */ jsx10(
                 PropertyBar,
                 {
                   selection,
@@ -4940,8 +5637,8 @@ function DrawingCanvas({ nodeKey, data }) {
             )
           }
         ) }),
-        /* @__PURE__ */ jsxs8("div", { className: "zui-drawing-stage", children: [
-          /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs9("div", { className: "zui-drawing-stage", children: [
+          /* @__PURE__ */ jsxs9(
             "svg",
             {
               ref: svgRef,
@@ -4972,7 +5669,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 }
               },
               children: [
-                shapes.map((shape) => /* @__PURE__ */ jsxs8(
+                shapes.map((shape) => /* @__PURE__ */ jsxs9(
                   "g",
                   {
                     "data-shape-id": shape.id,
@@ -4980,11 +5677,12 @@ function DrawingCanvas({ nodeKey, data }) {
                     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(
+                      /* @__PURE__ */ jsx10(HitArea, { shape, points: paths.get(shape.id) }),
+                      shape.id === editingText?.id && shape.type === "text" ? null : /* @__PURE__ */ jsx10(
                         ShapeView,
                         {
                           shape,
+                          ink,
                           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
@@ -4994,7 +5692,7 @@ function DrawingCanvas({ nodeKey, data }) {
                   },
                   shape.id
                 )),
-                hoverBox && /* @__PURE__ */ jsx9(
+                hoverBox && /* @__PURE__ */ jsx10(
                   "polygon",
                   {
                     className: "zui-drawing-selection zui-drawing-bind-target",
@@ -5007,7 +5705,7 @@ function DrawingCanvas({ nodeKey, data }) {
                     pointerEvents: "none"
                   }
                 ),
-                single && isEditable && !editingText && /* @__PURE__ */ jsx9(
+                single && isEditable && !editingText && /* @__PURE__ */ jsx10(
                   SelectionOverlay,
                   {
                     shape: single,
@@ -5017,13 +5715,13 @@ function DrawingCanvas({ nodeKey, data }) {
                     onWaypointRemove: removeWaypoint
                   }
                 ),
-                selection.length > 1 && isEditable && /* @__PURE__ */ jsx9(GroupSelectionOverlay, { shapes: selection, paths }),
-                marquee && /* @__PURE__ */ jsx9(MarqueeOverlay, { rect: marqueeRect(marquee.origin, marquee.current) })
+                selection.length > 1 && isEditable && /* @__PURE__ */ jsx10(GroupSelectionOverlay, { shapes: selection, paths }),
+                marquee && /* @__PURE__ */ jsx10(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(
+          isEditable && shapes.length === 0 && /* @__PURE__ */ jsx10("div", { className: "zui-drawing-empty", "aria-hidden": "true", children: "Pick a shape above, then click or drag on the canvas" }),
+          editingShape && editingText && /* @__PURE__ */ jsx10(
             "div",
             {
               className: "zui-drawing-overlay",
@@ -5032,7 +5730,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 width: logicalWidth ?? void 0,
                 height: logicalWidth ? canvasHeight : void 0
               },
-              children: /* @__PURE__ */ jsx9(
+              children: /* @__PURE__ */ jsx10(
                 TextEditOverlay,
                 {
                   shape: editingShape,
@@ -5044,7 +5742,7 @@ function DrawingCanvas({ nodeKey, data }) {
               )
             }
           ),
-          isEditable && /* @__PURE__ */ jsx9(
+          isEditable && /* @__PURE__ */ jsx10(
             HeightHandle,
             {
               height: canvasHeight,
@@ -5068,7 +5766,7 @@ function HeightHandle({
   const latestRef = useRef4(height);
   latestRef.current = height;
   const clamp = (h) => Math.round(Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, h)));
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       className: "zui-drawing-resize",
@@ -5091,13 +5789,13 @@ function HeightHandle({
         dragRef.current = null;
         onCommit(latestRef.current);
       },
-      children: /* @__PURE__ */ jsx9(Icon, { size: 14, children: UI_ICONS.grip })
+      children: /* @__PURE__ */ jsx10(Icon, { size: 14, children: UI_ICONS.grip })
     }
   );
 }
 
 // src/nodes/DrawingNode.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var DrawingNode = class _DrawingNode extends DecoratorNode {
   static getType() {
     return "drawing";
@@ -5161,7 +5859,7 @@ var DrawingNode = class _DrawingNode extends DecoratorNode {
     return false;
   }
   decorate(_editor, _config) {
-    return /* @__PURE__ */ jsx10(DrawingCanvas, { nodeKey: this.getKey(), data: this.getData() });
+    return /* @__PURE__ */ jsx11(DrawingCanvas, { nodeKey: this.getKey(), data: this.getData() });
   }
 };
 function $createDrawingNode(data = serializeDrawingData(EMPTY_DRAWING)) {
@@ -5212,161 +5910,17 @@ import {
   TRANSFORMERS
 } from "@lexical/markdown";
 import {
-  $createTableCellNode,
+  $createTableCellNode as $createTableCellNode2,
   $createTableNode,
-  $createTableRowNode,
-  $isTableCellNode,
-  $isTableNode as $isTableNode2,
-  $isTableRowNode,
-  TableCellHeaderStates,
+  $createTableRowNode as $createTableRowNode2,
+  $isTableCellNode as $isTableCellNode2,
+  $isTableNode as $isTableNode3,
+  $isTableRowNode as $isTableRowNode3,
+  TableCellHeaderStates as TableCellHeaderStates2,
   TableCellNode,
   TableNode,
   TableRowNode
 } from "@lexical/table";
-
-// src/transformers/tableSettings.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 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", [BLOCK_BLEED_PROPERTY]: "0px" },
-    text: { [BLOCK_BLEED_PROPERTY]: "0px" }
-  },
-  density: {
-    comfortable: {},
-    compact: {
-      "--zui-table-cell-padding": "0.25rem 0.5rem",
-      "--zui-table-font-size": "0.8125rem"
-    },
-    spacious: {
-      "--zui-table-cell-padding": "0.875rem 1rem",
-      "--zui-table-font-size": "0.9375rem"
-    }
-  }
-};
-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(";")) {
-    const index = part.indexOf(":");
-    if (index === -1) continue;
-    const key = part.slice(0, index).trim();
-    const value = part.slice(index + 1).trim();
-    if (key && value) declarations.set(key, value);
-  }
-  return declarations;
-}
-function serializeStyle(declarations) {
-  return [...declarations].map(([key, value]) => `${key}: ${value}`).join("; ");
-}
-function optionsOf(setting) {
-  return Object.entries(OPTION_DECLARATIONS[setting]);
-}
-function readSetting(declarations, setting) {
-  for (const [option, decls] of optionsOf(setting)) {
-    const entries = Object.entries(decls);
-    if (entries.length === 0) continue;
-    if (entries.every(([key, value]) => declarations.get(key) === value)) {
-      return option;
-    }
-  }
-  return DEFAULT_TABLE_SETTINGS[setting];
-}
-function writeSetting(declarations, setting, option) {
-  for (const [, decls] of optionsOf(setting)) {
-    for (const key of Object.keys(decls)) declarations.delete(key);
-  }
-  for (const [key, value] of Object.entries(OPTION_DECLARATIONS[setting][option])) {
-    declarations.set(key, value);
-  }
-}
-function $getTableSettings(table) {
-  const declarations = parseStyle(table.getStyle());
-  return {
-    width: readSetting(declarations, "width"),
-    density: readSetting(declarations, "density")
-  };
-}
-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;
-}
-function $setTableWidth(table, width) {
-  $setTableSettings(table, { width });
-}
-function $getTableDensity(table) {
-  return $getTableSettings(table).density;
-}
-function $setTableDensity(table, density) {
-  $setTableSettings(table, { density });
-}
-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;
-}
-var MARKER_REG_EXP = /^<!--\s*([a-z]+\s*:\s*[a-z]+(?:\s*;\s*[a-z]+\s*:\s*[a-z]+)*)\s*;?\s*-->\s*$/;
-function isOption(setting, value) {
-  return value in OPTION_DECLARATIONS[setting];
-}
-var TABLE_WIDTH_MARKER = "<!-- width: content -->";
-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 recognised ? settings : null;
-}
-function formatTableSettingsMarker(settings, options = {}) {
-  const pairs = SETTING_KEYS.filter(
-    (key) => settings[key] !== DEFAULT_TABLE_SETTINGS[key] || key === "width" && options.explicitWidth
-  ).map((key) => `${key}: ${settings[key]}`);
-  return pairs.length > 0 ? `<!-- ${pairs.join("; ")} -->` : null;
-}
-
-// src/transformers/tableTransformer.ts
 var TABLE_ROW_REG_EXP = /^\|(.+)\|\s?$/;
 var TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-*:? ?)+\|\s?$/;
 function $getMarkerSettings(node) {
@@ -5376,11 +5930,11 @@ function $getMarkerSettings(node) {
 }
 function getTableColumnsSize(table) {
   const row = table.getFirstChild();
-  return $isTableRowNode(row) ? row.getChildrenSize() : 0;
+  return $isTableRowNode3(row) ? row.getChildrenSize() : 0;
 }
 function createTableCell(textContent) {
   const unescaped = textContent.replace(/\\n/g, "\n");
-  const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS);
+  const cell = $createTableCellNode2(TableCellHeaderStates2.NO_STATUS);
   $convertFromMarkdownString2(unescaped, TRANSFORMERS, cell);
   return cell;
 }
@@ -5392,22 +5946,22 @@ function mapToTableCells(textContent) {
 var TABLE = {
   dependencies: [TableNode, TableRowNode, TableCellNode],
   export: (node) => {
-    if (!$isTableNode2(node)) return null;
+    if (!$isTableNode3(node)) return null;
     const output = [];
     const marker = formatTableSettingsMarker($getTableSettings(node), {
       explicitWidth: $isTableWidthExplicit(node)
     });
     if (marker) output.push(marker);
     for (const row of node.getChildren()) {
-      if (!$isTableRowNode(row)) continue;
+      if (!$isTableRowNode3(row)) continue;
       const rowOutput = [];
       let isHeaderRow = false;
       for (const cell of row.getChildren()) {
-        if (!$isTableCellNode(cell)) continue;
+        if (!$isTableCellNode2(cell)) continue;
         rowOutput.push(
           $convertToMarkdownString2(TRANSFORMERS, cell).replace(/\n/g, "\\n")
         );
-        if (cell.__headerState === TableCellHeaderStates.ROW) {
+        if (cell.__headerState === TableCellHeaderStates2.ROW) {
           isHeaderRow = true;
         }
       }
@@ -5422,12 +5976,12 @@ var TABLE = {
   replace: (parentNode, _children, match) => {
     if (TABLE_ROW_DIVIDER_REG_EXP.test(match[0])) {
       const table2 = parentNode.getPreviousSibling();
-      if (!table2 || !$isTableNode2(table2)) return;
+      if (!table2 || !$isTableNode3(table2)) return;
       const lastRow = table2.getLastChild();
-      if (!lastRow || !$isTableRowNode(lastRow)) return;
+      if (!lastRow || !$isTableRowNode3(lastRow)) return;
       lastRow.getChildren().forEach((cell) => {
-        if ($isTableCellNode(cell)) {
-          cell.setHeaderStyles(TableCellHeaderStates.ROW, TableCellHeaderStates.ROW);
+        if ($isTableCellNode2(cell)) {
+          cell.setHeaderStyles(TableCellHeaderStates2.ROW, TableCellHeaderStates2.ROW);
         }
       });
       parentNode.remove();
@@ -5452,14 +6006,14 @@ var TABLE = {
     }
     const table = $createTableNode();
     for (const cells of rows) {
-      const tableRow = $createTableRowNode();
+      const tableRow = $createTableRowNode2();
       table.append(tableRow);
       for (let i = 0; i < maxCells; i++) {
         tableRow.append(i < cells.length ? cells[i] : createTableCell(""));
       }
     }
     const previousSibling = parentNode.getPreviousSibling();
-    if ($isTableNode2(previousSibling) && getTableColumnsSize(previousSibling) === maxCells) {
+    if ($isTableNode3(previousSibling) && getTableColumnsSize(previousSibling) === maxCells) {
       previousSibling.append(...table.getChildren());
       parentNode.remove();
     } else {
@@ -5538,21 +6092,8 @@ var editorTheme = {
   drawing: "zui-drawing"
 };
 
-// src/editorContext.ts
-import { createContext, useContext } from "react";
-var EditorContext = createContext(null);
-function useEditorContext() {
-  const ctx = useContext(EditorContext);
-  if (!ctx) {
-    throw new Error(
-      "@zuilib/text-editor: this component must be rendered inside <MarkdownEditor> or <MarkdownEditor.Root>"
-    );
-  }
-  return ctx;
-}
-
 // src/EditorRoot.tsx
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var SYNC_TRANSFORMERS = [
   FRONTMATTER,
   DRAWING,
@@ -5583,8 +6124,8 @@ var editorNodes = [
   DrawingNode
 ];
 function ReadOnlyPlugin({ readOnly }) {
-  const [editor] = useLexicalComposerContext6();
-  useEffect8(() => {
+  const [editor] = useLexicalComposerContext7();
+  useEffect9(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   return null;
@@ -5596,14 +6137,15 @@ function EditorRoot({
   className,
   mode = "edit-md",
   autoFocus = false,
-  measure,
+  measure: measure2,
   defaultBlockWidth = NO_DEFAULT_BLOCK_WIDTH,
+  drawingStyle = "clean",
   children
 }) {
   const latestValueRef = useRef5(value ?? "");
   const [mountKey, setMountKey] = useState4(0);
   const [capturedMarkdown, setCapturedMarkdown] = useState4(value ?? "");
-  useEffect8(() => {
+  useEffect9(() => {
     if (value !== void 0) {
       latestValueRef.current = value;
     }
@@ -5616,7 +6158,7 @@ function EditorRoot({
     [onChange]
   );
   const prevModeRef = useRef5(mode);
-  useEffect8(() => {
+  useEffect9(() => {
     if (prevModeRef.current === "edit-raw" && mode !== "edit-raw") {
       setCapturedMarkdown(latestValueRef.current);
       setMountKey((k) => k + 1);
@@ -5639,19 +6181,20 @@ function EditorRoot({
       autoFocus,
       rawValue: value ?? "",
       onRawChange: handleChange,
-      defaultBlockWidth
+      defaultBlockWidth,
+      drawingStyle
     }),
-    [mode, readOnly, autoFocus, value, handleChange, defaultBlockWidth]
+    [mode, readOnly, autoFocus, value, handleChange, defaultBlockWidth, drawingStyle]
   );
   const isRaw = mode === "edit-raw";
   const rootStyle = useMemo2(
-    () => measure !== void 0 ? { "--zui-text-editor-measure": measure } : void 0,
-    [measure]
+    () => measure2 !== void 0 ? { "--zui-text-editor-measure": measure2 } : void 0,
+    [measure2]
   );
-  return /* @__PURE__ */ jsx11(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx11(EditorContext.Provider, { value: context, children: /* @__PURE__ */ jsxs9("div", { className: `zui-text-editor ${className ?? ""}`, style: rootStyle, children: [
+  return /* @__PURE__ */ jsx12(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx12(EditorContext.Provider, { value: context, children: /* @__PURE__ */ jsxs10("div", { className: `zui-text-editor ${className ?? ""}`, style: rootStyle, children: [
     children,
-    !isRaw && /* @__PURE__ */ jsxs9(Fragment3, { children: [
-      /* @__PURE__ */ jsx11(
+    !isRaw && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+      /* @__PURE__ */ jsx12(
         MarkdownSyncPlugin,
         {
           initialMarkdown: mode === "view" ? value ?? "" : capturedMarkdown,
@@ -5659,17 +6202,18 @@ function EditorRoot({
           transformers: SYNC_TRANSFORMERS
         }
       ),
-      /* @__PURE__ */ jsx11(HistoryPlugin, {}),
-      /* @__PURE__ */ jsx11(ListPlugin, {}),
-      /* @__PURE__ */ jsx11(CheckListPlugin, {}),
-      /* @__PURE__ */ jsx11(ChecklistShortcutPlugin, {}),
-      /* @__PURE__ */ jsx11(CodeBlockShortcutPlugin, {}),
-      /* @__PURE__ */ jsx11(CodeHighlightPlugin, {}),
-      /* @__PURE__ */ jsx11(TablePlugin, {}),
-      /* @__PURE__ */ jsx11(LinkPlugin, {}),
-      /* @__PURE__ */ jsx11(MarkdownShortcutPlugin, { transformers: SHORTCUT_TRANSFORMERS }),
-      /* @__PURE__ */ jsx11(ReadOnlyPlugin, { readOnly: readOnly || mode === "view" }),
-      autoFocus && /* @__PURE__ */ jsx11(AutoFocusPlugin, {})
+      /* @__PURE__ */ jsx12(HistoryPlugin, {}),
+      /* @__PURE__ */ jsx12(ListPlugin, {}),
+      /* @__PURE__ */ jsx12(CheckListPlugin, {}),
+      /* @__PURE__ */ jsx12(ChecklistShortcutPlugin, {}),
+      /* @__PURE__ */ jsx12(CodeBlockShortcutPlugin, {}),
+      /* @__PURE__ */ jsx12(CodeHighlightPlugin, {}),
+      /* @__PURE__ */ jsx12(TablePlugin, {}),
+      /* @__PURE__ */ jsx12(TableRowShortcutsPlugin, {}),
+      /* @__PURE__ */ jsx12(LinkPlugin, {}),
+      /* @__PURE__ */ jsx12(MarkdownShortcutPlugin, { transformers: SHORTCUT_TRANSFORMERS }),
+      /* @__PURE__ */ jsx12(ReadOnlyPlugin, { readOnly: readOnly || mode === "view" }),
+      autoFocus && /* @__PURE__ */ jsx12(AutoFocusPlugin, {})
     ] })
   ] }) }) }, mountKey);
 }
@@ -5682,14 +6226,14 @@ import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 // src/plugins/FoldingPlugin.tsx
 import {
   useCallback as useCallback3,
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useRef as useRef6,
   useState as useState5
 } from "react";
-import { $getRoot, $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3 } from "lexical";
-import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
+import { $getRoot, $getSelection as $getSelection5, $isRangeSelection as $isRangeSelection5 } from "lexical";
+import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
 import { $isHeadingNode } from "@lexical/rich-text";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var HEADING_LEVELS = {
   h1: 1,
   h2: 2,
@@ -5699,7 +6243,7 @@ var HEADING_LEVELS = {
   h6: 6
 };
 function FoldingPlugin() {
-  const [editor] = useLexicalComposerContext7();
+  const [editor] = useLexicalComposerContext8();
   const [foldedKeys, setFoldedKeys] = useState5(/* @__PURE__ */ new Set());
   const [buttons, setButtons] = useState5([]);
   const foldedRef = useRef6(foldedKeys);
@@ -5725,8 +6269,8 @@ function FoldingPlugin() {
           hidden.add(sibling.getKey());
         }
       }
-      const selection = $getSelection3();
-      if ($isRangeSelection3(selection)) {
+      const selection = $getSelection5();
+      if ($isRangeSelection5(selection)) {
         const topLevel = selection.anchor.getNode().getTopLevelElement();
         if (topLevel && hidden.has(topLevel.getKey())) {
           let node = topLevel.getPreviousSibling();
@@ -5768,7 +6312,7 @@ function FoldingPlugin() {
       );
     });
   }, [editor]);
-  useEffect9(() => {
+  useEffect10(() => {
     sync();
     const unregister = editor.registerUpdateListener(sync);
     const rootElement = editor.getRootElement();
@@ -5787,7 +6331,7 @@ function FoldingPlugin() {
       return next;
     });
   }, []);
-  return /* @__PURE__ */ jsx12("div", { className: "zui-text-editor-fold-gutter", children: buttons.map(({ key, folded, top, height }) => /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13("div", { className: "zui-text-editor-fold-gutter", children: buttons.map(({ key, folded, top, height }) => /* @__PURE__ */ jsx13(
     "button",
     {
       type: "button",
@@ -5797,7 +6341,7 @@ function FoldingPlugin() {
       "aria-label": folded ? "Expand section" : "Collapse section",
       "aria-expanded": !folded,
       onClick: () => toggle(key),
-      children: /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsx13(
         "svg",
         {
           viewBox: "0 0 20 20",
@@ -5808,7 +6352,7 @@ function FoldingPlugin() {
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          children: /* @__PURE__ */ jsx12("path", { d: "M6 8l4 4 4-4" })
+          children: /* @__PURE__ */ jsx13("path", { d: "M6 8l4 4 4-4" })
         }
       )
     },
@@ -5816,17 +6360,150 @@ function FoldingPlugin() {
   )) });
 }
 
-// src/plugins/TableSettingsPlugin.tsx
-import { useCallback as useCallback5, useEffect as useEffect11, useState as useState7 } from "react";
-import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
+// src/plugins/TableControlsPlugin.tsx
+import { useCallback as useCallback7 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext11 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
 
+// src/components/TableRowRail.tsx
+import { useCallback as useCallback4, useRef as useRef7, useState as useState6 } from "react";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var TABLE_RAIL_WIDTH = 28;
+function TableRowRail({ box, rows, position, onInsert }) {
+  const rail = useRef7(null);
+  const [hovered, setHovered] = useState6(null);
+  const boundaryTop = useCallback4(
+    (index) => {
+      if (index < rows.length) return rows[index].top;
+      const last = rows[rows.length - 1];
+      return last ? last.top + last.height : 0;
+    },
+    [rows]
+  );
+  const onPointerMove = useCallback4(
+    (event) => {
+      const element = rail.current;
+      if (!element) return;
+      const y = event.clientY - element.getBoundingClientRect().top;
+      let nearest = null;
+      let distance = Number.POSITIVE_INFINITY;
+      for (const index of insertableRowIndices(position)) {
+        const d = Math.abs(boundaryTop(index) - y);
+        if (d < distance) {
+          distance = d;
+          nearest = index;
+        }
+      }
+      setHovered(nearest);
+    },
+    [position, boundaryTop]
+  );
+  if (rows.length === 0) return null;
+  const current = rows[Math.min(position.index, rows.length - 1)];
+  const insertAt = hovered ?? position.count;
+  const insertTop = boundaryTop(insertAt);
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      ref: rail,
+      className: "zui-table-rail",
+      style: { top: box.top, left: box.left - TABLE_RAIL_WIDTH, width: TABLE_RAIL_WIDTH, height: box.height },
+      onPointerMove,
+      onPointerLeave: () => setHovered(null),
+      children: [
+        /* @__PURE__ */ jsx14(
+          "div",
+          {
+            className: "zui-table-rail-marker",
+            style: { top: current.top + 3, height: Math.max(4, current.height - 6) },
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsx14(
+          "button",
+          {
+            type: "button",
+            className: `zui-table-rail-add ${hovered === null ? "is-resting" : ""}`,
+            style: { top: insertTop },
+            title: insertAt === position.count ? "Add row" : `Insert row ${insertAt === 0 ? "at the top" : `after row ${insertAt}`}`,
+            "aria-label": insertAt === position.count ? "Add row" : `Insert row before row ${insertAt + 1}`,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => onInsert(insertAt),
+            children: /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", children: /* @__PURE__ */ jsx14("path", { d: "M6 2.5v7M2.5 6h7" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx14(
+          "div",
+          {
+            className: "zui-table-rail-line",
+            style: { top: insertTop, left: TABLE_RAIL_WIDTH, width: box.width },
+            "aria-hidden": true
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/shortcutLabel.ts
+var isApple = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform ?? "");
+function shortcutLabel(keys) {
+  const parts = keys.split("+");
+  if (isApple) {
+    const glyphs = {
+      Mod: "\u2318",
+      Shift: "\u21E7",
+      Alt: "\u2325",
+      Enter: "\u21A9",
+      Backspace: "\u232B",
+      Tab: "\u21E5"
+    };
+    return parts.map((part) => glyphs[part] ?? part).join("");
+  }
+  return parts.map((part) => part === "Mod" ? "Ctrl" : part).join("+");
+}
+
+// src/components/tableRowActions.tsx
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+var TABLE_ROW_ACTIONS = [
+  {
+    action: "insert-above",
+    label: "Insert row above",
+    shortcut: "Mod+Shift+Enter",
+    icon: /* @__PURE__ */ jsxs12(Fragment5, { children: [
+      /* @__PURE__ */ jsx15("path", { d: "M3 11.5h14M3 15.5h14" }),
+      /* @__PURE__ */ jsx15("path", { d: "M10 3.5v5M7.5 6h5" })
+    ] })
+  },
+  {
+    action: "insert-below",
+    label: "Insert row below",
+    shortcut: "Mod+Enter",
+    icon: /* @__PURE__ */ jsxs12(Fragment5, { children: [
+      /* @__PURE__ */ jsx15("path", { d: "M3 4.5h14M3 8.5h14" }),
+      /* @__PURE__ */ jsx15("path", { d: "M10 11.5v5M7.5 14h5" })
+    ] })
+  },
+  {
+    action: "delete",
+    label: "Delete row",
+    shortcut: "Mod+Shift+Backspace",
+    icon: /* @__PURE__ */ jsxs12(Fragment5, { children: [
+      /* @__PURE__ */ jsx15("path", { d: "M3 5.5h14M3 14.5h14" }),
+      /* @__PURE__ */ jsx15("path", { d: "M7.5 10h5" })
+    ] })
+  }
+];
+function tableRowActionTitle(action) {
+  return `${action.label} (${shortcutLabel(action.shortcut)})`;
+}
+
 // src/useMarkdownEditor.ts
-import { useCallback as useCallback4, useEffect as useEffect10, useRef as useRef7, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect11, useRef as useRef8, useState as useState7 } from "react";
 import {
-  $getNodeByKey as $getNodeByKey4,
-  $getSelection as $getSelection4,
-  $isRangeSelection as $isRangeSelection4,
+  $getNodeByKey as $getNodeByKey5,
+  $getSelection as $getSelection6,
+  $isRangeSelection as $isRangeSelection6,
   CAN_REDO_COMMAND,
   CAN_UNDO_COMMAND,
   COMMAND_PRIORITY_LOW as COMMAND_PRIORITY_LOW2,
@@ -5834,7 +6511,7 @@ import {
   REDO_COMMAND,
   UNDO_COMMAND
 } from "lexical";
-import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
+import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
 import { INSERT_TABLE_COMMAND } from "@lexical/table";
 import { $insertNodeToNearestRoot, mergeRegister as mergeRegister2 } from "@lexical/utils";
 var TRACKED_FORMATS = [
@@ -5846,29 +6523,31 @@ var TRACKED_FORMATS = [
 ];
 function $readDrawingWidth(key) {
   if (key === null) return null;
-  const node = $getNodeByKey4(key);
+  const node = $getNodeByKey5(key);
   return $isDrawingNode(node) ? node.getData().width ?? "full" : null;
 }
 function useMarkdownEditor() {
-  const [editor] = useLexicalComposerContext8();
+  const [editor] = useLexicalComposerContext9();
   const { defaultBlockWidth } = useEditorContext();
-  const [activeFormats, setActiveFormats] = useState6(
+  const [activeFormats, setActiveFormats] = useState7(
     /* @__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(
+  const [canUndo, setCanUndo] = useState7(false);
+  const [canRedo, setCanRedo] = useState7(false);
+  const [tableSettings, setTableSettingsState] = useState7(null);
+  const [tableRow, setTableRow] = useState7(null);
+  const activeDrawingRef = useRef8(null);
+  const [drawingWidth, setDrawingWidth] = useState7(null);
+  useEffect11(
     () => mergeRegister2(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
           const table = $getSelectedTable();
           setTableSettingsState(table ? $getTableSettings(table) : null);
+          setTableRow(table ? $getTableRowPosition() : null);
           setDrawingWidth($readDrawingWidth(activeDrawingRef.current));
-          const selection = $getSelection4();
-          if (!$isRangeSelection4(selection)) {
+          const selection = $getSelection6();
+          if (!$isRangeSelection6(selection)) {
             setActiveFormats(/* @__PURE__ */ new Set());
             return;
           }
@@ -5907,13 +6586,13 @@ function useMarkdownEditor() {
     ),
     [editor]
   );
-  const toggleFormat = useCallback4(
+  const toggleFormat = useCallback5(
     (format) => {
       editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
     },
     [editor]
   );
-  const insertTable = useCallback4(
+  const insertTable = useCallback5(
     ({
       rows = 3,
       columns = 3,
@@ -5935,7 +6614,7 @@ function useMarkdownEditor() {
     },
     [editor, defaultBlockWidth.table]
   );
-  const insertDrawing = useCallback4(
+  const insertDrawing = useCallback5(
     ({ width = defaultBlockWidth.drawing } = {}) => {
       editor.update(() => {
         const data = width === void 0 ? EMPTY_DRAWING : { version: 2, canvasHeight: EMPTY_DRAWING.canvasHeight, width, shapes: [] };
@@ -5944,7 +6623,7 @@ function useMarkdownEditor() {
     },
     [editor, defaultBlockWidth.drawing]
   );
-  const updateTableSettings = useCallback4(
+  const updateTableSettings = useCallback5(
     (settings) => {
       editor.update(() => {
         const table = $getSelectedTable();
@@ -5953,15 +6632,30 @@ function useMarkdownEditor() {
     },
     [editor]
   );
-  const setTableWidth = useCallback4(
+  const setTableWidth = useCallback5(
     (width) => updateTableSettings({ width }),
     [updateTableSettings]
   );
-  const setTableDensity = useCallback4(
+  const setTableDensity = useCallback5(
     (density) => updateTableSettings({ density }),
     [updateTableSettings]
   );
-  const setBlockWidth = useCallback4(
+  const insertTableRow = useCallback5(
+    (position = "below") => {
+      editor.update(() => {
+        const table = $getSelectedTable();
+        if (table) $insertTableRowNear(table, position);
+      });
+    },
+    [editor]
+  );
+  const deleteTableRow = useCallback5(() => {
+    editor.update(() => {
+      const table = $getSelectedTable();
+      if (table) $deleteSelectedTableRow(table);
+    });
+  }, [editor]);
+  const setBlockWidth = useCallback5(
     (width) => {
       const key = activeDrawingRef.current;
       if (key === null) {
@@ -5969,7 +6663,7 @@ function useMarkdownEditor() {
         return;
       }
       editor.update(() => {
-        const node = $getNodeByKey4(key);
+        const node = $getNodeByKey5(key);
         if (!$isDrawingNode(node)) return;
         const { width: _previous, ...data } = node.getData();
         node.setData(width === "full" ? data : { ...data, width });
@@ -5977,10 +6671,10 @@ function useMarkdownEditor() {
     },
     [editor, updateTableSettings]
   );
-  const undo = useCallback4(() => {
+  const undo = useCallback5(() => {
     editor.dispatchCommand(UNDO_COMMAND, void 0);
   }, [editor]);
-  const redo = useCallback4(() => {
+  const redo = useCallback5(() => {
     editor.dispatchCommand(REDO_COMMAND, void 0);
   }, [editor]);
   return {
@@ -5995,6 +6689,9 @@ function useMarkdownEditor() {
     setTableWidth,
     tableDensity: tableSettings?.density ?? null,
     setTableDensity,
+    tableRow,
+    insertTableRow,
+    deleteTableRow,
     canUndo,
     canRedo,
     undo,
@@ -6003,23 +6700,23 @@ function useMarkdownEditor() {
 }
 
 // src/components/Toolbar.tsx
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function Toolbar({ children, className }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       className: `zui-text-editor-toolbar ${className ?? ""}`,
       role: "toolbar",
-      children: children ?? /* @__PURE__ */ jsxs10(Fragment4, { children: [
-        /* @__PURE__ */ jsx13(FormatButtons, {}),
-        /* @__PURE__ */ jsx13(ToolbarDivider, {}),
-        /* @__PURE__ */ jsx13(InsertButtons, {})
+      children: children ?? /* @__PURE__ */ jsxs13(Fragment6, { children: [
+        /* @__PURE__ */ jsx16(FormatButtons, {}),
+        /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx16(InsertButtons, {})
       ] })
     }
   );
 }
 function ToolbarDivider() {
-  return /* @__PURE__ */ jsx13("div", { className: "zui-text-editor-toolbar-divider" });
+  return /* @__PURE__ */ jsx16("div", { className: "zui-text-editor-toolbar-divider" });
 }
 function ToolbarButton({
   label,
@@ -6029,7 +6726,7 @@ function ToolbarButton({
   disabled = false,
   className
 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16(
     "button",
     {
       type: "button",
@@ -6045,7 +6742,7 @@ function ToolbarButton({
   );
 }
 function Icon2({ children, strokeWidth = 1.5 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16(
     "svg",
     {
       viewBox: "0 0 20 20",
@@ -6064,27 +6761,27 @@ var FORMAT_BUTTONS = [
   {
     format: "bold",
     label: "Bold",
-    icon: /* @__PURE__ */ jsx13(Icon2, { strokeWidth: 1.8, children: /* @__PURE__ */ jsx13("path", { d: "M6 3.5h5a3 3 0 0 1 0 6H6zm0 6h6a3 3 0 0 1 0 6H6z" }) })
+    icon: /* @__PURE__ */ jsx16(Icon2, { strokeWidth: 1.8, children: /* @__PURE__ */ jsx16("path", { d: "M6 3.5h5a3 3 0 0 1 0 6H6zm0 6h6a3 3 0 0 1 0 6H6z" }) })
   },
   {
     format: "italic",
     label: "Italic",
-    icon: /* @__PURE__ */ jsx13(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx13("path", { d: "M8.5 3.5h6M5.5 16.5h6M11.5 3.5l-3 13" }) })
+    icon: /* @__PURE__ */ jsx16(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx16("path", { d: "M8.5 3.5h6M5.5 16.5h6M11.5 3.5l-3 13" }) })
   },
   {
     format: "strikethrough",
     label: "Strikethrough",
-    icon: /* @__PURE__ */ jsx13(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx13("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__ */ jsx16(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx16("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__ */ jsx13(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx13("path", { d: "M7.5 6L4 10l3.5 4M12.5 6L16 10l-3.5 4" }) })
+    icon: /* @__PURE__ */ jsx16(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx16("path", { d: "M7.5 6L4 10l3.5 4M12.5 6L16 10l-3.5 4" }) })
   }
 ];
 function FormatButtons() {
   const { activeFormats, toggleFormat } = useMarkdownEditor();
-  return /* @__PURE__ */ jsx13(Fragment4, { children: FORMAT_BUTTONS.map(({ format, label, icon }) => /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16(Fragment6, { children: FORMAT_BUTTONS.map(({ format, label, icon }) => /* @__PURE__ */ jsx16(
     ToolbarButton,
     {
       label,
@@ -6097,36 +6794,36 @@ function FormatButtons() {
 }
 function InsertButtons() {
   const { insertTable, insertDrawing } = useMarkdownEditor();
-  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
-    /* @__PURE__ */ jsx13(ToolbarButton, { label: "Insert table", onClick: () => insertTable(), children: /* @__PURE__ */ jsxs10(Icon2, { children: [
-      /* @__PURE__ */ jsx13("rect", { x: "3", y: "3.5", width: "14", height: "13", rx: "1.5" }),
-      /* @__PURE__ */ jsx13("path", { d: "M3 8h14M8 8v8.5M13 8v8.5" })
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    /* @__PURE__ */ jsx16(ToolbarButton, { label: "Insert table", onClick: () => insertTable(), children: /* @__PURE__ */ jsxs13(Icon2, { children: [
+      /* @__PURE__ */ jsx16("rect", { x: "3", y: "3.5", width: "14", height: "13", rx: "1.5" }),
+      /* @__PURE__ */ jsx16("path", { d: "M3 8h14M8 8v8.5M13 8v8.5" })
     ] }) }),
-    /* @__PURE__ */ jsx13(ToolbarButton, { label: "Insert drawing", onClick: insertDrawing, children: /* @__PURE__ */ jsxs10(Icon2, { children: [
-      /* @__PURE__ */ jsx13("rect", { x: "3", y: "5", width: "8", height: "6", rx: "1.5" }),
-      /* @__PURE__ */ jsx13("path", { d: "M13.5 8h3M14.5 6.5L17.5 8l-3 1.5" }),
-      /* @__PURE__ */ jsx13("ellipse", { cx: "13", cy: "14.5", rx: "4", ry: "2.8" })
+    /* @__PURE__ */ jsx16(ToolbarButton, { label: "Insert drawing", onClick: insertDrawing, children: /* @__PURE__ */ jsxs13(Icon2, { children: [
+      /* @__PURE__ */ jsx16("rect", { x: "3", y: "5", width: "8", height: "6", rx: "1.5" }),
+      /* @__PURE__ */ jsx16("path", { d: "M13.5 8h3M14.5 6.5L17.5 8l-3 1.5" }),
+      /* @__PURE__ */ jsx16("ellipse", { cx: "13", cy: "14.5", rx: "4", ry: "2.8" })
     ] }) })
   ] });
 }
 function HistoryButtons() {
   const { canUndo, canRedo, undo, redo } = useMarkdownEditor();
-  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
-    /* @__PURE__ */ jsx13(ToolbarButton, { label: "Undo", onClick: undo, disabled: !canUndo, children: /* @__PURE__ */ jsxs10(Icon2, { children: [
-      /* @__PURE__ */ jsx13("path", { d: "M7 6L3.5 9.5 7 13" }),
-      /* @__PURE__ */ jsx13("path", { d: "M3.5 9.5H12a4 4 0 0 1 0 8h-1" })
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    /* @__PURE__ */ jsx16(ToolbarButton, { label: "Undo", onClick: undo, disabled: !canUndo, children: /* @__PURE__ */ jsxs13(Icon2, { children: [
+      /* @__PURE__ */ jsx16("path", { d: "M7 6L3.5 9.5 7 13" }),
+      /* @__PURE__ */ jsx16("path", { d: "M3.5 9.5H12a4 4 0 0 1 0 8h-1" })
     ] }) }),
-    /* @__PURE__ */ jsx13(ToolbarButton, { label: "Redo", onClick: redo, disabled: !canRedo, children: /* @__PURE__ */ jsxs10(Icon2, { children: [
-      /* @__PURE__ */ jsx13("path", { d: "M13 6l3.5 3.5L13 13" }),
-      /* @__PURE__ */ jsx13("path", { d: "M16.5 9.5H8a4 4 0 0 0 0 8h1" })
+    /* @__PURE__ */ jsx16(ToolbarButton, { label: "Redo", onClick: redo, disabled: !canRedo, children: /* @__PURE__ */ jsxs13(Icon2, { children: [
+      /* @__PURE__ */ jsx16("path", { d: "M13 6l3.5 3.5L13 13" }),
+      /* @__PURE__ */ jsx16("path", { d: "M16.5 9.5H8a4 4 0 0 0 0 8h1" })
     ] }) })
   ] });
 }
 
-// src/plugins/TableSettingsPlugin.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+// src/components/TableSettingsToolbar.tsx
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function Icon3({ children }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     "svg",
     {
       viewBox: "0 0 20 20",
@@ -6141,32 +6838,79 @@ function Icon3({ children }) {
     }
   );
 }
-function TableSettingsPlugin() {
-  const [editor] = useLexicalComposerContext9();
-  const isEditable = useLexicalEditable2();
-  const [anchor, setAnchor] = useState7(null);
-  const [settings, setSettings] = useState7(null);
-  const sync = useCallback5(() => {
+function TableSettingsToolbar({
+  settings,
+  position,
+  style,
+  onSettings,
+  onRowAction
+}) {
+  return /* @__PURE__ */ jsxs14("div", { className: "zui-table-settings", role: "toolbar", "aria-label": "Table", style, children: [
+    LAYOUT_OPTIONS.map(({ preset, label, icon, width, density }) => /* @__PURE__ */ jsx17(
+      ToolbarButton,
+      {
+        label,
+        active: layoutPreset(settings.width) === preset,
+        onClick: () => onSettings({ width, density }),
+        children: /* @__PURE__ */ jsx17(Icon3, { children: icon })
+      },
+      preset
+    )),
+    /* @__PURE__ */ jsx17(ToolbarDivider, {}),
+    TABLE_ROW_ACTIONS.map((rowAction) => /* @__PURE__ */ jsx17(
+      ToolbarButton,
+      {
+        label: tableRowActionTitle(rowAction),
+        disabled: rowAction.action === "delete" && !canDeleteRow(position) || rowAction.action === "insert-above" && position.hasHeader && position.index === 0,
+        onClick: () => onRowAction(rowAction.action),
+        children: /* @__PURE__ */ jsx17(Icon3, { children: rowAction.icon })
+      },
+      rowAction.action
+    ))
+  ] });
+}
+
+// src/plugins/useSelectedTable.ts
+import { useCallback as useCallback6, useEffect as useEffect12, useState as useState8 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
+function measure(element, main) {
+  const rect = element.getBoundingClientRect();
+  const mainRect = main.getBoundingClientRect();
+  const rows = Array.from(element.querySelectorAll(":scope > tbody > tr, :scope > tr")).map(
+    (row) => {
+      const r = row.getBoundingClientRect();
+      return { top: r.top - rect.top, height: r.height };
+    }
+  );
+  return {
+    box: {
+      top: rect.top - mainRect.top,
+      left: rect.left - mainRect.left,
+      right: mainRect.right - rect.right,
+      width: rect.width,
+      height: rect.height
+    },
+    rows
+  };
+}
+function useSelectedTable() {
+  const [editor] = useLexicalComposerContext10();
+  const [selected, setSelected] = useState8(null);
+  const sync = useCallback6(() => {
     const table = editor.getEditorState().read(() => {
       const node = $getSelectedTable();
-      return node ? { key: node.getKey(), settings: $getTableSettings(node) } : null;
+      const position = $getTableRowPosition();
+      return node && position ? { key: node.getKey(), settings: $getTableSettings(node), position } : null;
     });
     const element = table ? editor.getElementByKey(table.key) : null;
     const main = editor.getRootElement()?.parentElement;
     if (!table || !element || !main) {
-      setAnchor(null);
-      setSettings(null);
+      setSelected(null);
       return;
     }
-    const rect = element.getBoundingClientRect();
-    const mainRect = main.getBoundingClientRect();
-    setAnchor({
-      top: rect.top - mainRect.top,
-      right: mainRect.right - rect.right + 8
-    });
-    setSettings(table.settings);
+    setSelected({ ...table, ...measure(element, main) });
   }, [editor]);
-  useEffect11(() => {
+  useEffect12(() => {
     sync();
     const unregister = editor.registerUpdateListener(sync);
     const rootElement = editor.getRootElement();
@@ -6177,39 +6921,79 @@ function TableSettingsPlugin() {
       observer?.disconnect();
     };
   }, [editor, sync]);
-  const update = useCallback5(
+  const key = selected?.key ?? null;
+  useEffect12(() => {
+    if (key === null || typeof ResizeObserver === "undefined") return;
+    const element = editor.getElementByKey(key);
+    if (!element) return;
+    const observer = new ResizeObserver(sync);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [editor, key, sync]);
+  return selected;
+}
+
+// src/plugins/TableControlsPlugin.tsx
+import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+function TableControlsPlugin() {
+  const [editor] = useLexicalComposerContext11();
+  const isEditable = useLexicalEditable2();
+  const table = useSelectedTable();
+  const updateSettings = useCallback7(
     (next) => {
       editor.update(() => {
-        const table = $getSelectedTable();
-        if (table) $setTableSettings(table, next);
+        const node = $getSelectedTable();
+        if (node) $setTableSettings(node, next);
       });
     },
     [editor]
   );
-  if (!isEditable || !anchor || !settings) return null;
-  return /* @__PURE__ */ jsx14(
-    "div",
-    {
-      className: "zui-table-settings",
-      role: "toolbar",
-      "aria-label": "Table settings",
-      style: { top: anchor.top, right: anchor.right },
-      children: LAYOUT_OPTIONS.map(({ preset, label, icon, width, density }) => /* @__PURE__ */ jsx14(
-        ToolbarButton,
-        {
-          label,
-          active: layoutPreset(settings.width) === preset,
-          onClick: () => update({ width, density }),
-          children: /* @__PURE__ */ jsx14(Icon3, { children: icon })
-        },
-        preset
-      ))
-    }
+  const rowAction = useCallback7(
+    (action) => {
+      editor.update(() => {
+        const node = $getSelectedTable();
+        if (!node) return;
+        if (action === "delete") $deleteSelectedTableRow(node);
+        else $insertTableRowNear(node, action === "insert-above" ? "above" : "below");
+      });
+    },
+    [editor]
+  );
+  const insertAt = useCallback7(
+    (index) => {
+      editor.update(() => {
+        const node = $getSelectedTable();
+        if (node) $insertTableRowAt(node, index);
+      });
+    },
+    [editor]
   );
+  if (!isEditable || !table) return null;
+  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
+    /* @__PURE__ */ jsx18(
+      TableSettingsToolbar,
+      {
+        settings: table.settings,
+        position: table.position,
+        style: { top: table.box.top, right: table.box.right + 8 },
+        onSettings: updateSettings,
+        onRowAction: rowAction
+      }
+    ),
+    /* @__PURE__ */ jsx18(
+      TableRowRail,
+      {
+        box: table.box,
+        rows: table.rows,
+        position: table.position,
+        onInsert: insertAt
+      }
+    )
+  ] });
 }
 
 // src/EditorContent.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function EditorContent({
   placeholder = "Start writing...",
   foldable = true,
@@ -6217,7 +7001,7 @@ function EditorContent({
 }) {
   const { mode, readOnly, autoFocus, rawValue, onRawChange } = useEditorContext();
   if (mode === "edit-raw") {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx19(
       "textarea",
       {
         className: "zui-text-editor-textarea",
@@ -6230,36 +7014,36 @@ function EditorContent({
       }
     );
   }
-  return /* @__PURE__ */ jsxs11("div", { className: "zui-text-editor-body", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "zui-text-editor-main", children: [
-      /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs16("div", { className: "zui-text-editor-body", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "zui-text-editor-main", children: [
+      /* @__PURE__ */ jsx19(
         RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsx15(
+          contentEditable: /* @__PURE__ */ jsx19(
             ContentEditable,
             {
               className: "zui-text-editor-content",
               "aria-placeholder": placeholder,
-              placeholder: /* @__PURE__ */ jsx15("div", { className: "zui-text-editor-placeholder", children: placeholder })
+              placeholder: /* @__PURE__ */ jsx19("div", { className: "zui-text-editor-placeholder", children: placeholder })
             }
           ),
           ErrorBoundary: LexicalErrorBoundary
         }
       ),
-      foldable && /* @__PURE__ */ jsx15(FoldingPlugin, {}),
-      /* @__PURE__ */ jsx15(TableSettingsPlugin, {})
+      foldable && /* @__PURE__ */ jsx19(FoldingPlugin, {}),
+      /* @__PURE__ */ jsx19(TableControlsPlugin, {})
     ] }),
     children
   ] });
 }
 
 // src/plugins/OutlinePlugin.tsx
-import { useCallback as useCallback6, useEffect as useEffect12, useState as useState8 } from "react";
-import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
+import { useCallback as useCallback8, useEffect as useEffect13, useState as useState9 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext12 } from "@lexical/react/LexicalComposerContext";
 import {
   TableOfContentsPlugin
 } from "@lexical/react/LexicalTableOfContentsPlugin";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 var INDENT_PER_LEVEL = {
   h1: 0,
   h2: 1,
@@ -6269,10 +7053,10 @@ var INDENT_PER_LEVEL = {
   h6: 5
 };
 function OutlinePlugin() {
-  const [editor] = useLexicalComposerContext10();
-  const [collapsed, setCollapsed] = useState8(false);
-  const [activeKey, setActiveKey] = useState8(null);
-  useEffect12(() => {
+  const [editor] = useLexicalComposerContext12();
+  const [collapsed, setCollapsed] = useState9(false);
+  const [activeKey, setActiveKey] = useState9(null);
+  useEffect13(() => {
     const rootElement = editor.getRootElement();
     const scroller = rootElement?.closest(".zui-text-editor");
     if (!rootElement || !(scroller instanceof HTMLElement)) return;
@@ -6302,7 +7086,7 @@ function OutlinePlugin() {
       unregister();
     };
   }, [editor]);
-  const scrollTo = useCallback6(
+  const scrollTo = useCallback8(
     (key) => {
       editor.getEditorState().read(() => {
         const element = editor.getElementByKey(key);
@@ -6311,16 +7095,16 @@ function OutlinePlugin() {
     },
     [editor]
   );
-  return /* @__PURE__ */ jsx16(TableOfContentsPlugin, { children: (entries) => {
+  return /* @__PURE__ */ jsx20(TableOfContentsPlugin, { children: (entries) => {
     for (const [key] of entries) {
       editor.getElementByKey(key)?.setAttribute("data-outline-key", key);
     }
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs17(
       "div",
       {
         className: `zui-text-editor-outline ${collapsed ? "is-collapsed" : ""}`,
         children: [
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx20(
             "button",
             {
               type: "button",
@@ -6329,7 +7113,7 @@ function OutlinePlugin() {
               "aria-label": collapsed ? "Show outline" : "Hide outline",
               "aria-expanded": !collapsed,
               onClick: () => setCollapsed((c2) => !c2),
-              children: /* @__PURE__ */ jsx16(
+              children: /* @__PURE__ */ jsx20(
                 "svg",
                 {
                   viewBox: "0 0 20 20",
@@ -6339,14 +7123,14 @@ function OutlinePlugin() {
                   stroke: "currentColor",
                   strokeWidth: "1.8",
                   strokeLinecap: "round",
-                  children: /* @__PURE__ */ jsx16("path", { d: "M4 5h12M4 10h8M4 15h10" })
+                  children: /* @__PURE__ */ jsx20("path", { d: "M4 5h12M4 10h8M4 15h10" })
                 }
               )
             }
           ),
-          !collapsed && /* @__PURE__ */ jsxs12("nav", { className: "zui-text-editor-outline-list", "aria-label": "Table of contents", children: [
-            entries.length === 0 && /* @__PURE__ */ jsx16("div", { className: "zui-text-editor-outline-empty", children: "No headings" }),
-            entries.map(([key, text, tag]) => /* @__PURE__ */ jsx16(
+          !collapsed && /* @__PURE__ */ jsxs17("nav", { className: "zui-text-editor-outline-list", "aria-label": "Table of contents", children: [
+            entries.length === 0 && /* @__PURE__ */ jsx20("div", { className: "zui-text-editor-outline-empty", children: "No headings" }),
+            entries.map(([key, text, tag]) => /* @__PURE__ */ jsx20(
               "button",
               {
                 type: "button",
@@ -6367,11 +7151,11 @@ function OutlinePlugin() {
 }
 
 // src/MarkdownEditor.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 var DEFAULT_ITEMS = {
-  format: /* @__PURE__ */ jsx17(FormatButtons, {}),
-  insert: /* @__PURE__ */ jsx17(InsertButtons, {}),
-  history: /* @__PURE__ */ jsx17(HistoryButtons, {})
+  format: /* @__PURE__ */ jsx21(FormatButtons, {}),
+  insert: /* @__PURE__ */ jsx21(InsertButtons, {}),
+  history: /* @__PURE__ */ jsx21(HistoryButtons, {})
 };
 function EditorToolbar({
   children,
@@ -6379,7 +7163,7 @@ function EditorToolbar({
 }) {
   const { mode, readOnly } = useEditorContext();
   if (mode !== "edit-md" || readOnly) return null;
-  return /* @__PURE__ */ jsx17(Toolbar, { className, children });
+  return /* @__PURE__ */ jsx21(Toolbar, { className, children });
 }
 function MarkdownEditor({
   placeholder,
@@ -6388,10 +7172,10 @@ function MarkdownEditor({
   foldable = true,
   ...rootProps
 }) {
-  return /* @__PURE__ */ jsxs13(EditorRoot, { ...rootProps, children: [
-    toolbar === true && /* @__PURE__ */ jsx17(EditorToolbar, {}),
+  return /* @__PURE__ */ jsxs18(EditorRoot, { ...rootProps, children: [
+    toolbar === true && /* @__PURE__ */ jsx21(EditorToolbar, {}),
     typeof toolbar === "function" && toolbar(DEFAULT_ITEMS),
-    /* @__PURE__ */ jsx17(EditorContent, { placeholder, foldable, children: outline && /* @__PURE__ */ jsx17(OutlinePlugin, {}) })
+    /* @__PURE__ */ jsx21(EditorContent, { placeholder, foldable, children: outline && /* @__PURE__ */ jsx21(OutlinePlugin, {}) })
   ] });
 }
 MarkdownEditor.Root = EditorRoot;
@@ -6565,10 +7349,16 @@ var DRAWING_DATA_JSON_SCHEMA = {
 export {
   $createDrawingNode,
   $createFrontmatterNode,
+  $deleteSelectedTableRow,
+  $deleteTableRowAt,
   $getSelectedTable,
+  $getSelectedTableCell,
   $getTableDensity,
+  $getTableRowPosition,
   $getTableSettings,
   $getTableWidth,
+  $insertTableRowAt,
+  $insertTableRowNear,
   $isDrawingNode,
   $isFrontmatterNode,
   $isTableWidthExplicit,
@@ -6609,6 +7399,7 @@ export {
   anchorPoint,
   bindEndpoints,
   boxOutline,
+  canDeleteRow,
   codeTokenizer,
   connectorPoints,
   drawingToMermaid,
@@ -6618,6 +7409,10 @@ export {
   formatTableSettingsMarker,
   getCodeLanguages,
   hasCodeLanguage,
+  inkAmplitude,
+  inkFillOffset,
+  inkStroke,
+  insertableRowIndices,
   isBlockWidth,
   isDrawingSkeleton,
   makeBinding,
@@ -6629,7 +7424,10 @@ export {
   registerCodeLanguage,
   resolveBindings,
   resolveCodeLanguage,
+  roundedPolyline,
+  roundedRectPolygon,
   routeElbow,
+  seedFrom,
   serializeDrawingData,
   tokenizeCode,
   useMarkdownEditor