@zuilib/text-editor 0.8.0 → 0.9.0

package/dist/index.js

@@ -1699,12 +1699,26 @@ import {
   useEffect as useEffect7,
   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 { 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 +2152,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 +2670,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 +3792,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 +3800,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 +3808,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,8 +3891,385 @@ function BoxGeometry({
   }
 }
 
-// src/drawing/canvas/ShapeView.tsx
+// 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 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)
+  };
+}
+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 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;
+}
+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;
@@ -3925,7 +4320,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 +4335,7 @@ function BoxTexts({
         style: textStyle
       },
       line
-    )) : hints && /* @__PURE__ */ jsx5(
+    )) : hints && /* @__PURE__ */ jsx6(
       "text",
       {
         ...common,
@@ -3963,7 +4358,7 @@ function BoxTexts({
         style: textStyle
       },
       line
-    )) : hints && /* @__PURE__ */ jsx5(
+    )) : hints && /* @__PURE__ */ jsx6(
       "text",
       {
         ...common,
@@ -3987,7 +4382,7 @@ function BoxTexts({
         style: textStyle
       },
       line
-    )) : hints && /* @__PURE__ */ jsx5(
+    )) : hints && /* @__PURE__ */ jsx6(
       "text",
       {
         ...common,
@@ -4011,8 +4406,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 +4419,7 @@ function ConnectorLabel({
         opacity: 0.94
       }
     ),
-    lines.map((line, i) => /* @__PURE__ */ jsx5(
+    lines.map((line, i) => /* @__PURE__ */ jsx6(
       "text",
       {
         x: midX,
@@ -4043,7 +4438,8 @@ function ShapeView({
   shape,
   points,
   hideField,
-  showHints
+  showHints,
+  ink = false
 }) {
   const stroke = {
     stroke: shape.stroke,
@@ -4052,9 +4448,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 +4458,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 +4474,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 +4483,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,
@@ -4107,7 +4505,7 @@ import {
   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,
@@ -4210,7 +4608,7 @@ function TextEditOverlay({
     });
   }
   const placeholder = field === "label" ? "Label" : field === "footer" ? "Footer" : "Text";
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "textarea",
     {
       ref,
@@ -4230,16 +4628,16 @@ function TextEditOverlay({
 import { useEffect as useEffect6, 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 +4645,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 +4655,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 +4666,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 +4685,7 @@ function ToolButton({
   className,
   pressed
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       type: "button",
@@ -4296,7 +4694,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 })
     }
   );
 }
@@ -4329,11 +4727,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 +4742,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 +4760,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 +4769,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 +4785,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 +4801,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 = {
@@ -4439,6 +4837,7 @@ function DrawingCanvas({ nodeKey, data }) {
   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);
@@ -4899,11 +5298,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 +5310,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 +5324,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 +5339,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 +5371,7 @@ function DrawingCanvas({ nodeKey, data }) {
                 }
               },
               children: [
-                shapes.map((shape) => /* @__PURE__ */ jsxs8(
+                shapes.map((shape) => /* @__PURE__ */ jsxs9(
                   "g",
                   {
                     "data-shape-id": shape.id,
@@ -4980,11 +5379,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 +5394,7 @@ function DrawingCanvas({ nodeKey, data }) {
                   },
                   shape.id
                 )),
-                hoverBox && /* @__PURE__ */ jsx9(
+                hoverBox && /* @__PURE__ */ jsx10(
                   "polygon",
                   {
                     className: "zui-drawing-selection zui-drawing-bind-target",
@@ -5007,7 +5407,7 @@ function DrawingCanvas({ nodeKey, data }) {
                     pointerEvents: "none"
                   }
                 ),
-                single && isEditable && !editingText && /* @__PURE__ */ jsx9(
+                single && isEditable && !editingText && /* @__PURE__ */ jsx10(
                   SelectionOverlay,
                   {
                     shape: single,
@@ -5017,13 +5417,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 +5432,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 +5444,7 @@ function DrawingCanvas({ nodeKey, data }) {
               )
             }
           ),
-          isEditable && /* @__PURE__ */ jsx9(
+          isEditable && /* @__PURE__ */ jsx10(
             HeightHandle,
             {
               height: canvasHeight,
@@ -5068,7 +5468,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 +5491,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 +5561,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)) {
@@ -5538,21 +5938,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,
@@ -5598,6 +5985,7 @@ function EditorRoot({
   autoFocus = false,
   measure,
   defaultBlockWidth = NO_DEFAULT_BLOCK_WIDTH,
+  drawingStyle = "clean",
   children
 }) {
   const latestValueRef = useRef5(value ?? "");
@@ -5639,19 +6027,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]
   );
-  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 +6048,17 @@ 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(LinkPlugin, {}),
+      /* @__PURE__ */ jsx12(MarkdownShortcutPlugin, { transformers: SHORTCUT_TRANSFORMERS }),
+      /* @__PURE__ */ jsx12(ReadOnlyPlugin, { readOnly: readOnly || mode === "view" }),
+      autoFocus && /* @__PURE__ */ jsx12(AutoFocusPlugin, {})
     ] })
   ] }) }) }, mountKey);
 }
@@ -5689,7 +6078,7 @@ import {
 import { $getRoot, $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3 } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
 import { $isHeadingNode } from "@lexical/rich-text";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var HEADING_LEVELS = {
   h1: 1,
   h2: 2,
@@ -5787,7 +6176,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 +6186,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 +6197,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" })
         }
       )
     },
@@ -6003,23 +6392,23 @@ function useMarkdownEditor() {
 }
 
 // src/components/Toolbar.tsx
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function Toolbar({ children, className }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "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__ */ jsxs11(Fragment5, { children: [
+        /* @__PURE__ */ jsx14(FormatButtons, {}),
+        /* @__PURE__ */ jsx14(ToolbarDivider, {}),
+        /* @__PURE__ */ jsx14(InsertButtons, {})
       ] })
     }
   );
 }
 function ToolbarDivider() {
-  return /* @__PURE__ */ jsx13("div", { className: "zui-text-editor-toolbar-divider" });
+  return /* @__PURE__ */ jsx14("div", { className: "zui-text-editor-toolbar-divider" });
 }
 function ToolbarButton({
   label,
@@ -6029,7 +6418,7 @@ function ToolbarButton({
   disabled = false,
   className
 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "button",
     {
       type: "button",
@@ -6045,7 +6434,7 @@ function ToolbarButton({
   );
 }
 function Icon2({ children, strokeWidth = 1.5 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "svg",
     {
       viewBox: "0 0 20 20",
@@ -6064,27 +6453,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__ */ jsx14(Icon2, { strokeWidth: 1.8, children: /* @__PURE__ */ jsx14("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__ */ jsx14(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx14("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__ */ jsx14(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx14("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__ */ jsx14(Icon2, { strokeWidth: 1.6, children: /* @__PURE__ */ jsx14("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__ */ jsx14(Fragment5, { children: FORMAT_BUTTONS.map(({ format, label, icon }) => /* @__PURE__ */ jsx14(
     ToolbarButton,
     {
       label,
@@ -6097,36 +6486,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__ */ jsxs11(Fragment5, { children: [
+    /* @__PURE__ */ jsx14(ToolbarButton, { label: "Insert table", onClick: () => insertTable(), children: /* @__PURE__ */ jsxs11(Icon2, { children: [
+      /* @__PURE__ */ jsx14("rect", { x: "3", y: "3.5", width: "14", height: "13", rx: "1.5" }),
+      /* @__PURE__ */ jsx14("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__ */ jsx14(ToolbarButton, { label: "Insert drawing", onClick: insertDrawing, children: /* @__PURE__ */ jsxs11(Icon2, { children: [
+      /* @__PURE__ */ jsx14("rect", { x: "3", y: "5", width: "8", height: "6", rx: "1.5" }),
+      /* @__PURE__ */ jsx14("path", { d: "M13.5 8h3M14.5 6.5L17.5 8l-3 1.5" }),
+      /* @__PURE__ */ jsx14("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__ */ jsxs11(Fragment5, { children: [
+    /* @__PURE__ */ jsx14(ToolbarButton, { label: "Undo", onClick: undo, disabled: !canUndo, children: /* @__PURE__ */ jsxs11(Icon2, { children: [
+      /* @__PURE__ */ jsx14("path", { d: "M7 6L3.5 9.5 7 13" }),
+      /* @__PURE__ */ jsx14("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__ */ jsx14(ToolbarButton, { label: "Redo", onClick: redo, disabled: !canRedo, children: /* @__PURE__ */ jsxs11(Icon2, { children: [
+      /* @__PURE__ */ jsx14("path", { d: "M13 6l3.5 3.5L13 13" }),
+      /* @__PURE__ */ jsx14("path", { d: "M16.5 9.5H8a4 4 0 0 0 0 8h1" })
     ] }) })
   ] });
 }
 
 // src/plugins/TableSettingsPlugin.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function Icon3({ children }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "svg",
     {
       viewBox: "0 0 20 20",
@@ -6187,20 +6576,20 @@ function TableSettingsPlugin() {
     [editor]
   );
   if (!isEditable || !anchor || !settings) return null;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "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(
+      children: LAYOUT_OPTIONS.map(({ preset, label, icon, width, density }) => /* @__PURE__ */ jsx15(
         ToolbarButton,
         {
           label,
           active: layoutPreset(settings.width) === preset,
           onClick: () => update({ width, density }),
-          children: /* @__PURE__ */ jsx14(Icon3, { children: icon })
+          children: /* @__PURE__ */ jsx15(Icon3, { children: icon })
         },
         preset
       ))
@@ -6209,7 +6598,7 @@ function TableSettingsPlugin() {
 }
 
 // src/EditorContent.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function EditorContent({
   placeholder = "Start writing...",
   foldable = true,
@@ -6217,7 +6606,7 @@ function EditorContent({
 }) {
   const { mode, readOnly, autoFocus, rawValue, onRawChange } = useEditorContext();
   if (mode === "edit-raw") {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       "textarea",
       {
         className: "zui-text-editor-textarea",
@@ -6230,24 +6619,24 @@ 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__ */ jsxs12("div", { className: "zui-text-editor-body", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "zui-text-editor-main", children: [
+      /* @__PURE__ */ jsx16(
         RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsx15(
+          contentEditable: /* @__PURE__ */ jsx16(
             ContentEditable,
             {
               className: "zui-text-editor-content",
               "aria-placeholder": placeholder,
-              placeholder: /* @__PURE__ */ jsx15("div", { className: "zui-text-editor-placeholder", children: placeholder })
+              placeholder: /* @__PURE__ */ jsx16("div", { className: "zui-text-editor-placeholder", children: placeholder })
             }
           ),
           ErrorBoundary: LexicalErrorBoundary
         }
       ),
-      foldable && /* @__PURE__ */ jsx15(FoldingPlugin, {}),
-      /* @__PURE__ */ jsx15(TableSettingsPlugin, {})
+      foldable && /* @__PURE__ */ jsx16(FoldingPlugin, {}),
+      /* @__PURE__ */ jsx16(TableSettingsPlugin, {})
     ] }),
     children
   ] });
@@ -6259,7 +6648,7 @@ import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexic
 import {
   TableOfContentsPlugin
 } from "@lexical/react/LexicalTableOfContentsPlugin";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var INDENT_PER_LEVEL = {
   h1: 0,
   h2: 1,
@@ -6311,16 +6700,16 @@ function OutlinePlugin() {
     },
     [editor]
   );
-  return /* @__PURE__ */ jsx16(TableOfContentsPlugin, { children: (entries) => {
+  return /* @__PURE__ */ jsx17(TableOfContentsPlugin, { children: (entries) => {
     for (const [key] of entries) {
       editor.getElementByKey(key)?.setAttribute("data-outline-key", key);
     }
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs13(
       "div",
       {
         className: `zui-text-editor-outline ${collapsed ? "is-collapsed" : ""}`,
         children: [
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(
             "button",
             {
               type: "button",
@@ -6329,7 +6718,7 @@ function OutlinePlugin() {
               "aria-label": collapsed ? "Show outline" : "Hide outline",
               "aria-expanded": !collapsed,
               onClick: () => setCollapsed((c2) => !c2),
-              children: /* @__PURE__ */ jsx16(
+              children: /* @__PURE__ */ jsx17(
                 "svg",
                 {
                   viewBox: "0 0 20 20",
@@ -6339,14 +6728,14 @@ function OutlinePlugin() {
                   stroke: "currentColor",
                   strokeWidth: "1.8",
                   strokeLinecap: "round",
-                  children: /* @__PURE__ */ jsx16("path", { d: "M4 5h12M4 10h8M4 15h10" })
+                  children: /* @__PURE__ */ jsx17("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__ */ jsxs13("nav", { className: "zui-text-editor-outline-list", "aria-label": "Table of contents", children: [
+            entries.length === 0 && /* @__PURE__ */ jsx17("div", { className: "zui-text-editor-outline-empty", children: "No headings" }),
+            entries.map(([key, text, tag]) => /* @__PURE__ */ jsx17(
               "button",
               {
                 type: "button",
@@ -6367,11 +6756,11 @@ function OutlinePlugin() {
 }
 
 // src/MarkdownEditor.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var DEFAULT_ITEMS = {
-  format: /* @__PURE__ */ jsx17(FormatButtons, {}),
-  insert: /* @__PURE__ */ jsx17(InsertButtons, {}),
-  history: /* @__PURE__ */ jsx17(HistoryButtons, {})
+  format: /* @__PURE__ */ jsx18(FormatButtons, {}),
+  insert: /* @__PURE__ */ jsx18(InsertButtons, {}),
+  history: /* @__PURE__ */ jsx18(HistoryButtons, {})
 };
 function EditorToolbar({
   children,
@@ -6379,7 +6768,7 @@ function EditorToolbar({
 }) {
   const { mode, readOnly } = useEditorContext();
   if (mode !== "edit-md" || readOnly) return null;
-  return /* @__PURE__ */ jsx17(Toolbar, { className, children });
+  return /* @__PURE__ */ jsx18(Toolbar, { className, children });
 }
 function MarkdownEditor({
   placeholder,
@@ -6388,10 +6777,10 @@ function MarkdownEditor({
   foldable = true,
   ...rootProps
 }) {
-  return /* @__PURE__ */ jsxs13(EditorRoot, { ...rootProps, children: [
-    toolbar === true && /* @__PURE__ */ jsx17(EditorToolbar, {}),
+  return /* @__PURE__ */ jsxs14(EditorRoot, { ...rootProps, children: [
+    toolbar === true && /* @__PURE__ */ jsx18(EditorToolbar, {}),
     typeof toolbar === "function" && toolbar(DEFAULT_ITEMS),
-    /* @__PURE__ */ jsx17(EditorContent, { placeholder, foldable, children: outline && /* @__PURE__ */ jsx17(OutlinePlugin, {}) })
+    /* @__PURE__ */ jsx18(EditorContent, { placeholder, foldable, children: outline && /* @__PURE__ */ jsx18(OutlinePlugin, {}) })
   ] });
 }
 MarkdownEditor.Root = EditorRoot;
@@ -6618,6 +7007,9 @@ export {
   formatTableSettingsMarker,
   getCodeLanguages,
   hasCodeLanguage,
+  inkAmplitude,
+  inkFillOffset,
+  inkStroke,
   isBlockWidth,
   isDrawingSkeleton,
   makeBinding,
@@ -6629,7 +7021,10 @@ export {
   registerCodeLanguage,
   resolveBindings,
   resolveCodeLanguage,
+  roundedPolyline,
+  roundedRectPolygon,
   routeElbow,
+  seedFrom,
   serializeDrawingData,
   tokenizeCode,
   useMarkdownEditor